@charset "utf-8";

@media screen and (max-width:600px){
    .modal_exito,.modal_agregado,.modal_login {display: none;position: fixed;z-index: 999999999999999999999999999999999999999999 !important;bottom: 15px;width: 90%;height: auto;margin:10px 5%;box-shadow:3px 3px 3px 3px rgba(50,50,50,0.15);padding:2.5px 0px}

    .modal_formas_pago {display: none;position: fixed;z-index: 999999999999999999999999999999999999999999 !important;bottom: 15px;width: 90%;height: auto;margin:10px 5%;box-shadow:3px 3px 3px 3px rgba(50,50,50,0.15);padding:2.5px 0px}
    
    .modal_formas_pago {display: none;position: fixed;z-index: 999999999999999999999999999999999999999999 !important;bottom: 15px;width: 90%;height: auto;margin:10px 5%;box-shadow:3px 3px 3px 3px rgba(50,50,50,0.15);padding:2.5px 0px;border:5px solid rgba(232,78,14,1.00);}

    
    .modal_finalizar {display: none !important;position: fixed;z-index: 999999999999999999999999999999999999999999 !important;bottom: 15px;width: 90%;height: auto;margin:10px 5%;box-shadow:3px 3px 3px 3px rgba(50,50,50,0.15);padding:2.5px 0px}

    .modal_exito{background-color:rgba(106, 176, 76,1.0);height:60px;color:rgba(255,255,255,1.00)}

    .modal_finalizar{background-color:rgba(106, 176, 76,1.0);height:50px;color:rgba(255,255,255,1.00);display: none !important}

    .modal_agregado{background-color:rgba(240, 147, 43,1.0);height:60px;color:rgba(255,255,255,1.00)}

    .modal_login{background-color:rgba(225, 112, 85,1.0);height:60px;color:rgba(255,255,255,1.00)}    

    .modal_formas_pago{background-color:rgba(251,251,251,1.00);height:auto;color:rgba(30,30,30,1.00)}    

    /* Modal Content */
    .modal-content {position: relative;float: left;margin: auto;padding:0px;width: 100%;height: auto;-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s}

    .modal-content-finalizar {position: relative;float: left;margin: auto;padding:0px;width: 100%;height: auto;-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s}

    .modal-content-formas-pago {position: relative;float: left;margin: auto;padding:0px;width: 100%;height: auto !important;-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s;}

    /* Add Animation */
    @-webkit-keyframes animatetop { 
        from {
            bottom:-300px; opacity:0} 
        to {
            bottom:0px; opacity:1
        } 
        }

    @keyframes animatetop {from {bottom:-300px; opacity:0}to {bottom:0; opacity:1} }

    .modal-content-formas-pago {position: relative;float: left;margin: auto;padding:0px;width: 100%;height: auto !important;-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s;}

    /* The Close Button */
    .close {color: black;float: right;font-size: 28px;font-weight: bold;}

    .close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}

    .modal-header {padding: 2px 16px;}

    .modal-body {padding: 2px 16px;}

    .p-modal {font-size:14px;width:100%;text-align: center;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:500;line-height: 25px}

    .p-modal-formas-pago {font-size:15px;line-height: 25px; width:100%;text-align: center;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:400;}

    .box-content-pago {width: 100%;height: auto;padding:10px 0px;position: relative;float: left;margin: 2.5px 0px;border-bottom: 1px solid rgba(77,77,77,0.50)}
    
    .box-content-pago:last-child {border-bottom: none !important}
    
    .img-modal-formas-pago {position: relative;width:40px;height: 40px;float: left;margin:0px 10px 5px 0px;}

    .h4-modal-formas-pago{font-size:25px;width:100%;text-align: center;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:700;margin:15px 0px 5px 0px;text-transform: uppercase}

    .closebtnModal {background-color:rgba(255,255,255,1.00);border:3px solid rgba(232,78,14,1.00);border-radius:50%;width:40px;height: 40px;position: absolute;right:-8px;top:-15px;cursor: pointer;font-size:20px;color:rgba(232,78,14,1.00);z-index: 999999999999999999999999999999999 !important}
    
    .closebtnModal:hover {background-color:rgba(232,78,14,1.00);color:#fff;border:2px solid #fff;}
    
    .p-modal-formas-pago {font-size:15px;line-height: 25px; width:100%;text-align: center;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:400;}

    .box-content-pago {width: 100%;height: auto;padding:8px 0px;position: relative;float: left;margin: 0px;border-bottom: 1px solid rgba(77,77,77,0.50)}
    
    .box-content-pago:last-child {border-bottom: none !important}
    
    .img-modal-formas-pago {position: relative;width:40px;height: 40px;float: left;margin:0px 10px 5px 0px;display: none}

    .h5-modal-formas-pago {font-size:16px;width:auto;text-align: left;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:400;margin:5px 0px}

    .p-2-modal-formas-pago {font-size:13px;line-height: 22px;width:100%;text-align: left;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:400;color:rgba(102,102,102,1.00);margin:0px}

}

