@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&subset=latin,latin-ext");

.bike-header
{
    min-height: 100vh;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center
}

.bike-header .heading
{
    font-size: 68px;
    line-height: 1;
    font-family: trumpgothicpro,sans-serif !important;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0,0,0,.5)
}

.bike-header .back_cross
{
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
    display: block;
    padding: 30px 0;
    margin-top: 25%
}

.bike-header #main-desc, .bike-header + #main-desc
{
    color: hsla(0,0%,100%,.75);
    margin: 0 auto;
    font-weight: 400;
    display: block;
    text-align: center;
    pointer-events: none
}

.bike-header + #main-desc
{
    font-size: 12px;
    padding: 30px 10%;
    background: #000
}

.bike-header .banner
{
    background-size: cover !important;
    min-height: 100vh;
    border: 0 solid #fff000;
    display: table;
    width: 100%;
    transition: height 999999s
}

.bike-header .caption
{
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;
    display: inline-block;
    margin-top: 0;
    text-transform: uppercase;
    font-family: Open Sans,sans-serif;
    text-shadow: 0 0 10px rgba(0,0,0,.5)
}

.bike-header.street
{
    background: url(bg_street.png)
}

.bike-header.street + #main-desc
{
    padding-top: 20px
}

.bike-header .heading.street
{
    margin-top: 0
}

.bike-header .heading.street strong
{
    color: #1dc3ea;
    display: block
}

@media only screen and (min-width:768px)
{
    .bike-header
    {
        background-position: 50% 0
    }

    .bike-header .heading
    {
        font-size: 135px;
        line-height: 90px;
        text-shadow: 0 2px 30px rgba(0,0,0,.5)
    }

    .bike-header .heading:first-of-type:after
    {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: 50% !important;
        transform: translate(-50%,-50%);
        z-index: -1
    }

    .bike-header .caption
    {
        font-size: 18px;
        margin-top: 20px;
        letter-spacing: 4.5px;
        text-shadow: 0 2px 30px #000
    }

    .bike-header .banner
    {
        min-height: 590px;
        padding-top: 76px
    }

    .bike-header #main-desc
    {
        font-size: 16px;
        max-width: 500px;
        background: transparent;
        padding-top: 100vh;
        position: relative;
        padding-bottom: 50px
    }
}

.bike-header
{
    position: relative;
    background-image: url(bg_hero.png)
}

.bike-header .back_cross, .bike-header .heading:first-of-type:after
{
    background-image: url(triangle_back.svg)
}

.bike-header .heading:first-of-type:after
{
    width: 370px;
    height: 340px
}

.bike-header .heading
{
    color: #fff
}

.bike-header .caption, .bike-header .heading.hero
{
    color: #7fb539
}

@media only screen and (min-width:768px)
{
    .bike-header
    {
        background-image: url(hero-bg.png)
    }

    .bike-header .heading.hero
    {
        margin-top: 30px
    }
}

.bike-features-accordion, .bike-features-accordion--green, .bike-features-accordion--yellow
{
    background-color: #000
}

.bike-features-accordion--green h2, .bike-features-accordion--yellow h2, .bike-features-accordion h2
{
    font-weight: 600;
    margin: 0;
    padding: 30px 0 20px
}

.bike-features-accordion--green .panel-heading, .bike-features-accordion--yellow .panel-heading, .bike-features-accordion .panel-heading
{
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    padding: 25px 20px;
    position: relative;
    transition: all .2s ease
}

.bike-features-accordion--green .panel-heading .accordion-toggle:after, .bike-features-accordion--yellow .panel-heading .accordion-toggle:after, .bike-features-accordion .panel-heading .accordion-toggle:after
{
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 22px;
    height: 11px;
    background-size: cover !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    transition: all .5s ease
}

.bike-features-accordion--green .panel-heading .accordion-toggle.collapsed:after, .bike-features-accordion--yellow .panel-heading .accordion-toggle.collapsed:after, .bike-features-accordion .panel-heading .accordion-toggle.collapsed:after
{
    transform: translateY(-50%) rotate(180deg)
}

.bike-features-accordion--green .panel-heading + .panel-collapse.in > .panel-body, .bike-features-accordion--green .panel-heading + .panel-collapse > .panel-body, .bike-features-accordion--yellow .panel-heading + .panel-collapse.in > .panel-body, .bike-features-accordion--yellow .panel-heading + .panel-collapse > .panel-body, .bike-features-accordion .panel-heading + .panel-collapse.in > .panel-body, .bike-features-accordion .panel-heading + .panel-collapse > .panel-body
{
    padding: 0
}

.bike-features-accordion--green .panel-heading + .panel-collapse > .panel-body p, .bike-features-accordion--yellow .panel-heading + .panel-collapse > .panel-body p, .bike-features-accordion .panel-heading + .panel-collapse > .panel-body p
{
    padding: 10px 55px 10px 90px;
    line-height: 1.4;
    margin: 0
}

.bike-features-accordion--green .panel-heading + .panel-collapse > .panel-body img, .bike-features-accordion--yellow .panel-heading + .panel-collapse > .panel-body img, .bike-features-accordion .panel-heading + .panel-collapse > .panel-body img
{
    width: 100%
}

.bike-features-accordion--green .panel-heading .svg-icon, .bike-features-accordion--yellow .panel-heading .svg-icon, .bike-features-accordion .panel-heading .svg-icon
{
    max-width: 50px;
    max-height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
}

.bike-features-accordion--green .panel-heading + .panel-collapse.in, .bike-features-accordion--yellow .panel-heading + .panel-collapse.in, .bike-features-accordion .panel-heading + .panel-collapse.in
{
    border-bottom: 1px solid transparent
}

