﻿/********** VARIABLES **********/
/*Se anexa esta seccion para declarar variables de uso comun, esto nos permitira usar dichas variables dentro del CSS y no solo al usar clases en el HTML */
/*Nota: Se iran agregando mas variables conforme se puedan ir requiriendo dentro del CSS. Ejemplo de uso: si se deseo usar un color desde el CSS solo se llamara a la variable global ejemplo var(--indigo-dark) y eso hara referencia dicho color declarada en esa variable local con valor hexadecimal #304D6D*/
:root {
    /* Se establecen los colores como variables para poder usarlos dentro del CSS */
    --indigo-dark: #304D6D;
    --indigo-light: #545E75;
    --gray: #818181;
    --white: #FFFFFF;
    --blue-dark: #63ADF2;
    --blue-light: #A7CCED;
    --monserrat-semibold: 'Montserrat-SemiBold';
}

/********** titles **********/
select option {
    font: normal normal lighter 16px/67px 'Montserrat-Medium';
    color: var(--indigo-dark);
}

h1.title {
    font-family: 'Oswald-Heavy';
    font-size: 58px;
    font-stretch: condensed;
    line-height: 65px;
    color: var(--white);
}

h1.intitle {
    font-size: 65px;
    letter-spacing: 3.25px;
    line-height: 65px;
    text-align: center;
    color: var(--white);
}

h1.title-max {
    font-size: 65px;
    letter-spacing: 3.25px;
    line-height: 1;
    color: #82A0BC;
}

h1.title-max::after {
    content: "";
    width: 182px;
    height: 0;
    margin: 14.5px auto 14.5px -30px;
    display: block;
    border-top: solid 7px #df7027;
}

h1.title-min {
    font-size: 47px;
    line-height: 60px;
}

h1.title-min::after {
    content: "";
    width: 244px;
    height: 0;
    margin: 24px auto 24px -80px;
    display: block;
    border-top: solid 5px #df7027;
}

/********** subtitles **********/
h2.subtitle,
h2.insubtitle {
    font-size: 47px;
    line-height: 60px;
    text-align: center;
}

h2.subtitle::after {
    content: "";
    width: 244px;
    height: 0;
    margin: 24px auto 24px auto;
    display: block;
    text-align: center;
    justify-self: center;
    align-self: center;
    border-top: solid 5px #df7027;
}

h2.subtitle-min {
    font-size: 30px;
    line-height: 38px;
}

h2.subtitle-min::after {
    content: "";
    width: 121px;
    height: 0;
    margin: 24.5px auto 24.5px -55px;
    display: block;
    border-top: solid 7px #df7027;
}

/********** unsubtitles **********/
h3.unsubtitle {
    font-size: 30px;
}

h3.unsubtitle::after {
    content: "";
    width: 244px;
    height: 0;
    margin: 34px auto 34px -50px;
    display: block;
    line-height: 38px;
    border-top: solid 5px #df7027;
}

h3.unsubtitle-min {
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    text-transform: uppercase;
}

/********** fonts family **********/
.aurea {
    font-family: 'Aurea-Ultra-Italic';
}

.bebas {
    font-family: 'BebasNeue-ProBold';
}

.helvetica {
    font-family: 'HelveticaNeue-Regular';
}

.monserrat-black {
    font-family: 'Montserrat-Black';
}

.monserrat-bold {
    font-family: 'Montserrat-Bold';
}

.monserrat-extrabold {
    font-family: 'Montserrat-ExtraBold';
}

.monserrat-medium {
    font-family: 'Montserrat-Medium';
}

.monserrat-medium-italic {
    font-family: 'Montserrat-MediumItalic';
}

.monserrat-semibold {
    font-family: var(--monserrat-semibold);
}

.oswald {
    font-family: 'Oswald-Heavy';
}

.oswald-regular {
    font-family: 'Oswald-Regular';
}

/********** letter-spacing automatic **********/
.font-normal {
    font-stretch: normal !important;
}

