@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;700&display=swap');

@font-face {
    font-family: 'Coolvetica';
    src: url('../fonts/CoolveticaRg-Regular.woff2') format('woff2'),
        url('../fonts/CoolveticaRg-Regular.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica-Bold.woff2') format('woff2'),
        url('../fonts/Helvetica-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica-LightOblique.woff2') format('woff2'),
        url('../fonts/Helvetica-LightOblique.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica-Light.woff2') format('woff2'),
        url('../fonts/Helvetica-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica-BoldOblique.woff2') format('woff2'),
        url('../fonts/Helvetica-BoldOblique.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica-Oblique.woff2') format('woff2'),
        url('../fonts/Helvetica-Oblique.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* SCROLLBAR */

::-webkit-scrollbar {
width: 12px;
}
html {
scrollbar-width: thin;
scrollbar-color: rgba(155, 155, 155, 0) rgba(255, 255, 255, 0);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
display: none;
}
::-webkit-scrollbar-thumb {
background: rgba(191, 191, 191, 1);
border-radius: 10px;
}
* {
scrollbar-color: rgba(191, 191, 191, 1) rgba(255, 255, 255, 0);
}

/* fin scrollbar */

body {
/*font-family: 'Nunito', sans-serif;*/
font-family: 'Helvetica Light', sans-serif;
background:url(../img/bg-imagen.jpg) no-repeat top center #000;
background-size:contain;	
}

ul {
list-style-type:none;
margin-left:-40px;
}

/* VIDEO INICIAL */

#video-inicial {
top: 0;
left: 0;
min-height: 100%;
z-index: -1;
transition: opacity 1s ease-in-out;
width:100%;
max-width:500px;
background:#000;
}

#video-inicial-background {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
transition: opacity 1s ease-in-out;
background:#000;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.mostrar_contenido {
opacity:0;
transition: opacity 1s ease-in-out;
}

/* VIDEO DE FONDO */

#filtro,
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
}
#filtro {
background:rgb(0,0,0,0.2);
z-index:-999;
}

/* HEADER */

header {
width:calc(100% - 120px);
margin:45px auto;
}

header .logo {
position:relative !important;
z-index:9999;
}

header .logo a {
float:left;
text-indent:-9999px;
background:url(../img/logo.svg) no-repeat center;
background-size:contain;
width:152px;
height:63px;
}

.menu-izquierda {
position:relative;
max-width:600px;
max-width:640px;
}

.menu-izquierda ul {
position:relative;
top:20px;
list-style-type:none;
}

.menu-izquierda ul li {
display:inline;
text-align:left;
}

.menu-izquierda ul li a {
display:inline;
text-align:left;
color:#FFFFFF;
font-size:12px;
font-weight: 100;
text-decoration:none;
margin-right:50px;
}

.menu-izquierda ul li:nth-child(1) a {
margin-left:50px;
}

.menu-izquierda ul li a:hover {
text-decoration:underline;	
}

.menu-izquierda ul li a.activo {
font-weight: 500;
}

.menu-derecha {
float:right;
margin-top:-30px;
}

.menu-derecha ul li {
display:inline;
}

.menu-derecha ul li a {
font-weight:100;
font-size:12px;
text-transform:uppercase;
text-decoration:none;	
color:#fff;
}

.menu-derecha ul li:first-child a {
margin-right:20px;	
}

.menu-derecha ul li a:hover {
text-decoration:underline;	
}

.menu-derecha ul li:last-child a {
float:right;
margin:3px 0px 0px 40px;
width:25px;
height:15px;
text-indent:-9999px;
background:url(../img/hamburguesa.svg) no-repeat center;
background:url(../img/puntos.svg) no-repeat center;
background-size:contain;
transition:  all 0.5s ease;
cursor:pointer;
}

.menu-derecha ul li:last-child a:hover {
transform:scale(1.2);
}

/* HOME */

main {
width:calc(100% - 120px);
margin:45px auto;	
}

.home-titulo {
margin:0px auto;
width:100%;
text-align:center;
font-family: 'Coolvetica';
font-size:45px;
font-weight: 100;
color:#fff;
text-transform:uppercase;
margin:140px auto 160px auto;
letter-spacing:0px;
/*letter-spacing:8px;*/
}

.home-titulo span {
font-weight:bold;
}

.projects {
margin:0px auto;
width:100%;	
}

.projects h1 {
font-family: 'Coolvetica';
font-size:15px;
font-weight:100;
color:#fff;	
text-indent:20px;
margin-bottom:30px;
}

