@charset "UTF-8";
/* CSS Document */
* {
	box-sizing: border-box;
	font-family: "Arial";
	Color: #fff;
	background-color:#000000;
}

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.main-header {
	background-color: #000000;
}

.main-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	background-color: #000000;
	font-size: 1em;
	font-weight: lighter;
	border-bottom: 1px solid rgba(255, 255, 255, .3); /*CREATES LINE BELOW MAIN NAV*/
}
	
.nav ul { 
	margin: 0;
	padding: 0;
	display: flex;
}

.nav li {
	list-style: none;
}

.nav li a {
	text-decoration: none;
	color: white;
	padding: 1rem;
	display: block;	
}

.nav li :hover {
	background-color: #333;
	
}

.toggle-button {
	position: absolute; /*ALLOWS THE ABILITY TO ENFORCE BUTTON TO RIGHT SIDE OF SCREEN*/
	top: 1.5rem;
	right: 1rem;
	display: none; /*ENSURES THIS ONLY SHOWS UP ON SMALLER SCREENS*/
	flex-direction: column; /*ALIGNS SPANS ON TOP OF EACH OTHER*/
	justify-content: space-between;
	width: 30px;
	height: 20px;
}

.toggle-button .bar {
	height: 3px;
	width: 100%;
	background-color: white;
	border-radius: 10px;	
}

.news-image {
		width: 400px;
		min-width: 200px;
	}

@media (max-width : 1180px ){
	.toggle-button {
		display: flex;
	}
	.main-nav-links {
		display: none;
		width: 100%;
	}
	.nav {
		flex-direction: column;
		align-items: flex-start;
	}
	.main-nav-links ul {
		width: 100%;
		flex-direction: column;
	}
	.main-nav-links {
		text-align: left;
	}
	.main-nav-links li a {
		padding: .5rem 1rem;
	}
	.main-nav-links.active {
		display: flex;
	}
	.brand-title {
		padding-left: 45%;
	}
	.news-image {
		width: 25%;
		min-width: 200px;
	}

}

.nav-logo {
	display: block;
	width: 50px;
	margin: .5em;
	
}

.content-section {
	margin: .5em;
}

.container {
	max-width: 100%;
	margin: 1em 0em 0em;
	padding: 1.5em;
}

.iframe-wrapper {
	display: flex;
	justify-content: left;
	position: relative;
	height: 450px;
}

.iframe-wrapper iframe {
	width: 100%;
	max-width: 410px;
	height: 25em;
	border: none;
	margin-top: 1.5em;
}


.iframe-wrapper-pnc {
	display: flex;
	justify-content: left;
	position: relative;
}

.iframe-wrapper-pnc iframe {
	width: 100%;
	height: 20em;
	border: none;
}

.iframe-countdown-section {
	width: 100%;
	height: 6em;
	background-color: transparent;
}
.iframe-countdown {
	width: 475px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2em;
	padding-left: 2.5em;
}

.iframe-countdown iframe {
	border: none;
	width: 100%;
	height: 60px;
		
}

.iframe-wrapper-stats {
	display: block;
	width: 40em;
	max-width: 410px;
	height: 260px;
	border: none;
}

.section-header {
	width: 100%;
	font-family: Impact;
	font-weight: normal;
	color: #fff;
	text-align: left;
	font-size: 3em;
	margin-top: .5em;
	margin-bottom: .5em;
	background-color: transparent;
}

.sub-header {
	display: block;
	width: 200px;
	margin: .5em;
}
.news-image {
	display: block;
	max-width: 50%;
}

.current-event-container {
	display: flex;
	width: 100%;
	margin: left;
	margin-bottom: 100px;
	padding: 1.5em;
}

.current-event {
	display: block;
	max-width: 700px;
}

.current-event-heading-container {
	display: flex;
	width: 100%;
	background-color: #ffffff;
	margin-bottom: 5px;
}
.current-event-heading {
	width: 100%;
	height: 175px;
	display: block;
	background-color: #ffffff;
	padding-left: 10px;
	padding-top: 20px;
}

.current-event-heading h3 {
	margin: 0;
	font-size: 2em;
	font-weight: bolder;
	color: #000000;
	background-color: #ffffff;
}

.current-event-heading span {
	font-size: 1.25em;
	color: #000000;
	background-color: #ffffff;
}

.current-event-logo-container {
	background-color: #ffffff;
}

.current-event-heading-logo  {
	padding-top: 10px;
	background-color: #ffffff;
}

