/* CSS Document */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600&display=swap');


:root {
  /* colors */
  --primary-color: #fff;
  --black: #000000;
  --dark-grey:#49494A;
  --med-grey: #676769;
  --light-grey:#d8d8d8;
  --pale-grey: #f1f3f6; 
  --other-grey: #ffffff; 
  --red: #E8011D;
  --pink:#e490c1;
  --purple:#cb96aa;
  --blue:#6495ed;
  --light-blue:#d2e0fc;
  --pale-blue:#f2f4f8;
  --yellow:#96aacb;
  --turquoise:#2760a2;
  --lime:#aacb96;
  --green: #6495ed; 
  --green-link: #5480d2;

  --serif-font: Garamond, serif;
  --sans-serif-font: 'Open Sans', sans-serif;


}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
strong, b { 
  font-weight: bold; }

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;  /* IE and Edge */
}

body {
  box-sizing: border-box;
  font-family: var(--sans-serif-font);
  font-family: var(--serif-font);
  color: var(--dark-grey);
  font-size: 1.5rem;
  background-color: var(--primary-color);
  line-height: 1;
}

/* utility classes */
.container {
  margin: auto;
  max-width: 1350px;
  overflow: hidden;
  padding: 0px;
}
/* font sizes */
h1 {font-size: 3.5rem;}
h2 {font-size: 3rem;
  font-weight:normal;
}
h3 {font-size: 2.5rem;
}
h4 {font-size: 2.2rem;
}
h5 {font-size: 1.4rem;}
h6 {font-size: 1rem;}

/* font classes to tweak size */
.fs168 {font-size:1.68rem;}
.fs-28 {font-size: 1.75rem;}
.fs-224 {font-size:1.4rem;}
.fs208 {font-size:1.3rem;}

/* text classes */
.txtcent {
  text-align: center;
}

/* padding classes */
.pdt-halfr {
  padding-top: .5rem;
}
.pdt-1 {
  padding-top: 1rem;
}
.pdt-2 {
  padding-top: 2rem;
}
.pdt-3 {
  padding-top: 3rem;
}
.pdt-4 {
  padding-top: 4rem;
}
.pdb-half{
  padding-bottom: .5rem;
}
.pdb-1{
  padding-bottom: 1rem;
}
.pdb-2{
  padding-bottom: 2rem;
}
.pdb-3 {
  padding-bottom: 3rem;
}
.pdb-4 {
  padding-bottom: 4rem;
}
.pdl-2 {
  padding-left: 2rem;
}
.pdl-4 {
  padding-left: 4rem;
}
.pdl-5 {
  padding-left: 5rem;
}
.pdl-8 {
  padding-left: 8rem;
}
.pdr-5 {
  padding-right: 5rem; 
}
.pdr-6 {
  padding-right: 6rem; 
}
.pdr-8 {
  padding-left: 5rem;
}

/* margin classes */
.mb-half {
  margin-bottom: .5rem;
}
.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.mt-2 {
  margin-top: 2rem;
}
.mt-4 {
  margin-top: 4rem;
}
.ml-4{
  margin-left:4rem;
}
.ml-5{
  margin-left:5rem;
}
.ml-10 {
  margin-left: 10rem;
}
.mr-4{
  margin-right: 4rem;
}
.mr-5{
  margin-right: 5rem;
}
.mr-6{
  margin-right: 6rem;
}
.mrl-2 {
  margin: 0 2rem 0 2rem;
}

/* Full width background div for header and footer */
.blue-bar {
  width: 100%;
  background-color: var(--pale-blue);
  position:sticky;
  top:0;
}

.blue-bar-foot {
  width: 100%;
  background-color: var(--pale-blue);  
}

/* Lines */
/* verticle line */
hr {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: .2px solid var(--pale-grey);
  margin-top: 1.1rem;
  margin-bottom: 1rem;
 }

.grey-line {
  width: 45%;
  height: 2px;
  background-color: var(--light-grey);
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-right: auto;
  margin-left: auto;
  border:none;
  border-radius: 50%;
  outline:none; 
 }

 .placeholder {
   width:100%;
   height:800px;
   background-color: var(--other-grey);
 }

 span.inline {
  display: inline-block;
 }

/* Link styles */
span.bold{
  font-weight: 500;
}

