body,
main {
  background-color: #F3F3F3;
}
main {
  position: relative;
}
h2{
  font-family: 'Arial-BoldMT', sans-serif;
  color:#003968;
  text-transform: none;

}
#mastHead {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}
.recipe-page #mastHead  {
  text-align: center;
  height: 75vh;
  
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
#crostini #mastHead{
  background-position: 50% 89%;
}
.recipe-page #mastHead h1 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: 'ArialMT', sans-serif;
  color: #fff;
  width: 100%;
  padding: 0.75em 1em;
  font-size:45px !important;
}
 #mastHead h1{
  background: linear-gradient(90deg, rgba(195,94,47,1) 0%, rgba(211,112,40,1) 30%, rgba(179,74,38,1) 100%);

}
#emilia #mastHead h1{
  background-color: #8abc69;
}
#toscana #mastHead h1{
  background-color: #9fdb67;
}
#sicilia #mastHead h1{
  background-color: #efcb4b;
}
#puglia #mastHead h1{
  background-color: #ffbe4f;
}
#veneto #mastHead h1{
  background-color: #7ab597;
}
.recipe {
  width: 60%;
  margin: auto;
  padding-top: 8em;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 2rem;
 background-color: #fff;
 border-right: 2px solid #B85A3E;
  border-left: 2px solid #B85A3E;

   
}

.recipe.last{
  margin-bottom: 2em;
  border-bottom: 1px solid #074da6;
}
.recipe .toast-type{
  text-align: center;
}
h2{
  font-size:25px;
  font-weight: 500;
}
ul {
  padding-left: 0;
  line-height: 2;
  font-size:25px;
}
.ingredients {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.ingredients ul {
  list-style-type: none;
}
.directions ul{
  padding-left:1em;
}
.directions li {
  list-style-position: outside;
  padding-bottom:10px;
}
li{
  letter-spacing: .1px;
}
.print{
  cursor: pointer;
}

.torn{
width:100%;

}

.icons-row{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:5em auto;
}

 .icons-row a{
  margin:1%;
  display: inline-block;
 }
 
 @media only screen and (max-width: 768px) {
  .icons-row a img{
     width:85%;
    }
    .icons-row{
      display: flex;
      justify-content: center;
      align-items: center;
      margin:2em auto;
    }
  }
  @media only screen and (max-width: 500px) {
  .icons-row a img{
     width:80%;
    }
  }

  #tip{
    background:url(../img/leaves.png), linear-gradient(90deg, rgba(195,94,47,1) 0%, rgba(211,112,40,1) 30%, rgba(179,74,38,1) 100%);
    text-align: center;
    padding:4em 3%;
    border-top: 12px solid #B85A3E;
  }
  #tip h2{
    font-size:40px;
    color:#1a3768;
    text-transform: uppercase;
    
  }
  #tip p{
    font-family: 'ArialMT', sans-serif;
    font-size: 40px;
    color:#1a3768;
    width:60%;
    margin:auto;
  }
  #tip h2 p{
    font-size:70px;
    text-transform: none;
    font-family: 'HeartyMorning', sans-serif;
    color:#1a3768;
    padding-top:1rem;
    width:100%;
    letter-spacing: 0;
  }

  @media only screen and (max-width: 1090px) {
    #tip p{
      font-family: 'ArialMT', sans-serif;
      font-size: 40px;
      color:#1a3768;
      width:80%;
      margin:auto;
    }
  }
  @media only screen and (max-width: 830px) {
    #tip h2 p{
      font-size: 8vw;
    }
    #tip p{
      font-family: 'ArialMT', sans-serif;
      font-size: 40px;
      color:#1a3768;
      width:100%;
      margin:auto;
    }
  }
  @media only screen and (max-width: 768px) {
    #tip h2, #tip p {
      font-size: 30px;
    }
  }
  .fa-circle-play{
    z-index: 55;
  }
  .recipe-video{
    text-align:center;
    padding:3em 0;
    position: relative;
cursor: pointer;

  }
  .recipe-video video{
    max-width: 100%;
    max-height: 80vh;
    position: relative;
    border-radius:20px;
    z-index: 3;
  }
   .fa-circle-play{
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #fff;
   }




