/*

Portrait mode - get thumbs visible.  Not sure about landscape mode
Resume in portrait needs work
Hi-res images for main gallery


There are 2 details-images for Great Expectations

*/


* {box-sizing: border-box;}



body {
	height: 100vh;
	font-weight: 100;
	font-family: 'Helvetica Neue';
	background: #000;
	color: #fff;

}


.wrapper {
	display: grid;
  grid-gap: 10px;
	grid-template-columns: 200px 1fr 1fr;
	grid-template-areas:
             "....... header  header"
						 "sidebar content content";
}

.header {
	grid-area: header;
	/* border: 1px solid grey; */
}

.sidebar {
	grid-area: sidebar;
	border-right: 2px solid #292929;
	/* background: #adadad; */
}

.content {
	display: grid; /* workaround..... without this, Mozilla layout breaks */
	grid-area: content;
}

.banner {
	float: right;
	font-size: 4rem;
	padding: 1.5vh 2rem 1.5vh 0;
  letter-spacing: 0.23rem;
	margin: 0;
}

.banner-details-view {
	float: right;
	font-size: 1.5rem;
	padding: 0.5vh 2rem 0.5vh 0;
  letter-spacing: 0.23rem;
}

.sidenav {
  margin: 0 1% 0 3%;
  min-width: 180px;
  overflow-y: auto;
}

.a {
	color: red;
}


/*     SWIPER     */
.swiper-wrapper, .swiper-wrapper-apss {
	align-items: center;
	height: 100%;
}
.swiper-container {
	width: 90%;
	height: 150px;
	/* border: 1px solid red; */
}
.swiper-slide {
	/* max-height: 800px; */
	/* border: 1px solid yellow; */
}




/* MAIN CONTENT -- GALLERIES */

#main-content {
	opacity: 0;
  transition: opacity 1s;
  /* flex: 1 0 0; */
  overflow-y: auto;
}

	#main-content.fade-in {
	  opacity: 1;
	}

	#main-content.fade-out {
	  opacity: 0;
	}

.gallery-top {
	width: 100%;  /* was 90% before discovering CSS Grid problems with Safari */
}
.gallery-visual {
	min-height: 55vh;
}
.gallery-audio {
	min-height: 40vh;
}
.gallery-top-details-view {
	width: 100%;  /* was 90% before discovering CSS Grid problems with Safari */
	min-height: 58vh;
}





/* ART CONTAINER */

.art-image-visual, .art-image-detail {
	display: block;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	/* border: 3px solid green; */
}

.art-image-visual img, .art-image-detail img {
	position: absolute;
	max-height: 100%;
	max-width: 100%;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* border: 3px solid red; */
}
	.art-image-visual:hover, .art-image-visual img:hover {
		cursor: zoom-in;
	}

#apss_landing {

}

#apss_intro {
	position: relative;
	width: 75%;
	height: 100%;
	margin: 0 auto;
	padding: 0 1.4rem 0 0.4rem;
	font-size: 1.1rem;
}
	#apss_intro > p {
		text-align: justify;
	}

.superscript {
}

.line_top {
	border-top: 1px solid red;
	padding-top: 0.5rem;
}

.line_bottom {
	border-bottom: 1px solid red;
	padding-bottom: 0.5rem;
}

.footnote {
	font-size: 0.8rem;
}

#apss-links {
	opacity: 0.0;
	padding: 0;
	margin: 0;
	font-size: 0.9rem;
	text-align: center;
}

#apss-links a {
	text-decoration: none;
	color: #868686;
}
	#apss-links a:hover {
		color: #fff;
	}




.art-image-audio {
	display: block;
	height: 69%;
	margin: 0 auto;
	text-align: center;
	/* border: 3px solid green; */
}

.art-image-audio img {
	position: absolute;
	height: 52%;
	max-height: 100%;
	max-width: 88%;
	margin: auto;
	top: 0;
	bottom: 100px;
	left: 0;
	right: 0;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/* border: 3px solid red; */
}
	.art-image-audio img:hover {
		cursor: default;
	}

.art-image-audio-hide {
	opacity: 0.0;
}

.art-image-audio-show {
	opacity: 1.0;
	transition: opacity 60000ms;
}


.gallery-thumbs {
	min-height: 148px;
	margin-bottom: 1rem;
	box-sizing: border-box;
	padding: 10px 0;
	/* border: 1px solid pink; */
}

.gallery-thumbs-audio {
		margin-top: 6rem;
}

.gallery-thumbs .swiper-slide {
	width: 10%;
	opacity: 0.4;
}
.gallery-thumbs-audio .swiper-slide {
	width: 5%;
	opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
	opacity: 1;
}
	.gallery-thumbs img:hover {
		cursor: default;
	}

.art-specs {
	letter-spacing: 0.05rem;
	font-size: 2rem;
	/* border: 3px solid blue; */
}

.art-specs-visual {
	text-align: right;
  margin: 0.7rem 5% 0.5rem 0;
}

.art-specs-audio {
	width: 900px;
	text-align: justify;
  margin: 0 auto;
}

.art-specs-title, .art-specs-info {
	margin: 0;
}

.art-specs-title {
	font-size: 2rem;
}

.art-specs-title-audio {
	opacity: 0.0;
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
}

.art-specs-info {
	font-size: 1.2rem;
  height: 1.4rem;
}

.blurb {
	margin: 0 0 4px 0;
}

.blurb-indent {
	margin: 0 0 0 2rem;
}

.blurb-quote {
	width: 60%;
	margin: 0 auto;
	font-style: italic;
}

.blurb-quote-sig {
	float: right;
  display: inline-block;
}

#gallery-exit {
	float: left;
	opacity: 0.0;
	width: 1.5em;
	height: 1.5em;
	box-sizing: initial;
	border: 0.1rem solid #666;
	color: #666;
	text-align: center;
	border-radius: 50%;
	line-height: 1.5em;
	box-sizing: content-box;
	margin: 0.1rem 0 0.5rem 1rem;
	font-size: 1rem;
	font-weight: 500;
	cursor: default;
}
	#gallery-exit:hover {
		border: 0.1rem solid red;
		-moz-transition:all .3s ease-out;
		-webkit-transition:all .3s ease-out;
		transition:all .3s ease-out
	}


/*        NAV MENU        */

#nav-menu {
	overflow-y: auto;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.menu-item {
	position: relative;
	min-height: 1rem;
	line-height: 1rem;
}

.sub_menu-item {
	min-height: 1.3rem;
	line-height: 1.3rem;
}

.sub-menu-opened .menu-link {
	color: #fff;
}

.sub-menu-opened .sub_menu {
	display: block;
}

.menu-link {
	display: block;
	overflow: hidden;
	font-size: 1.3rem;
	text-decoration: none;
	color: #868686;
	font-weight: 200;
	white-space: nowrap;
	cursor: pointer;
}

.menu-link-active {
	color: #fff;
}

.menu-link:hover, .menu-link:hover .menu-label {
	color: #fff;
	background: #000;
}

.menu-label {
	display: block;
	height: 36px;
	line-height: 36px;
}

.sub_menu {
	display: none;
	overflow: hidden;
	padding-left: 0;
}

.sub-menu-link {
	/* display: block;
	padding-left: 20px;
	padding-right: 2px;
	font-size: 1rem;
	color: #9c9c9c;
	text-decoration: none; */
	display: block;
	padding-left: 11px;
	font-size: 0.9rem;
	color: #9c9c9c;
	text-decoration: none;
}

.sub-menu-link:hover {
	color: #fff;
	background: #000;
}

.sub-menu-link-active {
	color: #fff;
	font-weight: 300;
}

.has-sub-menu .menu-link:after {
    position: absolute;
    top: 13px;
    right: 15px;
		width: 0;
		height: 0;
    content: "";
		border-top: 7px solid transparent;
		border-right: 12px solid #868686;
		border-bottom: 7px solid transparent;
		transition: transform .2s ease;
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
}

	.has-sub-menu .menu-link:hover:after {
		border-right: 12px solid #fff;
	}

.sub-menu-opened .menu-link:after {
    position: absolute;
    top: 13px;
    right: 15px;
		width: 0;
		height: 0;
    content: "";
		border-top: 7px solid transparent;
		border-right: 12px solid #fff;
		border-bottom: 7px solid transparent;
		transition: transform .2s ease;
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
}



/*   SOCIALS   */
#socials {
	margin: 0.6rem 1% 0 3%;
	min-width: 180px;
}

.fa-instagram {
	margin: 0 0.7rem 0 0.6rem;
}

.fa-linkedin-in, .fa-instagram, .fa-facebook-f {
	color: #868686;
}
	.fa-linkedin-in:hover, .fa-instagram:hover, .fa-facebook-f:hover {
		color: #fff;
	}


	/* PAGES */
	#pages {
	  opacity: 0;
		display: none;
	  transition: opacity 1s;
	  margin: 0 0 0 5%;
		font-size: 1.1rem;
	}

		#pages.fade-in {
		  opacity: 1;
		}

		#pages.fade-out {
		  opacity: 0;
		}



	/*   BIO   */
	.pages{
		width: 60%;
	}



	/*   RESUME   */
	#pages_resume {
		margin-bottom: 4rem;
		font-size: 1rem;
	}

		#pages_resume > p {
			margin: 0.07rem 0;
		}

	.res-t {
		display: inline-block;
		font-size: 1.5rem;
		border-bottom: 1px solid #fff;
		margin: 1.3rem 0 1rem 0;
	}

	.res-d {
		display: inline-block;
		width: 182px;
	}

	.res-film {
		margin-top: 10rem;
	}

	.res-film-year {
		padding-top: 0.5rem;
		font-size: 1.1rem;
	}

	.res-film-title {
		padding-right: 0.5rem;
		font-style: italic;
	}

	.res-film-n {
		font-size: 0.9rem;
	}

	.res-br {
		display: block;
		padding-left: 220px;
	}

	.res-indent {
		padding-left: 43px;
	}

	.res-indent-full {
		padding-left: 220px;
	}



