/*
Theme Name: Downeast Data
Theme URI: https://downeastdata.com/
Author: Ryan M. Collins
Author URI: https://ryanmcollins.com/
Description: Custom Interactive & Responsive Website 
Version: 1.0
License: Copyright 2016+ Downeast Data; All Rights Reserved; Reproduction is Prohibited
Text Domain: downeast
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@font-face {font-family:"Colaborate-Medium";src:url("/fonts/ColabMed.eot?") format("eot"),url("ColabMed.woff") format("woff"),url("/fonts/ColabMed.ttf") format("truetype"),url("/fonts/ColabMed.svg#Colaborate-Medium") format("svg");font-weight:normal;font-style:normal;}

/* === All Encompasing Elements === */

body {
	margin 0; padding: 0;
	font-family: "Open Sans", "Proxima Nova", sans-serif;
}

h1 {
	color: #fff;
	font-weight: 500;
}

img.bg, img.stars, img.bokeh, img.nebula {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  
  z-index: 1;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg, img.stars, img.bokeh, img.nebula {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

#page {
	margin: 0; padding: 0;
}

img.stars {
	z-index: 2;
}

img.bokeh {
	z-index: 3;
}

img.nebula {
	z-index: 4;
}

img.water {
	position: fixed;
	bottom: 0;
	z-index: 5;
	width: 100%; max-height: 230px;
	height: 80%;
}

#logo-text {
	z-index: 6;
	position: fixed;
	width: 400px; height: 200px;
	top: 50%; left: 50%;
	margin-left: -200px;
	margin-top: -100px;
	text-align: center;
	font-family:"Colaborate-Medium", sans-serif;
}

#logo-text h1 {
	font-size: 40px;
	margin-bottom: 5px;
}

#logo-text h2 {
	margin: 0; padding: 0;
	font-size: 14px;
	color: #9ddfff;
	text-transform: uppercase;
}

#logo {
	z-index: 10;
	position: fixed;
	top: 75%; left: 50%;
	
	width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

#arrows {
	z-index: 11;
	position: fixed;
	top: 75%; left: 50%;
	
	width: 134px;
    height: 134px;
    margin-top: -67px;
    margin-left: -67px;
}

#sailboat {
	z-index: 8;
	display: none;
	position: fixed;
	bottom: 90px; left: 3%;
	height: 300px; width: 136px;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	
}

#sailboat-shadow {
	z-index: 7;
	display: none;
	position: fixed;
	bottom: -8px; left: 3%;
	height: 102px; width: 136px;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	
}

@media screen and (min-height: 415px) {
	/* accounts for pushing the logo down on very short screen heights */
	#logo-text {
		top: 32%;
	}
	#logo {
		position: fixed;
		top: 50%; left: 50%;
	}
	
	#arrows {
		position: fixed;
		top: 50%; left: 50%;
	}
}

@media screen and (min-height: 600px) {
	#sailboat, #sailboat-shadow {
		display: block;
	}
}

@media screen and (min-width: 1024px) {
	#logo-text {
		top: 30%;
	}
	#logo {
		width: 300px;
	    height: 300px;
	    margin-top: -150px;
	    margin-left: -150px;
	}
	
	#arrows {
		width: 200px;
	    height: 200px;
	    margin-top: -100px;
	    margin-left: -100px;
	}
	#logo-text h1 {
		font-size: 50px;
		margin-bottom: 0px;
	}
	#logo-text h2 {
		font-size: 14px;
	}
	#sailboat {
		height: 422px; width: 191px;
		left: 10%
	}
	#sailboat-shadow {
		height: 144px; width: 191px;
		left: 10%;
		bottom: -48px;
	}
}

/* === Welcoem Screen === */

#welcome {
	position: fixed;
	width: 100%; height: 100%;
	z-index: 1000;
	background: #2A2B37;
}

#welcome img {
	position: fixed;
	width: 302px; height: 130px;
	top: 50%; left: 50%;
	margin-top: -65px;
	margin-left: -151px;
}

/* === Orbits === */

#orbit, #orbit2, #orbit3 {
    position: fixed;
    top: 50%;
    left: 50%;

    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
    
    opacity: 0.2;
    
    -webkit-animation: spin-left 13s linear infinite;
    -moz-animation: spin-left 13s linear infinite;
    -ms-animation: spin-left 13s linear infinite;
    -o-animation: spin-left 13s linear infinite;
    animation: spin-left 13s linear infinite;
}

#orbit2 {
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;	
	
	-webkit-animation: spin-right 18s linear infinite;
    -moz-animation: spin-right 18s linear infinite;
    -ms-animation: spin-right 18s linear infinite;
    -o-animation: spin-right 18s linear infinite;
    animation: spin-right 18s linear infinite;
}

.planet {
	position: absolute;
    top: 20px;
    left: 50%;

    height: 10px;
    width: 10px;
    margin-left: -25px;
    margin-top: -25px;
    
    background: #19509c;
    border-radius: 50%;
    
    opacity: 1;
}

@-webkit-keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
       -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
         -o-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes spin-left {
  100% {
    -webkit-transform: rotate(-360deg);
       -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
         -o-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* === Header & Nav === */

nav {
	width: 100%; 
	position: fixed;
	top: 0;

	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	
	border-bottom: solid 1px #002459;
	
	z-index: 35;
}

.navback {
	z-index: -1;
	width: 100%; 
	min-height: 55px;
	position: fixed;
	top: 0;
	
	background: #002459;	
	opacity: 0.4;
}

nav ul {
    display: table;
    margin: 0 auto;
    padding: 0;
}

nav ul li {
	margin: 0; padding: 0;
	position: relative;
	display: inline;
	text-transform: uppercase;
}

nav a {
	display: inline-block;
	text-align: center;
	padding: 20px 15px;
	color: #fff;
}

nav a:hover {
	color: #fff;
	text-decoration: none;
	
	background: rgba(5, 51, 121, 0.7);
}

nav a.active {
	background: rgba(5, 51, 121, 0.7);
}

/* === Content === */

#content {
	display: none;
	transform: scale(0.0);
	transform-origin: top;
	position: relative;
	width: 90%;
	margin: 64px auto; padding: 20px 40px;
	z-index: 25;
	background: #fff;
	min-height: 1500px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

@media screen and (min-width: 1024px) {
	#content {
		width: 80%;
	}
}

#closeButton {
	display: none;
}