@media only screen and (min-device-width: 801px) {
	.rosterTitle {
		grid-area: roster_title;
		display: grid;
		grid-template-columns: 96px 354px auto 110px;
		grid-template-rows: auto;
		grid-template-areas: "summary_emblem summary roster_title_info navigation";
		background-image: url("../../../img/background.png");
		background-size: 100%;
		margin-right: 10px;
		position: fixed;
		width: 100%;
		top: 15vw;
		z-index: 500;
		border-bottom: 2px solid #986F12;
	}
}
@media only screen and (max-device-width: 800px) {
	.rosterTitle {
		grid-area: roster_title;
		display: grid;
		grid-template-columns: 96px 305px auto;
		grid-template-rows: auto auto;
		grid-template-areas: 
			"roster_title_info roster_title_info navigation"
			"summary_emblem summary summary";
		background-image: url("../../../img/background.png");
		background-size: 100%;
		margin-right: 10px;
		position: fixed;
		width: 100%;
		top: 15vw;
		z-index: 500;
		border-bottom: 2px solid #986F12;
	}
}

@media only screen and (min-device-width: 801px) {
	.summaryNationEmblem {
		grid-area: summary_emblem;
		width: 96px;
		height: 106px;
		background-image: url("../../../img/statistic-nation.png");
		background-repeat: no-repeat;
	}
	.titleNationPic{
		width: 70%;
		margin-top: 20px;
		margin-left: 18px;
	}
}
@media only screen and (max-device-width: 800px) {
	.summaryNationEmblem {
		grid-area: summary_emblem;
		width: 96px;
		height: 106px;
		background-image: url("../../../img/statistic-nation.png");
		background-repeat: no-repeat;
	}
	.titleNationPic{
		width: 70%;
		margin-top: 20px;
		margin-left: 18px;
	}
}

@media only screen and (min-device-width: 801px) {
	.rosterTitleInfo {
		grid-area: roster_title_info;
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 32px 14px 60px;
		grid-template-areas:
			"title_formation"
			"title_nation"
			"title_special_rules";
		max-width: 600px;
		background-image: url(../../../img/roster-name.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 100% 100%;
	}
}
@media only screen and (max-device-width: 800px) {
	.rosterTitleInfo {
		grid-area: roster_title_info;
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 30px 15px 60px;
		grid-template-areas: 
			"title_formation"
			"title_nation"
			"title_special_rules";
		padding-top: 5px;

		background-image: url("../../../img/roster-name-mobile.png");
		background-repeat: no-repeat;	
		background-position: left center;
		background-size: auto;
	}
}

@media only screen and (min-device-width: 801px) {
	.titleNation {
		grid-area: title_nation;
		color: #ffffff;
		text-align: right;
		margin-right: 1vw;
	}
}
@media only screen and (max-device-width: 800px) {
	.titleNation {
		grid-area: title_nation;
		color: #ffffff;
		font-size: 80%;
		text-align: right;
    	margin-right: 15px;
	}
}


@media only screen and (min-device-width: 801px) {
	.titleFormation {
		grid-area: title_formation;
		color: #ffffff;
		font-size: 150%;
		font-style: italic;
		font-weight: bold;
		line-height: 80%;
		width: 100%;
		height: 100%;
		margin-top: 10px;
		margin-left: 25px;
		/* text-transform: capitalize; */
	}
}
@media only screen and (max-device-width: 800px) {
	.titleFormation {
		grid-area: title_formation;
		color: #ffffff;
		font-size: 120%;
		font-style: italic;
		font-weight: bold;
		margin-top: 7px;
		margin-left: 12px;
		max-width: 95%;
		width: 100%;
		height: 100%;
		/* text-transform: capitalize; */
	}
}

@media only screen and (min-device-width: 801px) {
	.titleSource {
		grid-area: title_source;
		display: block;
		top: 15vw;
	}
}
@media only screen and (max-device-width: 800px) {
	.titleSource{
		display: none;
	}
}

@media only screen and (min-device-width: 801px) {
	.titleSpecialRules {
		grid-area: title_special_rules;
		justify-self: center;
		color: #ffffff;
		font-style: italic;
		font-size: 125%;
		width: 100%;
		padding-left: 10px;
	    line-height: 25px;
	}
}
@media only screen and (max-device-width: 800px) {
	.titleSpecialRules {
		grid-area: title_special_rules;
		color: #ffffff;
		font-style: italic;
		font-size: 90%;
		width: 100%;
		margin-left: 10px;
	}
}

@media only screen and (min-device-width: 801px) {
	.titleSpecialRule.active_state_special_rule {
		display: inline-block;
		margin-right: 10px;
		border-bottom: 3px solid #986f123b;
		cursor: help;
	}
	.titleSpecialRuleHeader{
		display: inline-block;
		margin-right: 20px;
		margin-left: 5px;
		width: 130px;
	}
}

@media only screen and (max-device-width: 800px) {
	.titleSpecialRule.active_state_special_rule {
		display: inline-block;
		margin-right: 5px;
		border-bottom: 3px solid #986f123b;
		cursor: help;
	}
	.titleSpecialRuleHeader{
		display: inline-block;
		width: 100px;
		height: 18px;
		margin-left: 5px;
	}
}

.titleSpecialRule:hover {
	color: #ffffff;
	background: #986F12;
	border-radius: 3px;
	border-bottom: 3px solid #986F12;
}

.titleSpecialRule.active_state_special_rule>nobr {
	margin-left: 10px;
	margin-right: 10px;
}