/*
Theme Name: Matthew Broerman Art v1
*/
/*
@font-face {
  font-family: "Metropolis Regular";
  src: url("fonts/Metropolis-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis Regular";
  src: url("fonts/Metropolis-Medium.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
*/
/*
:focus, :active {  
    outline: none;
} 
*/
:root {
	--nav-width: 300px;
	--edge-padding: 45px;
	--grid-gap: 20px;
}
@media (max-width: 1080px) {
	:root {
		--edge-padding: 35px;
	}
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;	/* sets em */
	line-height: 1.55;
	letter-spacing: 0.01em;
	color: #777777;
	font-weight: 400;
	word-break: break-word;
	scrollbar-gutter: stable;
	text-underline-offset: 1px;
	
	border: none;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: none;
	-webkit-overflow-scrolling: touch;
	-webkit-appearance: none;
	-moz-appearance: none;
    appearance: none; 
}
body {
	overflow-x: hidden;
	overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto' sans-serif;;
	margin: 0;
	padding: 0;
	color: #000000;
	font-weight: 500;
}
h1 {
	font-size: 32px;
	line-height: 1.3;
	margin-bottom: 30px;
}
h2 {
	font-size: 18px;
	margin-bottom: 25px;
	line-height: 1.4;
	letter-spacing: 0.14em;
}
h3 {
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
a, a:visited, a:active {
    color: inherit;
	text-decoration: underline;
}
a:hover, a:visited:hover {
    text-decoration: none;
}
a[href^=tel]{
    color:inherit;
    text-decoration:none;
}
a img {
  border: none;
}
ul {
    margin-left: 25px;
    margin-bottom: 35px;
}
ol {
    margin-left: 25px;
    margin-bottom: 35px;
}
ul li {
    list-style: outside disc;
    padding: 0 7px 4px;
}
ol li {
    list-style: outside decimal;
    padding: 0 7px 4px;
}
img {
	display: inline;
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	line-height: 0;
}
iframe, video {
	/*clip-path: inset(0 1px 1px 0);*/
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4/3;
}
.wp-caption, .wp-element-caption, caption {
	display: block;
	padding: 13px 15px;
	/*background: #eeeeee;*/
	font-size: 15px;
	color: #999999;
	margin-bottom: -10px;
	text-align: center;
}	
p {
	font-size: 15px;
	margin: 0;
	padding: 0;
	margin-bottom: 35px;
	max-width: 960px;
}

@media (max-width: 1080px) {
	h1 {
		font-size: 40px;
		line-height: 1.1;
	}
}

@media (max-width: 710px) {
	h1 {
		font-size: 36px;
		line-height: 1.15;
	}
}

/*======================================================================
  HELPERS
=======================================================================*/

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.fixed {
	position: fixed !important;	
}
.overflow {
	overflow: hidden !important;	
}
.margin-top {
	margin-top: 35px !important;
}
.margin-bottom {
	margin-bottom: 35px !important;
}
.padding-top {
	padding-top: 35px !important;
}
.padding-bottom {
	padding-bottom: 35px !important;
}
.no-padding {
	padding: 0 !important;
}
.no-margin {
	margin: 0 !important;
}
.no-border {
	border: none !important;
}
.align-left {
	float: left;
}
.align-right {
	float: right;
}
.align-center {
	text-align: center;
}
.ratio-1x1 {
	aspect-ratio: 1/1;
}
.ratio-16x9 {
	aspect-ratio: 16/9;
}

@media (max-width: 710px) {

}
	
/*=======================================================================
  STRUCTURE
========================================================================*/
#wrapper {
	position: relative;
}
#logo {
	position: fixed;
	top: -2px;
	left: 0;
	padding: var(--edge-padding);
	padding-bottom: 0;
	width: var(--nav-width);
	z-index: 600;
}
	.logo-name {
		display: inline-block;
		text-decoration: none !important;
		font-size: 21px;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.15em;
		margin-bottom: 6px;
		color: #000000 !important;
		font-family: 'Roboto', sans-serif;
	}
	.logo-tagline {
		font-size: 10px;
		color: #999999;
		letter-spacing: 0.17em;
	}
