body {
    background-color: #ababab;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    /* font-size: 20px; */

}


/* FONTS */

.dosis-200 {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
  }

.dosis-400 {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.dosis-600 {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.dosis-800 {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}





/* STRUCTURE PAGE */

section {
    width: 100%;
    max-width: 1542px;
    min-width: 320px;
    /* min-width:1024px; */
    /* min-height:100vh; */
    margin: auto;
    padding: 40px 0px;
    font-size: 20px;
}

#section0 { background-color:#b8b7b7; padding-top:0px; background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section-0-bckg_v2.jpg); background-size: cover; background-repeat: no-repeat; min-height:100vh;}
    #section0 h1, #section0 h2 { color:#953C24; }
#section1 { background-color: #8f8f8f; background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section-1-bckg.jpg); background-size: cover; background-repeat: no-repeat; min-height:100vh; }
    #section1 h2 { color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.25); }
#section2 { background-color: #953C24; background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/Mr-alu-montage.png); background-size: 100%; background-repeat: no-repeat; background-position: center bottom; color: #fff; min-height:950px;}
#section3 { background-color: #953C24; background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section-3-bckg.jpg); background-size: 105%; background-repeat: no-repeat; background-position: center top; color: #fff; }
    #section3 a { color: #fff; font-weight: bold; }
        #section3 a:hover { text-decoration: none; }
    #section3 h2 { color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.25); }
    #section3 h3 { color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.25); }
#section4 { background-color: #ffffff; background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section-4-bckg.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center top; color: #fff; color: #fff; /* min-height:1400px; */ padding-top: 290px;}
#section5 { background-color: #b8b7b7; background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section-5-bckg.jpg); background-size: cover; background-repeat: no-repeat; border-top:solid 1px #953C24; border-bottom:solid 1px #953C24; color:#fff; min-height:100vh;}

footer {
    width: 100%;
    max-width: 1542px;
    margin: auto;
    padding: 40px 0px;
    background-color: #fff;
    font-size: 20px;
    
}

    

    footer ul {
        list-style-type: none;
        margin:0 0 20px 0;
    }

    footer a {
        color:#666666;
    }
    footer a:hover {
        color:#000;
        text-decoration: none;
    }


/* RESPONSIVE */

.row{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    /* margin-bottom: 10px; */
    /* padding: 40px 0px; */
}


[class^="col-"] {
    padding: 20px 30px;
    text-align: left;
}

[class^="col-"] [class^="col-"] {
    padding: 0px 30px 0px 0px;
    text-align: left;
}



/* Configuration des colonnes */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; } 
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }


/* MISES EN FORMES SPECFIQUES */

.boxed {
    padding:30px;
    border-radius: 30px;
}

.boxed a {
    color: #fff; 
}
.boxed a:hover {
    text-decoration: none;
}


.brown { background-color:#953C24 ;}
.orange-dark { background-color:#D7490C ;}
.orange-light { background-color:#EF7B10 ;}

.shadowed {
    box-shadow: 10px 10px 37px -12px rgba(0,0,0,0.64);
    -webkit-box-shadow: 10px 10px 37px -12px rgba(0,0,0,0.64);
    -moz-box-shadow: 10px 10px 37px -12px rgba(0,0,0,0.64);
}

.text-highlight {
    width: fit-content;
    display: block;
    padding:5px;
}

#exemples-emballage {
    display: flex;
    flex-flow: row wrap;
}

span.date {
font-size:18px;
display: block;
width:fit-content;
background-color:#EF7B10;
padding: 5px;
margin:20px 0;

}

footer img {
    margin: 35px 0px;
}



/* REGLAGES TYPO */

h1, h2, h3, h4 {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    
}

h1 {
    font-size: 64px;
    font-weight: 800;
    color:#953C24;
    margin: 0px 0px 20px 0px;

    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.25); */

    
    
}

h2 {
    font-size: 44px;
    font-weight: 800;
    color:#953C24;
    line-height: 48px;
    margin-bottom: 20px;
    margin-top: 30px;;
    
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.25); */
   
}

h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

p {
    /* font-size: 20px; */
    margin-bottom: 20px;
}

p.vspace-desktop {
    display: block;
    height:180px;
}




ul {
    margin: 0 0 0 20px;
}


/* BUTTONS */

