@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

strong {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}



body, html {
    min-height: 100vh;
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px;
}


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

/* Desktop Navigation ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#desktopNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    font-size: .9em;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    /*-khtml-user-select: none; !* Konqueror HTML *!*/
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
}

#cartButton {
    transition: .25s all;
}

#cartButton:hover {
    color: #416de2;
}

#topNavBar {
    height: 40px;
    width: 100%;
    background-color: #282c34;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 9999;
}

#topNavBar i {
    margin: 0 8px;
}

#logoHolder {
    height: 120px;
    width: 120px;
    position: absolute;
    top: 12px;
    left: 20px;

}

#logoHolder img {
    max-width: 100%;
    max-height: 100%;
    z-index: 99999;
}

#bottomNavBar {
    height: 65px;
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
    background-color: white;
}

#bottomNavBar a {
    color: black;
    transition: .25s all;
}

#bottomNavBar a:hover {
    color: #416de2;
    text-decoration: underline;
}

#userMenu {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
    cursor: pointer;
    transition: .25s all;
}

#userMenu div {
    transition: .25s all;
}

#userMenu div:hover {
    color: #416de2;
}

#cartButton {
    margin-right: 20px;
}

#cartButton i {
    margin-right: 3px;
}

#mobileMenu #userMenu {
    position:relative;
    color:white;
    display:flex;
    margin-bottom:20px;
    padding-right:0;
}
#mobileMenu #cartButton {
    flex:1;
    text-align:center;
    margin-right:0;
}
#mobileMenu #profileButton {
    flex:1;
    text-align:center;
}
#mobileMenu #signOutButton {
    flex:1;
    text-align:center;
}
#mobileMenu #signInButton {
    flex:1;
    text-align:center;
}

#navMenu {
    margin-left: 154px;
    display: flex;
    align-items: center;
    height: 65px;
}

.menuItem {
    display: inline-block;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    letter-spacing:.5px;
}

#smartSearch {
    position: absolute;
    top: 50px;
    right: 20px;
    /*border:1px solid #d5d5d5;*/
    height: 45px;
    width: 250px;
}

#smartSearch input {
    width: 210px;
    float: left;
    border: none;
    height: 43px;
    padding: 10px;
    border-left: 1px solid #d5d5d5;
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    background-color: #f2f2f2;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

}

#smartSearch button {
    border: none;
    background-color: #416de2;
    color: white;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    font-size: 1.3em;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
@media(max-width:1200px) {
    #smartSearch button {
        float:left;
    }
}

#mobileSearchButton {
    border: none;
    background-color: #416de2;
    color: white;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    border-radius: 6px;
    padding: 10px;
    margin: 20px auto 0;
}

#mobileSearchButton i {
    margin-right: 10px;
}

#learnMore {
    border: none;
    background-color: #416de2;
    color: white;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    border-radius: 6px;
    padding: 10px;
    margin: 20px auto 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Mobile Navigation ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



.navMenuItem {
    color: #6f6f6b;
    width: 20%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 20px;
    transition: .25s all;
}

.activeMenu {
    color: #416de2;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 20%;
    border-top: 3px solid #416de2;
    transition: .25s all ease-in-out;
}

h1 {
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    font-weight:500;
}

#socialBar {
    background-color: #282c34;
    color: white;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#socialBar i {
    margin: 0 10px;
}

#desktopLoader {
    background-color: #282c34;
    height: calc(100vh - 105px);
    width: 100%;
    position: fixed;
    top: 105px;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
}

#desktopLoader img {
    max-width: 100%;
}

#designerLoader {
    background-color: #33363c;
    height: calc(100vh - 40px);
    width: calc(100% - 300px);
    position: fixed;
    top: 40px;
    left: 300px;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
}

#designerLoader img {
    max-width: 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hero {
    height: 550px;
    width: 100%;
    background-position: center;
    background-size: cover;

}

#heroShade {
    height: 550px;
    width: 100%;
    /*background-color: rgba(0, 0, 0, .2);*/
}

#heroText {
    height: 500px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    padding: 30px;
}

#heroText h1 {
    text-shadow: 1px 0 7px #000000;
}

@media (max-width: 1201px) {

    #heroText {
        top: 0;
        height: auto !important;
    }
}

#heroFilter {
    background-color: rgba(0, 0, 0, .6);
    padding: 10px;
    border-radius: 6px;
    margin-top: 20px;
    position: relative;
    padding-right: 80px;
}

.filterMenuItem {
    background-color: white;
    color: #595959;
    display: inline-block;
    height: 50px;
    margin: 5px;

}

.filterMenuLabel {
    display: inline-flex;
    width: 40px;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

.filterMenuItem select {
    border: none;
    height: 38px;
    outline: none;
    min-width: 100px;
    background-color: white;
}

.filterMenuItem input {
    width: 90px;
    border: none;
    height: 38px;
    outline: none;

}

#heroFilter {
    display: flex;
    align-items: center;
}

#heroFilter button {
    background-color: #416de2;
    color: white;
    font-size: 1.2em;
    height: 50px;
    width: 50px;
    border: none;
    border-radius: 6px;
    transition: .25s all;
    margin-left: 5px;
    margin-top: -1px;
    position: absolute;
    top: 16px;
    right: 20px;
}

#heroFilter button:hover {
    background-color: #365bbc;

}

#mobileLoader {
    background-color: #282c34;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#mobileLoader img {
    max-width: 100%;
}

#styles {
    max-width: 100%;
    width: 1500px;
    background-color: white;
    min-height: 400px;
    margin-top: -60px;
    margin-left: auto;
    margin-right: auto;
}

#newPlanContainer {
    max-width: 100%;
    width: 1500px;
    min-height: 400px;
    margin: 0 auto;
}

.styleContainer {
    padding: 15px 15px;
}

.styleBlock {
    position: relative;
    /*border: 2px solid #fff;*/
    min-height: 500px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    transition: .25s all ease-in-out;
}

@media (min-width: 1202px) {
    .styleBlock:hover {
        box-shadow: 0 0 10px #365bbc;
    }
}

@media (max-width: 1201px) {
    .styleBlock {
        margin: 2px;
    }
}

.styleBlockTitle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background-color: #282c34;
    color: white;
    font-size: 1.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    line-height: 25px;
}

.styleRow {
    padding: 15px 15px;
    z-index: 4;
}

#socialBar a:link {
    color: white;
}

#topNavBar a {
    color: white;
}

.fa-pinterest:hover {
    color: #BD081C;
}