.font-condensed {
    font-stretch: condensed !important;
}

.font-ex-condensed {
    font-stretch: extra-condensed !important;
}

.font-ul-condensed {
    font-stretch: ultra-condensed !important;
}

.font-expanded {
    font-stretch: expanded !important;
}

.font-ex-expanded {
    font-stretch: extra-expanded !important;
}

.font-ul-expanded {
    font-stretch: ultra-expanded !important;
}

/********** letter-spacing special **********/
.font-spacing-0 {
    letter-spacing: 0 !important;
}

.font-spacing-1 {
    letter-spacing: .25px !important;
}

.font-spacing-2 {
    letter-spacing: .5px !important;
}

.font-spacing-3 {
    letter-spacing: .75px !important;
}

.font-spacing-4 {
    letter-spacing: 1px !important;
}

.font-spacing-5 {
    letter-spacing: 1.25px !important;
}

/********** line-height **********/
.lineh-177 {
    line-height: 177px;
}

.lineh-160 {
    line-height: 160px;
}

.lineh-131 {
    line-height: 131px;
}

.lineh-84 {
    line-height: 84px;
}

.lineh-67 {
    line-height: 67px;
}

.lineh-65 {
    line-height: 65px;
}

.lineh-60 {
    line-height: 60px;
}

.lineh-54 {
    line-height: 54px;
}

.lineh-41 {
    line-height: 41px;
}

.lineh-39 {
    line-height: 39px;
}

.lineh-38 {
    line-height: 38px;
}

.lineh-36 {
    line-height: 36px;
}

.lineh-35 {
    line-height: 35px;
}

.lineh-30 {
    line-height: 30px;
}

.lineh-29 {
    line-height: 29px;
}

.lineh-27 {
    line-height: 27px;
}

.lineh-25 {
    line-height: 25px;
}

.lineh-22 {
    line-height: 22px;
}

.lineh-21 {
    line-height: 21px;
}

.lineh-20 {
    line-height: 20px;
}

.lineh-19 {
    line-height: 19px;
}

.lineh-18 {
    line-height: 18px;
}

.lineh-17 {
    line-height: 17px;
}

.lineh-16 {
    line-height: 16px;
}

.lineh-15 {
    line-height: 15px;
}

.lineh-12 {
    line-height: 12px;
}

.lineh-10 {
    line-height: 10px;
}

.lineh-9 {
    line-height: 9px;
}

.lineh-7 {
    line-height: 7px;
}

.lineh-6 {
    line-height: 6px;
}

.lineh-0 {
    line-height: 1;
}

/********** size **********/
.font-80 {
    font-size: 80px;
}

.font-72 {
    font-size: 72px;
}

.font-65 {
    font-size: 65px;
}

.font-59 {
    font-size: 59px;
}

.font-58 {
    font-size: 58px;
}

.font-47 {
    font-size: 47px;
}

.font-45 {
    font-size: 45px;
}

.font-40 {
    font-size: 40px;
}

.font-30 {
    font-size: 30px;
}

.font-27 {
    font-size: 27px;
}

.font-25 {
    font-size: 25px;
}

.font-24 {
    font-size: 23px;
}

.font-23 {
    font-size: 23px;
}

.font-22 {
    font-size: 22px;
}

.font-22 {
    font-size: 21px;
}

.font-20 {
    font-size: 20px;
}

.font-19 {
    font-size: 19px;
}

.font-18 {
    font-size: 18px;
}

.font-17 {
    font-size: 17px;
}

.font-16 {
    font-size: 16px;
}

.font-15 {
    font-size: 15px;
}

.font-14 {
    font-size: 14px;
}

.font-13 {
    font-size: 13px;
}

.font-12 {
    font-size: 12px;
}

.font-10 {
    font-size: 10px;
}

.font-9 {
    font-size: 9px;
}

.font-8 {
    font-size: 8px;
}

.font-7 {
    font-size: 7px;
}

.font-6 {
    font-size: 6px;
}

