@charset "utf-8";
/* CSS Document */


h4, h5, h6,
h1, h2, h3 {margin: 0;}
ul, ol {margin: 0; padding:0;}
p {margin: 0;}
html, body{
	height:100%;
	width:100%;
	margin:0;
	font-family:'GothamX-Regular';
	font-size:13px;
	overflow:hidden;
	background-color:#000;
}
.overAuto{overflow: auto;}

.Index999{z-index:999 !important;   }
#bgImage{
	position:absolute;
	background-image: url(../images/bg_01.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	left: 50%;
    top: 50%;
	width:100%;
	height:100%;
    transform: translate(-50%,-50%);
}


.effectImage{

	 -webkit-animation-name: shake-opacity2;
  -ms-animation-name: shake-opacity2;
  -webkit-animation-name: shake-opacity2;
  -webkit-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -webkit-animation-duration: 200ms;
  -webkit-animation-iteration-count: forward;
  -ms-animation-iteration-count: forward;
  -webkit-animation-iteration-count: forward;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  
}
@-webkit-keyframes shake-opacity2 { 0% { -webkit-transform:  rotate(0deg); opacity: 0.2; }
  10% { -webkit-transform:   rotate(0.5deg); opacity: 0.9; }
  20% { -webkit-transform:   rotate(1.5deg); opacity: 0.6; }
  30% { -webkit-transform:   rotate(-2.5deg); opacity: 0.8; }
  40% { -webkit-transform:   rotate(-2.5deg); opacity: 0.4; }
  50% { -webkit-transform:   rotate(0.5deg); opacity: 0.6; }
  60% { -webkit-transform:   rotate(-0.5deg); opacity: 0; }
  70% { -webkit-transform:   rotate(-0.5deg); opacity: 0.8; }
  80% { -webkit-transform:   rotate(0.5deg); opacity: 0.6; }
  90% { -webkit-transform:   rotate(-1.5deg); opacity: 0.4; } }

@-ms-keyframes shake-opacity2 { 0% { -ms-transform: rotate(0deg); opacity: 0.8; }
  10% { -ms-transform:   rotate(-2.5deg); opacity: 0; }
  20% { -ms-transform:   rotate(-2.5deg); opacity: 0.9; }
  30% { -ms-transform:   rotate(-1.5deg); opacity: 0.4; }
  40% { -ms-transform:   rotate(-2.5deg); opacity: 0.6; }
  50% { -ms-transform:   rotate(1.5deg); opacity: 0.3; }
  60% { -ms-transform:   rotate(-0.5deg); opacity: 0.6; }
  70% { -ms-transform:   rotate(1.5deg); opacity: 0.8; }
  80% { -ms-transform:   rotate(-0.5deg); opacity: 0.5; }
  90% { -ms-transform:   rotate(-0.5deg); opacity: 0; } }

@keyframes shake-opacity2 { 0% { transform:  rotate(0deg); opacity: 0.1; }
  10% { transform:   rotate(-1.5deg); opacity: 0.1; }
  20% { transform:   rotate(-0.5deg); opacity: 0.4; }
  30% { transform:   rotate(-2.5deg); opacity: 0.6; }
  40% { transform:   rotate(-1.5deg); opacity: 0.3; }
  50% { transform:   rotate(1.5deg); opacity: 0.3; }
  60% { transform:   rotate(0.5deg); opacity: 0.6; }
  70% { transform:   rotate(0.5deg); opacity: 0.1; }
  80% { transform:   rotate(-0.5deg); opacity: 0.1; }
  90% { transform:   rotate(-1.5deg); opacity: 0.8; } }
  
  .effectImageBg{
	 -webkit-animation-name: shake-opacity;
  -ms-animation-name: shake-opacity;
  -webkit-animation-name: shake-opacity;
  -webkit-animation-duration: 200ms;
  -ms-animation-duration: 200ms;
  -webkit-animation-duration: 200ms;
  -webkit-animation-iteration-count: forward;
  -ms-animation-iteration-count: forward;
  -webkit-animation-iteration-count: forward;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
/*-webkit-filter: contrast(200%);*/
}
@-webkit-keyframes shake-opacity { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); opacity: 0.2; }
  10% { -webkit-transform: translate(-50%,-50%) rotate(0.5deg); opacity: 0.9; }
  20% { -webkit-transform: translate(-50%,-50%) rotate(1.5deg); opacity: 0.6; }
  30% { -webkit-transform: translate(-50%,-50%) rotate(-2.5deg); opacity: 0.8; }
  40% { -webkit-transform: translate(-50%,-50%) rotate(-2.5deg); opacity: 0.4; }
  50% { -webkit-transform: translate(-50%,-50%) rotate(0.5deg); opacity: 0.6; }
  60% { -webkit-transform: translate(-50%,-50%) rotate(-0.5deg); opacity: 0; }
  70% { -webkit-transform: translate(-50%,-50%) rotate(-0.5deg); opacity: 0.8; }
  80% { -webkit-transform: translate(-50%,-50%) rotate(0.5deg); opacity: 0.6; }
  90% { -webkit-transform: translate(-50%,-50%) rotate(-1.5deg); opacity: 0.4; } }

