/*
Theme Name: Msdesign Child
Theme URI: http://underscores.me/
Author: mrsmartweb
Author URI: http://mrsmartweb.com
Description: Msdesign Child Theme
Template: msdesign
Version: 1.0.0
Text Domain: msdesignchild
*/ 
/**** Setting ***/
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

		@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap');
		:root {
  			--animation-curve: cubic-bezier(1, 0, 0, 1);
  			//cubic-bezier(0.68, -0.6, 0.32, 1.6);
			--red: #bc0309;
			--darkred:#850206;
  			--blue: #1e7fb6;
			--yellow: #e9bb0e;
			--green: #209731;
			--orange: #f07a34;
			--white: #ffffff;
			--black: #000;
			--grey: #111;
			--greylight: #707070;
		}
		* {
  		 box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
			scroll-behavior: smooth;
		}
		body, html {
			padding: 0;
			margin: 0;
			height: 100%;
			font-family: 'Nunito', sans-serif;
			scroll-behavior: smooth;
			
		}
          h1 {
	       font-size: 3rem;
		   text-align:center;
        }
          h2 {
	       font-size: 26px;
        }
          h3 {
	       font-size: 22px;
        }
          h4 {
	       font-size: 18px;
        }
h3,h4 {
	margin:0;
}
	.shorten-text {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.justifycenter {
	justify-content:center;
}
@media screen and (max-width:640px) {
img.img-mob  {
	width:90%;
	height:auto;
}
}
@media screen and (min-width:800px) {
		.shorten-text {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
}
.posts-navigation {
	display:none;
}
.btn-inner {
	padding:10px;
	max-width:300px;
	width:100%;
	margin-right:10px;
	border: 2px solid var(--red);
	background: var(--white);
	text-align:center;
	color: var(--red);
}
div.btn-inner:hover {
	background: var(--darkred);
	text-align:center;
	color: var(--white);
}
@media screen and (max-width:694px){
	.btn-inner {
		margin-right:0px;
	}
}
/** BANNER **/
.banner {
	background-image: url('/wp-content/uploads/2022/11/Ooni_Banner.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	width:100%;
	max-height: 424px;
	display:flex;
	justify-content:flex-start;
}
.back-content {
	display:flex;
	justify-content:center;
	align-items:center;
	background: rgba(0,0,0,0.8) !important;
	width: 400px;
	height:100%;
	padding:30px 20px !important;
	flex-direction:column;
	color:#fff;
	font-size:18px;
	margin:0px !important;
	
}
.back-content-text {
	margin: 20px 0 !important;
     background:transparent !important;
	
}
.btn-yellow {
	padding:10px 15px;
	background: var(--yellow) !important;
	text-align:center;
	color: var(--black) !important;
	text-decoration:none;
	font-size:16px;
}
.btn-yellow:hover {
	background: var(--black) !important;
	text-align:center;
	color: var(--yellow) !important;
}
@media screen and (max-width:450px) {
	.banner {
		background-position: right center;
	}
}
/** POP UP left bar **/
.outer {
            background: red;
            height: 30px;
            display: none;
			position: fixed;
			bottom:180px;
			left:-110px;
			width:250px;
			transform: rotate(-90deg);
			-wekit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			font-family: 'Nunito', sans-serif;
			color: #fff;
			font-size: 12px;
			padding-top: 8px;
			text-align: center;
	z-index:999999;
        }
 
        .button {
			position: absolute;
			top:8px;
			right:6px;
            margin-left: 93%;
            color: white;
            font-family: 'Nunito', sans-serif;
			font-size: 12px;
            cursor: pointer;
        }
/** POP UP Window **/
 #fvpp-blackout {
  display: none;
  z-index: 499;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

#my-welcome-message {
  display: none;
  z-index: 500;
  position: fixed;
  max-width: 600px;
	width:80%;
	top:20%;
	left:50%;
	transform: translateX(-50%);
  padding: 20px 2%;
  background: #f1f2f3;
}

#fvpp-close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

#fvpp-dialog h2 {
  font-size: 2em;
  margin: 0;
}

#fvpp-dialog p { margin: 0; }
/** table **/
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}
/*** search top **/
#formS {
  padding: 15px;
  border: 1px solid #666;
  background: #f1f2f3;
  display: none;
  text-align:center;

}