.current-event-logo {
	width: 100%;
	background-color: #ffffff;
}

.event {
	width: 100%;
}

.leaderboard {
	width: 100%;
	height: 400px;
	max-width: 1000px;
	display: block;
	margin: 0px auto;
}

.iframe-wrapper-leaderboard {
	display: block;
	width: 100%;
	max-width: 410px;
	height: 400px;
	border: none;
	margin: 0px auto;
}

.leaderboard-buttons {
	display: flex;
	justify-content: center;
	margin: 50px 0px 0px;
}

.ad-container {
	max-width: 100%;
	margin: left;
	padding: 1.5em;
}

.ad-section{
	max-width: 100%;
	margin: 0em auto;
	padding: 1.5em;
	display: block;
}

.ad-image {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 25%;
}

.ad-space {
	background-color: #1C305C;
	padding: 1em;
}

.ad-space-text-large {	
	display: block;
	text-align: center;
	font-size: 1.5em;
	background-color:#1C305C;
}

.ad-space-text-small {	
	display: block;
	text-align: center;
	font-size: 1em;
	background-color:#1C305C;
}

.btn {
	display: block;
	margin: auto;
	text-align: center;
	vertical-align: middle;
	padding: .67em;
	cursor: pointer;
}

.btn-style {
	color: white;
	background-color: #000000;
	border: solid;
	border-width: 1px;
	border-radius: .3em;
	font-weight: bold;
	width: 150px;
}

.btn-style:hover {
	background-color: #CFCCCC;
}

.href_underline {
	text-decoration: none;
}

.button-line {
	border-bottom: 1px solid #000000; /*PADDING IS SPACE BETWEEN CONTENT AND BORDER*/
	margin: 1em; /*MARGIN IS SPACE ON THE OUTSIDE OF THE BORDER*/
}

.footer-image {
	display: block;
	max-width: 60%;
}

.stats-container {
	display: flex;
	width: 100%;
	margin: 0px auto;
	
}

.stat-category-container {
	display: block;
	margin: 0px auto;
}

.stats-header {
	display: block;
	width: 200px;
}

.more-stats-button {
	display: flex;	
}

@media (max-width: 1250px) { /*CURRENT EVENT + LEADERBOARD + STATS LEADERS*/
	.container {
		width: 100%;
		margin: 0px;
		padding: 0em 1em;
	}
	
	.current-event-container {
		display: block;
		width: 100%;
		margin: 0px auto;
		padding: 5px;
	}
	
	.current-event {
		max-width: 700px;
		display: block;
		margin: 0px auto;
	}
	
	.leaderboard {
		width: 100%;
		height: 100%;
		max-width: 1000px;
		display: block;
		margin: 60px auto;
	}
	
	.stats-container {
		display: block;
		width: 100%;
		margin: 0px auto;
	}

	.stat-category-container {
		display: block;
		margin: 0px auto;
	}

	.stats-header {
		display: block;
		width: 200px;
	}
	
	.iframe-wrapper-stats {
		display: block;
		width: 100%;
		max-width: 410px;
		height: 260px;
		border: none;
		margin: 0px auto;
	}

	.more-stats-button {
		display: block;	
	}
	
}

@media (max-width: 550px) { /*CURRENT EVENT + LEADERBOARD*/
	
	.container {
		width: 100%;
		margin: 0px;
		padding: 0em .25em;
	}
	
	.current-event-container {
		display: block;
		width: 100%;
		margin: 0px auto;
		padding: 5px;
	}
	
	.current-event {
		width: 100%;
		display: block;
		margin: 0px auto 20px;
	}
	
	.current-event-heading {
		width: 100%;
		height: 150px;
		display: block;
		background-color: #ffffff;
		padding-left: 10px;
		padding-top: 15px;
	}
	
	.current-event-heading h3 {
		margin: 0;
		font-size: 1.25em;
		font-weight: bolder;
		color: #000000;
		background-color: #ffffff;
	}

	.current-event-heading span {
		font-size: .9em;
		color: #000000;
		background-color: #ffffff;
	}
	
	.leaderboard {
		width: 100%;
		height: 100%;
		max-width: 1000px;
		display: block;
		margin: 0px auto;
		padding: 0px 5px;
	}
	
	
}

/****************MORE NEWS******************/

.more-news-container {
	width: 100%;
	display: flex;
	justify-content: center;
	
}

.more-news-bg {
	width: 50%;
	min-width: 300px;
}


/*SCHEDULE STYLING*/

