@charset "UTF-8";

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: rgb(19,30,41);
}

*{
      -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}


.hidden{
  opacity: 0;
}

.mt-0{
  margin-top: 0;
}

/*---------------- structure -------------------*/


.section{
  padding: 10% 15%;
}
.section.video{
  padding: 0 !important;
}
@media all and ( max-width: 600px){
  .section{
    padding: 10% 10%;
  }
}

.section > div{
  max-width: 640px;
  margin:auto;
}



.column{
  width: 50%;
}
.column:last-child{
  float: right;
}
@media all and ( max-width: 600px){
  .column {
    float: none;
    width: 100%;
  }
}



/*---------------- typography -------------------*/


h4{
  margin-top: 3em;
}

#text-content{
  width: 100%;
  position: relative;
  top: 100vh;
}




p:last-child{
  margin-bottom: 0;
}


.caps{
  text-transform: uppercase;
}
.bold{
  font-weight: bold;
}

[class^="icon-"]{
  padding-right: 5px;
}




#contact li{
  margin-bottom: .5rem;
}



#intro p {
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.3;
}

#menu h3{
  margin-top: 2rem;
}


/*---------------- header -------------------*/


header{
  position: relative;
  padding: 45px 60px;
  /*pointer-events: none;*/
}

@media all and ( max-width: 600px){
  header{
    padding: 30px 40px;
  }
}


#logo{
  position: relative;
  /*width: 120px;*/
  height: 75px;
  display: inline-block;
}
#logo img{
  height: 100%;
  width: auto;
}

#addresses{
  float: right;
  text-align: left;
  padding-top:3px; 
  line-height: 1.3;
  font-size: .875rem;
  letter-spacing: .04em;
}

#addresses > p:first-child{
  margin-bottom: 5px;
}


/*---------------- colour -------------------*/

.blue{
  color: rgb(19,30,41);
}

.cream{
  /*color: rgb(242,218,178);*/
  color: rgb(246,236,220);
  color: hsl(45, 100%, 90%);
}

.red{
  color: rgb(237,26,55);
}

.white{
  color: #ffffff;
}


.background-blue{
  background-color: rgb(19,30,41);
}

.background-cream{
  /*color: rgb(242,218,178);*/
  background-color: rgb(246,236,220);
  background-color: hsl(45, 100%, 90%);
}

.background-red{
  background-color: rgb(237,26,55);
}


.background-white{
  background-color: #ffffff;
}




/* -------------- backgrounds ---------------- */

.back{
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color: #000000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


#overlay {
  background-color: rgb(19,30,41);
  opacity: 0;
  -webkit-transition: all 1s; 
  transition: all 1s;
  pointer-events: none;
}

#overlay.solid{
  opacity: 1;
}


.gradient{
  background: -moz-linear-gradient(top, rgba(19,30,41,1) 10%, rgba(19,30,41,0) 100%); 
  background: -webkit-linear-gradient(top, rgba(19,30,41,1) 10%, rgba(19,30,41,0) 100%); 
  background: linear-gradient(to bottom, rgba(19,30,41,1) 10%, rgba(19,30,41,0) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a1b35', endColorstr='#000a1b35',GradientType=0 );
  width: 100%; 
  height:200px; 
  height: 40vh;
  position: fixed; 
  opacity: .7; 
  background-blend-mode: multiply; 
  mix-blend-mode: multiply;
}


#splash{
  width: 100%; 
  height: 400px;
  height:100vh; 
  position: absolute; 
  top:0; 
  pointer-events: none;
}


/* -------------- chevrons ---------------- */


@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}


.bounce {
  -moz-animation: bounce 3s infinite;
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
  position: relative;
}


.angle-down, 
.angle-up{
  width: 20px;
}
.cream.angle-down,
.cream.angle-up{
  fill: rgb(242,218,178);
}
.red.angle-down,
.red.angle-up{
  fill: rgb(237,26,55);
}
.white.angle-down,
.white.angle-up{
  fill: #ffffff;
}


.pointer-wrap{
  position: absolute;
  padding: 24px;
  bottom: 0;
  text-align: center;
  width: 100%;
  text-decoration: none;
  border: none; 

  -webkit-transition: opacity 1s; 
    transition: opacity 1s;
pointer-events: auto;
}

@media all and ( max-width: 600px){
  .pointer-wrap{
  bottom: 48px;
  }
}


#return-to-top{
 text-decoration: none;
 border: none; 
 background-color: transparent;
 cursor: pointer;
 text-align: center;
}