/* setup */

:root {
	--colorText: rgb(46, 46, 46);
	--colorBorder: rgb(255, 0, 245);
	--colorBack: rgb(238, 238, 238);
	--colorMenuBack: rgba(238, 238, 238, 0.8);
	--colorHover: rgb(255, 88, 216);
	--pagebackcolor: rgb(0,0,0);
	--footerareacolor: rgba(0, 0, 0, 0.5);
	--footerAreaBorderColor: rgba(0, 0, 0, 0.7);
	--extremeTestColor: rgba(255, 115, 2, 0.5);
	--vH: 100vh;
	--marginspaddingsformain: 18px;
	--paddingformaintext: 36px;
	--bordermainwidth: 18px;
	--topMarginMultCoef: 6.5;
	/* grad colors */
	--1: #ff2400;
    --2: #e81d1d;
    --3: #e8b71d;
    --4: #e3e81d;
    --5: #1de840;
    --6: #1ddde8;
    --7: #2b1de8;
    --8: #dd00f3;
	
	}

	
/* global */

body {
	background-color: var(--pagebackcolor);
	}

h1 {
	/*  */
	color: var(--colorText) !important; 
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 6em;
	}
	
	

p {
	font-family: "proxima-nova", sans-serif;
	color: var(--colorText) !important; 
	font-weight: 300;
	font-style: normal;
	font-size: 1.1em;
	}

/* HEADERS */

.conceptHead{
	font-family: "carol-gothic", sans-serif !important;
}

@media screen and (max-width: 575.98px) { 
	 .conceptHead {
	 font-size: 4em !important; 
 }  
   }

.firstConcept::first-letter {
	  font-family: "carol-gothic", sans-serif !important;
	  font-size: 5em; 
	  line-height: 0.9em; 
	  float: left; 
	  margin-right: 5px; 
  }

.missionHead{
	font-family: "lust-fine", serif;
	font-weight: 100;
	font-style: italic !important;
	font-size: 5.5em; 
	margin-top: 0.15em;
	margin-bottom: 0.08em;
}

@media screen and (max-width: 575.98px) { 
	 .missionHead {
	 font-size: 4em !important; 
 }  
   }

.firstMission::first-letter {
	  font-family: "lust-fine", sans-serif !important;
	  font-size: 5em; 
	  font-style: italic !important;

font-feature-settings: "salt";	  
line-height: 0.9em; 
	  float: left; 
	  margin-right: 5px; 
  }	

.brandHead{
	font-family: "brands_kidnappedregular", sans-serif;
}

@media screen and (max-width: 575.98px) { 
	 .brandHead {
	 font-size: 4em !important; 
 }  
   }

.firstBrand::first-letter {
	  font-family: "brands_kidnappedregular", sans-serif !important;
	  font-size: 5em; 
	  line-height: 0.9em; 
	  float: left; 
	  margin-right: 5px; 
  }	

.collectionHead{
	font-family: "rogue-sans", sans-serif;
	font-size: 5.8em !important;
	margin-top: 0.07em;
}

@media screen and (max-width: 575.98px) { 
	 .collectionHead {
	 font-size: 4em !important; 
 }  
   }



.firstCollection::first-letter {
	  font-family: "rogue-sans", sans-serif !important;
	  font-size: 5em; 
	  line-height: 0.9em; 
	  float: left; 
	  margin-right: 5px; 
  }	
  
  
  .heavy{
	  font-weight: 700;
  }	  
  .italic{
	font-style: italic;
  }
  
  .superScript{
	  font-size: 0.7em;
	 vertical-align: 0.5em;
  }

