/* FONTS */

@font-face {
	font-family: 'Greycliff';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('/static/fonts/GreycliffCF-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Greycliff';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('/static/fonts/GreycliffCF-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Greycliff';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('/static/fonts/GreycliffCF-Heavy.ttf') format('truetype');
}
@font-face {
	font-family: 'Greycliff';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('/static/fonts/GreycliffCF-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('/static/fonts/Barlow-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('/static/fonts/Barlow-ExtraBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('/static/fonts/Barlow-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('/static/fonts/Barlow-Light.ttf') format('truetype');
}

/* END FONTS */




/* VARIABLES */

:root {
/* Color */
--unnamed-color-057dc3: #057DC3;
--unnamed-color-7a7a7a: #7A7A7A;

/* Font, text */
--unnamed-font-family-fontspring-demo-greycliff-cf: Greycliff;
--unnamed-font-family-barlow: Barlow;
--unnamed-font-style-normal: normal;
--unnamed-font-weight-bold: bold;
--unnamed-font-weight-normal: normal;
--unnamed-font-size-18: 18px;
--unnamed-font-size-45: 45px;
--unnamed-character-spacing-0: 0px;
--unnamed-line-spacing-27: 27px;
--unnamed-line-spacing-54: 54px;
--unnamed-text-transform-uppercase: uppercase;

/* Breakpoints & sizing */
--breakpoint-xs: 0px;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1400px;

--content-width: 100%;
}

/* END VARIABLES */




/* GENERAL */

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    font-family: Barlow;
    color: #7a7a7a;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Greycliff;
}

.content {
    width: var(--content-width);
    margin: 0 auto;
}

/* END GENERAL */




/* TOPBAR */

.topbar {
    background: #000;
    padding: 10px;
}

.topbar * {
    font-family: Barlow;
}

.topbar .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.topbar .col.col2 {
    display: flex;
    grid-column-start: none;
    grid-gap: 20px;
}

.topbar a {
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
    font-size: 18px;
}

/* END TOPBAR */




/* HEADER */

.header .content {
    width: var(--content-container-width);
    margin: auto;
    display: flex;
}

.header .content .logo {
    height: 60px;
}

.menu-list {
    display: flex;
    width: 100%;
    list-style: none;
    font-family: Barlow;
}

.menu-list ul {
    list-style: none;
}

.menu-list .dropdown {

}

.menu-list .dropdown i {
    margin-left: 3px;
}

.menu-list .dropdown .toggle {
    cursor: pointer;
}

.menu-list .dropdown .items {
    display: none;
    position: absolute;
    z-index: 1;
}

.menu-list .dropdown:hover .items{
    display: block;
}

/* END HEADER */




/* FOOTER */

.footer {
    background-color: #046fb9;
}

.footer * {
    color: #fff;
    font-size: 18px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-normal) var(--unnamed-font-size-18)/var(--unnamed-line-spacing-27) var(--unnamed-font-family-barlow);
}

.footer h4 {
    font-size: 20px;
}

.footer .row {
    display: grid;
    grid-template-columns: 5fr 2fr 2fr 2fr;
    padding: 20px;
}

.footer img.logo-img {
    height: auto;
    width: 250px;
}

ul.footer-menu {
    list-style: none;
    padding: 0;
}

ul.footer-menu li {
    cursor: pointer;
}

/* END FOOTER */




/* BUILDER */

.builder-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.builder-head h2 {
    text-align: center;
    font: normal normal bold 45px/54px Greycliff;
    letter-spacing: 0px;
    color: #057DC3;
    text-transform: uppercase;
    opacity: 1;

}

.builder-step {
    list-style: none;
    padding: 0;
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 10px;
    margin: auto;
    position: relative;
    width: 100%;
    padding: 0 15px;
}

.builder-step li {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #7A7A7A;
    border-radius: 23px;
    text-align: center;
    font: normal normal normal 18px/27px Barlow;
    letter-spacing: 0px;
    color: #7A7A7A;
    box-sizing: border-box;
    padding: 10px 19px;
    width: 100%;
    z-index: 3;
}

.builder-step li.locked {
    border: 1px solid #7a7a7a8a;
}

.builder-step .through-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: #7A7A7A8A;
    left: 50%;
    z-index: 1;
}

.through-line.progress {
    background-color: var(--unnamed-color-057dc3);
    z-index: 2;
}

.through-line.progress.style { height: 0; }
.through-line.progress.dimensions { height: 100px; }
.through-line.progress.shelves { height: 150px; }
.through-line.progress.endcaps { height: 210px; }
.through-line.progress.preview { height: 100%; }


.builder-step li.active {
    border: 2px solid #057DC3;
    color: #057DC3;
}

.builder-step li a {
    color: var(--unnamed-color-7a7a7a);
    text-decoration: none;
}

.builder-step li.locked a {
    color: #7a7a7a8a;
}

.builder-step li.active a {
    color: #057DC3;
    /* font-weight: 600; */
}

.builder-body {
    margin-top: 35px;
}

.builder-body h4 {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-18)/22px var(--unnamed-font-family-fontspring-demo-greycliff-cf);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-7a7a7a);
    text-align: center;
    font: normal normal bold 18px/22px Greycliff;
    letter-spacing: 0px;
    color: #7A7A7A;
    opacity: 1;
    margin: 30px auto;
}