@-ms-keyframes shake-opacity { 0% { -ms-transform: translate(-50%, -50%) rotate(0deg); opacity: 0.8; }
  10% { -ms-transform: translate(-50%,-50%) rotate(-2.5deg); opacity: 0; }
  20% { -ms-transform: translate(-50%,-50%) rotate(-2.5deg); opacity: 0.9; }
  30% { -ms-transform: translate(-50%,-50%) rotate(-1.5deg); opacity: 0.4; }
  40% { -ms-transform: translate(-50%,-50%) rotate(-2.5deg); opacity: 0.6; }
  50% { -ms-transform: translate(-50%,-50%) rotate(1.5deg); opacity: 0.3; }
  60% { -ms-transform: translate(-50%,-50%) rotate(-0.5deg); opacity: 0.6; }
  70% { -ms-transform: translate(-50%,-50%) rotate(1.5deg); opacity: 0.8; }
  80% { -ms-transform: translate(-50%,-50%) rotate(-0.5deg); opacity: 0.5; }
  90% { -ms-transform: translate(-50%,-50%) rotate(-0.5deg); opacity: 0; } }

@keyframes shake-opacity { 0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.1; }
  10% { transform: translate(-50%,-50%) rotate(-1.5deg); opacity: 0.1; }
  20% { transform: translate(-50%,-50%) rotate(-0.5deg); opacity: 0.4; }
  30% { transform: translate(-50%,-50%) rotate(-2.5deg); opacity: 0.6; }
  40% { transform: translate(-50%,-50%) rotate(-1.5deg); opacity: 0.3; }
  50% { transform: translate(-50%,-50%) rotate(1.5deg); opacity: 0.3; }
  60% { transform: translate(-50%,-50%) rotate(0.5deg); opacity: 0.6; }
  70% { transform: translate(-50%,-50%) rotate(0.5deg); opacity: 0.1; }
  80% { transform: translate(-50%,-50%) rotate(-0.5deg); opacity: 0.1; }
  90% { transform: translate(-50%,-50%) rotate(-1.5deg); opacity: 0.8; } }

/*@-webkit-keyframes haunted {
	0% { width:400px; height:225px; opacity:0.1;}
	25% { width:700px; height:397px; opacity:0.2;} 
	49% { width:700px; height:397px; opacity:0.2;} 
	50% { width:1000px; height:563px; opacity:0.5;} 
	75% { width:1400px; height:788px; opacity:0.8;} 
	100% { width:100%; height:100%; opacity:1;}
}
@keyframes haunted {
	0% { width:400px; height:225px; opacity:0.1;}
	25% { width:700px; height:397px; opacity:0.2;} 
	49% { width:700px; height:397px; opacity:0.2;} 
	50% { width:1000px; height:563px; opacity:0.5;} 
	75% { width:1400px; height:788px; opacity:0.8;} 
	100% { width:100%; height:100%; opacity:1;}
}*/



.drop{
  position:absolute;
  width:8px;
  height:18px;
  opacity:1;
	background-image: url(../images/damla.png);



  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  -webkit-animation: anim-drop 2s forwards;
  -moz-animation:    anim-drop 2s forwards;
  -o-animation:      anim-drop 2s forwards;
  animation:         anim-drop 2s forwards;

}

@-webkit-keyframes anim-drop {
  75% {opacity:0;}
  100% {
      -webkit-animation-timing-function: ease-out;
      -webkit-transform:scale(0.25,10) translateY(10em);
  }
}
@-moz-keyframes anim-drop {
  75% {opacity:0;}
  100% {
    -moz-animation-timing-function: $ease-out;
    -moz-transform:$scale(0.25,10) translateY(10em);
  }
}
@-o-keyframes anim-drop {
  75% {opacity:0;}
  100% {
    -o-animation-timing-function: ease-out;
    -o-transform:scale(0.25,10) translateY(10em);
  }
}
@keyframes anim-drop {
  75% {opacity:0;}
  100% {
    animation-timing-function: ease-out;
    transform:scale(0.25,10) translateY(10em);
  }
}


