/*non semantic protector -- wrapper div to protect against some z-ordering and background issues wrecking effects*/
.non-semantic-protector { 
  position: relative; 
  z-index: 1; 
}

/*tucked top corners*/
.tuckedtopcorners { 
  background: #f6f6f6;
  height: 700px;
  margin: 50px auto;
  max-width: 600px;
  position: relative;
  width: 80%;
  box-shadow: 0 1px 7px hsla(0, 0%, 0%, 0.2);
}
.tuckedtopcorners:after,
.tuckedtopcorners:before {
  background: #e6e6e6;
  content: '';
  height: 50px;
  position: absolute;
  top: -25px;
  width: 100px;
  box-shadow: 0 5px 10px -7px hsla(0, 0% ,0%, 0.5);
}
.tuckedtopcorners:after {
  left: -50px;
  transform: rotate(-45deg);
}
.tuckedtopcorners:before {
  right: -50px;
  transform: rotate(45deg);
}

/*ribbon -- wrap with semantic protector, then try e.g. h1 class=ribbon strong class=ribbon-content*/
.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
 font-weight: bold;
 width: 50%;
 box-shadow: 0 10px 15px #000a;
 position: relative;
 background: #77718c;
 color: white;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #3d355c;
 z-index: -2;

}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
  box-shadow: 10px 1px 10px #000a;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
box-shadow: -10px 1px 10px #000a;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #28223c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}


/* drop shadow*/
.dropshadow {
  -webkit-box-shadow: 5px 5px 21px 0px rgba(0,0,0,0.65);
  -moz-box-shadow: 5px 5px 21px 0px rgba(0,0,0,0.65);
  box-shadow: 5px 5px 21px 0px rgba(0,0,0,0.65);
}

/* flexbox container */
.flexbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* display box */
.displaybox {
  background-color: white;
  display: block;
  margin: 1em auto;
  width: 75%;
  padding-top: 10px;
  text-align: center;
}

/* donate box */
.donatebox {
  width: 270px;
  margin: 1em 2.6em;
  padding-top: 5.5em;
}

.donatebox .ribbon {
  width: 110% !important;
  position: absolute;
  margin: -1em -1em;
  top: 23px;
}

.donatebox form {
  display: inline-block;
  margin: 0 auto;
}

/* collapsible */
.collapsible {
  background-color: #3d355c;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible:focus {
  background-color: #483e6c;
}
.collapsible:after {
    content: "\2795"; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white !important;
    float: right;
    margin-left: 5px;
}


.collapsible-active, .collapsible:hover {
    background-color: #52487c;
}
.collapsible-active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.collapsible-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f0f0f0;
}

/* hestia overrides */
@media (min-width: 1500px)
.container {
  width: 1470px;
}