.wcv_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1; }

.wcv_viewport_container {
  width: 100%;
  height: 450px;
  position: relative; }
  .wcv_viewport_container canvas {
    display: inline-block;
    vertical-align: baseline;
    cursor: -webkit-grab;
    cursor: grab; }
    .wcv_viewport_container canvas.grab {
      cursor: -webkit-grab;
      cursor: grab; }
    .wcv_viewport_container canvas.grabbing {
      cursor: -webkit-grabbing;
      cursor: grabbing; }
    .wcv_viewport_container canvas.pointer {
      cursor: pointer; }
  .wcv_viewport_container #wcb_screenshot {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none; }
    .wcv_viewport_container #wcb_screenshot .loader {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -32px;
      margin-top: -32px;
      display: none;
      z-index: 10;
      background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogICB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgPHBhdGggb3BhY2l0eT0iMC4yIiBmaWxsPSIjMDAwIiBkPSJNMjAuMjAxLDUuMTY5Yy04LjI1NCwwLTE0Ljk0Niw2LjY5Mi0xNC45NDYsMTQuOTQ2YzAsOC4yNTUsNi42OTIsMTQuOTQ2LDE0Ljk0NiwxNC45NDYNCiAgICBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNA0KICAgIGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6Ii8+DQogIDxwYXRoIGZpbGw9IiM2NjYiIGQ9Ik0yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDANCiAgICBDMjIuMzIsOC40ODEsMjQuMzAxLDkuMDU3LDI2LjAxMywxMC4wNDd6Ij4NCiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiDQogICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iDQogICAgICB0eXBlPSJyb3RhdGUiDQogICAgICBmcm9tPSIwIDIwIDIwIg0KICAgICAgdG89IjM2MCAyMCAyMCINCiAgICAgIGR1cj0iMC41cyINCiAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+DQogICAgPC9wYXRoPg0KICA8L3N2Zz4=);
      background-size: contain;
      background-repeat: no-repeat;
      width: 64px;
      height: 64px; }
    .wcv_viewport_container #wcb_screenshot:after {
      content: "";
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8); }
    .wcv_viewport_container #wcb_screenshot.hidden {
      width: 1px;
      height: 1px; }
    .wcv_viewport_container #wcb_screenshot.showing {
      width: 100%;
      height: 100%;
      display: block; }
      .wcv_viewport_container #wcb_screenshot.showing:after {
        display: block; }
      .wcv_viewport_container #wcb_screenshot.showing .loader {
        display: block; }
  .wcv_viewport_container .wcv_preloader {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #ededed; }
    .wcv_viewport_container .wcv_preloader .loader {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -32px;
      margin-top: -34px;
      background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQogICB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgPHBhdGggb3BhY2l0eT0iMC4yIiBmaWxsPSIjMDAwIiBkPSJNMjAuMjAxLDUuMTY5Yy04LjI1NCwwLTE0Ljk0Niw2LjY5Mi0xNC45NDYsMTQuOTQ2YzAsOC4yNTUsNi42OTIsMTQuOTQ2LDE0Ljk0NiwxNC45NDYNCiAgICBzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNA0KICAgIGMwLTYuNDI1LDUuMjA5LTExLjYzNCwxMS42MzQtMTEuNjM0YzYuNDI1LDAsMTEuNjMzLDUuMjA5LDExLjYzMywxMS42MzRDMzEuODM0LDI2LjU0MSwyNi42MjYsMzEuNzQ5LDIwLjIwMSwzMS43NDl6Ii8+DQogIDxwYXRoIGZpbGw9IiM2NjYiIGQ9Ik0yNi4wMTMsMTAuMDQ3bDEuNjU0LTIuODY2Yy0yLjE5OC0xLjI3Mi00Ljc0My0yLjAxMi03LjQ2Ni0yLjAxMmgwdjMuMzEyaDANCiAgICBDMjIuMzIsOC40ODEsMjQuMzAxLDkuMDU3LDI2LjAxMywxMC4wNDd6Ij4NCiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiDQogICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iDQogICAgICB0eXBlPSJyb3RhdGUiDQogICAgICBmcm9tPSIwIDIwIDIwIg0KICAgICAgdG89IjM2MCAyMCAyMCINCiAgICAgIGR1cj0iMC41cyINCiAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+DQogICAgPC9wYXRoPg0KICA8L3N2Zz4=);
      background-size: contain;
      width: 64px;
      height: 64px; }
    .wcv_viewport_container .wcv_preloader .percentage {
      width: 64px;
      height: 23px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -31px;
      margin-top: -12px;
      text-align: center;
      font-size: 12.5px;
      font-weight: bold;
      font-family: "Source Sans Pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      line-height: 1.618;
      text-rendering: optimizeLegibility;
      color: #666; }

.viewportframe {
  width: 100%;
  height: 450px; }