/*
Theme Name: The Speckled Palate
Theme URI: https://www.thespeckledpalate.com;
Author: Sugar Studios Design
Author URI: http://sugarstudiosdesign.com/
Description: A custom theme for Erin from The Speckled Palate
Version: 0.1
License: The MIT License (MIT)
License URI: http://opensource.org/licenses/MIT
Tags: one-column, two-column, full-width-template, custom menu
Text Domain: thespeckledpalate
*/

body {
  background: url('images/background.png') repeat-x top, url('images/footer.jpg') repeat-x bottom;
  font-family: 'Lato', arial, sans-serif;
  color: #2c2d2d;
  font-size: 16px;
  line-height: 22px;
}

a {
  color: #8aabae;
  text-decoration: none;
}

a:hover {
  transition: color 0.5s ease;
  color: #2c2d2d;
}

/* Containers */


#wrapper {
  width: 1200px;
  margin: 0 auto;
  background: transparent;
}

#page {
  margin-top: 100px;
}

#utility {
  width: 50%;
  display: inline-block;
}

#header-area {
  width: 50%;
  float: right;
  text-align: right;
  padding-top: 20px;
}

#header-area img {
  padding-left: 10px;
}

#info {
	background: #f7f5f4;
	padding: 30px 50px;
    margin-bottom: 40px;
}

#info h1 {
	font-size:26px;
	text-align: center;
	border-bottom: 2px solid #c18e5c;
 	padding-bottom: 8px;
}

#info span {
	font-style:italic;
	font-size:18px;
}

#featuredrecipes {
  background: #f7f5f4;
  /*width: 100%;*/
  padding: 20px 20px 0 20px;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Lato', arial, sans-serif;
  color:#2c2d2d;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

#content {
  float: left;
  width: 60%;
}

#fullwidth {
  width: 100%;
  float: none;
  padding: 40px 0;
}

.sidebar {
  float: left;
  width: 40%;
  font-size: 16px;
  line-height: 22px;
}

#colophon /*footer*/ {
  width: 100%;
  color:#FFF;
  margin-top: 100px;
}

#copyright {
  text-align: center;
  color: #a7a7a7;
  font-size: 13px;
}

#copyright a {
  color: #FFF;
  text-decoration: none;
}

.clearfix { 
  clear: both; 
}

#nav-below {
  margin-bottom: 40px;
}

.nav-next {
  background: url('images/dogicon.jpg') no-repeat left;
  padding-left: 60px;
  padding-top: 20px;
  min-height: 37px;
  float: left;
  width: 40%;
}

.nav-previous {
  background: url('images/dogicon-left.jpg') no-repeat right;
  padding-right: 60px;
  padding-top: 20px;
  min-height: 37px;
  text-align: right;
  float: right;
  width: 40%;
}

.nav-next a, .nav-previous a {
  color: #2c2d2d;
  font-style: italic;
  text-transform: lowercase;
}

.nav-next a:hover, .nav-previous a:hover {
  text-decoration: underline;
}

.grid-item {
  display: inline-block;
  width: 23%;
  margin:0px 11px 11px 0; 
  position: relative;
  vertical-align: top;
  padding:0px;
  text-align: center;
}

.image-cropper2 {
  position: relative;
  width: 270px;
  height: 270px;
  overflow: hidden;
  background-size: contain;
}

.image-cropper2 img {
  transform: scale(.5, .5);
  -ms-transform: scale(.5, .5);
  -webkit-transform: scale(.5, .5);
}

.centered2 {
  position: absolute;
  left: -50%;
  top: -50%;
}

.caption {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  letter-spacing: 0px;
  font-weight: normal;
  padding: 5px 5px 0px 5px;
  min-height: 40px;
  color: #2c2d2d;
}

#threecol {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  max-height: 150px;
}

.press {
  width: 30%;
  float: left;
  padding: 10px 20px;
}

#pressimages {
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  padding: 0px !important;
}

/* Sidebar */

.sidebar h3 {
  text-align: center;
  border-bottom: 2px solid #c18e5c;
  padding-bottom: 8px;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0px 120px 20px 120px;
}

.sidebar aside {
  margin-top: 40px;
}

.sidebar aside label.screen-reader-text {
  display: none;
}

h4.srp-post-title a {
  color: #2c2d2d;
  font-size: 16px 
}

h2.srp-widget-title {
  text-align: center;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

.srp-widget-singlepost {
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

aside.welcome {
  margin-top: 0px;
}

select#cat.postform {
  border: 1px solid #cbc8c7;
  color: #2c2d2d;
  font-style: italic;
  font-size: 16px;
  font-family: 'Lato', arial, sans-serif;
  text-transform: lowercase;
  width: 100%; 
  background: url('images/arrow.png') no-repeat right #FFF;
  font-weight: 300;
  border-radius: 0;
   -webkit-appearance: none;
   padding: 20px 15px;
   letter-spacing: 1px;
}

.emailsignup {
  background: #f7f5f4;
  padding: 20px;
  text-align: center; 
  margin-top: 0px;
}

.gform_wrapper .emailsignup .gform_footer input.button, 
.gform_wrapper .emailsignup .gform_footer input[type=submit], 
.gform_wrapper .emailsignup .gform_page_footer input.button, 
.gform_wrapper .emailsignup .gform_page_footer input[type=submit] input[type="submit" i] {
	width: 100% !important;
}

.gform_wrapper .emailsignup ul.gform_fields li.gfield {
	padding-right: 0px !important;
}

.gform_wrapper .emailsignup input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
	padding: 10px 10px !important;
}

