/*
popModal
Author: Juanlu
*/

/* notifyModal */
.notifyModal {position:fixed;z-index:999999;background:rgba(255,255,255,0.5);opacity:0;cursor:pointer;transition:all 200ms ease}
.notifyModal.overlay {top:0;bottom:0;left:0;right:0}
.notifyModal.overlay.center {top:0;bottom:0}
.notifyModal.open {opacity:1}
.notifyModal.open .notifyModal_content {transform:scale(1)}
.notifyModal .notifyModal_content {position:absolute;background:#F9EDBE;width:380px;padding:25px;margin:auto;border:1px solid #CAB388;text-align:justify;box-shadow:0 2px 6px rgba(0,0,0,0.3);transition:all 200ms ease;transform:scale(0.95);font-family:sans-serif;font-size:14px;font-weight:initial;font-style:initial;color:initial;text-decoration:initial;text-transform:initial;line-height:18px;box-sizing:border-box}
.notifyModal.alert .notifyModal_content {background:#FFC7C7;border-color:#CA7878;color:#a94442}
.notifyModal.info .notifyModal_content {background:#d9edf7;border-color:#bce8f1;color:#31708f}
.notifyModal.success .notifyModal_content {background:#dff0d8;border-color:#d6e9c6;color:#3c763d}
.notifyModal.simple .notifyModal_content {background:#fff;border-color:#aaa}
.notifyModal.dark .notifyModal_content {background:#333;border-color:#000;color:#ccc}
.notifyModal.dark .notifyModal_content .close {color:#ccc}
.notifyModal.leftTop {top:0;left:0}
.notifyModal.centerTop {top:0;left:0;right:0}
.notifyModal.rightTop {top:0;right:0}
.notifyModal.center {top:35%;bottom:auto;left:0;right:0}
.notifyModal.leftBottom {bottom:0;left:0}
.notifyModal.centerBottom {bottom:0;left:0;right:0}
.notifyModal.rightBottom {bottom:0;right:0}
.notifyModal.center .notifyModal_content {left:0;right:0;top:35%}
.notifyModal.leftTop .notifyModal_content {left:20px;top:20px}
.notifyModal.centerTop .notifyModal_content {left:0;right:0;top:20px}
.notifyModal.rightTop .notifyModal_content {right:20px;top:20px}
.notifyModal.leftBottom .notifyModal_content {left:20px;bottom:20px}
.notifyModal.centerBottom .notifyModal_content {left:0;right:0;bottom:20px}
.notifyModal.rightBottom .notifyModal_content {right:20px;bottom:20px}
.notifyModal.centerTopSlide.open .notifyModal_content,
.notifyModal.centerBottomSlide.open .notifyModal_content {transform:scale(1) translateY(0)}
.notifyModal.centerTopSlide .notifyModal_content {top:0;left:0;right:0;transform:scale(1) translateY(-100%)}
.notifyModal.centerBottomSlide .notifyModal_content {bottom:0;left:0;right:0;transform:scale(1) translateY(100%)}
.notifyModal.leftTopSlide.open .notifyModal_content,
.notifyModal.leftBottomSlide.open .notifyModal_content,
.notifyModal.rightTopSlide.open .notifyModal_content,
.notifyModal.rightBottomSlide.open .notifyModal_content {transform:scale(1) translateX(0)}
.notifyModal.leftTopSlide .notifyModal_content {left:0;top:20px;transform:scale(1) translateX(-100%)}
.notifyModal.leftBottomSlide .notifyModal_content {left:0;bottom:20px;transform:scale(1) translateX(-100%)}
.notifyModal.rightTopSlide .notifyModal_content {right:0;top:20px;transform:scale(1) translateX(100%)}
.notifyModal.rightBottomSlide .notifyModal_content {right:0;bottom:20px;transform:scale(1) translateX(100%)}
.notifyModal .notifyModal_content .close {line-height:12px;font-size:25px;font-weight:bold;font-family:serif;position:absolute;right:8px;top:8px;color:#000;opacity:0.2;padding:0;cursor:pointer;background:transparent;border:0;outline:0}
.notifyModal .notifyModal_content .close:hover {opacity:1}
@media (max-width: 400px){
.notifyModal .notifyModal_content {width:auto;margin:auto 20px}
.notifyModal.center .notifyModal_content {top:15%}
}

/* animation */
.animated {animation-duration:0.2s;animation-fill-mode:both;transform:translateZ(0);backface-visibility:hidden}
.fadeInLeft {animation-name:fadeInLeft}
.fadeOutLeft {animation-name:fadeOutLeft}
.fadeInRight {animation-name:fadeInRight}
.fadeOutRight {animation-name:fadeOutRight}
.fadeInTop {animation-name:fadeInTop}
.fadeInTopBig {animation-name:fadeInTopBig}
.fadeOutTop {animation-name:fadeOutTop}
.fadeInBottom {animation-name:fadeInBottom}
.fadeOutBottom {animation-name:fadeOutBottom}

@keyframes fadeInLeft {
  0% {opacity:0;transform:translateX(-10px)}
  100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeOutLeft {
  0% {opacity:1;transform:translateX(0)}
	100% {opacity:0;transform:translateX(-10px)}
}

@keyframes fadeInRight {
  0% {opacity:0;transform:translateX(10px)}
  100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeOutRight {
  0% {opacity:1;transform:translateX(0)}
	100% {opacity:0;transform:translateX(10px)}
}

@keyframes fadeInTop {
  0% {opacity:0;transform:translateY(-10px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeOutTop {
  0% {opacity:1;transform: translateY(0)}
	100% {opacity:0;transform:translateY(-10px)}
}

@keyframes fadeInTopBig {
  0% {opacity:0;transform:translateY(-100%)}
  100% {opacity:1;transform:translateY(0)}
}

@keyframes fadeInBottom {
  0% {opacity:0;transform:translateY(10px)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeOutBottom {
  0% {opacity:1;transform:translateY(0)}
	100% {opacity:0;transform:translateY(10px)}
}