@charset "utf-8";
/* CSS Document */

body {
	font-family: 'Lato',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:1em;
	color: #FFF;
	background-color: #000;
	margin: 0px;
	padding:0px;
}

h1,h2,h4,h5,h6 {
	font-weight:300;
}

a {
	font-family: 'Lato',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}

img.tbg, img.tbg2, img.tbg3, img.tbg4, img.pbg4 {
	display:none;
}

/* intro items ========================================================================================*/

.video-container {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: -5px;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: fixed;
	top: 2%;
	left: 5%;
	width: 90%;
	height: 90%;
	overflow: hidden;
}

.mobile {
	display:none;
}

.hd {
	position: absolute;
	display:block;
	bottom:3%;
	right:5%;
	z-index:6;	
}

.hd-warning {
	position: absolute;
	display:none;
	bottom: 95px;
	right: 1%;
	width: 200px;
	background-color: rgba(29,29,29,1);
	text-align:center;
	border: 2px solid rgba(192,76,15,1);
	font-size:14px;
	padding:20px;
	z-index:7;
}

.hd:hover .hd-warning {
  	display:block;
}

.skipper {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height:6%;
	text-align:center;
	padding-bottom:5px;
	margin: 0 0 0 0;
	z-index:5;
}

img.tbg, img.tbg2, img.tbg3, img.tbg4, img.pbg4 {
	display:none;
}

.home-footer {
	display:none;
}

/* fixed items ========================================================================================*/

.menu {
	position: fixed;
	top: -25px;
	width: 90%;
	margin: 0 0 0 0;
	right: 10%;
	font-size:0.7em;
	z-index: 1000;
}

.sink {
	display: inline-block;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 1px 0 rgba(192,76,15,1);/* green 107,143,0,1 orange 192,76,15,1*/
	width:90px;
	height:60px;
	padding: 10px;
	border:0px;
	margin:1px;
	float:right;
	background-color:#1D1D1D;
	text-align: center;
}

.sink:hover, .sink:active {
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	box-shadow: 0 1px 0 rgba(107,143,0,1);
}

.footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	background-color: #1D1D1D;
	font-size:0.7em;
	margin: 0 0 0 0;
	z-index:1001;
}

.phone, .email, .address {
	position: relative;
	padding: 10px;
	white-space:nowrap;
}

.phone {
	float:left;
	width: 31%;
	text-align: left;
}

.email {
	float: none;
	width: auto;
	text-align: center;
}

.address {
	float: right;
	width: 31%;
	text-align: right;
}


/* Page 1 HOME index=100 ==============================================================================*/

.anchor1 {
	position:absolute;
	top:0px;
}

img.bg {
  /* Set rules to fill background */
	z-index:100;
	min-height: 100%;
	min-width: 1080px;
	
  /* Set up proportionate scaling */
	width: 100%;
	height: 100%;
	
  /* Set up positioning */
	position: absolute;
	bottom: 0;
	left: 0px;
	top: 0px;
}

@media screen and (max-width: 1080px) { /* Specific to this particular image */
	img.bg {
    left: 50%;
    margin-left: -540px;   /* 50% */
  }
}

img.tbg {
	display:none;
	z-index:100;
	min-height: 100%;
	min-width: 1080px;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
}

.logo {
	position: absolute;
	top: 30%;
	left: 10%;
	text-align: left;
	z-index: 101;
}

/* Page 2 VIDEOS index=200* ========================================================================*/

.anchor2 {
	position:absolute;
	top:100%;
}

img.bg2 {
	z-index:200;
	min-height: 100%;
	min-width: 1080px;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 100%;
	left: 0px;
}

@media screen and (max-width: 1080px) {
  img.bg2 {
    left: 50%;
    margin-left: -540px;
  }
}

.videos {
	position: absolute;
	top: 100%;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 201;
}

.disclaimer {
	position:relative;
	left:0%;
	width:100%;
	text-align:center;
	font-size:1em;
	top:15%;
}

.sections {
	position:relative;
	width:94%;
	height:auto;
	top:25%;
	padding:2%;
}

img.parts {
	position:relative;
	float:left;
	width:20%;
	left:2%;
	height:auto;
	max-width:none;
	margin:1%;
	padding:1%;	
}

