body{ margin: 0px; }
*{ box-sizing: border-box; font-family: "Noto Serif", serif;}
.content-section{ max-width: 1280px; margin-right: auto; margin-left: auto; }

#footer{ border-top: 1px solid #CDCDCD; padding: 10px; position: relative; margin-top: 30px; font-size: 10pt; font-family: Arial; color: #002063; text-align: center; }
#header{ border-bottom: 1px solid #CDCDCD; padding: 10px; position: relative; margin-bottom: 30px; }
#logo{ max-height: 100%; display: inline-block; position: relative; top: 10px; }
#page-title{ display: inline-block; font-size: 2em; max-width: 400px; position: relative; top: 50%; padding-left: 20px; }
#logo img{ height: 100px; }
#menu-button{ display: none; position: absolute; top: 50%; transform: translateY(-30%); zoom:3; right: 10px; z-index: 100001;  }
#menu{ display: inline-block; background-color: #f5f5f5; border-radius: 5px; position: relative; top: -25px; margin-left: 50px; }
#menu li{ display: inline-block; list-style: none; padding: 0px; padding: 20px; margin-right: 50px; text-transform: uppercase; position: relative; }
#menu li:last-child{ margin-right: 0px; }
#menu li:hover{ background-color: #e1e1e1; border-radius: 5px; }
#menu ul{ padding: 0px; margin: 0px; }

#menu ul ul{ display: none; }
#menu li:hover>ul{ display: block; z-index: 100; position: absolute; top: 100%; left: 0px; width: 200px; background-color: #e1e1e1; border: 1px solid #e7e7e7; box-shadow: 0px 0px 3px 1px grey; border-bottom: 5px solid #f1b401; border-radius: 5px; }

#menu a{ color: #002063; text-decoration: none; position: relative; font-family: Arial; }
#menu a::before{ content: ""; position: absolute; top: 130%; left: 0px; width: 100%; height: 3px; background-color: #f1b401; }
#menu .sub-menu a::before{ background-color: transparent; }
#menu.active{ display: inline-block; }

#fp-content{ margin-top: 30px; }
#fp-content .img{ width: 100%; height: 300px; background-color: #f5f5f5; }
#fp-content .img img{ height: 100%; width:100%; object-fit: cover; }
#fp-content .fp-post-a{ display: block; position: relative; padding-top: 5px; padding-bottom: 5px; }
#fp-content .fp-post-a span{ position: relative; top: 7px; }

#fp-carusel{  position: relative; height: 500px; }
#fp-carusel .fp-carusel-post { width: CALC(100% - 40px); height: CALC(100% - 40px); border: 1px solid #CDCDCD; overflow: hidden; position: absolute; }
#fp-carusel .fp-carusel-post img{ width: 100%; height: 100%; object-fit: cover; }
#fp-carusel .fp-carusel-post-title{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; font-size: 5vh; text-shadow: 0px 0px 5px black; }
#fp-carusel .fp-carusel-post a{ font-size: 2.5vh; color: white; text-decoration: none; text-transform: uppercase;}
#fp-carusel .fp-carusel-post-title a {position: relative; color: black; font-size: 1.5vh; padding: 10px; text-shadow: none; }
#fp-carusel .fp-carusel-post-title a span{ position: relative; top: 5px; }
#fp-carusel .fp-carusel-post-title a::before{ content: ""; position: absolute; top:0px; left:0px; width: 100%; height: 100%; border-radius: 2em; background-color: white; z-index: -1; }
#fp-carusel #loader{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }


