@font-face {
    font-family: 'Sofia Pro';
    src: url('../font/SofiaProUltraLight.eot');
    src: url('../font/SofiaProUltraLight.eot?#iefix') format('embedded-opentype'),
    url('../font/SofiaProUltraLight.woff2') format('woff2'),
    url('../font/SofiaProUltraLight.woff') format('woff'),
    url('../font/SofiaProUltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
/*@font-face {
    font-family: 'Sofia Pro';
    src: url('SofiaProUltraLight.eot');
    src: url('SofiaProUltraLight.eot?#iefix') format('embedded-opentype'),
        url('SofiaProUltraLight.woff2') format('woff2'),
        url('SofiaProUltraLight.woff') format('woff'),
        url('SofiaProUltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}*/
* {
    margin: 0;
    padding: 0;
    font-family: 'Sofia Pro';
}


.home-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2.5em 1em;
}
.home-intro > p {
    margin-bottom: 0.5em;
    font-size: 1.25em;
}
.home-intro > h1 {
    font-size: 2.5em;
    margin-bottom: 1em;
}
.video-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    column-gap: 1.5em;
    row-gap: 1em;
    align-items: center;
    justify-content: center;
    padding: 0 1.5em;
    box-sizing: border-box;
}
/*.video-container .test{*/
/*    position: relative;*/
/*}*/
/*.video-container .test::before{*/
/*    content: "";*/
/*    position: absolute;*/
/*    top:0;*/
/*    left:0;*/
/*    right:0;*/
/*    bottom:0;*/
/*    background-color: red;*/
/*    !*border-radius: 50%;*!*/
/*}*/
.video-container .video-wrapper{
    clip-path: circle(50% at 50% 50%);
    width: 300px;
    height: 300px;
}

.video-container iframe{
    width: 100%;
    height:100%;
}
.video-container {
    margin-top: 2.5em;
}
.portfolio {
    margin-top: 2.5em;
    display: flex;
    flex-direction: column;
    height: 100%;
    row-gap: 1.5em;
}
.portfolio .row-portfolio {
    display: flex;
    flex-wrap: inherit;
    width: 50%;
    margin: 0 auto;
    max-height: 30%;
    height: auto;
    column-gap: 1.5em;
}
.row-portfolio > img {
    height: auto;
    width: 30%;
    object-fit: contain;
}
.row-portfolio > aside {
    width: 50%;
    display: flex;
    flex-direction: column;
}

section#openingSection > img {
    height: 100%;
}

*:focus {
    text-decoration: none;
    outline:none;
    border: none;
    box-shadow: none;
}

html,
body{
    height: 100%;
    width: 100%;
    position: relative;
}

main{
    padding-bottom: 2.5em;
}

section#openingSection, footer{
    background-color: black;
}

/*section#openingSection > img{
    filter: invert(1);
}*/

header > a,
nav#overlay > ul > li > a{
    text-transform: uppercase;
}

footer > nav > a{
    color: white;
}
div.hoverableImage,
div.row > div.column > div.hoverableImage > a{
    position: relative;
}

div.row > div.column > div.hoverableImage:hover > a img {
    opacity: 0.6;
}

div.row > div.column > div.hoverableImage > div.photoOverlay{
    transition: .5s ease;
    opacity: 0;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
div.row > div.column > div.hoverableImage > div.photoOverlay > span {
    font-size: 2.5em;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;
    display: block;
}

div.row > div.column > div.hoverableImage > div.photoOverlay > span:last-child{
    font-size: 1.5em;
    padding-top: 2em;
}
div.row > div.column > div.hoverableImage:hover div.photoOverlay{
    opacity: 1;
}

.photo{
    width: 100%;
}

.horizontalSlider{ /* needs to be added to main#gallery > section.picture-container */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    height: 100%;
    width: auto;
}

.horizontalSliderFlex{ /* needs to be added to main#gallery > section.picture-container > img*/
    /* horizontal scrolling */
    margin-right: 1em;
    flex: 0 0 auto;
    /*width: 50%;* /
	margin-bottom: 1em;*/
    height: 90vh;
    width: auto;
}

nav#overlay > ul a{
    text-decoration: none;
    display: inline-block;
    color: black;
    text-align: center;
    margin-top: 1em;
}

