/*DESKTOP*/

/* index */
#index{
}

.col_titles {
	margin-bottom: calc(var(--rowMargin)*0.5);
}

.col_titles, .index_row {
	display: grid;
	grid-template-columns: var(--gridSetUp);
	grid-gap: 0 var(--gridMargin);
	text-transform: uppercase;
}

a.index_row:hover .title,
a.index_row:hover .date,
a.index_row:hover .count,
a.index_row:hover .exhib {
	text-decoration: var(--linkDeco);
}

.index_row .thumb {
	width: var(--srcMaxWidth);
	height: var(--srcMaxHeight);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
    justify-content: center;
    align-items: center;
	pointer-events: none;
	z-index: -1;
}

.index_row .thumb img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	display: none;
	opacity: 0;
	transition: opacity var(--transitionTime);
}

a.index_row:hover .thumb img {
	display: inline;
	opacity: 1;
}

/* project */
body.project {
	overflow: hidden;
}

.project_header {
	position: fixed;
	top: var(--marginX);
	left: var(--marginY);
	text-transform: uppercase;
}

.carousel {
	width: 100%;
    margin-top: calc(var(--rowMargin)*-1);
	overflow: hidden;
}

.carousel .slide {
	position: relative;
	width: 100%;
    height: 100vh;
	display: flex;
    justify-content: center;
    align-items: center;
}

.carousel .slide img{
	max-width: var(--srcMaxWidth);
	max-height: var(--srcMaxHeight);
}

.carousel .slide p{
	max-width: var(--txtMaxWidth);
	max-height: var(--txtMaxHeight);
}

.carousel .slide#video iframe,
.carousel .slide#video video {
	z-index: 50;
}

.carousel .slide iframe {
	width: var(--srcMaxWidth);
	height: var(--srcMaxHeight);
	object-fit: cover;
}
	
.carousel .slide .caption {
	position: absolute;
	font-size: var(--smallFont);
	text-align: center;
	bottom: var(--marginX);
}

.close_project,
.carousel .slide .next_slide,
.carousel .slide .prev_slide {
	width: auto;
	height: var(--buttonHeight);
}

.close_project img,
.carousel .slide .next_slide img,
.carousel .slide .prev_slide img {
	width: auto;
	height: var(--buttonHeight);
}

.close_project {
	position: fixed;
	top: var(--marginX);
	right: var(--marginY);
}

.carousel .slide .next_slide,
.carousel .slide .prev_slide {
	width: 50%;
	height: var(--divHeight);
    display: flex;
    align-items: center;
}

.carousel .slide .next_slide {
	position: absolute;
	justify-content: end;
	right: 0;
}

.carousel .slide .prev_slide {
	position: absolute;
	justify-content: start;
	left: 0;
}

/*TABLET*/
@media (max-width:1024px) {
	
}

/*MOBILE*/
@media (max-width:600px) {

}