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

/*
Website developed by Andy Shearouse
*/

@font-face {
    font-family: HogBold;
    src:url("includes/HogBold.otf");
    src: url("includes/HogBold.woff") format("woff"), /* Modern Browsers */
         url("includes/HogBold.ttf")  format("truetype"), /* Safari, Android, iOS */
}

h1, h2, h3, h4, h5, h6{
	font-family:HogBold, Verdana, Geneva, sans-serif;
}

h1{
	font-size:2.2em;
}

.magenta{
	color:#eb058c;
}

.blue{
	color:#2392d0;	
}

html, body{
	margin:0px !important;
	padding:0px !important;
	font-family:Verdana, Geneva, sans-serif;
	color:#000;
	background-color:#000;
}

img{
	max-width:100% !important;	
}

/*.woobox-offer-wrap{
	border:12px solid #151b4b;
	box-shadow:0px 0px 8px 8px rgba(255, 255, 255, 0.2);
	border-radius:12px;
}*/

.input-label{
	width:25% !important;
}

.inputs{
	width:70% !important;
}

.container{
	max-width:1600px;
	width:100%;
	margin:0 auto;
	background-image:url(images/background.jpg);
}

.header{
    width:100%;
	background-color:#0f533e;
	color:#fff;
	position:relative;
	float:left;
}

.blah{
	width:86%;
	margin:0 7%;
	max-width:1400px !important;	
}

.social-media{
	margin:0.8em 0;
}

.social-media img{
	vertical-align:middle;
}

#toggleNav{
	display:none;
	width:100%;
	height:30px;
	padding-top:10px;
	font-size:18px;
	background-color:#000000;
	margin:15px 0px;
	color:#fff;
	cursor:pointer;
}

#toggleNav a{
	color:#ffffff;
}


/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav{
	width: 60%;
	padding-left:0%;
	z-index:10;
	position:relative;
	float:left;
	font-size:15px;
}

#nav > a{
	display: none;
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
}
#nav li a{
	color: #fff;
	display: block;
	text-decoration:none;
}

/* first level */

#nav > ul{
	padding-left:0px !important;
	margin:0.8em 0 !important;
}
#nav > ul > li{
	margin:0px 15px;
	padding:8px 8px 4px 8px;
	height: 100%;
	display:inline-block;
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
}
#nav > ul > li:not( :last-child ) > a{
	
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
	
}

	/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:170px;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	color:#000;
	padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
}
/* -------------------- End Navigation -------------------- */

#subnav{
	width:100%;
	height:100%;
	padding:185px 0% 10px 0%;
	display:none;
	text-align:center;
	background-color:#F00;
}

#subnav a{
	color:#ffffff;
	padding:6px 10px;
	font-size:16px;
	margin:2px 15px 0px 15px;
	display:block;
}

.social-media{
	position:relative;
	float:right;
	margin-right:2%;
}

.content{
	width:86%;
	margin:0 7%;
	max-width:1400px !important;
	display:inline-block;
	padding-bottom:20px;
	position:relative;
}

.content-wide{
	width:91%;
	margin:3% 2%;
	padding:1% 1.5%;
	position:relative;
	border:14px solid #37c7e4;
	border-radius:14px;
	background-color:#fff;
}

.wrapper{
	width:96%;
	padding:3% 2%;
	position:relative;
	background-color:#fff;
	overflow:hidden;
}

.content-left{
	position:relative;
	float:left;
	width:52%;
	margin-left:0%;
	min-height:200px;
	z-index:4;
}

.content-right{
	position:relative;
	float:right;
	width:34%;
	background-color:#fff;
	padding:1% 1.5%;
	margin-left:1%;
	min-height:200px;
	font-size:15px;
	z-index:4;
	border:14px solid #37c7e4;
	border-radius:14px;
}

.green-strip{
	width:100%;
	height:33px;
	background-color:#d0e020;
	position:relative;
	float:left;
}

.bottom-image{
	width:100%;
	background-color:#fff;
	position:relative;
	float:left;
}

.row, .two-box-row, .three-box-row, .four-box-row{
	width:100%;
	display:inline-block;
}

.two-box-row .box{
	width:44%;
	padding:0% 2%;
	margin:0% 1%;
	position:relative;
	float:left;
}

.three-box-row .box{
	width:23.33%;
	padding:2%;
	position:relative;
	float:left;
	margin:0% 3%;
	background-color:#fff;
}

.four-box-row .box{
	width:17%;
	padding:2%;
	position:relative;
	float:left;
	margin:0% 2%;
	background-color:#fff;
}