#nav {
}
	.nav-holder {
		position: fixed;
		left: 0;
		top: -2px;
		padding: var(--edge-padding);
		padding-top: 130px;
		width: var(--nav-width);
		height: calc(100vh + 2px);
		z-index: 500;
		background: #ffffff;
		/*transition: all .2s cubic-bezier(0, 0.8, 0.4, 1);*/
	}
	.nav-bg {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		height: 100vh;
		width: 100vw;
		z-index: 450;
		visibility: hidden;
	}
		#menu-icon {
			position: fixed;
			top: 35px;
			right: calc(var(--edge-padding));
			z-index: 200;
			display: none;
		}
		#close-icon {
			position: absolute;
			top: 35px;
			right: calc(var(--edge-padding));
			display: none;
		}
			#menu-icon svg, #close-icon svg {
				width: 24px;
				height: 24px;
				fill: #777777;
			}
			#menu-icon:hover svg, #close-icon:hover svg {
				fill: #000000;
			}
	.nav-items, .nav-items li, .nav-social, .nav-social li {
		list-style: none;
		margin: 0;
		padding: 0;		
	}
	.nav-items a, .nav-social a {
		text-decoration: none;
		color: #777777;
		font-size: 13px;
		letter-spacing: 0.14em;
	}	
		.nav-items li {
			margin-bottom: 7px;
		}
		.nav-selected {
			color: #000000 !important;
			font-weight: 500;
		}
	.nav-social {
		margin-top: 35px;
	}
		.nav-social li {
			display: inline-block;
			margin-right: 10px;
		}
		.nav-social svg {
			width: 20px;
			height: 20px;
			fill: #777777;
		}
	.nav-items a:hover, .nav-social a:hover {
		color: #999999;
	}
		.nav-social a:hover svg {
			fill: #000000;
		}
#main {
	position: relative;
	top: 0;
	padding: var(--edge-padding);
	margin-left: var(--nav-width);
}
	.content {
		min-height: 100vh;
	}
@media (max-width: 1080px) {
	#logo {
		width: calc(100vw - 15px);
		background: #ffffff;
		/*
		text-align: center;
		margin: 0 auto;
		*/
		padding: 35px 0;
		padding-left: var(--edge-padding);
		height: 95px;
		z-index: 100;
	}	
		.logo-name {
			margin-bottom: 4px;
		}
	#menu-icon, #close-icon {
		display: block;
	}
	.nav-holder {
		z-index: 600;
		background: #ffffff;
		top: 0;
		left: auto;
		right: calc(var(--nav-width)*-1);
		padding: var(--edge-padding);
		padding-top: 35px;
		height: 100vh;
	}
	#main {
		position: relative;
		top: 95px;
		padding: var(--edge-padding);
		padding-top: 0;
		margin-left: 0;
	}
	/* menu animation ************************** */
	.menu-open {
		overflow: hidden;
	}	
	.menu-open .nav-holder {
		right: 0;
	}
	.menu-open .nav-bg {
		visibility: visible;
	}
}

/*=======================================================================
  LAYOUT
========================================================================*/

.col-50-50 {
	display: flex;
	flex-wrap: wrap;
}
	.col-50-50 > div {
		width: 50%;
		padding-right: 60px;
	}
	
@media (max-width: 1450px) {

	
}

@media (max-width: 1080px) {
	.col-50-50 > div {
		width: 50%;
		padding-right: 60px;
	}
	
}

@media (max-width: 710px) {
	.col-50-50 > div {
		width: 1000%;
		padding-right: 0;
	}
	
}


/*=======================================================================
  WORK
========================================================================*/

.work-grid {
	gap: var(--grid-gap);
    column-count: 3;
    justify-items: stretch;
    display: block;
	width: 100%;
}
	.work-grid > div {
		display: inline-block;
		margin-bottom: var(--grid-gap);
		line-height: 0;
	}
	
@media (max-width: 1450px) {
	.work-grid {
		gap: var(--grid-gap);
		column-count: 2;
	}
}

@media (max-width: 710px) {
	.work-grid {
		column-count: 1;
	}
}

/*=======================================================================
  ABOUT
========================================================================*/

.about-grid {
	gap: var(--grid-gap);
    /*column-count: 3;
    justify-items: stretch; 
    display: block;*/
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex: 1 1 0;
}
	.about-grid > div {
		margin-bottom: var(--grid-gap);
		line-height: 0;
		/*width: 33%;*/
	}
	
@media (max-width: 710px) {
	.about-grid {
		/*column-count: 2;*/
		flex-wrap: wrap;
	}
}

/*============================================================
  FOOTER
============================================================*/

.footer-copyright {
	position: absolute;
	bottom: var(--edge-padding);
	z-index: 600;
	box-sizing: border-box;
	font-size: 12px;
	color: #999999;
}
	

/* 
*******************************************************************************************
*******************************************************************************************
*******************************************************************************************
*******************************************************************************************
*******************************************************************************************
*/




/* Cookie Policy */
/*
#cookie-policy {
	position: fixed;
	bottom: 0;
	font-size: 12px !important;
	line-height: 17px !important;
	background: #444444;
	color: #dddddd;
	width: 100%;
	padding: 10px;
	text-align: center;
	z-index: 900;
	box-sizing: border-box;
}
#cookie-policy a {
	text-decoration: underline;
}
*/