/* VARS */
:root {
  /* COLOR SCHEME */

  /* alt scheme */
  --primary: #e3dfcd;
  --secondary: #c2a251;   /* CHANGE THIS TO REAL COLOR LATER */ 
  --black: #131313ff;
  --black-trans: #03030366;
  --med-grey: #333333ff;
  --grey: #666666ff;
  --light-grey: #ccccccff;
  --off-white: #f1f1f1ff;
  --white: #fafafaff;
  --green: #a5b9b5;
  --light-green: #e9f6c0ff;
  --orange: #ca711eff;
  --light-orange: #f5d5b8ff;
  --light-red: #2FB8AC;
  --dark-red: #FF6961ff;
  --trans: #ffffffAA;
  --trans-light: #ffffffAA;
  --trans-black: #33333311;


  /* misc */
  --blue: #4a5e6c;
  --orange: #d8bfb1;
  --pink: #e3dfcd;

  /* FONT SIZES */
  --x-small: 0.4rem;
  --small: 0.75rem;
  --medium: 1rem;
  --large: 1.25rem;
  --x-large: 1.5rem;
  --xx-large: 2.5rem;
  --xxx-large: 4rem;
  --xxxx-large: 9rem;

  /* FONT WEIGHT */
  --light: 400;
  --med: 500;
  --heavy: 700;
  --bold: 900;

  /* ANIMATION SPEEDS */
  --very-slow: 1s;
  --slow: 0.8s;
  --fast: 0.7s;
  --very-fast: 0.3s;
  
  /* BORDER RADIUS */
  --round-very-small: 1px;
  --round-small: 5px;
  --round-big: 10px;
  --circle: 50%;
}

