/* Universal Styles */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: Helvetica, sans-serif;
}

h1 {
  font-family: 'Monoton';
  font-family: azo-sans-uber, sans-serif;
  font-size: 5rem;
  line-height: 0.9em;
  color: #eeb52f;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h2 {
  font-family: 'Monoton', cursive;
  font-family: acier-bat-outline, sans-serif;
  font-size: 3rem;
  font-size: 5rem;
  line-height: 0.9em;
  letter-spacing: 0.06em;

}

h3{
  font-family: 'Amatic SC', cursive;
  font-family: acier-bat-solid, sans-serif;
  font-size: 2rem;
}

h4{
  font-family: acier-bat-solid, sans-serif;
  font-size: 1.5rem;
}

a {
  text-decoration: none;
}

p {
  letter-spacing: 0.03em;
  line-height: 1.375em;
}

.height-60 {
  height: 60vh;
}

.height-80 {
  height: 80vh;
  min-height: 600px;
}

.height-100 {
  height: 100vh;
  min-height: 400px;
}

.img-size {
  width: auto;
  height: 20px;
}

/* Bootstrap Overrides */

/* Carousel Thumbnail Inicators */
.carousel-indicators {
  position: absolute !important;
  bottom: -50px;
  margin: 0 !important;
  /* padding: 0 !important; */
}

.carousel-indicators li {
    height: 10px !important;
    background-color: rgb(59,132,90,.5);
}

.carousel-indicators .active {
  background-color: rgba(59,132,90, 1.0);
}

.carousel-inner p {
  margin-bottom: 2rem;
}

.btn-primary {

  background-color: #247847;
  transition: .5s box-shadow;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;

}

.btn-primary:hover {
  background-color: #38ba6e;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}

.btn-primary:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}

/* Navigation */

.navbar {
  font-size: 1rem;
}

.navbar .nav-mobile {
  display: none;
}

.my-nav {
  background-image: url("../images/headerBG.jpg");
  background-repeat: repeat;
  text-transform: uppercase !important;
}

.navbar-brand {
  font-family: azo-sans-uber, sans-serif;
  font-size: 1.8rem;
  /* line-height: 0.9em; */
  color: #3b845a !important;
  letter-spacing: .02em;
  text-shadow: 1px 1px 0px #ffc433;
}

.navbar li a {
  color: #3b845a !important;
  text-shadow: 1px 1px 0px #ffc433;
  font-weight: 900;
  letter-spacing: .02em;

  box-sizing: border-box;


}

.navbar li a:hover {
  color: #ffc433 !important;
  text-shadow: none;
}

.navbar li a.active {
  color: #fff !important;
  letter-spacing: .02em;
  text-shadow: 1px 1px 0px #3b845a;

}

/* header hero image */
header {
  background: linear-gradient(rgba(0, 0, 0, .9),rgba(0, 0, 0, 0.4)), url('../images/jumbotron-studio.jpg') center/cover no-repeat fixed;

}

header p {
  font-size: 1.3em!important;
}

#hero .background-studio {
  background-image: url("../images/jumbotron-studio.jpg");
}

/* removes Bootstaps blue button highlight */
button:focus, button:active, nav-toggler:focus, nav-toggler:active {
   outline: none !important;
   box-shadow: none;
}

.myButton {
  font-family: acier-bat-noir, sans-serif;
	background-color:#3b845a;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #4ca973;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size: 2em;
	padding: 5px 31px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #2f6627;
  text-transform: uppercase;
  -webkit-box-shadow: 3px 3px 5px 6px #000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #000;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 7px 5px rgba(0, 0, 0, 0.2);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.myButton:hover {
	background-color: #4ca973;
  color:#ffffff;
  text-decoration: none;
}
.myButton:active {
	position:relative;
	top:1px;
}

.relative-wrapper {
  position: relative;
  top: -16rem;
  width: 100%;
  text-align: center;
}

#carouselContainer {
  max-width: 1200px;
  margin: 0 auto;

}


@media (max-width: 1199px) {

    #navbarNavDropdown ul {
      margin: 2rem 0;
    }

    #navbarNavDropdown li a {
      padding: 1em;
      margin-bottom: 1em;
      background-color: rgba(0, 0, 0, .1);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    }


}

@media (max-width: 992px) {
  h1 {
    font-size: 4rem!important;

  }

}

@media only screen and (max-width: 767px) {

  .navbar .nav-desktop {
    display: none;
  }

  .navbar .nav-mobile {
    display: block;
  }

  h1 {
    font-size: 2.5rem!important;
    color: #eeb52f;
  }


}

@media only screen and (max-width: 576px) {

  .navbar .nav-desktop {
    display: none;
  }

  .navbar .nav-mobile {
    display: block;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 3rem;
  }


}

/* About */
#About {
  background-image: url("../images/grillBG2.jpg");
   background-size: cover;
  background-repeat: no-repeat;
}

#About h2 {
  color: #ebb52f;
}

#About p {
  letter-spacing: 0.03em;
  line-height: 1.375em;
}

/*  End About */

/* Services */
#services {
   background-image: url("../images/mysticalmusicTileYellow2.jpg");
  /*background-color: #ebdab1; */
  background-repeat: repeat;
}
#services h2{
  text-shadow: 1px 1px 0px #000;
}


/* Services Image Containers */
.image-container {
  overflow: hidden;
  height: auto;

}

.image-container img {
  width: 100%;
  opacity: 0.9;
  transition: transform 3.5s,
              opacity 3.5s;
  transition: transform 3.5s,
              opacity 3.5s;

}

.image-container img:hover {
  opacity: 1;
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);

}

