/* Musician Demo Styles ================================================== */ /* Page Fonts - You can customize fonts on here: https://fonts.google.com/share?selection.family=Anton%7CDosis:wght@200;300;400;500;600;700 */ @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Dosis:wght@200;300;400;500;600;700&display=swap'); .font-main{ font-family: 'Dosis', sans-serif !important; } .font-secondary{ font-family: 'Montserrat', sans-serif !important; } /* Body Options */ body{ font-family: 'Dosis', sans-serif; font-weight: 400; letter-spacing: 0px; font-size:16px; } body *{outline:none;} /* 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; } } /* Mouse animate icon */ .mouse-icon{border:2px solid #fff;border-radius:16px;height:40px;width:24px;margin:0 auto;display:block;z-index:10;opacity:0.7;} .mouse-icon .wheel{-webkit-animation-name:drop;-webkit-animation-duration:1s;-webkit-animation-timing-function:linear;-webkit-animation-delay:0s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;-webkit-animation-name:drop;animation-name:drop;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-play-state:running;} .mouse-icon .wheel{position:relative;border-radius:10px;background:#fff;width:2px;height:6px;top:4px;margin-left:auto;margin-right:auto;} @-webkit-keyframes drop{0%{top:5px;opacity:0;} 30%{top:10px;opacity:1;} 100%{top:25px;opacity:0;}} @keyframes drop{0%{top:5px;opacity:0;} 30%{top:10px;opacity:1;} 100%{top:25px;opacity:0;}} /* ABOUT */ /* Boxes with images */ .boxes-with-image .box .texts>*, .boxes-with-image .texts .secret-button{ position: relative; z-index: 5; -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1) !important; transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1) !important; } .boxes-with-image .box .texts>*{ top:0px; -webkit-transform: translateY(0px); transform: translateY(0px); } .boxes-with-image .box:hover .texts>*{ -webkit-transform: translateY(-20px); transform: translateY(-20px); } .boxes-with-image .box .item-bg{ bottom:-20px;} .boxes-with-image .box .secret-button{ display: inline-block; opacity: 0; margin-top:20px; -webkit-transform: translateY(20px); transform: translateY(20px); } .boxes-with-image .box:hover .secret-button{ opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } .boxes-with-image .box .texts:before{content:'';background-color:rgba(0, 0, 0, 0.15); z-index: 4; position: absolute; width:100%; height: 100%; top:0; left:0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1) !important; transition: all 0.5s cubic-bezier(0.77, 0, 0.2, 1) !important;} .boxes-with-image .box:hover .texts:before{-webkit-transform: translateY(0%); transform: translateY(0%);} /* TABLES */ .concerts .event-list .list-item:hover{ background-color:rgba(0,0,0,0.2); } /* Listings */ .event-list{margin:40px auto;max-width:90%;} .event-list .list-item{border-color:#333!important;color:#ccc;display:block;width:100%;height:auto;padding:17px 20px;border:1px;border-style:solid;border-top:0px;font-size:17px;text-transform:uppercase;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s;} .event-list .list-item:hover{background-color:#171717!important;} .event-list .list-item:first-child{border-top:1px solid #ddd;} .event-list .list-item:nth-of-type(2n){background-color:rgba(0,0,0,0.06);} .event-list .list-item>div{float:left;width:30%;} .event-list:not(.items-2) .list-item>div:first-child{width:20%;text-align:left;} .event-list:not(.items-2) .list-item>div:last-child{width:20%;text-align:right;} .event-list .list-item.title{padding:30px 20px;} .event-list .list-item.title div{text-align:center;font-size:22px;text-transform:uppercase;} @media only screen and (max-width:700px){.event-list .list-item div{float:none;text-align:center!important;width:100%!important;margin:5px auto;}} /* AUDIO PLAYER */ .player-item{background: rgba(0,0,0,0.32); position: relative;} .player-item:hover{z-index: 5;} .playing .player-item{background: rgba(0,0,0,0.61);} .player-item .playPauseButton, .playing.paused .player-item .playPauseButton{ background-image:url(../../../images/play-white.svg); background-size: 10px; } .playing .player-item .playPauseButton{ background-image:url(../../../images/pause-white.svg); } .player-item .playPauseButton:hover{background-color:rgba(0,0,0,0.4)!important;} @media screen and (max-width:992px){ .player-item .playPauseButton{ background-size: 5px !important; } } /* Fixed player */ .audio-container{position: fixed; z-index: 999; left: 0; bottom: 0; width: 100%; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition:transform 0.3s, opacity 0.2, visibility 0.2;transition:transform 0.3s, opacity 0.2, visibility 0.2;} .welcome-home .audio-container{-webkit-transform: translateY(100%); transform: translateY(100%); } .cookie-activated .audio-container{ opacity:0; visibility: hidden;} .plyr{width:calc(100% - 150px);} .plyr--audio .plyr__controls{background-color: transparent;} .step-buttons{padding-right: 20px; padding-left: 0px;} .step-buttons a{display: inline-block; width: 50px; height: 50px; border-radius: 50%; background-image:url(../../../images/skip-backward-white.svg); background-repeat: no-repeat; background-position: center center; border: 1px solid #424242; margin:0 5px; -webkit-transition:all 0.3s;transition:all 0.3s;} .step-buttons a.next{background-image:url(../../../images/skip-forward-white.svg);} .step-buttons a:hover{background-color: #212121;} @media only screen and (max-width:992px){ .plyr{width:100% !important;} .step-buttons{display: none !important;} } /* Play Button */ .plyr__controls .plyr__controls__item:first-child{width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background-color: transparent;border: 1px solid #424242;outline: none !important;box-shadow: none;} .plyr__controls .plyr__controls__item:first-child svg{display: none !important;} .plyr__controls .plyr__controls__item:first-child span{display: none !important;} .plyr__controls .plyr__controls__item:first-child span.label--pressed{display: block !important;left:1px;width:10px !important; height:10px !important; background:black;display: block !important;background:url(../../../images/play-white.svg) center center no-repeat;background-size:10px;position: relative !important;z-index: 5;text-indent: -999px;} .plyr--playing .plyr__controls .plyr__controls__item:first-child span.label--pressed{background:url(../../../images/pause-white.svg) center center no-repeat;} .plyr__controls .plyr__controls__item:first-child:hover{background-color:#424242;} .plyr--video .plyr__control.plyr__tab-focus, .plyr__volume .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true]{box-shadow:none!important;} .plyr__control.plyr__tab-focus{box-shadow: none !important;} /* Progress */ .plyr__controls .plyr__controls__item.plyr__time{ color: #7a7a7a } .plyr__control svg{ fill: #7a7a7a; } /* Set the corner buttons for fixed music player */ body.player-ready .drop-msg,body.player-ready .btt{-webkit-transition:transform 0.3s;transition:transform 0.3s;} body.player-ready:not(.welcome-home) .drop-msg{-webkit-transform: translateY(-70px); transform: translateY(-70px);} body.player-ready:not(.welcome-home) .btt{-webkit-transform: translateY(-80px); transform: translateY(-80px);} /* VIDEO AND PHOTO GALLERY */ .work-image div a.cbp-lazyload:after{width: 30px; height: 30px;} /* ============================================== ALPHABET BLOG TYPE ============================================== */ /* Alphabet item */ .blog-alphabet div[class*="col-"]{ padding: 0 !important; } .blog-alphabet .alphabet-item{ position: relative; overflow: hidden; display: flex; display: -ms-inline-flexbox; min-height: 400px; margin:0 !important; padding: 0%; border: none !important; transform:scale(1) translateZ(0); backface-visibility: hidden; } .blog-alphabet .alphabet-item .alphabet-img-caption{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transform:scale(1) translateZ(0); transform:scale(1) translateZ(0); backface-visibility: hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s; } .blog-alphabet .alphabet-item:hover .alphabet-img-caption{ -webkit-transform:scale(1.05) translateZ(0);transform:scale(1.05) translateZ(0); } /* Absolute overlay */ .blog-alphabet .alphabet-item .item-overlay{ display: flex; display: -ms-inline-flexbox; width: 100%; height: 100%; min-height: inherit; opacity: 0; padding: 40px; visibility: hidden; flex-direction: column; -ms-flex-direction: column; pointer-events: none; z-index: 5; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s; } .blog-alphabet .alphabet-item:hover .item-overlay{ opacity: 1; visibility: visible; } /* Masking */ .blog-alphabet .alphabet-item .item-overlay .mask-container{ display: flex; display: -ms-inline-flexbox; width: auto; height: auto; overflow: visible; } .blog-alphabet .alphabet-item .item-overlay .mask-container .masked-item{ display: flex; display: -ms-inline-flexbox; width: 100%; height: 100%; opacity: 0; -webkit-transform:translateY(5px);-moz-transform:translateY(5px);transform:translateY(5px); -webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.2, 1);transition:all 0.5s cubic-bezier(0.77, 0, 0.2, 1);} .blog-alphabet .alphabet-item:hover .item-overlay .mask-container .masked-item{ opacity: 1; -webkit-transform:translateY(0);-moz-transform:translateY(0);transform:translateY(0); } /* EVENT WORKS */ .events .item .item-container{ background:#1c1c1c; border:1px solid; border-color:#282828; color:#666; text-align: left; display: block; } /* IMAGE */ .events .item .item-img{ position: relative; width: 100%; height: auto; overflow: hidden; background:#111;} .events .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; } .events .item .item-img img{ position: relative; z-index: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .events .item:hover .item-img img{ opacity: 0.2; -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } /* Texts */ .events .item .item-title{ color:white; font-size:18px; margin-top:25px; text-transform: uppercase; padding-left:20px; } .events .item .item-city{ color:#989898; font-size:15px; margin-top:5px; text-transform: uppercase; border-bottom:1px solid; border-color:#282828; padding-left:20px; padding-bottom:20px; } .events .item .date{ color:#989898; font-size: 15px; text-transform: uppercase; padding:10px 0 10px 20px; } /* Filters */ .events .cbp-filter-item{ background-color: #1c1c1c; border-color:#282828; color:#eee; text-transform: uppercase; font-weight: 400; font-family: inherit; font-size: 17px; } .events .cbp-l-filters-button .cbp-filter-item.cbp-filter-item-active, .events .cbp-l-filters-button .cbp-filter-item:hover{ background-color: #212d45; border-color:#3e3d3d; color:#fff; } .events .cbp-l-filters-button .cbp-filter-counter{ background-color: #212d45; } .events .cbp-l-filters-button .cbp-filter-counter:after{ border-top-color: #212d45; } .events .cbp-search-input{ background:transparent; border-color:#3e3d3d; color:#eee; } .events .cbp-search-nothing{ color:#eee; } @media only screen and (max-width: 700px){ .events .item .item-title{ font-size: 19px; } .events .item a.item-link{ font-size: 13px; margin:5px 3px; padding:4px 15px; } } .modal-backdrop.in{ opacity: 0.8; } /* Contents main styles */ .contents{overflow: hidden; z-index: 1; position: relative;} .contents .articles article{ margin: 35% 12% 64% 15%; } .contents .articles article:first-child{ margin: 45% 12% 64% 15%; } .contents .articles article:last-child{ margin: 30% 12% 50% 15%; } .contents .articles article img.article-image{ display: none; } @media only screen and (max-width: 992px){ .contents .articles article:first-child{ margin: 70px 30px 80px 30px; } .contents .articles article{ margin: 30px 30px 80px 30px; } .contents .articles article:last-child{ margin: 30px 30px 60px 30px; } } /* Contents texts */ .contents .articles article .article-title{ font-size: 17px; color: #191919; line-height: 30px; font-weight: 400; } .contents .articles article .article-text{ font-size: 22px; color: #717171; line-height: 40px; font-weight: 300; margin-top: 15px; } @media only screen and (max-width: 992px){ .contents .articles article .article-text{ font-size:17px; line-height: 30px; } } /* Image on right */ .contents .right-image .article-image-container{ position: relative; width: 50vw; height: 100vh; right: 0; overflow: hidden; pointer-events: none; } @media only screen and (max-width: 992px){ .contents .right-image .article-image-container{height: 70vh; min-height: 500px; max-height: 700px;} } .contents .right-image .article-img{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; opacity: 0; visibility: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-transition: all 0.3s 0.22s; -moz-transition: all 0.3s 0.22s; transition: all 0.3s 0.22s; } .contents .right-image img{ display: none; } .contents .right-image .showing{ z-index: 10; opacity: 1; visibility: visible; -webkit-transition: all 0.3s 0s; -moz-transition: all 0.3s 0s; transition: all 0.3s 0s; } /* Creative team options - #team-02 and 03 */ /* Figure options - margin for absolute items on bottom */ .team-creative figure{ -webkit-transition:color 0.3s;transition:color 0.3s; } /* Hover position for figcaption */ .team-creative figcaption{ position: relative; bottom: 0%; -webkit-transition:bottom 0.3s;transition:bottom 0.3s; } .team-creative figure:hover figcaption{ bottom: 50%; } @media only screen and (min-width:571px) and (max-width:992px) {.team-creative figure:hover figcaption{ bottom: 55%; }} /* Opacity option for progress bars */ .team-creative figure .progress-bars{ opacity: 0; visibility: hidden; -webkit-transition-delay:0s;transition-delay:0s; } .team-creative figure:hover .progress-bars{ opacity: 1; visibility: visible; -webkit-transition:opacity 0.3s, visibility 0.3s;transition:opacity 0.3s, visibility 0.3s; -webkit-transition-delay:0.2s;transition-delay:0.2s; } /* Opacity option for image */ .team-creative figure > .employee-photo img{ opacity: 1;-webkit-transition:opacity 0.3s;transition:opacity 0.3s; } .team-creative figure:hover > .employee-photo img{ opacity: .3; } /* Socials Aniamtion */ .team-creative figure .socials a{opacity:0; -webkit-transform:translateY(15px);transform:translateY(15px); -webkit-transition:opacity 0.3s, transform 0.3s;transition:opacity 0.3s, transform 0.3s; -webkit-transition-delay:0s;transition-delay:0s;} /* Icon delays */ .team-creative figure:hover .socials a{opacity:1; -webkit-transform:translateY(-20px);transform:translateY(-20px); -webkit-transition-delay:0.3s;transition-delay:0.3s;} .team-creative figure:hover .socials li:nth-of-type(2) a{-webkit-transition-delay:0.35s;transition-delay:0.35s;} .team-creative figure:hover .socials li:nth-of-type(3) a{-webkit-transition-delay:0.4s;transition-delay:0.4s;} .team-creative figure:hover .socials li:nth-of-type(4) a{-webkit-transition-delay:0.45s;transition-delay:0.45s;} .team-creative figure:hover .socials li:nth-of-type(5) a{-webkit-transition-delay:0.5s;transition-delay:0.5s;} .team-creative figure:hover .socials li:nth-of-type(6) a{-webkit-transition-delay:0.55s;transition-delay:0.55s;} .team-creative figure:hover .socials li:nth-of-type(7) a{-webkit-transition-delay:0.6s;transition-delay:0.6s;}