* {	
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
	font-family: 'Raleway', sans-serif;
}
body{
	/*background: url("https://img.freepik.com/vector-gratis/fondo-hexagonal-oscuro-color-degradado_79603-1410.jpg?t=st=1647742584~exp=1647743184~hmac=49a6209d4564a1b96edeff538ffa2180467f671362aacc6b623ce48749804e3c&w=1380") fixed no-repeat;
	background-size: cover;*/
	background-color: #000;
	max-width: 2000px;
	margin: 0 auto;
}
html{
	scroll-behavior: smooth;
}

/* ------------------------------ ESTRUCTURA INICIAL ------------------------------ */
.flex-container{
	display: flex;
	flex-wrap: wrap;
}
.section-1{
	margin-top: 70px;
}
.in-flex-1 , .in-flex-2, .in-flex-3, .in-flex-4, .in-flex-6, .in-flex-5, .in-flex-7, .in-flex-8 {
	flex: 1;
	min-width: 250px;
	margin: 15px;
	padding: 15px;
	background-color: transparent;
	flex-grow: 1;
	text-align: justify;
}
.in-flex-1{
	text-align: center;
}

@keyframes animation1 {
	from{
		opacity: 0.4;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes animation2{
	from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
@keyframes animation3{
	from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* ------------------------------ END ESTRUCTURA INICIAL ------------------------------ */

/* ------------------------------ SECTION 1 ------------------------------ */

.flex-container-1{
	flex-direction: column;
}
.in-flex-1{
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}
#in-flex-1-1{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	align-items: center;
}
#in-flex-1-1 div{
	flex: 1;
}
h1{
	text-align: center;
	font-size: 4rem;
	background: linear-gradient(189deg, rgba(34,195,150,1) 0%, rgba(115,223,63,1) 100%, rgba(0,255,179,1) 100%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}
#subtitle{
	font-size: 2rem;
	letter-spacing: 3px;
	color: #3338;
}
model-viewer{
	width: 100%;
	height: 500px;
	min-width: 250px;
	border-radius: 20px;
}



/* --------------------------------------------   VER    ------------------------------------------- */
.section-1-glb{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	padding: 30px;
}
.section-1-glb img{
	object-fit: cover;
	width: 70%;
	border-radius: 3px;
}
  #lazy-load-poster {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../images/NFT_blocked.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: contrast(150%);
    filter: brightness(1.4);
    filter: saturate(120%);
  }
/* --------------------------------------------   VER    ------------------------------------------- */




 #button-load {
    cursor: pointer;
    border-radius: 6px;
    display: inline-block;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.25);
    position: absolute;
    left: 50%;
    top: 95%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 100;
    background-color: #696;
    width: 50%;
    line-height: 30px;
    border-style: none;
  }
.mint-container{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}
.mint-container h2{
	font-size: 3rem;
	padding: 10px 0;
	background: linear-gradient(189deg, rgba(34,195,150,1) 0%, rgba(115,223,63,1) 100%, rgba(0,255,179,1) 100%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}
.mint-container p {
	color: #444;
	padding: 10px;
	font-size: 22px;
	font-weight: 300;
}
.mint-box{
	display: flex;
	width: 25%;
}
.mint{
	margin: 0 auto;
	width: 100%;
	flex: 4;
}
.mint input {
	font-weight: 700;
}
#mint_amount{
	flex: 1;
	text-align: center;
	margin-right: 10px;
}
.mint input , #mint_amount{
	box-sizing: border-box;
	width: 100%;
	padding: 5px;
	font-size: 1.5rem;
	outline: none;
  border-style: none;
  border: 2px solid transparent;
	background: linear-gradient(189deg, rgba(34,195,150,1) 0%, rgba(115,223,63,1) 100%, rgba(0,255,179,1) 100%);
}
.mint input:hover{
	border: 2px solid black;
	transition: .2s;
}
.mint-container h4 p{
	margin: 10px 0;
}
.machine {
display: block;
font-family: monospace;
white-space: nowrap;
border-right: 4px solid;
width: 14ch; /* Numero de caracteres del span */
font-size: 2.4rem;
color: #444;
animation: typing 1.5s steps(15) infinite alternate, blink .3s infinite step-end alternate;
overflow:hidden;
}

@keyFrames typing {
    from { width: 0}
    to {width: 14ch}
}
@keyFrames blink {
 50% { border-color: transparent}
}

#demo{
	font-size: 60px;
	text-align: center;
	margin-top: 10px;
	font-family: monospace;
}
.invisible{
	display: none;
}
/* ------------------------------ END SECTION 1 ------------------------------ */


/* ------------------------------ SECTION 2 ------------------------------ */
.section-2{
	margin-top: 80px;
	margin-bottom: 50px;
	padding-bottom: 20px;
}
.in-flex-2{
	margin-top: 30px;
	background-color: transparent;
}
.in-flex-2 h2 , .in-flex-2 p {
	color: #bbb;
}
.in-flex-2 h2{
	text-align: center;
	margin-bottom: 10px;
	font-size: 1.8rem;
}
.in-flex-2 p {
	font-size: 1.5rem;
	margin: 0 40px;
}