#formButton {
  display: block;

}
/*** Breadcrumb **/
        .breadcrumb {
			padding: 8px 15px;
			margin-bottom: 20px;
			margin-top:-25px;
			list-style: none;
			/*background-color: #000;
			border-radius: 4px;*/
		}
		.breadcrumb a {
			color: var(--white);
			text-decoration: none;
		}
		.breadcrumb a:hover {
			color: var(--red);
		}
		#myBtn {
		  display: none;
		  position: fixed;
		  bottom: 20px;
		  right: 30px;
		  z-index: 99;
		  font-size: 18px;
		  border: none;
		  outline: none;
		  background-color: var(--red);
		  color:var(--white);
		  cursor: pointer;
		  padding: 5px;
		  border-radius: 4px;
		}

		#myBtn:hover {
		  background-color: var(--white);
		}
		.flex-wrap {
			flex-wrap: wrap;
		}
		.m20 {
			margin: 20px;
		}
		.mtop20 {
			margin-top:20px;
		}
		.mtop40 {
			margin-top:40px;
		}
		.mb10 {
			margin-bottom:10px;
		}
		.mb20 {
			margin-bottom:20px;
		}
		.mb30 {
			margin-bottom:30px;
		}
		.mb40 {
			margin-bottom:40px;
		}
		.threecol {
			display:flex;
			max-width:960px; /*1200px;*/
			width:100%;
			justify-content:center;
			flex-wrap: wrap;
			align-content: center;
			align-items: center;
		}
@media screen and (max-width:1250px) {
	.threecol {
		max-width:840px;
		width:90%;
	}
}
@media screen and (max-width:1180px) {
	.threecol {
		max-width:840px;
		width:90%;
	}
}
@media screen and (max-width:1170px) {
	.threecol {
		max-width:800px;
		width:90%;
	}
}
@media screen and (max-width:1135px) {
	.threecol {
		max-width:700px;
		width:90%;
	}
}
@media screen and (max-width:980px) {
	.threecol {
		max-width:600px;
		width:90%;
	}
}
@media screen and (max-width:890px) {
	.threecol {
		max-width:500px;
		width:90%;
	}
}
@media screen and (max-width:800px) {
	.threecol {
		max-width:900px;
		width:100%;
	}
}
		.div-col3 {
			flex-basis:33.3%;
			text-align:center;
		}
		.video-container {
			overflow: hidden;
			position: relative;
			width:100%;
		}

		.video-container::after {
			padding-top: 56.25%;
			display: block;
			content: '';
		}

		.video-container iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.imgfloatleft {
	width:100%; 
	max-width:450px; 
	height:auto; 
	float:left; 
	margin: 0px 15px 0px 0px;
}
.imgfloatright {
	width:100%; 
	max-width:450px; 
	height:auto; 
	float:right; 
	margin: 0px 0px 0px 15px;
}

@media screen and (max-width:450px) {
	.imgfloatleft, .imgfloatright  {
		max-width:100%;
		float: center;
		margin: 15px 0;
	}
	
	.imghero {
		width:50%;
		height:auto;
	}
}
@media screen and (max-width:860px) {
			.div-col3 {
				flex-basis:50%;
		}
		}
@media screen and (max-width:250px) {
			.div-col3 {
				flex-basis:100%;
		}
		}

		.div-col3 img {
			max-width:350px;
			height:auto;
			width:100%;
		}

		.maxw1200 {
				max-width: 1400px;
				margin: 0 auto;
			    width:95%;
			    min-height:300px;
		}
		.f1direction-row {
				flex-direction: row;
			}
		.f1direction-col {
				flex-direction: column;
			}
		.align-content-cent {
			align-content: center;
		}
		.align-item-cent {
			align-items: center;
		}
		.just-cont-cent {
			justify-content: center;
		}
