$modalDuration : 0.2s;

.rmr-modal-blur {
  filter: blur(5px);
  padding: 0;
  margin: 0;
}

.rmr-modal-bg {

  background: rgba(0,0,0,0.1);
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: background 0.2s, opacity 0.5s;
  width: 100%;
  z-index: 0;

  &:hover {
    background: rgba(0,0,0,0.8);
  }

  &.rmr-modal-focus {
    cursor: pointer;
    opacity: 1;
  }
}

.rmr-modal-dialog {

  background: #000;
  border-radius: 5px;
  box-shadow: 1px 1px 10px #000;
  box-sizing: border-box;
  opacity: 0;
  position: fixed;
  transition: background $modalDuration, opacity $modalDuration;
  z-index: 1;

  &.rmr-modal-error {
    background-color: #FFD300;
    width: 50px;
    height: 50px;
    opacity: 1;
    left: 50%;

    background-image: url(data:image/svg+xml;charset=UTF-8;base64,PHN2ZyBoZWlnaHQ9IjIzNiIgdmlld0JveD0iMCAwIDIzNiAyMzYiIHdpZHRoPSIyMzYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJtMCAwaDIzNnYyMzZoLTIzNnoiLz48L2RlZnM+PHBhdGggZD0ibTExOC4xMjA4MzkgMjM2Yy03LjQ5OTk0NiAwLTE0LjI5Mzg4Ny0yLjUzODg3MS0xOS45MTg4MTY4LTcuNDUyNzY1LTYuMDg1MTMzMi01LjMxNTkyNC05LjIwMjAyMjItMTIuNzc3OTA5LTkuMjAyMDIyMi0yMS42MDgwMzQgMC03Ljg5MjgxNSAyLjg4Mjc5NTUtMTQuOTIyMjUgOC40MDYwNjg0LTIwLjQ4MDI2MiA1LjUyODA5ODYtNS41NjI4NjggMTIuNTU1MzkzNi04LjQ1ODkzOSAyMC40NzMwOTI2LTguNDU4OTM5IDcuODc5OTkzIDAgMTQuOTA5MzYxIDIuODY2MTg1IDIwLjUwNzA0IDguMzcyNDg5IDUuNjUzNTI1IDUuNTYxMjM5IDguNjEzNzk5IDEyLjYyNjUwNSA4LjYxMzc5OSAyMC41NjY3MTIgMCA4LjcwOTYyOC0zLjA2NjkyMiAxNi4xMTQ1NS05LjA0Njk1NSAyMS40NjM1NjgtNS41OTI2MzMgNS4wMDI0OTYtMTIuMzYzNjg3IDcuNTk3MjMxLTE5LjgzMjIwNiA3LjU5NzIzMXptLTI4LjAxMDM3MzctMTc4LjY3MDkyMzJjLS43NDE1ODUzLTExLjU5OTg3NjctMS4xMTA0NjUzLTE5LjkxMjUyMjktMS4xMTA0NjUzLTI1LjEyOTUxMiAwLTkuMzk3OTY5MSAyLjY5NzYyNjUtMTcuMjU0Njk5NSA4LjE1Njk3MTctMjMuMTIzMDk5NjUgNS41NzQwNDEzLTUuOTkxNjg5NzkgMTMuMDM0MTYzMy05LjA3NjQ2NTE1IDIxLjY4ODkwMTMtOS4wNzY0NjUxNSAxMC45MTk5NTMgMCAxOS4zMjY4MjcgNC41NjYyNDA0NSAyMy41NjI3ODMgMTMuMzA1NzI3MyAzLjEyOTMzOCA2LjQ1NjM0NzkgNC41OTEzNDQgMTQuODgzODUyMyA0LjU5MTM0NCAyNS41NzcwNDY2IDAgNS43MDgxMzQxLS4yOTk5MzkgMTEuNTA1MTE3Mi0uODg2NTQ1IDE3LjIyMjMyMTdsLTUuMTg5MjYyIDU5LjgyMzcwMjRjLS42Njk2NTQgOC40NjU0NjQtMi4xNzYyIDE1LjE0Mjg2OC00LjY4NTgxNiAyMC4yOTk4MTUtMy42NjE0MjcgNy41MjM3NzctMTAuNDc0ODM1IDExLjc3MTM4Ny0xOC44NDI1NzIgMTEuNzcxMzg3LTguNDk5MzY4IDAtMTUuMzU0NzA1LTQuMjQ2NTYtMTguODI2NDk4My0xMS44MTA3MzItMi4yNjQwMTkyLTQuOTMyNzM0LTMuNzIzMzA0MS0xMS41NzQyODEtNC41NzU5NzEtMjAuNDU1MzY1eiIgeGxpbms6aHJlZj0iI2EiLz48L3N2Zz4=);
    background-size: 25px 25px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  &.rmr-modal-xhr {
    transition: background $modalDuration, opacity $modalDuration, width $modalDuration, left $modalDuration, right $modalDuration, top $modalDuration, height $modalDuration;
  }

  &.rmr-modal-loading {

    button.rmr-modal-dismiss {
      display: none;
    }

    .rmr-modal-curtains {
      opacity: 1;
    }
  }

  .rmr-modal-curtains {
    background: #000;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 0.2s;
    width: 100%;
    z-index: 2;

    svg.rmr-loader {

      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      display: block;
      height: 40px;
      position: absolute;
      transition: background 0.2s;
      width: 40px;

      &:hover {

        background-image: url(data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MyIgaGVpZ2h0PSI1MyIgdmlld0JveD0iMCAwIDUzIDUzIj4KICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjYuMzA5Mzk0LDE5LjM2MjA1IEw4LjgxNzA0MTIsMi40NTgxMzI5IEM2LjgzMTMwNTc0LDAuNTM5MTk2NzgxIDMuNjY1OTQ0MDEsMC41OTMzNDgzNDUgMS43NDcwMDc5LDIuNTc5MDgzOCBDLTAuMTcxOTI4MjE5LDQuNTY0ODE5MjYgLTAuMTE3Nzc2NjU1LDcuNzMwMTgwOTkgMS44Njc5NTg4LDkuNjQ5MTE3MSBMMTkuMzYwMzExNiwyNi41NTMwMzQyIEwyLjQ1ODI1NzksNDQuMDQzNDU4OCBDMC41MzkzMjE3ODEsNDYuMDI5MTk0MyAwLjU5MzQ3MzM0NSw0OS4xOTQ1NTYgMi41NzkyMDg4LDUxLjExMzQ5MjEgQzQuNTY0OTQ0MjYsNTMuMDMyNDI4MiA3LjczMDMwNTk5LDUyLjk3ODI3NjcgOS42NDkyNDIxLDUwLjk5MjU0MTIgTDI2LjU1MTI5NTgsMzMuNTAyMTE2NiBMNDQuMDQyOTU4OCw1MC40MDUzNjcxIEM0Ni4wMjg2OTQzLDUyLjMyNDMwMzIgNDkuMTk0MDU2LDUyLjI3MDE1MTcgNTEuMTEyOTkyMSw1MC4yODQ0MTYyIEM1My4wMzE5MjgyLDQ4LjI5ODY4MDcgNTIuOTc3Nzc2Nyw0NS4xMzMzMTkgNTAuOTkyMDQxMiw0My4yMTQzODI5IEwzMy41MDAzNzgyLDI2LjMxMTEzMjQgTDUwLjQwNTQ5MjEsOC44MTc1NDEyIEM1Mi4zMjQ0MjgyLDYuODMxODA1NzQgNTIuMjcwMjc2NywzLjY2NjQ0NDAxIDUwLjI4NDU0MTIsMS43NDc1MDc5IEM0OC4yOTg4MDU3LC0wLjE3MTQyODIxOSA0NS4xMzM0NDQsLTAuMTE3Mjc2NjU1IDQzLjIxNDUwNzksMS44Njg0NTg4IEwyNi4zMDkzOTQsMTkuMzYyMDUgTDI2LjMwOTM5NCwxOS4zNjIwNSBaIi8+Cjwvc3ZnPgo=);
        border-radius: 10px;
        cursor: pointer;

        rect,path {
          opacity: 0;
        }
      }

      rect,path {
        fill: rgba(255,255,255,0.8);
        transition: opacity 0.2s;
      }

    }
  }

  > img,
  > video {
    background: #000;
    height: 100%;
    width: 100%;
    &[data-rmr-link] {
      cursor: pointer;
    }
  }

  &:focus {
    outline: none;
  }

/*  &.rmr-modal-mobile { */
    button.rmr-modal-dismiss {
/*      display: none; */
    }
/*  } */

  &:hover {
    button.rmr-modal-dismiss {
      opacity: 1;
    }
  }

  > iframe {
    background: #000;
  }

  > section {
    transition: opacity $modalDuration;
    overflow: auto;
  }

  &.rmr-modal-focus {
    opacity: 1;
  }

  /* node & html */
  &.rmr-modal-node {
    > section {
      height: 100%;
      opacity: 1;
      position: relative;
      width: 100%;

      &[data-rmr-link] {
        cursor: pointer;
      }
    }
    max-height: 80vh;
    height: auto;
    left: 10%;
    margin: 0 auto;
    top: 10%;
    width: 80%;
  }

  &.rmr-modal-loading {
    height: 60px;
    left: 45%;
    opacity: 1;
    right: 45%;
    top: 20%;
    width: 10%;

    > section {
      opacity: 1;
    }

  }

  /* youtube & video */
  &.rmr-modal-video {
    height: 80%;
    left: 10%;
    top: 10%;
    width: 80%;
  }

  iframe {
    width: 100%;
    height: 100%;
  }


  button.rmr-modal-dismiss {

    background-color: #000;
    background-image: url(data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MyIgaGVpZ2h0PSI1MyIgdmlld0JveD0iMCAwIDUzIDUzIj4KICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjYuMzA5Mzk0LDE5LjM2MjA1IEw4LjgxNzA0MTIsMi40NTgxMzI5IEM2LjgzMTMwNTc0LDAuNTM5MTk2NzgxIDMuNjY1OTQ0MDEsMC41OTMzNDgzNDUgMS43NDcwMDc5LDIuNTc5MDgzOCBDLTAuMTcxOTI4MjE5LDQuNTY0ODE5MjYgLTAuMTE3Nzc2NjU1LDcuNzMwMTgwOTkgMS44Njc5NTg4LDkuNjQ5MTE3MSBMMTkuMzYwMzExNiwyNi41NTMwMzQyIEwyLjQ1ODI1NzksNDQuMDQzNDU4OCBDMC41MzkzMjE3ODEsNDYuMDI5MTk0MyAwLjU5MzQ3MzM0NSw0OS4xOTQ1NTYgMi41NzkyMDg4LDUxLjExMzQ5MjEgQzQuNTY0OTQ0MjYsNTMuMDMyNDI4MiA3LjczMDMwNTk5LDUyLjk3ODI3NjcgOS42NDkyNDIxLDUwLjk5MjU0MTIgTDI2LjU1MTI5NTgsMzMuNTAyMTE2NiBMNDQuMDQyOTU4OCw1MC40MDUzNjcxIEM0Ni4wMjg2OTQzLDUyLjMyNDMwMzIgNDkuMTk0MDU2LDUyLjI3MDE1MTcgNTEuMTEyOTkyMSw1MC4yODQ0MTYyIEM1My4wMzE5MjgyLDQ4LjI5ODY4MDcgNTIuOTc3Nzc2Nyw0NS4xMzMzMTkgNTAuOTkyMDQxMiw0My4yMTQzODI5IEwzMy41MDAzNzgyLDI2LjMxMTEzMjQgTDUwLjQwNTQ5MjEsOC44MTc1NDEyIEM1Mi4zMjQ0MjgyLDYuODMxODA1NzQgNTIuMjcwMjc2NywzLjY2NjQ0NDAxIDUwLjI4NDU0MTIsMS43NDc1MDc5IEM0OC4yOTg4MDU3LC0wLjE3MTQyODIxOSA0NS4xMzM0NDQsLTAuMTE3Mjc2NjU1IDQzLjIxNDUwNzksMS44Njg0NTg4IEwyNi4zMDkzOTQsMTkuMzYyMDUgTDI2LjMwOTM5NCwxOS4zNjIwNSBaIi8+Cjwvc3ZnPgo=);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    border-radius: 15px;
    border: 2px solid #fff;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    cursor: pointer;
    height: 24px;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: -12px;
    text-indent: -1000em;
    top: -12px;
    transition: opacity $modalDuration, transform $modalDuration, background-color $modalDuration;
    width: 24px;
    z-index: 3;

    &:focus,
    &:hover {
      outline: none;
      transform: scale(1.2, 1.2);
    }
  }

  &.rmr-modal-mobile .rmr-modal-dismiss {
    opacity: 1;
  }

}