.mk-tt {
  cursor: pointer; }

.mk-tt-modal {
  background: #333;
  border-radius: 2px;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.4);
  color: white;
  display: none;
  opacity: 0;
  padding: 1rem;
  position: absolute;
  margin: 1rem;
  z-index: 9999;
  border-collapse: separate; }

.mk-tt-modal.transitions {
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s; }

.mk-tt-modal.transition {
  display: block; }

.mk-tt-modal.out {
  opacity: 0; }

.mk-tt-modal[aria-hidden="false"] {
  display: block;
  opacity: 1; }

.mk-tt-modal:before,
.mk-tt-modal:after {
  content: '';
  height: 0;
  position: absolute;
  width: 0; }

.mk-tt-modal.top-left:before,
.mk-tt-modal.top-center:before,
.mk-tt-modal.top-right:before,
.mk-tt-modal.top-left:after,
.mk-tt-modal.top-center:after,
.mk-tt-modal.top-right:after {
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-top: 0.6rem solid #333;
  top: 100%; }

.mk-tt-modal.bottom-left:before,
.mk-tt-modal.bottom-center:before,
.mk-tt-modal.bottom-right:before,
.mk-tt-modal.bottom-left:after,
.mk-tt-modal.bottom-center:after,
.mk-tt-modal.bottom-right:after {
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-bottom: 0.6rem solid #333;
  bottom: 100%; }

.mk-tt-modal.left-top:before,
.mk-tt-modal.left-center:before,
.mk-tt-modal.left-bottom:before,
.mk-tt-modal.left-top:after,
.mk-tt-modal.left-center:after,
.mk-tt-modal.left-bottom:after {
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left: 0.6rem solid #333;
  left: 100%; }

.mk-tt-modal.right-top:before,
.mk-tt-modal.right-center:before,
.mk-tt-modal.right-bottom:before,
.mk-tt-modal.right-top:after,
.mk-tt-modal.right-center:after,
.mk-tt-modal.right-bottom:after {
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-right: 0.6rem solid #333;
  right: 100%; }

.mk-tt-modal.top-left:before,
.mk-tt-modal.bottom-left:before,
.mk-tt-modal.top-left:after,
.mk-tt-modal.bottom-left:after {
  left: 0.6rem; }

.mk-tt-modal.top-right:before,
.mk-tt-modal.bottom-right:before,
.mk-tt-modal.top-right:after,
.mk-tt-modal.bottom-right:after {
  right: 0.6rem; }

.mk-tt-modal.top-center:before,
.mk-tt-modal.bottom-center:before,
.mk-tt-modal.top-center:after,
.mk-tt-modal.bottom-center:after {
  left: 50%;
  margin-left: -0.6rem; }

.mk-tt-modal.left-top:before,
.mk-tt-modal.right-top:before,
.mk-tt-modal.left-top:after,
.mk-tt-modal.right-top:after {
  top: 0.6rem; }

.mk-tt-modal.left-bottom:before,
.mk-tt-modal.right-bottom:before,
.mk-tt-modal.left-bottom:after,
.mk-tt-modal.right-bottom:after {
  bottom: 0.6rem; }

.mk-tt-modal.left-center:before,
.mk-tt-modal.right-center:before,
.mk-tt-modal.left-center:after,
.mk-tt-modal.right-center:after {
  top: 50%;
  margin-top: -0.6rem; }

.mk-tt-kill {
  position: absolute;
  left: -9999px; }