/*!
Theme Name: Thunderball Experience
Theme URI: http://underscores.me/
Author: Julio Winkler
Author URI: https://manifeststudios.co.za
Description: Thunderball Experience Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: thunderball-experience
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Thunderball Experience is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
    font-family: 'aquarius_sixregular';
    src: url('assets/fonts/aquarius_six_regular-webfont.woff2') format('woff2'),
         url('assets/fonts/aquarius_six_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
	font-size:20px;
}
a:hover {
	text-decoration: none;
}
h1 {
	font-size: 40px;
	text-transform: uppercase;
	font-family: 'aquarius_sixregular', sans-serif;
	letter-spacing: 1.5px;
	margin-bottom: 0;
}
h2 {
	font-size: 30px;
	text-transform: uppercase;
	font-family: 'aquarius_sixregular', sans-serif;
	letter-spacing: 1.5px;
	margin-top: 50px;
	margin-bottom: 30px;
}
h2:first-child {
	margin-top: 0;
}
h3 {
	font-size: 24px;
	text-transform: uppercase;
	font-family: 'aquarius_sixregular', sans-serif;
	letter-spacing: 1.5px;
	margin-top: 40px;
	margin-bottom: 30px;
}
h3:first-child {
	margin-top: 0;
}
h4 {
	font-size: 20px;
	text-transform: uppercase;
	font-family: 'aquarius_sixregular', sans-serif;
	letter-spacing: 1.5px;
	margin-top: 20px;
	margin-bottom: 20px;
}
h2:first-child {
	margin-top: 0;
}
.btn {
    font-family: 'aquarius_sixregular', sans-serif;
	border-radius: 0;
	text-transform: uppercase;
	min-width: 200px;
}
.intro-copy {
	font-size:24px;
}

#masthead {
	position: relative;
    width: 100%;
    background: #FFF;
    z-index: 1000;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#masthead ul {
	list-style: none;
	padding: 0;
	margin: 0;
    font-family: 'aquarius_sixregular', sans-serif;
}
.site-header {
    height: 100px;
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.site-header .site-branding {
	position: absolute;
    top: 0;
    left: 0;
	border-radius: 50%;
    border: 5px solid #FFF;
	box-shadow: 0px 8px 7px rgba(0,0,0,0.4);
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
}
.site-header .site-branding img {
    width:100%;
}
.site-header .main-navigation,
.site-header .main-navigation .menu-main-menu-container {
	height: 100%;
}
#masthead.shrink {
    top: 0;
    background: #000;
    position: fixed;
	left: auto;
    right: auto;
}
#masthead.shrink .site-header {
    height: 60px;
}
#masthead.shrink .site-branding {
    width: 80px;
	box-shadow: 0px 0px 7px rgba(0,0,0,0.4);
    border: 0;
}
#masthead .cm-dark-logo {
    margin-left: 180px;
	font-size:16px;
}
#masthead .cm-light-logo {
    display: none;
    margin-left: 100px;
	font-size:16px;
	color:#FFF;
}
#masthead.shrink .cm-dark-logo {
    display: none;
}
#masthead.shrink .cm-light-logo {
    display: block;
}
#masthead .cm-dark-logo img,
#masthead .cm-light-logo img {
	width: 150px;
	margin-left: 5px;
	height: auto;
}

#masthead.shrink #primary-menu a {
    color: #FFF;
}
.main-navigation .menu__toggler {
	display: none;
}
#masthead #primary-menu {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    height: 100%;
    padding: 0;
	text-transform: uppercase;
}
#masthead #primary-menu li {
	margin-right: 20px;
	position: relative;
}
#masthead #primary-menu li:last-child {
	margin-right: 0;
}
#masthead #primary-menu a {
	color: #303030;
	padding: 10px 0;
	display: inline-block;
    white-space: nowrap;
}
#masthead #primary-menu a:hover,
#masthead #primary-menu a:focus,
#masthead #primary-menu .current-menu-item a,
#masthead #primary-menu .current-menu-parent a {
	color: #cba135;
}
#masthead #primary-menu li .sub-menu {
	position: absolute;
	opacity: 0;
    min-width: 100%;
    background: #FFF;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
	box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    font-size: 16px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	visibility: hidden;
	display: block;
}
#masthead #primary-menu li .sub-menu:before {
	content: '';
	width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #FFF;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}
#masthead #primary-menu li:hover .sub-menu {
	visibility: visible;
	z-index: 999;
	opacity: 1;
	transform: translateX(-50%) translateY(0px);
}
#masthead #primary-menu li .sub-menu li {
	display: block;
	margin: 0;
}
#masthead #primary-menu li .sub-menu li a {
	color:#303030;
	white-space: nowrap;
	display: block;
    padding: 10px 15px;
}
#masthead #primary-menu li .sub-menu .current-menu-item a {
	color:#000;
	font-weight: 500;
}
#heroVideo {
	height: calc(100vh - 100px);
    min-height: 100%;
	position: relative;
	overflow: hidden;
	background-size: cover;
    background-repeat: no-repeat;
}
#heroVideo:before,
#rallyVideo:before {
	content: '';
	position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	background: rgba(0,0,0,0.5);
}
#rallyVideo {
	position: relative;
	overflow: hidden;
}
#heroVideo .hero-video,
#rallyVideo .hero-video {
	position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	animation: zoom-fade 2.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
    transition: none;
}
#heroVideo .hero-video:before,
#rallyVideo .hero-video:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    background: rgba(0,0,0,0.4);
}
#heroVideo .hero-video iframe,
#rallyVideo .hero-video iframe {
	position: absolute;
	width: 100%;
    height: 300%;
    left: auto;
    top: -100%;
    max-width: none;
	pointer-events: none;
}
#heroVideo .hero-cta {
	position: relative;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
}
#heroVideo .hero-inner {
	display: flex;
    width: 100%;
	background: rgba(0, 0, 0, 0.3);
    padding: 15px;
	justify-content: center;
	-webkit-animation: slideUp 2s forwards;
	-moz-animation: slideUp 2s forwards;
	animation: slideUp 2s forwards;
}
#heroVideo .hero-title {
	width: 100%;
	text-align: center;
	-webkit-animation: slideUp 1s forwards;
	-moz-animation: slideUp 1s forwards;
	animation: slideUp 1s forwards;
}
#heroVideo .hero-title h1 {
    margin-bottom:40px;
	text-shadow: 2px 2px rgba(0,0,0,0.4);
}
#heroVideo .hero-inner .hero-message {
	padding: 0 15px;
	width: 50%;
	border-left: 2px dashed rgba(255,255,255,0.3);
	border-right: 2px dashed rgba(255,255,255,0.3);
}
#heroVideo .hero-inner .hero-btn,
#heroVideo .hero-inner .hero-down-btn {
	width: 25%;
	padding: 0 15px;
}
#heroVideo .hero-inner .hero-btn a {
    min-width: 200px;
}
/* #heroVideo .hero-inner .hero-down-btn {
	width: 48px;
    position: absolute;
    right: 15px;
} */
#heroVideo .hero-cta ul, 
#heroVideo .hero-cta li,
#heroVideo .hero-cta span {
    display: block;
	margin: 0;
}
#heroVideo .hero-cta #ticker {
    height: 48px;
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    font-size: 22px;
	background: #FFF;
	color: #000;
	width: 100%;
	text-transform: uppercase;
    font-weight: bold;
}
#heroVideo .hero-cta #ticker li {
    height: 48px;
}
#heroVideo .hero-cta span {
    padding: 5px;
}
.video-col .vc_column-inner {
	height: 600px;
    padding: 0 0 40px;
}
.video-info {
	max-width:1300px;
	width:100%;
	margin: 0 auto !important;
}
.video-info h1 {
	text-shadow: 2px 2px rgba(0,0,0,0.4);
}
.video-info .btn {
	margin-right: 15px;
}

