﻿
* {
margin:0;
padding:0;
outline:none;
box-sizing:border-box;
}

html {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}

html:lang(en) .hide-en { display:none; }

body {
font-family: 'Roboto', sans-serif;
background:#202829;
min-height:100%;
height: 100%;
position:relative;
}

a { text-decoration:none; }
img { border:none; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }

.container, .headerContainer {
max-width:1440px;
width:100%;
margin:0 auto;
position:relative;
padding:0 20px;
}

#contentWrapper {background:#fff;}

#pageBody {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
position:relative;
/*z-index:8000;*/
background:#333;
min-height:100%;
height:100%;
width:100%;
}

#pageBody.toggle {
transform:translateX(250px);
-moz-transform:translateX(250px);
-o-transform:translateX(250px);
-webkit-transform:translateX(250px);
}

.menuContainer {
max-width:1440px;
}

/***/

/* Hamburger menu */
.nav-trigger {
visibility:hidden;
position: absolute;
clip: rect(0, 0, 0, 0);
-webkit-touch-callout: none;
}
label[for="nav-trigger"] {
display:none;
position: fixed;
left:25px;
top:50px;
z-index:9999;
cursor:pointer;
}
.nav-trigger + label {
transition:opacity 0.5s, left 0.1s;
}
label[for="nav-trigger"] span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 8px;
position: relative;
background-color:#fff;
/*mix-blend-mode: difference;*/
border-radius: 5px;
transform-origin: 0% 100%;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            opacity 0.55s ease;
}


label[for="nav-trigger"] span:nth-last-child(3) {
transform-origin: 0% 0%;
}
label[for="nav-trigger"] span:first-child {
transform-origin: 5px 0px;
}
.nav-trigger:checked ~ label span {
opacity: 1;
transform: rotate(-45deg) translate(0px, 5px);
width: 30px;
}
.nav-trigger:checked ~ label span:nth-last-child(3) {
opacity: 1;
transform: rotate(45deg) translate(6px, 2px);
width: 30px;
}
.nav-trigger:checked ~ label span:nth-last-child(2) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}


/* sidebar */
nav#sidebar {
visibility:hidden;
position:fixed;
width:250px;
height:100%;
top:0;
left:-250px;
transition:left 0.2s; /* cubic-bezier(0.175, 0.885, 0.32, 1.275)*/
z-index:9;
animation: slideInFromRight 1s ease-out;
background:#222;
}
.nav-trigger:checked ~ nav#sidebar {
left:0;
visibility: visible;
}

nav#sidebar ul {
margin-top:100px;
}
nav#sidebar ul:last-child {
border-top:2px solid #222;
}

nav#sidebar ul:last-child a {
background:#222;
border-bottom:1px solid #333;
}

nav#sidebar ul li {
float: none;
margin-left: 0;
}
nav#sidebar ul li a {
border-bottom:1px solid #222;
color:#eee;
font-size:15px;
line-height:55px;
padding:0 20px;
display:block;
background:#333;
}

nav#sidebar ul li a i {
font-size:20px;
width:20px;
margin-right:20px;
text-align:center;
top: 2px;
position: relative;
color:#666;
}



/* Header */

header {
display:block;
height:120px;
position:relative;
/*z-index:9990;*/
width:100%;
background:#202829;
padding: 0 20px;
box-sizing:border-box;
}

header a#toggleSidebar {
display:none;
color:#FFF;
position:absolute;
line-height:50px;
top:0;
left:0;
font-size:30px;
padding:0 15px;
z-index:9999;
}



.headerContainer {
position:relative;
height:100%;
}

header #headerLogo {
display:block;
background:url(/img/logo-header.svg) no-repeat center;
width:70px;
height:120px;
position:absolute;
top:0;
left:20px;
background-size:contain;
box-sizing: border-box;
}

.language {
position:absolute;
top:10px;
right:0;
display:flex;
gap:10px;
}

.language a {
display:block;
font-size:14px;
line-height:14px;
text-transform:uppercase;
font-weight:400;
color:rgba(255,255,255,0.3);
}

.language a:hover {
color:rgba(255,255,255,1);
}

.language a.on {
font-weight:600;
}

nav {
position:absolute;
bottom:30px;
right:0;
}

nav ul {
list-style:none;
}

nav ul li {
float:left;
margin-left:20px;
}

nav ul li a {
font-size:14px;
line-height:14px;
text-transform:uppercase;
font-weight:300;
color:#fff;
}


/* Content */

section {
padding:60px 0;
}

section.silver {
background:#f5f5f5;
}


