/* Style the buttons that are used to open and close the accordion panel */
.product-accordion {
    background-color: #605ff2;
    color: #fff;
    cursor: pointer;
    /*padding: 18px;*/
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.inset-2 > .active, .product-accordion:hover {
    background-color: #FF5A26;
}

/* Style the accordion panel. Note: hidden by default */
.product-panel {
    padding: 0 18px;
    background-color: #605ff2;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-bottom: 2px solid #FF5A26;
}
.product-accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #fff;
    float: right;
    margin-left: 5px;
}
.inset-2 > .active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/*homepage packages*/
.packages-title
{
    text-align: center;
    background-color: #FF5A26 !important;
    color: white;
}
@media (min-width: 1260px){
    .packages-box-width
    {
        width: 1260px;
    }
}

.packages-box h2
{
    padding-left: 15px;
    padding-top: 10px;
    text-shadow: 2px 2px #0b0b0b;
}

@media (max-width: 376px){
    .packages-box h2{
        font-size: 140% !important;
    }
    .product-accordion:after {
        font-size: 80% !important;
    }
    .marked-list > li
    {
        font-size: 100% !important;
    }
    .fa-arrow-circle-right {
        margin-top: 10px !important;
        margin-left: 5px !important;
        display: inline-block !important;
    }
}

.marked-list
{
    padding-bottom: 20px;
}
@media (min-width: 1200px) {
    .page .inset-2 {
        padding-left: 0px!important;
    }
}

.product-accordion::after {
    content: "➕";
    font-size: 150%;
    padding-top: -1.8vw;
    position: relative;
    bottom: 1.2vw;
    right: 1vw;
}
.marked-list > li
{
    text-shadow: 2px 2px #000;
    font-size: 1.8vw;
    margin: 0;
    padding: 10px;
    margin-left: 2vw;
    color: white;
}
@media (min-width: 376px) and (max-width: 768px) {
    .marked-list > li
    {
        font-size: 3vw !important;
    }
}
.marked-list > li:before
{
    all: initial;
}
.colour_overlay1
{
    color: #FF5A26;
}

/*20 years experience fix*/
.left-space
{
    padding: 15px !important;
}

/*arenas page*/
.arena-nav-tabs
{
    background-color: #605ff2 !important;
    color: white;
    text-shadow: 2px 2px #0b0b0b;
    font-size: 1.7vw;
    border-radius: 25px;
    text-align: center;
    padding-top: 2px;
}
.arena-nav-tabs>a:hover,
.arena-nav-tabs>a:focus
{
    color: #FF5A26 !important;
}
.arena-nav-tabs>a
{
    color: white;
    text-shadow: 2px 2px #0b0b0b;
    font-size: 1.7vw;
}
.arena-tab-content >div > p {
    font-size: 1.3vw;
    padding: 15px;
    background-color: #605ff2;
    color: #fff;
}

/*jt splashmaster packages*/
.jt-splash-packages > li > h3
{
    text-shadow: 2px 2px #605ff2 !important;
    font-size: 1.3vw;
    margin-top: -10px
}

@media (max-width: 376px) {
    .jt-splash-packages > li > h3
    {
        text-shadow: 2px 2px #605ff2 !important;
        font-size: 110%;
        margin-top: -10px
    }
}

.jt-h2
{
    margin-top: -10px;
}
.jt-splash-packages
{
    margin-bottom: -10px;
}
.jt-package-text
{
    margin-top: -7px;
    margin-bottom: -10px;
    font-size: 80%;
    display: inline-block;
}
.jt-package-text .far,
.jt-package-text .fas
{
    margin-top: 5px !important;
}