a.button {
    display: block;
    padding: 15px 25px;
    background-color: #D7490C;
    border-radius: 5px;
    width: fit-content;
    transition: 0.3s cubic-bezier(.68,-0.55,.27,1.55);
}
a.button:hover {
    /* background-color: #ffffff; */
    scale: 1.1;
    
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.3s;
  }
  
  .button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.3s;
  }
  
  .button:hover span {
    padding-right: 15px;
  }
  
  .button:hover span:after {
    opacity: 1;
    right: 0;
  }


/* IMAGES ET VIDEOS */

img {
    width: 100%;   
    margin:auto 0; 
}

.videocontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: 30px;
    border: solid 5px #000;
    background-color: #000;
}
    

.videoclip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
  
}



ul.pastille {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
}

ul.pastille li {
    list-style-type: none;
    display: block;
    background-color: #fff;
    width: fit-content;
    padding: 15px 15px 15px 60px;
    border-radius: 20px;
    color: #000;
    margin:0px 20px 20px 0px;
    max-width: 190px;
    min-width: 125px;
    
}

ul.pastille li.gras { background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section2-picto-gras.png); background-repeat: no-repeat; background-position-x: 5px; background-size: contain;}
ul.pastille li.acide { background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section2-picto-acide.png); background-repeat: no-repeat; background-position-x: 5px; background-size: contain;}
ul.pastille li.sale { background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section2-picto-salé.png); background-repeat: no-repeat; background-position-x: 5px; background-size: contain;}
ul.pastille li.petillant { background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section2-picto-petillant.png); background-repeat: no-repeat; background-position-x: 5px; background-size: contain;}
ul.pastille li.enceintes { background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section2-picto-enceinte.png); background-repeat: no-repeat; background-position-x: -5px; }
ul.pastille li.enfants { background-image: url(https://www.ecoconso.be/campagne/contaminants-alimentaires/img/section2-picto-enfant.png); background-repeat: no-repeat; background-position-x: -10px; }





ol { 
    list-style: none; 
    counter-reset: num; 
} 

ol li { 
    counter-increment: num;
    min-height: 140px;
    margin-bottom: 30px;
    background-color: rgba(215, 73, 12, .9);
    padding: 30px;
    border-radius: 30px;
    border-bottom: solid 4px #fff;
    border-left: solid 4px #fff;
    color: #fff;
    /* transition: transform 0.2s ease-in-out; */
} 



ol li strong { 
    font-weight: bold;
    font-size: 26px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
    display: block;
    margin-bottom: 40px;
    min-height: 60px;
} 

ol li::before { 
    /* content: "0" counter(num);  */
    content: counter(num); 

    content: counter(num);
    margin: 0px 20px 20px 0px;
    background-color: #fff;
    padding: 20px 10px;
    border-radius: 20px;
    min-width: 15px;
    display: block;
    width: fit-content;
    text-align: center;
    float: left;    

    color:rgba(215, 73, 12, 1);
    font-weight: 900;
    font-size:32px;

}

ol#migration-step{
    display: flex;
    flex-wrap: wrap;
    /* margin-bottom: 10px; */
    list-style-position: inside;
    color:#000;
    margin: 180px 0px 0px 0px;
}

ol#migration-step li {
    padding: 20px;    
    text-align: left;
    background-color: #fff;
    margin-right:30px;
    color:#000;
}

ol#migration-step li::before {     
    font-weight: bold; 
    
    display: block;
    width: 100%;
    text-align: center;
    margin:0;
    padding: 0;;

} 

ol#migration-step .col-3 { width: calc(25% - 30px); margin: 0px 20px 0px 0px; }


/* Flip cards */

.card {
    cursor: pointer;
    height: 360px; 
    /* perspective: 1000px; */
    position:relative;
    transform-style: preserve-3d;
    transition: rotate 500ms cubic-bezier(.68,-0.55,.27,1.55);
    /* width: calc(33.3% - 30px);  
    min-width:250px; 
    margin: 0px 30px 30px 0px; */

    
    
  }

      .card {

        width: calc(33% - 30px);
        margin: 0px 15px 30px 15px;
    }
  
  .card.show {
    rotate: y 180deg;
  }
  
  .card-front,
  .card-back {
    backface-visibility: hidden;

    /* margin: 0px 15px 30px 15px; */
    border: 2px dashed #AEAEAE;
    border-radius: 30px;
    
    display: grid;
    inset: 0;
    padding: 15px;
    /* place-content: center; */
    position: absolute;
  }
  
  .card-front {
    background-color: rgba(255, 255, 255, 1);
    /* min-height: 360px; */
  }


  
  .card-back {
    background-color: rgba(215, 73, 12, 0.9);
    rotate: y 180deg;
    /* min-height: 360px; */
  }

      .card, .card-front, .card-back {
        height:260px;
    }



  .card strong {

    font-weight:800; ;
  }
  


