/* ///// SHARED GLOBAL STYLES ///// */
	.resize-animation-stopper * {
	  animation: none !important;
	  transition: none !important;
	}

	html, body{
		background: #E8F9F9;
	}

	.overlay h2, .overlay p{
		color: #E8F9F9;
	}

	.exitSVGOne, .exitSVGTwo, .exitSVGThree, .exitSVGFour, .exitSVGFive, .exitSVGSix{
		cursor: pointer;
	}
/**/

h1{
	color: #042033;
}

.map{
	position: relative;
	z-index: 6;
}

.pin{
	position: absolute;
}

.pinPath{
	fill: #f7bb8b;
}

.overlay{
	position: fixed;
	display: none;
	height: 100vh;
	width: 100%;
	z-index: 7;
}

.map{
	background-image: url(../images/Pacificmap.svg);
	width: 100%;
}

.pin{
	background-size: 100%;
}

.philippines{
	background-image: url(../images/pinicon1.webp);
}

.japan{
	background-image: url(../images/pinicon2.webp);
}

.branch{
	background-image: url(../images/pinicon3.webp);
}

.ruCoast{
	background-image: url(../images/pinicon4.webp);
}

.bering{
	background-image: url(../images/pinicon5.webp);
}

.aleut{
	background-image: url(../images/pinicon6.webp);
}

.noscroll{
	overflow: hidden;
}

