/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 3, 2015 */


*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
    font-family: 'gravitylight';
    src: url(fonts/gravity-ultralight.otf);

}

@font-face{
    font-family: 'bodyFont';
    src: url(fonts/Roboto-Regular.ttf);
}


@font-face{
    font-family: 'emphasis';
    src: url(fonts/Roboto-Medium.ttf);
}





/* FORMATTING------------------------------------------------ */

body {
    overflow-x: hidden;

}

/* VIDEO */
.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: -15%;
  width: 125%;
  height: 125%;

}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('images/still.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
}



/*MENU*/

#menu-container {
    position: fixed;
    width: 4em;
    height: auto;
    top: 40%;
    left: -10px;
    z-index: 100;
        border-style: solid;
        border-width: 1px;
    border-color: #FEEC80;

}

ul {
    font-family: 'bodyFont';
  font-size: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
      text-decoration: none;

}
ul li {
  display: block; 
  position: relative;
  float: left;
}
li ul { 
    display: none; 
}

ul li a:link { 
    display: block;
    text-decoration: none;
    color: #FFF; 
    padding: 0 3px 0 3px; 
    margin-left: 40px;
    white-space: nowrap;
    line-height: 25px;
    font: 45px;
    font-family: 'bodyFont';
    outline: none;
    letter-spacing: .3rem;
 

 }

ul li a:hover { 
    color: #FEEC80;
    text-decoration: none;
}

ul li a:visited{ 
    color: #FFF;
    text-decoration: none;
}


ul li a:active { 
    color: #FEEC80;
    text-decoration: none;
}



 /* ANCHOR CHEAT */

 .home {
    position: absolute;
    top: 0;
    left: 0;
 }

 .blurb {
    position: absolute;
    top: 97%;
    left: 0;
    width: 2%;
    height: 2%;
 }

.experience{
    position: absolute;
    top: 197%;
    left: 0;
    width: 2%;
    height: 2%;
 }

.exproute {
    position: absolute;
    top: 305%;
    left: 0;
    width: 2%;
    height: 2%;
 }

.video{
    position: absolute;
    top: 750%;
    left: 0;
    width: 2%;
    height: 2%;
 }


.features{
    position: absolute;
    top: 850%;
    left: 0;
    width: 2%;
    height: 2%;
 }

 .featuresroute{
    position: absolute;
    top: 850%;
    left: 0;
    width: 2%;
    height: 2%;
 }





/* FORM */

.wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height:500%;
}

/*VIDEO SPLASH*/

.splash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000000;
}

.splash h1 {
  font-size: 5em;
    font-family: 'gravitylight';
    color: #FEEC80;
        letter-spacing: 3px;
}

.splash h2 {
    font-size: .75em;
    font-family: 'bodyfont';
    color: #efefef;
    letter-spacing: 2px;
    margin-top: 1em;
}


/*BLURB*/


.blurb { 
position: absolute;
top: 100%;
width: 100%;
height: 100%;
margin-left: 3%;
background-repeat: repeat;
/**background:rgb(0,0,0);  
background: transparent\9;  
background:rgba(0,0,0,0.5); */

}


.blurb h1{

    font-size: 3.5em;
    font-family: 'bodyfont';
    color: #FFF;
    letter-spacing: 2px;
    margin-top: 1em;
    background: #000;
    text-transform: uppercase;


}

.blurbtxt {
    font-size: .75em;
    font-family: 'bodyfont';
    color: #FFF;
    letter-spacing: 2px;
    margin-top: 1em;
    background: #000;
    text-transform: uppercase
}

.blurb-column-1 { 
position: relative;
width: 50%;
margin-left: 15%;


}

.blurb-column-2 { 
margin-left: 40%;
width: 25%;
height: 100%;

margin-top: -25px;
}



/*BLURB*/


.exp { 
position: absolute;
top: 200%;
width: 100%;
height: 100%;
margin-left:0%;
background-repeat: repeat;
/**background:url(255,255,255);  
background: transparent\9;  
background:rgba(255,255,255,.85); */
background-image: url("images/light.png")



}


