/* RESET
------------------------------------------------------------------------------------*/
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; outline: 0; font-size: 100%; vertical-align: baseline; max-width: 100%;}
.container, iframe { max-width: 100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
html, body	{ height:100%; }
a img,:link img,:visited img { border:none }
:focus { outline: 0; }
a, a:hover  { text-decoration:none;} 
a, a:active, a:visited {outline: 0 !important; } /* Firefox */
table { border-collapse: collapse; border-spacing: 0; }
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after {  -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
.clearFloat::before, .clearFloat::after { display:table; content:"";}
.clearFloat::after	{ clear:both; }
img	{ max-width: 100%; height: auto; width: auto9; /* ie8 */ }

/* PALETTE
------------------------------------------------------------------------------------*/
body { color: #666; background: #FFF; }
a { color: #000;}
a:hover,
.accent	{color: #9f5c49;} /*reddish brown - rgba(159,92,73,1.0)*/


/* HTML / FONTS
------------------------------------------------------------------------------------*/
body {
	font-family: 'Andale Mono', Arial, sans-serif; 
	display: optional;  
    font-weight: normal; 
    font-style: normal;
    line-height: 1.5em;
    -webkit-font-smoothing: antialiased;
}

h1 {}
h2, h3 {
	font-size: 2em;
	text-transform: uppercase;
	color: rgba(159,92,73,0.4);
	color: rgba(0,0,0,0.2);
}
h3 { font-size: 1.7em;}
h4	{
	font-size: 1em;
	margin: 20px 0 0;
	font-weight: bold;
}
p {margin-bottom: 20px;}

p::-moz-selection { color: WHITE; background: GREY;}
p::selection { color: WHITE; background: GREY; }

/* CONTAINERS
------------------------------------------------------------------------------------*/
.navbar-wrapper {
	width: 100%;
	max-width: 1170px;
	margin: 20px auto 0;
	background: WHITE; 
	text-transform: uppercase;
}
.navbar	{
	margin-bottom: 0;
}

.mainContent	{
	max-width: 1170px;
	margin: auto;
	padding: 0 15px;
	min-height: calc(100% - 165px);
}

.navbar-default {
	background-color: transparent;
	border-color: transparent;
}

.leftImage, .rightImage, .leftText, .rightText	{
	width:100%;
	margin-bottom: 20px;
}

@media screen and (min-width: 768px)	{
	.leftImage, .rightImage{ float: left; width: 40%;}
	.leftText, .rightText { float: left; width: 56%;}
	.leftImage, .leftText	{ margin-right: 4%;}
}

/* HEADERS / NAVIGATION
------------------------------------------------------------------------------------*/

a.header_logo_link, 
.navbar-default .navbar-nav>li>a	{
	color: BLACK;
	letter-spacing: 0.15em;
}

a.header_logo_link:hover	{
	color: #9f5c49;
}

.navbar-default .navbar-nav>li:hover,
.navbar-default .navbar-nav>li>a:hover {
	background: #9f5c49;
	color: WHITE;
}

@media screen and (min-width: 768px)	{
	.navbar-default .navbar-nav>li>a:hover,
	.navbar-default .navbar-nav>li:hover {
		background: transparent;
		color: #9f5c49;
	}
}

/* site title 
-----------------*/
.siteTitle	{
	margin: 10px 0 0 15px;
	max-width: 400px;
	float: left;
}
a.header_logo_link	{	
	font-size: 1.8em;
}

@media only screen and (min-width: 500px)	{
	a.header_logo_link	{font-size: 2em;}
}

/* main navigation 
-----------------*/
.navmenu_align {
    float: right;     
    width: 100%;
    margin-top: 4px;
}
@media only screen and (min-width:768px)	{
	.navmenu_align {width: auto; padding-right: 15px;}
}

/* toggle button (=navbar-header)
-----------------*/
.navbar-header	{}
.navbar-default .navbar-toggle {border-color: #ddd; margin-top: -30px;} /* #ddd default */

/* links / dropdown
-----------------*/
#navbar {}
.menu-main-navigation-container	{width: 100%;}
.navbar-default .navbar-collapse {border-color: GREY;padding: 0;} /* top of mob-menu */
.navbar-nav {margin:0;}
#navbar ul {list-style-type: none;padding: 0;}
#navbar ul li {display: block; font-size: 15px; margin: 0px auto 0px; /*padding: 10px 0;*/border-bottom: 1px solid GREY;text-align: center;}
/*#navbar ul li:first-child	{padding-top: 8px;}*/

@media only screen and (min-width: 768px)	{ /* wide links */
	#navbar ul li,
	#navbar ul li:first-child {padding: 0;border-bottom: 0px;}
	.nav>li.menu-item-30>a {padding-right: 0;}  
}
.navbar-nav>li>a
{
	    padding-top: 16px;
		padding-bottom: 16px;
}
#navbar ul li ul li	{
	text-align: left;
	letter-spacing: 0;
	font-size: .9em;
	line-height: 16px;
	border-bottom: 1px solid #ccc;
}

@media only screen and (min-width: 768px)	{
	#navbar ul li ul {border: 1px solid #ccc;}
	#navbar ul li ul li:first-child {border-bottom: 1px solid #ccc;}
	#navbar ul li ul li:last-child {border-bottom: 0px solid #ccc;}
	ul.sub-menu	{    margin-top: -10px;}
}

ul.sub-menu	{
	display: none;
    background: #fefef7;
    padding: 10px;

}


ul.sub-menu li a 
{
	display:block;
	padding:10px;
}
ul.sub-menu li:hover
{
	background:#d2d2d2;
}
@media (min-width:768px)
{
	ul.sub-menu	{
    position: absolute;
}
}

.page-header	{
	border-bottom: 0px;
	text-align: center;
}

/* 1/21/25 */
/* Mobile menu styles */
@media (max-width: 767px) {
    /* Container for mobile menu */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        width: 100%;
        z-index: 1000;
        border-top: 1px solid #ddd;
    }

    /* Show menu when expanded */
    .navbar-collapse.in,
    .navbar-collapse.collapsing {
        display: block !important;
    }

    /* Mobile menu links */
    .navbar-nav {
        margin: 0;
        width: 100%;
    }

    .navbar-nav > li {
        border-bottom: 1px solid #ddd;
    }

    .navbar-nav > li > a {
        padding: 15px 20px;
        font-size: 16px;
        text-align: center;
    }

    /* Toggle button */
    .navbar-toggle {
        display: block;
        margin-right: 15px;
        border: 1px solid #ddd;
    }

    .navbar-toggle .icon-bar {
        background-color: #666;
    }
}



/* FOOTER
------------------------------------------------------------------------------------*/
.footer	{
	padding-top: 30px;
	font-size: .8em;
	text-align:center;
}

p.copyright	{
	display: none;
}


/* HOME
------------------------------------------------------------------------------------*/
.homebgimage
{
	margin: 30px auto 0;
	background-repeat: no-repeat; 
	/*max-width: 900px;
	height: 600px;    
	max-height: 600px;
    width: auto;
    background-size: contain;
	background-position: center;*/
	width: auto;
    background-size: contain;
    background-position: center;
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
}

.inner1050	{
	width: 1050px;
	max-width: 100%;
	margin: 0 auto;
}

.inner1050 p	{
	max-width: 950px;
	margin: 40px auto 0px;
}


.inner1050 ul{
	margin-top: 60px;
	margin-left: 75px;
	margin-right: 75px;
}

figcaption	{
	display: none;
}

.wp-block-gallery.columns-3 .blocks-gallery-item	{
	width: 150px !important;
	height: 150px !important;
	margin-bottom: 150px !important;
	margin-left: 75px !important;
	margin-right: 75px !important;
}

.page-home p.copyright	{
	display: block;
}


/* WORK PAGES
------------------------------------------------------------------------------------*/
.inner1050 p:first 	{
	min-height: 100px;
}

li.blocks-gallery-item	{
	max-width: 150px;
}

@media screen and (max-width: 1080px)	{
	.inner1050 ul	{
		margin-left: 4%;
		margin-right: 4%;
	}
}

@media screen and (max-width: 1030px)	{
	.inner1050	{
		width: calc(300px + 45%);
		max-width: 100%;
		margin: 0 auto;
		/*border: solid 1px blue;*/
	}
	.inner1050 ul	{
		margin-left: 0;
		margin-right: 0;
	}
	.wp-block-gallery.columns-3 .blocks-gallery-item	{
		margin-bottom: 18% !important;
		margin-left: 8% !important;
		margin-right: 8% !important;
	}
}

@media screen and (max-width: 720px)	{
	.inner1050	{
		width: calc(300px + 40%);
		/*border: 1px solid red;*/
	}
	.wp-block-gallery.columns-3 .blocks-gallery-item	{
		margin-bottom: 18% !important;
		margin-left: 10% !important;
		margin-right: 10% !important;
	}
}

@media screen and (max-width: 1090px) and (orientation: landscape)	{
	.inner1050	{
		width: calc(300px + 61%);
		margin: 0 auto;
		/*border: solid 1px purple;*/
	}
	.inner1050 ul	{
		margin-left: 0;
		margin-right: 0;
	}
}


#cboxContent	{
	border: 1px solid white !important;
}

#cboxTitle	{
	font-size: 14px !important;
	color: BLACK !important;
	bottom: -3px !important;
	padding-bottom: 5px;
}

@media screen and (max-device-width: 812px) and (orientation: landscape)	{
	#cboxTitle	{ bottom: 1px !important;font-size: 8px !important; line-height: 12px !important;}
	#cboxTitle span	{font-size: 10px !important;}
}

@media screen and (max-device-width: 568px) and (orientation: landscape)	{
	#cboxTitle	{ line-height: 9px !important;}
	#cboxTitle span	{font-size: 8px !important;}
}

#cboxTitle span {
	text-transform: uppercase;
}

/* C.V.
------------------------------------------------------------------------------------*/
.innerContainer	{
	width: 950px;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 50px;
}
.page-cv p	{
	margin-bottom: 0;
}

.smaller	{
	font-size: .9em;
}


/* CONTACT
------------------------------------------------------------------------------------*/
#email	{
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	color: BLACK;
	font-size: 1.3em;
}