header:not(#headerContent){
	width:100%;
	height:428px;
	float:left;
	background-image: url(../images/menu_bg.png);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
	position:relative;
	z-index:3;
}

#headerContent{width:100%;position:absolute; z-index:6; top:0px;}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}


canvas#output{
  filter: saturate(0.68) contrast(1.6); 
  -webkit-filter:saturate(0.68) contrast(1.6); 

  -moz-filter: saturate(0.68) contrast(1.6);

}

.ortaContent {
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
 position:relative;
 width:850px;
}

.logo{
	float:left;
	margin-left:35px;
}

.clear{
	clear:both;
}


.btnSocial{
	float:right;
	height:38px;
	margin-right:10px;
	margin-top:15px;
}
.btnDil{
	float:right;
	font-family:'Horroroidx';
	font-size:30px;
	color:#fff;
	margin-top:18px;
	cursor:pointer;
}
.btnDil:hover{color:#FFFF66;}

#baslikOyuncular{
	position:relative;
	float:left;
	top:-290px;
	z-index:5;
}
#icerikContent{
	float:left;
	position:relative;
	z-index:5;
	top:-290px;
	height:auto;
}
#oyuncuIcerik{
	min-height: 225px;
	float:left;
	font-family:'typenoksidiregular';
	font-size:13px;
	color:#fff;
	line-height:22px;
	margin-bottom:20px;
}

.icerikBaslik{
	float::left;
	font-size:14px;
	color:#FFFF00;
	margin-top:10px;
}
.oyuncuFoto{
	float:left;
	margin-right:15px;
}
#hakkindaIcerik{
	float:left;
	font-family:'typenoksidiregular';
	font-size:13px;
	color:#fff;
	line-height:22px;
	margin-bottom:20px;
}
#sssIcerik{
	float:left;
	font-family:'typenoksidiregular';
	font-size:13px;
	color:#fff;
	line-height:22px;
	margin-bottom:20px;
}
.sssBaslik{
	float::left;
	font-size:16px;
	color:#FFFF00;
	margin-top:10px;
}
#uyariIcerik{
	float:left;
	font-family:'typenoksidiregular';
	font-size:16px;
	color:#fff;
	line-height:22px;
	margin-bottom:20px;
}
#uyariIcerik span{color:#FFFF00;}

#iletisimIcerik{
	float:left;
	font-family:'typenoksidiregular';
	font-size:13px;
	color:#fff;
	line-height:22px;
	margin-bottom:20px;
}
.iletisimBaslik{
	float::left;
	font-size:16px;
	color:#FFFF00;
	margin-top:10px;
}
.iletisimBox{
	float:left;
	margin-right:45px;
	margin-bottom:10px;
}
#iletisimHarita{
	float:left;
	width:760px;
	height:380px;
}
#btnContent{
	width:850px;
	margin:0 auto;
	display:table;
	text-align:center;
	margin-top:100px;
}
.btnDehset{
	display:table-cell;
	margin-bottom:20px;
}


.videoContent{
	float:left;
	width:30%;
	margin-right:15px;
	margin-bottom:15px;
}
.videoContent img{width:100%;}

#sagImgEl{
	position:absolute;
	bottom:-10px;
	right:100px;
	display:none;
}
.sagElAnimate{
	
-webkit-animation:sagEl 2s linear forwards;
    -moz-animation:sagEl 2s linear forwards;
    animation:sagEl 2s linear forwards;
	transform: rotate(0deg);
    transform-origin: bottom center;
}
@-moz-keyframes sagEl { 
50% { -moz-transform: rotate(10deg); } 
}
@-webkit-keyframes sagEl { 
50% { -webkit-transform: rotate(10deg); } 
}
@keyframes sagEl { 
50% { -webkit-transform: rotate(10deg);  } 
}

