/*---------------------------------------------------------------------------------------------------/
TYPOGRAPHY
/---------------------------------------------------------------------------------------------------*/
body {
    font-family: "Open Sans", arial, sans-serif;
    color: #111;
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/*----------------------------------------------------------------------------------------------------
    CONTNET FONT STYLE
/---------------------------------------------------------------------------------------------------*/
.section-content {
    text-align: center;
    font-weight: 300;
    font-size: 18px;
}

.row.equal {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .row.equal {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .section-content {
        text-align: center;
        font-weight: 300;
        font-size: 18px;
    }
}

.feature-content {
    color: #777;
    line-height: 1.8;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.05em;
}

/*----------------------------------------------------------------------------------------------------
    PARALLAX EFFECT
/---------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------
    ITEM STYLES
/---------------------------------------------------------------------------------------------------*/
.feature-icon {
    font-size: 52px;
    line-height: 1.3;
    color: #111;
}

/*----------------------------------------------------------------------------------------------------
    IMAGES
/---------------------------------------------------------------------------------------------------*/
.profile-small-50 {
    width: 50%;
    max-width: 180px;
}

#how-it-works {
    text-align: center;
}

a.hover-fade img:hover {
    opacity: 0.7;
    transition: all 0.6s cubic-bezier(0, 0, 0.58, 1);
}

a.hover-fade img {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
}

/*----------------------------------------------------------------------------------------------------
    HEADER
/---------------------------------------------------------------------------------------------------*/

.navbar-brand img{
    width: 100px;
}

nav.navbar-light .logo-dark {
    display: none;
}

nav.navbar-dark .logo-light {
    display: none;
}

/*CTA Menu button*/
nav.navbar-light .navbar-nav a.nav-link,
nav.navbar-light .navbar-nav a.btn-outline-primary {
    color: rgba(255, 255, 255, 0.7);
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    letter-spacing: 2px;
    font-size: 11px;
    border-color: rgba(255, 255, 255, 0.7);
}

nav.navbar-light .navbar-header span{
    display: none;
}

nav.navbar-dark .navbar-nav a.nav-link,
nav.navbar-dark .navbar-nav a.btn-outline-primary {
    color: rgba(0, 0, 0, 0.7);
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    letter-spacing: 2px;
    font-size: 11px;
    border-color: rgba(0, 0, 0, 0.7);
}

    nav.navbar-light .navbar-nav a.btn-outline-primary:hover,
    nav.navbar-dark .navbar-nav a.btn-outline-primary:hover {
        background-color: transparent;
    }

/*Actiuve menu item*/
nav.navbar-light .navbar-nav .nav-item.active a.nav-link,
nav.navbar-light .navbar-nav a.nav-link:hover,
nav.navbar-light .navbar-nav a.nav-link:focus,
nav.navbar-light .navbar-nav a.btn-outline-primary:hover {
    color: white;
    border-color: white;
}

nav.navbar-dark .navbar-nav .nav-item.active a.nav-link,
nav.navbar-dark .navbar-nav a.nav-link:hover,
nav.navbar-dark .navbar-nav a.nav-link:focus,
nav.navbar-dark .navbar-nav a.btn-outline-primary:hover {
    color: #111;
    border-color: #111;
}

a.nav-link.selected{
    font-weight: bold;
}

#exCollapsingNavbar {
    position: relative;
    top: 1px;
    float: right;
}

@media only screen and (max-width: 768px) {
    #exCollapsingNavbar {
        float: right;
        clear: both;
        background-color: rgba(0, 0, 0, 0.9);
        padding: 10px 20px 10px 20px;
    }

    nav.navbar-dark #exCollapsingNavbar {
        float: right;
        clear: both;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 20px 10px 20px;
    }

    nav.headroom--not-top #exCollapsingNavbar {
        float: right;
        clear: both;
        background-color: transparent;
        padding: 10px 20px 10px 20px;
    }
}

/*Toggle button*/
nav.navbar-light .navbar-toggler {
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255,255,255, .7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>");
    border-color: rgba(255, 255, 255, 0.7);
}

