/* Font Faces */
@font-face {
    font-family: 'Helvetica Now';
    src: url(https://www.siriusxm.com/app-download/fonts/helvetica-now/HelveticaNowTextRegular_normal_normal_subset1.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now';
    src: url(https://www.siriusxm.com/app-download/fonts/helvetica-now/HelveticaNowTextMedium_normal_normal_subset1.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now';
    src: url(https://www.siriusxm.com/app-download/fonts/helvetica-now/HelveticaNowTextBold_normal_normal_subset1.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now';
    src: url(https://www.siriusxm.com/app-download/fonts/helvetica-now/HelveticaNowDisplayBlack_normal_normal_subset1.woff2) format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Octin';
    src: url(../fonts/octin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.helvetica-100 {
  font-family: "Helvetica Now", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.helvetica-400 {
  font-family: "Helvetica Now", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.helvetica-800 {
  font-family: "Helvetica Now", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}



.octin-400 {
  font-family: "Octin", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


* {
    box-sizing: border-box;
}

body, html {
	background-color:#090a1c;
	margin: 0;
    padding: 0;
    font-family: 'Helvetica Now', Arial, sans-serif;
 /*   height: 100%;*/
   /* overflow-x: hidden;*/
}
/*
body {
  overflow-y: hidden !important;
}*/
html {
    scroll-behavior: smooth;
}

button#QSIFeedbackButton-btn {
	display:none !important;
}

#globalNav {
    height: 50px;
    width: 100%;
    top: 0;
    left: 0;
    position:relative; /* Make the header sticky */
    z-index: 10;
    background-color: #000;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap; /* Prevents inline elements from wrapping */
}

.introCopy {
	  font-family: "Helvetica Now", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
	color:#fff;
	font-size:24px;
	    flex-direction: column;
    justify-content: center;
    padding: 0px;
    max-width: 700px;
    width: 100%;
    height: 100%;
	margin:0 0 15px 0;
}
/* Sponsors */
/* Container for the gallery */
.image-gallery {
    display: flex;
    flex-wrap: wrap; /* Enables wrapping of items */
    gap: 10px; /* Space between images */
    justify-content: center; /* Centers the images horizontally */
    margin-top: 0px; /* Space above the gallery */
	padding-top:0px;
}

/* Images in the gallery */
.image-gallery img {
    width: 100%;
    max-width: 70px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .image-gallery img {
        max-width: 100%; /* Allows larger images on smaller screens */
		width:120px;
    }
}



#SweepsContentContainer #heroDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

#SweepsContentContainer #heroDiv img {
    max-width: 48%;
    height: auto;
}

#SweepsContentContainer .content {
    padding: 10px;
    text-align: center;
    background: #eee;
}

#resetLink {
    z-index: 1;
    position: relative;
	margin: 0 auto;
    font-family: "Helvetica Now";
    font-weight: 800;
	text-align:center;
    cursor: pointer;
	padding:10px;

}
a#resetSubmit {
    font-family: "Helvetica Now";
    font-size: 0.9em;
    font-weight: 800;
    color: #050505;
		text-align:center;
	text-decoration: none;
}


.simple-nav {
    position: relative;
    height: 50px;
    width: 100%;
}

.sxm-limited-nav {
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0,0);
    height: 50px;
}

.sxm-nav-content-container {
    display: block;
    height: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 1500px;
}

.sxm-nav-icons {
    display: flex;
    height: 50px;
    align-items: center;
    margin: 0 25px;
}

.icon .icon-logo-short.white,
.icon .icon-logo.white,
.icon .icon-sxm-pandora-logo.white {
    color: #fff;
    fill: #fff;
}



/* Instructions */
#SweepsContentContainer .instructions {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    margin: 0 auto;
    z-index: 10;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


/* Buttons */
#SweepsContentContainer .button.primary {
    background: #fff;
    color: #000;
}

#SweepsContentContainer .button {
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 20px;
    min-height: 53px;
    line-height: 1.42;
    padding: 17px;
    position: relative;
    transition: background .1s ease-in-out, color .1s ease-in-out;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    max-width: 300px;
    white-space: normal;
    border-radius: 30px;
    background: #0000eb;
    color: #fff;
    margin: 0 auto;
}

/* Main Content Layout */

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Now', sans-serif;
  /*  height: 100%;*/
    overflow-x: hidden;
}



.sxm-nav-content-container {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: left;
}

#SweepsContentContainer {
	    /*background: #dfddda;*/
	    max-width: 1100px; /* Adjust max-width as needed */
	margin:0 auto;
	/*border-bottom:1px solid #948d84;*/
}
#SweepsContentContainer .main-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px 5px 0px 5px;
/*    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 100%);*/
    flex: 1; /* Make it flexible to fill remaining space */
    box-sizing: border-box; /* Ensure padding is included in height/width */
    overflow: auto; /* Enable scrolling if content overflows */
    z-index: 2;
    position: relative; /* Add this to position elements relative to this container */
}

#SweepsContentContainer .content-columns {
/*    display: flex;*/
	display:none;
    width: 100%;
	 /*   border-top: 2px solid #625548;
    border-bottom: 1px solid #625548;*/
}

#SweepsContentContainer .hero-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

#SweepsContentContainer .hero-image {
    max-width: 100%;
    height: auto;
    margin: 0px;
}

#SweepsContentContainer .game-title {
    margin-top: 10px;
    font-size: 24px;
    text-align: center;
}


.questions-div {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.carousel-arrow {
    cursor: pointer;
    font-size: 24px;
    margin: 0 10px;
}

.carousel-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.questionContainer.red {
    background-color: #d8b2b2;
}



.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.carousel-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    opacity: 0.5;
    margin: 0 5px;
}

.carousel-bullet.active {
    opacity: 1;
}

.carousel-bullet.correct {
    background-color: #b7c5b7;
}

.carousel-bullet.incorrect {
    background-color: red;
}

#threeContainer {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative; /* Ensure threeContainer is positioned relative for canvas stacking */
    z-index: 1; /* Ensure it's above the background */
}
#threeContainer {
    max-width: 1500px;
    margin: 0 auto;
    background: transparent;  /* Ensure the background is transparent */
}

#TaylorContentBackground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./images/background_grd1.jpg') no-repeat center center;
    background-size: cover;
    z-index: -1; /* Ensure it's below other content */
}

,
.questionContainer.green {
    background-color: #b7c5b7 !important; /* Light green */
}

.questionContainer.red {
    background-color: #d8b2b2; /* Less vibrant red */
}
.questionContainer span.correctAnswer {
    font-family: "Helvetica Now";
    font-weight: 800;
	font-size:1.2em;
	color: #050505;
	margin-right:10px;
}
.questionContainer a.nextClueText {
    font-family: "Helvetica Now";
    font-weight: 600;
	font-size:1.0em;
	color: #050505;
}
/* Swiper container styling to ensure only one slide is visible */

.swiper-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px; /* Adjust padding as needed */
    /*background: #f0f0f0;*/ /* Adjust background color as needed */
	width:100%;
	min-height:37px;
    margin-bottom: 10px;
}


.swiper-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
/*    padding-bottom: 40px; */
}

.swiper-wrapper {
    display: flex;
    width: 100%;
}

