/*
	THE STEEL RIVER
	AR Escape Room Theme
*/

body{color: #fff; font-size: 16px; line-height: 22px; background: #000;}
#steel-river h1{font-family: 'Bebas Neue', cursive; font-size: 35px; line-height: 37px; padding: 0 0 5px 0;}
#steel-river h2{font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: 16px; line-height: 18px; color: #00b7e5; padding: 0 0 15px 0;}
#steel-river h3{font-family: 'Bebas Neue', cursive; font-size: 18px; line-height: 24px; padding: 0 0 5px 0; margin: 0 auto; max-width: 500px; text-transform: uppercase;}
#steel-river a,
	#steel-river a:hover{color: #00b7e5;}
#steel-river p{padding: 0 0 20px 0; margin: 0;}
hr{background: rgba(255,255,255,0.2); margin: 15px auto;}
input, button{ }
::placeholder{color: rgba(255,255,255,0.4); font-weight: 400; font-size: 16px;}
:-ms-input-placeholder{color: rgba(255,255,255,0.4); font-weight: 400; font-size: 16px;}
::-ms-input-placeholder{color: rgba(255,255,255,0.4); font-weight: 400; font-size: 16px;}

#wrapper-artrail #btn-nav .line {background: rgba(255,255,255,0.4);}
.menu #wrapper-artrail #btn-nav .line {background: #031828;}
#timer-main{display: block; border: 2px solid rgba(255,255,255,0.2); opacity: 0;}
#timer-main.active{opacity: 1; transition: all 1s ease-in-out 0.5s;}
#menu{background: #00b7e5;}
#menu a{color: #031828;}
#menu a:hover{color: #fff;}

/* A-FRAME STYLING */
#aframe-modal{background: rgba(0,0,0,0.8);}
.a-modal{}
.a-dialog-allow-button {background-color: #00b7e5;}
.a-dialog-ok-button{background-color: #00b7e5;}

#question-panel-bg{background: #031828; animation: animBgPulse 5s linear 0s infinite; color: #fff; pointer-events: none;}
.question-panel{background: transparent; text-align: center; visibility: visible; pointer-events: none; padding: 0; transition: opacity 1.5s ease-in-out 0s;}
.question-panel p{margin: 0 20px;}
.question-panel.active{display: flex; pointer-events: auto;}
.question-panel.active .st{stroke-dashoffset: 0 !important;}

.btn-armenu-panel{background-color: #031828; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important;}
.btn-armenu-panel::before{background-image: url(images/icon-up-white.svg);}
.armenu-panel-content{background: #031828; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; text-align: center; height: auto}
.armenu-panel .input-answer{border: 1px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0); color: #fff; text-transform: uppercase;}
.armenu-panel .scene-question{display: none;}
.armenu-panel .btn-subquestion{box-sizing: border-box; padding: 20px 10px; border-color: #00b7e5; animation: animBgPulse 5s linear 0s infinite;}
.armenu-panel-autocomplete{display: block; margin: 0 auto; transition: all 1.2s ease-in-out 0s; max-height: 50px; overflow: hidden;}
.armenu-panel[data-subqu1="complete"] .btn-subquestion[data-qunum="01"],
	.armenu-panel[data-subqu2="complete"] .btn-subquestion[data-qunum="02"],
	.armenu-panel[data-subqu3="complete"] .btn-subquestion[data-qunum="03"]{border-color: #8aec54; color: #8aec54 !important; animation: none; background: url(https://www.myhuntee.com/arescaperooms/steel-river/icon-correct.svg) bottom 10px right 10px no-repeat !important;
    background-size: auto 18% !important;}
.armenu-panel[data-subqu1="complete"][data-subqu2="complete"][data-subqu3="complete"] .col-questions{display: none;}
.armenu-panel[data-subqu1="complete"][data-subqu2="complete"][data-subqu3="complete"] .scene-question{display: block;}
.armenu-panel .correct .armenu-panel-autocomplete{max-height: 0px; pointer-events: none;}
.qu-text{border: 1px solid #00b7e5; background: rgba(0,0,0,0); color: #00b7e5; text-transform: uppercase;}
.armenu-submenu{background: #000;}
.submenu-autocomplete{display: block; margin: 0 auto; transition: all 1.2s ease-in-out 0s; max-height: 50px; overflow: hidden;}
.btn-box-ar{border: 2px solid #fff; color: #fff; background: rgba(0,0,0,0.5);}
.correct .input-answer,
	.correct .input-answersub{color: #8aec54 !important; border-color: #8aec54 !important; background: url(https://www.myhuntee.com/arescaperooms/steel-river/icon-correct.svg) center right 8px no-repeat !important; background-size: auto 65% !important;}
.correct .input-answer,
	.correct .input-answersub{width: 100%;}
.correct .btn-question,
	.correct .btn-questionsub{display: none;}
	.correct .btn-escroom-autocomplete-inner{pointer-events: none;}
	.correct .submenu-autocomplete{max-height: 0px;}
.incorrect .input-answer,
	.incorrect .input-answersub{color: #ff5d5d; border-color: #ff5d5d; background: url(https://www.myhuntee.com/arescaperooms/steel-river/icon-incorrect.svg) center right 8px no-repeat; background-size: auto 65%;}
.correct .correct-content{display: block;}

#question-panel-final{padding: 0;}
#question-panel-final.active #congratulations-ar-textglow{opacity: 1; animation: animCongratulationsPulse 4s linear 2.5s infinite;}
#question-panel-final.active .st {animation: animCongratulationsStroke 4s linear 2.5s infinite;}
#question-panel-final input[type="submit"]{margin: 60px auto 20px auto;}
#question-panel-final.active .st{animation: none;}

.btn-arcontinue{margin-top: 15px;}
.btn-box{background: none; color: #00b7e5; padding: 0; position: relative; font-size: inherit;}
.btn-box:hover{background: none; color: #fff; }
.btn-box::before{content: " "; display: block; width: 0; height: 1px; background: #00b7e5; position: absolute; bottom: -5px; left: 50%; transition: all 3.5s ease-in-out 0.5s;}
.active .btn-box::before{width: 100%; left: 0;}
.btn-question{display: block; float: right; border-radius: 0; -webkit-appearance: none; border: 1px solid #00b7e5; width: 28%; height: 42px; line-height: 40px; background: rgba(0,0,0,0); font-size: 16px; text-align: center; color: #00b7e5; text-transform: uppercase;}
.btn-sub{color: #00b7e5; width: auto; margin: 15px 0 0 0;}
.btn-sub-closeicon{background: url(https://www.peterhintondesign.co.uk/ar/images/icon-close.svg) center no-repeat;}
.character-icon{border: 2px solid #f2c34f; box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.2);}
.icon{width: 150px; padding: 20px; margin: 0 auto; background: none; position: relative;}
.icon::before{content: " "; width: 170px; height: 170px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(0,183,229,0.4) 0%, rgba(0,183,229,0) 70%); animation: animIconPulse 3s linear 0s infinite; opacity: 0.15;}
.icon-transporter-gondola{animation: animIconGondola 15s ease-in-out 0s infinite;}
.icon-congratulations{width: 250px; margin: 0 auto;}
.input-mono-container{background: url(/arescaperooms/steel-river/ar-inputmono-bg.png) top left repeat-x; border-top: 1px solid #00b7e5; border-left: 1px solid #00b7e5; border-bottom: 1px solid #00b7e5;}
.input-mono-boxhighlight{background: #00b7e5; opacity: 0.5;}
.input-mono-char{color: #fff;}
.input-answer,
	.input-answersub{display: block; float: left; -webkit-appearance: none; border-radius: 0; border: 1px solid rgba(255,255,255,0.5); transition: all 0.4s ease-in-out 0s; width: 70%; height: 42px; line-height: 40px; background: rgba(0,0,0,0); font-size: 18px; text-align: left; box-sizing: border-box; padding: 0 12px; color: #fff; text-transform: uppercase;}
.panel{display: block; background: #031828; animation: animBgPulse 5s linear 0s infinite; color: #fff;}
.popup{background: #fff;}
.popup-story{background: rgba(0,0,0,0.4); border-radius: 0; transform: translate(0); top: 0; right: 0; bottom: 0; left: 0; text-align: center; width: 100%;}
.slider-popup{background: #fff;}
.st{transition: all 0s ease-in-out 0s !important;}
.active .st{transition: all 4.5s ease-in-out 0.25s !important;}
.st0{stroke: #00b7e5 !important;}
.st1{stroke: #fff !important;}
.st2{stroke: #fff !important;}

@-webkit-keyframes animBtnARPulse{
	 0% {background: #000;}
	 50% {background: #00b7e5;}
	 100% {background: #000;}
}

@-webkit-keyframes animBgPulse{
	0% {background: #031828;}
	50% {background: #02334c;}
	100% {background: #031828;}
}

@-webkit-keyframes animIconPulse{
		0% {opacity: 0.15;}
		50% {opacity: 1;}
		100% {opacity: 0.15;}
 }

 @-webkit-keyframes animIconGondola{
 	0% {transform: translateX(0);}
 	50% {transform: translateX(40%);}
 	100% {transform: translateX(0);}
 }

@-webkit-keyframes animCongratulationsPulse{
	 0% {opacity: 1;}
	 50% {opacity: 0.5;}
	 100% {opacity: 1;}
}

@-webkit-keyframes animCongratulationsTextLeft{
	 0% {transform: translateX(0);}
	 50% {transform: translateX(calc(-100% + 100vw))}
	 100% {transform: translateX(0);}
}
@-webkit-keyframes animCongratulationsTextRight{
	 0% {transform: translateX(calc(-100% + 100vw))}
	 50% {transform: translateX(0);}
	 100% {transform: translateX(calc(-100% + 100vw))}
}

@-webkit-keyframes animCongratulationsStroke{
	 0% {opacity: 1;}
	 20% {opacity: 1;}
	 20.1% {opacity: 0;}
	 22% {opacity: 0;}
	 22.1% {opacity: 1;}
	 0% {opacity: 1;}
	 70% {opacity: 1;}
	 70.1% {opacity: 0;}
	 72% {opacity: 0;}
	 72.1% {opacity: 1;}
	 0% {opacity: 1;}
	 80% {opacity: 1;}
	 80.1% {opacity: 0;}
	 82% {opacity: 0;}
	 82.1% {opacity: 1;}
	 100% {opacity: 1;}
}