.fa-instagram:hover {
    color: #833AB4;
}

.fa-facebook:hover {
    color: #4267B2;
}

.fa-youtube:hover {
    color: #FF0000;
}

.fa-houzz:hover {
    color: #73ba37;
}

#mainContent {
    position: relative;
    min-height: 100%;
    padding-bottom: 304px;
}

@media (min-width: 1202px) {

    #mainContent {
        padding-top: 105px;
        position: relative;
        min-height: 100vh;

    }

}

@media (max-width: 1201px) {
    body, html {
        padding-bottom: 0;
        /*min-height: calc(100vh - 60px);*/
    }

    #hero {
        height:auto !important;
        padding-bottom:50px;
    }
    #hero h1 {
        font-size:1.4em;
        margin-bottom:30px;
        margin-top:20px;
    }

    #heroShade {
        height: 310px;
    }

    .styleContainer {
        padding: 0;
    }

    .styleRow {
        padding: 0;
    }

    .styleBlock {
        min-height: 300px;
        text-align: center;
    }


}

#newPlans {
    background-color: #282c34;
    color: white;
    min-height: 400px;
    padding: 15px;
}

.blockHolder {
    margin-bottom: 30px;
    transition: .25s all ease-in-out;
    cursor: pointer;
}

@media (max-width: 1201px) {
    #newPlans {
        padding: 5px;
    }

    .blockHolder {
        padding: 0;
    }

    #newPlansRow {
        padding: 10px !important;
    }
}

@media (min-width: 1202px) {
    .blockHolder:hover {
        transform: scale(1.02);
    }
}

.planBlock {
    padding-top:56.25%;
    /* height:150px; */
    background-position: center;
    background-size: cover;
    /* object-fit: cover; */

}
.planBlock img {
    max-width:100%;
    width:100%;
}

.planTitle {
    background-color: #365bbc;
    color: white;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 60px;
}

.planStat {
    width: 25%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}

h2 {
    text-align: center;
    font-size: 1.5em;
    margin: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight:500;
}

.statIcon {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.planStats {
    background-color: white;
    color: #1c1c1c;
    padding: 5px 10px;
}

#aboutUs {
    width: 1500px;
    max-width: 100%;
    padding: 30px;
    margin: 0 auto;
}

#aboutUsCollapse {
    display: none;
}

.quotation {
    font-size: 20px;
    margin: 0 auto;
    quotes: "\201C" "\201D" "\2018" "\2019";
    padding: 10px 20px;
    line-height: 1.4;
}

.quotation:before {
    content: open-quote;
    display: inline;
    line-height: 0;
    left: -10px;
    position: relative;
    top: 30px;
    color: #ccc;
    font-size: 3em;
}

.quotation::after {
    content: close-quote;
    display: inline;
    line-height: 0;
    left: 10px;
    position: relative;
    top: 35px;
    color: #ccc;
    font-size: 3em;
}

blockquote {
    border-radius: 5px;
    background: rgb(250, 250, 250);
    /*margin-left: 20px;*/
    padding: 10px 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

footer {
    margin: 0;
    text-align: right;
    font-size: .8em;
    font-style: italic;
}

blockquote .small:before, blockquote footer:before, blockquote small:before {
    content: '\2014 \00A0';
}

#testimonials {
    background-color: #282c34;
}

#testimonials h2 {
    color: white;
}

#testimonialsContainer {
    width: 1500px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
}

#whatsIncludedContainer {
    padding: 30px;
    width: 1500px;
    max-width: 100%;
    margin: 0 auto;
}

#footerContainer {
    width: 1500px;
    max-width: 100%;
    padding: 60px 30px 10px;
    margin: 0 auto;

    height: 300px;
}

#footer {
    min-height: 304px;
    background-color: #282c34;
    color: white;
    width: 100%;
    margin-top: -304px;
}

@media (max-width: 1201px) {
    #footer {
        margin-top: 0;
        min-height: 0;
        padding-bottom:80px;

    }

    #footerContainer {
        height: auto;
    }

    #mainContent {
        padding-bottom: 0;
    }

    .thanks {
        font-size: 1em;
        padding: 20px;
    }

    #socialBlock {
        font-size: 1em;
        padding: 20px;
    }
}

h3 {
    font-size: 1.1em;
    font-family: 'Roboto', sans-serif;
    font-weight:500;
}

#footer a {
    display: block;
    color: white;
}

.footerCol {
    text-align: center;
    margin-bottom: 30px;
}

.footerBottom {
    text-align: center;
    border-top: 1px solid #d6d2d6;
    padding: 20px 20px 10px;
}

.privacyPolicyContainer {
    padding: 30px;
    width: 1500px;
    max-width: 100%;
    margin: 20px auto;
}

#privacyPolicy h1 {
    margin-bottom: 40px;
}

#privacyPolicy h2 {
    margin: 30px 0 20px;
    text-align: left;
}

#photoGallery {
    padding: 30px;
    background-color: #282c34;
    background-size: 135%;
    background-position: center;
    flex-direction: column;
    position: relative;
}

.photoGalleryFader {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 28, 36, 0.95);
    top: 0;
    left: 0;
}

@media (max-width: 1201px) {
    #photoGallery {
        padding: 0;
    }
}

.planContainer {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.fotorama {
    max-width: 100%;
    width: 100%;
    z-index: 5;
    position: relative;
}

#planLabel {
    background-color: #416de2;
    color: white;
    position: absolute;
    z-index: 6;
    padding: 10px 20px;
    font-size: 1.2em;
    top: 10px;
    left: -10px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-box-shadow: 2px 7px 13px -5px rgba(0, 0, 0, 0.66);
    -moz-box-shadow: 2px 7px 13px -5px rgba(0, 0, 0, 0.66);
    box-shadow: 2px 7px 13px -5px rgba(0, 0, 0, 0.66);
}

.fotorama {
    background-color: #06070c !important;
    /*border:2px solid rgba(0,0,0,0);*/
}

#planOverview .planContainer {
    padding: 30px 0;
    width: 1300px;
    max-width: 100%;
}

#quickStats {
    border: 1px solid #e7e7e7;
    background-color: #e7e7e7;
    padding: 20px 20px 0;
    margin: 0 -15px;
    height:100%;
}

@media (max-width: 1360px) {
    #quickStats {
        margin-left: -15px;
        /* margin-top: -30px; */
    }
}

#quickStats .statIcon {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.stat {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

