@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body {overflow-x: hidden;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

@font-face {
font-family: Alvica;
src:url('../fonts/INDGAlvica-Regular.woff2'); 
}

@font-face {
font-family: Alvica Bold;
src:url('../fonts/INDGAlvica-Bold.woff2'); 
}

strong {
	font-family:'Alvica Bold';
}


body {
	line-height: 1;
	overflow-x: hidden;
  max-width:100%;
 margin: 0;
      background: #2c2ca3;
      font-family: 'Alvica';
      color:#efece2;
    }


h1 {
position: fixed;
    top: 45%;
    width: 100%;
	font-size:60px;
	z-index: 3;
}

nav ul
{
  display: flex;
  justify-content: space-between;
  align-items:center;
}

.navhome {
  z-index:10;
    position:fixed;
  width:100%;
	
animation: 10s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.navhome ul li a {
	color:#efece2;
	background-image: linear-gradient(#efece2 0 0);
  background-position: 0 100%; 
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
  background-size 0.3s,
   background-position 0s 0.3s; 
}

.navhome ul li a:hover{
	text-decoration:none;
  background-position: 100% 100%; 
  background-size: 100% 2px;
  }



@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}



.navsect {
  z-index:1000!important;
  width: 100%;
	position:sticky;
	top:0;
	background:linear-gradient(180deg,rgba(244, 161, 198, 1) 0%, rgba(244, 161, 198, 0) 90%);
;padding-bottom:15px;
}

.navsect ul li a {
	color: #2c2ca3;
background-image: linear-gradient(#2c2ca3 0 0);
  background-position: 0 100%; 
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
  background-size 0.3s,
   background-position 0s 0.3s;
}

.navsect ul li a:hover{
text-decoration:none;
  background-position: 100% 100%; 
  background-size: 100% 2px;
  }







nav ul li::marker
{
  display:none!important;
  color:transparent!important;
}

#parallax-section {
      position: relative;
      height: 200vh; 
      overflow: hidden;
background: #2c2ca3;}


    .fixed-text {
      font-size: 2rem;
      text-align: center;
      z-index: 10;
    }


    .layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }


    .layer img {
      position: absolute;
      will-change: transform;
    }

    .black img {
      width: 12%;
      filter: none;
      z-index: 4;
    }

    .gray img {
      width: 10%;
      filter: blur(2px);
      z-index: 2;
    }

    .red img {
      width: 5%;
      filter: blur(3px);
      z-index: 1;
    }


#parallax-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}


.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


.layer img {
  position: absolute;
  will-change: transform, opacity;
  animation-name: floatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  user-select: none;
  -webkit-user-drag: none;
}


@keyframes floatUp {
  0% {
    transform: translate3d(0, 110vh, 0); 
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -120vh, 0); 
    opacity: 0;
  }
}


.black img {
  height: auto;
  animation-duration: 18s; 
}

.gray img {
  height: auto;
  filter: blur(2px);
  animation-duration: 32s; 
}

.red img {
  height: auto;
  filter: blur(4px);
  animation-duration: 50s; 
}


.black img:nth-child(1) { animation-delay: -0s;   }
.black img:nth-child(2) { animation-delay: -10s;  }
.black img:nth-child(3) { animation-delay: -20s;  }
.black img:nth-child(4) { animation-delay: -30s;  }
.black img:nth-child(5) { animation-delay: -40s;  }
.black img:nth-child(6) { animation-delay: -50s;  }

.gray img:nth-child(1)  { animation-delay: -0s;   }
.gray img:nth-child(2)  { animation-delay: -10s;  }
.gray img:nth-child(3)  { animation-delay: -20s;  }
.gray img:nth-child(4)  { animation-delay: -30s;  }
.gray img:nth-child(5)  { animation-delay: -40s;  }
.gray img:nth-child(6)  { animation-delay: -50s;  }

.red img:nth-child(1)   { animation-delay: -0s;   }
.red img:nth-child(2)   { animation-delay: -10s;  }
.red img:nth-child(3)   { animation-delay: -20s;  }
.red img:nth-child(4)   { animation-delay: -30s;  }
.red img:nth-child(5)   { animation-delay: -40s;  }
.red img:nth-child(6)   { animation-delay: -50s;  }


h2 {
	margin-top:-10em;
	text-align:left;
	margin-left:8vw;
	font-family:'Instrument Serif';
	font-size:xx-large;
	color:#2c2ca3;
border-bottom: 1px solid #2c2ca3;
	
}

.uk-accordion {
 display: flex
;
    align-items: flex-end;
    justify-content: space-between;
    width: 86vw;
    overflow-x: hidden;
    margin-top: -20vh;
    margin-left: 8vw;
}

    .uk-accordion-title img {
      width:15vw;
    }

  .uk-accordion-title {
    font-family: "Syne";font-weight:800;
    color: #2c2ca3;
}

.albumtitlelink{
  padding-bottom:2px;
  background-image: linear-gradient(#2c2ca3 0 0);
  background-position: 0 100%; 
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
  background-size 0.3s,
   background-position 0s 0.3s; 
}

.uk-accordion-title:hover{
	color: #2c2ca3;
	text-decoration:none;
}

.uk-accordion-title:focus{
	color: #2c2ca3;
	text-decoration:none;
}

.uk-accordion-title:active{
	color: #2c2ca3;
	text-decoration:none;
}
	
.albumtitlelink:hover{
  background-position: 100% 100%; 
  background-size: 100% 2px;
  }


section {
      height:100vh;
      display:flex;
      background-color:rgb(244, 161, 198)!important;
    flex-direction: column;
    justify-content: space-between;
    z-index: 99999;
  position: fixed;
    inset: 0;               
    transform: translateY(100%); 
    transition: transform 0.45s ease;
    z-index: 1000;
    pointer-events: none;    
    overflow: auto;

	


}

section p {
	font-weight: 300;
line-height: 1.2;
}




  #discography.active {
    transform: translateY(0);
    pointer-events: auto;   
  }


#discography.active {
  bottom: 0;
}
    

