/* Template CSS */
@import '../fonts/ionicons/css/ionicons.min.css';
@import '../fonts/din/stylesheet.css';



/* Calculadora */
#calcula-y-compra {
    background-image: url('/img/fondo-calculadora.jpg');
    background-color: grey;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 100px 0px;
  text-align: center;
}


/* Calculadora contenido texto */

#calcula-y-compra h2 {

color: #ec008c;

font-size: 40px;

line-height: 40px;
font-weight: 600;
}

#calcula-y-compra p {

color: #ffffff;

font-size: 23px;

line-height: 23px;

font-family: Arial !important;
}

/* Caluladora resultado */

#calcula-y-compra input.resultado[type="text"] {
  
width: 100%;
  
max-width: 450px;
  
background: #ffffff;
  
padding: 20px 35px;
  
border-radius: 50px;
  
border: 2px solid #ffffff;
  
text-align: center;
  
font-size: 42px !important;
  
color: #EB008B !important;
  
display: block;
  
margin: 0px auto;
  
box-sizing: border-box;
}


.botones-comparativa {

  display: /*none*/;

}

.botones-clasica {

  display: /*none*/;

}


.calculadora.uk-button.uk-button-primary {

  background: transparent;
  border-color: #eb008b;
  color: #eb008b;
  text-transform: uppercase;
  font-size: 32px;
  width: 100%;
  max-width: 400px;
  padding: 20px;
  margin-bottom: 20px;

}

.calculadora.uk-button.uk-button-primary:hover, 
.calculadora.uk-button.uk-button-primary:focus,
.calculadora.uk-button.uk-button-primary.boton-activo {
  background: transparent;
  color: #5e6977;
  
  border-color: #5e6977;
}


#wrap-results {
  width: 100%;
  background-color:#F3F3F3;
  text-align: left;
    
   }
  
  
  
        #results {
  width: 960px;
  margin: 0 auto;
  padding-top:30px;
  padding-bottom:30px;
  position:relative;
  
   }
  
  
                  .titulo-results {
      font-size:36px;
      line-height: 36px;
      color:#5E6977;
      text-align:center;
      padding:10px;
      /* font-family: 'NeoTechBold'; */
      border-bottom:1px #BAC1C9 dashed;
      border-top:1px #BAC1C9 dashed;
      margin-bottom:30px;
      width: 100%;
   }
   
  
                    .wrap-tablas {
                width:845px;
                height:430px;
  
                width: 100%;
                max-width: 845px;
                margin: 30px auto;
   }
    


                    .tabla01 {
                width:242px;
                height:371px;
                background-color:#DADADA;
                float:left;
                margin-top:53px;
                padding: 6px 0px 0px 6px;
  
   }
   
   
                      .tabla02 {
                width:242px;
                height:424px;
                background-color:#DADADA;
                float:left;
                margin-left:27px;
                padding: 6px 0px 0px 6px;
  
   }
  
  
                            .tabla03 {
                width:242px;
                height:424px;
                background-color:#5E6877;
                float:left;
                padding: 6px 0px 0px 6px;
  
   }
  
  
  
                        .vs{
      width:74px;
      font-size:36px;
      color:#5E6877;
      text-align:center;
      /* font-family: 'NeoTechBold'; */
      float:left;
      padding-top:190px;
   }
   
   

  
                       .field-white01 {
                width:216px;
                height:39px;
                background-color:#FFF;
                color:#5E6777;
                font-size:20px;
                padding:15px 0px 0px 20px;
                margin-bottom:1px;
  
   }
   
   
                         .field-white02 {
                width:216px;
                height:39px;
                background-color:#FFF;
                color:#EB008B;
                font-size:20px;
                padding:15px 0px 0px 20px;
                margin-bottom:1px;
                font-weight:bold;
  
   }
   
   
                         .field-tarjeta {
                width:216px;
                height:39px;
                background-color:#5E6977;
                color:#FFF;
                font-size:20px;
                padding:15px 0px 0px 20px;
                margin-bottom:1px;
                font-weight:bold;
  
   }
   
   
                             .field-prestamo {
                width:216px;
                height:39px;
                background-color:#7C8998;
                color:#FFF;
                font-size:20px;
                padding:15px 0px 0px 20px;
                margin-bottom:1px;
                font-weight:bold;
  
   }
   
   
                         .field-ahorro01 {
                width:216px;
                height:60px;
                background-color:#F3F3F3;
                color:#5E6777;
                font-size:20px;
                padding:30px 0px 0px 20px;
  
   }
   
   
                             .field-percent01 {
                width:216px;
                height:63px;
                background-color:#F3F3F3;
                color:#5E6777;
                font-size:38px;
                padding:26px 0px 0px 20px;
  
   }
   
   
                               .field-percent02 {
                width:216px;
                height:63px;
                background-color:#EB008B;
                color:#FFF;
                font-size:38px;
                padding:26px 0px 0px 20px;
  
   }
   
                                   .percent02-text {
                color:#FFF;
                font-size:23px;
  
   }




                    .wrap-tabla-results {
                width:839px;
                height:130px;
                background-color:#DADADA;
                margin-left:55px;
                padding-top:6px;
                padding-left:6px;
  
   }
   
   
                      .field-total {
                width:145px;
                height:74px;
                background-color:#F3F3F3;
                color:#5E6777;
                font-size:20px;
                padding:50px 0px 0px 20px;
                float:left;
                margin-right:1px;
  
   }
   
      
                      .field-results {
                width:652px;
                height:124px;
                background-color:#FFF;
                color:#5E6777;
                font-size:20px;
                padding:0px 0px 0px 15px;
                float:left;
                margin-right:1px;
  
   }
   
                          .results-tarjeta {
                color:#5E6777;
                width:100px;
                font-size:20px;
                float:left;
                margin-right:14px;
                text-align:right;
  
   }
   
                            .results-barra-tarjeta {
                background-color:#5E6977;
                width:356px;
                height:10px;
                float:left;
                margin-right:10px;
                margin-top:8px;
  
   }
   
                            .results-tarjeta-numbers {
                color:#5E6777;
                font-size:20px;
                float:left;
                text-align:right;
                font-weight:bold;
  
   }
   
   
                                .wrap-results-tarjeta {
                width:650px;
                height:30px;
                float:left;
                margin-top:30px;
  
   }
   
   
                                  .wrap-results-credito {
                width:650px;
                height:40px;
                float:left;
                margin-top:0px;
  
   }
   
   
                            .results-creditologo {
                width:100px;
                float:left;
                margin-right:14px;
  
   }


                            .results-barra-credito {
                background-color:#EB008B;
                width:170px;
                height:10px;
                float:left;
                margin-right:10px;
                margin-top:15px;
  
   }
   
   
                              .results-credito-numbers {
                color:#EB008B;
                font-size:20px;
                float:left;
                text-align:right;
                font-weight:bold;
                margin-top:8px;
  
   }
   
   .page-header h2 {
    margin: 0;
    padding: 0 0 26px 0;
    font-family: 'raleway', Tahoma, Helvetica, sans-serif;
    font-size: 30px;
    color: #343D88;
    line-height: 36px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: normal;
}