.swiper-slide {
    height: 100%; /* Ensure slides take up the full height available */
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-controls .swiper-button-prev, .swiper-controls .swiper-button-next {
	    color: #050505 !important; /* Change this to the desired color */
    position: relative; /* Override absolute positioning */
    top: 0; /* Remove top offset */
    width: auto; /* Set custom width */
    height: auto; /* Set custom height */
    margin-top: 0; /* Remove negative margin */
    z-index: auto; /* Adjust z-index if needed */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	border:none;
	background:none;
}
.swiper-controls .swiper-button-prev::after, .swiper-controls .swiper-button-next::after {
    font-size: 18px; /* Adjust the size of the arrow */
	font-weight:bold;
}
.swiper-controls .swiper-button-prev {
    margin-right: 5px; /* Adjust spacing between buttons as needed */
}
.swiper-controls .swiper-button-next {
    margin-left: 5px; /* Adjust spacing between buttons as needed */
}

.swiper-controls .swiper-buttons {
    display: flex;
	margin-right:0;
	padding-right:0;
    gap: 15px; /* Space between the buttons */
}

.swiper-pagination-bullet.correct-answer {
    background-image: url('../images/correct_bullet.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(2.5); /* Increase the size by 25% */
	background-color:#3da717 !important;
	opacity:0.8 !important;
}
span.swiper-pagination-bullet.correct-answer.swiper-pagination-bullet-active {
	opacity:1 !important;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px) !important;
}
/* Positioning of navigation arrows */

/*
.swiper-button-prev {
    left: 5px;
	background: none;
	border: none;
}

.swiper-button-next {
    right: 5px;
	background: none;
	border: none;
}
*/

/* Indicators positioning */
.swiper-pagination {
    position: relative !important;
    bottom: 0px !important; /* Adjust to position just below the cards */
    width: 100%;
    text-align: left !important;
	flex:1;
	padding:5px;
}

/* Additional styles for pagination bullets */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    opacity: 0.5;
    margin: 0 5px;
	bottom:0;
}

.swiper-pagination-bullet-active {
    background-color: #000 !important;
}
#questionsCarousel {
height:100%;	
}
.questionContainer {
/*    background-color: #c9c6c1;*/
    padding: 20px 15px;
    margin: 0 auto;
    text-align: left;
    height: 100%;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /*justify-content: flex-end;*/
	color:#050505;
	border-radius:12px;
}


/* Question Cards */
#questionsDiv {
    display: flex;
    overflow-x: auto;
    padding: 0 15px;
    justify-content: center;
    width: 100%;
    min-width: 1200px;
}

#SweepsContentContainer .questions {
   padding: 0 5px 15px 5px;
    min-height: 200px;
    vertical-align: middle;
	font-family: "Aleo", serif;
    font-weight: 800;
	font-size:2em;
	line-height:1.2em;
	align-content: center;
	color:#050505;
}

#SweepsContentContainer .questionsDetail {
   padding: 0 5px 40px 5px;
	font-family:'Helvetica Now';
    font-weight: 500;
	font-size:1em;
	line-height:1.2em;
	color:#050505;
}

#SweepsContentContainer .header {
	font-family: "Aleo", serif;
    font-weight: 400;
	font-size:.7em;
	padding: 0 5px;	
}

#SweepsContentContainer .userAnswer input {
    width: 100%;
    height: auto;
    padding: 14px;
   /* margin: 0px 10px;*/
	text-align:left;
}
#SweepsContentContainer .submit-button {
    position: absolute;
    right: 4px;
    top: 50%;
	/*margin:5px;*/
    transform: translateY(-50%);
    padding: 10px 20px;
    background-color: #ccc;
    border: none;
    border-radius: 10px;
    cursor: not-allowed;
    font-size: 16px;
}

#SweepsContentContainer .submit-button:enabled {
    background-color: #050505;
    color: #fff;
    cursor: pointer;
}

#SweepsContentContainer .userAnwer {
	width:100%;
	padding:0px;
	margin:0px;
}
#SweepsContentContainer .input-wrapper {
    position: relative;
    width: 100%;
}

#SweepsContentContainer .answer-input {
    width: 100%;
    padding: 10px 80px 10px 10px;
   /* border: 1px solid #948d84;*/
	border:none;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 16px;
}



#carouselIndicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.carousel-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    margin: 0 5px;
    opacity: 0.5;
}

.carousel-bullet.active {
    opacity: 1;
}

.carousel-bullet.correct {
    background-color: #b7c5b7;
}

.carousel-bullet.incorrect {
    background-color: red;
}
.hint {
	width:100%;
    min-height: 30px;
    color: #333;
    margin: 0;
    font-size: 11pt;
	text-align:left;
line-height: 1.5;
align-items:center;
}


#SweepsContentContainer button#toggle2D a{
	color: #050505 !important;
}
#SweepsContentContainer button#toggle3D a{
	color: #050505 !important;
}
#faq-accordion .faq-toggle h3 {
	color: #2b2b2b !important;
	padding:0px;
	margin:5px 0 10px 0;
	font-weight:400;
	font-family:'Helvetica Now';
}
#faq-accordion button .toggle-icon {
	color: #2b2b2b !important;
}

.hintOutside {
    min-height: 30px;
	margin-top: 10px;
	    display: flex;
    align-items: center;
}
.hintIcon {
    margin-right: 10px;
    display: flex;
    align-items: center;
	width:10%;
	
}

.hintIcon img{
max-width:100%;
}



.game-title {
    font-size: 11pt;
}

#SweepsContentContainer .left-column {
 z-index: 1;
    font-family: "Helvetica Now";
    font-size: 1em;
    font-weight: 800;
	color: #050505;
    min-width: 120px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: left;
	width:90%;
	
	
}

#SweepsContentContainer  .right-column {
	z-index: 1;
    font-family: "Helvetica Now";
    font-size: 1em;
    font-weight: 400;
	color: #050505;
    padding: 10px 10px;
	justify-content: right;
	width:10%;
	min-width:40px;
    align-items: center; /* Ensure vertical alignment in case of varying content heights */

}
#SweepsContentContainer  .right-column .howToPlaySteps{
	font-weight:800;
}
#SweepsContentContainer #gameDescDesktop {
	display:block;
}
#SweepsContentContainer #gameDescMobile {
	display:none;
}
@media (max-width: 768px) {
	.swiper-controls {
    margin-bottom: 5px;
}
	#SweepsContentContainer .questions {
	font-size:1.5em;
	}
	#SweepsContentContainer .questionsDetail {
	font-size:0.9em;
	padding-bottom:5px;
	}
	
	#SweepsContentContainer #image_subtitle {
		display:none;
	}
	#SweepsContentContainer #gameDescDesktop {
		display:none;
	}
	#SweepsContentContainer #gameDescMobile {
		display:block;
		padding:0px;
		margin:0px;
	}
    #SweepsContentContainer .main-content {
        flex-direction: column;
		padding:10px 10px 0px 10px;
    }

    #SweepsContentContainer .content-columns {
       /* flex-direction: column;*/
		
    }

   /* #SweepsContentContainer .left-column, #SweepsContentContainer .right-column {
        width: 100%;
        z-index: 1;
    }*/
#SweepsContentContainer .right-column {
	padding:3px 0px 0px 0px;
	   word-break: break-word; /* Ensure long words don't overflow */

	}
