/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
  }
  
  /*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
  
  ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  ::selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  /*
   * A better looking default horizontal rule
   */
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }
  
  /* ==========================================================================
     Browser Upgrade Prompt
     ========================================================================== */
  
  .browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
  }

/* ==========================================================================

   Jenn's Custom Styles

   ========================================================================== */

/* GLOBAL STYLES ==================== */
html, body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    height: auto;
    width: 100%;
}    

main{
   /* IE to display page properly */
   display: block;
}

h1, h2, h3, h4 {
    font-weight: 700;
}

h1 {
    font-size: 1.4rem;
    line-height: 1.6;
}

h2 {
    font-size: 1rem;
}

img{
    width: 100%;
    height: auto;
}

.btn {
    background-color: rgba(8, 139, 139, 0.8);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    height: 2rem;
    line-height: 1.8rem;
    font-variant: small-caps;
    text-align: center;
    position: relative;
    padding: 2px 8px;
    max-width: 80%;
    display: inline-block;
    margin: auto;
}

.btn:hover {
    background-color: rgba(0, 139, 139, 0.37);
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
    color: black;
}

a{
    font-weight: 700;
    color: black;
    text-decoration: none;
}

a:focus{
    outline: #3389a9 solid 5px;
}

.page-title{
    background-color: rgba(0, 139, 139, 0.281);
    color: white;
    font-variant: small-caps;
    text-align: center;
    width: 100%; 
    position: relative;
    z-index: 0;
    padding-bottom: .8rem;
}

.page-title-cb{
    background-color: cadetblue;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.letter1::first-letter {
    font-size: 200%;
    font-style: italic;
    font-weight: bold;
    line-height: 78%;
    font-family: 'Vollkorn SC', serif;
}

/* NAV ============ */

 nav {
    width: 100%; 
}

/* Accessible, Responsive Header Nav adapted from Mark Caron 
   https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793 */

/* "Button Styling" */
.menu-toggle{
    display: inline-block;
    padding: .75rem 15px;
    line-height: 1rem;
    font-size: 2rem;
    color: white;
}

.menu-toggle:hover,
.menu-toggle:focus{
    color: rgba(0, 139, 139, 0.8);
}

/* "Offscreen menu style" */
.main-menu{
    position: absolute;
    display: none;
    left: -200px;
    top: 0;
    height: 100%;
    overflow-y: scroll;
    overflow-x: visible;
    transition: left 0.3s ease,
                box-shadow 0.3s ease;
    z-index: 999;
}

.main-menu ul{
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 2.5rem 0 0;
    /* "Hide shadow w/ -8px while 'closed'" */
    -webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
       -moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
            box-shadow: -8px 0 8px rgba(0,0,0,.5);
    min-height: 100%;
    background: rgba(0,0,0,.5);
}

.main-menu a{
    display: block;
    padding: .8rem 0;
    line-height: 1rem;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
}

.main-menu a:hover,
.main-menu a:focus{
    background: #333;
    color: rgba(0, 139, 139, 0.8);
}

.main-menu .menu-close{
    position: absolute;
    right: 0;
    top: 2%;
    left: 10%;
    font-size: 1.8rem;
}

*,
*:before,
*:after{
    box-sizing: border-box;
}


header{
    padding: 1.25rem;
    display: flex;
    align-items: baseline;
    background-color: black;
}

/* Logo */
.logo {
    margin: 0 1.875rem 0 .625rem;
    font-family: 'Vollkorn SC', serif;
}

    .logo a {
        color: white;
        font-size: 1.8rem;
    }

    .logo a:hover {
        color: rgba(0, 139, 139, 0.8);
    }

/* "On small devices, allow it to toggle..." */
/* ":target for non-JavaScript
    [aria-expanded] used if/when Javascript is added..." */
.main-menu:target,
.main-menu[aria-expanded="true"]{
    display: block;
    left: 0;
    outline: none;
    -moz-box-shadowing: 3px 0 12px rgba(0,0,0,.5);
    -webkit-box-shadowing: 3px 0 12px rgba(0,0,0,.5);
    box-shadow: 3px 0 12px rgba(0,0,0,.5);
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] ul{
    position: relative;
    z-index: 1000;
}

/* '.main-menu:target:after' not used as it will not be clickable */
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background: rgba(0,0,0,.85);
    cursor: default;
}

@supports (position:fixed){
    .main-menu,
    .main-menu:target + .backdrop,
    .main-menu[aria-expanded="true"] + .backdrop{
        position: fixed;
    }
}

/********** HOME PAGE **********/
/* Slideshow-Homepage ====================*/
.owl-carousel {
    background-color: #eeeeee;
}

    .owl-carousel .item{
        display: block;
        width: 100%;
        height: auto;
    }

