/*
	PeterMarino.art
	CSS
	site by Eric Wrenn & Lukas Eigler-Harding

	// colors
	gray: #E6E6E6

*/

*{
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body, html{
	position: fixed;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	font-size: 15px;
	font-family: helvetica neue, helvetica, arial, sans-serif;
}


.copyright{
	display: block;
	position: fixed;
	z-index: 100;
	box-sizing: border-box;
	pointer-events: none;
	left: 0;
	bottom: 0;
	height: 10vh;
	padding-bottom: 1rem;
	padding-left: 1.5rem;
	width: 50vw;
	overflow-x: hidden;
	overflow-y: hidden;
	background-image: linear-gradient(rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 95%);
}

.gallery_open .copyright{
	opacity: 0;
}

.copyright p{
	position: absolute;
	vertical-align: bottom;
	font-size: 0.75rem;	
	line-height: 0.8rem;
	margin-bottom: 0;
	bottom: 1rem;
	left: 1.5rem;
	pointer-events: none;
	width: calc(100% - 3rem);
}

@media(max-width: 768px){
	.copyright{
    transform: translate(-100%, 0);
		width: 100vw;
		height: 10vh;
	}

	.copyright.chrome{
		padding-bottom: 2rem;
	}

	.copyright p{
		bottom: 0.5rem;
		left: 1rem;
	}

	.loaded .copyright{
    transform: translate(0, 0);
		width: 90vw;
		pointer-events: none;
		height: 15vh;
	}
}

nav{
	position: fixed;
	top: 0;
	right: 0;
	width: 50vw;
	z-index: 100;
	padding-top: 1rem;
	padding-bottom: 6rem;
	pointer-events: none;
	height: 3rem;
	background-position: 0 0;
	background-repeat: no-repeat;
	transition: height 1s;
	background-image: linear-gradient(
											rgba(255,255,255,1) 0%,  
											rgba(255,255,255,1) 25%,
											rgba(255,255,255,0) 50%, 
											rgba(255,255,255,0) 100%
										);
}


nav#pm_nav.page_home{
	height: 100vh;
	pointer-events: initial;
	background-position: 0 0;
	transition: height 1s;
}

main{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p,
ul, 
li,
ol, 
ul li, 
ol li{
	font-size: 1rem;
	letter-spacing: 0.02rem;
	line-height: 1.35rem;
	font-weight: bold;
}

h1{
	margin-top: 0;
	margin-bottom: 1.35rem;
}

a{
	text-decoration: none;
	color: black;
}

#image_background{
	width: 50vw;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	pointer-events: none;
	background-color: #E6E6E6;
	z-index: -1;
}

#image_foreground{
	width: 50vw;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 20vh;
	pointer-events: none;
	background-image: linear-gradient(rgba(230, 230, 230, 0) 20%, rgba(230, 230, 230, 1) 95%);
	z-index: 100;
}

#image_caption{
	position: fixed;
	box-sizing: border-box;
	padding-left: 1rem;
	padding-bottom: 0.5rem;
	bottom: 0;
	left: 0;
	width: 50%;
	z-index: 101;
	opacity: 0;
	pointer-events: none;
}
#image_caption.chrome{
	padding-bottom: 2rem;
}

#image_caption h4{
	width: 3rem;
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: 0;
	margin-top: 0;	
	font-size: 0.75rem;
	line-height: 1rem;
}

#image_caption h2{
	display: inline-block;
	width: calc(100% - 3rem);
	vertical-align: bottom;
	font-size: 0.75rem;
	line-height: 1rem;
	margin-top: 0;
	margin-bottom: 0;
}


.grid_half{
	width: 50%;
	position: relative;
	display: inline-block;
	padding-left: 1.5rem;
	padding-right: 1rem;
	box-sizing: border-box;
	vertical-align: top;
}

h1.grid_half{
	width: 40%;
}

aside.grid_half{
	padding-left: 0;
	width: 60%;
}

.grid_half a{
	pointer-events: initial;
}

