:root{
      --w_spike-w: auto;
      --w_spike-h: 415px;
      --anim-ms: 1080ms; /* slower so you see the arc */
    }

body{
    padding-top: 0px!important;
    background: #0d0d0d;
}

a.pink:hover{
	color:#fff;
}

/*carousel*/

	 .wrap{ width:min(900px, 96vw); }

	 /* Visible orbit (ellipse due to .wheel scaleX) */
	.orbit{
	  position:absolute; left:50%; top:46%;
	  width: calc(var(--radius) * 2);
	  height: calc(var(--radius) * 2);
	  border: 1px solid #343434;
	  border-radius: 50%;
	  transform: translate(-50%, -50%);
	  pointer-events: none;
	  z-index: 1;
	  filter: drop-shadow(0 0 6px rgba(122,162,255,.12));
	}



    .stage{
      position:relative;
      width:100%;
      aspect-ratio: 16 / 9;
      margin-inline:auto;
      overflow: hidden;
      isolation: isolate;
    }

    .compensate_z{
    	position: relative;
    	top:0px;
			z-index: 3;
    }

    .wheel{
      --r: 0deg;
      --radius: clamp(140px, 24vw, 200px);
      position:absolute; 
      inset:0;
      transform: scaleX(var(--ellipse-x, 1));
      transform-origin: 50% 46%;
/*      top:-350px;*/
    }

    .w_spike{
      position:absolute; 
      left:50%; top:46%;
      width: var(--w_spike-w);
      height: var(--w_spike-h);
      overflow:hidden;
      transform: translate(-50%, -50%) rotate(var(--theta)) translate(var(--radius)) rotate(calc(-1 * var(--theta))) scaleX(var(--inv-ellipse-x, 1)) scale(var(--scale, .94));
      transform-origin: center center;
      transition: transform var(--anim-ms) cubic-bezier(.22,1,.36,1), opacity var(--anim-ms) ease, box-shadow var(--anim-ms) ease, filter var(--anim-ms) ease;
      cursor: pointer;
      user-select: none;
      outline: none;
      z-index: 5;
    }

    .w_spike[data-active]{ --scale: 1.128; }

    .w_spike[data-active] .title {
	    opacity: 1;
	    z-index: 27;
	    position: relative;
	    top: -50px;
	    left: 50%;
	    transform: translate(-50%, 0);
	    width: 100%;
	    text-align: center;
	    display: block;
	    font-weight: 500;
	    font-size: large;
	    font-style: italic;
  	}

  	.w_spike[data-active] .title:hover{
  		color:#fff;
  	}

    .media{ position:relative; width:100%; height: 100%; overflow:hidden; }
    .media img{object-fit: cover; display:block; transition: opacity var(--anim-ms) ease; }

    .w_spike[data-active] .media img{ filter:brightness(1); }
    .w_spike:not([data-active]) .media img{ filter:brightness(0.5);  }

     .w_spike[data-active] .media img.famous_bracelet{ filter:opacity(1); }
    .w_spike:not([data-active]) .media img.famous_bracelet{ filter:opacity(0);  }


    .w_spike:not([data-active]) .title{ opacity:0; transform: translateY(6px); }

    .w_spike[data-active]::after{
      content:""; position:absolute; inset:auto; left:50%; bottom:-12px; width:70%; height:24px; transform:translateX(-50%);
    }

    .hint{ text-align:center; font-size:.95rem; opacity:.7; margin-top:12px }

    .famous_bracelet{
   	    position: absolute;
	    top: 63px;
	    left: 57px;
	    width: 325px !important;
	    height: 325px !important;
	    object-fit: contain !important;
	    object-position: center center;
    }

    .famous_bracelet.fb_for_c3{
    	top: 61px;
    	left: 28px;
    }

    .famous_bracelet.fb_for_c2{
	    top: 22px;
	    left: 13px;
    }

	/* accessibility: stop animation for users who prefer reduced motion */
	@media (prefers-reduced-motion: reduce) {
	  .rotating { animation: none; }
	}

	@keyframes spin {
	  from { transform: rotate(0deg); }
	  to   { transform: rotate(360deg); } /* clockwise */
	}

/*END carousel*/


.colectii_list{
	position: relative;
/*	top:-230px;*/
}

.grad2{
	display: none;
}

.grad3{
	height:50px;
	background: #000000;
  background: linear-gradient(0deg, rgb(0 0 0) 21%, rgba(13, 13, 13, 0) 100%);
}

