@charset "UTF-8";

@font-face { font-family: 'Comfortaa-300';
	src: url('../fonts/comfortaa-v34-latin-300.woff')  format('woff'),
	url('../fonts/comfortaa-v34-latin-300.woff2')  format('woff2'); }

@font-face { font-family: 'Comfortaa-500';
	src: url('../fonts/comfortaa-v34-latin-500.woff')  format('woff'),
	url('../fonts/comfortaa-v34-latin-500.woff2')  format('woff2'); }

@font-face { font-family: 'Comfortaa-700';
	src: url('../fonts/comfortaa-v34-latin-700.woff')  format('woff'),
	url('../fonts/comfortaa-v34-latin-700.woff2')  format('woff2'); }

@font-face { font-family: 'Source-ExtraLight';
	src: url('../fonts/SourceSansPro-ExtraLight.ttf')  format('woff')}

@font-face { font-family: 'Source-Light';
	src: url('../fonts/SourceSansPro-Light.ttf')  format('woff')}

@font-face { font-family: 'Source-Regular';
	src: url('../fonts/SourceSansPro-Regular.ttf')  format('woff')}

@font-face { font-family: 'Source-SemiBold';
  	src: url('../fonts/SourceSansPro-SemiBold.ttf')  format('woff')}

@font-face { font-family: 'Source-Bold';
	src: url('../fonts/SourceSansPro-Bold.ttf')  format('woff')}

:root {
	--dark-grey: #464646;
	--medium-grey: #808080;
	--light-red: #D57A6F;
	--lighter-red: #F6BBBA;
	--contrast-red: #D83A2C;
	--light-grey: #d8d8d8;
	--very-light-grey: #f6f6f6;
	--old-white: #f8eef3;
	--internal-margin: calc(25px + (50 - 25) * ((100vw - 600px) / (1080 - 600)));
	--outer-shadow: 6px 6px 0px var(--medium-grey);
	--outer-shadow-red: 6px 6px 0px var(--light-red);
	--outer-shadow-inverted: 6px 6px 0px var(--medium-grey);
	--outer-shadow-small: 3px 3px 0px var(--light-red);
	--inner-shadow: inset 7px 7px 0px var(--light-red);
	--inner-shadow-small: inset 3px 3px 0px var(--light-red);
	--inner-shadow-padding: 20px 12px 12px 20px;
	--outer-shadow-bottom: 0px 3px 3px rgba(0, 0, 0, 0.3);
	--outer-shadow-top: 0px -3px 3px rgba(0, 0, 0, 0.3);
	--outer-shadow-left: -3px 0px 3px rgba(0, 0, 0, 0.3);
	--inner-shadow-top: inset 0px 3px 3px rgba(178, 178, 178, 1);
	--inner-shadow-recess: inset 6px 6px 6px rgba(0, 0, 0, 0.3);
	--context-menu-width: 600px;
	--border-thick: 2.5px solid var(--dark-grey);
	--border-thick-red: 8px solid var(--light-red);
	--border-thin: 2px solid var(--dark-grey);
	--border-thin-red: 3px solid var(--light-red);
	--transition-linear: 0.1s linear;
	--background-hatch: repeating-linear-gradient(-45deg,white 0px, white 2px,var(--light-red) 2px,var(--light-red) 4px);
  --p-small: clamp(12px, 2.6vw, 14px);
}

html {
	scroll-behavior: smooth;
	word-break: normal;
}

body {
	margin: 0 0 0 0;
  color: var(--dark-grey);
	font-family: Source-Regular;
}

body {
	margin: 0 0 0 0;
	overflow-x: hidden;
  background: white;
  background-image: radial-gradient(var(--light-grey) 1px, transparent 0);
  Background-size: 8px 8px;
  background-position: -6px -6px;
}

a {
    color: black;
    text-decoration: none;
    font-family: Source-Regular;
		font-size: clamp(16px, 1.5vw, 18px);
		cursor: pointer;
		transition: var(--transition-linear);
}

hr {
	border: none;
	height: 2px;
	color: #333;
	background-color: #333;
}

/*a:hover {
  color: #de5a4d;
}*/

p {
		font-family: Source-Light;
		font-size: clamp(12px, 1.5vw, 16px);
}

