@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');


html, body {
	height: 100%;
	width: 100%;
}
body {
	background-color: #000;
	color: #555;
	font-family: 'Lato', HelveticaNeue, sans-serif;
	font-size: 1rem;
	height: 100%;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #d5654f;
}
a:hover {
	text-decoration: underline;
}

strong, b {
	color: #000;
}


h2, h3, h4 {
	color: #35a3ad;
	font-family: CocktailShaker;
	font-weight: normal;
	letter-spacing: .125em;
	}
	
h2 {
	letter-spacing: .0625em;
}	
h3 {
	font-size: 2rem;
	margin: 2rem 0 1.5rem 0;
	}
h3 span {
	color: #000;
	font-family: 'Lato', HelveticaNeue, sans-serif;
	font-size: .625em;
	letter-spacing: normal;
}
h4 {
	font-size: 1.5em;
}




/* main layout */
.theGrid {
	display: grid;
	grid-template-rows: min-content auto auto;
	height: 100%;
}

header {
	padding: 0;
	border-bottom: solid 1px #fff;
}

main {
	background-color: #fff;
	padding: 0;
}

footer {

}

.svgIcons, #theTitle, .none {
	display: none;
}


/* header */


.headerNav {
	margin: 0 auto;
	max-width: 80rem;
	padding: 0 2rem;
}


.header {
	background-color: #fff;
	height: 4.5em;
	padding: 0 1.5em;
}

.header h1 {
	margin: 0 auto;
	max-width: 80rem;
	text-align: left;
	display: flex;
	align-items: center;
}

#shLogo {
	height: 5.5rem;
	width: 11rem;
	position: relative;
	vertical-align: middle;
	z-index: 1;
}

.header h1 .tagLine {
	color: #000;
	font-size: 1rem;
	margin-left: .5rem;
	margin-top: -1.125rem;
}



/* topNavRow */
.topNavRow {
	background: #000;
	min-height: 2rem;
	padding: 0 2rem;
	position: relative;
	text-align: right;
}

.topNav button {
	display: none;
}

.topNav ul {
	display: inline-block;
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	white-space: nowrap;
}
.topNav ul li {
	display: inline-block;
	line-height: 2rem;
	margin: 0;
	padding: 0 0 0 1.5rem;
}
.topNav a {
	color: #fff;
	font-family: HelveticaNeue, sans-serif;
}



.topNav .skipLink span, #relPagesHeader .skipLink span {
	display: none;
}

.topNav .skipLink:focus span {
	display: inline-block;
	color: #fff;
	font-size: .75rem;
}

#relPagesHeader .skipLink {
	margin-left: .75rem;
}

#relPagesHeader .skipLink:focus span {
	display: inline-block;
	font-size: .875rem;
	font-weight: normal;
}




/* hamboogie menu */
#navToggler {
	padding: 0;
	background: none;
	border: none;
	margin-top: -1px;
	margin-right: -.5rem;
}

.toggleIcon {
    margin: 0 auto;
    margin-top: 0;
    width: 22px;
    height: 19px;
    position: relative;
	display: inline-block;
}

.toggleIcon .bar {
    padding: 0;
    width: 22px;
    height: 3px;
    background-color: #fff;
    display: block;
    border-radius: 2px;
    transition: all 0.4s ease-in-out;
    position: absolute; 
}

#navToggler.expanded .toggleIcon .bar2, #navToggler.expanded .toggleIcon .bar3 {
    background-color: #000;
}

.bar1 {
    top: 0;
}
.bar2,
.bar3 {
    top: 8px;
}
.bar3 {
    right: 0;
}
.bar4 {
    bottom: 0;
}

#navToggler.expanded {
	margin-top: 0;
	
}

button.expanded .toggleIcon .bar1 {
    transform: translateX(40px);
    background-color: transparent;
}
button.expanded .toggleIcon .bar2 {
    transform: rotate(45deg);
}
button.expanded .toggleIcon .bar3 {
    transform: rotate(-45deg);
}
button.expanded .toggleIcon .bar4 {
    transform: translateX(-40px);
    background-color: transparent;
}