.footer{
	width:97%;
	font-size:15px;
	background-color:#37c7e4;
	color:#000;
	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  	grid-gap: 5px;
	padding:0 1.5%;
}

.footer-section{
	
}

.footer-nav{
	width:100%;
	text-align:center;
}

.ball-image{
	vertical-align:middle;
}

.right-links{
	position:relative;
	float:right;
	width:35%;
}

.footer-nav a{
	padding:1%;
	color:#000;
	text-decoration:none;
}

.footer-left{
	float:left;
	padding:10px 0px 0px 4%;
}

.footer-right{
	float:right;
	padding:10px 4% 0px 0px;
}

.no-margin{
	margin:0px !important;
}

.no-padding{
	padding:0px !important;	
}

.no-bold{
	font-weight:normal !important;	
}

.no-border{
	border:none !important;
}

.center{
	text-align:center;	
}

.block{
	display:block !important;	
}

.image-left{
	float:left;
	padding:8px;
}

.image-right{
	float:right;
	padding:8px;
}

.left{
	width:35%;
	padding:2% 3% 0 3%;
	position:relative;
	float:left;	
}

.right{
	width:53%;
	padding:0 3%;
	position:relative;
	float:left;
}

.images{
	clear:both;
}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.white{
	color:#fff !important;
}

.green{
	color:#0f533e;
}

@media only screen and (max-width:1195px){
	.header{
	}
}

@media only screen and (max-width:967px){
	.header{
	}
	
	.four-box-row .box{
		width:42%;
		margin:2%;
	}
	
	.content{
		width:90%;
		margin:0 5%;
	}
}

@media only screen and (max-width:800px){
	.header{
	}
	
	#toggleNav{
		display:block;
	}
	
	/* -------------------- Start Navigation -------------------- */
	#nav{
        position: relative;
    }
	#nav > a{
	}
	
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type{
		display: block;
		width:100%;
		text-align:center;
		color:#fff;
		font-size:20px;
		padding:15px 0px 5px 0px;
	}
	
	#nav > ul > li{
		padding: 8px 0px;
	}
	
	#nav a{
		font-size:18px;	
	}
 
    /* first level */
 
    #nav > ul{
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		background-color:#000;
		margin-top:16px !important;
		padding-bottom:10px;
    }
	#nav:target > ul{
		display: block;
	}
	#nav > ul > li{
		width: 100%;
		float: none;
		margin:0px !important;
	}

    /* second level */
 
    #nav li ul{
        position: static;
		width:98%;
		margin:0 !important;
		text-align:center;
		padding:0 !important;
    }
	
	#nav li a{
		color:#fff;
	}
	#nav li ul a{
		padding:0.5em 0;
		margin:0.25em 0;
	}
	/*End Navigation*/
	#subnav{
		display:none;
	}
	
	#subnav a{
		margin-top:5px;
		
	}
	
	.content-left{
		width:100%;
	}
	
	.content-right{
		width:92%;
		margin-top:2%;
	}
	
	.content-bottom{
		padding-top:2% !important;
	}
	
	.content-bottom .content-left{
		min-height:0 !important;
	}
	
	.three-box-row .box{
		width:76%;
		margin:2% 10%;
	}
	
	.four-box-row .box{
		width:76%;
		margin:2% 10%;
	}
	
	.footer{
		display: grid;
		grid-template-columns: 1fr;
		padding: 1em;
		grid-row-gap: 10px;	
	}
	
	.footer-section{
		text-align:center !important;
	}
	
	.footer-left{
		float:none;
		padding:10px 0px 0px 0px;
		display:block;
	}
	
	.footer-right{
		float:none;
		padding:0px 0px 0px 0px;
		display:block;
	}
}

@media only screen and (max-width:607px){
	.two-box-row .box{
		width:60%;
		margin:0% 20%;
	}
	
	.images img{
		max-width:100% !important;
		padding:1% 0;
	}
	
	.left{
		width:96%;
		text-align:center;
		padding:2%;	
	}
	
	.right{
		width:96%;
		padding:1% 2%;
}

@media only screen and (max-width:487px){
	.header{
	}
	
	.content-left{
		width:92%;
	}
	
	.content-right{
		width:92%;
		margin-top:3%;
	}
	
	.two-box-row .box{
		width:90%;
		margin:0% 10%;	
	}
	
	.three-box-row .box{
		width:86%;
		margin:2% 5%;
	}
	
	.four-box-row .box{
		width:86%;
		margin:2% 5%;
	}
}