/*===================== 
	Color information
	
	-
	-
	-
	-
		 
=======================*/
/*===================== 
	CSS reset/normalize 
=======================*/

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	@Font-Face 
=======================*/


/*===================== 
	base styles 
=======================*/

html {
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
	}

body {
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

* {
	box-sizing:border-box;
}

svg:not(:root) {overflow: hidden;/*reset*/}
	
.clear { clear: both;}

	
/*===================== 
	typography 
=======================*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
	h1 {}
	h2 {}
	h3 {}
	h4 {}
	h5 {}
	h6 {}

p {
	margin: 0;
	}



	

/*===================== 
	header styles 
=======================*/

.header-wrap {
	width: 100%;
	margin: 0;
	}

header {
    border-bottom: 3px solid #22af52; 
}

span.icon{
	  color:#22af52;
}
.topnav {
	background-color:#0F0F0F;
	overflow:hidden;
	color:white;
	padding:20px;
	line-height:0;
	display:block;
	margin:0 auto;
	text-align:center;
}

.topnav a {
	text-align: center;
  	color:white;
  	text-decoration: none;
  	font-size: 14px;
	padding-left: 70px;
	padding-right: 70px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	display:inline-block;
	
}

.topnav a:hover {
  color:#22af52;
	transition: all .5s ease-out;
}

.topnav a.active {
  color: white;
}

ul {
	display:block;
	padding-top: 55px;
	padding-bottom: 10px;
	float:right;
}

li.head {
	list-style-type: none;
	display: inline;
	padding-left:10px;
    font-family:libre+frankin;
    font-weight:bolder;
	font-stretch: ultra-expanded;
	font-size: 10px;
	color:black;
}

.dropdown:hover {
	background-color:transparent;
}
.dropbtn {
  background-color:transparent;
  color: black;
  font-size: 15px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-weight:bolder;
	font-stretch: ultra-expanded;
  border: none;
  cursor: pointer;
	padding-bottom:15px;
}

/* The container <div> - needed to position the dropdown content */


.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
 .dropdown-content {
  display: none;
  position:absolute;
  background-color: #fff;
  min-width: 190px;
  padding-top:5px;
  padding-bottom:5px;
  z-index: 1;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
  font-weight:lighter;
}

/* Links inside the dropdown */
 .dropdown-content span {
  color: black;
  padding-left:23px;
  padding-right:23px;
  text-decoration: none;
  display: block;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  text-align: left;
  font-size: 15px;
font-weight: lighter;
	 padding-top: 5px;
	 padding-bottom:5px;
}

/* Change color of dropdown links on hover */
.dropdown-content span:hover {background-color:#FBFBFB;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  color: #3e8e41;
transition: all .5s ease-out;
}
.bottomnav {
	color:black;
	display:block;
	text-align: right;
	padding-bottom: 10px;
	padding-right:40px;
	float:right;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

}

.bottomnav a {
text-align: center;
  color:black;
  text-decoration: none;
  font-size: 15px;
	font-family:libre+frankin;
	font-weight:bolder;
	font-stretch: ultra-expanded;
}

.bottomnav a:hover {
  color:#22af52;
  transition: all .5s ease-out;
}

.bottomnav a.active {
  color: white;
}

div.main {
	padding-left:20%;
	padding-right:20%;
	
}
img.top {
    max-width: 100%;
    height: auto;
	padding-top: 8px;
	padding-bottom:22px;
	float:left;
	display:block;
	vertical-align: middle;
}


/*===================== 
	nav styles 
=======================*/



/*===================== 
	content styles 
=======================*/
.hs-btn.hs-highlighted {
	background-color:#1da3da;
}

.hs-btn.hs-highlighted:hover {
	background-color:#22af52;
	transition: all .5s ease-out;
}
	
.product .product-in-cart {
	background-color:#22af52;
}

.hs-highlighted-text {
    color:#22af52;
}

.product .markdown-percentage {
    background-color:#22af52;
}

.product .markdown-price {
    color:#22af52;
}
/*====================
	slideshow styles 
=======================*/



/*===================== 
	banner styles 
=======================*/


/*===================== 
	layout styles 
=======================*/

.wrap {
	width: 100%;
	margin: 0;
	}
	

.container {
	max-width: 1100px;
	margin: 0 auto;
	}
	
.col-1-6 { width: 16%; box-sizing:border-box;}
.col-1-5 { width: 20%; box-sizing:border-box;}
.col-1-4 { width: 24%; box-sizing:border-box;}
.col-1-3 { width: 33%; box-sizing:border-box;}
.col-1-2 { width: 49%; box-sizing:border-box;}
.col-2-3 { width: 65%; box-sizing:border-box;}
.col-3-4 { width: 75%; box-sizing:border-box;}

/*===================== 
	footer styles 
=======================*/

footer {
	margin: 0;
	width: 100%;
	background-color: #232526;
	color:#9b9b9b;
	border-top: 3px solid #22af52;
	display:block;
	}

.container{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
/*.columnn {
  float: left;
  width: 33.33%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:10px;
  padding-bottom:20px;
}*/

.columnn-1 {
	float: left;
	width: 33.33%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
}



/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

img.bottom {
	display: block;
    max-width: 100%;
    height: auto;
	padding-top: 50px;

}




h4 {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: lighter;
    line-height: 1.2;
	font-size:24px;
	margin-top: 0;
	display: block;
	padding-bottom:10px;
	padding-top:50px;
	
  
}

span.bottomicon {
	color:#22af52;
}
p.contact{
	font-size: 15px;
	padding-bottom:13px;
}


*, ::after, ::before {
	box-sizing: border-box;}

li.foot {
	list-style-type: none;
    font-family:libre+frankin;
    font-weight:bolder;
	font-stretch: ultra-expanded;
	font-size: 10px;
	color:black;
}

a.list{
	color: white;
	text-decoration: none;
	font-size: 13px;
	font-family: 'Libre Franklin', sans-serif;
    font-weight: lighter;
}

a.mr-3{
	color:white;
	text-decoration:none;
	font-weight: lighter;
}


a.mr-3:link,
a.mr-3:visited, 
a.mr-3:active {
	text-decoration: none; 
	font-size:13px;
	color: white;
	}
	a.mr-3:hover {
		text-decoration:none; 
		font-size:13px;
		color:#22af52;
  		transition: all .5s ease-out;
		}

a.list:link,
a.list:visited, 
a.list:active {
	text-decoration: none; 
	font-size:13px;
	color: white;
	}
	a.list:hover {
		text-decoration:none; 
		font-size:13px;
		color:#22af52;
  		transition: all .5s ease-out;
		}

p.last {
	margin-top:15px;
	padding-bottom:70px;
	font-size:14px;
}

a.web:link,
a.web:visited, 
a.web:active {
	text-decoration: none; 
	font-size:13px;
	color: white;
	} 

a.web:hover{
		text-decoration:none; 
		font-size:13px;
		color:#22af52;
  		transition: all .5s ease-out;
		}

.footertext {
	font-size:13px; 
	color:white;
	}

.smallfootertext {
	font-size:10px; 
	color:white;
	}

.divfooter {
	max-width:490px; 
	text-align:center; 
	margin:0 auto;
	}

/*========================== 
	  Responsive styles 
============================*/
@media screen and (max-width: 1500px) {
div.main {
	padding-left:5%;
	padding-right:5%;
}
.topnav a {
	padding-left:50px;
	padding-right:50px;
	}
}

@media screen and (max-width: 1100px) {
div.main {
	padding-left:5%;
	padding-right:5%;
	
}
.topnav a {
	padding-left:20px;
	padding-right:20px;
	}	
	}

@media screen and (max-width: 740px) {
div.main {
	padding-left:5%;
	padding-right:5%;	
}
.topnav a {
	padding-left:20px;
	padding-right:20px;
	}
	}

@media screen and (max-width: 800px) {
div.main {
	padding-left:5%;
	padding-right:5%;
	
	}
.topnav a {
	padding-left:20px;
	padding-right:20px;
	}
}