section h3 {
font-size:40px;
line-height:46px;
font-weight:600;
font-family:"Roboto Condensed";
text-transform:uppercase;
margin: 0 0 60px;
}

section h4 {
font-size:26px;
line-height:26px;
margin: 0 0 20px;
font-weight:300;
}


article img  {
display:block;
max-width:100%;
}

article img.right  {
max-width:40%;
margin-left:50px;
margin-bottom:50px;
box-shadow:2px 2px 8px 0 #ccc;
padding:8px;
border-radius:2px;
}

article img.left  {
max-width:40%;
margin-right:50px;
margin-bottom:50px;
box-shadow:2px 2px 8px 0 #ccc;
padding:8px;
border-radius:2px;
}

article p, section ul  {
font-size:16px;
line-height:28px;
margin:0 0 40px;
color:#222;
font-weight:300;
text-align:justify;
display:block;
}

article p.third {
width:33.33333%;
float:left;
padding:0 50px 0 0;
}

article p.third .fa {
margin:0 5px 0 0;
width:18px;
text-align:center;
color:#222;
}

article p.third .fa.fa-mobile {
font-size:24px;
position:relative;
top:2px;
}

article p i {
color:#888;
}

article p b {
font-weight:600;
}

article p.large {
font-size:30px;
line-height:50px;
margin:0 0 60px;
color:#222;
font-weight:300;
}

article p.half {
width:50%;}

section ul {
}



article table {
font-size:18px;
line-height:18px;
margin:0 0 30px;
color:#222;
font-weight:300;
width:100%;
border-collapse:collapse;
}

article table th, article table td{
padding:20px;
width:30%;
text-align:left;
}

article table th {
font-weight:600;
background:#f5f5f5;
}

article table td {
border-bottom:1px solid #ddd;
}

article table td.price {
color:#cc442f;
}



.introMenu {
height:80vh;
background-color:#3A8422;
padding:0;
display:flex;
align-items: stretch;
background-image:url(../img/background.svg);
background-size:45px;
align-items:center;
justify-content:center;
}


.introMenuList {
display:flex;
width:100%;
gap:4%;
justify-content:center;
}

.introMenuList a {
display:block;
padding: 40px;
  border: 15px solid rgba(0,0,0,0.05);
  border-radius: 20px;
  background: rgba(0,0,0,0.05);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;

}

.introMenuList a .menuIcon {
aspect-ratio:1;
width:120px;
background-image:url(../img/icon-machines.svg);
background-size:contain;
background-position:center;
display:block;
margin:0 auto 40px;
}

.introMenuList a .menuIcon1 {background-image:url(../img/icon-machines.svg);}
.introMenuList a .menuIcon2 {background-image:url(../img/icon-hydro.svg);}
.introMenuList a .menuIcon3 {background-image:url(../img/icon-energy.svg);}
.introMenuList a .menuIcon4 {background-image:url(../img/icon-shop.svg);}

.introMenuList a b {
font-weight:600;
color:#fff;
font-size:24px;
line-height:50px;
font-family:"Roboto Condensed";
text-transform:uppercase;
text-align:center;
display:block;
padding:0 20px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
border-radius:25px;
  background: rgba(0,0,0,0.05);
}

.introMenuList a:hover {
background:#202829;
}

.introMenuList a:hover b {
}

.titleImage {
display:block;
width:100%;
}

.pageTitle {
background-color:#3A8422;
padding:20px;
background-image:url(../img/background.svg);
background-size:45px;
}

.pageTitle h3 {
font-weight:600;
color:#fff;
font-size:24px;
line-height:50px;
font-family:"Roboto Condensed";
text-transform:uppercase;
text-align:center;
display:block;
margin:auto;
}

.brandsWrapper  {
padding:20px 0;
}

.brandsItem  {
display:flex;
align-items:stretch;
gap:40px;
padding:20px 40px;
align-content:stretch;
}

.brandsItem .brandsItemLogo  {
display:flex;
align-items:center;
justify-content:center;
padding:0 20px;
max-width:240px;
flex-basis:240px;
flex-shrink:0;
}

.brandsItem .brandsItemLogo img {
display:block;
max-width:200px;
max-height:100px;
}

.brandsItem .brandsItemDesc {
padding:40px;
background:#f5f5f5;
border-radius:10px;
flex-shrink:1;
}


.brandsItem .brandsItemDesc h3{
font-weight:600;
color:#3A8422;
font-size:24px;
font-family:"Roboto Condensed";
text-transform:uppercase;
margin:0 0 40px;
}

.brandsItem .brandsItemDesc p {
margin:0;
}

