html, body{
	overflow-x: hidden;
}
body.crapBrowser #Skills, body.crapBrowser #Testimonios{
	background-attachment: scroll;
}
body.crapBrowser #Servicios .servicio{
	opacity: 1;
}
body{
	font-family: 'Open Sans';
	padding-right: 0px !important;
}
body.p-t-130{
	padding-top: 130px;
}
body.bg-img-icons{
	background: url(../CORTES/03-pf/26-texture-background.png) #FAFAFA;
}
#headerUpContainer{
	background: url(../CORTES/02-slider/12-image.jpg) no-repeat;
	background-size: cover;
	min-height: 600px;
	position: relative;
}
.btn.bnt-wide{
    padding: 6px 42px;
}
.btn-pf,
.btn-pf.active, 
.btn-pf.focus, 
.btn-pf:active, 
.btn-pf:focus, 
.btn-pf:hover, 
.open>.dropdown-toggle.btn-pf{
	background-color: #004383;
	
}


.btn-avanz,
.btn-avanz.active, 
.btn-avanz.focus, 
.btn-avanz:active, 
.btn-avanz:focus, 
.btn-avanz:hover, 
.open>.dropdown-toggle.btn-avanz{
	background-color:#FF7500;
	border-color:#ff7500;
	font-weight: 700;
	margin-left: -12px !important;
}
.mar-bot-30{
	margin-bottom: 30px;
}
.no-mar-left{
	margin-left: 0px !important;
}
.no-mar-right{
	margin-right: 0px !important;
}
nav.navbar{
	background-color: #133558;
	background-color: rgba(19,53,88,.8);
	margin-left: -1px;
	margin-right: -1px;
	margin-top: -1px;
	border-bottom: none;
	-webkit-transition: background .5s ease;
	-o-transition: background .5s ease;
	transition: background .5s ease;
}
nav.navbar.no-alpha{
	background-color: rgba(19,53,88,1);
}
nav.navbar > div{
	margin-top: 10px;
}
nav.navbar .navbar-brand{
	padding: 0;
}
nav.navbar li.divider{
	background-color: #fff;
	height: 1px;
}
.navbar-default .navbar-toggle{
	-webkit-transition: background .7s ease;
	-o-transition: background .7s ease;
	transition: background .7s ease;
}
.navbar-default .navbar-toggle:focus, 
.navbar-default .navbar-toggle:hover{
	background-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar{
	background-color: #fff;
}
.navbar-default .navbar-toggle:focus .icon-bar, 
.navbar-default .navbar-toggle:hover .icon-bar{
	background-color: #133558;
}
.col-white{
	color: #fff;
}
.col-white a{
	color: #fff !important;
}
.no-bor-rad{
	border-radius: 0px 0px 0px 0px;
}
.no-pad-left{
	padding-left: 0 !important;
}
.no-pad-right{
	padding-right: 0 !important;
}
ul.ul-links li a{
	border-bottom: 2px solid #133558;
	-webkit-transition: border .7s ease-out, padding .5s ease;
	-o-transition: border .7s ease-out, padding .5s ease;
	transition: border .7s ease-out, padding .5s ease;
}
ul.ul-links li a.active{
	border-color: #fff;
}
ul.list-inline.only-img-a a{
	display: inline-block;
}
ul.not-a-ul li{
	padding: 10px 15px;
}
div#ColectoresSlide img{
	margin: 0px auto;
}
.colectorsRow{
	background: #fff;
}
.container-bottom-shadow-line{
	-webkit-box-shadow: 0px 11px 8px -10px rgba(223,223,223,0.75); 
	-moz-box-shadow: 0px 11px 8px -10px rgba(223,223,223,0.75);
	box-shadow: 0px 11px 8px -10px rgba(223,223,223,0.75);
	margin-bottom: 1px;
}
.triangle:before, .triangle:after {
  content:'';
  position: absolute;
  bottom: 100%;
  width: 50%;
  height: 10px;
  padding-bottom:inherit;
  background-color: #fff;
}
.triangle:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.triangle:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}
.slide-button{
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	-o-transform: translateY(50%);
	transform: translateY(50%);
	margin-top: -10px;
}
.home-line-divider-red{
	width: 90px;
	border-bottom: 4px solid #DC2900;
	margin-top: 10px;
	border-top: none;
}
.home-line-divider-red.on-left{
	margin-left: 0px;
}
#Inicio h1, #Inicio h2{
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
#Inicio h1{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 48px;
}
#Inicio h1 span{
	text-transform: none;
	font-weight: normal;
	display: block;
}
#Inicio h2{
	font-weight: 100;
	font-size: 26px;
}
#Inicio h2 span{
	display: none;
}
#Inicio #headerUpContainer{
	padding-top: 105px;
}
#Inicio #headerUpContainer .pad-top{
	padding-top: 90px;
}
#Inicio .img-servicios{
	margin: 15px 0px 50px;
}
#Inicio .z-in-fix{
	z-index: 2;
}
#Inicio .wom-abs{
	position: absolute;
	z-index: 0;
	width: 50%;
	bottom: 0px;
	left: 25%;
}
#Nosotros{
	background: url(../CORTES/03-pf/26-texture-background.png) #FAFAFA;
	padding-top: 60px;
	padding-bottom: 40px;
}
#Nosotros h2, #Nosotros h3, #Nosotros p, #Servicios, #Contacto p{
	color: #6c6c6c !important;
}
#Nosotros h2{
	font-size: 22px;
	margin-bottom: 10px;
}
#Nosotros h2 > span{
	margin-top: 5px;
	display: block;
	color: #004382;
}
#Nosotros h3{
	font-size: 14px;
}
#Skills{
	-webkit-background: url(../CORTES/04-skills/27-paralax-skills.jpg) no-repeat;
	background: url(../CORTES/04-skills/27-paralax-skills.jpg) no-repeat;
	background-size: 100% 100%; /*Crappy Browser fallback*/
	background-size: cover;
	background-attachment: scroll; /*Crappy Browser fallback*/
	background-attachment: fixed;
	padding: 60px 0px;
}
#Skills .skill img{
	margin: 0 auto;
}
#Skills .skill p strong, #Skills .skill p span{
	display: inline-block;
}
#Skills .skill p{
	font-size: 18px;
	font-weight: lighter;
}
#Skills .skill p strong{
	font-size: 48px;
	display: block;
}
#Skills .skill p span{
	position: relative;
	top: -10px;
}
#Servicios, #Contacto{
	background-color: #fff;
}
#Servicios h2, #Contacto h2{
	color: #004382;
}
#Servicios h2, #Contacto h2, #Testimonios h2, #Nosotros h2 > span{
	font-size: 32px;
}
#Servicios .servicio{
	opacity: 1;
}
#Servicios .servicio img{
	margin: 0 auto;
}
#Servicios .servicio h3{
	font-size: 14px;
}
#Servicios .servicio p{
	font-size: 13px;
}
#Testimonios{
	-webkit-background: url(../CORTES/06-testimonials/39-paralax_testimonios.jpg) no-repeat;
	background: url(../CORTES/06-testimonials/39-paralax_testimonios.jpg) no-repeat;
	background-attachment: scroll;
	background-attachment: fixed;
	background-size: cover;
}
#Testimonios .testimonio blockquote{
	border-left: none;
	color: #004382;
	padding-bottom: 20px;
	padding-left: 30px;
}
#Testimonios .testimonio blockquote p{
	margin: 5px 0 5px;
}
/*#Testimonios .testimonio blockquote footer{
  	font-size: 75%;
}*/
#Testimonios .testimonio blockquote ul.list-inline{
	display: inline-block;
	position: relative;
	top:5px;
	padding-left: 20px;
}
#Testimonios .testimonio blockquote ul.list-inline li{
	padding: 0;
}
#Testimonios .testimonio blockquote footer:after, 
#Testimonios .testimonio blockquote footer:before{
  	content: '';
}
#Testimonios .testimonio blockquote footer span:after, 
#Testimonios .testimonio blockquote footer span:before{
  	font-size: 14px;
  	content: '';
}
#Testimonios .testimonio blockquote footer span:after{
	content: ' -';
}
#Testimonios .testimonio blockquote footer span:before{
	content: '- ';
}
#Sucursales{
	height: 500px;
	position: relative;
}
body.encuentranos{
    padding-top: 59px;
}

