/* Because the content of this AD-Unit should fill the entire window, we never want to show scroll bars */
html{
  overflow: hidden;
}

  div#centerTable{
    display: table;
    border-spacing: 0;
    padding:0;
    width:100%;
    height:100%;
  }
  div#centerTableRow{
    display: table-row;
  }
  div#centerTableCell{
    display: table-cell;
    vertical-align: middle;
    padding:0;
  }

  /* Reset styles when constrainUnit param is false */
  .unconstrained #centerTable, .unconstrained #centerTableRow, .unconstrained #centerTableCell {
    display: block;
  }
  .unconstrained #centerTable.fs{
    position: static;
  }
  
  div#adContainer {
    background-position: 0 0;
    background-repeat: no-repeat;
    width:100%;
  }
  #header{
    position: absolute;
    width: 100%;
  }   
  #title {
    text-align: center;
    color: black;
    margin: 0;
    padding: 1em;
    word-wrap: break-word;
    font-size: 1.2em;
    padding: .2em;
  }
  #sponsored {
    display: none;
    margin: 0 0 .5em;
    text-align: right;
    position: absolute;
    left:4px;
    top:4px;
  }
  #sponsored.show {
    display: block;
  }
  #shareContainer {
    border-radius: 5px;
    display: none;
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 44px;
    height: 189px;
    z-index: 1000;
  }
  #shareContainer.show {
    display: block;
  }
  #shareContainer ul {
    margin: 0;
    padding: 0;
  }
    #shareContainer li {
      display: block;
      list-style: none;
      padding: 0;
    }
      #shareContainer li a{
          display:block;
          height:45px;
          width:44px;
          overflow:hidden;
          margin-bottom:3px;
          background-size:cover;
          -webkit-transform-origin:right center;
             -moz-transform-origin:right center;
              -ms-transform-origin:right center;
               -o-transform-origin:right center;
                  transform-origin:right center;
          -webkit-transition:-webkit-transform ease .2s;
             -moz-transition:   -moz-transform ease .2s;
               -o-transition:     -o-transform ease .2s;
                  transition:        transform ease .2s;
      }

      .no-touch #shareContainer li a:hover {
        -webkit-transform:scale(1.15,1.15);
           -moz-transform:scale(1.15,1.15);
            -ms-transform:scale(1.15,1.15);
             -o-transform:scale(1.15,1.15);
                transform:scale(1.15,1.15);

        cursor: pointer;
      }

      .facebook {          
        background: url('facebook-button.jpg') no-repeat;
      }
      .twitter {
        background: url('twitter-button.jpg') no-repeat;
      }
      .link{
        background: url('link-button.jpg') no-repeat;
      }
      .info{
        background: url('info-button.jpg') no-repeat;
      }
  #adWrapper {
    padding: 0;
    position: relative;
  }
  #vidWrapper {
    display: none;
    position:relative;
    width:100%;
  }
  #vidWrapper.aspect-ratio {
    padding-top: 56.25%;
  }
  .image-only #vidWrapper.aspect-ratio {
    padding-top: 0;
  }
  #vidWrapper.show {
    display: block;
  }
  .description #metaData{
    position: absolute;
    bottom:0;
    padding: 8px;
    box-sizing: border-box;
    z-index: 999;
    width: 100%;
    /* uncomment this line to prevent the title and description from intercepting clicks on the ad-unit content */
    /*pointer-events:none;*/
    background: #000;
    background: rgba(0,0,0,0.80);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.65);
  }

  .description #metaData a {
      color: white;
  }

  #description{
    display: none;
  }

  /* Description Overlay Styles */
  .description #description{
    display: block;
    padding: 0;
    margin: 0;
    color: #FFF;
    padding: 0;
    font-size: 0.8em;
  }

  .description #title, .description div.wide #title, .description div.wide.medium #title{
    text-align: left;
    color: #FFF;
    padding: 0;
    font-size: 1.4em;
  }

  .description #header, .description div.wide #header{
    position: static;
    background: none;
    width:auto;
  }

  #spacer{
    display: none;
  }

  .description #spacer{
    display: block;
    float: right;
    width: 35px;
    height: 34px;
  }

  /* End description overlay styles */

  #ad {
    position:absolute;
    top:0;
    left:0;
    width:100%!important;
    height:100%!important; 
  }
  #adImage {
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background-size: cover;
    background-position: 50% 50%;
  }
  #vidWrapper.aspect-ratio #adImage {
    padding-top: 56.25%;
  }
  #adContainer .expand {
    width: 100%;
    height:100%;
  }
  div#agePanelContainer {
    padding: 1em 0 3em;
    position: static;
    width: 100%;
  }
    #agePanelContainer h2 {
      font-weight: normal;
    }