#sagAltKan{
	position:absolute;
	bottom:-300px;
	right:-500px;
	transition:all 0.15s linear;
    -webkit-transition:all 0.15s linear;
  	-moz-transition:all 0.15s linear;
  	-o-transition:all 0.15s linear;
  opacity:0;
  display: none;
}
#solAltKan{
	position:absolute;
	bottom:-300px;
	left:-400px;
  opacity:0;
	transition:all 0.15s linear;
    -webkit-transition:all 0.15s linear;
  	-moz-transition:all 0.15s linear;
  	-o-transition:all 0.15s linear;
  display: none;
}
.solEffect{
	bottom:-210px !important;
	left:-210px !important;	
	opacity:1 !important;
}
.sagEffect{
	bottom:-20px !important;
	right:-120px !important;
	opacity:1 !important;
}


#dehsetYazi{
	float:left;
	margin-top:-290px;
	position:relative;
	z-index:99;
	display:none;
}

#bgVideo{
	position: absolute;
	left: 0px;
	top: 0;
	width: 100%;
	z-index: 9;
	display:none;

}
#ideaLogo{
	position:fixed;
	right:0;
	bottom:0;
	z-index:9;
}


/*#sinek{

	-webkit-animation:sinekMov 0.5s linear forwards;
    -moz-animation:sinekMov 0.5s linear forwards;
    animation:sinekMov 0.5s linear forwards;
}
@-webkit-keyframes sinekMov {
    0% {
        -webkit-transform:translate(0px, 0px) rotate(180deg);
    }  
  5% {
        -webkit-transform:translate(50px, 30px) rotate(60deg);
  }
  10% {
      -webkit-transform:translate(80px, 180px) rotate(90deg);
  }
  15% {
      -webkit-transform:translate(110px, 15px) rotate(90deg);
  }
  20% {
      -webkit-transform:translate(150px, 100px) rotate(90deg);
  }
  25% {
      -webkit-transform:translate(150px, 110px) rotate(80deg);
  }
  30% {
      -webkit-transform:translate(180px, 50px) rotate(60deg);
  }
  35% {
      -webkit-transform:translate(220px, 80px) rotate(40deg);
  }
   40% {
      -webkit-transform:translate(250px, 50px) rotate(20deg);
  }
   45% {
      -webkit-transform:translate(280px, 60px) rotate(50deg);
  }
   50% {
        -webkit-transform:translate(300px, 100px) rotate(70deg);
    }
	   55% {
        -webkit-transform:translate(270px, 120px) rotate(190deg);
    }
	   60% {
        -webkit-transform:translate(240px, 150px) rotate(90deg);
    }
	   65% {
        -webkit-transform:translate(210px, 180px) rotate(300deg);
    }
	   70% {
        -webkit-transform:translate(180px, 180px) rotate(300deg);
    }
	   75% {
        -webkit-transform:translate(150px, 110px) rotate(300deg);
    }
	   80% {
        -webkit-transform:translate(120px, 130px) rotate(300deg);
    }
	   85% {
        -webkit-transform:translate(90px, 140px) rotate(300deg);
    }
	
	   90% {
        -webkit-transform:translate(60px, 110px) rotate(180deg);
    }
	   95% {
        -webkit-transform:translate(30px, 90px) rotate(180deg);
    }
	   100% {
        -webkit-transform:translate(0px, 0px) rotate(180deg);
    }
}
*/




* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


.navigation {
  display: block;
  margin:0;
  height:60px;
  float:right;
  font-family:'Horroroidx';
  font-size:30px;
  margin-right: 30px;
}

.navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

.navigation > ul > li {
  list-style-type: none;
  margin: 0;
  padding: 23px 20px;
  height:60px;
  display: inline-block;
  position: relative;
  float:left;
  color: #fff;
  z-index:2;
  cursor:pointer;
}

.navigation li a {
  padding:0;
  color: #fff;
  display: inline-block;
  outline: 0;
  text-decoration:none;
}

.navigation > ul > li:first-child {/*border-left: 1px solid #f49123;*/}



.navigation li ul.sub {
  position: absolute;
  display: none;
  width: 200px;
  top:73px;
  left:-1px;
  border:solid #f49123 1px; 
  padding-top: 0;
  background: #d21727;
}

.navigation li.has-sub.open ul.sub { display: block; }

.navigation li ul.sub li {
  display: block;
  list-style-type: none;
}

.navigation li ul.sub li a {
  padding: 10px;
  font-size: 15px;
  color: #fff;
  display: block;
  font-weight: 400;
}

.navigation li ul.sub li:last-child a { border-bottom: none; }

