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

/*BACKGROUND COLOUR*****************************************************************************************/
.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}
.white-bg{background: #ffffff}

/*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,h2{text-transform: uppercase; font-family: 'onyx', serif; font-weight: 200;}
h3{font-weight: 600; font-style: italic; text-transform: capitalize; padding-top: 35px;}
h4{font-weight: 600; font-style: italic; text-transform: capitalize;}
h5{font-weight: 400; text-transform: uppercase; letter-spacing: 3px;}
h6{font-weight: 500; letter-spacing: 30px; text-transform: uppercase;}
p{font-weight: 300;}

.uppercase{text-transform: uppercase;}

.align-center{text-align: 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: 52px; line-height: 52px;} /**/
  h2{font-size: 46px; line-height: 46px;} /**/
  h3{font-size: 46px; line-height: 46px;} /* illustrtion page artwork title */
  h4{font-size: 34px; line-height: 34px;} /* landing page artblock title */
  h5{font-size: 18px; line-height: 50px;} /* subtitle (landing page & illustration page)*/
  h6{font-size: 16px; line-height: 17px;} /* landing page artblock dates */
  p{font-size: 15px; line-height: 22px;}  
/*}*/

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


/*this is an experimental section (for vertical text running down the side of each category, currently not working.)*/




/*this section should be moved eventually*/
.category-label{
  width: 80%;
  margin: auto;
  align-content: center;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
}

h8{
  font-size: 20px;
  letter-spacing: 9px;
  color: white;
  mix-blend-mode: overlay;
  opacity: 65%;
  text-transform: uppercase;
}









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

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







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