/*
    File Name: style.css
    Author: Rebecca Arango
    Owner: Malibu Good Foods
    Date: 08/08/2020
*/


*
{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/*Navigation*/

  body
  {
    overflow-x: hidden;
  }
  section.Navigation
{
  position: fixed;
  z-index: 2;
  top: 0;
  background-color: white;
  width: 100%;
}
.Navigation_Logo
{
    position: absolute;
    width: 100%;
    top: 10%;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, z-index 1s;
    z-index: 2;
}
.Navigation_Logo img
{
    width: 9%;
    display: block;
    margin: 0 auto 0 auto;
}
.Navigation_Logo-Faded
{
opacity: 0;
z-index: -1;
}

  .Navigation_Header
  {
      display:flex;
      flex-direction: row;
      justify-content: center;
      padding: 1% 4%;
      margin-top: 10%;
      transition: margin-top 0.3s, padding 0.5s;
  }

  .Navigation_Company-Name
  {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 auto 0 auto;
  }
  .Navigation_Company-Name-Desktop
  {
      display: none;
  }
  .Navigation_Company-Name-Mobile img
  {
   display: block;
   margin: 0 auto 0 auto;
   
  }
  .Navigation_Bottle-Icon{
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  .Navigation_Bottle-Icon img
  {
    display:block;
    margin:0 auto;
    width: 13px;
  }
 
  .Navigation_Links-Desktop
  {
    display: none;
  }

  .Navigation_Links-Mobile
  {
    position:absolute;
    z-index: 2;
    left: 0px;
    height: 100vh;
    top:0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.5s ease-out;
    overflow-y: scroll;
  }
  
  .Navigation_Links-Mobile a
  {
    font-family: "Lato", sans-serif;
    letter-spacing: 0.25vw;
    color:#11143e;
    text-decoration: none;
  }
  .Navigation_Links-Mobile a:hover
  {
      color:#bf8a28;
  }
  .Navigation_Burger
  {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .Navigation_Burger div
  {
    width: 20px;
    height:2px;
    background-color: #11143e;
    margin: 3px auto 3px auto;
  }
 

  .Navigation_Close-Icon
  {
      width: 100%;
      padding: 5%;
      display: flex;
      flex-direction: row;
  }
  
  .Navigation_Drawer-Brand img
  {
      display: block;
      margin: auto;
      width:10%;
  }
  
  .Navigation_Close-Icon a
  {
      color:#11143e;
  }
  .Navigation_Close-Icon a:hover
  {
    color: #11143e;
  }
  .Navigation_Drawer-Company-Name img
  {
      width: 60%;
      margin-top: 3%;
  }
  .Navigation_Links-Mobile li
  {
    list-style: none;
    padding: 5%;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-variant: small-caps;
    letter-spacing: 0.25vw;
    font-size: 5vw;   
  }

.Navigation_Links-Mobile-Show{
  transform: translateX(0%);
}
.Navigation_Links-Mobile a:hover
{
    color:#bf8a28;
}
.Navigation_Header-Small
{
    margin-top:0%;
}
/*NAVIGATION - Tablet Portrait*/
@media screen and (min-width: 600px){
    .Navigation_Bottle-Icon img
    {
        width: 18px;
    }
   
    .Navigation_Logo img
    {
        width: 8%;
    }
}
/*NAVIGATION DESKTOP*/
@media screen and (min-width:900px){
.Navigation_Logo
{
    top: 7%;
    /*top: 37%;*/
}
.Navigation_Logo img
{
    width: 5.5%;
}
.Navigation_Burger
{
  display: none;
}
.Navigation_Header
{
    margin-top: 5%;
    padding: 1% 4% 0.5% 4%;
}
.Navigation_Company-Name-Mobile
{
    display: none;
}
.Navigation_Company-Name-Desktop img
{
    display: block;
    margin: 0 auto 0 auto;   
}

.Navigation_Company-Name-Desktop
{
    display: block;
}

.Navigation_Links-Desktop
{
  display: flex;
  flex-direction: row;
  justify-content:center;
  padding-bottom: 1%;
  opacity: 1;
  transition: opacity 0.5 ease-in-out;
}

.Navigation_Links-Desktop li
{
 list-style: none;
 font-family: 'Lato', sans-serif;
 font-weight: 700;
 font-variant: small-caps;
 letter-spacing: 0.15vw;
 font-size: 100%;
 margin-left: 2%;
 margin-right: 2%;
}

.Navigation_Links-Desktop a
{
  color:#11143e;
  text-decoration: none;
}

.Navigation_Links-Desktop a:hover
{
    color: #bf8a28;
}

.Navigation_Links-Mobile
{
  display:none;
}

.Navigation_Bottle-Icon
{
    display:none;
}
.Navigation_Header-Small
{
    
    margin-top:0%;
}
}



/*LIQUID SUNSHINE MOBILE*/
section.Liquid-Sunshine
{
  position: relative;
  margin-top: 25%;
}
section.Liquid-Sunshine img
{
    display: block;
    width: 100%;
}

.Liquid-Sunshine-Text
{
  position: absolute;
  top:20%;
  left: 28%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: row;
}


/*mobile*/
.Liquid-Sunshine-Left-Quote
    {
        font-size: 8vw;
        text-align: center;
        margin-right: 6px;
        color: #b65e2f;
    }
   

.Liquid-Sunshine-Right-Quote
    {
        text-align: center;
        font-size: 8vw;
        /*margin-left: 6px;*/
        color: #b65e2f;;
    }


.Liquid-Sunshine-Text h1
    {
        font-family: 'Lato', sans-serif;
        letter-spacing: 0.75vw;
        font-size: 4vw;
        color:#b65e2f;
        margin-top: 10%;
    }

@media screen and (min-width: 600px)
{
    section.Liquid-Sunshine
    {
        margin-top: 20%;
    }

}
/*LIQUID SUNSHINE DESKTOP*/
@media screen and (min-width: 900px)
{
    section.Liquid-Sunshine
    {
        margin-top: 10%;
    }
    .Liquid-Sunshine-Text
    {
  
        top:30%;
        left: 33%;
        flex-direction: row;
    }
    .Liquid-Sunshine-Left-Quote
    {
        font-size: 8vw;
  
    }
    .Liquid-Sunshine-Right-Quote
    {
        font-size: 8vw;
        padding-top: 0;
    }
    .Liquid-Sunshine-Text h1
    {
        font-size: 3vw;
        margin-top:10%;
    }
   
}

/*INTRODUCTION*/
.Intro
{
  padding-left: 15%;
  padding-right: 15%;
  padding: 10% 10% 10% 10%;
}

.Intro h2
{
   
  text-align: center;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.15vw;
line-height: 200%;
  font-size: 80%;
  color: #11143e;
}
@media screen and (min-width: 600px)
{
    .Intro h2 
    {
        font-size: 125%;
    }
}
/*MOBILE BREAKPOINT-INTRODUCTION*/
@media screen and (min-width: 900px)
{
    .Intro h2
    {
        font-size: 150%;
    }
}

/*TESTIMONIALS*/
section.Homepage_Testimonials
{
    background-color:  rgb(17, 20, 62);
    color: white;
}
    
/*Slideshow Container*/
.Homepage_Testimonials-Slideshow
{
  position:relative;
  width:100%;
  height: 150px;
  padding-top: 5%;
  padding-bottom: 5%;
}

/*Slides*/
.slide
{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
  display: none;
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s;
  display: block;
}

/*Quote Attribution Within Slides*/
.attributions
{
    position: relative;
    height:50px;
}
.quote-attribution
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 3%;

}
.author-name 
{
    font-weight: bold;
}
.quote-attribution p
{
    
    text-align: center;
    line-height: 120%;
    font-size: 60%;
    font-style: italic;
    font-family:"Lato", sans-serif;
    letter-spacing: 0.15vw;
    
}

/*Next & Previous Arrow Buttons*/
.previous, .next
{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  width: auto;
  font-weight: bold;
  font-size: 8vw;
  user-select: pointer;
  cursor: context-menu;
}
.previous
{
    margin-left: 15%;
}
.previous:hover, .next:hover
{
  color: black;
}

/*Next Button Position*/
.next
{
  position: absolute;
  right: 0;
  margin-right: 15%;
}

/*Dot Container*/
.dot-container
{
  cursor: context-menu;
  text-align: center;
  padding: 20px;
}

/*Dots*/
.dot
{
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/*Dot Hover*/
.active, .dot:hover
{
  background-color: #8486a8;
}

/*Add an italic font style to all quotes*/
.slide q
{
  display:block;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.15vw;
  font-weight: 500;
  font-size: 65%;
  line-height: 150%;
}

@media screen and (min-width: 600px)
{
    .Homepage_Testimonials-Slideshow
    {
        height: 250px;
    }
    .slide q
    {
        font-size: 110%;
    }
}
/*DESKTOP-Testimonials*/
@media screen and (min-width: 900px)
{
    .Homepage_Testimonials-Slideshow
    {
        height:300px;
    }
    .slide q
    {
        font-size: 150%;
        letter-spacing: 0.05vw;
    }
    .previous, .next
    {
        font-size: 5vw;
    }
    .attributions
    {
        height: 100px;
    }
    .quote-attribution p
    {
        font-size: 100%;
        letter-spacing: 0.05vw;
        line-height: 135%;
    }
}
.slide-transition
{
    animation:fading 6s infinite;
}
@keyframes fading
{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity:1}
    100%{opacity:0}
};

{}
/*DETAILS MOBILE*/
.Details
{
    margin-top: 10%;
}

.Details-Text
{

    color:#11143e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 5%;
}

.Made-With-Love-For-You-Mobile
{
    padding: 10% 0 5% 0;
   
}

.Made-With-Love-For-You-Mobile h2
{
    text-align:center;
    font-size: 200%;
    font-family: "Lato", sans-serif;
    font-weight: 1000;
    font-variant: small-caps;
    letter-spacing: 0.5vw;
    padding: 0 5% 0 5%;
    color: #11143e;
}
.Details-Text h2
{
   font-family: "Lato", sans-serif;
   text-align: center;
   font-variant: small-caps;
   padding-bottom: 5%;
}
.Details-Text p
{
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    letter-spacing: 0.15vw;
    line-height: 130%;
    font-size: 85%;
    text-align: center;
    padding-bottom: 5%;
}
.Product-Bottle
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.Product-Bottle img
{
    display: block;
    margin-right: auto;
    margin-left: auto;
    filter: contrast(130%);
    width: 50%;
    
    
}

@media screen and (min-width: 600px)
{
    .Made-With-Love-For-You-Mobile
    {
        padding-bottom: 5%;
    }
    .Made-With-Love-For-You-Mobile h2
    {
        font-size: 400%;   
    }
    .Details-Text h2
    {
        font-size: 200%;
    }
    .Details-Text p
    {
        font-size: 115%;
        padding:  0 0 4% 0;
    }
    .Product-Bottle img
    {
        width: 30%;
    }
}
/*DETAILS DESKTOP*/
@media screen and (min-width: 900px)
{
    section.Details
    {
        display: flex;
        flex-direction: row;
        justify-content:center;
        margin: 5% 10%;
    }
    .Made-With-Love-For-You-Mobile
    {
        display: none;
    }
    .Details-Text
    {
        padding: 0 0 0 2.5%;
        text-align: center;
    }
    .Details-Text h2
    {
    display:block;
    font-size: 200%;
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-variant: small-caps;
    letter-spacing: 0.25vw;
    padding-bottom: 5%;
    }
    .Details-Text p
    {
        font-size:95%;
        letter-spacing: 0.05vw;
        line-height: 150%;
    }
    .Product-Bottle
    {
        width: 50%;
    }
    .Product-Bottle img 
    {
        width: 75%;
    }
}
@media screen and (min-width: 1200px)
{
    .Details-Text p 
    {
        font-size: 100%;
    }
}


/*BURDOCK*/
/*Burdock Mobile*/
.Homepage_Burdock
{
    position: relative;
}

#Read-More a
{
    text-decoration: none;
    color: #11143e;
    font-weight: 900;
    font-variant: small-caps;
    font-size: 125%;
}
#Read-More a:hover
{
    color: white;
}
.Homepage_Burdock-Image-Tablet
{
    display:none;
}
.Homepage_Burdock-Image-Desktop
{
    display:none;
}
.Homepage_Burdock-Image-Mobile
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-x: hidden;
}
    .Homepage_Burdock-Image-Mobile img
    {
        width: 125%;    
    }
    .Homepage_Burdock-Header
    {
        padding-bottom: 7%;
    }
    .Homepage_Burdock-Header h2
    {
        text-align: center;
        font-family: "Lato", sans-serif;
        font-variant: small-caps;
        letter-spacing: 0.25vw;
        font-size: 150%;
        word-spacing: 0.5vw;
        font-weight: 700;
        color: white;
    }
    .Homepage_Burdock-Header a
    {
        text-decoration:none;
        color:white;
    }
    .Homepage_Burdock-Header a:active
    {
        color: white;
    }
    .Homepage_Burdock-Text 
    {
        position: absolute;
        width: 100%;
        padding: 7.5%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
    }
    .Homepage_Burdock-Text p
    {
        text-align: center;
        font-family: "Lato", sans-serif;
        font-size: 80%;
        letter-spacing: 0.15vw;
        line-height: 130%;
        font-weight: bold;
        color: white;
    }
@media screen and (min-width: 600px)
{
    .Homepage_Burdock-Image-Mobile
{
    display: none;
}
    .Homepage_Burdock-Image-Tablet
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    

}
.Homepage_Burdock-Image-Tablet img
{
    width: 100%;
}
.Homepage_Burdock-Text p
{
    font-size: 100%;
}
.Homepage_Burdock-Text h2
{
    font-size: 200%;
}
}
/*BURDOCK DESKTOP*/
@media screen and (min-width: 900px)
{

.Homepage_Burdock-Text
{
    font-size: 150%;
}
.Homepage_Burdock-Header h2
{
    
    word-spacing: 0.3vw;
    letter-spacing: 0.15vw; 
} 
.Homepage_Burdock-Header a:hover 
{
    color: white;
}
.Homepage_Burdock-Text p
{
    
    letter-spacing: 0.05vw;
}
}
@media screen and (min-width: 1200px)
{
    .Homepage_Burdock-Image-Tablet
    {
        display: none;
    }
    .Homepage_Burdock-Image-Desktop
    {
        display:flex;
        flex-direction:column;
        justify-content: center;
    }
    .Homepage_Burdock-Image-Desktop img 
    {
        width: 100%;
    }
}
/*NUTRITION FACTS MOBILE*/
section.Nutrition
{
   padding: 10%;
   position: relative;
   background-color: #11143e48;
}

