@charset "utf-8";
/* CSS Document */

/* STICKY NOTES */
/* Depending on location, add this after class="StickyNote" and modify as needed (this would be for location on the right) style="float: right; margin: 5px 0 5px 5px;" */

    div.StickyNote {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      overflow:visible;
    }
    div.StickyNote p {
      text-decoration:none;
      color:#000;
      background:#ffc;
      display:block;
      width:10em;
      padding:1em;
      font-family: 'Caveat';
        font-weight: 500;
      font-size: 1.5rem;
      box-shadow: 5px 5px 7px rgba(33,33,33,.7);
      transform: rotate(4deg);
      margin: 5px;
    }
/* ------------------------------------------------------------------------------------------------------------------------------------------ */
/* SHOW/HIDE */

     .collapsible {
        cursor: pointer;
        width: 100%;
        border: none;
        outline: none;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        margin-top: 15px;
        margin-bottom: 0px;
        color: #505050;   
        text-align: left;
        background-color: #ffffff;
        padding-left: 0;
        margin-left: 0;
    }
    .content {
        display: none;
        overflow: hidden;
    }
    .collapsible:after {
        content: '\002B'; /* Unicode character for "plus" sign (+) */
        font-size: 25px;
        color: #505050;
        margin-left: 15px;
    }
    .shown:after {
        content: "\2212"; /* Unicode character for "minus" sign (-) */
    }
    /* Add this code to the bottom of the page you are using this CSS on.
        <script>
           var coll = document.getElementsByClassName("collapsible");
            var i;

            for (i = 0; i < coll.length; i++) {
              coll[i].addEventListener("click", function() {
                this.classList.toggle("shown");
                var content = this.nextElementSibling;
                if (content.style.display === "block") {
                  content.style.display = "none";
                } else {
                  content.style.display = "block";
                }
              });
            } 
        </script>    
    */
/* ------------------------------------------------------------------------------------------------------------------------------------------ */


/*POPUP*/
/*https://codepen.io/imprakash/pen/GgNMXO*/
	
	.overlay {
 	 position: fixed;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 background: rgba(0, 0, 0, 0.7);
	 transition: opacity 500ms;
	 visibility: hidden;
	 opacity: 0;
}
	.overlay:target {
	  visibility: visible;
	  opacity: 1;
	}

	.popup {
	  margin: 70px auto;
	  padding: 20px;
	  background: #fff;
	  border-radius: 5px;
	  width: 30%;
	  position: relative;
	  transition: all 5s ease-in-out;
	}

	.popup .close {
	  position: absolute;
	  top: 0px;
	  right: 10px;
	  transition: all 200ms;
	  font-size: 30px;
	  font-weight: bold;
	  text-decoration: none;
	  color: #333;
	}
	.popup .close:hover {
	  color: #ff7f45;
	}
	.popup .content {
	  max-height: 30%;
	  overflow: auto;
	}

	@media screen and (max-width: 700px){
	  .box{
		width: 70%;
	  }
	  .popup{
		width: 70%;
	  }
	}