.exp h1{

    font-size: 3.5em;
    font-family: 'bodyfont';
    color: #FFF;
    letter-spacing: 2px;
    margin-top: 1em;
    background: #000;
    text-transform: uppercase;
}

.blurbtxt {
    font-size: .75em;
    font-family: 'bodyfont';
    color: #FFF;
    letter-spacing: 2px;
    margin-top: 1em;
    background: #000;
    text-transform: uppercase
}

.exp-column-1 { 
position: relative;
width: 50%;
margin-left: 15%;


}

.exp-column-2 { 
margin-left: 40%;
width: 25%;
height: 100%;

margin-top: -25px;
}

.exp a{
    text-decoration: none;
    font-size: .75em;
    font-family: 'bodyfont';
    letter-spacing: 2px;
    margin-top: 1em;
     color: #FEEC80;
    text-transform: uppercase
    -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;

}

.exp a:hover{

  text-decoration: none;
    font-size: .75em;
    font-family: 'bodyfont';
    letter-spacing: 2px;
    margin-top: 1em;
     color: #fff;
    text-transform: uppercase
}






/*VIDEO */

.about{ 
position: absolute;
top: 750%;
width: 100%;
height: 100%;
margin-left: 0px;
background:url(0,0,0);  
background: transparent\9;  
background:rgba(0,0,0,.85);


}

.about-column-1 { 
position: relative;
width: 5%;
margin-left: 15%;

}

.about-column-2 { 
margin-left:20%;
width: 50%;
height: 50%;
margin-top: 10%;
}

.about p {
    text-align: justify;
    font-family: 'akzidenz-grotesk_bq_lightRg', arial;
    font-size: 11px;
    line-height: 18px;
    color: #696969;

}

.about h1{

    font-size: 2em;
    font-family: 'bodyfont';
    color: #efefef;
    letter-spacing: 2px;
    margin-top: 1em;
}






/*TEAM*/

.team{ 
position: absolute;
top: 300%;
width: 100%;
height:450%;
margin-left: 0px;
padding: 50px;
background:url(34,34,34);  
background: transparent\9;  
background:rgba(34,34,34,.95); */


}

/* change the width percentage if you want more margin space or less margin space!! */
.team-wrapper {
  width: 80%;
  margin: auto;
  text-align: left;
}



/* this makes image resize */
.team img {
  width: 100%;
  height: auto;
 /* -webkit-transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;*/
}

.team img.top:hover {
  opacity:0;
}

/* this gives a margin to each member bio */
.grid {
  margin-bottom: 4rem;
}

/* don't delete these two */
.grid:after {
  content:"";
  display: block;
  clear: both;
}

[class^='col-'] {
  float: left;
}

/* columns for member bios */
.col-1of3 { 
  width: 33%;
}

.col-2of3 { 
  width: 66%;
}


.team h1{

    font-size: 1.5em;
    font-family: 'bodyfont';
    color: #000;
    letter-spacing: 2px;
    margin-top: 6em;
    background: #FFF;
    text-transform: uppercase;
    text-align: left;
    padding: 2em;

}

.blurbtxt {
    font-size: .75em;
    font-family: 'bodyfont';
    color: #FFF;
    letter-spacing: 2px;
    margin-top: 1em;
    background: #000;
    text-transform: uppercase
}

.team-column-1 { 
position: relative;
width: 50%;
margin-left: 15%;


}

.team-column-2 { 
margin-left: 40%;
width: 25%;
height: 100%;

margin-top: -25px;
}

.team a{
    text-decoration: none;
    font-size: .75em;
    font-family: 'bodyfont';
    letter-spacing: 2px;
    margin-top: 1em;
     color: #FEEC80;
    text-transform: uppercase
    -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;

}

.team a:hover{

  text-decoration: none;
    font-size: .75em;
    font-family: 'bodyfont';
    letter-spacing: 2px;
    margin-top: 1em;
     color: #fff;
    text-transform: uppercase

}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .categories, .content, .sidebar  {
        margin: 1% 0 1% 0%;
        width: 100%; 
    }
}

@media (max-width: 700px) {
  .col-1of3 {
    width: 100%;
  }

  .col-2of3 {
    width: 100%;
  }

  .team p {
    margin-left: 0;
  }
}






/*BLURB: FEATCH*/


