@charset "UTF-8";
/* CSS Document */
.rye-regular {
  font-family: "Rye", serif;
  font-weight: 400;
  font-style: normal;
}

body {
  	/*font-family: 'Rye', serif;*/
	/*background: radial-gradient(ellipse at center, #9e0061 0%,#3a0021 76%); */
	background: radial-gradient(ellipse at center, #430298 0%,#060330 76%);
}
.c-item {
	height: 480px;
}
.c-img {
	height: 100%;
	object-fit: cover;
	filter: brightness(0.6);
}
.footer_class {
	background-color: aqua;
}

.grainy-background {
      width: 100%;
      height: 100vh; /* Or desired height */
      background-color: #020324; /* Base color for your background */
	  background-image: none,radial-gradient(circle,rgba(var(--global__colors__secondary),.75) 0,rgba(var(--global__colors__secondary),.5) 100%);
 }

.btn {
	background-color:#6ba6a3;
	border: 1px solid #6ba6a3;
}

.main-nav {
	font-family: 'Rye', serif;
}
.nav-pills .nav-link.active {
	background-color:#6ba6a3;
	color: #FFFFFF;
	font-size: 21px;
}
.nav-pills .nav-link {
	padding-left:35px;
	padding-right:35px;
	font-size: 21px;
	color: #FFFFFF;
	/*border: 1px solid #6ba6a3;*/
}
.navbar-dark {
	background-image:  none,radial-gradient(circle,rgba(var(--global__colors__secondary),.75) 0,rgba(var(--global__colors__secondary),.5) 100%);
	background-color: #000 !important;
}
.navbar {
	padding: 15px;
}

.creative-title {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
}

.nav-pill-box {
	/*background-color: #6ba6a3;*/
	padding:20px;
	border-radius: 15px;
	color: #FFFFFF;
	margin-top: 15px;
}

.play-description{
	font-family: Helvetica, Arial, sans-serif;
	padding:40px;
	/*background-color: #6ba6a3;*/
	/*border-radius: 15px; */
	margin-top:20px;
	font-size: 18px; 
	color: #FFFFFF;
	margin-left:140px;
	margin-right:140px;
}
.desk-img{
	display: block;
}
.mobile-img {
	display: none;
}

.credits{
	font-size: 14px;
	text-transform: uppercase;
	
}

.credits-name{
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
}

.creatives {
	font-family: 'Rye', serif;
}

.production-photos {
	background-color: #6ba6a3;
	border-radius: 10px;
}

.header-bar {
	font-family: 'Rye', serif;
    padding: 10px 20px;
  }

  .nav-pills .nav-link {
    color: white;
    font-weight: 500;
  }

  .nav-pills .nav-link.active {
    background-color: #0d6efd;
  }

  .social-icons a {
    color: white;
    margin-left: 12px;
    font-size: 18px;
    transition: 0.2s;
  }

  .social-icons a:hover {
    color: #0d6efd;
  }
	
.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}



.ribbon {
  position: fixed;
  top: 130px;
  left: -90px;
  background: #ff19ff;
  color: #fff;
  padding: 10px 80px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transform: rotate(-45deg);
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.custom-header {
    /*background-color: blue;*/
  }

.custom-toggler {
  border: none;
  background: none;
}

.toggler-icon {
  width: 30px;
  height: 22px;
  position: relative;
  display: block;
}

.toggler-icon span,
.toggler-icon::before,
.toggler-icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: white;
  left: 0;
  transition: 0.3s ease;
}

/* Top bar */
.toggler-icon::before {
  top: 0;
}

/* Middle bar */
.toggler-icon span {
  top: 50%;
  transform: translateY(-50%);
}

/* Bottom bar */
.toggler-icon::after {
  bottom: 0;
}

/* When menu is open → X */
.navbar-toggler:not(.collapsed) .toggler-icon::before {
  transform: rotate(45deg);
  top: 9px;
}

.navbar-toggler:not(.collapsed) .toggler-icon::after {
  transform: rotate(-45deg);
  bottom: 9px;
}

.navbar-toggler:not(.collapsed) .toggler-icon span {
  opacity: 0;
}
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
	.play-description{
		font-size: 18px; 
		margin-left:20px;
		margin-right:20px;
		padding:10px;
	}
	.desk-img {
		display: none !important;
	}
	.mobile-img {
		display: block;
	}
	.ribbon {
    	display: none;
 	}
}

@media (max-width: 991px) {
  .nav-pills {
    flex-direction: column;
    width: 100%;
	background-color: #0f0146;
  }
  .nav-pills .nav-link {
    text-align: center;
    margin-bottom: 8px;
  }
	.test {
		margin-top:30px;
	}
}