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

a{
	text-decoration:none;
    color:#222;
}
a:hover{
	text-decoration:none;
    color:#ccc;
}
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,h7 {
    font-family: 'Sackers';
    font-weight: normal;
    margin:0;
    padding:0;
    color:#222;

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

/* Custom CSS
 * --------------------------------------- */
body{
	font-family: 'Miller', serif;
    font-weight:300;
	color: #222;
opacity:0;
}
h1{
	font-size: 5em;
}
p{
	font-size: 0.9em;
}
.section{
	text-align: center;
}



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

h1{
	font-size: 4em;
text-align: left; padding:20px; padding-left: calc(50vw - 75px); line-height: 90%;}
}
.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';letter-spacing: 0.1em;
margin-top:50px;padding-bottom:50px;font-family:20px;}


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

.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
	* --------------------------------------- */
.btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0 !important;
        background-color: #ffffff;

        }

  #close{
	position:fixed;
	top:0;
	left:60px;
      width:50px;
	height: 50px;
	z-index: 70;
	text-align:right;
	padding-top: 10px;
    padding-right:5px;
	margin:0;
}
 
  #titre{
	position:fixed;
	top:0;
	left:0;
 background-color: #fff;
      width:100%;
	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';line-height:22px;padding-top:0px;letter-spacing: 0.1em;}
        .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;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(../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:#F27898}
        
        .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=mpppp))p));color:#fff;text-transform:uppercase;border-bottom:0;letter-spacing: 0.1em}
            
        @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:#F27898; 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;}
}
       

.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;}
        
.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: 0; width:100vw;bottom:40px; text-align: center;}

.legendetexte {position:absolute; top:40%; left: 0; width:100vw;text-align: center;}
.legendetexte h2 {color:#222;}

.legendetexte2 {position:absolute; top:40%; left: 0; width:100vw;text-align: center;}
.legendetexte2 h2 {color:#222;}

.bottom p {color:#222 !important;margin-bottom:25px;padding:0;}

.bottom span:hover {color:#fff !important;}

 .bottom2 {position:absolute; margin:0; left: calc(50% - 150px); width:300px;top: calc(50% - 170px); text-align: center;}

.onhover {display:block;width:100vw;height:100vh;background-color: rgba(255,255,255,0.5) !important}

.cache {display:none;}
.hide { visibility: hidden;
  opacity: 0;
  transition: all 1s ease-in; }
.reveal {visibility: visible;
  opacity: 1;
  transition: all 1s ease-in;}

 

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


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



.btn {  -webkit-border-radius: O; -moz-border-radius:0; border-radius:0; border: 1px solid #222;margin: 0 5px 0 5px; height:35px;padding:10px; }


.fp-tableCell {margin:-20px;}
.ecran1 {   
    top: 0;
    left: 0;z-index: -10;}

.ecran1:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;

background-image: url('../images/1.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}



.ecran2 {   
    top: 0;
    left: 0;}

.ecran2:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/2.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}


.ecran3 {   
    top: 0;
    left: 0;}

.ecran3:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/3.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}


.ecran4 {   
    top: 0;
    left: 0;}

.ecran4:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/4.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}



.ecran5 {   
    top: 0;
    left: 0;}

.ecran5:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/5.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}




.ecran6 {   
    top: 0;
    left: 0;}

.ecran6:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/6.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}




.ecran7 {   
    top: 0;
    left: 0;}

.ecran7:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/0.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}



.ecran8 {   
    top: 0;
    left: 0;}

.ecran8:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/8b.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}



.ecran9 {   
    top: 0;
    left: 0;}

.ecran9:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/8.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}



.ecran10 {   
    top: 0;
    left: 0}

.ecran10:before
{
    content: "";
    position: absolute;
width: calc(100vw - 40px);
    height: calc(100vh - 40px);
   top: 20px;
    left: 20px;
    z-index: -1;
background-image: url('../images/9.jpg'); background-origin: content-box; background-position: top center;background-size:contain;background-repeat: no-repeat;

}





.svg1 {width:30px;margin-top:-40px;}

.svg2 {width:30px;margin-top:-250px;margin-left:-40px}






#play-pause-button{
  font-size: 13px;
  cursor: pointer;
}

.fa {padding-left:10px;}


