/* A to Z Stylesheet */
.a-to-z {
  width: 100%;
}

.a-to-z .box {
  width: 14.28571428571429%;
  float: left;
  position: relative;
  z-index: 0;
  margin-bottom: 0px;
}

.a-to-z .card {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0%;
  z-index: 2;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.a-to-z .letter {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.a-to-z .letter:hover .symbol {
  color: #36374C;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.a-to-z .card-content {
  width: 100%;
  height: 100%;
  left: 0px;
  background: #F4CF81;
  position: absolute;
  top: 0px;
  padding: 40px 30px 30px 50px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
}

.a-to-z .card-content p, .a-to-z .card-content h2 {
  color: #fff;
}

.a-to-z .symbol {
  font-family: "marydale", "Arial", "Helvetica", "sans-serif";
  color: #fff;
  font-size: 930%;
  position: absolute;
  top: 50%;
  color: #fff;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.a-to-z .underline {
  position: absolute;
  bottom: 0px;
  left: 50%;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
}

.a-to-z .close {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  z-index: 3;
}

.a-to-z .box-open .card {
  width: 200%;
  left: 100%;
}

.a-to-z .box-open .letter .symbol {
  color: #36374C;
}

.a-to-z .box-open .underline {
  bottom: 27px;
  opacity: 1;
}

.a-to-z .box-open .card:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22.5px 0 22.5px 27px;
  border-color: transparent transparent transparent #e5be6b;
  position: absolute;
  top: 50%;
  left: 0px;
  z-index: 2;
  transform: translateY(-50%);
}

.a-to-z .box-open .symbol {
  color: #fff;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.a-to-z .box-open.go-left .card {
  left: -200%;
}

.a-to-z .box-open.go-left .card:before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22.5px 27px 22.5px 0;
  border-color: transparent #e5be6b transparent transparent;
  left: auto;
  right: 0px;
}

.a-to-z .box-open.go-down {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.a-to-z .box-open.go-down .card {
  left: 0px;
  height: 100%;
  top: 100%;
  width: 100%;
}

.a-to-z .box-open.go-down .card:before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 27px 22.5px 0 22.5px;
  border-color: #e5be6b transparent transparent transparent;
  left: 50%;
  right: auto;
  transform: translate(-50%, 0%);
  top: 0px;
}

.box-letter-A .card-content {
  background: #b9c18d;
}

.box-letter-A.box-open .card:before {
  border-color: transparent transparent transparent #a7ae80;
}

.box-letter-A.box-open.go-left .card:before {
  border-color: transparent #a7ae80 transparent transparent;
}

.box-letter-A.box-open.go-down .card:before {
  border-color: #a7ae80 transparent transparent transparent;
}

.box-letter-B .card-content {
  background: #b94732;
}

.box-letter-B.box-open .card:before {
  border-color: transparent transparent transparent #d27251;
}

.box-letter-B.box-open.go-left .card:before {
  border-color: transparent #d27251 transparent transparent;
}

.box-letter-B.box-open.go-down .card:before {
  border-color: #d27251 transparent transparent transparent;
}

.box-letter-C .card-content {
  background: #dbc38e;
}

.box-letter-C.box-open .card:before {
  border-color: transparent transparent transparent #e4cd9c;
}

.box-letter-C.box-open.go-left .card:before {
  border-color: transparent #e4cd9c transparent transparent;
}

.box-letter-C.box-open.go-down .card:before {
  border-color: #e4cd9c transparent transparent transparent;
}

.box-letter-D .card-content {
  background: #8d5134;
}

.box-letter-D.box-open .card:before {
  border-color: transparent transparent transparent #b06542;
}

.box-letter-D.box-open.go-left .card:before {
  border-color: transparent #b06542 transparent transparent;
}

.box-letter-D.box-open.go-down .card:before {
  border-color: #b06542 transparent transparent transparent;
}

.box-letter-E .card-content {
  background: #658981;
}

.box-letter-E.box-open .card:before {
  border-color: transparent transparent transparent #86a39c;
}

.box-letter-E.box-open.go-left .card:before {
  border-color: transparent #86a39c transparent transparent;
}

