@charset "utf-8";
/* CSS Document */

#slider{background:#;height:auto;width:100%;margin:40px auto 0;overflow:visible;position:relative;}
#mascara{overflow:hidden;height:32vh;}
#slider ul{margin:0;padding:0;position:relative;}
#slider li{width:100%;height:32vh;position:absolute;top:-32vh;list-style:none;}
#slider li > img{width:100%;}

/*===========================================================================*/

/*Responsivo para Mobile até 480px*/
@media screen and (max-width: 480px){
/*#slider{background:#;height:auto;width:100%;margin:40px auto 0;overflow:visible;position:relative;}*/
#mascara{height:16vh;}
/*#slider ul{margin:0;padding:0;position:relative;}*/
#slider li{height:16vh;top:-16vh;}
/*#slider li > img{width:100%;}*/
}

/*Responsivo para Mobile até 600px*/
@media screen and (min-width: 481px) and (max-width: 600px)
{
/*#slider{background:#;height:auto;width:100%;margin:40px auto 0;overflow:visible;position:relative;}*/
#mascara{height:22vh;}
/*#slider ul{margin:0;padding:0;position:relative;}*/
#slider li{height:22vh;top:-22vh;}
/*#slider li > img{width:100%;}*/
}

/*Responsivo para Mobile até 992px (tablets)*/
@media screen and (min-width: 601px) and (max-width: 992px)
{
/*#slider{background:#;height:auto;width:100%;margin:40px auto 0;overflow:visible;position:relative;}*/
#mascara{height:24vh;}
/*#slider ul{margin:0;padding:0;position:relative;}*/
#slider li{height:24vh;top:-24vh;}
/*#slider li > img{width:100%;}*/
}

/* Desktop grande */
@media screen and (min-width: 993px) and (max-width: 1399px){
/*#slider{background:#;height:auto;width:100%;margin:40px auto 0;overflow:visible;position:relative;}*/
#mascara{height:28vh;}
/*#slider ul{margin:0;padding:0;position:relative;}*/
#slider li{height:28vh;top:-28vh;}
/*#slider li > img{width:100%;}*/
}
/*============================================================================*/

#slider li.primeira-anima {
   animation: cycle 25s linear infinite;
   -moz-animation: cycle 25s linear infinite;
   -webkit-animation: cycle 25s linear infinite;
   -ms-animation: cycle 25s linear infinite;
   -o-animation: cycle 25s linear infinite;		
}

#slider li.segunda-anima {
   animation: cycletwo 25s linear infinite;	
   -moz-animation: cycletwo 25s linear infinite;
   -webkit-animation: cycletwo 25s linear infinite;
   -ms-animation: cycletwo 25s linear infinite;
   -o-animation: cycletwo 25s linear infinite;	
}

#slider li.terceira-anima {
   animation: cyclethree 25s linear infinite;
    -moz-animation: cyclethree 25s linear infinite;
   -webkit-animation: cyclethree 25s linear infinite;
   -ms-animation: cyclethree 25s linear infinite;
   -o-animation: cyclethree 25s linear infinite;			
}

#slider li.quarta-anima {
   animation: cyclefour 25s linear infinite;
   -moz-animation: cyclefour 25s linear infinite;
   -webkit-animation: cyclefour 25s linear infinite;
   -ms-animation: cyclefour 25s linear infinite;
   -o-animation: cyclefour 25s linear infinite;		
}

#slider li.quinta-anima {
   animation: cyclefive 25s linear infinite;
   -moz-animation: cyclefive 25s linear infinite;
   -webkit-animation: cyclefive 25s linear infinite;
   -ms-animation: cyclefive 25s linear infinite;
   -o-animation: cyclefive 25s linear infinite;			
}