.font-5 {
    font-size: 5px;
}

.font-4-5 {
    font-size: 4.5px;
}

.font-4 {
    font-size: 4px;
}

.font-3 {
    font-size: 3px;
}

/********** more top **********/
.top-5 {
    top: 5%;
}

.top-10 {
    top: 10%;
}

.top-15 {
    top: 15%;
}

.top-20 {
    top: 20%;
}

.top-25 {
    top: 25%;
}

.top-75 {
    top: 75%;
}

/********** more right **********/
.start-90 {
    left: 88% !important;
}

/********** more margins **********/
.ms-9 {
    margin-left: 9.5%;
}

.ms-10 {
    margin-left: 10%;
}

.me-8 {
    margin-right: 5rem !important;
}

.me-10 {
    margin-right: 7rem !important;
}

.py-26 {
    padding: 26px 0;
}

.pc-78 {
    padding-top: 78px;
}

/********** margins less **********/
.msl-1 {
    margin-left: -1%;
}

.mel-1 {
    margin-right: -1%;
}

.mtl-5 {
    margin-top: -5%;
}

.mtl-3 {
    margin-top: -3%;
}

/********** z-index **********/
.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.z-index-3 {
    z-index: 3;
}

/********** more height **********/
.mh-25 {
    max-height: 340px
}

.h-5 {
    height: 5%;
}

.h-10 {
    height: 10%;
}

.h-15 {
    height: 15%;
}

.h-20 {
    height: 20%;
}

.h-60 {
    height: 60%;
}

.h-80 {
    height: 80%;
}

.h-90 {
    height: 90%;
}

.h-200 {
    height: 5rem;
}

/********** more width **********/
.w-4 {
    width: 4%;
}