#Puntos-Ficohsa{
    background-color: #dcdcdc;
    padding: 20px 0px;
    overflow: hidden;
    position: relative;
    display: none;
}
#Puntos-Ficohsa p.lead{
    font-weight: 400;
    font-size: 20px;
}
#Puntos-Ficohsa p.lead span{
    display: block;
    color: #004383;
    font-size: 28px;
    margin: 0px;
}
#Puntos-Ficohsa p.lead img{
    margin: 0 auto;
}
#Puntos-Ficohsa button{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
}
body.encuentranos #Sucursales{
	height: auto;
	padding-bottom: 50px;
}
#Sucursales > div.row{
	height: 100%; position: relative;
}
#Sucursales > a{
	width: 261px;
	height: 73px;
	font-size: 0px;
	background: url(../cortes/03-pf/btnFindPF.png);
	display: inline-block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -131px;
}
#Sucursales > a:hover,
#Sucursales > a:focus,
#Sucursales > a:active{
	background: url(../cortes/03-pf/btnFindPF_hover.png);	
}
#Contacto{
	padding-top: 20px;
	padding-bottom: 30px;
}
#Contacto input, #Contacto textarea{
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
}
#Contacto textarea{
	resize: none;
	min-height: 130px;
}
#Contacto .form-group{
	position: relative;
}
#Contacto .form-group span.glyphicon{
	color: #DDDDDD;
	position: absolute;
	top: 10px;
	right: 10px;
}
#Contacto .form-group span.tel-mask{
	position: absolute;
	top: 6px;
    left: 5px;
	opacity: 0;
	font-size: 15px;
	-webkit-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
}
#Contacto .form-group #inputTelefono{
	-webkit-transition: padding .4s ease-in;
	-o-transition: padding .4s ease-in;
	transition: padding .4s ease-in;
}
#Contacto .form-group #inputTelefono:focus + span.tel-mask{
	opacity: 1;
}
#Contacto .form-group #inputTelefono:focus{
	padding-left: 60px;
}
#Footer{
	background: #1F1F1F;
	padding-top: 40px;
	padding-bottom: 40px;
	/*height: 400px;*/
}
#Footer address{
	margin-bottom: 10px;
}
#Footer address img{
	display: inline-block;
}
#Footer ul.only-img-a{
	margin-top: 30px;
	margin-bottom: 30px;
}
#Footer small{
	color: #595959;
	font-size: 14px;
}

