@charset "utf-8";
.hero {padding:2rem; font-weight:800;;text-align:center; min-height:350px}
.hero-box{background: rgba(0, 0, 0, .15); padding:10px; max-width:550px; margin:0 auto}
.hero h1 {font-size: clamp(2rem, 1.2958rem + 2.2535vw, 4rem)}
.hero h2 { font-family:var(--sans-serif); font-size: clamp(1rem, 1.2958rem + 2.2535vw, 2rem); color:#006}

.icon{ height:26px; width:auto; display:inline-block; margin-right:10px}

.btn-prev {background-image: url( '../images/icons/previous.svg'); background-position:center; background-repeat:no-repeat; background-size:cover; padding:.25rem .25rem .25rem 1.5rem; color:#fff}
.btn-next {background-image: url( '../images/icons/next.svg' ); background-position:center; background-repeat:no-repeat; background-size:cover; padding:.25rem 1.5rem .25rem .25rem}
.btn-prev a {color:#fff; text-decoration:none; padding-right:1rem} 
.btn-next a {color:#000; text-decoration:none}

span.vert { display:inline-block; vertical-align:middle }
.navimage { display:inline-block; width:30px; height:30px; vertical-align:middle }
.bigonly{display:none}

.el-hidden { display:none }
.el-inlineblock { display: inline-block }
.el-isblock { display: block }

main .recentlyadded h2 {
  display: block;
  font-weight: 600;
  margin: 0;
  padding: 40px 0;
  font-size: 30px;
  text-align: center;
  width: 100%;
  color:#000099;
  border-bottom: 1px solid #000099;
}

main .recentlyadded .products, main .products .products-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.grid-container-2col {
  /*** User input values.  */
  --grid-layout-gap: 2rem;
  --grid-column-count: 2;
  --grid-item--min-width: 300px;

  /*** Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

.grid-container-1f-400 {
  display: grid;
  grid-gap: 4rem;
  grid-template-columns: 1fr 400px;
}

.grid-container-3col {
  /*** User input values.  */
  --grid-layout-gap: 0;
  --grid-column-count: 3;
  --grid-item--min-width: 300px;

  /*** Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

.leftdiv, .centrediv, .rightdiv {text-align:center}
.centrediv figure img {width:200px; height:auto}
.shadowed {
	box-shadow: 3px 3px 5px #818181;
	-webkit-box-shadow: 3px 3px 5px #818181;
	-moz-box-shadow: 3px 3px 5px #818181;
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=3, offY=3, positive=true);
}
.txt-shadowed {text-shadow: 2px 2px #000}
a {text-decoration:none}

ul{list-style:none}

/*.tagline{display:none}*/

.psuedo-h1{font-size: 1.75rem}

.txt-black {color:#000}
.txt-white {color:#fff}
.txt-centered {text-align: center}
.link-gold {color:var(--gold); text-decoration:none}
footer .link-gold {padding:10px; line-height:1.5}
.link-gold:hover {background-color:var(--gold); color:#000}

.flexed-sb {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
.flexed-se {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-evenly; margin-bottom:2rem}

#paypaldonate{margin-top:2rem}

/*footer{font-size:.9rem; font-family:var(--sans-serif)}*/
footer section {margin-bottom:2rem}
#footer-row1 { background-color:#655; display: flex;  -webkit-flex-flow: row wrap; flex-flow: row wrap;justify-content: space-between;}
#footer-row1 section {width:100%;padding:0 2rem}
#footer-row2 { background-color:#333}
#ul-footer-1 {width:80%; padding:0; margin:0 auto;display: flex;  -webkit-flex-flow: row wrap; flex-flow: row wrap;justify-content: space-between;}
#ul-footer-1 li {display: inline-block; padding:.5rem 1rem;}
.copyright{ font-size:90%; background-color:#000; padding:5px;display: flex;  -webkit-flex-flow: row wrap; flex-flow: row wrap;justify-content: space-between; color:#fff}
.copyright img {height:16px; width: auto; margin:0 5px 0 0; float:right; padding-right:5px;}

.icon-image {height:30px; width: auto; margin:0 5px 0 0}/*; float:right; padding-right:5px;*/

.content-wrapper {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.post-min {margin-bottom:2rem; padding:0}
.post-min p {margin:0; padding:0}
.post-min h3 { font-size:1.25rem; font-weight:600}
.post-min.email { background-image:url(../images/icons-svg/email.svg); background-repeat: no-repeat; background-size:contain; background-position:center;}
.post-min p:last-of-type {font-style:italic; margin-top:1rem}

.post-classic {display: flex;align-items: center;width: 100%;font-weight: 600}
.post-classic img {width:60px; height:auto; margin-right:10px}
.post-classic-figure {display: block; overflow: hidden;}
.post-classic-figure img {width: 4rem; height:auto; transition: all .3s; margin-right:10px; margin-top:10px}
.post-classic-title {font-size: 14px;color: #fff;}
.post-classic-time {font-size: 12px;letter-spacing: 0.05em;	color: #999999;}
.latestgames {padding:1em}

.badge {display: inline-block;padding: 3px 8px;font-size: 12px;font-weight: 600;line-height: 14px;text-align: center;text-transform: uppercase;color: #fff; border-radius: 4px;width: 100%;}
.badge > .icon {margin-left: 5px;font-size: 12px;}
.badge-primary {background: #35ad79;}
.badge-secondary {font-weight: 600; padding:.5rem;	color: #151515;	background: #fcef57; text-align:center}
.badge-red {background: #fd6565;}
.badge-black {background: #000; color:#fff}
.badge-3 {background: #369;}
.badge-4 {background: #39F;}
.badge-8 {background: #03C;}
.badge-14 {background: #fd6565;}



.event-teaser { font-family:var(--sans-serif); display: flex;align-items: center;justify-content: space-around; width:100%; background-color: #e7e8ef; padding:1rem; margin-bottom:2rem; color:#333; border:1px solid hotpink}
.event-teaser-header {padding: 20px 10px}
.event-teaser-caption h5 {font:600 15px/20px var(--sans-serif); color:#666; text-align:left; margin:0}
.event-teaser-caption time {font:600 15px/20px var(--sans-serif); color:#666; text-align:left}
.event-teaser-teams {display: flex;	align-items: center;justify-content: space-between;}
.event-teaser-team {min-width: 100px; text-align:center}
.event-teaser-team-image {max-width: 40px;}
.countdown-counter {display: flex;	align-items: center;justify-content: space-between;width:200px; font:600 1rem var(--sans-serif); color:#333; text-align:center}
.countdown-counter span {display:block}

.prev-next{display: flex;justify-content: space-between; max-width:1600px; margin:10px auto}
.embolden { font-weight: 800 }
.innerdiv 
		  display: flex;
		  flex-direction: column;
		  justify-content: space-between;
		  align-items: center;
		}
.pad40{padding:40px}
.margin40{margin:40px auto}

.goalsscored { 
	font-size: 1rem;
	font-size: clamp(2.5rem, 2.2rem + 1.5vw, 4rem);
	text-shadow: 2px 2px #FC9; font-weight: 600;
	text-align:center;
}

.score-ht {
	font-size: 0.75rem;
	font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
	padding: 0; margin: 0;
	text-align:center;
}

.nobr{white-space: nowrap;}

.teamcrest{width:100px; height:100px; display:inline-block}
.crest-home {margin-right:1rem}
.crest-away {margin-left:1rem}
.teamname {font-size: clamp(2.5rem, 2.2rem + 1.5vw, 4rem);}

/*h1, .psuedo-h1, h2, .psuedo-h2, h3, .psuedo-h3, h4, .psuedo-h4, h5, .psuedo-h5 { color: #394352; font-weight:800}*/
h1, .psuedo-h1 {font-size: clamp(1.5rem, 1.3277rem + 0.5602vw, 2rem);}
h2, .psuedo-h2 {font-size: clamp(1.25rem, 1.0777rem + 0.5602vw, 1.75rem);}
h3, .psuedo-h3 {font-size: clamp(1rem, 0.8277rem + 0.5602vw, 1.5rem)}
.psuedo-h2 {color:#009}



.unusedsub{ display:inline-block; white-space:nowrap; margin-right:1em; padding:.75rem}
.greenback {
    background-color: #090;
    margin-bottom: 20px;
}
@media (min-width: 720px) {
  	.txt-left{text-align:left}
	.txt-centre{text-align:center}
	.txt-right{text-align:right}
	
	.leftdiv {text-align:left}
	.rightdiv {text-align:right}


	.grid-container-3col {
  /*** User input values.  */
  --grid-layout-gap: 2rem;
  --grid-column-count: 3;
  --grid-item--min-width: 300px;

  /*** Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap)};
}
	
.donatebutton{background-color: #006; height:40px; width:200px; margin:10px auto; color:#fff}
.present {height:30px; width:auto; padding-top:5px}
	#footer-row1 section{max-width:48%;}
	.flexed-sb article { max-width:350px; margin:1rem}
}

@media screen and (min-width: 750px) {
	#menu-toggle{display:none}
	.tagline{display:inline-block;}
	main section:first-of-type, main section:last-of-type { margin-top:50px; text-align:center}
	div.flexed-sb article { max-width:350px}
	.post-classic img {margin-right:16px}
	.flexed-sb article:nth-of-type(even) { margin-left:4rem}
	.hr75 {width:75%;margin:0.5rem auto}
	#slides summary {color:var(--gold);padding:6px; text-decoration:none}
	#slides summary:hover {background-color:var(--gold); color:#000}
	ul.inline li {display:inline; margin:0 1rem}
	#slides .show-end ul li a {
		display: inline-block;
		width: fit-content;
		color: #333;
		text-decoration: none;
	}
	footer .post-classic {width:400px}
	footer .post-classic-aside {width: 100px; margin-right:10px}
}

p.bottom2rem {margin-bottom:2rem}

/*@media (min-width: 850px) {
	.tagline {display:inline-block}
}*/


@media (min-width: 1600px) {
	.flexed-sb article:nth-of-type(even) { margin-left:2rem}
}

@media only screen and (min-width: 900px) {
/*
main section:nth-of-type(even) {width:90%; max-width:1600px; padding:0 1rem; margin:20px auto;}
main section:nth-of-type(odd) {min:100%; padding:0 15px; margin:20px auto;}
main section article {width:90%; max-width:1600px; margin:3rem auto;}

article h1 {padding:3rem 0 2rem 0}

.multi-column {  column-gap: 4em; column-rule: 1px solid #999; column-fill: balance-all; column-width: max(400px);}
.multi-column p:not(:first-of-type) { text-indent:3rem; }

#indexhero,
#pagehero {
	background-repeat:no-repeat; 
	background-size:cover;
	background-position:left;
	min-width:100%;
	min-height:400px;
	padding:1rem;
	text-align:center;
}

.main-header {
  display: flex;
  justify-content: space-between;
  margin:10px 0 20px 0;
  height: auto; min-height:100px;
}

.main-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  grid-auto-rows: 94px;
  grid-gap: 20px;
  margin-bottom: 1.5rem;
}

.overviewcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  background-color: #CCC;
}

.main-cards {
  column-count: 1;
  column-gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: #82bef6;
  margin-bottom: 20px;
  -webkit-column-break-inside: avoid;
  padding: 24px;
  box-sizing: border-box;
}

.flexed_row {display: flex; flex-direction: row;}

#menu img { display:inline; width:4rem; height:auto; margin-right:5px}

.txt-centred {text-align: center}
.txt-justified {text-align:justify}
.txt-right {text-align:right}
.txt-left {text-align:left}
.embolden { font-weight: 800 }
.txt-shadowed-light {text-shadow: 2px 2px #fff}

q, blockquote { quotes: "\201C" "\201D" "\2018" "\2019"; }
blockquote { margin:25px; font-style:italic }
q span {font-style:italic;}

.dblbordered { border: 2px solid transparent; outline: 3px solid var(--base-color); box-shadow: inset 0 0 0 1px var(--base-color); padding:4px; background-color:transparent }


*/
}