@charset "UTF-8";
/* CSS Document */

body {
	background-image:url("../images/concrete/concrete_background_xl.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-positon: right bottom;	
}

.under_text {
	position: absolute;
	z-index: 1;
	opacity: 0;
}
.concrete_background {
	position:absolute;
	z-index: 2;
	overflow: hidden;
	margin:auto;
	height:auto;
	max-width: 1600px;
}

.concrete_page {
	position:absolute;
	z-index: 5;
	display: flex;
	flex-direction: column;
	max-width:1400px;
	min-height:100%;
}

.concrete_header {
	position: relative;
	display: flex;
	justify-content: end;
	align-items: flex-end;
	max-height: 15%;
	mix-blend-mode: overlay;
}

.concrete_main_portrait {
	position: relative;
	max-height: 60%;
}
.concrete_main_landscape {
	position: relative;
	max-height: 50%;
}

.concrete_bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap-reverse;
	justify-content: space-between;
}



@media (max-width:575.98px) {
.concrete_background {
	min-width: 414px;
	width: 100%;
	}

.concrete_page {
	min-width: 414px;
	width: 100%;
	max-height: 747px;

	}
.concrete_credits {
		display: flex;
		max-width: 215px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 180px;
		height:auto;
	}
}


	
@media (orientation:portrait) {
	.concrete_main_landscape {
		display: none;
	}
	.concrete_bottom {
		flex-wrap: wrap-reverse;
		align-items: end;
	}
	
		}
	@media (max-width:575.98px) {
	.concrete_background {
		min-width: 414px;
		width: 100%;
		}
	.concrete_background {
		min-width: 414px;
		width: 100%;
		}
	.concrete_credits {
		display: flex;
		max-width:215px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 200px;
		height:auto;
	}

		}
	
	@media (max-width: 767.98px){
	.concrete_credits {
		display: flex;
		max-width: 265px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 265px;
		height:auto;
	}

		}

	@media (max-width: 991.98px){
	.concrete_credits {
		display: flex;
		max-width: 310px;
		height:auto;
		align-self: center;
	}
	.concrete_next {
		display: flex;
		max-width: 335px;
		height:auto;
	}

		}

	@media (max-width: 1199.98px){
	.concrete_credits {
		display: flex;
		max-width: 350px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 325px;
		height:auto;
	}

		}

	@media (min-width: 1200px){
	.concrete_credits {
		display: flex;
		max-width: 390px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 390px;
		height:auto;
	}

		}
		
@media (orientation:landscape) {
	.concrete_main_portrait {
		display: none;
		}
	.concrete_bottom {
		align-items: center;
		justify-content: space-between;
	}
	@media (max-width:575.98px) {
	.concrete_background {
		min-width: 414px;
		width: 100%;
		}
	.concrete_credits {
		display: flex;
		max-width:215px;
		height:auto;
		}
	.concrete_next {
		display: flex;
		max-width: 200px;
		height:auto;
		}
	}
	
	@media (max-width: 767.98px){
	.concrete_credits {
		display: flex;
		max-width: 265px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 265px;
		height:auto;

		}

	@media (max-width: 991.98px){
	.concrete_credits {
		display: flex;
		max-width: 325px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 325px;
		height:auto;
	}

		}

	@media (max-width: 1199.98px){
		.concrete_credits {
		display: flex;
		max-width: 325px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 300px;
		height:auto;
	}

		}

	@media (min-width: 1200px){
		.concrete_page {
			width: 95%;
			margin: auto;
		}
		.concrete_background {
			width:95%;
		}
		.concrete_credits {
		display: flex;
		max-width: 350px;
		height:auto;
	}
	.concrete_next {
		display: flex;
		max-width: 390px;
		height:auto;
	}

	}
}
}