/*---------------------------------------------Fonts*/

@font-face {
    font-family: 'GlitchInside';
    src: url('../fonts/glitchinside.otf') format('opentype');
}

body {
    font-family: 'Exo', sans-serif;
    font-weight: 500;
    font-size: 1.125em;
    max-width: 1920px;
    margin: 0 auto;
    background: #f0f0f0;
}

h1,
h2,
h3 {
    font-family: 'GlitchInside', 'Exo', sans-serif;
}

h4 {
    font-family: 'Creepster', sans-serif;
    font-size: 135%;
    padding: 20px;
}

.unrest {
    font-family: 'Creepster', sans-serif;
    color: #880808;
    font-size: 150%;
    vertical-align: sub;
}

/*---------------------------------------------Headings*/

h1 {
    color: #3b3b3b;
    margin-bottom: 25px;
}

.sign-up-head {
    margin-bottom: 20px;
}

#glitch-heading {
    color: #f0f0f0;
}

#error-msg {
    text-decoration: none;
    font-size: 180%;
}

/*---------------------------------------------Header*/

.heading {
    background-color: #f0f0f0;
    height: auto;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#home {
    background-image: url(../images/header/home-hero.webp);
}

#facilities {
    background-image: url(../images/header/facilities-hero.webp);
}

#booking {
    background-image: url(../images/header/booking-hero.webp);
}

#glitch {
    background-color: #055557;
    background-image: url(../images/header/glitch.webp);
}

.thank-you {
    background-image: url(../images/header/thankyou-header.webp);
}

/*---------------------------------------------Navigation Menu*/

.contact-info {
    margin: 0;
    padding-left: 10px;
    font-size: 0.9em;
}

.contact-info-padding {
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar a {
    text-decoration: none;
    color: #f0f0f0;
    font-size: 120%;
    font-weight: 600;
    margin-right: 20px;
    transition: color 0.3s ease-in-out;
}

.navbar a:hover {
    color: #ffc561;
}

.navbar a:last-child {
    padding-right: 20px;
}

.active {
    text-decoration: underline #ffc561;
    -webkit-text-decoration: underline #ffc561;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}

/*---------------------------------------------Hamburger Icon*/

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* The code below for the hamburger menu transformation was sourced from https://forum.bootstrapstudio.io/t/change-hamburger-icon/8990 */

.navbar-toggler-icon {
    background-image: none !important;
    background-color: #ffc561;
    height: 3px;
    width: 25px;
    margin: 10px 0;
    position: relative;
    transition: all 0.35s ease-out;
    transform-origin: center;
}

.navbar-toggler-icon::before {
    display: block;
    background-color: #ffc561;
    height: 3px;
    content: "";
    position: relative;
    top: -7px;
    transition: all 0.15s ease-out;
    transform-origin: center;
}

.navbar-toggler-icon::after {
    display: block;
    background-color: #ffc561;
    height: 3px;
    content: "";
    position: relative;
    top: 4px;
    transition: all 0.35s ease-out;
    transform-origin: center;
}

.navbar-dark .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon::before,
.navbar-dark .navbar-toggler-icon::after {
    background-color: #ffc561;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    transform: rotate(45deg);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
    transform: rotate(-90deg) translateX(7px);
}

/*---------------------------------------------Background Colours*/

.bg-grey {
    background-color: #3b3b3b;
    position: relative;
}

.bg-grey i {
    color: #ffc561;
}

.bg-grey p,
.bg-grey li {
    color: #f0f0f0;
}

.bg-teal {
    background: radial-gradient(#055557 50%, #032f30);
    color: #f0f0f0;
}

.bg-teal h2,
.bg-teal h3 {
    text-decoration: underline #ffc561;
    -webkit-text-decoration: underline #ffc561;
    text-underline-offset: 12px;
    text-decoration-thickness: 4px;
    line-height: 1.8;
}

.bg-teal .thankyou-title {
    text-decoration: none;
}

.bg-white {
    background-color: #f0f0f0;
    background-image: url(../images/header/hex-bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.bg-white h2,
.bg-white h3 {
    color: #055557;
    text-decoration: underline #3b3b3b;
    -webkit-text-decoration: underline #3b3b3b;
    text-underline-offset: 12px;
    text-decoration-thickness: 4px;
    line-height: 1.8;
}

.bg-red {
    background-color: #880808;
}

.table td,
.table th {
    background: #f0f0f0;
}

/*---------------------------------------------Boxes & Containers*/

.text-box {
    border-radius: 15px;
}

.tb-margin {
    margin-bottom: 50px;
    margin-top: 50px;
}

.tb-padding {
    padding: 10px;
}

.text-box p {
    padding: 20px 20px 0;
}

.tb-white {
    background-color: #f0f0f0;
    color: #3b3b3b;
    border: 4px solid #ffc561;
}

.tb-teal {
    background-color: #055557;
    color: #f0f0f0;
    border: 4px solid #3b3b3b;
}

.tb-unrest {
    background-color: #880808;
    color: #f0f0f0;
    border: 4px solid #3b3b3b;
    height: 400px;
    max-width: 250px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: all 1s ease-in-out;
    margin-left: auto;
    margin-right: auto;
}

#haunted {
    background-image: url(../images/home/haunted-bg.webp);
}

#scarecrow {
    background-image: url(../images/home/scarecrow-bg.webp);
}

#hidden {
    background-image: url(../images/home/hidden-bg.webp);
}

.flex-container {
    display: flex;
    justify-content: space-between;
}

/*---------------------------------------------Hover.css*/

.fade-container {
    height: 100%;
    width: 100%;
    margin-top: -10px;
}

.hvr-sweep-to-bottom:before {
    opacity: 1;
    background: #880808;
    -webkit-transition-duration: .6s;
    transition-duration: .6s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.hvr-sweep-to-bottom {
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    opacity: 0;
}

.tb-unrest:hover .fade-container {
    opacity: 1
}

/*---------------------------------------------Images*/

.logo {
    margin-top: 25px;
    margin-bottom: 25px;
}

.logo-mini {
    height: 50px;
    padding-top: 10px;
}

.unrest-img {
    max-height: 450px;
    width: auto;
}

.rewards-icon {
    max-height: 70px;
}

/*---------------------------------------------Modal*/

#membership-modal {
    color: #3b3b3b;
}

/*---------------------------------------------Horizontal Rule*/

.yellow-line {
    border: 2px solid #ffc561;
    margin: 0;
    opacity: 1;
}

/*---------------------------------------------Iframe*/

iframe {
    width: 100%;
    height: 350px;
    border: 4px solid #3b3b3b;
    border-radius: 15px;
    margin-bottom: 50px;
}

/*---------------------------------------------Terms & Conditions*/

#terms-container {
    width: 100%;
    overflow: hidden;
}

#terms-content {
    height: 240px;
    overflow-x: hidden;
    overflow-y: scroll;
}

