html {text-align: center;}
html {font-family: "Roboto Serif", Arial, Helvetica, sans-serif; scroll-behavior: smooth;}
html, body { width:100vw; /*overflow-x: hidden; Kills position: sticky*/ }

/* Hide scrollbar */
html::-webkit-scrollbar{width:0; height:8px;}        /* Chrome/Safari: 0 px vertical, keep horizontal 8 px if ever shown */
html{scrollbar-width:none; -ms-overflow-style:none;} /* Firefox + old Edge/IE */

header img {width: 50rem; max-width:100vw; height: auto; margin-top:0vw; margin-bottom:0vw; position:relative; z-index:-1;}
h1, h2, h3 { max-width: 90vw; margin-left:auto; margin-right:auto; text-align: center;}

p.small {font-size:0.8rem;}

nav a {margin: 0 2vw; text-decoration: none; white-space: nowrap; }
nav {text-align:center; position:sticky; top: 0rem; width: 100vw; background-color: white; padding-top:0.3rem; padding-bottom:1rem;  z-index:100;}

a:link {color:inherit;}
a:visited {color:inherit;}
a:hover {color:inherit;}
a:active {color:inherit;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid black; margin: 1rem auto; padding: 0; width: 30rem; max-width:60vw;}

section {padding-top:4.5rem; margin-top:-4.5rem; width:100vw; overflow-x:hidden;}
section p {margin: 2vw auto; font-weight:300; min-width: 50vw; width:40rem; max-width:90vw;}
section img {margin: 2vw auto; width: 50rem; max-width: 100vw; height: auto; position:relative;}
section .horizimages {margin: 3vw auto; width: 70rem; max-width: 90vw;}
section .buybutton {margin: 1vw auto;}

section:last-of-type {height: 90vh;}

.horizimages img {width:49%;}

.scroll-container {width: 50rem; max-width: 100vw; margin-left: auto; margin-right: auto;}
.scroll-container > .scroll-track{width: 100%; margin-left: auto; margin-right: auto; display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;}
.scroll-card{flex:0 0 100%;scroll-snap-align:start;box-sizing:border-box;background:#fff; width:100%;}

.scroll-card img{aspect-ratio:4/3;object-fit:cover; height: auto; margin:0!important}

#strappy-about-image { transform: translate(20%); margin-bottom: -2rem; z-index: -1; width: 20rem; height: auto; }

.scroll-container{position:relative;}
.scroll-container > button > svg{width: 30px}
.scroll-container .arrow{position:absolute;top:50%;background:none;border:none;font-size:2rem;cursor:pointer;z-index:1;top:0;bottom:0;}
.scroll-container .arrow[disabled]{pointer-events:none;}
.scroll-container .arrow[disabled] svg{opacity:.35;}
.scroll-container .prev-button{position:absolute;left:0;/*background:linear-gradient(to right,#fff,transparent);*/}
.scroll-container .next-button{position:absolute;right:0;/*background:linear-gradient(to left,#fff,transparent);*/}

.buybutton{background:#e0e0e0;border:1px solid #000;padding:1rem;width:80%;max-width:30rem}
.buybutton label{display:block;margin-bottom:.75rem}
.buybutton button{display:block;width:100%;background:#fff;border:1px solid #000;padding:.6rem 0;font:inherit;cursor:pointer}

.instagram-media {margin-left: auto !important; margin-right: auto ! important; margin-bottom: 3vw !important;  min-width: 50vw !important; width:40rem !important; max-width:90vw !important;}

.auto-resizable-iframe {
    min-width: 50vw; width:40rem; max-width:90vw;
    margin: 2vw auto;
  }

  .auto-resizable-iframe > div {
    position: relative;
    padding-bottom: 75%;
    height: 0px;
  }

  .auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }