/*
*	Theme Name: Hendren Family Foundation - support styles
*	Description: based on HTML5 Blank WordPress Theme 1.4.3
*	Version: 1
*	Author: Jennifer Rice
*	Author URI:: http://nexthorizon.net
*/
/*
-* PURPOSE *-
This file is designed to work with the core HTML5 BLANK 1.4.3 style.css and Bootstrap 4.0.0.
The file style-support.css contains the main style template on which this theme is built.
This file contains the custom theme styles, and everything that makes it unique.
Modifications should be made here.


-* THEME COLORS / FONTS *-
light blue: dcf4f3
mid blue: 006d6d
dark blue: 0c2c2d

light green: dffca2
mid green: a9ef22

black: 262626

font-family: 'Fugaz One', cursive;
font-family: 'Josefin Sans', sans-serif;

Josefin Sans
	regular 400
	italic 400
	bold 700


-* THEME STRUCTURE *-
BASIC -- includes site wide and general styles
	FONTS
	COLORS
	
FORM ELEMENTS
	BUTTONS
	INPUT

MODAL
HEADER
NAVIGATION
FOOTER

CONTENT - very specific styles
	BANNER
	FORM STYLES
	PAGES - styles used only on that page, styles only used once
*/

/*------------------------------------*\
    BASIC
\*------------------------------------*/
/*==================\
  FONTS
\*==================*/
/*** ALL TEXT FONT STYLE ***/
body {
	font-family: 'Muli', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5em;
}


/* FONT-FAMILY */
.heading.h1, .heading.h2, .heading.h3, .heading.h4, .heading.h5, .heading.h6, 
.hentry h1, .hentry h2, .hentry h3, .hentry h4, .hentry h5, .hentry h6,
nav li, .btn {
	font-family: 'Fugaz One', cursive;
	color: #006d6d;
}


/*** FONT WEIGHT/SIZE ***/
.h1.heading, .h2.heading,
.hentry h2 {
	font-weight:400;
}
.h1.heading, .h2.heading,
.hentry h1, .hentry h2 {
	font-size: 2em;
}
.page-title.heading, .page-subtitle.heading,
.h1.heading {
/*	font-weight:400;*/
}
.page-title.h1.heading, .page-title.h2.heading {
	font-size: 2.4em;
}
h3.heading {
	font-weight:700;
	font-size:1.4em;
	color: #0c2c2d;
	text-align:center;
}


