/* Mixins and Effects */

@mixin flashy($seconds) {
    -webkit-transition: all $seconds ease-in-out;
    -moz-transition: all $seconds ease-in-out;
    -ms-transition: all $seconds ease-in-out;
    transition: all $seconds ease-in-out;
}

@mixin box-shadow($horz, $vert, $blur, $spread, $color) {
    -webkit-box-shadow: $horz $vert $blur $spread $color;
    -moz-box-shadow: $horz $vert $blur $spread $color;
    box-shadow: $horz $vert $blur $spread $color;
}

@mixin border-radius($px, $px, $px, $px) {
    -webkit-border-radius: $px $px $px $px;
    -moz-border-radius: $px $px $px $px;
    -ms-border-radius: $px $px $px $px;
    border-radius: $px $px $px $px;
}
 
@mixin vertical-center() {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* Animation elements */

.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    &.delay-one-quarter {
        -webkit-animation-delay: .25s;
        animation-delay: .25s;
    }
    &.delay-one-half {
        -webkit-animation-delay: .5s;
        animation-delay: .5s;
    }
    &.delay-three-quarters {
        -webkit-animation-delay: .75s;
        animation-delay: .75s;
    }
	&.delay-one-second {
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }
	&.slow {
		-webkit-animation-duration: 1s;
    	animation-duration: 1s;
	}
	&.extra-slow {
		-webkit-animation-duration: 2s;
    	animation-duration: 2s;
	}
}



/* Color Scheme */

$primary: #2E5B60; // dark teal
$secondary: #003756; // blue
$tertiary: #FF5726; // orange
//$quarternary: #8860FA; // purple
$medgray: '#D4D4D4';
$lightblue: #BFD7D1;
$lightyellow: #FBE8AC;
$teal: #287C85;
$yellow: #FFC301;
$purple: #8961FF;


$darkgray: #1D3037; 
$lightgray: #CBC8BF;
$offblack: #201006;
$offwhite: #FFFAEC;


/* Font designations */
$mainfont: brandon-grotesque, sans-serif;
$headingfont: granville, serif;
   
$bold: 700;
$semibold: 500;
$normal: 400;
$light: 300;

.main-font {
	font-family: $mainfont;
}
 
/* Universal Styles */

html, body {
	background-color: $offwhite;
    margin: 0;
    padding: 0;
    width: 100%;
	overflow-x: hidden;
    font-family: $mainfont;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    width: 75%;
    margin: 0 auto;
    position: relative;
}

.clear {
    clear: both;
}

a {
    text-decoration: none;
    color: inherit;
    @include flashy(.2s);
    img {
        border: none;
    }
}

h1, h2, h3, h4 {
    font-family: $headingfont;
    font-weight: $bold;
}

.alignleft {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
}

.alignright {
    float: right;
    margin-left: 30px;
    margin-bottom: 20px;
}

.button {
	position: relative;
	background-color: $secondary;
	border: none;
    //padding: 11px 18px 8px;
    display: inline-block;
	margin-top: 20px;
	color: #fff;
	font-weight: $bold;
	font-size: 20px;
	text-decoration: none;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    padding: 6px 18px;
	@include flashy(.2s);
	&:hover {
		background-color: $yellow;
		color: $secondary;
    }
}

figure {
    margin: 0;
    max-width: 100%;
    img {
        max-width: 100%;
        height: auto;
    }
}

p {
    line-height: 1.5em;
	& > .button {
		margin-top: calc(-.5em + 20px);
	}
}

ol, ul {
    margin: 0;
    padding: 0;
    li {
        margin-left: 18px;
        margin-bottom: 8px;
    }
}

svg.icon {
    max-width: 16px;
    max-height: 16px;
    margin-right: 5px;
    vertical-align: bottom;
}

.block-content {
	h2 {
		font-size: 36px;
		font-weight: normal;
		margin-top: 0;
	}
	h3 {
		font-size: 24px;
		font-weight: normal;
		margin-top: 0;
	} 
	h4 {
		font-size: 20px;
		line-height: 1.5em;
		font-family: $headingfont;
		min-height: 3em;
		margin-bottom: 0;
	} 
	p {
		font-size: 18px;
		line-height: 1.5em;
	}
}

.background-primary {
	background-color: $primary;
	color: #fff;
	&.faded {
		background-color: lighten($primary, 25%);
	}
	.button {
		background-color: $yellow;
		color: $tertiary;
		&:hover {
			background-color: $tertiary;
			color: #fff;
		}
	}
	a:not(.button) {
		color: $yellow;
		text-decoration: underline;
		&:hover {
			color: $tertiary;
		}
	}
}
.background-secondary {
	background-color: $secondary;
	color: #fff;
	&.faded {
		background-color: lighten($secondary, 50%);
	}
	.button {
		background-color: $tertiary;
		color: #fff;
		&:hover {
			background-color: $yellow;
			color: $secondary;
		}
	}
	a {
		color: $yellow;
		&:hover {
			color: $yellow;
			opacity: 0.8;
		}
		&.button:hover {
			opacity: 1;
		}
	}
}
.background-tertiary {
	background-color: $tertiary;
	color: #fff;
	&.faded {
		background-color: lighten($tertiary, 25%);
	}
}
.background-yellow {
	background-color: $yellow;
	&.faded {
		background-color: lighten($yellow, 25%);
	}
	.button {
		&:hover {
			background-color: $tertiary;
			color: #fff;
		}
	}
	a:not(.button) {
		color: $secondary;
		text-decoration: underline;
		&:hover {
			color: $tertiary;
		}
	}
}
.background-purple {
	background-color: $purple;
	color: #fff;
}
.background-light-yellow {
	background-color: $lightyellow;
	a {
		color: $tertiary;
		&:hover {
			color: $yellow;
		}
		&.button {
			color: #fff;
			&:hover {
				color: $secondary;
			}
		}
	}
}
.background-light-blue {
	background-color: $lightblue;
}
.background-light-gray {
	background-color: $lightgray;
}
.background-med-gray {
	background-color: $medgray;
}
.background-dark-gray {
	background-color: $darkgray;
}
.background-white {
	background-color: #fff;
}
.background-off-white {
	background-color: $offwhite;
	a {
		&:hover {
			color: $yellow;
			opacity: 0.8;
		}
		&.button {
			&:hover {
				color: $secondary;
				opacity: 1;
			}
		}
	}
}
.background-offblack {
	background-color: $offblack;
}

.text-primary {
	color: $primary;
}
.text-secondary {
	color: $secondary;
}
.text-tertiary {
	color: $tertiary;
}
.text-teal {
	color: $teal;
}
.text-purple {
	color: $purple;
}
.text-yellow {
	color: $yellow;
}
.text-light-gray {
	color: $lightgray;
}
.text-med-gray {
	color: $medgray;
}
.text-dark-gray {
	color: $darkgray;
}
.text-white {
	color: #fff;
}
.text-offblack {
	color: $offblack;
}