.uk-accordion-content {
      margin-top:0!important;
      padding:6vw;
    position: absolute;
    left: 0;
    background-color: rgb(244, 161, 198);
    color: #2c2ca3;
}

.uk-accordion-title::before {
      display:none;
    }

.uk-accordion-title{
	font-family:'Syne';font-weight:800;
	font-size:large;
}

.albumintro {

    padding: 3em;
    background:  #2c2ca3;
    color: #efece2;
    border-radius: 16px;

}

.tracklist {
  display:flex;
	font-weight:300;
	margin-bottom:7em;
}

.col1, .col2 {
  width:40%;
}

.col2 {
	padding-left:11%;
}

.col2 > ol > li {
  margin-bottom:5px;
}

h4 {
  font-family: 'Syne';font-weight:800;
    font-size: xx-large;
    margin-left: -20px;
  text-shadow: -1px -1px 0 #efece2, 1px -1px 0 #efece2, -1px 1px 0 #efece2, 1px 1px 0 #efece2;
	color: #2c2ca3;
}

.col2 p {
  margin-left:-20px;
  margin-bottom:5px;
}

.streams {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
	font-size: x-large;
    padding-bottom: 20px;
	margin-left:-20px;
	width:70%;
}

ul>li::marker {
      color:transparent;
    }





.popup {
  position: fixed;
  inset: 0;
  background: #111;
  color: #fff;
  transform: translateY(100%);
  transition: transform 0.45s ease;
  z-index: 1000;
  pointer-events: none;
  overflow: auto;
}

.popup.active {
  transform: translateY(0);
  pointer-events: auto;
}