.bx-wrapper .bx-viewport{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border: none;
	background-color: transparent;
}
.bx-wrapper .bx-pager.bx-default-pager a{
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	background-color: #fff;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, 
.bx-wrapper .bx-pager.bx-default-pager a.active{
	background: transparent;
  	border: 1px solid #fff;
}
.ballon{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	background-color: #fff;
	position: relative;
}

.mt-40{
	margin-top: 40px;
}
.pad-tb-30{
	padding-top: 30px;
	padding-bottom: 30px;
}
.pad-tb-20{
	padding-top: 20px;
	padding-bottom: 20px;
}
.flat-btn{
    outline: none;
    position: relative;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    -o-border-radius: 5px !important;
    border-radius: 5px !important;
    /*z-index: 2;*/
}
.flat-btn.btn-red{
    -webkit-box-shadow: 0 2px #8b1d00;
    -moz-box-shadow: 0 2px #8b1d00;
    box-shadow: 0 2px #8b1d00;
}
.flat-btn.btn-green{
    -webkit-box-shadow: 0 2px #007c51;
    -moz-box-shadow: 0 2px #007c51;
    box-shadow: 0 2px #007c51;
}
.flat-btn.btn-blue{
    -webkit-box-shadow: 0 2px #004383;
    -moz-box-shadow: 0 2px #004383;
    box-shadow: 0 2px #004383;
}
.flat-btn:hover, .flat-btn:active, .flat-btn:focus{
    color: #fff !important;
    outline: none;
}
.flat-btn:active{
    top: 1px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.btn-red{
    background-color: #bc2d08;
}
.btn-green{
    background-color: #00b878;
}
.btn-blue{
    background-color: #2976bf;
}
.btn-green.home-btn,
.btn-red.home-btn,
.btn-blue.home-btn{
    padding: 10px 12px;
    margin: 0 7px;
    outline: none !important;
}
.flat-btn.extra-side-pad{
	padding-left: 20px;
	padding-right: 20px;
}
.btn-red, .btn-green, .btn-blue{
    color: #fff;
}
/*.on-fathers-bottom{
	position: absolute;
	bottom: 30px;
}*/
.go-up{
	-webkit-transition: transform .5s ease, max-height .9s ease-out;
	-o-transition: transform .5s ease, max-height .9s ease-out;
	transition: transform .5s ease, max-height .9s ease-out;
	max-height: 50px;
}
.go-up.go{
	-webkit-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px);
	max-height: 0;
}
#map-wrapper{
	height: 450px;
}
#puntofacil-map{
	height: 100%;
}
/*#puntofacil-map img{
	max-width: 100%;
}*/
.gmnoprint{
    z-index: 100000000;
}
.gmnoprint img {
    max-width: none; 
}
#puntofacil-map label { 
  width: auto; display:inline; 
} 
.map-border-wrapper{
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.75);
	padding:15px;
	background: #fff;
	border: 1px solid #ccc;
	height: 100%;
}
span[role="status"][aria-live="polite"]{
	display: none;
}
.ui-autocomplete{
	padding-left: 0;
  	list-style: none;
	background-color: #FFF;
	border: none;
	padding: 5px;
	box-shadow: inset 2px -2px 2px #DCDCDC !important;
	opacity: 0;
	height: 0px;
	max-height: 0px;
    display: none;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.ui-autocomplete li a{
	cursor: pointer;
}
.ui-autocomplete.opened {
    opacity: 1;
    max-height: 700px;
    height: auto;
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
}
.label-encuentra{
	font-size: 14px;
	color: #747473;
}
#autocompleteTxtHolder > div.wrap{
	position: relative;
}