.Nutrition-Label-Desktop
{
    display: none;
}
.Nutrition-Text
{
    text-align: center;
    color: white;
    padding-top: 7%;
}
.Nutrition-Text h2 
{
    font-size: 120%;
    line-height: 130%;
    font-family: "Lato", sans-serif;
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.25vw;
    
}
.Nutrition-Text p
{
    font-family: "Lato", sans-serif;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: 0.15vw;
    font-size: 80%;
}
.Nutrition-Label-Mobile img
{
    display:block;
    margin:auto;
    width: 100%;
    box-shadow: 5px 5px 5px;
}
@media screen and (min-width: 600px)
{
    
    #Nutrition-Color-Chunk
    {
        height: 70%;
        top: 70%;
    }
    .Nutrition-Text h2
    {
        font-size: 150%;
    }
    .Nutrition-Text p
    {
        font-size: 125%;
    }
}
/*NUTRITION FACTS DESKTOP*/
@media screen and (min-width: 900px)
{
    section.Nutrition
    {
        display:flex;
        flex-direction: row-reverse;
        justify-content: center;
        padding: 5%;
    }
    #Nutrition-Color-Chunk
    {
        height: 70%;
        top: 50%;
    }
    .Nutrition-Text
    {
        color:white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-left: 4.5%;
        padding-top: 0;
    }
   
    .Nutrition-Text h2
    {
        font-size: 175%;
        letter-spacing: 0.15vw;
        line-height: 150%;
    }
    .Nutrition-Text p
    {
        font-size: 100%;
    }
    .Nutrition-Label-Desktop
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 5%;
       
    }
    .Nutrition-Label-Desktop img
    {
        display: block;
        box-shadow: 5px 10px 10px;
        width: 200px;
        
    }
    .Nutrition-Label-Mobile img
    {
        display:none;
    }
    .Nutrition-Text p
    {
        line-height: 150%;
        letter-spacing: 0.05vw;
        font-size: 110%;
    }

}
@media screen and (min-width: 1800px)
{
    #Nutrition-Color-Chunk
    {
        height: 40%;
    }
}
/*FOOTER*/
footer
{
    background-color: #11143e;
    padding: 10%;
}
footer a
{
    text-decoration: none;
    color:#bf8a28;
}
footer a:hover
{
    color: white;
}
footer p
{
    text-align: center;
    font-family: "Lato", sans-serif;
    line-height: 130%;
    font-size: 80%;
    color: white;
}

