﻿/*
Theme Name: www.earthborneinc.net Template
Theme URI: https://sandhills.com
Author: Sandhills
Author URI: https://sandhills.com
Description: Sandhills default template.
Version: 1.0
Text Domain: sandhills
Tags: Sandhills default
*/

/* RESET */

html, body{font-family: urw-din, sans-serif; height: 100%; width: 100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0;} img{max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;} ul, li{list-style: none;}
.n2-section-smartslider{font-family: urw-din, sans-serif !important;}

.column12, .column11, .column10, .column9, .column8, .column7, .column6, .column5, .column4, .column3, .column2, .column1{float: left; padding: 0 25px 0 0;} .column12{width: 100%;} .column11{width: 91.6666%;} .column10{width: 83.3333%;} .column9{width: 75%;} .column8{width: 66.6666%;} .column7{width: 58.3333%;} .column6{width: 50%;} .column5{width: 41.6666%;} .column4{width: 33.3333%;} .column3{width: 25%;} .column2{width: 16.6666%;} .column1{width: 8.3333%;} .last{padding: 0;} .cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *{box-sizing: border-box;}

.main{min-height: 650px; padding: 50px 0;}
.inner{max-width: 1500px; margin: 0 auto; padding: 0 20px;}
.sidebarColumn{min-height: 10px !important;}

/* TYPOGRAPHY */

p{font-size: 16px; line-height: 22px;}
h1, h2, h3, h4, h5, h6{font-weight: 700; text-transform: uppercase;}

h1{font-size: 24px;}
a{transition: all .2s ease-in-out; text-decoration: none;}

