* { margin: 0; padding: 0; }
html { overflow: auto }
html *, html *:before, html *:after { box-sizing: inherit; }
body {width: 100%;box-sizing: border-box;font-size: 16px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-tap-highlight-color: rgba(0,0,0,0);text-rendering: optimizeLegibility;color: #444;overflow: hidden;/*  height: 2650px; height: 700px;*/ background: #fff;}
h2 { font-family: 'Merriweather', serif; font-size: 1.7em; font-weight: 400; line-height: 1.2; color: #444; /*text-shadow: 1px 1px rgba(0, 0, 0, .4); */ }
h3 { font-family: 'Roboto', sans-serif; font-weight: 800; color: #444; }
h4 { font-family: 'Roboto', sans-serif; color: #2ab7b7; }
p, span, a { font-family: 'Roboto', sans-serif; font-weight: 400; }
.hidden { opacity: 0 !important; visibility: hidden !important; position: absolute; z-index: 0 }


.header .h-masthead {position: relative;width: 268px;height: 40px;vertical-align: middle;background-image: url(../logos/scmp-logo-new.png);background-size: 220px;background-position: 0 50%;background-repeat: no-repeat;overflow: hidden;z-index: 2;heig:;text-indent: -9999px;top: 0;display: none;}
.header .h-options { position: absolute; right: 0; height: 40px; z-index: 1; top:0; color: #001246; }
.header .h-options .h-share { display: none; float: right; width: 35px; font-size: 1.5em; text-align: center; line-height: 40px; cursor: pointer; transition: color .5s ease, background .3s ease; }
.header .h-options .h-share:hover { color: #4390FC; transition: color .2s ease, background .3s ease; }

.header .h-options .h-share-list { position: absolute; right: 0; padding: .5em .6em .2em .6em; background: #ffcb06; z-index: 1; transition: opacity .5s ease; top: 40px; opacity: 0; visibility: hidden; width: 150px; }
.header .h-options .h-share-list .h-share-title { margin-bottom: .2em; margin-right: .3em; font-weight: 600; text-align: right; }

.header .h-options .h-share-list .h-shares { position: relative; }
.header .h-options .h-share-list .h-shares:after { content: ''; display: table; clear: both; }
.header .h-options .h-share-list .h-share { color: #031D53; }
.header .h-options .h-share-list .h-share.facebook-button { font-size: 1.6em; }
.header .h-options .h-share-list .h-share.facebook-button:hover { color: #5197EF; }
.header .h-options .h-share-list .h-share.twitter-button { font-size: 1.4em; }
.header .h-options .h-share-list .h-share.twitter-button:hover { color: #7CD3FD; }
.header .h-options .h-share-list .h-share.whatsapp-button { font-size: 1.4em; }
.header .h-options .h-share-list .h-share.whatsapp-button:hover { color: #62DC88; }
.header .h-options .h-share-list .h-share.reddit-button:hover { color: #FF9A74; }
.header .h-options .h-share-list .h-share.pinterest-button { font-size: 1.4em; }
.header .h-options .h-share-list .h-share.pinterest-button:hover { color: #EC707E; }
.header .h-options .h-share-list .h-share.linkedin-button:hover { color: #6DC9F9; }

.header .h-options.h-options-active .h-share.menu-button { background: #FFCF00; }
.header .h-options.h-options-active .h-share.menu-button:before { content: '\f2d7'; }
.header .h-options.h-options-active .h-share-list { right: 0 !important; top: 40px !important; opacity: 1; visibility: visible; }
.scmp-d #h-whatsapp, .scmp-d #h-pinterest, .scmp-d #h-reddit { display: none }

.footer { display: none; position: absolute; bottom: 0; left: 20px; width: calc(100% - 40px); height: 30px; z-index: 1; }

.share-page { height: 100%; }
.share-page .container {height: 320px;}
.share-page .controls { top: 65px; }
.share-page .header { margin-top: 50px; z-index: 40;  }
.share-page .header .h-masthead { display: block; top: -50px; }
.share-page .header .h-options {top: 0;right: 10px;}
.share-page .header .h-buttons .h-button { color: #599399; background: none; transition: color .5s ease; }
.share-page .header .h-buttons .h-button.facebook-button { right: 35px; font-size: 1.4em; }
.share-page .header .h-buttons .h-button.twitter-button { font-size: 1.3em; top: 0 }
.share-page .header .h-buttons .h-button:hover { color: #DA8708; transition: color .2s ease; }
.share-page .main { top: 100px; height: 410px; }
.share-page .footer { display: block; top: 580px; bottom: auto; height: auto; padding: 10px 10px 20px 10px;border-top: 1px solid; max-width: 660px;width: 100%;left: calc(50% - 330px);}
.share-page .footer .f-menu { display: block; margin-bottom: 15px; }
.share-page .footer .f-menu li { display: inline-block; float: left; width: 20%; }
.share-page .footer .f-menu li a { font-size: .95em; font-family: 'Roboto', sans-serif; font-weight: 600; text-decoration: none; line-height: 20px; color: #8E8D8D; transition: color .5s ease; }
.share-page .footer .f-menu li a:hover { color: #6F5226; transition: color .2s ease; }
.share-page .footer .f-menu:after { content: ''; display: table; clear: both; }
.share-page .footer .f-disclaimer { display: block; font-size: .9em; font-family: 'Roboto', sans-serif; }

.share-page .matchs-wrapper {top: 100px;border-bottom: 0;}
.header {position: absolute;top: 0;left: 0;width: 100%;z-index: 30;height: 40px;/*border-bottom: 2px solid #001246;*/}
.header .h-title {position: absolute;top: 5px;left: 10px;padding: 0;font-family: 'Merriweather', serif;font-weight: 700;z-index: 0;line-height: 1.2;color: #000;}
.header .h-title p {font-size: 1.2em;font-family: 'Merriweather', serif;font-weight: 700;}
.header .h-title .remark { font-weight: 400; font-size: .85em; display: block;}
.header.header-range { background: none; }

.scmp-container{background: #fff; /*position: relative;  min-height: 700px; overflow: hidden; */margin: 0 auto;font-family: 'Roboto', sans-serif;background-size: 100%;max-width: 660px;width: 100%;/* border-bottom: 2px solid #001246; */}
.matchs-wrapper {position: absolute;top: 30px;left: 0;width: 100%; line-height:0.95;/* height: 220px; border-bottom: 2px solid #001246;*/}
.fixture {text-align: center;border: 1px solid #001246;margin: 20px auto;padding: 5px 0 10px 0;position: relative;min-height: 80px;max-width: 400px;width: 94%;}
.match-content {  }
.match-content.stage {margin-bottom: 5px;font-size: .9em;}
.match-content.stage .stage-1 {border-bottom: 1px solid #001246;padding-left: 4px;}
.match-content.stage .stage-2 {border-bottom: 1px solid #001246;padding-right: 4px;}
.match-content.hometeam {display: inline-block;width: calc( 50% - 20px);float: left;font-family: 'Roboto', sans-serif;font-weight: 700;font-size: 1.2em;line-height: 30px;}
.match-content.awayteam {display: inline-block;width: calc( 50% - 20px);float: right;font-family: 'Roboto', sans-serif;font-weight: 700;font-size: 1.2em;line-height: 30px;}
.match-content.ko {position: absolute;bottom: 5px;text-align: center;left: 0;width: 100%;font-size: .85em;}
.match-content.kodate {  }
.match-content.kotime {  }
.match-flag-1 {position: absolute;top: 5px;left: 5px;border: 1px;border-style: solid;width: 35px;height: 26.5px;}
.match-flag-2 {position: absolute;top: 5px;right: 5px;border: 1px;border-style: solid;width: 35px;height: 26.5px;}
.match-live-score {text-align: center;position: absolute;width: 100%;top: 53px;left: 0;z-index: 0;}
.match-team1score {display: inline-block;font-family: 'Roboto', sans-serif;font-size: 2.5em;position: relative;bottom: 5px;right: 10px;}
.match-team2score {display: inline-block;font-family: 'Roboto', sans-serif;font-size: 2.5em;position: relative;bottom: 5px;left: 15px;}
.match-teamscore-middle {position: relative;text-align: center;display: inline-block;top: -23px;}
.total-0 .fixture {min-height: 150px; padding-top: 20px;}
.total-0 .match-content.hometeam, .total-0 .match-content.awayteam {padding-top: 20px;}
.total-1 .fixture {min-height: 90px;padding-top: 5px;}
.total-1 .match-content.hometeam, .total-1 .match-content.awayteam {padding-top: 0;}
.total-2 .fixture {min-height: 70px;padding-top: 0;margin: 10px auto;}
.total-2 .match-content.hometeam, .total-2 .match-content.awayteam {padding-top: 0;}
.fixture-3, .fixture-4, .fixture-5, .fixture-6 {opacity: 0;visibility: hidden;height: 0px;overflow: hidden;min-height: inherit !important;margin: 0 !important;padding: 0 !important;}
@keyframes blink{ 
 0% { opacity: 1 }
 50% { opacity: .5}
 100% { opacity: 1 }
}

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


@media screen and (max-width: 660px) { 
	.share-page .footer { left: 0 }
}
@media screen and (max-width: 590px) { 
	
}
@media screen and (max-width: 560px) { 

}

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

}

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


}
@media screen and (max-width: 420px) { 
 	.match { margin: 20px 10px }
}
@media screen and (max-width: 360px) { 
	.match-content.hometeam { font-size: 1em }
	.match-content.awayteam { font-size: 1em }
	
}
@media screen and (max-width: 320px) { 
	.header .h-title p{ font-size: 1em;;  }
	.header .h-title { top:10px; }

}
@media screen and (max-width: 290px) { 
  body { font-size: 15px; letter-spacing: -0.01em  }
  span, p  { letter-spacing: -0.01em   }
}