.builder-body label, .order-detail label, .form-modal label {
    display: grid;
    grid-template: auto auto / auto;
    gap: 5px 0;
    font: normal normal 600 18px/22px Greycliff;
    text-transform: capitalize;
}

.builder-body input:not([type=checkbox]):not([type=radio]):not([type=submit]), .builder-body select, .builder-body textarea, .order-detail input, .order-detail select, .order-detail textarea, .form-modal input, .form-modal select, .form-modal textarea {
    background: #FAFAFA 100% 50% no-repeat padding-box;
    border: 1px solid #EAEAEA;
    font: normal normal normal 18px/27px Barlow;
    color: var(--unnamed-color-7a7a7a);
    height: 48px;
    width: 100%;
    margin-bottom: 20px;
    padding-left: 15px;
    box-sizing: border-box;
}

.builder-body select {
    background: #FAFAFA 100% 50% no-repeat padding-box;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
    border: 1px solid #EAEAEA;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.builder-section {
    display: grid;
    grid-auto-rows: auto;
    gap: 40px;
    justify-items: center;
    padding: 0 15px;
    position: relative;
}

.builder-section .section-img {
    position: relative;
    height: max-content;
}

.builder-section .section-img img {
    width: 100%;
    margin-top: 20px;
}

.builder-section .section-img img.overlay {
    /* top: -15px; */
    left: 0px;
    /* height: 90%;     */
}

.builder-section .section-img img.overlay.shifted {
    left:-8px;
    transform: scale(1.08);
}

.builder-section .section-img #rendering-overlay {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    font: normal normal 600 18px Greycliff;
    width: 20px;
    height: 20px;
    text-align: center;
}

.section-img #rendering-overlay.two-endcap {
    left: calc(50% + 10px);
}

.section-img #rendering-overlay.one-endcap {
    left: calc(50% + 30px);
}

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

.builder-foot .btn {
    display: inline-block;
    width: 163px;
    padding: 10px 5px;
    margin: 75px auto;
    border: none;
    border-radius: 6px;
    font: normal normal 600 normal 18px/27px Greycliff;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    border-color: transparent;
    text-decoration: none;
}

.builder-foot .next {
    background-color: #057DC3;
}

.builder-foot .prev {
    background-color: #7A7A7A;
}

.btn.outline {
    border: 1px solid #057DC3;
    background-color: #fff;
}
/* END BUILDER */


/* RESPONSIVE */

@media only screen and (min-width: 768px) {
    :root {
        /*--content-width: 768px;*/
        --content-width: 925px;
    }
    .builder-section {
        grid-template: auto / auto minmax(auto, 300px);
        justify-content: center;
        padding: 0 15px;
    }
    .builder-step {
        flex-direction: row;
        justify-content: space-between;
        width: unset;
        padding: unset;
        gap: 20px;
    }
    .builder-step li {
        width: unset;
    }
    .builder-step .through-line {
        width: 100%;
        height: 2px;
        left: 0px;
        top: 25px;
    }
    .through-line.progress.style { height: 2px; width: 0; }
    .through-line.progress.dimensions { height: 2px; width: 200px; }
    .through-line.progress.shelves { height: 2px; width: 400px; }
    .through-line.progress.endcaps { height: 2px; width: 500px; }
    .through-line.progress.preview { height: 2px; width: 100%; }
}

/* END RESPONSIVE */