/* ============================================
Table of Contents

- Variables 
- General
- Alerts
- Headings
- Buttons
- Pagination
- Loader
- Fields
- Header
    - Header Containers
    - Navigation
    - Search
- Hero Carousel
    - Swiper Content
    - Swiper Navigation
    - Swiper Progress Bar
- Logo Carousel
- Featured Latest Carousel
    - Featured Post
    - Regular Post
- Latest News
- Latest & Upcoming
- Upcoming Events - Football
- Fixtures & Results
- Fixtures
- Results
- Tables
- Highlights
- Contact Us
    - Contact Form
    - Contact Page / Details
- Dashboard
- Player Card
- Payments
- Matches
- Formula 1 - Next Tracks
- Formula 1 - Results
- Formula 1 - Finished Stages
- Formula 1 - Drivers
- Footer

- Mobile
    - Navigation

============================================ */

/* ============================================
VARIABLES / UTILITY CLASSES
============================================ */
:root {
    /* --- Colors --- */
    --main-color: #CE2427;
    --accent-color: #000000;
    --accent-color-2:#EAEAEA;
    --font-color: #000000;

    /* --- Font Styles --- */
    --font-family: Montserrat, sans-serif;
    --font-weight-a:100;
    --font-weight-b:300;
    --font-weight-c:400;
    --font-weight-d:700;

    --line-height-uppercase: 0.80;

    /* --- Padding ---*/
    --padding-top-small: 40px;
    --padding-bottom-small: 40px;
    --padding-top-large: 64px;
    --padding-bottom-large: 64px;
}

.overlay {
    background: var(--accent-color) !important;
}
/* ============================================
GENERAL
============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    font-family:var(--font-family);
}

html {
    font-size:16px;
}

body {
    font-family:var(--font-family);
    color: var(--accent-color);
    min-height:100vh;
}

html.lock-scroll {
    overflow: hidden;
    position: relative;
    height: 100%;

}

body.lock-scroll {
    overflow: hidden;
    position: relative;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-d);
    text-transform:uppercase;
    /*line-height:var(--line-height-uppercase);*/
}

h1 {
    font-size:3.5rem;
}

h2 {
    font-size:2.725rem;
}

h3 {
    font-size:1.8rem;
}

h4 {
    font-size:1.25rem;
}

h5 {
    font-size:1.125rem;
}

h6 {
    font-size:1rem;
}

article h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

p {
    margin:10px 0;
    font-size:1rem;
    font-weight: var(--font-weight-a)
}

p strong {
    font-weight:var(--font-weight-c);
}

article .post-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

article .featured-content .inner--content p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

hr {
    background-color:var(--main-color);
    height:5px;
    margin:24px 0;
    border:none;
    width:100%;
}

label {
    font-size:1rem;
    font-weight: var(--font-weight-a)
}

.no-data {
    border:2px solid var(--accent-color-2);
}

/* ============================================
WHITELABEL STYLES
============================================ */
/* --- Header --- */
.header--inner.wl {
    grid-template-columns: 200px 1fr;
}

.header--inner.wl .logo {
    /*padding-right:10px;*/
}

.header--inner.wl .logo img {
    max-height: 70px;
    max-width: 100%;
    z-index: 9;
    position: relative;
}

@media only screen and (max-width: 769px) {
    .header--inner.wl {
        grid-template-columns: 150px 1fr;
    }

    .header--inner.wl .logo img {
        /*height:auto;*/
        margin-top:0;
    }

    /*.header--inner.wl .header--left:after {*/
    /*    display:none;*/
    /*}*/
}

/* ============================================
ALERTS
============================================ */
.alert {
    width:fit-content;
    max-width:100%;
    border:2px solid;
    padding:16px 24px;
}

.alert.major {
    background-color:rgba(255,0,0,0.1);
    border-color:red;
}

.alert.medium {
    background-color:rgba(255,165,0,0.1);
    border-color:orange;
}

.alert.minor {
    background-color:rgba(255,255,0,0.1);
    border-color:yellow;
}

.alert.success {
    background-color:rgba(0,128,0,0.1);
    border-color:green;
}


/* ============================================
SEARCH
============================================ */
.searchpopup {
    transform: translateY(-100vh);
    transform-origin: top;
    transition: transform .3s ease-in-out;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    z-index: 9999;
    overflow-y: scroll;
    width: 100%;

    display:flex;
    justify-content:center;
    align-items:center;
}

.searchpopup.active {
    transform: translateY(0);
}

.searchpopup form {
    position:relative;
    z-index:999;
    background-color:#fff;
    padding:40px;
    border:1px solid var(--accent-color-2);
    width:calc(100vw - 5%);
}

.no-overflow {
    overflow: hidden;
}

.search-bg {
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgb(31 62 62 / 37%);
    backdrop-filter: blur( 11px );
    -webkit-backdrop-filter: blur( 11px );
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1;
}

.input-overlay input[type="search"] {
    box-sizing:border-box;
    border:1px solid var(--accent-color-2);
}

.close-search {
    position: absolute;
    z-index: 2;
    top: -45px;
    right: 0;
    display: inline-block;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border: none;
    background: transparent;
}

.close-search:before,
.close-search:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: var(--main-color);
    border-radius: 5px;
    margin-top: -6px;
}

.close-search:before {
    transform: rotate(45deg);
}

.close-search:after {
    transform: rotate(-45deg);
}

/* ============================================
HEADINGS
============================================ */
.brackets {
    display:flex;
    gap:20px;
    margin-bottom:32px;
}

.brackets:before {
    content:"[";
}

.brackets:after {
    content:"]";
}

.title-drop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom: 32px;
}

.title-drop .brackets {
    margin-bottom:0;
}

/* ============================================
BUTTONS
============================================ */
.button {
    display:inline-block;
    text-decoration:none;
    text-transform:uppercase;

    font-size:0.9rem;
    color:var(--accent-color);
}

.button span {
    display:flex;
    gap:15px;
    text-align: center;
}

.button span:before {
    content:"[";
    transition:transform .3s ease-in-out;
}

.button span:after {
    content:"]";
    transition:transform .3s ease-in-out;
}

.button.btn--bg {
    color:#ffffff;
    background-color:var(--main-color);
    padding:15px 35px;
    font-size:1.5rem;
}

.button:hover > :before {
    transform: translateX(-6px);
}
.button:hover > :after {
    transform: translateX(6px);
}

.button-color-main {
    color:var(--main-color);
}

/* ============================================
PAGINATION
============================================ */
.pagination {
    display: flex;
    gap: 16px;
}

.pagination .page-item a {
    text-decoration: none;
    color:var(--accent-color);
    padding: 10px;
    border: 1px solid var(--accent-color-2);
    display: block;
}

