@import url('https://fonts.googleapis.com/css?family=Exo+2:Bold, Regular|Roboto:Bold|Roboto+Condensed|Roboto+Mono:Thin, Regular');

html, body {
  background-color: #1c1c1c;
  margin: 0;
  padding: 0;
}

h1, a {
  font-family: 'Exo 2', sans-serif;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  color: rgba(255, 255, 255, 1);
}

p {
  color: rgba(255, 255, 255, 1);
  font-size: 1.4vw;
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 100;
  text-align: justify;

  line-height: 1.5em;

  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;

  -webkit-column-gap: 2.6vw;
  -moz-column-gap: 2.6vw;
  column-gap: 2.6vw;
}

.fade() {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.fadeOut {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.fadeIn {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.buffer {
  height: 10vw;
  position: relative;
  display: flex;
  opacity: .5;
  font-family: 'Exo 2', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 10.5vw;
  line-height: .7em;  
  text-align: justify;
  text-transform: uppercase;
}

.container {
  position: relative;
  margin: 0 auto; /*top/bottom left/right. auto means browser calcs margin*/
  overflow: hidden;
}

.container .upper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   display: none; 
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: flex-start;
  color: white;
  display: flex;
  height: 1vw;
}

.main-container-left {
  margin-top: 6.3vw; /*have text start at top*/
  margin-left: 10vw;
  margin-right: 5vw;
  width: 24%;
  font-family: 'Exo 2', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15vw;
  line-height: .9em;  
  word-wrap: break-word;
  text-align: right;
  text-transform: uppercase;
  /*opacity: .5;*/
}


.sm{
  font-size: 11vw;
}


.main-container-right {
  margin-top: 8vw;
  margin-left: 5vw;
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 400;
  font-size: 2.4vw;
  /*line-height: .9em;*/
  text-align: left;
  text-transform: uppercase;
}

.main-container-divider {
  margin-top: 8vw;
  background-color: #FFFFFF;
  height: 14vw;
  width: 1px;
}

.supporting {
  margin-top: -7vw;
  padding-bottom: 8vw;
  /*background-color: #1c1c1c;
  text-align: center;*/
}

.supporting .container {
  margin: 0% 20%;
}

.supporting-container-divider {
  position: relative;
  border-right: 3px solid #000000;
  height: 14vw;
  width: 1px;
  background-color: #FFFFFF;
  text-align: center;
  margin: 1px auto;
  z-index: 1;
}

.scroll {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 100;
  font-size: 1.4vw;
  margin-left: 3vw;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
}

.supporting h1 {
  font-size: 3vw;
  position: relative;
}

.supporting .lower {
  display: flex;
  margin-top: 5vw;

  font-family: 'Roboto Mono', sans-serif;
  font-size: 1.4vw;
  color: rgba(255, 255, 255, 1);
}

.supporting-container-left {
  font-weight: 400;
  text-align: right;
  width: 28vw;
  margin-right: 3vw;
  text-transform: uppercase;
  line-height: 1.5em;
}

.supporting-container-right {
  font-weight: 100;
  text-align: left;
  width: 28vw;
  line-height: 1.5em;
}

.fullscreen_video {
  width: 100%;
  height: 100%;
}

.fullscreen_image {
  width: 100%;
  height: 100%;
}


@media (max-width: 670px) { /*was 767px to prevent video on mobile*/

  .fullscreen_video {
    visibility: hidden;
    /*display: none;*/
  }

  .Ded .container {
    background: url('image/Ded_mobile.PNG') center center / cover no-repeat;
  }

  .Davina .container {
    background: url('image/Davina_mobile.PNG') center center / cover no-repeat;
  }

  .Palimpsest .container {
    background: url('image/Palimpsest_mobile.PNG') center center / cover no-repeat;
  }

  .MyMind .container {
    background: url('image/MyMind_mobile.PNG') center center / cover no-repeat;
  }

  .BMC .container {
    background: url('image/BMC_mobile.PNG') center center / cover no-repeat;
  }

  .Bio .container {
    background: url('image/profile.jpg') center center / cover no-repeat;
  }
  
}



/*fullscreen video code
.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: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

@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('Davina_mom.png') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }

}

*/


  /* notes
  aws endpoint for cdn: atl3y.com.s3-website-us-west-1.amazonaws.com;
  -need video files in multiple formats
  http://slicejack.com/fullscreen-html5-video-background-css/
  https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
  https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
  */

  /*
.caption {
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.65);
  display: block;
  font-family: 'Playfair Display', Arial;
  font-size: 1.5vw;
  font-style: italic;
  line-height: 14px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 25%;
}
*/

/*
.icon_proj_1 {
  width: 20%;
  clip-path: circle(30% at center);
  position: fixed;
  top: 5%;
  left: 0%;
}
*/

/*
.container_1{
  background-color: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.65);
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container_2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;
}
*/