@media screen and (max-width:640px) {
		h1 {
			font-size: 2rem;
		}
		}
			.searchstyle input[type=text] {
				font-family: 'Nunito', sans-serif;
				  padding: 14px 20px;
			  margin: 8px 10px;
			  border: none;
			  cursor: pointer;
				background-color: #f1f2f3;
					width:70%;
				font-size:15px;
			}
			.searchstyle input[type=submit] {
				font-family: 'Nunito', sans-serif;
				  padding: 14px 20px;
			  margin: 8px 0;
			  border: none;
				color:#fff;
			  cursor: pointer;
				background-color: var(--red);
				-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
				font-size:15px;

			}
@media screen and (max-width:450px) {
	.searchstyle input[type=text] {
		width:inherit;
}
}
/*** Feature ***/
.feature {
		display: flex;
		justify-content: center;
	    margin: 0px auto 40px;
		width:100%;
		max-width: 900px;
	}
	.feature-image {
		z-index: 999;
	}
.feature-image img {
	width:350px;
	height:auto;
}
	.feature-text {
		background: #f1f2f3;
		margin: 20px 0px 20px -25px;
		width:50%;
		z-index: 1;
	}
	.feature-text-text {
		padding:20px 20px 5px 45px;
	}
.feature-text-text h2 {
	background: var(--red);
	padding:10px;
	color: var(--white) !important;
}
	@media screen and (max-width:640px) {
		.feature {
			flex-direction: column;
		}
		.feature-image {
			text-align: center;
			width: 100%;
		}
		.feature-image img {
	width:250px;
	height:auto;
}
		.feature-text {
			text-align: center;
			width:100%;	
			margin: -40px 0px 0px 0px; 
	}
		.feature-text-text {
			padding:30px 20px 5px 20px;
		}
	}
	.subscribe {
		background: #f1f2f3;
		
	}
	.subscribe-content {
		width:100%;
		max-width: 900px;
		margin: 0px auto;
		padding: 30px;
		text-align: center;
		
	}
/*** box-info ***/
.box-info {
	border: 1px solid var(--grey);
	padding:20px;
    font-family:'Helvetica' !important;
    font-size:14px;
	margin-bottom: 30px;
}
/*** pizza title ***/
.pizza-title {
	position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    color: #3267EA;
   font-size:35px;
	margin: 60px 0 50px;
	height:50px;
	
}
.pizza-title:before, .pizza-title:after {
    position: absolute;
    top: 30%;
    overflow: hidden;
    width: 48%;
    height: 1px;
    content: '\a0';
    background-color: #cccccc;
    margin-left: 2%;
}
.pizza-title:before {
    margin-left: -50%;
    text-align: right;
}

/*** Contact Form **/
.contact-form {
		width:100%;
		max-width: 900px;
		margin: 0px auto;
		padding: 30px;
		text-align: center;
		
	}

.contact-form .wpcf7 input[type="text"],
.contact-form .wpcf7 input[type="email"],
.contact-form .wpcf7 input[type="tel"],
.contact-form .wpcf7 input[type="date"],
.contact-form .wpcf7 select,
.contact-form .wpcf7 textarea
{
	background:#f1f2f2;
}
/*** Layout **/
.clickon {
	position:absolute;
	bottom: 5px;
	right: 5px;
}
		.backbtn {
			font-size:14px;
			width:115px;
			color: var(--white);
			text-decoration:none;
			margin-top: 5px;
		}
		.backbtn:hover {
			color: var(--grey);
		}
		.topbar {
			height:30px;
			background: #c60000;
			
		}
		.topbar-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width:100%;
			padding-left:2%;
			padding-right: 2%;
			color:#fff;
			height: 100%;
		}
		.wrapper {
					display: flex;
			z-index:1;
				}
		.entry-content {
			display: flex;
		}
		.page-id-8 .entry-content {
			display: flex;
			flex-direction:column;
		}
		.flex35 {
			flex: 1 0 30%;
			margin-right: 5%;
		}
		.flex65 {
			flex: 1 0 65%;
			min-height: 400px;
		}
		.page-id-8 	.main-content {
					flex-basis: 100%; /* with sidebar 80%; */

					padding:60px 0px;
				}

		.main-content {
			flex-basis: 100%; /* with sidebar 80%; */
			color: var(--greylight);
			padding:20px 60px;
			line-height:27px;
		}
