/*
Theme Name: WorkPlay
Author: OP Solutions
Author URI: https://opsolutions.io
Description: A responsive WordPress theme built for WorkPlay.
Version: 1.0
Text Domain: workplay
Tags: fluid-layout, responsive-layout, custom-tailored, translation-ready
*/

/* Fonts */


@font-face {
	font-family: 'fk_screamerupright1';
	src: url('/wp-content/themes/workplay/fonts/FKScreamer-Upright.eot');
	src: url('/wp-content/themes/workplay/fonts/FKScreamer-Upright.eot?#iefix') format('embedded-opentype'),
		url('/wp-content/themes/workplay/fonts/FKScreamer-Upright.woff2') format('woff2'),
		url('/wp-content/themes/workplay/fonts/FKScreamer-Upright.woff') format('woff'),
		url('/wp-content/themes/workplay/fonts/FKScreamer-Upright.ttf') format('truetype'),
		url('/wp-content/themes/workplay/fonts/FKScreamer-Upright.svg#FKScreamer-Upright') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'fk_groteskbold1';
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Bold.eot');
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Bold.woff2') format('woff2'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Bold.woff') format('woff'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Bold.ttf') format('truetype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Bold.svg#FKGrotesk-Bold') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'fk_groteskitalic1';
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Italic.eot');
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Italic.eot?#iefix') format('embedded-opentype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Italic.woff2') format('woff2'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Italic.woff') format('woff'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Italic.ttf') format('truetype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Italic.svg#FKGrotesk-Italic') format('svg');
	font-weight: normal;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'fk_grotesklight1';
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Light.eot');
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Light.eot?#iefix') format('embedded-opentype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Light.woff2') format('woff2'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Light.woff') format('woff'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Light.ttf') format('truetype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Light.svg#FKGrotesk-Light') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'fk_groteskmedium1';
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Medium.eot');
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Medium.woff2') format('woff2'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Medium.woff') format('woff'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Medium.ttf') format('truetype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Medium.svg#FKGrotesk-Medium') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'fk_groteskregular1';
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Regular.eot');
	src: url('/wp-content/themes/workplay/fonts/FKGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Regular.woff2') format('woff2'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Regular.woff') format('woff'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Regular.ttf') format('truetype'),
		url('/wp-content/themes/workplay/fonts/FKGrotesk-Regular.svg#FKGrotesk-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Global Styles */
html {
	margin: 0;
	height: 100%;
}

body {
	font-family: 'fk_groteskregular1', Arial, sans-serif;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}
label {
	font-family: 'fk_groteskmedium1', Arial, sans-serif;
  }
  
a {
	color: #FFF;
	text-decoration: none;
}

img {
	max-width: 100%;
}

/* Bootstrap Overrides */
.bg-dark {
	background-color: #000 !important;
}

/* Brand Colors */
:root {
	--brand-bone: #E1E0C6;
	--brand-green: #20C69E;
	--brand-orange: #FF3C15;
	--brand-gold: #FAAE42;
}

/* Headings */
h1 {
	font-family: 'fk_groteskmedium1', Arial, sans-serif;
}

h2 {
	font-family: 'fk_groteskmedium1', Arial, sans-serif;
}

/* Navigation */


.navbar .navbar-nav,
#navbarMobile .navbar-nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-grow: 1;
}
nav#desktop-nav {
	height: 9vh;
}
#navbarMobile .navbar-nav {
	flex-direction: column;
}

#navbarMobile .navbar-nav .menu-item {
	width: 100%;
	padding: 15px 0;
	text-align: center;
	border-bottom: 1px solid #fff;
}

#navbarMobile .navbar-nav .menu-item a {
	width: 100%;
	height: 100%;
}

.navbar-brand {
	padding: 0;
	margin: 0;
}

.navbar-brand img {
	max-width: 100px;
}

.navbar .navbar-nav .menu-item {
	flex-grow: 1;
}

.navbar .navbar-nav .menu-item a {
	text-transform: uppercase;
	font-size: 12pt;
}

.navbar .navbar-nav .menu-item a:hover {
	text-decoration: underline;
}

.home #main-section {
	margin-bottom: 15px;
}

.inner-copy {
	padding: 55px;
}

/* Footer */
footer {
	background-color: #000;
	color: #fff;
	font-family: 'fk_groteskmedium1', Arial, sans-serif;
	z-index: 2;
}

footer a {
	color: #fff;
	text-decoration: none;
}

footer a:hover {
	color: #fff;
	text-decoration: underline;
}


.footer-logo {
	padding: 70px;
}

.footer-contact a {
 	display: block;
	padding: 5px 0;
}
.footer-signup .wpcf7-form-control {
	border: none;
	background: transparent;
	color: #fff;
}
.footer-signup .wpcf7-email {
	padding: 8px;
	max-width: 100%;
}
.footer-signup .wpcf7-email:focus {
	outline: none;
}
.footer-signup h3 {
	text-transform: uppercase;
	font-size: 90%;
}

