/*
Theme Name: Spacious Child
Theme URI: http://fika-n-food.frosthagen.se/spacious-child/
Description: Child theme for Fika and Food
Author: Henita Design
Author URI: http://henita.co.uk
Template: spacious
Version. 1.0.0
Licence: GNU General Public Licence v2 or later
Licence URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: child theme
Text Domain: spacious-child
*/
* {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-family: inherit;
}

html {
  font-size: 62.5%;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-serif-<uniquifier> {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* --------- RECIPE CATEGORY PAGES MENU -------------- */
.menu-block{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
   background-color:#084C66;
   padding:15px;
}

.menu-block a{
color:#ffffff;
}

.menu-block a:hover{
    font-size:18px;
    color:#ffffff;
    text-transform:uppercase;
    font-weight:700;
}

.menu-font{
    font-size:16px;
    margin:20px 40px 20px 40px;
}

/* --------------------------------------------- */

#header-logo-image img {
     max-height: 150px !important;
     max-width: 150px !important;
}

/* Masonry container */
.mymasonry-4 { 
  column-count: 4;
  column-gap: 1em;
}

/* Gallery lists container */
.myitem { 
  background-color: white;
  align-items: flex-start;
  display: inline-block;
  margin: 0 0 1em;
  padding: 0;
  width: 190px;
  height:auto;
  border: solid;
  border-width: 0.25px;
  border-color: Gainsboro;
}
	
/* Hover effect */
.myitem:hover {
	box-shadow: 1px 2px 4px 2px Gainsboro;
}

/* Custom comments section */
.comments-box { 
  background-color: white;
  align-items: flex-start;
  display: inline-block;
  margin: 30px 0 0 0;
  padding: 10px;
  width: 100%;
  height:auto;
  border: solid;
  border-width: 0.25px;
  border-color: Gainsboro;
}

/* Caption styling */
.mycaption {
    color:black;
    font-size:11px;
	margin: -10px 0 10px 0;
	text-align:center;
}

.category-header {
    text-align:center; 
    margin-top:50px;
    margin-bottom:30px;
    font-family: "Noto Serif", serif;
    color:#084C66;
    font-size:30px;
}

.container-c{ /*outer container for recipe gallery */
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0px auto; 
    width:80%;
}

.container-gallery { /* recipe gallery flexbox */
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap;
}

/* ----- FLEXBOXES ----- */
.flex_600 {
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    font-weight:600; 
    font-size:12px;
}
.flex_00 {
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap;
    font-size:12px;
}

/* Local menu styling */
.thelocalmenu {
    color:black;
    font-size:12px;
    line-height: 50%;
}

	#infobox { 
		width:650px;
		color: #666666; 
		font-size: 14px; 
		position: relative;
		background-color: #f2f2f2;
		height: 100%;
		padding: 20px 20px 20px 20px;
		border-radius: 3px 3px 3px 3px;
		box-shadow: 1px 2px 4px 2px Gainsboro;
	}
	/* MENU LIST */
.menulists {
  display: flex;
  padding-inline-start: 0;
  list-style: none;
}

.menulist {
  display: none; /* hidden by default */
}
.menulist.on { /* JavaScript-added class to reveal list items */
  display: inline-block;
}
.menulist.on ~ .menulist.on::before {
  content: '  |  '; 
}

.resize-image{
        width:60%;
        margin:auto;
    }


/* ------------------------ RESPONSIVE -----------------------------------------*/
/* MOBILE VIEW */
@media only screen and (max-width: 768px) {
  .noshow {
      display:none;
  }
  .menu-font{
    font-size:16px;
    margin:10px 20px 10px 20px;
}
.resize-image{
        width:100%;
    }
}
  
  /* LAPTOP VIEW */
@media only screen and (min-width: 768px) {
    .smallscreen {
        display:none;
    }
    
    }
}