/* COLORS */

:root {
  --title-color: -webkit-linear-gradient(
    270deg,
    #ffffff 40.81%,
    #9bc9ff 59.19%
  );
}

main,section,footer{
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

header {
  background: #00003e;
  padding: 1em 4em;
  /* font-family: PassionOne-bold; */
  color: #fff;
}
.close-sidebar,
.netdreams_nav,
.menu_bar {
  display: none;
}

.navegation ul .btn_download {
  display: none;
}
.content-header,
.logo-nav,
.language-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-nav {
  gap: 60px;
}
.logo img {
  width: 250px;
}
.language-download {
  gap: 25px;
}
.navegation ul {
  display: flex;
  gap: 25px;
}
.navegation li {
  list-style: none;
}
.navegation a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-family: Kanit;
}
.selected {
  border-bottom: 2px solid #4df5f0;
}
.language-option {
  position: relative;
  background: #00045d;
  border-radius: 10px;
  font-size: 18px;
}

.default-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px;
  width: 160px;
  cursor: pointer;
  /*  */
  color: #fff;
  text-decoration: none;
  font-family: Kanit;
}

.content-opciones {
  position: absolute;
  top: 55px;
  border-radius: 10px;
  width: 160px;
  height: 0;
  overflow: hidden;
  border: 0;
  transition: 200ms ease all;
}

.content-opciones.active {
  border: 1px solid #ffffff;
  box-sizing: border-box;
  border-radius: 10px;
  height: auto;
  transition: 200ms ease all;
}

.content-opciones a {
  display: grid;
  grid-template-columns: 30px 80px;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  background: #00003e;
  font-family: Kanit;
}
.content-opciones a:first-child {
  border-radius: 10px 10px 0 0;
}

.content-opciones a:nth-of-type(2) {
  border-radius: 0 0 10px 10px;
}
.drop-language {
  cursor: pointer;
  transition: 300ms ease all;
}
.drop-language.active {
  transform: rotate(180deg);
  transition: 300ms ease all;
}
.content-opciones a:hover {
  background: #0b0f78;
}
.btn_download {
  background: #d65dff;
  border-radius: 10px;
  border: none;
  width: 135px;
}
.btn_download a {
  display: inline-block;
  width: 100%;
  padding: 8px 10px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  font-size: 18px;
  font-family: Kanit;
}

/* MAIN - HOME */
.home-section {
  color: #fff;
  padding: 0 4em;
  background-image: url(/images/background-home.png);
  background-size: 100% 100%;
}
h1 {
  font-size: 3.2em;
  line-height: 50px;
  margin-bottom: 10px;
  font-family: PassionOne-bold;
}
h1 span {
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
}
h1.presskit {
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  font-size: 3em;
}

.content-main {
  display: grid;
  grid-template: 200px 150px / 650px 750px;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  padding: 120px 0 150px;
}
.caption {
  grid-column: 1/2;
  grid-row: 1/2;
}
.caption p {
  font-size: 18px;
}
.app-stores {
  margin-top: 170px;
  grid-column: 1/2;
  grid-row: 2/3;
/*   display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px; */
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.app-stores h5{
  font-size: 25px;
  margin-bottom: 10px;
  font-weight: normal;
}

.stores__content{
  display: flex;
  gap: 25px; 
} 

.app-stores a:hover{
  transform: scale(1.05);
  transition: 300ms ease all;
  filter: drop-shadow(0px 4px 25px rgba(77, 245, 240, 0.75));
}
.app-stores img {
  width: 185px;
}
.main-img {
  grid-row: 1/3;
  grid-column: 2/3;
}
.main-img img {
  width: 100%;
}


/* Premios banner */



.banner-premios h4{
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  font-family: PassionOne-bold;
  font-size: 2em;
  text-align: center;

}

.content-premios{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  padding: 40px 0;
}

.content-premios img{
  width: 100%;
  max-width: 260px;
}

/* HERO HISTORY */

.hero-history {
  padding: 12.5em 4em;
  /*Background image */
  background-image: url(/images/fondo-historia-bitcoin.png);
  background-size: cover;
  color: #fff;
}
.content-history {
  display: grid;
  grid-template: 50px 200px / 700px 600px;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.video-hero a{
  display: block;
}
.hero-history h2 {
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  font-family: PassionOne-bold;
  font-size: 3em;
}
.caption-history {
  grid-column: 2/3;
  grid-row: 2/3;
}
.image-hero {
  grid-column: 1/2;
  grid-row: 1/3;
  cursor: pointer;
}

#video-hero {
  position: relative;
  cursor: pointer;
}
#video-hero :hover::before{
  content: "";
  background-image: url(/images/hover-hero-video.png);
  background-size: cover;
  background-position: center;
  border-radius: 50px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
} 
.image-hero img {
  width: 100%;
}
.caption-history p {
  font-size: 18px;
}

