/* Welcome to Compass.

 * In this file you should write your main styles. (or centralize your imports)

 * Import this file using the following HTML or equivalent:

 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import url("https://fonts.googleapis.com/css?family=Inconsolata:700|Roboto+Mono|Ubuntu:300, 400, 700");

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font: inherit;

  font-size: 100%;

  vertical-align: baseline; }



html {

  line-height: 1; }



ol, ul {

  list-style: none; }

 

table {

  border-collapse: collapse;

  border-spacing: 0; }



caption, th, td {

  text-align: left;

  font-weight: normal;

  vertical-align: middle; }



q, blockquote {

  quotes: none; }

  q:before, q:after, blockquote:before, blockquote:after {

    content: "";

    content: none; }



a img {

  border: none; }



article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {

  display: block; }



* {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box; }



body.ts {

  background: white;

  color: #02020b; }

  body.ts .container {

    text-align: left; }

  body.ts p {

    margin: 20px 0;

    font-size: 1.0625em; }

  body.ts header a {

    color: #02020b; }

  body.ts footer {

    color: #02020b; }

    body.ts footer a {

      color: #02020b; }



html, body {

  margin: 0;

  background: #white; }



body {

  font-family: "Ubuntu", sans-serif; }



header {

  position: fixed;

  top: 30px;

  left: 30px;

  z-index: 2; }

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

    header {

      position: absolute; } }



h1, h2, h3, h4, h5, h6 {

  font-family: "Ubuntu", sans-serif; }



h1 {

  font-size: 3.25em;

  line-height: 1.25em;

  margin-bottom: .2em;

   }

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

    h1 {

      font-size: 2.4375em; } }

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

    h1 {

      font-size: 1.5625em; } }



h2 {

  font-size: 2.4375em;

  line-height: 1.2em; }

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

    h2 {

      font-size: 1.5625em; } }



h3 {

  font-size: 1.5625em;

  color: #ece4b7;

  letter-spacing: .3em; }

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

    h3 {

      font-size: 1.0625em; } }



p {

  margin: 20px auto;

  font-size: 1em;

  line-height: 1.6em;

  font-weight: 300; }

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

    p {

      font-size: 1.0625em; } }



a {

  color: #fac84b;

  text-decoration: none; }



input[type=text], textarea, input[type=email] {

  width: 100%;

  padding: 30px 0;

  border: none;

  border-bottom: 1px solid #808782;

  background: none;

  font-family: "Ubuntu", sans-serif;

  font-size: 1.5625em; }



textarea:focus, input:focus {

  outline: none;

  border-bottom: 1px solid #FBB040 !important; }



header {

  left: 45px;

  right: 45px; }

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

    header {

      left: 20px;

      right: 20px; } }

  header #logo {

    width: 50%;

    float: left; }

    header #logo img {

      width: 65px; }

  header nav {

    width: 50%;

    float: right;

    text-align: right;

    padding-top: 7px; }

    header nav ul li {

      display: inline-block;

      text-transform: uppercase;

      font-size: 1.0625em;

      padding-left: 20px; }

      header nav ul li a {

        color: #fcfcfc;

        -moz-transition-property: color;

        -o-transition-property: color;

        -webkit-transition-property: color;

        transition-property: color;

        -moz-transition-duration: 0.5s;

        -o-transition-duration: 0.5s;

        -webkit-transition-duration: 0.5s;

        transition-duration: 0.5s; }

        header nav ul li a:hover {

          color: #fac84b; }



.navReverse a {

  color: #FBB040 !important; }



#videoContainer {

  width: 100%;

  height: 100vh;

  position: relative;

  z-index: 1; }

  #videoContainer #video {

    height: 100vh;

    width: 100%; }

  #videoContainer #videoOverlay {

    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDIwMjBiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

    background-size: 100%;

    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, rgba(125, 185, 232, 0)), color-stop(100%, #02020b));

    background-image: -moz-linear-gradient(top, rgba(125, 185, 232, 0) 50%, #02020b 100%);

    background-image: -webkit-linear-gradient(top, rgba(125, 185, 232, 0) 50%, #02020b 100%);

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(125, 185, 232, 0)), to(#02020b));

    background-image: -o-linear-gradient(top, rgba(125, 185, 232, 0) 50%, #02020b 100%);

    background-image: linear-gradient(to bottom, rgba(125, 185, 232, 0) 50%, #02020b 100%);

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0; }

@media only screen and (max-width: 740px){
  #videoContainer{
    background:url('images/reel-opt.jpg');
    background-size: cover;
  }
}

section {

  height: 100vh; }

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

    section {

      height: auto;

      padding: 120px 0; } }



#aboutAnchor {

  background: #fff;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-pack: center;

  -webkit-justify-content: center;

  -ms-flex-pack: center;

  justify-content: center;

  position: relative; }

  #aboutAnchor #aboutContent {

    width: 80%;

    max-width: 1555px;

    position: relative; }

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

      #aboutAnchor #aboutContent {

        width: 60%; } }

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

      #aboutAnchor #aboutContent {

        width: 70%; } }

    #aboutAnchor #aboutContent #overview {

      width: 36%;

      float: left; }

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

        #aboutAnchor #aboutContent #overview {

          width: 50%; } }

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

        #aboutAnchor #aboutContent #overview {

          width: 100%; } }

      #aboutAnchor #aboutContent #overview h1 {

        width: 100%;

        max-width: 480px;

        margin-bottom: 90px; }

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

          #aboutAnchor #aboutContent #overview h1 {

            margin-bottom: 0px; } }

      #aboutAnchor #aboutContent #overview p {

        color: #6D7579; }

    #aboutAnchor #aboutContent #gallery {

      width: 50%;

      right: 0;

      position: absolute;

      top: 0;

      overflow: hidden; }

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

        #aboutAnchor #aboutContent #gallery {

          width: 45%; } }

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

        #aboutAnchor #aboutContent #gallery {

          width: 100%;

          position: relative; } }

      #aboutAnchor #aboutContent #gallery #galleryImage img {

        width: 100%;

        height: auto;

        -webkit-border-top-left-radius: 20px;

        -webkit-border-bottom-right-radius: 20px;

        -moz-border-radius-topleft: 20px;

        -moz-border-radius-bottomright: 20px;

        border-top-left-radius: 20px;

        border-bottom-right-radius: 20px; }



#logoFoot {

  position: absolute;

  bottom: 40px;

  left: 40px;

  width: 247px;

  height: 48px; }



#contact {

  background: #6D7579;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-pack: center;

  -webkit-justify-content: center;

  -ms-flex-pack: center;

  justify-content: center;

  color: #fcfcfc;

  position: relative; }

  #contact #contactContainer {

    width: 80%;

    max-width: 1555px;

    position: relative;

    margin: 0 auto; }

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

      #contact #contactContainer {

        width: 60%; } }

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

      #contact #contactContainer {

        width: 70%; } }

    #contact #contactContainer #contactOver {

      width: 35%;

      float: left; }

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

        #contact #contactContainer #contactOver {

          width: 100%; } }

      #contact #contactContainer #contactOver p:first-of-type {

        color: #FBB040;

        font-size: 22px; }

    #contact #contactContainer #contactForm {

      width: 60%;

      float: right;

      /* Change the white to any color ;) */ }

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

        #contact #contactContainer #contactForm {

          width: 100%; } }

      #contact #contactContainer #contactForm input, #contact #contactContainer #contactForm textarea {

        color: #fcfcfc;

        font-weight: 300; }

      #contact #contactContainer #contactForm textarea {

        height: 190px !important; }

      #contact #contactContainer #contactForm label {

        display: none; }

      #contact #contactContainer #contactForm input:-webkit-autofill {

        -webkit-box-shadow: 0 0 0 30px #6D7579 inset; }