#SweepsContentContainer #intro-Content .content-columns .right-column a {
    color: #050505; /* Customize link color */
    text-decoration: underline; /* Underline links */
	font-weight:800;
}
	
#SweepsContentContainer #intro-Content .content-columns .right-column a:hover {
    color: #0000aa; /* Customize link hover color */
}
#SweepsContentContainer  .left-column {
/*	padding:10px 5px 0px 5px;*/
	}
	#SweepsContentContainer .hero-div {
        flex-direction: column;
        align-items: center;
    }

    .questions-div {
        margin-top: 0px;
    }

    #threeContainer {
        height: auto;
        min-height: 300px;
    }
	#gameHeader{
		padding:0px;
		margin:5px;
	}	
	.hintOutside {
    min-height: 30px;
}
	.questions {
    padding: 0 5px;
    min-height: 40px;
    vertical-align: middle;
		font-size:14px;
}
	inpswer input {
    width: 200px;
    padding: 3px;
    margin: 5px 0px;

}
	.submit img {
    cursor: pointer;
    width: 100%;
    height: auto;
    max-width: 200px;
}
}


#gameHeader{
	font-weight: bold;
}



#SweepsContentContainer #intro-Content {

    max-width: 1500px;  /* Limit the max width */
    margin: 0 auto;     /* Center the container */
}

#SweepsContentContainer input, #SweepsContentContainer textarea {
    font-size: 16px; /* Ensure the font size is at least 16px to prevent zoom */
}


#threeContainer {
    position: relative; /* This can be omitted if not needed */
    width: 100%;
    height: 100%;
}

.instructions-overlay {
    position: absolute;
    top: 40%; /* Align the top of the overlay with the top of the threeContainerOuter */
    left: 50%;
    transform: translateX(-50%);
    width: 65%; /* Adjust width as needed */
    max-width: 400px; /* Set a max width for better control */
    /*opacity: 0;*/
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* Ensure it doesn't block interactions */
    z-index: 10; /* Ensure it is above the canvas */
    text-align: center; /* Center the image inside the div */
}

.instructions-overlay img {
    width: 100%; /* Ensure the image scales with the div */
    height: auto; /* Maintain aspect ratio */
}
.instructions-overlay .readyToPlay{
	display:none;
}

#instructionOverlay div#instructionCue{
	    font-family: "Helvetica Now";
width:75%;
	margin:0 auto;
}



.answerQuestions {
display:block;
opacity:1;
}

.answerQuestions  p#instructionsCueIntro{
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.1em;
	color:#6f6c69;
	padding:0;
	margin:0;
}
.answerQuestions p#beadCount{
    font-weight: 600;
    padding:0px;
	margin:0;
    font-size: 1.7em;
}

@media (max-width: 768px) {
    .instructions-overlay {
        position: absolute;
        top: 35%; /* Align the top of the overlay with the top of the threeContainerOuter */
        left: 50%;
        transform: translateX(-50%);
        width: 80%; /* Adjust width as needed */
        max-width: 400px; /* Set a max width for better control */
        /*opacity: 0;*/
		opacity:1;
        transition: opacity 0.5s ease-in-out;
        pointer-events: none; /* Ensure it doesn't block interactions */
        z-index: 10; /* Ensure it is above the canvas */
        text-align: center; /* Center the image inside the div */
    }
	.answerQuestions p#beadCount {
		font-size:1.4em;
	}
}

/* 2D Game Extension */



#SweepsContentContainer a:focus {
    outline: 2px solid #005dd8; /* Blue outline for focused links */
}

#gameToggle {
    text-align: right;
    /*margin-top: 20px;*/
    z-index: 10; /* Ensure it is above other elements */
    position: relative;
}

#twoDGame {
    display: none; /* Initially hide the 2D game container */
    position: relative; /* Ensure it is positioned relative */
    z-index: 5; /* Set z-index to be above the background */
    padding: 0; /* Remove padding */
    background: #fff;
}

#twoDGame .row {
    text-align: center;
    padding: 10px;
}

#twoDGame .header {
	font-family: "Helvetica Now";
    font-size: 1.6em;
    font-weight: 600;
    color: #050505;
	
	
}
#twoDGame #twoDInstructions {
	font-family: "Helvetica Now";
    font-size: 1em;
    font-weight: 400;
    color: #4d4d4d;
}

#twoDGame .beads {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
    max-width: 100%;
    padding: 0 4px; /* Add 4px padding on left and right sides */
}

#twoDGame .beadCell {
    flex: 1;
    min-width: 25px;
    max-width: 50px;
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

#twoDGame .beadCell img {
    max-width: 100%;
    height: auto;
}

#twoDGame button {
    background: #000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

#twoDGame button:hover,
#twoDGame button:focus {
    background: #444;
}

#threeContainerOuter {
	    position: relative; /* Ensure the instructions overlay is positioned relative to this */
    overflow: hidden; /* Prevent background from affecting the layout */
    z-index: 3; /* Ensure it's above the background but below the toggle */
}

#SweepsContentContainer .beadCell:focus {
    outline: 2px solid #005dd8; /* Blue outline for focused cells */
}

#SweepsContentContainer .beadCell img.used {
    opacity: 0.5; /* 50% opacity for used beads */
}

#SweepsContentContainer button:disabled {
    background-color: #cccccc; /* Light grey background */
    color: #666666; /* Dark grey text */
    cursor: not-allowed; /* Change cursor to indicate the button is not clickable */
    opacity: 0.6; /* Make it semi-transparent */
}

#SweepsContentContainer #uncoveredBeads,#SweepsContentContainer #solvedPuzzle {
    min-height: 100px; 
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Preload */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000;
    transition: opacity 1s ease-in-out;
	 justify-content: center;
	background:none;
/*	background: url('../images/straykids_background.jpg') repeat center center;*/
    z-index: 100;
}

.loading-container img.siriusxmLogo {
    width: 60px;
    margin-bottom: 20px;
}

.loading-container img.eraslogo {
    width: 450px;
    margin-bottom: 20px;
}


@keyframes expandBar {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.loading-bar {
    height: 5px;
    background-color: #fbde9c;
    width: 100%;
    transform-origin: center;
    transform: scaleX(0); /* Start with no width */
    transition: width 0.5s ease-in-out;
}

.fade-in {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
    visibility: visible;
}

#SweepsContentContainer button#toggle2D, #SweepsContentContainer button#toggle3D {
	font-family: "Helvetica Now";
	font-size:1em;
	background: none;
    cursor: pointer;
    border: none;
    padding: 5px 15px;
    margin: 5px 0px 5px 5px;
    border-radius: 8px;
    font-weight: 700;
	color:#050505 !important;
}
#SweepsContentContainer button#toggle3D {
    margin: 5px 0px 5px 10px;
}
#SweepsContentContainer button#toggle2D.active, #SweepsContentContainer button#toggle3D.active {
	background:#e3e3de;
	color:#050505 !important;	
}

/* New Styles for gameSpace */
#gameSpaceOuter {
    display: flex;
    justify-content: center;
	padding:30px 10px 40px 10px;
/*    padding: 10px 10px 20px 10px;*/
/*    background: #edece8;*/
	border:none;
	margin:0 auto;
}

#gameSpaceInner {
    max-width: 1100px;
    width: 100%;
    display: flex;
    flex-direction: column;
	border:none;
}

#playQuestions {
    display:flex;
	flex-direction:column;
	height:100%;
}

.playArea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
	padding:10px;
}
.game-toggle {
    display: flex;
    align-items: center;
	    font-family: "Helvetica Now";
    font-size: 0.9em;
    font-weight: 700;
	padding-right:5px;
    color: #050505;
}
.assemble-bracelet {
    font-family: "Helvetica Now";
    font-size: 0.9em;
    font-weight: 800;
	padding-left:15px;
    color: #050505;
}
.puzzleQuestionHeader{
	display:none;
}
.inviteInner {
	/*background:#fff;
	border-radius:12px;*/
	padding-top:5px;
}
/* Responsive Layout */
#playQuestions {
	font-family: "Aleo", serif;
	background-color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
	/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
}
#playInstructions {
    /*background: #f9f9f9;*/ /* Light background for contrast */
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
		  font-family: "Aleo", serif;
	padding: 10px;
	line-height:1.25em;
    border-radius: 8px;
   
	margin-bottom: 10px;
	text-align:center;
}
#playInstructions h2{
	margin:8px 0px;
}
#playInstructions a{
	color:rgba(185,9,12,1.00);
}
#playInstructions img {
	width:100%;
	max-width:250px;
}
@media (min-width: 768px) {



    #gameSpaceInner {
        flex-direction: row;

    }

    #playQuestions {
        width: 65%;
		padding:10px;

    }

#playInstructions {
    width: 35%;
	        margin-right: 15px;
		margin-bottom:0px !important;
}
}

@media (max-width: 768px) {
		.playArea-header {
	padding:5px 0 0 0;
}
		#gameSpaceOuter {
    padding: 0px 10px 10px 10px;
}
    #gameSpaceInner {
        flex-direction: column;
    }

    #playQuestions {
        width: 100%;
		padding:10px;
        margin-bottom: 0px !important;
    }

    #playArea {
        width: 100%;
		flex-direction: column;

    }
}

/* Ensure entryDiv appears below gameSpaceOuter */
/* Intro Card */
/*
#sweepsContent #introScreen {
	padding:0px;
	text-align:center;
	font-family:'Helvetica Now';
	height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
display:flex;
}
*/
.startNote {
			  font-family: "Aleo", serif;
	font-weight:600;
	text-align:center;
	font-size:1.3em;
	line-height:1.7em;
	display:inline;
	color:#fff;
	
}
div#gameSpaceInner {
    background-color:#0a1020;
	padding: 20px;
    border-radius: 12px;
}

div#playArea {
    border-radius: 12px;
}
div#playArea-head {
    padding: 10px;
}
/*
#sweepsContent {
background:#050505;	
}
*/

.eventDetail{
font-family: "Aleo", serif;
	color:#fff;
}
.eventDetail p.detailPrimary {
	font-size: 2.5em;
	font-weight: 600;
	margin:0px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.eventDetail p.detailSecondary {
	font-size: 2.5em;
	font-weight: 600;
	margin:0px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
/* Responsive Styles */
@media (max-width: 768px) {
	.eventDetail p.detailPrimary {
	font-size: 2em !important;
}
.eventDetail p.detailSecondary {
	display:none;
	}
}

#sweepsContent .seeOfferDetails a{
    color: #a99c9c !important;
}
#sweepsContent #introScreen .intro-image img {
	max-width:100%;
}


#sweepsContent #introScreen .intro-link {
	width:60%;
	max-width:300px;
	margin:0 auto;
	padding-top:15px;
	text-align:center;	
}

#sweepsContent #introScreen p.inviteOuter {
	width:100%;
	max-width:600px;
	padding:10px 0px 20px 0px;
	margin:0 auto;
	text-align:center;
}
#sweepsContent #introScreen p.inviteOuter img {
	width:100%;
/*	max-width:450px;*/
}
#sweepsContent #introScreen p.puzzleName {
padding:5px 0 0 0;
margin:0;
}
#sweepsContent #introScreen p.puzzleName img {
	width:100%;
	max-width:600px;
}

#sweepsContent h1 { 
		  font-family: "Aleo", serif;
	font-weight:800;
	text-align:center;
	font-size:4em;
	line-height:1em;
	display:inline;
	
}
#sweepsContent #introScreen .introEligibilitySingle {
	  display: block;
	max-width: 500px;
    width: 100%;
	margin:0 auto;
	padding:5px 0px;
	
}
#sweepsContent #introScreen .introEligibility {
/*    display: flex;*/
	display:none;
	max-width: 500px;
    width: 100%;
	background:#fff;
	margin:0 auto;
	padding:5px 0px;
	border-top: 2px solid #625548;
	border-bottom: 1px solid #625548;
	border-left:1px solid #625548;
	border-right:1px solid #625548;
	
    width: 90%;
    max-width: 600px;
    margin: 0 auto 15px;
}

.sweeps_button_primary {
	    cursor: pointer;
    display: block;
    font-size: .875rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 10px;
	margin-bottom:10px;
    min-height: none;
    line-height: 1.5rem;
    padding: 1rem 1.5rem;
    position: relative;
    transition: background .1s ease-in-out,color .1s ease-in-out;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    white-space: normal;
    border-radius: 40px;
	border: 1px solid;
	color:#fff;
}
#getStartedButton .sweeps_button_primary a{
color:#fff !important;
}

    #sweepsContent #introScreen .introEligibility .introEligiblityLeft {
        margin-right: 10px;
    font-size: 0.8em;
    font-weight: 800;
    color: #050505;
		    display: flex;
    align-items: center;
    justify-content: center;
    }
    #sweepsContent #introScreen .introEligibility .introEligiblityRight {
        margin-right: 0px;
		font-weight:300;
		font-size: 0.8em;
		color:#625548;
		

    }

    #sweepsContent #introScreen .introEligibility .introEligiblityRight a{
    color: #050505; /* Customize link color */
    text-decoration: underline; /* Underline links */
	font-weight:800;
		

    }



@media (min-width: 768px) {
	/*
	#sweepsContent h1 {
	padding:0px 0px 10px 0px;
			margin:0;
	}*/
	div#gameSpaceInner {
    padding: 15px;
}
	#sweepsContent #introScreen h1 {
	font-size:1.2em;
		line-height:0.8em;
}
	
	#sweepsContent #introScreen .eventDetail {
	color:#ffffff;
}
	
	#sweepsContent #introScreen .eventDetail h1{
	color:#a99c9c;
	font-weight:400;
	font-size:1.2em;
		line-height:1.2em;
		padding:15px 0px;
		margin:0;
}

#sweepsContent #introScreen .introEligibility {
    flex-direction: row;
	}
    #sweepsContent #introScreen .introEligibility .introEligiblityLeft {
        width: 10%;
    }

      #sweepsContent #introScreen .introEligibility .introEligiblityRight {
        width: 90%;
		text-align:left;
		font-size:1em;
    }
}


