/* Portrait 320px and 480px */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
     .hero-bg img {
        height: 100%;
        width: auto;
    }
    .address-menu {
        display: none;
    }
    a.menu-link {
        font-size: 30px;
    }

    .service-item {
        width: 100% !important;
    }
    .toggle-btn {
        margin-top: 50px;
    }
    .about-text h4 {
        font-size: 19px;
    }
    .logo {
        margin-top: 48px;
        width: 60%;
    }
    .about-text-bg {
        display: none;
    }
    .detail-project h3 {
        font-size: 17px;
    }
    .title {
        margin-top: 3rem;
    }
    .service {
        margin-bottom: 30px;
    }
    .title h2 {
        font-size: 34px;
    }
    .line-between {
        height: 50px !important;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .about-text {
        padding: 35px 0px;
    }
    .project-content:hover .img-project::after {
        width: 86.5%;
        left: 20px;
    }
    .left-bg {
        display: none
    }
    .contact .about-overlay {
        width: 90.8%;
    }
    .right-bg {
        display: none;
    }
    .copyright h3 {
        margin-bottom: 2rem;
    }
    .between {
        padding: 20px;
    }
    .toggle-btn::before {
        display: none;
    }
    .hero-title h1 {
        font-size: 16px;
    }
    .hero-title p {
        font-size: 15px;
        color: #fff;
        line-height: 1.5;
    }
    .square {
        width: 100%;
        background: url(../img/bg-hero.png) no-repeat right bottom;
        background-size: contain;
    }
    .links::before {
        display: none;
    }
    .news-text p {
        display: none;
    }
    .hero-title {
        padding: 0 30px;
    }
    .title:before, .mid-title .title:before {
        content: '';
        position: absolute;
        transform: translate(-50%, -50%) rotate(45deg);
        top: 50%;
        left: 50%;
        width: 80px;
        height: 80px;
        z-index: 1;
        background: url(../img/text-bg-light.svg) repeat;
        background-size: 10px;
    }
    .title {
        text-align: center !important;
    }
}


/* Portrait 375px and 667px */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    .hero-bg img {
        height: 100%;
        width: auto;
    }
    .address-menu {
        display: none;
    }
    a.menu-link {
        font-size: 30px;
    }
    .title:before, .mid-title .title:before {
        content: '';
        position: absolute;
        transform: translate(-50%, -50%) rotate(45deg);
        top: 50%;
        left: 50%;
        width: 80px;
        height: 80px;
        z-index: 1;
        background: url(../img/text-bg-light.svg) repeat;
        background-size: 10px;
    }
    .title {
        text-align: center !important;
    }
    .service-item {
        width: 100% !important;
    }
    .about-text {
        padding: 40px 40px;
        z-index: 1;
    }
    .logo {
        margin-top: 42px;
        width: 60%;
    }
    .about-text-bg {
        display: none;
    }
    .project-content:hover .img-project::after {
        width: 89.5%;
        left: 20px;
    }
    .left-bg {
        display: none
    }
    .contact .about-overlay {
        width: 92.8%;
    }
    .right-bg {
        display: none;
    }
    .copyright h3 {
        margin-bottom: 2rem;
    }
    .between {
        padding: 20px;
    }
    .toggle-btn::before {
        display: none;
    }
    .hero-title h1 {
        font-size: 24px;
    }
    .square {
        width: 100%;
        background: url(../img/bg-hero.png) no-repeat right bottom;
        background-size: contain;
    }
    .links::before {
        display: none;
    }
    .news-text p {
        display: none;
    }
    .hero-title {
        padding: 0 30px;
    }

}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .logo {
        margin-top: 47px;
        width: 28%;
    }
    .hero .between {
        padding: 100px 80px;
    }
    .square {
        width: 100%;
        background: url(../img/bg-hero.png) no-repeat right bottom;
    }


  }


/* // Extra small devices (portrait phones, less than 576px) */
@media (min-width: 575.98px) and (max-width: 767.98px) {
    .address-menu {
        display: none;
    }
    .links::before {
        display: none;
    }
    .left-bg {
        display: none
    }

    .right-bg {
        display: none;
    }
    .toggle-btn::before {
        display: none;
    }
    .hero-title h1 {
        font-size: 40px;
    }
    .news-text p {
        display: none;
    }
}

/* // Small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) and (max-width: 991.98px) {
  

    .left-bg {
        display: none
    }

    .right-bg {
        display: none;
    }
}

/* // Medium devices (tablets, less than 992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .left-bg {
        display: none
    }

    .right-bg {
        display: none;
    }

}

/* // Large devices (desktops, less than 1200px) RETINA */
@media (min-width: 1200px) and (max-width: 4000px) {
    .work-item {
        height: 350px;
    }

    .mt-60-lg {
        margin-top: 60px !important;
    }


}