/* ================================================== */
/* Responsive Styles */
/* ================================================== */

/* High-Resolution Screens */
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi),
       screen and (min-width: 1600px) {
    .extra-title,
    .work-item-move .extra-title {
        font-size: 15px;
    }
}

/* Large Screens (1600px - 1940px) */
@media screen and (min-width: 1600px) and (max-width: 1940px) {
    .extra-title,
    .work-item-move .extra-title {
        font-size: 15px;
    }
}

/* General Responsiveness */
@media screen and (max-width: 1600px) {
    /* Owl Carousel */
    div.article-content > .entry-body {
        padding: 8px 20px;
    }
    .article-thumb {
        padding-bottom: 75px;
    }

    /* Clients */
    .client-items li {
        width: 16%;
    }

    /* Footer */
    .offers h1 {
        font-size: 25px;
    }

    #footer ul.social-icons {
        margin: 0 0 30px;
    }
}

/* Tablets & Small Screens (993px - 1600px) */
@media screen and (min-width: 993px) and (max-width: 1600px) {
    /* Buttons */
    .button.large {
        padding: 18px 26px;
    }

    /* Owl Carousel */
    .item:hover .entry-body {
        transform: translateY(-76%);
    }

    /* Corporate Styles */
    .header-text {
        top: 100px;
    }

    /* Blog */
    .item .entry-quote blockquote {
        font-size: 20px;
    }

    .post-holder .entry-title {
        font-size: 13px;
    }

    .popular-posts .post-holder {
        padding: 20px 8px 25px;
    }
}

/* Tablets & Small Laptops (768px - 992px) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .header-text {
        top: 67px;
    }

    .header-text p {
        font-size: 23px;
    }

    .item:hover .entry-body {
        transform: translateY(-65%);
    }

    /* Portfolio */
    .extra-title,
    .work-item-move .extra-title {
        font-size: 14px;
    }

    /* Services */
    .services-title {
        font-size: 30px;
        padding: 0 20px;
    }

    /* Pricing Tables */
    .simple-pricing-table .simple-column.col-3,
    .simple-pricing-table .simple-column.col-4 {
        width: 50%;
        padding-bottom: 10px;
    }

    /* Portfolio Items */
    .portfolio-items.col-5 article,
    .portfolio-items.col-6 article {
        width: 33.333%;
    }
}

/* Mobile (Max Width: 767px) */
@media only screen and (max-width: 767px) {
    /* Centering Elements */
    #logo,
    ul.contact-details,
    .top-header-line .social-icons {
        text-align: center;
    }

    /* Section Titles */
    .section-title {
        margin-bottom: 5px;
    }

    .section-title h3 {
        font-size: 30px;
        font-weight: 500;
        padding: 0 20px;
    }

    /* Blog Grid */
    .grid-posts .article-thumb {
        padding-bottom: 0;
    }

    .entry-text {
        padding: 10px 10px 20px 22px;
    }

    .blog-meta .entry-title a {
        font-size: 20px;
    }

    /* Pricing Tables */
    .simple-pricing-table .simple-column {
        width: 100%;
        margin-bottom: 20px;
    }

    .simple-pricing-table .simple-column.col-3,
    .simple-pricing-table .simple-column.col-4 {
        width: 100%;
    }

    /* Footer */
    .widget-area {
        padding: 40px 0 0;
    }

    /* Portfolio Items */
    .portfolio-items.col-2 article,
    .portfolio-items.col-3 article,
    .portfolio-items.col-4 article,
    .portfolio-items.col-5 article,
    .portfolio-items.col-6 article {
        width: 50%;
    }

    /* Team Section */
    .team-contents .item {
        margin-bottom: 25px;
    }
}

/* Mobile Portrait (Max Width: 480px) */
@media only screen and (max-width: 480px) {
    .search-wrapper input[type="text"] {
        width: 85%;
    }

    /* Clients */
    .client-items li {
        width: 50%;
        padding: 5px 10px;
    }

    .services-title {
        font-size: 21px;
        margin-bottom: 30px;
    }

    .service-article {
        padding-bottom: 10px;
    }

    /* Contact */
    .contact-info {
        margin-bottom: 15px;
    }
}

/* Small Devices (Max Width: 320px) */
@media only screen and (max-width: 320px) {
    .transparent-bg #logo a:after {
        right: 85px;
    }
}