/* Music Demo Styles ================================================== */ /* Page Fonts */ @import url(https://fonts.googleapis.com/css?family=Dosis:400,300); @import url('https://fonts.googleapis.com/css?family=Anton&subset=latin-ext,vietnamese'); .dosis{ font-family: 'Dosis', sans-serif !important; } .anton{ font-family: 'Anton', sans-serif !important; } /* Body Options */ body{ font-family: 'Dosis', sans-serif; font-weight: 400; letter-spacing: 0.3px; font-size:16px; } body *{outline:none;} /* Music COLORS ================================================== */ /* Colored */ .colored, .colored-hover:hover{ color:#db241b !important; } .bg-colored, .bg-colored-hover:hover{ background-color:#db241b !important; } .border-colored, .border-colored-hover:hover{ border-color:#db241b !important; } /* Colored1 */ .colored1, .colored1-hover:hover{ color:#c03535 !important; } .bg-colored1, .bg-colored1-hover:hover{ background-color:#c03535 !important; } .border-colored1, .border-colored1-hover:hover{ border-color:#c03535 !important; } /* Colored2 */ .colored2, .colored2-hover:hover{ color:#811712 !important; } .bg-colored2, .bg-colored2-hover:hover{ background-color:#811712 !important; } .border-colored2, .border-colored2-hover:hover{ border-color:#811712 !important; } ::selection{ background-color:#db241b; } /* Other Colors */ /* QDR Hovers */ .qdr-hover:before, .qdr-hover-5:before{ background-color:#db241b; } /* Navigation Colors - hover and active */ #navigation.modern .columns ul li a:hover, #navigation.modern.scrolled .columns ul li a:hover, #navigation.modern .columns ul.nav > li.active > a{ color:#db241b !important; } .strip-timeline .dates div:hover, .strip-timeline .dates div.active{ color:#db241b; } .strip-timeline .dates div:hover:before, .strip-timeline .dates div.active:before{ background-color: #db241b; } .strip-timeline .dates div:hover:after, .strip-timeline .dates div.active:after{ border-color: #db241b; } #works .cbp-caption-zoom .cbp-caption-activeWrap, .bg-gradient{ background: #202a3e; /* Old browsers */ background: -moz-linear-gradient(45deg, #202a3e 0%, #5b2c2c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #202a3e 0%,#5b2c2c 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to 45deg, #202a3e 0%,#5b2c2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202a3e', endColorstr='#5b2c2c',GradientType=1 ); /* IE6-9 */ } .player-section .player-container .audiojs .progress, .bg-gradient1{ background: #ba2922; /* Old browsers */ background: -moz-linear-gradient(45deg, #ba2922 0%, #1a4c98 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #ba2922 0%,#1a4c98 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to 45deg, #ba2922 0%,#1a4c98 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba2922', endColorstr='#1a4c98',GradientType=1 ); /* IE6-9 */ } .bg-gradient2{ background: #37191f; /* Old browsers */ background: -moz-linear-gradient(45deg, #37191f 0%, #1f2b4f 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #37191f 0%,#1f2b4f 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to 45deg, #37191f 0%,#1f2b4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37191f', endColorstr='#1f2b4f',GradientType=1 ); /* IE6-9 */ } /* MUSIC VERSION MAIN STYLES ================================================== */ /* MUSICIAN NAVIGATION */ #navigation.modern.dark-nav.scrolled{ background:rgba(40,40,40,0.9); } #navigation.modern.dark-nav .columns ul.dropdown-menu li a:hover{ background:rgba(35,35,35,1); } #navigation.modern.dark-nav .columns ul.dropdown-menu{ background:rgba(25,25,25,0.95); } /* Navigation Colors - hover and active */ #navigation.modern .columns ul li a:hover, #navigation.modern.scrolled .columns ul li a:hover, #navigation.modern .columns ul.nav > li.active > a{ color:#db241b !important; } /* Navigation styles - You can see navigation hover and active colors in the content/antares/css/style.css file. */ #navigation.modern .columns ul li a, #navigation.modern .columns ul li button{ font-size:13px; font-weight: 600; } /* Mega menu and dropdown styles */ #navigation.modern.dark-nav .columns .nav-menu ul.dropdown-menu.mega-menu li a{ color:#aaa; font-size: 13px; letter-spacing: 0px; font-weight: 600; text-transform: uppercase; } #navigation.modern.dark-nav .columns .nav-menu ul.dropdown-menu li a{ color: #aaa; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0px; } /* HOME */ #home{ background-color:#1e1d1d; } #home .home-content{ width: 100%; height: 70px; padding: 0; bottom:0; z-index: 99; position: absolute; color: white; font-weight: inherit; } @media only screen and (max-width: 1000px){ #home .home-content{ padding:15px 0; } } @media only screen and (max-width: 600px){ #home .home-content h2{ font-size:18px; } } .blurslider-gradient { background: -webkit-linear-gradient(left, #fff 0%,#888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .blurslider-line { background: -webkit-linear-gradient(left, #262ff1 0%,#ff8400 100%) !important; } #rev_slider_212_1 .uranus.tparrows { width:50px; height:50px; background:rgba(255,255,255,0); } #rev_slider_212_1 .uranus.tparrows:before { width:50px; height:50px; line-height:50px; font-size:40px; transition:all 0.3s; -webkit-transition:all 0.3s; } #rev_slider_212_1 .uranus.tparrows:hover:before { opacity:0.75; } /* WORKS */ #works{ background-color:#1c1c1c; } #works .cbp-item:hover .cbp-caption-activeWrap{ opacity: .95; } #works .cbp-item:hover .cbp-caption-defaultWrap{ -ms-transform: scale(1.06); -webkit-transform: scale(1.06); transform: scale(1.06); } #works .cbp-item h2{ font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 17px; color:#d5d5d5; } /* TABLES */ #concerts{ background-color:#1c1c1c; } #concerts .item-list-type-1 .list-item:hover{ background-color:rgba(0,0,0,0.2); } /* More Button Effect */ #concerts .more-concerts.collapsed span#hide{ display: none; } #concerts .more-concerts:not(.collapsed) span#show{ display: none; } #concerts .more-concerts i{ margin-left:5px; font-size: 18px; } #concerts .more-concerts:not(.collapsed) i{ -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* PLAYER */ .player-section{ padding:200px 0; } .player-section .player-container{ max-width: 770px; } /* Player Title */ .player-section .player-container .player-title{ width: 100%; padding: 25px; background-color:rgba(23,23,23,0.4); text-align: center; } /* Player */ .player-section .player-container .audiojs{ width: 100%; height: 70px; background:#1a1a1a; } /* Next&Prev Buttons */ .player-section .player-container #extended-controls-pre{ display: block; width: 100%; height: 40px; background-color:#1a1a1a; } .player-section .player-container #extended-controls-pre span{ display: block; width: 50%; height: 40px; line-height: 40px; float: left; text-align: center; cursor: pointer; } .player-section .player-container #extended-controls-pre span:hover{ background-color:#db241b; } /* Play and Pause Buttons */ .player-section .player-container .audiojs .play-pause{ width: 70px; height: 70px; cursor: pointer; padding: 0; background-color:#1a1a1a; border: none; } .player-section .player-container .audiojs .play-pause:hover{ background-color:#db241b; } .player-section .player-container .audiojs .play-pause p{ width: 70px; height: 70px; background-position: center center; } .player-section .player-container .audiojs .play-pause p.play{ background-image: url('/asset/festival-suara/landing-page/images/content/play.png');} .player-section .player-container .audiojs .play-pause p.pause{ background-image: url('/asset/festival-suara/landing-page/images/content/pause.png');} .player-section .player-container .audiojs .play-pause p.loading{ background-image: url('../../../images/components/images/loading.gif');} /* Scrubber, progress */ .player-section .player-container .audiojs .scrubber{ width: 70%; height: 70px; margin:0; border:none; } .player-section .player-container .audiojs .loaded{ height: 70px; background:#242424; } .player-section .player-container .audiojs .progress{ height: 70px; border-radius: 0; } /* Time */ .player-section .player-container .audiojs .time{ height: 70px; line-height: 70px; border:none; width: 20%; width: calc(30% - 70px); margin:0; padding: 0; text-align: center; font-size: 16px; font-family: 'Dosis', sans-serif; } /* Responsive Settings for scrubber and time */ @media only screen and (max-width: 641px){ .player-section{ padding: 80px 0;} .player-section .player-container .audiojs .scrubber{ width: 60%; } .player-section .player-container .audiojs .time{width: 30%; width: calc(40% - 70px); } } @media only screen and (max-width: 481px){ .player-section .player-container .audiojs{ height: 140px; } .player-section .player-container .audiojs .scrubber{ width: 100%; } .player-section .player-container .audiojs .time{ float: none; width: 100%; } } /* Volume */ .player-section .player-container #extended-controls-post{ display: block; width: 100%; height: auto; } .player-section .player-container #extended-controls-post #volume-container{ width: 100%; height: 30px; background-color:rgba(23,23,23,0.4); position: relative; } .player-section .player-container #extended-controls-post #volume-container span{ position: absolute; width: 50px; height: 30px; text-align: center; line-height: 30px; top:0; z-index: 1; } .player-section .player-container #extended-controls-post #volume-container span.down{ left:0; } .player-section .player-container #extended-controls-post #volume-container span.up{ right:0; } .player-section .player-container #extended-controls-post #volume-container #volume-slider{ width: 100%; position: relative; z-index: 2; cursor: pointer; -webkit-appearance: none; -moz-apperance: none; border-radius: 0; height: 30px; opacity: .4; background-image: -webkit-gradient( linear, left top,right top, color-stop(0.50, #db241b), color-stop(0.50, #171717)); } .player-section .player-container #extended-controls-post #volume-container #volume-slider::-webkit-slider-thumb { -webkit-appearance: none !important; background-color: transparent; border: none; height: 15px; width: 15px; } /* Playlist */ .player-section .player-container #playlist li{ position: relative; width: 100%; height: 70px; line-height: 70px; display: block; background:rgba(23,23,23,0.4); } .player-section .player-container #playlist li a{ display: block; width: 97%; height: 100%; left:3%; line-height: inherit; position: absolute; z-index: 1; text-transform: uppercase; } .player-section .player-container #playlist li>span{ position: absolute; width: 90px; height: 100%; line-height: inherit; text-align: center; z-index: 0; right: 0; top:0; } /* Playlist hover and active */ .player-section .player-container #playlist li.playing, .player-section .player-container #playlist li:hover{ background:rgba(23,23,23,0.7); } /* Equalizer */ .equalizer { position: relative; display: inline-block; height: 45px; width: 75px; margin: 0; top:15px; float: none; transform: scale(0.25); } .bar { width: 30%; height: 0; position: absolute; bottom: 0; left: 0; background: #fff; } .playing+div+div+#playlist-container .playing .bar{ transition: height 0.4s ease; animation: bar 0.4s 0s both alternate ease infinite; } .bar-1 { animation-delay: 0.2s !important; } .bar-2 { left: 33%; animation-delay: 0.4s !important; } .bar-3 { left: 66%; animation-delay: 0.6s !important;} @keyframes bar { 0% { height: 0; } 100% { height: 100%; } } /* Player Keys */ .player-keys{ text-align: center; position: absolute; left: 50%; margin-left:-66px; bottom:80px; opacity: 0; } .player-keys.animateme{ animation: keys 1.4s ease; -webkit-animation-fill-mode: forwards; } @keyframes keys { 0% { opacity: 0; -ms-transform: scale(0.3); -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -ms-transform: scale(0.7); -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { opacity: 0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } } /* EVENT WORKS */ .event-works .item .item-container{ background:#1c1c1c; border:1px solid; border-color:#282828; color:#666; text-align: left; display: block; } /* IMAGE */ .event-works .item .item-img{ position: relative; width: 100%; height: auto; overflow: hidden; background:#111;} .event-works .item .item-img .city{ position: absolute; left:0; bottom:0; font-size: 60px; line-height: 50px; font-family: 'Anton', sans-serif; text-transform: uppercase; z-index: 2; opacity: .1; color:white; } .event-works .item .item-img img{ position: relative; z-index: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .event-works .item:hover .item-img img{ opacity: 0.2; -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } /* Texts */ .event-works .item .item-title{ color:white; font-size:18px; line-height: 18px; margin-top:21px; text-transform: uppercase; padding-left:20px; } .event-works .item .item-city{ color:#989898; font-size:15px; line-height: 15px; margin-top:3px; text-transform: uppercase; border-bottom:1px solid; border-color:#282828; padding-left:20px; padding-bottom:20px; } .event-works .item .date{ color:#989898; font-size: 15px; text-transform: uppercase; padding:10px 0 10px 20px; } /* Filters */ .event-works .cbp-filter-item{ background-color: #1c1c1c; border-color:#282828; color:#eee; text-transform: uppercase; font-weight: 400; font-family: inherit; font-size: 17px; } .event-works .cbp-l-filters-button .cbp-filter-item.cbp-filter-item-active, .event-works .cbp-l-filters-button .cbp-filter-item:hover{ background-color: #db241b; border-color:#3e3d3d; color:#fff; } .event-works .cbp-l-filters-button .cbp-filter-counter{ background-color: #db241b; } .event-works .cbp-l-filters-button .cbp-filter-counter:after{ border-top-color: #db241b; } .event-works .cbp-search-input{ background:transparent; border-color:#3e3d3d; color:#eee; } .event-works .cbp-search-nothing{ color:#eee; } @media only screen and (max-width: 700px){ .event-works .item .item-title{ font-size: 19px; } .event-works .item a.item-link{ font-size: 13px; margin:5px 3px; padding:4px 15px; } } .modal-backdrop.in{ opacity: 0.8; }