@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;1,200;1,300&family=Oswald:wght@200;300;400;500&display=swap');
:root {
    --black: 14,14,14;
    --white: 255,255,255;
	--grey: 99,99,99;
	--blue: 37,166,252;
}
html,body {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	}
html {
	height: -webkit-fill-available;
	 -webkit-font-smoothing: antialiased;
	font-size: calc(16px + 1vw);
}
body {
	position:relative;
	text-align:center;
	background:rgb(var(--black));	
	color: rgb(var(--white));	
	font-weight: 200;
	font-family:'Montserrat', Arial, sans-serif;
	font-size: 1rem;
	line-height:1.3;
	}


*,
*::before,
*::after {
	-webkit-box-sizing: border-box;	
  			box-sizing: border-box;
}
img {
	width:100%;
	height:auto;
	max-width:100%;
}
a, a:hover {
	text-decoration:none;
	color:rgb(var(--grey));
}	
h1 {
	font-weight:500;
	font-family:'Oswald', 'Impact', sans-serif;
	color:rgb(var(--white));
	font-size:2.5rem;
	line-height:1;
	margin:0;
	
}
h2 {
	font-weight:300;
	font-family:'Montserrat', Arial, sans-serif;
	color:rgb(var(--grey));
	line-height:1;
	font-size:1.1rem;
	margin:0;
	text-transform:uppercase;
}
h3 {
	font-weight:600;
	font-family:'Montserrat', Arial, sans-serif;
	color:rgb(var(--white));
	line-height:1;
	font-size:.75rem;
	margin:1rem auto;
	text-transform:uppercase;
}
h4 {
	font-weight:200;
	font-family:'Montserrat', Arial, sans-serif;	
	color:rgb(var(--white));
	line-height:1;
	font-size:.6rem;
	margin:auto;
}
h5 {
	font-weight:500;
	font-family:'Oswald', 'Impact', sans-serif;
	color:rgb(var(--white));
	font-size:1.5rem;
	line-height:1;
	margin:0;
	text-transform:uppercase;
}
.grey {
	font-weight:400;
	color:rgb(var(--grey));
}
.yellow {
	color:#e9f434;
	font-weight:600;
}
footer h2 {
	/*font-weight:200;
	font-family:'Montserrat', Arial, sans-serif;
	color:rgb(var(--blue));*/
	font-weight:500;
	font-family:'Oswald', 'Impact', sans-serif;
	color:rgb(var(--white));
	line-height:1;
	font-size:1rem;
	margin:0 auto;
}
#main h1 {
	font-weight:700;
	font-family:'Oswald', 'Impact', sans-serif;
	font-style:italic;
	color:rgb(var(--blue));
	font-size:1.2rem;
	text-transform:uppercase;
	margin:auto;
	margin-bottom:.5rem;
}
#main p {
	font-size:.5rem;
	font-weight: 300;
}
p.bio {
	position:relative;
	float:left;
	clear:right;
	font-weight:300;
	font-family:'Montserrat', Arial, sans-serif;
	color:rgb(var(--white));
	line-height:1.35!important;
	font-size:.9rem!important;
	text-align:left;
	margin-top:0;
	padding-top:0;
}
.ita {
	font-style:italic;
}

body.sub #mast h1 {	
	font-size:1.8rem;	
}
body.sub #mast h2 {
	font-size:.9rem;
}
body.sub #main::before {
  content: "";
  position: absolute;
  top: 0; 
  bottom:0;
  left: 0;
  right:0;
  width: 100%; 
  height: 100%;
  background-image: url("img/bkg.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  
}
#main-inside {
	position:relative;
}
#content-title,
#content-title2 {
	display:block;
	position:relative;
	width:90%;
	padding:1rem;
	margin: 0 5%;
	background:rgb(var(--black));
	margin-bottom:2rem;	
}
#content-title2 {
	margin-top:2rem;
}
#bio-content {
	position:relative;
	float:left;
	clear:both;
	width:90%;
	padding:1rem;
	margin: 0 5%;
	background:rgb(var(--black));
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
	-webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
-ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
	gap:20px;
}
#con-content {
	position:relative;
	float:left;
	clear:both;
	width:90%;
	padding:1rem;
	margin: 0 5%;
	background:rgb(var(--black));
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	-webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
-ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
	gap:20px;
}
#content, 
#content3 {
	position:relative;
	width:90%;
	padding:1rem;
	margin: 0 5%;
	background:rgba(var(--black),0.9);
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
	-webkit-box-align: stretch;
    -ms-flex-align: stretch;
        align-items: stretch;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
	gap:10px;	
}
#content2 {
	position:relative;
	width:90%;
	padding:1rem;
	margin: 0 5%;
	background:rgba(var(--black),0.9);
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
        align-items: flex-start;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
	gap:10px;	
}
#content .whole, 
#portfolio .whole {
	position:relative;
	display:block;
	width:100%;	
	min-width:100%;
}
#portfolio .whole {
	padding-top:1rem;
	padding-bottom:1rem;
}
#content .full, 
#content3 .full {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 0 100%;
    flex:1 0 100%;
	height:0;
	padding-bottom:47.96212433%;
	overflow:hidden;
}
#content .half, 
#content3 .half {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 0 48%;
    flex:1 0 48%;
	height:0;
	padding-bottom:32%;
	overflow:hidden;
}
#render {
-webkit-box-flex:1;
    -ms-flex:1 0 100%;
    flex:1 0 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
        align-items: flex-start;
gap:20px;
}
#content .half.render {
	max-width:48%;
	padding-bottom:33%;
}
	
#content .third, 
#content3 .third {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 32%;
    flex:1 1 32%;
	height:0;
	padding-bottom:22%;
	overflow:hidden;
}
#content .fourth, 
#content3 .fourth {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 24%;
    flex:1 1 24%;
	height:0;
	padding-bottom:35.97777778%;
	overflow:hidden;
}
#content .fifth {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 19%;
    flex:1 1 19%;
	height:0;
	padding-bottom:12.666654%;
	overflow:hidden;
}
#content .fifth.costume {
	height:0;
	overflow:hidden;	
	padding-bottom:28.48240741%;
}
#content .fifth.process {
	height:0;
	overflow:hidden;	
	padding-bottom:14.25%;
}
#content .third.vert {
	height:0;
	overflow:hidden;	
	padding-bottom:42.56%;
}
#content2 .solo {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:0 1 50%;
    flex:0 1 50%;
	height:0;
	padding-bottom:33.3333334%;
	overflow:hidden;
}
#content .threefourths {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 75%;
    flex:1 1 75%;
	height:0;
	padding-bottom:50%;
	overflow:hidden;
}
#content .third img,
#content .half img,
#content .full img,
#content .fourth img,
#content .threefourths img,
#content .fifth img, 
#content3 .half img {
	position:absolute;
	width:100%;
	height:auto;
	top:0;
	bottom:0;
	max-width:none;
	left:50%;
	-webkit-transform:translatex(-50%);
    -ms-transform:translatex(-50%);
    transform:translatex(-50%);
	z-index:1;
}

#content .fourth img {
	position:absolute;
	width:auto;
	height:100%;
	top:0;
	bottom:0;
	max-width:none;
	left:50%;
	-webkit-transform:translatex(-50%);
    -ms-transform:translatex(-50%);
    transform:translatex(-50%);
	z-index:1;
}

#headshot {		
	-webkit-box-flex:0 1 26%;
    -ms-flex:0 1 26%;
        flex:0 1 26%; 
	max-width:25%;
}
p.bio {
	-webkit-box-flex:1;
    -ms-flex:1;
        flex:1;
}
header, section, footer {
	position:relative;
	float:left;
	clear:both;
	width:100%;
	height:auto;
}

header {
	padding:1rem;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
	-webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
	
}
body.sub header {
	padding:1rem;
}
#logo {
	position:relative;
	-webkit-box-flex:1;
       -ms-flex:0 0 12%;
           flex:0 0 12%;
	
}
body.sub #logo {
	-webkit-box-flex:1;
       -ms-flex:0 0 8%;
           flex:0 0 8%;
}
#logo img {
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	height:auto;
	-webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}
#mast {
	-webkit-box-flex:1;
       -ms-flex:1 0 auto;
           flex:1 0 auto;	
	text-align:left;
	padding-left:.75rem;
	
}
nav {
	position:relative;
	-webkit-box-flex:1;
       -ms-flex:1 0 8%;
           flex:1 0 8%;	
}
#menu-toggle {
  display: block;
  height: 100%;
  width: 60px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position:absolute;
  right:0;
  top:50%;
  z-index:6000;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: rgb(var(--white));
  position: absolute;
  height: 4px;
  width: 60px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -12px;
}

.menu-button::after {
  content: '';
  margin-top: 12px;
}

