@media (min-width:769px) {
    .menu>li:first-child ul.subnav {
        text-align: left !important
    }

    .main-nav {
        position: relative !important
    }

    .menu li:first-child a:before {
        display: none !important
    }

    .menu li a:before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        border-left: 1px dotted #fff;
        left: 0px;
        top: 15px;
        height: 10px;
        width: 1px
    }

    .menu li.active ul.subnav {
        display: block
    }

    .menu li.active a {
        color: #5CB5CC
    }

    li.swoosh.active a {
        color: #5CB5CC
    }

    ul.subnav li.active {
        color: #00b5cb !important
    }

    .menu>li>a:before {
        content: "";
        display: block;
        position: absolute;
        border-left: 1px dotted #fff;
        left: 0px;
        top: 15px;
        height: 10px;
        width: 1px
    }

    .menu li ul.subnav {
        display: none;
        left: 0;
        position: absolute;
        top: 40px;
        right: 0px;
        height: 39px;
        width: 100%;
        background: #ffffff;
        -webkit-box-shadow: 0px 5px 5px 0px rgb(204 204 204 / 75%);
        -moz-box-shadow: 0px 5px 5px 0px rgba(204, 204, 204, 0.75);
        box-shadow: 0px 5px 5px 0px rgb(204 204 204 / 75%)
    }

    .menu ul li.active ul.subnav {
        display: block
    }

    ul.subnav li {
        display: inline-block;
        text-align: center;
        vertical-align: middle
    }

    .menu>li.swoosh.active>a:after {
        content: "";
        position: absolute;
        background: url('../img/swoosh.png') center center no-repeat;
        z-index: 20;
        width: 72px;
        height: 10px;
        left: 50%;
        margin-left: -36px;
        bottom: -5px
    }
}

@media (max-width:768px) {
    .menu>li.active>a:after {
        background: none
    }
}