nav.navbar-dark .navbar-toggler {
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0,0,0, .7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/></svg>");
    border-color: rgba(0, 0, 0, 0.7);
}

    nav.navbar-light .navbar-toggler:focus, nav.navbar-light .navbar-toggler:active,
    nav.navbar-dark .navbar-toggler:focus, nav.navbar-dark .navbar-toggler:active {
        outline: none;
    }

/*Headroom adjustments*/
nav.navbar-light,
nav.navbar-dark {
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    padding-top: 10px;
    padding-bottom: 10px;
}

nav.navbar-light,
nav.navbar-dark {
    background-color: transparent;
}

    nav.navbar-light.solid {
        background-color: #111;
    }

    nav.navbar-dark.solid {
        background-color: white;
    }

    nav.navbar-light.headroom--not-top {
        background-color: rgba(0, 0, 0, 0.8);
        padding-top: 5px;
        padding-bottom: 5px;
    }

    nav.navbar-dark.headroom--not-top {
        background-color: rgba(255, 255, 255, 0.8);
        padding-top: 5px;
        padding-bottom: 5px;
    }

nav.solid.orange {
    background-color: #45b1e2;
    color: white;
}
/*----------------------------------------------------------------------------------------------------
    BUTTONS
/---------------------------------------------------------------------------------------------------*/
.btn.btn-white {
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    border-color: white;
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
}

    .btn.btn-white:hover,
    .btn.btn-white:active {
        border-color: white;
        background-color: white;
        color: black;
    }

.btn.btn-black {
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    border-color: #111;
    color: #111;
    margin-top: 5px;
    margin-bottom: 5px;
}

.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active {
    background-color: transparent;
}

.btn.btn-black:hover,
.btn.btn-black:active,
.btn.btn-black.selected {
    border-color: #111;
    background-color: #111;
    color: white;
}

.rotate {
    display: none;
}

/*----------------------------------------------------------------------------------------------------
    LOGO
/---------------------------------------------------------------------------------------------------*/
.bb-logo,
nav.navbar-light a.bb-logo,
nav.navbar-light a.bb-logo:hover {
    text-transform: uppercase;
    font-family: 'Yanone Kaffeesatz', Dosis, sans-serif;
    border: white 1px solid;
    display: inline;
    padding: 4px;
    color: white;
    line-height: 1;
    letter-spacing: 0.15em;
}

nav.navbar-dark a.bb-logo,
nav.navbar-dark a.bb-logo:hover {
    text-transform: uppercase;
    font-family: 'Yanone Kaffeesatz', Dosis, sans-serif;
    border: #111 1px solid;
    display: inline;
    padding: 4px;
    color: #111;
    line-height: 1;
    letter-spacing: 0.15em;
}

@media only screen and (max-width: 768px) {
    .bb-logo {
        position: relative;
        top: 5px;
    }
}

/*----------------------------------------------------------------------------------------------------
    GENERAL
/---------------------------------------------------------------------------------------------------*/
.btn-spacer {
    display: inline-block;
    width: 10px;
}

a:hover{
    text-decoration: none;
    opacity: 0.8;
}

.validation-error {
    color: #aa6708;
}

.section-heading {
    text-transform: uppercase;
    letter-spacing: 0.45em;
    font-size: 24px;
}

.section-subheading {
    text-transform: uppercase;
    letter-spacing: 0.45em;
    font-size: 18px;
}

.section-subheading-alt {
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 16px;
}

.ft-grey {
    color: #aaa;
}

.white {
    color: white !important;
}

.bg-white {
    background-color: #FFFFFF;
}

.bg-light-grey {
    background-color: #f7f4f2;
}

.bg-dark-grey {
    background-color: #111;
}

.pos-rel {
    position: relative;
}

#register-subscribe {
    position: relative;
    left: -15px;
}

@media only screen and (max-width: 768px) {
    #whats-in-the-bag, #whats-in-the-bag .section-heading, #whats-in-the-bag .feature-content, #whats-in-the-bag .section-content {
        text-align: center;
    }

    .btn-lg{
        width: 100%;
    }

    #register-subscribe {
        position: relative;
        left: 0;
    }
}

