/*
Theme Name: magiclantern
Theme URI: http://underscores.me/
Author: CHCS
Author URI: http://chcs.com
Description: Description
Version: 1.0-wpcom
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magiclantern
Tags:
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
magiclantern is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/










/* external sources
****************************************/
@import url("./default_s.css");
@import url(http://fonts.googleapis.com/css?family=Oleo+Script|Roboto+Slab|Roboto);










/* basic styling
****************************************/
body {
	font:16px "roboto slab", serif;
	margin-left:40%;
	background: #fbf9f4;
	color: #715c54;
}
p {
	line-height:2em;
}
a {
	color:#4d7c8f;
	text-decoration:none;
}
a:visited, a:hover {
	color:#b6cecb;
}










/* various classes
****************************************/
.wp-caption-text {
	font-size:.8em;
	color:#999;
}
.gallery-item {
	margin-bottom:2em;
}
.entry-title {
	line-height:1em;
}










/* content styling
****************************************/
article {
	padding:4em 5em 5em;
	max-width:50em;
}
article h1,
article h2,
article h3 {
	font-family:"oleo script";
	color: #c74b83;
}
article h1 {
	font-size: 3.4em;
}
article h2 {
	font-size:1.66em;
}
article h3 {
	font-size:1.33em;
}
.site-content {
	box-shadow: inset 0 0 100px #BFB69F;
}
@media (max-width: 600px){
	article {
		padding:2em;
	}
	article h1 {
		font-size:2em;
	}
	.entry-content > .wp-caption {
		max-width:100%;
		display:block;
		float:none;
		width:auto !important;
	}
	.entry-content > .wp-caption img {
		width:100%;
	}
	article p > img {
		max-width:30%;
	}
}










/* main navigation
****************************************/
.main-navigation {
	font:.85em/1 roboto, sans-serif;
	background:#685853;
	padding-top:3em;
}
.main-navigation li {
	position:relative;
	z-index: 10;
}
.main-navigation ul {
	margin:0;
	list-style:none;
	background:#685853;
}
.main-navigation a {
	display:block;
	color:white;
	padding:1em;
	text-decoration:none;
	transition:background .5s;
}
.main-navigation a:hover {
	background: rgba(238, 218, 136, 0.74);
	transition:background .1s;
}
.main-navigation ul ul {
	position:absolute;
	left:0;
	top:100%;
	max-height:0em;
	overflow:hidden;
	transition: max-height .3s;
	width:17em;
}
.main-navigation ul ul ul {
	top:0;
	left:100%;
}
.main-navigation li:hover > ul {
	max-height:40em;
	transition: max-height 1s;
}
.main-navigation ul:hover {
	overflow:visible;
}
.main-navigation .menu-toggle {
	display: none;
	background:#685853;
}
#menu-main-nav {
	
}
#menu-main-nav:after {
	content:"";
	clear:both;
	display:block;
}
#menu-main-nav > li {
	padding-top:1em;
	float:left;
}
#menu-main-nav > .current-menu-item,
#menu-main-nav > .current-menu-ancestor{
	padding:0;
}
#menu-main-nav > .current-menu-item > a,
#menu-main-nav > .current-menu-ancestor > a{
	padding-top:2em;
}
.current-menu-item,
.current-menu-ancestor {
	background:#d6bc54;
}

/* responsive */
@media (max-width:900px) {
	#menu-main-nav {
		padding-top:0em;
	}
	#menu-main-nav > .current-menu-item > a,
	#menu-main-nav > .current-menu-ancestor > a{
		padding-top:1em;
	}
	#menu-main-nav > li {
		padding-top:0em;
	}
}
@media screen and (max-width: 600px) {
	.main-navigation .menu-toggle {
		display: block;
	}
	.main-navigation ul ul {
		position:static;
		max-height:none;
		width:none;
		width:100%;
		font-size:.9em;
	}
	.main-navigation ul ul a {
		padding:.6em;
		padding-left:3em;
	}
	.main-navigation ul ul ul a {
		padding-left:5em;
	}

}

/* stickyness */
#menu-main-nav-sticky-wrapper {
	height:auto !important;
}
#undefined-sticky-wrapper {
	height:auto !important;
}
@media (min-width:601px){
	.is-sticky > #menu-main-nav {
		width:100%;
	}
}
@media (max-width:601px){
	.is-sticky > .menu-toggle  {
		width:100%;
	}
}







/* mobile side-menu
****************************************/
@media (max-width:600px) {
	html {
		overflow-x:hidden;
	}
	body {
		position:absolute;
		left:0;
		width:100%;
		transition:left .3s;
	}
	body.menu {
		position:absolute;
		left:70%;
		width:100%;
		transition:left .3s;
		z-index:100;
	}
	#menu-main-nav {
		position: fixed;
		top: 0;
		right:100%;
		height:100%;
		width:70%;
		z-index:1000;
		transition: right .3s;
		display:block;
	}
	body.menu #menu-main-nav {
		right:30%;
		transition: right .3s;
	}
	#menu-main-nav > li {
		float:none;
	}
	#menu-main-nav ul {
		display:block;
		position:static;
	}
}










/* branding
****************************************/
.site-branding {
	position:fixed;
	top:0;
	left:0;
	height:100%;
	width:40%;
	background: rgb(73, 73, 73) url("./images/collage.jpg") top right;
	background-size:cover;
	z-index: 100;
	box-shadow: inset -100px 50px 100px rgba(0,0,0,.5);
	padding-top:150px;
}
.site-branding .site-description {
	position:absolute;
	left:-9999px;
}
.site-branding .site-title a {
	display:block;
	margin:auto;
	background:#b6cecb url(./images/logo.png) center center no-repeat;
	background-size:90% auto;
	width:150px;
	height:150px;
	text-indent:-9999px;
	border-radius:5px;
	box-shadow:-1em 1em 5em rgba(0,0,0,.5),inset 0 0 3em rgba(0,0,0,.2);
}
@media (max-width:900px) {
	.site-branding {
		padding-top:25px;
	}
}










/* footer
****************************************/
.site-footer {
	background: #4f6b54;
	padding:10em 3em 3em;
	font-size:.8em;
	color:#abab8a;
	text-align:right;
	box-shadow:inset 0 0 100px rgba(0,0,0,.1);
}
.site-footer a {
	color:#fff;
}










/* responsive layout adjustments
****************************************/
@media (max-width: 1200px){
	.site-branding {
		width:30%
	}
	body {
		margin-left:30%;
	}
}
@media (max-width: 900px){
	.site-branding {
		position:static;
		height:200px;
		width:auto;
		background-position:center center
	}
	body {
		margin-left:0;
	}
	.main-navigation {
		padding:0;
	}
}



/* remove box shadows for mobile optimization
****************************************/
@media (max-width: 600px){
	.site-content,
	.site-branding,
	.site-branding .site-title a,
	.site-footer 
	{
		box-shadow:none;
	}
}