@media (min-width: 767px) and (max-width: 1025px) {
    .jt-splash-packages > li > h3 {
        font-size: 3vw;
    }
}

    /*prices page boxes*/
    .prices-page > section > div > div > div > p,
    .walkon-page > section > div > div > div > p,
    .jt-page > section > div > div > div > p {
        all: unset;
    }

    /*testimonials*/
    .owl-carousel .owl-item {
        width: 100%;
    }

    /*arenas*/
    .nav-tabs {
        all: unset;
        width: 1200px !important;
    }

    @media (min-width: 1200px) {
        .arena-tab-content {
            /*width: 1200px;*/
            /*margin-left: -9vw;*/
            margin-right: auto;
        }
    }


    .arena-row {
        width: 1200px !important;
    }

    @media (max-width: 376px) {
        .castle img {
            height: auto;
            width: 50% !important;
        }

        .arena-nav-tabs {
            width: 30%;
            height: 55px;
        }

        .arena-nav-tabs a {
            font-size: 3.8vw !important;
        }

        #arena-row > div:nth-child(1) {
            margin-top: 30px;
        }

        #arena-row {
            width: 100% !important;
            margin-left: 20px;
        }

        .arena-mobile-spacing-fix {
            margin-top: -50px !important;
        }

        .arena-tab-content {
            padding-left: 5px !important;
            padding-right: 5px !important;
            margin-top: 10px;
        }

        .arena-tab-content h2 {
            margin-top: -20px !important;
            margin-bottom: -35px !important;
        }
    }

    @media (min-width: 377px) and (max-width: 426px) {
        .arena-tab-content > div > p {
            font-size: 3vw;
        }

        .castle img {
            height: auto;
            width: 50% !important;
        }

        .arena-nav-tabs {
            width: 30%;
            height: 45px;
        }

        .arena-nav-tabs a {
            font-size: 3.2vw !important;
        }

        #arena-row > div:nth-child(1) {
            margin-top: 30px;
        }

        #arena-row {
            width: 100% !important;
            margin-left: 20px;
        }

        .arena-mobile-spacing-fix {
            margin-top: -50px !important;
        }

        .arena-tab-content {
            padding-left: 5px !important;
            padding-right: 5px !important;
            margin-top: 10px;
        }

        .arena-tab-content h2 {
            margin-top: -20px !important;
            margin-bottom: -35px !important;
        }
    }



    /*fonts */
    body,
    .big {
        font-family: 'Wendy One', sans-serif !important;
    }

    p,
    body > div > main > section > div > div > div > p,
    .inline-list > li > a {
        font-family: 'Karla', sans-serif !important;
        font-size: 1.3vw;
    }

    @media (min-width: 376px) and (max-width: 768px) {
        p,
        body > div > main > section > div > div > div > p,
        .inline-list > li > a {
            font-size: 2.6vw;
        }

        .about-page p,
        .stag-days p,
        .corporate-page p,
        .rules-page p,
        body > div > main.about-page  > section > div > div > div > p,
        body > div > main.stag-days  > section > div > div > div > p,
        body > div > main.corporate-page  > section > div > div > div > p,
        body > div > main.rules-page  > section > div > div > div > p,
        .inline-list > li > a {
            font-size: 5vw;
        }
    }

    @media (max-width: 376px) {
        p,
        body > div > main > section > div > div > div > p,
        .inline-list > li > a {
            font-size: 120% !important;
        }
    }

    /*read more*/
    #more {
        display: none;
    }

    /*Gallery*/
    .inline-list > li > a {
        font-size: 90%;
    }

    /*fix to top*/
    .page-header {
        margin: 0 !important;
    }

    /*page headers*/
    h1, h2, h3, h4 {
        text-shadow: 2px 2px black;
    }

    /*backgrounds */
    .bg-secondary {
        background-color: #605ff2 !important;
    }

    @media (min-width: 992px) {
        .page-footer {
            padding-top: unset;
        }
    }

    .page-footer {
        padding-top: 15px;
    }

    @media (max-width: 376px) {
        /*corporate pages*/

        .corporate {
            margin-left: 10px;
        }

        .corporate li {
            font-size: 5vw !important;
        }

        /*rules page*/
        .rules-list .fa-arrow-circle-right {
            margin-top: 15px !important;
            margin-left: 25px !important;
            display: inline-block !important;
        }
    }

@media (max-width: 376px) {
    .rules-list .fa-arrow-circle-right
    {
        margin-left: 15px !important;
        margin-top: 10px !important;
    }
}
    /*large mobiles*/
    @media (min-width: 377px) and (max-width: 426px) {
        .product-panel .fa-arrow-circle-right {
            margin-top: 10px;
        }

        .product-accordion::after {
            margin-top: -7vw !important;
        }

        .corporate .fa-arrow-circle-right {
            margin-left: 20px;
            margin-top: 10px;
        }

        .walkon-rule-1,
        .walkon-rule-2 {
            font-size: 4vw !important;
        }

        .jt-splash-packages > li > h3 {
            font-size: 5vw !important;
        }

        .rules-list .fa-arrow-circle-right {
            margin-left: 10px;
            margin-top: 10px;
        }

        .page-footer {
            padding-top: 75px;
        }
        .rules-page + .page-footer {
            padding-top: 150px;
        }
    }

@media (min-width: 426px) and (max-width: 767px) {
    .corporate .fa-arrow-circle-right {
        margin-left: 20px;
        margin-top: 15px;
    }
}
@media (max-width: 376px) {
    .page-footer {
        padding-top: 50px;
    }

    .rules-page + .page-footer
    {
        padding-top: 150px;
    }
    .stag-days + .page-footer,
    .corporate-page + .page-footer
    {
        padding-top: 100px;
    }
}

/*tablet*/
@media (min-width: 767px) and (max-width: 1023px) {
    .slogan h1
    {
        font-size: 4vw;
    }
    .slogan h1 + p {
    font-size: 2vw;
    width: 60%;
    }
    .slogan h1 + p + a {
    width: 60%;
    }
    .product-accordion::after{
        margin-top: -2vw;
    }
    .product-panel .fa-arrow-circle-right,
    .rules-list .fa-arrow-circle-right
    {
        margin-top: 10px;
        margin-left: 15px;
    }
    .arena-tab-content >div > p
    {
        font-size: 3vw !important;
    }
    .corporate .fa-arrow-circle-right{
        margin-top: 15px;
    }
    .walkon-rule-1, .walkon-rule-2{
        font-size: 2.6vw !important;
    }
    .page-footer {
        padding-top: 45px;
    }
    .rules-page + .page-footer
    {
        padding-top: 150px;
    }
    .stag-days + .page-footer,
    .corporate-page + .page-footer
    {
        padding-top: 130px;
    }
}

/*small laptops*/
@media (min-width: 1024px) and (max-width: 1199px){
    .slogan p {
        width: 70%;
    }
    .product-accordion::after {
        margin-top: -1vw;
    }
    .product-panel .fa-arrow-circle-right,
    .rules-list .fa-arrow-circle-right,
    .corporate .fa-arrow-circle-right
    {
        margin-top: 10px;
    }
    .walkon-rule-1, .walkon-rule-2 {
        font-size: 1.4vw !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px){
    .prices-info h2
    {
        /*margin-top: -25px !important;*/
        font-size: 160%;
    }
    p, body > div > main > section > div > div > div > p, .inline-list > li > a {
        font-size: 1.7vw;
    }
    .walkon-info-h2
    {
        margin-top: -20px;
        font-size: 170%;
    }

}

.product-accordion:after {
    all: unset;
}

.inset-2 > .active:after {
    all: unset;
}

.fa-plus, .fa-minus{
    float: right;
    font-size: 200%;
    padding-top: -1.8vw;
    position: relative;
    bottom: 1.5vw;
    right: 1vw;
}

@media (max-width: 1440px) {
    .fa-plus, .fa-minus{
         float: right;
         font-size: 200%;
         padding-top: -1.8vw;
         position: relative;
         bottom: 3.5vw;
         right: 1vw;
     }
}

.product-accordion.active .fa-plus,
.product-accordion.active .fa-minus
{
    font-family: "FontAwesome 5 Free";
    content: '\f068';
    font-weight: 900;
}

@media (max-width: 479px) {

    .homepage-mobile-div-fix h2
    {
        font-size: 100% !important;
    }
}

@media (max-width: 768px) {
    .rules-list li
    {
        margin-left: 35px !important;
    }
}

@media (min-width: 376px) and (max-width: 600px) {
    .marked-list li
    {
        font-size: 4vw !important;

    }
}

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

    .fa-arrow-circle-right
    {
        margin-left: 20px;
        margin-top: 10px;
    }
}
.contact-sub-message
{
    font-size: 130%;
}

.contact-page h2
{
    margin-top: -15px;
    font-size: 210%;
}
.contact-page h2 + p
{
    margin-top: 15px;
    margin-bottom: unset;
}

.prices-page .prices-info small
{
    font-size: 50% !important;
}

.prices-page .prices-info p
{
    font-size: 130% !important;
}

.arena-tab-content >div > p {
    font-size: 5vw !important;
}

@media (max-width: 767px) {
    .arena-nav-tabs>a
    {
        font-size: 5vw;
    }
    .arena-nav-tabs
    {
        height: 60px;
    }
}

.tab-content.arena-tab-content {
    margin-top: 30px;
}

@media (min-width: 768px) {
    .about-page p, .stag-days p, .corporate-page p, .rules-page p, body > div > main.about-page > section > div > div > div > p, body > div > main.stag-days > section > div > div > div > p, body > div > main.corporate-page > section > div > div > div > p, body > div > main.rules-page > section > div > div > div > p, .inline-list > li > a
    {
        font-size: 2vw;
    }
    .prices-page .prices-info h2 {
        margin-top: -35px;
    }
}