/*
COLOUR PALETTE
https://coolors.co/fdfbdc-efe479-6aac5b-c00000-000000
#FDFBDC Light Yellow Blend
#EFE479 Dark Yellow Blend
#6AAC5B Menu and Heading Green
#C00000 Earth Brown Sub-headings and tagline
#848484 Grey Footer
#000000 Black
*/

/* Global Styles
-----------------------------------*/
html {
    background-color: #fefbd8; /* Default colour for browsers that do not support gradients */
    background-image: linear-gradient(#fefbd8, #fbef6a);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 100%;
}

body {
    padding: 0;
    margin: 25px 0px 0px 0px; /*Distance to top of viewport*/
    font-family: "Verdana", "Arial", sans-serif;
    font-size: 1em;
    color: #000000;
    text-align: center; /* Makes all content center */
}

main {
    margin-top: 20px; /* Gap between main page sections */
    margin-bottom: 20px; /* Gap between main page sections */
/*    background-color: white;*/
/*    border: 1px solid rgba(0,0,0,0.1);  */  
}

.element-spacing {
    margin-top: 0px; /* Gap between main page sections */
    margin-bottom: 20px; /* Gap between main page sections */
}

.layout-container {
    max-width: 880px; /* Master control for size of header-width */  
    padding: 20px 20px 10px; /* Top Padding / Left&Right Padding */
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
        border-top: 3px dotted #C00000;
/*    border: 1px solid #000;*/
/*    background-color: aqua;*/
}

/* Header & Navigation Bar
-----------------------------------*/

/* Logo & Navigation bar container */
header { 
    max-width: 920px; /* Master control for size of gallery */  
    padding: 0px 0px; /* Header Top Padding / Left&Right Padding */
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
/*    border: 1px solid rgba(0,0,0,0.1);*/
    background-color: none;
    overflow: hidden; 
}

.header-nav {
  width: 100%;    
}

.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: none;
/*    border: 1px solid rgba(0,0,0,0.1);*/
}

.header-nav li a {
  font-family: "Verdana", "arial", sans-serif; /* Master font type of menu items */
  font-weight: 600;
  font-size: 25px; /* Master text size of menu items */
  color: #000; /* Master text color of menu items */
  padding: 15px 10px; /* Padding for mobile menu items */
  display: block;
  text-decoration: none;
}

.menu .active-nav {
    background-color: none;
    color: #6AAC5B; /* Text color for current selected page */
    border-radius: 7px;
}

.menu a:hover {
  background-color: #6AAC5B; /* Menu item hover controls */
  color: white;
  border-radius: 7px;
}

.logo {
  display: inline-block; /* Logo styling controls */
  float: left;
  margin-left: 20px;
}

/* Menu */
.header-nav .menu {
  clear: both; /* Aligns menu in centre of container */
  max-height: 0; /* Display Menu closed on large screens */
  transition: max-height 0.2s ease-out; /* Controls menu opening animation */
}

/* Menu Icon */
.header-nav .menu-icon {
  cursor: pointer; /* Burger Button styling controls */
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header-nav .menu-icon .navicon {
  background: #333; /* X Button styling controls */
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header-nav .menu-icon .navicon:before,
.header-nav .menu-icon .navicon:after {
  background: #333; /* Burger Button styling controls */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header-nav .menu-icon .navicon:before {
  top: 5px; /* Burger Button styling controls */
}

.header-nav .menu-icon .navicon:after {
  top: -5px; /* Burger Button styling controls */
}

/* menu btn */
.header-nav .menu-btn {
  display: none;
}

.header-nav .menu-btn:checked ~ .menu {
  max-height: 300px; /* Total height of mobile drop-down menu (59x5=295) */
}

.header-nav .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header-nav .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header-nav .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header-nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header-nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0; /* Button angle */
}

.motto-container {
    color: #C00000;
    display: block;
    font-style: italic;
    margin: 00px 50px;
/*    background-color: aqua;*/  
}

/* Responsive Media Queries: Header & Nav Bar
-----------------------------------*/

/* Applies when the viewport is larger than: */
@media only screen and (min-width: 920px) and (min-device-width: 920px) {
  
  .logo {
    margin-left: 0px; /* Stick logo to left side of container */      
  }
    
  .header-nav ul {
    margin-top: 5px;
    }  
    
  .header-nav li {
    float: left; /* Sits menu items side by side on wide screen */
  }
  .header-nav li a {
    padding: 10px 10px; /* Controls padding menu items on wide screen */
    margin-left: 10px;
  }
  .header-nav .menu {
    clear: none; /* Pins menu to top on wide screen */
    float: right; /* Pins menu to the right side on wide screen */
    max-height: none; /* Controls height of buttons on wide screen */
  }
  .header-nav .menu-icon {
    display: none; /* Hides button on wide screen */
  }
    
  .motto-container {
    float: right;
    margin: 00px 10px;
  }    
} /* Very Important this closing bracket for responsive rules */

/* Applies when the viewport is larger than: */
@media only screen and (min-width: 1727px) {
    
    .home-text-block {
    width: 1220px;
    display: block;

    }

.home-motto-text {
       font-size: 3.3vw; /* Motto text scale value % of viewport */
    }
    
#big-motto-1, #big-motto-2 {
/*        color: red;*/
    font-size: 58px;
    }
} /* Very Important this closing bracket for responsive rules */

