/**
 * Theme Name: Hinterland 2017
 * Author: Devona
 * Author URI: http://devona.com/
 * Description: Custom theme for Hinterland.
 * Version: 2.1.1
 * Text Domain: hinterland
 */


/* GLOBAL
--------------------------------------- */
* {
	box-sizing: border-box;
}
html,
body{
	font-family: "Trade Gothic", Helvetica, Arial, sans-serif;
	font-weight: 200;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	background: #FFF;
	min-width: 320px;
	color: #000;
	overflow-x: hidden;
}
html {
	font-size: 10px;
}
body{
	font-size: 2.4rem;
	line-height: 3rem;
	width: 100vw;
}
h1,
.blockquote p {
	font-size: 4.2rem;
	font-weight: 200;
	line-height: 5.2rem;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
}
h2,
p,
address,
form,
#right-drawer input[type=email],
.blockquote p .attributed-name,
.blockquote p .attributed-title,
.more-toggle,
a.happening {
	font-size: 2.4rem;
	font-weight: 200;
	line-height: 3rem;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
}
.blockquote p .attributed-name {
	margin-top: 4rem;
}
a{
	color: #000;
	text-decoration: none;
}
ul{
	font-size: 4.2rem;
	font-weight: 200;
	line-height: 5.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.container {
	display: block;
	position: relative;
	background-position: center center;
	background-size: 40px;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-color:#FFF;
}

.container iframe,
.container img {
    top: 0;
    left:0;
    position: absolute;
	width: 100%;
	height: 100%;
	opacity:1;
	display: block;
    transition: opacity 1s;
    object-fit: cover;
}
.full_width_height img {
	position: relative;
	height:auto;
}

.container img.lazy {
	opacity:0;	
}
.container .tint{
	background: rgba(0,0,0,.8);
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #FFF;
    opacity: 0;
	transition: opacity .5s;
}
a.container:hover .tint{
    opacity: 1
}
.full_width {
	width: 100%;
	height: 80rem;
/*	height: initial; */
}
.full_width_height {
	width: 100%;
	/*height: 80rem;*/
		height: initial;
}
.half_width,
.half_width_tall,
.blockquote {
	vertical-align:middle;
	display:inline-block;
	width: 50%;
}
.half_width {
	height: 40rem;
}
.half_width_tall {
	height: 94rem;
}
.center {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
	width: 100%;
	text-align:center;
}
.hero{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0
}
.parallax{
	position:relative;
	margin-top: 100vh;
	margin-bottom: -57rem;
	z-index: 5;
	background: #E8E7E6;
	width: 100%;
}
#submit {
	height: 1.7rem;
	width: 1.9rem;
}
.submit-arrow {
	fill: #fff;
}
.blockquote {
	padding: 4rem 2rem;
	background: none;
} 
.blockquote p {
	text-align: center;
	width: 43rem;
	margin: 0 auto;
} 
.blockquote .attributed-name,
.blockquote .attributed-title {
	display: block;
}
.blockquote .attributed-title,
.gray {
	color: #808080;
}
#down-arrow {    
	width: 6.1rem;
    height: 2.2rem;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -3.05rem;
    margin-top: -6.2rem;
    z-index: 3;
    opacity: 1;
    transition: opacity 1s, margin-top 1s;
}
#down-arrow.off {    
    margin-top: 0rem;
    opacity: 0;
}
.locked {
	overflow: hidden;
}
::-webkit-scrollbar { 
    display: none; 
}
input[type=submit]{
	display:none;
}


