@charset "UTF-8";

@font-face {
    font-weight: 900;
    font-style: normal;
    font-family: "fbold";
    src:url("../fonts/archivo-black-v9-latin-regular.eot") format("eot"), 
        url("../fonts/aarchivo-black-v9-latin-regular.woff") format("woff"),
        url("../fonts/archivo-black-v9-latin-regular.woff2") format("woff2");
}

* {
	margin: 0;
	padding: 0;
}

.section-intox {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.txt-intox{
    font-size: 10vw;
    font-family: "fbold";
    text-transform: uppercase;
    padding: 20px 20px;
}

.container-flash{
    text-align: center;
    z-index: 99;
    background-color: white;
    position: absolute;
    top: 60%;
    left: 20%;
    z-index: 99;
    animation: flash infinite 0.5s;
}
@keyframes flash{
    0%{
        background-color: white;
    }
    100%{
        background-color: rgb(249, 60, 0);
    }
}

.intox-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/flashintox_01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
   
}

.intox-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/flashintox_02.png);
    background-size: cover;
    background-repeat: no-repeat;
    animation: cligno 1s infinite;
    background-position: center center;
}

@keyframes cligno {
    0%{
        opacity: 0%;
    }

    40%{
        opacity: 100%;
    }

    50%{
        opacity: 100%;
    }

    60%{
        opacity: 0%;
    }
    
    100%{
        opacity: 0%;
    }
}

.section-marques{
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background:  rgb(249, 60, 0);
    animation: fond 1s infinite;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: hidden;
}
.text-danger{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: rgb(249, 60, 0);
    font-family: "fbold";
    text-transform: uppercase;
    font-size: 5vw;
    animation: txt04 1s ease-in-out infinite;
}

.section-marques .logo {
    height: 33.333%;
    display: inline-block;
    width: 20%;
    object-fit: contain;
    position: relative;
    z-index: 3;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease-in-out;
}

.section-marques .logo:hover{
    -webkit-transform: rotate(360deg); 
    transform: rotate(2160deg);
}

.marques-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.marques-grid img {
    width: 20%;
    height: 25%;
    object-fit: contain;
    animation-name: marques-grid;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    mix-blend-mode: screen;
}

@keyframes marques-grid {
    0% {
        transform: scale(0.1);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.1)
    }
}




@keyframes fond {
    0%{
        background-color: rgb(249, 60, 0);
    }
    
    45%{
        background-color: rgb(249, 60, 0);
    }
    
    46%{
        background-color: rgb(0, 0, 0);
    }
    
    50%{
        background-color: rgb(0, 0, 0);
    }
    
    51%{
        background-color: rgb(249, 60, 0);
    }
    94%{
        background-color: rgb(249, 60, 0);
    }
    95%{
        background-color: rgb(0, 0, 0);
    }
    99%{
        background-color: rgb(0, 0, 0);
    }
    100%{
        background-color: rgb(249, 60, 0);
    }
    }

      #Attention{
        width: 3000px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        animation: attention 5s infinite;
    }

    @keyframes attention{
        0%{
            width: 1000px;
        }
        
        33%{
            width: 3px;
        }
        
        66%{
            width: 1000px;
        }
        100%{
            width: 3px;
        }
    }

    #section-danger{
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: black;
        animation: background03 1s infinite;
        overflow: hidden;
    }

.aie{
    position: absolute;
    width: 200px;
    top: 40%;
    left: 5%;
    overflow: hidden;
    animation: aie 1s ease-in-out infinite;
}

.corrosif{
    position: absolute;
    width: 300px;
    top: 0%;
    left: 15%;
    overflow: hidden;
    animation: corrosif 1s ease-in-out infinite;
}

.environnement{
    position: absolute;
    width: 400px;
    top: 20%;
    right: 15%;
    overflow: hidden;
    animation: environnement 1s ease-in-out infinite;
}

.feu{
    position: absolute;
    width: 150px;
    top: 80%;
    right: 30%;
    overflow: hidden;
    animation: feu 1s ease-in-out infinite;
}
.mort{
    position: absolute;
    width: 300px;
    top: 15%;
    right: 50%;
    overflow: hidden;
    animation: mort 1s ease-in-out infinite;
}
.respiratoire{
    position: absolute;
    width: 150px;
    top: 25%;
    right: 5%;
    overflow: hidden;
    animation: mort 1s ease-in-out infinite;
}

@keyframes txt03{
    0%{
        color: rgb(249, 60, 0);
    }
    25%{
        color:white;
    }
    50%{
        color: rgb(249, 60, 0);
    }
    75%{
        color:white;
    }
    100%{
        color: rgb(249, 60, 0);
    }
}

