/* Hide mobile bar */

.mobileBar {
	
	display: none;
	
	
}

.bigMenuHeader img {
	max-width: 36px;

}


/* hide down right arrow */

.fa-angle-down {
	
	margin-left: 10px;
	
}

#destArrow, #guidesArrow {
	
	display: none;
	
}

.bigMenuHeader .fa-angle-right {
	display: none;
}


/* top bar container */

.topNavContainer {

	width: 100%;
	background: #7cbdc2;
	
}

/* the top bar */

.topNav {

	display: flex;
	display: -webkit-flex; 
	color: white;
	max-width: 1200px;
	margin: auto;

}

/* top nav links, like home */

.topNav a, .destinationsLink, .guidesLink {
	
	color: white;
	padding: 20px;
	font-weight: normal;
	cursor: pointer;
	
}

.topNav a:hover {
	
	color: #025E66;
	text-decoration: none;
	
}

/* make destinations & guides top menu BG white on hover */

.destinationsLink:hover, .guidesLink:hover {
	
	background: white;
	color: black;
	
}

/* Big menu BOX styling */

.bigMenuDestinations, .bigMenuGuides {
	
	background: white;
	width: 1300px;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	position: absolute; 
	left: CALC(50% - 650px);
	z-index: 9990999999;
	line-height: 2em;
	color: #ccc;
	display: none;
	box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
	-moz-box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
	-webkit-box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
	margin-top: 20px;
	
}

/* Big menu BOX styling - Guides */

.bigMenuGuides {
	
	width: 600px;
	left: -30px;
	padding: 10px 0;

}

/* set fade animation on menu links and big menu boxes */

.bigMenuDestinations, .destinationsLink:hover, .guidesLink:hover {

	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: .15s;
	
}

/* make guides link relative so guides will align next to it */

.guidesLink {
	
	position: relative;
	
}

/* fade in animation */

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* show menu on hover */

.destinationsLink:hover > .bigMenuDestinations {
	
    display: flex;
    display: -webkit-flex;
	
}

.guidesLink:hover > .bigMenuGuides {
	
    display: flex;
    display: -webkit-flex;
	
}


/* Big destinations styling */

/* counties */

.bigMenuDestinations a {
	
	white-space: nowrap;
	font-size: 10pt;
	display: inline-block;
	margin: 3px;
	/*font-weight: normal;*/
	padding: 0;
	color: #0075d6;
	font-weight: bold;
	border-right: 1px solid #ccc;
	padding-right: 20px;
	margin-right: 10px;
	
	
}


.bigMenuDestinations a.bigMenuHeader {
	
	border-right: none;
	
}

.bigMenuDestinations a:hover {
	
	color: #1655e0;
	text-decoration: underline;
	
}

/* col width */

.bigMenuCol {
	
	width: 33%;
	padding: 20px;
	
}

/* regions */

a.bigMenuHeader {
	
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	font-size: 17pt;
	margin: 10px auto;
	color: #5c5c5c;
	font-weight: normal;
	transition: all .2s;
	
}

/* style tiny image in destination menu */

a.bigMenuHeader img {
	
	border: 1px solid black;
	margin-right: 10px;
	
	
}

a.bigMenuHeader:hover {
	
	text-decoration: none;
	color: black;
	
}

/* style guides */

.bigMenuGuides a {
	
	display: block;
	padding: 15px;
	color: #0075d6;
	width: 50%;

	
}

.bigMenuGuides a:hover {
	
	color: white;
	background: black;
	
}

/*
##########################################

Media Queries

##########################################
*/


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

	.bigMenuDestinations {
		
		max-width: 90%;
		left: 5%;
		right: 5%;
		
	}

}