.endSign {
	font-family: "dalliance-flourishes", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--colorText) !important; 
	font-size: 6em;
	text-align: center;
	}
	
	/* TEXT LOGO STYLES  */
	
	.b {
	   font-family: "cabazon", serif !important;
	   font-weight: 400;
	   font-style: normal;
	   font-size: 1.5em!important;
	 }
	 
	 .V {
	   font-family: "lust-fine", serif !important;
	  font-weight: 100!important;
	   font-size: 1.6em!important;
	   letter-spacing: -0.05em;
	   margin-left: -0.28em;
	   
	 }
	 
	 .V-first{
		 font-feature-settings: "salt";
	 }
	
	a {
		text-decoration: underline;
		font-style: normal;  
		font-weight: 400 ;
		color: var(--colorBorder); 
	}
	
	a:hover{
		color: var(--colorHover) !important; 
	}
	
	@media screen and (max-width:991.98px){
	p {
		  font-size: 1em;
	  }
	  h1 {
		 font-size: 5em; 
	  }
	  .endSign {
		font-size: 5em;  
		  }
	  	}

/* custom index styles */
 
 #noise-canvas{
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 z-index: 999999999;
	 mix-blend-mode: multiply;
	 }
	 
	 
	 
 .overall {
	 position: absolute;
	  /* width: 321px; 
	  height: 700px;  */
	 z-index: 999;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
		 }
		 
	
	   @media screen and (max-width: 575.98px) { 
		 .overall {
		 width: 160px; 
		 height: 349px;  
	 }  
	   }
	
	   @media screen and (min-width: 576px) and (max-width: 767.98px) {
		 .overall {
			  width: 220px; 
			  height: 479px;  
		  }  
	   }
	   
	   @media screen and (min-width: 768px) and (max-width: 991.98px) {
		.overall {
		width: 280px; 
		height: 610px; 
		  }
	   }
	   
	   @media screen and (min-width: 992px) and (max-width: 1199.98px) {
		 .overall {
		 width: 321px; 
		 height: 700px; 
		   }
	   }
	   
	   @media screen and (min-width: 1200px) {
		 .overall {
		  width: 321px; 
		  height: 700px; 
			}
	   }
	   
	  
		 
	.coverLogo{
		position: absolute !important;
		z-index: 999999; 
		width: 100%;
		height: calc(var(--marginspaddingsformain)*var(--topMarginMultCoef)) !important;	 
		background-image: url('/imgs/logo-full-light-temp.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 440px auto;
		
	}	
	
	@media screen and (max-width: 575.98px) { 
		 .coverLogo {
		 background-size: 280px auto; 
	 }  
	   }
	
	   @media screen and (min-width: 576px) and (max-width: 767.98px) {
		 .coverLogo{
			background-size: 390px auto; 
		  }  
	   }
	   
	   @media screen and (min-width: 768px) and (max-width: 991.98px) {
		.coverLogo {
		background-size: 410px auto;
		  }
	   }
	
	 .bottom-div {
	   position: absolute;
	   left: 0;
	   text-decoration-color: var(--colorBack)!important;
	   bottom: 0;
	   width: 100%;
	   
	   padding: 0px;
	   text-align: center;
   }
	   
	   .click {
	   font-family: "lust-fine", serif !important;
	   font-weight: 100!important;
	   font-style: italic!important;
	   font-size: 1.5em!important;
	   
	   }

/* MINT POPUP */


 .mintDiv{
	   width: 100%;
	   height: 100%;
	   position: fixed;
	   visibility: visible;
	   z-index: 9999999997 !important; 
	   background-color: var(--colorMenuBack); 
	  -webkit-backdrop-filter: blur(5px);
	   backdrop-filter: blur(5px);
	 
   }
   
 .mintContentWrapper {
	position: absolute;
	/* background-color: var(--extremeTestColor); */
	z-index: 99999999999;
	font-family: "rogue-sans", sans-serif !important;
	
	top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	width: 100%;
 }

#confetti {
	position: absolute;
	width: 100%;
	height: 100vH;
	z-index: 9999999996 !important;
}
/* SOLD-OUT POPUP */

.soldOutWrapper {
	width: 200px;
	height: 210px;
	/* background-color: var(--extremeTestColor); */
	position: fixed;
	z-index: 99999999999 !important;
	overflow: hidden;
}

