/* header */

       .myheader {
         background-color: #638539;
         box-shadow: 1px 1px 5px 0 rgba(0,0,0,.1);
         position: fixed;
         width: 100%;
         z-index: 3;
         height: 70px
       }

       .myheader.scrolled {
         background: #638539;
         box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
         position: fixed;
         width: 100%;
         z-index: 3;
       }

       .myheader ul {
         margin: 0;
         padding: 0;
         list-style: none;
         overflow: hidden;
       }

       .myheader li a {
         display: block;
         padding: 20px 20px;
         text-decoration: none;
         font-family: 'Montserrat', sans-serif;
         line-height: 22px;
         font-size: 16px;
       }



       .myheader .logo {
         display: block;
         float: left;
         font-size: 2em;
         padding: 10px 20px;
         text-decoration: none;
       }

       /* menu */

       .myheader .menu {
         background: #638539;
         padding-right: 20px;
         clear: both;
         max-height: 0;
         transition: max-height .2s ease-out;
   }

       /* menu icon */

       .myheader .menu-icon {
         cursor: pointer;
         display: inline-block;
         float: right;
         padding: 28px 20px;
         position: relative;
         user-select: none;
       }

       .myheader .menu-icon .navicon {
         background: white;
         display: block;
         height: 2px;
         position: relative;
         transition: background .2s ease-out;
         width: 18px;
       }

       .myheader .menu-icon .navicon:before,
       .myheader .menu-icon .navicon:after {
         background: white;
         content: '';
         display: block;
         height: 100%;
         position: absolute;
         transition: all .2s ease-out;
         width: 100%;
       }

       .myheader .menu-icon .navicon:before {
         top: 5px;
       }

       .myheader .menu-icon .navicon:after {
         top: -5px;
       }

       /* menu btn */

       .myheader .menu-btn {
         display: none;
         padding-right: 20px;
       }

       .myheader .menu-btn:checked ~ .menu {
         max-height: 380px;
         box-shadow: 0px 0px 5px 0 rgba(0,0,0,.2);

       }

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

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

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

       .myheader .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
       .myheader .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
         top: 0;
       }

       /* 48em = 768px */

       @media (min-width: 48em) {
         .myheader li {
           float: left;
         }
         .myheader li a {
           padding: 20px 30px;
         }
         .myheader .menu {
           clear: none;
           float: right;
           max-height: none;
         }
         .myheader .menu-icon {
           display: none;
         }
       }

       @media (max-width: 991px) {
         .myheader {
           background-color: #638539;
         }
         #user-img {
           display: none;
         }
       }