/*TXT COLOUR**************************************************************************************/
.red{color: #e83e25;}
.dblue{color: #2C347E;}
.green{color: #41694c;}
.charcoal{color: #212923;}
.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;}
.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;
}
.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;}
h4{font-weight: 400;}
h5{font-weight: 400; text-transform: uppercase;}
h6{font-weight: 700;}
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: 800px) {
  h1{
    font-size:13vw;
    padding: 0vw 0vw 2vw 0vw;
    line-height: 9vw;
    font-weight: 100;
  }
  h2{
    font-size: 10vw;
    line-height: 8vw;
    padding-bottom: 2vw;
  }
  h3{
    font-size: 3.5vw; 
    line-height: 4vw; 
  }
  h4{
    font-size: 1.6vw; 
    line-height: 2.85vw; 
    letter-spacing: 0.02vw; 
   /* padding-bottom: 0.5vw;*/
  }
  h5{font-size: 1.3vw; line-height: 1.85vw; letter-spacing: 0.15vw;} 
  h6{font-size: 1.1vw; line-height: 1.75vw;} 
/*  h6{
    font-size: 0.75vw;
    background-color: rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 0.25vw 0.5vw;
  }*/
  p{font-size: 1.2vw; line-height: 2vw;}
}

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

  
  h3{font-size: 8vw; line-height: 9.5vw;}
  h5{font-size: 4.5vw; line-height: 7vw; letter-spacing: 0.7vw;}
  p{font-size: 3.5vw; line-height: 6.5vw;}
}













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

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


/*@media screen and (min-width: 1400px){body{background-color: red;}}


@media screen and (max-width: 1400px){body{background-color: blue;}}


@media screen and (max-width: 800px){body{background-color: yellow;}}*/












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

.top5{padding-top: 5%;}
.top7{padding-top: 7%;}
.top10{padding-top: 10%;}

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

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

}

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

}











/*SECTIONS*********************************************************************************************/
section{
  position: relative;
  display: block;
  height: auto;
  padding: 0;
  margin:0;
}
.two-equal-columns img{width: 100%;}

.banner img{width: 100%;}

.banner img:hover{box-shadow: 0px 0px 10px rgba(44,52,126,1);}

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

  .two-equal-columns{width: 70%; padding: 0% 15%;}

  .banner{width: 70%; padding: 7% 15%;}

  .copy-center{width: 50%; padding: 0% 25%;}
  .copy-center img{margin-top: 14%;}

  .center-column{width: 70%; padding:5% 15%;}
}

@media screen and (max-width: 800px) {
  .two-equal-columns{width: 100%; padding: 0%;}

  .banner{width: 80%; padding: 10%;}

  .copy-center{width: 90%; padding: 10% 5%;}

  .copy-center img{width: 50%; padding: 0% 25%;}
}










/*BUTTONS*******************************************************************/

.primary-button p{text-transform: uppercase; font-weight: 400;}
/*.primary-button p:hover{text-align: center;}*/
.primary-button a{
  text-decoration: none;
  border-style: none;
  display: block;
  transition: width 0.75s;
}
.primary-button a:hover{
  width: 100%;
  cursor: pointer;
  color: white;
}

@media screen and (min-width: 1400px){
  .primary-button{width: 8.8vw;}
  .primary-button p{
    font-size: 1vw;
    letter-spacing: 0.08vw;
    margin-left: 1vw;
    padding: 0.25vw 0vw;
  }
  .primary-button a{width: 0.2vw; margin: 2vw 0vw;}
}

@media screen and (max-width: 1400px){
  .primary-button{width: 9vw;}
  .primary-button p{
    font-size: 1vw;
    letter-spacing: 0.08vw;
    margin-left: 1vw;
    padding: 0.25vw 0vw;
  }
  .primary-button a{width: 0.2vw; margin: 2vw 0vw;}
}

@media screen and (max-width: 800px){
  .primary-button{width: 100%; margin: 7vw 0vw 0vw 0vw;}
  .primary-button p{
    font-size: 4vw;
    letter-spacing: 0.2vw;
    margin-left: 4vw;
    padding: 1vw 0vw;
  }
  .primary-button a{width: 1vw; margin: 2vw 0vw;}
  .primary-button a:hover{text-align: center;}
}




/*ELEMENTS*****************************************************************************************/
.txt-box100{
  z-index: 999;
}

