@media screen and (max-width: 987px) {
    nav ul {
        margin-right: 0;
        float: right;
        margin-top: 30px;
    }
    nav .logo {
        padding-left: 30px;
    }
    nav ul li,
    nav ul ul li {
        display: block;
        width: 100%;
    }
    nav ul ul {
        top: 70px;
        position: static;
        border-bottom: none;
        float: none;
        display: none;
        opacity: 1;
        visibility: visible;
    }
    nav ul ul a {
        padding-right: 40px;
    }
    .show {
        display: block;
        color: #231F20;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
    }
    .show:hover {
        color: #D62027;
    }
    .icon {
        display: block;
        color: #231F20;
        position: absolute;
        right: 40px;
        line-height: 70px;
        font-size: 25px;
        cursor: pointer;
    }
    .show + a,
    ul {
        display: none;
    }
    [id^=btn]:checked + ul {
        display: block;
    }
    nav ul li.sub a:after {
        content: none;
    }
    ul.access {
        display: block !important;
    }
}

@media screen and (max-width: 1400px) {
    .i-content img.img-content, .content-cover-one, .content-cover-two {
        height: 340px;
    }
    .i-gallery img, .gallery-box-cover {
        height: 216px;
    }
    .gallery-box-cover {
        top: 125px;
    }
    .gallery-box-cover h3 {
        font-size: 17px;
    }
    .blog-box-head img.blog-img {
        height: 232px;
    }
    .service-box-cover a {
        font-size: 16px;
    }
    .d-example img {
        height: 308px;
    }
    .g-activity a img {
        height: 288px;
    }
    .g-activity h3, .g-other-pic h3 {
        font-size: 21px;
        line-height: 1.7em;
    }
    .gallery-pic-example img, .gallery-pic-example-cover, .g-other-pic a img {
        height: 289px;
    }
    .sidebar-box img {
        width: 120px;
        height: 90px;
    }
    .blog-details-container, .blog-list-container {
        padding: 80px 100px;
    }
    .blog-list-box-content img {
        width: 350px;
        height: 270px;
    }
    .blog-list-box-content {
        margin-bottom: 15px;
    }
    .about-box-one {
        padding: 80px 100px;
    }
    .about-box-three, .about-service-item {
        padding: 0px 100px;
    }
}