.uk-slider-items > li > a > img, .uk-slider-items > li > img,.uk-slider-items > div > a > img,.uk-slider-items > div > img  {
    object-fit: cover;
    height: 24vw;
    width: auto !important;
}
	
.uk-slider-items {
    width: 100%;
    height: 24vw;
    display: flex
;
    align-items: center;
    justify-content: center;
}

.uk-slider-items li {
    padding-left: 40px;
}

.llkbkslider li {
    padding-left: 0!important;
}
	
	
.quote {
	padding: 4em;
    margin: 40px 0;
    background-color: #ded3f3;
    color: #2c2ca3;
    border-radius: 10px;
}

.quote p {
	font-weight:400!important;
}


strong {
	font-weight:700!important;
}

h5 {
	font-family:'Instrument Serif';
	font-size:xx-large;
	margin-bottom:10px;
	color:#ecefe2!important;
}


.quote>h5 {
	color:#2c2ca3!important;
	border-bottom: 1px solid #2c2ca3;

}

article {
		margin-bottom:10em;
}

#more {display: none;}

.llk1 {
	width:27vw;
	object-fit:cover;
	margin-right:50px;
	display:block;
	position:absolute;
}



.explain .llktext {
	padding-left:31vw;
}
	
	

.llk2 {
	width:15vw;
	position:absolute;
	right:10%;
	margin-top:-10%;
	z-index:999;
}

.explain {
	display:flex;
	align-items: center;
	margin:12em 0 7em 0;
}

.streams a {
	color:#efece2;
}


.iframe-container {         
  height: 70px;         
  overflow: hidden;      
  position: relative;
}

.iframe-container iframe {
  position: absolute;
  bottom: 0;             
  left: 0;
  width: 100%;
}


.uk-slidenav-previous, .uk-slidenav-next {
	    color: #2e2ca3 !important;
    background: #f7f8f880 !important;
    border-radius: 100%;
}


.grtext {
	text-align:center;
	padding: 5% 6% 0;
}


.complete {
	    width: 100%;
	    margin-top: 20px;
}
.complete a {
	margin-left:-10px;
	max-width:80%;
}

.llksingles .uk-grid {
	align-items:center;
	margin-top:-30px;
}

.spotify, .apple {
	width:46%;
}



#llorikea { scroll-behavior: smooth; }


.container {
  position: relative; /* Permite posicionar los globos encima */
}

.iframe-wrapper {
  position: relative;
  z-index: 1;
}

.balloon1, .balloon2, .balloon3, .balloon4 {
  position: absolute;
  z-index: 2; 
font-size: small;
    margin-bottom: 1em;
    background-color: #efece2;
    color: #2e2ca3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
    padding: 4em;
    width: 15%;
  border-radius: 50%; 
}

.balloon1 p, .balloon2 p, .balloon3 p, .balloon4 p {
  margin: 0;
  padding: 10px;
  font-size: 14px;
}



.balloon1 {
	top:21em;
	left:6%;
	padding:5em 3em!important;
	width:14%!important;
}

.balloon2 {
	top:5em;
	left:30%;
}

.balloon3{
	top:12em;
	left:55%;
}

.balloon4 {
	top:60%;
	left:82%;
	width:10%!important;
	padding:5em 3em!important;
}








.llksingle1 {
	padding-top:7em;
}


.llksingle2 {
	padding-top:21em;
}


.llksingle3 {
		padding-top:0;
}


.llksingle4 {
	padding-top:10em;
}


.lyrics {
	height: 24vw;
}

.llklyricslider {
	max-width:90vw;
}


article:has(.grtext) {
	    width: 60%;
    margin-top: 15%;
    margin-left: 7vw;
    margin-bottom: 3em !important;
}

.bonustrack {
	font-size:x-small;
	font-style:italic;
	filter:opacity(0.7);
}


.uk-tooltip {
	margin-bottom:30px;
}



