/* Mason custom widgets */

/* Alert ribbon */

/*--- Default and small screens ---*/


.gmuj_widget_alert_ribbon_item{
	top: 0;
    background: #fbf3da;
    width: 100%;
    height: auto;
    padding: .25em 1em;
    border-top: 3px solid #fc3;
    position: relative;
    z-index: 1;
    transition: height 0.5s;
    overflow: hidden;
}
.gmuj_widget_alert_ribbon_item h3{
	margin: .5em 0;
	font-size: 1.25em;
	cursor: pointer;
 }
.gmuj_widget_alert_ribbon_item_content{
	max-width: 75%;
	position: relative;
}

.gmuj_widget_alert_ribbon_link {
	display:block;
}

/* Style the show/hide button using the :after pseudo class */
input[type="checkbox"].gmuj_alert_ribbon_toggle{
  	position: absolute;
 	left: -9999px;
}
label.gmuj_alert_ribbon_toggle_label{
	position: absolute;
	z-index: 2;
	right: 0px;
	width: 100px;
	height: 50px;
	cursor: pointer;
}
label.gmuj_alert_ribbon_toggle_label::after{
	font-family: Font Awesome\ 5 Free;
	display: inline-block;
	position: absolute;
	z-index: 9999;
	right: 0px;
	padding: 2rem 1rem;
	color: #9c832f;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.5em;
}
/* Hide the label text */
label.gmuj_alert_ribbon_toggle_label span{
	position: absolute;
	left: -9999px;
}

/* Animate the height of the alert summary when the toggle button is clicked */
.gmuj_widget_alert_ribbon_summary{
	overflow: hidden;
	transition: max-height .5s, margin-bottom .5s;
}
input[type="checkbox"]:not(:checked) ~ .gmuj_widget_alert_ribbon_item .gmuj_widget_alert_ribbon_summary {
	max-height: 0em;
	margin-bottom: 0em;
}
input[type="checkbox"]:checked ~ .gmuj_widget_alert_ribbon_item .gmuj_widget_alert_ribbon_summary {
	max-height: 5em;
	margin-bottom: 1em;
}

/* Toggle the appearance of the show/hide graphic */
input[type="checkbox"]:not(:checked) ~ label::after {
	content: '\f055';
}input[type="checkbox"]:checked ~ label::after {
	content: '\f056';
}
