/*
Theme Name: Boys and Girls Club
Description: A theme for Boys and Girls Club Sonoma by TIV Branding
License: GNU General Public License v2.0 & Apache License 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html http://www.apache.org/licenses/LICENSE-2.0
Template: tiv-starterkit
Text Domain: tiv-starterkit

*/

.alignwide {
	margin: 32px calc(25% - 25vw);
	max-width: 100vw;
	width: 100vw;
}
.alignfull {
	margin: 0 calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

/* ----- Resets and Base Styles ----- */
body {
	font-size: calc(16px + (17 - 16) * ((100vw - 300px) / (1600 - 300)));
	line-height: calc(1.5em + (34 - 28) * ((100vw - 300px) / (1600 - 300)));
	font-family: 'Open Sans', sans-serif;
	color: #636363;
}
/* Fluid typography, based on https://css-tricks.com/snippets/css/fluid-typography/ */
.h1, h1 { font-size: calc(2rem + (48 - 40) * ((100vw - 300px) / (1600 - 300))) !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: .75em; text-transform: uppercase; color: #fff; font-weight: 300; line-height: 1.4; }
.h2, h2 { font-size: calc(1.5rem + (40 - 36) * ((100vw - 300px) / (1600 - 300))); padding-left: 0 !important; padding-right: 0 !important; margin-top: .75em; color: #0581b3; margin-bottom: 0.25em; text-transform: uppercase; }
.h3, h3 { font-size: calc(1.25rem + (34 - 28) * ((100vw - 300px) / (1600 - 300))) !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: .5em; }
.h4, h4 { font-size: calc(1.25rem + (30 - 22) * ((100vw - 300px) / (1600 - 300))) !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: .5em; }
.h5, h5 { font-size: calc(1.125rem + (24 - 20) * ((100vw - 300px) / (1600 - 300))) !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: .5em; }

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

@media(max-width: 768px){
	h1, h2, h3, h4, h5 {
		text-align: center;
	}
}


a, a:hover, a:visited {
	color: #0581b3;
	text-decoration: none;
}
a:hover {
	opacity: .8;
}

code {
    border: 1px dotted #999;
    display: inline-block;
    width: auto;
    padding: 1em 2em;
    color: #333;
    background-color: #eee;
    margin: 1em 0;
}

.text-center {
	text-align: center;
}

/* ----- Color Classes ----- */
/* These classes can be used to quickly add a color value to an element */
/* For example, adding class="blue-bg white" will give an element a blue background with white text. */
.white, .white:visited, .white:hover, .white:focus {color: #fff;}
.white-bg {background-color: #fff;}
.blue {color: #0581b3;}
.green {color: #82bb00;}
.green-bg {background-color: #82bb00;}
.blue-bg {background-color: #0581b3;}
.yellow-bg {background-color: #f9ec23;}

#content .blue-bg *,
#content .blue-bg.white:hover {
	color: #fff;
	text-decoration: none;
}
span.blue {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5em;
}

/* ----- Buttons ----- */
.btn, .button, .gform_button {
	background-color: #82bb00;
    color: #fff;
    padding: .25em 1em;
    width: auto !important;
    border-radius: 0 !important;
    margin: .5em 0;
    transition: all .5s ease-in-out;
    display: inline-block;
    border: none !important;
	text-transform: uppercase;
}
.blue-btn {
	background-color: #0581b3 !important;
    color: #fff !important;
    padding: .25em 1em !important;
    width: auto !important;
    border-radius: 0 !important;
    margin: .5em 0;
    transition: all .5s ease-in-out;
    display: inline-block;
    border: none !important;
	text-transform: uppercase;
}
.white-btn {
	background-color: #fff !important;
    color: #0581b3 !important;
    padding: .25em 1em;
    width: auto !important;
    border-radius: 0 !important;
    margin: .5em 0;
    transition: all .5s ease-in-out;
    display: inline-block;
    border: none !important;
	text-transform: uppercase;
}
.btn:hover,
.btn:visited, 
.button:hover,
.button:visited {
	color: #fff;	
}


/* ----- Navigation ----- */
#masthead {
	position: relative;
}
#site-navigation {
	min-height: 70px;
}
.site-branding img {
	width: 100%;
	height: auto;
	max-width: 400px;
	min-width: 400px;
}
#primary-menu {
    text-transform: uppercase;
}

@media (max-width: 991px) {
	.site-branding img {
		max-width: 150px;
		min-width: 150px;
	}
}
@media (min-width: 769px) {
	#primary-menu > li:first-child {
	    padding-left: 0 !important;
	}
	#primary-menu > li:last-child {
	    padding-right: 0 !important;
	}	
}
@media (max-width: 991px) {
	#site-navigation {
		z-index: 100;
		padding: 1em 0 !important;
	}
	#primary-menu {
		position: absolute;
		left: 0;
		top: 100%;
		background-color: #0581b3;
		margin-top: -1px;
	}
	#primary-menu a {
		color: #fff;
	}
	#primary-menu:before,
	#primary-menu:after {
	    content: '';
	    height: 2em;
	}
}

