/*!
 * TME FRONT
 * Version - 2.0
 * Author: Vannelo - http://vannelo.com

 * - RESOURCES -
 * COLORS
 * ACCENT 1: #00BF6F;
 * ACCENT 2: #;
 * ACCENT 3: #;
 * ACCENT 4: #;

*/

/* TIPOGRAFÍA */
    @font-face {
        font-family: untitled;
        src: url("../fonts/untitled-regular.otf");
    }
    @font-face {
        font-family: untitled-black;
        src: url("../fonts/untitled-black.ttf");
    }


/* GENERAL */
    * {
        font-family: untitled;
    }
    button:focus {
        outline-color: transparent;
        outline-style: auto;
        outline-width: 0px;
    }
    a, a:hover {
        color: black;
        text-decoration: none;
    }
    h3 {
        font-family: untitled-black;
        font-size: 36px;
        margin: 20px;
        font-weight: 800;
    }
    .separador {
        width: 90%;
        margin: auto;
        height: 1px;
        background-color: #ccc;
        margin-top: 20px;
        margin-bottom: 20px;
    }

/* MENu */
    .menu-desktop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 20px;
        transition-duration: .2s;
    }
    .menu-desktop img {
        width: 200px;
        transition-duration: .2s;
    }
    .menu-desktop .derecha {
        text-align: right;
    }
    .menu-desktop .derecha a {
        display: inline-block;
        color: white;
        font-family: untitled-black;
        padding: 10px 20px;
    }

    .menu-desktop.inside-white {
        position: fixed;
        background-color: white;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 10px 20px;
        transition-duration: .2s;
    }
    .menu-desktop.inside-white img {
        width: 150px;
        margin-bottom: -10px;
        transition-duration: .2s;
    }
    .menu-desktop.inside-white .derecha {
        text-align: right;
    }
    .menu-desktop.inside-white .derecha a {
        display: inline-block;
        color: black;
        font-family: untitled-black;
        padding: 10px 20px;
        font-size: 14px;
        transition-duration: .2s;
    }

    .menu-desktop.scrolleado {
        position: fixed;
        background-color: white;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 10px 20px;
        transition-duration: .2s;
    }
    .menu-desktop.scrolleado img {
        width: 150px;
        margin-bottom: -10px;
        transition-duration: .2s;
    }
    .menu-desktop.scrolleado .derecha {
        text-align: right;
    }
    .menu-desktop.scrolleado .derecha a {
        display: inline-block;
        color: black;
        font-family: untitled-black;
        padding: 10px 20px;
        font-size: 14px;
        transition-duration: .2s;
    }

    .menu-mobile {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 10px 20px;
    }
    .menu-mobile img {
        width: 100px;
    }
    .menu-mobile .derecha {
        text-align: right;
    }
    .menu-mobile .hamburger {
        display: inline-block;
        width: 35px;
        cursor: pointer;
    }
    .menu-mobile .hamburger .line {
        width: 100%;
        height: 1px;
        margin: 7px 0px;
        background-color: white;
    }
    .menu-hidden {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: black;
        z-index: 999;
        color: white;
        text-align: center;
        padding: 20vh 0vh;
    }
    .menu-hidden img {
        display: block;
        margin: auto;
        width: 200px;
    }
    .menu-hidden a {
        display: block;
        text-align: center;
        font-family: untitled-black;
        font-size: 16px;
        color: white;
        padding: 10px 0px;
    }

    .menu-mobile.inside-white {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 10px 20px;
    }
    .menu-mobile.inside-white img {
        width: 100px;
    }
    .menu-mobile.inside-white .derecha {
        text-align: right;
    }
    .menu-mobile.inside-white .hamburger {
        display: inline-block;
        width: 35px;
        cursor: pointer;
    }
    .menu-mobile.inside-white .hamburger .line {
        width: 100%;
        height: 1px;
        margin: 7px 0px;
        background-color: black;
    }
    .menu-hidden {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: black;
        z-index: 999;
        color: white;
        text-align: center;
        padding: 20vh 0vh;
    }
    .menu-hidden img {
        display: block;
        margin: auto;
        width: 200px;
    }
    .menu-hidden a {
        display: block;
        text-align: center;
        font-family: untitled-black;
        font-size: 16px;
        color: white;
        padding: 10px 0px;
    }



