/* ----------------------------------
        SHOWCASE STYLES
---------------------------------- */
:root {
    --default-width: calc(100% - 10vw);
}

* {
    margin: 0;
    padding: 0;
}

#main_wrapper {
	width: 100%;
	min-height: 100dvh;
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	overflow-x: hidden;
}

.section {
	width: 100%;
	position: relative;
	flex-grow: 1;
}

.wrapper {
    position: relative;
    margin-inline: auto;
    box-sizing: border-box;
}

.nomargin { margin: 0 !important; }
.notopmargin, .nomargintop {margin-top: 0 !important;}
.nobottommargin, .nomarginbottom {margin-bottom: 0 !important;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.full_img {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
}

/* ----------------------------------
            CUSTOM CODE
---------------------------------- */

h5 {
    --min-font-size: 38;
}

/* MARK: Textbox */
.simple_text_wrapper {
	display: flex;
	align-items: flex-end;
    padding-block: min(150px, 12vw) min(75px, 10vw);
	xoverflow: hidden; /* fixes scrollbar from animation */
}

.simple_text_wrapper .wrapper {
	width: min(780px, var(--default-width));
}

.simple_text_wrapper h1 {
	color: #ff6f46;
}

.simple_text_wrapper h5 {
    color: #000;
}


/* MARK: Video */
.simple_video_wrapper {
	background: url(../images/background_HD.jpg) 50% 50% / cover no-repeat;
	padding-block: min(75px, 12vw);
	perspective: 1000px;
	overflow: hidden; /* fixes scrollbar from animation */
}

.simple_video_wrapper .video_frame {
	background: url(../images/video-frame.png) 50% 50% / 100% 100% no-repeat;
	width: min(1438px,100%);
	padding: min(144px, 10vw) min(131px, 9.1vw);
}

.simple_video_wrapper video {
	width: 100%;
	margin-inline: auto;
	display: block;
}


/* ----------------------------------
            MEDIA QUERIES
---------------------------------- */

/* MARK: TAB 1024 */
@media only screen and (max-width: 1024px) {

}
		
/* MARK: MOB 768 */
@media only screen and (max-width: 768px) {
	.simple_video_wrapper {
		background-image: url(../images/background_MOB.jpg);
	}

}

/* MARK: 600 */
@media only screen and (max-width: 600px) {
	.simple_video_wrapper .video_frame {
		padding: 12.1vw 0;
		background-size: 120vw 100%;
	}
	.simple_video_wrapper video {
		width: 100vw;		
	}
}