.pagination .page-item.active a {
    color:#fff;
    background-color:var(--main-color);
}

.pagination .page-item a:hover {
    color:#fff;
    background-color:var(--main-color);
}

/* ============================================
LOADER
============================================ */

.loader {
    border: 8px solid #f9f9f9;
    border-radius: 50%;
    border-top: 8px solid var(--main-color);
    width: 32px;
    height: 32px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ============================================
MODALS
============================================ */


div.modal-video {
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.modal-video-close-btn:before, button.modal-video-close-btn:after {
    background:var(--main-color);
}

.modal-video-movie-wrap video {
    width:100%;
}

.modal-background.modal-video-close-btn.js-modal-video-dismiss-btn {
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgb(31 62 62 / 37%);
    backdrop-filter: blur( 11px );
    -webkit-backdrop-filter: blur( 11px );
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events:auto;
    z-index: 1;
}

.modal-background.modal-video-close-btn.js-modal-video-dismiss-btn:after,
.modal-background.modal-video-close-btn.js-modal-video-dismiss-btn:before {
    display:none;
}

div.modal-video-body {
    position:relative;
    height:auto;
    z-index:9;
}

div.modal-video-inner {
    padding:0;
}


.modal-video-close-btn {
    pointer-events:none;
}


/*-----------
Helpers
-----------*/
.hide {
    display: none;
}

/*-----------
Structure
-----------*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgb(31 62 62 / 37%);
    backdrop-filter: blur( 11px );
    -webkit-backdrop-filter: blur( 11px );
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .3s ease-in-out, visibility 0s .5s ease-in-out;
    z-index: 99999;
}

.modal--is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity .5s ease-in-out;
    z-index: 99999;
}

/*-----------
Transparent Layer
-----------*/
.modal__transparent-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    width: 100%;
    height: 100%;
}

/*-----------
Modal Content
-----------*/
.modal__content-container {
    position: relative;
    width: calc(100vw - 5%);
    padding: 40px;
    background: #ffffff;
    z-index: 999;
}

.modal__content {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:32px;
    max-height: calc(100vh - 200px);
    overflow-y: scroll;
}

.modal__close-icon {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 999;
}

.modal-close.modal__close-icon {
    position: absolute;
    z-index: 2;
    top: -45px;
    right: 0;
    display: inline-block;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border: none;
    background: transparent;
}

.modal-close.modal__close-icon:before,
.modal-close.modal__close-icon:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background:var(--main-color);
    border-radius: 5px;
    margin-top: -6px;
}

.modal-close.modal__close-icon:before {
    transform: rotate(45deg);
}

.modal-close.modal__close-icon:after {
    transform: rotate(-45deg);
}

/* ============================================
FIELDS
============================================ */
input {
    background-color:#ffffff;
    padding:15px 25px;
}

.placeholder {
    position:absolute;
    top:50%;
    left:20px;
    transition: all .3s;
    transform: translateY(-50%) scale(1);
    color:var(--accent-color-2);

    display:flex;
    gap:12px;
    pointer-events:none;
    text-transform:uppercase;
}

.field-animate {
    color:var(--accent-color);
    border:none;
    font-size:1rem;
    font-weight:var(--font-weight-b);
    width:100%;
}

.field-animate:focus {
    outline: var(--main-color) solid 2px;
}

.field-animate:focus ~ .placeholder {
    transform: translateY(-23px);
    top:0;
    left:0px;
    color:var(--main-color);
    font-size:0.7rem;
}

.field-animate:not(:placeholder-shown) ~ .placeholder {
    transform: translateY(-23px);
    top:0;
    left:0px;
    color:var(--main-color);
    font-size:0.7rem;
}

.fields .input-overlay .placeholder:before {
    content:"[";
}

.fields .input-overlay .placeholder:after {
    content:"]";
}

select {
    background-color: #ffffff;
    padding: 15px 25px;
    border:1px solid var(--accent-color-2);
    width:100%;
    appearance: none;
    color:var(--accent-color);
}

.chevron-icon {
    position:absolute;
    width:10px;
    height:10px;
    background-image:url(../images/icons/chevron-down.svg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    top:50%;
    right:25px;
    transform:translateY(-50%);
    pointer-events:none;
}

.custom-radio-wrap {
    grid-column: span 2;
}
.radio-custom {
    opacity: 0;
    position: absolute;
}

.radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.radio-custom-label {
    position: relative;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:20px;
}

.radio-custom + .radio-custom-label:before {
    content: "";
    background: #fff;
    display: flex;
    justify-content:center;
    align-items:center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    text-align: center;
    border:1px solid var(--accent-color-2);
}

.radio-custom:checked + .radio-custom-label:before {
    content: "";
    background-image:url(../images/icons/check.svg);
    background-size:14px;
    background-position:center;
    background-repeat:no-repeat;
    color:#fff;
    background-color:var(--main-color);
    border:1px solid var(--main-color);
}

/* ============================================
CONTAINERS
============================================ */
.container {
    width: calc(100vw - 5%);
    max-width:1475px;
    margin:auto;
    margin-top: var(--padding-top-large);
}

/* ============================================
HEADER
============================================ */

/* ---------------
Header Containers
--------------- */
.site-header {
    width:100vw;
    padding:0;
}

.top-bar {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding:6px 0;
    width: calc(100vw - 5%);
    margin:auto;
}

.header--bg {
    background: var(--accent-color) !important;
    background: linear-gradient(270deg, var(--accent-color) 50%, rgba(255,255,255,0) 30%);
}

.header--inner {
    /*temp*/color:#fff;
    display:grid;
    grid-template-columns:80px 1fr;
    align-items:center;
    width: calc(100vw - 5%);
    margin:auto;
}

.header--left {
    position:relative;
    /*background-color:#000000;*/
    display:flex;
    justify-content:flex-start;
    max-height:70px;
}

/*.header--left:after {*/
/*    content: "";*/
/*    height: 110%;*/
/*    width: 20px;*/
/*    position: absolute;*/
/*    top: -5%;*/
/*    right: -10px;*/
/*    background-color: #fff;*/
/*    border-radius: 100%;*/
/*    z-index:1;*/
/*}*/

.header--left .logo {
    position:relative;
}

.header--left .logo img {
    height:70px;
    margin-top:0px;
}

.header--center {
    height:70px;
    background-color:var(--accent-color);
    position:relative;
}

/* ---------------
Navigation
--------------- */
.top-bar a {
    text-decoration:none;
    color: var(--accent-color);
}

.nav-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height: 70px;
}

nav {
    padding-left:45px;
    position: relative;
    z-index: 99;
}

