/* CSS HTML H2woe created by 
H2Woe web design by Maggie Kennedy
Copyright(c) MJ Innovations 2014, All Rights Reserved do not use without written permission */


/*  FONTS 
===============================================-- */
	@import url(http://fonts.googleapis.com/css?family=Raleway:400);
	@font-face { font-family: 'ostrich-black'; src: url('../fonts/ostrich-black.ttf');}
	@font-face { font-family: 'ostrich-bold'; src: url('../fonts/ostrich-bold.ttf');}
	@font-face { font-family: 'ostrich-dashed'; src: url('../fonts/ostrich-dashed.ttf');}
	@font-face { font-family: 'ostrich-light'; src: url('../fonts/ostrich-light.ttf');}
	@font-face { font-family: 'ostrich-regular'; src: url('../fonts/ostrich-regular.ttf');}
	@font-face { font-family: 'ostrich-rounded'; src: url('../fonts/ostrich-rounded.ttf');}



/*  NAVIGATION
===============================================-- */
#nav{
	width: 25%;
	height: 16%;
    list-style:none;
	font-family: 'ostrich-regular';
    margin-bottom:10px;
	position: absolute;
	z-index: 250;
	top: 0;
	left: 31%;
}
#nav li {
    float:left;
    margin-right:10px;
    position:relative;
}
#nav li h1 {
	font-size: 2.5em;
	color: #5b9fa9;
}
#nav li h1:hover {
	color: #B1E8FF;
}
#nav a {
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover {
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
	max-width: auto;
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav p {
	width: 12.8em;
	background: rgba(70, 72, 76, 0.95);
	padding: 0.5em 0.5em 0.5em 0.9em;
	border: 0.2em solid #E48C4C;
	border-radius: 1em;
	display: inline-block;
	color: #fff;
	font-size: 1em;
	font-family: 'Raleway', sans-serif;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#333;
}


#nav2{
	width: 25%;
	height: 16%;
    list-style:none;
	font-family: 'ostrich-regular';
    margin-bottom:10px;
	position: absolute;
	z-index: 201;
	top: 0;
	left: 51%;
}
#nav2 li{
    float: left;
    margin-right: 10px;
    position: relative;
}
#nav2 li h1 {
	font-size: 2.5em;
	color: #5b9fa9;
}
#nav2 li h1:hover {
	color: #B1E8FF;
}
#nav2 a{
    display: block;
    padding: 5px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 1em;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#nav2 a:hover{
    color: #fff;
    background: #6b0c36;
    text-decoration: underline;
}

/*--- DROPDOWN ---*/
#nav2 ul{
    background: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style: none;
    position: absolute;
    left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav2 ul li{
    padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float: none;
}
#nav2 ul a{
	border: 0.18em solid #E48C4C;
	border-radius: 0.5em;
	font-size: 1em;
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav2 li:hover ul{ /* Display the dropdown on hover */
    left: 0; /* Bring back on-screen when needed */
}
#nav2 li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background: rgba(70, 72, 76, 0.95);
    text-decoration: underline;
}
#nav2 li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration: none;
}
#nav2 li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background: #E48C4C;
}


#nav3{
	width: 25%;
	height: 16%;
    list-style:none;
	font-family: 'ostrich-regular';
    margin-bottom:10px;
	position: absolute;
	z-index: 201;
	top: 0;
	left: 71%;
}
#nav3 li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav3 li h1 {
	font-size: 2.5em;
	color: #5b9fa9;
}
#nav3 li h1:hover {
	color: #B1E8FF;
}
#nav3 a {
    display: block;
    padding: 5px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 1em;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
#nav3 a:hover{
    color: #fff;
    background: #6b0c36;
    text-decoration: underline;
}

/*--- DROPDOWN ---*/
#nav3 ul {
    background: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style: none;
    position: absolute;
    left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav3 ul li{
    padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float: none;
}
#nav3 ul a{
	border: 0.18em solid #E48C4C;
	border-radius: 0.5em;
	font-size: 1em;
    white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav3 ul p {
	width: 20%;
	height: 20%;
	display: inline;
	color: #fff;
}
#nav3 li:hover ul{ /* Display the dropdown on hover */
    left: 0; /* Bring back on-screen when needed */
}
#nav3 li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background: rgba(70, 72, 76, 0.95);
    text-decoration: underline;
}
#nav3 li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration: none;
}
#nav3 li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background: #E48C4C;
}



