/* PRIMARY PAGES */

/* INDEX */
/* ABOUT */
/* WORK */
/* CONNECT */



/* HERO -------------------------------------------------- */

.hero{
    width: 100%;    
    position: relative;
    overflow: hidden;
    background-size: cover; 
}

.hero img{
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    position: absolute;
    width: 100%;
}

.hero video{
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    position: absolute;
    width: 100%;
    z-index: -1;
}

@media screen and (min-width: 1024px){
    .hero{height: 575px;}
}


@media screen and (max-width: 1024px){
    .hero{height: 200px;}
}

.hero-overlay{
    /*position: absolute;*/
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(33, 41, 35, 1));
    z-index: 999;
    width: 100%;
    height: 100%;

}


/* NAV --------------------------------------------------- */

.navbar{
    width: 100%;
    position: sticky;
    top:0;
    z-index: 10000;
}

.navbar-content{
    /*width: 800px;*/
    margin: auto;
    display: flex;
}

.navlink{
    /*padding: 15px 60px;*/
    color:white;
    text-decoration: none;
    font-weight: 200;
    text-transform: uppercase;
    transition: 2.5s;
}

.navlink:hover{
    background-color: #FFC42C;
    color: #2C347E;
    transition: 0.5s;
}

@media screen and (min-width: 1024px){
    .navbar-content{
        width: 800px;        
        margin: auto;
    }
    .navlink{
        padding: 15px 60px;
        letter-spacing: 5px;
    }

}

@media screen and (max-width: 1024px){
    .navbar-content{
        width: 400px;
        margin: auto;
    }
    .navlink{
        padding: 15px 20px;
        letter-spacing: 2px;
    }

}