/* ----- Bootstrap 4 additions ----- */
/* These classes allow you to use flex values for element sizing. This is in addition to the Bootstral col- classes */
.flex-1 {
	-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;	
}
.flex-2 {
	-webkit-box-flex: 2;
    -ms-flex: 2;
        flex: 2;	
}
.flex-3 {
	-webkit-box-flex: 3;
    -ms-flex: 3;
        flex: 3;	
}
.flex-4 {
	-webkit-box-flex: 4;
    -ms-flex: 4;
        flex: 4;	
}
.flex-5 {
	-webkit-box-flex: 5;
    -ms-flex: 5;
        flex: 5;	
}


/* ----- Mobile Menu Button ----- */
.menu-toggle {
    float: right;
    margin-right: 15px;
    padding: 23px 10px;
    background-color: #0581b3;
    background-image: none;
    width: 50px;
    right: 0;
    border: none !important;
	border-radius: 0;
}
.menu-toggle.hamburger-menu .bar {
    position: relative;
    background: #fff;
    transition: all 0ms 300ms;
}
.menu-toggle.hamburger-menu .bar, 
.menu-toggle.hamburger-menu .bar:after, 
.menu-toggle.hamburger-menu .bar:before {
    width: 100%;
    height: 2px;
}
.menu-toggle.hamburger-menu .bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    background: #fff;
    transition: bottom 300ms 300ms cubic-bezier(0.23,1,.32,1),transform 300ms cubic-bezier(0.23,1,.32,1);
}
.menu-toggle.hamburger-menu .bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    background: #fff;
    transition: top 300ms 300ms cubic-bezier(0.23,1,.32,1),transform 300ms cubic-bezier(0.23,1,.32,1);
}
.menu-toggle:focus {
	outline: none !important;
}
.menu-toggle:hover {
	border: none !important;
	cursor: pointer;
}

/* ----- Bootstrap mobile menu fix ----- */
.collapse.show {
    display: block !important;
}

/* ----- Smart Menu Styles ----- */
.sub-menu li {
    display: block !important;
}
@media(min-width: 769px){
	.sm-custom2 a .sub-arrow {
		display: none;
	}
	.sub-menu {
	    position: absolute;
	    top: 100% !important;
	    padding: .5em 0 !important;
	    background-color: #fff;
	    box-shadow: 0 0 3px 5px #333;
	}
	.sub-menu li {
		padding: .5em 1em !important;
	}
	.sm-custom2 ul.sub-menu li ul.sub-menu {
	    margin-left: calc(100% + 1px) !important;
	    z-index: -1 !important;
	}
	
}

@media(max-width: 768px){
	.sm-custom2 ul.sub-menu {
		width: 100% !important;
	}
	.sub-menu li {
		padding-left: 2em !important;
		margin-top: 0.5em;
	}
	.sub-menu li:first-child {
		margin-top: 0;
	}
	.sm-custom2 ul.sub-menu li ul.sub-menu li {
		margin-top: .5em;	
	}
}

/* ----- Blog Styles ----- */
/* Grid Styles */
.grid {
	width: calc(100% + 2em);
    margin-left: -1em;
}
.grid .blog-post {
    border: 1px solid #ddd;
    width: 29%;
    margin-bottom: 2em;
    margin: 1em;
    min-height: 50px;
}
@media (max-width: 768px){
	.grid .blog-post {
		width: 100% !important;	
	}
}
.grid .blog-post .h2 {
	margin: 0;
    padding: .25em .5em !important;
    background-color: #0088ff;
    color: #fff;
}
.grid .blog-post p {
	padding: 1rem;
    font-size: .9em;
}
.grid .blog-post .date {
    padding: 0 1rem;
    margin-bottom: 1em;
    font-size: .8em;
}
.grid .blog-post .thumb {
	height: 150px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* List and Summary Styles */
.list .blog-post,
.summary .blog-post {
	width: 100%;
}
.list .blog-post .copy {
	display: none;
}

/* General Styles */
#blog-format-toggle i:hover {
	cursor: pointer;
	opacity: .6;
}
#blog-format-toggle i.active {
	opacity: .6;
}
a.blog-post {
    color: initial;
    text-decoration: none;
}