/* HEADER, FOOTER AND DRAWER
--------------------------------------- */
header,
#header-background{
    height: 10rem;
    background: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    padding: 3.3rem 4rem;
    box-sizing: border-box;
}
#header-background{
    background: #fff;
    z-index: 6;
    opacity: 0;
}
.drawer.open ~ header div{
	opacity: 0;
}
header a{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.toggle.left{
	left: 4rem;
	transition: left 1s;
}
.toggle.left.off{
	left: -8rem;
}
.toggle.right{
	right: 4rem;
	transition: right 1s;
}
.toggle.right.off{
	right: -8rem;
}
header .logo{
    left: 50%;
    transform:translate(-50%,-50%);
	transition: top 1s;
}
header .logo.off{
    top: -8rem;
}
#image-logo {
	display: none;
	width:1.75rem;
	height:2.8rem;
}
#text-logo {
	display: block;
}
#right-drawer.open ~ header .toggle.right,
#left-drawer.open ~ header .toggle.left{
	color: #fff;
}
#right-drawer.open ~ header .toggle.left,
#left-drawer.open ~ header .toggle.right,
.drawer.open ~ header .logo{
	display: none;
}
footer {
	width:100%;
	margin:0;
	padding:0;
	display:block;
}
#related {
	position:relative;
	display: block;
	background: #000;
	padding: 13.333333% 0 0 0;
	height: 20rem;
	width:100%;
	color:#FFF;
	text-align: center;
	margin:0;
	box-sizing:border-box;
}
.drawer{
	position: fixed;
	top: 0;
	height: 100vh;
	width: 110rem;
	background: rgba(0,0,0,1);
	z-index: 8;
	padding: 10rem 4rem 0rem 4rem;
	box-sizing: border-box;
	transition: left 1s, right 1s;
}
.drawer-mask {
	position:relative;
	width:100%;
	height: 100%;
	overflow: hidden;
}
.drawer-scroll {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
#drawer-background{
	background:#000;
	opacity:0;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	transition: opacity 1s;
	z-index: 7;
	pointer-events:none;
}
.drawer.open ~ #drawer-background{
	opacity:.8;
}
#left-drawer{
	left: -110rem;
}
#left-drawer.open{
	left: 0rem;
}
#left-drawer .container {
	height: 44rem;
	background: none;
}
#left-drawer .container img{
	position: relative;
	width: 100%;
	height: 30rem;
	background-color: #fff;
	transition: opacity .5s;
}
#left-drawer .container:hover img{
	opacity:.2;
}
#left-drawer .container .center{
	top:37rem;
	color: #FFF;
	width: calc( 100% - 8rem );
}
#right-drawer{
	right: -110rem;
}
#right-drawer.open{
	right: 0rem;
}
#right-drawer .container{
	margin-bottom: 15rem;
}
#right-drawer .full_width{
	height: 57.5rem;
}
#right-drawer .half_width{
	height: 30rem;
}
#right-drawer .container.text {
	background:none;
	padding:0rem 3.5rem 15rem 3.5rem;
	color: #FFF;
	text-align:center;
	height:auto;
	margin-bottom: 0;
}
#right-drawer h1,
#right-drawer p,
#right-drawer address,
#right-drawer input[type=email] {

	font-style:normal;
	color: #fff;
}
#right-drawer h1.happening{
    padding-bottom: 5rem;
}
#right-drawer ul {
}
#right-drawer ul li{
	display:inline-block;
    width: 40%;
    margin: 5rem 2.5rem 0rem 2.5rem;
    vertical-align: top;
}
#right-drawer p:not(.address),
#right-drawer address,
#right-drawer form{
    margin: 5rem auto 0 auto;
}
#right-drawer a.happening,
#right-drawer p.happening {
	display: block;
	color: #FFF;
	padding: 5rem 4rem;
	text-align:center;
	margin: 0 auto;
}
hr {
	height: 0;
	border:none;
	border-bottom: .1rem solid #FFF;
}
#right-drawer a {
	color: #FFF;
	text-decoration: underline;
}
#right-drawer address a {
	text-decoration: none;
}
#right-drawer form span{
    padding: 1rem 0;
    margin-left: 3rem;
    border-bottom: .1rem solid #fff;
}
#right-drawer input[type=email] {
	font-family: "Trade Gothic", Helvetica, Arial, sans-serif;
	width: 17rem;
    background: none;
    border: none;
}
#right-drawer input:focus{
    outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
