/*-----------------------------------------------------------------------------------

	Theme Name: BAM Landing Page
	Theme URI: http://mibanco.mx
	Description: Landing Page de Mi Banco
	Author: GrupoAutofin
	Version: 2.0

-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
	General CSS
-----------------------------------------------------------------------------------*/

@font-face {
    font-family: 'gotham';
    src: url('../fonts/gothammedium-webfont.woff2') format('woff2'),
         url('../fonts/gothammedium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
  scroll-behavior: smooth;
}

body {
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
    color: #666666;
    font-family: 'gotham';
}

#wrapper {
	position: relative;
	float: none;
	width: 100%;
	margin: 0 auto;
	background-color: #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
	overflow-x: hidden;
}

#content {
	position: relative;
	overflow: hidden;
	background-color: #FFF;
}

#content .container { position: relative; }

#content p { line-height: 1.8; }

#slider {
	display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
}

#slider-customer {
	position: relative;
}

.slide-left {
	background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 700px;
    background-image: url(../images/bg-girl.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.slide-right {
	display: flex;
    align-items: center;
    justify-content: flex-start;
	min-height: 700px;
}

.bg-asesoria {
	background-color: #FFFFFF;
	background-image: url('../images/bg-asesoria.png');
	background-repeat: no-repeat;
	background-size: cover;
    background-position: top center;
}

.color {
	color: #ce0e2d;
}

.bg-none {
	background-image: none!important;
}

.center-vertically {
 	display: flex;
    align-items: center;
    justify-content: center;
}

.title-slide {
    font-weight: 300;
	color: #FFFFFF;
	margin-bottom: 1rem;
}

.title-section-red {
	color: #ce0e2d;
	font-family: 'hurme_geometric_sans_3SBd';
}

.title-section {
	font-family: 'hurme_geometric_sans_3bold';
}

.title-section-white {
	color: #FFFFFF;
	font-family: 'hurme_geometric_sans_3SBd';
}

.subtitle-section-white {
	font-weight: 400;
}

.subtitle-section-grey {
	color: #666666;
	font-weight: 400;
}

.subtitle-slide {
	font-weight: 300;
	color: #FFFFFF;
}

.strip-grey {
	width: 100%;
	background-image: : #d8d8d8;
}

.strip-dark-grey {
	width: 100%;
	background-image: url("../images/parallax.jpg");
	background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Range Slide */
.form-range {
	position: relative;
    margin-top: -370px;
}

.scoped-rangeBox {
  display: flex;
  align-items: center;
  width: 320px;
  margin: 0 auto;
  padding: 0 15px 15px;
}
.scoped-rangeBox button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid transparent;
    font-size: 20px;
    box-shadow: 0 2px 0 rgb(0 0 0 / 8%);
    color: #e21d33;
}

.fs2rem {
	font-size: 2rem;
}

.scoped-rangeBox input[type=range] {
  flex-grow: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #cccccc;
  width: 60%;
  height: 4px;
  margin: 15px;
  border-radius: 8px;
}
.scoped-rangeBox input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #CF152D;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.scoped-rangeBox input[type=range]::-moz-range-thumb {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #CF152D;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Range Slide .end */

.left-margin {
	margin-left: 40px;
}

span {
	color: #ce0e2d;
}

.form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    border-bottom: solid 1px #c1c1c1;
    border-radius: 1px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.w-30 {
	width: 30%;
}

.lato {
	font-family: 'lato-bold';
}

.border-color {
	border: solid 40px #FFFFFF;
}

.topmargin {
	margin-top: 70px!important;
}

.fs55 {
	font-size: 40px;
}

.hvr-underline-from-center:before {
    background: #FFFFFF;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    border-radius: 30px;
}

.white-box {
    background-color: #ffffff85;
    padding: 40px 180px;
}

.text-red {
	color: #ce0e2d;
	text-transform: uppercase;
}

.bg-parallax {
	background-color: #d01130;
    background-image: linear-gradient(to left, #950b22 , #d01130);
}

.head-parallax {
    font-family: 'hurme_geometric_sans_3SBd';
	text-align: left;
    margin-bottom: 0;
}

.paragraph-white {
	color: #FFFFFF;
	line-height: 1.3rem!important;
}

.btn-circle-transparent {
	text-transform: uppercase;
	border-radius: 20px;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	background-color: transparent;
}

.btn-circle-transparent:hover {
	background-color: #FFFFFF;
	color: #ce0e2d;
	border: 1px solid #ce0e2d;
}

.btn-circle-white {
	background-color: #FFFFFF;
	text-transform: uppercase;
	border-radius: 20px;
	color: #ce0e2d;
    border: 1px solid #ce0e2d;
}

.btn-circle-red {
	text-transform: uppercase;
	border-radius: 20px;
	color: #FFFFFF;
	background-color: #ce0e2d;
}

.btn-circle-red:hover {
	background-color: #FFFFFF;
	color: #ce0e2d!important;
	border: 1px solid #ce0e2d;
}

.btn-link-grey {
	font-weight: 400;
    color: #6f6f6f;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid #6f6f6f;
    border-radius: 0;
}

.border-top-section {
    border-top: 1rem solid lightgrey;
}

.bg-money {
	background-image: url('../images/bg-dinero.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
    background-color: #8c0a1f;
	display: flex;
    align-items: center;
    width: 100vw;
    height: 70vh;
}

.bg-space {
	background-image: url('../images/fondo-bam.jpg');
	background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.title-section-space {
	text-align: center;
	color: #FFFFFF;
	font-family: 'hurme_geometric_sans_3bold';
}

.subtitle-section-space {
	color: #FFFFFF;
}

.bg-contact {
	background-color: #d01130;
  	background-image: linear-gradient(to right, #950b22 , #d01130);
}

.input-group-custom .input-custom {
    margin-right: -4px;
}

.input-custom span.input-group-text {
	background-color: transparent;
    padding: .4rem 1rem;
    border-top-right-radius: 1rem!important;
    border-bottom-right-radius: 1rem!important;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border: 4px solid #FFFFFF;
}

.input-group-custom .form-control, .input-group-custom .custom-select {
	background-color: transparent;
    height: calc(1.5em + 2rem + 15px);
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 1rem!important;
    border-bottom-left-radius: 1rem!important;
    border: 4px solid #FFFFFF;
    color: #FFFFFF;
}

.input-group-custom .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #DDDDDD;
    opacity: 1; /* Firefox */
}

.input-group-custom .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #DDDDDD;
}

.input-group-custom .form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #DDDDDD;
}

.custom-control-label {
    line-height: 1rem;
    color: #FFFFFF;
    margin-bottom: 1rem;
}

.list-slider {
	color: #FFFFFF;
}

.title-slider-white {
	font-size: 3.5rem;
	line-height: 3rem;
	color: #FFFFFF;
    font-family: 'hurme_geometric_sans_3SBd';
}

.subtitle-slider-white {
	font-family: 'hurme_geometric_sans_3SBd';
	color: #FFFFFF;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 2rem;
}

textarea:valid,
input[type="text"]:valid,
input[type="password"]:valid,
input[type="datetime"]:valid,
input[type="datetime-local"]:valid,
input[type="date"]:valid,
input[type="month"]:valid,
input[type="time"]:valid,
input[type="week"]:valid,
input[type="number"]:valid,
input[type="email"]:valid,
input[type="url"]:valid,
input[type="search"]:valid,
input[type="tel"]:valid,
input[type="color"]:valid,
.form-control:valid, .custom-select:valid {
	color: #666666;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.form-control:focus, .custom-select:focus {
	color: #666666;
}

.was-validated .custom-select:valid, .was-validated .custom-select:invalid {
	background: none;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/*-----------------------------------------------------------------------------------
	Header CSS
-----------------------------------------------------------------------------------*/

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: 300ms;
    z-index: 1;
    background-image: linear-gradient(to right, #920a21 , #c30e2d);
}

#header div nav #navbarNav ul li a {
    color: #FFFFFF;
}

#header.fixed-top div nav #navbarNav ul li a {
    color: #FFFFFF;
}

#header div nav #navbarNavCustomer ul li a {
	color: #ce0e2d;
}

#header.fixed-top div nav #navbarNavCustomer ul li a {
	color: #FFFFFF;
}

