/***********************
HAT MEDYA 2014
http://www.hatmedya.com
info@hatmedya.com
ie8, ff, chrome
***********************/
@import"../css/reset.css";@import"../css/hatresponsive.css";
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro|Roboto|Open+Sans&subset=latin,latin-ext);
body {background:url(../images/bg-top.jpg) top repeat-x; background-color:#fff; font:15px/21px 'Source Sans Pro', sans-serif; color:#333; position:relative; min-width:320px;}
html,body {height:100%;}

p{padding-bottom:20px}
a{color:#333; text-decoration:none;}
a:hover{color:#0c499c; text-decoration:underline;}
img {border:0px;}

h1,h2,h3,h4{font-weight:normal;}
h1 {font-size:25px; padding-bottom:15px; color:#0c499c;}
h2 {font-size:21px; padding-bottom:18px;}
h3 {font-size:19px; padding-bottom:15px;}
h4 {font-size:18px; padding-bottom:15px;}  

.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;}

/* 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;}
.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;}
.padlef5 {padding-left:5px;}
.padlef10 {padding-left:10px;}
.padlef15 {padding-left:15px;}
.padlef20 {padding-left:20px;}
.padlef25 {padding-left:25px;}
	
/* HEADER ---------------------------------------- */
header {position:relative; background:url(../images/bg-header.jpg) top center no-repeat; height:161px; margin:0 auto; padding-bottom:35px;}
	header h1 {padding:29px 0 0 0;}
	header h1 a {display:block; background:url(../images/logo2.png) 0 0 no-repeat; margin:0 auto; width:250px; height:80px; text-indent:-5000px;}
	header nav {font:17px 'Source Sans Pro', sans-serif; text-align:center; padding-top:14px; text-shadow: 1px 1px 1px #666; filter: dropshadow(color=#666, offx=1, offy=1);}
	header nav a {color:#fff; text-decoration:none; color:#fff; margin:8px 12px 4px; position:relative; -webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
	header nav a:hover, header a.current {color:#0c499c; text-decoration:none;}

/* CONTENT ---------------------------------------- */
section {position:relative; z-index:1; margin:0 auto;}
section hr {width:100%; text-align:left; height:2px; border-width:0; color:#0c499c; background-color:#0c499c; margin-bottom:35px;}
.box-img {display:inline-block; padding:0; position:relative; overflow:hidden;}
	.box-img img {width:288px; height:auto; border:1px solid #666;}
	.box-img h2 {margin-top:-50px; margin-left:10px;}
	.box-img p {padding-top:15px;}
	.box-img img {filter:gray; -webkit-filter: grayscale(100%);}
	.box-img img, x:-moz-any-link, x:default {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");}
	.box-img img:hover {filter:none; -webkit-filter: none;}
.icons {}
	.icons img {float:left; margin:4px 10px 10px 0;}
	.icons span {padding:0 6px 0;}
	.icons a:hover {text-decoration:none;}
.topres {position:relative; overflow:hidden;}
	.topres img {max-width:100%; height:auto; padding-bottom:35px;}
.urunler1 {width:222px; position:relative; overflow:hidden; padding-bottom:25px; float:left; text-align:center;}
	.urunler1 img {max-width:100%; height:auto; border:1px solid #666; margin-bottom:5px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.urunler2 {width:222px; position:relative; overflow:hidden; padding:0 0 25px 20px; float:left; text-align:center;}
	.urunler2 img {max-width:100%; height:auto; border:1px solid #666; margin-bottom:5px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.list {padding-bottom:40px;}
	.list li {background:url(../images/marker.jpg) 0 9px no-repeat; padding:0 0 12px 15px;}
	.list ul {padding:4px 0 0 0;}
	.list li li {font-weight:normal; background:none; padding:0 0 2px 14px;}
address {font-weight:bold; font-style:normal;}
	address p {font-style:normal; font-weight:normal; line-height:28px;}
	address span {display:inline-block; width:90px; color:#0c499c;}
.map {display:inline-block; position:relative; overflow:hidden;}
	.map iframe{ width:500px; height:365px;}
.tanitim  iframe {width:950px; height:534px; margin:10px 0 50px;}


/* FOOTER ---------------------------------------- */
footer {position:relative; height:120px; background:#ddd;}
footer hr {width:100%; text-align:left; height:2px; border-width:0; color:#0c499c; background-color:#0c499c;}
footer span {color:#0c499c; padding:0 8px 0;}
footer b {color:#0c499c; font-weight:normal; padding-right:5px;}
footer p {padding-bottom:0;}
.design {text-align:right; padding-top:52px; margin-right:0;}
.copyright {font-size:12px; line-height:19px; padding-top:20px; margin-left:0;}
	.copyright img {float:left; margin-right:15px;}
.copyright2 {font-size:12px; line-height:19px; padding-top:10px; margin-left:0;display:none;}


/* Responsive ======================================= */
@media only screen and (min-width: 783px) and (max-width: 980px) {
	.box-img img {width:246px; height:auto;}
	.urunler1 {width:174px;}
	.urunler2 {width:174px;}
	.tanitim iframe {width:758px; height:426px;}
	}
@media only screen and (min-width: 480px) and (max-width: 782px) {
	header {background:none;}
		header nav {padding-top:25px; float:none; border-radius:0;}
		header nav a{display:block; background:#0c499c; padding:9px 10px 9px; margin:0 0 3px; border-radius:5px; border:1px solid #bbb;}
		header nav a.current,header nav a:hover{background:#fff; height:auto;}
	.box-img img {width:418px; height:auto;}
	footer {height:130px;}
	.copyright {display:none;}
	.copyright2 {display:inherit;}
	.design {padding-top:80px;}
	.urunler1 {width:200px;}
	.urunler2 {width:200px; padding:0 0 25px 0;}
	.urunler3 {padding-left:20px;}
	.tanitim iframe {width:420px; height:236px;}
	}
@media only screen and (max-width: 479px) {
	header {background:none;}
		header nav {padding-top:25px; float:none; border-radius:0;}
		header nav a{display:block; background:#0c499c; padding:9px 10px 9px; margin:0 0 3px; border-radius:5px; border:1px solid #bbb;}
		header nav a.current,header nav a:hover{background:#fff; height:auto;}
	.box-img img {max-width:100%; height:auto;}
	footer {height:160px;}
	.copyright {display:none;}
	.copyright2 {display:inherit;}
	.design {padding:10px 0 10px;}
	.topres img {display:none;}
	.urunler1 {width:300px; float:none;}
	.urunler1 a {pointer-events: none; cursor: default;}
	.urunler2 {width:300px; padding-left:0; float:none;}
	.urunler2 a {pointer-events: none; cursor: default;}
	.urunler3 {padding-left:0;}
	.tanitim iframe {width:300px; height:169px;}
	}