/*
Theme Name: OmegaX
Theme URI: https://www.omegaxinc.com
Description: Official Theme of OmegaX
Version: 1.002
Author: Mindfaucet
Author URI: https://www.mindfaucet.com
*/

html {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    min-width: 320px;
}

body {
    margin: 0;
    padding: 0;
	color: #222;
    background: #fff;
    min-width: 320px;
    font-family: "Red Hat Display", sans-serif;
    font-size: 22px;
    font-weight: 300;
    font-optical-sizing: auto;
}

a {
    color: #bc3313;
	text-decoration: none;
}

	a:hover {
		color: #d89830;
	}

	a:focus {
		outline: none;
	}
	
button::-moz-focus-inner {
	border: 0; 
}

input:focus {
	outline: none;
}

input::-moz-focus-inner {
	border: 0; 
}

hr {
	height: 4px;
	color: #e0e0e0;
	background-color: #e0e0e0;
	border: 0px;
}

img {
	border: none;
}

.clear {
	clear: both;
}

.clear-left {
	clear: left;
}

table {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

tr, td {
	padding: 0;
	margin: 0;
}

h2 {
    margin-block-start: 40px;
}


/* Header */

#header {
    height: 80px;
    padding: 10px 0 10px 10px;
    background-color: #17242D;
}

#header #header-menu {
    line-height: 100px;
    padding: 0 20px 0 0;
}

#header-logo {
    height: 80px;
    width: 263px;
    display: block;
    background-image: url('style/omegax-logo.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-indent: -9999px;
    overflow: hidden;   
}

#header-menu {
    text-align: right;
    position: absolute;
    z-index: 10000;
    top: 0;
    right: 0;
    color: #fff;
    padding: 10px;
    font-size: 24px;
    text-transform: uppercase;
}

    #header-menu a {
        font-weight: 600;
        color: #fff;
    }

    #header-menu a:hover {
        color: #bc3313;
    }

@media (min-width: 0px) and (max-width: 700px) {

    #header {
        display: none;
    }

}


/* MENU */

#menu-wrap {
    position: fixed;
    height: 70px;
    width: 100%;
    background-color: #16242D;
    top: 0;
    left: 0;
    display: none;
    background-image: url(style/omegax-logo.png);
    background-size: 164px 50px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    z-index: 10001;
}

#menu-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-image: url('style/menu.png');
    background-size: 50px 100px;
    background-position: 0px 0px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1001;
    display: none;
}
#dropdown-menu {
    position: fixed;
    top: 70px; /* Positioned below the toggle button */
    left: 0;
    right: 0;
    background-color: #1f2e38;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    display: none;
}
#dropdown-menu.active {
    max-height: 300px; /* Adjust this value based on your menu's height */
}
#dropdown-menu .menu-container {
    max-width: 1200px; /* Adjust this value to your preferred max-width */
    margin: 0 auto;
    padding: 10px;
    text-align: right;
}
#dropdown-menu a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block; /* Changed to block for vertical stacking */
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#dropdown-menu.active a {
    opacity: 1;
    transform: translateY(0);
}
#dropdown-menu a:hover {
    background-color: #bc3313;
}

@media (min-width: 0px) and (max-width: 700px) {

    #menu-toggle {
        display: block;
    }

    #dropdown-menu {
        display: block;
    }

    #menu-wrap {
        display: block;
    }

    body {
        padding-top: 70px;
    }

}


/* CONTENT */

#text-type-subhead-wrap {
    background-color: #1A896E;
    overflow: hidden;
    align-items: center;
    width: 100%;
    padding: 100px 0;
}

#text-type-subhead {
    margin: 0 auto;
    align-items: center;
    line-height: 50px;
    max-width: 1200px;
    padding: 0 40px;
    background-color: #ff0;
}

#text-type-subhead-cursor {
    width: 10px;
    height: 100px;  
    margin-right: 10px; 
    background: #D58362;
    float: left;
    animation: blink 1.5s infinite;
}

    @keyframes blink {
        50% {
            opacity: 0;
        }
    }

#text-type-subhead-content {
    float: left;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-weight: normal;
    font-size: 50px;
    line-height: 100px;
}

#content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 30px;
}

.video-container {
    width: 100vw;
    height: 50vh;
    overflow: hidden;
    position: relative;
}
video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

video.focus-low {
    object-position: center 75%;
}

.blue-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(22, 36, 45, 0.5); /* Blue with 50% opacity */
    z-index: 1; /* Ensures the overlay is above the video */
}

@media (min-width: 0px) and (max-width: 750px) {


    #text-type-subhead-cursor {
        height: 110px;
    }

    #text-type-subhead-content {
        width: 330px;
        line-height: 50px;
    }
}