.main-content h2 {
	color: var(--grey);
}
.main-content h3 {
	color: var(--grey);
}
.main-content a {
	color: var(--red);
	text-decoration:none;
	font-weight:600;
}
.main-content a:hover {
	color: var(--black);
}
a.main-content-box  {
	color: var(--white);
	text-decoration:none;
	font-weight:600;
	font-size:1.5em;
}
a.main-content-box:hover {
	color: var(--black);
}
.box100h {
			flex: 1 0 98%;
  			background: lightgreen;
  			white-space: nowrap;
  			text-align: center;
  			margin-right: 2%;
  			box-sizing: border-box;
			height: 300px;
			margin-bottom: 2%;
			display: flex;
			justify-content: center;
			align-items: center;
	align-content:center;
			padding-top: 30px;
	color:#fff;
	font-size:45px;
	line-height:55px;
	font-family: 'Caveat', cursive;

		}
@media screen and (max-width:900px) {
	.box100h {
				font-size:25px;
	line-height:35px;	
	}
}
		.box100 {
			flex: 1 0 98%;
  			white-space: nowrap;
  			margin-right: 2%;
  			box-sizing: border-box;
			margin-bottom: 10px;
	
		}
		.box50 {
			flex: 1 0 48%;
  			background: lightgreen;
  			white-space: nowrap;
  			text-align: center;
  			margin-right: 2%;
  			box-sizing: border-box;
			height: 300px;
			margin-bottom: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.box33 {
			flex: 1 0 31%;
  			background: lightgreen;
  			white-space: nowrap;
  			text-align: center;
  			margin-right: 2%;
  			box-sizing: border-box;
			height: 300px;
			margin-bottom: 2%;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			padding-top: 30px;
			
		}
		.box33 a {
			color: var(--white);
			text-decoration: none;
			font-size: 24px;
		}
		.box33 a:hover {
			color: var(--grey);
		}
		.img1 {
			background-image: url("/wp-content/uploads/2022/06/pizza-dough.jpg");
			background-position: top center;
			background-repeat: no-repeat;
			background-size: cover;
			background-blend-mode: overlay;
			background-color: var(--red);
		}
		.img2 {
			background-image: url( "/wp-content/uploads/2022/06/pizza-style.jpg");
			background-position: top center;
			background-repeat: no-repeat;
			background-size: cover;
			background-blend-mode: multiply;
			background-color: var(--yellow);
		}
		.img3 {
			background-image: url("/wp-content/uploads/2022/06/pizza-recipe.jpg");
			background-position: top center;
			background-repeat: no-repeat;
			background-size: cover;
			background-blend-mode: multiply;
			background-color: var(--green);
		}
		.img4 {
			background-image: url(/wp-content/uploads/2022/06/ooni.jpg);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
	        background-blend-mode: multiply;
			background-color: var(--blue);
		}
		.img5 {
			background-image: url("/wp-content/uploads/2022/06/faq-pizza.jpeg");
			background-position: top center;
			background-repeat: no-repeat;
			background-size: cover;
	        /*background-blend-mode: multiply;
			background-color: var(--orange);*/
		}
		.img6 {
			background-image: url("/wp-content/uploads/2023/02/recipes.jpg");
			background-position: top center;
			background-repeat: no-repeat;
			background-size: cover;
	       /* background-blend-mode: multiply;
			background-color: var(--black);*/
		}

		.side-content {
			flex-basis: 20%;
			/*background: #dedede;*/
		}
@media screen and (max-width:1200px) {
	.flex35, .flex65 {
			flex: 1 0 100%;
				margin-right: 0;
			}
			.flex-dir-col {
				flex-direction:column;
			}
}
		@media screen and (max-width:960px){
			.f1direction-row {
				flex-direction: column;
			}
			.main-content {
				flex-basis: 100%;
			}
			.side-content {
				flex-basis: 100%;
			}
			
		}
@media screen and (max-width:800px) {
				
	.entry-content {
	flex-direction:column;
}
}
		@media screen and (max-width:640px){


			.box50 {
				flex: 1 0 100%;
				margin-right: 0;
			}
			.box33 {
				flex: 1 0 100%;
				margin-right: 0;
			}

		}
.signup-box {
			width: 100%;
			height:200px;
			background: #111;
			display: flex;
			justify-content: center;
			align-items: center;
		}
/* CONTACT FORM 7
=================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 95%;
	padding:10px;
	margin-bottom:20px;
	font-size:14px;
	font-family: 'Nunito', sans-serif;
	border:0;
}
.wpcf7 select {
	border: 0px solid #f1f1f1;
    height:40px;
}
.wpcf7 input[type="submit"]
{
	 color: #ffffff;
     font-size: 16px;
     font-weight: 600;
     background: var(--red);
     padding: 15px 25px 15px 25px;
     border: none;
     border-radius: 0px;
     width: auto;
     text-transform: uppercase;
     letter-spacing: 0px;
	margin-top:0px;
	-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
	font-family: 'Nunito', sans-serif;
}
.wpcf7 input:hover[type="submit"] {
        background: var(--darkred);
        transition: all 0.4s ease 0s;
 }
 .wpcf7 input:active[type="submit"] {
        background:  var(--darkred);
 }

.wpcf7 input[type="search"]
{
	 color: var(--greylight)
     font-size: 18px !important;
     font-weight: 600;
     background: var(--white);
     padding: 15px 25px 15px 25px;
     border: none;
     border-radius: 0px;
     width: auto;
     letter-spacing: 0px;
	margin-top:0px;
	-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
	font-family: 'Nunito', sans-serif;
}


.wpcf7 input[type="checkbox"] {
       transform: scale(1.3);
       margin-left: 5px;
}

span.wpcf7-list-item {
margin: 0;
padding-bottom: 20px;
}
.wpcf7-spinner {
	display:block !important;
}

@media (max-width:960px){
	.wpcf7 {
	text-align:center;
}
}
/*************************/
/**** HEADER **********/
		header {
			width:100%;
			height:60px;
			display: flex;
			justify-content: center;
		}
		.header-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-content: center;
			width:95%;
		}
		.logo {
			max-height: 50px;
			width:auto;
		}