a:link {
  color: var(--black);
  text-decoration: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

a:visited {
color: var(--black);
background-color: var(--pale-grey);
text-decoration: none;
 }

a.blue-link {
color: var(--blue-link);
}

a:hover {
  background-color: var(--pale-grey);
  text-decoration: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

a.green-link {
color: var(--blue);
font-weight: normal;
}

a.green-link1 {
  color: var(--green);
}

a:hover.green-link {
  background-color: var(--pale-grey);
  text-decoration: none;
  text-align: center;
  padding: 0;
  margin: 0;
  }

a:hover.green-link1 {
background-color: var(--green-link);
text-decoration: none;
text-align: center;
padding: 0;
margin: 0;
}

a:hover.pale-hover {
background-color: var(--primary-color);
text-decoration: none;
text-align: center;
padding: 0;
margin: 0;
}

.btn {
  background-color: var(--red);
  font-family: var(--sans-serif-font);
  font-size: 2rem;
  color: var(--primary-color);
  font-weight: 300;
  letter-spacing: 0.1rem;
  padding: 0.28rem;
  border: none;
}

img.play-arrow {
  position: absolute;
  text-align: center;
  width: 12%;  
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.caption > h3 {
  background-color: var(--primary-color);
  color: var(--black);
  font-family: var(--sans-serif-font);
  font-weight: 400;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  border: 1px solid #0a0909;
  text-align: center;
  padding: .7rem;
}

.decaption {
  background-color: var(--black);
  color: var(--primary-color);
  font-family: var(--sans-serif-font);
  font-weight: bold;
  letter-spacing: 0.1rem;
  font-size: 1.2rem;
  text-align: center;
  padding: .5rem;
}

.img-label {
  width: 99%;
  font-family: Open Sans, sans-serif ;
  color: var(--black);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: .05rem;
  text-align: center;   
  margin: 0 auto;
  padding: .8rem 0;
}
.img-label-quad {
  width: 99%;
  font-family: Open Sans, sans-serif ;
  color: var(--black);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: .05rem;
  text-align: center;   
  margin: 0 auto;
  padding-top: .7rem;
  padding-bottom: .85rem;
}

.img-label-long {
  width: 99%;
  font-family: var(--sans-serif-font);
  color: var(--black);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: .05rem;
  text-align: center;
  margin: 0 auto;
  padding: .8rem 0;
}
.img-label-longer {
  width: 99%;
  font-family: var(--sans-serif-font);
  color: var(--black);
  font-weight: 400;
  font-size: 1.35rem;
  text-align: center;
  margin: 0 auto;
  padding: .8rem .0;
}
.topicImage {
  position: relative;
}
.labelOverlay {
  width: 90%;
  font-family: var(--sans-serif-font);
  color: var(--black);
  background-color: var(--primary-color);
  opacity: 80%;
  font-weight: 400;
  font-size: 1.5rem;
  text-align: center;
  border: none; 
  margin: .3rem auto;
  padding: 1rem .0rem;
  position: absolute;
  top:40%;
  right:5%
  /* z-index: 1; */
}

/* Grid Layouts */

/* Used on:ONE-COLUMN, GRID-5-DISPLAY,
Item Pages ,
some recipe pages, 
Edible-flowers, 
Herbs, */
.grid-container2 {
  display: grid;
  grid-template-columns: 30% 1fr;
  column-gap: 3rem;
  row-gap: 1rem;
  background-color: var(--primary-color);
  padding:0 1rem;
}

/* Used on 
recipes */
.grid2 {
  display: grid;
  grid-template-columns:64% 33%;
  grid-auto-flow: column;
  grid-row-gap: 2rem;
  grid-column-gap: 2.5rem;
}

/* Used on 
World Cuisines */
.grid2r {
  display: grid;
  grid-template-columns:repeat(2, 1fr);
  grid-gap: 1rem;
  background-color:var(--pale-grey);
  padding: 1rem;
}
/* Used on recipe template */
.grid2dir {
  display:grid;
  grid-template-columns:7% 91%;
  grid-gap: .7rem;  
}
/* Nested grid used on recipe template */
.grid2dirnum {
  display:grid;
  /* grid-template-rows: repeat(2, 1fr);  */
  
}
.listnumber img {
  text-align: center;
  width:40px;
  margin:1.4rem .5rem;
}

    

/* Used on: 
home */
.quad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: .8rem;
  grid-row-gap: .8rem;
}

/* Used on: */
.grid-container3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5rem;
  row-gap: 0.8rem;
  background-color: var(--primary-color);
  padding: 0 2rem;
}

.grid-container3r {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
  row-gap: 0.8rem;
  background-color: var(--primary-color);
}

.grid-container3 {
  margin-top: 2rem;
}


/* Used on: home, 
cooking-Basics, love-affairs
kitchen-tools */
.grid-container4 {  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 2rem;
  row-gap: 2rem;
  background-color: var(--primary-color);
  padding: 1rem 1.5rem 1.5rem 1.7rem;
  
 }

 .labeled-grid-item {
  border:2px solid var(--light-grey);
  padding:.8rem .8rem 0 .8rem;
  width:90%;
 }

/* Used on 
LA-2-COLUMN */
.grid-container4la {
  display: grid;
  grid-template-columns: 20% 25% 20% 25%;
  column-gap: 2.5rem;
  row-gap: 2rem;
  background-color: var(--primary-color);
  padding: 0;
}

/* Used on: GRID-5,
Pantry, 
Aromatics, Edible Flowers
Chili-Peppers,    
Cooking-Basics  */
.grid-container5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 2rem;
  background-color: var(--primary-color);
  padding: 1rem 1.5rem 1.5rem 1.7rem;
}

/* tried on individual recipe pages */
.grid-container4 { 
font-family: var(--sans-serif-font);
}
.itemr:nth-child(1) {
grid-column: 2 / span 1
}
.itemr:nth-child(2) {
grid-column: 3 / span 1;
}
.itemr:nth-child(3) {
grid-column: 4 /span 1;
} 

/* Used on 
LOVE-AFFAIRS, 
la-template  */
.grid-container20 {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-gap:.2rem;
  padding-bottom: 2rem;
}

/* Main Title */
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 0 .1rem;  
}
.header2 {
  display: flex;
  flex-direction: row;
  gap: 5rem;
  justify-content: center;
  /* align-items: center; */
  padding: 0 2.3rem 0 1.5rem;  
}


.main-title {
  font-family: var(--serif-font);
  font-weight: 400;
  letter-spacing: .2rem;
  font-size: 3.2rem;
  text-align: center;
  padding: .5rem 0 .5rem 0;
  margin-top: 1rem;
}

.cover-main-title {
  font-family: var(--serif-font);
  font-weight: 400;
  letter-spacing: 0.25rem;
  font-size: 4.4rem;
  text-align: center;
  padding: .5rem 0 .7rem 0;
  margin-top: 1rem;
}


.page-title {
  font-family: var(--serif-font);
  font-weight: 400;
  color: var(--dark-grey);
  letter-spacing: 0.2rem;
  font-size: 3.5rem;
  text-align: center;
  margin: 1.5rem 0;
}

