/* -------------------------------------- utilities */
.clearFix:after{
	content: "";
	display: table;
	clear:both;
}
:root {
    --primary: #0f6073;
    --secondary: #10243c;
    --alt: #d39017;
    --background: #e4e1dc;
    --green: #96c115;
    --dark-orange: #c46b15;
}



/* ------------------------------------------------------------Typography */
html {
    font-family: 'Calibri', sans-serif;
    font-size: 125%;
    line-height: 1.5em;
    font-weight: normal;
}
  
body {
    color: var(--secondary);
    margin: 0;
}
  
h1, h2, h3, h4, h5, h6, ul, ol, li, p {
    margin: 0;
    padding: 0;
}
  
h1 {
    font-family: 'Calibri Light', sans-serif;
    font-weight: 900;
    font-size: 2em;
    line-height: 1.5;
    margin-bottom: 0.75em;
}
  
h2 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 1em;
}
  
p {
    margin-bottom: 1.5em;
}
  
p:last-child {
    margin-bottom: 0;
}

nav a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}

nav ul, nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.banner h2 {
    text-transform: uppercase;
    font-family: "Calibri Light", sans-serif;
    letter-spacing: 0.1em;
}
a, a:visited {
    text-decoration: none;
    color: var(--primary);
}
a:hover, a:focus {
    color: var(--alt);
}
a.btn {
    text-transform: uppercase;
}

/* ------------------------------------------------------------ Layout */
header, article, footer  {
    padding: 0 1em;
}
  
@media (min-width: 80em) {
    header, article, footer, .banner div {
        max-width: 64em;
        margin: 0 auto;
    }
}

.banner {
    /* height: 14em; */
    background: var(--primary);
    color: var(--background);
    margin-bottom: 1em;
}

.banner div {
    padding: 2em 1em;
}

.banner {
    text-align: left;
}
.banner h2 {
    text-align: center;
}

@media (min-width: 80em) {
    .banner {
        text-align: center;
    }
}


.banner h2 {
    margin-bottom: 1em;
}

header nav.primary {
    display:none;
}

.container {
    margin: 0 2em;
}

/* ------------------------------------------------------------ General */
html {
    height: 100%;
    background: var(--background);
    /* background-image: url(../images/bg.jpg);
    background-size: cover;
    background-position: center; */
}
a.btn {
    text-decoration: none;
    border-radius: 2px;
    color: var(--secondary);
    background:var(--primary);
    padding: 0.5em 1em;
}

a.btn:hover {
    background: var(--alt);
}

@media (min-width: 50em) {
    html {
        background-size: cover;
        /*background-position: 0 10em;*/
    }
}

button {
    background: var(--primary);
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    color: white;
}
button:hover {
    opacity: 0.8;
}
.buttons {
    display: flex;
    column-gap: 5px;
    margin-bottom: 1em;
}
.buttons button {
    flex: auto;
}
.buttons button:first-child {
    margin-left: 5px;
}
.buttons button:last-child {
    margin-right: 5px;
}

/* ------------------------------------------------------------ Navigation */
.sidenav {
    height: 100%;
    position: absolute;
    top: 5em;
    bottom: 0;
    z-index: 10;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    background: var(--primary);
    width: 100%;
}
.sidenav .primary {
    display:block;
}
.sidenav {
    padding: 0;
}
.sidenav li a {
    padding: 0.5em 1em;
    color: var(--background);
    display: block;
    width: 100%;
    height: 100%;
}
.sidenav li a:hover, .sidenav li a:focus {
    color: var(--alt);
    background-color: var(--secondary);
}

.sidenav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    width: auto;
    margin: 0;
    margin-top: 0;
    padding: 0 1em 0 0;
    outline:none;
    z-index: 15;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    vertical-align: middle;
}
.bar {
    display: block;
    height: 0.25em;
    width: 2em;
    background-color: var(--primary);
    border-radius:1px;
    margin: 10px auto;

    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}

.sidenav-toggle.active .top {
    -webkit-transform: translateY(14px) rotateZ(45deg);
    -moz-transform: translateY(14px) rotateZ(45deg);
    -ms-transform: translateY(14px) rotateZ(45deg);
    -o-transform: translateY(14px) rotateZ(45deg);
    transform: translateY(14px) rotateZ(45deg);
}
  