.brandsItem .brandsItemDocs {
font-size:unset;
line-height:unset;
margin: 0;
flex-grow:1;
flex-shrink:0;
display:flex;
gap:10px;
flex-flow:column;
max-width:255px;
flex-basis:255px;

}

.brandsItem .brandsItemDocs li {
list-style:none;
}

.brandsItem .brandsItemDocs li a {
display:flex;
line-height:50px;
font-size:16px;
border-radius:10px;
background:#f5f5f5;
color:#222;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;

}

.brandsItem .brandsItemDocs li.store a {
background:#3A8422;
color:#fff;
}


.brandsItem .brandsItemDocs li a span {
display:block;
line-height:50px;
font-weight:400;
font-size:16px;
}

.brandsItem .brandsItemDocs li a:before {
display:block;
width:50px;
height:50px;
content:"";
background-size:24px;
font-size:0;
background-position:center;
background-repeat:no-repeat;
}


.brandsItem .brandsItemDocs li.pdf a:before {background-image:url(../img/icon-download.svg);}
.brandsItem .brandsItemDocs li.link a:before {background-image:url(../img/icon-link.svg);}
.brandsItem .brandsItemDocs li.store a:before {background-image:url(../img/icon-shop-go.svg);}

.brandsItem .brandsItemDocs li a:hover {
background:#ddd;
}

.brandsItem .brandsItemDocs li.store a:hover {
background:#202829;
}


.aboutWrapper {
background:#ddd;
background-image:url(../img/about.jpg);
background-size:cover;
background-position:center;
padding:120px 80px;
}

.aboutContainer {
display:flex;
}

.aboutContainer .aboutDesc {
max-width:600px;
flex-basis:40%;
background:#fff;
border-radius:10px;
padding:40px;
box-shadow:0 0 60px 0 #444;
}

.aboutContainer .aboutDesc p {
margin:0;
text-align:left;
}

.aboutContainer .aboutDesc h3 {
color:#3A8422;
}

.aboutDescLogo {
display:block;
border-radius:10px;
box-shadow:0 0 5px 0 #888;
margin:40px 0 0;
}

/* advantages */

.advantages {
background:#ddd;
padding:80px 0;
}

.advantages h3 {
text-align:center;
color:#aaa;
margin:0 0 80px;
}

.advantages .advantagesList  {
list-style:none;
display:flex;
justify-content:space-between;
gap:40px;
}

.advantages .advantagesList li {
display:flex;
align-items:center;
flex-direction:column;
}

.advantages .advantagesList li:before {
width:50px;
height:50px;
display:block;
margin:0 0 40px;
content:"";
background-size:contain;
background-position:center;
background-repeat:no-repeat;
background-image:url(../img/icon-grain.svg);
}


.advantages .advantagesList h3 {
font-size:24px;
line-height:30px;
color:#202829;
margin:0 0 20px;
font-family:'Roboto';
font-weight:900;
}

.advantages .advantagesList p {
margin:0;
text-align:center;
}

.textOnGreen {
background:#3A8422;
}

.textOnGreen p {
font-size:24px;
line-height:34px;
color:#fff;
margin:0;
font-weight:300;
text-align:center;
}

/*menu newsletter */
.newsletterWrapper {
background:#853535;
padding:80px;
display:flex;
align-items:center;
align-content:center;
align-items: center;
justify-content: center;
gap:80px;
}

.newsletterWrapper h3 {
font-weight:300;
font-size:30px;
line-height:40px;
color:#fff;
margin:0;
text-align:right;
padding:20px 80px 20px 0;
border-right:2px dotted rgba(255,255,255,0.2);
box-sizing:border-box;
}

.newsletterConditions {
display:flex;
gap:10px;
}

.newsletterConditions p {
color:#fff;
margin:0;
}

.newsletterWrapper input[type=email] {
background:rgba(255,255,255,0.2);
color:#fff;
line-height:50px;
border-radius:6px;
font-size:16px;
font-weight:300;
padding:0 20px;
width:100%;
border:none;
margin:0 0 20px;
}

.newsletterWrapper input[type=submit] {
background:rgba(0,0,0,0.4);
color:#fff;
line-height:50px;
border-radius:6px;
font-weight:300;
font-size:16px;
padding:0 40px;
border:none;
cursor: pointer;
}


/* contact */

section.contact {
background-color:#f5f5f5;
background-image:url(../img/background-light.svg);
background-size:45px;
padding:120px 0;
}

.contactWrapper {
display:flex;
gap:80px;
}

.contactDesc {
flex-basis:50%;
max-width:50%;
box-sizing:border-box;
}

.contactDesc h3  {
margin:0 0 40px;
color:#3A8422;
text-align:right;
}


