/* QUISVO */


/*
version: 20 feb 2020
author: Cesar Davila
QUISVO.com


*/

@font-face {
    font-family: "RightGrotesk-WideMedium";
    src: url('fonts/RightGrotesk-WideMedium.woff') format('woff'),
  url('fonts/RightGrotesk-WideMedium.woff2') format('woff2'),
  url('fonts/RightGrotesk-WideMedium.eot'),
  url('fonts/RightGrotesk-WideMedium.eot?#iefix') format('embedded-opentype'),
  url('fonts/RightGrotesk-WideMedium.otf') format('truetype');
  
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  .examplefontl {
    font-family: "RightGrotesk-WideMedium";
    color: black;
  }

@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
:root {
    --color-1: #ffffff;
    --color-2: #8a8a8d;
    --color-3: #000000;
    --color-4: #1f355e;
    --color-5: #8f9ebc;
    --color-6: #24b84d;
    --color-7: #f4edea;
    --color-8: #85332d;
    --color-9: #00107d;
    --color-10: #f9f6f3;
    --alt-top-bar: 40px;
}

html {
    /*    define el tamaño de la fuente para su uso en REM; Nota, al modificar el tamaño de este valor todos los demas valores del sitio web se modificaran tambien, ya que hacen uso de medida REM*/
    font-size: 14px;
    color: var(--color-9);
}

html,
body {
    overflow-x: hidden;
    font-family: 'Lato', sans-serif;
    background-color: var(--color-1);
}

.debugging {
    border: 1px dashed red;
}


/*  .  TEXTOS . ************************************************************/


/*reset title styles*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    font-weight: 400;
}

h1 b,
h2 b,
h3 b,
h4 b,
h5 b,
h6 b,
p b {
    font-weight: 700;
}

h1 {
    font-size: 3.0rem;
    line-height: 3rem;
    font-family: 'RightGrotesk-WideMedium' !important;
}

h1.h1-2 {
    font-size: 2.5rem;
    line-height: 120%;
    font-weight: 800;
    text-shadow: 1px 1px 5px rgba(41, 3, 37, 0.5);
}

@media(max-width:767px) {
    h1 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    h1.h1-2 {
        font-size: 2.2rem;
        line-height: 120%;
    }
}

h2 {
    font-size: 3.3rem;
    line-height: 3.4rem;
    font-weight: 700;
}

@media(max-width:767px) {
    h2 {
        font-size: 2.2rem;
        line-height: 2.2rem;
    }
}

h2.h2-2 {
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 500;
}

h2.h2-3 {
    font-size: 0.9rem;
    line-height: 1rem;
    font-weight: 500;
}

h2.h2-4 {
    font-size: 2.2rem;
    line-height: 2rem;
    font-weight: 500;
}

h2.h2-5 {
    font-size: 1.2rem;
    line-height: 120%;
    font-weight: 500;
}

h3 {
    font-size: 1.8rem;
    font-weight: 400;
}

@media(max-width:767px) {
    h3 {
        font-size: .9rem;
        line-height: 1rem;
    }
}

h3.h3-2 {
    font-size: 1.3rem;
    font-weight: 500;
}

h4 {
    font-size: 0.5rem;
    font-weight: 500;
}

p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 130%;
}

@media(max-width:767px) {
    p {
        font-size: .8rem;
        font-weight: 300;
        line-height: 130%;
    }
}

p.p2 {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 130%;
}

p.p3 {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 130%;
}


/*  .  TEXT COLORS . ************************************************************/

.text-color-1 {
    color: var(--color-1)
}

.text-color-2 {
    color: var(--color-2);
}

.text-color-3 {
    color: var(--color-3);
}

.text-color-4 {
    color: var(--color-4);
}

.text-color-5 {
    color: var(--color-5) !important;
}

.text-color-6 {
    color: var(--color-6);
}

.text-color-7 {
    color: var(--color-7);
}

.text-color-8 {
    color: var(--color-8);
}


/*  .  BACKGROUND . ************************************************************/

.bg-transparent {
    background-color: transparent !important;
}

.bg-1 {
    background-image: url("../images/bg-1.png");
}

.bg-color-1 {
    background-color: var(--color-1);
}

.bg-color-2 {
    background-color: var(--color-2);
}

.bg-color-3 {
    background-color: var(--color-3);
}

.bg-color-4 {
    background-color: var(--color-4);
}

.bg-color-5 {
    background-color: var(--color-5);
}

.bg-color-6 {
    background-color: var(--color-6);
}

.bg-color-7 {
    background-color: var(--color-7);
}

.bg-color-8 {
    background-color: var(--color-8);
}

.bg-color-9 {
    background-color: var(--color-9);
}

.bg-color-10 {
    background-color: var(--color-10);
}


/*  .  BUTTONS . ************************************************************/

.btn-custom-1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: var(--color-1) !important;
    font-size: 1.12rem;
    font-weight: 700;
    padding: 10px 20px 10px 20px;
    border: 0px;
    width: 100%;
    background: linear-gradient(90deg,#24b84d,#00107d);
    padding: 15px 0;
    background-color: #00107d!important;
}

.btn-custom-1:hover,
.btn-custom-1:focus,
.btn-custom-1:active,
.btn-custom-1.active,
.open .dropdown-toggle.btn-custom-1 {
    color: var(--color-1) !important;
    background-color: var(--color-6);
    border: 0px;
}

.btn-custom-1:active,
.btn-custom-1.active,
.open .dropdown-toggle.btn-custom-1 {
    background-image: none;
}

.btn-custom-1.disabled,
.btn-custom-1[disabled],
fieldset[disabled] .btn-custom-1,
.btn-custom-1.disabled:hover,
.btn-custom-1[disabled]:hover,
fieldset[disabled] .btn-custom-1:hover,
.btn-custom-1.disabled:focus,
.btn-custom-1[disabled]:focus,
fieldset[disabled] .btn-custom-1:focus,
.btn-custom-1.disabled:active,
.btn-custom-1[disabled]:active,
fieldset[disabled] .btn-custom-1:active,
.btn-custom-1.disabled.active,
.btn-custom-1[disabled].active,
fieldset[disabled] .btn-custom-1.active {
    /* background-color: #ffffff;
  border-color: none; */
}


/*  .  CARDS. ************************************************************/

.tarjeta {
    background: var(--color-1);
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);
    padding: 40px 20px 40px 20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    height: 95%;
    border: 0px;
    position: relative;
    top: 50%;
    
}

