/*Cumbia Colors:
#FB588C Pink
#FDF477 yellow
#3F2B7A purple
#0065B0 blue
#247E59 green
#53CDE0 lt-blue
#401019 brown
===
#FF6C38 orange
#006FB8 blue
#D5296B pink
#00B449 green
#E4CA5A yellow
#F95231 deep-orange
*/


@font-face {
  font-family: gm;
  src: url(font/gm.ttf);
}
@font-face {
  font-family: merced;
  src: url(font/merced.ttf);
}
@font-face {
  font-family: han-solo;
  src: url(font/han-solo.ttf);
}

a {
      text-decoration: none;
}

.page {
      background-color: #ffffff;
      font-size: 1.5rem;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      margin: auto;
      padding: 0px;
    }
.container {
      /*background-color: #00B449;*/
      background-image: url(../img/ss-chart-radial-04.png);
      background-size: contain;
      font-size: 1.5rem;
      color: #ffffff;
      text-align: center;
      /*width: 960px;*/
      width: 100%;
      display: inline-block;
      margin: auto;
      padding: 0px;
    }
.header {
      font-family: han-solo;
      /*background-color: #F95231;*/
      font-size: 5.0rem;
      color: #00B449;
      text-shadow: 2px 2px 5px #D5296B;
      text-align: center;
      width: 98%;
      display: inline-block;
      margin: auto;
      padding: 1%;
    }
.sub-header {
      font-family: han-solo;
      background-color: #4915ee;
      font-size: 3rem;
      font-style: italic;
      color: #E4CA5A;
      text-shadow: 2px 2px 5px #00B449;
      text-align: center;
      width: 98%;
      display: inline-block;
      margin: auto;
      padding: 1%;
}
.top-logo-l {
      width:12%;
      float:left;
      margin:1%;
}
.top-logo-r {
      width:12%;
      float:right;
      margin:1%;
}
.tip-jar {
      font-family: han-solo;
      font-size: 2rem;
      color: #4915ee;
      width: 20%;
      float: right;
}
.audio-player {
      margin: auto;
      text-align: center;
}
.contact {
      background-color: #E4CA5A;
      font-family: han-solo;
      font-size: 1.6rem;
      color: #D5296B;
      text-shadow: 2px 2px 5px #4915ee;
      text-align: center;
      width:15%;
      padding: 1%;
      margin: 1%;
      border: 3px solid #D5296B;
      border-radius: 25px;
      float: right;
}
.song {
      font-family: verdana;
      font-size: 1.7rem;
      color: #222222;
      text-shadow: 1px 2px 2px #cc66cc;
      /*font-weight: bold;*/
      line-height: 1.6;
}
.musician {
      font-family: verdana;
      font-size: 1.7rem;
      color: #222222;
      text-shadow: 1px 2px 2px #cc66cc;
      /*font-weight: bold;*/
      line-height: 1.6;
}
.call-action {
      font-size: 1.6rem;
} 
.col-container {
      /*background-color: #bd6b8e;*/
      
      
      font-size: 1.5rem;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      margin: auto;
      padding: 0px;
      margin-top: -40px;
    }
.col-1 {
      font-family: han-solo;
      /*background-color: #00B449;*/
      font-size: 2.5rem;
      color: #ffc400;
      text-shadow: 2px 2px 5px #333333;
      text-align: left;
      width: 98%;
      display: inline-block;
      margin: auto;
      padding: 0px;
      padding-top: 2%;
      padding-left: 2%;
      vertical-align: top;
    }
.col-2 {

      font-family: han-solo;
      /*background-color: #D5296B;*/
      font-size: 2.5rem;
      color: #00B449;
      text-shadow: 2px 2px 5px #333333;
      text-align: left;
      width: 98%;
      display: inline-block;
      margin: auto;
      padding: 0px;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 2%;
    }
.col-3 {
      font-family: han-solo;
      /*background-color: #ffc400;*/
      font-size: 2.5rem;
      color: #bb4433;
      text-align: left;
      text-shadow: 2px 2px 5px #333333;
      width: 98%;
      display: inline-block;
      margin: auto;
      padding: 0px;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 2%;
    }

.event {
      background-color: #ffc400;
      width: 50%;
      font-family: Verdana;
      font-size: 1rem;
      color: #333333;
      text-shadow: none;
      padding: 2%;
      margin: 1%;
      border: 3px solid #D5296B;
      border-radius: 25px;
}
.event_title {
      font-size: 1.5rem;
      color: #D5296B;
      text-shadow: 1px 2px 3px #222222;
      font-weight: bold;
}
.event_date {
      margin-left: 5%;
      width: 90%;
}
.event_description {
      margin-left: 5%;
      width: 90%;
}
.event_location {
      margin-left: 5%;
      width: 90%;
}
.event_url {
      margin-left: 5%;
      width: 90%;
}

.footer {
      background-color: #D5296B;
      font-size: 1rem;
      font-style: italic;
      color: #E4CA5A;
      text-align: center;
      width: 98%;
      display: inline-block;
      margin: auto;
      padding: 1%;
    }


/*Start media queries*/
/* start of desktop styles */

@media screen and (max-width: 991px) {
/* start of large tablet styles */

}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */

}

@media screen and (max-width: 479px) {
/* start of phone styles */

      .col-1 {
            font-size: 1.2rem;
      }
      .col-2 {
            font-size: 1.2rem;
      }
      .col-3 {
            font-size: 1.2rem;
      }
      .call-action {
            font-size: 1.2rem;
      }
      .tip-jar {
            width: 50%;
            float: right;
      }

      .contact {
            font-size: 1.2rem;
            width:25%;
      }

      .musician {
            font-size: 1.2rem;
      }

      .footer {
            font-size: 0.6rem;
    }

}