main {

  padding-top: 150px; }

  main #about p {

    text-align: justify;

    -moz-text-align-last: center;

    text-align-last: center; }

  main #about h2 {

    margin-bottom: 60px; }

  main #about h3 {

    margin: 80px 0 35px 0;

    line-height: 1.4em; }

    main #about h3:first-of-type {

      margin-top: 175px; }

    main #about h3:nth-of-type(2) {

      margin-top: 160px; }

  main #about .logo {

    margin-top: 30px;

    width: 55px; }



#newsletter {

  background: #d5aa5c;

  width: 100%;

  margin: 175px 0 0px;

  color: white;

  padding: 40px 0; }

  #newsletter p {

    margin-top: 5px;

    font-size: 1.0625em;

    color: white; }



footer {

  padding: 30px 0;

  color: #FFFFFF;

  background: #6D7579;

  font-size: 0.75em;

  text-align: center; }

  footer a {

    color: #FFFFFF; }

footer .container{
  padding:20px 0 0 0 ;
}

.container {

  width: 960px;

  margin: 0 auto; }

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

    .container {

      width: 800px; } }

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

    .container {

      width: 560px; } }

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

    .container {

      width: 310px; } }



.bold {

  font-weight: 700; }



.orange {

  color: #FBB040;

  font-weight: 400; }



