body {margin:0px auto; font-family: 'Open Sans', sans-serif;}
.ust {width:75%; height:117px; position:absolute; z-index:2; margin-left:15%; background-color:#fff; box-shadow:#DDD 0px 2px 5px}
.ust .logo {width:20%; height:117px; float:left; background-color:#774f38}
.ust .im {width:80%; height:117px; float:right;}
.ust .im .iletisim {width:100%; border-bottom:#DDD 1px solid; overflow:hidden;}
.ust .im .iletisim li {width:45%; float:left; list-style-type:none; color:#774f38; border-right:#ddd 1px solid; text-align:center}
.ust .im .iletisim .talep {padding:1%; float:right; padding-left:2%; padding-right:2%; cursor:pointer; font-size:16px; border-radius:5px; background-color:#3D8EE9; color:#fff;}
.ust .im .iletisim .talep:hover{background-color:#3E6DD0}
.ust .im .menu {width:100%; line-height:59px;}
.ust .im .menu li {width:14.669%; padding-left:1%; padding-right:1%; float:left; font-size:15px; font-weight:600; list-style-type:none; text-align:center; color:#552B00}
.ust .im .menu li:hover {background-color:#774f38; color:#fff;}
.ust .im .menu .aktif {background-color:#774f38; color:#fff;} 
.orta {width:100%; }
.orta .Bbaslik {height:100px; line-height:100px; margin-bottom:1%; text-align:center; font-size:26px; color:#774f38}
.orta .BBbaslik {height:100px; line-height:100px; margin-bottom:1%; text-align:center; font-size:26px; color:#fff}
.orta .BBacikla {width:80%; margin:0px auto; overflow:hidden; text-align:center;}
.orta .slayt {width:100%; height:700px; z-index:1; overflow:hidden;}
.orta .slayt img {width:100%;}
.orta .ozellik {}
.orta .ozellik .o1 {width:100%; height:200px; margin-top:5%; box-shadow:#F5F5F5 3px 2px 5px;}
.orta .ozellik .o2 {width:100%; height:200px; margin-top:5%; box-shadow:#F5F5F5 -3px 2px 5px;}
.orta .ozellik .i1 {width:20%; height:60px; border-radius:10px; margin-left:5%; margin-top:60px; float:left; background-color:#774f38; color:#fff; text-align:center; padding-top:10px}
.orta .ozellik .i2 {width:20%; height:60px; border-radius:10px; margin-right:5%; margin-left:5%; margin-top:60px; float:right; background-color:#774f38; color:#fff; text-align:center; padding-top:10px}
.orta .ozellik .by {width:70%; float:right}
.orta .ozellik .b {width:100%; height:60px; line-height:60px; font-size:20px; color:#774f38}
.orta .ozellik .y {width:100%; height:100px; }
.orta .ozellik .kutusol {width:35%; float:left; text-align:left;}
.orta .ozellik .kutuorta {width:25%; float:left; text-align:center;}
.orta .ozellik .kutusag {width:35%; float:right; text-align:right;}
.orta .acikla {width:100%; height:600px; background-image:url(../img/iskenderun-evden-eve.jpg)}
.orta .acikla .yazi {width:60%; height:600px; float:right; background-color:#774f38; color:#fff;}
/* Hizmetler */
.hizmetler {width:100%;}
.hizmetler .hizmet3 {width:31.3%; height:400px; float:left; margin:1%; background-color:#fff; box-shadow:#bbb 0px 0px 1px; overflow:hidden;}
.hizmetler .hizmet3 .cizgi {width:15%; height:5px; box-shadow:#774f38 0px 5px 1px; color:#774f38}
.hizmetler .hizmet3 .resim {width:99.6%; height:200px; padding:0.2%; overflow:hidden;}
.hizmetler .hizmet3 .resim img {width:100%;}
.hizmetler .hizmet3 .baslik {width:100%; height:50px; padding-left:5%; padding-top:5%; padding-right:5%; font-size:18px; font-weight:500; color:#555}
.hizmetler .hizmet3 .aciklama {height:70px; padding-left:5%; padding-right:5%; color:#666}
.hizmetler .hizmet3 a {color:#774f38; text-decoration:none;}
.hizmetler .hizmet3 .kose {width:12%; height:110px; bottom:0; padding-top:30px; padding-left:10px; float:right; background-color:#774f38; color:#fff; 
/* Safari */
-webkit-transform: rotate(45deg);
/* Firefox */
-moz-transform: rotate(45deg); 
/* IE */
-ms-transform: rotate(45deg);
/* Opera */
-o-transform: rotate(45deg);
}

.hizmetler .hizmet4 {width:21%; height:100px; line-height:32px; margin:1%; padding:1%; float:left;}
.hizmetler .hizmet4 .ikon {width:28%; height:100px; float:left; padding:3%;}
.hizmetler .hizmet4 .baslik {width:58%; height:100px; float:right; padding:3%;}
/* Alt */

.alt {width:100%; height:300px; background-color:#2f2f2f; color:#fff;}
.alt .Abaslik {width:100%; height:60px; line-height:60px; font-size:18px; font-weight:500}
.alt .Aaciklama {width:100%; height:160px;}
.alt .Aaciklama a {color:#fff; text-decoration:none;}
.alt .Aaciklama a:hover {color:#E60000}
.alt .Aaciklama li {list-style-type:none;}
.alt .telif {width:50%; height:50px; line-height:50px; float:left; font-size:13px;}
.alt .imza {width:50%; height:50px; line-height:50px; float:right; text-align:right; font-size:13px;}

/* Sayfa */

.Sbaslik {width:100%; height:70px; line-height:70px; font-size:24px; font-weight:600; border-bottom:#eee 1px solid;}
.Sbaslik span {width:14%; float:right; font-size:13px; font-weight:300}
.Sbaslik span a {color:#333; text-decoration:none;}
.sayfa {width:100%; margin-top:1%; margin-bottom:3%;}
.sayfa .sayfaresim {width:50%; height:300px; margin-right:2%; overflow:hidden; float:left; border:#eee 2px solid; box-shadow:#ccc 0px 5px 15px;}
.sayfa .sayfaresim img {width:100%;}
.sayfa .sayfayazi { color:#999;}

/* Detaysayfa */

.detays {width:100%; margin-top:1%;}
.detays .liste {width:20%; float:left; margin-right:1%; padding:2%; background-color:#E60000; color:#fff;}
.detays .liste .baslik {padding:5%; margin-bottom:20px; font-size:18px; font-weight:bold; background-color:#FFF; color:#666; box-shadow:#333 0px 10px 20px;}
.detays .liste li {width:98%; height:30px; line-height:30px; padding:2%; list-style-type:none; font-size:14px; overflow:hidden; color:#fff;}
.detays .liste a {color:#fff; text-decoration:none;}
.detays .liste li:hover {background-color:#FFFFFF; color:#000}
.detays .aciklama {width:74%; float:right}
.detays .aciklama .baslik {width:100%; height:40px; line-height:40px; padding-bottom:1%; float:left; font-size:24px; border-bottom:#EEE 1px solid; font-weight:700}
.detays .aciklama .bilgi {width:98%; height:20px; padding:1%; line-height:20px; float:right; font-size:13px; background-color:#F6F6F6; color:#666}
.detays .aciklama .bilgi .tarih {width:60%; float:left}
.detays .aciklama .bilgi .yorum {width:20%; float:left;}
.detays .aciklama .bilgi .goruntuleme{width:20%; float:right;}
.detays .aciklama .resim {width:50%; margin-right:2%; margin-top:3%; float:left}
.detays .aciklama .resim img {width:100%;}
.detays .aciklama .yazi {margin-top:7%; font-size:14px; line-height:23px; color:#999;}



/* Galeri */
.galeri {width:100%;}
.galeri .galeri3 {width: 21.2%; height:180px; float:left; margin:1%; border:#774f38 8px inset; overflow:hidden;}
.galeri .galeri3:hover {border:#774f38 8px solid; }
.galeri .galeri3 img {width:100%;}

/* İletişim */
.haritas {width:100%; height:250px; overflow:hidden;}
.haritas img {width:100%;}

.iletisim2 {width:100%;}
.iletisim2 .btel {width:45%; float:left; margin-bottom:2%;}
.iletisim2 .btel a {color:#444; text-decoration:none;}
.iletisim2 .btel a:hover {color:#E60000}
.iletisim2 .ikon {width:10%; height:50px; line-height:50px; padding:1%; float:left; margin-left:3%;}
.iletisim2 .yazi {width:82%; height:50px; line-height:25px; padding:1%; float:right;}
.iletisim2 .btel .baslik {width:96%; height:20px; padding:2%; background-color:#774f38; color:#fff; font-size:16px; font-weight:500}
.iletisim2 .bilgi {width:100%; height:250px; margin-top:2%;}
.iletisim2 .harita {width:53%; height:500px; margin-left:2%; margin-top:0.5%; float:right;}


/* Genel */
.hizala {width:1152px; margin:0px auto;}
.temizle {clear:both;}
.bosluk {width:100%; height:30px;}
.mobilemenu, .simdiara {display:none;}
li {list-style-type:none;}

/* Form */

input[type="text"] {width:98%; height:30px; padding:1%; border-radius:5px; border:#eee 1px solid;}
input[type="submit"] {width:30%; height:40px; padding:1%; font-size:16px; border-radius:5px; border:#eee 1px solid; background-color:#3D8EE9; color:#fff;}
textarea {width:98%; height:120px; padding:1%; border-radius:5px; border:#eee 1px solid; color:#666;  font-family: 'Roboto', sans-serif;}

/* Kutular */

.kutu {width:100%;}
.kutu2 {width:47%; float:left; padding:1%; margin:0.5%}
.kutu3 {width:31.3%; float:left; padding:1%;}
.kutu4 {width:23%; float:left; padding:1%;}
.kutu7 {width:13.9%; float:left; padding:1%;}

/* Renkler */

.gri {background-color:#F6F6F6;}
.gri3 {background-color:#F8F8F8}

/* Font Size */
.font14 {font-size:14px}
.font18 {font-size:18px}
.font20 {font-size:20px}
.font24 {font-size:24px}

/* Modal */

input[type='checkbox']#gizli-checkbox{
 display:none;
}
.cerceve {
  background: rgba(5, 10, 30, 0.8);
  opacity:0;
  visibility:hidden;
  z-index: 99999;
}
.modal{
  background-color:white;
  width: 80%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 10px; left: 0; right: 0;
  border-radius:5px;
  padding:10px 15px;
}
 
.modal .kapat{
  float:right;
  color:#333;
  cursor:pointer;
}
input[type='checkbox']#gizli-checkbox:checked ~ .cerceve{
  position:absolute;
  z-index:9999;
  top:0;bottom:0;left:0; right:0;
  opacity:1;
  visibility:visible;
}