/*@font-face { font-display: block; font-family: Relaway-light; src: url('/assets/fonts/raleway/raleway-v18-latin-100.woff2'); }*/
/*@font-face { font-display: block; font-family: Relaway-regular; src: url('/assets/fonts/raleway/raleway-v18-latin-regular.woff2'); }*/
/*@font-face { font-display: block; font-family: Relaway-medium; src: url('/assets/fonts/raleway/raleway-v18-latin-600.woff2'); }*/
/*@font-face { font-display: block; font-family: Relaway-bold; src: url('/assets/fonts/raleway/raleway-v18-latin-700.woff2'); }*/

/*@font-face { font-display: block; font-family: Roboto-light; src: url('/assets/fonts/roboto/roboto-v20-latin-100.woff2'); }*/
/*@font-face { font-display: block; font-family: Roboto-regular; src: url('/assets/fonts/roboto/roboto-v20-latin-regular.woff2'); }*/
/*@font-face { font-display: block; font-family: Roboto-meduim; src: url('/assets/fonts/roboto/roboto-v20-latin-600.woff2'); }*/
/*@font-face { font-display: block; font-family: Roboto-bold; src: url('/assets/fonts/roboto/roboto-v20-latin-700.woff2'); }*/

@font-face { font-display: block; font-family: Lato-light; src: url('/assets/fonts/lato/lato-v17-latin-100.woff2'); }
@font-face { font-display: block; font-family: Lato-regular; src: url('/assets/fonts/lato/lato-v17-latin-regular.woff2'); }
@font-face { font-display: block; font-family: Lato-medium; src: url('/assets/fonts/lato/lato-v17-latin-700.woff2'); }
@font-face { font-display: block; font-family: Lato-bold; src: url('/assets/fonts/lato/lato-v17-latin-900.woff2'); }

/* ------------------------------------------------------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    color: #666666;
    font-family: Lato-regular;
    /* animacion al ajustar el tamaño de la ventana */
    /*
    transition: all 0.3s linear!important;
    -o-transition: all 0.3s linear!important;
    -moz-transition: all 0.3s linear!important;
    -webkit-transition: all 0.3s linear!important;
    */
}

body * { outline: none !important; }

nav .nav-item {
    padding: 1rem;
    transition: background 100ms ease-in;
}

nav .nav-item a span{ font-size: 2rem !important; }

nav .nav-item.show { background-color: #096CB6 !important; }

nav .nav-item.show a.nav-link,
nav .nav-item.show a.nav-link span {
    color: #FFFFFF !important;
}

legend { font-family: Lato-bold; }

.dropdown-toggle { padding-right: 1.5rem !important; }

.dropdown-toggle:after { display: none; }

.dropdown-toggle .material-icons {
    position: absolute;
    margin-top: -0.1rem;
}

nav .nav-item a {
    color: #003763 !important;
    font-family: Lato-bold !important;
}

.dropdown-item:active { background-color: #EEEEEE; }

nav .nav-item a div { font-family: Lato-regular; }

nav a.btn {
    padding: 0.4rem 0 0 0;
    margin-left: 4rem;
}

nav .material-icons {
    color: #003763 !important;
    font-size: 2.75rem !important;
}


#auto-cel{ float: left; width: 55%; }

#peru-ciudad{ position: absolute; bottom: 0; right: 0; width: 75%; }

#cotizador select {
    background: url('../../images/sspe/iconos/arrow-down.svg');
    background-size: 0.6rem !important;
}

#cotizador input, #cotizador select {
    color: #FFFFFF;
    background-color: #9fbacd !important;
}

#cotizador input::placeholder { color: #FFFFFF; }

#auto_precio {
    color: #003763 !important;
    text-align:center !important;
}

.circle-button {
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    background-color: #9fbacd;
    color: #003763;
    font-family: Lato-bold;
    line-height: 1.5rem;
    font-size: 1.5rem;
}

#slider-precio.ui-widget-content {
    border: none;
    border-radius: 0;
    background: none;
    background-color: #003763;
    height: 0.5rem;
}

#slider-precio .ui-slider-handle {
    background: none;
    border: none;
    width: 0.8rem;
    height: 1.6rem;
    border-radius: 0.5rem;
    background-color: #EC0044;
    top: -0.5rem;
}

#promo-code{ transition: all 250ms ease; }

#promo-code.hidde {
    height: 0 !important;
    opacity: 0 !important;
}

h1, 
h2, 
h3, 
h4, 
h5 {
    font-family: Lato-medium;
}

