﻿@media (min-width: 62em){
body {transition:all .3s ease-out; padding-top:100px;}
#header{height:100px; background:#1A1A1A;}
#header .container{position:relative;}
#header .titlelogo, #header .lng{height:100px;}
#header .titlelogo .logo{width:372px;}
#topmenu ul{ display:flex; list-style:none; padding:0; margin:0; justify-content:flex-end; align-items:center;transition:all .3s ease-out;}
#topmenu>ul{height:100px;}
#topmenu ul>li{ position:relative; padding:15px 15px; transition:all .3s ease-out; line-height:1;}
#topmenu ul li a{ color:#F5F1EB; font-size:1.2rem; font-weight: 300;}
#topmenu ul li.submenu > a{padding-right:5px;}
#topmenu ul li.submenu>ul{ position:absolute; left:0; top:46px; width:200px; margin-left:calc(50% - 100px); padding:25px 20px 5px 20px; display:block; background-color:#00e0ff; visibility:hidden; opacity:0; transition:all .3s ease-out;}
#topmenu ul li.submenu>ul>li{ padding:0 0 20px 0; text-align:center;}
#topmenu ul li.submenu>ul>li>a{color:#000;}
#topmenu ul li.submenu>ul>li>a:hover{color:#333;}
/*#topmenu ul li.submenu:hover{ background-color:#00e0ff;}*/
#topmenu ul li.submenu:hover ul{ /*background-color:#000;*/ visibility:visible; opacity:1;}
#header .lng{height:100px;}
body.detail.scrolled {padding-top:60px;}
body.detail #header {background:#111;}
body.scrolled #header {height: 60px;}
body.scrolled #header .titlelogo, body.scrolled #header .lng, body.scrolled #topmenu>ul{height:60px;}
body.scrolled #header .titlelogo .logo{width:150px;}
body.scrolled #header .titlelogo .logo .black, body.detail #header .titlelogo .logo .black{display:none;}
body.scrolled #header .titlelogo .logo .white, body.detail #header .titlelogo .logo .white{display:block;}
main#main{min-height:500px;}
#balistron .header-desc .header-parag{font-size:1.5rem; padding-right:100px;}
#balistron .header-desc .header-parag h3{font-size:50px;}
#lifestyle{margin-top:150px;}
#models{margin-top:150px; margin-bottom:90px;}

.contentField02 .inverse figure{order: 2;}
    .contentField02 .inverse header{order: 1; text-align: right;}
}



@media (max-width: 61.95em){
body{padding-top:60px;}
#header{height:60px; background:#1a1a1a;}
#header .titlelogo{height:60px; position:static; padding:0; justify-content:center;}
#header .titlelogo .logo{width:190px; display: flex; justify-content: center;}
#header .titlelogo .logo .black{display:none;}
#header .titlelogo .logo .white{display:block;}
#header .titlelogo .logo img{width:155px;}
#header .hamburger{display:block; position:absolute; left:5px; top:5px;}
#header .lng{height:60px; padding:0 15px 0 0;}
#header .lng a{font-size:1rem;}
#header .lng button{font-size:1.1rem; margin-left:10px;}
#topmenu{visibility:hidden; opacity:0; position:absolute; top:60px; height:calc((var(--vh, 1vh) * 100) - 60px); left:0; width:100vw; overflow-x:hidden; overflow-y:auto; background:#FFF; z-index:100000; text-align:left;}
#topmenu ul{list-style:none; padding:0; margin:0;}
#topmenu ul li{display:block; margin:0 15px;}
#topmenu ul li.main{padding:10px 0; border-top:solid 1px #CCC; position:relative;}
#topmenu ul li.main:first-child{border-top:none;}
#topmenu ul li.main a{font-size:1.5rem; line-height:1.5em; font-weight:400; display:block; padding:10px 0; color:#000;}
#topmenu ul li.main ul{padding-left:20px;}
#topmenu ul li.main li>a{font-size:1.125rem; font-weight:300;}
#topmenu ul li.submenu>ul{padding-left:20px; height:0; overflow:hidden; opacity:0; transition:all .3s ease-out;}
#topmenu ul li.submenu.opened>ul{height:auto; opacity:1; padding:0 0 30px 0;}
body.menuopened #topmenu{visibility:visible; opacity:1;}
body.menuopened #header .hamburger:before, body.menuopened #header .hamburger:after{top: 25px;}
body.menuopened #header .hamburger span{left:-50px; opacity: 0;}
body.menuopened #header .hamburger:before{transform: rotate( -45deg ); width:22px;}
body.menuopened #header .hamburger:after{transform: rotate( 45deg ); width:22px; box-shadow:0 0 1px #282828;}


#footer .copyfld{padding: 0;}

.hero img{height: 500px;}

.contentField02 article figure a>div h2{font-size: 3rem;}
.contentField02 article figure a>div h4{font-size: 2rem;}

#hakkimizda p{font-size: 1.05rem;}

}

@media (max-width: 47.95em){



.sectors{padding:0 15px;}
.sectors ul{max-width:600px; flex-direction:column;}
.sectors ul li{position:relative; width: 100%;}
.sectors ul li.first{width: 100%;}
.sectors ul li .title{color:#FFF; position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; z-index:3; font-size:23px; font-weight:300; padding:0 20px; text-align:center;}
.sectors ul li.first .title{transform:none; align-items:center; font-size:25px;}
.sectors ul li:before{display:none;}

.sectors2{padding:0 15px;}
.sectors2 ul{max-width:600px; flex-direction:column;}
.sectors2 ul li{position:relative; width: 100%;}
.sectors2 ul li.first{width: 100%;}
.sectors2 ul li .title{color:#FFF; position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; z-index:3; font-size:23px; font-weight:300; padding:0 20px; text-align:center;}
.sectors2 ul li.first .title{transform:none; align-items:center; font-size:25px;}
.sectors2 ul li:before{display:none;}


.hero h1 {font-size: 32px;}
.hero p {font-size: 16px;}
.heroBtn {font-size: 14px; padding: 8px 16px;}

.hero img{height: 100vh;}

.contentField02 article figure a>div h2{font-size: 80px;}
.contentField02 article figure a>div h4{font-size: 4rem;}

#hakkimizda article{margin-bottom: 50px;}
#hakkimizda article img{max-height: 300px;}
}

@media (max-width: 35.95em){

    #hakkimizda .heroarea .title{font-size: 45px;}
    #hakkimizda .thumtext p{font-size: 27px;}
    
    
}




@media (max-width: 29.95em){



    .sectors ul li .title{font-size:17px;}
    .sectors ul li.first .title{font-size:19px;}


    #hakkimizda .heroarea .title{font-size: 38px; margin-bottom: 20px;}
    #hakkimizda .thumtext p{font-size: 23px;}
    #hakkimizda .innerthum{padding: 0;}

    .contentField02 article figure a>div{margin: 20px; padding: 0;}
    .contentField02 article figure a>div h2{font-size: 60px;}
    .contentField02 article figure a>div h4{font-size: 2.5rem;}
}




@media (min-width: 36em) and (max-width: 47.95em){	
}





@media (min-width: 48em) and (max-width: 61.95em){



.sectors ul li .title{font-size:15px;}
.sectors ul li.first .title{font-size:29px;}

}





@media (min-width: 62em) and (max-width: 74.9em){



.sectors ul li .title{font-size:17px;}
.sectors ul li.first .title{font-size:35px;}


}

@media (min-width: 75em){
.container{max-width:1170px !important;}

}

