body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    padding-bottom: 2rem;
}

strong {
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

img.richtext-image {
    max-width: 100%;
    height: auto;
}

img.centered {
    display: block;
    margin: 0 auto;
}

@media screen and (min-width: 50em) {
    img.left {
        float: left;
        max-width: 50%;
        padding-right: 1rem;
    }

    img.right {
        float: right;
        max-width: 50%;
        padding-left: 1rem;
    }
}

p {
    padding-bottom: 1rem;
    margin-bottom: 0;
}

div.block-centered_h1,
div.block-centered_h2,
div.block-centered_h3,
div.block-centered_h4,
div.block-centered_h5,
div.block-centered_h6,
div.block-text {
    clear: both;
}

.img-logo {
    height: 1em;
    margin-bottom: 0.2em;
    margin-right: 0.2em;
}

/* make MDB carousel controls grey */
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(50%);
}

/* title background */
.header-bg {
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header-text-container h1,
.header-text-container h2,
.header-text-container h3,
.header-text-container h4,
.header-text-container h5,
.header-text-container h6 {
    text-shadow: 0 0 3px black;
}

.header-text-container {
    min-height: 18em;
}

/* carousel thumbnails */
.carousel-thumbnails {
    margin-bottom: 5rem;
}

.carousel-thumbnails .carousel-indicators {
    margin-bottom: -4.69rem;
    position: absolute;
}

.carousel-thumbnails .carousel-indicators li {
    height: unset;
    width: unset;
    max-width: unset;
    border: none;
}

.carousel-thumbnails .carousel-indicators .active {
    height: unset;
    width: unset;
    max-width: unset;
    opacity: 1;
}

.carousel-thumbnails .carousel-indicators img {
    max-width: 100px;
    height: 64px;
    object-fit: contain;
    display: block;
}

@media only screen and (max-width: 540px) {
    .carousel-thumbnails {
        margin-bottom: 3.75rem;
    }

    .carousel-thumbnails .carousel-indicators {
        margin-bottom: -3.44rem;
    }
}

/* make sure images are same height so the gird looks good 👍 */
.product-gallery-img {
    height: 200px;
    object-fit: contain;
}

/* ... textarea resize and scrollbars shouldnt be disabled ... */
/* why do textareas have more padding than other fields... */
.md-form textarea.md-textarea {
    overflow-y: unset;
    padding: 0.333rem 0;
    resize: vertical;
}