/* -------------------- BUTTONS -------------------- */

a.btn, 
a.concert_btn,
a.index_btn {
  position: relative;
  bottom: 5px;
  padding: 5px 20px 5px 20px;
  color: var(--btn-fg-color);
  background-color: var(--btn-bg-color);
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  border-radius: var(--btn-border-radius);
  -webkit-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
   -moz-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
    -ms-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
     -o-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
        transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
}

a.btn:hover,
a.concert_btn:hover,
a.index_btn:hover {
  color: var(--btn-hover-fg-color);
  background-color: var(--btn-hover-bg-color);
  border: solid 1px var(--btn-hover-color);
  -webkit-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
   -moz-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
    -ms-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
     -o-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
        transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
  
}

a.up_concert_btn  {
  position: relative;
  bottom: 10px;
  padding: 5px 20px 5px 20px;
  margin: 20px 20px 0 20px;
  color: var(--btn-fg-color);
  background-color: var(--btn-bg-color);
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  border-radius: var(--btn-border-radius);
  -webkit-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
   -moz-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
    -ms-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
     -o-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
        transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
}
a.up_concert_btn:hover {
  color: var(--btn-hover-fg-color);
  background-color: var(--btn-hover-bg-color);
  border: solid 1px var(--btn-hover-color);
  -webkit-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
   -moz-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
    -ms-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
     -o-transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
        transition: all 0.5s cubic-bezier(0.73, 0.01, 0.11, 1.01);
  
}

/* -------------------- ICON BUTTONS -------------------- */

a.paypal_btn,
a:link.paypal_btn,
a:visited.paypal_btn,
a:active.paypal_btn {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 7px 25px 7px 35px;
  background-color: var(--btn-bg-color);
  background-image: url("../images/btn_paypal.png");
  background-repeat: no-repeat;
  background-position: calc(50% - 70px) center;
  background-size: 17px;
  color: var(--btn-fg-color);
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  text-align: center;
  line-height: 150%;
  border-radius: var(--btn-border-radius);
}

a.paypal_btn::after,
a:link.paypal_btn::after,
a:visited.paypal_btn::after,
a:active.paypal_btn::after {
  content: 'Donate via PayPal';
  margin-left: 12px;
}

a:hover.paypal_btn  {
  color: var(--btn-hover-fg-color);
  background-color: var(--btn-hover-bg-color);
  border: solid 1px var(--btn-hover-color);
}

a.facebook_btn,
a:link.facebook_btn,
a:visited.facebook_btn,
a:active.facebook_btn {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 7px 25px 7px 25px;
  background-color: var(--btn-bg-color);
  background-image: url("../images/btn_facebook.png");
  background-repeat: no-repeat;
  background-position: calc(50% - 43px) center;
  background-size: 19px;
  color: var(--btn-fg-color);
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  text-align: center;
  line-height: 150%;
  border-radius: var(--btn-border-radius);
}

a.facebook_btn::after,
a:link.facebook_btn::after,
a:visited.facebook_btn::after,
a:active.facebook_btn::after {
  content: 'Facebook';
  margin-left: 12px;
}

a:hover.facebook_btn  {
  color: var(--btn-hover-fg-color);
  background-color: var(--btn-hover-bg-color);
  border: solid 1px var(--btn-hover-color);
}

a.youtube_btn,
a:link.youtube_btn,
a:visited.youtube_btn,
a:active.youtube_btn {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 7px 25px 7px 44px;
  background-color: var(--btn-bg-color);
  background-image: url("../images/btn_youtube.png");
  background-repeat: no-repeat;
  background-position: calc(50% - 39px) center;
  background-size: 29px;
  color: var(--btn-fg-color);
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  text-align: center;
  line-height: 150%;
  border-radius: var(--btn-border-radius);
}

a.youtube_btn::after,
a:link.youtube_btn::after,
a:visited.youtube_btn::after,
a:active.youtube_btn::after {
  content: 'YouTube';
  margin-left: 12px;
}

a:hover.youtube_btn  {
  color: var(--btn-hover-fg-color);
  background-color: var(--btn-hover-bg-color);
  border: solid 1px var(--btn-hover-color);
}

/* -------------------- ARCHIVE CLOSE -------------------- */

.close_notice img {
  position: relative;
  left: 0px;
  width: 22px; 
  margin: 1px 10px -4px 10px;
  padding: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff;
  border-radius: 50px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.close_notice img:hover {
  cursor: pointer;
  background: #b60d00;
  border-color: #b60d00;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}


/* ---------------------------------------- RESOLUTION < 400px ---------------------------------------- */

@media screen and (max-width: 400px) {

  a.btn, 
  a.concert_btn,
  a.index_btn {
    font-size: var(--btn-font-size);
    font-size: calc(var(--btn-font-size) - 1px);
  }

}
/* ---------------------------------------- RESOLUTION < 390px ---------------------------------------- */

@media screen and (max-width: 390px) {

  a.btn, 
  a.concert_btn,
  a.index_btn {
    position: relative;
    bottom: 5px;
    padding: 5px 10px 5px 10px;
  }
  
}