@charset "utf-8";
/* CSS Document */

/*template*/
*{margin:0; padding:0; outline:none; font-family:'Lato', sans-serif; /*font-weight:300;*/}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
hr, legend{display:none;}
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; font-size:18px; font-size:1.8rem; line-height:1.628571; color:#414141; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

h1, h2, h3, h4, h5, h6{width:100%; height:auto; line-height:1.2;}
h1{font-size:36px; font-size:3.6rem; margin:0px 0px 35px 0px; text-align:center;}
h2{font-size:24px; font-size:2.4rem; margin:0px 0px 20px 0px;}
h3{font-size:18px; font-size:1.8rem; margin:0px 0px 10px 0px;}
h4{font-size:14px; font-size:1.4rem; line-height:2.0rem; margin:0px 0px 10px 0px;}
h1.nomargin,
h2.nomargin,
h3.nomargin,
h4.nomargin,
h5.nomargin,
h6.nomargin{margin:0px;}

p{margin:0px 0px 35px 0px;}
a, a *{color:#f28c00; text-decoration:underline;}
small{font-size:13px; font-size:1.3rem;}
.clear{clear:both;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}
article p:last-of-type{margin:0px;}

.button{width:auto; min-width:200px; height:40px; display:block; padding:0px 25px; box-sizing:border-box; border:1px solid #ffffff; font-size:18px; font-size:1.8rem; text-align:center; color:#ffffff; line-height:38px; text-decoration:none;}
.button *{text-decoration:none; color:#ffffff;}
.button.orange{background:#f28c00; border:none;}
.button.black{border:1px solid #3f3f3f; color:#3f3f3f}
.button.black *{color:#3f3f3f;}
.button.center{margin:0px auto;}
.button.fix{width:300px;}
.button.margin-top{margin-top:35px;}
.button i{margin-left:10px;}

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

blockquote{font-size: 2.4rem; border-left:3px solid #0492d4; padding:5px 35px; margin-bottom:35px;}

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

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

.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%;}

.grey{background:#f8f9f9;}
.breadcrumb{width:auto; height:auto; display:block; box-sizing:border-box;}
.breadcrumb ol{width:100%; min-height:35px; list-style:none; display:block; margin:0; box-sizing:border-box;}
.breadcrumb ol li{float:left; color:#d0d0d0; margin-right:10px;}
.breadcrumb ol li:last-child{margin-right:0px;}
.breadcrumb ol li a{width:auto; text-decoration:none; font-weight:600; margin-right:10px;}
.breadcrumb ol li:last-child a{margin-right:0px;}
.breadcrumb ol li a span{color:#949598; font-size:14px; font-size:1.4rem; font-weight:600; text-decoration:none; }  
.breadcrumb ol li:last-child a span{color:#414141; font-weight:600;}
.breadcrumb ol li i{margin-top:3px; font-size:12px; font-size:1.2rem;}

/*forms*/
/*text*/
.input-wrapper{position:relative; display:block; margin:0px 0px 45px 0px;}
.input-wrapper label{position:absolute; top:-13px; left:0; font-size:11px; color:#8b8f96; padding:0px 1%; transition:all 0.1s linear; opacity:0; font-weight:bold;}
.input-wrapper label.on{color:#8b8f96;}
.input-wrapper label.show{top:-15px; opacity:1;}
.input-wrapper input{width:98%; height:35px; display:block; color:#12192a; overflow:hidden; border:none; font-size:15px; font-size:1.5rem; padding:0px 1%; border-bottom:1px solid #eae9e9;}
.input-wrapper input.red{border-bottom:1px solid #d90000;}
.input-wrapper input:focus{border-color:#f28c00; transition:.2s;}
.input-wrapper input.red:focus{border-bottom:1px solid #d90000; transition:.2s;}

/*radio*/
.input-wrapper-radio{position:relative; display:block; margin:0px 0px 45px 0px; padding:0px 1%;}
.input-wrapper-radio .headlabel{position:absolute; top:-25px; opacity:1; left:0; font-size:11px; color:#8b8f96; padding:0px 1%; 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:#d90000;}
.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:#f28c00;}
.input-wrapper-radio input[type="radio"]:checked + label:after {display:none;}

/*checkbox*/
.input-wrapper-checkbox{position:relative; display:block; padding:0px 1%;}
.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:#12192a; font-size:15px; font-size:1.5rem; }
.input-wrapper-checkbox input[type="checkbox"] + label.red{color:#d90000;}
.input-wrapper-checkbox label a{color:#12192a;}
.input-wrapper-checkbox label.red a{color:#d90000;}
.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 {background:#8991a8;}
.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:#aaa; padding:0px 1%; transition:all 0.1s linear; opacity:0; font-weight:bold;}
.input-wrapper-textarea label.on{color:#8b8f96;}
.input-wrapper-textarea label.show{top:-25px; opacity:1;}
.input-wrapper-textarea textarea{width:98%; height:125px; display:block; overflow:hidden; border:none; resize:none; padding:0px 1%; font-family:'Lato', sans-serif; font-size:15px; font-size:1.5rem; font-weight:normal; color:#12192a; border-bottom:1px solid #eae9e9;}
.input-wrapper-textarea textarea.red{border-bottom:1px solid #d90000;}
.input-wrapper-textarea textarea:focus{border-color:#f28c00; transition:.2s;}
.input-wrapper-textarea textarea.red:focus{border-bottom:1px solid #d90000; transition:.2s;}

/*select*/
.input-wrapper-select{position:relative; background: url('../images/dropdown.png') no-repeat right #FEFEFE; border: #ccc 1px solid; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE; box-shadow: inset 0px 0px 10px 1px #FEFEFE;  display:block; margin:0px 0px 45px 0px; padding:0px 1%;}
.input-wrapper-select.red{border:#FF0000 1px solid;}
.input-wrapper-select .headlabel{position:absolute; top:-25px; opacity:1; left:0; font-size:11px; color:#8b8f96; padding:0px 1%; transition:all 0.1s linear; font-weight:bold;}
.input-wrapper-select .selectDefault,
.input-wrapper-select .selectDefault2 { padding-left:8px; font-size:15px; font-size:1.5rem; }
.input-wrapper-select select { opacity:0; filter:alpha(opacity=0); position:absolute; top:0; left:0; width:100%; height:100%; display:block; z-index:101; }
.input-wrapper-select select:focus { outline: none; }

.input-wrapper-submit{display:block;}
.input-wrapper-submit .button-left{float:left; width:50%;}
.input-wrapper-submit .button-left input[type=button],
.input-wrapper-submit .button-left input[type=submit]{border:0px; font-family:'Lato', sans-serif; color:#8b8f96; padding:10px 15px; font-size:16px; font-size:1.6rem; text-decoration:none; float:left; cursor:pointer; background-color:#ffffff;}
.input-wrapper-submit .button-right{float:right; width:50%;}
.input-wrapper-submit .button-right input[type=button],
.input-wrapper-submit .button-right input[type=submit]{border:0px; font-family:'Lato', sans-serif; color:#ffffff; padding:10px 15px; font-size:16px; font-size:1.6rem; text-decoration:none; float:right; cursor:pointer; background-color:#f28c00;}

/*wrapper*/
.wrapper{width:100%; max-width:1260px; margin:0px auto; position:relative;}

/*header*/
header{height:105px; padding:10px 35px; box-sizing:border-box;}
header .logo{display:inline-block;}
header .logo a{width:129px; height:80px; display:block; text-indent:-4000px; background:url('../images/poppe-installatietechniek.svg') no-repeat center;}
header .icons{display:inline-block; padding:5px 0px;}
header .icons .icon{width:auto; height:70px; display:inline-block; margin-left:35px; float:right; text-align:right; text-decoration:none !important;}
header .icons .icon .text{float:left; line-height:70px; font-size:20px; font-size:2.0rem; text-decoration:none !important; color:#414141;}
header .icons .icon i{float:right; margin-left:15px; font-size:24px; font-size:2.4rem; line-height:70px; text-decoration:none !important; color:#414141;}
header .icons .red *{color:#f28c00 !important}

/*login*/
main.splitter{width:100%; max-width:1920px; min-height:100%; display:grid; grid-template-columns:1fr 40%; margin:0px auto;}
main.splitter .login{padding:70px 35px; box-sizing:border-box;}
main.splitter .login .logo{width:70%; margin:0px auto 135px auto; display:block;}
main.splitter .login .logo a{width:129px; height:80px; display:block; text-indent:-4000px; background:url('../images/poppe-installatietechniek.svg') no-repeat center;}
main.splitter .login .form{width:70%; margin:0px auto;}
main.splitter .slider{width:100%; height:100%; display:block;}
main.splitter .slider .slides{width:100%; height:inherit; display:block; overflow:hidden;}
main.splitter .slider .slides{width:100%; height:inherit; display:block; overflow:hidden;}
main.splitter .slider .slides .slide{width:100%; height:inherit; position:relative; display:block; float:left; overflow:hidden; background-size: cover !important;}

/*sections*/
section{padding:70px 35px; box-sizing:border-box;}
section.nopadding{padding:0px;}
section.center{text-align:center;}
section.grey{background:#f8f9f9;}

    /*slider*/
    section.slider{height:450px; display:block;}
    section.slider.fullheight{height:calc(100vh - 105px);}
    section.slider .slides{width:100%; height:inherit; display:block; overflow:hidden;}
    section.slider .slides .slide{width:100%; height:inherit; position:relative; display:block; float:left; overflow:hidden; padding:0px 70px; box-sizing:border-box;}
    section.slider .slides .slide h1{position:absolute; bottom:140px; font-size:58px; font-size:5.8rem; color:#ffffff; text-align:left; margin:0px;}
    section.slider .slides .slide h1 small{font-size:36px; font-size:3.6rem;}
    section.slider .slides .slide .button{width:175px; position:absolute; bottom:70px; text-transform:uppercase; float:left; margin-right:35px;}
    section.slider .slides .slide .button:nth-of-type(2){left:280px;}
    section.slider .slides .slide p{width:100%; position:absolute; bottom:35px; float:left; margin:0px; color:#ffffff; font-size:20px; font-size:2.0rem;}
    section.slider .slides .slide .social{position:absolute; margin:0; position:absolute; top:50%; right:0px; -ms-transform:translateY(-50%); transform:translateY(-50%); background:#ffffff;}
    section.slider .slides .slide .social a{display:block; width:50px; height:50px; text-align:center;}
    section.slider .slides .slide .social a *{line-height:50px; color:#3f3f3f; text-decoration:none; font-size:26px;}
    section.slider.border{border-bottom:15px solid #f28c00;}
    section.slider .arrow{display:block; position:relative; bottom:50px; left:50%; margin-left:-25px; width:50px; height:50px; font-size:24px; font-size:2.4rem; line-height:50px; text-align:center; background:#3f3f3f; color:#ffffff !important; cursor:pointer; text-decoration:none !important;}
    section.slider .arrow i{color:#ffffff; text-decoration:none;}
    section.slider .bounce{animation: bounce 2s infinite;}
    @keyframes bounce{0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40%{transform: translateY(-30px);} 60%{transform: translateY(-15px);}}
    
    /*offers*/
    section.orange{background:#f28c00; height:70px; padding:0px 35px;}
    section.orange div{font-size:24px; font-size:2.4rem; color:#ffffff; line-height:70px;}
    section.orange div .button{margin-top:15px;}
    section.darkgrey{background:#606d7c; height:70px; padding:0px 35px;}
    
    /*intro*/
    section.intro .grid{display:grid; grid-template-columns:1fr 1fr; gap:15px;}
    section.intro .grid .image{width: 100%;}
    section.intro .grid .image img{width: 100%; height: 100%; object-fit:cover;}
    
    /*blocks*/
    section.blocks{padding:35px;}
    section.blocks .grid{display:grid !important; grid-template-columns:1fr 1fr; grid-gap:70px; padding:35px;}
    section.blocks .grid .content{grid-area:1/2/1/2;}
    section.blocks .grid .content h3{font-size:28px; font-size:2.8rem; margin-bottom:35px;}
    section.blocks .grid .content ul,
    section.blocks .grid .content ol{list-style:disc outside; margin:0px 0px 30px 20px;}
    section.blocks .grid .content .button{width:200px !important;}
    section.blocks .grid .content .button.orange{background:#f28c00; color:#ffffff;}
    section.blocks .grid .image{grid-area:1/1/1/1;}
    section.blocks .grid .image img{width:100%;}
    section.blocks:nth-of-type(odd) .grid .content{grid-area:1/1/1/1;}
    section.blocks:nth-of-type(odd) .grid .image{grid-area:1/2/1/2;}
    section.blocks:nth-of-type(even){background:#f8f9f9;}
    section.blocks.white{background:#ffffff;}
    
    section.gallery .collection{width:100%; margin:70px 0px; display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-columns:max-content; grid-auto-flow:dense; grid-auto-rows:minmax(100px,auto); grid-gap:15px; }
    section.gallery .collection a{grid-column:span 1; grid-row:span 1; height:300px;}
    section.gallery .collection a:nth-of-type(3n + 1){grid-column:span 2; grid-row:span 2; height:615px;}

.filter-grid{display:grid; grid-template-columns:260px auto; gap:8px;}
.button.mobile-filter{display:none;}

    .filter{padding:24px; background:#f28c00; height:fit-content;}
    .filter form h2{color:white;}
    .filter form .panel{display:grid; grid-template-columns:1fr; gap:8px;}
    .filter form .panel h3{color:white;}
    .filter form .panel h3:after{content: " "; width:100%; height: 2px; display: block; margin:10px 0px; background-color: #ffffff;}    
    .filter form .panel .group .filters{display:grid; grid-template-columns:1fr; gap:8px; color:white;}
    .filter form .panel .group .filters{margin-bottom:15px;}
    .filter form .panel .group .filters .row{margin-right:15px;}


    section.academy-overview .grid{display:grid; grid-template-columns:repeat(3,1fr); column-gap:12px; row-gap:45px;} 
    section.academy-overview .grid .wide{grid-column:span 3;}
    section.academy-overview .grid h3{margin:32px 0; font-size:2.6rem;}
    .product{width: 100%; position: relative;}
    .product .label{width:fit-content; padding: 8px 16px; color:white; position:absolute; top:24px; left:24px; background:#f28c00;}
    .product .label.oranje{background:#f28c00;}
    .product .label.blauw{background:#0492d4;}
    .product .label.rood{background:#d90000;}
    .product article{padding:10px;}
    .product .desc{min-height:150px;}
    .product .image{width:100%;}
    .product .image img{width:100%; object-fit:cover;}
    .product .name{font-size:2.6rem; margin-bottom:12px;}
    .product .button{background:#f28c00; margin-top:24px;}

    .categorie-overview .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:15px;}
    .categorie-overview .grid h2{grid-column:span 3;}
    .categorie-overview .grid .image{width:100%;}
    .categorie-overview .grid .image img{width: 100%; height: 100%; object-fit:contain;}
    .categorie-overview .grid .button{background:#f28c00; height:unset; min-height:8rem;}

  section.videos .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:15px;}
  section.videos .grid .video{width: 100%;}
  section.videos .grid .video iframe,
  section.videos .grid .video video{width: 100%; height: 100%; object-fit:contain;}
  section.videos .grid .wide{grid-column:span 2;}

  section.pictures .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:15px;}
  section.pictures .grid .image{width:100%;}
  section.pictures .grid .image img{width: 100%; height: 100%; object-fit:contain;}

/*footer*/
footer{width:100%; height:auto; display:block; padding:50px 35px 15px 35px; box-sizing:border-box; background:#616e7e;}
footer .social{width:100%; height:50px; margin-bottom:35px; display:block; text-align:center;}
footer .social .sociallinks{width:100%; height:50px; text-align:center;}
footer .social .sociallinks li{width:50px; height:50px; display:inline-block;}
footer .social .sociallinks li a{text-decoration:none;}
footer .social .sociallinks li a i{width:50px; display:block; font-size:28px; line-height:50px; text-align:center; color:#ffffff; text-decoration:none;}
footer .about{width:100%; height:auto; position:relative; text-align:center;}
footer .about *{color:#ffffff;}
footer .about h4{font-size:18px; font-size:1.8rem;}
footer .about p{font-size:16px; font-size:1.6rem;}
footer .about .button{width:200px !important; margin-bottom:35px;}
footer .about .copyright{margin:0px;}
footer .about .copyright,
footer .about .copyright a{color:#c0c5cb;}
footer .about .copyright a{margin:0px 10px;}
footer .about .copyright br.mobile{display:none;}
footer .about .copyright br.small{display:none;}

/*normal*/
@media only screen and (min-width: 995px) and (max-width: 1330px) 
{
    .breadcrumb ol{padding:0px 35px;}
    
    main.splitter .login .logo{width:70%; margin:0px auto 50px auto; display:block;}
    
    section{padding:50px 35px;}
    section.slider{height:500px;}
    section.slider .slides .slide h1{font-size:50px; font-size:5.0rem;}
    section.slider .slides .slide h1 small{font-size:30px; font-size:3.0rem;}   
    section.slider .slides .slide .social a{width:35px; height:35px;}
    section.slider .slides .slide .social a *{line-height:35px; font-size:20px;}

    section.blocks{padding:35px;}

   
}

/*medium*/
@media only screen and (max-width: 994px) 
{
    .breadcrumb ol{padding:0px 35px;}
    
    main.splitter .login{padding:35px; box-sizing:border-box;}
    main.splitter .login .logo{width:80%; margin:0px auto 50px auto;}
    main.splitter .login .form{width:80%;}
 
    section{padding:50px 35px;}
    section.slider{height:400px;}
    section.slider .slides .slide h1{font-size:40px; font-size:4.0rem;}
    section.slider .slides .slide h1 small{font-size:26px; font-size:2.6rem;}      
    section.slider .slides .slide .social a{width:35px; height:35px;}
    section.slider .slides .slide .social a *{line-height:35px; font-size:20px;}
    
    section.orange div{font-size:20px; font-size:2.0rem;}

    section.gallery .collection{margin:50px 0px;}
    
    section.blocks{padding:35px;}
    section.blocks .grid{grid-gap:35px;}
    section.blocks .content h3{font-size:24px; font-size:2.4rem;}

    section.academy-overview .grid{grid-template-columns: repeat(2, 1fr);}
    
    footer .about .copyright br.mobile{display:block;}
}

/*small*/
@media only screen and (max-width: 784px)
{
    .button{height:35px; padding:0px 15px; font-size:16px; font-size:1.6rem; line-height:35px; background:rgba(255,255,255, 0.3); }
    .breadcrumb ol{padding:0px 15px;}

    main.splitter{grid-template-columns:1fr;}
    main.splitter .login{padding:35px;}
    main.splitter .login .logo{width:100%; margin:0px auto 35px auto;}
    main.splitter .login .form{width:100%;}
    main.splitter .slider{display:none;}
    
    header{height:70px; padding:15px;}
    header .logo{display:inline-block;}
    header .logo a{width:65px; height:40px;}
    header .icons .icon{height:40px; margin-left:15px;}
    header .icons .icon .text{line-height:40px; font-size:18px; font-size:1.8rem;}
    header .icons .icon i{float:right; margin-left:15px; font-size:24px; font-size:2.4rem; line-height:40px;}

    section{padding:35px 15px;}
    section.slider{height:240px;}
    section.slider.fullheight{height:240px;}
    section.slider .slides .slide{padding:0px 15px;}
    section.slider .slides .slide h1{top:35px; font-size:30px; font-size:3.0rem;}
    section.slider .slides .slide h1 small{font-size:20px; font-size:2.0rem;}       
    section.slider .slides .slide .button{top:140px;}
    section.slider .slides .slide .button:nth-of-type(2){left:240px;}
    section.slider .slides .slide p{top:120px; font-size:16px; font-size:1.6rem;}    
    section.slider .arrow{display:none;}
    section.slider .slides .slide .social{display:none;}
    
    section.gallery .collection{margin:35px 0px; grid-template-columns: repeat(2, 1fr);}
     
    section.orange{height:100px; padding:0px 15px;}
    section.orange div{width:100%; font-size:18px; font-size:1.8rem; text-align:center; line-height:50px;}
    section.orange div .button{margin:0px auto;}    
    
    section.blocks{padding:15px;}
    section.blocks .grid{grid-template-columns:1fr; grid-gap:15px; padding:15px;}
    section.blocks .grid .content h3{margin-bottom:15px;}
    section.blocks .grid .content{grid-area:1/1/1/1;}
    section.blocks .grid .image{grid-area:2/1/2/1;}
    section.blocks:nth-of-type(odd) .grid .content{grid-area:1/1/1/1;}
    section.blocks:nth-of-type(odd) .grid .image{grid-area:2/1/2/1;}  

    .categorie-overview .grid{grid-template-columns:1fr 1fr;}
    .categorie-overview .grid h2{grid-column:span 2;}

    section.pictures .grid{grid-template-columns:1fr 1fr 1fr;}
    
    
    .filter-grid{display:grid; grid-template-columns:1fr; gap:24px;}
    .button.mobile-filter{display:block;}
    #filter-panel{display:none;}
    section.academy-overview .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:15px;}
    .product{width: 100%; position: relative;}
    .product .label{width:fit-content; padding: 8px 16px; background:#f28c00; color:white; position:absolute; top:12px; left:12px;}
    .product .name{font-size:2.2rem; margin-bottom:12px;}

    section.videos .grid{display:grid; grid-template-columns:repeat(1,1fr); gap:15px;}
    section.videos .grid .wide{grid-column:span 1;}
  
    
section.filter form .filters{display:block;}

    section.intro .grid{grid-template-columns:1fr;}
    section.intro .grid .product{grid-row-start:1;}
  
    
    footer .about .copyright br.small{display:block;}
}

/*mini*/
@media only screen and (max-width: 479px)
{
    h1{font-size:24px; font-size:2.4rem;}
    h2{font-size:18px; font-size:1.8rem;}
    h3{font-size:18px; font-size:1.8rem;}
    body{font-size:16px; font-size:1.6rem;}

    .intro table{width: 100% !important;}
    
    header .icons .icon .menutext{display:none;}
    
    section.slider{height:200px;}
    section.slider .slides .slide{padding:0px 15px;}
    section.slider .slides .slide h1{bottom:35px; top:unset; font-size:24px; font-size:2.4rem;}
    section.slider .slides .slide h1 small{font-size:16px; font-size:1.6rem;}      
    section.slider .slides .slide .button,
    section.slider .slides .slide p{display:none;}   
    
    section.orange{height:auto; padding:15px;}
    section.orange div:first-of-type{display:none;}
    
    section.blocks .content h3{font-size:20px; font-size:2.0rem;} 
    .categorie-overview .grid h2{grid-column:unset;}
    
    
    .categorie-overview .grid{display:grid; grid-template-columns:1fr; gap:15px;}

    section.pictures .grid{grid-template-columns:1fr 1fr;}

    section.academy-overview .grid{display:grid; grid-template-columns:repeat(1,1fr); gap:15px;}
    
    .filter-grid{display:grid; grid-template-columns:1fr; gap:24px;}


    footer{padding:35px 15px 15px 15px;}
    footer .social{height:35px; margin-bottom:20px;}
    footer .social .sociallinks{height:35px;}
    footer .social .sociallinks li{width:35px; height:35px;}
    footer .social .sociallinks li a i{width:35px; font-size:22px; line-height:35px;}    
}