* { margin: 0; padding: 0; }
html *, html *:before, html *:after { box-sizing: inherit; }
html {overflow:hidden;}

body {
	width: 100%;
	max-width:800px;
	height: 515px;
	position:relative;
	box-sizing: border-box;
	font-size: 16px;
	display:inline-block;
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overflow: hidden;
	color: #000;
}

h2 { font-family: 'Roboto', sans-serif; font-size: 1.7em; font-weight: 400; line-height: 1.2; color: #444;}
h3 { font-family: 'Roboto', sans-serif; font-weight: 600; color: #F4C175; }
h4 { font-family: 'Roboto', sans-serif; color: #2ab7b7; }

.hidden { display: none !important; }

.container {position: relative;display:inline-block;width: 100%;height: 515px;margin: 0 auto;padding: 0 5px;font-family: 'Roboto', sans-serif;overflow: hidden;}

.container-bottom {
	position:relative;
	height:445px;
}

.control {
	position:absolute;
	top:0;
	font-size: 40px;
	cursor:pointer;
	z-index: 100;
}

#prev-control {left:5px;}

#next-control {right:5px;}

.container-top {    
	width: 85%;
    height: 42px;
    overflow: hidden;
    margin: 0 7.5%; 
	position:relative;
	display:inline-block;
}
.scmp-m-ios .container-top { width: 83vw; }
.container-top-wrapper { height: 100%; }
/* .container-top-wrapper:after { content: ''; display: table; clear: both; } */

.days {
    display: inline-block;
    float: left;
    width: 82px;
    height: 32px;
    box-sizing: border-box;
    margin: 5px 2px;
    padding: 4px;
    border: 1px solid #fff;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    line-height: 18px;
    vertical-align: top;
    background: #fff;
    color: #000;
}

.match {display: inline-block;float: left;width: 82px;height: 36px;box-sizing: border-box;margin: 5px 25px;padding: 2px;font-size: .8em;line-height: 1.2;text-align: center;background: #fff;cursor: pointer;vertical-align: top;transition: background .5s ease, border-color .5s ease;}

.match:hover, .match:focus {
	cursor:pointer;border-bottom: 2px solid #999;transition:border-color 0s ease;
}

.match .home {display: inline-block;width: 32px;margin-top: 1px;text-indent: -999999px;vertical-align: top;     position: relative;   left: -6px;}

.match .away {    
	display: inline-block;
    position: relative;
    width: 32px;
    margin-top: 1px;
    text-indent: -99999px;
    vertical-align: top;
    left: 8px;
}

/* .match .lost { border-left: 2px solid #ff0000;} */
/* .match .won { border-left: 2px solid #008ba7; } */

/* .match.live { animation: blink-small 2s infinite; } */

.match.active {    
	border-bottom: 2px solid #999;
    color: #000;
    padding-bottom: 25px;
}

.match.match-women { background: #fff; }
.match.match-women:hover {  background: #fff; border-bottom:2px solid #df6700;} }
.match.match-women.active { background: #fff;  }
.match.match-qualifier {background: #fff;}
.match.match-qualifier:hover {background: #fff;  border-bottom:2px solid #0088af;}
.match.match-qualifier.active {background: #fff;}

.content { font-size: 1.2em; font-family: 'Roboto', sans-serif; }

.home-team {position: relative;top:24px;float: left;width: 48%;display: block;}
.away-team {position: relative;top:24px;float: right;width: 48% ;display: block;}

.labels {float: left;text-align: center;}
#live {position: relative;height: 215px;margin-top: 15px;color: #000;}
#live:after, #record:after, #season:after { content: ''; display: table; clear: both }
#live .name {display: table;position: relative;height: 50px;font-size: 30pt;font-weight: 700;}

#live .game {
    position: relative;
    top: 0;
    font-size: 18pt;
    text-align: center;
    line-height: 1.1;
    color: #c1272c;
    transition: color .5s ease;
    font-weight: 600;
}

#live .labels {
    padding-top: 8px;
    font-family: 'Roboto', sans-serif;
    position: absolute;
	text-align:center;
	width: 100%;
}

#live .name span { display: table-cell; font-family: 'Roboto', sans-serif; vertical-align: middle; line-height: 1; }
#live .lost { color: #000; font-weight:400; }


#live .won { color: #000; font-weight:700; }

/* #live .won .name span { color: #000; font-weight:900; } */





#live .away-team .name {float: left;padding-right: 2px;text-align: left;padding-top: 10px;}
#live .home-team .name {float: right;padding-right: 2px;text-align: right;padding-top: 10px;}

#live .away-team .score {position: absolute;top: 65px;left: 0;float: right;font-size: 80pt;letter-spacing: -0.05em; background: #ececec; 
min-width:65%;text-align:center;
/* padding: 5px 18%; */

}

#live .home-team .score {position: absolute;top: 65px;right: 0;float: left;font-size: 80pt;letter-spacing: -0.05em; background: #ececec; 
min-width:65%;
text-align:center;
/* padding: 5px 18%; */
}

#live .away-team .ranking{
	position: absolute;right: 100px;float: right;font-size: 12px;letter-spacing: -0.2px; font-style:italic; font-weight:300;
	color:#757170;display:none;
}

#live .home-team .ranking{
		position: absolute;left: 100px;float: left;font-size: 12px;letter-spacing: -0.2px; font-style:italic; font-weight:300;
		color:#757170;
		display:none;
}

#live .score { font-size: 1.6em; }
#live .live-label.hidden { display: inline-block !important; opacity: 0; visibility: hidden; }
#live .live-label {display: inline-block;width: 5px;height: 5px;margin: 8px 5px 3px -3px;border-radius: 50%;background: #ff3b3b;animation: blink 2s infinite;opacity: 1;visibility: visible;padding:3px; display:none;}
#live .status { font-size: .9em; text-transform: capitalize; }

#live .status.ended {
	display: inline-block;
	height: 17px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: middle;
	display:none;
}

#live .status.live {
	display: inline-block;
	height: 17px;
	margin: 0 auto;
	font-size: .7em;
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: middle;
	color: #ff3b3b;
	display:none;
	overflow: hidden;
}

#live .date {text-transform: uppercase;font-weight: 700;}

#record {
	position: relative;
	top:35px;
	box-sizing: border-box;
	padding: 0;
	color: #000;
	height: 0;
	transition: color .5s ease, border-color .5s ease;
	margin: 10px 2% 0 2%;
}

#record .labels {width: 50%;height: 65px;padding-top: 010px;font-size: .9em;line-height: 23px;background: #fff;transition: background .5s ease;color: #000;position: absolute;left: 25%;}

#record .home-team, #record .away-team {width: 25%;padding-top: 9px;text-align: center;}
#record .remark {position: absolute;font-family: 'Roboto', sans-serif;top: -8px;left: calc(50% - 100px);width: 200px;height: 20px;font-size: .9em;text-align: center;line-height: 20px;color: #fff;background: #003067;transition: background .5s ease;}
#record .remark .match-count{ font-family: 'Roboto', sans-serif; }

#season {    
	height: 120px;
    color: #444;
    position: relative;
    top: 62px;
}

