@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Permanent+Marker&display=swap');

/*
    =============================================================================================
    Elements
    =============================================================================================
*/


html {
    margin: 0;
    font-size: 62.5%;
    height: 100%;
}

body {
    font-size: 2.2em;
    font-family: 'Indie Flower', sans-serif;
    line-height: 1.4;
    font-weight: 400;
    padding-bottom: 3.0rem;
}

hr {
    border-top: 1px solid #c5c5c5;
    padding: 5px auto;
    width: 98%;
}

h1 { 
    font-size: 4.5rem;
    font-family: 'Permanent Marker', sans-serif;
    font-weight: 400;
    color: #000000;
}

h2 { 
    font-size: 3.2rem; 
    font-family: 'Permanent Marker', sans-serif; 
    line-height: 1.25; 
    letter-spacing: -.1rem;
    padding-top: 1.0rem;
    font-weight: 400;
}

h3 { 
    font-size: 2.5rem; 
    font-family: 'Permanent Marker', sans-serif;
    font-weight: 400;
    padding: 0;
}

h4 { 
    font-size: 2.2rem; 
    font-family: 'Indie Flower', sans-serif; 
	font-weight: 800;
    line-height: 1.4; 
    text-decoration: underline;
    letter-spacing: -.08rem;
}

h5 { 
    font-size: 2.2rem; 
    font-family: 'Indie Flower', sans-serif; 
	font-weight: 800;
    line-height: 1.4; 
    text-decoration: underline;
    letter-spacing: -.08rem; 
}

h6 { 
    font-family: 'Permanent Marker', serif;
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
  
  @media (min-width: 768px) {
    h1 { font-size: 6.2rem; } 
    h2 { font-size: 4.5rem; }
    h3 { font-size: 3.2rem; }
    h4 { font-size: 2.2rem; }
    h5 { font-size: 2.2rem; }
    h6 { font-size: 2.8rem; }
  }

  @media (min-width: 400px) and (max-width: 767px) {
    h1 { font-size: 6.2rem; } 
    h2 { font-size: 4.5rem; }
    h3 { font-size: 3.2rem; }
    h4 { font-size: 2.2rem; }
    h5 { font-size: 2.2rem; }
    h6 { font-size: 2.5rem; }
  }

.fl-module-content h2 {
	font-size: 3.6rem;
}
  
p {
    margin-top: 0; 
    font-size: 2.2rem;
    font-family: 'Indie Flower', sans-serif;
}

.bold {
    font-weight: 700;
}

a {
    text-decoration: none;
    padding: 3px;
}

#content-desktop {display: flex;}
#content-mobile {display: none;}

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

    #content-desktop {display: none;}
    #content-mobile {display: flex;}
}

.row {
    width: 100%;
    padding: 0;
    margin: 0;
}

.wp-block-columns {
	margin-left: 15px;
	margin-right: 15px;
}

/*
    =============================================================================================
    Tabs
    =============================================================================================
*/

.tab-space {
    background-color: #c9c9c9;
    width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 1.0rem 1.0rem 0 1.0rem;
}

.tab-space a {
    color: #ffffff;
    font-weight: 700;
}

.tab-space a:hover{
    color: #ffffff;
}