@media screen and (min-width: 601px)	{
	#email	{color: WHITE;}
}


/* FONTS
------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'Andale Mono';
    src: url('/wp-content/themes/treyFriedman/fonts/AndaleMono.woff2') format('woff2'),
        url('/wp-content/themes/treyFriedman/fonts/AndaleMono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
ul li:hover > ul{
    display:block;
}
.staffBlock
{
	text-align: center;
    padding-bottom: 30px;
}


/* Base gallery styles */
.gallery-container {
    margin: 60px auto 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    width: fit-content !important; /* Changed from 100% to fit-content */
    max-width: 900px;
}

ul.gallery.wp-block-gallery {
    margin: 0 !important; /* Removed top margin since container handles it */
    padding: 0 !important;
    display: flex !important;
    justify-content: start !important;
    width: fit-content !important;
}

.blocks-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 150px);
    margin: 0 !important;
    padding: 0;
    width: fit-content !important;
}

.blocks-gallery-item {
    width: 150px !important;
    height: 150px !important;
    margin: 0 !important;
}

.blocks-gallery-item figure,
.blocks-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
}

/* Switch to 2 columns when 3 won't fit with minimum spacing */
@media (max-width: 990px) {
	.gallery-container {
		max-width: 600px;
	}
    .blocks-gallery-grid {
        grid-template-columns: repeat(2, 150px);
        gap: min(75px, 8vw);
    }
}

/* Switch to 1 column when 2 won't fit with minimum spacing */
@media (max-width: 550px) {
    .gallery-container {
		max-width: 200px;
	}
	.blocks-gallery-grid {
        grid-template-columns: repeat(1, 150px);
    }
    .wp-block-gallery.columns-3 .blocks-gallery-item {
    	margin-bottom: 75px !important;
    }
}