.bg-images {
	.background-secondary, .background-primary {
		position: relative;
		&:after {
			content: "";
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.background-secondary {
		&:after {
			background-color: rgba(darken($secondary, 10%), 0.9);
		}
	}
	.background-primary {
		&:after {
			background-color: rgba(darken($primary, 10%), 0.9);
		}
	}
}

#featured-image {
	background-size: cover;
	background-position: center center;
	width: 100%;
	height: 0;
	padding-bottom: 40%;
}

.lazy {
	opacity: 0;
}

main, footer {
	@include flashy(.5s);
	float: right;
}

.smaller-font {
	font-size: .8em;
}

.divider {
	width: 100%;
	height: 0;
	padding-bottom: 40px;
	display: block;
	margin: 1em 0;
	background-image: url(../assets/images/divider@2x.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.gform_legacy_markup_wrapper {
    h3.gform_title {
       margin-top: 0;
       font-size: 42px !important;
       color: $primary; 
    }
    span.gform_description {
        font-size: 20px !important;
    }
}
.gform_wrapper {
    &#gform_wrapper_6 {
        text-align: left !important;
    }
	form {
		//padding: 1em 2%;
		padding: 20px 3%;
		border: 2px solid $primary;
		color: $primary;
		@include border-radius(8px,8px,8px,8px);
		.gform_heading {
			h3 {
				margin-top: 0;
				font-size: 42px;
				color: $primary;
			}
		}
		.gform_description {
			font-size: 20px;
		}
		ul.gform_fields li.gfield {
			padding-right: 0;
			.gform_description {
				font-weight: $bold;
				font-size: 15px;
			}
		}
		.gform_body {
			input {
				outline: none !important;
			}
			input[type="text"] {
				border: none;
				border-bottom: 2px solid $primary;
				background-color: transparent;
			}
			textarea {
				background-color: transparent;
				border: 2px solid $primary;
				@include border-radius(4px,4px,4px,4px);
				outline: none !important;
				&:focus, &:active {
					background-color: #EBF6FC;
				}
			}
			label {
				text-transform: uppercase;
			}
			::placeholder {
				color: $primary !important;
				font-size: 15px !important;
    			font-weight: $bold;
				text-transform: uppercase;
			}
			.gfield {
				ul.gfield_radio {
					li {
						display: inline-block;
						margin-right: 2%;
					}
				}
			}
			.gfield_description {
				padding: 0;
				text-transform: uppercase;
			}
		}
		.gform_footer {
			input[type="submit"] {
				background-color: $primary;
				border: none;
				@include border-radius(4px,4px,4px,4px);
				font-family: $mainfont;
				color: #fff;
				font-weight: $bold;
				text-transform: none;
				padding: 7px 15px;
				line-height: 1.5em;
				&:hover {
					background-color: $secondary;
				}
			}
		}
	}
 input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
	 padding: 0 !important;
	}
	&#gform_wrapper_5 {
		form {
			.gform_body {
				.gfield {
					ul.gfield_radio {
						li {
							display: block;
						}
					}
				}
				.gfield_description {
					font-size: 13px;
				}
			}
			
		}
	}
}
.gform_confirmation_wrapper {
	text-align: left;
	font-size: 20px;
	padding: 1.5em 0 0;
}


/* Header Styles */

header {
	position: relative;
	padding: 0;
	border-bottom: 0;
	.screen-reader-text {
		border: 0;
		clip: unset;
		clip-path: none;
		height: 100%;
		margin: 0;
		overflow: visible;
		position: relative;
		width: 100%;
	}
    #banner-alert-bar {
        padding: 8px 0;
        font-size: 18px;
        min-height: 25px;
        a {
            text-decoration: underline;
            @include flashy(.2s);
            &:hover {
                opacity: 0.8;
            }
        }
        p, ol, ul {
            margin: 0;
        }
    }
	.header-container {
		width: 100%;
		margin: 0 auto;
		background-color: $secondary;
		padding: 20px 0px;
		.container {
			display: table;
			width: 75%;
		}
	}	
	#logo { 
		display: table-cell;
		z-index: 200;
		display: inline-block;
		margin-right: 8%;
		a {
			width: 100%;
			height: 100%;
			position: relative;
			display: block;
		}
		img {
			max-width: 100%;
			max-height: 50px;
			width: auto;
			height: auto;
			display: block;
		}
	}
	#primary-nav-container {
		width: 76%;
		display: table-cell;
		vertical-align: middle;
		margin-left: -4px;
		position: relative;
		z-index: 101;
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			text-align: right;
			li {
				display: inline-block;
				margin-left: 6%;
				color: #fff;
				font-weight: $bold;
				font-size: 18px;
				@include flashy(.25s);
				padding: 0;
				position: relative;
				&:first-child {
					margin-left: 0;
				}
				&.callout {
					background-color: $yellow;
					padding: 4px 8px;
					@include border-radius(4px,4px,4px,4px);
					position: absolute;
					bottom: -40px;
					right: 0;
					margin-left: 0;
					color: $offblack;
					text-transform: uppercase;
					font-size: 14px;
					&:last-of-type {
						margin-right: calc(50px + 35px);
					}
					&:hover, &.current_page_item {
						background-color: $lightyellow;
						color: $secondary;
					}
				}
				&:hover, &.current_page_item, &.current-page-parent {
					color: $yellow;
				}
				&:hover {
					.sub-menu {
						max-height: 100vh;
					}
				}
				a {
					padding: 0;
				}
				.sub-menu {
					text-align: right;
					max-height: 0;
					overflow: hidden;
					@include flashy(.25s);
					display: block;
					position: absolute;
					top: calc(100% + .5em);
					right: -1em;
					width: 250px;
					z-index: 999;
					margin: 0;
					@include border-radius(8px,0,8px,8px);
					-webkit-border-top-right-radius: 0;
					-moz-border-top-right-radius: 0;
					-ms-border-top-right-radius: 0;
					border-top-right-radius: 0;
					li {
						display: block;
						margin: 0;
						border: none;
						background-color: $yellow;
						color: $secondary;
						&:after {
							display: none;
						}
						&:hover, &.current_page_item {
							background-color: $lightyellow;
						}
						a {
							display: block;
							padding: 15px;
						}
					}
				}
				.icon {
					display: none;
				}
				&:last-child {
					.sub-menu {
						left: auto;
						right: 0;
					}
				}
			}
		}
		&.no-show {
			font-size: 0;
		}
	}
	#hamburger { 
		cursor: pointer;
		width: 40px;
		position: absolute;
		z-index: 201;
		right: 0;
		@include vertical-center();
		.top-bun, .patty, .bottom-bun {
			opacity: 0;
			height: 3px;
			width: 100%;
			margin-bottom: 4px;
			background-color: $lightblue;
			@include flashy(.25s);
		}
		.bottom-bun {
			margin-bottom: 0;
		}
		&.clicked {
			top: 40px;
			right: 8%;
			position: fixed;
			display: block;
			.patty {
				display: none;
			}
			.top-bun {
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
				position: absolute;
				top: 0;
				background-color: #fff;
			}
			.bottom-bun {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
				background-color: #fff;
			}
			.top-bun, .patty, .bottom-bun {
				opacity: 1;
			}
		}
	}
	
	#hamburger-toggle-menu {
		padding-top: 0;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: -100%;
		z-index: 199;
		background-color: $tertiary;
		@include flashy(.25s);
		display: table;
		.container {
			display: table-cell;
			vertical-align: middle;
		}
		&.clicked {
			@include flashy(.25s);	
			left: 0;
		}
		ul#primary-menu {
			list-style: none;
			margin: 0 0 30px 0;
			padding: 0 0 30px 0;
			width: 84%;
			margin: 2em auto 0;
//			-webkit-column-count: 2;
//			-moz-column-count: 2;
//			-webkit-column-gap: 4%;
//			-moz-column-gap: 4%;
//			column-count: 2;
//			column-gap: 4%;
			li {
				position: relative;
				margin: 0;
				padding: 8px 0;
				font-size: 20px;
				color: #fff;
				width: 45%;
				margin-right: 4%;
				float: left;
				font-weight: $bold;
				&:first-child {
					padding-top: 0;
				}
				&:last-child {
					padding-bottom: 0;
				}
				.sub-menu {
					list-style: none;
					//max-height: 0;
					//overflow: hidden;
					margin: 0;
					padding: 0 0 0 20px;
					@include flashy(.25s);
					-webkit-column-count: 1;
					-moz-column-count: 1;
					-webkit-column-gap: 0;
					-moz-column-gap: 0;
					column-count: 1;
					column-gap: 0;
					li {
						padding: 6px 0 0;
						width: 100%;
						float: none;
						font-weight: $normal;
						a {
							color: inherit;
						}
						&:hover {
							color: $secondary;
						}
					}
				}
				&.clicked {
					.sub-menu {
						//max-height: 50vh;
						//padding-top: 12px;
					}
					&.menu-item-has-children {
						&:after {
							//content: "\f123";
						}
					}
				}
				&.menu-item-has-children {
					&:after {
						cursor: pointer;
						//content: "\f125";
						font-family: "Ionicons";
						position: absolute;
						top: calc(.25em + 8px);
						right: 0;
						font-size: 16px;
						color: $yellow;
					}
				}
				&:hover, &.current-page-item {
					a {
						color: $secondary;
					}
				}
			}
		}
	}
}

body.nav-is-open {
	#logo {
		position: fixed;
		top: 20px;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	#hamburger {
		position: fixed;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	main, footer {
		max-width: calc(100% - (15% + 80px));
		left: calc(15% + 80px);
	}
	&.admin-bar {
		#logo {
			top: 52px;
		}
	}
}


/* Main Content Styles */

main {
	width: 100%;
	max-width: 100%;
	@include flashy(.25s);
	.page-content {
		padding: 30px 0 60px;
	}
	a {
		color: $yellow;
		@include flashy(.2s);
		&:hover {
			color: $secondary;
		}
	}
}


/* Post Index Styles */

