@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin-ext);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300&subset=latin-ext);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100&subset=latin-ext);

@media only screen and (max-width: 400px) {
  .butonz { left: auto!important; margin-left: auto!important; margin-right: auto !important; width: auto !important; }
  .butonz div { margin-left: 63px !important; }

  .akyil { left: 50%!important; margin-left: -65px; top: 115px!important; }
  body { background-image: none!important;  }
  .menu { top: 80%!important; }
}

body { margin: 0; padding: 0; background-image: url('../main_back.jpg'); background-position: center center; background-size: cover; }

a { text-decoration: none; }

.akyil { position: absolute; left: 40px; top: 30px; }
.katre { position: absolute; right: 20px; bottom: 80px; z-index: 222; }
.symbol { width: 100%; text-align: center; margin-top: 0px;  }
.main_image { width: 1200px; position: relative; margin: 15px auto 0 auto; text-align: center; }
.change { position: absolute; left: 0; top: 50%; bottom: 50%;  margin-top: -40px; }
.change ul { list-style: none; padding: 0; margin-left: 0; }
.change ul li { margin-bottom: 10px; transition: all 0.3s ease-in-out; }
.change ul li:hover { border-bottom: 2px solid #fff; }
.change ul li img { height:45px; transition: all 0.3s ease-in-out; }
.change ul li img:hover { height: 60px; }

#pix { display: none; cursor: pointer }

.menu { position: absolute; right: 0; top: 20%; bottom: 50%; font-family: 'Open Sans', serif;}
.menu ul { overflow: auto; list-style: none; margin: 0; padding: 0;  border-bottom-left-radius: 30px; border-top-left-radius: 30px; }
.menu ul li { border-bottom: 1px solid #515151; padding: 7px 15px; text-align: center; transition: all 0.3s ease-in-out; background-color: rgba(0,0,0, 0.6); }
.menu ul li:nth-child(2n) { background-color: rgba(0,0,0, 0.6); margin-bottom: 5px;  }
.menu ul li:hover { background-color: rgba(0,0,0, 0.3); }
.menu ul li a { color:#fff; font-size: 20px; }
.menu ul li span { color:#fff; font-size: 20px; cursor: pointer; }

.detay { display: none; position: absolute; top:0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.7); font-family: 'Josefin Sans', sans-serif; }
.detay .detay-box { width: 1200px; margin: 0 auto; margin-top: 3%; height: auto; background-color: #fff; position:  }
.detay .detay-box .head { height: 50px; width:100%; background-color: #dddddd; }
.detay .detay-box .head .exit { height: 50px; width: 50px; float:right; background-color:#b7b7b7; font-size: 35px; color:#fff; margin-left: 15px; }
.detay .detay-box .head .satis { cursor: pointer; height: 48px; text-align: center; width: 180px;  float:right; background-color:#b7b7b7; font-size: 20px; color:#fff; padding: 12px 20px; margin-right: 15px; }
.detay .detay-box .head .exit i { cursor:pointer; margin: 5px 10px 0 12px; }
.detay .detay-box .head .title { float:left; padding: 16px 0px 0px 15px; font-size: 22px; }

.detayoda { display: none; position: absolute; top:0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.7); font-family: 'Josefin Sans', sans-serif; }
.detayoda .detay-box { width: 90%; margin: 0 auto; margin-top: 3%; height: 100%; background-color: #fff; }
.detayoda .detay-box .head { height: 50px; width:100%; background-color: #dddddd; }
.detayoda .detay-box .head .exit1 { height: 50px; width: 50px; float:right; background-color:#b7b7b7; font-size: 35px; color:#fff; }
.detayoda .detay-box .head .exit1 i { cursor:pointer; margin: 5px 10px 0 12px; color: #ff0 }
.detayoda .detay-box .head .title { float:left; padding: 16px 0px 0px 15px; font-size: 22px; }


.satisbox { display: none; position: absolute; top:0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.7); font-family: 'Josefin Sans', sans-serif; }
.satisbox .detay-box { width: 1200px; margin: 0 auto; margin-top: 3%; height: 100%; background-color: #fff; position:  }
.satisbox .detay-box .head { height: 50px; width:100%; background-color: #dddddd; }
.satisbox .detay-box .head .exit2 { height: 50px; width: 50px; float:right; background-color:#b7b7b7; font-size: 35px; color:red; }
.satisbox .detay-box .head .exit2 i { cursor:pointer; margin: 5px 10px 0 12px; color: #ff0 }
.satisbox .detay-box .head .title { float:left; padding: 16px 0px 0px 15px; font-size: 22px; }



.satisPost { font-family: 'Lato', sans-serif; padding: 20px; font-size: 16px; }
.satisPost label { width: 150px; float: left; padding-top: 5px; }
.satisPost input { width: 200px; float: left }
.satisPost textarea { width: 400px; height: 300px; }
.satisPost input:after { clear:both; }


.sonuc { font-family: 'Lato', sans-serif; padding: 10px 20px; background-color:#5fe000; margin: 15px; display: none; color:#fff; font-size: 18px; font-weight: 700; }

.headbox { margin-bottom: 15px; margin-top: 15px; overflow: auto; border-bottom: 1px solid rgba(0,0,0, 0.4); }
.headbox ul { list-style: none; margin:0; padding: 0;  }
.headbox ul li { float: left; cursor: pointer; width: 142px; height: 130px; padding-top: 30px;  margin:10px; background-color:#e74c3c; text-align: center; font-size: 16px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; color:#fff; font-weight: 700; transition: all 0.3s ease-in-out; }
.headbox ul li:hover { background-color: #c0392b; }
.headbox ul li i { font-size: 40px; margin-bottom: 10px; }
.headbox ul li a { color: #fff; }

.statics_box { margin-top: 25px; margin-bottom: 25px; }
.statics_box div { cursor: pointer; text-align: center; width: 23%; margin: 10px;  background-color: #ecf0f1; border-radius: 10px; border: 1px solid rgba(0,0,0, 0.1); padding: 30px; color: #34495e; font-weight: 700 }
.statics_box div:hover { background-color:#bdc3c7; }
.statics_box div span { font-size: 25px; }


.butonz { width:1040px; height: 122px; text-align: center; position: absolute; top: 320px; left: 50%; margin-left: -520px; margin-top: -61px; }
.butonz div { font-family: 'Oswald', sans-serif; cursor: pointer; transition: all 0.3s ease-in-out; font-size: 28px; float: left; color:#fff;  margin: 5px; }
.butonz div:hover { }
.butonz div a { color: #fff !important; }
.butonz div a:hover { text-decoration: none; }

.selectcat { position: absolute; width: 500px; text-align: center; left: 50%; right: 50%; margin-left: -250px; top: 200px;   }
.selectcat a { display: table; float:left; }
.selectcat a img { width: 250px; }

.galeri-top { width: 100%; background-color: #000; height: 75%; background-size: contain; background-position: center center; border-bottom: 3px inset #000; background-repeat: no-repeat; }
.galeri-bottom { width: 100%; background-color:#000; height: 25%; overflow: scroll; }

.galeri-bottom ul { list-style: none; margin: 0; padding: 0; overflow: auto; height: 100%; width: 2000px; }
.galeri-bottom ul li { float: left; transition: all 0.4s ease-in-out; margin-right: 5px; width: 200px; cursor: pointer; height: 100%; background-size: cover; background-position: center center;  }
.galeri-bottom ul li:hover { opacity: 0.6; }


.footbox { position: fixed; width: 100%; height: 60px; background-color:#000; bottom: 0; }
.footbox .icon { border-radius: 5px; border: 1px solid rgba(255,255,255, 0.3); color:#fff; padding: 2px 11px; font-size: 31px; margin:0 auto; display: table; margin-top:8px; }
.footbox .icon:hover { border: 1px solid #fff; }
.footbox .icon a { color:#fff !important }
.footbox .icon a:hover { color:#fff !important  }


.galerimenu { overflow: auto; position: absolute; right: 10px; top: 40px; }
.galerimenu div { font-family: 'Oswald', sans-serif; font-size: 18px; color:#fff; float: none; margin-bottom: 10px; }
.galerimenu div i { width: 20px; }
.galerimenu div:after { clear: both; }
.galerimenu div a { color:#fff; transition: all 0.3s ease-in-out; }
.galerimenu div a:hover { color:grey; }

#senet input { margin: 5px; }

.leftlogo { position: absolute; left: 0; background-color: #2f2928; padding: 45px 0px; top: 125px; }