@media screen and (min-width:601px){
    .modal_exito,.modal_agregado,.modal_login {display: none;position: fixed;z-index: 999999999999999999999999999999999999999999 !important;left: 50%;bottom: 15px;width: 400px;height: 60px;margin-left:-200px;box-shadow:3px 3px 3px 3px rgba(50,50,50,0.15);}

    .modal_formas_pago {display: none;position: fixed;z-index: 999999999999999999999999999999999999999999 !important;left: 50%;bottom: 15px;width: 600px;height: auto;margin-left:-300px;box-shadow:3px 3px 3px 3px rgba(50,50,50,0.15);border:5px solid rgba(232,78,14,1.00);border-radius:6px;padding:10px 0px}

    .modal_finalizar {display: none;position: fixed;z-index: 999999999999999999999999999999999999999999 !important;right: 5%;bottom: 15px;width:280px;height:70px;}

    .modal_exito{background-color:rgba(106, 176, 76,1.0);height:50px;color:rgba(255,255,255,1.00)}

    .modal_finalizar{background-color:transparent;height:45px;color:rgba(255,255,255,1.00)}

    .modal_agregado{background-color:rgba(240, 147, 43,1.0);height:50px;color:rgba(255,255,255,1.00)}

    .modal_login{background-color:rgba(225, 112, 85,1.0);height:50px;color:rgba(255,255,255,1.00)}    

    .modal_formas_pago{background-color:rgba(251,251,251,1.00);height:auto;color:rgba(30,30,30,1.00)}    

    /* Modal Content */
    .modal-content {position: relative;float: left;margin: auto;padding:0px;width: 100%;height: auto;-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s}

    .modal-content-finalizar {position: relative;float: left;margin: auto;padding:0px;width: 100%;height: auto;-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s}

    .modal-content-formas-pago {position: relative;float: left;margin: auto;padding:0px;width: 100%;height: auto !important;-webkit-animation-name: animatetop;-webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s;}

    /* Add Animation */
    @-webkit-keyframes animatetop { 
        from {
            bottom:-300px; opacity:0

        } 
        to {
            bottom:0px; opacity:1
        } 

        }

    @keyframes animatetop { 
        from {
            bottom:-300px; opacity:0

        } 
        to {
            bottom:0px; opacity:1
        } 

        }

    /* The Close Button */
    .close {color: black;float: right;font-size: 28px;font-weight: bold;}

    .close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}

    .modal-body {padding: 2px 16px;}

    .p-modal {font-size:14px;width:100%;text-align: center;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:500;}

    .h3-modal a{color:rgba(25,25,25,1);font-family: 'Rubik', sans-serif;font-weight:600;text-align:center;border:none; background:#ff3232;background: linear-gradient(to left, transparent 50%, rgba(0,0,0,1.00) 50%);background-size: 200% 100%;background-position:right bottom;margin-left:10px;transition:all 1s ease;cursor: pointer;border-radius:25px;box-shadow:3px 3px 3px 3px rgba(50,50,50,0.15);}

    .h3-modal a{height: auto;width: 280px;position: absolute;padding:10px 0px;font-size: 18px;float: left;margin:-20px 0px 0px 0px;text-align:center}	

    .h3-modal a:hover {background-position:left bottom;color:#fff;}

    .h4-modal-formas-pago{font-size:25px;width:100%;text-align: center;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:700;margin:15px 0px 5px 0px;text-transform: uppercase}

    .closebtnModal {background-color:rgba(255,255,255,1.00);border:3px solid rgba(232,78,14,1.00);border-radius:50%;width:40px;height: 40px;position: absolute;right:-30px;top:-30px;cursor: pointer;font-size:20px;color:rgba(232,78,14,1.00)}
    
    .closebtnModal:hover {background-color:rgba(232,78,14,1.00);color:#fff;border:2px solid #fff;}
    
    .p-modal-formas-pago {font-size:15px;line-height: 25px; width:100%;text-align: center;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:400;}

    .box-content-pago {width: 100%;height: auto;padding:10px 0px;position: relative;float: left;margin: 0px;border-bottom: 1px solid rgba(77,77,77,0.50)}
    
    .box-content-pago:last-child {border-bottom: none !important}
    
    .img-modal-formas-pago {position: relative;width:30px;height: 30px;float: left;margin:0px 10px 5px 0px;}

    .h5-modal-formas-pago {font-size:15px;width:auto;text-align: left;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:400;margin:8px 0px 0px 0px}

    .p-2-modal-formas-pago {font-size:12px;line-height: 25px;width:100%;text-align: left;position:relative;float:left;font-family: 'Montserrat', sans-serif;font-weight:400;color:rgba(102,102,102,1.00);margin:0px}

}