/* #FAD089,#FF9C5B,#FCF400,#ED303C,#3B8183,#FAD089,#FF9C5B,#FCF400 */

/******* FONTS *******/

@font-face {
	font-family: "Lora";
	src: url('/_home/Fonts/Lora/Lora-VariableFont_wght.ttf');
}


/******* BODY *******/

body {
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
	font-weight: normal;
	margin: 0;
	font-size: 11pt;
	line-height: 18pt;
	color: #FFFFFF;
	height: 100%;
		-webkit-text-size-adjust: 100%;
}

	body:after {
		content: "";
		position: fixed; /* stretch a fixed position to the whole screen */
		height: 100vh; /* fix for mobile browser address bar appearing disappearing */
		top: 0;
		left: 0;
		right: 0;
		z-index: -1; /* needed to keep in the background */
		background: url(/_home/Images/Backgrounds/Iyopawa-Island-Golf-Club_Background.jpg) top left;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
		background-size: cover;
	}


/******* SITE LAYOUT *******/

header, section, aside, footer {
	margin: 0;
	padding: 20px;
	/*border: 1px solid #000000;*/
	/*color: #ffffff;*/
	color: #000000;
}

main {
	/*background: #000000;*/
	background: inherit;
}

header {
	/*background: #03a9f4;*/
	background: inherit;
	color: #FFFFFF;
}

section.feature {
	background: inherit;
	/*background: #d22b1f;*/
	color: #FFFFFF;
	flex: 1;
}

section.action {
	background: inherit;
	/*background: #d22b1f;*/
	color: #FFFFFF;
	flex: 2;
}

section.content {
	background: #FFFFFF;
	/*background: #129a22;*/
	flex: 1;
}

	section.content-half {
		background: #FFFFFF;
		flex: 1;
	}

	section.dom-photo {
		background: #FFFFFF;
		flex: 1;
		margin-bottom: -27px;
	}

section.book-thumbnail {
	background: #FFFFFF;
	flex: 1;
}

	section.book-description {
		background: #FFFFFF;
		flex: 2;
	}

section.video-thumbnail {
	background: #FFFFFF;
	flex: 1;
}

	section.video-description {
		background: #FFFFFF;
		flex: 2;
	}

	section.video-player {
		background: #FFFFFF;
		flex: 1;
	}

	section.video-playlist {
		background: #FFFFFF;
		flex: 0 1 200px;
	}

		div.video-playlist {
			height: 100%;
			overflow-y:  scroll;
		}

			div.video-thumbnails {
				margin: 0 0 20px 0;
			}

section.sidebar {
	background: #FFFFFF;
	/*background: #673ab7;*/
	flex: 0 1 300px;
}

section.books {
	background: #005E23;
	/*background: #129a22;*/
	flex: 1
}

	section.book {
		background: #005E23;
		/*background: #129a22;*/
		flex: 1;
		/*margin-top: -20px;*/
	}

footer {
	background: #FFFFFF;
	/*background: #616161;*/
	color: #000000;
	flex: 1;
	font-size: .6em;
}

.warning {
	margin: 0 0 10px 0;
	border: 1px solid #005E23;
	border-radius: 5px;
	padding: 10px;
	background-color: #005e237f;
	text-align: center;
	font-weight: bold;
}

.break {
	flex-basis: 100%;
	height: 0;
	padding: 0;
}

.wrapper {
	margin: auto;
	max-width: 60rem;	/* 60rem = 960px usually - https://pixelsconverter.com/px-to-rem */
}

section.top-rounded {
	background: #FFFFFF;
	height: 20px;
	flex: 1;
	/*border-radius: 20px 20px 0 0;*/	/* This should match the padding, i.e. 20px is 20px */
	margin-bottom: -40px;	/* This should be double the padding, i.e. 20px becomes -40px  */
}

section.after-top-rounded {
	padding-top: 0; 	/* Override the 20px standard, because 20px is handled via .top-rounded */
}


/******* SITE THEME *******/

.northwell {
	font-family: Lora; 
	margin: .3em 0 0 .15em;		/* If this ends up not being good as it scales, make sure you go and add margin's to places where it is used (i.e. full-logo-text) */
}

	.northwell-clean {
		font-family: Lora; 
		line-height: 1.15em;
		margin: .3em 0 0 .15em;		/* If this ends up not being good as it scales, make sure you go and add margin's to places where it is used (i.e. full-logo-text) */
	}

