body{
    background-color: black;
    margin:0;
    overflow: hidden;
    float: center;
}

@supports (-ms-ime-align:auto) OR (-webkit-ime-align:auto) {

.vermelho{
  z-index: 999;
  height:33vh;
  width:100vw;
  background:white;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
  	
	margin: auto;

  -webkit-backdrop-filter: invert();
backdrop-filter: invert();
  opacity:0.01;
}
}

.pag{
  z-index: 9;
  background: red;
  height:100%;
  margin-left:1.48571428571vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.n , .o , .c , .i , .v{
	display:inline-block;
	height: 100vh;
  width: 14.2857142857vw;
  margin: 0 0 0 1.68571428571vw;
}


.n{
  animation: n 1s steps(5) infinite;
  background: url(n.png); 
  background-size: 100%;
}

.n:hover{
    background: url(n.png);
    background-size: 100%;

}

@keyframes n {  
  from {background-position: 0 0%; } 
  to {background-position: 0 100%; } 
}




.o{
  animation: o 1s steps(5) infinite;
  background: url(n.png); 
  background-size: 100%;
}

.o:hover{
    background: url(o.png);
    background-size: 100%;
}

@keyframes o {  
  from {background-position: 0 0%; } 
  to {background-position: 0 100%; } 
}





.c{
  animation: c 1s steps(5) infinite;
  background: url(n.png); 
  background-size: 100%;
}

.c:hover{
    background: url(c.png);
    background-size: 100%;
}

@keyframes c {  
  from {background-position: 0 0%; } 
  to {background-position: 0 100%; } 
}





.i{
  animation: i 1s steps(5) infinite;
  background: url(n.png); 
  background-size: 100%;
}

.i:hover{
    background: url(i.png);
    background-size: 100%;
}

@keyframes i {  
  from {background-position: 0 0%; } 
  to {background-position: 0 100%; } 
}





.v{
  animation: v 1s steps(5) infinite;
  background: url(n.png); 
  background-size: 100%;
}

.v:hover{
    background: url(v.png);
    background-size: 100%;
}
 
@keyframes v {  
  from {background-position: 0 0%; } 
  to {background-position: 0 100%; } 
}



@media screen and (min-width: 1200px){
  @keyframes n{
    from {background-position: 0 0%; } 
  to {background-position: 0 90%; } 
  }
  @keyframes o{
    from {background-position: 0 0%; } 
  to {background-position: 0 90%; } 
  }
  @keyframes c{
    from {background-position: 0 0%; } 
  to {background-position: 0 90%; } 
  }
  @keyframes i{
    from {background-position: 0 0%; } 
  to {background-position: 0 90%; } 
  }
  @keyframes v{
    from {background-position: 0 0%; } 
  to {background-position: 0 90%; } 
  }
}

@media screen and (min-width: 800px) and (max-width:1199px){
  @keyframes n{
    from {background-position: 0 0%; } 
  to {background-position: 0 200%; } 
  }
  @keyframes o{
    from {background-position: 0 0%; } 
  to {background-position: 0 200%; } 
  }
  @keyframes c{
    from {background-position: 0 0%; } 
  to {background-position: 0 200%; } 
  }
  @keyframes i{
    from {background-position: 0 0%; } 
  to {background-position: 0 200%; } 
  }
  @keyframes v{
    from {background-position: 0 0%; } 
  to {background-position: 0 200%; } 
  }
}

@media screen and (min-width: 500px) and (max-width: 799px){
  @keyframes n{
    from {background-position: 0 0%; } 
  to {background-position: 0 500%; } 
  }
  @keyframes o{
    from {background-position: 0 0%; } 
  to {background-position: 0 500%; } 
  }
  @keyframes c{
    from {background-position: 0 0%; } 
  to {background-position: 0 500%; } 
  }
  @keyframes i{
    from {background-position: 0 0%; } 
  to {background-position: 0 500%; } 
  }
  @keyframes v{
    from {background-position: 0 0%; } 
  to {background-position: 0 500%; } 
  }
}

@media screen and (max-width: 499px){
  @keyframes n{
    from {background-position: 0 0%; } 
  to {background-position: 0 160%; } 
  }
  @keyframes o{
    from {background-position: 0 0%; } 
  to {background-position: 0 160%; } 
  }
  @keyframes c{
    from {background-position: 0 0%; } 
  to {background-position: 0 160%; } 
  }
  @keyframes i{
    from {background-position: 0 0%; } 
  to {background-position: 0 160%; } 
  }
  @keyframes v{
    from {background-position: 0 0%; } 
  to {background-position: 0 160%; } 
  }

  .n , .o , .c , .i , .v{
    display:inline-block;
    height: 100vh;
    width: 14.1857142857vw;
    margin: 0 0 0 1.20571428571vw;
  }
}