.active{border: solid 1px #FFC42C; color: #FFC42C;}












/* BLOCKS --------------------------------------------------------*/

.block{
	padding: 20px;
	text-decoration: none;
    margin: 0;
}


/* IMAGE BOXES --------------------------------------------------------*/


.img-box{
    padding: 0px;
    margin: auto;
    /*flex: 1;*/
    border-radius: 10px;
    overflow: hidden;
    background-size: cover; 
    position: relative;    
}

.img-box img{
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    position: absolute;
    width: 120%;
}


@media screen and (min-width: 1024px){
    .img-box{
        width: 50%;
        height: 100%;
        flex: 1;
    }    
}
@media screen and (max-width: 1024px){
    .img-box{
       width: 100%;
       flex:3;
    }    
}



/* TEXT BOXES --------------------------------------------------------*/


.txt-box{
    margin: auto;
    height: auto;
    flex: 1;  
    position: relative;
}

.txt-container{margin: auto;}

.title{width: auto;}


@media screen and (min-width: 1024px){
    .txt-box{
        padding: 80px 0px;
        /*width: 50%;*/
    }
    .txt-container{
        width: 550px;
    }
    .title{
        height: 115px;
    }
}


@media screen and (max-width: 1024px){
    .txt-box{
        padding: 20px 0px;
    }
    .txt-container{
        width: 100%;
    }
    .title{
        height: 95px;
        padding: 20px 0;
    }
}







/* CUSTOM : INFO BLOCKS ------------------------------------------------- */


.info .txt-box{transition: 0.6s}


@media screen and (min-width: 1024px){
	.info {
        height: 400px;
    } 
    .info .txt-container{
        width: 550px;
    }
    .info:hover .txt-box{
        flex: 1.5;
        transition: 0.65s;
    }
    .info .more-info{
        transition: 0.5s;
        opacity: 0;
        margin-top: -50px;
    }
    .info:hover .more-info{
        transition: 0.35s;
        opacity: 1;
        margin-top: 15px;
        transition-delay: 0.5s;
    }
    .info .img-box img{width: 120%; transition: 0.35s;}
    .info:hover .img-box img{width: 100%; transition: 0.35s;}

}

@media screen and (max-width: 1024px){
	.info {
        height: 800px;
    }
    .info .txt-container{
        width: 100%;
    }
    .info:hover .txt-box{
        flex: 1;
    }
    .info .more-info{
        opacity: 1;
        margin-top: 15px;
    }
    .info:hover .more-info{
        opacity: 1;
        margin-top: 15px;
    }

    .info .img-box img{width: 150%;}
}

.more-info img{margin-top: 20px; width: 100%;} /*arrow*/








/* CUSTOM : ABOUT BLOCKS ------------------------------------------------- */

.about img{width: 150%;}

.about .title{padding-bottom: 20px; width: 100%; height: auto;}

.about p{padding-bottom: 20px; text-align: justify;}

@media screen and (min-width: 1024px){
    .about{height: 800px;}
    .about .row{gap:20px;}
}

@media screen and (max-width: 1024px){
    .about{height: 1300px;}
}

@media screen and (min-width: 1024px){
    .about .img-box{
        height: 100%; /* can this be universal? */
    }    
}
@media screen and (max-width: 1024px){
    .about .img-box{
        width: 100%; /* can this be universal? */
    }    
}





/* CUSTOM : CONNECT BLOCKS ------------------------------------------------- */


/*.connect .title{width: 100%;}*/

@media screen and (min-width: 1024px){
    .connect {
        height: 350px;
        width: 70%;
        padding: 0 15%;
    } 
    /*.connect .img-box{flex: 1;}    */
    .connect .img-box img{
        width: 200px;
        transition: 0.65s
    }
    .connect:hover .img-box img{
        width: 250px;
        transition: 0.65s;
    }
    .connect .txt-box{
        flex: 3;
        transition: 0.65s;
    }
    .connect:hover .txt-box{
        flex: 2;
        transition: 0.65s;
    }
    .connect .txt-container{
        width: 585px;
    }
    .connect .title{height: 95px; padding: 10px 0;}


    .connect{background-color: #212923; transition: 5s;}
    .connect:hover{background-color: #AF8CE8; transition: 2s;}

    .connect p{color: #FFC42C; transition: 2s;}
    .connect:hover p{color: #2C347E; transition: 1.25s;}
}

@media screen and (max-width: 1024px){
    .connect {
        height: 500px;
    }
    .connect .img-box img{
        width: 200px;
    }
    .connect:hover .img-box img{
        width: 200px;
    }
    .connect .txt-container{
        width: 100%;
    }    
    .connect:hover .txt-box{
        flex: 2;
    }
    .connect .title{height: 70px;}
}








/* ART BLOCKS --------------------------------------------------------------------------------------------------------------*/


.category {
    padding: 10px 0; 
    margin: 0; 
    overflow: hidden; 
    position: relative;
}

/*.category .header{display: flex;}*/

@media screen and (min-width: 1024px) {
    .category .header {
        /*flex-direction: row;*/
        margin: 10px 250px;
        gap: 20px;
    }
}

@media screen and (max-width: 1024px) {
    .category .header { 
        /*flex-direction: column;*/
        margin: 0px 20px;
    }
}
.category .title{width: auto;}

@media screen and (min-width: 1024px){
    .category .title{
        flex: 1;
        height: 115px;
    }
    .category .blurb{
        flex: 1;
    }
}

@media screen and (max-width: 1024px){
    .category .title{
        flex: 1;
        height: 90px;
    }
    .category .blurb{
        flex: 1; 
        padding: 20px 0;
    }
}

.category .row{margin: auto; gap: 10px; margin: 0px 250px; padding:0px 0px}

@media screen and (min-width: 1024px){
    .category{height: auto;}
    .category .row{margin: 10px 250px;}
}

@media screen and (max-width: 1024px){
    .category .row{margin: 0px 20px; height: 480px;}    
}




./*section-title{background-color: yellow;}

.label{
    text-transform: uppercase; 
    position: absolute;
    width: 94%;
    letter-spacing: 18px;
    font-size: 10.75px;
    padding: 2% 3%;
    z-index: 999;
    mix-blend-mode: difference;

}*/

@media screen and (max-width: 1024px){
    .label{
        position: fixed; 
        top:0%;
        letter-spacing: 5px;
        font-size: 10px;
    }   

}


.art-cover{
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
    
    transition: 1s;
    flex: 1;
    border-radius: 10px;
    background-size: cover; 
    background-position: center;
}

.art-cover img {width: 100%; display: block;}




@media screen and (min-width: 1024px){
    .art-cover{height: 360px;}
    .art-cover:hover{flex: 1.5; transition: 0.75s;}
    .art-cover:hover .preview{bottom: 0; transition: 1s;} 
    
}

@media screen and (max-width: 1024px){
    /*.art-cover{height: 480px;}*/
}






.preview{padding: 20px; transition: 1s; width: 320px;}

@media screen and (min-width: 1024px){
    .preview{bottom: -110px; }
}

@media screen and (max-width: 1024px){
    .preview{bottom: -110px;}
}







.over-image-txt-box{z-index: 666; position: absolute;}/*absolute is issue in secondary pages*/
    .over-image-txt-box img{width: 100%;}/*arrow svg*/             



.overlay{background-color: #000000; opacity: 0%; width: 100%; height: 100%; position: absolute; transition: 1s;}
    .art-cover:hover .overlay{opacity: 80%; transition: 1s;}



.date{top:0; align-content: center; text-align: center; width: 90%; padding: 10px 5%;}

@media screen and (max-width: 1024px){
    .date{display: none;}
}