@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

@media screen and (min-width: 1001px) and (max-width: 50000px) {
	.wrapper__ue {
		float: right;
		width: 4.2vw;
		position: relative;
		margin: 0px 1.5vw 0px 1.5vw;
		padding: 0px 0px 0px 0px;
		cursor: pointer;
	}
}

@media screen and (min-width: 0px) and (max-width: 1000px) {
	.wrapper__logo {
		width:25vw !important;
	}
	.wrapper__ue {
		float: right;
		width: 10vw;
		position: relative;
		margin: 0px 0px 0px 3vw;
		padding: 0px 0px 0px 0px;
		cursor: pointer;
	}
}

@media screen and (min-width: 0px) and (max-width: 1000px) {
	.wcag { top: 25vw !important; }

	.wcag__icon {
		float: left;
		width: 9.5vw !important;
		height: 9.5vw !important;
		position: absolute;
		top: -1px;
		right: -9.5vw !important;
		border: 1px solid #000;
		background: #fff;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
		align-content:center;
		cursor: pointer;
	}
}

:focus, a:focus img {
	border-bottom:2px solid rgba(240, 52, 52, 0.8);
}


.wcag {
	float: left;
	width: 300px;
	position: fixed;
	top: 8vw;
	left: -300px;
	z-index: 1000;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #000;
    -webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
	.wcag-active {
		left: 0;
	}
	.wcag__icon {
		float: left;
		width: 3.5vw;
		height: 3.5vw;
		position: absolute;
		top: -1px;
		right: -3.5vw;
		border: 1px solid #000;
		background: #fff;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
		align-content:center;
		cursor: pointer;
	}
	.wcag__icon--img {
		float: left;
		width: 30px;
		position: relative;
	}
	.wcag__inside {
		float: left;
		width: 100%;
		position: relative;
		margin: 0px 0px 0px 0px;
		padding: 10px 0px 10px 0px;
		background: #fff;
		box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	}
	.wcag__name {
		float: left;
		width: 100%;
		height: 50px;
		position: relative;
		font-size: 16px;
		line-height: 24px;
		font-weight: 500;
		color: #000;
		text-decoration: none;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-items:center;
		align-content:center;
		cursor: pointer;
	}
			.wcag__name:hover {
				color: #4054b2;
				text-decoration: underline;
			}
		.wcag__name--icon {
			float: left;
			width: 50px;
			height: 50px;
			margin: 0px 10px 0px 0px;
			position: relative;
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			align-content:center;
		}
			.wcag__icon--zoom {
				float: left;
				width: 30px;
				position: relative;
			}
			.wcag__icon--contrast {
				float: left;
				width: 28px;
				position: relative;
			}
			.wcag__icon--link {
				float: left;
				width: 28px;
				position: relative;
			}
			.wcag__icon--file {
				float: left;
				width: 32px;
				position: relative;
			}
			.wcag__icon--reload {
				float: left;
				width: 32px;
				position: relative;
			}

.body__contrast {
	background: #000 !important;
}
.body__contrast--white {
	background: #fff !important;
}
.text__contrast {
	color: yellow !important;
}
.href__contrast {
	color: #00FFFF !important;
}
.img__contrast {
	filter: brightness(100) invert(0) !important;
}
.wcag__icon--img.img__contrast {
	filter: brightness(100) invert(100) !important;
}

.wcag__underline { text-decoration: underline !important; }
.wcag__underline--img { border-bottom: 1px solid #000; }