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

  #container, .overlay {
    text-align: center;
    width: 300px;
    height: 600px;
    overflow: hidden;
    position: relative;
    background-color: #f2f0ee;
    background-repeat: repeat-x;
    cursor: pointer;
  }

  .overlay {
    z-index: 99;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  
    
    /* end presetation css */
    @font-face {
      font-family: 'Retina Narrow';
      src: url("https://www.wsj.com/fonts/woffs/retina/RetinaNarr-Book.woff2");
      font-weight: 400;
    }
    
    .borderLayer,
    .container {
      width: 300px;
      height: 600px;
      display: block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      min-width: 300px;
    }
    
    .borderLayer {
      position: absolute;
      border: 1px solid #cccccc;
      top: 0px;
      left: 0px;
      z-index: 9999;
    }
    
    /* .blurOutEffect {
      filter: blur(40);
      animation: blurAnimation 3.75s;
    }
    
    @keyframes blurAnimation {
      0% {
        filter: blur(0);
      }
      100% {
        filter: blur(18px);
      }
    } */
    
    .contain {
      width: 300px;
      height: 600px;
      display: block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: transparent;
      perspective: 1000px;
      transform-style: preserve-3d;
    }
    
    .contain .background-colors {
      width: 300px;
      height: 600px;
      z-index: -1;
      background-image: url('../img/bg.jpg');
      background-size: contain ;
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: transparent;
    }

    .contain .lockup {
      width: 120px;
      height: 114px;
      z-index: 0;
      background-image: url('../img/lockup.png');
      background-size: contain ;
      position: absolute;
      top: 12px;
      left: 90px;
      background-color: transparent;
    }
    .contain .lockup.sponsor {
      height: 100%;
      width: 970px;
      background-image: url('../img/sponsor.png');
      top: 0px;
      left: -6px;
    }

    .contain .copy{
      position: absolute;
      width: 300px;
      height: 0px;
      z-index: 10;
      top: -10px;
      left: 0px;
      background-color: transparent;
      overflow: hidden;
      display: block;
    }
    .contain #copy1.copy { 
      opacity: 0;
      height: 600px;
    }
    .contain #copy1.copy1a { 
      left: -53px
    }
    .contain #copy1.copy1c { 
      left: 53px;
    }
    .contain .copy img{
      width: 300px;
      height: 600px;
      z-index: 10;
      background-color: transparent;
      overflow: hidden;
      display: block;
    }
    



    #clickLayer .ctaPlace {
      position: absolute;
      top: 495px;
      left: 95px;
      z-index: 10000;
    }

    #clickLayer button.zoom {
      padding: 4px;
      background-color: #0b8a00;
      transition: background-color .4s;
      width: 110px;
      height: 48px;
      /* letter-spacing: 0.05em; */
      border: none;
      z-index: 5000;
      opacity: 0;
      font-family: 'Retina Narrow','Retina',sans-serif;
      font-size: 18.5px;
      color: #ffffff;
      font-weight: 400;
      text-align: center;
      text-transform: uppercase;
      cursor: pointer;
    }
    
    #clickLayer button.zoom svg {
      width: 14px;
    }
    
    #clickLayer button.zoom svg polygon {
      fill: #fff;
      stroke-width: 1px;
      stroke: #000;
      transform: translateY(3.25px);
    }
    
    #clickLayer:hover button.zoom {
      background-color: #000;
    }