article#explicitContentPopup > div > form > button{
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: .25em .5em;
    cursor: pointer;
}

.scrollToTop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: white;
    /*text-indent: -9999px;*/
    display: none;
    border: 1px dotted black;
    border-radius: 30px;
}
.scrollToTop:hover {
    background-color: black;
    transition: 300ms;
}
.scrollToTop:hover i{
    /*border-bottom: 0.8em solid white;*/
    transition: 300ms;
    color: white;
}
.scrollToTop i {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    position: relative;
    /*height:0;
	width:0;
	border-left: 0.8em solid transparent;
	border-right: 0.8em solid transparent;
	border-bottom: 0.8em solid black;*/
    font-size: 2em;
    color: black;
}

footer > nav > a:last-child:hover {
    color: #00adff;
    transition: 300ms;
}
/*
article#explicitContentPopup > div > form > button:hover{
	background-color: white;
	color: black;
}
*/
/* Styles for small screens */
@media only screen and (max-width: 540px){
    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row > div.column{
        -ms-flex: 100%; /* IE10 */
        flex: 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }
    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		/*maybe flex-direction: row*/
    }

    main#gallery > section.picture-container,
    main#gallery > section.picture-container > img{
        width: 100%;
        height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		width: 50%;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
        color: white;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 90%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.hoverableImage {
        position: relative;
    }

    div.hoverableImage > a{
        position: relative;
    }

    div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: 3em;
        opacity: 1;
        display: block;
        transition: .5s ease;
    }

    div.hoverableImage > a:hover img {
        opacity: 0.6;
    }

    div.hoverableImage > div.photoOverlay{
        transition: .5s ease;
        opacity: 0;
        width: 100%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }

    div.hoverableImage > div.photoOverlay > span {
        font-size: 2.5em;
        font-weight: bold;
    }

    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }

    div.hoverableImage:hover div.photoOverlay {
        opacity: 1;
    }

    /*
	section#lobbyPictures > a{
		width: 33%;
	}

	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
	*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }

    /*
	main.page {
		margin-left: 16em;
	}
	*/

    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    article#explicitContentPopup > div > p{
        font-size: 2.5em;
    }

    a.enter {
        display: none;
    }

    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 1;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        display: table;
    }

    header *{
        display: inline-block;
        padding: .25em;
    }

    header > h2{
        display: table-cell;
        vertical-align: middle;
    }

    header a{
        display: table-cell;
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
    }

    header a h2{
        font-size: 2em;
    }

    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }

    header i.fa-square{
        margin-left: auto;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;
    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 1.5em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }

    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{

    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 100%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        height: 100%;
        margin: 0 auto;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;

        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }
    /*
	footer{
		height: 5em;
		width: 100%;
		background-color: wheat;
		position: relative;
	}

	footer > nav{
		width: 100%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		box-sizing: border-box;
		text-align: center;
	}

	footer > nav > a{
		text-decoration: none;
		color: black;
		padding-right: 1em;
		font-size: 1.25em;
		text-transform: uppercase;
	}

	footer > nav > a:last-child{
		display: block;
		padding-right: 0;
		font-weight: bold;
	}
	*/
}

/* Styles for mobile screens */
@media only screen and (max-device-width: 540px) and (-webkit-min-device-pixel-ratio: 2) {
    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row > div.column{
        -ms-flex: 100%; /* IE10 */
        flex: 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		/*maybe flex-direction: row*/
    }

    main#gallery > section.picture-container,
    main#gallery > section.picture-container > img{
        width: 100%;
        height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		width: 50%;*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 90%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.hoverableImage > a{
        position: relative;
    }

    div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: 3em;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
	*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
        width: 80%;
        margin: 0 auto;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    article#explicitContentPopup > div > p{
        font-size: 2.5em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 1;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
        padding: .25em;
    }

    header > h2{
        display: table-cell;
        vertical-align: middle;
        font-size: 2em;
    }
    header > a{
        display: table-cell;
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 2.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i{
        font-size: 2em;
        cursor: pointer
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header button#menuButton i{
        font-size: 4em;
        margin-left: 1em;
        display: table-cell !important;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 4em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        min-height: 5em;
        height: 100%;
        width: 100%;
        position: relative;
        max-height: 10em;
    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
        text-align: center;
        font-size: 2em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        text-transform: uppercase;
        /*font-size: 2em;*/
    }

    footer > nav > a:last-child{

    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 100%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        height: auto;
        margin: 0 auto;
        width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;

        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }
}

