html, body{
      overflow:initial !important;
    }

	body {
        position: relative;
		background-color: #004f9d;
		background-size: cover;	
    }

.main_container {
    height: 100vh; /* 100% of the viewport height */
    width: 100vw;  /* 100% of the viewport width */
		opacity:0%;
		animation: fade-in 1.5s forwards linear;
	    animation-delay: 4s;
}

@keyframes fade-in {
	0% { opacity:0%; }
    100% { opacity:100%; }
	}

@keyframes fade-out {
	0% { opacity:100%; }
    100% { opacity:0%; }
	}







	
	.nav_buttons {
		position:absolute;
		top:10px;
		left:10px;
		z-index:99;
		height:40px;
		width:220px;
	}
	
	.nav_buttons button {
		margin:5px 0;
		display:inline-block;
		background-color:#3072E7;
		font-size:0.9em;
		width:100px;
	}
	.nav_buttons button:hover {
		color:#ff9016;
    }
	
	.header { 
		position:relative;
		width:100%;
		height:200px;
		text-align: center;
	}

	
	.title_container {
		text-align: left;
		color:#ffffff;
        margin-top:20px;
        margin-bottom:10px; 
		width:900px;
	}

.title_container a:link {
	color:#FFFA89;
}
		
.title_container a:visited {
	color:#FFFA89;
} 

.title_container .terms_btn {
		color:#FFFA89;
}
	

	.page_content {
		position:relative;
		z-index:10;
		width:100%;
		/*opacity:0%;
		animation: fade-in 1.5s forwards linear;*/
		/*animation-delay: 5s;*/
	}




.modal {
    padding: 1%;
}
.modal-lg {
    min-width: auto;
    max-width: fit-content;
}
	
ul {
  list-style: none; /* Remove default bullets */
  padding-left: 20px; /* Adjust as needed for image space */
	
}

li {
  position: relative; /* For ::before positioning */
  padding-left: 40px; /* Create space for the image */
  line-height: normal; /* Adjust for vertical alignment */
  margin-bottom:15px;
}

li::before {
  content: '';
  position: absolute;
  left: 0; /* Position the image at the left edge of the li */
  top: 12px; /* Center vertically */
  transform: translateY(-50%); /* Adjust for perfect vertical centering */
  width: 20px; /* Set image width */
  height: 20px; /* Set image height */
  background-image: url('images/giveaway26/hearts/white.png');
  background-size:cover; /* Ensure image fits within its dimensions */
  background-repeat: no-repeat;
  animation: twinkle 1.5s infinite alternate;
}
	
	

footer { color:white; margin-top:30px; }
	
	/* --- animation--- */

	.animated_bkg, .animated_banner {
		position:fixed;
		z-index:1;
		height:300px;
		width:100%;
		/**/
		/*animation: fade 2s forwards;
		animation-delay: 5s;*/
	}

.animated_banner {
		position:relative;
		z-index:2;
}


.banner-top	{
	background-color: #00aeef;
	position:relative;
	overflow: hidden;
	height:240px;
}

.prizes {
	position:absolute;
	width:536px;
	height:250px;
    top:5px;
    left:-536px;
    animation: prizes-lr 1.5s linear;
    animation-fill-mode: forwards;
	animation-delay: 4s;
}

@keyframes prizes-lr {
    from {left:-536px;}
    to {left:calc(100vw/2 + 20px);}
}


.sign_up {
	position:absolute;
	width:417px;
	height:76px;
    top:35px;
    left:-300px;
    animation: sign-lr 1.5s linear;
	animation-delay:4.2s;
    animation-fill-mode: forwards;
}

@keyframes sign-lr {
    from {left:-417px;}
    to {left:calc(100vw/2 - 457px);}
}

.ticket {
	position:absolute;
	width:460px;
	height:140px;
    top:110px;
    left:-460px;
    animation: ticket-lr 1.5s linear;
	animation-delay:4.2s;
    animation-fill-mode: forwards;
}

@keyframes ticket-lr {
    from {left:-460px;}
    to {left:calc(100vw/2 - 490px);}
}

