@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .services-inner-box h2 {
        left: 100px;
    }

    .services-inner-box {
        padding: 5px;
    }

    .services-inner-box h2 {
        top: 20px;
        font-size: 18px;
    }

    .services-inner-box p {
        bottom: -5px;
    }

    .home-bottom div {
        line-height: 90px;
        font-size: 30px;
    }

    .heading h1 {
        font-size: 25px;
    }

    .home-bottom {
        height: 90px;
    }

    .about-img {
        width: 90%;
    }

    .opus-grid:hover .opus-title,
    .demo-grid:hover .demo-title {
        color: #4a4b65;
    }

    #opus.body_dark .opus-grid:hover .opus-title,
    #demo.body_dark .demo-grid:hover .demo-title {
        color: #aaaaaa;
    }

    .like-wrapper {
        margin-left: 63px;
    }

    .article-single h2 {
        font-size: 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .services-inner-box h2 {
        left: 95px;
    }

    .navbar-dark .navbar-brand {
        width: 120px;
    }

    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-dark .navbar-toggler {
        color: #333;
        border-color: #333;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .navbar-dark.body_dark .navbar-toggler {
        color: #ddd;
        border-color: #ddd;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #about .message-box h3, .section-title h3 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    #about img {
        margin-top: 53px;
    }

    .section-title p {
        font-size: 14px;
    }

    .filter-button-group button {
        padding: 5px 10px;
        margin: 4px 2px;
    }

    .filter-button-group {
        text-align: center !important;
        margin: 0;
    }

    .post-box {
        margin-bottom: 30px;
    }

    .footer-distributed .footer-left {
        text-align: center;
    }

    .toggle {
        margin: 0 !important;
    }

    .heading h1 {
        font-size: 25px;
        letter-spacing: .15em;
    }

    .heading p {
        font-size: 14px;
    }

    .section {
        padding: 100px 0 53px;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .post-box .date {
        padding: 5px 10px;
    }

    body::after {
        background-size: auto 100%;
    }

    .navbar {
        padding: .5rem 1rem;
    }

    #mainNav .navbar-collapse {
        padding: 0;
    }

    #git {
        padding-bottom: 20px;
    }

    #git .section-title, #contact .section-title {
        margin-bottom: 30px;
    }

    .home-bottom {
        padding: 10px 25px;
        margin: 3px 0;
    }

    .home-bottom div {
        line-height: 80px;
        font-size: 25px;
    }

    .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
        border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
    }

    .heading .h1-top {
        margin-top: 100px;
    }

    .about-img {
        width: 100%;
    }

    .footer-right {
        float: left !important;
    }

    .copyrights {
        padding: 3px 0 0 !important;
    }

    .services-inner-box {
        padding: 0;
        margin: 20px 0 0;
    }

    .ser-icon i {
        display: none;
    }

    .services-inner-box h2 {
        top: 20px;
        left: 20px;
        font-size: 16px;
    }

    .services-inner-box p {
        margin-bottom: 0.7rem;
    }

    .footer-distributed {
        margin: 10px 0;
    }

    .footer-links a, .footer-links span {
        font-size: 11px !important;
    }

    .footer-links img {
        width: 14px;
    }

    #contact {
        padding: 20px 0 60px;
    }

    .note-menu, .api-menu {
        margin-bottom: 15px;
    }

    .note-single, .api-single {
        margin: 12px 0 18px;
    }

    body {
        background-size: auto 100%;
    }

    .clock {
        top: 4rem;
    }

    .opus-grid:hover .opus-title,
    .demo-grid:hover .demo-title {
        color: #4a4b65;
    }

    #opus.body_dark .opus-grid:hover .opus-title,
    #demo.body_dark .demo-grid:hover .demo-title {
        color: #aaaaaa;
    }

    .like-wrapper {
        bottom: 3%;
        left: 50%;
        margin-left: 55px;
    }

    .like {
        font-size: 12px;
    }

    .article-all {
        padding: 0;
    }

    .article-title h3 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    .article-single h2 {
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    .navbar-dark .navbar-brand {
        width: 120px;
    }

    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-dark .navbar-toggler {
        color: #333;
        border-color: #333;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .navbar-dark.body_dark .navbar-toggler {
        color: #ddd;
        border-color: #ddd;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #about .message-box h3, .section-title h3 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    #about img {
        margin-top: 20px;
    }

    .section-title p {
        font-size: 14px;
    }

    .filter-button-group button {
        padding: 5px 10px;
        margin: 4px 2px;
    }

    .filter-button-group {
        text-align: center !important;
        margin: 0;
    }

    .post-box {
        margin-bottom: 30px;
    }

    .footer-distributed .footer-left {
        text-align: center;
    }

    .toggle {
        margin: 0 !important;
    }

    .heading h1 {
        font-size: 25px;
        letter-spacing: .15em;
    }

    .heading p {
        font-size: 14px;
    }

    .section {
        padding: 100px 0 53px;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .post-box .date {
        padding: 5px 10px;
    }

    body::after {
        background-size: auto 100%;
    }

    .navbar {
        padding: .5rem 1rem;
    }

    #mainNav .navbar-collapse {
        padding: 0;
    }

    #git {
        padding-bottom: 20px;
    }

    #git .section-title, #contact .section-title {
        margin-bottom: 30px;
    }

    .home-bottom {
        padding: 10px 25px;
        margin: 0;
    }

    .home-bottom div {
        line-height: 80px;
        font-size: 25px;
    }


    .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
        border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
    }

    .heading .h1-top {
        margin-top: 110px;
    }

    .about-img {
        width: 100%;
    }

    .footer-right {
        float: left !important;
    }

    .copyrights {
        padding: 2px 0 0 !important;
    }

    .services-inner-box {
        padding: 0;
        margin: 20px 0 0;
    }

    .services-inner-box h2 {
        top: 20px;
        left: 100px;
    }

    .services-inner-box p {
        margin-bottom: 0.7rem;
    }

    .footer-distributed {
        margin: 10px 0;
    }

    .footer-links a, .footer-links span {
        font-size: 11px !important;
    }

    .footer-links img {
        width: 14px;
    }

    #contact {
        padding: 20px 0 60px;
    }

    .note-menu, .api-menu {
        margin-bottom: 15px;
    }

    .note-single, .api-single {
        margin: 12px 0 18px;
    }

    body {
        background-size: auto 100%;
    }

    .clock {
        top: 5rem;
    }

    .opus-grid:hover .opus-title,
    .demo-grid:hover .demo-title {
        color: #4a4b65;
    }

    #opus.body_dark .opus-grid:hover .opus-title,
    #demo.body_dark .demo-grid:hover .demo-title {
        color: #aaaaaa;
    }

    .like-wrapper {
        bottom: 3%;
        left: 50%;
        margin-left: 55px;
    }

    .like {
        font-size: 12px;
    }

    .article-all {
        padding: 0;
    }

    .article-title h3 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    .article-single h2 {
        font-size: 20px !important;
    }
}

