/*! normalize.css v8.0.1*/
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/*! locomotive-scroll v4.1.1 */

html.has-scroll-smooth { overflow: hidden; }
html.has-scroll-dragging { -webkit-user-select: none;-moz-user-select: none; -ms-user-select: none; user-select: none; }
.has-scroll-smooth body { overflow: hidden; }
.has-scroll-smooth [data-scroll-container] { min-height: 100vh; }
[data-scroll-direction="horizontal"] [data-scroll-container] { height: 100vh; display: inline-block; white-space: nowrap; }
[data-scroll-direction="horizontal"] [data-scroll-section] { display: inline-block; vertical-align: top; white-space: nowrap; height: 100%; }
.c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100%; transform-origin: center right; transition: transform 0.3s, opacity 0.3s;opacity: 0; }
.c-scrollbar:hover {  transform: scaleX(1.45); }
.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {  opacity: 1; }
[data-scroll-direction="horizontal"] .c-scrollbar { width: 100%;  height: 10px; top: auto; bottom: 0; transform: scaleY(1); }
[data-scroll-direction="horizontal"] .c-scrollbar:hover { transform: scaleY(1.3); }
.c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab; }
.has-scroll-dragging .c-scrollbar_thumb {  cursor: -webkit-grabbing;  cursor: grabbing; }
[data-scroll-direction="horizontal"] .c-scrollbar_thumb { right: auto;  bottom: 0; }

html.has-scroll-smooth {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
}

