/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


/* Document
   ========================================================================== */


/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    scroll-behavior: smooth;
}


/* Sections
     ========================================================================== */


/**
   * Remove the margin in all browsers.
   */

body {
    margin: 0;
}


/**
   * Render the `main` element consistently in IE.
   */

main {
    display: block;
}


/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}


/* Grouping content
     ========================================================================== */


/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}


/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}


/* Text-level semantics
     ========================================================================== */


/**
   * Remove the gray background on active links in IE 10.
   */

a {
    background-color: transparent;
}


/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}


/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
strong {
    font-weight: bolder;
}


/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}


/**
   * Add the correct font size in all browsers.
   */

small {
    font-size: 80%;
}


/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}


/* Embedded content
     ========================================================================== */


/**
   * Remove the border on images inside links in IE 10.
   */

img {
    border-style: none;
}


/* Forms
     ========================================================================== */


/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}


/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */

button,
input {
    /* 1 */
    overflow: visible;
}


/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */

button,
select {
    /* 1 */
    text-transform: none;
}


/**
   * Correct the inability to style clickable types in iOS and Safari.
   */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}


/**
   * Remove the inner border and padding in Firefox.
   */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}


/**
   * Restore the focus styles unset by the previous rule.
   */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}


/**
   * Correct the padding in Firefox.
   */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}


/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}


/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */

progress {
    vertical-align: baseline;
}


/**
   * Remove the default vertical scrollbar in IE 10+.
   */

textarea {
    overflow: auto;
}


/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}


/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}


/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}


/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}


/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

 ::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}


/* Interactive
     ========================================================================== */


/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */

details {
    display: block;
}


/*
   * Add the correct display in all browsers.
   */

summary {
    display: list-item;
}


/* Misc
     ========================================================================== */


/**
   * Add the correct display in IE 10+.
   */

template {
    display: none;
}


/**
   * Add the correct display in IE 10.
   */

[hidden] {
    display: none;
}

li {
    list-style-type: none;
}

a {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}


/* ================ WHOLE SETTINGS ================ */

* {
    -webkit-transition: all 0.3s cubic-bezier(0.49, 0.21, 0.72, 0.75);
    transition: all 0.3s cubic-bezier(0.49, 0.21, 0.72, 0.75);
}

body {
    background: #f9f8f7;
    font-family: 'Bebas Neue', cursive;
    color: #e42823;
    line-height: 0;
}

.container {
    padding: 0 5%;
}

@media (min-width: 900px) {
    .hidden-desktop {
        display: none;
    }
    .container {
        padding: 0 10%;
    }
}

section {
    -webkit-transition: transform 0.2s cubic-bezier(0.49, 0.21, 0.72, 0.75);
    transition: transform 0.2s cubic-bezier(0.49, 0.21, 0.72, 0.75);
}


/* ================ MOBILE FOOTER ================ */

.footer-mobile {
    overflow: hidden;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 10;
    background: #f9f8f7;
    -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.1);
}

.trademark {
    margin-bottom: 2rem;
}


/* @media (min-width: 900px) { */

.trademark {
    margin-bottom: 4rem;
}

.container-address {
    margin-top: 2rem;
}

.checkerboard-single {
    height: 15px;
    margin-left: -5%;
}

.checkerboard-single:nth-of-type(2) {
    margin-left: -10%;
}

.container-menu-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    justify-content: space-around;
}

.menu-item {
    text-align: center;
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 1em 0;
    border: 3px solid #e42823;
    /* border-bottom: none; */
    font-size: 1.33rem;
}

.menu-item:hover,
.menu-item:focus {
    background-color: #e42823;
    color: #f9f8f7;
}

.menu-item:nth-of-type(2) {
    border-right: none;
    border-left: none;
}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}


/* ================ ADDRESS ================ */

.address {
    line-height: 1.6;
}

a.address:hover,
a.address:focus {
    text-decoration: underline;
}

.container-address {
    display: grid;
    /* justify-content: space-between; */
    position: relative;
    font-size: 1.33rem;
    grid-gap: 2rem;
}

.address-1,
.address-2,
.trademark {
    text-align: center;
}

.trademark {
    margin-top: 1rem;
}

#trademark-desktop {
    display: none;
}

