@media (max-width:575px) {
    #Header .mobile-menu ul li {
        list-style: none;
        padding: 0 0 20px 20px
    }

    #Home .hero-content .mobile-div {
        display: inline;
        margin: auto;
    }    

    #Home .hero-content h1 {
        font-size: 28px
    }

    #Home .hero-content p {
        font-size: 20px
    }

    #Home .hero-content a {
        font-size: 18px
    }

    #Header .site-logo-wrap {
        padding: 23px 0
    }

    #Header .site-logo-wrap .logo img {
        width: 55px
    }

    #Header.header-fixed .site-logo-wrap .logo img {
        width: 50px;
        transition: all 0.3s ease-in-out
    }

    #Skills .skills-wrapper {
        display: block
    }

    #Skills .each-service {
        max-width: 100%;
        margin: 0 0 50px
    }

    #Skills {
        padding: 50px 0
    }

    #Skills .each-service:last-child {
        margin: 0
    }

    #Portfolio {
        padding: 50px 0
    }

    #Portfolio .portfolio-wrapper .each-portfolio {
        position: relative;
        width: 100%;
        float: left;
        margin: 0 0 10px
    }

    #Portfolio .each-portfolio .hover-cont-wrap {
        opacity: 1;
        height: auto;
        top: auto;
        bottom: 0
    }

    #Portfolio .each-portfolio .hover-cont-wrap .p-title {
        top: 0
    }

    #Portfolio .each-portfolio .hover-cont-wrap .p-desc {
        top: 0
    }

    #Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
        top: 0;
        transform: translateY(0%)
    }

    #About .about-wrapper {
        width: 100%;
        text-align: center;
        padding: 50px 0
    }

    #About:after {
        display: none
    }

    #Testimonial .testimonial-slider li br {
        display: none
    }

    #Contact {
        padding: 50px 0
    }

    #Contact .contact-outer-wrapper {
        display: block
    }

    #Contact .address-block {
        display: block;
        width: 100%;
        border-bottom: 1px solid #ccc;
        padding: 0 0 30px
    }

    #Contact .address-block::after {
        display: none
    }

    #Contact .form-wrap {
        display: block;
        width: 100%;
        padding: 30px 0 0
    }

    #Contact .form-wrap .floating-label {
        width: 100%
    }

    #Contact .form-wrap .fname,
    #Contact .form-wrap .contact {
        margin-right: 0
    }

    #Contact .contact-title {
        margin: 0 0 50px
    }

    #Skills .block-heading {
        margin-bottom: 70px
    }

    .block-heading {
        margin-bottom: 30px
    }

    #Contact .contact-title {
        margin: 0 0 20px
    }

    #Contact .add-title {
        text-align: center;
        margin: 0 0 30px
    }

    .hidden-lg-up {
        display: block
    }

    .hidden-md-down {
        display: none
    }
}

@media (min-width:576px) and (max-width:767px) {
    .navbar-nav {
        background-color: rgba(0, 0, 0, .5)
    }

    #Home .hero-content .mobile-div {
        display: inline;
        margin: auto;   
    }

    #Home .hero-content h1 {
        font-size: 28px
    }

    #Home .hero-content p {
        font-size: 20px
    }

    #Home .hero-content a {
        font-size: 18px
    }

    #Skills .each-service {
        max-width: 100%;
        margin: 0 0 50px
    }

    #Skills .each-service:last-child {
        margin: 0
    }

    #Portfolio .portfolio-wrapper .each-portfolio {
        position: relative;
        width: calc(50% - 10px);
        float: left;
        margin: 0 5px 10px
    }

    #Portfolio .each-portfolio .hover-cont-wrap {
        position: relative;
        opacity: 1
    }

    #Portfolio .each-portfolio .hover-cont-wrap .p-title {
        top: 0
    }

    #Portfolio .each-portfolio .hover-cont-wrap .p-desc {
        top: 0
    }

    #Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
        top: 0;
        transform: translateY(0%)
    }

    #About .about-wrapper {
        width: 100%;
        text-align: center;
        padding: 80px 0
    }

    #About:after {
        display: none
    }

    #Testimonial .testimonial-slider li br {
        display: none
    }

    #Contact {
        padding: 50px 0
    }

    #Contact .contact-outer-wrapper {
        display: block
    }

    #Contact .address-block {
        display: block;
        width: 100%;
        border-bottom: 1px solid #ccc;
        padding: 0 0 30px
    }

    #Contact .address-block::after {
        display: none
    }

    #Contact .form-wrap {
        display: block;
        width: 100%;
        padding: 30px 0 0
    }

    #Contact .form-wrap .floating-label {
        width: 100%
    }

    #Contact .form-wrap .fname,
    #Contact .form-wrap .contact {
        margin-right: 0
    }

    #Contact .contact-title {
        margin: 0 0 50px
    }

    #Skills .block-heading {
        margin-bottom: 70px
    }

    .block-heading {
        margin-bottom: 30px
    }

    #Contact .contact-title {
        margin: 0 0 20px
    }

    #Contact .add-title {
        text-align: center;
        margin: 0 0 30px
    }

    .hidden-lg-up {
        display: block
    }

    .hidden-md-down {
        display: none
    }
}

@media (min-width:768px) and (max-width:991px) {
    .navbar-nav {
        background-color: rgba(0, 0, 0, .5)
    }

    #Header .site-logo-wrap .logo img {
        width: 60px
    }

    #Home .hero-content .mobile-div {
        display: none;        
    }

    #Home .hero-content h1 {
        font-size: 28px
    }

    #Home .hero-content p {
        font-size: 20px
    }

    #Home .hero-content a {
        font-size: 18px
    }

    #Header .mobile-menu {
        width: 300px;
        left: -300px
    }

    #Header .mobile-menu ul {
        margin-top: 100px
    }

    #Skills .each-service {
        max-width: calc(50% - 30px)
    }

    #Portfolio .portfolio-wrapper .each-portfolio {
        width: calc(50% - 10px)
    }

    #Portfolio .each-portfolio .hover-cont-wrap {
        position: relative;
        opacity: 1
    }

    #Portfolio .each-portfolio .hover-cont-wrap .p-title,
    #Portfolio .each-portfolio .hover-cont-wrap .p-desc {
        top: 0
    }

    #Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
        top: 0;
        transform: translateY(0%)
    }

    #Testimonial .testimonial-slider li br {
        display: none
    }

    #Contact .contact-outer-wrapper {
        display: block
    }

    #Contact .address-block {
        display: block;
        width: 100%;
        border-bottom: 1px solid #ccc;
        padding: 0 0 30px
    }

    #Contact .address-block::after {
        display: none
    }

    #Contact .form-wrap {
        display: block;
        width: 100%;
        padding: 30px 0 0
    }

    #Contact .c-detail .c-icon {
        width: 6%
    }

    #Contact .c-detail .c-info {
        width: 92%
    }

    .hidden-lg-up {
        display: block
    }

    .hidden-md-down {
        display: none
    }
}

@media (min-width:992px) {

    #Home .hero-content .mobile-div {
        display: none;        
    }

    #Portfolio .each-portfolio .hover-cont-wrap {
        position: relative;
        opacity: 1
    }

    #Portfolio .each-portfolio .hover-cont-wrap .p-title,
    #Portfolio .each-portfolio .hover-cont-wrap .p-desc {
        top: 0
    }

    #Portfolio .each-portfolio .hover-cont-wrap .hover-cont-block {
        top: 0;
        transform: translateY(0%)
    }

    #Contact .c-detail .c-icon {
        width: 10%
    }

    #Contact .c-detail .c-info {
        width: 87%
    }
}