/* CSS Document */


/* Menu bar */

	html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}


@font-face {
  font-family: 'Cinzel';
  src: url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
  font-weight: normal;
  font-style: normal;
}

html, body {
  margin-top: 35px;
}



.container-menu {
  position: fixed;
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  font-family: 'Cinzel', serif;
  width: 100%;
  top: 0;
  left: 0;
	 z-index: 135;
}


.logo {
  margin-right: 5px;
  height: auto;
  max-width: 100%;
	z-index: 5;
}

.menu {
  display: flex;
  align-items: center;
	z-index: 5;
}

.menu a {
  margin: 5px;
  padding: 5px;
  border: none;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
	z-index: 5;
}

.menu a.join-now {
  background-color: red;
  padding: 10px 15px;
  font-size: 18px;
	z-index: 5;
}

.menu a.join-now:hover {
  background-color: white;
  color: black;
	z-index: 5;
}

.right-menu {
  margin-left: auto;
	z-index: 5;
}

.search-bar,
.mobile-search-bar {
  margin: 5px;
  padding: 10px 50px 10px 5px;
  background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="gray" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>') no-repeat scroll right center;
  color: black;
  border: none;
  width: 500px;
  border-radius: 15px;
	z-index: 5;
}

.mobile-search-bar-input {
  margin: 5px;
  padding: 10px 50px 10px 5px;
font-size: 25px;
  border: none;
  width: 100%; /* adjusted for mobile usability */
  max-width: 500px; /* adjusted for mobile usability */
  border-radius: 15px;
	height: 50px;
  z-index: 5;

}

/* Existing styles */

@media (max-width: 1600px) {
  .search-bar,
  .mobile-search-bar {
    width: 300px; /* Adjust the width value as desired */
  }
}

	@media (max-width: 1500px) {
  .search-bar,
  .mobile-search-bar {
    width: 150px; /* Adjust the width value as desired */
  }
}


.mobile-search-bar {
  display: none; /* hide mobile search bar by default */
  margin-left: auto; /* push to the right side */
  position: absolute; /* add position absolute */
  top: 100%; /* position below the menu */
  right: 0; /* position to the right */
  background-color: white; /* set background color to white */
  border: 1px solid black; /* add black border */
}

.mobile-search-bar-text {
  font-size: 12px;
}

@media (min-width: 601px) {
  .mobile-search-bar-icon {
    display: none;
  }
}

.social-icons {
  display: flex;
  align-items: center;
}

@media (max-width: 1350px) {
  .social-icons img[src="https://www.julesjordan.com/beta1/graphics/twitter_icon.png"],
  .social-icons img[src="https://www.julesjordan.com/beta1/graphics/instagram_icon.png"] {
    display: none;
  }
}

.social-icons img {
  margin-right: 5px;
}



.hamburger-menu {
  display: none;
  cursor: pointer;
  font-size: 20px;
  color: white;
  padding: 5px;
}

.menu-items {
  display: none;
  flex-direction: column;
  font-family: 'Cinzel';
  background-color: black;
  color: white;
  padding: 0px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.menu-items a {
  margin: 5px;
  padding: 5px;
  border: none;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-items a.join-now {
  background-color: red;
  padding: 0 15px;
  font-size: 18px;
}

@media (max-width: 600px) {
  .menu-items a.join-now {
    padding: 0 10px; /* Adjust the padding value as desired */
  }
}

.menu-items a.join-now:hover {
  background-color: white;
  color: black;
}

@media (max-width: 1165px) {
  .container-menu {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
  }

  .menu, .right-menu {
    display: none;
  }

  .search-bar {
    display: none;
  }

.mobile-search-bar-icon {
  display: flex;
  align-items: center;
	background-color: black;
	font-size: 30px;


}

  .mobile-search-bar-icon a {
    margin: 5px;
    padding: 5px;
    border: none;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;

  }


  .logo {
    margin-right: 5px;
    height: auto;
  }

  .menu-items.show-menu {
    display: flex;
  }

  .mobile-search-bar {
    background-color: white;
    border: 1px solid black;
    width: 95%; /* Set width to 95% of the screen */
    max-width: 100%; /* Ensure it doesn't exceed 100% of the screen width */
  }

  .hamburger-menu {
    display: flex; /* Add display for hamburger menu */
  }
}







/* Main Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px;
  width: 100%;
}

.grid-item {
  position: relative;
  background-color: #ffffff;
  height: auto;
   margin: 5px;
}

.overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 4px;
	z-index: 115;
}

.grid-item:hover .overlay-text {
  opacity: 1;
}

.grid-item img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 250px;
  
 
}

/* Update link color */
.grid-item a {
  color:#2c292996;
  text-decoration: none;
}

@media (max-width: 1600px) {
 .grid-container-similar {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
  }
}



/* Similar updates grid */
.grid-container-similar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px;
  width: 100%;
}

.grid-item-similar {
  position: relative;
  background-color: #ffffff;
  height: auto;
}

.overlay-text-similar {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 4px;
}

.grid-item-similar:hover .overlay-text-similar {
  opacity: 1;
}

.grid-item-similar img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: auto;
}

