/* Kitchens */

.landingContainer {
    position: relative;
    text-align: center;
    color: white;
}

.landingContainer>img {
    width: 100%;
    height: 100vh;
}

.landingHeading {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    border-right: 2px solid white;
    border-left: 2px solid white;
}

.topBorder {
    border-top: 2px solid;
    border-image: linear-gradient(to right, #ffffff 33%, transparent 33%) 100% 1;
    padding-left: 1vw;
}

.bottomBorder {
    border-bottom: 2px solid;
    border-image: linear-gradient(to left, #ffffff 33%, transparent 33%) 100% 1;
    padding-right: 1vw;
}

h1 {
    font-size: 60px;
}

.galleryCaption {
    text-align: center;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.galleryCaption>h1 {
    padding-bottom: 10px;
}

.galleryCaption>h2 {
    padding-left: 33vw;
    padding-right: 33vw;
}

.buttomCaption {
    padding-left: 32vw;
    padding-right: 32vw;
}


/* Kitchens gallery */

.dot {
    background: rgba(28, 160, 208, 255) !important;
}

.gallery {
    padding-bottom: 5vh;
}

.gallery-cell {
    width: 60%;
    height: 70vh;
    margin-right: 10px;
    text-align: center;
    counter-increment: gallery-cell;
}

.gallery-cell>a>img {
    max-height: 100%;
}

.buttomCaption {
    text-align: center;
    padding-top: 10vh;
    padding-bottom: 5vh;
}

.featured {
    padding-left: 3vw;
    text-align: center;
}

.topContainer {
    display: flex;
}

.topLeftContainer {
    width: 40vw;
    height: 100%;
}

.topLeftPic>a>img {
    width: 100%;
    height: 60vh;
}

.topRightContainer {
    padding-left: 3vh;
    width: 55vw;
    height: 100%;
}

.topRightPic>img {
    width: 100%;
    height: 60vh;
}

.buttomContainer {
    display: flex;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.buttomLeftContainer {
    width: 55vw;
    height: 100%;
}

.buttomLeftPic>img {
    width: 100%;
    height: 60vh;
}

.buttomRightContainer {
    padding-left: 3vh;
    width: 40vw;
    height: 100%;
}

.buttomRightPic>img {
    width: 100%;
    height: 60vh;
}


/* responsivness */

@media screen and (max-width: 576px) {
    h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 20px;
    }
    .landingContainer {
        height: 35vh;
    }
    .landingContainer>img {
        height: 35vh;
    }
    .galleryCaption {
        padding: 2vh;
    }
    .galleryCaption>h2 {
        padding: 0%;
    }
    .gallery-cell {
        width: 60%;
        height: 30vh;
    }
    .gallery-cell>a>img {
        max-width: 100%;
        height: 100%;
    }
    .topContainer {
        display: block;
    }
    .buttomContainer {
        display: block;
    }
    .landingHeading {
        font-size: 20px;
        left: 46%;
        transform: translate(-40%, -50%);
    }
    .buttomCaption {
        padding: 2vh;
    }
    .flickity-page-dots {
        bottom: 0px !important;
    }
    .buttomContainer {
        padding: 0%;
    }
    .topLeftContainer {
        width: 90vw;
        padding-bottom: 2vh;
        padding-left: 2vh;
        height: 100%;
    }
    .topLeftPic>a>img {
        width: 100%;
        height: 40vh;
    }
    .topRightContainer {
        width: 90vw;
        padding-bottom: 2vh;
        padding-left: 2vh;
        height: 100%;
    }
    .topRightPic>img {
        width: 100%;
        height: 40vh;
    }
    .buttomLeftContainer {
        width: 90vw;
        padding-bottom: 2vh;
        padding-left: 2vh;
        height: 100%;
    }
    .buttomLeftPic>img {
        width: 100%;
        height: 40vh;
    }
    .buttomRightContainer {
        width: 90vw;
        padding-bottom: 2vh;
        padding-left: 2vh;
        height: 100%;
    }
    .buttomRightPic>img {
        width: 100%;
        height: 40vh;
    }
}