@charset "UTF-8";
/* HTML styles */

body {
  font-family: "Barlow", sans-serif;
}

:root {
  --primary-color: #2d3142;
  --secondary-color: #ef8354;
  --light-color: #f5f5f5;
  --dark-color: #1a1a1a;
}

/* Custom styles */

.row {
  margin: 0px;
}

a{
    text-decoration: none;
}

.nav-link {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
}


.nav-link:hover {
  color: #ffa700;
}

.navb {
  border: solid 1px hsla(19, 89%, 54%, 0.7);
  border-radius: 5px;
  background: hsla(19, 89%, 75%, 0.2);
}

.nav-link-n {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  color: #000000;
  border: solid 1px #CCCCCC;
  border-radius: 15px 15px 0px 0px;
  //background: hsla(19, 89%, 75%, 0.2);
}

.active{
  background: none;
}

.nav-link-n:hover {
  color: #ffa700;
}

.feature_btn {
  background-color: #ffa700;
  color: #000000;
  border-radius: 50px;
  font-family: "Lalezar", sans-serif;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 2px;
}



.drumstick-divider {
  height: 4px;
  background: linear-gradient(
    to right,
    transparent,
    var(--secondary-color),
    transparent
  );
  margin: 2rem 0;
}

.contact-info-card {
  border-left: 4px solid var(--secondary-color);
  padding-left: 1rem;
}

.feature_btn:hover {
  background-color: #f26522;
}

.herolead {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
}

.cardlead {
  font-family: "Lalezar", sans-serif;
}

.lead_h {
  font-family: "Barlow", sans-serif;
  color: #ffffff;
}

.bi_clr {
  //color: hsla(19, 89%, 54%, 0.7);
  color: #ffffff;
  font-size: 22px;
}

.bi_clr:hover {
  //color: #ffa700;
  color: hsla(19, 89%, 54%, 0.7);
}

.bgfoot {
  background: linear-gradient(
    35deg,
    rgba(6, 0, 151, 1) 0%,
    rgba(130, 4, 255, 1) 73%,
    rgba(193, 15, 255, 1) 100%
  );
}

.bgfootdark {
  background: linear-gradient(
    90deg,
    hsl(0deg 0% 65%) 0%,
    hsl(0deg 0% 55%) 47%,
    hsl(0deg 0% 65%) 100%
  );

}

.bq_foot {
  font-size: 14px;
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
}

.cust_card {
  font-family: "Lalezar", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 2px 2px 8px #000000;
  font-size: 48px;
  text-decoration: none;
}

.featurette-heading {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  font-size: 28px;
  color: #474747;
}

.lead {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  color: #474747;
}

.btn_feat {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  color: #474747;
    font-weight: bold;
}


.band {
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  color: #474747;
}

.jumbo {
  font-family: "Lalezar", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 2px 2px 8px #000000;
  font-size: 48px;
}
.jumbo_sub {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 2px 2px 12px #000000;
  font-size: 14px;
}
.desat {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
}

.desat:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  -webkit-filter: grayscale(0);
}

.hero_mask {
  border-image-source: linear-gradient(
    35deg,
    rgba(6, 0, 151, 0.4) 0%,
    rgba(130, 4, 255, 0.4) 73%,
    rgba(193, 15, 255, 0.4) 100%
  );
  border-image-slice: fill 1;
}

.hero {
  background: url("images/voxel_life_12.jpg");
  width: 100%;
  background-size: cover;
  min-height: 700px;
  background-position: center;
}

.hero_drummer {
  background: url("images/voxel_life_03.jpg");
  width: 100%;
  background-size: cover;
  min-height: 700px;
  background-position: center;
}


.colborder {
  border: solid 1px #ffffff;
  background: linear-gradient(
    90deg,
    hsla(0, 0%, 55%, 0.15) 0%,
    hsla(0, 0%, 65%, 0.15) 47%,
    hsla(0, 0%, 75%, 0.15) 100%
  );
  border-radius: 20px;
  margin: 1%;
}













/* Hover Blur Effect */
.hover_white {
  color: #ffffff;
  font-family: "Barlow", sans-serif;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px #000000;
}
.hover-blur a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 25px;
}
.hover-blur img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.hover-blur:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-filter: grayscale(0.6) blur(1px);
  filter: grayscale(0.6) blur(1px);
}
.hover-blur a h2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
  width: 100%;
  padding: 45% 20px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  /*background dotted*/
  background-image: -webkit-repeating-radial-gradient(
    center center,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.8) 1px,
    transparent 1px,
    transparent 100%
  );
  background-image: -moz-repeating-radial-gradient(
    center center,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.8) 1px,
    transparent 1px,
    transparent 100%
  );
  background-image: -ms-repeating-radial-gradient(
    center center,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.8) 1px,
    transparent 1px,
    transparent 100%
  );
  background-image: repeating-radial-gradient(
    center center,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.8) 1px,
    transparent 1px,
    transparent 100%
  );
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.hover-blur:hover a h2 {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
.hover-blur .text-white {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.hover-blur:hover .text-white {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
  filter: alpha(opacity=1);
  opacity: 1;
}