/*  CONTENT 
===============================================-- */
body {
	background: #547c8d;
	overflow: hidden;
}
li {
	list-style-type: none;
}
#main-container {
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 0;
}
#logo {
	width: 15%;
	height: 18%;
	margin: 1em;
	position: absolute;
	z-index: 100;
	top: 0;
}
@-webkit-keyframes spin {
	0% { -webkit-transform: rotateY(0deg);}
	100% { -webkit-transform: rotateY(360deg);}
}
@-moz-keyframes spin {
	0% { -moz-transform: rotateY(0deg);}
	100% { -moz-transform: rotateY(360deg);}
}
@-o-keyframes spin {
	0% { -o-transform: rotateY(0deg);}
	100% { -o-transform: rotateY(360deg);}
}
@-ms-keyframes spin {
	0% { -ms-transform: rotateY(0deg);}
	100% { -ms-transform: rotateY(360deg);}
}
@-webkit-keyframes swing {
	20% {
	-webkit-transform: rotate3d(0, 0, 1, 8deg);
	        transform: rotate3d(0, 0, 1, 8deg);
	}

	40% {
	-webkit-transform: rotate3d(0, 0, 1, -5deg);
	        transform: rotate3d(0, 0, 1, -5deg);
	}

	60% {
	-webkit-transform: rotate3d(0, 0, 1, 2deg);
	        transform: rotate3d(0, 0, 1, 2deg);
	}

	80% {
	-webkit-transform: rotate3d(0, 0, 1, -2deg);
	        transform: rotate3d(0, 0, 1, -2deg);
	}

	100% {
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	        transform: rotate3d(0, 0, 1, 0deg);
	}
}

