/*  
PET SHOP CSS v1.2
Eric Girouard
*/



/* ============= START COLOR PALETTE ============= */

:root {
    --body-bg-color: #fff;
    --main-bg-color: #fff;
    --header-bg-color: #1d3a41; 
    --footer-bg-color: #1d3a41; 
    --aside-bg-color: #1d2541;
    --bodytext-color: #444;
    --titles-color: #eb4e65;
    --subtitles-color: #138ca8;
    --sub-subtitles-color: #000000;
    --primary-nav-bg-color: #1d3a41;
    --footer-nav-bg-color: #1d3a41;
    --products-theme-bg-color: #ffffff;
    --services-theme-bg-color: #ffffff;
    --highlight: #ff5e00;
    --dark-border: #444;
    --pale-border: #d3d3d3;
  
    /* LoVeHA Rule 1: main */
    --main-text-link-color: #444;
    --main-text-visited-color: #aaa;
    --main-text-hover-color: #fc0093;
    --main-text-active-color: #ff0000;
  
    /* LoVeHA Rule 2: top nav */
    --primary-nav-link-color: #fff;
    --primary-nav-visited-color: #aaa;
    --primary-nav-hover-color: #fc0093;
    --primary-nav-active-color: #ff0000;
  
    /* LoVeHA Rule 3: footer nav */
    --footer-nav-link-color: #fff;
    --footer-nav-visited-color: rgb(216, 216, 216);
    --footer-nav-hover-color: #fc8f00;
    --footer-nav-active-color: #ff0000;
  
  } /* ============= END COLOR PALETTE ============= */
  
  
  
  
  html {font-size: 100%;}
  
  /* ========= START TYPE THEORY ========= 
  
  Default font size in web design is 16px.
  An "em" is the height of a lowercase letter M in the chosen font.
  
  1em = 16px
  But EMs change with context (ex: h1 vs p = not same lowercase m height)
  
  1rem ("root em") = Always refers to lowercase m of default/root element. Never changes. More predictable for designers. Also makes spacing more consistent across the entire site.
  
  html {font-size: 100%;}
  Forces HTML tag to use default. Avoids possible variations between browsers.
  
  =========  END TYPE THEORY =========  */
  
  
  
  
  
  
  
  /* ==================== START TYPOGRAPHIC SCALE 
  
  See: https://spencermortensen.com/articles/typographic-scale/
  
  ==================== */
  
  h1 {
    font-size: 2.25rem;  /* 2.25 times bigger than default 1rem (p) */
  }
  
  h2 {
    font-size: 1.9656rem;
  }
  
  h3,
  legend {  /* also define the height of legend here */
    font-size: 1.7171rem;
  }
  
  h4 {
    font-size: 1.5rem;
  }
  
  h5,
  label { /* also define the height of label here */
    font-size: 1.3104rem;
  }
  
  h6 {
    font-size: 1.1447rem;
  }
  
  p {
    font-size: 1rem;
  }
  
  small {
    font-size: .8736rem;  /* Also useful for aside or footer */
  }
  
  /* ==================== END TYPOGRAPHIC SCALE ==================== */
  
  
  
  
  
  
  /* ==================== START BASIC TYPOGRAPHY ==================== */
  
  
  h1,h2,h3,h4,h5,h6,label,legend {
    font-weight: bold;
    font-family: 'Bebas Neue','Helvetica Neue', Helvetica, Arial, sans-serif;
    }
  
    h1 span {  /* If you want a "second part" in the H1, put it in a <span> tag */
      display: block;
      font-size: 75%;
      position: relative;
      top: -0.8rem; /* Adjust spacing below main part of H1 */
    }  
  
    h1,h2 {
      color: var(--titles-color);
    }
  
    h3 {
      color: var(--subtitles-color);
  
  
      border-bottom: 1px solid var(--subtitles-color); /* Fancy, not required */
      padding-bottom: 0.125em;
    }
  
    h4,h5,h6 {
      color: var(--sub-subtitles-color);  /* Helps complex pages like shipping be more easily understood */
    }
  
  body {
    font-family: Montserrat, 'Gill Sans', Verdana, Tahoma, sans-serif;
    line-height: 1.4; /* leading */
  }
  
  
  /* ==================== END BASIC TYPOGRAPHY ==================== */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ====================== START HEADER / LOGO =================== */
  
  header {
      margin-bottom: 5em;
      display: flex;  /* Lets logo and slogan go side-by-side */
      justify-content: start; /* Align at left of box */
      align-items: center; /* Vertically centered */
    background-color: var(--header-bg-color);
  }
  
  p.slogan a:link {
    color: white;
    font-family: 'Bebas Neue','Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
  }
  
  p.slogan a:visited {
    color: white;  /* Never want the slogan to change appearance */
  }
  
  p.slogan a:hover {
    color: white; /* Never want the slogan to change appearance */
  }
  
  p.slogan a:active {
    color: white; /* Never want the slogan to change appearance */
  }
  
  
  
  p.slogan span {
      display: block;  /* Send the span to a second line */
      font-size: 3.65rem;
      font-weight: bold;
      font-family: 'Bebas Neue','Helvetica Neue', Helvetica, Arial, sans-serif;
      position: relative; /* Tweak its position starting from where it normally is */
      top: 0.6rem;
      margin-bottom: -0.5rem;
      color: #e45c0c;
  }
  
  #logo {
      height: 4rem;
      width: auto;
      margin: 1rem;
      filter: invert(100%);  /* If logo is SVG, can be controlled with CSS */
  }
  
  /* ====================== END HEADER / LOGO =================== */
  
  
  
  
  
  
  
  
  
  
  
  
  /* ====================== START BACKGROUND/FOREGROUND COLORS =================== */
  
  
  nav.primary-nav {
    background-color: var(--primary-nav-bg-color);
    color: var(--primary-nav-link-color);
    }
    
  main {
    background-color: var(--main-bg-color);
    color: var(--bodytext-color);
    }
  
  body.products {
    background-color: var(--products-theme-bg-color);
  }  
  
  body.services {
    background-color: var(--services-theme-bg-color);
  } 
  
  aside {
    background-color: var(--aside-bg-color);
  }
  
  footer {
    background-color: var(--footer-bg-color);
    color: var(--primary-nav-link-color)
    }
  
    /* ====================== END BACKGROUND/FOREGROUND COLORS =================== */
  
  
  
  
  
  
  
  
  
  /* =======================  START DEFAULT SPACING ======================= */
  
  header, nav {
    margin-bottom: 0;
  }
  
  main {
    margin: 3rem 0 4rem 0; /* Lots of space above/below the main */
  }
  /* CSS shorthand: clockwise starting at noon */
  
  footer {
    margin-top: 5rem;  /* Lots of space above the footer */
  }
  
  p, li {
    max-width: 65ch;  /* Limit text width to an ideal measure */
  }
  
  main img {
      margin: 0 0 1rem 0; /* always have a space below an image */
  }
  
  /* =======================  END DEFAULT SPACING ======================= */
  
  
  
  
  
  
  
  
  /* ============= TYPOGRAPHIC SPACING ============== */
  
  /* 
     Typography: titles always have more space **above** than below.
     This keeps the title close its content, further away from other content.
  
     Using EMs keeps spacing proportional to the size of the H tag in use. 
     Compare with using REMs. Use whichever you prefer. I recommend REMs. 
  */
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 3rem 0 1rem 0; /* More space above than below. Adjust to taste. */
  }
  
  
  p {
    margin: 0 0 1rem 0; /* one line of default space after */
  }
  
  
  body {
    line-height: 1.4; /* Adjust between 1 and 2 */
  }
  
  
  main {
    padding: 0 1rem; /* 1rem of whitespace on left/right on mobile. */
  }
  
  h1 {
    margin-left: 1rem; /* h1 is outside the main, so inset by 1rem on mobile. Won't touch edge of screen. */
  }
  
  
  
  /* ============= END TYPOGRAPHIC SPACING ============== */
  
  
  
  
  
  
  /* ============ START TABLE ============== */
  
  table {width: 100%;}
  
  th {font-weight: bold; text-align: left;}
  
  td {
      border: 1px solid #dfdfdf;
      padding: 0.25rem;
  }
  
  /* ============ END TABLE ============== */
  
  
  
  
  /* ======================== START SIDEBAR ========================== */
  
  aside {
    padding: 1rem; 
    background-color: var(--body-bg-color);
  }
  
  aside figure {
      /* width: 100%; */
    width: calc(100% - 2rem); 
      margin: 1rem auto 4rem auto;
      background-color: var(--body-bg-color);
      padding: 0 0 0.1rem 0;
  }
  
  aside figure figcaption {
    color: #444;
    margin: 2rem 1rem 2rem 1rem;
  }
  
  aside h3 {
      margin: 0 0 0 1rem;
      color: #fff;
  }
  
  .brand {
    font-size: 1.1em; 
    font-weight: bold;
  }
  
  .salePrice {
    font-size: 1.1em;
    color: var(--highlight);
    font-weight: bold;
  }
  
  aside figure img {
    display: block;
    margin: 0 auto;
  }
  
  /* ======================== END SIDEBAR ========================== */
  
  
  
  
  
  /* ============ START WRAPPER IMAGES ============== */
  
  
  
  .wrapper {  /* more general rule applies to all .wrapper divs */
    margin-bottom: 5em;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 70vw;
    background-color: var(--body-bg-color);
    position: relative;
   }
  
  body.home .wrapper { /* one line more specific rule to customize each page */
   background-image: url(../img/andrew-s-ouo1hbizWwo-unsplash.jpg);
  }
  
  body.credits .wrapper {
    background-image: url(../img/stacey-koenitz-bduka9UJzrk-unsplash.jpg);
  }
  
  body.products .wrapper {
    background-image: url(../img/dollar-gill-PymJFLYZdeg-unsplash.jpg);
  }
  
  
  body.cat-products .wrapper {
    background-image: url(../img/anton-kraev-TuU5tODcrzU-unsplash.jpg);
  }
  
  body.dog-products .wrapper {
    background-image: url(../img/victor-grabarczyk-N04FIfHhv_k-unsplash.jpg);
  }
  
  body.bird-products .wrapper {
    background-image: url(../img/david-clode-0lwa8Dprrzs-unsplash.jpg);
  }
  
  body.reptile-products .wrapper {
    background-image: url(../img/ekamelev-RTDMLoPUyVI-unsplash.jpg);
  }
  
  body.fish-products .wrapper {
    background-image: url(../img/claudio-guglieri-K2RH1QZdLF4-unsplash.jpg);
  }
  
  
  body.services .wrapper {
    background-image: url(../img/karsten-winegeart-loJL4ijUobg-unsplash.jpg);
  }
  
  body.frozen-raw-food-services .wrapper {
    background-image: url(../img/usman-yousaf-eOktYr3tAMo-unsplash.jpg);
  }
  
  
  body.store-pickup-services .wrapper {
    background-image: url(../img/mick-haupt-Hwkl6xh-6Ag-unsplash.jpg);
    background-position: 0 -48px;
  }
  
  body.dog-wash-services .wrapper {
    background-image: url(../img/ottr-dan-AA-qAyHj9m0-unsplash.jpg);
  }
  
  body.pet-adoption-services .wrapper {
    background-image: url(../img/wade-austin-ellis-FtuJIuBbUhI-unsplash.jpg);
    background-position-y: -33px;
  }
  
  body.faq .wrapper {
    background-image: url(../img/camylla-battani-AoqgGAqrLpU-unsplash.jpg);
  }
  
  body.gift-cards .wrapper {
    background-image: url(../img/ekaterina-shevchenko-ZLTlHeKbh04-unsplash.jpg);
  }
  
  body.about .wrapper {
    background-image: url(../img/mike-petrucci-c9FQyqIECds-unsplash.jpg);
  }
  
  body.careers .wrapper {
    background-image: url(../img/petrebels-kuzJU_dlBls-unsplash.jpg);
  }
  
  body.privacy .wrapper {
    background-image: url(../img/towfiqu-barbhuiya-FnA5pAzqhMM-unsplash.jpg);
  }
  
  body.grooming-services .wrapper {
    background-image: url(../img/boney-dHIRbh9En6I-unsplash.jpg);
  }
  
  body.shipping .wrapper {
    background-image: url(../img/victoria-kubiaki-t0Aio60jD4Q-unsplash.jpg);
  }
  
  body.contact .wrapper {
    background-image: url(../img/firmbee-com-SpVHcbuKi6E-unsplash.jpg);
  }
  
  
  /* ============ END WRAPPER IMAGES ============== */
  
  
  
  
  
  
  
  /* ===================  START TOP NAV CODE ======================= */
  
  ul#menu {
    display: none; /* Hide menu by default when page loads on mobile */
  }
  
  .primary-nav .align-right {  /* Specific to hamburger menu */
    position: absolute;
    right: 1rem;
    top: 1rem;
}

  nav.primary-nav {
    background: linear-gradient(0deg, #1d3a41, #265259); /* Not Flat Color, flat is boring when used all the time */
  }
  
  nav.primary-nav button { /* Add the clickable "hamburger icon" to show the menu */
      height: 32px;
      width: 32px;
      display: block;
      border: none;
      background-image: url(../img/hamburger.svg);
      background-size: contain;
      background-color: transparent;
  
      cursor: pointer; /* UX: Cursor changes to pointing hand, therefore something must happen if the cursor changes. Does not apply to mobile as there is no mouse, so no "click". */
  
      padding: 0;
      filter: invert(100%);  /* Switch SVG from black to white */
  }
  
  
  ul#menu.show-nav { /* .show-nav class that javascript adds to force the menu to display when hamburger tapped  */
      
    display: block !important; /* Avoid using !important unless absolutely necessary, here menu MUST appear */
      
    width: 80%; /* Adjust to taste */
      
    margin: 0 auto; /* Show menu immediately under the header, no space, but centered */
  
    padding: 2rem 0; /* Add space at top and bottom of menu box */
    
  }
  
  
  ul#menu.show-nav li { /* Stacked links on mobile menu */
  
      margin: 0 auto 1rem auto;  /* Spaced apart for easy finger tapping */
  
      border: 1px solid var(--pale-border);
      padding: 0.5rem 0 0.5rem 1rem;
    
  }
  
  ul#menu.show-nav li:not(.submenu-parent) { /* Adds background color to nav buttons, but does :NOT surround the submenu parent box */
    background-color: rgba(255,255,255,0.1);
  }
  
  
  nav.primary-nav a {  /* Force anchor tag to fill "button" area, so you can tap beside the text and link still works */
    
    display: block;  /* If block, you can now set height and width */
  
    width: 100%;
    height: 100%;
    text-decoration: none;
    padding: 0 0.95rem;
  }
  
  
   /* ==== START LoVeHA for Top Nav ==== */
  
  nav.primary-nav a:link {
    color: var(--primary-nav-link-color);
  }
  
  nav.primary-nav a:visited {
    color: var(--primary-nav-visited-color);
  }
  
  nav.primary-nav a:hover {
    color: var(--primary-nav-hover-color);
    text-decoration: none;
  }
  
  nav.primary-nav a:active {
    color: var(--primary-nav-active-color);
  }
   /* ==== END  LoVeHA for Top Nav ==== */
  
  
  ul#menu.show-nav li.submenu-parent {border: none;}
  
  
  
  ul#menu.show-nav li.submenu-parent a:first-child:not(.submenu a) { /* Control submenu parent only */
      font-weight: bold;
      margin: 0 0 0.5rem 0;
      display: inline-block;
      position: relative;
      left: -1rem;
  } 
  
  
  .align-right {  /* General rule for all align right uses */
    display: flex;
    flex-direction: row;
    justify-content: end;
  }
  /* Aligns the hamburger to the right */
  
  

  
  
  
  /* ===================  END TOP NAV CODE ======================= */
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ===============  START FORM CODE ================= */
  
  input, label {display: block;}
  
  input {
    margin: 0 0 2rem 0;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    padding-left: 1rem;
    border: 1px solid var(--dark-border);
  }
  
  fieldset {
      padding: 1rem;
      border: 1px solid var(--pale-border);
      margin: 3rem 0 3rem 0;
  }
  
  legend {
    background-color: var(--main-bg-color);
    padding: 0 2rem;
    }
  
  textarea {
    margin: 0 0 2rem 0;
    width: 100%;
    min-height: 20rem;
    line-height: 2rem;
    padding: 1rem;
    border: 1px solid var(--dark-border);
  }
  
  input[type=submit], input[type=reset] {
    padding: 0 2rem;
    border-radius: 0.4rem;
    color: white;
    height: 3rem;
    line-height: 1.9rem;
    border: 2px solid #fff;
    font-weight: bold;
    font-size: 1rem;
    width: fit-content;
  }
  
  input[type=file] {border: none; margin-top: 0.5rem;}
  
  #submit {background-color: #5151aa;}
  
  #reset {
    background-color: #bdbdbd;
    margin-right: 1rem;
  }
  
  #submit:hover {
    background-color: #6465be;
    cursor: pointer;
  }
  
  #reset:hover {
    background-color: #d2c2e1;
    cursor: pointer;
  }
  
  #submit:active {
    background-color: magenta;
    cursor: pointer;
  }
  
  input::file-selector-button {
    background-color: var(--main-bg-color);
    border: 1px solid var(--dark-border);
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    }
  
  #submit:active, #reset:active {background-color: var(--highlight)}
  
  body.contact iframe {
      width: 100%;
      height: 26rem;
      margin: 0 0 3rem 0;
    border: 1px solid var(--dark-border);
  }

  section {
    background-color: #eaeaea;
    margin: 0 0 3rem 0;
    padding: 2rem;
    background-image: url(../img/yoann-siloine-dyaxQ-aoGWY-unsplash.jpg);
    background-size: 51%;
    background-position: 100% 63%;
    background-repeat: no-repeat;
    border: 1px solid #a0a0a0;
}
  
  /* ===============  END FORM CODE ================= */
  
  
  
  
  
  
  
  
  /* ================== START IMG NAV ======================= */
  
  .imgNav {
    width: 100%;
  }
  
  .imgNav li {
    height: 300px;
    max-width: unset;  /* The max-width for li is for limiting the width of text, like the paragraphs. See line 293. */
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .imgNav li a {
      display: flex;  /* No longer an inline element */
  
      height: 100%; /* Take up all the space within the li */
      width: 100%; /* Take up all the space within the li */
  
      text-align: center;  /* will have no effect if the browser supports flexbox, used here as a backup just in case */
  
      font-size: 2rem;
      color: white;
      background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
      text-decoration: none; /* No underline on the link text */
      font-weight: bold;
      justify-content: center;  /* horizontally center when using flexbox */
      align-items: center;  /* vertically center */
  }
  
  
  /* ==== START ADD BACKGROUND IMAGES ====== */
  
  /* PRODUCTS */
  
  .imgNav li.bird {
    background-image: url(../img/david-clode-0lwa8Dprrzs-unsplash.jpg);
  }
  
  .imgNav li.dog {
    background-image: url(../img/victor-grabarczyk-N04FIfHhv_k-unsplash.jpg);
  }
  
  .imgNav li.cat {
    background-image: url(../img/anton-kraev-TuU5tODcrzU-unsplash.jpg);
  }
  
  .imgNav li.reptile {
    background-image: url(../img/ekamelev-RTDMLoPUyVI-unsplash.jpg);
  }
  
  .imgNav li.fish {
    background-image: url(../img/claudio-guglieri-K2RH1QZdLF4-unsplash.jpg);
  }
  
  /* SERVICES */
  
  .imgNav li.grooming {
    background-image: url(../img/boney-dHIRbh9En6I-unsplash.jpg);
  }
  .imgNav li.raw {
    background-image: url(../img/usman-yousaf-eOktYr3tAMo-unsplash.jpg);
  }
  .imgNav li.adoption {
    background-image: url(../img/wade-austin-ellis-FtuJIuBbUhI-unsplash.jpg);
  }
  .imgNav li.wash {
    background-image: url(../img/ottr-dan-AA-qAyHj9m0-unsplash.jpg);
  }
  .imgNav li.pickup {
    background-image: url(../img/mick-haupt-Hwkl6xh-6Ag-unsplash.jpg);
  }
  
  /* ==== END ADD BACKGROUND IMAGES ====== */
  
  /* ================== END IMG NAV ======================= */
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* =====================  FOOTER CODE ======================== */
  
  footer {
    font-size: .8736rem;
    color: var(--footer-nav-link-color);
    padding: 1rem;
  }
  
  footer nav ul {
      margin: 3rem 1rem 3rem 2rem;
  }
  
  footer nav ul li:first-child {
      font-weight: bold;
      margin: 0 0 0.5rem 0;
      text-decoration: none;
      color: var(--highlight);
      border-bottom: 2px solid var(--highlight);
      padding-bottom: 0.26rem;
  }
  
  footer nav ul li a:link {
    color: var(--footer-nav-link-color);
    text-decoration: none;
  }
  
  footer nav ul li a:visited {
    color: var(--footer-nav-visited-color);
  }
  
  footer nav ul li a:hover {
    color: var(--footer-nav-hover-color);
    text-decoration: underline;
  }
  
  footer nav ul li a:active {
    color: var(--footer-nav-active-color);
  }
  
  /* =====================  END FOOTER CODE ======================== */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ========== ********* BEGIN MEDIA QUERY FOR 1025px OR WIDER SCREENS ************  ============== */
  
  
  @media screen and (min-width: 1025px) {
  
  
  
    /* ==== START BASIC RESPONSIVENESS ==== */
  
      .wrapper {
        margin: 0 auto 3rem auto; /* 3em can be any value; auto L/R margins do the actual centering */
       
        display: flex;  /* puts main and aside side-by-side */
        width: 60rem; /* 960px */
       
        padding-top: 42rem; /* Change value inherited from mobile because 70vw is way too big on desktop */
                            /* Make bigger if some of your .wrapper bg images overlap main and/or aside */
      }
  
      h1 {
        width: 60rem;  /* Make H1 behave exactly like the .wrapper, aligns left perfectly */
        margin: 0 auto;
      }
  
      
  
      main {
        margin: 0;
        width: 70%; /* Use 70% of space within .wrapper = column 1 */
        padding: 0;
      }
  
      aside {
        width: 30%; /* Use 70% of space within .wrapper = column 2 */
        
        margin: 2.4rem 0 0 3rem;
        background-color: var(--body-bg-color);
        border-left: 1px solid #138ca830;
        position: relative;
        padding-top: 2rem;
        font-size: 70%; /* Make aside look less important than main */
      }
  
  
  
  /* ======= START DESKTOP FOOTER ============= */
  
      footer nav { /* SEBRINA's footer selector: footer .flex-container {}   */
  
        display: flex; /* Make footer content go side by side */
  
        flex-direction: row;
        justify-content: space-evenly;
      }
  
      footer nav ul { /* Give each column (ul or div) inside the footer a width */
                      /* Sebrina: footer .flex-container div {} */
  
        width: calc(100% / 9);  /* Try changing the number 9 to something else */
                                /* 7 columns of content in footer + 1 empty column at either end = 9 */
  
        margin: 0; /* Remove any extra white space we don't see or want */
        padding: 0; /* Remove any extra white space we don't see or want */
      }
  
  /* ======= END DESKTOP FOOTER ============= */
  
  
  
  
  
  /* ============ START GRIDBOX FOR PRODUCT SHOTS =================== */
  
      .grid-box {
        display: grid; /* Displays product photos in a grid pattern */
  
        grid-template-columns: 1fr 1fr 1fr; /* Add or remove "1fr" to add or remove columns in the grid */
        grid-gap: 2rem; /* Spacing in between rows and columns, adjust to taste */
      }
  
  
  /* ============ END GRIDBOX FOR PRODUCT SHOTS =================== */
  
  
  
    /* ==== END  BASIC RESPONSIVENESS ==== */
  
  
  
  
    body.home { /* Add big background image only on desktop */
      background-image: url(../img/deborah-varrie-8DUfyKKAXlA-unsplash.jpg);  
      background-size: cover;
    }
    
    body.home .wrapper {
      padding-left: 2rem; /* Add a bit of extra white space not needed on mobile */
  
      box-shadow: 0px 15px 27px #444; /* Drop shadow on the home page adds depth over the background image */
    }
  
  
  
  
  
  
  /* ============ START SIDEBAR ON DESKTOP ================= */
  
    aside h3 {
      color: var(--subtitles-color);
  
      border: unset; /* You can use "unset" to turn off a rule inherited from mobile */
  
      /* == Getting really fancy here, code below is not required == */
      position: absolute;
      z-index: 10;
      background-color: var(--body-bg-color);
      top: 0;
      left: -2rem;
      padding-left: 2.6rem;
    }
  
    aside section {
      display: block;
    }
  
    aside section figure {
      margin: 1rem;
      border: 1px solid #eee;
      box-shadow: 3px 6px 12px #ccc;  /* Drop shadow */
    }
  
  /* ============ END SIDEBAR ON DESKTOP ================= */
    
  
  
  
  
  
  
  
  
  
    .imgNav {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin: 3rem auto 6rem auto;
    }
    
    .imgNav li {
      width: 50%;
      height: 300px;
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    .imgNav li:last-child {
        display: block;
        margin: 0 auto;
        width: 100% !important;
        max-width: unset;
        height: 600px;
      }
    
    
    .imgNav li a {display: none}  /* HIDE THE LINK TEXT UNTIL ROLLOVER */
    
    .imgNav li:hover a {  /* DISPLAY LINK TEXT ON ROLLOVER */
      
      display: flex; /* Overrides display: none */
  
      height: 100%;
      width: 100%;
      text-align: center;
      font-size: 2rem;
      color: white;
      background-color: rgba(0,0,0,0.5);
      text-decoration: none;
      font-weight: bold;
    }
  
  
  
  /* ======= TWEAK BACKGROUND IMAGE PLACEMENT ON DESKTOP ====== */
  
    .imgNav li.bird {
      background-position-x: -31px;
    }
    
    .imgNav li.dog {
      background-position-x: -111px;
    }
    
    .imgNav li.cat {
      background-position-x: -51px;
    }
  
    .imgNav li.fish {
      background-position-x: -81px;
    }
    
    
    
  } /* ========== ********* END MEDIA QUERY FOR 1025px OR WIDER SCREENS *********  ============== */
  





  
  @media screen and (min-width: 1185px) {
    
    /* ============ START DESKTOP NAVIGATION ================= */
    
      /* ======== START PAGE CLEAN UP FOR DESKTOP ======== */
  
        nav.primary-nav button {display: none} /* Hide hamburger icon */
  
        .primary-nav .align-right {
          display: none;  /* Hide the hamburger div on desktop to prevent it interfering with other elements on the page */ 
        }
        
  
    /* ======== START PAGE CLEAN UP FOR DESKTOP ======== */
  
    ul#menu {
        display: flex; /* Make menu display side-by-side */
  
        justify-content: space-between;
        margin: 0 auto;
        max-width: 67.5625rem; /* 1081px Adjust to minimum width where menu displays on one line only */
      }
  
    .submenu {display: none;}  /* By default, hide the drop down menu */
  
  
    .submenu-parent {position: relative;}  /* Forces absolutely positioned child element (.submenu, below) to be positioned  relative to the top/left corner of this element (because it has some sort of positioning rule) */
  
  
  
    .submenu-parent:hover .submenu {  /* The drop down submenu */
  
      display: block; /* Display the menu on hover */
  
      position: absolute; /* Place it on a layer */
  
      z-index: 200; /* Make sure the layer is on top of everything else */
  
      top: 1.5rem;
      left: -0.05rem; /* Set the position of the .submenu relative to the top/left corner of the **first parent element that has a positioning rule**, in this case: .submenu-parent */
  
      background-color: rgba(41, 80, 90, 1);
      border: 1px solid var(--pale-border);
  
      width: 11rem; /* Make wide enough to keep links from wrapping onto two lines */
  
      padding: 1rem; /* Inset links within the submenu */
    }
  
  
    nav.primary-nav { /* Outer box that holds the menu */
  
      background: linear-gradient(0deg, #1d3a41, #27616e); /* Not Flat Color, flat is boring when used all the time */
  
      color: var(--primary-nav-link-color); /* Text Color */
  
      height: 3rem; /* Only give heights to elements that you fully control, otherwise use min-height instead */
  
      padding-top: 0.7rem;
      margin: 0 auto 3rem auto;
      width: 1200px;  /* Must be wider than the #menu */
      border-radius: 0 0 0.8rem 0.8rem;
    }
  
    ul#menu > li {
      padding: 0;
      border: 1px solid rgba(126, 133, 139, 0.35);
      margin: 0 0.25rem;
      background-color: rgba(255,255,255,0.05);
      /* border: 1px solid var(--pale-border); */
    }
  
    ul#menu > li:link {
      border: 1px solid var(--pale-border);
    }
  
    ul#menu > li:visited {
      border: 1px solid var(--primary-nav-visited-color);  /* Slight UX feedback: border changes when link visited */
    }
  
    ul#menu > li:hover {
      border: 1px solid var(--primary-nav-hover-color);  /* Slight UX feedback: border highlights on rollover */
    }
  
    ul#menu > li:active {
      border: 1px solid var(--primary-nav-active-color);  /* Slight UX feedback: border highlights on click down */
    }
  
  
  
  
  /* ============ END DESKTOP NAVIGATION ================= */

  
  } /* ============ END 1185px media query ================= */
  
  
  /*
         OLD SCHOOL IMAGE REPLACEMENT TECHNIQUE
         .HIDE-TEXT FOR IMAGE REPLACEMENTS
         SEE: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
  
       Hide text on screen, but leave the actual word on the page for screen reader software to read out loud to blind users.
  */
  
    .hide-text { /* Hides the word "menu" so we only see hamburger SVG.  */
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      padding: 0;
      }
  
  
  
      .currentpage {
        color: var(--highlight) !important; 
      }
  
  /* 
     CURRENT PAGE UX
  
     Highlights current location in menu for better UX.  
     Must add class="currentpage" to every link (anchor tag) for this to be useful.
  
     Ex: On home change <li><a href="index.html">home</a></li> to <li><a href="index.html" class="currentpage">home</a></li>
  
     Repeat for every page.
  */