#cssmenu .button-nav {
    display:none;
}

#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile {
    border:0;
    list-style:none;
    line-height:1;
    display:block;
    position:relative;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#cssmenu:after,#cssmenu > ul:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
}

#cssmenu #head-mobile {
    display:none;
}

#cssmenu > ul > li {
    float:left;
}

#cssmenu > ul > li > a {
    padding:0 25px;
    font-size:1rem;
    text-decoration:none;
    color:#fff;
    height:70px;
    display:flex;
    align-items:center;
}

#cssmenu > ul > li:hover > a,#cssmenu ul li.active a {
    color:#fff;
}

#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{
    background:var(--main-color) !important;
    -webkit-transition:background .3s ease;
    -ms-transition:background .3s ease;
    transition:background .3s ease;
}

#cssmenu > ul > li.has-sub > a {
    display:flex;
    gap:15px;
}

#cssmenu > ul > li.has-sub > a:after {
    content:"";
    height:15px;
    width:15px;
    background-image:url(../images/icons/chevron-down-white.svg);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    transition:transform .3s ease-in-out, opacity .3s ease-in-out;

}

#cssmenu > ul > li.has-sub:hover > a:after {
    transform:translateY(50px);
    opacity:0;
}

#cssmenu ul ul {
    position:absolute;
    left:-9999px;
    background-color:var(--main-color);
    padding-bottom:15px;
}

#cssmenu ul ul li {
    height:0;
    -webkit-transition:all .25s ease;
    -ms-transition:all .25s ease;
    background:var(--main-color) ;
    transition:all .25s ease;
}

#cssmenu li:hover > ul {
    left:auto;
}

#cssmenu li:hover > ul > li {
    height:35px;
}

#cssmenu ul ul ul {
    margin-left:100%;
    top:0
}

#cssmenu ul ul li a {
    padding:15px 25px;
    width:auto;
    min-width:max-content;
    font-size:1rem;
    text-decoration:none;
    color:#fff;
}

#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
    border-bottom:0;
}

#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover {
    color:#fff;
}

#cssmenu ul ul > li.has-sub:hover > a:before{
    top:17px;
    height:0;
}

#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{
    background:var(--main-color);
}


/* ---------------
Search
--------------- */
.search-button {
    background:none;
    border:none;
    padding:0;
    display:block;/*  */
}

.search-button svg {
    display:block;
}

.mobile-menu {
    display:none;

    padding-left:45px;
}

/* ============================================
HERO CAROUSEL
============================================ */
.mySwiperHero.swiper {
    position:relative;
    width: 100%;
    height: 100%;
}

.mySwiperHero .swiper-slide {
    position:relative;
    color:#fff;
}

.swiper-logo {
    width:100%;
    max-width:200px;
    height:auto;

    position:absolute;
    top:40px;
    left:40px;
    z-index:9;
}

.background-image {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    right: 0;
    z-index:1;
}

.background-image img {
    object-fit: contain;
    object-position: right;
    height: 100%;
    width: 100%;
}

/* ---------------
Swiper Content
--------------- */
.swiper-inner {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;    
    height:400px;
}

 /* Media Query to fix position of carousel content */
 @media only screen and (max-width: 760px) {
    .swiper-inner {
        justify-content:flex-start !important;
        margin-top: 50px;
     }
   }

.swiper-content {
    color:#fff;
    z-index:11;
}

.players-wrap img {
    position:absolute;
    bottom:-40px;
}

.players-wrap .fb-1 {
    
    z-index:9;
    height:500px;
}

/* Carousel Changes */
@media only screen and (min-width: 760px) {
    .players-wrap .fb-1 {
        right:15px;
    }
}

@media only screen and (max-width: 760px) {
    .players-wrap {
        overflow-x: hidden;
        display: flex;
        justify-content: center;
    }

    .players-wrap .fb-1 {

    }
}

.players-wrap .fb-2 {
    right:250px;
    z-index:8;
    height:400px;
}

.players-wrap .fb-3 {
    right: 0;
    z-index: 7;
    height: 400px;
}

/* ---------------
Swiper Nav
--------------- */
.swiper-nav {
    position:absolute;
    top:40px;
    right:40px;

    width:max-content;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-transform:uppercase;

    z-index:10;
}

.swiper-nav .nav-links {
    display:flex;
    gap:10px;
    font-size:1.5rem;
    font-weight:var(--font-weight-d);
}

.swiper-button-next,
.swiper-button-prev {
    position:relative;
    color: var(--main-color);
    cursor:pointer;
}

.swiper-button-disabled {
    opacity:0.5;
    cursor:auto;
}

/* ---------------
Swiper Progress Bar
--------------- */
.progess-wrap {
    width:100%;
    height:8px;
    background: rgba(139, 43, 255, .5)
}

.swiper-pagination-progressbar {
    position: absolute;
    bottom:0;
    top:inherit;
    left:0;

    width: 100%;
    height: 8px;

    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: var(--main-color);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
}

/* ============================================
LOGO CAROUSEL
============================================ */
.myLogoSwiper .swiper-slide img {
    max-height:60px;
    width:auto;
    margin:auto;
    display:block;
}

/* ============================================
FEATURED LATEST CAROUSEL
============================================ */

.featuredNews h4 {
    text-transform:initial;
    line-height:1;
}

.featuredNews--inner {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:32px;
}

/* ---------------
Featured Post
--------------- */
.featuredNews--inner .featured {
    grid-column:1 / span 2;
    grid-row: 1 / span 2;
    display:flex;
}

.featuredNews--inner .featured,
.featuredNews--inner .post {
    width:100%;
    border:1px solid var(--accent-color-2);
}

.featuredNews--inner .featured .image-wrap {
    height:100%;
    width:50%;
    position:relative;
}

.featuredNews--inner .featured .image-wrap .latest-tag {
    position:absolute;
    top:25px;
    left:0;
    background-color:var(--main-color);
    color:#fff;
    padding:15px;
}

.featuredNews--inner .featured .image-wrap img {
    object-fit:cover;
    height:100%;
    width:100%;
}

.featuredNews--inner .featured-content {
    width:50%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.featured-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.featured-meta  .date,
.post .date {
    font-size:0.9rem;
    font-weight:var(--font-weight-c)
}

.featured-meta  .category,
.post .category {
    color: var(--main-color);
    text-transform: uppercase;
    text-decoration:none;
    font-weight: var(--font-weight-d);
}

/* ---------------
Regular Post
--------------- */
.post .post-content .lower--content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap: wrap;
    gap: 16px;
}

.catgory-wrap {
    position:relative;
    margin:16px 0;
}

