@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Comfortaa");

:root {
    --background:#FFFFFF;
    --secondary: #478fcc;    
    --color: #0B2637;
    --black: #000000;
    --gray: #AAAAAA;
    --light-gray: #F2F2F2;
    --loser: #888888;
    --border: #CCCCCC;
}
*, *::before, *::after{box-sizing:border-box;}
html {}
body {font-family:Roboto,sans-serif;font-size:16px;top:0;left:0;margin:0;position:relative;}
/* navigation styles */

header {background: var(--background);border-bottom:1px solid var(--color);display:grid;text-align:center;position:absolute;height:67px;width:100%;z-index:999;}
header h1 {margin:0;padding:0;display:flex;align-items:center;justify-content:center;height:100%;}
header h1.logo img {height:1.2em;}

nav {position:absolute;text-align:left;top: 100%;left: 0;background: var(--background);width: 250px;transform: scale(1, 0);transform-origin: top;transition: transform 400ms ease-in-out;}
nav ul {margin:0;padding:0;list-style:none;transition: 300ms ease-out;}
nav li {border-bottom:1px solid #CCCCCC;margin:0}
nav li.logo img {display:none;}
nav li.logo span {display:block;}
nav li:last-child {border-bottom:1px solid var(--color);}
nav li:first-child {border-top:1px solid var(--color);}
nav a {background:#F2F2F2;color:var(--color);display:block;text-decoration:none;font-size: 1.2 rem;text-transform: uppercase;opacity: 0;padding: 1.25em 1em;transition: opacity 150ms ease-in-out;}
nav a:hover {background:var(--secondary);color: #FFFFFF;}

.wrapper {background:#FFFFFF;margin:0 auto;position:relative;max-width:1100px;min-height: 100vh;z-index:1;}
.content {background:#FFFFFF;position:relative;left:0;top:67px;min-height:90vh;}
.content h2 {margin:0;padding:0;}

.hometemplate {
    display: grid;
    grid-template-columns: 69% 30%;
    grid-gap: 1%;
    margin-top: .5em;
}

.articles {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.gametime h1 {
    margin:0;
}
.gametime p {
    margin:0 0 .5em 0;
    line-height:1.4em;
}
.gametime img {
    width:100%;
    height:auto;
}
.game_2column {
    grid-column: 1/-1;
}
.padded {
    padding: 1em;
}


.boxscore {display:none;}

.masthead {border-bottom:1px solid var(--color);display:flex;align-items:center;flex-wrap:wrap;}
.masthead h1{color:var(--base-color);display:flex;align-items:center;justify-content:center;font-size:1.5em;font-weight:900;margin:0;padding:.25em 0 .25em .25em;width:100%;}
.masthead a.link {color:var(--secondary);display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:700;margin-left:.5em;border:1px solid var(--background);border-radius:50%;text-decoration:none;height:1.75em;width:1.75em;}
.masthead a.link:hover {background:var(--secondary);border-color:var(--secondary);color:var(--background);}
.masthead h1 a.prevnext {color:var(--secondary);font-size:1.2em;margin-left:.25em;margin-right:.25em;}
.masthead h1 a.prevnext:hover {color:var(--base-color);}
.masthead ul.icons {background:var(--light-gray);border-top: 1px solid #CCC;list-style:none;display:flex;align-items:center;justify-content:center;margin:0;padding:.25em 0 .25em 0;width:100%;}
.masthead ul.icons li a {color:var(--secondary);display:flex;align-items:center;justify-content:center;font-size:1.2em;font-weight:700;margin-right:.75em;border:1px solid var(--secondary);border-radius:50%;text-decoration:none;height:2em;width:2em;}
.masthead ul.icons li a span.all {font-size:.8em;text-transform:uppercase;}
.masthead ul.icons li a:hover {background:var(--secondary);color:var(--background);}
.masthead ul.icons li a.chosen {background:var(--color);color:var(--background);}
.masthead ul li.calendar_link {display:flex;align-items:center;}
.masthead ul li.calendar_link input {border:none;background:#FFFFFF;color:#FFFFFF;width:0;height:0;}
.masthead ul li.calendar_link i {border:1px solid var(--secondary);border-radius:50%;color:var(--secondary);cursor:pointer;font-size:1.2em;height:2em;width:2em;}
.masthead ul li.calendar_link i:hover {background:var(--secondary);color:#FFFFFF;cursor:pointer;}

.nav-icon {position:absolute;height:100%;cursor:pointer;display:flex;align-items:center;right:0;padding:0 .75em 0 0;}
.nav-icon div {display:flex;align-items:center;justify-content:center;}
.nav-icon i {border:1px solid var(--secondary);font-size:1.2em;color:var(--secondary);display:flex;align-items:center;justify-content:center;border-radius:50%;height:2em;width:2em;}
.nav-icon i:hover {background:var(--secondary);color:var(--background);}

.navicon {position:absolute;text-align:left;top:100%;right:0;background:var(--background);transform:scale(1,0);transform-origin:top;transition: transform 400ms ease-in-out;width:250px;}
.navicon ul {border-right:1px solid var(--color);border-left:1px solid var(--color);margin:0;padding:0;list-style:none;transition:300ms ease-out;}
.navicon ul li {border-bottom:1px solid var(--color);margin:0;}
.navicon ul li:last-child{border-bottom:1px solid var(--color);}
.navicon ul li:first-child {border-top:1px solid var(--color);}
.navicon ul li a {background:var(--background);color:var(--color);display:block;text-decoration:none;font-size:1rem;text-transform:uppercase;opacity:0;padding: .75em 1em;transition:opacity 150ms ease-in-out;}
.navicon ul li a:hover{background:var(--secondary);color:var(--background);}
.icon-toggle{display:none;}
.icon-toggle:checked ~ .navicon{transform:scale(1,1);}
.icon-toggle:checked ~ .navicon a{opacity: 1;transition: opacity 250ms ease-in-out 200ms;}

.nav-toggle{display:none;}
.nav-toggle:checked ~ nav{transform: scale(1,1);}
.nav-toggle:checked ~ nav a{opacity: 1;transition: opacity 250ms ease-in-out 200ms;}
.nav-toggle-label{position: absolute;top: 0;left: 0;margin-left: 1em;height:100%;display:flex;align-items:center;cursor:pointer;}
.nav-toggle-label span,.nav-toggle-label span::before,.nav-toggle-label span::after{display:block;background: var(--color);height: 2px;width: 1.5em;border-radius: 2px;position: relative;}
.nav-toggle-label span::before,.nav-toggle-label span::after{content: '';position: absolute;}
.nav-toggle-label span::before{bottom: .5em;}
.nav-toggle-label span::after{top: .5em;}

.events h1 {background:var(--color);color:var(--background);font-size:1.3em;margin: 0 0 2px 0;padding:.5em .25em;text-align:center;}
.events a.title {background:var(--color);;color:var(--background);display:block;font-size:1.3em;font-weight:700;margin: 0 0 2px;padding: .5em .25em;text-align:center;text-decoration:none;}
.events a.title:hover {background-image: linear-gradient(to bottom, rgba(11,38,55,1), rgba(71,143,204,1));color:var(--background);}
.events h3 {font-size:1em;font-weight:700;text-transform:uppercase;margin:0;}
.events h3 a {background:var(--secondary);color:var(--background);display:block;padding:.5em .5em;text-align:center;text-decoration:none;}
.events h3 i {margin-right:.5em;}
.events h3 a:hover {background:var(--color);}
.events ul {border-bottom:4px solid var(--secondary);font-size: 1em;font-weight:300;margin:0 0 2px 0;padding:0;list-style:none;}
.events ul li a {color:var(--black);text-decoration:none;}
.events ul li a div.location {background-image: linear-gradient(to bottom, rgba(238,238,238,1), rgba(255,255,255,0));color:var(--secondary);font-size:.9em;padding:.25em;text-align:center;text-transform:uppercase;}
.events ul li a div.teams {display:flex;flex-wrap:wrap;font-weight:400;grid-column:1/2;padding: .25em 0 .25em .25em;}
.events ul li a div.score {padding-right:.5em;text-align:right;}
.events ul li a div.score i {font-size:.8em;font-weight:400;}
.events ul li a div.outcome {border-bottom:1px solid var(--border);font-size:.8em;padding:.25em;text-align:center;text-transform:uppercase;}
.events ul li a:hover div.shell {background:var(--light-gray);}
.events img {width:100%;height:auto;}

.scoreboard {position: relative;margin:0;padding:0;}
.scoreboard h3 {font-size:1.2em;font-weight:700;text-transform:uppercase;margin:0;}
.scoreboard h3 a {background:var(--secondary);color:var(--background);display:block;padding:.5em .5em;text-decoration:none;}
.scoreboard h3 a:hover {background:var(--color);}
.scoreboard h3 i {margin-right:.5em;}
.scoreboard ul {font-size:1.2em;font-weight:300;margin:0;padding:0;list-style:none;}
.scoreboard ul li {border-bottom:3px solid var(--secondary);line-height:1.5em;margin:0;padding:0;}
.scoreboard ul li.tournament {background:var(--color);color:var(--background);font-size:.8em;font-weight:500;line-height:1.2em;padding:.5em .5em;text-align:center;}
.scoreboard ul li.tournament_border {background:var(--color);line-height:.2em;}
.scoreboard ul li a {color:var(--black);text-decoration:none;}
.scoreboard ul li a div.shell {display:grid;font-weight:500;grid-template-columns: 8fr 2fr;width:100%;}
.scoreboard ul li a div.location {background:var(--light-gray);color:var(--secondary);font-size:.75em;line-height:1.2em;text-transform:uppercase;display:flex;flex-wrap:wrap;grid-column:1/3;padding: .25em;}
.scoreboard ul li a div.location span.stadium {width:100%;}
.scoreboard ul li a div.location span.notes {display:none;}
.scoreboard ul li a div.teams {display:flex;flex-wrap:wrap;font-weight:400;grid-column:1/2;padding: .25em 0 .25em .25em;}
.scoreboard ul li a div.score {padding-right:.5em;text-align:right;}
.scoreboard ul li a div.score i {font-size:.8em;font-weight:400;}
.scoreboard ul li a div.outcome {border-left:1px solid var(--gray);font-size:.7em;font-weight:300;color:var(--gray);display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;padding-left:.5em;text-transform:uppercase;}
.scoreboard ul li a div.outcome span {display:block;margin:0;line-height:1.5em;width:100%;}
.scoreboard ul li a div.game1 {border-bottom: 1px dashed #CCC;}
.scoreboard ul li a div.loser {color: var(--loser);}
.scoreboard ul li a div.winner {font-weight:700;}
.scoreboard ul li a:hover div.shell {background:#F2F2F2;}

footer {background:var(--background);position:sticky;bottom:0;left:0;}
footer div.footercontent {border-top:1px solid var(--secondary);max-width:1100px;margin:0 auto;padding:1em 0;text-align:center;}
footer div.footercontent img {height:1.75em;text-align:center;}

.grid-1 {width:5%;}
.grid-2 {width:10%;}
.grid-3 {width:15%;}
.grid-4 {width:20%;}
.grid-5 {width:25%;}
.grid-6 {width:30%;}
.grid-7 {width:35%;}
.grid-8 {width:40%;}
.grid-9 {width:45%;}
.grid-10 {width:50%;}
.grid-11 {width:55%;}
.grid-12 {width:60%;}
.grid-13 {width:65%;}
.grid-14 {width:70%;}
.grid-15 {width:75%;}
.grid-16 {width:80%;}
.grid-17 {width:85%;}
.grid-18 {width:90%;}
.grid-19 {width:95%;}
.grid-20 {width:100%;}

.yellow {background:yellow;}
.green {background: green;}
.lime {background:lime;}
.orange {background:orange;}
.gray {background:#F2F2F2;}

@media screen and (min-width:750px)
{

    .masthead {display:flex;flex-direction:row;}
    .masthead h1 {justify-content:left;flex:1;}
    .masthead ul.icons {background:var(--background);border-top: none;justify-content:flex-end;flex:0;}

    .scoreboard ul li a div.dugout {display:flex;order:1;flex-wrap:wrap;}
    .scoreboard ul li a div.teams {display:flex;align-items:center;width:50%;}
    .scoreboard ul li a div.outcome {font-size: .6em;order:2;}
    .scoreboard ul li a div.score {padding-right:1.5em;}
    .scoreboard ul li a div.outcome {display:flex;font-size:.7em;flex-direction:row;align-items:center;justify-content:left;}
    .scoreboard ul li a div.outcome span {width:50%;}
}
@media screen and (max-width:750px){
    .hometemplate {display: grid;grid-template-columns: 65% 35%;}
}
@media screen and (max-width:600px){
    .hometemplate {
        display: grid;
        grid-template-columns: 1fr;
    }
    .main {order:2;}
    .events {order:1;}
    .events ul {font-size:1.2em;}
}
@media screen and (max-width: 459px) {
    .articles {
      display: flex;
      flex-direction: column;
    }
  }
@media screen and (max-width:405px)
{
    .masthead ul.icons {background:var(--light-gray);}
    span.city {display:none;}
    span.mascot {display:none;}
}
@media screen and (max-width:380px)
{
    .masthead ul.icons {background:var(--light-gray);}
}
@media screen and (max-width:320px)
{
    .masthead ul.icons {background:var(--light-gray);}
    .scoreboard ul li a div.outcome {font-size:.6em;}
}