body {background: #000; overflow-x: hidden; font-family: 'Bebas Neue', sans-serif;}
	body.showOverlay {overflow: hidden;}

	.h100 {height: 100%;}
	.desktop {display: block !important;}
	.mobile {display: none !important;}
	.l {float: left;}
	.r {float: right;}

	::-webkit-input-placeholder {
	   color: #979797;
	   opacity: 1;
	   -webkit-transition: .3s;
	      -moz-transition: .3s;
	       -ms-transition: .3s;
	        -o-transition: .3s;
	           transition: .3s;
	}

	::-moz-placeholder {  /* Firefox 19+ */
	   color: #979797;
	   opacity: 1; 
	   -webkit-transition: .3s;
	      -moz-transition: .3s;
	       -ms-transition: .3s;
	        -o-transition: .3s;
	           transition: .3s; 
	}

	:-ms-input-placeholder {  
	   color: #979797; 
	   opacity: 1; 
	   -webkit-transition: .3s;
	      -moz-transition: .3s;
	       -ms-transition: .3s;
	        -o-transition: .3s;
	           transition: .3s;
	}

	.error::-webkit-input-placeholder {
	   color: #CC4138;
	   opacity: 1;
	}

	.error:-moz-placeholder { /* Firefox 18- */
	   color: #CC4138;
	   opacity: 1;  
	}

	.error::-moz-placeholder {  /* Firefox 19+ */
	   color: #CC4138;
	   opacity: 1;  
	}

	.error:-ms-input-placeholder {  
	   color: #CC4138; 
	   opacity: 1; 
	}


/*	--------------------------------------------------
	Global & shapes
	-------------------------------------------------- */
	section {position: relative; height: 100vh; height: 100dvh;}
	main {
		min-width: 100vw;
		min-height: 100vh;
		min-height: 100dvh;
		background: url('../img/bg.jpeg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}
	.clear {clear: both;}
	.loader {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: center;
		        justify-content: center;
		flex-direction: column;
		gap: 28px;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 99;
	}
	.loader p {
		font-size: 24px;
	}
	h3 {
		font-size: 42px;
		line-height: 45px;
	}
	h4 {
		font-size: 24px;
		margin-bottom: 15px;
	}
	.flex-full {
		flex-basis: 100%;
	}
	.modal-backdrop {
		width: 100dvw;
		height: 100dvh;
		background: #000;
		pointer-events: none;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		-webkit-transition: .4s;
		   -moz-transition: .4s;
		    -ms-transition: .4s;
		     -o-transition: .4s;
		        transition: .4s;
	}
	.backdrop .modal-backdrop {
		opacity: 1;
	}
	body.modal-open section.home {
		pointer-events: none;
	}
	.toast {
		width: 100vw;
		width: 100dvw;
		position: fixed;
		top: -100%;
		left: 0;
		color: #FFF;
		font-size: 20px;
		font-family: "Roboto", sans-serif;
		padding: 12px;
		z-index: 9999;
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: center;
		        justify-content: center;
		gap: 14px;
		-webkit-transition: .4s;
		   -moz-transition: .4s;
		    -ms-transition: .4s;
		     -o-transition: .4s;
		        transition: .4s;
	}
	.toast.show {
		top: 0;
	}
	.toast.error {
		background: #ff1e00;
	}

/*	--------------------------------------------------
	Age validation
	-------------------------------------------------- */
	section.age {
		display: none;
		background: #000;
	}
	section.age:after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.9;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}
	.age-form {
		max-width: 960px;
		margin: auto;
		display: flex;
		flex-direction: column;
		text-align: center;
		height: 100vh;
		height: 100dvh;
		z-index: 1;
		position: relative;
		-webkit-justify-content: center;
		        justify-content: center;
		-webkit-align-items: center;
		        align-items: center;
	}
	.age-form .title {
		margin-bottom: 42px;
	}
	.age-form .title .cans {
		margin-bottom: 20px;
	}
	.age-form .title .cans img {
		position: relative;
	}
	.cans .left-can {
		height: 120px;
		z-index: 2;
		-webkit-transform: rotate(-10deg);
		   -moz-transform: rotate(-10deg);
		    -ms-transform: rotate(-10deg);
		     -o-transform: rotate(-10deg);
		        transform: rotate(-10deg);
	}
	.cans .right-can {
		height: 110px;
		z-index: 1;
		-webkit-transform: rotate(10deg);
		   -moz-transform: rotate(10deg);
		    -ms-transform: rotate(10deg);
		     -o-transform: rotate(10deg);
		        transform: rotate(10deg);
	}
	.age-form p {
		font-family: "Roboto", sans-serif;
		font-size: 24px;
		margin-top: 32px;
		margin-bottom: 20px;
	}
	.age-form .inputs {
		display: flex;
		gap: 24px;
		margin-top: 13px;
	}
	.age-form .inputs input {
		width: 125px;
		height: 50px;
		background: transparent;
		border: 1px solid #979797;
		border-radius: 8px;
		text-align: center;
		color: #fff;
		font-size: 24px;
		font-family: "Bebas Neue", sans-serif;
	}
	button {
		appearance: none;
		background: #fff;
		color: #000;
		border: 0;
		padding: 10px 66px;
		border-radius: 10px;
		margin-top: 33px;
		font-size: 24px;
		cursor: pointer;
		font-family: "Bebas Neue", sans-serif;
	}
	.age-form .options {
		display: flex;
		gap: 38px;
	}
	.age-form .options a {
		width: 144px;
		height: 50px;
		background: transparent;
		border: 1px solid #fff;
		color: #FFF;
	}

/*	--------------------------------------------------
	Teams
	-------------------------------------------------- */
	section.home {
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		-webkit-transition: .4s;
		   -moz-transition: .4s;
		    -ms-transition: .4s;
		     -o-transition: .4s;
		        transition: .4s;
	}
	section.home.show {
		position: relative;
		top: initial;
		left: initial;
		opacity: 1;
	}
	.teams {
		top: 0;
		left: 0;
		position: absolute;
		display: flex;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		-webkit-align-items: center;
		        align-items: center;
	}
	.team {
		width: 50%;
		height: 100%;
		display: flex;
		position: relative;
		-webkit-transition: 1s;
		   -moz-transition: 1s;
		    -ms-transition: 1s;
		     -o-transition: 1s;
		        transition: 1s;
		-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
		   -moz-transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
		    -ms-transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
		     -o-transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
		        transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
	}
	.team .votes {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		     -o-transform: translateY(-50%);
		        transform: translateY(-50%);
		width: 100%;
	}
	.team .votes img {
		position: relative;
		top: 0;
		-webkit-transition: 1s;
		   -moz-transition: 1s;
		    -ms-transition: 1s;
		     -o-transition: 1s;
		        transition: 1s;
		-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
		   -moz-transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
		    -ms-transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
		     -o-transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
		        transition-timing-function: cubic-bezier(0.25, 0.1, 0.1, 1);
	}
	.votes .circle {
		width: 180px;
		height: 180px;
		margin: auto;
		text-align: center;
		display: flex;
		position: relative;
		-webkit-transition: .6s;
		   -moz-transition: .6s;
		    -ms-transition: .6s;
		     -o-transition: .6s;
		        transition: .6s;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: center;
		        justify-content: center;
		-webkit-border-radius: 100%;
		        border-radius: 100%;
	}
	.yellow .circle {
		background: #ffcd00;
		right: 10%;
	}
	.blue .circle {
		background: #fff;
		left: 10%;
	}
	.votes .bubbles {
		display: none;
		pointer-events: none;
		position: absolute;
		bottom: 0;
	}
	.yellow .votes .bubbles {
		right: 10%;
	}
	.blue .votes .bubbles {
		left: 10%;
	}
	.votes .percentage {
		font-size: 72px;
		position: absolute;
		opacity: 0;
		-webkit-transition: .4s;
		   -moz-transition: .4s;
		    -ms-transition: .4s;
		     -o-transition: .4s;
		        transition: .4s;
	}
	.yellow .votes .percentage {
		color: #000;
	}
	.blue .votes .percentage {
		color: #004A98;
	}
	.results {
		display: none;
	}
	.team.yellow {
		background: url('../img/indio.png') no-repeat right bottom;
		background-size: 550px;
	}
	.team.blue {
		background: url('../img/hugo.png') no-repeat left bottom;
		background-size: 550px;
	}

	/* HOVER TEAMS */
	.team:hover {
		background-size: 600px;
	}
	.team/*:hover*/ .votes .circle {
		width: 230px;
		height: 230px;
	}
	.team/*:hover*/ .votes .bubbles {
		display: block;
	}
	.team/*:hover*/ .votes .percentage {
		opacity: 1;
	}
	.team/*:hover*/ .votes img {
		top: 160px;
	}

	/* Main content */
	.content {
		height: 100%;
		/*background: url("../img/dts.png") no-repeat center bottom;
		background-size: 1100px;*/
		display: flex;
		padding-top: 34px;
		padding-bottom: 20px;
		flex-direction: column;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
	}
	.content .legal {
		z-index: 9;
	}
	.actions {
		text-align: center;
		padding-top: 30px;
	}
	.actions img {
		position: relative;
		z-index: 3;
		pointer-events: none;
		margin: auto;
	}
	.actions .container {
		padding: 35px 20px 38px;
		border-radius: 40px;
		-webkit-backdrop-filter: blur(10px);
  				backdrop-filter: blur(10px);
		border: solid 1px #303030;
  		background-color: rgba(0, 0, 0, 0.2);
  		width: 370px;
  		margin-top: 27px;
  		position: relative;
  		z-index: 2;
	}
	.actions .container p {
		font-size: 14px;
		line-height: 20px;
		font-family: "Roboto", sans-serif;
		position: relative;
		z-index: 2;
	}
	.action {
		display: block;
		background: #fff;
		-webkit-border-radius: 8px;
		        border-radius: 8px;
		font-size: 24px;
		color: #000;
		padding: 12px 17px 9px 18px;
		text-align: center;
		margin-top: 16px;
		-webkit-transition: .3s;
		   -moz-transition: .3s;
		    -ms-transition: .3s;
		     -o-transition: .3s;
		        transition: .3s;
	}
	.action:hover {
		background: #676767 !important;
		color: #FFF !important;
		border-color: #676767 !important;
	}
	.actions .action.alternate {
		background: transparent;
		color: #FFF;
		border: 1px solid #fff;
	}

	/* Floating items */
	.float-item {
		position: absolute;
		z-index: 9;
	}
	.share {
		left: 58px;
		top: 38px;
	}
	.float-item a {
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
		gap: 15px;
		font-size: 20px;
	}
	.float-item span {
		position: relative;
		top: 0;
		-webkit-transition: .3s;
		   -moz-transition: .3s;
		    -ms-transition: .3s;
		     -o-transition: .3s;
		        transition: .3s;
	}
	.float-item span:after {
		content: '';
		display: block;
		position: absolute;
		width: 0;
		bottom: -5px;
		left: 50%;
		height: 1px;
		background: #fff;
		-webkit-transition: .3s;
		   -moz-transition: .3s;
		    -ms-transition: .3s;
		     -o-transition: .3s;
		        transition: .3s;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		     -o-transform: translateX(-50%);
		        transform: translateX(-50%);
	}
	.icon {
		width: 36px;
		height: 36px;
		border-radius: 100%;
		background: #ccc;
		display: flex;
		position: relative;
		top: 0;
		-webkit-transition: .3s;
		   -moz-transition: .3s;
		    -ms-transition: .3s;
		     -o-transition: .3s;
		        transition: .3s;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: center;
		        justify-content: center;
	}
	.float-item:hover span {
		top: -3px;
	}
	.float-item.conditions:hover span {
		top: 0px;
	}
	.float-item:hover span:after {
		width: 100%;
	}
	.float-item:hover .icon {
		width: 42px;
		height: 42px;
		top: -3px;
	}
	.how {
		right: 50px;
		top: 38px;
	}
	.conditions {
		bottom: 40px;
		left: 58px;
	}
	.social {
		right: 50px;
		bottom: 40px;
	}
	.social ul {
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
	    gap: 20px;
	}
	.social ul li a {
		-webkit-transition: .3s;
		   -moz-transition: .3s;
		    -ms-transition: .3s;
		     -o-transition: .3s;
		        transition: .3s;
	}
	.social ul li a:hover {
		opacity: 0.3;
	}

	/* ANIMATIONS */
	.float-item a {
		gap: 0px;
		opacity: 0;
		-webkit-transition: .4s .4s;
		   -moz-transition: .4s .4s;
		    -ms-transition: .4s .4s;
		     -o-transition: .4s .4s;
		        transition: .4s .4s;
	}
	.show .float-item a {
		gap: 15px;
		opacity: 1;
	}
	.social ul li {
		opacity: 0;
		-webkit-transition: .3s;
		   -moz-transition: .3s;
		    -ms-transition: .3s;
		     -o-transition: .3s;
		        transition: .3s;
	}
	.social ul li:nth-child(1) {
		-webkit-transition-delay: .4s;
		   -moz-transition-delay: .4s;
		    -ms-transition-delay: .4s;
		     -o-transition-delay: .4s;
		        transition-delay: .4s;
	}
	.social ul li:nth-child(2) {
		-webkit-transition-delay: .6s;
		   -moz-transition-delay: .6s;
		    -ms-transition-delay: .6s;
		     -o-transition-delay: .6s;
		        transition-delay: .6s;
	}
	.social ul li:nth-child(3) {
		-webkit-transition-delay: .8s;
		   -moz-transition-delay: .8s;
		    -ms-transition-delay: .8s;
		     -o-transition-delay: .8s;
		        transition-delay: .8s;
	}
	.social ul li:nth-child(4) {
		-webkit-transition-delay: 1s;
		   -moz-transition-delay: 1s;
		    -ms-transition-delay: 1s;
		     -o-transition-delay: 1s;
		        transition-delay: 1s;
	}
	.show .social ul li {
		opacity: 1;
	}
	.content .title {
		-webkit-transition: .5s .6s;
		   -moz-transition: .5s .6s;
		    -ms-transition: .5s .6s;
		     -o-transition: .5s .6s;
		        transition: .5s .6s;
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
		    -ms-transform: scale(0);
		     -o-transform: scale(0);
		        transform: scale(0);
	}
	.show .content .title {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
		    -ms-transform: scale(1);
		     -o-transform: scale(1);
		        transform: scale(1);
	}
	.actions {
		opacity: 0;
		-webkit-transition: .4s 1s;
		   -moz-transition: .4s 1s;
		    -ms-transition: .4s 1s;
		     -o-transition: .4s 1s;
		        transition: .4s 1s;
	}
	.show .actions {
		opacity: 1;
	}
	.actions img {
		-webkit-transition: .4s 1.3s;
		   -moz-transition: .4s 1.3s;
		    -ms-transition: .4s 1.3s;
		     -o-transition: .4s 1.3s;
		        transition: .4s 1.3s;
		opacity: 0;
		top: 30px;
	}
	.show .actions img {
		opacity: 1;
		top: 0;
	}
	.actions .container p,
	.actions .container .action {
		opacity: 0;
	}
	.actions .container p {
		-webkit-transition-delay: 1.2s;
		   -moz-transition-delay: 1.2s;
		    -ms-transition-delay: 1.2s;
		     -o-transition-delay: 1.2s;
		        transition-delay: 1.2s;
	}
	.actions .container .action {
		-webkit-transition: opacity .3s 1.4s, background .3s 0s, color .3s 0s, border-color .3s 0s;
		   -moz-transition: opacity .3s 1.4s, background .3s 0s, color .3s 0s, border-color .3s 0s;
		    -ms-transition: opacity .3s 1.4s, background .3s 0s, color .3s 0s, border-color .3s 0s;
		     -o-transition: opacity .3s 1.4s, background .3s 0s, color .3s 0s, border-color .3s 0s;
		        transition: opacity .3s 1.4s, background .3s 0s, color .3s 0s, border-color .3s 0s;
	}
	.actions .container .action.alternate {
		-webkit-transition: opacity .3s 1.6s, background .3s 0s, color .3s 0s, border-color .3s 0s;
		   -moz-transition: opacity .3s 1.6s, background .3s 0s, color .3s 0s, border-color .3s 0s;
		    -ms-transition: opacity .3s 1.6s, background .3s 0s, color .3s 0s, border-color .3s 0s;
		     -o-transition: opacity .3s 1.6s, background .3s 0s, color .3s 0s, border-color .3s 0s;
		        transition: opacity .3s 1.6s, background .3s 0s, color .3s 0s, border-color .3s 0s;
	}
	.show .actions .container p,
	.show .actions .container .action {
		opacity: 1;
	}
	.teams {
		opacity: 0;
		-webkit-transition: .4s 1.2s;
		   -moz-transition: .4s 1.2s;
		    -ms-transition: .4s 1.2s;
		     -o-transition: .4s 1.2s;
		        transition: .4s 1.2s;
	}
	.show .teams {
		opacity: 1;
	}

/*	--------------------------------------------------
	Modals
	-------------------------------------------------- */
	.modal {
		min-width: 1020px;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		   -moz-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		     -o-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		position: absolute;
		z-index: 999;
		border: solid 1px #303030;
  		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 40px;
		padding: 48px 65px;
	  	-webkit-backdrop-filter: blur(10px);
	  			backdrop-filter: blur(10px);
		text-align: center;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: .4s;
		   -moz-transition: .4s;
		    -ms-transition: .4s;
		     -o-transition: .4s;
		        transition: .4s;
	}
	.modal .close {
		width: 50px;
		height: 50px;
		background-color: #d8d8d8;
		display: flex;
		position: absolute;
		right: 31px;
		top: 36px;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: center;
		        justify-content: center;
		-webkit-border-radius: 26px;
		        border-radius: 26px;
	}
	.modal .close img {
		width: 16px;
		filter: invert(1);
	}
	.modal p.subtitle {
		max-width: 640px;
		margin: auto;
	}
	.modal.show {
		opacity: 1;
		pointer-events: all;
	}
	.modal .subtitle {
		opacity: 0.5;
		font-family: "Roboto", sans-serif;
		font-size: 16px;
	}
	.modal .steps {
		display: flex;
		gap: 90px;
		margin-top: 20px;
	}
	.modal .step {
		min-width: 250px;
		opacity: 0;
		position: relative;
		top: 20px;
		-webkit-transition: .4s;
		   -moz-transition: .4s;
		    -ms-transition: .4s;
		     -o-transition: .4s;
		        transition: .4s;
	}

	/* Steps animation */
	.modal .step:nth-child(1) {
		-webkit-transition-delay: .4s;
		   -moz-transition-delay: .4s;
		    -ms-transition-delay: .4s;
		     -o-transition-delay: .4s;
		        transition-delay: .4s;
	}
	.modal .step:nth-child(2) {
		-webkit-transition-delay: .6s;
		   -moz-transition-delay: .6s;
		    -ms-transition-delay: .6s;
		     -o-transition-delay: .6s;
		        transition-delay: .6s;
	}
	.modal .step:nth-child(3) {
		-webkit-transition-delay: .8s;
		   -moz-transition-delay: .8s;
		    -ms-transition-delay: .8s;
		     -o-transition-delay: .8s;
		        transition-delay: .8s;
	}
	.modal.show .step {
		opacity: 1;
		top: 0;
	}

	.modal .pic {
		margin: auto;
		position: relative;
		width: 190px;
		height: 162px;
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: center;
		        justify-content: center;
	}
	.modal .pic .circle {
		position: absolute;
		background: #393939;
		width: 162px;
		height: 162px;
		z-index: -1;
		-webkit-border-radius: 100%;
		        border-radius: 100%;
	}
	.modal .number {
		width: 50px;
		height: 50px;
		text-align: center;
		font-size: 25px;
		margin: -20px auto 20px;
		background: #000;
		line-height: 54px;
		position: relative;
		z-index: 2;
		-webkit-border-radius: 25px;
		        border-radius: 25px;
	}
	.modal .step-title {
		font-size: 28px;
		margin-bottom: 10px;
	}
	.modal .step p {
		color: #BFBFBF;
		font-size: 16px;
		font-family: "Roboto", sans-serif;
	}
	.modal .action {
		display: inline-block;
		width: 248px;
		padding: 13px;
		margin-top: 30px;
	}
	#modal-team h3 {
		margin-bottom: 15px;
	}
	.modal form {
		max-width: 640px;
		margin: 20px auto 0;
		display: flex;
		gap: 10px 22px;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
	}
	.modal .input-container {
		position: relative;
		width: calc(50% - 11px);
		text-align: left;
	}
	.modal .input-container span.mandatory {
		text-align: right;
		display: block;
		font-size: 10px;
		font-family: "Roboto", sans-serif;
		opacity: 0.5;
		line-height: 2.4;
	}
	.modal input {
		width: 100%;
		border-radius: 4px;
  		border: solid 1px #979797;
  		height: 45px;
  		font-size: 24px;
  		line-height: 45px;
  		padding: 12px;
  		color: #fff;
  		background: transparent;
  		font-family: "Bebas Neue", sans-serif;
  		margin-bottom: 0;
	}
	.modal ::-webkit-input-placeholder {
		color: #fff;
	}
	.modal .error-block {
		display: none;
		right: 10px;
		top: 33px;
		position: absolute;
		width: 25px;
		height: 25px;
		border-radius: 4px;
  		background-color: #ff1e00;
  		-webkit-align-items: center;
  		        align-items: center;
  		-webkit-justify-content: center;
  		        justify-content: center;
	}
	.modal .error .error-block {
		display: flex;
	}
	.modal .error-message {
		display: none;
		-webkit-align-items: center;
		        align-items: center;
	    -webkit-justify-content: center;
	            justify-content: center;
		width: 100%;
		-webkit-border-radius: 4px;
		        border-radius: 4px;
  		background-color: #ff1e00;
  		padding: 5px;
  		gap: 12px;
	}
	.modal .error-message.show {
		display: flex;
	}
	.modal .error-message p {
		font-family: "Roboto", sans-serif;
		font-size: 14px;
		color: #fff;
		margin: 0;
	}
	.modal .out-container {
		display: inline-block;
		margin-right: 40px;
		margin-top: -5px;
	}
	.modal .radio-container {
		display: flex;
		gap: 6px;
		cursor: pointer;
		-webkit-align-items: center;
		        align-items: center;
	}
	.modal .radio-container input {
		visibility: hidden;
		width: 0;
		height: 0;
	}
	.modal .radio-container .radio-button {
		display: inline-block;
		width: 24px;
		height: 24px;
		border: solid 1px #979797;
		position: relative;
		-webkit-border-radius: 12px;
		        border-radius: 12px;
	}
	.modal .radio-container input:checked + .radio-button:after {
		content: '';
		display: block;
		width: 14px;
		height: 14px;
		background: #fff;
		position: absolute;
		top: 4px;
		left: 4px;
		-webkit-border-radius: 7px;
		        border-radius: 7px;
	}
	.modal form button.action {
		margin: 13px auto 0;
		padding: 11px;
	}
	.modal .success {
		display: none;
	}
	.modal .success-icon {
		margin: 60px auto 40px;
		width: 106px;
		height: 106px;
		-webkit-border-radius: 100%;
		        border-radius: 100%;
		border: solid 1px #979797;
  		background-color: #d8d8d8;
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
	    -webkit-justify-content: center;
	            justify-content: center;
	}
	.modal .conditions-content {
		margin-top: 15px;
		max-height: 300px;
		overflow-y: scroll;
		padding: 0 32px;
	}
	.modal .conditions-content p {
		font-family: "Roboto", sans-serif;
		font-size: 16px;
		line-height: 24px;
		text-align: justify;
		color: #fff;
		margin-bottom: 24px;
	}
	.modal ::-webkit-scrollbar {
	  	width: 6px;
   		border: solid 1px #979797;
   		-webkit-border-radius: 6px;
   		        border-radius: 6px;
	}

	/* Track */
	.modal ::-webkit-scrollbar-track {
	  	background-color: rgba(0, 0, 0, 0.6);
	  	-webkit-backdrop-filter: blur(10px);
  				backdrop-filter: blur(10px);
	}

	/* Handle */
	.modal ::-webkit-scrollbar-thumb {
	  	background-color: #d8d8d8;
	  	-webkit-border-radius: 6px;
	  	        border-radius: 6px;
	}

	/* Handle on hover */
	.modal ::-webkit-scrollbar-thumb:hover {
	  	background: #555;
	}

	/* ANIMATIONS */
	.lottie#papers {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		pointer-events: none;
	}

	/* Custom select */
	.custom-select {
	  	position: relative;
	  	font-family: "Bebas Neue", sans-serif;
	}

	.custom-select select {
	  	display: none;
	}

	.select-selected {
	  	background-color: transparent;
	  	height: 45px;
	  	-webkit-border-radius: 4px;
	  	        border-radius: 4px;
	}

	.select-selected:after {
		content: '';
		display: block;
		position: absolute;
		right: 6px;
		top: 7px;
		width: 30px;
		height: 30px;
		background: url("../img/chevron.svg") no-repeat center center #d8d8d8;
		-webkit-border-radius: 2px;
		        border-radius: 2px;
	}

	.select-selected.select-arrow-active:after {
	  	-webkit-transform: rotate(180deg);
	  	   -moz-transform: rotate(180deg);
	  	    -ms-transform: rotate(180deg);
	  	     -o-transform: rotate(180deg);
	  	        transform: rotate(180deg);
	}

	.select-items div, .select-selected {
	  	color: #ffffff;
	  	padding: 8px 16px;
	  	border: solid 1px #979797;
	  	cursor: pointer;
	  	font-size: 24px;
	  	line-height: 28px;
	}

	.select-items {
	  	position: absolute;
	  	background-color: rgba(0, 0, 0, 0.8);
	  	-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	  	top: 100%;
	  	left: 0;
	  	right: 0;
	  	z-index: 99;
	  	max-height: 200px;
	  	overflow: scroll;
	}

	.select-hide {
	  	display: none;
	}

	.select-items div:hover, .same-as-selected {
	  	background-color: rgba(0, 0, 0, 0.1);
	}