.page-header {
	color: #FFF;
	background: url('https://thunderballexperience.co.za/wp-content/uploads/2019/09/page-header.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding-top: 50px;
    padding-bottom: 50px;
    overflow: hidden;
}
.page-content {
	padding-top: 80px;
    padding-bottom: 80px;
}
.single .page-content {
	padding-top: 0;
}
.page-content .event-item {
	animation: slideUp 1s forwards;
}
.page-content .event-item .entry-header a {
	height: 100%;
    display: block;
	overflow: hidden;
}
.page-content .event-item .entry-header a img {
	width: 100%;
	height: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.page-content .event-item:hover .entry-header a img {
	transform: scale(1.2);
}
.page-content .event-item .entry-content h3 {
	margin: 20px 0;
}
.page-content .event-img img {
	width: 100%;
	height: auto;
}
.page-content .event-title h1 {
	margin: 40px 0;
}
.page-content .te-gallery {
	margin: 60px 0 0;
}

.application-form .form-control {
	margin-bottom: 15px;
}
.application-form hr {
    margin-top: 25px;
    margin-bottom: 40px;
    border-top: 2px dashed rgba(0, 0, 0, 0.2);
}
.application-form span.wpcf7-list-item {
    margin: 0;
	font-size: 18px;
}

.site-footer {
	background: #111;
	padding:60px 0 0;
	color:rgba(255,255,255,0.7);
	font-size: 16px;
}
.site-footer .footer-main {
	padding-bottom: 60px;
	border-bottom: 2px dashed rgba(255,255,255,0.2);
}
.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.site-footer a {
	color:rgba(255,255,255,0.7);
}
.site-footer a:hover {
	color:rgba(255,255,255,1);
}
.site-footer .social-links a {
	font-size: 30px;
	margin-right: 10px;
}
.site-footer .social-links a:last-child {
	margin-right: 0;
}
.site-footer .footer-copyright {
	padding: 15px 0;
}
.site-footer h4 {
	color: #FFF;
}

#mobile-menu, 
div.wpcf7 .ajax-loader {
	display: none;
}
@media screen and (max-width: 768px) {
	#masthead #primary-menu {
		display: none;
	}
	#masthead .cm-dark-logo {
		margin-left: 0;
	}
	#masthead .cm-light-logo {
		margin-left: 0;
	}
	#masthead .cm-dark-logo img, #masthead .cm-light-logo img {
		width: 100px;
		display: block;
		margin-top: 5px;
		margin-left: 0;
	}
	.site-header {
		justify-content: flex-end;
	}
	.site-header .site-branding {
		width: 130px;
	}
	.page-header {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
	#heroVideo .hero-video iframe, #rallyVideo .hero-video iframe {
		width: 200%;
	}
	#heroVideo .hero-title {
		padding: 0 15px;
	}
	#heroVideo .hero-title h1 {
		font-size: 30px;
		margin-bottom:15px;
	}
	#heroVideo .hero-inner {
		flex-direction: column;
	}
	#heroVideo .hero-inner .hero-btn {
		width: 100%;
		padding: 0;
	}
	#heroVideo .hero-inner .hero-down-btn {
		display: none;
	}
	#heroVideo .hero-inner .hero-message {
		padding: 0;
		width: 100%;
		border-left: 0;
		border-right: 0;
		margin-bottom:15px;
	}
	.video-info {
		padding: 0 15px;
		text-align: center;
	}
	.video-info h1 {
		font-size: 30px;
		margin-bottom:15px;
	}
	.main-navigation .menu__toggler {
		display: block;
	}
	.main-navigation .menu__toggler {
		position: relative;
		height: 28px;
		width: 40px;
		outline: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		z-index: 99999999;
	}
	.main-navigation .menu__toggler span,
	.main-navigation .menu__toggler span::before,
	.main-navigation .menu__toggler span::after {
		position: absolute;
		content: "";
		width: 40px;
		height: 3px;
		background: #cba135;
		border-radius: 20px;
		transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
	}
	.main-navigation .menu__toggler span::before {
		top: -8px;
	}
	.main-navigation .menu__toggler span::after {
		top: 8px;
	}
	.main-navigation .menu__toggler.active > span {
		background: transparent;
	}
	.main-navigation .menu__toggler.active > span::before,
	.main-navigation .menu__toggler.active > span::after {
		background: #cba135;
		top: 0px;
	}
	.main-navigation .menu__toggler.active > span::before {
		-webkit-transform: rotate(-225deg);
		transform: rotate(-225deg);
	}
	.main-navigation .menu__toggler.active > span::after {
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
	}
	.menu-mobile-menu-container {
		position: fixed;
		height: 100%;
		width: 100%;
		background: #FFF; 
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		z-index: 9999999;
		top: 0;
		right: -100%;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.menu-mobile-menu-container.active {
		right: 0;
	}
	.menu-mobile-menu-container #mobile-menu {
		max-width: 480px;
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.menu-mobile-menu-container #mobile-menu li {
		width: 100%;
    	text-align: center;
    	display: block;
	}
	.menu-mobile-menu-container #mobile-menu li a {
		color: #303030;
		width: 100%;
		padding: 5px 10px;
		display: block;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.menu-mobile-menu-container #mobile-menu li:last-child a {
		border-bottom: 0;
	}
	.menu-mobile-menu-container #mobile-menu li a:hover,
	.menu-mobile-menu-container #mobile-menu .current-menu-item a {
		color: #cba135;
	}
	.menu-mobile-menu-container #mobile-menu li .sub-menu {
		display: none;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.menu-mobile-menu-container #mobile-menu li.active .sub-menu {
		display: block;
	}
	.menu-mobile-menu-container #mobile-menu li .sub-menu li a {
		background: #f6f6f6;
	}
}
@media screen and (max-width: 480px) {
	h1 {
		font-size: 30px;
	}
	#heroVideo .hero-video iframe, #rallyVideo .hero-video iframe {
		width: 300%;
	}
	.video-info .btn {
		margin-bottom: 15px;
	}
}
@keyframes zoom-fade {
	from {
		opacity: 0;
		transform: scale(1.4, 1.4);
	}
	to {
		opacity: 1;
		transform: scale(1, 1);
	}
}
@-webkit-keyframes slideUp {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0);
  }
}
@-moz-keyframes slideUp {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0);
  }
}