@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Comfortaa:300,400,700);
@import url(https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap);

@font-face {
  font-family: 'MarvinVisions';
  src: url('/fonts/MarvinVisions-Bold.eot'); /* IE9 Compat Modes */
  src: url('/fonts/MarvinVisions-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/MarvinVisions-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/MarvinVisions-Bold.woff') format('woff') /* Pretty Modern Browsers */
}
@font-face { font-family: 'Serif Gothic'; src: url('/fonts/SerifGothicStd.otf') format('opentype'); }
@font-face { font-family: 'Serif Gothic'; src: url('/fonts/SerifGothicStd-Bold.otf') format('opentype'); font-weight: bold; }
@font-face { font-family: 'Serif Gothic'; src: url('/fonts/SerifGothicStd-Light.otf') format('opentype'); font-weight: 300; }

/*** GLOBALS ***/

html, body {overflow-x: hidden;}
html, body, div, table, td {box-sizing: border-box;}

.uk-container {max-width: 100vw !important; padding: 0 !important; background: transparent;}

.uk-grid {margin-left: 0px;}
.uk-grid > * {padding-left: 0px;}
.uk-grid + .uk-grid {margin-top: 0px;}

img {max-width: 100%;}
hr {margin: 10px 0px;}

  @media (orientation:landscape) {
    .uk-hidden-landscape {display: none !important;}
  }
  @media (orientation:portrait) {
    .uk-hidden-portrait {display: none !important;}
  }

#follow, #showcase, #news, #music, #gallery {overflow: hidden !important;}

/*** GENERAL TYPOGRAPHY ***/

html {font: normal 14px / 20px 'Open Sans', Helvetica, Arial, sans-serif; color: #000;}
a, .uk-link {color: #04f;} a:hover, .uk-link:hover {color: #4af; text-decoration: none;}
p, ul, ol, dl, blockquote, pre, address, fieldset, figure {margin: 0 0 10px 0;}
* + p, * + ul, * + ol, * + dl, * + blockquote, * + pre, * + address, * + fieldset, * + figure {margin-top: 0px;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 15px 0; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: normal; color: #000; text-transform: none;}
* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {margin-top: 0px;}

.heading {font-family: 'MarvinVisions','Serif Gothic',Helvetica,Arial,Sans-Serif; letter-spacing: 2px; font-weight: 600; font-size: 60px; line-height: 40px; padding: 20px; margin-bottom: 0px;}
.heading.left {margin-left: -50px;}
.heading.right {margin-right: -50px;}
@media (max-width: 767px) { .heading {font-size: 40px; line-height: 30px; margin-bottom: 10px;} }
@media (max-width: 479px) { .heading {font-size: 30px; line-height: 20px; margin-bottom: 10px;} }

/*** SHOWCASE ***/

#showcase, #showcasebg {
  height: 100vh; position: relative;
}
#showcasebg {
  background: url('/images/FD-fence-blue-sky.jpg');
  background-repeat: no-repeat;
  background-position: 50% 62.5%;
  background-attachment: fixed;
  background-size: cover;
  transition: .2s ease-out;
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  transition-property: background-position;
  -webkit-transition-property: background-position;
  -moz-transition-property: background-position;
  -o-transition-property: background-position;
  z-index: -1;
}
#showcase .logo { position: absolute; top: 0; right: 0; z-index: 20; animation-delay: 0s; animation-duration: 2s;}
#showcase .logo > img {width: 50vw; margin: 10px; -webkit-filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5)); filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));}
#showcase .caption { position: absolute; top: 350px; left: 0; z-index: 30; animation-delay: 1s; animation-duration: 2s; padding: 20px 50px 10px 100px; background: rgba(0,0,0,0.9); width: fit-content;}
#showcase .caption2 { position: absolute; top: calc(20vh + 100px); left: 25%; z-index: 30; animation-delay: 1s; animation-duration: 2s; padding: 50px; background: rgba(0,0,0,0.7); width: 50%;}
#showcase .arrow {position: absolute; bottom: 0; right: 0; z-index: 20; animation-delay: 2s; animation-duration: 1s; margin: 10px; padding: 10px;}
#showcase .arrow > a > img {width: 50px; -webkit-filter: drop-shadow(0px 0px 3px #fd0); filter: drop-shadow(0px 0px 3px #fd0); }
#showcase .follow {
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: #ffff88;
  font-size: 20px;
  line-height: 36px;
  font-weight: 400;
}
#showcase .follow:hover {
  color: #ffffff;
}
#showcase .follow::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -5px;
  bottom: -5px;
  left: -0.5em;
  right: -0.5em;
  background-color: #0077dd;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}