/* Update link color */
.grid-item-similar a {
  color: #e4e1e1;
}

@media (max-width: 1600px) {
 .grid-container-similar {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 1200px) {
  .grid-container-similar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-container-similar {
    grid-template-columns: repeat(1, 1fr);
  }
}



/* Top models scrolling */
   .gallery-container {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .gallery-wrapper {
        display: flex;
        overflow-x: scroll;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    .gallery-wrapper::-webkit-scrollbar {
        display: none; /* Chrome, Safari, and Opera */
    }

    .gallery-items {
        display: flex;
        flex-wrap: nowrap;
    }

    .gallery-items img {
        width: 400px; /* Adjust the width as needed */
        height: auto;
        margin-right: 5px; /* Add 5px of right margin */
    }

    .gallery-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background-color: #ccc;
        border: none;
        color: #fff;
        font-size: 20px;
    }

    .gallery-prev {
        left: 10px;
    }

    .gallery-next {
        right: 10px;
    }

.grid-item-model {
  position: relative;
  display: inline-block;
}

.overlay-text-model {
	  font-family: 'Cinzel', serif;
  font-size: 35px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: opacity 0.3s;
  margin-bottom: 5px;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* Coming soon */
  .container-coming-soon {
			margin: 0;
			padding: 0;
			height: 100%;
		}
		.container-coming-soon {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.image-container-coming-soon {
			width: 100%;
			text-align: center;
		}
		.image-container-coming-soon img {
			width: 100%;
			max-width: 100%;
			height: auto;
		}



/* Title headings */
@font-face {
  font-family: 'Cinzel';
  src: url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
  font-weight: normal;
  font-style: normal;
}

.title-heading-content-black {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: black;
  font-size: 4em;
  font-family: 'Cinzel', serif;
}

/* Apply the font only to the .title-heading-content */
.title-heading-content-black {
  font-family: 'Cinzel', serif;
}

/* When the viewport is less than 600px wide, decrease the font size */
@media (max-width: 600px) {
  .title-heading-content-black {
    font-size: 1.5em;
  }
}

.title-heading-content-black:before,
.title-heading-content-black:after {
  content: "";
  flex: 1;
  border-bottom: 1px solid black;
}

.title-heading-content-black:before {
  margin-right: .5em;
}

.title-heading-content-black:after {
  margin-left: .5em;
}

/* What's hot */



.title-heading-content-red {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ff1400;
  font-size: 4em;
  font-family: 'Cinzel', serif;
}

/* Apply the font only to the .title-heading-content */
.title-heading-content-red {
  font-family: 'Cinzel', serif;
}

/* When the viewport is less than 600px wide, decrease the font size */
@media (max-width: 600px) {
  .title-heading-content-red {
    font-size: 1.5em;
  }
}

.title-heading-content-red:before,
.title-heading-content-red:after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ff1400;
}

.title-heading-content-red:before {
  margin-right: .5em;
}

.title-heading-content-red:after {
  margin-left: .5em;
}





/* DVD Grid */
.grid-container-dvd {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px; /* adjust this to add space around cells */
  width: 100%;
}


.grid-item-dvd {
  position: relative;
  background-color: #ffffff;
  height: auto;
}

.overlay-text-dvd {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 4px;
}

.grid-item-dvd:hover .overlay-text {
  opacity: 1;
}

.grid-item-dvd img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: auto;
}

/* Update link color */
.grid-item-dvd a {
  color: #e4e1e1;
}

@media (max-width: 1600px) {
  .grid-container-dvd {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 1200px) {
  .grid-container-dvd {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-container-dvd {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .grid-container-dvd {
    grid-template-columns: repeat(1, 1fr);
  }
}




/* Model Grid */
.grid-container-model-listing {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px; /* adjust this to add space around cells */
  width: 100%;
}


.grid-item-model-listing {
  position: relative;
  background-color: #ffffff;
  height: auto;
}

.overlay-text-model-listing {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 4px;
}

.grid-item-model-listing:hover .overlay-text-listing {
  opacity: 1;
}

.grid-item-model-listing img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: auto;
}

/* Update link color */
.grid-item-model-listing a {
  color: #e4e1e1;
}

@media (max-width: 1600px) {
  .grid-container-model-listing {
        grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1200px) {
  .grid-container-model-listing {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-container-model-listing {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .grid-container-model-listing {
    grid-template-columns: repeat(1, 1fr);
  }
}


/* Model Heading */
.container-model-bio {
    background-color: #000000;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    flex-wrap: wrap;
}

.model-bio-text-large {
    color: white;
    font-family: 'Helvetica', sans-serif;
    font-weight: 100;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
}

.model-bio-text {
    color: white;
    font-family: 'Helvetica', sans-serif;
    font-weight: 100;
}

.image-content-model-bio, .text-content-model-bio {
    border: 3px solid white;
    padding: 10px;
}

.image-content-model-bio {
    flex: 1 0 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 350px;
}

.image-content-model-bio img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.text-content-model-bio {
    flex: 1 0 250px;
}

.text-content-model-bio h1 {
    margin-top: 1em;
    margin-bottom: 1em;
}

.text-content-model-bio p {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Media Query for Mobile Devices */
@media (max-width: 968px) {
    .container-model-bio {
        flex-direction: column;
    }

    .image-content-model-bio, .text-content-model-bio {
        max-width: 100%;
        flex: 1 0 100%;
    }

    .image-content-model-bio img {
        max-width: 250px;
    }
}







/* Video Player */
.player-scene-description {
  font-family: Helvetica, sans-serif;
  font-weight: 100;
  color: #000000;
  text-align: left;
}

.player-scene-description a {
  color: #000000;
  text-decoration: underline;
}

/* This will apply to mobile devices with max width 768px */
@media screen and (max-width: 768px) {
  .player-scene-description {
    font-weight: 400; /* Adjust this to your desired weight */
  }
}




/* DVD Scenes */
.grid-container-scene {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #000000;

}

.dvd-scene-description {
  font-family: Helvetica, sans-serif;
   font-weight: 100;
  color: #bdb9b9;
  text-align: left;
}

.dvd-scene-description a {
  color: #ffffff;
  text-decoration: underline;
}

.title-heading-content-black-dvd {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: black;
  font-size: 3em;
  font-family: 'Cinzel', serif;
}


.title-heading-content-black-dvd:before,
.title-heading-content-black-dvd:after {
  content: "";
  flex: 1;
  border-bottom: 1px solid black;
}

.title-heading-content-black-dvd:before {
  margin-right: .5em;
}

.title-heading-content-black-dvd:after {
  margin-left: .5em;
}

@media (max-width: 37.5em) {  /* 600px/16 */
  .title-heading-content-black-dvd {
    font-size: 1.5em;
  }
}

.info-card-scene {
  flex: 0 0 25em;  /* 400px/16 */
  text-align: center;
  padding: 0 1.25em 0 0; /* 20px/16 */
}

.info-card-scene img, .img-card-scene img {
  width: 100%;
  height: auto;
}

.img-container-scene {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.img-card-scene {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-card-scene img {
  max-width: 100%;
  margin-bottom: 1.25em;  /* 20px/16 */
}

@media (max-width: 54.25em) {  /* 868px/16 */
  .grid-container-scene {
    flex-direction: column;
  }

  .info-card-scene, .img-container-scene, .img-card-scene {
    flex: 1 0 100%;
  }
}

@media (min-width: 48em) {  /* 768px/16 */
  .img-card-scene {
    flex: 1 0 50%;

  }
}

@media (min-width: 90.25em) {  /* 1700px/16 */
  .img-card-scene {
    flex: 1;
  }
}



/* Footer */
.footer {
  display: block;
  margin: auto;
  width: auto;
  border: 0px;
  text-align: center;
  vertical-align: middle;
  color: #918f8f;
  font-size: 12px;
  background-image: linear-gradient(to bottom, transparent 22px, #ffffff 22px);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
	z-index:125;
}


.footer_tour {
	padding-top: 15px;
	padding-bottom: 15px;
  display: block;
  margin: auto;
  width: auto;
  border: 0px;
  text-align: center;
  vertical-align: middle;
  font-family: Helvetica, sans-serif;
   font-weight: 300;
	font-size: 14px;
  color: #ffffff;
  background-color: #000000;
  margin-bottom: 5px;
  left: 0;
  bottom: 0;
  width: 100%;
}

.footer_tour a {
  color: #ffffff;
	text-decoration: none;
}


/* Page nation */

.uniquePagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%; /* takes the full width */
    margin: auto; /* centers the element */
}

.uniquePagination a, .uniquePagination span {
    text-decoration: none;
    color: #000000;  /* this makes the text black */
    margin: 0 5px; /* reduced margin */
}

.uniquePagination a:hover, .uniquePagination a:visited, .uniquePagination a:active {
    color: #000000;  /* this makes the text black on hover, visited, and active states */
}

.uniquePaginationNumber, .uniqueCurrentNumber {
    font-size: 2rem; /* you can adjust the size as per your requirement */
    padding: 5px; /* reduced padding */
    display: inline-block;
    transition: all 0.3s ease;
    color: #000000;  /* this makes the text black */
}

.uniqueCurrentNumber {
    background-color: #f8f9fa;  /* adjust as needed */
    border: 2px solid #000000;  /* this makes the border black */
    border-radius: 0%;  /* this makes it a circle */
    padding: 2px 5px;   /* adjusted as needed */
}

@media screen and (max-width: 768px) {
    .uniquePaginationNumber, .uniqueCurrentNumber {
        font-size: 1.5rem;
        padding: 5px; /* reduced padding */
    }
}

@media screen and (max-width: 576px) {
    .uniquePaginationNumber, .uniqueCurrentNumber {
        font-size: 2.2rem;
        padding: 2px; /* reduced padding */
    }
}

/* Sort options */
.sortOptions {
    display: flex;
    justify-content: center; /* or you can use space-around, space-between etc. based on your requirements */
    padding: 10px 0;
    flex-wrap: wrap; /* will allow items to wrap onto new lines if needed */
}

.sortOption {
    font-family: 'Cinzel';
    margin: 0 10px;
    border: 1px solid #000000; /* adds border */
    padding: 10px; /* adds padding */
    border-radius: 5px; /* rounds the corners */
}


.sortOption a {
    color: #000000;
    text-decoration: none;
}

.sortOption a.current {
    color: #ff0000; /* or any other color you want for the current selection */
}

@media screen and (max-width: 768px) {
    .sortOption {
        font-size: 1.5rem;
        margin: 10px 0; /* to give a little vertical space between the options */
    }
}

@media screen and (max-width: 576px) {
    .sortOption {
        font-size: 1rem;
        margin: 10px 0; /* to give a little vertical space between the options */
    }
}








/* A-Z listing */

.browsedvds {
	font-family: 'Cinzel';
    padding-top: 10px;
}

.alphabetListing {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 1.5em; /* 50% bigger */
}

.alphabet {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    background-color: #f8f9fa; /* change as required */
    border: 1px solid #000000; /* black border */
    color: #000000; /* black color */
    text-decoration: none;
}

.alphabet:hover, .alphabet._current {
    background-color: #000000; /* black background */
    color: #ffffff; /* white color */
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .alphabetListing {
        font-size: 1.2em; /* adjust as required */
    }
    .alphabet {
        padding: 4px 8px;
        margin: 4px;
    }
}

@media screen and (max-width: 576px) {
    .alphabetListing {
        font-size: 1em; /* adjust as required */
    }
    .alphabet {
        padding: 3px 6px;
        margin: 3px;
    }
}


/* DVD Name */
.dvdLink {
    font-family: 'Cinzel', serif;
    color: #000000; /* black text color */
    font-size: 1.3em; /* adjust as required */
    text-align: center; /* aligns text to the center */
    display: block; /* make sure it's a block element */
}

.dvdLink a {
    color: #000000; /* black link color */
    text-decoration: none; /* removes underline */
    display: inline-block; /* needed for centering inline elements */
}

.dvdLink a:hover {
    color: #000000; /* black link color on hover */
}


/* Model Name */
.modelLink {
    font-family: 'Cinzel', serif;
    color: #000000; /* black text color */
    font-size: 1.0em; /* adjust as required */
    text-align: center; /* aligns text to the center */
    display: block; /* make sure it's a block element */
    height: 20px;
    overflow: hidden;
    margin-bottom: 10px;
}

.modelLink a {
    color: #000000; /* black link color */
    text-decoration: none; /* removes underline */
    display: inline-block; /* needed for centering inline elements */
}

.modelLink a:hover {
    color: #000000; /* black link color on hover */
}


/* Header slider */
  .slider-container-header-slider {
    position: relative;
    max-width: 100%;
    height: auto;
    overflow: hidden;
  }

  .slider-image {
    width: 100%;
    height: auto;
    display: none;
  }

  .slider-image.active {
    display: block;
  }

  #slider-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 5px;
    box-sizing: border-box;
  }

  #slider-left-arrow,
  #slider-right-arrow {
    cursor: pointer;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 3vw; /* Adjust the value as needed */
    line-height: 2; /* Add this line */
  }

  @media screen and (max-width: 600px) {
    #slider-left-arrow,
    #slider-right-arrow {
      font-size: 6vw; /* Adjust the value as needed */
    }
  }

  @media screen and (max-width: 600px) {
    .slider-container-header-slider {
      max-height: 500px;
    }
  }

  #slider-left-arrow:hover,
  #slider-right-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }


/* Trailer page */


.container {
 display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  max-width: auto; /* Should be no less than the max-width of the child elements */
  margin: auto; /* Center container */

}

.movie-player, .signup-form {
  box-sizing: border-box;
  flex: 1 1 400px;
 max-width: 1280px; /* Set max-width */


}

.movie-player video {
  width: 100%;
  height: auto;
}




.unlock {
  width: auto;
  background-color: #000000;
  color: white;
  text-align: center; /* Centers the text */
  font-family: Impact, Charcoal, sans-serif; /* Uses Impact font */
  font-size: 30px; /* Sets font size to 25px */
  padding: 5px; /* Adds padding */
}

.bottom_bgcolor {
  background-color: black;
}

	.responsive-img {
  max-width: 100%;
  height: auto;
}


@font-face {
  font-family: 'Cinzel';
  src: url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
  font-weight: normal;
  font-style: normal;
}

.title-heading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  font-size: 4em;
  font-family: 'Cinzel', serif;
}

/* Apply the font only to the .title-heading-content */
.title-heading-content {
  font-family: 'Cinzel', serif;
}

/* When the viewport is less than 600px wide, decrease the font size */
@media (max-width: 600px) {
  .title-heading-content {
    font-size: 1.5em;
  }
}

.title-heading-content:before,
.title-heading-content:after {
  content: "";
  flex: 1;
  border-bottom: 1px solid white;
}

.title-heading-content:before {
  margin-right: .5em;
}

.title-heading-content:after {
  margin-left: .5em;
}




.signup-form {
  border: 0px solid black;
  border-radius: 10px;
  max-width: 500px;
  width: 100%; /* Added width property */
}

	@media (max-width: 1100px) {
  .signup-form {
    width: 100%; /* Added width property */
	  max-width: 100%;
  }
	}

.signup-form form {
  margin: 5px;
}

@media (max-width: 1100px) {
  .container {
    flex-direction: column;
    gap: 0;
  }

  .movie-player, .signup-form {
    width: 100%;
    flex-basis: auto;
  }

  .movie-player {
    margin-bottom: 0;
  }

  .signup-form {
    margin-top: 0;
  }

  h2 {
    margin-top: 0;
  }

  form {
    margin: 0;
  }
}





.input-container, .subscription-container, .submit-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
	font-family: 'Helvetica', sans-serif;
	font-weight: bold;
	font-size: 20px;
}

.input-container div, .subscription-container div, .submit-container {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}

.input-container input, .subscription-container input {	
  margin: 5px 0;
  height: 40px;
}

.subscription-option {
  border: 1px solid #000;
  font-family: 'Helvetica', sans-serif;
	margin: 3px 0;
  padding: 0px 10px 0px 10px;
  border-radius: 5px;
  background-color: black;
  color: white;
  width: 100%;
}

.subscription-option label {
  display: flex;
  align-items: center;
}

/* *** Added 2023-07-07 by DJH *** */

    .formhide { display: none; }
    .formshow { display: block; }
    .formerror { color: red; font-weight: bold; }
    .optsel { background-color: #e40404; font-weight: bold; }
    .optusel { background-color: black; }

    .radioCell { width: 15px; align-items: center; justify-content: center; border: 0px solid; padding: 0px 5px 0px 5px; }
    .priceCell { width: 175px; display: flex; align-items: center; justify-content: center; border: 0px solid; padding: 0px 2px 0px 10px; font-weight: bold; font-size: 50px; }
    .priceCellsmall { width: 45px; display: flex; align-items: center; justify-content: center; border: 0px solid; padding: 0px 10px 0px 0px; font-weight: bold; font-size: 10px; }
    .descriptionCell { width: 100%; align-items: left; justify-content: left; border: 0px solid; padding: 0px 5px 0px 5px; font-size: 15px; }

    @media (max-width: 768px) { .priceCell { font-size: 25px; /* Adjust the font size for mobile devices */ } }
    @media (max-width: 768px) { .descriptionCell { font-weight: 400; /* Adjust the font size for mobile devices */ } }


/* *** Added 2023-07-07 by DJH *** */

input[type="submit"] {
  width: 100%;
  margin: 5px 0;
  font-size: 2em;
  background-color: #e40404;
	font-family: Impact, Charcoal, sans-serif; /* Uses Impact font */
  color: white;
  border: none;
  border-radius: 10px;
  padding: 5px;
	cursor: pointer;
}

		.movie_description {
  font-family: Arial, sans-serif;
  font-size: 15px;
			color: #413f3f;
		  }

	 .movie_description a {
    color: #413f3f;
   	 text-decoration: underline;
  }

.movie_title {
	font-family: 'Cinzel', serif;
    font-size: 2em;
}

@media (max-width: 600px) {
  .movie_title {
    font-size: 1.5em;
  }
}


		hr {
    border: none;
    border-top: 1px solid #c3bebe;
  }


/* Photos carousel */


#carousel {
    display: grid;
    grid-template-columns: 30px 1fr 30px; /* adjust these values as needed */
    align-items: center;
    width: 100%;
    overflow-x: hidden;
    white-space: nowrap;
    position: relative;
}

#images {
    display: flex;
    grid-column: 2;
    gap: 20px; /* adjust as needed */
    overflow-x: auto;
    scrollbar-width: none; /* for Firefox */
    -ms-overflow-style: none;  /* for Internet Explorer and Edge */
}

#images::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}

.arrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #f4f4f4; /* adjust as needed */
    z-index: 2;
    position: relative;
}

#prev.arrow {
    grid-column: 1;
}

#next.arrow {
    grid-column: 3;
}

#prev.arrow::before,
#next.arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent; /* adjust as needed */
}

#prev.arrow::before {
    border-right-color: #333; /* adjust as needed */
    left: 0;
    transform: translate(0, -50%);
}

#next.arrow::before {
    border-left-color: #333; /* adjust as needed */
    right: 0;
    transform: translate(0, -50%);
}


/* Header Sale */
.custom-container {
    background-color: #de0e16;
    width: 100%;
    text-align: center; /* Center the content */
    padding: 0px 0; /* Add some padding for spacing */
}

.content {
    display: inline-block; /* Aligns the content in the center */
}

.black-friday, .sale-text, .click-here {
    font-family: Arial, sans-serif;
    color: black; /* Default color */
}

.sale-text, .click-here {
    color: white;
}

.click-here {
    text-decoration: underline; 
}

.responsive_sale-image {
    max-width: 100%; /* Ensures the image does not exceed the width of its container */
    height: auto; /* Maintains the aspect ratio of the image */
    display: block; /* Removes any extra space below the image */
}