@font-face { font-family: 'Trixie-Plain'; src: url('../fonts/Trixie-Plain.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OPTICorvinus'; src: url('../fonts/OPTICorvinus-Skyline.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'smashregular'; src: url('../fonts/smash-webfont.woff2') format('woff2'), url('../fonts/smash-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* ================== STYLE REST ==================== */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ================== STYLE REST ==================== */ body{margin:0;padding:0;display:flex;flex-direction:column;min-height:100vh;background-color:#000;background:url(../img/mainBg.png) center no-repeat;background-attachment:fixed;font-family:'Didact Gothic',sans-serif;overflow-x:hidden; background-color:#000;} /* body{margin:0;padding:0;display:flex;flex-direction:column;min-height:100vh;background-color:#000;background:url(../img/mainBg.jpg) center no-repeat;background-attachment:fixed;font-family:'Didact Gothic',sans-serif;overflow-x:hidden} */ @keyframes noise { 0%,100%{-webkit-transform:translate(0,0);transform:translate(0,0)} 10%{-webkit-transform:translate(-5%,-10%);transform:translate(-5%,-10%)} 20%{-webkit-transform:translate(-15%,5%);transform:translate(-15%,5%)} 30%{-webkit-transform:translate(7%,-25%);transform:translate(7%,-25%)} 40%{-webkit-transform:translate(-5%,25%);transform:translate(-5%,25%)} 50%{-webkit-transform:translate(-15%,10%);transform:translate(-15%,10%)} 60%{-webkit-transform:translate(15%,0%);transform:translate(15%,0%)} 70%{-webkit-transform:translate(0%,15%);transform:translate(0%,15%)} 80%{-webkit-transform:translate(3%,35%);transform:translate(3%,35%)} 90%{-webkit-transform:translate(-10%,10%);transform:translate(-10%,10%)} } body.home{ overflow-y: hidden;} #noise{animation:noise 6s steps(10) infinite;background-image:url(../img/noise_grain.png);background-repeat:repeat;height:400%;left:-50%;opacity:.05;position:fixed;top:-150%;width:300%;z-index:2;pointer-events:none} .video-container{width:100vw;height:calc(100vh - 35px); padding-top: 81px;} .home iframe{position:absolute;top:50%;left:50%;width:100vw;height:100vh;transform:translate(-50%,-50%);pointer-events:none} @media (min-aspect-ratio: 16/9) { .video-container iframe { height: 56.25vw; } } @media (max-aspect-ratio: 16/9) { .video-container iframe { width: 177.78vh; } } html.nav-expanded .po-header-right { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0%); } html.nav-expanded .bar:first-child { transform: translate(0, 10px) rotate(-45deg); } html.nav-expanded .bar:nth-child(2){ opacity: 0;} html.nav-expanded .bar:last-child { transform: translate(0, -6px) rotate(45deg); } header{position:fixed;top:0;left:0;width:100%;text-align:center;z-index:1;border-bottom:1px solid #333} .logo{font-weight:400;color:#fac43d;font-size:1.5em;font-family:'OPTICorvinus';text-transform:uppercase;text-decoration:none; background: #FAC43D; background: -webkit-linear-gradient(to bottom, #FAC43D 48%, #C50024 100%); background: -moz-linear-gradient(to bottom, #FAC43D 48%, #C50024 100%); background: linear-gradient(to bottom, #FAC43D 48%, #C50024 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} nav ul{list-style:none;margin:0;padding:0;display:flex;font-family:'Trixie-Plain';text-transform:uppercase;font-size:1.3em} /* .logo span{font-weight:700;color:#fac43d; margin:0 -5px 0 0;} */ nav ul li{margin:0 10px} nav ul li a{text-decoration:none;color:#fff} nav a:before{content:"[";color:#fac43d;margin-right:5px;display:inline-block;opacity:0;-webkit-transform:translateX(20px);-moz-transform:translateX(20px);transform:translateX(20px);-webkit-transition:-webkit-transform 0.3s,opacity .2s;-moz-transition:-moz-transform 0.3s,opacity .2s;transition:transform 0.3s,opacity .2s} nav a:after{content:"]";color:#fac43d;margin-left:5px;display:inline-block;opacity:0;-webkit-transition:-webkit-transform 0.3s,opacity .2s;-moz-transition:-moz-transform 0.3s,opacity .2s;transition:transform 0.3s,opacity .2s;-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);transform:translateX(-20px)} nav a:hover:before, nav a:hover:after, nav li.active a:before, nav li.active a:after{opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px)} nav a:hover, nav li.active a{color:#fac43d} .po-header { padding: 20px; background-color: rgba(0, 0, 0, 1); border-radius: 0; -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); } .po-header-row { display: flex; align-items: center; flex-wrap: wrap; } .po-header-left { flex-shrink: 0; width: 17.2%; } .po-header-right { width: 1%; flex: 1 1 auto; display: flex; align-items: center; } .po-header-right nav { margin: 0 auto; } .social-icons{ width: 17.2%; display: flex; justify-content: flex-end;} .social-icons img{width:30px;height:30px;margin-left:10px} .social-icons a{ color:#fac43d;margin-left:20px;font-size:1.3em;text-decoration:none; transition: 0.3s;} .social-icons a:hover{color:#FFF;} footer{text-align:center;padding:10px;background-color:rgba(0,0,0,0.1);width:100%;font-size:.7em;letter-spacing:1px;color:#CCC} .homeFooter{position:absolute;bottom:0} footer a{color:#CCC;text-decoration:none} footer a:hover{color:#00b0a6} .burger-menu{display:block;cursor:pointer;border:none;outline:none;background-color:transparent;width:30px;height:30px} .bar{width:30px;height:3px;background-color:#fff;margin:5px 0;transition:.4s} .content-container{flex:1;max-width:70rem;width:100%;margin:100px auto 0;padding:20px;color:#FFF} .content-container h1{font-size:3em;letter-spacing:4px;font-family:'smashregular';text-transform:uppercase;color:#fac43d; background: #FAC43D; background: -webkit-linear-gradient(to bottom, #FAC43D 48%, #C50024 100%); background: -moz-linear-gradient(to bottom, #FAC43D 48%, #C50024 100%); background: linear-gradient(to bottom, #FAC43D 48%, #C50024 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .content-container p {font-family: 'Trixie-Plain'; font-size:1.3em;} .soundcloud{width:100%;margin:40px auto 0} ul.gallery{list-style:none;margin:20px 0;padding:0;display:flex} ul.gallery li {margin-right:20px;} ul.gallery a {display:block; background-color:#000; color:#fac43d; border:1px solid #fac43d; padding:0px 10px; line-height:40px; font-family:"Franklin Gothic Medium","Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:1px;} ul.gallery a:hover, ul.gallery a:active {background-color:#fac43d; color:#000;} .gig-dates{max-width:70rem;margin:20px auto; position: relative;} .gig-dates h3 {font-family: 'Trixie-Plain';} .gig{display:flex;flex-wrap:wrap;background-color:rgba(0,0,0,0.85);border-top:1px solid #7e7e7e;padding:31px;font-family:'Libre Franklin',sans-serif;text-align:left} .gig:hover{background-color:#282828;color:#fff} .gig h2{width:100%;text-align:center} .gig > div{flex:1;padding:10px} .gig .date{flex-basis:100%} .gig .dateDay{padding-bottom:3px} .gig .dateDayMonth{font-weight:700} .gig .locationName{font-size:19px;padding-bottom:3px} .gig .locationCity{color:#fac43d} .gig .location{flex-basis:100%} .gig .venue{flex-basis:100%} .gig .tickets{flex-basis:100%;text-align:center} .gig a{color:#fff;text-decoration:none;background-color:#000;border:1px solid #fac43d;padding:15px 12px;margin-bottom:0;font-size:13px;font-weight:700;letter-spacing:0;line-height:1.42857143;text-align:center;text-transform:uppercase;display:inline-block} .gig a:hover{color:#fac43d} .frm_inn_ev{ padding: 44px 0; max-width: 600px; width:100%; margin: 0 auto;} .frm_inn_ev input[type="submit"] { margin-bottom:0px; } .frm_inn_ev .form-input { margin-bottom: 40px; position: relative; background-color:#000;} .frm_inn_ev .form-input input{ border-bottom-color: #fac43d; border-bottom-width: 2px; font-weight: normal; border-bottom:3px dashed #444;} .video-container img.mb-only{ display: none; } .desktop-only{ display: flex;} .form-section.fancybox-content { max-width: 50%!important; } .contact-form input.error, .contact-form textarea.error { border-color: #ed2e2e; border-radius: 0px; border-bottom-color: #ed2e2e } .contact-form input, .contact-form textarea{ font-weight:normal; font-family: 'Trixie-Plain';} .row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px} .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col,.col-auto,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,.col-sm-auto,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,.col-md-auto,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,.col-lg-auto,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px} .col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%} .col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%;position:relative} input[type="text"],input[type="email"],input[type="tel"],.form-control{font-family: 'Trixie-Plain'; padding:22px 16px;-moz-appearance:none;-webkit-appearance:none;appearance:none;border:3px dashed #444;border-bottom:3px dashed #444;border-radius:0;outline:none;-webkit-box-shadow:none;box-shadow:none;width:100%;font-weight:400;font-style:normal;height:61px; background-color:#000;} textarea{padding:30px 16px;-moz-appearance:none;-webkit-appearance:none;appearance:none;border:3px dashed #444;border-bottom:3px dashed #444;border-radius:0;outline:none;-webkit-box-shadow:none;box-shadow:none;width:100%;font-weight:400;font-style:normal;height:250px} label.floating-label{font-family: 'Trixie-Plain'; text-transform:uppercase; position:absolute;top:0;left:0;text-align:left;display:block;width:100%;height:61px;line-height:61px;font-size:18px;background:transparent;margin:0 auto;cursor:text;-webkit-transition:all .15s ease-in-out;-o-transition:all .15s ease-in-out;transition:all .15s ease-in-out;font-weight:400;padding-left:16px;padding-right:5px} input.inputText:focus + label,input.inputText:not(:placeholder-shown) + label,textarea.inputText:focus + label,textarea.inputText:not(:placeholder-shown) + label{height:25px;line-height:20px;font-size:11px} .frm_inn_ev input[type="submit"],.web-btn{text-align:center;padding:13px 24px;font-size:20px;line-height:1.2;font-weight:400;color:#000;background:#fac43d;border:1px solid #fac43d;-o-transition:.3s all ease-in-out 0;transition:.3s all ease-in-out 0;-webkit-transition:.3s all ease-in-out 0;-moz-transition:.3s all ease-in-out 0;cursor:pointer;display:inline-block;border-radius:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:none;-webkit-box-shadow:none;box-shadow:none;text-transform:uppercase;letter-spacing:2px;border-bottom-width:2px; font-family: 'smashregular'; width:100%; transition:0.3s; } input[type="submit"]:hover{border-color:#c50024;background-color:#c50024;color:#fac43d; border:2px solid #c50024; } .text-center{ text-align: center !important;} label.textarea-label{ width: auto; padding-top: 7px; line-height: 30px;} .eq-back-btn{ margin-top: 30px;} .paged-content{ margin: 40px 0px 0px 0px;} .paged-content p{ margin: 10px 0px; } .paged-content ul {margin-bottom:24px;} .paged-content ul li {list-style:disc; margin:0 0 10px 25px; font-family:"Trixie-Plain"; font-size:20.8px;} .contentContainer--mediaContent .galleryContainer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch} .galleryContainer .photoGallery{display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;margin-top:10px;margin-bottom:10px;width:100%} .videoContainer .videoGallery .title,.galleryContainer .photoGallery .title{width:100%;margin-top:15px;padding-left:10px;line-height:2.5rem;text-transform:uppercase;font-size:28px; font-family: 'Trixie-Plain';} .galleryContainer .photoGallery .imagePanel{min-width:20%;max-width:20%;pointer-events:auto;flex:1;border:10px solid transparent;padding:0;position:relative;overflow:hidden;object-fit:cover;text-align:center} .gig-loader{border:8px solid #333;border-top:8px solid #fac43d;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite;margin:auto;display:none} ul.gallery li.active a{background-color:#fac43d;color:#000} .videoPlayerContainer{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;margin-right:0;-o-object-fit:cover;object-fit:cover} .videoPlayerContainer iframe,.videoPlayerContainer object,.videoPlayerContainer embed{position:absolute;top:0;left:0;width:100%;height:100%} .videoContainer .videoGallery{display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;margin-top:10px;margin-bottom:10px;width:100%;background-color:#000} .videoContainer .videoGallery .imagePanel{min-width:33.3%;max-width:33.3%;pointer-events:auto;flex:1;border:10px solid transparent;padding:0;position:relative;overflow:hidden;object-fit:cover;text-align:center} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (min-width: 992px) { .burger-menu { display: none; } } @media only screen and (min-width: 768px) { .gig{flex-wrap:nowrap} .gig .date,.gig .location,.gig .venue{flex-basis:25%} .gig .tickets{flex-basis:25%;text-align:right} } @media (max-width: 991px) { nav ul { flex-direction: column; } .po-header-left { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-right: 0; } .po-header-right { position: fixed; top: 70px; left: 0; width: 100%; height: calc(100% - 70px); visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out; pointer-events: none; background-color: #000; flex-direction: column; padding: 15px; justify-content: center; transform: translateX(-100%); } .po-header-right nav { margin: 0; } html.nav-expanded.po-header-right { transition: all 0.3s ease-in-out; } nav ul li a { padding: 5px 0; display: block; font-size:28px; } .social-icons a:first-child { margin-left: 0; } .social-icons { margin-top: 20px; justify-content:center; } label.floating-label{height: 55px;} .galleryContainer .photoGallery .imagePanel{ min-width: 33%; max-width: 33%;} .videoContainer .videoGallery .imagePanel{ min-width: 50%; max-width: 50%;} .social-icons.desktop{ display: none;} .social-icons.mobile{ width: auto;} } @media (min-width: 992px) { .logo{ font-size: 1.75vw; float:left} .social-icons.mobile{ display: none;} } @media only screen and (min-width: 1024px) and (max-width: 1366px) { .social-icons.desktop{ width: 7.2%;} } @media (max-width: 768px) { body{background-image:none;background-color:#1e1e1e} .gig{text-align:center!important} .gig a{display:block;width:100%} .mb-only{ display: flex;} .desktop-only{ display: none;} .home.video-container{ display: flex;} .video-container img.mb-only{ display: block; max-width: 500px; margin: auto; height: auto; width: 100%;} .galleryContainer .photoGallery .imagePanel{ min-width: 50%; max-width: 50%; } .videoContainer .videoGallery .imagePanel{ min-width: 100%; max-width: 100%;} } @media (max-width: 575px){ textarea.inputText + label.textarea-label { line-height: 20px;} } @media (max-width: 485px) { label.textarea-label { line-height: 20px; padding-top: 7px; } #contact_make_enquiry #contact_message{ padding-top: 45px;} .galleryContainer .photoGallery .imagePanel{ min-width: 100%; max-width: 100%;} } @media (max-width: 359px) { .logo{font-size:1.2em} }