/***********************
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: #333; font-style: normal; text-decoration: none;}
a:hover {color: /*#01a0e2*/#1e222d; 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: 22px; padding-bottom: 10px;}
h2 {font-size: 19px; padding-bottom: 10px;}
h3 {font-size: 16px; padding-bottom: 10px;}
h4 {font-size: 14px; padding-bottom: 10px;}  
hr {width:100%; text-align:left; height:1px; border-width:0; color:#ccc; background-color:#ccc; margin-bottom:10px;}
.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}
.page {margin-top:150px}
/* HEADER ---------------------------------------- */
header {position: fixed; top: 0; left: 0; width: 100%; height: 145px; /*background: rgba(0,0,0,0.50);*/ background: rgba(30, 34, 45, .5); margin: 0 auto; z-index: 10;}
header .besyuz {position: fixed; top: 0; left: 0; width: 100%; height: 145px; background: none; margin: 0 auto; z-index: 10;}
header nav {font: 21px/50px 'Roboto Condensed', sans-serif; text-align: center; height: 50px;}
header nav a {color: #fff; font-style: normal; margin: 0 15px; display:inline-block; 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: #fff; display: inline-block; text-decoration: none; bottom:0}
header nav a:after, header nav a.current:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: inline;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
header nav a:hover:after, header nav a.current:after { 
  width: 100%; 
  left: 0;
}
.menu {width: 100%; height: 60px; background: #333; position: relative; z-index: 2;}
.logo, .logo a {font: 40px 'Roboto Condensed', sans-serif; color: #fff; margin-top: 13px;}
.logo a:hover { color:#F4F4F4}

.logo img {width: 31px; height: auto; float: left; margin: -14px 10px 0 0;}

.slider {position: relative; width: 100%; z-index: 1; background:url(../images/bg1.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

/* CONTENT ---------------------------------------- */
section {position: relative; margin: 0 auto;}
section .bg {/*background: #40474e;*/background: #1e222d; width: 100%; display: inline-block; padding: 70px 0 60px;}
section .bg2 { background:url(../images/bg03.jpg) 50% 50% no-repeat; background-size:cover; min-height:285px;}
.home0 { color:#fff; position:absolute; bottom:0; left:50%; margin-left:-545px; z-index:20;}
	.home0 h2 { font-family: 'Roboto', serif; font-size: 21px; padding:10px 12px;}
	.home0 p {font-family: 'Roboto', serif; font-size: 16px; padding:0 12px;}
	
.home1 {text-align: center; font: 17px/25px 'Roboto', sans-serif;}
.home1 p { margin-top:20px;}
.home1 img {width: 400px; height: auto; float: none; margin:0 auto; text-align:center;/* 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;}

.trading div:nth-of-type(2) { margin-top:20px; color:#FFF}
.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;}
.home4 h2 { border-bottom:1px solid #333; border-style:inset; padding-bottom:10px; margin-bottom:25px;}
.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;}
.sayfalama {text-align:center; color:#009fe3;}
	.sayfalama span {display:inline-block; padding:0 8px 0; color:#ccc;}
	.sayfalama a { font-style:normal}
.blog {}
	.blog hr {margin:20px 0; height:1px; border-width:0; color:#ddd; background-color:#ddd; width:100%; display:block;}
	.blog img {width:208px; height:208px; -webkit-border-radius:104px; -moz-border-radius:104px; border-radius:104px; float:left; margin:0 25px 35px 0; border:1px solid #ddd;}
	.blog h3 {margin-top:20px;}
	.blog h3 a {font-style:normal;}
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; display:flex; padding:20px 0; min-height: 150px; /*background: #333;*/background: #1e222d; margin-top: 80px; font-size: 12px; line-height: 16px; color: #fff;}
.logofooter {font: 18px/24px 'Roboto', sans-serif; color:#fff; margin:40px 0 0;}
.logofooter a:first-child {font: 35px/30px 'Roboto', sans-serif; color:#fff;}
.logofooter p a, .logofooter p a:hover {font: 18px/24px 'Roboto', sans-serif; color:#fff;}
.logofooter span {font-size: 30px;}
.logofooter img {width: 31px; height: auto; float: left; margin: -25px 10px 0 0;}
.design div { float:right; display:table; text-align: right; width:174px; height:24px; overflow:hidden}
.design {font-size: 10px; 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: 21px/50px 'Roboto Condensed', sans-serif; height: 50px;}
	header nav a {margin: 0 14px;}
	.top {height: 55px;}
	.menu {height: 55px;}
	.logo, .logo a {font: 40px 'Roboto Condensed', sans-serif; color: #fff; margin-top: 13px;}
	.logo img {width: 31px; height: auto; float: left; margin: -14px 10px 0 0;}
	.home0 h2 {font-size: 19px; padding:8px;}
	.home0 p {font-size: 14px; padding:8px;}
	.home1 img {max-width:-webkit-fill-available;}
	.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 {}
	.logofooter span {font-size: 26px;}
	.logofooter img {width: 31px; margin: -22px 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; background:none;}
	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 25px;}
	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; margin-top:35px;}
	.logo img {width: 31px; height: auto; float: left; margin: -14px 10px 0 0;}
	.logo a { display:inline-block; color:#333;}
	.logo a:hover { color:#000; }
	.slider { margin-top:285px;  background:url(../images/bg1.jpg) no-repeat 150px center cover; height:300px;}
	.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 { margin-top: 120px;}
	.logofooter {font: 18px/24px 'Roboto', sans-serif;}
	.logofooter span {font-size: 26px;}
	.logofooter img {width: 31px; margin: -24px 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; background:none;}
	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; margin-top:35px;}
	.logo img {width: 31px; height: auto; float: left; margin: -14px 10px 0 0;}
	.logo a { display:inline-block; color:#333;}
	.logo a:hover { color:#000; }
	.slider { margin-top:265px;  background:url(../images/bg1.jpg) no-repeat 150px center cover; height:300px;}
	.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 { margin-top: 120px;}
	/*.logofooter {font: 18px/24px 'Roboto', sans-serif;}
	.logofooter span {font-size: 24px;}
	.logofooter img {display: none;}
	.logofooter .padtop30 {padding-top: 15px;}*/
}