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

* {
	margin: 0;
	padding: 0;
}

/* ASIGNAMOS EL TIPO DE LETRA */
@font-face {
   font-family: FontArticulo;
   src: url("/typo/AGENCYB.TTF");
}

@font-face {
   font-family: FontMenu2;
   src: url("/typo/Poster Queen.otf");
}

@font-face {
   font-family: FontMenu;
   src: url("/typo/NIAGSOL.TTF");
}

@font-face {
   font-family: ROCK;
   src: url("/typo/Hard Grunge.ttf");
}

@font-face {
   font-family: FontArticulo2;
/*   src: url("/typo/ARIALN.TTF");*/
}

@font-face {
   font-family: FontArticulo3;
/*   src: url("/typo/FRADM.TTF");*/
}
/* FIN DEL TIPO DE LETRA */



/****** LOADER ******/
.loader {
	width: 100%;
	height: 100vh;
	background: #F02A06;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.ojos {
	width: 50%;
	height: auto;
	z-index: 1;
	position: absolute;
}

.collar {
	width: 50%;
	height: auto;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	position: absolute;
}

@-webkit-keyframes spin {
	0% { 
		-webkit-transform: rotate(0deg); 
		transform: rotate(0deg); 
	}
	100% {
		-webkit-transform: rotate(360deg); 
		transform: rotate(360deg); 
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/*#ContentID {display: none;}*/
/****** FIN LOADER ******/



body {
	background: #1f1b0a;
	width: 100%;
	height: auto;
	overflow-x: hidden;
	position: relative;
	scroll-behavior: smooth;
}

.bkg {
	width: 100%;
	height: 100vh;
	position: fixed;
	background: url("../imgs/pic_bkg_dsk.jpg") no-repeat;
	background-size: cover;
}

.logo {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	padding: 1%;
	position: fixed;
	z-index: 2;
}

.logo img {
	width: 30%;
	height: auto;
}

.contenedor {
	width: 100%;
	height: 100vh;
	flex-flow: column nowrap;
	position: absolute;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #FBD953; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #A79A6D; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5D5535; 
}

/****** VIDEO ******/

.video {
	width: 100%;
	height: 100vh;
	position: relative;
	scroll-snap-align: center;
}

.blk_out {
	width: 100%;
	height: 100vh;
/*	background: rgba(0,0,0,0.5);*/
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

.articulo {
	width: 100%;
	height: auto;
	font-family: FontArticulo;
	font-size: 1.5vw;
	color: #A79A6D;
	text-align: center;
}

spam {
	font-size: 2vw;
	color: #FBD953;
}

.video_dsk {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: .2;
}

.video_dsk video {
	top: 0;
	left: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: luminosity;
}

/****** CALENDARIO ******/
.calendario { 
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
	scroll-snap-align: start;
}


.mancha {
	width: 30%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
	
.mancha img {
	width: 70%;
	height: auto;
}

.contacto {
	position: absolute;
	color: #f4be00;
	font-family: FontMenu;
	font-size: 4vw;
	text-align: center;
	cursor: pointer;
}


.lugares {
	width: 70%;
	height: 30vh;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
}

.dias {
	width: 50%;
	height: auto;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;
}

.dias p {
	color: #5D5535;
	font-family: FontArticulo;
	font-size: 2vw;
	cursor: pointer;
}

.lugar {
	width: 50%;
	height: auto;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;
}

.no_fecha {
	width: 50%;
	height: auto;
	padding: 0 25%;
}
.logo_lugar1 {
	width: 40%;
	height: auto;
}

.txt_lugar {
	width: 40%;
	height: auto;
	font-family: FontArticulo;
	font-size: 1vw;
	color: #5D5535;
	text-align: center;
}

.reserva {
	font-family: FontArticulo;
	font-size: 2vw;
	color: #A79A6D;
	text-align: center;
	cursor: pointer;
}


#LUGAR-1, #LUGAR-2, #LUGAR-3, #LUGAR-4 { display: none; }


@keyframes LUGAR_ANIMACION {
	0% { 
		transform: translate(0, 20%); 
		opacity: 0;
	}
	40% { 
		transform: translate(0, 0);
		opacity: 1;
	}
}
/****** FIN CALENDARIO ******/

.redes {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	scroll-snap-align: start;
}

.redes_txt {
	width: 100%;
	height: auto;
	font-family: FontArticulo;
	font-size: 1.5vw;
	color: #5D5535;
	text-align: center;
	padding: 3% 0 0;
}


.LPs {
	width: 70%;
	height: auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}

.vinyl {
	width: 20%;
	height: auto;
	border: solid rgba(255,255,255,0.0) 5px;
	box-shadow: 0 0 15px 8px #FFF2C5;
	padding: 0;
	border-top-left-radius: 500px;
	border-top-right-radius: 500px;
	cursor: pointer;
}

.vinyl img {
	width: 100%;
	height: auto;
}

.vinyl p {
	width: 98%;
	height: auto;
	background: antiquewhite; 
	padding: 1%;
	font-size: 1.5vw;
	color: #1F1B0A;
}

.qr {
	width: 3%;
	height: auto;
	padding-top: 1%;
}

/****** FIN REDES ******/



/****** VIDEOS ******/
.videos {
	width: 100%;
	height: 100vh;
	scroll-snap-align: start;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
/*	background: red;*/
}

.decadas {
	width: 10%;
	height: 60%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	padding-right: 1%;
	margin-top: 5%;
/*	background: blue;*/
}

.dkd_txt{
	width: 100%;
	height: auto;
	font-family: FontArticulo;
	font-size: 2vw;
	color: #A79A6D;
	text-align: right;
}

.dkd_logos {
	width: 50%;
	height: 60%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin-top: 5%;
/*	background: green;*/
}

.img_50s, .img_70s, .img_80s, .img_90s, .img_2000s {
	width: 100%;
	height: 20%;
	overflow-x: scroll;
	overflow-y: hidden;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	padding: 0 1%;
}

.img_50s img:nth-child(1) {
	opacity: 1;
	cursor: pointer;
}

.img_70s img:nth-child(1),
.img_70s img:nth-child(7) {
	opacity: 1;
	cursor: pointer;
}

.img_80s img:nth-child(1),
.img_80s img:nth-child(3),
.img_80s img:nth-child(5),
.img_80s img:nth-child(6),
.img_80s img:nth-child(8),
.img_80s img:nth-child(10),
.img_80s img:nth-child(12),
.img_80s img:nth-child(13),
.img_80s img:nth-child(15),
.img_80s img:nth-child(16),
.img_80s img:nth-child(17),
.img_80s img:nth-child(18),
.img_80s img:nth-child(19),
.img_80s img:nth-child(21),
.img_80s img:nth-child(22),
.img_80s img:nth-child(24) {
	opacity: 1;
	cursor: pointer;
}

.img_90s img:nth-child(2),
.img_90s img:nth-child(6),
.img_90s img:nth-child(9) {
	opacity: 1;
	cursor: pointer;
}

.img_2000s img:nth-child(1),
.img_2000s img:nth-child(2),
.img_2000s img:nth-child(3),
.img_2000s img:nth-child(4),
.img_2000s img:nth-child(9) {
	opacity: 1;
	cursor: pointer;
}

.img_50s img, .img_60s img, .img_70s img, .img_80s img, .img_90s img, .img_2000s img {
	opacity: .3;
	cursor: url("../imgs/NO FECHAS.svg"), auto;
	width: 10%;
	height: auto;
	padding-right: 2%;
}

  .img_50s img:hover,
  .img_60s img:hover,
  .img_70s img:hover,
  .img_80s img:hover,
  .img_90s img:hover,
.img_2000s img:hover {
	opacity: 1;
}

#FONDO {
	width: 100%;
	height: 100vh;
	background: rgba(167,154,109,0.85);
	position: fixed;
	top: -100vh;
	left: 0;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	z-index: 3;
	transition: all 1s;
}

#VID-1,
#VID-3,
#VID-4,
#VID-5,
#VID-6,
#VID-7,
#VID-8,
#VID-9,
#VID-10,
#VID-11,
#VID-12,
#VID-13,
#VID-14,
#VID-15,
#VID-16,
#VID-17,
#VID-18,
#VID-19,
#VID-20,
#VID-21,
#VID-23,
#VID-24,
#VID-25,
#VID-26,
#VID-29,
#VID-30,
#VID-31 { 
	display: none;
	transition: all 0.5s;
}


@keyframes FadeIn {
	0% {opacity: 0;}
	100% {opacity: 1}
}

@keyframes FadeOut {
	0% {opacity: 1;}
	100% {opacity: 0}
}

@keyframes ADENTRO {
	0% {top: -100%;}
	100% {top: 0;}
}

@keyframes AFUERA {
	0% {top: 0;}
	100% {top: -100%;}
}

.Voltear { display: none; }

.Close {
	position: absolute;
	width: 15%;
	height: auto;
	font-family: FontMenu2;
	color: #FBD953;
	font-size: 2vw;
	right: 2%;
	top: 4%;
	cursor: pointer;
}

/****** FIN VIDEOS ******/


/**** TABLETA ****/
@media only screen and (max-device-width: 1368px){
	.logo img { width: 40%; }

	.articulo { font-size: 2vw; }
	
	.txt_lugar { font-size: 2vw; }
	.reserva { font-size: 3vw; }
	
	.mancha img { width: 80%; }
	.dias p { font-size: 3vw; }
	.contacto { font-size: 6vw; }
	
	.redes_txt { font-size: 2vw; }

	.qr { width: 5%; }
	
	.dkd_txt{ font-size: 3vw; }
	
	.decadas { width: 15%; }
	.dkd_logos { width: 70%; }
	
	.img_50s img, .img_60s img, .img_70s img, .img_80s img, .img_90s img, .img_2000s img {
/*		width: 60%;*/
	}
	
	.Voltear { display: none; }
	
}

/**** MOVILES ****/
@media only screen and (max-device-width: 915px){
	.video_dsk { opacity: .4; }
	
	.articulo { font-size: 3vw; }
	
	spam { font-size: 3vw; }
	
	.LPs { padding: 6% 5% 0; }
	.redes_txt { padding: 3% 0 0; }
	.qr { width: 3%; }
	
	.videos { display: none;}
	
	#FONDO { top: -200%; }
	
	.Voltear {
		scroll-snap-align: start;
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.Voltear img { 
		width: 20%;
		height: auto;
		padding-top: 5%;
	}

}