/*

[Responsive Stylesheet]

Project     :   ColorHost - Responsive HTML5 Web Hosting and WHMCS Template
Version     :   2.9
Author      :   ThemeLooks
Author URL  :   https://themeforest.net/user/themelooks


NOTE:
------
PLEASE DO NOT EDIT THIS CSS, YOU MAY NEED TO USE "custom-style.css" FILE FOR WRITING YOUR CUSTOM CSS.
WE MAY RELEASE FUTURE UPDATES SO IT WILL OVERWRITE THIS FILE. IT'S BETTER AND SAFER TO USE "custom-style.css".


[TABLE OF CONTENTS]

1. MEDIA QUERIES
    1.1. LARGE DEVICES, WIDE SCREENS
    1.2. MEDIUM DEVICES, DESKTOPS
    1.3. SMALL DEVICES, TABLETS
    1.4. SMALL DEVICES, SMARTPHONES
    1.5. CUSTOM, IPHONE RETINA

*/

/*------------------------------------*\
    1. MEDIA QUERIES
\*------------------------------------*/
/* 1.1. LARGE DEVICES, WIDE SCREENS */
@media screen and (max-width: 1199px) {
    /* COLUMN CENTERING */
    .col--center > div {
        vertical-align: bottom;
    }
}

/* 1.2. MEDIUM DEVICES, DESKTOPS */
@media screen and (max-width: 991px) {
    /* HEADER AREA */
    #header .navbar-toggle {
        display: block;
        margin-left: 15px;
        margin-bottom: 0;
        padding: 13px 20px;
        border-radius: 50px;
    }
    
    #header .navbar-header {
        float: none;
        margin-right: -15px;
    }
    
    .header--custom-btn.btn--default {
        display: none;
    }
    
    #header .navbar-header .header--custom-btn {
        display: block;
    }
    
    .header--custom-btn {
        margin-left: 0;
    }
    
    #headerNav {
        max-height: 320px;
        padding-left: 0;
        padding-right: 0;
        background-color: #303030;
        overflow: auto !important;
    }
    #headerNav.collapse {
        display: none !important;
    }
    #headerNav.collapse.in {
        display: block !important;
    }
    
    #headerNav .nav {
        float: none !important;
        margin-top: 7.5px;
        margin-bottom: 7.5px;
        margin-right: 0;
    }
    
    #headerNav .nav > li {
        float: none;
    }
    
    #headerNav .nav > li > a {
        margin-left: 0;
        padding: 20px 15px;
    }
    
    #headerNav .nav > .dropdown > .dropdown-menu {
        position: static;
        float: none;
    }
    
    /* EXTENSION PRICE AREA */
    .ext-price--item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .ext-price--item:last-child {
        border-bottom: none;
    }
    
    .ext-price--item span {
        border-bottom: none;
    }
    
    /* FEATURES AREA */
    .features--img {
        margin-bottom: 60px;
    }
    
    .features--item.dot:before,
    .features--item.dot:after {
        display: none;
    }
    
    /* BLOG AREA */
    .blog--content + .blog--sidebar,
    .blog--sidebar + .blog--content {
        margin-top: 20px;
    }
    
    /* ABOUT DESCRIPTION AREA */
    #aboutDesc {
        padding-bottom: 50px;
    }
    
    #aboutDesc > .container > .row > div {
        display: block;
    }
    
    .about-desc--content,
    .about-desc--img {
        margin-bottom: 30px;
    }

    /* PRICING AREA */
    .pricing--item {
        margin-bottom: 30px;
        border-bottom: 1px solid #e9e9e9;
        border-right: none;
    }
    .pricing--item:last-child {
        margin-bottom: 0;
        border-bottom: none;
    }
    .pricing--slider-item,
    .pricing--wrapper {
        padding-top: 0;
    }
    .pricing--item.popular {
        margin-top: 0;
    }
    
    /* PRICE DETAILS AREA */
    .price-details--item.head {
        display: none;
    }
    .price-details--item.body {
        margin-bottom: 60px;
    }
    .price-details--item.body:last-child {
        margin-bottom: 0;
    }
    .price-details--item.body .heading {
        margin-left: 0;
        border-right: 1px solid #e9e9e9;
    }
    .price-details--item.body .content li {
        border-left: 1px solid #e9e9e9;
        text-align: right;
    }
    .price-details--item.body .content li strong {
        float: left;
        display: block;
    }
    .price-details--item.body .content .action-btn {
        border-left: 1px solid #e9e9e9;
    }
    
    .price-details--table table {
        background-color: transparent;
    }
    .price-details--table thead {
        display: none;
    }
    .price-details--table tbody {
        border: none;
    }
    .price-details--table tbody tr {
        display: block;
        background-color: #fff;
        margin-bottom: 20px;
        border: 1px solid #e9e9e9;
    }
    .price-details--table tbody tr:last-child {
        margin-bottom: 0;
        border-bottom: 1px solid #e9e9e9;
    }
    .price-details--table tbody td {
        display: block;
        padding-left: 20px;
        padding-right: 20px;
        border-bottom: 1px dotted #e9e9e9;
        text-align: right;
        overflow: hidden;
    }
    .price-details--table tbody td:last-child {
        border-bottom: none;
    }
    .price-details--table tbody td strong {
        float: left;
        display: block;
    }
    .price-details--table tbody td .btn--default + strong {
        margin-top: 12px;
    }
    
    /* VPS PRICING AREA */
    .vps-pricing--action-btn {
        text-align: left;
    }
    .vps-pricing--action-btn .btn--default {
        margin-left: 18px;
        margin-right: 0;
    }
    
    /* FAQ AREA */
    .faq--categories {
        margin-bottom: 40px;
    }
    .faq--categories .nav {
        overflow: hidden;
    }
    .faq--categories .nav > li {
        float: left;
    }
    .faq--categories ul li a {
        margin-right: 6px;
    }
    
    /* MAP AREA */
    #map:before {
        display: block;
    }
    
    /* BACK TO TOP */
    #backToTop {
        display: none;
    }
    
    /* COLUMN CENTERING */
    .col--center > div {
        display: block;
    }
}

