@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=latin-ext');
*{
	-webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
	-moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
	-o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
	-ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
	transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, border-size 300ms ease-in-out, box-shadow 300ms ease-in-out, width 300ms ease-in-out, height 300ms ease-in-out, margin 300ms ease-in-out;
}
:root{
	--main-color:#8b2def;
	--alt-color:#17A343;
	--txtmain-color:white;
	--action-color:red;
	--content-width:2000px;
	--content-basewidth:75%;
	--border-radius:4px;
	--shadow-size:10px;
	--shadow-color:rgba(0,0,0,.2);
}
body{
	background-color:var(--main-color);
	background-image: linear-gradient(to bottom right, var(--alt-color), rgba(255, 255, 255, .6), var(--main-color));
	color:#555555;
	margin:0;
	padding:0;
	font-size:100%;
	font-family:"PT Sans",sans-serif;
	background-position:top center;
	background-size:100% 100%;
	background-repeat:no-repeat;
}
a, a:visited{
	text-decoration:none;
	color:var(--main-color);
}
a:hover, a:active, a:focus{
	color:#000000;
}
h1,h2,h3,h4,h5{
	font-weight:normal;
	font-size:100%;
	margin:0;
	padding:0;
}
label, select{cursor:pointer;}
.clear{
	clear:both;
}
div#page{
	background-position:top center;
	background-repeat:repeat;
}
#wrapper{
	width:100%;
	height:100%;
}
#wrapper_content{
	width:var(--content-basewidth);
	max-width:var(--content-width);
	margin:auto;
}
/* Banner */
/* ======================================================================================== */
.banner_wrapper_height{
	height:10vw;
}
#banner_wrapper{
	width:100%;
	position:relative;
	left:0;
	top:0;
	z-index:99;
	height:auto;
}
#banner{
	width:var(--content-basewidth);
	max-width:var(--content-width);
	margin:auto;
	height:auto;
}
#banner_content{
	position:relative;
}
.banner_language{
	z-index:50;
	transform:scale(.8);
	text-align:right;
	width:auto;
	height:auto;
	vertical-align:middle;
	position:absolute;
	top:0;
	right:0;
}
.banner_language a, .banner_language a:visited{
	margin:0 !important;
	padding:0 !important;
	margin-right:1%;
}
.banner_valuta{
	float:right;
	z-index:50;
	text-align:right;
	width:auto;
	height:auto;
	padding-top:1%;
	padding-right:1%;
	vertical-align:middle;
	margin-top:1%;
	margin-left:1%;
}
.banner_valuta select{width:auto;cursor:pointer;background-color:#fefefe;color:#333333;padding:5px;border:0;}
.banner_logo{
	max-width:100%;
	width:auto;
}
.banner_logo img{
	max-width:100%;
	max-height:100%;
}
.banner_mainmenu{
	width:auto;
	height:auto;
	background-color:var(--main-color);
	text-align:center;
}
.banner_mainmenu a, .banner_mainmenu a:visited{
	display:inline-block;
	padding:1% 2%;
	font-size:120%;
	color:white;
	font-weight:600;
	margin-right:20px;
}
/* Content Basics */
/* ======================================================================================== */
#content{
	min-height:300px;
	background-color:#fefefe;
	border-radius:var(--border-radius);
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
}
.title{
	font-size:170%;
	padding:1%;
	border-bottom:thin dashed #c0c0c0;
}
.title a, .title a:visited{color:#2A2A2A;}
.title a:focus, .title a:hover, .title:active{color:var(--main-color);}
.title img{
	max-width:100%;
	max-height:30px;
	display:inline-block;
}
.txt{
	padding:1%;
	font-size:110%;
}
.txt img, .txt iframe{
	width:auto;
	height:auto;
	max-width:100% !important;
	max-height:100% !important;
	display:inline-block;
	vertical-align:middle;
}
/* Footer */
/* ======================================================================================== */
#footer_wrapper{
	width:100%;
	background-color:transparent;
	height:auto;
}
#footer{
	width:var(--content-basewidth);
	max-width:var(--content-width);
	margin:auto;
}
#footer_content{
	padding:2%;
	text-align:center;
	font-size:80%;
	color:rgba(255,255,255,.5);
}
#footer_content a, #footer_content a:visited{
	color:rgba(255,255,255,.5);
	padding:1%;
	display:inline-block;
}
#footer_content a:focus, #footer_content a:hover, #footer_content a:active{
	color:white;
	background-color:black;
}

