/* Banner variables */
:root {
  --banner-width: 300px;
  --banner-height: 600px;
  --border-color: #ffffff;
}

* {
  padding: 0;
  margin: 0;
}

#main_container {
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main_content {
  background-size: cover;
  position: relative;
  margin: 0 auto;
}

.bannerSize {
  width: var(--banner-width);
  height: var(--banner-height);
}

/* -- REQUIRED Momentum Rules -- */
.white {fill: #FFF;}
.blue {fill: #003B9C;}
.hide {display: none;}
.op-0 {opacity: 0;}
.absolute {position: absolute;}
/* -- */

#brand{
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
}

#default_exit {
  z-index: 200;
}

#banner {
  overflow: hidden;
  background: rgb(28,35,50);
  background: linear-gradient(216deg, rgba(28,35,50,1) 0%, rgba(4,4,4,1) 100%);
}

#banner,
#default_exit,
.border,
#particles-js,
.text,
.art,
.container-art-end,
.container-art1,
.container-art2 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--banner-width);
  height: var(--banner-height);
  cursor: pointer;
}

.border {
  width: calc(var(--banner-width) - 2px);
  height: calc(var(--banner-height) - 2px);
  right: 0;
  margin: auto;
    opacity: 1;
  border: 1px solid var(--border-color);
  position: absolute;
  z-index: 100;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  /* -webkit-backface-visibility: hidden; */
  /* -ms-transform: translateZ(0); */
  /* IE 9 */
  /* -webkit-transform: translateZ(0); */
  /* Chrome, Safari, Opera */
  /* transform: translateZ(0); */
}

.bg {
  opacity: 0;
}

.logo,
.message,
.cta {
  transform: scale(0.6);
}