.catgory-wrap .category {
    position:relative;
    background-color:#ffffff;
    padding-right:15px;
    z-index:2;
}

.catgory-wrap hr {
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    transform:translateY(-50%);
    margin:0;
    z-index:1;
}

/* ============================================
LATEST NEWS
============================================ */
.post {
    border:1px solid var(--accent-color-2);
}

.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top:32px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--main-color);
}


.swiper-pagination-bullet {
    display: block;
    height: 15px;
    width: 15px;
    background-color: transparent;
    border:2px solid var(--main-color);
}

/* ============================================
LATEST & UPCOMING
============================================ */
.split-lue {
    color:#fff;
    display:flex;
    flex-wrap:wrap;
}

/* ---------------
Latest Results
--------------- */
.latest-results,
.upcoming-events {
    width:50%;
}

.latestEvents {
    height:100%;
}

.latestEvents .swiper-slide {
    position:relative;
    min-height:550px;
}

.latestEvents .swiper-slide .player-image {
    position:absolute;
    bottom:0;
    left:-40px;

    width:250px;
    height:auto;
    z-index:1;
}

.latest-result-pagination {
    position:absolute;
    top:40px;
    right:40px;

    z-index:3;

    display:flex;
    gap:15px;
}

.latestEvents .result {
    gap:32px;
    border-bottom:1px solid var(--main-color);
}

.latestEvents .result .loss {
    border:4px solid #fff;
}

/* ---------------
Upcoming Events
--------------- */

.upcoming-events {
    border-left:4px solid var(--main-color);
}
.upcoming-header {
    display:flex;
    justify-content:space-between;
}

.upcoming-events .upcoming-teams {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    margin-bottom:32px;
    padding-bottom:32px;
}

.upcoming-events .upcoming-teams .teams {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:25px;
}