/* Responsive on MOBILE */

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


    #section4 { padding-top: 40px; }

    .card {

        width: calc(50% - 30px);
        margin: 0px 15px 30px 15px;
    }

    .card, .card-front, .card-back {
        height:280px;
    }


    ol#migration-step .col-3 {
        width: calc(50% - 30px);
        margin: 0px 30px 30px 0px;
    }


}



@media screen and (max-width: 768px) { /* 768px */


    h1 { font-size: 52px; line-height: 58px; }
    h2 { font-size: 30px; line-height: 38px; }
    h3 { font-size: 22px; line-height: 28px; }

    section {
        font-size:18px;
    }

    #section2 {
        background-size: 150%;
        padding-bottom: 0px;
        background-position: 6% 5%;
      }

    #mobileBckgOptimize1 {
        background-color: #D7490C;
    }

    #mobileBckgOptimize2 {
        background-color: #D7490C;
        padding-bottom: 30px;
    }

    #section3 {

        padding-top: 0px;

        background-size: 230%;
        background-position: 0% 0%;
    }

    #section4 {

        padding-top: 40px;

        
    }


    #section3 .col-7 h2 {
        margin-top: 390px;
      
    }

    ol#migration-step {
        margin: 0px 0px 0px 0px;
    }


    .col-1, .col-2 { display: none; }

    .col-3 {
        width: 50%;
        margin:auto;
    }

    .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        width: 100%;
        margin:auto;
    }

    [class^="col-"] [class^="col-"] {
        width: 100%;
    }

    .boxed {
        
        width:85%;
        margin-bottom: 50px;
    }

    ol li strong {
        font-size:22px;
    }

    ol li::before {
        margin: 0px 20px 5px 0px;
    }



    ol#migration-step {
    flex-direction: row;
  }
    
  ol#migration-step .col-3 {
    width: calc(50% - 30px);
    margin: 0px 30px 30px 0px;
    margin-bottom: 30px;
  }

    .ih-item.square {
        width:100%;
        margin: 0px 0px 30px 0px;

    }

    p.vspace-desktop {
        height:20px;
    }


        .card {

        width: calc(50% - 30px);

        margin: 0px 15px 30px 15px;
    }

    .card, .card-front, .card-back {
        height:300px;
    }

    footer img {
        width:65%;
        margin: auto 0;

    }

    [class^="col-"] [class^="col-"] {
        padding: 0px 0px 0px 0px;
        text-align: left;
    }


/* */
  

    


        #mobilespace {

        height: 200px;
    }

}


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

  ol#migration-step .col-3 {
    width: 100%;
    margin: 0px 0px 30px 0px;
    margin-bottom: 30px;
  }




    .card {

        width: 100%;

        margin: 0px 15px 30px 15px;
    }

    .card, .card-front, .card-back {
        height:430px;
    }



}


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

    #section2 {
        /*
        padding-bottom: 0px;
        background-position: 6% 28%;
        */

        background-size: 173%;
        padding-bottom: 0px;
        background-position: 22% 34%;


    }

    #mobilespace {

        height: 100px;
    }

    .extrabottomspace {
        margin-bottom: 100px;

    }

    .mobileadapt {
        margin-top: -100px;

    }

    .card {

        /* width: calc(100% - 30px); */
        width: 100%;
        margin: 0px 0px 30px 0px;
    }


    .card, .card-front, .card-back {
        height:320px;
    }

    [class^="col-"] [class^="col-"] {
        padding: 0px 0px 0px 0px;
        text-align: left;
    }

}


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

    #section2 {
        background-size: 173%;
        padding-bottom: 0px;
        background-position: 22% 46%;
    }



    .card, .card-front, .card-back {
        height:240px;
    }

    #section4 {
        padding-top : 0px;
        background-position: 0% 0%;
    }



     ol li strong {
        font-size: 18px;
    }

}