@charset "utf-8";
/* CSS Document */

/* LOGIN 
********************************************************/
.page-login .head {margin: 5% auto 0}
.login {box-sizing: border-box; background-color: rgba(255, 255, 255, 0.35); margin: 2% auto 5%; background-image: url('/resources/imgs/dm-luna.png'); background-repeat: no-repeat; background-position: 50% 15px; background-size: 100%}
.login input {background-repeat: no-repeat; background-position: 9px 6px; padding-left: 32px}
.login .input-user {background-image: url('/resources/imgs/icon-user.png')}
.login .input-pass {background-image: url('/resources/imgs/icon-pass.png')}
.login .btn {min-width: 50px; background-color: #337AB7; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; transition: .2s; border-radius:4px; padding: 8px 12px; width: 100%; font-size:13px !important} /* old width:100%*/
.login .btn:hover {-ms-transform: scale(1.03); -moz-transform: scale(1.03); -webkit-transform: scale(1.03);transform: scale(1.03); -moz-box-shadow: 0 2px 5px 2px rgba(255, 255, 255, 0.35); -wekit-box-shadow: 0 2px 5px 2px rgba(255, 255, 255, 0.35); box-shadow: 0 2px 5px 2px rgba(255, 255, 255, 0.35)}
.login .extra {padding: 5px 0}
.login .extra,
.login .extra * {font-size: 11px; font-weight: bold}
.login .extra span {padding: 0 4%}
.login input {font-size: 14px}
.login button {font-size: 12px}
.login .btn,
.login .extra a:hover  {color: #FFF}
.login .extra,
.login .extra * {color: #3c4b53}
.login > div:nth-of-type(3) {text-align:center}

header .container,
section .container {padding:0}
section a {color:#cb4a4a}
section a:focus, section a:hover {color: #e2000c}

/* LG ******************************************/
@media (min-width: 1440px) {
.login {width: 30%; padding: 80px 50px 20px}
}
@media (max-width: 1440px) {
.login {width: 35%; padding: 80px 50px 20px}
}
@media (min-width:1440px) and (min-height:850px) {
}

/* MD *******************************************/
@media (max-width: 1200px) {
.login {width: 40%; padding: 60px 5% 20px}
}

/* XS ********************************/
@media (max-width: 992px) {
.login {width: 50%; padding: 60px 5% 20px}
}
@media (max-width: 768px) {
.login {width: 60%}
}
@media (max-width: 481px) {
.login {width: 75%; padding: 60px 10px 20px}
.login .extra a {display: block}
.login .extra span {display: none}
	.login .btn {width:100%}
}
@media (max-width: 375px) {
}
@media (max-width: 320px) {
.login {width: 80%}
}

/* SECUNDARIA ********************************************************/
.page-sec .head {background-color:#000; background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.6); padding:34px 44px}
.page-sec .head .logo {width:80px; margin-right:30px}
.page-sec .head h1 {color:#fff; display:block; font-size:30px; margin:0; padding: 20px 0 0 0}
.page-sec .head .logo,
.page-sec .head h1 {float:left; font-weight: normal}
.page-sec .head h1 span {color:#A3A3A3; display:block; font-size:18px; font-weight: normal}
.page-sec .content {background-color:#fff; background-color:rgb(255, 255, 255);background-color:rgba(255, 255, 255, 0.8); padding:20px 40px}
.page-sec .content h2 {font-size:18px; font-weight:bold}
.page-sec .content .subtitulo {font-size:16px; font-weight: bold; margin: 0}
.page-sec .content .subtitulo .fa {margin-right: 8px}
.page-sec .content p {text-align: justify; font-size: 14px}
.page-sec .subtitulo.largo {width: 75%; padding-top: 0; font-size: 24px}
@media (max-width:767px) {
	.page-sec .head {text-align: center}
	.page-sec .head a,	
	.page-sec .head h1,
	.page-sec .subtitulo.largo {display:block; text-align: center; width:100%}
	.page-sec .subtitulo.largo {padding-top: 20px; clear: both}
	.page-sec .head .logo {float: none; margin: 0 auto}	
}
@media (max-width:481px) {}

/* OFICINAS ********************************************************/
.page-ofs .content p {padding-left: 30px}
.page-ofs .content i {font-size:14px; vertical-align:middle; display:inline-block; margin-left:-30px; width: 20px; padding-right: 27px; text-align: center}
.page-ofs .content h2 {margin-bottom:20px}
.page-ofs .content .of-1,
.page-ofs .content .of-2 {padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #BFBFBF}
.page-ofs .content .map-frame {padding:5px; background:#fff; margin-bottom:20px}
.page-ofs .content .of-2 .map-frame,
.page-ofs .content .of-3 .map-frame {margin-top:10px}
.page-ofs .ofs .info,
.page-ofs .ofs .map {padding-right: 0}
.page-ofs .ofs .info a {font-size:14px; display:inline-block; overflow: hidden; text-overflow: ellipsis; width:auto; vertical-align: text-bottom}

@media (max-width:1199px) {	
.page-ofs .content h2 {margin-top:10px}
.page-ofs .ofs .map {padding-left: 0}
}

/* FORMULARIO */
#page_form_datos {background:url(../../imgs/pasarela_dm/bg-datos.jpg) top left no-repeat fixed; background-size:100% 100%}
#page_form_datos .container {border-radius:0; padding:25px}
#page_form_datos .container-form {border-radius:10px; overflow:hidden; background:#fff}
#page_form_datos .well {-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none; margin-bottom:0}
#page_form_datos .alerts {font-size:13px; display:none}
#page_form_datos .alerts a {color:#c37510; text-decoration:underline}
#page_form_datos .alerts a:hover {text-decoration:none}
#page_form_datos fieldset {clear:both}
#page_form_datos .well {border:none}
#page_form_datos .input-group i {display:inline-block; width:24px; overflow:visible}
#page_form_datos .form-group .input-group {padding-right:0; float:left}
#page_form_datos .form-group .input-first {padding-right:20px}
#page_form_datos .form-group-first {margin-top:-15px}
#page_form_datos legend {font-size:16px; color:#00c6d7; border:0; border-top:1px solid #e0e6e6; padding:20px 0 15px 25px; text-transform:uppercase; text-align:center}
#page_form_datos .control-label {color:#a4aeb5; font-weight:normal; font-size:15px}
#page_form_datos #success_message {display:none}
#page_form_datos .form-button {margin-top:30px; text-align:center}
#page_form_datos .button-picture {vertical-align:text-bottom}
#page_form_datos .button-picture button {float:left; width:auto; border-radius:5px; transition:.1s; background-color:#a4aeb5; color:#fff; border:none}
#page_form_datos .button-picture button:hover {background-color:#00c6d7; color:#fff; border:0 solid #6d6d6d; -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); transform:scale(1.1)}
#page_form_datos .button-picture img {float:left; margin-right:10px; border:1px solid #D4D4D4; margin-bottom:0}
#page_form_datos .btn-warning {background-color:#91e500; border-color:#88bc18; border-color:#91e500; color:#648a22; font-size:15px; padding:10px 5%; transition:.2s}
#page_form_datos .btn-warning:hover {background-color:#91e500; border-color:#aadc3e; -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); transform:scale(1.1); color:#fff}
 @media (max-width:992px) {#page_form_datos legend {padding-left:0; padding-bottom:0}
#page_form_datos .form-group-first {margin-top:0}
#page_form_datos .form-group .input-first {padding-right:0; margin-bottom:10px}
#page_form_datos .vivienda .form-group {margin-top:0}}
@media (max-width:767px) {#page_form_datos .alerts {overflow:hidden; text-overflow:ellipsis}
#page_form_datos .alerts a {white-space:nowrap; overflow:hidden}}

.page-form .subtitulo {font-size:18px; font-weight: bold; margin: 0}
.page-form .btn {padding:10px 20px; font-size: 15px; margin: 10px 0}
.page-form .fa {display: inline-block; text-align:center; padding-right: 5px}
.page-form .btn .fa {font-size: 14px; text-align:left}
.page-form .subtitulo .fa {font-size: 14px; text-align:center}  
form .validar {width: 100%; padding-right: 15px}
form .validar .btn {font-size: 12px; padding: 8px 12px; width: 100%; margin: 0}

@media (max-width:768px) {
	form .col-sm-5 + .col-sm-5 {margin-top:5px}
}
@media (max-width:481px) {
	form .validar {padding-left:15px}
	form .validar .btn {margin-top:5px}
}

/* PASARELA  
******************************************************************************/
#divGastosAdmn {font-size:15px; color:#FF7C00; font-weight: bold}
#divTotalPagar {font-size:15px; color:#FF2F00; font-weight: bold}					
.page-pago label,
.page-pago .content p {font-size: 15px}
.page-pago .form-horizontal .control-label {padding-top:0}
.page-pago .check-text label {display:inline; padding-left: 5px}
.page-pago .check-text div {padding-bottom: 10px}
.page-sec.page-pago .content {padding: 30px 60px; background-color:#fff !important}
.page-pago .form-control.disabled, .form-control[disabled] {border-color: #cccccc}
.page-pago #divSeleccionFormaPago, 
.page-pago #divAceptarTerminos {padding:20px 0 20px; clear: both}
.page-pago .pago-detalle .row {text-align: justify}
.page-pago .btn-pagar .btn {width:25%}
.page-pago .btn-pagar .fa {font-size:17px}
.page-pago iframe {width:100%}
.page-pago .alert-danger {font-weight:normal; color: #fff; background-color: #d9534f}
.page-pago .datos .row {margin-bottom:5px}
.page-pago .datos {padding-bottom:15px}
.page-pago .datos * {font-size:15px}
.page-pago #divForma1 div {padding-bottom:1px}
.page-pago .danger {color:red !important; display:inline-block; padding-right:5px}
.page-pago #divSeleccionFormaPago p {margin-bottom:0}
.page-pago #divAceptarTerminos input {margin-right:5px}
.page-pago #chkAceptaTerminos + label,
.page-pago .terminos-text label {display:inline}
.page-pago #UpdatePanel1 .form-group {float:left; margin-bottom: 3px}
.page-pago #UpdatePanel1 .control-label {line-height: 35px}
.page-pago .naranja, .page-pago .rojo {text-transform: uppercase; font-size: 13px}
.page-pago .naranja {color:#FF7C00}
.page-pago .rojo  {color:#FF2F00}

.tabla-lineas td {padding:5px; font-size:15px}

@media (max-width:767px) {	
.page-sec.page-pago .content {padding: 20px}
.page-pago .btn-pagar .btn {width:50%}
}
@media (max-width:481px) {
.page-pago .precio {padding:15px}
/*.page-pago .precio * {text-align: center}*/
.page-pago .precio div div {width:100%}
.page-pago .pago-detalle .row {padding-top:20px}
.page-pago .head h1 {font-size:28px}
}

/* pasarela forzada en tabla */
.page-pago-tabla table {margin:0 0 20px; width: 100%}
.page-pago-tabla table table {margin-left:30px}
.page-pago-tabla table table tr {display:block; clear: both}
.page-pago-tabla table table tr td {display:inline-block; vertical-align: top; width: 50%; padding: 0 0 5px}
.page-pago-tabla table table tr > td:first-of-type {font-weight:bold; width: 30%}								
.page-pago-tabla #superior_pago_servicio span:first-of-type {background-color: #ffdd87; border: #ffce54; color: #8a6d3b; padding: 15px; margin-bottom: 20px; border-radius: 4px; display: block}
.page-pago-tabla #UpdatePanel1 > .nombre_paquete {padding:0 0 20px 20px}
.page-pago-tabla #UpdatePanel1 p {margin-bottom: 0}
.page-pago-tabla #UpdatePanel1 input[type="checkbox"] {display:inline-block; margin-right: 5px}
.page-pago-tabla #divAceptarTerminos {margin: 0; padding: 0}							
@media (max-width: 481px) {
.page-pago-tabla .content {padding:0 20px 0 0}
.page-pago-tabla table table {margin:0}	
.page-pago-tabla table table tr td {clear: both; padding: 0}
.page-pago-tabla table table tr td,
.page-pago-tabla table table tr td:first-of-type {width: 100%}	
.page-pago-tabla table table tr td + td {padding: 0 0 10px}
}

.animated { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease}
@-webkit-keyframes fadeInUp {  
	from { opacity: 0; -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0);}
	to { opacity: 1; -webkit-transform: none; transform: none; }
	}
@keyframes fadeInUp {  
	from { opacity: 0; -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0);}
	to { opacity: 1; -webkit-transform: none; transform: none; }
	}
.fadeInUp {-webkit-animation-name: fadeInUp; animation-name: fadeInUp}
									
@-webkit-keyframes fadeOutDown {  
	from { opacity: 1;	 }
	to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
	}
@keyframes fadeOutDown {  
	from {opacity: 1;}
	to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
	}
.fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; }
									
.formas-pago, .formas-pago .opciones {width: 100%; float: left}
.formas-pago .forma, .formas-pago .forma label {height:110px; text-align: center}
.formas-pago .forma {width:32%; margin-right:2%; float: left}
.formas-pago .forma label {border:1px solid #dde1e2; float:left; Text-align:center; padding:20px 5px; cursor:pointer; color:#2795ac; width: 100%; margin-bottom: -15px; background-color: #fafafa; transition:border 0.1s ease-in; overflow: hidden}
.formas-pago .forma:last-of-type {margin:0}
.formas-pago .forma span {text-transform:uppercase; font-size:11px}
.formas-pago .forma .fa {font-size:30px; margin-bottom:10px; line-height:30px}
.formas-pago .forma-credito .fa {font-size:25px}
.formas-pago .forma:hover label {border-color:#2795ac; color:#2795ac; background-color: #fff}	
.formas-pago .forma:after {font-family:"FontAwesome"; content:"\f00c"; border-radius:50%; background-color:#fff; color:#fff;width:2px; height:2px; overflow:hidden; margin:0 auto}	
.formas-pago .forma:after, .formas-pago .forma span, .formas-pago .forma .fa {display:block; clear:both; transition:all 0.25s}									
	
.formas-pago .forma.active {z-index: 1000}
.formas-pago .forma.active label {border-width:2px; background-color:transparent}	
.formas-pago .forma.active label, .formas-pago .forma.active:hover label {border-color:#8fb43d; color:#8fb43d}
.formas-pago .forma.active span {font-size:12px}
.formas-pago .forma.active .fa {font-size:40px}
.formas-pago .forma.active.forma-credito .fa {font-size:35px}
.formas-pago .forma.active.forma-efectivo label {padding-top: 15px}
.formas-pago .forma.active:after { background-color:#8fb43d; width:30px; height:30px; padding-top:5px}
	
.formas-pago .opciones {margin-top: 25px}
.formas-pago .opciones h6 {text-transform: uppercase; font-weight: boldx; font-size:12px; margin: 0; padding:15px 20px; background-color: #8fb43d; color: #fff}
.formas-pago .opciones hr {clear:both; float:none; margin: 0; padding: 20px 0}			
									
.formas-pago .opcion {border: 1px solid #8fb43d; float:left; display:none; width: 100%}
.formas-pago .opcion label {float:left; min-height:90px; margin: 0; width:100%; border-top: 1px solid #eee; font-weight: normal; text-align: center; padding: 20px 0}
.formas-pago .opcion label:hover {background-color: #eee; cursor:pointer}
.formas-pago .opcion label:first-of-type {border:0}	
.formas-pago .opcion input {width:17px; height: 17px; margin-right: 10px}	
.formas-pago .opcion img {text-align: center; height:35px; width: auto}
.formas-pago #divPagoOnlineSafetypay img,
.formas-pago #divPagoCashSafetypay img {height:50px}
.formas-pago .opcion, .formas-pago .opcion * {vertical-align: middle}
									
.formas-pago .opcion-tarjeta label {width:25%}									
.formas-pago .opcion-banca label,
.formas-pago .opcion-efectivo label {width:50%}

@media (max-width: 1199px) {
	.formas-pago .forma, .formas-pago .forma label {height:130px}
	}
@media (max-width: 767px) {
	.formas-pago .forma, .formas-pago .forma label {height:140px}
	.formas-pago .opcion-tarjeta label {width: 50%}
	}
@media (max-width: 480px) {
	.formas-pago .opcion-banca label, .formas-pago .opcion-efectivo label {width: 100%}
	}
@media (max-width: 320px) {
	.formas-pago .opcion-tarjeta label {width: 100%}
	}

#divSeleccionFormaPago + .terminos .terminos-title {padding-bottom: 5px; font-size: 15px; font-weight: bold}
#divBtnContinuar {text-align:center}
#divBtnContinuar .btn.btn-success {padding-right: 40px; padding-left: 40px; font-size: 18px}

/* paginas similares el login */
.page-extra .page-sec {margin-top:30px; margin-bottom: 30px}
.page-extra .page-sec .head {background-color: rgba(0, 0, 0, 0.6)}
.page-extra .page-sec .content {background-color: rgb(255, 255, 255)}
.page-extra .page-sec .form label {font-weight: bold}
.page-extra .list-number_roman {list-style-type: upper-roman}
.page-extra .list-mayus {list-style-type: upper-alpha}
.page-extra p {margin:15px 0 !important}
.page-extra .list span{margin-bottom: 0; text-decoration: underline}
.page-extra .thumbnail img {height: 200px}
.page-extra .bottom-5 {margin-bottom: 5px !important}
.page-extra .bottom-10 {margin-bottom: 10px !important; padding-bottom: 0!important}
.page-extra .bottom-15 {margin-bottom: 15px !important}
.page-extra .bottom-20 {margin-bottom: 20px !important}
.page-extra .btn .fa-download {margin-right:5px}

.page-extra .page-sec .ofs .material-icons,
.page-extra .page-sec .ofs .fa {width:35px; font-size:15px; line-height:15px; text-align: center}
.page-extra .page-sec .ofs .fa.fa-envelope {font-size:12px}
.page-extra .page-sec .ofs .material-icons,
.page-extra .page-sec .ofs .fa,
.page-extra .page-sec .ofs p span {float: left}
.page-extra .page-sec .ofs p {float:left; width: 100%; padding-bottom: 5px; margin: 0 !important; overflow: hidden}
.page-extra .page-sec .ofs a {overflow-wrap: break-word; word-wrap: break-word; word-break: break-all}
.page-extra .page-sec .ofs p:first-of-type > span > span {float:none; display: block; clear: both}

.page-extra .equipo .panel-title {text-align: center; font-size: 18px}
.page-extra .equipo .sub-title {font-size: 12px; font-weight: bold; margin-top: 10px; margin-bottom: 0; text-align: center;}
.page-extra .equipo .panel-heading {background-color: rgba(204, 204, 204, 0.57); border-bottom: 1px solid #ccc}
.page-extra .equipo .panel-heading.border-heading {border-radius: 5px 5px 0 0 ;}
.page-extra .equipo .panel-body.pb-no-top {padding-top: 0}
.page-extra .equipo .panel-body .sub-sub-title {font-size: 13px; border-bottom: 1px solid #ccc; padding-bottom: 5px;}
.page-extra .equipo .panel-body .desc-title-b {text-align: center; padding: 5px; border-bottom: 1px solid #ccc;}
.page-extra .equipo .panel-body .desc-title-p {text-align: center; padding: 5px; background-color: rgba(204, 204, 204, 0.57); border-bottom: 1px solid #ccc}
.page-extra .equipo .panel {background-color: #fff}
.page-extra .equipo .panel.border-panel {border-radius: 5px;}
.page-extra .equipo .table-responsive {margin-bottom: -18px;}
.page-extra .equipo .table-responsive .table{border:1px solid #000;}
.page-extra .equipo .cabecera-table {background-color: #696969; color: #fff}
.page-extra .equipo .cabecera-table th {text-align: center;}
.page-extra .equipo .table-responsive .cl1 {background-color: #d6d6d6; text-align: center;}
.page-extra .equipo .table-responsive .cl2 {background-color: #9d9999; color:#fff; text-align: center;}

.page-extra .equipo .table-responsive tr td {text-align: center;}
.page-extra .equipo .panel-default .border-heading {padding: 10px;}
.page-extra .equipo .tooltip-inner {max-width: fit-content; padding: 3px 5px}

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {border: 1px solid #bdbdbd;}

@media (max-width: 992px) {
.page-extra .page-sec {margin-top:0; margin-bottom: 0}
.page-extra .page-sec .ofs p:first-of-type > span > span {float:none; display: inline-block; clear:none}
.page-extra .page-sec .map {padding-left: 0; padding-right: 0; margin-top: 20px}
}
@media (max-width: 768px) {
.page-extra .page-sec .content {padding:20px; float:left; width:767px !important}
.page-extra form .col-sm-5:first-of-type {margin-bottom:5px !important} 
}
@media (max-width: 481px) {	
.page-extra .page-sec .head {padding:10px 20px 20px}
.page-extra .page-sec .head img {display:none}
.page-extra .page-sec .content .top-10 {margin:0; padding: 0}	
.page-extra .page-sec .content .top-10 a {font-size:13px}
.page-extra .page-sec .ofs .material-icons,
.page-extra .page-sec .ofs .fa {display: none}
}