body {
	font-family: 'montserratregular';
	/*background-color: #a8b013;*/
	background-color: #3f5145 !important;
	background: url("./images/fondo24.jpg");
	background-size: cover;
	background-attachment: fixed;
	padding: 0%;
	color: white;
	border: 0px;
	margin:0px;
}

	body .intro {
		/*color: #353f40;*/
		color: #ffffff;
	}

.colored {
	color: #c4d10f;
}

.stage {
	text-align:center;
	max-width:75%;
	max-height:50%;
	margin:auto;
	margin-bottom:300px;
}

	.stage.intro {
		text-align: left;
	}

	.stage.intro .subtitle{
		margin-left: 0px;
	}

		.stage.intro .button, .button:hover {
			margin-left: 0px;
		}

.roscon-top-left {
	position: fixed;
	top: -400px;
	left: -350px;
	width: 800px;
	height: 800px;
	background: url("./images/rosconplat.png") center no-repeat;
	background-size: 100%;
	animation: rotate-left 240s linear infinite, movefromleft 3s ease-out;
	-webkit-animation: rotate-left 240s linear infinite, movefromleft 3s ease-out;
}

.roscon-bottom-left {
	position: fixed;
	left: -350px;
	bottom: -100px;
	width: 800px;
	height: 800px;
	background: url("./images/rosconplat.png") center no-repeat;
	background-size: 100%;
	animation: rotate 240s linear infinite, movefromleft 3s ease-out;
	-webkit-animation: rotate 240s linear infinite, movefromleft 3s ease-out;;
}

.roscon-bottom-center {
	position: fixed;
	bottom: -350px;
	margin: auto;
	left: 0;
	right: 0;
	width: 800px;
	height: 800px;
	background: url("./images/rosconplat.png") center no-repeat;
	background-size: 100%;
	animation: rotate-a-little 25s ease-in-out infinite alternate, movefrombottom 3s ease-out;
	-webkit-animation: rotate-a-little 25s ease-in-out infinite alternate, movefrombottom 3s ease-out;
	
}

.roscon-bottom-right {
	position: fixed;
	right: -350px;
	bottom: -100px;
	width: 800px;
	height: 800px;
	background: url("./images/rosconplat.png") center no-repeat;
	background-size: 100%;
	animation: rotate-left 240s linear infinite, movefromright 3s ease-out;
	-webkit-animation: rotate-left 240s linear infinite, movefromright 3s ease-out;
	
}

.muerdago-top-left {
	position: fixed;
	top: -150px;
	left: 0px;
	width: 600px;
	height: 600px;
	background: url("./images/muerdagotopleft.png") center no-repeat;
	background-size: 100%;
}

	.muerdago-top-left.animated {
		animation: movefromtopleft-muerdago 2.5s ease-out;
	}

.muerdago-top-right {
	position: fixed;
	top: -150px;
	right: 0px;
	width: 600px;
	height: 600px;
	background: url("./images/muerdagotop.png") center no-repeat;
	background-size: 100%;
}

	.muerdago-top-right.animated {
		animation: movefromtop-muerdago 2.5s ease-out;
	}

.muerdago-bottom-left {
	position: fixed;
	left: 0px;
	bottom: -60px;
	width: 500px;
	height: 500px;
	background: url("./images/muerdagobottom.png") center no-repeat;
	background-size: 100%;
		
}
	.muerdago-bottom-left.animated {
		animation: movefrombottom-muerdago 2.5s ease-out;
	}

.muerdago-bottom-right {
	position: fixed;
	right: 0px;
	bottom: -60px;
	width: 500px;
	height: 500px;
	background: url("./images/muerdagobottomright.png") center no-repeat;
	background-size: 100%;
}

	.muerdago-bottom-right.animated {
		animation: movefrombottomright-muerdago 2.5s ease-out;
	}

.roscon-pegatina {
	position: fixed;
	right: 0px;
	bottom: 100px;
	width: 929px;
	height: 625px;
	background: url("./images/roscon_pegatina.png") center no-repeat;
	background-size: 100%;
}

	.roscon-pegatina.animated {
		animation: movefrombottomright-pegatina 2.5s ease-out;
	}