.marquee {
  width: 800px;
  height: 70px;
  background-color: var(--colorBorder);
  position: absolute;
  transform: rotate(-45deg);
  font-family: "rogue-sans", sans-serif !important;
  color: var(--colorBack) !important;
  font-size: 50px;
  margin-top: -140px;
  margin-left: -150px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  /* height: 20px; */
  position: absolute;
  overflow: hidden;
  animation: marquee 15s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}



/* BRAND SVG LOGO ANIMATION (BRAND PAGE ONLY) */
	   
	   
	   
	   .blackDiv{
		   width: 100%;
		   height: 100%;
		   position: fixed;
		   visibility: visible;
		   z-index: 9999999997 !important; 
		   background-color: var(--colorText);
		   opacity: 1;
		   animation: blackDivOut 1.5s linear 5s forwards;
	   }
	   
	   @keyframes blackDivOut {
		   100% {
		   opacity: 0;	
		   }
	   } 
	   
	   
	   path {
		 stroke-width: 0.015em ;
		 stroke: var(--colorBack);
		 animation: path-hide 2s linear 2s;
	   }
	   
	   #logoWrapper{
		 visibility: visible;
		 
	   }
	   
	   
	   #logo {
		 position: absolute;
		 top: 50%;
		 left: 50%;
		 transform: translate(-50%, -50%);
	   
		 width: 40%;
		 height: 40%;
	   
		 fill: none;
		 animation: fill 1.5s ease forwards 2.4s; 
	   }
	   
	   
	   .c:nth-child(1) {
		 stroke-dasharray: 179;
		 stroke-dashoffset: 179;
		 animation: line-anim 2s ease forwards 1.2s;
	   }
	   
	   .c:nth-child(2) {
		 stroke-dasharray: 418;
		 stroke-dashoffset: 418;
		 animation: line-anim 3s ease forwards 0s;
	   }
	   
	   @keyframes line-anim {
		 to {
		   stroke-dashoffset: 0;
		 }
	   }
	   
	   @keyframes fill {
		 from {
		   fill: transparent;
		 }
		 to {
		   fill: var(--colorBack);
		 }
	   }
	   
/* https://bennettfeely.com/ztext/ */


/* BRAND TEXT FULL LOGO ANIMATION (BRAND PAGE ONLY) */


.blackDivToo{
		width: 100%;
	   height: 100%;
	   position: fixed;
	   visibility: visible;
	   z-index: 9999999997 !important; 
	   background-color: var(--colorText);
	   color: var(--colorBack);
	   display: flex; 
	   justify-content: center; 
	   align-items: center; 
}

#logoWrapperToo{
	 transform: scale(5);
	
} 




svg text{
  stroke: white;
  font-size: 100px;
  font-weight: 700;
  stroke-width: 0.005em;
  animation: animationEffect 5s infinite 1s alternate;
}

@keyframes animationEffect{
  0%{
	stroke-dasharray: 0 50%;
	stroke-dashoffset: 20%;
  }
  100%{
	stroke-dasharray: 50% 0;
	stroke-dashoffset: -20%;
  }
}

/* main content */

/* menu */
.nav-link.active{
	color: var(--colorBorder) !important;
}


@media screen and (min-width:991.98px){
  .nav-item {
  line-height:80px;
  }
}

#divForLogo {
	padding: var(--marginspaddingsformain);
	background-color: var(--colorMenuBack);
	height: calc(var(--marginspaddingsformain)*var(--topMarginMultCoef));	
	background-image: url('/imgs/logo-full-temp.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 440px auto;
	transition: height 0.3s ease, background-size 0.3s ease;
}

.scrolled {
	height: calc(var(--marginspaddingsformain)*var(--topMarginMultCoef) / 1.5) !important;	
	background-size: 300px auto !important;
}

@media screen and (max-width: 991.98px) {
	#divForLogo {
	visibility: hidden !important;
	height: 0px !important;
	margin-top: calc(var(--marginspaddingsformain)*(-2));
		}
}

