/*

[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: 1259px) {
    /* BANNER SECTION */
	.banner--slider .owl-nav {
		display: none;
	}
	
	.banner--slider .owl-dots {
		display: block;
	}
}

@media screen and (max-width: 1199px) {
    /* CALL TO ACITON SECTION */
    .call-to-action .title {
        max-width: 780px;
    }
}

/* 1.2. DESKTOP SMALL */
@media screen and (max-width: 991px) {
    /* COMMENT ITEMS */
    .comment--items ul {
        padding-left: 0;
    }

    /* BANNER SECTION */
    .banner--img {
        display: none;
    }
    
    /* CALL TO ACTION */
    .call-to-action {
        text-align: center;
    }

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

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

    /* 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;
    }

    /* SKILLS SECTION */
    .skills--section .row--vc > div {
        display: block;
    }

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

/* 1.4. MOBILE */
@media screen and (max-width: 480px) {
    /* HEADINGS */
    h2, .h2 {
        font-size: 25px;
        line-height: 35px;
    }

    h3, .h3 {
        font-size: 20px;
        line-height: 30px;
    }

    /* 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 .title .h1 {
        font-size: 30px;
        line-height: 40px;
    }

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

    /* FEATURES SECTION */
    .features--content .features li {
        font-size: 16px;
    }

    /* ABOUT DETAILS SECTION */
    .about-details--content .timeline.style-2 li .content .h4 {
        font-size: 16px;
    }

    /* PORTFOLIO SECTION */
    .portfolio--filter-menu .nav li {
        display: block;
        border-right: 0;
    }

    .portfolio--item figcaption .title .h4 {
        font-size: 20px;
        line-height: 30px;
    }

    .portfolio--item figcaption .buttons a {
        padding: 5px 20px;
    }

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