.regalos-bottom-left {
	position: fixed;
	left: 0px;
	bottom: -40px;
	width: 500px;
	height: 500px;
	background: url("./images/regalosbottom.png") center no-repeat;
	background-size: 100%;
}

.arbol-bottom-right {
	position: fixed;
	right: 0px;
	bottom: -160px;
	width: 1000px;
	height: 1000px;
	background: url("./images/arbolbottomright.png") center no-repeat;
	background-size: 100%;
}

.adornos-top-left {
	position: fixed;
	top: -30px;
	left: 15px;
	width: 300px;
	height: 341px;
	background-image: url("./images/danglybits.png");
	background-repeat:repeat-x;
	zoom:0.8;
}

.luces-top-left {
	position: fixed;
	top: -100px;
	left: -260px;
	width: 1200px;
	height: 365px;
	background: url("./images/blinkylights.png") center repeat-y;
	zoom: 0.8;
}

.reno-bottom-left {
	position: fixed;
	left: -280px;
	bottom: 60px;
	width: 1000px;
	height: 1000px;
	background: url("./images/renardo.png") center no-repeat;
	background-size: 52%;
}

.arboles-bottom-right {
	position: fixed;
	right: -340px;
	bottom: 50px;
	width: 1000px;
	height: 1000px;
	background: url("./images/lightuptree.png") repeat-x;
	zoom: 0.8;
}

.felicidades {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 100vh;
	margin:auto;
	left:0px;
	right:0px;
	/*background: url("./images/felicidades_fondo.png") center no-repeat;
	background-size: 100%;*/
}

.final {
	max-width: 50%;
	margin: auto;
	margin-top: 25vh;
	text-shadow: 0px 3px 26px rgb(0 0 0 / 0.2);
	font-size: 4vw;
	position: relative;
	z-index: 5;
}

h1 {
	font-family: "houschkaproextrabold";
	font-size: 4rem;
	/*text-shadow: 0px 3px 16px rgb(0 0 0 / 0.3);*/
}

	h1.secondary-header {
		position: fixed;
		top: 50px;
		left: 0px;
		right: 0px;
		text-align: center;
		font-family: "houschkaprobold";
		font-size: calc(12px + 1vw);
		height: 0px;
		margin: 0px auto 0px auto;
		max-width: 30%;
	}

h2 {
	font-family: "houschkaprobold";
	font-size: 1.3rem;
	margin:auto;
	margin-bottom: 0px;
	padding-top:20px;
	text-align:center;
}

	h2.eligeporcion {
		position: relative;
		transform: translate(-28vw, 20vw);
		font-size: 1.75rem;
		z-index: 1;
		max-width: 25%;
		margin:auto;
		color:white;
	}

h3 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.subtitle {
	font-size: 1.25em;
	max-width: 60%;
	margin: auto;
	margin-bottom: 50px;
	line-height:1.25em;
}

.bold {
	font-family: "montserratbold";
}

.big {
	font-size: 2.5vw;
	font-family: "montserratbold";
}

.small {
	font-size: 0.8rem;
}

a {
	color: white;
}

#invite {
	cursor: pointer;
}

.button, .button:hover {
	background-color: white;
	/*color: #a8b013;*/
	color: #3f5145;
	border-radius: 25px;
	display: block;
	text-align: center;
	font-size: 1.3em;
	font-family: 'montserratbold';
	min-height: 50px;
	max-width: 12%;
	min-width: 180px;
	margin: auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	cursor: pointer;
}

	.button a {
		color:inherit;
	}

	.button.bean, .button.bean:hover {
		font-size: 1.1em;
	}

	#next.button{
		z-index:5;
		position:relative;
	}

.click {
	cursor: pointer;
}

.footer{
	position:fixed;
	bottom:0px;
	height:140px;
	width:100%;
	margin:auto;
	padding:0px;
	background:white;
	display:flex;
	flex-direction:row;
	justify-content:space-evenly;
}

.jackson {
	width: 300px;
	height: 25px;
	background: url("./images/jackson.png") center no-repeat;
	background-size: 80%;
	margin: auto;
	margin-top: 120px;
}

.jane {
	position: fixed;
	left: 20%;
	bottom: 100px;
	width: 250px;
	height: 250px;
	background: url("./images/jane.png") center no-repeat;
	background-size: 75%;
}