.pm_menu_list{
	visibility: hidden;
	list-style: none;
	padding-left: 0;
	margin-left: 20%;
	margin-top: 0;
	opacity: 0;
	transform: translateY(-1rem);
	pointer-events: none;
	transition-delay: 2s;
	transition: opacity 0.25s ease-in, visibility 0.5s ease-in, transform 0.5s ease-in;
}

#pm_nav.page_home .pm_menu_list{
	visibility: visible;
	opacity: 1;
	pointer-events: initial;
	transform: translateY(0rem);
	transition: opacity 0.25s ease-in, visibility 0.5s ease-in, transform 0.5s ease-in;
}

.pm_menu_list li{
	padding-left: 0;
	margin-left: 0;
	pointer-events: initial;
}

.pm_menu_list li:before{
	content: "";
}

#menu_icon{
	position: absolute;
	top: 0;
	left: calc(20% - 2rem);
	display: block;
	height: 1rem;
	box-sizing: border-box;
	width: 1rem;
	pointer-events: initial;
	cursor: pointer;
}

#pm_nav #menu_icon #menu_row_two,
#pm_nav #menu_icon #menu_row_one{
	transform: translateY(0px);
	opacity: 1;
	transition: transform 0.7s ease-in, opacity 0.7s ease-in;
}

#pm_nav.page_home.home_icon #menu_icon{
	visibility: hidden;
}

#pm_nav.page_home #menu_icon #menu_row_two{
	transform: translateY(-5px);
	opacity: 0;
	transition: transform 0.7s ease-in, opacity 0.7s ease-in;
}

#pm_nav.page_home #menu_icon #menu_row_one{
	transform: translateY(5px);
	opacity: 0;
	transition: transform 0.7s ease-in, opacity 0.7s ease-in;
}

#pm_menu_exit{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	height: 100vh;
	pointer-events: initial;
}


#pm_nav.page_home #pm_menu_exit{
	display: block;
	pointer-events: initial;
	z-index: -1;
}

/* body area */
.pm_body_text, .pm_body_list{
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 50vw;
	width: 50vw;
	padding-top: 50vh;
	overflow-x: hidden;
	padding-left: 1.5rem;
	padding-right: 1rem;
	padding-bottom: 5rem;
	z-index: 50;
}

.pm_body_text p{
	padding-bottom: 0;
	margin-bottom: 0;
	padding-top: 0;
	margin-top: 0;
	text-indent: 2rem;
}

.pm_body_text p:first-of-type{
	text-indent: initial;
}

.pm_body_list h1{
	display: inline-block;
	width: 40%;
	vertical-align: top;
}

.pm_body_list .pm_information *{
	font-size: 0.75rem;
}

.pm_information a, .pm_body_text * a{
	text-decoration: none;
	display: inline;
	border-bottom: 1px solid black;
}

.pm_index{
	position: relative;
	display: inline-block;
	width: 60%;
	vertical-align: top;
	list-style: none;
	padding-left: 0;
	padding-top: 0;
	margin-top: 0;
}

.pm_index li{
	margin-bottom: 0.75rem;
}

.pm_index h4{
	margin: 0;
	padding: 0;
	display: inline-block;
	box-sizing: border-box;
	padding-right: 1rem;
	width: 20%;
	text-align: right;
	vertical-align: top;
}

.pm_index h4 img{
	height: 1rem;
	object-fit: contain;
	object-position: left top;
}

.pm_index h2{
	display: inline-block;
	width: 80%;	
	vertical-align: top;
	margin: 0;
	padding: 0;
}

h2 .pm_focus{
	padding-bottom: 1px;
	border-bottom: solid 1px black;
}

.pm_index h3{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
	padding-left: 20%;
}

.pm_index button{
	margin-left: 20%;	
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	border-radius: 0;
	background-color: transparent;
}

button.expand_information .information_status{
	font-weight: normal;
	font-size: 0.9rem; 
	margin-bottom: -0.1rem;
}

.pm_index .body_text{
	padding-left: 20%;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 2rem;
}

.pm_index li.body_text p,
.pm_index li.body_text h1,
.pm_index li.body_text h2,
.pm_index li.body_text h3,
.pm_index li.body_text h4,
.pm_index li.body_text h5,
.pm_index li.body_text h6{
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	font-size: 1rem;
	line-height: 1.35rem;
	text-indent: 2rem;
}