.gform_wrapper .emailsignup .gform_footer {
	margin: 0px !important;
}

.gform_wrapper .top_label .hide-label .ginput_complex span label,
.gform_wrapper .top_label .hide-label .gfield_label {
	display: none;
}

.emailsignup h2,
.gform_wrapper .emailsignup h3.gform_title,
.gform_confirmation_message h3 {
	width: 55%;
	margin-left: auto;
	margin-right: auto;
	font-size: 21px;
	font-weight: 400;
	margin-top: 5px;
	border-bottom: 2px solid #c18e5c !important;
	padding-bottom: 8px;
}

#mc_embed_signup {
  background:none !important;
}

#mc_embed_signup input.email {
  border-radius: 0px !important;
  width: 90% !important;
  border: 1px solid #cbc8c7 !important;
  padding: 3px 10px !important;
}

#mc_embed_signup input.button {
  background: url('images/blackbuttonbg.jpg') repeat-x !important;
  padding: 3px 10px 10px 10px !important;
  width: 95% !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  border-radius: 0px !important;
  height: 52px !important;
  }

.searchbox {
  background: #f7f5f4 url('images/forkandspoon.jpg') no-repeat top;
  padding: 100px 0px 40px 0px;
  text-align: center; 
}

.searchbox label .screen-reader-text, .searchbox .search-submit {
  display: none;
}

.search-field {
  border-radius: 0px !important;
  padding: 10px !important;
  border: 1px solid #cbc8c7;
  color: #2c2d2d;
  font-style: italic;
  font-size: 16px;
  font-family: 'Lato', arial, sans-serif;
  text-transform: lowercase;
  font-weight: 300;
  letter-spacing: 1px;
  width: 50%;
}

/* Buttons */

.bluebutton {
  background: url('images/bluebuttonbg.jpg') repeat-x;
  padding: 10px 0px;
  width: 60%;
  font-size: 16px;
  letter-spacing: 1px;
}

.bluebutton a {
  text-decoration: none;
  color: #FFF;
}

.bluebutton a:hover {
  transition: color 0.5s ease;
  color: #2c2d2d;
}

.blackbutton {
  background: url('images/blackbuttonbg.jpg') repeat-x;
  padding: 10px 0px;
  width: 60%;
  font-size: 16px;
  letter-spacing: 1px;
}

.btn {
  background: url('images/blackbuttonbg.jpg') repeat-x;
  padding: 10px 20px;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: lowercase;
}

a.btn {
  text-decoration: none;
  color: #FFF;
}

a.btn:hover {
  transition: color 0.5s ease;
  color: #c18e5c;
}

/* Footer */

#colophon h3 {
  text-align: center;
  border-bottom: 2px solid #c18e5c;
  padding-bottom: 8px;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0px 20px 20px 20px;
  color:#FFF;
}

#colophon aside {
  width: 33%;
  display: inline-block;
  margin-bottom: 40px;
  vertical-align: text-top;
}

#colophon aside ul {
  vertical-align: middle;
}

#colophon ul li {
  list-style-type: none;
  text-transform: uppercase;
  line-height: 25px;
}

#colophon ul li a {
  color: #FFF;
  text-decoration: none;
}

#colophon ul li a:hover {
  transition: color 0.5s ease;
  color: #c18e5c;
}

.footermenu {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  max-height: 150px;
}

.footermenu ul {
  margin: 0px;
}

#colophon .instagram-footer aside {
  width: 100%;
  margin-bottom: 120px;
}

#colophon .instagram-footer aside h3 {
  border-bottom: 0px;
  color: #2c2d2d;
}

.tsplogo {
  background: url('images/logo-tsp.png') no-repeat;
  width: 126px;
  height: 126px;
  position: relative;
  margin-top: -105px;
  margin-bottom: 27px;
  z-index: 1px;
  text-indent: -9999px;
  margin-left: auto;
  margin-right: auto;
}

.sticky2 {
  width: 33%;
  /*background: rgba(black, 0.05);
  outline: 1px solid #444;*/
  display: inline-block;
  margin-top: 40px;
}

.featured {
  width: 100%;
  text-align: left;

}

.featuredthumb {
  float: left;
}

.featuredtext {
  border-top: 2px solid #c18e5c;
  border-bottom: 2px solid #c18e5c;
  padding: 10px 0px;
  margin-left: 20px;
  float: left;
  width: 40%;
}

.featuredtext a {
  color: #2c2d2d;
  text-transform: capitalize;
  font-size: 20px;
  line-height: 24px;
  font-weight: normal;
}

/* Posts */