.divUnderLogo {
	position: absolute;
	width: 30%;
	height: 2px;
	background-color: var(--colorText);
	left: 50%;
	transform: translate(-50%);
	margin-top: -2px;

}

@media screen and (max-width: 991.98px) {
	.divUnderLogo {
	width: 70%;
	height: 0px;
	}
}



.navCustom {
	position: fixed;
	height: calc(var(--marginspaddingsformain)*var(--topMarginMultCoef)) !important;
	z-index: 999999;
	left: 50%;
	transform: translate(-50%);
	padding-left: 0px!important;
	padding-right: 0px!important;
	
	}
	
	@media screen and (max-width: 991.98px) {
	  .navCustom {
		height: calc(var(--marginspaddingsformain)*4) !important;
		padding-left: 0px!important;
		padding-right: 0px!important;
	  }
	  
	  .backColorForPullDownMobileMenu {
		  background-color: var(--colorMenuBack);
		  
	  }
	}
	
	@media screen and (min-width: 991.98px) {
			.backColorForPullDownMobileMenu {
			background-color: var(--colorMenuBack);
		}
	}
	
.conceptStyle {
	font-family: "carol-gothic", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--colorText) !important; 
	font-size: 2.5em;
	text-align: center;
	}	
	
.missionStyle {
	font-family: "lust-fine", serif;
	font-weight: 100;
	font-style: italic;
	color: var(--colorText) !important; 
	font-size: 1.9em;
	text-align: center;
	margin-top: 0.17em;
	}
	
.brandStyle {
	font-family: "brands_kidnappedregular";
	color: var(--colorText) !important; 
	font-size: 3em;
	text-align: center;
	margin-top: 0.1em;
	/* padding-left: -0.5em; */
	}
	
.collectionStyle {
	font-family: "rogue-sans", sans-serif;
	font-weight: 500;
	color: var(--colorText) !important; 
	font-style: normal;
	font-size: 2em;
	text-align: center;
	margin-top: 0.18em;
}	
.nav-item a:hover {
  color: var(--colorBorder) !important;
  transition: 0.5s !important;  
  }
  
.navbar-toggler{
	border-radius: 0px !important;
	border-width: 0px !important;
}
.navbar-toggler-icon {
	font-size: 1.2em;
	margin-top: 0.4em;
	}

/* page background */

.tunnel-div {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
	}



/* CONTENT AREA */

.toptommarginformain {
	margin-top:  calc(var(--marginspaddingsformain)*var(--topMarginMultCoef)*2) !important;
	}
	
	@media (max-width: 991.98px) {
	  .toptommarginformain {
		margin-top: calc(var(--marginspaddingsformain)*4) !important;
	  }
	}
	
.bottommarginformain {
	margin-bottom:  var(--marginspaddingsformain)	!important;
	}
	
.borderformain {
	border-width: var(--bordermainwidth) !important;
	border-color: var(--colorBorder) !important;
	}
	
	
		
	@media screen and (max-width: 767.98px) {
	  .borderformain {
		border-width: calc(var(--bordermainwidth)/1.3) !important;
	  }
	}
	
.leftmarginformain {
	margin-left: var(--marginspaddingsformain)!important;
	}
	
.rightpaddingformain {
	padding-right: calc(var(--marginspaddingsformain)*2) !important;
	position: relative;
	}
	
.paddingformaintext {
	padding-right: var(--paddingformaintext);
	padding-left: var(--paddingformaintext);
	}
	
	@media screen and (max-width: 767.98px) {
	  .paddingformaintext {
		padding-right: calc(var(--paddingformaintext)/2);
		padding-left: calc(var(--paddingformaintext)/2);
	  }
	}
	 
.row {
	background-color: var(--colorBack);
	}

/* image stripe */