/* 1.3. SMALL DEVICES, TABLETS */
@media screen and (max-width: 767px) {
    /* HEADER AREA */
    #headerNav {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #headerNav .nav {
        margin-right: -15px;
    }
    
    #headerNav .nav > .dropdown > .dropdown-menu {
        background-color: #fff;
    }
    
    /* BANNER AREA */
    #banner,
    .banner--slider,
    .banner--slider .owl-wrapper-outer,
    .banner--slider .owl-wrapper,
    .banner--slider .owl-item,
    .banner--item {
        height: auto;
    }
    
    .banner--item {
        padding: 120px 0 150px;
    }
    
    /* DOMAIN SEARCH AREA */
    .ds--form-ext {
        margin-top: 0;
    }
    
    .ds--form-ext label {
        float: left;
        display: block;
        width: 33.33333%;
        margin-top: 25px;
        text-align: left;
    }
    
    /* ABOUT DESCRIPTION AREA */
    #aboutDesc .row-vc > div {
        display: block;
    }
    
    .about-desc--img {
        margin-bottom: 35px;
    }

    /* TEAM AREA */
    .team--social-links ul {
        overflow: hidden;
    }
    
    .team--social-links ul li {
        float: left;
    }
    
    /* 404 AREA */
    .f0f--content h2 {
        font-size: 80px;
        line-height: 94px;
    }
    
    .f0f--content h3 {
        font-size: 24px;
        line-height: 32px;
    }
    
    .f0f--search-bar .form-control {
        margin-top: 30px;
    }
}

/* 1.4. SMALL DEVICES, SMARTPHONES */
@media screen and (max-width: 480px) {
    /* VPS PRICING AREA */
    .vps-pricing--features .col-xs-6 {
        float: none;
    }
    .vps-pricing--action-btn {
        margin-bottom: 20px;
    }
}

/* 1.5. CUSTOM, IPHONE RETINA */
@media screen and (max-width: 380px) {
    /* HEADER AREA */
    #header .navbar-header .header--custom-btn {
        display: none;
    }
    
    /* DOMAIN SEARCH AREA */
    .ds--form-ext label {
        width: 50%;
    }
    
    .ds--form-input .btn--default {
        padding-left: 30px;
        padding-right: 30px;
    }
}