.date {
  font-size: 14px;
  font-style: italic;
  font-weight: 100;
  text-transform: lowercase;
  text-align: center;
}

hr {
  border-bottom: 4px double #c18e5c;
}

.categories, .categories a {
  font-size: 14px;
  font-style: italic;
  font-weight: 100;
  text-transform: lowercase;
  text-decoration: none;
  color: #2c2d2d;
}

.categories {
  width: 80%;
  display: inline-block;
}

.categories a:hover {
  text-decoration: underline;
}

.categories2 {
  text-align: center;
  color: #c18e5c;
  font-size: 14px;
  line-height: 16px;
  text-transform: lowercase;
}

.categories2 a {
  text-decoration: underline;
  color: #2c2d2d;
}

.categories2 a:hover {
  text-decoration: underline;
}

.tags {
  font-weight: 600;
  font-size: 14px;
  width: 100%;
  margin-bottom: 20px;
}

.tags a {
  color: #2c2d2d;
  font-style: italic;
  text-decoration: none;
  font-weight: 100;
}

.tags a:hover {
  text-decoration: underline;
}


.comments, .comments a, .comments2, .comments2 a {
  font-size: 14px;
  font-style: italic;
  font-weight: 100;
  text-transform: lowercase;
  text-decoration: none;
  color: #2c2d2d;
  text-align: right;
}

.comments {
  background: url('images/comment.jpg') no-repeat left;
  width: 15%;
  display: inline-block;
  padding-left: 5px;
  float: right;
}

.comments2 {
  background: url('images/comment.jpg') no-repeat left;
  width: 20%;
  float: right;
  padding-left: 15px;
}

.comments3 {
  background: url('images/comment.jpg') no-repeat left;
  width: 15%;
  display: inline-block;
  padding-left: 30px;
  float: right;
  margin-top: 25px;
}


 .comments a:hover {
  text-decoration: underline;
 }

 .stickycomments a {
  font-size: 14px;
  font-style: italic;
  font-weight: 100;
  text-transform: lowercase;
  text-decoration: none;
  color: #2c2d2d;
 }

.meta {
  margin: 20px 0px;
}

.share {
  background: url('images/share.jpg') no-repeat left;
  padding-left: 100px;
  width: 65%;
  display: inline-block;
  min-height: 52px;
}

#content img {
  max-width: 720px;
  height: auto;
}

.homethumb, .homethumb img {
  width: 260px !important;
  height: auto;
  display: inline-block;
}

/* WP Recipe */

div.wprm-recipe.wprm-recipe-simple {
  padding: 40px !important;
  background: #f7f5f4 url('images/recipetexture.jpg') top no-repeat !important;
  border:none !important;
  font-size: 16px !important;
}

.wprm-recipe-simple .wprm-recipe-details-name {
  text-transform: uppercase !important;
  font-size: 14px;
  color: #c18e5c;
  min-width: 100px !important;
}

.wprm-recipe-simple h2.wprm-recipe-name {
  width: 54% !important;
  line-height: 32px !important;
  padding-bottom: 10px !important;
  background: url('images/measuringspoons.png') top no-repeat !important;
  padding-top: 60px !important;
  margin-bottom:25px !important;
}

.wprm-recipe-simple .wprm-recipe-details-icon svg {
  display: none !important;
}

.wprm-recipe-simple h3.wprm-recipe-header {
  font-weight: 400 !important;
  clear: both !important;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  letter-spacing: 1px;
  font-size: 20px !important;
}

div.wprm-recipe-ingredients-container, div.wprm-recipe-instructions-container {
  border-bottom: 2px solid #c18e5c !important;
  padding-bottom: 20px !important;
}

.wprm-recipe-simple h4.wprm-recipe-group-name {
  font-weight: bold !important;
  margin: 20px 0px 5px 0px !important; 
}

ul.wprm-recipe-ingredients {
  margin: 0px !important;
  padding: 0px !important;
  text-indent: 0px !important;
}

.wprm-recipe-simple ul li {
  padding: 3px 0px !important;
  list-style: none !important;
  margin: 0px !important;
}

li.wprm-recipe-ingredients {
  padding: 20px !important;
}

ol.wprm-recipe-instructions {
    margin-left: -15px !important;
    padding: 0px !important;
    text-indent: 0px !important
}

/* Easy Recipe */

div.easyrecipe {
  background: #f7f5f4 url('images/recipetexture.jpg') top no-repeat !important;
  border: none !important;
  padding: 40px !important;
  font-family: 'Lato', arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #2c2d2d !important;
}

.easyrecipe .ERSName {
  font-family: 'Lato', arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  background: #f7f6f4 url('images/measuringspoons.png') left no-repeat !important;
  padding: 20px 0 0 50px !important;
  min-height: 45px !important;
  float: left !important;
  width: 55% !important;

}

.ERSSectionHead {
  margin: 20px 0 !important;
}

button#chicory-button {
  box-shadow: none !important;
  border-radius: 0px !important;
  background: url('images/blackbuttonbg.jpg') repeat-x !important;
  padding: 0px 0px 14px 0px !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  border: none !important;
  color: #FFF !important;
  text-transform: lowercase !important;
  font-family: 'Lato', arial, sans-serif !important;
  font-weight: lighter !important;
  text-align: center !important;
  width: 25% !important;
}

