  html,
  * {
      border: 0;
  }
  
  #overlays {
      display: none;
  }
  
  #myOverlay1 {
      width: 640px;
      height: 390px;
  }
  
  #myOverlay2 {
      width: auto;
      height: auto;
  }
  
  #overlayContainer {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
      width: 100%;
      height: 100%;
      text-align: center;
  }
  
  #overlayContainer:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
  }
  
  #overlayContainer #overlayBackground {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUU3MjBDRDI1OTJGMTFFNDgyMjJBRjM5MjIwNDA2MTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUU3MjBDRDM1OTJGMTFFNDgyMjJBRjM5MjIwNDA2MTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRTcyMENEMDU5MkYxMUU0ODIyMkFGMzkyMjA0MDYxMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRTcyMENEMTU5MkYxMUU0ODIyMkFGMzkyMjA0MDYxMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Puxx8C0AAAAPSURBVHjaYmBgYNgFEGAAAL8Au1we4coAAAAASUVORK5CYII=");
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transition: opacity 0.5s;
      -moz-transition: opacity 0.5s;
      -webkit-transition: opacity 0.5s;
      opacity: 0;
  }
  
  #overlayContainer #overlayFrame {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      background-color: #F5F5F5;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding: 15px;
     /* border-radius: 8px;*/ border-radius: 0px;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      box-shadow: 0 0 16px #000000;
      -moz-box-shadow: 0 0 16px #000000;
      -webkit-box-shadow: 0 0 16px #000000;
      text-align: left;
      transition: top 0.5s, left 0.5s;
      -moz-transition: top 0.5s, left 0.5s;
      -webkit-transition: top 0.5s, left 0.5s;
  }
  
  #overlayContainer #overlayFrame #overlayClose {
      position: absolute;
      width: 32px;
      height: 32px;
      right: -12px;
      top: -12px;
      background-color: transparent;
      cursor: pointer;
      outline: none;
  }
  
  #overlayContainer #overlayFrame #overlayClose:after {
      content: "X";
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -12px;
      top: 50%;
      margin-top: -12px;
      width: 22px;
      height: 22px;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      color: #FFF;
      background-color: #6705a1;
      border: 2px solid #ffcc00;
      font-family: arial, sans-serif;
      font-weight: bold;
      line-height: 24px;
  }
  
  #overlayContainer #overlayFrame #overlayClose:hover:after {
      background-color: #333;
  }
  
  #overlayContainer #overlayFrame #overlayClose:active:after {
      background-color: #AAA;
  }
  
  #overlayContainer.slide-up #overlayFrame {
      top: 100%;
  }
  
  #overlayContainer.slide-down #overlayFrame {
      top: -100%;
  }
  
  #overlayContainer.slide-right #overlayFrame {
      left: -100%;
  }
  
  #overlayContainer.slide-left #overlayFrame {
      left: 100%;
  }
  
  #overlayContainer.visible #overlayBackground {
      opacity: 1;
  }
  
  #overlayContainer.visible #overlayFrame {
      top: 0;
      left: 0;
  }