* {box-sizing: border-box;}

body {
  color: dimgrey;
  font-size: 100%;
}

/* styling menus and links */
a {
   text-decoration: none;
}

a:link {
   color: darksalmon;
   font-weight: bold;
}

a:visited {
   color: sienna;
   font-weight: bold;
}

a:active {
   color: #2c3947;
}

a:hover {
	text-decoration: underline;
}

/* styling images */
img {
	border-style: none;	
	max-width: 100%;
	height: auto;
}

figcaption {
  text-align: center;
}

figure.float_left {
	position: relative;
	float:left;
	max-width: 50%;  /* takes up half the space, but shouldn't this be variable depending upon the image? FIXME so max is 50% but it can be smaller? */
	margin: 0;
	margin-right: 1em; 
  margin-bottom: 1em;	
}

figure.float_left_small {
	position: relative;
	float:left;
	max-width: 25%;  /* takes up quarter of the space */
	margin: 0;
	margin-right: 1em; 
  margin-bottom: 1em;	
}


figure.float_right {
	position: relative;
	float:right;
	max-width: 50%;
	margin: 0;	
	margin-left:1em;
}


/* grid stuff, all grid dependent */
.wrapper {
  max-width: 100%;
  margin: 0 auto;
}

.wrapper > * {
  background-color: blanchedalmond; /* #ede0cd; */
  padding: 10px;
}
    
.main-head {
  grid-area: header;
  background-color: white;
  border-radius: 16px 16px 0px 0px;
  padding: 0px;
}

.main-head img {
  border-radius: 14px 14px 0px 0px;
}

.content {
  grid-area: content;  
  background-color: white;
  text-align: justify;
}

.content h1 {  
	font-size: 1.5em;  /* only a bit bigger than the normal text, so it fits nicely */
	background-color: blanchedalmond; /* #ede0cd; */
	color: #2c3947;
	width: 100%;
	margin-top: 0em;
  margin-bottom: 0em; 
	text-align: center;
  font-style: oblique;
}

.main-head h1 {    /* this is for the heading/title of each page, I've moved it to under the heading banner image */
	font-size: 2em;  
	background-color: blanchedalmond; /* #ede0cd; */
	color: #2c3947;
	width: 100%;
	margin-top: 0em;
	margin-bottom: 0em; 
	text-align: center;
  font-style: oblique;
}

.main-nav {
  grid-area: nav;
}


/* here we style the nav, for the hamburger dealie for the small screen FIXME needs the usual color changes */
nav ul {  /* this styles both the actual menu and the hamburger (which gets more styling below) which is a ul too! */
  display: none; 
  list-style-type: none; 
  margin: 0;
  padding: 0;
  text-align: left;
  z-index: 100;
}

 /* .nav_ul is needed to separate the menu ul from the hamburger ul */ 
.nav_ul > :first-child { /* this works to make .nav_ul have a top padding so it doesn't hit the hamburger, remember to turn it off below! */
  padding-top: 0.5em; 
}


  .nav_ul li {
    display: block;
    padding-right: 1.5em;
    text-align: left;
    font-size: 1.0em;
  }
  
  .nav_ul li ul .currentpage a { /* second level dropdown menu entry/link styling for the current page */
    color:  indianred;  
  }
  
.nav_ul li a {  /* no decoration and color is different from regular links and stays the same (on the menu) whether link is visited or not */
  text-decoration: none; 
  color: darkslategray;
}  

.nav_ul li:hover {  /* transition on hover */
  transition: all 0.5s ease 0s;  
  background-color: oldlace; /* background color for hovering*/
}

.nav_ul li img {
  max-height: 1em;  /* keep the icons at the right size... they are SMALL but cute! */
  max-width: 1em;
  display: inline-block;
}

/* Second menu layer */
.nav_ul ul {  /* should display vertically and be hidden until hovered over */
  display:none; /* none so that sub menus are hidden by default */
  position:relative; 
  text-align: left;
  left: 1em;
}

.nav_ul ul li {  /* second layer menu item element */
 font-size: 0.7em; 
  margin:0; /* Reset the margin from the top menu */
  clear:left;
  width:100%;
  background-color: blanchedalmond; /* background color for submenu, it's the same as the main menu */
}

/* make the second level visible when hover on first level list OR link */
.nav_ul li:hover ul { 
  display:block; 
  z-index:101; 
}


/* end old stuff */
/* for hamburger menu dropdown etc, we'll see if it works */
input[type=checkbox] {
  position: absolute;  /* these three move the checkbox off the screen so it's invisible but still working with the hamburger */ 
  top: -9999px; 
  left: -9999px; 
  background:none;
}

label {
  float:right; 
  padding:8px 0px; 
 /* display:inline-block; not needed, I don't think, not sure it's working with grid*/
  cursor:pointer; 
}

input[type=checkbox]:checked ~ .nav_ul { /* .nav_ul is literally nav ul */
  display:block;
}

/* these makes the hamburger icon! */
.toggle-menu ul {
  display:table; 
  width:25px;
  margin-right: 5px; /* move it over from the right hand a tad, and FIXME get rid of these px when I can! */
}
.toggle-menu ul li { 
  width:100%; 
  height:3px; 
  background-color: dimgrey; /* this is what makes the hamburger show up, can change the color as desired */  
  margin-bottom:4px;
}
.toggle-menu ul li:last-child {
  margin-bottom:0px;
}