.randomImgsWrapper {
   overflow: hidden;
 }

 #randomImgsContainer {
   width: 100%;
   display: flex;
   position: relative;
   overflow: visible;
   
 }
 
 #randomImgs {

   display: flex;
   overflow: visible;
  
   flex-wrap: nowrap;
 }
 
 #randomImgs img {
   height: 100%;
   flex-shrink: 0;
	}
 
 @media screen and (max-width:991.98px){
   #randomImgs  {
   height: 298px;
   }
   }
   
   @media screen and (max-width: 767.98px) {
  #randomImgs {
	height: 299px;
  }
   }
   
   @media screen and (min-width: 992px) and (max-width: 1199.98px) {
  #randomImgs {
	height: 300px;
  }
   }
   
   @media screen and   (min-width: 1199.98px) {
   #randomImgs {
	 height: 400px;
   }
	}


 #randomImgs img {
   height: 100%;
   flex-shrink: 0;
 }
 
/*  FOOTER */

.footerText {
	font-family: "proxima-nova", sans-serif;
	color: var(--colorBack) !important; 
	font-weight: 300;
	font-style: normal;
	font-size: 1em;
	}
	
	@media screen and (max-width: 767.98px) {
	  .footerText {
	  font-size: 0.8em;
	  padding-left: 0px!important;
	  }
  }

.footer-area  {
	background-color: var(--footerareacolor)!important;
	height: 160px !important;
	position: relative;
	/* padding-bottom: -10px !important; */
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	z-index: 2;
	}
	
	@media screen and (max-width: 767.98px) {
		  .footer-area {
		  height: 120px !important;;
		  }
	  }

.footerLine-area {
	background-color: black;
	height: 40px !important;
	position: relative;
	padding-left: calc(var(--marginspaddingsformain) + var(--paddingformaintext));
}
@media screen and (max-width: 767.98px) {
	  .footerLine-area {
	  padding-left: calc(var(--marginspaddingsformain) + var(--bordermainwidth));
	  }
  }

.footerLeftPadding {
	padding-left: calc(var(--marginspaddingsformain) + var(--paddingformaintext) + var(--bordermainwidth));
	}
	@media screen and (max-width: 767.98px) {
		  .footerLeftPadding {
		  padding-left: var(--marginspaddingsformain);
		  }
	  }

.footerTopPadding {
	padding-top: var(--paddingformaintext);
	}
	
	@media screen and (max-width: 767.98px) {
		  .footerTopPadding {
		  padding-top: calc(var(--paddingformaintext)/2);
		  }
	  }

.pixi{
	bottom: 0px!important;
	margin-bottom: -7px!important;
	z-index: 9999999;
	
	
}

.venusdiv {
	width: 185px;
	height: 408px;
	position:  absolute; 
	/* z-index: 10; */
	bottom: -40px;
	right: 100px;
	z-index: 9999999;
	}
	
	@media screen and (max-width: 767.98px) {
	  .venusdiv {
		width: 130px;
		height: 287px;
		position:  absolute; 
		bottom: -40px;
		right: 24px;
		}
	  }
	
	#brands{
		width: 40px; height: 40px;
		background-image: url('/imgs/brands-sprite.svg'); 
		background-repeat: no-repeat;
		background-size: auto 40px;
		margin-right: 16px; margin-bottom: 10px!important;
	}
	
	
	
	@media screen and (max-width: 443.98px) {
		#brands {
			width: 30px; height: 30px;
			background-image: url('/imgs/brands-sprite.svg'); background-repeat: no-repeat;
			background-size: auto 30px;
			margin-right: 7px; margin-bottom: 10px!important;
		}
	}
	
	.os {
		background-position: -126px 0px;
	}
	@media screen and (max-width: 443.98px) {
	.os {
		background-position: -94px 0px;
	}
}

	.ether {
		background-position: 0px 0px;
	}
	@media screen and (max-width: 443.98px) {
	.ether {
		background-position: 0px 0px;
	}
}
		.twi {
				background-position: -84px 0px;
			}
			@media screen and (max-width: 443.98px) {
			.twi {
				background-position: -63px 0px;
			}
		}
		
		.discord {
				background-position: -168px 0px;
			}
			@media screen and (max-width: 443.98px) {
			.discord {
				background-position: -126px 0px;
			}
		}
		.insta {
				background-position: -42px 0px;
			}
			@media screen and (max-width: 443.98px) {
			.insta {
				background-position: -31px 0px;
			}
		}
	#brandButtons {
		padding-left: 0px!important;
		margin-right: 16px!important;
		margin-bottom: 18px!important;
		width: 40px;
		height: 40px;
		
	}
	
	#brandButtons:hover #brands {
	  
	  background-image: url('/imgs/brands-sprite-pink.svg'); 
	}
	
	@media screen and (max-width: 443.98px) {
		#brandButtons {
			margin-right: 7px!important;
			margin-bottom: 10px!important;
			width: 30px;
			height: 30px;
		}
	}
	
	