/* ------------------------------ END SECTION 2 ------------------------------ */


/* ------------------------------ SECTION 3 ------------------------------ */
.section-3{
	margin: 100px 0;
}
#valores{
	text-align: center;
	color: #fffb;
	text-transform: uppercase;
	font-size: 2rem;
	margin: 20px 0;
}
.values_div{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.in-flex-3 h2{
	color: #fffb;
	text-align: center;
	margin-top: 15px;
}
.in-flex-3 p{
	color: #fffb;
	padding: 15px;
	margin-top: 10px;
	font-size: 1.4rem;
}
.in-flex-3 a{
	color: transparent;
	padding: 15px;
}
.valuesimg{
	height: 200px;
	width: 200px;
	border-radius: 100px;
	background-image: url(https://apeswap.finance/images/security.png);
	background-size: cover;
	filter: hue-rotate(300deg);
	background-repeat: no-repeat;
}
.backg1{background-image: url(https://img.freepik.com/vector-gratis/fondo-movimiento-luz-radiante_52683-14635.jpg?w=1060&t=st=1648549966~exp=1648550566~hmac=8ed09bdeb12ca89595be426c68937975935cfd1a8678f39ca9d9f32ef4ea830d);}
.backg2{background-image: url(https://img.freepik.com/vector-gratis/fondo-abstracto-tecnologia-segura_52683-28464.jpg?w=1060&t=st=1648549818~exp=1648550418~hmac=b8292d4790e568bec94fba3f6dd17ffa3488e831f9a558064e3a1f4b37d90f99);}
.backg3{background-image: url(https://img.freepik.com/foto-gratis/fondo-lineas-abstractas-azules-onduladas_1017-3205.jpg?w=1060&t=st=1648549934~exp=1648550534~hmac=c1798b7fbb35b874e5bf83758269377af390250ac0243e446c53c84a95d647a0);}

/* ------------------------------ END SECTION 3 ------------------------------ */


/* ------------------------------ SECTION 4 ------------------------------ */
.buy-nft{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: linear-gradient(189deg, rgba(34,195,150,1) 0%, rgba(115,223,100,1) 100%, rgba(0,255,179,1) 100%);
	padding: 5px 0;
	border-radius: 5px;
	border: 1px solid transparent;
}
.buy-nft a{
	font-size: 1.8rem;
	font-weight: 700;
	width: 100%;
	color: #000;
	text-decoration: none;
	text-align: center;
}
.buy-nft:hover{
	border: 1px solid #fff;
}
.in-flex-4 p{
	margin-top: 20px;
	font-size: 1.3rem;
	text-align: center;
	color: #f33;
}
.Data , .Data_content{
	/*background-color: #ada*/
}
.Data{
	margin: 50px 0;
}

/* ------------------------------ END SECTION 4 ------------------------------ */


/* ------------------------------ SECTION 5 ------------------------------ */
.NFT.img{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.NFT-img img{
	object-fit: cover;
	width: 100%;
	border-radius: 3px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	opacity: 0.9;
	filter: contrast(110%);
	
}
.NFT-img img:hover{
	filter: brightness(1.2);
	opacity: 1;
}

/* ------------------------------ END SECTION 5 ------------------------------ */


/* ------------------------------ SECTION 6 FAQ ------------------------------ */
.section-6{
	margin-top: 100px;
}
.in-flex-6{
	/*background: rgb(60,180,58);
	background: linear-gradient(70deg, rgba(60,180,58,0.7) 0%, rgba(29,253,126,0.7) 50%, rgba(69,171,252,0.7) 100%);*/

}
.in-flex-6 h2{
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 2rem;
	color: #fffb;
	/*background: #999
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;*/
	margin-bottom: 10px;
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background: #0004;
  color: #eee;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.1s;
  font-size: 1.5rem;
  margin-top: 10px;
  border: 1px solid #fff;
  border-radius: 10px;
  font-weight: 300;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #6666;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 10px 18px;
  background-color: transparent;
  color: #bbb;
  display: none;
  overflow: hidden;
}
.panel p{
}
.FAQ_answer{
	font-size: 1.4rem;
	margin: 10px 0;
	color: #3f8a;
}
/* ------------------------------ END SECTION 6 FAQ ------------------------------ */

/* ------------------------------ SECTION 7 ROADMAP ------------------------------ */

.section-7{
	max-resolution: 80px;
	margin-top: 100px;
	background: url("https://img.freepik.com/vector-gratis/mapa-papel-doblado-pin-rojo_1308-63587.jpg?w=1060&t=st=1647912719~exp=1647913319~hmac=15d047c9a2b13a6120614cb2b84820977facc34c3f56e797dc31b01c6561f0b7") fixed no-repeat;
	background-size: cover;
}
.section-7 a{
	color: white;
	font-size: 5px;
}
.in-flex-7 h2{
	text-align: center;
	font-size: 2rem;
	margin: 30px;
	/*background: linear-gradient(189deg, rgba(34,195,150,1) 0%, rgba(115,223,63,1) 100%, rgba(0,255,179,1) 100%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;*/
	color: #000000;
}
.roadmap-box{
	display: flex;
	flex-wrap: wrap;
}
.roadmap-section{
	box-sizing: border-box;
	padding: 10px 20px;
	background-color: #0002;
	border: 1px solid #666;
	border-radius: 10px;
	flex: 1;
	margin: 10px;
	height: 100%;
}
.roadmap-section:hover{
	border:	1px solid #000;
	background-color: #0004;
}
.roadmap-section h3{
	text-align: center;
	color: #000;
}
.roadmap-list{
	color: #000;
	padding: 10px;
	line-height: 32px;
	text-align: left;
}
@media (max-width: 870px){
  .roadmap-section{
  	min-width: 250px;
  }
}

/* ------------------------------ END SECTION 7 ROADMAP ------------------------------ */


/* ------------------------------ SECTION 8 CHART --------------------- */
#winPosibilities p{
	margin-top: 15px;
}
#lastPosibilitie{
	margin-top: 40px;
	text-align: center;
	font-size: 1.6rem;
	color: #fffb;
}
.section-8{
	margin-top: 50px;
}
canvas{
	max-width: 900px;
}
.canvas-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.canvas-box-child-1{
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 20px;
	margin: 10px;
	width: 70%;
}
.canvas-box-child-2{
	flex: 2;
	padding: 20px;
	margin: 10px;
}
.canvas-box-child-2 h2{
	font-size: 3rem;
	text-align: center;
	color: #fff6;
	margin: 10px;
}
.canvas-box-child-2 li{
	margin: 20px 0;
	padding: 10px;
	border: 2px solid #fffc;
	border-radius: 10px;
	background-color: #222c;
	font-size: 1.5rem;
	font-weight: 300;
	color: #ddd;
	list-style: none;
}
.canvas-box-child-2 li:hover{
	background-color: #111;	
}

#Canvas-Chart{
	width: 100%;
}
#myChart{
	width: 80%;
	height: 80%;
}
/* ------------------------------ END SECTIONP 8 CHART------------------------ */

/* ------------------------------ FOOTER ------------------------------ */
#footer{
	margin-top: 80px;
}
.footer-content{
	display: flex;
	flex-wrap: wrap;
	margin-top: 60px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;

	background-color: #222;
}
.footer-box{
	background-color: #222;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	flex: 1;
}
.footer-1 , .footer-2{
	background-color: #222;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	color: #666;
	width: 100%;
}
/*.footer-1 h2{
	font-size: 40px;
	padding: 0 5px;
	font-weight: 100;
}*/
.footer-1 h3{
	font-size: 25px;
	padding: 10px 0;
	font-weight: 300;
}
.footer-1 img{
	width: 2rem;
	margin: 10px 10px;
}
.footer-1 a{
	outline: none;
  text-decoration: none;
}
.footer-2 img{
	padding: 5px;
}
#policies{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #222;
}
#policies a{
	text-decoration: none;
	color: #000;
	margin-right: 10px;
}
/* ------------------------------ END FOOTER ------------------------------ */

/* ------------------------------ POLICY ------------------------------ */

.policy{
	margin-top: 100px;
	text-align: center;
	color: #eee;
	font-size: 3rem;
	font-family: sans-serif;
	text-transform: uppercase;
}
.policy__text{
	color: #999;
	padding: 30px 10%;
	margin: 15px;
	font-size: 1.3rem;
	text-align: justify;
}
.policy__text div {
	padding: 10px;
	margin: 10px;
}
.policy_subtitle{
	margin-top: 30px;
	margin-bottom: 10px;
	font-size: 1.5rem;
	color: #ccc;
	text-transform: uppercase;
}
/* ------------------------------ END POLICY ------------------------------ */


/* ------------------------------ MEDIA QUERIES ------------------------------ */



@media (max-width: 768px){
	.logo-container img {
    height: 50px;
	}
}
@media (max-width: 480px){
	.in-flex-2 p{
		margin: 0 10px;
		font-size: 1.3rem;
	}
	.canvas-box-child-2 li{
		text-align: center;
	}
	#winPosibilities p {
   	font-size: 1.2rem;
	}
	.canvas-box-child-2 {
    flex: 2;
    padding: 5px;
    margin: 10px;
	}
	.canvas-box-child-2 h2 {
    font-size: 2rem;
	}
	.accordion {
    font-size: 1.2rem;
	}
}

/*320px-480px: Mobile devices
481px-768px: iPads, Tablets
769px-1024px:Small screens, laptops
1025px-1200px: Desktops, large screens
1201px and more-Extra large screens, TV*/


/* ------------------------------ END MEDIA QUERIES ------------------------------ */