* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 15px; line-height: 1.4;}
html, body {height: 100%;}
body {font-family: 'Nunito Sans';}

.page {min-height: 100%; position: relative;}
#map {width: 100%; height: 100vh; position: fixed;}
#status {width: 100%; position: absolute;}
#find-me, #zoom-in, #zoom-out {position: absolute;}

.content {
    position: absolute;
    min-height: 100vh;
    width: 100%;
    max-width: 36rem;
    top: 0;
    left: calc(15vw - 15rem);
    z-index: 9999;
    text-align: center;
    color: white;
    font-size: 1.25rem;
    background-image: linear-gradient(to left, #f3684b 0%, #f99e43 100%); 
}
.content > .top {
    padding: 1.75rem 1.75rem 0;
    background-image: linear-gradient(to left, #f3684b 0%, #f99e43 100%); 
    width: 100%;
    max-width: 36rem;
}
.content > * {padding: 0 1.75rem;}
.home .content > .top,
.locations .content > .top {height: 14rem;}
.home .content > .top {position: fixed; z-index: 2;}
.content > .top p {margin-bottom: 0;}
.content > .results {background: white; padding: 15rem 1.75rem 1.75rem;}
.home .content,
.locations .content {background: white;}
.beers .content > .results,
.beers .content,
.about .content {background-image: linear-gradient(to left, #f3684b 0%, #f99e43 100%); padding-bottom: 5rem;}
body.page .content,
body.locations .content {padding-bottom: 5rem;}
.about .content a {color: white;}
.about .content > .top + div {padding-top: 1.75rem;}
.locations .content .card {margin-top: -9rem;}
.beers .content > .results {padding-top: 1.75rem;}
.beers .buttons {border: 0; padding: 0.75rem 1.75rem;}
.beers .buttons a {width: calc(33.33% - 1.22rem); position: relative; padding-bottom: 20%;}
.beers .buttons a img {position: absolute; width: 100%; height: 100%;}
.content p {margin-bottom: 1.4em; padding: 0 0.25rem;}
.form {position: relative;}
input, textarea {font-family: 'Nunito Sans'; font-size: 1.25rem;}
input, input[type="search"] {
    height: 3.5rem;
    line-height: 3.5rem;
    width: 100%;
    border-radius: 1.75rem;
    border: 0;
    margin-bottom: 0.75rem;
    background: white; 
    padding: 0 1rem;
}
textarea {border: 0; padding: 0.5rem 1rem; border-radius: 1.75rem; min-width: 100%; max-width: 100%;}
input[type="search"] {
    background: white url(/img/search.svg) calc(100% - 1.5rem) center / auto 2rem no-repeat; 
    padding: 0 4rem;
}
input[type="search"] + input[type="submit"] {
    width: 4rem;
    height: 3.5rem;
    position: absolute;
    right: 0;
    opacity: 0;
    cursor: pointer;
    top: 0;
}
#find-me {height: 3.5rem; width: 4rem; background: url(/img/centre.svg) center center / 55% auto no-repeat; border: 0; cursor: pointer; left: 0; position: absolute;}
input[type="submit"],
a.button {
    background: #6e31bd url(/img/chevron_right_thin.svg) calc(100% - 1rem) center / auto 35% no-repeat;   
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    position: relative;
    text-align: left;
}
.upicon {width: 1.5rem; display: inline-block; position: relative;}
img {display: block; max-width: 100%;}
h1 {font-size: 1.75rem; text-transform: uppercase;}
.home h1 + p {padding-bottom: 1rem;}
.rotate180 {transform: rotate(180deg);}

.invisiblebuttons {
    margin: 2.75rem 0;
    display: flex;
    border-top: 0.15rem dotted rgba(255,255,255,0.5);
    border-bottom: 0.15rem dotted rgba(255,255,255,0.5);
}
.invisiblebuttons a {display: block; color: white; text-decoration: none; display: flex; align-items: center; flex-grow: 1; padding: 2rem 0; line-height: 1.2;}
.invisiblebuttons a span {display: block; margin-right: 1rem; text-align: left; flex-grow: 1;}
.invisiblebuttons a img {height: 5rem; margin: 0 1rem;}

.uppercase {text-transform: uppercase;}
.italic {font-style: italic;}
.bold {font-weight: bold;}
.extrabold {font-weight: 800;}

.card {background: #6e31bd; border-radius: 1rem; overflow: hidden; padding: 2rem; text-align: left; margin-top: 0.5rem; display: block; color: white; text-decoration: none;}
.card > img {margin: -2rem -2rem 1.75rem; max-width: calc(100% + 4rem); width: calc(100% + 4rem); object-fit: cover; height: 18rem; background: #222;}
.card a {color: white;}
.card h1 {font-size: 2rem; letter-spacing: 1px; line-height: 1.2; margin: 0.5rem 0;}

.card.location.notinview {display: none;}
.card.location {display: flex; padding: 1.5rem; height: 10rem; position: relative; width: 100%;}
.card.location > img {min-width: 50%; max-width: 50%; height: auto; object-fit: cover; margin: -1.5rem 1.25rem -1.5rem -1.5rem; align-items: stretch;}
.card.location h3 {line-height: 1.1; margin-bottom: 0.25rem;}

.results .card {margin: 1rem 0;}

.summary {font-style: italic; margin: 1.5rem 0;}
.locations .summary {margin: 2.75rem 0;}
.stars {display: flex; position: relative; padding-bottom: 0.25rem;}
.stars img {width: 1.25rem; margin-right: 0.5rem;}
.buttons {
    margin: 1.5rem 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 1.75rem;
    border-top: 0.15rem dotted rgba(255,255,255,0.5);
    border-bottom: 0.15rem dotted rgba(255,255,255,0.5);
    padding: 4.5rem 0 2rem 0;
}
strong {letter-spacing: 1px;}
.buttons div {position: absolute; margin-top: -3rem; font-weight: 700; letter-spacing: 1px;}
.buttons a {display: block; overflow: hidden; border-radius: 1.5rem;}
.buttons a img {width: 8rem; height: 5rem; object-fit: contain; background: white;}
.nav {text-align: left; position: relative; bottom: 0.5rem;}
.nav a {color: white; line-height: 2.2rem; text-decoration: none;}
.nav a img {height: 1.1rem; display: inline-block; vertical-align: middle; position: relative; bottom: 0.15rem; margin-right: 0.25rem;}
.nav + img {height: 5.5rem; left: 50%; position: absolute; transform: translateX(-50%); margin-top: -1rem;}
.nav + img + h1 {margin-top: 5.5rem;}

form {text-align: left;}
form label {display: block; padding: 0 0 0.5rem 1rem;}
form > div {display: flex; flex-direction: column; margin-top: 1.25rem}
form label + input {margin-bottom: 0;}
form > div.submit {margin-top: 2rem;}

.beerlist ul{margin: 2rem 0;}
.beerlist ul li {list-style: none;}
.beerlist ul li a {color: white; text-decoration: none; display: block; padding: 0.15rem 0;}
.beerlist ul li a:hover {text-decoration: underline;}

.addlocation {position: fixed; bottom: 2rem; right: 1.75rem; background: #6e31bd; color: white; width: 3rem; height: 3rem; text-decoration: none; line-height: 2.9rem; text-align: center; font-size: 2.2rem; border-radius: 100%; font-weight: 700;} 

@media only screen and (max-width: 160rem) {
    .content {left: 0;}
    #map {left: 30rem; width: calc(100vw - 30rem);}
}

@media only screen and (max-width: 70rem) {
    .content, body.locations .content::after {
        left: 0;
    }
}

@media only screen and (max-width: 60rem) {
    .home .content {background: none; min-height: 0; height: auto;}
    .content {max-width: 100%;}
    .home .content > .top {height: auto;}
    .content > .top { max-width: 100%; padding: 0;}
    .content > .top > div:first-child {padding: 1rem 1.75rem 0.5rem; position: relative;}
    .page.home .content > .top > div:last-child {
        padding: 5.5rem 1.75rem 1.75rem; 
        position: fixed; 
        bottom: 0; 
        width: 100%; 
        background-image: linear-gradient(to left, #f3684b 0%, #f99e43 100%);
    }
    #find-me {left: 1.75rem;}
    .mapholder {display: none;}
    .home .mapholder {z-index: 3; position: relative; display: block;}
    #map {height: calc(100vh - 17.5rem); top: 5.5rem; left: 0; width: 100%;}
    .content > .results {
        background: none; 
        padding: 0 1.75rem; 
        position: fixed; 
        height: 10rem; 
        width: 100%;
        bottom: 10rem;
        z-index: 5;
        left: 0;
    }
    .content > .results .card {position: absolute; width: calc(100% - 3.5rem);}
    .content > .results:not(.noactivecard) .card {display: none;}
    .content > .results:not(.noactivecard) .card.active {display: flex;}

    .addlocation {bottom: auto; top: 6.5rem; right: auto; left: 1.75rem;}
    .upicon + h1 + p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0;}
}