.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-60 {
    width: 60%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

/********** colors background **********/
.bg-indigo-dark {
    background-color: var(--indigo-dark);
}

/***** rgba(48,77,109,1) azul oscuro 1 *****/
.bg-indigo-light {
    background-color: var(--indigo-light);
}

/***** rgba(84,94,17,1) azul oscuro 2 *****/
.bg-blue {
    background-color: #82A0BC;
}

/***** rgba(130,160,188,1) azul claro 1 *****/
.bg-blue-dark {
    background-color: #63ADF2;
}

/***** rgba(99,173,242,1) azul claro 2 *****/
.bg-blue-light {
    background-color: #A7CCED;
}

/***** rgba(167,204,237,1) azul más claro 1 *****/
.bg-cyan-dark {
    background-color: #CFE0EF;
}

/***** rgba(207,224,239,1) azul más claro 2 *****/
.bg-cyan-light {
    background-color: #F0F6FC;
}

/***** rgba(240,246,252,1) azul más claro 3 *****/
.bg-gray {
    background-color: var(--gray);
}

/***** rgba(129,129,129,1) gris oscuro 1 *****/
.bg-gray-dark {
    background-color: #959595;
}

/***** rgba(149,149,149,1) gris oscuro 2 *****/
.bg-gray-light {
    background-color: #D6D6D6;
}

/***** rgba(214,214,214,1) gris claro *****/
.bg-orange {
    background-color: #DF7027;
}

/***** rgba(223,112,39,1) naranja*****/
/********** colors text **********/
.text-indigo-dark {
    color: var(--indigo-dark);
}

.text-indigo-light {
    color: var(--indigo-light);
}

.text-blue {
    color: #82A0BC
}

.text-blue-dark {
    color: #63ADF2;
}

.text-blue-light {
    color: #A7CCED;
}

.text-cyan-dark {
    color: #CFE0EF;
}

.text-cyan-light {
    color: #F0F6FC;
}

.text-gray {
    color: var(--gray);
}

.text-gray-dark {
    color: #959595;
}

.text-gray-light {
    color: #D6D6D6;
}

.text-orange {
    color: #DF7027;
}

/********** colors borders **********/
.border-indigo-dark {
    border-color: var(--indigo-dark) !important;
}

.border-indigo-light {
    border-color: var(--indigo-light) !important;
}

.border-blue {
    border-color: #82A0BC !important;
}

.border-blue-dark {
    border-color: var(--blue-dark) !important;
}

.border-blue-light {
    border-color: var(--blue-light) !important;
}

.border-cyan-dark {
    border-color: #CFE0EF !important;
}

.border-cyan-light {
    border-color: #F0F6FC !important;
}

.border-gray {
    border-color: var(--gray) !important;
}

.border-gray-dark {
    border-color: #959595 !important;
}

.border-gray-light {
    border-color: #D6D6D6 !important;
}

.border-blue-ultralight {
    border-color: #dae5ef !important;
}

.border-orange {
    border-color: #DF7027 !important;
}

/********** borders width **********/
.border-6 {
    border-width: 6px !important;
}

.border-7 {
    border-width: 7px !important;
}

.border-8 {
    border-width: 8px !important;
}

.border-9 {
    border-width: 9px !important;
}

.border-10 {
    border-width: 10px !important;
}

/********** colors buttons **********/
.btn-indigo {
    background-color: var(--indigo-dark) !important;
    border-color: var(--indigo-dark) !important;
    ;
    color: var(--white) !important;
}

.btn-indigo:hover {
    background-color: #82A0BC !important;
    border-color: #82A0BC !important;
}

.btn-blue {
    background-color: #82A0BC;
    border-color: #82A0BC;
    color: var(--white) !important;
}

.btn-blue:hover {
    background-color: #A7CCED;
    border-color: #A7CCED;
    color: var(--white) !important;
}

.btn-gray {
    background-color: var(--gray);
    border-color: var(--gray);
    color: var(--white) !important;
}

.btn-gray:hover {
    background-color: #adb5bd;
    border-color: #adb5bd;
}

.btn-orange {
    background-color: #df7027;
    border-color: #df7027;
}

.btn-orange:hover {
    background-color: #fd9843;
    border-color: #fd9843;
}

.pointer {
    cursor: pointer;
}

/********** shadow text **********/
.text-shadow {
    text-shadow: 1px 3px 3px rgba(0, 0, 0, .5);
}

.text-shadow-sm {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

.text-shadow-lg {
    text-shadow: 1px 3px 10px rgba(0, 0, 0, .7);
}

.text-shadow-none {
    text-shadow: none;
}

/********** languages **********/
.languagesList img {
    width: 20px !important;
    vertical-align: middle;
}

.languagesList .dropdown-menu {
    min-width: 5rem;
    margin: 0 auto;
    position: absolute;
    top: 60px;
    border: none;
    border-radius: 0;
}

/********** header & footer **********/
.nav-icon {
    width: 27px;
    max-width: 27px;
    height: 18px;
}

.logo-footer {
    width: 129.5px;
    max-width: 129.5px;
    height: 19.4px;
    margin-bottom: 17px;
}

.box-sign-in {
    margin: 12px 0;
}

footer p.font-12 {
    height: 15px !important;
    line-height: 15px !important;
}

.social-icon {
    width: 52px;
    max-width: 52px;
}

/********** text-box for widget **********/
.text-min input[type="text"] {
    padding-top: 25px;
}

.input-group-text-min {
    height: 15px;
    margin: 10px 0 0 40px !important;
    position: absolute;
    z-index: 4;
    font-size: 12px;
}

.big-icon input[type="text"] {
    width: 76%;
}

.big-icon .input-group-text {
    padding: 5px 7px;
}

.big-icon i {
    font-size: 24px;
}

/********** links blue dark & hover blue light **********/
.link-indigo-dark {
    height: 23px;
    margin-top: 3px;
    display: block;
    font-size: 12px;
    text-align: right;
    color: #304D6D;
}

.link-indigo-dark:hover {
    color: #82A0BC;
}

/********** TOAST **********/
.toast {
    position: fixed;
    top: 80px;
    right: 41px;
    z-index: 12;
}
