/* Theme Name: Burger Factory Theme URI: https://anguswoodman.com/wordpress-theme-burger-factory Author: Angus Woodman Author URI: https://anguswoodman.com Description: Burger Factory is a minimalist theme for writers. It puts focus on the words instead of images. Uses excerpts as summaries. Can still be used standard-blog-style. Version: 1.3 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: burger-factory Tags: two-columns, left-sidebar, featured-images, sticky-post, threaded-comments, translation-ready, blog, custom-colors Burger Factory is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Color Schemes # Typography # Layout # Elements # Forms # Sidebar # Navigation ## Links ## Menus # Accessibility # Alignments # Clearings # Widgets # Header / Footer # Content ## Posts and pages ## Comments # Media ## Captions ## Galleries # Grid --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight:500; } dfn { font-style: italic; } h1 { font-size:36px; line-height:40px; margin-top:0px; margin-bottom:8px; font-weight:500; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp, var { font-family: monospace, monospace; font-size: 0.9em; padding:2px 6px; border-radius:2px; margin:0 2px; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight:500; } table { border-spacing: 0; border:1px solid #ccc; border-radius:4px; } thead th{ border-bottom:1px dotted #ddd; } tbody td{ border-left:1px dotted #ddd; } td, th { font-size:14px; padding: 10px 16px; text-align:left; } dt{ font-size:16px; } dd{ font-size:16px; } /*-------------------------------------------------------------- # Color Schemes --------------------------------------------------------------*/ /* DARK */ .color-scheme-dark{ background-color:#3c3c3f; color: #CBCEC9; } .color-scheme-dark #site-wrapper{} .color-scheme-dark.single p.site-description { color: #999; } .color-scheme-dark .site-footer .site-info{ border-top:1px solid #4a4a4a; color:#999; } .color-scheme-dark .theme-by, .color-scheme-dark .theme-by a{ color: #555; } .color-scheme-dark a, .color-scheme-dark a:visited { color: #84bdff; border-bottom:1px solid rgba(59, 100, 117, 0.8); } .color-scheme-dark .sidebar a { color: #d6d6d6; border-bottom:1px solid #555; } .color-scheme-dark .sidebar a:hover { color: #fff; border-bottom:1px solid #fff; } .color-scheme-dark a:hover, .color-scheme-dark a:focus, .color-scheme-dark a:active { color: #fff; border-bottom:1px solid #fff; } .color-scheme-dark .site-title a{ color:#fff; } .color-scheme-dark .entry-list .cat-links{ color:#666; } .color-scheme-dark .entry-list .cat-links a{ border-width:0; color:#888; text-transform:uppercase; } .color-scheme-dark h1, .color-scheme-dark .entry-content h2, .color-scheme-dark .entry-content h3, .color-scheme-dark dt { color:#fff; } .color-scheme-dark .entry-content h4 { color:#ccc; } .color-scheme-dark h2.entry-title a{ color:#fff; border-bottom-color:#666; } .color-scheme-dark h2.entry-title a:hover{ color:#fff; border-bottom-color:#fff; } .color-scheme-dark .entry-list .page-content, .color-scheme-dark .entry-list .entry-content, .color-scheme-dark .entry-list .entry-summary { color:#ddd; } .color-scheme-dark .post-thumbnail img, .color-scheme-dark figure.wp-caption, .color-scheme-dark .entry-content img.size-large { box-shadow: 0 0 28px rgba(0,0,0,0.5); } .color-scheme-dark mark, .color-scheme-dark ins { background: rgba(0,0,0,0.3); text-decoration: none; padding: 6px; } .color-scheme-dark code { background-color:#882424; } .color-scheme-dark kbd, .color-scheme-dark pre, .color-scheme-dark samp, .color-scheme-dark var { background-color:#2f2f2f; } .color-scheme-dark hr { background-color: #444; } .color-scheme-dark button, .color-scheme-dark input, .color-scheme-dark select, .color-scheme-dark textarea { color: #fff; background-color: #2f2f2f; border:1px solid #000; } .color-scheme-light .comment .children{ border-left:1px solid #555; } /* LIGHT */ .color-scheme-light{ background-color:#fff; color: #4a4a4a; } .color-scheme-light #site-wrapper{} .color-scheme-light.single p.site-description { color: #999; } .color-scheme-light .site-footer .site-info{ border-top:1px solid #ddd; color:#999; } .color-scheme-light .theme-by, .color-scheme-light .theme-by a{ color: #ccc; } .color-scheme-light a, .color-scheme-light a:visited { color: #274cce; border-bottom:1px solid #274cce55; } .color-scheme-light .sidebar a { color: #4a4a4a; border-bottom:1px solid #4a4a4a33; } .color-scheme-light .sidebar a:hover, .color-scheme-light .sidebar a:focus, .color-scheme-light .sidebar a:active, .color-scheme-light a:hover, .color-scheme-light a:focus, .color-scheme-light a:active { border-bottom:1px solid #274cce; } .color-scheme-light .site-title a{ color:#4a4a4a; } .color-scheme-light .entry-list .cat-links{ color:#aaa; } .color-scheme-light .entry-list .cat-links a{ border-width:0; color:#888; text-transform:uppercase; } .color-scheme-light h1, .color-scheme-light .entry-content h2, .color-scheme-light .entry-content h3, .color-scheme-light dt { color:#2f2f2f; } .color-scheme-light .entry-content h4 { color:#2f2f2f; } .color-scheme-light h2.entry-title a{ color:#2f2f2f; border-bottom-color:#2f2f2f33; } .color-scheme-light h2.entry-title a:hover{ color:#000; border-bottom-color:#2f2f2f99; } .color-scheme-light .entry-list .page-content, .color-scheme-light .entry-list .entry-content, .color-scheme-light .entry-list .entry-summary { color:#4a4a4a; } .color-scheme-light .post-thumbnail img, .color-scheme-light figure.wp-caption, .color-scheme-light .entry-content img.size-large { box-shadow: 0 0 28px rgba(0,0,0,0.2); } .color-scheme-light mark, .color-scheme-light ins { background: rgba(0,0,0,0.3); text-decoration: none; padding: 6px; } .color-scheme-light code { background-color:#f7c7c7; } .color-scheme-light kbd, .color-scheme-light pre, .color-scheme-light samp, .color-scheme-light var { background-color:#cacaca; } .color-scheme-light hr { background-color: #c3c3c9; } .color-scheme-light input, .color-scheme-light select, .color-scheme-light textarea { color: #4a4a4a; background-color: #ffffff; border:1px solid rgb(218, 218, 218); } .color-scheme-light div div .button{ background-color: #4a4a4a; color:#ffffff; } .color-scheme-light div div .button:hover{ background-color: #2f2f2f; color:#fff; } .color-scheme-light .comment .children{ border-left:1px solid #ddd; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body { font-family: 'Roboto', sans-serif; font-weight:400; font-size: 16px; line-height: 1.5; } h1, h2, h3, h4, h5, h6, p.site-title, p.site-description { clear: both; font-weight:500; } p { margin-bottom: 1.5em; } button, input, select, textarea { font-size: 16px; font-size: 1rem; line-height: 1.5; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 14px; font-size: 0.9em; } abbr, acronym { cursor: help; } mark, ins { text-decoration: none; } big { font-size: 125%; } pre{ padding:2px 6px; border-top-left-radius:4px; border-top-right-radius:4px; margin:0 2px; } /*-------------------------------------------------------------- # Layout --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } blockquote{ quotes: "" ""; border-left:2px solid #ccc; padding-left:20px; margin-left:20; font-size:16px; } q { quotes: "" ""; font-size: 18px; font-style: italic; } p .cite{ } q:before, q:after { content: "\""; } hr { border: 0; height: 1px; margin-bottom: 1.5em; } table{ } ul, ol { margin: 0 0 1.5em 0px; padding-left:24px; } ul ul, ul ol, ol ul, ol ol{ padding-left:24px; } ul { list-style: disc; } ol { list-style: decimal; } .entry-content li{ margin-bottom:18px; } li > ul, li > ol { margin-bottom: 0; margin-left:0px; } dt { font-weight:500; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } table { margin: 0 0 1.5em; width: 100%; } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { border: 0px solid; border-radius: 3px; font-weight:400; font-size: 16px; line-height: 1; padding: 10px 12px; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: #444; } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background-color: #444; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { border-radius: 3px; padding: 10px 12px 4px 15px; } textarea { width: 100%; } .search-form input{ margin-bottom:10px; max-width:100%; } /*-------------------------------------------------------------- # Sidebar --------------------------------------------------------------*/ .sidebar { padding:0px 0 0px 0px; } .sidebar ul, .sidebar ol { margin: 0 0 1.5em 0px; padding-left:0px; } .sidebar #wp-calendar td, .sidebar #wp-calendar th { padding: 0; text-align: center; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { text-decoration:none; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /* Hides the link border under the image */ p a img{ margin-bottom:-11px; } nav .current_page_item>a, nav .current-menu-item>a{ border-bottom-width:0 !important; font-weight:500; } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-navigation { margin-bottom:30px; font-size:16px; } .main-navigation ul { list-style: none; margin: 0; color:#ddd; } .main-navigation ul ul{ padding-left:10px; } .menu ul>li { margin-top:10px; } .menu li{ margin-top:8px; } .menu>ul>li { position: relative; margin-top:0; margin-bottom:10px; } .menu li ul li{ font-size: 14px; line-height: 22px; } @media only screen and (max-width: 720px) { .main-navigation { margin-bottom:24px !important; } .single .main-navigation{ border-bottom:1px solid #ddd; padding-bottom:24px; } .main-navigation li { display:inline-block; margin-right:10px; } .sidebar{ margin-bottom:0 !important; } .site-header{ margin-bottom:0 !important; } } .sidebar a, .sidebar p { text-decoration: none; font-weight: 300; } .main-navigation ul ul { } .main-navigation ul ul ul { } .main-navigation ul ul a { } .main-navigation ul ul li { } .main-navigation li:hover > a, .main-navigation li.focus > a { } .main-navigation ul ul :hover > a, .main-navigation ul ul .focus > a { } .main-navigation ul ul a:hover, .main-navigation ul ul a.focus { } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a { } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: block; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 24px 0; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { margin-bottom:20px; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { } .comment-navigation .nav-previous::after, .posts-navigation .nav-previous::after, .post-navigation .nav-previous::after, .comment-navigation .nav-next::after, .posts-navigation .nav-next::after, .post-navigation .nav-next::after { display:block; text-transform:uppercase; color:#999; font-size:12px; font-weight:500; } .posts-navigation .nav-previous { float:right; } .posts-navigation .nav-next { float:left; } .post-navigation .nav-previous::after { content: "Previous"; } .post-navigation .nav-next::after { content: "Next"; } .nav-links { } .nav-links a{ } a.more-link{ font-size:14px; } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight:500; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- # Header / Footer --------------------------------------------------------------*/ .site-header{ margin:24px 0 24px 0px; } .site-title{ margin-top:0; margin-bottom:0; font-size:20px; font-weight:500; line-height:1.5; } body .site-title a{ border-width:0; } .single p.site-title a{ } p.site-description{ margin:0; font-size:14px; display:inline-block; font-weight:400; } .single p.site-description { } .site-footer{ font-size:12px; margin: 60px 0 20px; } .site-footer .site-info{ padding-top:10px; font-size:11px; } .site-footer .site-info a{ border:0; font-size:11px; } .not-found h1{ margin-top:0; } .theme-by { margin-top:60px; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { font-weight:100; } .widget, .main-navigation{ margin: 0 0 4em 0; } /* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } .widget h2{ color:#666; font-weight:normal; font-size:16px; text-transform:uppercase; } .widget ul, .widget .menu{ margin:0; padding:0; } .widget li{ list-style:none; margin:10px 0; padding:0; } .post .after-entry-widgets{ margin:40px 0 100px; max-width:400px; } .after-entry-widgets h4{ } .subscribe-email input{ font-size:16px; line-height:18px; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Front pages --------------------------------------------------------------*/ .front-page-category-lists{ margin-top:120px; } .front-page-category { font-size:14px; text-transform:uppercase; margin:0px; margin-bottom:40px; } .entry-list .hentry { margin-bottom:60px; } .entry-list .entry-title { font-size:24px; margin-bottom:14px; line-height:1.4em; margin-top: 0; } .entry-list .cat-links a{ border-width:0; text-transform:uppercase; } .entry-list .page-content, .entry-list .entry-content, .entry-list .entry-summary { font-size: 18px; line-height: 1.5; margin: -10px 0 0; } ul.entry-list-condensed { padding:0; margin:20px 0 60px; } .front-page-category-lists ul.entry-list-condensed { margin-top:10px; } ul.entry-list-condensed li{ list-style-type:none; line-height:1.6em; margin:14px 0; font-size:18px; font-weight:400; } ul.entry-list-condensed li:first-child{ margin:0px 0; } ul.entry-list-condensed li a{ } ul.entry-list-condensed li ul{ margin:12px 0; padding-left:40px; } .entry-list-condensed-meta{ font-size:12px; font-weight:500; white-space:pre; color:#999; text-transform:uppercase; } .entry-list-condensed-meta a{ font-size:12px; font-weight:500; white-space:pre; color:#999; text-transform:uppercase; border:0; } .entry-list .entry-meta{ font-size:14px; } /*-------------------------------------------------------------- ## Archive pages --------------------------------------------------------------*/ .archive-entry-list .entry-title{ } /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; border-left-width: 2px; border-left-style: solid; padding: 0px 0 0px 24px; } .hentry { margin: 0 0 1.5em; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { font-size: 18px; line-height: 1.5; margin: 1.5em 0 0; } .entry-content{ margin-top:0px; } .page-links { clear: both; margin: 0 0 1.5em; } .post-thumbnail img{ border-radius:4px; margin-bottom:36px; } .entry-title{ } .entry-content ul, .entry-content ol{ margin-left:20px; } .page .entry-title{ margin-top:-4px; } .single .entry-meta{ margin: 0px 0 30px; font-size: 12px; } .single .entry-meta, .single .entry-meta a{ text-decoration:none; border:0; font-weight:500; } .single .posted-on{ float:right; } .intro{ font-size:22px; line-height:1.4em; font-weight: 300; } .entry-content h2 { margin-top:52px; font-size:32px; } .entry-content h3 { margin-top:48px; font-size:28px; } .entry-content h4 { margin-top:36px; font-size:22px; } .tag-links{ font-size:12px; text-transform:uppercase; font-weight:500; color:#999; } .tag-links a{ color:#999; } .edit-link{ display:none; } div div.sharedaddy{ } div div.sharedaddy h3.sd-title{ display:none; } .post .entry-footer{ padding: 0px 0 60px 0; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } ul.comment-list{ list-style-type:none; margin:0 0 0px 0; padding:0; } li.comment{ margin:0 0 60px 0 ; padding:0; } .comment-meta a{ border:0; } .comment-metadata a{ font-size:12px; color:#999; } .comment .avatar{ float:right; position:relative; top:4px; } .comment-content{ font-size:14px; } a.comment-reply-link{ font-size:14px; } .no-comments { margin-bottom:60px; font-size:14px; color:#999; } .comment .children{ margin-top:24px; padding-left:10px; margin-left:10px; } .comment .children li{ list-style-type:none; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { background-color:#4A4A4A; color:#ccc; border-radius:4px; margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { padding: 18px; } .wp-caption-text { font-size:14px; padding:0 10px; text-align: center; } .wp-caption-text a{ color:#fff; } .wp-caption-text a:hover, .wp-caption-text a:active{ border-bottom:1px solid #fff; } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /*-------------------------------------------------------------- # Error --------------------------------------------------------------*/ .error-404 h1{ margin-top:0; } /*-------------------------------------------------------------- # Grid --------------------------------------------------------------*/ .container { width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 720px) { .container { width: 94%; margin-left: auto; margin-right: auto; } } .row { position: relative; width: 100%; } .row [class^="col"] { float: left; margin: 0.5rem 2%; min-height: 0.125rem; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 96%; } .col-1-sm { width: 4.33%; } .col-2-sm { width: 12.66%; } .col-3-sm { width: 21%; } .col-4-sm { width: 29.33%; } .col-5-sm { width: 37.66%; } .col-6-sm { width: 46%; } .col-7-sm { width: 54.33%; } .col-8-sm { width: 62.66%; } .col-9-sm { width: 71%; } .col-10-sm { width: 79.33%; } .col-11-sm { width: 87.66%; } .col-12-sm { width: 96%; } .row::after { content: ""; display: table; clear: both; } .hidden-sm { display: none; } @media only screen and (min-width: 33.75em) { /* 540px */ .container { width: 80%; } } @media only screen and (min-width: 45em) { /* 720px */ .col-1 { width: 4.33%; } .col-2 { width: 12.66%; } .col-3 { width: 21%; } .col-4 { width: 29.33%; } .col-5 { width: 37.66%; } .col-6 { width: 46%; } .col-7 { width: 54.33%; } .col-8 { width: 62.66%; } .col-9 { width: 71%; } .col-10 { width: 79.33%; } .col-11 { width: 87.66%; } .col-12 { width: 96%; } .hidden-sm { display: block; } } @media only screen and (min-width: 60em) { /* 960px */ .container { width: 75%; max-width: 60rem; } }