@font-face {
	font-family: 'TripperEmpty';
	src: url('/_css/_wf/TripperTricolorPro-Empty/TripperTricolorPro-Empty.eot?#iefix') format('embedded-opentype'),
		 url('/_css/_wf/TripperTricolorPro-Empty/TripperTricolorPro-Empty.woff') format('woff'),
		 url('/_css/_wf/TripperTricolorPro-Empty/TripperTricolorPro-Empty.ttf') format('truetype'),
		 url('/_css/_wf/TripperTricolorPro-Empty/TripperTricolorPro-Empty#TripperTricolorPro-Empty') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'TripperSolo';
	src: url('/_css/_wf/TripperTricolorPro-Solo/TripperTricolorPro-Solo.eot?#iefix') format('embedded-opentype'),
		 url('/_css/_wf/TripperTricolorPro-Solo/TripperTricolorPro-Solo.woff') format('woff'),
		 url('/_css/_wf/TripperTricolorPro-Solo/TripperTricolorPro-Solo.ttf') format('truetype'),
		 url('/_css/_wf/TripperTricolorPro-Solo/TripperTricolorPro-Solo#TripperTricolorPro-Solo') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Tripper1';
	src: url('/_css/_wf/TripperTricolorPro-Layer1/TripperTricolorPro-Layer1.eot?#iefix') format('embedded-opentype'),
		 url('/_css/_wf/TripperTricolorPro-Layer1/TripperTricolorPro-Layer1.woff') format('woff'),
		 url('/_css/_wf/TripperTricolorPro-Layer1/TripperTricolorPro-Layer1.ttf') format('truetype'),
		 url('/_css/_wf/TripperTricolorPro-Layer1/TripperTricolorPro-Layer1#TripperTricolorPro-Layer1') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Tripper2';
	src: url('/_css/_wf/TripperTricolorPro-Layer2/TripperTricolorPro-Layer2.eot?#iefix') format('embedded-opentype'),
		 url('/_css/_wf/TripperTricolorPro-Layer2/TripperTricolorPro-Layer2.woff') format('woff'),
		 url('/_css/_wf/TripperTricolorPro-Layer2/TripperTricolorPro-Layer2.ttf') format('truetype'),
		 url('/_css/_wf/TripperTricolorPro-Layer2/TripperTricolorPro-Layer2#TripperTricolorPro-Layer2') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Tripper3';
	src: url('/_css/_wf/TripperTricolorPro-Layer3/TripperTricolorPro-Layer3.eot?#iefix') format('embedded-opentype'),
		 url('/_css/_wf/TripperTricolorPro-Layer3/TripperTricolorPro-Layer3.woff') format('woff'),
		 url('/_css/_wf/TripperTricolorPro-Layer3/TripperTricolorPro-Layer3.ttf') format('truetype'),
		 url('/_css/_wf/TripperTricolorPro-Layer3/TripperTricolorPro-Layer3#TripperTricolorPro-Layer3') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'TripperStripe';
	src: url('/_css/_wf/TripperTricolorPro-Stripe/TripperTricolorPro-Stripe.eot?#iefix') format('embedded-opentype'),
		 url('/_css/_wf/TripperTricolorPro-Stripe/TripperTricolorPro-Stripe.woff') format('woff'),
		 url('/_css/_wf/TripperTricolorPro-Stripe/TripperTricolorPro-Stripe.ttf') format('truetype'),
		 url('/_css/_wf/TripperTricolorPro-Stripe/TripperTricolorPro-Stripe#TripperTricolorPro-Stripe') format('svg');
	font-weight: normal;
	font-style: normal;
}





@media only screen and (max-width: 480px) {
	#q_response, .quiz, .display-text{font-size: 0.3em; line-height:1;}
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
	#q_response, .quiz, .display-text{font-size: 0.5em; line-height:1;}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
	#q_response, .quiz, .display-text{font-size: 0.6em; line-height:1;}
}

@media only screen and (min-width: 992px){
	#q_response, .quiz, .display-text{font-size: 0.8em; line-height:1;}
}

@media only screen and (min-width: 1200px){
	#q_response, .quiz, .display-text{font-size: 0.9em; line-height:1;}
}

#writer, #animator, #quiz, #tripper_info{
	display:none;
}

