@import url(./animate.css);
@import url(./menu_footer.css);
@font-face { font-family: 'Gills Sans MT Condensed'; src: url(../fonts/GILC____.TTF); }
@font-face { font-family: 'Geometr231B'; src: url(../fonts/GEO231B.TTF); }
@font-face { font-family: 'times-new-roman'; src: url(../fonts/times-new-roman.ttf); }
@font-face { font-family: 'bank_gothic_light_bt'; src: url(../fonts/bank_gothic_light_bt.ttf); }
@font-face { font-family: 'Glastonbury'; src: url(../fonts/Glastonbury.ttf); }
body { background: #fafafa; }
header nav,footer .body { background: #fff; }
.site.side-open { height: 100vh; }
.P_header .page_heading {
    padding: 10px 0 5px 0;
    margin: 8vh auto 12vh auto;
    font-size: 40px;
    max-width: 550px;
    border-bottom: 1px solid #e8e8e9;
    color: #4c4840;
    font-family: 'Gills Sans MT Condensed';
}
.year_list {
    width: 90%;
    margin: 5vh auto;
    padding-left: 70px;
}
.year_list li {
    list-style: none;
    color: #b7b8ba;
    font-size: 20px;
    font-family: 'times-new-roman';
    cursor: pointer;
    margin: 5px 0;
    transition: all 0.2s;
}
.year_list li.active {
    color: #000;
    transition: all 0.2s;
}
.gallery {
    width: 90%;
    margin: 5vh auto;
    padding: 0 0 20vh 0;
    text-align: center;
    border-bottom: 1px solid #b8babc;
}
.gallery .home {
    height: 0;
    overflow: hidden;
    display: grid;
    grid: auto / repeat(2,1fr);
    grid-gap: 30px;
    transition: all 0.2s;
}
.gallery .home.active {
    height: auto;
    transition: all 0.2s;
}
.gallery > .title {
    grid-column: 1 / -1;
    position: relative;
    height: 1px;
    width: 100%;
    background: #000;
}
.gallery > .title span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fafafa;
    font-family: 'Glastonbury';
    padding: 5px 10px;
    font-size: 24px;
}
.gallery .LR .title {
    margin: 6vh 0;
    /*font-family: '';*/
}
.gallery .LR .frame {
    position: relative;
    width: 90%;
    height: 300px;
    margin: 0 auto;
    background: #e6e7e8;
}
.gallery .LR .frame img,
.gallery .LR .frame video {
    position: absolute;
    top: 40px;
    left: 40px;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    cursor: pointer;
}
.gallery .IV {
    margin: 15vh auto;
    height: 0;
    overflow: hidden;
    transition: all 0.2s;
}
.gallery .IV.Image,.gallery .IV.Video {
    height: auto;
    transition: all 0.2s;
}
.gallery .IV .back {
    width: 90px;
    margin: 3vh 0 3vh 70px;
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-radius: 20px;
    filter: drop-shadow(0 0 5px grey);
    font-weight: 600;
    font-size: 18px;
    font-family: 'Geometr231B';
    cursor: pointer;
}
.gallery .IV .display {
    width: 85%;
    margin: 0 auto;
}
.gallery .IV .display .show {
    position: relative;
    height: 60vh;
    border: 1px solid #000;
}
.gallery .IV.Video .display .show { border: none; }
.gallery .IV .display .show .image {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: 0;
    overflow: hidden;
    transition: all 0.2s;
}
.gallery .IV .display .show video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 0.2s;
}
.gallery .IV.Image .display .show .image {
    height: calc(100% - 10px);
    transition: all 0.2s;
}
.gallery .IV.Video .display .show video {
    height: 100%;
    overflow: visible;
    transition: all 0.2s;
}
.gallery .IV.Image .display .show .slick-next,
.gallery .IV.Image .display .show .slick-prev {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-90deg);
    color: #e5e5e5;
    text-transform: uppercase;
    background: transparent;
    border: none;
    outline: none;
    z-index: 4;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.gallery .IV.Image .display .show .slick-prev { left: 3%; }
.gallery .IV.Image .display .show .slick-next { right: 0; }
.gallery .IV.Image .display .show .slick-next:not(.slick-disabled):hover,
.gallery .IV.Image .display .show .slick-prev:not(.slick-disabled):hover {
    color: #fff;
    transition: all 0.2s;
}
.gallery .IV .display p {
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 0.3s;
}
.gallery .IV .display p.active {
    padding: 3vh 0 0 20px;
    height: auto;
    overflow: visible;
    transition: all 0.3s;
}
.gallery .IV .showcase {
    width: 90%;
    margin: 25vh auto;
    text-align: center;
}
.gallery .IV .showcase .IV_holder {
    display: grid !important;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 10vh 10vw;
}
.gallery .IV .showcase .slick-prev,
.gallery .IV .showcase .slick-next {
    position: absolute;
    top: 45%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: transparent;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border: none;
    outline: none;
    cursor: pointer;
}
.gallery .IV .slick-prev { left: -3%; }
.gallery .IV .slick-next { right: -5%; }
.gallery .IV ul.slick-dots { margin: 10vh auto; }
.gallery .IV ul.slick-dots li {
    display: inline-block;
    list-style: none;
    margin: 0 5px;
    transition: all 0.2s;
}
.gallery .IV ul.slick-dots li button {
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    border: none;
    outline: none;
    font-weight: 600;
    cursor: pointer;
}
.gallery .IV ul.slick-dots li.slick-active button {
    filter: drop-shadow(0 0 3px grey);
    transition: all 0.2s;
}
.gallery .IV .showcase .item {
    display: grid;
    grid: 1fr 45px / 1fr;
}
.gallery .IV .showcase .item .show {
    position: relative;
    height: 45vh;
    background: #fff;
}
.gallery .IV .showcase .item img,
.gallery .IV .showcase .item video {
    position: absolute;
    top: 30px;
    left: 30px;
    width: calc(100% - 60px);
    height: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.gallery .IV.Image .showcase .item img {
    height: 35vh;
    transition: all 0.2s;
}
.gallery .IV.Video .showcase .item video {
    height: calc(100% - 60px);
    transition: all 0.2s;
}
.gallery .IV .showcase .item .name {
    width: 80%;
    margin: 0 auto;
    border-bottom: 1px solid #b2afae;
    line-height: 45px;
    font-family: 'bank_gothic_light_bt';
    font-size: 22px;
    text-align: left;
}