#municipiosTextHolder > div.wrap{
	position: relative;
}

.search-input{
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}
#pfBtnSearch{
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 6px 10px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

#searchMunicipioBtn{
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 6px 10px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

.glyph-blue, .blueh1{
	color: #004382;
	font-size: 19px;
}
.input-group-btn.no-rad-bor:last-child>.btn{
	border-top-right-radius: 0;
  	border-bottom-right-radius: 0;
}
#pfUlSucursales{
	overflow-y: scroll;
	max-height: 300px;
	width: 100%;
	margin-top: 20px;
}
#pfUlSucursales a{
	cursor: pointer;
}
#listDesplieger .glyphicon{
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
#listDesplieger .glyphicon.rotate{
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	
}
#PlayStore{
	-webkit-transform: translatey(100%);
	-moz-transform: translatey(100%);
	-ms-transform: translatey(100%);
	-o-transform: translatey(100%);
	transform: translatey(100%);
	padding: 10px 0px;
	position: fixed;
	background: #000;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	color: #fff;
}
#PlayStore.show{
	-webkit-transform: translatey(0%);
	-moz-transform: translatey(0%);
	-ms-transform: translatey(0%);
	-o-transform: translatey(0%);
	transform: translatey(0%);
}
#PlayStore .ps-wrapper{
	display: inline;
  	float: left;
}
#PlayStore .img-wrapper{
	width: 40%;
}
#PlayStore .text-wrapper{
	width: 60%;
}
#PlayStore .ps-wrapper.text-wrapper a{
	color: #fff;
	margin-top: 15px;
	display: inline-block;
	opacity: 0;
}
#PlayStore .ps-wrapper.text-wrapper a.showGoingDown{
	opacity: 1;
}
#PlayStore .ps-wrapper.text-wrapper a:hover{
	text-decoration: none;
}
#PlayStore .img-wrapper img{
	margin-right: 15px;
	max-width: 75px;
	display: inline;
	opacity: 0;
}
#PlayStore img.showRotating{
	opacity: 1;
}
#PlayStore a small{
	display: block;
}
#PlayStore a small img{
	width: 100px;
	height: 23px;
}
#PlayStore .closer{
	position: absolute; 
	top:0; 
	left:0;
	cursor: pointer;
}
#captcha{
	width: 100%
}
#captcha + a{
	display: inline-block;
}

 /* Use container-fluid for full width, and add a custom class for specific sizing */
    .custom-carousel-container {
        /*height: 83vh;  83% of the viewport height */
       /* width: calc(78vh * (16 / 9));  Calculate width based on 16:9 aspect ratio */
	    aspect-ratio: 3 / 1;
        max-width: 100%; /* Ensure it doesn't overflow the screen width */
        margin: 0 auto; /* Center the container */
        overflow: hidden; /* Hide anything that spills outside the container */
        position: relative; /* Needed for absolute positioning of children if any */
    }

/* Make sure the carousel and its inner elements fill the custom container */
 #theCarousel,
    .carousel-inner,
    .carousel-inner > .item {
        height: 100%;
        width: 100%;
    }

