.page-cas-vdlv main{
  background-color: #000057;
}
.page-cas-vdlv .topPageCas{
  position: relative;
  z-index: 1;
}
.page-cas-vdlv .text p{
  font-size: .9rem;
  text-align: justify;
}
.page-cas-vdlv .text p.t-1{
  text-align: left;
}

.vdlvIntro{
  padding: 0;
  position: relative;
  height: 800px;
}
.leafContainer{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.leafContainer div{
  opacity: 0;
  transform: translate(0,50px);
}
.bigLeaf{
  margin-top: -3rem;
}
.liteLeaf{
  margin-top: -6rem;
  margin-bottom: -1rem;
}
.vdlvIntro .container{
  position: relative;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logoVdlv{
  width: 500px;
}
.logoVdlv #vdlv path{
  fill: transparent;
  stroke: #fff;
  stroke-width: 2px;
}
.logoVdlv #liteHalfCircle path, .logoVdlv #bigHalfCircle path{
  transform: translate(35px, 15px);
  opacity: 0;
}
.logoVdlv #baseline path{
  opacity: 0;
}
.logoVdlv #frenchFlag path{
  transform: translate(20px, 0);
  opacity: 0;
}

.page-cas-vdlv .casDetails{
  position: relative;
}
.page-cas-vdlv .casDetails .oursGoutteur{
  position: absolute;
  right: 0;
  left: calc(50% - 5rem);
  width: 550px;
  transform: translate(200px,0);
}

.identiteMarque{
  position: relative;
  z-index: 1;
  padding-top: 5rem;
  margin-top: 5rem;
}
.identiteMarque .container{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.identiteMarque .t-1{
  color: #2e122b;
}
.skewGradient{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  z-index: 1;
  background:#afd0c8;
  transform: skew(0,3deg);
}
.identiteMarque:before{
  content: '';
  width: 100%;
  height: 60%;
  background-color: #000057;
  position: absolute;
  z-index: 0;
  top: -5rem;
  left: 0;
}
.identiteMarque:after{
  content: '';
  width: 100%;
  height: 60%;
  background-color: #291424;
  position: absolute;
  z-index: 0;
  bottom: -10%;
  left: 0;
}
.logoViceContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 500px;
  max-width: 100%;
}
.logoVice{
  width: 400px;
  max-width: 100%;
  opacity: 0;
  transform: translate(-50px,0);  
}
.logoViceContainer .text{
  width: 450px;
  max-width: 100%;
  opacity: 0;
  transform: translate(-50px,0);  
}
.oursGifsContainer{
  width: 800px;
  height: 365px;
  max-width: 100%;
  opacity: 0;
  transform: translate(50px,0);  
}
.oursGifs{
  position: relative;
  width: 100%;
  height: 100%;
}
.oursGifs img{
  position: absolute;
  bottom: 0;
  left: calc(50% - 300px);
}
.oursGifs img:first-child{
  z-index: 0;
}
.oursGifs img:nth-child(2){
  z-index: 1;
}
.oursGifs img:last-child{
  z-index: 0;
}
.oursSurfGifContainer{
  position: relative;
  width: 600px;
  max-width: 100%;
  height: 765px;
  opacity: 0;
  transform: translate(-50px,0);  
}
.oursSurfGifContainer img{
  position: absolute;
  bottom: 0;
  left: 0;
}
.gammeVdlv{
  width: 800px;
  max-width: 100%;
}
.gammeVdlv .text{
  margin-left: -5rem;
  opacity: 0;
  transform: translate(0,50px);  
}
.gammeVisuel{
  display: flex;
  width: 650px;
  max-width: 100%;
}
.gammeVisuel .parfum{
  width: 25%;
  padding: .5rem .25rem;
  opacity: 0;
  transform: translate(50px,0) scale(0.8);  
}
.showVideo{
  background-color: #291424;
  position: relative;
}
.showVideo .container{
  padding: 5rem 0;
}
.showVideo .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preVideoContainer{
  transform: scale(0.5);
  opacity: 0;
  background-color: #291424;
}
.showVideo .link{
  transform: translate(0, 100px);
  opacity: 0;
}
.videoHidden{
  height: 0;
  width: 100%;
  overflow: hidden; 
  position: relative; 
  margin-top: 5rem;
}
.videoHidden .shadowVid{
  box-shadow: inset 0 0px 200px 150px #2e122b;
}
.videoHidden video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}