button#chicory-button:hover {
  background: url('images/blackbuttonbg.jpg') repeat-x !important;
}

.ERSClear {
  clear: none !important;
}

.ERSIngredients ul li {
  list-style-type: none !important;
  line-height: 24px !important;
}

.easyrecipe .ERSTimes {
  border: 0px !important;
  width: 100% !important;
  clear: both !important;
  padding-top: 20px !important;
}

.easyrecipe .ERSTopRight {
  float: left !important;
}

.easyrecipe .ERSTimeRight {
  border: none !important;
}

.ERSIngredients {
  padding-top: 10px !important;
  border-top: 4px double #c18e5c !important;
  margin-top: 30px !important;
}

.easyrecipe .ERSInstructions li.instruction {
  line-height: 20px !important;
  margin-top: 10px !important;
}

.ERSServes {
  display: inline-block !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: #c18e5c !important;
  width: 100% !important;
  font-weight: bold !important;
}

.ERSServes span {
  color: #000 !important;
  font-weight: normal !important;
  text-transform: capitalize !important;
}

.ERSCategory {
  display: none !important;
}

.ERSTimeHeading {
  text-transform: uppercase !important;
  color: #c18e5c !important;
}

time {
  font-size: 12px !important;
  font-weight: bold !important;
  text-transform: capitalize !important;
}

.easyrecipe .ERSIngredients .ERSIngredientsHeader, .easyrecipe .ERSInstructions .ERSInstructionsHeader, .easyrecipe div .ERSNotesHeader {
  font-weight: 600 !important;
  font-size: 18px !important;
}

.easyrecipe .ERSDetails {
  border-top: 8px double #c18e5c !important;
  border-bottom: 2px solid #c18e5c !important;
  padding: 10px 0 !important;
}

div.easyrecipe div.ERSSavePrint .ERSSaveBtnSpan .ERSSaveBtn, div.easyrecipe div.ERSSavePrint .ERSPrintBtnSpan .ERSPrintBtn {
  border-radius: 0px !important;
  background: url('images/blackbuttonbg.jpg') repeat-x !important;
  padding: 0px !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  border: none !important;
  color: #FFF !important;
  text-transform: lowercase !important;
  font-family: 'Lato', arial, sans-serif !important;
  font-weight: lighter !important;
  text-align: center !important;
  margin-top: 10px !important;
}

.easyrecipe .ui-button-text-icon-primary .ui-button-text {
  padding: 5px 30px 8px 30px !important;
}

span.ui-button-icon-primary.ui-icon.ERSPrintIcon, span.ui-button-icon-primary.ui-icon.ERSSaveIcon {
  display: none !important;
}

.ERSNotes {
  font-style: italic !important;
}

.ERSNotes a {
  text-decoration: underline !important;
  color: #2c2d2d !important;
}

.ERSNotesHeader {
  padding-top: 30px !important;
  border-top: 4px double #c18e5c !important;
  margin-top: 30px !important;
}

.ERSSummary {
  font-family: 'Droid Serif', serif !important;
  font-style: italic !important;
  font-size: 16px !important;
  line-height: 24px !important; 
  text-align: center !important;
  margin: 40px 0px 20px 0px !important;
  display: inline-block !important;
}

.ERSAuthor {
  text-align: center !important;
  margin-bottom: 40px !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  color: #c18e5c !important;
  font-size: 13px !important;
}

/* Related Posts */

.zem_rp_wrap .related_post_title {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}

div.zem_rp_content {
  padding: 20px 0px;
  overflow: visible !important;
}


/* Recipe Index */


.ingredients ul {
   -webkit-column-count: 5; /* Chrome, Safari, Opera */
  -moz-column-count: 5; /* Firefox */
  column-count: 5;
  max-height: 750px;
  margin: 20px 0;
}

.ingredients li {
  list-style-type: none;
}

.ingredients li a {
  color: #2c2d2d;
}

.ingredients li a:hover {
  color: #8aabae;
}

/* Form */

.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea {
  border-radius: 0px !important;
  padding: 10px !important;
  border: 1px solid #cbc8c7;
  color: #2c2d2d;
  font-style: italic;
  font-size: 16px;
  font-family: 'Lato', arial, sans-serif;
  text-transform: lowercase;
  font-weight: 300;
  letter-spacing: 1px;
}

input[type="submit" i] {
  background: url('images/blackbuttonbg.jpg') repeat-x;
  padding: 10px 50px;
  box-sizing: border-box;
  width: 30%;
  font-size: 16px;
  letter-spacing: 1px;
  border: none;
  color: #FFF;
  text-transform: lowercase;
  font-family: 'Lato', arial, sans-serif;
  cursor: pointer;
}


/* Typography */

h1 {
  font-size: 26px;
  font-weight: 400; 
  text-transform: capitalize;
  margin-top: 5px;
  /*line-height: 28px;*/
	line-height: 42px;
}