.main-sub-title {
  font-family: var(--sans-serif-font);
  font-weight: normal;
  letter-spacing: 0.2rem;
  font-size: 2rem;
  text-align: center;
  padding: .5rem;  
}

.sub-title {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  letter-spacing: 0.1rem;
  font-size: 2.5rem;
  text-align: center;
  padding: .5rem;
  margin-bottom: .5rem;
}
.description {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.68rem;
  line-height: normal;
  letter-spacing: .32;
  color: var(--dark-grey);
  text-align: justify;
  width:80%;
  padding: 1.25rem 0 1rem 0;
  margin:0 auto;
} 

.description-2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 1.68rem;
  line-height: normal;
  letter-spacing: .32;
  color: var(--dark-grey);
  text-align: justify;
  width: 70%;
  margin: auto;
}  
   
/* Main Navigation */
.main-nav {
  font-family: var(--sans-serif-font);
}

.main-nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  list-style-type: none;
  font-size: 1.2rem;
  line-height: 2.5rem;
  letter-spacing: .15rem;
  font-weight: 400;
  padding: 0 1rem 1rem;
  } 

.main-nav li a {
  color: var(--black);
  padding: .2rem .7rem;
  margin: 0;
  transition: all 0.3s ease 0s;
}
.main-nav2 {
  font-family: var(--sans-serif-font);
}

.main-nav2 ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: .3rem;
  list-style-type: none;
  font-size: 1.2rem;
  line-height: 2.5rem;
  letter-spacing: .15rem;
  font-weight: 400;
  padding: 0 1rem 1rem;
  } 

.main-nav2 li a {
  color: var(--black);
  padding: .2rem .7rem;

  transition: all 0.3s ease 0s;
}


.page-link a:hover {
  background-color: var(--primary-color); 
}
.f-page-link a:hover {
  color:var(--black);
  background-color: var(--pale-grey);
}

.social-icons {
  text-decoration: none;
}

a.home-icon  {
  font-weight: bold;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-bottom: .5rem;
}

/* Login Page */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
 
.login {
  display: block;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate (-50%, -50%)
}

.login #name {
  display:flex;
  flex-direction:column;
  padding: .2rem;
  margin-top: .5rem;
}

.login #pass{
  display:flex;
  flex-direction:column;
  padding: .2rem;
  margin-top: .5rem;
}

.login button {
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .2rem;
  margin-top: .5rem;
}

/* Search Box */
a.search-icon  { 
  color: var(--dark-grey);
  padding-top: .5rem;
  margin-top: .75rem;
  margin-right: 2rem;
}

.search-box {
  display: flex;
  justify-content: center;
  padding-top: 25%;
  margin-right: .1rem;
  margin-top: .5rem;
}

input.recipe-search {
  padding-left: 0.1;
}

.recipe-search {
  width: 24rem;
  font-style: italic;
  letter-spacing: .2rem;
  border: 1px solid var(--light-grey);
  border-right: none;
  padding-left: 1.6rem;
  margin-bottom: 0;
  font-size: 1.5rem;
}

.search-button {
  width:30;
  height:30;
  align-items: center;
  border:1px solid var(--light-grey);
  border-left: none;
  background: none;
}

.search-button img {
  color: var(--light-grey);
  margin: .6rem 1.2rem .6rem 0;
  cursor: pointer;
}

/* Cover Page Navigation */
#cover-nav {
  display: flex;
  top: 0;
  background: var(--primary-color);
  justify-content: space-between;
  z-index: 1;
  padding: .5rem;
  list-style: none;
}

#cover-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
}

#cover-nav ul li a {
  color: var(--black);
  padding: 0;
  margin: 0 .01rem;
  text-decoration: none;
}

#cover-nav ul li a:hover {
  color: var(--green);
}

#cover-nav ul li #navshare {
  font-family: var(--sans-serif-font);
  font-size: 2rem;
  letter-spacing: 0.25rem;
  font-weight: 600;  
}

#cover-nav  #logroom {
  font-family: var(--sans-serif-font);
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .2rem;
  align-self: flex-end;
  border: 2px solid var(--black);
  border-radius: none;
  padding: .8rem;
}

/* Cover Page Section 1 */
#section-1 {
  position: relative;
  width: 100%;
  margin: auto;
  padding:0;
  text-align: center;
}

img.play-arrow {
  position: absolute;
  text-align: center;
  width: 11%;
  top: 52%;
  left: 50%;
  transform: translate(-54%, -50%);
  opacity: .8;
}

/* Cover Page Section 2 */
#section-2 {
  width: 100%;
  height: 345px;
  text-align: center;
  background-color: var(--pale-grey);
  padding:0;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

#trial {
  width:100%;
  font-family: var(--sans-serif-font);
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

#days {
  font-family: var(--sans-serif-font);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 2.8rem;
  letter-spacing: normal;
  padding: 0.5 0rem;
  margin: .1rem 0 1.3rem 0;
  }

#action {  
  font-size: 2rem;
  font-weight: 600;
  padding: 1.3rem 1.8rem 1.3rem 1.8rem;
  margin-bottom: 5rem;
}


.red-box a {  
  font-family: var(--sans-serif-font);
  font-size: 2rem;
  color: var(--primary-color);
  background-color: var(--red);
  letter-spacing: 0.1rem;
  font-weight: 600;
  padding: 1.3rem 1.8rem ;
  margin: 5rem ;
  border: none;
}

/* Cover Page Section 3 video */
#section-3 {
  padding: 0 2rem 0 0;
}

.topicImage img {
  width: 100%;
  position: relative;
}

/* Cover Page Appeal */
.appeal  {
  width: 65%;
  text-align: center;
  border: 2px solid var(--light-grey);
  padding:  2rem 1.5rem;
  margin: 3rem auto 2rem;
}

