/* Raven Gallery v3.1 */
/*
The MIT License (MIT)

Copyright (c) 2013

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/*Base Styling*/
/* Slider */
.gallery .slick-slider
{
    position: relative;

    display: block;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.gallery .slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.gallery .slick-list:focus
{
    outline: none;
}
.gallery .slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.gallery .slick-slider .slick-track,
.gallery .slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.gallery .slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.gallery .slick-track:before,
.gallery .slick-track:after
{
    display: table;

    content: '';
}
.gallery .slick-track:after
{
    clear: both;
}
.gallery .slick-loading .slick-track
{
    visibility: hidden;
}

.gallery .slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .gallery  .slick-slide
{
    float: right;
}
.gallery .slick-slide img
{
    display: block;
}
.gallery .slick-slide.slick-loading img
{
    display: none;
}
.gallery .slick-slide.dragging img
{
    pointer-events: none;
}
.gallery .slick-initialized .slick-slide
{
    display: block;
}
.gallery .slick-loading .slick-slide
{
    visibility: hidden;
}
.gallery .slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.gallery .slick-arrow.slick-hidden {
    display: none;
}



/*Slick Theme Styling*/

@charset 'UTF-8';
/* Slider */
.gallery .slick-loading .slick-list
{
    background: #fff url('https://web-archive.nli.org.il/National_Library/20160517234414oe_/http://compass.xbox.com/assets/4b/1f/4b1f25e1-ed78-46bb-bb99-8d98797f05e7.gif?n=ajax-loader.gif') center center no-repeat;
}

/* Icons */
/*@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}*/
/* Arrows */
.gallery .slick-prev,
.gallery .slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-top: -10px\9; /*lte IE 8*/
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.gallery .mainSlick .slick-prev,
.gallery .mainSlick .slick-next
{
    width: 30px;
    height: 60px;
    background: rgba(0,0,0,.12);
}
.gallery button.slick-disabled {
    opacity: .4;
    cursor: default !important;
}
.gallery button {
    min-width: 0 !important;
}
.gallery .slick-prev:hover,
.gallery .slick-prev:focus,
.gallery .slick-next:hover,
.gallery .slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.gallery .slick-prev:hover:before,
.gallery .slick-prev:focus:before,
.gallery .slick-next:hover:before,
.gallery .slick-next:focus:before
{
    opacity: 1;
}
.gallery .slick-prev.slick-disabled:before,
.gallery .slick-next.slick-disabled:before
{
    opacity: .25;
}

.gallery .slick-prev:before,
.gallery .slick-next:before
{
    /*font-family: 'slick';*/
    font-size: 0;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gallery .slick-prev
{
    left: -25px;
}
[dir='rtl'] .gallery .slick-prev
{
    right: -25px;
    left: auto;
}
.gallery .mainSlick .slick-prev
{
    left: 0;
}
[dir='rtl'] .gallery .mainSlick .slick-prev
{
    right: 0;
    left: auto;
}
.gallery .slick-prev:before
{
    content: '←';
}
[dir='rtl'] .gallery .slick-prev:before
{
    content: '→';
}

.gallery .slick-next
{
    right: -25px;
}
[dir='rtl'] .gallery .slick-next
{
    right: auto;
    left: -25px;
}
.gallery .mainSlick .slick-next
{
    right: 0;
}
[dir='rtl'] .gallery .mainSlick .slick-next
{
    right: auto;
    left: 0;
}
.gallery .slick-next:before
{
    content: '→';
}
[dir='rtl'] .gallery .slick-next:before
{
    content: '←';
}

/* Dots */
.gallery .slick-slider
{
    margin-bottom: 30px;
}

.gallery .slick-dots
{
    position: absolute;
    bottom: -45px;

    display: block;

    width: 100%;
    padding: 0;

    list-style: none;

    text-align: center;
}
.gallery .slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.gallery .slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.gallery .slick-dots li button:hover,
.gallery .slick-dots li button:focus
{
    outline: none;
}
.gallery .slick-dots li button:hover:before,
.gallery .slick-dots li button:focus:before
{
    opacity: 1;
}
.gallery .slick-dots li button:before
{
    /*font-family: 'slick';*/
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.gallery .slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}


.gallery .contentnextarrow:hover,
.gallery .contentprevarrow:hover,
.gallery .thumbnailsnextarrow:hover,
.gallery .thumbnailsprevarrow:hover {
    cursor: pointer
}

.gallerycontent {
    margin: 0 auto
}

.fixedwidth960 {
    width: 960px;
    height: 540px
}

.fixedwidthimg960 {
    width: 960px;
    max-height: 540px;
    height: auto;
    position: absolute
}
.responsivemaxwidthimg {
    width: 100%;
    height: auto;
}

@media (min-width:1400px) {
    .hidevideoimage,
    .hidevideoimage img {
        visibility: hidden
    }
    .responsivemaxwidth {
        width: 72%
    }
    
    .contentprevarrow {
        right: 45%
    }
    .contentnextarrow {
        left: 45%
    }
    .thumbnailarea {
        max-width: 1920px;
        min-width: 1257px;
        max-height: 1080px;
        margin: -12px auto 0;
        padding: 1px 0 0;
        background-color: transparent!important
    }
    .captions {
        margin-top: 48px;
    }
    .gallerythumbnails {
        display: block;
        padding-top: 8px;
        margin: 38px auto 10px;
    }
    .thumbnailsvisible {
        overflow: hidden;
        width: 975px;
        margin: 0 auto;
        padding: 5px 0
    }
    .thumb,
    .thumb img {
        width: 160px
    }
    .thumb {
        position: relative;
        height: 90px;
        display: inline-block;
        padding: 0 8px;
        overflow: hidden
    }
    .thumb:hover {
        cursor: pointer
    }
    .thumbnailcontrolsfixed {
        position: relative;
        bottom: 50%;
        height: 0
    }
    .thumbnailsprevarrow {
        right: 58%
    }
    .thumbnailsnextarrow {
        left: 58%
    }
    .gallerythumbdots {
        display: none!important
    }
    .thumbbarareadesktop {
        display: block;
        margin-top: -16px;
        margin-bottom: 24px
    }
    .thumbbarareatablet,
    .watchafterplaybuttoncontainer {
        display: none
    }
    .ravenagegate {
        background-color: #000;
        padding: 40px 30px;
        top: 29%;
        left: 26%;
        width: 48%
    }
    .lightboxcontent .ravenagegate {
        margin-top: 20%
    }
    .ravenagegate label {
        padding: 0 5px
    }
    .ravenagegate h2 {
        padding-bottom: 25px;
        font-size: 24px
    }
    .agegatesubmit {
        margin: 28px 0 0
    }
    .hidevideoimage {
        background-color: #383838
    }
    .html5playoncehidden {
        display: block!important
    }
    .wirewaxplaybuttoncontainer {
        height: 0
    }
    .swiperlayerbottom,
    .swiperlayerleft,
    .swiperlayerright,
    .swiperlayertop {
        display: none
    }
}
/* slick slider gallery fixes */
.gallery ul {
  padding-left: 0;
}
.gallery .slick-slide {
  outline: none !important;
}
.thumbnailarea {
  width: 100%;
}
.itemthumb {
  position: relative;
}
.thumbHighlight {
    border: 2px solid #107c10;
}
.ravenDots {
    position: absolute;
    padding: 0;
    list-style: none;
    text-align: center;
    width: 100%;
}
.ravenDots li {
    display: inline-block;
    width: 14px;
    margin: 0 8px;
}
.ravenDots button {
    width: 13px;
    padding: 0;
    border-radius: 50%;
    height: 13px;
    font-size: 1px;
    color: transparent;
    border: 1px solid darkgrey;
    vertical-align: top;
}
.ravenDots .slick-active button {
    background-color: #107c10;
}
@media (min-width: 1480px) {
  .gallery .slick-dots {
    width: 1324px;
  }
  .gallerythumbnails {
    width: 1320px;
  }
  .itemthumb {
    margin: 0 6px;
    width: 121px;
  }
}
@media (min-width: 1220px) and (max-width: 1479px) {
  .gallery .slick-dots {
    width: 98%;
  }
  .gallerythumbnails {
    width: 1050px;
  }
  .captions {
      margin-top: 24px;
  }
  .itemthumb {
    margin: 0 6px;
    width: 121px;
  } 
}
@media (min-width: 769px) and (max-width: 1219px) {
  .gallery .slick-dots {
    width: 98%;
  }
  .captions {
      margin-top: 24px;
  }
  .gallerythumbnails {
    width: 630px;
  }
  .itemthumb {
    margin: 0 3px;
    width: 121px;
  } 
}

@media (min-width:769px) and (max-width:1399px) {
    .hidevideoimage,
    .hidevideoimage img {
        visibility: hidden
    }
    .responsivemaxwidth {
        width: 80%;
        max-width: 1280px;
        min-width: 753px;
        max-height: 720px;
        padding-top: 60px
    }
    .contentprevarrow {
        right: 45%
    }
    .contentnextarrow {
        left: 45%
    }
    .ravenCatSelector {
      top: 84px;
    }
    .thumbnailarea {
        margin: -5px auto 0;
        padding: 1px;
        border-left: 1px solid;
        border-right: 1px solid;
        border-color: rgba(58, 58, 58, .2)
    }
    .gallerythumbnails {
        display: block;
        margin: 29px auto 10px
    }
    .rCat .gallerythumbnails {
        display: block;
        margin: 85px auto 10px
    }
    .thumbbarareadesktop,
    .watchafterplaybuttoncontainer {
        display: none
    }
    .ravenagegate {
        background-color: #000;
        padding: 40px 30px;
        top: 18%;
        left: 25%;
        width: 50%
    }
    .lightboxcontent .ravenagegate {
        margin-top: 20%
    }
    .ravenagegate label {
        padding: 0 8px
    }
    .ravenagegate h2 {
        padding-bottom: 25px;
        font-size: 24px
    }
    .agegatesubmit {
        margin: 28px 0 0
    }
    .hidevideoimage {
        background-color: #383838
    }
    .html5playoncehidden {
        display: block!important
    }
    .wirewaxplaybuttoncontainer {
        height: 0
    }
    .swiperlayerbottom,
    .swiperlayertop {
        position: absolute;
        width: 100%;
        height: 34%
    }
    .swiperlayertop {
        top: 8%;
        z-index: 10
    }
    .swiperlayerbottom {
        bottom: 8%;
        z-index: 10
    }
    .swiperlayerleft,
    .swiperlayerright {
        position: absolute;
        width: 42%;
        height: 84%;
        top: 8%;
        bottom: 8%;
        z-index: 10
    }
    .swiperlayerleft {
        left: 0
    }
    .swiperlayerright {
        right: 0
    }
}

@media (max-width:768px) and (min-width:421px) {
    .thumbnailarea {
        width: 100%;
        max-width: 468px;
        margin: 0 auto;
        padding: 1px;
        border-left: 1px solid;
        border-right: 1px solid;
        border-color: rgba(58, 58, 58, .2)
    }
}

@media (max-width:768px) and (min-width:510px) {
    .gallerythumbnails {
      width: 420px;
    }
    .ravenCatSelector {
      right: 7px !important;
      bottom: 17%;
      top: initial !important;
    }
}
@media (max-width: 509px) {
  .gallerythumbnails {
    width: 248px;
  }
  .ravenCatSelector {
      right: 7px !important;
      bottom: 20%;
      top: initial !important;
    }

}

@media (max-width:420px) {
    .thumbnailarea {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        padding: 1px 0
    }
}

@media (max-width:768px) {
    .responsivemaxwidth {
        width: 100%;
        max-width: 768px;
        max-height: 432px;
        padding-top: 40px
    }
    .contentprevarrow {
        right: 43%;
        top: -10px
    }
    .contentnextarrow {
        left: 43%;
        top: -10px
    }
    .captions {
        margin-top: 3px;
        margin-bottom: 0;
    }
    .rCat .thumbnailarea {
        position: static !important;
    }
    .gallerythumbnails {
        margin: 2px auto 10px;
    }
    .rCat .gallerythumbnails {
        margin: 69px auto 10px;
    }
    .galleryitem iframe { /* remove to have mobile videos open in browser */
      display: none;
    }
    .itemthumb {
        width: 78px;
        margin: 0 4px;
    }
    .gallery .slick-dots {
        width: 98%;
    }
    .ravenagegate {
        background-color: rgba(0, 0, 0, .5);
        padding: 0;
        top: 0;
        left: 0;
        width: 100%
    }
    .lightboxcontent .ravenagegate {
        margin-top: 20%
    }
    .ravenagegate label {
        padding: 0 2px
    }
    .ravenagegate h2 {
        padding-bottom: 16px;
        font-size: 20px
    }
    .agegatesubmit {
        margin: 12px 0 0
    }
    .html5prerollimage {
        z-index: 19;
        position: absolute;
        width: 100%!important
    }
    .wirewaxplaybuttoncontainer {
        position: absolute;
        bottom: 62%;
        left: 45%;
        width: 10%;
        z-index: 5;
        max-width: 112px;
        height: 0
    }
    .wirewaxplaybuttoncontainer img {
        width: 100%
    }
    .wirewaxplaybuttoncontainer:hover {
        cursor: pointer
    }
}

.controlsfixed,
.controlsresponsive {
    height: 0;
    z-index: 6;
    pointer-events: none
}

.captions {
    position: relative
}

.ravencaption {
    position: relative;
    font-family: 'Segoe UI light', Arial, Sans-Serif;
    font-size: -webkit-calc(17.6px + 1.18vw);
    font-size: calc(17.6px + 1.18vw)!important;
    text-align: center;
}


.responsivemaxwidthvariable {
    width: 86%
}

.agegatesubmit,
.contentnextarrow,
.contentprevarrow,
.controlsfixed,
.gallery .galleryitem,
.thumbnailslist,
.thumbnailsnextarrow,
.thumbnailsprevarrow {
    position: relative
}

.gallery .galleryitem {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.hidden {
    display: none
}

.gallerycontentcontrols {
    text-align: center
}

.controlsresponsive {
    margin: -30% 0 0;
    padding-bottom: 30%
}

.controlsfixed {
    bottom: 50%
}

.contentnextarrow,
.contentprevarrow {
    z-index: 6;
    pointer-events: auto!important
}

.contentprevarrow img {
    padding: 0 20px;
    margin-right: -20px
}

.contentnextarrow img {
    padding: 0 20px;
    margin-left: -20px
}

.html5player,
.ytplayer {
    height: 100%;
    position: absolute;
    top: 0;
}
.html5player video {
    width: 100%;
    height: 100%;
}
.videoplaybuttoncontainer {
    position: absolute;
    bottom: 42%;
    left: 45%;
    width: 10%;
    z-index: 5;
    max-width: 112px
}

.videoplaybuttoncontainer img {
    width: 100%
}

.videoplaybuttoncontainer:hover {
    cursor: pointer
}

.thumbplayimagecontainer {
    position: absolute;
    bottom: 22%;
    left: 35.5%;
    width: 30%
}

.thumbplayimage {
    width: 100%!important
}

.ytplayer {
    width: 100%
}

.html5playbuttoncontainer {
    position: absolute;
    bottom: 42%;
    left: 45%;
    width: 10%;
    z-index: 20
}

.html5playbuttoncontainer img {
    width: 100%;
    max-width: 112px;
    margin: 0 auto;
    display: block
}

.html5playbuttoncontainer:hover {
    cursor: pointer
}

.watchafterplaybuttoncontainer {
    position: absolute;
    bottom: 42%;
    left: 45%;
    width: 10%;
    z-index: 20
}

.watchafterplaybuttoncontainer img {
    width: 100%;
    max-width: 112px;
    margin: 0 auto;
    display: block
}

.watchafterplaybuttoncontainer:hover {
    cursor: pointer
}

.html5player {
    width: 100%
}

.ravenshadow {
    filter: blur(5px) brightness(.8);
    -webkit-filter: blur(5px) brightness(.8);
    z-index: 10
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
    .ravenshadow {
        opacity: .7;
        z-index: 10
    }
}

.ravenagegate {
    border: none;
    color: #fff;
    font-family: 'Segoe UI', Arial, sans-serif;
    z-index: 500002;
    text-align: center;
    position: absolute
}

.lightboxcontent .ravenagegate {
    position: relative!important
}
.ravengated {
  opacity: .8 !important;
  pointer-events: none !important;
  filter: blur(2px);
  -webkit-filter: blur(2px);
  z-index: 10;
}

.agegatesubmit {
    background-color: #107c10!important;
    color: #FFF;
    border: 0!important;
    font-family: 'segoe ui semibold';
    font-size: 15px!important;
    font-style: normal!important;
    font-weight: 400!important;
    line-height: 1.2;
    max-width: 96px!important;
    min-width: 64px!important;
    padding: 7px 0!important;
    text-align: center;
    display: inline-block;
    width: 64px
}

#page-cover,
.lightboxcontainer {
    background-color: #000;
    height: 100%
}

.lightboxcontainer,
.lightboxcontent,
.ytplayer.lightbox {
    max-width: 960px;
    max-height: 540px
}

.ravenagegate .agegateday,
.ravenagegate .agegatemonth {
    width: 42px
}

.ravenagegate .agegateyear {
    width: 48px
}

.ravenagegate h2 {
    padding-top: 8px;
    color: #fff;
    font-family: "segoe ui light";
    margin: 0 auto;
    line-height: 110%;
    font-weight: 400;
    font-size: calc(12.6px + 1.18vw)!important
}

.ytplayer {
    z-index: 8
}

#page-cover,
.hideyoutube {
    display: none
}

.lightboxcontent,
.swipeshow {
    padding-bottom: 56.25%;
    width: 100%
}

.lightboxplaybutton {
    cursor: pointer
}

.lightboxcontent {
    margin: 0 auto;
    margin-top: 0!important;
    position: absolute;
    left: 0;
    right: 0
}

.ytplayer.lightbox {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 500001
}

.lightboxclosebutton {
    cursor: pointer;
    width: 35px;
    margin: -35px auto;
    position: relative;
    z-index: 500001
}

#page-cover {
    opacity: .8;
    position: fixed;
    width: 100%;
    z-index: 500000;
    top: 0;
    left: 0
}

.lightboxshadow iframe,
.lightboxshadow img:not(#lbclosebutton) {
    opacity: .38;
    pointer-events: none;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}

.lightboxcontainer {
    position: absolute;
    width: 100%;
    z-index: 500001
}

.html5playerlightbox {
    position: absolute;
    width: 100%;
    height: 100%
}

.html5playbuttoncontainerlightbox {
    position: absolute;
    bottom: calc(50% - 40px);
    bottom: -webkit-calc(50% - 40px);
    left: calc(50% - 40px);
    left: -webkit-calc(50% - 40px);
    z-index: 500001
}

.html5playbuttoncontainerlightbox:hover {
    cursor: pointer
}

/* Category styling */
.rCat .thumbnailarea {
  position: relative;
}
.ravenCatSelector {
  position: absolute;
  right: 0;
  top: 30%;
  width: 14vw;
  min-width: 230px;
}

@media (min-width: 1200px) and (max-width: 1479px) {
  .ravenCatSelector {
    top: 48px;
  }
}

.lightboxcontent {
    position: fixed !important;
    top: 5vw;
    z-index: 5000;
}