.side {
  grid-area: sidebar;
}

.hours {
  grid-area: hours;
}

.main-footer {
  background-color: white;
  border-radius: 0px 0px 16px 16px;
  grid-area: footer;
}

.silder_flex {
  display: flex;
  flex-direction: column;
}

.goat_sales {
  max-width: 100%;
}

/* slider stuff, starting with the smaller viewport */
/* for the slider idea from https://webdesign.tutsplus.com/tutorials/how-to-create-an-anything-slider-with-just-css--cms-24278 watch the video! */
.slider_wrapper {
  max-width: 75rem;
  width: 100%;
  margin: 0 auto;
}

/* FIXME this is set up for the goat slider pics... might make a few of these sliders with different widths, have to add more */
.slider_wrapper_dia { 
  max-width: 98%; 
  margin: 0 auto;
  position: relative;
  float: right;
}

.slider_wrapper_dia img {
  max-height: 180px;
}

.slider {
  background: #fff;
  position: relative;
  margin: 2rem 0;
  overflow: hidden;
  padding-bottom: 2.5rem;
  border: 0.25rem solid grey;
}
.slider::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  content: '';
  display: block;
  background: lightgrey;
  height: 3rem;
}
.slide-switch {
  display: none;
}
.slide-label {
  position: absolute;
  bottom: 1rem;
  display: block;
  z-index: 5;
  height: 1rem;
  width: 1rem;
  text-indent: 1rem;
  overflow: hidden;
  background: black;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s;
}
/* to add more slides/plans whatever, add more of this */
.slide-label:nth-of-type(1) {
  left: 1rem;
}
.slide-label:nth-of-type(2) {
  left: 2.5rem;
}
.slide-label:nth-of-type(3) {
  left: 4rem;
}
.slide-label:nth-of-type(4) {
  left: 5.5rem;
}
.slide-label:nth-of-type(5) {
  left: 7rem;
}
.slide-label:nth-of-type(6) {
  left: 8.5rem;
}
.slide-label:nth-of-type(7) {
  left: 10rem;
}
.slide-label:nth-of-type(8) {
  left: 11.5rem;
}
.slide-label:nth-of-type(9) {
  left: 13rem;
}
.slide-label:nth-of-type(10) {
  left: 14.5rem;
}

.padded {
  padding: 1rem 2rem;
}

.slide-content {
  width: 100%;
  background: #fff;
  float: left;
  margin-right: -100%;
}

.slide-switch:checked + .slide-label {
  background: sienna;
}
.slide-switch:not(:checked) + .slide-label + .slide-content {
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.slide-switch:checked + .slide-label + .slide-content {
  animation: slide 1s;
}

@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
/* end of slider stuff */


.wrapper {   
  border: 2px solid sienna; 
     -webkit-border-radius: 16px;
     -opera-border-radius: 16px;
     -khtml-border-radius: 16px;
  border-radius: 16px; 
  background-color: white;
  display: grid;
  gap: 0.5em;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "hours"
    "footer";
}

@media (min-width:641px) {
  
 /* remove hamburger menu */
  input[type=checkbox], label {
    display:none;
  }  
 
 /* change to display flex if box is checked, this basically makes the vertical menu for the small displays move into the horizontal
 flex menu for larger displays */
  input[type=checkbox]:checked ~ .nav_ul {  /* .nav_ul is literally nav ul, this means just the menu not the hamburger menu too */
    display:flex; 
    flex-direction: row;
  }   
 
  .nav_ul > :first-child { /* turning off the styling for the .nav_ul */
   padding-top: 0em; 
  } 
  
  nav ul {     
    display: flex; /* this and the flex-direction below have to be repeated, in case the hamburger menu button isn't on, or is on, depending... */
    flex-direction: row; 
    text-align: center; 
  /*  align-items: center; */ /* this works in making everything center well BUT, but it makes the sub menus move up the main 
    menu item, which I really don't want... so keep working on it */
    font-size: 1.25em;
    height: 1.5em;
  }
  
  nav ul li {
    flex: 1;  /* makes it so the menu is fixed width for the elements, so it doesn't move all the time */
  }
  
  .nav_ul ul li {  /* second layer menu item element, add padding */
  padding: 0.25em; /* padding for the sub-menu items */
}
  
  .content h1 {  
	font-size: 2.0em;   
  }
  
 /* .wrapper {
      max-width: 85%;
    grid-template-columns: 9fr 3fr;
    grid-template-areas: 
      "header header"
      "nav nav"
      "content sidebar"
      "content hours"
      "footer footer"
  } */
}

@media (min-width: 800px) {
   
  .slider_flex {
    display: flex;
    flex-direction: row;
  }

  .goat_sales {
    max-width: 48%; /* so it fits in a row format */
  }
  
  .slider_wrapper_dia { 
  max-width: 48%; /* so it fits in a row format */
}   

  .content h1 {  /* bigger if a wider page */
	font-size: 2.5em;   
  }
 
  .main-head h1 { /* bigger if a wider page */
  font-size: 3em; 
  } 
  
  .wrapper {
      max-width: 85%;
    grid-template-columns: 9fr 3fr;
    grid-template-areas: 
      "header header"
      "nav nav"
      "content sidebar"
      "content hours"
      "footer footer"
  } 
}