.navigation li:hover a{
  color: #FFFF66;
}
.navigation li.open a {color: #505050;}


navigation li ul.sub li:hover a { background: #fff;}

.navigation li ul.sub li:first-child:hover a { border-radius: 0; }

.navigation li:hover .arrow-down { border-top: 5px solid #fff; }

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -5px;
  content: '';
}



.mobile header:not(.Index999){
  z-index: 6 !important;
}
.mobile  #baslikOyuncular{
  z-index: 7 !important;
}
.mobile  #icerikContent{
  z-index: 7 !important;
}

@media (min-width: 1300px) {
  .container {
    width: 100%;
  }
  .navigation > ul > li {padding: 23px 15px;}
}
@media (min-width: 1300px) {
  .container {
    width: 1300px;
  }

}



@media only screen and (max-width:1250px) {

.navigation > ul > li {padding: 23px 10px;}
.navigation{font-size:28px;}

}

@media (max-width:1080px){
	.navigation{font-size:20px;}

}

@media (max-width:940px){
	
	.navigation{font-size:19px;}
		   .ortaContent {
    width: 100%;
  }
	
}

@media (max-width:905px){
.navigation > ul > li {padding: 23px 7px;}
.logo img {height: 50px; margin-top:5px;}
}

@media (min-width:821px)
{
	.navigation li:hover ul.sub { display: block; }
}



@media only screen and (max-width:820px) {

.logo{height:55px; margin-left:60px;}
.logo img{margin-top:3px;}
#btnContent{width:600px;}


.navigation {
  background: #000;
  width: 100%;
  height: 100vh;
  display: block;
  position: absolute;
  left: -100%;
  top: 55px;
  transition: left 0.3s linear;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index:2;
 border-right: solid #ccc 1px;
}

.navigation.visible {
  left: 0px;
  transition: left 0.3s linear;
}

.nav_bg {
  display: inline-block;
  vertical-align: middle;
  height: 55px;
  margin: 0;
  position: absolute;
  top: 0px;
  left: 0px;
}

.nav_bar {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background-color: #000;
  padding:14.5px;
  height:55px;
}

.nav_bar span {
  height: 2px;
  background: #fff;
  margin: 5px;
  display: block;
  width: 25px;
  transition:all 0.3s linear;
}
.spanMenu1{
	transform:rotate(45deg);
	width: 25px !important;
	margin-top: 10px !important;
}
.spanMenu2{
	transform:rotate(-45deg);
	margin-top:-7px !important;
}
.spanMenu3{
	
	display:none !important;

}


.navigation ul { border:none; }

.navigation > ul > li{ padding:0px; height:auto; border-right:none; }

.navigation li { display: block; width:100%; }

.navigation li a {
  display: block;
  color: #FFF;
  font-weight: 500;
  padding:15px 20px;
  border-bottom:solid #8A0009 1px;
  background:url(../images/menu_ok.png) no-repeat;
  background-position:right;
}

.navigation li:first-child:hover a { border-radius: 0; }
.navigation li:first-child{border-left:none !important;}

.navigation li ul.sub { position: relative; width:100%; left:0; top:0; border:none; }

.navigation li ul.sub li a {
  background: #eee !important;
  border-bottom: solid #d3d4d6 1px;
  color: #505050 !important;
}

.navigation li:hover a {
  background: #fff;
  color: #FFFF66 !important;
  background:url(../images/menu_ok.png) no-repeat;
  background-position:right;
}

.navigation li ul.sub li:hover a {
  background: #eee!important;
  color: #77787b !important;
}
.navigation li ul.sub li a{
	font-size:14px;
}

.navigation li ul.sub li a { padding: 10px 10px 10px 30px; }

.navigation li:hover .arrow-down { border-top: 5px solid #fff; }

.arrow-down {
  border-top: 5px solid #505050;
  position: absolute;
  top: 20px;
  right: 10px;
}

.opacity {
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


}

@media (max-width:780px){
	#iletisimHarita{width:95vw;}

}





@media (max-width:620px)
{
	#dehsetYazi img{width:100%;}
	
}



@media (max-width:590px)
{
#btnContent{width:100%;}
.btnDehset{display:inline-block;}
.btnDehset img{width:70%;}
}

@media (max-width:460px)
{

#btnContent{margin-top:0;}

}


@media only screen and (max-width:380px) {
	.btnSocial{margin-top:5px; margin-right:5px;}
	.btnDil{margin-top:8px; font-size:25px;}
	.btnSocial img{width:80%;}
	.videoContent{width:100%;}
}



@media (max-width:320px){

}