.appeal h4 {
  font-family: var(--serif-font);
  
  font-weight: normal;
  line-height: normal;
}

.appeal h5{
  font-family: var(--sans-serif-font);
  font-weight: normal;
  line-height: normal;
  padding-bottom: 1rem;
}



/* Home Page */

.display-label {  
  letter-spacing: normal;  
  margin-top: .1rem;
}

.display-label > h2 {
  font-family: var(--sans-serif-font);
  color: var(--dark-grey);
  font-weight: normal;  
  letter-spacing: normal;
  padding-bottom: .8rem;
}
.display-label > h3 {
  font-family: var(--sans-serif-font);
  font-size: 2rem ;
  color: var(--dark-grey);
  font-weight: 400;  
  letter-spacing: normal;
  padding: 0 1.5rem 0 1.5rem;
}
.home-display-label > h3 {
  font-family: var(--sans-serif-font);
  font-size: 2rem ;
  color: var(--dark-grey);
  font-weight: 400;  
  letter-spacing: normal;
  padding: 0 rem .5rem 0;
}

.display-label > h4 {
  font-family: var(--sans-serif-font);
  color: var(--dark-grey);
  font-size: 1.68rem;
  font-weight: normal;
  letter-spacing: normal;
  padding: .1rem 0 1.2rem 0;
}
.home-display-label > h4 {
  font-family: var(--sans-serif-font);
  color: var(--dark-grey);
  font-size: 1.68rem;
  font-weight: normal;
  letter-spacing: normal;
  padding: .5rem 0 1.2rem 0;
}

.display-label > h5 {
  font-family: var(--sans-serif-font);
  color: var(--dark-grey);
  font-weight: lighter;
  letter-spacing: normal;
  padding: .4rem 0 1rem;
}

/* Recipe Index Page */
button.toggle-display {
  background-color: var(--primary-color); 
  color: var(--black);
  font-family: var(--sans-serif-font);
  font-weight: lighter;
  font-size: 2.5rem;
  text-align: left;
  border: none;
  outline: none;
  transition: .6s;
}

button.toggle-display:hover {
  background-color: var(--pale-grey);
  border-radius: 50px;
  padding-right: 2rem;  
}

button.toggle-display:before {
  content: url('/images/downArrow.svg');
  color: var(--dark-grey);
  float: left;
  margin: 0 2rem 1rem .5rem;
  cursor: pointer;
}

button.toggle-display.active:before {
  content: url('/images/upArrow.svg');
  margin: 0 2rem 1rem .5rem;
}

.panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6sec ease-out;
}

/* Recipe-template */
.page-titler {
  font-family: var(--sans-serif-font);
  font-weight: lighter;  
  font-size: 3.5rem;
  color: var(--black);
  letter-spacing: 0.1rem;
  text-align: center;
  padding-bottom: .6rem;;
}
.recipe-display-label h2 {
  font-family: var(--sans-serif-font);
  font-weight:normal;
  font-size: 3rem;
  width:60%;
}

.text.show-more .more-txt  {
  display: inline;
}


/* Recipe-template text */
/* individual recipe pages */

.recipe-intro {
  padding:0 0 2rem;
}

.recipe-blurb  {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: normal;
  color: var(--dark-grey);
  text-align: justify;
  padding: .5rem 6rem 0 0;
}

.blurb {
  line-height: 1.75rem;
}

.recipe-intro .recipe-description {
  font-family: var(--sans-serif-font);
  font-size: 1.5rem;
  font-weight: lighter;
  color: var(--black);
  line-height: 2rem;
  padding-top: 1rem;
}



.more-txt {
  display: none;
}

.more-btn {  
  color: var(--dark-grey);
  background-color: var(--primary-color);
  font-size: 1rem;
  font-weight: 200;
  padding: .5 5rem;
  border: 1px solid;
  outline: none;
  cursor: pointer;
}

/* List Container */
.list-container {
  display: flex;
  flex-direction: column;
  justify-content:start; 
  font-family: var(--sans-serif-font);
  font-weight:lighter;
  text-align: left;
  padding: 3rem 0 0 0;  
}

.list-container h2 {
  font-size: 2.5rem;
  font-weight:lighter;
  text-align: left;
  margin-bottom: 1.2rem;
}

.list-container ul li {
  display: none;
  list-style-type: none; 
  font-size: 1.5rem;
  font-weight: lighter;
  display: none;
  list-style-type: none;
  overflow: hidden;
  transition: max-height 0.2sec ease-out; 
}

button.toggle-list {
  display:flex;
  flex: end;
  width: 35%;
  align-items: center;
  background-color: var(--primary-color); 
  color: var(--dark-grey);
  font-family: var(--sans-serif-font);
  font-size: 1.75rem; 
  justify-content:space-between;
  font-weight: 400;
  text-align: left;
  border: none;
  outline: none;
  /* padding:0 0 .3 1.5rem;  */
  padding-bottom: .3rem;
  margin: 0 0 0 .7rem;
  transition: .6s;
}

button.toggle-list:hover {
  background-color: var(--pale-grey);  
  padding: 0 0 .3 1.5rem;  
  margin: 0 0 0 .7rem;
}

button.toggle-list::after {
  content: url('/images/downArrow20.svg');
  color: var(--dark-grey);
  flex: end;
  padding-left: 2rem; 
  cursor: pointer;
}

button.toggle-list.active::after {
  content: url('/images/upArrow20.svg');
}

.ingline {
  width: 35%;
}

.ingList {
  display:flex;
  flex-direction:column;
  text-align: left;  
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6sec ease-out;
}

a.inst {
  font-family: var(--sans-serif-font);
  align-self: start;
  text-align: left;
  padding: .2rem .2rem 0 2rem;
}