/* MEDIA QUERIES */
@media (min-width: 769px) and (max-width: 1080px) {
	.share,
	.conditions {
		left: 24px;
	}
	.how,
	.social {
		right: 24px;
	}
	.content {
		padding-bottom: 10px;
	}
	.modal {
		min-width: 750px;
	}
	.modal .steps {
		gap: 20px;
	}
	.modal .step {
		min-width: 25vw;
	}
}

@media (max-width: 768px) {
	.desktop {display: none !important;}
	.mobile {display: block !important;}

	h3 {
		font-size: 28px;
		line-height: 30px;
	}
	main {
		background: url('../img/bg-mobile.jpeg');
	}
	.toast {
		font-size: 14px;
		gap: 10px;
	}

	/* AGE FORM */
	.age-form {
		padding: 0 32px;
	}
	.age-form p {
		margin-top: 30px;
	}
	.age-form .title .cans img {
		height: 100px;
	}
	.age-form .inputs input {
		width: 100px;
	}
	.age-form button {
		width: 100%;
	}

	/* HOME */
	.content {
		padding-top: 24px;
		padding-bottom: 10px;
	}
	.content .title {
		max-width: 250px;
		text-align: center;
	}
	.content .title img + img {
		margin: 10px auto -125px;
	}
	.content .legal p {
		font-size: 10px;
		text-align: center;
		padding: 0 12px;
	}
	.teams {
		display: none;
	}
	.actions {
		margin-top: 20vh;
		padding-top: 0;
	}
	.actions .container {
		width: calc(100% - 42px);
		margin-left: 21px;
		padding: 19px 16px;
		margin-top: 8px;
	}
	.results {
		position: relative;
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
	    -webkit-justify-content: center;
	            justify-content: center;
	}
	.results .result {
		position: relative;
	}
	.result #bubbles_p_m,
	.result #bubbles_n_m {
		position: absolute;
		z-index: 0;
		bottom: 80%;
		-webkit-transform: scale(2);
		   -moz-transform: scale(2);
		    -ms-transform: scale(2);
		     -o-transform: scale(2);
		        transform: scale(2);
	}
	.result .circle {
		width: 72px;
		height: 72px;
		display: flex;
		position: relative;
		z-index: 1;
		-webkit-align-items: center;
		        align-items: center;
		-webkit-justify-content: center;
		        justify-content: center;
		-webkit-border-radius: 100%;
		        border-radius: 100%;
	}
	.result .circle p {
		font-size: 32px;
		margin: 5px 0 0;
	}
	.yellow .circle p {
		color: #000;
	}
	.blue .circle p {
		color: #004A98;
	}
	.results img {
		margin: 0 -26px;
	}
	.results .bars {
		position: absolute;
		bottom: 0;
/*		display: flex;*/
		display: none;
		gap: 22px;
		-webkit-justify-content: flex-end;
		        justify-content: flex-end;
	}
	.results .bar {
		height: 50vh;
		max-height: 456px;
		display: flex;
		-webkit-align-items: flex-end;
		        align-items: flex-end;
	}
	.results .bar span {
		display: block;
		width: 14px;
		position: relative;
	}
	.results .yellow span {
		background: #FFCD00;
	}
	.results .blue span {
		background: #fff;
	}
	.results span:before,
	.results span:after {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		left: 0;
		height: 3px;
	}
	.results .yellow span:before {
		background: #000;
		top: 3px;
	}
	.results .yellow span:after {
		background: #000;
		top: 9px;
	}
	.results .blue span:before {
		background: #bf0418;
		top: 0px;
	}
	.results .blue span:after {
		background: #004a98;
		top: 6px;
	}

	/* MODALS */
	.modal {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		padding: 110px 36px 0;
		min-width: auto;
		padding: 16px 18px 26px;
		-webkit-border-radius: 0;
		        border-radius: 0;
		display: flex;
		-webkit-align-items: center;
		        align-items: center;
	}
	#modal-how {
		padding: 16px 36px 26px;
		display: flex;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	    -webkit-align-items: center;
	            align-items: center;
		-webkit-justify-content: space-between;
		        justify-content: space-between;
	}
	.modal .close {
		width: 36px;
		height: 36px;
		background: #fff;
		top: 16px;
		right: 50%;
		-webkit-transform: translateX(50%);
		   -moz-transform: translateX(50%);
		    -ms-transform: translateX(50%);
		     -o-transform: translateX(50%);
		        transform: translateX(50%);
	}
	#modal-how .close {
		position: relative;
		top: 0;
		right: 0;
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}
	.modal .action {
		width: 100%;
	}
	#modal-how h3 {
		font-size: 42px;
		margin-bottom: 6px;
	}
	.modal .subtitle {
		opacity: 1;
	}
	.modal .steps {
		margin-top: 35px;
		gap: 20px;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.modal .pic {
		width: 100px;
		height: auto;
		display: inline-block;
		vertical-align: middle;
	}
	.modal .pic .circle {
		width: 98px;
		height: 98px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		   -moz-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		     -o-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.modal .pic img {
		width: 100px;
	}
	.modal .step-content {
		display: inline-block;
		width: calc(100% - 110px);
		vertical-align: middle;
		text-align: left;
		padding-left: 30px;
	}
	.modal .number,
	.modal .step-title {
		display: inline-block;
		vertical-align: middle;
		margin: 0 0 5px;
	}
	.modal .number {
		margin-right: 10px;
	}
	.modal h3 {
		font-size: 32px;
		line-height: 32px;
	}
	.modal .input-container {
		width: 100%;
	}
	.modal form {
		gap: 5px;
	}
	.modal .out-container {
		margin-top: 10px;
	}
	.modal .conditions-content {
		max-height: 420px;
	}

	/* Float items */
	.float-item a {
		font-size: 0;
		gap: 0px !important;
	}
	.icon {
		background: #fff;
	}
	.share {
		top: 24px;
		left: 20px;
	}
	.how {
		top: 24px;
		right: 20px;
	}
	.float-item.conditions a {
		font-size: 16px;
	}
	.conditions {
		left: 20px;
		bottom: 48px;
	}
	.social {
		right: 20px;
		bottom: 48px;
	}
	.social ul {
		gap: 32px;
	}
}

@media (max-width: 580px) {
	.content {
		background-image: url('../img/dts-mobile.png');
		background-size: 100%;
		background-position: center calc(100% + 10vw);
		background-repeat: no-repeat;
	}
}

@media (max-width: 768px) and (max-height: 700px) {
	.results {
		-webkit-transform: scale(0.7);
		   -moz-transform: scale(0.7);
		    -ms-transform: scale(0.7);
		     -o-transform: scale(0.7);
		        transform: scale(0.7);
	}
	.results .bar {
		height: 40vh;
	}
	.actions {
		margin-top: 10vh;
	}
	.actions .container {
		margin-top: -15px;
	}
	.actions .container p {
		font-size: 12px;
		line-height: 14px;
	}
	.action {
		font-size: 18px;
	}
	.modal .steps {
		margin-top: 15px;
	}
	.modal .pic {
		width: 80px;
	}
	.modal .pic .circle {
		width: 80px;
		height: 80px;
	}
	.modal .number {
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
	.modal p.subtitle {
		font-size: 12px;
	}
	#modal-team h3 {
		margin-bottom: 5px;
	}
	.modal {
		padding-top: 40px;
	}
	.modal form {
		margin-top: 6px;
	}
	.modal input {
		height: 35px;
		line-height: 35px;
		font-size: 18px;
	}
	.modal .error-block {
		top: 29px;
	}
	.select-selected {
		height: 35px;
	}
	.select-items div, .select-selected {
		font-size: 18px;
		line-height: 20px;
	}
	.select-selected:after {
		width: 20px;
		height: 20px;
	}
}