/***********************
HAT MEDYA 2017
www.hatmedya.com
info@hatmedya.com
chrome10+, ie9+, ff4+
***********************/
@import"../css/reset.css";@import"../css/hatresponsive.css";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:400,400i&subset=latin-ext');
body {background: #fff; font: 16px/28px 'Roboto', sans-serif; color: #111111; position: relative; min-width: 320px; overflow-x: hidden;}
html,body {height: 100%;}

p {padding-bottom: 20px}
a {color: #222; font-style: italic; text-decoration: none;}
a:hover {color: #3a7bb3; text-decoration: none; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear;}
img {border: 0px;}

h1,h2,h3,h4 {font-weight: normal; line-height: normal; font-family: 'Roboto Condensed', sans-serif;}
h1 {font-size: 30px; padding-bottom: 20px; color: #fe1c10}
h2 {font-size: 24px; padding-bottom: 20px; color: #fe1c10}
h3 {font-size: 21px; padding-bottom: 20px; color: #111;}
h4 {font-size: 18px; padding-bottom: 15px;} 

.white { color: #fff;}

.clear {clear: both; line-height: 0; font-size: 0; overflow: hidden; height: 0; width: 100%;}
.fleft {float: left}
.fright {float: right}
.alignright {text-align: right}
.aligncenter {text-align: center}
.alignjust {text-align: justify}
.alignmiddle *{vertical-align: middle}
.it {font-style: italic;}

.sayfa404 {font-size: 18px; line-height: 28px; text-align: center; height: 220px; padding-top: 150px;}

/* PADDING ---------------------------------------- */
.padtop5{padding-top:5px}.padtop10{padding-top:10px}.padtop15{padding-top:15px}.padtop20{padding-top:20px}.padtop25{padding-top:25px}.padtop30{padding-top:30px}.padtop35{padding-top:35px}.padtop40{padding-top:40px}.padtop45{padding-top:45px}.padtop50{padding-top:50px}.padtop55{padding-top:55px;}.padtop60{padding-top:60px;}.padbot5{padding-bottom:5px}.padbot10{padding-bottom:10px}.padbot15{padding-bottom:15px}.padbot20{padding-bottom:20px}.padbot25{padding-bottom:25px}.padbot30{padding-bottom:30px}.padbot35{padding-bottom:35px}.padbot40{padding-bottom:40px}.padbot45{padding-bottom:45px}.padbot50{padding-bottom:50px}



.wa { position:fixed; z-index:2; bottom:30px; right:35px; background-color: rgba(37,211,102,1); border-radius:50%;}
.wa a { }
.wa i { font-size:46px; color:#fff; margin-left:10px;}
.whatsappbutton { border: none; color: #fff; text-decoration: none; font-size: 50px; width: fit-content; margin: auto; cursor: pointer; }

.whatsappbutton span { vertical-align: text-bottom !important; }

.fa-whatsapp { margin-right: 0; }

.ins { position:fixed; z-index:2; bottom:110px; right:35px;}
.ins a { }
.insbutton { border: none; color: #fff; text-decoration: none; width: fit-content; margin: auto; cursor: pointer; }

.inspbutton span { vertical-align: text-bottom !important; }



.home0 h2 { padding: 20px 0; margin: 0 0 20px; text-align: center; font: 34px/36px 'Roboto Condensed', sans-serif; color: #fe1c10; display: block; border-bottom: 1px solid #fe1c10;}
.home0 .urunler{ margin: 0 0 30px 0;}
.home0>.grid0>.urunler>.grid3 {background: none; height:auto; height: 300px; margin-bottom: 30px; text-align: center; }
.home0>.grid0>.urunler>.grid3:nth-child(3n+1){ margin-left:0;}
.home0>.grid0>.urunler>.grid3>a { font-style: normal}
.home0>.grid0>.urunler>.grid3>a>h3{padding: 10px 0; background: rgba(0,3,185,1); color: #fff;}
.home0>.grid0>.urunler>.grid3>a>img, .home0>.grid0>.urunler>.grid3>img { max-height: 250px; width: auto; border: 0}


.home0 .hizmetler{ margin: 0 0 30px 0;}
.home0>.grid0>.hizmetler>.grid3 {background: none; height:auto; max-height: 300px; margin-bottom: 30px; overflow-y:hidden; text-align: center; }
.home0>.grid0>.hizmetler>.grid3>a>h3 { padding: 10px 0; background: rgba(0,3,185,1); color: #fff;}
.home0>.grid0>.hizmetler>.grid3:nth-child(3n+1){ margin-left:0;}
.home0>.grid0>.hizmetler>.grid3>a { font-style: normal}
.home0>.grid0>.hizmetler>.grid3 { }
.home0 .resim { display: flow-root; width: 100%; height: 200px; overflow: hidden; background:none }
.home0 .resim img {  min-width: 110%; min-height: 110%; border: 0}


.home1 h2 { padding: 20px 0; margin: 0 0 20px; text-align: center; font: 34px/36px 'Roboto Condensed', sans-serif; color: #fe1c10; display: block; border: 1px solid #fe1c10;}
.home1 b {display: inline-block; width: 35px;}
.home1 a {float: left; margin: 10px 5px 0 0;}

.home2 {margin-bottom: 20px; min-height: 400px}
.home2 h2 { padding: 20px 0; margin: 0 0 20px; text-align: left; font: 20px/28px 'Roboto Condensed', sans-serif; color: #fe1c10; display: inline-block; border-bottom: 1px solid #fe1c10;}
.home2 h3 { padding: 20px 0; margin: 0 0 20px; text-align: left; font: 24px/28px 'Roboto Condensed', sans-serif; color: #111; display: inline-block; } 
.resim2 { display:flex; width: 100%; height: 400px; overflow: hidden; border-bottom-left-radius: 50px;}
.resim2 img { position: relative; margin-top: 0; width: 100%; height: 100%;}


/* HEADER ---------------------------------------- */
header { background: url(../images/header-bg-2.jpg) center bottom no-repeat; background-size:cover}
header #canvas { position: absolute; z-index: 0; margin: 0 auto}
header #gte { margin-top: -4px }
header .goog-te-combo {
    padding: 10px;
    border-radius: 5px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
    border: 0 solid #ccc;
    background-color: #fff;
    font-family: Arial, sans-serif;
}

	header  h1 {margin:0 auto; text-align:center; padding-bottom:0;}
	header  h1 a {display:inline-block; background:url(../images/logo.png) 0 0 no-repeat; width:585px; height:75px; text-indent:-3000px;}

header .bglogo { margin: 0 auto; float: none; padding: 10px 220px 10px; /*background: linear-gradient(90deg,rgba(255, 255, 255, 0) 21%, rgba(255, 255, 255, 1) 24%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 77%, rgba(255, 255, 255, 0) 80%);*/}
.logo { margin:20px 0 0;}
.logo img { height: auto; width:80%; max-width: 513px; opacity:0; animation: img_reveal 1.5s ease forwards; animation-delay: 2s; }
header .bg3 { position:relative; top:0px; width:100%; height: 5px; z-index:2; background:linear-gradient(45deg, white 50%, black 0);}
header .bg4 { position:relative; top:0px; width:100%; height: 5px; z-index:2; background:linear-gradient(-135deg, white 50%, black 0);}





@keyframes hamburger_puls {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.2);
	}
}

@keyframes img_reveal {
	100% {
		opacity:1;
	}
}

@keyframes text_reveal_box {
	50% {
		width: 100%;
		left: 0;
	}
	100% {
		width: 0;
		left: 100%;
	}
}
@keyframes slow { 
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
	0% { opacity: 0}
}
#header-shadow {
    /*background: url(../images/shadows/shadow-938.png) no-repeat center bottom;*/
	background-image: linear-gradient(to right, rgba(254,28,16,0), rgba(254,28,16,0.75), rgba(254,28,0,0));
	/*transition-property: all;
        transition-duration: 4s;
        transition-timing-function: ease;
        -webkit-animation-name: gonder;
		-moz-animation-name: gonder;
        -webkit-animation-duration: 4s;
		-moz-animation-duration: 4s;
		-ms-animation-duration: 4s;
		-o-animation-duration: 4s;
        animation-name: gonder; 
  		animation-duration: 4s;*/
		/*animation-iteration-count: infinite;*//*amimasyon tekrar sayısı*/*/
    margin: 0 0;
    width: 100%;
    height: 1px;
}
@-webkit-keyframes gonder {
from {
  
  
  opacity:.5;
}

to {
  
  
  opacity:1;
}
} 

@keyframes gonder { 
from {
	
	
	opacity:.5;
}

to {
  
  
  opacity:1;
}
} 
#header-shadow-rvrs {
    background: url(../images/shadows/shadow-938-rvrs.png) no-repeat center bottom;
    margin:20px 0;
    width: 100%;
    height: 10px;
}
.bgmenu {width: 100%; position: relative; display: inline-block; background: rgba(255,255,255,1); height: auto; color: #fff; margin: 0 0 0; padding: 0 0;}


.hcon { display: inline-block; width: 100%; margin: 0 auto;}
.hcon a { color:#fff}

.phone { width: auto; height: auto; font: 24px/28px 'Roboto Condensed', sans-serif; color: #fff; opacity: 0; animation: phn 3s ease forwards; animation-delay: 3s; }
@keyframes phn {
	10% {
		opacity: 0;
	}
	100% {
		opacity:1;
	}
}
.phone img {float: left; margin-top: -3px;}
.phone span {font: 16px/34px 'Roboto Condensed', sans-serif;}
.phone p {float: none; display: inline-block; margin-left: 20px; padding: 10px 0 0;}
/*header hr {
    border: none;
    border-top: 1px solid #fe1c10;
    margin: 0 auto 0 auto;
    width: 99%;
    height: 2px;	
}*/
hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(254,28,16,0), rgba(254,28,16,0.75), rgba(254,28,0,0));
}

.slider { width: 100%; height: 415px; overflow: hidden; /*background: url("../images/slider/slide1.jpg") 0 0/100% auto no-repeat;*/}
/*.slider img {max-width: 100%; height: auto;}*/


/* CONTENT ---------------------------------------- */
section {position: relative; margin:0 auto;}
.slogan h1 {margin: 105px 0 0 115px;}
h2 a {color: #3a7bb3; font-style: normal;}
h3 a {color: #333; font-style: normal;}
.calisma_alanlari > h2, .calisma_alanlari > h2 a { color: #3a7bb3; margin-bottom:40px; border-bottom:1px solid #3a7bb3; display:inline-block; font-style: normal;}
/*hr {margin: 20px 0 40px; height: 1px; border: 0; color: #ddd; background: #ddd;}*/
.bg1 {width: 100%; background: #eee; min-height: 70px; /*background:url(../images/banner1.jpg) center center no-repeat;*/}

.pghead {height:70px;}
.pghead h2 { line-height: 70px; padding-bottom: 0; color:#fe1c10; border-bottom: 1px solid #fe1c10;}
.bg2 {position: relative; padding: 70px 0 70px; width: 100%;  background-repeat: no-repeat; background-size: cover; background-position: center;}
.bg2:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background:#000000;
	opacity:.8;
	content: "";
}
.bg2 h2, .bg2 p { position: relative; z-index: 4; opacity: 1; color: #fff;}
.bg2 a, .bg2 a:hover, .bg2 h2 a, .bg2 h2 a:hover {color: #fff; font-style: normal;}

.scroll-img {
  border: 0 solid red;
  background-color:none;
  width: 100%;
  height: 150px;
  overflow: hidden;
  font-size: 0;
}
/*.scroll-img ul {
  width: 700px;
  height: 600px;
  margin: 0;
}*/
.scroll-img ul li {
  display: inline-block;
  margin: 0px 0px 0px 10px;
}
.scroll-img li img { width:270px; max-height:150px;}

#cozumortak.scroll-img ul {
  width: 2800px;
  margin-left:-50px;
}

#referanslar.scroll-img ul {
  width: 2800px;
  margin-left:-50px;
}
#referanslar.scroll-img li { float: left; margin-left: 20px; display: flex;
  justify-content: center; /* Yatay ortalar */
  align-items: center;     /* Dikey ortalar */
  height: 100px; width: 150px; overflow:hidden;  border: 0px solid black; background:none }
#referanslar.scroll-img li img { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height:auto; max-height: 100px; width: auto; }
#referanslar.scroll-img li img:first-child { margin-left: 0}
#referanslar span {float: right; font-size:14px; margin: 20px 0;}


#resimler{
	width:100%;
	height:100%;
	text-align:center;
	text-decoration:none;
	margin:20px auto 0;
	display:flow-root;
	
}
#resimler .resim{
	margin:0 26px 0 0;
	width:200px;
	height:175px;
	float:left;
	text-decoration:none;
	overflow: hidden;
}
#resimler img{
	margin:1px; padding:1px;
	background-color:#FFF;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	border: 1px solid #ccc;
	/*cursor:pointer;*/
	width:auto;
	height:auto;
	max-width: 95%;
	opacity:1;
	filter:alpha(opacity=100);
}
#resimler img:hover{
	margin:1px; padding:1px;
	background-color:#FFF;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	/*cursor:pointer;*/
	border: 1px solid #000;
	width:auto;
	height:auto;
	opacity:1.0;
	filter:alpha(opacity=100);
}
#resimler .urunadi{
	height:25px;
	padding-top:5px;
	color:#FFF;
	left:0px;
	text-decoration:none;
}
#resimler .urunadi a{
	color:#FFF;
	left:0px;
	text-decoration:none;
}
#resimler .urunadi a:hover{
	color:#FFF;
	left:0px;
	text-decoration:none;
}


.liste {list-style:circle inside; padding-bottom: 25px;}
.liste li {margin-bottom: 7px;}
.kaynak {font:italic 13px/21px 'Roboto', sans-serif;}

.bloghome a, .bloghome a:hover { display:block; margin-top:10px}
a.fb {display: block; width: 26px; height: 26px; background: url(../images/icon-fb.jpg) 0 0 no-repeat;}
	a:hover.fb {background-position: -26px 0; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}
a.ins {display: block; width: 137px; height: 50px; background: url(../images/instagram-buton.png) 0 0 no-repeat;}
	a:hover.ins {background-position: -137px 0; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}
a.tw {display: block; width: 26px; height: 26px; background: url(../images/icon-tw.jpg) 0 0 no-repeat;}
	a:hover.tw {background-position: -26px 0; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}
a.kvkk {display: block; width: 181px; height: 50px; background: url(../images/kvkk-logo.jpg) 0 0 no-repeat;}
	a:hover.kvkk {background-position: -181px 0; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none;}
address {font-style: normal;}
	address p {font-style: normal; font-weight: normal; line-height: 28px;}
	address span {display: inline-block; width: 80px; color: #999;}
	address.kart span{display:inline-block; width:65px; color:#999; }
	address a {font-style: normal;}
.map {overflow: hidden;}
	.map iframe {width: 480px; height: 313px;}

.int1 {border-left: 1px solid #ccc; padding-left: 25px; margin-left: 0px; margin-right: -1px;}
.intmenu {height: 100%; border-right: 1px solid #ccc; margin-right: -1px; font-size: 16px;}
	.intmenu ul {list-style: none;}
	.intmenu li {padding-bottom: 12px;}
	.intmenu a {font-style: normal;}
	.intmenu a.current {color: #009fe3;}


.hakkinda img { float:left; margin:0 10px 5px 0;}

.thumbs{
	width:100%;
	margin:0 auto 0;
	text-align:center;/*thums içeriği ortalı gelsin*/
}

.thumbs div{
	width:320px;
	height:240px;
	display:inline-block;
	border:1px solid #000;
	box-shadow:0 1px 3px rgba(255,255,255,0.9);
	border-radius:4px;
	margin: 0 30px 20px 0;
	position:relative;
	text-decoration:none;
	
	background-position:center center;
	background-repeat: no-repeat;
	
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}
/*.thumbs div:nth-child(3n) { margin-right: 0}*/

.thumbs div:after{
	background-color: #303030;
    border-radius: 7px;
    bottom: -123px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    /*content: attr(title);*//*resimlerin altındaki a href title*/
    display: inline-block;
    font-size: 10px;
    max-width: 90px;
    overflow: hidden;
    padding: 20px 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}


@media screen and (max-width: 960px) {
	.thumbs{
		width:auto;
	}
	
}


@media screen and (max-width: 480px) {
	.thumbs3 div{
		width:318px;
	}
	
}

.thumbs3{
	width:100%;
	margin:0 auto 0;
	text-align:center;/*thums içeriği ortalı gelsin*/
}

.thumbs3 a{
	width:350px;
	height:247px;
	display:inline-block;
	border:1px solid #000;
	box-shadow:0 1px 3px rgba(255,255,255,0.9);
	border-radius:4px;
	margin: 0 17px 20px 0;
	position:relative;
	text-decoration:none;
	
	background-position:center center;
	background-repeat: no-repeat;
	
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}
/*.thumbs3 a:nth-child(3n) { margin-right: 0}*/

.thumbs3 a:after{
	background-color: #303030;
    border-radius: 7px;
    bottom: -123px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    /*content: attr(title);*//*resimlerin altındaki a href title*/
    display: inline-block;
    font-size: 10px;
    max-width: 90px;
    overflow: hidden;
    padding: 20px 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}


@media screen and (max-width: 960px) {
	.thumbs3{
		width:auto;
	}
	
}


@media screen and (max-width: 480px) {
	.thumbs3 a{
		width:318px;
	}
	
}


.liste { list-style:disc inside; padding-bottom: 25px;}
.liste2 { list-style:decimal inside; padding-bottom: 25px;}
.liste3 { list-style:circle inside; padding:10px 0 25px 0;}

/* FOOTER ---------------------------------------- */
footer {margin: 0 auto; display: inline-block; border-top: 5px solid #210505; width: 100%; font-size: 12px; line-height: normal; color: #fff;}
footer ul {font: 14px/24px 'Roboto', sans-serif; width: 100%;}
footer li a {color: #fff; font-style: normal; font-weight: normal; float: none;}
footer li a:hover {color: #fff; text-decoration: none;}
footer img {float: left;}
footer hr {width: 100%; height: 2px; border-width: 0; color: #4f5862; background: #4f5862; margin: -2px 0 15px;}
footer .map {overflow: hidden;}
footer .map iframe {width: 100%; height: 300px;}
footer .bg {display: inline-block; width: 100%; background: #303539; padding: 20px 0; margin-top: 0;}
.tel {font: 21px/34px 'Roboto', sans-serif;}
.tel img {margin-right: 20px;}
.design {font-size: 10px; text-align: right; line-height: 10px; padding-top: 11px;}
.design img {width: 87px; height: 14px; float: right; margin: 3px 0 0 14px;}
	


[class^="hvr-"] {
  margin: .4em;
  padding: 0;
  cursor: pointer;
  background: #E9E9E9;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  text-decoration: none;
  color: #666;
  font-size:24px;
  /* Prevent highlight colour when element is tapped */
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  /* Smooth fonts */
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-pulse, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}