@media (max-width: 768px) {
	
		div#gameSpaceInner {
    padding: 10px 10px 10px 10px;
}
	#SweepsContentContainer .questions {
    padding: 0;
		font-size:1.4em;
    min-height: 25px;
	}
	
	.questionItems {
		min-height:100px;
	}
	
		#sweepsContent #introScreen p.inviteOuter {
		padding:0;
	}
	#sweepsContent #introScreen .eventDetail h1{
	color: #edece8;
        font-weight: 400;
	font-size:1.1em;
		line-height:1.1em;
        padding: 10px 0px;
        margin: 0;
}
	
#sweepsContent #introScreen .introEligibility {
    flex-direction: column;
	}
	/*
	#sweepsContent h1 {
	font-size:2.5em;
	line-height:1em;
	padding:5px 0 15px 0px;
		margin:0;
}
	*/
		    #sweepsContent #introScreen .introEligibility .introEligiblityLeft {
        width: 100%;
			text-align:center;
			font-size:.9em;
			font-weight:600;
    }
	    #sweepsContent #introScreen .introEligibility .introEligiblityRight {
        width: 100%;
			text-align:center;
			font-size:.9em;
			font-weight:400;
    }
}

/*Form CSS */

.formError {
    color: #ffea00;
    font-size: .75rem;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    column-gap: 4px;
	display:none;
}


.checkbox-container {
    display: flex;
    align-items: normal;
    margin-top: 5px; /* Space between checkbox and label */
}

.checkbox-container label {
    margin-left: 5px; /* Space between checkbox and label */
}


#entryDiv{
    /*background-color: #9b470a;*/
    padding-bottom: 25px;
	/*border-top:2px solid #fff;*/
}

#entryDiv {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#entryFormContainer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px;
}

#entryFormContainer p{
	color:#fff;
}
#entryFormContainer #entryCongrats {
	padding:10px;
	text-align:center;
}


#entryFormContainer #entryCongrats h1{
		  font-family: "Helvetica Now", serif;
	font-weight:600;
	line-height:1em;
	text-align:center;
		color:#fff;
	padding:5px;
	font-size:2em;
}

#entryFormContainer #entryCongrats p{
		  font-family: "Helvetica Now", serif;
	font-weight:400;
	font-size:1em;
	line-height:1.2em;
	text-align:center;
		color:##ffd10f;
	padding:10px;
}
#entryFormContainer #entryCongrats p a{
	font-weight:800;
		color:#fff;
}

form#entryForm {
    padding: 20px;
background: #202d62;
/*background: linear-gradient(354deg, rgba(38,1,3,1) 0%, rgba(69,3,8,1) 17%, rgba(43,1,4,1) 36%, rgba(139,4,9,1) 70%, rgba(108,12,20,1) 100%);
	*/
   /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better visual separation */
	border-radius:12px;
	max-width:400px;
	margin:0 auto;
}



#entryForm fieldset {
    border: none;
    padding: 10px;
    margin-bottom: 0px;
	
}

#entryForm legend {
	font-family: "Helvetica Now";
	font-weight:600;
	font-size:1.1em;
	line-height:1em;
	color:#fff;
	padding:10px 0px;
	margin-bottom:0px;
}

#entryForm .form-group {
    margin-bottom: 10px;
}
#entryForm .form-section .form-group.agreements label {
	font-size:0.9em;
}

#entryForm label {
    display: block;
    margin-bottom: 5px;
}

#entryForm input[type="text"],
#entryForm input[type="tel"],
#entryForm select {
    width: 100%;
    height: auto;
    padding: 14px;
    /* margin: 0px 10px; */
    text-align: left;
	border:none;
	border-radius:6px;
	    font-weight: 600;
}




#entryForm input[type="checkbox"] {
    margin-right: 10px;
    width: 24px; /* Adjust size as needed */
    height: 24px; /* Adjust size as needed */
    border-radius: 4px;
	min-width:24px;
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* Remove default styling for Safari */
    -moz-appearance: none; /* Remove default styling for Firefox */
    outline: none; /* Remove border */
    background-color: white; /* Background color */
    cursor: pointer; /* Pointer cursor on hover */
    border: none;
    display: inline-block;
    position: relative;
	border:1px solid #2a2522;
}

#entryForm input[type="checkbox"]:checked {
    background-color: #005dd8; /* Background color when checked */
}

#entryForm input[type="checkbox"]:checked::after {
    content: '\2714'; /* Unicode character for checkmark */
    font-size: 16px; /* Adjust checkmark size */
    color: white; /* Checkmark color */
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to be perfectly centered */
}

#entryForm button[type="submit"] {
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

#entryForm button[type="submit"]:hover,
#entryForm button[type="submit"]:focus {
    background-color: #F2D2D2;
}

#entryForm .form-group-inline {
    display: flex;
    gap: 10px;
}
a#formOfficialRules{
	color:#050505;
}
#entryForm .form-group-inline .form-group {
    flex: 1;
}
/* Adjusting the agreements section */
#entryForm .form-section .form-group.agreements {
    display: flex;
    align-items: left;
	flex-direction: column;
}

#entryForm .form-section .form-group.agreements label {
    display: inline;
    margin-bottom: 0;
    width: auto; /* Override the fixed width for agreement labels */
}

/* Content Details */
#contestDetails{
/*background:#000;*/
/*	background:#42210e;*/
	/*border-top:2px solid #ff9bd1;*/
	padding:10px;
}
#contestDetails #ContentContainer {
	max-width:1080px;
	margin:0px auto;
	    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	padding:10px 0px;
	background:#fff;
	border-radius:12px;

}
#contestDetails .content-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
   #contestDetails  .image-container, #contestDetails .text-container {
        width: 50%;
    }
   #contestDetails  .image-container {
       margin:0 auto;
	   text-align:center;
	   padding-top:15px;

    }
   #contestDetails  .image-container img {
        max-width:90%;

    }
#contestDetails .hero-content-header {
    font-size: 1rem;
    line-height: 1.12;
    letter-spacing: 0;
    font-weight: 800;
    margin: 0px 0px 16px 0px;
    text-align: center;
    padding: 0;
    width: 100%;
}
#contestDetails .icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -ms-grid;
    display: grid;
    row-gap: 12px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}
#contestDetails .icon-list li {
    display: flex;
    align-items: center;
}

#contestDetails .icon-list li .icon:not(:last-child),#contestDetails .icon-list li img:not(:last-child) {
    margin-right: 12px;
}

#contestDetails .icon-list li .icon, .icon-list li img {
    width: 40px;
    min-width: 40px;
}

#contestDetails .marketing-message p {
    padding: 0;
    margin: 0;
}

#contestDetails .bullet-header {
    color: #000;
}

#contestDetails .contestDetailsInner {
		background:#fff;
	border-radius: 12px;
}
#contestDetails #event-details {
    text-align: center;

    line-height: 1.6em;
    font-size: 1em;
	    flex: 1;
    min-width: 40%; /* Adjust as needed */
}

#contestDetails .extra-copy a.ruleslink{
    color: #050505; /* Customize link color */
    text-decoration: underline; /* Underline links */
}


#contestDetails .fulldetails {
    text-align: left;
    line-height: 1.3em;
	font-size:1em;
	padding:20px 40px 20px 20px;
	color: #050505;
    font-family: "Helvetica Now";
    font-weight: 400;
	  flex: 2;
    min-width: 40%; /* Adjust as needed */
}
#contestDetails .fulldetails a{
	color: #050505;
}

