.adbro-tesco {
  position          : absolute;
  top               : 0;
  bottom            : 0;
  left              : 0;
  width             : 100%;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
  overflow          : hidden;
  margin            : 0 !important;
}

.adbro-tesco * {
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
}



.adbro-tesco__container {
  position   : absolute;
  bottom     : 0;
  left       : 50%;
  height     : 170px;
  margin     : 0 !important;
  margin-left: -219px !important;
  width      : 438px;
  max-width  : none !important;
  overflow   : hidden;
}

.adbro-tesco__bg {
  position         : absolute;
  bottom           : 0;
  left             : 0;
  width            : 100%;
  height           : 40px;
  background       : url(../images/tesco-bg.png) no-repeat left bottom;
  background-size  : contain;
  -webkit-animation: slideInUp24 0.5s 0.3s both;
  animation        : slideInUp24 0.5s 0.3s both;
  margin           : 0 !important;
}



.adbro-tesco__img {
  position           : absolute;
  margin             : 0 !important;
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : contain;
  overflow           : visible !important;

}

.adbro-tesco__img--1 {
  bottom           : 0px;
  left             : 50%;
  margin-left      : 29px !important;
  background-image : url("../images/tesco-img1.png");
  width            : 83px;
  height           : 58px;
  -webkit-animation: fadeInUp24 0.5s 0.9s both;
  animation        : fadeInUp24 0.5s 0.9s both;
}

.adbro-tesco__img--2 {
  bottom           : 0px;
  left             : 50%;
  margin-left      : 18px !important;
  background-image : url("../images/tesco-img2.png");
  width            : 104px;
  height           : 53px;
  -webkit-animation: fadeInUp24 0.5s 1s both;
  animation        : fadeInUp24 0.5s 1s both;
}



.adbro-tesco__text {
  position           : absolute;
  bottom             : 0px;
  left               : 50%;
  margin             : 0 !important;
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : contain;
  overflow           : visible !important;
}

.adbro-tesco__text--1 {
  bottom           : 24px;
  left             : 50%;
  margin-left      : -68px !important;
  background-image : url("../images/tesco-text1.png");
  width            : 86px;
  height           : 12px;
  -webkit-animation: fadeInDown24 0.5s 1s both;
  animation        : fadeInDown24 0.5s 1s both;
}

.adbro-tesco__text--2 {
  bottom           : 6px;
  left             : 50%;
  margin-left      : -86px !important;
  background-image : url("../images/tesco-text2.png");
  width            : 122px;
  height           : 13px;
  -webkit-animation: fadeInUp24 0.5s 1s both;
  animation        : fadeInUp24 0.5s 1s both;
}


.adbro-tesco__logo {
  position         : absolute;
  bottom           : 7px;
  left             : 50%;
  margin           : 0 !important;
  margin-left      : -152px !important;
  background       : url(../images/tesco-logo.png) no-repeat left bottom;
  background-size  : contain;
  width            : 51px;
  height           : 12px;
  -webkit-animation: fadeInLeft24 0.5s 0.7s both;
  animation        : fadeInLeft24 0.5s 0.7s both;
  overflow         : visible !important;
}

.adbro-tesco__btn {
  position         : absolute;
  bottom           : 7px;
  left             : 50%;
  margin           : 0 !important;
  margin-left      : 103px !important;
  background       : url(../images/tesco-btn.png) no-repeat left bottom;
  background-size  : contain;
  width            : 38px;
  height           : 12px;
  -webkit-animation: fadeInRight24 0.5s 0.7s both;
  animation        : fadeInRight24 0.5s 0.7s both;
  overflow         : visible !important;
}



.adbro-tesco__btn:after {
  content                          : '';
  position                         : absolute;
  top                              : 0;
  left                             : 50%;
  -webkit-transform                : translate(-50%, 0%);
  transform                        : translate(-50%, 0%);
  opacity                          : 0;
  background                       : linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 0) 100%);
  width                            : 25%;
  height                           : 100%;
  -webkit-animation                : shine24 2s 1s;
  animation                        : shine24 2s 1s;
  -webkit-animation-iteration-count: 7;
  animation-iteration-count        : 7
}


/* grid */
.adbro-grid .adbro-close {
  bottom : auto;
  top    : -3px;
  z-index: 2;
}

