/* TXT COLOUR --------------------------------------------------------------------*/
.white{color: #ffffff;}
.red{color: #e83e25;}
.dblue{color: #2C347E;}
.green{color: #41694c;}
.charcoal{color: #212923;}
.khaki{color: #37463B;}
.teal{color: #82A5A4;}
.yellow{color: #FFC42C;}
.gold{color: #FFC42C;}
.lilac{color:#AF8CE8;}

/* BACKGROUND COLOUR -------------------------------------------------------------*/
.white-bg{background: #ffffff;}
.red-bg{background: #e83e25;}
.dblue-bg{background: #2C347E;}
.green-bg{background: #41694c;}
.charcoal-bg{background: #212923;}
.khaki-bg{background: #37463B;}
.teal-bg{background: #82A5A4;}
.yellow-bg{background: #FFC42C;}
.lilac-bg{background:#AF8CE8;}
.khaki-gradient{background: linear-gradient(#37463B, #212923);}
.charcoal-dblue-gradient{background: linear-gradient(#212923, #2C347E);}
.green-khaki-gradient{background: linear-gradient(#41694C, #37463B);}
.white-blue-gradient{background: linear-gradient(#fff, #2C347E);}

/* COLOUR EFFECTS -----------------------------------------------------------------*/
.red-glow{
  background-color: #e83e25;
  box-shadow: 0px 0px 17px 5px #e83e25;
}
.teal-glow{
  background-color: #82A5A4;
  box-shadow: 0px 0px 9px 10px #82A5A4;
}
.yellow-glow{
  background-color: #FFC42C;
  box-shadow: 0px 0px 5px 5px #FFC42C;
}
.blur2{-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);}
.blur3{-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
.blur5{-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.blur8{-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}

.image_off, #on-off:hover .image_on{
  display:none;
  transition: 1s;
}
.image_on, #on-off:hover .image_off{
  display:block;
  transition: 1s;
}


/* TYPOGRAPHY ---------------------------------------------------*/
/*@font-face {
  font-family: "onyx";
  src:
    local("onyx"),
    url("fonts/onyx/onyx.otf") format("opentype") tech(color-COLRv1),
    url("fonts/onyx/onyx.otf") format("opentype"),
    url("fonts/onyx/onyx.woff") format("woff");
}*/

@font-face {
  font-family: 'onyx';
  src: url('fonts/onyx/onyx.woff2') format('woff2'),
       url('fonts/onyx/onyx.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps avoid invisible text during load */
}
.onyx{
  text-transform: uppercase;
  font-family: 'onyx', serif;
  font-weight: 200;
}
@font-face {
  font-family: "megavolt";
  src:
    local("megavolt"),
    url("fonts/megavolt/megavolt.otf") format("opentype") tech(color-COLRv1),
    url("fonts/megavolt/megavolt.otf") format("opentype"),
    url("fonts/megavolt/megavolt.woff") format("woff");
}
.megavolt{
  font-family: "megavolt", sans-serif;
  font-weight: 400;
  font-style: normal;
}
h1{font-weight: 100; text-transform: uppercase;}
h2{font-weight: 100; text-transform: uppercase;}
h3{font-weight: 100; text-transform: uppercase;}
h4{font-weight: 500; font-style: italic; text-transform: capitalize;}
h5{font-weight: 500; text-transform: uppercase; letter-spacing: 5px;}
h6{font-weight: 500; letter-spacing: 30px; text-transform: uppercase;}
p{font-weight: 300;}

.uppercase{text-transform: uppercase;}

.text-align-center{text-align: center;}
.align-center{align-content: center;}

.font-weight200{font-weight: 200;}
.font-weight400{font-weight: 400;}
.font-weight500{font-weight: 500;}
.font-weight600{font-weight: 600;}
.font-weight800{font-weight: 800;}


/*@media screen and (min-width: 1024px) {*/
  h1{font-size: 85px; line-height: 83px;} /**/
  h2{font-size: 67px; line-height: 63px;} /**/
  h3{font-size: 45px; line-height: 49px;} /* illustrtion page artwork title */
  h4{font-size: 36px; line-height: 34px;} /* landing page artblock title */
  h5{font-size: 18px; line-height: 60px;} /* subtitle (landing page & illustration page)*/
  h6{font-size: 16px; line-height: 17px;} /* landing page artblock dates */
  p{font-size: 16px; line-height: 22px;}  
/*}*/

@media screen and (max-width: 1024px) {
    h1{font-size: 65px; line-height: 65px;}
    h2{font-size: 50px; line-height: 50px;}
    h3{font-size: 37px; line-height: 37px;}
    p{font-size: 18px; line-height: 26px;} 
}

.title{
  height: auto; 
  text-align: center; 
  max-width: 960px; 
  padding-bottom: 30px; 
  margin: auto;
}

@media screen and (max-width: 1024px){
  /*.row{min-height: 800px;}*/
  .title{text-align: left; width: 100%; padding: 0 0 30px 0;}
}


a{text-decoration: none;}






/* BODY -----------------------------------------------------------------------------*/
*{padding-top: 0; margin: 0;}

body{
  font-family: 'Rubik', sans-serif;
  scroll-behavior: smooth;
  display: block;
  color: #37463B;
}
body::-webkit-scrollbar {
  display: none;
}

.sticky{position: sticky; top:0;}





/* FUNCTIONS ------------------------------------------------------------------------*/
/*.overflow{
  overflow: hidden;
  position: relative;
}*/
.h-scroll{
  overflow: hidden;
  position: relative;
  width: 100%;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.flex1{flex:1;}
.flex2{flex:2;}
.flex3{flex:3;}
.flex4{flex:4;}
.flex5{flex:5;}

/*@media screen and (max-width: 1024px) {
    .flex3{flex: 1;}
}*/

.float-left{text-align: left; float: left;}
.float-right{text-align: right; float: right;}


@media screen and (min-width: 1024px) {
  .row {display: flex; flex-direction: row;}
}

@media screen and (max-width: 1024px) {
  .row {display: flex; flex-direction: column;}
  .flex1{height: auto;}
}

.col{
    flex:1; 
    align-content: center; /*this is problematic*/
    /*background-color: blue; */
    padding: 0; margin: 0; 
    display: block;
}




/* NEW --------------------------------------------------------- */



.padding150-20{padding: 150px 20px;}
@media screen and (max-width: 1024px) {
    .padding150-20{padding: 20px 20px;}
}


.image-width540{width: 540px; border-radius: 10px;}
.image-width680{width: 680px; border-radius: 10px;}
.image-width720{width: 720px; border-radius: 10px;}

@media screen and (max-width: 1024px) {
    .image-width540{width: 100%;}
    .image-width680{width: 100%;}
    .image-width720{width: 100%;}
}



.width80{width: 60%; margin: auto;}
@media screen and (max-width: 1024px) {
    .width80{width: auto; margin: auto;}
}

/*.long-sticky-section{
    height: 1920px;
}

.long-sticky-section {
    height:400px;
}*/



.gallery img{
    width: 100%;
    height: auto;
}




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


.padding20{padding: 20px;}
.padding50-20{padding: 20px 20px;}


/*.width80{width: 80%; padding: 0 10%;}

@media screen and (max-width: 1024px) {
    .width80{width: 100%; padding: 10px;}
}*/

.gap20{gap: 20px;}
.gap10{gap: 10px;}






.image-container{
    overflow: hidden; 
    border-radius: 10px;    
    background-size: cover;
    background-position: center;
}


.text-container{width: 540px; margin: auto;}


@media screen and (max-width: 1024px) {
    .text-container{width: 100%;}
}



.image-height400 .image-container{height: 400px;}
.image-height440 .image-container{height: 440px;}
.image-height600 .image-container{height: 600px;}
.image-height720 .image-container{height: 720px;}
.image-height860 .image-container{height: 860px;}
.image-height1920 .image-container{height: 1920px;}
.image-heightfull .image-container{height: 95vh;}

.image-width300{max-width: 300px;}



@media screen and (max-width: 1024px){
    .image-height400 .image-container{height: 400px;}
    .image-height440 .image-container{height: 600px;}
    .image-height600 .image-container{height: 600px;}
    .image-height720 .image-container{height: 600px;}
    .image-height860 .image-container{height: 600px;}
    .image-heightfull .image-container{height: 600px;}
}





.expand{transition: 1s;}

.reveal-on-hover:hover .expand{flex:0.75; transition: 1s;}

.reveal{margin-top: -100px; opacity: 0; transition: 0.5s;}

.reveal-on-hover:hover .reveal{margin-top: 15px; opacity: 1; transition: 0.35s; transition-delay: 0.2s;}

@media screen and (max-width: 1024px) {
    .reveal{margin-top: 15px; opacity: 1;}

}


.zoom70{background-size: 70%;}
.zoom80{background-size: 80%;}
.zoom90{background-size: 90%;}
.zoom120{background-size: 120%;}
.zoom150{background-size: 150%;}
.zoom200{background-size: 200%;}
.zoom250{background-size: 250%;}
.zoom275{background-size: 275%;}
.zoom300{background-size: 300%;}
.zoom500{background-size: 500%;}


/* SNAPS ------------------------------------------------------- */


/* 1. Global Reset & Base Mobile Styles (Default) */
html, body {
  margin: 0;
  padding: 0;
}

/* Parent Container on Mobile: Regular scrolling */
.snap-container {
  height: auto;
  overflow-y: visible;
}

/* 2. Desktop Snapping Overrides (Screens 768px and wider) */
/* Prevents ugly double scrollbars on desktop */

/*currently prevents primary pages from scrolling at all*/

@media (min-width: 1024px) {
  html, body {
    height: 100%;
    /*overflow: hidden; */
  }

  .snap-container {
    height: 100vh; /* Lock container to viewport height */
    overflow-y: scroll; /* Turn on desktop scrolling */
    scroll-snap-type: y mandatory; /* Enable snapping */
  }

  .page-section {
    height: 96vh; /* Lock sections strictly to full screen */
    min-height: auto; /* Clear the mobile min-height */
    scroll-snap-align: start; /* Snap to top edge */
    /*align-content: center;*/
    
  }
}

@media (max-width: 1024px) {
    /* Child Sections on Mobile: Naturally grow based on content */
    .page-section {
        height: auto;

        /*min-height: 96vh; */
        /* Ensures it is at least full screen, but can grow taller */
        /*box-sizing: border-box;*/
        /*align-content: center;*/
    }

}


















@media screen and (min-width: 1024px) {

    .connect-card .image-container{height: 300px; align-content: center;}

    .connect-card .image-container img{width:40%; float: right;}

    .connect-card .text-container{width: 720px;}

    .connect-card .expand{flex: 0.6; transition: 0.65s;}

    .connect-card:hover .expand{flex:0.7; transition: 0.65s;}

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

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

}

@media screen and (max-width: 1024px) {
    .connect-card .image-container{height: 200px;}
    .connect-card .image-container img{width:40%; padding: 0 30%}
}











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

.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: 420px;}
    .art-cover:hover{flex: 1.85; transition: 0.75s;}
    .art-cover:hover .preview{bottom: 0; transition: 1s;} 
}

@media screen and (max-width: 1024px){
    .art-cover-sm{min-height: 150px;}
    .art-cover-m{min-height: 250px;}
    .art-cover-lg{min-height: 440px;}
}


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

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

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

.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{
    width: 100%; height: 100%; 
    position: absolute; 
    transition: 1s;
    background: linear-gradient(rgba(33,41,35,0.1),rgba(33,41,35,0.5));
}

.art-cover:hover .overlay{background-color: #212923; opacity: 90%; transition: 1s;}

@media screen and (max-width: 1024px){
    .overlay{background: linear-gradient(rgba(33,41,35,0),rgba(33,41,35,0.6)); opacity: 100%;}
}

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

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











/*.hero-intro-card .image-container{height: 860px;}*/

/*@media screen and (max-width: 1024px) {
    .hero-intro-card .image-container{height: 600px;}
}*/




/*.sm-intro-card .image-container{height: 420px;}

@media screen and (max-width: 1024px) {
    .sm-intro-card .image-container{height: 600px;}
}*/




/*.about-hero-card .image-container{height: 860px;}

.about-hero-card p{padding-bottom: 20px;}

@media screen and (max-width: 1024px) {
    .about-hero-card .image-container{height: 600px;}
}*/












/* OLD ------------------------------------------------------*/




/* 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;
        /*width: 600px; /*changed for about page*/
    }
    /*.title{
        height: 115px;
    }*/
}


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





/* CATEGORIES -- pretty sure this is not used for anything --------------------------------------------------------------------------------------------------------------*/


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


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

@media screen and (max-width: 1024px) {
    .category .header { 
        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;}    
}*/




/*.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;
    }   

}*/















/*SECTIONS*********************************************************************************************/
section{
  position: relative;
  display: block;
  height: auto;
  padding: 0;
  margin:0;
}



/*FOOTER*********************************************************************************************/
iframe.footer {
  width: 100%;
  height: 540px; /* match footer content */
  border: none;
  display: block;
  bottom: 0;
  scroll-snap-align: end;
}



iframe.navbar {
  width: 100%;
  height: 33px;
  border: none;
  display: block;
  position: sticky;
  top: 0;
  z-index: 999;
  /*bottom: 0;
  scroll-snap-align: end;*/
}