.project {
background-repeat:no-repeat;
background-size:cover;
background-position:center;
border-radius:20px;
position: relative;
cursor:pointer;
aspect-ratio: 0.71 !important;
}

.project-box {
width:calc(100% - 50px);
margin-top:150px;
float:left;
background:url(../img/bg-project.png) repeat-x top;
background-size:contain;
padding:0px 25px 25px 25px;
border-radius:0px 0px 10px 10px;
display: flex;
flex-direction: column-reverse; /* Stacks items in reverse order */
height: 280px; /* Set a height for the container */
}

.project-textos h1,
.project-textos h2,
.project-textos h3 {
color:#fff;
text-transform:uppercase;
text-align:center;
margin:0px auto;
}

.project-textos h1 {
text-indent:0px;
font-size:36px;
font-weight:bold;
letter-spacing:2px;
margin-bottom:20px;
overflow-wrap: break-word;
hyphens: auto;
}

.project-textos .texto-grande {
font-size:50px;	
}

.project-textos .texto-chico {
font-size:20px;	
}

.project-textos h2,
.project-textos h3 {
font-size:16.25px;
font-weight:100;
margin-bottom:10px;
}

.project-textos h3 {
font-size:10px;
margin-bottom:0px;
}

.project-link {
width:15px;
margin:10px 10px 0px 0px;
float:right;
}

.project-link a {
float:left;
text-indent:-9999px;
background:url(../img/link.svg) no-repeat center !important;
width:15px !important;
height:15px !important;
}

.project-categoria {
float:left;
font-size:7.5px;
font-family: 'Helvetica', sans-serif;
/*font-family: 'Gotham Book';*/
font-weight: normal;
font-style: normal;
text-transform:uppercase;
color:#fff;
padding:5px 10px;
border-radius:10px;
background:#006EFF;
margin-top:30px;
}

.project-anio {
float:left;
font-size:8px;
font-family: 'Helvetica', sans-serif;
/*font-family: 'Gotham Book';*/
font-weight: normal;
font-style: normal;
text-transform:uppercase;
color:#fff;
padding:5px 10px;
margin-top:30px;
}

.project-botones {
float:right;
margin: 10px 0px 0px 0px;
}

.project-botones ul {
list-style-type:none;
margin-left:-40px;
}

.project-botones ul li {
display:inline;
}

.project-botones ul a {
float:left;
width:25px;
height:25px;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
text-indent:-9999px;
margin:0px 5px;
transition:  all 0.5s ease;
}

.project-botones ul li:first-child a {
margin:0px 5px 0px 0px;	
}

.project-botones ul li:last-child a {
margin:0px 0px 0px 5px;	
}

.project-botones ul a.video {
background-image:url(../img/video.svg);	
}

.project-botones ul a.imagen {
background-image:url(../img/imagen.svg);	
}

.project-botones ul a.documento {
background-image:url(../img/documento.svg);	
}

.project-botones ul a:hover {
transform:scale(1.3);
}

.project-imagen {
position: absolute;
width: calc(100% - 0px);
height: 100%;
z-index: -1;
border-radius: 10px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition:  all 0.5s ease;
}


.project:hover .project-imagen {
opacity:1;
}

.project .project-imagen::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 10px;
}

.project:hover .project-imagen::before {
opacity: 1;
}

.project-datos .amarillo { 
background:#FFD006;
}

.project-datos .verde { 
background:#43A846;
}

.project-datos .azul { 
background:#006EFF;
}

.project-datos .rosa { 
background:#EB0766;
}

.project-datos .naranja { 
background:#EA840A;
}

.project-datos .gris { 
background:#EA840A;
}

.project-datos .negro { 
background:#EA840A;
}

.project-datos .turquesa { 
background:#00ced1;
}

.project-datos .marron { 
background:#76401a;
}

/* BOTONES PROJECTS */

.slick-prev, .slick-next {
background:url(../img/izq.svg) no-repeat center !important;
width:14px !important;
height:40px !important;
}

.slick-next {
background:url(../img/der.svg) no-repeat center !important;
}

.slick-prev:hover {	
}

.slider {
width: 100%;
margin:0px auto;
}

.slick-slide {
margin: 0px 20px;
}

.slick-slide img {
width: 100%;
}

.slick-prev:before,
.slick-next:before {
color: black;
}


.slick-slide {
transition: all ease-in-out .3s;
opacity: 1;
}
    
.slick-active {
opacity: 1;
}

.slick-current {
opacity: 1;
}

