@CHARSET "ISO-8859-1";
/* Reset CSS --------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; font-size: 14px; }

a { text-decoration: none; }

table { border-spacing: 0; }

fieldset, img { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal; }

strong { font-weight: bold; }

ol, ul { list-style: none; margin: 0; padding: 0; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; margin: 0; padding: 0; color: #fff; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; }

/* Centered texts in each section --------------------------------------- */
.section { text-align: center; }

/* Backgrounds will cover all the section --------------------------------------- */
#section0, #section1, #section2, #section3, #slide1, #slide2 { background-size: cover; background-attachment: fixed; background-position: center top center; }

/* Defining each sectino background and styles --------------------------------------- */
#section0 { background-image: url(../images/bgListen.jpg); padding: 10% 0 0 0; }

@media (min-width: 576px) { #section0 { padding: 0%; } }

#section1 { background-image: url(../images/bgAbout.jpg); padding: 10% 0 0 0; }

#section2 { background-image: url(../images/bgNews.jpg); padding: 0% 0 0 0; }

#section2 { font-size: 1.4em; }

#section3 { background-image: url(../images/bgContact.jpg); padding: 0% 0 0 0; }

#section3 p { font-size: 1.2em; line-height: 1.2em; }

/*Adding background for the slides --------------------------------------- */
/* #slide1{ background-image: url(imgs/bg2.jpg); padding: 6% 0 0 0; } #slide2{ background-image: url(imgs/bg5.jpg); padding: 6% 0 0 0; } */
/* Fixed header and footer. --------------------------------------- */
#header, #footer { position: fixed; height: 40px; display: block; width: 100%; z-index: 70; /* 		text-align:center; */ color: #f2f2f2; padding: 0px; margin: 0px; }

#header { top: 0px; }

#footer { bottom: 0px; }

a { color: white; }

/* Bottom menu --------------------------------------- */
#infoMenu li a { color: #fff; }

/* Custom CSS --------------------------------------- */
body { font-family: 'ocr-b-std', monospace; color: #fff; color: rgba(0, 0, 0, 0.5); }

.wrap { margin-left: auto; margin-right: auto; width: 960px; position: relative; }

h1 { font-size: 1.4em; letter-spacing: -1px; }

@media (min-width: 576px) { h1 { font-size: 1.8em; letter-spacing: -1px; } }

p { font-size: 1em; color: white; text-align: left; letter-spacing: -2px; line-height: 1.2em; text-shadow: 0px 0px 1px black; padding: 0.4em; }

#section2 h1 { padding-top: 3px; }

#section2 p { padding-top: 0px; }

@media (min-width: 576px) { p { padding: 0.9em; line-height: 1.5em; } }

#blackBackground { background-color: rgba(0, 0, 0, 0.2); }

.intro p { width: 50%; margin: 0 auto; font-size: 1.5em; }

.section { text-align: center; }

/* Menu -------------------------------------------*/
#menu li { display: inline-block; color: #FFF; font-size: 1em; margin: 0px; width: auto; padding: 2px 0px; text-align: center; box-sizing: border-box; }

@media (min-width: 576px) { #menu li { width: auto; padding: 10px 0px; text-align: left; } }

#menu li.active { color: #fff; border-bottom: 3px solid #FFF; background: rgba(0, 0, 0, 0.5); }

#menu li a { text-decoration: none; color: #fff; }

#menu li.active a:hover { color: #fff; }

#menu li:hover { background: rgba(0, 0, 0, 0.5); }

#menu li a, #menu li.active a { padding: 5px 6px; display: block; }

#menu li.active a { color: #fff; }

/* Socials -------------------------------------------*/
#socials { margin: auto; width: auto; }

#socials li { display: inline-block; padding: 0px; color: #FFF; margin: 0px; }

#socials li.active { color: #fff; border-bottom: 3px solid #FFF; }

#socials li a { text-decoration: none; color: #fff; }

#socials li.active a:hover { color: #fff; }

#socials li a, #socials li.active a { padding: 5px 1px; display: block; }

#socials li.active a { color: #fff; }

#socials i { font-size: 1.4em; }

@media (min-width: 576px) { #socials i { font-size: 2em !important; display: inline-block; } }

#socials.large i { font-size: 4em !important; }

li a i.fa-spotify:hover { color: #1db954; transition: color 0.5s ease; }

li a i.fa-instagram:hover { color: #d6249f; transition: color 0.5s ease; }

li a i.fa-facebook:hover { color: #3b5998; transition: color 0.5s ease; }

#socials li:hover { -webkit-animation: pulse 1s; animation: pulse 1s; }

#spotifyEmbed { max-height: 180px !important; }

/* Responsive Iframe */
.resp-container { position: relative; overflow: hidden; padding-top: 56.25%; max-height: 180px !important; }

.resp-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; max-height: 180px !important; }

/* Music Links -------------------------------------------*/
#musicLinks { margin: 0px; padding: 0px; }

#musicLinks li { display: inline-block; padding: 0px; color: #FFF; margin: 0px; float: left; width: 100%; }

li.spotify { background-color: #07DA73; }

#musicLinks li:hover { -webkit-filter: brightness(150%); transition: all 1s ease; margin-bottom: -10px; }

.twitter-share-button { position: fixed; z-index: 99; right: 149px; top: 9px; }

#infoMenu { height: 20px; color: #f2f2f2; position: fixed; z-index: 70; bottom: 0; width: 100%; text-align: right; font-size: 0.9em; padding: 8px 0 8px 0; }

#infoMenu ul { padding: 0 40px; }

#infoMenu li a { display: block; margin: 0 22px 0 0; color: #333; }

#infoMenu li a:hover { text-decoration: underline; }

#infoMenu li { display: inline-block; position: relative; }

#examplesList { display: none; background: #282828; border-radius: 6px; padding: 20px; float: left; position: absolute; bottom: 29px; right: 0; width: 638px; text-align: left; }

#examplesList ul { padding: 0; }

#examplesList ul li { display: block; margin: 5px 0; }

#examplesList ul li a { color: #BDBDBD; margin: 0; }

#examplesList ul li a:hover { color: #f2f2f2; }

#examplesList .column { float: left; margin: 0 20px 0 0; }

#examplesList h3 { color: #f2f2f2; font-size: 1.2em; margin: 0 0 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); padding: 0 0 5px 0; }

/* Slides Control Arrows Overrides */
#fp-nav ul li a span { background-color: white; }

.fp-controlArrow.fp-prev { border-color: transparent #000 transparent transparent; }

.fp-controlArrow.fp-next { border-color: transparent transparent transparent #000; }

@media (max-width: 576px) { .fp-controlArrow.fp-prev { left: 4px; border-width: 15px 15px 15px 0; opacity: 0.8; top: 27%; } }

@media (max-width: 576px) { .fp-controlArrow.fp-next { right: 4px; border-width: 15px 0px 15px 15px; opacity: 0.8; top: 27%; } }

.fp-slidesNav ul li a span { background-color: white; }

/* Mailchimp Inline Form */
#mc_embed_signup { border: none; text-align: center; width: 100%; }

/* Signup form container */
/* .mc-field-group { display: inline-block; } */
/* positions input field horizontally */
/* #mce-EMAIL { font-size: 0.9em; border: 0px solid #ABB0B2 ; color: #222; background-color: #fff; padding: 10px 15px;;  display: inline-block; margin: 0; letter-spacing: -3px; width: 459px; } */
/* Input Styles */
/* .clear { display: inline-block; } */
/* positions button horizontally in line with input */
/* .button { font-size: 1em; letter-spacing: -3px; color: #fff; background-color: #000 ; padding: 9px 20px; border: 0px solid #2386C8 ; display: inline-block; margin: 0; max-height: 42px; position: absolute; right: 46px; top: 0px; transition: background-color 0.5s ease; } */
/* Button Styles */
#mce-EMAIL { font-size: 0.9em; border: 0px solid #ABB0B2; color: #222; background-color: #fff; padding: 10px 15px; display: inline-block; margin: 0; letter-spacing: -2px; float: left; width: 85%; }

.button { font-size: 1em; letter-spacing: -1px; color: #fff; background-color: #000; padding: 9px 20px; border: 0px solid #2386C8; display: inline-block; margin: 0; max-height: 42px; float: left; width: 15%; transition: background-color 0.5s ease; }

.button:hover { background-color: orange; transition: background-color 0.5s ease; }

:-webkit-input-placeholder { color: #111; }

/* WebKit browsers */
:-moz-placeholder { color: #111; }

/* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #111; }

/* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #111; }

/* Internet Explorer 10+ */
@media (max-width: 540px) { /* positions input field and button underneath each other with 100% width for tablet and mobile */
  .mc-field-group { display: block; max-width: 100%; }
  #mce-EMAIL { padding: .7em 0 .7em 1em; width: 100%; margin: 0; font-size: 11px; letter-spacing: -2px; }
  .clear { display: block; width: 100%; }
  .button { width: 100%; position: inherit !important; margin: 0px 0px 0px 0px; } }

/* DOWN ARROW */
.arrowDown { color: white; bottom: 0; display: block; height: 50px; left: 50%; margin-left: -25px; position: absolute; width: 50px; }

#moveDown { -webkit-animation-play-state: paused; animation-play-state: paused; }

#moveDown:hover { -webkit-animation: bounce 2s; animation: bounce 2s; color: black; transition: color 0.5s ease; }

.shake { -webkit-animation-play-state: paused; animation-play-state: paused; }

.shake:hover { -webkit-animation: shake 2s; animation: shake 2s; }