* {
    box-sizing:border-box;
  }

  #modal-container {
    pointer-events: none;
    position: fixed;
    display: table;
    height: 50%;
    width: 100%;
    bottom: 0;
    transform: scale(0);
    z-index: 2;

    &.six {
        transform: scale(1);
        .modal-background {
          background: rgba(0, 0, 0, 0);
          animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          .modal {
            background-color: #72a548 ;
            animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
              forwards;
            h2,
            p {
              opacity: 0;
              position: relative;
              animation: modalContentFadeIn 0.5s 1s
                cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            }
            #modal-img{
              animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
            }
            .modal-svg {
              rect {
                animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
                  forwards;
              }
            }
          }
        }
        &.out {
          animation: quickScaleDown 0s 0.5s linear forwards;
          .modal-background {
            animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            .modal {
              animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
                forwards;
              h2,
              p {
                animation: modalContentFadeOut 0.5s
                  cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
              }
              #modal-img{
                animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
              }
              .modal-svg {
                rect {
                  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
                    forwards;
                }
              }
            }
          }
        }
      }
    .modal-background {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        .modal {
          padding: 20px 40px;
          display: inline-block;
          border-radius: 10px;
          font-weight: 300;
          position: relative;
          h2 {
            z-index: 2;
            color: #222;
            font-size: 2vw;
            line-height: 2vw;
            margin-bottom: 15px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          }
          #modal-img {
            z-index: 1;
            position: absolute;
            bottom: 40px;
            left: -30px;
            /* transform: translateY(-5px); */
            size: 2;
          }
          .modal-svg {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            border-radius: 10px;
            background-color: #59a01f ;
            opacity: 0.5;
            rect {
              stroke: #c0c73e;
              stroke-width: 5px;
              stroke-dasharray: 778;
              stroke-dashoffset: 778;
            }
          }
        }
      }
    }

    @media (max-width: 768px) {
      .modal {
          padding: 15px 30px;
      }
  
      h2 {
          font-size: 24vw;
          line-height: 4vw;
      }
  
      #modal-img {
          bottom: 4vh;
          left: -2vw;
          height: 12vh;
          width: 12vh;
      }
  }
  
  @media (max-width: 480px) {
      .modal {
          padding: 10px 20px;
      }
  
      h2 {
          font-size: 15px;
          line-height: 3vw;
      }
  
      #modal-img {
          bottom: 3vh;
          left: -1vw;
          height: 10vh;
          width: 10vh;
      }
  }

    
@keyframes unfoldIn {
  0% {
    transform:scaleY(.005) scaleX(0);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform:scaleY(1) scaleX(1);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

@keyframes scaleUp {
  0% {
    transform:scale(.8) translateY(1000px);
    opacity:0;
  }
  100% {
    transform:scale(1) translateY(0px);
    opacity:1;
  }
}

@keyframes scaleDown {
  0% {
    transform:scale(1) translateY(0px);
    opacity:1;
  }
  100% {
    transform:scale(.8) translateY(1000px);
    opacity:0;
  }
}

@keyframes scaleBack {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(.85);
  }
}

@keyframes scaleForward {
  0% {
    transform:scale(.85);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes quickScaleDown {
  0% {
    transform:scale(1);
  }
  99.9% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

@keyframes slideUpLarge {
  0% {
    transform:translateY(0%);
  }
  100% {
    transform:translateY(-100%);
  }
}

@keyframes slideDownLarge {
  0% {
    transform:translateY(-100%);
  }
  100% {
    transform:translateY(0%);
  }
}

@keyframes moveUp {
  0% {
    transform:translateY(150px);
  }
  100% {
    transform:translateY(0);
  }
}

@keyframes moveDown {
  0% {
    transform:translateY(0px);
  }
  100% {
    transform:translateY(150px);
  }
}

@keyframes blowUpContent {
  0% {
    transform:scale(1);
    opacity:1;
  }
  99.9% {
    transform:scale(2);
    opacity:0;
  }
  100% {
    transform:scale(0);
  }
}

@keyframes blowUpContentTwo {
  0% {
    transform:scale(2);
    opacity:0;
  }
  100% {
    transform:scale(1);
    opacity:1;
  }
}

@keyframes blowUpModal {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes blowUpModalTwo {
  0% {
    transform:scale(1);
    opacity:1;
  }
  100% {
    transform:scale(0);
    opacity:0;
  }
}

@keyframes roadRunnerIn {
  0% {
    transform:translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    transform:translateX(30px) skewX(0deg) scaleX(.9);
  }
  100% {
    transform:translateX(0px) skewX(0deg) scaleX(1);
  }
}

@keyframes roadRunnerOut {
  0% {
    transform:translateX(0px) skewX(0deg) scaleX(1);
  }
  30% {
    transform:translateX(-30px) skewX(-5deg) scaleX(.9);
  }
  100% {
    transform:translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}

@keyframes sketchIn {
	0% {
		stroke-dashoffset: 778;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes sketchOut {
	0% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 778;
	}
}

@keyframes modalFadeIn {
  0% {
    background-color:transparent;
  }
  100% {
    background-color:white;
  }
}

@keyframes modalFadeOut {
  0% {
    background-color:white;
  }
  100% {
    background-color:transparent;
  }
}

@keyframes modalContentFadeIn {
  0% {
    opacity:0;
    top:-20px;
  }
  100% {
    opacity:1;
    top:0;
  }
}

@keyframes modalContentFadeOut {
  0% {
    opacity:1;
    top:0px;
  }
  100% {
    opacity:0;
    top:-20px;
  }
}
/*     
@keyframes sketchIn {
	0% {
		stroke-dashoffset: 778;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes sketchOut {
	0% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 778;
	}
}

@keyframes modalFadeIn {
  0% {
    background-color:transparent;
  }
  100% {
    background-color:white;
  }
}

@keyframes modalFadeOut {
  0% {
    background-color:white;
  }
  100% {
    background-color:transparent;
  }
}

@keyframes modalContentFadeIn {
  0% {
    opacity:0;
    top:-20px;
  }
  100% {
    opacity:1;
    top:0;
  }
} */