.section{ padding: 20px; }
.section:hover{ background-color: #f5f5f5; }

H2{ position: relative; z-index: 0; font-family: 'Arial', sans-serif; font-size: 3vh; margin: 0px; }
H2::before{ content: ""; position: absolute; z-index: 1; bottom: -5px; left: 0px; width: 100px; height: 5px; background-color: #002063; }
H2::after{ content: ""; position: absolute; z-index: 1; bottom: -11px; left: 0px; width: 65px; height: 3px; background-color: #f1b401; }

#page-content H2{ margin-bottom: 40px; }
#fp-content H2{ margin: 20px 0px 30px 0px; }

@media screen and (max-width: 1100px){
	#menu-button{ display: inline-block; }
	#menu{ display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; overflow-y: auto; z-index: 100000; box-shadow: 0px;}
	#menu li{ display: block; }
	#menu li ul{ display: block; }
	#menu li:hover>ul{ position: relative; background-color: transparent; border: 0px; width: 100%; }
	#menu li:hover{ background-color: transparent; }
	
}

@media screen and (max-width: 800px){
	#page-title{ padding: 0px; font-size: 1.0em; max-width: 200px; }
}

.fp-join-button{ border: 1px solid grey; padding: 15px; text-align: center; }
.fp-join-button a{ color: #002063; text-decoration: none; }

#page-content{ padding: 10px; }
#page-content .content-image{ position: relative; padding-right: 20px; }
#page-content .content-image img{ width: 100%; height: 100%; object-fit: cover; }


.loader {
  width: 96px;
  height: 16px;
  display: inline-block;
  background-color: #FFF;
  border: 1px solid #DCDCDC;
  border-radius: 4px;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
  font-size: 30px;
  background-size: 1em 1em;
  box-sizing: border-box;
  animation: barStripe 1s linear infinite;
}

@keyframes barStripe {
  0% {
    background-position: 1em 0;
  }
  100% {
    background-position: 0 0;
  }
}



.input-text { position: relative; }
.input-text input{ display: block; position: relative; width: 100%; padding: 10px; background: transparent; z-index: 2; border: 1px solid #DCDCDC; font-family: 'Arial', serif; font-size: 15pt; }
.input-text input:focus{ outline: 0px; border: 1px solid #CDCDCD; box-shadow: 0px 0px 2px grey; padding: 15px 10px 5px 10px; }
.input-text input::after{ position: absolute; top: 0px; left: 0px; content: "testi"; background-color: red; z-index: 10; width: 100px; height: 100px;}
.input-text input+label{ position: absolute; top: 15px; left: 6px; text-transform: uppercase; z-index: 1; padding-left: 5px; transition: top 0.5s, font-size 0.5s; font-family: 'Arial', sans-serif;}
.input-text input:focus+label{ top: 3px; transition: top 0.5s, font-size 0.5s; font-size: 7pt; font-weight: bold; }
.input-text input:hover{ border-bottom: 1px solid grey; }
.input-text	input.hide-caption+label{ display: none; }
.input-text	input.hide-caption:focus+label{ display: block; }

.input-option{ display: grid;  grid-auto-flow: column;}
.input-option input[type="radio"]{ display: none; }
.input-option input+label>.checked { display: none; }
.input-option input+label>.unchecked { display: inline; }
.input-option input+label>span{ position: relative; top: 5px; margin-right: 30px; }
.input-option label{ border: 1px solid #DCDCDC; border-right: 0px; font-family: 'Arial', sans-serif; padding: 15px; }
.input-option label:last-child{ border-right: 1px solid #DCDCDC; }
.input-option input:checked+label{ background-color: #f0faec; }
.input-option input:checked+label>.checked { display: inline; }
.input-option input:checked+label>.unchecked { display: none; }
.input-option label:hover{ background-color: #f7f7f7; border: 1px solid #CDCDCD; }

.input-button { position: relative; margin-top: 25px; text-align: right; }
.input-button label{ border: 1px solid #DCDCDC; font-family: 'Arial', sans-serif; padding: 15px; box-shadow: 0px 2px 4px #DCDCDC; background-color: #f5f5f5; }
.input-button label:hover{ border-bottom: 1px solid grey; cursor: pointer; }
.input-button input{ display: none; }

.form-caption{ font-family: 'Arial', sans-serif; padding: 10px 0px 5px 0px; }

.input-err{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: red; text-shadow: 0px 0px 2px #DCDCDC; }