#menu-toggle.sprung .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle.sprung .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle.sprung .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}
#main {
	padding:3rem 1rem;
}
body.sub #main {
	padding:1rem;
}
#portfolio {
	padding:1rem;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
	-webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
	gap:10px;	
}
.thumb {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 32%;
    flex:1 1 32%;
	height:0;
	padding-bottom:25.3846%;
	overflow:hidden;
	border:1px solid rgba(var(--blue),0.5);
}

.thumb a img{
	position:absolute;
	width:auto;
	height:100%;
	top:0;
	bottom:0;
	max-width:none;
	left:50%;
	-webkit-transform:translatex(-50%);
    -ms-transform:translatex(-50%);
    transform:translatex(-50%);
	z-index:1;
}
.overtitle {
	position:absolute;
	top:50%;
	left:50%;
	width:0;
	height:0;
	background:rgba(39,82,114,0.5);
	z-index:2;
	pointer-events: none; 
	-webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.thumb:hover > .overtitle, 
.thumb:focus > .overtitle, 
.thumb:active > .overtitle {
	top:10px;
	left:10px;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
}
.overtitle span {
	position:absolute;
	bottom:2rem;
	left:0;
	width:100%;
	height:auto;
	text-align:center;
	font-weight: 300;
	font-family:'Oswald', 'Impact', sans-serif;
	padding:.75rem 1rem;
	background:rgba(var(--blue),0.4);
	visibility:hidden;
}
.thumb:hover > .overtitle span, 
.thumb:focus > .overtitle span, 
.thumb:active > .overtitle span {
	visibility:visible;
	
}

footer {
	padding:2rem;
}
#ftlinks {
	position:relative;
	width:50%;
	margin: 0 25%;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
	gap:10px;	
	
}

p.large {
	line-height:1.35!important;
	font-size:.9rem!important;
	text-align:center;
	
}
#ftlinks a {
	display:inline-block;
	padding:.5rem;
	color:rgb(var(--white));
	font-size:.5rem;
	-webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
#ftlinks a:hover {
	color:rgb(var(--grey));
	background:rgba(var(--grey),0.2);
}
#overlay {
	position:fixed;
	top:50%;
	right:50%;
	width:0;
	height:0;
	text-align:center;
	padding:3rem;
	background:rgb(var(--blue));
	display:block;
	z-index:100;
	visibility:hidden;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
	transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	}
#overlay.sprung {
	position:fixed;
	top:0;
	right:0;
	width:100%;
	height:100%;
	display:block;
	visibility:visible;
	border:3px solid rgb(var(--grey)); 
	display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
       -ms-flex-align:center;
           align-items:center;
    -webkit-box-pack:center;
       -ms-flex-pack:center;
           justify-content:center;
	}
#mainmenu {
	position:absolute;
	top:50%;
	left:50%;
	width:15%;
	height:auto;
	text-align:center;
	-webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);	
}
#mainmenu img {
	display:block;
	position: relative;
	width:100%;
	max-width:400px;
	height:auto;
	z-index:200;
	margin:0;	
	}
#pop-menu {
	flex:1;
	list-style-type:none;
	position:relative;
	max-width:400px;
	height:auto;	
	padding:0;
	margin:0;
	z-index:200;
	}
#pop-menu li {
	display:block;
	width:100%;
	height:auto;
	float:left;
	clear:both;
	text-align:center;
	margin:.25rem 0;
	padding:0;	
	}	
#pop-menu li a {
	font-size:1rem;
	color:rgb(var(--white));	
	padding:.2rem;
	-webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

#pop-menu li:hover a {
	color:rgb(var(--grey));
	background:rgba(var(--black),0.2);
}
#pop-menu li img {
	width:70%;
	margin-left:15%;
	margin-right:15%;
}
/*/////////////////////////LIGHTBOX OVERRIDES ////////////////////*/

.sl-overlay {
  background: #000;  
}
.sl-wrapper .sl-close,
.sl-wrapper .sl-counter,
.sl-wrapper .sl-download,
.sl-wrapper .sl-download a,
.sl-wrapper .sl-navigation button {
  color: rgb(37,166,252);
}
.sl-spinner {
  border: 5px solid rgb(99,99,99);
}
.sl-wrapper .sl-image {
  border:5px solid #e9f434;
}
/*/////////////////////////MEDIA QUERIES  ////////////////////*/


@media (max-width: 1024px) {
header {padding:1rem 1rem;}
body.sub header {padding:1rem 1rem;}
#main {
	padding:3rem 1rem 2rem;
}
#portfolio {
	padding:1rem;
}
#logo {
	position:relative;
	-webkit-box-flex:1;
       -ms-flex:0 0 12%;
           flex:0 0 12%;
	
}
body.sub #logo {
	-webkit-box-flex:1;
       -ms-flex:0 0 8%;
           flex:0 0 8%;
}