#showcase .follow:hover::before {
  transform: scaleX(1);
  transform-origin: center left;
}

  @media (max-width: 960px) {
    #showcase .logo > img {width: 40%;}
    #showcase .caption2 {padding: 25px; left: 10%; width: 80%;}

    @media (orientation:portrait) {
      #showcasebg { background-image: url('/images/fd-city-sky_sm.jpg'); }
      #showcase .logo { position: absolute; top: 0; left: 0; right: 0; z-index: 20; animation-delay: 0s; animation-duration: 2s; -webkit-animation-name: uk-fade-top; animation-name: uk-fade-top; text-align: center !important; }
      #showcase .logo > img {width: 90%; margin: 10px; -webkit-filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5)); filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));}
      #showcase .caption {bottom: 0px; top: auto; padding: 20px 20px 10px; background: rgba(0,0,0,0.7);}
      #showcase .arrow { position: absolute; bottom: 0; left: 0; right: 0;}
    }
  }/* END: <767px */


/*** MENU ***/

#follow {background: #000; background: linear-gradient(0deg, rgba(100,20,25,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(100,20,25,1) 100%);}
#follow #commercial {height: 60px;}
#menu > div {max-width: 500px; margin: 0 auto;}
#menu a {font-size: 24px; line-height: 60px; font-family: 'Serif Gothic'; font-weight: bold; display: inline-block; color: #fff;}
#menu a:hover {color: #eb0; text-decoration: none !important; transition-duration: 0.2s;}
#social img {height: 60px; padding: 15px 10px;}
#social img:hover {transform: scale(1.2); transition-duration: 0.2s;}

  @media (max-width: 767px) {
    #menu > div {padding: 0 15px; margin: 0 auto;}
    #menu a {font-size: 18px; line-height: 60px; font-family: 'Serif Gothic'; font-weight: bold; display: inline-block; color: #fff;}
  }

/*** MUSIC ***/

#music {

}
#music, #musicbg {
  position: relative;
}
#musicbg {
  background: url('/images/fd5.jpg');
  background-repeat: no-repeat;
  background-position-x: 35%;
  background-position-y: 50%;
  background-attachment: fixed;
  background-size: cover;
  width: 3000px;
  height: 600px;
  animation-duration: 1.7s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#music > .container {
  text-align: center;
}
#flyer {
  max-width: 50%;
  transform: translateX(100px);
  animation-duration: 1.7s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
#showlink {
  padding: 40px 20px;
  transform: translateX(-100px);
  animation-duration: 1.7s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
#showlink img {
  max-width: 200px;
}
@media (max-width: 600px) {
  #music > .container {flex-wrap: wrap !important;}
  #flyer {max-width: 100%;}
}

/* @keyframes moveright {
  0% { background-position-x: 35%; }
  100% { background-position-x: 25%; }
} */
@keyframes moveright {
  0% { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0px); }
}
@keyframes moveleft {
  0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0px); }
}
@media (max-width: 880px) {
  #music > .container {
    width: 100%;
  }
}

#music .uk-grid {padding: 5px;}
#music .uk-grid .covers {padding: 5px; animation-duration: 1s !important;}
#music .uk-overlay-panel h2 {font-size: 24px;}
#music .uk-overlay-panel img {width: 50%;}
#music .uk-overlay-background {background: rgba(0,0,0,.7);}

#music .tickets {
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: #bbddff;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
}
#music .tickets::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -5px;
  bottom: -5px;
  left: -0.5em;
  right: -0.5em;
  background-color: #0077dd;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}
#music .tickets:hover::before {
  transform: scaleX(1);
  transform-origin: center left;
}



#music .readon > div {border: 1px dashed #bbb;}
#music .readon > div > h2 {color: #bbb;}
#music .readon:hover > div > h2 {color: #8cf; text-decoration: underline; transition-duration: 0.5s;}

#music .vid1 {width: 810px; margin: 0 auto 10px;}
#music .frame {padding: 35px 25px 25px;}
#music .heading {background: #aaa; color: #000;}
#music .flyer {width: fit-content; margin: 0 auto; max-width: 1440px;}
#music .flyer .uk-width-large-2-3 {max-width: 900px;}

  @media (max-width: 1219px) {
    #music .vid1 {width: 90%;}
  }

  @media (max-width: 767px) {
    #music > div {padding: 15px 10px 35px;}

    #music .uk-animation-fade, #music .uk-grid .covers {animation-delay: 0s !important; animation-duration: 0s !important; opacity: 1 !important; visibility: visible !important; }
    #music .uk-grid .covers {padding: 0;}
    #music .covers:not(:last-child) {border-bottom: 1px solid #bbb;}
    #music .uk-overlay {padding: 30px 10px;}
    #music .uk-overlay > img {width: 52%; margin-top: 30px;}
    #music .uk-overlay-panel {display: block; position: relative; width: 43%; background: rgba(0,0,0,0) !important; padding: 0px; opacity: 1 !important; float: right; padding: 0px; text-align: left !important;}
    #music .uk-overlay-panel h2 {font-size: 20px; line-height: 12px; color: #000; font-weight: 400; margin-bottom: 12px; position: relative; left: -133%; width: 100vw;}
    #music .uk-overlay-panel img {width: 80%;}
  }