.blog {
	.page-content {
		article {
			&.post {
				padding-top: 30px;
				margin-top: 60px;
			}
			&:first-child {
				margin-top: 0;
				border-top: none;		
			}
		}
	}
} 

.post-edit-link {
	display: none;
}



/* Single Post Styles */

.post-content {
	padding: 30px 0 60px;
}
.post-navigation {
	.nav-subtitle {
		display: none;
	}
}



/* Flexible Content Blocks */

.hero-slider {
	position: relative;
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		.slide {
			position: relative;
			width: 100%;
			height: 0;
			margin: 0;
			padding: 0;
			padding-bottom: 45%;
			.slide-image, .slide-video {
				width: 100%;
				height: 0%;
				padding-bottom: 45%;
				display: block;
				position: absolute;
				overflow: hidden;
				top: 0;
				left: 0;
				background-position: center center;
				background-size: cover;
				background-repeat: no-repeat;
				iframe {
					position: absolute;
					top: -12.5%;
					left: 0;
					width: 100%;
					height: 125%;
				}
				&::before {
					content: "";
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background-color: rgba($offwhite,0.6);
					z-index: 2;
					display: none;
				}
			}
			.slide-content {
//				width: 78%;
				width: 45%;
				left: 12%;
				padding: 45px;
				background-color: rgba($offwhite,0.7);
				position: absolute;
				@include vertical-center();
				z-index: 3;
				&.no-content {
					width: auto;
				}
				h2 {
//					font-size: 64px;
					font-size: 45px;
					color: darken($teal, 15%);
//					line-height: 1.25em;
					line-height: 1em;
					margin: 0;
//					text-shadow:
//				 		-1px -1px 0 $secondary,  
//						1px -1px 0 $secondary,
//						-1px 1px 0 $secondary,
//					 	1px 1px 0 $secondary;
				}
				p {
					margin-top: .5em;
					margin-bottom: 0;
					font-size: 22px;
					color: $secondary;
				}
			}
		}
	}
	div[class$='slider-prev'], div[class$='slider-next'] {
		display: none;
		position: absolute;
		width: 50px;
		height: 50px;
		text-align: center;
		z-index: 100;
		@include vertical-center();
		opacity: 0.6;
		@include flashy(.25s);
		&:after {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			font-family: "Ionicons";
			font-size: 50px;
			color: #fff;
		}
		&:hover {
			opacity: 1.0;
		}
	}
	div[class$='slider-prev'] {
		left: 5px;
		&:after {
			content: "\f124";
		}
	}
	div[class$='slider-next'] {
		right: 5px;
		&:after {
			content: "\f125";
		}
	}
}

.video-block {
    padding: 4em 0;
    background-color: #FFF;
    .block-content h2.block-heading {
        font-size: 55px;
        margin: 0 0 30px;
        line-height: 1.25em;
        color: $secondary;
        font-family: $headingfont;
        font-weight: 900;
    }
    .iframe-container {
        position: relative;
        padding-bottom: 56.25%;
        width: 100%;
        height: 0;
        iframe {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
    .buttons-container {
        padding-top: 30px;
    }
    .button {
        -webkit-border-radius: 4px 4px 4px 4px;
        -moz-border-radius: 4px 4px 4px 4px;
        -ms-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        padding: 6px 18px;
        margin-right: 30px;
        &:last-of-type {
            margin-right: 0;
        }
        &:hover {
            background-color: $tertiary;
            color: #fff;
        }
    }
    .block-heading + .iframe-container {
        padding-top: 2em;
    }
}


.full-width-text {
	padding: 4em 0;
	.container {
		text-align: center;
	}
	h2.block-heading {
		font-size: 42px;
		margin: 0;
		& + .block-content {
			p:first-child {
				margin-top: 1em;
			}
		}
	}
	p, ul, ol {
		font-size: 22px;
		margin-top: 0;
	}
	p:last-of-type {
		margin-bottom: 0;
	}
	.buttons-container {
		margin: 1em auto;
	}
	.gform_wrapper {
		ul li {
			font-size: 20px;
			label {
				font-size: 15px !important;
				font-weight: $bold;
			}
			&.field_description_below {
				div.ginput_container_radio {
					margin-top: 0;
				}
			}
		}
	}
    &.background-white {
        .darker-link-text {
            color: $primary;
            &:hover {
                color: $tertiary;
            }
        }
    }
}
.full-width-text.background-white + .full-width-text.background-white, .full-width-text.background-secondary + .full-width-text.background-secondary {
	padding-top: 0;
}

.image-and-content {
	padding: 4em 0;
	&.image-left {
		.block-image {
			float: left;
		}
		.block-content {
			right: 0;
			padding-left: 4%;
			padding-right: 8%;
		}
	}
	&.image-right {
		.block-image {
			float: right;
		}
		.block-content {
			left: 0;
			padding-right: 4%;
			padding-left: 8%;
		}
	}
	.block-image {
		width: 50%;
		height: 0;
		padding-bottom: 40%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.block-content {
		position: absolute;
		width: 38%;
		@include vertical-center();
		p {
			font-size: 20px;
		}
	}
}

.columnized-callouts {
	padding: 4em 0;
	h2.block-heading {
		font-size: 42px;
		margin: 0 0 .5em;
	}
	.column {
		float: left;
		&.columns-4 {
			width: 22%;
			margin: 0 2%;
			&:first-of-type {
				margin-left: 0;
			}
			&:nth-of-type(4) {
				margin-right: 0;
			}
		}
		&.columns-3 {
			width: 30.66%;
			margin: 0 2%;
			&:first-of-type {
				margin-left: 0;
			}
			&:nth-of-type(3) {
				margin-right: 0;
			}
		}
		&.columns-2 {
			width: 48%;
			margin: 0 2%;
			&:nth-of-type(odd) {
				margin-left: 0;
			}
			&:nth-of-type(even) {
				margin-right: 0;
			}
		}
		h1 {
			font-size: 45px;
			margin: 0;
			& + h2 {
				margin-top: .5em;
			}
			& + p {
				margin-bottom: 1em;
			}
		}
		h2 {
			font-size: 24px;
			margin: 0;
			line-height: 1.25em;
			& + p {
				margin-top: 1em;
			}
		}
		p, ol, ul {
			font-size: 18px;
			margin-top: 0;
		}
		.column-image-container {
			margin-bottom: 10px;
			.column-image {
				padding-bottom: 0;
				min-height: 300px;
				background-size: cover !important;
				width: 240px;
				background-repeat: no-repeat;
			}
		}
	}
	&.columns-count-2 {
		padding-bottom: 2em;
		.block-columns {
			display: grid;
			grid-template-columns: 50% 50%;
		}
		.columns-2 {
			width: 100%;
			margin: 0 0 2em;
			.column-content-container {
				width: 95%;
			}
			&:nth-of-type(odd) {
				.column-content-container {
					width: 92%;
				}
			}
		}
	}
	&.columns-count-3 {
		padding-bottom: 2em;
		.block-columns {
			display: grid;
			grid-template-columns: 33.33% 33.33% 33.33%;
		}
		.columns-3 {
			width: 100%;
			margin: 0 0 2em;
			.column-content-container {
				width: 92%;
			}
			&:last-of-type {
				.column-content-container {
					width: 95%;
				}
			}
		}
	}
}

.accordions-block {
	padding: 2em 0;
	.container {
		width: 85%;
	}
	h2.block-heading {
		font-size: 42px;
		margin: 0;
	}
	#accordions {
		margin-top: 2em;
		.accordion {
			position: relative;
			border-bottom: 1px solid $lightgray;
			&:last-child {
				border-bottom: none;
			}
			.accordion-title {
				font-size: 22px;
				line-height: 1.75em;
				cursor: pointer;
				padding-left: 40px;
				font-weight: $bold;
				p {
					margin-top: 1em;
				}
				&::before {
					content: "+";
					position: absolute;
					top: 0;
					left: 0;
					width: 30px;
					height: 30px;
					font-size: 50px;
				}
				a {
					color: $yellow;
					&:hover {
						color: $secondary;
					}
				}
			}
			.accordion-content {
				position: relative;
				max-height: 0;
				overflow: hidden;
				padding-left: 40px;
				font-size: 22px;
				line-height: 1.75em;
				@include flashy(.25s);
				p, ul {
					&:first-of-type {
						margin-top: 0;
					}
				}
				ul {
					padding-left: 22px;
					li {
						ul, ul:first-of-type {
							margin-top: .5em;
						}
					}
				}
				a {
					color: $yellow;
					&:hover {
						color: $secondary;
					}
				}
			}
			&.clicked {
				.accordion-title {
					&:before {
						content: "-";
						top: -3px;
					}
				}
				.accordion-content {
					max-height: 200vh;
				}
			}
		}
	}
}


/* Recent Posts Block */
.posts-callout {
	padding: 0 0 60px;
	h2 {
		font-size: 36px;
		padding: 0 1%;
		font-weight: normal;
		color: $yellow;
	}
	#recent-posts-left, #recent-posts-right {
		width: 49%;
		float: left;
		.post {
			width: 100%;
			margin-bottom: 35px;
			.category {
				//position: absolute;
				position: relative;
				//left: -85px;
				//width: 180px;
				width: calc(100% - 40px);
				height: 30px;
				line-height: 32px;
				overflow: hidden;
				//top: 85px;
				//text-align: center;
//				-webkit-transform: rotate(-90deg);
//				-moz-transform: rotate(-90deg);
//				transform: rotate(-90deg);
				font-size: 20px;
				padding: 10px 20px;
				color: transparent;
				a {
					color: #fff;
				}
			}
			.container {
				width: 76%;
				padding-left: 4%;
				padding-right: 4%;
			}
			.post-featured-image {
				width: 100%;
				padding-bottom: 56.25%;
				height: 0;
				background-size: cover !important;
				display: block;
			}
			.post-content {
				padding: 30px 0;
			}
			h2 {
				font-size: 20px;
				a {
					color: #fff;
					&:hover {
						opacity: 0.7;
					}
				}
			}
			&.has-image {
				background-color: #fff;
				border: 1px solid $medgray;
				h2 {
					display: inline-block;
					a {
						color: $yellow;
					}
				}
				span {
					font-weight: $normal;
				}
				.post-date {
					font-weight: $bold;
					font-size: 18px;
				}
				.post-excerpt {
					font-size: 18px;
					line-height: 1.5em;
				}
				.category {
//						background-color: $magenta;
					z-index: 100;
				}
			}
			&.no-image {
				color: #fff;
				.post-date {
					color: #000;
					font-size: 22px;
					font-weight: $bold;
					padding-bottom: 20px;
				}
				.post-excerpt {
					font-size: 18px;
					font-weight: 200;
					color: #fff;
				}
			}
			.link-more {
				display: none;
			}
			.button {
				background-color: #fff;
				&:hover {
					background-color: $yellow;
				}
			}
		}
	}
	#recent-posts-left {
		margin-right: 2%;
		.category {
			background-color: $secondary;
		}
		.post {
			&.no-image {
				background-color: $yellow;
			}
		}
	}
	#recent-posts-right {
		.category {
			background-color: $yellow;
		}
		.post {
			&.no-image {
				background-color: $secondary;
			}
		}
	}
	.read-more {
		text-align: center;
	}
}