.btn {

  background: #FBB040;

  padding: 15px 25px;

  border: none;

  color: #fcfcfc;

  font-size: 0.75em;

  margin: 10px 0;

  text-decoration: none;

  cursor: pointer;

  display: inline-block;

  -moz-transition-property: all;

  -o-transition-property: all;

  -webkit-transition-property: all;

  transition-property: all;

  -moz-transition-duration: 0.5s;

  -o-transition-duration: 0.5s;

  -webkit-transition-duration: 0.5s;

  transition-duration: 0.5s;

  -webkit-border-top-left-radius: 5px;

  -webkit-border-bottom-right-radius: 5px;

  -moz-border-radius-topleft: 5px;

  -moz-border-radius-bottomright: 5px;

  border-top-left-radius: 5px;

  border-bottom-right-radius: 5px; }



.btn:hover {

  background: #fcfcfc;

  text-decoration: none;

  color: #FBB040; }



.clearfix:after {

  clear: both;

  content: "";

  display: block; }



.quform-submit {

  text-align: right;

  margin-top: 20px; }



.horizontal-mailchimp #mc_embed_signup .mc-field-group {

 /* width: 28%;

  float: left;

  clear: none; */}

.horizontal-mailchimp{
  padding:50px 0 70px;
  background: #57646b;

}

.horizontal-mailchimp #mc_embed_signup .clear {

  clear: none; }

.horizontal-mailchimp #mc_embed_signup .mc-field-group{
width:27%;
}

@media only screen and (max-width: 640px) {
.horizontal-mailchimp #mc_embed_signup .mc-field-group{
width:100%;
}
  }

.horizontal-mailchimp #mc_embed_signup .mc-field-group input {

  width: 97%;

  border-radius: 0px;

  border: 0px;

  padding: 12px;
  font-size:0.9em;

  background: #4d595e; }

  .horizontal-mailchimp #mc_embed_signup .mc-field-group input:-moz-placeholder {

    color: #fcfcfc; }

  .horizontal-mailchimp #mc_embed_signup .mc-field-group input::-moz-placeholder {

    color: #fcfcfc; }

  .horizontal-mailchimp #mc_embed_signup .mc-field-group input:-ms-input-placeholder {

    color: #fcfcfc; }

  .horizontal-mailchimp #mc_embed_signup .mc-field-group input::-webkit-input-placeholder {

    color: #fcfcfc; }



.horizontal-mailchimp #mc_embed_signup #mce-success-response {

  color: white; }



.horizontal-mailchimp h2 {

  display: none; }

  .horizontal-mailchimp h3 {

  text-align: center;
  margin-bottom: 20px; 
color:#e6e6e6;}



.horizontal-mailchimp #mc_embed_signup {}



.horizontal-mailchimp #mc_embed_signup form {

  padding: 0px; }



.horizontal-mailchimp #mc_embed_signup .indicates-required {

  display: none; }



.horizontal-mailchimp #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {

  position: absolute; }



.horizontal-mailchimp #mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {

  background-color: #FBB040;

  border: 0px; }



.horizontal-mailchimp #mc_embed_signup div#mce-responses {

  display: none; }



.horizontal-mailchimp #mc_embed_signup .button {

 background-color: #6d7579;
    color: white;
    text-transform: uppercase;
    border-radius: 0px;
    height: 40px;
    position: relative;
    top: -1px;
    width: 150px;
    border: none;
    cursor: pointer; }



/* puts Mailchimp fields in a row */

.horizontal-mailchimp .mc-field-group,

.horizontal-mailchimp .clear {

  display: inline-block; }



/* hides the field labels */

.horizontal-mailchimp label {

  display: block;

  height: 1px;

  text-indent: -9999px; }







/* 23 07 2018 amends*/



.photoroller .pr-img {

  width:100%;

}



/* 18-07-05 amends*/



.project-container .content-container h1{

  text-align: center;

}



.project-container .content-container h2{

  /*padding:0 90px;*/

  margin-top: 65px;

}



.project-container .content-container .credits{

  margin-bottom:15px;

} 



.project-container .content-container ul.credits{

  text-align: center;

}

.project-container .content-container ul.credits li{

  display: inline;

  margin-right:10px;

}



.hero-container .image-container img{

  width:100%;

  height:auto;

}



/* Amends 19/07/2018 */



.imageGrid{

  margin: 50px -90px !important;

}



.imageGrid p{

  padding:40px;

}



.imageGrid .span_3_of_12{

  width:25%;

}



.imageGrid .image-container, .imageGrid .slider-container, .imageGrid .split-slider, .imageGrid .embed-wrapper{

   margin: 0 !important;

}



.imageGrid .image-container img{

  width:101% !important;

}



.imageGrid .col {margin:0px !important;}

.imageGrid .span_6_of_12{width:50%;}







/* Amends 12/07/2018 */



.project-container{

  margin-top:0px !important;

}

.hero-container{

  margin: 1em calc(50% - 50vw) !important;

  margin-top: 0px !important;

  position: relative;

}



/*video and other wrappers*/

.image-container, .slider, .split-slider, .embed-wrapper{

padding-bottom: 55.5% !important;

}





ul.project-nav{

  display: none;

}

ul.project-nav li:first-of-type{

  display:none;

}



.hero{

      width: 100%;

    padding-bottom: 56.25%;

    position: relative;

    overflow: hidden;

    height:0px;

}



.hero img{

  width: 100%; 

    height: auto;

    position: absolute;  

    top: 0;    

    margin: auto 0;

}



.slider .image-container img{

  position: absolute !important;

    top: 50% !important;

    left: 50% !important;

    transform: translate(-50%,-50%) !important;

}



body{

  overflow-x:hidden;

}



.slider .image-container img{

  width:100% !important;

  height:auto !important;

}



.image-container img{

  width:100%  !important;

  height:auto !important;

}



.slider-next, .slider-prev{

  background:none !important;

}







ul.project-nav .slider-next:hover, ul.project-nav .slider-prev:hover{

  opacity: 1;

}



.my-slider-prev{left:0;} .my-slider-prev span{left:30px;}

.my-slider-next{right:0;} .my-slider-next span{right:30px;}



.hero .my-slider-next, .hero .my-slider-prev{

    position: absolute !important;

    top: 0 !important;

    margin: -10px 0 0 0 !important;

    background: transparent !important;

    width: 15% !important;

    max-width: 200px !important;

    height: 100% !important;

    z-index: 999 !important;

}



ul.project-nav .slider-next{

  right:0px;

}



ul.project-nav .slider-next span{

  right:30px;

}





