@charset "UTF-8";
/* CSS Document */

.row::after {
    content: "";
    clear: both;
    display: table;
}

.w3-center {
    text-align: center !important;
}
.w3-padding-jumbo {
    padding: 32px 64px !important;
}
.w3-center {
    text-align: center !important;
}
.w3-bar {
    display: inline-block;
    margin: 25px 50px;
    padding: inherit;
    width: auto;
}
.nav-bottom-button {
    border: solid;
    border-color: black;
    border-width: 1px;
    display: inline-block;
    outline: 0;
    padding: 6px 16px;
    margin-top: 6px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
.nav-bottom-button:hover{
  color: black;
  background-color: #fff;
}
.nav-bottom-button-current{
  color: white;
  background-color: gray;
  border-color: white;
}

  /* UNDER 600px STYLING */
  @media only screen and (max-width: 600px) {
* {
    box-sizing: border-box;
    font-family: 'Bitter', serif;
    }
p{
  margin: 0;
}    
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.lockup-s{
  float: left;
  width: 40%;
  padding-top: 50px;
  text-align: right;
  margin-bottom: 0px;
   }
.lockup p:nth-child(1){
  font-size: 20px;
}
.lockup p:nth-child(2){
  font-size: 19px;
  }
.lockup p:nth-child(3){
  font-size: 17px;
  color: gray;}
.lockup p:nth-child(4){
  font-size: 17px;
  color: gray;}
.nav-s{
  width: 60%;
  float: left;
  padding-top: 20px;
  text-align: left;
  line-height: 20px;
  }
ul {
  display:block;
  font-size: 17px;
  line-height: 30px;
  list-style-type: none;
  padding-right: 50%;
  padding-left: 8.33%;
    }
li a {
  text-decoration: none;
  color: black;
    }
li a:hover {
  font-style: italic;
  }
li a.active {
    font-family: 'Alfa Slab One', cursive;
    color: black;
}
.currentPage-s{
    font-family: 'Alfa Slab One', cursive;
    color: orange;
    font-size: 175%;
    line-height: 1.0;
    letter-spacing: 0.04em;
    font-style: normal;
    padding-left: 0;
}
  h1{
    padding-top: 20px;
    padding-left: 10px;
    font-size: 2.4em;
    line-height: 1.4em;
    text-align: left;
    letter-spacing: 0.02em;
    color: brown;
  }
  h2{
    margin: 0;
    padding-top: 6px;
    color: brown;
  }
  .contentBox-m {
    display:block;
    position: relative;
    padding-left: 0;
    text-align: left;
    line-height: 1.7;
    z-index: 2;
  }
  footer{
    padding: 4px;
    margin: 16px;

  }
}
/* OVER 601px STYLING */
@media only screen and (min-width: 601px){
  * {
        box-sizing: border-box;
        font-family: 'Bitter', serif;
        margin: 0;
    }
  img {
    	display: block;
    	width: 100%;
    	height: auto;
    	}
  .lockup {
      position: fixed;
      padding-top: 60px;
      text-align: right;
    }
  .lockup p:nth-child(1){
      font-size: 1.6em;
      line-height: 1.0em;}
    .lockup p:nth-child(2){
      font-size: 1.45em;
      line-height: 1.0em;}
    .lockup p:nth-child(3){
      font-size: 1.2em;
      line-height: 2.0em;
      opacity: 0.5;}
    .lockup p:nth-child(4){
      font-size: 1.05em;
      line-height: 0.6em;
      opacity: 0.5;}
  .nav{
      position: fixed;
      padding-top: 180px;
      text-align: right;
      line-height: 1.8;
      z-index: 1;
  }
  ul {
      display: block;
      list-style-type: none;
      padding-right: 50%;
      padding-left: 8.33%;
  }
  li a {
      text-decoration: none;
      color: black;
  }
  li a:hover {
    font-style: italic;
    line-height: 1.0;
    }
  li a.active {
      font-family: 'Alfa Slab One', cursive;
      padding-right: 0;
  }
  .currentPage{
    font-family: 'Alfa Slab One', cursive;
      color: orange;
      font-size:  2.0em;
      line-height: 1.0;
      text-align: left;
      letter-spacing: 0.05em;
      font-style: normal;
  }
  .contentBox {
    display:block;
    position: relative;
    height: 100%;
    margin-left: 18%;
  }
  .contentBox-right {
    display:block;
    position: relative;
    height: 100%;
    text-align: left;
    line-height: 1.7;
    z-index: -2;
  }
  h2{
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 20%;
    font-size: 1.2em;
    line-height: 1.0;
    text-align: left;
    letter-spacing: 0.01em;
    color: brown;
  }

  .w4-quarter {
    float: left;
    width: 25%;
  }
  .w4-third {
    float: left;
    width: 33%;
  }
  .w4-half {
    float: right;
    width: 50%;
  }
  .w4-twoThirds{
    float: right;
    width: 66.66%;
  }
  .w4-threeQuarters{
    float: right;
    width: 75%;
  }
  .w4-full {
    float: left;
    width: 100%;
  }
  .videoPadding{
    padding: 8px;
  }
  .w3-bar {
      display: none;
  }
  footer{
    padding: 4px;
    margin-left: 18%;
    margin-top: 16px;
    margin-bottom: 48px;
    z-index: 1;
  }
}
/* end of 600px & UP */

/* Column styles */

h3{
  color: darkgray;
}
.videoWrapper {
	position: relative;
	padding-bottom: 53%;
	padding-top: 25px;
height: 0;
}
.videoWrapper object, .videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 600px) {
    /* For phones: */
  /*  .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;} */
    .col-5 {width: 100%;}
    .col-6 {width: 100%;}
    .col-7 {width: 100%;}
    .col-8 {width: 100%;}
    .col-9 {width: 100%;}
    .col-10 {width: 100%;}
    .col-11 {width: 100%;}
    .col-12 {width: 100%;}
}
@media only screen and (min-width: 601px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
@media only screen and (max-width: 600px) {
/* slide show */
    #backStage{
      z-index: -15;
      background-color: lightblue;
      height: 100vw;
    }
    #stage {
      width: 100vh;
      height: auto;
      margin-bottom: 4px;
      z-index: 1;
    }
    #stage img {
      position: absolute;
      background: #fff;
      width: 100vw;
      height: auto;
    }
    #stage img:nth-of-type(1) {
      animation-name: fader;
      animation-delay: 2.5s;
      animation-duration: 1.2s;
      animation-timing-function:ease-out;
      z-index: -1;
    }
    #stage img:nth-of-type(2) {
      z-index: -4;
    }
    #stage img:nth-of-type(n+3) {
      display: none;
    }
    /* LP_H consel */
    #stage1 {
      width: 100vw;
      height: 100vw;
      margin-bottom: 4px;
    }
    #stage1 img {
      position: absolute;
      background: #fff;
      width: 100vh;
      height: auto;
    }
    #stage1 img:nth-of-type(1) {
      animation-name: fader;
      animation-delay: 3s;
      animation-duration: 1.4s;
      animation-timing-function:ease-out;
      z-index: -1;
    }
    #stage1 img:nth-of-type(2) {
      z-index: -4;
    }
    #stage1 img:nth-of-type(n+3) {
      display: none;
    }
    #stage2 {
        height: 100vw;
        margin-bottom: 4px;
        z-index: 1;
    }
    #stage2 img {
        position: absolute;
        background: #fff;
        width: 100vh;
        height: auto;
    }
    #stage2 img:nth-of-type(1) {
      animation-name: fader;
      animation-delay: 2.0s;
      animation-duration: 1.0s;
      animation-timing-function:ease-out;
      z-index: -1;
    }
    #stage2 img:nth-of-type(2) {
      z-index: -4;
    }
    #stage2 img:nth-of-type(n+3) {
      display: none;
    }
}
/* chavron bag */
@media only screen and (min-width: 601px) {
    /* slide show */
    #backStage{
      z-index: -15;
      background-color: lightblue;
      /* height: 65vh; */

    }
    #stage {
      height: 50%;
      margin-bottom: 8px;
      z-index: 1;
    }
    #stage img {
      position: absolute;
      background: #fff;
      width: 50%;
      height: auto;
    }
    #stage img:nth-of-type(1) {
      animation-name: fader;
      animation-delay: 2.5s;
      animation-duration: 1.2s;
      animation-timing-function:ease-out;
      z-index: -1;
    }
    #stage img:nth-of-type(2) {
      z-index: -4;
    }
    #stage img:nth-of-type(n+3) {
      display: none;
    }
    /* LP_H consel */
    #stage1 {
        width: 50%;
      /* height: 50%; */
    }
    #stage1 img {
      top: 18%;
      position: absolute;
      background: #fff;
      width: 50%;
      height: auto;
    }
    #stage1 img:nth-of-type(1) {
      animation-name: fader;
      animation-delay: 3s;
      animation-duration: 1.4s;
      animation-timing-function:ease-out;
      z-index: -1;
    }
    #stage1 img:nth-of-type(2) {
      z-index: -4;
    }
    #stage1 img:nth-of-type(n+3) {
      display: none;
    }


    #stage2 {
      width: 50%;
      margin-bottom: 1px;
      z-index: 1;
    }
    #stage2 img {
      display: block;
      position: absolute;
      background: #fff;
      width: 50%;
      height: auto;
      padding-bottom: 12px;
      padding-right: 12px;
    }
    #stage2 img:nth-of-type(1) {
      animation-name: fader;
      animation-delay: 2.0s;
      animation-duration: 1.0s;
      animation-timing-function:ease-out;
      z-index: -1;
    }
    #stage2 img:nth-of-type(2) {
      z-index: -4;
    }
    #stage2 img:nth-of-type(n+3) {
      display: none;
    }
}

@keyframes fader {
  from { opacity: 1.0; }
  to   { opacity: 0.0; }
}