#mobileNamePlate {
    width: 100%;
    padding: 10px 20px;
    background-color: #416de2;
    color: white;
    font-size: 1.2em;
    text-align: center;
}

#socialBlock {
    background: #282c34;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

#socialBlock a {
    cursor: pointer;
}

#socialBlock i {
    margin: 0 10px;
}

@media (max-width: 1201px) {


    #socialBlock i {
        margin: 0 20px;
    }
}

#socialBlock .fa-pinterest-square:hover {
    color: #95071a;
}

.fpImage {
    width: auto;
    max-width: 100%;
    max-height: 800px;
    display: block;
    margin: 30px auto;
    text-align: center;
}

.fpHorizontalImage {
    width: auto;
    max-width: 90%;
    display: block;
    margin: 30px auto;
    text-align: center;
}

.fpVerticalImage {
    width: auto;
    max-width: 90%;
    max-height: 850px;
    display: block;
    margin: 30px auto;
    text-align: center;
}

#loginModal label {
    display: none;
}

#loginModal {
    text-align: center;
}

#loginModal img {
    max-width: 100px;
    margin-bottom: 20px;
    margin-top: -40px;

}

#loginModal .modal-body {
    padding: 20px 40px;
}

.modal-header {
    border-bottom: none;
}


.formButton button {
    border: none;
    width: 100%;
    background-color: #416de2;
    color: white;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    border-radius: 6px;
    padding: 10px;
    margin: 20px auto 0;
}

.registerLink {
    margin-top: 20px;
}

.forgotPasswordLink {
    text-align: left;
    font-size: .8em;
    margin: 10px 0 0 5px;
}

#loginFillAlert {
    display: none;
}

#loginEmailAlert {
    display: none;
}

#loginPasswordAlert {
    display: none;
}

#floorPlanImages {
    text-align: center;
    background-color: #e7e7e7;
    border-top: 1px solid #cfcfcf;
}

@media (max-width: 576px) {
    #floorPlanImages {
        padding-left: 0;
        padding-right: 0;
    }
}

#desktopPriceBar {
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    border-top: 1px solid #c5c5c5;
    z-index: 999999;
}

.desktopPlan {
    width: calc(100% - 350px);
    margin: 0;
}

#planPurchaseOptions {
    width: 350px;
    position: fixed;
    top: 105px;
    right: 0;
    height: calc(100% - 105px);
    background-color: #4f5560;
    padding: 50px 30px;
    overflow-y:auto;
}

#planPurchaseOptions h1 {
    font-size: 1.2em;
    text-align: center;
    color: white;
}

.availableOptionsHeader {
    margin: 10px 0 10px;
    text-align: center;
    color: white;
}

.basePrice {
    color: #6eb77d;
    font-size: 3.5em;
    text-align: center;
}

#printsDiv {
    display: none;
}

.specTable {
    border: 1px solid lightgrey;
    margin-bottom: 40px;
}

.specTable td {
    padding: 10px;
}

.specTable tr {
    border: 1px solid lightgrey;
}

.modal {
    overflow-y: auto;
    padding-right: 0 !important;
}

.modal-open {
    overflow: auto;
    padding-right: 0 !important;
}

body {
    padding-right: 0 !important;
}

#planDescription {
    padding: 60px 30px;
    text-align: left;
}

#costEstimationHolder {
    background-color: #416de2;
    color: white;
    margin: 20px -15px 0;
    padding: 15px;
    text-align: center;
}

#costToBuildFooter {
    margin-top: 20px;
    border-top: 1px solid #e7e7e7;
    padding-top: 15px;
}

#costEstimationHolder a {
    color: white;
}

.cost {
    font-size: 1.7em;
    margin: 15px 0;
}

#adjustLocation {
    margin-top: 20px;
    background-color: #e7e7e7;
    color: #1c1c1c;
}

#adjustLocation:hover {
    background-color: #d8d8d8;
}

#free_api_bottom_left {
    text-align: center;
}

#costCustomize {
    margin-top: 20px;
}

#calculate_free_api_btn {
    margin-top: 20px;
    background-color: #e7e7e7;
    color: #1c1c1c;
}

#calculate_free_api_btn:hover {
    background-color: #d8d8d8;
}

#addToCartButton {
    width: 100%;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: #416de2;
    color: white;
    border: 1px solid #416de2;
    transition: .25s all;
}

#addToCartButton:hover {
    background-color: #3a62c9;
}

#makeModifications {
    width: 100%;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: #b3b4b7;
    color: #404040;
    border: 1px solid #8e8c90;
    transition: .25s all;
    margin-top: 10px;
}

#collectionFeatured {
    height: 500px;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 1;
}

#collectionInfo {
    width: 800px;
    max-width: 100%;
    z-index: 3;
    background-color: rgba(0, 0, 0, .6);
    padding: 30px 50px 30px 50px;
    text-align: justify;
    border-radius: 10px;
}

@media (max-width: 500px) {
    #collectionInfo {
        border-radius: 0;
        margin-top: 0;
    }

    #collectionFeatured {
        height: auto;
    }
}

#collectionInfo h1 {
    font-size: 1em;
    margin-bottom: 20px;
}

#collectionTitle {
    font-size: 3.5em;
    text-align: center;
}

@media(max-width:1201px) {
    #collectionTitle {
        font-size:2em;
    }
}

#collectionFeaturedFade {
    /*background-color: rgba(0,0,0,.7);*/
    position: absolute;
    height: 600px;
    width: 100%;
    top: 105px;
    left: 0;
    z-index: 2;
}

#rightFilter {
    width: 350px;
    position: fixed;
    top: 105px;
    right: 0;
    background-color: #4f5560;
    z-index: 3;
    height: calc(100vh - 105px);
    padding: 30px;
    overflow-y: auto;
}

#rightFilter select {
    margin-bottom: 15px;
}

#rightFilter button {
    width: 100%;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    margin-bottom: 10px;
}

.rightFilterSplit {
    width: 50%;
    float: left;
}

.rightFilterSplit label {
    color: white;
    font-size: .9em;
    margin-bottom: 5px;
}

.filterLabel {
    width: 100%;
    color: white;
    margin-bottom: 5px;
}

#collectionRight {
    width: calc(100% - 350px);
    position: relative;
    min-height: calc(100vh - 105px);
    /*margin-bottom:200px;*/
}

@media (max-width: 1201px) {
    #collectionRight {
        width: 100%;
        position: relative;
        min-height: calc(100vh - 105px);
        /*margin-bottom: 200px;*/
    }
}