.hero a span{

      margin-top: 15px !important;

    border-color: #c1c1c1 !important;

    border-width: 5px !important;

    top: 50% !important;

    position: absolute !important;

}







/* custom grid 

**************************/



/*  SECTIONS  */

.section {

  clear: both;

  padding: 0px;

  margin: 0px;

  padding: 0 90px;

}



/*  COLUMN SETUP  */

.col {

  display: block;

  float:left;

  margin: 0 0 0 1.6%;

}

.col:first-child { margin-left: 0; }





/*  GROUPING  */

.group:before,

.group:after {

  content:"";

  display:table;

}

.group:after {

  clear:both;

}

.group {

    zoom:1; /* For IE 6/7 */

}



/*  GRID OF TWELVE  */

.span_12_of_12 {

  width: 100%;

}



.span_11_of_12 {

    width: 91.53%;

}

.span_10_of_12 {

    width: 83.06%;

}



.span_9_of_12 {

    width: 74.6%;

}



.span_8_of_12 {

    width: 66.13%;

}



.span_7_of_12 {

    width: 57.66%;

}



.span_6_of_12 {

    width: 49.2%;

}



.span_5_of_12 {

    width: 40.73%;

}



.span_4_of_12 {

    width: 32.26%;

}



.span_3_of_12 {

    width: 23.8%;

}



.span_2_of_12 {

    width: 15.33%;

}



.span_1_of_12 {

    width: 6.866%;

}



/*  GO FULL WIDTH BELOW 480 PIXELS */

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

  .col {  margin: 1% 0 1% 0%; }

  .section{padding: 0px;} 

  .fullWidth{margin: 0;} 

  .imageGrid{margin: 0 !important;}

  .project-container .content-container h2{padding:0px; } 



    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {

  width: 100%; 

  }

}









/*social buttons*/

#share-buttons{

  text-align: center;

  margin: 65px 0 80px 0;

}



#share-buttons img {

width: 35px;

padding: 5px;

border: 0;

box-shadow: 0;

display: inline;



}





/* pano*/



.panorama {

        width: 100%;

/*        padding-bottom: 56.25%;

        margin-bottom: 60px;*/

}



/* parallax */



html, body{

  margin: 0;

  padding: 0;

  height: 100%;

  width: 100%;

}



.image-container, .slider-container, .split-slider, .embed-wrapper{margin:0px !important;}

.anchor{display: table; width:100%;}

.tablecell{display:table-cell; vertical-align: middle}



.project-container .content-container h2{

  margin-top:0px !important;

}



.slideshow{

  position: relative;

  left:0;

  top:0;

}



.fadein { position:relative;}

.fadein img { position:absolute; left:0; top:0; }



html, body{

  margin: 0;

  padding: 0;

  height: 100%;

  width: 100%;

}

.block{

  width: 100vw;

  height: 100vh;

  margin-left: -8.3%;

  position: relative;

  overflow: hidden;

  font-size: 16px;

}





.block span{

position: absolute;

top:50%;

transform: translateY(-50%);

left: 5%;

color: white;

background: rgba(0,0,0, 0.7);

padding: 20px;

}



.block span p, .block span h3{

  color: white;

}



.block span h3{

  letter-spacing: initial;

  font-size: 2.4em;

}







.img-parallax {

  height:100%;

  width:100%;

  z-index: -1;

  object-fit: cover;

  position: absolute;

  top: 0;

  left: 50%;

  transform: translate(-50%,0);

  pointer-events: none

}









.rslides {

  position: relative;

  list-style: none;

  overflow: hidden;

  width: 100%;

  padding: 0;

  margin: 0;

  }



.rslides li {

  -webkit-backface-visibility: hidden;

  position: absolute;

  display: none;

  width: 100%;

  left: 0;

  top: 0;

  }



.rslides li:first-child {

  position: relative;

  display: block;

  float: left;

  }



  .rslides a {

height:100%;

  }