.footerRowSpecial {
	background-color: rgba(0,0,0,0);
	padding-left: calc(var(--marginspaddingsformain) - var(--paddingformaintext) - var(--bordermainwidth));
	}
	
@media screen and (max-width: 767.98px) {
	.footerRowSpecial {
		padding-left: var(--marginspaddingsformain)!important;
	}
}

/* BACKGROUND */

.posPattern{
	position: absolute !important;
	z-index: 2; 
	width: 100%;
	height: 100% !important;

	background-image: url('/imgs/neg-pattern.svg');
	background-repeat: repeat;
	background-position: center;
	background-size: 100px auto;
	
}	

.box{
	height:100%;
	width:100%;
  }

.gradDynamic{
	position:relative;
  }
  
  .gradDynamic:after, .gradDynamic:before{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	content:"";
	z-index:-1;
  }
  
  .gradDynamic:after{
	background: radial-gradient(circle, var(--1), var(--2), var(--3), var(--4), var(--5), var(--6), var(--7), var(--8), var(--1), var(--2), var(--3), var(--4), var(--5), var(--6), var(--7), var(--8),var(--1), var(--2), var(--3), var(--4), var(--5), var(--6), var(--7), var(--8));
	background-size:100%;
	animation:colorSpin 2s linear infinite;
  }
  
  .gradDynamic:before{
	background-color: var(--colorText);
	
  }
  
  @keyframes colorSpin {
	25%{
		background-position:0 100%
	}
	50%{
		background-position:100% 100%
	}
	75%{
		background-position:100% 0
	}
	100%{
		filter:hue-rotate(360deg)
	}
  }
 
  /* PRELOADER */
  
  .preloader {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgb(0,0,0);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999999999999999; 
  }
  
 #css-preloader{
   position:relative;
   width: 100%;
   margin: 10% 0 0 45%;
 }
 #css-preloader span{
   display: block;
   bottom: 0px;
   width: 5px;
   height: 10px;
   background: #e43632;
   position: absolute;
   animation: preloader_1 2.25s  infinite ease-in-out;
 }
  
 #css-preloader span:nth-child(2){
   left: 11px;
   animation-delay: .2s;
 }
 #css-preloader span:nth-child(3){
   left:22px;
   animation-delay: .4s;
 }
 #css-preloader span:nth-child(4){
   left:33px;
   animation-delay: .6s;
 }
 #css-preloader span:nth-child(5){
   left:44px;
   animation-delay: .8s;
 }
 #css-preloader span:nth-child(6){
   left: 55px;
   animation-delay: 1s;
 }
 #css-preloader span:nth-child(7){
   left: 66px;
   animation-delay: 1.2s;
 }
 #css-preloader span:nth-child(8){
   left: 77px;
   animation-delay: 1.4s;
 }
 #css-preloader span:nth-child(9){
   left: 88px;
   animation-delay: 1.6s;
 }
 @keyframes preloader_1 {
 0% {
   height: 10px;
   transform: translateY(0px);
   background: #fdcf01;
  }
   
 25% {
   height: 60px;
   transform: translateY(15px);
   background: #4bb846;
 }
 50% {
   height: 10px;
   transform: translateY(-10px);
   background:#2988dd;
 }  
 100% {
   height: 10px;
   transform: translateY(0px);
   background: #e43632;
   }
 }