/*** FONT COLORS ***/
a { color: #455668; }
.darkGrey, .darkGrey a, .midGrey, .midGrey a, .transparent-darkGrey, .transparent-darkGrey a { color:#ffffff; }
.darkGrey a, .midGrey a, .transparent-darkGrey a { text-decoration: underline; }
.darkGrey a:hover, .midGrey a:hover, .transparent-darkGrey a:hover,
.darkGrey a:focus, .midGrey a:focus, .transparent-darkGrey a:focus,
.darkGrey a:active, .midGrey a:active, .transparent-darkGrey a:active{ text-decoration: none; }
.darkGrey a:hover, .darkGrey a:focus, .darkGrey a:active { color: #87919C; }
a:hover, a:focus, a:active {
	color:#858F9A;
}


/*** UNDERLINE/CAPITALIZE ***/
.heading.h2 {
	border-bottom:2px solid #006d6d;
	padding-bottom: .4em;
}


/* LISTS */
ul.fancyUL {
	list-style-image: url("../img/icon-bullet.png");
	padding: 1em 0 0 1em;
	border-top: 1px solid #8f9aa4;
}


/*==================\
  COLORS
\*==================*/
/*** BORDER COLOR ***/
.section-border-top { border-top: 5px solid #006d6d; }
.section-border, blockquote { border-bottom: 5px solid #006d6d; }
.imgFrame {
	border-left: 5px solid #006d6d;
	border-bottom: 5px solid #006d6d;
	margin-bottom:1em;
}


/*** BACKGROUND COLORS ***/
.darkGrey { background-color: #0c2c2d; }
.transparent-darkGrey { background-color: rgba( 69,86,104,0.6); }
.transparent-lightGrey { background-color: rgba(234,234,234,0.6); }

.whiteBackground, header { background-color: #ffffff; }


/*** BACKGROUND IMAGES ***/
body {
	background-color: #dffca2;
}

/*** BOX-SHADOW ***/
header, footer, .contentArea {
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
}

/*------------------------------------*\
    FORM ELEMENTS
\*------------------------------------*/
/*==================\
  BUTTONS
\*==================*/
a, button, input, .btn { transition:.5s; }
.btn.bigButton {
	color: #ffffff;
	background-color: #006d6d;
	border:2px solid #006d6d;

	min-height:60px;
}
.btn.bigButton:hover, .btn.bigButton:active, .btn.bigButton:focus {
	color: #006d6d;
	background-color: #ffffff;
	border:2px solid #006d6d;
}
@media only screen and (min-width: 576px) {
	.btn.bigButton {
		font-size: 1.4em;
		padding:.5em;
	}
}
@media only screen and (max-width: 575px) {
	.btn.bigButton {
		font-size: 1.1em;
		padding:.8em;
	}
}

.btn.smallButton { 
}
.standard .menu-button {
	border: 2px solid #006d6d;
	background-color:#ffffff;
	color:#006d6d;
}
.standard .menu-button:hover, .standard .menu-button:active, .standard .menu-button:focus {
	border: 2px solid #006d6d;
	background-color:#006d6d;
	color: #ffffff;
}

.social {
	padding: .1em 0;
}
.social:hover, .social:active, .social:focus {
}
.modal .close {
	border: 1px solid #455668;
	background-color:#ffffff;
}


/*==================\
  INPUT
\*==================*/
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
select,
textarea,
.form-control {
	border-bottom: 1px solid #455668;
}

textarea {
}

/*------------------------------------*\
    MODAL
\*------------------------------------*/


/*------------------------------------*\
    HEADER
\*------------------------------------*/
.heading.h1 {
	font-size:1.2em;
	margin:.8em;
}

/*------------------------------------*\
    NAVIGATION
\*------------------------------------*/
header nav {
	font-size: 1.2em;
}
nav li a {
	border-bottom: 1px solid transparent;
}

header nav > ul > li > a {
    border-bottom: 1px solid #455668;
}
header nav a:hover, header nav a:focus, header nav a:active {
	border-bottom: 1px solid #ffffff;
}
header ul ul {
	background-color: rgb(234,234,234);
}


/*------------------------------------*\
    FOOTER
\*------------------------------------*/
footer { position:relative; }
footer .section-inner { padding-top: .4em; }

footer address { margin: 0; }


/*** footer nav ***/ 
footer nav li {
    font-size: 1.4em;
    margin: 0 .2em;
}
footer nav a {
	padding: .2em 1em;
}
footer nav a:hover, footer nav a:focus, footer nav a:active {
	color: #455668;
}
footer nav ul {
	margin: 1em 0 0;
	padding: 0;
	text-align:center;
}
footer .section-inner > .container { margin-bottom:.4em; }

/*** copyright ***/
.copyright small {
	padding: .6em 0;
	font-size: .8em;
}

/*------------------------------------*\
	CONTENT
\*------------------------------------*/
/*==================\
  BANNER
\*==================*/
/*** men-at-work **
@media only screen and (min-width: 1200px) {
	.bigBanner.men-at-work {
		background-image: url("../img/banner-LG-men-at-work.jpg");
	}
}
@media only screen and (min-width: 500px) and (max-width: 1199px) {
	.bigBanner.men-at-work {
		background-image: url("../img/banner-MD-men-at-work.jpg");
	}
}
@media only screen and (max-width: 499px) {
	.bigBanner.men-at-work {
		background-image: url("../img/banner-SM-men-at-work.jpg");
	}
}*/


/*==================\
  HOME
\*==================*/
.button-section {
	border:1px solid #a9ef22;
	background-color: #dcf4f3;
	padding: 1em 1em 1.2em;
}
.contentArea strong {
	font-size: 1.1em;
}


/*==================\
  FORM STYLES
\*==================*/