#navbarNavCustomer ul li {
    padding: 0px 10px;
}

#navbarNavCustomer ul li a {
	font-family: 'hurme_geometric_sans_3SBd';
	font-size: 0.9rem;
	text-transform: uppercase;
}

#header .container { position: relative; }

#navbarNav ul li a {
	font-family: 'arial';
	font-size: 0.9rem;
	text-transform: uppercase;
	color: #FFFFFF;
}

.logo-header {
	max-width: 100%;
	height: auto;
}

.fixed-top {
	position: fixed!important;
	background-color: #8c0a1f;
}

.bg-black {
	background-color: #000000;
}

.box-red {
	background-color: #cb1032;
	color: #FFFFFF;
	text-align: center;
	max-width: 720px;
    margin: 0 auto;
}

.vl {
	border-left: 3px solid #FFFFFF;
  	height: 80px;
    	margin: 0 auto;
    text-align: -webkit-center;
    width: fit-content;
}

.hr-white {
	border-top: 3px solid rgb(255 255 255);
}

.text-white2 {
	color: #ffffff!important;
}


/*-----------------------------------------------------------------------------------
	Footer CSS
-----------------------------------------------------------------------------------*/

#footer {
	width: 100%;
	position: relative;
}

/*-----------------------------------------------------------------------------------
	RH Contigo CSS
-----------------------------------------------------------------------------------*/

