/* CSS Document */
@charset "UTF-8";

/* FUENTES */
/* TAMAÑO */
.ancho100{
width: 100%;
}
.ancho80{
width: 80%;
}
.ancho70{
width: 70%;
}
.ancho60{
width: 60%;
}
.ancho50{
width: 50%;
}
.ancho40{
width: 40%;
}
.ancho30{
width: 30%;
}
.ancho20{
width: 20%;
}
.ancho10{
width: 10%;
}
.alto10{
height: 10%;
}
.alto20{
height: 20%;
}
.alto30{
height: 30%;
}
.alto40{
height: 40%;
}
.alto50{
height: 50%;
}
.alto60{
height: 60%;
}
.alto70{
height: 70%;
}
.alto80{
height: 80%;
}
.alto90{
height: 90%;
}
.alto100{
height: 100%;
}



/* ALINEACION */

.alcenhv{
    margin: auto;
}
.alcenh{
    display: flex;
    align-items: center;
  justify-content: center;
}
.alcenv{
     display: flex;
  align-items: center;
  justify-content: center;
}
.flotarizq{
float: left;
}
.flotarder{
float: right;
}
.flotarcero{
display: block;
float:none;
}


/* COLOR */
.colazul{
background-color: blue;
}
.colverde{
background-color: green;
}
.colrojo{
background-color: red;
}
.colamarillo{
background-color: yellow;
}
.colnaranja{
background-color: orange;
}
.colrosado{
background-color: pink;
}

/* BORDE */
.borde0{
border: 0px inset;     
}
.borde1i{
border: 1px inset;     
}
.borde2i{
border: 2px inset;     
}
.borde1{
border: 1px ;     
}
.borde2{
border: 2px ;     
}


/* IMAGEN */

.imgcompleto {
    display: inline-block;
	height: 200px;
	width: 200px;
	background: url(../logos/logoh.svg) no-repeat;
	background-size: contain;
}
/* MENUS */


#MenuPrincipal {
}
#MenuPrincipal li {
    float: left;
}
#MenuPrincipal a {
    text-transform: uppercase;  
    border: 0px inset; 
}
.MenuBoton {
    padding: 5px;
    height: 1em;
	  -moz-border-radius: 4px;
	  -webkit-border-radius: 4px;
	  border-radius: 4px;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background: -webkit-linear-gradient(top, #ffc578, #fb9d23);
    background: -moz-linear-gradient(top, #ffc578, #fb9d23);
    background: -ms-linear-gradient(top, #ffc578, #fb9d23);
    background: -o-linear-gradient(top, #ffc578, #fb9d23);
    background-image: -ms-linear-gradient(top, #ffc578 10%,#fb9d23 70%);
    -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    text-shadow: #333333 0 1px 0;
    text-align: center;
    color: black;
}
.MenuBoton:hover {
    border: 1px solid #253737;
    text-shadow: #333333 0 1px 0;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #416b68);
    background: -moz-linear-gradient(top, #77b2b0, #416b68);
    background: -ms-linear-gradient(top, #77b2b0, #416b68);
    background: -o-linear-gradient(top, #77b2b0, #416b68);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
    color: #fff;
 }



#publicidad{
    width: 95%;
    
}
 
#extender{
    overflow:auto;
}

/*aside*/

aside {
    border: 0px inset;
    width:20%;
    float: right;
    padding-top: 10px;
    height: 100%;
    
}
aside article{
    padding-top: 5px;
    padding-bottom: 5px;
   
}
.caja{    
    background-image: url("../estilos/fondo/iron-grip.png");
    height: 15vh;
    display: block;
    text-align: center;
}
.caja h5{    
    text-align: center;
}
.caja img{    
    height: 15vh;
}


.mascara1 {
  -webkit-mask-image:  url("../fondos/leather_1.png");
  mask-image: url("../fondos/leather_1.png");
}
.mascara2{
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 10px,
    rgba(0, 0, 0, 0.3) 10px,
    rgba(0, 0, 0, 0.3) 20px
  ),
  url("../fondos/black_paper.png");
}
.mascara {
    background-image: url("../fondos/piedra.jpg");    
}

 #logos {
    float: left;
	height: 100px;
	width: 20%;
    background: linear-gradient(to bottom, #ffc578 10%,#fb9d23 70%);
     border-radius: 10px 0px 0px 0px;
     
}
#logo {

	height: 100px;
	width: 100%;
}
.logo1 {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 65%;
-webkit-filter: drop-shadow(5px 5px 5px #101010);
    filter: drop-shadow(5px 5px 5px #101010); 
  max-height: 100px;
    max-width: 100px;
}    
#iconos {
    float: left;
    width: 20%;
	border: 0px inset;
	padding: 3px;
    margin: 0;
    background: linear-gradient(to bottom, #fb9d23 10%,#ffc578 70%);
    border-radius: 0px 0px 10px 10px;
   box-shadow: 5px 5px 5px Black;
}
#icono {
	float: left;
	width: 30px;
    height: 25px;
	border: 0px inset;
	padding:0;
    margin: 0;
}
.iconocontacto{
	background: url(iconos/envelope.svg) no-repeat;
	background-size: contain;
    background-position: center;
}
.iconomenu {
    background: url(iconos/menu.svg) no-repeat;
    background-size: contain;
    background-position: center;
}
.iconomapa {
    background: url(iconos/map.svg) no-repeat;
    background-size: contain;
    background-position: center;
}
.iconoinicio {
    background: url(iconos/home.svg) no-repeat;
    background-size: contain;
    background-position: center;
}
.iconologo {
    background: url(iconos/logomenu.svg) no-repeat;
    background-size: contain;
    background-position: center;
}
 .iconovacio {
    
    background-size: contain;
    background-position: center;
}
#titulos {
    
	float: left;
	height: 100px;
	width: 80%;
    background: linear-gradient(to bottom, #ffc578 10%,#fb9d23 70%);
    border-radius: 0px 10px 10px 0px;
    box-shadow: 5px 5px 5px Black;
    
}
#titulo {
    height: 100%;
    width: 100%
    }
.titulo1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
-webkit-filter: drop-shadow(5px 5px 5px Black);
    filter: drop-shadow(10px 8px 3px Black);    
    height: 80px;
    max-height: 100px;
    max-width: 100%;

}
/*Section*/
.WD100 {
    width:80%;
    height: 95%;
    border: 0px inset;
    float: left;
    margin:0;
	padding:0;
    overflow: hidden;
}
    
/* MOSAICO*/
#LMM {
    width:100%;
    height: 100%;
    margin: 0 auto;
    border: 0px inset;
    
}
#LMM  ul {
    list-style-position: inside; 
    padding-left: 0;
    margin-top : 0;
    border: 0px inset;
    }
#LMM li {
    height: 48%;  
    list-style-type: none;
    text-align: center;
    border: 0px inset;
}
#LMM li article {
    float: left;
    width: 50%;
    height: 41vh;  
    transition: all 1s;
    border: 0px inset;
    overflow: hidden;
}
 #LMM li article h4 {
    float: left;
     padding: 10px;
}
#LMM:hover article {
     height: 20vh;
}
#LMM li:hover article {
    width: 11%;
    height: 61vh;
    
}
#LMM li article:hover {
    width: 88%;
    height: 61vh;
}
#LMM li article:hover:nth-child(1) {
  background-image: url("../estilos/fondo/cream-paper.png");
}
#LMM li article:hover:nth-child(2) {
  background-image: url("../estilos/fondo/cream-paper.png");
}
#LMM li article:hover:nth-child(3) {
  
}