#writer, #writer_writer, #animator, .exmple{
	clear:both;
	position:relative;
	margin:0;
	padding:0;
}


.TripperTricolorPro_edit{
	outline:none;
	 -webkit-appearance:none;
	 line-height:0.9em;
	 font-size:8em;
}


.TripperTricolorPro_quiz {
	line-height:0.9em;
	font-size:4em;
	margin:10 0px;
}

.TripperTricolorPro_quiz_response {
	font-family: TripperSolo;
	color:rgba (0,0,0);
	position: relative;
	line-height:0.9em;
	font-size:4em;
	margin:10 0px;
}


.TripperTricolorPro_quiz, .TripperTricolorPro_edit, .TripperTricolorPro, #TripperTricolorPro1{
	font-family: Tripper1;
	position: relative;
}


#TripperTricolorPro1, #TripperTricolorPro2, #TripperTricolorPro3, #TripperTricolorPro3b{
	position:absolute;
	top:0;
	left:0;	
	min-height:60px;
	display: block;
}

#TripperTricolorPro1{
	font-family: Tripper1;
}

#TripperTricolorPro2{
	font-family: Tripper2;
}

#TripperTricolorPro3, #TripperTricolorPro3b{
	font-family: Tripper3;
}

#TripperTricolorPro3{
	font-family: TripperEmpty;
}

.TripperTricolorPro_quiz:before, .TripperTricolorPro_edit:before, .TripperTricolorPro:before{
	font-family: Tripper2;
	content: attr(data-colortext);
	position:absolute;
	top:0;
	left:0;
	right:0;
}

.TripperTricolorPro_quiz:after, .TripperTricolorPro_edit:after, .TripperTricolorPro:after {
	font-family: Tripper3;
	content: attr(data-colortext);
	position:absolute;
	top:0;
	left:0;
	right:0;
}