.rslides img {

  display: block;

  height: auto;

  float: left;

  width: 100%;

  border: 0;

  }



  .section{

    padding:0px;

  }



.fullGrid{

  margin:0px !important;

  height: 100vh;

  width: 100vw;

  overflow:hidden;

  margin-left: -7.5% !important;

}



.fullGrid .span_4_of_12{

  width:33.26%;

  height:33.32%;

}



.fullGrid .span_6_of_12{

  width:50%;

  height:50%;

}



.fullGrid ul, .fullGrid ul li, .fullGrid ul li a, .fullGrid ul li a img{

  height:100%;

} 



.fullGrid a{

  height:100%;

}



.fullGrid .image-container img{

  height:101% !important;

  object-fit: cover;

}



/*

.split-slider{

  padding-bottom: 0px !important;

}

*/



.slider-next-work{



  top:100px !important;

}



.slider-next-work span{

  margin-top:-90px !important;

}



.workNav{

  text-transform:uppercase; font-size:1.1em;

    top: 43px;

    right: 45px;

    position: absolute;
    z-index: 999;

}



.workNav:hover{

  color:#fac84b !important;

}



.hero {

    width: 100vw !important; 

    overflow: initial !important;

    height: 100vh !important;

    padding-bottom:0px !important;

  }



  .hero .block{

    margin-left:0px;

  }



  .hero img{

    height: inherit !important;

  }



  .hero .my-slider-next, .hero .my-slider-prev{

    height:100vh !important;

  }





.fullWidth{

    width: 100vw;

    height: auto;

    margin-left: -8.3%;

}



.fullWidth .span_6_of_12{

  width:50%;

  margin:0;

}









.switch-icon {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 125px;

  display: block;

  z-index: 999;

  text-align: center;

  line-height: 52px;

  color: #8b8b8b;

  font-size: 1.7em;

  opacity: 0.5;

  -moz-transition: opacity 0.3s ease-in-out;

  -webkit-transition: opacity 0.3s ease-in-out;

  transition: opacity 0.3s ease-in-out;

}



.switch-icon:hover{

  cursor: pointer;

}



/*@media (min-width: 1030px ) {



  .switch-icon {

    opacity: 0;

  }



}*/



@keyframes up_and_down {

  0% { bottom: 30px; }

  100% { bottom: 40px; }

}



.switch-icon span {

  border-color: #000;

  display: block;

  width: 20px;

  height: 20px;

  margin-top: -2px; /* positioning */

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  transform: rotate(-45deg); /* make it an arrow */

  border-left: 5px solid #c1c1c1;

  border-bottom: 5px solid #c1c1c1;

  position: absolute;

  bottom: 30px;

  left: 50%;

  margin-left: -10px;

  -webkit-animation: 0.75s ease-in-out 0s infinite alternate up_and_down;

  -moz-animation: 0.75s ease-in-out 0s infinite alternate up_and_down;

  animation: 0.75s ease-in-out 0s infinite alternate up_and_down;

}



.switch-icon--visible {

  opacity: 0.5;

}



.switch-icon:hover {

  color: #c1c1c1;

  opacity: 0.75;

}



.pad{

  padding: 80px;

}



.photoroller .pr-img {

 

    width: 100vw !important;

    height: 100vh !important;

        object-fit: cover !important

}



.anchor{

  position: relative;

}



.anchor .videoContainer{

  width:100vw;

  height:100vh;

  margin-left: -7.5%



}



.hero .anchor .videoContainer{

  margin: 0px;

}



