@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap);

@font-face {
    font-family: "Raleway";
    src: url("../assets/fonts/Raleway-Regular.ttf");
  }

  @font-face {
    font-family: "Augustus";
    src: url("../assets/fonts/AUGUSTUS.TTF");
  }


*,*::before,*::after{
    margin:0;
    padding:0;
    box-sizing:inherit
}
html{
    box-sizing:border-box;
    font-size:62.5%
}
@media only screen and (max-width: 75em){
    html{
        font-size:55%
    }
}
body{
    font-family:"Roboto", sans-serif;
    color:#44392D;
    background-color:#ffffff;
    line-height:1.4;
    font-size:1.6rem;
    font-weight:700
}
hr{
    width:50%;
    border:1px solid;
    margin-bottom:4rem
}
@media only screen and (max-width: 37.5em){
    hr{
        width:90%
    }
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0
}
input[type=number]{
    -moz-appearance:textfield
}
input:disabled{
    opacity:1;
    color:#44392D;
    /*background-color:rgba(0,0,0,0.05)*/
}
button:disabled{
 /*   opacity:0.5*/
}
@media print{
    html{
        font-size:45%
    }
    #btn-pdf,#btn-clean,#special-payments-form{
        display:none
    }
    #logos,#special-payments-form{
        margin-bottom:0
    }
    #terms-info-hidden{
        display:flex
    }
}
.container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:2rem
}
.header-logos{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:4rem;
    width:50%
}
@media only screen and (max-width: 37.5em){
    .header-logos{
        width:100%
    }
}
.header-logos .img--carza{
    width:8rem
}
@media only screen and (max-width: 50em){
    .header-logos .img--carza{
        width:7rem
    }
}
.header-logos .img--altana{
    width:16rem
}
@media only screen and (max-width: 50em){
    .header-logos .img--altana{
        width:14rem
    }
}
.header-info{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:2rem;
    width:100vw;
    padding:4rem
}
@media only screen and (max-width: 37.5em){
    .header-info{
        padding:4rem 2rem
    }
}
.header-info__group--right{
    margin-left:4rem
}
@media only screen and (max-width: 37.5em){
    .header-info__group--right{
        margin-left:1rem
    }
}
.header-info__group--left{
    margin-right:4rem
}
@media only screen and (max-width: 37.5em){
    .header-info__group--left{
        margin-right:1rem
    }
}
.header-info__row{
    margin-bottom:.5rem
}
@media only screen and (max-width: 50em){
    .header-info__row{
        display:flex;
        /*flex-direction:column*/
    }
}
.header-info__label{
    display:inline-block;
    word-wrap:break-word;
    font-family: Raleway;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 19px;
/* identical to box height */

text-align: right;

/* Generales/Dim gray - 100% */

color: #686768;
    /*width:18rem*/
}
.header-info__label--right{
font-family: Raleway;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
/* identical to box height */


/* Generales/Dim gray - 100% */

color: #686768;
}
.header-info__label--select{
    padding:.5rem;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.2);
    width:12rem
}
.pdf-button-container{
    display:flex;
    width:30%;
    justify-content:space-between
}
@media only screen and (max-width: 62.5em){
    .pdf-button-container{
        flex-direction:column;
        text-align:center;
        width:100%
    }
}
.unit-form{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:4rem
}
.unit-form__row{
    margin-bottom:2rem;
    display:flex
}
.unit-form__row--end{
    flex-direction:column
}
.unit-form__row-end{
    margin-bottom:1rem
}
.unit-form__row-end input{
    font-weight:900
}
.unit-form__label{
    margin-left:3rem;
    margin-right:3rem;
    display:inline-block;
   /* width:12rem*/
   font-family: Raleway;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 19px;


/* Generales/Dim gray - 100% */

color: #686768;
}
@media only screen and (max-width: 50em){
    .unit-form__label{
        margin-left:2rem
    }
}
.unit-form__label--monthly-payments{
    margin-left:4.5rem
}
@media only screen and (max-width: 50em){
    .unit-form__label--monthly-payments{
        margin-left:3.5rem
    }
}
.unit-form__input{
    padding:.5rem;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.2);
    font-family: Raleway;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