h2 {
  font-size: 21px;
  font-weight: 400; 
  margin-top: 5px;
  border-bottom: 2px solid #c18e5c;
  padding-bottom: 8px;
}

h3 {
  font-size: 16px;
  font-weight: 400; 
  text-transform: capitalize;
  margin-top: 5px;
}

h4 {
  font-size: 12px;
  font-weight: 400; 
  text-transform: capitalize;
  margin-top: 5px;
}

.underline {
  border-bottom: 2px solid #c18e5c;
  padding-bottom: 8px;
}

h3.widget-title {
  text-align: center;
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 400;
  margin-bottom: 40px;
}

.archive-header {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 50px;
}

.entry-header h1 {
  text-align: center;
  border-bottom: 2px solid #c18e5c;
  padding-bottom: 8px;
  line-height: 32px;
}

.entry-header h1 a {
  text-decoration: none;
  color: #2c2d2d;
  font-size: 26px;
}

.entry-header h1 a:hover {
  color: #c18e5c;
  transition: color 0.5s ease;
}

#poststyle2 {
  width: 60%;
  float: right;
  padding-top: 0px;
  margin-top: 0px;
}

#poststyle2 p {
  margin-top: 0;
}

article {
  margin-bottom: 60px;
}

#comments article {
  margin-bottom: 20px !important;
}

/* Comments */

#comments, #respond {
  margin-top: 40px;
}

ol.commentlist {
  padding: 0px;
}

.commentlist li {
  list-style-type: none;
  background: #f7f5f4;
  padding: 20px 20px 1px 20px;
  margin-bottom: 10px;
}

.commentlist  li ul li {
  margin-bottom: 0px;
}

.comment-reply-link {
  color:#8aabae;
  text-decoration: none;
}

.comment-reply-link:hover {
  color: #2c2d2d;
  transition: color 0.5s ease;
}

.post .pingback li {
  padding-top: 0px; 
}

time {
  font-weight: 300;
}

.fn a {
  text-decoration: none;
  color: #2c2d2d;
  font-weight: bold;
  float: left;
}

img.avatar {
  margin: 0px 20px 0px 0px;
  float: left;
}

input#submit.submit {
  background: url('images/blackbuttonbg.jpg') repeat-x;
  padding: 10px 0px;
  width: 30%;
  font-size: 16px;
  letter-spacing: 1px;
  border: none;
  color: #FFF;
  text-transform: lowercase;
  font-family: 'Lato', arial, sans-serif;
}

textarea {
  width: 100%;
  border: 1px solid #cbc8c7;
  padding: 10px;
  font-size: 14px;
  margin-top: 10px;
}

input#author, input#email, input#website {
  border: 1px solid #cbc8c7;
  padding: 10px;
  font-size: 14px;
  margin-top: 10px;
}

/* Navigation */

#mobile {
  display: none;
}

#utility ul {
  padding-left: 0;
  margin-left: 0;
  float: left;
  width: 100%;
  font-family: 'Lato', arial, helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
}

#utility ul li {
    display: inline;
}

#utility ul li a {
    padding: 0.2em 1em;
    color: #c18e5c;
    text-decoration: none;
    float: left;
  }

#utility ul li a:hover {
  color: #2c2d2d;
  transition: color 0.5s ease;
}

#utility ul ul {
    display: none;
    position: absolute;
    top: 18px;
    left: 5px;
    /*float: left;*/
    width: 180px;
    z-index: 99999;
}

#utility ul li:hover > ul {
    display: block;
}

#utility ul ul a {
    line-height: 1em;
    padding: 10px;
    width: 160px;
    height: auto;
    text-transform: lowercase;
    font-weight: 400;
    font-size: 16px;
}

 #utility li,
    div#utility li {
    float: left;
    position: relative;
}

#access ul {
  padding-left: 0;
  margin-left: 0;
  float: left;
  width: 100%;
  font-family: 'Lato', arial, helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  font-weight: 600;
}

#access ul li {
    display: inline;
}

#access ul li a {
    padding: 0.2em 1em;
    color: #2c2d2d;
    text-decoration: none;
    float: left;
    margin-right: 20px;
  }

#access ul li a:hover {
  color: #c18e5c;
  transition: color 0.5s ease;
}

#access ul li.logo a {
  background: url('images/logo.png') no-repeat;
  width: 249px;
  height: 252px;
  text-indent: -9999px;
  position: relative;
  margin-top: -108px;
  margin-left: 40px;
  margin-right: 20px;
}

#access {
  display: table;
  margin: 0 auto;
}

 #access li,
    div#access li {
    float: left;
    position: relative;
}

#access ul ul {
    display: none;
    position: absolute;
    top: 28px;
    left: 0;
    /*float: left;*/
    width: 180px;
    z-index: 99999;
    background: #f7f5f4;
    padding: 10px;
}

#access ul li:hover > ul {
    display: block;
}

#access ul ul a {
    line-height: 1em;
    padding: 10px;
    width: 160px;
    height: auto;
    text-transform: lowercase;
    font-weight: 400;
    font-size: 16px;
}