.grad4{
	background: #000000;
    background: linear-gradient(180deg, rgb(0 0 0) 21%, rgba(13, 13, 13, 0) 100%);
}

.lbh{
	position: absolute;
  top: -50vh;
  right: -12px;
  display: none;
  width: 55%;
  z-index: -1;
}

.first_cross{
    position: absolute;
    top: 95vh;
    transform: translate(-50%, 0px);
    left: 50%;
}

.home_bkg{
	background: url('/themes/unde/assets/images/home_bkg.jpg') no-repeat scroll left -83px/161%;
	min-height: 100vh;
	padding-top:60px;
	filter: contrast(1.1);
}

.new_releases > div > a:hover > img{
	border:4px solid #ef77ba;
	border-radius:180px;
}

.the_artist_wrapp{
	background:  #151413;
}

.the_artist{
	background: url('/themes/unde/assets/images/artist_bkg.png') no-repeat scroll -20px 86px /contain;
}

.main_title_home{
		font-size: 4.5rem;
		display: none;
}

.secondary_title_home{
		font-size: 4.5rem;
		display: none;
}

.peas{
		min-height: 415px;
		position: relative;
		background: url('/themes/unde/assets/images/g3692.png') no-repeat scroll center top/260px
}


.home_p1{
  font-size: 1rem;
  color: #ffffff;
  font-weight: 300;
  padding:1.5rem ;
}

.home_p2{
  font-size: 1rem;
  color: #ffffff;
  font-weight: 300;
  padding:1.5rem ;
}

.home_p3{
  font-size: 1rem;
  color:#ffffff;
  font-weight: 300;
  padding:1.5rem ;
}

.home_collections{
	position: absolute;
  bottom: 0;
  z-index: 2;
  left: 50%;
  transform: translate(-50%, 0);
}

.colectie_in_list.align-items-end a{
	position: relative;
	top: 35px;
}

.colectie_in_list:hover a{
/*	text-decoration: underline;*/
	color:#ef77ba;
}

.extra_small_lh{
	line-height: 20px;
}

.home_new{
    background:url(/themes/unde/assets/images/home_bkg2.jpg) no-repeat scroll -39px -100px/180% #151412;
/*    padding-top: 470px;*/
    /* top: -400px; */
/*    margin-top: -568px;*/
}

.home_new_title{
  background: url(/themes/unde/assets/images/use46043.png) no-repeat scroll center center/100%;
  height: auto;
  z-index: 2;
  margin-top: 50vh;
}

.home_new_title > .row{
	height: 520px;
}

.row.new_releases div a img{
/*	max-width: 100%;*/
/*	max-height: 50vw;*/
	  object-fit: cover;
    border-radius: 180px;

}

.home_custom_video{
	background: #000;
}

.bkg_video{
	width: 80%;
  position: relative;
  overflow: hidden;
}

a.unique{
	position: relative;
  z-index: 2;
  top: -50px;
}


/*background levitation*/

