/***********************
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:300,400|Roboto+Condensed:300,300i,400&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: 20px}
a {color: #222; font-style: italic; text-decoration: none;}
a:hover {color: #01a0e2; 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: 25px;}
h2 {font-size: 30px; padding-bottom: 25px;}
h3 {font-size: 27px; padding-bottom: 15px;}
h4 {font-size: 21px; 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}
.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}.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: fixed; top: 0; left: 0; width: 100%; margin: 0 auto; z-index: 20;}
header nav {font: 18px/60px 'Roboto Condensed', sans-serif; text-align: right; height: 60px;}
header nav a {color: #fff; font-style: normal; margin: 0 15px; 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;}
header nav a:hover, header nav a.current {color: #f7941e; display: inline-block; text-decoration: none;}
.top {width: 100%; height: 60px; background: rgba(51,51,51,0.50); position: relative; z-index: 2;}
.menu {width: 100%; height: 60px; background: #333; position: relative; z-index: 2;}
.logo {position: relative; margin-top: -60px; float: left; text-align:center; z-index: 3; background-color:#333}
.logo img {width: 191px; height: auto;}
.fixed {position:fixed; top:0; width:100%; border-bottom:1px solid #e4e9ea;}

.slider {position: relative; width: 100%; z-index: 1;}

/* CONTENT ---------------------------------------- */
section {position: relative; margin: 0 auto;}
section .bg {background: #20409a; width: 100%; display: inline-block; padding: 70px 0 60px; margin-top: 100px;}
.home1 img {width: 400px; height: auto; float: right; margin-left: 50px;}
.home2 img {width: 300px; height: auto; float: left; margin-right: 50px;}
.home2 div {width: 320px; float: left; padding-top: 20px;}
.home2 div:nth-of-type(2) {margin-left: 50px;}
.home3 {color: #fff;}
.home3 h2 {color: #fff;}
.home3 h1 { font:300 italic 36px 'Roboto Condensed', sans-serif; color: #fff;}
.home4 {width: 100%; height: 100%; display: inline-block; position: relative; background: url(../images/image-03.png) no-repeat fixed; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
.daire {width: 200px; height: 200px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; border: 4px solid #fff; background: rgba(0,0,0,0.30); color: #fff; font: 300 40px/50px 'Roboto', sans-serif; text-align: center; margin-top: 80%; float: none; display: inline-block;}
.daire span {display: inline-block; padding-top: 42px;}
.ortala {margin: 0 auto; text-align: center;}
.foto0 img {width: 100%; height: auto;}
.home5 {font: 27px/36px 'Roboto', sans-serif; text-align: center; color: #01a0e2;}
.home6 {font: 18px/26px 'Roboto', sans-serif; text-align: center;}
.home7 img {width: 455px; height: auto; float: right; margin-left: 60px;}
.home7 h2 {color: #1f2a7c; padding-top: 60px;}
.video iframe {width: 1090px; height: 613px; margin-top: 100px;}
/*.video {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-top: 100px;}
.yvideo {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}*/
.altsayfa {margin-top: 250px;}
.alt1 img {width: 400px; height: auto; float: left; margin-right: 50px;}
.alt2 table {width: 100%; table-layout: fixed;}
.alt2 tr:nth-child(odd) {background: #eee;}
.alt2 tr:nth-child(even) {background: none;}
.alt2 th {border: 1px solid #ddd; padding: 10px; text-align: center;}
.alt2 td {border: 1px solid #ddd; padding: 10px; text-align: center;}
.alt2 img {width: 100%; height: auto;}
.alternatif {display: none;}
.libfoto img {width: 100%; height: auto; border: 1px solid #ddd;}

address {font-style: normal;}
	address p {font-style: normal; font-weight: normal; line-height: 34px;}
	address span {display: inline-block; width: 90px; color: #999;}
	address a {font-style: normal;}
.map {overflow: hidden;}
	.map iframe {width: 1090px; height: 400px;}


/* FOOTER ---------------------------------------- */
footer {position: relative; margin: 0 auto; height: 150px; background: #333; margin-top: 120px; font-size: 12px; line-height: 16px; color: #fff;}
.logofooter {font: 24px/32px 'Roboto', sans-serif;}
.logofooter span {font-size: 30px;}
.logofooter img {width: 224px; height: auto; float: left; margin: -57px 45px 0 0;}
.design {font-size: 10px; text-align: right; line-height: 10px; padding-top: 60px;}
.design img {width: 87px; height: 14px; float: right; margin: 3px 0 0 14px;}

	
/* RESPONSIVE ---------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1089px) {
	body {font: 16px/23px 'Roboto', sans-serif;}
	h1 {font-size: 27px;}
	h2 {font-size: 27px;}
	h3 {font-size: 24px;}
	header nav {font: 16px/55px 'Roboto Condensed', sans-serif; height: 55px;}
	header nav a {margin: 0 4px;}
	.top {height: 55px;}
	.menu {height: 55px;}
	.logo {margin-top: -55px;}
	.logo img {width: 180px;}
	.home1 img {width: 350px; margin-left: 40px;}
	.home1 .padtop60 {padding-top: 40px;}
	.home1 .padtop40 {padding-top: 20px;}
	.home1 .padtop20 {padding-top: 0px;}
	.home2 img {margin-right: 30px;}
	.home2 .padtop30 {padding-top: 10px;}
	.home2 div {width: 210px; padding-top: 20px;}
	.home2 div:nth-of-type(2) {margin-left: 10px;}
	.daire {width: 150px; height: 150px; -webkit-border-radius: 75px; -moz-border-radius: 75px; border-radius: 75px; border: 5px solid #fff; font: 36px/46px 'Roboto', sans-serif; margin-top: 80%;}
	.daire span {display: inline-block; padding-top: 20px;}
	.home7 img {width: 410px; margin-left: 40px;}
	.home7 h2 {padding-top: 10px;}
	.video iframe {width: 768px; height: 432px;}
	.alternatif {display: none;}
	.map iframe {width: 768px; height: 320px;}
	footer {height: 120px;}
	.logofooter {font: 21px/32px 'Roboto', sans-serif;}
	.logofooter span {font-size: 26px;}
	.logofooter img {width: 170px; margin: -40px 18px 0 0;}
	.logofooter .padtop30 {padding-top: 15px;}
	}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	body {font: 16px/23px 'Roboto', sans-serif;}
	h1 {font-size: 28px;}
	h2 {font-size: 25px;}
	h3 {font-size: 22px;}
	h4 {font-size: 20px;}
	.alignright{text-align:left}
	header {position: relative;}
	header nav {font: 17px/54px 'Roboto Condensed', sans-serif; text-align: center; height: auto; float: none;}
	header nav a {display: block; background: #2b2a28; color: #fff; font-style: normal; margin: 2px 0;}
	header nav a:hover, header nav a.current {display: block; background: #2b2a28; color: #ccc;}
	.top {display: none;}
	.menu {height: auto; background: none;}
	.logo {margin: 0 auto; float: none; text-align: center;}
	.logo img {width: 210px; height: auto; margin-bottom: 15px;}
	.home1 img {display: none;}
	.home1 .padtop60 {padding-top: 0px;}
	.home1 .padtop40 {padding-top: 0px;}
	.home2 img {display: none;}
	.home2 .padtop30 {padding-top: 0px;}
	.home2 div {width: 100%; float: none;}
	.home2 div:nth-of-type(2) {margin-left: 0;}
	.home4 {background: url(../images/image-03.jpg) no-repeat fixed 100%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover;}
	.daire {width: 150px; height: 150px; -webkit-border-radius: 75px; -moz-border-radius: 75px; border-radius: 75px; border: 5px solid #fff; font: 32px/40px 'Roboto', sans-serif; margin-top: 5%;}
	.daire span {padding-top: 30px;}
	.home7 img {display: none;}
	.home7 h2 {padding-top: 0;}
	.video iframe {width: 480px; height: 270px;}
	.altsayfa {margin-top: 100px;}
	.alt1 img {width: 480px; float: none; margin-right: 0px; margin-bottom: 20px;}
	.alt2 table {display: none;}
	.alternatif {display: block; width: 100%; height: auto;}
	.libfoto img {margin-bottom: 15px;}
	.libfoto .padtop30 {padding-top: 0;}
	.map iframe {width: 480px; height: 300px;}
	footer {height: 130px; margin-top: 120px;}
	.logofooter {font: 21px/32px 'Roboto', sans-serif;}
	.logofooter span {font-size: 26px;}
	.logofooter img {width: 130px; margin: -30px 15px 0 0;}
	.logofooter .padtop30 {padding-top: 15px;}
	}
@media only screen and (max-width: 479px), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
	body {font: 16px/23px 'Roboto', sans-serif;}
	h1 {font-size: 27px;}
	h2 {font-size: 24px;}
	h3 {font-size: 21px;}
	h4 {font-size: 19px;}
	.alignright{text-align:left}
	header {position: relative;}
	header nav {font: 17px/50px 'Roboto Condensed', sans-serif; text-align: center; height: auto; float: none;}
	header nav a {display: block; background: #2b2a28; color: #fff; font-style: normal; margin: 2px 0;}
	header nav a:hover, header nav a.current {display: block; background: #2b2a28; color: #ccc;}
	.top {display: none;}
	.menu {height: auto; background: none;}
	.logo {margin: 0 auto; float: none; text-align: center;}
	.logo img {width: 210px; height: auto; margin-bottom: 15px;}
	.slider {display: none;}
	.home1 img {display: none;}
	.home1 .padtop60 {padding-top: 0px;}
	.home1 .padtop40 {padding-top: 0px;}
	.home2 img {display: none;}
	.home2 .padtop30 {padding-top: 0px;}
	.home2 div {width: 100%; float: none;}
	.home2 div:nth-of-type(2) {margin-left: 0;}
	.home4 {background: url(../images/image-03.jpg) no-repeat fixed 100%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover;}
	.daire {width: 130px; height: 130px; -webkit-border-radius: 65px; -moz-border-radius: 65px; border-radius: 65px; border: 4px solid #fff; font: 29px/38px 'Roboto', sans-serif; margin-top: 5%;}
	.daire span {padding-top: 25px;}
	.home7 img {display: none;}
	.home7 h2 {padding-top: 0;}
	.video iframe {width: 320px; height: 180px;}
	.altsayfa {margin-top: 100px;}
	.alt1 img {display: none;}
	.alt2 table {display: none;}
	.alternatif {display: block; width: 100%; height: auto;}
	.libfoto img {margin-bottom: 15px;}
	.libfoto .padtop30 {padding-top: 0;}
	.map iframe {width: 320px; height: 260px;}
	footer {height: 120px; margin-top: 120px;}
	.logofooter {font: 20px/30px 'Roboto', sans-serif;}
	.logofooter span {font-size: 24px;}
	.logofooter img {display: none;}
	.logofooter .padtop30 {padding-top: 15px;}
}