@font-face { font-family: 'Raleway'; src: url('../fonts/Raleway-VariableFont_wght.ttf'); }
@font-face { font-family: 'Raleway'; src: url('../fonts/Raleway-Italic-VariableFont_wght.ttf'); font-style: italic; }
@font-face { font-family: 'Faustina'; src: url('../fonts/Faustina-VariableFont_wght.ttf.ttf'); }

*, *:before, *:after { box-sizing: inherit; }
html { box-sizing: border-box; font-size: 100%; }
html, body { height: 100%; margin: 0; }
a { color: #9cab2b; }
	a:hover, a:active, footer a { color: #689deb; }
	footer nav a { color: #fff; }
	header a, footer a, .address-hours a, a.book { text-decoration: none; }
	.copyright a, .address-hours a { color: #b5c732; }
	.copyright a:hover, .address-hours a:hover, .copyright a:active, .address-hours a:active, footer nav a:hover, footer nav a:active, footer a:hover, footer a:active { color: #b5dcf3; }
	a.book { border: 1px solid #374886; box-shadow: #374886 4px 4px 0 0; display: inline-block; margin-top: 0.3rem; padding: 0.5rem 1rem; }
	a.book:link, a.book:visited { background: #9cab2b; color: #fff; }
	a.book:hover, a.book:active { background: #689deb; transform: translate(2px, 2px); }
aside { background: url('../images/legends.jpg') center top no-repeat; background-size: cover !important; color: #fff; }
	.contact aside { background: url('../images/flag.jpg') center bottom; }
	.course aside { background-position: center -270px; }
	.fees aside { background: url('../images/aside.jpg') center -42px no-repeat; }
	.tournaments aside { background: url('../images/green.jpg') center -130px; }
body { background: #fbfdfd; color: #343434; font-family:  'Raleway', sans-serif; font-size: 16px; line-height: 1.4; }
blockquote { font-style: italic; }
footer { background: #374886; color: #fff; font-size: 1rem; padding: 1rem 0 0 0; }
	footer .container.grid { padding-bottom: 1.8rem; }
	footer h5 { margin: 1.5rem 0 1rem 0; }
h1, h2, h3, h4, h5, h6 { line-height: 1.1; margin: 1rem 0; }
	h1 { font-family: 'Faustina', serif; font-size: 2.8rem; margin-bottom: 0; }
	section h2, section h3, section h4 { margin: 1.7rem 0; }
	section h2 { font-size: 2.4rem; }
	h3 { font-size: 1.6rem; text-transform: uppercase; }
	footer h3 { font-size: 1.1rem; font-weight: 600; }
	h3 span { font-size: 1rem; font-weight: 400; text-transform: capitalize; }
	h4 { font-size: 1.3rem; }
	h5 { font-size: 1.1rem; font-weight: 600; margin: 0; }
header { background: #fbfdfd; padding: 1rem 0; }
header, footer { overflow: auto; }
img { max-width: 100%; }
p { margin: 1rem 0; }
section, .container, header > div { margin: 0 auto; width: 92%; }
	section { margin: 2rem auto 3rem auto; overflow: auto; }
strong { font-weight: 600; }
table { width: 100%; }
	.course table, .course td, .course th { border: 1px solid #374886; border-collapse: collapse; }
	.hickory table { border: 1px solid #749500; border-collapse: collapse; }
	.hickory th { width: 33%; }
	td, th { padding: 0.5rem; }
	th { text-align: left; }
	.fees th, .tournaments th, .hickory th { border-bottom: 3px solid #749500; }
    .fees tr:nth-child(even), .tournaments tr:nth-child(even), .hickory tr:nth-child(even) { background: #eee; }
    .fees tr:nth-child(odd), .tournaments tr:nth-child(odd), .hickory tr:nth-child(odd) { background: #fff; }
    table ul { margin: 0; }
.background { background: #dee3f2; padding: 1rem 0; }
.blue{ background: #70b5ee; }
.book span { margin-left: 0.5rem; }
.address-hours { background: #374886; color: #fff; font-weight: 500; padding: 0.5rem; }
	.address-hours span, .copyright span { margin: 0 0.5rem; }
.centre { text-align: center; }
.clear { clear: both; }
.copyright { background: #1d2647; font-size: 1rem; padding: 0.2rem 0; }
.email > span:nth-of-type(even) { display: none; }
.fees { background: #dee3f2; }
.float { float: left; margin: 0 1rem 1rem 0; }
.gold { background: #fcc200 }
.header-address { font-weight: 500; margin-top: 0; }
.hickory section.grid { grid-template-columns: 3fr 1fr; grid-column-gap: 4rem; }
.lightbox img { margin: 0 1rem 1rem 0; }
.note { border: 1px solid #374886; display: inline-block; padding: 0.8rem 1.2rem; }
.red { background: #ff3d29; }
.responsive-container { height: 0; margin-bottom: 40px; padding: 0 0 48% 0; position: relative; }
.responsive-container iframe, .responsive-container object, .responsive-container embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.thumbnails img { margin: 0 1rem 1rem 0; }
.white { background: #fff; }

/*============================ Home ============================*/

.home aside { height: 700px; width: 100%; }
.home aside h2 { animation: slide-in 1000ms; background: #fff; color: #343434; display: inline-block; font-family: 'Faustina', serif; font-size: 2.6rem; padding: 2rem 3rem;  margin-top: 180px; width: 80%; }

@keyframes slide-in {
	from {
	  transform: translateX(-100%);
	}
	to {
	  transform: translateX(0%);
	}
}

.features p { border-bottom: 2px solid #cdcdcd; display: grid; font-weight: 500; grid-template-columns: 1fr 18fr; font-size: 1.3rem; margin: 0; padding: 0.3rem 0; }
.features p:nth-child(odd) { background: #dee3f2; }
.features p:last-child { border-bottom: 0; }
.features span { padding: 0.5rem 1rem 0.5rem 1.5rem; }
.features span:first-child { font-weight: 600; }

/*============================ Menu ============================*/

nav { font-weight: 500; padding-bottom: 0.1rem; }
nav a { color: #000; text-decoration: none; }
nav a:hover, nav a:active { color: #689deb; }
nav li { margin: 0 2rem 0 0; list-style: none; }
nav ul { margin-top: 0.3rem; margin-bottom: 0.3rem; padding: 0; }
.home a.menu-home, .tournaments a.menu-tournaments, .fees a.menu-fees, .course a.menu-course, .hickory a.menu-hickory, .contact a.menu-contact { color: #b5c732; }
.home footer a.menu-home, .tournaments footer a.menu-tournaments, .fees footer a.menu-fees, .course footer a.menu-course, .hickory footer a.menu-hickory, .contact footer a.menu-contact { color: #689deb; }
header nav { font-size: 1.3rem; padding-top: 0.5rem; }

/*============================ Media Queries ============================*/

@media (max-width: 780px) {
	.course table, .course thead, .course tbody, .course th, .course td, .course tr, .hickory-contact table, .hickory-contact thead, .hickory-contact tbody, .hickory-contact tr, .hickory-contact th, .hickory-contact td { display: block; }
	.course thead tr, .hickory-contact thead tr { left: -9999px; position: absolute; top: -9999px; }
	.course tr, .hickory-contact tr { border: 1px solid #ccc; border-collapse: collapse; }
	.course td, .hickory-contact td { border: none; border-bottom: 1px solid #eee; padding-left: 50%; position: relative; }
	.course td:before, .hickory-contact td:before { left: 0.5rem; padding-right: 1rem; position: absolute; top: 0.5rem; white-space: nowrap; width: 45%; }
	.course td:nth-of-type(1):before { content: 'Hole'; }
	.course td:nth-of-type(2):before { content: '1'; }
	.course td:nth-of-type(3):before { content: '2'; }
	.course td:nth-of-type(4):before { content: '3'; }
	.course td:nth-of-type(5):before { content: '4'; }
	.course td:nth-of-type(6):before { content: '5'; }
	.course td:nth-of-type(7):before { content: '6'; }
	.course td:nth-of-type(8):before { content: '7'; }
	.course td:nth-of-type(9):before { content: '8'; }
	.course td:nth-of-type(10):before { content: '9'; }
	.course td:nth-of-type(11):before { content: 'Out'; }
	.hickory-contact td:nth-of-type(1):before { content: 'Ron Lyons' }
	.hickory-contact td:nth-of-type(2):before { content: 'Brian Hillman' }
	.hickory-contact td:nth-of-type(3):before { content: 'Chris Ream' }
}

@media (min-width: 980px) {
	aside { height: 300px; }
	header nav li { display: inline; }
	.home aside h2 { clip-path: polygon(0% 0%, 100% 0%, 85% 50%, 100% 100%, 0% 100%); padding-right: 8rem; }
}

@media (max-width: 1199px) {
	.features div:first-child { display: none; }
}

@media (min-width: 1200px) {
	header .grid { display: grid; grid-template-columns: 1fr 5fr; grid-column-gap: 1rem; }
	section, .container, header > div { width: 85%; }
	header nav { text-align: center; }
	footer .container.grid { grid-template-columns: 2fr 2fr 1fr; grid-column-gap: 4rem; }
	.grid, .thumbnails { display: grid; }
	.features { margin: 4rem auto; }
	.features h2 { margin-top: 0; }
	.features.grid { grid-template-columns: 4fr 6fr; grid-column-gap: 1rem; }
	.thumbnails { grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 1rem; width: 98%; }
}