/* font face */

@font-face {
    font-family: 'Flexible H200 W200';
    src: url('../fonts/Flexible-H200W200.woff2') format('woff2'),
        url('../fonts/Flexible-H200W200.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Flexible Variable';
    src: url('../fonts/Flexible-Variable.woff2') format('woff2'),
        url('../fonts/Flexible-Variable.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Flexible-H1000W200';
    src:url('../fonts/Flexible-H1000W200.woff') format('woff'),
        url('../fonts/Flexible-H1000W200.woff2') format('woff2'),
        url('../fonts/Flexible-H1000W200.eot'),
        url('../fonts/Flexible-H1000W200.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Flexible-H1000W200.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




/* Variables */
:root {
    --yellow: #EBFF30;
    --blue: #1D5DDC; 
    --black: #090A00;
    --white: #FFFFFF;
    --navy: #0A1F2B;
    --light-blue: #F8FEFF;
    --flexible: 'Flexible Variable';
    --flexible-200: 'Flexible H200 W200';
    --flexible-1000: 'Flexible-H1000W200';
    --opensans: "Open Sans", sans-serif;;
}

/* layout */
* {
    box-sizing: border-box;
}

.container {
    max-width: 1360px;
    padding: 0 15px;
    margin: 0 auto;
}

.container-sm {
    max-width: 1350px;
    padding: 0 15px;
    margin: 0 auto;
}

.fl {
    display: flex;
}

.fl-ai-center {
    align-items: center;
}

.fl-ai-fs {
    align-items: flex-start;
}

.fl-ai-fe {
    align-items: flex-end;
}

.fl-ai-stretch {
    align-items: stretch;
}

.fl-jc-fs {
    justify-content: flex-start;
}

.fl-jc-fe {
    justify-content: flex-end;
}

.fl-jc-center {
    justify-content: center;
}

.fl-jc-sb {
    justify-content: space-between;
}

.fl-dir-col {
    flex-direction: column;
}





.text-center {
    text-align: center;
}








/* Font */
body {
    color: var(--black);
    line-height: 1.5;
    font-size: 20px;
    letter-spacing: 0;
    font-family: var(--opensans);
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
}

.font-lg {
    font-size: 24px;
}

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

.opensans {
    font-family: var(--opensans);
}

.flexible {
    font-family: var(--flexible);
}

.flexible-var {
    font-family: var(--flexible-var);
}

h1, .h1 {
    font-size: 175px;
    font-family: var(--flexible);
    font-optical-sizing: auto;
    font-weight: 400;
    margin: 0;
    line-height: 1;
    letter-spacing: 1.75px;
}

h2, .h2 {
    font-family: var(--flexible);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 130px;
    line-height: 1;
    margin: 0;
    letter-spacing: 1.3px;
}

h3, .h3 {
    font-family: var(--flexible);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 75px;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.75px;
}

h4, .h4 {
    font-family: var(--flexible);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.4px;
}

h5, .h5 {
    font-family: var(--flexible);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.3px;
}

h6, .h6 {
    font-family: var(--flexible);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.2px;
}


/* Button */
.primary-btn, 
.btn {
    font-family: var(--flexible);
    background-color: var(--blue);
    border-radius: 0;
    padding: 5px 20px 15px;
    display: inline-block;
    position: relative;
    color: var(--white);
    text-decoration: none;
    font-size: 75px;
    letter-spacing: 1.5px;
    text-align: center;
    line-height: 1;
}

.btn-yellow {
    background-color: var(--yellow);
    color: var(--blue);
}



/* Background */
.bg-blue {
    background-color: var(--blue);
}

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

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

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

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



/* Color */
.blue {
    color: var(--blue);
}

.yellow {
    color: var(--yellow);
}

.light-blue {
    color: var(--light-blue);
}

.black {
    color: var(--black);
}

.white {
    color: var(--white);
}

.navy {
    color: var(--navy);
}





/* Gutenberg */
.guttenberg-page-con {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.guttenberg-page-con h6, 
.guttenberg-page-con .h6,
.guttenberg-page-con .h5,
.guttenberg-page-con h5,
.guttenberg-page-con h4,
.guttenberg-page-con .h4,
.guttenberg-page-con h3,
.guttenberg-page-con .h3,
.guttenberg-page-con h2,
.guttenberg-page-con .h2, 
.guttenberg-page-con .h1,
.guttenberg-page-con h1 {
    font-weight: 400;
    margin: 2rem 0 1rem;
}

.guttenberg-page-con .entry-title {
    font-weight: 600;
}


/* Responsive */
@media only screen and (max-width: 1024px) {
    body {
        font-size: 16px;
    }

    .font-md {
        font-size: 19px;
    }

    h1, .h1 {
        font-size: 50px;
    }

    h2, .h2 {
        font-size: 42px;
    }

    h3, .h3 {
        font-size: 36px;
    }

    h4, .h4 {
        font-size: 30px;
    }

    h5, .h5 {
        font-size: 26px;
    }

    h6, .h6 {
        font-size: 20px;
    }

}


@media only screen and (max-width: 998px) {


}

@media only screen and (max-width: 767px) {
    body {
        font-size: 16px;
    }
    .font-md {
        font-size: 18px;
    }

    h1, .h1 {
        font-size: 45px;
    }

    h2, .h2 {
        font-size: 38px;
    }
    
    h3, .h3 {
        font-size: 32px;
    }

    h4, .h4 {
        font-size: 28px;
    }

    h5, .h5 {
        font-size: 24px;
    }

    h6, .h6 {
        font-size: 20px;
    }

}