.accordion p,
.transition {
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out
}

.accordion ul li,
h1 {
  -webkit-animation: flipdown .5s ease both;
  animation: flipdown .5s ease both
}

.accordion h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

@media (max-width:550px) {
  .accordion h2 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    left: 0
  }
}

.accordion h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  background-color: #fefffa;
  margin: 0;
  cursor: pointer
}

.accordion p {
  color: #000;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  margin-top: 14px;
  z-index: 2
}

.accordion ul {
  list-style: none;
  -webkit-perspective: 900;
  perspective: 900;
  padding: 0;
  margin: 0
}

.accordion ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb
}

.accordion ul li:nth-of-type(1) {
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}

.accordion ul li:nth-of-type(2) {
  -webkit-animation-delay: .75s;
  animation-delay: .75s
}

.accordion ul li:nth-of-type(3) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}

.accordion ul li:last-of-type {
  padding-bottom: 0
}

@-webkit-keyframes flipdown {
  0% {
    opacity: 0;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg)
  }

  5% {
    opacity: 1
  }

  80% {
    -webkit-transform: rotateX(8deg);
    transform: rotateX(8deg)
  }

  83% {
    -webkit-transform: rotateX(6deg);
    transform: rotateX(6deg)
  }

  92% {
    -webkit-transform: rotateX(-3deg);
    transform: rotateX(-3deg)
  }

  100% {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
  }
}

@keyframes flipdown {
  0% {
    opacity: 0;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg)
  }

  5% {
    opacity: 1
  }

  80% {
    -webkit-transform: rotateX(8deg);
    transform: rotateX(8deg)
  }

  83% {
    -webkit-transform: rotateX(6deg);
    transform: rotateX(6deg)
  }

  92% {
    -webkit-transform: rotateX(-3deg);
    transform: rotateX(-3deg)
  }

  100% {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
  }
}