/**
 * Gel 2021.2
 * Visit Bartlesville Custom 404 Styles
 * @version 2021.2.5
 * @created 2021-06-15 by Fritz Green
 * @modified 2021-11-10 by Fritz Green
 */

/*
font-family: Montserrat, Verdana, sans-serif;
font-family: Georgia, Times New Roman, Times, serif;
Brick: #6e2405;
Light Brick: #83270e;
Olive: #737144;
Light Olive: #84824f;
Brown: #855914;
Light Brown: #966a25;
Gold: #c78500;
Medium Gold: #eda81c;
Light Gold: #ffd681;
Lighter Gold: #ffe4ac;
Off Black: #231f20;
Charcoal: #6a6969;
Light Grey: #e0e0e0;
*/

.vb-404-page .content-i {
	width: 100%;
}
.vb-404-page h1 {
	margin: 50px 10% 0;
}

.buffalo-404 {
	display: flex;
	position: relative;
	width: 100%;
	justify-content: space-around;
}
.buffalo-404:before {
	content: "";
	position: absolute;
	bottom: -12%;
	width: 100%;
	height: 90%;
	background: url(/images/wave-bkgd.svg) top center;
	background-repeat: no-repeat;
	background-size: 160%;
	transform: scaleX(-1);
}

.lost-buffalo-404, .herd-404 {
	flex: 0 0 50%;
	position: relative;
}
.lost-buffalo-404 {
	flex: 0 1 40%;
}

.lost-buffalo {
	fill: #6e2405;
	min-width: 30vw;
	min-height: 21vw;
	transform: rotate(
			-5deg ) skew(
			-7deg ,
			-3deg );
	margin: 20% 10% 0 10%;
}

.herd-404 p {
	position: absolute;
	top: 32%;
	padding-right: 8%;
	font-size: 1.5em;
}

.herd-404 svg {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 10vw;
	min-height: 8vw;
	max-width: 12vw;
	max-height: 9vw;
	margin: 0;
}
.herd-404 svg:nth-of-type(1) {
	fill: #c78500;
	top: -3.2vw;
	right: 6%;
	transform: rotateY(
			-10deg ) skewY(
			5deg ) scale(.15, .15);
}
.herd-404 svg:nth-of-type(2) {
	fill: #231f20;
	top: -3.2vw;
	right: 30.5%;
	transform: rotateY(
			36deg ) skewY(
			5deg ) scale(.2, .2);
}
.herd-404 svg:nth-of-type(3) {
	fill: #966a25;
	top: -3.6vw;
	right: 12%;
	transform: rotateY(
			10deg ) skewY(
			-10deg ) scale(.3, .3);
}
.herd-404 svg:nth-of-type(4) {
	fill: #6a6969;
	top: -3vw;
	right: 22%;
	transform: rotateY(
			170deg ) rotate(
			-5deg ) scale(.4, .4);
}
.herd-404 svg:nth-of-type(5) {
	fill: #966a25;
	top: -1.2vw;
	right: 0;
	transform: rotateY(
			180deg ) skewY(
			1deg ) scale(.48, .5);
}
.herd-404 svg:nth-of-type(6) {
	fill: #6a6969;
	top: 0;
	right: 35%;
	transform: rotateY(
			40deg ) skewY(
			-5deg ) scale(.8, .55);
}
.herd-404 svg:nth-of-type(7) {
	fill: #c78500;
	top: 1vw;
	right: 14%;
	transform: rotateY(
			160deg ) skewY(
			-10deg ) scale(.7);
}


.vb-404-page h3 {
	text-align: center;
	margin: 2em .3em .25em;
}

@media screen and (max-width: 1075px) {
	.herd-404 p {
		bottom: 10%;
	}
	.buffalo-404:before {
		bottom: -8%;
	}
}
@media screen and (max-width: 1024px) {
	.vb-404-page h1 {
		margin: 30px 10% .7em;
	}
	.buffalo-404:before {
		bottom: -18%;
		height: 100%;
	}
	.herd-404 p {
		bottom: 0;
	}
}
@media screen and (max-width: 768px) {
	.vb-404-page h1 {
		margin: 30px 10% .2em;
	}
	.lost-buffalo-404 {
		flex: 0 1 40%;
	}
	.lost-buffalo {
		width: 95%;
		margin: 30% 10% 0 5%;
		transform: rotate(
				-5deg ) skew(
				-7deg ,
				-3deg );
	}
	.herd-404 p {
		font-size: 1.2em;
	}
}
@media screen and (max-width: 360px) {
	.vb-404-page h1 {
		margin-top: 10px;
	}
	.buffalo-404:before {
		bottom: 0;
		height: 85%;
	}
	.herd-404 p {
		font-size: 1em;
		line-height: 1.5em;
		bottom: 10%;
	}
	.vb-404-page h3 {
		margin-top: .25em;
	}
}