@media only screen and (min-width: 280px) and (max-width: 599px) {
    .navbar-dark .navbar-brand {
        width: 120px;
    }

    .navbar-dark .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-dark .navbar-toggler {
        color: #333;
        border-color: #333;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    .navbar-dark.body_dark .navbar-toggler {
        color: #ddd;
        border-color: #ddd;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

    #about .message-box h3, .section-title h3 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    #about img {
        margin-top: 20px;
    }

    .section-title p {
        font-size: 14px;
    }

    .filter-button-group button {
        padding: 5px 10px;
        margin: 4px 2px;
    }

    .filter-button-group {
        text-align: center !important;
        margin: 0;
    }

    .post-box {
        margin-bottom: 30px;
    }

    .footer-distributed .footer-left {
        text-align: center;
    }

    .toggle {
        margin: 0 !important;
    }

    .heading h1 {
        font-size: 25px;
        letter-spacing: .15em;
    }

    .heading p {
        font-size: 14px;
    }

    .section {
        padding: 100px 0 45px;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .post-box .date {
        padding: 5px 10px;
    }

    body::after {
        background-size: auto 100%;
    }

    .navbar {
        padding: .5rem 1rem;
    }

    #mainNav .navbar-collapse {
        padding: 0;
    }

    #git {
        padding-bottom: 20px;
    }

    #git .section-title, #contact .section-title {
        margin-bottom: 30px;
    }

    .home-bottom {
        height: 70px;
        padding: 10px;
        margin: 0;
    }

    .home-bottom div {
        line-height: 50px;
        font-size: 22px;
    }


    .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active {
        border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
    }

    .heading .h1-top {
        margin-top: 110px;
    }

    .about-img {
        width: 100%;
    }

    .footer-right {
        float: left !important;
    }

    .copyrights {
        padding: 8px 0 !important;
    }

    .services-inner-box, .article-single {
        padding: 0;
        margin: 20px 0 0;
        -webkit-box-shadow: .1rem .1rem .2rem var(--greyLight-2), -.1rem -.1rem .2rem var(--white);
        box-shadow: .1rem .1rem .2rem var(--greyLight-2), -.1rem -.1rem .2rem var(--white);
    }

    .services-inner-box:active, .article-single:active {
        -webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white;
        box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white;
    }

    .services-inner-box.body_dark, .article-single.body_dark {
        -webkit-box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.4), -.1rem -.1rem .2rem rgba(66, 66, 66, 0.4);
        box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.4), -.1rem -.1rem .2rem rgba(66, 66, 66, 0.4);
    }

    .services-inner-box.body_dark:active, .article-single.body_dark:active {
        -webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2);
        box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2);
    }

    .services-inner-box h2 {
        top: 20px;
        left: 100px;
    }

    .services-inner-box p {
        margin-bottom: 0.7rem;
    }

    .footer-distributed {
        margin: 10px 0;
    }

    .footer-links a, .footer-links span {
        font-size: 12px !important;
    }

    .footer-links img {
        width: 16px;
    }

    #contact {
        padding: 20px 0 60px;
    }

    .note-menu, .api-menu {
        margin-bottom: 15px;
    }

    .note-single, .api-single {
        margin: 12px 0 18px;
    }

    body {
        background-size: auto 100%;
    }

    .opus-grid:hover .opus-title,
    .demo-grid:hover .demo-title {
        color: #4a4b65;
    }

    #opus.body_dark .opus-grid:hover .opus-title,
    #demo.body_dark .demo-grid:hover .demo-title {
        color: #aaaaaa;
    }

    .like-wrapper {
        bottom: 6%;
        left: 50%;
        margin-left: 50px;
    }

    .like {
        font-size: 12px;
    }

    .dmtop.show {
        bottom: 82px;
    }

    .footer-right {
        display: none;
    }

    #about .message-box p {
        -o-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

    .article-single {
        height: 80px !important;
        padding: 10px !important;
        margin: 10px 0 12px !important;
    }

    .article-single h2 {
        font-size: 20px !important;
        margin-right: 5px !important;
    }

    .article-single p {
        right: 20px !important;
        bottom: 0 !important;
        margin-bottom: 10px !important;
    }

    .home-bottom div, .clock, .body-login .btn, #contact .contact_form, #sendMessageButton, .checkbox__1 label {
        -webkit-box-shadow: 0.1rem 0.1rem 0.2rem var(--greyLight-2), -0.1rem -0.1rem 0.2rem var(--white);
        box-shadow: 0.1rem 0.1rem 0.2rem var(--greyLight-2), -0.1rem -0.1rem 0.2rem var(--white);
    }

    #contact.body_dark .checkbox__1 label, #contact.body_dark #sendMessageButton, #home.body_dark .home-bottom div, body.body_dark .clock, body.body_dark .btn-default, #contact.body_dark .contact_form {
        -webkit-box-shadow: 0.1rem 0.1rem 0.2rem var(--greyDark), -0.1rem -0.1rem 0.2rem var(--primary-dark);
        box-shadow: 0.1rem 0.1rem 0.2rem var(--greyDark), -0.1rem -0.1rem 0.2rem var(--primary-dark);
    }

    .checkbox__1 input:checked ~ label, .home-bottom div:active, .clock .marker, .body-login .btn:active, .body-login .form-group .input, #contact .contact_form .form-group, #sendMessageButton:active {
        -webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem var(--white);
        box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem var(--white);
    }

    #contact.body_dark .checkbox__1 input:checked ~ label, #contact.body_dark #sendMessageButton:active, #home.body_dark .home-bottom div:active, body.body_dark .clock .marker, body.body_dark .clock .marker::after, body.body_dark .body-login .form-group .input, body.body_dark .btn-default:active, #contact.body_dark .contact_form .form-group {
        box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2);
    }

    .dmtop {
        -webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.12), -0.1rem -0.1rem 0.2rem rgba(255, 255, 255, 0.7);
        box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.12), -0.1rem -0.1rem 0.2rem rgba(255, 255, 255, 0.7);
    }

    .dmtop:active {
        -webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white;
        box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white;
    }
}