* {
  margin: 0;
  padding: 0;
}

@font-face{
    font-family:"Beaufort W01 Regular1339698";
    src:url("../fonts/ebf5a4d1-da64-4afa-90e3-3176e7098168.woff2") format("woff2"),url("../fonts/bee31280-83bf-4a1a-9968-84700dfc6dfb.woff") format("woff");
}

html {
	font-family: "Beaufort W01 Regular1339698", sans-serif;
  padding-left: 40px;
  -moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

li {
	list-style: none;
}

.logo {
	text-align: center;
	position: relative;
	display: block;
	height: 6vh;
	margin-top: 10px;
}

.logo img {
	width: 55%;
}

header {
	width: 40px;
	display: block;
	position: fixed;
	float: left;
	left: 0;
}

header:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background: #000;
}

nav {
	width: 100%;
	position: relative;
	float: left;
	height: 94vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	list-style: none;
}

nav > li {
	position: relative;
	list-style: none;
	text-align: center;
	font-size: 14pt;
}

nav > li > a {
	position: absolute;
	transform: translate(-50%,-50%) rotate(-90deg);
	width: auto;
	height: auto;
	text-decoration: none;
	color: #000;
	padding-bottom: 3px;
}

.template-wrap {
	width: 100%;
	height: auto;
	float: left;
}

.container:after {
  content: "";
  display: table;
  clear: both;
}

.blur {
  filter: blur(1px);
  -moz-filter: blur(1px);
  -webkit-filter: blur(1px);
  -o-filter: blur(1px);

  transition: filter 600ms, -webkit-filter 600ms, -moz-filter 600ms, -o-filter 600ms;
}

.blur.lazyloaded {
  filter: blur(0px);
  -moz-filter: blur(0px);
  -webkit-filter: blur(0px);
  -o-filter: blur(0px);
}

/*** Image lightbox ***/
#lightbox {
	background-color: rgba(0, 0, 0, 0.95);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
}
#lightbox p { text-align: right; color: #fff; margin-right: 20px; font-size: 12px; }

.slide-image {   
	height: 80%;
	max-width: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  object-fit: contain;
}

.icontainer-frame {
	position: absolute;
  left: 10%; 
  right: 10%;
  top: 50%;
  /* video height / video width */
  padding-bottom: 56.2%;
  /* the above value * 0.5 */
  margin-top: -28.1%;
  height: 0;
  overflow: hidden;
}

.icontainer-frame iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.slide-iframe {   
  max-height: 67%;
  max-width: 67%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  margin: auto;
  display: block;
}
/* slideshow styles */
#slideshow {  
	z-index: 100;
	max-width: 900px;
  max-height: 90%;
  margin: 1% auto;
  display: block; 
}