@media (max-width: 750px) {
	.event-logo-title div {
		display: inline-block;
		vertical-align: middle;
		width: 50%;
		margin-left: .5em;
	}
	.event-title {
		font-size: 10px;
	}
	.event-logo {
		padding: 1em;
		width: 10em;
	}
}

.event-section {
	border-left: 1px solid #FFF;
	border-top: 1px solid #FFF;
	margin-bottom: 3em;
}

.event-item {
	display: inline-block;
}

.event-logo-title {
	text-align: left;
}

.event-logo-title div {
	display: inline-block;
	vertical-align: middle;
}
.event-logo {
	padding: 1em;
	width: 10em;
}

.the-back-9-logo {
	padding: 1em;
	width: 6em;
}

.event-title {
	font-size: 40px;
	font-weight: bold;
	font-family: Impact;
	margin-left: .3em
}

.event-date {
	font-size: 20px;
	padding: 1em 0em 0em .75em;
}

.event-course {
	font-size: 15px;
	padding: .5em 0em 1em 0em;
	margin-left: 1em;
	width: 99%;
	border-bottom: 1px solid #666;
}

.winner-iframe {
	width: 335px;
	overflow-x: hidden;
	overflow-y: hidden;
	
}
.winner-iframe iframe {
	width: 120%;
	height: 3.1em;
	margin: 2em 0em 2em 1em;
	border: none;
}

.winner-iframe-tie {
	width: 335px;
	overflow-x: hidden;
	overflow-y: hidden;
}

.winner-iframe-tie iframe {
	width: 120%;
	height: 6.2em;
	margin: 2em 0em 2em 1em;
	border: none;
}
.btn-schedule {
	margin-left: 1em;
}

/*CLUBHOUSE STYLING*/

.profile-container {
	width: 100%;
}

.profile-box {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	border-left: 1px solid #FFF;
	border-top: 1px solid #FFF;
	padding: 1em;
	margin-bottom: 2em;
	margin-right: 2em;

}

.profile-picture {
	width: 25em;
	height: 25em;
}

.profile-name {
	display: inline-block;
	width: 10.5em;
	font-size: 25px;
	text-align: left;
	margin-top: .5em;
	margin-right: .5em;
	padding-right: 1em;
	border-bottom: 1px solid #FFF;
	border-right: 1px solid #FFF;
}

.profile-name a {
	text-decoration: none;
}

.home-course-logo {
	display: inline-block;
	width: .25em;
}

.home-course-logo img {
	width: 40px;
}

/********INDIVIDUAL PROFILE***********/

.player-profile-container {
	display: flex;
	width: 100%;
	margin: 0em 10em;
}

.individual-profile-picture img {
	width: 80%;
	min-width: 200px;
	height: auto;
}

.profile-general {
	display: block;
}

.profile-name-box {
	display: flex;
	width: 20em;
	align-content: center;
}

.individual-profile-name {
	width: 7em;
	font-size: 60px;
	margin-top: 1em;
}


.home-course-logo-profile {
	width: 4em;
	margin: 140px 0px 0px 40px;
}

.home-course-logo-profile img {
	width: 50px;
	padding-bottom: 3em;
}

.iframe-player-summary {
	width: 19.3em;
	height: 6.5em;
	overflow: hidden;
	border: 0;
	margin-bottom: 3em;
	display: inline-block;
}

/*******PLAYER PROFILE********/

	@media (max-width: 999px) {
	
	.container {
		margin: 1.5em 0em 0em 0em;
	}
		
	.player-profile-container {
		display: block;
		width: 100%;
		margin: 0em 1em;
	}

	.individual-profile-picture img {
		width: 90%;
		min-width: 300px;
		max-width: 500px;
		height: auto;
	}

	.profile-general {
		display: block;
	}

	.profile-name-box {
		display: flex;
		width: 20em;
		align-content: center;
	}

	.individual-profile-name {
		width: 7em;
		font-size: 50px;
		margin-top: 1em;
	}
		
	.home-course-logo-profile {
		width: 4em;
		margin: 110px 0px 0px 40px;
	}

	.home-course-logo-profile img {
		width: 50px;
		padding-bottom: 3em;
	}
}


.iframe-extra-small {
	width: 40em;
	height: 15em;
}

.iframe-small {
	width: 100%;
	height: 27em;
}

.iframe-medium {
	width: 100%;
	height: 50em;
}

.iframe-large {
	width: 100%;
	height: 75em;
}

