*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Pathway Extreme',sans-serif;
background:black;
color:white;
overflow:hidden;

}

.portfolio-page{

background:#e5e5e5;
color:#333;

}

/* LAYOUT GENERAL */

.container{

display:grid;
grid-template-columns:10% 50% 40%;
max-width:1200px;
height:800px;
margin:auto;

}


/* MENU */

.menu-column{

display:flex;
flex-direction:column;
align-items:center;
padding-top:30px;

}

.menu-icon{

font-size:26px;
cursor:pointer;

}

.vertical-text{

transform:rotate(-90deg);
margin-top:200px;
letter-spacing:4px;
font-size:50px;


}


/* CONTENIDO */

.content-column{

position:relative;
padding:90px 80px;

}

.section{

position:absolute;
opacity:0;
transform:translateY(40px);
transition:.6s;

}

.section.active{

opacity:1;
transform:translateY(0);
position:relative;

}

/* TITULOS */
h1{

font-size:60px;
font-weight:300;
letter-spacing:4px;
margin-bottom:30px;

}

/* TEXTO */
p{

line-height:1.6;
font-size:18px;

}


/* FLECHAS */

.arrows{

position:absolute;
bottom:120px;
left:80px;

}

.arrow{

font-size:35px;
cursor:pointer;
margin:10px 0;

}


/* FLECHAS SLIDER */

.slider-arrows{
position:absolute;
bottom:120px;
left:80px;
}

.slider-arrow{
font-size:35px;
cursor:pointer;
margin:10px 0;
}

/* LOGO */

.logo-fixed{

position:absolute;
bottom:40px;
right:40px;

}

.logo-fixed img{

width:70px;

}

.quote{

font-size:22px;
line-height:1.5;
margin-top:80px;

}

.quotes{

font-size:50px;
color:#999;

}


/* IMAGEN DERECHA */

.image-column{

background-size:cover;
background-position:center;
transition:background-image .6s ease;

}


/* GALERIA */

.gallery{

height:660px;            /* espacio para 3 imágenes */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
overflow:hidden;

}

.gallery-track{

display:flex;
flex-direction:column;
gap:20px;
transition:transform .5s ease;

}

.gallery img{

width:320px;
height:200px;
object-fit:cover;

cursor:pointer;

transition:.3s;

}

.gallery img:hover{

transform:scale(1.05);

}

.gallery-arrow{

font-size:30px;
cursor:pointer;
margin:10px 0;

}


/* LIGHTBOX */

.lightbox{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,.85);

display:flex;
align-items:center;
justify-content:center;

opacity:0;
pointer-events:none;

transition:.4s;

z-index:999;

}

.lightbox.active{

opacity:1;
pointer-events:auto;

}

.lightbox img{

max-width:80%;
max-height:80%;

}

.lightbox-close{

position:absolute;
top:40px;
right:60px;
font-size:40px;
color:white;
cursor:pointer;

}


/* MENU FULLSCREEN */

.menu-overlay{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:black;

display:flex;
justify-content:center;
align-items:center;

opacity:0;
pointer-events:none;

transition:.5s;

}

.menu-overlay.active{

opacity:1;
pointer-events:auto;

}

.menu-nav{

display:flex;
flex-direction:column;
gap:40px;

}

.menu-nav a{

font-size:40px;
color:white;
text-decoration:none;
opacity:.7;

}


.menu-nav a:hover{

opacity:1;

}

/* RESPONSIVE PARA TODAS LAS PAGINAS */

@media(max-width:900px){

.menu-nav a{

font-size:38px;

}

.container{

grid-template-columns:1fr;
height:auto;

}

.menu-column{

flex-direction:row;
justify-content:space-between;
padding:20px;

}

.vertical-text{

transform:none;
margin-top:0;

}

.content-column{

padding:40px;

}

.image-column{

height:400px;

}

body{

overflow:auto;

}

}