:is(a, button).button{
	
	&.button--yellow{
		background:#ffc107;
		color: #082141;
		border-color: #082141;
		
		&:is(:hover,:focus-visible) {
		    border-color: #205998;
		}
	}

	&.button--dark{
		background:#184171;
		color: #ffffff;
		border-color: #184171;
		
		&:is(:hover,:focus-visible) {
		    border-color: #184171;
			color:#ffffff;
		}
	}
	
	&.button--large{
		font-size:1.4em;
	}
	
	&.button--small{
	    padding: .25rem 1rem;
	}

	&.button--full-width{
		padding-inline:.5em;
		width: 100%;
	}
	
	&.button--inline {
	    display: inline;
	    padding: .25rem .75rem;
	}
	
	&.button--subtle{
		background-color: #ddd;
		color: #205998;
		border-color: #ddd;
		
		&:is(:hover,:focus-visible){
			background:#fff;
		}
	}
	
	&.button--invisible {
	    background: none;
	    padding: 0;
	    margin: inherit;
	    border: 0;
	    color: inherit;
	    font-size: inherit;
	    line-height: inherit;

		&:is(:hover,:focus-visible) {
		    background: #9dcffc;
		    outline: solid 5px #9dcffc;
		}
	}
	
	&.button--hover-white:is(:hover,:focus-visible) {
		background: #fff;
		color: #205998;
	}
	
	&.button.button.button--disabled:is(:hover,:focus-visible) {
    background: #ccc;
    color: #333;
    border-color: #bbb;
	}
}

/* 
.
.
.
Button Behaviors */

:is(a, button).button[target="_blank"]::after,
:is(a, button).button[href$=".pdf"]::after,
:is(a, button).button[href$=".zip"]::after{
    font: var(--fa-font-solid);
    transition: 200ms all;
    font-size: 0;
    line-height: 0;
    font-weight:bold;
    width:0;
}

#block-groupcontentmenu ul.nav li .nav-link[target="_blank"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".pdf"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".zip"]::after{
    font: var(--fa-font-solid);
    font-size: 75%;
    line-height: 0;
    font-weight:bold;
    width:0;
    position:absolute;
    margin: .4em 0 0 .25rem;
    display: inline-block;
    top: unset;
    right: unset;
}

:is(a, button).button[target="_blank"]:is(:hover,:focus-visible)::after, 
:is(a, button).button[href$=".pdf"]:is(:hover,:focus-visible)::after, 
:is(a, button).button[href$=".zip"]:is(:hover,:focus-visible)::after{
    font-size:100%;
}

/* New Window */
:is(a, button).button[target="_blank"]::after,
#block-groupcontentmenu ul.nav li .nav-link[target="_blank"]::after{
    content: " \f35d";
}

/* PDF */
:is(a, button).button[href$=".pdf"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".pdf"]::after{
    content: " \f1c1";
}

/* Download/Zip */
:is(a, button).button[href$=".zip"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".zip"]::after{
    content: " \f019";
}











#block-groupcontentmenu ul.nav .nav-link:hover,
#block-groupcontentmenu ul.nav .nav-link:focus {
    background: #f7f8fb;
    box-shadow: -80px 0 0 0 #f7f8fb, 50px 0 0 0 #f7f8fb;
}


#block-groupcontentmenu ul.nav ul.show-submenu:has(:hover, :focus) {
    overflow: visible !important;
}


/*





Button 2 */

.button-2 {
    --_skew: var(--skew, 0);
    display: inline-block;
    background: linear-gradient(90deg, #205998, #5b87b4);
    transition: 300ms;
    padding: 1rem 2rem;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin-block: .25em;
    clip-path: polygon(calc(0.2rem * var(--_skew)) 0%, 100% 0%, calc(100% - calc(0.2rem * var(--_skew))) 100%, 0% 100%);
}

.button-2:hover {
    --_skew: var(--skew-to, 10);
    box-shadow: inset 0 0 0 25px #b6d3ec;
    color: #205998;
    padding-inline: calc(2rem + calc(0.1rem * var(--_skew)));
    margin-inline: calc(-0.1rem * var(--_skew));
    backface-visibility: hidden;
}



.button-skew {
	display: inline-block;
	color: #fff;
	padding: 1rem 2rem;
	text-decoration: none;
	font-weight: bold;
	position: relative;
	isolation: isolate;
}
.button-skew.button--large{
	padding-block: 2rem;
}
.button-skew.button--small{
	padding-block: .25rem;
}
a.button-skew[target="_blank"]::after,
a.button-skew[href$=".pdf"]::after,
a.button-skew[href$=".zip"]::after,
a.button-skew[data-button-type="_blank"]::after,
a.button-skew[data-button-type="pdf"]::after,
a.button-skew[data-button-type="zip"]::after{
    font: var(--fa-font-solid);
    transition: 200ms all;
    font-size: 0;
    line-height: 0;
    font-weight:bold;
    width:0;
}

.button-skew[target="_blank"]:is(:hover,:focus)::after,
.button-skew[href$=".pdf"]:is(:hover,:focus)::after,
.button-skew[href$=".zip"]:is(:hover,:focus)::after,
.button-skew[data-button-type="_blank"]:is(:hover,:focus)::after,
.button-skew[data-button-type="pdf"]:is(:hover,:focus)::after,
.button-skew[data-button-type="zip"]:is(:hover,:focus)::after{
    font-size:100%;
}

.button-skew[target="_blank"]::after,
.button-skew[data-button-type="_blank"]::after,
#block-groupcontentmenu ul.nav li .nav-link[target="_blank"]::after{
    content: " \f35d";
}
 
.button-skew[href$=".pdf"]::after,
.button-skew[data-button-type="pdf"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".pdf"]::after{
    content: " \f1c1";
}
 
.button-skew[href$=".zip"]::after,
.button-skew[data-button-type="zip"]::after,
#block-groupcontentmenu ul.nav li .nav-link[href$=".zip"]::after{
    content: " \f019";
}













.button-skew:visited{
	color:#fff;
}
.button-skew:before {
	content:"";
	display: block;
	position: absolute;
	inset: 0px;
	z-index: -1;
	background: linear-gradient(90deg, #205998 50%, #205998 50%, #5b87b4);
	background-size: 200%;
	background-position-x: 100%;
	transition: background-position-x 300ms 0ms;
}
.button-skew:is(:hover, :focus){
	color:#fff;
	background: none;
}
.button-skew:hover:before {
	animation: button-skew-in 400ms cubic-bezier(0, 0, 0, 1) forwards;
	background-position-x: 0%;
	transition: background-position-x 300ms 200ms;
}
.button-skew--disabled:before{
	background-size: 260%;
	background-image: linear-gradient(90deg, #666666 40%, #205998 60%, #5b87b4);
}
.button-skew--disabled:hover:before {
	animation: button-skew-disabled 1s cubic-bezier(0.43, 0.43, 0, 0.99) forwards;
	background-position-x: 0%;
	transition: background-position-x 700ms 300ms;
}


@keyframes button-skew-in {
	60% {		transform: skew(15deg)	}
	100% {		transform: skew(-25deg)	}
}
@keyframes button-skew-disabled {
	100% {		transform: skew(-25deg)	}
}