html {
  font-size: 14px;
}

body {
  font-family: "Roboto", sans-serif;
  color: #fff;
  /*http://www.heropatterns.com/*/
  background-color: #151515;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ffffff' fill-opacity='0.03' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  letter-spacing: -.02rem;
}

*,
*:focus {
  outline: none !important;
}

a {
  color: #2d2d2d;
  cursor: pointer;
}

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

.hiding {
  opacity: 0;
}

.showing {
  opacity: 1;
}

.img-rounded {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.btn {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  transition: all .2s;
}

.btn-blue {
  color: #fff;
  background: #227fe8;
}

.btn-blue:hover,
.btn-blue:focus {
  color: #fff;
  background: #233b6f;
}

.btn-green {
  color: #fff;
  background: #FFDB39;
}

.btn-green:hover,
.btn-green:focus {
  color: #fff;
  background: #233b6f;
}

.btn-dark {
  color: #fff;
  background: #233b6f;
}

.btn-dark:hover,
.btn-dark:focus {
  color: #fff;
  background: #233b6f;
}

.list-inline-item:not(:last-child) {
  margin-right: 1rem;
}

.loader {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgb(32, 32, 32);
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  text-indent: -9999rem;
  border-radius: 50%;
  background: rgb(32, 32, 32);
  background: -moz-linear-gradient(left, #dddddd 10%, rgba(95, 95, 95, 0) 42%);
  background: -webkit-linear-gradient(left, #dddddd 10%, rgba(95, 95, 95, 0) 42%);
  background: -o-linear-gradient(left, #dddddd 10%, rgba(95, 95, 95, 0) 42%);
  background: -ms-linear-gradient(left, #dddddd 10%, rgba(95, 95, 95, 0) 42%);
  background: linear-gradient(to right, #dddddd 10%, rgba(95, 95, 95, 0) 42%);
  -webkit-animation: loading 1s infinite linear;
  animation: loading 1s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loading:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  content: "";
  background: #66686d;
  border-radius: 100% 0 0 0;
}

.loading:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 94%;
  height: 94%;
  content: "";
  background: rgb(32, 32, 32);
  border-radius: 50%;
}

.navbar-dark {
  margin-bottom: 0;
  background: #141414; /* rgb(32, 32, 32); */
  -webkit-box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.2);
}

.navbar-dark .navbar-brand {
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}

.navbar-dark .navbar-nav .nav-link {
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link:hover,
.navbar-dark .navbar-nav .active > .nav-link:focus {
  color: #FFDB39;
  background: transparent;
}

.navbar-dark .navbar-toggler {
  border-color: transparent;
}

.navbar-dark.fixed {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  border-bottom-color: transparent;
}

.navbar-dark .navbar-toggler-icon { 
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 219, 57, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}


.page {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  /*background: #fff;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2);*/
}

.page .content {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.page .content.cover {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.page .border {
  width: 6rem;
  height: 2px;
  margin-left: auto;
  margin-right: auto;
  background: #FFDB39;  /* old: #f5b76a */
}

.page.overlay:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0); /* use this if #home and #contact should have the same alpha overlay */
}

.page.overlay .content {
  position: relative;
  z-index: 1;
}

.no-bullet-points {
  list-style-type: none;
  padding: 0;
}

#home {
  padding: 0;
  font-family: "Orbitron", sans-serif;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  background-image: url(../img/band_bw.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


#home::after {
  background: rgba(0, 0, 0, 0.15);
}

#home h1 {
  font-size: 5em;
  line-height: 1;
}

#home .logo {
  display: block;
  background-image: url(../img/logo.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 1;
}

#description h2 {
  font-family: "Orbitron", sans-serif;
  font-size: 3em;
}

#description .lang-head {
  font-family: 'Quicksand';
  font-size: 5rem;
}

#description .instruments {
  display: block;
  background-image: url(../img/quick_logos/all_instruments.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}


#media h2 {
  font-family: "Orbitron", sans-serif;
  font-size: 3em;
}

/* Embedded Youtube and home-logo classes*/

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
   
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Calendar Style */
.calendar-list {
  /*margin: auto;*/
  display: inline-block;
  max-width: 540px;
  /*text-align: left;*/
}

.calendar-list ul {
  display: inline-block;
  padding: 0;
  list-style-type: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
}
/*
#events-upcoming li {
  padding: 0;
  list-style-type: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
}
*/

#events h2 {
  font-family: "Orbitron", sans-serif;
  font-size: 3em;
}

#events-upcoming li {
  padding-bottom: 40px;
}

#events-upcoming li .date,
#events-upcoming li .location {
  display: inline-block;
  border-bottom: 1px solid #FFDB39;
}

#events-upcoming li .summary {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  background-color: #FFDB39;
  color: #000;
  padding: 4px 8px;
  margin-bottom: 10px;
}

#events-upcoming li .description a {
  border-bottom: 1px solid #FFDB39;
  color: #fff;
}

#events .calendar-icon-links p {
  display: inline-block;
  padding-bottom: 8px;
}

#events .social li .calendar-link:hover {
  color: #00aced
}

#events .social li .calendar-link:focus {
  color: #292b2c
}

#events .social li .ical-link:hover {
  color: #36d358
}

#insta h2 {
  font-family: "Orbitron", sans-serif;
  font-size: 3em;
}

#contact {
  background-image: url(../img/instruments_c.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#contact::after {
  background: rgba(0, 0, 0, 0.6);
}

#contact h2 {
  font-family: "Orbitron", sans-serif;
  font-size: 3em;
}

#contact,
#contact a,
#contact a:hover,
#contact a:focus {
  color: #fff
}

/*#contact .heading .border {
  background: #fff
}*/

#contact a {
  display: block;
}

#contact i {
  margin: 4rem 0 1rem;
}

#footer {
  padding: 4rem 0;
  color: #fff;
  text-align: center;
  background: #141414;
}

#footer a,
#footer a:hover,
#footer a:focus {
  color: #fff;
}

#footer p a,
#footer p a:hover,
#footer p a:focus {
  color: #46BCDE;
}

#footer .social {
  margin-bottom: 1rem;
}

#footer .social li .facebook:hover {
  color: #3b5998;
}

#footer .social li .youtube:hover {
  color: #ea4c4c;
}

#footer .social li .instagram:hover {
  color: #AB369C;
}

#footer .social a .hklb {
  display: inline-block;
  height: 6em;
  width: 18em;
  background-image: url(../img/logo-hk-black.svg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 18em;
}

#footer .copyright {
  margin-bottom: 0;
}



/* Venobox */

.vbox-container {
  overflow: hidden;
}


/* Animations */

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

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


/* Responsive style */

@media (min-width: 576px) {
  .page .content.cover {
      margin-top: 12rem;
      margin-bottom: 12rem;
  }
  #portfolio .items li {
      width: 50%;
  }
  #testimonials .quote {
      padding: 0 4rem;
  }
}

@media (min-width: 768px) {
  .page .content.cover {
      margin-top: 16rem;
      margin-bottom: 16rem;
  }
  #portfolio .items li {
      width: 25%;
  }
  #testimonials .quote {
      padding: 0 8rem;
  }
}

@media (min-width: 992px) {
  .page .content.cover {
      margin-top: 20rem;
      margin-bottom: 20rem;
  }
  .navbar-light .navbar-nav .nav-link {
      padding-right: 1rem;
      padding-left: 1rem;
      font-weight: bold;
      text-transform: uppercase;
  }
  #testimonials .quote {
      padding: 0 12rem;
  }
}