.text-secondary {
	.gform_body {
		ul {
			li {
				.ginput_container {
					input {
						border-color: $secondary;
						color: $secondary;
					}
				}
			}
		}
	}
}

.text-primary {
	.gform_body {
		ul {
			li {
				.ginput_container {
					input {
						border-color: $primary;
						color: $primary;
					}
				}
			}
		}
	}
}

.text-yellow {
	.gform_body {
		ul {
			li {
				.ginput_container {
					input {
						border-color: $yellow;
						color: $yellow;
					}
				}
			}
		}
	}
}

.text-white {
	.gform_body {
		ul {
			li {
				.ginput_container {
					input {
						border-color: #fff;
						color: #fff;
					}
				}
			}
		}
	}
}

.text-align-left {
	text-align: left;
	h1, h2, h3, h4, h5, h6, p, ol, ul {
		text-align: left;
	}
}
.text-align-center {
	text-align: center;
	h1, h2, h3, h4, h5, h6, p, ol, ul {
		text-align: center;
	}
}
.text-align-right {
	text-align: right;
	h1, h2, h3, h4, h5, h6, p, ol, ul {
		text-align: right;
	}
}


/* Front Page Styles */
.homepage-hero {
	position: relative;
	padding: 0;
	h1 {
		font-size: 72px;
		margin: 0;
		line-height: 1em;
	}
	.slider {
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
		.slide {
			width: 100%;
			height: 0;
			padding: 0 0 45%;
			margin: 0;
			.slide-caption {
				position: absolute;
				@include vertical-center();
				left: 33%;
				width: 60%;
				z-index: 4;
//				background-color: rgba(255, 250, 236, 0.7);
//				padding: 30px 0;
				.container {
					width: 84%;
				}
				h1 {
					color: #fff;
				}
				p {
					margin-top: .75em;
					font-size: 24px;
					//color: $teal;
					color: #fff;
					a {
						color: $tertiary;
						&:hover {
							color: $secondary;
						}
					}
				}
			}
			.slide-image {
				position: absolute;
				width: 100%;
				height: 0;
				padding-bottom: 45%;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.slide-video {
				width: 100%;
				height: 0%;
				padding-bottom: 45%;
				display: block;
				position: absolute;
				overflow: hidden;
				top: 0;
				left: 0;
				background-position: center center;
				background-size: cover;
				background-repeat: no-repeat;
				&:before {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					content: "";
					z-index: 3;
					background-color: rgba($secondary,0.3);
				}
				.placeholder-image {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
					background-size: cover !important;
					background-repeat: no-repeat;
					z-index: 1;
				}
				iframe {
					position: absolute;
					top: -12.5%;
					left: 0;
					width: 100%;
					height: 125%;
					z-index: 2;
				}
			}
		}
	}
	.slider-pager {
		position: absolute;
		bottom: 0em;
		right: 0;
		z-index: 100;
		span {
			cursor: pointer;
			display: inline-block;
			width: 12px;
			height: 12px;
			margin-left: 8px;
			line-height: 1em;
			font-size: 0;
			border: 1px solid $lightgray;
			@include border-radius(50%,50%,50%,50%);
			&.cycle-pager-active {
				background-color: $lightgray;
			}
		}
	}
}

.three-column-callout {
	padding: 4em 0 6em;
	.block-icon {
		position: relative;
		float: right;
		width: 15%;
		img {
			max-width: 100%
		}
	}
	&.no-intro-content {
		.block-icon {
			position: absolute;
			right: 0;
		}
	}
	.block-heading {
		width: 80%;
		float: left;
		font-size: 72px;
		margin: 0;
		line-height: 1.25em;
		color: $secondary;
	}
	.block-content {
		width: 80%;
		float: left;
		p {
			font-size: 24px;
		}
	}
	.callouts {
		width: 100%;
		display: block;
		position: relative;
		h3 {
			width: 80%;
			display: block;
			clear: both;
			font-size: 22px;
			margin-bottom: 34px;
		}
		&.three {
			.callout {
				width: calc(37% - 2px);
				margin: 0 3.5% 0 0;
				float: left;
				@include border-radius(8px,8px,8px,8px);
				border: 1px solid $secondary;
				overflow: hidden;
				&:nth-of-type(3) {
					margin-right: 0;
				}
				.callout-heading {
					padding: 10px 4%;
					font-size: 36px;
				}
				.callout-content {
					background-color: $lightblue;
					padding: 1em 12% 0.5em;
					p {
						margin-top: 0;
						font-size: 20px;
						a {
							color: $secondary;
							&:hover {
								color: $tertiary;
							}
						}
						&:last-of-type {
							margin-bottom: 0;
						}
					}
				}
			}
		}
		&.two {
			.callout {
				width: calc(45% - 2px);
				&:nth-of-type(2) {
					margin-right: 0;
				}
				.callout-heading {
					padding: 10px 4%;
					font-size: 36px;
				}
				.callout-content {
					background-color: $lightblue;
					padding: 1em 12% 0.5em;
					p {
						margin-top: 0;
						font-size: 20px;
						a {
							color: $secondary;
							&:hover {
								color: $tertiary;
							}
						}
						&:last-of-type {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
}

.stacked-content-boxes {
	padding: 2em 0;
	.content-boxes {
		.row {
			clear: both;
			margin-bottom: 2em;
		}
		.columns {
			.content-box {
				border: 2px solid $secondary;
				@include border-radius(8px,8px,8px,8px);
				padding: 1em 15px;
				.content-box-heading {
					margin: 0 0 .5em;
					font-size: 30px;
				}
				.content-box-content {
					p {
						margin-top: 0;
						font-size: 18px;
					}
				}
				.button {
					text-transform: none;
					border: none;
					background-color: $secondary;
					color: #fff;
					font-weight: $bold;
					@include border-radius(4px,4px,4px,4px);
					padding: 6px 18px;
					&:hover {
						background-color: $tertiary;
					}
				}
				&.background-secondary.faded {
					.button {
						background-color: $offblack;
						color: #fff;
						&:hover {
							background-color: $tertiary;
						}
					}
				}
			}
			&.two {
				.content-box {
					width: calc(49% - 4px - 30px);
					float: left;
					&:first-of-type {
						margin-right: 2%;
					}
				}
			}
			&.one {
				.content-box {
					p {
						font-size: 28px;
					}
					.goal-completion {
						position: absolute;
						left: 115px;
						bottom: .75em;
						.bar-holder {
							position: relative;
							width: 150px;
							height: 36px;
							border: 2px solid $offblack;
							float: left;
							@include border-radius(4px,4px,4px,4px);
							margin-right: 15px;
							.bar-fill {
								position: absolute;
								top: 2px;
								left: 2px;
								height: 32px;
								background-color: $tertiary;
							}
						}
						.counter {
							width: 50px;
							display: inline-block;
							text-align: right;
						}
						p {
							float: right;
							font-size: 36px;
							margin: -.25em 0 0;
							strong {
								color: $tertiary;
							}
						}
					}
				}
			}
		}
	}
}

.solar-callout {
//	background-image: url(../assets/images/maintenance_illo.png);
//	background-size: 920px;
//	background-position: center center;
//	background-repeat: no-repeat;
//	position: relative;
//	height: 0;
//	min-height: 920px;
	background-color: #FD8259;
	.solar-callout-icon {
		width: 30%;
		position: absolute;
		top: 4em;
		left: 0;
		img {
			max-width: 100%;
		}
	}
	.solar-callout-image {
		position: relative;
		top: -60px;
		img {
			width: 100%;
			height: auto;
			max-width: 100%;
		}
	}
	.solar-callout-content-holder {
		//width: 85%;
		//margin: 0 auto;
		//padding-top: 29.53%;
		//padding-top: 315px;
		.block-heading {
			margin: 0;
			padding-top: 1em;
			font-size: 55px;
			color: $secondary;
			line-height: 1.25em;
		}
		.solar-callout-content {
			padding: 30px 0;
			position: relative;
			z-index: 2;
			p {
				margin-top: 0;
				margin-bottom: .5em;
				font-size: 24px;
				color: $secondary;
			}
		}
		.solar-callout-buttons-container {
			display: inline;
			position: relative;
			z-index: 2;
			.button {
				border: none;
				color: #fff;
				font-weight: $bold;
				margin: 0 1%;
				text-transform: none;
				line-height: 1em;
				@include border-radius(4px,4px,4px,4px);
				&.background-offblack, &.background-tertiary, &.background-primary, &.background-yellow {
					&:hover {
						background-color: $secondary;
					}
				}
				&:hover {
					background-color: #fff;
					color: $secondary;
				}
				&:first-of-type {
					margin-left: 0;
				}
			}
		}
	}
}

.now-hiring {
	border: 2px solid $secondary;
	@include border-radius(8px,8px,8px,8px);
	padding: 20px 3%;
	h2.block-heading {
		text-align: left;
		font-size: 42px;
		color: $secondary;
		margin: 0;
	}
	h3 {
		font-size: 24px;
		text-align: left;
	}
	.now-hiring-content {
		text-align: left;
	}
	.now-hiring-button-container {
		text-align: left;
		margin-top: 24px;
		margin-bottom: 15px;
		.button {
			background-color: $primary;
			border: none;
			color: #fff;
			font-weight: $bold;
			margin: 0 2% 0 0;
			text-transform: none;
			@include border-radius(4px,4px,4px,4px);
			&:hover {
				background-color: $secondary;
			}
		}
	}
}
.below-form-block, .now-hiring {
	background-color: #BFD7D1;
	color: $primary;
	margin-top: 2em !important;
	@include border-radius(8px,8px,8px,8px);
	h3 {
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.button {
		border: none;
		@include border-radius(4px,4px,4px,4px);
		font-size: 16px;
		line-height: 1.5em;
		padding: 7px 15px;
		margin-top: 0;
		background-color: $primary;
		&:hover {
			background-color: $secondary;
			color: #fff !important;
		}
	}
}

.map-block {
	background-color: #f0f2ec;
	padding: 4em 0 0;
	color: $primary;
	@include flashy(.25s);
	overflow: hidden;
	.map-meta-above {
		.map-description {
			width: 65%;
			float: left;
			line-height: 1.5em;
			font-weight: $bold;
			font-size: 18px;
			p {
				&:first-of-type {
					margin-top: 0;
				}
			}
		}
		.map-goal {
			float: right;
			width: 25%;
			color: #000;
			font-weight: $bold;
			.map-goal-meta {
				font-weight: $normal;
			}
		}
		.goal-completion {
			.bar-holder {
				position: relative;
				width: 100%;
				height: 24px;
				border: none;
				background-color: #BFD7D1;
				float: left;
				@include border-radius(4px,4px,4px,4px);
				margin: 10px 0;
				.bar-fill {
					position: absolute;
					top: 0px;
					left: 0px;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
					height: 24px;
					background-color: $primary;
				}
			}
		}
	}
	.mapsvg-gauge {
		bottom: auto;
		top: 34px;
		max-width: 25%;
		width: 25%;
		right: 0;
		-webkit-box-shadow: unset;
    	-moz-box-shadow: unset;
    	box-shadow: unset;
		background-color: transparent;
		td:not(.mapsvg-gauge-gradient) {
			position: absolute;
			top: -20px;
			padding-left: 0;
			padding-right: 0;
			text-transform: uppercase;
			font-weight: $bold;
			color: #000;
			&:first-of-type {
				left: 0;
			}
			&:last-of-type {
				left: auto;
				right: 0;
			}
		}
		.mapsvg-gauge-gradient {
			position: absolute;
			width: 99%;
			max-width: 99%;
			padding: 0;
			@include border-radius(4px,4px,4px,4px);
			height: 24px;
		}
	}
	.map {
		max-height: 560px;
//		overflow: hidden;
		.mapsvg-details-container {
			border: 2px solid $primary;
			@include border-radius(4px,4px,4px,4px);
		}
		.mapsvg-controller-view-toolbar {
			position: absolute;
			top: 0;
			right: 0;
		}
		.mapsvg-controller-view-content {
			padding: 0;
			h5 {
				font-size: 24px;
				margin: 0;
				padding: 0 15px;
				font-family: $headingfont;
			}
			h6 {
				margin: 0 0 5px;
				font-size: 16px;
				font-family: $headingfont;
			}
			.totals {
				padding: 5px 15px;
				
			}
			.chapter-info {
				padding: 8px 15px 0;
			}
			.accordion {
				.accordion-title h6 {
					display: inline-block;
					&:after {
						content: "\25bc";
						display: inline-block;
						font-size: 14px;
						margin-top: -4px;
						margin-left: 8px;
						@include flashy(.25s);
						color: $tertiary;
					}
					&:hover {
						cursor: pointer;
						&:after {
							color: $primary;
						}
					}
				}
				&.clicked {
					.accordion-title h6 {
						&:after {
							content: "\25b2";
						}
					}
					.accordion-content {
						height: 100%;
						opacity: 1;
						padding-top: 5px;
						@include flashy(.0s);
						display: block;
					}
				}
				.accordion-content {
            		padding: 0;
            		height: 0;
            		opacity: 0;
					display: none;
					ol, ul {
						margin-bottom: 0;
						li {
							margin-bottom: 0;
						}
					}
				}
			}
			.percentages {
				padding: 10px 15px;
				color: #fff;
				background-color: $primary;
				margin-top: 24px;
				font-weight: $bold;
			}
			ul li {
				list-style: none;
				margin-left: 0;
				margin-bottom: 0;
			}
			.photo-gallery-section {
				padding: 15px 15px 0;
				ul {
					li {
						.background-image {
							padding-bottom: 56.25%;
							background-size: cover !important;
							background-repeat: center center;
						}
					}
				}
			}
		}
		.mapsvg-region-label {
			font-weight: $bold;
			color: $offblack;
			font-size: 14pt !important;
			font-family: $mainfont;
            background-color: transparent !important;
		}
		.mapsvg-gallery.mapsvg-gallery-slider figure img {
			width: 100%;
			height: auto;
			max-height: 300px;
		}
		.slick-dots {
			position: relative;
			bottom: -10px;
			li button {
				&:before {
					font-size: 10px;
				}
			}
		}
	}
	#region-Western_Navajo_Agency {
		position: relative;
		top: -80px;
	}
	#region-Eastern_Navajo_Agency {
		position: relative;
		top: -50px;
		left: 20px;
	}
	#region-Hopi_Nation {
		position: relative;
		top: 12px;
		left: 10px;
	}
}
.map-bar-container {
	width: calc(20% - 4px);
	margin-left: -2px;
	display: inline-block;
	background-color: transparent;
	&:hover {
		cursor: pointer;
	}
	&.active {
		.stat-content {
			padding-top: 0;
			height: 100%;
			opacity: 1;
			z-index: 2;
			visibility: visible;
			position: relative;
		}
	}
	.stat-number {
		font-size: 40px;
		padding-left: 10px;
		font-weight: $bold;
	}
	.stat-title {
		font-size: 18px;
	}
	.stat-content {
		padding-top: 0;
		height: 0;
		visibility: hidden;
		opacity: 0;
		z-index: -99;
		position: absolute;
		@include flashy(.25s);
	}
	.map-bar {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		padding: 10px;
		position: relative;
		@include flashy(.2s);
	}
	.background-yellow {
		color: #fff;
	}
}
.mapsvg-mobile-modal-close {
	background-color: $secondary !important;
	border-color: $secondary !important;
	&:hover {
		border-color: $yellow !important;
		background-color: $yellow !important;
		color: $secondary !important;
	}
}
.mapsvg-mobile-buttons {
	display: none !important;
}
.mapsvg-container-fullscreen {
	h5 {
		font-size: 24px;
		margin: 24px 0 0 0;
		padding: 0 15px;
		font-family: $headingfont;
	}
	h6 {
		margin: 0 0 5px;
		font-size: 16px;
		font-family: $headingfont;
	}
	.totals {
		padding: 5px 15px;

	}
	.chapter-info {
		padding: 8px 15px 0;
	}
	.accordion {
		.accordion-title h6 {
			display: inline-block;
			&:after {
				content: "\25bc";
				display: inline-block;
				font-size: 14px;
				margin-top: -4px;
				margin-left: 8px;
				@include flashy(.25s);
				color: $tertiary;
			}
			&:hover {
				cursor: pointer;
				&:after {
					color: $primary;
				}
			}
		}
		&.clicked {
			.accordion-title h6 {
				&:after {
					content: "\25b2";
				}
			}
			.accordion-content {
				height: 100%;
				opacity: 1;
				padding-top: 5px;
				@include flashy(.0s);
				display: block;
			}
		}
		.accordion-content {
//			padding: 0;
//			height: 0;
//			opacity: 0;
//			display: none;
//			ol, ul {
//				margin-bottom: 0;
//				li {
//					margin-bottom: 0;
//				}
//			}
            height: 100%;
            opacity: 1;
            padding-top: 5px;
            @include flashy(.0s);
            display: block;
		}
	}
	.percentages {
		padding: 10px 15px;
		margin-top: 24px;
		font-weight: $bold;
		font-family: $headingfont;
		font-size: 18px;
	}
	ul li {
		list-style: none;
		margin-left: 0;
		margin-bottom: 0;
	}
	.photo-gallery-section {
		padding: 15px 15px 0;
		ul {
			li {
				.background-image {
					padding-bottom: 56.25%;
					background-size: cover !important;
					background-repeat: center center;
				}
			}
		}
	}
	.mapsvg-gallery.mapsvg-gallery-slider figure img {
		width: 100%;
		height: auto !important;
		max-height: none;
	}
}


/* Footer Styles */
footer {
	width: 100%;
	max-width: 100%;
	padding: 30px 0 60px;
	@include flashy(.25s);
	.screen-reader-text {
		border: 0;
		clip: unset;
		clip-path: none;
		height: 100%;
		margin: 0;
		overflow: visible;
		position: relative;
		width: 100%;
	}
	.footer-logo {
		height: 50px;
		display: block;
		background-image: url(../assets/images/logo-black.png);
		background-size: contain;
		background-position: center left;
		background-repeat: no-repeat;
		a {
			position: absolute;
			width: 100%;
			height: 100%;
			display: block;
			top: 0;
			left: 0;
		}
	}
	.container {
		width: 75%;
	}
	a {
		color: $primary;
		@include flashy(.2s);
		&:hover {
			color: $secondary;
		}
	}
	.site-info {
		font-size: 20px;
		color: $offblack;
		.branding-info {
			font-weight: $bold;
			margin-bottom: 3em;
		}
		.location {
			margin-top: 1em;
			padding-left: 5.3%;
		}
	}
	.footer-navigation {
		float: left;
		padding-left: 5.3%;
	}
	.social-navigation {
		float: left;
		margin-left: 20%;
	}
	.footer-navigation, .social-navigation {
		font-family: $mainfont;
		ul {
			margin: 0;
			list-style: none;
			li {
				font-size: 18px;
				margin: 0;
				padding: 0 0 .5em;
				a {
					color: $offblack;
					text-decoration: underline;
					&:hover {
						color: $secondary;
					}
				}
			}
		}
	}
	.donate-button-container {
		position: absolute;
		top: 0;
		right: 0;
		.button {
			border: none;
			background-color: $yellow;
			color: $offblack;
			font-weight: $bold;
			padding: 3px 8px;
			@include border-radius(4px,4px,4px,4px);
			&:hover {
				background-color: $secondary;
				color: #fff;
			}
		}
	}
    .footer-icons {
        max-width: 175px;
        margin-top: 118px;
        position: absolute;
        right: 0;
        .footer-icon {
            img {
                max-width: 100%;
                height: auto;
            }
        }
    }
}


/* Responsive Theming */

// iPad Pro - Landscape
@media screen and (max-width: 1367px) and (max-height: 1025px) and (min-height: 769px) {
	header {
		#hamburger {
			&.clicked {
				display: block;
				.top-bun, .patty, .bottom-bun {
					opacity: 1;
				}
			}
		}
		#hamburger-toggle-menu {
			display: table;
			.container {
				display: table-cell;
				vertical-align: middle;
			}
			ul#primary-menu li {
				font-size: 38px;
				padding: 15px 0;
				&:first-of-type {
					padding-top: 15px;
				}
			}
		}
	}
}

@media screen and (max-width: 1365px) {
	header {
		#hamburger-toggle-menu {
			ul#primary-menu li {
				font-size: 24px;
			}
		}
	}
	.gallery {
		.gallery-images {
			a {
				.image-caption {
					p {
						display: none;
					}
				}
			}
		}
	}
}