#topCollectionPlans {
    background-color: #282c34;
    padding: 20px 10px 0;
}

#topCollectionPlans h2 {
    color: white;
}

@media(max-width:1201px) {
    #topCollectionPlans {
        padding:20px 10px !important;
    }
}

#planResults {
    padding: 20px 10px 0;
}

.selectedMode {
    background-color: #416de2;
    color: white;
}

/* Safari and other SELECT fixes*/
/*select {*/

/*    -webkit-appearance: none;*/
/*    -moz-appearance: none;*/
/*    appearance: none;*/

/*    -moz-border-radius: 3px;*/
/*    -webkit-border-radius: 3px;*/
/*    border-radius: 3px;*/
/*    background: url(http://dropdown/arrow/url/) no-repeat;*/
/*    background-position: right center;*/
/*    background-color: #CCCCCC;*/
/*    color: #000000;*/
/*    border: 1px solid #000000;*/

/*}*/
.filterMenuLabel {
    float: left;
}

.heroFilterInput {
    width: calc(100% - 40px) !important;
    float: left !important;
    height: 50px !important;
    border-radius: 0 !important;
    /*-webkit-appearance: none;*/
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/**/
#pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    /*-khtml-user-select: none; !* Konqueror HTML *!*/
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Opera and Firefox */
}

.page-link {
    color: #007bff !important;
}

.page-link:hover {
    cursor: pointer;
}

.page-item.active .page-link {
    color: white !important;
}

.noResultsFound {
    text-align: center;
    padding: 50px;
    width: 100%;
    font-size: 1.5em;
    color: #616161;
}

.noResultsText {
    font-size: .7em;
    margin-top: 20px;
}

#pagesResults {
    display: block;
    clear: both;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    margin-top: -5px;
    color: #848484;
}

.voting {
    border-radius: 10px;
    padding: 5px;
    text-align: center;
}

#like {
    width: 50%;
    float: left;
    text-align: right;
    padding: 10px 10px 0 0;
    font-size: 1.5em;
    cursor: pointer;
}

#like:hover {
    color: #416de2;
}

#dislike {
    width: 50%;
    float: left;
    text-align: left;
    padding: 10px 0 0 10px;
    font-size: 1.5em;
    cursor: pointer;
}

#dislike:hover {
    color: #ff4141;
}

.thanks {
    font-size: 1.5em;
}

.thanks i {
    margin-right: 5px !important;
}

.adminEdit {
    /*font-size:.8em;*/
    margin-top: 20px;
    text-align: center;
    margin-bottom: -20px;
}

.showTerm {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

#tagDiv {
    text-align: center;
    margin-top: 25px;
}

.tag {
    display: inline-block;
    margin: 10px;
    background-color: lightgrey;
    padding: 5px 10px;
    border-radius: 5px;
    color: black !important;
    transition: .25s all;
}

.tag:hover {
    transform: scale(1.1);
}

.tag a:link {
    color: black !important;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 75px;
        left: 75px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        opacity: 0;
    }
}

#alterationHero {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-size: cover;
    background-position: center;
    z-index: 1;
    position: relative;
    padding:20px;
    text-align:center;
}

#alterationHeroFade {
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 2;

}

#alterationHero h1 {
    z-index: 3;
}

#alterationIntro {
    width: 1500px;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.alterationFloorPlanImage {
    /*width:100%;*/
    /*max-width:700px;*/
    max-width: 100%;
    margin: 20px 0;
    /*height:auto;*/
    max-height: 900px;
}

.alterationImageCol {
    text-align: center;
}

#cartItems {
    width: 1300px;
    max-width: 100%;
    margin: 30px auto;
}

.cartItem {
    border: 1px solid #949baa;
    margin-bottom: 30px;
}

.cartItemTitle {
    background-color: #767d8c;
    color: white;
    padding: 10px;
    text-align: center;
}

.cartItemTitle i {
    color: #ff0000;
    margin-left: 5px;
}

.cartImage {
    float: left;
    flex: 2;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.cartImage img {
    max-width: 100%;
}

.cartFlex {
    display: flex;
}

.options {
    flex: 4;
    display: flex;
}

.optionsLeft {
    width: 50%;
    float: left;
    padding: 10px 10px 0 10px;
    border-right: 1px solid #e7e7e7;
    align-items: center;

}

.optionsRight {
    width: 50%;
    float: left;
    padding: 10px 10px 0 10px;
    border-right: 1px solid #e7e7e7;
}

.pricing {
    flex: 1;
    padding: 10px;
    position: relative;
}

.cartButtonHolder {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
}

.cartItem .form-group {
    margin-bottom: 10px;
}

.form-group {
    margin-bottom: 10px;
}

.dropdown-item {
    font-size: .9em;
}

#importantInformation {
    width: 1300px;
    margin: 0 auto;
    border: 1px solid #e7e7e7;
    padding: 30px;
    border-radius: 5px;
    background-color: #e7e7e7;
    font-size: .9em;
}

#importantInformation h2 {
    margin: 0;

}

#checkoutBox {
    text-align: right;
    width: 1300px;
    max-width: 100%;
    padding: 20px 0;
    margin: 0 auto;
}

#checkoutButton {
    background: #416de2;
    color: white;
    border: 1px solid #416de2;
    padding: 10px 20px;
    border-radius: 6px;
    transition: .25s all;
}

#checkoutButton:hover {
    background: #3558b7;
}

#continueShopping {
    border: 1px solid #aeaeae;
    padding: 10px 20px;
    border-radius: 6px;
    transition: .25s all;
    margin-right: 10px;
}

#continueShopping:hover {
    background-color: #aeaeae;
}

.cartPrintHolder {
    display: flex;
    width: 100%;
    align-items: center;
}

.cartPrints {
    flex: 1;
}

.printCartLabel {
    flex: 3;
    padding-left: 10px;
}

#userForm {
    width: 1200px;
    max-width: 100%;
    margin: 30px auto;
    border: 1px solid #e7e7e7;
    padding: 20px;
}

#userForm h1 {
    text-align: center;
    color: #1c1c1c;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.proItem {
    text-align: center;
    margin: 20px 0 40px 0;
}

.proItem i {
    font-size: 5em;
    margin-bottom: 10px;
}

#proBenefits {
    text-align: center;
    padding: 20px;
    border-left: 1px solid #e7e7e7;
}

#proBenefits h2 {
    font-size: 1.2em;
}