.cycleCaption{

    position: absolute;

    z-index: 1;

    margin-left: -7.5%;

    left: 50%;

    background: rgba(0,0,0,.6);



    padding: 10px;

    transform: translateX(-50%);

    bottom: 5%;

    color: white;

  border-radius: 5px

  }

  .intro p{
    color:white;
  }

  .intro h2{
    color:white;
  }

  .intro span{
    color: #FBB041;
    font-size: 1.4em;
    line-height: 1.6em;
  }



  .project-container .content-container .introContainer .pageSpecs h1{
    color: white;
    text-align: left;
    margin-left: 1.6%;
  }

  .project-container .content-container .introContainer .pageSpecs ul{
        color: white;
    text-align: left;
    margin-left: 1.6%;
  }

 .introImg{
    position: absolute;
    width: 100vw;
    height: calc(100vh + 16px);
    z-index: -1;
    top: -16px;
    left: -8.9%;
 }

 .introImg img{
      position: absolute;
    left: 0px;
    width: 200vw;
    height: calc(100vh + 16px);
    object-fit: cover;
 }

 .bgGradient{
      background: radial-gradient(transparent, #111), #9a9a9a00;
    position: absolute;
    width: 100vw;
    height: calc(100vh + 16px);
    z-index: -1;
    top: -16px;
    left: -8.9%;
 }

 .bgTrans{
      position: absolute;
    width: 100vw;
    height: calc(100vh + 16px);
    z-index: -1;
    top: -16px;
    background: rgba(17,17,17, .8);
    left: -8.9%;
 }

 .clientLogo{
  margin-top:15px;
  display: inline-block;
 }

 .clientLogo img{
  background: none;
  display: inline-block;
 }

 /*03/09/2018 amends*/

 ::-moz-selection { background: black; }
::selection { background: black; }

 .videoOverlay{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    font-size: 2.6em;
    right: 5%;
    text-align: center;
    color: white;
    padding: 20px;
    z-index: 99;
 }

 .videoOverlay p{
  font-weight: 700;
 }

 .videoContainer span{
      position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    color: red;
    background: rgba(0,0,0, 0.7);
    padding: 20px;
    color: white;
 }

 .upArrow{
  opacity: 0;
 }

 .fade-in{
  opacity:1;
 }

 .introContainer{
      overflow-x: hidden;
 }

 .fade-out{
  display: none;
 }

.hero a span {
    border-color: #fbb040 !important;
  }

  .switch-icon:hover {



  opacity: 1;

}


.lastAnchor .switch-icon span{
      -webkit-transform: rotate(134deg);
    -moz-transform: rotate(134deg);
    transform: rotate(134deg);
    animation: none;
    -moz-animation: none;
    -webkit-animation:none;
        border-left: 5px solid #fbb040;
    border-bottom: 5px solid #fbb040;
    bottom:20px;
}
  
.fullscreen-slider-container .slider-next span, .fullscreen-slider-container .slider-prev span{

    border-color:  #fbb040 !important;

}

.switch-icon span{
border-left: 5px solid #fbb040 !important;
    border-bottom: 5px solid #fbb040 !important;
}

@media (min-width: 1030px)
.switch-icon {
     opacity: 0.5 !important; 
}


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


/*work page slider*/
.fullscreen-slider-container{

  display: none;

}
 .hero{
  height:50vh !important;
 }

 .block{
  height:50vh;
  margin-left: -7.5%;
 }


 .anchor{
  height:50vh !important;
 }

 .project-container .content-container ul.credits li{
  display: block;
 }

 .introContainer{
  padding:50px 0;
 }

 .clientLogo{
  width:40%;
 }
 .clientLogo img{
  width:100%;
  height:auto;
 }

 .introImg{
  display: none;
  /*width: 200vw;
  height:auto;
  bottom:0;
  left:-8.3%;
  right:0;
  overflow: hidden;*/
 }

 .bgGradient, .bgTrans{
  height:auto;
  right:0;
  bottom:0;
 }

 .bgGradient{
  display: none;
 }

 .introImg img{
  width:200vw;
  height:200vh;
 }

.hero .my-slider-next, .hero .my-slider-prev{
  height: 50vh !important
}

.switch-icon{
  display: none;
}

.imageGrid .span_3_of_12{
  width: 50%;
}

.pad{
  padding:80px 0;
}

/*amends 05/09/2018*/

.homePage .anchor{
  height: initial !important;
}

}