// iPad Pro Portrait
@media screen and (max-width: 1025px) and (max-height: 1367px) and (min-height: 769px) {
	header #hamburger-toggle-menu {
		display: table;
		.container {
			display: table-cell;
			vertical-align: middle;
		}
		ul#primary-menu li {
			font-size: 30px;
			padding: 15px 0;
			&:first-of-type {
				padding-top: 15px;
			}
		}
	}
}

// iPad - Landscape
@media screen and (max-width: 1025px) and (max-height: 769px) {
	header #hamburger-toggle-menu {
		display: table;
		.container {
			display: table-cell;
			vertical-align: middle;
		}
		ul#primary-menu li {
			font-size: 24px;
			&:first-of-type {
				padding-top: 15px;
			}
		}
	}
}

// iPad - Portrait
@media screen and (max-width: 769px) and (max-height: 1025px) {
	header #hamburger-toggle-menu {
		display: table;
		.container {
			display: table-cell;
			vertical-align: middle;
		}
		ul#primary-menu li {
			font-size: 30px;
			&:first-of-type {
				padding-top: 15px;
			}
		}
	}
}

@media screen and (max-width: 1200px) {
	header {
		#primary-nav-container {
			display: none;
		}
		#hamburger {
			display: block !important;
			.top-bun, .patty, .bottom-bun {
				opacity: 1;
			}
		}
	}
	.homepage-hero {
		.slider {
			.slide {
				.slide-caption {
					left: 20%;
					width: 75%;
				}
			}
		}
	}
	.hero-slider {
		ul .slide {
			.slide-content {
				h2 {
					font-size: 38px;
				}
				p {
					font-size: 20px;
				}
			}
		}
	}
	.image-and-content {
		&.image-left .block-content {
			padding-right: 0;
		}
		.block-content {
			width: 45%;
			padding-right: 0;
			position: relative;
			top: 0;
			float: right;
			-webkit-transform: translateY(0%);
			-moz-transform: translateY(0%);
			-ms-transform: translateY(0%);
			transform: translateY(0%);
			p {
				&:first-of-type {
					margin-top: 0;
				}
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
	}
	.map-block {
		.map {
			max-height: 380px;
		}
	}
}

@media screen and (max-width: 1023px) {
	header #hamburger-toggle-menu ul#primary-menu li {
		font-size: 24px;
	}
	#primary-nav-container {
		#primary-nav {
			font-size: 0;
		}
	}
	.block-content {
		h2 {
			font-size: 26px;
			margin-bottom: .5em;
		}
		p {
			line-height: 1.25em;
		}
	}
	.image-and-content {
		&.image-right {
			.block-content {
				padding-left: 0;
			}
		}
		&.image-left {
			.block-content {
				padding-right: 0;
			}
		}
	}
	.timeline {
		.timeline-entry {
			.content {
				width: 100%;
				p {
					font-size: 22px;
					line-height: 1.25em;
				}
			}
		}
	}
	.two-column-cta {
		.call-to-action {
			h2 {
				font-size: 26px;
				margin-bottom: .5em;
			}
			p {
				line-height: 1.25em;
			}
		}
	}
	.page-template-two-column-layout {
		h2 {
			font-size: 26px;
		}
	}
	header {
		.header-container {
			.container {
				width: 84%;
			}
		}
	}
	.container, footer .container {
		width: 84%;
	}
	.homepage-hero {
		.slider {
			.slide {
				height: 100%;
				padding: 0;
				position: relative;
				.slide-video {
					padding-bottom: 56.25%;
				}
				.slide-video, .slide-image {
					position: relative;
				}
				.slide-caption {
					left: 0;
					padding: 3em 0;
					width: 100%;
					top: 0;
					-webkit-transform: translateY(0);
					-moz-transform: translateY(0);
					-ms-transform: translateY(0);
					transform: translateY(0);
					position: relative;
					p:last-of-type {
						margin-bottom: 0;
					}
					h1 {
						&.text-tertiary {
							color: $tertiary;
						}
						&.text-teal {
							color: $secondary;
						}
					}
					p {
						color: $secondary;
						a {
							&:hover {
								color: $primary;
							}
						}
					}
				}
			}
		}
	}
	.hero-slider {
		ul .slide {
			&.image-slide {
				padding-bottom: 56.25%;
				.slide-image {
					padding-bottom: 56.25%;
				}
			}
			.slide-content {
				padding: 30px;
				width: 55%;
				left: 8%;
				p {
					font-size: 18px;
				}
			}
		}
	}
	.columnized-callouts {
		&.columns-count-4 {
			.block-columns {
				display: flex;
				flex-flow: row wrap;
			}
		}
		.column {
			h1 {
				font-size: 38px;
			}
			&.columns-3 {
				width: 100%;
				margin: 0 0 15px;
				&:last-of-type {
					margin-bottom: 0;
				}
			}
			&.columns-4 {
				width: 45%;
				flex: 1 1 45%;
				margin: 0 5% 15px 0;
				&:nth-of-type(2n) {
					margin-right: 0;
				}
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
		&.columns-count-3 {
			.block-columns {
				display: grid;
				grid-template-columns: 50% 50%;
			}
		}
	}
	.map-block {
		.map {
			display: block;
			max-height: 100% !important;
		}
	}
	.mapsvg-button-menu {
		display: none;
	}
	.map-bars {
		padding-top: 30px;
		//padding-bottom: 3em;
	}
	.map-bar-container {
		//width: calc(96% + 2px);
		//padding: 15px 2%;
		width: calc(100% + 2px);
		left: -10%;
		padding: 15px 10%;
		position: relative;
		&.background-primary {
			background-color: $primary;
		}
		&.background-secondary {
			background-color: $secondary;
		}
		&.background-tertiary {
			background-color: $tertiary;
		}
		&.background-purple {
			background-color: $purple;
		}
		&.background-yellow {
			background-color: $yellow;
		}
		&.background-light-yellow {
			background-color: $lightyellow;
		}
		&.background-light-blue {
			background-color: $lightblue;
		}
		&.background-light-gray {
			background-color: $lightgray;
		}
		&.background-med-gray {
			background-color: $medgray;
		}
		&.background-dark-gray {
			background-color: $darkgray;
		}
		&.background-offblack {
			background-color: $offblack;
		}
		.stat-number {
			color: #fff !important;
			padding-left: 0;
		}
		.map-bar {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			padding-top: 0;
			padding-left: 0;
		}
	}
	.homepage-hero {
		h1 {
			font-size: 55px;
		}
	}
	.three-column-callout {
		padding-bottom: 4em;
		.block-heading {
			font-size: 55px;
		}
		&.no-intro-content {
			.block-icon {
				position: relative;
			}
		}
		.callouts {
			&.three, &.two {
				.callout {
					margin: 0 3.5% 30px 0;
					width: calc(100% - 2px);
					.callout-heading {
						font-size: 30px;
					}
					.callout-content {
						padding: 1em 4% 1em;
						p {
							font-size: 22px;
						}
					}
				}
			}
		}
	}
	.stacked-content-boxes .content-boxes {
		.columns {
			&.one {
				.content-box {
					p {
						font-size: 22px;
					}
				}
			}
			&.two {
				display: flex;
				flex-flow: row wrap;
				.content-box {
					flex: 1 1 43%;
				}
			}
		}
	}
	.solar-callout {
		height: 100%;
		min-height: 100%;
		padding-bottom: 4em;
		background-image: none;
		.solar-callout-icon {
			position: relative;
		}
		.solar-callout-content-holder {
			padding-top: 30px;
			.block-heading {
				font-size: 55px;
			}
			.solar-callout-buttons-container {
				padding-top: 24px;
			}
		}
	}
}

@media screen and (max-width: 860px) {
	header #hamburger-toggle-menu ul#primary-menu li {
		font-size: 24px;
	}
	.solar-callout .solar-callout-image {
		top: -40px;
	}
}