@keyframes cycle {
   0%  { top: 0px; }
   4%  { top: 0px; }
   16% { top: 0px; opacity:1; z-index:0; }
   20% { top: 325px; opacity: 0; z-index: 0; }
   21% { top: -325px; opacity: 0; z-index: -1; }
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; }
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; }
   16% { top: -325px; opacity: 0; }
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }
   36% { top: 0px; opacity: 1; z-index: 0; }
   40% { top: 325px; opacity: 0; z-index: 0; }
   41% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; } 
   56% { top: 0px; opacity: 1; } 
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; } 
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}



@-moz-keyframes cycle {
   0%  { top: 0px; }
   4%  { top: 0px; }
   16% { top: 0px; opacity:1; z-index:0; }
   20% { top: 325px; opacity: 0; z-index: 0; }
   21% { top: -325px; opacity: 0; z-index: -1; }
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; }
   100%{ top: 0px; opacity: 1; }
}

@-moz-keyframes cycletwo {
   0%  { top: -325px; opacity: 0; }
   16% { top: -325px; opacity: 0; }
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }
   36% { top: 0px; opacity: 1; z-index: 0; }
   40% { top: 325px; opacity: 0; z-index: 0; }
   41% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; } 
   56% { top: 0px; opacity: 1; } 
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; } 
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}

/*@-webkit-keyframes cycle {
   0%  { top: 0px; }
   4%  { top: 0px; }
   16% { top: 0px; opacity:1; z-index:0; }
   20% { top: 325px; opacity: 0; z-index: 0; }
   21% { top: -325px; opacity: 0; z-index: -1; }
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; }
   100%{ top: 0px; opacity: 1; }
}

@-webkit-keyframes cycletwo {
   0%  { top: -325px; opacity: 0; }
   16% { top: -325px; opacity: 0; }
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }
   36% { top: 0px; opacity: 1; z-index: 0; }
   40% { top: 325px; opacity: 0; z-index: 0; }
   41% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; } 
   56% { top: 0px; opacity: 1; } 
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; } 
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}*/

@-webkit-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; }
	50% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-webkit-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; } 
	36% { top:0px; opacity:1; z-index:0; } 
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }  
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; } 
	56% { top:0px; opacity:1; z-index:0; } 
	60% { top:325px; opacity:0; z-index:0; } 
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}
@-ms-keyframes cycle {
   0%  { top: 0px; }
   4%  { top: 0px; }
   16% { top: 0px; opacity:1; z-index:0; }
   20% { top: 325px; opacity: 0; z-index: 0; }
   21% { top: -325px; opacity: 0; z-index: -1; }
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; }
   100%{ top: 0px; opacity: 1; }
}

@-ms-keyframes cycletwo {
   0%  { top: -325px; opacity: 0; }
   16% { top: -325px; opacity: 0; }
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }
   36% { top: 0px; opacity: 1; z-index: 0; }
   40% { top: 325px; opacity: 0; z-index: 0; }
   41% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-ms-keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; } 
   56% { top: 0px; opacity: 1; } 
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; } 
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-ms-keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-ms-keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}


@-o-keyframes cycle {
   0%  { top: 0px; }
   4%  { top: 0px; }
   16% { top: 0px; opacity:1; z-index:0; }
   20% { top: 325px; opacity: 0; z-index: 0; }
   21% { top: -325px; opacity: 0; z-index: -1; }
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; }
   100%{ top: 0px; opacity: 1; }
}

@-o-keyframes cycletwo {
   0%  { top: -325px; opacity: 0; }
   16% { top: -325px; opacity: 0; }
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }
   36% { top: 0px; opacity: 1; z-index: 0; }
   40% { top: 325px; opacity: 0; z-index: 0; }
   41% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; } 
   56% { top: 0px; opacity: 1; } 
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; } 
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-o-keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}
.barra-progresso{position:relative;top:-5px;width:100%;height:5px;background:#000;animation:fullexpand 25s ease-out infinite;}

@keyframes fullexpand {
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-moz-keyframes fullexpand {
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}



@-ms-keyframes fullexpand {
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-o-keyframes fullexpand {
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider:hover li,
#slider:hover .barra-progresso
{
   animation-play-state: paused;
}