@font-face {
    font-family: 'Manus';
    font-style: normal;
    font-weight: 400;
    src: url('37CB26.woff2') format('woff2');
}

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

#simulator-v2{
	.videoWrap{
		background-color: #000;
		.control-container{
			@media(max-width: 1024px){
				margin-bottom: 0;
			}
		}
	}
	.videoWrap .control-container .rba-button{
		color: #fff;
	}
	video{
		object-fit: contain;
	}
}

.videoWrap {
    width: 100%;
    .video-container {
		background: #000;
        video {
            width: 100%;
			@media(min-width: 1200px){
				object-fit: cover;
				margin: auto;
			}
        }
        @media(min-width: 1024px){
			&::after {
				content: ' Color scale button for demonstration purposes only.\A All fireplace functions and color scale included in the Fire Connects App.';
				position: absolute;
				right: 2%;
				margin-top: -50px;
				text-align: right;
				font-size: 14px;
				line-height: 14px;
				font-family: $primary-font;
				font-size: 14px;
				color: #fff;
				opacity: 0.7;
				white-space: pre;
			}
			&.noaddon::after{
				content: '';
			}
		}
    }
    .control-container {
        width: 100%;
        display: grid;
		position: relative;
        grid-template-columns: 100%;
        color: #fff;
        margin: -30px auto;
        .controller {
            text-align: center;
			margin: auto;
            .headline-info {
                font-family: 'Manus', Arial, Helvetica, sans-serif;
                display: none;
                opacity: 1;
                transition: opacity 1s;
                span {
                    transform: translate(-20px, -40%);
                }
            }
            img {
                width: 170px;
				float: left;
            }
            span {
                display: block;
            }
            button {
                position: absolute;
                font-size: 0px;
                border-radius: 100%;
                width: 24px;
                height: 27px;
                border: none;
                cursor: pointer;
                background: rgba(177,24,30,0.6);
                animation: shadow-pulse 2s infinite;
            }
            button[name="stepup"] {
                margin-top: 120px;
                margin-left: -52px;
            }
            button[name="stepdown"] {
                margin-top: 152px;
                margin-left: -52px;
            }
            button[name="burner"] {
                margin-top: 152px;
                margin-left: -112px;
            }
            button[name="glutbett"] {
                margin-top: 184px;
                margin-left: -82px;
            }
            @-webkit-keyframes shadow-pulse {
                0% {
                    -webkit-box-shadow: 0 0 0 0 rgba(177,24,30,0.6);
                }
                75% {
                    -webkit-box-shadow: 0 0 0 20px rgba(177,24,30,0);
                }
                100% {
                    -webkit-box-shadow: 0 0 0 0 rgba(177,24,30,0);
                }
            }
        }
        .rba-button {
            margin: auto;
            text-align: center;
            color: #000;
            #headline-step {
                font-size: 18px;
                padding: 20px;
                font-family: $primary-font;
				line-height: 1.4;
				margin-bottom: 5px;
				span {
					font-weight: bold;
				}
            }
            button {
                width: 115px;
                background: transparent;
                border: none;
                cursor: pointer;
            }
            img {
				max-width: 100px;
				margin: auto;
            }
        }
        .note {
            font-family: $primary-font;
            text-align: center;
            font-size: 14px;
            color: #000;
            opacity: 0.7;
            margin: auto 0px 50px 0px;
            display: inline-grid;
            padding: 20px;
        }

        @media(min-width: 1024px){
            grid-template-columns: 1fr 1fr 1fr;
			width: 90%;
			max-width: 1200px;
			margin: -300px auto 0px auto;
            .controller {
				margin: unset;
                img {
                    width: 220px;
					transform: translate(0%, 7%);
                }
                button {
                    width: 32px;
                    height: 35px;
                }
                button[name="stepup"] {
					margin-top: 184px;
					left: 204px;
                }
                button[name="stepdown"] {
                    margin-top: 225px;
                    left: 204px;
                }
                button[name="burner"] {
                    margin-top: 226px;
                    left: 187px;
                }
                button[name="glutbett"] {
                    margin-top: 267px;
                    left: 196px;
                }
            }
            .rba-button {
                margin: auto 0px 35px 0px;
                text-align: left;
                color: #fff;
                transform: translate(-19%);
                #headline-step {
                    padding: 0px;
                    font-size: 19px;
                }
                button {
                    margin-top: 10px;
                    width: unset;
                }
            }
			.note {
				display: none;
			}
        }

        @media(min-width: 1200px){
			#headline-info {
				font-size: 50px;
				display: block;
				font-family: $second-font;
				line-height: 0.9;
				position: absolute;
				width: 25%;
				transform: translate(-7%, -100%);
				padding-bottom: 4%;
				span {
					transform: translate(-20px, -40%);
				}
			}
            .rba-button {
                transform: translate(-33%);
            }
        }
        @media(min-width: 1500px){
            .controller {
                #headline-info {
                    font-size: 85px;
					width: 50%;
					transform: translate(-30%, -90%);
                    span {
                        transform: translate(-35px, -50%);
                    }
                }
            }
        }
    }
}