/* Overlay style */
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #e35f41;
    z-index:998;
    color:#000;
}



/* Menu style */


.overlay ul{list-style:none; font-family: 'Lato', sans-serif; font-weight:bold;}
.overlay ul li a{color:#231f20;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;}


.overlay .menu-escala{
    font-size:3.2em; text-align:center;
    width:100%;
    position:absolute;
    /*top:22%;*/
    top: 50%;
    transform: translateY(-50%);
}
.overlay .vertical ul{text-transform:uppercase;}
.overlay .vertical.peq ul li a{font-size:0.75em;  text-transform:none; }

.overlay .vertical.peq ul, .overlay .vertical ul{margin:0;}

.overlay .vertical ul li.menu-escala{width:60%; margin-left:20%;}


.overlay .vertical ul li{line-height:1.25em;  }
.overlay .vertical.peq ul li {line-height:0.95em;  }



.overlay .horizontal{
    position:absolute;
    text-align:center;
    width:100%;
    top:60px;
}

.overlay .horizontal li{ display:inline; text-align:center; font-size:1.5em; border-right:3px solid #231f20; height:24px; line-height:1em;font-weight:400;}
.overlay .horizontal a{display:inline-block; padding:0 4%;}

.overlay .horizontal li:last-child{ border-right:none;}

.overlay ul li a:hover,
.overlay ul li a:focus {
    color: #fff;
}


.overlay .boton-menu-tienda{
	position:absolute;
    text-align:center;
    width:100%;
    top:120px;
}
.boton-menu-tienda a{min-width: 280px;max-width: 280px; margin: 0 auto; border: 2px solid #000; padding: 10px 20px;   color:#000!important; font-family: 'Lato', sans-serif;}

.boton-menu-tienda a:hover{border: 2px solid #fff!important;  color:#fff!important; }




#iconos-social {
    position:absolute;
    bottom:2%;
    text-align:center;
    width:100%;
}
#iconos-social > p{text-align:center;font-family: 'Lato', sans-serif; font-size:1.4em; width:100%;}

#iconos-social li{ display:inline; text-align:center; width:24%;}
#iconos-social li a{ display:inline-block; padding:0 1%;}

.btn-social { transition: 0.2s; }
svg{  }
svg:hover .btn-social { fill: #e7e7e7; cursor:pointer; }


.overlay ul.vertical, .overlay .horizontal, #iconos-social{ margin-left:0;}


/* Effects */
.overlay-scale {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
    transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}

.overlay-scale.open {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}







/*-- MENU BURGUER --*/


#hamburger {
    display: none;
}

.menuicon {
    position: fixed;
    top: 25px;
    right: 30px;
    display: block;
    cursor: pointer;
    height: 21px;
    width: 25px;
    z-index:9999;
}
.menuicon span {
    display: block;
    top: 8px;
    width: 25px;
    height: 5px;
    background-color: #000;
    position: relative;
    -webkit-transition-duration: 0;
    -moz-transition-duration: 0;
    -ms-transition-duration: 0;
    -o-transition-duration: 0;
    transition-duration: 0;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.menuicon span::after, .menuicon span::before {
    display: block;
    content: '';
    position: absolute;
    width: 25px;
    height: 5px;
    background-color: #000;
    -webkit-transition-property: margin, -webkit-transform;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-delay: 0.2s, 0;
    -moz-transition-delay: 0.2s, 0;
    -ms-transition-delay: 0.2s, 0;
    -o-transition-delay: 0.2s, 0;
    transition-delay: 0.2s, 0;
}


.menuicon.white span, .menuicon.white span::after, .menuicon.white span::before {
    background-color: #fff;
}

.menuicon span::before {
    margin-top: -8px;
}
.menuicon span::after {
    margin-top: 8px;
}


#hamburger:checked ~ .menuicon span {
    background-color: transparent;
}
#hamburger:checked ~ .menuicon span::before, #hamburger:checked ~ .menuicon span::after {
    margin-top: 0px;
    -webkit-transition-delay: 0, 0.2s;
    -moz-transition-delay: 0, 0.2s;
    -ms-transition-delay: 0, 0.2s;
    -o-transition-delay: 0, 0.2s;
    transition-delay: 0, 0.2s;
}
#hamburger:checked ~ .menuicon span::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#hamburger:checked ~ .menuicon span::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*-- FIN MENU BURGUER --*/


@media only screen and (max-width: 1366px) {

    /*-- PANTALLA PORTATIL --*/
    .overlay .vertical ul{text-transform:uppercase;}
    .overlay .vertical ul li , .overlay .vertical.peq ul li {margin:10px; padding:0;  }
	.overlay .vertical ul li a, .overlay .vertical.peq ul li a{font-size:0.7em;  }
    .overlay .vertical ul li{line-height:0.7em;  }
	.overlay .vertical.peq ul li {line-height:0.5em;  }

}



@media only screen and (max-width: 62.5em) {
    .menuicon {right:10px;}
    .overlay .horizontal li{font-size:1.2em;}
    #iconos-social > p{font-size:1em;}
	
	.overlay .vertical ul li a, .overlay .vertical.peq ul li a{font-size:1.22em;  }
    .overlay .vertical ul li{line-height:1.1em;  }
	.overlay .vertical.peq ul li {line-height:0.91em; 

    /* .overlay ul.vertical{ font-size:3em; line-height:1.3em;}
    .overlay ul li.peq a{font-size:0.65em; }*/


}


@media only screen and (max-width: 40.0625em) {
    .menuicon {right:10px; top:12px;}
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
    .menuicon {right:10px; top:12px;}
    .overlay ul li a{
        -webkit-transition: color 0.s;
        transition: color 0.s;}
	
}


@media only screen and (max-width: 40.0625em) {
    .overlay ul li a{
        -webkit-transition: color 0.s;
        transition: color 0.s;}
    .overlay ul li a:hover,
    .overlay ul li a:focus {
        color: #231f20;
    }
}