/* 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 { background: white; color: #666; }

h1, h2, h3 {
	color: $base-accent-color;
}

h1 {
	font-weight: 300;
	font-size: 1.3rem;

	@media only screen and (min-width: $large-screen) {
		font-size: 1.5em;
	}

	a {
		color: $base-accent-color;
	}
}

h2 {
	font-family: $base-font-family;
	font-size: 1.45em;
	font-weight: 300;
	text-transform: capitalize;
	margin: 1em 0 1.4em;
}

h3 {
	font-size: 1.2em;
	font-weight: 500;
	font-family: $header-font-family;
	margin-top: 1em;
}

a {
	color: $link-color;
	text-decoration: none; 
}

a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}

/* img */
img { display: block; height: auto; }

/* Group */
.group { @include clearfix; }

/* Container */
.container {
	max-width: $container;
	margin: 0 1em;

	@media only screen and ( min-width:$container ) {
		margin: 0 auto;
	}
}

// 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);
	}
}

/*
	WP Native Image Alignment

 */
img.alignleft { 
	display: block;
	margin: 1em auto;

	@media only screen and (min-width:800px) {
		float: left;
		margin: 0 1rem 1rem 0;
	}
}
img.alignright { 
	display: block;
	margin: 1em auto;

	@media only screen and (min-width:800px) {
		float: right; 
	}
}

/*
	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(90deg, $base-accent-color, #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;
		}
	}
}

/* .googlemap */
.googlemap { position: relative; height: 0; padding-bottom: 56.25%; margin-bottom: 20px; max-width: 100%; height: auto; overflow: hidden; border: 1px solid #555; }
.googlemap iframe, 
.googlemap object, 
.googlemap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* embedresponsively */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*
	Flex Box

.flex-box {
	@include clearfix;

	display: flex;
	flex-direction: row; // row, row-reverse, column, column-reverse
	flex-wrap: wrap; // nowrap, wrap, wrap-reverse
	justify-content: center; // flex-start, flex-end, center, space-between, space-around (for horizontal spacing of all items)
	align-items: center; // flex-start, flex-end, center, stretch, baseline (for vertical alignment of all individual items)
	align-content: stretch; // flex-start, flex-end, center, stretch, space-between, space-around (for horizontal spacing of all items)

	.item {

		//	flex: 1 1 8em; // shorthand of flex-grow, flex-shrink, flex-basis
		//	flex-grow: 1; // number, 0 default
		//	flex-shrink: 1; // number, 0 default
		//	flex-basis: 8em; // default size before space is distributed
		//	align-self: auto; // This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
		 
		flex: 1 1 12em; // shorthand of flex-grow, flex-shrink, flex-basis
	}
}
 */

