/* CSS Document */

html{line-height:1.2;}
body{margin:0px; font-size: 18px; color:#1D4A2F; font-family: 'be_vietnam_proregular', Arial, sans-serif;}
#home-btn {position: absolute; z-index: 999999999; top: 2.5vh; right: 5%; font-size: 0.6rem;}
a {color: #1D4A2F;}
p {margin-top: 0px; margin-bottom: 0px;}
h1{line-height: 110%; margin-bottom: 0.5rem; font-size:1.5rem; display:inline-block;}
h1 a {color: #000000;}
h2{font-size:1rem;}
img {width: 100%;}
#container {background-image:url("../assets/back-er-wecycle.webp"); width: 100%; height: 95vh; background-size: cover; padding-top:5vh;}
#content-container {background-color:#ffffff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); width: 80%; margin-left: 5%; padding-left:5%; padding-right:5%; border-radius: 10px; height:72vh; padding-top:4vh; padding-bottom:4vh; position:relative; overflow-y: auto; overflow-x: hidden; }
.er-btn {font-weight: 400; background-color: #31D731;  border-radius: 30px; border: none; color: #000000; cursor: pointer; display: inline-block; font-size: 18px; line-height: 20px; outline: none; padding: 10px 35px; position: relative; text-decoration: none; transition-delay: .22s; transition: background .44s ease-out,padding .25s linear;}
#escaperoom-error {font-size: 0.9rem; font-style: italic;position:relative; z-index:666; margin-left:4rem; margin-right:2rem;}
#escaperoom-container {}
#escaperoom-intro {width:40%; display: inline-block;margin-right:10%; vertical-align: text-top;}
#escaperoom-image{margin-top: 1rem; aspect-ratio: 1920/600;  max-height: 42vh; margin-left: auto; margin-right: auto;}
#escaperoom-code{position:relative; z-index: 777; left:4rem; margin-bottom:1rem; margin-right:5rem; display:inline-flex;}
.er-code-input {width: 2.2rem; text-align: center; height: 2.2rem; font-size: 1.2rem; padding:0px; text-transform: uppercase; margin-right:0.2rem;}
.laatste-er-code{margin-right:0px;}
#escaperoom-code-text{display:inline-block; width:100%; font-size:0.8rem; position: relative; z-index: 555; margin-left: 4rem; margin-bottom:0.5rem;}
#escaperoom-clock {text-align: left; display: block; position: relative; font-size:0.8rem; margin-bottom:0.5rem; left: 4rem; z-index:888; width:100%; font-weight:bold;}
#escaperoom-titles-container{width: 100%; display: inline-block; text-align: center;}
#escaperoom-btns { margin-bottom: 0rem;}
.col-1024{max-width: 1024px !important;float: none; margin-left: auto;  margin-right: auto;}
.er-intro-page{}
.er-content-intro {}
#media-container {width:45% !important; display:inline-block; vertical-align: text-top;}
div#container-buttons-score {width: 35%; position: absolute; left: 5%; bottom: 1rem; min-width: 440px;}
#feedback-text {width: 35%; position: absolute; left: 5%; bottom: 4rem; min-width: 440px; z-index: 99; text-align: center;}
svg#base_svg, svg#logo_svg {width: 8%; height: auto; position: absolute; bottom: 5vh; right:2.5%; filter: drop-shadow(12px -5px 12px rgb(0 0 0 / 0.4));}
svg#base_svg{display:none;width: 35%; bottom: 0px;left: 5%; min-width: 440px;}

a#logo_svg {background-image: url(../escaperoom/src/logo-wecycle.svg); display: inline-block; background-repeat: no-repeat; width: 8%; position: absolute; top: 2vh; right: 2.5%; aspect-ratio: 338 / 128;}
#escaperoom-btns {margin-bottom: 0rem; position: relative; z-index: 99999; text-align: center; width: 100%; display:inline-block;}
div#escaperoom-intext-btns {display: inline-block; margin-top: 2rem; width:100%;}
.er-btn-left{text-align: left; width:unset; display:inline-block; margin-left:4rem;}
#escaperoom-intro-mobile{display:none;}
.w80{width:80%;}
@media screen and (min-width: 1280px) {}
@media screen and (max-width: 1024px) {
	#escaperoom-clock{margin-bottom:0.2rem;}
	div#container-buttons-score{bottom:0.5rem;}
	#escaperoom-clock{left:3rem; width:calc(100% - 3rem); margin-bottom:0px;}
	#escaperoom-code{left:3rem; width:unset}
	#escaperoom-code-text, #escaperoom-error{margin-left:3rem; width:calc(100% - 3rem);}
}
@media screen and (max-width: 800px) {
	.er-intro-page{margin-left: 0px !important;}
	.er-content-intro {max-width: 100% !important;}  
	.er-btn{padding:10px 12px;}
}

@media screen and (max-width: 640px) {
	#media-container{width:100% !important;}
	#escaperoom-intro{width:100%; margin-bottom:1rem;}
	#content-container{padding-top:2rem; height: calc(80vh - 2rem);}
	body{font-size: 16px;}
	#container{height:calc(100vh - 2rem); padding-top:2rem;}
	h1{margin-top:0px;}
	.end-desktop{display:none !important;}
	#escaperoom-intro-mobile{display:inline-block !important; width:100%;}
	#home-btn{top:0.8rem;}
}

@media screen and (max-width: 540px) {
	#content-container{margin-bottom:1rem; height:auto;}
	div#container-buttons-score{bottom:0px;}
	svg#logo_svg {bottom:unset; top:1rem;}
	svg#base_svg {display:none !important;}
	div#container-buttons-score{position:relative; width: calc(100% - 3rem); padding-left: 3rem; min-width:unset; left:0px; padding-top:1rem; background-color:#ffffff;}
	#escaperoom-code-text, #escaperoom-clock, #escaperoom-code, div#container-buttons-score, #escaperoom-error{left:0px; margin-left:0px;}
	#escaperoom-code{width:calc(100% - 8rem);}
	#escaperoom-btns{margin-bottom:2rem;}
	#escaperoom-error{padding-bottom:1rem;}
	#home-btn{left:5%; right:unset;}
}