.contactDesc p {
text-align:right;
font-size:24px;
font-weight:200;
}

.contactForm {
display:flex;
flex-direction:column;
flex-basis:50%;
max-width:50%;
}

.contactForm input[type=text],
.contactForm input[type=email],
.contactForm textarea {
background:#fff;
border:none;
padding:0 20px;
line-height:50px;
font-size:16px;
color:#222;
border-radius:6px;
margin:0 0 20px;
font-family:'Open Sans';
box-shadow:0 0 20px 0 #ddd;
}

.contactForm textarea {
height:200px;
}
.contactForm input[type=submit] {
background:#3A8422;
border:none;
padding:0 20px;
line-height:50px;
font-size:16px;
color:#fff;
border-radius:6px;
font-family:'Open Sans';
max-width:200px;
cursor:pointer;
}


/* footer */

footer {
background:#202829;
padding:40px;
font-size:14px;
line-height:24px;
font-weight:300;
color:#fff;
text-align:center;
position:relative;
}

.footerList {
display:flex;
gap:80px;
justify-content:space-evenly;
}

.footerList ul {
margin:0;
}

.footerList ul li {
list-style:none;
margin:0  0 10px;
color:#ccc;
}

.footerList ul li a {
color:#ccc;
text-decoration:none;
}

.footerList ul li a:hover {
color:#fff;
}

.footerList ul li img {
width:100px;
}

.footerList ul li h3 {
font-weight:600;
color:#3A8422;
font-size:24px;
line-height:50px;
font-family:"Roboto Condensed";
text-transform:uppercase;
margin:0 0 20px;
}

.footerList ul li.social {
display:flex;
gap:20px;
}

.footerList ul li .fab {
font-size:30px;
}

i.iconGoogle {
width:18px;
height:18px;
background-size:18px;
font-size:0;
background-position:center;
background-repeat:no-repeat;
display:inline-block;
vertical-align:middle;
margin-right:10px;
}

.iconGoogle.iconPhone {background-image:url(../img/icon-phone.svg);}
.iconGoogle.iconEmail {background-image:url(../img/icon-email.svg);}

footer .lowerfooter {
position:relative;
height:64px;
}

a.netit {
position:absolute;
right:30px;
top:40px;
display:block;
width:76px;
height:24px;
background:url(/img/netit.png) no-repeat;
}

a.netit:hover {
background-position:0 -29px; 
}


/* Smartphones (portrait and landscape) ----------- */


@media only screen
and (min-width : 320px)
and (max-width : 1024px) {

    header nav {
    display:none;
    }

    label[for="nav-trigger"] {
    display:block;
    }

    header #headerLogo {
    left:50%;
    transform:translateX(-50%);
    }

    .introMenuList {
    flex-wrap: wrap;
    }

    .introMenuList a {
    padding: 10px;
    border: 5px;
    flex-basis: 46%;
    max-width: 46%;
    margin: 0 0 20px;
    }

    .introMenuList a .menuIcon {
    width: 70%;
    margin-top:20px;
    }

    .introMenuList a b {
    font-size: 18px;
    padding: 0;
    }

    .aboutWrapper {
    padding: 20px 20px 200px;
    }

    .aboutContainer .aboutDesc {
    max-width: 100%;
    flex-basis: 100%;
    padding: 20px;
    }

    .advantages {
    padding: 20px 0;
    }
    
    .advantages .advantagesList {
    flex-wrap: wrap;
    justify-content: center;
    }

    section.contact {
    padding: 20px 0;
    }

    .contactWrapper {
    gap: 40px;
    flex-wrap: wrap;
    }
    
    .contactDesc {
    flex-basis: 100%;
    max-width: 100%;
    }

    .contactForm {
    flex-basis: 100%;
    max-width: 100%;
    }
    
    .footerList {
    gap: 20px;
    flex-wrap: wrap;
    justify-content:center;
    }

    .footerList ul li {
    text-align: center;
    }
    
    .footerList ul li.social {
    justify-content: center;
    }

    .brandsItem {
    padding: 20px 20px 80px;
    flex-wrap: wrap;
    gap: 20px;
    }

    .brandsItem .brandsItemDesc {
    padding: 20px;
    }

    .brandsItem .brandsItemDocs {
    max-width: 100%;
    flex-basis: 100%;
    }

    .brandsItem .brandsItemDesc p {
    text-align: left;
    }
}

@media only screen and (max-width : 1260px) {


}

@media only screen
/*and (min-device-width : 375px) 
and (max-device-width : 667px)*/
and (min-height : 300px) and (max-width : 1020px) and (min-device-height : 300px) {


}
