@font-face {
	font-family: neutra-bold;
	src: url("https://www.historymuseum.ca/roue/fonts/Neutraface/Neutra2Text-Bold.otf") format("opentype");
}

html {
	background-color: #7bacb3;
}

body {
	margin: 0;
	padding: 0;
	background-color: #7bacb3;
	color: #ffffff;
	font-family: "Roboto", sans-serif;
	overflow-x: hidden;
}

::-moz-selection {
	background: #dadada;
}

::selection {
	background: #dadada;
}
a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

*:focus {
	outline: solid 5px rgba(77, 144, 254, 0.7) !important;
	outline-offset: -5px;
	-webkit-transition: outline 0s ease-out !important;
	-moz-transition: outline 0s ease-out !important;
	-o-transition: outline 0s ease-out !important;
	transition: outline 0s ease-out !important;
}

.heading {
	text-transform: uppercase;
	text-transform: uppercase;
	line-height: 3vw;
	font-size: 3vw;
	letter-spacing: -0.1vw;
	font-weight: bold;
}

h2,
h4 {
	color: #903618;
	font-size: 3.5vmin;
	font-family: "Abril Fatface", cursive;
}

.sub h3 {
	color: #903618;
	font-size: 5.5vmin;
	font-family: "Abril Fatface", cursive;
}

p {
	color: #111;
	font-size: 3vmin;
	line-height: 6vmin;
	margin-bottom: 2vmin;
	font-family: "Roboto", sans-serif;
}

p b {
	font-size: 2vmin;
}

.sequence__heading {
	color: #111;
	font-size: 8vmin;
	line-height: 1.2;
	margin-top: 3vmin;
}

.navigate--heading p {
	font-size: 3vmin;
	line-height: 5vmin;
	width: 95%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.sub p.description {
	font-size: 3vmin;
	line-height: 5vmin;
}

p.description {
	font-size: 2.5vmin;
	line-height: 4vmin;
}

p.caption {
	font-size: 1.8vmin;
	line-height: 2.8vmin;
	margin-bottom: 0;
}

.img__heading p.caption {
	margin-top: 3vmin;
	text-align: left;
}

p.credit,
.img-credit {
	font-size: 1.3vmin;
	line-height: 1.9vmin;
}

p.bold {
	font-weight: bold;
}

.navigate--heading.col__2-3 {
	padding-left: 5vmin;
	width: 50%;
}

.text-align-right {
	text-align: right;
}

.text-align-center {
	text-align: center;
}

h2.c {
	font-size: 3vmin;
}

.bg-white {
	display: block;
	background: #fff;
	padding: 1.5em;
}

.img__container h4 {
	width: calc((48vh + 48vw) / 2);
	text-align: left;
	margin: 0 auto;
	margin-top: 3vmin;
}

.spacer {
	height: 6vh;
}
/********** COLOR *************/

.pink,
.pink .iv-fullscreen,
.pink .transcript-wrapper::before {
	background: #dac3b6;
}

.green .breadcrumb {
	color: #0d331a;
	background: #8b9d91;
}

.green,
.green .row.wave-bg::after,
.green .iv-fullscreen,
.green.modal__wrapper,
.green .transcript-wrapper::before {
	background: #8b9d91;
}

.green h2,
.green h3,
.green h4 {
	color: #0d331a;
}

.green .img__icon,
.green .iv-fullscreen-close,
.green .lg-hotspot__button,
.green.slideshow .flickity-button,
.green.slideshow .flickity-button:hover,
.green .timeline__icon .img__icon::before,
.green .flickity-page-dots .dot::before,
.green .flickity-page-dots .dot,
.green .lg-hotspot .material-icons-outlined,
.green .slide__control a,
.green .slide__control .slide__next:hover,
.green .img-comp-slider .img__icon {
	background: #0d331a;
}

.green .lg-hotspot__button::before {
	border-top: 10px solid #0d331a;
}
.green .breadcrumb.tag::after {
	border-bottom: 40px solid #8b9d91;
}
.green .row.wave-bg::before {
	box-shadow: 165px 0px 0px 0px #8b9d91;
	border-right: 400px solid #8b9d91;
}

.sand .breadcrumb {
	color: #325c62;
	background: #ddc7ac;
}

.sand,
.sand .row.wave-bg::after,
.sand .iv-fullscreen,
.sand.modal__wrapper,
.sand .transcript-wrapper::before {
	background: #ddc7ac;
}

.sand h2,
.sand h3,
.sand h4 {
	color: #325c62;
}

.sand .img__icon,
.sand .iv-fullscreen-close,
.sand .lg-hotspot__button,
.sand.slideshow .flickity-button,
.sand.slideshow .flickity-button:hover,
.sand .timeline__icon .img__icon::before,
.sand .flickity-page-dots .dot::before,
.sand .flickity-page-dots .dot,
.sand .lg-hotspot .material-icons-outlined,
.sand .slide__control a,
.sand .slide__control .slide__next:hover,
.sand .img-comp-slider .img__icon,
.sand .transcript-btn,
.sand .transcript-close {
	background: #325c62;
}

.sand .lg-hotspot__button::before {
	border-top: 10px solid #325c62;
}
.sand .breadcrumb.tag::after {
	border-bottom: 40px solid #ddc7ac;
}
.sand .row.wave-bg::before {
	box-shadow: 165px 0px 0px 0px #ddc7ac;
	border-right: 400px solid #ddc7ac;
}

.pink .sequence__heading,
.green .sequence__heading,
.sand .sequence__heading {
	color: #111;
}
.green_highlight.active {
	color: #8b9d91;
}
.sand_highlight.active {
	color: #ddc7ac;
}