/*------------------------------------VARIABLES-----------------------------------------*/

:root{

	--white:#ffffff;
	--blue300:rgba(0, 224, 255, 1);
	--blue300-o5:rgba(0, 224, 255, 0.5);

	--blue900:#001973;


	--grad01: linear-gradient(57deg, var(--blue300), var(--blue900));
	--grad02: linear-gradient(57deg, var(--blue300), var(--white));

	--grad03: linear-gradient(57deg, var(--blue300), #8cd4ea, var(--blue300), var(--blue900));


	--grad-white-h: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	--grad-white-v: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));

	--grad-white-v2: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	--grad-white-v3: linear-gradient(270deg, #ffffff 83%, transparent 100%);
}


/*------------------------------------general-----------------------------------------*/
body, html{
	margin:0;
	padding:0;
	overflow-x: hidden;
}	

*{
	margin:0;
	padding:0;
	border:0;
}

h1, h2, h3, h4, h5, h6, p, a{
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
}

a{
	text-decoration:none;
}


ul {
    list-style-type: none;
}

li{
	text-decoration: none;
}

input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
}


/*------------------------------------GLOBALS-----------------------------------------*/

.pageSection1{
	position:relative;
	width:100vw;
	height: 100vh;
	/*min-height:900px;*/
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	/*display: flex;*/
}

.pageSection2{
	position:relative;
	width:100vw;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
}

.img_wrpr,
.vid_wrpr{
	position:relative;
	width:100%;
	height: 100%;
	overflow: hidden;
}

.fitIMG,
.fitVid{
	position:relative;
	width:100%;
	height:100%;
	margin: 0% 0 0 0;
	object-fit: cover;
    object-position: center center;
}

.sq{
	aspect-ratio: 1/1;
}

/*------------------------------------fonts-----------------------------------------*/

@font-face{
    font-family:"OldLondon";
    font-style:normal;
	font-weight:normal;
    src: url(/fonts/OldLondon.ttf) format('truetype');
}

@font-face{
    font-family:"fellPica";
    font-style:normal;
	font-weight:normal;
    src: url(/fonts/FellPica-Regular.ttf) format('truetype');
}

/*.ADOBEFONTS{
	font-family: roc-grotesk,sans-serif;
	font-weight: 600;
	font-style: normal;
}*/

.reg{
	font-family: "roobert_reg";
	position:relative;
/*	letter-spacing: -0.12rem;*/
	-webkit-font-smoothing: antialiased;
}

.bodyCopy01{
	font-family: "roobert_reg";
	font-size: 1rem;
	line-height: 1rem;
	color: var(--black);
}


/*------------------------------------ANIMS-----------------------------------------*/

@keyframes glow1 {	
	0%{opacity: 1; transform:rotate(0deg);}
	100%{opacity: 0.3; transform:rotate(360deg);}	
}


@keyframes glowMobile {	
	0%{background-size:50% 50%;}
	100%{background-size:100% 200%;}
}


.mobileAnim{
	animation: glowMobile 4000ms linear infinite alternate;
}


/*------------------------------------NAV-----------------------------------------*/




/*------------------------------------ENTRY-----------------------------------------*/

#hpEntrySection{
	background-image: var(--grad01);
	height:120vh;
	overflow: hidden;
}

.mainCon{
	position:relative;
	width:100%;
	height:100%;
}

.BGMain{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
}

.bgIMG{
	position:relative;
	width:auto;
	height:100%;
	opacity: 0.33;
}

.elsCon{
	position:absolute;
	width:100%;
	height:100%;
	top: 0;
	z-index: 2;
	pointer-events: none;
	/*display: none;*/
}

.navCon{
	position:fixed;
	width:100%;
	top: -2px; 
	background-color:#ffffff29;
	backdrop-filter: blur(10px);
	z-index: 1;
}

.navIMG{
	position:relative;
	width:100%;
}