.passwordReq {
    font-size: .85em;
}

.signupAlert {
    color: red;
}

.signupBorder {
    border: 1px solid red;
}

@media (max-width: 600px) {
    #styles {
        margin-top: 0;
    }

}

#checkout {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
}

.checkoutIcon {
    margin-bottom: 20px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 15px;
    margin-top: 30px;
}

.checkoutIcon i {
    font-size: 1.3em;
    margin-right: 10px;
}

.checkoutTitle {
    text-align: center;
    font-size: 1.3em;

}

#checkout {
    border: 1px solid #e7e7e7;
    padding: 0 30px 0;
    margin-top: 30px;
    margin-bottom: 30px;
}

.copyFromShipping {
    margin-left: 20px;
    font-size: .8em;
}

.orderOverview {
    padding-left: 20px;
}

.orderOverview h2 {
    font-size: 1.2em;
    margin-bottom: 20px;
    margin-top: 0;
}

.orderOverview table {
    border-bottom: 1px solid #808080;
    padding-bottom: 20px;
}

#trendingContent {
    width: 1500px;
    max-width: 100%;
    margin: 30px auto;
}

#trendingContent a {
    text-decoration: none;
    color: black;
}

.rankedPlan {
    border: 1px solid #b7b7b7;
    margin-bottom: 20px;
}

.rank {
    width: 80px;
    height: 200px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    /*padding:20px;*/
    color: #484848;
    background-color: #a8a8a8;
}

.trendImageBlock {
    height: 200px;
    width: calc(40% - 80px);
    float: left;
    background-size: cover;
    background-position: center;
}

.trendInfo {
    height: 200px;
    overflow: hidden;
    width: 60%;
    float: left;
}

.trendTitle {
    padding: 10px;
    background-color: #416de2;
    color: white;
    text-align: center;
}

.trendDescription {
    padding: 10px;
}

@media (max-width: 1201px) {
    .rank {
        height: 100px;
    }

    .trendImageBlock {
        height: 100px;
    }

    .trendInfo {
        height: 100px;
    }
    #desktopNav {
        display:none;
    }


}


.trendingTag {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    background-color: #e7e7e7;
    border-radius: 10px;
}

#trendingContent h1 {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 30px;
}

.waterfall .item {
    width: 20%;
    /*padding:10px;*/
}

.blogImage img {
    max-width: 100%;
}

.blogImage {
    width: 100%;
}

#blogContent {
    width: 1500px;
    max-width: 100%;
    margin: 0 auto;
}

.checkoutError {
    box-shadow: 0 0 5px red;
}

#declineAlert {
    display: none;
}

.alertLeft {
    width: 100px;
    height: 80px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4em;
}

.alertRight {
    width: calc(100% - 100px);
    height: 80px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

#featuredLink {
    margin-top: 15px;
    display: inline-block;
    background-color: rgba(0, 0, 0, .6);
    padding: 10px;
    border-radius: 10px;
}

#featuredLink a {
    color: white;
}

#topCollectionPlans {
    text-align: center;
}

.trendingText {
    color: white;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    width: calc(100% + 30px);
}

.videoWrapper iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -15px;
}
@media(max-width:1201px) {
    .videoWrapper iframe {
        width:100%;
        margin-left:0;
        margin-top:-2px;
    }
    
}

iframe {
    max-width:100%;

}

#signatureHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background-color: #24252b;
    padding: 30px 0 80px;
}

#signatureHeader img {
    /*width: 800px;*/
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 800px) {
    #signatureHeader {
        height: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    #signatureContainer {
        padding: 20px 5px !important;
    }
}

#blogHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background-color: #24252b;
    padding: 30px 0 80px;
}

#blogHeader img {
    max-height: 100%;
    max-width: 100%;
}

#trendsHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background-color: #24252b;
    padding: 30px 0 80px;
}

#trendsHeader img {
    /*width: 450px;*/
    max-height: 100%;
    max-width: 100%;
}


@media (max-width: 800px) {
    #blogHeader {
        height: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    #blogContainer {
        padding: 20px 5px !important;
    }
}

#signatureContainer {
    width: 1300px;
    margin: -50px auto 0;
    max-width: 100%;
    padding: 30px;
    background-color: white;
}

#blogContainer {
    width: 1300px;
    margin: -50px auto 0;
    max-width: 100%;
    padding: 30px;
    background-color: white;
}
#blogContainer img {
    max-width:100%;
}

#customsContainer {
    width: 1300px;
    margin: -50px auto 0;
    max-width: 100%;
    padding: 30px;
    background-color: white;
}
#customsContainer img {
    max-width:100%;
}

.signatureImage {
    width: 100%;
    padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.signatureTitle {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #24252b;
    font-size: 1.15em;
    color: white;
}

.signatureDescription {
    padding: 10px;
    margin-bottom: 30px;
}

#fotoHolder {
    position: relative;
}

#tour {
    position: absolute;
    top: 75px;
    left: 0;
    z-index: 50;
    width: 72px;
    height: 72px;
    background-color: rgba(0, 0, 0, .6);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media(max-width:1201px) {
    #tour {
        width:50px;
        height:50px;
        top:55px;
    }
}
#designerButton {
    position: absolute;
    top: 75px;
    left: 0;
    z-index: 50;
    width: 72px;
    height: 72px;
    background-color: rgba(0, 0, 0, .6);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media(max-width:1201px) {
    #designerButton {
        width:50px;
        height:50px;
        top:55px;
    }
}

#hasPhotos {
    position: absolute;
    top: 0;
    left: 82px;
    z-index: 50;
    width: 72px;
    height: 72px;
    background-color: rgba(0, 0, 0, .6);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    cursor:pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
#hasPhotos i {
    font-size:1.5em;
}
@media(max-width:1201px) {
    #hasPhotos {
        width:50px;
        height:50px;
        left: 55px;
        font-size:.6em;
    }
}
.signatureImage #tour {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    width: 72px;
    height: 72px;
    background-color: rgba(0, 0, 0, .6);
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media(max-width:1201px) {
    .signatureImage #tour {
        width:50px;
        height:50px;
        font-size:.6em;
    }
}

#tour img {
    max-width: 100%;
    padding: 8px;


    cursor: pointer;
}