.heroheader {
	display:flex;
	justify-content:center;
	margin-top:-10%;
}
.texthero {
text-align:center;
}
.texthero h2 {
	margin-bottom:45px;
	font-size:45px;
}
a.btn-b  {
	border:2px solid var(--white);
	background: transparent;
	padding:10px;
	text-align:center;
	color: var(--white);
	text-decoration:none;
	font-size:18px;
}
a.btn-b:hover {
	border:2px solid var(--white);
	background: var(--white);
	color: var(--red);
}
a.btn-r {
	border:2px solid var(--red);
	background: transparent;
	padding:10px;
	text-align:center;
	color: var(--red);
	text-decoration:none;
}
a.btn-r:hover {
	border:2px solid var(--red);
	background: var(--red);
	color: var(--white);
}
@media screen and (max-width:960px) {
	.heroheader {
	margin-top:-15%;
}
	.texthero h2 {
	margin-bottom:36px;
	font-size:34px;
}
	a.btn-b  {
	font-size:16px;
	}
}

@media screen and (max-width:640px) {
	.heroheader {
	margin-top:-15%;
}
	.texthero h2 {
	margin-bottom:30px;
	font-size:30px;
}
	a.btn-b  {
	font-size:16px;
	}
}
/*************************/
/**** SOCIAL MEDIA **********/
      .fa {
	       color: var(--red) !important;
		  font-size:16px;
          }
	  .social-media {
	      display:flex;
		  justify-content: space-around;
		  width:97px;
		  padding-right:6px;
		  font-size:17px;
}
@media screen and (max-width:640px) {
	.social-media {
		
	}
}
/*************************/
/**** NAV MENU **********/

	/*	nav {
			
		}
		.checkbtn {
					display:none;
				}
		label {
		  width: 30px;
		  height: 4px;
		  background-color: var(--red);
		  cursor: pointer;
		  position:absolute;

		}
		  label:before,
		  label:after {
			content: "";
			width: 30px;
			height: 4px;
			background-color: var(--red);
			position: absolute;
			display: block;
			color: red;
			transition: all 0.6s var(--animation-curve);
		  }

		  label:before{
			top: -250%;
			left: 0%;
			transform: rotateZ(0deg);
			transform-origin: left top;
		  }

		 label:after {
			bottom: -250%;
			left: 0%;
			transform: rotateZ(0deg);
			transform-origin: left bottom;
		  }


		#check:checked ~ label:before {
		  content: "";
		  background-color: red;
		  transform: rotateZ(41deg);
		  left: 20%;
		}

		#check:checked ~ label:after {
		  content: "";
		  background-color: red;
		  transform: rotateZ(-41deg);
		  left: 20%;
		}

		#check:checked ~ label {
		  background-color: transparent;
		}

		#check ~ label {
		  transition: all 0.5s var(--animation-curve);
		}
		#check {
			display: none;
		}
		#checkbtn {
			display: none;
		}
		nav ul {
			display: flex;
		}
		nav ul li{
			list-style: none;
			padding: 20px;
		}
		nav ul li a {
			color: #111;
			text-decoration: none;
		}
		nav ul ul {
			display: none;
		}
		nav li:hover > ul {
  			display: block;
			padding-left:0;
  			position: absolute;
			background: #0C30DD;
			padding:20px;
			margin-left:-40px;
		}
@media screen and (max-width:768px) {
		    nav {
		        margin-right:20px;
		    }
			nav ul {
				flex-direction: column;
				position: fixed;
        		right:-100%;
        		top:10vh;
				width:100%;
				height: 100vh;
        		background: #cc1100;
				text-align:center;
        		transition: 0.5s ease;
			}
			nav ul li {
				display: block;
				text-align: center;
			}
			nav ul ul {
				padding-left:0;
				text-align: center;
				height:20vh;
			}
			nav li:hover > ul {
				position: relative;
				margin-left:-100%;
				margin-top: -60px;
			}
			.checkbtn {
				display: block;
			}
			#check:checked ~ ul {
      			right: 0%;
      		}
		} */
