/* mr: using px in menus because ...https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
One example where we might want em based font sizing could be a drop down menu, where we have second level 
menu item text sized depending on the font size of the first level. Another example might be a font icon 
used inside a button, where the icon’s size should relate to the button’s text size. */

@font-face {
  font-family: 'titillium-bold-italic';
  src: url('titillium-bolditalic-webfont.woff2') format('woff2'), url('titillium-bolditalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'titilliumlight';
  src: url('titillium-light-webfont.woff2') format('woff2'), url('titillium-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
  
:root {
  --modal-duration: 1s;
  --modal-color: #428bca;
  --drop-down-width:225px;
  --nav-background-color: black;
  --hamburger-color:white;
}



/* begin simple nav */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  }

  .mr-topnav {
  overflow: hidden;
  background-color: #333;
  }

  .mr-topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  /* padding: 14px 16px; */
  text-decoration: none;
  font-size: 17px;


  padding: 0px 16px;
  line-height: 30px;
  }

  .mr-topnav a:hover {
  background-color: #f0554a;
  color: white;
  }

  .mr-topnav a.active {
  background-color: coral;
  color: white;
  }


/* end simple nav */

/* defaults for anchors and paragraphs */
/* a {
  color: rgb(128, 112, 112); 
} */

/* group selector: id^=drop means anything that starts with an id=drop */
.toggle, [id^=drop] {
  display:none; /*coment this to see the checkboxes */
}

/* the following is just a div */
.mm-logo {
  display: block; /* it is block by default, but we do it here to override it */
  padding: 0 5px;
  float: left; /* so it always stays to the left even when we make the screen small to the left */
  font-size: 20px;
  line-height: 60px; /* this is the height of the menu under the logo */
}

.heart-img {
  display:block;
  max-width: 20;
  display: block; /* it is block by default, but we do it here to override it */
  padding: 100 5px;
  float: left; /* so it always stays to the left even when we make the screen small to the left */
  /* font-size: 20px; */
  /* line-height: 60px; this is the height of the menu under the logo */
}

.mm-logo .mm-img-anchor {
  display: block;
  float: left;
  padding: 5px 0px 0px 0px;
  text-decoration: none;
}

/* default state: pc view */
.mm-logo .mm-img {
  max-width: 450px;
  margin-top: 5px;
  margin-bottom: 5px; 
}

.three-layer-menu{
  /* top margin makes is center against the main menu logo, don't touch*/
  margin: 15px 0px 0px 0px;
}

/* drop-down-menu icon */
#main-toggle {
  /* #means id visible-hamburger-btn is the span inside of the label (hamburger) */
  /* to debug /* /* outline:1px solid red; */
  cursor: pointer; /* instead of the arrow, we want the hand */
  float: right;   /* move the hamburger to the right, float doesnt work in css grid */
  padding: 35px 20px 30px 1px; /* mr leave this alone */
  position: block;
  user-select: none;
}
#main-toggle:hover {
  background-color: black;
}

/* three lines, the hamburger */
.nav-icon {
  /*nav-icon is a span default is black*/
  background: var(--hamburger-color);
  display: block;
  height:2px;
  width:18px;
  position:relative;
}

/* drawing the hamburger with css */
/*using pseudo elements to create the top and bottom buns of the hamburger */
/*pseudo elements only have a before and an after */
.nav-icon:before,
.nav-icon:after {
  background: var(--hamburger-color);
  content: ''; /* well add the bars programatically */
  display:block;
  height:100%; /* the same height as the original */
  width:100%;
  position:absolute;

}

/*the three lines*/
.nav-icon:before{
  /* by default navs are block, which means they stack up on one another */
  top:5px; /* moves it below the original */
}

.nav-icon:after{
  top:-5px; /* moves it above the original */
}

nav {
  background-color: var(--nav-background-color);
}

/*on desktop things layout horizontally, on mobile we stack vertically */
/*the following is a clearfix hack. rather than adding a clearfix to all these elements */
/* we add a self clearfixing hack directly to the nav */
nav:after{
  content:"";
  display:table;
  clear:both;
}

nav ul{
  z-index: 1;
  float:right;
  padding:0; /* so that the sub elements don't auto indent over */
  margin:0;
  list-style:none; /*get rid of the bullets */
  /*mr make it span the whole containig div */
  /* width: 100%; */
  /*mr, paint it coral */
  /* background-color: coral;  */
}

/* list items inside the unordered lists */
/* this one paints top, second and third tiers coral */
nav ul li{
  margin:0;
  /* redundant because of the float left below: display:inline-block; */
  float:left;
  background-color: coral; 
  /* in case you are wondering where ul li's are, use below */
  /* border:1px solid yellow; */
  /* width: 200px; */
  width: var(--drop-down-width);
}

/* all the anchors inside the navs */
/* remember that the main menu image is also a nav! */
nav a {
  /* setting anchors to display block allows you to click on the entire area instead of just the button text.*/
  display:block;  
  /* margin: 0 70px; */
  padding:0px 30px; /* MR: WE WANT PIXELS HERE */
  color: white; /* redundant, but if you have other navs on your page you want these to be white */
  font-size:20px;
  /* font-weight: 800; */
  line-height:60px; /* because of the main menu image */
  text-decoration:none; /* get rid of the underline */
  /* border: 1px solid white; */
  /* display: inline-block; */
  /* padding-right: 220px; */
}

