@keyframes pan {
	0%   { transform: translateZ(0) translateX(-10%); }
	100% { transform: translateZ(0) translateX(10%); }
}

body {
	background-color: white;
	background: white -moz-linear-gradient(top, rgba(147,206,222,0.5) 0%, rgba(117,189,209,0.5) 41%, rgba(73,165,191,0.5) 100%);
	background: white -webkit-gradient(left top, left bottom, color-stop(0%, rgba(147,206,222,0.5)), color-stop(41%, rgba(117,189,209,0.5)), color-stop(100%, rgba(73,165,191,0.5)));
	background: white -webkit-linear-gradient(top, rgba(147,206,222,0.5) 0%, rgba(117,189,209,0.5) 41%, rgba(73,165,191,0.5) 100%);
	background: white -o-linear-gradient(top, rgba(147,206,222,0.5) 0%, rgba(117,189,209,0.5) 41%, rgba(73,165,191,0.5) 100%);
	background: white -ms-linear-gradient(top, rgba(147,206,222,0.5) 0%, rgba(117,189,209,0.5) 41%, rgba(73,165,191,0.5) 100%);
	background: white linear-gradient(to bottom, rgba(147,206,222,0.5) 0%, rgba(117,189,209,0.5) 41%, rgba(73,165,191,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf', GradientType=0 );

	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}

#beach {
	background-image: url(../images/beach-horizon.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: fixed;
	top: 0;
	right: -20%;
	bottom: 0;
	left: -20%;
}

#umbrella {
	position: fixed;
	left: 0;
	top: 0;
	width: 1300px;
	height: 1300px;
	background-image: url(../images/umbrella.svg);
	background-size: 100%;
	transform: translate3d(-55%,-52%, 0);
}

@media (orientation: landscape) {
	#beach {
		animation: pan ease-in-out 30s infinite alternate;
	}
}