*{
	padding: 0px;
	margin: 0px;
}

body {
	min-height: 700px;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden !important;
	overflow-y: auto;
	color: white;
	font: 1.3rem 'BentonSansBBVA-Medium';
/* 	text-shadow: 0 0 5px #C8C8C8; */
	
	padding-top: 0 !important;
	position:relative;

	background-image: url('');
    background-size: cover;
    background-attachment: fixed;
    background-color: var(--navy-blue);
    
/*
	background: radial-gradient(-45deg, #5151ee, #3cc8e8, #2226d7, #23d5ab);
	background-size: 120% 120%;
	animation: gradient 15s ease infinite;
	
	background-color: #2f286d;
	overflow-x: hidden;
	
	background: linear-gradient(220deg, #004481, #49a5e6, #2dcccd);
	background-size: 600% 600%;
	
	-webkit-animation: bgAnimation 5s ease infinite;
	-moz-animation: bgAnimation 5s ease infinite;
	-o-animation: bgAnimation 5s ease infinite;
	animation: bgAnimation 5s ease infinite;
*/
	
}
body::after {
/*
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
	pointer-events: none;
*/
}

.txt-gray {
	color: #002149;
	opacity: .4;
}
.cont-exp {
	position: relative;
	opacity: 0;
	transition: all .8s;
	min-height: 500px;
}
.absolute {
	position: absolute !important;
	left: 50%;
	transform: translate(-50%, 0);
}
.float {
	animation: float 6s ease-in-out infinite;
}
.monitor {
	animation-duration: 0.01s;
	animation-name: textflicker;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.bg-transparent{
	background: transparent !important;
}
#scene-one {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	filter: blur(0px);
	z-index: -1;
}
#scene-two {
	position: fixed;
	left: 0;
	top: 48px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.vanta-canvas {
	width: 100%;
	height: 100%;
}
#texto-intro {

	margin-top: 88px;
	font-size: 90px;
	font-family: 'BentonSansBBVA-Medium';
	color: var(--black-00);
	
/*
	animation-duration: 0.01s;
	animation-name: textflicker;
	animation-iteration-count: infinite;
	animation-direction: alternate;
*/
	
	z-index: 1001;
}
#form-nombre {
	width: 100%;	
	z-index: 1001;
}
#txt-nombre {
	
	width: 100%;
	font-size: 70px;
	font-family: 'BentonSansBBVA-Medium';
	color: var(--aqua);
	
	background-color: transparent;
	border: 0px solid #fff;
	
/*
	animation-duration: 0.01s;
	animation-name: textflicker;
	animation-iteration-count: infinite;
	animation-direction: alternate;
*/
}
#txt-nombre:focus, input:focus{
    outline: none;
}
::placeholder {
	color: #fff;
	opacity: .3;
}
/*
.btn-atras {
	position: absolute;
	left: 0px;
	top: 0px;
}
.btn-cerrar {
	position: absolute;
	right: 0px;
	top: 0px;
}
.btn-omitir {
	position:absolute;
	bottom:0;
	right:10px;
}
*/
/*
#btn-atras, #btn-cerrar {
	position: absolute;
	top: 50px;
}
*/

#btn-atras, #btn-cerrar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--core-blue);
	color: #fff;
	text-align: center;
	border: 1px solid #2dcccd;
	cursor: pointer;
	-webkit-opacity: .7 !important;
	-ms-opacity: .7 !important;
	opacity: .7 !important;
}
#btn-atras:hover, #btn-cerrar:hover {
	background: rgba(0, 207, 204, 1);
	-webkit-opacity: 1 !important;
	-ms-opacity: 1 !important;
	opacity: 1 !important;
}

.slider-progress {
	width: 40%;
	height: 3px;
}
.slider-progress .progress {
	border-radius: 0 !important;
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.3);
}


