MyVideo@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */




body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
html {background-color:#000;font-family: 'Sackers';}

a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h2,h3,h4,h5,h6,h7 {
    font-family: 'Sackers';
    font-weight: 800;
    margin:0;
    padding:0;


}

h1 {
    font-family: 'Sackers';
    font-weight: 800;
    margin:0;
    padding:0;


}




q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

/* Custom CSS
 * --------------------------------------- */
body{
	font-family: 'Miller';
    font-weight:300;
	color: #f2f2f2;
}
h1{
	font-size: 40px;
    color:#fff;
}
p{
	font-size: 0.7em;
}
.section{
	text-align: center;
}
a {color:#909291;}


.ecran {
    left:0;
    top:0;
  width: 100%;
    height:100%;


}

.livideo {text-align:left;text-transform:uppercase;line-height:100%;font-size:44px !important;}

@media screen and (max-width: 800px)
{.livideo {margin-left:15px;font-size:32px !important;}

}


.ecran .img-wrap, .ecran .img-wrap {
  padding: 0;
    margin:0;
  width: 100%;
   height:100%;  


}


.img-wrap {
  padding: 0;
    margin:0;
  width: 100%;
   height:100%;  

}


.textscroll {max-width: 900px;margin:auto;}

.img-wrap {padding:40px;}
.img-wrap p {font-size:18px;color:#000;line-height:30px;text-align:justify;padding-right:0px;-webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;}


h3 {font-family:'Sackers';text-transform: uppercase;letter-spacing: 0.1em;color:#000;
margin-top:50px;padding-bottom:50px;font-family:20px; font-weight: 800;}


.ecran .front .img-wrap img, .ecran .back .img-wrap img {
  max-width: 100%;
}

.opaque {opacity:0.7}

.logotype {width:300px;display:block}


.carousel-inner {
height: auto;
}


.gradient1 {background-color: #ffffff;
background-image: linear-gradient(0deg, #ffffff 0%, #e2f768 100%);

}
.gradient2 {background-color: #ffffff;
background-image: linear-gradient(0deg, #ffffff 0%, #f76868 100%);
}

.gradient3 {background-color: #ffffff;
background-image: linear-gradient(0deg, #ffffff 0%, #c6b0b0 100%);
}





.ecranhead {height:500px !important; max-height:500px; width:100vw;max-width:900px;display:block;}


		.myVideo{
			position: absolute;
			z-index: -0;
			top:0;
			left:0;
         width:100%;
            max-width:100vw;
			height: 100%;
			background-size: 100% 100%;
	 		background-color: black;
	  		background-image: 
	  		background-position: center center;
	  		background-size: contain;
	   		object-fit: cover; 
            

		}
.myVideobis{
			position: absolute;
			z-index: -0;
			top:0;
			left:0;
         width:100%;
			height: 100%;
			background-size: 100% 100%;
	 		background-color: black;
	  		background-image: 
	  		background-position: center center;
	  		background-size: contain;
	   		object-fit: cover; 
		}
        .myVideo2{
            margin:auto;
			background-size: 100% 100%;
            width:100%;
            max-width:900px;
	 		background-color: black;
	  		background-image: 
	  		background-position: center center;
	  		background-size: contain;
	   		object-fit: cover; 
		}
            
.myVideo4 {position: absolute;
			z-index: 1;
			top:0px;
			left:0;
         width:100%;
            max-width:100vw;
			height: 90% !important;
			background-size: 100% 100%;
	 		background-color: black;
	  		background-image: 
	  		background-position: center center;
	  		background-size: contain;
	   		object-fit: cover; }


.nb { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}


 @media screen and (max-width: 899px)
 {
     .myVideo4{height:60% !important;}
.myVideobis{
       width:160%;
			margin-left:-60%;
	  		background-position: right center;
		}
     
     h6 {font-size:12px; line-height:12px !important}
}

.myimage {position: absolute;
			z-index: 1;
			top:0px;
			left:0;
         width:100%;
            max-width:100vw;
			height: 90% !important;
			background-size: 100% 100%;
	 		background-color: black;
	  		background-image: 
	  		background-position: center center;
	  		background-size: contain;
	   		object-fit: cover; }

 @media screen and (max-width: 899px)
 {.myimage{height:60% !important;}}



 .myVideo9{
     z-index:-10;position:absolute;
            margin:auto;
			background-size: 100% 100%;
            width:100%;
	 		background-color: black;
	  		background-image: 
	  		background-position: center center;
     opacity:0.2;
	  		background-size: contain;
	   		object-fit: cover; 
		}

.myVideoiphone{
            margin:auto;
                  width:auto;
			background-size: 100% 100%;
           height:80vh;
	 		background-color: black;
	  		background-image: /* our video */;
	  		background-position: center center;
	  		background-size: contain;
	   		object-fit: cover;
		}

 .myiphone{
     position:absolute;
     top:9vh;
   left:-48vw;
                  width:100%;
     height:82vh;
	  		background-image: /* our video */;
	  		background-position: center center;
	  		background-size: contain;
	   		object-fit: cover;
     background-repeat: no-repeat;
		}


		#section1 .layer{
			position: absolute;
			z-index: 5;
			width: 100%;
			left: 0;
            margin:0;
			top: 42%;
			height: 100%;
		}



#section2 .layer{
	position: absolute;
			z-index: 5;
			width: 100%;
			left: 0;
            margin:0;
			height: 100%;
       		top: 35%;}
		}

        @media screen and (max-width:780px)
{
  
#section2 .layer{  top: 15%;
}
}

        
     
		#infoMenu li a{
			color: #fff;
		}

		#section1{
	      background-color:#fff;padding:0px !important;}
        
        #section2 {
            background-color:#fff;padding:0px !important;}
        
        
         #section3 {
            background-color:#fff;padding:0px !important;}
       
       
       #section4 {
            background-color:#fff;padding:0px !important;}
       
       
          #section5 {
            background-color:#fff;padding:0px !important;}
       
          #section6 {
            background-color:#fff;padding:0px !important;}
       
       
        #section7 {
         }
       
        #section10 {
           }
       
       .responsive-iframe {
    background-color: #fff;
    border:0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


            
        	#section1{
		background-size: cover;
	}
        
