/* ============================================================
	Replace me with the Actual Design
============================================================ */
@import url('https://fonts.googleapis.com/css?family=KoHo:300,400');

html,
body {
	font-family: 'KoHo', sans-serif;
}

a {
	color: #08f;
}
a:visited {
	color: #88f;
}

.header {
	max-width: 960px;
	margin: 0 auto;
}

.module {
	max-width: 960px;
	margin: 0 auto;
}

.maintop {
	background:url(/images/main-bg.jpg);
	background-size:cover;
	background-position:center;
	text-align:center;
	min-height:700px;
	position:relative;
}

@media screen and (max-width: 600px) {
	.maintop {
		min-height:300px;
	}
}


.maintop__logo {
	max-width:50%;
	margin: 0;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

@media screen and (max-width: 600px) {
	.maintop__logo  {
		max-width:80%;
	}
}


.phone-number {
	padding:1em;
	color:white;
	font-weight:300;
	font-size: 1.6em;
	float:right;
}

.cta {
	color:white;

	text-align:center;
}

.cta__top {
	padding:2em;
	background:url(/images/bluestripe-bg.gif);
}



.cta h2 {
	font-size:2.5em;
	font-weight:300;
	text-transform:uppercase;
}

.cta h3 {
	padding:2em 3em 1em 3em;
	font-size:1.3em;
	font-weight:300;
}



.cta__top-lock {

}


.green-bar {
	display:block;
	background-color:#44b532;
	padding:1em;
	font-size:2em;
	text-transform:uppercase;
	padding-bottom:2em;
}

.green__button {
	position:absolute;
	font-size:1.2em;
	text-transform:uppercase;
	padding:.6em;
	border-radius: 20px;
	background-color:#53d934;

	width:165px;
	left:0;
	right:0;
	box-sizing: content-box;
	margin:auto;
	margin-top:-1.75em;
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.4);
	transition: background-color 0.5s ease;
	cursor: pointer;
}


.green__button:hover {
	background-color:#80fb6c;
	color:black;
}

.green__button-right {
	margin: 0;
	position: absolute;
	right: 14px;
	top: 31%;
	color:white;
}


.video {
	_background:url(/images/discover.jpg);
	text-align:center;
	padding-top:5em;
	padding-bottom:2em;
	padding-bottom: 5em;
}
.video.closed {
	display: none;
}

.video p {
	text-transform:uppercase;
	line-height:1.2em;
	color:#184c9b;
	font-size: 4.6vw;
	padding:.5em 1em 1em 1em;
}

.video strong {
	font-weight:300;
	color:white;
}

.play__button {
	width:13%;
	margin:0 auto;
	display:block;
}

.green__button-left {
	float:left;
}



.lock-icon {
	max-width:30px;
	display:inline;
}

.click {
	background-color:#09111d;
}

.zone-logo {
	width:30%;
	margin:0 auto;
	padding:1em;
}

.hattrix-logo {
	width:30%;
	margin:0 auto;
	padding:1em;
}


.video {
	background:url(/images/bluestripelight-bg.gif);
}
.video__container {
	width:90%;
	margin:0 auto;
}

.video__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	_padding-top: 25px;
	height: 0;
}
.video__wrapper.click {
	cursor: pointer;
}

.video__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.footer {

}

.padding-wrapper {
	width:60%;
	margin:0 auto;
}

.difference {
	background:url(/images/bluestripe-bg.gif);
	text-align:center;
	padding:2em;
	color:white;
	font-size:1.5em;
	font-weight:300;
}

.difference h2 {
	font-size:1.3em;
	font-weight:300;
	padding-bottom:1em;
}

.difference ul {
	column-rule: 1px solid lightblue;
	column-gap: 40px;
	column-width: 100px;
	columns: 2;
	list-style-position: inside;
}

@media screen and (max-width:1100px) {
	.difference ul {
		columns: 1;
	}
}


.difference li {
	padding-top:.5em;
}

.footer {

}

.footer__left {
	height:300px;
	float:left;
	width:50%;
	background-color:#102d5d;
	text-align:center;
	padding:1em;
	position:relative
}

.footer__left-content {
	width: 90%;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:white;
}

.footer__left img{
	width: 100%;
	max-width: 300px;
	display: block;
	height: auto;
	margin: 0 auto;
}

.footer__right {
	height:300px;
	float:right;
	width:50%;
	background-color:#0e264f;
	text-align:center;
	padding:1em;
	position:relative
}

.footer__right-content {
	width: 90%;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:white;
}

@media screen and (max-width: 600px) {
	.footer__left {
		float:none;
		display:block;
		width:100%;
	}
	.footer__right {
		float:none;
		display:block;
		width:100%;
	}

	.footer__right-content {
	    position: static;
	    transform: translate(0, 0);
	}

}

.forms__form-item-header {
	font-size:2em;
}

.forms {
	background-color:#f3f3f3;
	max-width:100%;
	padding-top:1em;
}

.forms .generic__inner {

	max-width:600px;
	font-size:1.5em;
	padding:1em;
}
.fb3__field-input {
	border-radius:20px;
	height:2em;
	padding-left:1em;
}

.fb3__field-heading-text {
    font-size: .9em;
    margin-top: .5em;
}

.fb3__button {
	background-color:#53d934;
	height:2em;
	border-radius:20px;
	 border: none;
	 padding:0 1em;
	 color:white;
	 transition:background-color .5s ease;
}

.fb3__button:hover {
	background-color:#80fb6c;
}

.number {
	font-size:1.2em;
}

.footer__right-content span {
	padding-bottom:.6em;
	display:block;
}

.footer__right-content .tm {
	font-size:.9em;
}

.gst-caught {
	max-width:100%;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.9);
	position:absolute;
	z-index:10;
	    top: 0;
}

.gst-caught__message.error{
	padding:1em;
	background-color: rgba(203,43,43,1);
	text-align:center;
	font-size:1.5em;
	z-index:10;
}

.gst-caught__message {
	cursor:pointer;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:white;
	padding:1em;
	background-color:#44b532;
	text-align:center;
	font-size:1.5em;
	z-index:10;
}

.x-button {
	font-family:arial;
	position:absolute;
	top:0px;
	right:10px;
}

/* ---- particle crap- --- */

canvas{
  display:block;
  vertical-align:bottom;
}


/* ---- particles.js container ---- */

#particles-js{
	position:absolute;
	top:0;
	bottom:0;
  width: 100%;
  height: 100%;
  opacity:.5;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}