/******************************************************
	smaller than 1020px
*******************************************************/

@media screen and (max-width: 1020px) {
	
	.wrapper {
		width: 675px;
	}

	/*-------------------------------------------*\
		Header Styling
	\*-------------------------------------------*/

	#header-ad {
		display: none;
	}

	/*-------------------------------------------*\
		Top Menu Styling
	\*-------------------------------------------*/

	#top-menu-icon {
		display: block;
		width: 60px;
		height: 40px;
		background: url(../images/top-menu-icon.png) no-repeat center center;
		border-right: 1px solid #404040;
		border-left: 1px solid #404040;
		cursor: pointer;
		float: left;
	}

	#top-menu
	.wrapper {
		position: relative;
	}

	#top-menu
	.sf-menu {
		position: absolute;
		left: 1px;
		top: 40px;
		display: none;
		width: 270px;
		height: auto;
		padding: 5px 10px;
		background-color: #383838;
		border-left: none;
		z-index: 4000;
	}
	
	#top-menu
	.sf-menu li {
		border-right: none;
		float: none;
		height: auto;
	}

	#top-menu
	.sf-menu a {
		display: inline;
		text-transform: capitalize;
		height: auto;
		line-height: 34px;
		color: #878787;
	}
	
	#top-menu .sf-menu  a:hover, 
	#top-menu .current-menu-item a {
		color: #fff;
	}

	/*** Drop Down Menu ***/
	
	#top-menu
	.sub-menu {
		position: static;
		padding: 0 0 0 35px;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	#top-menu li
	.sub-menu li {
		border: none;
	}

	#top-menu li .sub-menu li a {
		padding: 0;
		line-height: 34px;
		text-transform: capitalize;
	}

	/*-------------------------------------------*\
		Main Nav Styling
	\*-------------------------------------------*/
	
	#main-nav
	.wrapper {
		position: relative;
	}
	
	#main-nav
	#menu-icon {
		display: block;
		width: 60px;
		height: 60px;
		background: url(../images/menu-icon.png) no-repeat center center #fff;
		cursor: pointer;
		float: left;
		border-right: 1px solid #E5E5E5;
		border-left: 1px solid #E5E5E5;
	}
	
	#main-nav
	.sf-menu {
		position: absolute;
		left: 1px;
		top: 60px;
		display: none;
		width: 270px;
		height: auto;
		padding: 5px;
		font-size: 14px;
		background-color: #383838;
		border-right: none;
		z-index: 4000;
	}
	
	#main-nav
	.sf-menu li {
		margin: 0;
		line-height: normal;
		text-transform: capitalize;
		clear: both;
		border-left: none;
		float: none;
		height: auto;
	}

	#main-nav a {
		display: inline;
		height: auto;
		line-height: 34px;
		color: #878787;
	}
	
	#main-nav a:hover, 
	#main-nav .current-menu-item a,
	#main-nav li:hover a {
		background-color: #383838;
		border-bottom: none;
		color: #fff;
	}

	/*** Drop Down Menu ***/
	
	#main-nav
	.sub-menu {
		position: static;
		padding: 0 0 0 35px;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	#main-nav li
	.sub-menu li {
		border: none;
	}

	#main-nav li .sub-menu li a {
		padding: 0;
		line-height: 34px;
	}

	/*-------------------------------------------*\
		Favourite Posts Styling
	\*-------------------------------------------*/

	#favourite-posts {
		float: none;
		margin: 0 auto 35px auto;
		margin-bottom: 35px;
	}

	/*-------------------------------------------*\
		Carousel Styling
	\*-------------------------------------------*/

	#carousel-wrap {
		display: none;
	}

	/*-------------------------------------------*\
		Main Sidebar Styling
	\*-------------------------------------------*/

	#main-sidebar {
		float: none;
		clear: both;
		margin: 0 auto 35px auto;
	}

	/*-------------------------------------------*\
		Main Footer Styling
	\*-------------------------------------------*/

	#main-footer {
		padding-bottom: 35px;
	}

	#first-col-widgets,
	#second-col-widgets,
	#third-col-widgets {
		width: 300px;
		height: auto !important;
		padding: 0 10px;
		float: none;
		border: none;
		margin: 0 auto;
	}

	#first-col-widgets 
	.widget,
	#second-col-widgets 
	.widget,
	#third-col-widgets 
	.widget {
		width: 300px;
		padding: 0;
		border: none;
	}

	#third-col-widgets 
	.small-posts li {
		width: 280px;
	}

	#copyright {
		height: auto;
		overflow: hidden;
	}
	
	#copyright p {
		margin-top: 20px;
	}
	
	#copyright p,
	#copyright ul {
		float: none;
		text-align: center;
		clear: both;
		line-height: normal;
		margin-bottom: 20px;
	}
	
	#copyright li {
		float: none;
		margin-bottom: 20px;
		margin-left: 0;
	}

}

/******************************************************
	smaller than 675px
*******************************************************/

@media screen and (max-width: 675px) {
	
	.wrapper,
	#content {
		width: 320px;
	}

	#featured-area {
		display: none;
	}

	/*-------------------------------------------*\
		Main Header Styling
	\*-------------------------------------------*/

	#logo {
		float: none;
		text-align: center;
	}

	#logo img {
		max-width: 320px;
		height: auto;
	}

	/*-------------------------------------------*\
		Posts Styling
	\*-------------------------------------------*/

	#posts .post {
		width: 320px;
	}

	.post-content {
		width: 300px;
	}

	/*-------------------------------------------*\
		Single Page Styling
	\*-------------------------------------------*/

	#single-wrap {
		width: 320px;
	}

	#entry-wrap {
		width: 300px;
	}

	.entry iframe,
	.entry object,
	.entry embed,
	.entry video {
		width: 100%;
		height: 170px;
		float: left;
	}
	
	.entry img {
		width: 100%;
		height: auto;
	}

	.entry-tags,
	#about-author {
		width: 300px;
	}

	#related-posts {
		width: 320px;
	}

	#related-posts
	.post {
		width: 300px;
	}

	#related-posts
	.post + .post {
		margin-top: 25px;
		margin-left: 0;
	}

	#author, #email, #url {
		width: 290px;
	}

	#comment {
		width: 96.5%;
		margin-top: 20px;
	}

	/*-------------------------------------------*\
		Contact Page Styling
	\*-------------------------------------------*/
	
	.wpcf7-text,
	.wpcf7-textarea {
		width: 96.5%;
	}
	
	.entry
	.ajax-loader {
		width: auto;
	}