body {background:url('https://elbibliote.com/includes/images/bg_pattern.png') repeat #f3f3f3; margin:0; padding:0; width:100%; font-family:"Trebuchet MS",Verdana; color:#484848;}

img {max-width:100%;}

body * {box-sizing:border-box;}

#page {width:970px; min-height:600px; background-color:#FFFFFF; margin:0 auto; padding:0 0 120px 0;}

#header {background:trasnparent; border-bottom:10px solid #ed1c24; box-shadow:0px 4px 8px rgba(0,0,0,0.4); position:relative;}
#header .contenedor_header {width:970px; display:flex; flex-wrap:wrap; margin:0 auto; justify-content:space-between;}
#header .logo {width:50%; display:block; padding-top:10px;}
#header .logo img {max-width:255px; display:block;}
#header .secure {width:20%; display:block; padding:5px 0 5px 0;}
#header .secure img {float:right; display:block;}
#header .servicio {width:22%;}
#header .servicio img {float:right; display:block;}

#volver {float:right; font-size:14px; text-decoration:none; color:#ed1c24;}
#volver:hover {text-decoration:underline;}
	
.contenedor_comprar { padding:20px 3% 0 3%;}
.contenedor_comprar span {display:inline-block;}

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

.estas_comprando {background:#f0f0f0; padding:15px; width:220px; margin:0 0 30px 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; display:block;}
.estas_comprando span {font-size:12px; line-height:14px;}

h2 {font-size: 24px; font-weight:normal; padding:0 0 30px 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;
}

.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 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;}

.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;}
#resumen_area:after {content:"-";}


/*********************/
/*       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:7px 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) {
	#page {width:770px;}
	#header .contenedor_header {width:770px;}
}

@media (max-width:815px) {
	#page {width:482px;}
	#header .contenedor_header  {width:482px;}
	
	#header .logo {width:100%; padding:5px 0;}
	#header .logo img {max-width:255px; margin:0 auto;}
	#header .secure {width:100%; padding:10px 0 0 0;}
	#header .secure img {float:none; margin:0 auto;}
	#header .servicio {width:100%; padding:0 0;}
	#header .servicio img {max-width:150px; float:none; margin:0 auto;}
	
	.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) {
	#page {width:94%;}
	#header .contenedor_header {width:94%;}
	
	#header .logo {width:100%; padding:5px 0;}
	#header .logo img {max-width:255px; margin:0 auto;}
	#header .secure {width:100%; padding:10px 0;}
	#header .secure img {float:none; margin:0 auto;}
	
	.estas_comprando {margin:30px auto 30px auto; text-align:center;}
	.estas_comprando img {float:none; margin:0 auto 5px auto;}
	
	.cont_area span {width:10%;}
	.cont_area input {width:80%;}

	
	.container {height:55vw;}
	
	.form-container {grid-template-rows:75px 75px 75px;}
	
	.error_pago, .error_datos {margin:5px auto;}
	
	h2 {font-size:21px;}
	
	label {font-size:13px;}
	
	table tr td p {font-size:12px!important;}
}