.text{
  color: #f2f2f2;
  background-color: rgba(128, 128, 128, 0.35);
  font-weight: bolder;
  padding: 0rem 1rem 1rem 0rem;
  position: absolute;
  bottom: .8rem;
  width: 100%;
  text-align: center;
}

    .text h1, .text h2{
        font-size: 1.2rem;
        font-family: 'Vollkorn SC', serif;
    }

/* Top Section ====================*/
.top-sect-item{
    background-color: #eeeeee;
    padding-bottom: 1rem;
}

.top-sect-item figure{
    margin-left: 1.2rem;
    margin-right: .5rem;
    margin-bottom: 0;
}

.top-img {
    background-color: #333; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1.5px solid #ccc;
    float: left;
    padding-bottom: 40%;
    width: 45%;
    margin-top: .2rem;
    border-radius: 3rem;
}

/*#top-img-best-bay {
    background-image: url('../img/best-of-bay-2017-crew.jpg');
    margin-right: 1rem;
}*/

.top-sect-item p{
    padding: 0rem 1.5rem 1rem 1.5rem;
    margin-top: 0;
    font-size: 1.2rem
}

.top-sect-left{
    padding-top: .6rem;
}
.index-mobile-hide{
    display: none;
}

.three-best-img {
    width: 32%;
    margin-left: 34%;
}

.social-media-top{
    color: black;
    text-align: center;
    margin: auto;
    clear: both;
}

    .social-media-top i{
        font-size: 2rem;
    }

    .social-media-top ul{
        list-style: none;
    }

    .social-media-top ul li{
        display: inline-block;
        padding-top: 1rem;
        padding-right: 2rem;
        vertical-align: top; 
    }

    .social-media-top ul li :nth-child(3n) {
        padding-right: 0;
    }

    .social-media-top h3{
        padding-bottom: 0;
        margin-bottom: -.8rem;
        font-style: italic;
        font-size: 1rem;
        margin-top: 2rem;
    }

    .social-media-top ul{
        padding-top: 0;
        margin-top: 0;
    }

/* You Tube Section ====================*/
.you-tube{
    display: none;
}

/* Feed Section ==================== */
.feed {
    width: 100%;
}

    .happenings{
        padding: .5rem 1.2rem;
        text-align: left;
        font-size: 1.3rem;
        letter-spacing: -.08rem;
    }

    .feed .date-time{
        font-size: .8rem;
        padding-top: 0;
        margin-top: 0;
    }

    .feed .index-mobile-hide{
        display: none;
    }

    .feed .index-mobile-p{
        width: 90%;
        clear: both;
        margin: auto;
        padding-top: .2rem;
    }

.feed-item{
    border-bottom: 1px solid #ccc;
    clear: both;
    padding: .9375rem 1.2rem;
}

    .feed-item a:hover{
        color:rgba(0, 139, 139, 0.8);
    }

    .feed-item h2{
        margin-bottom: 0;
        margin-top: 1.5%;
    }

    .feed-item h2 a{
        color: #222;
    }

    .feed-item h2 a:hover{
        color: darkcyan;
    }

        .feed-item:nth-child(2){
            padding-top: 0;
        }

        .feed-item:nth-child(4){
            border-bottom: none;
            padding-bottom: 0;
        }

.feed-img{
    clear: both;
    float: left;
    margin: 0;
    padding: 2% 3% 0 2%;
    width: 42%;
}

.feed-info{
    float: left;
    width: 42%;
}

/********** ROCK CAMP PAGE **********/
.owl-rc{
    background-color: white;
}

.owl-carousel .item-rc {
    height: 40vh;
    background-color: #eeeeee;
}

.owl-carousel .item-rc img {
    height: 40vh;
}

.top-rc{
    background-color: grey;
    background-image: url(../img/adult-backlit-black-and-white-640-451-18.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-attachment: scroll;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    padding-bottom: 2rem;  
    margin-bottom: -2rem;
}

.item-rc .text {
   color: black;
   font-weight: bolder;
   background-color:  rgba(255, 255, 255, 0.363);
   padding: 1.5rem 1rem;
margin-bottom: 2rem;
}

.top-sect-left-rc{
    margin-left: .8rem;
    padding-right: .8rem;
    padding-top: .5rem;
}

    .top-sect-left-rc a{
            color:rgba(0, 139, 139, 0.8);
    }

    .top-sect-left-rc a:hover{
        color:rgb(64, 64, 64);
    }

    .top-sect-right-camp blockquote{
       display: none;
   }
    .cite-rc {
        display: none;
    }

.top-sect-right-camp {
    padding-left: 1.5rem;
}

    .line-space{
        padding-bottom: .1rem;
    }

    .h2-camp {
        padding-left: .6rem;
    }

    .camp-ul {
        list-style: none;
    }

    .camp-ul h2{
        line-height: 10%;
        margin-left: -1rem;
    }

    .camp-note a{
        color:rgba(0, 139, 139, 0.8);
    }

    .camp-note a:hover{
        color:rgb(64, 64, 64);
    }   

.rock-camp-pay{
  max-width: 70%;
  margin-top: -7%;
} 

  .pay-rc-left{
      float: left;
      margin-left: 8%;
      margin-bottom: 4rem;

  }

      .pay-rc-left h2{
          padding-left: 14%;
          line-height: 70%;
          white-space: nowrap;
      }

  .pay-rc-right{
      float: right;
      margin-right: -25%;
      margin-bottom: 4rem;
  }

      .pay-rc-right h2{
          padding-left: 4%;
          line-height: 70%;
         white-space: nowrap;
      }

.rc-mobile-img {
    background-color: #333; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1.5px solid #ccc;
    float: left;
    padding-bottom: 40%;
    width: 70%;
    margin-top: -15%;
    border-radius: 4rem;
}

#rc-mobile-img-18 {
    background-image: url('../img/rc-stage.jpg');
    margin-left: 11%;
    margin-bottom: 1rem;  
}