.logomobile {
  display: none;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: url('images/footer-mobile.jpg') repeat;

}

/* hide sub nav on default*/
ul.sub-menu {
  display: none;
}

/* show sub nav on click*/
.menu-item-has-children a:hover ~ .sub-menu {
  display: block;
}



/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
    padding: 0px;
  }
}

/* Removed mobile navigation from desktop view */
@media screen and (min-width:680px) {
  ul.topnav {display: none;}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}



/* Media Queries */

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

    body {
      background: url('images/footer-mobile.jpg') repeat-x bottom;
    }

        html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

    #utility, #access {
      display: none;
    }

    #content {
      width: 100%;
      float: none;
    }

    #content img {
      min-width: 320px;
      max-width: 320px;
      height: auto;
    }

    #content .zem_rp_thumbnail img {
    max-width: 160px !important;
    min-width: 160px !important;
    min-height: 160px !important;
    max-height: 560px !important;
    }

    .size-post-thumbnail {
      width: 310px;
      height: 310px;
    }

    #poststyle2 {
      width: 100%;
      float: none;
    }

    .comments {
      padding-left: 30px;
    }

    div.comment-author.vcard img {
      max-width: 60px !important;
      min-width: 60px !important;
      height: auto;
    }

    .comments2 {
      width: 100%;
      float: none;
      text-align: left;
      padding-left: 25px;
      margin-top: 20px;
    }

    article {
      margin-bottom: 20px;
    }

    .sidebar {
      width: 100%;
      float:none;
    }

    .sidebar img {
      max-width: 300px;
    }

    .sidebar h3 {
      margin-left: 60px;
      margin-right: 60px;
    }

    .sidebar ul {
      margin: 0px;
      padding: 0px;
    }

    #utility {
      width: 100%;
      float: none;
    }

    #header-area {
    width: 100%;
    float: none;
    text-align: center;
    }

    .grid-item {
      width: 100% !important;
    }

    .image-cropper2 {
    position: relative;
    width: 360px;
    height: 360px;
    overflow: hidden;
    background-size: contain;
    margin: 0px 5px;
    }

    .image-cropper2 img {
      transform: scale(1.6, 1.6);
      -ms-transform: scale(1.6, 1.6);
      -webkit-transform: scale(1.6, 1.6);
    }

    .centered2 {
      position: absolute;
      left: 1%;
      top: 2%;
    }

    .ingredients ul {
       -webkit-column-count: 2; /* Chrome, Safari, Opera */
      -moz-column-count: 2; /* Firefox */
      column-count: 2;
      max-height: 750px;
      margin: 20px 0;
      margin-left: -20px;
    }

    #access ul li.logo a {
      display: none;
    }

    .share {
      width: 100%;
      padding-bottom: 0px;
      background: none;
      padding-left: 0px;
      width: 100%;
      padding-top: 40px;
      background: url('images/share.jpg') no-repeat top center;
    }

     .srp-thumbnail-box img {
      max-width: 75px !important;
      max-height: 75px !important;
      min-width: 75px !important;
      min-height: 75px !important;
    }

    .comments {
      width: 100%;
      float: none;
      text-align: left;
      margin-top: 10px;
    }

    .comments3 {
      background: url('images/comment.jpg') no-repeat left;
      width: 100%;
      display: inline-block;
      padding-left: 30px;
      float: left;
      margin-bottom: 15px;
      margin-top: 0px;
    }

    .commentlist li {
     margin-bottom: 10px;
    }

    input#submit.submit {
      width: 100%;
      text-align: center;
    }

    textarea {
      max-width: 280px;
    }

    .logomobile {
      background: url('images/logo.png') no-repeat;
      width: 249px;
      height: 252px;
      text-indent: -9999px;
      display: block;
      margin-top: -80px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50px;
    }

    #colophon aside {
      width: 100%;
    }

    .bluebutton {
      width: 80%;
    }

    .tsplogo {
      background: url('images/logo-tsp.png') no-repeat;
      width: 126px;
      height: 126px;
      position: relative;
      margin-top: -105px;
      margin-bottom: 27px;
      z-index: 1px;
      text-indent: -9999px;
      margin-left: auto;
      margin-right: auto;
    }

    #colophon {
      width: 100%;
      color:#FFF;
      margin-top: 100px;
      padding-top: 50px;
    }

    .archive-header {
      width: 100%;
    }

    .wprm-recipe-simple h2.wprm-recipe-name {
      width: 100% !important;
      background-image: none !important;
      padding-top: 0px !important;
    }

    .wprm-recipe-image img {
      min-width: 270px !important;
      max-width: 270px !important;
    }

    div.wprm-recipe.wprm-recipe-simple {
      padding: 20px !important;
    }

    .wprm-recipe-image-container {
      margin: 0px 0px 20px 0px !important;
    }

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    #wrapper {
      width: 100%;
    }

    #content {
      width: 100%;
      float: none;
    }

    .sidebar {
      width: 100%;
      float:none;
    }

    #site-header h1 {
     background-size: contain;  
  }

    #utility {
      width: 100%;
      float: none;
    }

    #header-area {
    width: 100%;
    float: none;
    text-align: center;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

    #content {
      width: 100%;
      float: none;
    }

    .sidebar {
      width: 100%;
      float:none;
    }

    #site-header h1 {
  background-size: contain;  
}
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

    body {
      background: url('images/footer-mobile.jpg') repeat-x bottom;
    }

    #wrapper {
      width: 100%;
    }
    
    #content {
      width: 100%;
      float: none;
    }

    #content img {
      min-width: 320px;
      max-width: 320px;
      height: auto;
    }

    #content .zem_rp_thumbnail img {
    max-width: 160px !important;
    min-width: 160px !important;
    min-height: 160px !important;
    max-height: 560px !important;
    }

    div.comment-author.vcard img {
      max-width: 60px !important;
      min-width: 60px !important;
      height: auto;
    }

    .sidebar {
      width: 100%;
      float:none;
    }

    .sidebar img {
      max-width: 320px;
    }

    #site-header h1 {
     background-size: contain;  
    }

    #utility {
      width: 100%;
      float: none;
    }

    #header-area {
      width: 100%;
      float: none;
      text-align: center;
    }

    #featuredrecipes {
      display: none;
    }

     .srp-thumbnail-box img {
      max-width: 75px !important;
      max-height: 75px !important;
      min-width: 75px !important;
      min-height: 75px !important;
    }

    .srp-container-multi-column .srp-post-multi-column {
      margin-right: 0px;
      margin-left: 5px;
    }

    .srp-post-title {
      line-height: 16px;
    }

    h2.srp-widget-title {
      width: 60%;
    }

    .search-field {
      width: 75%;
    }

    #pressimages img {
      max-width: 250px;  
	  height: auto;
    }

    #pressimages {
      padding: 0px;
    }

    .press {
      width: 90%;
      padding-top: 0px;
      padding-bottom: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
    }

    .press p {
      margin: 15px 0px;
      padding: 0px;
    }

     #pressimages img {
      max-wdith:265px;
    }

    #info {
      padding: 30px 20px;
    }

    .grid-item {
      width: 100% !important;
    }

    .image-cropper2 {
    position: relative;
    width: 360px;
    height: 360px;
    overflow: hidden;
    background-size: contain;
    margin: 0px 5px;
    }

    .image-cropper2 img {
      transform: scale(1.6, 1.6);
      -ms-transform: scale(1.6, 1.6);
      -webkit-transform: scale(1.6, 1.6);
    }

    .centered2 {
      position: absolute;
      left: 1%;
      top: 2%;
    }

    .wprm-recipe-simple h2.wprm-recipe-name {
      width: 100% !important;
      background-image: none !important;
      padding-top: 0px !important;
    }

    .wprm-recipe-image img {
      min-width: 270px !important;
      max-width: 270px !important;
    }

    div.wprm-recipe.wprm-recipe-simple {
      padding: 20px !important;
    }

    .wprm-recipe-image-container {
      margin: 0px 0px 20px 0px !important;
    }v
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    #wrapper {
      width: 100%;
    }

    #content {
      width: 100%;
      float: none;
    }
    .sidebar {
      width: 100%;
      float:none;
    }

    #site-header h1 {
  background-size: contain;  
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    #wrapper {
      width: 100%;
    }
    #content {
      width: 100%;
      float: none;
    }
    .sidebar {
      width: 100%;
      float:none;
    }

    #site-header h1 {
  background-size: contain;  
}
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
    body {
      background: url('images/footer-mobile.jpg') repeat-x bottom;
    }

    #wrapper {
      width: 100%;
    }

    body.home article img {
      max-width: 364px;
      min-width: 364px;
      height: auto;     
    }
  
    .entry-content img {
      max-width: 364px;
      min-width: 364px;
      height: auto;
    }

    #content {
      width: 100%;
      float: none;
    }

    #content img {
      min-width: 360px;
      max-width: 360px;
      height: auto;
    }

    #content .zem_rp_thumbnail img {
    max-width: 160px !important;
    min-width: 160px !important;
    min-height: 160px !important;
    max-height: 560px !important;
    }

    div.comment-author.vcard img {
      max-width: 60px !important;
      min-width: 60px !important;
      height: auto;
    }

    .sidebar {
      width: 100%;
      float:none;
    }

    #utility {
      width: 100%;
      float: none;
    }

    #header-area {
    width: 100%;
    float: none;
    text-align: center;
    } 

    .srp-thumbnail-box img {
      max-width: 75px !important;
      max-height: 75px !important;
      min-width: 75px !important;
      min-height: 75px !important;
    }

    #pressimages img {
    max-wdith:265px;
    }

    #info {
    padding: 30px 20px;
    }

    .grid-item {
      width: 100% !important;
    }

    .image-cropper2 {
    position: relative;
    width: 360px;
    height: 360px;
    overflow: hidden;
    background-size: contain;
    margin: 0px 5px;
    }

    .image-cropper2 img {
      transform: scale(1.6, 1.6);
      -ms-transform: scale(1.6, 1.6);
      -webkit-transform: scale(1.6, 1.6);
    }

    .centered2 {
      position: absolute;
      left: 1%;
      top: 2%;
    }

    .wprm-recipe-simple h2.wprm-recipe-name {
      width: 100% !important;
      background-image: none !important;
      padding-top: 0px !important;
    }

    .wprm-recipe-image img {
      min-width: 300px !important;
      max-width: 300px !important;
    }

    div.wprm-recipe.wprm-recipe-simple {
      padding: 20px !important;
    }

    .wprm-recipe-image-container {
      margin: 0px 0px 20px 0px !important;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

    #wrapper {
      width: 100%;
    }

    #content {
      width: 100%;
      float: none;
    }
    .sidebar {
      width: 100%;
      float:none;
    }

    #site-header h1 {
  background-size: contain;  
}
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
    
    #wrapper {
      width: 100%;
    }

    #content {
      width: 100%;
      float: none;
    }
    .sidebar {
      width: 100%;
      float:none;
    }

    #site-header h1 {
  background-size: contain;  
}
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {

    body {
      background: url('images/footer-mobile.jpg') repeat-x bottom;
    }

    #wrapper {
      width: 100%;
    }

    #content {
      width: 100%;
      float: none;
    }

    #content img {
      min-width: 414px;
      max-width: 414px;
      height: auto;
    }

    #content .zem_rp_thumbnail img {
    max-width: 160px !important;
    min-width: 160px !important;
    min-height: 160px !important;
    max-height: 560px !important;
    }

    .sidebar {
      width: 100%;
      float:none;
    } 

    #utility {
      width: 100%;
      float: none;
    }

    #header-area {
    width: 100%;
    float: none;
    text-align: center;
    }

    body.home article img {
    max-width: 400px !important;
    min-width: 400px !important;
    height: auto !important;     
    }
  
    #content .entry-content img {
      max-width: 400px;
      min-width: 400px;
      height: auto;
    }

     .srp-thumbnail-box img {
      max-width: 75px !important;
      max-height: 75px !important;
      min-width: 75px !important;
      min-height: 75px !important;
    }

    .wprm-recipe-simple h2.wprm-recipe-name {
      width: 100% !important;
      background-image: none !important;
      padding-top: 0px !important;
    }

    .wprm-recipe-image img {
      min-width: 340px !important;
      max-width: 340px !important;
    }

    div.wprm-recipe.wprm-recipe-simple {
      padding: 20px !important;
    }

    .wprm-recipe-image-container {
      margin: 0px 0px 20px 0px !important;
    }

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
    #wrapper {
      width: 100%;
    }

    #content {
      width: 100%;
      float: none;
    }

    .sidebar {
      width: 100%;
      float:none;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    #wrapper {
      width: 100%;
    }

    #content {
      width: 100%;
      float: none;
    }

    .sidebar {
      width: 100%;
      float:none;
    }
}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #wrapper {
      width: 100%;
    }
    #content {
      width: 100%;
      float: none;
    }
    .sidebar {
      width: 100%;
      float:none;
    }

    #utility {
      width: 100%;
      float: none;
    }

    #header-area {
    width: 100%;
    float: none;
    text-align: center;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #wrapper {
      width: 100%;
    }
    #content {
      width: 100%;
      float: none;
    }
    .sidebar {
      width: 100%;
      float:none;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #wrapper {
      width: 100%;
    }
    #content {
      width: 100%;
      float: none;
    }
    .sidebar {
      width: 100%;
      float:none;
    }
}

