@keyframes popup {
  from {
    transform: translate(-50%, 50px); }
  to {
    transform: translate(-50%, 0); } }

.switch {
  position: fixed;
  bottom: 0;
  left: -300px;
  width: 300px;
  background: #222;
  color: #fff;
  transition: left .25s; }
  .switch .switch-trigger {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
    background: #FF4F4F;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 300;
    cursor: pointer;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    animation: popup 1s .4s both; }
    .switch .switch-trigger:hover {
      background: #ff6969; }
  .switch ul {
    list-style: none;
    margin: 4rem;
    padding: 0;
    text-align: left; }
    .switch ul li {
      margin: 2rem 0;
      padding: 0; }
      .switch ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 1.2rem; }
        .switch ul li a:hover {
          opacity: .6; }
        .switch ul li a.active {
          color: #FF4F4F; }

.bg-black .switch {
  background: #000; }

.switch-on .switch {
  left: 0; }

@media screen and (max-width: 1024px) {
  .switch {
    z-index: 999;
    left: 0;
    bottom: -100%;
    width: 100%;
    padding-bottom: 4rem; }
    .switch ul.switch-nav {
      margin-left: 2rem; }
      .switch ul.switch-nav li {
        font-size: 1.5rem;
        text-align: left; }
  .switch-on .switch {
    bottom: 0; } }

@media screen and (max-width: 640px) {
  .scrolled .switch {
    display: none; } }