@media (min-width: 0px) and (max-width: 450px) {

    #text-type-subhead-cursor {
        height: 210px;
    }

    #text-type-subhead-content {
        width: 220px;
        line-height: 50px;
    }

}

/* About Us */

#about-us {
    background: #d7b761;
}

#about-us-title {
    width: 28%;
    float: left;
}

    #about-us-title-head {
        transform: translateX(-20vw);
        transition: opacity 2s ease-out, transform 1s ease-out;
        opacity: 0;
    }

    #about-us-title-head h1 {
        text-align: right;
        color: #fff;
        font-weight: 700;
        font-size: 50px;
        padding: 110px 40px 0 0;
        margin: 0;
        line-height: 50px;
        color: #e8dba6;
    }

    #about-us-title-head h1 span {
        display: block;
    }

#about-us-content-wrap {
    width: 72%;
    float: left;
    background: #e8dba6;
}

#about-us-content {
    padding: 100px;
    font-size: 22px;
    transform: translateY(20vh);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

#vision-wrap {
    background: #16242D;
    padding: 100px 0;
}

#vision {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 40px 0 40px;
}

#vision-head-cursor {
    width: 10px;
    height: 100px;
    margin-right: 10px;   
    background: #d2639e;
    float: left;
    animation: blink 1.5s infinite;
}

#vision-head-title {
    float: left;
    font-size: 50px;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-weight: normal;
    line-height: 100px;
    color: #e8dba6;
}

#vision-content {
    color: #fff;
    font-size: 22px;
    padding: 20px 0 0 0;
    transform: translateY(20vh);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

#criteria {
    margin: 0 auto;
    max-width: 1200px;
    padding: 80px 40px;
    font-size: 22px;
}

#criteria-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 40px;
}

#criteria-head {
    background-color: #D7B760;
    color: #fff;
    font-weight: 600;
    font-size: 24px;
    padding: 10px;
    margin: 20px 0 0 0;
}

.criteria-list {
    background-color: #E8DBA6;
    border-left: 10px solid #D7B760;
    padding: 10px;
    margin: 10px 0 0 0;
    font-weight: 500;
}

#criteria-head, .criteria-list {
    transform: translateX(50vw);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

@media (min-width: 0px) and (max-width: 800px) {

    #vision-head-cursor {
        height: 110px;
    }

    #vision-head-title {
        width: 380px;
        line-height: 50px;
    }

    
    #about-us-title {
        padding: 0 0 20px 40px;
    }

    #about-us-title-head h1 {
        padding-top: 60px;
    }

    #about-us-title-head h1 span {
        display: inline;
    }

    #about-us-title {
        float: none;
    }

    #about-us-content-wrap {
        float: none;
        width: 100%;
    }

    #about-us-content {
        padding: 40px;
    }

}

@media (min-width: 0px) and (max-width: 500px) {

    #vision-head-cursor {
        height: 160px;
    }

    #vision-head-title {
        width: 260px;
    }

}



/* CONTACT */

#waitlist-head-wrap {
    background: #16242D;
    padding: 40px 0 20px 0;
}

#waitlist-head {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 40px 0 40px;
}

#waitlist-head-cursor {
    width: 10px;
    height: 100px;
    margin-right: 10px;   
    background: #d2639e;
    float: left;
    animation: blink 1.5s infinite;
}

#waitlist-head-title {
    float: left;
    font-size: 50px;
    font-family: "Playfair Display", serif;
    font-weight: normal;
    line-height: 100px;
    color: #E8DBA6;
}

#waitlist-head-content {
    color: #fff;
    font-size: 22px;
    padding: 20px 0 0 0;
    transform: translateY(25vw);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

#waitlist-form-wrap {
    background-color: #D7B760;
    padding: 20px 40px 60px 40px;
}

#waitlist-form {
    max-width: 1000px;
    margin: 0 auto;
}


#contact-us-wrap {
    padding: 100px 40px;
    font-size: 22px;
}

#contact-us {
    max-width: 1000px;
    margin: 0 auto;
}

#contact-us-detail {
    background-image: url('style/omegax-logo.jpg');
    background-size: 200px auto;
    background-repeat: no-repeat;
    background-position: top right;
}

#contact-us-email {
    font-size: 30px;
    margin: 0 0 20px 0;
    display: block;
}

@media (min-width: 0px) and (max-width: 700px) {

    #contact-us-detail {
        background-image: none;
    }

}

@media (min-width: 0px) and (max-width: 500px) {

    #waitlist-head-title {
        line-height: 50px;
        width: 200px;
    }

}


/* FRONTPAGE FEATURE */

#frontpage-feature {
    position: absolute;
    top: 0;
    left: 0;
    height: 90vh;
    width: 100vw;
    background: #16242D;
    overflow: hidden;
}