.rc-dt-tab-img{
    display: none;
}

.dt-tab-hide{
    float: left;
    margin-right: .65rem;
}



.bg-rock-camp {
    background-color: grey;
    background-image: url(../img/adult-backlit-black-and-white-640-451-18.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-attachment: scroll;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    padding-bottom: 2rem;  
    margin-bottom: -2rem;
}

.signup-info-camp {
    color: black;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 1.2rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    width: 90%;
}

/********** ABOUT PAGE **********/
.about h1{
    font-size: 1.8rem;
}

.about-bg{
    background-color: rgba(211, 211, 211, 0.1);
}

.hero-bg-about{
    background-image: url('../img/noisemakers-teachers-jam.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
    height: 23.4375rem;  
    padding: 0;
    margin-top: -6.1rem;
}

.about-main{
    padding-bottom: 1rem;
}

.about-main h1{
    padding-left: 1.2rem;
}

.about-main p{
    padding: 0 1rem 0 1.5rem;
}

.about-mobile-hide{
    display: none;
}

/* Testimonials ====================*/
.testimonials{
    display: none;
}

/* Meet Teachers ====================*/
.meet-teachers{
    border-top: 1px solid #ccc;
    background-color: #eeeeee;
    /*background-image: url('../img/instruments-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: ;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;*/
    padding-bottom: 0;  
    padding: 0;
    margin-bottom: -2rem;
}

.meet-teachers h1{
    padding-left: 1.2rem;
}

.teacher-img {
    background-color: #333; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1.5px solid #ccc;
    float: left;
    padding-bottom: 40%;
    width: 40%;
    margin-left: 1.8rem;
    margin-right: 1.5rem;
    border-radius: 3rem 1rem;
}

#teacher-img-gabe {
    background-image: url('../img/gabe.jpg');
}

#teacher-img-cassidy {
    background-image: url('../img/cassidy2.jpg');
}

#teacher-img-dakota { 
    background-image: url('../img/dakota2.jpg');
}

#teacher-img-megan { 
    background-image: url('../img/megan2.jpg');
}

#teacher-img-zoe { 
    background-image: url('../img/zoe.jpg');
}

#teacher-img-abby { 
    background-image: url('../img/abby.jpg');
}

#teacher-img-sade { 
    background-image: url('../img/sade.jpg');
}

#teacher-img-dylan { 
    background-image: url('../img/dylan-ruby-elixir2.jpg');
}

.teacher-name{
    margin-bottom: 0;
}

.teacher-title{
    display: none;
    margin-top: 0;
}

.teacher-description {
    margin-left: 2.5rem;
    margin-bottom: 2.5rem;
}

.teacher-description-2{
    display: none;
}

.testimonials-wrapper{
    display: none;
}

/********** SIGN UP PAGE **********/
.bg-signup {
    background-image: url(../img/girl-playing-elec-guitar-on-stage.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100%;
    padding-bottom: 0;  
    padding: 0;
}

.signup {
    background-color: rgba(0, 139, 139, 0.281);
    color: white;
    font-variant: small-caps;
    text-align: center;
    width: 100%; 
}

.signup-info {
    color: white;
    font-size: 1.2rem;
    margin: auto;
    padding: 0 1rem;
    width: 90%;
}

.signup-info a {
    color: white;
}

.container-signup {
    background-color: rgba(0, 0, 0, 0.4);
    padding-bottom: 2rem;
    margin-bottom: -2rem;
}

/* contact form ====================*/
* {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
   /*font-smoothing:antialiased;*/
    text-rendering:optimizeLegibility;
 }

 #contact-form h1 {
    margin: .625rem 0 .625rem 0;
 }

 #contact-form h4{
    margin: 0 0 1.25rem 0;
 }

 #contact-form {
    background-color:rgba(128, 128, 128, 0.8);
    padding: .625rem 2rem 1.875rem 2rem;
    max-width: 80%;
    margin: auto;
    margin-top: 1.875rem;
    border-radius: .4375rem;
    -webkit-border-radius: .4375rem;
    -moz-border-radius: .4375rem;
 }

 #contact-form input,   
 #contact-form select,   
 #contact-form textarea,   
 #contact-form label { 
    font-size: 1rem;  
    margin-bottom: 1rem;
    margin-top: .125rem;
 } 

 #contact-form input,   
 #contact-form select,   
 #contact-form textarea { 
    width: 100%;
    border: 0; 
    -moz-border-radius: .25rem;  
    -webkit-border-radius: .25rem;  
    border-radius: .25rem;
    margin-bottom: 1.5625;  
    padding: .5rem;  
 }  

 #contact-form input:focus,   
 #contact-form select:focus,   
 #contact-form textarea:focus {  
    background-color: #E5E6E7; 
 }  