.feat { 
position: absolute;
top: 850%;
width: 100%;
height: 100%;
margin-left:0%;
background-repeat: repeat;
/**background:url(255,255,255);  
background: transparent\9;  
background:rgba(255,255,255,.85); */
background-image: url("images/feat.jpg")



}


.feat h1{

    font-size: 3.5em;
    font-family: 'bodyfont';
    color: #FFF;
    letter-spacing: 2px;
    margin-top: 1em;
    background: #000;
    text-transform: uppercase;
}

.blurbtxt {
    font-size: .75em;
    font-family: 'bodyfont';
    color: #FFF;
    letter-spacing: 2px;
    margin-top: 1em;
    background: #000;
    text-transform: uppercase
}

.feat-column-1 { 
position: relative;
width: 50%;
margin-left: 15%;


}

.feat-column-2 { 
margin-left: 40%;
width: 25%;
height: 100%;

margin-top: -25px;
}

.feat a{
    text-decoration: none;
    font-size: .75em;
    font-family: 'bodyfont';
    letter-spacing: 2px;
    margin-top: 1em;
     color: #000;
    text-transform: uppercase;
    -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  background: #FFF;

}

.feat a:hover{

  text-decoration: none;
    font-size: .75em;
    font-family: 'bodyfont';
    letter-spacing: 2px;
    margin-top: 1em;
     color: #fff;
    text-transform: uppercase
}









/*FEATURES

YOU CAN PLAY WITH THE BACKGROUND COLOUR AND THE TTEXT*/

.feat2{ 
position: absolute;
top: 950%;
width: 100%;
height:400%;
margin-left: 0px;
padding: 50px;
background:url(125,125,125);  
background: transparent\9;  
background:rgba(125,125,125,.85); */ /*BG COLOR HERE*/


}

/* change the width percentage if you want more margin space or less margin space!! */
.feat2-wrapper {
  width: 80%;
  margin: auto;
  text-align: left;
}



/* this makes image resize */
.feat2 img {
  width: 90%;
  height: auto;
 /* -webkit-transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;*/
}

.feat2 img.top:hover {
  opacity:0;
}

/* this gives a margin to each member bio */
.grid {
  margin-bottom: 4rem;
}

/* don't delete these two */
.grid:after {
  content:"";
  display: block;
  clear: both;
}

[class^='col-'] {
  float: left;
}

/* columns for member bios */
.col-1of3-f { 
  width: 33%;
}

.col-2of3-f { 
  width: 66%;
}


.feat2 h1{

    font-size: 1.5em;
    font-family: 'bodyfont';
    color: #000;
    letter-spacing: 2px;
    margin-top: 6em;
    background: #FFF;
    text-transform: uppercase;
    text-align: left;
    padding: 2em;   /*FTITLE TEXT HWRE*/

}

.blurbtxt {
    font-size: .75em;
    font-family: 'bodyfont';
    color: #FFF;
    letter-spacing: 2px;
    margin-top: 1em;
    background: #000;
    text-transform: uppercase  
}

/*F^^^^^^^^^^^^ DONT TOUCH UNLESS YOU CHANGE THE NAME YOU'LL CHANGE ALL OF THEM*/

.team-column-1 { 
position: relative;
width: 50%;
margin-left: 15%;


}

.feat2-column-2 { 
margin-left: 40%;
width: 25%;
height: 100%;

margin-top: -25px;
}

.feat2 a{
    text-decoration: none;
    font-size: .75em;
    font-family: 'bodyfont';
    letter-spacing: 2px;
    margin-top: 1em;
     color: #FEEC80;
    text-transform: uppercase
    -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;

}

.feat2 a:hover{

  text-decoration: none;
    font-size: .75em;
    font-family: 'bodyfont';
    letter-spacing: 2px;
    margin-top: 1em;
     color: #fff;
    text-transform: uppercase

}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .categories, .content, .sidebar  {
        margin: 1% 0 1% 0%;
        width: 100%; 
    }
}

@media (max-width: 700px) {
  .col-1of3 {
    width: 100%;
  }

  .col-2of3 {
    width: 100%;
  }

  .team p {
    margin-left: 0;
  }
}