.box-letter-E.box-open.go-down .card:before {
  border-color: #86a39c transparent transparent transparent;
}

.box-letter-F .card-content {
  background: #c54949;
}

.box-letter-F.box-open .card:before {
  border-color: transparent transparent transparent #e29798;
}

.box-letter-F.box-open.go-left .card:before {
  border-color: transparent #e29798 transparent transparent;
}

.box-letter-F.box-open.go-down .card:before {
  border-color: #e29798 transparent transparent transparent;
}

.box-letter-G .card-content {
  background: #716b53;
}

.box-letter-G.box-open .card:before {
  border-color: transparent transparent transparent #99957a;
}

.box-letter-G.box-open.go-left .card:before {
  border-color: transparent #99957a transparent transparent;
}

.box-letter-G.box-open.go-down .card:before {
  border-color: #99957a transparent transparent transparent;
}

.box-letter-H .card-content {
  background: #70938c;
}

.box-letter-H.box-open .card:before {
  border-color: transparent transparent transparent #a3b9b4;
}

.box-letter-H.box-open.go-left .card:before {
  border-color: transparent #a3b9b4 transparent transparent;
}

.box-letter-H.box-open.go-down .card:before {
  border-color: #a3b9b4 transparent transparent transparent;
}

.box-letter-I .card-content {
  background: #f2ba54;
}

.box-letter-I.box-open .card:before {
  border-color: transparent transparent transparent #f5d595;
}

.box-letter-I.box-open.go-left .card:before {
  border-color: transparent #f5d595 transparent transparent;
}

.box-letter-I.box-open.go-down .card:before {
  border-color: #f5d595 transparent transparent transparent;
}

.box-letter-J .card-content {
  background: #c54949;
}

.box-letter-J.box-open .card:before {
  border-color: transparent transparent transparent #e29798;
}

.box-letter-J.box-open.go-left .card:before {
  border-color: transparent #e29798 transparent transparent;
}

.box-letter-J.box-open.go-down .card:before {
  border-color: #e29798 transparent transparent transparent;
}

.box-letter-K .card-content {
  background: #f2ba54;
}

.box-letter-K.box-open .card:before {
  border-color: transparent transparent transparent #f5d595;
}

.box-letter-K.box-open.go-left .card:before {
  border-color: transparent #f5d595 transparent transparent;
}

.box-letter-K.box-open.go-down .card:before {
  border-color: #f5d595 transparent transparent transparent;
}

.box-letter-L .card-content {
  background: #b94732;
}

.box-letter-L.box-open .card:before {
  border-color: transparent transparent transparent #d27251;
}

.box-letter-L.box-open.go-left .card:before {
  border-color: transparent #d27251 transparent transparent;
}

.box-letter-L.box-open.go-down .card:before {
  border-color: #d27251 transparent transparent transparent;
}

.box-letter-M .card-content {
  background: #b9c18d;
}

.box-letter-M.box-open .card:before {
  border-color: transparent transparent transparent #a7ae80;
}

.box-letter-M.box-open.go-left .card:before {
  border-color: transparent #a7ae80 transparent transparent;
}

.box-letter-M.box-open.go-down .card:before {
  border-color: #a7ae80 transparent transparent transparent;
}

.box-letter-N .card-content {
  background: #dbc38e;
}

.box-letter-N.box-open .card:before {
  border-color: transparent transparent transparent #e4cd9c;
}

.box-letter-N.box-open.go-left .card:before {
  border-color: transparent #e4cd9c transparent transparent;
}

.box-letter-N.box-open.go-down .card:before {
  border-color: #e4cd9c transparent transparent transparent;
}

.box-letter-O .card-content {
  background: #716b53;
}

.box-letter-O.box-open .card:before {
  border-color: transparent transparent transparent #99957a;
}

.box-letter-O.box-open.go-left .card:before {
  border-color: transparent #99957a transparent transparent;
}

.box-letter-O.box-open.go-down .card:before {
  border-color: #99957a transparent transparent transparent;
}

.box-letter-P .card-content {
  background: #8d5134;
}

.box-letter-P.box-open .card:before {
  border-color: transparent transparent transparent #b06542;
}

