@font-face {
  font-family: 'Apercu-Regular';
  src: url('./fonts/apercu_regular.eot');
  src: url('./fonts/apercu_regular.eot?#iefix') format('embedded-opentype'),
       url('./fonts/apercu_regular.woff2') format('woff2'),
       url('./fonts/apercu_regular.woff') format('woff'),
       url('./fonts/apercu_regular.svg') format('svg'),
       url('./fonts/apercu_regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Apercu-Bold';
  src: url('./fonts/apercu_bold.eot');
  src: url('./fonts/apercu_bold.eot?#iefix') format('embedded-opentype'),
       url('./fonts/apercu_bold.woff2') format('woff2'),
       url('./fonts/apercu_bold.woff') format('woff'),
       url('./fonts/apercu_bold.svg') format('svg'),
       url('./fonts/apercu_bold.ttf') format('truetype');
  font-weight: bold;
}

body {
	background: #000;
	background: rgb(237, 237, 239);
	color: #fff;	
}

.main {
	position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgb(237, 237, 239);
}

.background {
	position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;	
  opacity: 0.99;

  background-image: url('./images/landscape.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: right;

  @media (orientation: portrait) {
  	background-image: url('./images/portrait.jpg');
  }

}

.landscape {
	background-image: url('./images/landscape.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.portrait {
	background-image: url('./images/portrait.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.volks-logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 220px;
	height: auto;
}

.cta {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	width: 100%;
}

.cta button {	
	position: relative;
  border: 3px solid #000;
  line-height: 0;
  font-size: 18px;
  line-height: 18px;
  padding: 12px 20px 10px;
  font-family: "Apercu-Bold", Arial, Helvetica, sans-serif;
  cursor: pointer;
  color: #000;
  text-transform: uppercase;
  transition: background .1s, color .1s;  
}

.cta button.book {
	background: url('./images/watercolorsplats-rapid.gif') !important;
	margin-bottom: 16px;
}

.cta button.home {
	background: #fff;
}

.cta button.home:hover {
	background: #000;
	color: #fff;
}

.hidden {
	visibility: hidden;
}