James Peret's blog. Built with Jekyll and the Mikey theme.

main.css 49KB

    /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, 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: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } 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 { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } 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"] { -webkit-box-sizing: border-box; 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-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; } 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: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } .animate { -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .scaleIn { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } /* Setup */ html { /* Change default typefaces here */ font-family: "Source Serif Pro", serif; font-size: 137.5%; font-weight: 400; color: rgba(0, 0, 0, 0.8); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; } /* Copy & Lists */ p { line-height: 1.5rem; letter-spacing: .01rem; margin-top: 1.5rem; margin-bottom: 0; } p.u--startsWithDoubleQuote { text-indent: -0.43em; } ul, ol { margin-top: 1.5rem; margin-bottom: 1.5rem; padding-left: 22px; } ul li, ol li { line-height: 1.5rem; } ul ul, ul ol, ol ul, ol ol { margin-top: 0; margin-bottom: 0; } blockquote { line-height: 1.5rem; font-style: italic; padding-left: 25px; margin-left: -29px; border-left: 4px solid #222; } @media (max-width: 767px) { blockquote { padding-left: 15px; margin-left: -19px; } } blockquote.u--startsWithDoubleQuote { text-indent: -0.40em; } blockquote.largeQuote { line-height: 1.4; text-align: center; font-size: 1.777rem; margin: 1.5rem -160px 0; padding-left: 0; border-left: 0; } @media (max-width: 767px) { blockquote.largeQuote { margin: 1.5rem 0 0; font-size: 1.333rem; padding-left: 0; } } blockquote.largeQuote a { background-position: 0 42px; } /* Headings */ h1, h2, h3, h4, h5, h6 { /* Change heading typefaces here */ font-family: "PT Sans", sans-serif; margin-top: 1.5rem; margin-bottom: 0; line-height: 1.5rem; letter-spacing: -0.02em; } h1 { font-size: 3.999rem; line-height: 4.5rem; margin-top: 3rem; } h2 { font-family: "Roboto", sans-serif; font-size: 2.666rem; line-height: 3rem; margin-top: 3rem; font-weight: 300; } h3 { /* font-size: 1.33 * $scale * 1rem; line-height: 1.34 * $leading; margin-top: 1.33 * $leading; */ font-size: 1.777rem; line-height: 2.18rem; margin-top: 1.7rem; } h4 { font-size: 1.333rem; } h5 { font-size: 1.0664rem; } h6 { font-size: 0.9331rem; } a { color: rgba(0, 0, 0, 0.8); text-decoration: none; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%, transparent), color-stop(75%, rgba(0, 0, 0, 0.8))); background-image: linear-gradient(to bottom, transparent 75%, rgba(0, 0, 0, 0.8) 75%); background-repeat: repeat-x; background-position: 0 22px; background-size: 2px 2px; } a:hover { color: rgba(0, 0, 0, 0.8); } /* Tables */ table { margin-top: 1.5rem; border-spacing: 0px; border-collapse: collapse; } td, th { padding: 0; line-height: 33px; } /* Code blocks */ code { vertical-align: bottom; } hr { border-color: #d5d5d5; padding: 0; border-top: 0; border-left: 0; border-right: 0; margin: 1.5rem 0; } /* Leading paragraph text */ .lead { font-size: 1.333rem; } /* Hug a the block above you */ .hug { margin-top: 0; } .container--content { max-width: 700px; } .is-darkBackgrounded, .is-darkBackgrounded a, .is-darkBackgrounded a:hover, .is-darkBackgrounded a:visited { color: #fff; } .img { margin-top: 1.5rem; background-repeat: no-repeat; background-position: center center; background-size: cover; } .img--fullContainer img { width: 100%; } .img--5xLeading { height: 7.5rem; } .img--6xLeading { height: 9rem; } .img--7xLeading { height: 10.5rem; } .img--8xLeading { height: 12rem; } .img--9xLeading { height: 13.5rem; } .img--10xLeading { height: 15rem; } .img--11xLeading { height: 16.5rem; } .img--12xLeading { height: 18rem; } .img--13xLeading { height: 19.5rem; } .img--14xLeading { height: 21rem; } .img--15xLeading { height: 22.5rem; } .img--16xLeading { height: 24rem; } html, body { overflow-x: hidden; } @media (max-width: 767px) { html, body { padding-right: 0; } } .brandLogo { background-image: url(../images/logo-white.svg); background-size: contain; background-repeat: no-repeat; background-position: 0 0; padding: 0; text-indent: -100em; overflow: hidden; } .brandLogo--small { width: 44px; height: 44px; } .brandLogo--black { background-image: url(../images/logo-black.svg); } .textLogo { display: block; background-image: url(../images/logo-text-black.svg); background-size: contain; background-repeat: no-repeat; background-position: 0 0; padding: 0; text-indent: -100em; overflow: hidden; } .textLogo--white { background-image: url(../images/logo-text-white.svg); } .textLogo--sidebar { width: 100%; height: auto; background-size: contain; background-position: center; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .textLogo--sidebar:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .textLogo--frontpage { position: absolute; top: 132px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 500; margin: 0; width: 300px; height: 50px; background-size: 100%; background-position: 0; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } @media (max-width: 767px) { .textLogo--frontpage { width: 300px; height: 34px; top: 148px; } } * { -webkit-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .container:before, .container:after { content: " "; display: table; } .container:after { clear: both; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .container-fluid:before, .container-fluid:after { content: " "; display: table; } .container-fluid:after { clear: both; } .row { margin-left: -15px; margin-right: -15px; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-1 { width: 8.33333%; } .col-xs-2 { width: 16.66667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333%; } .col-xs-5 { width: 41.66667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333%; } .col-xs-8 { width: 66.66667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333%; } .col-xs-11 { width: 91.66667%; } .col-xs-12 { width: 100%; } .col-xs-pull-0 { right: auto; } .col-xs-pull-1 { right: 8.33333%; } .col-xs-pull-2 { right: 16.66667%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-4 { right: 33.33333%; } .col-xs-pull-5 { right: 41.66667%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-7 { right: 58.33333%; } .col-xs-pull-8 { right: 66.66667%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-10 { right: 83.33333%; } .col-xs-pull-11 { right: 91.66667%; } .col-xs-pull-12 { right: 100%; } .col-xs-push-0 { left: auto; } .col-xs-push-1 { left: 8.33333%; } .col-xs-push-2 { left: 16.66667%; } .col-xs-push-3 { left: 25%; } .col-xs-push-4 { left: 33.33333%; } .col-xs-push-5 { left: 41.66667%; } .col-xs-push-6 { left: 50%; } .col-xs-push-7 { left: 58.33333%; } .col-xs-push-8 { left: 66.66667%; } .col-xs-push-9 { left: 75%; } .col-xs-push-10 { left: 83.33333%; } .col-xs-push-11 { left: 91.66667%; } .col-xs-push-12 { left: 100%; } .col-xs-offset-0 { margin-left: 0%; } .col-xs-offset-1 { margin-left: 8.33333%; } .col-xs-offset-2 { margin-left: 16.66667%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-4 { margin-left: 33.33333%; } .col-xs-offset-5 { margin-left: 41.66667%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-7 { margin-left: 58.33333%; } .col-xs-offset-8 { margin-left: 66.66667%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-10 { margin-left: 83.33333%; } .col-xs-offset-11 { margin-left: 91.66667%; } .col-xs-offset-12 { margin-left: 100%; } @media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-sm-1 { width: 8.33333%; } .col-sm-2 { width: 16.66667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333%; } .col-sm-5 { width: 41.66667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333%; } .col-sm-8 { width: 66.66667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333%; } .col-sm-11 { width: 91.66667%; } .col-sm-12 { width: 100%; } .col-sm-pull-0 { right: auto; } .col-sm-pull-1 { right: 8.33333%; } .col-sm-pull-2 { right: 16.66667%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-4 { right: 33.33333%; } .col-sm-pull-5 { right: 41.66667%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-7 { right: 58.33333%; } .col-sm-pull-8 { right: 66.66667%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-10 { right: 83.33333%; } .col-sm-pull-11 { right: 91.66667%; } .col-sm-pull-12 { right: 100%; } .col-sm-push-0 { left: auto; } .col-sm-push-1 { left: 8.33333%; } .col-sm-push-2 { left: 16.66667%; } .col-sm-push-3 { left: 25%; } .col-sm-push-4 { left: 33.33333%; } .col-sm-push-5 { left: 41.66667%; } .col-sm-push-6 { left: 50%; } .col-sm-push-7 { left: 58.33333%; } .col-sm-push-8 { left: 66.66667%; } .col-sm-push-9 { left: 75%; } .col-sm-push-10 { left: 83.33333%; } .col-sm-push-11 { left: 91.66667%; } .col-sm-push-12 { left: 100%; } .col-sm-offset-0 { margin-left: 0%; } .col-sm-offset-1 { margin-left: 8.33333%; } .col-sm-offset-2 { margin-left: 16.66667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.33333%; } .col-sm-offset-5 { margin-left: 41.66667%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-7 { margin-left: 58.33333%; } .col-sm-offset-8 { margin-left: 66.66667%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-10 { margin-left: 83.33333%; } .col-sm-offset-11 { margin-left: 91.66667%; } .col-sm-offset-12 { margin-left: 100%; } } @media (min-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .col-md-1 { width: 8.33333%; } .col-md-2 { width: 16.66667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333%; } .col-md-5 { width: 41.66667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333%; } .col-md-8 { width: 66.66667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333%; } .col-md-11 { width: 91.66667%; } .col-md-12 { width: 100%; } .col-md-pull-0 { right: auto; } .col-md-pull-1 { right: 8.33333%; } .col-md-pull-2 { right: 16.66667%; } .col-md-pull-3 { right: 25%; } .col-md-pull-4 { right: 33.33333%; } .col-md-pull-5 { right: 41.66667%; } .col-md-pull-6 { right: 50%; } .col-md-pull-7 { right: 58.33333%; } .col-md-pull-8 { right: 66.66667%; } .col-md-pull-9 { right: 75%; } .col-md-pull-10 { right: 83.33333%; } .col-md-pull-11 { right: 91.66667%; } .col-md-pull-12 { right: 100%; } .col-md-push-0 { left: auto; } .col-md-push-1 { left: 8.33333%; } .col-md-push-2 { left: 16.66667%; } .col-md-push-3 { left: 25%; } .col-md-push-4 { left: 33.33333%; } .col-md-push-5 { left: 41.66667%; } .col-md-push-6 { left: 50%; } .col-md-push-7 { left: 58.33333%; } .col-md-push-8 { left: 66.66667%; } .col-md-push-9 { left: 75%; } .col-md-push-10 { left: 83.33333%; } .col-md-push-11 { left: 91.66667%; } .col-md-push-12 { left: 100%; } .col-md-offset-0 { margin-left: 0%; } .col-md-offset-1 { margin-left: 8.33333%; } .col-md-offset-2 { margin-left: 16.66667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.33333%; } .col-md-offset-5 { margin-left: 41.66667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.33333%; } .col-md-offset-8 { margin-left: 66.66667%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333%; } .col-md-offset-11 { margin-left: 91.66667%; } .col-md-offset-12 { margin-left: 100%; } } @media (min-width: 1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-lg-1 { width: 8.33333%; } .col-lg-2 { width: 16.66667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333%; } .col-lg-5 { width: 41.66667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333%; } .col-lg-8 { width: 66.66667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333%; } .col-lg-11 { width: 91.66667%; } .col-lg-12 { width: 100%; } .col-lg-pull-0 { right: auto; } .col-lg-pull-1 { right: 8.33333%; } .col-lg-pull-2 { right: 16.66667%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-4 { right: 33.33333%; } .col-lg-pull-5 { right: 41.66667%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-7 { right: 58.33333%; } .col-lg-pull-8 { right: 66.66667%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-10 { right: 83.33333%; } .col-lg-pull-11 { right: 91.66667%; } .col-lg-pull-12 { right: 100%; } .col-lg-push-0 { left: auto; } .col-lg-push-1 { left: 8.33333%; } .col-lg-push-2 { left: 16.66667%; } .col-lg-push-3 { left: 25%; } .col-lg-push-4 { left: 33.33333%; } .col-lg-push-5 { left: 41.66667%; } .col-lg-push-6 { left: 50%; } .col-lg-push-7 { left: 58.33333%; } .col-lg-push-8 { left: 66.66667%; } .col-lg-push-9 { left: 75%; } .col-lg-push-10 { left: 83.33333%; } .col-lg-push-11 { left: 91.66667%; } .col-lg-push-12 { left: 100%; } .col-lg-offset-0 { margin-left: 0%; } .col-lg-offset-1 { margin-left: 8.33333%; } .col-lg-offset-2 { margin-left: 16.66667%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.33333%; } .col-lg-offset-5 { margin-left: 41.66667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.33333%; } .col-lg-offset-8 { margin-left: 66.66667%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.33333%; } .col-lg-offset-11 { margin-left: 91.66667%; } .col-lg-offset-12 { margin-left: 100%; } } .sidebar { width: 14rem; visibility: hidden; padding: 30px 20px; font-family: "Roboto", sans-serif; font-size: 1rem; background-color: #222222; z-index: 900; overflow-x: hidden; overflow-y: scroll; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-overflow-scrolling: touch !important; } .sidebar::-webkit-scrollbar { width: 12px; } .sidebar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } .sidebar::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } .sidebar--left { position: fixed; top: 0; bottom: 0; left: -14rem; } .sidebar--right { position: fixed; top: 0; bottom: 0; right: -14rem; } .postWrapper, .sidebar, .sidebar-toggle { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .sidebar-checkbox { display: none; } .sidebar-toggle-wrapper { position: fixed; z-index: 500; top: 30px; right: 3%; width: 44px; height: 44px; overflow: hidden; text-indent: 100%; white-space: nowrap; cursor: pointer; border-radius: 99px; background-color: #fff; } .sidebar-toggle-wrapper:hover .sidebar-toggle { background-color: #666; } .sidebar-toggle { position: absolute; z-index: 600; top: 48%; left: 50%; margin-left: -10px; display: block; width: 20px; height: 2px; background: #222; /* background-color: transparent; border-radius: 4px; */ -webkit-transition: background 0.3s; transition: background 0.3s; } .sidebar-toggle:before, .sidebar-toggle:after { content: ''; position: absolute; left: 0; background: inherit; width: 100%; height: 100%; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s, background 0s; transition: transform 0.5s, background 0s; } .sidebar-toggle:before { top: -6px; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .sidebar-toggle:after { bottom: -6px; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } /* .sidebar-toggle--black { background: $black; } */ /* #sidebar-checkbox:checked ~ .postWrapper, */ #sidebar-checkbox:checked ~ .sidebar, #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper { -webkit-transform: translateX(-14rem); -ms-transform: translateX(-14rem); transform: translateX(-14rem); } .sidebar-toggle:active, #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper { position: fixed; background-color: rgba(34, 34, 34, 0.8); } #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper .sidebar-toggle { background: transparent; } #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper .sidebar-toggle:before, #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper .sidebar-toggle:after { background: #fff; } #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper .sidebar-toggle:before { top: 0; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper .sidebar-toggle:after { bottom: 0; -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } #sidebar-checkbox:checked ~ .sidebar { visibility: visible; } .postWrapper, .sidebar-toggle-wrapper { -webkit-transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; } .sidebar-recentPosts { list-style: none; margin: 1.5rem 0 0; padding: 0; font-size: 0.75rem; } .sidebar-recentPosts a, .sidebar-recentPosts a:hover { text-decoration: none; background-image: none; } .sidebar-recentPosts a { display: block; letter-spacing: 0.05rem; font-weight: 700; line-height: 1.5; color: rgba(255, 255, 255, 0.8); } .sidebar-recentPosts a:hover { color: white; } .sidebar-recentPosts li { list-style: none; margin-bottom: 1.5rem; } .sidebar-recentPosts .postMeta { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); } .sidebar-recentPosts-image-wrapper { display: block; width: 100%; height: 4.5rem; background: #333; overflow: hidden; margin-bottom: 15px; } .sidebar-recentPosts-image-wrapper img { min-height: 4.5rem; width: 150%; height: auto; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .menuWrapper { position: absolute; z-index: 500; top: 30px; left: 3%; } .menuWrapper ul { list-style: none; position: relative; float: left; margin: 0; padding: 0; } .menuWrapper ul li { position: relative; float: left; list-style: none; margin: 0; padding: 0; } .menuWrapper ul a { display: block; color: #333; text-decoration: none; padding: 0 15px; } .menuWrapper ul ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; padding: 0; } .menuWrapper ul li:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .menuWrapper ul li:hover > ul { display: block; } .list--avatarMenu .list-item { float: none; width: 200px; } .list--avatarMenu a { padding: 10px 15px; } .section--first { width: 100%; top: 0; position: relative; color: #222; } .section--first, .section-backgroundImage { height: 28.5rem; } @media (max-width: 767px) { .section--first, .section-backgroundImage { height: 21rem; } } .section--frontpage, .section--frontpage ~ .post-featuredImage { height: 18rem; } @media (max-width: 767px) { .section--frontpage, .section--frontpage ~ .post-featuredImage { height: 7.5rem; } } .section--about, .section-backgroundImage, .section--about ~ .post-featuredImage { height: 36rem; } @media (max-width: 767px) { .section--about, .section-backgroundImage, .section--about ~ .post-featuredImage { height: 30rem; } } .section-backgroundImage { position: absolute; display: block; width: 100%; background: #333; top: 0; z-index: -200; overflow: hidden; } .section-backgroundImage .post-featuredImage { min-width: 100%; min-height: 28.5rem; width: 2000px; height: auto; position: fixed; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition-property: opacity, left, top, width; -webkit-transition-duration: 1s, .1s, .1s, .1s; -webkit-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -webkit-transition-delay: 0; -moz-transition-property: opacity, left, top, width; -moz-transition-duration: 1s, .1s, .1s, .1s; -moz-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -moz-transition-delay: 0; -ms-transition-property: opacity, left, top, width; -ms-transition-duration: 1s, .1s, .1s, .1s; -ms-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -ms-transition-delay: 0; -o-transition-property: opacity, left, top, width; -o-transition-duration: 1s, .1s, .1s, .1s; -o-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -o-transition-delay: 0; -webkit-transition-property: opacity, left, top, width; transition-property: opacity, left, top, width; -webkit-transition-duration: 1s, .1s, .1s, .1s; transition-duration: 1s, .1s, .1s, .1s; -webkit-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -transition-delay: 0; } .section-backgroundImage .post-featuredImage.is-loaded { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .section-backgroundImage--previousPage img { position: relative; } .section-gradient:before, .section-gradient:after { content: ''; height: 100%; width: 100%; top: 0; left: 0; position: absolute; z-index: -100; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } .section-gradient:before { background: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0.8)), to(rgba(51, 51, 51, 0))); background: linear-gradient(to bottom, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0) 100%); } .section-gradient:after { background: rgba(51, 51, 51, 0.6); } .section-gradient--darker:before, .section-gradient--darker:after { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .section-gradient--lighter:before, .section-gradient--lighter:after { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; } .section-title { z-index: 100; text-align: center; } .section-title h2, .section-title h4 { margin-top: 0; } @media (max-width: 767px) { .section-title h2 { font-size: 1.777rem; line-height: 1.5; } } .postMeta-wrapper { margin-top: 1.5rem; display: inline-block; } .postMeta-wrapper--frontpage { position: absolute; display: inherit; top: 165px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 500; } .postMeta-wrapper--frontpage .postMeta-tagline { font-weight: 300; letter-spacing: 0.04rem; color: #777777; text-transform: none; line-height: 0.5rem; } @media (max-width: 767px) { .postMeta-wrapper--frontpage .postMeta-tagline { width: 100%; } } @media (max-width: 767px) { .postMeta-wrapper--frontpage { width: 300px; top: 160px; } } .postMeta { list-style: none; margin: 0; padding: 0; } .postMeta li { float: left; margin: 0; padding: 0 0 0 10px; font-family: "Roboto", sans-serif; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; } .postMeta li:after { content: ''; display: inline-block; width: 4px; height: 4px; overflow: hidden; margin-left: 4px; border-radius: 100%; margin-bottom: 2px; background-color: rgba(255, 255, 255, 0.6); } .postMeta li:last-child:after { display: none; } .postMeta li:first-child { padding-left: 0; } @media (max-width: 767px) { .postMeta li { font-size: 0.563rem; } } .postWrapper { position: relative; width: 100%; z-index: 400; -webkit-transition: padding 100ms cubic-bezier(0.565, 1, 0.765, 0.88); -webkit-transition: padding 100ms cubic-bezier(0.565, 1.65, 0.765, 0.88); transition: padding 100ms cubic-bezier(0.565, 1.65, 0.765, 0.88); } @media (max-width: 767px) { .postWrapper { overflow-y: hidden; } } .meta { margin-bottom: 3rem; } .section--postsWrapper { width: 100%; background: #f2f2f2; padding-top: 0; position: relative; clear: both; z-index: 400; } .blockGroup { margin: 0; padding: 0; } .blockGroup-list { list-style: none; padding: 0; margin-top: -4.5rem; margin-left: -10px; margin-right: -10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; clear: both; } .blockGroup-list li { padding: 0 10px; } .blockGroup-list .block { display: block; width: 25%; margin-bottom: 1.5rem; font-family: "Roboto", sans-serif; display: -webkit-flex; display: -ms-flexbox; display: -webkit-box; display: flex; } @media (max-width: 767px) { .blockGroup-list .block { width: 100%; } } .blockGroup-list li:nth-child(1).block { width: 100%; } .blockGroup-list li:nth-child(1).block .postArticle-image { padding-top: 30%; } @media (max-width: 767px) { .blockGroup-list li:nth-child(1).block .postArticle-image { padding-top: 50%; } } .blockGroup-list li:nth-child(1).block .postArticle-title { font-size: 1rem; } .blockGroup-list li:nth-child(2).block, .blockGroup-list li:nth-child(3).block { width: 50%; } .blockGroup-list li:nth-child(2).block .postArticle-image, .blockGroup-list li:nth-child(3).block .postArticle-image { padding-top: 50%; } .blockGroup-list li:nth-child(2).block .postArticle-title, .blockGroup-list li:nth-child(3).block .postArticle-title { font-size: 1rem; } @media (max-width: 767px) { .blockGroup-list li:nth-child(2).block, .blockGroup-list li:nth-child(3).block { width: 100%; } } .blockGroup-list li .postArticle-title { font-size: 0.75rem; line-height: 1.5; } .blockGroup-list .postArticle-wrapper { position: relative; background: #fff; width: 100%; padding-bottom: 3rem; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .blockGroup-list .postArticle-wrapper:hover { -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.2); } .blockGroup-list .postArticle a { color: #222; background: transparent; } .blockGroup-list .postArticle-title { display: block; margin-top: 0.75rem; font-weight: 300; } .blockGroup-list .postArticle-image { background-size: cover; background-position: center; padding-top: 100%; -webkit-transition-property: all, left, top, width; -webkit-transition-duration: .5s, .1s, .1s, .1s; -webkit-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -webkit-transition-delay: 0; -moz-transition-property: all, left, top, width; -moz-transition-duration: .5s, .1s, .1s, .1s; -moz-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -moz-transition-delay: 0; -ms-transition-property: all, left, top, width; -ms-transition-duration: .5s, .1s, .1s, .1s; -ms-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -ms-transition-delay: 0; -o-transition-property: all, left, top, width; -o-transition-duration: .5s, .1s, .1s, .1s; -o-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); -o-transition-delay: 0; -webkit-transition-property: all, left, top, width; transition-property: all, left, top, width; -webkit-transition-duration: .5s, .1s, .1s, .1s; transition-duration: .5s, .1s, .1s, .1s; -webkit-transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.33, 0, 0.2, 1); } @media (max-width: 767px) { .blockGroup-list .postArticle-image { padding-top: 50%; } } .blockGroup-list .block-postMeta { position: absolute; bottom: 0; padding-bottom: 10px; color: #ccc; font-size: 16px; text-transform: uppercase; } .blockGroup-list .postArticle-title, .blockGroup-list .block-postMeta { padding-left: 15px; padding-right: 15px; } .desaturate { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -moz-filter: contrast(1.5) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); -webkit-filter: contrast(1.5) grayscale(100%); filter: gray; filter: contrast(1.5) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); } .block:hover .desaturate { -webkit-filter: none; filter: none; } .section--subscribe { width: 100%; background: #fff; padding: 1.5rem 0 0; position: relative; z-index: 400; } .section--subscribe h3 { margin-top: 1.5rem; } .newsletterForm-wrapper { padding: 1.5rem 0; } .section--footer { width: 100%; background: #fff; padding: 1.5rem 0 3rem; position: relative; z-index: 400; font-family: "Roboto", sans-serif; font-size: 0.75rem; text-align: center; } .section--footer a:not(.socialAccount) { background-position: 0 16px; } .socialAccountList { list-style: none; margin: 1.5rem auto; padding-left: 0; width: 50%; } .socialAccountList:before, .socialAccountList:after { content: " "; display: table; } .socialAccountList:after { clear: both; } .socialAccount { display: block; float: left; margin: 0; padding: 0 15px; width: 14.2%; height: 25px; text-decoration: none; background-repeat: no-repeat; background-position: center center; background-size: contain; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .socialAccount:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .socialAccount--twitter { background-image: url(../images/twitter--black.svg); } .socialAccount--facebook { background-image: url(../images/facebook--black.svg); } .socialAccount--linkedin { background-image: url(../images/linkedin--black.svg); } .socialAccount--dribbble { background-image: url(../images/dribbble--black.svg); } .socialAccount--pinterest { background-image: url(../images/pinterest--black.svg); } .socialAccount--kiva { background-image: url(../images/kiva--black.svg); } .socialAccount--rss { background-image: url(../images/rss--black.svg); } .socialAccount--github { background-image: url(../images/github--black.svg); } .socialAccount--youtube { background-image: url(../images/youtube--black.svg); } .socialAccount--vimeo { background-image: url(../images/vimeo--black.svg); } .section--last { position: relative; clear: both; padding: 1.5rem 0 6rem; background: #fff; } .content-author { border-top: 1px solid #eeeeee; margin-top: 3rem; padding-top: 1.5rem; } .content-comments { margin-top: 3rem; } .postFooter { text-align: center; } .section--prePost { width: 100%; top: 0; position: relative; } .section--prePost .section-title a { background: transparent; color: rgba(255, 255, 255, 0.9); } .section--prePost .section-title a:hover { color: white; } .section--prePost .section-title h2 { margin: 1.5rem auto 0; display: inline-block; } .section--prePost, .section--prePost .section-backgroundImage { height: 16.5rem; } .section--prePost .section-backgroundImage img { min-height: 16.5rem; position: relative !important; top: 0; } .fullscreenModal { position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80%; height: 100%; color: #fff; text-align: center; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; background: transparent; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; z-index: 800; } .fullscreenModal.active { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .fullscreenModal h2 { font-size: 1.333rem; } .modal-toggle-group { position: fixed; display: block; bottom: 30px; right: 3%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); z-index: 700; } .modal-toggle-group.active { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; } .modal-toggle-group.active.scaleIn { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .modal-toggle-group, .modal-toggle-wrapper, .modal-toggle-close-wrapper, .modal-toggle-bubble, .modal-toggle-bubbleShadow { height: 44px; width: 44px; border-radius: 50%; } .modal-toggle-wrapper { position: absolute; top: 0; display: block; background-image: url(../images/heart.svg); background-repeat: no-repeat; background-position: center center; background-size: 60%; background-color: transparent; cursor: pointer; -webkit-transform: scale(1); -webkit-transition: all 0.3s ease-out; z-index: 700; } .modal-toggle-wrapper.active { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .modal-toggle-close-wrapper { position: absolute; top: 0; z-index: 600; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .modal-toggle-close-wrapper .modal-toggle-close { position: absolute; top: 48%; left: 15%; display: block; width: 30px; height: 2px; background: transparent; -webkit-transition: background 0.3s; transition: background 0.3s; z-index: inherit; } .modal-toggle-close-wrapper .modal-toggle-close:before, .modal-toggle-close-wrapper .modal-toggle-close:after { content: ''; position: absolute; left: 0; background: inherit; width: 100%; height: 100%; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s, background 0s; transition: transform 0.5s, background 0s; } .modal-toggle-close-wrapper .modal-toggle-close:before { top: -6px; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .modal-toggle-close-wrapper .modal-toggle-close:after { bottom: -6px; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .modal-toggle-close-wrapper.active { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; z-index: 600; } .modal-toggle-close-wrapper.active .modal-toggle-close { background: transparent; } .modal-toggle-close-wrapper.active .modal-toggle-close:before, .modal-toggle-close-wrapper.active .modal-toggle-close:after { background: #fff; } .modal-toggle-close-wrapper.active .modal-toggle-close:before { top: 0; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .modal-toggle-close-wrapper.active .modal-toggle-close:after { bottom: 0; -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } .modal-toggle-bubble { position: absolute; top: 0; background-color: rgba(34, 34, 34, 0.9); -webkit-transform: scale(1); -webkit-transition: all 0.3s ease-out; z-index: 600; } .modal-toggle-bubble.active { -webkit-transform: scale(100); -webkit-transition: all 0.6s ease-out; -webkit-transition-delay: .4s; } .modal-toggle-bubbleShadow { position: absolute; top: 0; background-color: #222; -webkit-transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; z-index: 500; } .modal-toggle-bubbleShadow.active { -webkit-transform: scale(1.5); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all 0.3s ease-out; } .h2--shareTitle { margin-top: -100px; } .shareWrapper { list-style: none; margin: 1.5rem auto 0; padding: 0; width: 60%; } .shareWrapper:before, .shareWrapper:after { content: " "; display: table; } .shareWrapper:after { clear: both; } .shareWrapper li .shareButton { display: block; float: left; margin: 0; padding: 0 15px; width: 16.66%; height: 80px; background-repeat: no-repeat; background-position: center center; background-size: contain; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .shareWrapper li .shareButton:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } @media (min-width: 991px) and (max-width: 1200px) { .shareWrapper li .shareButton { width: 16.66%; height: 60px; } } @media (max-width: 767px) { .shareWrapper li .shareButton { float: none; width: 100%; height: 40px; margin-bottom: 20px; } } .shareButton--twitter { background-image: url(../images/twitter.svg); } .shareButton--facebook { background-image: url(../images/facebook.svg); } .shareButton--linkedin { background-image: url(../images/linkedin.svg); } .shareButton--buffer { background-image: url(../images/buffer.svg); } .shareButton--hackernews { background-image: url(../images/ycombinator.svg); } .shareButton--pocket { background-image: url(../images/pocket.svg); } .textInput { border: 1px solid rgba(0, 0, 0, 0.15); padding: 0 15px; height: 35px; width: 100%; font-size: 14px; outline: none; background: #fff; appearance: none; -webkit-tap-highlight-color: transparent; border-radius: 4px; font-family: "Roboto", sans-serif; font-weight: 300; } .textInput--large { height: 45px; font-size: 16px; } .button { display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; background: transparent; border-radius: 99px; font-family: "Roboto", sans-serif; letter-spacing: .02em; padding: 10px 40px 9px 40px; margin-top: 1.5rem; border: 2px solid rgba(119, 119, 119, 0.8); color: #777777; text-decoration: none; text-transform: uppercase; } .button:hover { border-color: #777777; } @media (max-width: 767px) { .button { font-size: 14px; } } .button--primary { border: 2px solid rgba(34, 34, 34, 0.8); color: #222; } .button--primary:hover { border-color: #222; } .u-clearfix:before, .u-clearfix:after { content: " "; display: table; } .u-clearfix:after { clear: both; } .u-alignRight { float: right !important; } .u-alignLeft { float: left !important; } .u-alignCenter { text-align: center !important; } .u-table { display: table !important; } .u-table:before { height: auto !important; display: inherit !important; } .u-tableCell { display: table-cell !important; } .u-verticalAlignTop { vertical-align: top !important; } .u-verticalAlignMiddle { vertical-align: middle !important; } .u-verticalAlignBottom { vertical-align: bottom !important; } .hide { display: none !important; } .show { display: block !important; } .invisible { visibility: hidden; } .hidden { display: none !important; visibility: hidden !important; } .is-blurred { -webkit-filter: blur(10px); -moz-filter: blur(10px); filter: blur(10px); -webkit-transition: all 0.5s; transition: all 0.5s; } .u-overflow-y-hidden { overflow-y: hidden; } .u-scrollbar-hidden { padding-right: 15px; } .u-clearHr { clear: both; visibility: hidden; } @-ms-viewport { width: device-width; } .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .visible-xs { display: block !important; } table.visible-xs { display: table; } tr.visible-xs { display: table-row !important; } th.visible-xs, td.visible-xs { display: table-cell !important; } } @media (max-width: 767px) { .visible-xs-block { display: block !important; } } @media (max-width: 767px) { .visible-xs-inline { display: inline !important; } } @media (max-width: 767px) { .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } table.visible-sm { display: table; } tr.visible-sm { display: table-row !important; } th.visible-sm, td.visible-sm { display: table-cell !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-block { display: block !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-inline { display: inline !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } table.visible-md { display: table; } tr.visible-md { display: table-row !important; } th.visible-md, td.visible-md { display: table-cell !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md-block { display: block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md-inline { display: inline !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } table.visible-lg { display: table; } tr.visible-lg { display: table-row !important; } th.visible-lg, td.visible-lg { display: table-cell !important; } } @media (min-width: 1200px) { .visible-lg-block { display: block !important; } } @media (min-width: 1200px) { .visible-lg-inline { display: inline !important; } } @media (min-width: 1200px) { .visible-lg-inline-block { display: inline-block !important; } } @media (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-print { display: none !important; } @media print { .visible-print { display: block !important; } table.visible-print { display: table; } tr.visible-print { display: table-row !important; } th.visible-print, td.visible-print { display: table-cell !important; } } .visible-print-block { display: none !important; } @media print { .visible-print-block { display: block !important; } } .visible-print-inline { display: none !important; } @media print { .visible-print-inline { display: inline !important; } } .visible-print-inline-block { display: none !important; } @media print { .visible-print-inline-block { display: inline-block !important; } } @media print { .hidden-print { display: none !important; } }