@font-face {
    font-family: 'Creo';
    font-style: normal;
    font-weight: 800;
    src: local('Creo'), url('https://fonts.cdnfonts.com/s/31178/Creo-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Creo-Thin';
    font-style: normal;
    font-weight: 800;
    src: local('Creo'), url('https://fonts.cdnfonts.com/s/31178/Creo.woff') format('woff');
}

:root {
    --red: #ec3c47;
    --orange: #d96729;
    --yellow: #e1a628;
    --blue: #257ec2;
    --darker-blue: #1f68a0;
    --gray: #0b243a;
    --light-gray: #dcdcdc;
    --near-white: #fffeff;
}

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

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

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

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

#pp-nav {
    display: none;
}

.header {
    position: absolute;
    top: 3rem;
    width: 100%;
}

.footer {
    position: absolute;
    bottom: 3rem;
    width: 100%;
}

body {
    font-family: 'Creo', sans-serif !important;
}

.h2,
h2 {
    /* font-size: calc(1.75rem + .9vw); */
    font-size: calc(1.5rem + .9vw);
}

.h1,
h1 {
    /* font-size: calc(3rem + 1.5vw) */
    font-size: calc(2.5rem + 1.5vw)
}

.not-creo {
    font-family: sans-serif !important;
}

.form-width {
    width: 25%;
}

.btn-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--near-white);
}

.btn-primary:hover {
    background: var(--darker-blue);
    border-color: var(--darker-blue);
}

.btn-outline-primary {
    border-color: var(--light-gray);
    color: var(--blue);
}

.btn-outline-primary:hover {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--near-white);
}

.logo-img img {
    width: 150px;
}

.scroll-downs {
    width: 34px;
    height: 55px;
    position: absolute;
    right: 15px;
    bottom: 15px;
    margin: auto;
}

.mousey {
    width: 2px;
    padding: 10px 15px;
    height: 30px;
    border: 2px solid var(--yellow);
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
}

.scroller {
    width: 1px;
    height: 10px;
    border-radius: 25%;
    background-color: var(--yellow);
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15, .41, .69, .94);
    animation-iteration-count: infinite;
}

.scroller-up {
    width: 1px;
    height: 10px;
    border-radius: 25%;
    background-color: var(--yellow);
    animation-name: scroll-up;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15, .41, .69, .94);
    animation-iteration-count: infinite;
}

.mobile-only {
    display: none;
}

@keyframes scroll {
    0% {
        opacity: 0;
    }

    10% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

@keyframes scroll-up {
    0% {
        transform: translateY(15px);
        opacity: 0;
    }

    10% {
        transform: translateY(2.5px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

.fhd-only {
    display: none;
}

.responsive-spacer {
    margin-top: 3rem !important;
}

.navbar {
    font-family: 'Creo-Thin', sans-serif !important;
}

.navbar-link {
    margin-left: 3rem !important;
    font-size: 18px;
    font-weight: 500;
    color: var(--gray);
    text-decoration: none;
    display: inline-block;
    position: relative;
    color: var(--gray);
}

.rounded-btn {
    font-size: 18px;
    padding: 10px 25px;
    border-radius: 25px;
}

.navbar-link:hover {
    color: var(--blue);
}

.navbar-link:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--blue);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.navbar-link:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.desktop-only {
    display: none;
}

.creo-gradient {
    background-color: var(--red);
    background: linear-gradient(to right, var(--red) 32%, var(--orange) 45%, var(--yellow) 60%);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.creo-gradient-II {
    background-color: var(--red);
    background: linear-gradient(to right, var(--red) 40%, var(--orange) 50%, var(--yellow) 60%);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}


.rounded-input {
    border-top: unset;
    border-right: unset;
    border-left: unset;
}

.bg-gray {
    background: #efefef;
}