.europeMap {
	position: relative;
	text-align: left;
}

@media only screen and (min-device-width: 801px) {
	.map {
		width: 75.2vw;
		height: 47.25vw;
		border: solid 0.2vw rgb(120 84 2);;
	}
	.rosterSelector {
		grid-area: main;
		padding-top: 0.5vw;
		width: 22vw;
	}
}

@media only screen and (max-device-width: 800px) {
	.map {
		display: none;
	}
	.rosterSelector {
		grid-area: main;
		padding-top: 28vw;
		margin-bottom: 8vh;
	}
}

@media only screen and (min-device-width: 801px) {
	.nationEmblem {
		width: 3vw;
		height: 3vw;
		text-align: center;
		border-radius: 2vw;
		border: solid 0.2vw rgba(248, 246, 240);
		box-shadow: 0 0 0.5vw rgba(248, 246, 240);
		cursor: pointer;
		background-color: rgba(248, 246, 240, 0.6);
		background-position: -1vw -1vw;
	}
	.nationEmblemName{
		display: none;
		font-size: 0.9vw;
		color: rgba(248, 246, 240);
		width: 8vw;
		border-radius: 0.5vw;
		border: solid 0.2vw rgba(248, 246, 240);
		background-image: url(../../img/button-nation-hover.png);
		right: -2.95vw;
		position: absolute;
		margin-top: 0.3vw;
		padding-top: 0.2vw;
		padding-bottom: 0.2vw;
		padding-left: 0.4vw;
		padding-right: 0.4vw;
	}
	.nationEmblem:hover {
		background-image: url(../../img/button-nation-hover.png);
		border: solid 0.2vw rgba(248, 246, 240);
		box-shadow: 0 0 2.5vw rgba(248, 246, 240);
	}
	.nationGrid>.nationEmblemPic {
		width: 4.5vw;
		height: 4.5vw;
	}
	.nationEmblemPic {
		width: 3vw;
		height: 3vw;
	}
}

@media only screen and (max-device-width: 800px) {
	.nationEmblem {		
		text-align: center;
		background-color: rgba(248, 246, 240, 0.6);
		border-radius: 20vw;
		border: solid 1vw #986F12;
		box-shadow: 0 0 0.5vw #986f12;
		cursor: pointer;
		background-image: url(../../img/button-nation.png);
		background-position: -1vw -1vw;

		width: 25vw;
		height: 25vw;
		margin-top: 2.5vw;
		margin-right: 2.5vw;
		margin-left: 2.5vw;
		margin-bottom: 10vw;
	}
	.nationEmblemName{
		font-size: 2.7vw;
		font-weight: 800;
		margin-top: 1vh;
		color: rgb(245 224 132);
		border-radius: 2vw;
		border: solid 0.2vw rgba(223, 194, 64, 1);
		background-image: url(../../img/button-nation-hover.png);
		padding-top: 1vw;
		padding-bottom: 1vw;
		padding-left: 1vw;
		padding-right: 1vw;
	}
	.nationEmblem:hover {
		background-image: url(../../img/button-nation-hover.png);
		border: solid 1vw rgb(223, 194, 64);
		box-shadow: 0 0 2.5vw rgb(223, 194, 64);
	}
	.nationGrid>.nationEmblemPic {
		width: 11.5vw;
		height: 11.5vw;
	}
	.nationEmblemPic {
		width: 24vw;
		height: 24vw;
	}
	
}



@media only screen and (min-device-width: 801px) {
	#BRA {
		position: absolute;
		top: 19vw;
		left: 38vw;
	}
	#MOS {
		position: absolute;
		top: 14vw;
		left: 58vw;	
	}
	#TAT {
		position: absolute;
		top: 22vw;
    	left: 59vw;
	}
	#TUR {
		position: absolute;
		top: 34.5vw;
    	left: 53vw;
	}
	#KOZ {
		position: absolute;
		top: 21vw;
    	left: 51vw;
	}
	#DAN {
		position: absolute;
		top: 13vw;
		left: 33.5vw;	
	}
	#RON {
		position: absolute;
		top: 20vw;
    	left: 44vw;
	}
	#SIE {
		position: absolute;
		top: 27vw;
		left: 45.5vw;
	}
	#IMP {
		position: absolute;
		top: 26vw;
    	left: 37vw;
	}
	#SWE {
		position: absolute;
		top: 11vw;
   		left: 41vw;
	}
	#MIW {
		position: absolute;
		top: 27.5vw;
		left: 51vw;
	}
}
@media only screen and (max-device-width: 800px) {
	#BRA {
		float: left;
	}
	#MOS {
		float: left;
	}
	#TAT {
		float: left;
	}
	#GDA {
		float: left;
	}
	#TUR {
		float: left;
	}
	#KOZ {
		float: left;
	}
	#DAN {
		float: left;
	}
	#KUR {
		float: left;
	}
	#RON {
		float: left;
	}
	#SIE {
		float: left;
	}
	#IMP {
		float: left;
	}
	#SWE {
		float: left;
	}
	#MIW {
		float: left;
	}
}

