/* ==============================================================================
                                RESPONSIVE LAYOUT
============================================================================== */

@media only screen and (max-device-width: 480px) { 
	
	/* ----- HEADER ----- */
	header { 
		margin: 0;
		width: 100%;
	}
	
	.feature-content header  {
		left: auto;
		position: relative;
		top: auto;
	}
	
		
		/* Logo */
		
		#logo { 
			display: block;
			z-index: 1;
		}
		
			#logo img {
				display: block;
				margin: 0 auto; 
			}
		
		
		/* Navigation */
		
		#mobile-navigation {
			background: #181818;
			clear: both;
			display: block;
			float: right;
			padding: 7px 10px;
			margin: 10px 25px 20px;				
			border-color: #222 #222 black;
			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
			filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
			-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
			-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
		}
		
		#mobile-navigation.close { background: none; }
		
			.icon-bar {
				display: block;
				width: 18px;
				height: 2px;
				background-color: whiteSmoke;
				-webkit-border-radius: 1px;
				-moz-border-radius: 1px;
				border-radius: 1px;
				-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
				-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
				box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
			}
			
			.icon-bar + .icon-bar { margin-top: 3px; }
				
		#main-navigation {
			display: none;
			bottom: auto;
			clear: both;
			height: auto;
			margin: 0 10px;
			padding-bottom: 10px;
			position: relative;
			right: auto;
			width: auto;
		}
		
		#navigation { 
			display: block;
			float: none;
		}
		
		#navigation li {
			float: none;
		}
		
			#navigation > li ul { display: block; }
			
			#navigation ul {
				background: none;
				position: relative;
			}
			
			#navigation ul li { width: auto; }
			
				#navigation ul li a { margin: 0 15px; }
	
	
	/* Tag line */
	
	.tag-line { 
		float: none;
		position: relative;
		right: auto;
		text-align: right;
		top: auto;		
	}
	
	/* ----- CONTENT ----- */
	
	.content-bg,
	.sidebar-bg,
	.feature-gradient { display: none; }
	
	body { min-width: 100%;}
	
	.wrapper,
	.inner-wrapper,
	#main,		
	#sidebar,
	.rule, .hr,
	.has-sidebar .rule,
	.has-sidebar .hr	{ width: 100%; }
	
	.rule, .hr,
	.has-sidebar .rule,
	.has-sidebar .hr { margin-left: 0; }	
	
	.has-sidebar .top { width: 90%; }
	
	.wrapper { background: none; }	
	.inner-wrapper { padding-bottom: 0; }
	
	/* ----- SLIDER ----- */
	.flexslider  { min-height: 0; }
	
	.flex-control-nav,
	.flex-direction-nav { display: none; }
	
	.flex-caption { 
		left: 10px !important;
		top: 10px !important;
		bottom: auto !important;
	}
	
	.main { background: #FFF; }
	.feature-content .main { margin: 0; }

	/* ----- SIDEBAR ----- */
	#sidebar { background-color: #F9F9F9; }

	#sidebar .widget,
	.footer-widgets .widget {
		background: none;
		display: block;
		float: none;
		padding: 20px 10px;
		margin-left: 0;
		width: auto;
	}
	
	/* ----- POST ----- */
	
	.post-tags,
	.share-box { 
		border: none;
		width: auto; 
	}
	
	/* ----- CONTACT ----- */
	#map_canvas-contact {
		height: 200px;
		width: 100%;
	}
	
	/* ----- BLOG (GRID) / PORTFOLIO ----- */
	
	.main-title + .secondary-button {
		clear: both;
		margin: 0 0 20px;
	}
	
	.portfolio-archive #filter li:first-child { display: none; }
	
	#blog-grid { margin: 0 10px; }
	
	.portfolio-archive #blog-grid article { height: auto; }

	#blog-grid article {
		border-top: 1px dotted #DDD;
		display: block;
		height: auto;
		padding: 20px 0 0;
	}
	
	.post-date {	
		bottom: auto;
		left: auto;
		margin: 10px 0;
		position: relative; 
	}	
	
	.post-excerpt { padding: 0; }
	
	.comment-count { display: none; }
	
	.comment-holder .avatar { display: none; }
		.comment-content { margin-left: 0; }	
	
	/* ----- BLOG TRADITIONAL ----- */
	
	.blog-traditional .feature-image-holder {
		background-image: none;
		height: auto;
		margin-top: 20px;
		position: relative;
		top: auto;
		width: 100%;
	}
	
	.blog-traditional .feature-image-holder + .post-excerpt { padding: 0; }
	
	/* ----- SHORTCODES ----- */
	
	/* Columns */
	.fourth,
	.grid_12 .fourth,
	.third,
	.grid_12 .third,
	.half,
	.grid_12 .half,
	.two-thirds,
	.grid_12 .two-thirds	{ 
		clear: both;
		float: none;
		margin: 0;
		width: auto;
	}
	
	/* Gallery */
	.gallery-item { clear: both; }
	
	/* Postlist */
	
	.postlist-post { margin: 0; }
	
	.postlist-post-date { 
		display: block;
		margin: 10px 0 0;
		position: relative;
	}
	
	.postlist-post-title {
		margin: 5px 0 0; 
		padding: 0;
	}
	
	/* Quotes */
	
	blockquote.alignleft,
	blockquote.alignright { 
		float: none;
		margin: 5px 0 9px;		
	}
	
	/* Pricing Table */
	
    .pricing-table { max-width: 100%; }

    .pricing-table-column {
        clear: both;
        float: none;
        margin: 0 auto;
        padding: 10px 20px;
    }
	
	/* ----- FORMS ----- */
	
	.searchform { margin: 0 auto; }

    #respond,
	form { max-width: 100% }

    input[type="text"],
    input[type="password"],
    textarea,
    select {
        max-width: 95%;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
	
	/* ---- TABLES ----- */

    table, thead, tbody,
    th, td, tr {    display: block }

    td {
        border-left: none;
        min-height: 19px;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
	
	/* Columns */
	
	.container_12,
	.container_12 .grid_1,
	.container_12 .grid_2,
	.container_12 .grid_3,
	.container_12 .grid_4,
	.container_12 .grid_5,
	.container_12 .grid_6,
	.container_12 .grid_7,
	.container_12 .grid_8,
	.container_12 .grid_9,
	.container_12 .grid_10,
	.container_12 .grid_11,
	.container_12 .grid_12 {
		clear: both;
		float: none;
		width: auto !important; 
	}
	
	.section-title { 
		float: none;
		width: auto;
	}
	
	.feature-image-holder {
		background-image: none !important;
		height: auto !important; 
	}
	
	/* ----- COMMENTS ----- */
	
	#comments .children .comment { padding-left: 20px; }
	
}