.footer-signup .wpcf7-spinner {
	display: none;
}
.footer-signup form {
	border-bottom: 1px solid #fff;
}
.footer-signup form p {
	margin: 0;
}
.footer-signup button {
	display: block;
	text-align: right;
	width: 100%;
}
.footer-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-nav a {
	display: block;
	padding: 5px 0;
	text-align: center;
}

.footer-social {
	padding: 80px 0;
}
footer .copyright {
	opacity: .5;
	text-align: right;
}

/* Main Section */
#main-section {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center; /* This centers the child vertically */
	justify-content: center; /* This centers the child horizontally */
	height: calc(100vh - 21vh);
	position: relative;
}

main {
	position: relative;
}

main video {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	opacity: 0.5;
}

main.body-bg-bar {
	position: relative;
	background-color: var(--brand-green);
}
main.body-bg-bar::before {
    content: '';
    position: absolute;
    top: 19px;
    right: 0;
    width: 100%; 
    height: 100%;
    background-image: url('/wp-content/uploads/2024/01/barbgnew.jpg');
    background-repeat: no-repeat;
	background-position: right;
	mix-blend-mode: darken;
    z-index: 0;
	opacity: 0.5;
}
main.body-bg-bar video#video-events {
	visibility: hidden;
}

main.body-bg-events {
	background-color: var(--brand-orange);
	position: relative;
}
main.body-bg-events::before {
    content: '';
    position: absolute;
    top: 19px;
    right: 0;
    width: 100%; 
    height: 100%;
    background-image: url('/wp-content/uploads/2024/01/LiveBG.jpg');
    background-repeat: no-repeat;
	background-position: right;
	mix-blend-mode: darken;
    z-index: 0;
	opacity: 0.2;
}
main.body-bg-events video#video-bar {
	visibility: hidden;
}

main.body-bg-studio {
    position: relative;
}

main.body-bg-studio::before {
    content: '';
    position: absolute;
    top: 19px;
    right: 0;
    width: 100%; 
    height: 100%;
    background-image: url('/wp-content/uploads/2023/12/StudioBG.jpg');
    background-repeat: no-repeat;
	background-position: right;
	mix-blend-mode: darken;
    z-index: -1;
}

main.body-bg-studio video#video-bar,
main.body-bg-studio video#video-events {
	visibility: hidden;
}

#main-section a.show-content {
	font-family: 'fk_screamerupright1';
	font-size: 10rem;
	line-height: 10rem;
	color: black;
	text-decoration: none;
	display: inline-block;
}

#main-section .content {
	display: block;
	padding-top: 20px;
}

#main-section .content p {
	color: #fff;
}

#main-section a {
	cursor: pointer;
	text-shadow: none;
}

#main-section a.show-content:hover {
	color: #fff;
	cursor: pointer;
}

#main-section a.show-content.active {
	color: #fff;
}

main.body-bg-studio #main-section a.show-content:hover {
	color: var(--brand-green);
}

main.body-bg-studio #main-section a.show-content.active,
main.body-bg-studio #main-section a.show-content.active:hover {
	color: #000;
}

#main-section p {
	font-size: 1rem;
}

/* Buttons */
.btn-primary {
	font-family: 'fk_groteskbold1', Arial, sans-serif;
	background-color: #000;
	border: 3px #000 solid;
	border-radius: 0 !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:hover, .open .dropdown-toggle.btn-primary:hover, .btn-primary.active:focus, .btn-primary.active:hover, .open .dropdown-toggle.btn-primary:focus {
	background-color: #FFF;
	color: #000;
	border: 3px #000 solid;
	border-radius: 0 !important;
}
.btn-primary.white {
	font-family: 'fk_groteskbold1', Arial, sans-serif;
	background-color: #000;
	border: 3px #FFF solid;
	border-radius: 0 !important;
}

.btn-primary.white:hover, .btn-primary.white:focus, .btn-primary.white:active, .btn-primary.white.active, .open .dropdown-toggle.btn-primary.white, .btn-primary.white:active:focus, .btn-primary.white:active:hover, .btn-primary.white.active:hover, .open .dropdown-toggle.btn-primary.white:hover, .btn-primary.white.active:focus, .btn-primary.white.active:hover, .open .dropdown-toggle.btn-primary.white:focus {
	background-color: #FFF;
	color: #000;
	border: 3px #FFF solid;
	border-radius: 0 !important;
}

/* Events List */

.event-link {
	color: #000;
	text-decoration: none;
	padding: 15px;
}

.event-link .card-subtitle {
	font-family: 'fk_groteskregular1', Arial, sans-serif;
	font-size: 1.2rem;
}



.events-list .event-link.col-12:nth-child(even) {
	background-color: #ccc;
}

.events-list .event-link:hover h2 {
	text-decoration: underline;
}

.event-link .event-date {
	background-color: var(--brand-green);
	color: #000;
}
.event-link .event-date .event-month {
	font-family: 'fk_groteskbold1', Arial, sans-serif;
	font-size: 1.5rem;
	text-transform: uppercase;
}
.event-link .event-date .event-day {
	font-family: 'fk_groteskbold1', Arial, sans-serif;
	font-size: 2.5rem;
	text-transform: uppercase;
}
.events-list .event {
	margin-bottom: 15px;
}

.events-list .event a {
	font-family: 'fk_groteskbold1', Arial, sans-serif;
	font-size: 1.5rem;
	padding-bottom: 45px;
	height: 100%;
	width: 100%;
	display: block;
	position: relative;
	color: #fff;
	text-decoration: none;
	text-align: right;
}

.events-list .event a .infoBar {
	position: absolute;
	display: flex;
	justify-content: space-between;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #000;
	color: #fff;
	padding: 5px;
}

.event-view-toggle {
	display: inline-block;
	margin-top: 15px;
	font-size: 40px;
	color: var(--brand-green);
	line-height: 40px;
}
.event-view-toggle.active {
	color: #ffffff;
}
#event-view-grid {
	font-size: 40px;
	line-height: 40px;
	margin-left: 15px;
}