nav a:hover{
  /* this is the image hover, don't touch it */
  text-decoration: none;
}

/* top anchor all the anchors inside the navs */
.atop {
  padding:0px 40px; /* MR: WE WANT PIXELS HERE */
}

.atop:hover {
  background-color: rgb(151, 109, 190);
  text-decoration: none;
}

/*mr added coz the label was inheriting margin bottom 5px from bootstrap.css */
nav label {
  margin-bottom: 0px;
}


/* cascade the targeting to the third tier list items last li's */
/* this is highlighting */
nav ul li ul li:hover{
  background-color: rgb(180, 73, 73);
  color: white;
}

/* when hovering over the sub menus */
nav ul li ul li a:hover{
  background-color: #d3753f;
  color: white;
}

/*now we hide the sub elements */
nav ul ul {
  display:none;
  position: absolute; /*because we are positioning their children */
  top:75px; /*when the submenus reappear we want them down below the main bar */
}


/* all the list items within a dropdown */
nav ul ul li {
  width:var(--drop-down-width);
  float:none;
  display:list-item;
  position:relative;
}

/*all the 3tier list items in pc view */
nav ul ul ul li {
  position: relative;
  top:-75px;
  left:var(--drop-down-width);
  /* outline:1px solid red; */
}

/* the ul that is a child of a list item that is hovered upon */
nav ul li:hover>ul {
  display: inherit;
}

/*li child a after */
/* programatically puts a + if the menu has a submenu*/
/*any menu items that have children get a + */
nav li>a:after{
  content: " +";
}

/*if its an only child, change pseudo selector to blank */
nav li>a:only-child:after{
  content:"";
}


/* ------------------------------------------------ */
/* 3 layer menu when my menu reaches the main menu  */ 
/* logo and displaces itself down (hack)            */
/* less than 1475                                   */
/* ------------------------------------------------ */
@media (max-width: 1475px) {
  /* body {display:none;} */

  :root {

    --drop-down-width:125px;

  }
  
  /*now we hide the sub elements */
  nav ul ul {
    display:none;
    position: absolute; /*because we are positioning their children */
    /* top:168px; */ /*when the submenus reappear we want them down below the main bar */
  }

  /*all the 3tier list items */
  nav ul ul ul li {
    position: relative;
    top:-75px;
    left:var(--drop-down-width);
    /* outline:1px solid red; */
  }

  nav ul li {
    width: var(--drop-down-width);
  }

  .atop {
    padding:0px 5px;
    width: var(--drop-down-width)
  }

  nav a {
    font-size: 15px;
    padding: 0px 0px 0px 5px;
  }

}

/* ------------------------------------------------ */
/* ---------- pc  MEDIA less than 991 ------------- */
/* ------------------------------------------------ */
@media (max-width: 991px){
  /* body {display:none;}  */

  /* shrink the damn logo so your menu doesnt float down! */
  .mm-logo .mm-img {
    max-width: 230px;
  }
}

/* ------------------------------------------------ */
/* ------- tablet  MEDIA when less than 767 ------- */
/* ------------------------------------------------ */
@media (max-width: 767px) {
  /* less than */
  /* body {display:none;}  */

    /* shrink the damn logo so your menu doesnt float down! */
    .mm-logo .mm-img {
      /* z-index:  -1; */
      max-width: 0px;
    }

}


/* ------------------------------------------------ */
/* --------- mobile MEDIA when less than 575 ------ */
/* ------------------------------------------------ */
@media (max-width: 575px) {
  /* less than */
  /* to debug */  /* body {display:none;} */
 
  .three-layer-menu{
    /* top margin makes is center against the main menu logo */
    margin: 0px;
  }

  .mm-logo .mm-img-anchor {
    padding: 0px;
  }
  .mm-logo .mm-img {
    max-width: 225px;
    margin: 5px 1px 5px 1px;
  }

  nav{
    margin:0;
  }

  nav ul {
    float:none;
  }

  .toggle+a,
  .three-layer-menu{
    display:none;
  }

  .toggle{
    display:block;
    background-color: black;
    padding: 0 20px;
    color: #fff;
    font-size:20px;
    line-height: 60px;
    text-decoration:none;
    border:none;
    /* width: 100%; */
    /* float:right; */
  }

  .toggle:hover{
    background-color: rgb(129, 93, 129);
    /* background-color: black; */
  }
  
  /*all the ids that begin with drop in their checked state look for their sibbling ul and set it to display block */
  /* remember that right now this guy is set to display none */
  [id^=drop]:checked+ul{
    display:block;
  }

  nav ul li {
    display:block;
    width:100%;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }
  
  /*third tier indentation */
  nav ul ul ul a{
    padding: 0 80px;
    background-color: rgb(55, 54, 61);
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: rgb(98, 80, 139);
  }

  nav ul ul {
    float:none;
    position:static;
    color:white;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul{
    display:none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li{
    position:static;
  }

  /*now we hide the sub elements */
  nav ul ul {
    top:60; /*when the submenus reappear we want them down below the main bar */
  }  
  /*all the 3tier list items */
  nav ul ul ul li {
    top:-60;
  }
    

  /* begin easy menu */
  .mr-topnav a {
    width: 50%;
  }

  /* end easy menu */
}