@charset "UTF-8";
*, *:before, *:after { -ms-box-sizing: border-box; box-sizing: border-box; }
:root { font-size: calc(16px + (24 - 12) * ((100vw - 400px) / (1140 - 400))); }
/*:root { font-size: 16px; font-size: calc(.875rem + 1vw); text-rendering: optimizeLegibility; }*/
/*:root { font-size: calc(16px + ((16 - 12) * (100vw - 400px) / (1200 - 400))); }*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html, body { height: 100%!important; margin: 0; padding: 0; }
body { font-family: 'open_sanslight'; font-size: 100%; height: 100%!important; -webkit-font-smoothing: antialiased; background-image: radial-gradient(circle at left top, #888, #444, #444, #000); background-attachment: fixed; background-size: cover; color: #FFF; letter-spacing: 0.0725em; overflow-y: scroll; overflow-x: hidden; padding: 0; margin: 0; }

:root { 
	--pink: '217, 0, 115';
	--green: '164, 196, 0';
	--blue: '106, 0, 255';
	--orange: '251, 106, 1';
	--accent: rgba(96, 1, 12, 0.5);
	--accent75: rgba(96, 1, 12, 0.75);
}

main { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: 100%; min-height: 100vh; }
aside { flex: 0 0 20%; min-height: 100vh; padding: 0 0.25em 0.25em 0.25em; background: rgba(0, 0, 0, 0.5); border: none; border-right: 1px solid #191919; text-align: center; }
section { flex: 0 0 80%; }
footer { display: block; margin: 0; padding: 0.5em 0; background-color: #191919; }
footer p { font-size: 0.5em!important; }

nav.nav-visible { display: block; }
/*nav { position: sticky; top: 12px; }*/

.current { margin-top: 0.25em; margin-bottom: 0.25em; font-weight: 700; background-color: var(--accent); }

/*.show { padding: 0 0 1em 0; }*/
/*.show > iframe { margin: 0 auto; width: 88%; display: block; }*/
/*.show > div { width: 96%; margin: 0 auto; }*/
/*.inner { width: 96%; margin: 0 auto; display: block; }*/

.show { height: 10rem; }
iframe { display: block; width: 100%; height: 100%; }