/* FOOTER */

footer {
margin:0px auto;
width:100%;
text-align:center;
padding:40px 0px;
}

footer p {
float:left;
margin:0px auto;
width:100%;
text-align:center;
color:#fff;
font-weight:100;
font-size:10px;
padding:10px 0px 40px 0px;
}

footer ul {
float:left;
width:100%;
list-style: none;
text-align: center;	
display: flex;
justify-content: center;
align-items: center;
}

footer ul a {
float:left;
width:25px;
height:25px;
text-indent:-9999px;
background:no-repeat center;
background-size:contain;
margin:0px 10px;
transition:  all 0.5s ease;
}

footer ul a:hover {
transform:scale(1.2);
}

footer ul a.instagram { background:url(../img/instagram.svg); }
footer ul a.facebook { background:url(../img/facebook.svg); }
footer ul a.twitter { background:url(../img/x.svg); }
footer ul a.youtube { background:url(../img/youtube.svg); }
footer ul a.tiktok { background:url(../img/tiktok.svg); }
footer ul a.whatsapp { background:url(../img/whatsapp.svg); }

/* PAGINA PROJECTS */

body.pagina-project {
background-image:none;
background-size:cover !important;
background-position:top center !important;
background-repeat:no-repeat !important;
}

.fade1 {
background:url(../img/bg-fade-1.png) repeat-x top left;
background-size:contain;
width:100%;
left:0px;
height:23%;
position:fixed;
top:0px;
z-index:-1;
}

.fade2 {
background:url(../img/bg-fade-2.png) repeat-x bottom left;
background-size:contain;
width:100%;
left:0px;
height:100%;
/*    height:68%;*/
position:fixed;
bottom:0px;
z-index:-1;
}

.informacion {
margin-top:160px;
width:100%;
max-width:680px;
/*max-width:560px;*/
padding:0px;
}

.informacion h1,
.informacion h2,
.informacion h3,
.informacion h4,
.informacion h5,
.informacion p {
float:left;	
width:100%;
margin:0px auto;
color:#fff;
text-transform:uppercase;
}

.informacion h1 {
font-family: 'Coolvetica';
margin:-40px 0px 55px 0px;
letter-spacing: 10px;
font-size:80px;
line-height: 80%;
font-weight:bold;
}

.informacion h1.texto-grande {
font-size:100px;
}

.informacion h2 {
font-family: 'Helvetica Light', sans-serif;
margin:-40px 0px 30px 0px;
font-size:40px;
font-weight:100;
}

.informacion h3 {
font-family: 'Helvetica Light', sans-serif;
margin:0px 0px 0px 0px;
font-size:18.53px;
font-weight:100;	
}

.informacion h4 {
width:auto !important;
font-size:13.84px;
font-family: 'Helvetica Light', sans-serif;
/*font-family: 'Gotham Book';*/
font-weight: normal;
font-style: normal;
padding:5px 10px;
border-radius:10px;
background:#006EFF;
margin-top:30px;
}

.informacion h5 {
width:auto;
font-size:13.84px;
font-family: 'Coolvetica';
/*font-family: 'Gotham Book';*/
font-weight: normal;
font-style: normal;
padding:5px 10px;
margin-top:30px;
}

.informacion p {
margin:35px 0px;
font-size:14.41px;
font-weight:100;
text-transform:none;	
text-align:justify;
}

.informacion ul {
width:100%;
float:left;
}

.informacion ul li {
display:inline;
float:left;
width:calc(33% - 0px);
width:calc(16.6666666667% - 0px);
width:auto;
}

.informacion ul li a {
float:left;
width:calc(100% - 12px);
border:0.5px solid #fff;
border-radius:20px;
padding:15px 0px;
font-size:10px;
font-family: 'Helvetica-Light', sans-serif;
font-weight: normal;
font-style: normal;
color:#fff;
text-align:center;
text-decoration:none;
margin:6px;
transition: all ease-in-out .3s;
cursor:pointer;
padding: 7.5px;
    width: auto;
    min-width: 80px;
}

.informacion ul li a:hover {
background:#fff;
color:#000;
}

.informacion ul li a.pdf:hover {
background:url(../img/pdfs_hover.svg) no-repeat top right #fff;
background-position:90% 10px;
}

.informacion .pdf {
background:url(../img/pdfs.svg) no-repeat top right;
background-position:90% 5px;
padding-right: 25px;
padding-right:40px;
}


.clear {
clear:both;
}



/* MODULOS */

