/*FINALIZAR COMPRA*/

.resumenDePago{
    position: relative;
}

.finalizarCompra{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

/******************/

/*MIS DIRECCIONES*/
.cardDireccion{
    cursor: pointer;
}

.cardDireccion:hover{
	background-color: green;
	border-color:green!important;
	color: white!important;
}

.direccionSeleccionadaEnvio{
	background-color: green;
	border-color:green!important;
	color: white!important;
}

.cardAgregarDireccion:hover{
	cursor: pointer;
	background-color: green;
	border-color:green!important;
	color: white!important;
}

/****************/

/*METODOS DE PAGO*/
.formaPago {
	
	font-size: 1.2em;
	cursor: pointer;
    border: 0.5px solid transparent;
    border-radius: 5px 5px 5px 5px;
    padding: 25px;
}

.oxxoPago{
	width: 50px;
	max-height: auto;
}

.txtMastercard{
	color:#ff5f00;
}

.txtVisa{
	color:#1a1f71;
}

.txtAmex{
	color:#6cc4ee;
}

.txtOxxo{
	color:#e23d24;
}

.txtPaypal{
	color: #3b7bbf;
}

.txtTransfer{
	color:#7faaef;
}

.formaPago:hover{
    border: 0.5px solid #28a745;
    border-radius: 5px 5px 5px 5px;
	background-color: #28a745;
	color:white!important;
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    padding: 25px;
}

.formaPagoSeleccionada{
	border: 0.5px solid #28a745;
    border-radius: 5px 5px 5px 5px;
	background-color: #28a745;
	color:white!important;
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    padding: 25px;
}

/***********************************/



/**RESUMEN DE PAGO**/

#botonesMovilesCheckout{
    -webkit-box-shadow: 0px -4px 9px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -4px 9px -4px rgba(0,0,0,0.75);
    box-shadow: 0px -4px 9px -4px rgba(0,0,0,0.75);
}

#botonesMovilesCheckout button{
    font-size: 1.5rem;
}

#botonesMovilesCheckout .total{
    background-color: #FFF;
    border-color: #F0F0F0;
}

#botonesMovilesCheckout .total button{
    border-radius: 0!important;
    border-color: #FFF;
    text-align: center!important;
    padding: 8px!important;
    width: 100%;
    font-size: 1.3rem!important;
}

#botonesMovilesCheckout .confirmar{
    background-color: #28a745;
    padding:0;
}

#botonesMovilesCheckout .confirmar a{
    padding: 10px!important;
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
}

/***********************/



/**********************************/
/**********METODO DE PAGO PARA SELECCIONAR*****/
/**********************************/

.metodosPago input[type="radio"] {
	display: none;
}