button, .breadcrumb-item a, .breadcrumb-item a:hover {
	all: unset;
}

h1 {
	font-size: clamp(26px, 3vw, 36px);
	font-family: Source-SemiBold;
	line-height: 1.5;
	color: var(--dark-grey);
}

h2 {
	font-size: clamp(24px, 4.3vw, 30px);
	font-family: Source-SemiBold;
	line-height: 1.3;
	color: var(--dark-grey);
}

h3, .nav-item {
	font-size: clamp(20px, 3.5vw, 26px);
	font-family: Source-SemiBold;
	line-height: 1.3;
	color: var(--dark-grey);
}

h4, button {
	font-size: clamp(16px, 3.5vw, 20px);
	font-family: Source-SemiBold;
	line-height: 1.3;
	color: var(--dark-grey);
}

h5, .help:before, #lp-submenu li {
	font-size: clamp(17px, 3.5vw, 18px);
	font-family: Source-SemiBold;
	line-height: 1.3;
	color: var(--dark-grey);
	margin-bottom: 20px;
}

p, form {
	font-size: clamp(12px, 1.5vw, 16px);
	font-family: Source-Light;
	line-height: 1.3;
	color: var(--dark-grey);
}

.p-small {
  font-size: clamp(12px, 2.6vw, 14px);
	font-family: Source-Regular;
	line-height: 1.3;
	color: var(--dark-grey);
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

input {
  text-align: center;
  font-family: Source-Regular;
  font-size: clamp(14px, 2vw, 18px);
	color: black;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 5px 5px 5px 5px;
	border: 1px solid black;
}

input:focus {
    outline: none !important;
    border: var(--border-thin-red);
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
  }

button {
	padding: 0;
	border: none;
	background: none;
}

.nav-link {
	font-family: Source-Regular;
	padding: 3px;
	border-radius: 3px;
}

.nav-link:hover {
		color: var(--light-red);
		box-shadow: var(--outer-shadow-red);
}

.hide {
	display:none!important;
}

.fade {
	opacity: 0.4;
}

.turnaround {
	transform: rotate(180deg);
}

.margin-top {
	margin-top: 20px;
}

.hidden {
	visibility: hidden;
	position: absolute;
	top: 0;
}

.show {
	display: initial!important;
}

.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.info {
  font-size: 14px;
  line-height: 20px;
}

.turnaround {
	transform: rotate(180deg);
	transform-origin: center;
}

.larger-text {
    font-size: clamp(18px, 3vw, 25px);
}

.content, #login-wrapper {
	position: relative;
	width: 70vw;
	left: 15vw;
	margin-top: 80px;
	padding: 5vw;
	box-sizing: border-box;
	border: var(--border-thin);
	background-color: white;
}

.text-image p, .image-text p, .text-image h1, .image-text h1 {
	width: 30vw;
}

.image-text p, .image-text h1, .image-text > .call-to-action {
	margin-left: 30vw;
}

.call-to-action {
	border: var(--border-thick);
	padding: 7px;
	width: fit-content;
	height: fit-content;
	cursor: pointer;
	position: relative;
	background: var(--lighter-red);
	border-radius: 4px;
	transition: var(--transition-linear);
}

.call-to-action:hover {
	color: white;
	box-shadow: var(--outer-shadow);
}

.cta-secondary, .add-this, .remove-later-additions {
	border: var(--border-thin);
	padding: 4px;
	font-size: var(--p-small);
	width: fit-content;
	height: fit-content;
	cursor: pointer;
	position: relative;
	background: white;
	border-radius: 3px;
	transition: var(--transition-linear);
}

.cta-secondary:hover, .add-this:hover, .remove-later-additions:hover {
	box-shadow: var(--outer-shadow-small);
}

.opacityzero {
	opacity: 1;
}

.background {
	background-color: rgb(255, 255, 255, 0.90);
	z-index: 50;
	width: 100%;
	height: 100%;
	position: fixed!important;
}

::-webkit-input-placeholder {
  text-align: center;
  font-family: Source-Light;
  font-size: clamp(16px, 1.5vw, 20px);
	color: black;
}

:-moz-placeholder {
  text-align: center;
  font-family: Source-Light;
  font-size: clamp(16px, 1.5vw, 20px);
	color: black;
}

