html, body {
	margin: 0;
}

body {
	background-color: rgb(199, 255, 254);
}

.last-groove-link {
	font-weight: bold;
	text-decoration: underline;
	transition: 0.2s;
	color: orange;
}

.last-groove-link:hover {
	transition: 0.2s;
	color: #ff3838;
}

.logo-container {
    position: absolute;
    top: 25%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 5;
}

.logo {
	background-image: url('./images/rhythm-wave-logo.png');
	background-position: center;
    margin-left: auto;
    margin-right: auto;
    animation-name: animate-logo;
    animation-duration: 1.25s;
	animation-timing-function: ease-in-ease-out;
	animation-fill-mode: forwards;
	width: 17.625em;
	height: 10em;
	background-size: 100% 100%;
}

@keyframes animate-logo {
	0% {
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}

.phrase {
	margin-left: auto;
	margin-right: auto;
	color: #f3a657;
	font-size: 1.25em;
	font-family: Helvetica, Arial, sans-serif;
	text-align: center;
	opacity: 0;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-name: animate-phrase;
	animation-duration: 1.25s;
	animation-delay: 1.25s;
}

@keyframes animate-phrase {
	0% {
		opacity: 0;
		margin-top: 0.625em;
	}
	100% {
		opacity: 0.9;
		margin-top: 1.875em;
	}
}
.sky-gradient {
	position:absolute;
	top: 0;
	height:55%;
	width: 100%;
	background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 0;
}
.sea {
	position: absolute;
	bottom: 0;
	height: 48%;
	width: 100%;
	background: -webkit-linear-gradient(bottom, rgba(42, 168, 222, 1) 0%, rgba(80, 205, 255, 1) 100%);
	z-index: 5;
}
.legal-and-contact {
	width: 100%;
	height: 8.375em;
	position: absolute;
	bottom: 0;
	font-family: Helvetica, Arial, sans-serif;
	z-index: 8;
}

.contact {
	width: 60%;
	height: 7.1875em;
	color: #8d8d8d;
	margin: 0 auto;
}

.contact a {
	text-decoration: none;
}

.contact td {
	width: 25%;
	text-align: center;
	font-weight: bold;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 60%;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	opacity: 0.0;
	cursor: pointer;
}

@keyframes link-entrance-up {
	0% {
		opacity: 0.0;
    	-moz-transform: translateX(0%) translateY(50%);
    	-webkit-transform: translateX(0%) translateY(50%);
    	transform: translateX(0%) translateY(50%);
	}
	100% {
		opacity: 1.0;
    	-moz-transform: translateX(0%) translateY(0%);
    	-webkit-transform: translateX(0%) translateY(0%);
    	transform: translateX(0%) translateY(0%);
	}
}

.animate-link-entrance-up {
	animation-name: link-entrance-up;
}

@keyframes link-entrance-down {
	0% {
		opacity: 0.0;
    	-moz-transform: translateX(0%) translateY(-50%);
    	-webkit-transform: translateX(0%) translateY(-50%);
    	transform: translateX(0%) translateY(-50%);
	}
	100% {
		opacity: 0.9;
    	-moz-transform: translateX(0%) translateY(0%);
    	-webkit-transform: translateX(0%) translateY(0%);
    	transform: translateX(0%) translateY(0%);
	}
}

.animate-link-entrance-down {
	animation-name: link-entrance-down;
}

.legal-copy {
	color: #cdcdcd;
	font-size: 0.8125em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	opacity: 0;
	animation-name: legal-copy-animation;
	animation-duration: 1s;
	animation-delay: 3.75s;
	animation-fill-mode: forwards;
	margin-top: -6px;
}

.facebook {
	background-image: url('./images/social-icon-fb.png');
	animation-delay: 2.5s;
}

.twitter {
	background-image: url('./images/social-icon-tw.png');
	animation-delay: 2.75s;
}

.instagram {
	background-image: url('./images/social-icon-ig.png');
	animation-delay: 3s;
}

.email {
	background-image: url('./images/social-icon-mail.png');
	animation-delay: 3.25s;
}

@keyframes legal-copy-animation {
	0% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

.bright-focus {
	transition: 0.5s;
}

.bright-focus:hover {
	transition: 0.5s;
	opacity: 1.0;
    -moz-transform: translateX(0%) translateY(-5%);
    -webkit-transform: translateX(0%) translateY(-5%);
    transform: translateX(0%) translateY(-5%);
}

.shift-focus {
	transition: 0.3s;
}

.shift-focus:hover {
	transition: 0.3s;
	opacity: 1.0;
	background-size: auto 70%;
}

.wave {
	background-image: url('./images/bg-ocean-wave.png');
	z-index: 3;
	background-size: 100% 100%;
	width: 100%;
	height: 1.35em;
	position: absolute;
	top: 50%;
	animation-timing-function: linear;
	animation-name: wave-animation;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

@keyframes wave-animation {
	0% {
		transform: translateX(0%) translateY(0%);
	}
	50% {
		transform: translateX(-50%) translateY(4%);
	}
	100% {
		transform: translateX(-100%) translateY(0%);
	}
}

@keyframes wave-animation-back {
	0% {
		transform: translateX(0%) translateY(0%);
	}
	50% {
		transform: translateX(50%) translateY(27%);
	}
	100% {
		transform: translateX(100%) translateY(0%);
	}
}

.wave-2 {
	animation-name: wave-animation-two;
}

.back-wave {
	z-index: 1;
	background-image: url('./images/bg-ocean-wave-2.png');
	animation-duration: 19s;
	top: 48.95%;
	animation-name: wave-animation-back;
}

.back-wave-2 {
	animation-duration: 19s;
	animation-name: wave-animation-back-two;
	width: 100.35%;
}

@keyframes wave-animation-two {
	0% {
		transform: translateX(100%) translateY(0%);
	}
	50% {
		transform: translateX(50%) translateY(4%);
	}
	100% {
		transform: translateX(0%) translateY(0%);
	}
}

@keyframes wave-animation-back-two {
	0% {
		transform: translateX(-100%) translateY(0%);
	}
	50% {
		transform: translateX(-50%) translateY(27%);
	}
	100% {
		transform: translateX(0%) translateY(0%);
	}
}


.ocean-sparkle {
	opacity: 0;
	z-index: 7;
	position: absolute;
}

.ocean-sparkle-move-right {
	animation-name: ocean-sparkle-animation-move-right;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes ocean-sparkle-animation-move-right {
	0% {
		opacity: 0.15;
		transform: translateX(0%) scaleX(0.75) scaleY(0.25);
	}
	50% {
		opacity: 0.15;
		transform: translateX(30%) scaleX(0.5) scaleY(1);
	}
	100% {
		opacity: 0.15;
		transform: translateX(60%) scaleX(0.75) scaleY(0.25);
	}
}