/* ingredient list drop down form */
.open-button {
  display:flex;
  width: 30%;
  font-family: var(--sans-serif-font);
  color:var(--dark-gray);
  background-color: var(--primary-color);
  justify-content: space-between;
  font-weight: normal;
  font-size: 1.5rem;
  border-style: hidden;
  padding: .5rem .2rem ;
  
}

.open-button:hover {
  background-color: var(--pale-grey);
  border-radius: 50px;

}
.measure {
  padding:  0 .5rem;
}

.ingredient {
  padding: 0 .2rem;
}
.choices {
  display: none;
  position:fixed;
  top: 59%;
  right:50% ;
  border: none;
  z-index: 9;
}

.form-container {
  max-width: 400px;
  padding: 1rem;
  background-color: var(--primary-color);
}



.rb-btn {
  display: block;
  width: 25%;
  font-family: var(--sans-serif-font);
  color:var(--primary-color);
  background-color: var(--purple);
  font-weight: bold;
  font-size: 1.25rem;
  border-style: hidden;
  padding: .3rem  2.09rem ;
  margin: 1rem  0;
}

.rb-btn:hover { 
  border: .2rem solid var(--red);
  padding: .1rem 1.89rem;
}

.cart-btn{
  display:block;
  width: 25%;
  font-family: var(--sans-serif-font);
  color:var(--primary-color);
  background-color: var(--lime);
  font-weight: bold;
  font-size: 1.25rem;
  border-style: hidden;
  /* border-radius: 1.5rem; */
  padding: .3rem  1.012rem ;
  margin: 1rem  0;
}

.cart-btn:hover {
  border: .2rem solid var(--red);
  padding: .1rem .812rem 
}

.dir h2 {
font-family: var(--sans-serif-font);
font-weight: lighter;
font-size: 2.5rem;
color: var(--black);
margin-left: 2rem;
margin-bottom: .5rem;
}

.dirstep {  
  width: 35px;
  line-height:35px;
  font-size: 1.8rem;
  border-radius: 50%;
  text-align: center;  
  border: 2px solid var(--dark-grey);
  margin: 1.4rem;
  /* padding: .25rem; */
  /* margin-top: 1rem; */
}

.step {
  font-family: var(--sans-serif-font);
  font-size: 1.4rem;
  font-weight: 400;
  text-align: justify ;
  color: var(--black);
  background-color: var(--primary-color);
  line-height:2rem;
  padding: .5rem 0 1rem 1rem;
  
}



.recipe-info {
  font-family: var(--sans-serif-font);
  font-weight: lighter;
  font-size: 1.4rem;
  color: var(--black);
  line-height: 1.75rem;
  background-color:var(--pale-grey);
  padding:1rem 1.5rem 1.5rem 1rem;
}

.recipe-info  h3{
font-size: 1.65rem;
padding-top: 1rem;
padding-left: .5rem;
;
}

.recipe-info p {

  color: var(--black);
  padding-top: .2rem;
  padding-left: 1.5rem;
}

.recipe-info h4 {
  padding-left: 1rem;
}

.toolbox {
 margin-top: 1.5rem;
 background-color:var(--pale-grey);
}

.toolbox h2 {
  width: 100%;
  font-family: var(--sans-serif-font);
  font-weight: lighter;
  font-size: 1.75rem;
  color: var(--black);
  text-align:center;
  background-color:var(--pale-grey);
  padding-top: 1rem; 
}

/* recipe pages */
.img-labelr {
  width: 100%;
  font-family: var(--sans-serif-font);
  font-weight:300;
  color: var(--black);
  text-align: center;
  font-size: 1.2rem;
  background-color: var(--pale-grey);
  padding-top: .5rem; 
}

/* Cooking Basics */

/* Kitchen Tool Page  */
.disclaimer {  
  font-family: var(--sans-serif-font);
  font-weight: 400;    
  font-size: 1.5rem;
  color:var(--dark-grey);
  letter-spacing: normal;
  line-height: 2rem;
  text-align: justify;
  border: 2px solid var(--light-grey);
  padding: 1.4rem 1rem;
  margin: 1rem 1.5rem 1rem;
}
.preview-disclaimer { 
  max-width: 80%; 
  font-family: var(--sans-serif-font);
  font-weight: 400;    
  font-size: 1.5rem;
  color:var(--dark-grey);
  letter-spacing: normal;
  line-height: 2rem;
  text-align: justify;
  border: 3px solid var(--light-grey);
  outline: none;
  padding: 1rem 1.4rem;
  margin: 0 7rem 1.5rem;
}
.sales-disclaimer {  
  font-family: var(--sans-serif-font);
  font-weight: 400;    
  font-size: 1.5rem;
  color:var(--dark-grey);
  letter-spacing: normal;
  line-height: 2rem;
  text-align: justify;
  border: 2px solid var(--light-grey);
  padding: 1.4rem 3rem;
  /* margin: 1rem 10rem; */
  width:68%;
  margin: 0 auto;
}


/* Info pages for herbs */
.itemfr {
  grid-column: 2 /span 1 ;
}

.item-img {
  padding-top: 1rem;
}

.latin-name {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-style: italic;
  text-align: center; 
  width: 75%; 
  line-height: 1.3;
  margin:auto; 
}

.item-description {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.68rem;
  line-height: normal;
  color: var(--dark-grey);
  text-align: justify;
  padding: .5rem 6rem 0 0;
}

.item-description h3 {
  font-size: 2rem;
}
/* right-previous and left-next arrows  */
.next {
  height: 2.5rem;
  font-family: var(--sans-serif-font);
  font-size: 1.68rem;
  display: flex;
  justify-content: space-between;
  padding: 0 1.25rem;
}

