/*

    Droga5 Banner CSS
    Simon Abrams
    --------------------
    sabrams@droga5.com

*/

/* centers elements horizontally and vertically */
.center {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* centers elements horizontally */
.center-horiz {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto; }

/* centers elements vertically */
.center-vert {
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto; }

.border {
  z-index: 100;
  border: 1px solid rgba(0, 0, 0, 0.7);
  pointer-events: none; }


/**********  Utilities  ***********/
*, *:before, *:after {
  box-sizing: border-box; }

body {
  background-color: white;
  padding: 0;
  margin: 0; }

/* set the dimensions of your banner here */
.dimensions {
  width: 728px;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0; }

/*  apply this to initialize elements as hidden until they are needed.
    use 'autoAlpha:1' in GSAP to show hidden elements */
.hidden {
  visibility: hidden; }

.comp {
  background: url('../images/comp.jpg') no-repeat;
  opacity: 0.2;
  background-size: contain;
}

div {
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  }

.svg {
  background-size: contain;
}

/* main container element for banner */
.banner {
  overflow: hidden;
  cursor: pointer;
  background-color: white;
  transform: translate3d(0px, 0px, 0px);
  position: absolute;
  width: 728px;
  height: 90px;
  }

.banner .border {
  width: 728px;
  height: 90px; }

/* sets up main stage clickable area */
#hit {
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer; }

/**********  Banner Elements/Layout  ***********/
.brand-blue {
  color: #4093d0;
}

.bg {
  background-color: #fff; }

/* headline */
.headline {
  background-image: url("../images/headline.svg");
  width: 119px;
  height: 31px;
  left: 54px;
  top: 49px;
}

/*.comp {
  background-image: url("../images/comp.jpg");
  background-repeat: no-repeat;
  opacity: 0.2;
}*/

/* sprite animation holders */
.sprite-container {
  display: block;
  overflow: hidden;
}

/* super g logo */
.logo-container {
  width: 199px;
  height: 130px;
  top: -43px;
  left: 14px;
}

.logo {
  background-image: url('../images/super-g-sprite.png');
  width: 199px;
  height: 130px;
  -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

/* product image animation */
.product-container {
  /*background-image: url(images/); // link to product spritesheet*/
  width: 728px;
  height: 90px;
}

.product {
  position: absolute;
}
.phone-left {
  bottom: 0;
}

/* carrier logo (if any) */
.carrier-logo {
  background-image: url("../images/logo-verizon.svg");
  background-repeat: no-repeat;
  width: 58px;
  height: 23px;
  top: 34px;
  left: 515px;
}

/**********  CTA  ***********/
.cta-container {
  position: absolute;
  overflow: hidden;
  width: 83px;
  height: 24px;
  left: 389px;
  top: 32px;

  /* drop shadow */
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.25);
}

.cta-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #4285f4;
  border-radius: 1px;
}

.ripple-effect {
  position: absolute;
  background-color: #90CAF9;
  width: 100px;
  height: 100px;
  border-radius: 50% 50%;
}

.cta-label {
  position: absolute;
  background-image: url('../images/cta-label.svg');
  background-repeat: no-repeat;
  width: 54px;
  height: 8px;
}