#contestDetails h1{
    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 1.6em;
    line-height: 1em;
    text-align: left;
    color: #050505;
    padding:20px 20px 0 50px;
	margin:0;
}

@media (max-width: 768px) {
	#entryFormContainer #entryCongrats h1 {
    font-size: 1.6em;
}
	#contestDetails {
    padding: 20px;
}
	
	#contestDetails h1{
		text-align:center;
		padding: 10px 20px 0 20px;
	}
	#contestDetails .content-container {
        flex-direction: column;
    }
	   #ContentContainer {
        flex-direction: column;
    }

    #event-details, .fulldetails {
        width: 100%;
		min-width:1%;
    }
	
    #contestDetails .image-container,#contestDetails .text-container {
        display: block;
        width: 100%;
    }
}

/* Tour Details */
#tourDetails{

	background:#000;
	/*border-top:2px solid #ff9bd1;*/
	padding:25px 10px 10px 10px;
}
#tourDetails #ContentContainer {
	max-width:1080px;
	margin:0px auto;
	    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	padding:10px 0px 30px 0px;
	background:#fff;
	border-radius:12px;

}
#tourDetails .content-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
   #tourDetails  .image-container, #tourDetails .text-container {
        width: 50%;
    }
   #tourDetails  .image-container {
       margin:0 auto;
	   text-align:center;
	   padding-top:15px;

    }
   #tourDetails  .image-container img {
        max-width:90%;

    }
#tourDetails .hero-content-header {
    font-size: 1rem;
    line-height: 1.12;
    letter-spacing: 0;
    font-weight: 800;
    margin: 0px 0px 16px 0px;
    text-align: center;
    padding: 0;
    width: 100%;
}
#tourDetails .icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -ms-grid;
    display: grid;
    row-gap: 12px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}
#tourDetails .icon-list li {
    display: flex;
    align-items: center;
}

#tourDetails .icon-list li .icon:not(:last-child),#tourDetails .icon-list li img:not(:last-child) {
    margin-right: 12px;
}

#tourDetails .icon-list li .icon, .icon-list li img {
    width: 40px;
    min-width: 40px;
}

#tourDetails .marketing-message p {
    padding: 0;
    margin: 0;
}

#tourDetails .bullet-header {
    color: #000;
}

#tourDetails .tourDetailsInner {
		background:#fff;
	border-radius: 12px;
}
#tourDetails #event-details {
    text-align: center;

    line-height: 1.6em;
    font-size: 1em;
	    flex: 1;
    min-width: 40%; /* Adjust as needed */
}

#tourDetails .extra-copy a.ruleslink{
    color: #050505; /* Customize link color */
    text-decoration: underline; /* Underline links */
}


#tourDetails .fulldetails {
    text-align: left;
    line-height: 1.3em;
	font-size:1em;
	padding:20px 40px 20px 20px;
	color: #050505;
    font-family: "Helvetica Now";
    font-weight: 400;
	  flex: 2;
    min-width: 40%; /* Adjust as needed */
}
#tourDetails .fulldetails a{
	color: #050505;
}

#tourDetails h1{
    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 1.6em;
    line-height: 1em;
    text-align: left;
    color: #050505;
    padding:20px 20px 0 50px;
	margin:0;
}

@media (max-width: 768px) {
	#entryFormContainer #entryCongrats h1 {
    font-size: 1.6em;
}
	#tourDetails {
    padding: 20px;
}
	
	#tourDetails h1{
		text-align:center;
		padding: 10px 20px 0 20px;
	}
	#tourDetails .content-container {
        flex-direction: column;
    }
	   #ContentContainer {
        flex-direction: column;
    }

    #event-details, .fulldetails {
        width: 100%;
		min-width:1%;
    }
	
    #tourDetails .image-container,#tourDetails .text-container {
        display: block;
        width: 100%;
    }
}
/*FAQ Details */

/* FAQ Section */
#faqDetails {
	/*background:#000;*/
/*	background:#42210e;*/
	/*border-top:2px solid #ff9bd1;*/
    padding: 20px;
}
#faqDetails #faqInner {
	    max-width: 1080px;
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0px;
    background: #fff;
    border-radius: 12px;
}
#faqDetails #faq-accordion {
    text-align: left;
    line-height: 1.3em;
    font-size: 1em;
    padding: 20px 40px 20px 20px;
    color: #4d4d4d;
    font-family: "Helvetica Now";
    font-weight: 400;
    flex: 2;
    min-width: 40%;
}
#faqDetails #faq-accordion a{
    color: #4d4d4d;
}
		div#faq-header h1{
    text-align: center;
    line-height: 1.6em;
    font-size: 1em;
    flex: 1;
    min-width: 40%;
			font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 1.6em;
    line-height: 1em;
    text-align: left;
    color: #050505;
    padding: 20px 20px 0 50px;
    margin: 0;
			
}
		div#faq-accordion {
			margin-bottom:0px;
		}
    .faq-content div {
        padding: 10px;
		border:none;
		color:#050505;
    }
    #faq-accordion button {
        width: 100%;
        text-align: left;
    }
    #faq-accordion button .toggle-icon {
        float: right;
		font-size:1.7em;
		font-family: "Helvetica Now";
    	font-weight: 500;
		
    }

#faq-accordion .faq-toggle {
    cursor: pointer;
    padding: 5px 15px 5px 15px;
    border: 0px;
    /*border-bottom: 1px solid #625548;*/
    /*border-top: 2px solid #625548;*/
	background:none;
    transition: background-color 0.3s ease;
}

#faq-accordion .faq-toggle:hover {
    background-color: #ffffff;
}

#faq-accordion .faq-toggle h3 {
    display: block;
    width: 90%;
    float: left;

}

#faq-accordion .faq-toggle .icon {
    float: right;
    transition: transform 0.3s ease;
}

#faq-accordion .faq-content {
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.3s ease;
    padding: 0;
}
#faq-accordion .faq-toggle.open {
    background-color: #e9e9e9;
}

#faq-accordion .faq-toggle.open .icon {
    transform: rotate(180deg);
}

#faq-accordion .faq-toggle.open + .faq-content {
    padding: 1em;
}

#faq-accordion div.faq-content {
    border-top: 1px solid gray;
    transition: max-height 0.3s ease-out; /* For smooth opening/closing */
    overflow: hidden; /* To prevent content from overflowing when closed */
}

#faq-accordion div.faq-content p{
    padding: 10px;
/*	border-bottom:2px solid #e8e8e8;*/
}
@media (max-width: 768px) {

	div#faq-header h1{
		text-align:center;
		padding: 10px 20px 0 20px;
	}
	#faqDetails #faqInner {
        flex-direction: column;
    }

    #faq-header h1, #faq-accordion {
        width: 100%;
		min-width:1%;
    }

}

video {
	width:90%;
	max-width:800px;
	border-radius:8px;
}
/*Confirmation Page*/
#confirmScreen {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; 
    text-align: center; /* Center text */
    padding: 20px; /* General padding */
    box-sizing: border-box;
	/*background: rgb(38,1,3);
background: linear-gradient(354deg, rgba(38,1,3,1) 0%, rgba(69,3,8,1) 17%, rgba(43,1,4,1) 36%, rgba(139,4,9,1) 70%, rgba(108,12,20,1) 100%);
*/	
}