#url {
  position: relative;
}
#shareContainer #urlInput {
  border: 1px solid #CCC;
  display: none;
  height: 25px;
  box-sizing: border-box;
  padding: 3px;
  right: 55px;
  position: absolute;
  top: 0;
  bottom:0;
  margin:auto;
  width: 200px;
  z-index: 1000;
}
#shareContainer #urlInput.show {
  display: block;
}
#shareContainer #urlInput.hide {
  display: none;
}

#player{
  display:block;
  height: 100%;
  position: absolute;
}

.fs{
  position: absolute;
  left:0;right:0;bottom:0;top:0;
  margin:auto;
}

    /* Wide Unit Specific Values */
    div.wide #vidWrapper.aspect-ratio, div.wide #vidWrapper.aspect-ratio #adImage{
      padding: 0;
    }

    div.wide.sponsored #vidWrapper{
      border: 1px solid #CCC;
      border-bottom: none;
    }
    div.wide.sponsored #centerTableCell{
      vertical-align: bottom;
    }
    div.ageGate#centerTableCell{
      vertical-align: middle;
    }

    /* Show placement title with black background and white text on top of player */
    div.wide #header, .unconstrained #header {
      background-color: #000;
      background-color: rgba(0,0,0, 0.8);
      position: absolute;
      top:0;
      width: 100%;
      z-index: 1000;
    } 

    div.wide #title, .unconstrained #title {
        text-align: left;
        color: #FFF;
        font-size: .8em;
        padding: .6em; 
    }

    div.wide #metaData a, .unconstrained #metaData a{
      color: white;
    }

    /* Mimics Medium Responsive Breakpoint when Player's width is beneath the threshold */
    div.wide.medium #sponsored {
      font-size: .7em;
      font-weight: normal;
      text-align: left;
    }
    div.wide.medium #title {
      font-size: .8em;
      padding: .6em;
    }
    div.wide.medium #shareContainer{
      right: 3px;
      width: 34px;
      height: 146px;
    }
    div.wide.medium #shareContainer li {
      display: block;
    }
    div.wide.medium #shareContainer li a {
      height: 35px;
      width: 34px;
      background-size: contain;
      margin-bottom: 2px;
    }
    div.wide.medium #shareContainer #urlInput {
      height: 25px;
      left: -215px;
    }
    div.wide.medium #adWrapper {
      position: relative;
      width: 100%;
    }
    div.wide.medium #agePanelContainer {
      padding-top: 2em;
      position: static;
    }
    div.wide.medium #agePanelContent {
      margin-top: 0;
      width: 80%;
    }   

    /* Mimics Small Responsive Breakpoint when Player's width is beneath the threshold */
    div.wide.small #shareContainer{
      right: 3px;
      top: 0;
      width: 24px;
      height: 102px;
    }
    div.wide.small #shareContainer li a {
      height: 24px;
      width: 24px;
      background-size: 100%;
      margin-bottom: 2px;
    }

    /* End Wide Unit Specific Values */

@media screen and (max-width: 520px) {
  #sponsored {
    font-size: .7em;
    font-weight: normal;
    text-align: left;
  }
  #title {
    font-size: 0.9em;
    padding: .2em;
  }
  #shareContainer{
    right: 3px;
    width: 34px;
    height: 146px;
  }
  #shareContainer li {
    display: block;
  }
  #shareContainer li a {
    height: 35px;
    width: 34px;
    background-size: contain;
    margin-bottom: 2px;
  }
  #shareContainer #urlInput {
    height: 25px;
    left: -215px;
  }
  #adWrapper {
    position: relative;
    width: 100%;
  }
  #agePanelContainer {
    padding-top: 2em;
    position: static;
  }
  #agePanelContent {
    margin-top: 0;
    width: 80%;
  }

  .description #title, .description div.wide #title, .description div.wide.medium #title{
    font-size: 1em;
  }

  .description #description{
    font-size: 0.7em;
  }
}

/* REALLY small players! */
@media screen and (max-width: 380px) {
  .description #description{
    display: none;
  }

  .description #metaData{
    padding:4px;
  }

  .description #spacer{
    display: none;
  }
  #shareContainer{
    right: 3px;
    top: 0;
    width: 24px;
    height: 102px;
  }
  #shareContainer li a {
    height: 24px;
    width: 24px;
    background-size: 100%;
    margin-bottom: 2px;
  }
}