#slideshow ul > li { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; list-style: none; }
.prev, .next { position: absolute; top: 48.5%; padding: .25em 1em; color: #000; text-decoration: none; }
.next { right: 10px; }
.prev { left: 10px; }

.material-icons {
	font-size: 40pt !important;
}

.slide-caption {
	color: #FFF;
	width: 100%;
  line-height: 40px;
  bottom: 10px;
  position: absolute;
}

.slide-caption-mobile {
	width: 40%;
	font-size: 14px;
	bottom: 0;
	position: absolute;
	margin-left: 10px;
	margin-bottom: 15px !important;
}

.close {
	float: right;
	margin-top: 25px;
	margin-right: 25px;
	z-index: 1001;
	position: relative;
}

.close:hover {
	cursor: pointer;
}

.exit {
  height: 23px;
}

.chevron {
	height: 13px;
}

/*****/
	.navbar-header, .mobile-logo, .toggle-button {
		display: none !important;
	}


.menu a[aria-current] {
  color: #A8A8A8;
}

.side-menu-wrapper { /* style menu wrapper */
  overflow: scroll;
  background: #495A46;
  padding: 0px 0 0 25px;
  position: fixed; /* Fixed position */
  top: 0;
  left: -350px; /* Sidebar initial position. "right" for right positioned menu */
  height: 100%;
  z-index: 2;
  transition: 0.5s; /* CSS transition speed */
  width: 325px;
  -ms-overflow-style: none; 
  scrollbar-width: none; 
  /*font: 20px "Courier New", Courier, monospace;*/
}

.side-menu-wrapper > ul{ /* css ul list style */
  list-style:none;
  padding:0;
  margin:0;
  overflow-y: auto; /* enable scroll for menu items */
  width:500px; /* this width will hide scroll bar */
  height:95%;
}

.side-menu-wrapper > ul > li > a { /* links */
  display: block;
  padding: 6px 4px 6px 4px;
  color: #FFF;
  transition: 0.3s;
  text-decoration: none;
}

.side-menu-wrapper > a.menu-close { /* close button */
  padding: 13px 0 4px 24px;
  display: block;
  margin: 0px 0px -10px 265px;
}

.side-menu-wrapper::-webkit-scrollbar {
  display: none;
}

.slide-menu-open:hover {
	cursor: pointer;
}

.contact-container {
	padding-top: 32px;
}

.contact-wrap {
	margin-bottom: 28px;
}

.contact-txt, .contact-txt a {
	color: #FFF;
	font-size: 14pt;
}

.menu-close {
	position: fixed;
}

.menu-close img {
	width: 22px;
	height: auto;
}

/*********menu toggle*********/
.navbar-header {
  width: 100%;
  background-color: #FFF;
  display: block;
  position: fixed;
  height: 50px;
  z-index: 99;
  border-bottom: 1px solid;
}

.mobile-logo img {
  height: 24px;
  display: inline;
  position: absolute;
  margin-left: 15px;
  margin-top: 14px;
  position: fixed;
  z-index: 100;
}

.toggle-button {
  position: fixed;
  right: 0;
  padding: 16px 15px;
  height: 20px;
  width: 30px;
  cursor: pointer;
  z-index: 101;
 }

 .bar {
  background-color: black;
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
}

.bar + .bar {
  margin-top: 8px;
}

/*.middle {
  top: 15px;
}

.bottom {
  top: 30px;
}
*/
.toggle-active .bar {
  background-color: #fff;
}

.toggle-active .top {
  -webkit-transform: translateY(6px) translateX(0) rotate(45deg);
}

.toggle-active .middle {
  opacity: 0;
}

.toggle-active .bottom {
  -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
}

.toggle-active {
  margin-top: 5px;
  padding-right: 13px;
}

/** styling for the overlay. The sliding-down effect of the overlay is given by the initial zero height and the onclick 100% height. **/

.overlay {
  position: fixed;
  background-color: #495A46;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
}


/* class added to the overlay on click*/

.nav-active {
  opacity: 1;
  visibility: visible;
  height: 100%;
  z-index: 100;
}

.overlay ul {
  display: block;
  position: relative;
  left: 0;
  font-size: 30px;
  text-align: center;
  list-style: none;
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 30%;
  margin-bottom: 30%;
}

.overlay ul li {
  display: block;
}

.overlay ul li a {
  color: #fff;
  text-decoration: none;
}

h1 {
  position: absolute;
  top: 40%;
  left: 50%;
  /*horizontal centering*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-size: 2em;
  color: white;
  font-family: "Bungee Inline", sans-serif;
  
}

.hidden {
  opacity: 0;
}


/***** MOBILE PHONES *****/
@media only screen and (hover: none) and (pointer: coarse) and (max-width: 767px){
	html {
		padding-left: 0;
	}

	.header {
		display: none;
	}

	.contact-wrap {
		margin-left: 15px;
	}

	.next { 
		right: 8px;
		padding-right: 0;
	}

	.prev { 
		left: 7px; 
		padding-left: 0;
	}

	.chevron {
		height: 10px;
	}

	.icontainer-frame {
		padding-bottom: 57%;
	}

	.slide-caption {
    font-size: 12pt;
    line-height: 12pt;
    bottom: 0;
	}

	.navbar-header, .mobile-logo, .toggle-button {
		display: block !important;
	}

	.overlay ul {
		font-size: 26pt;
		margin-top: 24%;
		margin-bottom: 24%;
		height: 70%;
	}
}


/***** TABLET *****/
@media only screen and (hover: none) and (pointer: coarse) and (min-width: 768px){
	html {
		padding-left: 0;
	}

	.header {
		display: none;
	}

	.contact-wrap {
		margin-left: 15px;
	}

	.next { 
		right: 8px;
		padding-right: 0;
	}

	.prev { 
		left: 7px; 
		padding-left: 0;
	}

	.chevron {
		height: 10px;
	}

	.icontainer-frame {
		padding-bottom: 57%;
	}

	.slide-caption {
    font-size: 12pt;
    line-height: 12pt;
    bottom: 0;
	}

	.navbar-header, .mobile-logo, .toggle-button {
		display: block !important;
	}

	.overlay ul {
		font-size: 32pt;
		margin-top: 15%;
		margin-bottom: 15%;
	}
}

@media only all and (max-width: 767px) { 
	html {
		padding-left: 0;
	}

	.header {
		display: none;
	}

	.contact-wrap {
		margin-left: 15px;
	}

	.next { 
		right: 8px;
		padding-right: 0;
	}

	.prev { 
		left: 7px; 
		padding-left: 0;
	}

	.chevron {
		height: 10px;
	}

	.icontainer-frame {
		padding-bottom: 57%;
	}

	.slide-caption {
    font-size: 12pt;
    line-height: 12pt;
    bottom: 0;
	}

	.navbar-header, .mobile-logo, .toggle-button {
		display: block !important;
	}

	.overlay ul {
		font-size: 26pt;
		margin-top: 24%;
		margin-bottom: 24%;
		height: 70%;
	}
}