/*
GALLERY
----------------------------------------------------------------------------*/
.media-wrap {
  position: relative;
  max-width: 910px;
  width: 90%;
  margin: 0 auto;
}

.preload {
width:90px;
opacity:.5;
margin-top:20px;
}

.height-fix {
height:auto!important;
overflow:visible!important;
}

#fan-art-block {
margin-top:1em;
}

.news-block, .videos-block {
visibility:hidden;
height:0;
overflow:hidden;
text-align:center;
}

.show-block {
visibility:visible;
}

#vid_frame {
min-height:500px;
width:100%;
}

.videos-block, .photos-block {
  text-align: center;
}

.photos-card {
  margin-top: 4em;
  opacity: 0;
  transition: 1000ms;
}
.photos-card img {
  border-radius: 30px;
}

.photos-card.show {
  opacity: 1;
}


.video-item {
  position: relative;
  vertical-align: top;
  display: inline-block;
  text-align: center;
}
.video-item img.video-overlay {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 100%;
  display: block;
}
.video-item:hover img.video-overlay {
  opacity: .7;
}

#video-display {
  margin: 0 auto 30px;
}
#video-display iframe {
  display: block;
}
.photo-item {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  margin: 3px;
}
#photo-display img {
  background-size: 100% 100%;
}


.modal-video, .modal, .blocker {
z-index:1000000000000000;
}

.modal-video {
background-color: rgba(0,0,0,0.7);
}

.modal-video-body {
max-width:1200px;
width: 80%;
}

.non-gallery .vid-play {
display:none;
}

#gallery {
overflow:hidden;
position:relative;
margin:0 auto 6em;
max-width: 100vw;
}
.page-loaded #gallery {
border:0px solid #68778f;
opacity: 1;
}

.fan-art #gallery .container {
  width: 1500px;
}

#gallery .slick-track {
background: #000;
}

#gallery .slick-slider {
width:100%!important;
}

#gallery .photos-block .slick-slider {
width:90%!important;
}

#gallery-images a {
outline: none;
}

#gallery-images a:hover {
cursor:pointer;
}

#gallery-images a img.vid-thumb {
opacity: .4;
position:absolute;
}

#gallery-images .slick-slide a img.vid-thumb {
position:relative;
}

#gallery-images .slick-active a img.vid-thumb {
opacity: .9;
transition: opacity .2s;
}

#gallery-images .slick-active a:hover img.vid-thumb {
opacity: 1;
}

#gallery-images .slick-active a:hover {
background: #fff;
}

#gallery-images .slick-active a:hover img.vid-thumb {
opacity: 1;
}

#gallery-prev,
#gallery-next {
background-color: #68778f;
cursor: pointer;
}

.arrow-l,
.arrow-r {
background: url(../_img/arrows-lr4.png) no-repeat #000;
background-size: 200% auto;
width: 2em;
height: 2em;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index:10;
}

.arrow-l {
background-position: left top;
left: 0;
}

.arrow-r {
background-position: right top;
right: 0;
}

.arrow-l:hover {
background-position: left bottom;
cursor: pointer;
background-color: #000!important;
}

.arrow-r:hover {
background-position: right bottom;
cursor: pointer;
background-color: #000!important;
}

.slider, .slider-nav, .vid-nav {
display:none;
}

.slick-initialized {
display: block;
}

.slick-slider {
width: 70%;
margin: 0 auto;
overflow:hidden;
}

.slick-slide img {
width:100%;
height:auto;
}


#main-img .slick-slide {
position:relative;
}

.caption {
position:absolute;
right:10px;
bottom:10px;
}

.slider-nav, .vid-nav {
border-top:1px solid rgba(189, 39, 46, 1);
border-bottom:1px solid rgba(189, 39, 46, 1);
margin:10px auto;
}

.slider-nav .slick-slide img, .vid-nav .slick-slide img {
padding:0 2px;
opacity:.7;
}

.slider-nav .slick-current-highlight img, .vid-nav .slick-current-highlight img {
  opacity:1;
}

.slider-nav .slick-slide:hover, .vid-nav .slick-slide:hover {
  cursor:pointer;
}

.slider-nav .slick-slide:hover img, .vid-nav .slick-slide:hover img {
  opacity:1;
}

.slider-nav .slick-slide:focus, .vid-nav .slick-slide:focus {
  outline:none;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.media-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.media-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:none;
}

@media (max-width:767px) {
  #vid_frame {
    min-height:300px;
  }
}


/*
 fan-art
 ----------------------------------------------------------------------------*/

 #fan-art {
  position: relative;
  z-index: 20;
}

#fan-art h2 {
  text-align:center;
}

#art-cols {
  width:95%;
  margin:0 auto;
}

.col1, .col2, .col3, .col4 {
  width:25%;
  float:left;
  text-align:center;
}

.col1 {
  padding:0 1em 0 2em;
}

.col2, .col3 {
  padding:0 1em 0;
}

.col4 {
  padding:0 2em 0 1em;
}

#art-cols a {
  margin-bottom:10px;
  display:block;
}

@media (max-width: 767px) {

  .col1, .col2, .col3, .col4 {
    width:50%;
  }

  .col1, .col3 {
    padding:0 1em 0 2em;
  }

  .col2, .col4 {
    padding:0 2em 0 1em;
  }
  .col4 {
    margin-top:-10em;
  }
}

@media (max-width:600px) {
  .col4 {
    margin-top:-7em;
  }
}

@media (max-width:480px) {
  .col4 {
    margin-top:-5em;
  }
}