.upcoming-events .upcoming-teams .team {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.upcoming-events .upcoming-teams .team img {
    max-width:120px;
    width:100%;
    height:auto;
}

.upcoming-events .upcoming-teams .team span {
    text-transform:uppercase;
    padding-top:8px;
}

.upcoming-events .upcoming-teams  .vs {
    font-size:2rem;
}

.upcoming-events .time-league {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    max-width: 200px;
    text-align: center;
}

.upcoming-events .time-league .time-remaining {
    display: flex;
    align-items:center;
    gap: 15px;
    font-size: 1rem;
}

.upcoming-events .time-league .time-remaining:before {
    content:"[";
}

.upcoming-events .time-league .time-remaining:after {
    content:"]";
}

.upcoming-events .time-league .time-remaining .circle {
    height:12px;
    width:12px;
    background-color:var(--main-color);
    border-radius:24px;
}

/* ============================================
Upcoming Events - Football
============================================ */
.tabs-container {
    width: 100%;
    margin: auto;
    background-image:url(../images/backgrounds/football-header-2.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:bottom left;
}

/* ---------------
Tabs - Styles
--------------- */
.tabs {
    margin-bottom: 28px;
    display: flex;
    justify-content: flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.tabs a {
    cursor: pointer;
    padding: 12px 24px;
    text-align: center;
    background-color:var(--main-color);
    color:#fff;
    text-transform:uppercase;
}

.tabs a span {
    display:flex;
    justify-content:center;
    gap:15px;
}

.tabs a span:before {
    content:"[";
    transition:transform .3s ease-in-out;
}

.tabs a span:after {
    content:"]";
    transition:transform .3s ease-in-out;
}

.tabs a:hover > :before {
    transform: translateX(-6px);
}
.tabs a:hover > :after {
    transform: translateX(6px);
}
.tabs a:hover,
.tabs a.active {
    background-color:rgba(139, 43, 255, 1);
}

/* ---------------
Tabs - Content Wrap
--------------- */
.tabcontent {
    min-height: 288px;
    padding-top:32px;
    display: none;
    color:#fff;
    text-align:center;
}

.tabcontent.active {
    display: block;
}


/* ============================================
ARTICLES
============================================ */
.article--inner {
    height: calc(100% - 60px);
}
.article--inner img{
    width:100%;
    margin-top:20px;
}
.article--content {
    /*border:1px solid var(--accent-color-2);*/
    /*max-height:750px;*/
    /*overflow: scroll;*/
}
.article--inner .category {
    color: var(--main-color);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: var(--font-weight-d);
}
.article--content .time {
    font-size: 0.9rem;
    font-weight: var(--font-weight-c);
}

/* ============================================
FIXTURES & RESULTS
============================================ */
.feed {
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:32px;
}

/* ============================================
FIXTURES
============================================ */
.fixtures--inner {
    background-color:var(--accent-color);
    background-image:url(../images/backgrounds/football-header-white.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:top right;
    height: calc(100% - 60px);
}
.upcoming-event {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    margin-top:32px;
    padding-bottom:32px;
    color:#fff;
    text-align:center;

    border-bottom:1px solid var(--main-color)
}

.upcoming-event .teams {
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:45px;
    margin-bottom:32px;
    width:100%;
}

.upcoming-event .teams .team {
    display:flex;
    flex-direction:column;
}

.upcoming-event .teams .team img {
    max-width:120px;
    width:100%;
    height:auto;
}

.upcoming-event .teams .team span {
    text-transform:uppercase;
    padding-top:8px;
}

.upcoming-event .teams .team .teams-links {
    display:flex;
    gap:20px;
    justify-content:center;
    align-items:center;
    margin-top:10px;
}

.upcoming-event .teams .team .teams-links img {
    max-height:20px;
}

.upcoming-event .teams .time-meta {
    display:flex;
    flex-direction:column;
}

.upcoming-event .teams .time-meta .vs {
    font-size:2rem;
}

.upcoming-event .teams .time-meta .time {
    margin-top:16px;
    padding:10px;
    border:2px solid var(--main-color);
    font-size:1.5rem;
}

.upcoming-event .event-date .date {
    font-size:1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
}

.upcoming-event .event-date .date:before {
    content:"["
}

.upcoming-event .event-date .date:after {
    content:"]";
}

.upcoming-event .event-date .date .circle {
    height:12px;
    width:12px;
    background-color:var(--main-color);
    border-radius:24px;
}

.upcoming-event .event-date .venue {
    font-weight:var(--font-weight-c);
}


/* ============================================
RESULTS
============================================ */
.results--inner {
    border:1px solid var(--accent-color-2);
    max-height:750px;
    overflow: scroll;
}

.results--inner .result {
    grid-template-columns: 1fr
}

.result {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr 1fr 1fr 40px;
    align-items: center;
    z-index: 2;
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 4px solid var(--main-color);
    text-align:center;
}

.result .result-inner {
    position:relative;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items:center;
    justify-content:center;
    gap:25px;
    z-index:2;
    padding-bottom:32px;

}

.result .vs {
    font-size:2rem;
    text-align:center;
}

.result .loss {
    background-color:var(--accent-color);
    border:4px solid var(--accent-color);
    color:#fff;
    padding:10px;
}

.result .win {
    background-color:var(--main-color);
    border:4px solid var(--main-color);
    padding:10px;
    color:#fff;
}

.result .team {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    align-self:flex-start;
}

.result .team img {
    max-height:100px;
    width:auto;
    height:auto;
}

.result .team span {
    text-transform:uppercase;
    padding-top:8px;
    padding-bottom:8px;
}

.result .venue {
    width:100%;
    text-align:center;
}

/* ============================================
TABLES
============================================ */
.tables {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
}

.tables .group {
    border:1px solid var(--accent-color-2);
}

.tables .group .table {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:32px;
    border-bottom:4px solid var(--main-color);
    padding-bottom:32px;
}

.tables .group .table .rank {
    font-size:2rem;
    font-weight:var(--font-weight-d);
}

.tables .group .table .team-logo img {
    max-width:60px;
}

.tables .group .table .stats {
    font-size:0.8rem;
}

.tables .group .table th,
.tables .group .table td {
    text-align:center;
    padding: 0 7px 5px 7px
}

.tables .group .table .form {
    font-size:0.8rem;
}

.tables .group .table .form .won {
    color:green;
}

.tables .group .table .form .lost {
    color:red;
}


/* ============================================
TEAMS
============================================ */
.teams-wrap {
    display:flex;
    flex-wrap:wrap;
}
.teams-wrap .team {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    text-align: center;
    width:16.6666%;
    padding:0 32px 32px 32px;
}

.teams-wrap .team img {
    max-width:120px;
    width:100%;
    height:auto;
}

.teams-wrap .team span {
    text-transform:uppercase;
    padding-top:8px;
}

.teams-wrap .team .teams-links {
    display:flex;
    gap:20px;
    justify-content:center;
    align-items:center;
    margin-top:10px;
}

.teams-wrap .team .teams-links img {
    max-height:20px;
}

.teams-wrap .time-meta {
    display:flex;
    flex-direction:column;
}

/* ============================================
HIGHLIGHTS
============================================ */
.highlights .post .video-wrap {
    max-height:300px;
    overflow:hidden;

    display:block;

    position:relative;
    border:none;
    padding:0;
    background-color:#000;

}

.highlights .post .video-wrap span {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(1);
    transition:transform .3s ease-in-out;
}

.highlights .post .video-wrap:hover > span {
    transform:translate(-50%, -50%) scale(1.1);
}

.highlights .post .video-wrap img {
    object-fit:cover;
    height:100%;
    width:100%;
}

.js-video-btn {
    cursor:pointer;
}

/* ---------------
Latest Videos
--------------- */
.latest-videos {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:32px;
}

/* ============================================
CONTACT US
============================================ */

/* ---------------
Contact Form
--------------- */
.contact-form input,
.contact-form textarea {
    border:1px solid var(--accent-color-2);
}

.contact-form textarea {
    padding:20px;
}

.contact-form .fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.contact-form .fields .message {
    grid-column: span 2;
}

.input-overlay {
    position:relative;
}

.placeholder.textarea {
    top:15%;
}

/* ---------------
Contact Page / Details
--------------- */
.contact-wrap {
    display:grid;
    grid-template-columns:1fr 33.333%;
    gap:32px;
}

.contact-details {
    border:1px solid var(--accent-color-2);
}

.details--inner .email-icon,
.details--inner .phone-icon {
    display:flex;
    align-items:center;
    gap:32px;
}

.details--inner .email-icon {
    margin-bottom:24px;
}

.details--inner .email-icon:before,
.details--inner .phone-icon:before {
    content:"";
    display:block;
    width:20px;
    height:20px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

}

.details--inner .email-icon:before {
    background-image:url(../images/icons/mail.svg);
}

.details--inner .phone-icon:before {
    background-image:url(../images/icons/phone.svg);
}

.details--inner .email-icon a,
.details--inner .phone-icon a {
    color:var(--accent-color);
    text-decoration:none;
}

.contact-details .socials {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:25px;
    margin-top:24px;
}

/* ============================================
REGISTER / LOGIN
============================================ */
.register-login {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
}

.register-login .register-form,
.register-login .login-form  {
    border:1px solid var(--accent-color-2);
}

/* ============================================
DASHBOARD
============================================ */
.container .dashboard {
    display:grid;
    grid-template-columns: 25% 1fr;
    gap:32px;
}

.dashboard-sidebar,
.dashboard-content {
    border:1px solid var(--accent-color-2);
}

.dashboard-content {
    overflow:scroll;
}

.dashboard-sidebar {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
}

.dashboard-sidebar .avatar {
    border-radius:50%;
    border:4px solid var(--main-color);
}

.dashboard-sidebar .avatar img {
    border-radius:50%;
}

.dashboard-sidebar .user-info {
    text-align:center;
}

.dashboard-sidebar .dashboard-links,
.dashboard-sidebar .logout-cancel  {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.dashboard-sidebar .dashboard-links {
    margin:30px 0 50px 0;
}

.dashboard-sidebar .dashboard-links a {
    font-size:1rem;
    cursor:pointer;
}

.dashboard-sidebar .logout-cancel a.cancel {
    font-size:1rem;
    color:var(--accent-color-2);
}

.dashboard-content .tabcontent {
    color:var(--accent-color);
    padding-top:0;
    text-align:left;
}

.dashboard-content .account-details .account-details-table th,
.dashboard-content .account-details .account-details-table td {
    padding-bottom:32px;
}

.dashboard-content .account-details .account-details-table th {
    padding-right:40px
}

.dashboard-content .account-details .account-details-table td {
    color:var(--accent-color-2);
}

.dashboard-content .account-details .button.btn--bg,
.dashboard-content .membership-details .button.btn--bg {
    font-size:1em;
}

.dashboard-content .membership-details .membership-details-table {
    border-collapse: separate;
    border-spacing:4px;
    width:100%;
    border-bottom:4px solid var(--main-color);
    margin-bottom:40px;
}
.dashboard-content .membership-details .membership-details-table th {
    background-color:var(--main-color);
    padding:10px 25px;
    color:#fff;
    vertical-align:middle;
}

.dashboard-content .membership-details .membership-details-table td {
    padding:15px 25px
}

.dashboard-content .membership-details .membership-details-table td,
.dashboard-content .membership-details .membership-details-table td  {
    font-size:0.8rem;
}

/* ============================================
PLAYER CARD
============================================ */
.player-card {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start;

    border:1px solid var(--accent-color-2);
    padding:32px;
}

.player-card .player-identity {
    width:48%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
}

.player-card .player-identity img {
    width:100%;
    max-width:150px;
    border-radius:50%;
    border:4px solid var(--main-color);
}

.player-card .player-identity .player-name {
    font-size:1.5rem;
}

.player-card .player-stats {
    width:48%;
    display:flex;
    flex-direction:column;
    gap:16px;
    font-size:1rem;
}

.player-card .player-stats div > span {
    color:var(--main-color);
}


/* ============================================
PAYMENTS
============================================ */
.payments-wrap {
    display:grid;
    grid-template-columns:33.3333% 1fr;
    gap:32px;
}
.payment-card {
    background-color:var(--main-color);
    color:#fff;
    padding:32px;
    border-radius:10px;
    position:relative;
    overflow:hidden;
    min-height:250px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    flex-direction:column;
    gap:24px;
}

.payment-card .card-logo svg {
    max-width:100px;
    position:absolute;
    top:32px;
    right:32px;
    z-index:9;
}

.card-bgshape {
    width:250px;
    height:120%;
    border-radius:40px;
    background-color:rgba(29, 10, 51, 0.4);
    position:absolute;
    top:50%;
    left:-100px;
    transform:translateY(-50%) rotate(45deg);
    z-index:1;
}

.card-number {
    display:block;
}

.card-number:before {
    content:"Card Number";
    font-size:0.7rem;
    position:absolute;
    bottom:100%;
    left:0;
}

.card-dates:before {
    content:"Expiry Date";
    font-size:0.7rem;
    position:absolute;
    bottom:100%;
    left:0;
}

.card-number,
.card-dates,
.card-name {
    position:relative;
    z-index:9;
    font-size:1.2rem;
    text-transform:uppercase;
    width:100%;
}

.payment-form .radio-custom-label {
    gap:0;
}
.payment-form .radio-custom-label a {
    margin-left:5px;
    color:var(--main-color);
    text-decoration:none;
}

.payment-form .expiry-date {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.payment-form .expiry-date .brackets {
    width:100%;
    margin-bottom:0;
}

.payment-form .expiry-date .input-overlay {
    width: calc(50% - 8px);
}

/* ============================================
MATCHES
============================================ */
.matches * {
    color:var(--accent-color);
}

.matches .upcoming-event {
    border-bottom: 1px solid var(--accent-color-2);
    border:1px solid var(--accent-color-2);
    padding:32px;
    margin-top:0;
}

.matches .upcoming-event .teams {
    gap:16px;
    align-items: flex-start;
}

.matches .upcoming-event .event-date .date {
    font-size:1rem;
}

.matches .upcoming-event .teams .time-meta .time {
    font-size:1rem;
}

/* ============================================
FORMULA 1 - NEXT TRACKS
============================================ */
.upcoming-event.f-tracks {
    justify-content: space-between;
    gap: 32px;
    flex-direction: row;
}

.f-tracks .track-details {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:32px;
}

.f-tracks .track-details .time-meta .time {
    margin-top: 16px;
    padding: 10px;
    border: 2px solid var(--main-color);
    font-size: 1.5rem;
}

.f-tracks .circuit-img {
    background-color:#fff;
    width:350px;
    height:auto;
    padding:16px 40px;
    border-radius:10px;
}
.f-tracks .circuit-img img {
    object-fit:contain;
    height:100%;
    width:100%;
}

/* ============================================
FORMULA 1 - RESULTS
============================================ */
.result.formula-result {
    flex-direction:column;
    gap:16px;
}

.result.formula-result .f-result-image {
    width:150px;
    height:auto;
}

.result.formula-result .f-result-image img {
    object-fit:contain;
    height:100%;
    width:100%;
}

.result.formula-result .f-track-name {
    background-color:var(--main-color);
    color:#fff;
    text-decoration:none;
    font-size:1.5rem;
    padding:16px;
}

.result.formula-result .f-track-name img {
    width:auto;
    height:1.5rem;
    margin-right:8px;
}

.driver-name .country {
    color:var(--main-color);
}

/* ============================================
FORMULA 1 - GRID RESULTS
============================================ */
.formula-grid-results {
    position:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:32px;
}

.formula-grid-results .position-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    border: 1px solid var(--accent-color-2);
    padding: 32px;
}

.formula-grid-results .position-card .race-title {
    margin-bottom:8px;
}

.formula-grid-results .position-card .race-times {
    display:flex;
    justify-content:space-between;
    gap:8px;
}

.formula-grid-results .position-card .race-times .time {
    color:var(--main-color);
    border-right:2px solid var(--main-color);
    padding-right:8px;
}

.formula-grid-results .position-card .position-details {
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
    gap:32px;
    width:100%;
}

.formula-grid-results .position-card .r-team-driver {
    width:fit-content;
    position:relative;
    margin-top:16px;
}

.formula-grid-results .position-card .r-team-driver .f-team {
    height:50px;
    position:absolute;
    top:0;
    right:0;
}

.formula-grid-results .position-card .r-team-driver .position-fin {
    position:absolute;
    top:0;
    left:0;
    font-size:2rem;
}

.formula-grid-results .position-card .r-team-driver .f-driver {
    height:150px;
}

.formula-grid-results .position-card  .race-stats {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.formula-grid-results .position-card  .race-stats span {
    color:var(--main-color);
}

/* ============================================
FORMULA 1 - FINISHED STAGES
============================================ */
.f-stages {
    display:flex;
    flex-wrap:wrap;
    gap:0;
    justify-content:space-between;
    align-items:center;

}

.f-stages .upcoming-event.f-tracks {
    color:var(--accent-color);
    width:50%;
    margin-top: 0;
    margin-bottom: 32px;
}

.f-stages .upcoming-event.f-tracks .f-track-name {
    background-color:var(--main-color);
    padding:8px;
}

.f-stages .upcoming-event.f-tracks .f-track-name img {
    height:1.5rem;
    width:auto;
}

/* ============================================
FORMULA 1 - DRIVERS
============================================ */
.player-card.drivers {
    justify-content: center;
}

.player-card.drivers .player-identity {
    align-items:center;
}

/* ============================================
FOOTER
============================================ */
.footer--outer {
    display:flex;
    gap:32px;
    width:100%;
    color:#fff;
}

.footer--outer:before {
    content:"[";
}

.footer--outer:after {
    content:"]";
}

.footer--outer:before,
.footer--outer:after {
    font-size:200px;
    font-weight:var(--font-weight-a);
    color:var(--main-color);
}

.footer-columns {
    width:100%;
    display:grid;
    grid-template-columns:1fr 60px 1fr;
    gap:32px;
    align-items:center;
    justify-content:space-between;
    color:#fff;
}

.footer-columns .col a {
    color:#fff;
    text-decoration:none;
    transition:opacity .3s ease-in-out;
}

.footer-columns .col a:hover {
    opacity:0.7;
}

.footer-columns .col .logo {
    max-width:60px;
}

.footer-columns .col .newsletter {
    display:flex;
    flex-direction:column;
}

.footer-columns .col .newsletter .fields {
    display:flex;
    justify-content: flex-start;
}

.footer-columns .col .newsletter .fields .input-overlay {
    position:relative;
    width: 60%;
}

.footer-columns .col .newsletter .newsletter-btn {
    width: max-content;
    color: #ffffff;
    background-color: var(--main-color);
    font-size: 1rem;
    border:none;
    padding:0 10px;
    transition:opacity .3s ease-in-out;
}

.footer-columns .col .newsletter .newsletter-btn:hover {
    opacity:0.7;
}

.nl-label {
    margin-top:8px;
    margin-bottom:32px;
}

.footer-columns .col .socials {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
}

.footer-columns .col .support {
    display:flex;
    justify-content:center;
    margin-top:15px;
}

/* copyright */
.copyright {
    color:#fff;
    font-weight:var(--font-weight-a);
    text-align:center;
    font-size:0.8rem;
}

.copyright a {
    color:#fff;
    text-decoration:none;
    transition:opacity .3s ease-in-out;
}
.copyright a:hover {
    opacity:0.7;
}

/* ============================================
MOBILE
============================================ */
@media only screen and (max-width: 1366px) {
    .upcoming-events .upcoming-teams {
        justify-content: center;
    }
    .player-card .player-identity,
    .player-card .player-stats {
        width:100%;
        align-items:center;
    }
}

@media only screen and (max-width: 1341px) {
    /* --- Navigation --- */
    #cssmenu .button-nav {
        display:block;
    }

    .navigation-wrap > ul {
        background-color:var(--accent-color);
        top: 70px;
    }

    .nav-bar {
        height:auto;
    }

    #cssmenu > ul > li.has-sub > a:after {
        display:none;
    }

    nav {
        width:100%;
    }

    #cssmenu {
        width:100%;
    }

    #cssmenu ul ul {
        width:100%;
        display:none;
        padding-bottom:0;
    }

    #cssmenu ul li {
        width:100%;
    }

    #cssmenu ul li:hover {
        background:#1e0933;
    }

    #cssmenu ul ul li,#cssmenu li:hover > ul > li {
        height:auto;
    }

    #cssmenu ul li a,#cssmenu ul ul li a {
        width:100%;
        border-bottom:0;
    }

    #cssmenu > ul > li {
        float:none;
    }

    #cssmenu ul ul li a {
        padding-left:25px;
    }

    #cssmenu ul ul li {
        background:var(--main-color) !important;
    }

    #cssmenu ul ul li:hover {
        background:#1e0933!important
    }

    #cssmenu ul ul ul li a {
        padding-left:35px;
    }

    #cssmenu ul ul li a {
        color: var(--accent-color);
        background:none;
    }

    #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {
        color:#fff
    }

    #cssmenu ul ul,#cssmenu ul ul ul {
        position:relative;
        left:0;
        width:100%;
        margin:0;
        text-align:left;
    }


    .button-nav {
        width:55px;
        height:46px;
        position:absolute;
        right:0;
        top:12px;
        cursor:pointer;
        z-index: 12399994;
    }

    .button-nav:after {
        content:"";
        position:absolute;
        top:22px;
        right:20px;
        display:block;
        height:8px;
        width:20px;
        border-top:2px solid #fff;
        border-bottom:2px solid #fff;
    }

    .button-nav:before {
        content:"";
        -webkit-transition:all .3s ease;
        -ms-transition:all .3s ease;
        transition:all .3s ease;
        position:absolute;
        top:16px;
        right:20px;
        display:block;
        height:2px;
        width:20px;
        background:#ddd;
    }

    .button-nav.menu-opened:after {
        -webkit-transition:all .3s ease;
        -ms-transition:all .3s ease;
        transition:all .3s ease;
        top:23px;
        border:0;
        height:2px;
        width:19px;
        background:#fff;
        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        transform:rotate(45deg)
    }

    .button-nav.menu-opened:before {
        top:23px;
        background:#fff;
        width:19px;
        -webkit-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -o-transform:rotate(-45deg);
        transform:rotate(-45deg)
    }

    #cssmenu .submenu-button {
        position:absolute;
        z-index:99;
        right:0;
        top:0;
        display:block;
        height:70px;
        width:46px;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color: var(--main-color);
        border-bottom: 1px solid var(--accent-color);
    }

    #cssmenu .submenu-button.submenu-opened {
        background:var(--accent-color);
    }

    #cssmenu ul ul .submenu-button {
        height:34px;
        width:34px;
    }

    #cssmenu .submenu-button:after{
        content:"";
        height:15px;
        width:15px;
        background-image:url(../images/icons/chevron-down-white.svg);
        background-size:contain;
        background-repeat:no-repeat;
        background-position:center;
        transition:transform .3s ease-in-out;
    }

    #cssmenu .submenu-button.submenu-opened:after{
        transform:rotate(180deg);
    }

    #cssmenu ul ul ul li.active a {
        border-left:none;
    }

    #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a {
        border-top:none;
    }

    .search {
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        left:40px;
    }

    /* --- Swiper Hero --- */
    .swiper-content {
        max-width:80%;
    }

    .players-wrap .fb-1 {
        height:50vh;        
        /* right:-80px; */
    }

    .players-wrap .fb-3,
    .players-wrap .fb-2 {
        height:350px;
        right:-180px;
        display:none !important;
    }

    .background-image img {
        object-fit:cover;
    }

    /* --- Swiper Featured News --- */
    .featuredNews--inner {
        display:flex;
        flex-direction:column;
        gap:32px;
    }

    .featuredNews--inner .featured {
        grid-column:1;
        grid-row: 1;
        display:flex;
        flex-wrap:wrap;
    }

    .featuredNews--inner {
        gap:32px;
    }

    .featuredNews--inner .featured-content,
    .featuredNews--inner .featured .image-wrap {
        width:100%;
    }

    .featuredNews--inner .featured .image-wrap {
        height:200px;
        width:100%;
        position:relative;
    }

    .featuredNews--inner .featured-content {
        height:auto;
    }

    /* --- Latest & Upcoming --- */
    .latest-results,
    .upcoming-events {
        width:100%;
    }

    .latest-result-pagination {
        top:initial;
        bottom:32px;
    }

    .latestEvents .swiper-slide .player-image {
        width:150px;
    }

    .upcoming-events {
        border-left:none;
        border-top:4px solid var(--main-color);
    }

    .upcoming-events .upcoming-teams {
        justify-content:center;
        gap:32px;
    }

    .upcoming-events .upcoming-header a {
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: 32px;
    }

    .result {
        grid-template-columns: 1fr 1fr 1fr;
        text-align: center;
    }

    .result .team {
        grid-column:span 3;
    }

    .result .win,
    .result .loss,
    .result .vs {
        grid-column:2;
    }

    .results--inner .result .team {
        grid-column: auto;
    }

    /* --- Tables --- */
    .tables {
        display:grid;
        grid-template-columns:1fr;
        gap:32px;
    }

    .tables .group {
        border:1px solid var(--accent-color-2);
        width: min(100vw - 5%);
        overflow: scroll;
    }

    .group--inner {
        min-width: 550px;
    }

    /* --- Contact form --- */
    .contact-wrap {
        grid-template-columns:1fr;
    }

    .contact-form .fields {
        grid-template-columns: 1fr;
    }

    .contact-form .fields .message {
        grid-column: span 1;
    }

    /* --- Register / Login --- */
    .custom-radio-wrap {
        grid-column: span 1;
    }
    .register-login {
        grid-template-columns:1fr;
    }

    /* --- Register / Login --- */
    .latest-videos {
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:32px;
    }

    /* --- Dashboard --- */
    .container .dashboard {
        grid-template-columns: 1fr;
    }
    .dashboard-content .account-details .button.btn--bg,
    .dashboard-content .membership-details .button.btn--bg {
        margin-top:10px;
    }

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

    .modal__content {
        grid-template-columns:1fr 1fr;
    }

    /* --- Payments --- */
    .payments-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* --- Formula 1 Next tracks --- */
    .upcoming-event.f-tracks {
        flex-direction:column;
    }

    /* --- Formula 1 Finsihed stages --- */
    .f-stages .upcoming-event.f-tracks {
        width:100%;
    }

}