/*** MERCH ***/

#merch {padding: 0px 0px 50px; background-image: url('/images/fd3_dark.jpg'); background-repeat: no-repeat; background-position: 50% 50%; background-attachment: fixed; background-size: cover;}
#merch .frame {padding: 35px 25px 50px;}
#merch .heading {color: #000; background: rgba(200,200,200,0.6); margin-bottom: 0;}

/* #merch .prods { background: #000; min-height: 300px;} */
#merch #comingsoon {height: 100%;}
#merch #comingsoon h1 { color: #ffffff; font-family: 'Permanent Marker', cursive; font-size: 40px;}
#merch .prods h1 { color: #ffffff; font-family: 'Permanent Marker', cursive; font-size: 50px;}
#merch .prods h2,#merch .prods h3 { color: #bbbbbb; font-weight: 300; }
#merch .prods .thumb { height: 225px; width: auto; border: 1px solid #0000aa;}
#merch select {padding: 2px; background: #ddffff; margin-bottom: 5px;}
#merch .disclaim {max-width: 60vw;}
#merch input[type="image" i]:disabled {
    filter: brightness(0.6) grayscale(1);
}

@media (max-width: 767px) {
  #merch .prods {margin-bottom: 35px;}
  #merch .disclaim {max-width: 90vw;}
  #merch #comingsoon {height: auto;}
}

/*** GALLERY ***/

#gallery {padding: 0px 0px 50px; background-image: url('/images/fd6.jpg'); background-repeat: no-repeat; background-position: 75% 0; background-attachment: fixed; background-size: auto 100vh;}
#gallery .frame {background: #000; padding: 35px 25px;}
#gallery .heading {color: #000; background: #aaa; margin-bottom: 0;}

#gallery .uk-grid {background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.4) 90%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0.4) 90%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0.4) 90%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

#gallery .pics {
  background: #000;
  height: 33vh;
}
#gallery .pics > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/*** CONTACT ***/

#contact {min-height: calc(100vh - 100px); height: 100%; text-align: left; color: #fff; background-image: url('/images/fd6.jpg'); background-repeat: no-repeat; background-position: 75% 0; background-attachment: fixed; background-size: cover;}
#contact p {font-size: 1.2rem; line-height: 1.8rem;}
#contact .container {min-height: calc(100vh - 100px); height: 100%;}
#contact .uk-width-medium-3-5 {padding-left: 20px;}
#contact .heading h1 {color: #888; font-weight: 700; font-size: 7vh; margin: 0px 0px 40px -10vw; line-height: 8vh; padding: 10px 20px 10px 0px; background: #333; text-align: right;}
#contact .uk-flex {padding-bottom: 20px;}
#contact .uk-flex > div {font-weight: 600; font-size: 16px; line-height: 22px; color: #000; padding: 0 10px 10px 0;}
#contact .uk-flex > div a {font-weight: normal;}
#contact .uk-flex .social {line-height: 26px;}

  @media (max-width: 1219px) {
    #contact .uk-flex {flex-wrap: wrap;}
    #contact .uk-flex > div {width: 100%;}
    #contact .uk-flex .social {padding-top: 10px;}
  }

/*** RESPONSIVE QUERIES ***/