.pm_index li.body_text *:first-child{
	text-indent: initial;
}

	.pm_index .body_text a, .pm_index .body_text * a{
		text-decoration: none;
		display: inline;
		border-bottom: solid 1px black;
	}


.pm_information{
	box-sizing: border-box;
	padding-left: 20%;
	width: 100%;
	overflow: hidden;
	height: 0;
}

.pm_information.open{
	height: auto;
}

.pm_information h4,
.pm_information h2,
.pm_information h3{
	margin-left: 0;
	padding-left: 0;
	display: block;
	width: 100%;
}

.pm_information ul{
	list-style: none;
	padding-left: 0;
}

.pm_information ul li{
	padding-left: 0;
	margin-left: 0;
}

.pm_information ul li:before{
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-bottom: 0.05rem;
	margin-right: 0.1rem;
	background-color: black;
}

/* IMAGE GRID STYLES */

.pm_images{
	position: fixed;
	overflow-x: hidden;
	overflow-y: scroll;
	width: 50vw;
	height: 100vh;
	opacity: 0;
}

.pm_images::-webkit-scrollbar { 
    display: none; 
}

.pm_images_icon{
	display: none;
	pointer-events: none;
}

@media(max-width: 768px){
	.pm_images_icon{
		opacity: 0;
		display: block;
		position: fixed;
		height: 1rem;
		width: 1rem;
		box-sizing: border-box;
		/*background-color: transparent;*/
		/*border: solid 1px black;*/
		transition: border 0.25s ease-in;
		background-image: url('icons/menu_icon_vertical_two.svg');
		background-size: 1rem;
		background-repeat: no-repeat;
		right: 3.75%;
		top: 50%;
	}

	.pm_images_icon.filled{
		content: "";
		position: fixed;
		height: 1rem;
		width: 1rem;
		border: solid 1px transparent;
		transition: border 0.25s ease-in;
		right: 3%;
		top: 50%;
	}
}


.pm_image_container{
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
	height: calc(18vw + 2rem);
}

.pm_image_container:first-of-type{
	margin-top: 50vh;
}
.pm_image_container:last-of-type{
	margin-bottom: 50vh;
}

.pm_image_container.pm_image_list_container{
	height: auto;
}



.pm_grid_image{
	position: absolute;
	filter: grayscale(0%); /* earlier at 100% */
	opacity: 1;
	-webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
	transition: filter 0.25s ease-in;
	cursor: pointer;
}

@media(max-width: 768px){
	.pm_grid_image{
		opacity: 1;
	}
}

.pm_grid_image img{
	object-fit: contain;
	object-position: left top;
	width: calc(15vw);
}

.pm_grid_image.pm_vert img{
	width: calc(12.5vw - 1.25rem);
	max-height: 18vw;
}

@media(any-hover: hover){
	.pm_grid_image:hover{
		filter: grayscale(0%);
		opacity: 1;
	}
}

.pm_left_image{
	top: 1rem;
	left: 1rem;
}

.pm_right_image{
	top: 1rem;
	left: calc(50% + 0.5rem);	
}

/*

total width is 100%

of that we have 5rems for margins


*/

.pm_image_container:nth-of-type(even) .pm_left_image{
	left: calc(25% + 0.5rem);
}

.pm_image_container:nth-of-type(even) .pm_right_image{
	left: auto;
	right: 1rem;
}

/* IMAGE LIST LAYOUT */

.pm_images_list{
	position: fixed;
	left: 0;
	top: 0;
	width: 50%;
	height: 100vh;
	overflow: hidden;
}

.pm_images_list.single_image_list{
	position: fixed;
	height: 100vh;
	overflow: hidden;
}


.pm_single_image{
	position: absolute;
	object-fit: contain;
	object-position: center;
	height: 40rem;
	width: 80%;
	max-height: 60vh;
	filter: grayscale(0%); /* earlier at 100% */
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: auto;
	margin-left: auto;
	transition: filter 0.25s ease-in;
}

.pm_single_full_image{
	position: absolute;
	width: 100%;
	height: 100vh;
	filter: grayscale(0%); /* earlier at 100% */
	-webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: filter 0.25s ease-in;
}