.equix {
	display: flex
;
    top: 95vh !important;
    bottom: 0;
    text-align: right;
    justify-content: flex-end;
    width: 92%;
    background: transparent !important;
}

.arriba { 
	color:#f4a1c6!important;
	background-image: linear-gradient(#f4a1c6 0 0)!important;
}




.creditofoto {
	margin-left:8vw!important;
	color:#2c2ca3!important;
}




#galeria h2, #stream h2 {
	margin-top:4em;
}


#stream h2 {
	margin-bottom:3em;
}

#galeria h5, #stream h5 {
	margin-top:4em;
	margin-left:8vw;
	
}



#llkbk1, #llkbk2, #llkbk3, #llkbk4, #llkbk5, #llkbk6, #llkbk7, #llkbk8 {
	cursor:pointer;
}

.prologomobile {display:none;}


.socialmedia {    margin-left: 8vw;
    margin-top: -45vh;
display:flex;}

.socialmedia a i {
padding: 20px;
    background-color: #E5E2DE;
    border-radius: 50%;
    color: #2C2CAA;
    font-size: 30px;
    margin: 0 50px 0 0;
    height: 30px;
    width: 30px;
    text-align: center;
}





.socialmedia a i:hover {
    background-color: #2C2CAA;
    color: #E5E2DE;
	transition: 0.4s ease;
 
}

#social h2 {    margin-top: -5em;}



.streamsgeneric {
	display:flex;
	margin-left:8vw;
}


.streamsgeneric iframe{
	width:55%;
}

.streamscolumn2 {
	display: flex;
    flex-direction: column;
	margin-left:3em;
	width: 38%;
    margin-right: 2em;
}

.streamscolumn2 a{
	display:flex;
	min-height:17%;
	margin-bottom:2em;
	width:100%;
	align-items: center;
    justify-content: center;
    text-align: center;
	font-size: large;
	border-radius:12px;
	text-decoration:none;
}



.albumstream {display:flex;margin-left:8vw;}
.albumstream * {
	
	width:27vw;
	margin-right:3em;
}

.albumstream img {
	height:27vw;
}

.middlestream {
	display:flex;
	flex-direction:column;
	justify-content: space-between;
}

.middlestream .apple,  .middlestream .apple iframe{
	height:14vw;
}

.middlestream iframe {
	height:11vw;
}

.middlestream .apple {
	margin-bottom:2.7vw;
	overflow: hidden;
        width: 100%;
        border-radius: 10px 10px 10px 10px !important;
    }

.middlestream .applenew iframe {
	width:106%!important;
}

.capsule {width:100%!important;}





.middlestreammobile {display:none;}



@media screen and (max-width:570px) {
		.middlestream {display:none;}
	
	
	.middlestreammobile {
	display: flex;
    flex-direction: column;
		
	}
	
	.middlestreammobile a{
	display:flex;
		min-height:17%;
		margin-right: 0!important;
	}
	
	.middlestreammobile i {
		margin-right:0!important;
	}
	
	.albumstream, .streamsgeneric {flex-direction:column!important;}
	.middlestreammobile, .streamscolumn2 {flex-direction:row!important;margin-top:24px;justify-content: space-between!important;}
	
	
	.albumstream img, .middlestreammobile, .streamsgeneric iframe, .streamscolumn2 {width:84vw!important;}
	
	
	.middlestreammobile p, .streamscolumn2 p {display:none;}
	.streamscolumn2 a {        width: 80px !important;
        height: 80px !important;
        font-size: xx-large !important;
        border-radius: 50% !important;
		
	}
	
	.streamscolumn2 {margin-left: 0!important;}
	
	.middlestreammobile a { width: 80px !important;
        height: 80px !important;
        font-size: xx-large !important;
        border-radius: 50% !important;}
	
}


@media screen and (max-width:1374px) {
	.middlestream .apple, .middlestream .apple iframe {
		height: 18vw;}
	.middlestream iframe {
    height: 8vw;
}
}



