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

:root {
  --color-25green: #009668;
  --color-25blue: #00EDFF;
 --color-25pink: #FFA8FF;
}

/*
#sticker-2{
	 width: 100px;
      height: 100px;
	  border-radius: 20px;
      background-color: var(--color-yellow);
	  border:1px solid var(--color-primary);
	box-shadow: 0px 0px;
	transition: box-shadow .15s ease, scale .15s ease;
	
	
}
*/


.jh-top
{position:absolute !important;}

a {text-decoration: none!important;}

::-moz-selection { 
  color: var(--color-light);
  background: var(--color-25green);
}

::selection {
   color: var(--color-light);
  background: var(--color-25green);
}


@keyframes slideInFromBottom {
  0% {
    transform:  translate(0px,0px) rotate(0deg) scale(1.05);
	
	  
  }
  50% {
     transform: translate(10px,60px) rotate(3deg) scale(.95);
	  
	  
  }
	
	90%{
		transform: translate(-5px,-10px) rotate(-2deg) scale(1.05);
	}
	
	100%{
		transform: translate(0px,0px) rotate(0deg) scale(1);
	}
}

@keyframes flipMore {
  0% {
    transform:  rotateX(0deg) ;
	}
	
	50%{
		transform: rotateX(10deg) ;
	}
	
	100%{
		transform: rotateX(0deg) ;
	}
}

@keyframes glow {
  0% {
   box-shadow: 	-1px -1px 30px 1px var(--color-25green), 1px 1px 30px 1px var(--color-25blue), 0px 3px 10px 2px var(--color-25pink)
	}
	
	50%{
		box-shadow: 	-1px -1px 10px 1px var(--color-yellow), 1px 1px 10px 1px var(--color-pink), 0px 6px 100px 2px var(--color-orange)  ;
	}
	
	100%{
		box-shadow: 	-1px -1px 30px 1px var(--color-yellow), 1px 1px 30px 1px var(--color-orange), 0px 3px 10px 2px var(--color-yellow)  ;
	}
}

@keyframes textGlow {
  0% {
    text-shadow: 	-1px -1px 10px 1px var(--color-pink), 1px 1px 20px 1px var(--color-orange), 0px 3px 30px 2px var(--color-yellow) ;
	}
	
	50%{
		text-shadow: 	-1px -1px 30px 1px var(--color-yellow), 1px 1px 20px 1px var(--color-pink), 0px 6px 50px 2px var(--color-orange) ;
	}
	
	100%{
		text-shadow: 	-1px -1px 30px 1px var(--color-pink), 1px 1px 30px 1px var(--color-orange), 0px 3px 10px 2px var(--color-yellow) ;
	}
}



.card-container {
  position: relative;
	width: auto;
	width:  350px;
	min-height: 550px;
	display: block;
	left: 50%;
	margin-left:-175px;
	perspective: 1000px;
	z-index: 20;
}

.top-card {
  width: 300px;
  height: 500px;
  position: absolute;
  top: 0px;
  left: 0px;
	animation: .25s ease 0.2s 1 slideInFromBottom;

	
}

.card {
  width: 300px;
  height: 500px;
  position: absolute;
  top: 0px;
  left: 0px;
	border-radius: 11px;
	color: var(--color-primary);
	background-color: var(--color-primary);
	border:1px solid var(--color-light);
	
	animation: .25s ease 0.2s 1 slideInFromBottom;
	
}

.card:nth-child(2) {
  top: 10px;
  left: 10px;
	animation: .25s ease 0.3s 1 slideInFromBottom;
}

.card:nth-child(3) {
  top: 20px;
  left: 20px;
	
	animation: .25s ease 0.4s 1 slideInFromBottom;
	
}
.card:nth-child(4) {
  top: 30px;
  left: 30px;
	
	animation: .25s ease 0.5s 1 slideInFromBottom;
}
.card:nth-child(5) {
  top: 40px;
  left: 40px;
	animation: .25s ease 0.6s 1 slideInFromBottom;
}
.card:nth-child(6) {
  top: 50px;
  left: 50px;
	animation: .25s ease 0.7s 1 slideInFromBottom;
}




.flip-card {
  background-color: transparent;
  width: 300px;
  height: 500px;
  perspective: 1000px;

}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition:   0.5s;
  transform-style: preserve-3d;
border-radius: 11px;
	z-index: 100;
}