#contact-form textarea {
    width: 100%;
    height: 9.375rem;
}

input[type=submit] {
    background-color: rgba(0, 139, 139, 0.489);
    padding: .75rem 1.25rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

input[type=submit]:hover {
    background-color: #669999;
}

.error {
    color: red;
}

.success {
    color: #800000;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
}
 
/********** PAYMENTS PAGE **********/
.bg-payments {
    border-top: 1px solid #ccc;
    background-color: #eeeeee;
    /*background: url(../img/lone-gtr-bw.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: ;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;*/
    padding-bottom: 0;  
    padding: 0;
    margin-bottom: -2rem;
}

.payments {
    background-color: rgba(0, 139, 139, 0.349);
    color:white;
    font-variant: small-caps;
    text-align: center;
    width: 100%; 
}

.container-payments {
    margin-top: 4rem;
}

/* Payment Table/Divs ====================*/
.payment-divs {
    box-shadow: 0 0 20px #888888;
    -moz-box-shadow: 0 0 20px #888888; /* for Firefox 3.5+ */
    -webkit-box-shadow: 0 0 20px #888888; /* for Safari and Chrome */
    border: 4px solid darkgray;
    width: 70%;
    margin: auto;
    margin-bottom: 3rem;
}

.title {
    color: white;
    background-color: rgba(0, 0, 0, 0.918);
    text-align: center;
    padding: 1rem 0;
}

.descrip {
    background-color: rgba(65, 105, 225, 0.92);
    background-color: #19619cf3;
    -webkit-background-color: #19619cf3;
    -moz-background-color: #19619cf3;
    -o-background-color: #19619cf3;
    color: white;
    padding: 1.5rem .5rem 0 .5rem;
    height: 10rem;
}

.descrip p {
    text-align: center;
}

.sm-descrip {
    padding-top: 1.3rem;
}

.med-descrip{
    padding-top: .6rem;
}

.lg-descrip{
    padding-top: 0rem;
}

.pay {
    background-color:  	rgba(105, 105, 105, 0.92);
    background-color: #404040ea;
    -webkit-background-color: #404040ea;
    -moz-background-color: #404040ea;
    -o-background-color: #404040ea;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    padding: .8rem 1rem .8rem 1rem;
    text-align: center;
    height: 16rem;
}

.pay img {
    margin-top: -10rem;
    width: 50%;
    position: fixed;
}

/********** EVENTS PAGE **********/


/********** CONTACT PAGE **********/
.contact-bg{
    background-color: #eeeeee;
}

.contact-a a{
    color:rgba(0, 139, 139, 0.8);
}

.contact-pg{
    width: 100%;
    color: black;
    padding-left: .9rem;
}

.contact-pg ul {
    list-style: none;
    padding-left: 0;
}

.contact-pg ul li {
    display: inline-block;
    vertical-align: top;
}

.map-container {
    border: 2px solid #ccc;
    height: 0;
    overflow: hidden;
    position: relative;
    padding-bottom: 65%;
    width: 95%;
    margin: auto;
}

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

/********** FAQ PAGE **********/
.faqs-bgrd{
    background-color: rgba(211, 211, 211, 0.45);
}

.faq-a a{
    color:rgba(0, 139, 139, 0.8);
}

    .faq-a a:hover {
        color: 	rgb(64, 64, 64);
    }

.faqs{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.faqs h3{
    margin-bottom: -.8rem;
    margin-top: 2.8rem;
}

.faqs p{
    font-style: italic;
}

/* FOOTER ====================*/
footer {
    background-color: black;
    margin-top: 2rem;
    width: 100%;
}

.footer-img {
    background-color: #333;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    padding-bottom: 50%;
    width: 40%;   
    margin: 1rem 0 1.8rem 1rem;
}

#nm-tree-logo {
    background-image: url(../img/noisemakers-logo-tree-gtr.png);
}

.contact-info {
    text-align: center;
    float: right;
    font-size: .675rem;
    margin-top: 2.2rem;
    margin-right: 1rem;
    color: white;
    width: 50%;
}
    
.contact-info a{
    color: white;
}

    .contact-info ul {
        list-style: none;
        padding-left: 10px;
    }

    .contact-info ul li {
        display: block;
    }

    .contact-info i {
        color: white;
        padding-right: .2rem;
    }

.social-media {
    float: right;
    width: 50%;
    margin-right: 1.2rem;
    margin-left: -1rem;
    margin-top: -.6rem;
    text-align: center;
}

    .social-media i {
        font-size: .875rem;
        color: white;
    }

    .social-media ul {
        list-style: none;
    }

   .social-media ul li {
        display: inline-block;
        padding-right: .9375rem;
        vertical-align: top; 
    }

    .social-media ul li :nth-child(3n) {
        padding-right: 0;
    }

.op-coexist {
    font-size: .675rem;
    color: white;
    float: right;
    width: 50%;
    text-align: center;
    margin-right: .5rem;
    margin-top: -.8rem;
}

.op-co {
    color: white;
}

.footer-video{
    display: none;
}

footer nav {
    clear: both;
    width: 100%;
    text-align: center; 
    margin-bottom: -1rem;
}

    footer nav ul {
        list-style: none;
        padding: 0;
    }

    footer nav ul li {
        display:  inline;
        padding: 0 1rem;
        text-align: center;
    }

    footer nav ul li a {
        color: white;
        font-size: .8125rem;
        text-transform: uppercase;
    }

    footer nav ul li a:hover {
        color: rgba(0, 139, 139, 0.8);
    }

    footer nav :nth-child(7n) {
        border: none;
    }

.copyright {
    background-color: rgb(41, 43, 43);
    padding-bottom: .045rem;
    padding-top: .045rem;
    margin-top: 1.5rem;
    color: white;
    text-align: center;
    font-size: .675rem;
    font-weight: 800;
}

    .copyright a{
        color: white;
    }   

    small{
        font-size: .675rem;
    }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

 .hidden {
    display: none !important;
  }
  
  /*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
  
  .sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
  }
  
  /*
  * Extends the .sr-only class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */
  
  .sr-only.focusable:active,
  .sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
  }
  
  /*
  * Hide visually and from screen readers, but maintain layout
  */
  
  .invisible {
    visibility: hidden;
  }
  
  /*
  * Clearfix: contain floats
  *
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the
  *    `contenteditable` attribute is included anywhere else in the document.
  *    Otherwise it causes space to appear at the top and bottom of elements
  *    that receive the `clearfix` class.
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */
  
  .clearfix:before,
  .clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
  }
  
  .clearfix:after {
    clear: both;
  }
  