.parallax,
.drawer,
footer,
#right-drawer ul li{
	font-size:0;
	line-height: 0;
}
.hero video,
#right-drawer video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#happenings-display {
	display:block;
	overflow:hidden;
	position:relative;
}
.happenings-slider {	
	position:relative;
	transform:translateY(-100%);
	background:#000;
}


/* HOME AND SINGLE
--------------------------------------- */
#page-missing-image {
    height: 100vh;
    width: 100vw;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
#page-missing-text {
	position: absolute;
	top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
#slideshow {
	overflow: hidden;
}
#slideshow > .center {
	z-index:3;
}
#slideshow li{
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	transition: left 2s;
	box-sizing:border-box;
	overflow: hidden;
}
.slideshow-frame img {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	margin-left: 0%;
	transition: left 2s;
}
.slideshow-frame span {
	opacity: 0;
	transition: opacity 1s;
	transition-delay: 0s;
}
.slideshow-frame.active span {
	opacity: 1;
	transition: opacity .5s;
	transition-delay: 2s;
	transition-delay: .5s;
}
.home .container .center {
	width: 95rem;
}
#description {
	background: #fff;
}
#description .center {
	width: 95rem;
}
#description .center h1,
#description .center p {
	margin-bottom: 2rem;
}

.more-content {
	display: inline;
}
.more-content.hidden {
	display: none;
}
#description .center p br {
	display: block;
	margin-bottom: 2rem;
	content: " ";
}
#description a {
	text-decoration:underline;
}


@media (min-width: 1440px) {
	h2,
	body,
	p,
	address,
	form,
	#right-drawer input[type=email],
	.blockquote p .attributed-name,
	.blockquote p .attributed-title,
	.more-toggle,
	a.happening{
		font-size: 24px;
		line-height: 30px;
	}
	h1,
	ul,
	.blockquote p {
		font-size: 42px;
		line-height: 52px;
	}
	
	
	#right-drawer form span{
	    padding: 10px 0;
	}
	#submit {
		height: 17px;
		width: 19px;
	}
	.blockquote p {
		text-align: center;
		width: 430px;
	} 
}


@media (max-width: 750px) {
	h1,
	.blockquote p,
	h2,
	p,
	address,
	form,
	#right-drawer input[type=email],
	.blockquote p .attributed-name,
	.blockquote p .attributed-title{
	    width: 100%;
		max-width:67rem;
		
	}
	h1,
	.blockquote p {
		font-size: 5rem;
		line-height: 6rem;
	}
	body,
	h2,
	p,
	address,
	form,
	#right-drawer input[type=email],
	.blockquote p .attributed-name,
	.blockquote p .attributed-title,
	.more-toggle,
	a.happening {
		font-size: 3.8rem;
		line-height: 4.6rem;
	}
	#image-logo {
		width:2.3rem;
		height:3.9rem;
	}
	.drawer{
		width: 100%;
		padding: 10rem 4rem 6rem 4rem;
	}
	#left-drawer{
		left: -100%;
	}
	#left-drawer .container {
	    height: initial;
	}
	#left-drawer .container img {
	    height: 40rem;
	}
	#left-drawer .container .center,
	#description .center {
		top: initial;
	    left: 0;
	    padding: 18rem 0;
	    position: relative;
	    transform: none;
	    display: block;
	    margin: 0 auto;
	}
	#left-drawer .container .center {
	    padding: 6rem 0;
	}
	#description {
    	height: initial;
	}
	#description .center {
    	width: 67rem;
	}
	#right-drawer{
		right: -100%;
	}
	#right-drawer .dual-photo {
		margin-bottom: 0;
	}
	.single .full_width,
	.half_width{
		width: 100%;
		height: 42rem;
	}
	.half_width_tall,
	.blockquote {
		width: 100%;
		height: 98rem;
	}
	.blockquote {
		height:initial;
	}
	#right-drawer .full_width,
	#right-drawer .half_width {
		height: 40rem;
	}
	#right-drawer input[type=email]{
		width: 24rem;
	}
	#right-drawer ul li {
		width: 80%;
	}
	.blockquote p {
/*	
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    position: absolute;
*/	    
	    position: relative;
	    margin: 8rem auto;
	}
}