#season .labels {width: 60%;padding-top: 5px;font-size: .8em;line-height: 1;position: absolute;left: 20%;}
#season .labels > div { text-align: center; line-height: 1.9;     border-bottom: 1px dotted #ccc;}
#season .home-team { width: 25%; text-align: center; position: absolute; left: 0; top: 0 }
#season .away-team { width: 25%; text-align: center; position: absolute; right: 0; top: 0}
#season .labels div:first-child { border-bottom: 1px dotted #ccc; line-height: 1.2; padding-bottom: 5px; } 
#season .home-team div:first-child, #season .away-team div:first-child{min-height: 26px;}

.qualifier #live .game {color: #0088af;}
.qualifier #record {border-color: #00a8d7;color: #0091b9;}
.qualifier #record .labels {background: #00A8D7;}
.qualifier #record .remark {background: #0089af;}

.women #live .game { color: #df6700;}
.women #record { border-color: #D8C5CC; color: #df6700; }
.women #record .labels {background: #bc6484;}
.women #record .remark { background: #df6700; }
.women #season .away-team, .women #season .home-team{display: none;}

/* .qualifier #live .live-label, .women #live .live-label { position: absolute; top: -77px; left: calc(50% - 15px); } */
/* .qualifier #live .status.live, .women #live .status.live {position: absolute;top: -75px;left: calc(50% - 7px);} */
/* .qualifier #live .status.ended, .women #live .status.ended  {position: absolute;top: -75px;left: calc(50% - 12px);} */
.qualifier #live .time, .women #live .time { margin-top: 20px}

#avg_pts, #points, #tries_conversions {
    border-bottom: 1px solid #ccc;
    width: 100%;
    position: relative;
    line-height: 30px;
    display: inline-block;
    text-align: center;
}

 #winLossDraw {
	border-bottom: 1px solid #fff;
    width: 100%;
    position: relative;
    line-height: 30px;
    display: inline-block;
    text-align: center;
}

#avg_pts #away, #winLossDraw #away, #points #away, #tries_conversions #away   {
	text-align:right;
	right:0;
	position: absolute;
	font-weight:500;
	color:#000;
}