@media only screen and (min-device-width: 540px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
    /*@media only screen and (min-device-width: 540px) and (min-width: 540px) and (orientation: landscape){*/
    .horizontalSliderFlex {
        margin-right: 1em;
        flex: 0 0 auto;
        height: 80vh;
        width: auto;
    }

    section#lobbyPictures > div.row{

        margin: 0 auto;
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row > div.column{
        -ms-flex: 40%; /* IE10 */
        flex: 40%;
        max-width: 49%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }



    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: auto;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 1.5em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{
        float: right;
        text-align: right;
        padding-right: 0;
    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 90%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }
}

/* Styles for tablets and small laptops */
@media only screen and (min-device-width: 540px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait){
    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        /* needs to be implemented*/
        width: 90%;
        margin: 0 auto;
    }

    div.row > div.column{
        -ms-flex: 100%; /* IE10 */
        flex: 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }



    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: 100%;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 1.5em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{

    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 100%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }
}

@media only screen and (min-device-width: 540px) and (min-width: 540px) and (orientation: portrait){
    .horizontalSliderFlex {
        margin-right: 1em;
        flex: 0 0 auto;
        height: 80vh;
        width: auto;
    }

    section#lobbyPictures > div.row{

        margin: 0 auto;
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row > div.column{
        -ms-flex: 40%; /* IE10 */
        flex: 40%;
        max-width: 49%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }



    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: 100%;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 1.5em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{

    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 90%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }
}

@media only screen and (min-device-width: 540px) and (min-width: 540px) and (orientation: landscape){
    .horizontalSliderFlex {
        margin-right: 1em;
        flex: 0 0 auto;
        height: 80vh;
        width: auto;
        max-width: 40%;
    }

    section#lobbyPictures > div.row{

        margin: 0 auto;
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row > div.column{
        -ms-flex: 40%; /* IE10 */
        flex: 40%;
        max-width: 49%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }



    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: auto;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 1.5em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{

    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 90%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        width: auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }
}

.video-container * {
    width: 30%;
    height: 33%;
}

header button#menuButton {
    color: black;
}

@media only screen and (min-device-width : 375px) and (orientation : portrait) {

    /* TODO: disgusting */
    .video-container.video {
        margin-bottom: 45em;
    }

    .video-container * {
        width: 100%;
        height: 50%;
    }

    div.row-portfolio {
        width: 90% !important;
        max-height: 50% !important;
    }

    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        /* needs to be implemented*/
        width: 90%;
        margin: 0 auto;
    }

    div.row > div.column{
        -ms-flex: 100%; /* IE10 */
        flex: 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }



    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: 100%;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
        height: auto;
        width: 100%;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.9);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 1.5em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        width: 100%;
        position: relative;
        max-height: unset;
        height: 60%;
    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.75em;
    }

    footer > nav > a:last-child{
        margin-top: 1em;
    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 100%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }

}

/*iphone landscape */
@media only screen and (min-device-width : 375px) and (orientation : landscape) {
    .horizontalSliderFlex {
        margin-right: 1em;
        flex: 0 0 auto;
        max-height: 80vh;
        width: auto;
        max-width: 40%;
    }

    section#lobbyPictures > div.row{
        margin: 0 auto;
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row > div.column{
        -ms-flex: 40%; /* IE10 */
        flex: 40%;
        max-width: 49%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }

    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: auto;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
        flex: 0 0 auto;
        max-height: 80vh;
        width: auto;
        max-width: 1000%;
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 1.5em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{

    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 90%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        width: auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }

}

