/*********************************************************************************** kaplama */
.kaplama:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.kaplama { display: inline-block; }
* html .kaplama { height: 1%; }
.kaplama { display: block; }
/*********************************************************************************** genel */
a { color:#069; text-decoration:none; font-weight:bold}
a:hover {color:#000 }
h4 { padding:0; margin:0; color:#069}
ul {padding:0; margin:0; list-style:none}
/*********************************************************************************** body */
body{margin:0; font-family:Tahoma, Geneva, sans-serif, sans-serif; font-size:12px}
html, body, #kapsul { height: 100%; }
body > #kapsul { height: auto; min-height: 100%; }
#kapsul {background: url(../images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:0 0px; z-index:1;min-height:100%;}
#contentarea { width:100%; max-width:1260px; margin:auto; padding-bottom: 23px; background:url(../images/kapsul.png) }
#area {width:95%; max-width:1185px; margin:auto; padding-top:10px}
/*********************************************************************************** header */
header { background:url(../images/header.png) no-repeat; height:176px; position:relative}
/*********************************************************************************** menu */
header nav { float: right; margin-top: 70px; margin-right:15PX;}
header nav li {	display: inline; margin-left: 15px; background:#3bada9;padding:6px 0px  }
header nav li a { color:#FFF; font-size:16px; text-decoration:none; padding:3px 10px;  font-weight:normal}
header nav li a:hover { background:#FF9900;color:#FFF; }
#hidden_div3 {position:absolute; right:30px;  z-index:9999; text-align:center; margin-top:10px; width:200px; }
#hidden_div3 .ols {width:200px; background:#ff9900; min-height:10px; padding:2px 5px; border-bottom:1px solid #fff}
#hidden_div2, #hidden_div {position:absolute; right:30px;  z-index:9999; text-align:center; margin-top:10px; width:145px; }
#hidden_div2 .ols, #hidden_div .ols {width:135px; background:#ff9900; min-height:10px; padding:2px 5px; border-bottom:1px solid #fff}
#hidden_div3 .ols:hover, #hidden_div2 .ols:hover, #hidden_div .ols:hover { background:#3bada9; min-height:10px}
#hidden_div3 .ols a, #hidden_div2 .ols a, #hidden_div .ols a {background:none; }
/*********************************************************************************** logo */
.logo2 {display:none}
.logo {position:absolute; top:52px; left:140px; width:%17; max-width:164px; height:118px;  }
.logo img { width:%17; max-width:193px; height:118px;  }
/*********************************************************************************** banner */
#banner {position:relative;	width:100%;	margin:10px 0; clear:left}
#banner .right {width:100%; max-width:1185px;}
/*********************************************************************************** bottom */
#bottom {width:100%; max-width:1185px; min-height:385px; background:url(../images/bottom.jpg) #000; position:relative }
#bottom .left {width:33%; max-width:395px; min-height:385px; float:left; background:url(../images/tick.png) no-repeat right top}
#bottom .middle {width:33%; max-width:395px; min-height:380px; float:left; background:url(../images/tick.png) no-repeat right top; padding-bottom:5px}
#bottom .right {width:33%; max-width:395px; min-height:385px; float:left;}
#bottom .inner {width:90%; margin:0 auto; padding:10px;}
#bottom .left img {float: left; width:147px; height:170px; margin-right:5PX}
#bottom .galeri img {float: none; width:70%;   margin:1% 2%;  }
#bottom .text { clear:both}
#bottom .lop_of  { display:none}
#bottom .contactf { margin-bottom:10px}
#bottom .map { clear:both}
#bottom .map img { width:100%}
/*********************************************************************************** inner */
#inner { background:url(../images/inner.png);width:94%; padding:3%; min-height:350px; margin-top:10px; clear:left}
#inner img {width:20%; float:left; margin-right:2%}
#inner .title { width:100%; margin:0 auto; padding:5px 0%; border-bottom:2px solid  #333; font-size:14px; color:#333; height:20px; text-align:right; font-weight:bold; clear:both}
#inner .title2 { width:100%; margin:0 auto; padding:5px 0%; border-bottom:2px solid  #F66; font-size:14px; color:#F66; height:20px; text-align:left; font-weight:bold; clear:both}
#inner .tuko { padding:10px 0px}
#inner .tuko img {border:2px solid #F90}
#inner .resimler { padding:10px 0px}
#inner .resimler ul { width:100%; list-style:none}
#inner .resimler li { float:left; width:16%; padding:2%}
#inner .resimler div { position: relative; width: 100%;height: 0;padding-bottom: 75%;background: #ddd;}
#inner .resimler img { position: absolute;	margin: 0;	height: 100%;	background: #ccc;	width:100%;	border:2px solid #F90  }
#inner .referanslar { padding:10px 0px; clear:left}

#inner .referanslar ul { width:100%; list-style:none}
#inner .referanslar li { float:left; width:16%; padding:2%}
#inner .projectimg  { position: relative; width: 100%;height: 0;padding-bottom: 75%;; margin-bottom:10px;}
#inner .projectname  { position: relative; width: 100%;height: 0;padding-bottom: 20%;background:none; clear:left;border:2px solid #F90;color:#000; font-weight:bold; text-align:center }
#inner .projectname  a { color:#000; text-decoration:none; font-weight:normal}
#inner .referanslar img { position: absolute;	margin: 0;	height: 100%;	background: #ccc;	width:100%;	border:2px solid #F90  }

.nexts {margin:10px 20PX; clear:both; text-align:LEFT; }
.nexts span {background:#fff; color:#000; padding:3px; margin:3px; border:1px solid #999}
.nexts a{ background:#000000; color:#F66; padding:3px; margin:3px; border:1px solid #999}
#inner .bigpic { width:48%; padding:1%; float:left}
#inner .bigpic img { width:95%; margin:0 auto;border:2px solid #F90}
#inner .detail { width:48%; padding:1%; float:left}
/*********************************************************************************** footer */
#footer { width:100%; position: relative; margin-top: -23px; height: 23px;}
.menu1023 {display:none}
.menu767 {display:none;}
.littlemenu {display:none;}
.gridtitle { font-weight:bold; color:#FFF; background:#ff9900}
.grid1 { background:#bbb}
.grid3 { background:#FC0; font-weight:bold}
blockquote {
    border-left: 3px solid #EC4B36;
    color: #555555;
    font-style: italic;
    margin: 0 0 20px;
    padding: 0 20px 0 30px;
    position: relative;
}
.icsel {width:100% !important; margin-top:15px; position:relative}
.imghucre2 {width:20% !important; float:left; margin-bottom:10px}
.imghucre2 img {width:90% !important}
.imghucre {width:25% !important; float:left; margin-bottom:10px}
.imghucre img {width:95% !important}
.mailtoo { position:absolute; bottom:10px; right:10px}
.pageson {background:#006699; color:#FFFFFF; padding:5px; margin-right:5px}
.pagesoff {background:#FFFFFF; color:#006699; padding:5px; margin-right:5px}
.hops img { width:50% !important; max-width:1185px !important}
.phones {position:absolute; top:10px; right:0; font-size:16px; color:#666666}
.phones2 {position:absolute; top:8px; right:140px;}
.phones2 img {border:0; width:26px; height:26px;}
@media only screen and (min-width: 768px) and (max-width: 1023px) { 

/*********************************************************************************** header */
header { background:url(../images/header.png) no-repeat; height:176px; position:relative}
/*********************************************************************************** menu */
header nav { float: right; margin-top: 60px; margin-right:30PX;}
header ul {display:none;}
.menu1023 {display:block;}
.menu767 {display:none;}
.littlemenu {display:none;}
.phones {display:none;}
.phones2 {display:none;}
/*********************************************************************************** logo */
.logo2 {display:none}
.logo {position:absolute; top:52px; left:140px; width:%17; max-width:164px; height:118px;  }
.logo img { width:%17; max-width:193px; height:118px;  }
/*********************************************************************************** bottom */
#bottom .left img {float: left; width:147px; height:170px; margin-right:5PX}
#bottom { }
#inner .resimler ul { width:99%; }
#inner .resimler li { float:left; width:29%; padding:2%}
#inner .resimler img { width:100%; border:2px solid #F90; }
#inner .referanslar li { float:left; width:16%; padding:1% 2%; overflow:hidden; height:100%}
#inner .referanslar { padding:10px 0px}
#inner .referanslar ul { width:99%; list-style:none}
#inner .referanslar li { float:left; width:29%; overflow:hidden; height:100%}
#inner .referanslar img { width:100%; border:2px solid #F90}
	.icsel {width:100% !important}
.imghucre {width:33% !important; float:left; margin-bottom:10px}
.imghucre img {width:95% !important}
.imghucre2 {width:33% !important; float:left; margin-bottom:10px}
.imghucre2 img {width:97% !important}

}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
/*********************************************************************************** genel */
h4 {color:#FFFFFF; padding:4px 0}
#kapsul {background: #111 }
/*********************************************************************************** header */	
header { background:url(../images/header3.png) no-repeat; position:relative; margin:0; padding:0; height:138px}
/*********************************************************************************** logo */
.logo2 {display:block; background:url(../images/hops.png); text-align:left; margin-bottom:0px; padding:5px 0px 5px 20px }
.logo {top:40px; left:90px; display:none}
.logo img {  max-width:119px; height:0px; }
/*********************************************************************************** menu */
header nav { float: right; margin: 0px;  height:0}
header ul {display:none; height:0}
.menu1023 {display:block; position:absolute; top: 40px; right:40px; padding:0; margin:0}
.menu767 {display:none;}
.littlemenu {display:none;}
#banner {float:left; margin-top:0px}
#hidden_div2, #hidden_div {position:absolute; right:0px;  z-index:9999; text-align:center; margin-top:10px; width:145px; }
/*********************************************************************************** bottom */		
#bottom {width:100%; max-width:1185px; background:none; clear:both;min-height:55px; max-height:115px }
#bottom .left {width:100%;  max-width:100%; float:none; background: #ff9900; margin-bottom:10px;min-height:55px; padding:5px 0; clear:left; color:#FFF}
#bottom .left img {float: left; width:147px; height:170px; margin-right:5PX}
#bottom .middle {width:100%;  max-width:100%; float:none; background: #3bada9; margin-bottom:10px;min-height:55px; color:#FFF; clear:left;}
#bottom .middle img {float: left; width:15.66%;margin-right:5PX}
#bottom .right {
				width:100%;  max-width:100%; float:none; background: #fff; margin-bottom:10px;min-height:55px; padding:5px 0; clear:left; color:#000 }
#bottom .right p { width:100%}
#bottom .right h4 { color:#000000}
#bottom .inner {width:95%; margin:0 auto; padding:1px 3px; font-size:0.8rem }
#bottom .inner p { margin:0; padding:0}
#bottom .galeri img {float: left; width:21%; max-height:136px; min-height:136px;  margin:1% 2%;  }
#inner img {width:30%; float:left; margin-right:2%}
#inner .resimler li { float:left; width:46%; padding:2%}
#inner .referanslar { padding:10px 0px}
#inner .referanslar ul { width:100%; list-style:none}
#inner .referanslar li { float:left; width:46%;  overflow:hidden; height:100%}
#inner .referanslar img { width:100%; border:2px solid #F90}
#inner .resimler img { width:100%; border:2px solid #F90; }
#inner .bigpic { display:none}
#inner .detail { width:100%; padding:0%; float:none; clear:left}
.icsel {width:100% !important}
.imghucre {width:50% !important; float:left; margin-bottom:10px}
.imghucre img {width:95% !important}
.mailtoo { position:realitive; clear:left; bottom:auto; right:auto; height:20px; background:#FC0; width:90%; margin:0 auto}
.imghucre2 {width:33% !important; float:left; margin-bottom:10px}
.imghucre2 img {width:95% !important}
.phones {display:none;}
.phones2 {display:none;}
}
@media only screen and (max-width: 479px) {
	.phones {display:none;}
.phones2 {display:none;}
.icsel {width:100% !important}
.imghucre {width:100% !important; float:left; margin-bottom:10px}
.imghucre img {width:99% !important}
/*********************************************************************************** genel */
h4 {padding:4px 0}
#kapsul {background: #111 }
/*********************************************************************************** header */
header  {margin:0 ;padding:0; height:115px; background: none }
/*********************************************************************************** menu */
header ul {display:none;padding:0; margin:0 }
header nav {float: left;clear: left;margin: 0px;padding:0;width: 100%;}	
header nav li {margin: 0;display: block;margin-bottom: 3px;padding:0;}
header nav a {	display: block;	padding:0;	text-align: center;	}
.menu1023 {:none;}
.menu767 {display:none;}
.littlemenu {display:block;}
/*********************************************************************************** logo */
.logo {display:none}	
.logo2 {display:block; background:url(../images/hops.png); text-align:center; margin-bottom:5px; padding:5px 0 }
/*********************************************************************************** banner */
#banner .right {width:100%;} 
/*********************************************************************************** bottom */
#bottom {width:100%; max-width:1185px; background:none; clear:both;min-height:55px; max-height:115px }
#bottom .left {width:100%;  max-width:100%; float:none; background: #fff; margin-bottom:10px;min-height:55px; padding:5px 0; }
#bottom .left img {float: left; width:147px; height:170px; margin-right:5PX}
#bottom .middle {width:100%;  max-width:100%; float:none; background: #fff; margin-bottom:10px;min-height:55px; }
#bottom .right {width:100%; max-width:100%;  background:#fff;min-height:55px; padding:5px 0}
#bottom .inner { width:95%; margin:0 auto; padding:1px 3px; font-size:0.8rem }
#bottom .inner p { margin:0; padding:0}
#bottom .galeri { }
#bottom .lop_of  {display:block; width:100%; padding:5px 0}
#bottom .lop_of  img {width:100%;}
#bottom .right h4 { color:#000000}
#inner img {width:100%; float:left; margin-bottom:10px}
#inner .resimler ul { width:100%;}
#inner .resimler li { float:left; width:96%; padding:2%}
#inner .resimler img { width:100%; border:2px solid #F90}

#inner .projectimg  { position: relative; width: 100%;height: 0;padding-bottom: 55%; margin-bottom:10px;}

#inner .referanslar { padding:10px 0px}
#inner .referanslar ul { width:100%; list-style:none}
#inner .referanslar li { float:left; width:96%; }
#inner .referanslar img { width:100%; border:2px solid #F90}

#inner .bigpic { display:none}
#inner .detail { width:100%; padding:0%; float:none; clear:left}
#inner .title  {font-size:14px; float:left; height:50px    }
#inner .title div {float:right; !important; width:100%; clear:both; padding:5px 0;text-align:left   }
.mailtoo {display:none}
.imghucre2 {width:50% !important; float:left; margin-bottom:10px}
.imghucre2 img {width:95% !important}
}