/* ==========================================================================

   Media Queries   
   
   ========================================================================== */

/* TABLET DESIGN ====================*/
@media (min-width:768px) {
    html, body {
        font-size: 18px;
    }

    .page-title h1{
        font-size: 2rem;
    }
 
    /* Nav ====================*/  
    .logo {
        padding-top: .2rem;
    } 

    /* Social Media Top ====================*/
    .social-media-top h3{
        padding-top: 1.3rem;
    }

    /********** HOME PAGE *******************/
    /* Slideshow ====================*/
    .owl-carousel img{
        height: 26rem;
    }

    .text{
        bottom: 4rem;
    }

    .text h1, .text h2{
        font-size: 1.5rem;
        font-family: 'Vollkorn SC', serif;
    }
    
        .text a{
            font-size: inherit;
        }
    
    .btn {
        font-size: 1.3rem;
    }

    /* Top Section ====================*/
    .top-sect-item {
        padding: .9375rem 0;
        font-size: 1rem;
    }

    .index-mobile-hide{
        display: block;
    }

    .top-sect-left{
        float: left;
        width: 55%;
        padding-left: .4rem;
    }

    .top-img {
        display: none;
    }

    .top-sect-left p{
        padding-top: 0;
    }

    /* You Tube Section ====================*/ 
   .top-sect-right{
        float: right;
        width: 42%;
    }

    .you-tube{
        display: block;
        padding-top: .2rem;
    }

    .you-tube-wrapper{
        border: .125rem solid #ccc;
        height: 0;
        overflow: hidden;
        padding-bottom: 65%;
        position: relative;
        width: 95%;
    }

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

    /* Rating Div ====================*/
    .three-best-img {
        width: 30%;
        margin-top: 5% ;
        margin-left: 8%;
    }    

    /* Feed Section ====================*/
    .happenings{
        font-size: 1.4rem;
        letter-spacing: -.04rem;
        text-align: left;
    }

    .feed-img {
        width: 25%;
    }

    .feed-info {
        width: 70%;
    }

        .feed .index-mobile-hide{
            display: block;
        }

        .feed .index-mobile-p{
            display: none;
        }

    /********** ROCK CAMP PAGE *********/
    .dt-tab-hide {
        display: none;
    }

    .rc-mobile-img{
        display: none;
    }

    .owl-carousel .item-rc{
        height: 45vh;
    }

        .owl-carousel .item-rc img {
            height: 45vh;
        }

        .item-rc .text {
            margin-bottom: 3rem;   
        }  

    .top-sect-left-rc{
        float: left;
        width: 53%;
        padding-left: .3rem;
    }

    .top-sect-right-camp{
        width: 40%;
    }

    .top-sect-right-camp blockquote{
        display: block;
        margin: 0;
        padding-top: .8rem;
        padding-left: 2rem;
        padding-right: 2.5rem;
        font-size: .8rem;
    }

        .cite-rc{
            display: block;
            font-size: .8rem;
            margin-left: 54%;
        }

    .line-space{
        padding-bottom: .05rem;
    }  

    .top-sect-right-camp{
        float: right;
        width: 45%;
    }

    rc-pay-buttons{
       margin-bottom: 0;
    }

    .rock-camp-pay{
      margin: auto;
      margin-top: -10%;
    }

    rc-pay-buttons{
       margin-bottom: 0;
    }

    .pay-rc-left{
        margin: auto;
        margin-left: -8%;
    }

        .pay-rc-left h2{
            padding-left: 7%;
        }

    .pay-rc-right{
        margin: auto;
        margin-right: -3%;
    }
    
        .pay-rc-right h2{
            padding-left: 0;
        }

    .signup-info-camp{
        width: 75%;
        margin-top: 1.6rem;
        margin-left: auto;
        margin-right:auto;
        padding-right: 0;
    }    

    /********** ABOUT US PAGE **********/ 
    .hero-bg-about{
        margin-top: -6.65rem;
        height: 28rem;
    }

   .meet-teachers h1{
        margin-bottom: 0;
   }

    .teacher {
        padding: 15px 0;
    }

    .teacher-img {
        padding-bottom: 20%;
        width: 20%;
       margin-bottom: 4rem;
    }

    .teacher-title{
        display: block;
    }

    .teacher-description{
        display: inline-block;
        width: 70%;
        margin-top: 0;
        font-size: .8rem;
        margin-left: 0;
        margin-bottom: 1rem;
    }

    .teacher-description-2{
        display: block;
        width: 70%;
        margin-left: 26.8%;
        font-size: .8rem;
        margin-top: 0;
    }

    .meet-teachers{
        padding-bottom: 1rem;
    }

    /********** SIGN UP PAGE **********/
    .signup {
        font-size: 1.4rem;
        padding-left: 1rem;
    }

    .signup-info {
        width: 75%;
    }

    #contact-form {
        max-width: 65%;
    }

    .contactInfo {
        width: 65%;
        margin: auto;
    }    

    /********** PAYMENT PAGE **********/
    .container-payments {
        margin-left: 1.5rem;
        margin-right: 1rem;
        padding-left: 2%;
    }

    .payments {
        font-size: 1.4rem;
    }

    .payment-divs {
        box-shadow: none;
        float: left;
        width: 35%;
    }

    .pay p{
        font-size: 1rem;
    }

    /********** Contact Page **********/
    .contact-a .page-title{
        margin-bottom: 2rem;
    }

    .contact-pg{
        float: left;
        width: 40%;
        margin-right: .5rem;
        padding-left: .9rem;
    }

    .map-container{
        height: 0;
        margin-bottom: .4rem;
        margin-top: .534rem;
        overflow: hidden;
        padding-bottom: 40%;
        position: relative;
        width: 55%;
    }

    /* FOOTER ====================*/
    .footer-img {
        padding-bottom: 32%;
        width: 25%;
        margin: 2rem 0 3rem 2rem;
    }

    .contact-info {
        float: left;
        font-size: 1rem;
        text-align: left;
        margin-left: 1rem;
        margin-top: 3.2rem;
        width: 38%;
    }

    .social-media {
        font-size: 1rem;
        float: left;
        text-align: left;
        width: 40%;
        margin-left: -.4rem;
        margin-right: 1.42rem;
    }

        .social-media i{
            font-size: 1.2rem;
        }

    .op-coexist {
        font-size: 1rem;
        float: left;
        margin-left: 1.5rem;
        text-align: left;
        width: 38%;
    }

    /*blockquote .footer-quote{
        display: block;
        color: white;
        font-size: .7rem;
        margin-top: 3.7rem;
    }

    cite .footer-cite{
        margin-top: -.3rem;
        float: right;
    }*/

    .footer-nav li a{
        font-size: 1rem;
    }

    small{
        font-size: .75rem;
    }   
}     