/* HOME - SLIDER */
    .page-home .slider {
        position: relative;
    }
    .page-home .slider .item {
        width: 100vw;
        height: 100vh;
        background-position: center;
        background-size: cover;
    }
    .page-home .slider .boton-atras {
        position: absolute;
        top: 45%;
        left: 1%;
        z-index: 10;
        background-color: transparent;
        padding: 20px;
        border: none;
        color: white;
        font-size: 30px;
        opacity: .5;
        transition-duration: .2s;
    }
    .page-home .slider .boton-atras:hover {
        transform: scale(1.3);
        opacity: 1;
        transition-duration: .2s;
    }
    .page-home .slider .boton-siguiente {
        position: absolute;
        top: 45%;
        right: 1%;
        z-index: 10;
        background-color: transparent;
        padding: 20px;
        border: none;
        color: white;
        font-size: 30px;
        opacity: .5;
        transition-duration: .2s;
    }
    .page-home .slider .boton-siguiente:hover {
        transform: scale(1.3);
        opacity: 1;
        transition-duration: .2s;
    }
    .page-home .slider .texto {
        position: absolute;
        left: 5%;
        bottom: 10%;
        color: white;
        transition-duration: .2s;
        opacity: .75;
    }
    .page-home .slider .titulo {
        font-family: untitled-black;
        font-size: 70px;
        line-height: 60px;
        margin: 0px;
    }
    .page-home .slider .subtitulo {
        font-weight: 400;
        font-size: 30px;
        margin: 0px;
    }
    .page-home .slider .texto:hover {
        text-decoration: none;
        opacity: 1;
        text-shadow: 0 0 10px #000;
        color: white;
    }

/* HOME - PROYECTOS */
    .page-home .proyectos {
        padding: 50px;
    }
    .page-home .proyectos .item {
        margin-bottom: 10px;
    }
    .page-home .proyectos .item .box-imagen {
        display: block;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 200px;
    }
    .page-home .proyectos .item .box-imagen .imagen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        transition-duration: .2s;
    }
    .page-home .proyectos .item .titulo {
        font-family: untitled-black;
        font-size: 16px;
        margin: 5px 0px;
    }
    .page-home .proyectos .item .box-imagen:hover .imagen {
        transform: scale(1.1);
        transition-duration: .2s;
    }

/* POST */
    .page-post {}
    .page-post .header {
        width: 100vw;
        height: 100vh;
        background-position: center;
        background-size: cover;
    }

    .page-post .content {
        padding: 50px;
        text-align: center;
    }

    .page-post .section-1 {}
    .page-post .section-1 .categoria {
        color: #666;
    }
    .page-post .section-1 .titulo {
        font-weight: 900;
        font-size: 50px;
        margin: 20px 0px;
    }
    .page-post .section-1 .subtitulo {
        font-weight: 600;
        font-size: 26px;
        color: #333;
        margin: 20px 0px;
    }
    .page-post .section-1 .separador {
        width: 50px;
        height: 5px;
        background-color: #666;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .page-post .section-1 .texto {
        font-family: untitled !important;
        width: 60%;
        margin: auto;
        margin-top: 60px;
        margin-bottom: 60px;
        font-size: 24px;
        text-align: justify;
    }
    .page-post .imagen {
        width: 100%;
    }
    .page-post .imagen img {
        width: 100%;
    }
    .page-post .section-2 .texto {
        font-family: untitled !important;
        width: 60%;
        margin: auto;
        margin-top: 60px;
        margin-bottom: 60px;
        font-size: 24px;
        text-align: justify;
    }
    .page-post .section-3 .texto {
        font-family: untitled !important;
        width: 60%;
        margin: auto;
        margin-top: 60px;
        margin-bottom: 60px;
        font-size: 24px;
        text-align: justify;
    }

    .page-post .galeria {
            padding: 0px 50px;
        }
    .page-post .galeria .imagen {
            width: 100%;
            height: 600px;
            margin-bottom: 30px;
            background-position: center;
            background-size: cover;
            cursor: pointer;
        }

    .page-post .otros {
        padding: 50px 0px;
        text-align: center;
    }
    .page-post .otros .separador {
        width: 50px;
        height: 5px;
        background-color: #666;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .page-post .otros .titulo {
        font-size: 30px;
        font-family: untitled-black;
        margin: 10px 0px;
    }
    .page-post .otros .item {
        padding: 10px;
    }
    .page-post .otros .imagen {
        width: 100%;
        height: 500px;
        background-position: center;
        background-size: cover;
        transition-duration: .2s;
    }

    .page-post .video {
        margin: 50px 0px;
    }

