#banner {
  width: 728px;
  height: 90px;
  position: absolute;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid #000;
  opacity: 1;
  z-index: 800;
  background-color: #00adc6;
}

#banner img,
#banner div {
  position: absolute;
  opacity: 1;
}

#banner #terms,
#banner #terms #termsImage,
#banner #cta,
#banner #FrameOne #imageCover {
  opacity: 0;
  width: 728px;
  height: 90px;
  right: 0px;
}

#banner #FrameOne #imageGirl {
  opacity: 0;
  width: 728px;
  height: 90px;
  right: 40px;
}


#banner #FrameOne #switchShape {
  opacity: 0;
  width: 728px;
  height: 90px;
  right: 15px;
}

#banner #FrameOne {
  opacity: 0;
  width: 728px;
  height: 130px;
  right: 0px;
}

#banner #IntroLogo {
  opacity: 0;
  width: 720px;
  height: 130px;
  right: 0px;
     top: -20px;
}


#banner #IntroLogo {
  z-index: 900;
}

#banner #IntroLogo #IntroLogoA,
#banner #IntroLogo #IntroLogoB {
  opacity: 1;
  width: 100%;
  height: 100%;
  right: 0px;
}

#banner #IntroLogo #IntroLogoA {
  clip: rect(0px, 720px, 130px, 331px); /*(top, right, bottom, left) */
}

#banner #IntroLogo #logoCover {
  background-color: #00adc6;
  left: 130px;
  top: 20px;
  width: 200px;
  height: 120px;
}

#banner #IntroLogo #IntroLogoB {
  clip: rect(0px, 331px, 130px, 0px); /*(top, right, bottom, left) */
}

#banner #FrameOne #imageBackground {
  opacity: 0;
  width: 1070px;
  height: 250px;
  right: 0px;
}

/* copy */
#banner #FrameOne #FrameCopy {
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0px;
    right: 12px;
  clip-path: polygon(0 0, 58% 0, 49% 100%, 0% 100%);
}

/* Banner main copy pos*/
#banner #FrameOne #FrameCopy #copyFr1a,
#banner #FrameOne #FrameCopy #copyFr1b,
#banner #FrameOne #FrameCopy #copyFr2a,
#banner #FrameOne #FrameCopy #copyFr2b,
#banner #FrameOne #FrameCopy #copyFr3a,
#banner #FrameOne #FrameCopy #copyFr3b {
  width: 728px;
  height: 90px;
  right: 0px;
}

#banner #FrameOne #FrameCopy #copyFr1a {
  clip: rect(0px, 728px, 45px, 0px); /*(top, right, bottom, left) */
}

#banner #FrameOne #FrameCopy #copyFr1b {
  clip: rect(45px, 728px, 90px, 0px); /*(top, right, bottom, left) */
}

#banner #FrameOne #FrameCopy #copyFr2a {
  clip: rect(0px, 728px, 45px, 0px); /*(top, right, bottom, left) */
}

#banner #FrameOne #FrameCopy #copyFr2b {
  clip: rect(45px, 728px, 90px, 0px); /*(top, right, bottom, left) */
}

#banner #FrameOne #FrameCopy #copyFr3a {
  clip: rect(0px, 728px, 55px, 0px); /*(top, right, bottom, left) */
}

#banner #FrameOne #FrameCopy #copyFr3b {
  clip: rect(55px, 728px, 90px, 0px); /*(top, right, bottom, left) */
}


/*haut*/
#banner #FrameOne #switchCover1 {
  top: -15px;
  left: 0px;
  width: 728px;
  height: 30px;
  background-color: #00adc6;
  opacity: 1;
}

/*bas*/
#banner #FrameOne #switchCover2 {
    top: 75px;
  left: 0px;
  width: 728px;
  height: 30px;
  background-color: #00adc6;
  opacity: 1;
    }

 /*droite*/
#banner #FrameOne #switchCover3 {
    height: 600px;
  width: 600px;
  transform: rotate(37deg);
  top: -111px;
  left: 368px;
background-color: #00adc6;
  opacity: 1;
    }

 /*gauche*/
#banner #FrameOne #switchCover4 {
  height: 600px;
  width: 600px;
  transform: rotate(37deg);
   top: -252px;
  left: -300px;
background-color: #00adc6;
  opacity: 1;
}

#banner #FrameOne #imageCover {
  background-color: #00adc6;
  opacity: 1;
}

#banner #terms {
  cursor: pointer;
  background-color: #fff;
  bottom: -180px;
}

/* loader*/
#banner #loading {
  left:50%; top:50%; width:24px; height:24px; margin-left:-16px; margin-top:-16px; opacity:1;
  border:4px rgba(0,0,0,.1) solid; border-top:4px grey solid; border-radius:30px; animation:spCircRot .8s infinite linear;
  -webkit-border:4px rgba(0,0,0,.1) solid; -webkit-border-top:4px white solid; -webkit-border-radius:30px; -webkit-animation:spCircRot .8s infinite linear;
  -moz-border:4px rgba(0,0,0,.1) solid; -moz-border-top:4px white solid; -moz-border-radius:30px; -moz-animation:spCircRot .8s infinite linear;
}

@keyframes spCircRot { from {transform: rotate(0deg);} to {transform: rotate(359deg);} }
@-moz-keyframes spCircRot { from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(359deg);} }
@-webkit-keyframes spCircRot { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} }

#banner #bgexit1 {
  opacity: 0;
  cursor: pointer;
  z-index: 902;
  background-color: #333;
  width: 100%;
  height: 100%;
  right: 0px;
}

#banner #termsButton {
  cursor: pointer;
  z-index: 903;
  width: 143px;
  height: 25px;
  bottom: 13px;
  left: 193px;
}