/*

	PALETTE:
	#222    = BLACK
	#FFF    = WHITE
	#ff0000 = YELLOW

*/

@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,900';

html {

	height:100%;

}

body {

	margin:0px;
	height:100%;
	font-family: 'Open Sans', sans-serif;

}

h1, h2, h3 {

	font-family: 'Montserrat', sans-serif !important;
	margin:0px;

}

.jumbo {

	height:100%;
	width:100%;
	/*background-color:#222;
	background-image:url(../img/jumbo.jpg);
	background-position:center center;
	background-size:110%;*/
	display:table;
    position:relative;
    overflow:hidden;

	animation-name: bgzoom;
    animation-duration: 50s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-iteration-count: infinite;

}

.jumbo-int {

	display:table-cell;
	vertical-align:middle;
	text-align:center;
	padding:0px 30px;

}

@keyframes bgzoom {

    0% {background-size:135% auto; -webkit-background-size: 135%; background-position:top right;}
    75% {background-size:110% auto; -webkit-background-size: 110%; background-position:center left;}
    100% {background-size:100% auto; -webkit-background-size: 100%; background-position:bottom center;}

}

.jumbo-int h1 {

	margin:0px;
	color:#ff0000;
	font-size:58px;
	text-transform:uppercase;

}

.jumbo-int h4 {

	margin:0px;
	color:#FFF;
	font-size:26px;
	text-transform:uppercase;

}

.container {

	max-width:1100px;
	margin:0px auto;

}

.container-padding {

	padding:70px 0px;

}

.layout-container {

	font-size:0px;

}

.layout {

	display:inline-block;
	vertical-align:top;
	font-size:18px;

}

.layout h3,.h3-header {

	font-size:26px;
	color:#222;
	text-align:center;
	text-transform: uppercase;

}

.layout-70 {

	width:70%;

}

.layout-30 {

	width:30%;

}

.layout-50 {

	width:50%;

}

.help-panel-con {

	box-sizing:border-box;
	padding:20px;

}

.help-panel {

	box-sizing:border-box;
	padding:40px;
	border-top:3px SOLID #ff0000;

}

.panel {

	-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.29);
	-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.29);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.29);

}

.panel-header {

	background-color:#ff0000;
	color:#222;
	font-size:24px;
	padding:20px 26px;
	text-transform:uppercase;
	text-align:center;
	font-family:"Montserrat";

}

.panel-header span {

	font-size:14px;
	display:block;

}

.panel-body {

	padding:30px;

}

.textbox {

	padding:12px 0px;
	display:block;
	width:100%;
	margin-bottom:20px;
	font-family:"Open Sans";
	font-size:16px;
	border:0px;
	border-bottom:1px SOLID rgba(0,0,0,0.1);
	outline:0;

}

textarea .textbox {

	min-height:120px;

}

.button {

	background-color:#ff0000;
	padding:15px 21px;
	width:100%;
	font-size:16px;
	font-family:"Open Sans";
	border:0px;
	outline:0;
	border-radius:4px;

}

.padding-right {

	padding-right:40px;
	box-sizing:border-box;

}

.help-panel h1 {

	font-size:22px;
	font-weight:700;
	margin:0px;

}

.help-panel p {

	margin:0px;
	color:#666;
	font-size:16px;

}

.help-icon {

	font-size:50px !important;
	color:#222;
	float:right;
	margin-left:20px;

}

.grey {

	background-color:#222;
	color:#FFF;

}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.side-image {

	background-color:#333;
	width:100%;
	padding-bottom:75%;
	background-image:url(../img/snapon.png);
	background-size:cover;
	background-position:center center;

}

.big-padding {

	padding:40px;
	box-sizing:border-box;

}

.big-padding h1 {

	color:#ff0000;

}

a {

	color:#FFF;

}

.contact-icon {

	margin-right:12px;

}

.jumbo-scroller {

	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:50px;
	box-sizing: border-box;
	text-align:center;
	font-size:30px;
	color:#FFF;
	animation-name:scroller;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 1s;
	animation-direction: alternate;

}

@keyframes scroller {

	0% {transform:translateY(0px);}
	100% {transform:translateY(30px);}

}

@media screen and (max-width: 600px) {
    .layout {

    	width:100% !important;

    }

    .padding-right {

    	padding-right:0px !important;

    }
}

.image-remapping {

	background-image:url(../img/remapping.png);

}

.alert {

	padding:12px 18px;
	background-color:#ff0000;
	border-radius:4px;
	font-size:14px;
	margin-bottom:10px;

}

.disclaimer {

	padding:20px;
	background-color:#111;
	color:#FFF;
	font-size:12px;

}

.testimonials {

	padding-bottom:20px;
	cursor:default;

}

.testimonial {

	text-align:center;
	outline:0 !important;

}

.testimonial p {

	font-size:18px;

}

.testimonial a {

	color:#666;

}

.testimonial i {

	font-size:18px;
	margin:0px 1px;

}

.slick-next.slick-arrow::before,.slick-next.slick-arrow {

	display:none !important;

}

.nav {

    position:fixed;
    top:0;
    left:0;
    width:100%;
    background-color:rgba(0,0,0,0.6);
    border-bottom:1px SOLID #FFF;
    z-index:200;

}

.nav-brand {

    color:#FFF;
    padding:11px 18px;
    display:inline-block;
    font-weight:900;
    letter-spacing:-1px;
    font-size:20px;

}

.nav-hamburger {

    position:absolute;
    top:0;
    right:0;

}

.nav-links {

    float:right;
    display:inline-block;

}

.nav-link {

    display:inline-block;
    padding:14px 18px;
    font-size:14px;
    text-decoration:none;

}

.nav-link:hover {

    color:#ff0000;

}

.jumbo .video {

    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    background:
	linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
	linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
	linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
	linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
	linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
	linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
	background-color: #131313;
	background-size: 20px 20px;

}

.jumbo .video video {

    width:100%;
    height:100%;
    object-fit: cover;

}

@media only screen and (max-width: 600px) {

	.nav-link {

		padding:14px 3px;

	}

	.nav {

		padding-right:13px;
		box-sizing:border-box;

	}

}
