@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 / CONTENEDOR ******/
body {
	background: #1f1b0a;
	width: 100%;
	height: auto;
	overflow-x: hidden;
	position: relative;
}

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

.bkg img {
	width: 100%;
	height: 100vh;
}

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

/****** FIN CONTENEDOR ******/


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

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


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

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

.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: 3vw;
	color: #A79A6D;
	text-align: center;
}

spam {
	font-size: 4vw;
	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;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	scroll-snap-align: start;
	padding: 20% 0 10%;
	background: rgba(250,235,215,0.50);
}

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

.mancha img {
	width: 50%;
	height: auto;
}

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

.lugares {
	width: 100%;
	height: 30vh;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

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

.dias p {
	width: 25%;
	height: auto;
	color: #5D5535;
	font-family: FontArticulo;
	font-size: 4vw;
	cursor: pointer;
}

.lugar {
	width: 100%;
	height: auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding: 2%;
}

.no_fecha {
	width: 40%;
	height: auto;
	padding: 0 30%;
}

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

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

.reserva {
	font-family: FontArticulo;
	font-size: 4vw;
	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;
	scroll-snap-align: start;
}

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


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

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

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

.vinyl p { 
	background: antiquewhite; 
	padding: 1%;
	font-size: 4vw;
	color: #1F1B0A;
}

.qr {
	width: 5%;
	height: auto;
	padding-top: 2%;
}


/****** VIDEOS ******/
.videos {
	width: 100%;
	height: 100vh;
	scroll-snap-align: start;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	padding-top: 25%;
}

.decadas {
	width: 90%;
	height: auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}

.dkd_txt{
	width: 90%;
	height: auto;
	font-family: FontArticulo;
	font-size: 4vw;
	color: #A79A6D;
	text-align: center;
}

.dkd_logos {
	width: 90%;
	height: 70%;
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-row-gap: 2%;
	position: relative;
/*	background: green;*/
}

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

.img_50s img, .img_60s img, .img_70s img, .img_80s img, .img_90s img, .img_2000s img {
	opacity: .3;
	cursor: pointer;
	width: 70%;
	height: auto;
	padding: 10% 0;
}

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

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

.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;
}

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

.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;
}

  .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;

}

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

@keyframes LOGOS_ANIMACION {
	0% { transform: translate(0, 20%); }
	40% { transform: translate(0, 0); }
	80% { transform: translate(0, 20%); }
}


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

.Voltear { display: none; }



/**** MOVILES ****/
@media screen and (max-device-width:440px){
	
	.bkg { 
		background: url("../imgs/MOVIL_BKG.jpg") no-repeat; 
		background-size: cover;
	}
	
	.video_dsk { opacity: .4; }
	
	.articulo { font-size: 4vw; }
	spam { font-size: 5vw; }
	
	.logo img { width: 60%; }
	
/*	.calendario { padding: 10% 0 0; }*/

	.mancha img { width: 100%; }

	.contacto { font-size: 10vw; }
	
	.dias p { font-size: 5vw; }
	
	.txt_lugar { font-size: 4vw; }
	
	.logo_lugar1 { width: 60%; padding: 2% 20%; }
	
	.reserva { font-size: 6vw; }
	
	.redes_txt { font-size: 5vw; }
	
	.qr { width: 10%; }
	
	.videos { padding-top: 30%; }
	
	.dkd_logos {
		height: 60%; 
		margin-top: 5%;
	}
	
	.dkd_txt{ font-size: 5vw; }
	
	.img_50s img, .img_60s img, .img_70s img, .img_80s img, .img_90s img, .img_2000s img {
		width: 85%;
		height: auto;
		opacity: .5;
	}
	
	.Close { 
		width: 10%; 
		right: 1%;
	}
	

}