@charset "utf-8";

/*
Theme Name: Legion
Version 1.0
Author: Mindful Creative
Author URI: https://mindfulcreative.io/
Last major update: 02.04.19
*/

/* Transitions */
.loader, a, header, #mobile, #mobile nav, #mobile .bg, header .logo, header nav, header .logo a img, a, .button, .line-v, .line-h, .controls i, input, select, textarea, .bucket, .copy, .inner, .bucket img, button.hamburger, #setlist, #setlist i {-webkit-transition:all 0.5s;transition:all 0.5s;}

/* User Select */
img, h1, h2, h3, h4, h5, h6, .button, header, .bucket, footer, nav a, .songs {user-select:none;-moz-user-select:none;}

/* Placeholders */
::-webkit-input-placeholder {user-select:none;-moz-user-select:none;}
::-moz-placeholder {;user-select:none;-moz-user-select:none;}
:-ms-input-placeholder {user-select:none;-moz-user-select:none;}
:-moz-placeholder {user-select:none;-moz-user-select:none;}

/* e404 */
.error404 #hero {height:100%;max-height:100%;}
.error404 footer, .error404 nav ul {display:none;}

/* Globals */
*, *:after, *:before {-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;position:relative;outline:none;}
.container {width:100%;padding:0 30px;z-index:1;}
.row {width:100%;max-width:1140px;margin:0 auto;zoom:1;}
.row:before, .row:after {content:'';display:table;}
.row:after {clear:both;}
.smoothscroll {height:auto!important;}

.anchor {display:block;visibility:hidden;position:absolute;top:0;height:75px;margin-top:-75px;}

/*
.loader {background-color:#000;position:fixed;width:100%;height:100%;z-index:1000;-webkit-transition-delay:.75s;-moz-transition-delay:.75s;-o-transition-delay:.75s;transition-delay:.75s;}
.loader img {position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:170px;height:55px;}
.loaded .loader {opacity:0;pointer-events:none;}
*/

