html{width:100%;overflow-x: hidden;}
body {
    background:#e8f0b8;
    height: 100%;
    width:100%;overflow-x: hidden;
    font-family:"Arial Condensed", Arial;
}


h1{
    font-family:"Archer";
    font-weight: normal;
    color:#FFF;
    font-size:5em;
    text-shadow: #821e90 -4px 4px 0px;
    text-align:center;
}


#intro{
    position:relative;
    height:115vh;
}

#intro-left{
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    text-align: center;
    height:100%;
    background-image: url('../img/bandeau-recettes.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 10%;
}
#intro-left img{width:90%; max-width: 285px; height:auto;}


.scroll-downs{position: absolute; left: 0; right: 0; bottom: 20vh; margin: auto; width :34px; height: 55px;}
.mousey{width: 3px; height: 35px; padding: 10px 15px; border: 2px solid #fff; border-radius: 25px; opacity: 0.75; box-sizing: content-box;}
.scroller{width: 3px; height: 10px; border-radius: 25%; background-color: #fff; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}
@keyframes scroll {
    0% { opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0;}
}


#salades{background:#FFF;}
#salades, #inspirations{position:relative; padding:0 10% 120px 10%;}
#salades-titre{max-width:600px; width:100%; height:auto; margin:-75px 0 80px 0;}
#inspirations-titre{max-width:600px; width:100%; height:auto; margin:-75px 0 80px 0;}

.container-videos{display: flex; justify-content: center; align-content: center; align-items: start; flex-wrap: wrap}



.video-image{flex: 0 0 50%; align-self: auto;text-align:center; cursor: pointer; padding:5%;}
/*.video-image img{width:100%; max-width:300px;}*/
.video-images{position:relative; float:left; width:100%;}
.img-produit{position:relative; float:left; width:35%; margin-right:5%; height:auto;}
.img-recette{position:relative; float:left; width:60%; height:auto; margin-top:10px;}
.img-recette::after {
    content: " ";
    background-image: url('../img/play.png');
    background-size: 100%;
    position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    width:40%; aspect-ratio:1/1; opacity:0.5;
}

.img-recette img{width:100%; height:auto;}
.video-image span{display:block; position:absolute; left:0; top:70%; width:35%; color:#1a5720; font-size:22px; line-height:1; text-align: center;}
.img-fleche{position:absolute; left:35%; transform: translateX(-50%) rotate(40deg); top:40%; width:30%;filter: drop-shadow(0px 0px 10px #222);}
.video-images h2{position:relative; float:left; width:60%;text-align: center;margin-top:10px; font-size:22px; line-height: 1.1; font-weight:bold; color:#831e90;}

.video-image:hover .img-recette::after{opacity:0.8;}



.popup{
    display: none; position: fixed; overflow: auto; z-index: 100; background-color: rgba(0, 11, 2, 0.9);
    left:0; top:0; width: 100%; height:100%;
}
.close{
    position: absolute; width:28px; top: 0; right:0; background:#FFF;cursor: pointer;
    color: #000; font-size: 28px; line-height:1; font-weight: bold; text-align: center;
}
.popup-content{
    position:relative; margin:auto; padding:28px; top: 50%; transform: translateY(-50%); max-width:400px; aspect-ratio:1080/1920;
}
iframe{width: 100%; height: 100%;}






#menu_bas_footer{
    position:relative;
    padding:50px 20%;
    color:#000;
    background:#FFFFFF;
    font-size:0.9em;
    text-align:center;
}

#menu_bas_footer a{    color:#000; text-decoration:none;}
#menu_bas_footer a:hover{text-decoration:underline;}
#reseaux_sociaux img{height:30px;}



@media screen and (max-width: 1480px) {
    h1{font-size:4em;}
    #intro-left{padding: 10%;}
}
@media screen and (max-width: 1248px) {
    .video-image {flex: 0 0 50%;}
}

@media screen and (max-width: 992px) {
    .scroll-downs{display:none;}
    #intro{ height:auto;}
    #intro-left{height:auto; padding: 50px 5% 40px 5%;}
    #salades, #inspirations {padding:20px 10%;}
    #salades-titre, #inspirations-titre {max-width: 600px; margin: 0 0 90px 0;}
    #menu_bas_footer {padding: 40px 5%;}

    .video-image{flex: 0 0 50%;}

}


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

    .video-image{flex: 0 0 100%;}
    h1 {font-size:2.5em;}
    #intro-left{padding:30px 2% 0 2%;}
    #intro-left img {max-width: 185px;}
    #salades, #inspirations {padding:0 5% 20px 5%;}
    #salades-titre, #inspirations-titre {max-width: 600px; margin: -12px 0 60px 0;}
    #menu_bas_footer {padding: 40px 5%;}
}


@media (orientation: portrait) {
    #salades-video{max-width: none; width:auto; height:auto;}
    #salades-video video{max-width: 90%; max-height: 100vh; height:auto !important; width:auto !important;position: relative;margin: 0 auto;}
}