.adbro-grid {
  background     : radial-gradient(50% 50% at 50% 50%, #32BFB9 0%, #24A59F 100%) !important;
  background-size: cover;
  position       : relative;
}

.adbro-grid__list {
  display                          : block !important;
  padding                          : 23px 10px 50px !important;
  position                         : relative;
  -webkit-animation                : move27 1.8s 2s both;
  animation                        : move27 1.8s 2s both;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count        : 2;
}

@-webkit-keyframes move27 {
  50% {
    transform: translateY(-12%);
  }
}

@keyframes move27 {
  50% {
    transform: translateY(-12%);
  }
}

.adbro-grid__top {
  position  : absolute;
  top       : 0;
  right     : 0;
  margin    : 0 !important;
  background: url("../images/tesco-grid-top.png") no-repeat center / cover;
  width     : 49px;
  height    : 23px;
  z-index   : 1;
}






.adbro-grid__box {
  position   : relative;
  width      : 100%;
  display    : block !important;
  margin     : 10px 0 0 !important;
  perspective: 600px;
}

.adbro-grid__box:first-child {
  margin-top: 0 !important;
}

.adbro-grid__box--1 {
  padding-bottom: 50%;
}

.adbro-grid__box--2 {
  padding-bottom: 50%;
}

.adbro-grid__box--3 {
  padding-bottom: 50%;
}

.adbro-grid__scene {
  position               : absolute;
  top                    : 0;
  left                   : 0;
  margin                 : 0 !important;
  width                  : 100%;
  height                 : 100%;
  -webkit-transition     : transform .7s;
  transition             : transform .7s;
  -webkit-transform-style: preserve-3d;
  transform-style        : preserve-3d;
}

.adbro-grid__box--active .adbro-grid__scene {
  -webkit-transform: rotateY(180deg);
  transform        : rotateY(180deg);
}


.adbro-grid__img {
  position                         : absolute;
  left                             : 0;
  top                              : 0;
  width                            : 100%;
  height                           : 100%;
  margin                           : 0 !important;
  background-repeat                : no-repeat;
  background-position              : center;
  background-size                  : contain;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count        : 2;
  cursor                           : pointer;
  -webkit-transition               : opacity .3s, visibility .3s;
  transition                       : opacity .3s, visibility .3s;
  -webkit-backface-visibility      : hidden;
  backface-visibility              : hidden;
}



.adbro-grid__img--back {
  opacity          : 0;
  visibility       : hidden;
  -webkit-transform: rotateY(180deg);
  transform        : rotateY(180deg);
}

.adbro-grid__box--active .adbro-grid__img--back {
  opacity   : 1;
  visibility: visible;
}

.adbro-grid__box--active .adbro-grid__img--front {
  opacity   : 0;
  visibility: hidden;
}

.adbro-grid__box--1 .adbro-grid__img--front {
  background-image: url(../images/tesco-grid-img1-front.png);

}

.adbro-grid__box--1 .adbro-grid__img--back {
  background-image: url(../images/tesco-grid-img1-back.png);

}

.adbro-grid__box--2 .adbro-grid__img--front {
  background-image: url(../images/tesco-grid-img2-front.png);

}

.adbro-grid__box--2 .adbro-grid__img--back {
  background-image: url(../images/tesco-grid-img2-back.png);

}

.adbro-grid__box--3 .adbro-grid__img--front {
  background-image: url(../images/tesco-grid-img3-front.png);

}

.adbro-grid__box--3 .adbro-grid__img--back {
  background-image: url(../images/tesco-grid-img3-back.png);

}





.adbro-grid__line {
  background: #DB3832;
}

.adbro-grid__btn {
  background-image: url(../images/tesco-grid-btn.png);
}




.adbro-grid__icon {
  display : block !important;
  margin  : 0 !important;
  position: absolute;
  bottom  : -5px;
  right   : -5px;
  width   : 40px;
  height  : 40px;
  cursor  : pointer;
  overflow: visible !important;
}

.adbro-grid__box--1 .adbro-grid__icon:before {
  content      : '';
  position     : absolute;
  top          : -4px;
  left         : -4px;
  width        : 46px;
  height       : 46px;
  border-radius: 50%;
  background   : radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
  opacity      : 0.5;
}

.adbro-grid__box--1 .adbro-grid__icon:before {
  -webkit-animation                : flash27 2s 1s both;
  animation                        : flash27 2s 1s both;
  -webkit-animation-iteration-count: 10;
  animation-iteration-count        : 10;
}

.adbro-grid__box--active .adbro-grid__icon:before {
  -webkit-animation: none;
  animation        : none;
  opacity          : 0;
}

@-webkit-keyframes flash27 {
  from {
    opacity          : 0;
    -webkit-transform: scale(0);
    transform        : scale(0);
  }

  50% {
    opacity          : 0.5;
    -webkit-transform: scale(1);
    transform        : scale(1);
  }

  to {
    opacity: 0;
  }
}

@keyframes flash27 {
  from {
    opacity          : 0;
    -webkit-transform: scale(0);
    transform        : scale(0);
  }

  50% {
    opacity          : 0.5;
    -webkit-transform: scale(1);
    transform        : scale(1);
  }

  to {
    opacity: 0;
  }
}

.adbro-grid__icon svg {
  position   : absolute;
  top        : 50%;
  left       : 50%;
  margin     : 0 !important;
  margin-top : -11px !important;
  margin-left: -11px !important;


  fill              : #000;
  -webkit-transition: transform .4s;
  transition        : transform .4s;
}

.adbro-grid__box--active .adbro-grid__icon svg {
  fill             : #000;
  -webkit-transform: rotate(45deg);
  transform        : rotate(45deg);
}



.adbro-grid__arrow {
  position   : absolute;
  bottom     : 40px;
  left       : 50%;
  margin     : 0 !important;
  margin-left: -12px !important;
  background : url(../images/tesco-arrow.png) no-repeat left bottom / contain;

  width            : 24px;
  height           : 30px;
  -webkit-animation: fadeIn24 .5s 5s both;
  animation        : fadeIn24 .5s 5s both;
}






.adbro-link {
  display : block;
  position: absolute;
  bottom  : 0;
  left    : 0;
  right   : 0;
  height  : 100px;
  margin  : 0 !important;
  cursor  : pointer;
}

.adbro-close {
  position         : absolute;
  bottom           : 35px;
  right            : 0;
  background       : url(https://cdn.adbro.me/inimage/images/adbro-close.svg) no-repeat 50% 50%;
  background-size  : 18px 18px;
  width            : 30px;
  height           : 30px;
  margin           : 0 !important;
  -webkit-animation: fadeIn24 1s .4s both;
  animation        : fadeIn24 1s .4s both;
  cursor           : pointer;
  z-index          : 1;
}

.adbro-icon {
  position         : absolute;
  bottom           : 6px;
  right            : 4px;
  background       : url(https://cdn.adbro.me/inimage/images/adbro-icon2.svg) no-repeat 50% 50%;
  background-size  : 100% 100%;
  width            : 21px;
  height           : 20px;
  margin           : 0 !important;
  -webkit-animation: fadeIn24 1s .4s both;
  animation        : fadeIn24 1s .4s both;
  cursor           : pointer;
  z-index          : 1;
}

@-webkit-keyframes fadeIn24 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn24 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



@-webkit-keyframes fadeInRight24 {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform        : translate3d(50%, 0, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@keyframes fadeInRight24 {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform        : translate3d(50%, 0, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@-webkit-keyframes fadeInUp24 {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform        : translate3d(0, 50%, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@keyframes fadeInUp24 {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform        : translate3d(0, 50%, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@-webkit-keyframes fadeInDown24 {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform        : translate3d(0, -50%, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@keyframes fadeInDown24 {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform        : translate3d(0, -50%, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@-webkit-keyframes slideInUp24 {
  from {
    -webkit-transform: translate3d(0, 200%, 0);
    transform        : translate3d(0, 200%, 0);
    visibility       : visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform        : translate3d(0, 0, 0);
  }
}

@keyframes slideInUp24 {
  from {
    -webkit-transform: translate3d(0, 200%, 0);
    transform        : translate3d(0, 200%, 0);
    visibility       : visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform        : translate3d(0, 0, 0);
  }
}


@-webkit-keyframes fadeInLeft24 {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform        : translate3d(-50%, 0, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@keyframes fadeInLeft24 {
  from {
    opacity          : 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform        : translate3d(-50%, 0, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: none;
    transform        : none;
  }
}

@-webkit-keyframes shine24 {
  0% {
    left   : 0;
    opacity: 0
  }

  5% {
    opacity: 0
  }

  50% {
    opacity: .3
  }

  80% {
    opacity: 0
  }

  100% {
    left: 99%
  }
}

@keyframes shine24 {
  0% {
    left   : 0;
    opacity: 0
  }

  5% {
    opacity: 0
  }

  50% {
    opacity: .3
  }

  80% {
    opacity: 0
  }

  100% {
    left: 99%
  }

}