@media screen and (min-width: 600px) {
    body::before{
        content: "";
        width: 30vw;
        height: 100%;
        background-color: #eee;
        position: absolute;
        left: -11vw;
        top: 0;
        z-index: -1;
        transform: skew(-15deg);
    }
    body::after{
        content: "";
        width: 30vw;
        height: 100%;
        background-color: #eee;
        position: absolute;
        left: 85vw;
        top: 0;
        z-index: -1;
        transform: skew(-15deg);
    }
	#error-page{
		width: 100vw;
		height: calc(100vh - 8vw);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	#error-page > h1{
		width: 100vw;
		font-size: 15vw;
		color: #32558e;
		text-align: center;
		margin: 0;
		padding: 0;
		animation: up 1s backwards;
		line-height: 15vw;
		padding: 0 0 3vh 0;
	}
	#error-page > p{
		width: 100vw;
		font-size: 2vw;
		text-align: center;
		font-weight: bold;
		color: #666;
		margin: 0;
		padding: 0;
		animation: up 1s backwards;
		animation-delay: .15s;
	}
	#go-home{
		width: 15vw;
		height: 3.8vw;
		margin: 4vh 1vw;
		border-radius: 3vw;
		font-size: 1.5vw;
		color: #fff;
		font-weight: bold;
		line-height: 3.8vw;
		text-align: center;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		animation: up 1s backwards;
		animation-delay: .3s;
		background: linear-gradient(105deg, #8653ea 0%, #7053ea 20%, #535aea 40%, #5385ea 60%, #4fabde 80%, #50aadc 100%);
	}
	#go-home::before{
		content: "";
		position: absolute;
		left: -3.5vw;
		top: 0;
		width: 2vw;
		height: 3.8vw;
		background-color: #eee;
		opacity: .5;
		transform: translate(0, 0) skew(-15deg);
		transition: transform .5s;
	}
	#go-home::after{
		content: "";
		position: absolute;
		left: -1.2vw;
		top: 0;
		width: 1vw;
		height: 3.8vw;
		background-color: #eee;
		opacity: .5;
		transform: translate(0, 0) skew(-15deg);
		transition: transform .5s;
	}
	#go-home:hover::before, #go-home:hover::after{
		transform: translate(20vw, 0) skew(-15deg); 
	}
	#nickel-alloy-grades{
		width: 16vw;
		height: 3.4vw;
		margin: 4vh 1vw;
		border: solid .2vw #32558e;
		border-radius: 3vw;
		font-size: 1.5vw;
		color: #32558e;
		font-weight: bold;
		line-height: 3.4vw;
		text-align: center;
		cursor: pointer;
		transition: all .3s;
		animation: up 1s backwards;
		animation-delay: .3s;
	}
	#nickel-alloy-grades:hover{
		color: #fff;
		background-color: #32558e;
	}
	#error-prologo{
		display: flex;
		justify-content: center;
		width: 100vw;
		height: 5vw;
		margin-bottom: 3vw;
		animation: up 1s backwards;
		animation-delay: .45s;
	}
	#error-prologo > a{
		width: 3.8vw;
		height: 3.8vw;
		margin: 1vw;
		position: relative;
	}
	.error-prologo{
		width: 3.8vw;
		height: 3.8vw;
	}
	#error-prologo > a:hover::before, #error-prologo > a:hover::after{
		opacity: 1;
	}
	#error-prologo > a::before{
		content: attr(data-name);
		position: absolute;
		text-align: center;
		color: #333;
		font-size: 1.5vw;
		line-height: 2vw;
		font-weight: bold;
		width: 6vw;
		height: 2vw;
		background-color: #eee;
		left: -1.1vw;
		top: 5vw;
		border-radius: .5vw;
		opacity: 0;
		transition: opacity .2s;
	}
	#error-prologo > a::after{
		content: "";
		position: absolute;
		width: 0vw;
		height: 0vw;
		border-bottom: solid 1vw #eee!important;
		border: solid 1vw transparent;
		left: 0.9vw;
		top: 3.5vw;
		opacity: 0;
		transition: opacity .2s;
	}
	@keyframes up{
		0% {opacity: 0; transform: translate(0, 3vw);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
}





















@media screen and (max-width: 600px) {
	body{
		width: 100vw;
		overflow: hidden;
	}
	#error-page{
		width: 100vw;
		overflow: hidden;
		height: 100vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	#error-page > h1{
		width: 100vw;
		font-size: 30vw;
		color: #32558e;
		text-align: center;
		margin: 0;
		padding: 0;
		animation: up 1s backwards;
		line-height: 16vw;
		padding: 3vh 0;
	}
	#error-page > p{
		width: 90vw;
		font-size: 5vw;
		text-align: center;
		font-weight: bold;
		color: #666;
		margin: 0;
		padding: 5vw 0;
		animation: up 1s backwards;
		animation-delay: .15s;
	}
	#go-home{
		width: 49.2vw;
		height: 11.4vw;
		margin: 3vw;
		border-radius: 9vw;
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
		line-height: 11.4vw;
		text-align: center;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		animation: up 1s backwards;
		animation-delay: .3s;
		background: linear-gradient(105deg, #8653ea 0%, #7053ea 20%, #535aea 40%, #5385ea 60%, #4fabde 80%, #50aadc 100%);
	}
	#nickel-alloy-grades{
		width: 48vw;
		height: 10.2vw;
		margin: 0 0 5vw 0;
		border: solid .6vw #32558e;
		border-radius: 9vw;
		font-size: 4.5vw;
		color: #32558e;
		font-weight: bold;
		line-height: 10.2vw;
		text-align: center;
		cursor: pointer;
		transition: all .3s;
		animation: up 1s backwards;
		animation-delay: .3s;
	}
	#error-prologo{
		display: flex;
		justify-content: center;
		width: 100vw;
		height: 15vw;
		margin: 9vw 0;
		animation: up 1s backwards;
		animation-delay: .45s;
	}
	#error-prologo > a{
		width: 11.4vw;
		height: 11.4vw;
		margin: 2vw;
		position: relative;
	}
	.error-prologo{
		width: 11.4vw;
		height: 11.4vw;
	}
	@keyframes up{
		0% {opacity: 0; transform: translate(0, 3vw);}
		100% {opacity: 1; transform: translate(0, 0);}
	}

}