/*
 @ Prodestek, Front-end Developer & UI Designer by alico
 @ http://alico.me */

 

/*
 @ Open Sans : Google font kutuphanesi  */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600,700,400,300&subset=latin,latin-ext);
@import url('fonts/social/ss-social.css');
@import url('fonts/standard/ss-standard.css');
@import url('fonts/pika/ss-pika.css');


/*
 @ scroll  */

::-webkit-scrollbar         { width:7px; background: white }
::-webkit-scrollbar-track   { background: rgba(0,0,0,.2);  }
::-webkit-scrollbar-thumb   { background: rgba(0,0,0,.4);  }


 
/*
 @ basit reset */

*       { margin:0; padding:0; font-style:normal; list-style-type: none; outline-width: 0 }
s       { text-decoration: none }
a img   { border:0}

/*
 @ html 5 */
 
section,header,footer,article,time,aside,nav {
	
	position: relative;
    display:block;
}


/*
 @ clear */

.c:after  { content:" "; clear: both; display:block  }


/*
 @ hidden */

.hidden		{ display: none!important}

/*
 @ fix anahtarları */

.fix-on                 { position:fixed;}
.fix-of                 { position:absolute }

/*
 @ body  */

body,html   { height: 100% ; width:100%;} 
body 		{ color:#222; background: #eee; min-width: 1024px}
body 		{ font:300 14px Open Sans, Arial, Helvetica, sans-serif ; font-smoothing: antialiased }

body        { overflow-x: hidden;}



/*
 @ form */
 
input,button,select,textarea{
	
	font-family: Open Sans;
    font-size: 13px;
    font-weight: 300;
	outline-width:0;
    border: 0;

}		

/*
 @ baslik */
 
h1,h2,h3,h4,h5,h6  {
	
	font-family: Open Sans;
    font-weight: 300;
}


/*
 @ linkler */
 
a 					{ /*color:#1a8cc7;*/ color:#fff; text-decoration: none }

::selection 		{ background:#929788; color:#fff }

.u1 > a,a.u1        { color:#cd291a }
.u3 > a,a.u3        { color:#cd291a }
.u2 > a,a.u2        { color:#333 }
.u5 > a,a.u5        { color:#333 }

.u3 > a:hover,a.u3:hover     { border-bottom: 1px dashed #cd291a }

.u4 a:hover, a.u4:hover      { border-bottom: 1px dashed #57A1EC }
.u5 a:hover, a.u5:hover      { border-bottom: 1px dashed #333 }

.u2_b a:hover, a.u2_b:hover  { border-bottom: 1px dashed #333 }

a.a_trans, .a_trans > a      { transition:.2s }

.tc1 > *,.tc1                { color:#cd291a }

.tc2 > *,.tc2                { color:#FF5309 }





/*
 @ position */

.prt,.prb,.plt,.plb,.pcx,.pcy,.pcxy { position: absolute;}

.prt,.plt           { top:0 ;}
.prb,.plb           { bottom:0 ;}
.prt,.prb           { right:0 }
.plt,.plb           { left:0 }
.pcx,.pcxy          { left:50%; right: 50% }
.pcy,.pcxy          { top:50%; bottom: 50% }

/*
 @ capa */

.capa               { position: absolute; z-index: 10; left:0; width: 1px; height: 1px; display: block; }


/*
 @ child */

.cl:after,.cr:after{ content:" "; clear: both; display:block }
.cl > *            { float: left }
.cr > *            { float: right }
.cp > *            {  position: absolute; }


/*
 @ center */

.cm              { margin: 0 auto }

/*
 @ iskelet */

.t				 { width:960px ;  margin: 0 auto; position: relative  } 

.row             { position: relative; }               
.row:after		 { content:" "; display:block; clear:both }               
.col:after		 { content:" "; display:block; clear:both }               

.sayfa:after	 { content:" "; display:block; clear:both }

/*
 @ seperator cark */

hr              { width:100%; border: 0; display:block  }
hr  		    { height:14px; width:100%; background-repeat:repeat-x; border: 0; display:block; }
hr.plb  	    { bottom:-14px;  }


/*
 * @ form mask */

.fmask         { position:relative }
.fmask:after   { clear:both; display:block; content:" " }


/*
 * @ form mask : select */

.fmask.select         { width:160px; transition:190ms; font-size:0.9em; }
.fmask.select .h      { transition:190ms; background:white; padding:10px 8px;color:#666  }
.fmask.select .b      { display:none;position:absolute;width:100%;z-index:1; background:#fff; border-top:1px solid #ededed}
.fmask.select .s      { overflow:auto; height:100px }

.fmask.select li      { padding:8px 8px; cursor:default; line-height:16px}


/*
 @ form mask: select width turleri  */

.fmask.select[data-width='medium']    { width:220px }
.fmask.select[data-width='large']     { width:280px }
.fmask.select[data-width='small']     { width:120px }
.fmask.select[data-width='likit']     { width:100% }

/*
 @ form mask: select scroll */

.fmask.select[data-scroll='medium'] .s { height:120px }
.fmask.select[data-scroll='large'] .s  { height:70px }
.fmask.select[data-scroll='small'] .s  { height:90px }
.fmask.select[data-scroll='false'] .s   { overflow:visible; height:auto }

.fmask.select li[data-selected='on']  { color:#D6D7D8}
.fmask.select li:hover                { background:#03bcff; color:white }


.fmask.select .h i[data-icon='arrow']        { transition:190ms; color:#49b2e3; position:absolute; right:9px; top:5px; font-size:1.9em }
.fmask.select .h:hover i[data-icon='arrow']  { color:#000  }

.fmask.select.on .h i[data-icon='arrow']     { transform:rotate(180deg); top:4px; color:#888 }



/*
 @ iskelet  */

section > .t, header > .t, footer > .t{ height: 100% }

header,footer,body > section,.pattern { background-image:url(f/d50.png) }

header  		{ width: 100%; height: 146px;  background-image: url(f/d38.png); background-color:#1e8da2; z-index: 8}
header > hr     { background-image: url(f/_t0.png);  }
.st3 header > hr{ opacity: 0; transition:.3s }

.t3-unhead  header > hr { opacity: 1 }

section.t1      { background-color:#d5d5d5; }
section.t1 > hr	{ background-image: url(f/_t1.png) }

section.t2      { background-color:#d5d5d5; z-index: 6  }
.st3 section.t2 { background-color:#1E8DA2;  background-image: url(f/d38.png); }

section.t2 > hr         { background-image: url(f/_t2.png) }
.st3 section.t2 > hr	{ opacity: 0}





section.t3 		{ background-color:#a9a3be; z-index: 5 }
section.t3 > hr	{ background-image: url(f/_t3.png) }


section.t4 		{ background-color:#f6f6f6; z-index: 4 }
section.t4 > hr	{ background-image: url(f/_t4.png) }

section.t5 		{ background-image: url(f/d38.png); background-color:#4b1a07; z-index: 3 }
section.t5 > hr	{ background-image: url(f/_t5.png) }

section.t6 		{ background-image: url(f/d38.png); background-color:#eeeeee; z-index: 2}
section.t6 > hr	{ background-image: url(f/_t6.png) }


footer 			{ background-image: url(f/d38.png); background-color:#000000;z-index: 1}
footer > hr		{ background-image: url(f/_t7.png) }



body > section, footer { min-height: 100% }

section.t1 		      { min-height:auto; width: 100%; overflow: hidden; top:0; z-index:-1}
section.t1 .cover     { position: fixed; top:140px }
body 	          	{ }


.light  		{ width: 250px; height: 250px; position: absolute; background: url(f/light-white.png) no-repeat 0 0; background-size: cover; left:0; top:0; }
.light.turkuaz  { background-image: url(f/light-turkuaz.png) }
.light.dark     { background-image: url(f/light-dark.png) }

.light.f400          { width: 400px; height: 400px }

.light.dark.f400     { background-image: url(f/400/dark.png) }
.light.white.f400    { background-image: url(f/400/white.png) }
.light.mor.f400      { background-image: url(f/400/mor.png) }




.spot-light     { width: 369px; height: 369px; position: absolute; background: url(f/spotlight-white.png) no-repeat 0 0; background-size: cover;  left:0; top:0; }
.spot-light.dark{ background-image: url(f/spotlight-dark.png) }



header .own     		{ transition:.3s; width:272px;  margin-left: -136px; top:6% }
header .own *   		{ display: block }

header .own img 		{ transition:.3s; display: block; width: 100%; margin: 0 auto }

header .own a           { position: relative; z-index:3 }

header .own .arma  		     { transition:.3s; z-index: 3; position: relative; margin-bottom:4px }
header.fix-ac .own a:hover .arma    { margin-top:-8px }
header .own .arma img        { width:48% }


header .own .text       {  transition:.4s; transition-delay:.1s; margin-bottom:18px; z-index: 2; position: relative;  }
header .own .yaka       {  transition:.4s; transition-delay:.3s; position: relative;   z-index: 1 }
header .own .yaka img 	{ width: 106%; margin-left: -3% }

header .own .light		{ z-index: 2; left:16px; top:0; opacity: .7 }
header .own .spot-light	{ transition:.3s;  z-index: 1; left:-51px; top:-84px; opacity:.1;  }

header nav 					{ width: 100%; transition:.3s;  }
header nav.plb 				{ bottom: 28% ; }
header nav a				{ transition:.3s;   margin-left: 27px; font-size: 16px; position: relative; }
header nav div a:first-child{ margin-left:0 }
header nav div a i	        { transition:.5s; display: block;   font-size: 70px; height: 74px; line-height: 88px; width: 70px; position: absolute; bottom:40px; left:50%; transform:rotate(120deg) ; right:50%; margin-left:-35px; opacity:0}


header.fix-ac nav div a i       {  transition:.3s }
header nav div a:hover i	    {  font-size: 40px; transform:rotate(0deg); bottom: 28px; height: 44px; line-height: 54px; width: 40px; margin-left:-20px; opacity: .2}
header.fix-ac nav div a:hover i {  font-size: 28px; bottom: 17px; width: 28px; margin-left: -14px }


header.fix-ac       { width:100%; height: 70px; }
header.fix-ac nav   { bottom: 65%}
header.fix-ac nav a { font-size: 18px; margin-left:35px}

header.fix-ac .text { opacity: 0; margin-top: -160px}
header.fix-ac .yaka { opacity: 0; margin-top: -160px}

header.fix-ac .own{ width:250px; margin-left:-125px }
header.fix-ac .own .light { width: 145px;  height: 145px; left: 52px; top: -39px; opacity: .6}
header.fix-ac .own .spot-light {  width: 210px; height: 169px; left:18.7px; top:-94x; opacity:.15;}




.cover                  { height:84%; }
.covers	 				{ height:100%; overflow: hidden; }
.covers  > span         { display: block; position: relative;  }
.covers  > span s       { display: block; position: absolute; width: 100%; height: 100%; background: url(f/pointpattern.png); opacity:.16 }
.covers  > span 		{ display: block  }
.covers  > span img     { width: 100%;}
.t1 .cover figure       { transition:.3s; bottom: 0; top:auto; z-index: 2; margin-left: -172px}


@media screen and ( max-height: 860px ) {
    
    .t1 .cover figure img     { width:360px ; }   
    .t1 .cover figure         { margin-left: -154px}   
}

@media screen and ( max-height: 820px ) {
    
    .t1 .cover figure img     { width:340px  }  
    .t1 .cover figure         { margin-left: -144px}    
}

@media screen and ( max-height: 790px ) {
    
    .t1 .cover figure img     { width:320px  }   
    .t1 .cover figure         { margin-left: -134px}   
}

@media screen and ( max-height: 740px ) {
    
    .t1 .cover figure img     { width:290px  }   
    .t1 .cover figure         { margin-left: -119px}   
}

@media screen and ( max-height: 680px ) {
    
    .t1 .cover figure img     { width:260px  }   
    .t1 .cover figure         { margin-left: -104px}   
}

@media screen and ( max-height: 640px ) {
    
    .t1 .cover figure img     { width:240px  }
    .t1 .cover figure         { margin-left: -94px}      
}

@media screen and ( max-height: 600px ) {
    
    .t1 .cover figure img     { width:220px  }   
    .t1 .cover figure         { margin-left: -84px}      
}

@media screen and ( max-height: 550px ) {
    
    .t1 .cover figure img     { width:180px  }   
    .t1 .cover figure         { margin-left: -64px}      
}


@media screen and ( max-height: 500px ) {
    
    .t1 .cover figure img     { width:160px  }
    .t1 .cover figure         { margin-left: -54px}        
}

@media screen and ( max-height: 460px ) {
    
    .t1 .cover figure img     { width:140px  }   
    .t1 .cover figure         { margin-left: -44px}        
}

@media screen and ( max-height: 400px ) {
    
    .t1 .cover figure img     { width:120px  } 
    .t1 .cover figure         { margin-left: -34px}        
}


section.t2                { min-height:94% }
.t2 h2                    { color:#2c2b2b; font-size: 50px; text-align: center; font-weight:600; padding-top:40px; margin-bottom: 70px }
.t2 .cl                   { width: 90%; min-height: 570px; margin: 0 auto }
.t2 .cl > div             { width: 46%; }
.t2 .cl > div:first-child { margin-right: 8% }
.t2 .cl p                 { text-align: justify; color:#343327; font-size: 20px; line-height: 34px; margin-bottom: 22px }
.t2 .cl figure            { text-align: right; padding: 15px 0 0 0 }
.t2 .capa                 { top:-71px;}


.t2 h3                   { background: url(f/own.png) no-repeat ; margin-left: -233px; width: 466px; height: 184px; }
.t2 h3                   { z-index:999;bottom: -114px }
.t2 h3 span              { opacity: 0; visibility: hidden;}
.t2 .t3-head hr          { display: none }
.t2 .t3-head span        { display: none; position: absolute; z-index: 0; left:0; bottom:0; width:100%; height: 67px }

.st3 .t2  .t3-head      { position: fixed; width: 100%; top:137px;  transition: opacity .4s;  }
.st3 .t2  .t3-head span { display: block; background-color:#1E8DA2;  background-image: url(f/d38.png)  }
.st3 .t2  .t3-head hr   { display: block;  background-image: url(f/_t0.png);  }

.t3-unhead .t2  .t3-head      { opacity: 0  }




.t3 .capa               { top: -138px }

.t3 .balon figure span  { background:#C4BFD2;  overflow:hidden; border:8px solid rgba(255,255,255,0.6); }
.t3 .balon figure span img { width: 100%}
.t3 .balon figure *     { display:block }
.t3 .balon figure       { position: absolute }
.t3 .balon              { position: absolute; top: 36px; width: 100% }

.t3 .balon figure s     { background:#9d91aa; height: 60px; position: absolute; width: 1px; margin-left: -0.5px; position: absolute; left:50%; z-index: 2; right:50%; top:-59px; }
.t3 .balon figure s i   { width: 3px; height: 3px; position: absolute;  left:50%; right:50%; bottom:-3px; margin-left: -1.5px;  border-radius: 3px; background:#a6a4a9}

.t3 .balon .b1 span,
.t3 .balon .b5 span     { width: 185px; height: 185px; border-radius: 185px; }

.t3 .balon .b3 span     { width: 162px; height: 162px; border-radius: 162px; }
.t3 .balon .b3         	{ left:396px; top:65px;}
.t3 .balon .b3  s      	{ height: 120px; top: -117px}

.t3 .balon .b2 span,
.t3 .balon .b4 span    { width: 131px; height: 131px; border-radius: 131px; }

.t3 .balon .b2 ,
.t3 .balon .b4         { top: 136px}

.t3 .balon .b2 s,
.t3 .balon .b4 s       { height: 166px; top: -163px}

.t3 .head              { height: 350px;  }
.t3 .dekor             { margin-left: -200px; height: 400px; z-index: -1; opacity:.7 }
.t3 .dekor i           { position: absolute; bottom:50px; color:white; font-size: 36px;  left:90px }

.t3 .spot              { text-align: center }
.t3 .spot h3           { font-size:33px; font-weight: 700; color:#2d292e;}
.t3 .spot blockquote   { font-size:23px; width: 98%; margin: 0 auto }

.t3 .balon .b5         { right:-84px }
.t3 .balon .b1         { left:-84px }

.t3 .balon .b4         { right:130px }
.t3 .balon .b2         { left:130px }


.time  { padding: 150px 0 100px 0; position: relative; }

.time  article                 { background:#fdfcff; width: 440px; padding: 1px 0; position: relative;  border-radius: 8px; min-height: 250px; float: left }


.time  article > s { border-radius: 16px; width: 16px; height: 16px; background:#e0ddea; border:2px solid rgba(255,255,255,.7) }
.time  article > s { position: absolute; right:-53px; top:23px }
.time  article > i { min-height:auto; max-height:auto; margin:0; padding:0; max-width:auto; min-width:auto; color: white; font-size: 33px; height: 28px; line-height: 34px; position: absolute; right: -13px; text-indent: -7px; top: 20px; width: 22px }
.time  article > dd { font-size:35px; position: absolute; color:#BFBFBF; font-family: georgia; left:4px;}

.time  article figure{ width:438px; margin: 0 auto; overflow: hidden; height: 180px; border-radius:0 0 8px 8px  }
.time  article figure img{ width: 100%; display: block; margin: 0; padding: 0  }

.time  article:nth-child(2n+0)      { margin-left:80px }
.time  article:nth-child(2n+0) > s  { left:-47px; right: auto }
.time  article:nth-child(2n+0) > i  { left:-13px; right: auto }
.time  article:nth-child(2n+0) > dd  { left:auto; right:4px }

.time  article:nth-child(2n+1)      { margin-bottom:70px; margin-top: -40px     }
.time  article:nth-child(2n+0)      { margin-top:105px;  }

.time  article:first-child          { margin-top:0 }

.time  article div p { text-align: justify; font-size: 15px; line-height: 23px; margin-bottom: 14px}
.time  article h3    { color:#48474c; font-size: 20px; font-weight: 700; margin-bottom: 10px}
.time  article div   { padding: 18px}

.t4 h2              { font-size: 36px; font-weight: 700; color:#444; text-align: center}
.t4 blockquote      { font-size: 20px; color:#666; text-align: center}
.t4 .cl article a    {  padding:6px;height: 180px;  position: relative; background: white;  display: block;margin-left:19px}
.t4 .cl article span  { transition:.3s; height: 100%; display: block; overflow: hidden; position: relative; }
.t4 .cl article     { margin-bottom: 18px}
.t4 .cl             { margin-left: -18px; margin-top: 50px; padding-bottom: 70px}
.t4 .cl img         { width: 100%; transition:.3s;}
.t4 .cl i           { transition:.7s;   color:white; font-size:20px;z-index: 2; display: block; position: absolute; height: 45px; width: 45px; border-radius: 45px; transform:rotate(-180deg); margin-left: -60px; margin-top: -22.5px;text-align: center; line-height: 52px; opacity:0; border:1px solid rgba(255,255,255,.5);  left:50%; right:50% ; top:50%; bottom:50%;}
.t4 .cl a:hover i   { opacity:.9; transform:rotate(0); margin-left: -22.5px;  font-size: 28px}

.t4 .cl a:hover span        { background:rgb(0,0,0);  }
.t4 .cl a:hover span img    { opacity:.4 }


.time  .timeline     { width:6px; height: 85%; top:120px;  border-radius: 6px; background: #a5a1b2; opacity:.5 }
.time  .timeline i   { position: absolute; font-size: 80px; line-height: 91px;height: 74px; left:-37px; top:-95px; color:#a7a4bd; opacity: .9 }

.t4 > .capa            { top:-50px;}
.t4 > .t               { padding-top:70px}


.t5                    { color:#f0f0f0 }
.t5 > .capa            { top:-65px;}
.t5 .head              { padding: 70px 0 0 0; text-align: center  }
.t5 .head h3           { font-size:52px; font-weight: 700; margin:12px 0 0 0 }
.t5 .head blockquote   { font-size: 25px }
.t5 .sembol            { top: -10px; margin-left:-23.5px }
.t5 .sembol .e1        { color: #DD5B1B; display: block; font-size: 90px; font-weight: 700; text-indent: -22px; width: 47px}
.t5 .sembol .e2        { color:#f8e6df; font-size: 29px; display: block; top:30px;  position: absolute; left:9px }
.t5 .spot-light        { z-index: -1; opacity: .05; top:-50px; left:50%; margin-left:-184.5px }
.t5 .light             { z-index: -2; opacity: .1; top:-50px; left:50%; margin-left:-125px }

.t5 .post                       { padding: 75px 0 0 0 }
.t5 .post h2                    { font-size: 46px; font-weight: 700; text-shadow:0 0 2px rgba(0,0,0,.1); }
.t5 .post article figure        { position: absolute; width:368px; left:-25px; height: 377px; top:0;  }
.t5 .post article figure img    { transition:.3s; width: 240px; position: absolute; z-index: 2 }
.t5 .post article.r figure      { left:auto; right:-25px;top:15px  }
.t5 .post article.r figure img  { right: 30px; }
.t5 .post article               { min-height: 410px; position: relative; }

.t5 .post .layer                { transition:.3s; overflow:hidden; font-size: 360px; height:363px; line-height: 454px;  position: absolute; left:0;  z-index: 0; opacity: .2; top:40px; }
.t5 .post .zoom                 { transition:.3s; color:#211612;top: 123px; z-index: 1; left:37px; position: absolute; font-size: 40px; opacity: .35  }




.t5 .post article.l .zoom       { left:auto; right: 35px; top:90px; }
.t5 .post article.l figure img  { left: 20px; }
.t5 .post article.l figure .layer  { top: 20px }
.t5 .post article.l div         { margin-left: 420px  }
.t5 .post article div           { padding-bottom: 30px }
.t5 .post article.l div h2      { text-align: right;}

.t5 .post article figure a:hover .layer     { color:#000 }
.t5 .post article figure a:hover .zoom      { color:#fff }
.t5 .post article.r figure a:hover .zoom    { margin-left:-8px }
.t5 .post article.l figure a:hover .zoom    { margin-right:-8px }

.t5 .post ul                    { overflow: hidden; width: 540px; padding: 25px 0 0 0   }
.t5 .post ul li                 { border-bottom: 1px solid #6f574e; font-size: 17px; padding:11px 3px; float: left; width: 233px }

.t5 .post ul li:nth-child(2n+1) { margin-right:60px }
.t5 .post ul li label           { color:#fec5ae; width: 140px}
.t5 .post ul li                 { overflow: hidden;}

.t5 .post ul li *               { float: left }
.t5 .post ul li span            { color:white; text-align: right; width: 90px }
.t5 .post ul li.last            { border-bottom: 0; padding-top: 12px }
.t5 .post ul li.bos             { height: 22px}

.t5 .post div  p            { font-size: 20px; margin: 25px 0 0 0; font-weight: 600}
.t5 .post div  p i          { color:#FEC5AE; font-size: 25px; opacity: .4; margin-right: 6px; position: relative; top:5px;}
.t5 .post div  p b          { color:#e4e59f; font-weight: 600}




.t5 .post article        { margin-bottom: 130px}
.t5 .post hr             { margin: 0; padding: 0; position: absolute; left:-13px; bottom: -38px; background:none; border-bottom: 3px dashed rgba(255,255,255,.2); transform:rotate(9deg); width: 90% }
.t5 .post article.l hr   { transform:rotate(-9deg); right: 0; left: auto }

.t5 .post article.cati figure               { top:20px;}
.t5 .post article.cati figure img           { width:281px; }
.t5 .post article.cati figure .layer        { left: 12px; top: -35px; }
.t5 .post article.cati figure .zoom         {  right: 18px; top: 57px;}

.t5 .post article.zemin figure img          { width:260px; }
.t5 .post article.zemin figure .layer       { top:-19px;}
.t5 .post article.zemin figure .zoom        { top:72px;}
.t5 .post article.birinci figure img        { width:268px; top:29px; right: 17px }
.t5 .post article.birinci figure            { top:-10px }
.t5 .post article.birinci                   { height:450px }



.t5 .post article.graj figure img           { width:224px; }
.t5 .post article.graj figure               { top: 0}
.t5 .post article.graj                      { margin-bottom: 0; height: 500px}



.t6 .head       { padding: 60px 0 0 0; text-align: center}
.t6 .head h2    { font-size: 44px; font-weight: 700}
.t6 .head blockquote    {font-size: 23px}
.t6 .head .spot-light    {left:50%; right:50%;z-index: -1; margin-left: -184.5px; top:-77px; opacity:.03;position: absolute;}
.t6 > .capa     { top:-66px;}
.t6 .sembol            { top: -10px; margin-left:-23.5px;left:6% }
.t6 .sembol .e1        { color: #DD5B1B; display: block; ; font-size: 90px; font-weight: 700; text-indent: -22px; width: 47px}
.t6 .sembol .e2        { color:#f8e6df; font-size: 32px; display: block; top:30px;  position: absolute; left:9px }
.t6 .post              { width: 95%; margin: 0 auto}
.t6 .post > div        { width: 43%}
.t6 .post > div:first-child        { margin-right:14% }
.t6 .post           { padding: 70px 0}
.t6 .post ul        { margin-bottom: 22px; padding:0 2px 22px 2px; border-bottom: 1px dashed #bebfbf }
.t6 .post ul.last   { border-bottom: 0}
.t6 .post h4        { color:#dd5b1b; padding-left: 2px; font-weight: 400; font-size: 20px; margin-bottom:3px }
.t6 .post li        { margin-top: 8px;  color:#222;}
.t6 .post li s      { color:#dd5b1b; font-size: 15px; position: relative; margin-left: -14px; margin-right: 6px; top:2px;}



.st7 header .own            { width: 340px; margin-left:-168px }
.st7 header.fix-ac .text    { opacity: 1; margin-top:0; margin-bottom: 0 }
.st7 header.fix-ac .yaka    { opacity: 1; margin-top:0 }
.st7 header.fix-ac .own .spot-light{  height: 280px; left: 19.7px; opacity: 0.1;width: 280px; top:-70px;}
.st7 header.fix-ac .own .light{background-image: url(f/light-dark.png) ; width:230px; height: 230px; left: 52px; opacity: 0.6; top: -39px;}

footer .capa                { top:0px}
footer .t                   { text-align: center; padding-top: 60px; transition:.5s; }
.st7 footer .t              { padding-top: 230px }
footer .buy-office          { color:#f4f4f4; font-size: 24px; margin-bottom: 50px}
footer .buy-office h2       { display: inline; font-size: 24px; }
footer .social h3           { color:#fffffe; font-size: 27px; font-weight: 800 }
footer .social > i          { font-size: 24px; color:black; opacity: .4}
footer .social p            { font-size: 13px; color:#bfbfbf; margin-bottom: 40px; letter-spacing: .5px }
footer .social .cl          { font-size:84px; margin: 0 auto; width: 396px}
footer .social .cl a        { color:#EFEFEF; margin-left: 20px; height:84px; line-height:103px; width: 84px; border-radius:85px;}
footer .social .cl a:first-child { margin-left:0}
footer .social .cl a.circle { background:white ; }
footer .social .cl a.circle i {  color:#5b5c5c; position: relative; top:-11px; font-size: 61px}

footer .kavan .ortu             { display: block; margin: 50px auto 20px auto; width: 25px; height: 31px; background: url(f/ortu.png) no-repeat; }
footer .kavan .kavan-arma img   { opacity: .9; position: relative;}
footer .kavan .kavan-arma       { position: relative; width: 167px; display: block;  margin:0 auto;}
footer .kavan .kavan-arma s     { height: 1px ; display: block; background: rgba(255,255,255,.2); width: 180px; top:12px; }
footer .kavan .kavan-arma s.prt { right:-200px;top:16px;}
footer .kavan .kavan-arma s.plt { left:-200px;top:16px;}
footer .kavan                   { color:#b8b8b8 }
footer .kavan h4                { margin-top:10px; font-size: 16px}
footer .kavan .phone            { display: block; color:#f0be38; margin-top: 15px; font-size: 22px}
footer .kavan > i               { color:#c9c9c9; font-size: 36px}




@media screen and (-webkit-min-device-pixel-ratio:0){ 

   
    .grand { 

        background: #ffffff;
        background: -moz-linear-gradient(top, #ffffff 0%, #efeeee 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efeeee));
        background: -webkit-linear-gradient(top, #ffffff 0%,#efeeee 100%);
        background: -o-linear-gradient(top, #ffffff 0%,#efeeee 100%);
        background: -ms-linear-gradient(top, #ffffff 0%,#efeeee 100%);
        background: linear-gradient(to bottom, #ffffff 0%,#efeeee 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efeeee',GradientType=0 );
        -webkit-background-clip: text;
        color: transparent;
        background-clip: text;
      
    }


}






/*
 @ dropdown menu   */

.menu                    { position:relative; z-index: 20 }
.menu-vert               { width:160px }

.menu ul                 { width:160px; transition:.2s; opacity:0; visibility:hidden; position:absolute; margin-top:-15px }
.menu ul                 { right:-161px; padding-left:1px; top:0 }

.menu ul                 { margin-top:-15px; }
.menu ul                 { right:-161px;    padding-left: 1px;  top:0 }

.menu-horz > li > ul     { margin-top:0 }
.menu-horz > li > ul     { left:-2px; padding-left:1px; top:10px }

.menu-horz > li li a i  { font-size:14px;  position: absolute; top:12px; right: 6px; float: none} 
.menu-horz > li ul a ,
.menu-vert li a          { color:#DFE1E3; font-weight: 300; transition:background .3s; background:#4D565C; padding:8px 6px; display:block;}

.menu-horz > li ul h3 a  { color:#DFE1E3!important; }


.menu-vert li a:hover,
.menu-vert li.on > a,
.menu-vert li:hover > a  { background:#5BD7FF; color:white!important}


.menu-horz > li li a:hover,
.menu-horz > li li.on > a,
.menu-horz > li li:hover > a  { background:#5BD7FF; color:white!important}

.menu li                  { position:relative }
.menu-vert li             { margin:0 0 1px 0  }

.menu li:hover > ul       { visibility:visible; opacity:1;  }
.menu-vert  li:hover > ul { margin-top:0 }
.menu-horz  li:hover > ul { top:36px }



/*
 @ dikey sutun */


.y4 > *,.y[data-count='4'] > *    { height:25%; }
.y5 > *,.y[data-count='5'] > *    { height:20%; }
.y6 > *,.y[data-count='6'] > *    { height:16.6%; }
.y7 > *,.y[data-count='7'] > *    { height:14.28%; }
.y8 > *,.y[data-count='8'] > *    { height:12.5%; }
.y9 > *,.y[data-count='9'] > *    { height:11.11%; }
.y10 > *,.y[data-count='10'] > *  { height:10%; }
.y11 > *,.y[data-count='11'] > *  { height:9.09%; }
.y12 > *,.y[data-count='12'] > *  { height:8.33%; }
.y13 > *,.y[data-count='13'] > *  { height:7.69%; }
.y14 > *,.y[data-count='14'] > *  { height:7.14%; }
.y15 > *,.y[data-count='15'] > *  { height:6.66%; }
.y16 > *,.y[data-count='16'] > *  { height:6.25%; }
.y17 > *,.y[data-count='17'] > *  { height:5.88%; }
.y18 > *,.y[data-count='18'] > *  { height:5.55%; }
.y19 > *,.y[data-count='19'] > *  { height:5.26%; }
.y20 > *,.y[data-count='20'] > *  { height:5%; }

/*
 @ yatay sutun */

.x1 > *,.x[data-count='1'] > *    { width:100%; }
.x2 > *,.x[data-count='2'] > *    { width:50%; }
.x3 > *,.x[data-count='3'] > *    { width:33.33%; }
.x4 > *,.x[data-count='4'] > *    { width:25%; }
.x5 > *,.x[data-count='5'] > *    { width:20%; }
.x6 > *,.x[data-count='6'] > *    { width:16.6%; }
.x7 > *,.x[data-count='7'] > *    { width:14.28%; }
.x8 > *,.x[data-count='8'] > *    { width:12.5%; }
.x9 > *,.x[data-count='9'] > *    { width:11.11%; }
.x10 > *,.x[data-count='10'] > *  { width:10%; }
.x11 > *,.x[data-count='11'] > *  { width:9.09%; }
.x12 > *,.x[data-count='12'] > *  { width:8.33%; }
.x13 > *,.x[data-count='13'] > *  { width:7.69%; }
.x14 > *,.x[data-count='14'] > *  { width:7.14%; }
.x15 > *,.x[data-count='15'] > *  { width:6.66%; }
.x16 > *,.x[data-count='16'] > *  { width:6.25%; }
.x17 > *,.x[data-count='17'] > *  { width:5.88%; }
.x18 > *,.x[data-count='18'] > *  { width:5.55%; }
.x19 > *,.x[data-count='19'] > *  { width:5.26%; }
.x20 > *,.x[data-count='20'] > *  { width:5%; }



/*
 @ animations */

@keyframes circul {
   
    from { transform: rotate(0deg) }
    to   { transform: rotate(360deg) }
}

@keyframes fadeInDownUp {
    
    0% 		{ opacity:0; margin-top: 10px }
    %100	{ opacity:1; margin-top: 0 }
}