body {
       box-sizing: border-box;
 }


  :root {
       --white:#FFFFFF;
       --red:#ff0000;
       --black:#000000;
       --lightgrey:#D5D5D5;
       --darkgrey:#555 ;
       --blackgrey:#29292C;
       --lightblackgrey:#2d2d30;
 }


                      /*---------------------------------
                      --------------- NAVBAR ------------
                      ---------------------------------*/

  .navbar {
       font-family: Montserrat, sans-serif;
       margin-bottom: 0;
       background-color: var(--lightblackgrey);
       border: 0;
       font-size: 11px !important;
       letter-spacing: 4px;
       opacity: 0.9;
  }


  .navbar li a, .navbar .navbar-brand { 
       color: var(--lightgrey) !important;
  }


  .navbar-nav li a:hover {
       color: var(--white) !important;
       font-weight: bolder;
       letter-spacing: 7px;
  }

  @media screen and (max-width:768px) {
      .navbar-nav li.active a {
           color:var(--white) !important;
           background-color:var(--lightblackgrey) !important;
           font-weight: bolder;
           font-size: 16px;
           text-decoration:5px underline var(--red);
      }
  }


  @media screen  and (min-width:769px) {
      .navbar-nav li.active a {
           color:var(--white) !important;
           background-color:var(--lightblackgrey) !important;
           border-bottom: 5px solid var(--red);
           font-weight: bolder;
           font-size: 16px;
      } 
  }


  .navbar-default .navbar-toggle {
       border-color: transparent;
  }


  .open .dropdown-toggle {
       color: var(--white);
       background-color: var(--darkgrey) !important;
       font-weight: bolder;
       letter-spacing: 7px;
  }


  .dropdown-menu li a {
       color: var(--black) !important;
       letter-spacing: 4px !important;
  }


  .dropdown-menu li a:hover {
       background-color:var(--red) !important;
       color: var(--black) !important;
       font-weight: bolder !important;
  }


                      /*----------------------------------
                      ------------- .carousel ------------
                      ----------------------------------*/

 .carousel {
      font-family: montserrat , sans-serif;
 }


 .carousel-indicators li {
       background-color: transparent;
 }


 .carousel-indicators li.active {
       background-color: var(--red);
 }


  .carousel-inner img {
       width: 100%;
       margin: auto;
  }


  .carousel-caption h3 {
       margin-bottom: 35px;
       letter-spacing: 7px;
       text-align: center !important;
       font-weight: bolder !important;
       text-shadow: 3px 3px var(--red);
  }


  .carousel-caption p {
       margin-bottom: 35px;
       font-size: 15px;
  }


  .carousel-control span {
       color: var(--darkgrey);
       font-size: 35px;
  }


  @media screen and (max-width:768px) {
       .carousel-inner .item .carousel-caption {
            display: none;
            text-align: center !important;
            font-weight: bolder !important;
      }
  }


  @media screen and (min-width:769px) {
       .carousel-control span {
            color: var(--darkgrey);
            font-size: 55px !important;
      }
 }


                      /*-------------- THE BAND --------------
                      ------------- we love music! -----------
                      ------------ BANDMEMBER IMAGE --------*/

  .theband {
       margin: 0px 170px;
       padding: 100px;
       text-align: center;
  }


  .theband h1 {
       font: 20px Lato, sans-serif ;
       letter-spacing: 10px;
       margin-top: -10px;
       margin-bottom: 35px;
       color: var(--black);
  }


  .theband p {
       font: 16px Lato, sans-serif ;
       line-height: 25px;
  }


  .theband .row {
       margin-top: 40px;
  }


  .theband .row .col {
       opacity: 0.4;
 }


  .theband .row .col:hover {
       opacity: 1;
 }


  .theband .row .col:hover p {
       color: var(--red);
       font-weight: bolder !important;
       letter-spacing: 3px;
       font-size: 22px;
       text-shadow: 1px 1px var(--black);
}


  .theband .row p {
       font-weight: bolder;
       padding: 0px;
  }


  .theband .row img {
       margin: 30px 0px;
  }


   @media screen and (max-width:768px) {
       .theband {
            margin: auto;
            padding: auto;
       }
       .theband .one {
            text-align: justify !important;
            margin: auto -55px;
       }
       .theband .two {
            padding-top: 25px !important;
       }
       .theband .row .col {
           margin: auto -15px;
       }
       .theband .row img {
            width: 85%;
            height: 85%;
       }
       .theband .row .col:hover #demo p,
       .theband .row .col:hover #demo1 p,
       .theband .row .col:hover #demo2 p {
            letter-spacing: 1px !important;
            line-height: normal !important;
            font-size: 18px !important;
       }
       .theband .row .col:hover p {
            letter-spacing: 3px !important;
            font-size: 18px !important;
            line-height: normal !important;
       }
  }


                      /*------------- .tourdates ---------------
                      ---- .list-group - .list-group-items -----
                      ----------------- .label -----------------
                      ---- paris - new york - san franciso -----
                      ----------------- MODAL ----------------*/

 .tourdates {
      background-color: var(--lightblackgrey);
      font-family: Lato, sans-serif;
 }


 .tourdates .container {
      padding: 0px 100px;
 }


 .tourdates .container h3 {
      color: var(--white);
      font-size: 24px;
      letter-spacing: 8px;
      margin-top: 95px;
      margin-bottom: 34px;
 }


 .tourdates .container p {
      color: var(--lightgrey);
      font-size: 15px;
      padding-bottom: 40px;
 }


 .list-group-item {
      text-align: left;
      color: var(--darkgrey);
      font-size: 15px;
      font-weight: bold;
 }


 .badge {
      color: var(--white);
      background-color: var(--darkgrey);
      border: 1px solid var(--red);
      font-size: 13px;
 }


 .tourdates .row {
      margin-bottom: 80px;
 }


 .tourdates .row .col .card {
      background-color: var(--white);
      margin-bottom: 25px;
 }


 .row .col .card p {
      color: var(--darkgrey);
      font-weight: bolder;
      font-size: 17px;
      padding: 0px;
      margin-top: 15px;
 }


 .row .col .card button,
 .row .col .card button:link,
 .row .col .card button:visited {
      margin-top: 10px;
      margin-bottom: 25px;
      background-color: var(--blackgrey);
      color: var(--white);
      padding: 10px 14px;
      font-size: 15px;
      border: none;
 }


 .row .col .card button:hover {
      border: 1px solid var(--blackgrey);
      background-color: var(--white);
      color: var(--black);
 }


 .row .col .card button:active {
      background-color: green;
      color: var(--white);
      border: 1-x solid var(--black);
 }


  @media screen and (max-width:768px) {
      .three {
           margin: auto -60px;
      }
      .list-group {
           margin: 5px -60px 40px;
      }
      .row {
           margin: auto -70px;
      }
      .row .col {
           margin-bottom: 40px;
      }
      .tourdates .row img {
           width: 100%;
           height: 100%;
      }
 }


 @media screen and (min-width:769px) {
      .tourdates .row img {
           width: 100%;
           height: 100%;
      }
 }
                      /*-----------------------------------------
                      ------------------- MODAL -----------------
                      -----------------------------------------*/
 .modal-content {
      margin: 68px;
      box-shadow: 0px 0px 7px var(--white);
 }


 @media screen and (max-width:768px) {
      .modal-content {
           margin: auto;
      }
 }


 .modal-header {
      background-color: var(--lightblackgrey);
      color: var(--white);
      text-align: center;
      letter-spacing: 10px;
      margin: 0px;
      padding: 25px 40px 60px;
 }


 .modal-header h2  span {
      font-family: Lato, sans-serif;
 }


 .modal-body {
      padding: 40px;
 }


 .form-group .help-block {
      color: #BDBDBD;
      font-weight: bolder;
      font-size: 15px;
 }


 .form-group .form-control {
      color: var(--black);
      font-weight: 600;
 }


 .modal-body .btn-block {
      background-color: var(--lightblackgrey);
      color: var(--white);
      margin-top: 20px !important;
      padding: 8px 0px;
      font-size: 16px;
      font-weight: 800 !important;
 }


 .modal-body .btn-block:hover {
      background-color: var(--white);
      border: 1px solid var(--white);
      box-shadow: 3px 3px 8px green;
      color: var(--black);
      font-family: Lato, sans-serif;
 }


 .modal-footer {
      padding: 11px 11px 14px;
      border-top: 2px solid var(--lightgrey);
 }


 .modal-footer .btn {
      font-size: 16px;
      border: 1px solid var(--lightgrey) ;
      letter-spacing: 2px;
      color: var(--darkgrey);
      background-color: var(--lightgrey);
 }


 .modal-footer .btn:hover {
      background-color: var(--red);
      border: 1px solid var(--black);
      color: var(--white);
 }


 .modal-footer p {
      margin: 5px 5px 0px 0px;
      font-size: 16px;
      word-spacing: 3px;
 }


                     /*-----------------------------------
                     --------------- CONTACT -------------
                     -----------------------------------*/
                    
 .contact {
      margin: 0px 175px;
      padding-bottom: 100px;
 }


 @media screen and (max-width:768px) {
      .contact {
           margin: auto;
      }
      .row1 .information {
           margin: auto -20px !important;
           text-align: left !important;
      }
 }


 .contact h2 {
      margin: 100px auto 30px;
      font-family: Montserrat, sans-serif;
      letter-spacing: 8px;
      font-weight: bold;
 }


 .row1 {
      margin: 30px 64px;
 }


 .row1 .information {
      margin-top: 0px;
 }


 .row1 .information h4 {
      font: 16px Lato, sana-serif;
      margin-bottom: 15px;
 }


 @media screen and (max-width:768px) {
      .row1 .information {
           text-align: justify;
      }
      .row1 .row2 .email {
           margin: 15px 0px;
      }
 }


 .row1 .row3 {
      margin-top: 20px;
      margin-bottom: 25px;
 }


 .row1 .row4 button,
 .row1 .row4 button:link,
 .row1 .row4 button:visited {
      font: 15px Lato, sans-serif;
      background-color: var(--blackgrey);
      color: var(--white);
      padding: 8px 14px;
 }


 .row1 .row4 button:hover,
 .row1 .row4 button:active {
      background-color: var(--white);
      color: var(--black);
      border: 1px solid var(--black);
 }
                     /*-----------------------------------
                     ------------- NAV - TABS ------------
                     -----------------------------------*/
 .nav-tabs {
      margin: 45px 70px;
      text-align: center !important;
 }


 .nav-tabs li {
      margin: 0px 5px;
      font-weight: bold !important;
      font: 18px Montserrat, sans-serif;
 }


 .nav-tabs li a {
      border: 2px solid var(--red);
      color: var(--black);
 }


  @media screen and (max-width:768px) {
      .nav-tabs li a {
           margin-bottom: 7px;
      }
 }


 .tab-content {
      margin-top: -60px !important;
      text-align: center;
 }


 .tab-content h2 {
      font-size: 22px !important;
      letter-spacing: normal !important;
      text-decoration: underline;
 }


 .tab-content p {
      margin-top: -7px !important;
      font: 17px Lato, sans-serif;
 }


                     /*-------------------------------------
                     ----------------- FOOTER --------------
                     -------------------------------------*/
                    
footer {
      background-color: var(--lightblackgrey);
      color: var(--white);
      font-family: Montserrat, sans-serif;
      padding-bottom: 65px;
 }


 footer span {
      margin: 30px;
      font-size: 35px;
      color: var(--red);
 }


 footer h4 a {
      text-decoration: none;
 }


 footer h4 a:hover,
 footer h4 a:active {
      text-decoration: none;
      color: var(--red);
 }


 footer h4 a:hover strong,
 footer h4 a:active strong  {
      font-size: 24px !important;
      text-shadow: 1px 1px var(--red);
      
 }