*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	background-color: #03224f;
}

.text-box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container.banner-logo {
    margin-top: 30px;
}

.banner-logo .txt-large {
	font-size: 3vw;
	font-weight: 900;
	background-color: #ffffff;
	color: #03224f;
	display: block;
	/* padding: .5em; */
	font-family: "ArmWrestlerBold", sans-serif;
	margin: 0;
}

.banner-logo .txt-large:nth-child(2) {
	position: absolute;
	background-color: #03224f;
	color: #ffffff;
	clip-path: inset(-1% -1% 46% -1%); // Added the negative values to prevent icky "bleed" in Chrome
}

.banner-logo a{
	color: #03224f;
}

.container.banner-logo p {
	font-size: 3vw;
	font-weight: 900;
	margin-top: 1em;
	text-align: center;
	span {
		display: block;
		transform: rotate(90deg);
		margin-top: .25em;
	}
}

// Codepen spesific styling - only to center the elements in the pen preview and viewport
.container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;	
}
// End Codepen spesific styling


@media (max-width: 319px) {

	.container.banner-logo {
    	display: none;
	}
	
}

@media (min-width: 320px) and (max-width: 399px) {

	.container.banner-logo {
		display: none;
	}
	
}

@media (min-width: 400px) and (max-width: 767px) {
	.container.banner-logo {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.container.banner-logo {
		display: none;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 1200px) {

}