@media screen and (orientation: portrait) {
    
 /*   .ecran1 {margin:0px;width:100vw;height:100vh;padding:0;}
    
  .ecran1:before {  
      position:absolute;
      left: -15%; top:20px;
width: 130%;
    height: calc(100% - 40px);
      background-size:contain;background-repeat: no-repeat;
background-position: center;
      -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);}
    
    
        .ecran1fond {margin:0px;width:100vw;height:100vh;padding:0;}
    
  .ecran1fond:before {  
      position:absolute;
      left: -15%; top:20px;
width: 130%;
    height: calc(100% - 40px);
      background-size:contain;background-repeat: no-repeat;
background-position: center;
      -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity:0.2;
    
    }
*/
}





        @media screen  and (min-width: 801px) and (max-width: 1200px)
        {
               
            
}

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

.slide {overflow-y: hidden;}




.fullimage {
  /* Location of the image */
position:absolute;     
background-color: none;
 object-fit: cover;
}

.fullbouton {
  /* Location of the image */
position:absolute;
    width:100vw;
        height:100vh; 
    object-fit: cover;
}


/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
 
  }
	}





/* Article headlines */

#more-content {
    position:absolute;
    		  top: 0;
			  left: 0;
    display:none;
    z-index:1000;
margin:auto;
    text-align:center;
  width: 100%;
    height:100%;
    background: rgba(0, 0, 0, 0.8);
}


    .clock{font-family:'Mono';
margin:auto;
			  width:90vw;max-width: 400px;
    z-index:999;
    text-align:center;
        color: #222;
			  font-size: 5em;
        padding:10px;
        cursor: pointer;
        display:block;
        margin-top:0px;
        opacity:1;
       
}
    .clock2{font-family:'Mono';
margin:auto;
			  width:90vw;max-width: 400px;
    z-index:999;
    text-align:center;
        color: #222;
			  font-size: 5em;
        padding:10px;
        cursor: pointer;
        display:block;
        margin-top:0px;
        opacity:1;
       
}
#clic {margin-top:-22px;font-family:'Mono';}

.next {position:absolute;width: 100vw;height: 100vh;cursor: pointer;top:0;left:0;}


#clic span {padding-left: 5px;padding-right: 5px; letter-spacing: 0.2em;font-size: 15px;color: #000;}

#MyClockDisplay  { position:absolute;top:40%;width:200px;left: calc(50% - 200px); opacity:0.1;}

  #MyClockDisplay:hover{
        color: #ccc;
}

@media only screen and (max-width: 767px) {
  .clock {
 font-size: 4em;
       margin-top:-50px;
  }
      .clock2 {
 font-size: 4em;
       margin-top:-50px;
  }
	}

.titre {
     position:absolute;
    		   top: 20px;
			  left: 20px;
     display:block;
    color:#222;
    font-size: 70px;
}

@media only screen and (max-width: 767px) {
    .titre {
 font-size: 70px;
  }
	}

.summary {
   position:absolute;
    		  top: 50%;
			  left: 10px;
			  transform: translateY(-50%);
    width:350px	; 
     display:block;
    color:#fff;
    font-size: 22px;
}

.nextone {
   position:absolute;
    		  bottom: 10px;
			  left: 10px;
		width:350px	;  
     display:block;
    color:#fff;
    font-size: 22px;
}

.nextone small {
  
    font-size: 10px;
    text-transform: uppercase;
}

.info {
     z-index:1001;
   position:fixed;
    		  bottom: 10px;
			  right: 10px;
     display:block;


}



.section.active .legendetexte2 {
   -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
}

.section.active .ecran1, .section.active .ecran3, .section.active .ecran4, .section.active .ecran5, .section.active .ecran6, .section.active .ecran7, .section.active .ecran8, .section.active .ecran9 {
   -webkit-animation: 3s ease 0s normal forwards 1 imagefadein;
    animation: 3s ease 0s normal forwards 1 imagefadein;
}

.section.active .cache {
   -webkit-animation: 5s ease 0s normal forwards 1 cachefadein;
    animation: 5s ease 0s normal forwards 1 cachefadein;
}




@-webkit-keyframes pointDown {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(20px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(20px);
  }
  40% {
    transform: translateY(0);
  }
}
@keyframes pointDown {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(15px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(15px);
  }
  40% {
    transform: translateY(0);
  }
}

@keyframes fadein{
    0% { opacity:1; }
    20% { opacity:1; }
    60% { opacity:1; }
    100% { opacity:0; }
}

@-webkit-keyframes fadein{
     0% { opacity:1; }
    20% { opacity:1; }
    60% { opacity:1; }
    100% { opacity:0; }
}

@keyframes imagefadein{
     0% { opacity:0; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes imagefadein{
     0% { opacity:0; }
    50% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes cachefadein{
     0% { display:none; }
    99% { display:none;  }
    100% { display:block;  }
}