/* Ensure images fill their container and maintain aspect ratio without distortion */
    .carousel-inner .item img {
        width: 100%;
        height: 100%;
        object-fit: fill; /* This is crucial for maintaining aspect ratio and filling the space */
        display: block; /* Removes extra space below image */
    }

	 /* Adjust caption font sizes if needed for smaller containers */
    .carousel-caption h3 {
        font-size: 1.5vw; /* Example: Responsive font size based on viewport width */
    }

    .carousel-caption p {
        font-size: 0.8vw; /* Example: Responsive font size */
    }

	/* Optional: Media queries for smaller screens if the aspect ratio calculation makes it too small */
    @media (max-width: 768px) {
        .custom-carousel-container {
            height: 20vh; /* Maybe slightly larger on smaller screens */
            width: calc(20vh * (16 / 9));
            /* Or simply use a percentage width if a fixed aspect ratio isn't as critical on small screens */
            /* width: 90%; */
            /* height: calc(90vw * (9 / 16)); */ /* Calculate height based on width if width is primary */
        }
        .carousel-caption h3 {
            font-size: 2.5vw;
        }
        .carousel-caption p {
            font-size: 1.5vw;
        }
    }

#PagosFicohsa{
	position: relative;
	z-index: 2;
	padding-top: 100px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dcebe6+0,e1ede9+100 */
	background: #dcebe6; /* Old browsers */
	background: -moz-linear-gradient(top,  #dcebe6 0%, #e1ede9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #dcebe6 0%,#e1ede9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #dcebe6 0%,#e1ede9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcebe6', endColorstr='#e1ede9',GradientType=0 ); /* IE6-9 */
	padding-bottom: 50px;
}
#PagosFicohsa:before,
#PagosFicohsa:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    z-index: -1;
}
#PagosFicohsa:before{
	height: 20px;
    background: #8ba19f;
    bottom: 120px;
}

#PagosFicohsa:after {
    bottom: 0;
    height: 120px;
    background: #4a3f43;
}

#PagosFicohsa h1 + p strong,
#PagosFicohsa h1 + p > span{
	display: block;
}
#PagosFicohsa table th{
	background: #fff;
	min-height: 50px;
}
#PagosFicohsa table th,
#PagosFicohsa h1 + p strong.blue{
	color: #004383;
}

#PagosFicohsa h1 + p .ficohsa{
    background: url(../cortes/02-slider/26-ficohsa.png) no-repeat;
    background-size: 100% 100%;
    min-height: 100px;
    display: inline-block;
    min-width: 200px;
}
#PagosFicohsa h1 + p .ficohsa span{
	visibility: hidden;
}
#PagosFicohsa table tr td:first-child{
	font-weight: bold;
}
/*#PagosFicohsa table th{
	color: transparent;
	visibility: hidden;
}*/
#PagosFicohsa table th div{
	position: absolute;
	background: transparent;
	color: #004383;
	padding: 9px 25px;
	top: 0;
	margin-left: -25px;
	line-height: normal;
}