@media(min-width: 671px) {
    .container-address {
        grid-template-columns: 1fr 1fr;
    }
    .address-1,
    .trademark {
        text-align: left;
    }
    .address-2 {
        text-align: right;
    }
    #trademark-desktop {
        display: block;
    }
    #trademark-mobile {
        display: none;
    }
}


/* ================ MARQUEE ================ */

.container-marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    /* position: absolute; */
    color: #f9f8f7;
    line-height: 2;
    margin: 1em 0;
    background: #e42823;
}

.marquee {
    animation: marquee 25s linear infinite;
    font-size: 1.33rem;
    margin: .33em 0;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}

@media (min-width: 600px) {
    .marquee {
        animation: marquee 35s linear infinite;
    }
}

@media (min-width: 1000px) {
    .marquee {
        animation: marquee 70s linear infinite;
    }
}


/* ================ PHOTOS GRID ================ */

.img-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 4rem;
    grid-template-areas: "img-1 img-1 img-1 img-1 img-1 img-1 img-1 img-1 . . . ." ". . tag tag tag tag tag tag tag tag . ." ". . . . img-2 img-2 img-2 img-2 img-2 img-2 img-2 img-2" "img-3 img-3 img-3 img-3 img-3 img-3 img-3 img-3 . . . ." ". . . . img-4 img-4 img-4 img-4 img-4 img-4 img-4 img-4" "img-5 img-5 img-5 img-5 img-5 img-5 img-5 img-5 . . . ." ". . . . img-6 img-6 img-6 img-6 img-6 img-6 img-6 img-6";
    margin: 0rem 0 4rem 0;
}


/* @media (min-width: 800px) {
    .img-grid {
        grid-template-rows: repeat(5, 1fr);
        grid-template-areas: 
        "img-1 img-1 img-1 img-1 img-1 . . . . . . . " 
        ". . . . . . . img-2 img-2 img-2 img-2 img-2" 
        "img-3 img-3 img-3 img-3 img-3 . . . . . . . " 
        ". . . . . . . img-4 img-4 img-4 img-4 img-4" 
        "img-5 img-5 img-5 img-5 img-5 . . . . . . . " 
        ". . . . . . . img-6 img-6 img-6 img-6 img-6";
    }
} */

@media (min-width: 800px) {
    .img-grid {
        grid-template-rows: repeat(13, 1fr);
        grid-row-gap: 0;
        grid-template-areas: "img-1 img-1 img-1 img-1 img-1 . . . . . . . " "img-1 img-1 img-1 img-1 img-1 . . . tag tag tag tag " "img-1 img-1 img-1 img-1 img-1 . . img-2 img-2 img-2 img-2 img-2" ". . . . . . . img-2 img-2 img-2 img-2 img-2" "img-3 img-3 img-3 img-3 img-3 . . img-2 img-2 img-2 img-2 img-2" "img-3 img-3 img-3 img-3 img-3 . . . . . . . " "img-3 img-3 img-3 img-3 img-3 . . img-4 img-4 img-4 img-4 img-4 " ". . . . . . . img-4 img-4 img-4 img-4 img-4" "img-5 img-5 img-5 img-5 img-5 . . img-4 img-4 img-4 img-4 img-4" "img-5 img-5 img-5 img-5 img-5 . . . . . . . " "img-5 img-5 img-5 img-5 img-5 . . img-6 img-6 img-6 img-6 img-6 " ". . . . . . . img-6 img-6 img-6 img-6 img-6" ". . . . . . . img-6 img-6 img-6 img-6 img-6";
        padding: 0 10%;
    }
}

.typewriter {
    grid-area: tag;
}

.img-wrapper {
    border: 3px solid #e42823;
}

.img-1 {
    grid-area: img-1;
}

.img-2 {
    grid-area: img-2;
}

.img-3 {
    grid-area: img-3;
}

.img-4 {
    grid-area: img-4;
}

.img-5 {
    grid-area: img-5;
}

.img-6 {
    grid-area: img-6;
}

img {
    max-width: 100%;
    display: block;
    object-fit: cover;
}


/* ================ LOTTIE ANIM ================ */

.hidden-desktop .lottie-anim {
    margin: 2rem auto;
    width: 69%;
}

.nav-desktop .lottie-anim {
    margin: .66rem 0;
}


/* ================ NAV DESKTOP ================ */

.nav-desktop {
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: minmax(50px, 111px) 1fr;
    position: sticky;
    top: 0;
    z-index: 10;
    -webkit-box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1);
    background: #f9f8f7;
    /* margin-bottom: 4rem; */
}