.vertConIMG{
	position:absolute;
	width:44%;
	height:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.svgWrapper{
	position:absolute;
	width:88%;
	height:auto;
	top:-10%;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.mainWrpr{
	position:absolute;
	width:fit-content;
	height:fit-content;
	top:7vw;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.shapeMain{
	position:relative;
	width:72vw;
	height:fit-content;
	/*aspect-ratio: 20 : 23;*/
	top:-10vw;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.mainShape{
	position:relative;
	width:100%;
	height: fit-content;
	top: 0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	opacity: 0.44;
}

.maskCon{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

.bordersMain{
	position:absolute;
	width:100%;
	height:100%;
    top: -0%;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-position: 50% 50%;
	-webkit-clip-path: url(#my-clip-path);
	clip-path: url(#my-clip-path);
	background: var(--grad03);
}

.spotlight{
	position:absolute;
	width:100%;
	height:100%;
    top: -0%;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-image: radial-gradient(at 50% 50%, #fff 50px, rgba(255,255,255,0) 50%);
	background-position: 50% 50%;
	-webkit-clip-path: url(#my-clip-path);
	clip-path: url(#my-clip-path);
	/*background: var(--grad03);*/
}

#maskIMG{
	position:relative;
	width:100%;
	height:auto;
}

.comIMGMask{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	clip-path:url(#comMaskClipper01);
	-webkit-clip-path:url(#comMaskClipper01);
    overflow: hidden;
}





.svg01 {
  position: absolute;
  width: 0;
  height: 0;
}
/*.spotlight {
	position: absolute;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background: #fff;
  background-size: cover;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
}*/








.shapesWrpr{
	position: absolute;
    width: 90%;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transform: scale(1.33); */
    /*opacity: 0.8;*/
}

.shapesCon{
	position: relative;
    width: 100%;
    height: auto;
    margin: 0;
	aspect-ratio: 0.87/1;
	/*background-color:rgba(0,0,0,0.12);*/
}

.rhomCon{
	position:absolute;
	width:100%;
}

.upperCon{
	left: 2%;
}

.leftCon{
	transform: rotate(-120deg);
    bottom: 24%;
    left: -48%;
}

.rightCon{
	transform: rotate(120deg);
    bottom: 13%;
    right: -26%;
}


.upRhom01{
	position: relative;
    width: 48%;
    height: auto;
    margin: 13.9% 0 0 14.2%;
    aspect-ratio: 9 / 3;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-image: linear-gradient(to right, #fff, var(--blue300)) 1;
    /*background-color: rgba(255, 255, 255, 0.33);*/
    transform: skew(-60deg, 30deg);
    z-index: 2;
}

.innerWrpr{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
    overflow: hidden;
}

.upRhom01 .inner{
	position:relative;
	width:200%;
	height: 200%;
	opacity: 0.44;
}

.upperCon .upRhom01 .shimmer,
.rightCon .upRhom01 .shimmer{
	position: absolute;
    width: 20%;
    height: 4px;
    /*right: 0%;*/
    margin: auto;
    border-radius: 50%;
    opacity: 1;
}


.upperCon .shimmer-upper{
	top: -3px;
}

.upperCon .shimmer-lower{
 bottom: -3px;
}

.rightCon .upRhom01 .shimmer{
	display: none;
}

.leftCon .upRhom01 .shimmer{
	position: absolute;
    width: 8px;
    height: 30%;
    right: -8px;
    margin: auto;
    border-radius: 50%;
    opacity: 1;
}


.upperCon .upRhom01 .shimmer{
	left: 0%;
}

.rightCon .upRhom01 .shimmer{
	right: 0%;
}

.shimmerBG{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
    /*filter: blur(3px);*/
	/*border-radius: 40px;*/
    overflow: hidden;
    /*background-color: rgba(255, 255, 255, 0.33);*/
}

.upperCon .shimmerBG,
.rightCon .shimmerBG{
    /*transform: skewX(40deg);*/
}

/*.leftCon .shimmerBG{
    transform: skewX(0deg);
}*/

.shimmerBG-grad{
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	/*border-radius: 40px;*/
	background: #ffffff;
	/*background: radial-gradient(at 50% 50%, #ffffff 3%, transparent 90%);*/
	/*filter: blur(2px);*/
}

.upperCon .shimmerBG-grad,
.rightCon .shimmerBG-grad,
.leftCon .shimmerBG-grad{
	width:100%;
	height:70%;
	/*transform: skewX(60deg);*/
}

/*.leftCon .shimmerBG-grad{
	width:70%;
	height:100%;
	transform: skewX(0deg);
}*/

.leftCon .shimmerBG-grad,
.upperCon .shimmerBG-grad{
	left:-50%;
}

.rightCon .shimmerBG-grad{
	right:-50%;
}

/*.leftCon .shimmerBG-grad{
	bottom:-50%;
}*/

.shimInner{
	position:absolute;
	width:100%;
	height:1px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:var(--grad-white-v3);
	/*box-shadow: 0 0px 5px 3px #fff;*/
    transform: skewX(60deg);
    display: none;
}


.shimDot{
	position: absolute;
	margin: auto;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	filter: blur(2px);
	display: none;
}

.upperCon .shimDot,
.rightCon .shimDot,
.leftCon .shimDot{
	width: 10px;
	height: 5px;
    top: 0;
    bottom: 0;
}

.upperCon .shimDot{
    left: -5%;
}

.rightCon .shimDot{
    right: -5%;
}

.leftCon .shimDot{
    left: -5%;
}

/*.leftCon .shimDot{
	width: 10px;
    height: 5px;
    right:15%;
    bottom: 10%;
    left: 0;
}
*/
.shimDot-inner{
	position: absolute;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
    filter: blur(0px);
    opacity: 0;
    /*animation: glow1 3000ms linear infinite;*/
}

.upperCon .shimDot-inner,
.rightCon .shimDot-inner,
.leftCon .shimDot-inner{
	width: 370%;
	height: 78%;
	left: -151%;
	transform: rotate(70deg);
}

/*.leftCon .shimDot-inner{
	width: 710%;
    height: 48%;
    left: -321%;
    transform: rotate(24deg);
	opacity: 1 !important;
}*/


.upRhom02{
	position: absolute;
    width: 27.5%;
    height: auto;
	top: 0;
    margin: 8.1% 0 0 0;
    aspect-ratio: 4 / 3;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-image: linear-gradient(to left, #fff, var(--blue300)) 1;
    background-color: rgba(255, 255, 255, 0.33);
    background-color: rgba(0, 224, 255, 0.44);
    opacity: 1;
    transform: skew(0deg, -30deg);
    overflow: hidden;
}

.upRhom02 .inner{
	position:relative;
	width:200%;
	height: 200%;
	opacity: 0.66;
}


.upperCon .upRhom01 .inner{
	left:0%; 
		background:var(--grad-white-h);
}

.upperCon .upRhom02 .inner{
	left:-30%;
	background:var(--grad-white-h);
}


.rightCon .upRhom01 .inner{
	left:-90%;
	background:var(--grad-white-h);
}

.rightCon .upRhom02 .inner{
	top:-100%;
	background:var(--grad-white-v);
}


.leftCon .upRhom01 .inner{
	top:-30%;
	background:var(--grad-white-v);
}

.leftCon .upRhom02 .inner{
	left:-100%;
	background:var(--grad-white-h);
}

.bottogmGrad{
	position:absolute;
	width:100%;
	height:20vh;
	bottom:-1px;
	left:0;
	right:0;
	margin:auto;
	background: var(--grad-white-v2);
}

/*-----------------------------------FOOTER-----------------------------------------*/

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



@media (max-aspect-ratio: 1/1) {

.mainWrpr {
    top: 0;
}
.shapeMain {
    width: 120vw;
    top: -12vw;
    left: -10vw;
    opacity: 0.8;
}

}