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

nav {
    margin: 10px 0 0 0;
    padding: 7px 30px;
    
    float: right;
    clear: right;

    box-shadow: 0 0 10px 0 #333;
    background: #6883a6;
    
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    color: #fff;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav li {    
    float: left;
    
    list-style: none;
    
    text-align: center;
}

nav li:nth-child(-n+3) { margin: 0 0 8px 0; padding: 0 0 8px 0; border-bottom: 1px solid #fff; }

nav li:nth-child(2) { padding: 0 27px 8px 27px; }
nav li:nth-child(5) { padding: 0 16px; }
nav li:nth-child(3n+1) { clear: left; }

@media only screen and (max-width: 768px) { .no-movil { display: none; } }
@media only screen and (min-width: 768px) { .menu-icon, .menu-movil { display: none; } }


/* menú movil */


.menu-icon {
    margin: 35px 0;
    padding: 20px 0;

    width: 60px;
    
    box-shadow: 0 0 10px 0 #666;
    background: #6883a6;
    
    cursor: pointer;
}

.menu-icon span {
    display: block;
    
    margin: 0 auto 4px auto;
    
    width: 70%;
    height: 4px;
    
    background: #fff;
}

.menu-icon > span:last-child { margin: 0 auto; }

.menu-movil {
    z-index: 99;
    position: fixed; top: 0;
    
    width: 80%;
    height: 100%;
    
    box-shadow: 0 0 60px 0 #666;
    background: #6883a6;
}

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

.menu-movil nav {
    margin: 30px 0 0 0;
    padding: 0 20px;
    
    float: none;
    clear: none;

    box-shadow: 0 0 0 0 #333;
    background: none;
    
    font-size: 30px;
    line-height: 30px;
    text-transform: uppercase;
    color: #fff;
}

.menu-movil nav ul {
    margin: 0;
    padding: 0;
}

.menu-movil nav li {
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;

    float: none;
    
    list-style: none;
    
    border-bottom: 1px solid #fff;
    
    text-align: right;
}

.menu-movil nav li:nth-child(-n+3) { margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #fff; }

.menu-movil nav li:nth-child(2) { padding: 0 0 10px 0; }
.menu-movil nav li:nth-child(5) { padding: 0 0 10px 0; }

.cerrar-menu {
    padding: 20px;
    cursor: pointer;
    
    text-align: right;
    text-transform: uppercase;
    color: #fff;
}


/* social media */


.social-media {
    height: 53px;

    float: right;
    
    font-size: 16px;
    line-height: 18px;
    text-align: right;
    color: #fff;
}

.no-movil .social-media { filter: drop-shadow(0 0 3px #333); }

.social-media > div {
    float: left;
}

.social-media > div:first-child img {
    display: inline-block;
    vertical-align: bottom;

    margin: 0 4px 0 0;
    
    width: auto;
    height: 16px;
}

.social-media > div:last-child img {
    display: block;
    
    margin: 0 0 0 15px;
    
    width: auto;
    height: 53px;
}


/* social media > menu movil */


.menu-movil .social-media {
    display: block;
    
    margin: 0 20px;
    padding: 20px 0;

    height: auto;

    float: none;
    
    border-top: 1px solid #95b0d2;
    border-bottom: 1px solid #95b0d2;
    
    font-size: 18px;
    line-height: 20px;
    text-align: right;
    color: #fff;
}

.menu-movil .social-media > div {
    float: none;
}

.menu-movil .social-media > div:first-child img {
    display: inline-block;
    vertical-align: bottom;

    margin: 0 4px 0 0;
    
    width: auto;
    height: 18px;
}

.menu-movil .social-media > div:last-child img {
    display: inline-block;
    
    margin: 15px 0 0 0;
    
    width: auto;
    height: 40px;
}


/* social media > general */


.general .social-media {
    color: #808080;
}

.general .social-media { filter: drop-shadow(0 0 0 #fff); }

.general .social-media img {
    webkit-filter: brightness(50%);
    filter: brightness(50%);
}


/* menú scroll */


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

.top-scroll {
    z-index: 98;
    position: fixed;
    
    width: 100%;
    height: 100px;
    
    box-shadow: 0 0 40px 0 #666;
    background: #fff;
}

.top-scroll > ul {
    margin: 0;
    padding: 0;
    
    width: 100%;
    
    float: left;
}

.top-scroll > ul > li {
    margin: 0;
    padding: 0;
    
    list-style: none;
}

.top-scroll > ul > li:first-child { float: left; }
.top-scroll > ul > li:last-child { float: right; }

.top-scroll img {
    display: block;
    
    margin: 15px 0 0 15px;
    
    width: auto;
    height: 70px;
}

.top-scroll nav {
    margin: 0 0 0 0;
    padding: 23.5px 50px;

    box-shadow: 0 0 0 0 #333;
}

.triangulo {
    width: 0;
    height: 0;

    border-bottom: 100px solid #6883a6;
    border-left: 40px solid transparent;

    float: left;
}

.top-scroll .menu-icon {
    margin: 20px 20px;
    
    box-shadow: 0 0 0 0 #666;
}