/* 
    Configuración de fuente
*/
@font-face {
    font-family: "MyriadPro-Regular";
    src: url("../fonts/MyriadPro-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Gotham-Black";
    src: url("../fonts/Gotham-Black.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Gotham-Bold";
    src: url("../fonts/Gotham-Bold.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Gotham-Thin";
    src: url("../fonts/Gotham-Thin.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

/* 
    Reset
*/
html, body { 
    height:100%;
    font-family: 'MyriadPro-Regular';
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
    background-color: #43464F;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
body.hidden {
    overflow: hidden;
}

/* 
    Logotipo
*/
.brand {
    max-width: 136px;
    position: fixed;
    top: 60px;
    left: 60px;
    z-index: 2001;
}

/* 
    Menu izquierdo
*/
.left-menu {
    position: fixed;
    left: 96px;
    top: 300px;
    width: 63px;
    height: 350px;
    z-index: 2001;
}
.lm-top-line {
    width: 1px;
    height: 280px;
    position: absolute;
    left: 75px;
    top: 142px;
    background-color: #b3b5b8;
    z-index: 10px;;
}
.lm-bottom-line {
    width: 1px;
    height: auto;
    position: absolute;
    left: 75px;
    top: 540px;
    bottom: -10px;
    background-color: #b3b5b8;    
}
.lm-bullets {
    position: absolute;
    left: 73px;
    width: 5px;
    height: 5px;
    background-color: #FFF;
}
.lm-bullets.active {
    background-color: #00AD8C;
}
#b1.lm-bullets {
    top: 260px!important;
}
#b2.lm-bullets {
    top: 300px!important;
}
#b3.lm-bullets {
    top: 340px!important;
}
#b4.lm-bullets {
    top: 380px!important;
}
#b5.lm-bullets {
    top: 420px!important;
}
.lm-downbutton {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 51px;
    top: 460px;
    background-color: #00ad8c;
}
.lm-downbutton img {
    width: 50px;
    height: 50px;
}
.itm-display-none {
    /* display: none!important; */
    opacity: 0;
    transition: all ease 0.2s;
}
.line-plus {
    height: 285px!important;
    transition: height 0.1s linear;
    -webkit-transition: height 0.1s linear;
}
@-prefix-keyframes height {
    from {height: 0;}
    to {height: 360px;}
}
.img-button-transform {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transition: all 0.6s ease-in-out 0s;
    -webkit-transition: all 0.6s ease-in-out 0s;
    opacity: 0;
    transition: all ease 0.4s;
}
.img-menu-transform {
    visibility: visible!important;
    z-index: 100;
}
#menu-buttom-image,
#close-menu-buttom-image {
    visibility: hidden;
    position: absolute!important;
    top: 0!important;
}
    /* Menu emergente */
    .menu-over-all {
        width: 0px;
        height: 100%;
        background-color: rgba(61, 64, 72, 0.9686274509803922);; /*#3d4048;*/
        position: fixed;
        top: 48px;
        left: 45px;
        z-index: 2000;
        text-align: left;
        display: table;
    }
    .menu-animarion-width {
        width: 95%!important;
        transition-property: width;
        transition-duration: 0.3s;
        transition-timing-function: linear;
    }
    .menu-animarion-width-close {
        width: 0px!important;
        transition-property: width;
        transition-duration: 0.3s;
        transition-timing-function: linear;
    }
    .over-menu {
        display: table-cell;
        vertical-align: middle;
        width: 0px;
        height: 200px;
        background-image: url('/assets/img/show_menu_icon.png');
        background-repeat: no-repeat;
        background-position: left center;
    }
    .over-menu.open {
        width: 800px!important;
        transition-property: width;
        transition-duration: 0.6s;
        transition-timing-function: linear;
    }
    .over-menu.close {
        opacity: 0;
        transition: all ease 0.2s;
    }
    .itm-container {
        display: flex;
        justify-content: space-evenly;
    }
    .itm-container .itm-menu {
        font-family: 'Gotham-Thin';
        width: auto;
        height: 30px;
        margin: 5px;
        display: none;
    }
    .itm-container .itm-menu.open {
        display: block;
        -webkit-animation: fadeInFromNone 0.7s ease-out;
        -moz-animation: fadeInFromNone 0.7s ease-out;
        -o-animation: fadeInFromNone 0.7s ease-out;
        animation: fadeInFromNone 0.7s ease-out;
    }
    .itm-container .itm-menu a {
        text-decoration: none;
        color: #FFF;
    }

    @-webkit-keyframes fadeInFromNone {
        0% {
            display: none;
            opacity: 0;
        }
    
        1% {
            display: block;
            opacity: 0;
        }
    
        100% {
            display: block;
            opacity: 1;
        }
    }
    
    @-moz-keyframes fadeInFromNone {
        0% {
            display: none;
            opacity: 0;
        }
    
        1% {
            display: block;
            opacity: 0;
        }
    
        100% {
            display: block;
            opacity: 1;
        }
    }
    
    @-o-keyframes fadeInFromNone {
        0% {
            display: none;
            opacity: 0;
        }
    
        1% {
            display: block;
            opacity: 0;
        }
    
        100% {
            display: block;
            opacity: 1;
        }
    }
    
    @keyframes fadeInFromNone {
        0% {
            display: none;
            opacity: 0;
        }
    
        1% {
            display: block;
            opacity: 0;
        }
    
        100% {
            display: block;
            opacity: 1;
        }
    }