/* identical to box height */

/*text-align: center;*/

/* Generales/Dim gray - 100% */

color: #686768;
}
.unit-form__input--percentage{
    text-align:center;
    width:7rem
}
.unit-form__input--price{
    width:11rem
}
.clean-button-container{
    margin-bottom:4rem
}
.pconfig{
    visibility:hidden
}
.table{
    font-family: Raleway;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 15px;
text-align: center;

/* Generales/Dim gray - 100% */

color: #686768;
}
.table-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:50%;
    margin-bottom:5rem
}
@media only screen and (max-width: 50em){
    .table-container{
        width:100%
    }
}
.table-container h3{
    margin-bottom:2rem
}
.table{
    border-collapse:collapse;
    width:100%
}
.table th,.table td{
    text-align:center;
    padding:.5rem
}
.table tr:nth-child(even){
    background-color:rgba(68,57,45,0.05)
}
.table td{
    font-size:1.2rem
}
.terms{
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-bottom:4rem
}
.terms__p{
    font-size:1rem
}
.terms-hidden{
    margin-top:5rem;
    display:none
}
.terms-hidden--1{
    margin-bottom:20rem
}
.terms-hidden--2{
    margin-bottom:45rem
}
.button{
    color:#ffffff;
    border-radius:12px;
    /*border:none;
    box-shadow:0 2rem 5rem rgba(0,0,0,0.2);*/
    cursor:pointer;
    width:15rem;
   /* padding:0.8rem*/
}
@media only screen and (max-width: 37.5em){
    .button{
        width:12rem
    }
}
.button--primary{
   /*background-color:rgba(68,57,45,0.8);*/
    background: #805374;
    border-radius: 20px;
    width: 136px;
height: 32px;
font-family: Augustus;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 18px;
padding: 8px 20px 6px;

/* Generales / Cultured - 100% */

color: #FAFAFA;


/* Inside Auto Layout */

flex: none;
order: 0;
flex-grow: 0;
margin: 0px 10px;
border: none;
}
.button--secondary{
    background: #fff;
    border-color: #805374;
    border-radius: 20px;
    width: 136px;
height: 32px;
font-family: Augustus;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 18px;

/* Generales / Cultured - 100% */

color: #805374;
}
.image{
    display:flex;
    justify-content:center;
    margin-bottom:4rem
}
.image img{
    max-width:100%;
    height:auto
}
@media only screen and (max-width: 50em){
    .image img{
        max-width:80%;
        height:35rem
    }
}
@media only screen and (max-width: 37.5em){
    .image img{
        display:none
    }
}
.popup{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow: scroll;
   /* background: white;*/
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:rgba(0,0,0,0.8)
}
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)){
    .popup{
        -webkit-backdrop-filter:blur(10px);
        backdrop-filter:blur(10px);
      /*  background: white;*/
    }
}
.popup__container{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    background-color:#ffffff;
    /*padding:10rem;*/
    padding-bottom: 10rem;
    /*border-radius:20px*/
}
@media only screen and (max-width: 37.5em){
    .popup__container{
        /*padding:5rem;*/
        width:90%
    }
}
.popup__group{
    margin-bottom:1rem
}
.popup__label{
    text-transform:uppercase;
    display:inline-block;
    width:20rem
}
.popup__input{
    display:inline-block;
    width:25rem;
    padding:.5rem;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.4);
    font-size:1.6rem
}
@media only screen and (max-width: 50em){
    .popup__input{
        width:100%
    }
}
.popup__button{
    margin-top:4rem;
    text-align:center
}
.popup__error-msg{
    color:#b71607
}
.popup:target{
    opacity:1;
    display:flex;
    visibility:visible
}
.popup:target .popup__container{
    opacity:1;
    display:flex;
    transform:scale(1)
}
.special-payments{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:2rem;
    text-align:center
}
.special-payments h3{
    margin-bottom:2rem
}
.special-payments__form-container{
    display:flex;
    align-items:center
}
@media only screen and (max-width: 37.5em){
    .special-payments__form-container{
        flex-direction:column
    }
}
@media only screen and (max-width: 37.5em){
    .special-payments__group{
        margin-bottom:2rem
    }
}
.special-payments__input{
    padding:.5rem;
    margin-right:1rem;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.2);
    width:15rem;
    font-family: Raleway;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