/* DESKTOP DESIGN ====================*/
@media (min-width:990px){
    html, body {
        font-size: 20px;
    }

    html{
        background-color: rgba(211, 211, 211, 0.65);
    }

    /* Header NAV ====================*/
    .logo{
        float: left;
    }

    .menu-toggle,
    .main-menu .menu-close{
        display: none;
    }

    .main-menu a:hover,
    .main-menu a:focus{
        text-decoration: none;
    }

    /* "Undo positioning of off-canvas menu */
    .main-menu{
        position: relative;
        margin-left: 27%;
        top: auto;
        height: auto;
        display: block;
        overflow-y: visible;
    }

            /* nav adjustment - pushes nav over more towards the right */
            @media (min-width:1085px){
                .main-menu{
                    margin-left: 33.5%;
                }
            }
    
            @media (min-width:1200px){
                .main-menu{
                    margin-left: 40.5%;
                }
            }

            @media (min-width:1400px){
                .main-menu{
                    margin-left: 49%;
                }
            }

            @media (min-width:1600px){
                .main-menu{
                    margin-left: 55%;
                }
            }
            
    .main-menu ul{
        display: inline-flex;

        /* "Undo off-canvas styling" */
        padding: 0;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
        height: auto;
        width: auto;
        background: none;
    }

    .main-menu li{
        border-right: white solid 2px;
        white-space: nowrap;
    }

        .main-menu li:nth-child(6n){
            border: none;
            padding-right: 0;
        }

    .main-menu a{
        border: 0 !important; /* "Remove borders from off-canvas styling" */
        font-size: .85rem;
        padding: 0 .7rem;
    }

    .main-menu a:hover,
    .main-menu a:focus{
        background: none; /* "Remove background from off-canvas styling" */
        color: rgba(0, 139, 139, 0.8);
    }

    /* Footer Video ====================*/ 
    .footer-video{
        display: block;
        float: right;
        width: 30%;
        margin-top: -14rem; 
        margin-right: 2rem;    
    }

    .footer-you-tube{
        display: block;
    }

    .footer-video-title{
        color: white;
    }

        .footer-video-title a{
            color: white;
        }

        .footer-video-title a:hover{
            color:rgba(0, 139, 139, 0.8);
        }

    .you-tube-wrapper-rc{
        border: .125rem solid #ccc;
        height: 0;
        overflow: hidden;
        padding-bottom: 65%;
        position: relative;
        width: 95%;
    }

    .footer-you-tube iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /********** NAV **********/
    .overlay-content {
        top: 2.5%; 
    }
    .menu {
        display: inline-block;
        color: white;
        font-weight: 700;
        font-size: 1.8rem;
        font-variant: small-caps;
    }

    /********** HOME PAGE **********/
    /* Slideshow ====================*/
    .owl-carousel img{
        height: 33rem;
    }

    .text h1, .text h2{
        font-size: 1.8rem;
    }

        .text a{
            padding: .2rem .5rem;
        }

    /* Rating Div ====================*/
    .three-best-img {
        width: 20%;
        margin-top: 1.5%;
        margin-left: 0;
        margin-left: 15% ;
        clear: both;
    }

    /* Feed Section ====================*/    
    .feed {
        max-width: 98%;
        margin: auto;
    } 

        .happenings{
            padding-bottom: 0;
        }
        .feed-info h2{
            font-size: 1.1rem;
        }

    /* Top Section ==================*/
    .top-sect-item p{
        font-size: 1rem;
    }
    .top-sect-left{
        padding-top: 2rem;
        padding-left: 1rem;
        width: 53%;
    }

    .top-sect-right{
        padding-top: 1rem;
        padding-right: 1rem;
        width: 40%;
        margin-top: 0;
    }

    /********** ROCK CAMP PAGE *********/ 
    .owl-carousel .item-rc{
        height: 65vh;
    }

        .owl-carousel .item-rc img {
            height: 65vh;
        }

    .item-rc .text{
        margin-bottom: 2rem;
     }

    .top-sect-left-rc{
        padding-top: 0;
    }

    .top-sect-left-rc{
        margin-top: 1%
    }

    .top-sect-right-camp blockquote{
        padding-top: .5rem;
        padding-left: .8rem;
        padding-right: 5rem;
    }

        .cite-rc{
            display: block;
            font-size: .8rem;
            margin-left: 54%;
        }

    .line-space{
        padding-bottom: .05rem;
    }    

    .top-sect-right-camp{
        float: right;
        width: 45%;
    }

   .rc-pay-buttons{
         margin-bottom: 8rem;
    }

    .signup-info-camp{
        width: 70%;
    }   

    /********** ABOUT US PAGE **********/
    .hero-bg-about{
       /*background: url('../img/nm-jr-rock-camp-2018.jpg') no-repeat center center fixed;*/
       margin-top: -6.7rem;
    }    

    .about-main{
        background-color: white;
    }   

    .about-mobile-hide{
        display: block;
    }

    .about-main-wrapper{
        float: left;
        width: 60%;
        /*width: 90%;*/
    }

    .about-main-wrapper p{
        font-size: .8rem;
        /*margin-left: 3.5rem;*/
    }

    /* Testimonials ======================*/
    .testimonials{
        display: block;
        float: right;
        width: 35%;
        box-shadow: 0 0 3rem #888888;
        background-color: rgba(0, 139, 139, 0.08);
        margin-top: 1.5rem;
        margin-right: 2rem;
        padding-bottom: 1rem;
    }

    .testimonials-h4-wrapper{
        background-color: gray;
        margin-left: 2rem;
        margin-right: 2.2rem;
        margin-top: 1rem;
    }

    .testimonials h4{
        color: white;
        margin-bottom: -2rem;
        padding-bottom: 1rem;
        padding-top: 1rem;
        font-weight: 550;
        text-align: center;
    }

    .testimonials blockquote{
        display: block;
        color: black;
        font-size: .65rem;
        padding-top: 2rem;
    }

    .testimonials cite{
        padding-right: 3rem;
        float: right;
        font-size: .6rem;
        /*padding-right: 4rem;
        padding-top: 3.8rem;
        font-size: 6rem;*/
    }

    /* Meet Teachers ====================*/
    .about-main h1{
        padding-left: 1.5rem;
    }

    .about-main p{
        padding: 0 3rem 0 3rem;
        font-size: 1rem;
    }

   .meet-teachers{
       border-top: 1px solid #ccc;
       /*background: url('../img/instruments-bg.jpg') no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
       width: 100%;*/
    }

    .meet-teachers h1{
        padding-left: 1.5rem;
    }

    .teacher-img{
        margin-left: 2.3rem;
        margin-right: .5rem;
        width: 20%;
    }

    .teacher-description{
        padding-right: 2rem;
        width: 68%;
        font-size: 1rem;
    }

    .teacher-description-2{
        width: 68%;
        margin-left: 25%;
        font-size: 1rem;
    }

    /********** SIGN UP PAGE ***********/
    .signup-info {
        width: 70%;
    }  

  /* .bg-signup {
       background: url(../img/home-bg-girl.jpeg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
       width: 100%;
       padding-bottom: 0;  
       padding: 0;
   }*/

   /*********** PAYMENTS PAGE **********/
  /* .bg-payments {
       background: url(../img/lone-gtr-bw.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover; 
       width: 100%;
   }   */

 .container-payments {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    /********** CONTACT PAGE ********/
    .contact-pg{
        padding-left: 3rem;
    }
    .map-container {
        border: 3px solid #ccc;
        height: 0;
        margin-bottom: 2.5rem;
        margin-top: 1.875rem;
        overflow: hidden;
        padding-bottom: 40%;
        position: relative;
        width: 50%;
    }

    /********** FAQ PAGE *********/
    .faqs{
        padding: 0 3rem 1.3rem 3rem;
        margin-top: 0;
    }

    /* FOOTER ====================*/

   /* blockquote {
        margin-top: 2.5rem;
    }*/
    
   /*cite {
        margin-top: -4rem;
    }*/

    /*.footer-best-of-bay{
        display: block;
    }

    .footer-bay-img {
        background-color: #333;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border: 2px solid white;
        float: right;
        padding-bottom: 15%;
        width: 15%;   
        margin-right: 9%;
        margin-top: -2rem;
    }

    #best-of-bay {
        background-image: url(../img/best-of-bay-2017.png);
    }*/ 
}

@media (min-width: 1466px){
  .rock-camp-pay{
    max-width: 50%;
    margin: auto;
    margin-top: -5%
  }
}
@media (min-width: 1500px){
    .you-tube{
        width: 60%;
        margin: auto;
    }

    .footer-video{
        margin-top: -11rem;
    }
}

@media (min-width: 3500px){ 
  .rock-camp-pay{
    margin:auto;
  }
}

  /* ==========================================================================

========================================================================== */
  
  @media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
  }
  
  @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }
  
  /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
  
  @media print {
    *,
    *:before,
    *:after {
      background: transparent !important;
      color: #000 !important;
      /* Black prints faster */
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }
    a,
    a:visited {
      text-decoration: underline;
    }
    a[href]:after {
      content: " (" attr(href) ")";
    }
    abbr[title]:after {
      content: " (" attr(title) ")";
    }
    /*
       * Don't show links that are fragment identifiers,
       * or use the `javascript:` pseudo protocol
       */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
      content: "";
    }
    pre {
      white-space: pre-wrap !important;
    }
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
    /*
       * Printing Tables:
       * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
       */
    thead {
      display: table-header-group;
    }
    tr,
    img {
      page-break-inside: avoid;
    }
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
    h2,
    h3 {
      page-break-after: avoid;
    }
  }