/* CSS Document */
.body {
	background-color: #000000;

}
a {
	text-decoration: none;
}
.nav-link{
	color:#54abff!important;
}
.nav-link:hover{
	color:#7dd5ff!important;
}
.containerlight {
	padding:17px 17px 50px;
	text-align: center;
	color:#54abff;
	background-color: #403151;

	
}
.floating-div {
  position:absolute;
 
	  top: 20%;  /* adjust these to place the overlay where needed */
  left: 50%;
	transform: translate(-50%, -90%);  /* centers the overlay */
	width: 470px;

	color: black;
  background: rgba(255,255,255,0.8);
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
  z-index: 10;
}
.stageColor{
	background-color:ghostwhite;
	font-size: 12px;
	text-align:center; 
	color:#403151;
	font-weight: 600;
}
.stageColorS{
	border-right: black 1px solid;
}
.mainActTop{
	border-bottom: hidden!important;
	background-color:tan;
	border-top:1px solid black;
	
}
.mainActMid{
	border-top: none;
	background-color:tan;
	border-right:1px solid black;
}
.mainActBottom{
	
	background-color:tan;
	border-right:1px solid black;
	border-bottom:1px solid black;
}
.thirdActTop{
	border-bottom: hidden!important;
	background-color:darkseagreen;
	border-top:1px solid black;
	
}
.thirdActMid{
	border-top: none;
	background-color:darkseagreen;
	border-right:1px solid black;
}
.thirdActBottom{
	
	background-color:darkseagreen;
	border-right:1px solid black;
	border-bottom:1px solid black;
}
.stageColorM{
	background-color:ghostwhite;
	font-size: 12px;
	text-align:center; 
	color:#403151;
	border-top: black 1px solid;
	border-right: black 1px solid;
}
.stageColorMEmpty{
	background-color:ghostwhite;
	font-size: 12px;
	text-align:center; 
	color:#403151;
	border-right: black 1px solid;
}
.scheduleOverride{
	margin-right: 0px!important;
 margin-left: 0px!important;
	color:#403151;
}
.border{
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.foodtruck{
	background-color: ghostwhite;
	border-radius: 6px;
	color: 000000;
	height:550px;
	margin-top: 40px;
	align-content: center;
	text-align: center;
	
}
.box{
	  
  height: 250px; /* Set your desired height */
  
	background-color: ghostwhite;
	border-radius: 8px;

}
.scheduleBox{
	height: 225px;
	background-color: ghostwhite;
	border-radius: 4px;
	
}
.scheduleRoanoke{
	background-image: url(/images/IMG04386.jpeg); 
	background-position: 42% 17%;
	height: 225px;
	border-radius: 4px;
	color: #FFFFFF; 
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
}
.scheduleFriday{
	background-image: url(/images/lg.jpg); 
	background-size: cover; 
	width: 100%;

    background-repeat: no-repeat;
	height: 225px;
	border-radius: 4px;
	
	color: #FFFFFF; 
	align-content: center;
	text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
}
.scheduleSaturday{

	background-image: url(/images/18709_orig.jpg); 
	 background-size: cover;
	width: 100%;
   
    background-repeat: no-repeat;
	height: 225px;
	border-radius: 4px;

	color: #000000; 
	
	text-align: center;
}
.scheduleSunday{

	background-image: url(/images/1964logo-blackonwhite-large.jpg);
	background-size: 280px 156px; 
	width: 100%;
    background-position: top; 
    background-repeat: no-repeat;
	height: 225px;
	border-radius: 4px;
	background-color: #ffffff;
	color: #000000; 
	align-content: center;
	text-align: center;

}
.headlinerTop{
	align-content: center;
	text-align: center;
}
.headlinerBio{
	font-size: 1.1rem;
	text-align: left;
}

.stageColor{
	
}
.stageOpen{
	color: #54abff;
	background-color: #403151;
}
.sponsors{
	background-color: ghostwhite;
	border-radius: 6px;
	color: 000000;
	height:300px;
	margin-top: 40px;
	align-content: center;
	text-align: center;
	text-decoration: none;
	
}
.sponsorsMain{
	background-color: ghostwhite;
	border-radius: 10px;
	color: 000000;
	margin-top: 40px;
	align-content: left;
	text-align: left;
	text-decoration: none;
	
}
.formsMain{
	background-color: ghostwhite;
	border-radius: 10px;
	color: 000000;
	margin-top: 40px;
	align-content: center;
	text-align: center;
	text-decoration: none;
	
}
.formsLight{
	border-radius: 10px;
	margin-top: 40px;
	align-content: center;
	text-align: center;
	text-decoration: none;
	padding:17px 17px 50px;
color:#54abff;
	background-color: #403151;
}
.musicForm{
	background-color: ghostwhite;
	border-radius: 10px;
	color: 000000;
	margin-top: 40px;
	align-content: center;
	text-align: center;
	text-decoration: none;
	
}
.formDetail{
	font-size: .9rem;
	align-content: left;
	text-align: left;
}
.formDetailsmall {
	font-size: .8rem;
	
}
.formboxborder{
	border-radius: 8px;
	border-color: #403151;
	border-width: 3px;
	border-style: solid;
	
}
.bg-dark {
	background-color: #000000!important;
}
.questionbox {
	
	text-align: center;
	color:#ffffff;
	background-color: #403151;

	
}

@keyframes rotateOnLoad {
      0% {
        transform: rotateX(60deg); /* Start with the image upright */
      }
     
      100% {
        transform: rotateX(0deg); /* End with the image upright again */
      }
    }

    .imgrotate {
      transform-origin: middle top; /* Rotation around the horizontal middle */
      animation: rotateOnLoad 1s ease-in-out; /* Apply the animation on load */
    }

 
.question {
	
	text-align: center;
	color:#54abff;
	background-color: #403151;	
}
.accordion-button:not(.collapsed){
	background-color: #403151!important;

}
.flag{
	  border-radius: 20px;
}
.indexCard{
	
	border-radius: 20px;
	background-color: #403151;
	overflow: hidden; /* Prevent any image overflow if it exceeds the div */
	font-weight: 200!important;
    line-height: 1.6em!important;
    text-align: left;
	font-size: 16px;
	color: white;
	
}
.indexCard img{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	overflow: hidden;
	  object-fit: cover; /* Ensure the image fills the div, cropping if necessary */
	height: 240px;
}
.triplecard{
	padding:10px 0px;
}

.row-cols-2>* {
width: 100%!important;
}
@media (min-width: 400px) {
	.txtcontainers{
		width:100%!important;
	}
}
@media (min-width: 576px) {
  .triplecard {
    padding: 10px 0px!important; /* Padding for small devices and up */
  }
	.txtcontainers{
		width:100%!important;
	}
}

/* Padding for medium devices (md: ≥768px) */
@media (min-width: 768px) {
  .triplecard  {
    padding: 0px 30px!important; /* Padding for medium devices and up */
  }
}

/* Padding for large devices (lg: ≥992px) */
@media (min-width: 992px) {
  .triplecard  {
   padding: 0px 100px!important; /* Padding for large devices and up */
  }
}
@media (min-width: 1100px) {
  .triplecard  {
   padding: 0px 200px!important; /* Padding for large devices and up */
  }
}


.subheaderdark{
	color: #004fa9;
	transition: color 0.5s ease, opacity 0.5s ease; /* Smooth transition */
	text-decoration: none;
}
.subheaderdark:hover{
	color: #5683ec;
}
.containerdark {
	text-align: center;
	color:darkgray;
	padding: 100px 0; 
	background-color: #000000;
	font-size: 24px;
	
	
}
.containerdarksmall {
	text-align: center;
	color:darkgray;
	padding: 30px 0; 
	background-color: #000000;
	font-size: 24px;
}
.containerdarksmaller {
	text-align: left;
	color:#ffffff;
	padding: 20px 0; 
	background-color: #000000;
	font-size: 17px;
	line-height:.7;
	
	
}
.animated-div {
      opacity: 0; /* Hidden by default */
      transform: translateY(50px); /* Start off below */
      transition: opacity 1s ease, transform 1s ease; /* Smooth transition */
    }
.animated-div2 {
      opacity: 0; /* Hidden by default */
      transform: translateY(50px); /* Start off below */
      transition: opacity 1s ease, transform 1s ease; /* Smooth transition */
    }
.txtcontainers{
	 max-width: 475px; /* Optionally limit the max width */
	max-height: 356px;
	width: 100%!important;
}
.imgcontainers{
width: 100%; /* The div will take up the full width of its parent */
  max-width: 475px; /* Optionally limit the max width */
 /* Set the height of the div */
  overflow: hidden; /* Prevent any image overflow if it exceeds the div */	

}
.imgcontainers img {
  width: 100%; /* Make the image width fill the div */
  height: 100%; /* Make the image height fill the div */
  object-fit: cover; /* Ensure the image fills the div, cropping if necessary */
  border-radius: 20px;	
}

.slide-in-up {
  position: relative;
  opacity: 0;
  transform: translateY(100px); /* Starts off below */
  animation: slideInUp 0.5s ease-out forwards; /* Animation properties */
}
/* Keyframes for the slide-in-up effect */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(100px); /* Starts below */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Ends at its normal position */
  }
}
/* Initial state of the div */
.slide-in-up-pulse {
  position: relative;
  opacity: 0;
  transform: translateY(100px); /* Starts off below */
  animation: slideInUp 0.5s ease-out forwards, pulse 1s ease-in-out 0.5s 1 forwards; 
  /* Slide-in animation, followed by pulse animation after 0.5s delay */
}

/* Keyframes for the slide-in-up effect */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(100px); /* Starts below */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Ends at normal position */
  }
}

/* Keyframes for the pulse effect */
@keyframes pulse {
  0% {
    transform: scale(1); /* Initial size */
  }
  50% {
    transform: scale(1.1); /* Grows 10% larger */
  }
  100% {
    transform: scale(1); /* Returns to original size */
  }
}

.fadeInUp {
  animation: fadeInUp 1s ease-in-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }

}