#search {
  border: var(--border-thin);
  border-radius:3px;
}

#search-form-form, #search {
    margin-bottom: 20px;
    background: white;
    position: relative;
    display: block;
    height: 60px;
    left: 0;
    text-align: left;
}

#search-form-form {
	display: flex;
	flex-direction: row;
	width: 75%;
}

#search {
	width: 160%;
	}

#search-form input::placeholder {
	font-size: clamp(16px, 1.5vw, 20px);
	text-align: left;
}

.search-button {
  background: transparent;
  border: none;
  outline: none;
	position: absolute;
  top: 15px;
	right: 10px;
	cursor: pointer;
}

.search-button img {
  width: 30px;
  height: 30px;
  object-fit: cover;
}

@media (max-width: 1250px) {
  #search-form {
    width: 130%;
  }
	#welcome-marker {
		width: 100%;
	}
}

@media (max-width: 950px) {
  /*#search, #browse, #search-form {
      width: 250px;
      height: 38px;
      left: calc(50% - 125px);
  }*/
  .content {
    width: 80vw;
    left: 10vw;
		padding: 2vw;
  }
	#search-form {
		width: 150%;
	}
	#welcome-marker {
		width: 115%;
	}
}

@media (max-width: 530px) {
  .call-to-action {
    display: inline-block;
    position: relative;
    width: 87vw;
		text-align: center;
  }
	#search-form {
		width: 230%;
	}
	#welcome-marker {
		width: 170%;
	}
	.search-in-header {
		display: none;
	}
}

@media (max-width: 450px) {
  .call-to-action {
    width: 70vw;
		text-align: center;
  }
	.content {
		width: 90vw;
		left: 5vw;
	}
}

#actions-wrapper {
	width: 25vw;
	height:4000px;
	left: 75vw;
	position: absolute;
	top: 0;
	right: 0px;
}

#actions {
	margin-top: 45vh;
	position: sticky;
	top: 20vh;
	padding: 0 20px 0 20px;
	margin-left: 20px;
}

#actions a {
	line-height: 50px;
}


ul.breadcrumb {
  padding: 10px 0 16px 0;
  list-style: none;
}
ul.breadcrumb li {
  display: inline;
  font-size: 14px!important;
	font-family: Source-Regular!important;
	color: #de5a4d;
}

ul.breadcrumb a {
	font-size: 14px!important;
	font-family: Source-Light!important;
}

ul.breadcrumb li+li:before {
  padding: 8px;
  content: "/\00a0";
}
ul.breadcrumb li a {
  text-decoration: none;
}

.ingest-title, .ingest-breadcrumbs {
  border: none;
  padding: 0;
  margin-top: 30px;
}

.ingest-title h1 {
  margin-top: 150px!important;
}

.progress-container {
  width: 100vw;
	top: 72px;
  position: fixed;
  left: 0vw;
  height: 8px;
	background-color: white;
	box-shadow: var(--outer-shadow-bottom);
  z-index: 200;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: var(--light-red);
  width: 0%;
}

.tutorial {
	background-color: rgb(255, 255, 255, 0.95);
	z-index: 80;
	width: 100vw!important;
	height: 100vh!important;
	position: fixed!important;
	top: 0!important;
	left: 0!important;
	cursor: pointer;
}

.tutorial p {
	text-align: center!important;
	width: 50%!important;
	left: 25%!important;
	top: 25%!important;
	position: relative!important;
	z-index: 90!important;
	font-size: 20px!important;
	font-family: Source-Light!important;
}

.continue {
	border: solid;
	border-width: 2px;
	padding: 5px 5px 5px 5px;
	margin: 0 10px 0 10px;
	color: #de5a4d;
	cursor: pointer;
	background-color: transparent;
	box-sizing: border-box;
	font-family: Source-Regular;
	font-size: clamp(16px, 1.5vw, 18px);
	z-index: 100;
}

.continue:hover {
		background-color: #de5a4d;
		color: white;
}

.compass {
	font-size: 40px;
	color: #de5a4d;
}

@media (max-width: 450px) {
	.tutorial p {
		width: 90%!important;
		left: 5%!important;
		top: 15%!important;
		font-size: 16px!important;
	}
}

.tutorial {
	line-height: 30px;
}

.hide {
	display: none;
}