.bike-features-accordion--green .panel-group .panel, .bike-features-accordion--yellow .panel-group .panel, .bike-features-accordion .panel-group .panel
{
    border-radius: 0;
    border: 0
}

.bike-features-accordion--green .panel-group .panel + .panel, .bike-features-accordion--yellow .panel-group .panel + .panel, .bike-features-accordion .panel-group .panel + .panel
{
    margin-top: 0
}

.bike-features-accordion--green h4.panel-title, .bike-features-accordion--yellow h4.panel-title, .bike-features-accordion h4.panel-title
{
    font-weight: 800;
    font-size: 16px;
    margin-left: 70px;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: left
}

.bike-features-accordion--green .accordion-toggle:not(.collapsed), .bike-features-accordion--green h4.panel-title a:active, .bike-features-accordion--green h4.panel-title a:focus, .bike-features-accordion--green h4.panel-title a:hover, .bike-features-accordion--yellow .accordion-toggle:not(.collapsed), .bike-features-accordion--yellow h4.panel-title a:active, .bike-features-accordion--yellow h4.panel-title a:focus, .bike-features-accordion--yellow h4.panel-title a:hover, .bike-features-accordion .accordion-toggle:not(.collapsed), .bike-features-accordion h4.panel-title a:active, .bike-features-accordion h4.panel-title a:focus, .bike-features-accordion h4.panel-title a:hover
{
    color: #080808
}

@media only screen and (min-width:768px)
{
    .bike-features-tabs, .bike-features-tabs--green, .bike-features-tabs--yellow
    {
        height: calc(100vh - 50px);
        background-color: #000;
        background-size: cover !important;
        background-position: 50% !important;
        background-repeat: no-repeat !important;
        position: relative;
        transition: all .2s ease
    }

    .bike-features-tabs--green .feature-one strong, .bike-features-tabs--green .feature-text strong, .bike-features-tabs--green header strong, .bike-features-tabs--yellow .feature-one strong, .bike-features-tabs--yellow .feature-text strong, .bike-features-tabs--yellow header strong, .bike-features-tabs .feature-one strong, .bike-features-tabs .feature-text strong, .bike-features-tabs header strong
    {
        font-weight: 900;
        display: block;
        letter-spacing: 1px;
        text-transform: uppercase
    }

    .bike-features-tabs--green header h2, .bike-features-tabs--yellow header h2, .bike-features-tabs header h2
    {
        padding-top: 50px;
        text-align: center;
        color: #fff;
        font-size: 48px;
        text-shadow: 0 1px 92px rgba(51,51,51,.2)
    }

    .bike-features-tabs--green header strong, .bike-features-tabs--yellow header strong, .bike-features-tabs header strong
    {
        text-align: center;
        color: hsla(0,0%,100%,.7);
        font-size: 18px
    }

    .bike-features-tabs--green .feature-text, .bike-features-tabs--yellow .feature-text, .bike-features-tabs .feature-text
    {
        width: 35%;
        margin-top: 10vh
    }

    .bike-features-tabs--green .feature-text strong, .bike-features-tabs--yellow .feature-text strong, .bike-features-tabs .feature-text strong
    {
        font-size: 20px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid hsla(0,0%,100%,.25);
        color: #fff
    }

    .bike-features-tabs--green .feature-text p, .bike-features-tabs--yellow .feature-text p, .bike-features-tabs .feature-text p
    {
        max-width: 300px;
        line-height: 1.5;
        font-size: 12px;
        color: #fff;
        padding-right: 15px
    }

    .bike-features-tabs--green .feature-choose, .bike-features-tabs--yellow .feature-choose, .bike-features-tabs .feature-choose
    {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center
    }

    .bike-features-tabs--green .feature-one, .bike-features-tabs--yellow .feature-one, .bike-features-tabs .feature-one
    {
        width: 125px;
        height: 170px;
        display: inline-block;
        vertical-align: bottom;
        transition: all .2s ease;
        padding: 0 15px
    }

    .bike-features-tabs--green .feature-one.active, .bike-features-tabs--green .feature-one:hover, .bike-features-tabs--yellow .feature-one.active, .bike-features-tabs--yellow .feature-one:hover, .bike-features-tabs .feature-one.active, .bike-features-tabs .feature-one:hover
    {
        height: 200px
    }

    .bike-features-tabs--green .feature-one.active img, .bike-features-tabs--green .feature-one:hover img, .bike-features-tabs--yellow .feature-one.active img, .bike-features-tabs--yellow .feature-one:hover img, .bike-features-tabs .feature-one.active img, .bike-features-tabs .feature-one:hover img
    {
        opacity: 1
    }

    .bike-features-tabs--green .feature-one img, .bike-features-tabs--yellow .feature-one img, .bike-features-tabs .feature-one img
    {
        max-height: 50px;
        max-width: 100%;
        margin-top: 25px;
        opacity: .5;
        transition: opacity .2s ease
    }

    .bike-features-tabs--green .feature-one strong, .bike-features-tabs--yellow .feature-one strong, .bike-features-tabs .feature-one strong
    {
        text-align: center;
        font-size: 12px;
        line-height: 1.3;
        margin-top: 20px;
        letter-spacing: normal
    }
}

.bike-features-accordion--green h2
{
    color: #fff;
    background: #7fb539
}

.bike-features-accordion--green .panel-heading
{
    background-color: #2c3225;
    border-bottom-color: #7fb539
}

.bike-features-accordion--green .panel-heading .accordion-toggle:after
{
    background-image: url(v_up_green.png);
    color: #7fb539
}

.bike-features-accordion--green .panel-heading.toggled
{
    background-color: #222;
    border-color: #222
}

