body {color:#484848;}

img {display:block; max-width:100%;}

body * {box-sizing:border-box;}
#contenedor_comprar span {display:inline-block;}


#header {background:#f0f0f0; border-bottom:1px solid #484848;  padding:10px 4% 20px 4%;}
#header .wrapper {display:flex; flex-wrap:wrap; justify-content:right;}
#header .logo {width:50%; display:block; padding-right:5%;}
#header .logo img {max-width:377px;}
#header .secure {width:50%; display:block; padding-left:5%;}
#header .secure img {max-width:201px; float:right;}

#volver {float:right; font-size:14px; text-decoration:none; color:#484848; margin-bottom:15px; display:block;}
#volver:hover {text-decoration:underline;}
	
.contenedor_comprar {padding:30px 3%;}

.step {height:auto; opacity:1; transition:opacity 0.6s ease-in-out; overflow:hidden;}
.hidden {opacity:0; height:0;}

.estas_comprando {background:#f0f0f0; padding:15px; width:260px; margin:0 0 0 0;}
.estas_comprando p {padding:0 0 5px 0; border-bottom:1px solid #484848; font-size:14px; margin:0 0 7px 0; font-weight:bold;}
.estas_comprando img {float:left; margin:0 7px 0 0;}
.estas_comprando span {font-size:12px; line-height:14px;}
.promocion {font-size:13px; margin:0 0 30px 0; color:#cf1c24; font-weight:bold; text-align:center; width:260px; background:#f0f0f0; padding:0 0 15px 0;}
.promocion span {background:#ad953a; color:white; padding:3px 6px; margin-top:2px; font-size:12px; font-weight:normal;}

h2 {font-size: 24px; font-weight:normal; padding:0 0 15px 0; margin:0; color:#484848; line-height:1.2;}
h2 span {font-weight:bold; margin-right:5px;}

.separador {background:#484848; height:1px; margin:45px auto; width:100%; clear:both;}

.clear {display:block; clear:both;}

.ocultar {display:none!important;}

.error_pago, .error_datos {border:1px solid red; color:red; display:inline-block; padding:3px 6px; margin:0 10px; font-size:13px;}


label {
    padding:0 0 4px 0;
    font-size: 14px;
	 color:#676767;
	 font-weight:bold;
	display:block;}
label span {color:#a4a4a4;}

.contenedor_comprar textarea,
.contenedor_comprar select,
.contenedor_comprar input {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
	width:100%;
	height:30px;
	color:#676767; padding:0 0 0 5px; margin:0 0 15px 0; font-size:13px;
	transition:all 0.5s ease-in-out;
		  }

.contenedor_comprar textarea:focus,
.contenedor_comprar select:focus,
.contenedor_comprar input:focus {
  border-color:#333;
  outline: 0;
  outline: thin dotted \9;}



.continuar {background:#484848; color:white; text-transform:uppercase; padding:7px 30px; text-decoration:none; display:inline-block; font-size:14px;  font-weight:bold; transition:all 0.5s ease-in-out;}
.continuar:hover {background:black;}


.cont_area {width:25%; float:left; padding-right:7px;}
.cont_area input {width:90%;}
.cont_area span {width:5%;}
.cont_tel {width:75%; float:left;}


/*********************/
/*  STEP 1 (metodos) */
/*********************/	
.direccion_container {border:1px solid #676767; padding:5px 1.5% 10px 1.5%; margin:15px 0 15px 0;}
.direccion_container p {font-size:15px; margin:0; padding:0 14px; display:inline-block; background:white; transform:translateY(-15px);}
.direccion_container .flex {display:flex; flex-wrap:wrap;}
.direccion_container .col {width:50%; padding:0 1.5%;}
.direccion_container .row {width:100%; padding:0 1.5%;}



/*********************/
/*  STEP 2 (metodos) */
/*********************/		  
.contenedor_comprar input[type="radio"] {width:auto; height:18px; margin:0 5px 0 0; padding:0; float:left;}
#step2 label {padding:0 0 5px 0; line-height:18px; }
.linea {height:1px; width:100%; background:#ccc; margin:15px 0;}
.brand {display:inline-block; margin:2px 0 0 0; height:49px;}



/*********************/
/*  STEP3 (tajetas)  */
/*********************/
.datos_tarjeta {display:flex; flex-wrap:wrap; margin:-15px 0 15px 0;}

.hidden.porcbu, .hidden.portarjeta {height:0;}
.porcbu, .portarjeta {height:auto;}

.cuotas {margin-bottom:15px;}
.cuotas h3 {font-size:19px; font-weight:normal; padding:0 0 15px 0; margin:0; color:#484848; line-height:1.2;}
.cuotas .cuota-container {border:1px solid white; padding:0 5px; margin:0 30px 15px 0; float:left; cursor:pointer;}
.cuotas .cuota-container.marcada {border:1px solid #484848;}
.cuotas input {margin:5px 0 0 0!important; cursor:pointer;}
.cuotas .ahora {width:80px; float:left;  margin-top:9px; margin-left:4px;}
.cuotas label {width:auto;  float:left; padding:0 5px 0 5px; line-height:1.5; cursor:pointer;}

.form-container .field-container:first-of-type {grid-area: name;}
.form-container .field-container:nth-of-type(2) {grid-area: number;}
.form-container .field-container:nth-of-type(3) {grid-area: expiration;}
.form-container .field-container:nth-of-type(4) {grid-area: security;}

.field-container {position:relative;}

.contenedor_comprar .datos_tarjeta input {height:40px; font-size:16px; text-transform: uppercase;}

.form-container {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: 91px 91px 90px;
    grid-template-areas: "name name""number number""expiration security";
    padding: 0 0 0 15px;
	width:50%;
}
.ccicon {
    height:30px;
    position: absolute;
    right: 5px;
    top: calc(50% - 21px);
    width: 48px;
}

/* CREDIT CARD IMAGE STYLING */
.preload * {-webkit-transition: none !important;    -moz-transition: none !important;    -ms-transition: none !important;    -o-transition: none !important;}

.container {width: 50%;    max-width: 400px;    max-height: 251px;    padding: 0 15px 0 0;}

#ccsingle {position: absolute;    right: 15px;    top: 20px;}
#ccsingle svg {width: 100px;    max-height: 60px;}

.creditcard svg#cardfront,
.creditcard svg#cardback {    width: 100%;    -webkit-box-shadow: 1px 5px 6px 0px black;    box-shadow: 1px 5px 6px 0px black;    border-radius: 22px;}

#generatecard{
    cursor: pointer;
    float: right;
    font-size: 12px;
    color: #fff;
    padding: 2px 4px;
    background-color: #909090;
    border-radius: 4px;
    cursor: pointer;
    float:right;
}

/* CHANGEABLE CARD ELEMENTS */
.creditcard .lightcolor,
.creditcard .darkcolor {    -webkit-transition: fill .5s;    transition: fill .5s;}
.creditcard .lightblue {    fill: #03A9F4;}
.creditcard .lightbluedark {    fill: #0288D1;}
.creditcard .red {    fill: #ef5350;}
.creditcard .reddark {    fill: #d32f2f;}
.creditcard .purple {    fill: #ab47bc;}
.creditcard .purpledark {    fill: #7b1fa2;}
.creditcard .cyan {    fill: #26c6da;}
.creditcard .cyandark {    fill: #0097a7;}
.creditcard .green {    fill: #66bb6a;}
.creditcard .greendark {    fill: #388e3c;}
.creditcard .lime {    fill: #d4e157;}
.creditcard .limedark {    fill: #afb42b;}
.creditcard .yellow {    fill: #ffeb3b;}
.creditcard .yellowdark {    fill: #f9a825;}
.creditcard .orange {    fill: #ff9800;}
.creditcard .orangedark {    fill: #ef6c00;}
.creditcard .grey {    fill: #bdbdbd;}
.creditcard .greydark {    fill: #616161;}

/* FRONT OF CARD */
#svgname {    text-transform: uppercase;}
#cardfront .st2 {    fill: #FFFFFF;}
#cardfront .st3 {    font-family: 'Source Code Pro', monospace;    font-weight: 600;}
#cardfront .st4 {    font-size: 54.7817px;}
#cardfront .st5 {    font-family: 'Source Code Pro', monospace;    font-weight: 400;}
#cardfront .st6 {    font-size: 33.1112px;}
#cardfront .st7 {    opacity: 0.6;    fill: #FFFFFF;}
#cardfront .st8 {    font-size: 24px;}
#cardfront .st9 {    font-size: 36.5498px;}
#cardfront .st10 {    font-family: 'Source Code Pro', monospace;    font-weight: 300;}
#cardfront .st11 {    font-size: 16.1716px;}
#cardfront .st12 {    fill: #4C4C4C;}

/* BACK OF CARD */
#cardback .st0 {    fill: none;    stroke: #0F0F0F;    stroke-miterlimit: 10;}
#cardback .st2 {    fill: #111111;}
#cardback .st3 {    fill: #F2F2F2;}
#cardback .st4 {    fill: #D8D2DB;}
#cardback .st5 {    fill: #C4C4C4;}
#cardback .st6 {    font-family: 'Source Code Pro', monospace;    font-weight: 400;}
#cardback .st7 {    font-size: 27px;}
#cardback .st8 {    opacity: 0.6;}
#cardback .st9 {    fill: #FFFFFF;}
#cardback .st10 {    font-size: 19px;}
#cardback .st11 {    fill: #EAEAEA;}
#cardback .st12 {    font-family: 'Rock Salt', cursive;}
#cardback .st13 {    font-size: 37.769px;}

/* FLIP ANIMATION */
.container {    perspective: 1000px;}

.creditcard {
    width: 100%;
    max-width: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
}

.creditcard .front,
.creditcard .back {
    position: absolute;
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
}

.creditcard .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}




/*********************/
/*  STEP4 (resumen)  */
/*********************/
.bloque {padding-bottom:8px; margin-bottom:7px; border-bottom:1px solid #ccc; }
.bloque p {font-size:13px; line-height:1.2; margin:0; padding:0;}
#check {width:auto; float:left; height:15px; margin:5px 0 0 0; width:10%;}
.check_text {font-size:12px; color:#8e8e8e;float:left; width:90%; margin-bottom:15px;}

#pagar {background: #f05a22; border:none; color:white; font-weight:bold; padding:9px 15px; height:auto; font-size:14px; font-family:"Trebuchet MS",Verdana; cursor:pointer; transition:all 0.5s ease-in-out;}
#pagar:hover {background:#ed1c24;}

#resumen_area {float:left;font-size:13px; line-height:1.2; margin:0; padding:0;}



/*********************/
/*       EXITO       */
/*********************/
.contenedor_exito p {font-size:15px; margin:0; padding:0 0 15px 0; line-height:1.3;}
.contenedor_exito h2 img {display:inline-block; margin:0 8px -8px 0;}
.contenedor_exito .cuadro_licencia {margin:0 0 0 0; border:2px solid #ed1c24; color:#ed1c24; font-family:Consolas; padding:5px 15px; display:inline-block; font-size:24px; float:left;}
.copy {font-style:italic; line-height:16px; font-size:13px; cursor:pointer; display:inline-block; float:left; margin:10px 0 0 10px; text-decoration:underline;}
.copy img {float:left; margin:0 5px 0 0;}
.boton_registrar {background: #EC1C24; padding:5px 15px; margin:0 auto; display:inline-block; text-decoration:none;
box-shadow: 2px 2px 0 0 #980A0B;
color: white;
border: none;
cursor: pointer;
font-weight: bold;
text-align: center;
text-shadow: none;
font-size: 14px;
font-family: 'Trebuchet MS';}


/*********************/
/*       FOOTER       */
/*********************/
#footer {background:#202020; font-family:Trebuchet MS;}
#footer .footer-container {width:90%; max-width:970px; margin:0 auto; padding:0 0 30px 0;}

#footer .footer-tels {text-align:center; color:#ccc; font-size:12px; padding:30px 0 15px 0; margin:0 auto; width:80%;}
#footer .footer-tels ul {padding:0; margin:0; text-align:center;}
#footer .footer-tels ul li {display:inline-block; line-height:21px;}
#footer .footer-tels ul li.sep {padding:0 6px;}

#footer .footer-izq {float:left; text-decoration:none; color:#9E9EA2; padding:4px 0 0 30px; margin:0; }
#footer .footer-izq a{font-size:11px; text-decoration:none; color:#9E9EA2;}
#footer .footer-izq a:hover {color:white;}

#footer .footer-der {float:right; padding-right:30px;}
#footer .footer-der a {display:inline-block; margin:0 0 0 5px;}
#footer .footer-der a:hover {opacity:0.75;}

#footer .copyright {clear:both; margin:0 auto 0 auto; font-size:11px; padding-top:15px; color:#9E9EA2; width:100%; text-align:center;}
#footer .copyright  a {font-size:11px; text-decoration:none; color:#9E9EA2;}


@media (max-width:1023px) {
	#contenedor {width:770px;}
}

@media (max-width:815px) {
	#contenedor {width:482px;}
	
	#header .logo {width:100%; padding:0;}
	#header .secure {width:100%; padding:15px 0 0 0;}
	#header .secure img {float:none;}
	
	.brand {height:44px;}
	
	.container {margin:0 auto; height:251px; width:100%; padding:0;}
	.form-container {width:100%; padding:0; margin:30px auto 0 auto;}
	
	#footer .footer-izq {float:none; text-decoration:none; color:#9E9EA2; padding:0 0 0 0px; margin:0 auto; text-align:center;}
	#footer .footer-der {float:none; padding:15px 0 0 0px;  margin:0 auto;  text-align:center;}
	
}

@media (max-width:525px) {
	#contenedor {width:322px;}
	
	#volver {float:none;}
	
	.container {height:200px;}
	
	.form-container {grid-template-rows:75px 75px 75px;}
	
	.error_pago, .error_datos {margin:5px auto;}
	
	h2 {font-size:21px;}
	
	label {font-size:13px;}
	
	#header .logo img {max-width:100%;}
	
	table tr td p {font-size:12px!important;}
}

@media (max-width:355px) {
	#contenedor {width:100%;}
}