#services .card {
  border-radius: 0px !important;
  -webkit-box-shadow: 3px 3px 5px 6px #000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #000;  /* Firefox 3.5 - 3.6 */
  box-shadow:         2px 7px 5px rgba(0, 0, 0, 0.2);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  border: none !important;

}

#services .card .card-title{
  font-family: 'Amatic SC', cursive;
  font-family: acier-bat-solid, sans-serif;
  font-size: 3rem;
  font-size: 2rem;
  color: #ebb52f;
  text-shadow: 1px 1px 0px #000;
  margin: 1rem 0 3rem 0;
}

#services #servOne h5 {
  color: #455d6b;
}

#services #servTwo h5 {
  color: #ffa791;
}

#services #servThree h5 {
  color: #916c0f;
}

#services .myButton {
  font-family: acier-bat-solid, sans-serif;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	display: block;
	cursor:pointer;
	color:#ffffff;
	font-size: 1.2em;
	padding:5px 30px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
  text-transform: uppercase;
  margin: 0 auto;
  width: 75%;
  text-align: center;
  box-shadow: none;
  letter-spacing: .2em;
}

#services .rates {
  display: inline-block;
  background-color: #ebb52f;
  font-size: 1.5rem;
  text-align: center;
  margin: 60px auto !important;

}

#studio {
  background-image: url("../images/insideBG.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;

}

#gear {
  background-image: url("../images/gearBG.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}

#clients {
  background-image: url("../images/clientsBG.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#gearPics,
#studioLayoutPics {
  background-image: url("../images/grillBG2.jpg");
  background-repeat: no-repeat;
  /*background-size: cover; */
  background-image: url("../images/mysticalmusicTileClients.jpg");
  background-repeat: repeat;


}

#gearPics .card p,
#studioLayoutPics .card p {
  font-size: .8em;
  padding-right: 4em;
}

#clientSamples {
  background-image: url("../images/mysticalmusicTileClients.jpg");
  background-repeat: repeat;
}

#clientSamples h2,
#originalSamples h2,
#voiceVideos h2
 {
  display: inline;
  font-family: azo-sans-uber, sans-serif;
  font-size: 2.5rem;
  padding: .2em .5em;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  box-shadow:
    4px 7px 5px rgba(0,0,0, .25);

  border: 5px outset #ebb52f;
  text-shadow: 0px 1px 0 #fff;
}

#original {
  background-image: url("../images/omsBG.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#originalSamples {
  background-image: url("../images/mysticalmusicTilePink.jpg");
  background-repeat: repeat;
}

#voiceover {
  background-image: url("../images/voiceoverBG2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#voiceoverSamples {
  background-image: url("../images/mysticalmusicTileVoice.jpg");
  background-repeat: repeat;
}

/* contact */

#contact {
  padding: 5.2rem 0;
  text-align: center;
  background-image: url("../images/lightHouseRadio.jpg");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

}

#contact p {
  max-width: 42rem;
  margin: 2rem auto;
}

#contact #contact-info a  {
  font-size: 1.3em;
  color: white;
}

#contact span {
  display: inline-block;
  background-color: #ebb52f;
  font-size: 1.5rem;
}

#contact i {
  color: #3b845a;
}

#contact #social a  {
  color: #ebb52f;
}

#contact a:hover  {
  color: #ebb52f!important;
  text-decoration: none;
}

#contact a:hover i {
  color: #ebb52f!important;
  text-decoration: none;
}

footer {
  background-color: #181818!important;
}

.copyright {
  font-size: .8em;
  color: rgba(255, 255, 255, 0.5);
}

/* audio player */
#player-container{
  background-image: url(../images/dark_leather.png);
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

#audio-image{
	overflow:hidden;
	height: 275px;
}

.cover{
	width:100%;
	z-index:1;

}

#audio-buttons button {
  padding: 10px;
  color: white;
  background-color: rgba(255, 0, 0, 0.0);
  border-width: 0px;
}

#audio-buttons button:hover {
  color: #3b845a;
}

#audio-info .artist{
	font-weight:bold;
}

#audio-info h6 {
  padding-left: 2px;
}

#info-box {
  border-bottom: 1px solid black;
  background-color: #FFF;
}

#tracklist {
  background-color: #222;
}

#tracklist a {
  display: block;
  color: white;
  font-size: 1.3rem;
  padding: 10px 20px;
}

#tracklist a:hover {
  color: #3b845a;
  text-decoration: none;
}

#playlist {
  padding: 0 0px;
  background-color: white;
  list-style: none;
  padding-left: 2rem;
}

#playlist li {
  padding: 15px 40px;
  cursor: pointer;
}

#playlist li:nth-of-type(odd){
  background-color: #f6f6f6;
}

#playlist li:hover {
  background-color: #B7D2C3;
}

#playlist li.active {
  background-color: #378457;
  color: white;
}

/*  volume  */
input#volume {
	width:60%;
  -webkit-appearance: none !important;
  background:#ccc;
  height:2px;
}
input#volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:url(../images/knob.png) no-repeat;
    height:12px;
    width:12px;
}

/* -- Progress Bar and Duration --*/
#tracker {
  position: relative;
  width:100%
}

#progressBar {
   width:75%;
   margin-left:2%;
   margin-bottom:20px;
   margin-top:7px;
   height:3px;
   /*background:url(../images/progress_bg.png) no-repeat;*/
   background-color: #ccc;
   float:left;
}

#progress {
   /*background:url(../images/progress.png) no-repeat; */
   background-color: yellow;
   height:3px;
   display:inline-block;
   position: absolute;
   top: 7px;
   width: 1%;
}

#duration{
	position:absolute;
	top:0;
	right:10px;
	padding:4px 8px;
	background:#000;
	border-radius:5px;
  color: white;
}