/* Mixins For Child Theme Styling */

@mixin clearfix {
	&::after {
		clear: both;
		content: "";
		display: block;
	}
}


/*
	Config Styles

 */

html,
body {
	position: relative;
	height: auto;
} // Overwrite Bourbon's layout.scss (otherwise mmenu jumps)

// html { font-family: $base-font-family; }

body { font-family: $base-font-family; background: white; }


h1 {
	color: $base-accent-color;
	font-family: $header-font-family;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.3;
	margin: 1em 0;

	@media (min-width: $medium-screen){
		font-size: 2em;
	}

	@media only screen and (min-width: $large-screen) {
		font-size: 2.4em
	}

	a {
		color: $base-accent-color;

		&:hover {
			color: $base-accent-color;
		}
	}

	// Home page sub-heading
	strong {
		display: block;
		font-size: 1rem;
		letter-spacing: 0;
		text-transform: uppercase;
		margin-bottom: .5em;

		i {
			margin-right: .25em;
		}
	}

	span {
		display: block;
		color: $base-accent-color;
		font-size: .85em;
		font-weight: 300;
		margin-top: .6rem;
	}
}

h2, 
h3 {
	color: #555;
	font-weight: 700;
	font-family: $header-font-family;
	font-size: 1.25rem;
	margin: 1em 0;
	text-transform: uppercase;
}

h3 {
	color: #555;
}

h4 {
	line-height:1.2;
	font-size: 1.1em;

	@media (min-width: $large-screen){
//		font-size: 2.5em;
	}

	@media (min-width: $wide-container){
//		font-size: 3.125em;
	}
}

blockquote {
	font-size: 1.4em;
	padding-left: 1em;
	margin-left: 1em;
	max-width: 80%;
	border-left: 3px solid $flat-yellow;
}

a {
	color: $link-color;
	text-decoration: none;
	
	&:hover, &:focus {
		outline:0;
	}
}

img {
	display: block;
	height: auto;
}


.group { @include clearfix; }


/* Container */
.container {
	max-width: $container;
	margin: 0 auto;
	padding: 0 1em;

	@media (min-width:$large-screen){
		padding-left: 0;
		padding-right: 0;
	}
}

// Custom Background
.custom-bg {
//	background-size: cover; 
	background-repeat: no-repeat; 
//	background-position: center;
}

/*
	Button Styles

 */
a.button {
	transition: all .2s ease;
	display: inline-block;
	background: $base-accent-color;
	color: #fff;
	font-family: $header-font-family;
	text-transform: uppercase;
	padding: 1em;
	&:hover {
		background: darken($base-accent-color, 3);
	}
}

.btn {
	&:focus {
		outline:0;
		box-shadow:none;
	}
}


/*
	WP Native Image Alignment

 */
img.alignleft {
	display: block;
	margin: 1em auto;
	@media only screen and (min-width: 40em) {
		float: left;
		margin: 0 1rem 1rem 0;
	}
}

img.alignright {
	display: block;
	margin: 1em auto;
	@media only screen and (min-width: 40em) {
		float: right;
	}
}

.mx-auto {
	margin-left:auto;
	margin-right:auto;
}

/*
	Forms

 */
form.wpcf7-form {
	$blue: #809BCE;
	$grey: #C3C3D8;
	font-family: $header-font-family;
	label {
		font-weight: normal;
		font-style: italic;
	}
	textarea {
		border-left: 1px solid rgba($grey, .5);
	}
	input,
	textarea {
		line-height: 1.6;
		border: 0;
		box-shadow: none;
		border-bottom: 1px solid rgba($grey, 0.5);
		&:focus {
			outline: 0;
			border-bottom: 1px solid rgba($blue, 0.7);
			transition: 0.6s all ease;
		}
	}
	input[type=submit] {
		position: relative;
		background: linear-gradient(180deg, #F14644, #F14320);
		letter-spacing: 2px;
		font-family: $header-font-family;
		font-weight: 300;
		text-transform: uppercase;
		width: 100%;
		border: 0;
		outline: 0;
		z-index: 3;
		&:hover {
			transform: translateY(4px);
			transition: 0.4s all ease;
		}
	}
	.wpcf7-quiz-label {
		color: black;
		font-weight: bold;
		font-size: 1rem;
		line-height: 1.2;
		
	}
}
.featured-section form.wpcf7-form .wpcf7-quiz-label {
	color: yellow;
}


/* .googlemap */
.googlemap {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	margin-bottom: 20px;
	max-width: 100%;
	height: auto;
	overflow: hidden;
	border: 1px solid #555;
	iframe,
	object,
	embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}


/* embedresponsively */
.embed-container-container {
	max-width: 640px;
	margin: 2em auto;
}
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	iframe,
	object,
	embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}