.rosterListHidden {
	display: none;
}

@media only screen and (min-device-width: 801px) {
	.rosterList {
		display: grid;
		position: absolute;
		top: 2vw;
		left: 24vw;
		z-index: 10;
		grid-template-columns: 50vw;
		grid-template-rows: auto auto auto;
		grid-template-areas: "recon_list_top" "recon_list" "recon_list_bottom";
	}

	.rosterListTop {
		grid-area: recon_list_top;
		background-image: url("../../img/scrolltopbackground.png");
		background-repeat: no-repeat;
		background-size: 50vw;
		height: 7.9vw;
		width: 50vw;
	}
	
	.rosterListMiddle {
		grid-area: recon_list;
		background-image: url("../../img/scrollbackground.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.rosterListBottom {
		grid-area: recon_list_bottom;
		background-image: url("../../img/scrollbottombackground.png");
		background-repeat: no-repeat;
		height: 7.9vw;
		background-size: 50vw;
		cursor: pointer;
	}
	.listBottomClose {
		text-align: center;
		margin-top: 3vw;
		font-size: .7vw;
	}
	.nationPanel {
		display: none;
		margin-left: 2vw;
		margin-top: 2vw;
	}
	
}
@media only screen and (max-device-width: 800px) {
	.rosterList {
		display: grid;
		position: absolute;
		top: 2vw;
		left: 5vw;
		z-index: 10;
		grid-template-columns: 90vw;
		grid-template-rows: 14vw auto 14vw;
		grid-template-areas: "recon_list_top" "recon_list" "recon_list_bottom";
	}

	.rosterListTop {
		grid-area: recon_list_top;
		background-image: url("../../img/scrolltopbackground.png");
		background-repeat: no-repeat;
		background-size: 90vw;
		height: 15vw;
	}
	
	.rosterListMiddle {
		grid-area: recon_list;
		background-image: url("../../img/scrollbackground.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	
	.rosterListBottom {
		grid-area: recon_list_bottom;
		background-image: url("../../img/scrollbottombackground.png");
		background-repeat: no-repeat;
		background-size: 90vw;
	}
	.listBottomClose {
		text-align: center;
		margin-top: 3vw;
		font-size: 4vw;
	}

	.nationPanel {
		display: none;
		margin-left: 2vw;
		margin-top: 5vw;
	}	
}


@media only screen and (min-device-width: 801px) {
	.nationGrid {
		display: grid;
		grid-template-columns: 5vw 28vw 15vw;;
		grid-template-rows: 2.5vw 2.5vw 2.5vw auto;
		grid-template-areas: 
			"link link link" 
			"emblem nation none" 
			"emblem nation pages" 
			"armylist armylist armylist";
		border-left: 0px solid transparent;
	}
	.nationEmblemLink {
		grid-area: link;
		text-align: right;
		margin-right: 6vw;
		font-size: 0.8vw;
	}
	.nationEmblemLink > a{
		padding: 0.2vw;
		color: #0094FF;
		text-decoration: none;
		cursor: pointer;
		border: 2px solid transparent;
    	border-radius: 6px;
	}
	.nationEmblemLink > a:hover{
		background: #986F12;
		color: #F8F6F0;
		border: 2px solid #986F12;
	}
	.nationName {
		grid-area: nation;
		justify-self: left;
		align-self: center;
		margin-left: 1vw;
		font-size: 1.5vw;
		font-weight: 700;
		font-style: italic;
	}
	.nationPages {
		grid-area: pages;
		margin-right: 1vw;
		margin-left: 0vw;
	}
	.nationPage {
		display: inline;
		width: 2vw;
		padding-left: 1vw;
		padding-right: 1vw;
		align-self: center;
		font-size: 1.1vw;
		font-weight: 700;
		cursor: pointer;
	}
	.nationArmiesMap{
		grid-area: armylist;
	}
	.armyMap {
		display: grid;
		grid-template-columns: auto 4vw 2vw 2vw 2vw 2vw 2vw;
		grid-template-rows: 1.8vw;
		grid-template-areas:
			"armyname revision emblem1 emblem2 emblem3 emblem4 emblem5";
		font-size: 0.9vw;
	}
	.armylinkMap {
		grid-area: armyname;
		justify-self: left;
		align-self: center;
		padding-right: .4vw;
		padding-left: .6vw;
		padding-top: .4vw;
		padding-bottom: .4vw;
		width: 30vw;
		cursor: pointer;
		/* text-transform: capitalize; */
	}
	.armylinkMapInactive {
		grid-area: armyname;
		justify-self: left;
		align-self: center;
		padding-right: .4vw;
		padding-left: .6vw;
		padding-top: .4vw;
		padding-bottom: .4vw;
		width: 30vw;
		opacity: .5;
	}
	.emblempicMap {
		max-width: 1.5vw;
		max-height: 1.5vw;
	}
}
@media only screen and (max-device-width: 800px) {
	.nationGrid {
		display: grid;
		grid-template-columns: 10vw 60vw 15vw;
		grid-template-rows: 5vw 10vw auto;
		grid-template-areas: 
			"link link link" 
			"emblem nation pages" 
			"armylist armylist armylist";
		border-left: 0px solid transparent;
	}
	.nationEmblemLink {
		grid-area: link;
	}
	.nationEmblemLink > a{
		font-size: 3vw;
		margin-left: 3vw;
		color: #0094FF;
		text-decoration: none;
		cursor: pointer;
	}
	.nationName {
		grid-area: nation;
		justify-self: left;
		align-self: center;
		margin-left: 1vw;
		font-size: 5vw;
		font-weight: 700;
		font-style: italic;
	}
	.nationPages {
		grid-area: pages;
	}
	.nationPage {
		display: inline;
		width: 2vw;
		padding-left: 1vw;
		padding-right: 1vw;
		align-self: center;
		font-size: 3vw;
		font-weight: 800;
	}
	.armyMap {
		display: grid;
		grid-template-columns: auto 4vw 5vw 4vw 4vw 4vw 4vw;
		grid-template-rows: 12vw;
		grid-template-areas:
			"armyname revision emblem1 emblem2 emblem3 emblem4 emblem5";
		font-size: 4.5vw;
	}
	.armylinkMap {
		grid-area: armyname;
		justify-self: left;
		align-self: center;
		width: 70vw;
		margin-left: -6vw;
		transform: scaleX(.7);
		cursor: pointer;
	}
	.armylinkMapInactive {
		grid-area: armyname;
		justify-self: left;
		align-self: center;
		width: 70vw;
		margin-left: -6vw;
		transform: scaleX(.7);
		opacity: .5;
	}
	.emblempicMap {
		max-width: 5vw;
		max-height: 5vw;
		margin-top: 3vw;
	}
	.revisionMap {
		font-size: 2vw;
	}
}

.emblem {
	grid-area: emblem;
}

.nationPageActive {
	border-bottom: 0.3vw solid #986F12;
}

.nationArmiesMap {
	grid-area: armylist;
}


.armyMapPage1 {
	
}

.armyMapPage2 {
	display: none;
}

.armyMapPage3 {
	display: none;
}

.armylinkMap:hover {
	color: #ffffff;
	background: #986F12;
	border-radius: 0.5vw;
}

.revisionMap {
	grid-area: revision;
	justify-self: center;
	align-self: center;
}

.emblemsmallMap1 {
	grid-area: emblem1;
}

.emblemsmallMap2 {
	grid-area: emblem2;
}

.emblemsmallMap3 {
	grid-area: emblem3;
}

.emblemsmallMap4 {
	grid-area: emblem4;
}

.emblemsmallMap5 {
	grid-area: emblem5;
}