.showMeMore{
	display: none;
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}

	#mapStart{
		margin-bottom: 42.857142857142857%;
	}

	h1{
		font-size: 14vw;
	}

	h1:nth-of-type(1){
		padding-top: 28.571428571428571%;
	}

	h1:nth-of-type(2){
		margin-bottom: 1rem;
		margin-left: 19.642857142857143%;
	}

	p{
		font-size: 3.5vw;
		line-height: 4.5vw;
	}

	.subhead{
		margin-left: 26.785714285714286%;
		margin-right: 19.642857142857143%;
	}

	.map{
		padding-top: 91.428571428571429%;
	}

	.pin{
		height: 10%;
		width: 5%;
	}

	.philippines{
		left: 6%;
		top: 78.5%;
	}

	.japan{
		left: 12%;
		top: 70%;
	}

	.branch{
		left: 33%;
		top: 42%;
	}

	.ruCoast{
		left: 52%;
		top: 22%;
	}

	.bering{
		left: 66%;
		top: 14%;
	}

	.aleut{
		left: 70%;
		top: 32%;
	}

	.overlay{
		top: 7.142857142857142%;
	}

	.overlay h2, .overlay p{
		margin-bottom: 1rem;
		text-shadow: 0.5vw 0.5vw 1vw #000000;
	}

	.overlay h2{
		font-size: 5vw;
		letter-spacing: 10%;
	}

	.overlay p{
		font-size: 3.25vw;
	}

	.infoImg{
		background-color: #E8F9F9;
		border-radius: 8vw 0 8vw 0;
		box-shadow: 0vw 1vw 3vw 2vw rgba(0, 0, 0, 0.25);
		padding-top: 50%;
		margin-bottom: 7.142857142857142%;
		width: 100%;
	}

	#overlayOne .infoImg{
		background-image: url(../images/mobile/overlay1_m.jpg);
	}

	#overlayTwo .infoImg{
		background-image: url(../images/mobile/overlay2_m.jpg);
	}

	#overlayThree .infoImg{
		background-image: url(../images/mobile/overlay3_m.jpg);
	}

	#overlayFour .infoImg{
		background-image: url(../images/mobile/overlay4_m.jpg);
	}

	#overlayFive .infoImg{
		background-image: url(../images/mobile/overlay5_m.jpg);
	}

	#overlaySix .infoImg{
		background-image: url(../images/mobile/overlay6_m.jpg);
	}

	.exitWrap{
		margin-left: 94%;
		padding-bottom: 7.142857142857142%;
		width: 6%;
	}

	.moreInfo{
		display: none;
	}

	.showMeMore{
		display: block;
		margin-bottom: 20%;
		margin-left: auto;
		margin-right: 0;
		width: 5%;
	}

	/* / OVERLAY ELEMENT POSITIONS ////////// */
		.overlay p:nth-of-type(1){
			margin-left: 26.785714285714286%;
		}

		.overlay p:nth-of-type(2){
			margin-right: 26.785714285714286%;
		}

	/* / PHILIPPINES ZOOM IN/OUT ////////// */
		.infoOne{
			animation: infoOne 1s ease forwards;
		}

		@keyframes infoOne{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 220%;
				margin-top: -252%;
				scale: 6;
			}
		}

		.infoOneBack{
			animation: infoOneBack 300ms ease forwards;
		}

		@keyframes infoOneBack{
			0%{
				left: 220%;
				margin-top: -252%;
				scale: 6;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / JAPAN ZOOM IN/OUT ////////// */
		.infoTwo{
			animation: infoTwo 1s ease forwards;
		}

		@keyframes infoTwo{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 224%;
				margin-top: -178%;
				scale: 6;
			}
		}

		.infoTwoBack{
			animation: infoTwoBack 300ms ease forwards;
		}

		@keyframes infoTwoBack{
			0%{
				left: 224%;
				margin-top: -178%;
				scale: 6;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / BRANCH ZOOM IN/OUT ////////// */
		.infoThree{
			animation: infoThree 1s ease forwards;
		}

		@keyframes infoThree{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 55%;
				margin-top: -40%;
				scale: 4;
			}
		}

		.infoThreeBack{
			animation: infoThreeBack 300ms ease forwards;
		}

		@keyframes infoThreeBack{
			0%{
				left: 55%;
				margin-top: -40%;
				scale: 4;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / RUCOAST ZOOM IN/OUT ////////// */
		.infoFour{
			animation: infoFour 1s ease forwards;
		}

		@keyframes infoFour{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: 45%;
				right: 18%;
				scale: 6;
			}
		}

		.infoFourBack{
			animation: infoFourBack 300ms ease forwards;
		}

		@keyframes infoFourBack{
			0%{
				margin-top: 45%;
				right: 18%;
				scale: 6;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

	/* / BERING ZOOM IN/OUT ////////// */
		.infoFive{
			animation: infoFive 1s ease forwards;
		}

		@keyframes infoFive{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: 90%;
				right: 110%;
				scale: 6;
			}
		}

		.infoFiveBack{
			animation: infoFiveBack 300ms ease forwards;
		}

		@keyframes infoFiveBack{
			0%{
				margin-top: 90%;
				right: 110%;
				scale: 6;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

	/* / ALEUT ZOOM IN/OUT ////////// */
		.infoSix{
			animation: infoSix 1s ease forwards;
		}

		@keyframes infoSix{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: -5%;
				right: 130%;
				scale: 6;
			}
		}

		.infoSixBack{
			animation: infoSixBack 300ms ease forwards;
		}

		@keyframes infoSixBack{
			0%{
				margin-top: -5%;
				right: 130%;
				scale: 6;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container{
		width:93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
	}

	#mapStart{
		margin-bottom: 20%;
	}

	h1{
		font-size: 10vw;
	}

	h1:nth-of-type(1){
		margin-left: 8.611111111111111%;
		padding-top: 16.666666666666667%;
	}

	h1:nth-of-type(2){
		margin-bottom: 0.5rem;
		margin-left: 17.222222222222222%;
	}

	p{
		font-size: 2vw;
		line-height: 2.75vw;
	}

	.subhead{
		margin-left: 25.833333333333333%;
		margin-right: 34.444444444444444%;
	}

	.map{
		padding-top: 86.805555555555556%;
	}

	.pin{
		height: 10%;
		width: 4.5%;
	}

	.philippines{
		left: 7.5%;
		top: 78.5%;
	}

	.japan{
		left: 12%;
		top: 70%;
	}

	.branch{
		left: 35%;
		top: 42%;
	}

	.ruCoast{
		left: 52%;
		top: 22%;
	}

	.bering{
		left: 65%;
		top: 16%;
	}

	.aleut{
		left: 68%;
		top: 34%;
	}

	.overlay{
		top: 3.333333333333333%;
	}

	.overlay .container{
		padding-top: 3.333333333333333%;
	}

	.infoImg{
		background-color: #E8F9F9;
		border-radius: 7vw 0 7vw 0;
		box-shadow: 0 0.5vw 1vw 0.5vw rgba(0, 0, 0, 0.25);
		padding-top: 41.388888888888889%;
		margin-bottom: 3.333333333333333%;
		width: 82.777777777777778%;
	}

	#overlayOne .infoImg{
		background-image: url(../images/tablet/overlay1_t.jpg);
	}

	#overlayTwo .infoImg{
		background-image: url(../images/tablet/overlay2_t.jpg);
	}

	#overlayThree .infoImg{
		background-image: url(../images/tablet/overlay3_t.jpg);
	}

	#overlayFour .infoImg{
		background-image: url(../images/tablet/overlay4_t.jpg);
	}

	#overlayFive .infoImg{
		background-image: url(../images/tablet/overlay5_t.jpg);
	}

	#overlaySix .infoImg{
		background-image: url(../images/tablet/overlay6_t.jpg);
	}

	.exitWrap{
		margin-left: 95%;
		padding-bottom: 3.333333333333333%;
		width: 3.333333333333333%;
	}

	.overlay h2{
		font-size: 3.5vw;
		letter-spacing: 8%;
		margin-left: 17.222222222222222%;
	}

	.overlay .infoImg{
		margin-left: 8.611111111111111%;
	}

	.overlay p:nth-of-type(1){
		margin-left: 25.833333333333333%;
		margin-right: 25.833333333333333%;
	}

	.overlay p:nth-of-type(2){
		margin-bottom: 15%;
		margin-left: 34.444444444444444%;
		margin-right: 17.222222222222222%;
	}

	.overlay h2, .overlay p{
		margin-bottom: 1rem;
		text-shadow: 0.5vw 0.5vw 1vw #000000;
	}

	/* / PHILIPPINES ZOOM IN/OUT ////////// */
		.infoOne{
			animation: infoOne 1s ease forwards;
		}

		@keyframes infoOne{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 92%;
				margin-top: -138%;
				scale: 3;
			}
		}

		.infoOneBack{
			animation: infoOneBack 300ms ease forwards;
		}

		@keyframes infoOneBack{
			0%{
				left: 92%;
				margin-top: -138%;
				scale: 3;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / JAPAN ZOOM IN/OUT ////////// */
		.infoTwo{
			animation: infoTwo 1s ease forwards;
		}

		@keyframes infoTwo{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 125%;
				margin-top: -134%;
				scale: 4;
			}
		}

		.infoTwoBack{
			animation: infoTwoBack 300ms ease forwards;
		}

		@keyframes infoTwoBack{
			0%{
				left: 125%;
				margin-top: -134%;
				scale: 4;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / BRANCH ZOOM IN/OUT ////////// */
		.infoThree{
			animation: infoThree 1s ease forwards;
		}

		@keyframes infoThree{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 40%;
				margin-top: -24%;
				scale: 3.5;
			}
		}

		.infoThreeBack{
			animation: infoThreeBack 300ms ease forwards;
		}

		@keyframes infoThreeBack{
			0%{
				left: 40%;
				margin-top: -24%;
				scale: 3.5;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / RUCOAST ZOOM IN/OUT ////////// */
		.infoFour{
			animation: infoFour 1s ease forwards;
		}

		@keyframes infoFour{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: 45%;
				right: 18%;
				scale: 6;
			}
		}

		.infoFourBack{
			animation: infoFourBack 300ms ease forwards;
		}

		@keyframes infoFourBack{
			0%{
				margin-top: 45%;
				right: 18%;
				scale: 6;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

	/* / BERING ZOOM IN/OUT ////////// */
		.infoFive{
			animation: infoFive 1s ease forwards;
		}

		@keyframes infoFive{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: 90%;
				right: 110%;
				scale: 6;
			}
		}

		.infoFiveBack{
			animation: infoFiveBack 300ms ease forwards;
		}

		@keyframes infoFiveBack{
			0%{
				margin-top: 90%;
				right: 110%;
				scale: 6;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

	/* / ALEUT ZOOM IN/OUT ////////// */
		.infoSix{
			animation: infoSix 1s ease forwards;
		}

		@keyframes infoSix{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: -5%;
				right: 130%;
				scale: 6;
			}
		}

		.infoSixBack{
			animation: infoSixBack 300ms ease forwards;
		}

		@keyframes infoSixBack{
			0%{
				margin-top: -5%;
				right: 130%;
				scale: 6;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){
	.container{
		/*width:978px;*/
		width:95.5%;
	}

	#mapStart{
		margin-bottom: 15.337423312883436%;
	}

	h1{
		font-size: 7.5vw;
	}

	h1:nth-of-type(1){
		margin-left: 17.177914110429448%;
		padding-top: 12.269938650306748%;
	}

	h1:nth-of-type(2){
		margin-bottom: 1rem;
		margin-left: 25.766871165644172%;
	}

	p{
		font-size: 1.75vw;
		line-height: 2.5vw;
	}

	.overlay p{
		font-size: 1.5vw;
		line-height: 2.25vw;
	}

	.subhead{
		margin-left: 34.355828220858896%;
		margin-right: 28.629856850715746%;
	}

	.map{
		padding-top: 81.79959100204499%;
	}

	.pin{
		height: 7%;
		transition: 300ms;
		width: 3%;
	}

	.pin:hover{
		filter: drop-shadow(1px 1px 3px #042033);
		transition: 350ms;
	}

	.philippines{
		left: 10.5%;
		top: 81.5%;
	}

	.japan{
		left: 14%;
		top: 74%;
	}

	.branch{
		left: 37%;
		top: 45%;
	}

	.ruCoast{
		left: 53%;
		top: 25%;
	}

	.bering{
		left: 65%;
		top: 16%;
	}

	.aleut{
		left: 67%;
		top: 37%;
	}

	.overlay{
		top: 3.067484662576687%;
	}

	.overlay .container{
		padding-top: 3.067484662576687%;
	}

	.exitWrap{
		margin-left: 97%;
		padding-bottom: 3.067484662576687%;
		transition: 300ms;
		width: 2%;
	}

	.exitSVGOne:hover, .exitSVGTwo:hover, .exitSVGThree:hover, .exitSVGFour:hover, .exitSVGFive:hover, .exitSVGSix:hover{
		transform: rotate(90deg);
		transition: 350ms;
	}

	h2{
		font-size: 2.5vw;
		letter-spacing: 8%;
	}

	.infoImg{
		background-color: #E8F9F9;
		border-radius: 8vw 0 8vw 0;
		box-shadow: 0 1vw 1vw 0.5vw rgba(0, 0, 0, 0.25);
		padding-top: 41.411042944785276%;
		margin-bottom: 3.067484662576687%;
		width: 82.822085889570552%;
	}

	#overlayOne .infoImg{
		background-image: url(../images/desktop/overlay1_d.jpg);
	}

	#overlayTwo .infoImg{
		background-image: url(../images/desktop/overlay2_d.jpg);
	}

	#overlayThree .infoImg{
		background-image: url(../images/desktop/overlay3_d.jpg);
	}

	#overlayFour .infoImg{
		background-image: url(../images/desktop/overlay4_d.jpg);
	}

	#overlayFive .infoImg{
		background-image: url(../images/desktop/overlay5_d.jpg);
	}

	#overlaySix .infoImg{
		background-image: url(../images/desktop/overlay6_d.jpg);
	}

	.overlay h2, .overlay p{
		margin-bottom: 1rem;
		text-shadow: 0.5vw 0.5vw 1vw #000000;
	}

	.overlay .infoImg{
		margin-left: 8.588957055214724%;
	}

	.overlay h2{
		margin-left: 17.177914110429448%;
	}

	.overlay p:nth-of-type(1){
		margin-left: 25.766871165644172%;
		margin-right: 29.34560327198364%;
	}

	.overlay p:nth-of-type(2){
		margin-bottom: 10%;
		margin-left: 34.355828220858896%;
		margin-right: 21.370143149284254%;
	}


	/* / PHILIPPINES ZOOM IN/OUT ////////// */
		.infoOne{
			animation: infoOne 1s ease forwards;
		}

		@keyframes infoOne{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 62%;
				margin-top: -132%;
				scale: 2.5;
			}
		}

		.infoOneBack{
			animation: infoOneBack 300ms ease forwards;
		}

		@keyframes infoOneBack{
			0%{
				left: 62%;
				margin-top: -132%;
				scale: 2.5;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / JAPAN ZOOM IN/OUT ////////// */
		.infoTwo{
			animation: infoTwo 1s ease forwards;
		}

		@keyframes infoTwo{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 80%;
				margin-top: -110%;
				scale: 3;
			}
		}

		.infoTwoBack{
			animation: infoTwoBack 300ms ease forwards;
		}

		@keyframes infoTwoBack{
			0%{
				left: 80%;
				margin-top: -110%;
				scale: 3;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / BRANCH ZOOM IN/OUT ////////// */
		.infoThree{
			animation: infoThree 1s ease forwards;
		}

		@keyframes infoThree{
			0%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
			100%{
				left: 34%;
				margin-top: -28%;
				scale: 2.5;
			}
		}

		.infoThreeBack{
			animation: infoThreeBack 300ms ease forwards;
		}

		@keyframes infoThreeBack{
			0%{
				left: 34%;
				margin-top: -28%;
				scale: 2.5;
			}
			100%{
				left: 0%;
				margin-top: 0%;
				scale: 1;
			}
		}

	/* / RUCOAST ZOOM IN/OUT ////////// */
		.infoFour{
			animation: infoFour 1s ease forwards;
		}

		@keyframes infoFour{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: 19%;
				right: 4%;
				scale: 3.75;
			}
		}

		.infoFourBack{
			animation: infoFourBack 300ms ease forwards;
		}

		@keyframes infoFourBack{
			0%{
				margin-top: 19%;
				right: 4%;
				scale: 3.75;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

	/* / BERING ZOOM IN/OUT ////////// */
		.infoFive{
			animation: infoFive 1s ease forwards;
		}

		@keyframes infoFive{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: 45%;
				right: 89%;
				scale: 3.5;
			}
		}

		.infoFiveBack{
			animation: infoFiveBack 300ms ease forwards;
		}

		@keyframes infoFiveBack{
			0%{
				margin-top: 45%;
				right: 89%;
				scale: 3.5;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

	/* / ALEUT ZOOM IN/OUT ////////// */
		.infoSix{
			animation: infoSix 1s ease forwards;
		}

		@keyframes infoSix{
			0%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
			100%{
				margin-top: -20%;
				right: 30%;
				scale: 3;
			}
		}

		.infoSixBack{
			animation: infoSixBack 300ms ease forwards;
		}

		@keyframes infoSixBack{
			0%{
				margin-top: -20%;
				right: 30%;
				scale: 3;
			}
			100%{
				margin-top: 0%;
				right: 0%;
				scale: 1;
			}
		}

}