.box-letter-P.box-open.go-left .card:before {
  border-color: transparent #b06542 transparent transparent;
}

.box-letter-P.box-open.go-down .card:before {
  border-color: #b06542 transparent transparent transparent;
}

.box-letter-Q .card-content {
  background: #658981;
}

.box-letter-Q.box-open .card:before {
  border-color: transparent transparent transparent #86a39c;
}

.box-letter-Q.box-open.go-left .card:before {
  border-color: transparent #86a39c transparent transparent;
}

.box-letter-Q.box-open.go-down .card:before {
  border-color: #86a39c transparent transparent transparent;
}

.box-letter-R .card-content {
  background: #b9c18d;
}

.box-letter-R.box-open .card:before {
  border-color: transparent transparent transparent #a7ae80;
}

.box-letter-R.box-open.go-left .card:before {
  border-color: transparent #a7ae80 transparent transparent;
}

.box-letter-R.box-open.go-down .card:before {
  border-color: #a7ae80 transparent transparent transparent;
}

.box-letter-S .card-content {
  background: #c54949;
}

.box-letter-S.box-open .card:before {
  border-color: transparent transparent transparent #e29798;
}

.box-letter-S.box-open.go-left .card:before {
  border-color: transparent #e29798 transparent transparent;
}

.box-letter-S.box-open.go-down .card:before {
  border-color: #e29798 transparent transparent transparent;
}

.box-letter-T .card-content {
  background: #f2ba54;
}

.box-letter-T.box-open .card:before {
  border-color: transparent transparent transparent #f5d595;
}

.box-letter-T.box-open.go-left .card:before {
  border-color: transparent #f5d595 transparent transparent;
}

.box-letter-T.box-open.go-down .card:before {
  border-color: #f5d595 transparent transparent transparent;
}

.box-letter-U .card-content {
  background: #658981;
}

.box-letter-U.box-open .card:before {
  border-color: transparent transparent transparent #86a39c;
}

.box-letter-U.box-open.go-left .card:before {
  border-color: transparent #86a39c transparent transparent;
}

.box-letter-U.box-open.go-down .card:before {
  border-color: #86a39c transparent transparent transparent;
}

.box-letter-V .card-content {
  background: #c54949;
}

.box-letter-V.box-open .card:before {
  border-color: transparent transparent transparent #e29798;
}

.box-letter-V.box-open.go-left .card:before {
  border-color: transparent #e29798 transparent transparent;
}

.box-letter-V.box-open.go-down .card:before {
  border-color: #e29798 transparent transparent transparent;
}

.box-letter-W .card-content {
  background: #dbc38e;
}

.box-letter-W.box-open .card:before {
  border-color: transparent transparent transparent #e4cd9c;
}

.box-letter-W.box-open.go-left .card:before {
  border-color: transparent #e4cd9c transparent transparent;
}

.box-letter-W.box-open.go-down .card:before {
  border-color: #e4cd9c transparent transparent transparent;
}

.box-letter-X .card-content {
  background: #b94732;
}

.box-letter-X.box-open .card:before {
  border-color: transparent transparent transparent #d27251;
}

.box-letter-X.box-open.go-left .card:before {
  border-color: transparent #d27251 transparent transparent;
}

.box-letter-X.box-open.go-down .card:before {
  border-color: #d27251 transparent transparent transparent;
}

.box-letter-Y .card-content {
  background: #f2ba54;
}

.box-letter-Y.box-open .card:before {
  border-color: transparent transparent transparent #f5d595;
}

.box-letter-Y.box-open.go-left .card:before {
  border-color: transparent #f5d595 transparent transparent;
}

.box-letter-Y.box-open.go-down .card:before {
  border-color: #f5d595 transparent transparent transparent;
}

.box-letter-Z .card-content {
  background: #8d5134;
}

.box-letter-Z.box-open .card:before {
  border-color: transparent transparent transparent #b06542;
}

.box-letter-Z.box-open.go-left .card:before {
  border-color: transparent #b06542 transparent transparent;
}

.box-letter-Z.box-open.go-down .card:before {
  border-color: #b06542 transparent transparent transparent;
}