.second-bar {
	position: absolute;
	top:40px;
	left: 50%;
	transform: translate(-50%,0);
}
.btn-omitir, .btn-atras, .btn-cerrar {
	color: #fff;
	opacity: .5;
	z-index: 1001;
}
.btn-omitir:hover, .btn-atras:hover, .btn-cerrar:hover {
	color: #ffffff;
	z-index: 1001;
}
.modal-content {
	border: 2px solid #02dccc;
}
.btn-close {
	transform: translate(50%, -50%);
}
/*
#btn-paso-1 {
	border: 2px solid #00cccc;
	background: rgb(34,165,176);
	background: linear-gradient(90deg, rgba(34,165,176,1) 0%, rgba(40,66,144,1) 100%);
	background-size: 250% 250%;
	color: #fff;
	font-size: 21px;
	font-family: 'BentonSansBBVA-Medium';
	border-radius: 0px;
}
#btn-paso-1:hover {
	animation: gradient 5s ease infinite;
}
*/
.btn-paso-1 {
	border: 2px solid #00cccc;
	background: rgb(34,165,176);
	background: linear-gradient(90deg, rgba(34,165,176,1) 0%, rgba(40,66,144,1) 100%);
	color: #fff;
	font-size: 21px;
	font-family: 'BentonSansBBVA-Medium';
	border-radius: 0px;
}
.btn-paso-1:hover {
	box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
	border: solid 2px transparent;
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(60deg, rgba(52,205,255,1) 0%, rgba(0,255,255,1) 33%, rgba(255,202,79,1) 66%, rgba(255,145,205,1) 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	box-shadow: 2px 1000px 1px #00cfcd inset;
	background-size: 250% 250%;
	animation: gradient 5s ease infinite;
	color: #fff;
}
#btn-paso-2 {
	border: 2px solid #00cccc;
	background: rgb(34,165,176);
	background: linear-gradient(90deg, rgba(34,165,176,1) 0%, rgba(40,66,144,1) 100%);
	color: #fff;
	font-size: 21px;
	font-family: 'BentonSansBBVA-Medium';
	border-radius: 0px;
}
#btn-paso-2:hover {
	box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
	border: solid 2px transparent;
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(60deg, rgba(52,205,255,1) 0%, rgba(0,255,255,1) 33%, rgba(255,202,79,1) 66%, rgba(255,145,205,1) 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	box-shadow: 2px 1000px 1px #00cfcd inset;
	background-size: 250% 250%;
	animation: gradient 5s ease infinite;
	color: #fff;
}
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: rgba(0, 0, 0, 0);
	
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.swiper-button-prev {
	background-image: url("../../../images/aseguratufuturo/flecha-left.svg") !important;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	margin-left: 15%;
	outline: none;
	box-shadow: none;
}
.swiper-button-next {
	background-image: url("../../../images/aseguratufuturo/flecha-right.svg") !important;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	margin-right: 15%;
	outline: none;
	box-shadow: none;
}
.swiper-button-prev:hover, .swiper-button-next:hover, .swiper-button-prev:active, .swiper-button-next:active {
	outline: none;
	box-shadow: none;
}
.nds, .nds:focus, .nds:active, .nds:hover {
	outline: none !important;
	box-shadow: none !important;
}
.swiper-button-next::after, .swiper-button-prev::after {
    content: "" !important;
}
#instruccion {
	font-size: 18px;
}
#candado {
	font-size: 16px;
}
.nave {
	max-width: 350px;
}
/* Animations */
@-webkit-keyframes bgAnimation {
    0%{background-position:55% 0%}
    50%{background-position:46% 100%}
    100%{background-position:55% 0%}
}
@-moz-keyframes bgAnimation {
    0%{background-position:55% 0%}
    50%{background-position:46% 100%}
    100%{background-position:55% 0%}
}
@-o-keyframes bgAnimation {
    0%{background-position:55% 0%}
    50%{background-position:46% 100%}
    100%{background-position:55% 0%}
}
@keyframes bgAnimation {
    0%{background-position:55% 0%}
    50%{background-position:46% 100%}
    100%{background-position:55% 0%}
}
@keyframes textflicker {
	from {
		text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
	}
	to {
		text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
	}
}
@keyframes float {
	0% {
		transform: translate(-50%, 0px);
	}
	50% {
		transform: translate(-50%, -20px);
	}
	100% {
		transform: translate(-50%, 0px);
	}
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* drop */

#pregunta {
	height: 125px;
	font-size: 32px;
}

#copy-elige {
	font-size: 32px;
}

.grid {
	margin: 0 auto;
	max-width: 50em;
	padding: 0 1em;
	transition: opacity .5s;
	pointer-events: none;
}

.grid__item {
	display: inline-block;
	width: 100%;
	max-width: 300px;
	height: 70px;
	font-size: 16px;
	border-radius: 35px;
	background: transparent;
	color: #fff;
	text-align: center;
	border: 1px solid #2dcccd;
}

.grid__item:hover {
	cursor: move;
	cursor: -webkit-grab;
	cursor: grab;
	border: 0px solid #fff;
}