@media screen and (max-width:820px) {
	.albumstream iframe {display:none;}
	.albumstream img {width:51%;height:auto;}
	
	.middlestreammobile a {margin-bottom:5vw!important;}
}


@media screen and (max-width: 570px) and (min-width:521px){
    .middlestreammobile {
        width
: 84vw !important;
        margin-right: 0 !important;
    }
}




@media screen and (max-width: 820px) and (min-width:571px){

    .middlestreammobile {
        width
: 38% !important;
    }
}






@media screen and (max-width:1060px) and (min-width:571px){

	.middlestream {display:none;}	
	
	
.middlestreammobile {
	display: flex;
    flex-direction: column;
	width: 27vw;
    margin-right: 2em;
	margin-left:0!important;
}

.middlestreammobile a{
	display:flex;
	min-height:17%;
	margin-bottom: 3vw;
	width:100%;
	align-items: center;
    justify-content: center;
    text-align: center;
	font-size: large;
	border-radius:12px;
	text-decoration:none;
}
	
	
	.middlestreammobile *{
	width:unset!important;
		margin-right:0!important;
}
	
	

}












@media screen and (max-width:960px) {
	
	.uk-width-1-4 {
		width:50%!important;
	}
	

	.grtext {
    padding: 30% 6% 0 !important;
	}
	
		
	.spotify, .apple {
    width: 42%;
	}
	


	.llk2 {
    width: 17vw;
    position: absolute;
    right: 10%;
    margin-top: -15%;
    z-index: 999;
}
	
	
	
	.llk1 {
    margin-top: -50%;
    margin-left: -2%;
}
	
	.explain .llktext {
    padding-top: 25%;
		padding-left:0;
}
	
	
}




@media screen and (max-width:760px) {
	.extraspace {padding:4em;}
	#galeria h2, #stream h2 {
		margin-top:1em!important;
	}

	
	
	#social h2 {        margin-top: -15vh;
		margin-bottom: 40px;}
	.socialmedia { flex-direction: column;
        align-items: center;
        /* width: 100%; */
        margin-left: 12vw;
        /* text-align: center; */
        overflow-x: hidden;
		margin-top: -10vh;}
	.socialmedia a i {margin-bottom:20px;}
	.prologo {display:none;}
	.prologomobile {display:block;}
	
	.uk-lightbox {width: 100% !important;}
	
	
	.explain {
		margin: 8em 0 4em 0;
	}
	
	
	.llk2 {
		display:none;
	}
	
	
	
	.uk-slider-items > li > a > img, .uk-slider-items > li > img, .uk-slider-items, .uk-slider-container, .uk-slider-items > div > img {
		height:320px!important;
	}
	
	
	
	
	.singles iframe {
		height:200px!important;
	}
	
	
	
	.quote p, .llktext {
		    font-size: 10pt!important;
    text-align: left!important;
	}
	
	.quote, .explain {
		padding:1.2em!important;
	}
	
	
	.grantedvideos iframe {
		height:250px!important;
	}
	
	
	
	.uk-width-1-4 {
		width:100%!important;
	}
	
	.equix {display:none;}
	
	h2 {
		margin-top: 0vh;
	}
	
	.uk-open {
		width:50vw;
	}
	
	.uk-accordion-content{
		position:relative;
		width: 90vw !important;
		margin-left: -25vw;}
	
	
	.uk-accordion {
		flex-direction:column;
		margin-top: 5em;
		    align-items: center;
		width: 95vw;
    overflow-x:clip;
		margin-left:0;
	}
	
	.uk-accordion-title img {
		width:50vw;
	}
	

	.tracklist {
    flex-direction: column;
}
	
	.col1, .col2 {
    width: 100%;
}
	.col2 {
    padding-left: 5%;
	}
		.streams {
    
    width: 100%;
}

	
	
	.col2 h4 {
		position: absolute;
    top: 100px;
	}

	.col2 p {
		position: absolute;
    top: 130px;
	}

	.col1 {
		margin-top:80px;
	}
	
	
	.streams {
    padding-top: 20px;
    margin-left: -30px;
	}
	
	.streams li a i {
	        min-width: 25px;
        text-align: center;
        padding: 20px;
    background: #ecebe2;
    border-radius: 50%;
    color: #2c2ca3;

	}
	
	
	.col2 ol {
		padding-left: 20%;
	}
	
	
	#defrost .albumintro .tracklist .col2 ol {
        padding-left: 35%;
	}
		#discover .albumintro .tracklist .col2 ol {
        padding-left: 30%;
}
	
	
	.uk-width-1-4 {
		width:40%;
	}
	
	
	    .grtext {
        padding: 40% 6% 0 !important;
    }
	
	
	.complete 
	{margin: 30px 0 5em 15%;
	
  }
	.complete a span {
		padding: 15px!important;
    border-radius: 8px!important;
	}
	

}