.flip-card-inner:hover {
 transform: rotateY(10deg) rotateX(10deg) translate3d(-50px,50px,50px);
	box-shadow: 	-1px -1px 30px 1px var(--color-25green), 1px 1px 20px 1px var(--color-acid), 0px 6px 50px 2px var(--color-25green);
}


 .flip-card-inner {
  transform: rotateY(0deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {

	border-radius: 11px;
	color: var(--color-primary);
	background-color: var(--color-primary);
	border:1px solid var(--color-light);
	overflow:hidden;
}

.flip-card-back {
  
  transform: rotateY(180deg);
	border-radius: 11px;
	color: var(--color-primary);
	background-color: var(--color-light);
	border:1px solid var(--color-primary);
	overflow:hidden;
}





.subtitle2025{
	font-family: "casserole-flare", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	text-decoration: none;
	letter-spacing: 1px;
	text-align: center;
	display:block;
	text-transform: uppercase;
}

.title2025{
	
	/*font-family: "zubtrak-stencil", sans-serif;
	font-weight: 900;
	font-style: normal;*/
	font-family: "casserole-script", sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 50px;
	line-height: .8;
	text-decoration: none;
	text-align: center;
	display:block;
	text-transform: none;

}

.nameparagraph2025{
	font-family: chapman, serif;
	font-weight: 400;
	
	font-size: 16px;
	line-height:24px;
	
}
.nameparagraph2025 a{
	text-decoration: underline  !important;
	
}

.name2025{
	color: var(--color-yellow);
	background: linear-gradient( to bottom right, var( --color-25green), var( --color-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	
	font-family: "casserole-flare", sans-serif;
font-weight: 400;
font-style: normal;
	text-transform:uppercase;
	font-size: 32px;
	line-height: .8;
	text-decoration: none;
	text-align: center;
	display:block;
	

}

.info2025{
	display:block;
	
	height: auto;
	min-height: 550px;
	
	
	
	
	
}

.innerinfo2025{
	
	
	display:block;
	width:100%;
	height:100%;
	border-left:1px solid var(--color-primary);
	border-right:1px solid var(--color-primary);
	
}

.nameinfo2025{
	background-color: var(--color-primary);
	border-radius: 3px;
	width:95%;
	height:95%;
	color: var(--color-light);
	text-align: center;
	display: block;
	transform-origin: top left;
	margin-top:600px;
	transition:.6s ease .4s ;
	
	scale:.7;
}

.infoBack2025{

background-color: var(--color-25green);
	background-image: url("../img/2025bg.svg");
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;
	border-radius: 10px;
	width:100%;
	height:100%;
	text-align: center;
	display: block;
	overflow: hidden; 
	border:1px solid var(--color-primary);
/*	box-shadow:inset 1px 10px 100px rgba(255,54,0,0.30), inset -1px -10px  100px rgba(255,0,243,0.44) ;*/
	
	
	
}



.toptitle{
	display:block;
}

.infop2025{
	text-align: center;
}


.big-button {
	font-family: area-extended, sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 16px;
	line-height:16px;
	width: 100%;
	height: 60px;
	padding: 0 20px;
	text-align: center;
	border-radius: 30px;
	color: var(--color-primary);
	background-color: var(--color-light);
	border:1px solid var(--color-primary);
	display: flex;
    justify-content: center;
    align-items: center;
	text-transform: uppercase;
	
   
	
	
}

.greenbutton {
	color: var(--color-light);
	background-color: var(--color-25green);
}



.big-button:hover{
	color: var(--color-light);
	background-color: var(--color-primary);
}

  .faceCard {
      display: none;
    }


@media only screen and (max-width: 992px) {
  
	.info2025{
	display:block;
	padding: 50px;
	height: auto;
	min-height: 425px;
	
	
}
}

.glow{
	animation: glow 5s linear 0s infinite alternate;
	
	
}

.textGlow{
	
	
	 text-shadow: -1px -1px 3px var(--color-25green), 1px 1px 3px var(--color-25blue), 2px 2px 20px var(--color-25pink), -2px -2px 20px var(--color-25green)  ;
	
}



.reshuffleIcon{

animation: rotate 3s linear infinite; 
	transition: .3s;
	
}

.reshuffleIcon:hover{

animation: rotate 1s linear infinite; 
	scale:1.2;
}



@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}