/*

[RESPONSIVE STYLES]

Template: Atelier - Multipurpose HTML Template
Author: ThemeAtelier
Author URI: https://themeforest.net/user/themeatelier


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


[TABLE OF CONTENTS]

1. MEDIA QUERIES
    1.1. DESKTOP
    1.2. DESKTOP SMALL
    1.3. TABLET
    1.4. MOBILE

*/

/* ------------------------------------
    1. MEDIA QUERIES
------------------------------------ */
/* 1.1. DESKTOP */
@media screen and (max-width: 1199px) {

}

/* 1.2. DESKTOP SMALL */
@media screen and (max-width: 991px) {
    /* COMMENT ITEMS */
    .comment--items ul {
        padding-left: 0;
    }
    
    /* CALL TO ACTION */
    .call-to-action {
        text-align: center;
    }

    .call-to-action .action {
        float: none;
        margin-top: 30px;
    }

    .call-to-action .title {
        float: none;
    }

    /* FEATURES SECTION */
    .features--video {
        margin-top: 60px;
    }

    /* BLOG SECTION */
    .blog--content.float--right {
        float: none;
    }

    /* CONTACT INFO SECTION */
    .contact-info--item.text-center {
        text-align: left;
    }

    .contact-info--social .nav {
        text-align: left;
    }
}

/* 1.3. TABLET */
@media screen and (max-width: 767px) {
    /* HEADER SECTION */
    .header--infobar .logo {
        float: none;
        text-align: center;
    }

    .header--navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 15px;
        right: 15px;
        background-color: #e74c3c;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    .header--nav-links,
    .header--nav-links > li {
        float: none;
    }

    .header--nav-links > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .header--nav-links > .dropdown > .dropdown-menu {
        float: none;
        position: relative;
        box-shadow: none;
    }

    .header--nav-links > .dropdown > .dropdown-menu > li > a {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* BANNER SECTION */
    .banner--slider {
        height: auto !important;
    }
    
    .banner--slider .banner--item > .container > .row > div {
        height: auto;
    }

    /* CONTACT SECTION */
    .contact--map-wrapper {
        position: relative;
        top: -80px;
        left: 0;
        height: 300px;
    }
}

/* 1.4. MOBILE */
@media screen and (max-width: 480px) {
    /* FLOAT XXS */
    .float--xxs-none {
        float: none;
    }

    /* COL XXS */
    .col-xxs-12 {
        float: none;
        width: 100%;
        margin: 0;
    }

    /* HIDDEN XXS */
    .hidden-xxs {
        display: none !important;
    }

    /* COMMENT LIST */
    .comment--item .img {
        float: none;
        margin-right: 0;
        padding: 30px 30px 0;
        background-color: #fafafa;
        border-style: solid;
        border-width: 1px 1px 0;
        border-color: #f0f0f0;
        border-radius: 2px 2px 0 0;
    }

    .comment--item .content {
        padding-top: 9px;
        border-top-width: 0;
        border-radius: 0 0 2px 2px;
    }

    /* HEADER SECTION */
    .header--topbar {
        font-size: 0;
        line-height: 0;
        text-align: center;
    }

    .header--topbar .links {
        display: inline-block;
    }

    /* BANNER SECTION */
    .banner--content {
        text-align: center;
    }

    .banner--content.text-center .buttons .btn {
        margin-left: 20px;
        margin-right: 20px;
    }

    /* 404 SECTION */
    .f0f--content .title .h1 {
        font-size: 52px;
        line-height: 62px;
    }
}