/*
Theme Name:     Karma Child Theme for VCC
Theme URI:      http://themeforest.net/item/karma-clean-and-modern-wordpress-theme/
Description:    Child of the Karma theme. Do NOT delete Karma theme.
Author:         David Robinson
Author URI:     http://birchstudio.com
Template:       karma
Version:        1.0
*/

/* ------- Start Custom CSS ------- */
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 {
	font-family: 'Montserrat', sans-serif;
}

html, body, div, span, applet, object, iframe, 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 {
	font-size:100%;
	line-height: 1.3em;
}

h1, h2, h3, h4, h5, h6, p.comment-author-about {
	color: #444;
}

h1 {
	font-size: 28px
}
h2 {
	font-size: 20px; 
	line-height: 30px
}

#header .header-area {
    padding: 10px auto 0 !important;
}
#header .logo {
	max-width: 100px;
    margin-botom: 20px;
}

.top-block .top-holder, 
#header .header-area, 
.main-area, 
.footer-content, 
.info, 
.jquery3-slider-wrap.flexslider, 
.tt-container {
	width: 94%;
	margin: 0 auto;
}

.content-style-default #main, .content-style-default #footer-top, .content-style-default .heading-horizontal span {
	background: white;
}

.header-overlay {
	background-image: url("/wp-content/uploads/2017/07/3-stripes-2500x214-4.png");
	background-repeat: no-repeat;
	background-position: 0% -135px;
}

.header-holder {
	border-top: none;
}

/* MENU */
#menu-main-nav, .ubermenu ul.ubermenu-nav, .header-area .ubermenu {
	font-size:14px;
	padding-left: 20px;
}
#menu-main-nav li strong {
	color: #0f5596;
}

#menu-main-nav.sf-menu li ul {
	margin:6px 0 0 -16px;
}
#menu-main-nav.sf-menu li ul a {
	border-radius: 0px;
}

#menu-main-nav.sf-menu li ul, 
#menu-main-nav li.parent:hover, 
.tt-logo-center #menu-main-nav li.parent:first-child:hover, 
#wrapper.tt-uberstyling-enabled .ubermenu ul.ubermenu-nav > li.ubermenu-item.tt-uber-parent:hover, #wrapper.tt-uberstyling-enabled .ubermenu ul.ubermenu-nav li.ubermenu-item ul.ubermenu-submenu {
	background: #bbd0e0;
}
#menu-main-nav a, 
#menu-main-nav .sub-menu li.current-menu-ancestor ul a, 
#menu-main-nav a:hover span.navi-description, 
#menu-main-nav li.current_page_item a span.navi-description, 
#menu-main-nav li.current_page_parent a span.navi-description, 
#menu-main-nav li.current_page_ancestor a span.navi-description, 
#menu-main-nav .sub-menu li.current-menu-item ul li a, 
#menu-main-nav .sub-menu li.current-menu-ancestor ul li.current-menu-item ul li a {
	color: #155794;	
}

/* For mobile menu edits, use http://www.vacleancities.org/dev/wp-admin/customize.php */


/*  */
.main-area {
	width:100%;
	padding:0;
}

#horizontal_nav {
	border-bottom: none;
}

#intro-paragraph {
	padding: 70px;
}

.tools {
	border-radius: 0px;
}

.tools + #horizontal_nav {
	margin: -45px 2.5% 10px 2.5%;
}
.tools .frame {   /* breadcrumb and search bar */
	padding: 10px 22px 3px 20px;
}

.breadcrumb {
	display: none;
}

#horizontal_nav ul li, #horizontal_nav ul a, .tabset .ui-state-active, .tabset .active, .tabset a:hover, .karma-pages a, .karma-pages span, .wp-pagenavi a, .wp-pagenavi span, .woocommerce-pagination a, .woocommerce-pagination span {
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

#horizontal_nav ul {
	display: none;
}

#content.content_full_width, 
.tools {
	width: 90%;
/*	padding: 0 !important;*/
    padding: 0 5%;
}

/* PAGE TITLE */
#main .tools h1 {
    padding-bottom: 0px; 
    font-size: 38px; 
    float: left; 
    color: #155794;
    margin: 3px 0 0 0;
}