@media (min-width: 768px){
	#map-wrapper{
		margin-top: 50px;
	}
	#Servicios .servicio h3{
		font-size: 18px;
	}
	#Servicios .servicio p{
		font-size: 14px;
	}
	.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand{
		margin-left: 0;
	}
	.ballon:before{
		content: '';
		position: absolute;
		left: -15px;
		top: 40%;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 12.5px 15px 12.5px 0;
		border-color: transparent #FFFFFF transparent transparent;
	}
	#PagosFicohsa{
		padding-top: 150px;
		background: url(../cortes/ficohsa/background-01.jpg) no-repeat;
	    background-size: cover;
	}
	#PagosFicohsa .table-responsive{
		max-height: 400px;
		overflow-y: auto;
	}
	#PagosFicohsa:before,
	#PagosFicohsa:after{
		content: none;
	}
    body.encuentranos{
        padding-top: 104px;
    }
    #Puntos-Ficohsa{
        padding: 20px 0px 0px;
    }
    #Puntos-Ficohsa .text-container:before{
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        width: 100%;
        height: 100%;
        background: url(../cortes/ficohsa/puntofacil_woman.png) no-repeat;
        background-size: contain;
        background-position: 0% 0%;
        opacity: 0;
    }
    #Puntos-Ficohsa .btn-container{
        -webkit-transform: translateY(190%);
        -ms-transform: translateY(190%);
        -o-transform: translateY(190%);
        transform: translateY(190%);
        text-align: left;
    }
    #Puntos-Ficohsa .btn-container a{
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    #Puntos-Ficohsa .text-container p{
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    #Puntos-Ficohsa .text-container.show-speudo:before{
        -webkit-animation: woman-anim 1s ease-out;
        -o-animation: woman-anim 1s ease-out;
        animation: woman-anim 1s ease-out;
        background-position: 100% 0%;
        opacity: 1;
    }
    #Puntos-Ficohsa .text-container.show p{
        -webkit-animation: fadeInDown .8s ease-out;
        -o-animation: fadeInDown .8s ease-out;
        animation: fadeInDown .8s ease-out;
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
    #Puntos-Ficohsa .btn-container.show a{
        -webkit-animation: fadeInRight .8s ease-out;
        -o-animation: fadeInRight .8s ease-out;
        animation: fadeInRight .8s ease-out;
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@media (max-width: 768px){
	#Skills{
		background-position: -160px;
	}
	#headerUpContainer{
		background-position: -150px -20px;	
	}
	.button-wrapper.on-row-xs a{
		width: 40%;
		padding: 6px 12px;
		line-height: 20px;
		font-size: 14px;
	}
	.home-line-divider-red.on-left.on-center-xs{
		margin: 0 auto;
	}
	#Inicio .img-servicios{
		margin: 15px 0px 30px;
	}
	.btn-green.home-btn, 
	.btn-red.home-btn, 
	.btn-blue.home-btn{
		margin: 5px 0px;
	}
	#Inicio #headerUpContainer{
		padding-top: 0;
	}
	.text-center-xs{
		text-align: center;
	}
	ul.ul-links li a{
		border-bottom: none;
	}
	ul.ul-links li a.active{
		border-right: 2px solid;
		padding-right: 30px;
	}
	.float-xs-remove img{
		float: none !important;
		margin: 0 auto;
	}
	.servicio.col-xs-offset-sp{
		margin-left: 7%;
	}
	.servicio.col-xs-offset-sp.extra-xs-offset{
		margin-left: 9%;
	}
	.servicio.xs-push-4-sp-fix{
		left: 30%;
	}
	nav.navbar .navbar-collapse{
		text-align: right;
	}
	.navbar-nav>li>a{
		padding-top: 5px;
		padding-bottom: 5px;
	}
	ul.not-a-ul li{
		padding: 5px 15px;
	}
	#Testimonios .testimonio > div > img{
		float: none !important;
		margin: 0px auto;
		margin-bottom: 25px;
	}
	.ballon:before{
		content: '';
		position: absolute;
		left: 48.5%;
		top: -15px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 12.5px 15px 12.5px;
		border-color: transparent transparent #FFFFFF transparent;
	}
}
@media (min-width: 1200px){
	#Testimonios .testimonio > div > img{
		width: 50%;
	}
}
@media (max-width: 500px){
	/*#Testimonios{
		background-size: 100% 500%; Crappy Browser fallback
		background-size: cover;
	}*/
    .hidden-xxs{
        display: none !important;
    }
	.slide-button{
		opacity: 0;
	}
	#Inicio h1{
		font-size: 28px;
	}
	#Inicio h2{
		font-size: 20px;
	}
	#headerUpContainer{
		background-position: -250px -10px;
		height: auto;
		min-height: 0px;
	}
	#Inicio #headerUpContainer .pad-top{
		padding-top: 50px;
	}
	.button-wrapper.on-row-xs a{
		width: 49%;
	}
	.button-wrapper.on-col-xs a{
		width: 100%;
	}
	.button-wrapper.on-col-xs{
		margin-bottom: 30px;
	}
	.servicio.col-xxs-6{
		width: 50%;
		margin-left: 0%;
	}
	.servicio.col-xxs-6.col-xs-push-4{
		left: 0%;
	}
	.servicio.col-xxs-offset-3{
		margin-left: 25% !important;
	}
	.servicio.col-xxs-6.serv-lone{
		display: block;
		right: 0%;
	}
	#puntofacil-map img{
		z-index: 100000;
	}
}
@media (min-width: 768px) and (max-width: 900px){
	.nav>li>a{
		padding-left: 5px;
		padding-right: 5px;
	}
}
@media (min-width: 992px) and (max-width: 1070px){
	.nav>li>a{
		padding-left: 5px;
		padding-right: 5px;
	}
}