/* PRESS */

.press-title {

}

	.press-title > a, .lightbox > a, .press-video-link {
		text-decoration: none;
		color: #868686;
	}
		.press-title a:hover, .lightbox > a:hover, .press-video-link:hover {
			color: #fff;
			cursor: pointer;
		}

.press-spc {
	padding: 0 0.8rem;
	color: #868686;
}

.press-rev-text {
	text-align: justify;
	text-indent: 5%;
	font-size: 12px;
	line-height: 15px;
}

#press-pane {
	color: #fff;
}

.lg-backdrop.in {
    opacity: 0.75;
}

#press-video {
	display: none;
}




@media (min-width: 320px) {
	.wrapper {
		grid-template-columns: 40px 1fr 1fr;
		grid-template-areas:
               "....... header  header"
							 "sidebar content content";
	}


	/* .gallery-top {
		min-height: 38vh;     Removing, 2019/01/12....not sure why this is here.
	} */

	.banner {
		font-size: 1.5rem;
		padding: 1.5vh 0.4rem 1.5vh 0;
	}

	.pages{
		width: 90%;
	}
	.swiper-button-next, .swiper-button-prev {
		display: none;
	}

	.art-specs-title {
		font-size: 1.1rem;
	}

	.art-specs-info {
		font-size: 0.8rem;
	}

	.art-specs-audio {
		width: 200px;
	}

	.art-specs-audio > .art-specs-info {
		font-size: 0.7rem;
	}

	.gallery-thumbs {
		opacity: 0.0;
	}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) {
	.wrapper {
		grid-template-columns: 40px 1fr 1fr;
		grid-template-areas:
               "....... header  header"
							 "sidebar content content";
	}

	.banner {
		font-size: 2.5rem;
		padding: 1.5vh 0.4rem 1.5vh 0;
	}

	.pages{
		width: 75%;
	}

	.art-specs-title {
		font-size: 1.3rem;
	}

	.art-specs-info {
		font-size: 1rem;
	}

	.art-specs-audio {
		width: 450px;
	}

	.art-specs-audio > .art-specs-info {
		font-size: 0.7rem;
	}

	.gallery-thumbs {
		opacity: 0.0;
	}

}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {
	.wrapper {
		grid-template-columns: 40px 1fr 1fr;
		grid-template-areas:
               "....... header  header"
							 "sidebar content content";
	}

	.banner {
		font-size: 4rem;
		padding: 1.5vh 0.4rem 1.5vh 0;
	}

	.pages{
		width: 70%;
	}

	.swiper-button-next, .swiper-button-prev {
		display: block;
	}

	.art-specs-audio {
		width: 600px;
	}

	.art-specs-audio > .art-specs-info {
		font-size: 0.7rem;
	}

	.gallery-thumbs {
		opacity: 1;
	}


}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {


	.wrapper {
		display: grid;
		grid-gap: 10px;
		grid-template-columns: 200px 1fr 1fr;
		grid-template-areas:
               "....... header  header"
							 "sidebar content content";
	}

	.banner {
		font-size: 4rem;
		padding: 1.5vh 0.4rem 1.5vh 0;
	}

	.art-specs-audio {
		width: 800px;
	}

	.art-specs-audio > .art-specs-info {
		font-size: 0.7rem;
	}

	.gallery-thumbs {
		opacity: 1;
	}


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

	.art-specs-audio {
		width: 900px;
	}

	.art-specs-audio > .art-specs-info {
		font-size: 0.8rem;
	}

	.gallery-thumbs {
		opacity: 1;
	}

}

/* Only apply when the browser window is wider than its height */
@media screen and (orientation:landscape)
and (min-device-width: 319px)
and (max-device-width: 480px) {

	.gallery-thumbs {
		min-height: 0;
		max-height: 96px;
	}

	.banner {
		font-size: 2rem;
		padding: 0.6vh 0.4rem 0.6vh 0;
	}

	.art-specs {
		margin: 0.7rem 5% 0 0;
	}

	.gallery-thumbs {
		opacity: 1;
	}

}



/* AUDIO GALLERY */
.container {
	margin: 0px auto;
	max-width: 500px;
}

.container-audio {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}





	/*

	>  Switched layout from Flexbox to CSS Grid.
	>  Found menu icon, as a special HTML character.
	>  Added a few breakpoints, and put banner size into it, to test.

	+  I think using breakpoints is going to be OK, even though future-looking opinion indicates we may be getting away from it.  Still fine to use it, if you need to reorganize things, which I do.
	+  Really, the only challenge is to get the nav to cooperate (when to resize & when to hide/show) during resizing.

	> The triangle icons, in the nav need to be looked at.  Whether the submenu is open, or not, the state is the same.

	*/