/* QUISVO */


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


*/

@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: #a4c7e2;
    --color-7: #f4edea;
    --color-8: #85332d;
    --color-9: #111326;
    --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.2rem;
    line-height: 3rem;
    font-weight: 800;
}

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 {
    background-color: var(--color-5);
    -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: 2px solid var(--color-1);
}

.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: 2px solid var(--color-6);
}

.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 20px 50px 0 rgba(204, 208, 225, 0.50);
    padding: 40px 20px 40px 20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    height: 95%;
    border: 1px solid rgba(204, 208, 225, 0.50);
}


/*  .  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: 1rem;
    background-color: var(--color-1);
    color: var(--color-2);
    border: none;
    border: 1px solid var(--color-5);
    padding-left: 10px;
    padding-right: 10px;
    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;
    border-radius: 5px;
}

.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: var(--color-5);
    color: var(--color-1);
    border: 1px solid var(--color-5);
}


/*  .  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;
}