.Footer_Logo
{
    margin: 5% auto;
    width: 15%;
}
.Footer_Links
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.Footer_Links a
{
    color: white;
    text-decoration: underline;
    font-size: 75%;
}
#footer_disclaimer 
{
    font-size: 75%;
}

@media screen and (min-width: 600px)
{
    footer p 
    {
        font-size: 100%;
    }
}
@media screen and (min-width: 900px)
{
    footer 
    {
        padding: 5%;
    }
    footer p 
    {
        font-size: 100%;
    }
    .Footer_Logo
    {
        width: 10%;
    }
    .Footer_Links
    {
        justify-content: center;
    }
    .Footer_Links p
    {
        margin: 0 5%;
    }
}
/*Testimonials Page*/
.Testimonial_Video
{
    position: absolute;
    width: 100vw;
    z-index: -1;
}
.Testimonial_Video video
{
    position: fixed;
    height: 100vh;
    object-fit: cover;
}

.Testimonials_Page-Title
{

    width: 100%;
    margin-right: auto;
    margin-left: auto;
    z-index: 20;
    padding-top: 50%;
    padding-bottom: 5%;
}
.Testimonials_Page-Title h2
{
    text-align: center;
    color: #122f5b;
    font-family: "Lato", sans-serif;
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.25vw;
}
.Testimonials_Heart-Icon
{
    margin-top: 2.5%;
    padding-top: 2.5%;
    padding-bottom:10%;
    margin-bottom: 10%;

}
.Testimonials_Heart-Icon img
{
    width: 12.5%;
    display: block;
    margin: auto;
}