@media (max-width: 767px) { /* Small */
  .uk-visible-xlarge {display: none !important;}
  .uk-container {-webkit-overflow-scrolling: touch; padding: 0px;}
  .uk-offcanvas-bar {max-width: 35%; background: #333;}
  .uk-nav-offcanvas > li > a {padding: 20px;}

  #news {padding: 15px 5px 35px;}
  #news .heading {margin: 5px -2vw 10px 10px !important; color: #000; font-weight: 700; font-size: 40px; line-height: 50px; padding: 10px 0px 0px 20px; background: #ddd;}
  #news .uk-grid .article {padding: 10px !important;}
  #news .uk-grid .article article {padding: 20px !important; background: #ddd;}



  #gallery {padding: 15px 0px; background: #000;}
  #gallery .heading h1 {margin: 0px -25px 15px 15px !important; color: #000; font-weight: 700; font-size: 40px; line-height: 50px; padding: 10px 0px 0px 20px; background: #aaa;}
  #gallery .pics > img {animation-delay: 0s !important; animation-duration: 0s !important; opacity: 1 !important; visibility: visible !important; delay:0 !important;}

  #contact {background: #ccc;}
  #contact .uk-width-medium-2-5 {padding: 75px 15px 15px;}
  #contact .heading h1 {color: #888; font-weight: 700; font-size: 40px; line-height: 50px; margin: 0px 0px 40px -10vw; padding: 10px 20px 10px 0px; background: #333; text-align: right;}
  #contact table td:first-child {font-weight: 700; text-align: right; width: 80px; padding-right: 10px;}
} /* END: 767px */

@media (min-width: 768px) { /* Medium, Large and XLarge */




  #news .heading {color: #000; font-weight: 700; font-size: 7vh; margin: 0px -2vw 40px 5px; line-height: 8vh; padding: 10px 0px 0px 20px; background: #ddd;}


  iframe .title {display: none !important;}

}

@media (min-width: 481px) {
  .uk-visible-phone {display: none !important;}
}
@media (min-width: 768px) and (max-width: 959px) { /* Medium Only */
  .uk-visible-xlarge {display: none !important;}
  #gig2-overlay, #poster2-overlay, #gig3-overlay, #poster3-overlay {font-size: 18px;}
  #gig2-overlay i, #poster2-overlay span, #gig3-overlay i, #poster3-overlay span {font-size: 100%; margin-bottom: 5px;}
}
@media (min-width: 960px) and (max-width: 1219px) { /* Large Only */
  .uk-visible-xlarge {display: none !important;}
  #gig2-overlay, #poster2-overlay, #gig3-overlay, #poster3-overlay {font-size: 20px;}
}
@media (min-width: 1220px) { /* XLarge Only */
  .uk-hidden-xlarge {display: none !important;}

  /* #news .uk-grid {max-width: 1200px;} */
}
@media (min-width: 960px) { /* Large + XLarge */
  #contact {min-height: calc(100vh - 100px);}
}


/*** CUSTOM THEME FORMATTING ***/

@media (min-width: 469px) {
  .uk-phone {display: none;}
}



@media (max-width: 910px) {
  #commercial {display: none;}
  #menu {width: 100% !important;}
  #social {display: none;}
  #footer > div > div {font-size: 13px;}
}
@media (min-width: 911px) and (max-width: 1349px) {
  #commercial {width: 25% !important;}
  #menu {width: 50% !important;}
  #social {width: 25% !important;}
  #footer > div > div {font-size: 14px;}
}
@media (min-width: 1350px) {

  #footer > div > div {font-size: 16px;}
}

#news {background: #aaa;}
#news h3 {font-weight: 600;}
#news h6 {color: #444;}
#news .article > img {box-shadow: 0px 0px 8px #888;}


/* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */

#mc_embed_signup {background:none; clear:left; width:calc(100% - 20px);}
#mc-embedded-subscribe-form{text-align:left!important;}
#mc_embed_signup form {text-align:left; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #000000; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width: calc(100% - 100px); vertical-align:top;}
#mc_embed_signup label {color: #202020; display:block; font-size:16px; padding-bottom:10px; font-weight:600!important;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 14px; border: none; color: #fff; background-color: #555; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s; font-weight: 400;}
#mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#090; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}


/*** CUSTOM THEME TYPOGRAPHY ***/

#showcase .section2 h1 a {color: #000 !important;}
#showcase .section2 h1 a:hover {color: #008 !important; text-decoration: none !important;}

.button1 {padding: 15px 25px; color: #fff !important; background: #05f; font-size: 24px; font-weight: 600;}
.button1:hover {background: #00f; text-decoration: none !important;}
.button2 {padding: 13px 23px; color: #fff !important; border: 2px solid #fff; font-size: 24px; font-weight: 400;}
.button2:hover {background: #fff; color: #05f !important; text-decoration: none !important;}

/*** CUSTOM ANIMATION ***/

.uk-animation-darken {
  -webkit-animation-name: uk-darken;
  animation-name: uk-darken;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-timing-function: linear !important;
  animation-timing-function: linear !important;
}

@-webkit-keyframes uk-darken {
	0% {
		background-color: rgba(0,0,0,0);
    opacity: 0;
	}
	100% {
		background-color: rgba(0,0,0,0.7);
    opacity: 1;
	}
}
@keyframes uk-darken {
	0% {
		background-color: rgba(0,0,0,0);
    opacity: 0;
	}
	100% {
		background-color: rgba(0,0,0,0.7);
    opacity: 1;
	}
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}