/*FONTS
----------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/*BASICS
----------------------------------------------------------------- */

html {font-size: 62.5%;}
body {font-family: 'Lato', sans-serif; font-size: 2.0rem; line-height: 1.5; color: #fff; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body, html, * {margin: 0; padding: 0; border: none; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box;}

img {max-width: 100%; display: block; user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none;}


/*TYPO
----------------------------------------------------------------- */

h1 {font-size: 5rem; line-height: 1.2; font-weight: 900; margin-bottom: 2rem; text-transform: uppercase;}
h2, h3 {font-family: 'Noto Serif', serif; font-style: italic; margin-bottom: .5em;}
h4 {margin-bottom: 1em;}

strong {font-weight: 900;}

a {color: #8591ed; text-decoration: underline; text-underline-position: under; transition: .3s; -o-transition: .3s; -webkit-transition: .3s;}
a:hover {text-decoration: none;}

hr {border-bottom: 1px solid #ccc;}


/*CONTAINERS
----------------------------------------------------------------- */

header {height: 30vh; background-color: #000; text-align: center; position: relative;}
.header__logo {height: 10rem; position: fixed; top: 4rem; left: 2.5rem; z-index:300;}
.header__logo img {height: 100%; display: block;}
.header__logo span {font-family: 'Noto Serif', serif; font-size: 2.5rem; line-height: 1; letter-spacing: 0.5; margin-top: 1rem; display: block;}
header .header__links {position: absolute; top: 4rem; right: 4rem;}
header .header__links a {color: #fff; font-weight: bold; text-decoration: none; margin-left: 1rem; padding: .25rem 1rem; float: left; display: block; cursor: pointer;}
header .header__links a:hover {background-color: #7980b8;}
header .header__title {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
header .header__title h1 {hyphens: none}
header .header__scroll {width: 24px; height: 24px; margin-left: -12px; position: absolute; bottom: 10%; left: 50%; border-left: 2px solid #7980b8; border-bottom: 2px solid #7980b8; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); animation: scroll 2s infinite; -webkit-animation: scroll 2s infinite;}
header #particles-js {width: 100%; height: 100%;}
#byP3 {display: flex; align-items: flex-end; margin-top: 10px;}
#semPitch {height: 10rem; position: fixed; top: 7.5rem; left: 20.5rem; z-index:350; font-family: Special Elite; font-size:20px; color:white; transform: rotate(355deg);}

section {padding: 10rem 0; background-color: #000;}
section:nth-of-type(odd) {background-color: #1a2154;}
section:nth-of-type(odd) input[type="submit"] {background-color: #000;}
section:nth-of-type(odd) input[type="submit"]:hover {background-color: #fff;}

.content {max-width: 1000px; margin: 0 auto; padding: 0 4rem;}

footer {font-size: 0.8em; padding: 5rem 0; background-color: #000;}
footer:after {content: ""; clear: both; display: block;}
footer .footer__cookie {width: 50%; float: left;}
footer .footer__about {width: 50%; padding-left: 2rem; float: right;}
/*linear-gradient(140deg,#bbb	,#eee) */


/*ELEMENTS
----------------------------------------------------------------- */

article {padding: 2rem 0;}

.btn {margin-top: 1rem; padding: 1rem 3rem; color: #fff; background-color: #7980b8; text-decoration: none; display: inline-block;}
.btn:hover {color: #000; background-color: #fff; box-shadow: 1rem 1rem 0 0 #7980b8; -webkit-box-shadow: 1rem 1rem 0 0 #7980b8;}

.popup {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 999; display: none;}
.popup .popup__bg {width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0;}
.popup .popup__close:before {content: "×"; font-size: 2.5rem; line-height: 1.5rem; position: absolute; top: 2rem; right: 2rem; transition: .3s; -o-transition: .3s; -webkit-transition: .3s; cursor: pointer;}
.popup .popup__close:hover:before {color: #7980b8;}
.popup .content {width: 90vw; max-width: 50rem; max-height: 90vh; padding: 4rem; color: #000; background-color: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); box-shadow: 1rem 1rem 0 0 #7980b8; -webkit-box-shadow: 1rem 1rem 0 0 #7980b8; overflow: auto; z-index: 999;}
/*.popup input:focus, .popup textarea:focus {box-shadow: none; -webkit-box-shadow: none;}*/
.popup input[type="submit"]:hover {color: #fff; background-color: #7980b8; /*box-shadow: none; -webkit-box-shadow: none;*/}


#divSearch .input__wrap {width: 67.5%; float: left;}
#divSearch .submit__wrap {width: 32.5%; float: left;clear:none;}
#divSearch .submit__wrap input {margin-left: 16px;}
#divSearch .input__wrap:nth-of-type(even) {float: right;}

.retInfo {padding-left: 2rem; border-left: 4px solid #fff;}
.retInfo .answer {background-color: #7980b8; padding: 2rem;}
.retInfo .coreResult {margin-top: 10px; margin-bottom: 15px; animation: bubble 3s forwards; }
.regHint {background-color:#767181; margin-top: 18px; padding:4px 6px 4px 14px; border-radius: 8px;}
.regHint .rightArrow {font-size: 38px; line-height: 30px;}
.regHint a {color: #f99;}
#result .retPeriod {background-color:#F7846B; padding:4px 6px 4px 10px; border-top-left-radius: 20px; border-bottom-left-radius: 20px;border-bottom: 1px solid white;}
#result .trigger {background-color:#857; padding:4px 10px 4px 6px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;margin-left:-6px; border-bottom: 1px solid white;border-right: 1px solid white;}
#result .questHint {opacity: 0;	animation: bubble 2.0s forwards; animation-delay: 3s; background-color:#857; margin-top: 18px; padding:4px 6px 4px 14px; border-radius: 8px;}
#result .questHint a {font-style: italic; color: #22f;}
#listCollecs ul {margin-left:22px;list-style-type: none;}


.alert {padding: 2rem;}
.alert.error {background-color: #b87980;}
.alert.success {background-color: #79b894;}
.alert#result {background-color: rgba(255,255,255,0.1);}

#services {background-color:#343A40;}
.serviceslist article h3 {font-size:20px;margin-bottom:0px;}
.serviceslist article p {font-size:18px; background-color: #E7E2E0; opacity: 0.6; padding: 2rem; border-radius: 16px;}

.newslist,.serviceslist {background-color:#666;padding:1.5rem;color:black;}
.newslist article,.serviceslist article {background:linear-gradient(85deg,#fee,#cbb); padding:1.2rem;border-radius: 18px;}
.newslist article,.serviceslist article:not(:first-child) {margin-top:16px;}
.newslist article h3 {font-size:16px;margin-bottom:0px;}
.newslist article time {font-size:11px;margin-bottom:10px;}
.newslist article p {font-size:16px;}
article .hook {font-size: 24px; color: darksalmon;}

.hint {font-style: italic;}
.iDot, .iDotty {width:26px; height:26px; border-radius: 50%; padding-left: 7px; border: 1px solid white; background-color: #7980B8; color: white; display:inline-block; font: italic bold 20px 'Noto Serif'; line-height: 22px; padding-left: 8px; cursor: pointer;}
.iDot .tooltipstered {font-size: 16px; padding: 10px;}

#noCookieBanner {width:450px; height: 100px;position: fixed; top: 24%; left: 50%; margin-left:-225px; margin-top: -60px; background: #123; border: 3px solid white; border-radius: 12px; animation: fadeinout 5s linear forwards; animation-delay: 3s; opacity: 0; text-align: center;}
#noCookieBanner p {line-height:90px; display: inline-block; vertical-align: middle; font-size: 24px; font-weight:bold;}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  40%, 60% { opacity: 1; }
}

/*ANIMATIONS
----------------------------------------------------------------- */

@-webkit-keyframes scroll {
    0% {-webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0;}
    50% {opacity: 1;}
    100% {-webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0;}
}
@keyframes scroll {
    0% {transform: rotate(-45deg) translate(0, 0); opacity: 0;}
    50% {opacity: 1;}
    100% {transform: rotate(-45deg) translate(-20px, 20px); opacity: 0;}
}
#divRetention .content, #questions .content, #news .content {opacity: 0;}
#divRetention .content.transition--fade, #questions .content.transition--fade, #news .content.transition--fade {opacity: 1; animation: fade 1s ease-out; -webkit-animation: fade 1s ease-out;}

@keyframes fade {
    0% {opacity: 0; transform: translateY(2em);}
    60% {opacity: 1; transform: translateY(-0.5em);}
    100% {opacity: 1; transform: translateY(0);}
}
@-webkit-keyframes fade {
    0% {opacity: 0; -webkit-transform: translateY(2em);}
    60% {opacity: 1; -webkit-transform: translateY(-0.5em);}
    100% {opacity: 1; -webkit-transform: translateY(0);}
}

@keyframes bubble {
    0% { opacity: 0; }
    100%   { opacity: 1; }
}

/*FORM
------------------------------------------------------------------*/

form {margin: 2rem 0;}
form * {font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
form:after {content: ""; clear: both; display: block;}

.input__wrap, .submit__wrap {margin-bottom: 2rem;}
.submit__wrap {clear: both;}
.submit__wrap:after {content: ""; clear: both; display: block;}
#xxxqueryWrap {margin-left: 0px; display: inline;}

/*LABEL*/
label {margin-bottom: .5em; display: block;}

/*INPUTS*/
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
select,
textarea {width: 100%; padding: 1rem; color: #000; background-color: #eee; border: 0; border-radius: 0; transition: .2s; -o-transition: .2s; -webkit-transition: .2s;}

input:disabled {background: #fff; border: 0;}
input:focus, textarea:focus {box-shadow: 1rem 1rem 0 0 #7980b8; -webkit-box-shadow: 1rem 1rem 0 0 #7980b8;}

/* password fields show-hide*/
.divInpPw {margin-top:12px;}
.btnShowPw {position: relative;right: 0px; top: -1.8em; margin-left: 88%; margin-right: auto; background-color: inherit; xfont-size: 24px; border:none; outline:none; padding:2px; cursor: pointer;}
.btnShowPw i:before {font-size:30px;color: #1A2154;}

/*SELECT*/
select {border-radius: 0;}
select::-ms-expand {display: none;}
select:focus::-ms-value {color: #000; background-color: #fff;}
select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;}

/*TEXTAREA*/
textarea {resize: vertical; overflow: auto;}

/*RADIO*/
input[type="radio"] {position: absolute; visibility: hidden;}
input[type="radio"] + label {padding: .25em 1em; border: 2px solid #7980b8; float: left; cursor: pointer;}
input[type="radio"]:hover + label {background-color: rgba(121, 128, 184, 0.2);}
input[type="radio"]:checked + label {background-color: #7980b8;}
input[type="radio"]:nth-of-type(1) + label {border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
input[type="radio"]:nth-of-type(2) + label {border-left: none; border-right: none;}
input[type="radio"]:nth-of-type(3) + label {border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.radio-group::after {content: ""; clear: both; display: block;}

/*juerg: inserted 17/05*/
/*Checkbox*/
[type="checkbox"] {
  position: relative;
  left: 15px;
  top: -4px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: absolute;
}
[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 2px solid #1A2154;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}
[type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #1A2154;
}

/** end **********/

/*SUBMIT*/
input[type="submit"], #btnQSubmit, #btnRegSubmit, #btnLoginSubmit {padding: 1rem 2rem; color: #fff; background-color: #1a2154; transition: .3s; -o-transition: .3s; -webkit-transition: .3s; cursor: pointer;}
input[type="submit"]:hover, #btnQSubmit:hover, #btnRegSubmit:hover, #btnLoginSubmit:hover {color: #000; background-color: #fff; box-shadow: 1rem 1rem 0 0 #7980b8; -webkit-box-shadow: 1rem 1rem 0 0 #7980b8;}


/*==================================================================
						BREAKPOINT 2000px
==================================================================*/

@media screen and (min-width: 2001px) {

    html {font-size: 75%;}
    .hamburger{diplay:none}
	.cross{diplay:none}
	#pageNav {position: fixed; top: 26%; left: 87%; z-index:705; border-radius: 20px; background: rgba(255,255,255, 0.2); padding:1.4rem; font-size: 20px; xborder:2px groove sandybrown}
	#pageNav li {list-style-type: none;}
	#pageNav a {text-decoration: none; color: #8c98f0;}
	#pageNav a.highlight {color: salmon;}

}


/*==================================================================
						BREAKPOINT 1600px
==================================================================*/

@media screen and (max-width: 2000px) {

    html {font-size: 56.25%;}	
    .hamburger{diplay:none}
	.cross{diplay:none}
	#pageNav {position: fixed; top: 26%; left: 87%; z-index:705; border-radius: 20px; background: rgba(255,255,255, 0.2); padding:1.4rem; font-size: 20px; xborder:2px groove sandybrown}
	#pageNav li {list-style-type: none;}
	#pageNav a {text-decoration: none; color: #8c98f0;}
	#pageNav a.highlight {color: salmon;}

}


/*==================================================================
						BREAKPOINT 1200px
==================================================================*/

@media screen and (max-width: 1200px) {

    .header__logo {height: 8rem; top: 2rem; left: 2rem;}
    header .header__links {top: 2rem; right: 2rem;}

}


/*==================================================================
						BREAKPOINT 900px
==================================================================*/

@media screen and (max-width: 900px) {

    h1 {font-size: 4rem; hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;}
	.header__logo {position:absolute;}
    header {height: 100vh;}
    /*#semPitch {height: 10rem; position: static; top: 3.5rem; left: 0rem; z-index:350; font-family: Special Elite; font-size:14px; color:white; transform: rotate(0deg);}*/
    #semPitch {display:none;}
    #noCookieBanner {display:none;}
    
    /*hamburger*/
    .hamburger{background:none; position:absolute; top:36px; right:10px; line-height:45px; padding:5px 15px 0px 15px;color: #aaa; border:0; font-size:1.4em; font-weight:bold;
	  cursor:pointer; outline:none;z-index:700;	}
	.cross{ background:none; position:absolute; top:36px; right:10px; padding:7px 15px 0px 15px; color:#999; border:0; font-size:3em; line-height:65px;
	  font-weight:bold; cursor:pointer; outline:none; z-index:730;
	}
	#pageNav{z-index:720; display:none; font-weight:bold; font-size:0.8em; width:100%; background:black;  position:absolute; top: 50px; left: 56%; width:150px; border: #ccc 1px solid;  border-radius: 8px; text-align:left; font-size:12px;}
	#pageNav ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
	#pageNav li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
	#pageNav li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
	#pageNav ul li a { text-decoration:none;  margin: 0px; color:#CCC;}
	#pageNav ul li a:hover {  color: #666; text-decoration:none;}
	#pageNav a{text-decoration:none; color:#CCC;}
	#pageNav a:hover{text-decoration:none; color:#666;}

	.glyphicon-home{color:white; font-size:1.5em; margin-top:5px; margin:0 auto; }
	xxheader{display:inline-block; font-size:12px;}
	xxspan{padding-left:20px;}
	xxa{color:#336699;}
    
}


/*==================================================================
						BREAKPOINT 600px
==================================================================*/

@media screen and (max-width: 600px) {

    h1 {font-size: 3rem;}
    .header__title h2 {font-size: 2rem;}

    #divSearch .input__wrap {width: 100%; float: none;}

    footer .footer__cookie,
    footer .footer__about {width: 100%; padding-left: 0; float: none;}
    footer .footer__about {margin-bottom: 4rem;}

}


/*===============================================================
                        BREAKPOINT 400px
===============================================================*/

@media screen and (max-width: 400px) {

    html {font-size: 50%;}

    h1 {font-size: 2.4rem;}
    .header__title h2 {font-size: 1.8rem;}

    header .header__logo {height: 6rem;}

}