.actions-buttons.rc-field {
    text-align: center !important;
}

.rc-field {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0px auto;
}
  
  .rc-fields .rc-field:first-child {
    padding: 0;
}
  form .rc-fields .rc-field, .rc-calculadora .rc-field {
    margin: 0 0 20px 0;
    padding: 0px;
    width: 100%;
    display: block;
    text-align: left;
    font-size: 16px;
    vertical-align: top;
    line-height: 36px;
    box-sizing: border-box;
    max-width: 480px;
    margin: 20px auto;
    color: #5e6977;
} 
  
  form .rc-fields .rc-field .form-label, .form-label {
    line-height: normal;
    margin-bottom: 5px;
    font-weight: bold;
} 

.form-field input {
    margin: 0;
    padding: 10px;
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    height: auto;
    color: #ffffff;
    border: 2px solid #EB008B;
    background: #EB008B;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 50px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

form button {
    margin: 10px 10px 0px 0px;
    padding: 10px 35px;
    /*!  */
    display: inline-block;
    line-height: 20px;
    color: #ffffff;
    font-size: 18px;
    font-family: DINCond;
    font-weight: bold;
    text-align: center;
    background: #EB008B;
    border: 2px solid #EB008B;
    -moz-transition: ease-in-out 0.25s all;
    -o-transition: ease-in-out 0.25s all;
    -webkit-transition: ease-in-out 0.25s all;
    transition: ease-in-out 0.25s all;
    text-transform: uppercase;
    border-radius: 50px;
}

form button:hover, 
form button:focus {

cursor: pointer;

color: #EB008B;

background-color: #ffffff;
}

form .rc-fields .rc-field select {
    margin: 0;
    padding: 10px;
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    height: auto;
    color: #ffffff;
    border: 2px solid #EB008B;
    background: #EB008B;
    vertical-align: top;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 50px;
}

.form-label, .rc-field h4, h4.loans-subtitle-label {
    margin: 0px auto;
    padding: 0;
    font-weight: bold;
    font-size: 24px;
    
    display: inline-block;
    vertical-align: top;
    line-height: 42px;
    font-family: DINCond !important;
}

.rc-field #Cuota, #Cuota, #MontoInicial {
    margin: 0;
    padding: 10px;
    display: inline-block;
    vertical-align: top;
    color: #ffffff;
    width: 100%;
    text-align: left;
    background: #EB008B;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 50px;
    font-size: 32px;
    line-height: 32px;
    box-sizing: border-box;
    border: 2px solid #EB008B;
    font-weight: bold;
}
  