.bike-features-accordion--green .panel-heading.toggled a
{
    color: #fff
}

.bike-features-accordion--green .panel-heading + .panel-collapse.in > .panel-body, .bike-features-accordion--green .panel-heading + .panel-collapse > .panel-body
{
    color: #fff;
    background-color: #222
}

.bike-features-accordion--green .panel-heading + .panel-collapse > .panel-body p
{
    color: #fff
}

.bike-features-accordion--green .panel-heading a, .bike-features-accordion--green .panel-heading a:active, .bike-features-accordion--green .panel-heading a:focus, .bike-features-accordion--green .panel-heading a:hover, .bike-features-accordion--green .panel-heading a:visited
{
    color: hsla(0,0%,100%,.75)
}

.bike-features-accordion--green .panel-heading + .panel-collapse > .panel-body
{
    border-top-color: #222
}

.bike-features-accordion--green .panel-heading + .panel-collapse.in
{
    border-bottom-color: #7fb539
}

@media only screen and (min-width:768px)
{
    .bike-features-tabs--green .feature-text
    {
        float: right
    }

    .bike-features-tabs--green .feature-one
    {
        background: linear-gradient(180deg,#111 0,#111 25%,rgba(17,17,17,.6));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#111111",endColorstr="#99111111",GradientType=0)
    }

    .bike-features-tabs--green .feature-one.active, .bike-features-tabs--green .feature-one:hover
    {
        background: linear-gradient(180deg,#222 0,#222 25%,rgba(34,34,34,.6));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#222222",endColorstr="#99222222",GradientType=0)
    }

    .bike-features-tabs--green .feature-one.active strong, .bike-features-tabs--green .feature-one:hover strong
    {
        color: #fff
    }

    .bike-features-tabs--green .feature-one strong
    {
        color: hsla(0,0%,100%,.75)
    }
}

.bike-features-accordion--yellow h2
{
    color: #333;
    background: #ffd400
}

.bike-features-accordion--yellow .panel-heading
{
    background-color: #fff1ab;
    border-bottom-color: #ffd400
}

.bike-features-accordion--yellow .panel-heading.toggled
{
    background-color: #fff;
    border-color: transparent
}

.bike-features-accordion--yellow .panel-heading.toggled a
{
    color: rgba(34,34,34,.75)
}

.bike-features-accordion--yellow .panel-heading .accordion-toggle:after
{
    background-image: url(v_up.png)
}

.bike-features-accordion--yellow .panel-heading + .panel-collapse.in > .panel-body, .bike-features-accordion--yellow .panel-heading + .panel-collapse > .panel-body
{
    color: #333;
    background-color: #fff;
    border-top-color: transparent
}

.bike-features-accordion--yellow .panel-heading + .panel-collapse > .panel-body p
{
    color: #333
}

.bike-features-accordion--yellow .panel-heading + .panel-collapse.in
{
    border-bottom-color: #ffd400
}

.bike-features-accordion--yellow .panel-heading a, .bike-features-accordion--yellow .panel-heading a:active, .bike-features-accordion--yellow .panel-heading a:focus, .bike-features-accordion--yellow .panel-heading a:hover, .bike-features-accordion--yellow .panel-heading a:visited
{
    color: rgba(34,34,34,.75)
}

@media only screen and (min-width:768px)
{
    .bike-features-tabs--yellow
    {
        background-image: url(featuresbg_young_killswitch.png)
    }

    .bike-features-tabs--yellow .feature-text
    {
        float: left;
        text-align: right
    }

    .bike-features-tabs--yellow .feature-text p
    {
        float: right;
        padding-right: 0
    }

    .bike-features-tabs--yellow .feature-choose a.feature-one
    {
        background: linear-gradient(180deg,#fff 0,#fff 25%,hsla(0,0%,60%,.6));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#666",GradientType=0)
    }

    .bike-features-tabs--yellow .feature-choose a.feature-one.active, .bike-features-tabs--yellow .feature-choose a.feature-one:hover
    {
        background: linear-gradient(180deg,#fff 0,#fff 25%,#fff);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#222222",endColorstr="#99222222",GradientType=0)
    }

    .bike-features-tabs--yellow .feature-choose a.feature-one.active strong, .bike-features-tabs--yellow .feature-choose a.feature-one:hover strong
    {
        color: #000
    }

    .bike-features-tabs--yellow .feature-choose strong
    {
        color: rgba(0,0,0,.75)
    }
}

#bike-models header
{
    padding: 40px 0 0
}

.slick-slide .bikes-desc, .slick-slide .bikes-tags
{
    opacity: 0
}

.slick-slide.slick-current .bikes-desc, .slick-slide.slick-current .bikes-tags
{
    opacity: 1
}

.bikes
{
    padding: 20px 0;
    transition: all .2s ease
}

.bikes.row
{
    margin-right: 0;
    margin-left: 0
}

.bikes-tags, .bikes-tags span
{
    transition: all .2s ease
}

.bikes-tags span
{
    height: 32px;
    display: inline-block;
    border-top: 2px solid #acacac;
    border-bottom: 2px solid #acacac;
    padding: 0 10px;
    position: relative;
    margin: 0 11px 11px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 900;
    font-family: trumpgothicpro,sans-serif
}

.bikes-tags span:after, .bikes-tags span:before
{
    content: "";
    width: 11px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
    height: 32px;
    position: absolute;
    top: -2px;
    transition: all .3s ease
}

.bikes-tags span:before
{
    background: url(hexalink_leftw.png);
    left: -10px
}

.bikes-tags span:after
{
    background: url(hexalink_rightw.png);
    right: -10px
}

.bikes-tags span strong
{
    margin: 0;
    font-family: trumpgothicpro,sans-serif;
    display: inline-block;
    height: 32px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 900;
    vertical-align: middle;
    text-transform: none;
    line-height: 28px
}

.bikes img
{
    max-width: 100%;
    margin: 0 auto
}

.bikes p
{
    padding-top: 10px;
    font-size: 12px !important;
    line-height: 16px;
    font-weight: 400;
    max-width: 100% !important;
    color: #333 !important
}

.bikes p strong
{
    text-transform: uppercase
}

.bikes .odd p
{
    text-align: left !important
}

.bikes .even h4, .bikes .even p
{
    text-align: right !important
}

.bike h4
{
    color: #333;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
    margin-top: 10px;
    transition: all .5s ease
}

.bike:active, .bike:focus
{
    outline: none
}

.bike .slick-current h4
{
    opacity: 1
}

.bike strong
{
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 11px
}

.bike > strong
{
    letter-spacing: 1px;
    font-size: 12px;
    margin-bottom: 10px;
    display: block
}

@media only screen and (min-width:768px)
{
    #bike-models header
    {
        padding: 50px 0
    }

    .bikes-tags
    {
        margin-top: 60px
    }

    .bikes-tags span
    {
        cursor: default
    }

    .bikes-tags.freerider span
    {
        color: hsla(0,0%,100%,.75)
    }

    .bikes-tags, .even .bikes-desc, .odd .bikes-desc
    {
        opacity: 0
    }

    .even .bikes-desc
    {
        padding: 15px 0;
        float: right
    }

    .even .bikes-desc span
    {
        float: right
    }

    .bikes:hover .bikes-desc, .bikes:hover .bikes-tags, .bikes:hover .wrapper-flex
    {
        opacity: 1
    }

    .bikes
    {
        padding: 20px 0;
        transition: all .2s ease
    }

    .bikes:hover
    {
        background: #efefef
    }

    .bikes img
    {
        max-width: 100%;
        margin-top: 25px
    }

    .bikes h1, .bikes h2, .bikes h4
    {
        font-size: 26px;
        font-weight: 800;
        margin-top: 50px;
        transition: all .3s ease;
        font-family: Open Sans,sans-serif
    }

    .bikes p
    {
        padding-top: 10px;
        font-size: 12px !important;
        line-height: 16px;
        font-weight: 400;
        max-width: 100% !important;
        color: #333 !important
    }

    .bikes p strong
    {
        text-transform: uppercase;
        position: relative;
        font-weight: 900;
        letter-spacing: 2px
    }

    .bikes .odd p
    {
        text-align: left !important
    }

    .bikes .even h2, .bikes .even h4, .bikes .even p
    {
        text-align: right !important
    }
}

@media (max-width:992px)
{
    .bikes, .bikes .even h1, .bikes .even h2, .bikes .even h4, .bikes .even p, .bikes .odd p
    {
        text-align: center !important
    }

    .bikes h1, .bikes h2, .bikes h4
    {
        margin-top: 30px
    }
}

@media only screen and (min-width:992px) and (max-width:1200px)
{
    .bikes h1, .bikes h2, .bikes h4
    {
        margin-top: 30px
    }
}

#bike-models
{
    padding-bottom: 40px
}

@media only screen and (min-width:768px) and (min-width:768px)
{
    .bikes-tags span strong
    {
        color: #7fb539
    }

    .bikes-tags span:hover
    {
        border-color: #7fb539
    }

    .bikes-tags span:hover:before
    {
        background: url(hexalink_green_left.png)
    }

    .bikes-tags span:hover:after
    {
        background: url(hexalink_green_right.png)
    }
}

.gallery
{
    padding: 0;
    position: relative;
    margin-left: 0;
    margin-right: 0
}

.gallery .half-photo, .gallery .half-text, .gallery .one-photo
{
    padding-left: 0;
    padding-right: 0;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
    min-height: 33.333vh
}

.gallery .half-text
{
    padding: 20px
}

.gallery .half-text p
{
    color: #333;
    font-size: 9px
}

.gallery h3
{
    text-align: left;
    font-size: 17px;
    margin-bottom: 10px;
    word-wrap: break-word
}

.gallery img
{
    width: 100%;
    max-height: 240px
}

.gallery .col-md-12
{
    padding-left: 0;
    padding-right: 0
}

@media only screen and (min-width:768px) and (max-width:992px)
{
    .gallery .photo1x2
    {
        height: 275px;
        background-size: cover !important;
        background-position: top 10% center !important
    }
}

@media only screen and (min-width:768px)
{
    .gallery
    {
        padding-top: 0;
        max-width: 1475px;
        margin: 0 auto
    }

    .gallery .row
    {
        margin-left: 0;
        margin-right: 0
    }

    .gallery .onephoto2x2, .gallery .photos2x2
    {
        height: 550px;
        padding-left: 0;
        padding-right: 0
    }

    .gallery .nophoto, .gallery .onephoto, .gallery .onetext
    {
        height: 275px;
        padding-left: 0;
        padding-right: 0
    }

    .gallery .photo1x2
    {
        height: 550px
    }

    .gallery .nophoto
    {
        pointer-events: none;
        z-index: -1
    }

    .gallery .onephoto, .gallery .onephoto2x2, .gallery .onetext, .gallery .photo1x2, .gallery .photos2x2
    {
        background-size: auto 100% !important;
        background-position: 50% !important;
        background-repeat: no-repeat !important;
        transition: all .5s ease
    }

    .gallery .onephoto2x2:hover, .gallery .onephoto:not(.noscale):hover, .gallery .photo1x2:not(.noscale):hover
    {
        background-size: auto 105% !important
    }

    .gallery .onetext
    {
        padding: 50px
    }

    .gallery .onetext h3
    {
        margin-bottom: 25px
    }

    .gallery .onetext p
    {
        line-height: 1.5;
        font-size: 11px
    }

    .gallery .col-md-3
    {
        padding: 0
    }

    .gallery img
    {
        width: 100%
    }
}

.instructions-hotspots
{
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 10px 30px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 40px;
    transform: translate(-50%,-50%);
    z-index: 999
}

.circle
{
    position: relative;
    border-radius: 50%;
    opacity: .9;
    display: block;
    width: 30px;
    height: 30px;
    z-index: 1;
    border: 7px solid hsla(0,0%,100%,.7);
    cursor: pointer;
    transition: all .3s ease-in-out
}

.circle + .tooltip
{
    opacity: 1 !important;
    z-index: 99999
}

.circle + .tooltip > .tooltip-inner
{
    float: left;
    margin-top: 10px;
    padding: 0;
    background-color: #fff;
    width: 100%;
    min-width: 100vw;
    max-width: 100%;
    border-radius: 0;
    text-align: left
}

.circle + .tooltip > .tooltip-inner img
{
    float: left;
    width: 150px;
    padding: 0 10px 0 0
}

.circle + .tooltip > .tooltip-inner h6
{
    font-size: 14px;
    font-weight: 800;
    color: #333;
    text-align: left;
    padding: 20px 0 0 5px;
    margin: 0;
    text-transform: uppercase
}

.circle + .tooltip > .tooltip-inner p
{
    font-size: 11px !important;
    line-height: 1;
    padding: 10px 0 10px 20px !important;
    text-align: left;
    color: rgba(51,51,51,.75);
    margin: 0 0 0 -15px
}

.circle-controller-young
{
    position: absolute;
    left: 60%;
    top: 34%
}

.circle-motor-young
{
    position: absolute;
    left: 43%;
    top: 57%
}

.circle-construction-young
{
    position: absolute;
    left: 29%;
    top: 33%
}

.circle-switch-young
{
    position: absolute;
    left: 63%;
    top: 10%
}

.circle-suspension-young
{
    position: absolute;
    left: 29%;
    top: 50%
}

.circle-fork-young
{
    position: absolute;
    left: 79%;
    top: 49%
}

.circle-battery-young
{
    position: absolute;
    left: 55%;
    top: 47%
}

.circle-brakes-young
{
    position: absolute;
    left: 82%;
    top: 68%
}

.circle-switch
{
    position: absolute;
    left: 63%;
    top: 10%
}

.circle-settings
{
    position: absolute;
    left: 55%;
    top: 47%
}

.circle-heart
{
    position: absolute;
    left: 61%;
    top: 23%
}

.circle-engine
{
    position: absolute;
    left: 45%;
    top: 52%
}

.circle-construction
{
    position: absolute;
    left: 52%;
    top: 45%
}

.circle-breaks
{
    position: absolute;
    left: 23%;
    top: 65%
}

.circle-battery
{
    position: absolute;
    left: 43%;
    top: 30%
}

.circle-rear
{
    position: absolute;
    left: 70%;
    top: 40%
}

.close-tooltip
{
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 41px;
    height: 41px;
    background: url(close_popup.png);
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important
}

@media only screen and (min-width:768px)
{
    .circle
    {
        position: relative;
        border-radius: 50%;
        opacity: .9;
        display: block;
        width: 30px;
        height: 30px;
        background: #ffd400;
        z-index: 1;
        border: 7px solid hsla(0,0%,100%,.7);
        cursor: pointer;
        transition: all .3s ease-in-out
    }

    .circle:hover
    {
        opacity: 1;
        border: 0 solid hsla(0,0%,100%,0);
        width: 40px;
        height: 40px;
        margin-left: -5px;
        margin-top: -5px
    }

    .circle + .tooltip
    {
        opacity: 1 !important
    }

    .circle + .tooltip > .tooltip-inner
    {
        float: left;
        margin-top: 10px;
        padding: 0;
        background-color: #fff;
        width: 400px;
        min-width: 300px !important;
        max-width: 550px !important;
        border-radius: 0
    }

    .circle + .tooltip > .tooltip-inner img
    {
        float: left;
        width: 150px;
        padding: 0 10px 0 0
    }

    .circle + .tooltip > .tooltip-inner h6
    {
        font-size: 14px;
        font-weight: 800;
        color: #333;
        text-align: left;
        padding-top: 10px
    }

    .circle + .tooltip > .tooltip-inner p
    {
        font-size: 12px !important;
        width: 100% !important;
        line-height: 13px;
        padding-top: 10px
    }

    .circle.circle-controller-young
    {
        position: absolute;
        left: 60%;
        top: 34%
    }

    .circle.circle-motor-young
    {
        position: absolute;
        left: 43%;
        top: 57%
    }

    .circle.circle-construction-young
    {
        position: absolute;
        left: 40%;
        top: 38%
    }

    .circle.circle-switch-young
    {
        position: absolute;
        left: 63%;
        top: 10%
    }

    .circle.circle-suspension-young
    {
        position: absolute;
        left: 37%;
        top: 50%
    }

    .circle.circle-fork-young
    {
        position: absolute;
        left: 70%;
        top: 47%
    }

    .circle.circle-battery-young
    {
        position: absolute;
        left: 55%;
        top: 47%
    }

    .circle.circle-brakes-young
    {
        position: absolute;
        left: 73%;
        top: 65%
    }

    .circle.circle-switch
    {
        position: absolute;
        left: 63%;
        top: 10%
    }

    .circle.circle-settings
    {
        position: absolute;
        left: 55%;
        top: 47%
    }

    .circle.circle-heart
    {
        position: absolute;
        left: 61%;
        top: 23%
    }

    .circle.circle-engine
    {
        position: absolute;
        left: 45%;
        top: 52%
    }

    .circle.circle-construction
    {
        position: absolute;
        left: 52%;
        top: 45%
    }

    .circle.circle-breaks
    {
        position: absolute;
        left: 23%;
        top: 65%
    }

    .circle.circle-battery
    {
        position: absolute;
        left: 43%;
        top: 30%
    }

    .circle.circle-rear
    {
        position: absolute;
        left: 70%;
        top: 40%
    }
}

.instructions-hotspots
{
    background: rgba(127,181,57,.9);
    color: #fff
}

.circle
{
    background: #7fb539
}

.close-tooltip
{
    background: url(close_popup_g.png)
}

.freeriderstreet #phone-app
{
    background-color: #1dc3ea
}

.app #phone-app
{
    background: #191913
}

.app #phone-app .slick-dotted.slick-slider
{
    margin-top: -140px
}

#phone-app header img
{
    max-width: 80%;
    display: block;
    margin: 0 auto
}

#phone-app
{
    padding: 40px 0 0;
    position: relative
}

#phone-app .row
{
    margin-right: 0;
    margin-left: 0
}

.feature .media-body
{
    opacity: 0;
    transition: all .5s ease
}

.feature.slick-current .media-body
{
    opacity: 1
}

.feature .media-heading
{
    color: #fff;
    font-size: 14px;
    line-height: 1;
    max-width: 100%;
    margin: 0 auto;
    text-align: left
}

.feature .media-body p
{
    display: none;
    padding-top: 10px
}

.feature .media-body
{
    color: #333;
    text-align: left
}

.feature:hover > .media-body
{
    color: #333;
    opacity: 1
}

.feature:hover > .media-body p
{
    display: block
}

.feature .media-body > div.col-xs-3
{
    background: url(hexa_w.png);
    background-size: auto 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center
}

.feature .media-body p
{
    display: block;
    line-height: 16px;
    max-width: 100%;
    font-size: 12px;
    padding: 10px 0 0
}

.app .feature .media-body p
{
    color: #fff
}

.media-body .col-xs-2
{
    padding-right: 5px;
    padding-left: 0
}

.media-body img
{
    max-height: 36px
}

@media only screen and (min-width:768px)
{
    #phone-app
    {
        padding-top: 80px
    }

    #phone-app h2
    {
        font-size: 42px;
        line-height: 46px;
        font-weight: 800
    }

    div.media-body p
    {
        color: #f5f5f5
    }

    .feature .media-heading
    {
        font-size: 16px;
        line-height: 20px;
        max-width: 180px;
        text-align: center
    }

    .feature .media-body
    {
        opacity: .5;
        transition: all .3s linear;
        text-align: center
    }

    .feature .media-body p
    {
        visibility: hidden;
        line-height: 16px;
        font-size: 12px;
        padding-top: 10px;
        height: 0;
        transition: all .3s linear
    }

    .feature:hover .media-body
    {
        opacity: 1
    }

    .feature:hover .media-body p
    {
        visibility: visible;
        height: 100%
    }
}

#phone-app
{
    background-color: #7fb539
}

#phone-app h2, #phone-app p
{
    color: #fff
}

@media only screen and (min-width:768px)
{
    #phone-app
    {
        background: #7fb539 radial-gradient(ellipse at center,#98c361 0,#98c361 25%,#7fb539 100%)
    }
}

#streamport
{
    background-size: cover;
    background: url(streamport_bg_mob.png) no-repeat 50% 75%;
    min-height: 100vh;
    position: relative;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between
}

#streamport h2
{
    color: #fff;
    margin-bottom: 40px
}

#streamport a
{
    color: #fff
}

#streamport p
{
    color: hsla(0,0%,100%,.75);
    font-size: 12px;
    max-width: 90%;
    margin: 0 auto
}

#streamport p.streamport-warning
{
    color: #fff
}

#streamport .hexa-like-link, #streamport .hexa-link
{
    padding: 6px 20px;
    line-height: 1.4
}

#streamport > div
{
    display: flex;
    flex-direction: column;
    align-items: center
}

.hexa-info, a.hexa-like-link, a.hexa-link
{
    display: inline-block;
    padding: 6px;
    background: transparent;
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
    border: 2px solid transparent;
    border-left: 0;
    border-right: 0;
    text-align: center;
    height: 32px;
    letter-spacing: 1px;
    position: relative;
    font-size: 11px
}

.hexa-info, a.hexa-link
{
    border-color: #ffd400
}

a.hexa-link
{
    margin-right: 10%
}

.hexa-info
{
    margin: 20px 0
}

.young-hero .hexa-info, .young-hero a.hexa-link
{
    border-color: #7fb539
}

.racing .hexa-info, .racing a.hexa-link
{
    border-color: #da1f3d
}

.hexa-info:after, .hexa-info:before, a.hexa-link:after, a.hexa-link:before
{
    content: "";
    width: 13px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
    height: 32px;
    position: absolute;
    top: -2px;
    transition: all .3s ease
}

.hexa-info:before, a.hexa-link:before
{
    background: url(hexalink_left.png);
    left: -10px
}

.hexa-info:after, a.hexa-link:after
{
    background: url(hexalink_right.png);
    right: -10px
}

.young-hero .hexa-info:before, .young-hero a.hexa-link:before
{
    background: url(hexalink_green_left.png)
}

.young-hero .hexa-info:after, .young-hero a.hexa-link:after
{
    background: url(hexalink_green_right.png)
}

.racing .hexa-info:before, .racing a.hexa-link:before
{
    background: url(hexalink_red_left.png)
}

.racing .hexa-info:before, .racing a.hexa-link:after
{
    background: url(hexalink_red_right.png)
}

a.hexa-like-link .yellow-arrow
{
    margin-top: -2px;
    margin-left: 5px;
    transition: all .2s ease
}

@media only screen and (min-width:768px)
{
    #streamport
    {
        background-image: url(streamport_bg.png);
        background-position: 50%;
        background-size: cover;
        min-height: 540px;
        padding-top: 80px
    }

    #streamport a:hover
    {
        color: #ffd400
    }

    #streamport p
    {
        font-size: 14px;
        margin-top: 20px;
        max-width: unset
    }

    #streamport p.streamport-warning
    {
        position: relative;
        max-width: 380px;
        margin: 10px 0 40px
    }

    #streamport p.streamport-warning img
    {
        height: 30px;
        float: left;
        margin-right: 15px;
        margin-top: 7px
    }

    .hexa-info, a.hexa-like-link, a.hexa-link
    {
        width: 190px;
        padding: 10px;
        margin-right: 40px;
        height: 44px
    }

    a.hexa-like-link
    {
        width: auto;
        margin-left: -10px
    }

    .hexa-info
    {
        width: auto;
        margin-left: 15px;
        margin-top: 20px;
        margin-bottom: 20px
    }

    .hexa-info:after, .hexa-info:before, a.hexa-link:after, a.hexa-link:before
    {
        width: 15px;
        height: 44px
    }

    .hexa-info:before, a.hexa-link:before
    {
        left: -15px
    }

    .hexa-info:after, a.hexa-link:after
    {
        right: -15px
    }

    a.hexa-like-link:active, a.hexa-like-link:focus, a.hexa-like-link:hover, a.hexa-link:active, a.hexa-link:focus, a.hexa-link:hover
    {
        color: #ffd400
    }

    .young-hero a.hexa-like-link:hover, .young-hero a.hexa-link:hover
    {
        color: #7fb539
    }

    .racing a.hexa-like-link:hover, .racing a.hexa-link:hover
    {
        color: #da1f3d
    }

    a.hexa-like-link .yellow-arrow
    {
        margin-left: 10px
    }

    a.hexa-like-link:hover .yellow-arrow
    {
        transform: translateX(5px)
    }
}

@media only screen and (min-width:768px) and (max-width:992px)
{
    a.hexa-link
    {
        margin-left: 40px
    }
}

@media only screen and (min-width:992px) and (max-width:1200px)
{
    body:not([data-lang=en]) .hexa-info
    {
        font-size: 12px
    }
}

.table-hover
{
    position: relative
}

.table-hover tr
{
    height: 40px;
    line-height: 40px
}

.table-hover td
{
    width: 50%
}

.table-hover tbody tr td:first-child
{
    text-transform: uppercase;
    font-weight: 800;
    max-width: 50%;
    padding-left: 0
}

.table-hover tbody tr td:last-child
{
    text-align: right;
    padding-left: 0
}

.table-hover tbody tr:last-child
{
    border-bottom: 1px solid #ddd
}

@media only screen and (min-width:768px)
{
    .table-hover tr
    {
        height: 50px;
        line-height: 50px;
        transition: all .2s ease
    }

    .table-hover td
    {
        transition: all .2s ease;
        vertical-align: middle
    }

    .table-hover tbody tr td:first-child
    {
        padding-left: 20px
    }

    .table-hover tbody tr td:first-child:before
    {
        content: "";
        width: 12px;
        height: 12px;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        vertical-align: middle;
        margin-left: -20px;
        margin-right: 10px;
        display: none
    }

    .table-hover tbody tr td:last-child
    {
        text-align: left;
        padding-left: 20px
    }

    .table-hover tbody tr:hover
    {
        background: #000;
        background-size: cover
    }

    .table-hover tbody tr:hover td:first-child
    {
        padding-left: 40px
    }

    .table-hover tbody tr:hover td:first-child:before
    {
        display: inline-block
    }

    .table-hover tbody tr:hover td
    {
        color: #fff
    }
}

.bike-specifications, .bike-specifications--hero
{
    padding: 40px 0
}

.ExtendedDesc .bike-specifications--hero p, .ExtendedDesc .bike-specifications p
{
    color: #fff
}

@media only screen and (min-width:768px)
{
    .bike-specifications, .bike-specifications--hero
    {
        background-color: #000;
        background-position: top;
        padding: 100px 0;
        margin-top: 0
    }

    .bike-specifications--hero h2, .bike-specifications h2
    {
        font-size: 42px;
        text-align: center
    }
}

.bike-specifications--hero
{
    background-image: url(specbg-hero.png)
}

.bike-specifications--hero h2
{
    color: #7fb539
}

.bike-pills li.active a, .bike-pills li.active a:focus
{
    background-image: url(hexaback_green.svg)
}

@media only screen and (min-width:768px)
{
    .table-hover tbody tr td:first-child:before
    {
        background-image: url(green_arrow_right.png)
    }

    .table-hover tbody tr:hover
    {
        background: linear-gradient(90deg,transparent 0,rgba(127,181,57,.43) 50%,transparent)
    }
}

@font-face
{
    font-family: RustyColaPen;
    src: url(/fonts/RustyColaPen-Regular.woff) format("woff"),url(/fonts/RustyColaPen-Regular.ttf) format("truetype")
}

@font-face
{
    font-family: GilmerBold;
    src: url(/fonts/Gilmer-Bold.woff) format("woff")
}

@font-face
{
    font-family: GilmerHeavy;
    src: url(/fonts/Gilmer-Heavy.woff) format("woff")
}

@font-face
{
    font-family: GilmerMedium;
    src: url(/fonts/Gilmer-Medium.woff) format("woff")
}

@font-face
{
    font-family: GilmerRegular;
    src: url(/fonts/Gilmer-Regular.woff) format("woff")
}

@font-face
{
    font-family: GilmerLight;
    src: url(/fonts/Gilmer-Light.woff) format("woff")
}

.bike-pills
{
    margin: 0 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0
}

.bike-pills li.active a, .bike-pills li.active a:focus
{
    background-size: 65px !important;
    background-repeat: no-repeat !important;
    background-position: top 15px center !important
}

.bike-pills li.active .name, .bike-pills li.active img, .bike-pills li.active img:focus
{
    opacity: 1
}

.bike-pills a
{
    display: block;
    padding: 10px 15px;
    transition: none
}

.bike-pills .name
{
    color: #fff;
    opacity: .5;
    text-align: center;
    font-weight: 900;
    font-size: 12px;
    margin: 15px auto 0;
    transition: opacity .2s ease
}

.bike-pills img
{
    opacity: .5;
    transition: opacity .3s linear
}

.bike-pills:not(.pills-height) img
{
    max-height: 36px;
    width: 100%;
    display: block;
    margin: 15px 0 0 auto
}

@media only screen and (min-width:768px)
{
    .bike-pills
    {
        margin-top: 40px
    }

    .bike-pills li
    {
        width: 200px
    }

    .bike-pills li.active a, .bike-pills li.active a:focus
    {
        background-size: 95px !important;
        background-position: top 10px center !important
    }

    .bike-pills .name
    {
        margin-top: 20px;
        font-size: 16px
    }

    .bike-pills:not(.pills-height) img
    {
        max-height: 70px;
        margin-top: 12px
    }
}

.download-section
{
    padding: 80px 0;
    background: #fff
}

.download-section h2
{
    font-size: 42px;
    line-height: 46px;
    font-weight: 800;
    color: #333;
    margin-bottom: 20px
}

.download-section h2 + p
{
    color: #777
}

.download-section header p
{
    max-width: 450px;
    line-height: 1.5;
    margin: 0 auto
}

.download-section .bike-pills .name
{
    color: #000
}

#support
{
    margin-top: 40px
}

#support p
{
    padding: 0
}

#support p img
{
    width: 90%
}

#support .sup-item
{
    font-family: trumpgothicpro,sans-serif;
    position: relative;
    text-transform: uppercase;
    text-align: left;
    padding: 0;
    margin-bottom: 2px;
    background-color: #fff
}

#support .sup-item:before
{
    content: "";
    display: block;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .5;
    height: 32px;
    width: 34px;
    background-repeat: no-repeat;
    background-position: 0;
    background-size: contain;
    margin: 0 0 5px
}

#support .sup-item .skew p
{
    color: #000;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    min-height: 30px;
    padding: 20px 20px 20px 80px;
    letter-spacing: 1px
}

#support .sup-item .download-text
{
    text-transform: uppercase;
    font-family: Open Sans,sans-serif;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 10px;
    height: 20px;
    transition: opacity .2s ease;
    overflow: hidden
}

@media only screen and (min-width:768px)
{
    .download-section h2
    {
        font-size: 48px
    }

    #support
    {
        margin-top: 40px
    }

    #support .sup-item
    {
        padding: 10px;
        z-index: 100;
        margin-bottom: 0;
        width: 25%
    }

    #support .sup-item img
    {
        margin-bottom: 10px
    }

    #support .sup-item:before
    {
        left: 0;
        transform: none;
        position: relative;
        opacity: 1;
        margin: 0;
        height: 41px;
        width: 36px;
        transition: all .2s ease
    }

    #support .sup-item .skew p
    {
        width: 100%;
        min-height: 70px;
        font-size: 20px;
        line-height: 1.2;
        color: #777;
        transition: all .2s ease;
        border-bottom: 1px solid rgba(54,54,54,.71);
        padding: 10px 0
    }

    #support .sup-item:hover img:not(.download-arrow)
    {
        display: none
    }

    #support .sup-item .download-text
    {
        letter-spacing: 4px;
        font-size: 14px;
        opacity: 0;
        transition: opacity .2s ease;
        color: #000
    }

    #support .sup-item .download-arrow
    {
        vertical-align: middle;
        margin-bottom: 2px;
        margin-left: 5px;
        opacity: 0;
        transition: all .2s ease
    }

    #support .sup-item:hover .download-arrow, #support .sup-item:hover .download-text
    {
        opacity: 1;
        display: inline-block
    }

    #support .sup-item:hover .download-text
    {
        margin-bottom: -5px
    }

    #support .sup-item:hover .download-arrow
    {
        animation: elevator 1.5s linear 0s infinite forwards
    }
}

@keyframes elevator
{
    0%
    {
        transform: translateY(0);
        opacity: 1
    }

    49%
    {
        transform: translateY(25px) translateX(0);
        opacity: 1
    }

    50%
    {
        opacity: 0;
        transform: translateY(25px) translateX(50px)
    }

    51%
    {
        transform: translateY(-25px) translateX(0);
        opacity: 1
    }

    to
    {
        transform: translateY(0)
    }
}

#support .sup-item:before
{
    background-image: url(download_doc_b.png)
}

@media only screen and (min-width:768px)
{
    #support .sup-item:hover .skew p
    {
        color: #000
    }

    #support .sup-item:hover:before
    {
        background-image: url(download_doc_g.png);
        box-shadow: 0 0 50px 0 rgba(126,180,57,.25)
    }
}
/*# sourceMappingURL=hero.css.map */