.grid__item:active {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.layer1 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 35px;
	background: #00cfcd;
	opacity: .3;
}
.grid__item:hover .layer1 {
	opacity: 1;
	padding: 1rem;
	padding: .5rem 3rem;
	color: #fff;
	box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
	border: solid 5px transparent;
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(60deg, 
		rgba(248,205,81,1) 0%, 
		rgba(247,139,232,1) 33%, 
		rgba(248,205,81,1) 66%, 
		rgba(15,247,240,1) 100%
	);
	background-origin: border-box;
	background-clip: content-box, border-box;
	box-shadow: 4px 1000px 1px #00cfcd inset;
	background-size: 250% 250%;
	animation: gradient 5s ease infinite;
	opacity: .7;
}
.grid__item:hover .respuesta {
	color: #fff;
}

.gradient {
	background: rgb(52,205,255);
	background: linear-gradient(60deg, rgba(52,205,255,1) 0%, rgba(0,255,255,1) 33%, rgba(255,202,79,1) 66%, rgba(255,145,205,1) 100%);
}
.icono {
	width: 64px;
	height: 64px;
	z-index: 10;
}
.respuesta {
	color: white;
	text-align: center;
	z-index: 10;
}

.is-dragging {
	opacity: 1;
}

.is-active {
	z-index: 100;
}

.is-dropped {
	opacity: 0;
	-webkit-transform: scale3d(0.7,0.7,1) !important;
	transform: scale3d(0.7,0.7,1) !important;
}

.is-complete {
	opacity: 1;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s !important;
	transition: opacity 0.3s, transform 0.3s !important;
	-webkit-transform: scale3d(1,1,1) !important;
	transform: scale3d(1,1,1) !important;
}

.animate {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

#copyResp1, #copyResp2, #copyResp3 {
	font-size: 16px;
}

.drop-area {
	position: absolute;
	top: 0%;
	left: 50%;
	width: 300px;
	height: 100%;
	padding: 0px;
	z-index: 99;
	background: transparent; /*rgba(255,255,255,.7);*/
	border-radius: 5px;
	text-align: center;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translate3d(-50%, 0%,0) scale3d(1,1,1);
	transform: translate3d(-50%, 0%,0) scale3d(1,1,1);
	pointer-events: none;
}

.drop-area.show {
	opacity: 1;
	-webkit-transform: translate3d(-50%, 0%,0) scale3d(1,1,1);
	transform: translate3d(-50%, 0%,0) scale3d(1,1,1);
	pointer-events: auto;
}

.drop-area__item {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	margin: 0px;
	border-radius: 0px;
	background: rgba(0,0,0,0.05);
	-webkit-transition: -webkit-transform 0.3s, background 0.3s;
	transition: transform 0.3s, background 0.3s;
	-webkit-backface-visibility: hidden;
	
	animation: neon1 1.5s ease-in-out infinite alternate;
}

/*
@keyframes neon1 {
  from {
    text-shadow: 	0 0 1px #2dcccd, 0 0 5px #2dcccd, 0 0 8px #2dcccd, 0 0 04px #2dcccd,
      				0 0 35px #2dcccd, 0 0 40px #2dcccd, 0 0 25px #2dcccd, 0 0 150px #2dcccd;
  }
  to {
    text-shadow: 	0 0 3px #2dcccd, 0 0 7px #2dcccd, 0 0 8px #2dcccd, 0 0 8px #2dcccd,
      				0 0 20px #2dcccd, 0 0 20px #2dcccd, 0 0 15px #2dcccd, 0 0 75px #2dcccd;
  }
}
*/

/*
@keyframes neon1 {
	from {
		text-shadow: 	0 0 1px #2dcccd, 0 0 5px #2dcccd, 0 0 8px #2dcccd, 0 0 04px #2dcccd,
						0 0 80px #2dcccd, 0 0 80px #2dcccd, 0 0 80px #2dcccd, 0 0 75px #2dcccd;
	}
	to {
		text-shadow: 	0 0 3px #f8cd51, 0 0 7px #f8cd51, 0 0 8px #f8cd51, 0 0 8px #f8cd51,
						0 0 100px #f8cd51, 0 0 100px #f8cd51, 0 0 100px #f8cd51, 0 0 75px #f8cd51;
	}
}
*/