/*page title container*/
.tools {
	background-color: white;
	background: none;
}

/***** FOOTER *******/
#footer .one_fourth, #footer .one_fourth_last {
    width: 24%;
    margin-right: 1%;
}

#footer h3 {
	color: #444444;
	font-size: 18px;
}

#footer .footer_post h4, #footer .footer_post h4 a {
	color: #444444;
	font-size: 14px;
}
.footer-content a:hover {
	color: #666666;
}

.footer_post h4 p {
	font-size: 10px;
	font-weight: normal;
}

.tribe-list-widget ol,
.tribe-list-widget ul,
.tribe-list-widget li {
	list-style-type: none;
}

h4.tribe-event-title {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1.1em;
	margin-bottom: 0px;
}

span.tribe-event-date-start, 
span.tribe-event-date-end {
	font-size: 14px;
}

#footer, #footer p, #footer ul, #footer_bottom, #footer_bottom p, #footer_bottom ul, #footer #mc_signup_form label {
	color: #444444;
}
#foot_left {
	color: white;
}

.one_half_last, .one_third_last, .one_fourth_last, .one_fifth_last, .one_sixth_last, .three_fourth_last, .two_thirds_last {
	float: left;
}

/****************** RESPONSIVE ITEMS ***********************/

/* BUCKET STRUCTURE */
.bucket-row {
	display:block;
	overflow:auto;
	margin: 20px auto;
	padding: 1%;
	background: white;
}

/* 2 COLUMNS */
.bucket-1_2, .bucket-2_2 { 
	width: 49%;
	float: left;
	padding: 16px 2px;
	text-align: center;

}

/* 3 COLUMNS */
.bucket-1_3, .bucket-2_3, .bucket-3_3 {
	width: 32%;
	float: left;
	padding: 16px 3px;
	text-align: center;
	margin-bottom: 5px;
}
.bucket-1_3 img, .bucket-2_3 img, .bucket-3_3 img {
	max-height: 110px !important; /* This overrides settings for #main img in parent theme */
	width: auto;
}

/* 4 COLUMNS */
.bucket-1_4, .bucket-2_4, .bucket-3_4, .bucket-4_4 {
	width: 24%;
	float: left;
	padding: 16px 2px;
	margin-bottom: 5px;
}
.bucket-1_4 img, .bucket-2_4 img, .bucket-3_4 img, .bucket-4_4 img {
	max-height: 90px !important; /* This overrides settings for #main img in parent theme */
	width: auto;
}

/* 5 COLUMNS */
.bucket-1_5, .bucket-2_5, .bucket-3_5, .bucket-4_5, .bucket-5_5 {
	width: 19%;
	float: left;
	padding: 16px 2px;
	margin-bottom: 5px;
	background-size: 100% auto;
	text-align: center;
}
.bucket-1_5 img, .bucket-2_5 img, .bucket-3_5 img, .bucket-4_5 img, .bucket-5_5 img {
	max-height: 60px !important; /* This overrides settings for #main img in parent theme */
	width: auto;
}

#B_sticky_menu {
	display: none;
}


/* LOGO CAROUSELS */
.homepage-logo-carousel {
	background-color: white;
	padding: 24px;
}
.supercarousel div {
	margin: 0 0;
	text-align: center;
}
.supercarousel div div p a img {
	max-height: 100px !important;
	width: auto !important;
}
#platinum-sponsors-carousel{
}
#diamond-sponsors-carousel div div div div {
	max-width: 200px !important;
}
#diamond-sponsors-carousel div div div div img {
	max-width: 120px !important;
}
#diamond-sponsors-carousel .supercarousel_wrapper {
	height: 100px !important;
}

/* CARBON COUNTER STYLES*/
#main img {
	height: inherit;
}

.counter-container {
	width: 98%;
	display: block;
	overflow: auto;
	background-color: rgba(187, 208, 225 , .3);
	padding: 30px 1%;
}
.counter-row {
	width: 100%
}
.counter-bucket {
	float: left;
	width: 25%;
	min-width: 250px;
	padding: 8px 0px;
	text-align: center;
}
a:hover .counter-bucket  {
	background-color: rgba(0,0,0, 0.1);
	border-radius: 4px;
}