.half-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
}

    .half-bg.image-01 {
        background-image: url("/content/images/hero/whats-inside.jpg");
    }

    .half-bg.image-02 {
        background-image: url("/content/images/hero/snowy-02b.jpg");
    }

.half-bg-left {
    right: initial;
    left: 0;
}

@media only screen and (max-width: 768px) {
    #old-dog-new-tricks,
    #old-dog-new-tricks .section-heading,
    #old-dog-new-tricks .feature-content,
    #old-dog-new-tricks .section-content {
        text-align: center;
    }

    .btn-spacer {
        display: block;
        width: 10px;
    }
}

/*----------------------------------------------------------------------------------------------------
    OWL CAROSEL CONTROLS
/---------------------------------------------------------------------------------------------------*/
.owl-carousel {
    overflow: hidden;
}

.owl-next {
    right: -50px;
}

.owl-prev {
    left: -50px;
}

.owl-prev, .owl-next {
    display: block;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 50%;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 32px;
    text-align: center;
    color: #111;
    z-index: 1000;
    border-radius: 50%;
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
}

.owl-carousel:hover .owl-prev {
    opacity: 1;
    left: -10px;
}

.owl-carousel:hover .owl-next {
    opacity: 1;
    right: -10px;
}

.ft-alt {
    font-family: Dosis, arial, sans-serif;
}

.ft-caps {
    text-transform: uppercase;
}

.ft-80 {
    font-size: 80px;
}

.ft-24 {
    font-size: 24px;
}

.ft-16 {
    font-size: 16px;
}

.ft-12 {
    font-size: 12px;
}

.ft-300 {
    font-weight: 300;
}

.ft-dark {
    color: #111;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

a.light {
    color: rgba(255, 255, 255, 0.7);
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
}

    a.light:hover {
        color: white;
        text-decoration: none;
    }

/*----------------------------------------------------------------------------------------------------
    SPACING
/---------------------------------------------------------------------------------------------------*/
.mb-20, .mv-20 {
    margin-bottom: 20px;
}

.mb-40, .mv-40 {
    margin-bottom: 40px;
}

.mb-80, .mv-80 {
    margin-bottom: 80px;
}

.mb-120, .mv-120 {
    margin-bottom: 120px;
}

.mt-20, .mv-20 {
    margin-top: 20px;
}

.mt-40, .mv-40 {
    margin-top: 40px;
}

.mt-80, .mv-80 {
    margin-top: 80px;
}

.mt-120, .mv-120 {
    margin-top: 120px;
}

.pb-10, .pv-10 {
    padding-bottom: 10px;
}

.pb-20, .pv-20 {
    padding-bottom: 20px;
}

.pb-40, .pv-40 {
    padding-bottom: 40px;
}

.pb-80, .pv-80 {
    padding-bottom: 80px;
}

.pb-120, .pv-120 {
    padding-bottom: 120px;
}

.pt-10, .pv-10 {
    padding-top: 10px;
}

.pt-20, .pv-20 {
    padding-top: 20px;
}

.pt-40, .pv-40 {
    padding-top: 40px;
}

.pt-80, .pv-80 {
    padding-top: 80px;
}

.pt-120, .pv-120 {
    padding-top: 120px;
}

/*----------------------------------------------------------------------------------------------------
    HERO IMAGE
/---------------------------------------------------------------------------------------------------*/

#page-hero {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    display: table;
}

    #page-hero.image-02 {
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("/content/images/hero/image-02.jpg");
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("/content/images/hero/image-02.jpg");
    }

    #page-hero .hero-content {
        text-align: center;
        width: 100%;
        color: white;
        display: table-cell;
        vertical-align: middle;
        padding-top: 100px;
    }

        #page-hero .hero-content h2 {
            font-size: 16px;
            letter-spacing: 0.35em;
            font-family: Dosis, arial, sans-serif;
            text-transform: uppercase;
        }

        #page-hero .hero-content h1 {
            font-size: 46px;
            font-weight: bold;
            text-transform: uppercase;
            padding: 50px;
            padding-top: 30px;
        }