/*
		nav ul {
			display: flex;
			list-style-type: none;
		}
		nav li {
			padding-right: 20px;
		}
		nav li:last-child {
			padding-right: 0;
		}
*/		
/*************************/
/**** TOP NAV MENU **********/
.menu-single {
		display:none;
	}
.topmenu {
			width: 25%;
	        min-width:300px;
			background: var(--red);
			/*display: flex;*/
			justify-content: space-around;
			align-items: center;
	        min-height: 400px;
	        padding: 70px 30px;
	        margin-top: -40px;

}
	.page-id-8 .topmenu {
			/*width: 100%;
		min-height: 50px;
		margin-top: 0px;*/
		display:none;
}
	.page-id-87 .topmenu {
			/*width: 100%;
		min-height: 50px;
		margin-top: 0px;*/
		display:none;
}
@media screen and (max-width:800px) {
	.topmenu {
			width: 100%;
		min-height: 50px;
		margin-top: 0px;
		padding: 0px 15px;
}

	.menu-single {
		display:flex;
		align-items:center;
		width:100%;
	}

			.main-content {
			padding:20px 20px;
		}
}
.nav {
	margin: 30px 0;
	background-color: var(--red);
	
}

.nav ul {
	-webkit-font-smoothing: antialiased;
	padding: 0;
  margin: 0;
	list-style: none;
	position: relative;
	}
	