.grid:before, .grid:after { content: ''; display: table; }
.grid:after { clear: both; }
.grid { display: flex; flex-flow: row wrap; align-items: stretch; }
[class*="column--"] { flex-grow: 0; flex-shrink: 1; vertical-align: bottom; padding: 0.125rem 0.25rem; position: relative; }
.column--full { min-width: 100%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--half { min-width: 50%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--one-fifth { min-width: 20%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--two-fifth { min-width: 40%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--three-fifth { min-width: 60%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--four-fifth { min-width: 80%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--quarter { min-width: 25%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--third { min-width: 33.3333%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--three-quarter { min-width: 75%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }
.column--two-third { min-width: 66.6666%; max-width: 100%; flex-basis: calc((600px - 100%) * 600); }

h1 { position: relative; letter-spacing: 0.125em; display: block; margin: 1em 0.5em; padding: 0; text-align: center; font-size: 0.75em; text-transform: uppercase; color: #FFF; }
h1:after { content: ''; position: absolute; top: -0.25em; left: 0; display: block; width: 100%; height: 1px; background: #FFF; }
h1:before { content: ''; position: absolute; bottom: -0.33em; left: 0; display: block; width: 100%; height: 1px; background: #FFF; }

h2 { position: absolute; top: 50%; left: 0; padding: 0; text-align: center; font-size: 1em; width: 100%; height: 2rem; line-height: 2rem; margin: -1.5rem 0 0 0; text-transform: uppercase; color: #FFF; opacity: 0; transform: scale(150%); background-image: linear-gradient(to right, rgba(79, 5, 40, 0.75) 50%, transparent 50%); background-position: right top; background-size: 200% 100%; transition: transform 0.5s, opacity 0.5s, background-position 0.5s; }
.image:hover h2 { transform: scale(100%); opacity: 1.0; background-position: left top; }

/*h2:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px; background-image: linear-gradient(to bottom, #FFF, #000); opacity: 0; transform: translateY(-2em); transition: opacity 0.25s, transform 0.5s; }*/
/*h2:before { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 2px; background-image: linear-gradient(to bottom, #FFF, #000); opacity: 0; transform: translateY(2em); transition: opacity 0.25s, transform 0.25s; }*/
h6 { font-size: 0.75em; margin: 0; padding: 0; }

/*.image:hover h2:after { transform: translateY(-0.25em); opacity: 1.0; }
.image:hover h2:before { transform: translateY(0.33em); opacity: 1.0; }*/

footer a { color: #FFF; text-decoration: none; }

p { font-family: 'open_sanslight'; font-weight: 400; display: block; margin: 1em 0; padding: 0; text-align: left; line-height: 1.33em; font-size: 0.6em; color: rgba(255, 255, 255, 0.825); letter-spacing: 0.2em; }

input[type="text"], textarea { border: 1px solid #AAAAAA; background: #FFFFFF; color: #444; padding: 8px 12px; font-size: 100%; margin: 0.25em 0 0.5em 0; display:block; width: 100%; }
input[type="submit"] { border: 1px solid #444; background: #C68E17; color: #FFF; font-weight: 700; font-size: 0.75em; padding: 4px 12px; margin: 0; display: block; width: 90%; }

ul#nav-items { opacity: 1; visibility: visible; display: block; width: 100%; list-style: none; margin: 0; padding: 0; }
ul#nav-items li { display: block; width: 100%; text-align: center; margin: 0 0 0.25em 0; padding: 0; }
ul#nav-items li a { color: #FFF; width: 100%; display: block; padding: 0.25em 0; text-decoration: none; font-size: 0.5em; text-transform: uppercase; transition: background 0.25s; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); }
ul#nav-items li a:hover { background: rgba(255, 255, 255, 0.1); }
ul#nav-items li:first-child a { line-height: 1.25; }
ul#nav-items li:first-child a > span { display: block; background: rgba(0, 0, 0, 0.5); font-size: 0.6em; padding: 3px 6px; }
/*ul#nav-items li:first-child a { position: relative; }
*/

/*ul#nav-items { opacity: 1; display: grid; grid-template-columns: 1fr; }
ul#nav-items { opacity: 1; visibility: visible; margin: 0.5em auto; padding: 0; list-style: none; }
ul#nav-items li { display: block; width: 100%; text-align: center; margin: 0 0 0.25em 0; padding: 0; }
ul#nav-items li a { display: block; color: #FFF; padding: 0.25em 0; text-decoration: none; font-size: 0.5em; text-transform: uppercase; transition: background 0.25s; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); }
ul#nav-items li a:hover { background: rgba(255, 255, 255, 0.1); }
ul#nav-items li:first-child { height: 4em; }
ul#nav-items li:first-child > a { height: 80%; background-image: url(/weddings-discover-your-dream-torrin-photography/thumb.png); background-repeat: no-repeat; background-position: center top; background-size: contain; }*/

.flexbin { display: flex; overflow: hidden; flex-wrap: wrap; margin: -0.5em; }
.flexbin:after { content: ""; flex-grow: 999999999; min-width: 8em; height: 0; }
.flexbin > * { position: relative; display: block; height: 10em; margin: 0.5em; flex-grow: 1; }
.flexbin > * > img { height: 10em; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; }
.flexbin.flexbin-margin { margin: 0.5em; }

@media (max-width: 980px) {
	.flexbin { display: flex; overflow: hidden; flex-wrap: wrap; margin: -0.5em; }
	.flexbin:after { content: ""; flex-grow: 999999999; min-width: 6em; height: 0; }
  .flexbin > * { position: relative; display: block; height: 8em; margin: 0.5em; flex-grow: 1; }
  .flexbin > * > img { height: 8em; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; }
  .flexbin.flexbin-margin { margin: 0.5em; }
}

@media (max-width: 400px) {
	.flexbin { display: flex; overflow: hidden; flex-wrap: wrap; margin: -1em; }
	.flexbin:after { content: ""; flex-grow: 999999999; min-width: 6em; height: 0; }
	.flexbin > * { position: relative; display: block; height: 10em; margin: 1em; flex-grow: 1; }
	.flexbin > * > img { height: 10em; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; }
	.flexbin.flexbin-margin { margin: 1em; }
}

#overlay { opacity: 1; visibility: visible; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); transition: opacity 0.25s, visibility 0.25s; z-index: 5000; }
#overlay:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(-72deg, transparent, rgba(32, 32, 32, 0.2), transparent, transparent, rgba(40, 40, 40, 0.3), transparent, transparent, transparent); -webkit-animation: shine 2500ms linear infinite; animation: shine 2500ms linear infinite; }
#overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 75%; max-height: 75%; }

/*a.magazine { display: block; margin: 0 auto 0.25em auto; }
a.magazine img { margin: 0 auto; display: block; max-width: 90%; max-height: 90%; object-fit: contain; }*/

a#site-title { display: block; width: 96%; height: 3em; margin: 0 auto; background: url('/images/logo_red_medium.png') no-repeat center center; background-size: contain; }

#menuButton { display: none; position: fixed; top: 1em; left: 0.5em; width: 3em; height: 3em; line-height: 3em; max-width: 3em; max-height: 3em; padding: 0; background: rgba(0, 0, 0, 0.5) url('/images/btn.png') no-repeat center center; background-size: contain; border: 1px solid rgba(0, 0, 0, 0.85); text-align: center; z-index: 1000; cursor: pointer; }
/*#menuButton:before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2em; height: 2em; background: linear-gradient(to bottom, #FFF, #FFF 20%, transparent 20%, transparent 40%, #FFF 40%, #FFF 60%, transparent 60%, transparent 80%, #FFF 80%, #FFF 100%); }*/
/*#menuButton:before { content: ''; position: absolute; top: 0.5em; right: 0.5em; bottom: 0.5em; left: 0.5em; background-image: linear-gradient(to bottom, transparent 0em, transparent 1em, #FFF 1em, #FFF 2em, transparent 2em, transparent 3em, #FFF 3em, #FFF 4em, transparent 4em); }*/
/*#menuButton:hover, #menuButton:active { background: rgba(0, 0, 0, 0.98); }*/
#menuButton span { /*display: block; width: 100%; height: 100%;*/ /* background-repeat: no-repeat; background-position: center center; background-size: contain;*/ }
/*#menuButton span:nth-of-type(1) { background-image: url('/images/nav-hamburger.png'); display: block; }
#menuButton span:nth-of-type(2) { background-image: url('/images/nav-close.png'); display: none; }
#menuButton.nav-close span:nth-of-type(1) { display: none; }
#menuButton.nav-close span:nth-of-type(2) { display: block; }*/

.gallery_title { width: 96%; max-width: 1140px; margin: 0.5em auto; }
.gallery_title > h3 { position: relative; letter-spacing: 0.2em; display: block; margin: 0 0 0.25em 0; padding: 0.25em 0; font-size: 0.75em; text-transform: uppercase; color: #FFF; text-shadow: 0px 2px 2px #000; }
.gallery_title > p { letter-spacing: 0.2em; display: block; margin: 0 0 0.25em 0; padding: 0.25em 0; font-size: 0.75em; color: #FFF; text-shadow: 0px 2px 1px #000; }

.gallery { display: -ms-grid; display: grid; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); grid-auto-rows: 8em; grid-gap: 0.5em; margin: 0.5em; overflow: hidden; }
.gallery .image, .gallery .title { background-color: rgba(0, 0, 0, 0.25); text-decoration: none; border: 0; outline: 0; border: none; outline: none; grid-area: span 1/span 1; position: relative; overflow: hidden!important; }
/*.gallery .image:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.gallery .image:hover:before {  background-image: linear-gradient(-72deg, transparent, transparent, rgba(255, 255, 255, 0.25), transparent, transparent, transparent); -webkit-animation: shine 2s linear 1 forwards; animation: shine 2s linear 1 forwards; }*/

.gallery .image--horizontal { grid-area: span 1/span 2; }
.gallery .image--vertical { grid-area: span 2/span 1; }
.gallery .image--horizontal-lg { grid-area: span 1/span 3; }
.gallery .image--vertical-lg { grid-area: span 3/span 1; }
.gallery .image--big { grid-area: span 2/span 2; }
.gallery .image img { opacity: 0; visibility: hidden; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: opacity 0.25s, visibility 0.25s, transform 0.5s; z-index: 1000; }

/*.gallery:hover > .image { opacity: 0.25;*/ /*-webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9);*/ /*-webkit-box-shadow: none; box-shadow: none; -webkit-transition: opacity 0.25s, -webkit-transform 0.25s; transition: opacity 0.25s, -webkit-transform 0.25s; -o-transition: opacity 0.25s, transform 0.25s; transition: opacity 0.25s, transform 0.25s; transition: opacity 0.25s, transform 0.25s, -webkit-transform 0.25s;*/ /*}*/
.gallery:hover > .image:hover { /*-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1.25);*/ opacity: 1; }
.gallery:hover > .image:hover > img { transform: scale(1.25); }

/* --- Refined Grid Layout ------------------------------------------------- */
/*.gallery { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill, minmax(31%, 1fr)); grid-auto-rows: 8em; grid-gap: 0.5em; margin: 0.5em; }
.gallery .image, .gallery .title { background-color: rgba(0, 0, 0, 0.125); text-decoration: none; border: 0; outline: 0; border: none; outline: none; grid-area: span 1/span 1; position: relative; overflow: hidden; }
.gallery .image--horizontal { grid-area: span 1/span 2; }
.gallery .image--vertical { grid-area: span 2/span 1; }
.gallery .image--horizontal-lg { grid-area: span 1/span 3; }
.gallery .image--vertical-lg { grid-area: span 3/span 1; }
.gallery .image--big { grid-area: span 2/span 2; }
.gallery .image img { display: none; width: 100%; height: 100%; object-fit: cover; }
.gallery:hover > .image { opacity: 0.25; transform: scale(.9); box-shadow: none; transition: opacity 0.25s, transform 0.25s; }
.gallery:hover > .image:hover { transform: scale(1); opacity: 1; }*/
/* ------------------------------------------------------------------------- */

.loader, .loader:after { border-radius: 50%; width: 2em; height: 2em; z-index: -1; }
.loader { position: absolute; top: 50%; left: 50%; margin-top: -1em; margin-left: -1em; text-indent: -9999rem; border: 0.25em solid rgba(255, 255, 255, 0.2); border-left: 0.25em solid #ffffff; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; }
.loader--xs { width: 1rem; height: 1rem; border-width: 0.125rem; -webkit-animation: spin 0.5s infinite linear; animation: spin 0.5s infinite linear; }
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* --- Pure CSS Carousel --------------------------------------------------- */
.carousel { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(to bottom, #222 60%, #111 75%, #000 90%); }
.carousel > div { position: relative; width: 100%; height: 100%; overflow: hidden; }
.carousel > div:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; }
.carousel > div img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; display: block; object-fit: contain; background-color: rgba(0, 0, 0, 0.25); z-index: 100; /*box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);*/ }
/*.carousel > div > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1em; height: 1em; background: #F00; border-radius: 100%; z-index: 1000; }*/
.carousel	input { position: absolute; z-index: 3; margin: 0; background: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transform: translateY(-50%); top: 50%; width: 48px; height: 48px; left: 0.5em; }
.carousel input:before { position: absolute; content: ""; background-image: url('/images/prev.svg'); }
.carousel input:checked ~ input:before { content: ""; background-image: url('/images/next.svg'); }
.carousel input:checked { display: none; }
.carousel input:checked ~ input { right: 0; left: auto; }
.carousel input:checked + div + input { z-index: 4; }
.carousel input + div { position: absolute; z-index: 1; }  
.carousel input:checked + div { z-index: 2; }
.carousel input:checked ~ input { right: 2em; }
.carousel input:before { background-color: rgba(0, 0, 0, 0.0); background-repeat: no-repeat; background-position: center center; background-size: 1.75em; border-radius: 50%; color: #333; width: 5em; height: 5em; line-height: 5em; text-align: center; border: none; cursor: pointer; }
/*.carousel input:hover:before { background-color: rgba(255, 255, 255, 0.1); }*/
.carousel input:focus:before, .carousel input:active:before { background-color: var(--accent75); }
#test1 input + div { transform: translate3d(-100%, 0, 0); transition: transform .5s ease-in-out; }
#test1 input:checked + div { transform: translate3d(0, 0, 0); }
#test1 input:checked + div ~ div { transform: translate3d(100%, 0, 0); }
/* ------------------------------------------------------------------------- */

#back-to-top { position: fixed; bottom: 1em; left: 1em; right: 1em; z-index: 2000; opacity: 0; visibility: hidden; }
#back-to-top:active { background-color: #555; }
#back-to-top.in_use { opacity: 1; visibility: visible; }

.grid--container { display: flex; flex-flow: row wrap; align-items: center; width: 100%; }
.grid--container > .grid--item { flex: 0 1 32%; padding: 0; position: relative; }
.grid--container > .grid--item > a { display: block; padding: 0.25em 0.33em; }
.grid--container > .grid--item > a > img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.grid--container > .grid--item:hover > .pager { background: #000; color: #FFF; }
.pager { display: block; position: absolute; bottom: 0.5em; left: 50%; background: rgba(0, 0, 0, 0.85); color: rgba(255, 255, 255, 0.85); transform: translateX(-50%); font-size: 0.625em; text-align: center; padding: 0.25em 2em 0.33em 2em; border-radius: 0.25em; z-index: 100; }

.backBtn { position: absolute; top: 1em; right: 1em; font-size: 0.625em; z-index: 100; background: #333 url('/images/prev.svg') no-repeat left center; background-size: 1em 1em; color: #FFF; border-left: 5px solid #333; text-decoration: none; padding: 0.5em 0.75em 0.5em 1.25em; }

*::-webkit-input-placeholder { color: #555; }
*:-moz-placeholder { /* FF 4-18 */ color: #555; }
*::-moz-placeholder { /* FF 19+ */ color: #555; }

/* --- Flexbox Grid -------------------------------------------------------- */
.row:before, .row:after { content: ''; display: table; }
.row:after { clear: both; }
.row { display: flex; flex-flow: row wrap; width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }
.row.limit { width: 96%!important; max-width: 1140px!important; }
[class*="col-"] { flex: 0; text-align: left; }
.push-left { margin-right: 0.5em !important; }
.col-1of12 { flex-basis: calc((1/12) * 100%); }
.col-2of12 { flex-basis: calc((2/12) * 100%); }
.col-3of12 { flex-basis: calc((3/12) * 100%); }
.col-4of12 { flex-basis: calc((4/12) * 100%); }
.col-5of12 { flex-basis: calc((5/12) * 100%); }
.col-6of12 { flex-basis: calc((6/12) * 100%); }
.col-7of12 { flex-basis: calc((7/12) * 100%); }
.col-8of12 { flex-basis: calc((8/12) * 100%); }
.col-9of12 { flex-basis: calc((9/12) * 100%); }
.col-10of12 { flex-basis: calc((10/12) * 100%); }
.col-11of12 { flex-basis: calc((11/12) * 100%); }
.col-12of12 { flex-basis: calc((12/12) * 100%); }
/* ------------------------------------------------------------------------- */

.placeholder { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 400px; height: 250px; background-color: #ccc; overflow: hidden; }
.placeholder:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background-image: linear-gradient(90deg, #ccc, #e6e6e6, #ccc); -webkit-animation: shine 2500ms linear infinite; animation: shine 2500ms linear infinite; }
@-webkit-keyframes shine {
	0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
	100% { -webkit-transform: translateX(200%); transform: translateX(200%); }
}
@keyframes shine {
	0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
	100% { -webkit-transform: translateX(200%); transform: translateX(200%); }
}

@media (max-width: 900px) { 
	main { display: block; /*flex-wrap: wrap;*/ }
	aside { display: block; height: 3.5em; max-height: 3.5em; min-height: 3.5em; }
	aside, section { display: block; /*flex: 1 1 100%!important;*/ }
	section { height: calc(100% - 4em); }
	/*.gallery { grid-auto-rows: 6em; grid-gap: 0.25em; margin: 0.25em; }*/
	.gallery_title p { font-size: 0.9em; margin: 0; }
	p { font-size: 1em; }
	.carousel { top: 0; }
	a#site-title { height: 100%; }
	.backBtn { top: 0.5em; right: 0.5em; font-size: 0.75em; padding: 0.75em 1em; }
	nav { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1000; margin: 0; background: rgba(0, 0, 0, 0.95); } 
	ul#nav-items { margin-top: 2em; height: 96%; }
	ul#nav-items li:not(:first-of-type) { display: inline-block!important; width: 48%!important; text-align: center; margin: 0 0 0.25em 0; padding: 5px 0; font-size: 1.25em; }
	ul#nav-items li:first-child a img { height: 8em!important; }	
	ul#nav-items li:first-child a span { display: none; font-size: 1.25em; }
	/*ul#nav-items li:first-child a img { height: 12em; }*/
	#menuButton { display: block; /*top: 0.625em; width: 4em; height: 4em;*/ }
	[class*="col-"] { flex-basis: 100%!important; flex: 1; }
}

/* Mobile in Portrait */
@media (max-width: 400px) { 
	.grid--container .grid--item { flex: 0 1 48%!important; }
	.pager { font-size: 1em; }
	footer p { font-size: 1em!important; text-align: center; }
	footer [class*="col-"] { flex-basis: calc((12/12) * 100%); text-align: center; }
	.gallery { grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); grid-auto-rows: 9em; grid-gap: 0.75em; margin: 0.5em; }
	#menuButton { display: block; /*top: 0.86em; width: 4em; height: 4em;*/ }
	.backBtn { top: 0.5em; right: 0.5em; font-size: 1em; padding: 1em 1.25em 1em 2em; }
	main { display: block; }
	aside { display: block; height: 5em; max-height: 5em; min-height: 5em; }
	section { display: block; }
	nav { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1000; margin: 0; background: rgba(0, 0, 0, 0.95); } 
	ul#nav-items { margin-top: 2em; height: 96%; }
	ul#nav-items li:not(:first-child) a { font-size: 0.8em; }
	ul#nav-items li:first-child a span { display: none; font-size: 1.25em; }
	ul#nav-items li:first-child a img { height: 12em!important; }
}