/* Calculadora Botones */

.botones-calculadora {

  display: /*none*/;

}

.boton-calculadora.uk-icon-button {

width: 71px;

height: 71px;

border-radius: 100%;

background: #EB008B;

line-height: 71px;

color: #FFFFFF;

font-size: 51px;

border: 2px solid #ffffff;

position: relative;

top: -20px;
}

.boton-calculadora.uk-icon-button:hover, 
.boton-calculadora.uk-icon-button:focus {

  background: #404751;
  color: #FFFFFF;

}


#results {

width: 100%;

max-width: 960px;

overflow:  hidden;
}


@media screen and (max-width: 960px){


/* Tablas resultado calculadora comparativa */

#results {

  width: 100%;
  max-width: 960px;
}

#results * {

  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  display: inline-block;

}

.wrap-tablas {

  margin-left: 0px;
}
.tabla01 {

  margin-top: 40px;
  float: left;
  width: 50%;
  padding: 6px 0px 6px 6px;
}
.field-white01 {

  width: 100%;
  display: block;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;

}

.field-ahorro01 {
  width: 100%;
}

.tabla02 {
  margin: 0px;
  padding: 6px 6px 6px 6px;
  width: 50%;
}

.field-tarjeta {
  margin: 0px;
  padding: 10px;
  width: 100%;
}

#ahorro-t {
  width: 100%;
  padding: 20px 10px;
  font-size: 28px;
}

.field-ahorro01 {
  padding: 20px 10px;
  font-size: 28px;
}

.vs {
  margin: 20px auto;
  padding: 0px;
  text-align: center;
  width: 100%;
}
.tabla03 {
  width: 100%;
  padding: 6px;
}

.field-prestamo {
  width: 100%;
  padding: 10px;
}
#total-pagado-p {
  width: 100%;
  padding: 10px;
}
.field-percent02 {
  width: 100%;
  padding: 20px 10px;
}
.wrap-tabla-results {
  margin: 0px;
  padding: 6px;
  width: 100%;
}
.field-total {
  width: 100%;
  padding: 20px;
  text-align: center;
}
.field-results {
  padding: 10px;
  width: 100%;
}
.wrap-results-tarjeta {
  width: 50%;
  margin: 10px 0px;
  text-align: center;
  border-right: 2px solid #dadada;
}
.results-tarjeta {
  text-align: center;
  width: 100%;
}
#total-pagado-t-c {
  text-align: center;
  width: 100%;
}
.wrap-results-credito {
  width: 50%;
  text-align: center;
}
.results-creditologo {
  width: 100%;
  margin: 0px;
}
#total-pagado-p-c {
  width: 100%;
  text-align: center;
}
#results-barra-credito {
  display: none;
}

}


#calcula-y-compra .uk-navbar-nav {
    
}

#calcula-y-compra .uk-navbar-nav>li.uk-active>a {
    background-color: #eb008b;
    color: #ffffff;
}

#calcula-y-compra .uk-navbar-nav > li > a {
    background-color: #404751;
    color: #ffffff;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px 35px;
    height: auto;
    font-family: DINCond !important;
    position: relative;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}


@media screen and (max-width: 768px) {
    #calcula-y-compra .uk-navbar-nav > li > a {
        border: 2px solid #ffffff;
        border-radius: 50px;
    }
}

@media screen and (max-width: 580px) {
    #calcula-y-compra .uk-navbar-nav > li, #calcula-y-compra .uk-navbar-nav > li > a {
        width: 100%;
    }
}


@media screen and (min-width: 768px) {

    #calcula-y-compra .uk-navbar-nav > li:first-child > a {

border-radius: 50px 0px 0px 50px;
border-left: 2px solid #ffffff;

}

#calcula-y-compra .uk-navbar-nav > li:last-child > a {

border-radius: 0px 50px 50px 0px;
border-right: 2px solid #ffffff;

}

    #calcula-y-compra .uk-navbar-nav > li:nth-child(n+2) {
    border-left: 2px solid #ffffff;
}

    #calcula-y-compra .uk-navbar-nav > li > a::after,
    #calcula-y-compra .uk-navbar-nav > li > a::before {
        content: "";
        position:absolute;
        transition: all 0.4s ease-in-out 0s;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    #calcula-y-compra .uk-navbar-nav > li.uk-active > a::after {
    border: 10px solid transparent;
    border-top-color: #eb008b;
    bottom: -20px;
    z-index: 1;
}

#calcula-y-compra .uk-navbar-nav > li.uk-active > a::before {
 
    border: 11px solid transparent;
    border-top-color: #ffffff;
    bottom: -24px;
    
    
}

}
h4.loans-subtitle {
    color: #5e6977;
}