@import url("global.css");
@import url("banner.css");
@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
@import url('https://fonts.cdnfonts.com/css/steelfish');  
@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@0,400..700;1,400..700&family=Mulish&display=swap');

:root {
    --title-color: #936d42;
    --light-main-bg-color: #FAF8F5;
    --white-main-bg-color: #FFFFFF;
    --title-fontface: 'Ibarra Real Nova', serif;
  }

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/HelveNeuLTRom.eot');
    src: url('../fonts/HelveNeuLTRom.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveNeuLTRom.woff') format('woff'),
        url('../fonts/HelveNeuLTRom.ttf') format('truetype'),
        url('../fonts/HelveNeuLTRom.svg#HelveNeuLTRom') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueCondensedBlack';
	src: url('../fonts/HelveticaNeue-CondensedBlack.eot');
	src: local('☺'), url('../fonts/HelveticaNeue-CondensedBlack.woff') format('woff'), url('../fonts/HelveticaNeue-CondensedBlack.ttf') format('truetype'), url('../fonts/HelveticaNeue-CondensedBlack.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HelveticaNeueCondensedBold';
	src: url('../fonts/HelveticaNeue-CondensedBold.eot');
	src: local('☺'), url('../fonts/HelveticaNeue-CondensedBold.woff') format('woff'), url('../fonts/HelveticaNeue-CondensedBold.ttf') format('truetype'), url('../fonts/HelveticaNeue-CondensedBold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
    font-family: 'HelveticaB';
    src: url('../fonts/HelveNeuLTBol.eot');
    src: url('../fonts/HelveNeuLTBol.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveNeuLTBol.woff') format('woff'),
        url('../fonts/HelveNeuLTBol.ttf') format('truetype'),
        url('../fonts/HelveNeuLTBol.svg#HelveNeuLTBol') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HelveticaCB';
    src: url('../fonts/HelveNeuLTBol.eot');
    src: url('../fonts/HelveNeuLTBol.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveNeuLTBol.woff') format('woff'),
        url('../fonts/HelveNeuLTBol.ttf') format('truetype'),
        url('../fonts/HelveNeuLTBol.svg#HelveNeuLTBol') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: var(--title-fontface);
    src: url('../fonts/helvetica-neue-lt-std-45-light.eot');
    src: url('../fonts/helvetica-neue-lt-std-45-light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/helvetica-neue-lt-std-45-light.woff') format('woff'),
        url('../fonts/helvetica-neue-lt-std-45-light.ttf') format('truetype'),
        url('../fonts/helvetica-neue-lt-std-45-light.svg#helvetica-neue-lt-std-45-light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: var(--title-fontface);
    src: url('../fonts/helvetica-neue-lt-std-25-ultra-light.eot');
    src: url('../fonts/helvetica-neue-lt-std-25-ultra-light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/helvetica-neue-lt-std-25-ultra-light.woff') format('woff'),
        url('../fonts/helvetica-neue-lt-std-25-ultra-light.ttf') format('truetype'),
        url('../fonts/helvetica-neue-lt-std-25-ultra-light.svg#helvetica-neue-lt-std-25-ultra-light') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'MyriadProSBdSCn';
    src: url('../fonts/MyriadPro-Semibold.eot');
    src: url('../fonts/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-Semibold.woff') format('woff'),
        url('../fonts/MyriadPro-Semibold.ttf') format('truetype'),
        url('../fonts/MyriadPro-Semibold.svg#MyriadProSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadProCondensed';
    src: url('../fonts/MyriadPro-Cond.eot');
    src: url('../fonts/MyriadPro-Cond.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-Cond.woff') format('woff'),
        url('../fonts/MyriadPro-Cond.ttf') format('truetype'),
        url('../fonts/MyriadPro-Cond.svg#MyriadProCondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MyriadProBold';
    src: url('../fonts/MyriadPro-Bold.eot');
    src: url('../fonts/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-Bold.woff') format('woff'),
        url('../fonts/MyriadPro-Bold.ttf') format('truetype'),
        url('../fonts/MyriadPro-Bold.svg#MyriadProBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro';
    src: url('../fonts/MyriadPro-Regular.eot');
    src: url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-Regular.woff') format('woff'),
        url('../fonts/MyriadPro-Regular.ttf') format('truetype'),
        url('../fonts/MyriadPro-Regular#MyriadProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadProItalic';
    src: url('../fonts/MyriadPro-It.eot');
    src: url('../fonts/MyriadPro-It.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-It.woff') format('woff'),
        url('../fonts/MyriadPro-It.ttf') format('truetype'),
        url('../fonts/MyriadPro-It#MyriadProIt') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* BEGIN */

#fullScreenVideo {
    /* position: absolute; width: 100%; height: 100%;  */
    overflow: hidden;
    position: relative;
}

.bottomScratch {position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: url('../images/scratch.png') repeat-x top center; z-index: 100;}

#dim {height:100%; width:100%; position:fixed; left:0; top:0; z-index:1000 !important; background-color:black; text-align: center; padding-top: 200px;
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}
#uc {position: fixed; z-index: 1001; top: 200px; left: 40%;}

BODY {color: #ffffff; font-family: 'Helvetica', Arial, Times; background: #ffffff;}

.wrapper {width: 1400px; margin: 0 auto; position: relative; top: 0; left: 0; right: 0; padding: 0;}
.stone {position: relative;}
.aLeft {text-align: left !important;}
.aCenter {text-align: center;}
.aRight {text-align: right !important;}
.vMiddle {vertical-align: middle;}
.mCenter {margin: 0 auto;}
.fLeft {float: left;}
.fRight {float: right !important;}

#header {height: 95px; position: fixed; border-bottom: solid 2px #eeeeee; background-color: rgba(255, 255, 255, 1); z-index: 200; top: 0; left: 0; right: 0; box-shadow: 5px 0 5px #aaa;}
#header .wrapper {z-index: 1500;}
#footer {height:219px; position: relative; background-color: #32353b;}
#footer .wrapper {height:219px; text-align: center; color: #ffffff;}

#logo {transition: all .4s ease-in-out; width: 240px; height: 240px; background: url('../images/virtus-logo.png') no-repeat bottom left; display: inline-block; background-size: contain; z-index: 5000;}
.sticky #logo {width: 280px; height: 92px;}
#mLogo {display: none;}

.grid {opacity: 0.2}

a {color: #595959;}
p {color: #595959; font-size: 15px; line-height: 23px;}
div {color: #595959; font-size: 15px; line-height: 23px;}
.read-more {color: var(--title-color); font-size: 15px; line-height: 23px; font-weight: bold; cursor: pointer;}

H1 {color: #838383; font: normal 30px var(--title-fontface); margin: 20px 0; padding: 10px 0; text-transform: none; text-align: left; line-height: 30px; background: url('../images/h1-bg.png') repeat-x top center; text-transform: uppercase;}
H1 strong {color: var(--title-color); font: bold 30px var(--title-fontface);}
H2 {color: #3d3d3d; font: normal 20px var(--title-fontface); margin: 10px 0 10px 0; padding: 0;}
H3 {color: var(--title-color); font: normal 30px var(--title-fontface); margin: 10px 0; padding: 10px 0;}
.newsBox h3 {font-size: 15px; text-transform: none; color: #a92730; font-weight: bold; padding: 5px 0;}
H4 {color: #3d3d3d; font: normal 12px Arial, Times; margin: 0 0 10px 0; padding: 10px 10px; text-transform: uppercase;}

H2 span {color: #3d3d3d; font: normal 13px Arial, Times; margin: 0; padding: 0; float: right;}
#footer H2 {color: #ffffff; font: normal 20px var(--title-fontface); margin: 10px 0 10px 0; padding: 0;}

#navBg {position: absolute; z-index: 200; top: 0; left: 0; right: 0; height: 125px; background: url('../images/nav-bg.png') repeat-x top center;}
.sticky #navBg {position: fixed;}

#nav {position: absolute; top: 20px; right: 0; left: 0; z-index: 250; height: 74px;}
.sticky #nav {position: fixed;}
/* #nav UL:nth-child(2) {padding: 0 0 0 50px; height: 40px; position: absolute; left: 0; right: auto; width: 45%; margin: 10px auto 0 auto; display: flex; justify-content: flex-start;} */
#nav UL {padding: 0; height: 40px; width: 100%; margin: 10px auto 0 auto; display: flex; justify-content: space-between;}
#nav UL LI {padding: 0; display: inline-block; list-style: none; position: relative;}
#nav UL LI.on A {color: #ffffff;}
/* #nav UL LI:hover A {color: #ffffff; border-bottom: solid 2px #ffffff;} */
#nav UL LI A {color: #ffffff; font-size: 16px; font-family: 'mulish', sans-serif; text-decoration: none; display: block; padding: 20px 13px; font-weight: normal;}
#nav a.on {color: #ffffff;}
#nav UL LI:hover A#logo {border-bottom-style: none;}
#nav UL LI A SPAN:first-child {width: 10px; height: 10px; margin-top: 4px; display: block; float: left; margin-right: 5px; background: url('../images/icon-star.png') no-repeat right center; padding-right: 10px; transform: rotate(0); transition: transform .4s cubic-bezier(.45,0,.55,1);}
#nav UL LI A:hover SPAN:first-child {transform: rotate(90deg);}

#nav UL LI A SPAN:nth-child(2) {display: inline;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), #ffffff 1px);
    background-size: 100% 100%;
    padding-bottom: 0;
    background-position: 0 100%;
    background-size: 0 100%;
    transition: .4s cubic-bezier(.45,0,.55,1);
}

#nav UL LI:hover A SPAN:nth-child(2) {background-size: 100% 100%;}

#nav UL LI A.signUp span:first-child {display: none;}
#nav UL LI A.signUp {border-radius: 10px; background-color: rgba(255, 255, 255, 0.2);}

/* 
#nav UL LI UL {display: none; position: absolute; top: 37px; left: 0; background-color: rgba(255, 255, 255, 0.8); height: auto; border-top: solid 2px #74beff; z-index: 2; box-shadow: 2px 2px 2px #eeeeee;}
#nav UL LI UL LI {display: block; width: 200px; float: none;}
#nav UL LI:hover UL {display: block; padding: 10px;}
#nav UL LI:hover UL LI A, #nav UL LI UL LI A {color: #6c6c6c; border-style: none;}
#nav UL LI:hover UL LI A:hover {color: #74beff; border-style: none;}
#nav UL LI UL LI A.on {color: #74beff !important; border-style: none;}
 */

#nav ul li.active span, #nav ul li:hover span {width: 100%;}

.titleText {color: #ffffff; position: absolute; top: 280px; left: 50px; right: 60%; z-index: 6; font-size: 100px; font-family: 'Steelfish', Arial; line-height: 140px; text-transform: uppercase; margin: 10px 0 10px 0; padding: 0; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);}
.titleText span {display: block; font-size: 60px; line-height: 60px; font-weight: 200; letter-spacing: 2px;}
OBJECT {outline: none;}

.article {margin-bottom: 10px; padding: 20px 10px 5px 20px;}

.indexBox {padding: 0; background-color: #ffffff;}

.d33 {width: 30%; margin-left: 5%; float: left;}
.d33:first-child {margin-left: 0;}

.d50 {width: 45%; margin-left: 5%; float: left;}
.d50:first-child {margin-left: 0;}

.pLeft {float: left; margin: 15px 20px 20px 0;}

.twoColumsList {display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;}
.twoColumsList li {width: 40%; display: flex; margin: 40px 5%;}
.twoColumsList li .icon {width: 50px; height: 50px; margin-right: 100px;}
.twoColumsList li .icon i {margin-top: 100px; font-size: 80px; color: var(--title-color); line-height: 50px; text-align: center;}

#weather {position: absolute; top: 25px; right: 0; color: #A2A2A2}
#footerLogo {position: absolute; right: 0; top: 50px; width: 380px; height: 80px; background: url('../images/footer-logo.png') no-repeat;}
#copy {color: #444444; font-size: 12px; text-transform: uppercase; margin: 5px 0 10px 0;}
#develop {color: #A2A2A2; position: absolute; bottom: 20px; right: 20px; font-size: 11px;}
#footer a {color: #A2A2A2; text-decoration: none;}

input[type='text'] {border: solid 1px #E0E4E3; padding: 10px; margin: 0 15px 15px 0; font-size: 14px; width: 400px;}
input[type='password'] {border: solid 1px #E0E4E3; padding: 10px; margin: 0 15px 15px 0; font-size: 14px; width: 400px;}
textarea {border: solid 1px #E0E4E3; padding: 10px; margin: 0 15px 15px 0; font-size: 14px; width: 400px;}
select {border: solid 1px #E0E4E3; padding: 10px; margin: 0 15px 15px 0; font-size: 14px; width: 400px; background-color: #ffffff;}

input[type='submit'], input[type='buttom'], input[type='reset'] {background-color: #6db3f4; color: #ffffff; text-transform: uppercase; padding: 6px 20px; border-style: none; font-size: 18px;}

textarea {border: solid 1px #E0E4E3; padding: 5px; margin-bottom: 5px; width: 400px;}

#latestUpdatesWrapper {background-color: #005b66; color: #ffffff; height: 5px; position: absolute; bottom: 0; right: 0; left: 0;}
#latestUpdateButton {background-color: #005b66; width: 160px; height: 30px; position: absolute; right: 0; top: -30px; color: #ffffff; font-size: 18px; font-family: 'HelveticaNeueCondensedBold', Arial; text-decoration: none; border-radius: 5px 5px 0 0; text-transform: uppercase; text-align: center; padding-top: 5px; cursor: pointer;}
#latestUpdateContent {height: 0; overflow: hidden;}
#latestUpdateContent a {display: inline-block; width: 33%; float: left; color: #ffffff;}
#latestUpdateContent a h2 {display: block; margin: 0; padding: 30px 0;}
#latestUpdateContent a span {float: left; color: #ffffff; font-size: 14px; padding: 5px; display: inline-block; margin: 0;}
#latestUpdateContent a i {float: right; color: #ffffff; font-size: 14px; padding: 5px; display: inline-block; margin: 0;}

.quotes {position: fixed; z-index: 110; bottom: 15%; right: 10%; width: 30%; background-color: rgba(0, 0, 0, 0.6); padding: 20px;}
.quote {display: none; color: #ffffff;}
.quote p {color: #ffffff;}
.quote h2 {color: #ffffff;}
.quote a {color: #ffffff;}
.quote span {color: #ffffff; font-style: italic; display: block; text-align: right;}

#mainVideo {width: 100%; height: 100vh; object-fit: cover;}

#muteButton {cursor: pointer; position: absolute; right: 15px; top: 15px; width: 40px;}
#muteButton.hidden {display: none;}
#muteButton i {font-size: 40px; color: #ffffff;}
.muted .fa-volume {display: none;}
.volume .fa-volume-mute {display: none;}

#menuButton {display: none; position: fixed; z-index: 550; right: 10px; top: 40px; background-color: transparent; border-style: none; width: 30px; height: 20px; margin: 0; padding: 0;}
#menuButtom div {position: relative; height: 100%;}
#menuButton div span {transition: all ease 0.5s; position: absolute; left: 0; width: 100%; height: 3px; background-color: rgba(255, 255, 255, 0.95); display: inline-block;}
#menuButton div span:nth-child(1) {transform: rotate(0); top: 0;}
#menuButton div span:nth-child(2) {transform: rotate(0); top: 10px;}
#menuButton div span:nth-child(3) {transform: rotate(0); top: 20px;}
#menuButton.active div span:nth-child(1) {transform: rotate(45deg); top: 10px;}
#menuButton.active div span:nth-child(2) {left: -50px; opacity: 0;}
#menuButton.active div span:nth-child(3) {transform: rotate(-45deg); top: 10px;}

.contentLight {background-color: var(--light-main-bg-color); min-height: 500px;}
.contentLight .wrapper {padding: 140px 50px;}
.contentLight H2 {font-size: 50px; color: #936d42; letter-spacing: .4px; font-family: 'Ibarra Real Nova', serif;}

.contentWhite {background-color: var(--white-main-bg-color); min-height: 500px;}
.contentWhite .wrapper {padding: 140px 50px;}
.contentWhite H2 {font-size: 50px; color: #936d42; letter-spacing: .4px; font-family: 'Ibarra Real Nova', serif;}

.parallaxContent .wrapper {padding: 140px 50px;}
.parallaxContent H2 {font-size: 50px; color: #ffffff; letter-spacing: .4px; font-family: 'Ibarra Real Nova', serif;}

.paraxify {
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
  }

.layer1 {transform: translateZ(-1px);}
.parallaxLayer {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}


.parallaxVideo {width: 100%; height: 100%; object-fit: cover;}

.parallax {height: 820px; background-size: cover; background-position: center;}
.parallax.partnerWrapper {height: 600px;}
.parallaxColorOverlay {height: 100%; background-color: #ffffff; opacity: 0.95; position: absolute; top: 0; left: 0; right: 0; z-index: 1;}
.parallaxContent {position: relative; z-index: 2;}
.parallaxContent * {color: #ffffff;}
.parallaxContent div {font-size: 20px; line-height: 30px; padding: 20px; margin: 0 auto;}

#contactWrapper .parallaxColorOverlay {background-color: #000000; opacity: 0.65;}
#contactWrapper.parallax {min-height: 100px; position: relative;}

.bgImgLeft {
    position: relative;
    overflow: hidden;
}

.bgImgLeft::before {
    content: '';
    /* background-position-x: -50%; */
    /* background-position-y: 50%; */
    /* background-repeat: no-repeat; */
    /* background-size: 60%; */
    opacity: 0.04;
    background-image: url(https://astrology.nicdark.com/astrology-wordpress-theme/wp-content/uploads/sites/2/2024/06/ZODIAC-CONSTELLATION-MAP.png);
    --background-overlay: '';
    background-position-x: -50%;
    background-repeat: no-repeat;
    background-size: 60% auto;
    position: absolute;
    z-index: 5;
    left: 0;
    background-position-y: 50%;
    width: 1400px;
    height: 100%;
    overflow: hidden;
}

.contentLight .stone {position: relative; z-index: 6;}

/* ------------------------------------------------------------------------------------------------------------------------------------ */

@-ms-viewport{
    width: device-width;
}

@media only screen and (max-width: 1400px) {
    #nav UL {width: 100%}
    .wrapper {width: 100%;}
    .twoColumsList li {width: 100%;}
    .wrapper {padding: 0 50px;}
    .contentLight .wrapper {padding: 140px 50px;}
}

@media screen and (max-width: 1024px) {
    .titleText {font-size: 70px; right: 50px; line-height: 80px;}
    .titleText span {font-size: 36px; line-height: 30px; margin-top: 30px;}

    .contentLight H2 {font-size: 40px;}

    #logoWrapper {display: none !important;}
    #logo {position: absolute; top: 0;}
    #mLogo {height: 90px; background: url('../images/virtus-logo.png') no-repeat top center; display: inline-block; background-size: contain; z-index: 600; position: absolute; left: 0; right: 0;}

    .sticy header {backdrop-filter: none !important;}
    #menuButton {display: block;}
    #nav {transition: all ease 0.5s; }
    #nav ul {transition: all ease 0.5s; position: fixed; left: -100%; width: 100%; top: 0; bottom: 0; overflow: hidden; display: block; margin: 0; padding-top: 200px;}
    #nav ul li { display: block; width: 100%; text-align: center;}
    #nav ul li a span:first-child {display: none;}
    #nav.active ul {left: 0; top: 0; bottom: 0; right: 0; height: 100vh;}
    #hLogo {display: block;}
    #nav.active {left: 0; top: 0; bottom: 0; right: 0; height: 100vh;}
    #nav.active ul li {float: none; display: block; width: 100%; text-align: center;}
    #muteButton {display: none;}
    #lang {display: none;}
    #copy ul {display: none;}
    footer li {display: none;}
    footer li:first-child {display: block; width: 100%}
}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
    #logoWrapper {display: none;}
    #logo {position: absolute; top: 0;}
    #mLogo {height: 90px; background: url('../images/virtus-logo.png') no-repeat top center; display: inline-block; background-size: contain; z-index: 600; position: absolute; left: 0; right: 0;}
    .quotes {
        left: 10%;
        width: auto;
        bottom: 5%;
    }
    #mainVideo {
        /* object-fit: contain; */
    }

    .twoColumsList li .icon {width: 20px; height: 50px; margin-right: 20px; display: none;}
    .twoColumsList li .icon i {font-size: 40px; line-height: 50px;}

}