.btn{margin: 2px; white-space: normal;}
.btn-success{background: #FEC52E; border: none; color: #000;}
.btn-success:hover, .btn-success:focus{background: #EEB725 !important; color: #000 !important;}

/* HEADER */

.header{display: block; background: url("../siteart/honeycomb.jpg") bottom center no-repeat; background-size: cover; position: relative;}
.header .inner{display: flex;}
.header .logo{width: 400px; padding: 10px 0; display:flex; flex-direction:row;}
.header .logo section:first-of-type{width:60%;}
.header .logo section:last-of-type{width:40%; padding-top:20px;}
.header .navigation{width: calc(100% - 250px);}

#breadcrumbs{padding: 10px 12px; font-size: 12px; text-transform: uppercase; color: #ccc; border-top: 5px #FEC52E solid; border-bottom: 5px #f5f5f5 solid;}
#breadcrumbs span{display: block; width: 100%; max-width: 1200px; margin: 0 auto;}
#breadcrumbs span span{display: inline-block; width: auto; margin: 0;}
#breadcrumbs a{padding: 0 7px; font-weight: 700; color: #000;} #breadcrumbs a:hover{color: #777;}
#breadcrumbs .breadcrumb_last{padding: 0 7px; font-weight: 700; color: #777;}
.subnav-bold{margin-bottom:10px; font-size:24px!important; font-weight:700; text-transform:uppercase;}
/* NAVIGATION */

#cssmenu{display: block; position: relative; font-size: 0; text-align: right; z-index: 9999;}
#cssmenu ul li{display: inline-block; position: relative; list-style-type: none; margin:0;}
#cssmenu ul li a{display: block; padding: 45px 15px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff;}
#cssmenu ul li a:hover{background: #333;}
#cssmenu ul ul{display: none;}
#cssmenu #menu-button{display: none;}

.sub-hover{background: #333 !important;}

/* SUBNAV */

.sub-dropdown{display: none; position: absolute; background: #fff; width: 100%; padding: 30px 0; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5); z-index: 9999;}

.sub-dropdown ul{display: flex; flex-wrap: wrap; }
.sub-dropdown ul li{width: calc(25% - 4px); text-align: center; border: 1px #ddd solid; margin: 2px; list-style-type: none;}

.sub-dropdown ul li a{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 150px; padding: 25px 15px 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 18px; color: #555; border-bottom: 7px transparent solid;}
.sub-dropdown ul li a:hover{background: #fafafa; border-bottom: 7px #FEC52E solid;}
.sub-dropdown ul li a .svg-inline--fa{width: 100%; font-size: 48px; color: #999;}
.sub-dropdown ul li a span{width: 100%;}

.sub-dropdown .column4 h3{margin-bottom: 10px; font-size: 24px; font-weight: 700; text-transform: uppercase;}
.sub-dropdown .column4 p{font-size: 14px; line-height: 22px;}
.sub-dropdown .column4 .btn{background: #FEC52E; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 20px 3px 0px; padding: 10px 24px; font-size: 13px; color:#000; line-height: normal !important; height: auto !important; display: inline-block;}

/*similar nav dropdown layout for landing page*/
.specialty ul{display: flex; flex-wrap: wrap;}
.specialty ul li{width: calc(25% - 4px); text-align: center; border: 1px #ddd solid; margin: 2px; list-style-type: none;}

.specialty ul li a{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 150px; padding: 25px 15px 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 18px; color: #555; border-bottom: 7px transparent solid;}
.specialty ul li a:hover{background: #fafafa; border-bottom: 7px #FEC52E solid;}
.specialty ul li a .fa{width: 100%; font-size: 48px; color: #999;}
.specialty ul li a span{width: 100%;}

.specialty .column4 h3{margin-bottom: 10px; font-size: 24px; font-weight: 700; text-transform: uppercase;}
.specialty .column4 p{font-size: 14px; line-height: 22px;}
.specialty .column4 .btn{background: #FEC52E; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 0; padding: 10px 24px;}

.yellow-btn{color:#000!important; background:#fec52e; padding:12px 20px 12px 20px!important; font-size: 18px; text-transform:uppercase; font-weight:700; border:none; box-shadow:none; }
.yellow-btn:hover{background:#E3AC1C!important;}

/* HOME */

#hero-slider{border-top: 5px #FEC52E solid;}

.here-to-help{padding: 35px 20px;}
.here-to-help .icon-link{font-weight: 700; text-align: center; padding: 15px 50px 15px 15px; transition: all .2s ease-in-out;}
.here-to-help .icon-link img{margin-bottom: 20px;}
.here-to-help .icon-link a{text-transform: uppercase; color: #000;}
.here-to-help .icon-link:hover{opacity: .5;}

.here-to-help h3{position: relative; margin-bottom: 20px;}
.here-to-help h3:after{position: absolute; content: ''; background: #FEC52E; height: 5px; bottom: -50%; left: 0; width: 100%; max-width: 150px;}
.here-to-help .btn{font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 25px; padding: 12px 28px;}

.about-earthborne .col-sm-8{padding: 50px 25px !important;}
.about-earthborne h1{position: relative; margin-bottom: 20px;}
.about-earthborne h1:after{position: absolute; content: ''; background: #FEC52E; height: 5px; bottom: -50%; left: 0; width: 100%; max-width: 150px;}

.brands{display: flex; flex-wrap: wrap; border-top: 5px #FEC52E solid; overflow: hidden;}
.brands .brands-slide{width: calc(100% - 420px); padding-left: 25px;}
.brands .brands-left{display: flex; align-items: center; position: relative; margin-left: -75px; background: #000; width: 420px; text-align: right; color: #fff; transform: skewX(-35deg); z-index: 9;}
.brands .brands-left .brands-left-inner{width: 100%; transform: skewX(35deg);}
.brands .brands-left .brands-left-inner h3{padding: 15px; padding-right: 50px;}
.brands .brands-left .brands-left-inner a{display: block; font-size: 18px; color: #fff; padding: 15px; padding-right: 50px; border-top: 1px #555 solid;}
.brands .brands-left .brands-left-inner a:hover{color: #FEC52E;}
.brands .brands-left .brands-left-inner a:after{font-family: FontAwesome; content: '\f101'; padding-left: 15px;}

.team{background: url("images/join-our-team.jpeg") fixed bottom center no-repeat; background-size: cover;}
.team .team-container{float: left; width: 50%; background: #FEC52E; padding: 50px 0; transform: skewX(-35deg);}
.team .team-container-inner{transform: skewX(35deg); padding: 0 75px 0 150px;}
.team .team-container-inner .btn{background: #000; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; letter-spacing: 1px; margin-top: 10px; padding: 12px 28px;}

.newsletter{padding: 50px 0;}
.newsletter h3{position: relative; margin-bottom: 20px;}
.newsletter h3:after{position: absolute; content: ''; background: #FEC52E; height: 5px; bottom: -50%; left: 0; right: 0; margin: auto; width: 100%; max-width: 150px;}

.contactForm h1{display: none;}
.contactForm label{margin-bottom: 5px; font-weight: 700;}
.contactForm .col-xs-12{width: 49%;}
.contactForm .btn{display: block; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 12px 28px;}

/* BODY */

.main .contactForm{background: #f5f5f5; padding: 20px; padding-left: 20px !important; padding-right: 20px !important; border: 1px #ddd solid;}

.brand-container{display: flex; flex-wrap: wrap;}
.brand{display: flex; align-items: center; justify-content: center; width: calc(25% - 4px); margin: 2px; padding: 20px; text-align: center; border: 1px #ddd solid;}
.brand img{max-height: 50px;}
.brand:hover{border: 1px #FEC52E solid;}

/* FOOTER */
footer{min-height: auto !important;}
.footer{display: block; background: url("../siteart/honeycomb.jpg") bottom center no-repeat; background-size: cover; padding: 50px 0; color: #fff;}
.footer h3{margin-bottom: 15px; font-size: 20px; color: #FEC52E;}
.footer a, .footer p{line-height: 30px; color: #fff;}
.footer a:hover{color: #ccc;}

.footer .social{font-size: 28px; text-align: right;}
.footer .social a{padding: 0 2px;}
.footer .host{font-size: 11px; text-align: right;}
#sidebar-bottom{
	display: flex;
}
#sidebar-bottom div{
	margin:0 auto;
}
/* RESPONSIVE */
@media only screen and (max-width: 1300px){
	#cssmenu ul li a {padding:45px 8px; font-size:14px; }
}
@media only screen and (max-width: 1200px){
	.header .inner{flex-direction:column;}
	.header .logo{margin:0 auto;}
	.header .navigation{width:100%;}
	#cssmenu ul{display: none; text-align: left;}
	#cssmenu ul li{display: block; border-top: 1px #555 solid;}
	#cssmenu ul li a{background: #333; font-size: 12px; padding: 15px 20px; color: #fff;}
	#cssmenu ul li a:hover{background: #444;}
	#cssmenu ul li a:after{display: none;}
	#cssmenu ul ul{display: none; position: relative; left: 0;}
	#cssmenu ul ul li{border-top: 1px #777 solid;}
	#cssmenu ul ul li a{background: #555; width: 100%; padding: 15px 20px;}
	#cssmenu ul ul li a:hover{background: #666;}
	#cssmenu #menu-button{display: block; background: #FEC52E; padding: 15px 20px; font-size: 14px; font-weight: 700; text-align: center; text-transform: uppercase; color: #000; cursor: pointer;}
	#cssmenu #menu-button:after{position: absolute; top: 16px; right: 20px; font-family: FontAwesome; font-size: 16px; content: '\f0c9';}
	#cssmenu #menu-button.menu-opened:after{content: '\f00d';}
	#cssmenu .submenu-button{position: absolute; display: block; height: 44px; width: 100%; cursor: pointer;}
	#cssmenu .submenu-button:after{position: absolute; top: 17px; right: 20px; font-family: FontAwesome; font-size: 12px; content: '\f067'; color: #fff;}
	#cssmenu .submenu-button.submenu-opened:after{content: '\f068';}
}
@media only screen and (max-width: 1024px){
	.team .team-container{float: none; background: rgba(254,197,46,.75); width: 100%; padding: 35px 20px; transform: skewX(0);}
	.team .team-container-inner{transform: skewX(0); padding: 0;}
}

@media only screen and (max-width: 980px){
	.main, .newsletter, .footer{padding: 35px 0;}
	.main{min-height: inherit;}
	#breadcrumbs, #hero-slider{border-top: none;}
	
	.header .inner{padding: 0;}
	.header .logo{width: 100%; padding: 15px 20px; text-align: center;}
	.header .logo img{max-height: 75px; margin: 0 auto;}
	.header .navigation{width: 100%;}
	.sub-dropdown{display: none !important;}
	.sub-hover{background: #333 !important;}

	
}
@media only screen and (max-width: 768px){
	.hide-mobile{display: none;}
	
	.here-to-help{text-align: center;}
	.here-to-help h3:after{left: 0; right: 0; margin: auto;}
	.here-to-help .col-sm-2{display: inline-block; width: 49%;}
	.here-to-help .col-sm-4{width: 100%; margin-top: 25px; padding-left: 20px !important; padding-right: 20px !important; clear: both;}
	.here-to-help .icon-link{padding: 15px;}
	
	.brands .brands-left{width: 100%; margin-left: 0; text-align: center; transform: skewX(0);}
	.brands .brands-left .brands-left-inner{transform: skewX(0);}
	.brands .brands-left .brands-left-inner h3, .brands .brands-left .brands-left-inner a{padding-right: 15px;}
	.brands .brands-slide{width: 100%; padding: 0;}
	
	.brand{width: calc(50% - 4px);}
	
	.contactForm .col-xs-12{width: 100%;}
	.footer, .footer h3, .footer .social, .footer .host{text-align: center !important;}
	.footer h3{margin-top: 15px;}
}
@media only screen and (max-width: 480px){
.logo{flex-direction:column!important; justify-content:center;}
	.logo img{margin:0 auto!important; display:block;}
	.header .logo section{width:100%!important;}
}