h3 { font-size: 1.25rem; }

footer { background-color: #003763; }

footer * { color: #FFFFFF; }

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aux-icon-menu {
    display: block;
    height: 1.5rem;
    margin: 0.25rem auto;
}

.aux-main-logo {
    height: 2rem;
    margin: 1.5rem 1.25rem;
}

.logo_banda{ padding: 0 0.7rem; }

.logo_banda img {
    height: 2rem;
    filter: grayscale(100%) opacity(50%);
    -webkit-filter: grayscale(100%) opacity(50%);
    -moz-filter: grayscale(100%) opacity(50%);
}

.aux-card-container { display: flex; }

.aux-card-box {
    border-radius: 0.5rem;
    box-shadow: 2px 4px 15px rgba(0, 58, 99, 0.2);
    padding: 1rem;
    flex: 1;
}

.aux-C2C {
    background-color: #FFFFFF;
    padding: 1.5rem 0.5rem;
    width: 17.5rem;
}

.aux-C2C input,
.aux-C2C select {
    border-radius: 0.5rem;
}

.aux-C2C label,
.aux-C2C button {
    margin-bottom: 0.125rem;
}

.sidebar {
    display: none;
    min-width: 200px;
    height: 100%;
    position: absolute;
    float: right;
    top: 0;
    right: 0;
}

.overlay {
    background: rgba(102, 102, 102, 0.4);
    display: none;
    position: absolute;
    float: left;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
}

.overlay.active { display: block; }

.aux-card-icon { height: 2rem; }

.aux-texto-rojo,
#titulo-formulario {
    color: #EC0044;
}

.aux-texto-azul,
#titulo-datos-vehiculo,
#titulo-datos-conductor {
    color: #003763;
}

#titulo-datos-vehiculo,
#titulo-datos-conductor {
    font-size: 1rem;
    text-align: center;
}

.aux-btn-azul,
.aux-btn-rojo {
    color: #FFFFFF;
    padding-top: 0.5rem;
    border-radius: 0.5rem;
}

