@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic|Open+Sans+Condensed:700");
@import url('https://fonts.googleapis.com/css?family=Share+Tech');

html, body, div, span,object,iframe, h1, h2, h3, h4, h5, h6, p, blockquote,pre, a,code, del, dfn, em, img,  q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article,footer, header,section, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;	}
table {border-collapse: collapse;border-spacing: 50;}
body {-webkit-text-size-adjust: none;}
input::-moz-focus-inner {	border: 0;	padding: 0;}
input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}
html {box-sizing: border-box;}
*, *:before, *:after {	box-sizing: inherit;}
body {	background: linen;  font-family: 'Share Tech', sans-serif;}
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}
body, input, textarea, select {	font-weight: 400; color: #6b7770; font-size: 13pt;	line-height: 1.7em;}
	a {	color: #006376;	text-decoration: underline;	}
	a:hover {text-decoration: none;}
	b, strong {font-weight: 700;color: #6b7770;	}
	i, em {	font-style: italic;}
	br.clear {clear: both;}
	h1 {font-size: 2.1em; margin-left:2%; margin-right:2%; line-height:2.2em;}
	h2 {font-size: 1.7em; margin-left:2%; font-weight:800; color:#666; line-height:1.7em}
	h3 {font-size: 1.5em; margin-left:2%; margin-right:2%;}
	sub {position: relative;top: 0.5em;	font-size: 0.8em;}
	sup {position: relative; top: -0.5em;	font-size: 0.8em;}
	hr {border: 0;	border-top: solid 2px #E7EAE8;	margin: 0 0 3em 0;}
	p, ul, ol, dl, table {	margin-bottom: 3em;}
.gold{color:gold;}
.turquesa {color:#82E0AA}
.nvermell {color:#F00;}
.ntaronja {color:orange;}
.nverd {color:green;}
/* Section/Article */
section, article {margin-bottom: 6em;}
section > :last-child, section:last-child, article > :last-child, article:last-child {margin-bottom: 0;}
header > p {
		display: block;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		
		text-transform: uppercase;
		color: #c1cac5;
	}
.progres {margin:1%;}
.logo {float:left; margin-left:.5em;}
.button, .button1, .button3, .button4 {
    background-color: transparent;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    font-size: 2vw;
	font-weight:800;
    margin: .3vw .1vw;
    cursor: pointer;
	opacity: 1;
}
.button:hover, .button1:hover, .button4:hover, .button3:hover {transform: scale(1.25);}
.button disabled {background:#0C6;}
.button1 {color:navy;}
.button3 {color: #F90; }
.button4 {color: #039; margin-right:.5vw;}
.button4:hover {color: #F30;}
a span{	
	display:none;
	font-size:.97vw;
	color:#fff;
	background:rgba(51,51,51,0.79);
	padding:5px;
	border-radius:3px;
	text-align:center;
	position: absolute;
	z-index:100;
}
a {display: inline-block;}
a:hover span{display:block;}
.answers{padding-left:2vw; font-style:italic;}
/* Forms */
.thumb {
  width: 45px;
  height: 45px;
  border: 1px solid #BBB;
  margin: 2px 2px 0 0;
  border-radius:50%;
  vertical-align:middle;
 }
form label {}
	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		-webkit-appearance: none;
		display: block;
		width: 90%;
		border: 1px solid $gray;
        border-width: 0 0 1px 0;
		margin-top:2vh;
	}
	form input[type="text"]:focus,
	form input[type="email"]:focus,
	form input[type="password"]:focus,
	form select:focus,
	form textarea:focus {border-color: #a1cd9b;}
	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select {line-height: 1em;	padding: 0 1em;}
	form textarea {min-height: 9em;	padding: 1em;}
	form ::-webkit-input-placeholder {color: #555 !important;}
	form :-moz-placeholder {color: #555 !important;	}
	form ::-moz-placeholder {color: #555 !important;}
	form :-ms-input-placeholder {color: #555 !important;}
	form ::-moz-focus-inner {border: 0;	}
	
/* List */
	ul {list-style: disc; padding-left: 1em;}
	ul li {padding-left: 0.5em;}
	ol {list-style: decimal;padding-left: 1.25em;}
	ol li {padding-left: 0.25em;}

/* Divided */
	ul.divided {list-style: none;	padding-left: 0;}
	ul.divided > li {
			border-top: solid 2px #e7eae8;
			padding-top: 2.35em;
			margin-top: 2.35em;
			padding-left: 0;
		}
		ul.divided > li:first-child {
				border-top: 0;
				padding-top: 0;
				margin-top: 0;
			}

/* Tables */
table {width:100%; height: 520px;}
th, td {padding: 12px;}

/* Box */
.box.highlight {text-align: center;}
.box.highlight h2 {	font-size: 3em;	margin: 0 0 0.25em 0;	}
.box.highlight header > p {	font-size: 1.65em;	margin: 0 0 1.5em 0;}
.box.feature {text-align: center;}
.box.post header {	margin: 0 0 2.5em 0;}
.box.post h3 {	font-size: 3em;		margin: 0 0 0.25em 0;	}
.box.post header > p {	font-size: 1.65em;		margin: 0 0 0.5em 0;	}
.box.post ul.meta {margin: 0 0 0.5em 0;}
.box.post-summary h3 {line-height: 1em;		margin: 0 0 0.75em 0;	}
.box.post-summary .meta {margin: 0;	line-height: 1em;	}
.box.page-content header {margin: 0 0 2.5em 0;	}
.box.page-content h2 {font-size: 3em;		margin: 0 0 0.5em 0;	}
.box.page-content header > p {font-size: 1.65em;		margin: 0 0 0.5em 0;	}
.box.page-content ul.meta {	margin: 0 0 0.5em 0;	}

/* Icons */
.icon {	position: relative;	text-decoration: none;	}
.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}
.icon > .label {display: none;	}
.ricon {width: 50px; vertical-align:middle;transition: all .2s ease-in-out;}
.ricon:hover { transform: scale(1.1); }

/* Page Wrapper */
#page-wrapper > section {margin-bottom: 0;}

/* Nav */
body {padding-top:3.25em;}
#nav {	position: fixed;
		top: 0;
		left: 0;
		z-index: 900;
		background-color: rgba(255, 255, 255, 0.95);
		background-image: url("images/overlay.png");
		width: 100%;
		text-align: center;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		cursor: default;
	}
.row {display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: stretch;}

/* Banner */
#banner {position: relative;
		background-image: url("images/overlay.png"), url("images/overlay.png");
		background-position: top left, top left, center center;
		background-repeat: repeat, repeat, no-repeat;
		background-size: auto, auto, cover;
		z-index: 1;
		padding: 0 0;
	}
#banner .tablerepte {color: #fff; font-size:170%; padding:2em; text-align:center; opacity:..89;}
#banner p {padding:2em; line-height:2em;}
#banner h2 {text-shadow: 2px 2px #333;}

/* Main */
#main {	background: #fff;
		border-top: solid 5px #b1ddab;
		border-bottom: solid 5px #c1cac5;
		border-top-width: 35px;
		border-bottom-width: 10px;
		padding: 6em 0 6em 0;
	}

/* Footer */
footer {text-align: center;padding: 1em 0 1em 0;  background-color: #333; color:#CCC; margin-top:19vh;}
#footer {background-image: url("images/overlay.png"), url("images/overlay.png"); text-align: center;padding: 1em 0 1em 0; background-color:#C33; color:#CCC;}
#footer a {	color: inherit;	}
.footeri:before { content:'';}
.footeri:after {content: ' Robo-tics quadern digital. 2020';}

/* Form */
form { }
.formbuttons{ text-align:right; padding: 1vw;}
.formbutton{float:right; padding: 1vw;}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background-color: transparent;
  font-family: Share Tech;
  font-style:italic;
  border: 1px solid $gray;
  border-width: 0 0 1px 0;
  padding: .7vw .7vw .5vw .5vw;
  width: 90%;
  margin-bottom:2.1vw;
   margin-left:2%;
  font-size: 1.6vw;
  @extend %transition;
  &:focus { outline: none; }
}
input[type="radio"],
input[type="checkbox"] {margin: 0 .2vw .6vw 1.0vw; }
input[type=checkbox] { display:none; }
input[type=checkbox] + label:before {font-family: fontello; display: inline-block;}
input[type=checkbox] + label:before { content: "\f096"; } / 
input[type=checkbox] + label:before { letter-spacing: 10px; }  
input[type=checkbox]:checked + label:before { content: "\e83a"; color:#0C3; }  
input[type=checkbox]:checked + label:before { letter-spacing: 5px; }
input[type="submit"]:disabled { background: #dddddd; cursor:not-allowed;}
select {  padding: 0.6vw;  height: 3.2vw;  border-radius: 2px;}

/*Progress bar*/
.progress {
 list-style: none;
  margin-top:1em;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #849397;
}
.progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 1em;
  font-weight:800;
}
.progress > li:before {
  content: attr(data-step);
  display: block;
  margin: 0 auto;
  background: #DFE3E4;
  width: 2.8em;
  height: 2.8em;
  text-align: center;
  margin-bottom: 1em;
  line-height: 2.8em;
  border-radius: 50%;
  position: relative;
  z-index: 100;
}
.progress > li:after {
  content: '';
  position: absolute;
  display: block;
  background: #DFE3E4;
  width: 100%;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.1em/9;
  z-index: -1;
}
.progress > li:last-child:after {display: none;}
.progress > li.is-complete {color: #2ECC71;}
.progress > li.is-complete:before, .progress > li.is-complete:after {color: #FFF;  background: #2ECC71;}
.progress > li.is-active { color: #3498DB;}
.progress > li.is-active:before {  color: #FFF;  background: #3498DB;}
.progress > li.titol {color:#111; background: #f2f5f3; font-size: 1.2em;}
.progress > li.titol:before {width:auto; background: #f2f5f3;}
.progress__last:hover {color: #C00; cursor:pointer;}
.progress__last:after {display: none !important;}
*, *:after, *:before { box-sizing: border-box;}

@media screen and (max-width: 1680px) {
 			body, input, textarea, select {	font-size: 12pt;line-height: 1.75em;}
	}
@media screen and (max-width: 1280px) {
			body, input, textarea, select {	font-size: 11pt;}
			ul.special li a:before {font-size: 60px;}
			.box.highlight h2 {font-size: 2.5em;}
			.box.highlight header > p {	font-size: 1.25em;}
			.box.post h3 {	font-size: 2.5em;}
			.box.post header > p {	font-size: 1.25em;}
			#header {font-size: 1.5em;}
			#banner {padding: 6em 0;}
			#banner .content {padding: 4em 0 3em 0;}
			#banner .content h2 {margin: 0 0 0.65em 0;}
			#banner .content p {margin: 0 0 1em 0;}
			#main {	border-top-width: 20px;	border-bottom-width: 10px;}
			#footer {	padding: 6em 0 6em 0;}
	}
	
/* Change */
.titol {font-size: 3.7em; margin-left:2%; margin-right:2%; line-height:2.2em; color:#FFF; color: #39f !important;}
@-webkit-keyframes colours {
     0% {color: #39f;}
     25% {color: #8bc5d1;}
     50% {color: #f8cb4a;}
     75% {color: #8bc5d1;}
    100% {color: #39f;}

}
@-moz-keyframes colours {
     0% {color: #39f;}
     25% {color: #8bc5d1;}
     50% {color: #f8cb4a;}
     75% {color: #8bc5d1;}
    100% {color: #39f;}
}
.titol {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: normal;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: colours;
    -moz-animation-timing-function: ease;
}

/*Rubrics*/
#radios{position:relative; width:17%; margin:0 auto;}
input[type="radio"]{position:absolute; right:1000%; color:#68FB03;}
.labelc{float:left; width:15%; padding-bottom:15%;  margin:0 2.5%;  background:rgba(255,255,255,.2);  border-radius:50%;  cursor:pointer;}
.labelb{float:left; width:1%; padding-bottom:1%;  margin:0 2.5%;  background:rgba(255,255,255,.2);  border-radius:50%;  cursor:pointer;}
#slider{
  position:absolute;
  left:0%; top:0;
  width:10%; padding-bottom:10%;
  margin:2.5% 0 0 5%;
  background:#fff;
  transition:transform 1s;
  border-radius:50%;
  animation-timing-function: ease-in-out;
  animation-duration:.4s;
  animation-fill-mode: forwards;
  transition: 0.2s left .05s ease-in-out;
}
.coa {text-align: left; margin-top:6vh; margin-left:10%; width:80%; height: auto; font-size:125%}
.coa input[type=radio] + label:before,
.coa input[type=checkbox] + label:before{
  height:1.7vw;
  width:1.7vw;
  margin-right: .2vw;
  margin-left: 2vw;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  border:2px solid #777;
  background:rgba(255,255,255,.2);
  cursor:pointer;
}
.coa input[type=radio]:checked + label:before,.coa input[type=checkbox]:checked + label:before{background:gold;}
.coa input[type=radio] + label:before{border-radius:50%;}
.coa input[type=checkbox] + label:before{ border-radius:2px;}

a { text-decoration: none; color: white;}
.navigation {
  position: absolute;
  z-index: 5;
  top: 5vw;
  right: .5vw;
  font-size: 1.7vw;
  padding:.2em;
  display: visible;
  color:white;
  border: solid 1px #ccc;
  border-radius:4px;
}
#input1:checked  ~ #slider{ animation-name: input1; left:0%; background-color:#68FB03;}
#input2:checked  ~ #slider{ animation-name: input2; left:20%; background-color:#FBF303;}
#input3:checked  ~ #slider{ animation-name: input3; left:40%; background-color:#FBB703;}
#input4:checked  ~ #slider{ animation-name: input4; left:60%; background-color:#FB7803;}
#input5:checked  ~ #slider{ animation-name: input5; left:80%; background-color:#F00;}
@keyframes input1{ 30%, 70% { transform:scale(0.5); } }
@keyframes input2{ 30%, 70% { transform:scale(0.5); } }
@keyframes input3{ 30%, 70% { transform:scale(0.5); } }
@keyframes input4{ 30%, 70% { transform:scale(0.5); } }
@keyframes input5{ 30%, 70% { transform:scale(0.5); } }

.multipl-image-checkbox ul { list-style-type: none; text-align:center;}
.multipl-image-checkbox  li {display: inline-block;}
.multipl-image-checkbox  input[type="checkbox"][id^="cb"] {display: none;}
.multipl-image-checkbox  label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
}
.multipl-image-checkbox  label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}
.multipl-image-checkbox  label img {
  height: auto;
  width: 10vw;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}
.multipl-image-checkbox :checked + label {border:2px solid #86F541; border-radius: 5%;}
.multipl-image-checkbox  :checked + label:before { content: " ✓ ";  border-radius: 50%; background-color:white; transform: scale(0);}
.multipl-image-checkbox :checked + label img { transform: scale(0.9);  background-color: #F90;  z-index: -1;}

/* Saved advertisment */
.flash {
  display: block;
  position: fixed;
  top: 75px;
  right: 25px;
  width: 350px;
  padding: 20px 25px 20px 85px;
  font-size: 16px;
  font-weight: 400;
  color: #66847C;
  background-color: #FFF;
  border: 2px solid #66847C;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  opacity: 0;
  z-index:1000;
}
.flash__icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.8em;
  height: 100%;
  padding: 0 0.4em;
  background-color: #82E0AA;
  color: #FFF;
  font-size: 35px;
  font-weight: 300;
  transform: translate(0, -50%);
}
.flash__icon .icon {  position: absolute;  top: 50%;  transform: translate(0, -50%);}

@-webkit-keyframes drop-in-fade-out {
  0% {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(0, -200%, 0);
    -moz-transform: translate3d(0, -200%, 0);
    -ms-transform: translate3d(0, -200%, 0);
    -o-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
  12% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  20% {opacity: 1;}
  70% {opacity: 1;visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {opacity: 0;}
  100% {visibility: hidden;
    -webkit-transform: translate3d(75%, 0, 0);
    -moz-transform: translate3d(75%, 0, 0);
    -ms-transform: translate3d(75%, 0, 0);
    -o-transform: translate3d(75%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }
}
@-moz-keyframes drop-in-fade-out {
  0% {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(0, -200%, 0);
    -moz-transform: translate3d(0, -200%, 0);
    -ms-transform: translate3d(0, -200%, 0);
    -o-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
  12% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  20% {opacity: 1;}
  70% {opacity: .7;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {opacity: 0;}
  100% {
    visibility: hidden;
    -webkit-transform: translate3d(75%, 0, 0);
    -moz-transform: translate3d(75%, 0, 0);
    -ms-transform: translate3d(75%, 0, 0);
    -o-transform: translate3d(75%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }
}
@-o-keyframes drop-in-fade-out {
  0% {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(0, -200%, 0);
    -moz-transform: translate3d(0, -200%, 0);
    -ms-transform: translate3d(0, -200%, 0);
    -o-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
  12% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  20% {    opacity: 1;  }
  70% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {    opacity: 0;  }
  100% {
    visibility: hidden;
    -webkit-transform: translate3d(75%, 0, 0);
    -moz-transform: translate3d(75%, 0, 0);
    -ms-transform: translate3d(75%, 0, 0);
    -o-transform: translate3d(75%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }
}
@keyframes drop-in-fade-out {
  0% {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(0, -200%, 0);
    -moz-transform: translate3d(0, -200%, 0);
    -ms-transform: translate3d(0, -200%, 0);
    -o-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
  12% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  20% { opacity: 1; }
  70% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
    -webkit-transform: translate3d(75%, 0, 0);
    -moz-transform: translate3d(75%, 0, 0);
    -ms-transform: translate3d(75%, 0, 0);
    -o-transform: translate3d(75%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }
}
.animate--drop-in-fade-out {
  -webkit-animation: drop-in-fade-out 3.5s 0.4s cubic-bezier(.32,1.75,.65,.91);
  -moz-animation: drop-in-fade-out 3.5s 0.4s cubic-bezier(.32,1.75,.65,.91);
  -ms-animation: drop-in-fade-out 3.5s 0.4s cubic-bezier(.32,1.75,.65,.91);
  -o-animation: drop-in-fade-out 3.5s 0.4s cubic-bezier(.32,1.75,.65,.91);
  animation: drop-in-fade-out 3.5s 0.4s cubic-bezier(.32,1.75,.65,.91);
}

/*Tutorial*/
#tutorial {	
	width: 104vw;
    height: 120vh;
	top:57px;
	left:-6vw;
    position: absolute;
	display:none;
	background:rgb(0,0,0, 0.6);
	z-index:100;
} 
div.a {width: 90%; height:80%; position:fixed; left:-80px; top:0;}	
.talk {
  display: none;
  top:77px;
  left: 10px;
  position: absolute; top:0 right:0; margin-left:40%;
  box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);
  background: hsl(0 0% 100%);
  border: 4px #333 solid;
  color: hsl(200 50% 20%);
  line-height: 4.1vh;
  font-size: 1.9vw;
  font-weight: 300;
  width: 55vh;
  height: auto;
  display: flex;
  place-items: center;
  text-align: center;
  padding: 2ch;
  border-radius: 2ch;
  border: 1px solid hsl(0 0% 83%);
}

/*Sensors*/
  [type=radio] {position: absolute; opacity: 0;  width: 0;  height: 0;}
  [type=radio] + img {cursor: pointer;margin:1vw;}
  [type=radio]:checked + img {padding:.7em; outline: 4px solid rgb(51, 204, 51, .7);}
  [type=radio].ambpunt {position: relative; opacity: 1;  width: 10px;  height: 10px;}
  input {margin-left:3vw; margin-right:1vw;}
  .inputsensors {padding-left:3vw;}
  .sensor {height:6vw; transition: all .2s ease-in-out;}
  .sensor:hover {transform: scale(1.3);}
  
 /*Fireworks*/
 .pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  to {
    box-shadow: 227px -145.6666666667px #00fff2, 40px -403.6666666667px #002fff, 159px 61.3333333333px #22ff00, 243px -110.6666666667px #73ff00, -101px -158.6666666667px #9500ff, 18px -7.6666666667px #ee00ff, -59px -111.6666666667px #ffdd00, -2px -0.6666666667px #ff1a00, -42px -214.6666666667px #ff0088, 180px -2.6666666667px #4d00ff, -50px -304.6666666667px #15ff00, -33px -380.6666666667px #0040ff, -232px -124.6666666667px #0088ff, 233px -20.6666666667px #22ff00, 4px -107.6666666667px #ff0048, -87px -266.6666666667px #00ffb3, -108px -359.6666666667px #ff00bb, -152px -34.6666666667px #00ff37, 39px -368.6666666667px #9d00ff, 20px -220.6666666667px #00ff9d, -188px -194.6666666667px #bb00ff, 72px -84.6666666667px #e6ff00, 207px -2.6666666667px #e600ff, -111px 46.3333333333px #5eff00, 123px -3.6666666667px #0044ff, -117px -397.6666666667px #0066ff, -153px -351.6666666667px magenta, 14px -371.6666666667px #00ff0d, -196px -378.6666666667px #ff4400, -61px -70.6666666667px #ffdd00, -208px -96.6666666667px #4400ff, 195px -132.6666666667px #ffb300, 107px -408.6666666667px #2bff00, -229px -327.6666666667px #ffd900, -37px 24.3333333333px #ff00d5, -196px -381.6666666667px #ff00cc, -53px 80.3333333333px #00ff40, 63px -29.6666666667px #11ff00, 111px -139.6666666667px #3300ff, 108px 56.3333333333px #00ffa2, -61px -294.6666666667px #ff00aa, -131px -40.6666666667px #ff00dd, 78px -114.6666666667px #00ff1e, -74px -400.6666666667px #1aff00, 94px -119.6666666667px #ff00f7, -90px -324.6666666667px #f7ff00, -146px -330.6666666667px #ff00c4, 126px -171.6666666667px #e6ff00, -80px 54.3333333333px #ff0062, 108px -254.6666666667px #1e00ff, 7px 8.3333333333px #000dff;
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: 227px -145.6666666667px #00fff2, 40px -403.6666666667px #002fff, 159px 61.3333333333px #22ff00, 243px -110.6666666667px #73ff00, -101px -158.6666666667px #9500ff, 18px -7.6666666667px #ee00ff, -59px -111.6666666667px #ffdd00, -2px -0.6666666667px #ff1a00, -42px -214.6666666667px #ff0088, 180px -2.6666666667px #4d00ff, -50px -304.6666666667px #15ff00, -33px -380.6666666667px #0040ff, -232px -124.6666666667px #0088ff, 233px -20.6666666667px #22ff00, 4px -107.6666666667px #ff0048, -87px -266.6666666667px #00ffb3, -108px -359.6666666667px #ff00bb, -152px -34.6666666667px #00ff37, 39px -368.6666666667px #9d00ff, 20px -220.6666666667px #00ff9d, -188px -194.6666666667px #bb00ff, 72px -84.6666666667px #e6ff00, 207px -2.6666666667px #e600ff, -111px 46.3333333333px #5eff00, 123px -3.6666666667px #0044ff, -117px -397.6666666667px #0066ff, -153px -351.6666666667px magenta, 14px -371.6666666667px #00ff0d, -196px -378.6666666667px #ff4400, -61px -70.6666666667px #ffdd00, -208px -96.6666666667px #4400ff, 195px -132.6666666667px #ffb300, 107px -408.6666666667px #2bff00, -229px -327.6666666667px #ffd900, -37px 24.3333333333px #ff00d5, -196px -381.6666666667px #ff00cc, -53px 80.3333333333px #00ff40, 63px -29.6666666667px #11ff00, 111px -139.6666666667px #3300ff, 108px 56.3333333333px #00ffa2, -61px -294.6666666667px #ff00aa, -131px -40.6666666667px #ff00dd, 78px -114.6666666667px #00ff1e, -74px -400.6666666667px #1aff00, 94px -119.6666666667px #ff00f7, -90px -324.6666666667px #f7ff00, -146px -330.6666666667px #ff00c4, 126px -171.6666666667px #e6ff00, -80px 54.3333333333px #ff0062, 108px -254.6666666667px #1e00ff, 7px 8.3333333333px #000dff;
  }
}
@-o-keyframes bang {
  to {
    box-shadow: 227px -145.6666666667px #00fff2, 40px -403.6666666667px #002fff, 159px 61.3333333333px #22ff00, 243px -110.6666666667px #73ff00, -101px -158.6666666667px #9500ff, 18px -7.6666666667px #ee00ff, -59px -111.6666666667px #ffdd00, -2px -0.6666666667px #ff1a00, -42px -214.6666666667px #ff0088, 180px -2.6666666667px #4d00ff, -50px -304.6666666667px #15ff00, -33px -380.6666666667px #0040ff, -232px -124.6666666667px #0088ff, 233px -20.6666666667px #22ff00, 4px -107.6666666667px #ff0048, -87px -266.6666666667px #00ffb3, -108px -359.6666666667px #ff00bb, -152px -34.6666666667px #00ff37, 39px -368.6666666667px #9d00ff, 20px -220.6666666667px #00ff9d, -188px -194.6666666667px #bb00ff, 72px -84.6666666667px #e6ff00, 207px -2.6666666667px #e600ff, -111px 46.3333333333px #5eff00, 123px -3.6666666667px #0044ff, -117px -397.6666666667px #0066ff, -153px -351.6666666667px magenta, 14px -371.6666666667px #00ff0d, -196px -378.6666666667px #ff4400, -61px -70.6666666667px #ffdd00, -208px -96.6666666667px #4400ff, 195px -132.6666666667px #ffb300, 107px -408.6666666667px #2bff00, -229px -327.6666666667px #ffd900, -37px 24.3333333333px #ff00d5, -196px -381.6666666667px #ff00cc, -53px 80.3333333333px #00ff40, 63px -29.6666666667px #11ff00, 111px -139.6666666667px #3300ff, 108px 56.3333333333px #00ffa2, -61px -294.6666666667px #ff00aa, -131px -40.6666666667px #ff00dd, 78px -114.6666666667px #00ff1e, -74px -400.6666666667px #1aff00, 94px -119.6666666667px #ff00f7, -90px -324.6666666667px #f7ff00, -146px -330.6666666667px #ff00c4, 126px -171.6666666667px #e6ff00, -80px 54.3333333333px #ff0062, 108px -254.6666666667px #1e00ff, 7px 8.3333333333px #000dff;
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: 227px -145.6666666667px #00fff2, 40px -403.6666666667px #002fff, 159px 61.3333333333px #22ff00, 243px -110.6666666667px #73ff00, -101px -158.6666666667px #9500ff, 18px -7.6666666667px #ee00ff, -59px -111.6666666667px #ffdd00, -2px -0.6666666667px #ff1a00, -42px -214.6666666667px #ff0088, 180px -2.6666666667px #4d00ff, -50px -304.6666666667px #15ff00, -33px -380.6666666667px #0040ff, -232px -124.6666666667px #0088ff, 233px -20.6666666667px #22ff00, 4px -107.6666666667px #ff0048, -87px -266.6666666667px #00ffb3, -108px -359.6666666667px #ff00bb, -152px -34.6666666667px #00ff37, 39px -368.6666666667px #9d00ff, 20px -220.6666666667px #00ff9d, -188px -194.6666666667px #bb00ff, 72px -84.6666666667px #e6ff00, 207px -2.6666666667px #e600ff, -111px 46.3333333333px #5eff00, 123px -3.6666666667px #0044ff, -117px -397.6666666667px #0066ff, -153px -351.6666666667px magenta, 14px -371.6666666667px #00ff0d, -196px -378.6666666667px #ff4400, -61px -70.6666666667px #ffdd00, -208px -96.6666666667px #4400ff, 195px -132.6666666667px #ffb300, 107px -408.6666666667px #2bff00, -229px -327.6666666667px #ffd900, -37px 24.3333333333px #ff00d5, -196px -381.6666666667px #ff00cc, -53px 80.3333333333px #00ff40, 63px -29.6666666667px #11ff00, 111px -139.6666666667px #3300ff, 108px 56.3333333333px #00ffa2, -61px -294.6666666667px #ff00aa, -131px -40.6666666667px #ff00dd, 78px -114.6666666667px #00ff1e, -74px -400.6666666667px #1aff00, 94px -119.6666666667px #ff00f7, -90px -324.6666666667px #f7ff00, -146px -330.6666666667px #ff00c4, 126px -171.6666666667px #e6ff00, -80px 54.3333333333px #ff0062, 108px -254.6666666667px #1e00ff, 7px 8.3333333333px #000dff;
  }
}
@keyframes bang {
  to {
    box-shadow: 227px -145.6666666667px #00fff2, 40px -403.6666666667px #002fff, 159px 61.3333333333px #22ff00, 243px -110.6666666667px #73ff00, -101px -158.6666666667px #9500ff, 18px -7.6666666667px #ee00ff, -59px -111.6666666667px #ffdd00, -2px -0.6666666667px #ff1a00, -42px -214.6666666667px #ff0088, 180px -2.6666666667px #4d00ff, -50px -304.6666666667px #15ff00, -33px -380.6666666667px #0040ff, -232px -124.6666666667px #0088ff, 233px -20.6666666667px #22ff00, 4px -107.6666666667px #ff0048, -87px -266.6666666667px #00ffb3, -108px -359.6666666667px #ff00bb, -152px -34.6666666667px #00ff37, 39px -368.6666666667px #9d00ff, 20px -220.6666666667px #00ff9d, -188px -194.6666666667px #bb00ff, 72px -84.6666666667px #e6ff00, 207px -2.6666666667px #e600ff, -111px 46.3333333333px #5eff00, 123px -3.6666666667px #0044ff, -117px -397.6666666667px #0066ff, -153px -351.6666666667px magenta, 14px -371.6666666667px #00ff0d, -196px -378.6666666667px #ff4400, -61px -70.6666666667px #ffdd00, -208px -96.6666666667px #4400ff, 195px -132.6666666667px #ffb300, 107px -408.6666666667px #2bff00, -229px -327.6666666667px #ffd900, -37px 24.3333333333px #ff00d5, -196px -381.6666666667px #ff00cc, -53px 80.3333333333px #00ff40, 63px -29.6666666667px #11ff00, 111px -139.6666666667px #3300ff, 108px 56.3333333333px #00ffa2, -61px -294.6666666667px #ff00aa, -131px -40.6666666667px #ff00dd, 78px -114.6666666667px #00ff1e, -74px -400.6666666667px #1aff00, 94px -119.6666666667px #ff00f7, -90px -324.6666666667px #f7ff00, -146px -330.6666666667px #ff00c4, 126px -171.6666666667px #e6ff00, -80px 54.3333333333px #ff0062, 108px -254.6666666667px #1e00ff, 7px 8.3333333333px #000dff;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}