/*

[Responsive Stylesheet]

Project     : TheGraphy - Responsive Creative Photography HTML5 Template
Version     : 1.0
Author      : ThemeLooks
Author URI  : https://themeforest.net/user/themelooks


NOTE:
------
PLEASE DO NOT EDIT THIS CSS, YOU MAY NEED TO USE "custom.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.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) {
    /* OWL CONTROLS */
    .owl-nav, .owl-dots {
        max-width: 945px;
    }

    /* PORTFOLIO SECTION */
    .portfolio--sizer,
    .portfolio--item {
        width: 25%;
    }

    .portfolio--item.grid--2 {
        width: 50%;
    }
}

@media screen and (min-width: 992px) {
    /* VERTICAL CENTERING */
    .row--md-vc > div {
        float: none;
        display: table-cell;
        vertical-align: middle;
    }

    /* POST ITEM */
    .post--items .post--slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-right: 15px;
        overflow: hidden;
    }

    .post--items .post--slider img,
    .post--items .post--slider .owl-item img {
        width: auto;
        height: 100%;
    }

    .post--items .post--img a,
    .post--items .post--img img {
        display: block;
        width: auto;
        max-width: none;
        height: 100%;
    }
}

/* 1.2. MEDIUM DEVICES, DESKTOPS */
@media screen and (max-width: 991px) {
    /* OWL CONTROLS */
    .owl-nav, .owl-dots {
        max-width: 725px;
    }
    
    /* HEADER SECTION */
    .header--navbar .navbar-header {
        float: none;
    }

    .header--navbar .navbar-toggle {
        display: block;
        margin-top: 11px;
        margin-left: 0;
        margin-right: 0;
        background-color: #fff;
        border-color: #fff;
        border-radius: 0;
        -webkit-transition: border-color .25s, background-color .25s ease-in-out;
        transition: border-color .25s, background-color .25s ease-in-out;
    }

    .header--navbar .navbar-toggle.collapsed {
        background-color: transparent;
    }

    .header--navbar .navbar-toggle .icon-bar {
        background-color: #333;
        -webkit-transition: background-color .25s ease-in-out;
        transition: background-color .25s ease-in-out;
    }

    .header--navbar .navbar-toggle.collapsed .icon-bar {
        background-color: #fff;
    }

    body.isScrolling .header--navbar .navbar-toggle {
        background-color: #333;
        border-color: #333;
    }

    body.isScrolling .header--navbar .navbar-toggle.collapsed {
        background-color: transparent;
    }

    body.isScrolling .header--navbar .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    body.isScrolling .header--navbar .navbar-toggle.collapsed .icon-bar {
        background-color: #333;
    }

    .header--navbar .navbar-collapse {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-width: 720px;
        max-height: 320px;
        margin-left: auto;
        margin-right: auto;
        color: #333;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        z-index: 999;
    }

    .header--navbar .navbar-collapse.collapsing,
    .header--navbar .navbar-collapse.in {
        display: block !important;
    }
    
    .header--navbar .navbar-collapse.in {
        overflow: auto !important;
    }

    .header--nav-links {
        float: none;
        margin-left: 5px;
        margin-right: 5px;
    }

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

    .header--nav-links > li + li {
        margin-top: 5px;
    }

    .header--nav-links > li > a {
        display: block;
    }

    .header--nav-links > .dropdown > .dropdown-menu {
        float: none;
        position: relative;
        padding: 3px 20px 0;
        box-shadow: none;
    }

    .header--nav-links > .dropdown > .dropdown-menu,
    .header--nav-links > .dropdown:hover > .dropdown-menu {
        display: none;
        margin-top: 0;
    }

    .header--nav-links > .dropdown.open > .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    /* PORTFOLIO SECTION */
    .portfolio--sizer,
    .portfolio--item {
        width: 50%;
    }

    /* POST ITEM */
    .post--items > .post--item,
    .post--items > .post--item:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
    }

    /* COMMENT LIST */
    .comment--items .comment--items {
        padding-left: 0;
    }
}

/* 1.3. SMALL DEVICES, TABLETS */
@media screen and (max-width: 767px) {
    /* OWL CONTROLS */
    .owl-nav, .owl-dots {
        max-width: none;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    /* HEADER SECTION */
    .header--navbar .navbar-toggle {
        margin-left: 15px;
        margin-right: 15px;
    }

    .header--navbar .navbar-collapse {
        left: 0;
        right: 0;
        max-width: none;
    }

    /* POST ITEM */
    .post--single-meta .nav {
        float: none;
        text-align: center;
    }

    .post--single-meta .nav + .nav {
        margin-top: 5px;
    }

    .post--single-meta .nav > li {
        float: none;
        display: inline-block;
    }

    .content--inner .alignleft,
    .content--inner .alignright {
        display: block;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .post--footer {
        text-align: center;
    }

    .post--footer .tagcloud,
    .post--footer .share {
        display: inline-block;
        float: none;
    }

    .post--footer .tagcloud + .share {
        margin-top: 20px;
    }
}

/* 1.4. SMALL DEVICES, SMARTPHONES */
@media screen and (max-width: 550px) {
    /* COL XXS */
    .col-xxs-12 {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 480px) {
    /* PORTFOLIO SECTION */
    .portfolio--sizer,
    .portfolio--item,
    .portfolio--item.grid--2 {
        width: 100%;
    }

    .portfolio--item figcaption .btns {
        margin-bottom: 0;
    }

    .portfolio--item figcaption .title,
    .portfolio--item figcaption p {
        display: none;
    }
}

/* 1.5. CUSTOM, IPHONE RETINA */
@media screen and (max-width: 380px) {
    
}