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

*{-webkit-font-smoothing: antialiased;font-family: 'Montserrat', sans-serif; font-weight: 400;text-rendering: optimizeLegibility; box-sizing:border-box;padding:0;margin:0;border:none;outline:none;text-decoration:none;color:#333;font-size:1em;cursor:default;transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
body,html{width:100%;height:auto; overflow-x: hidden}

.wrap{width:100%;z-index:1; height: auto; overflow: hidden}

.left{float:left;left:0}
.right{float:right;right:0}
.clear{clear:both}

.section {
    width: 100%;
    position: relative;
    z-index: 1;
    margin: auto
}

.ancla-sec {
    position: absolute;
    z-index: -0;
    top: -150px;
    left: 0;
    right: 0;
    padding: 3px;
}

.btn-men-resp {
    position: absolute;
    padding: 25px;
    right: 0;
    font-size: 1.8em;
    cursor: pointer;
    display: none
}

.btn-men-resp:hover{ color: #f1592a }

hr{ border-bottom: 1px solid rgba(215,215,215,1.00); margin: 25px 0}

.content_section{position:relative;max-width:1200px;width:100%;margin:auto;height:inherit; display: table; padding: 0 70px}

.col-1,.col-2,.col-3,.col-4,.col-5{position:relative; }
.col-1{width:100%;    max-width: 1600px; margin: auto}
.col-2{width:50%;}
.col-3{width:33.33%}
.col-4{width:25%}
.col-5{width:20%}

.box-30{width:30%; position:relative;}
.box-70{width:70%; position:relative;}
.box-25{width:25%; position:relative;}
.box-75{width:75%; position:relative;}

.clr-w{ color: #fff}


.pad-gral{padding:25px 8%}
.pad-reg{padding: 25px}

.center-txt{text-align:center}
.center-box{ margin: auto}

.left-txt{ text-align: left}
.right-txt{ text-align: right}

a,p,li,span{font-family: 'Montserrat', sans-serif; font-size: inherit;       line-height: 1.7em; color: inherit}

li, p {
    margin: 15px 0;
}

.txt-white{ color: #fff}
.txt-red{ color: #f1592a}
.back-gray{ background:#555}
.back-blu{ background: #0067c1}

.mid-txt{ vertical-align: middle}

.back-fix{ background-size: cover; background-position: center !important; background-attachment: fixed !important; background-size: contain !important}
.small-txt{ font-size: 0.8em }

.title{font-size:2em;font-family: 'Montserrat', sans-serif;font-weight:700; text-transform: uppercase}
.title-section {
    font-size: 1.8em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color:#262262;
    text-align: center;
    padding: 15px;
    text-transform: uppercase
}

.title-section-content {
    width: 100%;
    position: relative;
    top: -45px;
    max-width: 400px;
    margin: auto;
    background:#fff;
    border-radius: 10px
}

.title-section-content-mid {
    width: 50%;
    position: absolute;
    top: -85px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

/*
.title-section-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-bottom: 109px solid white;
    border-left: 0px solid transparent;
    border-right: 50px solid transparent;
    border-top: 0px solid transparent;
    height: 0;
    width: 100%;
    z-index: -1
}
*/

.borderbox{ border: 1px solid rgba(0,0,0,0.3); margin-bottom: 15px}


.section-end-trap{width: 50%; position: absolute;    bottom: 30px; right: -20px}
.section-end-trap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transform-style: preserve-3d;
  -webkit-transform: perspective(50vw) rotateX(-30deg);
  transform: perspective(50vw) rotateX(-30deg);
    height: 110px;
    width: 100%;
    background: #fff;
    z-index: -1
}


.sub-title {
    font-size: 1.5em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.btn-gral {
    background: rgba(217, 30, 67, 0);
    padding: 15px 20px;
    font-weight: bold;
    margin: 45px auto;
    border-radius: 9px;
    border: solid 1px;
}

.btn-gral i{ color: inherit}

.btn-gral:hover i{    color: #fff;}

.btn-gral:hover{
    color: #fff;
    background: #f1592a;
}

.dtb{ display: table}
.dtc{ display: table-cell}

b{font-size:inherit !important;font-weight:800;color:inherit}
sup{color:inherit;font-family:inherit;font-weight: inherit}
a{cursor:pointer !important;appearance:normal;color:inherit;}

.back-y{background:  rgba(255,166,0,1.00)}
.back-n{background: rgba(255,134,0,1.00)}



/*HEADER*/
.header-content {
background: #fff;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    padding: 15px;
    box-shadow: 0px 0px 12px -1px #0000007d;
    z-index: 1001;
    color: #fff;
    border-bottom: 3px solid rgba(255,174,0,1.00);

}
.header {
    display: table;
    width: 100%;
    margin: auto;
    max-width: 1300px;
}

.hdrWhite {
    width: calc(100% - 25vw)!important;
    position: absolute;
    top: 0;
    bottom: 0;

    z-index: -1;
    right: 0;
    max-width: 1260px;
}

.header div {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: auto;
    padding: 15px 0;
}

nav {
    display: table-cell;
    vertical-align: middle;
    text-align: -webkit-right;
    text-align: -moz-right;
    text-align: -o-right;
}

.header .btn-head {
    color: #696969;
    text-transform: uppercase;
    height: 20px;
    font-size: 0.85em;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: auto;
    margin: 0px 10px;
    display: inline-block;
    padding: 0 5px;
}

.btn-head a:hover {
    color: #ffae00 !important;
}

.close-options{ display: none !important}

.btn-head a i { color: inherit !important; font-size: inherit !important}

.header .logo-head img {
    max-width: 200px;
    position: relative;
}

.header .btn-head a {
    display: block;
    font-weight: 700;
}




.btn-head a .fa{
    font-size: 1.3em;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer
}


.btn-credito-personal,.btn-credito-simple{ max-width:110px; position: relative}

.option-creditos,.option-credito-simple {
    color: #0f1f2d;
    padding: 10px;
    background: #c4c4c4;
    position: absolute;
    left: 0;
    right: 0;
    top:70px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 4px 11px 1px rgba(0,0,0,0.4);
    overflow: hidden;
    opacity: 0;
    display: none !important
}

.option-creditos a,.option-credito-simple a {
    display: block;
    text-transform: initial;
    font-size: 11px;
    max-width: 130px;
    margin: auto;
    padding: 5px 0;
    text-align: center

}



.option-creditos-active,.option-credito-simple-active{opacity: 1  ; display: table-cell !important}


/*SLIDER*/
#slides{min-height:600px;background:#E7E7E7;z-index:0; position: relative; margin-top: 65px }
.slide_content{position:absolute;left:0;right:0;top:0;bottom:0;background-size:cover;background-position:center;padding:25px;}
.slide_content:before{content:'';position:absolute;background:rgba(180,180,180,0.2);left:0;right:0;top:0;bottom:0;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease;}
.slide_text {display: table-cell; vertical-align: middle}
.slide-text-box {
    max-width: 80%;
    font-size: 1.5em;
    text-shadow: 0 0 5px rgba(0,0,0,0.5)
}
.slide_text p b{ font-size: 1.5em !important;}
.slides-navigation{ position: absolute; top: 45%; z-index: 1000; left: 0; right: 0; width: 100%}
.slides-navigation a {position: absolute; display: block; font-size: 3em; display: block}
.slides-navigation a i {cursor: pointer}
.slides-navigation .next{ text-align: right; right: 55px}
.slides-navigation .prev{ text-align: left; left: 55px}

.slides-navigation .next i:hover, .slides-navigation .prev i:hover{color: #f1592a}




/*INTRO*/
.intro-text img{ max-width: 200px}
.intro-text p{ font-size: 1.2em; font-weight: 600 }
.intro { display: table; margin: auto}

/*SEP*/
.section-sep{ padding: 125px 0; text-align: center; background: rgba(46,46,46,1.00); color:#fff; font-style: italic;}



/*SERVICIOS*/
.servicios-section {
    padding: 100px 0 100px 0;
    background: url(../img/solar-hot-water-system-PA7EZB5.jpg);
    background-size: cover;
    background-position: center bottom;
    border-top: 2px solid #f2f2f2;
}

.serviceBox {
    padding: 10px;
    max-height: 215px;
    height: 100vh;
}

.serviceBox .dtb {
    height: 100%;
    width: 100%;
    background: rgba(150, 132, 255, 0.09);
    border: 1px solid #c6c6c6;
}

.serviceBox .dtb div{ padding: 25px}

.serviceBox .dtb .box-25{ width: 200px; background-size: cover !important; background-position: center !important}

.boxCerts p {
    position: relative;
    vertical-align: middle;
    padding: 0 35px 0 0;
}

.boxCerts p i {font-size: 35px;}
.boxCerts p span{padding-left: 15px}

.boxCerts p *{ vertical-align: middle} 

.gal-pic {
    height: 100vh;
    max-height: 250px;
    min-height: 140px;
    padding: 20px;
    position: relative
}


.gal-pic .pic{ position: absolute; left: 10px; right: 10px; top: 10px; bottom: 10px; background-position: center !important; background-size: cover !important;  margin: auto; opacity: 0.7; border-bottom: 5px solid rgba(171,171,171,1.00); cursor: pointer !important}
.gal-pic .pic:hover{ opacity: 1;  border-bottom: 5px solid rgba(18,51,156,1.00)}

/*NOSOTROS*/

.section-nosotros{ padding: 135px 0}
.box-nos {
    margin-bottom: 35px;
    min-height: 330px;
    padding-left: 105px;
}
.box-nos .box-70{  background: #f2f2f2; vertical-align: middle;     }
.box-nos .box-30{ text-align: center;margin-bottom: 35px; vertical-align: middle; color: #fff}

.tub {
    position: absolute;
    width: 70px;
    height: 360px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    left: 36px;
    top: 145px !important;
}

.tub-bot{ top: 0; background: url(../img/bot.png); background-position: bottom center}
.tub-top{ bottom: 0; background: url(../img/top.png); background-position: top center}

/*CARACTER{ISTICAS Y BENEFICIOS */

.container_car_ben{ display: table; position: relative;top:-45px; width: 100%}
.info-car-ben {
    display: table-cell;
    vertical-align: top;

    position: relative;
}
.info-car-ben table tr td {padding: 0 15px;}
.info-car-ben table tr td img{ width: 60px}
.info-car-ben table tr td p{ margin: 0}

/*REQUISITOS*/
.section-requisitos{background-image: url(../img/back-requisitos.jpg);  background-size: cover; background-position: center}
.requisitos  .sub-title{ font-size: 2.5em; }
.requisitos  .sub-title span{ font-size: 1.3em !important; font-weight: bold}
.requisitos {
    display: table;
    margin: auto;
    padding-bottom: 100px;
}
.requisitos .col-2{ display: table-cell; vertical-align: middle}

.requisitos .col-2:nth-child(2) {
    padding: 0 45px;
    border-left: 1px solid#262262;
}

.requisitos-content::before{content: ''; position: absolute; left: -55px; right: -55px; top: -55px; bottom: -55px;
    
    -ms-transform: skewX(-10deg)  translate(0px,0px);
    -webkit-transform: skewX(-10deg) translate(0px,0px);
    transform: skewX(-10deg)  translate(0px,0px);
    z-index: -1;
    background: #262262;
        filter:contrast(110%);
    opacity: 0.9

}

.table-req{ width: 100%; z-index: 1}

.table-req tr td p{ margin: 0}

/*CONTACTO*/
.content-solicita{display: table}
.content-solicita .col-2{ display: table-cell; vertical-align: middle}

.solicita-form input,.solicita-form textarea  {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.5em;
    font-weight: 400;
    border-radius: 0;
    background: #e5e5e5;
    color: #000;
    outline: none;
    border: none;
    height: 70px;
    margin: 5px 0;
    font-size: 1em; 
}

.solicita-form textarea { max-width: 100%;     min-height: 200px; height: 10vw}

.solicita-form button {
    border-radius: 0;
    border: none;
    outline: none;
    right: 0;
    top: 4px;
    height: 70px;
    font-size: 1.5em;
    background: #262262;
    color: aliceblue;
    padding: 15px 20px;
    width: 100%;
    cursor: pointer
}
.solicita-form button:hover{ background: #f1592a}



/*FOOTER*/
.footer{        background: #202020;}
.info-conta{ position: relative; padding-left: 25px}
.info-conta i{ position: absolute; left: 0; top: 5px}

.section-legales{background: #d2d2d2}

.legales{ display: table}
.content-legales { display: table-cell; vertical-align: top}
.content-legales:nth-child(2){ max-width: 600px; border-left: 1px solid rgba(142,142,142,1.00)}
.content-legales p a:hover{ text-decoration: underline}

.footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url(../img/back-cad.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    filter: contrast(140%);
}

.content-contact-footer { display: table; width: 100%}
.info-footer { display: table-cell; vertical-align: text-top; width: 33.33%; padding: 25px}



.vbox-container img {
    max-width: 100%;
    height: auto;
    max-width: 700px !important;
}

.btn-tel {
    position: fixed;
    width: 390px;
    top: 66px;
    right: -80px;
    z-index: 1000;
}

.hide-quest {
    font-size: 15px;
    position: absolute;
    color: #ffffff;
    right: 80px;
    top: 5px;
    bottom: 17px;
    padding: 30px 10px;
    background: #bf1839;
    border-left: 1px solid #9f1d1d;
    cursor: pointer; 
}



.show-quest {
    font-size: 4em;
    position: fixed;
    color:#262262;
    right: 20px;
    top: 71px;
    padding: 10px 10px;
    cursor: pointer;
    z-index: 1000;
}

.show-quest .fa {text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.42);}


.fad { padding: 0 15px}

#quest-btn{ display: none}

.btn-tel a{ display: block; cursor: pointer !important}
.btn-tel a img{ cursor: pointer;padding:5px; }
.btn-tel a img:hover{ padding: 4px; }

#btn_up {
    position: fixed;
    right: 35px;
    bottom: 25px;
    z-index: 1000;
}

#btn_up a .fa {
    font-size: 2.5em;
    color: #ee2e3a;
    cursor: pointer;
    text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.42);
}


#btn_solicita {
    position: fixed;
    top:0;
    left:0;
    right: 0px;
    margin: auto;
    z-index: 1001;
    text-align: center;
    padding: 10px 25px;
    color: rgb(255, 255, 255);
    background: rgb(217, 30, 67);
    box-shadow: rgba(0, 0, 0, 0.5) -3px 0px 6px 1px;
    font-size: 1.3em;
    font-weight: bold;
    height: 71px

}

.btn-solicita{
    padding: 5px 10px 5px 35px;
    border-left: 1px solid #fff;
    top: 9px;
    color: #fff;
    position: relative;
    font-size: 1.5em;
    font-weight: 500;
    z-index: 1000
}


#btn_tel{ position: fixed; padding: 10px 15px; border-top-left-radius: 10px;  border-top-right-radius: 10px; right: -78px; top: 50%; background:rgba(196,196,196,1.00); color: #262262; box-shadow: -1px -2px 3px rgba(0,0,0,0.3);

    -ms-transform: rotate(-90deg) translateY(0px); 
    -webkit-transform: rotate(-90deg) translateY(0px); 
    transform: rotate(-90deg) translateY(0px);
    font-size: 16px;
    font-weight: 400;
    
}
#btn_tel:hover{
    -ms-transform: rotate(-90deg) translateY(-5px); 
    -webkit-transform: rotate(-90deg)translateY(-5px); 
    transform: rotate(-90deg) translateY(-5px); 
}

.bansec{padding-top: 110px}
.txt-avisos p:first-child{ font-weight: bold}


.imgrcab2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50vw;
    max-width: 780px;
    height: 780px;
    background-size: contain !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    z-index: 10;
}

.btn-contact-send{ display: inline-block; }


.imgrcab {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: url(../img/Layer-3-copy-2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 600px;
    top: -51px;
}
@media screen and (max-width: 1000px){
    
     a,p,li,span{font-family: 'Montserrat', sans-serif;     line-height: 1.7em; font-size: 0.9em}
    .box-70,.box-30{ width: 50%}
.options {
    position: fixed;
    left: 100%;
    right: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    top: 0;
    background: aliceblue;
    padding: 25px;
}

.header .btn-head {
    height: auto !important;
    width: 100%;
    display: block;
    border-bottom: 1px solid #00000014;
    padding: 25px;
    margin: 0 !important;
    line-height: normal;
    font-size: 1em;
}    
    .header .btn-head a { border-right: none !important}
    
    .close-options,.btn-men-resp { display: block !important}
    
    .btn-men-resp{     position: absolute;top: 14px;}
    
    
    
}

@media screen and (max-width: 900px){
.header .logo-head img {
    max-width: 140px;
    position: relative;
}    
.imgrcab2 {
    display: none;
}    
    
.gal-pic {
    height: 100vh;
    max-height: 160px;
    min-height: 140px;
    padding: 20px;
    position: relative;
    width: 50%;
}    
    .section-nosotros { padding-bottom: 35px}
.serviceBox {
    padding: 10px;
    max-height: 255px;
    height: 100vh;
}    
.section-nosotros .col-1 {
    border-left: none !important;
}    
.tub {

    display: none;
}
    .box-nos{ padding: 0}
.imgrcab {
    display: none;
}    
    
    .box-nos .box-70, .box-nos .box-30{ width: 100%}
    
.slide_text p b {
    font-size: 1em !important;
}
    .box-70,.box-30,.col-2{ width: 100%; display: block !important}
    .box-70{ border-bottom: 1px solid rgba(0,0,0,0.2); border-right: none !important}
    .mail-partner { opacity: 0.4;font-size: 0.7em;}
    .sub-title {font-size: 1.5em;}
    .container_car_ben { padding: 25px 0;}    
    .solicita-form input, .solicita-form textarea {    height: 59px;font-size: 0.8em;}    
    .content-solicita .col-2 {display: table-cell;padding: 25px 0;}
    
    .slide_content{background-position:left center;}
    
    
    .slide-text-box { width: 90%; margin: auto; max-width: inherit;  text-align: center; float: none}
    
.slide-text-box .sub-title {
    font-size: 1.5em;
    background: rgba(0, 0, 0, 0.6);
    padding: 25px;
    color: #fff !important;
    text-shadow: 1px 1px 5px #000;
}
    
    .content_section {padding: 0;     max-width: 550px;}
    .slides-navigation a i {cursor: pointer; font-size: 0.5em;color: #fff;}
    
    .info-footer {
    display: block;
    width: 100%;
    padding: 25px 0;
    border-left: none !important;
    border-bottom: 1px solid;
}
    
.col-4,.col-3 {
    width: 100%;
}            
          
.pasos .box-70 {
    padding: 25px;
    border-left: 0;
    width: 100%;
}    
    
    
    .contact-footer img{ width: 70% !important}
    
    .pasos .col-2{ padding: 25px 0 !important}
    
.pad-reg {
    padding: 25px 0;
}    
    
.title {
    font-size: 1.5em;
}    
    .ventaja{ padding: 25px}
    
.serviceBox .dtb {
    height: auto; 
    width: 100%; 
    background: rgba(150, 132, 255, 0.09);
    border: 1px solid #c6c6c6;
    display: block !important;
}    
.serviceBox .dtb .dtc {
    width: 100%; 
    display: block !important;
    min-height: 200px
}    
.serviceBox {
    padding: 25px !important;
    max-height: none !important;
    height: auto !important;
}    
    
    
}