/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  background: #f8f8f8;
  height: 100%;

  overflow-x: hidden;
  /* The html and body elements cannot have any padding or margin. */
}
p {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}

h1, h2, h3, h4 {
  font-family: Rockwell, Times, "Times New Roman","Courier Bold", Courier, Georgia, serif;

}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 120px;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

#wrap > .container {

}
.container .credit {
  margin: 20px 0;
  color: #CAD8CB;
  text-shadow: 0 1px 1px #262626;
  text-shadow: 0 1px 1px rgba(26, 26, 26, .61);
}
.container .credit a {
  color: #ff0101;


}
#footer {
  min-height: 60px;
  background-color: #50645B;
  border-top: 3px solid #00000c;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, .3);
}

code {
  font-size: 80%;
}
.transition {
  -webkit-transition: all .3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all .3s ease-out;  /* Firefox 4-15 */
       -o-transition: all .3s ease-out;  /* Opera 10.50–12.00 */
          transition: all .3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 52px;
  margin-top: 0px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  right: 52%;
  left: 10%;
  padding: 26px;
  text-align: left;
  width: 260px;
  top: 26px;
  height: 420px;
}
/* Declare heights because of positioning of img element */
.carousel .item {
  height: 460px;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 320px;
}
.carousel-caption .btn, .buyBtn {
  padding: 1em 2em;
  background-color: #FF0101;
  border-color: #ff0101;
  text-shadow: 0 1px 1px #525252;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .61);
  -webkit-box-shadow: 0px 9px 0px #cf0404;
  -moz-box-shadow: 0px 9px 0px #cf0404;
  box-shadow: 0px 9px 0px #cf0404;
  position:relative;

}
.carousel-caption .btn:hover {
  text-shadow: 0 1px 1px #262626;
  text-shadow: 0 1px 1px rgba(26, 26, 26, .61);
  background-color: #FF2626;
  border-color: #50645B;
}

.carousel-caption .btn:active {
      -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
  box-shadow: 0px 2px 0px #84261a;
  top:7px
}


.navbar {  
  background: #00000C;
  background: url(../img/80percent.png);
}

.navbar.affix-top{
  min-height: 50px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 20px;
  border-radius: 0;
}
.navbar.affix, .carousel-caption {
  background: #00000C;
  background: url(../img/80percent.png);
  border-bottom: 1px dotted #fff;
}

.buyBtn.affix-top{
  background: none;
  border: none; 
  text-indent: -2000px;
  text-shadow:none;
  box-shadow: none;
  color: #000

}
.buyBtn.affix { 
  padding: 1em 1em; background-color: #FF0101; border-color: #ff0101; 
  text-shadow: 0 1px 1px #525252; text-shadow: 0 1px 1px rgba(0, 0, 0, .61); 
    -webkit-box-shadow: 0px 9px 0px #cf0404; -moz-box-shadow: 0px 9px 0px #cf0404; 
  box-shadow: 0px 3px 0px #cf0404; position: relative;
  color: #f8f8f8;
}

.buyBtn.affix:hover {
  text-shadow: 0 1px 1px #262626;
  text-shadow: 0 1px 1px rgba(26, 26, 26, .61);
  background-color: #FF2626;
  border-color: #50645B;
  }
.navbar-nav>li>a {
  font-size: 1em;
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  border-right: 1px solid #00000c;
  line-height: 20px;
  color: #cdccdc;
  border-radius: 0;
  padding-top: 13px;
  padding-bottom: 3px;
}

.navbar-nav>li>a:active {
  background: #00000c;
}
.navbar-nav>li>a:hover {
  background: #00000C; 
}
.navbar-nav>li>a:hover, 
.navbar-nav>li>a:focus {
  color: #ececec;
  background-color: transparent;
}

.head, .navbar-brand{
  font-family: Rockwell, Times, "Times New Roman","Courier Bold", Courier, Georgia, serif;
  text-shadow: rgba(26, 26, 26, .61) 1px 1px, rgba(26, 26, 26, .61) 2px 2px, rgba(26, 26, 26, .61) 3px 3px;
  margin-bottom: 0;
}

.subHead {
  font-family: Rockwell, Times, "Times New Roman","Courier Bold", Courier, Georgia, serif;
  margin-top: 0px;
  text-shadow: rgba(26, 26, 26, .61) 1px 1px, rgba(26, 26, 26, .61) 2px 2px, rgba(26, 26, 26, .61) 3px 3px;
}

.navbar-brand {
  color: #f8f8f8;
  font-size: 1.61em;
}

.navbar-brand.affix-top {
  color: #f8f8f8;
  font-size: 1.61em;
  text-indent: -1000px;
}
.navbar-brand.affix {
  color: #f8f8f8;
  font-size: 1.61em;
  text-indent: none;
}

/* body images */
img.padMe{
  margin: 0 0 1em 1em;
}

/* audioplayer */

.sm2_link {
  display: none!important;
}

.panel {
  background-color: #262626;
  color: #f8f8f8;

}
.panel a, .panel h4{
  color: #ff0101;
  text-shadow: 1px 1px 0 #000;
}
.panel h4{
  color: #f8f8f8;

}
.panel-heading {
  background-color: #00000c;
}

.panel-heading:hover {
  background: #50645B;
}

.panel-title {
  color: #f8f8f8;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
  font-weight: bold;
}

/* parsley */
ul.parsley-error-list {
	display: block;
	margin: 1em 0 1em 0;
	padding-left: 0;
	list-style: none;
	color: #ff0101;
	font-weight: bold;
	background: #ececec;
	padding: 1em 0 1em;
	border-radius: 4px;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 321px) {



}
@media (min-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  right: 52%;
  left: 10%;
  padding: 26px;
  text-align: left;
  width: 420px;
  height: 320px;
  top: 180px;
}

  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 600px;
  }
  .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 600px;
  }

}

@media (min-width: 1200px){
  .navbar .container {
    max-width: 1130px;
  }

  /* Since positioning the image, we need to help out the caption */
  .carousel-caption { z-index: 10; right: 52%; left: 10%; padding: 26px; text-align: left; 
    width: 520px;
    height: 281px;
    top: 260px;
}

  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 600px;
  }
  .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 600px;
  }

}