/* == media queries ================================================== */

/* General
================================================== */





/* Apply To All Responsive Layouts
================================================== */
@media only screen and (device-width: 768px) { }


/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 740px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	#wrapper {width:680px; padding:0 10px; }
	#header {width:680px;}
		#header #social { richness:0; top:130px}
	#header #logo { width:680px; position:absolute; top:0; left:0}
	#menubar ul a {padding:0 10px;}
	#footer {width:680px}
	#page {width:680px;}
		#mainCol {width:460px;}
		#sidebar {width:200px;}
		#searchform #s { width:178px}
		input[type="reset"], input[type="submit"], button { padding: 4px 10px; float:right; margin-top:5px}
	img{ max-width: 100%; height:auto;}
	#sidebar { padding-top:0}
	/* hide */
	div.textwidget, .adv {display:none;}
	

	
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 290px */
@media only screen and (max-width: 767px) {
	
	#wrapper {width:290px; padding:0; /*border:none*/ box-shadow:none; margin:0 auto}
	#header, #page, #mainCol, #sidebar {width:100%}
	p { font-size:14px !important; }
	
	#mainCol.archive { padding-top:0}
	#mainCol.archive h2 { font-size:22px; margin:10px 0}
	
	#header {border-bottom:4px double #EDEDED; height:90px} 
	#header #logo { background:url(images/header_small@2x.png) center top no-repeat; width: 290px; margin:0; height:100px; background-size: 290px 90px}
	#header #logo img {display:none}
	#header #menubar { display:none}
	
	img{ max-width: 100%; height:auto;}
	h1 {font-size:21px; line-height:24px}
	h2 {font: normal 16px}
	h3, h4 {font: normal 13px}
	body { background:#FFF}
	.post .entry blockquote { margin:20px 0}
	.post h1 { margin-bottom:5px;}
	.post {margin:0 0 20px;}
	
	#commentform input[type=text] {width: 265px; margin-bottom: 6px; font-size:12px; height:20px; color:#aaa;}
	#commentform textarea {width:265px; height:200px; color:#aaa; font-size:12px;}
	#commentform #buttInvia {padding-right:3px;}
	#commentform .log-as {margin:10px 0;  color:#aaa;}
	.post .badge-foodblogger {width:61px; height:61px; right:-5px}
	.alignleft {float:none; margin-right:0 !important; }
	.alignright {float:none; margin-left:0 !important;}
	
	
	
	/* menu icon */
	
	#menu-icon {display: block; text-align:right;  font-size:15px; text-transform:uppercase; padding:05px 30px 5px 5px; background:url(images/arrow-down@2x.png) center right no-repeat; background-size:28px 28px}
    .dropdown-menu {display: none;}
	#menubar ul {display:none}
	#menubar ul li a:hover {background:#24c6c3;}
	#menubar .arrow {position:absolute; top:2px; right:0px; width:12px; height:16px;}
	.back-top a { background:url(images/arrow-top@2x.png) center center no-repeat; background-size:27px 27px; bottom:10px; left:0}	
	
	/* hide */
	#social, #footer, #sidebar, div.ilpostheader, .back-top a {display:none;}
	/* rimetto la sidebar nel mobile */
	#sidebar {display:block;}
	.wp-block-embed { margin: 0 0 1em 0; }
	.wp-block-embed__wrapper iframe { max-width: 100%; }
	
	
}

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 420px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#wrapper {width:420px; padding:0 10px; background:#FFF; margin:0 auto}
	#header, #page, #mainCol, #sidebar {width:100%;}
	body {background:#FFF; }
	img{ max-width: 100%; height:auto;}
	
	#header {border-bottom:4px double #EDEDED; height:110px} 
	#header #logo { background:url(images/header@2x.png) center top no-repeat; background-size: 420px 110px; width: 420px; margin:0; height:110px}
	#header #logo img {display:none}
	#header #menubar {display:none}
	#commentform input[type=text], #commentform textarea {width: 255px;}
	.post {margin:0 0 20px;}

	
	/* hide */
	#social, #footer, #sidebar, .back-top a {display:none;}
	/* rimetto la sidebar nel mobile */
	#sidebar {display:block;}	
	
	
}



@media only screen and (min-width: 768px) {

	/* ensure .dropdown-menu is visible on desktop version */
	.dropdown-menu {
		display: none;
	}

}