/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# variable
# body
# hamburger section
# main menu body
# have submenu
# mobile responsive
 */
body {
  font-family: 'Roboto', sans-serif;
  background: #fdfdfd;
  position: relative;
  margin: 0; }

.humburger {
  width: 33px;
  height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 40px;
  top: 30px;
  cursor: pointer;
  transition: 0.5s all ease-in;
  z-index: 5555; }
  .humburger:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #EC1C24;
    transform: scale(0);
    transition: 0.5s all ease-in;
    z-index: 1; }
  .humburger .line {
    height: 4px;
    width: 100%;
    background: #1f6b0c;
    display: flex;
    transition: 0.5s all ease-in;
    position: relative;
    z-index: 2; }
    .humburger .line:after {
      content: "";
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      bottom: 0;
      background: white;
      width: 0;
      transition: 0.5s all ease-in-out;
      z-index: 1; }
  .humburger:hover:after {
    transform: scale(1.4); }
  .humburger:hover .line:after {
    width: 100%; }
  .humburger.open .line {
    background: white; }
    .humburger.open .line:nth-of-type(1) {
      transform: rotate(45deg);
      margin-top: 12px; }
    .humburger.open .line:nth-of-type(2) {
      transform: rotate(-45deg);
      margin-top: -13px; }
    .humburger.open .line:nth-of-type(3) {
      visibility: hidden;
      opacity: 0; }

.menu_body {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 350px;
  height: 100vh;
  display: flex;
  background: rgba(0, 0, 0, 0.8);
  transform: translateX(100%);
  transition: 0.5s all ease; }
  .menu_body.open {
    transform: translateX(0); }
  .menu_body__item_wrapper {
    padding: 40px 40px 40px 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%; }
    .menu_body__item_wrapper .menu_list {
      list-style: none;
      width: 100%;
      padding: 0 0 0 0; }
      .menu_body__item_wrapper .menu_list li {
        margin-bottom: 30px;
        position: relative;
        padding-left: 55px; }
        .menu_body__item_wrapper .menu_list li:last-child {
          margin-bottom: 0; }
        .menu_body__item_wrapper .menu_list li a {
          color: white;
          font-weight: 400;
          font-size: 18px;
          text-decoration: none;
          position: relative;
          transition: 0.5s all ease; }
          .menu_body__item_wrapper .menu_list li a:after {
            content: "";
            position: absolute;
            height: 1px;
            left: 0;
            width: 0;
            bottom: 0;
            background: #EC1C24;
            transition: 0.5s all ease; }
          .menu_body__item_wrapper .menu_list li a:hover:after {
            width: 100%; }
        .menu_body__item_wrapper .menu_list li.has_child .sub-menu {
          position: absolute;
          background: black;
          list-style: none;
          padding: 30px;
          left: unset;
          top: 0;
          right: 100%;
          min-width: 135px;
          opacity: 0;
          visibility: hidden; }
          .menu_body__item_wrapper .menu_list li.has_child .sub-menu li {
            padding-left: 0;
            margin-bottom: 15px; }
            .menu_body__item_wrapper .menu_list li.has_child .sub-menu li a:after {
              display: none; }
        .menu_body__item_wrapper .menu_list li.has_child:hover .sub-menu {
          opacity: 1;
          visibility: visible; }

@media (max-width: 992px) {
  body .menu_body {
    width: 100%; }
    body .menu_body__item_wrapper .menu_list li.has_child {
      position: relative; }
      body .menu_body__item_wrapper .menu_list li.has_child a {
        position: relative; }
        body .menu_body__item_wrapper .menu_list li.has_child a:after {
          content: "+";
          color: white;
          left: calc(100% + 25px);
          position: absolute;
          top: 0;
          width: 0; }
      body .menu_body__item_wrapper .menu_list li.has_child .sub-menu {
        position: relative;
        background: transparent;
        list-style: none;
        padding: 0;
        left: unset;
        top: unset;
        right: unset;
        min-width: auto;
        opacity: 1;
        visibility: visible;
        margin-top: 15px;
        padding-left: 25px;
        display: none; } }

/*# sourceMappingURL=style.css.map */