.modulo_detras {
background:none;
width:100%;
height:100%;
z-index:0;
}

#modulo_fotos, 
#modulo_video {
display:none;
position:fixed;
width:100%;
height:100%;
}

.modulo_fotos_interno {
position:fixed;
width:90%;
height:90%;
left:5%;
top:5%;
overflow:hidden;
overflow-y:scroll;	
}

.modulo_video_interno {
position:fixed;
width:90%;
height:90%;
left:5%;
top:5%;
overflow:hidden;	
}

.modulo_video_interno2 {
position:fixed;
width:90%;
height:90%;
left:5%;
top:5%;
overflow:hidden;	
}

.modulo_video_interno3 {
position:fixed;
width:90%;
height:90%;
left:5%;
top:5%;
overflow:hidden;	
}

#video_project {
width: 100%;
height: 100%;
}

#video_project2 {
width: 100%;
height: 100%;
}

#video_project3 {
width: 100%;
height: 100%;
}

.pantalla_completa {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
z-index: 9999;
display:none;
}

#menu_mobile {
background:url(../img/bg-mobile.png) repeat-y top right;
background-size:contain;
}
.modulo_menu_interno {
    width: auto;
    margin: 130px 70px 0px 0px;
}
.modulo_menu_interno ul {
    text-align: right;
text-decoration: none;
    color: #fff;
    font-weight: 100;
}
.modulo_menu_interno ul li {
	font-size: 30px;
}
.modulo_menu_interno ul a {
    float: right;
    width: 100%;
    text-decoration: none;
    color: #fff;
    font-weight: 100;
    font-size: 30px;
    margin-bottom: 20px;
}
.modulo_menu_interno ul a.activo {
font-weight:500;
}
.modulo_menu_interno ul a:hover {
text-decoration:underline;
}
.modulo_menu_interno ul:nth-of-type(2) {
float:right;
margin-top:30px;
}
.modulo_menu_interno ul:nth-of-type(2) li {
float:right;
}

.modulo_menu_interno ul:nth-of-type(2) li:nth-of-type(2) {
margin:0px 10px;
}

/* FOTOS: MASONRY */

.cerrar-ventana {
background:url(../img/cerrar.svg) no-repeat center;
background-size:contain;
width:34px;
height:34px;
cursor:pointer;
position: absolute;
right: 10px;
top: 10px;
transition: all ease-in-out .3s;
z-index:9999;
}

#cerrar-menu {
background:url(../img/cerrar-menu.svg) no-repeat center;
background-size:contain;
width:34px;
height:34px;
right:35px;
top:35px;
}

#cerrar-menu:hover,
.cerrar-ventana:hover {
transform:scale(1.2);
}

.masonry {
position: relative;
width: 94%;
left: 0%;
display: flex;	
padding: 0px 3vw;
overflow:hidden;
}

.container {
position: relative;
width: 100%;
display: flex;
gap: 30px;
padding: 0px 0vw;
}
.column{
flex:1;
display: flex;
flex-direction: column;
gap:30px;
}
.post{
position: relative;
overflow: hidden;
width:100%;
}
img{
width: 100%;
border-radius: 0px;
height: 100%;
}
.overlay{
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    background:#161616;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity:0;
    transition:0.5s;
    border-radius: 5px;
}

.post:hover .overlay{
    opacity: 0.5;
    cursor: pointer;
}

/* SERVICES */

body.services {
background-image:none;
/*background:url(../img/bg-services.jpg) no-repeat top center #000;*/
background-size:cover !important;
background-position:top center !important;
background-repeat:no-repeat !important;
}

.services .contenido {
max-width:1200px;
margin: 0px auto;
padding-top:50px;
}

.services .container {
display: flex;
gap:10px;
flex-wrap: wrap;
justify-content: center;
}

.services .caja {
width: calc(25% - 50px);
aspect-ratio: 410 / 270;
border: 0;
background: #000;
background: rgb(0,0,0,0.2);
margin: 0px;
display: flex;
align-items: flex-end;
padding: 20px;
color:#fff;
overflow: hidden;
position: relative;
display: flex;
border-radius:20px;
border:1px solid #fff;
}

.services .caja:hover {
cursor:pointer;
background: rgb(0,0,0,0.7);
}

@media screen and (max-width: 1000px) {

.services .caja:hover  .text-container {
overflox-x: hidden;
overflow-y: auto; /* Enable vertical scrollbar */
height:-webkit-fill-available;
}

}

.services .text-container {
position: absolute;
top: 20px;
width: calc(100% - 40px);
text-align: left;
height:-webkit-fill-available;
overflow:hidden;
}