.blogImage {
    width: 100%;
    padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blogTitle {
    padding: 5px 0;
    font-size: 1.25em;
}

.blog {
    margin-bottom: 30px;
    cursor: pointer;
}

.blogAuthor {
    margin-bottom: 5px;
}

.blog a {
    color: black;
    text-decoration: none;
}

.blogExcerpt a {
    color: #007bff;
}

#singleBlogContainer {
    width: 1300px;
    max-width: 100%;
    margin: -50px auto 30px;
    background-color: white;
    padding: 30px;
}

#singleBlogContainer .blogTitle {
    font-size: 1.8em;
}

#singleBlogContainer img {
    max-width: 100%;
    height: auto;
}

.blogAuthor {
    font-style: italic;
}

.blogContent {
    text-align: justify;
}

#latestBlogs .blogTitle {
    padding: 5px 0;
    font-size: 1.25em;
}

#latestBlogs .blogExcerpt {
    margin-bottom: 30px;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 20px;
}

#latestBlogs {
    border-left: 1px solid #e7e7e7;
}

@media (max-width: 575px) {
    #latestBlogs {
        border-left: none;
        margin-top: 50px;
    }

    #singleBlogContainer {
        padding: 5px;
    }
}

#latestBlogHeader {
    font-size: 1.5em;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
}

.hidden-header {
    font-size: 0;
    width: 1px;
    height: 1px;
    display: inline-block;
    overflow: hidden;
    position: absolute !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    clip: rect(1px, 1px, 1px, 1px);
}

.checkoutPhase {
    margin-right: 5px;
    border: 4px solid #e7e7e7;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

.checkoutPhaseName {
    display: inline-flex;
    margin-right: 5px;
}

.checkoutPhaseActive {
    border: 4px solid #00c423;
    color: #00c423;
}

.checkoutSeparator {
    width: 75px;
    display: inline-flex;
    border-bottom: 4px solid #e7e7e7;
    margin-right: 5px;
    margin-bottom: 2px;
}

.checkoutSeparator hr {
    border: 2px solid #e7e7e7;
}

#checkoutProgress {
    margin: 30px auto 20px auto;
    text-align: center;
}

.separatorActive {
    border-bottom: 4px solid #00c423;
}

.checkoutItem {
    margin-bottom: 30px;
}

.itemTitle {
    display: flex;
}

.itemBreakdown {
    padding-left: 20px;
}

.itemTitleLeft {
    flex: 4;
    font-size: 1.1em;
}

.itemTitleRight {
    flex: 1;
    text-align: right;
}

#submit-button {
    border: none;
    padding: 10px 20px;
    background-color: #00c423;
    color: white;
    border-radius: 6px;
    transition: .25s all;
}

#submit-button:hover {
    background-color: #00b420;
}

#checkoutButtonHolder {
    text-align: center;
    margin-top: 30px;

}

.promoContainer {
    display: flex;
    height: 40px;
    margin-bottom: 30px;
    justify-content: center;
    align-items: center;
}

.promoTitle {
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: lightgrey;
    display: flex;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    font-size: 2em;
}

#promoCode {
    flex: 5;
    border: 1px solid lightgrey;
    padding-left: 10px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    letter-spacing: 1px;
    height: 40px;
}

#promoApply {
    flex: 1;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: white;
    letter-spacing: 1px;
    height: 40px;
}

#promoApply {
    background-color: #416de2;
    border: 1px solid #416de2;
    color: white;
    transition: .25s all;
}

#promoApply:hover {
    background-color: #385dc1;
}

.cc-input {
    width: 100%;
    height: 40px;
    padding-left: 20px;
    border: 1px solid #e7e7e7;
}

input {
    max-width: 100%;
}

#cardSwipeLoading {
    position: fixed;
    height: calc(100vh - 105px);
    width: 100%;
    background-color: white;
    z-index: 9;
    top: 105px;
    left: 0;
    text-align: center;
    display:none;

}
@media(max-width:1201px) {
    #cardSwipeLoading {
        height:calc(100vh - 40px);
        top:40px;
        z-index:999;
        padding-top:25%;
    }
}
#cardSwipeLoading img {
    max-width:100%;
}

#thankYou {
    max-width: 1201px;
    margin: 40px auto;
    border: 1px solid #e7e7e7;
}

#thankYou h1 {
    font-size: 1.4em;
}

#thankYou button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    background-color: #416de2;
    color: white;
    border: 1px solid #416de2;
    border-radius: 6px;
    transition: .25s all;
    cursor: pointer;
}

#thankYou a {
    cursor: pointer;
}

#thankYou button:hover {
    background-color: #3050b4;
}

.planDownloads {
    border: 1px solid #dbdbdb;
    background-color: #dbdbdb;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.planEditBlock {
    padding: 20px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    margin-bottom: 60px;
}

#planEdit {
    max-width: 1500px;
    margin: 50px auto;
}

#planEdit h2 {
    margin: -42px 10px 10px;
    padding: 10px;
    background-color: white;
    font-size: 1.2em;
}

.planEditInputBlock {
    margin-bottom: 20px;
}