#frontpage-feature-wrap {
    position: relative;
    height: 90vh;
}

#frontpage-feature-spacer {
    height: 90vh;
}

#graph-green {
    position: absolute;
    top: 0;
    left: 0;
    height: 90vh;
    width: 0;
    overflow: hidden;
}

#graph-green-line {
    background-image: url('style/graph-green.png');
    background-size: 100% 100%;
    width: 100vw;
    height: 90vh;
}

#graph-blue {
    position: absolute;
    top: 0;
    left: 0;
    height: 90vh;
    width: 0;
    overflow: hidden;
}

#graph-blue-line {
    background-image: url('style/graph-blue.png');
    background-size: 100% 100%;
    width: 100vw;
    height: 90vh;
}

#graph-pink {
    position: absolute;
    top: 0;
    left: 0;
    height: 90vh;
    width: 0;
    overflow: hidden;
}

#graph-pink-line {
    background-image: url('style/graph-pink.png');
    background-size: 100% 100%;
    width: 100vw;
    height: 90vh;
}

#graph-yellow {
    position: absolute;
    top: 0;
    left: 0;
    height: 90vh;
    width: 0;
    overflow: hidden;
}

#graph-yellow-line {
    background-image: url('style/graph-yellow.png');
    background-size: 100% 100%;
    width: 100vw;
    height: 90vh;
}

#logo {
    height: 10vh;
    width: 100vw;
    top: 0;
    left: 0;
    position: absolute;
    margin: 20vh 0 0 5vw;
    background-image: url('style/omegax-logo.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    display: none;
}

#tagline-wrap {
    height: 20vh;
    width: 95vw;
    top: 15vh;
    left: 0;
    position: absolute;
    margin: 20vh 0 0 5vw;
}

#tagline-cursor {
    width: 1.5vh;
    height: 22vh;   
    background: #d2639e;
    float: left;
    animation: blink 1.5s infinite;
}

    @keyframes blink {
        50% {
            opacity: 0;
        }
    }

#tagline {
    width: 60vh;
    height: 15vh;
    margin: 1vh 0 0 1.5vh;
    font-size: 7vh;
    line-height: 100%;
    float: left;
    color: #d8b764;
    font-family: "Playfair Display", serif;
    font-weight: normal;
}

#article-wrap {
    background-color: #158a6f;
    display: flex;
    cursor: pointer;
    z-index: 10000;
}

#article {
    padding: 0 40px 20px 40px;
    margin: 0 auto;
    max-width: 1300px;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 300;
    color: #fff;
    font-size: 22px;
} 

#article-header {
    width: 180px;
    height: 35px;
    padding: 0 0 0 30px;
    overflow: hidden;
    background-color: #d68362;
    background-image: url('style/bullet-white.png');
    background-repeat: no-repeat;
    background-position: 3px 3px;
    background-size: 28px 28px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 22px;
    line-height: 35px;
    transform: translateX(-20vw);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

#article h2 {
    padding: 0;
    margin: 20px 0 10px 0;
    transform: translateY(20vh);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

#article p {
    margin: 0;
    font-weight: 300;
    font-size: 22px;
    font-weight: 300;
    font-optical-sizing: auto;
    transform: translateY(20vh);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

#article-read {
    background-color: #d68362;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 20px;
    padding: 10px;
    margin-top: 10px;
    float: right;
    display: block;
    cursor: pointer;
    transform: translateY(20vh);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

@media (min-width: 0px) and (max-width: 700px) {

    #logo {
        opacity: 0;
    }

    #tagline-wrap {
        margin: 10vh 0 0 5vw;
    }

    #tagline-wrap {
        height: 25vh;
    }

    #tagline-cursor {
        height: 25vh;   
    }

    #tagline {
        width: 80vw;
        height: 25vh;
        font-size: 7vh;
        line-height: 100%;
    }
    
}

@media (min-width: 0px) and (max-width: 544px) {

    #tagline-wrap {
        height: 30vh;
    }

    #tagline-cursor {
        height: 30vh;   
    }

    #tagline {
        width: 80vw;
        height: 30vh;
        font-size: 7vh;
        line-height: 100%;
    }
    
}

@media (min-width: 0px) and (max-width: 544px) {

    #tagline-cursor {
        height: 36vh;   
    }
    
}


/* FRONTPAGE SUBFEATURE */

.container {
    display: flex;
    width: 100%;
    overflow: hidden;
}

#special-div {
    width: 33.33vw;
    height: 50vh;
    background-color: #D7B761;
    overflow: hidden;
    position: relative;
    float: left;
}

#image-container {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('style/arrow.png');
    background-size: cover;
    background-position: top right;
    transition: bottom 1.5s ease-out;
}

