/*
popModal - 1.26 [27.10.17]
Author: vadimsva
Github: https://github.com/vadimsva/popModal
*/
/* popModal */
.popModal {position:absolute;background:#fff;padding:12px 0 0 0;border:1px solid #777;box-shadow:0 2px 8px rgba(0,0,0,0.12);text-align:left;max-width:500px;min-width:100px;z-index:9997;border-radius:3px;}
.popModal td {border:0 !important;}

.popModal.expand {max-width:600px;}

.popModal .close {line-height:16px;font-size:1.9em;width:14px;font-weight:bold;position:absolute;right:9px;top:6px;color:#222;opacity:0.5;padding:0;cursor:pointer;background:transparent;border:0;outline:0;z-index:2;}
.popModal .close:hover {opacity:1;}

.popModal:before,
.popModal:after {content:'';position:absolute;border:10px solid transparent}
.popModal:after {z-index:1}
.popModal.bottomLeft:before,
.popModal.bottomRight:before,
.popModal.bottomCenter:before {border-top-width:0;border-bottom-color:#777;top:-10px;left:10px}
.popModal.bottomLeft:after,
.popModal.bottomRight:after,
.popModal.bottomCenter:after {border-top-width:0;border-bottom-color:#fff;top:-9px;left:10px}
.popModal.bottomRight:before,
.popModal.bottomRight:after {left:auto;right:10px}
.popModal.bottomCenter:before,
.popModal.bottomCenter:after {left:50%;margin-left:-10px}
.popModal.leftTop:before,
.popModal.leftCenter:before {border-right-width:0;border-left-color:#777;top:10px;right:-10px}
.popModal.leftTop:after,
.popModal.leftCenter:after {border-right-width:0;border-left-color:#fff;top:10px;right:-9px}
.popModal.rightTop:before,
.popModal.rightCenter:before {border-left-width:0;border-right-color:#777;top:10px;left:-10px}
.popModal.rightTop:after,
.popModal.rightCenter:after {border-left-width:0;border-right-color:#fff;top:10px;left:-9px}
.popModal.leftCenter:before,
.popModal.rightCenter:before {top:50%;margin-top:-10px}
.popModal.leftCenter:after, 
.popModal.rightCenter:after {top:50%;margin-top:-10px}

/* 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)}
}