.metodosPago label{
	color: #727272;
	/*background: rgba(0,0,0,0.1);*/
	padding: 5px 15px 5px 51px;
	display: inline-block;
	position: relative;
	font-size: 1em;
	border-radius: 10px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.metodosPago label:hover{
	background: rgba(248, 117, 112, 0.2);
}

.metodosPago label:before{
	content: "";
	width: 17px;
	height: 17px;
	display: inline-block;
	background: none;
	border: 3px solid #727272;
	border-radius: 50%;
	position: absolute;
	left: 17px;
	top:10px;
}

.metodosPago input[type="radio"]:checked + label{
	padding: 5px 15px;
	color: white;
	background-color:#FF5D60;
	border-radius: 2px;
}

.metodosPago input[type="radio"]:checked + label:before{
	display: none;
}

.metodosPago button{
	background-color: #FF5D60;
}

.iconPagoOxxo{
  font-size: 40px;
  color: #595959;
}
/************************************/

/*******Variables STRIPE*******/
  
.result-message {
  
    line-height: 22px;
  
    font-size: 16px;
  
  }
  
  .result-message a {
  
    color: rgb(89, 111, 214);
  
    font-weight: 600;
  
    text-decoration: none;
  
  }
  
  .hidden {
  
    display: none;
  
  }
  
  #card-error {
  
    color: rgb(105, 115, 134);
  
    text-align: left;
  
    font-size: 13px;
  
    line-height: 17px;
  
    margin-top: 12px;
  
  }
  
  #card-element {
  
    border-radius: 4px 4px 0 0 ;
  
    padding: 12px;
  
    border: 1px solid rgba(50, 50, 93, 0.1);
  
    height: 44px;
  
    width: 100%;
  
    background: white;
  
  }
  
  #payment-request-button {
  
    margin-bottom: 32px;
  
  }
  
  /* Buttons and links */
  
  #payment-form button {
  
    background: #FF5D60;
  
    color: #ffffff;
  
    font-family: Montserrat, sans-serif;
  
    border-radius: 0 0 4px 4px;
  
    border: 0;
  
    padding: 12px 16px;
  
    font-size: 16px;
  
    font-weight: 600;
  
    cursor: pointer;
  
    display: block;
  
    transition: all 0.2s ease;
  
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  
    width: 100%;
  
  }
  
  #payment-form button:hover {
  
    filter: contrast(115%);
  
  }
  
  #payment-form button:disabled {
  
    opacity: 0.5;
  
    cursor: default;
  
  }
  
  /* spinner/processing state, errors */
  
  .spinner,
  
  .spinner:before,
  
  .spinner:after {
  
    border-radius: 50%;
  
  }
  
  .spinner {
  
    color: #ffffff;
  
    font-size: 22px;
  
    text-indent: -99999px;
  
    margin: 0px auto;
  
    position: relative;
  
    width: 20px;
  
    height: 20px;
  
    box-shadow: inset 0 0 0 2px;
  
    -webkit-transform: translateZ(0);
  
    -ms-transform: translateZ(0);
  
    transform: translateZ(0);
  
  }
  
  .spinner:before,
  
  .spinner:after {
  
    position: absolute;
  
    content: "";
  
  }
  
  .spinner:before {
  
    width: 10.4px;
  
    height: 20.4px;
  
    background: #eb4245;
  
    border-radius: 20.4px 0 0 20.4px;
  
    top: -0.2px;
  
    left: -0.2px;
  
    -webkit-transform-origin: 10.4px 10.2px;
  
    transform-origin: 10.4px 10.2px;
  
    -webkit-animation: loading 2s infinite ease 1.5s;
  
    animation: loading 2s infinite ease 1.5s;
  
  }
  
  .spinner:after {
  
    width: 10.4px;
  
    height: 10.2px;
  
    background: #eb4245;
  
    border-radius: 0 10.2px 10.2px 0;
  
    top: -0.1px;
  
    left: 10.2px;
  
    -webkit-transform-origin: 0px 10.2px;
  
    transform-origin: 0px 10.2px;
  
    -webkit-animation: loading 2s infinite ease;
  
    animation: loading 2s infinite ease;
  
  }
  
  @-webkit-keyframes loading {
  
    0% {
  
      -webkit-transform: rotate(0deg);
  
      transform: rotate(0deg);
  
    }
  
    100% {
  
      -webkit-transform: rotate(360deg);
  
      transform: rotate(360deg);
  
    }
  
  }
  
  @keyframes loading {
  
    0% {
  
      -webkit-transform: rotate(0deg);
  
      transform: rotate(0deg);
  
    }
  
    100% {
  
      -webkit-transform: rotate(360deg);
  
      transform: rotate(360deg);
  
    }
  
  }

/*******************************************/


/*ESCRITORIO GRANDE XL*/
@media (min-width: 1200px){
	

}

/*ESCRITORIO MEDIANO O TABLET HORIZONTAL LG*/
@media (max-width: 1199px) and (min-width: 992px){
	

}


/*ESCRITORIO PEQUEÑO O TABLET VERTICAL MD*/
@media(max-width: 991px) and (min-width: 768px){
    
    .formaPago {
		
		font-size: 1em;
		cursor: pointer;
		padding: 25px 10px;

	}

	.formaPago:hover{
		border: 0.5px solid #28a745;
		border-radius: 5px 5px 5px 5px;
		background-color: #28a745;
		color:white!important;
		transform: scale(1.05);
		-webkit-transform: scale(1.05);
		padding: 25px;
	}

}

/*TELÉFONO CELULAR SM*/
@media(max-width: 767px) and (min-width: 576px){
	
	/*ESTILOS DE LOS BOTONES DE PAGO*/

	.formaPago {
		
		font-size: 1em;
		cursor: pointer;
		padding: 25px 10px;

	}

	.formaPago:hover{
		border: 0.5px solid #28a745;
		border-radius: 5px 5px 5px 5px;
		background-color: #28a745;
		color:white!important;
		transform: scale(1.05);
		-webkit-transform: scale(1.05);
		padding: 25px;
	}

	.oxxoPago{
		width: 50px;
		max-height: auto;
	}

	#flotante{
		color:#FFF;
		background: #000;
		height: 50px;
	}

}

/*TELÉFONO CELULAR XS*/
@media (max-width: 575px){
	
	/*ESTILOS DE LOS BOTONES DE PAGO*/

	.formaPago {
		
		font-size: 1em;
		cursor: pointer;
		padding: 25px 10px;

	}

	.formaPago:hover{
		border: 0.5px solid #28a745;
		border-radius: 5px 5px 5px 5px;
		background-color: #28a745;
		color:white!important;
		transform: scale(1.05);
		-webkit-transform: scale(1.05);
		padding: 25px;
	}

	.oxxoPago{
		width: 40px;
		max-height: auto;
	}

	#flotante{
		color:#FFF;
		background: #000;
		height: 50px;
	}

}