body, html {width:100%;height:100%;font-family:'Proxima Nova',sans-serif;font-size:16px;color:#FFF;background-color:#000;}
a {text-decoration:none;cursor:pointer;}
a:hover {text-decoration:none;}
ul {list-style:none;}
img {max-width:100%;}

main .container {padding:75px 30px;}

h1 {font-size:32px;text-align:center;text-transform:uppercase;font-weight:800;color:#D92225;}
h2 {font-size:23px;text-align:center;font-weight:bold;}
h2 span {color:#D92225;}
h1 + h2 {margin-top:15px;}
h2 a {color:#FFF;}
h2 a:hover {color:#D92225;}

p {width:100%;max-width:750px;line-height:1.65;margin:20px auto 0;text-align:center;}
p:first-child {margin-top:0;}

main .button {margin-top:30px;}

/* Buttons */
.button {text-align:center;cursor:pointer;display:block;line-height:1.1;margin:20px auto 0;width:103px;height:103px;font-size:17px;text-transform:uppercase;font-weight:700;pointer-events:all!important;border-radius:100%;border:5px #D92225 solid;padding:28px 10px 0;color:#FFF;background-color:transparent;}
.button:hover {background-color:#D92225;color:#FFF;}

/* Header */
header {height:105px;position:fixed;z-index:3;width:100%;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.scrolled header {background-color:rgba(0,0,0,.975)!important;height:75px;}

header .logo {display:inline-block;position:relative;z-index:1;cursor:pointer;}
header .logo a {padding:15px 0;height:105px;display:inline-block;}
header .logo a img {height:75px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}

.scrolled header .logo a {padding:10px 0;height:75px;}
.scrolled header .logo a img {height:55px;}

/* Main Navigation */
header nav ul {position:absolute;right:0;top:0;-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s;}
header nav ul li {display:block;float:left;}
header nav ul li a {cursor:pointer;text-align:center;font-size:13px;color:#FFF;letter-spacing:.085em;display:block;width:auto;line-height:101px;text-transform:uppercase;transition-property:color,height,line-height;-moz-transition-property:color,height,line-height;-o-transition-property:color,height,line-height;-webkit-transition-property:color,height,line-height;height:105px;border-top:5px solid transparent;padding:0 20px;}
header nav ul li a:hover {color:#D92225;}
header nav ul li a.active {color:#D92225;border-top:5px solid #D92225;}

.scrolled header nav ul li a {height:75px;line-height:71px;}

/* Hero */
#hero {height:100%;max-height:800px;}
#hero .container {height:100%;display:table;}
#hero .row {display:table-cell;vertical-align:middle;padding-top:52.5px;}

#hero h1 img {max-width:550px;width:100%;}
#hero h2 {font-size:27px;max-width:740px;margin:0 auto;}
/*#hero .button {padding-top:22px;}*/

/* Section Globals */
#members {margin-top:37.5px;}
#buckets, #members, #gigs, #gallery {margin-bottom:37.5px;}

/* Gigs */
.widgettitle {display:none;}
#xtfacebook_page_widget-2 {display:table;margin:30px auto 0;}

/* Bands */
.bands {display:table;margin:0 auto;text-align:center;}
.bands:nth-of-type(1) {margin-top:20px;}
.bands img {max-width:115px;display:inline-block;margin:10px;}

/* Bucket Globals */
.buckets.container {padding:0;}
.buckets .row {max-width:100%;}

.bucket {display:block;float:left;overflow:hidden;background-color:#000;width:33.33%;}
#intro .bucket {width:33.33%;}
#members .bucket {width:25%;}
#gallery .bucket {width:20%;}

.bucket a, .bucket img {display:block;}

/* Members */
.copy {position:absolute;bottom:0;z-index:2;width:100%;text-align:center;height:75px;}
.bucket:hover .copy {height:100%;}

.copy h3 {color:#FFF;font-size:38px;font-weight:700;text-transform:uppercase;line-height:1;}
.copy h4 {font-size:21px;font-weight:500;}

.inner {top:0%;}
.bucket:hover .inner {transform:translateY(-50%);-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);top:50%;text-shadow:0 0 20px rgba(0,0,0,.75);}

#members img {width:100%;opacity:.65;}
#members .bucket:hover img {opacity:.95;}

/* Gallery */
#gallery:hover .bucket {opacity:.5;}
#gallery .bucket:hover {opacity:1;}
#gallery i {position:absolute;left:0;top:0;bottom:0;right:0;z-index:1;color:#FFF;margin:auto;font-size:60px;pointer-events:none;text-shadow:0 0 75px rgba(0,0,0,1);width:60px;height:60px;}

/* Set List */
#setlist {background-color:rgba(0,0,0,.7);position:fixed;width:100%;height:100%;z-index:1001;display:table;opacity:0;pointer-events:none;}
#setlist.is-active {opacity:1;pointer-events:all;}
#setlist .container {display:table-cell;vertical-align:middle;padding:20px;}
#setlist .row {background-color:#000;max-width:800px;padding:30px;height:100%;overflow-y:scroll;}
#setlist .setlist {-moz-column-count:3;-webkit-column-count:3;column-count:3;}
#setlist .row .songs {margin-top:20px;display:inline-block;width:100%;}

#setlist h2 {text-align:left;font-weight:600;}
#setlist h3 {text-align:center;font-weight:normal;}
#setlist li {font-size:18px;}
#setlist i {position:absolute;top:15px;right:15px;font-size:22px;cursor:pointer;}
#setlist i:hover {color:#D92225;}

/* width */
#setlist ::-webkit-scrollbar {
  width: 10px;
}

/* Handle */
#setlist ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.5);
}


/* Contact Form */
form {width:100%;max-width:400px;margin:30px auto 0;}
form label {display:none;}
form label.wpforms-error {margin-top:5px;display:block;}
form .wpforms-field, form .wpforms-submit-container {margin:15px 0 0;padding:0;}
form .wpforms-field:first-child {margin-top:0;}
form div.wpforms-container-full .wpforms-form .wpforms-field {padding:0;}

form .wpforms-field input, form .wpforms-field textarea {font-weight:600;background-color:#FFF;width:100%;height:55px;border:0;padding:3px 18px 0;font-size:16px;font-family:'Proxima Nova',sans-serif;}
form .wpforms-field input:hover, form .wpforms-field textarea:hover, form .wpforms-field input:focus, form .wpforms-field textarea:focus {color:#000;background-color:rgba(255,255,255,.75);}
form .wpforms-field textarea {resize:none;height:150px;line-height:30px;padding-top:15px;padding-right:20px;}

main form .button {margin-top:0;padding-top:5px;}

#contact p:first-child {margin-top:20px;}

.wpforms-field.wpforms-field-hp {display:none;}

/* Footer*/
footer .logo {display:block;max-width:200px;margin:0 auto;width:100%;}

footer .copyright {text-transform:uppercase;letter-spacing:1px;font-size:13px;color:#FFF;padding:15px 0;text-align:center;line-height:1.7;cursor:default;}
footer .copyright a {color:#D92225;}
footer .copyright a:hover {text-decoration:underline;}

/* Mobile Menu*/
#mobile {position:fixed;right:0;top:0;z-index:999;opacity:0;pointer-events:none;}
#mobile nav {opacity:0;width:100%;height:100%;z-index:999;text-align:center;background-color:#000;top:0;bottom:0;left:0;right:0;bottom:0;pointer-events:none;position:fixed;}
#mobile nav.active {opacity:1;z-index:999;pointer-events:all;}
#mobile nav ul {left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);}
#mobile nav ul li a {font-size:17px;color:#FFF;font-weight:700;letter-spacing:2.5px;display:block;padding:20px 0;text-transform:uppercase;}
#mobile nav ul li a:hover, #mobile nav ul li a.active {color:#D92225;}
#mobile nav ul li a i {display:none;}

button.hamburger {position:absolute;top:14px;right:14px;}
.hamburger-box {width:30px;height:19px;}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {background-color:#FFF;width:30px;height:3px;-webkit-transition:transform ease .15s,background-color 0.5s!important;-moz-transition:transform ease .15s,background-color 0.5s!important;-o-transition:transform ease .15s,background-color 0.5s!important;transition:transform ease .15s,background-color 0.5s!important;}
.hamburger:hover {opacity:1;}
.hamburger:hover .hamburger-inner, .hamburger:hover .hamburger-inner:after, .hamburger:hover .hamburger-inner:before {background-color:#D92225;}
.hamburger-inner:before {top:-8px;}
.hamburger-inner:after {bottom:-8px;}

/* Responsive */
@media handheld, only screen and (max-width:1080px) {
header {height:75px;}
header .logo a {padding:10px 0;height:75px;}
header .logo a img {height:55px;}

header nav ul {opacity:0;pointer-events:none;}
#mobile {opacity:1;pointer-events:all;}
button.hamburger {opacity:1;}
button.hamburger.is-active {z-index:9999;}
}

@media handheld, only screen and (max-width:1300px) {
#gallery .bucket {width:33.33%;}
}

@media handheld, only screen and (max-width:1200px) {
.copy {height:65px;}
.copy h3 {font-size:28px;}

#bands span {display:block;}
}

@media handheld, only screen and (max-width:1000px) {
#buckets .buckets {padding:30px 30px 0;}
#buckets .bucket, #members .bucket {width:50%;}
#buckets .bucket:nth-child(1) {padding-right:15px;}
#buckets .bucket:nth-child(2) {padding-left:15px;}
#buckets .bucket:nth-child(3) {float:none;margin:0 auto;padding-top:30px;}
}

@media handheld, only screen and (max-width:900px) {
#hero h1 img {max-width:475px;}
#hero h2 {font-size:23px;}
}

@media handheld, only screen and (max-width:800px) {
#gallery .bucket {width:50%;}

#setlist .setlist {-moz-column-count:2;-webkit-column-count:2;column-count:2;}
}

@media handheld, only screen and (max-width:700px) {
#buckets .buckets, #buckets .bucket:nth-child(1), #buckets .bucket:nth-child(2), #buckets .bucket:nth-child(3) {padding:0;}
#buckets .bucket:nth-child(1), #buckets .bucket:nth-child(3) {display:none;}
#buckets .bucket, #buckets .bucket img {width:100%;}

main .container {padding:30px;}
#members {margin-top:15px;}
#buckets, #members, #gigs, #gallery {margin-bottom:15px;}
}

@media handheld, only screen and (max-width:650px) {
#bands span {display:inline;}
}

@media handheld, only screen and (max-width:575px) {
#hero {max-height:100%;}
#hero h2 br {display:none;}

#setlist .setlist h2 {font-size:21px;}
#setlist .setlist li {font-size:17px;}
}

@media handheld, only screen and (max-width:500px) {
#setlist .setlist {-moz-column-count:1;-webkit-column-count:1;column-count:1;text-align:center;}
#setlist .setlist h2 {text-align:center;}
}