@media only screen and (min-device-width : 768px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {

    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        /* needs to be implemented*/
        width: 90%;
        margin: 0 auto;
    }

    div.row > div.column{
        -ms-flex: 100%; /* IE10 */
        flex: 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }



    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: 100%;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;

        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 3em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{
        float: right;
        text-align: right;
        padding-right: 0;
    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 100%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }

}

/*iphone landscape */
@media only screen and (min-device-width : 768px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {
    .horizontalSliderFlex {
        margin-right: 1em;
        flex: 0 0 auto;
        max-height: 80vh;
        width: auto;
        max-width: 40%;
    }

    section#lobbyPictures > div.row{
        margin: 0 auto;
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row > div.column{
        -ms-flex: 40%; /* IE10 */
        flex: 40%;
        max-width: 49%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }

    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: auto;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 3em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{
        float: right;
        text-align: right;
        padding-right: 0;
    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 90%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        width: auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }

}


/* Styles for small monitors */
@media only screen and (min-device-width: 768px) and (min-width: 768px){
    /*div.row{
		display: -ms-flexbox; /* IE10 * /
		display: flex;
		-ms-flex-wrap: wrap; /* IE10 * /
		flex-wrap: wrap;
	}

	div.row > div.column{
		-ms-flex: 40%; /* IE10 * /
		flex: 40%;
		max-width: 49%;
		padding: 0 4px;
	}
		/*
	.gridView{
		-webkit-column-count:2;
		-webkit-column-gap:3em;
		-moz-column-count:2;
		-moz-column-gap:3em;
		column-count:2;
		column-gap:3em;
	}
	*/


    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        /* needs to be implemented*/
        width: 90%;
        margin: 0 auto;
    }

    div.row > div.column{
        -ms-flex: 100%; /* IE10 */
        flex: 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }



    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: 100%;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
        margin-right: 1em;
        flex: 0 0 auto;
        max-height: 80vh;
        width: auto;
        max-width: 1000%;

    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;

        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }


    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 3em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{
        float: right;
        text-align: right;
        padding-right: 0;
    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 100%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }


}