.tags li{  
  background-color: rgba(0,0,0,0.1);
  border-radius: 15px;  
  list-style-type: none;
}


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

  .copy-center .txt-box100{padding: 6% 2%;}

  .txt-box100{width:100%;padding:4%; margin: 7% 0%;}

  .txt-box100 img{width: 50%;padding: 4% 0%;}

  .row {
    display: flex;
    flex-direction: row;
    gap: 1%;
  }
  .row-item {
    flex: 1;
  }

  .col-25{width: 25%;float: left;}
  .col-75{width: 75%;float: left;}

  .tags{margin-top: 1.5vw; position: relative;}
  .tags li{font-size: 0.75vw; padding: 0.25vw 0.6vw; margin: 0px 1px; display: inline;}
}

@media screen and (max-width: 800px) {
  .txt-box100{width:90%;padding:10% 5%;}
  .txt-box100 img{width: 60%;padding: 0% 20% 5%;}

  .row {width: 100%;}
  .row-item {width: 100%;}
  /*.row-item img {width: 100%;}*/

  .tags {margin-top: 5vw; position: relative;}
  .tags li{font-size: 3vw; padding: 1vw 3vw; margin: 6px 1px; display: inline-block;}
}




/*NAVIGATON****************************************************************************************/

#header{position: fixed; top: 0; z-index: 666;}

.secondary-page-logo{
  z-index: 999;
  position: fixed;
}
.nav{
  z-index: 666;
  position: fixed;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.nav li{
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}
.nav a{text-decoration: none; color: #1C2729;}

@media screen and (min-width: 1400px) {
  .secondary-page-logo{
    top: 10px;
    left: 10px;
    width: 40px;
  } 
 .nav{
    top: 10px;
    right: 10px;
  }
  .nav li{
    padding: 5px 25px;
    font-size: 10px;
    letter-spacing: 0.5px;
    display: inline;
    border: 1px solid #ffffff;
    background-color: rgba(255,255,255,0.4);
  }
  .nav li:hover{
    border: 1px solid #2C347E;
  }
  .page-label{
    right: 10px;
    bottom: 10px;
    /*background-color: rgba(130,165,164,0.3);
    color: #82A5A4;*/
  }
}

@media screen and (max-width: 1400px) {
  .secondary-page-logo{
    top: 10px;
    left: 10px;
    width: 40px;
  } 
 .nav{
    top: 10px;
    right: 10px;
  }
  .nav li{
    padding: 5px 25px;
    font-size: 10px;
    letter-spacing: 0.5px;
    display: inline;
    border: 1px solid #ffffff;
    background-color: rgba(255,255,255,0.4);
  }
  .nav li:hover{
    border: 1px solid #2C347E;
  }
  .page-label{
    right: 10px;
    bottom: 10px;
    /*background-color: rgba(130,165,164,0.3);
    color: #82A5A4;*/
  }
}

@media screen and (max-width: 800px) {
  #header{height: 40vw;}
  .secondary-page-logo{
    width: 10%;
    padding: 2%;
    z-index: 999;
  } 
  .nav{
    top: 2%;
    right: 2%;
    /*width: 90%;
    padding: 25% 5% 2% 5%;*/
    z-index: 666;
  }
  .nav li{
    display: block;
    padding: 1% 0%;
    text-align: right;
    font-size: 3.5vw;
  }
}








/*FOOTER****************************************************************************************************/

/*        
iframe{z-index: 999;}

footer{position: relative; width: 100%; height: auto;border-top: 2px solid #2C347E;}

footer p{font-weight: 400;}
.footernav li{list-style: none; text-transform: uppercase;}
.footernav a{text-decoration: none; color: #2C347E; font-weight: 400;}
.footernav a:hover{color:#E03A22;}


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

  #footer {height: 22vh; bottom: 0;}

  footer{padding: 15px 10px;}
  footer .row{width: 10%;}  
  footer img{width: 100%;}  
  .footernav{padding: 0% 5%;}
  .footernav li{padding: 8%; font-size: 0.85vw}
  footer p{font-size: 0.7vw;}

}

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

  #footer{height: 27vh; bottom: 0;}

  footer{padding: 15px 10px;}
  footer .row{width: 10%;}  
  footer img{width: 100%;} 
  .footernav{padding: 0% 5%;}
  .footernav li{padding: 8%; font-size: 0.85vw;}
  footer p{font-size: 0.7vw;}

}

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

  #footer {height: 70vh; bottom: 0;}

  footer{padding: 0%;}
  footer .row{width: 100%;}
  footer img{width: 20%; padding: 10% 40%;}
  .footernav{padding: 5% 40%; width: 20%;}
  .footernav li{font-size: 5vw; text-align: center; padding: 10% 0%;}
  footer p{font-size: 4vw; text-align: center; width: 80%; padding: 0% 10%;}
 
}*/