html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: 400; vertical-align: baseline; background: transparent; }

article, aside, figure, footer, header, nav, section, details, summary { display: block; }

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

img, object, embed { max-width: 100%; }

html { overflow-y: scroll; }

ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

th { font-weight: 700; vertical-align: bottom; }

td { font-weight: 400; vertical-align: top; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }

input[type="radio"] { vertical-align: text-bottom; }

input[type="checkbox"] { vertical-align: bottom; }

.ie7 input[type="checkbox"] { vertical-align: baseline; }

.ie6 input { vertical-align: text-bottom; }

select, input, textarea { font: 99% sans-serif; }

table { font-size: inherit; font: 100%; }

small { font-size: 85%; }

strong { font-weight: 700; }

td, td img { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }

.clickable, label, input[type=button], input[type=submit], input[type=file], button { cursor: pointer; }

button, input, select, textarea { margin: 0; }

button, input[type=button] { width: auto; overflow: visible; }

.ie7 img { -ms-interpolation-mode: bicubic; }

.clearfix { zoom: 1; }

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.page-close { z-index: 2002; }

.page-menu { z-index: 2001; }

.page-overlay { z-index: 2000; }

.breadcrumb.affix { z-index: 1986; }

#carbon { z-index: 86; }

.elevator { z-index: 29; }

