/*
Theme Name:		OHS Play
Theme URI:		
Author:			Jumaqu.io
Author URI:		http://www.jumaqu.io/
Version:		1.01
*/

	
/*-----------------------------------------------------------------------------------*/
/* Body, Typography and some main Elements
/*-----------------------------------------------------------------------------------*/

html * { 
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing: antialiased; 
}
html {padding: 0; margin: 0;}
body { 
	background: #f6f6f6; color:#000; overflow-x:hidden; letter-spacing:0; padding: 0; margin: 0; 
	font-weight:400; font-size:16px; font-family: "Lexend", sans-serif; font-optical-sizing: auto;
}
input, textarea { border-radius:0; }
input, textarea, select, label { font-family:"Poppins", sans-serif; outline:0; }
input:focus, input:hover { outline:0; }
::-webkit-input-placeholder { color:#5E5E5E; opacity:1; }
:-moz-placeholder { color:#5E5E5E; opacity:1; }
::-moz-placeholder { color:#5E5E5E; opacity:1; }
:-ms-input-placeholder { color:#5E5E5E; opacity:1; }

h1, h2, h3, h4, h5, h6 { padding:0; margin:0 0 20px 0; line-height:1.25; font-weight:700; letter-spacing:0; outline:0; }
h1 { font-size:80px; text-align: center; line-height: 1;}
h2 { font-size:36px; }
h3 { font-size:28px; }
h4, h5, h6 { font-size:20px; }

img { display:block; max-width:100%; height:auto; }
ul,ol { margin:0; padding:0; list-style:none; }
a, a:visited, a:active, input[type=submit] { text-decoration:none; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out; }
a:focus, a:hover { text-decoration:none; outline:0; }
:focus, :hover { text-decoration:none; outline:0; }
p { margin:0 0 20px 0; line-height: 1.66; }

b, strong { font-weight:700; }

.animate { transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
.no-animate { transition:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; }

.button { 
	display:inline-block; color:#FFF; background:#000; padding:12px 40px; min-width: 191px; border-radius:100px; text-align:center; border: 1px solid #000; 
	margin-right: 10px; font-size: 18px;
}
	.button:hover { background:#4CAAD5; border: 1px solid #4CAAD5;; color:#FFF; }
.button-alt { color:#000; background:#fff; border: 1px solid #000; }
.button-rev { background:#4CAAD5; border: 1px solid #4CAAD5;; color:#FFF; }
	.button-rev:hover { color:#000; background:#fff; border: 1px solid #fff; }


/*-----------------------------------------------------------------------------------*/
/* Structure
/*-----------------------------------------------------------------------------------*/

.container { margin:0 auto; width: 100%; max-width:1360px; }
.flex-container { display:flex; justify-content:space-between; align-items: flex-start; flex-wrap: wrap; }
.view-mobile { display:none; }

.border-box {margin: 30px auto 100px auto; padding: 25px 45px; max-width: 986px; background: #fff; border: 1px solid rgba(197, 197, 197, 1); border-radius: 30px;}
.border-box-wide {max-width: 100%;}


/*-----------------------------------------------------------------------------------*/
/* Header styling
/*-----------------------------------------------------------------------------------*/

#header {/*position: fixed;*/ position: relative; z-index: 2; width: 100%; padding: 15px 0 45px 0; /*background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 10000;*/}
	#header .container {position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
		#header .container .logo {display: inline-block; max-width: 229px; width: 100%;}
				#header .container .logo img {display: block; width: 100%; height: auto;}
				#header .container .logo img:hover {opacity: 0.8;}
		#header .container nav {position: absolute; left: 50%; transform: translateX(-50%);}
			#header .container nav ul {display: flex;}
				#header .container nav ul li {position: relative;}
					#header .container nav a {/*text-transform: lowercase;*/ color: #000; font-weight: 600; margin: 0 0 0 25px; padding: 15px 0;}
					#header .container nav a:hover {color: #4CAAD5;}
					#header .container nav > ul > li.menu-item-has-children > a {
						padding-right: 18px; background: url(images/icon-dropdown.svg) no-repeat right center / 10px auto;
					}
					#header .container nav ul > li.current-menu-item > a {color: #4CAAD5;}

			/* dropdowns */
			#header .container nav ul li:hover > ul {display: block;}
			#header .container nav ul ul {
				border-radius: 20px; display: none; position: absolute; top: 35px; left: 5px; min-width: 200px; background: #fff; padding: 10px 5px; z-index: 10001;
			}
				#header .container nav ul ul li {display: block;}
					#header .container nav ul ul a {display: block; margin: 0 15px; padding: 12px 0;
						white-space: nowrap; font-weight: 400;
						border-bottom: 1px solid rgba(197, 197, 197, 1);
					}
					#header .container nav ul ul li:last-of-type a {border: none;}
					
					#header .container nav ul ul li.current-menu-item a {color: #4CAAD5;}

		#header-right {display: flex; justify-content: flex-end; align-items: center;}
			#header .button {
				min-width: 132px; padding-left: 20px; padding-right: 20px; text-align: left; font-size: 16px;
				background: #000 url(images/icon-arrow-right-white.svg) no-repeat calc(100% - 20px) center / 17px 12px;
			}
				#header .button:hover {background-color:#4CAAD5;}
			#header #menu-toggle {margin-left: 10px;}

/*-----------------------------------------------------------------------------------*/
/* Footer styling
/*-----------------------------------------------------------------------------------*/

#footer {  }
	#footer .container {
		border-top: 1px solid rgba(197, 197, 197, 1); padding: 40px 0 20px 0; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	}
	
		#footer a {color: #000; font-weight: bold; text-decoration: underline; margin-left: 5px;}
		#footer a:hover {color: rgba(210, 158, 14, 1);}
	

/*-----------------------------------------------------------------------------------*/
/* General / Shared Page styling
/*-----------------------------------------------------------------------------------*/

#title-hero {padding: 50px 0;}
	#title-hero .blurb {max-width: 680px; margin: auto;}
		#title-hero .blurb p {text-align: center;}

blockquote {margin: 0 0 100px 0; padding: 0;}
	blockquote p { font-size: 28px; line-height: 42px; }

.content-block {margin: 0 0 100px 0;}
	.photo-holder {margin: 0 0 30px 0;}
		.photo-holder img {border-radius: 30px;}

.content-block img.size-large {border-radius: 30px; margin: 25px auto; display: block;}

.content p a {color: #000; font-weight: bold;}
	.content p a:hover {color: #D29E0E;}
.content ul {padding: 0; margin: 0 0 20px 0;}
	.content ul li {list-style: disc; padding: 5px; margin: 0 0 5px 15px;}
.content ol {padding: 0; margin: 0 0 20px 0;}
	.content ol li {list-style: decimal; padding: 0 0 0 5px; margin: 0 0 5px 15px;}

.date {color: #565656; text-transform: uppercase; letter-spacing: 10%; font-size: 14px;}
.eyebrow {color: #565656; text-transform: uppercase; letter-spacing: 10%; font-size: 12px;}

.grid-holder ul.grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px; list-style: none; margin: 25px 0; padding: 0;}
	.grid-holder ul.grid > li {margin: 0;}
		.grid-holder ul.grid .thumb {display: block; margin-bottom: 20px;}
		.grid-holder ul.grid .thumb:hover {opacity: 0.5;}
			.grid-holder ul.grid .thumb img {display: block; width: 100%; height: auto; border-radius: 30px;}
		.grid-holder ul.grid h3 a {color: #000;}
			.grid-holder ul.grid h3 a:hover {text-decoration: underline;}

.grid-holder-text {}
	.grid-holder-text h3 {min-height: 70px;}
	.grid-holder-text hr {border: 1px #565656 dashed; dashes: 2, 2; width: 100%; height: 1px; margin: 10px auto 20px auto; display: block;}
	.grid-holder-text .read-more {color: #000; display: flex;}
		.grid-holder-text .read-more img {margin-left: 10px;}

.alm-btn-wrap {display: flex; justify-content: center;}
.alm-btn-wrap:empty {display: none;}
.alm-btn-wrap .alm-load-more-btn.done {display: none;}
.alm-btn-wrap .alm-load-more-btn[disabled] {display: none;}

.note {font-size: 12px;}

.gallery {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px; margin: 25px 0;}
	.gallery .gallery-item {float: none !important; width: auto !important; margin: 0 !important;}
		.gallery .gallery-icon {display: flex; align-items: center; justify-content: center; min-height: 160px; margin: 0; padding: 0;}
			.gallery .gallery-icon img {display: block; max-width: 100%; width: auto; height: auto; max-height: 160px; border: 0 !important;}
	.gallery br {display: none;}


/*-----------------------------------------------------------------------------------*/
/* Home
/*-----------------------------------------------------------------------------------*/

#home-hero {padding: 0 0 50px 0;}
	#home-hero .container {align-items: center; justify-content: center; gap: 50px; flex-wrap: nowrap;}
		
		#home-hero .home-hero-text {width: 50%; padding: 0 80px 0 0;}
			#home-hero .home-hero-text h1 {text-align: left; margin: 0 0 45px 0;}
				#home-hero .home-hero-text h1 span {text-decoration: underline;}
			#home-hero .home-hero-text .blurb p {line-height: 1.6; font-size: 18px; margin: 0 0 35px 0;}
			#home-hero .home-hero-text .note {margin-top: 20px;}
		#home-hero .home-hero-slider-wrap {position: relative; width: 50%; min-width: 0;}

			#home-hero .home-hero-slider-wrap .goal-badge {
				position: absolute; right: -32px; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 162px; height: 162px;
				border-radius: 50%; background: rgba(210, 158, 14, 1); text-align: center;
			}
				#home-hero .home-hero-slider-wrap .goal-badge span {display: block; transform: rotate(6.3deg); font-size: 21px; font-weight: bold;}
					#home-hero .home-hero-slider-wrap .goal-badge span strong {color: #fff; font-size: 40px;}

			#home-hero .home-hero-slider {position: relative; width: 100%;}
				#home-hero .home-hero-slider .slide-holder {position: relative; height: 527px; width: 100%; border-radius: 30px;}
					#home-hero .home-hero-slider .slide-holder .caption {
						position: absolute; top: 20px; left: 20px; z-index: 0; background: #fff; border-radius: 100px;
						line-height: 30px; padding: 0 15px;
						font-size: 12px;
						letter-spacing: 10%;
						text-transform: uppercase;
					}
					#home-hero .home-hero-slider img {object-fit: cover; display: block; width: 100%; height: 100%; border-radius: 30px;}

	/* dots */
	#home-hero .home-hero-slider .slick-dots {bottom: -25px; text-align: left;}
		#home-hero .home-hero-slider .slick-dots li {width: 12px; height: 12px; margin: 0 8px 0 0;}
			#home-hero .home-hero-slider .slick-dots li button {width: 12px; height: 12px; padding: 0;}
				#home-hero .home-hero-slider .slick-dots li button:before {content: ''; width: 12px; height: 12px; border-radius: 50%; background: rgba(210, 158, 14, 1); opacity: 1;}
				#home-hero .home-hero-slider .slick-dots li.slick-active button:before {background: #4CAAD5;}

#funding-progress .border-box {max-width: 100%; margin: 0 0 50px 0;}
	
	#funding-progress-top {display: flex;}
		.progress-top-item {text-align: left;}
			.progress-number {font-size: 44px; font-weight: 700;}
			.progress-subtitle {color: #565656; text-transform: uppercase; letter-spacing: 10%; font-size: 12px;}
		.progress-top-item:first-child {padding-right: 50px; margin-right: 50px; border-right: 1px solid #C5C5C5;}
			.progress-top-item:first-child .progress-number {color: #4CAAD5;}
		.progress-top-item:last-child {margin-left: auto; text-align: right;}
			.progress-top-item:last-child .progress-number { text-align: right; }
			.progress-top-item:last-child .progress-subtitle { text-align: right; }
		
	#funding-progress-bar {background: #F7F7F7; border-radius: 30px; height: 23px; width: 100%; margin: 30px 0 0 0; position: relative;}
		#funding-progress-fill {position: absolute; top: 0; left: 0; height: 100%; border-radius: 30px; background: linear-gradient(90deg, #4CAAD5 0%, #1C4883 100%);}
		#funding-progress-marker {
			position: absolute; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px;
			border-radius: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; z-index: 2;
		}

	#funding-progress-ticks {display: flex; justify-content: space-between; list-style: none; margin: 14px 0 30px 0; padding: 0;}
		#funding-progress-ticks li {position: relative; width: 1px; text-align: center;}
			#funding-progress-ticks .tick-line {display: block; width: 1px; height: 8px; margin: 0 auto 7px auto; background: #C5C5C5;}
			#funding-progress-ticks .tick-label {display: block; white-space: nowrap; color: #565656; font-size: 12px; transform: translateX(-50%);}
			#funding-progress-ticks li:first-child .tick-label {transform: translateX(0); text-align: left;}
			#funding-progress-ticks li:last-child .tick-label {width: 80px; transform: translateX(-100%); text-align: right;}

	#funding-progress-bottom {display: flex; justify-content: space-between; align-items: center;}
		ul#funding-progress-goals {display: flex; justify-content: flex-start;}
			ul#funding-progress-goals li {display: flex; font-size: 12px; margin-right: 20px;}
				ul#funding-progress-goals li img {margin-right: 7px;}
				ul#funding-progress-goals li span {margin-left: 4px;}
	
		#funding-progress-bottom .button {
			min-width: 132px; padding-left: 20px; padding-right: 20px; text-align: left; font-size: 16px;
			background: #000 url(images/icon-arrow-right-white.svg) no-repeat calc(100% - 20px) center / 17px 12px;
		}

/* slider */
#home-sponsors {padding: 50px 0; overflow: hidden;}
	#home-sponsors h3 {margin-bottom: 50px;}
	#home-sponsors .logo-slider .slick-track {display: flex; align-items: center;}
		#home-sponsors .logo-slider .slick-slide {height: auto;}
			#home-sponsors .logo-slider .slick-slide > div {height: 100%;}
				#home-sponsors .logo-slide {display: flex !important; align-items: center; justify-content: center; height: 120px; width: 240px; padding: 0 35px;}
					#home-sponsors .logo-slide img {display: block; max-width: 100%; width: auto; height: auto; max-height: 90px;}

#home-events {padding: 80px 0 25px 0;}

#home-mid-about {padding: 25px 0 50px 0;}
	#home-mid-about h2 {margin: 15px 0 25px 0;}
		#home-mid-about .photo-holder {width: 50%;}
		#home-mid-about .text-holder {width: 50%; padding-left: 70px;}

#home-project-updates {padding: 0 0 70px 0;}
	#home-project-updates .date {margin: 10px 0;}

#home-social {
	padding: 60px 0 50px 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 100%) top center / 100% 53px no-repeat;
}
	#home-social #icon-instagram {display: block; margin: 0 auto 15px auto;}
	#home-social h2 {text-align: center;}
		#home-social h2 span, #home-social h2 strong, #home-social h2 a {color: #4CAAD5;}	

#home-mid-banner {padding: 20px 0 80px 0;}
	#home-mid-banner .container {display: flex; align-items:center; align-items: stretch; border-radius: 30px; background: #4CAAD5; min-height: 240px; overflow: hidden;}
		#home-mid-banner .text-holder {width: 50%; padding: 35px;}
			#home-mid-banner .text-holder h2 {color: #fff; line-height: 1.1;}
				#home-mid-banner .text-holder h2 strong {color: #000;}
		#home-mid-banner .photo-holder {width: 50%; margin: 0;}
			#home-mid-banner .photo-holder img {display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0;}

#bottom-cta {
	margin-bottom: 50px; position: relative; overflow: hidden; height: 100vh; max-height: 616px; display: flex; justify-content: center; align-items: center;
	border-radius: 30px; background-size: cover; background-position: center;
}
	#bottom-cta:after {
		content: ""; position: absolute; inset: 0; z-index: 1;
		background: rgba(0, 0, 0, 0.3);
		mix-blend-mode: multiply;
		pointer-events: none;
	}

	#bottom-cta-inner {position: relative; z-index: 2; text-align: center; margin: auto;}
		#bottom-cta-inner h2 {font-size: 80px; color: #fff; margin: 0 20px 40px 20px;}
			#bottom-cta-inner h2 span {text-decoration: underline;}
			

/*-----------------------------------------------------------------------------------*/
/* Secondary
/*-----------------------------------------------------------------------------------*/

#secondary-hero {padding: 0 0 50px 0;}
	#secondary-hero .container {align-items: center; justify-content: center; gap: 50px; flex-wrap: nowrap;}
		#secondary-hero-text {width: 50%; padding: 0 80px 0 0;}
			#secondary-hero-text h1 {text-align: left; margin: 0 0 35px 0;}
				#secondary-hero-text h1 span {text-decoration: underline;}
			#secondary-hero-text .blurb {margin: 0 0 25px 0;}
				#secondary-hero-text .blurb p {line-height: 28px; font-size: 18px; margin: 0 0 25px 0;}
		#secondary-hero-photo {position: relative; width: 50%; min-width: 0;}
			#secondary-hero-photo img {object-fit: cover; display: block; width: 100%; height: 100%; border-radius: 30px;}

#main {
	min-height: 400px; padding: 60px 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 100%) top center / 100% 53px no-repeat;
}
	#main-nav {width: 340px;}
		#main-nav ul li a {
			display: flex; justify-content: space-between; align-items: flex-start;
			font-size: 20px; font-weight: 700; color: #000; border-bottom: 1px solid rgba(197, 197, 197, 1);
			padding: 20px 0; 
		}
			#main-nav ul li a:hover {text-decoration: underline; }
		#main-nav ul li a img {margin-top: 3px;}
	#main-content {width: calc(100% - 470px); padding: 20px 0 0 0; margin: 0;}


/*-----------------------------------------------------------------------------------*/
/* Student Ideas 
/*-----------------------------------------------------------------------------------*/

.page-template-student-ideas .border-box {margin: 75px 0 0 0;}
ul.student-ideas-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; list-style: none; margin: 25px 0; padding: 0;}
	ul.student-ideas-grid li {margin: 0; text-align: center;}
		ul.student-ideas-grid h3 {color: #4CAAD5; font-size: 73px; padding: 0; margin: 0;}
		ul.student-ideas-grid p {color: rgba(86, 86, 86, 1); text-transform: uppercase; letter-spacing: 10%; font-size: 14px;}


/*-----------------------------------------------------------------------------------*/
/* Events
/*-----------------------------------------------------------------------------------*/

.page-template-events .border-box {display: flex; justify-content: center; flex-wrap: wrap; margin: 50px 0 0 0;}
	.page-template-events .border-box h2 {width: 100%; text-align: center; font-size: 80px; margin: 0; padding: 0 20px;}
	

/*-----------------------------------------------------------------------------------*/
/* FAQ
/*-----------------------------------------------------------------------------------*/

#faqs h2 {text-align: center; padding: 10px 0;}
.faq-list {}
	.faq-list li {
		display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid rgba(197, 197, 197, 1); margin: 0 0 20px 0; padding: 0 0 20px 0;
	}
		.faq-list li:last-child {border: none; padding: 0; margin-bottom: 0; }
			
			.faq-list h3.faq-question {
				cursor: pointer; width: 100%; font-size: 20px; font-weight: 400; margin: 10px 0; padding: 0; display: flex; justify-content: space-between; flex-wrap: wrap;
			}
				.faq-list h3.faq-question span {width: calc(100% - 30px);} 
				.faq-list h3.faq-question:hover span {text-decoration: underline;} 
				.faq-list h3.faq-question:hover img {opacity: 0.75;} 
			.faq-list h3.faq-question .faq-icon {transition: transform 0.3s ease; transform: rotate(0deg);}
			.faq-list h3.faq-question.active .faq-icon {transform: rotate(180deg);}

			.faq-list .faq-answer {display: none; margin: 20px 0 10px 0; padding: 0;}
				.faq-list .faq-answer p {}


/*-----------------------------------------------------------------------------------*/
/* Timeline
/*-----------------------------------------------------------------------------------*/

.timeline-list {padding: 25px 0 0 0;}
	.timeline-list li {
		margin: 0 0 30px 0; padding: 0 0 10px 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;
		border-bottom: 1px dashed rgba(86, 86, 86, 1); dashes: 2, 2; 
	}
		.timeline-list li:last-child {border: none; padding: 0; margin-bottom: 0; }
		.timeline-icon {
			width: 69px; height: 69px; margin: 0 20px 20px 0; border-radius: 50%; background: rgba(210, 158, 14, 1); display: flex; align-items: center; justify-content: center;
		}
			.timeline-icon img {width: 31px; height: 34px;}
		.timeline-details {width: calc(100% - 89px);}
			.timeline-details h3 {font-size: 20px; margin: 10px 0; padding: 0;}


/*-----------------------------------------------------------------------------------*/
/* Contact
/*-----------------------------------------------------------------------------------*/

.page-template-contact .border-box {max-width: 740px; padding: 30px;}

.field {padding: 0 0 20px 0;}
	.field label {display: block; padding: 0; margin: 0 0 10px 0; font-size: 14px; color: rgba(86, 86, 86, 1);}
	.field .wpcf7-text {width: 100% ;background: rgba(247, 247, 247, 1); line-height: 24px; padding: 10px 20px; border-radius: 100px; border: none;}
	.field .wpcf7-textarea {width: 100% ;background: rgba(247, 247, 247, 1); padding: 10px 20px; border-radius: 30px; border: none;}
	
	.field .select-holder {position: relative; width: 100%;}
		.field .wpcf7-select {width: 100%; background: rgba(247, 247, 247, 1); line-height: 24px; padding: 10px 50px 10px 20px; border-radius: 100px; border: none; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
		.field .select-holder:after {content: ""; position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; background: url("images/icon-dropdown.svg") no-repeat center center; background-size: contain; transform: translateY(-50%); pointer-events: none;}

	.field .wpcf7-submit { 
		display:inline-block; background:#000; padding:0 40px; line-height: 44px; min-width: 191px; border-radius:100px; border: 1px solid #000; 
		color:#FFF; font-size: 18px; text-align:center; 
	}
		.wpcf7-submit:hover { background:#4CAAD5; border: 1px solid #4CAAD5;; color:#FFF; }

.wpcf7-not-valid-tip {padding: 10px 0 0 0;}
.page-template-contact .wpcf7 form .wpcf7-response-output {margin: 0; padding: 10px 20px; border-radius: 5px;}