/***********************
HAT MEDYA 2018
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:300,400,400i&subset=latin-ext');
body {background: #fff; font: 17px/25px 'Roboto', sans-serif; color: #444; position: relative; min-width: 320px;}
html,body {height: 100%;}

p {padding-bottom: 30px}
a {color: #444; font-style: italic; text-decoration: none;}
a:hover {color: #26abe2; 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', sans-serif; color: #222;}
h1 {font-size: 32px; font-weight: 300; padding-bottom: 30px;}
h2 {font-size: 27px; font-weight: 300; padding-bottom: 30px;}
h3 {font-size: 24px; padding-bottom: 25px;}
h4 {font-size: 21px; padding-bottom: 20px;}  

.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: 23px; line-height: 38px; text-align: center; height: 220px; padding-top: 140px;}

/* 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}.padtop60{padding-top:60px}.padtop70{padding-top:70px}.padtop80{padding-top:80px}.padtop90{padding-top:90px}.padtop100{padding-top:100px}.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}

/* HEADER ---------------------------------------- */
header {position: relative; margin: 0 auto; z-index: 1; width: 100%; padding-bottom: 20px;}
header nav {font: 19px/60px 'Roboto Condensed', sans-serif; text-align: center; height: 60px;}
header nav a {color: #244470; font-style: normal; margin: 0 12px; position: relative; -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; transition: all 0.7s linear; z-index: 2;}
header nav a:hover, header nav a.current {color: #26abe2; display: inline-block; text-decoration: none;}
.logo {text-align: center; margin: 0 auto; height: auto; padding: 20px 0;}
.logo img {width: auto; height: 170px;}
.menu {width: 100%; height: 60px; position: relative; z-index: 1; border-top: 1px solid #cad0d8;  border-bottom: 1px solid #cad0d8;}
.slider {position: relative; margin: 0 auto; width: 100%; height: 480px; z-index: 1;}

/* CONTENT ---------------------------------------- */
section {position:relative;  display:inline-table; width: 100%; z-index:1; margin:0 auto;}
.home1 {text-align: center; font: 300 27px 'Roboto', sans-serif; margin-top: 70px;}
.home1 img {width: 234px; height: auto; float: none; margin-bottom: 40px;}
.home1 strong {color: #26abe2; font-weight: 300;}
.home2 {position: relative; background: #26abe2; width: 100%; height: auto; padding: 30px 0; font: 300 30px 'Roboto', sans-serif; color: #fff; margin-top: 70px;}
.home2 p {padding-bottom: 15px;}
.home2 a, .home2 a:hover {color: #fff; font-style: normal;}
.home3 {border-top: 2px solid #26abe2; text-align: center; margin-top: 40px;}
.home3 h2 {font-size: 29px; color: #26abe2;}
.home4 {position: relative; font: 300 30px 'Roboto', sans-serif; color: #fff; height: 360px;}
.home4 img {float: none;}
.home4 p {padding-left: 30px;}
.home5 img {float: left; margin: 50px 2px;}
.home5 p {text-align: left; font: 300 30px 'Roboto', sans-serif; color: #fff; margin-top: 40px;}
.home6 {border-top: 2px solid #26abe2; text-align: center; margin-top: 40px;}
.home7 img {width: 100%; height: auto; padding-bottom: 15px;}
.homefoto {padding: 10px 0 20px 30px;}
.bgfoto {position: absolute; z-index: -1; width: 100%; height: auto;}
.foto img {width: 100%; height: auto;}
.bg1 {background: #244470;}
.bg2 {background: #26abe2;}
.bg3 {background: #6c6e6e;}
.bg3 img {padding:0 30px;}
.int1 img {width: 100%; height: auto; margin: 20px 0 40px; border: 1px solid #cad0d8;}
.fotobr img {width: 100%; height: auto; border: 1px solid #cad0d8;}
.intmenu {height: 100%; border-right: 1px solid #cad0d8; margin-right: -1px; font: 19px/28px 'Roboto', sans-serif;}
.intmenu ul {list-style:none;}
.intmenu li {padding-bottom:12px;}
.intmenu ul ul {font: 15px/28px 'Roboto', sans-serif;}
.intmenu a {font-style:normal;}
.intmenu a:hover, .intmenu a.current {color:#244470;}
.urunler {height: 100%; border-left: 1px solid #cad0d8; margin-left: 0px; padding-left: 19px;}
.urunler p {font: 17px/30px 'Roboto', sans-serif; padding: 10px; margin-bottom: 20px; border-top: 1px solid #cad0d8; border-bottom: 1px solid #cad0d8;}
.urunler p:nth-child(odd) {background: #F4F5F7;}
.urunler span {width: 22%; display: inline-block; text-align: center;}
.urunler a {font-style: normal;}
.urunler span img {height: 30px; width: auto; border: none; padding: 0; margin: 0 auto;}
.siralama input {border: 1px solid #cad0d8; margin: 0 0 6px 6px; padding: 3px; width: 24px; height: 24px;}
.el2 img {width: 100%; height: auto; border: 1px solid #cad0d8; margin: 40px 0 15px;}
.int2 span {display: inline-block; width: 84%; padding: 6px 0; margin: 3px 0;}
.int2 input {width: 10%; padding: 6px 3px; margin: 3px 0; text-align: center; font: 15px 'Roboto', sans-serif; color: #444;}
.int2 a {display: inline-block; width: 100%; background: #26abe2; color: #fff; font-style: normal; text-align: center; padding: 12px;}
.int3 {font: 18px/34px 'Roboto', sans-serif;}
.int3 input {width: 80px; padding: 0 3px; margin: 0 3px; font: 16px/32px 'Roboto', sans-serif; color: #444;}
.int4 p {font: 17px/30px 'Roboto', sans-serif; padding: 10px; margin-bottom: 10px; border-top: 1px solid #cad0d8; border-bottom: 1px solid #cad0d8;}
.int4 p:nth-child(odd) {background: #F4F5F7;}
.int4 span {width: 18%; display: inline-block; text-align: center;}
.int4 a {font-style: normal;}
.int4 span img {height: 30px; width: auto; border: none; padding: 0; margin: 0 auto;}

address {font-style: normal;}
	address p {font-style: normal; font-weight: normal; line-height: 28px; padding-bottom: 30px;}
	address span {display: inline-block; width: 90px; color: #25265c;}
	address a {font-style: normal;}
.map {overflow: hidden;}
	.map iframe {width: 980px; height: 340px;}

/* FOOTER ---------------------------------------- */
footer {margin: 0 auto; width: 100%; height: 80px; font-size: 13px; line-height: 18px; border-top: 4px solid #26abe2; padding-top: 30px; margin-top: 70px;}
footer span {display: inline-block; color: #26abe2; margin: 0 12px;}
.footerlogo {width: auto; height: 49px; float: left; margin: 3px 20px 0 0;}
.design {font-size: 10px; text-align: right; line-height: 10px;}
.design img {width: 87px; height: 14px; float: right; margin: 3px 0 0 14px;}


/* RESPONSIVE ---------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 980px) {
	h1 {font-size: 30px;}
	h2 {font-size: 26px;}
	header nav {font: 18px/60px 'Roboto Condensed', sans-serif;}
	header nav a {margin: 0 5px;}
	.slider {height: 376px;}
	.home1 {margin-top: 90px;}
	.home4 {font: 300 28px 'Roboto', sans-serif; height: 290px;}
	.home5 img {margin: 46px 0; width: 58px; height: auto;}
	.home5 p {font: 300 25px 'Roboto', sans-serif; margin-top: 36px;}
	.homefoto {padding: 105px 0 15px 30px; height: 70px; width: auto;}
	footer {font-size: 11px; line-height: 16px; padding-top: 30px; margin-top: 70px;}
	footer span {margin: 0 6px;}
	.footerlogo {height: 40px; margin: 3px 20px 0 0;}
	}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	h1 {font-size: 29px;}
	h2 {font-size: 25px;}
	h3 {font-size: 22px;}
	h4 {font-size: 20px;}
	.alignright {text-align: left;}
	header nav {font: 19px/45px 'Roboto Condensed', sans-serif; height: auto; float:none;}
	header nav a {display: block; margin: 3px 0; background: #244470; color: #fff;}
	header nav a:hover, header nav a.current {background: #26abe2; display: block; color: #fff;}
	.menu {height: auto; border-top: none;  border-bottom: none;}
	.slider {height: 235px;}
	.home2 {font: 300 28px 'Roboto', sans-serif; margin-top: 60px;}
	.home2 p {padding-bottom: 10px;}
	.home3 h2 {font-size: 28px;}
	.home4 {font: 300 24px 'Roboto', sans-serif; height: 200px;}
	.home4 p {padding-left: 20px;}
	.home5 p {font: 300 27px 'Roboto', sans-serif; margin-top: 45px;}
	.homefoto {padding: 50px 0 10px 20px; height: 42px; width: auto;}
	.bg2 {margin: 10px 0;}
	.intmenu {border-right:0; margin:-10px 0 20px 0; border-top:1px solid #cad0d8;}
	.intmenu li {border-bottom:1px solid #cad0d8; padding-top:11px;}
	footer {height: 140px; font-size: 12px; margin-top: 60px; text-align: center;}
	footer span {margin: 0 6px;}
	.footerlogo {display: none;}
	}
@media only screen and (max-width: 479px), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	body {font: 16px/24px 'Roboto', sans-serif;}
	h1 {font-size: 28px;}
	h2 {font-size: 24px;}
	h3 {font-size: 21px;}
	h4 {font-size: 19px;}
	.alignright {text-align: left;}
	header nav {font: 18px/44px 'Roboto Condensed', sans-serif; height: auto; float:none;}
	header nav a {display: block; margin: 3px 0; background: #244470; color: #fff;}
	header nav a:hover, header nav a.current {background: #26abe2; display: block; color: #fff;}
	.menu {height: auto; border-top: none;  border-bottom: none;}
	.logo img {width: 200px;}
	.slider {display: none;}
	.home1 {font: 300 24px 'Roboto', sans-serif;}
	.home2 {padding: 35px 0; font: 300 24px 'Roboto', sans-serif; margin-top: 40px;}
	.home2 p {padding-bottom: 5px;}
	.home3 h2 {font-size: 26px;}
	.home4 {font: 300 21px 'Roboto', sans-serif; height: 130px;}
	.home4 p {padding: 30px 0 0 10px;}
	.home5 img {float: left; margin: 40px 2px;}
	.home5 p {font: 300 24px 'Roboto', sans-serif; margin-top: 40px;}
	.homefoto {display: none;}
	.foto img {display: none;}
	.bg2 {margin: 5px 0;}
	.intmenu {border-right:0; margin:-10px 0 20px 0; border-top:1px solid #cad0d8;}
	.intmenu li {border-bottom:1px solid #cad0d8; padding-top:11px;}
	footer {height: 120px; font-size: 11px; margin-top: 60px; text-align: center;}
	footer span {margin: 0 5px;}
	.footerlogo {display: none;}
	.design {display:none;}
}