/* Styles applied according to each viewport */

/* Small and extra-small devices */
@media(max-width:767px){
    /* Ensure correct display on mobile devices */
	html, body{
	    max-width: 100%;
	    overflow: hidden; 
	}
	.header4{
		font-size: 1rem;
	}
	.medio-y-abajo{
		position: absolute;
		top: 90%;
		left: 35%;
	}
	.header1{
		font-size: 1.8em;
	}
	.header5{
		font-size: 1.5em;
		display: inline-block;
	}
	.header7{
		font-size: 1.2em;
	}
	.header8{
		font-size: 3.5em;
	}	
	.sequencer img{
		width: 3.5vh;
		height: 3.5vh;
		margin: 0.25vh;
	}
	.sequencer label span {
		width: 3.5vh;
		height: 3.5vh;
		margin: 0.25vh;
	}
	.div-adentro{
		position: absolute;
		left: 35%;
		top: 50%;
	}
	.margen-top-0{  
		margin-top: 10vh; 
	}
	.margen-top-1{
		margin-top: 50vh;
	}
	.margen-top-2{
		margin-top: 25vh;
	}
	.margen-top-2-1{
		margin-top: 0vh;
	}
	.margen-top-3{
		margin-top: 25vh;
	}
	.margen-top-4{
		margin-top: 40vh;
	}
}

/* Medium devices */
@media(min-width:768px){	
	html, body{		
		overflow: hidden;
	}
	.medio-y-abajo{
		position: absolute;
		top: 95%;
		left: 46%; 
	}	
	.header1{
		color: #fff1ce;  
		font-size: 2.5em;  
	}
	.header5{
		font-size: 2.125em;
	}
	.header7{
		font-size: 1.2em;
	}
	.header8{
		font-size: 5em;
	}
	.sequencer img{
		width: 4vh;
		height: 4vh;
		margin: 0.25vh;
	}
	.sequencer label span {
		width: 4vh;
		height: 4vh;
		margin: 0.25vh;
	}
	.div-adentro{
		position:absolute;
		top:50%;
		left:190px; 
	}	
	.margen-top-0{
		 margin-top:5%; 
	}
	.margen-top-1{
		margin-top: 30vh;
	}
	.margen-top-2{  
		margin-top: 30vh; 
	}
	.margen-top-2-1{  
		margin-top: 40vh; 
	}
	.margen-top-3{
		margin-top: 30vh;
	}
	.margen-top-4{
		margin-top: 40vh;
	}	
}

/* Large devices */
@media(min-width:992px){	
	.header1{
		color: #fff1ce;
    font-size: 2.4em;
    font-weight: bold;
    padding: 7% 0; 
	}	
}

/* Extra large devices */
@media(min-width:1200px){

}