/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

body {
  /* background-color: #f9f9f9; */
  /* margin: 0; */
  /* padding: 0; */
}
/* a {
  text-decoration: none;
  color: #1E1E23;
  opacity:1;
  font-family: 'work sans', sans serif;
  font-size: 1.5em;
  font-weight: 400;
  transition: 200ms;
}
a:hover {
  opacity:0.5;
} */
ul {
  padding: 0;
  list-style-type: none;
}



.container {
  margin-top: 50px; 
  Display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.phone {
  background-color: #36383F;
  border-radius: 40px;
  width: 300px;
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-shadow: 30px 50px 100px #85888C;
          box-shadow: 30px 50px 100px #85888C;
}
.content {
  border: 1px solid #36383F;
  border-radius: 20px;
  width: 94%;
  height: 91%;
  background-color: #F5F6FA;
  overflow: hidden;
}

#menu-toggle-phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

#menu-toggle-phone input
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  top: -14px;
  left: -16px;
}

#menu-toggle-phone span
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  -webkit-transform-origin: 5px 0px;
      -ms-transform-origin: 5px 0px;
          transform-origin: 5px 0px;
  -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu-toggle-phone span:first-child
{
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

#menu-toggle-phone span:nth-last-child(2)
{
  -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}

#menu-toggle-phone input:checked ~ span
{
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-3px, -1px);
      -ms-transform: rotate(45deg) translate(-3px, -1px);
          transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#menu-toggle-phone input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
      -ms-transform: rotate(0deg) scale(0.2, 0.2);
          transform: rotate(0deg) scale(0.2, 0.2);
}

#menu-toggle-phone input:checked ~ span:nth-last-child(2)
{
  -webkit-transform: rotate(-45deg) translate(0, -1px);
      -ms-transform: rotate(-45deg) translate(0, -1px);
          transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: fixed;
  width: 250px;
  height: 102%;
  -webkit-box-shadow: 0 0 10px #000000;
          box-shadow: 0 0 10px #000000;
  padding: 50px 16px;
  padding-top: 125px;
  right: 0px;
  top: -18px;
  background-color: var(--secondary-color);
  -webkit-font-smoothing: antialiased;
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: translate(102%, 0);
      -ms-transform: translate(102%, 0);
          transform: translate(102%, 0);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  /* transition-delay: 2s; */
}

#menu-toggle-phone input:checked ~ ul
{
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}