@media screen and (max-width:520px) {
		
	.navsect {
		    padding-bottom: 80px;
    padding-top: 20px;
	}
	
	.navhome {
		padding-top: 20px;
	}
	
	nav ul {
		justify-content: space-around;
	}
	
	
	
	.streams li a i {
        min-width: 24px;
        padding: 12px;
	}
		
.streams {

                margin-left: -15px;
        width: 100%;
	}
		
		    .col2 ol  {
        padding-left: 0;
    }
	
	
	#defrost .albumintro .tracklist .col2 ol {
		padding-left:25%;
	}
		
	#discover .albumintro .tracklist .col2 ol{
		padding-left:20%;
	}
	
	.albumintro {
		padding:2em;
	}
	
	
	.quote {
		padding: 2em;}
		
	
	
		.col2 h4 {
		position: absolute;
    top: 80px;
			font-size: x-large;
	}

	.col2 p {
		position: absolute;
    top: 110px;
	}
	
	
	

	
	
	.grtext {
		padding:0;
	}
	
	
	
	
	    .grtext {
        padding: 0!important;
    }
	
}










/*CASOS ESPECIALES */

@media screen and (max-width:1218px) {
	
	
	.grtext {
    padding: 13% 6% 0;
	}


}

@media screen and (max-width:900px) {
	
	
	.spotify {
    width: 100%;
		height:110px;
		        min-width: 250px !important;
	}

	.apple {
    width: 100%;
}
}


@media screen and (max-width:860px) {
	
	.llk1{
		display:none;
	}
	
	.explain .llktext {
        padding-top: 0;
		text-align:center;
	}
	
	
	.grantedvideos {
		flex-direction:column;
	}
	
	.grantedvideos div div iframe {
		margin-bottom:2em;
	}

}

	


@media screen and (max-width:880px){
	.bubble {
		width:100%!important;
		position:relative!important;
		right: 0 !important;
        margin-bottom: 25px;
		object-fit: cover;
	}
	    article:has(.grtext) {
        width: unset;
        margin-top: 0 !important;
        margin-left: 0;
			
			
			.grtext {
    padding: 0 !important;
	}
	
}
	
	
	@media screen and (max-width:639px) and (min-width:521px) {
	
		#defrost .moodboard .apple iframe, #discover .moodboard .apple iframe {width:106%!important;}
	
	.apple {
		    height: 110px;
    overflow: hidden;
    width: 100%;
    border-radius: 10px 10px 10px 10px !important;
	}
	
		
		.grtext {
        padding: 50% 6% 0 !important;
    }
	
}





@media screen and (max-width:420px){
	.middlestreammobile a, .streamscolumn2 a {
        width: 60px !important;
        height: 60px !important;
        font-size: x-large !important;
	}
	
	
.complete {
        margin: 30px 0 5em 8vw!important
			;}}