:root, :host {
	--bar-icon-size: 38px;
	--top-toolbar-height: 40px;
	--scrollbar-bg-color1: white;
	--scrollbar-thumb-color1: hsl(210, 100%, 70%);
	/*--menu-bg-color1: var(--toolbar-bg-color1);*/
	--menubutton-hover-bg1: var(--toolbar-bg-color1);
	/*--menu-bg-color2: var(--toolbar-bg-color2);*/
	--menubutton-hover-bg2: var(--toolbar-bg-color2);
	--clock-size: 25px;
	--clock-height: 24px; /* About 10% less than size */
	--brand-color: hsl(210, 100%, 60%);
	--logo-font:'Days One';
	--header-font:'Blinker';
	/* --base-font:
	'Roboto'; */
	--site-max-width: 1200px;
}

.svgtext {
	fill: white;
}

.fontSize300 {
	font-size: 100px !important;
}

.fontSize50 {
	font-size: 50px !important;
}

.fontSize30 {
	font-size: 30px !important;
}

.contact-info .material-icons {
	font-size: 55px;
}

.menubutton:hover, .menubutton:focus{
	text-decoration: underline var(--brand-color);
	text-decoration-thickness: 5px;
	text-underline-offset: 3px;
}

@media all and (max-width:30em){
.menubutton{
display:block;
margin:0.4em auto;
}
}
/*
.menubutton:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.menubutton:hover:after { 
  width: 100%; 
  left: 0; 
}
*/

.cont {
	width: 100%;
	max-width: var(--site-max-width);
	margin:auto;
	transition: all var(--animation-time);
}

#contcontainer {
	overscroll-behavior-x: none;	overflow-y:auto;
	overflow-x:hidden;
	background-color: var(--bg-color);
	color: var(--text-color);
	transition: all var(--animation-time);
}

.cont h1, .cont h2, .cont p {
	padding-left: 20px;
	padding-right: 20px;
}

.banner {
  position: relative;
  text-align: center;
  height: 33vh;
  overflow:hidden;
  color: white;
}

.banner img{
  width:100%;
}

.banner p {
  position: absolute;
  top: 50%;
  left: 50%;
	width: 100%;
  font-family: var(--header-font), sans-serif;
  font-size: min(max(32px,4.5vw),70px);
  font-weight: bold;
  transform: translate(-50%, -50%);
	text-align: center;
	text-align-last: center;
}

.text-shadow {
	text-shadow: 3px 3px 8px #000000;
}

.horizontal {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-grow: 1;
	flex-shrink: 1;
	flex-wrap: wrap;
}

.horizontalnoresize {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-grow: 0;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.verticalcenter {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	flex-shrink: 1;
}

.vertical {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
}

:not(fieldset) > .horizontal.ch1 > * {
	width: 100%;
}

:not(fieldset) > .horizontal.ch2 > * {
	width: 48%;
	min-width: 380px; /*?*/
}

:not(fieldset) > .horizontal.ch3 > * {
	width: 32%;
}

:not(fieldset) > .horizontal.ch4 > * {
	width: 24%;
}

:not(fieldset) > .horizontal.ch5 > * {
	width: 19%;
}

:not(fieldset) > .horizontal.ch6 > * {
	width: 15%;
}

:not(fieldset) > .horizontal.ch7 > * {
	width: 13%;
}

:not(fieldset) > .horizontal.ch8 > * {
	width: 12%;
}

:not(fieldset) > .horizontal.ch9 > * {
	width: 11%;
}

:not(fieldset) > .horizontal.ch10 > * {
	width: 9%;
}

.clarita {
font-family: var(--logo-font);
font-size: var(--bar-icon-size);
color: var(--brand-color);
line-height:1;
padding-right:20px;
}

.contact-info {
	background-color: #ffffff45;
	border-radius: 10px;
	max-width: 800px;
	margin: auto;
}

.contact-cont > div > div{
	font-size: 15px;
	margin: 10px;
}

.material-icons {
	color: var(--brand-color);
}
.phone-cont, .mail-cont, .place-cont {
	display: flex;
	margin: 12px;
}

.phone-cont > div, .mail-cont  > div, .place-cont  > div {
	margin: 12px;
}

.pagebutton {
	background-color: var(--brand-color);
	color: white;
	font-size: 30px;
	font-family: var(--header-font), sans-serif;
	border: none;
	padding: 40px 20px;
	margin: 5px;
	border-radius: 10px;
	min-width:200px;
}

.margintopbot {
	margin-top: var(--margin);
	margin-bottom: var(--margin);
}

.formbutton { 
	font-size: 18px;
	margin-top: 8px;
	margin: auto;
	border-radius: 15px;
	background-color: var(--brand-color);
	width: 200px;
	height: 50px;
	color: white;
	font-family: var(--base-font), sans-serif;
	border: none;
}

.checkbox {
	margin-top: 1px;
	margin-bottom: 1px;
}

.form {
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	flex-wrap: wrap;
	margin: auto;
	background-color: var(--form-bg-color);
	border-radius: 10px;
	padding: 20px;
	font-size: 18px;
	max-width: 800px;
	/*margin-top: var(--margin);*/
}

fieldset {
	margin-top: var(--margin);
	margin-bottom: var(--margin);
}
fieldset .form-group {
	margin: var(--margin);
}
.form-group {
	transition:all .3s;
}

.required {
	color: red;
}

.row {
	display: flex;
}

.item {
	margin: 5px;
	overflow: hidden;
}

.adminmsglist, .adminrsdlist{
	width: 90%;
	margin:auto;
	align-items: initial;
}

.adminrsdlist > div > :nth-child(1), .adminrsdlist > div > :nth-child(2) {
	width: 35%;
} 

.adminmsglist > div > :nth-child(1) {
	width: 25%;
}

.adminmsglist > div > :nth-child(2), .adminmsglist > div > :nth-child(3) {
	width: 17%;
}

.adminmsglist > div > :nth-child(4) {
	width: 20%;
}

.adminmsglist > div > :nth-child(5), .adminmsglist > div > :nth-child(6) {
	width: 20%;
}

.add-button, .del-button  {
	width:30px;
	text-align: center;
	border-radius: 10px;
	background-color: var(--brand-color);
	color: white;
}

/*clock*/
.clock {
  color: var(--brand-color);
  height: var(--clock-height);
  font-size: var(--clock-size);
  line-height: var(--clock-height);
  font-family: var(--header-font), sans-serif;
	font-variant-numeric: tabular-nums;
  font-weight: bold;
  display: flex;
  overflow: hidden;
}

.bottom_left {
  position: absolute;
	bottom: 24px
}

.clock > div {
  display: flex;
}

.move {
  animation: move linear 1s infinite;
}

@keyframes move {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY( calc( -1 * var(--clock-height)) );
  }
}

