@charset "UTF-8";

body {
	margin: auto 0;
}

/*Main Background*/
.BGcontainer {
	margin: 0 auto;
	text-align: center;
	background: url("img/light.png") no-repeat 50% 15px, -webkit-linear-gradient(#5eb7d8, #0a151b);/* For Safari 5.1 to 6.0 */
	background: url("img/light.png") no-repeat 50% 15px, -o-linear-gradient(#5eb7d8, #0a151b);/* For Opera 11.1 to 12.0 */
	background: url("img/light.png") no-repeat 50% 15px, -moz-linear-gradient(#5eb7d8, #0a151b);/* For Firefox 3.6 to 15 */
	background: url("img/light.png") no-repeat 50% 15px, linear-gradient(#5eb7d8, #0a151b);/* Standard syntax */
	padding-top: 120px;
}

/*Navigation*/
.NavBar {
	margin: 0 auto;
	position: fixed;
	text-align: center;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	z-index: 1;
}
li { 
	display: inline;
	padding-right: 60px;
}
	
/*Content*/
.DarkBlock {
	background-color: rgba(0,0,0,0.3);
	padding-bottom: 50px;
	padding-top: 20px;
	margin-top: 70px;
}
.EmptyBlock {
	padding-bottom: 50px;
	padding-top: 20px;
}
.EmptyBlock2 {
	padding-bottom: 500px;
}
.ContentContainer{
	max-width: 1280px;
	margin: 0 auto;
}
#logo {
	width: 80%;
	max-width: 700px;
}
#nelson {
	position: absolute;
	width: 100%;
	max-width: 200px;
	top: 40%;
	animation: Swim 5s infinite ease-in-out alternate;
}
#phil {
	position: absolute;
	width: 100%;
	max-width: 200px;
	top: 40%;
	animation: Swim2 5s infinite ease-in-out alternate;
}
#bill {
	position: absolute;
	width: 100%;
	max-width: 800px;
	animation: Swim 5s infinite ease-in-out alternate;
}
#fish {
	position: absolute;
	width: 100%;
	max-width: 60px;
	top: 20%;
	animation: Swim3 20s infinite ease-in-out;
}
#fish2 {
	position: absolute;
	width: 100%;
	max-width: 45px;
	top: 25%;
	animation: Swim3 23s infinite ease-in-out;
}
#fish3 {
	position: absolute;
	width: 100%;
	max-width: 30px;
	top: 15%;
	animation: Swim3 26s infinite ease-in-out;
}
#Amazon {
	width: 100%;
	max-width: 150px;
}
#Kindle {
	width: 100%;
	max-width: 200px;
}
#iBookstore {
	width: 100%;
	max-width: 225px;
}
#profile {
	width: 100%;
	max-width: 250px;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%;
	border-radius: 50%;
    border: 4px solid #66ccff;
}
.BubbleContainer {
	position: absolute;
	z-index:1;
	width: 100%;
	height: 100%;
	max-height: 300px;
	max-width: 300px;
	border: 4px solid #66ccff;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%;
	border-radius: 50%;
	background: rgba(255,255,255,0.8);
	margin-top: 20px;
}
.BubbleContent {
	font-family: Short Stack;
	color: #000;
	font-size: 15px;
	text-align: center;
	vertical-align: middle;
	line-height: 25px;
	padding: 40px;
	margin-top: 20px;
}

/*Columns*/
.HalfColumn {
	width: 40%;
	margin: 20px;
	display: inline-block;
	text-align: left;
	vertical-align: top;
}
.HalfColumnCenter {
	margin: 20px;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

.ThirdColumn {
	width: 25%;
	margin: 20px;
	display: inline-block;
}
.CenterContent{
	text-align: center !important;
}

/*Typography*/
.CopyContainer {
	width: 55%;
	margin: 0 auto;
	max-width: 1280px;
}
copy {
	font-family: Short Stack;
	color: #ffffff;
	font-size: 15px;
	line-height: 25px;
}
h1 {
	font-family: Short Stack;
	color: #ffffff;
	font-size: 30px;
	margin-top: 50px;
}
.legal {
	font-family: Short Stack;
	color: #ffffff;
	opacity: .7;
	font-size: 12px;
    bottom: 0;
	padding: 50px;
}
screen {
	opacity: .7;
}

/*Links*/
a, a:visited { color: #66ccff; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #75eafc; }

.CTA {
	font-family: Short Stack;
	color: #ffffff !important;
	font-size: 15px;
	background: #f58220;
	text-align: center;
	padding: 10px;
	border: 2px solid #f58220;
	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
}
a.CTA:hover {
	background: #ff9900;
}
.CTA2 {
	font-family: Short Stack;
	color: #ffffff !important;
	font-size: 15px;
	text-align: center;
	padding: 10px;
	border: 2px solid #66ccff;
	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
	border-radius: 5px;
	text-decoration: none;
}
a.CTA2:hover {
	background: rgba(0, 0, 0, .2);
}

/*Animation*/
@keyframes Swim {
	0% {
	  transform: translate(0, 0);
	}
	100% {
	  transform: translate(-30px, 0);
	}
}
@keyframes Swim2 {
	0% {
	  transform: translate(0, 0);
	}
	100% {
	  transform: translate(0, 50px);
	}
}
@keyframes Swim3 {
	0% {
	  transform: translate(750px, 0);
	  opacity: 0;
	}
	50% {
	  opacity: 0.25;
	}
	100% {
	  transform: translate(-200px, 0);
	  opacity: 0;
	}
}
@keyframes FloatUp {
  0% {
    transform: translate(0, 2000px);
	opacity: 0;
  }
  50% {
	opacity: 1;
  }
  75% {
	opacity: 1;
  }
  100% {
    transform: translate(0, 0);
	opacity: 0;
  }
}
.bubble {
	position: absolute;
	background: rgba(255,255,255,0.3);
	height: 12px;
	width: 12px;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: 10%;
	animation: FloatUp 10s infinite ease-in-out;
}
.bubble2 {
	position: absolute;
	background: rgba(255,255,255,0.3);
	height: 8px;
	width: 8px;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: 15%;
	animation: FloatUp 15s infinite ease-in-out;
}
.bubble3 {
	position: absolute;
	background: rgba(255,255,255,0.3);
	height: 10px;
	width: 10px;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: 90%;
	animation: FloatUp 12s infinite ease-in-out;
}
.bubble4 {
	position: absolute;
	background: rgba(255,255,255,0.3);
	height: 7px;
	width: 7px;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: 80%;
	animation: FloatUp 20s infinite ease-in-out;
}
.bubble5 {
	position: absolute;
	background: rgba(255,255,255,0.3);
	height: 5px;
	width: 5px;
	-webkit-border-radius: 50%;
  	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-left: 25%;
	animation: FloatUp 25s infinite ease-in-out;
}