@charset "UTF-8";

/* Use box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin and padding */
* {
    margin: 0;
    padding: 0;
}

/* Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

/* Base Styles
/* html is set to 62.5% so that all the REM measurements
are based on 10px sizing. So 1.5rem = 15px.*/

html {
    font-size: 62.5%;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    /* Tell the browser to render the page right away with fallback fonts
       and then redraw the page once the fonts have loaded */
    font-display: swap;
    src: url(font/Roboto-Italic.ttf) format('ttf');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(font/Roboto-Regular.ttf) format('ttf');
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(font/Poppins-Italic.ttf) format('ttf');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(font/Poppins-Regular.ttf) format('ttf');
}

body {
    width: 100%;
    min-height: 100vh;
    font-family: Poppins,
        Roboto,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif,
        -apple-system,
        BlinkMacSystemFont;
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
    Background-color: white;
    color: black;
}

main {
    font-size: 1.6rem;
    line-height: 1.5;
}

header {
    font-size: 1.8rem;
    line-height: 2;
    font-weight: 500;
    text-align: center;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

p {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
    text-wrap: pretty;
    overflow-wrap: break-word;
    padding: min(1rem, 8%);
}

footer {
    Background-color: #FFB250;
    color: white;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
    padding: min(1rem, 8%);
}

img {
    max-width: 100%;
    width: 1000px;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border-width: 0;
    border-top: 0;
}

/* Grid */

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 1200px;
    gap: 2rem;
    margin: auto;
}

@media only screen and (max-width: 900px) {
    .grid-wrapper {
        margin-left: 15px;
        margin-right: 15px;
    }
}

.grid-wrapper > div {
    place-content: center;
    Background-color: white;
    color: black;
    border-style: none;
    overflow: hidden;
    padding-bottom: min(2rem, 8%);
    box-shadow: none;
}

.grid-wrapper-text {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 1200px;
    gap: 2rem;
    margin: auto;
    place-content: center;
    /* Background-color: white; */
    color: black;
    /* border-radius: 10px; */
    border-style: none;
    border-width: 0;
    overflow: hidden;
    padding-bottom: min(2rem, 8%);
}

.img-grid-wrapper-cover {
    display: grid;
    grid-template-columns: 1fr, min(42rem, 100%), 1fr;
    max-width: 100%;
    max-height: 100%;
    gap: 0;
    margin: 0;
    object-fit: cover;
    /* position: relative; */
    text-align: center;
    color: white;
}

.img-grid-wrapper-cover > * {
    grid-column: 2;
}

/* Use for images which need to be full width of screen  */
.fullbleed {
    width: 100%;
    grid-column: 1 / -1;
    /* padding-left and right in main break this! */
}

.img-grid-wrapper {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* object-fit: cover */
    width: 400px;
    height: 300px;
    clip-path: inset(0 round 10px);
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 300;
    overflow-wrap: break-word;
    text-wrap: balance;
    color: black;
}

h1 {
    font-size: 4.0rem;
    line-height: 1.5;
    letter-spacing: -.1rem;
}

h2 {
    font-size: 3.6rem;
    line-height: 1.25;
    letter-spacing: -.1rem;
}

h3 {
    font-size: 3.0rem;
    line-height: 1.3;
    letter-spacing: -.1rem;
}

h4 {
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: -.08rem;
}

h5 {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: -.05rem;
}

h6 {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0;
}

.custom-orange {
    Background-color: white;
    color: #FFB250;
}

.custom-black {
    color: black;
}

.custom-white {
    color: white;
}

.top-right {
    position: absolute;
    top: 5%;
    right: 10%;
    width: auto;
    padding: 1px;
}

/* Larger than phablet */
@media (min-width: 550px) {
    h1 {
        font-size: 5.0rem;
    }

    h2 {
        font-size: 4.2rem;
    }

    h3 {
        font-size: 3.6rem;
    }

    h4 {
        font-size: 3.0rem;
    }

    h5 {
        font-size: 2.4rem;
    }

    h6 {
        font-size: 1.5rem;
    }
}

/* Links */
a {
    color: #564441;
}

a:hover {
    color: #f4f2f1;
    background-color: #FFB250;
}

.linkbutton {
    background-color: white;
    color: black;
    border: 2px solid #FFB250;
    border-radius: 10px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.6rem;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
}

a.linkbutton:hover {
    background-color: #FFB250;
    color: white;
}

/* Lists */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ol {
    list-style: none;
}

ol,
ul {
    padding-left: 0;
    margin-top: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
    margin: 1.5rem 0 1.5rem 3rem;
    font-size: 90%;
}

li {
    margin-bottom: 1rem;
}

/* Colorful */

.list-colorful {
    width: 100%;
    margin: 0 auto;
}

.list-colorful ol {
    list-style-type: none;
    margin: 0;
    margin-left: 1em;
    padding: 0;
    counter-reset: li-counter;
}

.list-colorful ol li {
    position: relative;
    margin-bottom: 1.5em;
    padding: 0.5em;
    background-color: #FFB250;
    padding-left: 58px;
}

.list-colorful a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

.list-colorful li:hover {
    box-shadow: inset -1em 0 #f71404;
    -webkit-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
}

.list-colorful ol li:before {
    position: absolute;
    top: -0.3em;
    left: -0.5em;
    width: 1.8em;
    height: 1.2em;
    font-size: 2em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #f73504;
    transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    z-index: 99;
    overflow: hidden;
    content: counter(li-counter);
    counter-increment: li-counter;
}


/* Navigation */

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.nav-link {
    display: block;
    padding: min(1rem, 8%);
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .nav-link {
        transition: none;
    }
}

.nav-link:hover,
.nav-link:focus {
    color: #F1F2F4;
    background-color: #1A1A1A;
}

.nav-ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Button */

.button {
    background-color: #FFB250;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.6rem;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
}

.buttonorange {
    background-color: white;
    color: black;
    border: 2px solid #FFB250;
    border-radius: 10px;
}

.button:hover {
    background-color: #aa1704;
    color: white;
}


/* Client Logo Slider */

.slider {
    background: white;
    height: 75pt;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    cursor: default;
    user-select: none;
    touch-action: none;
}

.slider:before {
    left: 0;
    top: 0;
}

.slider:after,
.slider:before {
    background: linear-gradient(to right,
            white 0%,
            hsla(0, 0%, 100%, 0) 100%);
    content: "";
    height: 75pt;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slider:after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider:after,
.slider:before {
    background: linear-gradient(to right,
            white 0%,
            hsla(0, 0%, 100%, 0) 100%);
    content: "";
    height: 75pt;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slider .slide-track-1 {
    animation: scroll-l 30s linear infinite;
    display: flex;
    width: 3500px;
}

.slider .slide-track-2 {
    animation: scroll-r 30s linear infinite;
    display: flex;
    width: 3500px;
}

.slider .slide {
    height: 75pt;
    width: 250px;
    display: flex;
    align-items: center;
    text-align: center;
}

.slider .slide img {
    width: 180px;
    padding: 1pc;
    vertical-align: middle;
    margin: 0 auto;
    display: inline-block;
    max-width: 100%;
    height: auto;
}

@keyframes scroll-l {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

@keyframes scroll-r {
    100% {
        transform: translateX(0);
    }

    0% {
        transform: translateX(calc(-250px * 7));
    }
}


/* Media Queries */

/* Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, to change the styles for buttons on small
devices, paste the mobile query code up in the buttons section and style it there.*/

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}