.tab {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 2px;
    background-color: rgb(0, 128, 255);
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.tab-home {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 2px;
    background-color: rgb(0, 128, 255);
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.tab-omni {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 2px;
    background-color: #23bb99;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	margin-right: 1px;
}

.omni {
	background-color: #23bb99 !important;
}

.tab i {
	padding-left: 0.7rem;
	padding-right: 0.7rem;
	font-size: 18px;
}

.tab-home i {
	padding-left: 0.7rem;
	padding-right: 0.7rem;
	font-size: 18px;
}

.tab-omni i {
	padding-left: 0.7rem;
	padding-right: 0.7rem;
	font-size: 18px;
}

@media (min-width: 768px) {
	
	.tab i {
		font-size: 22px;
	}
	
	.tab-home i {
		font-size: 22px;
	}

    .tab-vegan i {
		font-size: 22px;
	}

	.tab {
		width: 10%;
	}

    .recipe-card {
        margin: 0 1.0rem;
    }

	.tab {
			width: 10%;
	}
	
	.recipe-list a {
			font-size: 3.5rem
	}
	
	.recipe-list ul {
		padding-left: 2.0rem;
	}
}

@media (min-width: 1112px) {
	
	.recipe-list {
		columns: 2;
	}

}

/*
    =============================================================================================
    Front Page
    =============================================================================================
*/

.recipe-card {
    margin: 0;
    background-color: #FFFFFF;
    max-width: 100%;
    min-height: 100px;
    box-shadow: none;
	margin: 0 1.0rem;
}

.recent-posts {
    margin-bottom: 3.0rem;
}

.recent-posts article {
    padding: 10px;
}

.recent-posts {
    padding: 0;
}

.fp-thumb {
	width:69px;
	height:48px;
	border: 3px solid #000000;
	margin-bottom: 5px;
}

.recipe-list a {
	font-weight: 900;
	color: #000000 !important;
	font-size: 1.8rem;
}

@media (min-width: 768px) {

    .recent-posts {
        margin-bottom: 0;
    }
    
    .fp-thumb {
		width:92px;
		height:64px;
    }
	
	.recipe-list a {
		font-size: 3.0rem;
		padding-left: 3.0rem;
	}
}


/*
    =============================================================================================
    Recipes
    =============================================================================================
*/

.recipe-thumb {
    padding-top: 4.0rem;
    text-align: center;
}

.recipe-thumb img {
    width: 80%;
    border: 10px solid #ffffff;
    box-shadow: 7px 7px 7px 4px #494949;
}

.recipe-title {
    padding-top: 1.0rem;
}

.recipe-title-fp {
	position: absolute;
	top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	width: 100%;
}

.recipe-content p {
	padding-top: 2.2rem;
	line-height: 1.4;
}

.recipe-content ul {
    padding-bottom: 0;
    margin-bottom: 0;
}

.recipe-content ol {
    padding-bottom: 0;
    margin-bottom: 0;
}

.recipe-content li {
    margin-left: 2.5rem;
}

.links a {
    font-family: 'Indie Flower', sans-serif;
}

.thumbnail-img img {
    width: 100%;
    height: auto;
}

.thumbnail-img a {
    padding: 0;
    margin: 0;
}

.entry-title {
    text-align: center;
    font-family: 'Permanent Marker', sans-serif;
    line-height: 1.2;
	padding: 0 3px;
}

.card-title a {
    color: #000000;
}

.card-title a:hover {
    color: #595959;
}

.card-content {
    padding: 0 2.0rem;
}

.card-meta {
    border-top: 2px solid #797979;
    padding: 1.0rem;
    text-align: center;
}

.postThumb-img {
    height: 200px;
    width: 100%;
    overflow: hidden;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.card-meta-postThumb {
    padding: 1.0rem;
    text-align: center;
}

.nav-links {
    width: 100%;
    text-align: center;
}

.page-numbers {
    font-size: 3.0rem;
    padding: 0 9px;
    margin: 0 5px;
}

.current {
    padding: 0 10px;
    background-color: #818181;
}

.recipe-posts {
    border: 1px solid #7a7a7a;
    border-radius: 10px;
    overflow: hidden;
    background-color: #FFFFFF;
}

.recipe-posts .card-title {
    margin-top: 5px;
    height: 92px;
    position: relative;
}

.entry-title {
    text-align: center;
}

@media screen and (min-width: 768px) {
	
	.recipe-thumb img {
        width: 50%;
		border: 20px solid #ffffff;
	}

    .recipe-title-fp {
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 100%;
    }
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 2.0rem !important;
}

/*
    =============================================================================================
    Footer
    =============================================================================================
*/

.footer {
    margin-top: 50px;
    padding: 10px;
    width: 100%;
}

.footer-left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px 0;
}

.footer-title {
    width: 100%;
}

.footer-left a {
    color: #dfdfdf !important;
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
}

.footer-center {
    margin: 0;
    padding: 5px;
    text-align: center;
}

.footer-center ul {
    list-style-type: none;
    padding: 0;
}

.footer-right {
    margin: 0;
    padding: 5px;
    height: 100%;
    text-align: center;
}

.footer-right ul {
    list-style-type: none;
    padding: 0;
}

.copyright {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
}

.sub-footer {
    background-color: #292929;
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
      max-width: 1140px !important;
    }
}