////////////////////////////////////// // 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