/* --------------------- */
/* FONT IMPORTS */
/* --------------------- */

@font-face {
  font-family: 'stag';
  src: url('Stag-Semibold.otf');
  font-weight: 400;
  font-style: normal;
}

/* --------------------- */
/* GENERAL STYLES */
/* --------------------- */

body, html {
	height: 100%;
	position: relative;
   font-family: Arial;
   font-size: 20px;
   background-color: #fdfbf8;
}

.landscape {
    height: 100%;
    width: 100%;
}

.portrait {
	height: 100%;
	overflow: hidden;
}


@media screen and (orientation:landscape) {
	.portrait {
		display:none;
	}
}
@media screen and (orientation:portrait) {
	.landscape {
		display:none;
	}
}

/* --------------------- */
/* TYPOGRAPHY */
/* --------------------- */

.portrait h1 {
	margin: 45% 0.75em;
}

.landscape .headings {
	background-color: #FDFCFC;
	padding: 1em 5em 1em 1em;
   text-align: left;
}

.landscape .title {
	font-family: 'stag';
	font-size: 1.75em;
	margin: 0;
}

.landscape .annotation {
	font-size: 1em;
	margin: 0;
}

.landscape h1 {
	position: relative;
	top: 49%;
}

h2 {
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}

p { margin: 0.5em 0; }

.underline { text-decoration: underline;}

/* --------------------- */
/* Swiper + Image Styles */
/* --------------------- */
.swiper-wrapper { height: auto; }

.swiper-container {
   width: 100%;
   height: auto;
	background-color: #FFFEFE;
}

.swiper-slide {
	overflow: hidden;
   text-align: center;
   background-color: #FFFEFE;
}

.swiper-slide img { max-width: 500px; }

.swiper-button-disabled { display: none; }

.swiper-button-prev,
.swiper-button-next {
	background-color: none !important;
   background-size: 75px 75px;
   width: 55px;
   height: 55px;
}

#background,
#background2 {
	max-width: 1750px;
	width: 100%;
   height: auto;
}

/* --------------------- */
/* MODAL STYLES */
/* --------------------- */

.modal-content {
  color: black;
  padding: 2.5em;
  padding-bottom: 0.5em;
}

.modal-content h1,
.modal-content h2 {
  margin-top: 1em;
  margin-bottom: 0.25em;
  font-size: 1.5em;
  font-family: "regular", sans-serif;
}

.modal-content p {
  border-left: 5px solid white;
  padding-left: 5px;
  font-size: 0.75em;
  font-family: 'regular';
}

.modal-content .green { padding-left: 8px; border-left: 5px solid white; border-left-color: #166761; }
.modal-content .blue { padding-left: 8px; border-left: 5px solid white; border-left-color: #4599D3; }
.modal-content .red { padding-left: 8px; border-left: 5px solid white; border-left-color: #B21519;}

.close-modal-01, .close-modal-02, .close-modal-03,
.close-modal-04, .close-modal-05, .close-modal-06,
.close-modal-07, .close-modal-08, .close-modal-09 {
	cursor: pointer;
   margin: 0 auto;
   text-align: right;
}

.close-modal-01 h3, .close-modal-02 h3, .close-modal-03 h3,
.close-modal-04 h3, .close-modal-05 h3, .close-modal-06 h3,
.close-modal-07 h3, .close-modal-08 h3, .close-modal-09 h3 {
   font-weight: normal;
   text-decoration: underline;
}