.videogallery {
  .gallery-buttons {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1006;
  }

  .embed-button {
    position: absolute;
    right: 10px;
    top: 10px;


    .handle {
      background-color: rgba(0, 0, 0, .5);
      height: 40px;
      width: 40px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 3px;
      box-shadow: 0 0 1px 0 rgba(0, 0, 0, 1);
      cursor: pointer;
      position: relative;

      opacity: .7;


      $transition-property: opacity;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);


      svg {
        width: 18px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        margin-left: -2px;


        path {
          fill: #fff;


        }
      }
    }

    .handle:hover {
      opacity: 1;
    }

    .contentbox {
      background: no-repeat scroll center center rgba(0, 0, 0, 0.7);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 0 1px 0 #000000;
      height: 150px;
      position: absolute;
      right: 60px;
      top: 0;
      width: 300px;
    }

    .contentbox:after {
      content: " ";
      position: absolute;
      top: 12px;
      left: 299px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid rgba(0, 0, 0, 0.3);
    }

    .thetext {
      background: no-repeat scroll center center rgba(50, 50, 50, 0.9);
      color: #ccc;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 0 1px 0 rgba(00, 0, 0, 0.3);
      position: absolute;
      left: 15px;
      top: 15px;
      width: 270px;
      height: 120px;

      padding: 10px;
    }
  }

  .share-button {
    position: absolute;
    right: 10px;
    top: 60px;


    .handle {
      background-color: rgba(0, 0, 0, .5);

      height: 40px;
      width: 40px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 3px;
      box-shadow: 0 0 1px 0 rgba(0, 0, 0, 1);
      cursor: pointer;

      position: relative;

      opacity: .7;


      $transition-property: opacity;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);


      svg {
        width: 18px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);


        path {
          fill: #fff;


        }
      }

    }

    .handle:hover {
      opacity: 1;
    }

    .contentbox {
      background: no-repeat scroll center center rgba(0, 0, 0, 0.7);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 3px 3px 3px 3px;
      box-shadow: 0 0 1px 0 #000000;
      height: 40px;
      position: absolute;
      right: 60px;
      top: 0;
      width: 200px;
    }

    .contentbox:after {
      content: " ";
      position: absolute;
      top: 12px;
      right: -11px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid rgba(0, 0, 0, 0.3);
    }

    .thetext {
      position: relative;
      top: 10px;
      text-align: center;
    }
  }
}