/* World Cuisines */
.wc-btn {
  display:block;
  width:25%;
  font-family: var(--sans-serif-font);
  color:var(--primary-color);
  background-color: var(--yellow);
  font-weight: bold;
  font-size: 1.25rem;
  border-color: var(--tangerine);
  /* border-radius: 1.5rem; */
  border-style: hidden;
  outline:none;
  padding: .3rem  2.1rem ;
  margin: 1rem  0;
}

.wc-btn:hover {
  border: .2rem solid var(--red); 
  padding: .1rem 1.9rem;
}

/* World cuisines Herbs */
.national-cuisines {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.68rem;
  line-height: normal;
  word-spacing: -.1rem;
  color: var(--dark-grey);
  text-align: left;
}

span.national-cuisines a {
  color: var(--blue);
}

span.national-cuisines a:hover {
  color:var(--turquoise);
  
  }

.item-recipes {
  font-family: var(--sans-serif-font);
  font-weight: lighter;
  line-height: normal;
  color: var(--dark-grey);
  padding-bottom:1rem;
}

.vendor-list {
  font-family: var(--sans-serif-font);
  color: var(--dark-grey);
  line-height:normal;
}

/* Spice Blend Page */
.spice-img {
  padding: 1rem 0;
}
.spice-description {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: normal;
  color: var(--dark-grey);
  text-align: justify;
  margin-right: 8.43em;
} 
.spice-description h3 {
  padding: 1em 0 .5 0;
}
.spice-description p {
  font-size: 1.5em;
  padding: 0 0 1em ;
}
.spice-description .step {
  padding: 1rem 0 0 ;
}
.spice-description ul {
  font-size: 1.5em;
  line-height: 2;
  padding: 0 0 .7em;
}
span.heavy {
  color:#49494A;
  font-size:1.68rem;
  font-weight: 600;
  display:inline-block;
  padding: .2rem 0 .2em;  
}
.one-description {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.68rem;
  line-height: normal;
  letter-spacing: .32;
  color: var(--dark-grey);
  text-align: justify;
  width:75%; 
  padding: 1.25rem 0 1rem 0;
  margin:0 auto;
}
.spice-img-center {
  text-align: center;
  padding: 2rem 0 2.25rem;
  margin:auto;
}
.spice-center { 
  max-width: 80%;
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.68rem;
  line-height: normal;
  color: var(--dark-grey);
  text-align: justify;
  /* padding: .5rem 0rem; */
  margin: 0 auto;
}
.spice-center h3 {  
  margin-bottom: 2rem 0;
}
.spice-center p {
  font-size: 1.68rem;
  padding: .6rem 0;
}
.spice-center ul {
  font-size: 1.5rem;
  line-height:2;
  padding-bottom: .5rem;
}
.spice-center .uses {
  padding: .2rem 0 2rem ;
}

.ocr-info {  
  font-family: var(--sans-serif-font);
  color: var(--dark-grey);
  font-weight: 400;
  font-size: 1.68rem;
  line-height: normal;

}
.ocr-info h3 {
  font-size:1.75rem;
  font-weight: 600;
  padding: 0 0 .5rem 0;
}
.ocr-info p {  
  /* font-size:1.5rem; */
  font-weight: 400;
  padding: 0 0 .6rem 0;
}
.ocr span {
  display:inline-block;
}
.indentlist {
  margin-left: 1.5em;
  margin-right: .75em;
  margin-bottom: 2rem;
}
.indent-link-list {
  margin: 1rem;
}
.listotools {
  font-family: var(--sans-serif-font);
  color: var(--dark-grey);
  padding: 2rem 0 0 0;
}
.listotools li {
  line-height: 2.25rem;
}
.listotools h4 {
  font-size: 2rem;
}
.listotools a {
  font-size: 1.68rem;  
}
.listotools a:hover {
  color: var(--blue);  
}

.pantry {
  font-family: var(--sans-serif-font);
  color: var(--dark-grey)
}
.pantry h4 {
  font-size: 2rem;
}
.pantry li {
  line-height: 2.25rem;
}
.pantry a {
  font-size: 1.68rem;
}
.pantry a:hover {
  color: var(--blue);
}
.ingredients {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.68rem;
  line-height: normal;
  color: var(--dark-grey);
  text-align: justify;
  /* padding: .5rem 0rem; */
  margin: auto;
}
.ingredients span {
  display: inline-block;
}

.goofy {
  color:#49494A;
  font-size: 1.75rem;
  font-weight: 400;
  display:inline-block;
  padding: .2rem 0 .2em 1.2rem; 
}

.directions { 
  font-family: var(--sans-serif-font);
  color: var(--dark-grey);
  font-weight: 400;
  font-size: 1.68rem;
  line-height: 1.5rem; 
  margin: 2rem 0 1rem .5em;
}
.directions ul h5 {
  font-size: 1.5rem;
  font-weight: 600;
  padding: .5 0;
}

.directions p {
  max-width: 70%;
  line-height: 2.5rem;
  padding: 0;
}

.directions li {
  padding: 0 ;
}

.directions h3 {
  padding-bottom: 1rem;
}


/* Contact Page */
.section-title {
  text-align: center;
  font-size: 3rem;
  font-weight:lighter;
  padding: 1rem;
}

 /* Terms and About Us Pages */
.pea-pod {
  text-align:center;
  margin: auto;
  padding-top:100px ;
}

.dedication {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 3rem;
  line-height: 400%;
  text-align: center;
  margin: auto;
  padding: 50px;
}

.terms {
  padding:80px 0;
  margin:auto;
}

.privacy {
  padding: 50px 0;
  margin: auto;
}

/* Love Affairs pages */
.display-image {
  width:100%;
}

