/* ==============================================================
Theme Name: Nom Nom V3
Theme URI: http://nomnom-media.com
Author: Netccentric Designers
Author URI: http://nomnom-media.com
Description: The New Nom Nom

Grey - #F3F5F8
Orange - #ffac00
Black - #333333
Red - #d63c23

================================================================*/

@media all and (max-width: 700px) {	

/* Reset and general classes
-------------------------------------------------------------- */

/*** General styling ***/	

	.mobile-hidden { display: none; }
	.desktop-hidden { display: block; }
	h1 { font-size: 1.8em; }

/*** Transition ***/


/*** Header/Main Navigation ***/
	
		#header { padding: 5px 0 2px; text-align: left; }
		#header nav { width: 100%; }
		#header nav ul { display: none; }
		#logo { display: none; }
		
		.menu-btn { display: inline-block; }
		.menu-btn img { width: 50px; height: 50px; padding-left: 29px; background: transparent url("../img/layout/menu-icons.png") no-repeat -45px 16px; background-size: 82%; }
		
		.archive-icon { display: block; position: absolute; width: 64px; height: 64px; overflow: hidden; text-indent: -9999px; background: transparent url("../img/layout/menu-icons.png") no-repeat 16px 16px; right: 0; top: 0; background-size: 140%; }
		.archive-icon:hover { background-color: #FFF; }
		
		.btn, .panel-comment span, input[type=submit] { padding: 10px 1.8em; }
		
		.home .archive-icon { display: none; }
		
		.page-title { display: inline-block; vertical-align: top; padding-top: 14px; width: 160px; height: 25px; overflow: hidden; }
	
/*** Alerts***/

	
/*
  Home Page Sections
======================================================================== */

	body.home article#home-casestudies { height: auto!important; padding-top: 0px; }
	
	.header-full { width: 110%; left: -5%; padding-left: 0; padding-right: 0; }
	body.home section { width: 90%!important; padding-left: 5%!important; padding-right: 5%!important; }
	
/*** Featured Blogpost / Case Studies***/	

	ul.grid-4-featured li.first.child { width: 100%; height: 244px; }
	ul.grid-4-featured li.first.child h3 a { padding-top: 130px!important; }
	ul.grid-4-featured li.child { width: 100%; }

/*** About Us ***/

	#home-intro #about-us .img-01 { padding: 0; width: 100%; margin-bottom: 30px; }
	#home-intro #about-us .desc-col { margin: 0; border-left: 0; }
	#home-intro .circle-background { height: 1250px; }

/*** Clients ***/

	ul.client {  }
	ul.client li.bubble-orange { width: 18%; height: auto; padding: 5px; margin: 2%; border-width: 10px; }
	ul.client li.bubble-orange img { width: 100%; }
	
	hr.yellow-line.one, #home-intro #graph .corner-line { display: none; }
	.nn-logo, cc-logo  { width: 80%; margin-bottom: 20px; }
	.nom-logo { width: 40%; margin-bottom: 20px; }
	
	#graph  ul.bloggers { margin-bottom: 30px; }
	#home-intro #graph .main-para { width: 100%; }

/*** Footer ***/

	.footer-inner { width: 100%; }
	footer { display: none; width: 80%; height: auto; padding: 0 3%; position: fixed; top: 65px; bottom: 0; background-color: #f2f2f2; overflow-x: hidden; overflow-y: scroll; z-index: 1999; color: #333; }
	footer ul.footer-nav { margin-bottom: 20px!important; }
	footer ul.footer-nav li a { color: #333!important; }
	footer .login-panel { margin-bottom: 20px; }

/*** Define Article + Blog Elements ***/

	.inner-wrapper { width: 100%!important; }
	.header-image { height: 203px; }
	
	.blogpost { padding-bottom: 0; }
	.v-overlay { height: 26px; background: transparent url("../img/layout/v-overlay-s.png") no-repeat 0 0; }
	
	.entry-body { margin: 20px; }
	.entry-body img { width: 100%; height: auto; max-height: 100%; }
	
	.entry-body, .post-navigation, .comments-area { margin: 20px; }
	
	.post-date { right: -20px; top: -46px; width: auto; font-size: 15px; }
	.container-video { width: 100%; left: 0; margin: 2em -20px; padding: 10px 20px; }
	
/*** Comments ***/

	ol.commentlist { margin: 0 20px; }
	.avatar { left: 20px; }

/*** Forms ***/

		textarea,
		input[type=url],
		input[type=tel],
		input[type=text],
		input[type=email],
		input[type=number],
		input[type=password] { width: 90%; line-height: 2.8em; padding: 2%; }
		
		textarea { padding: 11px; line-height: 1em; }
		input[type=submit] { padding: 10px 40px; }
		#searchform input[type=text] { height: 48px; }
		#searchform input[type=submit] { width: 55px; height: 55px; background: #ffac00 url("../img/layout/icons.png") no-repeat -27px 10px; float: right; padding: 13px 0 14px; position: absolute; top: 3px; right: 0px; background-size: 245px auto; }
	
		.comment-respond { margin: 20px; width: auto; }
		.form-submit { text-align: center; }
		
		.depth-1 .comment-respond { margin: 20px 0; }
		.depth-1 .comment-respond textarea,
		.depth-1 .comment-respond input[type=url],
		.depth-1 .comment-respond input[type=text],
		.depth-1 .comment-respond input[type=email] { width: 88%; }
                
		.news .layer-thumbnail { display: none; }
		.news .layer-excerpt { width: 100%; }
		.layer-formlogin a.btn { display: inline-block; margin: 0 0 10px; }

/*** Sidebar, Achieve, Categories ***/

		.sidebar-container { display: none; width: 80%; height: auto; padding: 0 3%; position: fixed; top: 65px; bottom: 0; background-color: #f2f2f2; overflow-x: hidden; overflow-y: scroll; z-index: 1999; }
		.sidebar-container .bubble { display: none; }

/* Miscellaneous - the search text box at the sidebar */

	.layer-postnavi { padding: 0 5% 15px; position: relative; clear: both; }
	.layer-postnavi:before, .layer-postnavi:after { display: table; }
	.layer-postnavi .panel-postnavinext { text-align: left; }
	
	.layer-postnavi .panel-postnaviprev a,
	.layer-postnavi .panel-postnavinext a { display: block; width: 60px; height: 60px; text-indent: -9999px; background: #000 url("../img/layout/pagination-icon.png") no-repeat 0 0; opacity: .6; overflow: hidden; cursor: pointer; }
	.layer-postnavi .panel-postnaviprev a { background-position: 10px 7px; }
	.layer-postnavi .panel-postnavinext a { background-position: -38px 7px; float: right; }
	
	.layer-postnavi .panel-postnaviprev a:hover,
	.layer-postnavi .panel-postnavinext a:hover { opacity: .8 }


/*** Related Post in Blogpost - Overwrite plugin CSS***/
		
	.layer-related .nr_panel { float: none; width: 96%; clear: both; padding: 2%; min-height: 1px!important; }
	.layer-related .nr_panel:before, .layer-related .nr_panel:after { display: table; content: ""; }
	.layer-related .nr_img_div img { width: 80px!important; height: auto!important; float: left; margin-right: 10px; margin-bottom: 10px; }
	.layer-related .nr_post_title { text-align: left; }
	
/*** Post Listing Page ***/
	
		p.panel-readmore { margin-bottom: 55px; text-align: left; }
		p.panel-readmore .btn, .panel-comment span  { display: block; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
		.category-tag { float: none!important; }
		#comments { padding-bottom: 20px; }
		.news h1.entry-title { width: 80%; }

/*** Search Result Page ***/

		#short-message-page { padding: 70px 20px; }

		#extra-searchform{ display:block; }

		#extra-searchform #s{ background-color:#F2F2F2; }

}
.clearfix::after{content:"";display:table;clear:both}