#tc-sub-p1 {
    padding: 0 20px;
}

#tc-sub-p2 {
    padding: 0 20px;
}

.tc-title {
    text-decoration: underline #ffc561;
    -webkit-text-decoration: underline #ffc561;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
    padding-bottom: 20px;
    display: inline-block;
}

/*---------------------------------------------Forms & Lables*/

#news-email {
    margin-right: 15px;
    height: 30px;
    width: 250px;
    max-width: 100%;
    font-size: 1.25em;
    border: none;
    border-radius: 5px;
    padding: 5px;
    color: #3b3b3b;
}

#news-email:focus {
    outline: 3px solid #ffc561;
}

#news-email::placeholder {
    color: #8c8c8c;
}

label {
    display: block;
}

.form-input {
    height: 30px;
    width: auto;
    max-width: 100%;
    border-radius: 5px;
    border: 1px solid #3b3b3b;
    color: #3b3b3b;
}

.form-input:focus {
    outline: 2px solid #ffc561;
    border: none;
}

.form-input:checked {
    background-color: #055557;
}

#guests {
    width: 80px;
}

/*---------------------------------------------Lists*/

.amenities-list {
    list-style-type: none;
    margin: 25px 25px 25px 0;
    font-size: 1.1em;
}

.amenities-list li {
    margin-top: 10px;
}

.amenities-list li:first-child {
    margin-top: 0;
}

.amenities-list i {
    margin-right: 10px;
}

/*---------------------------------------------Buttons*/

a {
    text-decoration: none;
}

.button {
    border: 3px solid #3b3b3b;
    background-color: #055557;
    color: #f0f0f0;
    border-radius: 7px;
    transition: color 0.2s ease-in-out;
}

.button:hover {
    background-color: #032f30;
    color: #ffc561;
    border-color: #ffc561;
}

.header-btn {
    margin-top: 10px;
    padding: 5px;
    font-weight: 600;
}