@keyframes neon1 {
  0% {text-shadow: 
	  	0 0 3px #2dcccd, 0 0 7px #2dcccd, 0 0 8px #2dcccd, 0 0 8px #2dcccd,
	  	0 0 30px #2dcccd, 0 0 30px #2dcccd, 0 0 30px #2dcccd, 0 0 25px #2dcccd;}
  50% {text-shadow: 
	  	0 0 3px #f8cd51, 0 0 7px #f8cd51, 0 0 8px #f8cd51, 0 0 8px #f8cd51,
	  	0 0 40px #f8cd51, 0 0 40px #f8cd51, 0 0 40px #f8cd51, 0 0 35px #f8cd51;}
  100%  {text-shadow: 
	  	0 0 3px #f78be8, 0 0 7px #f78be8, 0 0 8px #f78be8, 0 0 8px #f78be8,
	  	0 0 50px #f78be8, 0 0 50px #f78be8, 0 0 50px #f78be8, 0 0 45px #f78be8;}
/*
  40%  {text-shadow: 0 0 3px #f8cd51, 0 0 7px #f8cd51, 0 0 8px #f8cd51, 0 0 8px #f8cd51,
      0 0 100px #b6a8ee, 0 0 100px #f8cd51, 0 0 100px #f8cd51, 0 0 75px #f8cd51;}
  60%  {text-shadow: 0 0 3px #b6a8ee, 0 0 7px #b6a8ee, 0 0 8px #b6a8ee, 0 0 8px #b6a8ee,
      0 0 100px #b6a8ee, 0 0 100px #b6a8ee, 0 0 100px #b6a8ee, 0 0 75px #b6a8ee;}
  100% {text-shadow: 0 0 1px #2dcccd, 0 0 5px #2dcccd, 0 0 8px #2dcccd, 0 0 04px #2dcccd,
      0 0 80px #2dcccd, 0 0 80px #2dcccd, 0 0 80px #2dcccd, 0 0 75px #2dcccd;}
*/
}

.drop-area__item.highlight {
/*
	background: rgba(128,168,204,0);
	-webkit-transform: scale3d(1.08,1.08,1);
	transform: scale3d(1.08,1.08,1);
*/
}

.drop-area__item::before,
.drop-area__item::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #6C7A89;
	font-size: 42px;
	margin-top: -0.3em;
	font-family: FontAwesome;
	pointer-events: none;
}

.drop-area__item::before {
	content: ''; /*'\f01c';*/
}

.drop-area__item:nth-child(2)::before {
	content: '\f187';
}

.drop-feedback.drop-area__item::before {
	opacity: 0;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
}

.drop-area__item::after {
	content: attr(data-content);
	opacity: 0;
	font-family: 'BentonSansBBVA-Bold';
	font-size: 60px;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale3d(2,2,1);
	transform: scale3d(2,2,1);
	color: #fff;
/* 	filter: drop-shadow(2px 2px 2px #072146); */
	text-align: center;
}

.drop-feedback.drop-area__item::after {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.drop-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.0);
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	pointer-events: none;
}

.drop-area.show + .drop-overlay {
	opacity: 1;
}

.helper {
	position: absolute !important;
	margin: 0;
}

/* end drop */

/* quiz */

.btn-answer {
	filter: url('#gooeyness2');
}
.ml2 {
	font-weight: 900;
	
	position: relative;
	top: 0px;
	width: 100%;
	text-align: center;
	
	/* 				color: transparent; */
	
	/* 	filter: drop-shadow(2px 2px 2px #072146); */
	
	/*
		-webkit-animation: blurFadeIn 1s ease-in backwards;
		-moz-animation: blurFadeIn 1s ease-in backwards;
		-ms-animation: blurFadeIn 1s ease-in backwards;
		animation: blurFadeIn 1s ease-in backwards;
		
		-webkit-animation-delay: 0s;
		-moz-animation-delay: 0s;
		-ms-animation-delay: 0s;
		animation-delay: 0s;
	*/
}
.ml2 .letter {
	display: inline-block;
	line-height: 1em;
}

.hidden {
	opacity: 0 !important;
	pointer-events: none !important;
	width: 70px !important;
	height: 0px;
}

.text-white-opacity {
	color: rgba(255,255,255,.75)
}
/* Result */
#cont-gift {
	display: none;
}
.cupon-a {
	width: 233px;
	height: 100px;
	background-image: url('/assets/images/aseguratufuturo/cupon-01.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.cupon-b {
	width: 97px;
	height: 100px;
	background-image: url('/assets/images/aseguratufuturo/cupon-02.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
#cont-result {
	background-color: #fff;
	display: none;
}
.cont-cta {
	position: absolute;
	bottom: 20px;
	left: 50%;
	width: 100%;
	height: 120px;
	transform: translate(-50%, 0);
}
#card-btn-1, #card-btn-2, #card-btn-3 {
	width: 200px;
	height: 60px;
}
#texto-final {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 100%;
	height: 40px;
	text-align: center;
	vertical-align: middle;
	font-size: 36px;
	transform: translate(0, -60%);
}

.gs_reveal {
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
}