.pm_image_list_image{
	position: relative;
	display: block;
	margin: 0 auto;
	padding-top: 4rem;
	padding-bottom: 4rem;
	width: 80%;
}

.pm_image_list_image img{
	object-fit: contain;
	object-position: center;
	width: 100%;
	filter: grayscale(0%); /* earlier at 100% */
	opacity: 1;
	-webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
	transition: filter 0.25s ease-in;
	max-height: 60vh;
}
@media(max-width: 768px){
	.pm_image_list_image img{
		
		opacity: 1;
	}
}

@media(any-hover: hover){
	.pm_single_image:hover,
	.pm_single_full_image:hover, 
	.pm_image_list_image:hover,
	.pm_image_list_image:hover img{
		filter: grayscale(0);
		opacity: 1;
	}
}

/* GALLERY STYLES */

#menu_exit{
	display: none;
}

.gallery_open #menu_exit{
	display: block;
	width: 1rem;
	height: 1rem;
	position: absolute;
	right: 1rem;
	top: 0;
	cursor: pointer;
	pointer-events: initial;
}

.gallery_open #menu_exit svg{
	width: 100%;
}

.gallery_open .pm_menu_list li a{
	color: white;
}

.gallery_open #menu_group{
	stroke: #ffffff;
}

.gallery_open, .gallery_open .grid_half a{
	color: white;
}

.gallery_open, 
.gallery_open #image_background{
	background-color: #333333;
}


.gallery_open nav, 
.gallery_open #image_foreground{
	background-image: none;	
}

.gallery_open #filterbox, .gallery_open #filterbox.active{
	pointer-events: none;
	opacity: 0;
}

.gallery_carousel{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 92vh;
	opacity: 0;
}

.gallery_carousel_slide{
	position: relative;
	width: 80vw;
	height: 100vh;
}