@media screen and (max-width: 1280px) {
    .content {
        padding: 60px 80px;
    }
    .laser-cover {
        padding: 0px 80px;
    }
    .customer {
        padding: 70px 100px;
    }
    .catalog, .gallery, .blog {
        padding: 0px 100px;
    }
    .footer-box {
        padding: 40px 100px;
    }
    .service-details-header {
        padding: 60px 200px;
    }
    .gallery-container {
        padding: 80px 80px;
    }
    .contact-header-head h2 {
        font-size: 23px;
    }
    .contact-header {
        padding: 80px 80px;
    }
    .contact-location, .contact-form {
        padding: 0px 80px;
    }
    .blog-details-container, .blog-list-container {
        padding: 80px 80px;
    }
    .blog-details-pic img {
        height: 350px;
    }
    .blog-list-box-content {
        flex-direction: column;
    }
    .blog-list-box-content img {
        width: 95%;
        height: 270px;
    }
    .blog-list-box-content p {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 1100px) {
    .i-badges h3 {
        font-size: 17px;
    }
    .col-3 {
        width: calc(50% - 30px);
    }
    .blog-box-content {
        padding: 20px;
    }
    .blog-box-content a h3 {
        font-size: 20px;
    }
    .i-gallery img, .gallery-box-cover {
        height: 250px;
    }
    .gallery-box-cover {
        top: 155px;
    }
    .catalog-cover h1 {
        font-size: 27px;
    }
    .service-box-cover a {
        font-size: 18px;
    }
    .map {
        height: 400px;
    }
    .contact-form-head h2 {
        font-size: 24px;
        line-height: 1.8em;
    }
    .c-location p {
        text-align: center;
    }
    .sidebar-box img {
        width: 100px;
        height: 70px;
    }
    .sidebar-box a {
        text-align: center;
    }
    .blog-list-container {
        padding: 80px 60px;
    }
    .about-service {
        display: none;
    }
    .about-service-item {
        display: block;
    }
}

@media screen and (max-width: 980px) {
    .content {
        padding: 60px 40px;
    }
    .laser-cover {
        padding: 0px 40px;
    }
    .customer {
        padding: 70px 60px;
    }
    .catalog, .gallery, .blog {
        padding: 0px 60px;
    }
    .footer-box {
        padding: 40px 60px;
    }
    .blog-box-content a h3 {
        font-size: 19px;
        text-align: center;
    }
    .service-items, .service-contact {
        padding: 0px 40px;
    }
    .service-content {
        padding: 0px 70px;
    }
    .service-details-header {
        padding: 60px 100px;
    }
    .service-details-content {
        padding: 0px 60px;
    }
    .gallery-container {
        padding: 80px 40px;
    }
    .contact-header {
        padding: 80px 40px;
    }
    .contact-location, .contact-form {
        padding: 0px 40px;
    }
    .blog-details-row {
        flex-direction: column;
    }
    .col-8 {
        width: calc(100% - 30px);
    }
    .col-4-x2 {
        width: calc(100% - 30px);
    }
    .blog-details-label {
        margin-bottom: 50px;
    }
    .about-box-one {
        padding: 80px 40px;
    }
    .about-box-three, .about-service-item {
        padding: 0px 40px;
    }
}

@media screen and (max-width: 900px) {
    .catalog-cover h1 {
        font-size: 24px;
    }
    .col-4 {
        width: calc(50% - 30px);
    }
    .service-contact-box h2 {
        font-size: 22px;
    }
}

@media screen and (max-width: 800px) {
    .col-2-x {
        width: calc(33.333% - 20px);
    }
    .catalog-cover {
        padding: 0 20px;
        line-height: 2em;
    }
    .catalog-cover h1 {
        text-align: center;
    }
    .catalog-cover a {
        margin-top: 125px;
        padding: 10px 24px;
    }
    .blog-details-pic img {
        height: 300px;
    }
}

@media screen and (max-width: 750px) {
    h1.title {
        font-size: 26px;
    }
    .content-service-box, .contact-location-box, .form {
        flex-direction: column;
    }
    .col-6 {
        width: calc(100% - 30px);
    }
    .catalog-cover h1 {
        font-size: 23px;
    }
    .laser-cover h1 {
        font-size: 30px;
    }
    .laser-cover p {
        font-size: 18px;
    }
    .service-content-paraf p {
        font-size: 16px;
    }
    .service-serve h2 {
        font-size: 22px;
        text-align: center;
        line-height: 1.8em;
    }
    .service-contact-box p {
        font-size: 18px;
    }
    .service-details-between p {
        margin-bottom: 20px;
    }
    .service-details-between {
        justify-content: center;
        flex-direction: column;
    }
    .map {
        height: 350px;
    }
    .blog-list-box-head a h2 {
        font-size: 23px;
    }
}

@media screen and (max-width: 700px) {
    .gallery-box, .blog-box, .gallery-box-row, .contact-header-box {
        flex-direction: column;
    }
    .col-3 {
        width: calc(100% - 30px);
    }
    .col-4 {
        width: calc(100% - 30px);
    }
    .service-contact-box h2 {
        font-size: 20px;
        line-height: 1.8em;
    }
    .boresh-computing h3 {
        font-size: 20px;
    }
    .blog-details-container, .blog-list-container {
        padding: 80px 40px;
    }
    .blog-list-box-head a h2 {
        font-size: 21px;
    }
}

@media screen and (max-width: 600px) {
    h1.title:before, h1.title:after {
        width: 60px;
    }
    .laser-cover h1 {
        font-size: 28px;
    }
    .laser-cover p {
        font-size: 17px;
    }
    .catalog-cover h1 {
        font-size: 22px;
    }
    .content {
        padding: 60px 30px;
    }
    .customer {
        padding: 70px 40px;
    }
    .catalog, .gallery, .blog {
        padding: 0px 40px;
    }
    .footer-box {
        padding: 40px 40px;
    }
    .service-serve h2 {
        font-size: 20px;
    }
    .service-contact-box, .service-serve {
        padding: 0 10px;
    }
    .service-items, .service-contact {
        padding: 0px 20px;
    }
    .service-content {
        padding: 0px 35px;
    }
    .service-details-header {
        padding: 60px 60px;
    }
    .service-details-content {
        padding: 0px 40px;
    }
    .small-head {
        font-size: 22px;
    }
    .boresh-computing {
        padding: 25px 10px;
    }
    .boresh-computing h3 {
        font-size: 18px;
        text-align: center;
        line-height: 2em;
    }
    .gallery-container {
        padding: 80px 30px;
    }
    .contact-header {
        padding: 80px 25px;
    }
    .contact-location, .contact-form {
        padding: 0px 25px;
    }
    .blog-details-label a {
        margin: 0px 4px 15px 4px;
    }
    .blog-list-box-head a h2 {
        line-height: 1.8em;
    }
    .about-box-two-head h1 {
        font-size: 26px;
    }
}

@media screen and (max-width: 500px) {
    .badges {
        flex-direction: column;
    }
    .col-2-x {
        width: calc(100% - 20px);
    }
    h1.title {
        font-size: 22px;
    }
    .small-head {
        font-size: 20px;
    }
    .contact-form-head h2 {
        font-size: 21px;
    }
    .submit {
        font-size: 16px;
        padding: 8px 25px;
    }
    .blog-details-head h2 {
        font-size: 23px;
    }
    .blog-details-pic img {
        height: 250px;
    }
    .all {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media screen and (max-width: 450px) {
    .laser-cover img {
        width: 85%;
    }
    .laser-cover h1 {
        font-size: 26px;
    }
    .catalog-cover h1 {
        font-size: 20px;
    }
    .content {
        padding: 60px 20px;
    }
    .laser-cover {
        padding: 0px 30px;
    }
    .customer {
        padding: 70px 30px;
    }
    .catalog, .gallery, .blog {
        padding: 0px 30px;
    }
    .footer-box {
        padding: 40px 30px;
    }
    h1.title {
        font-size: 19px;
    }
    h1.title:before, h1.title:after {
        width: 40px;
    }
    h1.title:before {
        right: -10px;
    }
    h1.title:after {
        left: -10px;
    }
    .laser-cover h1 {
        font-size: 24px;
    }
    .laser-cover img {
        margin-bottom: 20px;
    }
    .laser-cover p {
        line-height: 1.8em;
    }
    .catalog-cover a {
        font-size: 16px;
        padding: 8px 20px;
    }
    .bottom-footer p {
        font-size: 14px;
        text-align: center;
    }
    .service-items {
        padding: 0px 10px;
    }
    .service-contact-box p {
        font-size: 17px;
    }
    .service-details-header {
        padding: 60px 50px;
    }
    .service-details-content {
        padding: 0px 30px;
    }
    .service-details-head img {
        width: 95%;
    }
    .service-details-head h1 {
        font-size: 28px;
    }
    .gallery-container {
        padding: 80px 20px;
    }
    .map {
        height: 300px;
    }
    .blog-details-container, .blog-list-container {
        padding: 80px 20px;
    }
    .blog-list-box-head a h2 {
        font-size: 20px;
    }
    .about-box-one {
        padding: 80px 20px;
    }
    .about-box-three, .about-service-item {
        padding: 0px 20px;
    }
    .about-box-two-head h1 {
        font-size: 24px;
        padding: 0px 20px;
        line-height: 1.8em;
    }
    .about-box-four h1 {
        font-size: 26px;
    }
    ul.about-items li a {
        font-size: 16px;
    }
}

@media screen and (max-width: 400px) {
    .service-contact-box h2, .service-serve h2 {
        font-size: 18px;
    }
    .small-head {
        font-size: 17px;
    }
    .blog-details-head h2 {
        font-size: 21px;
        line-height: 1.8em;
    }
    .blog-list-container {
        padding: 80px 10px;
    }
    .about-box-four h1 {
        font-size: 24px;
    }
}

@media screen and (max-width: 366px) {
    .catalog-cover a {
        margin-top: 110px;
    }
    .service-content {
        padding: 0px 30px;
    }
    .blog-list-box-content img {
        height: 240px;
    }
}