*, *::before, *::after { box-sizing: border-box; } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } :focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; } /* Structure */ html { font-size: 100%; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; } body { margin: 0; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 14px; font-size: .875rem; line-height: 1.6; word-wrap: break-word; background: #f7f7f7; -webkit-font-smoothing: antialiased; } .body-right-sidebar .main { float: left; margin-right: 2.5%; } .body-left-sidebar .main { float: right; margin-left: 2.5%; } .container, .container-inner { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; } .container-outer { margin: 25px auto; box-shadow: 0 0 10px rgba(50, 50, 50, .17); } .wrapper { padding: 25px; background: #fff; } .content { width: 65.83%; overflow: hidden; } .sidebar { float: left; width: 31.66%; } .clearfix { display: block; } .clearfix::after { display: block; height: 0; padding: 0; margin: 0; clear: both; line-height: 0; visibility: hidden; content: ""; } /* Button */ .btn { padding: 5px 10px; font-weight: 700; color: #fff; white-space: pre-line; background: #2a2a2a; } .btn:hover { color: #fff; background: #e64946; } /* Animation */ .menu__item, .btn { -webkit-transition: background-color .25s ease-out; -moz-transition: background-color .25s ease-out; transition: background-color .25s ease-out; } /* Typography */ h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; margin: 0 0 1.25rem; font-weight: 700; line-height: 1.3; color: #000; } h1 { font-size: 32px; font-size: 2rem; } h2 { font-size: 24px; font-size: 1.5rem; } h3 { font-size: 20px; font-size: 1.25rem; } h4 { font-size: 18px; font-size: 1.125rem; } h5 { font-size: 16px; font-size: 1rem; } h6 { font-size: 16px; font-size: 1rem; } a { color: #000; text-decoration: none; } a:hover { color: #e64946; } hr { margin: 0 0 20px; border: 0; border-top: 1px solid #dadada; } p { margin: 0 0 20px; margin: 0 0 1.25rem; } b, strong { font: inherit; font-weight: 700; } i, em { font: inherit; font-style: italic; } ol, ul { padding: 0; margin: 0; } small { font-size: 12px; font-size: .75rem; } mark { background-color: #fd5; } figure { margin: 0 0 20px; margin: 0 0 1.25rem; } figcaption { color: #999; } pre, code, kbd, samp { font-family: "Consolas", Courier New, Courier, monospace; font-size: inherit; } pre, code { background-color: #f5f5f5; border: 1px solid #ebebeb; } code { padding: 0 5px; color: #c33; white-space: nowrap; white-space: -o-nowrap; white-space: -moz-nowrap; white-space: -webkit-nowrap; } pre { display: block; padding: 0; padding: 1.25rem; margin-bottom: 20px; margin-bottom: 1.25rem; color: #000; white-space: pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; white-space: -webkit-pre-wrap; } pre code { padding: 0; color: inherit; white-space: inherit; background: inherit; border: 0; } kbd { padding: 2px 3px; color: #fff; background-color: #2a2a2a; } blockquote { display: block; padding: 5px 0 5px 15px; margin: 0 0 20px; margin: 0 0 1.25rem; line-height: 1.6; border-left: 5px solid #e64946; } blockquote p:last-child { margin: 0; } blockquote footer { text-align: right; } sup, sub { font-size: 10px; font-size: .625rem; font-style: normal; } sup { vertical-align: super; } sub { vertical-align: sub; } abbr[title] { text-decoration: none; cursor: help; border-bottom: 1px dotted #000; } q { font-style: italic; } address { margin-bottom: 20px; margin-bottom: 1.25rem; font-family: "Consolas", Courier New, Courier, monospace; line-height: 1.5; } dl { margin: 0 0 10px 20px; } dt, dd { display: list-item; } dt { font-weight: bold; list-style-type: square; } dd { margin-left: 20px; list-style-type: circle; } select { max-width: 100%; } .warning { padding: 20px 10px; text-align: center; border: 1px solid #ddd; } .warning__icon { margin-bottom: 20px; } /* Header */ .header { background: #fff; } .logo { padding: 25px; } .logo__link { display: inline-block; text-transform: uppercase; } .logo__title { font-size: 32px; font-size: 2rem; font-weight: 700; line-height: 1; color: #000; } .logo__tagline { display: inline-block; padding-top: 10px; margin-top: 10px; font-size: 14px; font-size: .875rem; font-weight: 700; line-height: 1; color: #e64946; border-top: 1px solid #ebebeb; } .divider { height: 5px; margin: 0; background: #e64946; border: 0; } /* Navigation — Responsive-nav.js */ .menu { position: relative; width: 100%; margin: 0 auto; text-transform: uppercase; background: #2a2a2a; } .menu__toggle { display: block; padding: 10px 15px; font-weight: 700; color: #fff; text-align: right; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background: #2a2a2a; -webkit-tap-highlight-color: #000; -webkit-touch-callout: none; } .menu__list { display: block; width: 100%; padding: 0; margin: 0; list-style: none; } .menu__link { display: block; padding: 10px 15px; font-weight: 700; color: #fff; } .menu__link:hover { color: #fff; } .js .menu--collapse { position: absolute; display: block; max-height: 0; overflow: hidden; zoom: 1; } .menu--collapse.opened { max-height: 9999px; } .opened.menu__list { border-top: 1px solid #e64946; } .menu__item:hover { background: #e64946; } .menu__item--active { background: #e64946; } .menu__item:first-child { border: none; } @media screen and (min-width: 767px) { .js .menu { position: relative; } .js .menu.closed { max-height: none; } .menu__toggle { display: none; } .menu { min-height: 42px; border-bottom: 5px solid #e64946; } .menu__item { position: relative; float: left; } .menu__link { border-left: 1px solid rgba(255, 255, 255, .1); } } /* Posts/Pages */ .post__header, .page-header { margin-bottom: 20px; margin-bottom: 1.25rem; } .page-header__title { font-size: 28px; font-size: 1.75rem; } .page-content { margin-bottom: 20px; margin-bottom: 1.25rem; } .meta { font-size: 13px; font-size: .8125rem; vertical-align: baseline; } .meta, .meta a { color: #999; } .meta a:hover { color: #e64946; } .meta .icon { margin-right: 5px; } .icon-time, .icon-category { vertical-align: middle; fill: #c4c4c4; } .meta-categories__list, .meta-date, .meta-lastmod { vertical-align: middle; } .meta-categories { margin-left: 15px; } .post__title { margin: 0; } .post__meta { padding: 5px 0; margin-top: 10px; margin-top: .625rem; border-top: 1px dotted #ebebeb; border-bottom: 1px dotted #ebebeb; } .post__thumbnail { max-width: 1030px; margin: 0 0 20px; margin-bottom: 0 0 1.25rem; } .post__thumbnail img { width: 100%; } .post__content a, .warning a { font-weight: 700; color: #e64946; } .post__content a:hover, .warning a:hover { color: #e64946; text-decoration: underline; } .post__content .alignnone { display: block; margin: 20px 0; margin: 1.25rem 0; } .post__content .aligncenter { display: block; margin: 20px auto; margin: 1.25rem auto; } .post__content .alignleft { display: inline; float: left; margin: 5px 20px 20px 0; margin: .3125rem 1.25rem 1.25rem 0; } .post__content .alignright { display: inline; float: right; margin: 5px 0 20px 20px; margin: .3125rem 0 1.25rem 1.25rem; } .post__content ul { list-style: square; } .post__content ol { list-style: decimal; } .post__content ul, .post__content ol { margin: 0 0 20px 40px; } .post__content ul ul, .post__content ol ol { margin: 0 0 0 40px; } .post__content li { margin-bottom: 5px; } .tags { margin-bottom: 20px; margin-bottom: 1.25rem; font-size: 12px; font-size: .75rem; line-height: 1; color: #fff; } .tags__list { list-style: none; } .tags__item { float: left; margin: 0 6px 6px 0; margin: 0 .375rem .375rem 0; text-transform: uppercase; background: #2a2a2a; } .tags__item:hover { background: #e64946; } .tags__link, .tags__link:hover { display: block; padding: 10px 15px; } .icon-tag { float: left; width: 32px; height: 32px; padding: 8px; margin-right: 6px; background: #e64946; fill: #fff; } /* Table of Contents */ .toc { margin-bottom: 20px; font-weight: 700; color: #7a8288; background: #fff; border-color: #ebebeb; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0; border-left-width: 1px; } .toc__title { padding: 5px 10px; color: #fff; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background: #2a2a2a; } .toc__menu ul { margin: 0; list-style: none; } .toc__menu ul ul ul a { padding-left: 25px; } .toc__menu ul ul ul ul a { padding-left: 45px; } .toc__menu ul ul ul ul ul a { padding-left: 65px; } .toc__menu ul ul ul ul ul ul a { padding-left: 85px; } .toc__menu li { margin: 0; } .toc__menu a { display: block; padding: 5px 10px; color: #e64946; border-bottom: 1px solid #ebebeb; } .toc__menu a:hover { text-decoration: underline; } /* Author Box */ .authorbox { padding: 25px 0; margin-bottom: 25px; line-height: 1.5; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } .authorbox__avatar { float: left; padding: 3px; margin: 0 25px 0 0; border: 1px solid #ebebeb; } .authorbox__header { margin-bottom: 10px; } .authorbox__name { font-size: 16px; font-size: 1rem; font-weight: 700; } /* List content */ .list__item { padding-bottom: 20px; padding-bottom: 1.25rem; margin-bottom: 20px; margin-bottom: 1.25rem; border-bottom: 1px solid #ebebeb; } .list__header { margin-bottom: 10px; margin-bottom: .625rem; } .list__meta { margin-top: 5px; } .list__thumbnail { float: left; margin: 0 20px 0 0; } .list__thumbnail img { width: 100%; max-width: 235px; } .list__footer-readmore { float: right; margin-top: 10px; } /* Pagination */ .pagination { margin-top: 20px; } .pagination__item { display: inline-block; padding: 10px 15px; font-weight: 700; color: #000; background: #f5f5f5; } .pagination__item:hover, .pagination__item--current { color: #fff; background: #e64946; } /* Post Navigation */ .post-nav { padding-top: 25px; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #ebebeb; } .post-nav__caption { display: block; margin-bottom: 5px; overflow: hidden; font-weight: 700; line-height: 1; text-transform: uppercase; } .post-nav__post-title { margin-bottom: 0; overflow: hidden; font-size: 13px; font-size: .8125rem; } .post-nav__item--next { float: right; text-align: right; } .post-nav__link { display: block; } /* Images / Video */ img { width: auto\9; /* ie8 */ max-width: 100%; height: auto; vertical-align: bottom; } iframe, embed, object, video { max-width: 100%; } /* Table */ table { width: 100%; margin-bottom: 20px; margin-bottom: 1.25rem; border-spacing: 0; border-collapse: collapse; border-top: 1px solid #ebebeb; border-left: 1px solid #ebebeb; } td, th { padding: 5px 10px; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } th { font-weight: 700; } /* Forms */ input { padding: 5px; font-size: 12px; vertical-align: middle; background: #f5f5f5; border: 1px solid #ebebeb; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } input[type=text], input[type=email], input[type=tel], input[type=url] { width: 60%; } input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover, input[type=url]:hover, textarea:hover { border: 1px solid #e64946; } input[type=submit] { display: inline-block; min-width: 150px; padding: 10px 15px; font-weight: 700; color: #fff; text-transform: uppercase; cursor: pointer; background: #e64946; border: 0; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; transition: all .1s linear; -webkit-appearance: none; } input[type=submit]:hover { background: #2a2a2a; } textarea { width: 96%; padding: 5px; line-height: 1.5; background: #f5f5f5; border: 1px solid rgba(0, 0, 0, .1); } /* Widgets */ .widget { margin-bottom: 25px; overflow: hidden; } .widget:last-child { margin-bottom: 0; } .widget__title { position: relative; padding-bottom: 5px; font-size: 16px; font-size: 1rem; text-transform: uppercase; border-bottom: 3px solid #e64946; } .widget__item { display: block; padding: 5px 0; border-bottom: 1px dotted #ebebeb; } .widget__item:first-child { padding-top: 0; } /* Search widget */ .widget-search__form { display: block; padding: 5%; margin: 0 auto; background: #f5f5f5; } .widget-search__form .widget-search__submit { display: none; } .widget-search__field { position: relative; display: block; width: 90%; padding: 10px; margin: 0 auto; font-size: 11px; cursor: pointer; background: #fff; border: 1px solid #ebebeb; border-radius: 0; } .widget-search__field:active, .widget-search__field:focus { cursor: text; } /* Social widget */ .widget-social__item { padding: 0; border: 0; } .widget-social__link { display: block; margin: 0 0 8px; white-space: normal; } .widget-social__link-icon { margin: 0 5px 0 0; vertical-align: middle; } /* Tags Widget */ .widget-taglist__link { display: inline-block; margin: 0 4px 8px 0; font-size: 12px; text-transform: uppercase; } /* Footer */ .footer { padding: 10px 25px; font-size: 12px; font-size: .75rem; color: #999; background: #2a2a2a; border-top: 3px solid #999; } .footer__copyright a { color: #fff; } .footer__copyright a:hover { text-decoration: underline; } /*** Media Queries ***/ @media screen and (max-width: 1475px) { .container { width: 95%; } .container-inner { width: 100%; } } @media screen and (max-width: 900px) { .container-outer { margin: 0 auto; } .container { width: 100%; } .wrapper, .logo { padding: 20px; } .widget { margin-bottom: 20px; } .footer__copyright { text-align: center; } } @media screen and (max-width: 767px) { .content, .sidebar, .body .main { float: none; width: 100%; margin: 0; } .logo { text-align: center; } .logo__title { font-size: 24px; font-size: 1.5rem; } .sidebar { margin-top: 20px; } } @media screen and (max-width: 620px) { input[type=text], input[type=email], input[type=tel], input[type=url] { width: 88%; } .meta-categories { display: block; margin-left: 0; } .authorbox { text-align: center; } .authorbox__avatar { display: inline-block; float: none; margin: 0 0 20px; } .post-nav__item { text-align: center; } .post-nav__item--prev { padding-bottom: 25px; } .post__content ul, .post__content ol { margin: 0 0 20px 20px; } .post__content ul ul, .post__content ol ol { margin: 0 0 0 20px; } .list__thumbnail { max-width: 80px; } .list__title { font-size: 16px; font-size: 1rem; } .list__meta { display: block; font-size: 11px; font-size: .6875rem; } }