/*--------------------------------------------------------

	Responsive Stylesheet
	
	Name: Swoquix
	Description: Clean Blogging Template
	URL: http://rommar.in.ua/swoquix
	Author: Roman Marusenko
	E-mail: maredwinz@gmail.com

	------------------------------------------------------

	[Table of contents]
		1. 1200 and more pixels screen
		2. 992 and more pixels screen
		3. 768 and more pixels screen
		4. 520 and more pixels screen

	------------------------------------------------------

	WARNING: All media queries arranged in order of decay.
	If you want to add your media query, add it so as not
	to upset the order.

	To add you media query use the syntax:
	@media (max-width: Npx) {
		Your code here
	}
	Where N is number of pixels of screen.
	
--------------------------------------------------------*/

/*------------------------
	1. 1200px
------------------------*/

@media (max-width: 1200px) {
    #head .carousel-caption {
        left: 35%;
        right: 35%;
    }
    #gallery .grid.grid-4 {
        margin-left: -10px;
        margin-bottom: -10px;
    }
    #gallery .grid.grid-4 li {
        width: 227px;
        margin-left: 10px;
        margin-bottom: 10px;
    }
    .highlight li .text-block {
        float: none;
        width: 100%;
        min-height: 100%;
        padding-bottom: 10px;
        border-right: 1px solid #e6e9ee;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }
    .highlight li .image {
        display: none;
    }
}

/*------------------------
	2. 992px
------------------------*/

@media (max-width: 992px) {
    #head .carousel-caption {
        left: 30%;
        right: 30%;
        top: 44%;
    }
    #blog-post #leave-comment .mini-button {
        float: none;
        margin: 20px auto 30px;
    }
    #gallery .grid.grid-4 {
        margin-left: -10px;
        margin-bottom: -10px;
    }
    #gallery .grid.grid-4 li {
        width: 233px;
        margin-left: 10px;
        margin-bottom: 10px;
    }
    .navbar li a {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*------------------------
	3. 768px
------------------------*/

@media (max-width: 768px) {
    #head .carousel-caption {
        left: 8%;
        right: 8%;
        top: 25%;
    }
    .navbar li a {
        color: #333;
        padding: 10px;
        text-align: center;
    }
    .navbar li a:hover,
    .navbar li a:active,
    .navbar li a:focus {
        background: #fff;
        color: #50c1e9;
    }
    .navbar li.dropdown:hover ul {
        border: none;
    }
    .navbar li.dropdown ul {
        display: block;
        background: #f6f7fb;
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
    }
    .navbar li.dropdown ul li a {
        text-align: center;
        padding: 10px;
        color: #333;
    }
    .navbar li.dropdown li a:hover {
        background: #f6f7fb;
        color: #50c1e9;
    }
    .navbar li.dropdown:hover ul {
        background: #f6f7fb;
    }
    .navbar-collapse {
        max-height: 100%;
    }
    footer p {
        float: none;
        text-align: center;
    }
    footer ul {
        float: none;
    }
    #about .main .content .text h5,
    #about .main .content .text p {
        text-align: center;
    }
    article .content .text .bottom .tags {
        display: none;
    }
    #blog-post article .content .bottom .tags {
        display: inline;
    }
    #blog-post article .content .bottom .share-like {
        display: none;
    }
    #home-2 article .content .text,
    #blog-2 article .content .text,
    #blog-post article .content .text {
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
    }
    #head .blur {
        display: none;
    }
    #blog-post #comments-list .comment img,
    #blog-post #leave-comment .comment .photo {
        display: none;
    }
    #blog-post #comments-list .reply {
        margin-left: 15px;
    }
    #gallery .grid.grid-4 {
        margin-left: -10px;
        margin-bottom: -10px;
    }
    #gallery .grid.grid-4 li {
        width: 340px;
        margin-left: 10px;
        margin-bottom: 10px;
    }
}

/*------------------------
	4. 520px
------------------------*/

@media (max-width: 520px) {
    #gallery .grid.grid-4 {
        margin-left: -10px;
        margin-bottom: -10px;
    }
    #gallery .grid.grid-4 li {
        width: 100%;
        margin-left: 10px;
        margin-bottom: 10px;
    }
    #not-found .main .content-block .text {
        padding: 50px;
    }
    #not-found .main .content-block .text h1 {
        font-size: 72px;
    }
    #not-found .main .content-block .text h1 span {
        display: none;
    }
    #not-found .main .content-block .text .input-group {
        width: 100%;
    }
}