.card-title {
	color: var(--black-600);
}
.card {
	border: 2px solid #ded8f5;
	transition: border .5s;
}
.card:hover {
	border: 2px solid #927de2
}
.card-img-top {
	width: 140px;
}
.card-btn {
	border: 2px solid #00cccc;
	background: rgb(34,165,176);
	background: linear-gradient(90deg, rgba(34,165,176,1) 0%, rgba(40,66,144,1) 100%);
	background-size: 250% 250%;
	color: #fff;
	font-size: 16px;
	font-family: 'BentonSansBBVA-Medium';
	border-radius: 0px;
}
.card-btn:hover {
/*
	box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
	border: solid 3px transparent;
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(60deg, rgba(52,205,255,1) 0%, rgba(0,255,255,1) 33%, rgba(255,202,79,1) 66%, rgba(255,145,205,1) 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	box-shadow: 2px 1000px 1px #00cfcd inset;
*/
	color: #fff;
	animation: gradient 5s ease infinite;
}

.list-bullet {
	position: relative;
	list-style: none;
}
.list-bullet li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}
.list-bullet li::before {
    content: '';
    position: absolute;
    background: url('/assets/images/contenido/combo/activities-bullet.png') no-repeat;
    background-position: center center;
    width: 10px;
    height: 10px;
    top: 8px;
    left: 0px;
}
.btn-cupon {
	border: 1px solid #00cccc;
	background: transparent;
	color: #fff;
	transition: all .5s;
}
.btn-cupon:hover {
	border: 1px solid #00cccc;
	background: rgba(0,0,0,0.1);
	color: #fff;
}
#ciudad {
	position:relative;
	left:50%;
	top:0;
	width: 100%;
	height: auto;
	max-width:720px;
	max-height:600px;
	transform: translate(-50%,0);
}
#lightstream {
	position:absolute;
	left:50%;
	top:50%;
	width: 100%;
	height: auto;
	max-width:720px;
	max-height:600px;
	transform: translate(-50%,-60%);
}
#nave_ciudad {
	position:absolute;
	left:50%;
	top:0;
	width: 100%;
	height: auto;
	max-width:720px;
	max-height:600px;
	transform: translate(-50%,0)
}
#gift {
	max-width: 300px;
}
#txt_cupon {
	border: 0;
	background-color: transparent;
	color: #fff;
	text-align: center;
	width: 200px;
	pointer-events: none;
}

@media screen and (max-width: 1299px) {
	.swiper-button-prev {
		margin-left: 5%;
	}
	.swiper-button-next {
		margin-right: 5%;
	}
}
@media screen and (max-width: 1024px) {
	.nave {
		max-width: 250px;
	}
}
@media screen and (max-width: 991px) {
	.second-bar {
		top:20px;
	}
}
@media screen and (max-width: 50em) {
	.s64 {
		font-size: 40px;
	}
	#txt-nombre {
		font-size: 40px;
	}
	#texto-intro {
		margin-top: 48px;
		font-size: 40px;
	}
	.cont-exp {
		/*min-height: 900px;*/
	}
	.grid__item {
		font-size: 1.5em;
	}
	.drop-area {
		font-size: 0.6em;
		left: 50%;
	}
}

@media screen and (max-width: 25.5em) {
	#texto-intro {
		margin-top: 48px;
		font-size: 30px;
	}
	#txt-nombre {
		font-size: 30px;
	}
	.s34 {
		font-size: 21px;
	}
	.s32 {
		font-size: 24px;
	}
	.s21 {
		font-size: 16px;
	}
	.s24 {
		font-size: 18px;
	}
	.drop-area {
		font-size: 0.6em;
		left: 50%;
	}
	.grid {
		padding: 0 2em;
	}
	.grid__item {
		font-size: 1em;
	}
	#ciudad {
		width:280px;
		height:233px;
	}
	#nave_ciudad {
		width:280px;
		height:233px;
	}
	#gift {
		max-width: 200px;
	}
	#txt_cupon {
		width: 150px;
	}
}
@media screen and (max-width: 500px) {
	#pregunta {
		height: 100px;
		font-size: 18px;
	}
	#copy-elige {
		font-size: 18px;
	}
	#instruccion {
		font-size: 13px;
	}
	#candado {
		font-size: 13px;
	}
	.drop-area__item::before,
	.drop-area__item::after {
		font-size: 40px;
	}
	#copyResp1, #copyResp2, #copyResp3 {
		font-size: 15px;
	}
	.drop-area__item::after {
		-webkit-transform: scale3d(1.2,1.2,1);
		transform: scale3d(1.2,1.2,1);
	}
}