.link-style {
	width: 11.5em;
	border-bottom: 1px solid #FFF;
	border-right: 1px solid #FFF;
	padding-left: 3px;
	
}
.link-style a {
	text-decoration: none;
}

/*STAT PAGES*/

.iframe-scoring {
	width: 100%;
	height: 74em;
	border: none;
	}

.iframe-putting {
	width: 100%;
	height: 45em;
	border: none;
}

.iframe-stats {
	width: 100%;
	height: 55em;
	border: none;
}

.standings-container {
	width: 100%;
	overflow: hidden;
}	
		
.iframe-standings {
	width: 100%;
	height: 88em;
	border: none;
	overflow-x: hidden;
}
.stat-type-header {
	margin-left: 1em;
}

.stat-menu {
	font-size: .85em;
	line-height: 2;
	margin-bottom: 2em;
	margin-left: 1em
}
.stat-categories {
	color: #8E8E8E;
}

.stat-categories a {
	color: #8E8E8E;
}

.selected {
	text-decoration: none;
	color: #FFF !important;
	font-weight: bolder;
}

.header-logo {
	display: inline-block;
	width: 40%;
}
	.header-logo img {
		width: 40%;
		}

.container-general {
	display: inline-block;
	vertical-align: middle;
	font-size: .8em;
	font-family:"Arial Black";
	margin-bottom: 3em;
	width: 60%;
}

.iframe-tourney-standings {
	width: 100%;
	height: 42em;
	border: none;
	overflow-x: hidden;
}