@media (max-width: 900px) {
    .nav-desktop {
        display: none;
    }
}

.nav-item:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: .66em;
    background: #e42823;
    bottom: 0;
}

.nav-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.nav-item p,
.nav-item p:nth-of-type(2) {
    grid-column: -1 / 1;
    grid-row: -1 / 1;
}

.nav-text {
    display: flex;
    justify-content: flex-end;
}

.nav-item {
    position: relative;
    font-size: 1rem;
    margin: 0 1rem;
}

.nav-item p {
    cursor: pointer;
    position: relative;
    display: inline-block;
    font-size: 1.33rem;
    background: linear-gradient(to bottom, #e42823, #e42823 48%, #f9f8f7 48%, #f9f8f7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-repeat: no-repeat;
    transition: background 0.1s ease-out;
    white-space: nowrap;
    line-height: 1;
    padding: 0 2em;
    /* background-size: 10px 100px; */
}

.nav-item:last-of-type {
    margin-right: 0;
}

.nav-item p:hover {
    background-position: 0 .33em;
}

.nav-item:hover:before {
    transform: translateY(.5em)
}


/* ================ BTN GRID ================ */

.btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "email email" "submit submit" "jobs insta";
    justify-content: center;
    align-items: center;
    grid-row-gap: 1rem;
    grid-column-gap: 16.66%;
    font-size: 1.33rem;
    padding: 4rem 0 4rem 0;
}

.btn-job {
    line-height: 1;
}

.btn-grid>*:hover {
    cursor: pointer;
}

@media (min-width: 800px) {
    .btn-grid {
        grid-template-areas: "email jobs" "submit insta";
        grid-template-rows: 1fr 1fr;
    }
}

.form-submit {
    grid-area: submit;
}

.form-email {
    grid-area: email;
}

.btn-job {
    grid-area: jobs;
}

.ig-link {
    grid-area: insta;
}

.ig-logo {
    width: 1.33rem;
    display: block;
    margin: 0 auto;
}

.form-email,
.btn-job,
.ig-link,
.form-submit {
    padding: .5em;
    border: 2px solid #e42823;
    text-align: center;
}

.form-email,
.btn-job,
.ig-link {
    color: #e42823;
    background-color: #f9f8f7;
}

.btn-job:hover,
.btn-job:focus,
.ig-link:hover,
.ig-link:focus,
.btn-delivery:hover,
.btn-delivery:focus {
    background-color: #e42823;
    color: #f9f8f7;
}

.ig-link:hover .cls-1 {
    fill: #f9f8f7;
}

.form-submit:hover,
.form-submit:focus {
    transform: scale(.95);
}

.ig-link,
.btn-job,
.cls-1,
.menu-item {
    transition: all .2s cubic-bezier(0.49, 0.21, 0.72, 0.75);
}

.form-submit {
    color: #f9f8f7;
    background-color: #e42823;
    transition: all .1s ease-in-out;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #e42823;
    opacity: 1;
    /* Firefox */
}

 :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #e42823;
}

 ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #e42823;
}

textarea:focus,
input:focus {
    outline: none;
}


/* ================ TYPEWRITER ================ */

.typewriter h1 {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid #e42823;
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    margin: 0 0 0 auto;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em;
    /* Adjust as needed */
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
    line-height: 1;
    font-size: 1.33rem;
    text-align: right;
}

@media (max-width: 800px) {
    .typewriter h1 {
        text-align: center;
    }
}


/* The typing effect */

@keyframes typing {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
    from,
    to {
        border-color: transparent
    }
    50% {
        border-color: #e42823;
    }
}


/* ================ MODAL CONTAINER ================ */

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background-color: #f9f8f7;
    width: 90%;
    height: 20vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5%;
    justify-items: center;
    align-items: center;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.1);
}

@media(max-width:700px) {
    .modal.clickcollect {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: 1fr;
    }
}

.btn-delivery {
    border: 1px solid;
    padding: 1em 1.33em;
    font-size: 1.33rem;
    border: 2px solid #e42823;
    text-align: center;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
}

.close {
    position: absolute;
    width: 1rem;
    top: 41vh;
    right: 7vw;
}

@media (min-width: 900px) {
    .modal {
        width: 80%;
    }
    .close {
        right: 11vw;
    }
    .btn-delivery {
        padding: 1em 1.66em;
    }
}