#fp-nav {display:none;}
        
       .fp-slidesNav {display:none;}

	/* Defining each section background and styles
	* --------------------------------------- */

  #close{
	position:fixed;
	top:15px;
	left:60px;
      width:50px;
	height: 50px;
	z-index: 70;
	text-align:right;
	padding-top: 10px;
    padding-right:5px;
	margin:0;
}
 
  #titre{
}
 
.nodisp {display:none;}


 
  .folio {
	position:fixed;
      color:#222;
	top:0;
	right:10px;
      width:50px;
	height: 50px;
	z-index: 70;
	text-align:center;
text-transform: uppercase;
	margin:0;padding-top:20px;padding-bottom:35px;
}
 
  #menu{
	position:fixed;
	top:0px;
	left:10px;
      width:50px;
	height: 50px;
	z-index: 70;
	text-align:right;
	padding-top: 10px;
	margin:0;
}

  #flechegauche{
	position:fixed;
	top:0px;
	right:120px;
      width:50px;
	height: 50px;
	z-index: 70;
	text-align:right;
	padding-top: 10px;
    padding-right:5px;
	margin:0;
}


        h3 {font-family:'Sackers';text-transform: uppercase;line-height:22px;padding-top:20px;letter-spacing: 0.1em;color:#909291;}
        .bloc {margin-left:0;}
        .texte {color:#000 ; padding: 0; font-size:19px !important;font-weight:300;}
  .grandtexte {color:#000 ; padding: 0; font-size:19px !important;font-weight:300;}
.petittexte {color:#000 ; padding: 0; font-size:14px !important;font-weight:300;}
         .texte2 {color:#fff !important;font-size:19px !important;font-weight:300;background-color:#000; padding: 20px !important}
        .culdebouteille {width:100%;margin-left:0px;padding-top:10px;}
          .culdebouteille2 {width:150%;margin-left:-80px;padding-top:150px;}
        .blockquote {font-size:32px;text-align: left; font-weight: 100; font-style:normal;line-height:34px; margin-left:0px;color:#000;padding-right:30px;}


         .blockquote2 {font-size:32px;text-align: left; font-weight: 100; font-style:normal;line-height:34px; margin-left:100px;margin-top:80px;margin-bottom:100px;color:#000;}
    .blockquote3 {font-size:32px;text-align: right; font-weight: 100; font-style:normal;line-height:34px; margin-left:25px;margin-top:30px;margin-bottom:100px;color:#000;}


.blockquote::after{ 
  background-image: url(../images/quote2.png);
    background-size: 45px 44px;
    display: block;
  left:20px;
    height:44px;
    width:44px;
    content:"";
 }



.blockquote2::after{ 
  background-image: url(../images/quote2.png);
    background-size: 45px 44px;
    display: block;
  left:20px;
    height:44px;
    width:44px;
    content:"";
 }

.blockquote3::after{ 
  background-image: url(../images/quote2.png);
    background-size: 45px 44px;
    display: block;
    position:absolute;
 right:20px;
    height:44px;
    width:44px;
    content:"";
 }

.coolio {margin-top:170px;}


        .btn-light {font-family:'Din';text-transform: uppercase;font-size: 18px;line-height:10px;padding-top:15px;letter-spacing: 0.2em;}
        
        .card-title {font-family:'Sackers';text-transform: uppercase;font-size: 24px;line-height:22px;letter-spacing: 0.2em;color:#909291; font-weight: 800;}
        
        .card-text {font-size: 20px !important;line-height:22px; text-align:left !important;}
        
        .plushaut {margin-top:40px;}
        
        .drop-cap {margin-top:.3em;font-size:720%;}
 .drop-cap2 {margin-top:.3em;font-size:720%;color:#fff}
        
        .py-2 {margin-top:-100px;margin-bottom:100px;}
        .paddy{padding: 20px;}
 .texte2 {color:#000 !important;background-color:#fff; padding: 20px 20px 20px 20px !important;margin:0;}

.blanc {color:#fff}

.discover {font-size:14px;line-height:12px;color:#fff;text-transform:uppercase;border-bottom:0;letter-spacing: 0.1em}

.petit {width: 100vw }

@media screen  and (min-width: 800px) {

.petit {width: calc(100vw - 310px);margin-left:310px;}}
            
        @media screen  and (min-width: 900px) and (max-width: 1000px)
{
    .coolio {margin-top:100px;}
      .bloc {margin-left:0px}
        .texte { padding: 0 !important;}
    .texte2 {color:#fff !important;background-color:#909291; padding: 20px 20px 20px 20px !important;margin:0;}
        .culdebouteille {width:100%;margin-left:0px;padding-top:0;}
    .culdebouteille2 {width:130%;margin-left:-0px;padding-top:30px;}
        .blockquote {font-size:32px;text-align: left; font-style: normal; line-height:34px; margin-left:0px;padding:0px 0 50px 0px;margin-bottom:50px;}
     .blockquote2 {font-size:32px;text-align: left; font-style: normal; line-height:34px; margin-left:70px;padding:0px 0 50px 20px;margin-bottom:0px;}
       .blockquote3 {font-size:32px;font-style: normal; line-height:34px; margin-left:70px;padding:0px 0 50px 20px;margin-bottom:0px;}
        .btn-light {font-family:'Sackers';text-transform: uppercase;font-size: 18px;line-height:10px;padding-top:15px;letter-spacing: 0.2em; font-weight: 800;}
        
        .plushaut {margin-top:0px;}
    .py-2 {margin-top:-20px;margin-bottom:100px;}
}
       

.sautdeligne{display:none;}
 .grandsaut{display:block}
        
          @media screen and (max-width: 780px)
          {
               .grandsaut{display:none;}
              .sautdeligne{display:block};
              .coolio {margin-top:0px;}
              .paddy{padding: 20px;}
              .bloc {margin-left:0px}
             .culdebouteille {width:100%;margin-left:0px;padding-top:0;}  
              .culdebouteille2 {width:100%;margin-left:0px;padding-top:0;} 
              .py-2 {margin-top:-20px;margin-bottom:100px;}
        }
        
        @media screen and (max-width:780px)
{
    
    .discover {font-size:10px;}
    
    .paddy{padding: 40px;}
      .bloc {margin-left:0px}
        .texte { color:#000 !important; background-color:none !important; padding: 20px 0 !important;}
    .grandtexte {color:#000 !important; background-color:none !important; padding: 20px 0 !important; font-size:19px !important;font-weight:300;hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;}
     .texte2 {color:#000 !important;background-color:#fff !important; padding: 50px 0 !important;}
        .culdebouteille {width:100%;margin-left:0px;padding-top:0;}
    .culdebouteille2 {width:100%;margin-left:0px;padding-top:0;}
        .blockquote {font-size:36px;text-align: left; font-style: normal; line-height:40px; margin-left:-0px;margin-bottom:0px;}
      .blockquote2 {font-size:36px;text-align: left; font-style: normal; line-height:40px; margin-left:0px;padding:0px 0 0px 0px;margin-left:0px;margin-top:30px;}
          .blockquote3 {font-size:36px;font-style: normal; line-height:40px; margin-left:0px;padding:0px 0 0px 20px;margin-left:30px;margin-top:30px;}
    cite {margin-left:0;}
        .btn-light {font-family:'Sackers';text-transform: uppercase;font-size: 18px;line-height:10px;padding-top:15px;letter-spacing: 0.2em; font-weight: 800;}
        
.sliderhead {height:350px !important; max-height:350px;}
        .plushaut {margin-top:0px;}
}

      .patdiv { margin-left:33%;margin-right:33%;margin-top:20px; text-align: center;}
 
.bottom {position:absolute; margin:0; left: calc (50% - 200px); width:100%;bottom:35px;height:100px; text-align: center;background-image: url('../images/boutonfond.png'); background-origin: content-box; background-position: center;background-size:contain;background-repeat: no-repeat; font-weight:400;}



.bas {
    width:50px;
  cursor: pointer;
height:50px !important; padding: 10px; padding-top:38px;  padding-bottom:38px;
   font-size:10px;
            font-family: 'Sackers';
     font-weight: 400;
    letter-spacing: 0.05em;
    line-height:110px;

        color:#fff}
        
             .bas:hover {

        color:#000}

.bas2 {line-height:210px; font-family: 'Sackers';height:200px;font-weight: 400;letter-spacing: 0.05em}

.halo{color:#fff;padding:5px;font-size:40px;line-height:40px;text-shadow: 2px 2px 4px rgba(0,0,0,0.1);}

.ptitbas {}

 .bottom2 {position:absolute; margin:0; left: calc(50% - 100px); width:200px;height:200px;top: calc(50% - 100px); text-align: center;background-image: url('../images/boutonfond.png'); background-origin: content-box; background-position: center;background-size:contain;background-repeat: no-repeat; cursor: pointer;font-weight:400;}

     .patdiv2 { margin-left:33%;margin-right:33%;padding-top:10px;margin-top:20px; text-align: center;}

   

        .pat { display:block;border:0 solid;font-family:'Sackers' !important;text-transform: uppercase !important;font-size: 24px;line-height:20px;padding-top:15px;padding-bottom:10px;letter-spacing: 0.05em; font-weight: 800;text-transform:none;}

  .pat2 {margin-bottom:25px;padding-top:15px;padding-top:20px;}

.vignette {width:100px;text-align:center;cursor: pointer;margin-top:50px;}

.vignette  {
    -webkit-border-radius : 100px;
    border: 6px solid #fff;
    animation: blink 1s;
    animation-iteration-count: 2;
}

.vignettecliquee  {
opacity:0.2;
}


.vignette:hover  {
 border: 6px solid #909291;

}

@keyframes blink { 50% { border-color: #909291; }  }

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

.noir {color:#000;}
.noir:hover {color:#000}
.blanc {background-color:#fff}
.svg:hover {filter: invert(100%) !important;}
.btn:hover {color:#000 !important;cursor: pointer}

btn-outline-light:hover {filter: invert(100%);color:#fff !important;cursor: pointer}

.round {  -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;}

.round:hover {}
.visible2 {opacity:1}
.visible {opacity:1}

.visible3 {margin-top:0;}

h2 {
font-size:24px;
}



h3 {font-size:34px !important;line-height:60px;letter-spacing:0.0;font-weight:300;}
h4 {font-size:30px !important;}

.born {}
.cadre {position:absolute;left:calc(50vw - 350px);top:calc(50vh - 270px);}
.cadre2 {position:absolute;left:calc(50vw - 250px);top:calc(50vh - 375px);}
        .cadre img {height:500px}
     .cadre2 img {height:100vh;}

.born h2 {color:#fff;font-size:50px;line-height:50px;text-align: center;margin-bottom:-20px;}
.born h3 {color:#fff;font-size:110px;line-height:60px;text-align: left;margin-top:-20px;padding-top:0;}

.reinventing {position:absolute;left:calc(50vw - 50px);top:calc(50vh - 150px);}

.reinventing h2 {color:#000;font-size:8px;line-height:80px;text-align: left;padding-bottom:0;margin-bottom:0;}

.reinventing2 {position:absolute;left:calc(50vw - 50px);top:calc(50vh - 75px);}

.position {position:absolute;left:-30px;top:30%;}

.reinventing2 h2 {color:#fff;font-size:80px;line-height:70px;text-align: left;padding-bottom:0;margin-bottom:0;}
.reinventing h3 {color:#000;font-size:44px;line-height:30px;text-align: left;margin-top:-20px;}

.pier {position:absolute;left:250px;top:calc(50vh - 50px);}

.pier h2 {color:#000;font-size:100px;line-height:80px;text-align: left;padding-bottom:0;margin-bottom:0;}

.pier h3 {color:#fff;font-size:44px;line-height:40px;text-align: left;margin-top:-20px;}


.stand {position:absolute;left:calc(50vw - 50px);top:calc(50vh - 150px);}

.stand h2 {color:#fff;font-size:100px;line-height:80px;text-align: left;padding-bottom:0;margin-bottom:0;}

.stand h3 {color:#fff;font-size:44px;line-height:40px;text-align: left;margin-top:-20px;}


.btn {  -webkit-border-radius: O; -moz-border-radius:0; border-radius:0; }

.playground{position:absolute;top:0px;width:80%;max-width:320px;left:50vw;bottom:100px;transform: translate(-53%,50%);}

.playground h3 {color:#fff;font-size:50px !important;line-height:50px;padding-bottom:0;letter-spacing: 0.05em;text-align:left;}

playground h2{font-size:90px;line-height:70px;}

#section7 {background-color:#909291;}

.card {cursor: pointer;}

.cool {width:100%;margin-left:0px;margin-right:0px;height:100% !important;text-align: center;}

.cooly {position:absolute;bottom:0;width:90%; left: 50%;transform: translate(-50%,-55%);}
.romatitre {position:absolute;left:20px;max-width:600px;text-align:left;line-height:95px;}

.romatitre2 {position:absolute;bottom:100px;left:20px;max-width:600px;text-align:left;line-height:95px;}
.coolio {color:#fff;font-size: 54px;text-align: center;}
.edito {max-width:60% !important;text-align:left;}
.titre {font-size:42px;color:#fff;letter-spacing: 0.25em;text-align:center;margin-top:25px;padding-top:25px;margin-left:15px;text-align:center;}

.ecran1 {background-image: url('../images/stlaurent2.jpg'); background-origin: content-box; background-position: center top;background-size:cover;}

.ecran2 {background-image: url('../images/stlaurent.jpg'); background-origin: content-box; background-position: center;background-size:cover;margin-top: 0;background-color: #000}

.ecran3 {background-image: url('../images/stlaurent3.jpg'); background-origin: content-box; background-position: center;background-size:cover;margin-top: 0;background-color: #000}

.ecran4 {background-image: url('../images/stlaurent4.jpg'); background-origin: content-box; background-position: center;background-size:cover;margin-top: 0;background-color: #000}

.ecran5 {background-image: url('../images/stlaurent5.jpg'); background-origin: content-box; background-position: center;background-size:cover;margin-top: 0;background-color: #000}

.ecran6 {background-image: url('../images/stlaurent6.jpg'); background-origin: content-box; background-position: center;background-size:cover;margin-top: 0;background-color: #000}

.ecranintro {background-image: url('../../images/fondintro2.jpg'); background-origin: content-box;background-size:cover;background-position: center;}

.ecranbottle {background-image: url('../images/bottles.jpg'); background-origin: content-box;background-size:cover;background-position: right;}

.naomi {position:absolute;padding:20px;color:#fff !important;background-color:#000;margin:20px;margin-top: 50%;}
.surprise {text-align:left;margin-left:50px;font-family:'Sackers';  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;}

#surprise {border-bottom: 2px solid #909291;cursor:pointer;font-size:36px;}
#surprise:before {content: "";display:block;position: absolute;margin-right:60px;font-size:24px;color: #909291;background-image: url(../svg/cursor.svg);background-position: center;background-repeat: no-repeat; width:25px;height:50px;left:30px;margin-top:5px;}
#surprise:hover {border-bottom: 2px solid #000;}

.divsurpriseslideleft {text-align:left;margin-left:0px;font-family:'Sackers';}

.surpriseslideleft {border-bottom: 2px solid #909291;cursor:pointer;font-size:36px;color:#fff;}

.surpriseslideleft:hover {border-bottom: 2px solid #000;}

.divsurpriseslideright {text-align:right;RIGHT:0;margin-right:0px;font-family:'Sackers';}

.surpriseslideright {border-bottom: 2px solid #909291;cursor:pointer;font-size:36px;color:#fff;}

.surpriseslideright:hover {border-bottom: 2px solid #000;}


.surprise2 {text-align:center;margin-left:30px;}
#surprise2 {border-bottom: 2px solid #909291;cursor:pointer;font-size:23px;}
#surprise2:before {content: "";display:block;position: absolute;top:-45px;font-size:24px;color: #909291;background-image: url(../svg/cursor.svg);background-position: center;background-repeat: no-repeat; width:25px;height:50px;left:10px;margin-top:5px;}
#surprise2:hover {border-bottom: 2px solid #000;}

.layer2 {position: absolute;left:calc(50% - 80px);top:50px;}
.layer3 {position: absolute;top:0px;width: 70%;margin-left:15%;margin-top:70px}

.surprise3 {position: absolute;left:calc(50% + 120px);top:(50% - 80px);}
.surprise4 {position: absolute;left:calc(50% - 100px);top:calc(50% + 110px);}
.surprise5 {position: absolute;left:calc(50% + 120px);top:calc(50% + 110px);}
#surprise3 {cursor:pointer;font-size:23px;line-height:28px;padding:10px;padding-left:40px;padding-bottom:5px;background-color:#909291;-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
             border-radius: 100px;height:45px;width:45px !important;padding:0;cursor:pointer;}
#surprise3:before {content: "";display:block;position: absolute;margin-right:60px;font-size:24px;color: #909291;background-image: url(../svg/cursor.svg);background-position: center;background-repeat: no-repeat; width:25px;height:50px;left:10px;margin-top:-5px;}
#surprise3:hover {color:#fff;}
.surprise4 {text-align:left;margin-left:0px;font-family:'Sackers';}
#surprise4 {border-bottom: 2px solid #909291;cursor:pointer;font-size:23px;}
#surprise4:hover {color:#000;}


.quiz {display:inline-block;font-size:42px;font-family:'Sackers';color:#000;padding-right:30px;cursor: pointer;}
.quiz2 {font-size:32px;line-height:35px;padding:20px;font-family:'Sackers';color:#000;cursor: pointer;}

.pink {color:#909291}

.red {color:#909291}
.red2 {color:#909291}
.red3 {color:#909291}

.read {-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
             border-radius: 100px;height:60px;width:60px;padding:0;margin:auto;margin-left:-50px;margin-bottom:20px;cursor:pointer;}

.item1 {}
.item1::before {content: "";display:block;position: absolute;font-size:24px;color: #909291;background-image: url(../svg/check2.svg);background-position: center;background-repeat: no-repeat; width:20px;height:30px;left:20px;margin-top:5px;}

.item2 {}
.item2::before {content: "";display:block;position: absolute;font-size:24px;color: #909291;background-image: url(../svg/check2.svg);background-position: center;background-repeat: no-repeat; width:20px;height:30px;left:20px;margin-top:-6px;}

.being {text-transform:uppercase;text-align: left;padding-top:15px;padding-bottom:0;margin-bottom:0;line-height:40px;color:#909291;}


        @media screen  and (min-width: 801px) and (max-width: 1200px)
        {
          .cooly {position:absolute;top:10%;width:90%; left: 50%;transform: translate(-50%,-0);}

.coolio {font-size: 44px !important}         
            
}

.anwar {background-image: url('../images/anwarperfume2.jpg'); background-position: center center;background-size:cover;}


@media screen and (max-width: 800px) {  .patdiv { margin-left:5%;margin-right:5%;margin-top:50px; text-align: center;} .patdiv2 { margin-left:5%;margin-right:5%;margin-top:50px; text-align: center;} .pat{}
    .halo{color:#fff;padding:5px;font-size:25px;line-height:25px;text-shadow: 2px 2px 4px rgba(0,0,0,0.1);}
    
    .anwar {background-image: url('../images/anwarperfume3.jpg');}

    
    .surprise3 {position: absolute;left:calc(50% + 80px);top:(50% - 80px);}
.surprise4 {position: absolute;left:calc(50% - 80px);top:calc(50% + 110px);}
.surprise5 {position: absolute;left:calc(50% + 80px);top:calc(50% + 110px);}
    
    .surpriseslideleft,  .surpriseslideright {font-size:24px;}
    
    
    .romatitre {margin-top:-30px;font-size:60px;line-height:55px;}

.romatitre2 {margin-top:-30px;font-size:60px;line-height:55px;}
    
    .position {position:absolute;left:-30px;top:60%;}
    .edito {max-width:80% !important;margin-left:10%;}
h3 {font-size:34px !important;line-height:38px;letter-spacing:0.05;}
    .read {margin-left:30px;margin-top:-250px;}
    .blanc {color:#000;}
    .cooly {position:absolute;bottom:0;width:90%; left: 50%;transform: translate(-50%,-80%);}
.coolio {font-size: 74px !important;}
    .naomi {padding:20px;color:#fff !important;background-color:#000;margin-top: 70%;}
    .cadre {position:absolute;left:calc(50vw - 70px);top:calc(50vh - 140px);}
    .cadre img {height:250px}
    .born h2 {font-size:30px;line-height:30px;}
     .born h3 {font-size:60px;line-height:40px;text-align: left;padding-top:20px;}
    .reinventing {top:50vh;left:20px}
    .reinventing2 {top:50vh;left:20px}
    .born {}
    .pier {top:50vh;left:20px}
     .stand {top:50vh;left:20px}
        .stand h2 {color:#fff;font-size:80px;line-height:65px;text-align: left;padding-bottom:0;}
    .reinventing h2 {color:#000;font-size:80px;line-height:65px;text-align: left;padding-bottom:0;margin-bottom:0;}
      .reinventing2 h2 {color:#fff;font-size:80px;line-height:65px;text-align: left;padding-bottom:0;margin-bottom:0;}
    .pier h2 {font-size:80px;line-height:65px;text-align: left;padding-bottom:0;margin-bottom:0;}
    .quiz {font-size:30px;padding-right:15px}
    playgroundh2{font-size:60px;line-height:65px !important;}
    .ecranrome {background-position: 70%;}
#surprise {font-size:30px;}
}

.slide {overflow-y: hidden;}
.vjs-valentino {}
.vjs-poster {     background-size: cover!important;     object-fit: cover!important; }  video[poster] {     object-fit: cover;     background-color:transparent; }


.vjs-valentino .vjs-control-bar {
    height: 70px;
    padding-top: 20px;
    background: none;
    background-image: linear-gradient(0deg, #000, transparent)
}

.vjs-valentino .vjs-button>.vjs-icon-placeholder:before {
    line-height: 50px
}

.vjs-valentino .vjs-play-progress:before {
    display: none
}

.vjs-valentino .vjs-progress-control {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 20px
}

.vjs-valentino .vjs-progress-control .vjs-progress-holder {
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0
}

.vjs-valentino .vjs-play-progress {
    background-color: #909291;
}

.vjs-valentino .vjs-remaining-time {
    order: 1;
    line-height: 50px;
    flex: 3;
    text-align: left
}

.vjs-valentino .vjs-play-control {
    order: 2;
    flex: 8;
    font-size: 1.75em
}

.vjs-valentino .vjs-fullscreen-control,
.vjs-valentino .vjs-picture-in-picture-control,
.vjs-valentino .vjs-volume-panel {
    order: 3;
    flex: 1
}

.vjs-valentino .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
    height: 100%
}

.vjs-valentino .vjs-mute-control {
    display: none
}

.vjs-valentino .vjs-volume-panel {
    margin-left: .5em;
    margin-right: .5em;
    padding-top: 1.5em
}

.vjs-valentino .vjs-volume-bar.vjs-slider-horizontal,
.vjs-valentino .vjs-volume-panel,
.vjs-valentino .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-valentino .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vjs-valentino .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.vjs-valentino .vjs-volume-panel:hover,
.vjs-valentino .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
    width: 3em
}

.vjs-valentino .vjs-volume-level:before {
    font-size: 1em
}

.vjs-valentino .vjs-volume-panel .vjs-volume-control {
    opacity: 1;
    width: 100%;
    height: 100%
}

.vjs-valentino .vjs-volume-bar {
    background-color: transparent;
    margin: 0
}

.vjs-valentino .vjs-slider-horizontal .vjs-volume-level {
    height: 100%
}

.vjs-valentino .vjs-volume-bar.vjs-slider-horizontal {
    margin-top: 0;
    margin-bottom: 0;
    height: 100%
}

.vjs-valentino .vjs-volume-bar:before {
    content: "";
    z-index: 0;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-color: transparent transparent hsla(0, 0%, 100%, .25);
    border-style: solid;
    border-width: 0 0 1.75em 3em
}

.vjs-valentino .vjs-volume-level {
    overflow: hidden;
    background-color: transparent
}

.vjs-valentino .vjs-volume-level:before {
    content: "";
    z-index: 1;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 3em solid transparent;
    border-bottom: 1.75em solid #F27898;
    border-right: 0 solid transparent;
    border-top: 0 solid transparent
}

.vjs-valentino .vjs-big-play-button{width:88px;height:88px;background-color: hsla(0, 0%, 100%, .0);background-repeat:no-repeat;background-position:50%;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%23000f'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 0 1-3.604.194 3.492 3.492 0 0 1-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 0 1 3.604.194l20.433 13.843a3.497 3.497 0 0 1 .001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 0 0-.276-.09.51.51 0 0 0-.239.062.483.483 0 0 0-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0 0 58.6 44a.49.49 0 0 0-.22-.413z'/%3E%3C/svg%3E");border:none;top:50%;left:50%;margin-top:-44px;margin-left:-44px;color: hsla(0, 0%, 100%, .0)}
.vjs-big-play-button .vjs-icon-placeholder{display:none}
.vjs-button>.vjs-icon-placeholder:before{line-height:1.55}

.vjs-valentino .vjs-big-play-button:hover{width:88px;height:88px;background-color: hsla(0, 0%, 100%, .0);background-repeat:no-repeat;background-position:50%;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%23909291'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 0 1-3.604.194 3.492 3.492 0 0 1-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 0 1 3.604.194l20.433 13.843a3.497 3.497 0 0 1 .001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 0 0-.276-.09.51.51 0 0 0-.239.062.483.483 0 0 0-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0 0 58.6 44a.49.49 0 0 0-.22-.413z'/%3E%3C/svg%3E");border:none;top:50%;left:50%;margin-top:-44px;margin-left:-44px;color: hsla(0, 0%, 100%, .0)}
.vjs-big-play-button .vjs-icon-placeholder{display:none} .vjs-button>.vjs-icon-placeholder:before{line-height:1.55}


.current {color:#909291 !important; background-image: url(../images/check.png);
         background-repeat: no-repeat !important; background-size: 15px 15px !important; background-position: 0px 10px; background-color: none !important;text-decoration: underline;text-decoration-color:#909291 ;}}
.current a {color:#909291 !important;}

/***** Sidebar *****/

.sidebar {
	width: 320px; height: 100vh; position: fixed; top: 0; left: -325px; z-index: 999; 
	background: #333; color: #fff; transition: all .3s; box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.5);
	text-align: left;font-family:'Sackers';
}



.sidebar.active { left: 0; }

.dismiss {
	width: 35px; height: 35px; position: absolute; top: 20px; right: 0px; transition: all .3s; 
	background: #000; text-align: center; line-height: 38px; cursor: pointer;
}

.dismiss:hover, .dismiss:focus { background: #555; color: #fff; }

.sidebar .logosidebar { padding: 40px 20px;  transition: all .3s; }

.sidebar h3 {margin: 0;margin-top:20px; padding: 40px;padding-bottom:0;padding-top:0;font-family:'Sackers';font-weight:800;}

.sidebar .logosidebar a {
	display: inline-block;
	width: 200px;
	height: 100px;
    margin-left:33%;
	border: 0;
	text-indent: -999999px;
}

.sidebar .logoluxe  {
	display: inline-block;
    padding-top:20px;
	width: 100%;

	border: 0;
	text-indent: -999999px;
}

.sidebar ul.menu-elements { padding: 10px 0;transition: all .3s; color:#909291;}

.sidebar ul li a {
	display: block; padding: 10px 20px;
	border: 0; color: #fff;
    font-family:'Sackers';
    font-size: 12px;text-transform: uppercase; 
}
.sidebar ul li a:hover,
.sidebar ul li a:focus,
.sidebar ul li.active > a:hover,
.sidebar ul li.active > a:focus { outline: 0; background: #555; color: #fff; }

.sidebar ul li a i { margin-right: 5px; }

.sidebar ul li.active > a, a[aria-expanded="true"] {
	background: #fff;
	color: #fff;
}

.sidebar ul ul a { padding-left: 30px; font-size: 12px;font-weight:800; }

.sidebar ul ul li.active > a { background: none; }

.sidebar a[data-toggle="collapse"] {
    position: relative;
}


.sidebar .dropdown-toggle {cursor: pointer;}

.sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.sidebar .to-top { padding: 20px; text-align: center; }

.sidebar .dark-light-buttons { padding: 10px 20px 30px 20px; text-align: center; }

/* sidebar light */

.sidebar.light { background: #000; color: #909291; }

.sidebar.light .dismiss { background: #000; color: #909291; border-radius: 100px; }

.sidebar.light .dismiss:hover, 
.sidebar.light .dismiss:focus { background: #222; color: #909291; }

.sidebar.light .logosidebar { border-color: #eee; }
.sidebar.light .logosidebar a { background-image: url(../images/logo-dark.png); }

.sidebar.light ul.menu-elements { border-color: #eee; }

.sidebar.light ul li { line-height: 14px;}

.sidebar.light ul li a { color: inherit; background:none; }

.sidebar.light ul li a:hover,
.sidebar.light ul li a:focus,
.sidebar.light ul li.active > a:hover,
.sidebar.light ul li.active > a:focus { background: #f4f4f4; color: #909291; }

.sidebar.light ul li.active > a, .sidebar.light a[aria-expanded="true"] {
	color: #909291 ;
}

.sidebar.light ul ul li  {  
    color: #909291;}


.sidebar.light ul ul li a {  

 background-image: url(../images/nocheck.png);
         background-repeat: no-repeat !important; background-size: 15px 15px !important; background-position: 0px 10px; background-color: none !important;}



.sidebar.light ul ul li.active > a { background: none; }

.scroll-link {cursor: pointer;}

/***** Dark overlay *****/



/***** Content *****/


.open-menu { position: fixed; top: 20px; left: 10px; z-index: 1; box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.2); font-family: 'Sackers';background-color: #222;  }

.open-menu.btn-customized,
.open-menu.btn-customized:hover, 
.open-menu.btn-customized:active, 
.open-menu.btn-customized:focus, 
.open-menu.btn-customized:active:focus, 
.open-menu.btn-customized.active:focus,
.open-menu.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active,
.open-menu.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}


.list-unstyled {padding-left:20px;color:#909291;}


.far {padding-right: 10px;}



.sidebar .logoluxe {
    	background-image: url(../images/luxe.png) !important; background-repeat: no-repeat !important; background-size: 156px 38px !important;
    }
    
    
       .progress {
        
    	background-repeat: no-repeat !important; background-size: 30px !important;background-position: -10px 30px 0 0; background-color:#fff;
         height:30px;width:30px;display: inline-block;margin-bottom: -10px; margin-left:-10px; margin-right:7px; 
           
    }
    
    
 

    
     .progressA1 {
    	background-image: url(); 
    }
     .progressA2 {
    	background-image: url(); 
    }
     .progressA3 {
    	background-image: url(); 
    }
     .progressA4 {
    	background-image: url(); 
    }
     .progressA5 {
    	background-image: url(); 
    }
     .progressB1 {
    	background-image: url(); 
    }
      .progressB2 {
    	background-image: url(); 
    }
     .progressB3 {
    	background-image: url(); 
    }
     .progressB4 {
    	background-image: url(); 
    }
     .progressB5 {
        	background-image: url(); 
    }	
      .progressC1 {
    	background-image: url(); 
    }
    
          .progressC2 {
    	background-image: url(); 
    }
     .progressC3 {
    	background-image: url(); 
    }
     .progressC4 {
    	background-image: url(); 
    }
     .progressC5 {
        	background-image: url(); 
    }


.sidebar .logoluxe {
    	background-image: url(../images/luxe.png) !important; background-repeat: no-repeat !important; background-size: 78px 19px  !important;
    }
    
    


   .btn-able
        {

        color: #fff !important;
   background-image: url(../images/check.png);
         background-repeat: no-repeat !important; background-size: 15px 15px !important; background-position: 0px 10px; background-color: none !important;

        }



       .progress {
        
    	background-repeat: no-repeat !important; background-size: 30px !important;background-position: -10px 30px 0 0; background-color:#fff;
         height:30px;width:30px;display: inline-block;margin-bottom: -10px; margin-left:-10px; margin-right:7px; 
           
    }
    
     
     .progressA1 {
    	background-image: url(../images/progressA-1.png); 
    }
     .progressA2 {
    	background-image: url(../images/progressA-2.png); 
    }
     .progressA3 {
    	background-image: url(../images/progressA-3.png); 
    }
     .progressA4 {
    	background-image: url(../images/progressA-4.png); 
    }
     .progressA5 {
    	background-image: url(../images/progressA-5.png); 
    }
     .progressB1 {
    	background-image: url(../images/progressB-1.png); 
    }
      .progressB2 {
    	background-image: url(../images/progressB-2.png); 
    }
     .progressB3 {
    	background-image: url(../images/progressB-3.png); 
    }
     .progressB4 {
    	background-image: url(../images/progressB-4.png); 
    }
     .progressB5 {
        	background-image: url(../images/progressB-5.png); 
    }	
      .progressC1 {
    	background-image: url(../images/progressC-1.png); 
    }
    
          .progressC2 {
    	background-image: url(../images/progressC-2.png); 
    }
     .progressC3 {
    	background-image: url(../images/progressC-3.png); 
    }
     .progressC4 {
    	background-image: url(../images/progressC-4.png); 
    }
     .progressC5 {
        	background-image: url(../images/progressC-5.png); 
    }

.sidebar.light .logosidebar {margin-left:-25px;}
    .sidebar.light .logosidebar a {
	background-image: url(../images/logo-dark.png) !important; background-repeat: no-repeat !important; background-size: 100px 100px !important;
    }
	
/* Retina-ize images/icons */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	
	/* logo */
    .sidebar .logosidebar a {
    	background-image: url(../images/logo-dark@2x.png) !important; background-repeat: no-repeat !important; background-size: 100px 100px !important;
    }
    
       
    
    
    
    .sidebar.light .logosidebar a {
	background-image: url(../images/logo-dark@2x.png) !important; background-repeat: no-repeat !important; background-size: 100px 100px !important;
    }
	
}

  
#container {
  width: 500px;
  margin: auto !important;
  display: block;
  height: 100vh;
  position: relative;
  list-style-type: none;
     cursor: hand;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#container2 {
  width: 500px;
    background: #000;
  margin: auto !important;
  display: block;
  height: 100vh;
  position: relative;
	display: flex;
	flex-direction:row;
    	justify-content: center;
	align-items:center;
        text-shadow: none;
}

.greeting {
      width: 100%;
	padding-top: 0px;
margin: auto !important;
	justify-content: center;
	align-items:center;
	z-index: 1;
    text-align: center;
}

.greeting h3 {padding-bottom:0;}

.greeting p {font-size: 20px; color:#fff;}


.buddy {
  display: none;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  color: #fff;
  width: 100%;
    max-width: 500px;
  height: calc(100% - 100px);
max-height: 800px;
  margin-top: 50px;
    margin-bottom: 50px;
  position: absolute;
  cursor: hand;
}
.rotate-left {
  transform: rotate(30deg) scale(0.8);
  transition: 1s;
  margin-left: 400px;
  cursor: e-resize;
  opacity: 0;
  z-index: 10;
}
.rotate-right {
  transform: rotate(-30deg) scale(0.8);
  transition: 1s;
  opacity: 0;
  margin-left: -400px;
  cursor: w-resize;
  z-index: 10;
}
.avatar {
  background: #222;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  display: block;
  margin:20px;
  background-size: cover;
  background-position: center;
 background-repeat: no-repeat;
   
}

.ui-page-active {background-color: #fff; background-repeat: repeat;
 
        background-image: url('../images/back.png') }
.nodisp {display:none !important;}
.status {  position: absolute; top:0;bottom:0}

.like {
  top: calc(50% - 75px);
  left: calc(50% - 75px);
}
.dislike {
  top: calc(50% - 75px);
  left: calc(50% - 75px);
}

.greenish {background: #909291 !important;}
.reddish {background: #FF0000 !important;}

    @media screen and (max-width:780px)
    {
#container {
  width: 300px;
 
}

#container2 {
  width: 300px;
  
}



.buddy {
     max-width: 300px;
 
}}