@media (max-width: 1200px) {
    #about-bg-diagonal {
        display: none;
    }

    #about-content {
        width: 100%;
        height: auto;
    }

    .navbar-header a img {
        width: 200px;
    }

    .navbar-nav li {
        font-size: 8px;
    }

    .navbar-collapse {
        float: none;
    }
}

@media (max-width: 992px) {
    
    .navbar-header a img {
        width: 170px;
    }

    .navbar-nav li {
        font-size: 8px;
    }

    .navbar-collapse {
        float: none;
        margin: 0;
        padding: 0;
    }
    
    .navbar-nav li {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .up-head {
        display: none;
    }
    
    .up-head-mobile {
        display: block;
        position: fixed;
        top: 100px;
        right: 0;
        z-index: 6;
    }
    
    .mobile-support {
        -webkit-clip-path: circle(50% at 100% 50%);
        clip-path: circle(50% at 100% 50%);
        display: none;
        position: absolute;
        background: #34c6d3;
        top: 35px;
        right: 0;
        z-index: 10;
        text-align: right;
    }
    
    .mobile-support ul{
        list-style: none;
    }
    
    .mobile-support ul li {
        display: inline-block;
        padding: 10px 150px;
        padding-right: 15px;
    }
    
    .mobile-support ul li a {
        font-weight: 700;
        color: darkslategray;
    }
    
    .mobile-support ul li:hover {
        background: white;
    }

    .navbar {
        padding: 0;
    }

    .navbar-header a img {
        display: block;
        width: 170px;
    }

    .navbar-nav {
        background: #34c6d3;
        padding: 0;
        margin: 0px -15px;
        float: none;
    }

    .navbar-default .navbar-nav > li > a {
        color: white;
    }

    .navbar-default .navbar-nav > li > a:hover {
        text-shadow: 0 0 2px #a54866;
        font-weight: 700;
    }

    .navbar-nav a {
        border: none;
        color: white;
        margin: 0 10px;
    }

    .navbar-nav li {
        width: 100%;
        border-bottom: 2px solid white;
    }

    .dropdown > :first-child::after {
        font-family: FontAwesome;
        content: "\f067";
        display: inline-block;
        float: right;
    }

    .navbar-nav li:last-of-type {
        border-bottom: none;
    }

    .navbar-nav a:hover {
        border-bottom: none;
    }


    .dropdown-content a {
        color: darkslategray;
        text-shadow: 0 0 2px #a54866;
        font-weight: 700;
        font-size: 8px;
        display: block;
        padding: 15px 10px 15px 20px;
        text-transform: inherit;
    }

    .dropdown-content {
        display: none;
        min-width: 100%;
        position: relative;
        background-color: #d3d3d3;
        box-shadow: none;
    }

    .dropdown-content a:hover {
        color: black;
        background: #fff;
        box-shadow: none;
        border-bottom: none;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown-content:hover {
        border-top: none;
    }

    .sub-menu {
        display: none;
        position: relative;
        top: 0;
        left: 0;
        background-color: #34c6d3;
        z-index: 3;
        box-shadow: 0 0 10px gray;
        border: 2px solid darkslategray;
        border-radius: 5px;
    }

    .sub-menu a {
        font-size: 10px;
        display: block;
        color: black;
        padding: 15px 10px 15px 20px;
        text-transform: inherit;
        border-bottom: none;
    }

    .sub-menu a:hover {
        color: darkslategray;
        background: #fff;
        box-shadow: 0 0 8px gray;
        border-bottom: none;
        border-top: none;
    }

    .sub-menu1 {
        display: none;
        position: relative;
        top: 0;
        left: 0;
        background-color: #34c6d3;
        z-index: 3;
        box-shadow: 0 0 10px gray;
        border: 2px solid darkslategray;
        border-radius: 5px;
    }

    .sub-menu1 a {
        font-size: 10px;
        display: block;
        color: black;
        padding: 15px 10px 15px 20px;
        text-transform: inherit;
        border-bottom: none;
    }

    .sub-menu1 a:hover {
        color: darkslategray;
        background: #fff;
        box-shadow: 0 0 8px gray;
        border-bottom: none;
        border-top: none;
    }

    .sub-menu2 {
        display: none;
        position: relative;
        top: 0;
        left: 0;
        background-color: #34c6d3;
        z-index: 3;
        box-shadow: 0 0 10px gray;
        border: 2px solid darkslategray;
        border-radius: 5px;
    }

    .sub-menu2 a {
        font-size: 10px;
        display: block;
        color: black;
        padding: 15px 10px 15px 20px;
        text-transform: inherit;
        border-bottom: none;
    }

    .sub-menu2 a:hover {
        color: darkslategray;
        background: #fff;
        box-shadow: 0 0 8px gray;
        border-bottom: none;
        border-top: none;
    }


}