:root {
    box-sizing: border-box;
  
    --primary: #05a1d1;
    --hover-color: #fdd052;
    --dark: #041a99;
    --light: #fff;  
    --header-bg: var(--primary);
  }
  *,
  *::after,
  *::before {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: "josefin sans", "helvetica", sans-serif;
    font-size: 1rem;
  }
  
  header {
    background: var(--header-bg);
    padding-left: 1.5em;
    position: sticky;
    top: 0;
    z-index: 9999 !important;
  }
  .branding-logo {
    color: var(--light);
    font-size: calc(0.5rem + 1vw);
    text-decoration: none;
  }
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
  }
  .menu {
    display: flex;
    flex-direction: row;
  }
  .menu li {
    list-style: none;
  }
  .menu li a {
    display: block;
    text-decoration: none;
    color: var(--light);
    padding: 1em 1.5em;
    font-size: 1rem;
  }
  
  /* Styling submenu */
  .has-dropdown {
    position: relative;
  }
  .submenu {
    position: absolute;
    left: 0;
    background-color: var(--dark);
    white-space: nowrap;
    padding: 1.5em 0;
    min-width: 16em;
  
    /* hide submenus */
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .submenu > li > a {
    padding: 0.8em 1.5em;
  }
  .submenu .submenu {
    left: -100%;
    top: 0;
  }
  .submenu .submenu .submenu {
    left: -100%;
    top: 0;
  }
  
  .menu > li:hover > a,
  .submenu > li:hover > a {
    background-color: hsla(0, 0%, 100%, 0.05);
    color: var(--hover-color);
  }
  .menu > li:hover > a {
    background-color: hsla(244, 97%, 14%, 0.95);
  }
  
  /* Arrows */
  
  .arrow {
    width: 0.5em;
    height: 0.5em;
    display: inline-block;
    vertical-align: middle;
    border-left: 0.15em solid currentColor;
    border-bottom: 0.15em solid currentColor;
    transform: rotate(-45deg);
    margin-top: -0.25em;
    transition: transform 100ms ease-in-out;
  }
  
  /* Reveal  */
  .menu > li:hover > a + .submenu,
  .submenu > li:hover > a + .submenu {
    opacity: 1;
    transform: scaleY(1);
  }
  
  /* ANIMATE aRROWS */
  .menu > li:hover > a > .arrow,
  .submenu > li:hover > a > .arrow {
    transform: rotate(225deg);
  }
  @media only screen and (max-width: 98.75em) {
	.branding img{
        width: 5%;
    }
    .submenu .submenu .submenu {
      left: -100%;
      top: 0.5em;
    }
    .submenu {
      min-width: 6em;
    }    
  }
  
  @media only screen and (max-width: 78.75em) {
	.branding img{
        width: 5%;
    }
    .submenu .submenu .submenu {
      left: -100%;
      top: 0.5em;
    }
    .submenu {
      min-width: 16em;
    }    
  }
  @media only screen and (max-width: 58.75em) {
    .branding img{
        width: 5%;
    }
    .menu li a {
      font-size: 1rem;
    }
  }
  
  @media only screen and (max-width: 50em) {
    header {
  /*     position: relative; */
      padding: 1.5em 2em;
    }
    .branding img{
        width: 5%;
    }    
    .menu {
      flex-flow: column;
      position: absolute;
      background: var(--light);
      top: 4.55em;
      left: 0;
      right: 0;
      height: 100vh;
  
      opacity: 0;
      transform: scaleY(0);
      transform-origin: top center;
      transition: 200ms transform cubic-bezier(0.36, 0.4, 0.42, 1.48) 100ms,
        100ms opacity ease-in-out;
      
      overflow-y: scroll;
      
    }
    .menu > li > a {
      font-size: 1rem;
      color: var(--dark);
    }
    .submenu > li > a {
      font-size: 1rem;
    }
  
    .submenu {
      top: 0;
      padding-left: 1.5em;
      border-left: 0.12em dotted hsla(0, 0%, 100%, 0.95);
    }
    .submenu .submenu {
      left: 0;
      top: 0;
    }
    .submenu .submenu .submenu {
      left: 0;
      top: 0;
    }
  
    .menu > li:hover > a + .submenu,
    .submenu > li:hover > a + .submenu {
      position: relative;
    }
  
    .hamburger {
      width: 2em;
      height: 0.25em;
      display: block;
      background: var(--light);
      position: relative;
      cursor: pointer;
      transition: 0.2s transform ease-in-out;
    }
    .hamburger::after,
    .hamburger::before {
      content: "";
      position: absolute;
      left: 0;
      background: inherit;
      width: inherit;
      height: inherit;
  
      transition: 0.2s transform ease-in-out;
    }
  
    .hamburger::after {
      top: 0.65em;
    }
    .hamburger::before {
      bottom: 0.65em;
    }
  
    .close::after,
    .close::before {
      top: 0;
      transition: 0.2s transform ease-in-out;
    }
    .close::before {
      display: none;
    }
    .close {
      transform: rotate(45deg);
      transition: 0.2s transform ease-in-out;
    }
    .close::after {
      transform: rotate(-90deg);
    }
  
    /* reveal menu */
    input[type="checkbox"]:checked + .menu {
      position: absolute;
      opacity: 1;
      transform: scaleY(1);
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  main {
  /* just to make scrollable vertically to see sticky navbar    */
    /*height: 200vh;*/
  }