*, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; padding: 0; }

html, body { height:100%; width:100%; }

body { font-size:14px; background:#F7FAFC; font-family: 'Merriweather', serif; color:#222; }

/* Links */
a { color:#006699; text-decoration:underline; border-radius:4px; padding:5px; }
header a { color:#FFF !important; }
a:hover { background:#63b3ed !important; color:#FFF !important; text-decoration:none; }

/* Lists */
ol, ul, li { margin:0; padding:0; }

/* Titles */
h1 { font-size:24px; border-radius:4px; }
h2 { font-size:22px; margin-bottom:15px; border-radius:4px; }
h3 { font-size:16px; color:#FFF; padding:8px; background:#2d3748; border-radius:4px; margin:5px 0; }
h4 { font-size:16px; color:#2d3748; padding:5px; background:#A0AEC0;border-radius:4px; margin:5px 5px; }
h5 { font-size:14px; color:#777; padding:5px; background:#EEEEEE; border-radius:4px; margin:5px 10px; }
h6 { font-size:14px; color:#777; padding:5px; background:#F4F4F4; border-radius:4px; margin:5px 15px; }

h1, h2, h3, h4, h5, h6 { display: flex; align-items: center; justify-content: space-between; }
h3 a, h4 a, h5 a, h6 a { display:flex; margin-left: 5px; justify-content: center; align-items: center; flex-direction: column; }

p { padding:10px; }

small { display:block; font-style:italic; }

iframe { max-width:100%; }

/* Container */
.container { width:100%; max-width:900px; padding:0 10px; margin:0 auto; }

/* Header */
header { width:100%; height:50px; display:flex; align-items: center; background: #2d3748; margin-bottom: 15px; border-bottom: 2px solid #63b3ed; }
header .container { display:flex; flex-direction:row; align-items: center; justify-content: space-between }

/* Header Nav */
header nav { }
header nav ul { }
header nav ul li { display:inline-block; }
header nav ul li a { display:block; }

/* Menu */
header nav ul#mobile-menu {
    display: none;
}

@media only screen and (max-width: 550px) {
    header nav #full-menu {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        z-index: 99999;
        overflow: hidden;
        transition: all 0.15s ease-out;
        height: 100%;
        background: rgba(45, 55, 72, 0.8);
        top: 0;
        right: 0;
        width: 100%;
        max-width: 0;
        text-align: center;
    }

    header nav ul#mobile-menu {
        display: block !important;
    }

    header nav #full-menu a {
        width:50%;
        margin:0 auto;
        color:#FFF;
        padding:10px;
    }
}

/* Main */
main { }

/* Main Breadcrumb */
main #breadcrumb { padding:15px 0; }
main #breadcrumb ul li { display:inline-block; color:#999 }
main #breadcrumb ul li::before { content: "/"; color: #CCC; }

/* Main Search */
main #search { padding:10px 0; }
main #search input { width:100%; padding:8px; border-radius:4px; border:1px solid #6699CC; }

/* Main Platforms */
main nav { }
main nav ul { display:flex; flex-wrap:wrap; }
main nav ul li { display: flex; margin: 3px; flex-grow: 1; text-align: left; justify-content: center; align-items: center; width:100%; }
main nav ul li a { min-width:160px; border-radius:4px; border:1px solid #DDD; flex-direction:column; font-size:18px; padding:7px 15px; background:#FFF; width:100%; display:flex; justify-content: center; text-align: left; }
main nav ul li a small { display:block !important; font-size:12px !important; margin-top:3px !important; font-style:normal !important; }

/* Main Tops */
main #tops { display:flex; }
main #tops div { margin:5px; background:#FFF; padding:10px; border-radius:4px; width:100%; }
main #tops div ol { margin-left:30px; list-style-type:decimal-leading-zero; color:#777; }
main #tops div ol li {  }
main #tops div#top-videos ol li { margin-bottom:5px; }
main #tops div ol li a { display:block; }

/* Main Hints */
.hint { display:flex; flex-direction:column; border:1px solid #CCC; border-left:5px solid #CCC; padding:5px; border-radius:10px; margin: 25px 5px 15px; }
.hint .hint:last-child { margin-bottom:0; }
.hint .hint-title { margin: -15px -6px -15px -15px; border-bottom-right-radius:0; }
.hint ul { display:inline; font-size:12px; }
.hint ul li { display:inline-block; margin:3px; }
.hint ul li a { display:inline-block; padding:4px; }
.hint ul li.video-category a { background:#FFF; color:darkred !important; border:1px solid darkred; text-decoration:none; }
.hint ul li.video-category a:hover { background:darkred !important; color:#FFF !important; }
.hint div { margin-top: 10px; }
.hint > p { margin-top:15px; padding:5px; }
.hint-3 { border-color:#2d3748; }
.hint-4 { border-color:#A0AEC0; }
.hint-5 { }
.hint-6 { }

/* Main Videos */
.video { background:#E7F3FF; padding:20px; text-align:center; border-radius:4px; margin-bottom:10px; }
.video-links { display:flex; width:100%; justify-content:center; align-items: stretch; flex-wrap: wrap;}
.video-links li { list-style-type:none; text-align:center; margin:5px; min-width:200px; }
.video-links a { background:#DDD; border:5px solid #DDD; color:#000; width:100%; max-width: 200px; display:block; height:100%; font-size:12px; text-align:center; }
.video-links .highlight a { border:5px solid #63b3ed !important; }
.video-links img { max-width:100%; display:block; margin: 0 auto; margin-bottom:5px; }
.video-links a:hover { border:5px solid #2d3748; }

/* Main Game */
.separator-menu { }
.separator-menu li { display:inline-block; list-style-type: none; }

/* Form */
form { background:#E7F3FF; padding:20px; border-radius:4px; margin-bottom:10px; }
input { padding:10px; width:100%; margin-bottom:15px; display:block; }
textarea { font-family: inherit; padding:10px; width:100%; margin-bottom:15px; display:block; min-height:100px; resize:vertical; }
label { display:block; }
button { margin: 0 auto; display:block; padding:10px; border-radius:4px; background:#336699 !important; color:#FFF !important; }
#search input { margin-bottom:0; padding:10px; font-size:16px; }

/* Footer */
footer { width:100%; }

/* Footer Menu */
footer nav { border-top:1px solid #CCC; border-bottom:1px solid #CCC; padding:5px; margin:10px 0; }
footer nav ul { text-align:center; }
footer nav ul li { display:inline-block; list-style:none;}
footer nav ul li a { display:block; margin:0 10px; }

.message { padding:10px; border-radius:4px; font-size:14px; margin-bottom:15px; text-align:left; width:100% }
.error { color:#721C24; background-color:#F8D7DA; border-color:#F5C6CB }

/* Footer Credits */
footer p { text-align:center; font-size:12px; color:#999; }

@media only screen and (max-width: 600px) {
    main #tops { flex-direction: column; width:auto; }
    main #tops div { margin:5px 0 !important; }
}