@media (min-width: 768px) and (max-width: 1200px){
	#Inicio h1{
		font-size: 40px;
	}
	#Inicio h2{
		font-size: 20px;
	}
	.text-center-nxs-to-nlg{
		text-align: center;
	}
	.button-wrapper.text-center-nxs-to-nlg a{
		margin: 10px auto;
	}
}
@media (min-width: 992px) and (max-width: 1200px){
	#Inicio #headerUpContainer .pad-top{
		padding-top: 45px;
	}
}
@media (min-width: 768px) and (max-width: 992px){
	#Inicio #headerUpContainer .pad-top{
		padding-top: 20px;
	}
	#Inicio .img-servicios{
		margin: 15px 0px 25px
	}
	.servicio.col-sm-offset-sp{
		margin-left: 7%;
	}
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation: zoomIn .7s ease-in-out;
  -o-animation: zoomIn .7s ease-in-out;
  animation: zoomIn .7s ease-in-out;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation: tada 1s ease-out;
  -o-animation: tada 1s ease-out;
  animation: tada 1s ease-out;
}

@-webkit-keyframes rotY {
  0% {
    opacity: 0;
    -webkit-transform: rotatey(90deg);
    transform: rotatey(90deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: rotatey(0deg);
    transform: rotatey(0deg);
  }
}

@-moz-keyframes rotY {
  0% {
    opacity: 0;
    -moz-transform: rotatey(90deg);
    transform: rotatey(90deg);
  }

  100% {
    opacity: 1;
    -moz-transform: rotatey(0deg);
    transform: rotatey(0deg);
  }
}

@keyframes rotY {
  0% {
    opacity: 0;
    -webkit-transform: rotatey(90deg);
    -moz-transform: rotatey(90deg);
    transform: rotatey(90deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: rotatey(0deg);
    -moz-transform: rotatey(0deg);
    transform: rotatey(0deg);
  }
}

.showRotating {
  -webkit-animation: rotY 1s ease-out;
  -moz-animation: rotY 1s ease-out;
  -o-animation: rotY 1s ease-out;
  animation: rotY 1s ease-out;
}

@-webkit-keyframes goDownNShow {
  0% {
    opacity: 0;
    -webkit-transform: rotatex(90deg) translateY(-60%);
    transform: rotatex(90deg) translateY(-60%);
  }

  100% {
    opacity: 1;
    -webkit-transform: rotatex(0deg)  translateY(0%);
    transform: rotatex(0deg)  translateY(0%);
  }
}

@-moz-keyframes goDownNShow {
  0% {
    opacity: 0;
    -moz-transform: rotatex(90deg)  translateY(-60%);
    transform: rotatex(90deg)  translateY(-60%);
  }

  100% {
    opacity: 1;
    -moz-transform: rotatex(0deg) translateY(0%);
    transform: rotatex(0deg) translateY(0%);
  }
}

@keyframes goDownNShow {
  0% {
    opacity: 0;
    -webkit-transform:rotatex(90deg) translateY(-60%);
    -moz-transform:rotatex(90deg) translateY(-60%);
    -ms-transform:rotatex(90deg) translateY(-60%);
    -o-transform:rotatex(90deg) translateY(-60%);
    transform:rotatex(90deg) translateY(-60%);
  }

  100% {
    opacity: 1;
    -webkit-transform:rotatex(0deg) translateY(0%);
    -moz-transform:rotatex(0deg) translateY(0%);
    -ms-transform:rotatex(90deg) translateY(-60%);
    -o-transform:rotatex(90deg) translateY(-60%);
    transform:rotatex(0deg) translateY(0%);
  }
}

.showGoingDown {
  -webkit-animation: goDownNShow 1s cubic-bezier(.58,.27,.22,.95);
  -moz-animation: goDownNShow 1s cubic-bezier(.58,.27,.22,.95);
  -o-animation: goDownNShow 1s cubic-bezier(.58,.27,.22,.95);
  animation: goDownNShow 1s cubic-bezier(.58,.27,.22,.95);
}


@-webkit-keyframes woman-anim {
    from{
    background-position: 0% 0%;
    opacity: 0;
    }
    to{
    background-position: 100% 0%;
    opacity: 1;
    }
}

@-moz-keyframes woman-anim {
    from{
    background-position: 0% 0%;
    opacity: 0;
    }
    to{
    background-position: 100% 0%;
    opacity: 1;
    }
}

@keyframes woman-anim {
    from{
    background-position: 0% 0%;
    opacity: 0;
    }
    to{
    background-position: 100% 0%;
    opacity: 1;
    }
}

@-webkit-keyframes fadeInRight {
    from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    }

    to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
}

@-moz-keyframes fadeInRight {
    from {
    opacity: 0;
    -moz-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    }

    to {
    opacity: 1;
    -moz-transform: none;
    transform: none;
    }
}

@keyframes fadeInRight {
    from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    }

    to {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    }
}