/* Jumbotron */
.jumbo {
	background-color: #000000;
	color: #ffffff;
	height: 600px;
}
.jumbo#jumbo-studio{
	background-image: url('/wp-content/uploads/2024/01/desk-bg-studio.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.jumbo#jumbo-studio #jumbo-content {
	padding: 50px;
	background-color: #ffffffdc;
	color: #000;
	margin-top: 100px;
	margin-bottom: 50px;
}
.jumbo#jumbo-studio #jumbo-content h2 {
	font-family: 'fk_groteskbold1', Arial, sans-serif;
	text-transform: uppercase;
}
.jumbo#jumbo-studio #jumbo-content p {
	font-family: 'fk_groteskmedium1', Arial, sans-serif;
}

/* Forms */
/* Target all text, email, and telephone inputs along with textareas */
.form-control, .form-control:focus {
    border: none; /* Removes the default border */
    border-bottom: 3px solid #000; /* Adds a 3px solid line at the bottom */
    border-radius: 0; /* Removes any default border radius */
    outline: none; /* Removes the outline on focus */
    box-shadow: none; /* Removes any default box-shadow */
}

/* You might also want to adjust the padding for a better visual */
.form-control {
    padding-left: 0;
    padding-right: 0;
}


/* Media Queries */
@media (max-width: 768px) {
	#main-section a.show-content {
		margin-top: 15px;
		font-size: 5rem;
		line-height: 7rem;
	}

	#main-section .content {
		display: block;
		padding-left: 0px;
		padding-top: 0px;
	}

}

@media (max-width: 576px) {
	#main-section {
		height: auto;
	}
	main video {
		opacity: 0.2;
		width: 100%;
		object-fit: cover;
	}

	.home main {
		padding-top: 9vh;
	}


	main.body-bg-studio::before,
	main.body-bg-bar::before,
	main.body-bg-events::before {
		opacity: 0.2;
		background-size: cover;
	}
	
	#main-section a.show-content {
		margin-top: 15px;
		font-size: 5rem;
		line-height: 6rem;
	}

	#main-section .content {
		display: block;
		padding-left: 0px;
		padding-top: 0px;
	}

	.navbar-brand img {
		max-width: 50px;
	}
	

	#bottom-footer {
		padding-top: 15px ;
		height: 21vh;
	}

	#bottom-footer img {
		height: 40px !important;
		padding-bottom: 15px;
	}

	#bottom-footer .col-sm-12 {
		height: auto !important;
	}

	#bottom-footer .col-sm-12.order-md-2 {
		border-bottom: none;
	}

	.page-id-9 #main-section {
		padding-top: 8vh;
	}
	#jumbo-content { padding: 20px !important; }
	.inner-copy {
		padding: 15px;
		margin-top: 15px;
	}
	.page-id-21 main {
		padding-top: 6vh !important;
	}
	.footer-logo {
		padding: 30px 0;
	}
	.footer-logo img {
		height: 50px !important;
	}
	.footer-social a {
		font-size: 50px;
		line-height: 50px;
	}
	.footer-social .copyright {
		line-height: 50px;
	}
	.footer-nav {
		padding: 15px 0;
	}
	.footer-contact {
		padding-bottom: 30px;
	}
	#studio-title {
		margin-top:45px !important;
	}
	.page-id-11 main .col-md-8 {
		padding-top: 30px !important;
	}
}
@media (min-width: 768px) and (max-width: 1399px) {
	#main-section a.show-content {
		margin-top: 15px;
		font-size: 8rem !important;
		line-height: 7rem !important;
		white-space: nowrap !important;
	}
}
@media (min-width: 768px) and (max-width: 1175px) {
	#main-section a.show-content {
		margin-top: 15px;
		font-size: 6.5rem !important;
		line-height: 5.5rem !important;
		white-space: nowrap !important;
	}
}
@media (min-width: 992px) {
	#main-section {
		padding-top: 9vh;
	}
	
	
}

@media (min-width: 1200px) {
	.footer-nav a {
		text-align: left;
	}
}

@media (min-width: 1400px) {
	/* Custom styles for extra large screens */
}