*{
 padding: 0;
 margin: 0;
}

html {
 scroll-behavior: smooth;
}

body {
 font-size: calc(15px + 0.65vw);
 /*font-size: clamp(100%, 1rem + 2vw, 16px);*/
 font-family: Arial;
 background-color: #008dd2;
 color: #fff;
}

/* Works on Firefox */
* {
 scrollbar-width: thin;
 scrollbar-color: #e7e7e7 #008dd2;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
 width: 8px;
}

*::-webkit-scrollbar-track {
 background: #008dd2;
}

*::-webkit-scrollbar-thumb {
 background-color: #e7e7e7;
}

section {
 height: 100vh;
}

h1 {
 font-weight: 500;
 }

h2 {
 font-weight: 400;
}

h3 {
 font-weight: 500;
}

h4 {
 font-weight: 500;
}

h5 {
 font-weight: 500;
}

p {
 color:#fff;
}

a {
 color: #fff;
 text-decoration: none;
}

.textcenter {
 text-align: center;
}

.crossfade > figure {
 animation: imageAnimation 35s linear infinite 0.2s;
 backface-visibility: hidden;
 background-size: cover;
 background-position: center center;
 height: 100%;
 width: 100%;
 left: 0px;
 opacity: 0;
 position: absolute;
 top: 0px;
}

.crossfade > figure:nth-child(1) {
 background-image: url('../img/001.webp');
}
.crossfade > figure:nth-child(2) {
 animation-delay: 5s;
 background-image: url('../img/002.webp');
}
.crossfade > figure:nth-child(3) {
 animation-delay: 10s;
 background-image: url('../img/003.webp');
}
.crossfade > figure:nth-child(4) {
 animation-delay: 15s;
 background-image: url('../img/004.webp');
}
.crossfade > figure:nth-child(5) {
 animation-delay: 20s;
 background-image: url('../img/005.webp');
}
.crossfade > figure:nth-child(6) {
 animation-delay: 25s;
 background-image: url('../img/006.webp');
}
.crossfade > figure:nth-child(7) {
 animation-delay: 30s;
 background-image: url('../img/007.webp');
}

@keyframes imageAnimation {
 0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}

/* header */

.header {
 position: fixed;
 top: 0;
 width: 90vw;
 left: 50vw;
 transform: translate(-50%, 0);
 z-index: 999;
}

.header ul {
 float: right;
 text-align: right;
 list-style: none;
 overflow: hidden;
}

.header li a {
 display: block;
 padding: 15px;
 text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
 color: #e7e7e7;
}

.header .logo {
 display: block;
 float: left;
 padding-top: 18px;
 text-decoration: none;
 max-width: 300px;
}

/* menu */

.header .menu {
 background-color: #008dd2;
 clear: both;
 display: block;
 max-height: 0;
 font-size: 20px;
 transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
 right: 0;
 cursor: pointer;
 display: inline-block;
 top: 35px;
 padding-right: 6px;
 position: fixed;
 user-select: none;
}

.header .menu-icon .navicon {
 background: #fff;
 display: block;
 height: 5px;
 position: relative;
 transition: background .2s ease-out;
 width: 36px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
 background: #fff;
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 position: absolute;
 transition: all .2s ease-out;
}

.header .menu-icon .navicon:before {
 top: 12px;
}

.header .menu-icon .navicon:after {
 top: -12px;
}

.header .menu-btn {
 display: none;
}

.header .menu-btn:checked ~ .menu {
 max-height: 350px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
 background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
 transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
 transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
 top: 0;
}

/* down btn */

.scroll-down-arrow {
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
 background-size: contain;
 background-repeat: no-repeat;
}

.scroll-down-link {
 cursor:pointer;
 height: 60px;
 width: 80px;
 margin: 0px 0 0 -40px;
 line-height: 60px;
 position: absolute;
 left: 50%;
 bottom: 10px;
 color: #fff;
 text-align: center;
 font-size: 70px;
 z-index: 100;
 text-decoration: none;
 text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
 -webkit-animation: fade_move_down 2s ease-in-out infinite;
 -moz-animation:    fade_move_down 2s ease-in-out infinite;
 animation:         fade_move_down 2s ease-in-out infinite;
}

/*animated scroll arrow animation*/

@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,20px); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,20px); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,20px); opacity: 0; }
}

/* sticky menu bg */

.menubg {
 position: -webkit-sticky !important;
 position: sticky !important;
 top: 0;
 background: #008dd2;
 width: 100%;
 height: 82px;
 opacity: 0.9;
 z-index: 90;
 }

.blue {
 background: #008dd2;
 }

/* containers */
.main {
}

.slide-container {
 scroll-snap-type: y mandatory;
 overflow-y: scroll;
 height: 100vh;
}

.slide {
 position: absolute;
 top: 100vh;
}

.container {
 position: relative;
 float: left;
 width: 90%;
 left: 50%;
 transform: translate(-50%, 0);
}

.container50 {
 position: relative;
 width: 100%;
 float: left;
 overflow: hidden;
 margin-bottom: 4%;
}

.container33 {
 position: relative;
 width: 100%;
 float: left;
 text-align: left;
}

.image {
 display: block;
 width: 100%;
 transform: scale(1);
 transition: .75s ease;
}

.overlay {
 position: absolute;
 top: 0;
 transition: .5s ease;
 opacity:0;
 padding: 20px;
}

.container50:hover .overlay {
 opacity: 1;
}

.container50:hover .image {
 transform: scale(1.1);
}

.textbox {
 width: 90%;
 min-height: 10vh;
 z-index: 5;
}

/* map */
.module {
}

#toggle-input {
  display: none;
}

.toggle-label {
  display: block;
  cursor: pointer;
}

.toggle-content {
  max-height: 0;
  overflow: hidden;
  -moz-transition: ease 0.3s max-height;
  -o-transition: ease 0.3s max-height;
  -webkit-transition: ease 0.3s max-height;
  transition: ease 0.3s max-height;
}

#toggle-input:checked ~ .toggle-content {
  max-height: 600px;
}

.footer {
 position: relative;
 padding-top: 3vh;
 margin-top: 3vh;
 margin-bottom: 3vh;
 border-top: 3px solid #fff;
 min-height: 30vh;
}

/* 1em = 16px *--------------------------------------------------------- */

@media (max-width: 360px) {
.header .logo {
 display: block;
 float: left;
 padding-top: 22px;
 width: 250px;
}
}

@media (min-width: 960px) {
.header {
}

.header .logo {
 display: block;
 float: right;
 padding-right: 7px;
 padding-top: 9px;
 max-width: 350px;
}

.header ul {
 padding-top: 13px;
}

.header li {
 float: left;
}

.header li a {
 padding-left: 0;
 padding-right: 5vw;
}

.header .menu {
 background-color: transparent;
 clear: none;
 float: left;
 max-height: none;
}

.header .menu-icon {
 display: none;
}

.container {
 float: left;
}

.container50 {
 width: 48%;
 float: left;
}

.container33 {
 width: 33.333%;
 float: left;
}

.right {
 float: right;
}

.left {
 float: left;
}

.clear {
 clear: both;
}

.textleft {
 text-align: left;
}
.textcenter {
 text-align: center;
}
.textright {
 text-align: right;
}
.footer {
 min-height: 15vh;
}
}