/* identical to box height */


/* Primario / Sugar Plump - 100% */

color: #805374;

}
@media only screen and (max-width: 37.5em){
    .special-payments__input{
        width:12rem
    }
}

.textCotizador{
    font-family: Augustus;
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 34px;
text-align: center;

/* Primario / Sugar Plump - 100% */

color: #805374;

}
.textTitulo{
    font-family: Augustus;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 23px;
/* identical to box height */


/* Secundario / Charcoal - 100% */

color: #323E48;
}

.textoParrafo{
    font-family: Raleway;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
/* identical to box height */

text-align: right;

/* Generales/Dim gray - 100% */

color: #686768;

}
 
table.comicGreen {
    font-family: "Comic Sans MS", cursive, sans-serif;
    background-color: #EEEEEE;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
  }
  table.comicGreen td, table.comicGreen th {
    padding: 3px 2px;
  }
  table.comicGreen tbody td {
    font-size: 12px;
    color: #787878;
  }
  table.comicGreen tr:nth-child(even) {
    background: #D3D0CB;
  }
  table.comicGreen thead {
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 66%, #FFFFFF 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 66%, #FFFFFF 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 66%, #FFFFFF 100%);
  }
  table.comicGreen thead th {
    font-size: 13px;
    font-weight: normal;
    color: #686768;
    text-align: center;
  }
  table.comicGreen tfoot td {
    font-size: 21px;
  }

 /* input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 0px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
  
}*/

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
    position: relative;
    top: -18px;
    /* bottom: 17px; */
    /* left: -6px; */
    right: 150px;
    font-size: 11px;
    opacity: 1;
    background-color: white;
    font-family: Raleway;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 15px;

/* Generales/Dim gray - 100% */

color: #686768;
}
.widthDatosLote{
    width: 70%;
}
.widthCotizacion{
    width: 50%;
}
.widthCotizacionContainer{
    width: 70%;
}
.widthDatosLoteContainer{
    width: 70%;
}
.widthDatos{
    width: 70%!important;
}
.button-correo{
    width: 230px;
}
@media only screen and (min-width: 1000px){
    .floating-label{
        top: -17px;
        /* bottom: 17px; */
        /* left: -6px; */
        right: 136px;
    }
    .widthDatosLote{
        width: 100%;
    }
    .widthCotizacion{
        width: 100%;
    }
}

@media only screen and (max-width: 780px){
    .floating-label{
        top: -38px;
        /* bottom: 17px; */
        /* left: -6px; */
        right: 38px;
    }
    .widthDatosLoteContainer{
        width: 80%;
    }
}

@media only screen and (max-width: 500px){
    .widthCotizacionContainer{
        width: 100%;
    }
    .widthDatosLoteContainer{
        width: 100%;
    }
    .widthDatos{
        width: 100%!important;
    }
    .floating-label {
        top: -39px;
        /* bottom: 17px; */
        /* left: -6px; */
        right: 21px;
    }
    .button--primary{
        padding: 0;
    }
    .button-correo{
        width: 200px;
    }
    .button-mapa{
        width: 150px!important;
    }
    .header-info__label--select{
        width: 13rem;
    }
}

@media only screen and (max-width: 330px){
    .floating-label {
        top: -37px;
        /* bottom: 17px; */
        /* left: -6px; */
        right: 19px;
    }
}
tr{
    border-style: hidden!important;
}