/* PROYECTOS */

    .page-proyectos {
        padding: 80px 0px;
        text-align: center;
    }

    .page-proyectos .proyectos {
        padding: 20px 50px;
    }
    .page-proyectos .proyectos .item {
        margin-bottom: 10px;
    }
    .page-proyectos .proyectos .item .box-imagen {
        display: block;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 200px;
    }
    .page-proyectos .proyectos .item .box-imagen .imagen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        transition-duration: .2s;
    }
    .page-proyectos .proyectos .item .titulo {
        font-family: untitled-black;
        font-size: 16px;
        margin: 5px 0px;
    }
    .page-proyectos .proyectos .item .box-imagen:hover .imagen {
        transform: scale(1.1);
        transition-duration: .2s;
    }

/* NOSOTROS */
    .page-nosotros {
        padding: 100px 0px;
        background-color: black;
        color: white;
    }
    .page-nosotros h3 {
        font-size: 40px;
        padding: 0px;
        margin: 0px;
    }
    .page-nosotros h4 {
        font-size: 20px;
        margin: 10px 0px;
    }
    .page-nosotros .section-1 {
        padding: 50px 0px;
    }
    .page-nosotros .section-1 .izquierda {
        padding-top: 30px;
    }
    .page-nosotros .section-1 .derecha {
        font-size: 20px;
    }
    .page-nosotros .empleados {
        padding: 50px 0px;
    }
    .page-nosotros .empleados .imagen {
        height: 220px;
        background-position: center;
        background-size: cover;
    }
    .page-nosotros .empleados .nombre {
        font-family: untitled-black;
        font-size: 14px;
        margin: 5px 0px 20px 0px;
    }

/* CONTACTO */
    .page-contacto {
        padding: 100px 0px;
        background-color: black;
        color: white;
    }
    .page-contacto h3 {
        font-size: 40px;
        padding: 0px;
        margin: 0px;
    }
    .page-contacto h4 {
        font-size: 20px;
        margin: 10px 0px;
    }

    .page-contacto .img1 {
        width: 100%;
        height: 650px;
        background-position: center;
        background-size: cover;
    }
    .page-contacto .img2 {
        width: 100%;
        height: 310px;
        background-position: center;
        background-size: cover;
        margin-bottom: 30px;
    }
    .page-contacto .section-1 {
        margin-top: 30px;
    }

    .page-contacto .titulo {
        font-size: 30px;
        margin: 10px 0px;
        font-family: untitled-black;
    }
    .page-contacto .subtitulo {
        font-size: 26px;
        color: #ccc;
        margin: 10px 0px;
    }
    .page-contacto a {
        font-size: 20px;
        font-family: untitled-black;
        color: white;
    }
    .page-contacto .ubicacion {
        margin-top: 50px;
    }



/* FOOTER */
    footer {
        padding: 20px;
        font-size: 12px;
        font-weight: 800;
    }
    footer .derecha {
        text-align: right;
    }
    footer i {
        color: black;
        font-size: 16px;
        font-weight: 100;
        margin: 0px 20px;
    }
    footer.dark {
        background-color: black;
        color: white;
    }
    footer.dark i {
        color: white;
    }


