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

         @font-face {
    font-family: 'Sackers';
    src: url('SackersGothicStd-Heavy.eot');
    src: url('SackersGothicStd-Heavy.eot?#iefix') format('embedded-opentype'),
        url('SackersGothicStd-Heavy.woff') format('woff'),
        url('..SackersGothicStd-Heavy.svg#SackersGothicStd-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
}



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:#fff;}

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;

}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Sackers';
    font-weight: normal;
    margin:0;
    padding:0;
    color:#000;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

/* Custom CSS
 * --------------------------------------- */
body{
	font-family: 'Din', Arial, sans-serif;
    font-weight:300;
	color: #f2f2f2;
opacity:0;
}
h1{
	font-size: 8em;
}
p{
	font-size: 0.7em;
}
.section{
	text-align: center;
}

  #menu{
	position:fixed;
	top:0;
	left:50%;
	height: 50px;
	z-index: 70;
	width: 50%;text-align:right;
	padding-top: 10px;
    padding-right:5px;
	margin:0;
}
 .petittexte {color:#000 ; padding: 0; font-size:14px !important;font-weight:300;}

.anime{
    margin-top:25px;

    background: linear-gradient(270deg, #edbce4, #91dbed, #ffffff);
    background-size: 600% 600%;
    
     -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    -o-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;  
 
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.anime:after {       background-image: url('images/down-arrow.svg') 96% / 15% no-repeat #222;
    background-size: 20px;}

.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;}


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



.carousel-inner {
height: auto;
}

.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; }

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

.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 {
            background-color:#E90649;padding:0px !important;}
       
        #section10 {
            background-image: url('imgs/RED.jpg');background-image: url('../imgs/RED.jpg'); background-origin: content-box;background-size:cover;}
       
       
            
        	#section1{
		background-size: cover;
	}
        
#fp-nav {display:none;}
        
       .fp-slidesNav {display:none;}

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



        h3 {font-family:'Sackers';text-transform: uppercase;line-height:16px;padding-top:0px;letter-spacing: 0.05em;color:#000;}
        .bloc {margin-left:0;}
        .texte {color:#000 ; padding: 0; font-size:19px !important;font-weight:300;}
         .texte2 {color:#fff !important;font-size:19px !important;font-weight:300;background-color:#000; padding: 20px !important;z-index:1;}
        .culdebouteille {width:100%;margin-left:0px;padding-top:10px;}
          .culdebouteille2 {width:150%;margin-left:-80px;padding-top:150px;z-index:10000;}
        .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(../imgs/quote2.png);
    background-size: 45px 44px;
    display: block;
  left:20px;
    height:44px;
    width:44px;
    content:"";
 }



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

.blockquote3::after{ 
  background-image: url(../imgs/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:#E90649}
        
        .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}

            
        @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:#E90649; 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;}
        
        .plushaut {margin-top:0px;}
    .py-2 {margin-top:-20px;margin-bottom:100px;}
}
        
        
          @media screen and (max-width: 899px)
          {
              .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)
{
    
    
    
    .paddy{padding: 40px;}
      .bloc {margin-left:0px}
        .texte { color:#000 !important; background-color:none !important; padding: 50px 0 !important;}
     .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;}
        
.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-left:10%;margin-right:10%;width:80%;bottom:20px; text-align: center;z-index:1000000;}

 .patlink { display:inline-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-family:'Din';text-transform:none;font-weight:300;width:300px;}

   

        .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-family:'Din';text-transform:none;font-weight:300;}

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

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

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

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


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



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



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


@media screen and (max-width: 800px) {  .patdiv { margin-left:5%;margin-right:5%;margin-top:50px; text-align: center;} .pat{}
    titre {font-size:60px;}
    .edito {max-width:80% !important;margin-left:10%;}
h3 {font-size:16px !important;line-height:16px;letter-spacing:0.05;}
   

}

.slide {overflow-y: hidden;}