#recipeFooter {
  position: relative;
  background-color: #1E3967;
  padding: 2% 0;
  text-align: center;
  
}

#recipeFooter p {
  color: #fff;
 
  font-size: 11px;
}
#backgroundRicottaBowl {
  position: absolute;
  bottom: 0;
  top: unset;
}
@media only screen and (max-width: 992px) {
  #mastHead {
    width: 75%;
  }
  .recipe {
    width: 75%;
    padding-top: 9em;
  }
  .sips{
    width:87%;
  }
}
@media only screen and (max-width: 768px) {
  #mastHead {
    width: 80%;
  }
  .recipe {
    width: 80%;
    padding-top: 9em;
  }
  #backgroundRicottaBowl {
    width: 32%;
  }
  h2{
    font-size:18px;
    font-weight: 500;
  }
  ul {
    padding-left: 0;
    line-height: 2;
    font-size:18px;
  }
  .sips{
    width:92%;
  }
  .sips p{
    font-size: 18px;
  }
  .did-you-know h2{
    font-size: 45px;
  }
  .did-you-know p{
    font-size: 18px;
  }
  .did-you-know div{
    width:80%;
  }
}
@media only screen and (max-width: 500px) {
  #mastHead {
    width: 90%;
  }
  .recipe {
    width: 90%;
    padding-top: 4em;
  }
  #socialIcons img {
    padding: 0 0px 1.5em 0px;
    width:50px;
    margin:0 5px;
  }
  .recipe-page #mastHead  {
  height: 50vh;
  }
  .recipe-page #mastHead h1 {
    font-size: 24px !important;
    }
    h2{
      font-size:16px;
      font-weight: 500;
    }
    ul {
      padding-left: 0;
      line-height: 2;
      font-size:16px;
    }
    .sips{
      width:100%;
    }
    .sips p{
      font-size: 16px;
      line-height:1.2;
    }
}

.bold{
  font-family: BrandonBlack, sans-serif;
}


.sub-title{
  font-family: 'Arial-BoldMT', sans-serif;
  text-decoration:underline;
}


.lr{
 
  position: absolute;
  left: 0;
  width: 10vw;
  bottom: 10%;
}

.rr{
 
  position: absolute;
  right: 0;
  width: 10vw;
  top: 10%;
}
.rr-l{
 
  position: absolute;
  right: -9%;
  width: 10vw;
  top: -8%;
}
.lr-l{
 
  position: absolute;
  left: -9%;
  width: 10vw;
  bottom: -10%;
}
@media only screen and (max-width: 1350px) {
  .lr{
 
    position: absolute;
    left: -5%;
    width: 10vw;
    bottom: 10%;
  }
  .rr{
   
    position: absolute;
    right: -5%;
    width: 10vw;
    top: 10%;
  }
}
@media only screen and (max-width: 1110px) {
  .lr{
 
    position: absolute;
    left: -5%;
    width: 14vw;
    bottom: 10%;
  }
  .rr{
   
    position: absolute;
    right: -5%;
    width: 14vw;
    top: 10%;
  }
}
@media only screen and (max-width: 992px) {
  .rr-l{
 
    position: absolute;
    right: -5%;
    width: 10vw;
    top: -8%;
  }
  .lr-l{
   
    position: absolute;
    left: -5%;
    width: 10vw;
    bottom: -10%;
  }
}

@media only screen and (max-width: 768px) {
.lr, .rr, .lr-l, .rr-l{
  display:none;
}
}


/* PRINTING CSS */
@media print {
  main{
    background-image:none;
  }
  header{
    display: none;
  }
  main{
    /* display:flex; */
  }
#mastHead{
  height:30px !important;
}
.recipe-page #mastHead h1{
  font-size: 30px !important;
}
  *{
    font-size:16px !important;
  }
  #socialIcons{
    display: none;
  }
.recipe{
  border:none !important;
}
 
  #recipeFooter{
    display: none;
  }
  .recipe-video, .icons-row{
    display:none;
  }
}