.banner {
  width:var(--width);
  height:var(--height);
  border:1px solid var(--primary);
  background:var(--white);
  overflow:hidden;
  box-sizing:border-box;
  font-family:var(--family);
}

.size {
  top:-1px;
  left:-1px;
  width:var(--width);
  height:var(--height);
}

.retina {
  background-size:contain !important;
  background-repeat:no-repeat !important;
}

#btn-exit {
  width:100%;
  height:100%;
  cursor:pointer;
  opacity:0;
}

#bg {
  background:url(../img/bg.jpg);
  opacity:1;
}

#img_mask {
  top:6px;
  left:6px;
}

.masks {
  width:208px;
  height:66px;
  overflow:hidden;
}

#text01 {
  background:url(../img/text01.png);
  opacity:0;
  top:15px;
}

#text02 {
  background:url(../img/text02.png);
  opacity:0;
  top:15px;
}

#text03 {
  background:url(../img/text03.png);
  opacity:0;
  top:15px;
}

#text04 {
  background:url(../img/text04.png);
  opacity:0;
  top:15px;
}

#text06{
  background:url(../img/text06.png);
  opacity:0;
  top:15px;
}

#text07{
  background:url(../img/text07.png);
  opacity:0;
  top:15px;
}

#text08{
  background:url(../img/text08.png);
  opacity:0;
  top:15px;
}

#text09{
  background:url(../img/text09.png);
  opacity:0;
  left:-15px;
}

#card{
  background:url(../img/card.png);
  opacity:0;
  top:15px;
}

#img01 {
  background:url(../img/img01.png);
}

#img02 {
  background:url(../img/img02.png);
  width:209px;
  top:9px;
  left:0px;
  opacity:0;
}

#img03 {
  background:url(../img/img03.png);
  width:209px;
  top:9px;
  left:0px;
  opacity:0;
}

#img04 {
  background:url(../img/img04.png);
  width:209px;
  top:9px;
  left:0px;
  opacity:0;
}

#cta {
  background:url(../img/cta.png);
  opacity:1;
}

#bar {
  background:url(../img/bar.png);
  opacity:1;
}

#shine{
  position:absolute;
  top:-1px;
  left:-228px;
  width:117%;
  height:117%;
  opacity:0;
  background:linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 80%);
}

#shine3{
  position: absolute;
  top: -2px;
  left: -250px;
  width: 117%;
  height: 117%;
  opacity: 1;
  background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 80%);
}

#logos {
  background:url(../img/logos.png);
  opacity:1;
}

#cardShine{
  width:118px;
  height:74px;
  left:11px;
  top:9px;
  overflow:hidden;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:0;
  opacity:.5;
}

#textshine{
  width: 175px;
  height: 14px;
  left: 147px;
  top: 6px;
  overflow: hidden;
}

#legend {
  bottom:12px;
  left:20px;
  height:20px;
}

#legend p {
  color:var(--primary);
  font-size:var(--base);
}

.black {
  color:var(--primary);
}