@import url("css/FaktPro.css");

@font-face {
  font-family: 'FaktPro-Medium';
  src: url("fonts/fakt/FaktPro-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/fakt/FaktPro-Medium.otf") format("opentype"), url("fonts/fakt/FaktPro-Medium.woff") format("woff"), url("fonts/fakt/FaktPro-Medium.ttf") format("truetype"), url("fonts/fakt/FaktPro-Medium.svg#FaktPro-Medium") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FaktPro-MediumItalic';
  src: url("fonts/fakt/FaktPro-MediumItalic.eot?#iefix") format("embedded-opentype"), url("fonts/fakt/FaktPro-MediumItalic.otf") format("opentype"), url("fonts/fakt/FaktPro-MediumItalic.woff") format("woff"), url("fonts/fakt/FaktPro-MediumItalic_web.ttf") format("truetype"), url("fonts/fakt/FaktPro-MediumItalic.svg#FaktPro-MediumItalic") format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Fakt Condensed';
  src: url('fonts/FaktCondensedPro/faktconpro-blond-webfont.eot');
  src: url('fonts/FaktCondensedPro/faktconpro-blond-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/FaktCondensedPro/faktconpro-blond-webfont.woff') format('woff'), url('fonts/FaktCondensedPro/faktconpro-blond-webfont.ttf') format('truetype'), url('fonts/FaktCondensedPro/faktconpro-blond-webfont.svg#fakt_con_pro_bndregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Fakt Condensed Medium';
  src: url('fonts/FaktCondensedPro/faktconpro-medium-webfont.eot');
  src: url('fonts/FaktCondensedPro/faktconpro-medium-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/FaktCondensedPro/faktconpro-medium-webfont.woff') format('woff'), url('fonts/FaktCondensedPro/faktconpro-medium-webfont.ttf') format('truetype'), url('fonts/FaktCondensedPro/faktconpro-medium-webfont.svg#fakt_con_pro_medregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Fakt Condensed Bold';
  src: url('fonts/FaktCondensedPro/faktconpro-bold-webfont.eot');
  src: url('fonts/FaktCondensedPro/faktconpro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/FaktCondensedPro/faktconpro-bold-webfont.woff') format('woff'), url('fonts/FaktCondensedPro/faktconpro-bold-webfont.ttf') format('truetype'), url('fonts/FaktCondensedPro/faktconpro-bold-webfont.svg#fakt_con_pro_bdbold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Pitch';
  src: url('fonts/PitchWeb-Regular.eot');
  src: url('fonts/PitchWeb-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Pitch';
  src: url('fonts/PitchWeb-RegularItalic.eot');
  src: url('fonts/PitchWeb-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
}

@-webkit-keyframes greenblue {
  0% {
    color: #00943f
  }
  50% {
    color: #2b7ee1
  }
  to {
    color: #00943f
  }
}

@keyframes greenblue {
  0% {
    color: #00943f
  }
  50% {
    color: #2b7ee1
  }
  to {
    color: #00943f
  }
}

@-webkit-keyframes redgreen {
  0% {
    color: #f05a25
  }
  50% {
    color: #00943f
  }
  to {
    color: #f05a25
  }
}

@keyframes redgreen {
  0% {
    color: #f05a25
  }
  50% {
    color: #00943f
  }
  to {
    color: #f05a25
  }
}

@-webkit-keyframes bluered {
  0% {
    color: #2b7ee1
  }
  50% {
    color: #f05a25
  }
  to {
    color: #2b7ee1
  }
}

@keyframes bluered {
  0% {
    color: #2b7ee1
  }
  50% {
    color: #f05a25
  }
  to {
    color: #2b7ee1
  }
}

@-webkit-keyframes pinkyellow {
  0% {
    color: #f25081
  }
  50% {
    color: #ffcc33
  }
  to {
    color: #f25081
  }
}

@keyframes pinkyellow {
  0% {
    color: #f25081
  }
  50% {
    color: #ffcc33
  }
  to {
    color: #f25081
  }
}

body {
  font-family: 'FaktPro-Medium', 'Cousine', sans-serif;
  letter-spacing: 0.04em;
  color: rgb(0, 0, 0);
}

a {
  color: #000;
  border-bottom: 1px solid #000;
/*  -o-transition:.2s;
  -ms-transition:.2s;
  -moz-transition:.2s;
  -webkit-transition:.2s;
  transition:.2s;*/
}

a:focus, a:hover {
  color: #000;
  text-decoration: none;
}

a:focus {
  outline: 0;
}

em, i {
  font-family: 'FaktPro-MediumItalic', 'Cousine', sans-serif;
}

.navbar {
  border: none;
  margin-bottom: 0;
  text-align: center;
}

.nav-emotion {
  background-color: #fff;
  color: #000;
}

.nav-emotion a {
  color: #000;
  border-bottom: 1px solid #000;
}

/*.nav-emotion h2 {
  color: #fff;
}*/

.nav-information {
  background-color: #fbf9f1;
  color: #000;
}

.nav-information a {
  color: #000;
  border-bottom: 1px solid #000;
}

.nav-touchables {
  background-color: #000;
  color: #fff;
}

.nav-touchables a {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.btn-link {
  color: #b6985e;
}

.btn-link:active, .btn-link:hover {
  color: #fff;
  text-decoration: none;
}

.breadcrumb {
  padding: 0;
  background-color: transparent;
}

.jumbotron {
  padding: 38px 0;
  margin-bottom: 0;
}

.jumbotron p {
  font-size: inherit;
}

.emotion {
  display: block;
  width: 100%;
  color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

.card {
  padding: 10px 0;
}

.card-header {
  line-height: 38px;
  font-size: 30px;
}

.card-columns {
  padding-top: 30px;
}

ul {
  list-style-type: none;
  padding: 0;
}

.nav-links li {
  display: inline-block;
  margin-right: 15px;
}

.submit {
  background: transparent;
  border: 0;
}

.mimi_field {
  display: inline-block;
}

#signup_email {
  border: 0;
  border-bottom: 1px solid #999;
  background: transparent;
}

#signup_email:active, #signup_email:focus {
  outline: 0;
  border-bottom: 1px solid #fff;
}

#signup_email[type=submit]:active, #signup_email[type=submit]:focus {
  outline: 0;
}

label {
  font-weight: normal;
}

strong {
  font-weight: normal;
}

h3 {
  margin-top: 0;
  text-transform: uppercase;
  font-size: 14px;
}

h4 {
  margin-top: 25px;
}

[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #000;
  margin: 1em 0;
  padding: 0;
  margin-top: 60px;
  margin-bottom: 60px;
}

.release-info > hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #000;
  margin: 1em 0;
  padding: 0;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 30px;
}

.release-info > ol {
  list-style-type: decimal-leading-zero;
  list-style-position: inside;
  padding-left: 0;
}

.release-info > ol.vinyl {
  list-style-type: upper-latin;
}

.release-info > ol > li {
  display: list-item;
  line-height: 1.5em;
}

footer {
  text-align: center;
  padding: 60px 0 40px;
}

.symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  -webkit-animation: spin 8s linear infinite;
  -moz-animation: spin 8s linear infinite;
  animation: spin 8s linear infinite;
}

.top-right {
  z-index: 1;
  position: absolute;
  top: 20px;
  right: 20px;
}

.vertical-text {
  transform: rotate(90deg);
  transform-origin: left top 0;
}

.left {
  float: left;
}

.right {
  float: right;
}

.text-indent {
  text-indent: 2em;
 }

.rand-img {
  z-index: -1;
  width: 50%;
}

.type-it {
  font-size: 70px;
}

.text-muted {
  color: #eceaea;
}

.accordion-option .toggle-accordion {
  color: #eceaea;
  border-bottom: 1px solid #eceaea;
}

.accordion-option .toggle-accordion:before {
  content: "Collapse all";
}

.accordion-option .toggle-accordion.active:before {
  content: "Expand all";
}

.last {
  margin-top: 40px;
}

.store {
  background-color: #000;
  color: #fff;
  text-align: center;
}

.store a {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.badge {
  display: none;
  font-weight: normal;
  color: #eceaea;
  vertical-align: middle;
  background-color: transparent;
  opacity: 0;
}

a.release:hover + .badge {
  display: inline-block;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

/*i.fa {
  color: #fff!important;
}*/

i.fa.fa-facebook-official {
  color: #3b5998;
  padding-right: 6px;
}

i.fa.fa-instagram {
  color: #3f729b;
  padding-right: 6px;
}

i.fa.fa-soundcloud {
  color: #f50;
}

i.fa.fa-youtube-play {
  color: #ff0000;
  padding-right: 4px;
}

i.fa.fa-spotify {
  color: #6ae368;
  padding-right: 6px;
}

i.fa.fa-twitter {
  color: #1da1f2;
  padding-right: 5px;
}

.headroom {
  will-change: transform;
  transition: transform 200ms linear;
}
.headroom--pinned {
  transform: translateY(0%);
}
.headroom--unpinned {
  transform: translateY(-100%);
}

.overlay { 
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: rgb(0,0,255); /* Blue fallback color */
  background-color: rgba(0,0,255, 0.9); /* Blue w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  color: #fff;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.overlay a {
  text-decoration: none;
  font-size: 2em;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  border-bottom: 1px solid #333;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

select {
  color: #000;
}

table {
  margin: 0 auto;
}

.row.fix {
  display: flex;
  flex-wrap: wrap;
}

.circle {
  width: 107px;
  border-radius: 13px;
  text-align: center;
  padding: 13px 0 11px;
  line-height: 0;
  position: relative;
  color: #fff;
  border: 1px solid #fff;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@media (max-width: 768px) {

  body {
    background-size: 25px;
  }

  .jumbotron {
    padding: 0 0 10px 0;
  }

  .jumbotron h2 {
    margin-top: 15px;
  }

  .card-header, h2 {
    font-size: 25px;
    line-height: 34px;
  }

  .start {
    margin: 15px 0 30px 0;
  }

  .badge {
    display: none;
  }

  footer {
    text-align: left;
    margin: 5px 0 0;
  }

  .rand-img {
    width: auto;
  }

  .accordion-option {
    display: none;
  }

  .last {
    margin: 30px 0 0;
  }
}

/* Small devices (tablets) */
@media (min-width: 768px) {

}

/* Medium devices (desktops) */
@media (min-width: 992px) {

}

/* Large devices (large desktops) */
@media (min-width: 1200px) {

}

.touchables span {
  color: #f05a25;
  -webkit-animation: greenblue 2s ease forwards infinite;
  animation: greenblue 2s ease forwards infinite;
}

.touchables span:nth-child(3n+1) {
  color: #f25081;
  -webkit-animation: redgreen 2.5s ease forwards infinite;
  animation: redgreen 2.5s ease forwards infinite;
}

.touchables span:nth-child(3n+2) {
  color: #00943f;
  -webkit-animation: bluered 3s ease forwards infinite;
  animation: bluered 3s ease forwards infinite;
}

.touchables span:nth-child(3n+3) {
  color: #ffcc33;
  -webkit-animation: pinkyellow 3.5s ease forwards infinite;
  animation: pinkyellow 3.5s ease forwards infinite;
}