/* Fonts */ @font-face { font-family: 'Myriad Pro'; font-weight: normal; font-style: normal; src: url("../fonts/myriadregular.eot"); src: url("../fonts/myriadregular.eot?#iefix") format('embedded-opentype'), url("../fonts/myriadregular.woff") format('woff'), url("../fonts/myriadregular.ttf") format('truetype'); } @font-face { font-family: 'Myriad Pro'; font-style: italic; font-weight: normal; src: url("../fonts/myriaditalic.eot"); src: url("../fonts/myriaditalic.eot?#iefix") format('embedded-opentype'), url("../fonts/myriaditalic.woff") format('woff'), url("../fonts/myriaditalic.ttf") format('truetype'); } @font-face { font-family: 'Myriad Pro'; font-style: normal; font-weight: bold; src: url("../fonts/myriadbold.eot"); src: url("../fonts/myriadbold.eot?#iefix") format('embedded-opentype'), url("../fonts/myriadbold.woff") format('woff'), url("../fonts/myriadbold.ttf") format('truetype'); } /* Reset */ body,div,span,h1,h2,h3,h4,h5,h6,pre,a,em,img,strong,b,u,i,button,dl,dt,dd {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%} p {margin: 0 0 15px} p:last-child {margin-bottom: 0} a:focus, input:focus, button:focus {outline: none} button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, select::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {border: none} button {-webkit-border-fit: lines} header, footer, article, section, aside, nav {display: block} div, input, textarea, select, li, ul, ol, p, dl, dt, dd {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box} .clearfix:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0} /* ======================================================================================= */ /* Common */ html, body {background: #000; margin: 0; padding: 0; position: relative; min-height: 800px; min-width: 1200px;} body, th, td, input, select, textarea, button {font-family: "Myriad Pro","Helvetica Neue",Arial,sans-serif; font-size: 15px; color: #000; font-weight: normal; -webkit-font-smoothing: antialiased;} body::-webkit-scrollbar {display: none;} body.no-scroll {overflow: hidden;} a {color: #000; text-decoration: none; cursor: pointer} a:hover {color: #000;} .bg-cover {background-size: cover !important; background-position: 50% 50% !important} .f-left {float: left;} .f-right {float: right;} /* Headings */ h1 {font-size: 1.538em; line-height: 1.1em; font-weight: bold; margin-bottom: 0.75em; text-transform: uppercase} h2 {font-size: 28px; font-weight: normal;} h3 {font-size: 24px; font-weight: normal;} h4 {font-size: 18px; font-weight: normal;} h5 {font-size: 16px; font-weight: normal;} h6 {font-size: 1em; line-height: 1.1em; font-weight: bold; margin-bottom: 0.75em} /* Table */ table {border:0; border-collapse:collapse; border-spacing:0; empty-cells:show; font-size:100%} th, td {vertical-align:top; text-align:left; font-weight:normal} .col2-set {display: table; width: 100%} .col2-set .col {display: table-cell; width: 50%; vertical-align: top} .col3-set {display: table; width: 100%} .col3-set .col {display: table-cell; width: 33.33333333%; vertical-align: top} /* Lists */ .unstyled, .unstyled > li {margin: 0; padding: 0; list-style: none} /* Positions */ .p-center {position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%)} .p-vertical {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%)} .p-horizontal {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%)} #svgsprite {left: 0; top: 0; position: absolute;} svg:not(:root) {overflow: hidden;} /* ======================================================================================= */ /* Page navigation (left) */ .page-nav {background: rgba(0,0,0,0.3); position: fixed; left: 0; top: 0; bottom: 0; padding: 0; z-index: 99; width: 50px;} .page-nav ul {position: absolute; height: 100%; padding: 120px 0 40px; z-index: 1;} .page-nav li {position: relative; height: 16.6667%; min-height: 70px; width: 50px; padding: 0 10px;} .page-nav li a {display: block; position: relative; height: 100%; color: #fff; text-decoration: none; text-transform: uppercase;} .page-nav li.brand {position: absolute; height: 120px; display: block; left: 0; top: 0; right: 0; z-index: 2} .page-nav li.rotated a {font-size: 12px; letter-spacing: 1px} .page-nav li.rotated a span {position: absolute; top: 50%; left: 50%; white-space: nowrap; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -o-transform: translateX(-50%) translateY(-50%) rotate(-90deg); transform: translateX(-50%) translateY(-50%) rotate(-90deg);} .page-nav:hover {background: #000;} .page-nav li a:hover {color: #aaa;} .page-nav .brand:hover {opacity: 0.5;} .page-nav .line {position: absolute; right: 0; border-left: 2px solid #fff; top: 0;} .page-nav .sub {position: absolute; width: 50px; top: 0; bottom: 0; right: 0; background: #000; -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0)} .page-nav .sub:hover {background: #383737;} .page-nav .sub .menu {top: 20px; padding: 40px 0; position: absolute; width: 100%; left: 0; text-align: center; line-height: 0} .page-nav .sub .menu:hover {opacity: 0.7} .page-nav .sub .menu .close {display: none;} .page-nav .sub .menu svg * {fill: #fff;} .page-nav .sub .down {bottom: 20px; padding: 40px 0; position: absolute; width: 100%; left: 0; opacity: 0.5; text-align: center; line-height: 0} .page-nav .sub .down:hover {opacity: 1} .page-nav .sub .jprev {padding: 40px 20px;} .page-nav .sub .jprev:hover {opacity: 0.7} .page-nav .sub .jprev svg * {fill: #fff;} body.audio .page-nav .sub .down {bottom: 80px;} .page-nav.close .sub {-webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0)} .page-nav.close .line {display: none;} .page-nav.close ul {opacity: 0; -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0)} .page-nav.close ul li {height: 35px; width: auto; min-height: 35px; padding: 10px 30px;} .page-nav.close ul li.brand {height: 120px; width: 24px; left: 30px; padding: 0;} .page-nav.close ul li.rotated a {font-size: 16px; opacity: 0.5} .page-nav.close ul li.rotated a span {position: relative; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none} .page-nav.close ul li:hover a, .page-nav.close ul li.active a {opacity: 1 !important; color: #fff !important;} .page-nav.close ul li.active:after {content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; border-left: #fff 2px solid;} .page-nav.close.active {width: 300px} .page-nav.close.active ul {opacity: 1; width: 250px; background: #1f1f1f; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0)} .page-nav.close.active .sub:hover {background: #000} .page-nav.close.active .sub .menu .close {display: inline;} .page-nav.close.active .sub .menu .open, .page-nav.close.active .sub .jprev, .page-nav.close.active .sub .down {display: none;} /* Filter navigation (right) */ .filter-nav {position: absolute; right: 0; top: 0; bottom: 0; padding: 0; z-index: 99; width: 50px;} .filter-nav ul {display: none; position: absolute; z-index: 1; height: 100%; width: 250px; padding: 50px 0 0; background: rgba(0,0,0,0.7); -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0)} .filter-nav ul li {position: relative; padding: 10px 30px} .filter-nav ul li a {display: block; position: relative; height: 100%; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 16px; opacity: 0.5} .filter-nav ul li a:hover, .filter-nav ul li.active a {opacity: 1} .filter-nav ul li.active:after {content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; border-left: #fff 2px solid;} .filter-nav .sub {position: absolute; z-index: 2; width: 50px; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.4); } .filter-nav .sub .menu {top: 20px; padding: 40px 0; position: absolute; width: 100%; left: 0; text-align: center; line-height: 0; opacity: 0.5} .filter-nav .sub .menu:hover {opacity: 1} .filter-nav .sub .menu .close {display: none} .filter-nav .sub .menu span {font-size: 12px; text-transform: uppercase; color: #fff; letter-spacing: 1px; position: absolute; top: 100%; left: 50%; white-space: nowrap; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -o-transform: translateX(-50%) translateY(-50%) rotate(-90deg); transform: translateX(-50%) translateY(-50%) rotate(-90deg);} .filter-nav .sub .menu svg * {fill: #fff;} .filter-nav .sub .jnext {padding: 40px 0; width: 100%; text-align: center} .filter-nav .sub .jnext:hover {opacity: 0.7} .filter-nav .sub .jnext svg * {fill: #fff;} .filter-nav:hover .sub {background: rgba(0,0,0,0.9);} .filter-nav:hover .sub .filter {opacity: 1} .filter-nav.active {} .filter-nav.active ul {display: block; -webkit-backdrop-filter: blur(10px); -webkit-transform: translate(-250px, 0); -moz-transform: translate(-250px, 0); -ms-transform: translate(-250px, 0); -o-transform: translate(-250px, 0); transform: translate(-250px, 0)} .filter-nav.active .sub {background: rgba(0,0,0,0.8); -webkit-backdrop-filter: blur(10px);} .filter-nav.active .sub .menu .close {display: inline;} .filter-nav.active .sub .menu .open, .filter-nav.active .sub .filter, .filter-nav.active .sub .menu span {display: none;} /* Wrappers */ .page-wrapper {position: relative; z-index: 2} .page {position: relative; width: 100%; height: 100%} .page.pLeft {padding-left: 50px;} .page#home {padding: 35px 0 60px} .page#music {padding-left: 0 !important;} .area85 {position: relative; margin: 0 100px; height: 100%; z-index: 2} .area {position: relative; height: 100%; z-index: 2} /* loader */ .block-loader {position: fixed; left: 50%; top: 50%; margin: -40px 0 0 -40px; display: none; opacity: 0} .block-loader span {display: block; position: relative; width: 80px; height: 80px; border-radius: 100%; background: #fff; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear;} body.loading .block-loader {z-index: 99999; display: block; opacity: 1} body.loading .page-wrapper {opacity: 0} /* ======================================================================================= */ /* Common page styles */ .logo {position: absolute; left: 100px; top: 36px; z-index: 10;} .contacts-link {display: inline-block; position: absolute; right: 100px; top: 75px; color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; z-index: 10} .contacts-link:hover {color: rgba(170,170,170,0.8)} .next-page {display: inline-block; position: absolute; bottom: 60px; left: 100px; color: #fff; z-index: 10;} .next-page svg {vertical-align: middle; margin-right: 10px} .next-page:hover {color: #ededed;} .next-page:hover svg polyline, .next-page:hover svg line {stroke: #ededed;} .btn-play {display: inline-block; width: 70px; height: 70px; border-radius: 100%; position: absolute; bottom: 60px; right: 100px; background: rgba(0,0,0,0.4); z-index: 10;} .btn-play.static {position: relative; bottom: auto !important; right: auto !important;} .btn-play:after {content: ""; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: rgba(255,255,255,0.4) 3px solid; border-radius: 100%} .btn-play:hover {background: rgba(255,255,255,0.4);} .btn-play .pause {display: none;} .btn-play svg {margin-left: 2px;} .btn-play svg * {fill: #fff;} .btn-play.playing .play {display: none;} .btn-play.playing .pause {display: inline;} .btn-listen {position: absolute; bottom: 60px; right: 100px; color: #fff; z-index: 3} .btn-listen span {display: inline-block; background: rgba(56,55,55,0.8); width: 20px; height: 20px; position: relative; border-radius: 100%; vertical-align: middle; margin-right: 5px} .btn-listen b {font-weight: normal; display: inline-block; border-bottom: rgba(255,255,255,0.3) 1px solid;} .btn-listen svg {margin-left: 1px;} .btn-listen svg * {fill: #fff;} .btn-listen:hover {color: #aaa;} .btn-listen:hover span {background: rgba(255,255,255,0.6);} .btn-listen:hover b {border-color: rgba(255,255,255,0.4);} .bx-wrapper {max-width: none !important;} .bx-wrapper, .bx-viewport, .bxslider, .bx-viewport ul, .bx-viewport li {position: relative; height: 100% !important; width: 100%} .bx-wrapper .bx-loading {content: "loading";} .bx-controls .disabled {display: none !important;} .bx-viewport > li {overflow: hidden; background: #000} .bx-controls-direction svg * {fill: #fff;} .bx-pager {z-index: 3; bottom: 20%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%)} .bx-pager > div {display: inline;} .bx-pager a {display: inline-block; margin: 0 5px; width: 8px; height: 8px; border-radius: 100%; border: #fff 2px solid; text-indent: 999px; overflow: hidden; opacity: 0.5} .bx-pager a:hover {border-color: #fff; opacity: 1} .bx-pager a.active {background: #fff; opacity: 1} .bx-pager a.active:hover {background: #fff; opacity: 1} #about .bx-prev, #news .bx-prev, #news .bx-next, #music .bx-prev, #concerts .bx-prev, #photos .bx-prev, #photos .bx-next, #videos .bx-prev, #videos .bx-next {display: none;} #about .bx-next, #music .bx-next, #concerts .bx-next {position: absolute; width: 50px; height: 100%; top: 0; z-index: 50; background: rgba(0,0,0,0.4); right: 0;} #about .bx-next:hover, #music .bx-next:hover, #concerts .bx-next:hover {background: rgba(0,0,0,0.8)} /* PAGE: Homepage */ #home .area85 .logo {top: 0; left: 0;} #home .area85 .contacts-link {top: 45px; right: 0;} #home .area85 .next-page {bottom: 0; left: 0;} #home .area85 .btn-play, #home .area85 .btn-listen {right: 0; bottom: 0;} #home > .bx-wrapper {position: absolute !important; left: 0; top: 0; width: 100%; height: 100%} #home .bx-wrapper .data {text-align: center; color: #fff; max-width: 700px; min-width: 600px; padding-bottom: 50px; z-index: 1} #home .bx-wrapper .data .cover {margin-bottom: 50px; line-height: 0} #home .bx-wrapper .data .cover img {-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35); -moz-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35); -ms-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35); -o-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35); box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35)} #home .bx-wrapper .data .t70 {font-size: 70px} #home .bx-wrapper .data .t50 {font-size: 50px} #home .bx-wrapper .data .t40 {font-size: 40px; position: relative; padding-top: 30px;} #home .bx-wrapper .data .t40:after {content: ""; position: absolute; top: 0; left: 50%; margin-left: -20px; width: 40px; border-top: #fff 1px solid;} #home .bx-wrapper .data .t28 {font-size: 28px; margin-bottom: 20px;} #home .bx-wrapper .data .t15 {font-size: 15px; margin: 10px 0 20px; line-height: 22px; color: rgba(255,255,255,0.7);} #home .bx-wrapper .data .label {line-height: 0; padding: 0 0 30px; margin: 0 0 30px; position: relative;} #home .bx-wrapper .data .label:after {content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -20px; width: 40px; border-top: #fff 1px solid;} #home .bx-wrapper .data .type {display: inline-block; text-transform: uppercase; color: #fff; padding: 10px 20px 8px; border: #fff 1px solid; line-height: 1em; font-size: 15px; margin-bottom: 20px} #home .bx-wrapper iframe, #home .bx-wrapper video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover;} #home .bx-controls .bx-prev, #home .bx-controls .bx-next {width: 46px; height: 46px; border-radius: 100%; border: #fff 2px solid; opacity: 0.5; z-index: 3; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%)} #home .bx-controls .bx-prev {left: 100px;} #home .bx-controls .bx-next {right: 100px;} #home .bx-controls .bx-prev:hover, #home .bx-controls .bx-next:hover {background: rgba(170,170,170,0.5); opacity: 1; border-color: rgba(170,170,170,0);} .single-timeline {position: absolute; bottom: 0; height: 41px; width: 1080px; max-width: 80%; background: url(../images/bg-single-timeline.png) no-repeat 0 0;} .single-timeline span {display: block; height: 41px; width: 0; background: url(../images/bg-single-timeline.png) no-repeat 0 100%} /* PAGE: About */ #about {background: #fff;} #about .block-about {color: #fff; width: 440px; position: absolute; bottom: 60px; right: 60px; padding: 35px; border: rgba(255,255,255,0.5) 6px solid; background: rgba(255,255,255,0.05);} #about .block-about h4 {margin-bottom: 15px} #about .block-about p {line-height: 22px} #about .col2-set.info {position: relative; height: 100%; display: block;} #about .col2-set.info > .col {position: relative; height: 100%; display: block; float: left;} #about .col2-set.info > .col:first-child {padding: 60px 50px 60px 100px; position: relative;} #about .col2-set.info .bx-pager {bottom: 60px; right: 60px; left: auto;} #about .info .scrollable {font-size: 15px; line-height: 24px; left: 100px; right: 50px; max-height: 60%; overflow: auto;} #about .info .socials {position: absolute; bottom: 60px; left: 100px;} #about .info .socials a {display: inline-block; width: 30px; height: 30px; border-radius: 100%; background: #000; margin-right: 18px; position: relative;} #about .info .socials a:hover {background: #aaa;} #about .info h5 {color: #b3b3b3;} #about .band {height: 33.3333%; position: relative;} #about .band .col {float: left; width: 25%; height: 100%; overflow: hidden;} #about .band .col > a {display: block; position: relative; height: 100%; width: 100%; overflow: hidden;} #about .band .col > a .bg-cover {position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1} #about .band .col > a .person {opacity: 0; display: block; text-align: center; color: rgba(255,255,255,0.5); font-size: 15px; z-index: 4} #about .band .col > a .person b {color: #fff; font-size: 16px; display: block;} #about .band .col > a:before {opacity: 0; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2} #about .band .col > a:after {opacity: 0; content: ""; position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; border: rgba(255,255,255,0.5) 2px solid; z-index: 3} #about .band .col > a:hover .person, #about .band .col > a:hover:before, #about .band .col > a:hover:after {opacity: 1} #about .bx-viewport > li {background: #fff;} /* PAGE: News */ #news {padding-left: 50px; background: #000;} #news .bx-viewport {background: #383737} #news .news-item {position: relative; height: 50%; padding: 40px;} #news .news-item.wide {height: 100%} #news .news-item .bg-cover {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.5} #news .news-item .table {display: table; width: 100%; height: 100%; position: relative; z-index: 3} #news .news-item .table .row {display: table-row;} #news .news-item .table .cell {display: table-cell; width: 100%;} #news .news-item .head {height: 40px; max-height: auto; vertical-align: top} #news .news-item .head .clearfix > div {color: rgba(255,255,255,0.5); font-size: 15px; position: relative; line-height: 34px} #news .news-item .head .clearfix > div b {text-transform: uppercase;} #news .news-item .head .clearfix > div .icon {display: inline-block; width: 34px; height: 34px; border-radius: 100%;} #news .news-item .head .clearfix > div .icon.instagramcolor {background: #074978; position: relative;} #news .news-item .head .clearfix > div .icon.twittercolor {background: #55ACEE; position: relative;} #news .news-item .head .clearfix > div .icon.vkcolor {background: #4D76A1; position: relative;} #news .news-item .head .clearfix > div .icon.facebookcolor {background: #3B5998; position: relative;} #news .news-item .head .clearfix > div .icon:hover {background: #000;} #news .news-item .head .title {font-size: 24px; color: #fff; margin-top: 20px; display: block;} #news .news-item .head .title span {border-bottom: rgba(255,255,255,0.2) 1px solid;} #news .news-item .head .title:hover {color: #aaa;} #news .news-item .head .title:hover span {border-color: rgba(170,170,170,0.4);} #news .news-item .body {color: #fff; vertical-align: middle; font-size: 15px; line-height: 24px} #news .news-item .body .tags {color: rgba(255,255,255,0.5);} #news .news-item .foot {height: 40px; max-height: auto; vertical-align: bottom;} #news .news-item .foot a {margin-right: 17px;} #news .news-item .foot .iconic {color: rgba(255,255,255,0.9);} #news .news-item .foot .iconic svg {vertical-align: middle; margin-right: 5px; opacity: 1} #news .news-item .foot .iconic:hover {color: #fff;} #news .news-item .foot .iconic:hover svg {opacity: 1} #news .news-item:before {content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 2; background: #383737; opacity: 0} #news .news-item:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; border: #fff 10px solid; opacity: 0} #news .news-item:hover:before {opacity: 0.8} #news .news-item:hover:after {opacity: 0.3;} /* PAGE: Music */ #music .album {left: 60px; right: 60px; padding-left: 440px; color: #fff; height: 400px} #music li:first-child .album {left: 100px} #music .album .cover {position: absolute; top: 0; left: 0; width: 400px; left: 0; line-height: 400px; height: 400px; -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35); -moz-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35); -ms-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35); -o-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35); box-shadow: 0 30px 60px 0 rgba(0,0,0,0.35)} #music .album .cover img {position: relative; max-width: 100%} #music .album .title {font-size: 50px; line-height: 50px} #music .album .info {font-size: 17px; opacity: 0.5; line-height: 23px} #music .album .std {padding: 30px 0 0; font-size: 15px; line-height: 24px; max-height: 250px; overflow: auto;} #music .album .btn-set {height: 70px; position: absolute; bottom: 0; left: 440px;} #music .external {position: absolute; bottom: 60px; right: 60px} #music .external > a {display: block; margin-left: 20px} #music .external > a:first-child {margin-left: 0} #music .external > a:hover {opacity: 0.7} #music .box-albums {position: absolute; right: 60px; top: 42px;} #music .box-albums > a {float: left; display: block; margin-left: 10px; line-height: 0; padding-bottom: 10px} #music .box-albums > a:first-child {margin-left: 0;} #music .box-albums > a.active {border-bottom: #fff 2px solid;} #music .box-albums > a:hover img {outline: #aaa 2px solid} .audio-list li {position: relative; line-height: 15px; padding: 7px 60px 7px 45px; font-size: 15px} .audio-list li .timer {position: absolute; right: 10px; top: 7px; line-height: 14px} .audio-list li .audio-control {left: 10px; width: 20px; height: 20px; border-radius: 100%; background: rgba(255,255,255,0.8)} .audio-list li .audio-control .stop {display: none;} .audio-list li .audio-control svg * {fill: #000;} .audio-list li .audio-control.playing {background: rgba(0,0,0,0.8)} .audio-list li .audio-control.playing .stop {display: block;} .audio-list li .audio-control.playing .start {display: none;} .audio-list li .audio-control.playing svg * {fill: #fff;} .audio-list li .more {color: #fff; border-bottom: rgba(255,255,255,0.5) 1px dotted;} .audio-list li .more:hover {border-bottom: none} .audio-list li:not(.more):hover {background: rgba(0,0,0,0.1); color: #666;} .audio-list li:hover .audio-control:not(.playing) svg * {fill: #999;} /* PAGE: Concerts */ #concerts {padding-left: 50px; background: #000;} #concerts .bg-cover {position: relative; width: 100%; height: 100%} #concerts .bxslider > li > .col2-set {position: relative; height: 100%} #concerts .bxslider > li > .col2-set > .col {position: relative; height: 100%} #concerts .bg-cover:before {content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 1; background: #383737; opacity: 0} #concerts .bg-cover:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; border: #fff 10px solid; opacity: 0} #concerts .bg-cover:hover:before {opacity: 0.8} #concerts .bg-cover:hover:after {opacity: 0.3;} #concerts .data {text-align: center; color: #fff; max-width: 700px; min-width: 600px; z-index: 3} #concerts .data .title {font-size: 50px; line-height: 1em; padding-bottom: 35px; margin-bottom: 35px; position: relative; text-transform: uppercase;} #concerts .data .title:after {content: ""; position: absolute; width: 40px; left: 50%; margin-left: -20px; bottom: 0; border-top: #b1b5b8 1px solid;} #concerts .data .place {font-size: 30px} #concerts .data .time {font-size: 30px; margin-bottom: 25px;} #concerts .data .description {color: rgba(255,255,255,0.5); font-size: 15px; line-height: 22px; margin-bottom: 35px;} #concerts .col .data {max-width: 90%; min-width: auto} #concerts .col .data .title {font-size: 40px; padding-bottom: 30px; margin-bottom: 30px;} #concerts .col .data .place {font-size: 26px} #concerts .col .data .time {font-size: 26px; margin-bottom: 25px;} #concerts .col .bg-cover:last-child:not(:first-child), #concerts .col .bg-cover:first-child:not(:last-child) {height: 50%;} #concerts .col .bg-cover:last-child:not(:first-child) .data .title, #concerts .col .bg-cover:first-child:not(:last-child) .data .title {font-size: 30px; padding-bottom: 0; margin-bottom: 25px;} #concerts .col .bg-cover:last-child:not(:first-child) .data .title:after, #concerts .col .bg-cover:first-child:not(:last-child) .data .title:after {display: none;} #concerts .col .bg-cover:last-child:not(:first-child) .data .place, #concerts .col .bg-cover:first-child:not(:last-child) .data .place {font-size: 20px} #concerts .col .bg-cover:last-child:not(:first-child) .data .time, #concerts .col .bg-cover:first-child:not(:last-child) .data .time {font-size: 20px; margin-bottom: 25px;} /* PAGE: Photos */ #photos {padding-left: 50px; background: #000} #photos .photo-item {position: relative; height: 33.3333%; width: 100%; display: block;} #photos .photo-item span {display: block; position: absolute; bottom: 30px; left: 30px; right: 30px; color: rgba(255,255,255,0.5); font-size: 15px; z-index: 3} #photos .photo-item span b {display: block; color: #fff; font-size: 15px; font-weight: normal;} #photos .photo-item:before {content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 1; background: #383737; opacity: 0} #photos .photo-item:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; border: #fff 10px solid; opacity: 0} #photos .photo-item:hover:before {opacity: 0.8} #photos .photo-item:hover:after {opacity: 0.3;} /* PAGE: Photos */ #videos {padding-left: 50px; background: #000} #videos .video-item {position: relative; height: 33.3333%; width: 100%; display: block;} #videos .video-item span {display: block; position: absolute; bottom: 30px; left: 30px; right: 30px; color: rgba(255,255,255,0.5); font-size: 15px; z-index: 3} #videos .video-item span b {display: block; color: #fff; font-size: 15px; font-weight: normal;} #videos .video-item:before {content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 1; background: #383737; opacity: 0} #videos .video-item:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; border: #fff 10px solid; opacity: 0} #videos .video-item:hover:before {opacity: 0.8} #videos .video-item:hover:after {opacity: 0.3;} /* ======================================================================================= */ /* Block: Contacts */ .block-contacts {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: rgba(0,0,0,0.7);} .block-contacts .inner {position: fixed; right: -540px; width: 540px; top: 0; height: 100%; background: #fff; padding: 180px 0 260px;} .block-contacts .inner a {color: #1489db; text-decoration: underline;} .block-contacts .inner a:hover {color: #aaa;} .block-contacts .inner .close {position: absolute; top: 40px; right: 0; background: rgba(0,0,0,0.4); padding: 16px; line-height: 0} .block-contacts .inner .close:hover {background: #000;} .block-contacts .inner .close svg * {fill: #fff;} .block-contacts .inner .top {position: absolute; top: 50px; left: 0; right: 0; padding: 0 65px 0 50px;} .block-contacts .inner .bottom {position: absolute; bottom: 30px; left: 0; right: 0; padding: 0 65px 0 50px;} .block-contacts .inner h3 {line-height: 1em; padding: 13px 0; margin-bottom: 20px;} .block-contacts .inner p {color: #a3a3a3; line-height: 18px; margin: 0;} .block-contacts .inner .unstyled li {position: relative; padding: 0 80px 0 0; margin-bottom: 35px;} .block-contacts .inner .unstyled li.wide {padding: 0;} .block-contacts .inner .unstyled li b {display: block; font-size: 16px} .block-contacts .inner .unstyled li em {color: #a3a3a3; display: block; font-style: normal; margin-bottom: 10px} .block-contacts .inner .unstyled li img {right: 0} .block-contacts .inner .unstyled li .velvet .hover {opacity: 0} .block-contacts .inner .unstyled li .velvet:hover .normal {opacity: 0} .block-contacts .inner .unstyled li .velvet:hover .hover {opacity: 1} .block-contacts .inner .bottom .unstyled li:last-child img {right: -10px} .block-contacts .inner .scrollable {position: relative; height: 100%; overflow: auto; overflow-x: hidden; padding: 10px 65px 0 50px;} .block-contacts .inner .additional {position: relative; margin: 45px 0 0 -50px; background: #f5f5f5; padding: 20px 0 20px 50px;} .block-contacts .inner .additional svg {vertical-align: middle; margin-right: 7px} .block-contacts .inner .credits {position: relative; font-size: 12px; color: #a3a3a3; margin-top: 30px;} .block-contacts .inner .credits img {right: 0} .block-contacts .inner .credits a .hover {opacity: 0} .block-contacts .inner .credits a:hover .normal {opacity: 0} .block-contacts .inner .credits a:hover .hover {opacity: 1} /* Block: Detailed album popover */ .popover {position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background: #fff; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%)} .popover.open {z-index: 110; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0)} .popover .left {position: absolute; left: 0; top: 0; width: 50px; height: 100%; background: #000; z-index: 10} .popover .left .brand {position: absolute; top: 20px; left: 0; right: 0; padding: 40px 0;} .popover .left .brand:hover {opacity: 0.5} .popover .left .down {position: absolute; bottom: 105px; padding: 40px 0; left: 0; right: 0; text-align: center; opacity: 0.5} .popover .close {position: absolute; right: 0; top: 0; width: 50px; height: 100%; background: rgba(0,0,0,0.4); padding-top: 60px; text-align: center; z-index: 10} .popover .close:hover {background: rgba(0,0,0,0.8)} .popover .close svg * {fill: #fff;} .popover .content {position: relative; max-height: 100%; overflow: auto; height: 100%; z-index: 2} .popover .content .tracks {padding-bottom: 50px;} .popover .content .tracks li {padding: 45px 100px; cursor: pointer;} .popover .content .tracks li.unhover {padding: 45px 100px; cursor: default;} .popover .content .tracks li.unhover:hover h4 {text-decoration: none;} .popover .content .tracks li:nth-child(even) {background: #eee;} .popover .content .tracks li h4 {font-size: 20px; line-height: 20px; padding: 11px 0; max-width: 60%} .popover .content .tracks li:hover h4 {text-decoration: underline;} .popover .content .tracks li .col2-set.details {display: none;} .popover .content .tracks li .col:last-child {vertical-align: bottom; text-align: right;} .popover .content .tracks li .info {color: rgba(0,0,0,0.5); margin-bottom: 20px;} .popover .content .tracks li .info > span {margin-right: 20px;} .popover .content .tracks li .info > span:last-child {margin-right: 0;} .popover .content .tracks li .std {font-size: 15px; line-height: 24px} .popover .content .tracks li > .clearfix:first-child {position: relative;} .popover .content .tracks li .audio-control {position: absolute; top: 0; right: 0; display: block; max-width: 40%; width: 180px; border: #000 1px solid; border-radius: 3px} .popover .content .tracks li .audio-control span {display: block; text-transform: uppercase; font-size: 15px; letter-spacing: 1px; color: #000; padding: 12px 0 10px; text-align: center;} .popover .content .tracks li .audio-control span svg {margin-right: 5px;} .popover .content .tracks li .audio-control span.reg svg * {fill: #000;} .popover .content .tracks li .audio-control span.hover {background: #000; color: #fff; display: none;} .popover .content .tracks li .audio-control span.details:hover {background: #000; color: #fff; } .popover .content .tracks li .audio-control span.hover svg * {fill: #fff;} .popover .content .tracks li .audio-control span.stop {display: none;} .popover .content .tracks li .audio-control:hover span.start.reg {display: none;} .popover .content .tracks li .audio-control:hover span.start.hover {display: block;} .popover .content .tracks li .audio-control.playing span.stop.reg {display: block;} .popover .content .tracks li .audio-control.playing span.start.reg, .popover .content .tracks li .audio-control.playing span.start.hover {display: none;} .popover .content .tracks li .audio-control.playing:hover span.stop.reg {display: none;} .popover .content .tracks li .audio-control.playing:hover span.stop.hover {display: block;} .popover .content .tracks li .external {display: inline-block;} .popover .content .tracks li .external > a {margin-left: 20px} .popover .content .tracks li .external > a:first-child {margin-left: 0;} .popover .content .tracks .a-right {text-align: right;} .popover .fullscreen {display: none; z-index: 2} .popover.photos .fullscreen {display: block;} .popover.photos > .content, .popover.photos > .left, .popover.photos > .close {display: none;} .popover:after {content: ""; z-index: 0; position: absolute; left: 50px; top: 0; right: 50px; bottom: 0; background: #fff url(../images/loader.gif) no-repeat 50% 50%; opacity: 0;} .popover.loading:after {opacity: 1; z-index: 10} /* Block: Player */ #player {position: fixed; left: 0; top: 100%; z-index: 1; width: 100%; height: 100%; background: rgba(255,255,255,0.95); box-shadow: -1px -1px 0 0 rgba(0,0,0,0.25);} #player.short {z-index: 200; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px)} #player.full {z-index: 200; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%)} #player.minimize {z-index: 200; left: 100%; -webkit-transform: translateY(-50px) translateX(-100px); -moz-transform: translateY(-50px) translateX(-100px); -ms-transform: translateY(-50px) translateX(-100px); -o-transform: translateY(-50px) translateX(-100px); transform: translateY(-50px) translateX(-100px)} #player .player {position: absolute; top: 0; left: 50px; right: 50px; height: 50px; border-bottom: #eee 4px solid; background: #fff; z-index: 2} #player .player .cover {position: absolute; top: 0; left: -50px; background: #eee; width: 50px; height: 50px; overflow: hidden; line-height: 0} #player .player .toggle {position: absolute; top: 0; right: -50px; background: #eee; width: 50px; height: 50px; overflow: hidden; line-height: 0} #player .player .toggle svg * {fill: #000;} #player .player .toggle:hover {background: #000} #player .player .toggle:hover svg * {fill: #fff;} #player .player .toggle .chevron {display: none;} #player .player .title {padding: 15px 0 0 50px; font-size: 16px; line-height: 1em} #player .player .timeline {position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; background: #eee;} #player .player .timeline span {position: absolute; display: block; top: 0; height: 100%; left: 0; background: #000;} #player .player .controls {position: absolute; right: 100px; text-align: center; top: 15px;} #player .player .controls > a {position: relative; display: inline-block; width: 48px; line-height: 0; vertical-align: middle;} #player .player .controls > a.pause {display: none;} #player .player .controls > a svg * {fill: #000;} #player .player .controls > a:hover {opacity: 0.5} #player .player .controls > a:active {top: 1px;} #player .player .controls > a.close {position: absolute; top: 0; right: -60px} #player .player .controls > a.minimize {position: absolute; top: 0; left: -60px} #player .player .controls > a.minimize .left {display: none;} #player .playlist {border-left: #eee 50px solid; height: 100%; padding: 50px 50px 0 0; overflow: auto;} #player .playlist h2 {margin: 40px 0 25px 50px; line-height: 1em} #player .playlist li a {display: block; position: relative; padding: 7px 50px; font-size: 16px; line-height: 1em} #player .playlist li a:hover {background: #eee; color: #888;} #player .playlist li a:before {content: ""; display: block; opacity: 0; position: absolute; left: 32px; top: 9px; width: 0; height: 0; border-left: #777 8px solid; border-top: transparent 6px solid; border-bottom: transparent 6px solid;} #player .playlist li a:hover:before {opacity: 1} #player .playlist li a.active:before {opacity: 1; border-left-color: #000;} #player.playing .controls > a.pause {display: inline-block;} #player.playing .controls > a.play {display: none;} #player.full .toggle .chevron {display: block;} #player.full .toggle .menu {display: none;} #player.minimize .player .toggle, #player.minimize .player .cover, #player.minimize .player .title, #player.minimize .player .timeline, #player.minimize .player a.prev, #player.minimize .player a.next {display: none;} #player.minimize .player .controls {left: -1px; top: 0; background: #eee; border-left: #ccc 1px solid;} #player.minimize .player .controls a.play, #player.minimize .player .controls a.pause {display: block; width: 50px; height: 34px; padding-top: 16px;} #player.minimize .player .controls a.pause {display: none;} #player.minimize .player .controls > a.minimize {left: -50px; width: 50px; height: 34px; padding-top: 16px;} #player.minimize .player .controls > a.minimize .left {display: inline;} #player.minimize .player .controls > a.minimize .right {display: none;} #player.minimize.playing .player .controls a.play {display: none;} #player.minimize.playing .player .controls a.pause {display: block;} /* ======================================================================================= */ /* buttons */ .btn-link {display: inline-block; color: #fff; text-transform: uppercase; letter-spacing: 2px; border-bottom: rgba(255,255,255,0.3) 1px solid;} .btn-link:hover {color: #ededed; border-color: rgba(170,170,170,0.3);} .btn {display: inline-block; text-transform: uppercase; font-size: 15px; letter-spacing: 1px; color: #fff; padding: 24px 48px 22px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;} .btn:hover {color: #aaa;} .btn.default {border: #fff 2px solid; border-radius: 2px} .btn.default:hover {background: #fff; color: #000;} .defaultwhite:hover span {background: #000; color: #fff !important;} /* ======================================================================================= */ /* Animation transitions */ a, a:before, a:after, a > span, a > img, svg, polyline, line, svg *, .page-nav, .page-nav ul, .page-nav .sub, .page-nav span, .page-nav a, .page-nav .line, .page-wrapper, .page, .jpager, .band .person, .news-item .bg-cover, .news-item:before, .news-item:after, .filter-nav, .filter-nav ul, .news-item, .audio-list li, .popover, .popover:after, #player, .playing .timeline span, #concerts .bg-cover:before, #concerts .bg-cover:after, .photo-item, .photo-item:before, .photo-item:after, .video-item, .video-item:before, .video-item:after, .audio-control span, .credits img, .block-loader {-webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease} @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /* no animation fix */ /* .page-nav.close li.rotated, .page-nav.close li.rotated * {-webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none} */ /* ======================================================================================= */ /* Mobility */ /*@media (max-height: 900px) { .bx-pager {bottom: 90px;} } @media (min-height: 750px) { .block-contacts .inner {padding-bottom: 60px;} .block-contacts .inner .scrollable {height: auto} .block-contacts .inner .bottom {position: relative; left: auto; right: auto; bottom: auto;} } */ @media screen and (max-device-width: 769px) { .page-nav, .box-albums {display: none} .page {padding-left: 0 !important;} .block-contacts .inner {width: 100%; right: -100%;} } /*@media screen and (max-width: 1280px) { .next-page {max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis} #about .block-about p, #about .info .scrollable, #news .news-item .body, #music .album .std {line-height: normal} #music .album {padding-left: 380px} #music .album .cover {width: 350px; height: 350px} #music .album .std {margin: 20px 0;} .btn {padding: 14px 28px 12px;} } */ .toned { background: #000 none repeat scroll 0 0; height: 100%; opacity: 0.3; position: absolute; width: 100%; } .bx-pager{ padding: 5px; background: rgba(0,0,0,0.2); border-radius: 10px; padding-top: 7px; } /* WhiteBGnews */ .whitebgnews { background: #fff !important; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; } .whitebgnews .head .clearfix > div { color: #bbb !important; } .socialnews .body{ padding-top: 30px; vertical-align: top !important; } .whitebgnews * { color: #484646 !important; /* :-< */ } .whitebgnews:hover * { color: white !important; } .whitebgnews .btn-link { color: #55acee !important; border-bottom-color: #55acee !important; } .whitebgnews:hover .btn-link { color: white !important; border-bottom-color: white !important; } #concerts .bg-cover:after{ background: #000 none repeat scroll 0 0; bottom: 0; content: ""; left: 0; opacity: 0.3; position: absolute; right: 0; top: 0; z-index: 2; border: none !important; } #home .bx-pager{ display: none; }