.bobby {
	position: relative;
	right: -335px;
	bottom:-125px;
	width: 250px;
	height: 300px;
	background: url("./images/bobby.png") center no-repeat;
	background-size: 55%;
	margin-top:-20px;
	float:right;
}

.blocks {
	max-width:60%;
	min-width:900px;
	margin:auto;
	display:flex;
	flex-direction:row;
	justify-content: space-evenly;
}

.blocks h2 {
	height:150px;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	max-width:400px;
}

.block {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.block-double {
	max-width:40%;
}

.block-wide {
	max-width: 60%;
	min-width: 900px;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	
}

	.block-wide h2 {
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin: auto;
		font-variant: small-caps;
		margin-bottom: 40px;
		z-index: 3;
	}

.frame {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	width: 420px;
	height: 550px;
	background: url("./images/frame.png") center no-repeat;
	background-size: contain;
	margin: auto;
	margin-top:-20px;
	-webkit-filter: drop-shadow(10px 12px 15px #91a229);
	filter: drop-shadow(10px 12px 15px #91a229);
}

	.frame.arbol {
		text-align: center;
		background: url("./images/frame_arbol.png") center no-repeat;
		background-size: contain;
	}

	.frame.prizes {
		background: url("./images/frameprizes.png") center no-repeat;
		background-size: contain;
	}

	.frame.blinkprizes {
		background: url("./images/blinkyframeprizes.png") center repeat-x;
		animation-name: prizelight;
		animation-duration: 3s;
		animation-timing-function: steps(3);
		animation-iteration-count: infinite;
	}

	.frame.prize-1 {
		background: url("./images/frame_p1.png") center no-repeat;
		background-size: contain;
		/*animation-name: prizelight;
		animation-duration: 3s;
		animation-timing-function: steps(3);
		animation-iteration-count: infinite;*/
	}

	.frame.prize-2 {
		background: url("./images/frame_p2.png") center no-repeat;
		background-size: contain;
		/*animation-name: prizelight;
		animation-duration: 3s;
		animation-timing-function: steps(3);
		animation-iteration-count: infinite;*/
	}

.frame-wide {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	max-width: 90%;
	margin:auto;
	min-height: 550px;
	background: url("./images/framew.png") center no-repeat;
	background-size: contain;
	background: #cac761;
	border-radius: 40px;
	-webkit-filter: drop-shadow(10px 12px 15px #91a229);
	filter: drop-shadow(10px 12px 15px #91a229);
}

.frame-wide .formtitle {
	margin: auto;
	margin-bottom: 25px;
	max-width: 80%;
}


.bottomline {
	max-width:90%;
	margin:auto;
	margin-top:-15px;
}

.sponsor {
	display: flex;
	height: 100%;
	width: 220px;
	background-size: contain;
}

.sponsor-1 {
	background: url(./images/sponsor1.jpg) center no-repeat;
	background-size: contain;
}

.sponsor-2 {
	background: url(./images/sponsor2.jpg) center no-repeat;
	background-size: contain;
}

.sponsor-3 {
	background: url(./images/sponsor3.jpg) center no-repeat;
	background-size: contain;
}

.sponsor-4 {
	background: url(./images/sponsor4.jpg) center no-repeat;
	background-size: contain;
}

.sponsor-5 {
	background: url(./images/sponsor5.jpg) center no-repeat;
	background-size: contain;
}

.sponsor-6 {
	background: url(./images/sponsor6.jpg) center no-repeat;
	background-size: contain;
}

.sponsor-7 {
	background: url(./images/sponsor7.jpg) center no-repeat;
	background-size: contain;
}

form{
	width:100%;
	margin:0 auto;
    margin-top: 1%;    
}

.form-codigo {
	padding-top: 150px;
}

.form-control {
	width: 80%;
	padding: 8px 20px;
	margin: 5px auto 10px auto;
	border: 0px solid white;
	border-radius: 12px;
	font-size: 1em;
	color: white;
	font-family: 'montserratregular';
	background: #6e7702;
	-webkit-box-shadow: inset 5px 5px 15px #3f4116;
	-moz-box-shadow: inset 5px 5px 15px #3f4116;
	box-shadow: inset 5px 5px 15px #3f4116;	
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px #6e7702 inset !important;
}
input:-webkit-autofill {
	-webkit-text-fill-color: yellow !important;
}

.formtitle {
	font-size: 0.9rem;
	margin: auto;
	margin-bottom: 25px;
	max-width: 80%;
}

.registro .formtitle {
	font-size: 0.9rem;
	margin: auto;
	margin-bottom: 0px;
	max-width: 80%;
}

.form-double {
	display:flex;
	flex-direction:row;
	justify-content:space-evenly;
}

	.form-double .form-control {
		padding: 8px 20px;
		margin: 6px auto 20px auto;
		border: 0px solid white;
		border-radius: 12px;
		font-size: 1em;
		color: white;
		font-family: 'montserratregular';
		background: #6e7702;
		-webkit-box-shadow: inset 5px 5px 15px #3f4116;
		-moz-box-shadow: inset 5px 5px 15px #3f4116;
		box-shadow: inset 5px 5px 15px #3f4116;
	}

.form-check {
	max-width:90%;
	margin:auto;
}

.form-check-wide {
	max-width: 40%;
	margin: auto;
}

.css-checkbox{
	width:30px;
	height:30px;
	background-size:200%;
}


.label {		
	margin-left:0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: baseline;
	font-size: 1em;
}

.frame form .label, .frame.arbol form .label {
	text-align: left;
	display: block;
	padding: 0px 25px;
	margin: 0px auto 0px auto;
}

.canvas {
	border: 0px solid black;
	margin-top: -2vw;
	position: relative;	
	z-index: 2;
}

.premio {
	width: 65%;
	height: 65%;
	max-height: 720px;
	position: fixed;
	top: 10%;
	background: #cac761;
	border-radius: 40px;
	left: 0px;
	right: 0px;
	margin: auto;
	z-index: 3;
	-webkit-filter: drop-shadow(10px 12px 15px #91a229);
	filter: drop-shadow(10px 12px 15px #91a229);
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.premio-container {
	display: flex;
	max-height: 50%;
	margin: auto 4% auto 4%;
	flex-direction: column;
	justify-content: flex-end;
	padding: 5% 10%;
	color: white;
	background: #6b710b;
	border-radius: 40px;
	-webkit-box-shadow: inset 5px 5px 15px #3f4116;
	-moz-box-shadow: inset 5px 5px 15px #3f4116;
	box-shadow: inset 5px 5px 15px #3f4116;
}

	.premio-container img {
		max-width: 270px;
		height: auto;
		margin: auto;
		margin-top:0px;
	}

	.premio-container h2 {
		font-size: 2.5rem;
		margin-bottom: 5px;		
	}

	.premio-container p {
		font-size: 1.8rem;
	}



.hidden {
	display: none;
}

.error {
	color:red;
}

#legal {
	text-align: justify;
	padding: 50px 20px;
	max-width: 60%;
	margin-top: 150px;
	margin-left: auto;
	margin-right: auto;
	background: rgb(0 0 0 / 0.69);
	border-radius: 20px;
}

form#legal{
	display:none;
}





/*animations*/


.fadein1 {
	animation: appear 1s ease-out;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity:0;
}

.fadein2 {
	animation-name: appear;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadein3 {
	animation-name: appear;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
}

.fadein4 {
	animation-name: appear;
	animation-duration: 1s;
	animation-delay: 3s;
	animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
}

.slideandfadein4 {
	animation-name: appear, slideright;
	animation-duration: 1s;
	animation-delay: 3s;
	animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
}

.slideandfadein2 {
	animation-name: appear, slideleft;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-timing-function: ease-out;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
}

.danglyswing {
	animation-name: danglybits;
	animation-duration: 1.5s;
	animation-timing-function: steps(12);
	animation-iteration-count: infinite;
}

.swingdown {
	animation: swingdown 1s ease-out;
}

.zoom {
	animation-name: appear, zooming;
	animation-duration: 1s;
	animation-timing-function: ease-out;
}

.blinklights {
	animation-name: blink;
	animation-duration: 3s;
	animation-timing-function: steps(3);
	animation-iteration-count: infinite;
}

.blinktree {
	animation-name: treelight;
	animation-duration: 4s;
	animation-timing-function: steps(2);
	animation-iteration-count: infinite;
}

.droplights {
	animation: lightsdrop 1s ease-out;
}

.slidetree {
	animation-name: appear, treeslide;
	animation-duration: 2s;
	animation-timing-function: ease-out;
}

.slidereno {
	animation-name: appear, renoslide;
	animation-duration: 2s;
	animation-timing-function: ease-out;
}


@keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotate-a-little {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(60deg);
	}
}

@-webkit-keyframes rotate-a-little {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(60deg);
	}
}

@keyframes rotate-left {
	from {
		-webkit-transform: rotate(360deg);
	}

	to {
		-webkit-transform: rotate(0deg);
	}
}

@-webkit-keyframes rotate-left {
	from {
		-webkit-transform: rotate(360deg);
	}

	to {
		-webkit-transform: rotate(0deg);
	}
}

@keyframes movefromright {
	from {
		right: -450px;
		opacity: 0;
	}
	to {
		right: -350px;
		opacity: 1;
	}
}

@keyframes movefromleft {
	from {
		left: -450px;
		opacity: 0;
	}

	to {
		left: -350px;
		opacity: 1;
	}
}

@keyframes movefrombottom {
	from {
		bottom: -450px;
		opacity: 0;
	}

	to {
		bottom: -350px;
		opacity: 1;
	}
}

@keyframes movefromtopleft-muerdago {
	from {
		top: -485px;
		left: 0px;
	}

	to {
		top: -150px;
		left: 0px;
	}
}

@keyframes movefromtop-muerdago {
	from {
		top: -485px;
		right: 0px;
	}

	to {
		top: -150px;
		right: 0px;
	}
}

@keyframes movefrombottom-muerdago {
	from {
		bottom: -250px;
		left: -600px;
	}

	to {
		bottom: -60px;
		left: 0px;
	}
}

@keyframes movefrombottomright-muerdago {
	from {
		bottom: -250px;
		right: -600px;
	}

	to {
		bottom: -60px;
		right: 0px;
	}
}

@keyframes movefrombottomright-pegatina {
	from {
		bottom: -250px;
		right: -600px;
	}

	to {
		bottom: 100px;
		right: 0px;
	}
}

@keyframes appear {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes appear {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideright {
	from {
		-webkit-transform: translate(-20px,0);
		-moz-transform: translate(-20px,0);
		-o-transform: translate(-20px,0);
		-ms-transform: translate(-20px,0);
		transform: translate(-20px,0);
	}

	to {
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		-ms-transform: translate(0,0);
		transform: translate(0,0);
	}
}

@keyframes slideleft {
	from {
		-webkit-transform: translate(20px,0);
		-moz-transform: translate(20px,0);
		-o-transform: translate(20px,0);
		-ms-transform: translate(20px,0);
		transform: translate(20px,0);
	}

	to {
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		-ms-transform: translate(0,0);
		transform: translate(0,0);
	}
}

@keyframes danglybits {
	from {
		background-position: 0px;
	}

	to {
		background-position: -3600px;
	}
}

@keyframes swingdown {
	from {
		top: -350px;
	}

	to {
		top: -30px;
	}
}

@keyframes zooming {
	from {
		transform: scale(1.1);
	}

	to {
		transform: scale(1);
	}
}

@keyframes blink {
	from {
		background-position: center 0px;
	}

	to {
		background-position: center -1095px;
	}
}

@keyframes treelight {
	from {
		background-position: 0px 0px;
	}

	to {
		background-position: -2000px 0px;
	}
}

@keyframes lightsdrop {
	from {
		top: -350px;
	}

	to {
		top: -100px;
	}
}
:root {
	--framedisplacement:-1200px;
	--renoleft:-280px;
	--treeright:-340px;
}

@keyframes treeslide {
	from {
		right: -480px;
	}

	to {
		right: var(--treeright);
	}
}

@keyframes renoslide {
	from {
		left: -350px;
	}

	to {
		left: var(--renoleft);
	}
}


@keyframes prizelight {
	from {
		background-position: 0px center;
	}

	to {
		background-position: var(--framedisplacement) center;
	}
}




/*responsive*/



@media screen and (max-width: 1600px) {

	.blocks {
		min-width: 10vw;
		zoom: 0.9;
	}

	h1.secondary-header {
		max-width:40%;
	}

	.roscon-pegatina {
		zoom: 0.75;
	}

	.jackson {
		zoom: 0.9;
	}
}


@media screen and (max-width: 1400px) {

	.roscon-top-left, .roscon-bottom-left, .roscon-bottom-center, .roscon-bottom-right, .muerdago-top-right, .muerdago-bottom-left, .muerdago-top-left, .muerdago-bottom-right {
		zoom: 0.8;
	}

	.regalos-bottom-left, .arbol-bottom-right {
		zoom: 0.9;
	}

	.felicidades, .reno-bottom-left {
		zoom: 0.9;
	}

	.felicidades{
		bottom:5%;
	}

	h1{
		font-size:3rem;
	}	

	.jane {
		left: 15%;
	}

	.sponsor {
		display: flex;
		height: 100%;
		width: 180px;
		background-size: contain;
	}
}


@media screen and (max-width: 1200px) {

	.sponsor {
		display: flex;
		height: 100%;
		width: 150px;
		background-size:contain;
	}

	.subtitle {
		max-width: 60%;		
	}

	h1 {
		font-size: 2.5rem;
	}

	.blocks {
		zoom: 0.8;
	}

	.adornos-top-left {
		zoom: 0.7;
	}

	.roscon-pegatina {
		zoom: 0.7;
	}

}


@media screen and (max-width: 1000px) {

	.blocks {
		zoom: 0.75;
		margin-top:100px;
	}

	h1.secondary-header {
		top: 100px;
	}

	.adornos-top-left {
		zoom: 0.5;
	}

	.final {
		margin-top:40vh;
	}

	.regalos-bottom-left, .arbol-bottom-right {
		zoom: 0.8;
	}

	.regalos-bottom-left {
		left:-50px;
	}

	.arbol-bottom-right {
		right: -50px;
	}

	.luces-top-left, .arboles-bottom-right {
		zoom: 0.6;
	}

	.reno-bottom-left {
		zoom: 0.7;
	}

	h1.secondary-header {
		max-width: 50%;
	}

	.roscon-pegatina {
		zoom: 0.62;
	}

	.footer {
		flex-wrap: wrap;
		justify-content: center; /* Center items in the row */
		align-items: center; /* Center items vertically */
		height: auto; /* Allow height to grow as needed */
	}

	.sponsor {
		flex: 1 1 150px; /* Allows items to shrink and grow with a minimum width of 100px */
		height: 80px; /* Fixed height for all items */
		max-width: calc(100% / 5);
		background-size: 100% auto;
		margin: 5px;
	}

	.sponsor-1, .sponsor-2, .sponsor-3, .sponsor-4, .sponsor-5, .sponsor-6, .sponsor-7 {
		background-size: 100% auto;
	}

	.jackson {
		margin-top: 50px;
		zoom: 0.5;
	}
}



@media screen and (max-width: 800px) {

	.roscon-top-left, .muerdago-top-left, .muerdago-top-right, .roscon-bottom-left, .roscon-bottom-center, .roscon-bottom-right {
		zoom: 0.6;
	}

	.roscon-top-left, .muerdago-bottom-left, .muerdago-bottom-right {
		zoom: 0.7;
	}

	.final {
		margin-top: 30vh;
		font-size: 5vw;
		max-width: 70%;
	}

	.felicidades {
		bottom: -10vh;
		zoom: 1;
	}

	.regalos-bottom-left {
		left: -80px;
	}

	.arbol-bottom-right {
		right: -80px;
	}

	.big {
		font-size: 1.2em;
	}

	.jane {
		left: 1%;
	}

	.jackson {
		zoom: 0.75;
	}

	.blocks {
		padding-top: 120px;
		zoom: 0.8;
		flex-direction: column;
	}

	h1.secondary-header {
		position: relative;
	}

	.block {
		justify-content: normal;
		max-height: 660px;
		margin: auto;
	}

		.block h2 {
			margin: auto;
			max-width: 100%;
			width: 100%;
			height: 50px;
		}

	.luces-top-left, .arboles-bottom-right {
		zoom: 0.5;
	}

	.reno-bottom-left {
		zoom: 0.6;
	}

	.premio {
		width: 75%;
		height: 60%;
		position: absolute;
		margin: auto;
		top: 10%;
		left: 0%;
		right: 0%;
		border-radius: 20px;
		z-index: 3;
	}

	.premio-container {
		display: flex;
		height: 90%;
		flex-direction: column;
		justify-content: space-evenly;
		padding: 5% 10%;
	}

		.premio-container img {
			margin-top: 15px;
			max-width: 170px;
			width: 12vh;
			height: auto;
			margin: auto;
		}

		.premio-container h2 {
			font-size: 4vh;
			margin-bottom: 5px;
		}

		.premio-container p {
			font-size: 2vh;
		}

	.roscon-pegatina {
		zoom: 0.5;
	}

	.intro {
		font-size: 0.8rem;
	}
	.sponsor {
		height: 70px;
	}
}

@media screen and (max-width: 600px) {
	body, html {
		width: 100%;
	}

	.roscon-top-left, .muerdago-bottom-left, .muerdago-bottom-right {
		zoom: 0.7;
	}

	.jane {
		zoom: 0.8;
	}

	h1 {
		font-size: 2.2rem;
	}

	.stage {
		max-width:100%;
		width:100%;
		margin:0px;
		margin-bottom: 500px;
		border:0px;
	}

	.blocks {
		margin: auto;
		width:100%;
		zoom: 0.7;
		margin-top:100px;
	}
	
	.bobby{
		display:none;
	}

	.adornos-top-left {
		zoom: 0.4;
	}

	.reno-bottom-left {
		zoom: 0.6;
	}

	.arboles-bottom-right {
		zoom: 0.5;
	}

	.luces-top-left {
		zoom: 0.4;
	}

	.stage.intro h1 {
		margin-left: 10vw;
		margin-right: 5vw;
	}

	.stage.intro .subtitle {
		margin-left: 10vw;
		margin-right: 5vw;
	}

	.stage.intro .button, .button:hover {
		margin-left: 10vw;
		margin-right: 5vw;
	}
	.sponsor {
		height: 50px;
	}
}

@media screen and (max-width: 500px) {
	.roscon-top-left, .muerdago-top-right, .muerdago-top-left {
		zoom: 0.4;
	}

	.roscon-bottom-left, .roscon-bottom-center {
		display:none;
	}

	h1 {
		margin-top: 4vw;
		font-size: 7vw;
	}

	.jackson {
		margin-top: 130px;
		zoom: 0.5;
	}

	.subtitle {
		max-width: 90%;
	}

	/*.footer {
		height: 100px;
	}*/

	.jane {
		bottom: 90px;
		left: 0px;
		zoom: 0.65;
	}	

	.blocks {
		zoom: 0.6;
	}

	.adornos-top-left {
		zoom: 0.3;
	}


	.block-wide {
		min-width: 300px;
		max-width: 100%;
		font-size: 0.9rem;		
	}

		.block-wide h2 {
			max-width: 90%;
			height: auto;
			margin-bottom: 10px;
			height: 180px;
		}

	.frame-wide {
		min-height: auto;
		background: transparent;
	}

		.frame-wide .formtitle {
			font-size: 0.8rem;
			margin-bottom: 5px;
			margin-top: 0px;
			max-width: 70%;
		}

		.frame-wide .bottomline {
			margin-top: 20px;
		}

	.form-double {
		flex-direction: column;
	}

	.block-double {
		max-width: 90%;
		margin: auto;
	}

	.reno-bottom-left {
		zoom: 0.5;
	}

	.arboles-bottom-right {
		zoom: 0.4;
	}

	.luces-top-left {
		zoom:0.3;
	}

	.canvas {
		position: center;
		margin-top:20vh;
	}

	h2.eligeporcion {
		position: fixed;
		transform: none;
		font-size: 1.4rem;
		z-index: 1;
		top: 15vh;
		left: 0%;
		right: 0%;
		max-width: 75%;
	}


	/*.sponsor {
		width: 15vw;		
	}*/

	.premio {
		height: 50%;
	}

	.premio-container {
		height: 95%;
	}

	.premio-container img{
		max-width: 200px;
		width:14vh;
	}

		.premio-container h2 {
			font-size: 1.2rem;
			margin-bottom: 5px;
		}

		.premio-container p {
			font-size: 0.8rem;
			margin-bottom:30px;
		}

	.roscon-pegatina {
		zoom: 0.4;
	}

}

@media screen and (max-width: 400px) {
	.roscon-top-left, .muerdago-top-right {
		zoom: 0.3;
	}

	.muerdago-bottom-left {
		zoom: 0.5;
	}

	.blocks {
		max-width: 100%;
		width: 100%;
		zoom: 0.9;
	}

	.frame {
		width: 300px;
		height: 550px;
	}



		.frame.blinkprizes {
			background: url("./images/smolblinkyframeprizes.png") center repeat-x;
		}

		/*.frame.prize-1 {
			background: url("./images/smolblinkyframe_p1.png") center repeat-x;
		}

		.frame.prize-2 {
			background: url("./images/smolblinkyframe_p2.png") center repeat-x;
		}*/

	:root {
		--framedisplacement: -900px;
	}

	.button, .button:hover {
		border-radius: 25px;
		font-size: 1em;
		min-height: 40px;
		max-width: 10%;
		min-width: 160px;
	}

	.subtitle {
		font-size: 0.9rem;
	}


	.block h2 {
		max-width: 80%;
		height: auto;
		margin-bottom: -50px;
	}

	.formtitle {
		font-size: 0.80rem;
		margin-bottom: 5px;
		margin-top: 100px;
		max-width: 70%;
	}

	label, .css-label {
		font-size: 0.9rem;
	}

	.label {
		font-size: 3.8vw;
	}

	.form-codigo {
		padding-top: 180px;
	}

	.form-control {
		width: 75%;
		zoom: 0.8;
	}

	.form-check {
		max-width: 86%;
		zoom: 0.8;
	}

	.reno-bottom-left {
		zoom: 0.35;
		bottom: 150px;
	}

	.arboles-bottom-right {
		zoom: 0.3;
		bottom:150px;
	}

	.luces-top-left {
		zoom: 0.2;
	}

	.premio {
		height: 50%;
	}

	.premio-container {
		height: 100%;
	}

		.premio-container h2 {
			font-size: 1rem;
			margin-bottom: 5px;
		}

		.premio-container p {
			font-size: 0.8rem;
		}

	.roscon-pegatina {
		zoom: 0.3;
	}

}

@media screen and (max-width: 360px) {
	

	.muerdago-bottom-left {
		zoom: 0.4;
	}

	.jackson {
		zoom: 0.4;
	}

	.h1 {
		font-size: 6vw;
	}

	.jane {
		zoom:0.5;
		left:-10px;
	}

	/*.footer {
		height: 70px;
	}*/

	.reno-bottom-left {
		bottom: 60px;
	}

	.arboles-bottom-right {
		bottom: 50px;
	}

	.label {
		font-size: 0.8rem;
	}

	.premio {
		height:50%;
	}

	.premio-container {
		height: 95%;
	}

	.premio-container h2 {
		font-size: 1rem;
		margin-bottom: 5px;
	}

	.premio-container p {
		font-size: 0.8rem;
	}
	
}

@media screen and (max-height: 800px) and (min-width: 800px) {

	.jackson {
		height: 30px;
		margin: 0px;
	}

	h1 {
		font-size: 3rem;
	}

	.button.fadein3 {
		margin-top: -20px;
	}

	.roscon-bottom-center {
		zoom: 0.6;
	}

	.roscon-top-left, .roscon-bottom-left, .roscon-bottom-right {
		zoom: 0.8;
	}

	.canvas {
		margin-top: -10vw;
	}

	/*.footer {
		height: 100px;
	}

	.sponsor {
		display: flex;
		height: 100%;
		width: 150px;
		background-size: contain;
	}*/

	.blocks {
		zoom: 0.8;
	}

	.premio-container h2 {
		font-size: 1.5rem;
		margin-bottom: 5px;
	}

	.premio-container p {
		font-size: 1.2rem;
	}
}

@media screen and (max-height: 640px) and (min-width: 640px) {

	.canvas {
		margin-top: -14vw;
	}
}