@media only screen and (max-width: 769px) {
    :root {

        --padding-top-large: 44px;
        --padding-bottom-large: 44px;
    }

    /* --- Swiper Hero --- */
    .mySwiperHero .swiper-slide {
        padding-bottom:160px;
    }

    .swiper-nav {
        bottom: 24px;
        right: auto;
        left: 24px;
        top: auto;
    }

    .swiper-logo {
        top:24px;
        left:24px;
    }

    /* --- Swiper Featured News --- */
    .featuredNews--inner {
        display:flex;
        gap:15px;
    }

    .swiper-pagination-hero,
    .swiper-pagination-featured {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    .swiper-pagination-featured {
        bottom: -40px;
    }

    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: var(--main-color);
    }

    .swiper-pagination-bullet {
        background-color: var(--main-color);
        height: 10px;
        width: 10px;
        border-radius:20px;
    }

    /* --- Upcoming Events - Football --- */
    .tabs {
        gap:6px;
    }

    .tabs a {
        font-size: .8rem;
        padding:12px;
    }

    .tabs a span:after,
    .tabs a span:before {
        content:"";
    }

    /* --- Register / Login --- */
    .latest-videos {
        display:grid;
        grid-template-columns: 1fr;
        gap:32px;
    }

    /* --- Footer --- */
    .footer--outer:before,
    .footer--outer:after {
        display:none;
    }

    .footer-columns .col {
        text-align:center;
    }

    .footer-columns {
        grid-template-columns:1fr;
        justify-content:center;
    }

    .footer-columns .col .newsletter {
        align-items:center;
    }

    .footer-columns .col .newsletter .fields {
        justify-content:center;
    }

    .copyright {
        margin-top:25px;
    }

    /* --- Fixtures * Results Wrap --- */
    .feed {
        display:grid;
        grid-template-columns: 1fr;
        gap:32px;
    }

    /* --- Teams --- */
    .teams-wrap .team {
        width:33.3333%;
    }
    /* --- Modal content --- */

    .modal__content {
        grid-template-columns:1fr;
    }

    /* --- Grid results --- */
    .formula-grid-results .position-card {
        justify-content:center;
        text-align:center;
    }
    .formula-grid-results .position-card .position-details {
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }

    /* --- finsihed Stages --- */
    .f-stages {
        flex-wrap:nowrap;
    }
    h1 {
        font-size: 2.6rem;
    }
}