/* at 850, the big menu is not shown
and the mobile menu is shown */

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

	div, a {
	  -webkit-tap-highlight-color: transparent;
	  -webkit-touch-callout: none;
	  -webkit-user-select: none;
	  -khtml-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	
	/* hide the desktop menu bar */
	
	.topNavContainer {
		
		background: none;

	}
	
	/* adjust the orientation of the menu etc */
	
	.topNav {
	
		display: none;
		flex-direction: column;
		-webkit-flex-direction: column;
		border: 1px solid #383B48;
		width: 90%;
		background: #4e5261;
		left: 0;
		right: auto;
		margin: 0;
		position: absolute;
		z-index: 10000005;
		
	}
	
	.topNav a, .topNav div {
		
		color: white;	
		padding: 0;
		
	}
	
	/* border under each item */
	
	#mainMenu span, .bigMenuHeader, .bigMenuCol a, .bigMenuGuides a {
		
		border-bottom: 1px solid #363945;
		
	}
	
	/* Arrows */
	
	/* hide down down arrow */

	.fa-angle-down {
		
		display: none;
		
	}
	
	#destArrow, #guidesArrow {
		
		display: inline-block;
		float: right;
		font-size: 16pt;
		
	}
	
	.bigMenuHeader .fa-angle-right {
		
		margin-top: 5px;
		display: inline-block;
		float: right;
		
	}


	/* code for the rotating arrow */
	
	.rotated { 
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	

	
	
	/* add missing bottom borders */
	
	.topNav #mainMenu:nth-child(1),
	.topNav #mainMenu:nth-child(2),
	.topNav #mainMenu:nth-child(5),
	.topNav #mainMenu:nth-child(6),
	.topNav #mainMenu:nth-child(7)
	
	{
	
		border-bottom: 1px solid #363945;
		
	}
	
	
	/* change the destinations menu for mobile */
	
	.bigMenuCol, .bigMenuGuides {
		
		width: 100%;
		background: white;
		
	}
	
	.destinationsLink {
	
		padding: 0;
		
	}
	
	/* disable hover effect on mobile */
	
	.destinationsLink:hover, .guidesLink:hover {
	
		background: none;
		color: white;
	
	}
	
	.bigMenuDestinations, .bigMenuGuides {
		
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		color: black;
		box-shadow: none;
		border: none;
		position: relative;
		max-width: 100%;
		left: 0;
		margin: auto;
		line-height: auto;
	}
	
	.bigMenuDestinations a, .bigMenuGuides a {
		
		margin: 0;
		padding: 0;
		border-right: none;
		
	}
	
	/* style guides */
	
	#guidesMenu, #destinationsMenu {
		
		display: none;
		
	}
	
	/* hide county menus */
	
	.countyList {
		
		display: none;
		
	}
	
	a.bigMenuHeader:hover {
		
		color: white;
		
	}
	
	.bigMenuGuides a {
		
		width: 100%;
		padding: 12px;
		
	}
	
	a.bigMenuHeader {
	
		display: block;
		font-size: 11pt;
		margin: auto;
		padding: 0;
		background: #5d6273;
		color: white;
				
	}
	
	/* hide the square images */
	
	.bigMenuHeader img {
		
		display: none;
		
	}
	
	/* main menu headings like blog, guides */
	
	a#mainMenu, #mainMenu span {
		
		display: block;
		padding: 16px;
		
	}
	
	/*counties */
	
	.bigMenuCol a {
	
		width: 100%;
		padding: 11px;
		
	}
	
	
	/* style the mobile bar */

	a.mobileHomeLink, a.mobileHomeLink:hover, .mobileMenuLink, .mobileMenuLink:hover {
		
		padding: 15px;
		color: #5E4944;
		text-decoration: none;
		
	}
	
	a.mobileMenuLink {

		min-width: 75px;
		text-align: center;
	}
	
	a.mobileMenuLink i {

		margin-top: 6px;
		padding: 0;
		
	}
	
	/* logo */
	
	.mobileBar img {

		width: 100%;
		
	}

	.mobileBar {
		
		background: white;
		width: 100%;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		align-items: center;
		-webkit-align-items: center;
		height: 60px;
		border-bottom: 3px solid #ccc;
		
	}
	
	.mobileLogo {
		
		text-align: center;
		/*padding: 10px;*/
		
	}
	
	
	/* burger menu */
	
	.fa-bars, .fa-times {
		
		font-size: 24px;
		color: #5E4944;
		
	}
	
	/* close X */
	
	.fa-times {
		
		padding: 0 3px 0 2px;
		
	}
	
	

	/* turn off HR */
	
	.bigMenuDestinations hr {
		display: none;
	}
	
	
	.bigMenuDestinations a:hover {
		
		color: white;
		text-decoration: none;
		
	}
	

}




@media only screen and (max-width: 400px) {
	
	
	/* logo */
	
	.mobileBar img {

		width: 100%;
		
	}
	
}