/* Enemigos */
.enemies {
  padding: 100px 4em 100px;
  color: #ffffff;
  background-image: url(/images/fondo-enemigos.png);
  background-size: 100% 100%;
}
.enemies-slider {
  background-image: url(/images/fondo-circulo.png);
  background-position: top center;
  background-repeat: no-repeat;
}
.enemies h2,
.enemies p {
  text-align: center;
}
.enemies h2 {
  text-align: center;
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  font-family: PassionOne-bold;
  font-size: 3em;
}
.enemies p:first-child {
  font-size: 18px;
  margin-top: 10px;
}

.enemies-slider {
  margin-top: 100px;
}
.enemies-slider div {
  width: 700px;
  margin: 0 auto;
}

.caption-enemy h3 {
  text-align: center;
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  font-size: 45px;
  padding: 20px;
  font-family: PassionOne-bold;
}
.enemies-slider .content-title {
  position: relative;
  top: -30px;
  background-image: url(/images/title-caption-enemy.png);
  background-size: 300px;
  width: 300px;
  z-index: 4;
}

.caption-enemy p {
  --b: 3px; /* border width*/
  --r: 10px; /* the radius */
  color: #ffffff;
  padding: calc(var(--b) + 12px);
  display: inline-block;
  position: relative;
  top: -40px;
  z-index: 0;
  background: radial-gradient(
    56.16% 86.44% at 49.92% 79.06%,
    #1017b7 0%,
    #000356 100%
  );
  min-height: 103px;
  display: flex;
  align-items: center;
}
.caption-enemy p:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--b);
  border-radius: var(--r);
  background: var(--c, linear-gradient(to right, #4df5f0, #fbd510));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}



/*  #gallery-videos a:hover::after,
 #gallery-videos2 a:hover::after,
 #gallery-videos3 a:hover::after,
 #gallery-videos4 a:hover::after,
 #gallery-videos5 a:hover::after{
  content: "";
  background-image: url(/images/overlay-gallery.png);
  background-size: cover;
  width: 370px;
  height: 365px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -11px;
  bottom: 0;
}  */



/* SCREENSHOT GALLERY */

.gallery {
  padding: 80px 0;
  background: radial-gradient(
    52.13% 52.13% at 50% 50%,
    rgba(1, 14, 39, 0.276) 21.35%,
    rgba(0, 13, 39, 0.69) 100%
  );
  background-image: url(/images/fondo-gallery.png);
  background-size: 100%;
}
.gallery-slider {
  margin-top: 50px;
}
.gallery h2 {
  margin-left: 1.5em;
  font-family: PassionOne-bold;
  font-size: 2.5em;
  width: 300px;
}

.gallery span {
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
}

.slider-nav {
  margin-top: 50px;
}
.selector {
  cursor: pointer;
}
.selector img {
  width: 180px;
}
.slick-slide img {
  margin: 5px auto;
}

.slick-slide.slick-current.slick-center img {
  margin: 0 auto;
}


/* COMENTARIOS SECTION */
.comentarios{
  background: rgba(0, 0, 0, 0.35);
  padding: 4em 0;
  color: #FFF;
}

.comentarios h2{
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  font-family: PassionOne-bold;
  font-size: 2.5em;
  text-align: center;
}

.content-comentarios{
  display: grid;
  grid-template-columns: repeat(3, 300px);
  justify-content: space-around;
  margin-top: 50px;
}

.comentario{
  text-align: center;
}
.comentario h3{
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  font-family: PassionOne-bold;
  font-size: 1.6em;
  text-align: center;
  /* text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25); */
}
.comentario .title{
  width: 80%;
  padding: 5px;
  margin: 15px auto;
  cursor: pointer;
}

.comentario .title:hover{
  background: rgba(104, 191, 255, 0.35);
  border-radius: 10px;
  padding: 5px;
}

.comentario p{
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.comentario span{
  font-size: 16px;
  color: #E1EFFF;
  font-family: Kanit;
}
/* VIDEO SECTION */

.video-section{
  padding: 2em 8em 4em;
  background-image: url(/images/bg-video-gallery.jpg);
  background-size: cover;
}

.video-section h2{
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
  font-family: PassionOne-bold;
  font-size: 3em;
  text-align: center;
}

.video-section p{
  color: #ffffff;
  text-align: center;
  margin-top: 10px;
  font-size: 18px;
}


/* Start: Video Responsive */
.video-responsive {
    margin: 30px auto 0;
}
.video-responsive a img{
  width: 70%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #FFF;
  border-radius: 20px;
}
/* .video-responsive iframe{
  width: 768px;
  height: 433px;
  display: block;
  margin: auto;
} */

/* End: Video Responsive */

/* Press Kit */
.ppreskit{
	margin-bottom: 40px;
  color: #FFF;
}

.ulpresskit{
	margin-left:1em;
}

.ulpresskit:nth-of-type(2),
.ulpresskit:nth-of-type(5){
  display: grid;
  grid-gap: 20px;
}

.ulpresskit:nth-of-type(5){
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
}

.ulpresskit:nth-of-type(2){
  grid-template-columns: repeat(auto-fill, minmax(350px,1fr));
}

.ulpresskit:nth-of-type(2) .apresskit{
  display: flex;
  align-items: center;
  gap: 10px;
}

.ulpresskit.logos{
	display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.categoria.colores{
  grid-column: 1/3;
}

.variantes-colores{
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 50px;
}

.lipresskit{
	margin-bottom: 15px; 
	list-style: none;
}

.categoria{
  margin-top: 20px;
}
.categoria span{
  display: inline-block;
  margin-bottom: 10px;
}
.categoria p{
  font-size: 18px;
  margin-bottom: 20px;
  text-decoration: underline;
}
.apresskit{
	color:white; 
	text-decoration: none;
}

.imgpresskit{
	width: 50px; 
	vertical-align: middle;
	margin-right: 10px;
}

.h2presskit{
	margin-top: 20px; 
	margin-bottom: 10px;
  color: #FFF;
}

/* Descarga section */

.download {
  display: block;
  background: url(/images/fondo-descarga-section.png);
  background-size: cover;
  background-position: left;
  padding: 200px 0px;
}

.caption-download {
  background: rgba(0, 0, 0, 0.7);
  padding: 50px 20px;
  border-radius: 30px;
  width: 750px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: 128px;
}

.caption-download {
  text-align: end;
}
.caption-download h2 {
  margin-left: 1.5em;
  font-family: PassionOne-bold;
  font-size: 3em;
  background: var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
}

.caption-download p {
  font-size: 18px;
  color: #ffffff;
}

.caption-download .stores {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.caption-download .stores h5{
  color: #FFF;
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: normal;
}

.caption-download .stores img:hover{
  transform: scale(1.05);
  transition: 300ms ease all;
  filter: drop-shadow(0px 4px 25px rgba(77, 245, 240, 0.75));
}

.caption-download .stores img {
  margin-top: 10px;
  width: 200px;
}

.caption-download .stores__content{
  justify-content: flex-end;
}

/* Footer */

footer {
  background: linear-gradient(180deg, rgba(0, 4, 93, 0) 0%, #00003e 20.72%);
  
  color: #fff;
}

.content-footer {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
  justify-content: center;
  padding: 40px 4em;
}
.logo-footer{
  grid-row: 2/3;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin-top: 30px;
}

.wrapper-footer {
  display: grid;
  grid-template-columns: 700px 200px 150px;
  justify-content: space-between;
}
/* .content-nosotros{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
} */
.content-nosotros p{
  text-align: justify;
}
.wrapper-footer p {
  margin-top: 15px;
}
.contactanos p ,
.contactanos a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.contactanos a {
  text-decoration: none;
  color: #FFF;
}
.iconos-redes {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 15px;
}
.iconos-redes img {
  width: 35px;
}

.footer-copyright{
  background-color: #000623;
  color: #FFF;
  text-align: center;
  padding: 2em;
}

.footer-copyright a {
  color: #FFF;
}

/* KIT STYLES */

#home1{
  background: url(/images/fondo-kit.svg);
  background-size: contain;
  padding: 2em;
  color: #FFF;
}

.example{
  font-size: 20px; 
  display: inline;
}