#booking-btn {
    border: 3px solid #f0f0f0;
    background-color: #3b3b3b;
    color: #f0f0f0;
    border-radius: 7px;
    transition: color 0.2s ease-in-out;
    margin-top: 10px;
    padding: 5px;
    font-weight: 600;
}

#booking-btn:hover {
    color: #ffc561;
    border-color: #ffc561;
}

.capsule-btn {
    margin-top: 20px;
    margin-right: 20px;
    padding: 5px;
    font-weight: 600;
}

.vr-exp-btn {
    font-weight: 600;
    font-size: 110%;
    padding: 5px 10px;
}

.member-btn {
    font-weight: 600;
    font-size: 110%;
    padding: 5px 10px;
    margin-top: 15px;
    margin-bottom: 50px;
    border: 3px solid #f0f0f0;
    color: #f0f0f0;
    border-radius: 7px;
    background-color: #3b3b3b;
}

.member-btn:hover {
    border-color: #ffc561;
    background-color: #032f30;
    color: #ffc561;
}

.form-btn {
    padding: 4px 12px;
    font-weight: 600;
}

#news-submit {
    font-size: 1.25em;
    padding: 4px 10px;
    margin-bottom: 50px;
    margin-left: 10px;
    margin-right: 10px;
}

.modal-btn {
    font-weight: 600;
    padding: 5px 15px;
}

.footer-button {
    border: 1px solid #f0f0f0;
    background-color: #055557;
    color: #f0f0f0;
    margin-top: 7px;
    padding: 2px 5px;
    border-radius: 5px;
    transition: color 0.2s ease-in-out;
}

.footer-button:hover {
    background-color: #032f30;
    color: #ffc561;
    border-color: #ffc561;
}

/*---------------------------------------------Hexagon Shape*/

/*The code for the hexagonal container shape used for the social media footer icons
was sourced from https: //codeconvey.com/css-hexagon-image-with-border/
and modified to suit the site*/

.hex {
    width: 40px;
    height: 34.64px;
    /* width * 0.866 */
    background-color: #f0f0f0;
    transition: background-color 0.2s ease-in-out;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex-background {
    background-color: #055557;
    /*color of the main-background*/
    top: 1px;
    /* equal to border thickness */
    left: 1px;
    /* equal to border thickness */
    width: 38px;
    /* container height - (border thickness * 2) */
    height: 32.64px;
    /* container height - (border thickness * 2) */
    transition: background-color 0.2s ease-in-out;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex i {
    color: #f0f0f0;
    transition: color 0.2s ease-in-out;
}

.hex:hover {
    background-color: #ffc561;
}

.hex:hover .hex-background {
    background-color: #032f30;
}

.hex:hover i {
    color: #ffc561;
}

/*---------------------------------------------Footer*/

.footer-heading {
    font-family: 'Exo', sans-serif;
    color: #ffc561;
    font-size: 1.1em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.footer-text {
    margin: 0;
    font-size: 0.85em;
}

.footer-address {
    margin-bottom: 10px;
}

.copyright {
    padding-top: 10px;
    margin-bottom: 10px;
}

.footer-email {
    margin-top: 10px;
    width: 200px;
    border: none;
    border-radius: 5px;
    padding: 2px 5px;
    color: #3b3b3b;
}

.footer-email:focus {
    outline: 2px solid #ffc561;
}

.footer-email::placeholder {
    color: #8c8c8c;
}

.footer-icon-margin {
    margin-bottom: -20px;
    margin-left: 15px;
    margin-right: 15px;
}

/*---------------------------------------------Media Queries*/

@media screen and (max-width: 600px) {

    .flex-container {
        display: block;
    }

    .vr-exp-btn {
        display: block;
        margin: 0 auto 25px;
    }

    .bg-white {
        background-size: auto 100%;
        background-attachment: initial;
    }
}

@media screen and (max-width: 768px) {

    .amenities-list {
        font-size: 1em;
    }

    .list-2 {
        margin-top: -10px;
    }

    #home {
        background-image: url(../images/header/home-hero-mobile.webp);
    }

    #facilities {
        background-image: url(../images/header/facilities-hero-mobile.webp);
    }

    #booking {
        background-image: url(../images/header/booking-hero-mobile.webp);
    }
}

@media screen and (max-width: 991.5px) {

    .fade-container {
        opacity: 1;
    }

    .tb-unrest {
        height: auto;
        max-width: 400px;
    }

    #haunted {
        background-image: none;
    }

    #scarecrow {
        background-image: none;
    }

    #hidden {
        background-image: none;
    }
}