.bg-rhimg {
	background-image: url(../images/bg-rhcontigo.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.bg-form {
	background-color: #deeaf0;
}

.titulo-form {
	color: #122267!important;
}

a {
    color: #122267;
}

.h100 {
	height:100vh;
}

.centradov {
	margin-top: auto;
	margin-bottom: auto;
}

.btn-rh {
	background-color: #f29f3d;
	color: #FFFFFF;
	text-transform: uppercase;
}

/*-----------------------------------------------------------------------------------
	Loader CSS
-----------------------------------------------------------------------------------*/
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "proxima-nova-soft", sans-serif;
  -webkit-user-select: none;
  overflow: hidden;
}
body .vertical-centered-box {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
body .vertical-centered-box:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
body .vertical-centered-box .content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  font-size: 0;
}
* {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
body {
  background: #2c2d44;
}
.loadercircle2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #f29f3d;
  margin-left: -60px;
  margin-top: -60px;
}
.loaderline2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  overflow: hidden;
  -webkit-transform-origin: 60px 60px;
  -moz-transform-origin: 60px 60px;
  -ms-transform-origin: 60px 60px;
  -o-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
  -webkit-animation: rotate 1.2s infinite linear;
  -moz-animation: rotate 1.2s infinite linear;
  -o-animation: rotate 1.2s infinite linear;
  animation: rotate 1.2s infinite linear;
}
.loaderlinemask2 .loaderline2 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255);
}
#particles-background,
#particles-foreground {
  left: -51%;
  top: -51%;
  width: 202%;
  height: 202%;
  -webkit-transform: scale3d(0.5, 0.5, 1);
  -moz-transform: scale3d(0.5, 0.5, 1);
  -ms-transform: scale3d(0.5, 0.5, 1);
  -o-transform: scale3d(0.5, 0.5, 1);
  transform: scale3d(0.5, 0.5, 1);
}
#particles-background {
  background: #2c2d44;
  background-image: -moz-linear-gradient(45deg, #122267 2%, #122267 100%);
  background-image: -webkit-linear-gradient(45deg, #122267 2%, #122267 100%);
  background-image: linear-gradient(45deg, #122267 2%, #122267 100%);
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes rotate{ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}}
@-moz-keyframes rotate{ 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}}
@-o-keyframes rotate{ 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}}
@keyframes rotate{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
[not-existing] {
  zoom: 1;
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
@-moz-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
@-o-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
@keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
[not-existing] {
  zoom: 1;
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
@-moz-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
@-o-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
@keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
[not-existing] {
  zoom: 1;
}


/*-----------------------------------------------------------------------------------
	Responsive CSS
-----------------------------------------------------------------------------------*/

@media (min-width: 1200px) and (max-width: 1500px) {
	.box-red {
	    margin-top: -80px;
    	margin-bottom: 4rem;
	}

	.form-range {
	position: relative;
    margin-top: -280px;
	}
}

@media (max-width: 1200px) {
	.form-range {
	position: relative;
    margin-top: -250px;
	}
}

@media (max-width: 1199px) and (min-width: 992px) {
	.bg-money {
		background-size: contain;
	    height: 90vh;
	}
	.text-download {
		bottom: 0;
    	left: 100px;
	}

	.form-range {
		position: relative;
    	margin-top: -200px;
	}
}

@media (max-width: 991px) {
	.bg-money {
		background-image: none;
	    height: auto;
	}

	.form-range {
		position: relative;
    	margin-top: -180px;
	}

	.text-white2 {
		color: #BD0E2B!important;
	}
}

@media (max-width: 767px) {
	#header {
		position: relative;
	    background-color: #8c0a1f;
	}
	.slide-right, .slide-left {
		min-height: auto;
	}
	.bg-asesoria {
		background-image: none;
	}
	#header div nav #navbarNav ul li a, #header div nav #navbarNavCustomer ul li a {
		color: #FFFFFF;
	}
	.form-range {
		position: relative;
    	margin-top: -80px;
	}

	.text-white2 {
	color: #BD0E2B!important;
	}
}

@media (max-width: 575px) {
	#slider {
	    background-image: none;
	}
	.center-on-sm {
		text-align: center;
	}
	.navbar-brand {
		max-width: 70%;
	}
	.title-slide, .title-section-red, .title-section-white, .title-section-space, .head-parallax, .title-slider-white {
	    font-size: 2rem;
	    text-align: center!important;
	}
	.subtitle-slide, .subtitle-section-grey, .subtitle-section-white, .subtitle-section-space, .subtitle-slider-white {
	    font-size: 1.5rem;
	    text-align: center!important;
	}
	.text-red, .paragraph-white {
		text-align: center!important;
	}
	.icon-main {
	    max-width: 150px;
	}
	.text-download {
	    bottom: 0;
	    left: 0;
	    right: 0;
	    text-align: center;
	    position: relative;
	    color: #ce1032;
	}
	.box-red {
		margin-bottom: 2rem;
	}

	.white-box {
    background-color: #ffffff85;
    padding: 10px 10px;
	}

	.topmargin {
    margin-top: 20px!important;
	}
}