.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;  
}

#box {
  opacity: 1;
  width: 283px;
  height: 128px;
  left: 4px;
  top: 3px;
  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;
}

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

#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;
  top: 15px;
}

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

#img01 {
  background: url(../img/img01.jpg);
  opacity: 1;
  width: 291px;
  width: 283px;
  top: 8px;
  left: 7px;
}

#img02 {
  background: url(../img/img02.jpg);
  opacity: 0;
  left: 309px;
  width: 241px;
  top: 7px;
}

#img03 {
  background: url(../img/img03.jpg);
  opacity: 0;
  left: 562px;
  width: 241px;
  top: 7px;
}

#img04 {
  background: url(../img/img04.jpg);
  opacity: 0;
  left: 562px;
  top: 10px;
  width: 278px;
}

#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: -114px;
  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: 83px;
  height: 51px;
  left: 10px;
  top: 63px;
  overflow: hidden;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 0;
  opacity: .5;
}

#textshine{
  width: 109px;
  height: 16px;
  left: 11px;
  top: 133px;
  overflow: hidden;
}

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

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

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