@media only screen and (max-width: 768px) {
    #page-hero .hero-content h1 {
        font-size: 30px;
        padding: 46px;
        padding: 0;
        margin: 0;
        padding-top: 30px;
    }

    #page-hero .hero-content {
        padding-top: 0;
    }
}

.scroll-down {
    width: 100%;
    text-align: center;
    height: 0;
    position: relative;
    top: -50px;
}

    .scroll-down a {
        border-radius: 50%;
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.6);
        color: #111;
        width: 25px;
        height: 25px;
        line-height: 25px;
    }

.bg-cover{
    background-position: center center;
    background-size: cover;
}

/*----------------------------------------------------------------------------------------------------
    PARALLAX IMAGE
/---------------------------------------------------------------------------------------------------*/
.parallax-window {
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.parallax-window.image-04 {
    background-image: url("/content/images/parallax/image-04.jpg");
}

/*----------------------------------------------------------------------------------------------------
    CHECKOUT NAV
/---------------------------------------------------------------------------------------------------*/

#checkout-nav {
    overflow: hidden;
    border-bottom: 1px solid #999;
    position: relative;
}



    #checkout-nav a:hover,
    #checkout-nav a.selected {
        color: #111;
        text-decoration: none;
        border-bottom: 3px solid #999;
    }

    #checkout-nav a:hover {
        background-color: #f7f4f2;
    }

    #checkout-nav a {
        color: #111;
        display: inline-block;
        width: 100%;
    }



label.bb-oversize {
    font-size: 2em;
}

.checkbox label:hover {
    cursor: pointer !important;
}

input, select.form-control{
    height: 49px !important;
}

.bold{
    font-weight: bold;
}

.headline-border {
    border-bottom: 1px solid #dcdcdc;
}

.hidden{
    display: none;
}

.select2-search__field{
    height: initial !important;
}

.panel {
    border: 1px rgba(0, 0, 0, 0.4) solid;
    border-radius: 5px;
    padding: 10px;
}

h4.subheading {
    color: rgba(0, 0, 0, 0.7);
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
    letter-spacing: 2px;
    font-size: 11px;
}

.panel {
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    text-align: center;
}

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 2;
}

    /* Hide the tooltip content by default */
    [data-tooltip]:before,
    [data-tooltip]:after {
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        pointer-events: none;
    }

    /* Position tooltip above the element */
    [data-tooltip]:before {
        position: absolute;
        bottom: 150%;
        left: 50%;
        margin-bottom: 5px;
        margin-left: -80px;
        padding: 7px;
        width: 160px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #fff;
        content: attr(data-tooltip);
        text-align: center;
        font-size: 14px;
        line-height: 1.2;
    }

    /* Triangle hack to make tooltip look like a speech bubble */
    [data-tooltip]:after {
        position: absolute;
        bottom: 150%;
        left: 50%;
        margin-left: -5px;
        width: 0;
        border-top: 5px solid #000;
        border-top: 5px solid hsla(0, 0%, 20%, 0.9);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
    }

    /* Show tooltip content on hover */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }

    
cite{
    bottom: -0.25em;
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
    
cite a{
    text-decoration: none;
}
    
alert{
   padding: 40px 25px 30px 60px;
    margin-bottom: 20px;
    position: relative;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background-color: #65adc9;
    color: #fff;
    display: block;
}

alert a, alert a:visited, alert a:hover{
    color: #fff;
}

alert span {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 8px;
    color: #fafafa;
    font-size: 13px;
    background: rgba(0,0,0,0.2);
    -webkit-border-radius: 1px 0 1px 0;
    -moz-border-radius: 1px 0 1px 0;
    border-radius: 1px 0 1px 0;
}
    
alert a.btn{
    margin-top: 15px;
    display: inline-block;
    background-color: #ffffff;
    color: #111;
    border-radius: 0;
    text-decoration: none;
    padding: 6px 12px;
    font-weight: bold;
}

b, strong{
    font-weight: bold !important;
}

blockquote {
    padding: 0 1.6em;
    border-left: #dfe1e3 .6em solid;
}


em{
  color: #777 !important;
}