/* main content */
#homePage #mainContent {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 2rem;
}

.mainLayout {
	display: grid;
	grid-template-columns: 1fr auto auto 1fr;
}

.subheadRow {
	background-color: #81cace;
	padding: .25rem 0 0 0;
	min-height: 2rem;
}
.subheadRow h2 {
	font-family: CocktailShaker;
	font-size: 2rem;
	font-weight: normal;
	line-height: 2.5rem;
	color: #fff;
	letter-spacing: .125rem;
	margin: 0;
}

#bodyCopy {
	line-height: normal;
	padding: 1rem 2rem 0 0;
	max-width: 66rem;
}

.featuredImage {
	margin: 2em 0;
	text-align: left;
}

p.fun {
	color: #000;
	font-size: 1.5rem;
	font-family: CocktailShaker;
	letter-spacing: .1875rem;
	margin: 2.5rem 0;
}

ul li {
	color: #000;
	font-weight: 400;
	margin: 0 0 .75rem 0;
}


/* side sub navigation */
#subNav {
	background-color: #fff;
	color: #000;
	font-weight: bold;
	min-width: 14rem;
	padding: 2rem;
}

#subNav ul {
	font-weight: normal;
	padding-left: 1.7rem;
}

.siteNavColumn h3 {
	display: none;
}




/* miscellaneous */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}




/* footer */
.footerContent {
	background-color: #fef6e1;
	border-top: solid 1px #ccc;
	padding: 0 2rem;
	text-align: center;
}

.siteNav {
	display: inline-grid;
	font-family: HelveticaNeue, sans-serif;
	grid-template-columns: auto auto;
	margin: 0 auto;
	padding: 1.5rem 0 1.75rem;
	text-align: left;
}

.continentsNav {
	display: grid;
	grid-template-columns: repeat(4, auto);
	width: auto;
}

.continentsNav .siteNavColumn {
	margin-right: 2rem;
}

.siteNav strong {
	color: #1f99a4;
	font-family: CocktailShaker;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: .125rem;
	margin: 0 3rem 0 0;
	/* white-space: nowrap; */
}

.siteNav ul  {
font-weight: 100;
	margin: .25rem 0 0 0;
	padding: 0;
	list-style-type: none;
} 

.siteNav ul li, .siteNav ul.mainNav li {
	color: #999;
	margin: 0;
	padding: 0 0 .125rem 1rem;
}
.siteNav ul li:first-of-type, .siteNav ul.mainNav li {
	color: #000;
	font-weight: bold;
	padding: 0 0 .5rem 0;
}

.siteNav ul li:first-of-type a, .siteNav ul.mainNav li a {
	font-size: .875em;
}

.siteNav ul, .siteNav div {
	flex-grow: 1;
}

.siteNav a {
	color: #555;
	font-size: .75em;
}


.copyRight {
	color: #8cd0d4;
	font-size: .6275em;
	margin: 0 auto;
	max-width: 80rem;
	padding: .75rem 2rem;
}



/* home page */
#homePage .intro {
	align-items: flex-end;
	display: flex;
	flex-flow: row wrap;
	padding: 1rem 0 2rem 0;
	text-align: center;
}
.introLeft {
	padding: 0 3rem 0 0;
	flex: 3 0;
}
#homePage #shLogo {
	height: 13.5rem;
	margin: 1rem 0 -1.5rem 0;
	width: 27rem;
	z-index: 1;
}
.introText {
	text-align: left;
}
.introHeader {
	font-size: 2.5rem;
	text-align: center;
}
.introText a {
	font-weight: bold;
}

.hitTheRoad {
	color: #444;
	font-size: 1.75em;
	font-family: CocktailShaker;
	letter-spacing: .1875rem;
	text-align: center;
}