.star {
  position: absolute;
  width: 28px;
  height:28px;
	
  background-image: url("images/giveaway26/hearts/gold.png");
  background-size: cover;
  animation: twinkle 0.5s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

.star1 { top:80px; left:5%; background-image: url("images/giveaway26/hearts/gold.png"); animation-delay: 0.5s; }
.star2 { top:40px; left:10%; background-image: url("images/giveaway26/hearts/seafoam.png"); }
.star3 { top:100px; left:20%; background-image: url("images/giveaway26/hearts/purple.png"); animation-delay: 0.8s;}	
.star4 { top:50px; left:16%; background-image: url("images/giveaway26/hearts/white.png");}
.star5 { top:170px; left:5; background-image: url("images/giveaway26/hearts/pink.png"); animation-delay: 1s;}
.star6 { top:120px; left:15%; background-image: url("images/giveaway26/hearts/gold.png"); animation-delay: 0.5s; }
.star7 { top:100px; left:25%; background-image: url("images/giveaway26/hearts/seafoam.png"); }
.star8 { top:190px; left:8%; background-image: url("images/giveaway26/hearts/blue.png"); animation-delay: 0.8s;}	
.star9 { top:180px; left:2%; background-image: url("images/giveaway26/hearts/white.png");}
.star10 { top:150px; left:12%; background-image: url("images/giveaway26/hearts/pink.png"); animation-delay: 1s;}

.star11 { top:80px; left:80%; background-image: url("images/giveaway26/hearts/gold.png"); animation-delay: 0.5s; }
.star12 { top:40px; left:85%; background-image: url("images/giveaway26/hearts/seafoam.png"); }
.star13 { top:100px; left:90%; background-image: url("images/giveaway26/hearts/blue.png"); animation-delay: 0.8s;}	
.star14 { top:50px; left:95%; background-image: url("images/giveaway26/hearts/white.png");}
.star15 { top:170px; left:92%; background-image: url("images/giveaway26/hearts/pink.png"); animation-delay: 1s;}
.star16 { top:120px; left:88%; background-image: url("images/giveaway26/hearts/gold.png"); animation-delay: 0.5s; }
.star17 { top:100px; left:85%; background-image: url("images/giveaway26/hearts/seafoam.png"); }
.star18 { top:190px; left:79%; background-image: url("images/giveaway26/hearts/purple.png"); animation-delay: 0.8s;}	
.star19 { top:180px; left:97%; background-image: url("images/giveaway26/hearts/white.png");}
.star20 { top:150px; left:84%; background-image: url("images/giveaway26/hearts/pink.png"); animation-delay: 1s;}



	
	/* --- waves --- */

	
	.waves-container {
		position:absolute;
		width:100%;
		height:60px;
		bottom:0px;
	}
	
	.wave1 {
		bottom:0px;
		width:100%;
		height:60px;
		background-repeat: repeat-x;
		background-image: url("images/giveaway26/wave.png");
		animation: wave1-motion 6s forwards infinite; 
	}
		
@keyframes wave1-motion {
	0% { background-position: 1000px; }
    100% { background-position: 0px;}
	}

	/* --- wave ends --- */

	
	/* --- animation ends --- */
	
	




	
	/* --- form --- */

	#barcode_form  {
		width:95%;
		max-width:700px;
		margin:auto;
		margin-bottom: 30px;
		margin-top: 30px;
	}
	
	.terms_btn { font-size:1em; margin:0px !important; }
	
     #barcode_form a {  color:#527CDC; }
     #barcode_form a:hover {  color:#C800A1; }

    .btn { background-color:#C800A1; }
	
	.btn:hover { background-color:#004f9d; }

	
	
    #barcode_form h2 { color: #C800A1; }
	
	.submit_container { display: none; margin-top:20px; }
	
	#brc { border: #4bc5b4 1px solid !important; color:#004f9d; line-height:1em; padding:0px; vertical-align: middle; text-align: center; }
#brc::-webkit-input-placeholder { color:#556B69; }
#brc::-moz-placeholder { color:#556B69; } /* FF 4-18 */
#brc::-moz-placeholder { color:#556B69; } /* FF 19+ */
#brc::-ms-input-placeholder { color:#556B69; } /* IE 10+ */



.branch_menu {
  min-width: 350px;
	margin-top:40px;
	margin-bottom:40px;
}

.branch_menu select {
  appearance: none;
  width: 200px;
  font-size: 1.15rem;
  padding: 0.675em 1em 0.675em 1em;
  background-color: #4BC5B4;
  border: 1px solid #4BC5B4;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
}

.branch_menu select .first {
		text-align: center;
}
	
	.size_menu {
		width:100%;
		max-width:none !important;
		display:none;
		margin:auto;
		padding-bottom:15px;
		border-bottom:solid 1px #e8e8e8;
	}
	
	.btn_size {
		cursor:pointer;
		position:relative;
		display:inline-block;
		margin:0px;
		height:55px;
		width:55px;
	}
	
	.size_b {
		position:absolute;
		bottom:0px;
		left:0px;
		border-radius:40px;
		height:40px;
		width:40px;
		line-height:40px;
        text-align: center;
		padding:0px;
		background-color: #4BC5B4;
	}
	
	.gender_b {
		position:relative;
		display:inline-block;
		width:80px;
		height:110px;
		margin:0 15px 0 15px;
	}
	
	.gender_b .m, .gender_b .w {
		position:absolute;
		width:80px;
		height:80px;
		top:0px;
		left:0px;
		border-radius: 40px;
		cursor:pointer;
	}
	
	.gender-text {
		position:absolute;
		bottom:0px;
		width:100%;
	}
	
	.check_mark {
		z-index:40;
		position:absolute;
		width:30px;
		height:30px;
		top:0px;
		right:0px;
		border-radius: 30px;
		background: url("images/check_mark.png") no-repeat center center #4bc5b4;
		overflow:hidden;
		background-size: cover;
		display:none;
	}
	
	
	.gender_b .m {
		background: url("images/m.png") no-repeat center center #004f9d;
		background-size: cover;
	}
	
	.gender_b .w {
		background: url("images/w.png") no-repeat center center #C800A1;
		background-size: cover;
	}
	
	.gender_b .m:hover, .gender_b .w:hover { background-color:#4bc5b4; }

	


	
	
ol li {
    list-style-type: decimal;
    display: list-item;
	margin-bottom: 15px;
  }


.countdown_container {
	    font-size: 1.4em;
	    text-align: center;
}	
#countdown, #countdown_sp {
    color:#FFFA89;
}



/*age checkbox*/


/* The container */
.container {
  display: block;
  position: relative;
  margin:auto;
  padding-left: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container { 
	width:100%;
	padding-left:40px;
}


.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 10px;
  height: 30px;
  width: 30px;
  background-color: #83E8DA;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 10px;
  top: 5px;
  width: 10px;
  height: 20px;
  border: solid white;
  border-width: 0 5px 5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* Intro with flying prizes */

.intro {
	overflow: hidden;
	position:absolute;
    height: 100vh; /* 100% of the viewport height */
    width: 100vw;  /* 100% of the viewport width */
	background: #55dce6;
    background: radial-gradient(circle,rgba(85, 220, 230, 1) 10%, rgba(47, 133, 214, 1) 100%);
	animation: fade-out 0.5s forwards linear;
	animation-delay: 4s;
}


.tshirt {
	position:absolute;
	width:400px;
	height:400px;	
	background-size: cover;
}


.tshirt1 {
	background-image: url("images/giveaway26/myLibraryT-shirt.png");
    top: -300px;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: top2center1 0.5s forwards linear;	
}

@keyframes top2center1 {
0% {
    top: -300px; /* Start from the very top */
    left: 50%; /* Start horizontally centered */
    transform: translate(-50%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 50%; /* Move to the vertical center of the container */
    left: 50%; /* Stay horizontally centered */
    transform: translate(-50%, -50%); /* Use translate to perfectly center the element */
  }
}
	
.tshirt2 {
	background-image: url("images/giveaway26/Raiders-shirt.png");
	background-size: cover;
    top: -300px;
    left: 20%;
    transform: translate(-20%, -30%);
    animation: top2center2 0.5s forwards linear;
	animation-delay: 0.5s;
}

@keyframes top2center2 {
0% {
    top: -300px; /* Start from the very top */
    left: 20%; /* Start horizontally centered */
    transform: translate(-20%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 30%; /* Move to the vertical center of the container */
    left: 20%; /* Stay horizontally centered */
    transform: translate(-20%, -30%); /* Use translate to perfectly center the element */
  }
}
	
	
.tshirt3 {
	background-image: url("images/giveaway26/VGKT-shirt.png");
	background-size: cover;
    top: -300px;
    left: 80%;
    transform: translate(-80%, -30%);
    animation: top2center3 0.5s forwards linear;
	animation-delay: 0.5s;
}

@keyframes top2center3 {
0% {
    top: -300px; /* Start from the very top */
    left: 80%; /* Start horizontally centered */
    transform: translate(-80%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 30%; /* Move to the vertical center of the container */
    left: 80%; /* Stay horizontally centered */
    transform: translate(-80%, -30%); /* Use translate to perfectly center the element */
  }
}


.hat {
	position:absolute;
	width:180px;
	height:166px;
	background-image: url("images/giveaway26/hat_blue.png");
	background-size: cover;
    top: -166px;
    left: 50%;
    transform: translate(-50%, -100%);
    animation: top2center_hat 0.5s forwards linear;	
	animation-delay: 1.2s;
}

@keyframes top2center_hat {
0% {
    top: -166px; /* Start from the very top */
    left: 50%; /* Start horizontally centered */
    transform: translate(-50%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 20%; /* Move to the vertical center of the container */
    left: 50%; /* Stay horizontally centered */
    transform: translate(-50%, -20%); /* Use translate to perfectly center the element */
  }
}


.bag {
	position:absolute;
	width:300px;
	height:450px;	
	background-image: url("images/giveaway26/bag.png");
	background-size: cover;
    top: -450px;
    left: 65%;
    transform: translate(-65%, -100%);
    animation: top2center_bag 0.5s forwards linear;
	animation-delay: 1s;
}

@keyframes top2center_bag {
0% {
    top: -450px; /* Start from the very top */
    left: 65%; /* Start horizontally centered */
    transform: translate(-65%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 60%; /* Move to the vertical center of the container */
    left: 65%; /* Stay horizontally centered */
    transform: translate(-65%, -60%); /* Use translate to perfectly center the element */
  }
}
	

.bottle {
	position:absolute;
	width:127px;
	height:400px;	
	background-image: url("images/giveaway26/waterbottle.png");
	background-size: cover;
    top: -300px;
    left: 35%;
    transform: translate(-40%, -35%);
    animation: top2center_bottle 0.5s forwards linear;
	animation-delay: 1s;
}

@keyframes top2center_bottle {
0% {
    top: -300px; /* Start from the very top */
    left: 40%; /* Start horizontally centered */
    transform: translate(-40%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 50%; /* Move to the vertical center of the container */
    left: 35%; /* Stay horizontally centered */
    transform: translate(-50%, -35%); /* Use translate to perfectly center the element */
  }
}


.ticket_vgk {
	position:absolute;
	width:335px;
	height:290px;	
	background-image: url("images/giveaway26/vgk-tickets.png");
	background-size: cover;
    top: -300px;
    left: 25%;
    transform: translate(-40%, -25%);
    animation: top2center_tic_vgk 0.5s forwards linear;
	animation-delay: 1.5s;
}

@keyframes top2center_tic_vgk {
0% {
    top: -300px; /* Start from the very top */
    left: 25%; /* Start horizontally centered */
    transform: translate(-25%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 60%; /* Move to the vertical center of the container */
    left: 25%; /* Stay horizontally centered */
    transform: translate(-60%, -25%); /* Use translate to perfectly center the element */
  }
}

.ticket_smith {
	position:absolute;
	width:335px;
	height:290px;	
	background-image: url("images/giveaway26/smith_center_tickets.png");
	background-size: cover;
    top: -300px;
    left: 75%;
    transform: translate(-75%, -25%);
    animation: top2center_tic_smth 0.5s forwards linear;
	animation-delay: 1.5s;
}

@keyframes top2center_tic_smth {
0% {
    top: -300px; /* Start from the very top */
    left: 80%; /* Start horizontally centered */
    transform: translate(-80%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 80%; /* Move to the vertical center of the container */
    left: 80%; /* Stay horizontally centered */
    transform: translate(-80%, -80%); /* Use translate to perfectly center the element */
  }
}

.ticket_nascar {
	position:absolute;
	width:322px;
	height:400px;	
	background-image: url("images/giveaway26/nascar_tickets.png");
	background-size: cover;
    top: -400px;
    left: 45%;
    transform: translate(-45%, -50%);
    animation: top2center_tic_nascar 0.5s forwards linear;
	animation-delay: 2s;
}

@keyframes top2center_tic_nascar {
0% {
    top: -400px; /* Start from the very top */
    left: 45%; /* Start horizontally centered */
    transform: translate(-45%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 80%; /* Move to the vertical center of the container */
    left: 45%; /* Stay horizontally centered */
    transform: translate(-45%, -80%); /* Use translate to perfectly center the element */
  }
}
	
	


/* End of Intro with flying prizes */



/* confetti */

#confetti-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.card {
	background-color: #fff;
	max-width: 700px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	padding: 2rem;
}

.card p {
	font-size: 1.2rem;
	text-align: center;
	margin: 0;
	padding: 10px;
}

.confetti {
	position: absolute;
	top: 0;
	font-size: 1.6rem;
	animation: confetti-fall linear 5s infinite;
}

@keyframes confetti-fall {
	0% {
		transform: translateY(-100%) rotate(0);
	}
	100% {
		transform: translateY(100vh) rotate(180deg);
	}
}


/* end of confetti */

	
	.big { display:block; }
	.small { display:none; }

	
  
	/* For mobile phones: */	
@media screen and (min-device-width:320px) and (max-device-width:580px) {   /* smartphones, Android phones, landscape iPhone */
	
	.big { display:none; }
	.small { display:block; }
	
	.nav_buttons { height:80px; width:600px; left:2px; }
	
	
	.nav_buttons button {
		font-size:1.6em;
		width:200px;
	}
	
	
    .banner-top	{
        height:660px;
    }
	
	.waves-container { top:660px; }
	
	.nav_buttons {
		font-size: 1.4em;
	}	

	.animated_bkg {
		height:200px;
	}
	
	
	.stars {
		position:absolute;
		width: 100vw; 
		/*width:100%;*/
		top:160px;
	}
	
	
	
.prizes {
	width:857px;
	height:400px;
    top:285px;
    left:-857px;
    animation: prizes-lr 1.5s linear;
    animation-fill-mode: forwards;
}

@keyframes prizes-lr {
    from {left:-857px;}
    to {left:60px;}
}
	
	
.sign_up {
	width:750px;
	height:136px;
    top:5px;
    left:-750px;
}

@keyframes sign-lr {
    from {left:-750px;}
    to {left:125px;}
}

.ticket {
	width:690px;
	height:210px;
    top:115px;
    left:-690px;
}

@keyframes ticket-lr {
    from {left:-690px;}
    to {left:160px;}
}
	
li {
     margin-bottom:30px;
	line-height:normal;
}


li::before {
  width: 28px; /* Set image width */
  height: 67px; /* Set image height */
  top:28px;
  background-image: url('images/giveaway26/hearts/white_28x67.png');	
}	
	
	
	.animated_banner { top:100px; height:600px;}
	
	.title_container { margin-top:190px; }
	
	
	
	
	#barcode_form  { max-width:none; margin-top:190px; }
	
	.gender_b {
		width:160px;
		height:220px;
	}
	
	.gender_b .m, .gender_b .w {
		width:160px;
		height:160px;
		border-radius: 80px;
	}	
	
	.gender-text {
		font-size:2rem;
	}
	
	.btn_size {
		height:140px;
		width:140px;
	}
	
	.size_b {
		border-radius:130px;
		height:130px;
		width:130px;
		line-height:130px;
	}
	
	
	.check_mark {
		width:60px;
		height:60px;
		border-radius: 60px;
	}
	
/*age checkbox*/


/* The container */
.container {
  font-size: 2em;
  text-align: left;
  line-height:normal;
  padding-left:90px;
}

	.container .checkbox {left:0px;}


/* Create a custom checkbox */
.checkmark {
  height: 60px;
  width: 60px;
}
	
	.container .checkbox { left:5px; }
	
/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 20px;
  top: 15px;
  width: 20px;
  height: 30px;
  border: solid white;
  border-width: 0 8px 8px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
	

	.branch_menu select {
  width: 500px;
  font-size: 2.8rem;
	}


	
	
	.submit_b { display:block; margin-top: 20px; }
	
	 .caption1 { font-size:2.2em; }
	
	
.star11 { top:80px; left:600px; background-image: url("images/giveaway26/hearts/gold.png"); animation-delay: 0.5s; }
.star12 { top:40px; left:800px; background-image: url("images/giveaway26/hearts/seafoam.png"); }
.star13 { top:100px; left:900px; background-image: url("images/giveaway26/hearts/blue.png"); animation-delay: 0.8s;}	
.star14 { top:50px; left:500px; background-image: url("images/giveaway26/hearts/white.png");}
.star15 { top:170px; left:790px; background-image: url("images/giveaway26/hearts/pink.png"); animation-delay: 1s;}
.star16 { top:120px; left:800px; background-image: url("images/giveaway26/hearts/gold.png"); animation-delay: 0.5s; }
.star17 { top:100px; left:700px; background-image: url("images/giveaway26/hearts/seafoam.png"); }
.star18 { top:190px; left:500px; background-image: url("images/giveaway26/hearts/blue.png"); animation-delay: 0.8s;}	
.star19 { top:180px; left:880px; background-image: url("images/giveaway26/hearts/pink.png");}
.star20 { top:150px; left:700px; background-image: url("images/giveaway26/hearts/pink.png"); animation-delay: 1s;}
	
	
	
	
.tshirt {
	width:300px;
	height:300px;	
}
	
	
	
	
	
ul {
  list-style: none; /* Remove default bullets */
  padding-left: 40px; /* Adjust as needed for image space */
	
}

li {
  position: relative; /* For ::before positioning */
  padding-left: 60px; /* Create space for the image */
  line-height: normal; /* Adjust for vertical alignment */
  margin-bottom:15px;
}

li::before {
  content: '';
  position: absolute;
  left: 0; /* Position the image at the left edge of the li */
  top: 20px; /* Center vertically */
  transform: translateY(-50%); /* Adjust for perfect vertical centering */
  width: 40px; /* Set image width */
  height: 40px; /* Set image height */
  background-image: url('images/giveaway26/hearts/white.png');
  background-size:cover; /* Ensure image fits within its dimensions */
  background-repeat: no-repeat;
  animation: twinkle 1.5s infinite alternate;
}	
	
	
	
	
	
	
	

/* intro smartphone */
.tshirt1 {
	background-image: url("images/giveaway26/myLibraryT-shirt.png");
    top: -300px;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: top2center1 0.5s forwards linear;	
}

@keyframes top2center1 {
0% {
    top: -300px; /* Start from the very top */
    left: 50%; /* Start horizontally centered */
    transform: translate(-50%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 15%; /* Move to the vertical center of the container */
    left: 50%; /* Stay horizontally centered */
    transform: translate(-50%, -15%); /* Use translate to perfectly center the element */
  }
}
	
.tshirt2 {
	background-image: url("images/giveaway26/Raiders-shirt.png");
	background-size: cover;
    top: -300px;
    left: 15%;
    transform: translate(-15%, -30%);
    animation: top2center2 0.5s forwards linear;
	animation-delay: 0.5s;
}

@keyframes top2center2 {
0% {
    top: -300px; /* Start from the very top */
    left: 15%; /* Start horizontally centered */
    transform: translate(-15%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 25%; /* Move to the vertical center of the container */
    left: 15%; /* Stay horizontally centered */
    transform: translate(-15%, -25%); /* Use translate to perfectly center the element */
  }
}
	
	
.tshirt3 {
	background-image: url("images/giveaway26/VGKT-shirt.png");
	background-size: cover;
    top: -300px;
    left: 85%;
    transform: translate(-85%, -100%);
    animation: top2center3 0.5s forwards linear;
	animation-delay: 0.5s;
}

@keyframes top2center3 {
0% {
    top: -300px; /* Start from the very top */
    left: 85%; /* Start horizontally centered */
    transform: translate(-85%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 25%; /* Move to the vertical center of the container */
    left: 85%; /* Stay horizontally centered */
    transform: translate(-85%, -25%); /* Use translate to perfectly center the element */
  }
}


.hat {
	position:absolute;
	width:180px;
	height:166px;
	background-image: url("images/giveaway26/hat_blue.png");
	background-size: cover;
    top: -166px;
    left: 50%;
    transform: translate(-50%, -100%);
    animation: top2center_hat 0.5s forwards linear;	
	animation-delay: 1.2s;
}

@keyframes top2center_hat {
0% {
    top: -166px; /* Start from the very top */
    left: 50%; /* Start horizontally centered */
    transform: translate(-50%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 5%; /* Move to the vertical center of the container */
    left: 50%; /* Stay horizontally centered */
    transform: translate(-50%, -5%); /* Use translate to perfectly center the element */
  }
}


.bag {
	position:absolute;
	width:300px;
	height:450px;	
	background-image: url("images/giveaway26/bag.png");
	background-size: cover;
    top: -450px;
    left: 80%;
    transform: translate(-80%, -100%);
    animation: top2center_bag 0.5s forwards linear;
	animation-delay: 1s;
}

@keyframes top2center_bag {
0% {
    top: -450px; /* Start from the very top */
    left: 80%; /* Start horizontally centered */
    transform: translate(-80%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 45%; /* Move to the vertical center of the container */
    left: 80%; /* Stay horizontally centered */
    transform: translate(-80%, -45%); /* Use translate to perfectly center the element */
  }
}
	

.bottle {
	position:absolute;
	width:127px;
	height:400px;	
	background-image: url("images/giveaway26/waterbottle.png");
	background-size: cover;
    top: -400px;
    left: 50%;
    transform: translate(-50%, -100%);
    animation: top2center_bottle 0.5s forwards linear;
	animation-delay: 1s;
}

@keyframes top2center_bottle {
0% {
    top: -400px; /* Start from the very top */
    left: 50%; /* Start horizontally centered */
    transform: translate(-50%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 30%; /* Move to the vertical center of the container */
    left: 50%; /* Stay horizontally centered */
    transform: translate(-50%, -30%); /* Use translate to perfectly center the element */
  }
}


.ticket_vgk {
	position:absolute;
	width:335px;
	height:290px;	
	background-image: url("images/giveaway26/vgk-tickets.png");
	background-size: cover;
    top: -290px;
    left: 20%;
    transform: translate(-40%, -20%);
    animation: top2center_tic_vgk 0.5s forwards linear;
	animation-delay: 1.5s;
}

@keyframes top2center_tic_vgk {
0% {
    top: -290px; /* Start from the very top */
    left: 20%; /* Start horizontally centered */
    transform: translate(-30%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 40%; /* Move to the vertical center of the container */
    left: 20%; /* Stay horizontally centered */
    transform: translate(-20%, -40%); /* Use translate to perfectly center the element */
  }
}

.ticket_smith {
	position:absolute;
	width:335px;
	height:290px;	
	background-image: url("images/giveaway26/smith_center_tickets.png");
	background-size: cover;
    top: -300px;
    left: 75%;
    transform: translate(-75%, -25%);
    animation: top2center_tic_smth 0.5s forwards linear;
	animation-delay: 1.5s;
}

@keyframes top2center_tic_smth {
0% {
    top: -300px; /* Start from the very top */
    left: 80%; /* Start horizontally centered */
    transform: translate(-80%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 60%; /* Move to the vertical center of the container */
    left: 80%; /* Stay horizontally centered */
    transform: translate(-80%, -60%); /* Use translate to perfectly center the element */
  }
}

.ticket_nascar {
	position:absolute;
	width:322px;
	height:400px;	
	background-image: url("images/giveaway26/nascar_tickets.png");
	background-size: cover;
    top: -400px;
    left: 30%;
    transform: translate(-50%, -30%);
    animation: top2center_tic_nascar 0.5s forwards linear;
	animation-delay: 2s;
}

@keyframes top2center_tic_nascar {
0% {
    top: -400px; /* Start from the very top */
    left: 30%; /* Start horizontally centered */
    transform: translate(-50%, -100%); /* Adjust for element size and move it fully off-screen to the top */
  }
  100% {
    top: 60%; /* Move to the vertical center of the container */
    left: 30%; /* Stay horizontally centered */
    transform: translate(-30%, -60%); /* Use translate to perfectly center the element */
  }
}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* smartphone ends */
	

	
	
	
	
	
	
	
	
	
	
	
	
	@media only screen and (max-device-width: 580px) and (orientation: landscape) {
		

	
		
		
		
		


		
	.big { display:block; }
	.small { display:none; }
		
		
		
		
		
		
		
		
		
	}