html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.about-us {
    font-family: 'Merriweather', serif;
}

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
    .swiper-container {
        margin-top: 70px;
    }
}

@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .swiper-container {
        margin-top: 70px;
    }
}

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .swiper-container {
        margin-top: 70px;
    }
}

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
}


.buttons-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}


button {
    background: white;
    border: solid 2px black;
    padding: .375em 1.125em;
    font-size: 1rem;
}

.button-arounder {
    font-size: 2rem;
    background: hsl(190deg, 30%, 15%);
    color: hsl(190deg, 10%, 95%);
    box-shadow: 0 0px 0px hsla(190deg, 15%, 5%, .2);
    transfrom: translateY(0);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    --dur: .15s;
    --delay: .15s;
    --radius: 16px;
    transition: border-top-left-radius var(--dur) var(--delay) ease-out, border-top-right-radius var(--dur) calc(var(--delay) * 2) ease-out, border-bottom-right-radius var(--dur) calc(var(--delay) * 3) ease-out, border-bottom-left-radius var(--dur) calc(var(--delay) * 4) ease-out, box-shadow calc(var(--dur) * 4) ease-out, transform calc(var(--dur) * 4) ease-out, background calc(var(--dur) * 4) steps(4, jump-end);
}

    .button-arounder:hover,
    .button-arounder:focus {
        box-shadow: 0 4px 8px hsla(190deg, 15%, 5%, .2);
        transform: translateY(-4px);
        background: hsl(230deg, 50%, 45%);
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }