@font-face {

    font-family: "Rubik-Light";

    src: url('/assets/fonts/Rubik/Rubik-Light.ttf') format("truetype");

    font-weight: 300;

}

@font-face {

    font-family: "Rubik-Regular";

    src: url('/assets/fonts/Rubik/Rubik-Regular.ttf') format("truetype");

    font-weight: 400;

}

@font-face {

    font-family: "Rubik-Bold";

    src: url('/assets/fonts/Rubik/Rubik-Bold.ttf') format("truetype");

    font-weight: 700;

}

@font-face {

    font-family: "BigShouldersDisplay-Bold";

    src: url('/assets/fonts/Big_Shoulders_Display/BigShouldersDisplay-Bold.ttf') format("truetype");

    font-weight: 700;

}



body, html {



    overflow-x: hidden;



    scroll-behavior: smooth;



    background-color: #FFF;



    padding-right: 0 !important;



}



header.mobile, header.desktop nav {



    position: fixed;



    top: 0;



    left: 0;



    width: 100%;



    z-index: 99;



}



header.mobile {



    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(255, 255, 255, 0) 70%);



    min-height: 134px;



}



header.desktop .navbar-brand img

{

    height: 25px;

}

header.desktop.blue-bg nav {

    background: #2A7B9B;

    background: linear-gradient(180deg,rgba(42, 123, 155, 1) 0%, rgba(0, 0, 0, 0.47) 0%, rgba(0, 0, 0, 0) 100%);

}

header.desktop ul.navbar-nav {



    flex-direction: row;

    margin-top: 20px;



}



header.desktop ul.navbar-nav a {

    font-family: "Rubik-Regular";

    color: #FFFFFF;

    text-transform: uppercase;

    font-size: 0.8rem;

    padding-left: 16px;

    line-height: 1rem;



}



header.desktop ul.navbar-nav a .chevron {



    transition: transform 0.2s ease;



    margin-left: 8px;



}

header.desktop .categories-swiper-container .motorbike-container span {

     color: #FFFFFF;

}

header.desktop ul.navbar-nav a.hovered .chevron {



    transform: rotate(90deg);



}



header.desktop ul.navbar-nav a:hover,



header.desktop ul.navbar-nav a:focus,



header.desktop ul.navbar-nav li.active a {



    text-decoration: underline;



}



header.desktop .motorbike-container {



   display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



    text-decoration: none;    



}



header.desktop .motorbike-container,



header.desktop .motorbike-container img,



header.desktop .motorbike-container span {



    cursor: pointer;



}



header.desktop .motorbike-container:hover {



    text-decoration: none;



}



header.desktop .motorbike-container span {



    font-family: "Rubik-Regular";



    color: #000000;



    

    font-size: .8rem;



    line-height: 1rem;



}



header.desktop .categories-swiper-container {

    z-index: 99;



    font-size: 20px;



    padding-bottom: 0;



}



@media only screen and (min-width: 1200px) {



    header.desktop .categories-swiper-container .cat-cont {



        max-width: 1313px;



    }



}



.header-swiper {



    top: 136px;

    padding-right: 20vw;



}

.header-swiper .swiper-button-next, .header-swiper .swiper-button-prev,

.header-swiper-mobile .swiper-button-next, .header-swiper-mobile .swiper-button-prev {

    color: #000000;

}

header.desktop .cat-cont {



    display: flex;



    align-items: center;



    justify-content: space-between;



    min-height: 48px;



}



header .swiper-btn-prev, header .swiper-btn-next {



    top: 50%;



    position: absolute;



    z-index: 9999;



}



header .swiper-btn-prev {



    left: 1rem;



}



header .swiper-btn-next {



    right: 1rem;



}



header.desktop nav.navbar {

    padding-bottom: 8px;

    padding-top: 8px;

    padding-left: 30px;

    padding-right: 30px;

    z-index: 9999;

}



.categories-swiper-container {



    padding-top: 88px;



    z-index: 9;



}



.header-swiper {



    z-index: 99999;



}



.header-swiper, .categories-swiper-container {



    padding-bottom: 16px;



    display: none;



    position: fixed;



    width: 100%;



    background: #D5D3D3;



}



.motorbike-container img {

    width: 150px;

}

.categories-swiper-container, header.desktop.header-with-bg nav {

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.2) 100%);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

}

footer {    

    min-height: 120px;

    /*display: flex;

    align-items: center;*/

    position: relative;

}



footer a, footer a:hover, footer a:focus {

    text-transform: uppercase;

    font-size: 0.7rem;

    color: #FFFFFF;

}



footer .main-row a {

    font-size: 0.7rem;

}



footer .col-md-2 {



    position: relative;



}



footer .col-md-2:after {



    content: "";



    display: block;



    width: 1px;



    background: #FFFFFF;



    height: 100%;



    text-align: center;



    margin: 0 auto;



}



.main-menu {    



    position: fixed;



    height: 100%;



    width: 80%;



    min-height: 100vh;



    overflow-y: auto;



    z-index: 9999;



    left: -500vw;



    top: 0;



    transition: left 0.2s ease;



    padding-left: 15px;



    padding-right: 15px;



}



.main-menu.open, .panel2.panel-open, .submenu-container.panel-open {



    left: 0 !important;



    position: fixed;



    height: 100%;



    width: 80%;



    min-height: 100vh;



    overflow-y: auto;



    z-index: 9999;



    left: -500vw;



    top: 0;



    transition: left 0.2s ease;



    padding-left: 15px;



    padding-right: 15px;



    background: rgba(0, 0, 0, 0.75);



    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);



    backdrop-filter: blur(5px);



    -webkit-backdrop-filter: blur(5px);



    visibility: visible;



    min-width: 288px;



}

.panel2.panel-open {

    background: #D5D3D3;

    width: 100%;

}

.mobile.main-menu.open.hide-panel {

    width: 100%;

}

.panel2.panel-open #mobileAccordion * {

    color: #000000;

    font-family: "Rubik-Regular", sans-serif;

    font-size: 16px;

}

.panel2.panel-open .mobile-card-header-text {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.panel2.panel-open #mobileAccordion .motorbike-container  {

    text-align: center;

    line-height: 10px;

}

.panel2.panel-open #mobileAccordion .motorbike-container span {

    font-size: 10px;

}

.panel2.panel-open .mobile-card {

    margin-bottom: 16px;

}

.panel2.panel-open .mobile-card-body {

    padding-top: 8px;

}

.panel2.panel-open span.mobile-card-header-text img {

    transition: all ease 0.2s;

}

.panel2.panel-open span.mobile-card-header-text:not(.collapsed) img {

    transform: rotate(90deg);

}

.panel2.panel-open #back {

    color: #000000;

}

.main-menu.open.hide-panel, .panel2.panel-open.hide-panel {



    visibility: hidden;



}



.panel2, .submenu-container {



    left: -500vw;



}



.panel2, .submenu-container {



    transition: left 0.2s ease;



    position: fixed;



    min-height: 100vh;



    overflow-y: auto;



    z-index: 9999;



    top: 0;



    width: 80%;



    padding-right: 15px;



    padding-left: 15px;



}



.main-menu a {



    color: #FFFFFF;



    text-transform: uppercase;



    display: inline-block;



    width: 100%;



    font-family: "Rubik-Regular", sans-serif;



    font-size: 1.375rem;



}



.main-menu > .close-menu {



    margin-bottom: 16px;



    margin-top: 56px;



}



.main-menu > a {



    font-family: "Rubik-Regular", sans-serif;



    font-size: 16px;



}



.main-menu > a, .main-menu a.moto {



    margin-bottom: 12px;



    display: flex;



    justify-content: space-between;    



}



.main-menu a.moto {



    text-transform: unset;



}



#back, #back-2 {



    margin-top: 24px;



    font-family: "Rubik-Regular", sans-serif;



    font-size: 16px;



}



#back img, #back-2 img {



    transform: rotate(180deg);



    margin-right: 8px;



}



.panel2 .close-menu, .submenu-container .close-menu {



    margin-top: 24px;



    margin-bottom: 16px;



}



#mobile-categories img, .moto img {



    width: 0.6rem;



}



.swiper-pagination-bullet-active {



    background-color: #FFFFFF !important;



}



.swiper-pagination-bullet {



    background-color: rgba(255, 255, 255, 0.35);



}