.loader {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin-top: auto;
	margin-left: auto;
	margin-bottom: auto;
	margin-right: auto;
  border: 1px solid black; /* Light grey */
  border-top: 1px solid #ffffff; /* Blue */
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.gallery_carousel_slide img, 
.gallery_carousel_slide iframe,
.gallery_carousel_slide picture{
	position: absolute;
	object-fit: contain;
	object-position: center; 
	width: 90%;
	height: 80%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
}

img.gallery_carousel_image{
	transition: opacity 0.2s;
	opacity: 0;
}

img.gallery_carousel_image.flickity-lazyloaded,
img.gallery_carousel_image.flickity-lazyerror,
picture.gallery_carousel_image.flickity-lazyloaded,
picture.gallery_carousel_image.flickity-lazyerror{
	opacity: 1;
}

.gallery_carousel_slide iframe{
	border: none;


}

.subtitle_contents{
	visibility: hidden;
	pointer-events: none;
	font-size: 0;
	background-color: transparent;
}

.carousel_footer{
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	box-sizing: border-box;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	bottom: 0;
	left: 0;
	width: 100vw;
	min-height: 8vh;
	height: auto;
	background-color: rgba(51, 51, 51, 0.8);
}

.carousel_hidden, .carousel_footer_right, .further_info{
	visibility: hidden;
	opacity: 0;
}

.carousel_footer_left{
	display: inline-block;
	width: calc(50vw + 4rem);
	text-align: left; 
	vertical-align: bottom;
}

.carousel_footer_left,
.carousel_footer_left h2,
.carousel_footer_left h4,
.carousel_footer_left .pm_information{
	font-size: 0.75rem;
	font-weight: bold;
	line-height: 1rem;
}

.carousel_footer_left h2{
	margin-bottom: 0;
}

.carousel_footer_left h4{
	width: 3rem;
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: 0;
	margin-top: 0;
}

.carousel_footer_left .pm_information{
	padding-left: 0;
	box-sizing: border-box;
	opacity: 0;
	width: 100%;
}

.carousel_footer_left .pm_information h1,
.carousel_footer_left .pm_information h2, 
.carousel_footer_left .pm_information h3, 
.carousel_footer_left .pm_information h4, 
.carousel_footer_left .pm_information h5, 
.carousel_footer_left .pm_information h6, 
.carousel_footer_left .pm_information p{
	font-size: 0.75rem;
	font-weight: bold;
	line-height: 1rem;
	text-indent: 1rem;
	margin-bottom: 0;
	margin-top: 0;
}

.carousel_footer_left .pm_information a, 
.carousel_footer_left .pm_information * a{
	color: white;
	border-bottom: solid 1px white; 
}

.carousel_footer_left .pm_information *:first-child{
	text-indent: initial;
	margin-top: 0.5rem;
}

.carousel_footer_left .pm_information *:last-child{
	margin-bottom: 0.5rem;
}

.carousel_slide_info{
	width: calc(100% - 3rem);
	max-width: calc(50vw - 3rem);
	display: inline-block;
	vertical-align: bottom;
}

.carousel_footer_left .expand_information{
	cursor: pointer;
	color: white;
	font-weight: bold;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-size: 0.75rem;
}

.carousel_footer_right{
	display: inline-block;
	width: calc(50vw - 6rem);
	box-sizing: border-box;
	text-align: left;
	vertical-align: bottom;
}

.carousel_footer_right button{
	cursor: pointer;
	border: none;
	width: 1rem;
	height: 1rem;
	border-radius: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
}


/* MOBILE STYLES */

@media(max-width: 768px){
	main{
		overflow-x: hidden;
	}

	nav{
		width: 100%;
		padding-left: 0;
		padding-right: 10%;
		background-image: none;
		background-position: 0 0;
		height: 7rem;
		background-repeat: no-repeat;
		background-image: linear-gradient(
										rgba(255,255,255,1) 0%,  
										rgba(255,255,255,1) 25%,
										rgba(255,255,255,0) 50%, 
										rgba(255,255,255,0) 100%
									);
		transition: height 1s;
	}

	nav#pm_nav.page_home{
		height: 100vh;
		transition: height 1s;
		
	}
	
	nav#pm_nav .pm_menu_list{
		margin-top: 1.4rem;
		transition: opacity 0.5s ease-in, 
								visibility 0.5s ease-in, 
								transform 0.5s ease-in, 
								margin-top 0.5s ease-in;
	}

	nav#pm_nav.page_home .pm_menu_list{
		margin-top: 1.5rem;
		transition: opacity 0.5s ease-in, 
								visibility 0.5s ease-in, 
								transform 0.5s ease-in, 
								margin-top 0.5s ease-in;
	}

	nav#pm_nav{
		background-position: 0 -7rem;
	}

	nav#pm_nav.page_home{
		background-position: 0 -100vh;
	}

	.loaded nav,
	.loaded nav#pm_nav, 
	.loaded nav#pm_nav.page_home{
			background-position: 0 0;
			background-position-x: -10vw;
	}


	.grid_half{
		padding-left: 1rem;
		padding-right: 1rem;
	}

	aside.grid_half{
		text-align: right;
		opacity: 0;
	}

	#pm_menu_exit{ opacity: 0; }

	#menu_icon{
		left: auto;
		right: 1rem;
		width: 2rem;
		height: 2rem;
		padding-left: 1rem;
		padding-bottom: 1rem;
	}

	.pm_body_list h1{
		display: block;
		width: 100%;
	}

	.pm_index{
		display: block;
		width: 100%;
	}
	
	.pm_body_text, .pm_body_list{
		padding-left: 1rem;
		padding-bottom: 10rem;
		width: 90%;
		left: 0;
		transform: translate(-100%, 0);
		overflow-x: hidden;
	}

	.pm_index h4{ width: 15%; }
	.pm_index h2{ width: 85%; }
	.pm_index h3{ padding-left: 15%; }
	.pm_index button{ margin-left: 15%; }
	.pm_information{ padding-left: 15%; }

	.pm_index .body_text{
		padding-left: 0;
	}

	/* image sections */

	.pm_image_container:first-of-type{
		margin-top: 8rem;
	}
	.pm_image_container:last-of-type{
		margin-bottom: 8rem;
	}


	#image_background, 
	#image_foreground,
	.pm_images, 
	.pm_images.single_image_list{
		width: 100%;
	}

	#image_background, 
	#image_foreground, 
	#filterbox,
	.pm_images, 
	.pm_images.single_image_list{
		left: 0;
	}

	.loaded .pm_images,
	.loaded #filterbox,
	.loaded .pm_images.single_image_list,
	.loaded #image_background,
	.loaded #image_foreground{
		transform: translate(90%,0);
	}

	.loaded .pm_body_list,
	.loaded .pm_body_text{
		transform: translate(0,0);	
	}

	#filterbox{
		padding-bottom: 10rem;
	}

	#image_caption{
		pointer-events: none;
		width: 90%;
	}



	/* image grid mobile */

	.pm_images{
		padding-bottom: 10rem;
		opacity: 1;
	}

	.pm_images_row{
		position: relative;
		width: 90%;
		margin: 0 auto;
		top: auto;
		height: auto;
		transform: initial;
		box-sizing: border-box;
		padding: 0;
		height: auto;
	}
	.pm_images_row:last-of-type{ margin-bottom: 15rem; }

	.pm_image_container, .pm_images_row.pm_image_container{
		position: relative;
		top: auto;
		transform: initial;
		width: 80%;
		margin-left: 10%;
		height: auto;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0;
	}

	.pm_grid_image{
		position: relative;
	}
	.pm_grid_image img, .pm_grid_image.pm_vert img{
		position: relative;
		display: block;
		margin: 0 auto;
		object-fit: contain;
		object-position: center top;
		width: auto;
		height: auto;
		max-width: 60%;
		max-height: 15rem;
		
		-webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
		transition: initial;
		margin-top: 3rem;
		margin-bottom: 5rem;
	}


	.pm_left_image,
	.pm_right_image,
	.pm_image_container:nth-of-type(even) .pm_left_image,
	.pm_image_container:nth-of-type(even) .pm_right_image,
	.pm_images_row:nth-of-type(even) .pm_left_image, 
	.pm_images_row:nth-of-type(even) .pm_right_image{
		top: auto;
		left: auto;
		right: auto;
	}

	/* image list mobile */
	.pm_images_list{
		position: fixed;
		height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
		opacity: 0;
		padding-top: 25vh;
	}

	.pm_images_list.single_image_list{
		overflow-y: hidden;
	}

	.pm_single_image, .pm_image_list_image{
		width: 75%;
	}

	.pm_image_list_image{
		padding-top: 0;
		padding-bottom: 0;
		margin-top: 10rem;
		margin-bottom: 0rem;
		-webkit-transform: translateZ(0);
	  -webkit-backface-visibility: hidden;
	  -webkit-perspective: 1000;
	}

	/* mobile GALLERY */

	.gallery_open #menu_exit{
		top: 2rem;
	}

	.gallery_open nav, 
	.gallery_open #image_foreground,
	.gallery_open.loaded nav{
		background-image: none;	
	}

	.gallery_carousel_slide{
		position: relative;
		width: 100vw;
		height: 100vh;
	}

	.gallery_carousel_slide img,
	.gallery_carousel_slide picture,
	.gallery_carousel_slide iframe{
		position: absolute;
		object-fit: contain;
		object-position: center; 
		width: 95%;
		height: 70%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;	
		margin-top: auto;
		margin-bottom: auto;
		margin-left: auto;
		margin-right: auto;
		transform: translate(0, -3%);
	}

	.gallery_carousel_slide iframe{
		width: 80%;
		height: 50vw;
		left: 10%;
		right: 10%;
	}


	.carousel_footer{
		padding-left: 0;
		padding-right: 0;

	}

	.carousel_footer_left{
		width: 100%;
		box-sizing: border-box;
		padding-left: 1rem;
		background-color: rgba(51, 51, 51, 0.8);
	}
	.carousel_slide_info{
		width: calc(100% - 7rem);
		max-width: initial;
		vertical-align: bottom;
	}
	.carousel_footer_right{
		position: absolute;
		right: 0.5rem;
		z-index: 100;
		bottom: 1rem;
		display: block;
		width: 4rem;
		text-align: right;
		vertical-align: bottom;
	}
}