@keyframes aie{
    0%{
        transform: rotateY(0deg);
    }
    25%{
        top: 0%;
        left: 5%;
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: scaleY(360deg);
    }
}

@keyframes corrosif{
    0%{
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
   
    100% {
        transform: scaleY(360deg);
        top: 100%;
        right: 15%;
    }
}

@keyframes environnement{
    0%{
        transform: rotateY(0deg);
    }
    
    50% {
        transform: rotateY(180deg);
    }
    75%{
        top: 100%;
        right: 15%;
    }
    100% {
        transform: scaleY(360deg);
    }
}

@keyframes feu{
    0%{
        transform: rotateY(0deg);
    }
    
    50% {
        transform: rotateY(180deg);
    }

    85%{
        top: 0%;
        right: 30%;
    }

    100% {
        transform: scaleY(360deg);
    }
}

@keyframes mort{
    0%{
        transform: rotateY(0deg);
    }

    15%{
        top: 100%;
        right: 50%;
    }
    
    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: scaleY(360deg);
    }
}

@keyframes mort{
    0%{
        transform: rotateY(0deg);
    }

    15%{
        top: 100%;
        right: 5%;
    }
    
    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: scaleY(360deg);
    }
}   


@keyframes background03 {
    0%{
        background-color: black;
    }
    
    30%{
        background-color: black;
    }
    
    40%{
        background-color: rgb(249, 60, 0);
    }
    
    60%{
        background-color: black;
    }
    
    90%{
        background-color: black;
    }
    100%{
        background-color: rgb(249, 60, 0);
    }
    
    }




    .section-maladie{
        width: 100%;
        height: 100vh;
        position: relative;
        background-size: cover;
        animation: diapo-maladie 3s infinite;
        overflow: hidden;
    }

    .section-maladie-titre {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        text-align: center;
        transform: translate(-50%, -50%);
        color: rgb(249, 60, 0);
        font-family: "fbold";
        text-transform: uppercase;
        font-size: 5vw;
        animation: txt04 1s ease-in-out infinite;
    }
    
    @keyframes diapo-maladie{
    0%{
          background: url(../images/MET01.png);
      }
    5%{
        background: url(../images/MET01_neg.png);
    }
    10%{
        background: url(../images/MET02.png);
    }
    15%{
        background: url(../images/MET02-neg.png);
    }
    20%{
        background: url(../images/MET03.png);
    }
    25%{
        background: url(../images/MET03-neg.png);
    }
    30%{
        background: url(../images/MET04.png);
    }
    40%{
        background: url(../images/MET04-neg.png);
    }
    45%{
        background: url(../images/BIT1.png);
    }
    50%{
        background: url(../images/BIT1-neg.png);
    }
    55%{
        background: url(../images/BIT2.png);
    }
    60%{
        background: url(../images/BIT2.png);
    }
    65%{
        background: url(../images/BIT3-neg.png);
    }
    70%{
        background: url(../images/BIT4.png);
    }
    75%{
        background: url(../images/BIT4-neg.png);
    }
    80%{
        background: url(../images/MET06.png);
    }
    85%{
        background: url(../images/MET06-neg.png);
    }
    90%{
        background: url(../images/MET05.png);
    }
    95%{
        background: url(../images/MET05-neg.png);
    }
    100%{
        background: url(../images/MET03.png);
    }
    }
    
    .molecule1{
        position: absolute;
        width: 200px;
        top: 10px;
        left: 10px;
        z-index: 98;
        animation: molecule1 3s infinite;
        
    }

    .molecule2{
        position: absolute;
        width: 200px;
        top: 10px;
        left: 10px;
        z-index: 98;
        animation: molecule2 1s infinite;
        
    }
    
    .molecule5{
        position: absolute;
        width: 200px;
        top: 10px;
        left: 10px;
        z-index: 98;
        animation: molecule5 1s infinite;
        
    }

    .molecule6{
        position: absolute;
        width: 200px;
        top: 10px;
        left: 10px;
        z-index: 98;
        animation: molecule6 1s infinite;
        
    }

    #molecule3{
        position: absolute;
        width: 600px;
        top: 10px;
        left: 10px;
        z-index: 99;
        animation: molecule3 3s infinite;
    }
    
    #molecule4{
        position: absolute;
        width: 50px;
        top: 0;
        right: 0;
        z-index: 99;
        animation: molecule4 3s infinite;
    }

    @keyframes molecule1{
        25%{
            top: calc(50% - 50px);
            left: calc(100% - 200px);
        }
        50%{
            top: calc(100% - 100px);
            left: calc(10% - 150px);
        }
        50%{
            top: calc(30% - 300px);
            left: calc(70% - 0px);
        }
        75%{
            top: calc(10% - 50px);
            left: calc(50% - 300px);
        }
        100%{
            top: calc(100% - 150px);
            left: calc(30% - 70px);
        }
    }

    

    @keyframes molecule2{
        25%{
            top: calc(120% - 200px);
            left: calc(50% - 100px);
        }
        50%{
            top: calc(170% - 50px);
            left: calc(160% - 0px);
        }
        50%{
            top: calc(70% - 90px);
            left: calc(70% - 50px);
        }
        75%{
            top: calc(60% - 50px);
            left: calc(200% - 100px);
        }
        100%{
            top: calc(120% - 10px);
            left: calc(190% - 200px);
        }
    }

    @keyframes molecule5{
        25%{
            top: calc(100% - 125px);
            left: calc(100% - 85px);
        }
        50%{
            top: calc(100% - 115px);
            left: calc(10% - 55px);
        }
        50%{
            top: calc(30% - 35px);
            left: calc(70% - 210px);
        }
        75%{
            top: calc(10% - 5px);
            left: calc(50% - 65px);
        }
        100%{
            top: calc(100% - 135px);
            left: calc(30% - 165px);
        }
    }

    @keyframes molecule6{
        25%{
            top: calc(350% - 12px);
            left: calc(10% - 25px);
        }
        50%{
            top: calc(170% - 240px);
            left: calc(150% - 96px);
        }
        50%{
            top: calc(130% - 155px);
            left: calc(170% - 45px);
        }
        75%{
            top: calc(120% - 60px);
            left: calc(5% - 75px);
        }
        100%{
            top: calc(30% - 30px);
            left: calc(150% - 220px);
        }
    }
    
    @keyframes molecule3{
        33%{
            width: 50px;
            top: 900px;
            left: 1400px;
            
        }
        66%{
            width: 900px;
            top: -100px;
            left: -400px;
        }
        99%{
            width: 50px;
            top: 700px;
            left: 600px;
        }
    }
    @keyframes molecule4{
        33%{
            width: 900px;
            top: 0;
            right: 0;
            
        }
        66%{
            width: 50px;
            top: 100px;
            right: 400px;
        }
        99%{
            width: 900px;
            top: -700px;
            right: -600px;
        }
    }
    
    
    @keyframes allergie{
        30%{
            top: 900px;
            left: 1400px;
            
        }
        60%{
            top: -100px;
            left: -400px;
        }
        90%{
            top: 700px;
            left: 600px;
        }
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(720deg); 
        }
    }
    
    @keyframes txt04{
        0%{
            color: rgb(249, 60, 0);
        }
        25%{
            color:white;
        }
        50%{
            color: rgb(249, 60, 0);
        }
        75%{
            color:white;
        }
        100%{
            color: rgb(249, 60, 0);
        }
    }
    



    


    .section-boycotter{
        width: 100%;
        height: 100vh;
        position: relative;
        background-size:cover;
        animation: background-boycotter 0.5s infinite;
        overflow: hidden;
    }
    
    @keyframes background-boycotter{
        0%{
            background-image: url(../images/danger-back-01.png);
            background-size: 200%;
            background-position: center;
        }
        50%{
            background-image: url(../images/danger-back-02.png);
            background-size: cover;
        }
        100%{
            background-color: url(../images/danger-back-02.png);
            background-size: 200%;
            background-position: center;
        }
    }
    
    .container-bouton{
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
    }
    
    .container-bouton .bouton{
        background: linear-gradient(-45deg, black, #f93c00);
        padding: 20px 20px;
        font-size: 10vw;
        font-family: "fbold";
        text-transform: uppercase;
        color: white;
        transition: 0.3s;
        overflow: hidden;
        cursor: pointer;
        z-index: 99; 
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        animation: bouton-boycotter 3s infinite;
        background-size: 200% 200%;
    }
    
    .container-bouton .bouton:hover{
        background: linear-gradient(-45deg, white, #f93c00);
        animation: bouton-boycotter 3s infinite;
        background-size: 200% 200%;
        z-index: 99; 
    }
    
    @keyframes bouton-boycotter{
        0%{
            background-position: 0 50%;
        }
        50%{
            background-position: 100% 50%;
        }
        
        100%{
            background-position: 0 50%;
        }
    }
    
    .logo-boycotter{
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: 98;
    }
    
    .ajax{
        position: absolute;
        top: 10vh;
        width: 20%;
        animation: ajax 2s infinite;
    }
    .carolin{
        position: absolute;
        top: 40vh;
        width: 20%;
        animation: carolin 1s infinite;
    }
    
    .cif{
        position: absolute;
        top: 25vh;
        width: 20%;
        animation: cif 2s infinite;
    }
    
    .destop{
        position: absolute;
        top: 55vh;
        width: 20%;
        animation: destop 3s infinite;
    }
    
    .canard{
        position: absolute;
        top: 70vh;
        width: 20%;
        animation: canard 2s infinite;
    }
    
    .harpic{
        position: absolute;
        top: 85vh;
        width: 20%;
        animation: harpic 1s infinite;
    }
    
    .mir{
        position: absolute;
        top: 95vh;
        width: 20%;
        animation: mir 2s infinite;
    }
    
    .cillit{
        position: absolute;
        top: 5vh;
        width: 20%;
        animation: cillit 2s infinite;
    }
    
    .sanytol{
        position: absolute;
        top: 63vh;
        width: 20%;
        animation: sanytol 2s infinite;
    }
    
            
    @keyframes ajax{
        0% {
            top: 10vh;
            left: 0;
         }
    
        35% {
            top: 10vh;
            left: calc(100% - 200px);
        }
    
        76% {
            top: 10vh;
            left: 10%;
        }
    
        100% {
            top: 10vh;
            left: 0;
            }
        }
    
    @keyframes carolin{
        0% {
            top: 40vh;
            left: 10%;
        }
        75% {
            top: 40vh;
            left: calc(100% - 200px);
        }
        100% {
            top: 40vh;
            left: 70%;
            }
        }
    
    @keyframes cif{
        0% {
            top: 25vh;
            left: 100%;
            }
        75% {
            top: 25vh;
            left: calc(100% - 0px);
            }
        100% {
            top: 25vh;
            left: 20%;
            }
        }
    
        @keyframes destop{
            0% {
                top: 55vh;
                left: calc(100% - 200px);
                }
            25% {
                top: 55vh;
                left: 0%;
                }
            50% {
                top: 55vh;
                left: calc(100% - 200px);
                }
            75% {
                top: 55vh;
                left: 0%;
                }
            }
        @keyframes canard{
            0% {
                top: 70vh;
                left: calc(100% - 200px);
                }
            25% {
                top: 70vhx;
                left: 0;
                }
            50% {
                top: 70vh;
                left: calc(100% - 200px);
                }
            75% {
                top: 70vh;
                left: 0;
                }
            }
        
        @keyframes harpic{
        0% {
            top: 85vh;
            left: 100%;
        }
        75% {
            top: 85vh;
            left: calc(100% - 100px);
        }
        100% {
            top: 85vh;
            left: 10%;
            }
        }
    
    @keyframes mir{
        0% {
            top: 95vh;
            left: 100%;
        }
        75% {
            top: 95vh;
            left: calc(100% - 0px);
        }
        100% {
            top: 95vh;
            left: 30%;
            }
        }
    
    @keyframes cillit{
        0% {
            top: 5vh;
            left: 50%;
        }
        75% {
            top: 5vh;
            left: calc(150% - 0px);
        }
        100% {
            top: 5vh;
            left: 90%;
            }
        }
    
        @keyframes sanytol{
            0% {
                top: 63vh;
                left: 50%;
            }
            75% {
                top: 63vh;
                left: calc(150% - 0px);
            }
            100% {
                top: 63vh;
                left: 90%;
                }
        }
    
    .attention-boycotter{
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: 97;
    }
    
    #Attention01{
        width: 30%;
        animation: Attention01 1.5s infinite;
        position: absolute;
    }
    
    #Attention02{
        width: 50%;
        animation: Attention02 1.5s infinite;
        position: absolute;
    }
    
    #Attention03{
        width: 20%;
        animation: Attention03 1.5s infinite;
        position: absolute;
    }
    
    @keyframes Attention01{
        0% {
            top: 50vh;
            left: calc(100% - 70vw);
         }
    
        35% {
            top: 0px;
            left: calc(10% - 0px);
        }
    
        76% {
            top: 100vh;
            left: calc(100% - 100vw);
        }
    
        100% {
            top: 0px;
            left: calc(100% - 0px);
            transform: rotate(360deg);
            }
    }
    
    @keyframes Attention02{
        0% {
            top: 2vh;
            left: calc(10% - 0px);
         }
    
        35% {
            top: -40vh;
            left: calc(100% - 20vw);
        }
    
        76% {
            top: 3vh;
            left: calc(100% - 0px);
        }
    
        100% {
            top: 40vh;
            left: calc(100% - 50vw);
            transform: rotate(360deg);
            }
    }
    
    @keyframes Attention03{
        0% {
            top: calc(100% - 0px);
            left: 200px;
         }
    
        35% {
            top: calc(100% - 50vh);
            left: 40vw;
        }
    
        76% {
            top: calc(200% - 0px);
            left: 100vw;
        }
    
        100% {
            top: calc(100% - 100vh);
            left: 10vw;
            transform: rotate(360deg);
            }
    }


    .pict-boycotter{
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: 97;
    }

    .b-aie{
        position: absolute;
        left: 25vh;
        width: 20%;
        animation: b-aie 2s infinite;
    }
    
    .b-corro{
        position: absolute;
        left: 55vh;
        width: 20%;
        animation: b-corro 3s infinite;
    }
    
    .b-enviro{
        position: absolute;
        left: 75vw;
        width: 20%;
        animation: b-enviro 2s infinite;
    }
    
    .b-feu{
        position: absolute;
        left: 85vh;
        width: 20%;
        animation: b-feu 1s infinite;
    }
    
    .b-mort{
        position: absolute;
        left: 95vh;
        width: 20%;
        animation: b-mort 2s infinite;
    }

    @keyframes b-aie{
        0% {
            top: 25vh;
            
            }
        75% {
            top: 100vh;
            
            }
        100% {
            top: 3vh;
           
            }
        }
    
        @keyframes b-corro{
            0% {
                top: 0vh;
                
                }
            25% {
                top: 100vh;
                
                }
            50% {
                top: 20vh;
               
                }
            75% {
                top: 120vh;
            
                }
            }
        @keyframes b-enviro{
            0% {
                top: ;
                }
            25% {
                top: 0;
                }
            50% {
                top: 55vh;
                }
            75% {
                top: 75vh;
                }
            }
        
        @keyframes b-feu{
        0% {
            top: 90vh;
        
        }
        75% {
            top: 10vh;
            
        }
        100% {
            top: 80vh;
            
            }
        }
    
    @keyframes b-mort{
        0% {
            top: 30vh;
            
        }
        75% {
            top: 140vh;
            
        }
        100% {
            top: 12vh;
           
            }
        }

    
    .maladies-boycotter{
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: 96;
    }
    
    .maladie01{
        position: absolute;
        top: -300px;
        left: 0%;
        width: 0%;
        animation: maladie01 2s infinite;
        z-index: 96;
    }
    
    .maladie02{
        position: absolute;
        top: 250px;
        left: 25%;
        width: 0%;
        animation: maladie02 2s infinite;
        z-index: 96;
    }
    
    .maladie03{
        position: absolute;
        width: 0%;
        top: -100px;
        left: 45%;
        animation: maladie03 2s infinite;
        z-index: 96;
    }
    
    .maladie04{
        position: absolute;
        width: 0%;
        top: -200px;
        left: 75%;
        animation: maladie04 2s infinite;
        z-index: 96;
    }
    
    .maladie05{
        position: absolute;
        width: 0%;
        top: 100px;
        left: 95%;
        animation: maladie05 2s infinite;
        z-index: 96;
    }
    
    @keyframes maladie01{
        0% {
            width: 0%;
         }
        35% {
            width: 0%;
        }
        50% {
            width: 50%;
            z-index: 96;
        }
        65% {
            width: 0%;
            transform: rotate(720deg);
            }
    }
    
    @keyframes maladie02{
        0% {
            width: 0%;
         }
        15% {
            width: 0%;
        }
        30% {
            width: 40%;
            z-index: 96;
        }
        45% {
            width: 0%;
            transform: rotate(-360deg);
            }
    }
    
    @keyframes maladie03{
        0% {
            width: 0%;
         }
        55% {
            width: 0%;
        }
        70% {
            width: 70%;
            z-index: 96;
        }
        85% {
            width: 0%;
            transform: rotate(720deg);
            }
    }
    
    @keyframes maladie04{
        0% {
            width: 0%;
         }
        75% {
            width: 0%;
        }
        85% {
            width: 30%;
            z-index: 96;
        }
        95% {
            width: 0%;
            transform: rotate(-360deg);
            }
    }
    
    @keyframes maladie05{
        0% {
            width: 0%;
         }
        30% {
            width: 0%;
        }
        45% {
            width: 80%;
            z-index: 96;
        }
        60% {
            width: 0%;
            transform: rotate(360deg);
            }
    }

    @media screen and (max-width: 1200px) {
        .container-bouton .bouton {
            font-size: 4em;
        }
    } 
    
    @media screen and (max-width: 900px) {
        .container-bouton .bouton {
            font-size: 2em;
        }
    }