/* Style Basic */

/*
Premier Plus
Alexis Farfan Perez
UI Designer & Front End
@alexiscrew
*/

/* 
Fonts:
font-family: 'Work Sans', sans-serif;

Colors:
Red:    #D10024
Red 2:  var(--secondary)
Orange: var(--secondary)
Blue:   var(--primary)
Gris:   #423F40
Gris 2: #E6E7E8
*/

/* GENERAL */
*:focus {
    outline: none !important;
}
body {
    background-color: #FFF !important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--primary);
}
a {
    transition: all 0.25s ease;
    cursor: pointer;
}

/* Titles */
h1 {
 font-size: 20px;
}
h2 {
    font-size: 18px;
}
h3 {
    font-size: 16px;
}
h4 {
    font-size: 15px;
}
h5 {
    font-size: 14px;
}

/* COLORS */
.gn-color-orange {
    color: var(--secondary);
}
.gn-color-yellow {
    color: #ffc638;
}
.gn-color-blue {
    color: var(--primary);
}
.gn-color-blue-ligth {
    color: #002b49;
}
.gn-color-black {
    color: #000;
}
.gn-color-platinum {
    color: #686767;
}
.gn-color-gold {
    color: #ac803b;
}
.gn-color-red {
    color: var(--secondary);
}

.gn-bg-orange {
    background-color: var(--secondary);
}
.gn-bg-blue {
    background-color: var(--primary);
}
.gn-bg-blue-ligth {
    background-color: #002b49;
}
.gn-bg-color-grey {
    background-color: #F0F3F6;
}
.gn-bg-red {
    color: var(--secondary);
}
.gn-bg-gradient-bluewhite {
    background: rgb(235,237,241);
    background: linear-gradient(0deg, rgba(235,237,241,1) 0%, rgba(255,255,255,1) 100%);
}
.gn-bg-grey-dark {
    background-color: #808080;
}
.gn-bg-greyblue {
    background-color: #EFF2F6;
}

.gn-bordercolor-blue {
    border-color: var(--primary) !important;
}
.gn-bordercolor-orange {
    border-color: var(--secondary) !important;
}
.gn-bordercolor-red {
    border-color: var(--secondary) !important;
}
/* Colors extra */
.bg-gradient {
    background: linear-gradient(100.6deg, #0D2E45 -28.9%, #D60E41 188.5%);
}
.bg-gradient-2 {
    background: linear-gradient(116.99deg, #132E44 0%, #152D44 28%, #1E2C44 45%, #2C2B44 60%, #412844 73%, #5C2544 86%, #7D2244 97%, #882145 100%);
}
.bg-gradient-3 {
    background: linear-gradient( -225deg, rgb(20,46,67) 0%, rgb(115,38,69) 60%, rgb(209,29,71) 100%);
}

/* LABELS */
label {
    margin-bottom: 0;
    margin-left: 2px;
    font-size: 14px;
}

/* TEXT */
.font-weight-bold {
    font-weight: 600 !important;
}
.gn-text-small {
    font-size: 14px;
}

/* TITLES */
.gn-big-title {
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 40px;
    line-height: 110%;
}

.gn-sub-title {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 110%;
}

.gn-dual-title, .gn-dual-title-reverse {
    display: inline-block;
    border: solid 1px var(--primary);
    border-radius: 50px;
    color: var(--secondary);
    background-color: #FFF;
}

.gn-dual-title {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 4px 24px 4px 32px;
}

.gn-dual-title-reverse {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 4px 32px 4px 24px;
}

    .gn-dual-title span, .gn-dual-title-reverse span {
        color: var(--primary);
        font-weight: 800;
        transition: all 0.25s ease;
    }

    .gn-dual-title:hover, .gn-dual-title-reverse:hover {
        color: var(--primary);
    }

        .gn-dual-title:hover span, .gn-dual-title-reverse:hover span {
            color: var(--secondary);
        }

/* BUTTONS */
button {
    border: none;
}

.gn-link {
    text-decoration: underline;
}

.btn.focus, .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 120, 0, 0.25);
}

/* FORMS */
.custom-input-icon .icon-box {
    position: relative;
}

    .custom-input-icon .icon-box input {
        padding-left: 28px;
    }

    .custom-input-icon .icon-box i {
        position: absolute;
        font-size: 16px;
        color: #C3C3C3;
        top: 50%;
        left: 8px;
        bottom: 0;
        transform: translateY(-50%);
    }

/* HOOKS */
.flex-auto {
    flex: auto;
}
.line-height-100 {
    line-height: 100%;
}
.line-height-125 {
    line-height: 125%;
}


/* RESPONSIVE */
@media only screen and (min-width: 992px) {
    /* Titles */
    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 22px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 18px;
    }
    h5 {
        font-size: 17px;
    }

    .gn-big-title {
        font-size: 40px;
    }

    .gn-sub-title {
        margin-bottom: 24px;
    }

    .accordion {
        font-size: 16px;
    }
}