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

    Theme Name: MetroPix
	Version: 1.0
    Description: Premium WordPress Theme By WPExplorer
    Author: http://www.wpexplorer.com
    Author URI: http://themeforest.net/user/wpexplorer/
    Designed & Developed by http://www.wpexplorer.com
	Theme URI: http://themeforest.net/user/wpexplorer/galleries
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html



/* All Responsive
================================================== */
@media only screen and (max-width: 959px) {
 

	/*navigation top menu*/
    #navigation {
		font-family: inherit;
        height: 50px;
        width: 182px;
        background: #0090cb url("../images/responsive-select-white.png") right center no-repeat;
		margin: 0;
		margin-top: -25px;
		padding-left: 18px;
    }
	
	#navigation:hover {
		opacity: 0.8;
	}

    #navigation .selector {
        width: 100%;
        color: #fff;
        font-weight: 300;
        line-height: 50px;
		font-size: 18px;
    }

    #navigation .selector {
        height: 50px;
        width: 100%;
        display: -moz-inline-box;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        display: inline;
        cursor: pointer !important;
        text-align: left;
    }

    #navigation .selector {
        margin: 0;
        padding: 0;
        border: none;
    }

    #navigation .selector select {
        position: absolute;
        top: 0px;
        left: 0;
        height: 50px;
        background: none;
        width: 100%;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

    #navigation .selector select:focus {
        outline: 0;
    }

    #navigation .selector option {
        background: #fff;
        -webkit-appearance: none;
        padding: 15px 25px;
        border-color: #eee;
    }

    #navigation .selector:hover {
        opacity: 1;
        -moz-opacity: 1;
        -webkit-opacity: 1;
    }

    #navigation .selector span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #navigation .selector {
        display: inline-block;
    }

    #navigation ul {
        display: none;
    }
	
	
	/* Footer Nav */
	#footer-nav ul {
        display: none;
    }
	
	#footer-nav {
		position: absolute;
		top: -10px;
		right: 0;
		font-family: inherit;
		height: 20px;
		width: 30px;
		background: #0090cb url("../images/responsive-select-white-small.png") center center no-repeat;
		margin: 0;
		color: #fff;
  	}
  
	#footer-nav:hover {
		opacity: 0.8;
	}

	#footer-nav .selector {
		height: 20px;
		width: 100%;
		display: -moz-inline-box;
		display: inline-block;
		vertical-align: middle;
		zoom: 1;
		display: inline;
		cursor: pointer !important;
	}
	
	#footer-nav .selector {
		margin: 0;
		padding: 0;
		border: none;
	}
	
	#footer-nav .selector select {
		position: absolute;
		top: 0px;
		left: 0;
		height: 20px;
		background: none;
		width: 100%;
		font-family: inherit;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
	}
	
	#footer-nav .selector select:focus {
		outline: 0;
	}
	
	#footer-nav .selector option {
		background: #fff;
		-webkit-appearance: none;
		padding: 15px 25px;
		border-color: #eee;
	}
	
	#footer-nav .selector:hover {
		opacity: 1;
		-moz-opacity: 1;
		-webkit-opacity: 1;
	}
	
	#footer-nav .selector span {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	#footer-nav .selector {
		display: inline-block;
	}
	
}



/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
 
 
 	/* main*/
	body.body-boxed {
		background: #fff;
	}
	
	#site-wrap.boxed {
		margin: 0 auto;
		width: 100%;
	}
	
    .grid-1 {
        width: 700px;
    }
	
    #post {
        width: 450px;
    }
	
	#sidebar { 
		width: 220px;
	}
	
	.footer-box { 
		width: 210px;
		margin-right: 35px;
	}
	
	#page-heading-wrap {
		padding: 30px 0;
	}
	
	
	/* Columns*/
	.column-3 { width: 222px; margin-right: 17px; margin-bottom: 17px; }	
	.column-4 { width: 155px; }	
	.column-5{ width: 120px; }
	.column-6{ width: 100px; margin-right: 16px; margin-bottom: 16px; }
	.column-7{ width: 88px; margin-right: 14px; margin-bottom: 14px; }
	.column-8{ width: 77px; margin-right: 12px; margin-bottom: 12px; }
	.column-9{ width: 64.5px; margin-right: 15px; margin-bottom: 15px; }
	
	#post .column-1{ width: 450px }
	#post .column-2{ width: 215px }
	#post .column-3{ width: 138px; margin-right: 19px; margin-bottom: 19px }
	#post .column-4{ width: 99px; margin-right: 18px; margin-bottom: 18px }
	#post .column-5{ width: 74px }
	#post .column-6{ width: 65px; margin-right: 12px; margin-bottom: 12px }
	#post .column-7{ width: 53px; margin-right: 13px; margin-bottom: 13px }
	#post .column-8{ width: 47.5px; margin-right: 10px; margin-bottom: 10px }
	#post .column-9{ width: 42px; margin-right: 9px; margin-bottom: 9px }
	
	/* home*/
	#home-tagline{
		padding: 30px;
		font-size: 24px;
	}
	
	#home-slider .flex-control-nav,
	#home-slider .flex-control-thumbs {
		right: 24px;
		bottom: 24px;
	}
	
	#home-slider .flex-control-thumbs li img {
		width: 25px;
		height: 25px;
	}
	
	#home-recent-posts-left {
		width: 345px;
	}
	
	#home-recent-posts-right {
		width: 325px;
	}
	
	#home-recent-posts-right .thumb {
		width: 100px;
	}
	
	#home-recent-posts-right .description {
		width: 200px;
		font-size: 12px;
	}
	
	#home-recent-posts-right .recent-posts-sub:last-child {
		display: none;
	}
	
	/*blog*/
	#post-author-bio { 
		float: right;
		width: 350px;
	}
	

}