#text-div-wrap {
    flex-grow: 1;
    width: 66.66vw;
    height: 50vh;
    font-size: 18px;
    display: flex;
    align-items: center;
    position: relative;
    float: left;
    background: #e8dba6;
}

#text-div {
    padding: 10vw;
    font-family: "Red Hat Display", sans-serif;
    font-size: 2vw;
    line-height: 100%;
    transform: translateY(20vh);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}


@media (min-width: 0px) and (max-width: 1250px) {

    #special-div {
        width: 33.33vw;
        height: 40vh;
    }

    #text-div-wrap {
        height: 40vh;
    }

    #text-div {
        font-size: 2.5vw;
    }
    
}

@media (min-width: 0px) and (max-width: 1000px) {

    #special-div {
        width: 50vw;
        height: 40vh;
    }

    #text-div-wrap {
        width: 50vw;
        height: 40vh;
    }

    #text-div {
        padding: 5vw;
        font-size: 3vw;
    }
    
}

@media (min-width: 0px) and (max-width: 700px) {

    #special-div {
        width: 50vw;
        height: 30vh;
    }

    #text-div-wrap {
        width: 50vw;
        height: 30vh;
    }

    #text-div {
        padding: 5vw;
        font-size: 3vw;
    }
    
}

@media (min-width: 0px) and (max-width: 600px) {

    .container {
        display: block;
    }

    #special-div {
        width: 100vw;
        height: 20vh;
    }

    #text-div-wrap {
        width: 100vw;
        height: 30vh;
    }

    #text-div {
        padding: 10vw;
        font-size: 5vw;
    }
    
    #image-container {
        width: 50vw;
    }
}


/* FRONTPAGE BOTTOM FEATURE */

#text-type-feature-wrap {
    height: 50vh;
    background-color: #1A896E;
    overflow: hidden;
    align-items: center;
    width: 100%;
}

#text-type-feature {
    width: 45vw;
    height: 50vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

#text-type-feature-cursor {
    width: 1.5vh;
    height: 15vh;  
    margin-right: 1.5vh; 
    background: #D58362;
    float: left;
    animation: blink 1.5s infinite;
}

    @keyframes blink {
        50% {
            opacity: 0;
        }
    }

#text-type-feature-content {
    line-height: 85%;
    width: 42vw;
    float: left;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-weight: normal;
    font-size: 3vw;
}

@media (min-width: 0px) and (max-width: 1200px) {

    #text-type-feature-content {
        font-size: 4vw;
    }

}

@media (min-width: 0px) and (max-width: 900px) {

    #text-type-feature {
        width: 65vw;
    }

    #text-type-feature-content {
        font-size: 5vw;
        width: 62vw;
    }

    #text-type-feature-cursor {
        height: 20vh;
    }

}

@media (min-width: 0px) and (max-width: 900px) {

    #text-type-feature {
        width: 85vw;
    }

    #text-type-feature-content {
        font-size: 6vw;
        width: 82vw;
    }

    #text-type-feature-cursor {
        height: 20vh;
    }

}

@media (min-width: 0px) and (max-width: 600px) {

    #text-type-feature-content {
        font-size: 10vw;
    }

    #text-type-feature-cursor {
        height: 30vh;
    }

}


/* FRONTPAGE QUESTION */

#question-wrap {
    margin: 25vh 10vw;
    transform: translateY(20vh);
    transition: opacity 2s ease-out, transform 1s ease-out;
    opacity: 0;
}

#question {
    font-size: 50px;
    line-height: 100%;
    text-align: center;
}

#answer-buttons {
    padding-top: 20px;
    text-align: center;
}

    #answer-buttons a {
        display: inline-block;
        background-color: #1A896E;
        padding: 0 15px;
        margin: 5px;
        line-height: 50px;
        color: #fff;
        font-weight: 600;
        font-size: 25px;
    }

    #answer-buttons a.answer-contact {
        background-color: #D58362;
    }

    #answer-buttons a:hover {
        background-color: #D7B761;
    }


/* Footer Menu */

#footer-menu {
    text-align: center;
    color: #777;
    padding: 60px 0 20px 0;
    font-size: 24px;
    text-transform: uppercase;
    border-top: 1px solid #999;
    margin: 0 auto;
    max-width: 1200px;
}

    #footer-menu a {
        font-weight: 600;
        color: #000;
    }

    #footer-menu a:hover {
        color: #bc3313;
    }


/* Footer Spacer */

#footer-spacer {
    height: 500px;
}


/* Footer */

#footer {
    text-align: center;
    padding: 40px 0 40px 0;
    color: #555;
}

@media (min-width: 0px) and (max-width: 600px) {

    #footer {
        font-size: 12px;
        line-height: 150%;
    }
    
}