@charset "UTF-8";
/* CSS Document for BONE AND BELL */
/* Prepared by Heather Smith */
/* http://www.clockworkbird.com */
/* ticktock@clockworkbird.com */


/* ______________________________ GLOBAL RESET ________________________________*/
* { margin: 0; padding: 0; }
img {border: none;}

/* _____________________________ STRUCTURAL LAYOUT _____________________________ */

html {
  background: url("../images/bkgd3-stripes.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {margin: 0;padding: 0;color: #fff;font-family: 'Raleway', sans-serif;}
.container {position: relative; width:950px; margin:0px auto; padding:0px;}
#logo {padding: 30px 50px 0 0; float:right;}
#logo_img {height: 5em;}
nav {background-color: transparent;}
header {background-color: transparent;}
#feature {position: fixed; bottom: 100px; right: 50px; width: 300px; text-align: center; font-size: 26px;}
#featuredImg {width: 300px; height: 100%; margin: 20px 0 20px 0;}
.col-l {margin-top: 200px;}
.col-r {float: right; width: 150px; margin: 15px; padding: 15px;}
.video {margin: 25px 0 25px 0; width:100%; min-height: 450px;}
#about {background-color: rgba(0, 0, 0, 0.5);  padding: 50px; margin-bottom:50px; line-height:24px;}
.pic {float: left; width: 100%;}
.audio {width: 50%; float: left; text-align: center;}
.press-audio{border: 0; width: 100%; height: 42px; margin: 3px 0 3px 70px;}
.center-audio {width: 700px; margin-left: auto; margin-right: auto;}
.center-video {width: 800px;  margin-left: auto; margin-right: auto;}
.audio-iframe {border: 0; width: 700px; height: 120px;}
.center-video  .video-iframe {margin: 25px 0 25px 0;width:800px;height: 390px;}
.row {float: clear; width:100%; margin: 20px auto;}
.halves {width: 50%; float: left;}
.thirds {width: 33%; float: left;}
.quarters {width: 23%; float: left; margin: 0 1%;}
.featuredImg {width: 100%;}
#album-feature {width: 45%; height: 45%; float: left; }
#album-feature-list {width: 45%; margin-right: 10%; float: left;}
.label {margin-top:20px; font-size: 14px; line-height: 22px;}
.quarters .label {font-size: 11px;}
ul.social {width: 100px; margin:70px 0px 0px 37px; }
ul.social li {width: 37px; margin: 10px 10px 14px 10px; list-style-type:none;}
.contactBox {width:150px; border: 1px solid #fff; float:right; margin: 15px 0 15px 15px; padding: 15px; text-align: center;}
ul.contact {margin-top:15px;}
ul.contact li {list-style-type: none;}
.quote {font-size:18px; padding:10px; margin-bottom:10px; line-height: 24px; text-align: left;}
.quote-big {font-size: 60px; line-height: 60px; margin-bottom: 20px;text-align: center;}
.quote-small {font-size: 30px; line-height: 40px; margin-bottom:0px;text-align: center;}
.quote-author {font-size: 20px; font-style: italic; text-align: center;}
.music {float: left; border: 0; width: 270px; height: 412px; margin-right:15px;}
.music-sq {float: left; border: 0; width: 45%; min-height: 545px; margin-right:5%; margin-bottom: 5%;}
footer{float: right; width: 100%; padding: 0px; margin: 0px; line-height: 25px; color: #fff; font-size: 11px; height: 30px; }
#home_footer {position: fixed; bottom: 30px; right: 0px;}
#copyright {float: right; padding: 10px 50px 30px;}

/* ______________________________ MAIL CHIMP _________________________________ */
input {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

#mc_embed_signup .mc-field-group {width: 80% !important; font-size: 12px;}
#mc_embed_signup .mc-field-group input {
  width: 100% !important;
 }
#mc_embed_signup .button {
  background-color: #000 !important;
  border-radius: 4px 2px;
  float: right;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#mc_embed_signup #mce-success-response {color: #000 !important; }

#mc_embed_signup{color:#000; clear:left; text-align: right; font-size: 12px;}

/* _____________________________ HEADER _________________________________*/
#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  /*left: 100px;*/
  margin-left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}
#menuToggle a:hover
{
  color: tomato;
}
#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #fff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menu li.inactive {   color: #999;}
/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

/* _____________________________ LINKS _____________________________*/

a:link{color: #ffdd75; text-decoration: none;}
a:visited{color: #ffdd75; text-decoration: none;}
a:hover, a:active{color: #fff; }

#feature a:link, #feature a:visited {color: #000; text-decoration: none;}

a.btn:link, a.btn:visited { padding: 10px 30px; margin: 15px;  background-color: #FFF; color: #000;}
a.btn:hover, a.btn:active { padding: 10px 30px; background-color: #ce210f; color: #FFF;}

/* _____________________________ TYPOGRAPHY _____________________________ */

h1, h2, h3, h4, h5, h6, blockquote {text-transform: uppercase;}
  h3 {font-size: 33px; margin-bottom: 20px;}
  h4 {font-size: 20px;}
p {margin-bottom: 20px;}
.bold{font-weight: bold;}
.italic{font-style: oblique;}
.shadow {text-shadow:2px 2px 0 rgba(71, 69, 74, 0.7); }
.aside {font-size: 12px; font-style: italic; display: block;}

/* _____________________________ GENERAL _____________________________ */

.floatLeft {float:left; display: inline;}
.floatRight, a.floatRight {float:right; display: inline;}
.floatClear {visibility: hidden; display: block; clear: both; height: 0; font-size: 0;content: " "; }
.paddingLarge{padding: 15px;}
.paddingSmall{ padding: 8px;}
hr {margin: 40px 0px; background-color: #000; color: #000; outline: none; border-bottom: 1px solid #fff; border-top: none; border-left: none; border-right: none;}

/* ______________________ RESPONSIVE _________________________ */

/* Most Mobile */
@media only screen
and (max-width: 1024px)
 {
  #logo {padding: 20px 20px 0 0;}
  #logo_img {height: 5em;}
  #menu
  {
    position: absolute;
    width: 100%;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 145px;
  }

  #menuToggle {top:20px; margin-left: 20px;}
  #menuToggle span
  {
    width: 50px;
    height: 4px;
    margin-top: 10px;
    border-radius: 4px;
  }
  ul.social {width: 100px; margin:40px 0px 0px 18px; }

.music {width: 100%; height: 500px; margin:20px auto; float: clear; }
.video {width: 100%; min-height: 300px;}
.halves {width: 100%; float: clear; margin: 0;}
.thirds {width: 100%; float: clear;}
.quarters {width:50%; float: left; margin:0;}
.quote-big {font-size: 40px; line-height: 40px; margin-bottom: 20px;}
.quote-small {font-size: 16px; line-height: 20px; margin-bottom:20px;}
.quote-author {font-size: 20px; font-style: italic; text-align: center;}

.container {width: 90%;}
#about {padding: 20px;}
#copyright {padding: 10px 20px 20px;}

.contactBox {width:80%; border: 1px solid #fff; float:none; margin: 15px 15px 30px 15px; padding: 15px; text-align: center;}

.audio {width: 100%; float: clear; }
.center-audio {width: 100%; margin-left: auto; margin-right: auto;}
.center-audio  .audio-iframe {width:100%;}
.center-video {width: 100%;  margin-left: auto; margin-right: auto;}
.center-video  .video-iframe {margin: 25px 0 25px 0;width:100%;min-height: 250px;}

#album-feature {width: 100%; height: 100%; float: none; }
#album-feature-list {width: 100%; margin-right: 0%; margin-bottom: 10%; float: none;}

#feature {
  position: relative;
  bottom: 0px;
  right: 0px;
  margin: 100px auto;
}

#mc_embed_signup {color: #FFF;}

#home_footer {position: relative; bottom: 30px; right: 0px;}

}

/* Most Mobile - Landscape */
@media only screen
and (max-width: 1200px)
and (orientation : landscape)
    {
      .col-l {margin-top:100px;}
      .music {width: 45%; height: 100%; min-height: 500px; margin:2.5%; float: left; }
      .video {width: 100%; height: 100%; min-height: 400px; margin:2.5% auto;}
      .thirds {width: 30.5%; float: left; margin: 1%;}
      #menu {padding-top: 110px; width: 25%;}
      .hide {visibility: hidden; height: 0px; width: 0px; margin:0px;}
      .quote {font-size: 14px; line-height: 18px;}
      #album-feature {width: 45%; height: 45%; float: left; }
      #album-feature-list {width: 45%; margin-right: 10%; float: left;}
    }

/* iPads */
  @media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px)
  {
    #menu {width: 30%;}
    #menu span {
      width: 33px;
      height: 4px;
      border-radius: 3px;
      }
    .music {width: 45%; height: 100%; min-height: 550px; margin:2.5%; float: left; }
    .video {width: 100%; height: 100%; margin:2.5% auto;}
    .halves {width: 45%; margin: 2.5%}
    .thirds {width: 33%; float: left; margin-top: 50px;}
    .contactBox {width:23%; float:right; margin: 15px 0px 30px 15px; padding: 15px; text-align: center;}
    #album-feature {width: 45%; height: 45%; float: left; }
    #album-feature-list {width: 45%; margin-right: 10%; float: left;}
    #feature {position: fixed; bottom: 100px; right: 50px; width: 300px; text-align: center; font-size: 26px; margin: 0px auto;}
    #mc_embed_signup {color: #000;}
}

/* Larger Desktops */
@media only screen
and (min-width: 1200px)
 {
    .col-l {margin-top: 250px;}
    footer {position: fixed; bottom: 30px; right: 0px;}
 }