/*@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');*/


/* latin */
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/fontBN.woff2) format('woff2');
    unicode-range: U+0000-007F;
}
/* latin */
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url(fonts/fontJS.woff2) format('woff2');
    unicode-range: U+0000-007F;
}


body {
    background-color: #fff;
    padding: 0;
    margin: 0;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1em;
    overflow-x: hidden;
}
a { text-decoration: none; }
a:hover { color: unset; }

/* #headingBox */
#headingBox { background-size: cover; }

/* #navbar */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 3.8em;
    border-bottom: 1px solid black;
    z-index: 3;
}
#navbar a {
    position: relative;
    display: inline-block;
    height: 100%;
}
#navbar a div {
    margin: 2px 20px 0 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.1em;
    color: black;
}
#navbar a .sliderbar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 8%;
    background-color: #e22;
    transition: 0.2s;
}
#navbar a:hover .sliderbar { width: 100%; }

/* #menuoptions #faded */
#barname { display: none; }
#menuicon { display: none; }
#menuoptions { display: block; }
#faded { display: none; }
@media only screen and (max-width: 750px) {
    .box {
        padding-bottom: 5vh;
    }
    #navbar a { display: none; }
    #barname {
        display: block;
        color: #333;
        padding: calc(4vh - 20px) 0 0 20px;
        font-family: "Bebas Neue", sans-serif;
        font-size: 32px;
    }
    #menuicon {
        display: block;
        position: absolute;
        top: calc(4vh - 20px);
        right: 20px;
        fill: #333;
    }
    #faded {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(51, 51, 51, 0.7);
        z-index: 2;
    }
    #menuoptions {
        position: fixed;
        top: 120px;
        left: 10%;
        width: 90%;
        z-index: 3;
    }
    #menuoptions a {
        display: block;
        width: 100%;
        padding: 14px;
        padding-left: 28px;
        margin: 0;
        margin-bottom: 10px;
        background-color: #e22;
        font-family: "Bebas Neue", sans-serif;
        font-size: 1.8em;
        color: white;
        z-index: 3;
        transform: translateX(100%);
        transition: 0.4s;
    }
    #menuoptions a.active { background-color: #333; }
    #menuoptions a:nth-child(2) { transition-delay: 0.1s; }
    #menuoptions a:nth-child(3) { transition-delay: 0.2s; }
    #menuoptions a:nth-child(4) { transition-delay: 0.3s; }
}
@media only screen and (max-width: 340px) {
    #barname { display: none; }
}

/* .box */
.box {
    position: relative;
    width: 90%;
    padding: 1px 5%;
    padding-bottom: 10vh;
    margin: 0;
    text-align: center;
}
.darkbox { background-color: #333; color: white; }
.lightbox { background-color: white; color: #333; }
.redbox { background-color: #e22; color: white; }

/* h */
h1#pageHeading {
    width: 100%;
    min-height: min(20vw, 10em, 28vh);
    margin-bottom: 0;
    text-align: center;
    font-size: min(20vw, 10em, 28vh);
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.1em;
    margin: 22vh 0 10vh 0;
    color: white;
    text-shadow: 0 0 8px #000a;
}
h2 {
    width: 100%;
    margin-top: 0;
    text-align: center;
    font-size: min(max(6vw, 2em), 5em, 14vh);
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.1em;
    color: #333;
    text-shadow: 0 1px #FFF;
}
h3 {
    font-family: "Bebas Neue", sans-serif;
    font-size: min(max(2em, 8vw), 4em, 14vh);
    font-weight: 400;
    margin: 0;
    margin-top: 8vh;
    transition: 0.4s;
}
h3:hover { letter-spacing: 0.1em; }
h4 {
    font-size: 1.5em;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
}
h6 {
    font-family: "Bebas Neue", sans-serif;
    font-size: min(6vw, 1.5em, 7vh);
    font-weight: 400;
    margin: 0;
    margin-top: -1em;
}
.remain { display: none; }
@media only screen and (max-width: 750px) {
    h1 { margin-top: 70px; }
    h3, h6 { display: none; }
    .remain { display: block; }
    .remain h3 {
        display: block;
        margin-top: 5vh;
    }
    .remain h6 {
        display: block;
        margin-top: 0;
    }
}

/* .leftArea .rightArea */
.leftArea {
    position: relative;
    width: 45%;
    line-height: 1.4;
}
.rightArea {
    position: relative;
    left: 55%;
    width: 45%;
    line-height: 1.4;
}
.darkbox .leftArea, .darkbox .rightArea, .redbox .leftArea, .redbox .rightArea { color: white; }
.lightbox .leftArea, .lightbox .rightArea { color: #333; }
.lightbox .leftArea b, .lightbox .rightArea b { color: #e22; }

@media only screen and (max-width: 750px) {
    .leftArea { margin-top: 40px; width: 100%; }
    .rightArea {
        margin-top: 40px;
        width: 100%;
        left: 0;
    }
}

/* button */
button {
    position: relative;
    width: 20vw;
    padding-top: 4px;
    margin-top: 1em;
    background-color: transparent;
    border: none;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.6em;
    font-weight: 400;
    transition: 0.4s;
}
button .exp {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: .1em;
    transition: 0.2s;
}
button:hover .exp { width: 100%; }
.redbox button, .darkbox button { 
    border: 1px solid white;
    color: white;
}
.lightbox button {
    border: 1px solid #333;
    color: #333;
}
.redbox button .exp, .darkbox button .exp { background-color: white; }
.lightbox button .exp { background-color: #333; }

/* .leftImage .rightImage */
.leftImage {
    position: absolute;
    top: 10vh;
    left: 5%;
    width: 45%;
    height: calc(100% - 20vh);
    object-fit: cover;
}
.rightImage {
    position: absolute;
    top: 10vh;
    right: 5%;
    width: 45%;
    height: calc(100% - 20vh);
    object-fit: cover;
}

@media only screen and (max-width: 750px) {
    button { width: 4em; }
    .leftImage, .rightImage {
        position: relative;
        top: 2vh;
        left: 0;
        right: 0;
        width: 100%;
        height: 35vh;
    }
}

/* #storeBox #footer1 #footer2 */
#storeBox {
    height: 12vw;
    background-image: url(images/sign.JPG);
    background-position: top;
    background-size: cover;
}
#footer1 {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #e22;
    line-height: 28px;
    color: white;
}
#footer1 #zone1, #footer1 #zone2, #footer1 #zone3 {
    display: inline-block;
    margin: 3%;
    padding: 0;
    font-weight: 350;
}
#footer1 b { font-weight: 800; }
#footer1 #zone1 span {
    display: inline-block;
}
#footer1 #zone3 {
    text-align: center;
    padding: 1.4em 20px;
    border: 1px solid white;
}
#footer1 * {
    font-size: min(6vw, 19.2px, 4vh);
}
#footer2 {
    height: 2vh;
    background-color: #711;
}