.marqueCirkus{
  background-image: url('../img/vdlv/fond-circus.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}
.marqueCirkus .container{
  display: flex;
}
.marqueCirkus .t-1{
  color: #2e122b;
}
.balloonContainer{
  width: 50%;
  display: flex;
  justify-content: center;
}
.balloon{ 
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.balloon div{  
  display: flex;
  align-items: center;
  justify-content: center;
}
.balloon img{
  max-height: 100%;
}
.balloonLeft{
  width: 180px;
  position: absolute;
  left: -50px;
  transform: translate(0,-50px);
  z-index: 1;
}
.balloonCenter{
  width: 400px;
}
.balloonRight{
  width: 180px;
  position: absolute;
  right: -50px;
  transform: translate(0,70px);
  z-index: 1;
}
.gammeCirkus{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.gammeCirkus .text{
  opacity: 0;
  transform: translate(50px,0);
}
.visuelGamme{
  width: 650px;
  margin-top: 2rem;
  max-width: 100%;
  opacity: 0;
  transform: translate(0,50px);
}
.swiperCirckus{
  overflow: visible;
}
.swiperCirckus .swiper-slide{
  width: 120px;
}

.marque814{
  background-color: #011137;
  position: relative;
}
.monaLisa{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 60%;
}
.marque814 .container{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 0;
}
.intro-814{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Medieval Scroll of Wisdom';
  color: #f7f9e4;
  text-transform: uppercase;  
}
.intro-814 img{
  opacity: 0;
  transform: translate(0,50px);
}
.intro-814 div{
  margin-top: 2rem;
  opacity: 0;
  transform: translate(50px,0);
}
.intro-814 strong{
  font-size: 1.8rem;
  line-height: 2.2;
  display: inline-block;
}
.intro-814 p{
  padding-left: 1rem;
  line-height: 1.5;
}
.marque814 .text{
  color: #f7f9e4;
  width: 50%;
  margin-left: auto;
  margin-top: 3rem;
  opacity: 0;
  transform: translate(-50px,0);
}
.marque814 .t-1{
  color: #f7f9e4;
}
.gamme814{
  height: 500px;
  width: 600px;
  margin-top: 8rem;
}
.gammeContainer{
  position: relative;  
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}
.gammeContainer img{
  position: absolute;
  max-height: 100%;
}
.gammeContainer .front, .gammeContainer .bg{
  transform: translate(0,-100px);
}
.gammeContainer .left{
  transform: translate(-50px,0);
}
.gammeContainer .right{
  transform: translate(50px,0);
}
.shadowGamme{
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,rgba(3, 19, 54, 0.6) 0%,rgba(3, 19, 54, 0) 50%);
  mask-image: url('../img/vdlv/gamme-814-mask.png');
  mask-position: bottom;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('../img/vdlv/gamme-814-mask.png');
  -webkit-mask-position: bottom;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  opacity: 0;
}
@media screen and (max-width: 1600px){
  .leafContainer{
    transform: scale(1.2);
  }
  .page-cas-immersion .casDetails{
    margin-top: -15rem;
  }
  .oursGifsContainer {
    width: 600px;
  }
  .oursSurfGifContainer {
    width: 550px;
  }
  .gammeVdlv{
    width: 700px;
    max-width: calc(100% - 550px);
  }
  .swiperCirckus .swiper-slide{
    width: 100px;
  }
  .monaLisa{
    width: 70%;
  }
}
@media screen and (max-width: 1400px){
  .leafContainer{
    transform: scale(1.4);
    transform-origin: 50% 0;
  }
  .page-cas-vdlv .casDetails .oursGoutteur {    
    left: calc(50% + 1rem);
  }
  .preVideoContainer{
    width: 600px;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }
  .preVideoContainer video{
    max-width: 100%;
  }
  .swiperCirckus .swiper-slide {
    width: 85px;
  } 
}
@media screen and (max-width: 1300px){
  .oursSurfGifContainer {
    width: 450px;
    height: 550px;
  }
  .gammeVdlv {
    max-width: calc(100% - 450px);
    margin-top: 5rem;
  }
}
@media screen and (max-width: 1200px){
  .bigLeaf {
    margin-top: -2rem;
  }
  .liteLeaf {
    margin-top: -3rem;
    margin-bottom: 0rem;
  }
  .logoViceContainer{
    width: 400px;
  }
  .gammeVdlv .text{
    margin-left: 0;
  }
  .gammeVisuel{
    width: 450px;
  }
  .balloonCenter{
    width: 350px;
  }
  .balloonRight {
    width: 150px;
    right: -40px;
  }
  .balloonLeft {
    width: 150px;
    left: -40px;
  }
}

@media screen and (max-width: 1100px){
  .page-cas-vdlv .casDetails .oursGoutteur {
    left: calc(50% - 1rem);
    top: 0;
    width: 450px;
  }
  .oursGifsContainer{
    width: 500px;
  }
  .oursGifs img{
    left: calc(50% - 250px);
  }
  
  .marque814 .container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .intro-814{
    width: 100%;
    order: 1;
  }
  .marque814 .text{
    margin-left: 0;
    order: 3;
    padding: 0 1rem;
  }
  .gamme814{
    width: 50%;
    height: 350px;
    order: 2;
    padding: 0 1rem;
  }
}
@media screen and (max-width: 1023px){
  .page-cas-vdlv .casDetails .oursGoutteur {
    left: calc(25% - 1rem);
  }
  .identiteMarque{
    margin-top: 10rem;
  }
  .identiteMarque .text p.t-1{
    text-align: center;
    align-items: center;
  }
  .skewGradient{
    top: 5%;
  }
  .logoViceContainer {
    width: 100%;
    margin-top: -9rem;
    order: 1;
  }
  .logoVice, .logoViceContainer .text ,.oursGifsContainer, .oursSurfGifContainer,.gammeCirkus .text{
    transform: translate(0px,50px);
  }
  .oursGifsContainer {
    width: 100%;
    order: 2;
  }
  .oursGifs{
    display: flex;
    justify-content: center;
  }
  .oursGifs img{
    left: auto;
  }
  .oursSurfGifContainer{
    width: 100%;
    height: 500px;
    order: 4;
    margin-top: -20rem;
  }
  .oursSurfGif{
    height: 100%;
  }
  .oursSurfGifContainer img{
    max-height: 100%;
  }
  .gammeVdlv{
    order: 3;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .gammeVisuel{
    margin-left: calc(50% - 8rem);
  }
  .balloonContainer{
    width: 45%;
  }
  .balloonCenter {
    width: 300px;
  }
  .balloonRight {
    width: 130px;
    right: -30px;
  }
  .balloonLeft {
    width: 130px;
    left: -30px;
  }
  .gammeCirkus{
    width: 55%;
  }
}

@media screen and (max-width: 940px){
  .logoVdlv {
    width: 400px;
  }
  .page-cas-vdlv .casDetails {
    margin-top: -5rem;
  }
  .page-cas-vdlv .casDetails .oursGoutteur {
    left: calc(25% + 1rem);
  }
  .gammeVisuel {
    margin-left: calc(50% - 5rem);
  }
  .oursSurfGifContainer {
    height: 430px;
  }
  .showVideo .container{
    padding: 5rem 0 7rem 0;
  }
  .marqueCirkus .container{
    flex-wrap: wrap;
    padding-bottom: 3rem;
  }
  .balloonContainer {
    width: 100%;
  }
  .gammeCirkus{
    width: 100%;
    margin-top: -7rem;
    align-items: center;
  }
  .gammeCirkus .text p.t-1{
    text-align: center;
    align-items: center;
  }
  .gamme814 {
    width: 40%;
    height: 280px;
  }
  .intro-814 div{
    margin-left: 25%;
  }
  .marque814 .text{
    width: 60%;
  }
}
@media screen and (max-width: 768px){
    .vdlvIntro{
    height: 600px;
  }
  .gammeVisuel{
    width: 400px;
    margin-left: calc(50% - 6rem);
  }
  .oursSurfGifContainer {
    height: 380px;
    margin-top: -17rem;
  }
}
@media screen and (max-width: 767px){
  /*PAGE CAS VDLV*/
  .gammeVisuel {
    width: 500px;
    margin-left: 0;
  }
  .oursSurfGifContainer{
    display: none;
  }
  .marque814 .text {
    width: 100%;
    order: 2;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .marque814 .text p.t-1{
    text-align: center;
    align-items: center;
  }
  .gamme814 {
    width: 100%;
    height: 300px;
    order: 3;
    margin-top: 2rem;
  }
  .gammeContainer .front, .gammeContainer .bg {
    transform: translate(0,50px);
  }
  .marque814 .text {
    transform: translate(0,50px);
  }
}
@media screen and (max-width: 640px){
  .logoVdlv {
    width: 300px;
  }
  .vdlvIntro{
    height: 500px;
  }
  .leafContainer {
    transform: scale(2);
  }
  .page-cas-vdlv .casDetails .oursGoutteur {
    top: 70px;
    left: 200px;
    width: calc(100% - 200px);
  }
  .gammeVisuel{
    width: 400px;
  }
  .showVideo .container{
    padding: 5rem 0;
  }
}
@media screen and (max-width: 540px){
  .identiteMarque .container, .marqueCirkus .container, .marque814 .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .liteLeaf {
    margin-top: -2rem;
  }
  .bigLeaf {
    margin-top: -1rem;
  }
  .oursGifsContainer {
    height: 285px;
  }
  .showVideo .container{
    padding: 6rem 0rem 4rem 0rem;
  }
  .videoHidden{
    margin-top: 2rem;
  }
  .gammeCirkus{
    margin-top: -30px;
  }
  .monaLisa{
    width: 100%;
  }
  .marque814 .container{
    padding-top: 13rem;
    padding-bottom: 3rem;
  }
  .intro-814 div{
    margin-left: 0;
    text-align: center;
    transform: translate(0,50px);
  }
  .intro-814 div p{
    padding-left: 0;
  }
}
@media screen and (max-width: 480px){
   .page-cas-vdlv .casDetails .oursGoutteur {
    top: 65px;
    left: 215px;
    width: calc(100% - 35px);
  }
  .page-cas-vdlv .casDetails .titreIntro h1{
    width: 285px;
    max-width: 100%;
  }
  .oursGifsContainer {
    height: 255px;
  }
  .gammeVdlv{
    margin-top: 2rem;
  }
}
@media screen and (max-width: 420px){
  .vdlvIntro {
    height: 440px;
  }
  .oursGifsContainer{
    height: 230px;
  }
  .oursSurfGifContainer{
    display: flex;
    justify-content: center;
    margin-top: 0;
  }
  .oursSurfGig{
    display: flex;
    justify-content: center;
  }
  .oursSurfGig img{
    left: auto;
  }
  .showVideo .container{
    padding: 8rem 0rem 4rem 0rem;
  }
}
@media screen and (max-width: 380px){
  .leafContainer {
    transform: scale(2.5);
  }
  .bigLeaf {
    margin-top: -1rem;
  }
  .liteLeaf {
    margin-top: -1.5rem;
  }
  .page-cas-vdlv .casDetails .oursGoutteur {
    top: 90px;
    left: 175px;
    width: 100%;
  }  
  .oursGifsContainer {
    height: 200px;
  }
}

@media screen and (min-width:2000px){
  .vdlvIntro{
    height: 950px;
  }
  .logoViceContainer{
    width: 700px;
  }
}