.emphasis {
	font-weight: bold;
}

.hpImageContainer {
	flex: 1 0; 
	padding: 0 1.5rem 0 1.5rem;
}


.homePageImage {
	border-radius: .75rem;
	box-shadow: .125rem .125rem .5rem rgba(0, 0, 0, .75);
	background: url(../images/shHomePageGraphic.jpg) no-repeat bottom center;
	width: 400px; 
	height: 355px;
	background-size: 100%;
	margin: 1rem auto 2rem auto;
}



/* main pages */
.mainLayout2 {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}

#mainPage #bodyCopy {
	line-height: normal;
	padding: 0 2rem;
	max-width: 72rem;
}

#mainPage #titles {
	line-height: normal;
	padding: 0 3.5rem;
	max-width: 72rem;
}

p.headline {
	color: #35a3ad;
	font-family: CocktailShaker;
	font-size: 2.5rem;
	font-weight: normal;
	letter-spacing: .0625em;
	text-align: center;
	margin-bottom: 0;
}

.contact {
	align-items: top;
	display: flex;
	flex-flow: row wrap;
	padding: 1rem 0 0 0;
}
#mainPage p.fun {
	display: none;
}
.mainPageLeft {
	padding: 0 1.5rem 0 1.5rem;
	flex: 3 0;	
	min-width: 18rem;
}
.contactText {
	text-align: left;
}
.mainPageImageContainer {
	flex: 1 0; 
	padding: 0 1.5rem 0 1.5rem;
}
.contactImage {
	border-radius: .75rem;
	box-shadow: .125rem .125rem .5rem rgba(0, 0, 0, .75);
	background: url(../../images/sendMessage.jpg) no-repeat bottom center;
	width: 400px; 
	height: 355px;
	background-size: 400px;
	margin: 1rem auto 2rem auto;
}
.mainPageFunTagline {
	color: #000;
	font-size: 1.5rem;
	font-family: CocktailShaker;
	letter-spacing: .1875rem;
	margin: 2.5rem auto 1rem;
	text-align: center;
}


/* nav filters */
#subNav .altText, #rgNav .altText + span, .continentsNav .altText {
	display: none;
}


/* maps */
.map {
	text-align: center;
}

.map img {
	margin-bottom: .5rem;
}
.map p {
	font-size: .875rem;
	margin: 0;
	padding: 0 2rem;
	text-align: left;
	margin-bottom: 2.5rem;
}



/* drive guides */

ul.landmarks li {
	color: #555;
	font-weight: 200;
	list-style-type: disc;
	margin-bottom: .5em;
}
.landmarks a {
	/* color: #000; */
	/* font-weight: 400; */
	/* text-decoration: underline; */
}
div.listItemInfo {
	align-items: center;
	display: flex;
	flex-direction: row;
	padding: .5rem 0 .75rem;
}

p.listItemInfo {
	align-items: top;
	display: flex;
	flex-direction: row;
}

.listItemIcon {
	flex-shrink: 0;
	width: 2.75rem;
	padding-top: .25rem;
}

/*
.listItemInfo a {
	color: #e9327c;
}
*/

.submerged {
	background-color: #cde;
	margin-bottom: 0 !important;
	padding: .25rem .5em;
	margin-left: -2.5rem;
}
ul.landmarks li.submerged {
	list-style-type: disc;
	list-style-position: inside;
	padding-left: 1rem;
}
.submerged  .listItemIcon {
	margin-left: 1.8rem;
}



/* icons */
.warning {
	background: url(../images/warningIcon.svg) no-repeat top left;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
	height: 2.4rem;
	margin-left: -.25rem;
	vertical-align: middle;
	width: 2.4rem;
}

.warningIcon {
	height: 2rem;
	vertical-align: middle;
	width: 2rem;
}

.infoSign {
	background: url(../images/infoIcon.svg) no-repeat top left;
	background-repeat: no-repeat;
	background-size: 100%;
	display: inline-block;
	height: 2rem;
	margin-left: 0;
	vertical-align: middle;
	width: 2rem;
}

