/*
Theme Name: Lakeview Theme
Author: Jeromy Condon
Author URI: http://rustygeorge.com/
Description: ACF & other embedded plugins not to be distributed separately.
Version: 1.0
*/

@import url('css/normalize.css');
@import url('css/base-layout.css');


/*
|====================================================
| 1. OVERALL LAYOUT
|====================================================
*/

.page-wrap {
	max-width: 960px;
	margin: auto;
}

.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%;
}

.galleria-info {
	display: none!important;
}

/*
|====================================================
| 2. HEADER LAYOUT
|====================================================
*/
header {
	margin-top: 100px;
	background: #fff;
	border: solid 1px #640e0d;
	position: relative;
}

header .flex {
	display: flex;
	background: #640e0d;
	color: #fff;
	padding: 10px 20px 0;
	justify-content: space-between;
}

header > div.logo {
	text-align:center;
	padding: 10px;
}

nav {
	background: #8db83d;
	padding: 5px;
}

nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style:none;
}

nav li {
	padding: 0 10px;
	border-right: solid 1px #640e0d;
}

nav li:last-child {
	border: none;
}

nav a {
	display: block;
	color: #640e0d;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}

.nav-toggle {
	height:30px;
	width: 30px;
	background: url(assets/hamburger.svg) no-repeat left top transparent;
	background-size: contain;
	cursor: pointer;
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -15px;
	display:none;
}

.overlay-nav-container {
	padding: 30px;
	position: fixed;
	z-index:9999;
	z-index: -1;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:#eee;
	opacity:0;
	transition: opacity .4s ease;
}

.overlay-nav-container ul {
	list-style:none;
	text-align:center;
	font-size: 1.8em;
	margin: 0;
	padding:0;
}

.overlay-nav-logo {
	text-align:center;
}

.overlay-nav-container a {
	text-decoration: none;
}

.open .overlay-nav-container {
	opacity: 1;
	z-index:9999;
}

.overlay-nav-container li.current-menu-item {
	border:none;
}

.nav-overlay-toggle {
	position: absolute;
	top: 25px;
	right:30px;
	cursor: pointer;
}

.nav-overlay-toggle img {
	display:block;
}

/*
|====================================================
| 3. MAIN CONTENT LAYOUT
|====================================================
*/
.content-area {
	background: #640e0d;
	padding: 20px;
}

.hero-area {
	margin-bottom: 20px;
}

.hero-area img {
	display: block;
	width: 100%;
}

.main {
	display: flex;
}

.main > div {
	flex: 1 1 0%;
}

.main .page-content {
	background: #fff;
	padding: 40px;
	overflow: hidden;
	position: relative;
}

.page-content:before, 
.page-content:after {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	position: absolute;
	overflow:hidden;
	background: #640e0d
}

.page-content.no-radius:before, 
.page-content.no-radius:after {
	display: none;
}

.page-content:before {
	top: -15px;
	left:-15px;
}
.page-content:after {
	top: -15px;
	right:-15px;
}

.subfooter {
	display: flex;
	align-items: center;
	background: #ffe7c4;
	color: #640e0d;
}

.subfooter > div {
	flex: none;
	width: 50%;
}

.subfooter .community-video {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 20px;
}

.subfooter .community-video > .image {
	margin-right: 20px;
}

.subfooter .schedule-tour {
	text-align:center;
}


/*
|====================================================
| 3.5 SIDEBAR CONTENT LAYOUT
|====================================================
*/
.main > div.sidebar {
	flex: none;
	width: 200px;
	padding: 15px;
	background: #9a866b;
}

.widget {
	background: linear-gradient(to bottom, rgba(187,93,92,1) 0%,rgba(105,19,18,1) 100%);
	border-radius: 15px;
	border: solid 1px #640e0d;
	padding: 15px;
	color: #fff;
	text-align:center;
	font-size: .9em;
}

.widget a {
	color: #fff;
}

/*
|====================================================
| 4. FOOTER LAYOUT
|====================================================
*/
footer {
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.6);
	color: #fff;
}

footer a {
	color: #fff;
}

footer .text {
	padding: 0 50px;
}

/*
|====================================================
| 4. MEDIA QUERIES
|====================================================
*/
@media (max-width: 900px) {
	nav {
		font-size: .8em;
	}
}

@media (max-width: 800px) {
	header {
		display: block;
		background: #fff;
	}

	header .tele, 
	header .addy {
		display: none;
	}

	nav {
		display: none;
	}

	.nav-toggle {
		display: block;
	}

	.main {
		flex-direction: column;
	}

	.main > div {
		flex: none;
	}

	.main > div.sidebar {
		order: 2;
		width: 100%;
	}

}

@media (max-width: 500px) {
	header {
		margin-top: 50px;
	}

	header > div.logo,
	.overlay-nav-logo img {
		width: 150px;
	}

	.subfooter {
		display: block;
	}

	.subfooter .community-video,
	.subfooter > div,
	footer {
		flex: none;
		text-align:center;
		width: 100%;
		display: block;
	}
}