/* animatons */
@keyframes fade {
    0% {box-shadow:2px 2px 50px 2px #aaaaaaff;}
    50% {box-shadow:2px 2px 50px 2px #aaaaaa00;}
    100% {box-shadow:2px 2px 50px 2px #aaaaaaff;}
}


/* FONTS */
@font-face {
  font-family: "helvetica";
  src: url("../fonts/muli.ttf") format("truetype");
  src: url("../fonts/muli.woff") format("woff");
}

@font-face {
  font-family: "vogue";
  src: url("../fonts/vogue.ttf") format("truetype");
  src: url("../fonts/vogue.woff") format("woff");
}

@font-face {
  font-family: "vogueIt";
  src: url("../fonts/vogue2.ttf") format("truetype");
  src: url("../fonts/vogue2.ttf") format("woff");
}


/* CLEARFIX */
* {
  box-sizing: border-box;
}

html {
  background:var(--black);
  scroll-behavior: smooth;
}

.clearfix:after {
  content: " ";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
  font-size: 0;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: helvetica;
  background: var(--off-white);
  /* overflow:hidden; */
}

/* MISC */
:focus {
	outline: none;
}

p {
	line-height: 1.5;
	font-size: var(--medium);
  color: var(--light-grey);
}

.overflowHide {
  overflow:hidden;
}

.lineBreak {
	width: 25%;
	border: solid 1px var(--secondary);
	display: block;
	margin: 0px 0px 30px 0px;
}

.disabled {
  display:none;
}

.xl-text {
  font-size: var(--xxx-large);
}

.l-text {
  font-size: var(--xx-large);
}

.dark-text {
  color: var(--black) !important;
}

video, img {
	width: 100%;
  border-radius: var(--round-small)
}

.darkBG {
  background:var(--black);
}

.lightBG {
  background: var(--white) !important;
}

.noBG {
  background: none !important;
}

.bgPrimary {
  background:var(--primary);
}

.bgSecondary {
  background:var(--secondary);
}

.bgSize {
  background-position: center !important;
  background-size: cover;
}

.parallax {
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover;
}

.fullHeight {
  min-height:100vh;
}

.fullWidth {
  min-width: 100vw;
}

.halfWidth {
  width: 50vw;
}
.pad {
  padding-top:50px;
}

.largeIcon {
	font-size: var(--xxx-large);
	text-align: center;
	text-shadow: 2px 2px 5px #03030344;
}

.centered {
  text-align:center;
}

.green {
	padding: 8px;
	text-align: center;
	display: block;
	line-height: 1.5;
	font-size: var(--medium);
	background: var(--green);
	border-radius: var(--round-small);
	color: var(--black) !important;
}

.red {
	padding: 8px;
	text-align: center;
	display: block;
	line-height: 1.5;
	font-size: var(--medium);
	background: var(--light-red);
	border-radius: var(--round-small);
	color: var(--black) !important;
}

.underline {
  border-bottom: solid 1px var(--secondary);
}

.copyright {
  font-size:var(--small);
}

.bold {
	font-weight: 900;
}

/* ACCORDIAN */
.accordian {
	display: flex;
	flex-flow: column;
  gap:5px;
	width: 100%;
}

.accItem {
	width: 100%;
	padding: 10px;
	border: solid 1px var(--black);
	border-radius: var(--round-small);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.accInfo ul {
	display: flex;
	flex-flow: column;
	justify-content: center;
	gap: 5px;
}

.accInfo ul {
	background: var(--trans);
	border-radius: var(--round-small);
	padding: 10px;
}

.accInfo li {
	text-align: left;
}

/* FLEX */
.flex {
	display: flex;
	gap: 30px;
}

.column {
  flex-flow:column;
}

.wrap {
  flex-flow:wrap;
}

.spaceBetween {
  justify-content: space-between;
}

.flex-smallgap {
	display: flex;
	gap: 20px;
}

.flex-nogap {
  display:flex;
}

.flex img, .flex video {
  padding-right:30px;
}

.col-1 {
  flex: 0 0 33%;
}

.col-1-wrap {
  flex: 0 0 calc(33% - 30px);
}

.col-2 {
  flex: 0 0 67%;
}

.col-3 {
	flex-grow: 1;
	display: flex;
	flex-flow: column;
	width: 100%;
}

.col-quart {
  width: 25%;
  flex: 0 0 25%;
}

.col-quart-wrap {
  width: calc(25% - 30px);
  flex: 0 0 calc(25% - 30px);
}

.col-half {
  width:50%;
  flex: 0 0 50%;
}


/* HEADINGS */
h1 {
  font-size: var(--xx-large);
  margin: 10px 0px 10px 0px;
}

h2 {
  font-size: var(--x-large);
  margin: 5px 0px 5px 0px;
}

h3 {
  font-size: var(--x-large);
  margin: 5px 0px 5px 0px;
}

h4 {
  font-size: var(--x-small);
  margin: 5px 0px 5px 0px;
}


/* LINKS */
a, .link{
  text-decoration: none;
  font-size: var(--small);
  color: var(--off-white);
  font-family: helvetica;
  transition: var(--slow);
  cursor:pointer;
}

a:hover, .link:hover{
  color: var(--black);
  transition: var(--fast);
}

.a-enter-vr {
  display:none;
}

.burger {
  cursor: pointer;
  color: var(--off-white);
}

/* BUTTONS */

button, .Submit {
  border: none;
  padding:15px;
  margin-top: 10px;
  font-size: var(--medium);
  border-radius: 5px;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  transition: var(--fast);
}

.SubmitTrans {
  border: none;
  padding:15px;
  margin-top: 10px;
  font-size: var(--medium);
  border-radius: 5px;
  background: none;
  color: var(--off-white);
  border: solid 1px var(--off-white);
  transition: var(--very-fast);
  cursor: pointer;
}

.SubmitTrans {
  border: none;
  padding:15px;
  margin-top: 10px;
  font-size: var(--medium);
  border-radius: 5px;
  background: none;
  color: var(--off-white);
  border: solid 1px var(--off-white);
  transition: var(--very-fast);
  cursor: pointer;
}

button:hover, .Submit:hover {
  background: var(--off-white);
  color: var(--black);
  transition: var(--fast);
}

.darkHover:hover {
  background: var(--black);
  color: var(--white);
  transition: var(--very-fast);
}

.darkBtn {
  background: var(--med-grey);
  color: var(--white);
}

button a {
  font-size: var(--medium) !important;
}

/* FORMS AND FIELDS */
form {
  width:20rem;
}

form .green {
  padding: 40px;
  text-align: center;
  display: block;
  line-height: 1.5;
  font-size: var(--medium);
  background: var(--green);
  border-radius: var(--round-small);
  color: var(--med-grey);
}

.errorMsg {
	background: var(--dark-red);
	color: var(--off-white);
	padding: 10px;
	border-radius: 5px;
	width: 80%;
	margin: auto;
	display: block;
	text-align: center;
	font-size: var(--small);
}

.succMsg {
	background: var(--green);
	color: var(--off-white);
	padding: 10px;
	border-radius: 5px;
	width: 80%;
	margin: auto;
	display: block;
	text-align: center;
	font-size: var(--small);
}

.check {
  display:flex; 
  gap: 5px;
  flex-wrap: wrap;
}

.questionItem {
	display: flex;
	flex-flow: column;
	flex: 1 1 18%;
	justify-content: center;
	align-items: center;
}

.question span {
	cursor: pointer;
	text-align: center;
}

.warn {
	background: var(--light-orange);
	padding: 10px;
	width: 60%;
	border-radius: var(--round-small);
}

.questu .Submit {
	color: var(--off-white);
	text-align: center;
}

.questu .Submit:hover {
	color: var(--black);
	text-align: center;
}

.questu {
	width: 50%;
}

.twin .question, .qLife .question {
	background: var(--trans-light);
	padding: 20px;
	border-radius: var(--round-small);
}

.deployment {
	border: solid 1px var(--off-white);
	padding: 6px;
	color: var(--off-white);
	border-radius: var(--round-small);
  transition: var(--fast);
  cursor: pointer;
}

.deployment:hover {
	background: var(--off-white);
  color: var(--black);
  transition: var(--fast);
}

.axe {
	position: fixed;
	z-index: 1001;
	top: calc(50% - 250px);
	left: calc(50% - 350px);
	width: 100vw;
	height: 80vh;
}

.hideaxe {
	background: #f3f3f3ff;
	width: 150px;
	height: 30px;
	display: block;
	position: relative;
	z-index: 999;
	top: 40px;
	left: 540px;
}

.question li i {
	font-size: var(--small);
}


::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}

.check a {
	color: var(--secondary);
	font-size: var(--medium);
}

label {
  margin:40px 0px 40px 0px;
  display:block;
}

form button, form .Submit {
	float: right;
}

::placeholder {
  opacity: 1;
  color: var(--white);
}

.lightBG ::placeholder {
  opacity: 1;
  color: var(--grey);
}

select {
	border: solid 1px var(--off-white);
	border-radius: var(--round-small);
	padding: 15px;
	background: none;
	color: var(--off-white);
}

.textInput {
	background: none;
	padding: 10px;
  margin:0px;
	border-bottom: solid 1px var(--secondary);
	width: 20rem;
	font-size: var(--medium);
	color: var(--secondary);
}

.rightNav .textInput {
	width: calc(100% - 10px);
	display: block;
	margin: 5px;
}

.input {
	margin: 10px;
	padding: 8px;
	border: solid 1px var(--secondary);
	border-radius: var(--round-small);
	color: var(--secondary);
}

.checkInput {
	width: fit-content;
	margin: 6px;
}

input {
	border: none;
	/* margin: 0px 0px 0px 10px; */
}

::placeholder {
  color: var(--secondary);
  font-size: var(--small);
}

:-ms-input-placeholder {
  color: var(--secondary);
  font-size: var(--small);
}

.imgInput {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow:column;
  width: 100%;
  height:100px;
  padding-right: 10px;
  min-height: 77px;
  cursor:pointer;
  transition: var(--very-fast);
}

.imgInput i {
  font-size: var(--xx-large);
  transition: var(--very-fast);
}

.imgInput span {
  margin:10px 0px 0px 0px !important;
  transition: var(--very-fast);
}

.imgInput:hover i, .imgInput:hover span {
  color: var(--light-grey) !important;
  transition:var(--very-fast);
}

.imgInput input {
	height: 20px;
	display: block;
	position: relative;
	z-index: 999;
	width: 100%;
	opacity: 0;
	margin-top: -20px;
}


/* MAIN */
#container {
  display: flex;
  flex-flow:column;
}

.hide {
  /* width: 68px !important; */
  display:none !important;
}


/* NAVIGATION */

/* home navigation */


/* landing page navigation */
.navbar {
	display: flex;
	width: 100vw;
	padding: 15px 40px 15px 40px;
	align-items: center;
	justify-content: right;
  z-index:999;
}

.navbar .Submit {
  padding:10px;
  float:right;
  margin:0px;
}

.navbar .logo img {
	width: 60px;
  z-index:1000;
  position:relative;
}

.navbar .logo {
  color: var(--white);
  display:inline-flex;
  align-items:center;
  font-size: var(--medium);
  margin:0px;
  float:left;
}

.navbar .logo span {
	padding: 3px 0px 0px 3px;
}

/* logo */
.logo {
  margin: 0px 0px 10px 0px;
  justify-content:center;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.selected {
  background: var(--primary);
  color: var(--off-white);
  transition: var(--fast);
}


/* LOADING ANIMATION */
.loader {
  --loader-size: calc(var(--block-size) / 2);
  --loader-size-half: calc(var(--loader-size) / 2);
  --loader-size-half-neg: calc(var(--loader-size-half) * -1);
  --light-color: rgba(255, 255, 255, 0.3);
  --dot-size: 3px;
  --dot-size-half: calc(var(--dot-size) / 2);
  --dot-size-half-neg: calc(var(--dot-size-half) * -1);  
  display: block;
  position: relative;
  width: var(--loader-size);
  display: grid;
  place-items: center;
  color: var(--med-grey);
}

.loader::before,
.loader::after {
  content: '';
  position: absolute;
}

/**
  loader--1
**/
.loader--1 {
  --loader-size: calc(var(--block-size) / 3);
  --loader-size2: calc(var(--block-size2) / 3);
  --anim-duration: 2s;
  --loader-1-dist: calc(var(--loader-size) - var(--dot-size-half) + 1px);
  --loader-2-dist: calc(var(--loader-size2) - var(--dot-size-half) + 1px);
  aspect-ratio: 3 / 5;
  border: 1px solid var(--med-grey);
}

.loader--1::before,
.loader--1::after {
  width: var(--dot-size);
  aspect-ratio: 3 / 5;
  background: currentColor;
  border-radius: 50%;
  top: var(--dot-size-half-neg);
  left: var(--dot-size-half-neg);
  animation: loader-1 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}

.loader--1::after {
  animation-delay: calc(var(--anim-duration) / 4 * -1);
}

@keyframes loader-1 {
  0%, 100% {
    transform: none;
  }
  
  25% {
    transform: translateX(var(--loader-1-dist));
  }
  
  50% {
    transform: translateX(var(--loader-1-dist)) translateY(var(--loader-2-dist));
  }
  
  75% {
    transform: translateX(0) translateY(var(--loader-2-dist));
  }
}

.loaderCont img {
  width:60px;
  margin:auto;
  position:absolute;
  top:15px;
}

.loaderCont {
	--block-size: 18vmin;
  --block-size2: calc(var(--block-size) * 1.65);
	display: flex;
	flex-flow: column;
	gap: 15px;
	font-weight: var(--bold);
  align-items: center;
}

.item	{
  display: flex;
  place-items: center;
  justify-content:center;
  border-radius: var(--round-small);
  transition: opacity var(--fast) ease;
}

.loaderOuter {
	display: flex;
	color: var(--black);
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	background: #ffffff;
	position: fixed;
	top: 0px;
	width: 100vw;
	height: 100vh;
  z-index:1000;
}

.loaderOuter h3 {
  color: var(--black);
  font-size:var(--medium);
  font-family: arial;
}

.loaderHide {
  display:none !important;
  transition: var(--fast);
}

/* SECTION */

.section {
  width: 100%;
  color: var(--white);
  padding:40px;
  max-width: 90vw;
  margin: auto;
}

/* modal */
.modalBg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: var(--trans-black);
	top: 0px;
	left: 0px;
  z-index:999;
  overflow:scroll;
  display:flex;
  justify-content: center;
  align-items: center;
}

.modal {
	width: 50vw;
	/* height: 90vh; */
	display: flex;
	min-height: 90vh;
	border-radius: var(--round-small);
  flex-flow:column;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
  position:relative;
  z-index:999;
  padding:10px;
  background:var(--off-white);
}

.modal span i {
	float: right;
	font-size: var(--x-large);
	padding: 20px;
  cursor:pointer;
  color: var(--secondary);
  transition: var(--fast);
}

.modal span i:hover {
  color: var(--primary);
  transition: var(--fast);
}

.closeModal {
	position: absolute;
	z-index: 999;
	display: flex;
	right: 0px;
}

.modalLogo {
	position: absolute;
	z-index: 999;
	right: 15px;
	display: flex;
	bottom: 15px;
}

.modalLogo img {
	width: 70px;
}

.smallModal {
	width: 34vw;
	min-height: fit-content;
}


/* loading animation */
/* .loader {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: var(--off-white);
	position: fixed;
	z-index: 999;
	width: 100vw;
} */

/* .loader img {
  width:15%;
  animation-name: fade;
  animation-duration: 3s;
  animation-iteration-count: infinite;
} */

/* FOOTER */

.footer {
	width: 100vw;
	height: 50px;
	background: var(--med-grey);
  padding-left:40px;
  padding-right:40px;
}

.footer ul {
	display: flex;
	width: 100%;
	gap: 5px;
	justify-content: center;
  height:50px;
  align-items:center;
}

.footer li {
	float: left;
	padding: 5px;
  margin-bottom:0px;
}

.footer a {
  color:var(--white);
}

.footer .textInput {
	width: 150px;
	padding: 3px;
	border: none;
	background: var(--grey);
}

.footer a:hover {
  color:var(--secondary);
}

/* ADD NEW CSS HERE */
iframe {
  width:460px;
  height:340px;
}

.rightNav {
  background: none;
  padding:20px;
  float:right;
  position: fixed;
  bottom:-100vh;
  left:0px;
  width:100vw;
  min-height:100vh;
  height:100vh;
  display:flex;
  flex-flow:column;
  overflow:scroll;
  z-index:999;
  opacity:0;
  background:var(--trans);
  background-image: linear-gradient(150deg, #fafafa22, #fafafa33, #fafafaff);
}

.rightMenu {
	color: var(--black);
	flex-flow: column;
	flex-wrap: wrap;
	margin-top: 40px;
	gap: 25px;
  position:relative;
}

.rightMenu li a, .moreInfo a{
	color: var(--black);
  font-size: var(--xx-large);
  font-family:vogue;
}

/* .rightMenu li a:hover, .moreInfo a:hover{
	color: var(--secondary);
} */

.moreInfo {
	padding-bottom: 10px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.rightBot {
	position: absolute;
	bottom: 20px;
  left:0px;
	width: 100vw;
}

.rightBot .socialIcons {
	width: 100vw;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 20px;
}

.log button {
	background: none;
	font-family: vogue;
	color: var(--black);
}

.log button:hover {
	color: var(--off-white);
}

.log {
	justify-content: center;
	display: flex;
}

.terms {
	justify-content: right;
	display: flex;
}

.socialIcons div {
	flex: 1;
}

.rightBot .social a:hover, .terms a:hover {
  color:var(--secondary);
}

.moreInfo span {
	color: var(--black);
}

.bgimg {
	background: url("../images/0.webp");
	min-height: 100vh;
  max-height:100vh;
	background-repeat: no-repeat;
	background-size: cover;
}

.backBtn {
  cursor:pointer;
}

.backBtn span i {
  padding-right:10px;
  padding-left:10px;
  transition: var(--fast);
}

.backBtn span:hover i {
  padding-right:20px;
  transition: var(--fast);
  padding-left:0px;
  color: var(--off-white);
}

.backBtn span {
  color: var(--off-white);
  transition: var(--fast);
}

.backBtn span:hover {
  color: var(--off-white);
  transition: var(--fast);
}

.water {
	width: 100vw;
	height: 100vh;
	position: relative;
}

.water video {
	position: absolute;
	bottom: -50px;
  left:50%;
  top:80%;
  transform: translate(-50%, -80%);
  width:170vw;
}

.homeWater {
	width: 105vw;
}

.login {
  margin-bottom:20px;
}

.login form {
	width: 80%;
	display: flex;
	flex-flow: column;
	gap: 15px;
	justify-content: center;
	align-content: center;
	margin: auto;
  padding-bottom:20px;
}

.login h2 {
	text-align: center;
	color: var(--black);
	margin-top: 50px;
}

.regLinks {
	text-align: center;
}

.regLinks span {
	color: var(--black);
}

.fb {
  background-color: #3B5998;
}

.google {
  background-color: #dd4b39;
}

.twitter {
  background-color: #55ACEE;
}

.login {
	display: flex;
	flex-flow: column;
	gap: 20px;
}

.login .textInput {
	width: 100%;
}

.socialLogin {
	margin: auto;
	width: 80%;
	display: flex;
	flex-flow: column;
}

.socialLogin .Submit {
	text-align: center;
}

.aframeCon{
  display:flex;
}

.aframeVid {
	align-items: center;
	width: 100%;
	justify-content: center;
	display: flex;
	flex-flow: column;
}

.aframeVid .aframeCont {
	margin: auto;
	z-index: 999;
	position: absolute;
	align-content: center;
	text-align: center;
}

.aframeCont h1 {
  font-weight:900;
  color: var(--light-grey);
}

.aframeCont h2{
  font-weight:400;
  padding:8px;
  font-size:var(--medium);
  color: var(--off-white);
  width:fit-content;
  margin:auto;
  border-radius:5px;
}

.aLinks {
	display: flex;
	flex-flow: column;
  align-items: center;
  justify-content: center;
  gap:20px;
  margin-bottom:150px;
}

.aDesc {
	flex: 1 1 50%;
	width: 50% !important;
}

.startBtns {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 40px;
	width: 100vw;
	left: 0;
}

.aTitle {
	font-family: vogueIt;
	font-size: var(--xxx-large);
	margin: 0px;
	font-weight: 400 !important;
	top: 20px;
	display: flex;
	flex-flow: column;
	line-height: 100px;
  padding-bottom:30px;
}

.aTitle span {
	font-weight: 400 !important;
	font-size: var(--xxxx-large);
	font-family: vogue;
}

.aTitleSmaller {
	font-size: var(--xx-large);
	top: 40px;
}

.noAudio {
	padding: 5px;
	font-size: var(--small);
	transition: var(--fast);
	background: none;
	border-bottom: solid 1px;
	border-radius: 0px;
}

.noAudio:hover {
	color: var(--black);
	background: none;
	border-bottom: solid 1px;
	border-radius: 0px;
}

.asub, .noAudio, .aLinks h1, .aLinks h2 {
  position:relative;
}

.asub {
  background:var(--secondary);
}

.loadVideo {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
  width:0px;
  position:fixed;
  left:50vw;
  top:300px;
  opacity:0;
}

.biggerVid {
	width: 100vw;
	position: fixed;
	left: 0px;
	top: 0px;
	background: var(--med-grey);
	height: 100vh;
  display:none;
  opacity:0;
}

.biggerVid video {
	width: 70vw;
	margin-top: 40px;
}

.socialIcons a {
	font-size: var(--large);
  filter: drop-shadow(8px 8px 10px black);
}

.terms a {
  font-size: var(--small);
  color: var(--black);
}

.rightBot .social a {
  font-size: var(--medium);
  color: var(--black);
}

.social {
	padding: 5px;
}

.socialIcons {
	display: flex;
	justify-content: right;
	align-items: center;
}

.socialIcons .burger {
	padding: 15px;
	border-radius: 3px;
	border: solid 1px var(--off-white);
	text-align: center;
	margin-left: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
  transition: var(--fast);
}

.menuBtn {
	color: var(--black);
	cursor: pointer;
	transition: var(--fast);
	padding: 15px;
	border-radius: 3px;
	border: solid 1px var(--black);
	width: fit-content;
	display: flex;
	justify-content: center;
	align-items: center;
}

.rMenu {
	display: flex;
	justify-content: right;
}

.burger:hover{
  color: var(--black);
  background:var(--off-white);
  transition: var(--fast);
}

.score {
	margin-right: 10px;
	color: var(--white);
	font-weight: 900;
	padding: 10px;
}

.menuBtn:hover{
  color: var(--off-white);
  background: var(--black);
  transition: var(--fast);
}

.closeVid {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 999;
  color:var(--off-white);
  border: solid 1px var(--off-white);
}

.closeVid:hover {
	color: var(--black);
  border: solid 1px var(--off-white);
  background: var(--off-white);
  transition: var(--fast);
}

.expandVid {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 999;
  color:var(--black);
  border: solid 1px var(--black);
}

.expandVid:hover {
	color: var(--off-white);
  border: solid 1px var(--black);
  background: var(--black);
  transition: var(--fast);
}


/* health */
.circleVid {
	display: flex;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
  z-index:998;
}

.circleDesc .menuBtn {
	margin-left: auto;
	color: var(--off-white);
	border: solid 1px var(--off-white);
	z-index: 999;
	position: relative;
  background:none;
}

.circleDesc .menuBtn:hover {
	margin-left: auto;
	color: var(--black);
	background: var(--off-white);
}

.circleDesc {
  opacity:0;
  transition:var(--fast);
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding-right: 40px;
}

.circleContent {
	color: var(--white);
	font-size: var(--small);
}

.headingsDesc {
	font-size: var(--large);
}

.leftmarg {
	margin-left: 30px;
}

.leftcirc, .rightcirc {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	padding: 60px;
  padding-left:20px;
}

.hoverCircles {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
  transition: var(--fast);
  cursor:pointer;
  padding:10px;
}

.hoverCircles h2 {
  transition: var(--fast);
  font-family: vogue;
}

.hoverCircles h2, .hoverCircles h3 {
	margin: 0px;
}

.hoverCircles h3 {
	font-size: var(--medium);
}

.hoverCircles:hover span{
  transition:var(--fast);
  padding: 5px;
  width:150px;
  height:150px;
}

.hoverCircles:hover img{
  transition:var(--fast);
  width:140px;
  height:140px;
  opacity: 0.5;
}

.hoverCircles:hover h2{
  transition:var(--fast);
  font-size: var(--large);
}

.midcirc {
	justify-content: center;
	display: flex;
	align-items: center;
}

.circleVid img {
	border-radius: var(--circle);
	height: 160px;
	width: 160px;
  transition:var(--fast);
}

.circleVid span {
	padding: 15px;
	border: solid 1px var(--trans);
	border-radius: var(--circle);
	height: 190px;
	width: 190px;
	display: block;
  transition:var(--fast);
  margin-bottom:10px;
}

.circleBtn {
	border: none !important;
	height: auto !important;
	padding: 0px !important;
	margin: 0px !important;
	width: fit-content !important;
}

.leftHover {
	justify-content: right;
	padding-left: 100px;
	padding-top: 25px;
}

.rightHover {
	justify-content: right;
  padding-bottom:20px;
}


/* circle animation */
.circleAni {
	position: absolute;
	z-index: 999;
	top: 40%;
	left: calc(50% - 65px);
  transition: var(--fast);
  cursor:pointer;
}

.circleLoad {
	background: var(--white);
	position: fixed;
	top: 50%;
	left: 50%;
	width: 0vw;
	height:0vh;
	z-index: 1000;
  display:none;
  opacity:0;
  border-radius:var(--circle);
  box-shadow: 0 0 20px 30px var(--white);
}

.outerCircle {
	border: solid 1px var(--black-trans);
	border-radius: var(--circle);
	display: flex;
  transition: var(--fast);
}

.middleCircle {
	margin: 15px;
	border: solid 1px var(--black-trans);
	border-radius: var(--circle);
	display: flex;
  transition: var(--fast);
}

.innerCircle {
	border: solid 1px var(--black);
	border-radius: var(--circle);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px;
  transition: var(--fast);
}

.innerCircle i {
	margin: 25px;
	font-size: var(--x-small) !important;
  transition: var(--fast);
}

.circleAni:hover {
	transform: scale(1.2);
	transition: all var(--fast);
}

.goBack h3 {
	color: var(--black);
	/* font-family: vogue; */
  font-size:var(--medium);
  font-weight: var(--bold)
}

.goBack span {
	font-size: var(--small);
}

.modalIcon {
	justify-content: center;
	display: flex;
	position: absolute;
	top: -25px;
	width: calc(100% - 20px);
}

.modalIcon i {
	font-size: var(--xx-large) !important;
	color: var(--black) !important;
	border: solid 3px var(--off-white);
	border-radius: var(--circle);
	padding: 0px !important;
	background: var(--off-white);
}

.lightBtn {
	background: none;
	color: var(--black);
	border: solid 1px var(--black);
}

.goBack button {
	font-size: var(--small);
}

.backBtns {
	margin-top: 20px;
}

.goBack {
	display: flex;
	flex-flow: column;
	text-align: center;
	justify-content: center;
	padding: 20px;
}

/* door info */
.doorInfo {
	position: fixed;
	z-index: 997;
	display: flex;
	width: 100vw;
	justify-content: center;
	bottom: 20px;
	flex-flow: column;
	align-items: center;
}

.comingsoon {
	display: flex;
	top: 0;
}

.doorHead {
	font-weight: var(--heavy);
	font-size: var(--xxx-large);
  font-family: vogue;
  margin-bottom:20px;
  color: var(--secondary);
  text-align: center;
}

.doorHead h3 {
	font-family: vogue;
	color: var(--secondary);
	font-weight: 900;
}

.question {
	display: flex;
	overflow: scroll;
	scrollbar-color: var(--grey);
	scrollbar-width: thin;
	flex-flow: column;
	width: 27%;
	height: 60%;
	margin-right: 30px;
  margin-bottom: 30px;
}

.innerList {
	margin-left: 20px;
}

.saved, .wrong {
	position: fixed;
	left: calc(50% - 125px);
	top: calc(50% - 20px);
	z-index: 1000;
}

.qFrame {
	display: flex;
	position: absolute;
	flex-flow: column;
	width: 100vw;
  overflow:hidden;
	bottom: 0px;
	background: url('../images/hf.webp');
	padding: 20px;
	border-radius: var(--round-small);
	height: 100vh;
	z-index: 1000;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
  justify-content: center;
  align-items: center;
}

.twin {
	background: url('../images/dt.webp');
}

.twin .questions {
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.book {
	background: url('../images/book.webp') !important;
	background-position: top !important;
	background-size: cover !important;
}

.wp {
	background: url('../images/ws.webp') !important;
	background-position: top !important;
	background-size: cover !important;
}

.qDoc {
	background: url('../images/doc.webp') !important;
	background-position: top !important;
	background-size: cover !important;
}

.qLife {
	background: url('../images/life.webp') !important;
	background-position: top !important;
	background-size: cover !important;
}

.banners {
	display: flex;
  gap: 10px;
  justify-content:center;
}

.banners img {
	border: none !important;
	border-radius: 0px !important;
	flex: 1;
  cursor: pointer;
  width: calc(50% - 5px) !important;
}

.banners img:hover {
	border: none;
	border-radius: 0px;
	flex: 1;
  opacity: 0.7;
}

.sItems {
	border-radius: var(--round-small);
	padding: 10px;
	background: var(--off-white);
	transition: var(--fast);
	align-items: center;
	justify-content: center;
	display: flex;
}

.sItems:hover {
	color: var(--off-white);
	background: var(--black);
  transition: var(--fast);
}

.docs {
	background: var(--secondary);
}

.other {
	background: var(--green);
}

.blue {
  background: var(--blue);
}

.orange {
  background: var(--orange);
}

.pink {
  background: var(--pink);
}

.questions .search {
	background: var(--off-white);
	border: none !important;
  font-size: var(--small);
}

.qSearch {
	width: 60%;
	height: 80vh;
}

.qScript {
	height: 70vh;
	display: block;
}


.qSearch h2 {
	font-weight: var(--bold) !important;
	font-family: vogue !important;
}

.qText {
	text-align: justify;
	background: var(--trans);
	padding: 20px;
	border-radius: var(--round-small);
}

.days div {
	border: solid 1px var(--black);
	border-radius: var(--round-small);
}

.days {
	display: flex;
	flex-flow: column;
	gap: 30px;
}

.sun {
	background: var(--trans);
	padding: 20px;
	border-radius: var(--round-small);
}

.days div {
	border: solid 1px var(--black);
	border-radius: var(--round-small);
	display: flex;
	flex-flow: column;
	padding: 20px;
	justify-content: center;
}

.days textarea {
	width: 100%;
}

.searchForm {
	flex-flow: column !important;
	justify-content: center !important;
	align-items: center;
}

.searchItems {
	display: flex;
	flex-flow: row;
	gap: 10px;
	flex-wrap: wrap;
	align-self: start;
  flex: 1 1 70%;
}

.sPage {
	display: flex;
	gap: 25px;
  width:100%;
}

.searchSide {
	background: var(--trans);
	padding: 10px;
	border-radius: var(--round-small);
	flex: 1 1 30%;
}

.searchSide h3 {
	font-family: helvetica;
	font-weight: var(--bold);
}

.sideItem {
	cursor: pointer;
	font-weight: var(--bold);
  transition: var(--fast);
  padding:5px;
}

.sideItem:hover {
	color: var(--secondary);
	transition: var(--fast);
}


.searchForm form {
	margin-bottom: 20px;
}

.questions {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	gap: 20px;
  margin-top:20px;
  justify-content:center;
  color:var(--black);
  padding-bottom:20px;
}

.quest {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.question button {
	width: 60%;
	margin: auto;
  margin-bottom: 10px;
}

.qFrame .menuBtn {
	position: absolute;
	z-index: 1000;
	top: 20px;
	right: 20px;
	background: none;
	border: solid 1px var(--off-white);
	color: var(--off-white);
}

.qFrame .menuBtn:hover {
	background: var(--off-white);
	color: var(--black);
}

.question a {
	color: var(--black);
	font-size: var(--medium);
	font-weight: var(--bold);
	font-family: vogue;
  text-shadow: 2px 2px 7px var(--black);
  transition: var(--fast);
}

.question a:hover {
  color: var(--secondary);
  transition: var(--fast);
}

.order {
	display: flex;
	gap: 10px;
}

.leftOrder, .rightOrder {
	display: flex;
	flex-flow: column;
  gap: 5px;
}

.order5 {
	display: flex;
	flex-flow: column;
  gap:10px;
  width:95%;
}

.order5 .row {
	display: flex;
	gap: 10px;
}

.order5 textarea {
	background: none;
	border: solid 1px var(--black);
	border-radius: var(--round-small);
}

.order5 .col-1 {
	width: calc(33% - 5px) !important;
}

.order5 .col-2 {
	width: calc(67% - 5px) !important;
}

.order5 .textInput::placeholder {
	color: var(--light-grey);
}


.leftOrder span, .rightOrder span {
	padding: 5px;
	border: solid 1px var(--black);
	border-radius: var(--round-small);
}

.wf3 {
  display: flex;
  flex-flow:column;
}

.tf {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: 20px;
}

.qf span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.question .textInput {
	border: solid 1px var(--black);
	border-radius: var(--round-small);
	color: var(--black);
	margin-bottom: 10px;
	width: 100%;
}

.questions ::placeholder {
  color: var(--black);
  font-size: var(--small);
}

.question span {
  cursor: pointer;
  text-align:center;
}

.questionItem {
	text-align: left !important;
}

.radioText {
	font-size: var(--x-large);
	padding-right: 20px;
	font-weight: var(--bold);
}

.question img {
	transition: var(--fast);
	border-radius: var(--circle);
	border: solid 5px var(--black);
	width: 100%;
}

.question img:hover {
	border:solid 5px var(--black);
  border-radius: var(--circle);
  transition: var(--fast);
}

.question h2 {
	text-align: center;
	font-weight: 300;
	font-family: helvetica;
}

.question .bold {
  font-family: vogue;
  font-weight: 900;
}

.question h2, .question h3, .question p, .question span, .question ul, .question li {
  color: var(--black);
}

.question h3 {
	text-align: center;
	font-size: var(--medium);
}

.questions h3 {
	font-family: vogue;
  font-size: var(--large);
}

.questions p {
	font-weight: var(--bold);
}

.selectedQuestions {
	display: flex;
	flex-flow: row;
	gap: 20px;
	flex-wrap: wrap;
}

.selectedQuestions span {
	width:100%;
}

.selectedQuestions img {
	width: 80%;
	margin: auto;
}

.search {
	color: var(--black);
	padding: 12px;
	border: solid 1px var(--off-white);
	border-radius: var(--round-small);
	margin-right: 15px;
  transition: var(--fast);
}

.search:hover {
	color: var(--black);
	transition: var(--fast);
	cursor: pointer;
}

.selectOne li {
	border: solid 1px var(--black);
	padding: 5px;
	width: calc(100% - 10px);
	margin: auto;
	border-radius: var(--round-small);
	cursor: pointer;
  text-align:center;
  transition: var(--fast);
}

.selectOne li:hover, .highlighted {
	background: var(--black);
  color:var(--off-white) !important;
  transition: var(--fast);
}

.selectOne li:hover h3, .highlighted h3{
  color:var(--off-white);
  transition: var(--fast);
}

.selectOne {
	display: flex;
	flex-flow: column;
	gap: 10px;
}

.docInfo {
	border-radius: var(--round-small);
	position: absolute;
	z-index: 1000;
  height:80vh;
}

.docInfo img{
  height:100%;
}

.docInfo h3, .docInfo h2 {
	color: var(--black);
	font-weight: var(--bold);
}

.docBtns {
	display: flex;
	position: absolute;
	gap: 20px;
	justify-content: center;
	width: 100%;
	bottom: -35px;
}

.bdVideo {
	display: flex;
	flex-flow: column;
	gap: 20px;
  justify-content:center;
  align-items:center;
}

.bdVideo .link {
	font-size: var(--medium);
	transition: var(--fast);
	font-weight: var(--bold);
	/* background: var(--off-white); */
	padding: 5px;
	border-radius: var(--round-small);
	width: fit-content;
}

.bdVideo .link:hover {
	color: var(--secondary);
  transition:var(--fast);
}

.script h4 {
	font-size: var(--medium);
	color: var(--black);
	font-weight: var(--bold);
}

.qScript button {
	position: relative;
	top: -45px;
}

.script {
	background: var(--off-white);
	padding: 20px;
	border-radius: var(--round-small);
	display: flex;
	flex-flow: column;
	text-align: justify;
	height: 60vh;
	overflow: scroll;
	padding-bottom: 50px;
}

.script ul {
	padding: 20px;
	padding-top: 0px;
}

.script p {
	margin: 0px;
}

.script li {
	margin-bottom: 5px;
}

.doctors .passItem img {
	border-radius: var(--round-small);
	border: 0px;
}

.doctors .passItem img:hover {
  opacity: 0.7;
}

.passItem {
	display: flex;
	flex: 0 1 45%;
	width: 100% !important;
	flex-flow: column;
}

.passItem .selected, .passItem img:hover {
	border: solid 5px var(--off-white);
  transition: var(--fast);
}

.field {
	flex: 1;
}

.btnDisabled {
	background: var(--grey);
	color: var(--med-grey);
}

.btnDisabled:hover {
	background: var(--grey);
	color: var(--med-grey);
}

.hVideo {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	display: flex;
	flex-flow: column;
	height: 100vh;
	justify-content: space-evenly;
	align-items: center;
  z-index: 998;
}

.hVideo video, .bdVideo video {
	width: 30vw;
}

.hVideo .Submit {
	width: 15vw;
  margin-top: 0px;
}

.selectItem {
	border: solid 5px var(--off-white) !important;
}

.whiteTxt {
  color: var(--off-white);
}

.doorDesc {
	font-weight: var(--light);
	font-size: var(--medium);
	padding-bottom: 10px;
	width: 40vw;
	text-align: center;
	margin-bottom: 20px;
  border-bottom: solid #fafafa44 1px;
  line-height: 1.7;
}

.portals {
	display: flex;
	gap: 10px;
}

.portLink {
	font-size: var(--medium);
	opacity: 0.3;
}

.portLink:hover {
	font-size: var(--medium);
	opacity: 0.7;
}

.portHigh {
  opacity: 0.9;
}

.arrows {
	position: fixed;
	z-index: 998;
	top: 0px;
	width: 100vw;
	display: flex;
	justify-content: space-between;
	height: 100vh;
	align-items: center;
}

.leftArrow, .rightArrow {
	font-size: var(--small);
	color: var(--off-white);
	opacity: 0.3;
	margin: 20px;
	transition: var(--fast);
	cursor: pointer;
	border: solid 1px var(--off-white);
	border-radius: var(--circle);
	padding: 30px;
	width: 40px;
	height: 40px;
	justify-content: center;
	display: flex;
	align-items: center;
}

.leftArrow:hover, .rightArrow:hover {
	color: var(--off-white);
	opacity: 0.8;
	transition: var(--fast);
}

.settings {
	position: relative;
	z-index: 1000;
	bottom: 50px;
	margin-left: 20px;
	display: flex;
  width:fit-content;
  gap:10px;
}

.settings .SubmitTrans, .settings select {
	margin: 0px;
  padding:8px;
}

.settings .SubmitTrans {
  justify-content: center;
  display:flex;
  align-items:center;
  transition: var(--fast);
}

.settings .SubmitTrans:hover {
  background: var(--off-white);
  color:var(--black);
  transition: var(--fast);
}

h1, h2, h3, h4 {
	font-family: helvetica;
  color: var(--white);
}

.navbar {
  justify-content: space-between;
  position:fixed;
  z-index:999;
}

.subscribenav {
  justify-content: right;
}

.navbar ul {
  display:flex;
}

.navbar li {
	margin:auto;
}

.navbar li a {
	padding: 12px;
	justify-content: center;
	align-content: center;
	display: flex;
  width: fit-content;
}

.navbar li button {
	margin: 0px;
  background: var(--off-white);
  color: var(--black);
}

.navbar li button:hover {
	margin: 0px;
  background: var(--off-white);
  color: var(--black);
}

.policy .polCont {
	width: 75vw;
	margin: auto;
  margin-top:30px;
}

.polCont h2, .polCont p, .polCont h1 {
	color: var(--black);
}

.polCont p {
  text-align: justify;
}

.polCont {
  color: var(--black) !important;
  overflow:scroll;
}

.pageTitle {
	height: 300px;
	justify-content: center;
	text-align: center;
	align-content: center;
	align-items: center;
  background:var(--black);
	/* background: url("../images/privacy.jpg"); */
	background-position: center;
	background-size: cover;
}


  .subscribe {
    width: 80vw;
    display: flex;
    position: fixed;
    z-index: 997;
    flex-flow: column;
    gap: 15px;
    border-radius: var(--round-small);
    height: 70vh;
    align-items: center;
    justify-content: center;
  }

  .subType {
    padding: 0px;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    transition: var(--fast);
    color: var(--black);
    cursor: pointer;
    background: var(--off-white);
    border-radius: var(--round-small);
  }

  .subType:hover .subimg {
    color: var(--off-white) !important;
    background: var(--secondary);
    transition: var(--fast);
  }

  .subType:hover span {
    color: var(--secondary);
    transition:var(--fast);
  }

  .subType span {
    flex: 1 1 20%;
    justify-content: center;
    align-items: center;
    display: flex;
    transition:var(--fast);
  }

  .subimg img {
    width: 80px;
  }

  .subHead {
    display: flex;
    justify-content: space-between;
    width: 80%;
    color: var(--off-white);
    font-weight: var(--bold);
    font-family: vogue;
  }

  .nextbtn {
    display: flex;
    justify-content: right;
    width: 80%;
  }

  .nextbtn button {
    margin: 0px;
  }

  .subHead span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    flex: 1 1 20%;
  }

  .subscribe h1 {
    font-family: vogue;
    color: var(--secondary);
    text-align: center;
  }

  .subscribe h2 {
    text-align: center;
  }

  .subType .subimg {
    height: 120px;
    display: flex;
    justify-content: center;
    border-radius: var(--round-small) 0px 0px var(--round-small);
    border: solid 1px var(--secondary);
  }

  .subType .subinfo {
    border: solid 1px var(--secondary);
    border-radius: 0px var(--round-small) var(--round-small) 0px;
    height: 120px;
    padding: 15px;
    font-weight: var(--bold);
    font-family: helvetica;
  }

  .subcheck {
    border: solid 1px var(--secondary);
    height: 120px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .subselect .subimg {
    color: var(--off-white) !important;
    background: var(--secondary);
    transition: var(--fast);
  }

  .subselect span {
    color: var(--secondary);
  }

  .subType .desc, .descHead {
    flex: 1 1 50% !important;
  }

  .subType .desc {
    font-size: var(--small);
  }

/* NEW CSS END */


/* moile max 1024 */
@media screen and (max-width: 1024px) {

  .mobdisabled {
    display:none !important;
  }

  .navbar {
    display: flex;
    width: 100vw;
    padding: 10px;
    flex-flow:column;
    justify-content:center;
  }

  /* new css here */
  .water video {
    position: absolute;
    height: 120vh;
    object-fit: cover;
  }

  .circleVid {
    flex-flow: column;
    overflow: scroll;
    padding-bottom: 60px;
  }

  .circleVid .hoverCircles {
    justify-content: center;
    align-items: center;
    margin: 20px;
    padding: 0px;
  }

  .circleVid .col-1 {
    padding: 20px;
  }

  .circleDesc {
    padding: 20px;
    padding-bottom:80px;
  }

  .doorHead {
    text-align: center;
    font-size: var(--xx-large);
  }

  .doorDesc {
    width: 70vw;
  }

  .aframeCont {
    width: 80vw;
  }

  .aframeCont {
    width: 80vw;
  }

  iframe {
    width:80vw;
  }

  .burger {
    position: fixed;
    right: 15px;
    top: 15px;
  }
  .doorDesc {
    color: var(--secondary);
  }

  .socialNav {
    justify-content: left !important;
  }

  .arrows {
    z-index: 999;
    height: 100px;
    top: calc(50vh - 50px);
  }

  .rightNav {
    padding-top: 80px;
  }

  .question {
    width: 80%;
    height: 60%;
    margin-right: 0px;
  }

  .sPage {
    flex-flow: column;
  }

  .searchForm form {
    width: 90%;
  }

  .searchForm .search {
    width: 100%;
  }

  .searchItems {
    justify-content: center;
  }

  .hVideo video {
    width: 80vw;
  }

  .hVideo .Submit {
    width: 80vw;
    margin-top: 0px;
  }

  .hVideo {
    justify-content: center;
    gap: 20px;
  }

  .subscribe {
    position: absolute;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .subType {
    width: 90vw;
    flex-flow: column;
    height: auto;
    gap: 10px;
  }

  .subType .desc {
    width: calc(90% - 10px);
  }

  .subHead {
    display:none;
  }

  .subType span {
    border: none;
    width: 100%;
    border-radius: 0px;
  }

  .subType .subimg {
    height: 40px;
    padding: 20px;
  }

  /* new css end */

  .navbar ul {
    display: flex;
    margin: 0px;
    flex-flow: column;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-content: center;
  }

  #gdpr-cookie-message {
    z-index: 999;
  }

  /* loading animation */
  /* .loader img {
    width:40% !important;
  } */
  
  .modal {
    width: 100vw;
    height: 90vh;
    top:-20px;
  }

  .col-quart, .col-quart-wrap, .col-1, .col-2, .col-3, .col-1-wrap {
    flex-grow: 1;
    display: flex;
    flex-flow: column;
    width: 100%;
  }

  .wrap {
    flex-flow: column;
  }

  #landing .col-3 {
    margin: 0px;
    line-height: 20px;
    font-size: var(--large);
  }

  #landing .section {
    margin: auto;
    width: 100vh;
    padding: 10px;
  }

  #landing .headings {
    position: inherit;
  }

  #landing {
    justify-content: center;
    display: flex;
  }

  /* new css */
  .socialIcons {
    flex-grow: 1;
    display: flex;
    width: 100%;
    flex-flow:row;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  @media screen and (max-width: 1024px) {
    
  }
}

@media screen and (min-width: 2500) {
  .water video {
    position: absolute;
    width: 190vw;
    object-fit: cover;
  } 
}