:root {
  --best: stabil;
  --gray1: #eee ;
  --gray4: #777 ;
}
@font-face { font-family: Barlow; src: url('../resources/fonts/Barlow-Regular.ttf'); }
@font-face { font-family: Barlow; src: url('../resources/fonts/Barlow-Bold.ttf'); font-weight: bold; }
body {
	font-family: Barlow, sans-serif; font-size: 18px; font-weight: 400;
	margin: 0; padding: 0; border: none;
}
@media (max-width: 1100px) { 
	body {
	} 
}

img {max-width: 100%;}
p {margin-top: 0em; }
a , button , input {
	border: 0.15em solid black;
    transition: 0.5s ease;
    -webkit-border-radius: 0.1em;
    -moz-border-radius: 0.1em;
    border-radius: 0.1em;
    font: inherit; font-size: inherit; text-decoration: none; 
}
a {	
	border-color: var(--gray1) !important;
	background-color: var(--gray1); 
	position: relative; 
	color: #000000;
	padding: 0 0.25em 0 0.2em;
}
button {
	padding: 0.075em 0.5em;
    background-color: black;
	border-color: var(--gray1) !important;
    color: white;
    text-align: center;
}	
input {
	width:100%;
	border-color: var(--gray1) !important;
	margin: 0em 0 0.2em 0;
	padding: 0.1em 0.25em;
}
input::placeholder { color: rgba(0,0,0,0.5); }

a:hover , button:hover , input:focus {
	border-color:  var(--gray4)  !important;
	cursor: url("cursor_circle.png"), auto;
    outline: none;
}
button:hover {
	background-color: white;
	color: black;
}


#centered {
	width: 75%; max-width: 900px; 
	margin-left: auto; margin-right: auto;
	position: relative;
}

#logo {
	margin: 7em 1em 4.5em 1em	;
}

#contentarea {
	display: flex;
	flex-flow: row wrap;
	margin: 0;
	width: 100%;
	position: relative;
	line-height: 1.3em;
}

#contentarea > * {
	flex: 1 1 250px;
    margin: 0 1em;
}

#contentarea p > img {
	width: 11em;
	max-width: 50%;	
}
img.left {	float: left; margin-left: -3em; margin-top: -0.5em;}
img.right {	float: right; margin-right: -3em; margin-top: -1em; }

svg path , polygon {
	//fill: none;
	stroke: #000;
	stroke-width: 2.5;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: dash 2.5s linear;
  }
@keyframes dash {
    0% { stroke-dashoffset: 500; }
    80% { stroke-dashoffset: 0; stroke-width: 2.5; }
    100% {  stroke-width: 0;  }
}