.nav ul li {
	display:inline-block;
	background-color: var(--red);
	margin-right: 10px;
	}

.nav a {
	display:block;
	padding:0 15px;	
	color:var(--white);
	font-size:16px;
	line-height: 40px;
	text-decoration:none;

}

.nav a:hover { 
	background-color: var(--black);
}
.nav ul li ul li {
	background-color:var(--darkred);
}
.nav ul li ul li a {
	font-size:14px;

}
/* Hide Dropdowns by Default */
.nav ul ul {
	display: none;
	position: absolute; 
	top: 40px; /* the height of the main nav */
	
}
	
/* Display Dropdowns on Hover */
.nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
.nav ul ul li {
	width:190px;
	float:none;
	display:list-item;
	position: relative;
	
}

/* Second, Third and more Tiers	*/
.nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:190px;
}

	
/* Change this in order to change the Dropdown symbol */
.nav li > a:after { content:  ' +'; }
.nav li > a:only-child:after { content: ''; }

/**** NAV MENU 3 ******/
/* Fixed sidenav, full height */
.sidenav {

  width: 100%;
  z-index: 1;
  overflow-x: hidden;
  padding-top: 9px;
  margin-bottom:10px;
}
.fa-colour {
	       color: var(--white) !important;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 16px;
  color: #FFF;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
	transition: all 0.5s;

	
  /*text-overflow: ellipsis;
  overflow: hidden;
  width: 170px; 
  white-space: nowrap;*/ 
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
	 background: var(--darkred);
	transition: all 0.5s;
}

/* Add an active class to the active dropdown button */
.active {
  background: var(--darkred);
  color: white;
	transition: all 0.5s;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
	transition: all 0.5s;

}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
	transition: all 0.5s;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/**** PIZZA NAV MENU 2 **********/
.navwrap {
  max-width: 600px;
  margin: auto;
  overflow-y: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* for iOS */
  padding-bottom: 14px;
display:flex;
	z-index:999;
}

.nav-sp {
  display: table; /*white-space fix*/
  width: 100%;
  text-align: center;
  word-spacing: -9em; /*white-space fix*/
	
}
.nav-sp ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-sp li {
  display: inline-block;
  text-align: left;
  word-spacing: normal; /*white-space fix*/
}
.nav-sp li > a {
  position: relative;
}
.nav-sp li:hover,
.nav-sp > li > a:hover {
  z-index: 105;
}
.nav-sp li li {
  display: block;
}
.nav-sp a {
  display: block;
  padding: 7px 10px;
  background: var(--red);
  color: #fff;
  border: 0px solid #000;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.nav-sp li:hover > a,
.nav-sp a:hover {
  background: var(--darkred);
}
.nav-sp ul {
  position: absolute;
  z-index: 104;
  left: -999em;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s, left 0s 0.5s, top 0.5s;
}
.nav-sp li:hover > ul {
  left: auto;
  top: auto;
  opacity: 1;
  transition: opacity 0.5s linear, top 0.5s;
}
.nav-sp ul ul {
  transition: opacity 0.4s, left 0s 0.4s, margin 0s 0.4s;
  z-index: 103;
}
.nav-sp li li:hover ul {
  top: 30px;
  margin-left: 100%;
  opacity: 1;
  transition: opacity 0.5s linear, margin 0.5s;
}

/* arrows */
.nav-sp li a:first-child:not(:last-child) {
  padding-right: 20px; /* make space for arrows*/
}
.nav-sp li a:first-child:not(:last-child):after {
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  margin-top: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid white;
}
.nav-sp > li > a:first-child:not(:last-child):after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  border-bottom: none;
  margin-top: -3px;
}
.nav-sp li:hover a:first-child:not(:last-child):after {
  border-left-color: #fff;
}
.nav-sp > li:hover > a:first-child:not(:last-child):after {
  border-left-color: transparent;
  border-top-color: #fff;
}
/* allow touch to play */
.nav-sp .touch-only {
  display: none;
  left: -10px;
}
.touch-device .nav-sp .touch-only {
  display: inline-block;
}
.touch-device .nav-sp .touch-only a {
  background: #000;
  color: #fff;
}