.infoIcon {
	height: 1.75rem;
	vertical-align: middle;
	width: 1.75rem;
}



@media only screen and (max-width: 1200px) {
	.continentsNav {
		display: grid;
		grid-template-columns: repeat(2, auto);
	}
	
	.topNavRow ul > li {
		padding: 0 0 0 1.25rem;
		font-size: .875rem;
	}
	
	.subheadRow h2, h3 {
		font-size: 1.875rem;
	}
	
	.headerNav {
		padding: 0 1rem;
	}
}


@media only screen and (max-width: 864px) {
#homePage .intro {
		display: block;
	}
	.introLeft {
		padding: 0;
	}	
	
	.subheadRow h2, h3 {
		font-size: 1.75rem;
	}
	
	.headerNav {
		padding: 0 .5rem;
	}
}


@media only screen and (max-width: 768px) {
	.continentsNav {
		display: block;
	}

	.footerContent {
		text-align: center;
	}
	
	.hpImageContainer{
		text-align: center;
	}
	.homePageImage {
		margin: 0 auto;
	}

	.siteNav h3 {
		/* font-size: 1.125rem; */
	}
	.continentsNav .siteNavColumn {
		margin-right: 0;
	} 
	.topNavRow ul > li {
		padding: 0 0 0 1rem;
		/* font-size: .75rem; */
	}
	
	.subheadRow h2, h3 {
		font-size: 1.625rem;
	}
	
	.headerNav {
		padding: 0 .25rem;
	}
	
	.header h1 .tagLine {
		font-size: .875rem;
		margin-left: .625rem;
	}
}


@media only screen and (max-width: 667px) {
	body {
		font-size: .875rem;
	}

	.headerNav {
		padding: 0;
	}

	#navToggler {
		display: inline;
	}

	.topNav {
		position: absolute;
		right: 1rem;
		top: .25rem;
		padding: .125rem 1rem .75rem 1rem;
	}
	
	.topNav.showMenu {
		background-color: #fff;
		border-radius: .25rem;
		box-shadow: 0 0 .25rem #000;
		margin: 0;
		z-index: 10;
	}
	
	#topNavButton {
		display: inline;
		background-color: white;
	}
	
	.topNav ul, .empty {
		display: none;
	}
	
	.topNav.showMenu ul {
		display: block;
	}
	
	.topNav ul li {
		display: block;
		line-height: normal;
		margin: 0;
		padding: .25rem 0;
		/* font-size: .75rem; */
		text-align: left;
	}
	.topNav ul li a {
		color: #000;
	}

	.topNav .skipLink:focus span {
		display: inline-block;
		color: #fff;
		font-size: .75rem;
	}
	
	.introHeader {
		/* font-size: 1.25rem; */
	}
	
	.mainLayout, .mainLayout2  {
		display: block;
	}
	
	.subheadRow {
		background-color: #81cace;
		padding: .25rem 2rem 0 2rem;
	}
	.subheadRow.empty {
	 	padding: 0;
	 }
	#subNav {
		padding: 1.5rem 0 0 2rem;
	}
	
	#subNav ul {
		margin-bottom: 0;
	}
	
	#bodyCopy {
		padding: 0 2rem;
	}
	
	.header h1 .tagLine {
		font-size: .8125rem;
		margin-left: .5rem;
	}
	
	.subheadRow h2, h3 {
		font-size: 1.5rem;
	}
	
	#homePage #shLogo {
		height: 12rem;
		margin: 1rem 0 -1.5rem 0;
		width: 24rem;
		z-index: 1;
	}
	
	.siteNav strong {
		margin: 0 2rem 0 0;
	}
	
	#mainPage #titles {
		padding: 0 2rem;
	}
	
	.mainPageImageContainer {
		padding: 0;
	}
}

@media only screen and (max-width: 375px) {


	
	
	
	
}