*{
	box-sizing: border-box;
}
body{
	background-image: url(fondo.jpg);
	background-attachment: fixed; 
}
.intro-video{
	display: flex;
	justify-content: center;
	padding: 10px;
}
#video{
	
	border: 2px solid #000;
	box-shadow: 1px 10px 55px 0px rgba(2, 1, 0);
	width: 400px;
}

h1{
	text-align: center;
	font-size: 30px;
	color: #fff;
	text-shadow: 2px 3px #000, -1px -1px #0000ff;
}

ul{
	list-style:square inside url("star_2.png");

}

li:before{
	content: "\00a0 ";	
}

a{
	text-decoration: none; 
	color: #ff0000;
	text-shadow: 1px 2px #000, 0px -1px #fff;
	font-family: arial;
	font-size: 20px;
}

li a:hover{color: #0000ff;}

li{
	line-height: 1.9;
	text-align: left;
}

 .active a{color: #0000ff;} 

 #playlist {
	background-color: transparent;
	overflow-y: scroll;
	width: 400px;
	max-height: 250px;
	margin: auto;
 	margin-top: 20px;
 	text-align: center;    	 
}

 .primera, .segunda{
 	text-align: ;
 }
 .segunda{
 	/*margin-top: 55px;*/
 	margin-bottom: 0px;	
 }
 
 .volver{
 	display:block;
    margin:auto;
 }

 /*----- media queries ------*/
/* Large desktop */
@media (min-width: 1200px) {
	
}
/* Default landscape and desktop to large desktop */
@media (max-width: 1199px) {
	
}
@media (min-width: 980px) and (max-width: 1199px) {
	
	
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {	
	
}
@media (min-width: 768px) and (max-width: 979px) {
	
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {	
	
		
}
@media (min-width: 320px) and (max-width: 480px) {
  
   #video{
   	width: 99%;
   	margin: auto;   	   	
   }
   #playlist{
   	width: 99%;
   	margin-left: -10px;
   }
}
/* Landscape phones and down */
@media (max-width: 480px){

}