@charset "utf-8";
html { font-size: 100%; }
body,ul,ol,li,p,img,h1,h2,h3,h4,h5,h6,form,fieldset,label,legend,input,table,tr,td,th,iframe,a,dl,dt,dd,header,footer,main,div,section, article { margin:0; padding:0; line-height: 1.35; outline: none; -webkit-box-sizing: border-box; box-sizing: border-box; }
ul,ol,li { list-style: none; margin: 0; padding: 0; }
button::-moz-focus-inner { border:0; padding:0; }
h1,h2,h3,h4,h5 { margin: 0; padding: 0; }
img { border: none; display: block; }
body { font-family: 'Roboto', sans-serif; font-size: 1rem; background: #fff; padding:0; margin: 0; }
img { max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
a, button, input, select, textarea, label, summary { -ms-touch-action: manipulation; touch-action: manipulation; }

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex.col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.flex.align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.flex.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.wrap { display: block; max-width: 320px; margin: auto; }

header[role=banner] { padding: .4em .5em .0em; background: #EFEFEF; color: #000; }
header[role=banner] span { font-weight: 900; }
header[role=banner] img { max-width: 7.5em; }

main { padding-bottom: .0em; color: #000; }
main .title { padding: .1em; }
main .title span { margin-right: .35em; font-size: 1.25rem; font-weight: 900; text-transform: uppercase; }
main .title img { max-height: 1.25em; }
main .blurb { padding: .5em; margin-bottom: .5em; text-align: center; }
main .blurb h2 { font-size: 1.5rem; font-weight: 500; }
main article { margin-bottom: 1em; padding-bottom: 1em; border-bottom-width: .5em; border-bottom-style: solid; }
main article .thumb-wrap { display: block; width: 100%; }
main article .thumb-wrap a { position: relative; display: block; }
main article .thumb-wrap a .thumb { display: block; width: 100%; z-index: 1; }
main article .thumb-wrap a > .play-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
main article .thumb-wrap a > .play-btn > div { position: relative; width: 5em; height: 4em; }
main article .thumb-wrap a > .play-btn span { position: absolute; top: calc(50% - 1rem);  padding: .125em .75em; background: rgba(0,0,0,0.65); border: .15em #fff solid; border-radius: .25em; color: #fff; font-size: .9rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; z-index: 4; }
main article .thumb-wrap a > .play-btn img { width: 4em; z-index: 3; }
main article .meta, main article .tags { margin: 1em auto; }
main article .meta h1 { width: 100%; font-size: 3rem; font-weight: 500; text-align: center; }
main article .meta p { font-size: .8rem; }
main article .tags > span { margin-right: .25em; padding: .25em .75em; border-radius: .2em; font-size: .85rem; font-weight: 700; text-transform: uppercase; }

/* Custom Styles for Free */
main.free { background: #EFEFEF; }
main.free .title { background: #EFEFEF; }
main.free .title span { color: #000; }
main.free article { border-color: #0080FF; }
main.free article .meta a { color: #D4FF5E; }
main.free article .meta a:visited { color: #D4FF5E; }
main.free article .meta a:hover { color: #FFFFFF; }
main.free article .tags > span { background: #EFEFEF; }
main.free article .tags a { color: #F83600; }
main.free article .tags a:visited { color: #000; }
main.free article .tags a:hover { color: #D4FF5E; }

/* Custom Styles for Best */
main.best { background: #EFEFEF; }
main.best .title { background: #6B6B6B; }
main.best .title span { color: #F83600; }
main.best article { border-color: #D5361A; }
main.best article .meta a { color: #F83600; }
main.best article .meta a:visited { color: #F83600; }
main.best article .meta a:hover { color: #000; }
main.best article .tags > span { background: #6B6B6B; }

.choice { padding: .5em; }
.choice img { max-width: 5em; margin-bottom: .25em; }
.choice p { font-size: 1.5rem; font-weight: 700; text-align: center; }

footer { padding: 1em; }
footer p { font-size: .9rem; text-align: center; }

@media (min-width: 680px){
    .wrap { display: block; max-width: 620px; margin: auto; }
    main .title span { font-size: 1.5rem; }
    main .title img { max-height: 1.5em; }
    main .blurb h2 { font-size: 2.5rem; }
    .choice { padding: 1em 0; }
    .choice.col { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
    .choice img { margin-right: 1em; }
    .choice p { font-size: 2.25rem; }
}

@media (min-width: 860px){
    main { padding-bottom: 1em; }
    main > .flex.col { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; max-width: 1200px; margin: auto; }
    main > .flex.col article { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; margin-left: .5em; margin-right: .5em; }
}

@media (min-width: 1060px){
    main > .flex.col article { margin-left: 1.5em; margin-right: 1.5em; }
}

#EFEFEF
#F83600