@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	overflow-x: hidden;
	height: 100%;width: 100%;
	overflow: hidden;
}
body,html {
	 padding: 0;
	 margin: 0;
}
/* ----------------- landscape --------------------- */

div#landscape {
	position: absolute;
	height: 100%;width: 100%;
}
div.image {
	position: absolute;
	height: 100%;width: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
div#image1 {
	background-image:url(../images/2017_landscape.jpg);
}
div#image2 {
	background-image:url(../images/fakelake.jpg);
	left: 100%;
}
div#image3 {
	background-image:url(../images/mountainlake.jpg);
	left: 100%;
}


div#landscape div#year,div#landscape div#msg, div#citation {
	position: absolute;
	display: block;
	font-family: 'Open Sans Condensed', sans-serif;
	text-align:center;
	color: #fff;
	width: 100%;
	overflow: hidden;
	height: 48%;
	margin-bottom: 1%;
}
div#msg {
	top: 52%;
}
div#landscape div div.content {
	position: absolute;
	height: 100%;width: 100%;
	bottom: 0;
	cursor: pointer;
}
#landscape div.content {
	position: relative;
	height: 100%;
	font-size:40%;
}


/* ----------------- text --------------------- */

div#msg {
    -webkit-transform: scaleX(-1) scaleY(-1);
       -moz-transform: scaleX(-1) scaleY(-1);
        -ms-transform: scaleX(-1) scaleY(-1);
         -o-transform: scaleX(-1) scaleY(-1);
            transform: scaleX(-1) scaleY(-1); 
} 
div#citation {
	position: absolute;
	bottom: -100%;left: 50%;
	width:50%;height: auto;
	width: 300px;
	margin-left: -150px;
	font-family: 'Medula One', cursive;
}
div#citation span.author {
	font-size: .85em;
}
div#pm {
	position: absolute;
	bottom: -100%;left: 50%;
	width:50%;height: auto;
	width: 300px;
	margin-left: -150px;
	font-size: 2em;
	font-family: 'Medula One', cursive;
}
div#pm a {
	position: relative;
	display: block;
	clear: both;
	font-size: .85em;
	height: .85em;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	width: auto;
	margin: auto;
}
div#pm a img {
	max-height: 100%;
	width: auto;
	margin-right: 10px;
}



/* ----------------- buttons --------------------- */

@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.08); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1); }
	80% { transform: scale(1.08); }
	100% { transform: scale(1); }
}
@keyframes lateral_left {
	0% { transform:  translate(0%,0px); }
	50% { transform: translate(5%,0px); }
	100% { transform: translate(0%,0px); }
}
a.lateral_left {
	animation-name: lateral_left;
	animation-duration: 5000ms;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.pulse {
	animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
a.rotate {
	position: absolute;
	display: inline-block;
	width: 43px;height: 40px;
	left: 50%;
	top: 50%;
	margin-left: -22px;
	margin-top: -20px;
	background:url(../images/btn_replay.png) no-repeat center center;
	background-size: 75%;
	z-index: 99;
	border: 0 none;
	text-indent: -999em;
	-webkit-transition: all 0.2s ease-in-out;/
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	opacity: .5;
}

a.prev, a.next {
	display: block;
	width: 25%;height: 100%;
	position: absolute;
	top: 0;
	background:url(../images/btn_prev.png) no-repeat 5% center;
	opacity: .8;
	text-indent: -999em;
	-webkit-transition: all 0.2s ease-in-out;/
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
a.next {
	right: 0;
	background:url(../images/btn_next.png) no-repeat 95% center;
}
a.prev:hover, a.next:hover, a.rotate {
	opacity: 1;
}

/*credits*/
div#credits {
	position: absolute;
	bottom: 5px;
	width: 100%;
	height: auto;
	font-family: 'Medula One', cursive;
	text-align:center;
	font-size: 1.5em;
	color: #fff;
	font-weight:400;
}
div#credits a {
	color: #fff;
	text-decoration: none;
}