/*iphone landscape */
@media only screen and (min-device-width : 768px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {
    .horizontalSliderFlex {
        margin-right: 1em;
        flex: 0 0 auto;
        max-height: 80vh;
        width: auto;
        max-width: 40%;
    }

    section#lobbyPictures > div.row{
        margin: 0 auto;
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row > div.column{
        -ms-flex: 40%; /* IE10 */
        flex: 40%;
        max-width: 49%;
        padding: 0 4px;
    }

    main#gallery{
        min-height: 100%;
        margin: 0 3em 0;
    }

    /* horizontal scrolling */
    main#gallery > section.picture-container{
        /*display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		height: 100%;
		maybe flex-direction: row*/
    }

    main#gallery > section.picture-container.gridView,
    main#gallery > section.picture-container.slideView,
    main#gallery > section.picture-container.gridView > img
    main#gallery > section.picture-container.slideView > img{
        width: auto;
        /*height: 100%;/*also needed for horizontal scrolling*/
    }

    main#gallery > section.picture-container > img{
        /* horizontal scrolling * /
		margin-right: 1em;
		flex: 0 0 auto;
		/*width: 50%;* /
		margin-bottom: 1em;* /
		height: 90vh;
		width: auto;
		*/
    }

    main#contact {
        display: grid;
        min-height: 100%;
        width: 100%;
    }

    main#contact > section.contact-container{
        margin: auto;
    }

    main#contact > section.contact-container *{
        list-style-type: none;
        text-align: center;
    }

    section#openingSection{
        height: 100vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    section#openingSection > img{
        margin: auto;
        font-size: 4em;
        text-align: center;
    }

    section#openingSection > i{
        margin: 0 auto;
        font-size: 4em;
        text-align: center;
    }

    /*
	body {
		max-width: 100vw;
	}
	main {
		max-width: 100%;
		max-height: calc(100vh - 5em);
		overflow-y: hidden;
	}
	section#lobbyPicture, section.picture-container {
		width: 100%;
		height: calc(100vh - 5em);
	}
	*/
    section#lobbyPictures {
        line-height: 0;
        /*
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
*/
        width: 100%;
        margin: 3em auto 0;

        /* temp bg*/
        background-color: white;
    }

    div.row > div.column > div.hoverableImage > a{
        position: relative;
        display: block;
        z-index: 100;
        height: 100%;
    }

    div.row > div.column > div.hoverableImage > a > img {
        width: 100% !important;
        height: auto !important;
        cursor: pointer;
        margin-bottom: /*3em*/8px;
        /*
		opacity: 1;
		display: block;
		transition: .5s ease;
		*/
    }
    /*
	section#lobbyPictures > a:hover > img{
		opacity: 0.3;
	}


	section#lobbyPictures > a > div{
		transition: .5s ease;
		opacity: 0;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}


	section#lobbyPictures > a:hover > div {
		opacity: 1;
	}
	*/
    div.hoverableImage > a:nth-child(odd) > img {
        margin-bottom: 3em;
    }



    /*
	section#lobbyPictures > a{
		width: 33%;
	}


	.gridView{
		-webkit-column-count:1;
		-webkit-column-gap:3em;
		-moz-column-count:1;
		-moz-column-gap:3em;
		column-count:1;
		column-gap:3em;
	}
*/
    .slideView{
        display: grid;
        grid-template-columns: 100%;
    }

    section.picture-container {
        /*display: none;*/
    }
    /*
	main.page {
		margin-left: 16em;
	}
	*/
    article#explicitContentPopup {
        background-color: black/*rgba(0,0,0,0.90);*/;
        color: white;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
    }

    article#explicitContentPopup > div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    article#explicitContentPopup > div > p{
        font-size: 1.5em;
    }

    article#explicitContentPopup > div > form > button{
        font-size: 1.5em;
        margin-top: 1em;
    }
    a.enter {
        display: none;
    }
    a.selectedMenu {
        text-decoration: underline !important;
        text-decoration-color: #837D3C !important;
        color: #837D3C !important;
    }

    header{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: rgba(255,255,255,1.00);
        display: /*table*/flex;
        align-items: center;
        z-index: 101;
        display: table;
        padding: .75em;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    header *{
        display: inline-block;
    }

    header > h2{
        vertical-align: middle;
    }
    header > a{
        vertical-align: middle;
        text-decoration: none;
        color: black;
        height: 3em;
        display: flex;
        align-items: center;
    }

    header > a h2{
        font-size: 1.5em;
    }
    header button#menuButton{
        width: auto;
        height: 100%;
        background-color: transparent;
        border: none;
        float: right;
        cursor: pointer;
    }
    header i.fa-square{
        margin-left: auto;
    }

    header i.fa-square,
    header i.fa-th-large,
    header i.fa-ellipsis-h,
    header i.fa-bars{
        display: table-cell;
    }

    header i{
        font-size: 1.5em;
        cursor: pointer;
        margin-right: 1em;
        vertical-align: middle;
    }

    header button#menuButton i{
        font-size: 3em;
        margin-left: 1em;
    }

    header a > img{
        margin-right: 1em;
    }

    header i#close,
    header nav#overlay{
        display: none;

    }

    header i#close:before{
        padding-left: 10px;
        font-size:2em;
        color: black;
    }

    header #close{
        position:absolute;
        top:0px;
        right:20px;
        /*
		height:35px;
		width: 35px;
		border-radius:35px;
		border: 1px solid black;
		background-color:black;
		*/
        cursor: pointer;
        z-index: 100;

    }

    nav#overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 5em 5em;
        display: grid;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.8);
        overflow-y: scroll;
    }

    nav#overlay > ul{
        display: grid;
        margin: auto;
    }

    nav#overlay > ul > li{
        display: block;
        text-align: center;
        font-size: 3em;
        margin: auto;
    }

    nav#overlay > ul > a{
        text-decoration: none;
        display: inline-block;
    }


    footer{
        height: 5em;
        width: 100%;
        position: relative;

    }

    footer > nav{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        padding: 0 2.5em;
    }

    footer > nav > a{
        text-decoration: none;
        float: left;
        padding-right: 1em;
        text-transform: uppercase;
    }

    footer > nav > a:last-child{
        float: right;
        text-align: right;
        padding-right: 0;
    }
    ul.mbot {
        align-self: flex-end;
        margin: 0 !important;
    }
    ul.menu {
        margin: auto;
        list-style: none;
        width: 100%;
    }
    ul.mbot > li > a {
        color: #A29B4C;
    }
    ul.mbot > li {
        display: inline-block !important;
    }
    ul.mbot > li > a:visited {
        color: #A29B4C;
    }
    ul.mtop > li > a {
        text-decoration: none;
        font-size: 1.5em;
        color: #A29B4C;
    }
    ul.mtop > li > a.menuOption:hover {
        margin-left: 0.6em;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
        transition: margin-left 0.2s ease;
    }
    ul.menu > li {
        display: block;
    }
    ul.menu > li > a {
        display: inline-block;
    }

    main#gallery > div.spinner {
        width: 10em;
        height: 100vh;
        margin: 0 auto;
    }
    main#gallery > div.spinner > p,
    main#gallery > div.spinner > div {
        margin-top: 50vh;
    }
    main#gallery > div.spinner > p {
        font-size: 2em;
    }
    main#gallery > div.spinner > div {
        width: 0.4em;
        height: 0.4em;
    }

    /* Overlay */
    div.small-pictures {
        position: relative;
        margin-top: 3em;
        height: 90%;
    }
    div.small-pictures > img {
        width: 5em;
        height: auto;
        display: block;
    }
    img.small-pic {
        border: 2px transparent solid;
    }
    section.picture-overlay {
        /*display: none;*/
        height: 90vh;
        width: 100%;
        background-color: white;
    }

    section.picture-overlay > div#imageContainer{
        /* margin: 0 auto; */
        /* width: 100%; */
        display: grid;
        height: 90%;
    }

    section.picture-overlay > div#imageContainer > img.currentPic {
        /*
		height: 100%;
		margin: 0 auto;
		*/
        max-height: 100%;
        margin: 0 auto;
        width: auto;
        max-width: 100%;
    }

    .exit {
        float: right;
    }
    .arrow {
        position: relative;
        margin-top: 2.5em;
    }
    .selected {
        border: 2px black solid !important;
    }
    .stopscroll {
        height: 100%;
        overflow: hidden;
    }
    .arrow, .exit, .small-pic, .downarrow {
        cursor: pointer;
    }

    .spinner {
        margin: 100px auto 0;
        width: 10em;
        text-align: center;
    }
    .spinner > p, .spinner > div {
        display: inline-block;
    }
    .spinner > div {
        width: 0.2em;
        height: 0.2em;
        background-color: #333;

        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 3s infinite ease-in-out both;
        animation: sk-bouncedelay 3s infinite ease-in-out both;
    }

    nav#overlay > ul > li > a::after {
        content: "";
        display: block;
        width: 0;
        height: 2px;
        background: #000;
        transition: width .3s;
    }
    nav#overlay > ul > li > a.underline:hover::after {
        width: 100%;
    }
    main#contact > section.contact-container ul{
        font-size: 2em;
    }

    main#contact > section.contact-container a{
        text-decoration: none;
        color: black;
    }

}
/* Styles for normal monitors */
@media only screen and (min-device-width: 1024px) and (min-width: 1024px) {
    div.row{
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
    }

    div.row.video > div.column {
        max-width: initial;
    }
    div.row.video > div.column * {
        display: inline-block;
    }

    div.row > div.column{
        -ms-flex: 30%; /* IE10 */
        flex: 30%;
        max-width: 33%;
        padding: 0 4px;
    }
}

/* Styles for bigger monitors */
@media only screen and (min-device-width: 1200px) and (min-width: 1200px) {

}

/*main#gallery > section.picture-container{
	position: fixed;
}*/
/* Animations */


@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@-webkit-keyframes bounceUp {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-15px);
    }
    40% {
        transform: translateY(0);
    }
    60% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
div.row > div.hoverableImage,
div.row > div.hoverableImage > a img{
    transition: 500ms;
}
div.row > div.hoverableImage:hover > a img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: 500ms;
}

.downarrow {
    color: white;
}
.downarrow:hover {
    animation: bounceUp 1s;
}