body, html {width:100% !important; height:100% !important;}
body {padding:0; margin:0; color:#6f6d6d; background: url(../images/page-bg.gif) no-repeat top center; background-size:cover; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif;}

#wrapper {width: 100%; height: 100%; position:relative;}
.block {width:980px; margin:0 auto; padding:0; position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.clear {clear: both;}


#header{width:100%; min-height:310px; background:url(../images/header-bg.png) no-repeat top center; background-size:100% 100%; position:fixed; top:-300px; z-index:2;}
#left-wrap{width:20%; position:fixed; top:-200px; left:1%; z-index:5;}
#left-wrap img {width:100%; height:auto; display:block;}
#right-wrap{width:400px; height:100%; position:fixed; top:0; right:-250px; z-index:9;}

.top-menu {width:100%; height:90%; position:relative; top:0; right:-200px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; z-index:40; float:left;}
.header-root {width:88%; padding:0; margin:10px auto; position:relative; z-index:2000; text-align:left;}
.header-root .fa-bars{color:#fff !important; font-size:34px; padding:5px 10px; margin-top: 10%;}
.header-root .fa-bars:hover{color:#fff; transition: all 0.5s ease;}

nav.animenu{display:none;}
.main-menu{width:96%; margin:42% 2%; padding:0; float:left; display:none; right: 310px; position: relative;}
.menu{width:100%; margin:0; padding:0; display:inline-bock; list-style:none; float:left;}
.menu li{width:100%; text-align:right; float:left;}
.menu li a {padding:10px; color:#fff; font-size: 34px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; font-weight:bold; line-height:50px; letter-spacing: 1px; display:block;}
.menu li a:hover, .menu li a.active, .menu li .active:hover, .main-menu .info a:hover, .main-menu .info a.active, .main-menu .info .active:hover{color:#97c03e !important; text-decoration:none; transition: all 0.5s ease;}
.menu-bg{position:absolute; right:-680px; top:0; z-index:-1; width:100%; height: 100%;}
.menu-bg:after{content: ""; position: absolute; top: -20%; right: -100px; width: 200%; height: 150%; background: #000; opacity:0.9; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg);}
.main-menu .info{width:100%; margin-top: 60px; padding:0; font-size: 28px; font: normal; color:#a0a0a0; line-height:46px; text-align:right; float:left;}
.main-menu .info a{font-size: 24px; color:#a0a0a0;}
.main-menu .info span{font-size: 28px; font-weight:bold;}


#content {width:100%; height:auto; padding:0; margin:0 auto; overflow:hidden; float:left;}
#content h1 {color:#6f6f6f; font-size: 40px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; font-weight:bold; letter-spacing:3px; line-height: 30px; text-align:center; margin-left:10px;}
#content h2 {color:#000; font-size: 30px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; font-weight:bold; letter-spacing:1px; line-height: 50px; text-align:left;}
.home-bg{position:relative; z-index:1; opacity:0;}

.hakkimizda-bg{width:100%;  height:-webkit-fill-available;  background:url(../images/hakkimizda-bg.png) top center no-repeat; background-size: contain; position:relative; z-index:-1; opacity:0;}
.hakkimizda-holder{width:70%; position: absolute; left:15%; top:44%;}
.hakkimizda-content{width: 100%; height: 450px; padding:20px; color:#6f6d6d; font-size:16px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; line-height: 30px; opacity: 1; text-align:center; }


.teknik-sartname-holder{width:70%; position: absolute; left:15%; top:44%;}
.teknik-sartname-bg{width:100%; height:-webkit-fill-available; background:url(../images/teknik-sartname-bg.png) top center no-repeat; background-size: contain; position:relative; z-index:-1; opacity:0;}


.referanslar-bg{width:100%; height:-webkit-fill-available; background:url(../images/referanslar-bg.png) top center no-repeat; background-size: contain; position:relative; z-index:-1; opacity:0;}
.referanslar-holder{width: 100%; height:auto; position: absolute; left: 0; top:44%;}
.referanslar-content{width: 100%; padding:20px; color:#6f6d6d; font-size:16px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; line-height: 22px; opacity: 1; text-align:center; }
.referanslar-list{width:110%; margin:0px 0 100px 0; display:inline-table; list-style:none; float:left;}
.referanslar-list li{width:32%; height:252px; display:inline-block;  margin:8px; padding:0; overflow:hidden; float:left;}
.referanslar-list li img{width:100%; height:auto; padding:0; margin:0;}
.referanslar-list li img:hover  {transform: scale(1.5); transition: transform .5s ease;}
/*.referanslar-list li:nth-child(3n+0) {margin:8px 0 8px 8px;}*/


.modeller-menu{width:60%; margin:40px 28%; list-style:none; }
.modeller-menu li{width:24%; display:inline-block;  margin:0 5px; padding:10px; overflow:hidden; float:left;}
.modeller-menu li a {padding:10px; color:#fff; font-size:18px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; background:#242424; display:block; text-align:center; }
.modeller-menu li a:hover {color:#fff; font-size:18px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; background:#97c03c; text-decoration:none;}
.modeller-menu li a.active {color:#fff; background:#97c03c;}


.modeller-bg{width:100%; height:-webkit-fill-available; background:url(../images/referanslar-bg.png) top center no-repeat; background-size: contain; position:relative; z-index:-1; opacity:0;}
.modeller-holder{width: 100%; height:auto; position: absolute; left: 0; top:44%;}
.modeller-content{width: 100%; min-height:450px; padding:20px; color:#6f6d6d; font-size:16px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; line-height: 22px; opacity: 1; text-align:left; }
.modeller-content p{margin: 20px 0; text-align: left;}
.modeller-list{width:110%; margin:0px 0 100px 0; display:inline-table; list-style:none; float:left;}
.modeller-list li{width:32%; height:176px; display:inline-block;  margin:8px; padding:0; overflow:hidden; position:relative; float:left;}
.modeller-list li img{width:100%; height:auto; padding:0; margin:0;}
.modeller-list li img:hover {transform: scale(1.5); transition: transform .5s ease;}
/*.modeller-list li:nth-child(3n+0) {margin:8px 0 8px 8px;}*/
.modeller-list li img.valign{width:100%; height:auto; padding:0; margin-top:-92px !important;}
.modeller-list li .code{width:100%; height:30px; padding:5px; color:#fff; font-size:16px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; text-align:center; position:absolute; bottom:0; background:rgba(0,0,0,.8); z-index:99;}




.iletisim-bg{width:100%;  height:-webkit-fill-available; background:url(../images/iletisim-bg.png) top center no-repeat; background-size: contain; position:relative; z-index:-1; opacity:0;}
.iletisim-holder{width:70%; position: absolute; left:15%; top:44%;}
.iletisim-content{width: 100%; height: 450px; padding:20px; color:#6f6d6d; font-size:16px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; line-height: 22px; opacity: 1; text-align:center; }




footer {width:100%; height:40px; z-index:5; left:0; bottom:0; position:absolute; background:rgba(0,0,0,.8); /*background: url(../images/footer-bg.png) no-repeat top center; background-size:100% 100%;*/ }
.footer-block {width:98%; height:40px; margin:0 auto; padding:10px 0 0 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; line-height:20px; text-align:center; color:#fff; font-size:14px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif;}
.footer-block .copyright{width:50%; text-align:left; float:left;}
.footer-block .copyright a{color:#fff;}
.footer-block .social {width:50%; text-align:right; font-size:20px; float:left; }
.footer-block .social a{color:#fff; margin:0 0 0 20px;}
.footer-block a:hover{color:#97c03e;}




@media screen and (min-width: 1400px) 
{
     #left-wrap img {width:auto;}
     .modeller-list li{height:252px;}
     .modeller-list li img.valign{margin-top:-125px !important;}

}


@media screen and (max-width: 1366px) 
{
    .main-menu {margin: 6% 2%;}
    .hakkimizda-content, .iletisim-content{height:300px; }

    .modeller-menu li{width: 30%;}
    .footer-block {font-size:10px;}

}


@media screen and (min-width: 1366px) 
{
    .modeller-menu li{width: 30%;}
    .footer-block {font-size:10px;}
}



@media screen and (max-width: 1080px) 
{
    .hakkimizda-holder, .teknik-sartname-holder, .iletisim-holder {width: 70%; left: 15%;  top: 32%;}

    .modeller-menu{ width: 80%; margin: 40px 10%;}
    .modeller-menu li{width: 32%;}

    .modeller-holder, .referanslar-holder {top: 36%;}
    .modeller-list li, .referanslar-list li{width: 31.8%; height: 176px;}
    .modeller-list li img.valign {margin-top: -29px !important;}

}


    
@media screen and (max-width: 900px) 
{
.block{width:auto; padding: 0 10px;}
#left-wrap{top: 0; left: 4%;}
#right-wrap{display:none;}
.menu-bg{display:none;}
.header-root{width: 90%; height: 100px; margin: 0;}
.top-menu{height:auto;}
.main-menu{display:none;}
#menuac{display:none;}
nav.animenu{display:block; position: absolute; right: 0; top: 0px; z-index: 99;}


#content{width: 100%; height:100%;}
.hakkimizda-holder{width: 90%; position: absolute; left: 5%; top: 20%;}
.hakkimizda-content{width: 100%; font-size:16px; line-height: 22px;}

.teknik-sartname-holder{width: 90%; position: absolute; left: 5%; top: 20%;}


.modeller-holder {top: 22%;}
.modeller-list li {height:auto; width:31%; height: 127px;}
.modeller-list li img.valign {margin-top: 0px !important;}
.modeller-list li {height: 149px;}

.modeller-menu{ width:98%; margin: 40px 1%;}
.modeller-menu li{width:31%;}


.referanslar-content {padding:40px 0;}
.referanslar-holder{width: 90%; position: absolute; left: 5%; top: 20%;}
.referanslar-list li {height:122px; width:31.4%;}


.iletisim-holder{width: 90%; position: absolute; left: 5%; top: 20%;}


.footer{position:absolute; bottom:0; margin:0;}
.footer-block .copyright{width: 70%;}
.footer-block .social{width: 30%;}
}



@media screen and (max-width: 568px) {
    .modeller-menu li {width: 30%;}
    .modeller-list li {height:auto; width:28%; height: 85px;}
    .modeller-list li img.valign {margin-top: 0px !important;}
    .modeller-list li {height: 149px;}
}


@media screen and (max-width: 414px) {
 #header {min-height:210px; background-size: 100% 90%;}
 #wrapper {height: 85%;}
 #left-wrap {width:30%;}
 #left-wrap img{width:100%; height:auto; display:block;}
 #right-wrap {display:none;}

 nav.animenu {right:0px; top: -15px;}
 #content h1{font-size:22px; line-height:16px;}

 .hakkimizda-content {font-size:14px;}

 .modeller-menu li {width: 33%; margin: 0 0;}
 .modeller-menu li a, .modeller-menu li a:hover{font-size: 14px; line-height:20px;}
 .modeller-list, .referanslar-list {margin: 0px 0 80px 0;} 
 .modeller-list li {width: 42%; height:108px !important;} 
 .modeller-list li img.valign {margin-top: 0;}
 .referanslar-list li {width: 29.4%; height:61px;} 


 /*.modeller-list li:nth-child(3n+0) {margin:0px;}
 .referanslar-list li:nth-child(3n+0) {margin:0px;}*/


 footer{height:80px; background:#000 !important; }
.footer-block {height:80px; padding: 10px 0 0 0;}
.footer-block .copyright, .footer-block .social {width: 100%; margin:5px 0; text-align: center; float: left;}
}



/* navigation */
*, *:after, *:before {box-sizing: border-box;}

.animenu__toggle {display: none;  cursor: pointer;  background-color: #97c13e;  border: 0;  padding: 10px; width: 40px; height: 40px;}
.animenu__toggle:hover {background-color: #000;}
.animenu__toggle__bar {display: block;  width: 20px;  height: 2px;  background-color: #fff; transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);}
.animenu__toggle__bar + .animenu__toggle__bar {margin-top: 4px;}
.animenu__toggle--active .animenu__toggle__bar {margin: 0; position: absolute;}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) {transform: rotate(45deg);}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {opacity: 0;}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) {transform: rotate(-45deg);}
.animenu {display: block; margin-top: 10px;}
.animenu ul {padding: 0; list-style: none;}
.animenu li, .animenu a {display: inline-block; font-size: 15px;}
.animenu a {font-size: 15px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; color: #ffffff; text-decoration: none;}
.animenu__nav {/*background-color: #000;*/}
.animenu__nav > li {position: relative;}
.animenu__nav > li > a {margin: 10px 0px 10px 28px; padding-bottom:5px;}
.animenu__nav > li a.active, .animenu__nav > li a:hover {background:#97c13e;}
.animenu__nav > li > a:first-child:nth-last-child(2):before {content: ""; position: absolute; border: 4px solid transparent; border-bottom: 0; top: 50%; margin-top: -2px; right: 10px;}
.animenu__nav > li:hover > ul {opacity: 1; visibility: visible; margin: 0;}
.animenu__nav > li:hover > a {color: #fff;}
.animenu__nav__child {min-width: 100%; position: absolute; top: 100%;  left: 0; z-index: 1; opacity: 0; visibility: hidden; margin: 20px 0 0 0; background-color: #000000; transition: margin .15s, opacity .15s; width:232px; padding:10px !important;}
.animenu__nav__child > li {width: 100%; text-align:left;}
.animenu__nav__child > li:first-child > a:after {content: ''; position: absolute; height: 0; width: 0; left: 4.5em; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: inherit; color:#000;}
.animenu__nav__child > li:last-child {border: 0;}
.animenu__nav__child a {padding: 10px; width: 100%; color:#b8b8b8;}
.animenu__nav__child a:hover {background-color: #97c13e; border-color: #97c13e; color: #fff !important; width:212px;}
.animenu__nav > li > a img {top:9px; left:19px; position:absolute; display:block;}



@media screen and (max-width: 768px) 
{
  .animenu{ margin-top:0;}
  .animenu ul{ background:#000; padding: 0 5px 0 0; margin-top: 80px;}  
  .animenu__toggle {display: inline-block; position: absolute; top: 30px; right: 10px; z-index: 9999;}
  .animenu__nav, .animenu__nav__child {display: none;}
  .animenu__nav {margin: 0;}
  .animenu__nav > li {width: 100%; border-right: 0; border-bottom: 1px solid #515151;}
  .animenu__nav > li:last-child {border: 0;}
  .animenu__nav > li:first-child > a:after {content: ''; position: absolute; height: 0; width: 0; left: 1em; display:none;}
  .animenu__nav > li > a {width:100%; padding:10px; margin:0; border-color: #111; position: relative;}
  .animenu__nav a:hover {background-color: #97c13e; border-color: #97c13e; color: #fff;}
  .animenu__nav__child {width:100%; position: static; background-color: #373737; margin: 0; transition: none; visibility: visible; opacity: 1;}
  .animenu__nav__child > li:first-child > a:after {content: none;}
  .animenu__nav__child a {width:100%; padding:5px;}
  .animenu__nav__child > li{text-align:left;}
  
.animenu__nav > li > a img{display:none;}
  }
  
.animenu__nav--open {display: block !important;}
.animenu__nav--open .animenu__nav__child {display: block;}


/* navigation */