/* Basic styles */

  * {

    box-sizing: border-box;

  }

  html, body {

    margin: 0;

  }



  a {

    text-decoration: none;

  }

  .top-menu {

    background: #fff;

    border-bottom: solid 2px #ff8100;

    width: inherit;

    text-align: left;

  }

  .title_shop {

    color: #000;

    font-size: 19px;

    margin: 25px;

  }

  .title_shop span {

    font-size: 21px;

    color: #ff8100;

    font-weight: 700;

  }

  /* Toggle functionality */

  #toggle {

    position: absolute;

    left: -100%;

    top: -100%;

  }







  #toggle:checked ~ .toggle-container .button-toggle:before {

    -webkit-transform: translateY(-50%) rotate(45deg) scale(1);

      -ms-transform: translateY(-50%) rotate(45deg) scale(1);

        transform: translateY(-50%) rotate(45deg) scale(1);

  }



  #toggle:checked ~ .toggle-container .button-toggle:after {

    -webkit-transform: translateY(-50%) rotate(-45deg) scale(1);

      -ms-transform: translateY(-50%) rotate(-45deg) scale(1);

        transform: translateY(-50%) rotate(-45deg) scale(1);

  }





  #toggle:checked ~ .nav {

    margin-bottom: 50px;

    pointer-events: auto;

    -webkit-transform: translate(50px, 50px);

      -ms-transform: translate(50px, 50px);

        transform: translate(50px, 50px);

  }



  #toggle:checked ~ .nav .nav-item {

    color: #000;

    letter-spacing: 0;

    height: 40px;

    line-height: 40px;

    margin-top: 0;

    opacity: 1;

    -webkit-transform: scaleY(1);

      -ms-transform: scaleY(1);

        transform: scaleY(1);

    -webkit-transition: 0.5s, opacity 0.1s;

    transition: 0.5s, opacity 0.1s;

  }



  #toggle:checked ~ .nav .nav-item:nth-child(1) {

    -webkit-transition-delay: 0.15s;

        transition-delay: 0.15s;

  }



  #toggle:checked ~ .nav .nav-item:nth-child(1):before {

    -webkit-transition-delay: 0.15s;

        transition-delay: 0.15s;

  }



  #toggle:checked ~ .nav .nav-item:nth-child(2) {

    -webkit-transition-delay: 0.1s;

        transition-delay: 0.1s;

  }



  #toggle:checked ~ .nav .nav-item:nth-child(2):before {

    -webkit-transition-delay: 0.1s;

        transition-delay: 0.1s;

  }



  #toggle:checked ~ .nav .nav-item:nth-child(3) {

    -webkit-transition-delay: 0.05s;

        transition-delay: 0.05s;

  }



  #toggle:checked ~ .nav .nav-item:nth-child(3):before {

    -webkit-transition-delay: 0.05s;

        transition-delay: 0.05s;

  }



  #toggle:checked ~ .nav .nav-item:nth-child(4) {

    -webkit-transition-delay: 0s;

        transition-delay: 0s;

  }



  #toggle:checked ~ .nav .nav-item:nth-child(4):before {

    -webkit-transition-delay: 0s;

        transition-delay: 0s;

  }



  #toggle:checked ~ .nav .nav-item:before {

    opacity: 0;

  }



  #toggle:checked ~ .dummy-content {

    padding-top: 30px;

  }



  #toggle:checked ~ .dummy-content:before {

    background-color: rgba(0, 0, 0, 0.3);

  }



  /* Toggle button */

  .button-toggle {

    position: absolute;

    top: 0;

    display: inline-block;

    width: 20px;

    height: 20px;

    padding: 0;

    margin:25px;

    background-color: transparent;

    border: none;

    cursor: pointer;

    border-radius: 100%;

    -webkit-transition: 0.6s;

    transition: 0.6s;

    box-shadow: none;

  }



  .button-toggle:hover {

    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);

  }



  .button-toggle:before, .button-toggle:after {

    position: absolute;

    content: '';

    top: 50%;

    left: 0;

    width: 100%;

    height: 2px;

    background-color: #000;

    border-radius: 5px;

    -webkit-transition: 0.5s;

    transition: 0.5s;

  }



  .button-toggle:before {

    -webkit-transform: translateY(-50%) rotate(45deg) scale(0);

      -ms-transform: translateY(-50%) rotate(45deg) scale(0);

        transform: translateY(-50%) rotate(45deg) scale(0);

  }



  .button-toggle:after {

    -webkit-transform: translateY(-50%) rotate(-45deg) scale(0);

      -ms-transform: translateY(-50%) rotate(-45deg) scale(0);

        transform: translateY(-50%) rotate(-45deg) scale(0);

  }



  /* Menu */

  .nav {

    display: inline-block;

    margin: 25px 25px 20px;

    pointer-events: none;

    -webkit-transition: 0.5s;

    transition: 0.5s;

  }



  .nav-item {

    width: 20px;

    position: relative;

    display: inline-block;

    float: left;

    clear: both;

    color: transparent;

    font-size: 14px;

    letter-spacing: -6.2px;

    height: 7px;

    line-height: 7px;

    /*text-transform: uppercase;*/

    white-space: nowrap;

    -webkit-transform: scaleY(0.2);

      -ms-transform: scaleY(0.2);

        transform: scaleY(0.2);

    -webkit-transition: 0.5s, opacity 1s;

    transition: 0.5s, opacity 1s;

  }



  .nav-item:nth-child(1) {

    -webkit-transition-delay: 0s;

        transition-delay: 0s;

  }



  .nav-item:nth-child(1):before {

    -webkit-transition-delay: 0s;

        transition-delay: 0s;

  }



  .nav-item:nth-child(2) {

    -webkit-transition-delay: 0.05s;

        transition-delay: 0.05s;

  }



  .nav-item:nth-child(2):before {

    -webkit-transition-delay: 0.05s;

        transition-delay: 0.05s;

  }



  .nav-item:nth-child(3) {

    -webkit-transition-delay: 0.1s;

        transition-delay: 0.1s;

  }



  .nav-item:nth-child(3):before {

    -webkit-transition-delay: 0.1s;

        transition-delay: 0.1s;

  }



  .nav-item:nth-child(4) {

    -webkit-transition-delay: 0.15s;

        transition-delay: 0.15s;

  }



  .nav-item:nth-child(4):before {

    -webkit-transition-delay: 0.15s;

        transition-delay: 0.15s;

  }



  .nav-item:nth-child(1) {

    letter-spacing: -8px;

  }



  .nav-item:nth-child(2) {

    letter-spacing: -7px;

  }



  .nav-item:nth-child(n + 4) {

    letter-spacing: -8px;

    margin-top: -7px;

    opacity: 0;

  }



  .nav-item:before {

    position: absolute;

    content: '';

    top: 50%;

    left: 0;

    width: 100%;

    height: 2px;

    background-color: #000;

    -webkit-transform: translateY(-50%) scaleY(5);

      -ms-transform: translateY(-50%) scaleY(5);

        transform: translateY(-50%) scaleY(5);

    -webkit-transition: 0.5s;

    transition: 0.5s;

  }



  /* Dummy content */

  .dummy-content {

    position: relative;

    text-align: center;

    -webkit-transition: 0.5s;

    transition: 0.5s;

  }



  .dummy-content:before {

    position: absolute;

    content: '';

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: transparent;

    z-index: 2;

    -webkit-transition: 0.5s;

    transition: 0.5s;

  }



  .circle {

    display: inline-block;

    width: 75px;

    height: 75px;

    background-color: #000;

    border-radius: 100%;

  }





  .square-top {

    display: inline-block;

    position: relative;

    width: 200px;

    height: 300px;

    background-color: #FEBE7E;

    z-index: 1;

  }



  .square-behind {

    display: inline-block;

    position: relative;

    top: -256px;

    width: 250px;

    height: 210px;

    background-color: #C28683;

  }



  .square-behind:before, .square-behind:after {

    position: absolute;

    content: '';

    top: 0;

    width: 40%;

    height: 100%;

  }



  .square-behind:before {

    left: 0;

    background-color: #9D567C;

  }



  .square-behind:after {

    right: 0;

    background-color: #958C6B;

  }

  /* Стиль меню навигации */

  .navbar {

    display: flex;

    width: 100%;

    background-color: #555;

    overflow: auto;

    margin: 0;

  }

  /* Навигационные ссылки */

  .navbar a {

    float: left;

    padding: 12px;

    color: white;

    text-decoration: none;

    font-size: 16px;

    width: 30%; /* Четыре звена равной ширины. Если у вас есть две ссылки, используйте 50% и 33.33% для трех ссылок и т.д. */

    text-align: center; /* Если вы хотите, чтобы текст был центрирован */

  }



  /* Добавить цвет фона при наведении курсора мыши */

  .navbar a:hover {

    background-color: #000;

  }



  /* Стиль текущей/активной ссылки */

  .navbar a.active {

    background-color: #4CAF50;

  }



  /* Добавить отзывчивость - на экранах менее 500px, сделать навигационные ссылки появляются поверх друг друга, а не рядом друг с другом */

  @media screen and (max-width: 500px) {

    .navbar a {

    float: none;

    display: block;

    width: 100%;

    text-align: left; /* Если вы хотите, чтобы текст был выровнен по левому краю на небольших экранах */

    }

  }