@font-face {
    font-family: 'Regular';
    src: url('../fonts/Regular.eot');
    src: local('☺'), url('../fonts/Regular.woff') format('woff'), url('../fonts/Regular.ttf') format('truetype'), url('../fonts/Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bold';
    src: url('../fonts/Bold.eot');
    src: local('☺'), url('../fonts/Bold.woff') format('woff'), url('../fonts/Bold.ttf') format('truetype'), url('../fonts/Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}



html * {max-height: 999999px;}
html {font-size: 14px; font-family: 'Regular'; line-height: 20px;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}
body, html {height: 100%; margin: 0px; padding: 0px;}
a {color: #2196f3;}
.clear {clear: both;}
body.noscroll {overflow: hidden;}
#main .isvideo {position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 0; overflow: hidden;}
#main #bgVideo {min-width: 100%; min-height: 100%; width: auto; height: auto; }
.main {position: relative; min-height: calc(100vh - 2px); z-index: 1; padding: 1px;}
.main .zindex {position: relative; z-index: 2; padding: 1px; min-height: calc(100vh - 4px);}
.main .logo {width: 220px; margin: 0px auto; position: relative; margin-top: 100px;}
.main .logo svg {fill: white;}
.main .albums {height: calc(100vh - 2px); position: absolute; top: 0px;}
.main .albums .item {display: table-cell; text-align: center; width: 25vw; height: calc(100vh - 2px); vertical-align: middle; position: relative;}
.main .albums .item img {height: 0px;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}
.main .albums .item span {display: block;}
.main .albums .item a {text-decoration: none; display: block; padding-left: 30px; padding-right: 30px;}
.main .albums .item span.cap {color: #bbdefb; font-size: 17px;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}
.main .albums .item span.date {color: white; font-size: 12px;}
.main .albums .item a:after{content: ''; display: block; width: 100%; height: calc(100vh - 2px); background-color: black; position: absolute; left: 0px; top: 0px; z-index: -1; opacity: 0;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}
.main .albums .item a:hover:after {opacity: 0.5;}
.main .albums .item a:hover .cap {color: white;}
.main .albums .item a:hover img {height: 150px; border: 2px solid white;}

.main .mhs {position: absolute; right: 50px; bottom: 50px;}
.main .mhs a {color: white; font-size: 12px; text-decoration: none;}
.main .mhs a span {text-indent: 302px; width: 302px; overflow: hidden; display: inline-block; height: 21px; white-space: nowrap; vertical-align: middle;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}
.main .mhs a:hover span{text-indent: 0px}
.main .mhs  svg {fill: white; width: 30px; margin-left: 10px; display: inline-block; vertical-align: middle;}
.main .mhs img {vertical-align: middle;}
.main .mail {width: 25px; position: absolute; left: 50px; bottom: 50px; height: 20px;}
.main .mail svg {fill: #bbdefb;}
.main .mail:hover svg {fill: white;}
.main .who {color: #bbdefb; font-size: 17px; text-decoration: none; position: absolute; bottom: 50px; left: 50%; margin-left: -92px;}
.main .who:hover {color: white;}
.main .JLartworkshop {color: #bbdefb; font-size: 17px; text-decoration: none; position: absolute; bottom: 50px; left: 0%; margin-left: 117px;}
.main .JLartworkshop:hover {color: white;}

.content {display: block; width: 50%;}
.right-column {position: fixed; right: 0px; top: 0px; width: 50%; height: 100vh;}
.right-column .image {display: block; position: absolute; width: 100%; height: 100%; opacity: 0;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}
.right-column .image.active {opacity: 1;}
.right-column .image a {display: none; position: absolute; right: 50px; bottom: 50px; width: 25px; opacity: 0.5; z-index: 1;}
.right-column .image a svg {fill: white;}
.right-column .image a:hover{opacity: 1;}
.right-column .image.active {opacity: 1;}
.right-column .image.active a {display: block;}
.right-column.isitem a {bottom: 100px;}
.right-column .image .caption_image {padding: 30px; width: 70%; position: absolute; bottom: 30px; left: calc(15% - 30px); background-color: white; font-size: 12px; text-align: center; display: none;}
.right-column .image.active .caption_image {display: block;}
.right-column nav {display: block; text-align: center; position: absolute; left: 0px; top: 50px; width: 100%; z-index: 2;}
.right-column nav a{display: inline-block; vertical-align: middle; margin-left: 5px; margin-right: 5px; width: 12px; height: 12px; background-color: white; opacity: 0.5; border-radius: 2px;}
.right-column nav a:hover {opacity: 1;}
.right-column nav a.active {width: 17px; height: 17px; opacity: 1;}
.right-column .prevImage {width: 52px; position: absolute; left: 30px; top: 50%; margin-top: -85px; z-index: 3; height: 176px;}
.right-column .prevImage svg {fill: white;}
.right-column .nextImage {width: 52px; position: absolute; right: 30px; top: 50%; margin-top: -85px; z-index: 3; height: 176px;}
.right-column .nextImage svg {fill: white;}
.right-column .image .small-images {position: absolute; width: 380px; text-align: center; top: 30px; left: 50%; margin-left: -190px; height: 100px;}
.right-column .image .small-images a {display: inline-block; margin: 10px; position: relative; left: auto; bottom: auto; width: 100px;}
.right-column .image .small-images a.active {opacity: 1;}

.caption {background-color: white; width: 50%; position: fixed; text-align: center; padding-top: 30px; padding-bottom: 30px; left: 0px; top: 0px; border-bottom: 1px solid #f5f5f5; z-index: 1;}
.caption h1 {font-weight: normal; font-family: 'Bold'; font-size: 25px; line-height: 35px; padding-left: 15px; padding-right: 15px;}
.caption h1 span {font-family: 'Regular';}
.list {padding-top: 170px;}
.list a {display: block; text-decoration: none; border-bottom: 1px solid #f5f5f5; padding-top: 15px; padding-bottom: 15px; padding-left: 100px; line-height: 20px; clear: both; position: relative;}
.list a svg {position: absolute; left: 10px; /*top: 50%; margin-top: -10px;/**/ top: 0px; width: 14px;  opacity: 0;}
.list a span {display: inline-block; vertical-align: middle; padding: 10px; padding-top: 0px; margin-top: 10px;}
.list a span.num {font-size: 12px; color: #9e9e9e; width: 30px; position: relative;}
.list a span.cap {font-size: 17px; color: #2196f3; width: calc(100% - 170px);}
.list a span.time {font-size: 12px; color: #9e9e9e; width: 60px;}
.list a:hover {background-color: #f5f5f5;}
.list a:hover .cap {color: black;}
.list a:hover svg{opacity: 1;}
#bigImage {position: fixed; width: 100%; height: 100vh; z-index: -1; left: 0px; top: 0px; text-align: center;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
#bigImage img {max-width: 100vw; max-height: 100vh; position: relative; z-index: 2;}
#bigImage a {z-index: 2;}
#bigImage:before {display: none; position: fixed; width: 100vw; height: 100vh; left: 0px; top: 0px; background-color: black; opacity: 0.8; z-index: 1; content: '';}
#bigImage.active {z-index: 10; overflow-y: auto;}
#bigImage.active:before {display: block;}
#bigImage .close {display: inline-block; background: url('../i/close.png'); width: 72px; height: 72px; position: fixed; right: 100px; top: 100px;}


.prevAlbum {position: fixed; display: block; left: -160px; top: 50%; margin-top: -90px; text-decoration: none;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.prevAlbum span{padding: 10px; background-color: white; display: block; position: relative; padding-left: 50px;}
.prevAlbum span:before {content: '←'; display: block; position: absolute; left: 10px; top: 70px; font-size: 30px;}
.prevAlbum:before {display: block; position: absolute; content: ''; background-color: black; opacity: 0.2; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: 0;}
.prevAlbum:hover {left: 0px;}

.nextAlbum {position: fixed; display: block; right: -160px; top: 50%; margin-top: -90px;  text-decoration: none; z-index: 2;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.nextAlbum span{padding: 10px; background-color: white; display: block; position: relative; padding-right: 50px;}
.nextAlbum span:before {content: '→'; display: block; position: absolute; right: 10px; top: 70px; font-size: 30px;}
.nextAlbum:before {display: block; position: absolute; content: ''; background-color: black; opacity: 0.2; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: -1;}
.nextAlbum:hover {right: 0px;}
.text {padding-left: 100px; padding-right: 50px; font-size: 17px;}
.text .buttons {margin-top: 50px; margin-bottom: 50px;}
.bigA {display: inline-block; padding: 15px 30px; border: 1px solid; text-decoration: none; height: 30px; margin-bottom: 20px;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.bigA:hover {background-color: black; color: white; border-color: black;}

.player {display: block; width: calc(100% - 60px); background-color: #cfd8dc; position: absolute; bottom: 0px; right: 0px; padding: 30px; height: 20px;}
.player .controls {display: inline-block;}
.player .controls_prev, .player .controls_next {width: 17px; display: inline-block; height: 13px;}
.player .controls_play {background: url('../i/play.png') no-repeat; width: 15px; height: 22px; border: 0px; cursor: pointer; margin-left: 7px; margin-right: 7px; display: inline-block; vertical-align: middle; margin-top: -4px;}
.player.player_playing .controls_play {background: url('../i/pause.png') no-repeat;}
.player .progress_loaded {background-color: #a9c1cd; height: 5px;}
.player .progress_current {background-color: #e57373; height: 5px; position: absolute; left: 0px; top: 0px;}
.player .progress {position: relative; height: 5px; background-color: #90a4ae; display: inline-block; vertical-align: middle; width: calc(50vw - 320px); margin-top: -5px; cursor: pointer;}
.player .time, .player .allTime {display: inline-block; color: #202020; font-size: 12px; vertical-align: middle; margin-top: -5px; margin-left: 7px; margin-right: 7px;}
.player .volume {display: inline-block; position: relative; padding-left: 14px; vertical-align: middle; margin-top: -6px;}
.player .volume .volum_bg {position: relative; background: url('../i/volum_all.png') no-repeat; width: 14px; height: 24px;}
.player .volume .volum_bg .volume_bar {position: absolute; left: 0px; top: 0px; height: 24px; background: url('../i/volum_progres.png');}
.player .volume:before {display: block; position: absolute; bottom: 0px; left: 0px; content: ''; background: url('../i/volum.png');width: 14px; height: 24px;}

.content404 {width: 80%; padding: 30px; max-width: 720px; text-align: center; color: white; margin: 0px auto; font-size: 17px; line-height: 30px; margin-top: 30vh;}
.content404 h1 {margin-bottom: 40px;}
.content404 p {margin-bottom: 40px;}
.content404 a {color: #bbdefb; text-decoration: none;}
.content404 a:hover {color: white;}
.content404 .bigA svg{width: 15px; fill: #bbdefb; vertical-align: middle;}
.content404 .bigA:hover svg{fill: white;}

.inner.about .content {max-width: 1000px; margin: 0px auto; width: 90%}
.inner.about .caption {width: 100%; left: 0px;}

.image-text {display: block; margin-top: 50px; margin-bottom: 50px; position: relative;}
.image-text .caption_image {padding: 5px; width: calc(100% - 30px); position: absolute; bottom: 10px; left: 10px; background-color: white; font-size: 12px; text-align: center; display: block;}

.inner.about .text.istp {padding-top: 140px;}

@media all and (max-width: 1000px) {
    .inner.about .text {padding-left: 50px;}
}

@media all and (max-width: 850px) {
    .main .albums {position: relative; padding-top: 100px; padding-bottom: 80px; height: auto;}
    .main .albums .item {display: inline-block; width: 49%; height: 300px;}
    .main .albums .item a img {height: 150px; border: 2px transparent solid;}
    .main .albums .item a::after {display: none;}
    .list a {padding-left: 70px;}
    .caption {padding-top: 5px; padding-bottom: 5px;}
    .list a span.num {width: 5px;}
    .list a span.time {width: 40px;}
    .list a span.cap {width: calc(100% - 125px);}
    .bigA {padding: 5px 10px; height: auto;}
    .isdid {padding-left: 50px;}
    .caption.isdid {padding-left: 0px;}
}

@media all and (max-width: 700px) {
    .content {width: 70%;}
    .right-column {width: 30%;}
    .caption {width: 70%;}
    .isdid, .isitem {width: calc(100% - 0px);}
    .caption.isdid {padding-left: 0px;}
    .right-column.isitem {width: 100%; position: relative;}
    .player {position: fixed;}
    .player .progress {width: calc(100vw - 320px);}
    .inner.about .caption {width: 100%;}
    .inner.about .content {width: 100%;}
    .inner.about .text {padding-left: 15px; padding-right: 15px;}
    .inner.about .text span[_data-img] {position: relative; display: block;}
    .inner.about .text span[_data-img] img {display: block; margin-top: 15px; margin-bottom: 15px;}
    .inner.about .right-column {display: none;}
    .inner.about .text span .caption_image {padding: 5px; width: calc(100% - 30px); position: absolute; bottom: 10px; left: 10px; background-color: white; font-size: 12px; text-align: center; display: block;}
}

@media all and (max-width: 500px) {
    .content {width: 100%;}
    .caption {width: 100%;}
    .right-column {width: 100%; position: relative;}
    .prevAlbum {position: relative; left: 0px; display: inline-block; top: 0px; margin-top: 0px; margin-bottom: 50px; left: 0px;}
    .prevAlbum::before {display: none;}
    .prevAlbum img {width: 34vw; height: auto;}
    .nextAlbum {position: relative; right: 0px; display: inline-block; top: 0px; margin-top: 0px; margin-bottom: 50px; float: right; right: 0px;}
    .nextAlbum::before {display: none;}
    .nextAlbum img {width: 34vw; height: auto;}
    .list a {padding-left: 10px;}
    .text {padding-left: 10px; padding-right: 10px;}
    .prevAlbum span::before, .nextAlbum span::before {top: 42%;}
}


@media all and (max-width: 450px) {
    .main .albums .item {display: inline-block; width: 100%; height: 300px;}
    .main .albums .item a img {height: 150px; border: 2px transparent solid;}
    .main .albums .item a::after {display: none;}
    .main .mhs {display: none;}
    .main .who {left: auto; right: 20px; margin-left: 0px;}
	.main .JLartworkshop {left: 30vw; bottom: 100px; margin: 0px;}
}

@media all and (max-width: 400px) {
    .prevAlbum img, .nextAlbum img {width: 30vw; height: auto;}
    .player {padding-left: 5px; padding-right: 5px; width: calc(100% - 10px);}
    .player .progress {width: calc(100vw - 255px);}
}