body, html {width:100% !important; height:100% !important;}
body {padding:0; margin:0; color:#0e0e0e; background:#fff; font-family: 'Play', Calibri, Tahoma, Sans-Serif;}

#wrapper {width: 100%; height: 100%; color: #0e0e0e; margin: 0 auto; position:relative; overflow:hidden;}
.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-wrap{width:30%; min-height:700px; margin:0; padding:0; background:url(../images/header-bg.png) top right no-repeat; left:-500px; position:absolute;}
#header-wrap img.pc { width: 64%; height: auto; padding:20px; display:block; z-index:999999; position:relative; left:0px; top:-500px; display:block;}
#header-wrap img.mobile { width: 62%; height: auto; padding:10px; display:block; z-index:999999; position:relative; left:0px; top:-500px; display:none;}

.header {width:100%; height:80px; position:absolute; top:0; z-index:40; float:left;}

#menu-wrap{width:20.5%; left:-900px; top:160px; position:relative; float:left;}
nav.animenu{display:none;}
.main-menu{width:100%; padding:0; text-align:right; float:left;}
.menu{width:65%; margin:0; padding:0; display:grid; list-style:none; float:right;}
.menu li{text-align:right; float:left;}
.menu li.one-mn{margin:6px 0;}
.menu li.two-mn{margin:6px 22px 6px 0;}
.menu li.three-mn{margin:6px 40px 6px 0;}
.menu li.four-mn{margin:6px 58px 6px 0;}
.menu li.five-mn{margin:6px 78px 6px 0;}
.menu li a {padding:8px 14px; color:#fff; font-size: 16px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; line-height:26px; letter-spacing: 1px; display:block; text-decoration:none;}
.menu li a:hover, .menu li a.active{ color:#fff !important;  background: #be0005; text-decoration:none; transition: all 0.5s ease; content: ''; height: 100%; top: 0; left: 0; background: #be0005;  transform-origin: bottom left; -ms-transform: skew(-21deg, 0deg); -webkit-transform: skew(-21deg, 0deg); transform: skew(-21deg, 0deg); z-index: -1;
 text-decoration:none; transition: all 0.5s ease; }



.bg-1, .bg-2, .bg-3, .bg-4 {width: 100%; height: 100%; opacity:0; position:fixed;}
.main-element {width: 100%; height: 100%; overflow:hidden !important; left: 0; bottom: 0; z-index: 10; position: absolute;}
.main-element .element-1 {width:30%; height:100%; position: absolute; left: -40%; top: 0; z-index:5;}
.main-element .element-2 {width:30%; height:100%; position: absolute; left: 0%; top: 0; z-index:6;}
.main-element .element-3 {width:30%; height:100%; position: absolute; left: 0%; top: 0; z-index:7;}
.main-element .element-4 {width:30%; height:100%; position: absolute; left: 0%; top: 0; z-index:8;}
.main-element img {width:100%; height:auto; display:block;}
	

#content {width:100%; padding:0; margin:0 auto; overflow:hidden; float:left;}

.page-bg{width:100%; height:100%; overflow:hidden;}
.page-bg h1{width:100%; margin:0 0 20px 0; padding:0; color: #0e0e0e; font-size:20px; font-family: 'Play', Tahoma, Calibri, Sans-Serif; font-weight:600; text-align:left; float:left;}
.page-holder{width: 60%; position: absolute; right: 10%; bottom: 10%; z-index: 9;}
.page-content{width: 100%; height: 312px; padding: 20px; color:#1f1f1f; font-size:16px; font-family: 'Play', Tahoma, Calibri, Sans-Serif; line-height: 28px; background-color: rgba(255, 255, 255, 0.8);}

.page {width:100%; height:400px; margin: 0 auto; padding:30px; left:0; bottom:-500px; position: relative; opacity:1; }
.page-back{width:100%; height:auto; position: absolute; left:0; top:-200%; z-index:6;}
.page-back img {width:100%; height:auto;}
.page-element {width:100%; text-align:right; position:absolute; bottom:-64px; right:0;}
.page-element img {width:30%; height:auto;}
.page h2{width:100%; margin:20px 0 40px 0 !important; padding:0 !important; color: #565656; font-size:24px !important; font-family: 'Play', Tahoma, Calibri, Sans-Serif !important; font-weight:600 !important; text-align:left; float:left;}
.iletisim-element {width:100%; text-align:right; position:absolute; bottom:-74px; right:-45px;}
.iletisim-element img {width:10%; height:auto;}


.product-list {width:100%; display:inline-block; list-style:none; float:left;}
.product-list li {width:48%; margin:2% 2% 2% 0; padding:20px; background:#f3f3f3; border:1px solid #b3b3b3; text-align:center; float:left;}
.product-list li .pic {width:100%; text-align:center; float:left;}
.product-list li .pic img {width:100%; height:auto;}
.product-list li .name {width:100%; text-align:center; color:#0e0e0e; font-size:16px; font-family: 'Play', Tahoma, Calibri, Sans-Serif; font-weight:300; float:left;}
#product-catalogue {position:absolute; left:22%; bottom:-50%; z-index:999999;}
#product-catalogue img {width:70%; height:auto;}
.product-technical {width:90%; text-align:left; float:left;}
.product-technical-null {width:90%; min-height:1px; text-align:left; float:left;}
.product-pdf {width:8%; padding:0; text-align:right; float:left;}
.product-pdf-null {width:10%; padding:0; text-align:right; position: absolute; right: 0;}
.product-pdf img , .product-pdf-null img {width:100%; height:auto;}
.product-table {width:100%; text-align:center; float:left;}


.tablo_y{width:100%; margin:20px 0; border:0px; font-family:'Play', Tahoma, Calibri, Sans-Serif; font-size:12px;}
.tablo_y tr td{	border-right:1px solid #fff; border-bottom:1px solid #fff; padding:3px;	text-align:center;}
.tablo_y tr .r_ , .tablo_y tr .r_2 , .tablo_y tr .r_3 , .tablo_y tr .r_4{background:#be0005; color:#fff; width:15%;	text-align:center; word-break: break-all;}
.tablo_y tr .r_2{width:25%;}
.tablo_y tr .r_3{width:20%;}
.tablo_y tr .r_4{width:10%;}
.tablo_y .tr1{background:#e2e6e9;}
.tablo_y .tr2{background:#cacfd3;}



footer {width:32%; min-height:280px; z-index:100; left:0; bottom:-800px; position: fixed; background:url(../images/footer-bg.png) left top no-repeat; }
.footer-block {width:66%; margin:0; bottom:2%; position:absolute;}

.footer-block .info{width:70%; margin:5px 0; color:#fff; font-size:14px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; line-height:24px; text-align:center; float:left;}
.footer-block .info a{color:#fff;}

.footer-block .social {width:70%; margin:5px 0; font-size:18px; text-align:center; float: left;}
.footer-block .social a{color:#fff; margin:0; padding:0px 8px;}
.footer-block .social a:hover{color:#be0005 !important; text-decoration:none; transition: all 0.5s ease;}

.footer-block .copyright{width:100%; margin:5px 0; color:#fff; font-size:11px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; text-align:center; float:left;}
.footer-block .copyright a{color:#ffffff; text-decoration:none;}
.footer-block .copyright a:hover{color:#be0005; text-decoration:none;}





@media screen and (min-width: 1400px) 
{
   #header-wrap {width: 27%; min-height: 1100px; background: url(../images/header-bg.png) top left no-repeat;}
   #menu-wrap {width: 20.9%;}

   .page{ height:600px; }

   .product-list li{width: 31.3%;}
   .product-pdf, .product-pdf-null {width: 7%;}

    .footer-block {width: 46%;}

 }




@media screen and (max-width: 1024px) 
{
   .main-menu{display:none;}
    #menu-wrap {width:100%; top:10px;}
    nav.animenu{width: 57%; display:block; position: absolute; right: 0; top: 0; z-index: 9999;}

    #header-wrap {width: 35%; min-height: 290px; background: url(../images/header-bg-mobile-768.png) top left no-repeat;}
    #header-wrap img.pc {display:none;}
    #header-wrap img.mobile {display:block; width: 54%;}
    
    .animenu__nav > li > a {padding:5px;}

    .page-holder { width: 60%;  position: absolute; right: 15%; bottom: auto; top:15%; z-index: 9;}

    #product-catalogue{left: 14%;}

    
     footer {width:100%; min-height:100px; z-index:100; left:0; bottom:0px; position: fixed; background-color: rgba(0, 0, 0, 0.8); background-image: none; }
    .footer-block, .footer-block .info, .footer-block .social {width:100%; bottom:0; }

}


    
@media screen and (max-width: 768px) 
{    
    .main-menu{display:none;}
    #menu-wrap {width:100%; top:10px;}
    nav.animenu{display:block; position: absolute; right: 0; top: 0; z-index: 9999;}

    #header-wrap {width: 50%; min-height: 230px; background: url(../images/header-bg-mobile-768.png) top left no-repeat;}
    #header-wrap img.pc {display:none;}
    #header-wrap img.mobile {display:block; width: 54%;}
        
    .page-holder{width: 86%; right: 7%; bottom: auto; top:22%;}
    .page{padding:10px;}
    .page h2{font-size:20px !important; margin:20px 0 40px 0 !important;}
    .page-element, .iletisim-element {display:none;}

    #product-catalogue {top: 16%; left: 74%; height: 50px; text-align: right; z-index:9;}
    #product-catalogue img{width:30%;}
    .product-list{margin:20px 0;}
    .product-technical img{width:100%; height:auto;} 



    footer {width:100%; min-height:100px; z-index:100; left:0; bottom:0px; position: fixed; background-color: rgba(0, 0, 0, 0.8); background-image: none; }
    .footer-block, .footer-block .info, .footer-block .social {width:100%; bottom:0; }
    

}




@media screen and (max-width: 414px) {
    
    .page-holder{bottom:26%;}
    #product-catalogue{top: 14%;}
     #header-wrap {width: 50%; min-height: 130px; background: url(../images/header-bg-mobile-768.png) bottom left no-repeat;}

}



@media screen and (max-width: 375px) {

    #header-wrap {width: 50%; min-height: 142px; background: url(../images/header-bg-mobile.png) top right no-repeat;}

    .page-holder{width: 94%; right: 3%; bottom: 8%;}

     #product-catalogue {top: 15%; left: 58%; height: 50px; text-align: right; z-index:9;}

}




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

.animenu__toggle {display: none;  cursor: pointer;  background-color: #be0005;  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: 'Play', 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:#be0005;}
.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: #be0005; border-color: #be0005; 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: 60px;}  
  .animenu__toggle {display: inline-block; position: absolute; top: 8px; 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: #be0005; border-color: #be0005; 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 */