body{font-family: 'Titillium Web', sans-serif; font-size: 18px; font-weight: 400; color:#353535;}
strong{font-weight: 700;}


/* -------------------------------------------------- BANNER  -------------------------------------------------- */
.banner{background: url(https://i.imgur.com/lcpgiMW.jpg) center/cover; padding: 30px 0; color: #fff;}
.wrap-form-banner{border:2px solid #fff; border-top:none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 73.96%); padding:140px 20px 0;}
.wrap-logo{position: relative; margin-bottom: -140px;}
.wrap-logo::after{content:''; position: absolute; left: 0; top: 50%; width: calc(50% - 80px); height: 2px; background: #fff;}
.wrap-logo::before{content:''; position: absolute; right: 0; top: 50%; width: calc(50% - 80px); height: 2px; background: #fff;}
.wrap-logo p{font-size: 22px; text-align: center; max-width: 440px; margin: 20px auto 40px;}
.logo-olimer{width: 140px; display: block; margin: auto;}

.wrap-paso-calc{position: relative; padding-left: 44px; margin-bottom: 60px;}
.wrap-paso-calc::before{width: 30px; height: 30px; padding-top: 4px; background-color:#132343; color: #fff; position: absolute; left: 0; top: 0; text-align: center; font-weight: 700; font-size: 20px; line-height: 1;}
.wrap-paso-calc::after{content:'';width: 2px; position: absolute; top: 0; bottom: 0; left: 30px; background-color: #444c68}
.wrap-paso-calc p{margin-bottom: 4px;}
.wrap-paso-calc .form-select{background-color: transparent; color: #fff; border-radius: 0; border-top: none; border-left: none; border-right: none; border-bottom-width: 2px; --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); transition: all ease-in-out .3s; font-weight: 700;}
.wrap-paso-calc .form-select:focus{box-shadow: none; background-color: rgba(255, 255, 255, 0.14) !important; border-color: #fff; border-radius: 10px 10px 0 0 !important;}

.paso01.wrap-paso-calc::before{content: '1';}
.paso02.wrap-paso-calc::before{content: '2';}
.paso03.wrap-paso-calc::before{content: '3';}
.paso04.wrap-paso-calc::before{content: '4';}

.wrap-drag{padding: 20px 10px; position: relative; height: 110px}
.wrap-drag label{color: #949cb2;border: 1px solid #949cb2; width: 60px;text-align: center;padding: 4px;position: absolute;right: 8px;bottom: 21px;}
.txt-drag{font-size: 14px; font-weight: 400; letter-spacing: .4px; opacity: .6;}
.valor-drag{font-size: 12px; color: #fff;position: absolute;bottom: 48px;}
.val-inicio{left: 14px;}
.val-final{right: 74px;}
input[type=range] {height: 2px;-webkit-appearance: none; margin:24px 0 12px;width:calc(100% - 70px);}
input[type=range]:focus {outline: none;}
input[type=range]::-moz-range-thumb {border:none;height: 18px;width: 18px;border-radius: 100%;background: #2c2c63;cursor: pointer;}
input[type=range]::-webkit-slider-thumb {height: 18px;width: 18px;background: #2c2c63;-webkit-appearance: none;border-radius: 100%;cursor: pointer;}


.btn-calcular{font-size: 18px; margin:-10px 10px 60px; text-transform: uppercase; letter-spacing: 1px; color:#fff; display: block; background-color: #2c2c63; text-decoration: none; padding: 8px 24px; text-align: center; font-weight: 700; transition: all ease-in-out .3s;}
.btn-calcular:hover, .btn-calc:focus{background-color:#CACC00; box-shadow:rgba(0, 0, 0, 0.3) 0 0 30px;}
/* -------------------------------------------------- BANNER  -------------------------------------------------- */


/* ----------------------------------------------- RESULT-INVER  ----------------------------------------------- */
.result-inver{padding: 60px 0;}
.result-inver h2{font-size: 40px; color: #132343; margin-bottom: 20px;}
.result-inver p{font-size: 20px; margin-bottom: 30px;}
.btn-solicitud{text-transform: uppercase; font-size: 18px; color: #fff; text-decoration: none; font-weight: 700; background-color: #2c2c63; display: inline-block; padding: 8px 24px; margin: 0 10px 20px; transition: all ease-in-out .3s; letter-spacing: 1;}
.btn-solicitud:hover, .btn-solicitud:focus{background-color: #CACC00; color:#fff;}
/* ----------------------------------------------- RESULT-INVER  ----------------------------------------------- */


/* --------------------------------------------- MENU BOTTOM MOVIL --------------------------------------------- */
.menu-bottom-xs{background-color:#132343; color:#fff; position: fixed; bottom: 0; left: 0; right: 0; padding-top: 18px; border-radius: 30px 30px 0 0; z-index: 1;}
.menu-bottom-xs h3{font-size: 18px; font-weight: 600;}
.btn-solicitud-xs{display: inline-block; width: 128px; color: #fff; text-decoration: none; padding: 8px 8px 14px; font-size: 16px; margin: 0 10px; border-radius: 10px; transition: all ease-in-out .3s;}
.btn-solicitud-xs:hover{text-decoration: none; background-color: rgba(255, 255, 255, 0.1);}
.btn-solicitud-xs img{display: block; width: 40px; height: 40px; margin: 4px auto;}
/* --------------------------------------------- MENU BOTTOM MOVIL --------------------------------------------- */


/* ----------------------------------------------- RESULT-TABS  ------------------------------------------------ */
.seccion-tabs-resultado{background: url(../img/var/bk-tab-result.jpg) center repeat; padding: 20px 0 60px;}
.tabs-resultados{border-bottom: 1px solid #d7d7d7; margin-bottom: 32px; box-shadow: 0px 1px 0 #fff;}
.tabs-resultados li {width: 25%;}
.tabs-resultados li > button{background-color: transparent; color:rgba(53, 53, 53, 0.6); border:none; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; width:100%; padding: 12px 10px; position: relative; transition: all ease-in-out .3s;  text-shadow: 1px 1px 0 #fff;}
.tabs-resultados li > button:hover, .tabs-resultados li > button.active{color:#132343;}
.tabs-resultados li > button.active{font-weight: 700;}
.tabs-resultados li > button::before{content:''; height: 4px; position: absolute; bottom: 0; left: 50%; right: 50%; background-color: #5b5b8c; opacity: 0;transition: all ease-in-out .3s;}
.tabs-resultados li > button:hover::before, .tabs-resultados li > button.active::before{left: 0; right: 0; opacity: 1;}

.txt-resaltado strong{color:#2c2c63;}

.table-resumen {margin-bottom: 20px;}
.table-resumen td{padding: 14px 24px;}
.table-striped{--bs-table-striped-bg:#fff;  font-size: 18px;}
.table-resumen > .table-striped thead{border-color:#A1A23A; border-bottom-width: 2px; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; color:#132343; font-weight: 700;}
.table-resumen > .table-striped > tbody > tr > td:last-child{text-align: center;}

.table-pagos {height: 520px; overflow-y: scroll;}
.table-pagos > .table-striped thead{border-color:#A1A23A; border-bottom-width: 2px; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; color:#132343;  font-weight: 700;}
/* ----------------------------------------------- RESULT-TABS  ------------------------------------------------ */



/* ---------------------------------------------------------- MEDIA QUERY  ---------------------------------------------------------- */
@media (max-width: 1399px){
	/* ----------------------------------------------- RESULT-TABS  ------------------------------------------------ */
	.tabs-resultados li {width: auto; margin: 0 auto;}
	/* ----------------------------------------------- RESULT-TABS  ------------------------------------------------ */
}

@media (max-width: 1199px){
	/* ----------------------------------------------- RESULT-INVER  ----------------------------------------------- */
	.result-inver h2{font-size: 38px;}
	.result-inver p{font-size: 19px;}
	.btn-solicitud{font-size: 17px;}
	/* ----------------------------------------------- RESULT-INVER  ----------------------------------------------- */
}

@media (max-width: 991px){
	body{font-size: 17px;}
	/* -------------------------------------------------- BANNER  -------------------------------------------------- */
	.wrap-form-banner{padding-top: 130px;}
	.wrap-logo {margin-bottom: -139px;}
	.wrap-logo p {font-size: 20px;}
	.logo-olimer {width: 120px;}
	.wrap-paso-calc{margin-bottom: 50px;}
	.btn-calcular{margin: -18px 10px 40px;}
	/* -------------------------------------------------- BANNER  -------------------------------------------------- */

	/* ----------------------------------------------- RESULT-INVER  ----------------------------------------------- */
	.result-inver {padding: 50px 0;}
	.btn-solicitud{padding: 8px 22px;margin: 0 6px 20px;}
	/* ----------------------------------------------- RESULT-INVER  ----------------------------------------------- */

	/* ----------------------------------------------- RESULT-TABS  ------------------------------------------------ */
	.ocultar-xs{display: none;}
	.tabs-resultados li > button{font-size: 16px;}
	.row-resultado{margin-left: 0; margin-right: 0;}

	.table-resumen > .table-striped{font-size: 16px;}
	.table-resumen > .table-striped thead{font-size: 15px}
	/* ----------------------------------------------- RESULT-TABS  ------------------------------------------------ */
}

@media (max-width: 767px){
	/* -------------------------------------------------- BANNER  -------------------------------------------------- */
	.banner{padding:20px 0 0;}
	.logo-olimer {width: 100px;}
	.wrap-logo p {font-size: 19px;}
	.wrap-logo::before, .wrap-logo::after{display: none;}
	.wrap-form-banner{border: none;}
	.wrap-paso-calc {margin-bottom: 34px;}
	.btn-calcular {margin: 0 10px 40px;}
	/* -------------------------------------------------- BANNER  -------------------------------------------------- */

	/* ----------------------------------------------- RESULT-INVER  ----------------------------------------------- */
	.result-inver {padding: 40px 0 10px;}
	.result-inver h2 {font-size: 30px;}
	.result-inver p {font-size: 18px;}
	/* ----------------------------------------------- RESULT-INVER  ----------------------------------------------- */

	/* ----------------------------------------------- RESULT-TABS  ------------------------------------------------ */
	.seccion-tabs-resultado{padding-bottom: 180px;}
	.seccion-tabs-resultado > .container-xl > .row > .col-12{padding: 0;}
	.controles-tabs-resultados{width: 100%; overflow-x: scroll; padding-bottom: 4px; margin-bottom: 34px;}
	.tabs-resultados{min-width: 800px; margin: 0; padding:0 30px;}
	.row-resultado {min-height: auto;}

	.table-resumen, .grafica-resultado, .table-pagos{margin: 30px 0;}
	.table-pagos thead > tr > td:last-child, .table-pagos tbody > tr > td:last-child{display: none;}
	/* ----------------------------------------------- RESULT-TABS  ------------------------------------------------ */
}

@media (max-width: 575px){
	/* ----------------------------- MENU BOTTOM MOVIL ---------------------------- */
	.menu-bottom-xs{padding-top: 12px; border-radius: 20px 20px 0 0;}
	.menu-bottom-xs h3 {font-size: 15px; margin-bottom: 4px;}
	.btn-solicitud-xs{font-size: 12px; width: 92px; padding: 4px 4px 10px; margin: 0 4px;}
	.btn-solicitud-xs img{width: 30px; height: 30px; margin: 0 auto;}

	.seccion-tabs-resultado {padding-bottom: 160px;}
	/* ----------------------------- MENU BOTTOM MOVIL ---------------------------- */
}