#confirmScreen .confirm-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
	margin-top:0px;
    /*margin-top: 60px;*/ /* Add initial margin to account for the global nav height */
}
#sweepsContent #confirmScreen .confirmationContent {
    width: 90%;
    /* max-width: 600px; */
    margin: 0 auto 5px;
    text-align: center;
    font-weight: 400;
}

.confirmContentContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 20px;
}

.confirmContentItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 150px; /* Adjust as needed */
}

.confirmContentImage img {
    border-radius: 16px;
    width: 100%;
    height: auto;
}

.confirmContentTitle {
    font-weight: bold;
    margin-top: 10px;
}
.confirmationContent .countdownEntry{
    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1em;	
	padding:0;
}
.confirmationContent .countdownSubtitle{
    font-family: "Helvetica Now";
    font-weight: 500;
    font-size: 1em;
    line-height: 1em;	
}
.confirmationContent h1.countDownClock{
    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 3em;
    line-height: 1em;
	padding:0px;
	margin:10px;
}
.confirmationContent .countdownProgramming {
    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 1em;
    line-height: 1.25em;	
}


.confirmationContentDesc {
    margin: 3px 0;
	min-height:25px;
	font-size:0.8em;
}
#howToPlayModal a{
    color: #625548;
    text-decoration: underline;
    font-weight: bold;

}
.confirmContentLink a {
    color: #005dd8;
    text-decoration: none;
    font-weight: bold;
}
/* Instruction Cues */
/*#playQuestions {
    border: 1px solid #6d5151;
    animation: glow 1s infinite alternate;
}*/

@keyframes glow {
    from {
        box-shadow: 0 0 3px #ffcc00;
    }
    to {
        box-shadow: 0 0 10px #ffcc00;
    }
}
#instructionOverlay{
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: rgba(0, 0, 0, 0.75); 
	/*display: flex; justify-content: center; */
	align-items: center; 
	z-index: 1001;
	display:none;
	
}



.puzzleQuestionHeader img{
	max-width:100%;
}

/* Parent container using flexbox */


/* Intro Content New */

#introScreen {
   /* height: 100vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
	background:none;
/*	background: url('../images/straykids_background.jpg') repeat center center;*/
/*background: rgb(0,0,0);
background: linear-gradient(16deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 36%, rgba(51,3,3,1) 46%, rgba(41,4,4,1) 51%, rgba(61,4,4,1) 55%, rgba(69,5,5,1) 62%, rgba(91,6,6,1) 66%, rgba(78,9,9,1) 71%, rgba(65,9,9,1) 76%, rgba(71,12,12,1) 79%, rgba(54,9,9,1) 82%, rgba(19,8,8,1) 100%);*/
    text-align: center; /* Center text */
    /*padding: 20px;*/ /* General padding */
    box-sizing: border-box;
/*    background-repeat: repeat;*/
}


#introScreen .intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1100px; /* Adjust max-width as needed */
	margin-top:0px;
    /*margin-top: 60px;*/ /* Add initial margin to account for the global nav height */
}
/*.introCopyRight {
	max-width:500px;
	width:90%;
}*/
.intro-title {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content horizontally */
    flex-wrap: wrap; /* Allow wrapping if needed */
    text-align: left; /* Remove centered text alignment */
}

/* Remove display inline from h1 and p elements */

#sweepsContent #introScreen h1 {
    font-size: 1.4em;
    color: #bfb3a5;
    display: inline-block;
	line-height:1.5em;
	    margin: 0;
}

#sweepsContent #introScreen h1.countDownClock {
    font-size: 2.5em;
    font-family: "Helvetica Now";
    font-weight: 600;
    color: #fff;
    display: inline-block;
    line-height: 1.5em;
    margin: 0;
}

#sweepsContent h1 {
    font-family: "Helvetica Now";
    font-weight: 500;
    font-size: 4em;
    line-height: 1.5em;
    display: inline-block;
	    margin: 0;
}



.intro-title p {
    margin: 0;
    padding: 0;
}

.eventDetail h1{
    font-size: 1.2em;
    margin: 0;
    padding-left: 10px;
}

/* Intro Content New */
/* Intro Content New */
.intro-content-new {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 1800px;
    width: 100%;
    height: 100%;
}

/* Image Container */
.image-container {
    display: flex;
    align-items: center; 
    height: 100%;
    /*max-width: 60%;*/
	width:50%;
    justify-content: right; 
}

.image-container img {
    height: auto; /* Maintain aspect ratio */
    max-height: 750px;
	max-width:100%;
}

/* Text Container */
.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px;
    /*max-width: 500px;*/
    width: 50%;
	height:100%;
}

/* Info Box */
.info-box {
   /* background: rgba(0, 0, 0, 0.7); */
    border-radius: 8px;
    padding: 20px;
    margin-top: 5px;
    color: #fff;
	max-width:450px;

	margin:0 auto;
}

/* Intro New */
.intro-new {
    display: inline;
    font-size: 4em;
    font-weight: 800;
    line-height: 1em;
    color: #bfb3a5;
}

/* Event Detail */
.eventDetail h1{
    font-size: 1.2em;
    font-weight: 400;
    color: #a99c9c;
    padding-left: 10px;
}

/* Eras Tour */
.inviteOuter img {
    width: 500px;
	max-width:100%;
padding:0px;
	border-radius:8px;
}

/* Info Box Content */
.info-box p {
    color: #F2EACA;
    margin: 0 0 10px;
}

/* Sweeps Button */
.sweeps_button_primary {
    display: inline-block;
    padding: 10px 20px;
	color:#000;
    background-color: #ffc65f;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 10px;
    border: solid 1px #000;
}

/* Hide mobile image by default */
.text-container .mobile-image {
    display: none;
}
.seeOfferDetails {
	font-size:12px;
    color: #F2EACA !important;
	margin-bottom: 20px;
		margin-top:5px;
}

.seeOfferDetails a {
    color: #F2EACA !important;
}
span.newToSiriusXMDetails {
	font-weight:400;
}
span.newToSiriusXMDetails a {
    color: #F2EACA !important;	
}


	.info-box p.activeAccounts {
		font-weight:400;
	}
/* Responsive Styles */


/*@media (max-width: 2768px) {*/
	.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px;
    max-width: 700px;
    width: 100%;
	height:100%;

}

@media (max-width: 768px) {
	.text-container {
    max-width: 500px;

}
}

    .intro-content-new {
        flex-direction: column;
        max-width: 90%;
        height: auto;
    }
	#sweepsContent #introScreen h1.countDownClock {
    font-size: 1.5em;

}
	.confirmationContent h1.countDownClock{
	font-size:2em;
	}

.sweeps_button_primary {
/*	padding:0px;*/
	margin:0px;
	}
	
	.info-box p.activeAccounts {
		font-weight:400;
		font-size:1em;
		line-height:1.5em;
		padding-bottom:5px;
	}
		.info-box p.newToSiriusXM {
		font-weight:600;
		font-size:0.9em;
		line-height:1.4em;
	}
			.info-box p.newToSiriusXMCopy {
		font-weight:400;
		font-size:0.9em;
		line-height:1.4em;
	}
				.info-box p.newToSiriusXMDetails {
		font-weight:400;
		font-size:0.9em;
		line-height:1.4em;
	}
	.seeOfferDetails {
		padding-top:5px;
	font-size:0.9em;
    color: #F2EACA !important;
}

