@import url('https://fonts.googleapis.com/css?family=Ubuntu');
* { margin: 0; padding: 0;}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
body {background: #1f253d; font-size:1.2vw;	line-height:1.7vw;	font-family: 'Ubuntu', sans-serif;}
.bigtitol {background-color: #036; background: linear-gradient(to left, #036, #3380C9); width:100%; height:auto; font-size: 1.5vw; color:#FFF; padding:1%;}
.subtitol {width:100%; height:auto; font-size: 1.25vw; color:#FFF; padding:1%;}
.close, .info {color: white; font-size:150%;margin-right:.6vw;}
.close:hover {color: #C00;}
.info:hover {color:#D38516;}
.start {color: #F4D03F; font-size:170%; margin-right:1vw; transition: all .2s ease-in-out;}
.start:hover {color: golden; transform: scale(1.1);}
.thumb {width: 100%; height: 100%; border-radius: 50%}
ul {list-style-type: none;	margin: 0;	padding-left: 0;}
a,a:focus,a:hover { text-decoration: none;}
.clock {font-size:80%; margin-right:1em;}
h1, h2, h4, h5, p, a, span{	color: #fff;}
.scnd-font-color {color: #9099b7;}
.input-container {position: relative;}
.horizontal-list {margin: 0 0 0 3%; padding: 0; list-style-type: none; text-align: center;}
.horizontal-list li {float: left;}
.clear {clear: both;}
.icon {font-size: 105%; color: gold;}
.iconcap {font-size: 170%; margin-right: .7vw; font-weight: 400; vertical-align: middle;}
.iconcap2 {font-size: 250%; margin-right: .7vw; font-weight: 400; vertical-align: middle; color:khaki;}
.titular {
	display: block;
	line-height: 60px;
	margin: 0 0 2vw 0;
	text-align: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.button {
	display: inline-flex;
	width: 65%;
	height: auto;
	line-height: 50px;
	font-size: 1vw;
	font-weight: 700;
	padding:0.3vw 0.5vw;
	margin: 1.5vw auto;
	border-radius: 0.5rem;
	-webkit-transition: background .3s;
	transition: background .3s;	
	text-transform: uppercase;
    outline: none;   
    border: none;
    cursor: pointer;  
    background-size: 200% auto;
    background-image: linear-gradient(to right, #00a6fb 0%, #00fddc 50%, #00a6fb 100%);
    background-position: left center;
    transition: all 0.4s ease-out;  
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 -4px 2px -1px rgba(0, 0, 0, 0.15), 0 0.5px 0.6px rgba(0, 0, 0, 0.039), 0 1.1px 1.3px rgba(0, 0, 0, 0.057), 0 2.1px 2.5px rgba(0, 0, 0, 0.07), 0 3.8px 4.5px rgba(0, 0, 0, 0.083), 0 7.1px 8.4px rgba(0, 0, 0, 0.101), 0 17px 20px rgba(0, 0, 0, 0.14);
}
.button:hover {
  background-position: right center;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3), inset 0 -4px 2px -1px rgba(0, 0, 0, 0.15), 0 0.1px 0.2px rgba(0, 0, 0, 0.039), 0 0.3px 0.4px rgba(0, 0, 0, 0.057), 0 0.5px 0.8px rgba(0, 0, 0, 0.07), 0 0.9px 1.3px rgba(0, 0, 0, 0.083), 0 1.7px 2.5px rgba(0, 0, 0, 0.101), 0 4px 6px rgba(0, 0, 0, 0.14);
}
.button > span { color: #06070a;}
.mini {display: none;}
.unit {margin:10px; font-size:80%; font-weight:800;} 
.profile-picture {
	border-radius: 100%;
	overflow: hidden;
	-webkit-box-sizing: content-box;
  	-moz-box-sizing: content-box;
  	box-sizing: content-box;	
}
.big-profile-picture {
		margin: 0 auto;		
		border: 5px solid #50597b;
		width: 150px;
		height: 150px;
	}
.small-profile-picture {
		border: 2px solid #50597b;
		width: 40px;
		height: 40px;
	}
	
/*Colors*/
.blue {color:#21618C;}
.celeste {background-color: #B4E2E6;}
.gold {color:gold;}
.gris {color:#ACB7C1}
.green {color:#99e699}
.greenb {background-color:#99e699}
.lime {color:#87DC60;}
.orange {color:gold;}
.red {color: #C00;}
.red:hover {opacity:.7;}
.redb {background-color: #C00;}
.redrb {background-color: #E74C3C; padding:.7vh; margin-right:.79vw; border-radius: 100%; font-size: 69%; color:beige;}
.redrb:hover {background-color: #C00;}
.sky {color: #4B99E7;}
.yellow {color: #FFC300;}


/** MAIN CONTAINER **/
.main-container {font-family: 'Ubuntu', sans-serif;	width: 80%; height:auto; margin: 2% 10% auto auto;}	
	
		
/** CONTAINERS **/
 .container {float: left;}
 .block {margin-bottom: 25px; background: #394264;	border-radius: 5px;}
 
	/******************************************** LEFT CONTAINER *****************************************/
.left-container {margin-left:2%; width: 25%;}
.menu-box {height: auto; margin-right:6px;}
.menu-box .titular {background: #11a8ab;}
.menu-box-menu .icon {display: inline-block;vertical-align: top;width: 28px;margin-left: 20px;margin-right: 15px;}
.increment {color: #e64c65;	}
.left-container .social {height: 110px;	}
.left-container .social li {width: 75px;height: 110px;	}
.left-container .social li .icon {
						text-align: center;
						font-size: 20px;
						margin: 0;
						line-height: 75px;
					}
.left-container .social li .number {
						text-align: center;
						margin: 0;
						line-height: 34px;
					}

.left-container .social .googleplus {background: #e64c65;}
.left-container .social .googleplus .number{background: #cc324b;}
.left-container .social .mailbox {background: #50597b; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.left-container .social .mailbox .number {background: #363f61;border-bottom-right-radius: 5px;}

/************************************************** MIDDLE CONTAINER **********************************/
.middle-container {	margin: 0 1vw;	width: 30%;}
.profile {height:auto;}
.user-name {margin: 25px 0 16px; text-align: center; color:beige; font-size: 170%; font-weight: 200;}
.profile-description {width: 210px; margin: 0 auto;	text-align: center;	}
	
/********************************************* RIGHT CONTAINER ****************************************/
.right-container {width: 25%;}
	.join-newsletter {height: auto;	}
	.join-newsletter .titular {	padding-top: 10px;}
	.subscribe.button {background: #11a8ab;margin-top: 10px; width: 80%;}
	.subscribe.button:hover {background: #0F9295;}
    .account {height: 390px;}
    .account .titular {padding: 10px 0;}
    .sign-in.button {background: #e64c65; margin: 10px auto; cursor: pointer}
   	.sign-in.button:hover {background: #cc324b;}
    .account p {text-align: center;}
	
/*Cercle*/
    .progress-ring {position: relative; width: 100%; height: auto;}
    svg {display: inline-block; }
    circle {fill: none; stroke-width: 12; transform: rotate(-90deg); transform-origin: 50% 50%;}
    .bg {stroke: #ddd;}
    .progress {stroke: #4caf50; stroke-linecap: round; transition: stroke-dashoffset 0.3s ease;}
    .percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 210%;
      font-weight: 600;
      color: #FFF;
    }

.contingut, .contingut2{color:#EEE; text-align:center; margin-top:20vh;}
.contingut2 {text-align:left; margin-top:10vh; margin-left: 4vw;}
 
.submit-button {
  display: flex-block;
  color: white;
  font-weight: 600;
  line-height:3vw;
  font-size: 1.7vw;
  height: auto;
  width: auto;
  overflow: hidden;
  background: #4A9AEA ;
  border-radius: 3px;
  box-shadow: 0 15px 30px rgba(black,.1);
  border: 0;
  cursor: pointer;
  padding: .1vh 1vh .1vh 1vh; 
  margin-left:-.8vw;
  }
.submit-button:hover {color: snow; background: #5B9AEB;}
.cert-button {
  display: flex-block;
  color: white;
  font-weight: 400;
  font-size: .8vw;
  height: auto;
  width: auto;
  overflow: hidden;
  background: #4A9AEA ;
  border-radius: 3px;
  border: 0;
  cursor: pointer;
  padding: .4vh; 
  }
.cert-button:disabled {color: #999; background: #666;}


.codi {border-radius: 4px;	padding: .2vw;font-size:1.7vw; text-align:center;} 

/*loader*/
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

/*NT*/
.main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top:1vh;
    margin-bottom:1vh;
}
.cardlogin {
    position: relative;
    margin: auto;
    border-radius: 5px;
    background-color: #fff;
    width: 340px;
    padding: 16px 32px;
    box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.card:focus, .card:hover {box-shadow: 1px 1px 4px 3px rgba(0,0,0,0.2);}
.cardlogin .logo {
        position: absolute;
        top: -50px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

@media screen and (max-width: 408px) {
    .main {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
    }

.card {width: auto !important;  margin: 100px 8px !important;}
}
.logo {
    display: block;
    background-image: url("data:image/png;base64,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");
  background-repeat:no-repeat;
    background-size: 100%;
    width: 110px;
    height: 110px;
    font-size: 5rem;
    text-align: center;
    color: #fff;
     border-radius: 50%;
    box-shadow: 0px 0px 2px 2px rgba(16, 16, 16, 0.5);
    transition: all 0.3s ease;
}

.logo:hover {transform: scale(1.02);}
.logo div {width: 100%;  height: 1rem;}
.card-head { padding: 4vh 0 24px; text-align:center;}
.card-head .header {font-size: 20px; font-weight: 500; color: #282828; display: inline-block; margin: 0; }
.card-body {display: block; position: relative;}
form {display: block;  margin-top: 0em;}
.form-group {margin-bottom: 16px; position: relative; text-align: center;}
.form-label {font-weight: 400; display: block; font-size: 16px;  color: #282828; margin-bottom: 8px;}

.form-control {
    font-size: 14px;
    color: #282828;
    border-radius: 3px;
    box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -webkit-box-shadow: none;
    border: 1px solid #bbb;
    padding: 8px;
    display: block;
    width: 100%;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
}

.form-control:focus, .form-control:hover {
        outline: 0 none;
        -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.075);
        box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.075);
        border-color: var(--color-primary);
    }

.btn {
    display: inline-block;
    padding: 10px 16px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #fff;
    background-color: #00a3a3;
    height: 40px;
    width: 100%;
    box-shadow: 2px 2px 3px 0px rgba(101, 101, 101, 0.4);
}
.btn:hover, .btn:focus { background-color: #00a3a3 !important;  }
.form-group .btn {margin-top: 2rem;}
.upload {width: 3vw; height: 3vw; background-color: rgb(255,204,0, 0.98);
  border-radius: 50%;color: #fff; font-size: 2.5vw; cursor:pointer; border: solid 2px orange; margin-left:48px;}
  
  #footer{
 text-align: center;
 left: 0%;
 bottom: 0px;						
 width: 100%;
 background-color: #222;
 color: #fff;
 padding: 15px;
 position: fixed;
 _position: absolute;
 text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

/*FIRST LOGIN*/

p {opacity: 0.5; line-height: 1.4;}
.text-center { text-align: center;}

.card {
  background: radial-gradient(100% 100% at 50% 5%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 0.5rem;
  backdrop-filter: blur(4px);
}
.card > div {
  background: #2d2d59;
  border-radius: 0.5rem;
  padding: 2rem;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1.5px 1.1px rgba(0, 0, 0, 0.034), 0 3.6px 2.5px rgba(0, 0, 0, 0.048), 0 6.8px 4.8px rgba(0, 0, 0, 0.06), 0 12.1px 8.5px rgba(0, 0, 0, 0.072), 0 22.6px 15.9px rgba(0, 0, 0, 0.086), 0 54px 38px rgba(0, 0, 0, 0.12);
}

.card h3 {color:azure; margin: 1.2vw;;}

.website-content {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.website {
  background-size: cover;
  background-position: center top;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.flex-container {  display: flex;} 
.lottie-container {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.rewards {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 800px;
}
.rewards .rewards-container {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-bottom: 2rem;justify-content: center;
}
.rewards .rewards-container .card-content {
  justify-content: center;
  display: flex;
}
.rewards .rewards-container .card-content .spinningasset {
  height: 240px;
  margin-top: 50px;
}
@media only screen and (max-width: 768px) {
  .rewards .rewards-container {
    flex-direction: column;
  }
  .rewards .rewards-container .card-content {
    display: flex;
    flex-direction: row;
  }
  .rewards .rewards-container .reward-image {
    padding: 1rem;
    background: transparent;
    width: 132px;
  }
  .rewards .rewards-container .reward-image img {
    max-width: 100px;
    max-height: 100px;
  }
  .rewards .rewards-container .reward-text {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto 0;
    text-align: left;
  }
}
.rewards .rewards-container > * {
  min-width: 300px;
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
.rewards .rewards-container > * > * {
  flex: 1;
  background: linear-gradient(180deg, #242547 0%, #1a1b3a 100%);
}

.reward-comments {
  opacity: 0;
  transition: opacity 1.6s ease-out 0.4s;
  max-width: 500px;
  margin: auto;
}

.reward-text {
  position: absolute;
  bottom: 2.2rem;
  color: azure;
  right: 0;
  left: 0;
  font-weight: 700;
  font-size: 1.2rem;
  opacity: 0.75;
}

@keyframes bounce-in-top {
  0% {
    transform: translateY(-125px);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translateY(-16.25px);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  81% {
    transform: translateY(-7px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  95% {
    transform: translateY(-2px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}
@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.modal.is-in .rewards-container > * {  animation: scale-in-center 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) both;}
.modal.is-in .rewards-container > * .reward-image {  background-size: 90% auto;}
.modal.is-in .rewards-container > * .reward-image > img {  animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;}
.modal.is-in .rewards-container > * .reward-text {  animation: bounce-in-top 1.1s both;}
.modal.is-in .rewards-container > *:nth-child(1) {  animation-delay: 0.3s;}
.modal.is-in .rewards-container > *:nth-child(1) .reward-image > img {  animation-delay: 0.3s;}
.modal.is-in .rewards-container > *:nth-child(1) .reward-text {  animation-delay: 0.3s;}
.modal.is-in .rewards-container > *:nth-child(2) {  animation-delay: 0.4s;}
.modal.is-in .rewards-container > *:nth-child(2) .reward-image > img {  animation-delay: 0.4s;}
.modal.is-in .rewards-container > *:nth-child(2) .reward-text {
  animation-delay: 0.4s;
}
.modal.is-in .rewards-container > *:nth-child(3) {
  animation-delay: 0.5s;
}
.modal.is-in .rewards-container > *:nth-child(3) .reward-image > img {
  animation-delay: 0.5s;
}
.modal.is-in .rewards-container > *:nth-child(3) .reward-text {
  animation-delay: 0.5s;
}
.modal.is-in .reward-comments {
  opacity: 1;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
  
section.modal {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(14, 15, 30, 0.85);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
  backdrop-filter: blur(0);
  pointer-events: none;
}
section.modal .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-x: hidden;
}
section.modal.is-in {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(12px);
}
section.modal.is-in .modal-content {
  opacity: 1;
  animation: modal-isin 0.2s ease 1 forwards;
}

@keyframes modal-isin {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes brightness {
  0%, 50%, 100% {
    filter: blur(0px) brightness(120%) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.075)) drop-shadow(0 0 7.5px rgba(255, 255, 255, 0.045)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.025));
  }
  25%, 75% {
    filter: blur(1px) brightness(50%) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.075)) drop-shadow(0 0 7.5px rgba(255, 255, 255, 0.045)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.025));
  }
}
@keyframes spin {
  0% {
    transform: rotateY(-180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}
.spinningasset {
  text-align: left;
  transition: all 0.4s ease-out;
  cursor: pointer;
  animation: brightness 2.5s infinite linear;
}
.spinningasset::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 8px;
  width: 11px;
  margin: auto;
  background-size: 100px 400%;
  background-position: center;
}
.spinningasset > div {
  position: relative;
  z-index: 2;
  perspective: 10000px;
  transform-style: preserve-3d;
  transform-origin: center;
  animation: spin 2.5s infinite linear;
}
.spinningasset > div > * {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  background-size: cover;
}
.spinningasset > div > div:first-child {
  transform: translateZ(-6px);
}
.spinningasset > div > div:last-child {
  transform: translateZ(6px);
  background-image: url(https://gloot.netlify.app/images/prototype/Coins_side_front.svg);
}
.spinningasset > div em {
  filter: blur(0.5px);
}
.spinningasset > div em:first-of-type {
  transform: translateZ(0px) rotateY(-6deg);
}
.spinningasset > div em:last-of-type {
  transform: translateZ(0px) rotateY(6deg);
}
.spinningasset > div i {
  filter: blur(0.5px);
}
.spinningasset > div i:nth-of-type(1) {
  transform: translateZ(-5px);
}
.spinningasset > div i:nth-of-type(2) {
  transform: translateZ(-4px);
}
.spinningasset > div i:nth-of-type(3) {
  transform: translateZ(-3px);
}
.spinningasset > div i:nth-of-type(4) {
  transform: translateZ(-2px);
}
.spinningasset > div i:nth-of-type(5) {
  transform: translateZ(-1px);
}
.spinningasset > div i:nth-of-type(6) {
  transform: translateZ(0px);
}
.spinningasset > div i:nth-of-type(7) {
  transform: translateZ(1px);
}
.spinningasset > div i:nth-of-type(8) {
  transform: translateZ(2px);
}
.spinningasset > div i:nth-of-type(9) {
  transform: translateZ(3px);
}
.spinningasset > div i:nth-of-type(10) {
  transform: translateZ(4px);
}
.spinningasset > div i:nth-of-type(11) {
  transform: translateZ(5px);
}
.spinningasset.is-sm {
  width: 24px;
  height: 24px;
  transform: scale(0.24);
  transform-origin: left top;
  filter: none;
}
.spinningasset.coin > div {
  width: 100px;
  height: 100px;
}
.spinningasset.coin > div > div:first-child {
  background-image: url(../imgs/chip.png);
}
.spinningasset.coin > div > div:last-child, .spinningasset.coin > div::after,
.spinningasset.coin > div i,
.spinningasset.coin > div em {
  background-image: url(../imgs/chip.png);
} 

/*leds unitats*/
.led {
  width: 1.7vw;
  height: 1.7vw;
  border-radius: 50%;
  margin: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  font-size: 1vw;
  transition: background-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 5px #000;
}
.led.on {background-color: #00ff00; box-shadow: 0 0 10px #00ff00;}
.led.off {background-color: #555; color: #aaa; box-shadow: none;}

/*boletes inici*/
.wrapper {
  width: 200px;
  height: 60px;
  margin-top:12vh;
  margin-bottom:4vh;
  position: relative;
  display:none;
  z-index: 1;
}
.circle{
  width: 21px;
  height: 21px;
  position: absolute;
  border-radius: 50%;
  background-color: #c46b23;
  left: 15%;
  transform-origin: 50%;
  animation: circle7124 .5s alternate infinite ease;
}
@keyframes circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }
  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0%;
  }
}
.circle:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
  background-color: #96dce8;
}
.circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
  background-color: #8dc150;
}
.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.9);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow046 .5s alternate infinite ease;
}
@keyframes shadow046 {
  0% {
    transform: scaleX(1.5);
  }
  40% {
    transform: scaleX(1);
    opacity: .7;
  }
  100% {
    transform: scaleX(.2);
    opacity: .4;
  }
}
.shadow:nth-child(4) {
  left: 45%;
  animation-delay: .2s
}
.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

/*progrés alumne*/
.cap, .cos {margin:2vh .5vw;}
.contactp {width:90vw; margin:5vw; padding:2.5vw; border: solid 2px #777; border-radius:10px;}
.wrapper2 {display: flex; flex-flow: row wrap; margin-bottom:8vh; text-align: center;}
.wrapper > * { padding: 10px; flex: 1 100%;}

:root {
      --primary-color: #4989be;
      --bg-color: #e3e6e2;
      --card-bg: #ffffff;
      --text-color: #1f2937;
      --muted-color: #6b7280;
      --border-radius: 15px;
      --shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    }
.title {text-align: center; font-size: 2rem; margin-bottom: 2rem;}
.subtitle {text-align: center; font-size: 1.7rem; margin-bottom: 1rem; color: var(--bg-color)}
.titolu {color:var(--bg-color);}
.progress-box {background-color: transparent; padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow); margin-bottom: 2rem;}
.progress-bar {
  height: 12px;
  background-color: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem;
}
.progress-bar-fill {
  height: 100%;
  background-color: var(--primary-color);
  width: 0%; /* Progrés total del curs */
  border-radius: 999px;
  transition: width 0.3s ease;
}
.unit-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
.unit-card {
  border: solid 2px var(--primary-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.unit-card h3 {font-size: 1.1rem; margin-bottom: 0.75rem;} 
.unit-card p {margin: 0.3rem 0; font-size: 0.95rem;}

.certificate-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.certificate-link:hover {text-decoration: underline;}

.certificate-disabled {
  color: var(--muted-color);
  cursor: not-allowed;
}
/*Visor de proves*/
.contingut-flex {
    display: flex; /* Convierte este div en un contenedor flexbox */
    justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    align-items: flex-start; /* Alinea los elementos al inicio del eje transversal (parte superior) */
    width: 100%; /* Opcional, pero recomendable para que ocupe todo el ancho */
}
#resultados-html {width: 15%; padding:5vw; color:#fff;}
.contingut3 {width: 85%; padding:5vw; color:khaki}
.frame {width: 98%; height:60vh;background-color: white; padding:1vw; vertical-align: text-top; border: none;}