html,body, div { margin:0; padding:0; }
body { font-family:'cnyfsc', sans-serif; min-height: 100%; }
@font-face {
    font-family: cnyfsc;
    src: url(../../assets/fonts/FengardoNeue_Black.otf);
    }

#header {
    background-color: #6294c4;
    color:#FFF;
    padding:10px 20px;
    margin:0;
    font-family: cnyfsc;
    font-variant: all-small-caps;
    display: grid;
    grid-template-columns: 300px 1fr 100px;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
}

#header img {
    width:100px;
    margin:0;
}

.sport-icon { width:24px; vertical-align: bottom;}

#header img.logotype {
    width:160px;
    margin:0;
    margin-top:14px;
    margin-left:20px;
    vertical-align: top;
}


h1#logotype {
    font-family: cnyfsc;
    font-size: 2vw;
    display: inline-block;
    margin:auto;
    padding:0 20px;
}

#logotype-break { display:block; }


#current-time {
    font-weight: bold;
    margin:auto;
    padding:10px;
    font-size: 38px;
    text-align: center;
}

.time { font-size: 56px; }
.ampm { font-size: 38px;}
#wrapper {
    display: grid;
    width: 100%;
    margin:0;
    padding:0;
    grid-template-columns: 67fr 33fr;
}

#schedule {
    font-family: 'Open Sans',sans-serif;
    font-optical-sizing: auto;
    font-weight:bold;
    font-style: normal;
    padding:0 10px;
    font-size: 1.5vw;
    padding:0;
    background:#f4f4f4;
}

#schedule h1,h2 {
    padding:10px;
    margin:0;
    background:#0c2d48;
    color:#fff;
    font-family: cnyfsc;
    font-variant: all-small-caps;
    font-size:1.5vw;
}

#schedule h2 {
    color:#333;
    font-size: 24px;
    text-align: center;
}

#left, #right {
    margin: 0;
}

#right { background: url(../../assets/img/bg/turf-indoor-tile-400x400.jpg) repeat left center; }
/*#right img { margin-top:40px; }*/

#left {
    border-right:2px solid #0c2d48;
    min-height:100%;
}

/*#promo { position: fixed; }*/

#footer {
    width:100%;
    color:#FFF;
    background-color: #444;
}

#qrcode { margin-top:10px; text-align: right; }

.game, .event {
    display:grid;
    grid-template-columns: 10% 10% 50% 30%;
    column-gap:10px;
    border:1px solid #777;
    padding:10px;
    font-size:1.4vw;
    vertical-align: baseline;
    flex-wrap: wrap;
    margin-top:0;
    /*padding:10px;*/
}

#rightnow {
    background-color: #fff;
    /*color:#6294c4;*/
}
#comingup {
    background-color: #eee;
    /*color:#6294c4;*/
}

.coming-up { border-top:1px solid #fff; }
.event {
    grid-template-columns: 10% 20% 70%;
}

.game div p, .event div p { margin:0; }

.game-teams {
    display:inline-block;
    text-align: center;
    vertical-align: baseline;
}
.game-time,.game-field, .event-field, .event-time, .event-title {  vertical-align: baseline; }

/* .game-field, .event-field { text-align:center; } */
.game-league { font-size:.9vw; vertical-align: baseline; max-width:100%; flex-wrap: wrap;  }

fieldset { margin-top:18px; }

.homeaway { font-size: 1vw !important;}

#header #qrcode img { width:100px; margin-top:20px; float:right; }
#header #site-link { display:none; text-align:right; }

.btn {
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    font-family: Arial;
    color: #ffffff;
    font-size: 1.8vw;
    font-weight: bold;
    background: #145da0;
    padding: 8px 10px 8px 10px;
    text-decoration: none;
  }
  
  .btn:hover {
    background: #2e8bc0;
    text-decoration: none;
  }

/* responsive styling */
/*
Small (sm) 576px and greater screen sizes use small breakpoints. ...
Medium (md) 768px and greater screen sizes use the medium breakpoints. ...
Large (lg) 992px and greater screen sizes use the large breakpoints. ...
Extra-large (xl) 1200px and greater screen sizes use the extra-large breakpoints.
*/

/* Screens smaller than 576px */
@media only screen and (max-width: 575px) {
    #wrapper {
        display:block;
        grid-template-columns: 1fr;
    }
    /*#current-time { display: none; }
    #header { grid-template-columns: 60px 1fr; }*/
    #schedule { border-bottom: 2px solid #777; }
    #left { border-right:none; }
    .game, .event { font-size: 2.2vw;
    }
    .game { grid-template-columns: 10% 10% 50% 100px; }
    #schedule h1,h2 {
        font-size:2.8vw;
    }
    #header img { width:60px; margin-left:10px; }
    h1#logotype {
        font-size: 3.9vw;
    }
    #header img.logotype {
        width:100px;
        margin-top: 8px;
        margin-left:10px;
    }
    #current-time { font-size:18px; }
    .time, .ampm { font-size: 28px; }
    .homeaway, .game-league { font-size:1.75vw }
    .game-field, .event-field { text-align:left; }
    #qrcode { display: none; }
    #header { 
        padding: 10px;
        column-gap: 0px ;
        grid-template-columns: 190px 1fr 100px;
    }
    #header #site-link { display:inline-block; text-align: center; }
    
    #site-link a.btn {
        display: inline-block;
        vertical-align: middle;
        margin-top:30px;
    }
}

/* Screens 576px or larger */
@media only screen and (min-width: 576px) {
    #wrapper {
        grid-template-columns: 1fr 190px;
    }
}

/* Screens 768px or larger */
@media only screen and (min-width: 768px) {
    #wrapper {
        grid-template-columns: 1fr 254px;
    }
}

/* Screens 992px or larger */
@media only screen and (min-width: 992px) {
    #wrapper {
        grid-template-columns: 1fr 330px;
    }
}

/* Screens 1040px or larger */
@media only screen and (min-width: 1040px) {
    #logotype-break { display:block; }
    h1#logotype { font-size:2vw; }
}

/* Screens 1200px or larger */
@media only screen and (min-width: 1200px) {
    #wrapper {
        grid-template-columns: 1fr 640px;
    }
    .game-teams { font-size:1.4vw; }
    #schedule {
        font-size: 1.1vw;
    }
    .game { grid-template-columns: 10% 10% 50% 369px; }
}