/* Catch all */

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  margin:0;
  height:100%;
  width:100%;
}

body {
  background-color: white;
  overflow-x:hidden;
  font-family: arial, helvetica, sans-serif;
  font-size: 18px;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
  cursor: pointer !important;
}

a:hover {
}

h1 {
  font-size: 1.5em;
}


/* Navigation Header */

.header__container {
  z-index: 9999;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.spacer {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 10px;
  width: 100%;
}

.header__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}

.header__item.left {
  text-align: left;
}

.header__item.right {
  text-align: right;
}

.home,
.info {
  font-family: arial, helvetica, sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  text-transform: inherit;
  font-style: normal;
}

.home:hover,
.info:hover {
  color: white;
  text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.3);
}


/* .home,
.info.project-page {
  font-family: times new roman, times, serif;
  font-style: oblique;
  font-weight: bold;
  text-transform: uppercase;
} */

/* .info,
.home.project-page  {
  font-weight: normal;
  font-family: arial, helvetica, sans-serif;
} */






/* Image Carousel */

/* .media__container {
  height: 100vh;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
} */


#media__container {
  overflow: hidden;
  white-space:nowrap;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:no-wrap;
      flex-wrap:no-wrap;
  height:100vh;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.media__block {
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* height:100vh; */
  position:relative;
  -webkit-box-align:left;
      -ms-flex-align:left;
          align-items:left;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
}

#media__container::-webkit-scrollbar {
  display: none;
}

.media__block img {
  max-height: 100vh;
  display: inline-block;
}

.media__block video {
  height: 100vh;
  /* flex-wrap: wrap; */
  display: inline-block;
}

.media__block .caption {
 position: absolute;
 bottom: 10px;
 left: 10px;
}

.caption {
  /* background-color: white; */
}

/* .media__block .caption {
position: relative;
font-size: 2em;
bottom: 100px;
width: 80%;
margin: 0 auto;
text-align: center;
 background-color: pink;
} */

.hide {
  display: none;
}

.media__link:hover + .hide,
.caption:hover {
  display: block;
}


#video-controls {
  width: 100%;
  position: fixed;
  margin: 0 auto;
  z-index: 999999;
  bottom: 0;
}

#unmute-container {
  display: block;
  text-align: center;
  color: white;
  margin-bottom: 30px;
}

#unmute:hover {
  font-style: italic;
  cursor: pointer;
}


/* Text blocks */

.text__container {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 35px;
}

/* .text__container.contact-info {
  margin-top: 45px;
} */

.text__container.contact-info .spacer,
.text__container.project .spacer {
  display: block;
  width: 40% !important;
}

.text__block {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

.text__block:not(:last-child) {
  margin-bottom: 5px;
}

.project-title {
  font-family: times new roman, times, serif;
  font-size: 1.2em;
}

.project-description {

}

.project-description a,
.caption a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid;
}

.project-description a:hover,
.caption a:hover {
  border-bottom: none;
  text-shadow: none;
}

.text__container.project .spacer {
  /* background-color: white; */
  position: fixed;
  width: auto;
}



/* MOBILE STYLES */

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

.header__item.left {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 80%;
          flex: 0 0 80%;
}

.header__item.right {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
}

}


@media only screen
/* and (min-width: 320px) */
and (max-width : 736px) {

body {
  font-size: 15px;
}

h1 {
  font-size: 1.6em;
}

.text__container {
  margin-top: 30px;
}

.text__container.contact-info .spacer,
.text__container.project .spacer {
  width: 80% !important;
}

}