@font-face {
	font-family: 'SuraSans-Ligera';
	src: url('../fonts/SuraSans-Ligera.otf');
}

@font-face {
	font-family: 'SuraSans-Negrita';
	src: url('../fonts/SuraSans-Negrita.otf');
}

@font-face {
	font-family: 'SuraSans-Regular';
	src: url('../fonts/SuraSans-Regular.otf');
}

#seccion-pagos { font-family: 'SuraSans-Regular', sans-serif; color: #53565A; position: relative; /** height: 100vh; **/}
#seccion-pagos h1, #seccion-pagos h2, #seccion-pagos h3, #seccion-pagos h4, #seccion-pagos h5, #seccion-pagos h6 { font-family: 'SuraSans-Negrita', sans-serif; font-weight: 700;}

#seccion-pagos .content .content-payment h5 { color: #0033A0;}
#seccion-pagos .content .content-payment .widget-title h4 {font-family: 'SuraSans-Regular'; color: #0333a0;}
#seccion-pagos .content .content-payment .pay-box { text-align: center; padding: 0 20px;}
#seccion-pagos .content .content-payment .pay-box img { width: 45px;}
#seccion-pagos .content .content-payment .pay-box p { line-height: normal;}
#seccion-pagos .content .content-payment .pay-box strong { font-family: 'SuraSans-Negrita';}
#seccion-pagos .content .content-payment .pay-box a.btn { background: #ffffff; font-family: 'SuraSans-Negrita'; color: #0333a0; border: 2px solid #0333a0 !important;}
#seccion-pagos .content .content-payment .pay-box a.btn:hover { background: #0033A0; color: #FFFFFF;}
#seccion-pagos .content .content-payment .pay-box:after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -60px; width: 1px; height: 59px; background: #E0E0E0;}
#seccion-pagos .content .content-payment .col-md-12.pay-box:after { display: none;}
/** .content .content-payment .pay-box:last-child:after { display: none;} **/


/** ====== Estos estilos no serán aún usados por anotación del P.O. De momento solo se tomarán los .content... ====== **/
#seccion-pagos .service-section { background: #ffffff;}
#seccion-pagos .service-section { padding-top: 3rem; padding-bottom: 3rem;}
#seccion-pagos .service-section [class*="col-"] { padding: 0 5px;}
#seccion-pagos .service-section .service-title h2 { color: #00AEC7;}
#seccion-pagos .service-section .service-data small { font-family: 'SuraSans-Negrita';}
#seccion-pagos .service-section .service-form button.btn-primary { background: #00A3E0; font-family: 'SuraSans-Regular'; color: #FFFFFF; border: 2px solid #00A3E0;}
#seccion-pagos .service-section .service-form button.btn-primary:hover { background: #0033A0; color: #FFFFFF; border: 2px solid #0033A0;}
#seccion-pagos .service-section .service-form button.btn-outline-primary { font-family: 'SuraSans-Regular'; color: #00A3E0; border: 2px solid #00A3E0;}
#seccion-pagos .service-section .service-form button.btn-outline-primary:hover { background: #00A3E0; color: #FFFFFF; border: 2px solid #00A3E0;}
#seccion-pagos .service-section .card { width: 100%; cursor: pointer;}
#seccion-pagos .service-section .card:hover, .document-section .card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);}
#seccion-pagos .service-section .card .card-body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center;}
#seccion-pagos .service-section .card .card-body i { font-size: 40px;}
#seccion-pagos .service-section .card .card-img i { display: block; width: 45px; font-size: 40px; text-align: center; color: #0033A0; margin: 36px auto 0;}
#seccion-pagos .service-section .card h6.card-subtitle { font-family: 'SuraSans-Regular'; color: #8189A9;}
#seccion-pagos .service-section .custom-file-input ~ .custom-file-label::after { content: "Examinar";}
#seccion-pagos .service-section .custom-file { width: 82%; float: right;}
#seccion-pagos .service-section .custom-file input[type="file"] { cursor: pointer;}
#seccion-pagos .service-section .custom-file-label::after, .service-section .form-submit button { background: #0033a0; color: #ffffff;}
#seccion-pagos .service-section .service-title h4 { color: #0033a0;}
#seccion-pagos .service-section .form-submit button { font-family: 'SuraSans-Negrita'; border: 2px solid #0033a0;}
#seccion-pagos .service-section .form-submit button:hover { background: #ffffff; color: #0033a0;}
#seccion-pagos .service-section .input-ic { margin-right: 10px; font-size: 39px; color: #aaaaaa;}

/** ===== MODAL STYLES ===== **/
#seccion-pagos #confirmation .modal-header { background: #0033A0;}
#seccion-pagos #confirmation .modal-header .modal-title { color: #ffffff;}
#seccion-pagos #confirmation .modal-header .close span { position: relative; top: -4px; text-shadow: 0px 2px 0px #001225; color: #ffffff;}
#seccion-pagos #confirmation .modal-body ul.step-1 li span { position: relative; top: -2px;}
#seccion-pagos #confirmation .modal-body ul.step-1 { list-style-image: url(https://www.epssura.com/templates/epsresponsive/images/check-item.svg); padding-left: 23px;}
#seccion-pagos #confirmation .modal-footer button { background: #0033A0; font-family: 'SuraSans-Negrita'; color: #FFFFFF; border: 2px solid #0033A0;}
#seccion-pagos #confirmation .modal-footer button:hover { background: #FFFFFF; color: #0033A0;}

@media screen and (max-width: 1024px) {
    #seccion-pagos .content .content-payment .pay-box { padding: 0 25px;}

    #seccion-pagos .service-section .card { margin-bottom: 1rem;}
}

@media screen and (max-width: 768px) {
    #seccion-pagos .content .content-payment .pay-box { padding: 0 15px;}
}

@media (max-width: 575.98px) {
    #seccion-pagos .content .content-payment .pay-box { padding: 0 45px;}
    #seccion-pagos .content .content-payment .pay-box:after { display: none;}
    #seccion-pagos .content .content-payment h5.mt-sm { margin-top: 2rem;}
}