/* latin */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,800&display=swap');

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100%;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html>body {
	height: auto;
}

body {
	/* background: linear-gradient(145deg, #FAAF40 0% 33.33%, #E05A2B 33% 66.66%, #7B0000 66% 100%); */
	background: #FAAF40;
	font: 400 12px 'Montserrat', sans-serif;
	color: rgba(224, 90, 43, 1);
	text-align: center;
	margin: 0;
	padding: 0;
}

.container {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	padding: 0 10px;

	/* iOS 11 */
	padding-left: constant(safe-area-inset-left);
	padding-right: constant(safe-area-inset-right);

	/* iOS 11.2+ */
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

.container h1 {
	display: none;
}

.container .logo {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
}

.filterwrapper {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
}

.glitch-filter-example__filtered-text {
  filter: url(#filter) drop-shadow(8px 8px 0px rgba(26, 26, 26, 0.2)) opacity(100%);
  margin: 0;
  padding: 0;
  display: block;
}

.top-r,
.bot-r,
.top-g,
.bot-g {
  stroke: #ffffff;
}

.top-r {
  stroke-width: 80px;
  -webkit-animation: topani 4.5s steps(8, jump-both) infinite;
		  animation: topani 4.5s steps(8, jump-both) infinite;
}

.bot-r {
  stroke-width: 100px;
  -webkit-animation: botani 5s steps(3, jump-both) infinite;
		  animation: botani 5s steps(3, jump-both) infinite;
}

.top-g {
  stroke-width: 50px;
  animation: topani 5s steps(8, jump-both) reverse infinite;
}

.bot-g {
  stroke-width: 150%;
  animation: botani 4.5s steps(3, jump-both) reverse infinite;
}

@-webkit-keyframes topani {
  5% {
	stroke-width: 43px;
  }
  10% {
	stroke-width: 32px;
  }
  16% {
	stroke-width: 92px;
  }
  23% {
	stroke-width: 164px;
  }
  29% {
	stroke-width: 158px;
  }
  32% {
	stroke-width: 160px;
  }
  39% {
	stroke-width: 50px;
  }
  43% {
	stroke-width: 130px;
  }
  51% {
	stroke-width: 84px;
  }
  54% {
	stroke-width: 168px;
  }
  65% {
	stroke-width: 193px;
  }
  70% {
	stroke-width: 42px;
  }
  73% {
	stroke-width: 140px;
  }
  78% {
	stroke-width: 169px;
  }
  86% {
	stroke-width: 32px;
  }
  92% {
	stroke-width: 191px;
  }
}

@keyframes topani {
  5% {
	stroke-width: 43px;
  }
  10% {
	stroke-width: 32px;
  }
  16% {
	stroke-width: 92px;
  }
  23% {
	stroke-width: 164px;
  }
  29% {
	stroke-width: 158px;
  }
  32% {
	stroke-width: 160px;
  }
  39% {
	stroke-width: 50px;
  }
  43% {
	stroke-width: 130px;
  }
  51% {
	stroke-width: 84px;
  }
  54% {
	stroke-width: 168px;
  }
  65% {
	stroke-width: 193px;
  }
  70% {
	stroke-width: 42px;
  }
  73% {
	stroke-width: 140px;
  }
  78% {
	stroke-width: 169px;
  }
  86% {
	stroke-width: 32px;
  }
  92% {
	stroke-width: 191px;
  }
}

@-webkit-keyframes botani {
  5% {
	stroke-width: 179px;
  }
  6% {
	stroke-width: 40px;
  }
  14% {
	stroke-width: 97px;
  }
  18% {
	stroke-width: 21px;
  }
  28% {
	stroke-width: 165px;
  }
  33% {
	stroke-width: 19px;
  }
  38% {
	stroke-width: 117px;
  }
  46% {
	stroke-width: 46px;
  }
  50% {
	stroke-width: 189px;
  }
  54% {
	stroke-width: 126px;
  }
  64% {
	stroke-width: 181px;
  }
  66% {
	stroke-width: 178px;
  }
  75% {
	stroke-width: 25px;
  }
  79% {
	stroke-width: 11px;
  }
  87% {
	stroke-width: 163px;
  }
  91% {
	stroke-width: 162px;
  }
  99% {
	stroke-width: 116px;
  }
  102% {
	stroke-width: 74px;
  }
}

@keyframes botani {
  5% {
	stroke-width: 179px;
  }
  6% {
	stroke-width: 40px;
  }
  14% {
	stroke-width: 97px;
  }
  18% {
	stroke-width: 21px;
  }
  28% {
	stroke-width: 165px;
  }
  33% {
	stroke-width: 19px;
  }
  38% {
	stroke-width: 117px;
  }
  46% {
	stroke-width: 46px;
  }
  50% {
	stroke-width: 189px;
  }
  54% {
	stroke-width: 126px;
  }
  64% {
	stroke-width: 181px;
  }
  66% {
	stroke-width: 178px;
  }
  75% {
	stroke-width: 25px;
  }
  79% {
	stroke-width: 11px;
  }
  87% {
	stroke-width: 163px;
  }
  91% {
	stroke-width: 162px;
  }
  99% {
	stroke-width: 116px;
  }
  102% {
	stroke-width: 74px;
  }
}


.error {
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	z-index: 2;
	padding: 0 10px;
	color: rgba(234, 235, 236, 1);

	/* iOS 11 */
	padding-left: constant(safe-area-inset-left);
	padding-right: constant(safe-area-inset-right);

	/* iOS 11.2+ */
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

.error .content {
	display: block;
	text-align: center;
}

.error h1 {
	display: none;
}

.error h2 {
	font-size: 15em;
	font-weight: 800;
	letter-spacing: -0.13em;
	margin-left: -0.1em;
	-webkit-filter: drop-shadow(8px 8px 0px rgba(10%, 10%, 10%, 0.2)) opacity(100%);
	filter: drop-shadow(8px 8px 0px rgba(10%, 10%, 10%, 0.2)) opacity(100%);
}

.error h3 {
	font-size: 2em;
	font-weight: 300;
	margin-top: -1em;
	-webkit-filter: drop-shadow(2px 2px 0px rgba(10%, 10%, 10%, 0.2)) opacity(100%);
	filter: drop-shadow(2px 2px 0px rgba(10%, 10%, 10%, 0.2)) opacity(100%);
}

.error .logo {
	opacity: 1.0;
	transition: 0.3s;
}

.error .logo:hover {
	opacity: 0.6;
}

.error .filled {
	fill: #E05A2B;
}

.down {
	align-self: flex-start;
}

#nflogo {
	-o-transition: height .3s;
	-ms-transition: height .3s;
	-moz-transition: height .3s;
	-webkit-transition: height .3s;
	transition: height .3s;
}

@media only screen and (min-width: 1200px) and (min-height: 900px) {
	#nflogo {
		height: 120px!important;
	}
}

@media only screen and (max-width: 992px) {
	#nflogo {
		height: 90px!important;
	}
}

@media only screen and (max-width: 768px) {
	#nflogo {
		height: 50px!important;
		filter: url(#filter) drop-shadow(4px 4px 0px rgba(26, 26, 26, 0.2)) opacity(100%);
	}
}

@media only screen and (min-width: 768px) and (max-height: 768px) {
	#nflogo {
		height: 80px!important;
	}
}

@media only screen and (max-height: 500px) {
	#nflogo {
		height: 40px!important;
		filter: url(#filter) drop-shadow(4px 4px 0px rgba(26, 26, 26, 0.2)) opacity(100%);
	}
}