.aux-btn-rojo { background-color: #EC0044; }

.aux-btn-azul {
    background-color: #003763;
    color: #FFFFFF;
}

.aux-btn-blanco {
    background-color: #FFFFFF;
    font-family: Lato-bold;
    padding-top: 0.5rem;
    border-radius: 0.5rem;
    color: #EC0044;
    border: 0.1rem solid #EC0044;
}

.aux-bg-azul { background-color: #096CB6; }
.aux-bg-gnp { background-color: #FF6C0E; }
.aux-bg-hdi { background-color: #006B33; }
.aux-bg-aba { background-color: #6DBED1; }

.aux-bg-azul *,
.aux-bg-gnp *,
.aux-bg-hdi *,
.aux-bg-aba * {
    color: #FFFFFF;
}

.icon-gnp path:not([fill="white"]) { fill: #FF6C0E; }
.icon-hdi path:not([fill="white"]) { fill: #006B33; }
.icon-aba path:not([fill="white"]) { fill: #6DBED1; }

.aux-link-rojo {
    color: #EC0044;
    text-decoration: underline;
    font-family: Lato-bold;
}

.aux-divider {
    border: 1px solid #FFFFFF;
    height: 0;
    padding: 0;
}

.aux-dd .aux-dd-menu {
    background: #003763;
    display: none;
    position: absolute;
}

.aux-dd .aux-dd-menu * { color: #FFFFFF; }

.aux-dd .aux-dd-menu .aux-dd-menu-item {
    display: block;
    clear: both;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 1rem;
}

.aux-dd .aux-dd-menu .aux-divider { margin: 0.75rem 0; }

.aux-pop-C2C { display: none; }

.aux-notification {
    padding: 1rem 1rem 1rem 6rem;
    border-style: solid;
    border-width: 0 0 0 0.4rem;
    box-shadow: 2px 4px 15px rgba(0, 58, 99, 0.2);
    background-repeat: no-repeat;
    background-position: 2.4rem center;
    background-size: 1.8rem;
    font-family: Lato-regular;
    color: #003763;
}

.aux-noti-info {
    border-color: #2A7BB7;
    background-image: url('../images/salud/icono-info.svg');
}

.aux-center-V {
    display: flex;
    align-items: center;
}

.validation-error span.error {
    color: red;
    font-family: Lato-medium;
    font-style: italic;
    position: absolute;
    right: 1rem;
    bottom: -1.2rem;
}

.ui-widget-header {
    background: none !important;
    border: none;
}
.ui-widget-header,
.ui-dialog-titlebar {
    padding: 0.1rem !important;
    margin: 0.1rem !important;
}

.ui-dialog-titlebar-close{
    border: none;
    border-radius: 1rem;
    background-color: transparent;
}

.ui-dialog-titlebar-close::before{
    content: 'X';
    width: 0.8rem;
    height: 0.8rem;
}

.ui-widget-overlay { background: rgba(102, 102, 102, 0.4); }

.tooltip {
    left: 3rem;
    transition: opacity 300ms ease, left 300ms ease;
}

.tooltip .arrow{ display: none; }

.tooltip .tooltip-inner {
    max-width: unset;
    background-color: #2CAC2A;
    border: none;
    border-radius: 0.5rem;
    box-shadow: none;
    color: #FFFFFF;
    font-family: Lato-regular;
    font-size: 1rem;
    padding: 1rem 2rem;
}

.tooltip.show{ opacity: 1; }

.aux-close-button {
    cursor: pointer;
    font-size: 1.125rem;
    position: absolute;
    right: 0.75rem;
    top: 0.25rem;
}

.loader { color: #EC0044; }

#top-left-section p { font-family: Lato-regular; }

#portada { width: 100%; }

#tag-descuento {
    color: #FFFFFF;
    background-color: #003763;
    padding: 1rem;
}

input.aux-custom, select.aux-custom {
    background-color: #9FBACD;
    border-radius: 0.5rem;
    color: #FFFFFF;
}

select.aux-custom {
    padding-right: 2rem;
    appearance: none;
    moz-appearance: none;
    -webkit-appearance: none;
    background: #9FBACD url('../images/otrosSeguros/chevron-down.svg') no-repeat;
    background-size: 20px;
    background-position: calc(100% - 15px) center;
}

input[type="checkbox"].aux-custom,
input[type="radio"].aux-custom {
    width: 0;
    height: 0;
    margin: 0 0.75rem 0 0;
}

input[type="checkbox"].aux-custom:before {
    background-color: #003763;
    border-radius: 0.125rem;
    content: '';
    display: block;
    height: 0.875rem;
    width: 0.875rem;
    padding: 0.0625rem;
    line-height: 0;
    position: absolute;
    top: 0.35rem;
}

input[type="checkbox"].aux-custom:after {
    background-color: #F0F0F0;
    border-radius: 0.125rem;
    border: none;
    content: '';
    height: 0.75rem;
    left: 1rem;
    position: absolute;
    top: 0.45rem;
    width: 0.75rem;
    transition: 100ms ease;
    display: inline-block;
}

input[type="checkbox"].aux-custom:checked:after {
    background-color: transparent;
    border-radius: 0;
    border: solid #FFFFFF;
    border-width: 0 0.125rem .125rem 0;
    content: "";
    height: 0.6rem;
    left: 1.2rem;
    top: 0.35rem;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 0.35rem;
}

input[type="radio"].aux-custom {
    margin: 0.65rem 2rem 0 0;
    float: left;
}

input[type="radio"].aux-custom:before {
    border: 0.125rem solid #003763;
    border-radius: 1rem;
    content: " ";
    padding: 0.5rem;
    height: 0.85rem;
    width: 0.85rem;
}


input[type="radio"].aux-custom:after {
    background-color: #FFFFFF;
    border-radius: 1rem;
    content: " ";
    height: 0.85rem;
    width: 0.85rem;
    padding: 0.5rem;
    position: relative;
    left: -1.125rem;
    transition: 200ms ease;
}

input[type="radio"].aux-custom:checked:after { background-color: #EC0044; }

#cotizador_submit {
    border-radius: 0.5rem;
    background-color: #EC0044;
    font-family: Lato-medium;
    width: auto;
    margin: 0 auto;
    color: #FFFFFF;
    padding: 1rem;
    font-size: 1.2rem;
}

#form-contacto { padding: 1rem 2.75rem; }

#form-contacto * {
    font-family: Lato-regular;
    font-size: 0.9rem;
}

#formMovil {
    display: none;
    overflow-x: hidden;
}

#asesor { height: 10rem; }

#asesorGracias ,
#asesorMobile { height: 15rem; }

.aux-icon{ width: 1.75rem; }

#not-found-facade{ width: 100%; }


#control-buttons{
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
}

#control-buttons .wrapper{
    overflow: hidden;
    position: relative;
}

#control-buttons a,
#control-buttons a:hover,
#control-buttons a:active,
#control-buttons a:visited{
    text-decoration: none;
    color: #FFFFFF;
}

#control-buttons .btn-circle{
  clear: both;
  float: left;
  display: flex;
  justify-content: center; 
  align-items: center;
}

#control-buttons img{
    width: 70%;
    height: 70%;
    margin: 0 auto;
}

.btn-circle {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 2rem;
    box-shadow: 2px 4px 15px rgba(0, 58, 99, 0.2);
    background-color: #FFFFFF;
    display: flex;
    margin-bottom: 0.25rem;
}

.btn-circle *{ display: flex; }

#button-scroll-top {
    clear: both;
    height: 0;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    transition: height 250ms ease, opacity 350ms ease;
}

#button-scroll-top.active {
    height: 3.5rem;
    opacity: 1;
}