.counter-image {
	height: 100px;
}
.counter-image img {
	height: 60px;
}
.counter-number {
	color: #035596;
	font-size: 42px;
	line-height: 42px;
}
.counter-label {
	color: #035596;
	font-size: 18px;
	margin: auto;
}

#donate-button-widescreen {
	float: right;
	padding: 40px 0 0 20px;
}

#donate-button-mobile {
	display: none;
}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #bacddf;
  border: none;
  color: #1b5b97;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  width: 120px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover {
  box-shadow: 0 0px 16px 0 rgba(0,0,0,0.24),0 6px 50px 0 rgba(0,0,0,0.19);
}
.button:hover span {
  padding-right: 25px;
		
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}


/* EVENTS CALENDAR */
.content-style-default ol,
.content-style-default ol li {
	list-style: none;
}


.search-form {
	display: inline;
}

.search-form .text {
	background: none;
	border: black;
	border-width: 1px;
	border-style: solid;
}

#footer .search-form {
	width: 100%;
}

.search-form .text input {
	color: #666666;
}

.board-member {
    clear: both;
    position: relative;
    overflow: auto;
    margin-bottom: 20px;
    text-align: left;
}
.board-member img {
    width: 200px;
    height: 200px !important;
    object-fit: cover;
    border-radius: 10px;
}

/************************* MEDIA QUERIES ************************/

/* for 1024px and more */
@media screen and (min-width:1024px) {
	body.karma-body-mega-menu #menu-main-nav li {
		margin-top: 45px;
		padding: 10px 20px 13px 15px;
		background-color: none;
	}
	
	body.karma-body-mega-menu #menu-main-nav li:hover {
		background-color: #bbd0e1;
	}
	
	#menu-main-nav, .ubermenu ul.ubermenu-nav, .header-area .ubermenu {
	float:left;
	}
}


/* for 1023px and less */
@media screen and (max-width: 1023px) {
	#header .logo img, 
	#header .custom-logo, 
	#header .tt-logo-right .logo img {
		max-width: 150px;
		padding-bottom: 40px;
	}
}

/* for 980px and less */
@media screen and (max-width: 980px) {
	#header .header-area {
	padding: 20px 0 20px 0;
	}
	
	#donate-button-widescreen {
		display: none;
	}
	
	#donate-button-mobile {
	display: inherit;
	float: none;
	text-align: center;
	padding: 10px 0 0 0;
	}
	
	#header .logo img {
	padding-bottom: 0;
	text-align: center;		
	}
	
	.bucket-row {
	width: 100%;
	}

	/* 2 COLUMNS */	
	.bucket-1_2, .bucket-2_2 {
	width: 100%;
	}
	.bucket-1_2 img {
	margin-bottom: 20px;
	}

	/* 3 COLUMNS */	
	.bucket-1_3, .bucket-2_3, .bucket-3_3 {
	width: 49%;
	}
	.bucket-3_3 {
	clear: both;
	width: auto;
	float: none;
	}

	/* 4 COLUMNS */	
	.bucket-1_4, .bucket-2_4, .bucket-3_4, .bucket-4_4 {
		width: 48%;
	}
	
	/* 5 COLUMNS */	
	.bucket-1_5, .bucket-2_5, .bucket-3_5 {
		width: 32%;
	}
	.bucket-4_5, .bucket-5_5 {
		width: 49%;
	}
}

/* for 600px and less */
@media screen and (max-width: 600px) {
	
	
	/* 3 COLUMNS */ 
	.bucket-1_3, .bucket-2_3, .bucket-3_3 {
		width: auto;
		float: none;
	}
	/* 4 COLUNNS */	
	.bucket-1_4, .bucket-2_4, .bucket-3_4, .bucket-4_4 {
		width: 98%;
	}
	
	/* 5 COLUNNS */	
	.bucket-1_5, .bucket-2_5, .bucket-3_5, .bucket-4_5, .bucket-5_5 {
		width: 98%;
	}
}