:root{--header-opacity: 0;}
		*{ box-sizing: border-box; }
		body{ margin: 0px; }
		#content-area{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: scroll; }
		
		
		@keyframes spin-animation {
		  to {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		  }
		}

		.spin {
		  display: block;
		  transform-origin: center center;
		  -webkit-backface-visibility: hidden;
		  -webkit-animation: spin-animation 2s linear infinite;
		  animation: spin-animation 2s linear infinite;
		}
		
		.font-montserrat-regular {font-family: "Montserrat", sans-serif; font-weight: 300;font-style: normal; font-optical-sizing: auto; }
		.font-rokkitt-medium {font-family: "Rokkitt", serif; font-weight: 300;font-style: normal; font-optical-sizing: auto; }
		.page-header{ position: fixed; height:200px; width:100%; z-index: 10; padding: 10px; }
		.page-header::after{ content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: white; opacity: var(--header-opacity); z-index: -2; border-bottom: 1px solid #cdcdcd; box-shadow: 0px -2px 5px #DCDCDC inset; }
		
		.header-static{ height: 100px; background-color: white; opacity: 1; box-shadow: 0px -2px 5px grey inset; }
		.header-static .page-title{ font-size: 25px; max-width: 500px; left: 80px; }
		
		.section-boxed{ position: relative; height: 100%; left: 25%; width: 50%; }
		
		.page-header div img{ max-height: 100%; object-fit: contain;  }
		.page-title{ position: absolute; left: 120px; font-size: 50px; top: 20px; max-width: 700px; }
		
		.page-menu{ position: absolute; right: 17px; top: 20px; z-index: 11; }
		.page-menu::after{ content: ""; position: absolute; top: -18px; left: -17px; width: 75px; height: 75px; background-color: #f0f0f0; z-index: -1; border-radius: 50%; }
		.page-menu span{ font-size: 30pt !important; }
		
		.top-menu-container{ position: absolute; right: -10px; top: -10px; width: 75%; height: 100vh; background-color: white; box-shadow: 0px 0px 4px black;  display: none; padding-top: 100px; }
		.top-menu-container ul{ padding: 0px; }
		.top-menu-container li a{  padding: 20px; display: block; font-size: 1.5vh; text-decoration: none; text-transform: uppercase; color: #002063; }
		.top-menu-container li{ list-style: none; margin: 0px; border-top: 1px solid #DCDCDC; }
		.top-menu-container li:last-child{ border-bottom: 1px solid #DCDCDC; }
		.top-menu-container li a:hover{ background-color: #f3f3f3; }
		
		.sections-menu{ position: fixed; left: 80%; bottom: 5%; background-color: white; z-index: 9; border-radius: 5px; box-shadow: 0px 2px 4px black; }
		.sections-menu a{ display: block; padding: 10px 20px 10px 40px; font-size: 20px; position: relative; color: #337d72; text-decoration: none; text-transform: uppercase; }
		.sections-menu a span{ position: absolute; left: 20px; top:50%; transform:translate(-50%,-50%); background-color: #337d72; width: 15px; height: 15px; z-index: 11; border-radius: 50%; }
		.sections-menu a::after{ content: ""; position: absolute; left: 20px; top: 0px; width: 1px; height: 100%; background-color: #d1e8e5; }
		.sections-menu a:first-child::after{ top: 50%; height: 50%; }
		.sections-menu a:last-child::after{ height: 50%; }
		.sections-menu a span::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; background-color: white; border-radius: 50%; }
		.sections-menu a:hover span::after{ background-color: #77f7e4; }
		.sections-menu .section-menu-current span{ background-color: red; }
		
		.page-section{ height: 100%; width: 100%; border-bottom: 1px solid #cdcdcd; position: relative;  }
		.section-background{ width: 100%; height: 100%;  background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
		.section-background .bg-img{ width: 100%; height: 100%; object-fit: cover; }
		.section-background .img-loader{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;  z-index: 2;  }
		.section-background .img-loader::after{ content: ""; position: absolute; top: 0px; left:0px; width: 100%; height: 100%; background-color: white; z-index: -1; opacity: 0.8;}
		.section-background .img-loader span{ position: absolute; top: 50%; left: 50%; background-color: white; opacity: 1; padding: 20px; transform: translate(-50%,-50%); border-radius: 50%; border: 2px solid #CDCDCD; box-shadow: 0px 0px 5px 2px grey; }
		.section-background .img-loader span i{ font-size: 5vh !important; }
		
		.fp-carusel-post{ position: relative; width: 100%; height: 100%; }
		
		.carusel-slider { position: absolute;  bottom: 5%; left: 50%; background-color: white; padding: 10px; border-radius: 10px; transform: translateX(-50%); }
		
		.carusel-slider a span:first-child{ display: inline-block; position: relative; width: 2vh; height: 2vh; border: 2px solid grey; margin: 10px; border-radius: 50%; cursor: pointer;}
		.carusel-slider a span:first-child:hover::before{ content: ""; position: absolute; top: 50%; left: 50%; width: 0.5vh; height: 0.5vh; background-color: black; transform: translate(-50%,-50%); border-radius: 50%;  }
		
		.section-content{ background-color: white; width: 50%; height: 100%; position: absolute; top: 0px; left: 25%; padding-top: 200px;  }
		.section-content-fixed-position{  overflow: hidden; overflow-y: auto; }
		.section-image{ position: absolute; top: 0px; width: 100%; }
		.section-image img{ width: 100%; object-fit: cover; }
		
		
		.section-image-left{ position: absolute; top: 0px; left:0px; width: 33%; height: 100%; }
		.section-image-left img{ object-fit: cover; width: 100%; height: 100%; }
		.section-content-right{ position: absolute; top:200px; left: 35%; width: 61%; height: calc(100% - 200px); }
		
		.section-image-right{ position: absolute; top: 0px; right:0px; width: 33%; height: 100%; }
		.section-image-right img{ object-fit: cover; width: 100%; height: 100%; }
		.section-content-left{ position: absolute; top:200px; left: 2%; width: 61%; height: calc(100% - 200px); }
		
		.section-content-center{ padding-left: 20px; padding-right: 20px; }
		
		.section-boxed .img-page-header{ position: relative; left: -20px; top: -100px; width: CALC(100% + 40px); }
		
		.fp-carusel-post-title{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3vh; padding: 30px; border: 1px solid red; border-radius: 10px; border: 2px solid white; box-shadow: 0px 2px 5px 2px grey; }
		.fp-carusel-post-title::after{ content: ""; absolute; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: white; z-index: -1; border-radius: 10px; opacity: 0.5;  }
		.fp-carusel-post-title a{ position: absolute; left: 50%; top: 115%; background-color: #002063; color: #f1b401; padding: 15px; width: max-content; font-size: 2vh; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); border-radius: 3px; box-shadow: 0px 2px 3px 1px black;  }
		
		.anikap-fp-post:first-of-type{ border-top: 1px solid #DCDCDC; }
		.anikap-fp-post{ position: relative; list-style: none; padding: 10px 0px 10px 50px; margin-bottom: 15px; border-bottom: 1px solid #DCDCDC; font-family: 'Arial', serif; font-size: 12pt;  }
		.anikap-fp-post-icon{ position: absolute; top: 10px; left: 5px; }
		.anikap-fp-post-excerpt{ display: block; font-family: 'Arial', serif; font-size: 12pt; padding-top: 10px; padding-bottom: 10px; }
		.anikap-fp-post-date{ display: inline-block; font-family: 'Arial', sans-serif; font-size: 8pt; }
		.anikap-fp-post-author{ display: inline-block; font-family: 'Arial', sans-serif; font-size: 8pt; }
		.anikap-fp-post-date i, .anikap-fp-post-author i{ position: relative; top: 5px; }
		
		
		
		@media screen and (max-width: 700px){
			.section-image-left{ width: 25%; }
			.section-content-right{ left: 27%; width: 69%; }
			
		}
		
		@media screen and (max-width: 999px){
			.section-boxed{ left: 0px; width: 100%; }
			.post-archive-sidebar-container{ display: none; }
		}
	
		@media screen and (min-width: 1000px){
			.section-boxed{ left: 12%; width: 76%;  }
			.post-archive-sidebar-container{ display: none; }
		}
		
		@media screen and (min-width: 1250px){
			.section-boxed{ left: 20%; width: 60%; }
			.post-archive-sidebar-container{ display: block; left: 80%; }
		}
		
		@media screen and (min-width: 1500px){
			.section-boxed{ left: 25%; width: 50%; }
			.post-archive-sidebar-container{ display: block; left: 75%; }
		}
	
		@media screen and (min-width: 2000px){
			.section-boxed{ width: 1000px; }
			.post-archive-sidebar-container{ display: block; left: CALC(25% + 1000px); }
		}
		
		.fp-block-content{ font-family: 'Arial', serif; font-size: 12pt; text-align: center; padding: 50px 50px 0px 50px; }
		.fp-join-button a{ display: block; border: 1px solid #dcdcdc; padding: 10px; margin-right: 50px; margin-left: 50px; text-align: center; color: black; text-decoration: none; text-transform: uppercase; font-family: 'Arial', serif;  font-size: 16pt; text-align: center; }
		.fp-join-button a:hover{ background-color: #f3f3f3; }
		.fp-join-button span{ position: relative; top: 5px; }
		
		.fp-posts-archive-button { position: absolute; bottom: 30px; width: CALC(100% - 180px); display: block; border: 1px solid #dcdcdc; padding: 10px; margin-right: 50px; margin-left: 50px; text-align: center; color: black; text-decoration: none; text-transform: uppercase; font-family: 'Arial', serif;  font-size: 16pt; text-align: center; }
		.fp-posts-archive-button:hover{ background-color: #f3f3f3; }
		.fp-posts-archive-button span{ position: relative; top: 5px; }
		
		
		.post-archive-sidebar-container{ position: fixed; top: 120px; border: 1px solid #e7e7e7; width: 300px; padding: 10px; border-radius: 3px; box-shadow: 0px 2px 4px #dcdcdc; }
		.post-archive-sidebar-container::before{ content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: white; z-index: 0; }
		.post-archive-sidebar-container h2{ font-size: 1.5vh; }
		.post-archive-sidebar-container li{ list-style: none; position: relative; z-index: 1; }
		.post-archive-sidebar-container li span{ position: relative; top: 5px; font-size: 14pt !important; }
		.post-archive-sidebar-container ul{ padding: 0px; }
		.post-archive-sidebar-container p{ position: relative; z-index: 1;  font-family: 'Arial', sans-serif; font-size: 8pt; font-weight: bold; text-transform: uppercase; background-color: #e7e7e7; border-radius: 3px; padding: 5px; }
		
		
		.archive-posts-list{ padding: 30px; }
		.archive-post-block{ position: relative; padding-left: 75px; border-bottom: 1px solid #f7f7f7; padding-bottom: 10px; }
		.archive-post-block .icon{ position: absolute; top: 0px; left: 10px;  }
		.archive-post-block .icon>span{ font-size: 50px !important; }
		.archive-post-block .title{ font-family: 'Arial', serif; font-size: 12pt; padding-top: 15px; }
		.archive-post-block .excerpt{ font-family: 'Arial', serif; font-size: 12pt; padding-top: 10px; padding-bottom: 10px; }
		.archive-post-block .date{ font-family: 'Arial', sans-serif; font-size: 8pt; }
		.archive-post-block .date>span{ font-size: 18px !important; position: relative; top: 5px; }
		.archive-post-block .title a{text-decoration: none; color: black; text-transform: uppercase; }
		
		
		.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; }
		
		H2{ position: relative; z-index: 0; font-family: 'Arial', sans-serif; font-size: 3vh; }
		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; }
		
		p{  font-family: 'Arial', serif; font-size: 12pt; text-align: justify; margin-bottom: 15px; }
		
		.input-err{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: red; text-shadow: 0px 0px 2px #DCDCDC; }
		
		.lang-selector{ position: absolute; top: 50%; right: 30px; transform: translateY(-50%); z-index: 10;}
		.lang-selector *{ list-style: none; padding: 0px; margin: 0px; font-family: 'Arial', sans-serif; text-decoration: none; color: black; }
		.lang-selector>li{ padding: 5px 10px 5px 10px; border: 1px solid #e5e5e5; position: relative; border-radius: 3px; text-transform: uppercase; z-index: 0; }
		.lang-selector>li>ul{ position: absolute; display: none; top: 0px; left: 0px; width: fit-content; border: 1px solid #e5e5e5; background-color: white; box-shadow: 0px 2px 4px grey;  }
		.lang-selector>li:hover>ul{ display: block; }
		.lang-selector ul>li{ position: relative; display: block; border-bottom: 1px solid #f5f5f5; padding: 5px; z-index: 5000; min-width: fit-content; width: 100%; }
		.lang-selector ul>li:hover{ background-color: #f7f7f7; }