@media screen and (max-width:800px) {
		.navwrap {
		display:none;
	}
}
/**** HERO . ***/
.page-id-624 .innerhero {
			display:none;
}
		.hero {
			width: 100%;
			height:400px;
			background: var(--red);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.innerhero {
			width: 100%;
			height:400px;
			background-image: url("/wp-content/uploads/2022/09/Pizza_Margherita.jpeg");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--white);
			flex-direction:column;
		}
.page-id-8 .innerhero {
			height:500px;
}
		.search-box {
			width: 100%;
			height:200px;
			background: #ADEAEE;
			display: flex;
			justify-content: center;
			align-items: center;
		}
@media screen and (max-width:760px) {
	.innerhero {
		height:300px !important;
	}
	.page-id-8 .innerhero {
			height:300px !important;
}
}
@media screen and (max-width:450px) {
	.innerhero {
		height:200px !important;
	}
		.page-id-8 .innerhero {
			height:200px !important;
}
}
/*** FAQ ***/
.faq {
width:100%;
margin: 0 auto;
}
.faq div {
/*border: 1px solid #000;*/
margin: 10px 0px;
background-color:#fff;
}
.question {
font-size:16px;
background-color:#ddd;
margin:0px;
padding: 15px;
}
.answer {
font-size:16px;
margin:0px;
padding: 0 15px;
line-height:22px;
max-height:0px;
overflow:hidden;
transition:2s;
}
.qtext {
	width:95%;
}
.opener
{
font-size:25px;
float:right;
line-height:0.8;
cursor: pointer;
font-weight:700;
	width:5%;
}
.searchfaq {
	width:95%;
	margin: 20px auto;
	text-align:center;
}
.recipe-container {
	width:100%;
	/*max-width:600px;*/
	flex-wrap: wrap;
	display:flex;
	flex-direction:row;
}
.recipe-wrapper {
	width:47%;
margin: 0 20px 25px 0;
	display:flex;
	background:#fff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.recipe-img {
	flex-basis: 45%;
}

.recipe-img img {
	width: 100%;
	height:auto;
		object-fit:cover;
	overflow:hidden;
}
.recipe-main {
	flex-basis: 55%;
	padding:4%;
}
.recipe-main h2 {
	margin-top:0;
	font-size:20px;
}
.recipe-main-h2 {
	font-size:18px;
}
@media screen and (max-width:840px) {
	.recipe-container {
	flex-direction:column;
	}
	.recipe-wrapper {
    margin: 0 0px 25px 0;
	width:100%;
	}
}
/**** FOOTER ***/
.footer {
	width:100%;
			
			background: var(--darkred);
			font-size: 14px;
			color: var(--white);
	padding:30px 0;


}
.footer-content {

	display: flex;
			align-content: center;
			justify-content: center;
			align-items: center;
		flex-direction:column;

}
.footer-title {
	text-align:center;
	font-size:20px;
		margin-bottom:20px;
	border-bottom: 1px dotted #fff;
		max-width:400px;
	width:90%;
	padding-bottom:10px;
}
		footer {
			width:100%;
			height:50px;
			background: var(--grey);
			font-size: 12px;
			display: flex;
			align-content: center;
			justify-content: center;
			align-items: center;
			color: var(--white);
		}
.footer-line {
		text-align:center;
		margin:20px 0;
	border-bottom: 1px dotted #fff;
		max-width:400px;
	width:90%;
}
a.footer-link {
	text-decoration: none;
				color: var(--white);
}
 a.footer-link:hover {
	color: var(--yellow);
			}
			.copyright a {
				text-decoration: none;
				color: var(--white);
			}
			.copyright a:hover {
			color: var(--yellow);
			}