@keyframes swing {
	20% {
	-webkit-transform: rotate3d(0, 0, 1, 8deg);
	        transform: rotate3d(0, 0, 1, 8deg);
	}

	40% {
	-webkit-transform: rotate3d(0, 0, 1, -5deg);
	        transform: rotate3d(0, 0, 1, -5deg);
	}

	60% {
	-webkit-transform: rotate3d(0, 0, 1, 2deg);
	        transform: rotate3d(0, 0, 1, 2deg);
	}

	80% {
	-webkit-transform: rotate3d(0, 0, 1, -2deg);
	        transform: rotate3d(0, 0, 1, -2deg);
	}

	100% {
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	        transform: rotate3d(0, 0, 1, 0deg);
	}
}
.bouy1 {
	width: 4%;
	height: 16%;
	position: absolute;
	z-index: 200;
	top: 2%;
	left: 27%;
	-webkit-animation-duration: 8s;
		animation-duration: 8s;
	-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	-webkit-transform-origin: bottom center;
		-ms-transform-origin: bottom center;
		transform-origin: bottom center;
	-webkit-animation-name: swing;
		animation-name: swing;
	-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;	
}
.bouy2 {
	width: 4%;
	height: 16%;
	position: absolute;
	z-index: 200;
	top: 2%;
	left: 47%;
	-webkit-animation-duration: 8s;
		animation-duration: 8s;
	-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	-webkit-transform-origin: bottom center;
		-ms-transform-origin: bottom center;
		transform-origin: bottom center;
	-webkit-animation-name: swing;
		animation-name: swing;
	-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;	
}
.bouy3 {
	width: 4%;
	height: 16%;
	position: absolute;
	z-index: 200;
	top: 2%;
	left: 67%;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-transform-origin: bottom center;
	-ms-transform-origin: bottom center;
	transform-origin: bottom center;
	-webkit-animation-name: swing;
	animation-name: swing;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;	
}
.rotate {
	width: 100%;
	height: 13.4%;
	position: absolute;
	z-index: 150;
	top: 15%;
	-webkit-animation: spin 7s infinite linear;
	-moz-animation: spin 7s infinite linear;
	-o-animation: spin 7s infinite linear;
	-ms-animation: spin 7s infinite linear;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-transform: rotateY(360deg); 
	-moz-transform: rotateY(360deg); 
	-o-transform: rotateY(360deg);
	-ms-transform: rotateY(360deg); 
}
.rotate2 {
	width: 100%;
	height: 13.4%;
	position: absolute;
	z-index: 150;
	top: 15%;
	-webkit-animation: spin 8s infinite linear;
	-moz-animation: spin 8s infinite linear;
	-o-animation: spin 8s infinite linear;
	-ms-animation: spin 8s infinite linear;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-transform: rotateY(360deg); 
	-moz-transform: rotateY(360deg); 
	-o-transform: rotateY(360deg);
	-ms-transform: rotateY(360deg); 
}
.rotate3 {
	width: 100%;
	height: 13.4%;
	position: absolute;
	z-index: 150;
	top: 15%;
	-webkit-animation: spin 7800ms infinite linear;
	-moz-animation: spin 7800ms infinite linear;
	-o-animation: spin 7800ms infinite linear;
	-ms-animation: spin 7800ms infinite linear;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-transform: rotateY(360deg); 
	-moz-transform: rotateY(360deg); 
	-o-transform: rotateY(360deg);
	-ms-transform: rotateY(360deg); 
}
.clear {
	clear: both;
}
.cd-single-point {
	position: absolute;
	border-radius: 50%;
	background: url(../images/pin.png) no-repeat;
	background-size: 90%;
}
.cd-single-point:hover {
	background: url(../images/pin2.png) no-repeat;
	background-size: 90%;
}
.cd-single-point > a {
	position: relative;
	z-index: 302;
	display: block;
	width: 55px;
	height: 55px;
	border-radius: inherit;
}
.cd-single-point > a::after, .cd-single-point > a:before {
	/* rotating plus icon */
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.cd-single-point > a::after {
	height: 2px;
	width: 12px;
}
.cd-single-point > a::before {
	height: 12px;
	width: 2px;
}
.cd-single-point::after {
	/* this is used to create the pulse animation */
	content: '';
	position: absolute;
	z-index: 301;
	width: 90%;
	height: 90%;
	top: 0;
	left: 0;
	border-radius: inherit;
	background-color: transparent;
	-webkit-animation: cd-pulse 2s infinite;
	-moz-animation: cd-pulse 2s infinite;
	animation: cd-pulse 2s infinite;
}
.cd-single-point:first-child { /* Pinpoit 1 Detroit */
	top: 39.7%;
	left: 31.2%;
}
.cd-single-point:nth-child(2) { /* Pinpoit 2 California */
	top: 45%;
	left: 24.6%;
}
.cd-single-point:nth-child(3) { /* Pinpoit 3 Africa */
	top: 59%;
	left: 49%;
}
.cd-single-point:nth-child(4) { /* Pinpoit 4 Minnesota */
	top: 39.7%;
	left: 29%;
}
.cd-single-point:nth-child(5) { /* Pinpoit 5 New Mexico */
	top: 45.4%;
	left: 27%;
}
.cd-single-point:nth-child(6) { /* Pinpoit 6 Bolivia */
	top: 70.8%;
	left: 34.6%;
}
.cd-single-point:nth-child(7) { /* Pinpoit 7 Slovakia */
	top: 35%;
	left: 53.8%;
}
.cd-single-point:nth-child(8) { /* Pinpoit 8 Russia */
	top: 34%;
	left: 67%;
}
.cd-single-point:nth-child(9) { /* Pinpoit 9 China */
	top: 44%;
	left: 71%;
}
.cd-single-point:nth-child(10) { /* Pinpoit 10 Australia */
	top: 75%;
	left: 76%;
}
.cd-single-point.is-open > a::after, .cd-single-point.is-open > a::before {
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(135deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(135deg);
	-o-transform: translateX(-50%) translateY(-50%) rotate(135deg);
	transform: translateX(-50%) translateY(-50%) rotate(135deg);
}
.cd-single-point.is-open::after {
	/* remove pulse effect */
	display: none;
}
.cd-single-point.is-open .cd-more-info {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
.cd-single-point.visited > a {

}
.cd-single-point.visited::after {
	 /*pulse effect no more active on visited elements */
	display: none;
}
/*@media only screen and (min-width: 320px) {
	.cd-single-point.is-open .cd-more-info.cd-left {
		right: 140%;
	}
	.cd-single-point.is-open .cd-more-info.cd-left::before {
		border-left: 30px solid #B38046;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}	
	.cd-single-point.is-open .cd-more-info.cd-right {
		left: 140%;
	}
	.cd-single-point.is-open .cd-more-info.cd-right::before {
		border-right: 30px solid #B38046;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}	
	.cd-single-point.is-open .cd-more-info.cd-top {
		bottom: 140%;
	}
	.cd-single-point.is-open .cd-more-info.cd-top::before {
		border-top: 30px solid #B38046;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
	}	
	.cd-single-point.is-open .cd-more-info.cd-bottom {
		top: 140%;
	}
	.cd-single-point.is-open .cd-more-info.cd-bottom::before {
		border-bottom: 30px solid #B38046;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
	}	
}*/

@-webkit-keyframes cd-pulse {
	0% {
		-webkit-transform: scale(1);
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
	}

	50% {
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
	}

	100% {
	-webkit-transform: scale(1.6);
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
	}
}
@-moz-keyframes cd-pulse {
	0% {
	-moz-transform: scale(1);
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
	}

	50% {
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
	}

	100% {
	-moz-transform: scale(1.6);
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
	}
}
@keyframes cd-pulse {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
	}

	50% {
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
	}

	100% {
		-webkit-transform: scale(1.6);
		-moz-transform: scale(1.6);
		-ms-transform: scale(1.6);
		-o-transform: scale(1.6);
		transform: scale(1.6);
		box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
	}
}
.cd-single-point .cd-more-info {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-align: left;
	line-height: 1.5;
	font-family: 'Raleway', sans-serif;
	font-size: 1em;
	background-color: rgba(70, 72, 76, 0.95);
	margin: 0.3em 0.3em 0.3em 0;
	padding: 0.8em 0.8em 0.8em 0;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
.cd-single-point .cd-more-info::before {
	/* triangle next to the interest point description - hidden on mobile */
	content: '';
	position: absolute;
	height: 0;
	width: 0;
	display: none;
}
.cd-single-point .cd-more-info h1 {
	color: #B38046;
	font-family: 'ostrich-bold';
	font-size: 2em;
	font-size: 1.375rem;
	margin-top: 0;
	margin-bottom: .6em;
}
.cd-more-info h1 img {
	width: 26px;
	cursor: pointer;
}
.cd-single-point .cd-more-info p {
	color: #ffffff;
}
@media only screen and (min-width: 600px) {
	.cd-single-point .cd-more-info {
		position: absolute;
		z-index: 300;
		width: 30em;
		height: auto;
		padding: 1em;
		overflow-y: visible;
		line-height: 1.4;
		border: 0.4em solid #B38046;
		border-radius: 2em;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	}
	.cd-more-info ul li {
		color: #fff;
		list-style-type: disc;
	}
 	.cd-single-point .cd-more-info::before {
		display: block;
	}
	.cd-single-point .cd-more-info.cd-left, .cd-single-point .cd-more-info.cd-right {
		top: 50%;
		bottom: auto;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.cd-single-point .cd-more-info.cd-left::before, .cd-single-point .cd-more-info.cd-right::before {
		top: 50%;
		bottom: auto;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.cd-single-point .cd-more-info.cd-left {
		right: 160%;
		left: auto;
	}
	.cd-single-point .cd-more-info.cd-left::before {
		border-left-color: rgba(255, 255, 255, 0.95);
		left: 100%;
	}
	.cd-single-point .cd-more-info.cd-right {
		left: 160%;
	}
	.cd-single-point .cd-more-info.cd-right::before {
		border-right-color: rgba(255, 255, 255, 0.95);
		right: 100%;
	}
	.cd-single-point .cd-more-info.cd-top, .cd-single-point .cd-more-info.cd-bottom {
		left: 50%;
		right: auto;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.cd-single-point .cd-more-info.cd-top::before, .cd-single-point .cd-more-info.cd-bottom::before {
		left: 50%;
		right: auto;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.cd-single-point .cd-more-info.cd-top {
		bottom: 160%;
		top: auto;
	}
	.cd-single-point .cd-more-info.cd-top::before {
		top: 100%;
	}
	.cd-single-point .cd-more-info.cd-bottom {
		top: 160%;
	}
	.cd-single-point .cd-more-info.cd-bottom::before {
		border-bottom-color: rgba(255, 255, 255, 0.95);
		bottom: 100%;
	}
	.cd-single-point .cd-more-info h1 {
		font-size: 20px;
		font-size: 1.75rem;
		margin-bottom: 0;
	}
	.cd-single-point .cd-more-info p {
		font-size: 14px;
		font-size: 0.875rem;
	}
}

/* close the interest point description - only on mobile */
/*.cd-close-info {
	position: fixed;
	top: 0;
	right: 0;
	height: 44px;
	width: 44px;
}
.cd-close-info::after, .cd-close-info:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	background-color: #475f74;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.cd-close-info::after {
	height: 2px;
	width: 16px;
}
.cd-close-info::before {
	height: 16px;
	width: 2px;
}
@media only screen and (min-width: 600px) {
	.cd-close-info {
		display: none;
	}
} */
.left {
	float: left;
}
.right {
	float: right;
}*



/*  MEDIA QUERIES 
==============================================-- */
@media (max-width: 1281px) { /*		Samsung tablets	/ Android Tablets / Windows Surface	*/
	.cd-single-point .cd-more-info {
		width: 20em;
		font-size: 0.95em;
		border: 0.25em solid #B38046;
	}
	.cd-single-point:first-child { /* Pinpoit 1 Detroit */
		top: 37.2%;
		left: 30.7%;
	}
	.cd-single-point:nth-child(2) { /* Pinpoit 2 California */
		top: 42.5%;
		left: 24.1%;
	}
	.cd-single-point:nth-child(3) { /* Pinpoit 3 Africa */
		top: 55.5%;
		left: 48.5%;
	}
	.cd-single-point:nth-child(4) { /* Pinpoit 4 Minnesota */
		top: 37.2%;
		left: 28.5%;
	}
	.cd-single-point:nth-child(5) { /* Pinpoit 5 New Mexico */
		top: 42.9%;
		left: 26.5%;
	}
	.cd-single-point:nth-child(6) { /* Pinpoit 6 Bolivia */
		top: 68.3%;
		left: 34.1%;
	}
	.cd-single-point:nth-child(7) { /* Pinpoit 7 Slovakia */
		top: 32.5%;
		left: 54.3%;
	}
	.cd-single-point:nth-child(8) { /* Pinpoit 8 Russia */
		top: 31.5%;
		left: 66.5%;
	}
	.cd-single-point:nth-child(9) { /* Pinpoit 9 China */
		top: 41.5%;
		left: 70%;
	}
	.cd-single-point:nth-child(10) { /* Pinpoit 10 Australia */
		top: 72.5%;
		left: 75%;
	}
}
@media (max-width: 1025px) { /*		Ipads	 */
	#nav {
		top: -1%;
		left: 29%;
	}
	#nav li h1 {
		font-size: 1.8em;
	}
	#nav2 {
		top: -1%;
		left: 48%;
	}
	#nav2 li h1 {
		font-size: 1.8em;
	}
	#nav3 {
		top: -1%;
		left: 68%;
	}
	#nav3 li h1 {
		font-size: 1.8em;
	}
	.cd-single-point .cd-more-info {
		width: 15em;
		font-size: 0.85em;
		border: 0.2em solid #B38046;
	}
	.cd-single-point:first-child { /* Pinpoit 1 Detroit */
		top: 36.7%;
		left: 30.7%;
	}
	.cd-single-point:nth-child(2) { /* Pinpoit 2 California */
		top: 42%;
		left: 24.1%;
	}
	.cd-single-point:nth-child(3) { /* Pinpoit 3 Africa */
		top: 55%;
		left: 48.5%;
	}
	.cd-single-point:nth-child(4) { /* Pinpoit 4 Minnesota */
		top: 36.7%;
		left: 28.5%;
	}
	.cd-single-point:nth-child(5) { /* Pinpoit 5 New Mexico */
		top: 42.4%;
		left: 26.5%;
	}
	.cd-single-point:nth-child(6) { /* Pinpoit 6 Bolivia */
		top: 67.8%;
		left: 34.1%;
	}
	.cd-single-point:nth-child(7) { /* Pinpoit 7 Slovakia */
		top: 32%;
		left: 54.3%;
	}
	.cd-single-point:nth-child(8) { /* Pinpoit 8 Russia */
		top: 31%;
		left: 66.5%;
	}
	.cd-single-point:nth-child(9) { /* Pinpoit 9 China */
		top: 41%;
		left: 70%;
	}
	.cd-single-point:nth-child(10) { /* Pinpoit 10 Australia */
		top: 72%;
		left: 75%;
	}
	.rotate {
		top: 11%;
	}
}
/*@media (max-width: 801px) { /*  Samsung tablets  

}

@media (max-width: 769px) { /*  Ipads  

}

@media (max-width: 721px) { /*  Android tablets and Windows Surface tablet 

}

@media (max-width: 641px) { /*  Iphones  

}

@media (max-width: 361px) { /*  Samsung phones and android phones  

}

@media (max-width: 321px) { /*  Older Iphones and Android phones  

}*/