/* IFRAME COUNTDOWN MOBILE*/
	@media (max-width: 430px) {  
	.header-logo {
		display: inline-block;
		max-width: 25%;
	}
		
	.header-logo img {
		max-width: 100px;
		width: 75%;
		}
		
	.container-general {
		display: inline-block;
		vertical-align: middle;
		font-size: .5em;
		font-family:"Arial Black";
		margin-bottom: 3em;
		width: 60%;
	}
		.section-header {
		width: 100%;
		font-family: Impact;
		}
		
	.pnc-section-header {
		width: 100%;
		font-family: Impact;
		font-weight: normal;
		color: #fff;
		text-align: left;
		font-size: 2.5em;
		margin: .5em 0em .5em 0em;
		background-color: transparent;
	}
		
	.iframe-countdown-section {
		width: 100%;
		background-color: transparent;

	}
	.iframe-countdown iframe {
		border: none;
		width: 450px;
		background-color: transparent;
	}
	.iframe-countdown {
		width: 400px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 1rem;
		padding-left: 0px;
		background-color: transparent;
	}

/* AD STYLING MOBILE*/
	@media (max-width: 430px) {  
		.ad-container {
			max-width: 100%;
			margin: left;
			padding: 1.5em;
		}
		.ad-section{
			width: 100%;
			margin: 0em auto;
			padding: 1.5em;
			display: block;
		}
		.ad-image {
			display: block;
			margin-left: auto;
			margin-right: auto;
			max-width: 75%;
	}
}

/*STATS/RECORD PAGE*/
.record-category {
	display: block;
	margin-left: 1em;
}
.record-category a {
	display: block;
	margin-top: .5em;
}
.record-category span {
	display: block;
	margin-top: .25em;
}

.schedule-archive {
	display: block;
	margin-left: 1em;
	margin-bottom: 5em;
}

.schedule-archive a {
	display: inline-block;
	margin-top: 1.5em;
}

/*COURSE OVERVIEW*/

.course-container{
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: solid #FFF .5px;

}

.course-logo {
	width: 5em;
	height: 5em;
}

.course-name {
	font-size: 2em;
	margin-left: 1em;
}

.course-link {
	font-size: 2em;
	margin-left: 1em;
	margin-right: 1em;
	margin-top: .5em;
}
	.course-link li {
		display: inline;
		padding-right: 1em;
		list-style-type: none;
}
.course-link-style {
	text-decoration: none;
}

@media (max-width: 600px) {
	.course-logo {
	width: 3em;
	height: 3em;
}

	.course-name {
	font-size: 1em;
	margin-left: 1em;
}

	.course-link  {
	font-size: 1em;
	margin-left: 1em;
	margin-right: 1em;
	margin-top: .5em;
	}
	
	.course-link li {
		display: inline;
		padding-right: 1em;
		list-style-type: none;
	}
	.course-link-style {
	text-decoration: none;
	}
}

@media (max-width: 405px) {
	.course-name {
		font-size: .75em;
		margin: 1em;
	}
	.course-link  {
	font-size: .75em;
	margin-left: 1em;
	margin-right: 1em;
	margin-top: .5em;
	}
} 

/*COURSE RANKS*/
	.ranking-iframe {
		width: 100%;
		height: 38em;	
}

/*************PRO SHOP***************/
:root {
	--Orange: hsl(26, 100%, 55%);
	--Paleorange: hsl(25, 100%, 94%);
	--verydark: hsl(220, 13%, 13%);
	--Darkgrayish: hsl(219, 9%, 45%);
	--Grayish: hsl(220, 14%, 75%);
	--Lightgrayish: hsl(223, 64%, 98%);
	--White: hsl(0, 0%, 100%);
	}

/**************POPUP*****************/
/*.page-content {
	max-width: 700px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin: 0 auto;
}

.page-content p {
	line-height: 2;
}

.popup-overlay {
	background: rgba(0, 0, 0, 0.4);
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	opacity: 0;
	transition: all 700ms ease;
}

.popup-overlay.active {
	opacity: 1;
}

.popup-container {
	postion: fixed;
	max-width: 500px;
	width: 75%;
	height: 22rem;
	left: 50%;
	top: 50%;
	background-color: #000;
	transform: translate(80%, calc (50% +50px));
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #ffffff;
	padding: 12px 0;
	box-shadow: 0 6px 55px -10px rgba(0, 0, 0, 0.7);
	
	background-size: cover;
	opacity: 0;
	pointer-events: none;
	transition: all 700ms ease;
}

.popup-overlay.active .popup-container {
	transform: translate(80%, 50%);
	opacity: 1;
	pointer-events: auto;	
}

.popup-container,
.popup-container * {
	box-sizing: border-box;
}

.popup-container .right {
	width: 100%;

}

.popup-container .skip-button {
	position: absolute;
	top: 4px;
	right: 4px;
	background: #808080;
	padding: 2px 6px;
	font-size: 14px;
	cursor: pointer;
}

.popup-container p.logo {
	position: absolute;
	top: 30px;
	font-size: 13px;
	color: #ff7d1a;
	text-transform: uppercase;
	margin-left: 10px;
}

.popup-container h2.popup-heading {
	position: absolute;
	top: 35px;
	font-size: 30px;
	text-transform: uppercase;
	margin-left: 10px;
}

.popup-container p.description {
	position: absolute;
	top: 90px;
	font-size: 15px;
	line-height: 1.8;
	margin-left: 10px;
}

.popup-container .register-button {
	position: absolute;
	top: 300px;
	background: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	padding: 8px 24px;
	margin-top: 8px;
	margin-left: 40%;
	display: inline-block;
}
.main-image {
	width: 100%;
}

@media (max-width: 430px) {
	.popup-container {
		postion: fixed;
		max-width: 415px;
		width: 100%;
		height: 20rem;
		transform: translate( 1%, calc(50% + 50px));
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		color: #ffffff;
		padding: 12px 0;
		box-shadow: 0 6px 55px -10px rgba(0, 0, 0, 0.7);
		opacity: 0;
		pointer-events: none;
		transition: all 700ms ease;
	}
	
	.popup-overlay.active .popup-container {
		transform: translate(1%, 50%);
		opacity: 1;
		pointer-events: auto;	
}
	.popup-container,
	.popup-container * {
		box-sizing: border-box;
	}

	.popup-container .right {
		width: 100%;
		
	}
	.popup-container .skip-button {
		position: absolute;
		top: 10px;
		right: 4px;
		background: #808080;
		padding: 2px 6px;
		font-size: 14px;
		cursor: pointer;
}
	.popup-container p.logo {
		position: absolute;
		top: 30px;
		font-size: 13px;
		color: #ff7d1a;
		text-transform: uppercase;
		margin-left: 10px;
	}

	.popup-container h2.popup-heading {
		position: absolute;
		top: 40px;
		font-size: 25px;
		text-transform: uppercase;
		margin-left: 10px;
	}

	.popup-container p.description {
		position: absolute;
		top: 80px;
		font-size: 15px;
		line-height: 1.7;
		margin-left: 10px;
	}

	.popup-container .register-button {
		position: absolute;
		top: 260px;
		background: #fff;
		text-decoration: none;
		font-size: 15px;
		font-weight: bold;
		color: #000000;
		padding: 8px 24px;
		margin-top: 8px;
		margin-left: 40%;
		display: inline-block;
	}
	.main-image {
		width: 100%;
	}
}*/

/*TUTORIAL https://www.youtube.com/watch?v=DRPPDi_2jYg&t=334s*/