/*
Theme Name: Temp Theme
Theme URI: https://temp-studio.com
Description: Temp Studio's website
Version: 3.0
Author: Temp Studio
*/

@import url("bootstrap-grid.min.css");
@import url("bootstrap-reboot.min.css");
@import url("bootstrap.min.css");
@import url("bootstrap-grid.min.css.map");
@import url("bootstrap-reboot.min.css.map");
@import url("bootstrap.min.css.map");

body {
	font-family: 'Barlow', sans-serif;
  font-weight:200;
  overflow-y: scroll;
  overflow-x: hidden;
  color: #ffffff;
  background: #000000;
}
article { z-index:1; }
canvas{
  position:absolute;
  top:0;
}
@media (max-width: 450px) {
#secondary {clear: both;}
}
img{
  width: 100%;
}
h2,
h2 p{
  font-size: 34px;
  line-height: 50px;}
@media (max-width: 375px) {  
  h2,
  h2 p{
    font-size: 21px;
    line-height: 35px;
  }
}
@media (max-width: 320px) {  
  h2,
  h2 p{
    font-size: 21px;
    line-height: 35px;
  }
}
h4,
h4 p,
p{
  font-size: 13px;
  line-height: 19.5px;
}
h3{
  font-size: 21px;
  line-height: 31px;
}
li{
  list-style: none;
}
a,
a:hover{
  color: #ffffff;
  text-decoration: underline;
}
body {
  background: #000000;
}
.active:after {
  content: '|';
}
.output {
  color: white;
}
.hover-opacity{
  opacity: .5;
  transition: opacity .5s;
}
.hover-opacity:hover{
  opacity: 1;
}
/*------ Start Parallax --------*/
#parallax {
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-around;
  position: relative;
  width: 100%;
}
.container section {
  width: 100%;
  height: 100vh;
  flex: 1;
  display: flex;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: #000000;
}
.container section .background {
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 500;
  opacity: 0.4;
}
@media (max-width: 768px) {  
  .container section .background {
    background: url();
  }
}
.container section .object {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  width: 100%;
  max-width: 70%;
  justify-content: center;
  z-index: 1000;
  color: #ffffff;
  margin: 0 auto;
  position: relative;
}
.container section .object h2 {
  margin: 0px;
}
/*------ End Parallax --------*/

#about{
  padding: 10vw 0vw;
  min-height: 100vh;
}
#about #about-content p{
  width: 90%;
  font-size: 13px;
  line-height: 19.5px;
  margin-bottom:5px;
}
#about #about-content h4{
  font-size: 21px;
  line-height: 31px;
}
#about #about-content span:before{
  content: "_ ";
}
#page h4{
  margin-top: 4vh;
}
#archive div,
.page div{
  background-color: #0000ff;
  max-height: 100%;
  transition: background 3s;
}
#archive img,
.page img{
  mix-blend-mode:multiply;
  opacity: .9;
  width: 100%;
  height: auto;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  -webkit-transition: filter 12s; /* Safari */
  transition: filter 3s;
}
#archive div:hover{
  background: transparent;
}
#archive div:hover img{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  opacity: 1;
  cursor:pointer;
}
#archive p{
  line-height: 1.4em;
}
.caption{
  background: none !important;
  bottom:0;
  right:0;
}
.caption h4{
  font-family: 'Space Mono', monospace;
}

.carousel-inner{
  max-height: 100vh;
}

.card{
  border-radius: 0 !important;
  border: none !important;
  background-color:#0000ff;
}
.card img{
  mix-blend-mode: screen;
  -webkit-transition: mix-blend-mode 2s; /* Safari */
  transition: mix-blend-mode 2s;
}
.card:hover img{
  mix-blend-mode: initial;
}

#content{
  border-top: 1px solid #ffffff;
}
#page img{
  max-width:100%;
  max-height: 4vw;
  width: auto;
  height:auto !important;
}
#columns a{
  text-decoration:none;
}
#columns a:hover{
  text-decoration:underline;
}
#columns{
  column-count: 3;
}
#columns-2{
  column-count: 2;
}
#columns-2 div{
  min-width: 24vw !important;
}
#columns-1{
  column-count: 2;
  max-width: 75%;
}

@media (max-width: 768px) {  
  #columns,
  #columns-1,
  #columns-2{
    column-count: 1;
  }
  #background-mobile{
    display: block !important;
    width: 100vw;
    height: auto;
  }
  #myCarousel,
  .arrow{
    display:none;
  }
  .menu-item{
  padding-bottom:1vw;
  }
  #page img{
  max-height: initial !important;
  }
}
.navbar-toggler-icon {
  width:13px;
  height:15px;
  background-image: url('../img/down-arrow.png');
  cursor: pointer;
  opacity:.5;
}
.navbar-toggler-icon:hover{
  opacity:1;
}
button:active,
button:focus{
  outline:none !important;
  border:none !important;
}
.menu-item{
  padding-right:2vw;
}
.menu-item:last-child{
  padding-right:0px !important;
}
footer a{
  text-decoration: none;
}
footer img{
  max-width:12px;
}
.featured-video-plus iframe{
  width:100vw !important;
  height:100vh !important;
}