.services  .original-text, .services  .new-text {
display: block;
position: absolute;
width: 100%;
top: 0;
}

.services  .original-text {
font-size: 34px;
}

.services  .new-text {
font-size:15px;
}

.services  .titulo-text {
display: block;
position: absolute;
width: 100%;
top: 0px;
opacity: 0;
font-size:11px;
}

.services  .numero-text {
display: block;
position: absolute;
width: 100%;
bottom: 15px;
font-size:24px;
}

.services .original-text {
opacity: 1;
font-size:24px;
}

.services .new-text {
opacity: 0;
top: 0%;
}

/* ABOUT US */

body.about-us {
background-image:none;
/*background:url(../img/bg-about-us.jpg) no-repeat top center #000;*/
background-size:cover !important;
background-position:top center !important;
background-repeat:no-repeat !important;
}

.about-us .contenido {
margin:0px auto;
width:100%;
max-width:640px;
}

.contenido h1 {
float:left;
width:100%;
height:130px;
background-size:contain;
text-indent:-9999px;
margin:120px 0px 30px 0px;	
}

.about-us .contenido h1 {
background:url(../img/logo-about-us-advisor.svg) no-repeat center;
}

.contenido h2 {
float:left;
width:100%;
font-size:12px;
line-height:20px;
font-weight: 500;
margin-top:30px;
margin:20px 0px;
color:#fff;
text-align:center;	
text-transform:uppercase;
}

.about-us .contenido p {
float:left;
width:100%;
font-size:16px;
line-height:20px;
font-weight: 100;
/*
text-shadow:0.3px 0.3px #fff;
*/
margin:10px;
color:#fff;
text-align:justify;
text-align-last: center;	
}

.about-us .contenido p span {
font-weight: bold;
font-style: italic;
}

.about-us .contenido h3 {
float:left;
width:100%;
font-size:39px;
line-height:40px;
font-weight: 500;
margin:50px auto 90px auto;
color:#fff;
text-align: center;	
text-transform: uppercase;
font-family: 'Coolvetica';
font-weight:normal;
}

.about-us .contenido h4 {
float:left;
width:100%;
font-size:25px;
font-weight: 400;
margin:90px auto 0px auto;
color:#fff;
text-align: center;	
font-weight:normal;
}

.about-us .contenido h5 {
float:left;
width:100%;
font-size:43px;
line-height:50px;
letter-spacing:1.3px;
font-weight: 500;
margin:0px auto 90px auto;
color:#fff;
text-align: center;	
text-transform: uppercase;
font-family: 'Coolvetica';
font-weight:normal;
}

.about-us .degrade {
background:rgb(0,0,0,0.7);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
width:100%;
height:100vh;
position:fixed;
top:0px;
left:0px;
z-index:-1;
}

/* CONTACT LETS CONNECT */

body.contact {
background-image:none;
/*background:url(../img/bg-contact.jpg) no-repeat top center #000;*/
background-size:cover !important;
background-position:top center !important;
background-repeat:no-repeat !important;
}

.contact .contenido h1 {
background:url(../img/logo-contact.svg) no-repeat center;
margin:120px 0px 85px 0px;	
}

.contact p {
margin:0px auto 40px auto;
}

.contact form {
margin:40px auto 0px auto;
width:100%;
max-width:390px;
}

.contact input[type="submit"],
.contact input[type="button"],
.contact input[type="text"],
.contact textarea {
border-radius:10px;
width:calc(100% - 30px);
padding:0px 15px;
height:45px;
background:none;
border:1px solid #fff;
margin-bottom:15px;
color:#fff;
}

.contact textarea {
padding:15px;
height:135px;
}

.contact input[type="submit"],
.contact input[type="button"] {
cursor:pointer;
float:right;
width: 130px;
transition: all ease-in-out .3s;
}

.contact input[type="submit"]:hover,
.contact input[type="button"]:hover {
background:#fff;
color:#000;	
}

label.error {
    color: #f00;
    margin: 0px 0px 10px 0px;
    float: left;
	font-weight: normal;
    font-size: 12px;
}

/* FIX MASONRY FOTOS */
.post .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s;
}
.post:hover .overlay {
  opacity: 1;
  transform: scale(1);
}
.view-more {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-weight:700;
}
.post:hover .view-more {
  opacity: 1;
}
.post:hover .overlay {
    opacity: 0.8;
    cursor: pointer;
}
.view-more {
    color: #fff;
}