body{   
	font-family:  Helvetica,Arial, sans-serif; 
	font-size: 13px; 
	color: #000000;
	overflow:hidden;
	margin-top: 2%;
    background-color:#ffffff;
 scrollbar-face-color:#dd5d4b; scrollbar-track-color:#DBDBEA; scrollbar-arrow-color:#ffffff; scrollbar-shadow-color:#DA4A36; scrollbar-dark-shadow-color:#D94631; scrollbar-3dlight-color:#E17262; scrollbar-highlight-color:#EEEEEE
	
		
 }
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.gradienteprincipal {
    
	background: #dd5d4b; /* Old browsers */
	background: -moz-linear-gradient(left,  #dd5d4b 0%, #E06D5C 100%); /* FF3.6+ */	
	background: -webkit-linear-gradient(left,  #dd5d4b 0%,#E06D5C 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #dd5d4b 0%,#E06D5C 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #dd5d4b 0%,#E06D5C 100%); /* IE10+ */
	background: linear-gradient(to right,  #dd5d4b 0%,#E06D5C 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd5d4b', endColorstr='#E06D5C',GradientType=1 ); /* IE6-9 */
    padding-left:15%;
	font-size:20px;
}
 
.menu {
  color:#000;
  width:100%;
  min-height:60px;
  display: flex;
  flex-wrap: wrap;   
}
div.menuitem {
  cursor:pointer;
 
  text-align:center;
  color:#fff;
  width:160px;
  height:60px;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

div.menuitem:hover {
    cursor:pointer;

	color:#FFDFBF;
	background-color:#dd5d4b;
	
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	animation-duration: 0.5s;
	vertical-align: middle;
	transition: all  0.1s ease-in-out;
}


.header {

	height:8%;
	padding:0.1em 0%;
	color:#f0f0f0;
	background:#FFFFFF;
	width:100%;
} 
.pie {
	height:5%;
	position:absolute;
	bottom:0%;
	color:#000000;
	background:#FFFFFF;
	width:100%;
		overflow:hidden;
} 

.content {
  position:absolute;
   border:1px;
   text-align:justify;
   padding-left:10%;
   padding-right:5%;
   top:20%;left:0px;overflow-y:auto;
   background-color:#ffffff;
   width:80%;height:70%;
   
   margin-top:5px;margin-bottom:5px;
   font-size:16px;
   color:#A5301F;
}
.titulo {
 font-size:21px;
 font-weight: bold;
 color:#6d9386;
}
.margen {
 padding:2% 4%;
}
.main {
   float: left;
	
	padding:0.5em;
	width:50%;
	height:65%;
	display:inline-block;
} 
.mainmovil {
   float: left;
	
	padding:0.5em;
	width:100%;
	height:85%;
	display:inline-block;
} 
.mainslide {

	background:#ffffff;
	
	padding:0em;
	width:100%;
	height:75%;
	display:inline-block;
} 








.fichero {   
   margin:0 auto 0 auto;margin:10px;
   cursor:pointer;
   width:200px;height:60px;overflow:visible;
   float:left;
   align:center;
   color: #000000;
   font-family:  Arial, Helvetica,sans-serif; 
   font-size: 13px; 
   text-align:center;
	padding: 5Px;
   border-radius: 10px 0px 10px 0px;
   text-decoration: none;
   border-style:solid;
	border-color: #000000;
	border-width: 1px;
	background-color : #a0c9ba;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	transition: all  0.4s ease-in-out;
}
.fichero:hover{
	background-color : #bfeada;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
}






.url {   
   margin:0 auto 0 auto;margin:10px;
   cursor:pointer;
   width:200px;height:50px;overflow:visible;
   float:left;
   align:center;
   color: #000000;
   font-family:  Arial, Helvetica,sans-serif; 
   font-size: 10px; 
   text-align:center;
	padding: 5Px;
   border-radius: 10px 0px 10px 0px;
   text-decoration: none;
   border-style:solid;
	border-color: #a0c9ba;
	border-width: 1px;
	background-color : #a0b9b0;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	transition: all  0.4s ease-in-out;
}
.url:hover{
	background-color : #bfeada;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
}

.carpeta { 
	margin:0 auto 0 auto;
	margin:0.5vw;
   	cursor:pointer;
   	width:13.5vw ;height:13.5vw;overflow:hidden;
	display:inline-block;
	padding: 0.5vw;	

	font-family: "Roboto", serif;
    text-align: center;
    font-size: 2vw;
    color: rgb(255, 255, 255);
    background-color: rgb(84, 84, 84);
    text-shadow: rgb(0, 0, 0) 2px 2px 2px;



   border-radius: 10px 0px 10px 0px;
   text-decoration: none !important;
   border-style:solid;
	border-color: #000000;
	border-width: 1px;
	background-color : #a0c9ba;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	opacity: 0.6;
    filter: alpha(opacity=60); 
	filter: grayscale(80%);
	
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all  0.5s ease-in-out;
			-ms-transition: all  0.5s ease-in-out;
			-o-transition: all  0.5s ease-in-out;
			transition: all  0.5s ease-in-out;	
}

.carpeta:hover{
	background-color : #bfeada;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	opacity: 1;
    filter: alpha(opacity=100); 
	filter: grayscale(0%);
}

.foto {   
   margin:0 auto 0 auto;margin:0.5vw;
   cursor:pointer;
   width:14vw ;height:14vw;overflow:hidden;
   float:left;
   align:center;
   color: #000000;
   font-family:  Arial, Helvetica,sans-serif; 
   font-size: 13px; 
   text-align:center;
	padding: 5Px;
   border-radius: 10px 0px 10px 0px;
   text-decoration: none;
   border-style:solid;
	border-color: #000000;
	border-width: 1px;
	background-color : #a0c9ba;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.65);
	opacity: 0.6;
    filter: alpha(opacity=60); 
	filter: grayscale(80%);
	
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all  0.5s ease-in-out;
			-ms-transition: all  0.5s ease-in-out;
			-o-transition: all  0.5s ease-in-out;
			transition: all  0.5s ease-in-out;	
}
.foto:hover{
	background-color : #bfeada;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.85);
	opacity: 1;
    filter: alpha(opacity=100); 
	filter: grayscale(0%);
}





.video_sample_in{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

.video_sample {
            background:#dd5d4b;
			color:#ffffff;
			font-size:14px;
			cursor:pointer;
			float:left;display:inline-block;
			width:30%;height:auto;
			opacity:0.6;
			filter: alpha(opacity=60);			 
			margin:10px;
			overflow: visible
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all  0.5s ease-in-out;
			-ms-transition: all  0.5s ease-in-out;
			-o-transition: all  0.5s ease-in-out;
			transition: all  0.5s ease-in-out;
			
     filter: grayscale(50%);
}
.video_sample:hover{
			opacity:1;
			filter: alpha(opacity=100);
			filter: grayscale(10%);
}