@-webkit-keyframes fadeInDown {
    from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    }

    to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
}

@-moz-keyframes fadeInDown {
    from {
    opacity: 0;
    -moz-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    }

    to {
    opacity: 1;
    -moz-transform: none;
    transform: none;
    }
}

@keyframes fadeInDown {
    from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    }

    to {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    }
}

/*
Force table width to 100%
*/
 table.table-fixedheader {
    width: 100%;   
}
/*
Set table elements to block mode.  (Normally they are inline).
This allows a responsive table, such as one where columns can be stacked
if the display is narrow.
*/
 table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
    display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
    content:' ';
    display: block;
    visibility: hidden;
    clear: both;
}
/*
When scrolling the table, actually it is only the tbody portion of the
table that scrolls (not the entire table: we want the thead to remain
fixed).  We must specify an explicit height for the tbody.  We include
100px as a default, but it can be overridden elsewhere.

Also, we force the scrollbar to always be displayed so that the usable
width for the table contents doesn't change (such as becoming narrower
when a scrollbar is visible and wider when it is not).
*/
 table.table-fixedheader>tbody {
    overflow-y: scroll;
    height: 300px;
    
}
/*
We really don't want to scroll the thead contents, but we want to force
a scrollbar to be displayed anyway so that the usable width of the thead
will exactly match the tbody.
*/
 table.table-fixedheader>thead {
    overflow-y: scroll;    
}
/*
For browsers that support it (webkit), we set the background color of
the unneeded scrollbar in the thead to make it invisible.  (Setting
visiblity: hidden defeats the purpose, as this alters the usable width
of the thead.)
*/
 table.table-fixedheader>thead::-webkit-scrollbar {
    background-color: inherit;
}


table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
    content:' ';
    display: table-cell;
    visibility: hidden;
    clear: both;
}

/*
We want to set <th> and <td> elements to float left.
We also must explicitly set the width for each column (both for the <th>
and the <td>).  We set to 20% here a default placeholder, but it can be
overridden elsewhere.
*/

 table.table-fixedheader>thead tr th, table.table-fixedheader>tbody tr td {
    float: left;    
    word-wrap:break-word;     
}

 .table-fixedheader tbody tr.success {
  background-color: #dff0d8 !important;
}

/* Toogle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 49px;
  height: 21px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #133558;
}

input:focus + .slider {
  box-shadow: 0 0 1px #133558;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.switch-container {
	display: flex;
	align-items: center;
}

/*DISEÑO PARA LA TABLA DE FICOHSA*/

#visualization {
	border: 1px solid #ccc; 
	
}

.table-responsive{
	border-radius: 9px;
}

/* para ponerle tipo y tamaño fuente a la tabla */
#visualization th,  #visualization td {
	text-align: left;
	padding: 12px;
	font-size: 12px;
	font-family: 'Open Sans';
}

/* para poner color blanco a las celdas al pasar el mouse */
#visualization tr:hover {
	background: white;
}

/* para poner color blanco a las celdas */
#visualization tbody tr:nth-child(odd) td {
    background-color: white;
}
/* para poner color blanco a las celdas */
#visualization tbody tr:nth-child(even) td {
    background-color: white;
}
/*oculta el encabezado de la columa de ID*/
 #visualization th:nth-of-type(1){
    display: none;
} 

/*oculta los item de la columa de ID*/
#visualization td:nth-of-type(1) {
    display: none;
}

/* para no perder tamaño de la tabla al filtrar si no hay datos */
.google-visualization-table-table, .google-visualization-table{
	min-width: 100% !important;
}

#myInput {
	border-radius: 15px;
}

/* Center the loader */
.loading-bro {
  margin: 50px auto;
  width: 150px;
}
.loading-bro > h1 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 1em;
  font-weight: 300;
  color: #8E8E8E;
}

#load {
  width: 150px;
  animation: loading 3s linear infinite;
}
#load #loading-inner {
  stroke-dashoffset: 0;
  stroke-dasharray: 300;
  stroke-width: 10;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  animation: loading-circle 2s linear infinite;
  stroke: #3a5874;
  fill: transparent;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-circle {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -600;
  }
}