.img__icon {
	left: inherit;
	top: inherit;
	background: #585858;
	position: absolute;
	width: 3vw;
	height: 3vw;
	left: 1vw;
	padding: 0.4rem;
	background: #903618;
	z-index: 5;
	right: 2vw;
	bottom: 1vw;
}

.icon__fade {
	transition: 0.3s transform ease-out, 0.3s opacity ease-out;
}

.small .img__icon {
	right: 0.1vw;
	bottom: 0vw;
}

.b.small .img__icon {
	right: 0.6vw;
	bottom: 1.5vw;
}

.medium .img__icon {
}

.img__icon span {
	text-align: center;
	font-size: 2vw;
	width: 100%;
	top: 50%;
	position: relative;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	display: table;
	margin: 0 auto;
	position: relative;
}

.img__container {
	margin: 0 auto;
}

.img,
[data-img] {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	height: calc((35vh + 35vw) / 2);
	width: calc((48vh + 48vw) / 2);
	margin: 0 auto;
	cursor: pointer;
	display: block;
}

.medium [data-img] {
	/*	height: calc((25vh + 25vw) / 2);
	width: calc((35vh + 35vw) / 2);*/
}

.col__1-4 [data-img] {
	height: calc((15vh + 15vw) / 2);
	width: calc((25vh + 25vw) / 2);
	margin: 1vw auto;
}

[data-img]:hover {
	-webkit-transition: 0.3s border ease-in-out;
	-moz-transition: 0.3s border ease-in-out;
	-o-transition: 0.3s border ease-in-out;
	transition: 0.3s border ease-in-out;
}

.fixed {
	position: fixed;
}

.img__modal-close {
	background: #cb4b16;
	width: 5em;
	height: 5em;
	right: 1em;
	top: 1em;
	position: absolute;
	z-index: 10;
}

.iv-fullscreen {
	height: calc(100vh - 80px);
	-webkit-transition: 0.3s opacity ease-in-out;
	-moz-transition: 0.3s opacity ease-in-out;
	-o-transition: 0.3s opacity ease-in-out;
	transition: 0.3s opacity ease-in-out;
	pointer-events: none;
}

.iv-fullscreen-close {
	transform: none;
	right: 0;
	top: 0;
	padding: 20px;
	width: 50px;
	height: 50px;
	background: #903618;
}

.iv-fullscreen-close:hover {
	transform: none;
}

.iv-fullscreen-close:after,
.iv-fullscreen-close:before {
	background: #d6d2bc;
	height: 8px;
	width: 48px;
	display: none;
}

.transcript-btn,
.transcript-close {
	z-index: 1000;
	margin-right: 20px;
	right: 80px;
	top: 0;
	padding: 20px;
	width: 50px;
	height: 50px;
	background: #903618;
	position: absolute;
	cursor: pointer;
}

.transcript-close {
	z-index: 1000;
	right: 0;
	margin-right: 0;
}

.transcript-btn:hover,
.transcript-close:hover,
.iv-fullscreen-close:hover {
	opacity: 0.5;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.transcript-wrapper {
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	position: absolute;
	top: 0;
	transform: translateX(100%);
	-webkit-transition: transform 0.4s ease-in-out;
	-moz-transition: transform 0.4s ease-in-out;
	-o-transition: transform 0.4s ease-in-out;
	transition: transform 0.4s ease-in-out;
}

.transcript-wrapper::before {
	content: "";
	width: 100vw;
	height: 100vh;
	background: #111;
	position: absolute;
	opacity: 0.96;
}

.transcript-page-wrapper {
	height: 100vh;
}

.transcript-page {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	display: block;
	margin: 0 auto;
	max-width: 60vw;
	width: fit-content;
	position: relative;
	font-size: 2vh;
	line-height: 1.4;
	max-height: 60vh;
	text-align: left;
	overflow-y: auto;
	background: #fff;
	padding: 2em;
	color: #111;
}

.show,
.modal__wrapper.show {
	transform: translateX(0);
	opacity: 1;
}

.img-credit {
	bottom: 0;
	color: #191919;
	position: absolute;
	padding: 1em 2em;
}

.credit__content {
	font-size: 0.8em;
	line-height: 1.3;
	margin-top: 20px;
}

.image__view .iv-fullscreen-container {
	width: 70vw;
}

.modal__desc {
	width: 80vw;
	right: 0;
	height: calc(100vh - 170px);
	position: fixed;
	z-index: 1000;
	top: 90px;
}

.image__viewer .modal__desc .modal__inner {
	top: 50%;
	position: relative;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	display: table;
	margin: 0 auto;
	position: relative;
	width: 100%;
}

.iv-fullscreen-container {
	float: left;
	width: 70vw;
	overflow: initial;
}

.image__viewer .image-content {
	bottom: 10px;
	padding: 2em;
	background: #fff;
	overflow: visible;
	color: #111;
	max-width: 400px;
	line-height: 1.8;
	max-height: 50vh;
	overflow: auto;
	float: right;
}