@charset "utf-8";
/* CSS Document */

html, body {
		width: 100%;
		height: 100%;
		border: 0px;
		margin: 0px;
		padding: 0px;
	}
	
	article {
		min-height: 100%;
		display: grid;
		grid-template-rows: auto 1fr auto;
		grid-template-columns: 100%;
		padding-left: 20px;
		padding-right: 20px;
		max-width: 1064px;
		margin: auto;
	}
	
	/* header */
	
	header > div {
		border-bottom: 1px solid white;
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	#nav-elements {
		min-width: 630px;
		display: flex;
		justify-content: space-between;
		/*justify-content: flex-end;*/
		flex-direction: row;
	}
	
	#nav-elements a, #nav-elements span {
		color: #A4A4A2;
		font-family: 'Kallisto W05 Medium';
		text-transform: uppercase;
		letter-spacing: 4px;
		text-decoration: none;
		transition: 0.5s color;
		font-size: 0.8rem;
		padding-top: 5px;
	}
	
	#nav-elements a:hover {
		color: white;
	}
	
	#logo {
		/*color: white;
		font-family: 'Kallisto W05 Medium';
		text-transform: uppercase;
		letter-spacing: 4px;*/
	}

	#logo img {
		display: block;
		width: 136px;
	}
	
	#mobilemenuicon {
		display: none;
	}
	
	@media only screen and (max-width: 840px) {
		header > div {
			display: block;
		}
		
		#mobile-menu-container {
			display: flex;
			justify-content: space-between;
			width: 100%;
		}

		#mobilemenuicon {
			display: flex;
			flex-direction: column;
			width: 32px;
			height: 32px;
			border: 1px solid white;
			cursor: pointer;
			position: relative;
			justify-content: center;
			align-items: center;
		}
		
		#mobilemenuicon span {
			width: 16px;
			height: 2px;
			background-color: white;
			display: block;
			margin: 2px 0px;
			transition: transform 0.4s;
		}
		
		.m1open {
			transform-origin: center;
			transform: rotate(45deg)  translate(2px, 2px);
		}
		
		.m2open {
			display:none !important;
		}
		
		.m3open {
			transform-origin: center;
			transform: rotate(-45deg)  translate(2px, -2px);
		}
		
		#nav-elements {
			display: block;
			max-height: 0px;
			overflow: hidden;
			transition: 0.5s max-height;
		}
		
		#nav-elements a {
			display: block;
		}
		
		#nav-elements span {
			display: block;
			margin-bottom: 15px;
		}
		
		#logo {
			margin-bottom: 20px;	
		}
	}

	.disabled {
		color: #403E3D !important;
		cursor: default;
	}




	/* end header */
	
	/* footer */
	
	
	@media only screen and (min-width: 635px) {
		#legal span:not(:last-child):after {
			content:'■';
			margin-left: 5px;
			margin-right: 5px;
			position: relative;
			top: -1px;
		}
	}
	
	footer > div:first-child {
		border-top: 1px solid white;
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
		padding-bottom: 10px;
	}
	
	#legal span a {
		color: #A4A4A2;
		font-family: 'Kallisto W05 Medium';
		text-transform: uppercase;
		font-size: 0.65rem;
		letter-spacing: 4px;
		text-decoration: none;
		transition: 0.5s color;
	}
	
	#legal span a:hover {
		color: white;
	}
	
	#socials {
		min-width: 100px;
		display: flex;
		justify-content: space-between;
		justify-content: space-between;
		flex-direction: row;
	}
	
	#xicon {
		width: 18px;
		position: relative;
		top: -1px;
	}

	.inline-x-icon {
		width: 15px;
		margin-left: 5px;
		position: relative;
		top: 1px;
	}

	.inline-x-icon:hover {
		color: white;
	}
	
	#teleicon {
		width: 20px;
		position: relative;
		top: -2px;
	}
	
	#disicon {
		width: 20px;	
	}
	
	.st1, .st0, .st3 {
		fill:#A4A4A2;
		transition: 0.5s fill;
	}
	
	.st1:hover, .st0:hover, .st3:hover {
		fill:#ffffff;
	}

	#legal {
		position: relative;
		z-index: 1000;
	}

	#copy {
		width: 100%;
		color: #78777E;
		font-family: 'Kallisto W05 Medium';
		text-transform: uppercase;
		padding-bottom: 20px;
		letter-spacing: 4px;
		font-size: 0.6rem;
	}
	
	@media only screen and (max-width: 635px) {
		
		#legal span {
			display: block;
			margin-bottom: 10px;
		}
	}
	
	.comingsoon {
		width: 100%;
		color: #78777E;
		font-family: 'Kallisto W05 Medium';
		text-transform: uppercase;
		padding-bottom: 20px;
		letter-spacing: 4px;
		font-size: 0.6rem;
	}
	
	/* end footer */

	#coin-hero {
		height: 100%;
		max-width: 800px;
		position: relative;
		margin: auto;
		margin-top: 60px;
		/*z-index: -1;*/
		/*display: grid;
		grid-template-rows: auto;
		grid-template-areas: 
		"coin"
		"sentence";*/
	}

	#coin-video {
		/*width: 100vw;
		height: 100vh;
		object-fit: contain;
		position: fixed;
		left: 0;
		right: 0;
		top: 10;
		bottom: 0;
		z-index: -1;*/
		width: 100%;
		grid-area: coin;
	}

	.tagline {
		color: white;
		font-family: 'Kallisto W05 Medium';
		text-transform: uppercase;
		letter-spacing: 4px;
		text-align: center;
		align-self: center;
		grid-area: coin;
	}

	.detailline {
		color: white;
		font-family: Roboto;
		font-weight: 200;
		font-size: 1.4rem;
		letter-spacing: 2px;
		text-align: center;
		grid-area: sentence;
		max-width: 600px;
		margin: auto;
		margin-bottom: 30px;
	}
	
	.about p, .about li, .about h2, .about h3, .about a {
		color: #A4A4A2;
		font-family: "Roboto", sans-serif;
		break-inside: avoid-column;
	}

	.tos p, .tos li, .tos h2, .tos h3, .tos a, .pp p, .pp li, .pp h2, .pp h3, .pp a, .tokenomics p, .tokenomics li, .tokenomics h2, .tokenomics h3 {
		color: #A4A4A2;
		font-family: "Roboto", sans-serif;
		break-inside: avoid-column;
	}

	.tos p, .tos li, .pp p, .pp li, .tokenomics p {
		line-height: 1.5rem;
	}

 	.twocol p, .about li {
		line-height: 1.8;
	}

	.twocol div {
		break-inside: avoid-column;
	}

	.about h1, .tos h1, .pp h1, .tokenomics h1 {
		color: white;
		font-size: 2rem;
		font-family: 'Kallisto W05 Medium';
		text-transform: uppercase;
		letter-spacing: 4px;
	}

	.about h2, .tos h2, .pp h2, .tokenomics h2 {
		color: white;
		border-bottom: 1px solid white;
		font-family: 'Kallisto W05 Medium';
		text-transform: uppercase;
		letter-spacing: 4px;
		padding-bottom: 10px;
		margin-top: 60px;
	}

	.about .twocol {
		column-count: 2;
		column-gap: 40px;
		text-align: justify;
	}

	.about .twocol p:first-child, .firsth3 {
		margin-top: 0px;
		padding-top: 0px;
	}

	.about ul li {
		margin-bottom: 20px;
	}

	@media only screen and (max-width: 620px) {
		.about .twocol {
			column-count: 1;
		}
	}

	.faq {
	  list-style: none;
	  margin-left: 0;
	  padding-left: 0;
	}

	.faq li {
	  padding-left: 1em;
	  text-indent: -1em;
	}
	
	.faq-q {
		margin-bottom: 10px;
	}
	
	.faq-a {
		margin-bottom: 20px;
	}

	.faq-q:before {
	  content: "Q.";
	  padding-right: 5px;
	}
	
	.faq-a:before {
	  content: "A.";
	  padding-right: 5px;
	}

	.tos li {
		margin-bottom: 10px;
	}

	.tos {
		margin-bottom: 40px;
	}

#pop-over {
	position: absolute;
	top: 0;
	background-color: rgba(0,0,0,0.85);
	width: 100%;
	height: 100%;
	z-index: 100;
}

.popbox {
	width: 300px;
	border: 1px solid white;
	padding: 20px;
	margin: auto;
	margin-top: 80px;
}

.popbox p {
	color: white;
	font-family: Roboto;
	text-align: center;
}

#close-this {
	text-align: right;
}

#close-this svg {
	width: 16px;
	cursor: pointer;
}

.cls-1 {
	fill: #A4A4A2;
	transition: fill 0.5s;
}

#close-this svg:hover .cls-1 {
	fill: white;
}

.invisiblePopover {
	display: none;
}

.visiblePopover {
	display: block;
}

#coin-drop-video {
	width: 100%;
	max-width: 1064px;
}