.Testimonial_Slide-Card
{
    background-color: #122f5b7a;
    margin: 0 10% 10% 10%;
    padding: 5%;
}
.Testimonial_Slide-Card q
{
    line-height: 130%;
    font-family: "Lato", sans-serif;
    font-size: 5vw;
    color: white;
}
.Testimonial_Slide-Attribute p
{
    font-family: "Lato", sans-serif;
    font-size: 5vw;
    line-height: 130%;
    letter-spacing: 0.15vw;
    color: white;
}
@media screen and (min-width: 600px)
{
    .Testimonials_Page-Title
    {
        padding-top: 30%;
        font-size: 200%;
    }
    .Testimonials_Heart-Icon img
    {
        width: 7.5%;
    }
}
@media screen and (min-width: 900px)
{
    .Testimonial_Video video 
    {
        object-fit: cover;
        width: 100vw;  
    }
    .Testimonials_Page-Title
    {
        padding-top: 20%;
    }
    
    .Testimonials_Page-Title h2 
    {
        font-size: 4vw;
    }
    .Testimonials_Heart-Icon
    {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
    }
    .Testimonials_Heart-Icon img
    {
        width: 10%;
    }
    .Testimonial_Slide-Card q
    {
        font-size: 2vw;
        letter-spacing: 0.05vw;
    }
    .Testimonial_Slide-Attribute p 
    {
        font-size: 2vw;
        letter-spacing: 0.05vw;
    }
    
}
@media screen and (min-width: 1200px)
{
    .Testimonials_Page-Title
    {
        padding-top:18%;
        
    }
}