.sidenav-toggle.active .bottom {
    -webkit-transform: translateY(-13px) rotateZ(-45deg);
    -moz-transform: translateY(-13px) rotateZ(-45deg);
    -ms-transform: translateY(-13px) rotateZ(-45deg);
    -o-transform: translateY(-13px) rotateZ(-45deg);
    transform: translateY(-13px) rotateZ(-45deg);
}
  
.sidenav-toggle.active .middle {
    width: 0;
}

.content, .sidenav {
    -webkit-transition: transform .7s ease-in-out;
    -moz-transition: transform .7s ease-in-out;
    -ms-transition: transform .7s ease-in-out;
    -o-transition: transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
}

.menu-open {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}


header nav {
    vertical-align: middle;
    float: right;
}
header nav.primary li {
    display: inline-block;
    padding: 1.75em 1em;
    text-transform: uppercase;
}

@media (min-width: 50em) {
    header nav.primary {
        display: inline-block;
    }
    .sidenav, .sidenav-toggle {
        display: none;
    }
}

/* ------------------------------------------------------------ Header */
header {
    height: 100px;
}
header h1 {
    display:inline-block;
    vertical-align: middle;
    margin: 0.4em 0;
}

/* ------------------------------------------------------------ Banner */

h2 {
    text-align: center;
}

/* ------------------------------------------------------------ Layout */
.grid{
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr;
}

.grid .grid-heading {
    grid-column: 1/1;
    margin-bottom: 0.5em;
    margin-top: 1em;
    padding: 0 1em;
}

@media (min-width: 80em) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .grid .grid-heading {
        grid-column: 1 / span 3;
        padding: 0;
    }
}

/* ------------------------------------------------------------ Devices */
.mobile-device {
    position: relative;
    max-width: 100%;
    width: 300px;
    height: 600px;
    border-radius: 40px;
    border: 0.5em solid var(--secondary);
    padding: 0;
    overflow: hidden;
    margin: 0 auto;
    background: white;
}
.tv {
    position: relative;
    max-width: 336px;
    width: 100%;
    border: 0.5em solid var(--secondary);
    padding: 5px;
    margin: 0 auto;
    background: white;
    height: 600px;
    overflow:hidden;
}
.kiosk {
    border-radius: 10px;
    border: 1em solid var(--secondary);
    padding: 5px;
    margin: 0 auto;
    background: white;
    /* width: 286px;
    height: 500px; */
    width: 274px;
    height: 480px;
    border-radius: 5px;
    border-width: 55px 85px 75px 25px;
    position: relative;
}
.kiosk:after, .kiosk:before {
    display: block;
    position: absolute;
    content: '';
    background: var(--secondary);
    transform: translateX(28px);
}
.kiosk:before {
    width: 300px;
    height: 205px;
    bottom: -260px;
}
.kiosk:after {
    width: 370px;
    height: 10px;
    bottom: -270px;
}


/* ------------------------------------------------------------ Map */
.map-svg {
    max-width: 500px;
    margin: 0 0 0 auto;
}
.map-legend__section__details {
    list-style: none;
    margin-bottom: 0.5em;
}
.map-legend__section__details span {
    width: 1em;
    height: 1em;
    display: inline-block;
    opacity: 0.5;
}

.map-legend__section__details .at-capacity {
    background: red;
}
.map-legend__section__details .near-capacity {
    background: var(--dark-orange);
}
.map-legend__section__details .low-capacity {
    background: var(--green);
}
.map-legend__section__details .available {
    background: var(--primary);
}
.map-legend__section__details .reserved {
    background: var(--secondary);
}

/* ------------------------------------------------------------ Footer */
footer {
    padding: 1.5em 0;
    margin-top: 0.5em;
}
footer p {
    text-align: center;
}
footer nav {
    text-align: center;
}
footer nav ul {
    margin: 0 0 0.5em 0;
    padding: 0;
    list-style: none;
}
footer nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
footer nav ul li:not(:last-child) {
    margin-right: 1em;
}
footer nav ul li a, footer nav ul li a:visited {
    color: var(--primary);
}  
footer nav ul li a:hover, footer nav ul li a:focus {
    color: var(--alt);
}