@media only screen and (max-width: 451px) {
    .teams-wrap .team {
        width:50%;
    }
    .upcoming-event .teams {
        gap:unset;
    }
    .article--inner,
    .article--content
    {
        width: calc(100vw - 5%) !important;
    }
    .article--content figure
    {
        width: calc(100vw - 5%) !important;
    }
    .article--content figure iframe,
    .article--content figure iframe html body
    {
        width: calc(100vw - 5%) !important;
    }
}


/* whitelabel customization */
.swiper-pagination-progressbar,
.background-image ,
.swiper-pagination-bullet {
    background: var(--accent-color);
}
#cssmenu > ul > li.has-sub > a {
    /*background: var(--main-color);*/
}

/* coockie*/
   #cookie-law-info-bar {
       font-size: 15px;
       margin: 0 auto;
       text-align: center;
       box-sizing: border-box;
       z-index: 9999;
       left: 0px;
       font-weight: 300;
       box-shadow: 0 -1px 10px 0 var(--font-color);
       background-color: var(--accent-color);
       color: rgb(255, 255, 255);
       font-family: inherit;
       inset: auto auto 15px 15px;
       width: 300px;
       height: auto;
       max-height: 528px;
       overflow: auto;
       position: fixed;
       padding: 25px 15px;
       display: block;
   }

#cookie-law-info-bar {
    z-index: 99999999 !important;
}

#cookie-law-info-bar span {
    vertical-align: middle;
}

.cli_settings_button {
    cursor: pointer;
}

.cli-plugin-main-link {
    margin-left: 0px;
    font-weight: 550;
    text-decoration: underline;
}

.cli-plugin-button, .cli-plugin-button:visited, .medium.cli-plugin-button, .medium.cli-plugin-button:visited {
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    background-color:var(--main-color);
    margin: 5px;
    color: var(--font-color);
}

.cli-plugin-button, .cli-plugin-button:visited {
    display: inline-block;
    padding: 9px 12px;
    color: #fff;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    margin-left: 5px;
}
/*remove social links from footer*/
.footer-columns .col:nth-child(2),.footer-columns .col:nth-child(3){visibility: hidden;}