/* ==========================================================================
   tab bar START
   ========================================================================== */

.tabbar-wrapper {
    background-color: transparent;
    -webkit-transition: height 150ms ease-out;
    transition: height 150ms ease-out;
    z-index: 800;
    margin-top:5%;
}

.tabbar-wrapper .tabbar {
    background-color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
    color: #323237;
    opacity:0.8;
}

a.active.faster {
    background-color: #0069d2;
    border-left-color: #0069d2;
    border-right-color: #0069d2;
}

.tabbar-wrapper .tabbar a:hover, .tabbar-wrapper .tabbar a.active {
    display: block;
    color: #fff;
}

.tabbar-wrapper .tabbar a:link, .tabbar-wrapper .tabbar a:active {
    text-decoration: none;
}

.tabbar-wrapper .tabbar a {
    margin: 0 -1px;
    display: block;
    font-family: "graphik-light","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.8rem;
    text-align: center;
    color: #323237;
    padding: 39px 0 37px;
    border-bottom: 0;
    overflow: hidden;
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    -webkit-transition-property: padding,background-color,color;
    transition-property: padding,background-color,color;
    white-space: nowrap;
}

.tabbar-wrapper .tabbar .row div {
    padding: 0;
}
.tabbar-wrapper .tabbar .col-sm-3, .tabbar-wrapper .tabbar .col-sm-2 {
    border-right: 1px solid #f1f3f3;
    border-left: 1px solid #f1f3f3;
}

.tabbar-wrapper .tabbar a:hover.vertical:hover, .tabbar-wrapper .tabbar a.active.vertical:hover {
    color: #fff;
}
.tabbar-wrapper .tabbar a:hover.vertical, .tabbar-wrapper .tabbar a.active.vertical {
    background-color: #f7a541;
    border-left-color: #f7a541;
    border-right-color: #f7a541;
}

.tabbar-wrapper .tabbar a:hover.horizontal:hover, .tabbar-wrapper .tabbar a.active.easier:hover {
    color: #fff;
}
.tabbar-wrapper .tabbar a:hover.horizontal, .tabbar-wrapper .tabbar a.active.easier {
    background-color: #c10607;
    border-left-color: #c10607;
    border-right-color: #c10607;
}

.tabbar-wrapper .tabbar a:hover.pool:hover, .tabbar-wrapper .tabbar a.active.pool:hover {
    color: #fff;
}

.tabbar-wrapper .tabbar a:hover.pool, .tabbar-wrapper .tabbar a.active.pool {
    background-color: #c0df16;
    border-left-color: #c0df16;
    border-right-color: #c0df16;
}

.tabbar-wrapper .tabbar a:hover.air:hover, .tabbar-wrapper .tabbar a.active.air:hover {
    color: #fff;
}

.tabbar-wrapper .tabbar a:hover.air, .tabbar-wrapper .tabbar a.active.air {
    background-color: #00c3e5;
    border-left-color: #00c3e5;
    border-right-color: #00c3e5;
}

.tabbar-wrapper .tabbar a:hover.water:hover, .tabbar-wrapper .tabbar a.active.faster:water {
    color: #fff;
}

.tabbar-wrapper .tabbar a:hover.water, .tabbar-wrapper .tabbar a.active.water {
    background-color: #0069d2;
    border-left-color: #0069d2;
    border-right-color: #0069d2;
}


/* ==========================================================================
   tab bar STOP
   ========================================================================== */