:root {
                                                                                      /* COLORS */
                                                                                      --main-header-primary-color: white;
                                                                                      --main-header-secondary-color: white;
                                                                                      --main-header-tertiary-color: white;
                                                                                      --main-header-quaternary-color: #aaa;
                                                                                      --main-header-shadow-color: #333;
                                                                                      /* FONT */
                                                                                      --main-header-font-family: Mulish;
                                                                                      /* MAIN HEADER */
                                                                                      --main-header-menu-width: 450px;
                                                                                      --main-header-menu-button-height: 40px;
                                                                                      --main-header-menu-button-width: 80px;
                                                                                      /* TRASITION */
                                                                                      --main-header-transition: all 0.35s ease;
                                                                                  }
                                                                                  /* MAIN HEADER */
                                                                                  
                                                                                  .main-header {
                                                                                      position: fixed;
                                                                                      width: 100%;
                                                                                      display: flex;
                                                                                      justify-content: center;
                                                                                      background: var(--main-header-primary-color);
                                                                                      height: 70px;
                                                                                      font-family: var(--main-header-font-family);
                                                                                      box-shadow: 0 0 10px var(--main-header-shadow-color);
                                                                                      text-transform: uppercase;
                                                                                      transition: var(--main-header-transition);
                                                                                  }
                                                                                  
                                                                                  .main-header .container {
                                                                                      display: flex;
                                                                                      justify-content: space-between;
                                                                                      align-items: center;
                                                                                      width: 100%;
                                                                                      max-width: 1140px;
                                                                                  }
                                                                                  
                                                                                  .main-header-logo {
                                                                                      margin: 20px;
                                                                                      min-width: 120px;
                                                                                  }
                                                                                  
                                                                                  .main-header-menu {
                                                                                      display: none;
                                                                                      font-weight: 100;
                                                                                      width: var(--main-header-menu-width);
                                                                                      margin: 20px;
                                                                                  }
                                                                                  
                                                                                  .main-header-menu ul {
                                                                                      display: flex;
                                                                                      justify-content: space-between;
                                                                                      height: 100%;
                                                                                      width: 100%;
                                                                                      list-style-type: none;
                                                                                  }
                                                                                  
                                                                                  .main-header-menu a {
                                                                                      display: flex;
                                                                                      align-items: center;
                                                                                      justify-content: center;
                                                                                      background: var(--main-header-secondary-color);
                                                                                      color: var(--main-header-quaternary-color);
                                                                                      border: 1px solid var(--main-header-tertiary-color);
                                                                                      width: var(--main-header-menu-button-width);
                                                                                      height: var(--main-header-menu-button-height);
                                                                                      border-radius: 5px;
                                                                                      margin: 5px;
                                                                                      transition: var(--main-header-transition);
                                                                                      text-decoration: none;
                                                                                  }
                                                                                  
                                                                                  .main-header-menu a:hover {
                                                                                      background: var(--main-header-tertiary-color);
                                                                                      box-shadow: 0px 4px 10px var(--main-header-shadow-color);
                                                                                  }
                                                                                  /* SIDE MENU */
                                                                                  
                                                                                  .side-menu {
                                                                                      display: flex;
                                                                                      width: 1000px;
                                                                                      position: fixed;
                                                                                      left: -1000px;
                                                                                      z-index: 10;
                                                                                      height: 100%;
                                                                                      transition: var(--main-header-transition);
                                                                                  }
                                                                                  
                                                                                  .side-menu-content {
                                                                                      height: 100%;
                                                                                      width: 400px;
                                                                                      background: #101010;
                                                                                  }
                                                                                  
                                                                                  .side-menu ul {
                                                                                      display: flex;
                                                                                      flex-direction: column;
                                                                                      height: 100%;
                                                                                      top: 70px;
                                                                                      background: var(--main-header-secondary-color);
                                                                                      overflow: hidden;
                                                                                      transition: var(--main-header-transition);
                                                                                  }
                                                                                  
                                                                                  .side-menu a {
                                                                                      display: flex;
                                                                                      align-items: center;
                                                                                      justify-content: center;
                                                                                      background: var(--main-header-secondary-color);
                                                                                      /*color: var(--main-header-quaternary-color);*/
                                                                                      border-bottom: 1px solid var(--main-header-tertiary-color);
                                                                                      width: 100%;
                                                                                      height: 55px;
                                                                                      transition: var(--main-header-transition);
                                                                                      text-decoration: none;
                                                                                      text-transform: uppercase;
                                                                                      font-family: var(--main-header-font-family);
                                                                                  }
                                                                                  
                                                                                  .side-menu a:hover {
                                                                                      background: var(--main-header-tertiary-color);
                                                                                  }
                                                                                  
                                                                                  .side-menu-close-div {
                                                                                      height: 100%;
                                                                                      width: 100%;
                                                                                      background: rgba(0, 0, 0, 0);
                                                                                      transition: var(--main-header-transition);
                                                                                  }
                                                                                  /* MEDIA QUERIES MAIN HEADER */
                                                                                  
                                                                                  @media (min-width: 768px) {
                                                                                      .main-header-menu {
                                                                                          display: flex;
                                                                                      }
                                                                                      /*
                        .side-menu {
                            display: none;
                        }
                        .main-header-side-menu-button {
                            display: none;
                        }*/
                                                                                  }