/* Background */
body, html {
	height: 100%;
	margin:0;
	font-family: Helvetica;
	overflow:hidden;
}
.bgimg {
	background-image: url('./images/Background.png');
	min-height:100%;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	z-index: 0;
}

/* Clouds */
#single-cloud {
	background-image: url('./images/Single Cloud.png');
	height: 100px;
	width: 250px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: fixed;
	left: 40%;
	transform: translateX(-50%);
	top: 100px;
	z-index: 1;
}
#clouds-left {
	background-image: url('./images/Clouds Left.png');
	height: 150px;
	width: 350px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: fixed;
	left: 30px;
	top: 15px;
	-webkit-animation: move-right 75s ease-out 1;
	-webkit-animation-fill-mode: forwards;
    -moz-animation: move-right 75s ease-out 1;
    -moz-animation-fill-mode: forwards;
    -o-animation: move-right 75s ease-out 1;
    -o-animation-fill-mode: forwards;
    animation: move-right 75s ease-out 1;
    animation-fill-mode: forwards;
    z-index: 3;
}
#clouds-right {
	background-image: url('./images/Clouds Right.png');
	height: 150px;
	width: 350px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: fixed;
	right: 30px;
	top: 40px;
	-webkit-animation: move-left 220s ease-out 1;
	-webkit-animation-fill-mode: forwards;
    -moz-animation: move-left 220s ease-out 1;
    -moz-animation-fill-mode: forwards;
    -o-animation: move-left 220s ease-out 1;
    -o-animation-fill-mode: forwards;
    animation: move-left 220s ease-out 1;
    animation-fill-mode: forwards;
	z-index: 2;
}

/* Foreground */
#foreground {
	background-image: url('./images/Foreground.png');
	height: 87%;
	width: 98%;
	background-position: center right;
	background-size:contain;
	background-repeat: no-repeat;
	position: fixed;
	top: 13%;
	z-index: 4;
}


/* Text */
h1 {
	margin-top: 0;
	color:#fff;
	position:relative;
	z-index:10;
}
p {
	font-weight: bold;
	color: #835a32;
	position:relative;
	z-index:10;
}
.w3-display-middle {
	position: absolute;
	top: 45%;
	transform: translateY(-50%) translateX(-50%); 
	left: 35%;
	z-index: 10;
}

/* Logo */
.w3-display-bottomcenter  {
	text-align: center;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}
a.logo img {
	max-width: 200px;
}

/* Media Queries */
@media (min-width: 1600px) {
	#foreground {
		top: 18%;
		right: 10%;
		width: 100%;
	}
}
@media (max-width: 1024px) {
	#single-cloud {
		height: 100px;
		width: 150px;
		left: 40%;
		transform: translateX(-50%);
		top: 100px;
	}
}

@media (max-width: 768px) {
	#single-cloud {
		display: none;
	}
	#clouds-left {
		width: 250px;
		height: 100px;
	}
	#foreground {
		right: -10%;
		top: 29%;
		height: 60%;
	}
}

@media (max-width: 480px) {
	.w3-display-middle {
		left: 50%;
		width: 80%;
	}
	br {
		display: none;
	}
	#clouds-left {
		width: 150px;
		height: 100px;
	}
	#foreground {
		right: -40%;
	}
}

@media (max-width: 380px) {
	#foreground {
		right: -40%;
	}
}

@media (min-height: 1000px) {

}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px){ 
	#foreground {
		right: -30%;
		height: 83%;
	}
}

@media only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1366px) and (max-width: 1366px){
	#foreground {
		right: 0;
		height: 83%;
	}
}

@media (max-height: 480px) {
	#foreground {
		right: 5%;
	    top: auto;
	    height: 100%;
	    bottom: -10px;
	}
}

/* Animation */
@-webkit-keyframes move-right {
    0% {}
    100% { left: 140vw;}
}
@-moz-keyframes move-right {
    0% {}
    100% { left: 140vw;}
}
@-o-keyframes move-right {
    0% {}
    100% { left: 140vw;}
}
@keyframes move-right {
    0% {}
    100% { left: 140vw;}
}

@-webkit-keyframes move-left {
    0% {}
    100% { right: 140vw;}
}
@-moz-keyframes move-left {
    0% {}
    100% { right: 140vw;}
}
@-o-keyframes move-left {
    0% {}
    100% { right: 140vw;}
}
@keyframes move-left {
    0% {}
    100% { right: 140vw;}
}