@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:wght@300&display=swap');

html {height: 101%;}
body {
    padding-top: 2.8rem;
    background: white;
}

h1 {
    margin-bottom: 1rem;
    font-size: 2rem;
    font-family: raleway, sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    color: black;
}

h2 {
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
    font-family: raleway, sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    color: black;
}

.paper {
    background-color: #black;
    padding: 0;
    display: block;
    font-family: raleway, sans-serif;
    color: black;
}

.header-banner {

}

.footer {
    font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    text-align: center; font-size: 1rem;
    color: black; margin: 1rem; padding-bottom: 1rem;
    background-position: center top;
    padding-top: 1vw;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
}

.scary {
    font-size: 1.8rem;
    font-family: 'GallowTreeRegular', Helvetica, Arial, sans-serif;
    font-weight: normal;
}

.content-break {width: 90%; height: 17px; margin: 15px auto; display: none;}
.container {max-width: 1100px; color: #CCCCCC; margin-top: 1.5rem;}

.bg-dark {
    background-color: white!important;
}
.navbar-toggler {
    cursor: pointer;
}
.navbar-dark .navbar-toggler-icon {
    background-image: none;
}
.navbar-dark .navbar-toggler {
    background-image: url('/images/soiff/navbars.png');
    background-size: cover;
    border-color: black;
    border: 0;
}
.nav-logo {
    height: 3.5rem;
}

.navbar-dark .nav-link {
    color: #FFFFFF;
    font-family: "Raleway", sans-serif;;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem 0.5rem;
    -webkit-font-smoothing: antialiased;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding: 0.5rem 0.5rem;
}

.navbar-dark .navbar-nav .nav-link {text-decoration: none; color: black; transition-behavior: normal; transition-delay: 0s; transition-duration: 0.4s; transition-property: color; transition-timing-function: ease;}
.navbar-dark .navbar-nav .nav-link:hover {color: rgb(117, 117, 117); cursor: pointer; text-decoration: none;}
.navbar-dark .navbar-nav .nav-link.active {color: rgb(117, 117, 117); transition-behavior: normal; transition-delay: 0s; transition-duration: 0.4s; transition-property: color; transition-timing-function: ease;}
.navbar-dark .navbar-nav .nav-link.active:hover {color: black;}

.navbar-dark .navbar-nav .active {color: rgb(117, 117, 117);}

.nav-item {
    padding-right: 2rem;
}

.navbar-nav:first-child {
    padding-left: 2rem;
}

.navbar {padding: 0; border-bottom: 1px solid black;}
.navbar-dark .navbar-brand {padding: 0 0 0 0.5rem; background-color: black;}

.ext-title {display: none;}

.ticket-details {list-style-position: outside; list-style-type: disc; padding: 0; display: block; margin: 0 0 0 40px;}
.ticket-details li {display: list-item; text-align: left; padding: 0; float: none; width: 95%;}
.ticket-container {border: 2px solid black; background-color: #EEEEEE; margin-bottom: 1.5rem;}
.ticket-description {padding: 10px; background-color: white; display: inline-block; display: block; color: black; border-top: 2px solid black;}

.ticket-add {font-weight: bold; font-size: 1.3rem; color: white; background-color: rgb(255 190 4); padding: 10px; border: 0; text-align: left;}
.ticket-add input[type='text'] {font-weight: normal; font-size: 1.3rem; width: 15%; border-radius: 10px; padding: 2px 5px; text-align: center;}
.ticket-add input[type='submit'] {font-weight: normal; font-size: 1.3rem; border-radius: 10px; padding: 2px 10px; text-align: center; float: right;}
.ticket-add a:hover {cursor: pointer;}
.ticket-add a .fa-plus-circle {color: green;}
.ticket-add a .fa-minus-circle {color: red;}
.ticket-add a .fa-cart-plus {font-size: 2.2rem; }
.ticket-add .submit {color: #EEEEEE; float: right; font-size: 1.3rem;}

.qty {font-weight: normal; font-size: 1.4rem; font-weight: bold; width: 3rem; border: 0; border-radius: 6px; padding: 2px 10px; text-align: center; display: inline-block; margin-right: 0.5rem;}
.discount {font-weight: normal; font-size: 1.4rem; font-weight: bold; border: 0; border-radius: 6px; padding: 2px 10px; text-align: center; display: inline-block; margin-right: 0.5rem;}
.fa.fa-caret-up.qty_arrow, .fa.fa-caret-down.qty_arrow {text-decoration: none; font-size: 2.5em; line-height: 0em; vertical-align: middle; color: rgb(255 190 4);}
.fa.fa-caret-up.qty_arrow_white, .fa.fa-caret-down.qty_arrow_white {text-decoration: none; font-size: 2.5rem; line-height: 0em; vertical-align: middle; color: white;}
.fa.fa-caret-up.qty_arrow:hover, .fa.fa-caret-down.qty_arrow:hover {color: rgb(117, 117, 117); cursor: pointer;}
.fa.fa-caret-up.qty_arrow_white:hover, .fa.fa-caret-down.qty_arrow_white:hover {color: rgb(117, 117, 117); cursor: pointer;}

.basket {width: 100%; margin: 25px 0; color: black;}
.basket table {width: 100%;}
.basket tr {}
.basket th {text-align: left; padding: 10px 20px; background-color: rgb(255 190 4); color: black; font-size: 1.5rem;}
.basket td {text-align: left; padding: 15px 20px; border-bottom: 1px solid rgb(255 190 4); color: black; font-family: Helvetica, Arial, sans-serif; letter-spacing: 1px; }
.basket .creditcards {border-bottom: 0;}

a {text-decoration: none; color: black; font-weight: bold; text-decoration: underline; transition-behavior: normal; transition-delay: 0s; transition-duration: 0.4s; transition-property: color; transition-timing-function: ease;}
a:hover {color: rgb(255 190 4); cursor: pointer; text-decoration: underline;}

.basket .btn {
    display: inline-block;
    min-width: 110px;
    margin: 15px auto;
    padding: 10px 15px 12px;
    font: 700 1em 'Open Sans', sans-serif;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, 0.1), inset 0 -10px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-weight: bold;
}
.basket .btn.pri {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.basket .set.blue .btn.pri {
    background: rgb(255 190 4);
    color: black;
}
.basket .set.blue .btn.pri:hover {
    background: #58ab23;
    color: white;
}
.basket .btn.pri.ico {
    position: relative;
    padding-left: 40px;
    text-align: left;
}
.basket .btn.pri.ico:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 30px;
    padding: 10px 0 12px;
    font-family: fontawesome;
    text-align: center;
    border-radius: 3px 0 0 3px;
    background: rgba(0, 0, 0, 0.15);
}
.basket .set.blue .btn.pri.ico:before {
    content: "\f021";
}

.mobile-basket {border-top: 1px solid #fccc0c; box-sizing: border-box;}
.mobile-basket h4 {font-size: 1rem;}
.mobile-basket p {margin: 0;}
.mobile-basket .media {border-bottom: 1px solid #fccc0c; padding: 0.5rem; margin: 0;}
.mobile-basket .col-sm-2 {padding: 0;}
.mobile-basket .stripe {padding: 0;}

/* Stripe & general payment Styles Begin Here */
.pay-parent {width: 60%; margin: 0 auto; text-align: center; padding: 20px; border-radius: 8px 8px; border: 1px solid #fccc0c;}
.pay-parent label {display: block; text-align: left; font-weight: bold; margin: 0;}
.pay-detailslement {background-color: white; padding: 0.5rem 1rem; border-radius: 5px 5px; width: 100%; margin-bottom: 1rem;}
.pay-cardelement {background-color: white; padding: 15px; border-radius: 8px 8px;}
.pay-carderrors {color: red; width: 60%; margin: 10px 0; font-size: 14pt;}
.pay-button {padding: 10px 20px; background-color: #fccc0c; color: black; font-weight: bold; border-radius: 8px 8px;}
.pay-button:hover {cursor: pointer; background-color: white; color: black;}
.pay-stripelogo {display: block; margin: 10px auto;}
/* Stripe & general payment Styles End */

.btnIcon {color: white;}
.btnIcon:hover {color: #DD3333; cursor: pointer;}

@media (max-width: 992px) {
    .ticket-container {width: 75%; margin: 0 auto;}
    .pay-parent {width: 100%;}
    .paper {padding: 0;}
}

@media (max-width: 768px) {
    .ticket-container {width: 100%; margin: 1rem auto;}
    .desktop-basket {display: none;}
    .mobile-basket {display: block;}
    .paper {padding: 0;}
}
@media (min-width: 768px) {
    h1 {font-size: 3rem;}
    .nav-link {
        font-size: 1rem;
        font-weight: bold;
    }
    .ext-title {display: inline;}
    .content-break {display: block;}

    .desktop-basket {display: block;}
    .mobile-basket {display: none;}
}