/* LOVE-AFFAIRS, la-template lists */
.grid-container20  {
  font-family: var(--sans-serif-font);
  font-size: 1.6rem;
  font-weight: lighter; 
  line-height: normal;  
}

.grid-container20 h3 {
  font-size: 2.1rem;
  font-weight: lighter;
  padding:.4rem;
  margin: 0; 
}

.grid-container20 ul {
  list-style: disc inside none;
  list-style-position: outside ;
  margin-left: 1rem;
}

.grid-container20 a:hover {
  background-color: var(--pale-grey);
}

.grid-container20 a:hover {
  background-color: var(--pale-grey);
}

li::marker {
  color:var(--dark-grey);
  font-size: 1.68rem;
}

.spark {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  outline: none;
}

.spark img {
   padding-top: 1rem;
} 
.kisses {
  font-family: var(--sans-serif-font);
  font-size: 1.75rem;
  font-weight: normal;
  color: var(--dark-grey);
  line-height:normal;
  text-align: center;
  width:80%;
  margin:0 auto;
}

.reclist1 {
  grid-column: 7 / span 5;
  grid-row: 1 / span 1;  
} 
.reclist2 {
  grid-column: 12 / span 5;
  grid-row: 1 / span 1;  
}
.reclist3 {
  grid-column: 17 / span 5;
  grid-row: 1 / span 1;
  padding-top: 0;  
}
.reclist4 {
  grid-column: 7 / span 5;
  grid-row: 2 / span 1;
}
.reclist5 {
  grid-column: 12 / span 5;
  grid-row: 2 / span 1;
}
.reclist6 {
  grid-column: 17 / span 5;
  grid-row: 2 / span 1;
}  
.reclist7 {
  grid-column: 2 / span 5;
  grid-row: 2 / span 1;
}

.hr80 {
  width: 80%;
}

/* The Lovers */
.la-title {
  font-family: var(--sans-serif-font);
  font-weight: lighter;
  letter-spacing: 0.1rem;
  font-size: 4rem;
  text-align: center;
  margin: 1.2rem 0 1rem 0;
}

/* Used on TWO-COLUMN, Aromatics,  Love Affairs */
.la-item {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 2rem;
  
}

.tc-description {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: normal;
  color: var(--dark-grey);
  text-align: start;
  padding: .4rem .4rem .75rem 0;
}

.recipe-link {
  margin-left: 58%;
  font-size: 1.25rem; 
  letter-spacing: .15rem; 
  text-align:center;
  border: 1px solid var(--dark-grey);
  outline: none;
  background-color: var(--primary-color);
  padding: .2em 0;
}
.recipe-link:hover {
  background-color:var(--pale-grey);
}
/* Video  */

/* used on techniques pages */
.video-basics-wrap {
  width: 80%;
  margin: auto;
}

.video-basics {
  width: 100%; 
  height: 100%;  
}

.video-basics-title {
  font-family: var(--sans-serif-font);
  text-align: center;
  padding: .5rem; 
}

/* used on recipe-template */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.2rem;
  background-color: var(--primary-color);
  margin-top: 1.5rem;
}

.video-wrap { 
  height: 87%;
  width: auto; 
  background-color: var(--pale-grey);
  text-align: center;
  position: relative;
 }

video {
  width:100%;
  height: auto;
  text-align: center;
  position: relative;
}

.video-title {
  font-family: var(--sans-serif-font);
  padding-top: .5rem;
  text-align: center;
} 

.play-arrow {
  top: 70%;
  position: absolute;  
}

/* Footer Pages */
.faq h3 {
  font-family: var(--sans-serif-font);
  font-size: 2.2rem;
  font-weight: normal;
  padding-bottom: .5rem;
  }
  
.faq p {
  font-family: var(--sans-serif-font);
  font-weight: 400;
  font-size: 1.5rem;
}

/* Main Footer */
.main-footer { 
  color: var(--dark-grey);
} 

.footer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: .5rem;
  margin-bottom: .5rem;
}

.footer-heading {
  grid-column: 1 / span 6;
  font-family: var(serif-font);
  font-size: 2.5rem;
  font-weight: normal;
  letter-spacing: 0.15rem;
  padding: .75rem 0 0 1.4rem;
  margin: .5rem 0 .7rem 0;
}

#qr-code {
  grid-column: 1 / span 1;
  padding: 0 1.5rem .2rem 1.5rem;
}

#qr-code img {
  width: 70%;
  margin-left: 2rem
}

.footer-nav-left {
  grid-column: 2/ span 1;
  padding: .5rem 0 0 0;
  margin: 0;
}
.footer-nav-right {
  grid-column: 3 / span 2;
  padding: .5rem 0 0 0;
  margin: 0 0 0 -.5rem;
}
.footer-links {
  text-align: left;  
  padding:0;
  margin: 0; 
}
.footer-links  li {  
  font-family: var(--sans-serif-font);
  font-weight: lighter;
  text-align: left;
  list-style: none;
  padding-bottom: .8rem;
}
.footer-cover-nav {
  grid-column: 2 / span 1;
  justify-self:start;
  padding-bottom: 2rem;
  margin: .6rem 0 0 0;
}

.btn-wrap {
  grid-column: 5 / span 2;
  align-items: justify;
  padding-top: .1rem;
  margin: 0 6rem ; 
}

.action-btns {
  display: grid;
  grid-template-rows:repeat(2, 1fr);
  grid-gap:.5rem;
  text-align: justify;
  padding-top: .5rem;
}

#subscribe-btn a h3 {
  font-family: 'Open Sans', sans-serif;
  color:#fff;
  font-size: 1.6rem;
  letter-spacing: 0.35rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: .1rem;
}