@property --y1 { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --y2 { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --y3 { syntax: "<length>"; inherits: false; initial-value: 0px; }

.bkg_lev{
  height:auto;
  /* images (topmost first) */
  background-image:
    url(/themes/unde/assets/images/g39333.png),
    url(/themes/unde/assets/images/g39337.png),
    url(/themes/unde/assets/images/g39321.png);

  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 110px, 110px, 110px;

  /* use the variables in the Y positions (subtract to move up) */
  background-position:
    8px calc(9% - var(--y1)),
    99%  calc(1% - var(--y2)),
    11px  calc(1%  - var(--y3));

  /* wave parameters */
  --amp1: 12px;   /* front layer amplitude */
  --amp2: 9.6px;  /* mid layer amplitude (parallax) */
  --amp3: 7.2px;  /* back layer amplitude */
  --duration: 2s; /* overall speed */
  
  /* 3) Three concurrent animations with phase offsets (120° apart) */
  animation-name: lev1, lev2, lev3;
  animation-duration: var(--duration), var(--duration), var(--duration);
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite, infinite;
  animation-direction: alternate, alternate, alternate;
  /* phase offsets: 0, -T/3, -2T/3 for a smooth wave */
  animation-delay: 0s, calc(var(--duration) * -0.3333), calc(var(--duration) * -0.6667);
}

/* 4) Keyframes: each drives its own variable */
@keyframes lev1 {
  0%   { --y1: 0px; }
  100% { --y1: var(--amp1); }
}
@keyframes lev2 {
  0%   { --y2: 0px; }
  100% { --y2: var(--amp2); }
}
@keyframes lev3 {
  0%   { --y3: 0px; }
  100% { --y3: var(--amp3); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .bkg_lev{ animation: none; }
}

/* END background levitation*/


.fkg_triangle{
/*	position:relative; */
/*	left:160px;" */
/*	max-width: 100px;*/
	margin: auto;
}

.top_topper{
	padding-top: 50vh;
}

.unde{
	position: absolute;
  top: 55px;
  z-index: 1;
  height: auto;
  width: auto;
  object-fit: initial;
  object-position: initial;
}

.grad_art{
    height: 150px;
    position: absolute;
    width: 100vw;
    z-index: 2;
    top: -120px;
    overflow: hidden;
    left: -14px;
    background: rgba(13, 13, 13, 0);
    background: linear-gradient(0, rgb(21 20 19) 21%, rgba(13, 13, 13, 0) 100%);
}

.grad_art_i{
	height: 150px;
  position: absolute;
  width: 100%;
  z-index: 2;
  top: -15px;
  overflow: hidden;
  left: 0;
  background: rgba(13, 13, 13, 0);
	background: linear-gradient(180deg, rgb(21 20 19) 21%, rgba(13, 13, 13, 0) 100%);
}

.grad_video{
	height: 150px;
  position: absolute;
  width: 100%;
  z-index: 2;
  bottom: -30px;
  overflow: hidden;
  left: 0;
  background: rgba(13, 13, 13, 0);
	background: linear-gradient(0deg, #000000 21%, rgb(13 13 13 / 0%) 100%);
}

.cj_h_1{
  width: 130px;
  position: absolute;
  left: 8%;
  top: -100px;
}

.cj_h_2{
	width: 120px;
  position: absolute;
  right: 5%;
  top: -100px;
}

.cj_h_3{
  width: 130px;
  position: absolute;
  left: 24%;
  z-index: 2;
  top: 9px;
}



@media(min-width: 768px ){  /*md*/

}

@media(min-width: 992px ){  /*lg*/

}

@media(min-width: 1200px ){  /*xl*/

}

@media(min-width: 1367px ){  /*xxl*/


	.cj_h_1{
 		 width: 300px;
     position: absolute;
     left: 20%;
     top: -100px;
 	}

 	.cj_h_2{
      width: 300px;
      position: absolute;
      right: 5%;
      top: -200px;
 	}

	.cj_h_3{
      width: 300px;
      position: absolute;
      right: 25%;
      z-index: 2;
      top:100px;
      left: unset;
 	}


	.compensate_z{
    	position: relative;
    	top:60px;
			z-index: 3;
  }

	a.unique{
		position: relative;
	  z-index: 2;
	  top: -100px;
	}

	.lbh{
		top:-200px;
		position: absolute;
		right: 0px;
		display: none;
		width: 40%;
		z-index: -1;

	}

	.top_topper{
		padding-top: 0px;
	}

	.unde{
	  top: 100px;
	}

	.grad2{
		height:150px;
		background: #0D0D0D;
		background: linear-gradient(180deg,rgba(13, 13, 13, 1) 21%, rgba(13, 13, 13, 0) 100%);
	}

	.home_custom_video{
/*		margin-top: -670px;*/
	}

	.grad3{
		height: 150px;
    position: absolute;
    width: 100%;
    z-index: 2;
    top: -150px;
    overflow: hidden;
    left: 0;
	}

	.the_artist{
		background: url('/themes/unde/assets/images/artist_bkg.png') no-repeat scroll left center/contain;
	}

	.fkg_triangle{
		position:relative; 
		margin: 0;
		left:160px;
		max-width: 100%;
	}


	.bkg_lev{
		position: relative;
		z-index: 1;
  	height:100vh;
  	background-size: 400px, 380px, 370px;
  	background-position:
		    200px calc(10% - var(--y1)),
		    90%  calc(60% - var(--y2)),
		    70%  calc(0%  - var(--y3));
	}

	.bkg_lev > .row{
		height: 100%;
	}

	.bkg_video{
	    /* width: 100%; */
	    width: auto!important;
	    z-index: 0;
	    top: 0;
	    left: 50%;
	    display: block;
	    height: 80%;
	    object-fit: cover;
	    overflow: hidden;
	    position: absolute;
	    object-position: center center;
	    transform: translate(-50%, 0);
	}


	.home_p1{
		background: url(/themes/unde/assets/images/p1_bkg.png) no-repeat scroll -69px 15px / auto 100%;
	    padding:0 0 0 5%;
	    position: absolute;
	    left: -50px;
	    top: 350px;
	    display: none;
	    font-size: 1.1rem;
	    color: #ffffff;
	    font-weight: 300;
	}

	.home_p2{
		background: url(/themes/unde/assets/images/p2_bkg.png) no-repeat scroll 321px 6px / auto 100%;
	    position: absolute;
	    right: -10px;
	    top: 550px;
	    display: none;
	    font-size: 1.1rem;
	    color: #ffffff;
	    padding:0 60px 0 0;
	    font-weight: 300;
	}

	.home_p3{
		position: absolute;
		left:20%;
		top:550px;
		display: none;
	  font-size: 1.1rem;
	  color:#ffffff;
	  font-weight: 300;
	  z-index: 1;

	}


	.home_bkg{
		background: url('/themes/unde/assets/images/home_bkg.jpg') no-repeat scroll left top/100%;
		min-height: 100vh;
		padding-top:60px;
		filter: contrast(1.1);
	}

	.first_cross{
    top: 81px;
	}

	.new_releases{
			position: relative;
    	top: -200px;
	}

	.row.new_releases > *:nth-child(2){ padding-top:200px; }
	.row.new_releases > *:nth-child(3){ padding-top:300px; text-align: right}
	.row.new_releases > *:nth-child(4){ padding-top:250px;text-align:right; }
	.row.new_releases > *:nth-child(5){ padding-top:250px;text-align:left; }

	.row.new_releases > *:nth-child(1) a img{ width:250px;height:250px; }
	.row.new_releases > *:nth-child(2) a img{ width:200px;height:200px; }
	.row.new_releases > *:nth-child(3) a img{ width:250px;height:250px; }
	.row.new_releases > *:nth-child(4) a img{ width:150px;height:150px; }
	.row.new_releases > *:nth-child(5) a img{ width:150px;height:150px;}


	.main_title_home{
		margin-top: 117px;
		margin-left: 150px;
		font-size: 4rem;
		display: none;
	}

	.secondary_title_home{
		margin-left: 150px;
		font-size: 4rem;
		display: none;
	}

	.home_p_static{
		margin: auto;
/*		background: linear-gradient(70deg, rgba(80,87,92,1) 0%, rgba(222,222,221,1) 100%);*/
/*		background: -webkit-linear-gradient(70deg, rgba(80,87,92,1) 0%, rgba(222,222,221,1) 100%);*/
/*		-webkit-background-clip: text;*/
/*		-webkit-text-fill-color: transparent;*/
		font-weight: 100;
		line-height: 1.9rem;
		font-size: 1.9rem;
		color: #fff;
	}

	.peas{
		min-height: 600px;
		position: relative;
		background: url('/themes/unde/assets/images/g3692.png') no-repeat scroll top center /400px;
	}

	.home_collections{
		position: absolute;
    bottom: 0;
    z-index: 2;
    left: 50%;
    transform: translate(-50%, 0);
	}

	.home_new{
		background: url('/themes/unde/assets/images/home_bkg2.jpg') no-repeat scroll left -180px/100vw #151412;
/*		margin-top: -300px;*/
	}

	.home_new_title{
	    background: url(/themes/unde/assets/images/use46043.png) no-repeat scroll center center;
	    height: 900px;
		  margin-top: 10vh;
	}

	.home_new_title > .row{
		height: 300px;
	}


	.home_new_left{
		height: 200px;
	}

	.home_new_right{
		/*background: url(/themes/unde/assets/images/something.png) no-repeat scroll right bottom;
		height: 200px;*/
	}

	.home_custom{
		background: url('/themes/unde/assets/images/il.png') no-repeat scroll center 50px / auto 100%, #000000; 
		min-height: 100vh;
	}

	@media(min-width: 1600px ){  /*xxl*/

		.main_title_home{
			margin-top: 117px;
			margin-left: 150px;
			font-size: 7rem;
			display: none;
		}

		.secondary_title_home{
			margin-left: 150px;
			font-size: 7rem;
			display: none;
		}
	}
}