*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
  width: 100%;
}

/* Invisible button for background clickthrough. */
#background_exit_dc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	cursor: pointer;
	background-color: aqua;
	opacity: 0;
	z-index: 1299;
}

.banner-class {
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  height: 600px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

.banner-class .border {
    border: 1px solid #ccc;
    display: block;
    height: 600px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 300px;
    z-index: 999;
}

.banner-class.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.preloader {
  background: #fff;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}

  .preloader .circle {
    -webkit-animation: spin 0.5s linear infinite;
            animation: spin 0.5s linear infinite;
    border: 5px solid #ddd;
    border-bottom-color: #333;
    border-radius: 50%;
    height: 40px;
    left: 50%;
    margin-left: -22.5px;
    margin-top: -22.5px;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    width: 40px;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    }
}