body {
    margin: 0;
    font-family: montserrat;
}
*, ::after, ::before {
    box-sizing: border-box;
}
.container, .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.col, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-lg-6, .col-lg-8 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.row-cols-1 .col {
    flex: 0 0 auto;
    width: 100%;
}
h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    text-shadow: 1px 1px 20px #353535;
}
h1 span {
    font-size: 45px;
}
h2 {
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.5px;
}
h3 {
    color: #caa878;
    font-weight: 600;
    font-size: 15px;
}
h4 {
    color: #353535;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
}
p {
    color: #353535;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
}
p.intro {
    font-weight: 400;
    font-size: 16px;
}
p.quote {
    font-style: italic;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.p-80 {
    padding: 40px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-120 {
    padding-top: 120px;
}
.pt-160 {
    padding-top: 160px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-120 {
    padding-bottom: 120px;
}
.pb-160 {
    padding-bottom: 160px;
}
.mt-0 {
    margin-top: 0px;
}
.mt-40 {
    margin-top: 40px;
}
.mb-0 {
    margin-bottom: 0px;
}
.mb-40 {
    margin-bottom: 40px;
}
.color-white {
    color: #fff;
}
.background-grey {
    background-color: #f8f8f8;
}
.background-blue {
    background: linear-gradient(332deg, #bfd1d1 0, #ccdcdd 100%);
}
.background-green {
    background: linear-gradient(332deg, #b0c6bd 0, #c5dcd4 100%);
}
.background-brown {
    background: linear-gradient(332deg, #c4bcb0 0, #dcd3c8 100%);
}
.background-yellow {
    background: linear-gradient(332deg, #dfbd89 0, #f2cf9b 100%);
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-uppercase {
    text-transform: uppercase;
}
.align-self-start {
    align-self: flex-start;
}
.align-self-end {
    align-self: flex-end;
}
.justify-content-center {
    justify-content: center;
}
.align-items-center {
    align-items: center;
}
.homepage header {
    background: url('images/homepage-header.webp') no-repeat center;
    background-size: cover;
}
.menu-buttons a {
    text-decoration: none;
}
.menu-buttons a .image-overlap-wrapper {
    display: grid;
    position: relative;
    grid-template-columns: repeat(12, 1fr);
}
.menu-buttons a .image-overlap-wrapper .image-overlap {
    grid-row: 1;
    grid-column: 1 / span 11;
    padding-bottom: 7%;
    z-index: 1;
}
.menu-buttons a .image-overlap-wrapper .color-overlap {
    grid-row: 1;
    grid-column: 6 / -1;
    align-self: end;
    z-index: 2;
    aspect-ratio: 1;
    opacity: 85%;
    mix-blend-mode: multiply;
}
.menu-buttons a.living-room .image-overlap-wrapper .color-overlap {
    background-color: #c59d84;
}
.menu-buttons a.kitchen .image-overlap-wrapper .color-overlap {
    background-color: #d9a765;
}
.menu-buttons a.bathroom .image-overlap-wrapper .color-overlap {
    background-color: #85abad;
}
.menu-buttons a.bedroom .image-overlap-wrapper .color-overlap {
    background-color: #b66d74;
}
.menu-buttons a.outdoors .image-overlap-wrapper .color-overlap {
    background-color: #53655d;
}
.menu-buttons a:hover .image-overlap-wrapper .image-overlap {
    z-index: 2;
}
.menu-buttons a:hover .image-overlap-wrapper .color-overlap {
    z-index: 1;
}
.living-room header {
    background: url('images/living-room-header.jpg') no-repeat center;
    background-size: cover;
}
.living-room header h1 {
    font-size: 22px;
    letter-spacing: 2px;
}
.living-room header h1 span {
    font-size: 50px;
}
.menu-links a {
    color: #caa878;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    margin: 0 10px 10px 10px;
    display: inline-block;
}
.menu-links a:hover {
    text-decoration: underline;
}
#the-trends h2 {
    font-size: 32px;
    font-weight: 600;
}
.graph-block h2 {
    font-size: 30px;
    font-weight: 600;
}
.graph-block h3 {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.6;
    color: #353535;
}
.graph-block p {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.6;
    color: #353535;
}
.graph-block p span {
    font-size: 25px;
    margin-right: 5px;
}
.trend-buttons .trend-button .background-square {
    aspect-ratio: 1;
    display: flex;
    max-width: 200px;
}
.trend-buttons .trend-button.home-bar .background-square {
    background-color: #c79c84;
}
.trend-buttons .trend-button.robot .background-square {
    background-color: #83abad;
}
.trend-buttons .trend-button.wi-fi-6 .background-square {
    background-color: #dca564;
}
.trend-buttons .trend-button.connected-house .background-square {
    background-color: #b86d73;
}
.trend-buttons .trend-button.connected-house .background-square h3 {
    color: #fff;
}
.trend-buttons .trend-button.iot-at-home .background-square {
    background-color: #3d5248;
}
.trend-buttons .trend-button.iot-at-home .background-square h3 {
    color: #fff;
}
.trend-buttons .trend-button h3 {
    color: #000;
    padding: 15px;
    font-size: 20px;
    margin: 0;
    font-weight: 700;
    align-self: flex-end;
}
.color-home-bar {
    color: #c79c84;
}
.color-robot {
    color: #83abad;
}
.color-wi-fi-6 {
    color: #dca564;
}
.color-connected-house {
    color: #b86d73;
}
.color-iot-at-home {
    color: #3d5248;
}
.text-block {
    background: linear-gradient(332deg, #f8f8f8 0, #dadedf 100%);
}
.text-block h2 {
    font-size: 30px;
}
.text-block p {
    font-size: 15px;
}
.quote-block h4 {
    font-size: 22px;
    font-weight: 600;
}
.quote-block p {
    font-size: 16px;
}
.nextpage-block h4 {
    font-size: 28px;
    letter-spacing: 0;
    margin: 0;
}
.nextpage-block p {
    color: #353535;
    font-weight: 600;
    font-size: 19px;
    margin: 0;
}
.button {
    background-color: #ba8748;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 20px;
    display: inline-block;
    transition: opacity 1s ease-out;
}
.button:hover {
    opacity: 0.8;
}
.table-block {
    box-shadow: 1px 1px 50px #dadedf;
    padding: 30px;
    overflow-x: auto;
}
.table-block h4 {
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 10px;
}
.table-block .table {
    width: 100%;
    text-align: left;
    font-size: 12px;
    border-collapse: collapse;
}
.table-block .table tbody, .table-block .table td, .table-block .table tfoot, .table-block .table th, .table-block .table thead, .table-block .table tr {
    border-color: #dadedf;
    border-style: solid;
    border-width: 0;
}
.table-block .table th, .table-block .table td {
    border-bottom-width: 1px;
}
.table-block .table th {
    padding: 8px;
}
.table-block .table th span {
    font-size: 20px;
    margin-right: 3px;
}
.table-block .table td {
    text-align: center;
    font-size: 13px;
    padding: 14px;
}
.table-block .table tbody {
    border-top: 3px solid #000;
}
.table-block p {
    font-size: 13px;
    color: #000;
}
@media (min-width: 576px) {
    .container {
        max-width: 540px;
   }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
   }
    .row-cols-md-5 .col {
        flex: 0 0 auto;
        width: 20%;
   }
    .col-md-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
   }
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
   }
    .col-md-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
   }
    .col-md-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
   }
    .button {
        padding: 20px 40px;
   }
    .menu-buttons {
        min-height: 300px;
   }
    .trend-buttons {
        min-height: 300px;
   }
    .trend-buttons .trend-button h3 {
        font-size: 15px;
   }
}
@media (min-width: 992px) {
    h1 {
        font-size: 35px;
   }
    h1 span {
        font-size: 65px;
   }
    .container {
        max-width: 960px;
   }
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
   }
    .col-lg-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
   }
    .p-80 {
        padding: 80px;
   }
    .menu-buttons {
        min-height: 400px;
   }
    .trend-buttons {
        min-height: 400px;
   }
    .trend-buttons .trend-button h3 {
        font-size: 20px;
   }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
   }
    .menu-buttons {
        min-height: 525px;
   }
    .trend-buttons .trend-button {
        padding-right: 5%;
   }
}