/*
    Cuerpo
*/
.full {
    padding: 0 !important;
    margin: 0 auto !important;
    background-size: cover;
    overflow: hidden;
}

/*
    Tipografía
*/
h2 {
    font-family: 'Gotham-Black';
    font-size: 50px;
}
p {
    font-family: 'MyriadPro-Regular';
    font-size: 14px;
}

/* Contenedor de combo de imágenes */
.images_openout {
    width: 377px;
    height: 505px;
}
.images_openout .image_oo {
    position: absolute;
}
/* Ajustes para fondo de contenedor de combo de imágenes */
.adjust-left {
    width: 84px;
    height: 441px;
    left: 247px;
    top: 104px;
    position: absolute;
    background-color: rgba(84, 87, 92, 0.31);
}
.adjust-right {
    width: 98px;
    height: 485px;
    right: 0px;
    top: 70px;
    position: absolute;
    background-color: rgba(84, 87, 92, 0.31);
}

/* Bloque de texto */
.block-text {
    width: 416px;
    color: #FFF;
}
.block-text h2 {
    margin-bottom: 41px;
}

/* Bloque descriptivo en 'Nuestra experiencia' */
.exp-mod {
    width: 303px;
    height: 235px;
    margin-left: 182px;
    padding-top: 30px;
}
.em-pointer {
    width: 165px;
    height: 2px;
    background-color: #A1A3A6;
    right: -82px;
    bottom: 149px;
    position: absolute;
}
.em-logo {
    padding-left: 67px;
}
.em-logo img {
    width: 131px
}
.em-description {
    margin-top: 30px;
}
.fix-zindex-1 {
    z-index: 1!important;
}
.fix-zindex-2 {
    z-index: 2!important;
}
.fix-col-exp-mod {
    padding-top: 250px;
}