/* end of clock*/

.editborder {
	outline:2px dashed red ;
}
.editbutton {
	position:absolute;
	color: red;
	stroke: red;
}
.editbutton svg {
	fill: var(--bg-hl-color);
}
.editbutton svg:hover {
	stroke: red;
}

.check>div:before {
	content: "✓ ";
}

fieldset {
	margin-inline-start: 2px;
	margin-inline-end: 2px;
	padding-block-start: 0.35em;
	padding-inline-end: 0.75em;
	padding-block-end: 0.625em;
	min-inline-size: min-content;
	border-width: 2px;
	border-style: groove;
	border-color: threedface;
	border-image: initial;
}
/*
<div class="fs1 marg col">Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä
<div class="fs2 marg col">Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä Tekstiä
</div>
</div>
*/
:root {
	--basebgh: 160;
	--basebgs: 50%;
	--basebgl: 50%;

	--basefgh: 0;
	--basefgs: 0%;
	--basefgl: 10%;

	--sinc: 15%;
	--linc: 10%;

	--basemarg: 2vw;
} 
.marg {
	margin: var(--basemarg);
	padding: var(--basemarg);
}
.marg .marg {
	margin: calc( var(--basemarg) * 0.9 );
	padding: calc( var(--basemarg) * 0.9 );
}
.marg .marg .marg {
	margin: calc( var(--basemarg) * 0.8 );
	padding: calc( var(--basemarg) * 0.8 );
}
.marg .marg .marg .marg {
	margin: calc( var(--basemarg) * 0.7 );
	padding: calc( var(--basemarg) * 0.7 );
}
.marg .marg .marg .marg .marg {
	margin: calc( var(--basemarg) * 0.6 );
	padding: calc( var(--basemarg) * 0.6 );
}
.col {
	background-color: hsl(var(--basebgh), var(--basebgs), var(--basebgl));
	color: hsl(var(--basefgh), var(--basefgs), var(--basefgl));
}
.col .col {
	background-color: hsl(var(--basebgh), calc( var(--basebgs) + var(--sinc) ), calc( var(--basebgl) + var(--linc) ) );
	color: hsl(var(--basefgh), calc( var(--basefgs) + var(--sinc) ), calc( var(--basefgl) + var(--linc) ) );
}
.col .col .col {
	background-color: hsl(var(--basebgh), calc( var(--basebgs) + 2 * var(--sinc) ), calc( var(--basebgl) + 2 * var(--linc) ) );
	color: hsl(var(--basefgh), calc( var(--basefgs) + 2 * var(--sinc) ), calc( var(--basefgl) + 2 * var(--linc) ) );
}
.col .col .col .col {
	background-color: hsl(var(--basebgh), calc( var(--basebgs) + 3 * var(--sinc) ), calc( var(--basebgl) + 3 * var(--linc) ) );
	color: hsl(var(--basefgh), calc( var(--basefgs) + 3 * var(--sinc) ), calc( var(--basefgl) + 3 * var(--linc) ) );
}
.col .col .col .col .col {
	background-color: hsl(var(--basebgh), calc( var(--basebgs) + 4 * var(--sinc) ), calc( var(--basebgl) + 4 * var(--linc) ) );
	color: hsl(var(--basefgh), calc( var(--basefgs) + 4 * var(--sinc) ), calc( var(--basefgl) + 4 * var(--linc) ) );
}

.background {
	background-color: var(--bg-color);
}

.background .background {
	background-color: var(--bg2-color);
}

/*
.showifchecked {
	display: none;
}
:checked ~ .showifchecked {
	display: initial;
}

.hideifchecked {
	display: initial;
 }
:checked ~ .hideifchecked {
	display: none;
} 
*/
.invis-button {
	font-size: 18px;
	width: 84px;
	height: 26px;
	color: var(--text-color);
	margin: unset;
	background-color: #f8f8ff00;
	border: none;
}

.overlay > * {
	transform: scale(0);
  transition: all .5s ease-in-out;
}

.overlay.active > * {
	transform: scale(1);
}

.vhc {
	display: flex;
	justify-content: center;
	align-items: center;
}

.carousel {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.carouselimg {
	width: 100%;
	height: auto;
	position: absolute;
	transition: all 1s;
}