@font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?7mrw0u'); src: url('../fonts/icomoon.eot?7mrw0u#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7mrw0u') format('truetype'), url('../fonts/icomoon.woff?7mrw0u') format('woff'), url('../fonts/icomoon.svg?7mrw0u#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-mail-envelope-closed:before { content: "\e900"; } .icon-deezer:before { content: "\e902"; } .icon-tiktok:before { content: "\e901"; } .icon-facebook:before { content: "\ea91"; } .icon-instagram:before { content: "\ea92"; } .icon-spotify:before { content: "\ea94"; } .icon-twitter:before { content: "\ea96"; } .icon-youtube:before { content: "\ea9d"; } .icon-appleinc:before { content: "\eabe"; } .icon-soundcloud:before { content: "\eac3"; } @font-face { font-family: 'twt-x'; src: url('../fonts/twt-x.eot?jjyo3s'); src: url('../fonts/twt-x.eot?jjyo3s#iefix') format('embedded-opentype'), url('../fonts/twt-x.ttf?jjyo3s') format('truetype'), url('../fonts/twt-x.woff?jjyo3s') format('woff'), url('../fonts/twt-x.svg?jjyo3s#twt-x') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="twt-"], [class*=" twt-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'twt-x' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .twt-x:before { content: "\e901"; } @font-face { font-family: 'suisse_intlsemi_bold'; src: url('../fonts/suisseintl-semibold-webfont.woff2') format('woff2'), url('../fonts/suisseintl-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { margin: 0px; } body::after { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: url('../images/12notesDesktop.png') no-repeat; background-size: cover; z-index: -1; background-position: center bottom; } div#pageContent { /* background: rgba(38, 38, 38, 0.09); -webkit-backdrop-filter: blur(17px) saturate(15%) contrast(160%); backdrop-filter: blur(17px) saturate(65%) contrast(128%); */ padding-top: 14vw; position: relative; } .overlayWrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(38, 38, 38, 0.09); -webkit-backdrop-filter: blur(17px) saturate(65%) contrast(128%); backdrop-filter: blur(17px) saturate(65%) contrast(128%); } .pageWrap { position: relative; } ul, li { list-style: none; padding: 0; margin: 0; } /* merch*/ .musicsection, .musicContent { width: 90%; margin: 17vw auto 17vw; } .section-title { font-size: 2.333vw; letter-spacing: 0.05833vw; line-height: 3.0833vw; color: #FFFFFF; font-family: 'suisse_intlsemi_bold'; text-transform: uppercase; padding-bottom: 1.75vw; } .merch .item { width: 23%; display: inline-block; vertical-align: top; margin-right: 20px; } img { width: 100%; height: auto; } .merch .item.last { height: 20.33vw; background: transparent; margin-right: 0; position: relative; /* filter:blur(0.5px); */ } .merch .item.last:hover { filter: blur(1px); } .merch .item.last .desk { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); vertical-align: middle; height: 100%; width: 100%; } .merch .item.last .desk a { /* text-align: center; */ /* vertical-align: middle; */ font-family: 'suisse_intlsemi_bold'; font-size: 1.2vw; color: #000; text-decoration: none; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .merch .item.last::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #FFFFFF; filter: blur(1px); z-index: -1; } .merch .item.last:hover:after { filter: blur(4px); } div#pageContent .owl-stage-outer { overflow: hidden; } a.preplay:hover { opacity: 0.6; } .VideoWrapper.videoSection.fade-in-bottom { padding-left: 2.5%; } body .owl-carousel.owl-theme { display: flex; justify-content: center; } body .videoWrapper { margin-right: 15px; position: relative; margin: 0 auto; height: 0; padding-bottom: 56.25%; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .owl-theme .owl-nav [class*=owl-]:hover { background: transparent; } a.preplay { position: absolute; bottom: 2.08vw; left: 2.08vw; text-align: center; z-index: 1000; cursor: pointer; text-decoration: none; width: 60%; font-style: normal; font-weight: 500; background: url('../images/play.svg') no-repeat; width: 1.83vw; height: 2.08vw; background-size: 100% auto; } .video-title { font-size: 1.166vw; color: #fff; background: transparent; width: auto; height: auto; line-height: 1.5vw; position: absolute; bottom: 2.25vw; text-align: center; letter-spacing: 0.029vw; font-family: 'suisse_intlsemi_bold'; text-transform: uppercase; left: 6vw; } .VideoWrapper.videoSection.fade-in-bottom h1 { text-align: center; margin-bottom: 40px; text-transform: lowercase; } .VideoWrapper.videoSection iframe { width: 100%; height: 100%; position: absolute; } div#video { max-width: 90%; margin: 0 auto; position: relative; margin: 13vw auto 17vw; } a.videoImage img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ul.owl-carousel3.owl-loaded.owl-drag { padding: 0; margin-top: 2.5vw; } .title { font-family: 'suisse_intlsemi_bold'; color: #fff; letter-spacing: 0.058vw; font-size: 2.33vw; font-size: 31px; line-height: 1; } .owl-theme .owl-dots .owl-dot { display: none !important; } button.owl-prev, button.owl-next { top: 10px; border: 0; padding: 0; width: 12px; font-size: 0; height: 25px; cursor: pointer; right: auto; } button.owl-prev { left: 24.5vw; } button.owl-next { left: 28.16vw; } button.owl-next.disabled, button.owl-prev.disabled { opacity: 0.5; pointer-events: none; } div#video button.owl-prev { left: 95%; top: 0px; } div#video button.owl-next { left: 98.5%; top: 0px; } /* On scroll CSS */ @keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } div#tour, div#merchContent, div#video, div#musicContent, .footer_wrapper.wrapper, div#mlform { opacity: 0; } .fade-in-bottom { -webkit-animation: fade-in-bottom 0.8s cubic-bezier(0.190, 0.375, 0.565, 1.000) both; animation: fade-in-bottom 0.8s cubic-bezier(0.190, 0.375, 0.565, 1.000) both; } div#tour.fade-in-bottom, div#merchContent.fade-in-bottom, div#video.fade-in-bottom, div#musicContent.fade-in-bottom, .footer_wrapper.wrapper.fade-in-bottom, div#mlform.fade-in-bottom { opacity: 1; } @media only screen and (max-width: 767px) { .VideoWrapper.videoSection.fade-in-bottom { padding-left: 5%; } .VideoWrapper.videoSection .owl-nav { display: block; } body .Video-section .owl-carousel .owl-nav button.owl-next { top: 50%; } body::after { background: url(../images/12notesMobile.png) no-repeat; background-size: cover; background-position: center top; } div#video { margin: 60px auto; width: 90%; /*max-width: 350px;*/ } ul.owl-carousel3.owl-loaded.owl-drag { margin-top: 30px; } a.preplay { width: 22px; height: 25px; left: 25px; bottom: 25px; } .video-title { bottom: 27px; left: 72px; font-size: 14px; letter-spacing: 0.35px; line-height: 18px; text-align: left; } div#video button.owl-prev, div#video button.owl-next { width: 12px; height: 25px; right: 0 !important; left: auto; top: 18px; } div#video button.owl-prev { left: auto !important; right: 43px !important; } body.touch-device .owl-nav { display: block !important; } } @media only screen and (max-width: 1023px) { body::after { background: url(../images/12notesMobile.png) no-repeat; background-size: cover; background-position: top 50% center; background-position: center bottom; } .section-title { font-size: 28px; letter-spacing: 0.7px; padding-bottom: 30px; } .merch .item { width: 43%; margin-bottom: 30px; } .merch .item.last { height: 145px; } .merch .item.last .desk a { font-size: 14px; letter-spacing: 0.35px; width: 100%; } .musicsection, .musicContent { margin-top: 180px; padding-top: 20px; } div#video { margin-top: 170px; padding-top: 20px; } .video-title { bottom: 27px; left: 72px; font-size: 14px; letter-spacing: 0.35px; line-height: 18px; text-align: left; } div#video button.owl-prev, div#video button.owl-next { top: 18px; } div#footer { margin-top: 180px; padding-top: 20px; } } @media screen and (min-width:768px) and (max-width:1023px) { body::after { background: url(../images/12notesMobile.png) no-repeat; background-size: cover; background-position: top 50% center; } .merch .item.last { height: 291px; } .merch .item.last .desk a { top: 63%; left: 18%; } } @media screen and (min-width:768px) and (max-width:1366px) and (orientation:portrait){ body::after { /* background: url(../images/AB-Mobile3x.jpg) no-repeat; */ background-size: cover; background-position: center bottom; } } @media screen and (min-width:768px) and (max-width:1023px) and (orientation:landscape){ body::after { /* background: url('../images/AB-Desktop3x.jpg') no-repeat; */ background-size: cover; background-position: center top; } .header-main { top: 50%; } .header-text { top: 52%; } .title-text { bottom: unset; margin-top: 2vw; } } @media only screen and (min-width: 1440px) { .title { font-size: 44px; } button.owl-prev, button.owl-next { width: 17.2px; height: 34.6px; } } @media only screen and (max-width: 1023px) and (orientation : landscape){ body::after { background: url(../images/12notesMobile.png) no-repeat; background-size: cover; background-position: center 86%; } .uncomment-logo { max-width: 20%; margin: 0 auto; } .title-text { bottom: unset; margin-top: 1vw; } }