/* Footer
-----------------------------------*/
footer {
    background-color: none;
    font-size: 1em;
    color: #848484;
 /*   border: 1px solid rgba(0,0,0,0.1);*/
    overflow: hidden;
}

/* Content Page Title
-----------------------------------*/
h1 {
    background-color: none;
    font-size: 2.5em;
    color: #6AAC5B;
    padding: 0px 0px;
    margin: 0px 0px;
}

h2 {
    background-color: none;
    font-size: 1.5em;
    color: #C00000;
    padding: 0px 0px;
    margin-top: 15px;
    margin-bottom: 0px;
}


/* Content Text
-----------------------------------*/
.content-text {
    max-width: 880px; /* Master control for size of header-width */  
    padding: 10px 20px; /* Top Padding / Left&Right Padding */
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
/*    border: 1px solid #000;*/
/*    background-color: aqua;*/
    line-height: 1.5;
}

/* Homepage
-----------------------------------*/

.homeimage-container {
    max-width: 1300px; /* Master control for size of gallery */  
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
    position: relative; /* Keeps buttons attached to image sides */
    border: 1px solid #000;
}

.home-image-file {
    width: 100%; /* Makes the img fill the entire div container */  
    height: auto; /* Keeps the height of the image in proportion to width */
    display: block;
}

.home-text-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.7); /* 4th Value controls black bg opacity */
    color: white;
    text-shadow: 1px 1px rgba(0,0,0,0.7); /* 4th Value controls shadow opacity */
    padding-left: 40px;
    padding-right: 40px;
}

.home-motto-text {
       font-size: 3.3vw; /* Motto text scale value % of viewport */
}

/* About Us Page Content
-----------------------------------*/
.aboutus-container {
    max-width: 920px; /* Master control for size of header-width */  
    padding: 0px 0px; /* Top Padding / Left&Right Padding */
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
/*    border: 1px solid #000;*/
 /*   background-color: aqua;*/
}

figure {
   max-width: 560px; /* Master control for size of gallery */  
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
/*    background-color: aqua;*/
}

.top-figure {
    margin-top: 00px;
    margin-bottom: 40px;
    display: inline-block;
    
    border-bottom: 3px dotted #C00000;
/*    background-color: aqua;*/
}

.bottom-figure {
    margin-top: 00px;
    margin-bottom: 0px;
/*    background-color: aqua;*/
    display: inline-block;
    border-bottom: 3px dotted #C00000;
}

.top-caption {
    padding: 15px 10px 20px 10px;
    line-height: 1.5;
}

.bottom-caption {
    padding: 15px 10px 00px 10px;
    line-height: 1.5;
}

.video-link {
    color: #848484;
}

.aboutus-video {
    width: 100%;
    border: 1px solid #000;
}

.aboutus-image {
    width: 100%;
    height: auto;
    border: 1px solid #000;
}

/* Menu Content
-----------------------------------*/
.menu-container {
    max-width: 920px; /* Master control for size of header-width */  
    padding: 00px 00px; /* Top Padding / Left&Right Padding */
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
/*    border: 1px solid #000;*/
/*    background-color: aqua;*/
}

.menu-item-container {
    width: 350px;
    min-height: 150px;
    margin: 10px 27px;
    padding: 0px;
/*    border: 1px solid #000;*/
/*    background-color: aqua;*/
    display: inline-block;
    overflow: hidden;
    text-align: left;
    border-bottom: 3px dotted #C00000;
}

.menu-title {
    float: left;
    display: block;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 1.5;
/*    background-color: yellow;*/
}

.menu-price {
    float: right;
    display: block;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 1.5;
/*    background-color: yellow;*/
}

.menu-text {
    clear: both;
    font-size: 18px;
    line-height: 2;
}

/* Gallery Content
-----------------------------------*/
.gallery-container {
    max-width: 920px; /* Master control for size of gallery */  
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
    position: relative; /* Keeps buttons attached to image sides */
    border: 1px solid #000;
}

.mySlides {
    width: 100%; /* Makes the img fill the entire div container */  
    height: auto; /* Keeps the height of the image in proportion to width */
}

.firstSlide {
    display: block; /* Only first slide is intially visible */
}

.otherSlides {
    display: none; /* Remaining slides visible on click */
}

.gallery-button {
    border: none;
    font-size: 1.5em;
    display: inline-block;
    padding: 8px 16px; /* Top of button & Sides of button */
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
}

.button-color {
    color: #000;
    background-color: #fff;
}

.button-display-left {
    position: absolute;
    top: 45%;
    left: 0%;
    transform: (0%,-50%);
}

.button-display-right {
    position: absolute;
    top: 45%;
    right: 0%;
    transform: (0%,-50%);
}

/* Contact Page Content
-----------------------------------*/
.address-container {
    max-width: 880px; /* Master control for size of header-width */  
    padding: 10px 20px; /* Top Padding / Left&Right Padding */
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
/*    border: 1px solid #000;*/
/*    background-color: aqua;*/
}

.contact-info {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 2;
    font-style: italic;
    font-weight: 700;
}

.contact-info a:link {
    color: #000;
}

.contact-info a:visited {
    color: #000;
}

.contact-info a:hover {
    color: #6AAC5B;
}

.map-container {
    max-width: 920px; /* Master control for size of map */  
    margin-left: auto; /* Keeps container centered on page */
    margin-right: auto; /* Keeps container centered on page */
    border: 1px solid #000;
}

#googlemap {
    background-color: none;
    width: 100%;
    Height: 400px;
    display: block;
}