/* Tablet Portrait
================================================== */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	.symple-three-fourth, .symple-one-fourth, .symple-one-fifth, .symple-two-fifth,.symple-three-fifth, .symple-four-fifth, .symple-one-sixth, .symple-five-sixth { width: 100%; float: none; margin-right: 0; margin-bottom: 20px; }
	.symple-pricing-table > div{ margin-bottom: 25px; }
	.symple-box, .symple-box.left, .symple-box.right{ float: none; width: 100% !important; }
	
}




/* Tablet (Lanscape)
================================================== */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
	body.body-boxed {
		background: #fff;
	}
	
	#site-wrap.boxed {
		margin: 0 auto;
		width: 100%;
	}
	
}


/* Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {
	
	/*header*/
	#header {
		width: 100%;
		padding-top: 100px;
		padding-bottom: 30px;
	}
	
	#logo {
		float: none;
		text-align: center;
		margin: 0 auto;
	}
	
	#navigation {
		top: 0;
		right: auto;
		width: 100%;
		margin-top: 0;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	/*main*/
	body.body-boxed {
		background: #fff;
	}
	
	#site-wrap.boxed {
		margin: 0 auto;
		width: 100%;
	}
	
    .grid-1,
	#post,
	#sidebar,
	.footer-box{
        width: 280px;
    }
	
	.column-1,
	.column-2,
	.column-3,
	.column-4,
	.column-5,
	.column-6,
	.column-7,
	.column-8,
	.column-9,
	#post .column-1,
	#post .column-2,
	#post .column-3,
	#post .column-4,
	#post .column-5,
	#post .column-6,
	#post .column-7,
	#post .column-8,
	#post .column-9 {
		margin-right: 0;
		width: 100%;
	}

    #sidebar {
        margin-top: 60px;
		padding-top: 30px;
		border-top: 10px solid #eee;
    }
	
	#footer {
		padding-top: 0;
		border-top: 0;
	}
	
	#footer-wrap {
		margin-top: 0;
	}
	
	#copyright { 
		width: auto;
		margin-right: 40px;
	}
	
	/*columns*/
	.column-2, .column-3, .column-4, .column-5, .column-6 {
		margin-right: 0;
		margin-bottom: 20px;
	}
	
	/*slider*/
	#home-slider .flex-caption,
	#home-slider .flex-control-nav,
	#home-slider .flex-control-thumbs {
		display: none;
	}
	
	#home-slider .flex-control-thumbs li img {
		height: 25px;
		width: 25px;
	}
	
	/*homepage*/
	#home-tagline {
		font-size: 24px;
	}
	
	#home-recent-posts-left {
		width: 100%;
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 3px solid #eee;
	}
	
	#home-recent-posts-right {
		width: 100%;
	}
	
	#home-recent-posts-right .thumb {
		width: 30%;
	}
	
	#home-recent-posts-right .description {
		width: 65%;
	}
	
	/*headings*/
	#page-heading h1,
	#page-heading h2,
	#page-heading .main-title {
		font-size: 28px;
	}
	
	
	/*blog*/
	.entry-meta li,
	#post-meta li {
		display: block;
		float: none;
		margin-top: 5px;
	}
	
	.entry-meta li {
		font-size: 12px;
		margin-top: 0;
	}
	
	#post-meta li {
		font-size: 13px;
	}
	
	.loop-entry h2 {
		font-size: 24px;
		line-height: 1.6em;
	}
	
	#post-tags a {
		margin-bottom: 3px;
		margin-right: 3px;
		border: 1px solid #ddd;
	}
	
	#post-author-bio {
		float: right;
		width: 175px;
	}
	
	/*galleries*/
	#gallery-entries {
		margin: 0;
	}
	
	#related-galleries {
		margin-bottom: 30px;
	}
	
	#gallery-filter li {
		float: none;
		text-align: center;
	}
	
	#gallery-filter a {
		padding: 6px 12px;
	}
	
	/*comments*/
    .comment-details {
        margin-left: 0;
    }

    .comment-avatar {
        display: block;
		float: left;
		margin-right: 25px;
        margin-bottom: 25px;
        position: inherit;
        top: auto;
        left: auto;
    }

    .comment-date {
        display: block;
    }

    .children {
        margin: 30px 0 0;
    }

    .children li.depth-2, .children li.depth-3, .children li.depth-4, .children li.depth-5, .children li.depth-6, .children li.depth-7, .children li.depth-8, .children li.depth-9, .children li.depth-10 {
        margin: 0;
    }
	
	
	/* Symple Shortcodes */
	.symple-one-half, .symple-one-third, .symple-two-third, .symple-three-fourth, .symple-one-fourth, .symple-one-fifth, .symple-two-fifth,.symple-three-fifth, .symple-four-fifth, .symple-one-sixth, .symple-five-sixth { width: 100%; float: none; margin-right: 0; margin-bottom: 20px; }
	.symple-pricing-table > div{ margin-bottom: 25px; }
	.symple-box, .symple-box.left, .symple-box.right{ float: none; width: 100% !important; }
	
}


/* Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#site-wrap.boxed {
		margin: 0 auto;
		width: 100%;
	}
	
    .grid-1,
	#post,
	#sidebar,
	.footer-box,
	.column-2, .column-3, .column-4, .column-5, .column-6 {
        width: 370px;
    }
	
	#post-author-bio { 
		float: right;
		width: 260px;
	}

}