body
{ margin: 0; padding: 50px 0 0 0; font-family: 'Roboto', Arial, Sans-serif; text-align: center; }
p, h1, h2, h3, ul
{ margin: 0; padding: 0; text-align: left; }
body
{ color: #333333; background: #FFFFFF; }
a
{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
div.clear-left
{ clear: left; height: 0; font-size: 0; line-height: 0; }
div.clear-both
{ clear: both; height: 0; font-size: 0; line-height: 0; }
.mob, .showthis
{ display: none !important; }
.notvisible
{ visibility: hidden !important; }
abbr
{ text-decoration: none; cursor: help; }
div.half
{ float: left; width: 50%; overflow: hidden; }

/* colours */
.colour-fe
{ color: #3B3B3B !important; }
.colour-fh
{ color: #F9F9F9 !important; }
.colour-k6
{ color: #1243A6 !important; }
.colour-k7
{ color: #154DBF !important; }
.colour-kn
{ color: #272F4D !important; }
.colour-lu
{ color: #4E1199 !important; }
.colour-pt
{ color: #EA1920 !important; }
.colour-pl
{ color: #B81424 !important; }
.colour-sb
{ color: #FAE034 !important; }
.colour-za
{ color: #A4F97F !important; }
.colour-zn
{ color: #119960 !important; }
.colour-zs
{ color: #0B6648 !important; }

/* top bar */
div#top-bar
{ position: fixed; top: 0; left: 0; width: 100%; height: 50px; color: inherit; background: #222222; z-index: 98; }
div#top-bar img.logo
{ float: left; width: 186px; height: 50px; }
div#top-bar div
{ float: left; width: 186px; margin-right: 14px; height: 50px; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 50px; color: #FFFFFF; background: #222222; text-align: center; }
div#top-bar div a
{ display: block; color: #FFFFFF; text-decoration: none; }
div#top-bar div a:hover
{ background: #003FAF; }
div#top-bar div#toggle-menu
{ width: 20px; }

/* menu */
div#menu-cont
{ clear: both; overflow: hidden; }
div#menu-cont div
{ padding: 0 10px 0 10px; overflow: hidden; }
div#menu-cont div.association-cont
{ margin: -10px -10px 0 -10px; padding: 10px 10px 30px 10px; color: inherit; background: linear-gradient(#FFFFFF,#FAFAFA); }
div#menu-cont div.association-cont a
{ display: inline-block; float: left; width: 200px; height: 34px; margin: 0 10px 10px 0; line-height: 34px; color: #333333; background: #FFFFFF; border: 1px solid #FAFAFA; text-decoration: none; text-align: left; }
div#menu-cont div.association-cont a:hover
{ border-color: #333333; }
div#menu-cont div.association-cont a img
{ float: left; margin: 6px 6px 0 6px; width: 20px; height: 20px; border: 1px solid #999999; }
div#menu-cont div.association-cont a span
{ margin: 0 6px 0 6px; color: #11BF2C; }
div.associations
{ clear: left; text-align: center; }
div.associations p
{ margin: 0 -10px 10px -10px; padding: 10px 10px 10px 10px; }
div.associations p img
{ float: left; margin: 0 6px 0 6px; width: 20px; height: 20px; border: 1px solid #000000; }
div.associations p.sub-assoc
{ clear: left; color: #333333; background: #EBEBEB; }
div.association-tournaments
{ padding: 0; }
div.association-tournaments a
{ float: left; padding: 0 10px 0 10px; }

/* breadcrumbs */
div#breadcrumbs
{ margin-top: 20px; margin-bottom: 10px; text-align: left; }
div#breadcrumbs a
{ font-size: 14px; color: #666666; text-decoration: none; }
div#breadcrumbs a:hover
{ color: #AAAAAA; }
div#breadcrumbs span
{ margin: 0 7px 0 7px; color: #AAAAAA; }

/* menu */
div#toggle-menu
{ cursor: pointer; }
details > summary
{ list-style: none; }
details > summary::-webkit-details-marker
{ display: none; }
nav
{  }
nav#mobilemenu details
{ display: none; }
nav ul
{ margin: 5px 0 0 0; padding: 0 0 0 20px; list-style-type: none; color: #FFFFFF; background: transparent; overflow: hidden; }
nav ul li
{ float: left; font-size: 14px; font-weight: bold; line-height: 40px; }
nav#mobilemenu ul li
{ float: none; display: block; }
nav ul li a
{ display: block; padding: 0 14px 0 14px; color: #FFFFFF; background: transparent; text-decoration: none; }
nav ul li a:hover
{ color: #2CD155; }

/* social icons */
div#top-bar div#social-icons
{ position: absolute; top: 0; right: 0; z-index: 99; }
div#top-bar div#social-icons img
{ float: right; width: 24px; height: 24px; margin: 12px 0 0 10px; object-fit: none; object-position: 0 0; }
div#top-bar div#social-icons img.facebook
{ object-position: -24px 0; }
div#top-bar div#social-icons img.pinterest
{ object-position: -48px 0; }
div#top-bar div#social-icons img.patreon
{ object-position: -72px 0; }

/* main header */
div#main-header
{ position: relative; }
div#main-header div.left
{ float: left; width: calc(100% - 450px); }
div#main-header div.left img
{ width: 33%; max-width: 300px; height: auto; }
div#main-header div.left img:first-child
{ float: left; margin-top: 40px; margin-left: 13%; margin-bottom: 20px; }
div#main-header div.left img:last-child
{ float: right; margin-top: 40px; margin-right: 13%; margin-bottom: 20px; }
div#main-header div#brand-new
{ clear: both; margin: 10px 40px 0 40px; padding-bottom: 1px; background: rgba(34,34,34, 0.8); }
div#main-header div#brand-new p.green-label
{ display: inline-block; margin: -10px 20px 10px 20px; padding: 10px; font-weight: bold; color: #FFFFFF; background: #2CD155; }
div#main-header div#brand-new h2
{ margin: 0 20px 20px 20px; color: #FFFFFF; background: transparent; }
div#main-header div#brand-new h2 a
{ color: #FFFFFF; background: transparent; text-decoration: none; }
div#main-header div#brand-new p.desc
{ margin: -10px 20px 20px 20px; font-size: 16px; line-height: 24px; color: #FFFFFF; background: transparent; }
div#main-header div#brand-new p.desc a
{ color: #2CD155; background: transparent; text-decoration: underline; }
div#main-header div#brand-new p.desc a:hover
{ color: #FFFFFF; }
div#main-header div.right
{ float: right; width: 449px; border-left: 1px solid #2CD155; }
div#main-header div.right h3
{ padding: 10px; font-size: 22px; font-weight: normal; line-height: 28px; color: #FFFFFF; background: #2CD155; text-align: center; text-transform: uppercase; }
div#main-header div.right div
{ float: left; width: 50%; padding: 10px 0 10px 0; overflow: hidden; }
div#main-header div.right img
{ width: 100%; height: auto; }
div#main-header div.right p
{ margin: 10px; font-size: 14px; line-height: 20px; }
div#main-header div.right div.button
{ float: none; margin: 10px auto 20px auto; padding: 0; width: 140px; text-align: center; }
div#main-header div.right div.button a
{ display: block; padding: 10px 20px 10px 20px; color: #222222; background: transparent; text-decoration: none; border: 1px solid #222222; }
div#main-header div.right div.button a:hover
{ color: #FFFFFF; background: #2CD155; border-color: #2CD155; }

/* story */
div#main-header div.story
{ float: left; width: calc(100% - 450px); }
div#main-header div.story img#main
{ width: calc(100% - 80px); max-width: 821px; height: auto; margin: 40px 0 -4px 40px; }
div#main-header div.story div#brand-new
{ margin: 0 40px 20px 40px; padding-bottom: 1px; background: rgba(34,34,34, 0.8); position: relative; overflow: visible; }
div#main-header div.story div#brand-new p.green-label
{ position: absolute; top: -10px; left: 20px; margin: 0 20px 10px 0; padding: 5px 10px 5px 10px; font-weight: bold; color: #FFFFFF; background: #2CD155; }
div#main-header div.story div#brand-new h2
{ padding-top: 40px; }
div#main-header div.story h3
{ display: inline-block; margin: 20px 40px 10px 40px; padding: 10px 20px 10px 10px; font-size: 20px; color: #FFFFFF; background: #2CD155; }
div#main-header div.story p
{ margin: 0 40px 15px 40px; line-height: 27px; }
div#main-header div.story div
{ overflow: hidden; }
div#main-header div.story div img
{ width: 33%; max-width: 300px; height: auto; }
div#main-header div.story div img:first-child
{ float: left; margin-top: 40px; margin-left: 13%; margin-bottom: 20px; }
div#main-header div.story div img:last-child
{ float: right; margin-top: 40px; margin-right: 13%; margin-bottom: 20px; }

/* basic */
div.main-cont, div#header-cont
{ margin: 0 auto 0 auto; padding: 0 20px 40px 20px; max-width: 1600px; text-align: left; }
div.game-cont
{ text-align: center; }
div#header-cont
{ padding-bottom: 20px; color: #333333; background: #FFFFFF;  }
div.fixed-width
{ max-width: 1200px; margin: 0 auto 0 auto; overflow: hidden; }
div#header-cont p
{ font-weight: 300; }
p.header
{ margin: 30px 0 10px 0; padding: 0; font-size: 26px; line-height: 32px; }

/* jersey side */
h1#main
{ margin-top: 40px; margin-left: -20px; margin-bottom: 20px; padding: 5px 0 5px 20px; font-size: 24px; font-weight: normal; line-height: 36px; text-transform: uppercase; }
h1#main img.flag
{ float: left; margin: 5px 10px 0 0; border: 2px solid #DDDDDD; }
h1#game-header img.flag
{ margin: 5px 5px 0 0; border: 2px solid transparent; vertical-align: top; }
h1#main img.weather, h1#game-header img.weather
{ margin: 0 10px 0 10px; height: 36px; vertical-align: top; }
h1#main span, h1#game-header span
{ margin-left: 5px; font-weight: 300; text-transform: none; }
p.main
{ margin: 20px 0 20px 0; padding: 0; font-size: 18px; line-height: 24px; background: transparent; }
ul.main
{ margin: 20px 0 20px 20px; padding: 0; font-size: 18px; line-height: 24px; background: transparent; }
ul.tabs
{ list-style-type: none; overflow: hidden; }
ul.tabs li
{ float: left; margin: 20px 10px 0 0; padding: 0 10px 0 10px; line-height: 30px; color: inherit; background: #EEEEEE; display: inline-block; cursor: pointer; }
ul.tabs li span
{ margin-right: 5px; }
ul.tabs li.current
{ color: #FFFFFF; background: #222222; }
ul.tabs li.check-link
{ padding: 0; background: #FAFAFA; border: 0; }
ul.tabs li.check-link a
{ display: block; padding: 0 10px 0 10px; color: #333333; text-decoration: none; }

/* jersey boxes */
div.tab-content
{ display: none; overflow: hidden; }
div.tab-content.current
{ display: inherit; }
div.single-box,
div.double-box
{ float: left; margin: 40px 0 0 0; color: inherit; background: #FFFFFF; text-align: center; position: relative; }
div.double-box div.inner
{ margin: 20px auto 20px auto; overflow: hidden; }
div.double-box div.inner img, div.double-box div.inner p
{ float: right; width: 170px; display: inline; }
div.double-box div.inner img
{ height: 211px; /* filter: drop-shadow(0 0 2px #CCCCCC); */ }
div.double-box div.inner img:first-child, div.double-box div.inner p.first
{ float: left; }
div.double-box div.inner p
{ margin-top: 20px; }
div.single-box img
{ margin: 20px 0 0 14px; }
div.single-box p,
div.double-box p
{ font-size: 15px; line-height: 20px; color: #333333; background: transparent; text-align: center; }
div.single-box p.between
{ margin-top: 10px; font-size: 16px; line-height: 20px; }
div.single-box h2, div.double-box h2, div.box-cont h2
{ font-size: 20px; font-weight: 400; line-height: 34px; color: #333333; background: transparent; border-bottom: 1px solid #CCCCCC; text-align: center; text-transform: uppercase; }
div.single-box h3, div.double-box h3, div.box-cont h3
{ margin: 5px 0 15px 0; padding: 0; font-size: 16px; font-weight: normal; line-height: 20px; color: #333333; background: transparent; text-align: center; }
div.single-box span, div.double-box span
{ display: inline-block; width: 34px; line-height: 34px; color: #999999; border: 1px solid #CCCCCC; }
div.single-box span
{ margin-top: 6px; margin-left: 15px; }
div.large-box, div.game-box
{ color: inherit; background: #FFFFFF; text-align: center; position: relative; }
div.large-box div.inner
{ float: left; margin: 20px 0 20px 0; overflow: hidden; }
div.large-box div.inner div.inner-box
{ float: left; width: 50%; }
div.large-box div.inner div.inner-box img, div.large-box div.inner div.inner-box p
{ float: left; margin: 0 0 0 45px; width: 340px; display: inline; }
div.large-box div.inner img
{ height: 422px; }
div.large-box div.inner div.inner-box:first-child img, div.large-box div.inner div.inner-box p.first
{ float: right; margin: 0 45px 0 0; }
div.large-box p
{ font-size: 18px; line-height: 24px; color: #333333; background: transparent; text-align: center; }
div#large-jersey-info
{ float: right; width: 240px; margin-top: 20px; padding-left: 10px; border-right: 1px solid #CCCCCC; }
div#large-jersey-info h3
{ font-size: 17px; font-weight: normal; line-height: 20px; color: #777777; border-bottom: 1px solid #CCCCCC; }
div#large-jersey-info h3 span
{ display: inline-block; margin: 0 4px -1px -10px; width: 22px; height: 22px; font-size: 14px; font-weight: bold; line-height: 20px; color: #2CD155; text-align: center; border: 1px solid #2CD155; border-radius: 100px; }
div#large-jersey-info p
{ margin: 8px 0 20px 24px; line-height: 24px; text-align: left; }
div#large-jersey-info p.bar
{ margin-top: 0; font-family: Arial, Helvetica, Sans-serif; font-size: 40px; letter-spacing: -2px; line-height: 50px; color: #2CD155; }
div.jersey-story
{ clear: left; margin: 20px; padding-top: 30px; }
div.jersey-story p
{ margin-bottom: 10px; font-size: 16px; line-height: 1.4em; }
div.fixed-width p.full span
{ display: inline-block; width: 50px; height: 50px; margin: 30px auto 0 auto; font-size: 26px; line-height: 50px; color: #AAAAAA; text-align: center; border: 1px solid #CCCCCC; }

/* squad */
div.squad-cont
{ padding: 0 20px 0 20px; overflow: hidden; }
div.squad-info
{ margin: 40px auto 30px auto; padding: 40px 0 40px 0; max-width: 1600px; overflow: visible; position: relative; }
div.squad-header
{ margin-right: 50px; padding-left: 70px; font-size: 18px; font-weight: bold; line-height: 34px; color: #FFFFFF; background: #2CD155; text-align: left; overflow: visible; }
div.squad-info div.badge-cont
{ position: absolute; top: 25px; left: 0; width: 70px; height: 70px; z-index: 99; display: flex; align-items: center; justify-content: center; }
div.squad-info div.badge-cont img
{ max-height: 70px; max-width: 50px; }
ul.squad
{ margin-right: 50px; font-size: 16px; line-height: 30px; list-style-type: none; }
ul.squad:last-of-type li
{ border-bottom: 5px solid #2CD155; }
ul.squad li
{ float: left; color: #222222; background: #F9F9F9; border-bottom: 1px solid #EEEEEE; }
ul.squad li span
{ color: #999999; }
ul.squad li.player_num
{ clear: both; width: 30px; height: 30px; padding-right: 8px; font-weight: bold; text-align: right; border-left: 1px solid #EEEEEE; }
ul.squad li.player_flag
{ width: 32px; text-align: left; }
ul.squad li.player_flag img
{ margin: 7px 2px 0px 4px; opacity: 0.9; vertical-align: top; width: 16px; }
ul.squad li.player_name
{ width: calc(100% - 177px); }
ul.squad li.player_age
{ float: right; width: 55px; text-align: center; border-right: 1px solid #EEEEEE; }
ul.squad li.player_pos
{ float: right; width: 50px; color: #2CD155; font-weight: bold; text-align: left; text-transform: uppercase; }
ul.squad li.top
{ padding-top: 5px; font-weight: normal; color: #CCCCCC; background: #444444; text-transform: none; }
ul.squad li.top
{ border-color: #444444; }
ul.squad li.player_num:nth-child(2)
{ padding-top: 10px; }
ul.squad li.first
{ padding-top: 5px; }

/* tactical lineups */
div.field
{ position: relative; margin-top: 10% }
div.field img#pitch
{ width: 100%; }
div.field div.player
{ position: absolute; width: 12%; height: 20%; text-align: center; background: transparent url(images/player.svg) top left no-repeat; background-size: 100%; filter: drop-shadow(0 0 5px rgba(0,0,0,0.1)); }
div.field div.player.gk
{ background: none; background: transparent url(images/keeper.svg) top left no-repeat; background-size: 100%; }
div.field div.player p
{ font-weight: bold; color: #FFFFFF; text-align: center; }
div.field div.player p:first-child
{ margin-top: 17%; font-family: 'Poppins',Sans-serif;  font-size: 1.7vw; line-height: 2vw; color: #FFFFFF; }
div.field div.player p:last-child
{ margin-top: 13%; font-size: 0.9vw; line-height: 1.1vw;  }
div.field div.player.gk
{ bottom: 5%; left: 50%; transform: translate(-50%, 0); }
/* defence */
div.field div.player.rwb
{ bottom: 33%; right: 7%; }
div.field div.player.rcb
{ bottom: 30%; right: 26%; }
div.field div.player.rb
{ bottom: 28%; right: 29%; }
div.field div.player.cb
{ bottom: 26%; left: 50%; transform: translate(-50%, 0); }
div.field div.player.lb
{ bottom: 28%; left: 29%; }
div.field div.player.lcb
{ bottom: 30%; left: 26%; }
div.field div.player.lwb
{ bottom: 33%; left: 7%; }
/* midfield */
div.field div.player.cm
{ bottom: 55%; left: 50%; transform: translate(-50%, 0); }
div.field div.player.cdm
{ bottom: 46%; left: 50%; transform: translate(-50%, 0); }
div.field div.player.cam
{ bottom: 69%; left: 50%; transform: translate(-50%, 0); }
div.field div.player.rw
{ bottom: 61%; right: 11%; }
div.field div.player.rm
{ bottom: 57%; right: 26%; }
div.field div.player.ram
{ bottom: 74%; right: 17%; }
div.field div.player.rfm
{ bottom: 74%; right: 27%; }
div.field div.player.rdm
{ bottom: 51%; right: 28%; }
div.field div.player.rcm
{ bottom: 57%; right: 32%; }
div.field div.player.lcm
{ bottom: 57%; left: 32%; }
div.field div.player.ldm
{ bottom: 51%; left: 28%; }
div.field div.player.lfm
{ bottom: 74%; left: 27%; }
div.field div.player.lam
{ bottom: 74%; left: 17%; }
div.field div.player.lm
{ bottom: 57%; left: 26%; }
div.field div.player.lw
{ bottom: 61%; left: 11%; }
/* attacking */
div.field div.player.rf
{ bottom: 86%; right: 24%; }
div.field div.player.rs
{ bottom: 86%; right: 33%; }
div.field div.player.cf
{ bottom: 92%; left: 50%; transform: translate(-50%, 0); }
div.field div.player.lf
{ bottom: 86%; left: 24%; }
div.field div.player.ls
{ bottom: 86%; left: 33%; }

/* league table */
div.league-table-header
{ padding-left: 10px; font-size: 18px; font-weight: bold; line-height: 34px; color: #FFFFFF; background: #2CD155; text-align: left; overflow: visible; }
ul.league-table
{ clear: left; font-size: 16px; line-height: 30px; list-style-type: none; }
ul.league-table:last-of-type li
{ border-bottom: 5px solid #2CD155; }
ul.league-table li
{ float: left; height: 30px; color: #222222; background: #EEEEEE; border-bottom: 1px solid #CCCCCC; }
ul.league-table li span
{ color: #999999; }
ul.league-table.top li
{ padding-top: 5px; font-weight: normal; color: #CCCCCC; background: #444444; text-transform: none; }
ul.league-table li.final-result
{ width: calc(100% - 240px); padding-left: 10px; }
ul.league-table li.rank
{ clear: both; width: 30px; height: 30px; padding-right: 8px; font-weight: bold; text-align: right; }
ul.league-table li.badge
{ width: 24px; text-align: center; display: flex; align-items: center; justify-content: center; }
ul.league-table li.badge span.colour-badge
{ width: 18px; height: 18px; display: inline-block; }
ul.league-table li.team_name
{ width: calc(100% - 298px); padding-left: 6px; text-transform: uppercase; }
ul.league-table li.numb
{ width: 32px; text-align: right; }
ul.league-table li.numb:last-child
{ width: 22px; padding-right: 10px; }
ul.league-table li.goaldiff
{ width: 70px; text-align: center; }
ul.league-table.first li
{ padding-top: 10px; }
p.league-relegated
{ line-height: 30px; color: #222222; background: #CCCCCC; text-align: center; }

/* project view */
table.project-list
{ width: 100%; border: 0; border-collapse; collapse; }
table.project-list tr td
{ width: calc(70% - 100px); padding: 5px; font-size: 16px; line-height: 22px; border-width: 0 1px 1px 0; border-style: solid; border-color: #EEEEEE; }
table.project-list tr td.row-header
{ font-weight: bold; background: #EEEEEE; text-align: center; text-transform: uppercase; }
table.project-list tr:first-child td
{ border-top: 1px solid #EEEEEE; }
table.project-list tr td.one
{ width: 30px; border-left: 1px solid #EEEEEE; text-align: center; }
table.project-list tr td.two
{ width: 30%; text-transform: uppercase; }
table.project-list tr td.three
{ width: 70px; }
table.project-list tr:last-child td
{ font-weight: bold; color: #FFFFFF; background: #222222; border-color: #222222; }
table.project-list tr td.one span
{ font-weight: bold; }
table.project-list tr td.one.done
{ color: #FFFFFF; background: #2CD155; }
table.project-list tr td span.tag-green,
table.project-list tr td span.tag-yellow,
table.project-list tr td span.tag-red
{ display: inline-block; font-size: 12px; line-height: 16px; padding: 4px; border-radius: 4px; background: green; }
table.project-list tr td span.tag-green
{ color: #14B349; background: rgba(20,179,73,0.15); }
table.project-list tr td span.tag-yellow
{ color: #F4B71B; background: rgba(244,183,27,0.15); }
table.project-list tr td span.tag-red
{ color: #EA1920; background: rgba(234,25,32,0.15); }




/* games */
div.game-box
{ width: 100%; margin: 0 auto 0 auto; }
div.game-box.daytime-11, div.game-box.daytime-12
{ background: linear-gradient(to bottom, #E6F4FF,#FFFFFF 72px); }
div.game-box.daytime-13, div.game-box.daytime-14, div.game-box.daytime-15, div.game-box.daytime-16
{ background: linear-gradient(to bottom, #E8ECED,#FFFFFF 72px); }
div.game-box.daytime-21, div.game-box.daytime-22
{ background: linear-gradient(to bottom, transparent,#FFFFFF 72px), linear-gradient(to right, #E6F4FF,#A5BFF2) }
div.game-box.daytime-23, div.game-box.daytime-24, div.game-box.daytime-25, div.game-box.daytime-26
{ background: linear-gradient(to bottom, transparent,#FFFFFF 72px), linear-gradient(to right, #E8ECED,#BAC1CF) }
div.game-box.daytime-31, div.game-box.daytime-32
{ background: linear-gradient(to bottom, #A5BFF2,#FFFFFF 72px); }
div.game-box.daytime-33, div.game-box.daytime-34, div.game-box.daytime-35, div.game-box.daytime-36
{ background: linear-gradient(to bottom, #BAC1CF,#FFFFFF 72px); }
div.game-box div.inner
{ margin: 0 auto 0 auto; overflow: hidden; }
h1#game-header
{ padding: 10px 0 40px 0; font-size: 24px; font-weight: normal; line-height: 36px; text-align: center; text-transform: uppercase; }
div.game-box div.game-inner
{ padding-bottom: 0; background: linear-gradient(#F5F5F5,#F5F5F5) no-repeat 50% center/100px; overflow: hidden; }
div.game-box div.inner-box
{ text-align: center; }
div.game-box div.middle-box
{ float: left; width: calc(100% - 420px); }
div.game-box div.middle-box div.line
{ border-bottom: 1px solid #333333; overflow: hidden; }
div.game-box div.middle-box div.line div
{ float: left; width: 100px; font-size: 30px; font-weight: bold; line-height: 50px; color: #FFFFFF; background: #2CD155; text-align: center; }
div.game-box div.middle-box div.line p
{ float: left; width: calc(50% - 50px); font-size: 22px; line-height: 50px; text-align: left; }
div.game-box div.middle-box div.line p:first-child
{ text-align: right; }
div.game-box div.middle-box div.line p span
{ margin: 0 20px 0 20px; font-weight: bold; }
div.game-box div.middle-box div.team-info div.side
{ float: left; width: calc(50% - 90px); padding: 0 20px 0 20px; color: #2CD155; text-align: left; }
div.game-box div.middle-box div.team-info div.center
{ float: left; width: 100px; font-size: 12px; font-weight: bold; line-height: 22px; color: #FFFFFF; background: #222222; }
div.game-box div.middle-box div.scorers.top div.side, div.game-box div.middle-box div.scorers.top div.center
{ padding-top: 10px; }
div.game-box div.middle-box div.scorers div.center
{ float: left; width: 100px; font-size: 16px; line-height: 24px; background: #F5F5F5; }
div.game-box div.middle-box div.scorers div.center span
{ font-size: 13px; color: #EA1920; text-transform: uppercase; }
div.game-box div.middle-box div.scorers div.side
{ float: left; width: calc(50% - 50px); }
div.game-box div.middle-box div.scorers div.side p
{ margin: 0 20px 0 20px; font-size: 16px; line-height: 24px; }
div.game-box div.middle-box div.team-info div.side.text-right, div.game-box div.middle-box div.scorers div.side p.text-right
{ text-align: right; }
div.game-box div.inner div.inner-box img
{ height: 211px; margin-right: auto; margin-left: auto; }
/* info-bar */
div#info-bar-top
{ margin: 0 20px 0 20px; height: 20px;
background: radial-gradient(60px 10px at 85px, rgba(0,0,0, 0.4), transparent), radial-gradient(60px 10px at calc(100% - 85px), rgba(0,0,0, 0.4), transparent), linear-gradient(120deg,transparent 0 calc(50% - 48px),#27B84B calc(50% - 47px) 51%, transparent 51%),
linear-gradient(60deg,transparent 50%, #27B84B 50% calc(50% + 48px), transparent calc(50% + 49px)),
linear-gradient(155deg,#FFFFFF 0 17px,#2CD155 18px 55%, transparent 55%),
linear-gradient(25deg,#2CD155 45% calc(100% - 18px), transparent calc(100% - 17px)); border-bottom: 5px solid #27B84B; }
div.info-bar
{ margin: 0 20px 0 20px; padding: 0 5px 0 5px; font-size: 15px; line-height: 40px; color: #FFFFFF; background: #222222; }
div.info-bar img, div.info-under img
{ width: auto; height: 15px; position: relative; top: -15%; margin-right: 4px; margin-left: 15px; transform: translateY(15%); }
div.info-bar div.info-side, div.info-under div.info-side
{ float: left; width: calc(50% - 61px); }
div.info-bar div.info-weather
{ float: left; width: 120px; height: 38px; background: #222222; border: 1px solid #DBDBDB; }
div.info-under
{ margin: 0 20px 0 20px; font-size: 15px; line-height: 40px; color: #222222; background: #F5F5F5; }
div.info-under div.info-temp
{ float: left; width: 122px; color: #222222; background: #DBDBDB; }
div.lineup-box
{ background: #FFFFFF; overflow: hidden; }
/* columns for lineup and games */
div.second div.game-cont
{ clear: left; }
div.second div.game-cont div
{ float: left; font-size: 16px; line-height: 38px; height: 38px; border-bottom: 1px solid #333333; }
div.second div.game-cont a
{ color: #222222; background: transparent; text-decoration: none; }
div.second div.game-cont div.game-res
{ width: 60px; font-size: 18px; font-weight: bold; color: #FFFFFF; background: #2CD155; text-align: center; }
div.second div.game-cont div.game-res span
{ margin: 0 1px 0 1px; }
div.second div.game-cont div.game-side
{ width: calc(50% - 30px); text-align: left; border-color: #999999; }
div.second div.game-cont div.game-side p
{ padding: 0 10px 0 10px; }
div.second div.game-cont div:first-child p
{ text-align: right; }
div.second li span
{ margin: 0 5px 0 5px; font-weight: bold; }
div#other-games
{ float: left; width: 240px; margin-top: 20px; margin-left: 20px; font-size: 15px; text-align: left; }
div#other-games h2
{ margin: 0 0 10px 0; padding: 0 10px 0 10px; line-height: 40px; color: #AAAAAA; background: #FFFFFF; }
div#other-games h3
{ margin-top: 5px; padding-top: 5px; font-size: 17px; font-weight: normal; line-height: 27px; border-top: 2px solid #F5F5F5; }
div#other-games h3 span
{ float: right; width: 27px; height: 27px; font-size: 17px; line-height: 27px; text-align: center; border-left: 2px solid #F5F5F5; }
div#other-games h3 a
{ display: block; padding: 3px 0 3px 10px; color: inherit; text-decoration: none; }
div#other-games h3 a:hover
{ background: #F5F5F5; }
div.ui
{ float: left; width: 6px; height: 12px; margin-top: 5px; margin-left: 3px; background: #2CD155; }
div.ui.right
{ float: right; }
div.second
{ float: left; width: calc(50% - 40px); margin: 0 20px 0 20px; }
div.second div.liner
{ font-size: 17px; line-height: 29px; text-align: left; border-width: 1px 0 0 0; border-style: solid; border-image: linear-gradient(to right, transparent, #E6E6E6) 100% 1; }
div.second div.liner:first-of-type
{ border: none; }
/*
div.second div.liner.darker
{ border-image: linear-gradient(to right, transparent 0, #DDDDDD 30%) 100% 1; }
div.second div.liner.darker
{ margin-top: 5px; border: none; } */
div.second div.liner span.position
{ margin-right: 5px; padding: 2px 0 2px 4px; }
div.second div.liner span.position.darkblue span.position-name
{ background: #D7C4DE; }
div.second div.liner span.position.blue span.position-name
{ background: #C4D1EC; }
div.second div.liner span.position.red span.position-name
{ background: #F7CBCF; }
div.second div.liner span.position.yellow span.position-name
{ background: #F8E9C4; }
div.second div.liner span.position span
{ display: inline-block; width: 18px; margin: 0 2px 0 0; text-align: center; }
div.second div.liner span.position span.position-name
{ width: 24px; margin: 0; font-size: 12px; font-weight: bold; color: #FFFFFF; background: #D9D9D9; }
div.second div.liner span.number
{ margin-right: 5px; padding: 2px 2px 2px 8px; font-size: 15px; color: #222222; }
div.second div.liner div.deeds
{ float: right; margin-right: 10px; font-size: 14px; }
div.second div.liner div.deeds.out
{ color: #666666; }
div.second div.liner div.deeds.in
{ color: #2CD155; }
div.second div.liner div.deeds.sentoff
{ color: #EA1920; }
div.second div.liner img
{ vertical-align: top; width: 16px; height: 16px; margin: 7px 2px 0 4px; opacity: 0.9; }
/* match sheet icons */
div.second div.icb
{ display: inline-block; width: 14px; height: 14px; margin-top: 5px; margin-right: 3px; background-image: radial-gradient(#222222 30%, transparent 30%), radial-gradient(#222222 45%, transparent 45%), linear-gradient(to right, transparent, rgba(0,0,0, 0.2)); background-color: #FFFFFF; background-position: 0 0, 7px 7px; background-size: 14px 14px; border: 1px solid #AAAAAA; border-radius: 100px; }
div.second div.ic1
{ display: inline-block; width: 10px; height: 14px; margin-top: 5px; margin-right: 3px; margin-left: 5px; background: #FAEE34; border: 1px solid #AAAAAA; }
div.second div.ic2
{ display: inline-block; width: 10px; height: 14px; margin-top: 5px; margin-right: 3px; margin-left: 5px; background: linear-gradient(to right, #FAEE34 0 5px, #EA1920 5px); border: 1px solid #AAAAAA; }
div.second div.ic3
{ display: inline-block; width: 10px; height: 14px; margin-top: 5px; margin-right: 3px; margin-left: 5px; background: #EA1920; border: 1px solid #AAAAAA; }
div.second div.ics
{ display: inline-block; width: 14px; height: 14px; margin-top: 5px; margin-right: 3px; background: linear-gradient(120deg,transparent 5px 12px,#FFFFFF 7px), linear-gradient(60deg,#FFFFFF 0 7px,#999999 7px); }
div.second div.ics.in
{ background: linear-gradient(60deg,transparent 5px 12px,#FFFFFF 7px), linear-gradient(120deg,#FCFCFC 0 7px,#2CD155 7px); }
div.second div.ics.sentoff
{ background: linear-gradient(120deg,transparent 5px 12px,#FFFFFF 7px), linear-gradient(60deg,#FCFCFC 0 7px,#EA1920 7px); }
div.line-divider
{ clear: left; margin: 0 20px 0 20px; padding: 20px 0 20px 0; background: linear-gradient(#2CD155, #2CD155) no-repeat center/100% 1px; text-align: center; }
div.line-divider p
{ display: inline-block; padding: 0 10px 0 10px; font-size: 15px; line-height: 21px; color: #2CD155; background: #FCFCFC; text-transform: uppercase; }

/* footer */
footer
{ clear: both; background: #EEEEEE; }
footer div.bottom-logo
{ padding-top: 50px; height: 100px; text-align: center; background: linear-gradient(to bottom,#FFFFFF 70px,#EEEEEE); }
footer div.bottom-logo img
{ display: block; width: 100px; height: 100px; margin: 0 auto 0 auto; }
footer div.top
{ height: 20px;
background: linear-gradient(120deg,transparent 0 calc(50% - 48px),#27B84B calc(50% - 47px) 51%, transparent 51%),
linear-gradient(60deg,transparent 50%, #27B84B 50% calc(50% + 48px), transparent calc(50% + 49px)),
linear-gradient(155deg,#EEEEEE 0 17px,#2CD155 18px 55%, transparent 55%),
linear-gradient(25deg,#2CD155 45% calc(100% - 18px), transparent calc(100% - 17px)); }
footer div.cont
{ padding: 20px 0 20px 0; color: #FFFFFF; background: #29C24F; }
footer div.inner
{ margin: 0 20px 0 20px; padding: 20px; background: #24AB46; overflow: hidden; }
footer div.inner ul
{ float: left; width: 25%; margin: 0 0 20px 0; padding: 0; list-style-type: none; }
footer div.inner li
{ margin: 0 10px 0 10px; padding: 4px; font-size: 14px; line-height: 20px; border-bottom: 1px dashed #57D978; }
footer div.inner ul li:first-child
{ margin-bottom: 10px; font-size: 22px; line-height: 26px; border: none; }
footer div.inner ul li:last-child
{ border: none; }
footer div.inner li span
{ margin-left: 5px; font-size: 18px; color: transparent; }
footer div.inner li a
{ display: block; color: #FFFFFF; text-decoration: none; }
footer div.inner li a:hover
{ color: #C9F0D2; }
footer div.inner li a:hover span
{ color: #FFFFFF; }
footer p
{ padding: 20px; font-size: 14px; line-height: 22px; color: #FFFFFF; background: #222222; text-align: center; }

@media only screen and (max-width: 449px)
{
	.mob
	{ display: block !important; }
	.full
	{ display: none !important; }
	div#main-header div.right div
	{ float: none; width: 100%; }
	div#main-header div.right div img.first
	{ margin-left: 3.3vw; width: 40vw; }
	div#main-header div.right div img:last-child
	{ margin-right: 3.3vw; width: 40vw; }
	div.single-box
	{ width: 100%; }
	div.double-box div.inner img, div.double-box div.inner p
	{ margin-right: 9vw !important; }
	div.double-box div.inner img:first-child, div.double-box div.inner p.first
	{ margin-left: 9vw !important; margin-right: 0 !important; }
	div.large-box div.inner
	{ float: none; display: block; width: 100%; text-align: center; }
	div.large-box div.inner img, div.large-box div.inner img:first-child
	{ margin: 40px auto 10px auto; float: none; display: block; width: 90%; height: auto; }
	div.large-box div.inner p, div.large-box div.inner p.first
	{ float: none; display: block; width: 100%; text-align: center; }
	ul.squad li.player_num, ul.squad li.player_flag
	{ padding-top: 8px; border-bottom: 0; }
	ul.squad li.player_name
	{ width: calc(100% - 72px); padding-top: 8px; border-bottom: 0; border-right: 1px solid #EEEEEE; }
	ul.squad li.player_pos, ul.squad li.player_age
	{ width: 50%; padding-bottom: 8px; }
	ul.squad li.player_pos
	{ width: calc(50% - 12px); padding-left: 10px; border-left: 1px solid #EEEEEE; }
	ul.squad li.player_name.top
	{ width: calc(100% - 72px); border-color: #444444; }
	ul.squad li.player_pos.top
	{ border-color: #444444; }
	ul.squad li.player_age, ul.squad li.player_age.top
	{ width: calc(50% - 10px); padding-right: 10px; text-align: right; }
}
@media only screen and (max-width: 549px)
{
	div.single-box
	{ width: 100%; }
	div.double-box
	{ width: 100%; }
	div.large-box
	{ width: 100%; }
	div.double-box div.inner
	{ width: 100%; }
	div.double-box div.inner img, div.double-box div.inner p
	{ width: 31.3vw; height: auto; margin-right: 11.7vw; }
	div.double-box div.inner img:first-child
	{ margin-left: 11.7vw; margin-right: 0; }
	div.double-box div.inner p
	{ font-size: 14px; }
	div.double-box div.inner p.first
	{ margin-left: 60px; margin-right: 0; }
	div.large-box div.inner div.inner-box
	{ float: none; width: 100%; display: block; margin-bottom: 20px; padding-bottom: 20px; }
	div.large-box div.inner div.inner-box img, div.large-box div.inner div.inner-box img:first-child, div.large-box div.inner div.inner-box p, div.large-box div.inner div.inner-box p.first
	{ float: none; display: block; margin: 0 auto 0 auto; width: 90%; max-width: 340px; height: auto; }
	div#large-jersey-info
	{ clear: left; display: block; width: 100%; }
	div#large-jersey-info section
	{ float: none; display: block; width: 100%; }
	footer div.inner ul
	{ width: 100%; }
	footer div.inner ul
	{ clear: left; }
}
@media only screen and (min-width: 550px) and (max-width: 699px)
{
	div#main-header div.right div
	{ float: left; width: calc(50% - 1px); border-right: 1px solid #2CD155; }
	div.single-box
	{ width: 50%; }
	div.double-box
	{ width: 100%; }
	div.double-box div.inner
	{ width: 500px; }
	div.double-box div.inner img, div.double-box div.inner p
	{ margin-right: 60px; }
	div.double-box div.inner img:first-child, div.double-box div.inner p.first
	{ margin-left: 60px; margin-right: 0; }
	div#large-jersey-info p
	{ margin-bottom: 40px; }
}
@media only screen and (min-width: 700px) and (max-width: 1049px)
{
	div.single-box
	{ width: 33.3%; }
	div.double-box div.inner
	{ width: 100%; }
	div.double-box div.inner img, div.double-box div.inner p
	{ width: 16vw; height: auto; margin-right: 6vw; }
	div.double-box div.inner img:first-child, div.double-box div.inner p.first
	{ margin-left: 6vw; margin-right: 0; }
	div.large-box
	{ text-align: center; }
	div.large-box div.inner
	{ margin: 20px auto 0 auto; width: 680px; }
	div.large-box div.inner img, div.large-box div.inner p
	{ margin-right: 60px; width: 240px; }
	div.large-box div.inner img:first-child, div.double-box div.inner p.first
	{ margin-left: 60px; margin-right: 0; }
}
@media only screen and (min-width: 450px) and (max-width: 699px)
{
	div#main-header div.right div
	{ float: left; width: calc(50% - 1px); border-right: 1px solid #2CD155; }
	div#main-header div.right div img.first
	{ margin-left: 3.3vw; width: 20vw; }
	div#main-header div.right div img:last-child
	{ margin-right: 3.3vw; width: 20vw; }
}
@media only screen and (min-width: 700px) and (max-width: 919px)
{
	div#main-header div.right div
	{ float: left; width: calc(33% - 1px); border-right: 1px solid #2CD155; }
	div#main-header div.right div img.first
	{ margin-left: 2.9vw; width: 12.5vw; }
	div#main-header div.right div img:last-child
	{ margin-right: 2.9vw; width: 12.5vw; }
}
@media only screen and (min-width: 920px) and (max-width: 1049px)
{
	div#main-header div.right div
	{ float: left; width: calc(25% - 1px); border-right: 1px solid #2CD155; }
	div#main-header div.right div img.first
	{ margin-left: 2.7vw; width: 9vw; }
	div#main-header div.right div img:last-child
	{ margin-right: 2.7vw; width: 9vw; }
}
@media only screen and (min-width: 1050px) and (max-width: 1199px)
{
	div.single-box
	{ width: 25%; }
	div.double-box div.inner
	{ width: 500px; }
	div.double-box div.inner img, div.double-box div.inner p
	{ margin-right: 60px; }
	div.double-box div.inner img:first-child, div.double-box div.inner p.first
	{ margin-left: 60px; margin-right: 0; }
	div.large-box
	{ text-align: center; }
	div.large-box div.inner img, div.large-box div.inner p
	{ margin-left: 50px; margin-right: 50px; }
}
@media only screen and (min-width: 550px) and (max-width: 799px)
{
	div.large-box div.inner div.inner-box
	{ float: none; width: 100%; display: block; margin-bottom: 20px; padding-bottom: 20px; }
	div.large-box div.inner div.inner-box img, div.large-box div.inner div.inner-box img:first-child, div.large-box div.inner div.inner-box p, div.large-box div.inner div.inner-box p.first
	{ float: none; display: block; margin: 0 auto 0 auto; }
	div#large-jersey-info
	{ clear: left; display: block; width: 100%; }
	div#large-jersey-info section
	{ float: left; width: 47%; margin-right: 3%; }
	div#large-jersey-info p
	{ margin-bottom: 40px; }
	footer div.inner ul
	{ width: 50%; }
	footer div.inner ul:nth-child(3)
	{ clear: left; }
}
@media only screen and (min-width: 800px) and (max-width: 1199px)
{
	div.large-box div.inner div.inner-box img
	{ width: 66%; height: auto; }
	div#large-jersey-info
	{ clear: left; display: block; width: 100%; }
	div#large-jersey-info section
	{ float: left; width: 30%; margin-right: 3%; }
}
@media only screen and (max-width: 1199px)
{
	div#large-jersey-info h3
	{ margin-left: 14px; }
	div#large-jersey-info h3 span
	{ margin-left: -10px; }
	div#large-jersey-info p
	{ margin-bottom: 40px; margin-left: 36px; }
}
@media only screen and (max-width: 950px)
{
	nav.full
	{ display: none !important; }
	nav#mobmenu
	{ display: block !important; }
	nav#mobmenu ul
	{ width: 100%; }
	nav#mobmenu ul li
	{ float: none; }
	div.half
	{ float: none; display: block; width: 100%; }
	ul.squad, div.squad-header
	{ margin-right: 0; }
	div.field div.player p:first-child
	{ margin-top: 19%; font-size: 3.2vw; line-height: 3.7vw; color: #FFFFFF; }
	div.field div.player p:last-child
	{ margin-top: 13%; font-size: 1.8vw; line-height: 2vw; }
}
@media only screen and (max-width: 1050px)
{
	div.large-box div.inner
	{ width: 100%; }
	div#main-header div.left, div#main-header div.story
	{ float: none; width: 100%; }
	div#main-header div#brand-new
	{ top: auto; bottom: 0; left: 0; right: 0; width: calc(100% - 100px); margin: 0 auto 0 auto; }
	div#main-header div.right
	{ float: none; clear: left; width: 100%; }
}
@media only screen and (min-width: 1200px)
{
	div.single-box
	{ width: 20%; }
	div.double-box div.inner
	{ width: 500px;}
	div.double-box div.inner img, div.double-box div.inner p
	{ margin-right: 60px; margin-left: 0; }
	div.double-box div.inner img:first-child, div.double-box div.inner p.first
	{ margin-right: 0; margin-left: 60px; }
	div.large-box div.inner, div.game-box div.inner
	{ width: 90%; }
	div.large-box div.inner img:first-child, div.large-box div.inner p.first
	{ margin-right: 0; margin-left: 7vw; }
	div.large-box div.inner img, div.large-box div.inner p
	{ margin-right: 7vw; margin-left: 0; }
	div.game-box div.inner div.inner-box
	{ float: left; width: 210px; }
}
@media only screen and (min-width: 700px)
{
	div.double-box
	{ width: 50%; }
	div.large-box
	{ width: calc(100% - 260px); }
}
@media only screen and (min-width: 1600px)
{
	div.field div.player p:first-child
	{ font-size: 27px; line-height: 32px; }
	div.field div.player p:last-child
	{ font-size: 14px; line-height: 18px;  }
}