#avg_pts #home, #winLossDraw #home, #points #home, #tries_conversions #home {
    text-align: left;
    left: 0;
    position: absolute;
	font-weight:500;
	color:#000;
}

#record_center {
	text-align:center;
    font-weight: 400;
    font-style: italic;
}

#season h3 {
    text-align: center;
    color: #000;
    font-weight: 500;
    margin-bottom: 12px;
}

#last_updated {
	position:absolute;
	bottom:0;
	right:4px;
	font-size:13px;
	color:#757170;
}

#updating {
	position:absolute;
	bottom:0;
	left:4px;
	font-size:10px;
	color:#ff0000;
	opacity:0;
}

#updating span {
    position: relative;
    width: 3px;
    height: 3px;
    background: #ff0000;
    display: inline-block;
    border-radius: 50%;
    margin: 0 2px;
	animation-name: updateBlink;
	animation-duration: 1.4s;
    animation-iteration-count: infinite;
	animation-fill-mode: both;
}

#updating span:nth-child(2) {animation-delay: .2s;}
#updating span:nth-child(3) {animation-delay: .4s;}

@keyframes updateBlink {
    0% {opacity: .2;}
    20% {opacity: 1;}
    100% {opacity: .2;}	
}

@keyframes blink {
  0% { opacity: 1 }
  50% { opacity: .3 }
  100% { opacity: 1 }
}

@keyframes blink-small {
  0% {border-color: #999;}
  50% { border-color: #fff; }
  100% {border-color: #999;}
}

@keyframes blink2 {
  0% { opacity: .5 }
  50% { opacity: 1 }
  100% { opacity: .5 }
}

@media screen and (max-width: 600px) {
	
	#live .name { font-size: 26pt }  
	#live .away-team .score, #live .home-team .score {font-size: 65pt;}
	#season {top: 42px;}  
	
}
@media screen and (max-width: 480px) {
	
	#live .away-team .ranking {right:75px; top:5px;}
	#live .home-team .ranking {left:75px; top:5px;}
	#live .away-team .score,
	#live .home-team .score {min-width:80%;}

}
@media screen and (max-width: 440px) {

	.match { margin: 5px 18px;}
	#live .name {font-size: 24pt;}
	#record .labels { height: 55px; padding-top: 10px; font-size: .8em; line-height: 20px; }
	#record .home-team, #record .away-team {padding-top: 7px;}
	#record .remark {width: 180px;left: calc(50% - 90px);}
	#season .labels {width: 60%;padding-top: 2px;left: 20%;}
	#season .labels > div { margin-bottom: 4px; line-height: 1; }
	#season .home-team, #season .away-team { width: 20%; }
	#season .home-team div:first-child, #season .away-team div:first-child { line-height: 35px; }
	#season .label-place { display: block; }
	#live .away-team .ranking {right:50px;}
	#live .home-team .ranking {left:50px;}
	
}

@media screen and (max-width: 410px) {
	
	#live .name {font-size:24px;}
	#live .away-team .ranking {right:30px;}
	#live .home-team .ranking {left:30px;}
	
}

@media screen and (max-width: 360px) { 

  	#live .away-team .ranking {right:20px;}	
	#live .home-team .ranking {left:20px;}
	#live {margin-top:25px;height: 225px;}
	#live .name {font-size: 18pt;}
	#live .away-team .score, #live .home-team .score {font-size: 60pt;}
	#season {top: 0;}
	#live .game {font-size: 15pt;}
	#live .away-team .name,
	#live .home-team .name{padding-right:0;}
}


@media screen and (max-width: 340px) { 

	#live .name {font-size: 16pt;}
	#live .away-team .score,
	#live .home-team .score {top:52px;}
  	#live .home-team .ranking {right:10px;}
	#live .away-team .ranking {left:10px;}
}

@media screen and (max-width: 330px) { 

	.content { font-size: .9em }
	#record .labels { font-size: .75em; }
	#record .home-team, #record .away-team {padding-top: 10px;letter-spacing: -0.05em;width: 28%;}
	#season .labels { width: 60%;}
	#season .home-team, #season .away-team {width: 20%;}
	#record .remark { width: 160px; left: calc( 50% - 80px); }
	#record_center { font-size:14.5px;}
}

@media screen and (max-width: 320px) {

	#live .name {font-size: 14pt;}
	.scmp-m-ios .container-top { width: calc(100vw - 50px); }
	
}

@media screen and (max-width: 290px) { 

  body { font-size: 15px; letter-spacing: -0.01em }
  span, p { letter-spacing: -0.01em }
  
}