@media screen and (max-width: 767px) {
	header {
		#logo {
			width: 40%;
			right: 0;
		}
        #banner-alert-bar {
            font-size: 16px;
            line-height: 1.25em;
            min-height: 20px;
        }
		#hamburger-toggle-menu {
			.container {
				width: 84%;
			}
			.menu-primary-nav-container {
				width: calc(100% - 40px);
			}
		}
	}
	.image-and-content {
		.block-image {
			width: 100%;
			padding-bottom: 60%;
			float: none;
			margin-bottom: 2em;
			background-size: cover !important;
		}
		.block-content {
			width: 100%;
			position: relative;
			top: 0;
			-webkit-transform: none;
			-moz-transform: none;
			-ms-transform: none;
			transform: none;
		}
	}
	.half-width {
		.block-left, .block-right {
			width: 100%;
			float: none;
		}
	}
    .video-block {
        .block-content h2.block-heading {
            font-size: 38px;
        }
    }
	.image-and-content {
		.block-image, .block-content {
			width: 100%;
		}
		.block-content {
			position: relative;
			top: 0;
			-webkit-transform: none;
			-moz-transform: none;
			-ms-transform: none;
			transform: none;
		}
		&.image-right, &.image-left {
			.block-image, .block-content {
				float: none;
			}
			.block-content {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
	.timeline {
		.timeline-entry {
			.year {
				font-size: 40px;
			}
			.icon {
				width: 45px;
				margin-right: 4%;
			}
			.content {
				width: calc(96% - 45px);
				float: right;
				p {
					font-size: 18px;
				}	
			}
		}
	}
	.two-column-cta {
		.call-to-action {
			width: 100%;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 2em;
		}
		.block-content {
			width: 100%;
			float: none;
		}
	}
	.gallery {
		.gallery-images {
			a {
				margin-bottom: .5em;
				.image-caption {
					display: none;
				}
			}
		}
	}
	.solar-callout .solar-callout-image {
		top: -20px;
	}
	.map-block {
		.map-meta-above {
			.map-description {
				width: 100%;
				float: none;
			}
			.map-goal {
				float: right;
				width: 33.33%;
			}
		}
		.mapsvg-gauge {
			width: 33.33%;
			max-width: 33.33%;
		}
		.map {
			max-height: 100%;
		}
	}
	.mapsvg-buttons.left {
    	display: none !important;
	}
	.page-template-two-column-layout {
		.sidebar {
			width: 100%;
			&.sidebar-left, &.sidebar-right {
				float: none;
			}
			.container {
				p {
					img {
						float: none;
					}
				}
			}
		}
		.main-content {
			&.with-sidebar {
				margin-top: -40px;
				width: 100%;
				float: none;
				.container {
					margin-top: 0;
					margin-bottom: 0;
				}
			}
		}
	}
	.button {
		font-size: 18px;
	}
	.hero-slider {
		ul .slide {
			.slide-content {
				width: 78%;
			}
		}
	}
	.full-width-text, .block-content, .columnized-callouts {
		h2.block-heading {
			font-size: 30px;
			line-height: 1.25em;
		}
		p, ol, ul {
			font-size: 20px;
		}
	}
	.columnized-callouts {
		.column {
			h1 {
				font-size: 30px;
			}
			&.columns-2 {
				width: 100%;
				margin: 0 0 15px 2%;
				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
		&.columns-count-2 {
			.block-columns {
				grid-template-columns: 100%;
			}
			.columns-2 {
				.column-content-container {
					width: 100%;
				}
				&:nth-of-type(odd) {
					.column-content-container {
						width: 100%;
					}
				}
			}
		}
		&.columns-count-3 {
			.block-columns {
				display: grid;
				grid-template-columns: 100%;
			}
			.columns-3 {
				.column-content-container {
					width: 100% !important;
				}
			}
		}
	}
	.accordions-block {
		h2.block-heading {
			font-size: 30px;
		}
		#accordions {
			.accordion {
				.accordion-title, .accordion-content {
					font-size: 20px;	
				}
				.accordion-title {
					&:before {
						font-size: 40px;
						top: -4px;
					}
				}
				&.clicked {
					.accordion-title:before {
						top: -7px;
						font-size: 45px;
					}
				}
			}
		}
	}
	.solar-callout .solar-callout-content-holder .block-heading {
		font-size: 38px;
	}
	.stacked-content-boxes .content-boxes {
		.columns {
			display: block;
			flex-flow: unset;
			&.one {
				.content-box {
					p {
						font-size: 18px;
					}
					.goal-completion {
						bottom: 1em;
						p {
							font-size: 32px;
							line-height: 1.5em;
							top: 5px;
							position: relative;
						}
						.bar-holder {
							top: 2px;
							height: 34px;
							.bar-fill {
								height: 30px;
								
							}
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 700px) {
	.columnized-callouts {
		.column {
			h2 {
				font-size: 22px;
			}
			&.columns-4 {
				width: 100%;
				flex: 1 1 100%;
				margin: 0 0 15px 0;
			}
		}
	}
	.map-block .map-meta-above .map-goal {
		width: 100%;
		float: none;
	}
	.stacked-content-boxes .content-boxes {
		.columns {
			display: block;
			flex-flow: unset;
			&.one {
				.content-box {
					.goal-completion {
						position: relative;
						left: 0;
						display: block;
						margin-top: 34px;
						p {
							top: -2px;
							margin: 0;
							float: none;
						}
					}
				}
			}
			&.two {
				.content-box {
					flex: 1 1 100%;
					&:first-of-type {
						margin-right: 0;
						margin-bottom: 30px;
					}
				}
			}
		}
	}
	.hero-slider ul {
		.slide {
			&.image-slide {
				padding-bottom: 75%;
				.slide-image {
					padding-bottom: 75%;
				}
			}
			.slide-content {
				padding: 15px 24px;
				width: calc(84% - 60px);
				h2 {
					font-size: 28px;
				}
				
			}
		}
	}
}

@media screen and (max-width: 640px) {
    footer {
        .footer-navigation {
            padding-bottom: 45px;
        }
        .footer-icons {
            margin-top: 0;
            padding-top: 34px;
            float: none;
            position: relative;
        }
    }
}

@media screen and (max-width: 360px) {
    footer {
        .footer-navigation {
            padding-bottom: 0px;
        }
        .social-navigation {
            padding-bottom: 0;
            float: none;
            padding-left: 5.3%;
            margin-left: 0;
        }
        .footer-icons {
            padding-top: 24px;
        }
    }
}

// Most Mobile Devices - Landscape
@media screen and (max-width: 840px) and (max-height: 420px) {
	header {
		#hamburger-toggle-menu {
			display: table;
			.container {
				display: table-cell;
				vertical-align: middle;
			}
			ul#primary-menu {
				li {
					padding: 2px 0;
					font-size: 18px;
					&:first-child {
						padding-top: 2px;
					}
					.sub-menu {
						li {
							padding: 0;	
							font-size: 16px;
						}
					}
				}
			}
		}
	}
}

// Smaller Devices (iPhone 5/SE, Galaxy S5) - Landscape
@media screen and (max-width: 700px) and (max-height: 350px) {
	header {
		#hamburger-toggle-menu {
			display: table;
			.container {
				display: table-cell;
				vertical-align: middle;
			}
			.menu-primary-nav-container {
				width: 100%;
			}
			ul#primary-menu {
				margin-top: 0;
				li {
					padding: 0;
					font-size: 16px;
					&:first-child {
						padding-top: 0;
					}
					.sub-menu {
						li {
							font-size: 15px;
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 540px) {
	.hero-slider ul {
		.slide {
			&.image-slide {
				padding-bottom: 100%;
				.slide-image {
					padding-bottom: 100%;
				}
			}
		}
	}
	.solar-callout .solar-callout-image {
		top: 0;
	}
	.stacked-content-boxes {
		.content-boxes .columns {
			&.one {
				.content-box {
					.goal-completion {
						.counter {
							width: 35px;
						}
						.bar-holder {
							width: 98%;
							margin-right: 0;
						}
					}
				}
			}
		}
	}
	.map-block .map {
		.mapsvg-region-label {
			display: none;
		}
	}
	footer .donate-button-container {
    	top: 100px !important;
    	right: auto !important;
		left: 5%;
	}
}

@media screen and (max-width: 480px) {
	header #hamburger-toggle-menu {
		.menu-primary-nav-container {
			width: 84%;
			margin: 0 auto;
		}
		ul#primary-menu {
			margin: 0 auto;
			width: 100%;
			li {
				padding: 8px 0 0;
				font-size: 20px;
				width: 100%;
				margin-right: 0;
				&:first-of-type {
					padding-top: 8px;
				}
				.sub-menu {
					li {
						padding: 0;
						font-size: 18px;
					}
				}
			}
		}
	}
	.gform_wrapper form {
		overflow: hidden;
		.gform_heading h3 {
			font-size: 30px;
		}
	}
	.solar-callout .solar-callout-content-holder {
		.block-heading {
			font-size: 30px;
		}
		.solar-callout-content {
			p {
				font-size: 20px;
			}
		}
	}
	.stacked-content-boxes .content-boxes .columns .content-box .content-box-heading {
		font-size: 24px;
	}
	.homepage-hero {
		h1 {
			font-size: 40px;
		}
		.slider .slide .slide-caption p {
			font-size: 20px;
		}
	}
	.three-column-callout {
		.block-heading {
			font-size: 40px;
			float: none;
		}
		.block-content {
			float: none;
			width: 100%;
		}
		.callouts {
			&.three, &.two {
				.callout {
					.callout-content {
						.callout-heading {
							font-size: 24px;
						}
						p {
							font-size: 20px;
						}
					}
				}
			}
		}
	}
}

// Most Mobile Devices - Portrait
@media screen and (max-width: 420px) and (max-height: 840px) {
	header #hamburger-toggle-menu {
		.menu-primary-nav-container {
			width: 84%;
			margin: 0 auto;
		}
		ul#primary-menu {
			margin-top: 0;
			width: 100%;
			li {
				width: 100%;
				margin-right: 0;
				padding: 8px 0 0;
				&:first-child {
					padding-top: 0;
				}
				.sub-menu {
					li {
						padding: 2px 0;
					}
				}
			}
		}
	}
}

// Smaller Devices (iPhone 5/SE, Galaxy S5) - Portrait
@media screen and (max-width: 380px) and (max-height: 700px) {
	header #hamburger-toggle-menu {
		ul#primary-menu {
			li {
				padding: 8px 0 0;
				.sub-menu {
					li {
						padding: 0;
						font-size: 18px;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 320px) {
	footer {
		.footer-navigation {
			float: none;
			padding-top: 1px;
		}
		.social-navigation {
			margin-left: 0;
			float: none;
			padding-left: 5.3%;
		}
	}
}