/***************************************************************reset************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,					
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, 
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	list-style: none;
	text-decoration: none;
	}
.clear{
	clear: both;
}
.displaynone{
	display: none;
	}
	.displaysi{
		display: inherit;
		}
header{
	height:50px;
	width:100%;
	background-color:#005ea8;
	position:absolute;

}
html{
	min-width: 416px  !important;
	}
header h1{ 
	height: 55px;
	line-height: 45px;
	font-size: 2em;
    margin-top: 0px;
	float: left;
	width: 100%;
	text-align: center;
	font-size: 27px;
	margin-top: 5px;
	color: rgb(255, 255, 255);
	text-shadow:none !important;
	
}
#content{
width: 100%;
height: 100%;
margin-top:50px;
overflow: hidden;
	min-width: 600px;
	}
	body{
		display: table;
		
		}
body, html{
	width: 100%;
	height: 100%;
	
	}
#video-sample{
	text-align:center;
	overflow:hidden;
	}
video{
	
	display: inline-block;
	position: absolute;
	top: 50px;

	}
/****************************************************/
#reproductor{
	  position:absolute;
	  z-index:5;
	  background-image:url(img/fondo.png);
	  max-height: 100px;
	  height:100px;
	  width: 100%;
	  margin-top:20px;
	  background-repeat:no-repeat
	}
#barra{
	  width: 100%;
	 background-image:url(img/barra.jpg);
	 position:absolute;
	  z-index:1;
	 max-height: 100px;
	  height:52px;
	  width: 100%;
	  margin-top:20px;
	  background-repeat: repeat-x;
	  background-size: contain;
	}
#micro {
    position:absolute; 
    right:230px;
    top:4px;
    cursor:pointer;
}
#nomicro {
    position:absolute;
    right:100px;
    top:4px;
    cursor:pointer;
}

	
.play_class{
	position:absolute;
	top:0;
	left:5px;
	width:99px;
	height:99px;
	background-image:url(img/play.png)
	}


.play_class:hover{
	background-image:url(img/play_hover.png)
	}
	



.pause_class{
	position:absolute;
	top:0;
	left:5px;
	width:99px;
	height:99px;
	background-image:url(img/pause.png)
	}

.pause_class:hover{
	background-image:url(img/pause_hover.png)
	}
	
#stop{
	position:absolute;
	top:0;
	left:91px;
	width:75px;
	height:75px;
	background-image:url(img/stop.png)
	}

#stop:hover{
	background-image:url(img/stop_hover.png)
	}
	

	
#pant_completa{
	position:absolute;
	top:6px;
	right:50px;
	width:35px;
	height:35px;
	background-image:url(img/btn_completa.png)
	}

#pant_completa:hover{
	background-image:url(img/btn_completa_hover.png);
	cursor: pointer; 
	}
	
#logo{
	position:absolute;
	top:6px;
	left: 180px;
	width:34px;
	height:34px;
	background-image:url(img/logo_anaya.png)
	}
#play, #stop{
	cursor: pointer;
}
#slider{
	width:50%;
	position: relative;
	left: 250px;
	
	}
	@media (max-width: 1350px){
		
		#slider{
	width:35%;
	
	}
		}
		@media (max-width: 915px){
		
		.ui-slider-track{
			position: relative;
			left:-80px;
			}
	   #slider-step{
		  display:none;
		}
	
		}
		@media (max-width: 790px){
				
			#logo{
	       display: none !important;
	    }
		  #slider{
	      left:150px;
	     }
			#pant_completa{
				top:10px;
				right:10px;
				width: 30px;
				height: 30px;
				background-repeat: no-repeat;
				background-size: contain;
			}
			
			/*#micro { 
				right:50px;
				top:7px;
				width: 35px;
				height: 35px;
			}
			#micro img{ 
				max-width: 100%;
				max-height: 100%;
			}
			#nomicro {
				right:90px;
				top:7px;
				width: 35px;
				height: 35px;
			}
			#nomicro img{ 
				max-width: 100%;
				max-height: 100%;
			}*/
			
			.play_class {
				top: 5px;
				left: 5px;
				width: 75px;
				height: 75px;
				background-repeat: no-repeat;
				background-size: contain;
			}
			#stop {
				top: 2px;
				left: 70px;
				width: 60px;
				height: 60px;
				background-repeat: no-repeat;
				background-size: contain;
			}
			
			#reproductor{
				background-position: -1px 7px;
				background-size: 750px
			}

		}

		
		
			#barra, #reproductor{
				margin-top: 30px;
			}
				@media (max-height: 900px){
		#barra, #reproductor{
				margin-top: 30px;
			}
		}	
			@media (max-height: 850px){
		#barra, #reproductor{
				margin-top: 30px;
			}
		}	
				@media (max-height: 700px){
		#barra, #reproductor{
				margin-top: 30px;
			}
		}	
		@media (max-height: 635px){
		#barra, #reproductor{
				margin-top: 30px;
			}
		}	

  
		@media (max-height: 599px){
				#logo{
					display:none !important;
					}
					#slider{
						left: 190px
						}
			#barra, #reproductor{
				margin-top: 30px;
			}
				}
		@media (max-height: 550px){
		#barra, #reproductor{
				margin-top: 30px;
			}
			
		}	
		@media (max-height: 543px){
				
					#slider{
						display: none;
						}
			#barra, #reproductor{
				margin-top: 30px;
			}
				}
		@media (max-height: 480px){
		#barra, #reproductor{
				margin-top: 30px;
			}
		}	
		@media (max-height: 430px){
		#barra, #reproductor{
				margin-top: 25px;
			}
			#micro,#nomicro{
				display:none;}
		}	@media (max-height: 300px){
		#barra, #reproductor{
				margin-top: 30px;
			}
		}	
		@media (max-width: 630px){
			#slider{
				display:none;}
			}
			@media (max-width: 481px){
			#micro{
				display:none;}
				
			}
			@media (max-width: 373px){
			#nomicro{
				display:none;}
				
			}