@import "icons.css";

@font-face {
  font-family: 'icbc-font';
  src: url("fonts/icbc-font.eot?4lq8br");
  src: url("fonts/icbc-font.eot?4lq8br") format("embedded-opentype"), url("fonts/icbc-font.ttf?4lq8br") format("truetype"), url("fonts/icbc-font.woff?4lq8br") format("woff"), url("fonts/icbc-font.svg?4lq8br") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icbc-font' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

  .icon-conatct:before {
  content: "\e927";
}

.icon-mobile-phone:before {
  content: "\e966";
}

@font-face {
  font-family: 'gustan';
  src: url(" fonts/Gustanlp-Light.eot");
  src: url(" fonts/Gustanlp-Light.eot") format("embedded-opentype"), url(" fonts/Gustan-Book.woff2") format("woff2"), url(" fonts/Gustan-Book.woff") format("woff"), url(" fonts/Gustan-Book.ttf") format("truetype"), url("/contenthandler/!ut/p/dav/fs-type1/themes/icbc-institucional/ICBC/css/fonts/Gustan/Gustan-Book.svg?locale=es&locale=en&locale=ltr") format("svg");
  font-weight: 400;
  font-style: normal; 
  font-display: swap;
}

@font-face {
  font-family: 'gustan';
  src: url(" fonts/Gustan-Book.eot");
  src: url(" fonts/Gustan-Book.eot") format("embedded-opentype"), url(" fonts/Gustan-Book.woff2") format("woff2"), url(" fonts/Gustan-Book.woff") format("woff"), url(" fonts/Gustan-Book.ttf") format("truetype"), url("/contenthandler/!ut/p/dav/fs-type1/themes/icbc-institucional/ICBC/css/fonts/Gustan/Gustan-Book.svg?locale=es&locale=en&locale=ltr") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

 @font-face {
  font-family: 'gustan';
  src: url(" fonts/Gustan-Medium.eot");
  src: url(" fonts/Gustan-Medium.eot") format("embedded-opentype"), url(" fonts/Gustan-Medium.woff2") format("woff2"), url(" fonts/Gustan-Medium.woff") format("woff"), url(" fonts/Gustan-Medium.ttf") format("truetype"), url(" fonts/Gustan-Medium.svg") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gustan';
  src: url(" fonts/Gustanlp-Bold.eot");
  src: url(" fonts/Gustanlp-Bold.eot") format("embedded-opentype"), url(" fonts/Gustanlp-Bold.woff2") format("woff2"), url(" fonts/Gustanlp-Bold.woff") format("woff"), url(" fonts/Gustanlp-Bold.ttf") format("truetype"), url(" fonts/Gustanlp-Bold.svg") format("svg");
  font-weight: 700;
  font-style: normal; 
  font-display: swap;
}
@font-face {
    font-family: gustan;
    src: url(fonts/Gustanlp-Extrabold.eot?v=12091016);
    src: url(fonts/Gustanlp-Extrabold.eot#iefix&v=12091016) format("embedded-opentype"),url(fonts/Gustanlp-Extrabold.woff2?v=12091016) format("woff2"),url(fonts/Gustanlp-Extrabold.ttf?v=12091016) format("truetype"),url(fonts/Gustanlp-Extrabold.svg#webfontregular?v=12091016) format("svg");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

body{ 
    font-family: 'gustan', sans-serif;
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; 
}
h1 {
    font-size: 24px !important;
    font-weight: 500;
}
h2{
    font-weight: 700;
}
h1 span{
    font-weight: 700;
}
h4{
	font-weight: 600;
	font-size: 1.1rem;
}
a{
	color: inherit;
	text-decoration: none;
}
header{
    height: 51px !important;
    -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.4);
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.4);
}

p{
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2rem;


  color: #000;
}

.red{
	background-color: #C4161C;
}
.red h1{
	font-size: 2rem;
	color: #FFF;
	text-decoration: none;
}
.red p{
	font-weight: 500;
	font-size: 1.15rem;
	color: #FFF;
	text-decoration: none;
}
.red a{
	color: inherit;
	text-decoration: none;
}
.red svg{
	width: 300px;
    height: auto;
}
.btn{
	border-radius: 0;
}
.red .btn-light{
	background-color: rgba(255, 255, 255, 1.0);
	border: 1px solid #FFF;
	transform: all ease .2s;
	color: #C4161C;
	font-weight: 700;
}

.red .btn-light:hover, .red .btn-light:focus{
	background-color: rgba(255, 255, 255, 0);
	color: #FFF;
}
.btn-primary{
    border: 1px solid #C4161C;
    background-color: rgba(196,22,28,1);
    transform: all ease .2s;
    font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show{
    background-color: rgba(196,22,28,0);
    color: #C4161C;
    border-color: inherit;
}

.btn-outline-primary{
	border: 1px solid #C4161C;
	background-color: rgba(196,22,28,0);
    color: #C4161C;
	transform: all ease .2s;
	font-weight: 700;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show{
	background-color: rgba(196,22,28,1);
	color: #FFF;
	border-color: #C4161C;
}
.btn-primary:disabled{
    border-color:  #a8494c;
    background-color: #a8494c;
}

.gray-9{
	background-color: #f9f9f9;
}
.banner{
	overflow: hidden;
}
.text-primary{
	color: #C4161C !important;
}
.card{
	border-radius: 0;
	border: 1px solid #EFEFEF;
	box-shadow: 0px 9px 18px 0px rgba(0,0,0,0.1);	
	overflow: hidden;
}
.boxInfo p.fx{
    height: 1.2rem !important;
    margin-bottom: .35rem !important;
    display: block;
}
.form-label{
    font-size: 1rem;
    font-weight: 400;
	line-height: 1.1rem;
	margin-bottom: .2rem;
}
.form-text{
    font-weight: 400;
    font-size: .85rem;
    line-height: .9rem;
    opacity: .65;
}
.form-control,.input-group-text,.form-select{
	border: none;
	border-radius: 0;
	border-bottom: 1px solid rgba(0,0,0, .15);
	background-color: transparent;
    padding: 0.25rem 2.25rem 0.25rem 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -1px;
}

.input-group-text{
    padding-right: 0;
}

.form-check-label.tag{
	color: #C4161C;
	border: 1px solid #C4161C;
	padding: 5px;
    position: relative;
    display: inline-block; 
	margin-top: -3px;
}

.form-check-label.tag::before {
      content: '';
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      left: -16px;
      border-width: 8px;
      border-style: solid;
      border-color: transparent #C4161C transparent transparent;
    }
.check{
	padding: 0;
}

.check li{
	list-style: none;
	margin-bottom: .5rem;
}
.check li:before{
	content: "\F26B";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
  	margin-right: 5px;
  	color: #C4161C;
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23E6A9AB'/%3e%3c/svg%3e");
    border-color: #E6A9AB;
}


.form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
    background-color: #C4161C;
    border-color: #C4161C;
}

input[type="range"]::-webkit-slider-thumb {
     background-color: #C4161C;}

input[type="range"]:focus::-webkit-slider-thumb {
    background-color: #E6A9AB;
}

#monto-show{
    padding-top: 1.5rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -1px;
}

form .card p.bold{
    font-size: 1.1rem;
}

form .card .border-start{
    border: none !important;
}

form .btn, #paso-4 .btn{
    width: 100%;
}
.contact h3{
    font-weight: 600;
    color: #212121;
    font-size: 1.2rem;
    line-height: 1.2em;
}

.total{
    font-weight: 900;
    letter-spacing: -1px;
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 0;
}
.resumen{
	background-color: #EDEDED;
}

.resumen p{
	line-height: 1rem;
	margin-bottom: 1.25rem;
}

.text-gray{
	opacity: .55;
}

.result{
	font-weight: 900;
	font-size: 1.5rem;
}
.cond p{
    font-weight: 400;
	font-size: .8rem;
    line-height: 1.1rem;
}
footer, footer p{
	color: #757575;
}
footer a{
	color: #757575;
	text-decoration: none;
}
footer .small{
	font-size: 0.75rem;
    text-align: justify;
}
.cftna {
    font-size: 50px;
    line-height: 48px;
    letter-spacing: normal;    
    font-weight: 100;
    font-family: gustanlp;
    margin-top: 45px;
    letter-spacing: -3px;
}
.links-vertical {
    line-height: 2em !important;
	padding: 0;
}
.links-vertical li{
	border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;tyle: none;
	font-size: 1em;
    line-height: 1.5;
}
.links-horizontal{
	color: #757575 !important;
}
.social{
	list-style: none;
}
.social .bi{
	color: #757575;
	font-size: 1.5rem;
}
.legals a {
    color: #757575 !important;
    font-size: 0.8em;
    font-weight: 600;
}
.legals a:hover {
    color: #C4161C !important;
    text-decoration: underline;
}
.feat .owl-nav {
    position: absolute;
    top: calc(50% - 25px);
    width: 100%;
}
.feat .card{
	overflow: hidden;
}
.feat .card img{
	object-fit: cover;
  width: auto;
  height: auto;
  min-height: 100%;
}
.feat .card .gray {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 58px;
}
.gray {
    background-color: #ededed;
}

.gray svg{
	height: 28px !important;
	width: auto;
    margin-top: .20rem;
}

.bold {
    font-weight: 700;
    font-family: 'gustan', sans-serif;
}
.boxInfo h3 {
    font-size: 4.8rem;
    font-family: 'gustan', sans-serif;
    font-weight: 900;
    letter-spacing: -5px;
    margin-left: -4px !important;
    line-height: 4.5rem;    
    padding-bottom: 0;
    display: block;
    margin-bottom: 0;
    margin-top: -.5rem;
    height: 4.5rem;
    overflow: hidden;
}
.boxInfo h3 span {
    font-size: 2.25rem;
    margin-left: .25rem;
    line-height: 2rem;
}
.boxInfo h3 span.xs {
	font-size: .9rem;
	letter-spacing: 0;
	margin-left: .35rem;
}
.boxInfo p {
    line-height: 1.2rem;
}
.boxInfo .note {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1rem;
    height: 7rem;
    display: block;
    margin-bottom: 50px;
}
.icon-xl p{
	font-size: 48px;
}
.owl-nav {
    position: absolute;
    top: calc(50% - 25px);
    width: 100%;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    background: transparent;
    padding: 5px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #000;
}
.owl-carousel .owl-nav button.owl-prev {
    left: -40px;
}
.owl-carousel .owl-nav button.owl-next {
    margin-left: 3px;
    right: -40px;
}
.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span {
    font-size: 2.15rem;
    line-height: 2rem;
}
.steps {
    position: relative;
}
.banner .bg{
	display: block;
	width: 100%;
	height: auto;	
}

@media (min-width: 768px) {
	.cftna{
	font-size: 6.25rem;
	line-height: 8rem;
	color: #757575;
}
.banner .bg{
	object-fit: cover;
	min-width: 100%;
	width: 100%;
	height: auto;	
}
form .card .border-start{
    border-top: none;
    border-left: 1px solid #dee2e6;
}

/*form .btn, #paso-4 .btn{
    width: auto;
}
form .card .btn{
    width: 100%;
    display: block;
}*/
}
@media (min-width: 992px) {
	.banner{
	/*min-height: 400px;*/
	overflow: hidden;
}

.banner .bg {
    object-fit: cover;
    min-height: 100%;
    width: auto;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}
.boxInfo .note{
	height: 7rem;
}
.boxInfo .note {
   /* font-size: .9rem;
    line-height: 1rem;*/
}

	.resumen{
		background-color: transparent;
		border-left: 1px solid rgba(0,0,0,.15);
		background-color: transparent;
	}

	.steps {
        position: absolute;
        bottom: 0;
        max-height: 520px;
    }    
   
}

@media (min-width: 1280px) {
.boxInfo .note{
	height: 6rem;
}
.steps {
        position: absolute;
        bottom: 0;
        max-height: 480px;
    }	


#paso-4 .btn{
    width: auto;
}

}

@media (min-width: 1440px) {
.boxInfo .note{
	height: 5rem;
}
}

@media (min-width: 1920px) {

.red svg{
	margin-top: 2rem;
}
.banner .bg{
	object-fit: cover;
	min-width: 100%;
	width: 100%;
	height: auto;
	min-height: 480px;
}
}