@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700&display=swap');

/*template*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; background:#ffffff; font-family:'Libre Franklin', sans-serif; font-size:1.6rem; line-height:1.628571; color:#444444; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; counter-reset:company;}
body.noscroll{}
h1, h2, h3, h4, h5, h6{width:100%; height:auto; line-height:1.2; color:#8cb100;}
h1{font-size:3.6rem; margin-bottom:50px;}
h2{font-size:2.4rem; margin-bottom:20px;}
h3{font-size:2.0rem; margin-bottom:10px;}
h4{font-size:2.4rem; margin-bottom:35px; color:#444444;}
h1.nomargin,
h2.nomargin,
h3.nomargin,
h4.nomargin,
h5.nomargin,
h6.nomargin{margin:0px;}
h3.padding{margin-bottom:50px;}

p{margin:0px 0px 35px 0px;}
a, a *{color:#8cb100; text-decoration:none;}
small{font-size:1.2rem;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}
button{-webkit-appearance:none;}

table{}
table td{vertical-align:top; padding:3px 0px;}

header, nav, article, aside, section, footer{display:block; overflow:hidden;}
header, section, footer{width:100%; height:auto; position:relative;}

.left{float:left;}
.right{float:right;}

.video-container{position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed{position:absolute; top:0; left:0; width:100%; height:100%;}

/*buttons*/
.button{display:inline-block; padding:10px 35px; text-align:center; text-transform:uppercase; border-radius:5px; font-weight:bold; text-decoration:none !important;}  
.button.green{color:#ffffff !important; border:2px solid #8cb100; background:#8cb100;}
.button.grey{color:#ffffff !important; border:2px solid #8cb100; background:#444444;}
.button.grey:hover{color:#ffffff !important; border:2px solid #8cb100; background:#8cb100;}
.button.red{color:#ffffff !important; border:2px solid #b12500; background:#b12500;}
.button.margin-top{margin-top:35px;}
.button.margin-right{margin-right:35px;}

/*anims*/
@-webkit-keyframes fade{ from {opacity:.4} to {opacity:1}}
@keyframes fade{ from {opacity:.4} to {opacity:1}}

/*reset apple*/
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

/*forms*/
.winnie{opacity:0; position:absolute; top:0; left:0; height:0; width:0; z-index:-1;}
/*text*/
.input-wrapper.half{width:45%;}
.input-wrapper{position:relative; display:block; margin:0px 0px 45px 0px;}
.input-wrapper label{position:absolute; top:-13px; left:0; font-size:11px; color:#434c41; padding:0px 3px; transition:all 0.1s linear; opacity:0; font-weight:bold;}
.input-wrapper label.show{top:-25px; opacity:1;}
.input-wrapper input{width:100%; height:35px; box-sizing:border-box; display:block; color:#444444; overflow:hidden; border:none; font-family:'Libre Franklin', sans-serif; font-size:15px; font-size:1.5rem; padding:0px 3px; border-bottom:1px solid #eae9e9;}
.input-wrapper input.red{border-bottom:2px solid #b12500; background:rgba(249,82,84,0.2); color:#444444;}
.input-wrapper input:focus{border-color:#8cb100; transition:.2s;}
.input-wrapper input.red:focus{border-bottom:2px solid #b12500; transition:.2s;}

/*radio*/ 
.input-wrapper-radio{position:relative; display:block; margin:0px 0px 45px 0px; padding:0px 3px;}
.input-wrapper-radio .headlabel{position:absolute; top:-25px; opacity:1; left:0; font-size:11px; color:#434c41; padding:0px 3px; transition:all 0.1s linear; font-weight:bold;}
.input-wrapper-radio input[type="radio"]:not(:checked), [type="radio"]:checked{position: absolute; left:-9999px;}
.input-wrapper-radio input[type="radio"]:not(:checked) + label, [type="radio"]:checked + label{position:relative; color:#8b8f96; padding:0px 25px; cursor:pointer; font-size:15px; font-size:1.5rem;}
.input-wrapper-radio input[type="radio"]:not(:checked) + label.red, [type="radio"]:checked + label.red{color:#b12500;}
.input-wrapper-radio input[type="radio"]:not(:checked) + label:before,[type="radio"]:checked + label:before,[type="radio"]:not(:checked) + label:after,[type="radio"]:checked + label:after{content: ''; position:absolute;}
.input-wrapper-radio input[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before{left:0; top:0; width:18px; height:18px; background:#ffffff; overflow:hidden; border-radius:15px; transition:background-color .2s;}
.input-wrapper-radio input[type="radio"]:not(:checked) + label:after,[type="radio"]:checked + label:after {width:16px; height:16px; transition:all .2s; border-radius:50%; background:#ffffff; top:0; left:0; border:1px solid #cdd0d6;}
.input-wrapper-radio input[type="radio"]:checked + label:before {background:#8cb100;}
.input-wrapper-radio input[type="radio"]:checked + label:after {display:none;}

/*checkbox*/
.input-wrapper-checkbox{position:relative; display:block; padding:0px 3px;}
.input-wrapper-checkbox input[type="checkbox"] {position:absolute; left:-9999px;}
.input-wrapper-checkbox input[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after{content:''; position:absolute;}
.input-wrapper-checkbox input[type="checkbox"] + label:before{top:2px; left:0; width:15px; height:15px; content: ''; cursor: pointer; display:inline-block; border-radius:4px; border:1px solid #8991a8; transition:background-color .2s; background:#ffffff;}
.input-wrapper-checkbox input[type="checkbox"] + label{padding-left:25px; line-height:20px; position:relative; float:left; color:#434c41; font-size:15px; font-size:1.5rem; }
.input-wrapper-checkbox input[type="checkbox"] + label.red{color:#b12500;}
.input-wrapper-checkbox input[type="checkbox"] + label span{width:986px; font-size:19px; font-weight:normal; color:#86899c; line-height:17px; margin:0px 0px 15px 0px; display:inline-block;}
.input-wrapper-checkbox input[type="checkbox"] + label:last-child{margin:0px 0px 20px 0px;}
.input-wrapper-checkbox input[type="checkbox"] + label:after {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; content:''; position:absolute; width:6px; height:3px; background:transparent; top:6px; left:4px; border:3px solid #8991a8; border-top:none; transition:opacity .1s; border-right:none; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}
.input-wrapper-checkbox input[type="checkbox"] + label:hover::after {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity:0.9;}
.input-wrapper-checkbox input[type="checkbox"]:checked + label:before {border:1px solid #8cb100; background:#8cb100;}
.input-wrapper-checkbox input[type="checkbox"]:checked + label:after {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:0.9; border-color:#fff;}

/*textarea*/
.input-wrapper-textarea{position:relative; display:block; margin:0px 0px 45px 0px;}
.input-wrapper-textarea label{position:absolute; top:-13px; left:0; font-size:11px; color:#434c41; padding:3px; transition:all 0.1s linear; opacity:0; font-weight:bold;}
.input-wrapper-textarea label.show{top:-34px; opacity:1;}
.input-wrapper-textarea textarea{width:100%; height:125px; display:block; overflow:hidden; box-sizing:border-box; border:none; resize:none; padding:3px; font-family:'Libre Franklin', sans-serif; font-size:15px; font-size:1.5rem; color:#444444; border-bottom:1px solid #eae9e9;}
.input-wrapper-textarea textarea.red{border-bottom:2px solid #b12500; background:rgba(249,82,84,0.2); color:#444444;}
.input-wrapper-textarea textarea:focus{border-color:#8cb100; transition:.2s;}
.input-wrapper-textarea textarea.red:focus{border-bottom:1px solid #b12500; transition:.2s;}

/*select*/
.input-wrapper-select{position:relative; margin:0px 0px 45px 0px; }
.input-wrapper-select label{display:inline-block; margin-bottom:5px; padding:0px 3px; font-size:11px; color:#434c41; font-weight:bold;}
.input-wrapper-select select{width:100%; height:40px; background:url(../images/dropdown.png) no-repeat right #fefefe; border:1px solid #dae4e8; display:block; font-family:'Libre Franklin', sans-serif; font-size:15px; font-size:1.5rem; margin:0px 0px 30px 0px; padding:0px 3px; background-size:12px; background-position-x:98%; -webkit-appearance: none; -moz-appearance:none; appearance:none;}
.input-wrapper-select.red select{border:1px solid #b12500;}
.input-wrapper-select select:focus{outline:none;}

/*submit*/
.input-wrapper-submit{display:block; box-sizing:border-box;}
.input-wrapper-submit.margintop{margin-top:35px;}
.input-wrapper-submit .submit-button{width:100%;}
.input-wrapper-submit .submit-button input[type=button],
.input-wrapper-submit .submit-button input[type=submit]{width:100%; color:#ffffff; border:0; padding:10px 20px; text-align:center; font-size:1.6rem; font-family:'Libre Franklin', sans-serif; border-radius:5px; text-decoration:none; cursor:pointer; background:#8cb100;}
.input-wrapper-submit .submit-button input[type=submit].grey,
.input-wrapper-submit .submit-button input[type=submit].grey:hover{background:#989898;}

/*containers*/
.container{width:100%; max-width:1920px; display:block; margin:0px auto;}
.placeholder{max-width:1260px; margin:0px auto;}

/*header*/
header{width:100%; max-width:1920px; height:160px; position:fixed; display:grid; grid-template-columns:2fr 5fr; top:0;  margin:0px auto; z-index:9000; background:#ffffff;}
header .logo{padding-left:50px;} 
header .logo a{width:120px; display:block; margin:10px 0px;} 
header .logo a img{width:100%;} 
header .contact{text-align:right; padding-right:50px; background:url('../images/header.jpg') no-repeat left; clip-path:polygon(3% 0%, 100% 0%,100% 100%,0 100%);}
header .contact a{height:45px; display:inline-block; line-height:35px; margin:60px 0px 0px 35px;}
header .contact a i{margin-right:15px;}
header .contact a i#menu{font-size:3.0rem; width:30px; text-align:center;}
header .contact a *{color:#ffffff; font-weight:bold;}

header.clear{position:absolute; background:unset;}
header.clear .logo a{display:none;}
header.clear .contact{background:unset;}

/*nav*/
nav{width:0%; height:calc(100vh - 160px); position:fixed; display:grid; grid-template-columns:2fr 5fr; z-index:8000; bottom:0; right:0; transition:0.8s;}
nav.open{width:100%;}
nav div{}
nav ul{height:100%; float:left; padding:50px; background:rgba(0,0,0,0.9); clip-path:polygon(0% 0%, 100% 0%,100% 100%,3% 100%);}
nav ul li{width:100%; float:left;}
nav ul li a{width:100%; display:block; color:#ffffff; font-size:3.0rem; font-weight:bold; text-align:right;}
nav ul li a:hover{color:#8cb100;}
nav.open.clear{height:calc(90vh - 160px); grid-template-columns:5fr 7fr; bottom:unset; top:160px;}    
nav.open.clear ul{clip-path:unset;}

/*breadcrumbs*/
.breadcrumbs-grid{display:grid; grid-template-columns:2fr 5fr; height:50px; margin-top:160px;}
.breadcrumbs-grid .breadcrumb{width:100%; height:70px; display:inline-flex; box-sizing:border-box;}
.breadcrumbs-grid .breadcrumb ol{width:100%; min-height:70px; list-style:none; display:block; margin:auto 0px;}
.breadcrumbs-grid .breadcrumb ol li{float:left; color:#8cb100; font-size:1.3rem; margin-right:10px; line-height:50px;}
.breadcrumbs-grid .breadcrumb ol li a{width:auto; text-decoration:none; font-weight:bold; margin-right:10px;}
.breadcrumbs-grid .breadcrumb ol li a span{color:#818181; font-size:1.3rem; font-weight:bold; text-decoration:none;}
.breadcrumbs-grid .breadcrumb ol li:last-child a span{color:#818181; font-weight:bold;}
.breadcrumbs-grid .breadcrumb ol li a:hover span,
.breadcrumbs-grid .breadcrumb ol li:last-child a:hover span{color:#8cb100;}

/*main*/
main{display:grid; grid-template-columns:2fr 5fr; padding:50px 0px;}
main aside{padding:0px 50px;}
main aside div.submenu{display:none;}
main aside ol{width:100%; display:block;}
main aside ol li{width:100%; display:block; background:#efefef; border-bottom:3px solid #ffffff;}
main aside ol li a{width:100%; min-height:40px; display:block; color:#444444; text-transform:uppercase; font-weight:bold; font-size:1.4rem; line-height:40px; padding:5px 10px;}
main aside ol li a.on,
main aside ol li a:hover{color:#8cb100;}
main aside ol li ol{background:#ffffff;}
main aside ol li ol li{background:#ffffff;}
main aside ol li ol li a{min-height:unset; text-transform:unset; padding:0px; padding-left:15px;}
main aside ol li ol li ol{background:#ffffff;}
main aside ol li ol li ol li{background:#ffffff;}
main aside ol li ol li ol li a{min-height:unset; text-transform:unset; padding:0px; padding-left:30px;}
main aside .grey{width:100%; display:block; background:#efefef; padding:15px; font-weight:bold; font-size:1.4rem; color:#444444;}
main aside a.offer{width:100%; display:block; margin-top:35px; background:#8cb100; border-radius:5px; padding:15px; color:#ffffff; text-decoration:none; text-transform:uppercase; font-weight:bold; font-size:1.4rem;}
main aside a.offer i{color:#ffffff; font-size:2.0rem; margin-right:10px;}
main aside .map{height:400px;}
main aside .office{display:block; margin-bottom:35px;}
main aside .office img{width:100%;}
main .content{padding-right:50px;}
main .content .split{display:grid; grid-template-columns:auto 300px; grid-gap:35px;}
main .content .split .image img{width:100%;}
main .content article{margin-bottom:50px;}
main .content ul.search li{margin-bottom:35px;}
main .content ul.search li a{font-size:2.2rem;}
main .content ul.search li span{font-size:1.5rem; color:#818181;}
main .content .productinfo{display:grid; grid-template-columns:1fr; grid-gap:0px; margin-bottom:50px;}
main .content .productinfo .head{text-transform:uppercase; font-weight:bold; padding:10px; background:#efefef; color:#8cb100;}
main .content .productinfo .head.green{background:#8cb100; color:#ffffff;}
main .content .productinfo .cell{padding:10px; border-bottom:1px solid #efefef;}
main .content .productvariants{display:grid; grid-template-columns:200px auto 200px; grid-gap:0px; margin-bottom:50px;}
main .content .productvariants .head{text-transform:uppercase; font-weight:bold; padding:10px; background:#8cb100; color:#ffffff;}
main .content .productvariants .cell{padding:10px; border-bottom:1px solid #efefef;}
main .content .productcategories{display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:50px 0px;}
main .content .productcategories a .image{padding:15px 35px;}
main .content .productcategories a .image img{width:100%;}
main .content .productcategories a .name{min-height:60px; font-weight:bold; padding:5px; text-align:center; font-size:1.4rem; color:#ffffff; background:#8cb100;}
main .content .productcategories a .name i{float:right; color:#444444;}
main .content .relevant-products{display:grid; grid-template-columns:repeat(4,1fr); grid-gap:15px; row-gap:0px; margin:70px 0px 50px 0px;}
main .content .relevant-products h4{grid-column-end:span 4;}
main .content .relevant-products .rel-product .image{padding:15px 35px;}
main .content .relevant-products .rel-product .image img{width:100%;}
main .content .relevant-products .rel-product .name{min-height:60px; font-weight:bold; padding:5px; text-align:center; font-size:1.4rem; color:#ffffff; background:#8cb100;}
main .content .relevant-products .rel-product .name i{float:right; color:#444444;}
main .content .jobsoverview .jobs li a p{color:#444444;}
main .content .jobsoverview .jobs li a p.readmore{color:#8cb100;}
main .content .teams{display:grid; grid-template-columns:repeat(3,1fr); grid-gap:35px; row-gap:35px;}
main .content .teams .member img{width:100%;}
main .content .teams .member .contactinfo{display:block; padding:15px 0px;}
main .content .teams .member .contactinfo span{display:block; font-weight:bold; }
main .content .teams .member .contactinfo em{display:block; color:#8cb100; font-style:normal; margin-bottom:10px;}
main .content .teams .member .contactinfo .links{display:block;}
main .content .teams .member .contactinfo .links a{margin-right:20px;}
main .content .teams .member .contactinfo .links a i{font-size:2.0rem;}
main .content .cta{width:100%; display:grid; grid-template-columns:200px 1fr; grid-gap:35px; padding:15px; background:#efefef;}
main .content .cta .image img{width:100%;}
main .content .cta a.offer{float:right; background:#8cb100; padding:15px; color:#ffffff; text-decoration:none; text-transform:uppercase;  border-radius:5px; font-weight:bold; font-size:1.4rem;}
main .content .cta a.offer i{color:#ffffff; font-size:2.0rem; margin-right:10px;}
main .content .contact{display:grid; grid-template-columns:repeat(3,1fr); grid-gap:35px; margin-top:50px;}
main .content .contact form{grid-area:1/2/1/4;}

/*sections*/
section{}
section.hero{height:440px; display:grid; grid-template-columns:1fr 1fr;}
section.hero .overlay{width:100%; height:inherit; position:absolute; bottom:0; left:0; pointer-events:none; background:url('../images/trident-safety-overlay.png') no-repeat; background-size:50% auto; background-position:20% 0%;}
section.hero .about{background:#8cb100; padding:0px 35px 0px 50px;}
section.hero .about a{height:160px; display:block; padding:10px 0px; margin-bottom:50px;}
section.hero .about a img{width:120px; height:100%; object-fit:contain; object-position:left;}
section.hero .about p{height:120px; font-weight:bold; color:#ffffff; text-align:center; font-size:2.0rem; margin:0px !important;}
section.hero .about .search{width:100%; height:45px; display:block; position:relative; margin-top:35px;}
section.hero .about .search input{width:90%; height:35px; padding:5px; float:left; font-family:'Libre Franklin', sans-serif; color:#ffffff; font-size:1.8rem; display:block; border:none; border-bottom:2px solid #ffffff; background:none;}
section.hero .about .search input::placeholder{color:rgba(255,255,255,0.6); font-size:1.6rem;}
section.hero .about .search button{float:right; background:none; border:0; line-height:45px; cursor:pointer;}
section.hero .about .search button i{color:#ffffff; font-size:2.2rem;}
section.hero .slider{height:inherit; background:#000000;}
section.hero .slider .slides{position:relative;}
section.hero .slider .slides img{width:100%; height:440px; object-position:center; object-fit:cover;}
section.hero .slider .slides span{height:105px; position:absolute; bottom:50px; left:50px; border-left:5px solid #8cb100; padding-left:35px; font-size:6.0rem; color:#ffffff; text-transform:uppercase; font-weight:bold; line-height:155px;}

section.fingerprint{background:url('../images/fingerprint.png') no-repeat center #e2ebbf; background-size:80%; padding:70px;}
section.fingerprint .products{display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:70px;}
section.fingerprint .products .product{background:#8cb100;}
section.fingerprint .products .product .image img{width:100%; height:70%; object-fit:cover;}
section.fingerprint .products .product .title{width:100%; text-align:center; height:75px; text-transform:uppercase; color:#ffffff; font-weight:bold; line-height:75px;}

section.service{background:url('../images/service-about.jpg') no-repeat center; padding:50px;}
section.service .split{display:grid; grid-template-columns:7fr 5fr; grid-gap:50px;}
section.service .split article h2{color:#444444;}
section.service .split .image img{width:100%;}

section.jobs{text-align:center !important;}
section.jobs .job-carousel{position:relative; padding:35px;}
section.jobs .job-carousel h2{color:#8cb100;}
section.jobs .job-carousel p strong{font-weight:normal; font-style:italic; color:#8cb100;}

section.quotes{text-align:center !important;}
section.quotes .quotes-carousel{min-height:350px; position:relative; padding:50px 50px 85px 50px;}
section.quotes .quotes-carousel h2{color:#8cb100;}
section.quotes .quotes-carousel p strong{font-weight:normal; font-style:italic; color:#8cb100;}
section.quotes .quotes-carousel .dots{width:100%; height:20px; display:block; position:absolute; bottom:50px; left:0; text-align:center;}
section.quotes .quotes-carousel .dots .quote-dot{cursor:pointer; height:20px; width:20px; margin:0 10px; background-color:#efefef; border-radius:50%; display:inline-block; transition:background-color 0.6s ease;}
section.quotes .quotes-carousel .dots .active,
section.quotes .quotes-carousel .dots .quote-dot:hover{background-color:#8cb100;}
section.quotes .fade{-webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}  
      
footer{background:#444444; padding:50px 0px;}
footer .content{display:grid; grid-template-columns:2fr 5fr;} 
footer .content .logo{padding-left:50px;} 
footer .content .logo a{width:120px; display:block;} 
footer .content .logo a img{width:100%;} 
footer .content .actions{display:grid; grid-template-columns:2fr 3fr; grid-gap:50px; padding-right:50px;}
footer .content .actions .cta span{width:100%; display:block; font-size:1.6rem; color:#ffffff; font-weight:bold;}
footer .content .actions .cta strong{width:100%; display:block; font-size:2.4rem; color:#8cb100;}
footer .content .actions .contact{display:grid; grid-template-columns:repeat(2,1fr); grid-gap:35px;}
footer .content .actions .contact *{color:#ffffff; font-size:1.4rem; line-height:2.0;}
footer .content .actions .contact a:hover{color:#8cb100;}
footer .content .actions .contact strong{color:#8cb100; font-size:1.6rem; }
.copyright{height:50px; background:#363636; line-height:50px; font-size:1.2rem; text-align:center;}
.copyright, .copyright a{color:rgba(255,255,255,0.3);}
.copyright br{display:none;}
.copyright a{margin-left:20px;}
.copyright a:hover{color:#ffffff;}

/*big*/
@media only screen and (min-width:1261px) and (max-width:1330px) 
{  

    main .content .productcategories{grid-gap:35px; row-gap:35px;}

}
/*normal*/
@media only screen and (max-width:1260px) 
{   
    body{font-size:1.4rem;}
    h1{font-size:2.8rem; margin-bottom:35px;}
    h2{font-size:2.2rem; margin-bottom:20px;}
    h3{font-size:2.0rem; margin-bottom:15px;}
    h4{font-size:1.6rem; margin-bottom:15px;}
    .button{padding:5px 20px;}
    header,
    nav,
    .breadcrumbs-grid,
    main,
    footer .content{grid-template-columns:4fr 8fr;}
    
    header{height:105px;}
    header .logo{padding-left:35px;} 
    header .logo a{width:80px;}
    header .contact{padding-right:35px;}
    header .contact a{height:35px; line-height:35px; margin:35px 0px 0px 35px;}
    header.clear{position:absolute;}
    header.clear .logo a{display:none;}
    header.clear .contact{background:unset;}
    .breadcrumbs-grid{margin-top:105px;}
    nav{height:calc(100vh - 105px);}
    nav ul li a{font-size:3.2rem;}
    main{padding:35px 0px;}
    main aside{padding:0px 35px;}
    main aside ol li a{font-size:1.2rem; padding:5px;}
    main aside a.offer{font-size:1.2rem;}
    main aside a.offer i{font-size:1.6rem; margin-right:10px;}
    main .content{padding-right:35px;}
    main .content .productcategories{grid-template-columns:repeat(2,1fr); grid-gap:35px; row-gap:35px; margin-bottom:35px;}
    section.hero .about .wrapper{width:100%; padding:35px; margin:unset;}
    section.hero .about .wrapper a{width:100px; margin:0px auto 35px auto;}
    section.hero .about .wrapper p{font-size:1.6rem;}
    section.hero .about .wrapper .search{position:relative;}
    section.hero .slider .slides span{bottom:35px; left:35px; font-size:3.8rem;}
    section.fingerprint{padding:35px;}
    section.fingerprint .products{grid-gap:35px;}
    section.service{padding:35px;}
    section.service .split{grid-gap:35px;}
    section.quotes .quotes-carousel{min-height:275px; padding:35px 35px 70px 35px;}
    footer .content .logo{padding-left:35px;}
    footer .content .actions{padding-right:35px;}
    footer .content .actions .cta span{font-size:1.4rem;}
    footer .content .actions .cta strong{font-size:2.0rem;}
    footer .content .actions .contact *{font-size:1.2rem;}
    footer .content .actions .contact strong{font-size:1.4rem;}
    
}

/*medium*/
@media only screen and (max-width:994px) 
{
    header,
    nav,
    .breadcrumbs-grid{grid-template-columns:2fr 5fr;}

    header .contact a span{display:none;}
    header .contact a i{font-size:2.6rem;}
    main{grid-template-columns:1fr;}
    main aside{margin-bottom:35px;}
    main aside div.submenu{width:100%; display:block; background:#818181; cursor:pointer; min-height:35px; display:block; color:#ffffff; text-transform:uppercase; font-weight:bold; font-size:1.2rem; line-height:35px; padding:5px;}
    main aside ol.submenu{display:none; transition:max-height 0.5s;}
    main aside ol.submenu.open{display:block; -webkit-transition:display 0.5s; transition:display 0.5s;}
    main .content{padding:0px 35px;}
    main .content article{margin-bottom:35px;}
    section.hero .overlay{background-size:100%;}
    section.hero .about .wrapper p{font-size:1.6rem;}
    section.hero .slider .slides span{font-size:3.2rem; border-left:3px solid #8cb100;}
    footer .content{grid-template-columns:5fr 7fr;}
    footer .content .actions{grid-template-columns:1fr;}
}

/*small*/
@media only screen and (max-width:784px)
{
    body{font-size:1.4rem;}
    h1{font-size:2.2rem; margin-bottom:35px;}
    h2{font-size:1.8rem; margin-bottom:20px;}
    h3{font-size:1.6rem; margin-bottom:15px;}
    h4{font-size:1.4rem; margin-bottom:15px;}
      
    nav,
    header{grid-template-columns:3fr 6fr;}
    header .contact{padding-right:15px;}
    header .contact a{margin:15px 0px 0px 15px; height:105px; line-height:80px;}
    header .contact a i{font-size:2.0rem; margin-right:5px;}
    header .contact a i#menu{font-size:2.0rem;}
    header .contact a.nomobile{display:none;}
    
    nav ul li a{font-size:2.8rem;}
    nav.open.clear{height:calc(100vh - 70px); grid-template-columns:1fr; bottom:unset; top:70px;}    
    nav.open.clear div{display:none;}
    nav.open.clear ul{clip-path:unset;}    
    .breadcrumbs-grid{display:none;}
    main{margin-top:105px}
    main .content .split{grid-template-columns:1fr; grid-gap:0px; margin-bottom:35px;}
    main .content .productinfo{grid-template-columns:1fr 1fr;}
    main .content .productcategories{grid-template-columns:repeat(1,1fr); grid-gap:0px; row-gap:15px; margin-bottom:35px;}
    main .content .productvariants{grid-template-columns:1fr 1fr;}
    main .content .productvariants div.head:nth-of-type(3){display:none;}
    main .content .productvariants div.cell:nth-child(1n),
    main .content .productvariants div.cell:nth-child(2n){border-bottom:0px;}
    main .content .productvariants div.cell:nth-child(3n){border-bottom:1px solid #efefef;}
    main .content .productvariants div.cell:nth-child(3n)::before{content:'Merk & type: '}
    main .content .productvariants div:nth-child(3n){grid-column-end:span 2;}
    main .content .relevant-products{grid-gap:15px; grid-template-columns:repeat(2,1fr);}    
    main .content .relevant-products h4{grid-column-end:span 2;} 
    main .content .cta{grid-template-columns:1fr; grid-gap:35px;}
    main .content .cta a.offer{float:right; background:#8cb100; padding:15px; color:#ffffff; text-decoration:none; text-transform:uppercase;  border-radius:5px; font-weight:bold; font-size:1.4rem;}
    main .content .cta a.offer i{color:#ffffff; font-size:2.0rem; margin-right:10px;}    
    section.hero{height:unset; grid-template-columns:1fr;}
    section.hero .about{height:300px;}
    section.hero .about .wrapper{height:unset; padding:0px 35px;}
    section.hero .about .wrapper a{margin:35px 0px; float:left;}
    section.hero .about .wrapper p{float:left; font-size:1.4rem;}
    section.hero .about .wrapper .search{display:none;}
    section.hero .slider{height:200px;}
    section.hero .slider .slides img{height:200px;}
    section.hero .slider .slides span{display:none;}
    section.fingerprint .products{grid-template-columns:1fr;}
    section.fingerprint .products .product .title{height:50px; line-height:50px;}
    section.service .split{grid-template-columns:1fr;}
    footer .content{grid-template-columns:1fr;}
    footer .content .logo{margin:0px auto; padding:unset;}
    footer .content .actions{padding:35px;}
    .copyright{height:unset; line-height:2.0; padding:10px 0px;}
    .copyright br{display:block;}
}

/*mini*/
@media only screen and (max-width:479px)
{
    body{font-size:1.2rem;}
    h1{font-size:1.8rem; margin-bottom:35px;}
    h2{font-size:1.6rem; margin-bottom:15px;}
    h3{font-size:1.4rem; margin-bottom:5px;}
    
    header{height:95px;}
    header.padding{padding:0px 15px;}
    header .grid{grid-template-columns:200px auto;}
    header .logo img{width:100%;}
    header .logo{padding-left:15px;}
    header .logo a{width:66px;}
    header .contact a{margin:35px 0px 0px 15px; height:95px; line-height:45px;}
    nav{height:calc(100vh - 95px);} 
    header .grid nav ul{top:95px;} 
    nav ul{padding:35px;}
    nav ul li a{font-size:2.2rem;}
    header .grid nav .icon{top:25px; right:15px;}
    header .grid nav .icon span{display:none;}
    
    main{margin-top:95px; padding:15px 0px; display:block;}
    main aside{padding:0px 15px;}
    main .content{padding:0px 15px;}
    section.hero .slider .slides span{font-size:2.6rem;}
    section.slider{height:200px;}
    section.slider .slides img{height:200px;}
    section.slider .dots{bottom:15px;}
    
    section.content article{padding:0px 15px;}
    section.content article.bigger p, section.content article.bigger p *{font-size:1.4rem;}

    section.arrangements{padding:15px; margin:15px 0px;}
    section.arrangements .banner{margin-bottom:15px;}
    section.arrangements .banner .content{padding:15px;}
    section.arrangements .banner .content p{font-size:1.2rem;}
    
    section.news{padding:0px 15px;}
    section.news .news-grid{grid-template-columns:1fr;}
    
    section.quotes .quotes-carousel{padding:15px;}
    section.quotes .quotes-carousel .dots{bottom:15px;}
    
    section.socials{padding:0px 15px;}
    section.socials .grid .photo-grid{grid-template-columns:repeat(2,1fr); grid-gap:15px;}
    section.socials .grid .social{padding:15px;}
    section.socials .grid .social ul li{margin:0px 10px;}
    
    section.partners .placeholder{padding:0px 15px;}
    section.partners .grid{grid-gap:15px; grid-template-columns:repeat(2,1fr);}
        
    section.companies{margin:35px 0px;}
    section.companies .grid{grid-template-columns:repeat(1,1fr);}
    section.companies .grid .company{display:block; margin:0px;}
    section.companies .grid .company:nth-of-type(even){margin-top:unset;}
    section.companies .grid .company .about .details strong{font-size:2.0rem;}    
    
    main .content .relevant-products .rel-product .name i{display:none;}
    
    section.gallery{padding:15px;}    
    section.gallery .grid{grid-template-columns:1fr; grid-gap:15px;}
    footer .content .actions{padding:15px;}
    .copyright a:first-of-type,
    .copyright a:last-of-type{margin-left:0px;}
}