/* ----------- Galaxy Android ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 640px) 
  and (-webkit-min-device-pixel-ratio: 1) {

    html, body {
      overflow-x: hidden; 
    }

    body {
      position: relative;
      background: url('images/footer-mobile.jpg') repeat-x bottom;
    }

    body.home article img {
       max-width: 344px;
      min-width: 344px;
      height: auto;     
    }
  
    .entry-content img {
      max-width: 344px;
      min-width: 344px;
      height: auto;
    }


    #content img {
      min-width: 360px;
      max-width: 360px;
      height: auto;
    }

   #content .zem_rp_thumbnail img {
    max-width: 160px !important;
    min-width: 160px !important;
    min-height: 160px !important;
    max-height: 560px !important;
    }

    div.comment-author.vcard img {
      max-width: 60px !important;
      min-width: 60px !important;
      height: auto;
    }

    .comment-content img {
      width: auto !important;
      height: auto !important;
      min-width: none;
      max-width: none;
    }

    .srp-thumbnail-box img {
      max-width: 75px !important;
      max-height: 75px !important;
      min-width: 75px !important;
      min-height: 75px !important;
    }

    .wprm-recipe-simple h2.wprm-recipe-name {
      width: 100% !important;
      background-image: none !important;
      padding-top: 0px !important;
    }

    .wprm-recipe-image img {
      min-width: 300px !important;
      max-width: 300px !important;
    }

    div.wprm-recipe.wprm-recipe-simple {
      padding: 20px !important;
    }

    .wprm-recipe-image-container {
      margin: 0px 0px 20px 0px !important;
    }
}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 

    #pressimages img {
        max-width: 265px;
        height: auto;
    }

    }