@font-face {
    font-family: 'helvetica_neuelight';
    src: url('font/HelveticaNeue-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helvetica_neueregular';
    src: url('font/helveticaneue-regular-webfont.woff2') format('woff2'),
         url('font/helveticaneue-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helvetica_neuemedium';
    src: url('font/helveticaneue-medium-webfont.woff2') format('woff2'),
         url('font/helveticaneue-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'helvetica_neuebold';
    src: url('font/helveticaneue-bold-webfont.woff2') format('woff2'),
         url('font/helveticaneue-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html {
  overflow-x: hidden;
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*::before,
*::after {

  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



body {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  transition: opacity ease-out 400ms;
  font-family: 'helvetica_neuelight';
  font-size: 20px;
  color: #100;
}


.navegacion {position: absolute; display: flex; width: auto; top:40px; left:21%; text-align: left; align-items: center; justify-content: center;}
.navegacion .menu {width:2vw; min-width: 50px; cursor: pointer; padding: 4px; margin-right: 5px;}
.navegacion .menu img {width: 100%;}
.navegacion ul {margin: 0; padding: 0px; display: flex; position: relative; top:-2px;}
.navegacion ul li {display: flex; padding: 4px; margin: 0 8px; vertical-align: middle;}
.navegacion ul li a {color: #100; text-decoration: none; font-size:1.2vw;}
.navegacion ul li a:hover {color: #3484FC;}

img {max-width: 100%;}

h2 {font-size: 3.5vw; line-height: 1;  font-weight: normal; margin: 0 0 20px 0; padding-top: 10px; }
h2.tit-bold {font-weight: normal; line-height: 1;  font-family: 'helvetica_neuebold';}
h2.cuadrados-arriba-abajo {font-size: 3vw;}
h2.tit-branding {font-family: 'helvetica_neuelight'; font-weight: normal; margin: 0; padding: 0;}

h2 strong {font-weight: normal; font-family: 'helvetica_neuebold';}
h3 {font-size:3vw; font-weight: normal; font-family: 'helvetica_neuebold'; margin: 0 0 20px 0; padding-top: 10px; }

.texto {font-size: calc(20px + 0.5vw); line-height: 1.3; padding:20px 0px 60px; font-family: 'helvetica_neuelight';}
.row {}
section {padding: 0px 0px;}

.fondo-negro {background-color: #000; color: #fff;}
.fondo-azul {background-color: #3484FC; color: #fff;}
.fondo-azul .texto {color: #000;}
.columnas {display: flex; display: flex; align-items: center; justify-content: center; text-align: center;}
.col-25 {width: 25%; }
.col-50 {width: 50%; }
.col-75 {width: 75%; }
.col-100 {width: 100%; }

.relative {position: relative;}
.padding-10 {padding:6vw;}
.padding-5-20  {padding:4vw 12vw;}
.padding-20-10 {padding:12vw 6vw}
.text-left {text-align: left;}
.centrar { display: flex; align-items: center; justify-content: center;}
.flex-wrap {flex-wrap: wrap;}

.brand-lateral {max-width:95%; margin: 40px auto; background:url(img/art-izq.svg) left top repeat-y, url(img/art-der.svg) right top repeat-y; background-size: 0.8vw auto;}

.imagenes-montadas {position: relative; overflow: hidden;}
.imagenes-montadas .fondo {width: 100%; object-fit: cover; max-height: 75vh;}
.imagenes-montadas .cuadrado {position: absolute; z-index: 2; max-width:34%; left:-16%; top:50%; transform: translateY(-50%);}

h2.cuadrados-arriba-abajo {padding:6vw 3.5vw; width: 30vw; text-align: center; margin:0 auto; background:url(img/3-puntos-horizontal.svg) center top no-repeat, url(img/3-puntos-horizontal.svg) center bottom no-repeat; background-size: 90% auto;}
H2.cuadrados-arriba {padding:6vw 3.5vw 3vw; width: 30vw; text-align: center; margin:0 auto; background:url(img/3-puntos-horizontal.svg) center top no-repeat; background-size: 90% auto;} 

/*cabecera*/
.cabecera .col-50 {min-height:60vh;}
.cabecera .titulo {width: 75%; text-align: left; margin: 0 auto;}
.cabecera .titulo h1 {font-family: 'helvetica_neuebold'; font-weight: normal;  text-transform: uppercase; font-size: 3.5vw; margin: 0; padding: 0;}
.cabecera .titulo h2 {font-family: 'helvetica_neuelight'; font-weight: normal; text-transform: uppercase; font-size: 2.3vw; margin: 0; padding: 0;}
.cabecera .logos {width: 50%;}

.texto-cuadrados {font-size: calc(18px + 0.4vw); margin-top: 40px; padding-left: 2.7vw;  background: transparent url("img/3-puntos.svg") no-repeat  0px center; background-size: auto 100%;}
.texto-montadas {width:75%; margin: 0 0 0 auto;}

/*barnding-art*/
.img-branding-art {max-width: 75%;}
.tit-branding {width: 75%; text-align: left; margin: 0 auto;}

.imagenes-cuadradas .gran {width: 100%; display: block;}
.imagenes-cuadradas .peque {position: absolute; max-width: 75%; left: 50%; top:50%; transform: translate(-50%, -50%); }

/*slider*/
.owl-carousel .owl-nav {position: relative; position: absolute; right:0vw; bottom: -6.5vw;}
.owl-carousel .owl-nav button.owl-prev {display: inline-block; width: 50px; height: 50px; margin: 2px;  background: transparent url("img/flecha2.svg") no-repeat  0px center; background-size: 100%;}
.owl-carousel .owl-nav button.owl-next {display: block; width: 50px; height: 50px;  background: transparent url("img/flecha.svg") no-repeat  0px center; background-size: 100%;}
.owl-carousel .owl-nav button.owl-next span {display: none;}
.bot_next_2,
.bot_next {cursor: pointer; display: inline-block; margin-top: 25px; width: 50px; height: 50px; background: transparent url("img/flecha.svg") no-repeat  0px center; background-size: 100%;}
.bot_prev_2 {cursor: pointer; display: inline-block; margin-top: 25px; width: 50px; height: 50px;   background: transparent url("img/flecha2.svg") no-repeat  0px center; background-size: 100%;}
.proyectos.owl-carousel .owl-nav {width: 75%; margin:0 0 0 auto; }
.bl-btns {position: relative;}
#nuestros-proyectos .btns {position: absolute; right: 100px; top: 15px;}
#nuestros-proyectos .btns div {margin: 3px;}
#nuestros-proyectos .btns div:hover {opacity: 0.7;}

/*video fondo*/
.video { min-width: 100%;  min-height: 100%;   width: auto; height: 100vh; position: absolute; left: 0px; top:0px; /* top: 50%; transform: translate(-50%,-50%); */ }

/*mercarte-alabra*/
#mercarte-alabra-2 img {max-width: 30%; min-width:280px; margin-bottom: 40px;}

/*conexiones*/
.cab-conexiones {background-color: #100;}
.cab-conexiones .foto-conexiones {width:35vw; margin: 0 auto;}
.cab-conexiones .tit-conexiones { width:60vw; position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.clain {position: absolute; bottom: 8.5vw; left: 50%; transform: translateX(-50%); color: #fff; font-size:1.6vw; letter-spacing: 0.05em; text-transform: uppercase;}

/*pie*/
.logos-pie {display: flex; margin: 0 auto 2vw; align-items: center; justify-content: center;}
.logos-pie div {padding: 0.5vw 2vw 3vw;}
.logos-pie div img {width: 12vw;}
.logos-pie div.mail a {font-size:  1.8vw; font-family: 'helvetica_neuebold'; color: #100; text-decoration: none; display: block; padding: 20px 20px 20px 50px; background:url(img/arroba.svg) left center no-repeat; background-size: 40px;}

/**/

.pop-up-nav {display:none; position: fixed; left: 0px; top:0px; width: 100%; height: 100%; z-index: 30; background-color: #100000; color: #fff;}
.pop-up-nav.active {display: block; animation: animacion_aparece 0.8s  backwards  ease; animation-delay: 0.2s}

.cerrar {width: 40px; height: auto; position:  absolute; right: 60px; top:40px; cursor: pointer;}
.nav-pop {position: absolute; width: 50vw; min-width: 1100px; top:50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}

.nav-pop-contacto {padding-top: 40px;}
.nav-pop-contacto img {width: 25vw; margin-bottom: 40px;}
.nav-pop-contacto a {color: #fff;}
.nav-pop-contacto div.txt {padding: 20px 5px 10px; line-height: 1.5;}
.nav-pop-contacto div.txt span {display: block; font-weight: bold;}
.menu_redes {padding:20px 10px 10px 0px;}
.menu_redes  a {width: 35px; text-decoration: none; display: inline-block; margin-right: 5px;}
.menu_redes  a:hover {opacity: 0.7;}
.menu_redes svg {width: 100%;}

/*anima*/
.imagenes-cuadradas .peque {}
.owl-item.active .imagenes-cuadradas .peque {animation: animacion_aparece 0.8s  backwards  ease; animation-delay: 0.5s}
.owl-item.active .cuadrado {animation: animacion_aparece 0.8s  backwards  ease; animation-delay: 1s}

.cabecera .titulo h1 {animation: animacion_aparece_derecha 0.8s  backwards  ease; animation-delay: 0.4s}
.cabecera .titulo h2 {animation: animacion_aparece_derecha 0.8s  backwards  ease; animation-delay: 0.6s}
.cabecera .logos {animation: animacion_aparece 0.8s  backwards  ease; animation-delay: 1s}
.texto-cuadrados {animation: animacion_aparece 0.8s  backwards  ease; animation-delay: 1s}

/**/
.cabecera a, #nuestros-proyectos .btns div  {
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}


@keyframes animacion_aparece_sube {
    0%   {opacity:0; transform: translateY(20%); }
    80%  {opacity:1; transform: translateY(0%); }
    100%  {opacity:1; transform: translateY(0%); }
  }

@keyframes animacion_aparece {
    0%   {opacity:0;  }
    100%  {opacity:1;  }
}

@keyframes animacion_desaparece {
    0%   {opacity:1;  }
    100%  {opacity:0;  }
}
@keyframes animacion_aparece_derecha {
    0%   {opacity:0; transform: translateX(20%); }
    80%  {opacity:1; transform: translateX(0%); }
    100%  {opacity:1; transform: translateX(0%); }
  }

@keyframes animacion_aparece_izquierda {
    0%   {opacity:0; transform: translateX(-20%); }
    80%  {opacity:1; transform: translateX(0%); }
    100%  {opacity:1; transform: translateX(0%); }
  }



/**/



@media only screen and (max-width: 2000px) {
    /*cabecera*/
    .cabecera .col-50 {min-height:600px;}
}


@media only screen and (max-width: 1300px) {
    
    .navegacion {left: 11%;}
    .cabecera .titulo {width: 100%; }
    .cabecera .logos {width: 55%;}
    .cabecera .col-50 {min-height:500px;}

}

.movil {display: none;}
@media only screen and (max-width: 800px) {
    .desktop {display: none;}
    .movil {display: block;}

    .columnas {display: block;}
    .col-25 {width: 100%;}
    .col-50 {width: 100%;}
    .col-75 {width: 100%;}
    .col-100 {width: 100%;}

    .padding-10 {padding:20px;}
    .padding-5-20 {padding: 10px 40px;}

    /**/
    .navegacion {top:30px;}
    .navegacion .menu {min-width: 45px;}
    .navegacion ul {display: none;}
    .navegacion ul li a {font-size: 20px;}
    h2 {font-size: 35px;}
    H2.cuadrados-arriba {font-size: 35px;}
    h2.cuadrados-arriba-abajo {font-size: 35px; margin-bottom: 20px}
    h3 {font-size:30px;}
    .cabecera .titulo h1 {font-size: 35px;}
    .texto {font-size: 18px; padding: 20px 0px 20px;}
    .cabecera .titulo h2 {font-size: 28px;}
    .texto-cuadrados {font-size: 18px; padding-left: 50px;}
    h2.tit-branding {font-size: 40px;}

    .texto-marcas {max-width: 90%; margin: 0 auto;}
    #mercarte-alabra-2 img {min-width:180px; margin-bottom: 20px}
    .navegacion {left: 10%;}

    .proyectos {padding-bottom: 80px;}
    .owl-carousel .owl-nav button.owl-next,
    .bot_next_2, .bot_prev_2, .bot_next {width: 42px;height: 42px;}
    .owl-carousel .owl-nav button.owl-next {left: 0px;}
    .proyectos.owl-carousel .owl-nav {width: 90%;}
    #nuestros-proyectos .btns {  right: 20px; top: -22px;}
    #nuestros-proyectos h3 {margin: 25px 0 0 0;}
    .video {height: auto; width: 125%;}
    .imagenes-montadas .cuadrado {left: 10%;}

    /**/
    .cabecera .titulo {width: 90%; padding:65px 0 40px ;}
    .cabecera .col-50 {min-height:25vh;}
    .cabecera .logos  {width: 100%; padding:40px 70px;}

    .img-branding-art {max-width: 100%;}
    .brand-lateral {background-size: 15px; padding-left: 10%; padding-right: 10%;}

    .tit-branding {width: 90%; padding-right: 5%;}

    H2.cuadrados-arriba {width: 80%; padding: 60px 0px 10px ; }
    h2.cuadrados-arriba-abajo {width: 80%; padding: 60px 0px; }

    .texto-montadas {width: 90%; margin: 0 auto;}


    /*pie*/
    .logos-pie  {position: relative; padding-bottom: 100px; max-width: 90%; margin: 0 auto;}
    .logos-pie div {padding: 20px; }
    .logos-pie div img {width: 150px;}

    .logos-pie div.mail a {font-size:  16px; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);  padding: 10px 10px 10px 30px; background:url(img/arroba.svg) left center no-repeat; background-size: 20px;}


    /*conexiones*/
    .cab-conexiones {padding: 40px 20px;}
    .cab-conexiones .foto-conexiones {width:60vw;}
    .cab-conexiones .tit-conexiones { width:90vw; }
    .clain {bottom: 25px; font-size:17px; width: 90%; }

    /**/
    .cerrar {width: 30px; height: auto; position:  absolute; right: 30px; top:30px; cursor: pointer;}

    .nav-pop {width: 100%; min-width: 100%;}
    .nav-pop-contacto div {display: block;}
    .nav-pop-contacto img {width: 280px; margin-bottom: 30px;}
    .nav-pop-contacto div.txt {font-size: 16px;}
    .menu_redes {padding-top: 5px;}
    .menu_redes a {width: 30px;}

    .navegacion-pop  {margin: 0; padding: 0px 0px 60px; list-style: none; }
    .navegacion-pop  li {display: block; padding: 4px; margin: 0px; list-style: none;}
    .navegacion-pop  li a {color: #fff; text-decoration: none; font-size:22px; font-family: 'helvetica_neuebold'; }
    .navegacion-pop  li a:hover {color: #3484FC;}


}