/***************ORDER PAGE******************/
.Order_Height
{
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.Order_Footer
{
    position: absolute;
    width: 100%;
    bottom: 0;
}
.Order_Text a 
{
    text-decoration: none;
    color: #11143e;
}
.Order_Text a:hover
{
    color: #b65e2f;
}
section.Order
{
   
   font-family: "Lato", sans-serif;
   text-align: center;
  
}

.Order_Product-Image
{
    width: 35%;
    margin: 0 auto;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
   
}
.Order_Product-Image img
{
    
    margin:  0 auto 0 auto;
    display: block;
    z-index: -1;
}
.Order_Text
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    color: #11143e;
    letter-spacing: 0.15vw;
    margin-bottom: 5%;
    padding: 0 5%;
  
}

/*@media screen and (min-width: 800px)
{
    .Order_Product-Image
    {
        width: 30%;
    }
}*/
/*@media screen and (min-width: 600px)
{
    section.Order 
    {
        
    }
    .Order_Product-Image
    {
        width: 25%;
    }
  .Order_Text
  {
      font-size: 150%;
  }
}*/

@media screen and (min-width: 900px)
{
    section.Order
    {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        
    }
    .Order_Text
    {
        margin-right: 15%;
        margin-top: 5%;
        margin-bottom: 5%;
        padding-top: 0;
        padding-bottom: 0;
    }
    .Order_Product-Image img
    {
        
        width: 100%;
        margin-bottom: 7.25%;
        margin-bottom: 7.25%;
    }
    .Order_Product-Image 
    {
        margin-left: 15%;
    }
   
}