.parts:hover {
	background-color:#1D1D1D;
	box-shadow:0 1px 0 rgba(107,143,0,1);
}

/* Page 3 BLACK CARD index=300 =========================================================================*/

.anchor3 {
	position:absolute;
	top:200%;
}

img.bg3 {
	z-index:300;
	min-height: 100%;
	min-width: 1080px;
	width: 100%;
	height: auto;
	position: absolute;
	top: 200%;
	left: 0px;
}

@media screen and (max-width: 1080px) {
  img.bg3 {
    left: 50%;
    margin-left: -540px;
  }
}

.blackcard {
	position:absolute; 
	top:200%; 
	left:0px; 
	width:100%;  
	height: 100%;
	z-index:301;
	font-variant:small-caps;
}
.header {
	position:relative;
	width:100%;
	top:13%;
	padding: 12px 0 10px 0;
	background-color:rgba(255,255,255,0.1);
	text-align:center;
	z-index:302;
}

img.lifestyle {
	position:relative;
	width:75%;
	height:auto;
}

.card-container {
	position:relative;
	display:block;
	width:50%;
	height:auto;
	top:20%;
	float:left;
	text-align:right;
	z-index:303;
}

.card {
	position:relative;
	display:block;
	width: 70%;
	left: 20%;
	height:auto;
	max-width: 870px;
	z-index: 304;
}

.desc {
	position: relative;
	top: 30%;
	float: right;
	letter-spacing: 1px;
	width: 50%;
	text-align: left;
	z-index: 305;
	font-size:1.2em;
}

.square {
	list-style-type:square;
}

/* Page 4 TESTIMONIALS index=400* ========================================================================*/

.anchor4 {
	position:absolute;
	top:200%;
}

img.bg4 {
	z-index:400;
	min-height: 100%;
	min-width: 1080px;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 200%;
	left: 0px;
}

@media screen and (max-width: 1080px) { 
  img.bg4 {
    left: 50%;
    margin-left: -540px;
  }
}

.testimonials-m {
	display:none;
}

.testimonials {
	position: absolute;
	top: 200%;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 401;
}

.bubbleR {
	display:block;
}

img.bubble {
	position: relative;
	float:left;
	display:block;
	z-index:402;

	}

img.bubbleXSm {
	transform: translateY(0px);
	animation: floating1 3.5s ease infinite alternate;
	padding-right: 5%;
}

img.bubbleSm {
	transform: translateY(0px);
	animation: floating2 3s ease infinite alternate;
	padding-right: 5%;
}

img.bubbleMd {
	transform: translateY(0px);
	animation: floating3 2.5s ease infinite alternate;
	padding-right: 5%;
}

img.bubbleLg {
	transform: translateY(0px);
	animation: floating4 2s ease infinite alternate;
	padding-right: 5%;
}

@keyframes floating1 {
  from {
    transform: translateY(5px);
  }
  to {
    transform: translateY(-5px) ;    
  }
}

@keyframes floating2 {
  from {
	transform: translateY(8px);
  }
  to {
    transform: translateY(-8px) ; 
  }
}

@keyframes floating3 {
  from {
    transform: translateY(5px);
  }
  to {
    transform: translateY(0px) ;        
  }
}

@keyframes floating4 {
  from {
	transform: translateY(10px);
  }
  to {

    transform: translateY(5px) ;   
  }
}

.quoteL {
	position:absolute;
	z-index:403;
	top:20%;
	right:15%;
	width:25%;	
	background-color:rgba(255,255,255,0.9);
  	border: 5px solid rgba(107,143,0,1);
  	display: none;
  	margin-top: 10px;
  	padding: 5%;
	font-size:0.9em;
	color: #1D1D1D;
}

.bubbleL:hover .quoteL {
  display: block;
}

.quoteR {
	position:absolute;
	z-index:403;
	top:20%;
	left:15%;
	width:25%;	
	background-color:rgba(255,255,255,0.9);
  	border: 5px solid rgba(228,86,57,1);
  	display: none;
  	margin-top: 10px;
  	padding: 5%;
	font-size:0.9em;
	color: #1D1D1D;
}

.bubbleR:hover .quoteR {
  display: block;
}

.experience {
	display:none;
}