/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */
	@font-face {
	    font-family: texta;
	    src: url(../fonts/Texta-Regular.otf);
	}

	@font-face {
	    font-family: textaBold;
	    src: url(../fonts/Texta-Bold.otf);
	}

	@font-face {
	    font-family: textaMedium;
	    src: url(../fonts/Texta-Medium.otf);
	}

	@font-face {
	    font-family: textaBlack;
	    src: url(../fonts/Texta-Black.otf);
	}

	@font-face {
	    font-family: BrandonBold;
	    src: url(../fonts/Brandongrotesque-Bold.otf);
	}

/* #Site Styles
================================================== */
html {
  overflow: hidden;
	min-height:100%;/* make sure it is at least as tall as the viewport */
	position:relative;
}

body {
	overflow: hidden;
	height: 100%;
}

/* #Home Page Styles
================================================== */
#twitter {
	 width: 22px;
	 border: none;
	 cursor: pointer;
	 position:absolute;
	 top: 21px;
	 right: 90px;
	 z-index: 1;
}
#twitter:hover {
	opacity: 0.6;
	-webkit-transition: all 0.4s ease-in 0s;
	-moz-transition: all 0.4s ease-in 0s;
	-o-transition: all 0.4s ease-in 0s;
	transition: all 0.4s ease-in 0s;
	 cursor: pointer;
}

#instagram {
	 width: 22px;
	 border: none;
	 cursor: pointer;
	 position:absolute;
	 top: 20px;
	 right: 35px;
	 z-index: 1;
}
#instagram:hover {
	opacity: 0.6;
	-webkit-transition: all 0.4s ease-in 0s;
	-moz-transition: all 0.4s ease-in 0s;
	-o-transition: all 0.4s ease-in 0s;
	transition: all 0.4s ease-in 0s;
	 cursor: pointer;
}

.top {
	text-align: center;
}
.full-width {
	text-align: center;
	width: 100%;
	height: 100%;
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top: -10%;
	margin-left: -50%;
}
#logo
{
	width: 20%;
	text-align: center;
}

#avail_web {
	height: 45px;
	top: 50%;
	left:0;
	right:0;
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	margin-top: 8%;
	z-index: 1
}

#avail_web:hover {
	opacity: 0.6;
	-webkit-transition: all 0.4s ease-in 0s;
	-moz-transition: all 0.4s ease-in 0s;
	-o-transition: all 0.4s ease-in 0s;
	transition: all 0.4s ease-in 0s;
	 cursor: pointer;
}

#waves
{
	position:absolute;
	bottom: 0;
	margin-bottom: -10%;
	z-index: -1;
	height: 70%;
	object-fit: cover;
	right: 0;
	opacity: 1.0;
}

#community
{
	font: 1.25em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #1A1C1F;
	text-align: center;
	width: 120px;
	border: none;
	cursor: pointer;
	position:absolute;
	top: 20px;
	right: 142px;
}

.footer
{
 width: 410px;
 position:absolute;
 bottom: 0;
 left: 50%;
 margin-left: -205px;
 height: 60px;
}

#about {
	font: 1.0em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	bottom:  0;
	margin-bottom:22px;
	position: absolute;
	text-align: center;
	width: 40px;
}
#about:hover {
	opacity: 0.6;
	-webkit-transition: all 0.4s ease-in 0s;
	-moz-transition: all 0.4s ease-in 0s;
	-o-transition: all 0.4s ease-in 0s;
	transition: all 0.4s ease-in 0s;
	 cursor: pointer;
}
#press {
	font: 1.0em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	bottom:  0;
	left: 70px;
	margin-bottom:22px;
	position: absolute;
	width: 60px;
	text-align: center;
}

#press:hover {
	opacity: 0.8;
	-webkit-transition: all 0.4s ease-in 0s;
	-moz-transition: all 0.4s ease-in 0s;
	-o-transition: all 0.4s ease-in 0s;
	transition: all 0.4s ease-in 0s;
	cursor: pointer;
}
#terms {
	font: 1.0em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	bottom:  0;
	left: 160px;
	margin-bottom:22px;
	position: absolute;
	text-align: center;
	width: 40px;
}

#terms:hover {
	opacity: 0.8;
	-webkit-transition: all 0.4s ease-in 0s;
	-moz-transition: all 0.4s ease-in 0s;
	-o-transition: all 0.4s ease-in 0s;
	transition: all 0.4s ease-in 0s;
	cursor: pointer;
}

#privacy {
	font: 1.0em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	bottom:  0;
	left: 230px;
	margin-bottom:22px;
	position: absolute;
	text-align: center;;
	width: 50px;
}
#privacy:hover {
	opacity: 0.8;
	-webkit-transition: all 0.4s ease-in 0s;
	-moz-transition: all 0.4s ease-in 0s;
	-o-transition: all 0.4s ease-in 0s;
	transition: all 0.4s ease-in 0s;
	cursor: pointer;
}

#copyright {
	font: 1.0em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	bottom:  0;
	left: 310px;
	margin-bottom:22px;
	position: absolute;
	text-align: center;;
	width: 100px;
	opacity: 0.6;
}

/* #Media Queries
============================================================= */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#logo
	{
		width: 24%;
	}

	#avail_web {
		margin-top: 12%;
	}

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	#twitter {
		 right: 72px;
	}
	#instagram {
		 right: 20px;
	}

	.full-width {
		margin-top: -105px;
		height: 200px;
	}
	#logo
	{
		width: 35%;
	}

	#waves
	{
		height: 60%;
		margin-bottom: 0;
	}

	#avail_web {
		height: 50px;
		margin-top: 15%;
	}

	.footer
	{
	 width: 260px;
	 margin-left: -130px;
	}
	#about {
		font: 0.75em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
		bottom:  0;
		width: 35px;
	}
	#press {
		font: 0.75em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
		left: 40px;
		width: 50px;
	}
	#terms {
		font: 0.75em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
		left: 95px;
		width: 40px;
	}
	#privacy {
		font: 0.75em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
		left: 140px;
		width: 45px;
	}
	#copyright {
		font: 0.75em "textaBlack", "Helvetica Neue", Helvetica, Arial, sans-serif;
		left: 190px;
		width: 70px;
	}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

	#logo
	{
		width: 40%;
	}
	#avail_web {
		height: 50px;
		margin-top: 14%;
	}

}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/