/******************************************BURDOCK PAGE**********************************/
/*Burdock Doodle*/
.Burdock-Page-Title
{
    margin-top: 25%;
}
.Burdock-Page-Title-Words
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-family: "Lato", sans-serif;
    margin: 0 auto;
    font-size: 200%;
    font-weight: 900;
    color: rgba(118,49,4, 0.83);
}

.Burdock-Doodle
{
    width: 35%;
    margin: 5% auto 5% auto;
}
@media screen and (min-width: 600px)
{
    .Burdock-Page-Title-Words
    {
        font-size: 400%;
    }
    .Burdock-Doodle
    {
        width: 20%; 
    }
}
@media screen and (min-width: 900px)
{
    .Burdock-Page-Title
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 15%;
    }
    .Burdock-Page-Title-Words 
    {
        margin-right: 0;
        font-size: 700%;
    }
    .Burdock-Doodle
    {
        margin-left: 0;
        width: 15%;
    }
}
/*Gift From Nature Section*/
section.Burdock_What-Is-Burdock
{
    color: white;
    font-family: "Lato", sans-serif;
}

.Burdock-Image
{
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url("burdock-page_burdock-root-in-barrel-desktop.jpg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.Burdock_Text
{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.Burdock_Text-Header
{
    font-variant: small-caps;
    margin: 5% 0 0 0;
    letter-spacing: 0.15vw;
    text-align: center;
    
}

#Burdock_What-Is-Burdock-Text
{
    padding:  0 0 5% 0;
    background-color: rgba(118,49,4, 0.83);
}
#Burdock_Gift-From-Nature-Text
{
    padding:  0 0 5% 0;
    color: white;
}


.Burdock_Text-Body
{
    padding: 2.5% 5% 5% 5%;
    text-align: center;
}
.Burdock_Text p
{
    font-size: 80%;
    padding: 1% 0 1% 0;

}
section.Burdock_Gift-From-Nature
    {
        text-align: center;
        font-family: "Lato", sans-serif;
        background-color: #11143e;
        margin-top: 5%;
        color: white;
    }
#Burdock_Gift-From-Nature-Text
{
    background-color: #11143e;
}


/*Desktop*/
@media screen and (min-width: 900px){
    .Burdock-Image
    {
        min-height: 100%;
        width: 50%;
    }
    .Burdock_Text 
    {
        width: 50%;
    }
   section.Burdock_What-Is-Burdock
   {
       display: flex;
       flex-direction: row;
       justify-content: center;
   }
    
   #Burdock_What-Is-Burdock-Text
   {
       padding: 0;
       font-size: 125%;
   }
   #Burdock_What-Is-Burdock-Text h3
   {
       font-size: 175%;
   }
    #Burdock_Gift-From-Nature-Text
    {
        padding: 0;
        font-size: 115%;
    }

    /*Gift From Nature*/
    section.Burdock_Gift-From-Nature
    {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }
    
    
      
}


/*BENEFITS - Mobile*/
section.benefits
{
    display: flex;
    flex-direction: column;
    font-family: "Lato", sans-serif;
    background-color: rgba(17, 20, 62, 0.1);
    color: #11143e;
}
.benefits>div
{
    margin:0 auto;
    width: 80vw;
    padding: 5%;
    
}

.benefits-header-text
{
    display: flex;
    flex-direction: column;
    justify-content: center;
  height: 10vh;  
}

.benefits h2
{
    text-align: center;
    font-variant: small-caps;

}
.benefits p
{
    text-align: center;
}

.doodle
{
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*BENEFITS- Desktop*/
@media screen and (min-width: 900px)
{
    section.benefits
    {
        flex-direction: row;
        height: 150%;
        
    }
    .benefits>div
    {
        margin: 0 2.5% 2.5% 2.5%;
        padding: 2%;
    }
  
    .improves-digestion
    {
        margin-right: 2.5%
    }
    .clear-skin
    {
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .reduces-inflammation
    {
        margin-left: 2.5%;
    }
}

/*Modern Science Mobile*/
section.Modern-Science
{
    background-color: white;
}
.Modern-Science-Header
{
    text-align: center;
    font-family: "Lato", sans-serif;
    color: rgba(118,49,4, 0.83);
    padding: 10% 10% 0 10%;
}
.Modern-Science-Header h2
{
    font-variant: small-caps;
}
.Modern-Science-Header p
{
    
    
    font-size: 100%;
}

.results
{
    position:relative;
  width:100%;
  height: 30vh;
  font-size: 5vw;
}


/*Positions Text in the center of the slide.*/
.burdock-slide
{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width: 65vw;
display: none;
text-align: center;
opacity: 1;
transition: opacity 0.5s;
display: block;
}



/*Quote Attribution Within Slides*/
.references
{
    position: relative;
    height:25vh;
    
}

.citation
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 3%;
    width: 70vw;

}

.citation p
{
    
    text-align: center;
    line-height: 120%;
    font-size: 70%;
    font-style: italic;
    color: rgba(118,49,4, 0.83);
    font-family:"Lato", sans-serif;
    
}
.reference-text p
{
    font-size: 90%;
    margin-bottom: 1%;
}

/*Add an italic font style to all quotes*/
.burdock-slide p
{
  display:block;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.05vw;
  font-weight: 700;
  font-size: 90%;
  line-height: 150%;
  color: #11143e;
  
}
.burdock-dots
{
    background-color: white;
}
.burdock-dot
{
    background-color: rgba(118,49,4, 0.25);
}
.burdockactive, .burdock-dot:hover
{
    background-color: rgba(118,49,4, 0.83);
}

.references-title
{
    position: relative; 
}
.references-title h3
{
    text-align: center;
    color: rgba(118,49,4, 0.83);
    font-family: "Lato", sans-serif;
    font-size: 75%;
}
#burdock-previous{
    color: #11143e49;
    margin-left: 10%

}
#burdock-next{
    color: #11143e49;
    margin-right: 10%;
}

#burdock-next:hover, #burdock-previous:hover
{
    color: #11143e;
}
@media screen and (min-width: 600px)
{
    .Modern-Science-Header 
    {
        font-size: 130%;
    }
    .burdock-slide p
    {
        font-size: 50%;
    }
    .references
    {
        height: 15vh;
    }
    .results
    {
        height: 30vh;
    }
}
@media screen and (min-width: 900px)
{
   
    .Modern-Science-Header
    {
        padding: 5%;
    }
    .Modern-Science-Header h2
    {
        font-size: 200%;
    }

    .Modern-Science-Header p
    {
        line-height: 150%;
        font-size: 120%;
    }
    
    .burdock-slide p

    {
        font-size: 40%;

    }
    .results
    {
        height: 20vh;
    }
    .references
    {
        height: 15vh;
    }
    
    .references p
    {
        font-size: 75%;
    }
    .reference-text p
    {
        font-size: 90%;
        font-weight: 700;
        margin-bottom: 1%;
    }
    .previous, .next
    {
        font-size: 5vw;
    }
    .attributions
    {
        height: 100px;
    }
    .quote-attribution p
    {
        font-size: 100%;
        line-height: 135%;
    }
}
@media screen and (min-width: 1200px)
{
    .results
    {
        height: 30vh;
    }
}
.slide-transition-burdock
{animation:fading 12s infinite}
@keyframes fading{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}};

/***************Story*********************/
{}

section.Story
{
    margin-top: 25%;
    text-align: left;
    font-family: "Lato", sans-serif;
    padding: 0 10%;
    color: #11143ede;
    
}
.Story_Text img 
{
    margin-bottom: 5%;
}
.Story_Text span
{
    display: block;
}
.Story_Text-Body
{
    padding-bottom: 5%;
}
.Story_Text-Header
{
    padding-bottom: 5%;
    font-variant: small-caps;
    font-size: 150%;
    font-weight: 700;
}
.Story_Signature
{
    width: 50%;
}
#Story_Electronic-Signature
{
    padding-bottom: 0%;
}
.Story_Sign-Off
    {
        margin-bottom: 5%;
    }
@media screen and (min-width: 600px)
{
    .Story_Text img
    {
        width: 50%;
        float: right;
        margin-left: 5%;
        margin-bottom: 3%;
    }
    .Story_Text-Body
    {
        letter-spacing: 0.025vw;
    }
    .Story_Signature
    {
        width: 30%;
    }
    
}
@media screen and (min-width: 900px)
{
    section.Story 
    {
        margin-top: 15%;
    }
    .Story_Text img 
    {
        width: 40%;
    }
    .Story_Text-Body
    {
        padding-bottom: 1.5%;
    }
    .Story_Text-Header
    {
        font-size: 200%;
        padding-bottom: 2.5%;
    }
    .Story_Signature
    {
        width: 20%;
    }
    .Story_Signature
    {
        /*margin: 0 auto;*/
    }
}
/**************Terms And Conditions********************/
section.Legal-Informational-Text
{
    font-family: "Lato", sans-serif;
    margin: 25% 10% 10% 10%;    
    text-align: center;
    color:#11143e;
}
#privacy-policy
{
    margin: 0 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (min-width: 900px)
{
    section.Legal-Informational-Text
    {
        margin: 15% 10% 5% 10%;
    }
    #privacy-policy
    {
        margin: 15%;
    }
   
}