.inputLabel {
    width: 50px;
    height: 40px;
    float: left;
    border: 1px solid #d9d9d9;
    /*font-size:1.2em;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d9d9d9;
}

.planEditInputBlock input {
    width: calc(100% - 50px);
    float: left;
    border: 1px solid #d9d9d9;
    height: 40px;
    padding-left: 10px;
}

.planEditInputBlock select {
    width: calc(100% - 50px);
    float: left;
    border: 1px solid #d9d9d9;
    height: 40px;
    padding-left: 10px;
}

.reverseImage {
    transition: .25s all;
    transform: scale(-1, 1) !important;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    filter: "FlipH";
    -ms-filter: "FlipH";
}

#reversePlan {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 72px;
    z-index: 50;
    text-align: center;
    color: white;
    padding: 10px;
    background-color: rgba(0, 0, 0, .6);
    border-bottom-right-radius: 10px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
    cursor: pointer;
}

#reversePlan i {
    font-size: 1.5em;
}
@media(max-width:1201px) {
    #reversePlan {
        width:50px;
        height:50px;
        font-size:.6em;
    }
    #reversePlan i {
        font-size:1.5em;
    }
}

#alterationsContainer {
    background-color: #416de2;
    color: white;
    width: 100%;
    height: 80px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#alterationsContainer button {
    margin-left: 20px;
    background-color: white;
    border: #e7e7e7;
    padding: 10px 20px;
    border-radius: 6px;
    transition: .25s all;
}

#alterationsContainer button:hover {
    background-color: #b1b1b1;
}

@media(max-width:1201px) {
    #alterationsContainer {
        padding:15px 30px;
        height: auto;
        text-align:center;
    }
    #alterationsContainer button {
        display:block;
        margin:10px auto;
    }
}

#designerMenu {
    width: 300px;
    position: absolute;
    left: 0;
    top: 40px;
    height: calc(100vh - 40px);
    background-color: #4f5560;
    overflow: auto;

}

#designerContent {
    width: calc(100% - 300px);
    height: calc(100vh - 40px);
    position: absolute;
    top: 40px;
    left: 300px;
    display: flex;
}

#designerBase {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

}

#designerBase2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

}

#garagePosts1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#garagePosts2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: none;
}

#windows1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#windows2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: none;
}

#door1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#door2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: none;
}

#trim1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#trim2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: none;
}
#stone1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#stone2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: none;
}
#roof1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#roof2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: none;
}

#secondColor1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#secondColor2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.designerMenuHeader {
    font-size: 1.10em;
    padding: 20px;
    border-bottom: 1px solid #4b4f58;
    color: white;
    background-color: #575d69;
    cursor: pointer;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    user-select: none;
}

.designerMenuHeader i {
    font-size: .8em;
    margin-right: 10px;
    color: lightgrey;
}

.designerSubMenu {
    padding: 20px 20px 10px;
}

.designerColor {
    border-left:6px solid rgba(255,255,255,.3);
    position:relative;
    height: 80px;
    margin: 5px 5px 20px;
    display: flex;
    align-items: flex-end;
    padding-left: 5px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
}

.colorTitle {
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(0,0,0,.4);
    color:white;
    padding:5px 10px;
    border-bottom-right-radius:10px;
}

.activeColor {
    border-left:6px solid #416de2;
}

#designerMenu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#designerMenu::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}

#designerMenu::-webkit-scrollbar-thumb {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #416de2;
}

.activeDesignerMenuHeader {
    background-color: #416de2;
    
}

.filterHeader {
    color: white;
    cursor: pointer;
    display: block;
    width:100%;
    margin-bottom: 5px;
    margin-top:10px;
}

.filterHeader i {
    margin-left: 5px;
}

.filterSubMenuItem {
    padding-left: 10px;
    display:flex;
    align-items: center;
}
.filterSubMenu {
    margin-bottom:20px;
    color:white;
    display:none;
}
.filterSubMenu input {
    margin-right:5px;
    margin-top:-1px;
}
#rightFilter #addToCartButton {
    margin-top:20px;
}
.customPhotoBlock {
    background-position:center;
    background-size:cover;
    height:300px;
}
@media(max-width:650px) {
    .customPhotoBlock {
        height:200px;
    }
}
@media(max-width:800px) {
    .customContainerVariant {
        padding:0 !important;
    }
}
#bidSetInfo {
    color:white;
    padding-top:20px;
}
#buyBidSetButton {
    width:100%;
    padding:10px 15px;
    border-radius:6px;
    border:none;
    margin-top:10px;
    transition: .25s all;
}
#buyBidSetButton:hover {
    background-color: #a7a7a7;
}
.orderBox {
    border:1px solid lightgrey;
    padding:20px;
    margin-bottom:20px;
    border-radius:6px;
    cursor:pointer;
    transition: .5s all;
}
.orderBox:hover {
    box-shadow: 0 0 10px #365bbc;
}
#emailModal .modal-header {
    background-image: url('/assets/corona-hills-art.jpg');
    background-size:cover;
    background-position:center;
    height:250px;
    max-width:100%;
}
#emailSignupRight {
    padding:20px 20px 0;
}
#emailModal .modal-footer {
    border-top:0;
    padding: 0 0 10px;
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
}
#emailSignup {
    background-color:#416de2;
    color:white;
    height:60px;
    margin:0 -15px;
    display:flex;
    align-items:center;
    justify-content: center;
    border-top-right-radius:15px;
    border-top-left-radius:15px;
}
@media(max-width:1065px) {
    #emailSignup {
        background-color: #7b7b7b;
    }
}
#alterationForm {
    border-top: 1px solid lightgrey;
    margin-top:30px;
    padding-top:30px;
    padding-bottom:60px;
}
#alterationsButtonHolder {
    text-align:center;
    margin-top:20px;
}
#alterationThanks {
    max-width:800px;
    margin:60px auto;
    border:1px solid lightgrey;
    border-radius:30px;
    padding:30px;
    text-align:center;

}
@media(max-width:1201px) {
    #alterationThanks {
        max-width:90%;
        margin:20px auto;
    }
}
#alterationThanks img {
    max-width:200px;
    margin-bottom:20px;
}
#alterationThanks h1 {
    margin-bottom: 20px;
}
#alterationThanks button {
    margin-top:30px;
}
.photoAlbum img {
    max-width:100%;
}
#customerPhotos {
    background-color:white;
    border:1px solid lightgrey;
    border-radius: 6px;
    padding:10px 20px 20px;
    margin-bottom:20px;
}
#customerPhotos h2 {
    border-bottom:1px solid lightgrey;
    padding-bottom:20px;
}
#customerPhotos h3 {
    margin-bottom:20px;
    text-align:left;
}
.albumThumb {
    height:150px;
    background-size:cover;
    background-position:center;
}
@media(max-width:1201px) {
    .albumThumb {
        margin-bottom:10px;
        height:200px;
    }
}
.footerCol i {
    margin-right:5px;
}

#mobileMenuButton {
    position:fixed;
    bottom:15px;
    right:70px;
    background-color: white;
    border-radius:50%;
    z-index:999;
    width:60px;
    height:60px;
    margin-right:-30px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:2em;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
#mobileChatButton {
    position:fixed;
    bottom:15px;
    right:50px;
    background-color: #03a84e;
    color:white;
    border-radius:50%;
    z-index:99;
    width:60px;
    height:60px;
    margin-right:-30px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:2em;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
#mobileHomeButton {
    position:fixed;
    bottom:15px;
    right:110px;
    background-color: #365bbc;
    color:white;
    border-radius:50%;
    z-index:99;
    width:60px;
    height:60px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:2em;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
#closeSearchButton {
    position:fixed;
    bottom:15px;
    right:calc(50% - 30px);
    background-color: white;
    border-radius:50%;
    z-index:999;
    width:60px;
    height:60px;
    margin-right:0;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:2em;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    color:#1c1c1c;
}

#mobileAddToCart {
    height:60px;
    width:50%;
    max-width:250px;
    position:fixed;
    bottom:15px;
    left:15px;
    background-color:#6eb77d;
    z-index:99;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    border-radius:15px;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:.8em;
    text-align:center;
}
#mobileOptions {
    width:100%;
    height:100vh;
    background-color: #282c34;
    color:white;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    padding:20px;
    overflow:auto;
    display:none;
}
#mobileOptions h1 {
    font-size:1.2em;
    text-align:center;
}
#closeOptionsButton {
    position:fixed;
    top:20px;
    right:30px;
    height:25px;
    width:25px;
    background-color:white;
    color:#1c1c1c;
    display:flex;
    justify-content: center;
    align-items:center;
    border-radius:50%;
}

#mobileMenu {
    background-color: #282c34;
    width:100%;
    height:100vh;
    z-index:100;
    position:fixed;
    top:0;
    left:0;
    display:none;
    padding-bottom: 80px !important;
    overflow:auto;
    padding: 20px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
#mobileMenu #smartSearch {
    width:100%;
    position:relative;
    right:0;
    top:0;
}
#mobileMenu #smartSearch input {
    width:calc(100% - 40px);
    float:left;
}
#mobileSearchDiv {
    padding:20px;
    display:none;
}
#mobileSearchDiv #smartSearch {
    width:100%;
    position:relative;
    right:0;
    top:0;
}


.mobileMenuHeader {
    color:white;
    font-size:1.1em;
    text-align:center;
    padding:15px;
    border-top: 2px solid #2c2f38;
}
.mobileSubMenu {
    border-top: 2px solid #2c2f38;
    display:none;
    background-color: #2c2f38;
}
.mobileSubMenu a {
    color:white;
    padding:10px;
    text-align:center;
}

@media(max-width:1201px) {
    #googleMap {
        height:300px;
        margin-bottom:10px;
    }
    #chatRow {
        display:none;
    }
    html,body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;
    }
    #mobileSearchButton {
        font-size:1.2em;
    }
    #mobileSearchButton i {
        font-size: 1em;
    }
    #emailSignup {
        border-radius:0 !important;
        padding:15px;
        height:auto;
        display: block !important;
        text-align:center;
        
    }
    #emailSignup button {
        margin-top:10px;
    }
    #newPlansRow {
        padding:0 !important;
    }
    .blockHolder {
        margin-bottom:5px;
    }
    #testimonialsContainer {
        padding:5px 5px 5px;
    }
    blockquote {
        margin-bottom:15px;
    }
    #tawkchat-container {
        display:none !important;
    }
    #pagination {
        margin-top:20px;
    }
    #checkoutProgress {
        display:none;
    }
    #cartItems {
        padding:10px;
        margin-top:0;
    }
    #importantInformation {
        max-width:100%;
    }
    #checkoutBox {
        padding:20px;
    }
    #checkoutButton {
        display:block;
        width:100%;
    }
    #continueShopping {
        display:block;
        width:100%;
        margin-bottom:10px;
    }

#mobileSearchDiv {
    width:100%;
    height:100vh;
    background-color: #282c34;
    color:white;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    overflow: auto;
}
#mobileSearchDiv .filterMenuItem {
    width:100%;
    margin:0 0 10px;
}
#mobileSearchDiv .filterMenuItem select {
    min-width:0;
}
#mobileSearchDiv .col-6 {
    padding:0;
}
#mobileSearchDiv .col-12 {
    padding:0;
}
#mobileSearchDiv {
    text-align:left;
}
.mobileCartPlanImage img {
    max-width:100%;
}
.mobileCartOptions {
    padding-top:20px;
    border-bottom:1px solid lightgrey;
    margin-bottom:20px;
}
.mobileCartPricing {
    padding-bottom:20px;
    border-bottom:1px solid lightgrey;
}
.mobileCartButtonHolder {
    padding:10px;
    margin-bottom:40px;
    text-align:center;
}
}
#checkoutRight {
    
}
@media(min-width:1201px) {
    #checkoutRight {
        border-left:1px solid #e7e7e7;
    }
}
@media(max-width:1201px) {
    .orderOverview {
        padding-left:0;
    }
    #checkout {
        border-bottom:0;
    }
}
#mobileFilter {
    height:100vh;
    width:100%;
    background-color: #282c34;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    padding:20px;
    overflow:auto;
    display:none;
}
#mobileFilter select {
    margin-bottom:10px;
}
#mobileFilter #addToCartButton {
    margin-top:20px;
}
#closeFilter {
    width: 100%;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: white;
    color: white;
    border: 1px solid lightgrey;
    transition: .25s all;
    color:#1c1c1c;
    margin-top:20px;
}
#mobileFilterButton {
    width: 100%;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: #416de2;
    color: white;
    border: 1px solid #416de2;
    transition: .25s all;
}
.mobileRankedPlan {
    margin-bottom:20px;
}
.mobileRankedPlan .rank {
    width:60px;
    height:60px;
    font-size:1.6em;
}
.mobileRankedPlan .trendTitle {
    height:60px;
    display:flex;
    justify-content: center;
    align-items:center;
}
.mobileRankedPlan img {
    width:100%;
}

@media(min-width:1202px) {
    #mobileNav {
        display:none;
    }
    #mobileCartContainer {
        display:none;
    }
    #mobileAddToCart {
        display:none;
    }
}
@media(max-width:1201px) {
    #heroText {
        height:350px !important;
    }
    .blockHolder {
        padding:5px;
    }
    .styleBlock {
        height:400px;
    }
    .planBlock {
        padding-top:56.25%;
    }
    #planPurchaseOptions {
        display:none;
    }
    #rightFilter {
        display:none;
    }
    .desktopPlan {
        width:100%;
    }
    #desktopLoader {
        height:100vh;
        top:0;
    }
    #mobileOptions {
        padding:100px;
    }
    #mobileFilter {
        padding:100px;
    }
}
@media(max-width:1065px) {
    /* TODO: Kill the desktop filter Menu */
    #desktopFilter {
        display:none;
    }
}
@media(min-width:1066px) {
    #mobileFilterContainer {
        display:none;
    }
}
@media(max-width:992px) {

}
@media(max-width:700px) {
    #mobileMenuButton {
        right:50px;
    }
    #mobileHomeButton {
        right:90px;
    }
    .styleBlock {
        height:300px;
    }
    #heroText {
        height:auto !important;
    }
    #mobileOptions {
        padding:30px;
    }
    #mobileFilter {
        padding:30px;
    }
}

#newPlanContainer .blockHolder .planBlock {
    padding-top:0 !important;
}