html { font-size:16px }
body,h1,h2,h3,h4 { margin:0; font-family:'Sarabun',sans-serif; font-weight:400; font-size:1em }
strong { font-weight:500 } img { border:0; display:block }
a:link,a:visited { text-decoration:none; color:Crimson }
a:hover,a:active { text-decoration:underline; color:Crimson }
* { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box }
::selection { background:Crimson; color:White } .cont { margin:0 auto; display:block } .cont.gap { margin:0 auto 25px } .cont.gaps { margin:0 auto 10px }
.fw5 { font-weight:500 } .fw6 { font-weight:600 } .f-i { font-style:italic } .fen { font-family:'Prompt',sans-serif }
@media screen and (max-width:727px) { body { font-size:0.875em } .cont { width:100% } }
@media screen and (min-width:728px) { body { font-size:1em } .cont { width:728px } }

.top-bg1 { background-color:SlateGray } .top-bg2 { background-color:#101010 }
.title { margin:5px; padding:14px; background-color:#101010; color:White; text-decoration:none; display:block }
.title-a a:link,.title-a a:visited { margin:5px; padding:14px; background-color:#101010; color:White; text-decoration:none; display:block }
.title-md,.title-ad { margin:5px; padding:14px 0; background-color:#101010; color:White; text-decoration:none; display:block; text-align:center }
.title-md-a a:link,.title-md-a a:visited { margin:5px; padding:14px 0; background-color:#101010; color:White; text-decoration:none; display:block; text-align:center }
.title-a a:hover,.title-a a:active,.title-md-a a:hover,.title-md-a a:active { background-color:SlateGray }
@media screen and (min-width:728px) { .title,.title-a a:link,.title-a a:visited,.title-ad { margin:5px 0 } .title-md,.title-md-a a:link,.title-md-a a:visited { margin:5px 0; padding:14px; text-align:left } }

/* ----- */

.menu-top { list-style-type:none; margin:0; padding:0; background-color:SlateGray; overflow:hidden }
.menu-top li { float:left }
.menu-top li a { display:block; color:White; text-align:center; padding:15px 14px 13px; text-decoration:none }
.menu-top li a:hover:not(.active) { background-color:FireBrick }
.menu-top li a.active { background-color:FireBrick }
.menu-top li.right { float:right }

/* ----- */

.menu-main { overflow:hidden; background-color:#101010 }
.menu-main a { float:left; display:block; color:White; text-align:center; padding:14px; text-decoration:none; transition:0.3s }
.menu-main a:hover:not(.active) { background-color:FireBrick }
.menu-main a.active { background-color:FireBrick }
.menu-main .icon { display:none }

@media screen and (max-width:727px) {
.menu-main { background-color:FireBrick }
.menu-main a:not(.active) { background-color:#101010 }
.menu-main a:not(:first-child) { display:none }
.menu-main a.icon { float:right; display:block } }

@media screen and (max-width:727px) {
.menu-main.rps { position:relative }
.menu-main.rps .icon { position:absolute; right:0; top:0 }
.menu-main.rps a { float:none; display:block; text-align:left } }

/* ----- */

.menu-comp { margin:5px 0; overflow:hidden; background-color:#101010; color:White; position:relative }
.menu-comp #menuComp { display:none }
.menu-comp h1 { padding:14px; text-decoration:none; display:block }
.menu-comp a { padding:14px; text-decoration:none; display:block; background-color:SlateGray; color:White }
.menu-comp a.icon { display:block; position:absolute; right:0; top:0 }
.menu-comp a:hover { background-color:LightSlateGray }
.menu-comp .active { background-color:#101010 }
.menu-comp .activeSel { background:LightSlateGray; padding:14px 10px; border-left:4px solid Crimson }

/* ----- */

.menu-stats { margin:5px 0; overflow:hidden; background-color:SlateGray; position:relative }
.menu-stats #menuStats { display:none }
.menu-stats a { color:White; padding:14px; text-decoration:none; display:block }
.menu-stats a.icon { background:SlateGray; display:block; position:absolute; right:0; top:0 }
.menu-stats a:hover { background-color:Crimson; color:White }
.menu-stats .active { background-color:Crimson; color:White }

/* ----- */

.menu-fix { position:-webkit-sticky; position:sticky; top:0; z-index:99 }
.menu-nav { margin:20px auto 0; text-align:center }
.menu-nav a { padding:12px 14px; background-color:LightCoral; border-radius:3px; color:White; display:inline-block; text-decoration:none; transition:0.3s; font-size:0.875rem }
.menu-nav a:hover { background-color:IndianRed }
@media (min-width:728px) { .menu-nav { text-align:left } .menu-nav a { padding:12px 16px } }

.menu-box { margin:6px auto; text-align:center }
.menu-box a { padding:6px 10px; background-color:White; border:1px dotted LightSlateGray; border-radius:3px; color:SlateGray; display:inline-block; text-decoration:none; transition:0.3s; font-size:0.8125rem }
.menu-box a:hover { background-color:LightSlateGray; color:White }
@media (min-width:728px) { .menu-box { text-align:left } .menu-box a { padding:6px 12px; font-size:0.875rem } }

.menu-bottom-space { margin-bottom:52px }
#menu-bottom { background-color:Brown; position:fixed; bottom:-42px; width:100%; text-align:center; z-index:999 }
#menu-bottom a { display:inline-block; color:White; padding:12px 14px; text-decoration:none; transition:0.3s; font-size:0.875rem }
#menu-bottom a:hover { background-color:IndianRed }

/* ----- */

.ball-scroll::-webkit-scrollbar { display:none }
.ball-scroll { margin:20px 5px; font-size:0.8125rem; color:SlateGray; background-color:White; overflow:auto; white-space:nowrap; scrollbar-width:none }
.ball-scroll a { display:inline-block; color:White; text-align:center; margin-right:4px; padding:6px 12px; text-decoration:none; border-radius:3px; transition:0.3s }
.ball-scroll a.eng { background-color:#660066; border:1px solid #660066 } .ball-scroll a.eng:hover { color:#660066 }
.ball-scroll a.ger { background-color:#C80A00; border:1px solid #C80A00 } .ball-scroll a.ger:hover { color:#C80A00 }
.ball-scroll a.ita { background-color:#2047E3; border:1px solid #2047E3 } .ball-scroll a.ita:hover { color:#2047E3 }
.ball-scroll a.esp { background-color:#FF4B44; border:1px solid #FF4B44 } .ball-scroll a.esp:hover { color:#FF4B44 }
.ball-scroll a.fra { background-color:#CDFB0A; border:1px solid #CDFB0A; color:#000000 } .ball-scroll a.fra:hover { color:#091C3E }
.ball-scroll a.uefa { background-color:#0B0B0B; border:1px solid #0B0B0B } .ball-scroll a.uefa:hover { color:#0B0B0B }
.ball-scroll a.fifa { background-color:#0E87FF; border:1px solid #0E87FF } .ball-scroll a.fifa:hover { color:#0E87FF }
.ball-scroll a:hover { background-color:White }
@media (min-width:728px) { .ball-scroll { margin:20px auto; font-size:0.875rem } .ball-scroll a { padding:8px 14px } }

/* ----- */

hr.ad { width:75%; border:0; height:1px; margin:10px auto; background:linear-gradient(to right, White, Silver, White);
background:-webkit-linear-gradient(to right, White, Silver, White); background:-moz-linear-gradient(to right, White, Silver, White); background:-ms-linear-gradient(to right, White, Silver, White) }

.ads-top { width:100%; margin:10px auto; text-align:center }
.ads-cont { width:100%; margin:20px auto; text-align:center } .ads-cont.v2 { margin:20px auto 10px }
.ads-day { width:100%; margin:30px auto; text-align:center }
.ads-bottom { width:100%; margin:30px auto 0; text-align:center }
.ads-home { width:100%; margin:30px auto; text-align:center } .ads-home.prog { margin:20px auto }

.ads-xs { width:320px; height:50px } .ads-sm { width:320px; height:100px } .ads-lg { width:300px; height:250px }
@media (min-width:500px) { .ads-xs,.ads-sm,.ads-lg { width:468px; height:60px } }
@media (min-width:728px) { .ads-xs,.ads-sm,.ads-lg { width:728px; height:90px } }

/* ----- */

.ad-top img { width:100%; margin:10px auto; max-width:728px; height:auto }
.ad-cont img { width:100%; margin:20px auto; max-width:728px; height:auto } .ad-cont2 img { width:100%; margin:10px auto 15px; max-width:728px; height:auto }
.ad-day img { width:100%; margin:30px auto 0; max-width:728px; height:auto }
.ad-bottom img { width:100%; margin:30px auto 0; max-width:728px; height:auto }

.ad-blank a { background-color:#FFC0CB; color:Black; text-align:center; text-decoration:none; display:block; transition:0.3s; margin:5px auto }
.ad-blank a:hover,.ad-blank a:active { background-color:LightCoral; color:White }
@media screen and (max-width:727px) { .ad-blank a { padding:25px } }
@media screen and (min-width:728px) { .ad-blank a { padding:35px } }

.ad-menu { background-color:LightCoral; width:100%; text-align:center }
.ad-menu a { padding:12px 8px 10px; font-size:0.75rem; color:White; display:inline-block; text-decoration:none; transition:0.3s }
.ad-menu a:hover { background-color:IndianRed }
@media (min-width:375px) { .ad-menu a { font-size:0.8125rem } }
@media (min-width:728px) { .ad-menu { text-align:left } .ad-menu a { padding:12px 10px; font-size:0.9375em } }

.ad-menu-text { margin:0 5px 10px; text-align:center }
.ad-menu-text ul { list-style-type:none; margin:0; padding:0; overflow:hidden }
.ad-menu-text li { display:inline-block; margin:4px auto 0; font-size:0.75rem }
.ad-menu-text li a { display:inline-block; background-color:LightCoral; color:White; padding:8px 12px; border-radius:3px; text-align:center; text-decoration:none; transition:0.3s }
.ad-menu-text li a:hover { background-color:IndianRed }
@media (min-width:375px) { .ad-menu-text li { font-size:0.8125rem } }
@media (min-width:728px) { .ad-menu-text { margin:0 auto 10px; background-color:LightCoral } .ad-menu-text li { margin:0 auto; font-size:0.9375em } .ad-menu-text li a { padding:12px 7px; border:none } }

.ad-chklive { margin:10px 5px }
.ad-chklive ul { list-style-type:none; margin:0; padding:0; overflow:hidden }
.ad-chklive li { float:none; border-bottom:1px dashed Silver } .ad-chklive li:last-child { border-bottom:none }
.ad-chklive li a { display:block; padding:10px; color:Crimson; border-left:4px solid LightCoral; text-decoration:none }
.ad-chklive li a:hover { background-color:LavenderBlush; text-decoration:none }
.ad-chklive li a.other { border-color:DarkGoldenRod; color:DarkGoldenRod }
@media (min-width:728px) { .ad-chklive { margin:10px auto } .ad-chklive li a { font-size:0.9375em } }

.ad-text-1 { margin:20px 5px 0; padding:6px 10px 10px; border-left:4px solid #966919 }
.ad-text-1 a:link,.ad-text-1 a:visited { color:#966919; text-decoration:none; border-bottom:1px dashed } .ad-text-1 a:hover,.ad-text-1 a:active { border-bottom:none }
.ad-text-1-c { margin:10px 5px 0; padding:6px 10px 10px; border-left:4px solid #966919 }
.ad-text-1-c a:link,.ad-text-1-c a:visited { color:#966919; text-decoration:none; border-bottom:1px dashed } .ad-text-1-c a:hover,.ad-text-1-c a:active { border-bottom:none }

.ad-text-2 { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #FC6700 }
.ad-text-2 a:link,.ad-text-2 a:visited { color:#FC6700; text-decoration:none; border-bottom:1px dashed } .ad-text-2 a:hover,.ad-text-2 a:active { border-bottom:none }
.ad-text-2-c { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #FC6700 }
.ad-text-2-c a:link,.ad-text-2-c a:visited { color:#FC6700; text-decoration:none; border-bottom:1px dashed } .ad-text-2-c a:hover,.ad-text-2-c a:active { border-bottom:none }

.ad-text-3 { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #0000FF }
.ad-text-3 a:link,.ad-text-3 a:visited { color:#0000FF; text-decoration:none; border-bottom:1px dashed } .ad-text-3 a:hover,.ad-text-3 a:active { border-bottom:none }
.ad-text-3-c { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #0000FF }
.ad-text-3-c a:link,.ad-text-3-c a:visited { color:#0000FF; text-decoration:none; border-bottom:1px dashed } .ad-text-3-c a:hover,.ad-text-3-c a:active { border-bottom:none }

.ad-text-4 { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #ff3300 }
.ad-text-4 a:link,.ad-text-4 a:visited { color:#ff3300; text-decoration:none; border-bottom:1px dashed } .ad-text-4 a:hover,.ad-text-4 a:active { border-bottom:none }
.ad-text-4-c { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #ff3300 }
.ad-text-4-c a:link,.ad-text-4-c a:visited { color:#ff3300; text-decoration:none; border-bottom:1px dashed } .ad-text-4-c a:hover,.ad-text-4-c a:active { border-bottom:none }

.ad-text-5 { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #000000 }
.ad-text-5 a:link,.ad-text-5 a:visited { color:#000000; text-decoration:none; border-bottom:1px dashed } .ad-text-5 a:hover,.ad-text-5 a:active { border-bottom:none }
.ad-text-5-c { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #000000 }
.ad-text-5-c a:link,.ad-text-5-c a:visited { color:#000000; text-decoration:none; border-bottom:1px dashed } .ad-text-5-c a:hover,.ad-text-5-c a:active { border-bottom:none }

.ad-text-6 { margin:2px 5px 0; padding:6px 10px 10px; border-left:4px solid #000000 }
.ad-text-6 a:link,.ad-text-6 a:visited { color:#000000; text-decoration:none; border-bottom:1px dashed } .ad-text-6 a:hover,.ad-text-6 a:active { border-bottom:none }
.ad-text-6-c { margin:2px 5px 10px; padding:6px 10px 10px; border-left:4px solid #000000 }
.ad-text-6-c a:link,.ad-text-6-c a:visited { color:#000000; text-decoration:none; border-bottom:1px dashed } .ad-text-6-c a:hover,.ad-text-6-c a:active { border-bottom:none }

@media (min-width:728px) {
.ad-text-1 { margin:20px 0 0; font-size:0.9375rem } .ad-text-1-c { margin:10px 0 0; font-size:0.9375rem }
.ad-text-2 { margin:2px 0 0; font-size:0.9375rem } .ad-text-2-c { margin:2px 0 0; font-size:0.9375rem }
.ad-text-3 { margin:2px 0 0; font-size:0.9375rem } .ad-text-3-c { margin:2px 0 0; font-size:0.9375rem }
.ad-text-4 { margin:2px 0 0; font-size:0.9375rem } .ad-text-4-c { margin:2px 0 0; font-size:0.9375rem }
.ad-text-5 { margin:2px 0 0; font-size:0.9375rem } .ad-text-5-c { margin:2px 0 0; font-size:0.9375rem }
.ad-text-6 { margin:2px 0 10px; font-size:0.9375rem } .ad-text-6-c { margin:2px 0 10px; font-size:0.9375rem } }

.ad-col { overflow:hidden }
.ad-col1,.ad-col2 { width:50%; float:left }
.ad-col1 img { width:90%; margin:20px 2.5px 0 auto }
.ad-col2 img { width:90%; margin:20px auto 0 2.5px }
.ad-col::after { content:""; clear:both; display:table }
@media screen and (min-width:728px) {
.ad-col1 img { width:100%; max-width:300px; height:auto; margin:20px 10px 0 auto }
.ad-col2 img { width:100%; max-width:300px; height:auto; margin:20px auto 0 10px } }

.ad-fix-space { margin-bottom:70px }
.ad-fix { position:fixed; bottom:0; margin:0; padding:0; width:100% }
.ads-size { width:320px; height:50px }
.fix-ads { margin:0 auto; width:100%; text-align:center }
.fix-ad img { margin:0 auto; width:320px; height:50px }
@media (min-width:500px) { .ad-fix-space { margin-bottom:80px } .ads-size { width:468px; height:60px } .fix-ad img { width:468px; height:60px } }
@media (min-width:728px) { .ad-fix-space { margin-bottom:110px } .ads-size { width:728px; height:90px } .fix-ad img { width:728px; height:90px } }

/* ----- */

.page-info h2 { margin:0 5px 5px; padding:5px 8px; border-left:4px solid #1B1212; color:#1B1212; font-weight:500; line-height:2 }
@media (min-width:728px) { .page-info h2 { margin:0 0 5px; padding:5px 10px } }
.page-intro p { margin:0 5px; padding:8px; border-left:4px solid SlateGray; color:#343434; font-size:0.8125rem; line-height:2 }
@media (min-width:728px) { .page-intro p { margin:0; font-size:0.9375rem } }
.page-info p { margin:5px 5px 0; padding:5px 8px; border-left:4px solid SlateGray; color:#343434; font-size:0.8125rem; line-height:2 }
@media (min-width:728px) { .page-info p { margin:5px 0 0; padding:5px 10px; font-size:0.9375rem } }

.comp-info { margin:5px 5px 10px; padding:8px 10px; background-color:#FFFAF0; border:1px solid #c8c8c8; border-radius:5px; font-size:0.8125rem; text-align:center; line-height:2; opacity:1; transition:opacity 0.3s }
.comp-x { margin-left:10px; color:DarkGray; float:right; font-size:2.5em; line-height:0.5; cursor:pointer; transition:0.3s } .comp-x:hover { color:Black }
@media (min-width:728px) { .comp-info { padding:8px 14px; margin:5px 0 10px; font-size:0.9375em; text-align:left } }

/* ----- */

.note-desc h2 { margin:0 5px; padding:8px 10px; border-left:4px solid #28282B; color:#28282B; font-weight:500 } .note-desc.main h2 { line-height:2 }
.note-desc2 { margin:0; padding-top:15px; text-align:center; color:#28282B }
.note-stats { margin:5px; padding:8px 10px; border-left:4px solid DarkGray; color:#343434 }
.note-up { margin:5px 5px 0; padding:8px 10px; border-left:4px solid LightCoral; color:Brown }
.note-up-h { margin:5px; padding:8px 10px; border-left:4px solid LightCoral; color:Brown }
.note-cups { margin:5px 5px 0; padding:8px 10px; border-left:4px solid Silver; line-height:2 }
.note-ot { color:FireBrick }
@media screen and (max-width:727px) { .note-desc h2,.note-desc2 { font-size:0.8125rem } .note-desc h2 { padding:8px } }
@media screen and (min-width:728px) { .note-desc h2 { margin:0 } .note-desc2 { margin:0; padding:8px 10px; text-align:left; border-left:4px solid DarkGray } .note-stats,.note-up-h { margin:5px 0 } .note-up,.note-cups { margin:5px 0 0 } }

/* ----- */

.more { margin:5px 5px 0 }
.more a:link,.more a:visited { padding:10px 14px; background-color:LightCoral; border-radius:3px; color:White; text-decoration:none; display:inline-block; transition:0.3s }
.more a:hover,.more a:active { background-color:IndianRed }
@media screen and (min-width:728px) { .more { margin:5px 0 0 } }

.more-center { margin:5px 5px 0; text-align:center }
.more-center a:link,.more-center a:visited { padding:10px 14px; background-color:LightCoral; border-radius:3px; color:White; text-decoration:none; display:inline-block; transition:0.3s }
.more-center a:hover,.more-center a:active { background-color:IndianRed }
@media screen and (min-width:728px) { .more-center { margin:5px 0 0; text-align:left } }

/* ----- */

.bottom { width:100%; margin:30px auto 0; text-align:center }
.bottom p { margin:0; padding:25px 0; line-height:2; border-top:1px dotted Silver; background-color:White }
.mail { font-family:'Prompt',sans-serif; font-size:1.25rem; color:FireBrick }
.copy { font-family:'Prompt',sans-serif; font-size:1rem; opacity:0.6 }
.myweb { font-family:'Prompt',sans-serif; font-size:1rem }
.gap-b { margin:0 5px; display:inline-block; line-height:0; color:DimGray }
.gap-l { margin:0 5px; display:inline-block; line-height:0; color:LightPink }
.gap-w { margin:0 5px; display:inline-block; line-height:0; color:White }
.gap-comp { margin:0 5px; display:inline-block; line-height:0; color:White }
.gap-rd { margin:0 5px; display:inline-block; line-height:0 }
.gap-left { margin-left:5px; display:inline-block; line-height:0 }
.gap-right { margin-right:5px; display:inline-block; line-height:0 }
.gap-space { margin:0 4px; display:inline-block; line-height:0 }
.pick-left { margin-left:5px; display:inline-block; line-height:0; color:#D00000 }
.pick-right { margin-right:5px; display:inline-block; line-height:0; color:#D00000 }

.foot { margin:0 auto 20px; text-align:center }
hr.support { width:75%; position:relative; border:0; margin:0 auto; font-family:'Prompt',sans-serif; opacity:0.7 }
hr.support:before { position:absolute; content:""; background-color:Silver; left:0; top:50%; width:100%; height:1px }
hr.support:after { position:relative; content:attr(data-content); display:inline-block; color:SlateGray; padding:0 10px; background-color:White }
.support-info { font-family:'Prompt',sans-serif; color:SlateGray }
.support-info a:link,.support-info a:visited { color:SlateGray; text-decoration:none }
.support-info a:hover,.support-info a:active { color:Crimson; text-decoration:underline }
hr.power { width:50%; position:relative; border:0; margin:15px auto 0; font-family:'Prompt',sans-serif; opacity:0.7 }
hr.power:before { position:absolute; content:""; background-color:LightCoral; left:0; top:50%; width:100%; height:1px }
hr.power:after { position:relative; content:attr(data-content); display:inline-block; color:LightCoral; padding:0 10px; background-color:White }
.power-info { font-family:'Prompt',sans-serif; color:LightCoral; font-weight:500 }

/* ----- */

::-webkit-scrollbar { width:15px }
::-webkit-scrollbar-track { background:#DCDCDC }
::-webkit-scrollbar-thumb { background:Crimson }
::-webkit-scrollbar-thumb:hover { background:Crimson }