html { background: #d16098; font-size: 16px; min-width: 320px; overflow: hidden; overflow-y: scroll; }

body { color: #69707a; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; font-size: 1rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 400; line-height: 1.4; min-height: 100vh; position: relative; text-rendering: optimizeLegibility; }

a { color: #d16098; cursor: pointer; text-decoration: none; }

a:visited { color: #aeb1b5; }

input[type="checkbox"] { vertical-align: baseline; }

strong { color: #222325; font-weight: 600; }

pre { white-space: pre; word-wrap: normal; }

body, button, input, textarea { font-family: "Source Sans Pro", "Roboto", "Open Sans", Arial, sans-serif; }

code, pre { font-family: "Source Code Pro", "Inconsolata", monospace; font-weight: 400; }

.ff-cta a, .page-newsletter-button, .elevator, .pagination-start, .pagination-previous, .page-close-button, .pagination-next { -moz-appearance: none; -webkit-appearance: none; background: #f5f7f9; border: 1px solid #ebeff5; border-radius: 3px; color: #69707a; display: inline-block; font-size: 16px; height: 32px; line-height: 20px; padding: 4px 10px 6px; position: relative; vertical-align: top; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); cursor: pointer; height: auto; line-height: 1; padding: 8px 12px 10px; text-align: left; }

.ff-cta a:active, .page-newsletter-button:active, .elevator:active, .pagination-start:active, .pagination-previous:active, .page-close-button:active, .pagination-next:active, .ff-cta a:focus, .page-newsletter-button:focus, .elevator:focus, .pagination-start:focus, .pagination-previous:focus, .page-close-button:focus, .pagination-next:focus { outline: none; }

.ff-cta a .fa, .page-newsletter-button .fa, .elevator .fa, .pagination-start .fa, .pagination-previous .fa, .page-close-button .fa, .pagination-next .fa { display: block; font-size: 21px; height: 24px; line-height: 24px; text-align: center; width: 24px; left: 20px; margin-top: -12px; position: absolute; top: 50%; }

.ff-cta a strong, .page-newsletter-button strong, .elevator strong, .pagination-start strong, .pagination-previous strong, .page-close-button strong, .pagination-next strong { color: inherit; }

.ff-cta a:active, .page-newsletter-button:active, .elevator:active, .pagination-start:active, .pagination-previous:active, .page-close-button:active, .pagination-next:active, .ff-cta a:focus, .page-newsletter-button:focus, .elevator:focus, .pagination-start:focus, .pagination-previous:focus, .page-close-button:focus, .pagination-next:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }

.page-close-button, .pagination-next { background: linear-gradient(#e480b2, #d16098); border-color: #c5397e; color: white; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }

.page-close-button:hover, .pagination-next:hover { background: linear-gradient(#ec92be, #d16098); border-color: #9d2e65; color: white; }

.page-close-button:active, .pagination-next:active, .page-close-button:focus, .pagination-next:focus { background: #d16098; }

.pagination-previous { background: linear-gradient(white, #f5f7f9); border-color: #d5dee6; color: #69707a; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05); text-shadow: 0 1px 1px white; }

.pagination-previous:hover { background: linear-gradient(white, #f5f7f9); border-color: #b5c4d3; color: #69707a; }

.pagination-previous:active, .pagination-previous:focus { background: #f5f7f9; }

.pagination-start { background: linear-gradient(#eef0f3, #d3d6db); border-color: #b7bcc4; color: #69707a; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.05); text-shadow: 0 1px 1px white; }

.pagination-start:hover { background: linear-gradient(#fdfdfe, #d3d6db); border-color: #9ba2ad; color: #69707a; }

.pagination-start:active, .pagination-start:focus { background: #d3d6db; }

.page-newsletter-button, .elevator { background: linear-gradient(#365056, #273032); border-color: #111415; color: white; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }

.page-newsletter-button:hover, .elevator:hover { background: linear-gradient(#3c6169, #273032); border-color: black; color: white; }

.page-newsletter-button:active, .elevator:active, .page-newsletter-button:focus, .elevator:focus { background: #273032; }

.container { margin: 0 auto; max-width: 960px; position: relative; }

.container::after { clear: both; content: ""; display: table; }

@media screen and (min-width: 1200px) { .container { max-width: 1080px; } }

@media screen and (min-width: 1400px) { .container { max-width: 1140px; } }

.banner { background-color: crimson; display: block; color: #f4f1ce; padding: 15px; position: relative; text-align: center; }

.banner:before { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: black; content: ""; display: block; opacity: 0; transition: opacity 86ms ease-out; }

.banner .fa, .banner strong, .banner em { color: #f4f1ce; display: inline-block; line-height: 20px; margin: 0 5px; position: relative; transition: color 86ms ease-out; vertical-align: top; }

.banner .fa { font-size: 14px; position: relative; top: 1px; }

.banner strong { color: white; }

.banner em { font-style: normal; }

.banner:hover:before { opacity: 0.1; }

.banner:hover .fa, .banner:hover strong, .banner:hover em { color: white; }

.message { background-color: #5f45bb; }

.hello { background: url("/images/marksheet-hello.png") center center no-repeat; background-size: 210px 192px; display: block; height: 192px; outline: none; overflow: hidden; text-indent: -290486px; width: 210px; margin: 0 auto; }

@media screen and (min-width: 600px) { .hello { background: url("/images/marksheet-hello.png") center center no-repeat; background-size: 420px 384px; display: block; height: 384px; outline: none; overflow: hidden; text-indent: -290486px; width: 420px; } }

.logo { background: url("/images/marksheet-logo.png") center center no-repeat; background-size: 230px 48px; display: block; height: 48px; outline: none; overflow: hidden; text-indent: -290486px; width: 230px; float: left; left: 10px; position: absolute; top: 10px; }

@media screen and (max-width: 959px) { .logo { background-position: left center; width: 48px; } }

@media screen and (min-width: 960px) { .logo { left: 0; } }

.start { background: url("/images/button-start-reading.png") center center no-repeat; background-size: 243px 64px; display: block; height: 64px; outline: none; overflow: hidden; text-indent: -290486px; width: 243px; background-position: 0 0; margin: 60px auto 0; }

.heading { color: white; line-height: 1.2; text-align: center; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }

.heading .container { padding: 60px 30px; }

.heading strong { color: inherit; }

.heading h1, .heading h2 { font-weight: 300; }

.heading h1 { color: #f4f1ce; font-size: 20px; }

.heading h1 em { font-style: normal; font-weight: 300; }

.heading h2 { font-size: 48px; margin-bottom: 20px; margin-top: 20px; }

@media screen and (min-width: 960px) { .heading h1 { font-size: 32px; } .heading h2 { font-size: 60px; } .heading .container { padding: 120px; } }

.breadcrumb-holder { height: 40px; position: relative; }

.breadcrumb { background-color: #f4f1ce; background-image: linear-gradient(#fffde9, #f4f1ce); box-shadow: inset 0 1px 0 white, inset 0 -3px 5px rgba(0, 0, 0, 0.05); height: 40px; text-shadow: 0 1px 0 white; will-change: scroll-position; }

.breadcrumb.affix { position: fixed !important; }

.breadcrumb.affix-bottom { position: absolute !important; }

.breadcrumb.affix, .breadcrumb.affix-bottom { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.1); top: 0; width: 100%; }

@media screen and (min-width: 960px) { .breadcrumb.affix, .breadcrumb.affix-bottom { width: 960px; } }

@media screen and (min-width: 1200px) { .breadcrumb.affix, .breadcrumb.affix-bottom { width: 1080px; } }

@media screen and (min-width: 1400px) { .breadcrumb.affix, .breadcrumb.affix-bottom { width: 1140px; } }

@media screen and (min-width: 960px) { .breadcrumb { border-radius: 3px 3px 0 0; } .breadcrumb.affix, .breadcrumb.affix-bottom { border-radius: 0; } }

.breadcrumb-toggle { display: block; float: left; height: 40px; padding: 15px 13px 0 12px; position: relative; width: 41px; }

.breadcrumb-toggle:before, .breadcrumb-toggle:after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); content: ""; display: block; left: auto; width: 1px; }

.breadcrumb-toggle:before { right: 1px; }

.breadcrumb-toggle:after { background: linear-gradient(rgba(255, 255, 255, 0), white); }

.breadcrumb-toggle span { background: #b5b188; box-shadow: 0 1px 0 white; display: block; height: 1px; }

.breadcrumb-toggle span + span { margin-top: 4px; }

.breadcrumb-section { color: #b5b188; float: left; height: 40px; line-height: 30px; padding: 5px 10px; text-transform: capitalize; }

.breadcrumb-section .fa { display: block; font-size: 21px; height: 30px; line-height: 30px; text-align: center; width: 30px; float: left; margin: 1px 5px 0 0; }

.breadcrumb-section .fa-globe { color: #6ecd56; }

.breadcrumb-section .fa-html5 { color: #f16529; }

.breadcrumb-section .fa-css3 { color: #33a9dc; }

.breadcrumb-section .fa-rocket { color: #c69; }

.breadcrumb-next, .breadcrumb-previous { display: block; float: right; height: 40px; overflow: hidden; padding-left: 1px; position: relative; text-align: center; width: 41px; }

.breadcrumb-next span, .breadcrumb-previous span { display: block; position: absolute; text-indent: -290486px; }

.breadcrumb-next .fa, .breadcrumb-previous .fa { display: block; font-size: 21px; height: 40px; line-height: 40px; text-align: center; width: 40px; color: #b5b188; }

.breadcrumb-next:before, .breadcrumb-previous:before, .breadcrumb-next:after, .breadcrumb-previous:after { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); content: ""; display: block; right: auto; width: 1px; }

.breadcrumb-next:after, .breadcrumb-previous:after { background: linear-gradient(rgba(255, 255, 255, 0), white); left: 1px; }

.menu { background: #f5f7f9; display: none; }

.menu li { display: block; }

.menu a { display: block; }

.pagination { background: #f5f7f9; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(0, 0, 0, 0.05); padding: 30px; }

.pagination::after { clear: both; content: ""; display: table; }

.pagination-next, .pagination-previous, .pagination-start { display: block; font-size: 20px; height: auto; padding: 15px 20px 18px; text-align: left; }

.pagination-next em, .pagination-previous em, .pagination-start em { color: inherit; display: block; font-size: .75em; opacity: .5; }

.pagination-next > strong, .pagination-previous > strong, .pagination-start > strong { display: block; margin-top: 2px; }

.pagination-start { border: none; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2); font-size: 20px; padding: 20px 25px; }

.pagination-start strong { padding-bottom: 3px; }

@media screen and (min-width: 960px) { .pagination-start { border-radius: 5px; font-size: 24px; padding: 25px 30px; } .pagination-start strong { margin-top: 5px; } }

@media screen and (max-width: 959px) { .pagination-previous { display: none; } }

@media screen and (min-width: 960px) { .pagination-previous { float: left; width: 33.3333%; } }

@media screen and (min-width: 960px) { .pagination-next { float: right; width: 33.3333%; } }

.elevator { display: block; font-size: 16px; height: auto; line-height: 24px; margin: 15px; padding: 20px; text-align: center; }

@media screen and (min-width: 960px) { .elevator { bottom: 0; left: 0; position: fixed; } .elevator .fa { left: 50%; margin-left: -12px; } .elevator span { display: none; } }

.notification, .mm-message { border-radius: 3px; color: white; margin-top: 10px; padding: 10px 15px; }

.notification.is-danger, .mm-message.is-danger { background: #273032; }

.notification.is-success, .mm-message.is-success { background: #6ecd56; }

.mm-message { background: #6ecd56; }

.mm-message:before { content: "Thank you!"; display: block; font-weight: bold; }

.content { padding: 30px; }

@media screen and (min-width: 960px) { .content { font-size: 20px; padding: 60px; } }

.content a { text-decoration: underline; }

.content code { background-color: #222; border-radius: 3px; color: #66d9ef; font-size: 0.875em; padding: 1px 5px 3px; position: relative; top: -1px; }

.content > dl { background: #f5f7f9; color: #69707a; font-size: 0.875em; }

.content > dl dt { font-weight: 700; padding: 15px; padding-bottom: 0; }

.content > dl dd { padding: 15px; padding-top: 0; }

.content > dl dd + dt { border-top: 1px solid white; }

.content h3 { color: #222325; font-size: 32px; font-weight: 300; line-height: 1; margin: 30px 0; padding-top: 30px; position: relative; top: 1px; }

.content h3 a { font-weight: 300; display: block; height: 30px; line-height: 30px; position: absolute; right: 100%; text-align: center; text-decoration: none; top: 30px; width: 30px; }

.content h3 a:hover { color: #222325; }

.content h3:first-child { margin-top: 0; padding-top: 0; }

.content h3:first-child a { top: 0; }

@media screen and (min-width: 960px) { .content h3 a { background: rgba(255, 255, 255, 0.86); border-radius: 25px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); height: 50px; line-height: 50px; margin-right: 35px; top: 25px; width: 50px; } .content h3 a:hover { background: white; } .content h3:first-child a { top: -5px; } }

.content h4 { border-bottom: 1px solid #ebeff5; color: #222325; font-size: 20px; font-weight: 700; line-height: 1; margin: 30px 0; padding-bottom: 15px; }

.content p { margin: 1em 0; }

.content p:first-child { margin-top: 0; }

.content p:last-child { margin-bottom: 0; }

.content pre { line-height: 1.25; position: relative; }

.content li + li { margin-top: 5px; }

.content ul { list-style: disc outside; margin: 15px 0; padding-left: 1.5em; }

.content ul ul { list-style-type: circle; }

.content ul ul ul { list-style-type: square; }

.content ul.files { font-family: "Source Code Pro", "Inconsolata", monospace; font-weight: 400; }

.content ul.software { list-style: none; padding-left: 0; text-align: center; }

.content ul.software:after { clear: both; content: " "; display: table; }

.content ul.software li { float: left; margin-bottom: 15px; width: 50%; }

.content ul.software li img { max-height: 64px; }

.content ul.software li strong { display: block; line-height: 1; margin-top: 5px; }

@media screen and (min-width: 960px) { .content ul.software li { margin: 0; width: 20%; } }

.content figure.highlight { margin: 30px -30px; overflow: auto; }

.content figure.highlight pre code { position: relative; background: inherit; color: inherit; display: block; padding: 30px; top: 0; }

.content figure.highlight pre code:before { background: #f4f1ce; color: rgba(0, 0, 0, 0.5); content: "Code"; display: inline-block; font-family: "Source Sans Pro", "Roboto", "Open Sans", Arial, sans-serif; font-size: 0.6rem; font-weight: 700; height: 1rem; left: -1px; letter-spacing: 0.1em; line-height: 1rem; padding: 0 0.5em; position: absolute; text-transform: uppercase; top: 0; }

.content figure.highlight pre code.language-html { position: relative; }

.content figure.highlight pre code.language-html:before { background: #f16529; color: white; content: "HTML"; display: inline-block; font-family: "Source Sans Pro", "Roboto", "Open Sans", Arial, sans-serif; font-size: 0.6rem; font-weight: 700; height: 1rem; left: -1px; letter-spacing: 0.1em; line-height: 1rem; padding: 0 0.5em; position: absolute; text-transform: uppercase; top: 0; }

.content figure.highlight pre code.language-css { position: relative; }

.content figure.highlight pre code.language-css:before { background: #33a9dc; color: white; content: "CSS"; display: inline-block; font-family: "Source Sans Pro", "Roboto", "Open Sans", Arial, sans-serif; font-size: 0.6rem; font-weight: 700; height: 1rem; left: -1px; letter-spacing: 0.1em; line-height: 1rem; padding: 0 0.5em; position: absolute; text-transform: uppercase; top: 0; }

.content figure.highlight pre code.language-scss { position: relative; }

.content figure.highlight pre code.language-scss:before { background: #c69; color: white; content: "SCSS"; display: inline-block; font-family: "Source Sans Pro", "Roboto", "Open Sans", Arial, sans-serif; font-size: 0.6rem; font-weight: 700; height: 1rem; left: -1px; letter-spacing: 0.1em; line-height: 1rem; padding: 0 0.5em; position: absolute; text-transform: uppercase; top: 0; }

.content figure.highlight pre code.language-scss.language-css { position: relative; }

.content figure.highlight pre code.language-scss.language-css:before { background: #c69; color: white; content: "SCSS CSS"; display: inline-block; font-family: "Source Sans Pro", "Roboto", "Open Sans", Arial, sans-serif; font-size: 0.6rem; font-weight: 700; height: 1rem; left: -1px; letter-spacing: 0.1em; line-height: 1rem; padding: 0 0.5em; position: absolute; text-transform: uppercase; top: 0; }

@media screen and (min-width: 960px) { .content figure.highlight pre code { padding: 30px 60px; } }

@media screen and (min-width: 960px) { .content figure.highlight { margin: 30px -60px; } }

.content .answer, .content .important, .content .info { background: rgba(51, 169, 220, 0.1); border-left: 0.25em solid #33a9dc; color: rgba(0, 0, 0, 0.5); padding: 15px 20px; }

@media screen and (min-width: 960px) { .content .answer, .content .important, .content .info { padding: 25px 30px; } }

.content .answer { background: rgba(110, 205, 86, 0.1); border-left-color: #6ecd56; }

.content .answer .question { color: #273032; display: block; font-weight: 700; }

.content .answer .question + br { display: none; }

.content .important { background: rgba(220, 20, 60, 0.1); border-left-color: crimson; }

.content .result { position: relative; border: 1px solid #f4f1ce; color: black; margin: 30px 0; padding: 15px; }

.content .result:before { background: #f4f1ce; color: rgba(0, 0, 0, 0.5); content: "Result"; display: inline-block; font-family: "Source Sans Pro", "Roboto", "Open Sans", Arial, sans-serif; font-size: 0.6rem; font-weight: 700; height: 1rem; left: -1px; letter-spacing: 0.1em; line-height: 1rem; padding: 0 0.5em; position: absolute; text-transform: uppercase; top: 0; }

.content .result:before { top: -15px; }

.content .table { margin: 30px -30px; overflow: auto; }

.content .table table { background: #fafafa; font-size: 0.875em; width: 100%; }

.content .table table th, .content .table table td { border: 1px solid #ccc; padding: 0.5em 1em; vertical-align: top; }

.content .table table th.empty, .content .table table td.empty { background: white; border: none; }

.content .table table th.no, .content .table table td.no { color: crimson; }

.content .table table th.yes span, .content .table table td.yes span { background: #6ecd56; color: white; padding: 2px 5px; }

.content .table table th { background: #eee; font-weight: 400; text-align: left; white-space: nowrap; }

.content .table table th strong { display: block; }

.content .table table code { display: inline-block; margin-bottom: 5px; vertical-align: top; }

.content .table table pre { margin: 0; padding: 0; }

.content .table table pre:before { display: none; }

@media screen and (min-width: 960px) { .content .table { margin: 30px 0; } }

.content .footnotes { border-top: 1px solid #ebeff5; font-size: 0.875em; margin-top: 1em; padding: 1em 1em 0; }

#carbon { background: white; border-radius: 5px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); font-size: 14px; padding: 15px; }

#carbonads { text-align: left; text-shadow: none; }

#carbonads a:hover { text-decoration: underline; }

#carbonads span { display: block; }

#carbonads .carbon-img { display: block; height: 100px; width: 130px; }

#carbonads .carbon-img img { display: block; }

#carbonads .carbon-text { display: block; color: #222325; margin-bottom: 5px; }

#carbonads .carbon-poweredby { font-size: 0.875em; }

@media screen and (max-width: 1099px) { #carbon { margin-left: auto; margin-right: auto; max-width: 340px; min-height: 130px; min-width: 300px; } #carbonads .carbon-img { float: left; } #carbonads .carbon-text { margin-left: 145px; } #carbonads .carbon-poweredby { margin-left: 15px; } }

@media screen and (min-width: 1100px) { #carbon { bottom: 15px; position: fixed; right: 15px; width: 160px; } #carbonads .carbon-img { margin-bottom: 10px; } }

.page-hero { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background-color: #d16098; background-image: linear-gradient(142deg, #f4a35b, #f4655b 31%, #d16098 65%, #ca3469); position: fixed; transform: translateZ(0); }

.page-hero-pattern { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.1); content: ""; display: block; mix-blend-mode: multiply; opacity: 0; }

@media screen and (min-width: 700px) { .page-hero-pattern { background: url("/images/pattern.png") repeat; mix-blend-mode: multiply; } }

.page-body { position: relative; }

.page-header { left: 0; position: absolute; top: 0; width: 100%; }

.page-header .container { border-bottom: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); height: 69px; }

.page-header .share-buttons { position: absolute; right: 20px; top: 24px; }

.page-header .share-button--facebook, .page-header .share-button--twitter { position: static; margin: 0 0 0 18px; }

@media screen and (min-width: 960px) { .page-header .share-buttons { right: 0; } }

.page-header-icons { padding: 18px 0; text-align: center; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }

.page-header-icons a { color: #f4f1ce; display: inline-block; height: 32px; margin: 0 5px; vertical-align: top; width: 32px; }

.page-header-icons a:hover { color: white; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }

.page-header-icons a:active { text-shadow: none; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

.page-header-icons .fa { display: block; font-size: 21px; height: 32px; line-height: 32px; text-align: center; width: 32px; }

@media screen and (max-width: 959px) { .page-header-icons { display: none; } }

.page-container { padding-top: 69px; }

.page-content { line-height: 1.6; }

.page-content .container { background: white; }

@media screen and (min-width: 960px) { .page-content .container { border-radius: 3px 3px 0 0; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); } }

.ff { background-color: #ffedd7; padding: 30px; position: relative; text-align: center; }

@media screen and (min-width: 960px) { .ff { padding: 60px 40px 80px; } }

.ff-title { color: #273032; font-size: 2em; font-weight: bold; line-height: 1.25; margin-bottom: 1em; }

.ff-content { font-size: 1.125rem; margin: 0 auto 2em; max-width: 480px; }

.ff-cover { display: inline-block; vertical-align: top; }

.ff-cta { margin-top: 1em; }

.ff-cta a { background-color: #5f45bb; border: none; color: #fff; font-size: 1.25em; font-weight: bold; padding: 0.75em 1.5em; }

.page-newsletter { background-color: crimson; background-image: linear-gradient(142deg, #dc147f, #dc145d 31%, crimson 65%, #dc141b); color: #f4f1ce; padding: 30px; position: relative; }

.page-newsletter strong { color: inherit; }

@media screen and (min-width: 960px) { .page-newsletter { padding: 60px 40px 80px; } }

.page-newsletter-heading { position: relative; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

.page-newsletter-heading .icons { display: block; height: 120px; margin: 0 auto; position: relative; width: 120px; }

.page-newsletter-heading .icons .fa { display: block; font-size: 42px; height: 120px; line-height: 120px; text-align: center; width: 120px; bottom: 0; left: 0; position: absolute; right: 0; top: 0; }

.page-newsletter-heading .icons .fa-television { font-size: 84px; }

.page-newsletter-heading .icons .fa-play-circle { color: white; left: -3px; top: -6px; }

.page-newsletter-heading h3 { color: white; font-size: 32px; line-height: 1; position: relative; }

.page-newsletter-heading p { font-size: 18px; }

@media screen and (min-width: 960px) { .page-newsletter-heading h3 { font-size: 40px; } .page-newsletter-heading p { font-size: 20px; margin-top: 5px; } }

.page-newsletter-form { margin: 30px auto 0; max-width: 480px; }

.page-newsletter-group { position: relative; }

.page-newsletter-group .fa { color: #aeb1b5; font-size: 14px; pointer-events: none; position: absolute; left: 10px; top: 10px; }

.page-newsletter-group label.error { cursor: default; display: block; font-size: 14px; margin: 5px 0 10px; }

@media screen and (min-width: 960px) { .page-newsletter-group { padding-right: 100px; } }

.page-newsletter-input { border: none; border-radius: 3px; display: block; outline: none; padding: 6px 12px 8px 32px; width: 100%; }

@media screen and (max-width: 959px) { .page-newsletter-input { margin-bottom: 10px; } }

.page-newsletter-button.loading { background: #273032; border-color: transparent; box-shadow: none; color: rgba(255, 255, 255, 0.3); cursor: progress; }

@media screen and (min-width: 960px) { .page-newsletter-button { position: absolute; right: 0; top: 0; } }

.page-footer { background: #273032; position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

.page-footer .container { padding: 30px; }

.page-footer .share-buttons { margin: 30px 0; }

.page-footer a { color: #d16098; }

.page-footer a:hover { text-decoration: underline; }

.page-footer strong { color: white; }

.page-footer form { color: white; font-size: 16px; margin-bottom: 30px; }

.page-footer form strong { color: #89ff6b; }

.page-footer form strong:first-child { color: white; }

.page-footer form em { display: block; font-size: 14px; font-style: normal; margin-bottom: 10px; }

.page-footer form p { margin-top: 0; }

@media screen and (max-width: 959px) { .page-footer form { text-align: center; } .page-footer p { margin-top: 1em; } }

@media screen and (min-width: 960px) { .page-footer .container { padding: 60px 0; } .page-footer .share-button--facebook, .page-footer .share-button--twitter { left: auto; margin: 0 20px 0 0; position: relative; right: auto; } }

.page-overlay { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: rgba(0, 0, 0, 0.7); display: none; position: fixed; }

.page-menu { bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-overflow-scrolling: touch; bottom: 78px; display: none; min-height: calc(100vh - 30px); overflow: scroll; overflow-x: hidden; position: fixed; }

@media screen and (min-width: 960px) { .page-menu { bottom: 0; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.86); left: 50%; margin-left: -480px; right: auto; position: fixed; width: 960px; } }

@media screen and (min-width: 1200px) { .page-menu { margin-left: -540px; width: 1080px; } }

@media screen and (min-width: 1400px) { .page-menu { margin-left: -570px; width: 1140px; } }

.page-close { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background: #f5f7f9; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(0, 0, 0, 0.05); display: none; padding: 15px; position: fixed; top: auto; }

@media screen and (min-width: 960px) { .page-close { display: none; } }

.page-close-button { display: block; padding: 15px; text-align: center; }

html.has-menu-open { overflow: hidden; }

html.has-menu-open .page-overlay, html.has-menu-open .page-menu, html.has-menu-open .page-close { display: block; }

@media screen and (min-width: 960px) { html.has-menu-open .page-close { display: none; } }

.share-buttons { height: 20px; overflow: hidden; position: relative; }

.share-buttons .twitter-share-button { position: absolute; }

.share-buttons .twitter-share-button, .share-buttons .twitter-share-button:visited { color: transparent; }

.share-button--facebook, .share-button--twitter { color: transparent; display: inline-block; font-size: 14px; line-height: 20px; margin: 0 10px; position: absolute; text-shadow: none; top: 0; vertical-align: top; }

.share-button--facebook a, .share-button--twitter a { color: transparent; }

.share-button--twitter { right: 50%; }

.share-button--facebook { left: 50%; }

.fb_iframe_widget { display: inline-block; vertical-align: top; }

.fb_iframe_widget span { display: inline-block; vertical-align: top !important; }

.toc-head { height: 40px; margin-top: -40px; }

.toc-head .container { background-color: rgba(0, 0, 0, 0.2); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); border-radius: 3px 3px 0 0; box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.1); height: 40px; }

@media screen and (max-width: 959px) { .toc-head { display: none; } }

.toc-column, .toc-column--lessons, .toc-column--chapters, .toc-column--sections { background: url("/images/toc-head.png") center center no-repeat; background-size: 240px 40px; display: block; height: 40px; outline: none; overflow: hidden; text-indent: -290486px; width: 240px; position: absolute; top: 0; width: 80px; }

.toc-column--sections { background-position: 0 0; left: 20px; }

.toc-column--chapters { background-position: -80px 0; left: 265px; }

.toc-column--lessons { background-position: -160px 0; left: 480px; }

.toc-component { position: relative; }

.toc-component .container { background: white; }

@media screen and (min-width: 960px) { .toc-component .container { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } }

.toc-section { min-height: 120px; position: relative; }

.toc-heading { background: #273032; padding: 25px; }

.toc-heading .fa { display: block; font-size: 21px; height: 25px; line-height: 25px; text-align: center; width: 25px; left: 15px; position: absolute; }

.toc-heading h3 { color: white; font-size: 1.2rem; font-weight: 700; line-height: 1; }

.toc-heading h3 a { color: white; }

.toc-heading h3 a:hover { text-decoration: underline; }

.toc-heading small { color: #aeb1b5; display: block; }

.toc-heading em { display: block; font-style: normal; line-height: 1.2; margin-top: 10px; }

.toc-heading em strong { color: #aeb1b5; }

@media screen and (max-width: 959px) { .toc-heading .fa { display: none; } }

@media screen and (min-width: 960px) { .toc-heading { bottom: 0; left: 0; position: absolute; right: 0; top: 0; border-bottom: 1px solid #3d4c4f; padding-left: 50px; right: auto; width: 240px; } }

.toc-content { padding: 15px; position: relative; }

.toc-content li { display: block; }

.toc-content a { border: 1px solid transparent; border-radius: 3px; display: block; padding: 5px 10px 7px; }

.toc-content a strong { font-weight: 400; }

.toc-content a:visited { color: #aeb1b5; }

.toc-content a:visited strong { color: #aeb1b5; }

.toc-content a:hover { background: linear-gradient(white, #f5f7f9); border-color: #d3d6db; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); }

.toc-content a:active, .toc-content a:focus { background: #f5f7f9; box-shadow: none; }

.toc-content .toc-month a, .toc-content .toc-month a:hover { color: #222325; font-weight: 700; }

.toc-content .toc-month a em, .toc-content .toc-month a:hover em { font-style: normal; }

@media screen and (min-width: 960px) { .toc-content { border-bottom: 1px solid #ebeff5; margin-left: 240px; padding: 20px 10px; } .toc-content li a { padding-left: 230px; } .toc-content .toc-month { left: 10px; position: absolute; width: 220px; z-index: 1; } .toc-content .toc-month a { padding-left: 10px; } }

.toc-section--web .fa, .toc-section--web .toc-heading small span, .toc-section--web .toc-content .toc-month em { color: #6ecd56; }

.toc-section--html5 .fa, .toc-section--html5 .toc-heading small span, .toc-section--html5 .toc-content .toc-month em { color: #f16529; }

.toc-section--css3 .fa, .toc-section--css3 .toc-heading small span, .toc-section--css3 .toc-content .toc-month em { color: #33a9dc; }

.toc-section--sass .fa, .toc-section--sass .toc-heading small span, .toc-section--sass .toc-content .toc-month em { color: #c69; }

.toc-section--sass .toc-heading, .toc-section--sass .toc-content { border-bottom: none; }

.highlight { background-color: #222222; color: white; }

.highlight .hll { background-color: #49483e; }

.highlight .c { color: #75715e; }

.highlight .err { color: #960050; background-color: #1e0010; }

.highlight .k { color: #66d9ef; }

.highlight .l { color: #ae81ff; }

.highlight .n { color: #66d9ef; }

.highlight .o { color: #f92672; }

.highlight .p { color: #f8f8f2; }

.highlight .cm { color: #75715e; }

.highlight .cp { color: #75715e; }

.highlight .c1 { color: #75715e; }

.highlight .cs { color: #75715e; }

.highlight .ge { font-style: italic; }

.highlight .gs { font-weight: 700; }

.highlight .kc { color: #66d9ef; }

.highlight .kd { color: #66d9ef; }

.highlight .kn { color: #f92672; }

.highlight .kp { color: #66d9ef; }

.highlight .kr { color: #66d9ef; }

.highlight .kt { color: #66d9ef; }

.highlight .ld { color: #e6db74; }

.highlight .m { color: #ae81ff; }

.highlight .s { color: #e6db74; }

.highlight .na { color: #a6e22e; }

.highlight .nb { color: #66d9ef; }

.highlight .nc { color: #a6e22e; }

.highlight .no { color: #66d9ef; }

.highlight .nd { color: #a6e22e; }

.highlight .ni { color: #f8f8f2; }

.highlight .ne { color: #a6e22e; }

.highlight .nf { color: #fd9720; }

.highlight .nl { color: #f8f8f2; }

.highlight .nn { color: #f8f8f2; }

.highlight .nx { color: #a6e22e; }

.highlight .py { color: #f8f8f2; }

.highlight .nt { color: #f92672; }

.highlight .nv { color: #f8f8f2; }

.highlight .ow { color: #f92672; }

.highlight .w { color: #f8f8f2; }

.highlight .mf { color: #ae81ff; }

.highlight .mh { color: #ae81ff; }

.highlight .mi { color: #ae81ff; }

.highlight .mo { color: #ae81ff; }

.highlight .sb { color: #e6db74; }

.highlight .sc { color: #e6db74; }

.highlight .sd { color: #e6db74; }

.highlight .s2 { color: #e6db74; }

.highlight .se { color: #ae81ff; }

.highlight .sh { color: #e6db74; }

.highlight .si { color: #e6db74; }

.highlight .sx { color: #e6db74; }

.highlight .sr { color: #e6db74; }

.highlight .s1 { color: #e6db74; }

.highlight .ss { color: #e6db74; }

.highlight .bp { color: #f8f8f2; }

.highlight .vc { color: #f8f8f2; }

.highlight .vg { color: #f8f8f2; }

.highlight .vi { color: #f8f8f2; }

.highlight .il { color: #ae81ff; }

.highlight .gu { color: #75715e; }

.highlight .gd { color: #f92672; }

.highlight .gi { color: #a6e22e; }

.index-hello { display: table; height: 100vh; padding: 100px 0; width: 100%; }

@media screen and (min-width: 960px) { .index-hello { height: 860px; padding: 0; } }

.index-hello-content { display: table-cell; vertical-align: middle; }

.index-hello-content .share-buttons { margin: 30px 0; opacity: 0; }

@media screen and (min-width: 960px) { .index-hello-content { padding: 120px 0; } }

html.section-web { background-color: #6ecd56; }

html.section-web .page-hero { background-color: #6ecd56; background-image: linear-gradient(142deg, #bdcd56, #96cd56 31%, #6ecd56 65%, #56cd66); }

html.section-html { background-color: #f16529; }

html.section-html .page-hero { background-color: #f16529; background-image: linear-gradient(142deg, #f1a829, #f18629 31%, #f16529 65%, #f14429); }

html.section-css { background-color: #33a9dc; }

html.section-css .page-hero { background-color: #33a9dc; background-image: linear-gradient(142deg, #33dcd7, #33c5dc 31%, #33a9dc 65%, #338ddc); }

html.section-sass { background-color: #c69; }

html.section-sass .page-hero { background-color: #c69; background-image: linear-gradient(142deg, #cc66bb, #cc66aa 31%, #c69 65%, #cc6688); }

@media screen and (min-width: 960px) { html.route-chapter .heading .container { padding: 120px 180px; } }

html.route-chapter .page-content .container { background: none; box-shadow: none; }

@media screen and (min-width: 960px) { html.route-chapter .page-content .container { padding: 0 120px; } }

html.route-chapter .content { color: white; font-size: 20px; padding: 0 30px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }

html.route-chapter .content strong { color: #f4f1ce; }

@media screen and (min-width: 960px) { html.route-chapter .content { font-size: 32px; padding: 0 60px; } }

html.route-chapter .pagination { background: none; box-shadow: none; }

@media screen and (min-width: 960px) { html.route-chapter .pagination { padding: 60px 60px 120px; } }

html.route-chapter .page-footer { display: none; }

/*# sourceMappingURL=main.css.map */