//////////////////////////////////////
// Styling for mobile devices
/////////////////////////////////////
@media screen and (max-width: 800px) {

.wrap {
    height: 100vh;
    display: block;
    overflow: scroll;
}
    
.wraptainer {
    margin-top: 0;   
}

.page-content {
    padding: 0;
}

figure > img.thumb {
    width: 100px;
    margin: 0 .7rem .7rem 0;
}

.sidebar h2 {
    text-align: center;
}

.masonry {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

.masonry-panel {
    border-radius: 0px;
}

.lightbox-popup {
    width: 95%;
    max-height: 100%;
    border-radius: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    left: 50%;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;
}

.lightbox-popup .masonry-panel {
    padding: 0px;
    margin: 10px 0 0 0;
}

.lightbox-nav-wrap {
    position: fixed;
    top: 0;
}

.lightbox-image {
    margin: auto;
    width: 70vw;
    max-width: 80vw;
    max-height: 95vh;
    height: auto;
}

.lightbox-image-description {
    margin: 0 30px 4px 0;
    position: fixed;
    bottom: 0;
    left: 0;
}

.lightbox-overlay {
    background-color: $lightbox-background-color;
}
/*  */
.lightbox-overlay:target+.lightbox-popup {
    right: 0;
    opacity: 1;
    position: absolute;
    visibility: visible;
    height: 99%;
    box-shadow: 0 3px 7px rgba(0,0,0,.25);
    box-sizing: border-box;
    margin: 0;

}

.lightbox-nav {
    float: left;
    width: 33%;
}

.lightbox-popup-close {
    top: 0px;
    position: fixed;
    right: 30px;
    border: none;
    opacity: 1;
    margin: 0;
    width: auto;
    height: 40px;
    border-radius: 0;
    line-height: 40px;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    outline: 0;
    -webkit-font-smoothing: antialiased;
}

.lightbox-prev {
    position: fixed;
    left: 30px;
    border: none;
    opacity: 1;
    margin: 0;
    top: -8px;
    bottom: auto;
    width: auto;
    height: 40px;
    border-radius: 0;
    line-height: 40px;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    outline: 0;
    -webkit-font-smoothing: antialiased;
}

.lightbox-next {
    position: fixed;
    left: 48%;
    border: none;
    opacity: 1;
    margin: 0;
    top: -8px;
    bottom: auto;
    height: 40px;
    border-radius: 0;
    line-height: 40px;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    outline: 0;
    -webkit-font-smoothing: antialiased;
}

a.lightbox-prev, a.lightbox-next, a.lightbox-popup-close {
    font-size: 4em;
}

.lightbox-popup div {
    margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

.biopic {
    padding-left: .2em;
}

//////////////////////////////
// Styling for menu / navbar
/////////////////////////////
	#nav .primary-nav{
		width: 100%;
		max-width: 768px;
		height: auto;
		background: $navbar-color;
	}

	#nav .primary-nav li {
		float: none;
		padding: 0 10px;
		display: none;
	}

	#nav>.primary-nav>li>a {
		line-height: 45px;
		padding: 0 10px;
	}

	.dropdown>a::after {
		display: none;
	}

	#nav .primary-nav ul {
		position: relative;
		top: 0px;
		left: 0px;
		right: auto;
		opacity: 1;
		clear: both;
	}

	#nav .primary-nav ul li, #nav>.primary-nav>li:hover>ul>li {
		height: auto;
		position: relative;

	}

	#nav .primary-nav ul li a {
		padding: 5px 10px;
		width: auto;
	}

	#nav #toggleMenu {
		display: block;
		padding-left: 15px;
	}

	#nav #toggleMenu>a, #nav #hideMenu>a {
		padding: 0px 10px;
		z-index: 1;
		line-height: 45px;
	}

	#nav:target li {
		display: block;
	}

	#nav:target #toggleMenu {
		display: none;
	}

	#nav:target #hideMenu {
		display: block;
		background: rgba(0, 0, 0, .3);
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		padding-left: 25px;
		padding: 0 15px 0 15px;
	}

	#nav #hideMenu>a {
		color: $hamburger-icon-color;
	}

	#toggleMenu>a::after, #hideMenu>a::after {
		position: absolute;
		content: "";
		right: 35px;
		top: 21px;
		height: 9px;
		width: 20px;
		border-top: 2px solid $hamburger-icon-color;
		border-bottom: 2px solid $hamburger-icon-color;
		z-index: 1;
	}

	#toggleMenu>a::before, #hideMenu>a::before {
		position: absolute;    .lightbox-next {
        left: 48%;
    }
		content: "";
		right: 35px;
		top: 13px;
		height: 3px;
		width: 20px;
		border-bottom: 2px solid $hamburger-icon-color;
		z-index: 1;
	}

	#hideMenu>a::after, #hideMenu>a::before {
		border-color: $hamburger-icon-color;
	}
	
	.navbar {
	  background-color: $navbar-color;
	  height: 44px;
	  display: inline;
	}
 
	#nav>.right.primary-nav  {
	  background-color: lighten($navbar-color, 10%);
	}

} //End of Mobile Styles 

//////////////////////////////////////////
// Styling for netbooks and small laptops
/////////////////////////////////////////
@media screen and (max-width: 1024px) {  
    [class^="icon-"], [class*=" icon-"] {
        padding: 0 1px;
    }
    
    .menu > li {
        font-size: 1.1em !important;
    }
    
    .menu > li > a {
        line-height: 1;
        padding: 0.4rem 0;
        display: block;
        margin-left: -10px;
    }
} // End of Netbook Styles

/////////////////////
// Styling for iPads
/////////////////////
@media (max-width: 768px) and (orientation: portrait) { 
    .hide-for-ipad {
        display: none !important;
    }
    #header.medium-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
} // End of iPad Styles

////////////////////////
// Styling for tablets
////////////////////////
@media (max-width: 800px) and (min-width: 500px) and (orientation: portrait) {
    .lightbox-popup {
        width: 95%;
        max-height: 100%;
    }

} // End of Tablet Styles