#button-scroll-top .btn-circle { background-color: #096CB6; }
#button-scroll-top .btn-circle span { font-size: 3.5rem; }

/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* MEDIA QUERYS*/
/* mobile small */
@media screen and (max-width: 600px) {
    #logo-ss-header, #logo-ss-header-contraste { height: 2.5rem; }

    #info-header .container { overflow: hidden; }

    .aux-dd {
        position: absolute;
        right: 0;
        top: 0.8rem;
        color: #FFFFFF;
    }

    .aux-dd-toggle.active * { color: #FFFFFF !important; }

    .navbar { transition: 250ms ease; }

    .navbar.active { background-color: #003763; }

    .navbar-brand.active #logo-ss-header { display: none !important; }

    .navbar-brand.active #logo-ss-header-contraste { display: inline-block !important; }

    .aux-dd-menu {
        float: right;
        right: 0px;
        width: 105vw;
        z-index: 500;
        height: 100vh
    }

    #top-left-section h1{ font-size: 1.8rem; }

    #top-left-section p{ font-size: 1rem; }

    #cotizador_submit { width: 100%; }
    
    .logo-aseguradora-landing { height: 7rem; }

    #banda_aseguradoras{ margin-bottom: 2rem; }

    /*.logo_banda { width: 33%; flex-basis: unset; }*/

    .logo_banda img { width: 100%; margin-top: 1rem; }

    .aux-img-fix-position-1 {
        position: absolute;
        overflow: hidden;
        width: 100vw;
        right: 0;
        bottom: -9rem;
    }

    .aux-img-fix-position-1 img {
        width: 100%;
        position: relative;
        float: right;
        left: 4.5rem;
    }

    #tag-descuento { width: 100%; }

    #icon-ss-footer { height: 2.5rem; }

    .aux-logo-footer { height: 2.5rem; }

    footer h3{ font-size: 0.95rem; }

    footer a, footer p{ font-size: 0.75rem; }
}
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */

/* tablet medium */
@media screen and (min-width: 601px){
    #cotizador .form-group.row { margin-bottom: 1.5rem; }
}
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */

/* deskop large */
@media screen and (min-width: 993px){

    #logo-ss-header, #logo-ss-header-contraste { height: 3rem; }

    #top-left-section h1 { font-size: 2rem; }

    #top-left-section p { font-size: 1.25rem; }

    #tag-descuento {
        border-radius: 0.5rem 0 0 0.5rem;
        bottom: 32%;
        right: -1rem;
        position: absolute;
        width: 16rem;
    }

    #cotizador label {
        font-size: 0.9rem;
        font-family: Lato-medium;
        color: #003763;
    }

    #cotizador label[for] { margin: 0; }

    #titulo-datos-vehiculo, #titulo-datos-conductor { margin-top: 1rem; }

    .aux-dd .aux-dd-menu {
        float: right;
        min-width: 15rem;
        position: absolute;
        right: 0;
        z-index: 999;
    }

    #cotizador_submit { width: 40%; }

    .logo_banda img { width: 100%; }

    .md-aux-fix-layout-1 {
        bottom: 4.5rem;
        padding-right: 3rem;
        left: 5rem;
    }

    .aux-img-fix-position-1 {
        position: absolute;
        right: 0px;
        bottom: 0;
        width: 33%;
        overflow: hidden;
    }

    #banda_aseguradoras{ width: 100%; }

    .logo-aseguradora-landing { height: 5rem; }

    .aux-logo-footer { height: 3rem; }

    #icon-ss-footer { height: 2rem; }
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
    .row-flex { display: flex; }

    .col-flex { flex-direction: column; flex-grow: 1; padding: 0; }
}