.BRA{color:#009b3a}
.BRA:before{color:#fedf01}
.BRA:after{color:#002776}
.BRA2{color:#fedf01}
.BRA3{color:#002776}

.CRO{color:#d9141c}
.CRO:before{color:#ccc}
.CRO:after{color:#002987}
.CRO2{color:#ccc}
.CRO3{color:#002987}

.MEX{color:#169254}
.MEX:before{color:#ccc}
.MEX:after{color:#da151d}
.MEX2{color:#ccc}
.MEX3{color:#da151d}

.CMR{color:#179355}
.CMR:before{color:#db181a}
.CMR:after{color:#faea10}
.CMR2{color:#db181a}
.CMR3{color:#faea10}

.ESP{color:#c60a1d}
.ESP:before{color:#ffc400}
.ESP:after{color:#c60a1d}
.ESP2{color:#ffc400}
.ESP3{color:#c60a1d}

.NED{color:#cccccc}
.NED:before{color:#0099ff}
.NED:after{color:#ff0000}
.NED2{color:#0099ff}
.NED3{color:#ff0000}

.CHI{color:#ff0000}
.CHI:before{color:#cccccc}
.CHI:after{color:#000082}
.CHI2{color:#cccccc}
.CHI3{color:#000082}

.AUS{color:#000082}
.AUS:before{color:#bf0000}
.AUS:after{color:#000082}
.AUS2{color:#bf0000}
.AUS3{color:#000082}

.COL{color:#faea0e}
.COL:before{color:#012a8b}
.COL:after{color:#dc171f}
.COL2{color:#012a8b}
.COL3{color:#dc171f}

.GRE{color:#0f74a9}
.GRE:before{color:#ccc;font-family:TripperSolo !important;}
.GRE:after{color:#0f74a9;font-family:TripperStripe}
.GRE2{color:#ccc;font-family:TripperSolo !important;}
.GRE3{color:#0f74a9;font-family:TripperStripe !important;}

.CIV{color:#ec7d23}
.CIV:before{color:#ccc}
.CIV:after{color:#179354}
.CIV2{color:#ccc}
.CIV3{color:#179354}

.JPN{color:#ccc}
.JPN:before{color:#da000d}
.JPN:after{color:#ccc}
.JPN2{color:#da000d}
.JPN3{color:#ccc}

.URU{color:#ccc;font-family:TripperSolo !important;}
.URU:before{color:#1252a4;font-family:TripperStripe}
.URU:after{color:#f5e70b}
.URU2{color:#1252a4;font-family:TripperStripe !important;}
.URU3{color:#f5e70b}

.CRC{color:#db181f}
.CRC:before{color:#09197e}
.CRC:after{color:#ddd}
.CRC2{color:#09197e}
.CRC3{color:#ddd}

.ENG{color:#ccc;font-family:TripperSolo !important;}
.ENG:before{color:#be0c16;font-family:TripperStripe}
.ENG:after{color:#aaa}
.ENG2{color:#be0c16;font-family:TripperStripe !important;}
.ENG3{color:#aaa}

.ITA{color:#ce2b37}
.ITA:before{color:#009246}
.ITA:after{color:#eeeeee}
.ITA2{color:#009246}
.ITA3{color:#eeeeee}

.SUI{color:#ccc}
.SUI:before{color:#db171f}
.SUI:after{color:#ccc}
.SUI2{color:#db171f}
.SUI3{color:#ccc}

.ECU{color:#faea10}
.ECU:before{color:#3e246e}
.ECU:after{color:#db161c}
.ECU2{color:#3e246e}
.ECU3{color:#db161c}

.FRA{color:#ccc}
.FRA:before{color:#f00}
.FRA:after{color:#002776}
.FRA2{color:#f00}
.FRA3{color:#002776}

.HON{color:#084ca0}
.HON:before{color:#ccc}
.HON:after{color:#084ca0}
.HON2{color:#ccc}
.HON3{color:#084ca0}

.ARG{color:#3d9ec8}
.ARG:before{color:#ccc}
.ARG:after{color:#3d9ec8}
.ARG2{color:#ccc}
.ARG3{color:#3d9ec8}

.BIH{color:#000c72}
.BIH:before{color:#000c72}
.BIH:after{color:#f9da12}
.BIH2{color:#000c72}
.BIH3{color:#f9da12}

.IRN{color:#149353}
.IRN:before{color:#ccc}
.IRN:after{color:#dc181e}
.IRN2{color:#ccc}
.IRN3{color:#dc181e}

.NIG{color:#007934}
.NIG:before{color:#007934}
.NIG:after{color:#ccc}
.NIG2{color:#007934}
.NIG3{color:#ccc}

.GER{color:#000}
.GER:before{color:#F00}
.GER:after{color:#Fc0;}
.GER2{color:#F00}
.GER3{color:#fc0;
	background: -webkit-linear-gradient(#f40, #ff0);
  	-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}


  
  

.POR{color:#fc0d1b}
.POR:before{color:#0b650b}
.POR:after{color:#ecf035}
.POR2{color:#0b650b}
.POR3{color:#ecf035}

.GHA{color:#d9000d}
.GHA:before{color:#f9eb0c}
.GHA:after{color:#179355}
.GHA2{color:#f9eb0c}
.GHA3{color:#179355}

.USA{color:#ddd;font-family:TripperSolo !important;}
.USA:before{color:#e0262e; font-family:TripperStripe}
.USA:after{color:#393b7d; }
.USA2{color:#e0262e; font-family:TripperStripe !important;}
.USA3{color:#393b7d;}

.BEL{color:#000}
.BEL:before{color:#fbeb0f}
.BEL:after{color:#db171d}
.BEL2{color:#fbeb0f}
.BEL3{color:#db171d}

.ALG{color:#179253}
.ALG:before{color:#ccc}
.ALG:after{color:#179253}
.ALG2{color:#ccc}
.ALG3{color:#179253}

.RUS{color:#dc181f}
.RUS:before{color:#0554a5}
.RUS:after{color:#ccc}
.RUS2{color:#0554a5}
.RUS3{color:#ccc}

.KOR{color:#ccc}
.KOR:before{color:#e91512}
.KOR:after{color:#021a7b} 
.KOR2{color:#e91512}
.KOR3{color:#021a7b} 

.NON{color:#000}
.NON:before{color:#000}
.NON:after{color:#000} 
.NON2{color:#000}
.NON3{color:#000} 

.horizontal_stripes{
	background-image: url('/_media/_patterns/tripper_worldcup_stripe.jpg');
  	background-repeat: repeat
}


.horizontal_stripes_css{
	background: repeating-linear-gradient(
  	to right,
  	#a5a5a5,
  	#a5a5a5 25px,
  	#999 25px,
  	#999 50px);
}