h2,
body.sub #mast h2	{	
	font-size:.8rem;
	padding-top:.15rem;
}

#menu-toggle {
  width: 40px;
}

.menu-button,
.menu-button::before,
.menu-button::after {
   width: 40px;
}
#mainmenu {
	width:20%;
}
}




@media (max-width: 800px) {
.thumb,
#content .third {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 48%;
    flex:1 1 48%;
	height:0;
	padding-bottom:32%;
}
#content .fifth.costume {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 48%;
    flex:1 1 48%;
	height:0;
	padding-bottom:71.955556%;	
	}
#content .fifth.process {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 48%;
    flex:1 1 48%;
	height:0;
	padding-bottom:36%;	
	}
#content .fifth.process:last-of-type {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
	height:0;
	padding-bottom:75%;	
	}
#content .third.last {
	position:relative;
	width:100%;
	-webkit-box-flex:1;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
	height:0;	
	padding-bottom:66.6667%;
}
#content .third.vert {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 48%;
    flex:1 1 48%;
	height:0;
	padding-bottom:63.84%;
}
#content .third.vert:last-of-type {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
	height:0;
	padding-bottom:133%;
}
#content2 .solo {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
	height:0;
	padding-bottom:66.66667%;
	overflow:hidden;
}
#logo {
	position:relative;
	-webkit-box-flex:1;
       -ms-flex:0 0 20%;
           flex:0 0 20%;
	
}
body.sub #logo {
	-webkit-box-flex:1;
       -ms-flex:0 0 20%;
           flex:0 0 20%;
}
h1 {	
	font-size:2rem;
}
h2 {	
	font-size:.75rem;
}
body.sub #mast h1 {	
	font-size:1.8rem;	
}
body.sub #mast h2 {
	font-size:.75rem;
}
#menu-toggle {
	top:1rem;
	}
footer {
	padding:1rem;
}
#mainmenu {
	width:25%;
}
#ftlinks {
	width:80%;
	margin: 0 10%;	
}
#content,
#content2 {
	width:98%;
	margin: 0 1%;
	}
#content-title,
#content-title2 {
	width:98%;
	margin: 0 1%;
	margin-bottom:1rem;	
}
#content-title2 {
	margin-top:2rem;
}
#bio-content {
	width:96%;
	margin: 0 2%;
}
}




@media (max-width: 600px) {
#bio-content {
-webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
#headshot {		
	-webkit-box-flex:0 0 100%;
    -ms-flex:0 0 100%;
        flex:0 0 100%; 
}
}




@media (max-width: 480px) {
#mainmenu {
	position:absolute;
	top:0;
	left:4%;
	width:92%;
	height:auto;
	text-align:center;
	-webkit-transform:translate(0%,0%);
    -ms-transform:translate(0%,0%);
    transform:translate(0%,0%);	
}
#mainmenu img {
	position:relative;
	max-width:200px;
	margin:0 auto;
	}	
#portfolio {
	width:100%;
	-webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;	
}
.thumb {
	position:relative;
	width:100%;
	-webkit-box-flex:1;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
	height:0;
	padding-bottom:76.9230%;
}
#content .third,
#content .half {
	position:relative;
	width:100%;
	-webkit-box-flex:1;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
	height:0;
	padding-bottom:66.67%;
}
#content .third.vert {	
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
	height:0;
	padding-bottom:133%;
}
#content .fifth.process {
	position:relative;
	-webkit-box-flex:1;
    -ms-flex:1 1 100%;
    flex:1 1 100%;
	height:0;
	padding-bottom:75%;
}
h1 {	
	font-size:1.6rem;
}
h2 {	
	font-size:.55rem;
	margin-top:.25rem;
}
body.sub #mast h1 {	
	font-size:1.6rem;	
}
body.sub #mast h2 {
	font-size:.55rem;
	margin-top:.25rem;
}
#pop-menu li a {
	font-size:2rem;
}
.overtitle,
.thumb:hover > .overtitle, 
.thumb:focus > .overtitle, 
.thumb:active > .overtitle {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(39,82,114,0.1);
	z-index:2;
	pointer-events: none; 
	-webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.overtitle span {
	position:absolute;
	bottom:2rem;
	left:0;
	width:100%;
	height:auto;
	text-align:center;
	font-weight: 300;
	font-family:'Oswald', 'Impact', sans-serif;
	padding:.75rem 1rem;
	background:rgba(var(--blue),0.4);
	visibility:visible;
}

}