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


/* header */


header {
    z-index: 3;
    position: absolute; top: 20px; right: 0; left: 0;
    
    margin: auto;
    
    width: 90%; max-width: 1500px;
    height: 130px;
    
    text-transform: uppercase;
    text-shadow: 0 0 2px #333;
    color: #fff;
}

    @media only screen and (max-width: 1023px)  {
        header .social-media, header .menu-contacto, header nav, .headersc .social-media, .headersc .menu-contacto, .headersc nav, .base .social-media, .base .menu-contacto, .base nav {
            display: none;
        }
    }


/* header scroll */


.headersc {
    z-index: 4;
    position: fixed;
    
    margin: auto;
    padding: 15px 0;
    
    width: 100%;
    height: 100px;
    
    background: url(../img/layout/top/header-scroll-fondo.png);
    
    text-transform: uppercase;
    text-shadow: 0 0 2px #333;
    color: #fff;
}

.headerscc { width: 90%; height: 110px; max-width: 1500px; margin: auto;}

.activo { top: 0; }
.inactivo { top: -130px; }

.headersc .menu-contacto a:hover, .headersc nav a:hover { color: #999; }


/* logo */


.logo {
    display: table;
    
    width: auto;
    height: 100%;
    
    float: left;
}

.logo a {
    display: table-cell;
    vertical-align: middle;
}

.logo img {
    display: block;

    height: auto;
    
    -webkit-filter: drop-shadow(0 0 4px #333);
    filter: drop-shadow(0 0 4px #333);
}

    @media only screen and (max-width: 767px) {
        .logo img { width: 200px; }
    }

    @media only screen and (min-width: 768px) {
        .logo img { width: 220px; }
    }

    @media only screen and (min-width: 1024px) {
        .logo img { width: 240px; }
    }


/* social media */


.social-media {
    float: right;
}

.social-media ul {    
    margin: 0;
    padding: 0;
    
    float: right;
}

.social-media li {
    margin: 0 10px 0 0;
    padding: 0;
    
    float: left;
    
    list-style: none;
}

.social-media > ul > li:last-child { margin: 0; }

.social-media a {
    display: block;
}

.social-media img {
    display: block;
    
    height: auto;
}

    @media only screen and (max-width: 1023px) {
        .social-media img { width: 24px; }
    }

    @media only screen and (min-width: 1024px) and (max-width: 1151px) {
        .social-media img { width: 16px; }
    }

    @media only screen and (min-width: 1152px) {
        .social-media img { width: 20px; }
    }


/* menu > contacto */


.menu-contacto {
    margin:  5px 0 0 0;

    float: right;
    clear: right;
}

    @media only screen and (min-width: 1024px) and (max-width: 1151px) {
        .menu-contacto { font-size: 13px; line-height: 13px; }
    }

    @media only screen and (min-width: 1152px) {
        .menu-contacto { font-size: 14px; line-height: 14px; }
    }

.menu-contacto ul {
    margin: 0;
    padding: 0;

    float: right;
}

.menu-contacto li {
    padding: 0;

    float: left;
    
    list-style: none;
}

.menu-contacto > ul > li:nth-child(-n+3) {
    margin: 0 20px;
}

.menu-contacto > ul > li:nth-child(-n+3):after {
    content: '\2010';
    position: absolute;

    margin: 0 20px;
}

.menu-contacto > ul > li:last-child  {
    margin: 0 0 0 20px;
    padding: 0 0 0 18px;
    
    background: url(../img/layout/top/tel.png) 0 60% no-repeat;
    -o-background-size: 12px 12px;
    -moz-background-size: 12px 12px;
    -webkit-background-size: 12px 12px;
    background-size: 12px 12px;
    
    font-weight: 700;
}


/* nav */


nav {
    margin: 18px 0 0 0;
    padding: 18px 0 0 0;

    float: right;
    clear: right;
    
    background: url(../img/layout/top/separador.png) 0 0 no-repeat;
    -o-background-size: 100% 1px;
    -moz-background-size: 100% 1px;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}

.headersc nav { margin: 10px 0 0 0; padding: 10px 0 0 0; }

nav ul {
    margin: 0;
    padding: 0;
    
    float: right;
    clear: right;
}

    @media only screen and (min-width: 1024px) and (max-width: 1151px) {
        nav ul:nth-child(1) { font-size: 13px; line-height: 13px; }
        nav ul:nth-child(2) { font-size: 14px; line-height: 14px; }
    }

    @media only screen and (min-width: 1152px) {
        nav ul:nth-child(1) { font-size: 14px; line-height: 14px; }
        nav ul:nth-child(2) { font-size: 16px; line-height: 16px; }
    }

nav li {
    margin: 0 7px 0 0;
    padding: 0;
    
    float: left;
    
    list-style: none;
}

    @media only screen and (min-width: 1152px) {
        nav li { margin: 0 20px 0 0; }
    }

nav > ul > li:last-child { margin: 0; }

nav a {
    display: block;
}

nav > ul:nth-child(1) > li:nth-child(1) a {
    margin: 0 0 8px 0;
    padding: 7px 0 7px 24px;

    background: url(../img/layout/top/casco.png) 0 50% no-repeat;
    -o-background-size: 20px 20px;
    -moz-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px;
}

nav > ul:nth-child(1) > li:nth-child(2) a {
    padding: 7px 12px;
    
    border-radius: 4px;
    background: #b4312c;
    
    font-weight: 700;
}

.portada nav a:hover, .no-portada nav a:hover { color: #fff; text-shadow: 0 0 8px #fff, 0 0 6px #fff, 0 0 4px #fff;  }
nav > ul:nth-child(1) > li:nth-child(2) a:hover { color: #ffc900; }

/* menu icon */

.menu-icon {
    display: table;

    width: 80px;
    height: 60px;

    clear: right;
    float: right;
    
    cursor: pointer;
}

header .menu-icon { margin: 36px 0 0 0; }
.headersc .menu-icon { margin: 26px 0 0 0; }

.menu-icon > ul {
    display: table-cell;
    vertical-align: middle;

    margin: 0;
    padding: 0 8px;
}

.menu-icon > ul > li {
    margin: 0 0 6px 0;
    padding: 0;

    height: 4px;
    
    list-style: none;
    float: right;
    
    background: #fff;
    border-radius: 3px;
}

    @media only screen and (min-width: 1024px) {
        .menu-icon { display: none; }
    }

.menu-icon > ul > li:nth-child(1) { width: 100%; }
.menu-icon > ul > li:nth-child(2) { width: 70%; }
.menu-icon > ul > li:nth-child(3) { width: 40%; }

.menu-icon > ul:hover > li:nth-child(1) { width: 100%; }
.menu-icon > ul:hover > li:nth-child(2) { width: 100%; }
.menu-icon > ul:hover > li:nth-child(3) { width: 100%; }

.menu-icon > ul > li:last-child {
    margin: 0;
    padding: 0;
}


/* menú móvil */

.menu-movil {
    z-index: 4;
    position: fixed; top: 0; bottom: 0;
    display: table;
    
    width: 75%;
    height: 100%;

    
    background: url(../img/layout/top/header-scroll-fondo.png);
    box-shadow: 0 0 30px 0 #333;
    
    overflow: hidden;
    
    font-size: 24px;
    line-height: 24px;
    color: #fff;
}

.menu-movil > div {
    display: table-cell;
    vertical-align: middle;
    
    padding: 30px;
}

.menu-movil-inactivo { right: -100%; }
.menu-movil-activo { right: 0; }

    @media only screen and (min-width: 1024px) {
        .menu-movil  { display: none !important; }
    }


/* menú móvil > menú contacto */


.menu-movil .menu-contacto {
    margin:  20px 0 0 0;
}

.menu-movil .menu-contacto li {
    margin: 0 0 10px 0;
    float: none;
    
    text-align: right;
}

.menu-movil .menu-contacto > ul > li:nth-child(1)  { margin: 0 0 10px 0; }
.menu-movil .menu-contacto > ul > li:nth-child(2):before, .menu-movil .menu-contacto > ul > li:nth-child(2):after  { content: none; }
.menu-movil .menu-contacto > ul > li:nth-child(2):before { margin-left: 0; }
.menu-movil .menu-contacto > ul > li:nth-child(2):after { margin-left: 0; }
.menu-movil .menu-contacto > ul > li:nth-child(3)  {
    margin: 0 0 10px 0;
    padding: 0 0 0 24px;
    
    background: url(../img/layout/top/tel.png) 0 60% no-repeat;
    -o-background-size: 18px 18px;
    -moz-background-size: 18px 18px;
    -webkit-background-size: 18px 18px;
    background-size: 18px 18px;
    
    font-weight: 300;
}


/* menú móvil > nav */


.menu-movil nav ul:nth-child(1) {
    margin: 0 0 18px 0;
    padding: 0 0 18px 0;
    
    background: url(../img/layout/top/separador.png) 0 100% no-repeat;
    -o-background-size: 100% 1px;
    -moz-background-size: 100% 1px;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}

.menu-movil nav li {
    margin: 0 0 10px 0;
    
    float: none;
    
    text-align: right;
}

.menu-movil nav > ul:nth-child(1) > li:nth-child(1) a {
    margin: 0;
    padding: 0;

    background: none;
}

.menu-movil nav > ul:nth-child(1) > li:nth-child(2) a {
    padding: 0;
    
    background: none;
    
    font-weight: 300;
}

.menu-movil a:hover, .menu-movil nav > ul:nth-child(1) > li:nth-child(2) a:hover { color: #fff; text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff; }


/* cerrar icono */


.cerrar-icon {
	position: absolute; top: 20px; right: 20px;
	
	width: 50px;
	height: 50px;
}

.cerrar-icon ul {
	position: relative;
	
	margin: 0;
	padding: 0;
	
	width: 100%;
	height: 100%;
	
	float: right;
	cursor: pointer;
}

.cerrar-icon li {
	position: absolute; left: 0;
	list-style: none;
	
	margin: 0;
	padding: 0;
	
	width: 50%;
	height: 6px;
	
	border-radius: 3px;
	background: #fff;
}

.cerrar-icon li:nth-child(1) {
	top:13px;
	
	-ms-transform: rotate(40deg); /* IE 9 */
	-webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
	transform: rotate(40deg);
}

.cerrar-icon li:nth-child(2) {
	top:26px;
	
	-ms-transform: rotate(140deg); /* IE 9 */
	-webkit-transform: rotate(140deg); /* Chrome, Safari, Opera */
	transform: rotate(140deg);
}

.cerrar-icon:hover li {
	left: 10px;
}