@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
	html {
		scroll-behavior: smooth;
	}
	body {
		margin:0;
		font-family: 'Nanum Gothic', sans-serif;
		/*background-image: linear-gradient(0deg, #fafafa 50%, #ffffff 50%);*/
		background-size: 6px 6px;
		color:#3385ad;
		margin-bottom:20%;
	}
	.cartas-liberadas {
		float:left;
		width:90%;
		margin-left:5%;
		margin-bottom:3%;
		font-size:.9em;
	}
	.logos-restaurantes-activos {
		float:left;
		width:35%;
		margin-right:2%;
	}
	.restaurantes-activos {
		float:left;
		width:18%;
		margin:1%;
	}
	@media only screen and (max-width:420px) {
		.logos-restaurantes-activos {
			width:40%;
			margin:2%;
		}
		.iconos-header {
			float:left;
			width:70%;
			margin-left:15;
		}
		.restaurantes-activos {
			width:70%;
			margin:1%;
			margin-left:15%;
		}
		.header {
			float:left;
			width:96%;
			padding:2%;
			background: rgb(25,118,153);
		}
		.botones-header {
			display:none;
		}
		.ojitos{
			float:right;
			height:30px;
			border-radius:3px;
		}
		.logo-header {
			float:left;
			width:60%;
			margin-left:20%;
			margin-top:3%;
			content:url("../imag/logo-movil.png");
		}
		.bajada-header {
			float:left;
			margin-top:2%;
			font-size:1.1em;
			font-weight:bold;
			text-align:center;
			width:100%;
			margin-bottom:3%;
			color:#FFFFFF;
			
		}
		.emoji-header {
			float:right;
			margin-right:3%;
			margin-left:3%;
			height:60px;
			display:none;
		}
		#_pizarra_ {
			float:left;
			width:100%;
			margin:0%;
		}
		.slider-pc {
			float:left;
			width:100%;
			margin-bottom:1%;
			display:none;
			border:solid 1px;
		}
		.slider-movil {
			float:left;
			width:100%;
			margin-bottom:1%;
		}
		.columnas-slider{
			float:left;
			width:90%;
			font-size:1.1em;
			line-height:1.5em;
			padding:5%;
			background-color:#ffffff;
			border-radius:4px;
			border:solid 0px #FFFFFF;
			text-align:center;
			margin-bottom:2%;
		}
		.botones-columna-slider {
			float:left;
			width:30%;
			margin:4% 35% 6% 35%;
		}
		.secciones {
			float:left;
			width:93%;
			padding:2%;
			background-color:#fafafa;
			margin-bottom:3%;
			border-radius:4px;
			border:solid 5px #FFFFFF;
			-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
			-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
			box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
		}
		.secciones-titulo {
			float:left;
			width:100%;
			font-size:1.8em;
			font-weight:bold;
			margin:1% 0% 0% 0%;
		}
		.secciones-titulo {
			float:left;
			width:100%;
			font-size:1.5em;
			font-weight:bold;
			margin-bottom:3%;
			text-align:center;
		}
		.encierra-planes {
			float:left;
			width:100%;
			margin-bottom:4%;
			padding-bottom:4%;
			border-bottom:solid 1px;
		}
		.nombre-plan {
			float:left;
			width:100%;
			font-weight:bold;
			font-size:1.5em;
			color:#3385ad;
			margin-bottom:2%;
		}
		.nombre-plan-descripcion {
			float:left;
			width:100%;
			color:#49c743;
			margin-bottom:4%;
		}
		.encierra-precio {
			float:left;
			width:100%;
			text-align:center;
			margin-bottom:4%;
		}
		.nombre-plan-precio {
			float:left;
			width:100%;
			font-size:2.2em;
			font-weight:bold;
			color:#3385ad;
		}
		.nombre-plan-precio-valor-mensual {
			float:left;
			width:100%;
			font-size:.8em;
			color:#65a4c2;
		}
		.nombre-plan-tipoplan {
			float:left;
			width:100%;
		}
		.encierra-boton-agregar {
			float:right;
			width:96%;
			text-align:center;
			padding:2%;
			border:solid 0px #0f7cb1;
			border-radius:6px;
			background-color:#085073;
			color:#FFFFFF;
			font-size:1.2em;
			font-weight:bold;
		}
		.encierra-boton-agregar:hover {
			background-color:#043045;
			color:#f4db09;
		}
		.encierra-boton-agregar-pagar {
			float:right;
			width:26%;
			margin-left:3%;
			text-align:center;
			padding:1%;
			border:solid 2px #c27b0b;
			border-radius:6px;
			cursor:pointer;
			background-color:#753013;
			color:#FFFFFF;
			font-size:1.2em;
		}
		::placeholder {
			color: #bdbcbc;
		}
		.label-registro-form {
			float:left;
			width:100%;
			font-size:.7em;
			color:#a5a1a1;
			margin-top:2%;
			margin-bottom:1%;
		}
		.decripcion-cupon {
			float:left;
			width:100%;
			font-size:0.6em;
			font-weight:normal;
			margin-bottom:6%;
			margin-top:2%;
			text-align:center;
		}
		#_cupon_ {
			width:98%;
			text-align:center;
			font-size:1.2em;
			margin-top:3%;
			color:green;
		}
		input,select {
			float:left;
			width:98%;
			padding:1%;
			font-size:1em;
			border:solid 1px #d6afaa;
			border-radius:4px;
		}
		select {
			width:96%;
			padding:1%;
			font-size:1em;
			border:solid 1px #d6afaa;
		}
		#_carta_planes_ {
			float:left;
			width:96%;
			padding:2%;
		}
		.columna-izquierda-formulario-registro {
			float:left;
			width:96%;
			padding:2%;
			margin-bottom:3%;
		}
		.icono-atras {
			float:left;
			width:10%;
			margin-right:4%;
			margin-top:0%;
		}
		.encierra-campos-formulario-registro,.encierra-campos-formulario-registro-data {
			float:left;
			width:100%;
		}
		.encierra-campos-formulario-registro-data {
			margin-top:4%;
			margin-bottom:4%;
		}
		.encierra-el-campo-solo {
			float:left;
			width:98%;
		}
		#_los_planes_{
			margin-top:2%;
			width:93%;
		}
		.fotter {
			float:left;
			width:96%;
			margin:2%;
			margin-bottom:30%;
		}
		.cols-fotter {
			float:left;
			text-align:left;
			width:32%;
			font-size:0.8em;
			margin-left:2%;
			margin-right:2%;
			padding-right:2%;
			border-right:solid 1px;
		}
		.reloarena {
			float:left;
			margin-top:2%;
			width:60%;
			margin-left:20%;
		}
		.revise-carta-ejemplo {
			float:left;
			width:94%;
			background-color:#00a1a3;
			border:solid 1px #;
			border-radius:4px;
			margin:1%;
			padding:2%;
			font-weight:bold;
			color:#FFFFFF;
			font-size:1em;
			display:none;
		}
		.celu {
			float:left;
			width:15%;
			margin-right:2%;
		}
		.bajada-gral {
			float:left;
			width:96%;
			margin:1%;
			padding:1%;
			font-weight:bold;
			font-size:.8em;
			text-align:center;
		}
		.logo-fotter {
			float:left;
			margin-right:2%;
			width:20%;
		}
		.titulo-seccion-formulario-registro {
			float:left;
			width:100%;
			margin-top:4%;
			padding-top:2%;
			border-top:solid 1px;
		}
		.personas-felices {
			float:left;
			width:90%;
			margin:6% 0% 14% 5%;
			border-radius:5px;
		}
	}
	
	@media only screen and (min-width:421px) {
		input,select,textarea {
			float:left;
			width:96%;
			padding:2%;
			font-size:1.2em;
			border:solid 1px;
			border-radius:4px;
		}
		.iconos-header {
			float:left;
			width:16%;
			margin-left:5;
		}
		select {
			width:96%;
			padding:1%;
			font-size:1.5em;
			border:solid 0px;
			background-color:#085073;
			color:#FFFFFF;
		}
		textarea {
			height:80px;
		}
		.header {
			float:left;
			width:98%;
			padding:1%;
			margin-bottom:1%;
			background: rgb(25,118,153);
			background: linear-gradient(90deg, rgba(25,118,153,0) 19%, rgba(20,110,200,1) 71%);
		}
		.botones-header {
			float:right;
			width:auto;
			padding:0.3% 0.9% 0.4% 0.9%;
			border:solid 1px #FFFFFF;
			border-radius:5px;
			color:#FFFFFF;
			font-size:.9em;
			text-align:center;
			margin-left:1%;
			cursor:pointer;
			margin-top:0.6%;
			background-color:rgba(0,0,0,0.1);
		}
		.botones-header:hover {
			font-weight:bold;
			background-color:rgba(255,255,255,0.1);
		}
		h2 {
			font-size:1em;
		}
		.ojitos{
			float:right;
			height:50px;
			border-radius:3px;
			margin-left:5%;
		}
		.logo-header {
			float:left;
			margin-left:2%;
			width:15%;
		}
		.bajada-header {
			float:left;
			margin-left:2%;
			padding-left:2%;
			border-left:solid 1px;
			font-size:1.2em;
			font-weight:bold;
		}
		.emoji-header {
			float:right;
			margin-right:3%;
			margin-left:3%;
			height:60px;
		}
		.encierra-menu {
			float:right;
			width:40%;
			font-size:.9em;
			color:#FFFFFF;
		}
		.menu {
			float:left;
			width:auto;
			margin-right:5%;
			cursor:pointer;
		}
		#_pizarra_ {
			float:left;
			width:94%;
			padding:1%;
			margin-left:2%;
		}
		.slider-pc {
			float:left;
			width:100%;
			margin-bottom:3%;
			border-radius:4px;
		}
		.slider-movil {
			float:left;
			width:100%;
			margin-bottom:1%;
			border-radius:4px;
			display:none;
		}
		.columnas-slider,.columnas-slider-ayuda{
			float:left;
			width:21%;
			height:460px;
			margin:0.5%;
			font-size:1.3em;
			padding:1%;
			background-color:#ffffff;
			border-radius:7px;
			border:solid 5px #FFFFFF;
			text-align:center;
			color:#223c4f;
			line-height:1.6em;
		}
		.columnas-slider-ayuda {
			height:720px;
		}
		.imagenes-ayuda {
			float:left;
			width:84%;
			margin:0% 5% 5% 3%;
			border:solid 1px #FFFFFF;
			padding:3%;
			border-radius:4px;
			cursor:pointer;
			background-color:#FFFFFF;
			-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
			-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
			box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.4);
			z-index:4;
		}
		.el-h2 {
			height:380px;
		}
		.columnas-slider-abajo {
			height:280px;
		}
		.botones-columna-slider {
			float:left;
			width:26%;
			margin:4% 37% 12% 37%;
		}
		.secciones {
			float:left;
			width:96%;
			padding:2%;
			background-color:#fafafa;
			margin-bottom:3%;
			border-radius:4px;
			border:solid 5px #FFFFFF;
			-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
			-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
			box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
		}
		.secciones-titulo {
			float:left;
			width:100%;
			font-size:1.5em;
			font-weight:bold;
			margin-bottom:2%;
			margin-top:2%;
		}
		.bajada-planes {
			float:right;
			width:55%;
			font-size:.8em;
		}
		.encierra-planes {
			float:left;
			width:100%;
			margin-bottom:2%;
			padding-bottom:2%;
			border-bottom:solid 1px;
		}
		.nombre-plan {
			float:left;
			width:60%;
			font-weight:bold;
			font-size:1.5em;
			color:#3385ad;
		}
		.nombre-plan-descripcion {
			float:left;
			width:60%;
			color:#49c743;
		}
		.encierra-precio {
			float:right;
			width:20%;
			text-align:center;
		}
		.nombre-plan-precio {
			float:left;
			width:100%;
			font-size:2.2em;
			font-weight:bold;
			color:#3385ad;
		}
		.nombre-plan-precio-valor-mensual {
			float:left;
			width:100%;
			font-size:.8em;
			color:#65a4c2;
		}
		.nombre-plan-tipoplan {
			float:left;
			width:100%;
		}
		.encierra-boton-agregar {
			float:right;
			width:14%;
			margin-left:3%;
			text-align:center;
			padding:1%;
			border:solid 0px #0f7cb1;
			border-radius:6px;
			cursor:pointer;
			background-color:#085073;
			color:#FFFFFF;
			font-size:1.2em;
			font-weight:bold;
		}
		.encierra-boton-agregar:hover {
			background-color:#043045;
			color:#f4db09;
		}
		.encierra-boton-agregar-pagar {
			float:right;
			width:26%;
			margin-left:3%;
			text-align:center;
			padding:1%;
			border:solid 2px #c27b0b;
			border-radius:6px;
			cursor:pointer;
			background-color:#753013;
			color:#FFFFFF;
			font-size:1.2em;
		}
		::placeholder {
			color: #bdbcbc;
		}
		.label-registro-form {
			float:left;
			width:100%;
			font-size:.7em;
			color:#a5a1a1;
			margin-top:2%;
			margin-bottom:1%;
		}
		.decripcion-cupon {
			float:left;
			width:58%;
			font-size:0.7em;
			font-weight:normal;
			margin-left:2%;
		}
		#_cupon_ {
			width:30%;
			text-align:center;
		}
		#_carta_planes_ {
			float:right;
			width:36%;
		}
		.columna-izquierda-formulario-registro {
			float:left;
			width:59%;
			padding-right:3%;
			border-right:solid 1px;
		}
		.icono-atras {
			float:left;
			width:5%;
			margin-right:4%;
			cursor:pointer;
			margin-top:0%;
		}
		.encierra-campos-formulario-registro,.encierra-campos-formulario-registro-data {
			float:left;
			width:100%;
		}
		.encierra-campos-formulario-registro-data {
			margin-top:2%;
		}		
		.encierra-el-campo-solo {
			float:left;
			width:48%;
			margin:1%;
		}
		#_los_planes_{
			margin-top:2%;
			width:96%;
			color:green;
		}
		.fotter {
			float:left;
			width:96%;
			margin-left:4%;
			padding-bottom:10%;
		}
		.cols-fotter {
			float:left;
			text-align:left;
			width:10%;
			font-size:0.8em;
			margin-left:2%;
			margin-right:2%;
			padding-right:2%;
			border-right:solid 1px;
		}
		.texto-cualquiera {
			float:left;
			width:100%;
			margin-top:4%;
			padding-top:2%;
			border-top:solid 1px;
		}
		.titulo-seccion-formulario-registro {
			float:left;
			width:100%;
			margin-top:4%;
			padding-top:2%;
			border-top:solid 1px;
		}
		#_sub_total_ {
			float:right;
			width:100%;
			margin-top:4%;
			font-size:1.2em;
		}
		#carta_ejemplo,#carta_ejemplo_celu {
			float:left;
			position:absolute;
			z-index:2000;
			width:270px;
			height:570px;
			top:23px;
			left:12px;
			border-radius:7px;
			-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.4);
			-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.4);
			box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.4);
			border-radius:20px;
			border:solid 4px #000000;
			background-color:#000000;
		}
		#carta_ejemplo_celu {
			width:289px;
			height:600px;
			top:10px;
			left:10px;
		}
		.reloarena {
			float:right;
			margin-left:1.5%;
			width:18%;
		}
		.revise-carta-ejemplo {
			float:left;
			width:20%;
			background-color:#00a1a3;
			border:solid 1px #;
			border-radius:4px;
			padding:1.5%;
			margin-right:2%;
			font-weight:bold;
			cursor:pointer;
			color:#FFFFFF;
			font-size:.9em;
		}
		.celu {
			float:left;
			width:12%;
			margin-right:4%;
		}
		.bajada-gral {
			float:left;
			width:53%;
			font-size:1.2em;
			font-weight:bold;
		}
		.logo-fotter {
			float:left;
			margin-right:2%;
			width:12%;
		}
		.personas-felices {
			float:left;
			margin-left:20%;
			width:60%;
			margin-bottom:3%;
			border-radius:8px;
		}
	}