/*
      ___        ___      ___        ___
     /\__\      /\  \    /\  \      /\  \
    /::|  |    /::\  \   \:\  \    /::\  \
   /:|:|  |   /:/\:\  \   \:\  \  /:/\:\  \
  /:/|:|__|__/::\~\:\  \  /::\  \/::\~\:\  \    ___  _ ____ _ ___ ____ _
 /:/ |::::\__\/\:\ \:\__\/:/\:\__\/\:\ \:\__\   |__> | |__, |  |  |--| |___
 \/__/~~/:/  /\~\:\ \/__/:/  \/__/__\:\/:/  /   .co.nz
       /:/  /\:\ \:\__\/:/  /        \::/  /
      /:/  /  \:\ \/__/\/__/         /:/  /
     /:/  /    \:\__\               /:/  /
     \/__/      \/__/               \/__/


Theme Name: Ninety Seven Agency
Description: Ninety Seven Theme
Version: 1
Date: 7 July 2017
Author: Meta Digital
Author URI: http://metadigital.co.nz/
*/


/* Sticky Footer */

html {
  background-color: #000000
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
html, body {
    /* For the loading indicator to be vertically centered ensure */
    /* the html and body elements take up the full viewport */
    min-height: 100%;
}
html.loading {
    /* Replace #333 with the background-color of your choice */
    /* Replace loading.gif with the loading image of your choice */
    background: #000000 url('/wp-content/themes/ninetyseven/images/logo.png') no-repeat;
    background-size:500px auto;
    background-position: center center;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: background-color 0;
    transition: background-color 0;
}
body {
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
html.loading body {
    /* Make the contents of the body opaque during loading */
    opacity: 0;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: opacity 0;
    transition: opacity 0;
}




html{height:100%; }
body {
  height:100%; 
  background-color:#000000; 
  color:#ffffff; 
  font-family: "proxima-nova",sans-serif;
  font-style: normal;
  font-weight: 300;
}

/* #wrap{min-height:100%; height:auto!important; height:100%; margin:0 auto -10px; padding:0 0 355px;} */

/*footer {background: url(/wp-content/themes/ninetyseven/images/bg-base.png) center top no-repeat; background-size:cover;}*/


.clear{clear:both;}

.alignright,
img.alignright {float:right; margin:0 0 15px 30px;}

img.alignleft,
.alignleft {float:left; margin:0 30px 15px 0;}

* {outline:none!important;}


/* Fonts & Headings */

body{font-size:14px;}

h1, h2, h3, h4, h5, h6 {font-family: "egizio-urw", "Times New Roman", Times, serif;}

h1 {font-size:60px; color:#ffffff; border-bottom:1px solid #ffffff; padding-bottom:50px; margin-bottom:30px;}
h2 {font-size:40px; color:#ffffff; padding-bottom:20px;}
h3 {font-size:30px; color:#ffffff;}
h4 {font-size:26px; color:#ffffff;}
h5 {font-size:20px; color:#ffffff;}
h6 {}

p {margin-bottom:20px; letter-spacing:1px;}
strong {font-weight:bold}
li {line-height: 28px; margin-bottom:5px; letter-spacing:1px;}

a{text-decoration:none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}

a,
a:link,
a:visited {color:#ffffff;}
a:hover,
a:active,
a.active {color:#cccccc; text-decoration:none;}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}

img {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

::-moz-selection { /* Code for Firefox */ color: #000000; background: #ffffff;}
::selection {color: #000000; background: #ffffff;}

/* Header */

header {z-index: 200; position:absolute; width:50%; right:0;}
header a.backarrow img {width:17px; height:auto;}
header a.backhome img {width:235px; height:auto;}
header a,
header a:link,
header a:visited {color:#ffffff; text-transform:lowercase;}
header a:hover,
header a:active,
header a.active {color:#cccccc; text-decoration:none;}

header .backarrow{margin-top:12.5px; margin-left:15px; opacity: 0;}
header .backarrow.show-arrow{opacity: 1;}

.backarrow {position:relative; float:left; margin-top:30px; margin-left:30px;}
.backarrow:hover {opacity:0.5;}

.backhome {position:relative; float:right; margin-top:30px; margin-right:30px;}
.backhome:hover {opacity:0.5;}


/* Transition Sections*/

.trans-section.transform-active{
  left:0;
  opacity: 1;
}

.trans-section{
  opacity: 0;
  position: absolute;
  z-index:1;
  top:0;
  left:100%;
  width:100%;
  min-height:100vh;
  -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
     transition: all 1s ease;
}


/* Home Page*/

.contentarea{height:100vh;}
.contentarea .container-fluid{padding:0;}
.contentarea .leftcontent {
  height: 100vh;
  padding:0;
  background-repeat:no-repeat; 
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
  background-position:top  center;
 }
.contentarea .rightcontent {height: 100vh; padding-top:40vh;}

.contentarea .rightcontent h1 {padding-left:35px;}
.contentarea .rightcontent h2 {padding-left:20px;}
.contentarea .rightcontent p {padding-left:20px; font-weight:300;}

.contentarea .homearrow {position:absolute; top:0; left:0; z-index: 2000;}
.contentarea .homearrow img {width:50%; height:auto;}

#home-section .contentarea .leftcontent {height: 100%; padding:0; width:22%; float:left;}
#home-section .contentarea .leftcontent ul{padding:0;margin:0;}
#home-section .contentarea .leftcontent li{display:block; position:relative; height:23.5vh; width:100%; margin:0 0 2vh 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
#home-section .contentarea .leftcontent li:last-child{margin-bottom:0;}
#home-section .contentarea .leftcontent li:hover {opacity:0.7;}
#home-section .contentarea .leftcontent .homeleftimage{
  display:block; 
  width:100%; 
  height:100%; 
  background-position: top center; 
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
}
#home-section .contentarea .leftcontent .homeleftlink {position:absolute; bottom:0px; padding-left:20px; display:block; width:100%; background-color: rgba(0,0,0,.7);}
#home-section .contentarea .leftcontent .homeleftlink h3{
    margin:0;
    padding:7px 40px 7px 0;
    background-image: url(images/icon-arrow-right.png);
    background-size: auto 30px;
    background-repeat:no-repeat;
    background-position:right 20px bottom 8px;
}


#home-section .contentarea .rightcontent {height: 100vh; width:78%; padding: 0 0 0 2vh; position: relative; float:left;}
#home-section .contentarea .rightcontent .rightcontent-inner{width:100%; height:100%; position: relative;}
.ytplayer-container{
   position: absolute;
   top: 0;
   left:0;
   z-index: -1;
  }

#vidFallBack{
  width:100%;
  height:100%;
  background-color: red;
}


#home-section .contentarea .rightcontent .homefooter{position: absolute; bottom:0; width:100%; left:0; padding:20px 20px 0 40px; background-color:#000;}

#home-section .contentarea .rightcontent h1 {padding:0 0 20px 0; border-bottom:none; font-size:35px; float:left; margin:0;}

#home-section .contentarea .rightcontent .home-footer{float:right;}

#home-section .contentarea .rightcontent .home-footer p {font-size:9px; display:inline-block;}
#home-section .contentarea .rightcontent .home-footer img {width:75px; height:auto;}

/* Main Content */

.maincontent {}


/* Sidebar Content */

.sidebarcontent {}


/* Footer */

footer {}
.footerarea {display:none;position:absolute; bottom:0px; right:20px;z-index: 1;}
.transform-active .footerarea{display: block;}
.footerarea p {font-size:9px; display:inline-block;}
.footerarea img {width:75px; height:auto;}


/****************************************/
/***** MEDIA QUERY FOR BELOW 767PX ******/
/****************************************/
@media (max-width: 767px) {

  html.loading {
      background-size:200px auto;
      background-position: center center;
  }
  
 #wrap,body,html,.trans-section {overflow-x:hidden;}
  
  .trans-section .contentarea{padding-top:50px;}

  header {background:#000000; width:100%;position:relative; width:100%;}
  .backhome img {width:50%!important; height:auto; float:right;}
  .backhome {position:relative; float:right; margin-top:10px; margin-bottom:10px; margin-right:30px;}

  .contentarea .homearrow {display:none;}

  #home-section .contentarea .rightcontent {!important; width:100%; padding: 0 0 0 0vh; position:static; float:none;}
  #home-section .contentarea .rightcontent #mobileVid{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
  #home-section .contentarea .rightcontent #mobileVid iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  
  #home-section .contentarea .rightcontent #vidContainer iframe{display: none;}
  #home-section .contentarea .rightcontent .footerarea{display: none;}
  #home-section .contentarea .leftcontent {height: auto!important; padding:0; width:100%; float:none;}
  #home-section .contentarea .leftcontent ul li {width:50%; max-height:200px; min-height: 200px; float:left; overflow:hidden;}
  #home-section .contentarea .rightcontent h1 {font-size:26px;float:none;padding:0;}
  #home-section .contentarea .leftcontent li{margin:0 0 0vh 0;}
  #home-section .contentarea .leftcontent .homeleftimage{}

  #home-section .contentarea .leftcontent .homeleftlink {bottom:0px; padding-left:0px; min-height: 64px; display:block;}
  #home-section .contentarea .leftcontent .homeleftlink h3{
    margin:0;
    padding:10px 20px 10px 20px;
    background-size: 18px 30px!important;
    background-position:right 10px center;
    font-size:20px;
    width:100%;
    position: absolute;
    top:50%;
    left:0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  #home-section .contentarea .rightcontent .homefooter{position: relative; height: auto; padding: 10px 10px 20px 20px;}
  #home-section .contentarea .rightcontent .home-footer{display: none;}

  .footerarea {position:static; padding-top:20px; padding-bottom:10px; text-align:right; bottom:20px; right:10px; clear:both;}
  .footerarea p {font-size:9px!important; display:inline;}
  .footerarea img {width:75px; height:auto; margin-left:20px;}

  h1 {font-size:32px;}
  h2 {font-size:22px;}
  .contentarea .leftcontent {height: 300px; padding:0; background-position:top center!important;}
  .contentarea .rightcontent {height: auto!important; padding-top:0vh;}

  .contentarea .rightcontent h1 {padding-left:15px; padding-bottom: 10px; margin-bottom: 20px;}
  .contentarea .rightcontent h2 {padding-left:0px; }
  .contentarea .rightcontent p {padding-left:0px; font-size:14px; margin-bottom: 10px;}

  .backhome {position:relative; float:right; margin-top:10px; margin-right:15px; width:200px;}
  .backhome img {width:100%!important;}
  .shiftnav-toggle {cursor: pointer; margin:18px 0px 0px 20px!important; width:10%!important; float:left;}
  .shiftnav {width: 100%!important; max-width: 100%!important; background:rgba(0,0,0,0.85)!important; padding:50px 30px!important;}
  .shiftnav a {font-family: "egizio-urw", "Times New Roman", Times, serif; font-size:21px; padding: 10px 25px!important;}

  .shiftnav .shiftnav-panel-close {left: 0; top:0;}

  .container {width:100%; padding-left:0px; padding-right:0px;}

}

/****************************************/
/**** MEDIA QUERY FOR 768PX - 991PX *****/
/****************************************/
@media (min-width: 768px) and (max-width: 991px) {

  h1 {font-size:42px;}
  h2 {font-size:24px;}
  .contentarea .rightcontent {height: 100vh; padding-top:15vh;}

  #home-section .contentarea .leftcontent {height: 100%; padding:0; width:32%; float:left;}
  #home-section .contentarea .rightcontent {height: 100vh; width:68%; padding: 0 0 0 2vh; position: relative; float:left;}
  #home-section .contentarea .leftcontent .homeleftlink h3 {font-size:24px;}

  html,
  body {overflow-x:hidden;}

  .container {width:100%;}

}

/****************************************/
/*** MEDIA QUERY FOR 992PX - 1199PX *****/
/****************************************/
@media (min-width: 992px) and (max-width: 1199px) {

  h1 {font-size:42px;}
  h2 {font-size:24px;}
  .contentarea .rightcontent {height: 100vh; padding-top:20vh;}

  #home-section .contentarea .leftcontent .homeleftlink h3 {font-size:24px;}

  #home-section .contentarea.animsition.mobile {display:none;}
  
  .contentarea .rightcontent {height: 100vh; padding-top:20vh;}


  html,
  body {overflow:hidden;}

  .container {Xmax-width:1170px;}

}

/****************************************/
/*** MEDIA QUERY FOR 1200PX - 1599    ***/
/****************************************/
@media (min-width: 1200px) and (max-width: 1599px) {

  html,
  body {overflow:hidden;}
  
  .contentarea .rightcontent {height: 100vh; padding-top:25vh;}

  .container {Xwidth:1270px; Xmax-width:1170px;}

}

/****************************************/
/*** MEDIA QUERY FOR 1200PX AND ABOVE ***/
/****************************************/
@media (min-width: 1300px) {

  body{font-size:16px;}
  
  html,
  body {overflow:hidden;}
  
}


/**************************************/
/*** CHROME AND SAFARI SPECIFIC CSS ***/
/**************************************/
@media screen and (-webkit-min-device-pixel-ratio:0) {

  .gform_wrapper select,
  .gform_wrapper .textarea,
  .gform_wrapper input[type=text] {
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 5px;
    border: 0px solid #ffffff;
    padding: 0px;
    background: #ffffff;
    outline: none;
  }

  .gform_wrapper select {padding:9px 9px 9px 9px;}
  #gform_wrapper_1 select {padding:9px 9px 9px 9px;}

}

/**************************************/
/******** IE 10+ SPECIFIC CSS *********/
/**************************************/
@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {

}