/*
    Aquí comienza la personalización de la pagina
*/

    /*
        Contenido 1 (Desarrollo)
    */
    /* Ajuste de contenedor */
    .container.ub-container-desarrollo {
        padding-top: 190px;
        padding-left: 165px;
    }
    /* Menu de navegación principal */
    .top-menu {
        font-family: 'Gotham-Thin';
        position: absolute;
        top: 105px;
        left: 450px;
        margin: auto;
        padding:0;
        color: #FFF;
        z-index: 100;
    }
    .top-menu ul {
        list-style: none;
    }
    .top-menu li {
        font-size: 16px;
        display: inline;
        padding: 0 25px;
    }
    .top-menu a:hover {
        color:rgb(207, 207, 207);
    }
    .top-menu a,
    .top-menu ul li a {
        text-decoration:none;
        color: #FFF;
    }
    /* Sección (Desarrollamos) */
    .full.secction_desarrollo {
        width: 100%;
        min-height: 100%;
        background-image:url('../img/bg_01.jpg');
        -webkit-animation-name: move-bg;
        -webkit-animation-duration: .60s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-iteration-count: 1;
    }
    /* Ajuste de columna */
    .col-adjust-desarrollo {
        padding-top: 303px;
    }
    /* Ajuste de combo de imágenes de sección desarrollo */
    .images_openout .image_oo.d1 {
        right: 231px;
        top: 94px;
    }
    .images_openout .image_oo.d2 {
        right: 65px;
        top: 114px;
    }
    .images_openout .image_oo.d2 img,
    .images_openout .image_oo.d1 img {
        width: 144px;
    }
    .images_openout .image_oo.d3 {
        right: 0px;
    }
    .images_openout .image_oo.d3 img {
        width: 45px;
    }
    /* Iconos sociales */
    .social-icons {
        text-align: center;
        position: absolute;
        right: 40px;
        bottom: 6px;
        width: 24px;
        height: 75px;
        z-index: 1000;
    }
    .social-icons a {
        color: #FFF;
        text-decoration: none;
    }
    /* Grid Central */
    .midle-grid {
        width: 100%;
        height: 200px;
        position: absolute;
        bottom: -99px;
        background-image:url('../img/regilla.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    /* Cinta de pie de pagina */
    .top-tape {
        margin-top: -86px;
        width: 100%;
        height: 110px;
        background-color: #43464F; /* #43464F */
    }

    /*
        Contenido 2 (Que hacemos)
    */
    /* Sección Qué hacemos */
    .full.section_que_hacemos {
        width: 100%;
        min-height: 100%;
        background-image:url('../img/urbanissa_logo.png');
        background-repeat: no-repeat;
        background-size: 600px auto;
        background-position: right top;
    }
    /* Ajuste de contenedor */
    .container.ub-container-que-hacemos {
        padding-top: 190px;
        padding-left: 165px;
    }
    /* Bloque de texto */
    .block-text.qa {
        width: 441px!important;
    }
    .block-text.qa h2 {
        margin-bottom: 63px!important;
    }
    .block-text.qa .midle-line {
        width: 535px;
        height: 1px;
        position: relative;
        left: 90px;
        bottom: 37px;
        background-color: #FFF;
    }
    /* Contenedor de combo de imágenes */
    .images_openout.qa {
        position: relative;
        float: right;
        margin-top: -89px;
        width: 377px;
        height: 505px;
    }
    .images_openout.qa .image_oo.e1 {
        right: 231px;
        top: 94px;
    }
    .images_openout.qa .image_oo.e2 {
        right: 65px;
        top: 114px;
    }
    .images_openout.qa .image_oo.e2 img,
    .images_openout.qa .image_oo.e1 img {
        width: 144px;
    }
    .images_openout.qa .image_oo.e3 {
        right: 0px;
    }
    .images_openout.qa .image_oo.e3 img {
        width: 45px;
    }
    .adjust-left.fix {
        left: 107px!important;
    }

    /*
        Contenedor 3 (Nuestra experiencia)
    */
    .full.section_nuestra-experiencia {
        width: 100%;
        min-height: 100%;
        background-color: #FFF!important;
    }
    /* Linea izquierda */
    .left-line {
        width: 15px;
        height: 389px;
        margin-left: 200px;
        margin-top: -30px;
        z-index: 10;
        position: absolute;
        background-color: #8C8E90;
    }
    /* Ajuste de contenedor */
    .container.ub-container-nuestra-experiencia {
        padding-top: 190px;
        padding-left: 165px;
    }
    /* Bloque de texto */
    .block-text.ne {
        width: 424px!important;
        padding-top: 49px;
        color: #43464F!important;
    }
    .block-text.ne p {
        margin-left: -41px;
    }
    .images_openout.ne {
        position: relative;
        float: right;
        width: 526px;
        height: 587px;
        background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url('../img/urbanissa_logo.png');
        background-repeat: no-repeat;
        background-size: 526px auto;
        background-position: right top;
    }
    .images_openout.ne .image_oo.f1 {
        left: 62px;
        top: 94px;
    }
    .images_openout.ne .image_oo.f2 {
        left: 233px;
        top: 114px;
    }
    .images_openout.ne .image_oo.f2 img,
    .images_openout.ne .image_oo.f1 img {
        width: 144px;
    }
    .images_openout.ne .image_oo.f3 {
        right: 73px;
    }
    .images_openout.ne .image_oo.f3 img {
        width: 45px;
    }
    .adjust-left.ne-fix {
        left: 179px!important;
    }
    .adjust-right.ne-fix {
        right: 73px!important;
    }

    /*
        Contenedor 4 (Contacto)
    */
    .full.section_contacto {
        width: 100%;
        /* padding-top: 80px!important; */
        color: #FFF;
        font-family: 'Gotham-Thin'!important;
        font-size: 14px;
        margin-bottom: 80px!important;
    }
    /* Menu inferior */
    .bottom-menu {}
    ul.bottom-menu {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    ul.bottom-menu li {
        display: inline;
        margin-bottom: 10px;
    }
    ul.bottom-menu li a {
        text-decoration: none;
        color: #FFF;
    }
    ul.bottom-menu li a:hover {
        color:rgb(207, 207, 207);
    }
    .address p {
        font-family: 'Gotham-Thin'!important;
    }
    .address a {
        color: white;
    }
    .address p.less {
        margin-bottom: 0px!important;
    }
    .footer-social-icons {
        margin-top: 56px;
    }
    .footer-social-icons a {
        margin-right: 15px;
        text-decoration: none;
        color: #FFF;
    }
    .footer-social-icons a:hover {
        color:rgb(207, 207, 207);
    }

/* Mapa footes */
#urban-map {
    width: 100%;
    height: 400px;
    margin-top: 80px;
    margin-bottom: 80px;
}


/* Animacion de background */
@-webkit-keyframes move-bg {
	from {-webkit-transform: translateY(8%);}
	to { -webkit-transform: translateY(0);}
}

.desarrollamos-image,
.que_hacemos-image,
.las_grullas-image,
.paraje-image,
.capilla-image {
    opacity: 0;
}

.media-test {
    width: 90px;
    height: 30px;
    background-color: #000;
    color: #FFF;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 4000;
}

.alternative-menu {
    position: fixed;
    width: 152px;
    height: auto;
    top: 10px;
    left: 52px;
    bottom: 10px;
    z-index: 2001;
    /* background-color: gray; */
    transition:0.5s;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
}
.alternative-menu.move {
    left: -22px;
}

/* 
Media queries
 */
/* 
    Breackpoint
*/
@media only screen and (min-width: 768px) {
    /* .media-test::after {
        content: " 768 ";
    } */
}
/* 
@media only screen and (min-width: 992px) {
    .media-test::after {
        content: " 992 ";
    }
}
@media only screen and (min-width: 992px) {
    .media-test::after {
        content: " 992 ";
    }
}
@media only screen and (min-width: 1280px) {
    .media-test::after {
        content: " 1280 ";
    }
} */

/* En este breack */
@media screen and ( max-height: 550px ) {
    .media-test::after {
        content: " 699H ";
    }
    .lm-bottom-line {
        display: none;
    }
}