/* RESPONSIVE */

    @media only screen and (max-width: 1000px) {
        .menu-desktop {
            display: none;
        }
        .menu-mobile {
            display: block;
        }
        .hide-mobile {
            display: none !important;
        }
        .show-mobile {
            display: block;
        }

        .page-home .slider .titulo {
            font-weight: 800;
            font-size: 30px;
            line-height: 40px;
            margin: 0px;
        }
        .page-home .slider .subtitulo {
            font-weight: 400;
            font-size: 16px;
            margin: 0px;
        }

        .page-home .proyectos {
            padding: 20px;
        }
        .page-home .proyectos .item .box-imagen {
            display: block;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 130px;
        }
        .page-home .proyectos .item .titulo {
            font-size: 14px;
            font-weight: 800;
            margin: 5px 0px;
        }

        footer i {
            color: black;
            font-size: 14px;
            font-weight: 100;
            margin: 0px 10px;
        }
        h3 {
            font-size: 30px !important;
        }
        h4 {
            font-size: 18px !important;
        }

        .page-home .proyectos .item .box-imagen {
            display: block;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100px;
        }
        .page-home .proyectos .item .titulo {
            font-size: 12px;
            margin: 5px 0px;
        }

        .page-proyectos {
            padding: 40px 0px;
            text-align: center;
        }
        .page-proyectos .proyectos .item .box-imagen {
            display: block;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100px;
        }
        .page-proyectos .proyectos {
            padding: 20px;
        }
        .page-proyectos .proyectos .item .titulo {
            font-family: untitled-black;
            font-size: 14px;
            text-align: left;
            margin: 5px 0px;
        }

        .page-nosotros {
            padding: 40px 20px;
            background-color: black;
            color: white;
        }
        .page-nosotros .section-1 {
            padding: 30px 0px;
        }
        .page-nosotros .section-1 .derecha {
            font-size: 14px;
            margin: 20px 0px;
        }
        .page-nosotros .empleados {
            padding: 0px;
        }
        .page-nosotros .empleados .imagen {
            height: 180px;
            background-position: center;
            background-size: cover;
        }

        .page-contacto {
            padding: 80px 20px;
            background-color: black;
            color: white;
        }
        .page-contacto .img1 {
            width: 100%;
            height: 200px;
            background-position: center;
            background-size: cover;
        }
        .page-contacto .img2 {
            width: 100%;
            height: 100px;
            background-position: center;
            background-size: cover;
            margin-bottom: 0px;
        }
        .page-contacto .titulo {
            font-size: 20px;
            margin: 10px 0px;
            font-family: untitled-black;
        }
        .page-contacto .subtitulo {
            font-size: 14px;
            color: #ccc;
            margin: 10px 0px;
        }
        .page-contacto a {
            font-size: 12px;
            font-family: untitled-black;
            color: white;
        }

        .page-post .header {
            width: 100vw;
            height: 40vh;
            background-position: center;
            background-size: cover;
        }
        .page-post .content {
            padding: 20px;
            text-align: center;
        }
        .page-post .section-1 .titulo {
            font-weight: 900;
            font-size: 30px;
            margin: 20px 0px;
        }
        .page-post .section-1 .subtitulo {
            font-weight: 600;
            font-size: 20px;
            color: #333;
            margin: 20px 0px;
        }
        .page-post .texto {
            font-family: untitled !important;
            width: 100% !important;
            margin: auto;
            margin-top: 60px;
            margin-bottom: 60px;
            font-size: 16px;
            text-align: justify;
        }
        .page-post .galeria {
            padding: 0px 20px;
        }
        .page-post .galeria .imagen {
            width: 100%;
            height: 150px;
            margin-bottom: 30px;
            background-position: center;
            background-size: cover;
            cursor: pointer;
        }
        .page-post .otros .imagen {
            width: 100%;
            height: 200px;
            background-position: center;
            background-size: cover;
            transition-duration: .2s;
        }
        .page-post .otros .titulo {
            font-size: 14px;
            font-family: untitled-black;
            margin: 10px 0px;
        }
    }

    @media only screen and (min-width: 1000px) {
        .hide-mobile {
            display: block;
        }
        .show-mobile {
            display: none;
        }

    }

    @media only screen and (min-width: 2000px) {



    }