.mv-gallery{
  max-width: 100%;
  margin: 0 auto;
  padding: 0;

  .mv-canvas{
    position:relative;
    padding: 0;
  }
  
  .mv-canvas-inner{
    text-align: center;
    line-height: 0;
    margin: 0 auto;
    position: relative;
  }

  .mv-iframe-wrapper{
    opacity: 0;
  }
  
  .mv-canvas-inner {
    iframe{
      margin: 0!important;
      border: 0!important;
    }

    img {
      max-height:400px;
      max-width:100%;
      opacity: 0;
      -webkit-transition: opacity .5s linear;
      -moz-transition: opacity .5s linear;
      -o-transition: opacity .5s linear;
      -ms-transition: opacity .5s linear;
      transition: opacity .5s linear;
      margin: 0!important;
      border: 0!important;
      padding: 0!important;

      &.visible {
        opacity: 1.0;
      }
    }

    .mv-iframe-wrapper.visible {
      opacity: 1.0;
    }
  }
  
  .mv-no-transition{
    transition: none!important;
  }
  
  .mv-caption {
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color:rgb(0,0,0); /* fallback for IE 8 and below */
    background-color:rgba(0,0,0,0.5);
  
    p {
      font-size: 12px;
      letter-spacing: 2px;
      font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
      line-height: 16px;
      padding: 10px;
      margin: 0!important;
    }
  }

  .mv-view{
    height: 30px;
  
    a {
      display: block;
      float: right;
      width: 16px;
      height: 16px;
      margin-right: 3px;
      background:#464646 url('../static/views.png') no-repeat top left;
      border: 3px solid #464646;
      opacity: 0.9;
  
      &:hover {
        opacity: 1.0;
      }
  
      &.mv-view-full {
        background-position: 0 0;
      }
  
      &.mv-view-selected{
        background-color: #6f6f6f;
        border-color: #6f6f6f;
      }
      
      &.mv-view-thumbs{
        background-position: 0 -16px;
      }
    }
  }

  .mv-loader{
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: transparent url('../static/360.gif') no-repeat center center;
    margin: -16px 0 0 -16px;
    z-index: 100;
    opacity: 0.7;
  }
  
  /* Elastislide Style */
  
  .mv-thumbs{
    margin-top: 9px;
  }
  
  .mv-carousel-wrapper{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position:  relative;
    margin-bottom:20px;
    padding: 0;
  }

  .mv-carousel{
    overflow: hidden;
  
    ul {
      display: none;
      -webkit-transition: margin 0.2s linear -0.1s;
      -moz-transition: margin 0.2s linear -0.1s;
      -o-transition: margin 0.2s linear -0.1s;
      -ms-transition: margin 0.2s linear -0.1s;
      transition: margin 0.2s linear -0.1s;
  
      li {
        height:100%;
        display:inline-block;
        float: left;
        margin: 0 5px;
  
        a {
          display:block;
          -webkit-touch-callout:none;
          border: 3px solid #111;
          opacity:0.65;
          -webkit-transition: opacity 0.2s ease-in-out;
          -moz-transition: opacity 0.2s ease-in-out;
          -o-transition: opacity 0.2s ease-in-out;
          -ms-transition: opacity 0.2s ease-in-out;
          transition: opacity 0.2s ease-in-out;
          width: 65px;
          height: 65px;
          position: relative;
  
          img {
            display:block;
            border:none;
            border-radius: 0;
            background-image: none;
            padding: 0;
            margin: 0;
          }
  
          &:hover {
            opacity: 1.0;
          }
        }
  
        &.selected a {
          border-color: #397fdf;
          opacity: 1;
  
          img {
            opacity: 1.0;
          }
        }
      }
    }
  }
  
  .mv-video{
    background: transparent url('../static/play-icon.png') no-repeat 0 0;
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    top: 32px;
    left: 32px;
    margin: -20px 0 0 -20px;
    opacity: .8;
  }
  
  .mv-invalid-code{
    background-color: #cc0000;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    display: block;
    border-radius: 4px;
    border: 1px solid #7a0000;
  }
  
  .mv-iframe-wrapper {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
  
    iframe {
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}