/* Logo */
/* ======================================================================================== */
.textAnim {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 10s infinite linear;
  animation: stroke 10s infinite linear;
}
.textAnim:nth-child(5n + 1) {
  stroke: #8cffa8; /* green */
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}
.textAnim:nth-child(5n + 2) {
  stroke: #d166ff; /* pink */
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
  stroke-width: 2;
}
.textAnim:nth-child(5n + 3) {
  stroke: var(--txtmain-color);
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}
.textAnim:nth-child(5n + 4) {
  stroke: rgba(255,255,255,.8);
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
  stroke-width: 1;
}
.textAnim:nth-child(5n + 5) {
  stroke: var(--main-color);
  -webkit-animation-delay: -10s;
  animation-delay: -10s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

.textAnimSVG{
  position:absolute;
  left:50%;
  top:1vw;
  transform:translate(-50%,0);
  font-size:400%;
  width:100%;
  /* border-bottom:2px double rgba(255,255,255,.1); */
}
.textAnimSVGFooter{
  position:relative;
  left:50%;
  transform:translate(-50%,0);
  font-size:500%;
  width:100%;
}
/* ======================================================================================== */

/* Hover boxes */
/* ======================================================================================== */
.HOVER {
	--width: 100%;
	--time: 0.7s;

	position: relative;
	display: inline-block;
	height: 1em;
	padding: 1em;
	overflow: hidden;
}

.HOVER text {
	position: relative;
	z-index: 5;
	
	transition: color var(--time);
}

.HOVER:hover text {
	color: var(--main-color);
}

.HOVER span {
	position: absolute;
	display: block;
	content: "";
	z-index: 0;
	width: 0;
	height: 0;
	
	border-radius: 100%;
	background: #fff;
	
	transform: translate(-50%, -50%);
	transition: width var(--time), padding-top var(--time);
}

.HOVER:hover span {
	width: calc(var(--width) * 2.25);
	padding-top: calc(var(--width) * 2.25);
}
/* ======================================================================================== */

.formSelect{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:2rem;
	margin:5%;
}
.formSelect a, .formSelect a:visited{
	flex:1 1 clamp(25ch,10%,50ch);
	flex-wrap:wrap;
	justify-content:space-between;
	
	text-align:center;
	background-color:var(--main-color);
	padding:3%;
	color:var(--txtmain-color);
	display:block;
	width:100%;
	height:100%;
	font-size:max(1.5vw,150%);
	border-radius:var(--border-radius);
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
}
.formSelected a, .formSelected a:visited{
	flex:1 1 clamp(2ch,10%,50ch);
	padding:1%;
	font-size:110%;
}
.formSelectedTitle{
	background-color:white !important;
	color:var(--main-color) !important;
}
.formField{
	display:none;
	margin:5%;
	padding:1%;
	font-size:110%;
	border:thin solid var(--main-color);
	border-radius:var(--border-radius);
	margin-top:3%;
	padding-top:5%;
	position:relative;
	margin-bottom:25%;
}
.formFieldAspect{
	font-size:200%;
	color:var(--main-color);
	text-align:center;
	margin-top:-9%;
	background-color:white;
	position:absolute;
	padding:1%;
	display:none;
	margin-bottom:3%;
}
.formFieldStatement{
	display:none;
	text-align:justify;
	background-color:rgba(23,163,67,.3);
	border-radius:var(--border-radius);
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
	border-left:10px solid var(--alt-color);
	padding:1%;
	margin-bottom:3%;
}
.formFieldRating{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:1rem;
	width:100%;
	height:100%;
}
.formFieldRating b{
	display:block;
	margin-top:2%;
	width:100%;
	text-transform:uppercase;
	color:var(--main-color);
}
.formFieldRating label{
	display:inline-block;
	flex:1 1 clamp(15ch,22%,50ch);
	width:100%;
	height:100%;
	padding:1%;
	border-bottom:2px solid transparent;
}
.formFieldRating label:hover, .formFieldRatingSelected{
	border-color:var(--alt-color);
}
.ratingNone{
	flex:none;
	display:block !important;
	background-color:rgba(255,0,0,.2);
	text-align:center;
	padding:2% !important;
	margin-top:3%;
	border-radius:0px 0px var(--border-radius) var(--border-radius);
	border-top:2px solid rgba(255,0,0,.5);
}
.formFieldStatementInfo{
	text-align:justify;
	background-color:rgba(191, 162, 21,.3);
	border-radius:var(--border-radius);
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
	border-left:10px solid rgb(191, 162, 21);
	padding:1%;
	margin-top:3%;
	margin-bottom:3%;
}
.statement1,
.statement2,
.statement3,
.statement4{display:none;}
.formFieldActive{
	display:block;
}
.formFieldAspectActive{
	display:block;
}
.formFieldStatementActive{
	display:block;
}
.formNext{
	padding:2%;
	display:none;
	margin-top:5%;
	background-color:var(--alt-color);
	color:var(--txtmain-color);
	cursor:pointer;
	margin-right:2%;
	margin-bottom:2%;
	position:relative;
	float:right;
}
.formPrev{
	padding:2%;
	display:none;
	margin-top:5%;
	background-color:var(--action-color);
	color:var(--txtmain-color);
	cursor:pointer;
	margin-left:2%;
	margin-bottom:2%;
	position:relative;
	float:left;
}
.formNextRatingStart{background-color:var(--main-color);}
.finalRating{
	display:none;
	margin:5%;
	padding:1%;
	font-size:110%;
	margin-top:3%;
	padding-top:5%;
	position:relative;
	margin-bottom:25%;
}
.graphLineTable{
	width:100%;
}
.graphLineTable th:first-of-type{width:35%;}
.graphLineTable th{
	padding:1%;
	font-weight:bold;
	text-align:left;
	border-bottom:thin solid rgba(0,0,0,.2);
	padding-top:5%;
}
.graphLineTable tr:first-of-type th{padding-top:0%;}
.graphLineTable td{
	padding:1%;
	text-align:left;
}
.graphLineTable tr td:first-of-type{padding-left:3%;}
.graphLine{
	display:block;
	width:100%;
	background-color:rgba(0,0,0,.2);
	padding:.5%;
}
.graphLine div{
	display:block;
	background-color:var(--main-color);
	padding:.5%;
	color:var(--txtmain-color);
	min-width:1ch !important;
	max-width:98.9% !important;
}
.graphLineTable th .graphLine div{background-color:var(--alt-color);}

/* Miscs */
/* ======================================================================================== */
.up{
	width:60px;
	height:60px;
	line-height:70px;
	cursor:pointer;
	display:none;
	position:fixed;
	z-index:50;
	right:2vw;
	bottom:2vw;
	border-radius:10px;
	background-color:var(--alt-color);
	color:var(--txtmain-color);
	text-align:center;
	vertical-align:middle;
}
.cb-radio.checked .cb-inner i{
	background-color:var(--main-color) !important;
	transform:scale(1.7,1.7);
}
.cb-checkbox:hover .cb-inner, .cb-radio:hover .cb-inner{
	border-color:var(--main-color) !important;
}

/* Autocomplete */
/* ======================================================================================== */
.autocomplete-suggestions{
	font-size:110%;
}
.autocomplete-selected{
	background-color:var(--main-color);
}
.autocomplete-selected strong{
	color:white;
}
.autocomplete-suggestion{
	padding:10px;
}
.ui-autocomplete-category {
	font-weight:bold;
	padding:10px;
	margin:15px;
}

/* Media Screens */
/* ======================================================================================== */
@media screen and (max-width: 900px){
	.formFieldAspect{position:relative;margin:0;}
}