@import 'https://fonts.googleapis.com/css?family=Play:300,400,700,900&subset=latin-ext';
@import 'https://fonts.googleapis.com/css?family=Jura:300,400,700,900&subset=latin-ext';
@import 'font-awesome.css';
html, body {
    margin: 0;
    padding: 0;
    font:lighter 16px/18pt 'Play', sans-serif;
    height: 100%;
    width: 100%;
   
    font-weight: 300;
}
body{ background-color: #23313A; color: #FFF; background: url(../img/arkaplan.jpg);}
p,h1,h2,h3,h4{ padding: 0; margin: 0;}
body > *{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box; outline: 0;  text-decoration: none; }
a{ text-decoration: none;  transition: 0.3s; }
.fullicerik{
  -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -ms-transition: -ms-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    min-height: 80%;
  }

.bilgikutu,.bilgikutu_mavi,.bilgikutu_yesil,.bilgikutu_turuncu,.bilgikutu_kirmizi{
  display:block;
  margin:10px;
  padding:5px 25px 5px 38px;
   text-shadow:1px 1px 1px #FFF;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-border-radius:7px;
  -khtml-border-radius:7px
}
.bilgikutu_yesil{
  color:#648434;
  border:solid 1px #87D226;
  background:#CDEFA6;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E7f3D8', endColorstr='#CDEFA6');
  background:-moz-linear-gradient(50% 0%,#E7f3D8 0%,#CDEFA6 100%);
  background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,#E7f3D8),color-stop(1,#CDEFA6));
  background:-o-linear-gradient(270deg,#E7f3D8 0%,#CDEFA6 100%)
}
.bilgikutu_yesil a{ color: #f3ac19}
.bilgikutu_kirmizi{
  color:#E03638;
  border:solid 1px #FFACAD;
  background:#FFD5D5;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8ECEC', endColorstr='#FFD5D5');
  background:-moz-linear-gradient(50% 0%,#F8ECEC 0%,#FFD5D5 100%);
  background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,#F8ECEC),color-stop(1,#FFD5D5));
  background:-o-linear-gradient(270deg,#F8ECEC 0%,#FFD5D5 100%)
}

.bilgikutu_mavi{
	color:#1C6B9B;
  border:solid 1px #6ABCE2;
  background:#BDDAEB;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5EEF3', endColorstr='#BDDAEB');
  background:-moz-linear-gradient(50% 0%,#E5EEF3 0%,#BDDAEB 100%);
  background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,#E5EEF3),color-stop(1,#BDDAEB));
  background:-o-linear-gradient(270deg,#E5EEF3 0%,#BDDAEB 100%);
	}
	.bilgikutu_turuncu{
color:#C76E34;
  border:solid 1px #FFBB65;
  background:#FFE0B6;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF4E4', endColorstr='#FFE0B6');
  background:-moz-linear-gradient(50% 0%,#FFF4E4 0%,#FFE0B6 100%);
  background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,#FFF4E4),color-stop(1,#FFE0B6));
  background:-o-linear-gradient(270deg,#FFF4E4 0%,#FFE0B6 100%);
	}
.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:5px 10px;
	color:#fff;
	font:lighter 12px/24px Arial;
}

.ustbar{ padding: 5px 80px; font-family: Play, sans-serif; font-size: 14px; height: 40px;  }
 
.sag-sosyal{ float: right; font-size: 24px; line-height: 30px; }
.sag-sosyal a{ color: #FFF;margin: 0px 10px;}
.sag-sosyal a:hover {
    color: #38BAA0;
}
.sollinkler{ float: left; line-height: 30px;}
.sollinkler * { color: #d1d1d1;}
.sollinkler a:hover{ color: #38BAA0}


.logolualan{ height: 100px; width: 100%; background-color: #112433; position: relative;}
.karelogo{ position: absolute; z-index: 200; border: solid 5px #44BA9A; width: 174px; height: 182px; background: url(../img/kare-logo.png) no-repeat; left: 75px;}
.slogan{ margin-right: 80px; float: right; font-size: 28px;  line-height: 100px;}
.sfbanner{ width: 100%; height: 17vw; max-height: 220px; background: url(../img/arasayfa-banner.jpg); position: relative; background-size: cover; border-bottom: 3px solid #fff;
}
.araicerik{ width: 80%; margin: 20px auto; min-width: 300px;}
.arasayfa_baslik{font-size: 30px;
    font-weight: 400;
    color: #FFF;
    text-shadow: -1px -1px 0px #000;
    padding: 10px 0px; 
    border-bottom: 1px solid #FFF;
    margin-bottom: 10px;

    
}
.araicerik .marker{ font-size: 24px; font-weight: 400; color: #CDEFA6;}
#slaytalan {
    width: 100%;
    background-size: cover;
    height: 500px;
    position: relative;
    opacity: 0;
    background-image: url(../img/slayt/res1.jpg);
    -webkit-transition: background-image 1s ease-in-out;
    -moz-transition: background-image 1s ease-in-out;
    -o-transition: background-image 1s ease-in-out;
    transition: background-image 1s ease-in-out;
}
#slaytBaslik{ position: absolute; bottom: 0; width: 45vw; height: 15vw; background:rgba(1, 51, 103, 0.54); left: 7vw;}
#slaytBaslik h1 {
    padding-left: 2vw;
    padding-top: 2vw;
    text-transform: uppercase;
    font-size: 4vw;
}
#slaytBaslik h2{ padding-left: 2vw; padding-top: 2vw; font-size: 3vw;}
#slKumanda{ position: absolute; bottom: 10px; padding-left: 2vw;}
#slKumanda .inblok{ background-color: #fff; display: inline-block; width: 4vw; height: 10px; margin-left: 1vw; cursor: pointer;}
#slKumanda .aktifSecici{ background-color: #f00; cursor: auto;}

.galeriResimleri{ display: none;}
#sfmenu {
    width: 80%;
    background-color: #44ba9a;
    margin: 0px auto;
    height: 88px;
    border-bottom: 3px solid rgba(255, 255, 255, 0.8);
    padding:0; 
}
#sfmenu a {
    display: block; float: left;
    line-height: 88px;
    width: 15%;
    text-indent: 30px;
    font-size: 18px;
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;
  
   
}
#sfmenu a.aktif, #sfmenu a:hover{ background-color: #282A2B;}
#girismetni, #uckutular{ width: 80%; margin: 40px auto; padding: 0;  }
#girismetni h1{ font-weight: 400; font-size: 2.5vw; line-height: 1.1vw}
#girismetni h2{ font-weight: 300; padding-top: 20px;font-size: 1.8vw;line-height: 1.1vw}
#uckutular{ width: 82%; text-align: center;  }
#uckutular > .tekkutu{ width: 30.777%; padding: 1%; min-height: 250px;   margin: 0px; float: left; text-align: left; transition: .4s; }
#uckutular > .tekkutu  div.kuturesim{ position: relative; width: 100%;  min-height: 250px; background-size: cover; }
#uckutular > .tekkutu .kutubaslik {
    width: 100%;
    height: 50px;
    background-color: rgba(56, 186, 160, 0.7);
    position: absolute;
    bottom: 0;
    height: 50px;
    z-index: 100;
    text-align: center; line-height: 50px;
    font-size: 20px; font-weight: 400;text-shadow: 2px 2px 0px #000;
}
.tekkutu:hover{ opacity: .8;}
.tekkutu > .kutu1 .kuturesim { background-image:url(../img/kutular/teknoloji.jpg);}
.tekkutu > .kutu2 .kuturesim{ background-image:url(../img/kutular/profesyonel.jpg);}
.tekkutu > .kutu3 .kuturesim{ background-image:url(../img/kutular/guvenilir.jpg);}

.kisa-kutu-metin{ text-align: center; width: 80%; margin: 0px auto; padding-top: 10px;}
.boxtable {
    display: table;
    width: 100%;
    border-spacing: 2px;
    border-collapse: separate;
}

.boxsatir{ 
display:table-row;
min-height:30px; 


 }
.boxcell {
    display: table-cell;
    vertical-align: top;
     
} 

 
.tekbolum{ width: 33%; display: inline-block; text-align: left; vertical-align: top; }

.ucbolumluSatir{ margin-top: 40px;}
.motifsatir{clear:both; background: url('../img/motif.png'); width: 100%; height: 40px; opacity: .5}


#alanlar_nedenbiz_wrap {
  
    background: #F7F7F7;
    min-height: 400px;

}
#alanlarnedenbiz{ width: 80%; margin: 40px auto;  color: #737373;}
#alanlarnedenbiz > div{ margin-top: 40px; }
#alanlarnedenbiz .calismaalani{ width: 44%; margin-right: 10%;  }
#alanlarnedenbiz .nedenbiz{ width: 44%;  }
#alanlarnedenbiz > div{ float: left;} /*mobilde kaldir*/
#alanlarnedenbiz h3{font-size: 30px; font-weight: 400; color: #c0251b;}
.borderli{border-bottom: 1px solid #ccc;padding-bottom: 20px; font-size: 12px; font-weight: 400; line-height: 36px;margin: 0;}
ul.ozelliste{ margin: 0;padding: 0;}
ul.ozelliste li {
    list-style: none;
    font-size: 14px;
    margin: 5px;
    display: block;
}
ul.ozelliste > li:before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin: 5px;
    color: #c0251b;
}

#sonprojeler_wrap {
     min-height: 400px;background: #fff;min-height: 400px;
}
    #sonprojeler{  
    
   width: 80%;  color: #737373; margin: 0px auto; }
#sonprojeler h3{ font-size: 30px; color: #282A2B; padding-top: 40px; margin: 0; font-weight: 400; }


.tekliproje {
    margin-top: 40px;
   
    width: 240px;
    margin-right: 2%;
    float: left;
    min-height: 240px;
    background-color: red;
    background-size: contain;
    position: relative;
    opacity: .8;
    transition: .3s;
}
.tekliproje:hover{ opacity: 1}
.tekliproje .projebaslik {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 60px;
    background: #44BA9A;
    text-align: center;
    line-height: 60px;
    color: #FFF;
    font-size: 22px;
    	overflow: hidden; 
    white-space: nowrap;  
    text-overflow: ellipsis;  
}

#bizeyaz{ height: 80px; color: #FFF; background-color: #FFF; border-spacing: 0; line-height: 80px; font-size: 3.5vw; }

.buradekes960{ float: left;
}
.projekutu {
    display: inline-block;
    width: 32.333%;
    overflow: hidden;
   
    float: left;
    margin: 20px 0.5%;
    height: 224px;
    background-size: 100% 100%;
    position: relative;
}
.proje-baslik-metni{ position: absolute; width: calc(100% - 20px);  height: 40px; bottom: 0; background: #eaeaea; }
.projekutu img{}
.projekutu:hover h4.prbaslik{ color: #38BAA0;   }
.proje-baslik-metni{
    padding:10px 20px;
}

h4.prbaslik {
    padding: 0;
    margin: 0;
    color: #000;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;transition: .4s;
}
h5.prozet {
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #ff6a00;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
}


 
 
.footerArea{ background: #102131; min-height: 200px; width: 100%; padding-top: 40px;}
.foot-firmaaad{ font-size: 32px; color: #FFF; display: block; padding-top: 20px;}
.dhimza{ display: block; color: #CDEFA6; padding-top: 20px;}
.foot-baslik {
    display: block;
    width: 220px;
    font-size: 18px;
    font-weight: 400;
    padding: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFF;
    margin: 0;
}

.footer-sosyal{ font-size: 24px; line-height: 30px; }
.footer-sosyal a{ color: #FFF;margin: 0px 6px;}
.footer-sosyal a:hover {
    color: #38BAA0;
} 
  
h6.telno{ margin: 0; padding: 0; font-size: 18px;}
.noktalidivli div{ padding-bottom: 2px; border-bottom: 1px dotted rgba(255,255,255,.2); width: 90%;}
 
  
.html_content_loader{    
    /* loading bar yapılacak. Opacity 1 den sıfıra inecek docready de*/
    opacity: 0;
    z-index: 0;
    color: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}
.ara_sf_title {
    background-color: rgb(42, 160, 239);
    color: #FFF;
    font-size: 32px;
    height: 42px;
    line-height: 42px;
    text-indent: 20px;
    padding: 4px;
    border-radius: 5px;
}
#harita{ width: 100%; min-height: 200px;}
 
.clearfix:after { 	/*float dolayisiyla height problemi oldugunda parent div e ata.*/
   content: " ";
   display: block; 
   height: 0px;
   width:0px; 
   clear: both;
}
 
.yuzde90ortali{ width: 90%; margin: 0px auto}
.dipsos{ width: 32px; height: 32px; background-size: cover; margin: 5px; display: inline-block; float: left;
}
a.facebook-logo{ background-image: url(../img/social/facebook.png);  }
a.twitter-logo{ background-image: url(../img/social/twitter.png);  }
a.google-plus-logo{background-image: url(../img/social/google-plus.png);}
a.instagram-logo{background-image: url(../img/social/instagram.png);}
a.email-logo{background-image: url(../img/social/email.png);}

 /*iletişim*/

.iletisimformu{ position: relative;width: 50%; min-width: 320px; float: left; }
.haritavebilgiler{ float: left; width: 49%; min-width: 300px; margin-left: 1%;
}
.zorunlualanlar{ font-size: 16px; text-shadow: 1px -1px 0px #000; color: #FFF; padding: 3%; background-color: #4D6A79; }
.contactForm input, .contactForm textarea {
    border: solid 1px rgba(200,200,200,0.5);
    width: 310px;
    height: 40px;
    line-height: 40px;
    margin: 20px;
    padding-left: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: 16px;
    transition: .3s;
}
.contactForm textarea{
  height: 120px; width: 90%; min-width: 320px; line-height: 24px;
}
.contactForm .formSubmitter{
   display: block;
    background-color: #22455B; color: #FFF; float: right; margin-right: 3%; padding: 4px; text-align: center;   
    height: 40px; line-height: 28px;
    cursor: pointer; margin-bottom: 10px; width: 30%; min-width: 80px;
   
}
.contactForm .formSubmitter:hover{ background-color: #4585ad}
#errmsg{ background-color: #737373; color: #FFF; padding-left: 10px; border: 1px dotted #FFF;}
.koduyenile{ color: #38BAA0;}

input, textarea, select {
  outline: none;
}

.google_map{width: 100%; max-width: 800px; height: 300px; border: none; float: left;}
.i_dokunveara{ background-color: #38BAA0;color: #FFF; padding: 4px 6px;; border-radius: 5px;}

.siteharita{ margin-left:15px;}
.siteharita a{ color: #CDEFA6;}
.mapSite{ list-style:none; }
.mapAltUL{ margin-left:25px}
.mapSite li{  margin:4px}
.mapLi{ font-weight:bold}