.seeOfferDetails a {
    color: #a99c9c !important;
}

	#sweepsContent #introScreen h1 {
		font-size:1.2em;
		font-weight:600;
	}
#sweepsContent #introScreen .intro-link {
    padding-top: 0px;

}
	
    .image-container {
        display: none;
    }

    .introCopyRight {
        width: 100%;
    }

    .text-container .mobile-image {
        display: block;
        width: 100%;
        height: auto; 
        max-height: 975px;
/*        margin-bottom: -30%; */
    }



    .info-box {
        position: relative;
      /*  background: rgba(0, 0, 0, 0.5); */
       /* padding: 10px 15px 10px 15px;*/
			padding:15px 0 0 0;
        border-radius: 8px;
        min-height: 100px;
/*        margin-bottom: 20px;*/
    }
/*    }
}*/

.seeOfferDetails {
    color: #a99c9c !important;
	margin-bottom: 20px;
	margin-top:5px;
}

.seeOfferDetails a {
    color: #a99c9c !important;
}


/* Game Space Inner */
#gameSpaceInner {
    position: relative; /* Ensure children are positioned relative to this */
}

/* Modal Overlay */
/* Modal Overlay */
.modal-overlay {
    display: none; /* Hidden by default */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% opacity black */
    z-index: 999; /* Make sure it covers other elements */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
	border-radius:12px;
}

/* Modal */
.modal {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 500px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    z-index: 1000; /* Above the overlay */
    text-align: left;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Show Modal and Overlay */
.modal-overlay.show {
    display: block;
    opacity: 1;
}

.modal.show {
    display: block;
    opacity: 1;
}

/* Close Icon */
.close-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    cursor: pointer;
	padding:0;
	margin:0;
	border:none;
	background:none;
}
.close-icon img{
	width:100%;
	max-width:100%;
}

#closeHelpButton {
    background-color: #c7c6c3;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
	text-decoration:none;
}
#howToPlayModal .closehelp-link a {
	text-decoration:none !important;
}
.closehelp-link {
	width:150px;
	margin:0 auto;
	text-align:center;
}
/* Modal Title */
.modal-title {
    margin-top: 0;
}

/* Modal List */
.modal-list {
    padding-left: 20px;
}

.gameHeader {
    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 2em;
    line-height: 2em;
    margin:0 10px 0 0;
	padding:0;
}
.puzzleTitle {
    font-family: "Helvetica Now";
    font-weight: 800;
    font-size: 2em;
    line-height: 2em;
    margin:0;
	padding:0;
		text-align:left;
}
/* Media Queries */
@media (max-width: 768px) {
	
.gameHeader {
    line-height: 1.2em;
    margin:0 5px 0 0;
	color:#015eba;
}
.puzzleTitle {
    line-height: 1.2em;
}
	
.assemble-bracelet {
    font-size: 0.8em;
	padding-left:5px;
	    max-width: 0%;
}
	.gameHeader, .puzzleTitle {
		font-size:1em;
		color:#015eba;
	}
	
	#gameToggle{
/*		width:45%;*/
		font-size:0.8em;
		
	}
	#SweepsContentContainer button#toggle2D, #SweepsContentContainer button#toggle3D {
    padding: 5px 10px !important;
    margin: 5px 0px 5px 5px;

}
	.questionContainer {
    /* background-color: #c9c6c1; */
    padding: 0px 5px;
	}
	.modal {
        width: 90%;
    }
}

button#toggleHelp {
	display:none;
    border: none;
    background: none;
    max-width: 35px;
    cursor: pointer;
	text-align:right;
}
button#toggleHelp img{
width:100%;
	text-align:right;
}#SweepsContentContainer .right-column {
text-align:right;
}
/*Game Win */

.gameResultContainer {
	background: #f3f2f0;
    border-radius: 8px;
}


.starRating {
    text-align: center;
}
.starRating img {
    width: 100%;
}
.gameSuccess-title {
	text-align:center;
    font-family: "Helvetica Now";
    font-weight: 800;
    font-size: 1.5em;
	padding:0px;
	margin:0px;
}
.gameRating,.playTime, .hintHeader, .playTimeHeader {
	text-align:center;
	    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 0.9em;
	color:#625548;
}
.playTime{
		/*border-bottom:solid 2px #625548;*/
}

.gameResultContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
	padding:5px;
}
.resultRow {
    width: 65%;
    display: flex;
    flex-direction: row;
}
.timeRow {
    width: 35%;
    display: flex;
    flex-direction: row;
}

.gameRatingContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 2;
    max-width: 70%;
}

.gameHintContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 30%;
}

.gameTimeContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    flex: 1 1 0%;
}


.gameRating,
.hintHeader,
.playTimeHeader {
    font-weight: bold;
    margin-bottom: 5px; 
}
.totalHints {
	font-weight:800;
	color:#625548;
    padding: 2px 0px 10px 0px;
    font-size: 1.8em;
}
.starRating,
.playTime {
	font-weight:800;
	color:#625548;
	padding:0px 0px 10px 0px;
	font-size:1.5em;

}
@media (max-width: 768px) {
.resultRow {
	padding-top:10px;
    width: 100%;
    flex-direction: row;
}
.timeRow {
    width: 100%;
    flex-direction: column;
}	
	.gameResultContainer {
    flex-direction: column;
}
	.playTimeHeader {
    font-weight: bold;
    margin-bottom: 0px;
}
	.playTime {
    font-weight: 600;
    color: #625548;
    padding: 0px 0px 0px 0px;
    font-size: 2em;
}
	.totalHints {
    font-weight: 600;
    color: #625548;
    padding: 0px 0px 10px 0px;
    font-size: 2em;
}
	.starRating, .totalHints, .playTime {
    padding: 0px 0px 0px 0px;
		margin:0px;

}
}

.entryForm {
	text-align:center;
	    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 0.9em;
	color:#625548;
	padding:10px 0px;
}
.entryForm a#entryFormLink {
	text-align:center;
	    font-family: "Helvetica Now";
    font-weight: 600;
    font-size: 1em;
	color:#ffffff;	
display: inline-block;
    padding: 10px 20px;
    background-color: #2858b0;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
	width:100%;
	
}
.entryReminder {
	text-align:left;
	color:#050505;
	font-size:0.9em;
}
.entryReminder a{
	    font-family: "Helvetica Now";
    font-weight: 800;

	color:#625548;		
}
.entryReminder a:hover,.entryReminder a:focus{
	color:#625548;		
}
.invalid-field {
    border: 1px solid red !important;
}
.countdownDisplay {
    background: #faf9f8;
    padding: 10px;
    border-radius: 10px;
    margin: 20px;
}
#onetrust-consent-sdk div#onetrust-banner-sdk div.ot-sdk-container {
    padding: 0px 15px 15px;
}
#onetrust-consent-sdk div#onetrust-banner-sdk #onetrust-button-group #onetrust-pc-btn-handler {
    margin-top: 8px;
    margin-bottom: 8px;

}
#confirmScreen {
	display:none;
}
/*Fix for quiz input */
.input-wrapper label {
    display: none;
}