/* General styles for the modal */
/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden;
}
.md-perspective body {
  background: #222;
  perspective: 600px;
}
.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 400px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateX(-50%) translateY(-50%);
}
.md-modal-init {
  opacity: 1;
}
.md-show {
  visibility: visible;
}
.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(66, 65, 65, 0.73);
  transition: all 0.3s;
}
.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}
/* Content styles */
.md-content {
  color: #0000008f;
  background: #fff;
  position: relative;
  border-radius: 3px;
  margin: 0 auto;
  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.1);
}
.md-content .md-close {
  position: absolute;
  top: 2px;
  right: 10px;
  cursor: pointer;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.md-content .md-close:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f410";
  font-size: 24px;
  color: #fff;
}
.md-content h3 {
  margin: 0;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 0 0;
}
.md-content > div.div_content {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.md-modal.event-content .md-content > div.div_content {
  color: #fff;
}
.md-modal.event-content .md-content > div.div_content a {
  color: #fff;
}
.md-content > div.div_content * {
  position: relative;
}
.md-content > div.div_content.overlay {
  padding: 50% 20% 50%;
}
.md-content > div.div_content.overlay:before {
  content: '';
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
}
.md-content > div.div_content .fc-thumb {
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ddd;
  background-size: cover;
  width: 100%;
  height: 200px;
}
.md-content > div.div_content .class-content-wrap {
  padding: 25px 30px;
}
.md-content > div.div_content .class-content-wrap * {
  margin: 7px 0px;
}
.md-content > div.div_content .class-content-wrap i {
  margin-right: 7px;
  transform: translateY(-1px);
  font-size: 14px;
  color: #0000003b;
}
.md-content > div.div_content .class-content-wrap .fc-title h2 {
  font-size: 20px;
}
.md-content > div.div_content .class-content-wrap .entry-meta span {
  margin: 0;
  position: relative;
  padding: 0;
  display: inline-block;
  padding-left: 12px;
  margin-right: 12px;
}
.md-content > div.div_content .class-content-wrap .entry-meta span:before {
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  content: '';
  background: var(--primary_color);
}
.md-content > div.div_content .fc-excerpt {
  color: #999;
  font-size: 0.8em;
  line-height: 24px;
}
.md-content button {
  display: inline-block;
  margin: 0 auto;
  font-size: 0.8em;
}
.md-content .button-wrap {
  text-align: center;
}
/* Individual modal styles with animations/transitions */
/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.3s;
}
.md-show.md-effect-1 .md-content {
  transform: scale(1);
  opacity: 1;
}
/* Effect 2: Slide from the right */
.md-effect-2 .md-content {
  transform: translateX(20%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.md-show.md-effect-2 .md-content {
  transform: translateX(0);
  opacity: 1;
}
/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
  transform: translateY(20%);
  opacity: 0;
  transition: all 0.3s;
}
.md-show.md-effect-3 .md-content {
  transform: translateY(0);
  opacity: 1;
}
/* Effect 4: Newspaper */
.md-effect-4 .md-content {
  transform: scale(0) rotate(720deg);
  opacity: 0;
}
.md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
  transition: all 0.5s;
}
.md-show.md-effect-4 .md-content {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
/* Effect 5: fall */
.md-effect-5.md-modal {
  perspective: 1300px;
}
.md-effect-5 .md-content {
  transform-style: preserve-3d;
  transform: translateZ(600px) rotateX(20deg);
  opacity: 0;
}
.md-show.md-effect-5 .md-content {
  transition: all 0.3s ease-in;
  transform: translateZ(0px) rotateX(0deg);
  opacity: 1;
}
/* Effect 6: side fall */
.md-effect-6.md-modal {
  perspective: 1300px;
}
.md-effect-6 .md-content {
  transform-style: preserve-3d;
  transform: translate(30%) translateZ(600px) rotate(10deg);
  opacity: 0;
}
.md-show.md-effect-6 .md-content {
  transition: all 0.3s ease-in;
  transform: translate(0%) translateZ(0) rotate(0deg);
  opacity: 1;
}
/* Effect 7:  slide and stick to top */
.md-effect-7 {
  top: 32px;
  transform: translateX(-50%);
}
.md-effect-7 .md-content {
  transform: translateY(-200%);
  transition: all 0.3s;
  opacity: 0;
}
.md-show.md-effect-7 .md-content {
  transform: translateY(0%);
  border-radius: 0 0 3px 3px;
  opacity: 1;
}
.md-show.md-effect-7 .md-close {
  top: auto;
  bottom: 0;
}
/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal {
  perspective: 1300px;
}
.md-effect-8 .md-content {
  transform-style: preserve-3d;
  transform: rotateY(-70deg);
  transition: all 0.3s;
  opacity: 0;
}
.md-show.md-effect-8 .md-content {
  transform: rotateY(0deg);
  opacity: 1;
}
/* Effect 9: 3D flip vertical */
.md-effect-9.md-modal {
  perspective: 1300px;
}
.md-effect-9 .md-content {
  transform-style: preserve-3d;
  transform: rotateX(-70deg);
  transition: all 0.3s;
  opacity: 0;
}
.md-show.md-effect-9 .md-content {
  transform: rotateX(0deg);
  opacity: 1;
}
/* Effect 10: 3D sign */
.md-effect-10.md-modal {
  perspective: 1300px;
}
.md-effect-10 .md-content {
  transform-style: preserve-3d;
  transform: rotateX(-60deg);
  transform-origin: 50% 0;
  opacity: 0;
  transition: all 0.3s;
}
.md-show.md-effect-10 .md-content {
  transform: rotateX(0deg);
  opacity: 1;
}
/* Effect 11: Super scaled */
.md-effect-11 .md-content {
  transform: scale(2);
  opacity: 0;
  transition: all 0.3s;
}
.md-show.md-effect-11 .md-content {
  transform: scale(1);
  opacity: 1;
}
/* Effect 12:  Just me */
.md-effect-12 .md-content {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s;
}
.md-show.md-effect-12 ~ .md-overlay {
  background: #fff;
}
.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
  background: transparent;
}
.md-show.md-effect-12 .md-content {
  transform: scale(1);
  opacity: 1;
}
.md-show.md-effect-12 .md-close:before {
  color: #000;
}
/* Effect 13: 3D slit */
.md-effect-13.md-modal {
  perspective: 1300px;
}
.md-effect-13 .md-content {
  transform-style: preserve-3d;
  transform: translateZ(-3000px) rotateY(90deg);
  opacity: 0;
}
.md-show.md-effect-13 .md-content {
  animation: slit 0.7s forwards ease-out;
}
@keyframes slit {
  50% {
    transform: translateZ(-250px) rotateY(89deg);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateZ(0) rotateY(0deg);
    opacity: 1;
  }
}
/* Effect 14:  3D Rotate from bottom */
.md-effect-14.md-modal {
  perspective: 1300px;
}
.md-effect-14 .md-content {
  transform-style: preserve-3d;
  transform: translateY(100%) rotateX(90deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.md-show.md-effect-14 .md-content {
  transform: translateY(0%) rotateX(0deg);
  opacity: 1;
}
/* Effect 15:  3D Rotate in from left */
.md-effect-15.md-modal {
  perspective: 1300px;
}
.md-effect-15 .md-content {
  transform-style: preserve-3d;
  transform: translateZ(100px) translateX(-30%) rotateY(90deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: all 0.3s;
}
.md-show.md-effect-15 .md-content {
  transform: translateZ(0px) translateX(0%) rotateY(0deg);
  opacity: 1;
}
/* Effect 16:  Blur */
.md-show.md-effect-16 ~ .md-overlay {
  /* 	background: rgba(255,255,255,0.9); */
}
.md-show.md-effect-16 ~ .container {
  -moz-filter: blur(3px);
  filter: blur(3px);
}
.md-effect-16 .md-content {
  transform: translateY(-5%);
  opacity: 0;
}
.md-show.md-effect-16 ~ .container,
.md-effect-16 .md-content {
  transition: all 0.3s;
}
.md-show.md-effect-16 .md-content {
  transform: translateY(0);
  opacity: 1;
}
.md-show.md-effect-16 .md-close:before {
  /* 	color: #000; */
}
/* Effect 17:  Slide in from bottom with perspective on container */
.md-show.md-effect-17 ~ .container {
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s;
}
.md-show.md-effect-17 ~ .container,
.md-show.md-effect-17 ~ .md-overlay {
  transform: rotateX(-2deg);
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
}
.md-effect-17 .md-content {
  opacity: 0;
  transform: translateY(200%);
}
.md-show.md-effect-17 .md-content {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s 0.2s;
}
/* Effect 18:  Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
  height: 100%;
  overflow: hidden;
}
.md-show.md-effect-18 ~ .md-overlay {
  background: rgba(143, 27, 15, 0.8);
  transition: all 0.5s;
}
.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: 0% 50%;
  -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  animation: rotateRightSideFirst 0.5s forwards ease-in;
}
@keyframes rotateRightSideFirst {
  50% {
    transform: translateZ(-50px) rotateY(5deg);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateZ(-200px);
  }
}
.md-effect-18 .md-content {
  transform: translateX(200%);
  opacity: 0;
}
.md-show.md-effect-18 .md-content {
  transform: translateX(0);
  opacity: 1;
  transition: all 0.5s 0.1s;
}
/* Effect 19:  Slip in from the top with perspective on container */
.md-show.md-effect-19 ~ .container {
  height: 100%;
  overflow: hidden;
}
.md-show.md-effect-19 ~ .md-overlay {
  transition: all 0.5s;
}
.md-show.md-effect-19 ~ .container,
.md-show.md-effect-19 ~ .md-overlay {
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: OpenTop 0.5s forwards ease-in;
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: 50% 100%;
  -moz-animation: OpenTop 0.5s forwards ease-in;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  animation: OpenTop 0.5s forwards ease-in;
}
@keyframes OpenTop {
  50% {
    transform: rotateX(10deg);
    animation-timing-function: ease-out;
  }
}
.md-effect-19 .md-content {
  transform: translateY(-200%);
  opacity: 0;
}
.md-show.md-effect-19 .md-content {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.5s 0.1s;
}