a, .a, ins {
	color: #005E23;
	border-style: solid;
	text-decoration: none;
	font-weight: bold;
}

	a:hover { color: #000000; }

.b { color: #FCF400; }

rect.hamburger { fill: #FCF400; }

h1, .h1, h2, .h2, h3, .h3 {
	/*font-family: 'Dawning of a New Day', cursive;*/
	font-family: "Lora";
	font-weight: normal;
	line-height: normal;
	color: #005E23;
}

	h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a {
		font-weight: normal;
		border: 0;
		text-decoration: none;
	}

	h1, .h1 {
		font-size: 24pt;
	}

	h2, .h2 {
		font-size: 30pt;
	}

	h3, .h3 {
		font-size: 14pt;
	}

ol, ul {
	padding-left: 40px;
}

	ol { list-style: decimal; }

	ul { list-style: disc; }

		li { margin-bottom: 10px; }

input, textarea {
	color: #FCF400;
	font-weight: bold;
	font-size: 16pt;
	border: 2px solid #FCF400;
	padding: 3px 5px;
	margin: 0;
}

	input#Submit {
		border: 2px solid #FCF400;
		padding: 5px 20px;
		background-color: #FFFFFF;
	}

	textarea {
		font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
		font-size: 12pt;
	}

.left { text-align: left; }

.center { text-align: center; }

.right { text-align: right; }

.black { color: #000000; }

.white { color: #FFFFFF; }

.bold { font-weight: bold; }

.h-spacer { margin-bottom: 40px; }

.valign-middle { 
	height: 100%;
	vertical-align: middle; 
}

.background-transparent { background-color: inherit; }

.background-white { 
	background-color: #FFFFFF; 
	color: #000000;
}

.font-inherit { font-family: inherit; }

.button-maker { margin-bottom: .75em; }

.iframe-container{
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; 
	height: 0;
	box-shadow: 0 0 10px #725215;
		-moz-box-shadow: 0 0 10px #725215;
		-webkit-box-shadow: 0 0 10px #725215;
	margin-bottom: 10px;
	border-radius: 5px;
}

	.iframe-container iframe{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

img.circle-border {
	width: 75%;
	border: 5px solid #FCF400;
		border-top-left-radius: 50% 50%;
		border-top-right-radius: 50% 50%;
		border-bottom-right-radius: 50% 50%;
		border-bottom-left-radius: 50% 50%;
}

	img.circle-border:hover {
		border-color: #000000;
	}

img.link-border {
	border: 3px solid #FCF400;
	width: 95%;
	border-radius: 5px;
}

	img.link-border:hover {
		border: 0;
		width: 100%;
		border-radius: 5px;
	}

img.rounded {
	border-radius: 0 20px 0 20px;
}

	img.rounded-backwards {
		border-radius: 20px 0 20px 0;
	}

br.clear { clear: all; }

::selection {
	background: #FCF400; /* WebKit/Blink Browsers */
  }
::-moz-selection {
	background: #FCF400; /* Gecko Browsers */
}


/******* SITE SECTION SPECIFIC *******/

header {
	padding-top: 0;
	padding-left: 0;
}

	header div.logo {
		color: #000000;
		font-size: 48pt; 
		float: left;
	}

		header div.logo a { 
			text-decoration: none;
			color: inherit;
			border: 0;
			font-weight: normal;
		}

		header div#NavItems {
			display: none;
		}

			header div#NavItems div.navlink {
				margin: 30px 0 0 30px;
				float: left;
			}

				header div#NavItems div.navlink a {
					text-decoration: none;
					font-weight: bold;
					border: none;
					font-size: 22px;
				}

					header div#NavItems div.navlink a:hover {
						color: #000000;
					}

					div.navlink svg { 
						width: 24px; 
						height: 24px;
					}

					div.navlink svg path, div.navlink svg rect, div.navlink svg circle {
						fill: #005E23;
					}

						div.navlink svg:hover path, div.navlink svg:hover rect, div.navlink svg:hover circle {
							fill: #000000;
						}

		header div#Mobile-NavItems {
			display: block;
			float: right;
			padding-top: 20px;
		}

			div#HamburgerClose {
				display: none;
				color: #FCF400;
				font-size: 3em;
				padding: 5px 5px 0 0;
				font-weight: normal;
			}

				header div#Mobile-NavItems a {
					text-decoration: none;
					border: 0;
				}

		header div#MobileLinks {
			display: none;
			background-color: #FFFFFF;
			background:rgba(0,0,0,0.66);
			margin: 40px -20px 0 0;
			text-align: center;
			text-transform: capitalize;
			font-size: 1.5em;
		}

			header div#MobileLinks div.navlink {
				margin: 10px 20px;
				border-bottom: 1px solid #FFFFFF;
				padding: 10px;
			}

				header div#MobileLinks:last-child div.navlink {
					border-bottom: 0;
				}

				header div#MobileLinks div.navlink a {
					border-bottom: 0;
					text-decoration: none;
					font-weight: normal;
					/*color: #00247C;*/
				}

section.feature {
	padding: 0;
	text-align: center;
}

	section.feature img {
		max-width: 15rem;
	}

section.action {
	padding: 0;
}

	section.action .action-description {
		margin: 20px;
		background:rgba(0,0,0,0.33);
		padding: 20px;
	}

footer {
	text-align: right;
}


/******* ELEMENT SPECIFIC *******/

a.buy-now, a.buy-now-small {
	padding: 10px 20px;
	background-color: #FCF400;
	text-transform: uppercase;
	color: #005E23;
	font-weight: bold;
	font-size: 1.5em;
	border: 0;
	text-decoration: none;
}

	a.buy-now:hover, a.buy-now-small:hover {
		color: #000000;
	}

	a.buy-now-small {
		font-size: 1.15em;
	}

.book-cover {
	width: 75%;
	margin: 0 auto;
}

	section.book .book-cover {
		border: 2px solid #FFFFFF;
	}

		section.book .book-cover:hover {
			border-color: #000000;
		}

section.book a {
	border: 0;
	text-decoration: none;
}

.book-thumbnail { text-align: center; }

	.book-thumbnail img { max-width: 75%; }

.book-widget-container {
	margin-left: -20px;
}

	.book-widget {
		float: left;
		margin-right: 20px;
		padding: 10px 20px;
	}

iframe#Map {
	border: 4px solid #FCF400;
	border-radius: 5px;
	width: 912px;
	height: 320px;
}