html, body{
  border:0;
  margin:0;
  padding:0;
}

.banner{
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  overflow:hidden;
  cursor: pointer;
}

body.size_300x250{
  width: 300px;
  height: 250px;
}
body.size_300x600{
  width: 300px;
  height: 600px;
}
body.size_728x90{
  width: 728px;
  height: 90px;
}
body.size_160x600{
  width: 160px;
  height: 600px;
}
body.size_970x250{
  width: 970px;
  height: 250px;
}
body.size_320x50{
  width: 320px;
  height: 50px;
}
body.size_300x50{
  width: 300px;
  height: 50px;
}
body.size_1080x1080{
  width: 1080px;
  height: 1080px;
}
body.size_1080x1920{
  width: 1080px;
  height: 1920px;
}
body.size_1920x1080{
  width: 1920px;
  height: 1080px;
}

.banner.size_300x250{
  width: 300px;
  height: 250px;
}
.banner.size_300x600{
  width: 300px;
  height: 600px;
}
.banner.size_728x90{
  width: 728px;
  height: 90px;
}
.banner.size_160x600{
  width: 160px;
  height: 600px;
}
.banner.size_970x250{
  width: 970px;
  height: 250px;
}
.banner.size_320x50{
  width: 320px;
  height: 50px;
}
.banner.size_300x50{
  width: 300px;
  height: 50px;
}
.banner.size_1080x1080{
  width: 1080px;
  height: 1080px;
}
.banner.size_1080x1920{
  width: 1080px;
  height: 1920x;
}
.banner.size_1920x1080{
  width: 1920px;
  height: 1080px;
}

.banner.size_300x250 .bannerSize, .banner.size_300x250 .banner_content{
  width: 300px;
  height: 250px;
  /*overflow:hidden;*/
}
.banner.size_300x600 .bannerSize, .banner.size_300x600 .banner_content{
  width: 300px;
  height: 600px;
  /*overflow:hidden;*/
}
.banner.size_728x90 .bannerSize, .banner.size_728x90 .banner_content{
  width: 728px;
  height: 90px;
  /*overflow:hidden;*/
}
.banner.size_160x600 .bannerSize, .banner.size_160x600 .banner_content{
  width: 160px;
  height: 600px;
  /*overflow:hidden;*/
}
.banner.size_970x250 .bannerSize, .banner.size_970x250 .banner_content{
  width: 970px;
  height: 250px;
  /*overflow:hidden;*/
}
.banner.size_320x50 .bannerSize, .banner.size_320x50 .banner_content{
  width: 320px;
  height: 50px;
  /*overflow:hidden;*/
}
.banner.size_300x50 .bannerSize, .banner.size_300x50 .banner_content{
  width: 300px;
  height: 50px;
  /*overflow:hidden;*/
}
.banner.size_1080x1080 .bannerSize, .banner.size_1080x1080 .banner_content{
  width: 1080px;
  height: 1080px;
  /*overflow:hidden;*/
}
.banner.size_1080x1920 .bannerSize, .banner.size_1080x1920 .banner_content{
  width: 1080px;
  height: 1920px;
  /*overflow:hidden;*/
}
.banner.size_1920x1080 .bannerSize, .banner.size_1920x1080 .banner_content{
  width: 1920px;
  height: 1080px;
  /*overflow:hidden;*/
}

.half-size{
  transform: scale(0.5);
  transform-origin: 0 0;
 }


.bannerSize{
  position: absolute;
  top:0px;
  left: 0px;
}

.banner_content{
  width:100%;
  height:100%;
}


.banner .slide_left_fade{
  opacity:0;
}

.banner_content{
  position: absolute;
  top:0px;
  left: 0px;
  
}

.transition{
  position:absolute;
  visibility: hidden;
}




/*=== LEGAL | debut ============================*/
.legal-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  opacity: 0;
  cursor: pointer;
  z-index: 999;
  -webkit-transform: translate3d(-1px,100%,0);
  -webkit-transition: opacity .5s ease;
  -moz-transition:    opacity .5s ease;
  -o-transition:      opacity .5s ease;
  -ms-transition:     opacity .5s ease;
  transition:         opacity .5s ease;
  visibility:hidden
}
.legal-bg.legal-active {
  opacity: 1;
  -webkit-transform: translate3d(-1px,0,0);
  -webkit-transition: opacity .5s ease;
  -moz-transition:    opacity .5s ease;
  -o-transition:      opacity .5s ease;
  -ms-transition:     opacity .5s ease;
  transition:         opacity .5s ease;
  visibility:visible;
}
.legal {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: auto;
  font-family: helvetica, arial, sans-serif;
  color: #707070;
  z-index: 999;
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform .5s ease;
}
.legal.legal-active {
  -webkit-transform: translate3d(0,-100%,0);
}
.legal-btn {
  position: absolute;
  top: -22px;
  left: 0;
  height: 25px;
  background: #f0f0f0;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  padding-top:2px;
  padding-left:6px;
  padding-right:6px;
}
.legal-btn.legal-right{
  right: 0;
  left: auto;
}
.legal-text {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  max-height: 300px;
  background: #f0f0f0;
  font-size: 10px;
  line-height:11px;
  text-align: justify;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  color: #707070;
}

.banner.size_300x250 .legal-text{
  max-height: 210px;
}
/*=== LEGAL | fin ============================*/

.banner_click{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:999;
}

.cta_bounds{
  position: absolute;
  top:0;
  left:0;
  background-color:rgba(0, 255, 200, 0.5);
  border:solid 2px #a8ffe8;
  width:300px;
  height: 250px;
  z-index:999;
}

.corners{
  display: block;
  position: absolute;
  height: 10px;
  width: 10px;
  background: #00b081;
}

.bottomRight {
  right: 0;
  bottom: 0;
}

.bottomLeft {
  left: 0;
  bottom: 0;
}

.topLeft {
  left: 0;
  top: 0;
}

.topRight {
  right: 0;
  top: 0;
}

.top {
  height: 2px;
  width: 100%;
  background: #00ffbb;
}

.left {
  height: 100%;
  width: 2px;
  background: #00ffbb;
  left: 0;
}

.right {
  height: 100%;
  width: 2px;
  background: #00ffbb;
  right: 0;
}

.bottom {
  height: 2px;
  width: 100%;
  background: #00ffbb;
  bottom: 0;
}

.bounds_actions{
  position: absolute;
  top:10px;
  right:10px;
  z-index: 99999;
}

.bounds_actions svg{
  width: 1.5rem;
  height: 1.5rem;
}

.cta_rect{
  position: absolute;
  top:0;
  left:0;
  width: 300px;
  height: 250px;
  background-color: rgba(0, 255, 200, 0);
  border:solid 2px #a8ffe8;
  z-index: 999;
  opacity: 0;
}