#gift-btn a h3 {
  font-family: var(--sans-serif-font);
  color:#fff;
  font-size: 1.6rem;
  letter-spacing: 0.35rem;
  font-weight: 600;
  padding:0;
}

.copyright {
 width: 100%;
  font-family: var(--sans-serif-font);
  font-size: 1.3rem;
  letter-spacing: .2rem;
  color: var(--black);
  background-color: var(--primary-color);
  text-align: left;
  padding: .7rem  1.8rem .7rem 4.5rem;

}
/* Media Queries min 1280, 1024, 780, 480 */
/* media Query for Larger screens and Land scape to */
@media only screen and (max-width:1280px) { 
  .container {
    padding: 0 1rem;
  }
  .header2 {
    gap: 3rem;
    padding: 0 2.3rem 0 .1rem;  
  }
  .main-title {
    font-size: 3rem;
    margin-top: 1.4rem; 
  }
  .main-nav2 {
    display: none;
  }
.main-nav2 ul {
  display: block;
}
  .main-nav2 ul {
    font-size: 1rem;
  }
  .main-nav li a {    
    padding: .2rem .1rem;
  }
  .grid-container2 {
    gap:1rem;
  }  
  .footer-grid {
    display: grid;
    grid-template-columns: repeat( 5, 1fr);
    grid-gap: .5rem;
  }  
 .footer-heading {
   font-size: 2.4rem;
  padding: .75rem 0 0 1.5rem;
 }
 .qr-code {
  padding: .75rem 0 0 4.5rem;
 } 
 #qr-code img {
  width: 75%; 
  }  
  .footer-nav-left {
    grid-column: 2/ span 1;
    padding: .5rem 0 0 2rem;
    margin: 0 0 0 .5rem;
  }
  .btn-wrap {
  grid-column: 5/ span 2;
  justify-self:end;
  margin: 0 5rem 0 0; 
  }  

  .action-btns {
    display: grid;
    grid-template-rows:repeat(2, 1fr);
    grid-gap:.5rem;
    text-align: justify;
    padding-top: 1rem;
  }

  #subscribe-btn a h3 {
    font-family: 'Open Sans', sans-serif;
    color:#fff;
    font-size: 1.6rem;
    letter-spacing: 0.35rem;
    font-weight: 600;
    padding: .05rem 1rem;
    margin-bottom: .1rem;
  }

  #gift-btn a h3 {
    font-family: var(--sans-serif-font);
    color:#fff;
    font-size: 1.6rem;
    letter-spacing: 0.35rem;
    font-weight: 600;
    padding:0 1rem;
  }
}

@media only screen and (max-width: 1279px) and (min-width: 1024) {

  .container {
    padding: 0 1rem;
  }
  .main-footer{         
    padding:0 0rem 0 0;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr,3fr,3fr,1fr;
    grid-gap: .5rem;
  }
  .footer-heading {
    grid-column: 1 / span 6;
    font-size: 2.3rem;
    padding: .75rem 0 0 5;
   }
   .qr-code {    
    padding: .75rem 0 0 4.5rem;
   } 
   #qr-code img {
    width: 75%; 
  }
  .footer-nav-left {
    grid-column: 2/ span 1;
    
    padding: .5rem 0 0 0;
    margin: 0 ;
  }
  
  .copyright {
    font-size: .75;
    letter-spacing: .05rem;
  }  
}

@media only screen and (max-width:1023px) and (min-width:780px) {
  .main-footer{         
    padding:0 0rem 0 0;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr,3fr,3fr,1fr;
    grid-gap: .5rem;
  }
  .footer-heading {
    grid-column: 1 / span 6;
    font-size: 2.3rem;
    padding: .75rem 0 0 5;
   }
   
   #qr-code img {
    width: 75%; 
  }
  .footer-nav-left {
    grid-column: 2/ span 1;
    
    padding: .5rem 0 0 0;
    margin: 0 ;
  }
  .btn-wrap {
    grid-row: 2 / span 2;
    
    margin: 0 5rem; 
  } 
  .action-btns {
    display: grid;
    grid-template-rows:repeat(2, 1fr);
    grid-gap:.5rem;
    text-align: justify;
    padding-top: 1rem;
  }

  #subscribe-btn a h3 {
    padding: .05rem 1rem;
    margin-bottom: .1rem;
  }

  #gift-btn a h3 {
    padding:0 1rem;
  }
  .copyright {
    font-size: .75;
    letter-spacing: .05rem;
  }  
} 

@media only screen and (max-width: 779px) and (min-width: 480px) {
  .main-nav2 {
    display: none;
  }  
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: .5rem;
  }
  .footer-heading {
    font-size: 2.2rem;
    letter-spacing:.01rem;
    text-align: center;
  }
  .qr-code {
    padding: .75rem 0 0 4.5rem;
   } 
  #qr-code img {
    width: 75%;  
    
  }
}    

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

  .main-footer {
    margin:0 auto;
  }
  .footer-grid {
    display: block;
    margin-bottom: 2.5rem;
  }
  .footer-heading h4{
    font-size: 3.5rem;
    letter-spacing:.01rem;
    text-align: center;
    padding:2rem 0;
    margin:0 auto;
  }
  
  .footer-nav-left, .footer-nav-right, .footer-links,  .f-page-link, a {
    display: block;
    text-align: center;
    width:100%;
    padding:0;
    margin:0 auto;
  }
  .f-page-link  { 
    font-size: 2rem;
    padding: 2.5rem 0;
    
  }
  
  #qr-code   {
    width:75%;
    max-width: 150px;
    text-align: center;
    margin: 0 auto;    
  }
  #qr-code img  {
    width:100%;
    max-width: 200px;
    text-align: center;
    margin: 0 auto;    
  }

  .copyright p {
    text-align:center;
    margin:irem auto 2rem;
  }
  
}