@media only screen and (max-width: 768px) {
.tarjeta { 
    top: 5%;
    z-index: 99;
}}


/*  .  INPUTS . ************************************************************/

.inputs-1 select {
    font-size: 1rem;
    color: var(--color-5);
    width: 100%;
    height: 44px !important;
    border: none;
    border: 1px solid #452361;
    margin-top: 1px;
    background: url('../images/ico-plus-solid.png') no-repeat;
    background-size: 20px;
    background-position: right 15px center;
    background-color: #F2EFF5;
    padding-left: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(69, 35, 97, 0.24);
}

.inputs-1 input[type=text],
.inputs-1 input[type=email],
.inputs-1 input[type=search],
.inputs-1 input[type=password],
.inputs-1 textarea {
    font-size: 1.1rem;
    color: var(--color-2);
    border: none;
    padding: 27px 12px;
    margin-top: 1px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #fff!important; 
    border: 2px solid #d9d9d9; 
    border-radius: 10px !important; }
}

.inputs-1 input[type=text]:focus,
.inputs-1 input[type=search]:focus,
.inputs-1 input[type=email]:focus,
.inputs-1 input[type=password]:focus,
.inputs-1 textarea:focus {
    background-color: var(--color-1);
    color: var(--color-2);
    border: none;
    border: 1px var(--color-9) solid;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    box-shadow: 2px 0px 10px var(--color-6);
}

.inputs-1 input[type=text]::placeholder,
.inputs-1 input[type=search]::placeholder,
.inputs-1 input[type=email]::placeholder,
.inputs-1 input[type=password]::placeholder,
.inputs-1 textarea::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-2);
    opacity: 1;
    /* Firefox */
}

.inputs-1 input[type=text]:-ms-input-placeholder,
.inputs-1 input[type=search]:-ms-input-placeholder,
.inputs-1 input[type=email]:-ms-input-placeholder,
.inputs-1 input[type=password]:-ms-input-placeholder,
.inputs-1 textarea:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--color-2);
}

.inputs-1 input[type=text]::-ms-input-placeholder,
.inputs-1 input[type=search]::-ms-input-placeholder,
.inputs-1 input[type=email]::-ms-input-placeholder,
.inputs-1 input[type=password]::-ms-input-placeholder,
.inputs-1 textarea::-ms-input-placeholder {
    /* Microsoft Edge */
    color: var(--color-2);
}

.inputs-1 input[type=text],
.inputs-1 input[type=search],
.inputs-1 input[type=email],
.inputs-1 input[type=password] {
    height: 45px;
}

.inputs-1 textarea {
    padding: 20px;
    height: 60px;
}

.inputs-1 .input-group-prepend .input-group-text {
    background-color: #00107d;
    color: var(--color-1);
    border: 1px solid #d9d9d9;
}


/*  .  LINKS . ************************************************************/

a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

a.link-1 {
    color: var(--color-9) !important;
    text-decoration: none;
    font-weight: 300;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

a.link-1:hover {
    color: var(--color-5) !important;
    text-decoration: none;
}


/* TOPBAR */

#topbar-desktop {
    height: 80px !important;
}

#topbar-desktop #logo-desktop {
    height: 60px;
    width: auto;
    margin-top: 10px;
}

#topbar-desktop .link-top {
    display: block;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-1);
    padding: 25px 0 0 0;
}

#topbar-desktop .link-top:hover {
    color: var(--color-5);
}

#topbar-mobile #logo-mobile {
    height: 40px;
    width: auto;
    margin-top: 10px;
}

#topbar-mobile {
    background-color: #00107d;
}

.input-group-prepend {
    display: none;
}
.input-group-prepend {
    display: none;
}



.tit-log {
    color: #00107d;
    font-size: 1.6rem;
    font-weight: bold;
}

.login-left {
    width: 100% !important;
    height: 100% !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    background-position: bottom !important;
    background-repeat: no-repeat !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #00107D !important;
}

.login-right {
    width: 100% !important;
    min-height: 100% !important;
    background: linear-gradient(180deg, #24b84d 50%, #00107d 50%) !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
}


@media screen and (max-width: 736px) {
    .no-mobile {
      display: none;
    }}
  
    @media screen and (min-width: 736px) {
      .only-mobile {
        display: none;
      }}