@CHARSET "ISO-8859-1";

.rosterTitle {
	grid-area: roster_title;
	display: grid;
	grid-template-columns: 35% 55% 10%;
	grid-template-rows: auto;
	grid-template-areas: "summary roster_title_info navigation";
	background-image: url("../../../img/background.png");
	background-size: 100%;
}

.rosterTitleInfo {
	grid-area: roster_title_info;
	padding-top: 20px;
	display: grid;
	grid-template-columns: 8% 84% 8%;
	grid-template-rows: 20px 60px 70px;
	grid-template-areas: "title_emblem title_nation title_source"
		"title_emblem title_formation title_source"
		"title_special_rules title_special_rules title_source";
	display: grid;
}

@media only screen and (max-device-width: 1024px) {
	.titleNation {
		grid-area: title_nation;
		text-align: center;
		justify-self: center;
		font-size: 120%;
		margin: auto;
		width: 100%;
	}
}

@media only screen and (min-device-width: 1024px) {
	.titleNation {
		grid-area: title_nation;
		text-align: center;
		justify-self: center;
		font-size: 120%;
		width: 100%;
	}
}

@
-webkit-keyframes example { 0% {
	color: #000000;
}

50%
{
color


:

 

#FFD700


;
}
100%
{
color


:

 

#000000


;
}
}
@
keyframes example { 0% {
	color: #000000;
}

50%
{
color


:

 

#FFD700


;
}
100%
{
color


:

 

#000000


;
}
}
@
keyframes shine { 0% {
	color: #000000;
}

50%
{
color


:

 

#FFD700


;
}
100%
{
color


:

 

#000000


;
}
from {
	-webkit-mask-position: 120%;
}

to {
	-webkit-mask-position: -30%;
}

}
.blinkTitle {
	-webkit-mask-image: linear-gradient(-65deg, #FFFFFF 40%, rgba(255, 215, 0, .3)
		50%, #FFFFFF 60% );
	-webkit-mask-size: 200%;
	-webkit-animation: shine 4s linear infinite;
	animation: shine 4s linear infinite;
}

@media only screen and (max-device-width: 1024px) {
	.titleFormation {
		grid-area: title_formation;
		text-align: center;
		font-size: 130%;
		font-style: italic;
		font-weight: bold;
		line-height: 80%;
		margin: auto;
		width: 100%;
		height: 100%;
		margin-top: 5px;
	}
}

@media only screen and (min-device-width: 1024px) {
	.titleFormation {
		grid-area: title_formation;
		text-align: center;
		font-size: 180%;
		font-style: italic;
		font-weight: bold;
		line-height: 80%;
		margin: auto;
		width: 100%;
		height: 100%;
		margin-top: 5px;
	}
}

.titleNationEmblem {
	grid-area: title_emblem;
}

.titleSource {
	grid-area: title_source;
	padding-right: 10px;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 20px 80px 20px;
	grid-template-areas: "source_rev" "source_pic" "source_text";
}

.titleNationLink {
	grid-area: source_pic;
	text-align: center;
	max-width: 60px;
}

.titleNationRev {
	grid-area: source_rev;
	text-align: center;
	font-size: 100%;
	font-style: italic;
	font-weight: bold;
}

.titleSourceText {
	grid-area: source_text;
	justify-self: center;
	text-align: center;
	font-size: 110%;
	font-style: italic;
}

.titleSpecialRules {
	grid-area: title_special_rules;
	justify-self: center;
	text-align: center;
	font-style: italic;
	font-size: 125%;
	width: 100%;
}

.titleSpecialRule.inactive_state_special_rule,
.titleSpecialRule.hidden_special_rule {
	display: none;
}

.titleSpecialRule.active_state_special_rule {
	display: inline-block;
	margin-right: 10px;
	border-bottom: 3px solid #986f123b;
}

.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;
}