.hero-section .subheading {



    font-family: "Rubik-Regular", sans-serif;



    font-size: 1.5rem;



    line-height: 1.8rem;



}

footer .row.content {

    max-width: 1354px;

    margin-left: auto;

    margin-right: auto;

    padding-bottom: 4px;

}

footer .separator {

    margin-top: 12px;

    margin-bottom: 24px;

    width: 100%;

    height: 0.5px;

    background-color: #FFFFFF;

}



footer .separator.mobile {

        margin-top: 28px;

    margin-bottom: 14px;

    width: 100%;

    height: 0.5px;

    background-color: #888;

}

footer .row.content:first-child .col-lg-3 a:after {

    content: "";

    width: 100%;

    position: absolute;

    bottom: -4px;

    left: 0;

    height: 1px;

    background-color: #FFFFFF;

}

footer .row.content:first-child .col-lg-3 a, footer .row.content:first-child .col-lg-3 a:hover, footer .row.content:first-child .col-lg-3 a:focus {

    max-width: 265px;

    position: relative;

    text-decoration: none;

}

footer .social-container {

    max-width: 333px;

    margin: 24px auto 0 auto;

    margin-top: 40px;

    margin-bottom: 40px;

}

footer .row.content .col-lg-3 a {

    display: flex;

    width: 100%;

    justify-content: space-between;

    align-items: center;

    margin-top: 10px;

}

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



    .hero-section .container-fluid {



        bottom: 0;



        right: 15px;



        text-align: right;



        z-index: 9;



        max-width: 760px;



    }



}



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



    .hero-section .subheading {



        font-size: 25.55px;



        line-height: 30.28px;



    }



}



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



    .hero-section h1 {



        font-size: 45px;



        line-height: 53.93px;



    }

    .desktop {



        display: none !important;



    }



}



@media only screen and (min-width: 1024px) {



    .mobile {



        display: none !important;



    }



    footer a:not(:last-of-type) {



        margin-right: 24px;



    }



    footer .main-row {



        margin-top: 24px;



    }



}



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

        footer > .container-fluid {

        padding: 0;

    }

    footer {

        background-color: #030303;

    }

    .swiper-button-next:not(.arrow-right),

    .swiper-button-prev:not(.arrow-left) {

        top: 38%;

    }

    .navbar-brand

    {

        margin-right: 0 !important;

    }

    .navbar-brand img

    {

        width: 130px !important;

    }

    footer .separator.mobile {

        display: none;

    }



    footer .social {



        order: 1;



        text-align: center;



    }

    footer .row.content:first-child .col-lg-3 {

        padding-top: 24px;

    }



    footer .red-content {

        background-color: #CC0000;

        padding-bottom: 1.5rem;

    }

        footer > div {

        padding: 15px;

    }



footer .col-lg-3

{

width: 100%;

    min-width: 100%;

    padding-left: 0;

    padding-right: 0;

}



footer a {

    width: 100%;

    min-width: 100%;

    padding-left: 0;

    padding-right: 0;

}



footer .social-container {

    max-width: 333px;

    margin: 24px auto 0 auto;

    margin-top: 30px;

    margin-bottom: 30px;

}



footer .social-container a img {

    width: 40px;

}



}



.red-text, .red-text:hover

{

    color: #CC0000;

}



@media only screen and (min-width: 992px) {

    footer {

        background-color: #030303;

    }



    footer .main-row span {



        display: inline-block;



        width: 100%;



    }

    footer > .container-fluid {

        padding-left: 0;

        padding-right: 0;

    }

    footer .red-content {

        padding: 45px 15px 50px 15px;

    background-color: #CC0000;

    margin-bottom: 24px;

}



}



@media only screen and (orientation: landscape) {

    .only_portrait

    {

        display: none !important;

    }

}



@media only screen and (orientation: portrait) {

    .only_landscape

    {

        display: none !important;

    }

    .mobile.main-menu .swiper-button-next, .mobile.main-menu .swiper-button-prev
    {
        display: none !important;
    }
}

header.desktop .motorbike-container {

    color: #FFFFFF;

}

header.desktop .motorbike-container:hover span, header.desktop .motorbike-container:focus span, header.desktop .motorbike-container.active {

    text-decoration: underline;

}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



/* Firefox */

input[type="number"] {

    -moz-appearance: textfield;

}