/*
Document Name: Marine Mammal Science, Mobile Style Sheet
Version: 2.0
Author: Myrrh Larsen
Author URI: http://theinsomniacsociety.com/
*/


@media screen and (max-width: 768px) {
	#nav { width:auto; margin-bottom:10px; }
	#nav ul { height:auto;width:100%; }
	#nav ul > li { width:100%; position:relative; }
	#nav ul > li > a { width:100%; margin: 0 0 7px 0; }
	
	#nav ul > li > ul { display:inline-block; transform:translateY(-1em); left:62%; background-color:rgba(238,238,238,0.9); -webkit-box-shadow: -5px 5px 15px 5px rgba(128,128,128,0.5); box-shadow: -5px 5px 15px 5px rgba(128,128,128,0.5); }
	#nav ul > li > ul > li { width:100%; }
	#nav ul > li > ul > li > a { display:block; width:auto; background-color:transparent; }
	#nav .top-menu > .current_page_item > a,
	#nav .top-menu > .current-page-ancestor > a,
	.single-facts #nav .top-menu > #menu-item-95 > a { background-color:inherit; color:#4bc8ee; }

	/* homepage */
	#statement { border-width:0; padding:1.5em 1.0em 1.0em; }
	ul.feature-boxes > li:last-child { border-bottom-width:10px; }
	.homecontent {
		padding-top:1.0em;
		width:calc(100% - 36px);
		max-width:none!important;
	}
	.content .article + hr { margin-right:auto; }
	/* end homepage */

	body.home #main { padding-bottom:568px; position:relative; }
	body.home #main #sidebar-right {
		position:absolute;
		bottom:40px; left:19px;
		float:none;
		width:calc(100% - 36px);
		margin:0;
	}
	body.home #main #sidebar-right .sidebar-box {
		margin-left: auto; margin-right:auto;
	}

	#footer .wrapper { width:100%; }
}

@media screen and (max-width: 480px) {
	#master { width:calc(100% - 40px); margin:0 20px; padding:10px 20px 100px; position:relative; }
	#topHeader #wrapper { height:265px; }
	#topHeader #social { float:none; }
	#topHeader h1 { 
		float:none;
		/*background:transparent url('./images/header-mobile@2x.gif') no-repeat scroll top center;
		background-size:contain;*/
		width:100%; height:auto;
		text-indent:-999em; overflow:hidden;
		top:auto;
		bottom:-13px; left:0;
	}
	#topHeader h1 a { height:0; padding-bottom:33.2562%; }
	#topHeader #buttons { display:flex; }
	#topHeader #buttons .button { display:flex; margin-bottom:0; }
	#topHeader #social.mobile-only { position:absolute; right:18px; }
	#topHeader #search form { display:flex; }
	#topHeader #search form input { flex-grow:1; }

	#nav { width:auto; margin-bottom:10px; }
	#nav ul { height:auto;width:100%; }
	#nav ul > li { width:100%; }
	#nav ul > li > a { width:100%; margin: 0 0 7px 0; }

	.content .tabs { display:block; margin-bottom:0.25em; }
	.content .tabs li { display:block; }
	.content .tabs li a { display:block; }
	.content .tabs li a:before { content:"﹥ "; }
	
	#hero { padding-bottom:76.875%; }
	
	nav.breadcrumbs { padding-left:0; }

	.homecontent,
	.pagecontent,
	.blogcontent { width:100%; max-width:none!important; margin:0 auto!important; }
	.pagecontent h2 { margin-right:2.5em; }

	#mainHeader { width:320px; height:237px; }
	#mainHeader .bjqs img { width:320px; }
	#mainHeader #feature {
		top:10px;
		left:22px;
		height:200px;
	}
	#mainHeader #feature h1 {
		font-size:22px;
		line-height:27px;
	}
	#mainHeader #feature p {
		font-size:11px;
		line-height:15px;
	}
	#mainHeader #feature a.cta { margin-top:40px; }
	ul.feature-boxes { width:auto; margin:0 0 17px; border-top:1px solid #eee; }
	ul.feature-boxes > li {
		float:none;
		width:100%;
		padding:15px 0;
		margin:0 auto!important;
		border-width:0;
		border-bottom:1px solid #eee;
	}
	ul.feature-boxes > li:last-child img,
	ul.feature-boxes > li img {
		max-width:none;
		margin-right:1em;
		margin-bottom:1.8em;
	}

	#main #sidebar-left .sidebar-box {
		display:none;
	}
	#main #sidebar-left {
		position:absolute;
		/*top:246px; left:210px;*/
		top:140px; left:210px;
		background-color:rgba(255,255,255,0.9);
		width:auto;
		font-size:0.875em;
		padding:10px 7px;
		z-index:100;
	}
	#main #sidebar-left .page-item-864 ul.children {
		display:none;
	}
	#main #sidebar-left .sidebar-menu {
		margin-bottom:30px;
	}


	.content .post-content div#login {
		width:234px;
	}
	.login form .input, .login input[type="text"] {
		font-size:18px;
	}
	.lwa #lwa_wp-submit { bottom:16px; }
	.lwa-links-remember { margin-bottom:0.5em; }


	#footer .wrapper { width:320px; }

}