/* Basic Setup and Resets */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,400i,700,700i");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
body { -webkit-text-size-adjust: none; }
*, *:before, *:after { box-sizing: border-box; }

/* Base Styles */
body { background: #f5f6f7; }
body, input, select, textarea { color: #9fa3a6; font-family: "Source Sans Pro", Helvetica, sans-serif; font-size: 14pt; font-weight: 400; line-height: 1.65; }
a { transition: color 0.2s ease-in-out; color: #f56a6a; text-decoration: none; }
a:hover { color: #f67878; }
strong, b { color: #3d4449; font-weight: 700; }
em, i { font-style: italic; }
p { margin: 0 0 1.5em 0; font-size: 20px; }
h1, h2, h3, h4, h5, h6 { color: #3d4449; font-family: "Raleway", Helvetica, sans-serif; font-weight: 700; line-height: 1.5; margin: 0 0 1em 0;  }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em;}
h4 { font-size: 1em; font-style: italic;}
h5 { font-size: 0.7em;}
hr { border: 0; border-bottom: solid 1px rgba(160, 160, 160, 0.3); margin: 2em 0; }

/* Overall Wrapper & Header */
#wrapper { max-width: 1200px; margin: 0 auto; padding: 0 1em 1em 1em; }
#header { position: sticky; top: 0; display: flex; justify-content: space-between; background: #ffffff; border-bottom: solid 1px rgba(160, 160, 160, 0.3); height: 3.5em; line-height: 3.5em; width: 100%; z-index: 10000; }
#header a { color: inherit; }
#header .main h1 { margin: 0; font-size: 1.1em; text-transform: uppercase; }


/* Main Content and Sidebar Layout */
#main-content-container { display: flex; padding-top: 1.5em; }
#main { flex-grow: 1; }
#sidebar { width: 24em; background: #ffffff; border: solid 1px rgba(160, 160, 160, 0.3); margin-right: 1.5em; }

/* Post Styles */
.post { padding: 1.5em; background: #ffffff; border: solid 1px rgba(160, 160, 160, 0.3); margin-bottom: 1.5em; }
.post > .header { border-bottom: solid 1px rgba(160, 160, 160, 0.3); margin: -1.5em 0 1.5em -1.5em; width: calc(100% + 3em); padding: 0 1.5em; }
.post > .header h2 { font-size: 1.6em; text-transform: uppercase; }
#main > .post:last-of-type { padding: 0; }
article.post h3 {  color: SteelBlue;}

/* Sidebar and Mobile Menu Section Styles */
#sidebar section { border-top: solid 1px rgba(160, 160, 160, 0.3); padding: 1.5em; }
#sidebar section:first-child { border-top: 0; }
/* Override the text-transform for the time text */

    
.mobile-sidebar-menu section { padding-top: 2em; }

#sidebar .posts article, .mobile-sidebar-menu .posts article { display: flex; margin-bottom: 1.5em; }
#sidebar .posts article:last-child, .mobile-sidebar-menu .posts article:last-child { margin-bottom: 0; }
#sidebar .posts article .image, .mobile-sidebar-menu .posts article .image { display: block; margin-right: 1em; width: 4em; }
#sidebar .posts article .image img, .mobile-sidebar-menu .posts article .image img { width: 100%; }
#sidebar .posts article header, .mobile-sidebar-menu .posts article header { flex-grow: 1; }
#sidebar .posts article header h3, .mobile-sidebar-menu .posts article header h3 { font-size: 0.9em; margin-bottom: 0.25em; letter-spacing: 0.19em; text-transform: uppercase;color: color: #3d4449 }
#sidebar .posts article header .published, .mobile-sidebar-menu .posts article header .published {
    display: block;
    font-family: "Raleway", Helvetica, sans-serif;
    letter-spacing: 0.05em;
    font-size: 0.9em;
    font-weight: 700;
    text-transform: none;
    color: orange;
}

/* Icons & Footer */
.icons li { display: inline-block; padding-right: 1em; }
.red { color:red; }
.copyright { font-size: 0.8em; }
.button-footer { text-align: center; margin-top: 1em; }
.button { display: inline-block; background: #3d4449; color: #ffffff; padding: 0.75em 1.5em; border-radius: 5px; text-decoration: none; font-family: "Raleway", Helvetica, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transition: background-color 0.2s ease; }
.button:hover { background-color: #f56a6a; color: #ffffff; }

/* =================================== */
/* === MOBILE MENU STYLES & LOGIC === */
/* =================================== */
.mobile-menu-toggle { display: none; position: fixed; top: 15px; left: 15px; z-index: 10001; background: #333; color: white; border: none; padding: 10px 15px; font-size: 24px; cursor: pointer; border-radius: 5px; }
.mobile-sidebar-menu { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 300px; background-color: #f5f6f7; z-index: 10000; padding: 2em; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto; border-right: solid 1px rgba(160, 160, 160, 0.3); }
.mobile-sidebar-menu.open { transform: translateX(0); }

/* =================================== */
/* === RESPONSIVE MEDIA QUERIES === */
/* =================================== */
@media screen and (max-width: 1280px) {
    #wrapper { max-width: 1100px; }
}
@media screen and (max-width: 980px) {
    #header { justify-content: center; }
    #header .main { text-align: center; }
    #wrapper { max-width: 100%; padding: 0 2em 2em 2em; }
    #main-content-container { display: block; padding-top: 2em; }
    #sidebar { display: none; }
    .mobile-menu-toggle, .mobile-sidebar-menu { display: block; }
}
@media screen and (max-width: 736px) {
    body { font-size: 12pt; }
    #wrapper { padding: 0 0.5em 1em 0.5em; }
    #main-content-container { padding-top: 1em; }
    #header { height: 2.75em; line-height: 2.75em; }
    h2 { font-size: 1.25em; }
    .post { padding: 1.5em; }
    .post > .header { margin: -1.5em 0 1.5em -1.5em; width: calc(100% + 3em); padding: 0 1.5em; }
}

/* =================================== */
/* === VIDEO & MISC FIXES === */
/* =================================== */
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }