.patreon-cta { padding:20px;margin-bottom:10px;display: block;color:black !important; transition: all 0.2s;overflow:hidden; }
.patreon-cta.music { background-color: #7fffff; }
.patreon-cta.musings { background-color: #ffeb62; }
.patreon-cta.events { background-color: #ffc1f1; }
.patreon-cta.culture { background-color: #b0f4aa; }
.patreon-cta.tech { background-color: #649edc; }

.patreon-cta h2, .patreon-cta p {
    margin:0 0 5px 0 !important;
}

.patreon-cta:hover {
    background:#222;
    color:white !important;
}

.patreon-cta .heart {
    float:left;
    width:15%;
    margin-right:25px;
}

.patreon-homepage {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:999;
    margin:0;
    text-align:center;
    padding:10px;
}

.patreon-homepage .heart {
    width:20px;
    float:none;
    margin:0;
}

@media only screen and (max-width: 760px)  { 
    .patreon-cta  {
        text-align: center;
    }
    .patreon-cta .heart {
        float:none;
        width:100px;
        margin-right:0;
    }
    .patreon-homepage {
        font-size:12px;
    }
    .patreon-homepage .heart {
        width:20px;
        margin:auto;
        display:block;
        float:none;
    }
}

body {
    padding-bottom:50px !important;
}

.modal-bg, .modal {
    display:none;
}
.modal-bg.on {
    display:block;
    background:rgba(0,0,0,0.8);
    height:150vh;
    width:100vw;
    position: fixed;
    top:0;
    left:0;
    z-index:999;
  }
  .modal.on {
    display:block;
      
    background:white;
    z-index:9999;
    position:absolute;
    top:50px;
    width:80%;
    left:10%;
    
  }
  .modal-text {
      padding:15px;
  }
  .modal p {
      font-size:14px;
  }

  .btn {
      font-size:16px;
      background:#7fffff;
      color:black;
      padding:5px 15px;
      border-radius:15px;
  }
  .btn:hover,   .btn:active {
      background:black;
      color:white;
  }
  body {}