/* Modals */
body.no-scroll{
  overflow: hidden;
}
[modal-overlay]{
  position: fixed;
  background: #000;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -10;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
.du-modal [modal-overlay]{
  z-index: 55;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -moz-opacity: .6;
  -khtml-opacity: .6;
  opacity: .6;
}
[modal-trigger],
[modal-force-close]{
  cursor: pointer;
}
[modal-close]{
  position: fixed;
  top: 1vh;
  right: 1vw;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

/* Pop up centered */
[modal-status]{
  position: fixed;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  z-index: 60;
  
  top: 50%;
  left: 50%;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  
  -webkit-transform: translate( -50%, -50% );
  -ms-transform: translate( -50%, -50% );
  -o-transform: translate( -50%, -50% );
  transform: translate( -50%, -50% );

  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  transition: opacity 300ms;
}
[modal-status="hide"]{
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

/* Slide in from left */
[modal-status][modal-position="left"]{
  top: 0;
  left: 0;
  right: auto;
  -webkit-transform: translateX( 0 );
  -ms-transform: translateX( 0 );
  -o-transform: translateX( 0 );
  transform: translateX( 0 );

  -webkit-transition: opacity 300ms, transform 600ms;
  -moz-transition: opacity 300ms, transform 600ms;
  -o-transition: opacity 300ms, transform 600ms;
  transition: opacity 300ms, transform 600ms;
}
[modal-status="hide"][modal-position="left"]{
  z-index: 60;
  -webkit-transform: translateX( -100% );
  -ms-transform: translateX( -100% );
  -o-transform: translateX( -100% );
  transform: translateX( -100% );
}

/* Slide in from right */
[modal-status][modal-position="right"]{
  top: 0;
  right: 0;
  left: auto;
  -webkit-transform: translateX( 0 );
  -ms-transform: translateX( 0 );
  -o-transform: translateX( 0 );
  transform: translateX( 0 );

  -webkit-transition: opacity 300ms, transform 600ms;
  -moz-transition: opacity 300ms, transform 600ms;
  -o-transition: opacity 300ms, transform 600ms;
  transition: opacity 300ms, transform 600ms;
}
[modal-status="hide"][modal-position="right"]{
  z-index: 60;
  -webkit-transform: translateX( 100% );
  -ms-transform: translateX( 100% );
  -o-transform: translateX( 100% );
  transform: translateX( 100% );
}


/* Slide in from bottom */
[modal-status][modal-position="bottom"]{
  top: auto;
  bottom: 0;
  right: 0;
  left: 0;
  -webkit-transform: translateY( 0 );
  -ms-transform: translateY( 0 );
  -o-transform: translateY( 0 );
  transform: translateY( 0 );

  -webkit-transition: opacity 300ms, transform 600ms;
  -moz-transition: opacity 300ms, transform 600ms;
  -o-transition: opacity 300ms, transform 600ms;
  transition: opacity 300ms, transform 600ms;
}
[modal-status="hide"][modal-position="bottom"]{
  z-index: 60;
  -webkit-transform: translateY( 100% );
  -ms-transform: translateY( 100% );
  -o-transform: translateY( 100% );
  transform: translateY( 100% );
}

/* Slide in from top */
[modal-status][modal-position="top"]{
  top: 0;
  bottom: auto;
  right: 0;
  left: 0;
  -webkit-transform: translateY( 0 );
  -ms-transform: translateY( 0 );
  -o-transform: translateY( 0 );
  transform: translateY( 0 );

  -webkit-transition: opacity 300ms, transform 600ms;
  -moz-transition: opacity 300ms, transform 600ms;
  -o-transition: opacity 300ms, transform 600ms;
  transition: opacity 300ms, transform 600ms;
}
[modal-status="hide"][modal-position="top"]{
  z-index: 60;
  -webkit-transform: translateY( -100% );
  -ms-transform: translateY( -100% );
  -o-transform: translateY( -100% );
  transform: translateY( -100% );
}