/*
Theme Name: Basetheme
Author: Nick
Description: Base theme for basecamp
Version: 0.0.1
Tags: bootstrap
*/

/*
Note: CSS reset done in style.css
*/

/* 
==================================================
Style the header
==================================================
*/
.header-landingpage {
	padding-bottom: calc(100vh + 150px);
  margin-bottom: -150px;
  overflow: hidden;
  z-index: 1;
  transition-duration: 1s;
}
.landing-background {
	position: absolute;
	top: 0;
	height: 100%;
	width: 150%;
	z-index: -1;
	
	background-position: -200px 40%;
	background-repeat: no-repeat;
	background-size: cover;
    -webkit-filter: brightness(30%);
}
@media (min-width: 900px){
  .landing-background {
    background-position: 66% 33%;
    width: 100%;
  }
}
/*
.landing-background-fade-bottom {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
}*/
.header-scroll-hidden {
  margin-top: calc(-100vh + 100px);
}
.page-background{
	position: absolute;
	top: 0;
	height: 30vh;
	width: 100%;
	z-index: -1;
	
	/*background-image: url('../img/bg-hex.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1000px auto;*/
}
@media (min-width: 900px){
	.page-background {
		background-size: cover;
	}
}
.header-top-ref {
	position: absolute;
	top: 0;
}

.header-page {
  /*background-color: white;*/
  background-image:url(../img/wood.jpg);
  background-size: contain;
  margin-bottom: -150px; /*Match with wrapper*/
}

.header-wrapper {
  position: relative;
  z-index: 5;
  overflow: hidden;
}


/*
Caption
*/
.caption-wrapper-page {
  display: flex;
  width: 100%;
  top: 0;
  left: 0;
  margin-top: 75px;
  margin-bottom: calc(75px + 150px); /*Match with header*/
}
@media (min-width: 900px) {
  .caption-wrapper-page {
    margin-top: 100px;
    margin-bottom: calc(100px + 150px); /*Match with header*/
  }
}
.caption-wrapper {
  position: absolute;
  display: flex;
  width: 100%;
  top: 0;
  left: 0;
  margin-top: 60vh;
}
.caption-spacer-left {
  width: 33%;
  position: relative;
  min-width: 12%;
}
.caption-spacer-right {
  width: 66%;
  position: relative;
}
.caption-content-middle {
  width: auto;
  white-space: nowrap;
  position: relative;
  margin-left: 20px;
}
.caption-spacer-left-page {
  width: 15%;
  position: relative;
  min-width: 20px;
}
.caption-content-middle-page {
  width: auto;
  white-space: nowrap;
  position: relative;
}
.caption-spacer-right-page {
  width: 15%;
  position: relative;
  min-width: 20px;
}
@media (min-width: 900px) {
  .caption-spacer-left-page {
    width: 250px;
    min-width: 20px;
  }
  .caption-spacer-right-page {
    width: 250px;
    min-width: 20px;
  }
}

/* Single line outer wrapper*/
.header-caption-top {
  position: absolute;
  top: 0;
  left: 0;
  font-family: reenie-beanie, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: orange;
  opacity: 0.8;
}
.header-caption-top .tilt span {
  position: relative;
  left: -50%;
}
.header-caption-bottom {
  font-family: 'Capsmall', sans-serif;
  font-style: normal;
  font-weight: 300;
  color: white;
}
@media (min-width: 900px){
  .header-caption-bottom {
    font-family: 'Urban', sans-serif;
  }
}

.header-caption-top {
  font-size: 200%;
}
.header-caption-bottom {
  font-size: 225%;
}
.header-caption-top .tilt span {
  top: -30px;
}
@media (min-width: 643px){
  .header-caption-top {
    font-size: 300%;
  }
  .header-caption-bottom {
    font-size: 400%;
  }
  .header-caption-top .tilt span {
    top: -45px;
  }
}
@media (min-width: 900px){
  .header-caption-top {
    font-size: 500%;
  }
  .header-caption-bottom {
    font-size: 500%;
  }
  .header-caption-top .tilt span {
    top: -65px;
  }
}


/* Inner caption*/
.tilt {
  position: absolute;
  transform: rotate(-7deg);
}
.intro{
  position: relative;
  transition-delay: 0.5s;
  transition-duration: 0.5s;
}
.intro.from-right {
  margin-left: -50vw;
}


/* Accent line under wrapper*/
.underline-accent {
  /*position: relative;*/
}
.underline-accent:after
{
	content: "";
	position: absolute;
	bottom: 0px;
	left: -10px;
	width: 0%;
	height: 2px;
  background-image: linear-gradient(to right, orange, transparent);
  transition-duration: 1s;
}
.underline-accent-animate:after {
  transition-delay: 0.5s;
  width: 87vw;
}
@media (min-width: 900px) {
  .underline-accent-animate:after {
    width: 60vw;
  }
}

/*
Page header
*/
 .header-title-container {
  display: block;
 }

 .page-header-title {
  font-family: 'Capsmall', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 400%;
  color: white;
  /*opacity: 0.8;*/
 }
 @media (min-width: 900px) {
  .page-header-title {
    font-family: 'Urban', sans-serif;
  }
 }


/*
Loading curtain
*/

.landing-curtain {
  position: fixed;
  z-index: 99999;
  background-color: black;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition-duration: 0.5s;
}
.landing-curtain svg {
  position: relative;
  top: -50px;
  width: 100%;
  height: 50px;
}
.landing-curtain:before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100px;
  border-color: transparent transparent #ffffff transparent;
}

.curtain-drop {
  transform: translate(0,calc(100vh + 100px));
}




/*
Dropping words wrapper
*/

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}

/* -------------------------------- 

xslide 

--------------------------------*/
.cd-words-wrapper span {
  display: inline-block;
  padding: .2em 0;
}
.cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-words-wrapper b {
  opacity: 0;
  top: .2em;
}
.cd-words-wrapper b.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in 0.6s;
  -moz-animation: slide-in 0.6s;
  animation: slide-in 0.6s;
}
.cd-words-wrapper b.is-hidden {
  -webkit-animation: slide-out 0.6s;
  -moz-animation: slide-out 0.6s;
  animation: slide-out 0.6s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@-moz-keyframes slide-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}
@keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    -moz-transform: translateY(120%);
    -ms-transform: translateY(120%);
    -o-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}