.highlight {font-size: 14px;word-wrap: break-word }.highlight {color: #FFF;padding: 40px 0 40px 0;margin-bottom: 2em;background: #222;font-family: Arial, Monaco, Consolas, Menlo, monospace }.highlight pre {width: 94%;max-width: 1265px;margin: 0 auto;overflow-x: auto }.highlight code {font-family: Monaco, Consolas, Menlo, monospace }.highlight .hll {background-color: #333 }.highlight .c {color: #777;font-style: italic }.highlight .err {color: #fff }.highlight .g {color: #fff }.highlight .k {color: #fff;font-weight: 700 }.highlight .l {color: #fff }.highlight .n {color: #fff }.highlight .o {color: #fff }.highlight .x {color: #fff }.highlight .punctuation {color: #fff }.highlight .cm {color: #777;font-style: italic }.highlight .cp {color: #fff }.highlight .comment {color: #777;font-style: italic }.highlight .cs {color: #777;font-style: italic }.highlight .gd {color: #fff }.highlight .ge {color: #fff }.highlight .gr {color: #fff }.highlight .gh {color: #fff;font-weight: 700 }.highlight .gi {color: #fff }.highlight .go {color: #444;background-color: #222 }.highlight .gp {color: #fff }.highlight .gs {color: #fff }.highlight .gu {color: #fff;font-weight: 700 }.highlight .gt {color: #fff }.highlight .kc {color: #aa4f85;font-weight: 700 }.highlight .keyword {color: #aa4f85;font-weight: 700 }.highlight .kn {color: #aa4f85;font-weight: 700 }.highlight .kp {color: #aa4f85 }.highlight .kr {color: #aa4f85;font-weight: 700 }.highlight .kt {color: #aa4f85;font-weight: 700 }.highlight .ld {color: #fff }.highlight .m {color: #29c9ff;font-weight: 700 }.highlight .attr-value {color: #29c9ff }.highlight .attr-name {color: #ff0086;font-weight: 700 }.highlight .nb {color: #fff }.highlight .nc {color: #fff }.highlight .no {color: #2f7f8a }.highlight .nd {color: #fff }.highlight .ni {color: #fff }.highlight .ne {color: #fff }.highlight .nf {color: #ff0086;font-weight: 700 }.highlight .nl {color: #fff }.highlight .nn {color: #fff }.highlight .function {color: #fff }.highlight .py {color: #fff }.highlight .nt {color: #fff;font-weight: 700 }.highlight .nv {color: #fff }.highlight .ow {color: #fff }.highlight .w {color: #888 }.highlight .mf {color: #29c9ff;font-weight: 700 }.highlight .mh {color: #29c9ff;font-weight: 700 }.highlight .mi {color: #29c9ff;font-weight: 700 }.highlight .mo {color: #29c9ff;font-weight: 700 }.highlight .sb {color: #29c9ff }.highlight .sc {color: #29c9ff }.highlight .sd {color: #29c9ff }.highlight .s2 {color: #29c9ff }.highlight .se {color: #29c9ff }.highlight .sh {color: #29c9ff }.highlight .si {color: #29c9ff }.highlight .sx {color: #29c9ff }.highlight .sr {color: #29c9ff }.highlight .string {color: #29c9ff }.highlight .ss {color: #29c9ff }.highlight .bp {color: #fff }.highlight .vc {color: #fff }.highlight .vg {color: #fff }.highlight .vi {color: #fff }.highlight .il {color: #29c9ff;font-weight: 700 }@media (min-width:600px) {.highlight {font-size: 17px }}@media (min-width:450px) {.highlight pre {width: 85% }}body, html {background: #fff;color: #666;font-family: Helvetica, Arial, sans-serif;font-size: 16px;margin: 0;padding: 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale }canvas {pointer-events: none }abbr {border-bottom: 1px dotted #666 }.clear {clear: both;display: block }a, a span {transition: color ease-out .3s }a:hover, a:hover span {transition: color ease-out .1s }a:hover {text-decoration: underline }a.header-anchor {display: none;}p {line-height: 1.4;margin: 0 0 1.4em 0 }p code {font-size: .9em }p.thanks {font-size: 15px;line-height: 1.5 }h2 {font-family: Lato, sans-serif;font-weight: 700;font-size: 20px;line-height: 1.3;margin: 0;padding: .5em 0 .9em 0;color: #333;text-transform: uppercase }.column, .container {position: relative;width: 85%;max-width: 1265px;margin: 0 auto }.column {width: 100% }ul li {list-style: none;line-height: 100%;padding-left: 40px;background-position: 12px 2px;background-repeat: no-repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEzLjQ0cHgiIGhlaWdodD0iMTMuNDU4cHgiIHZpZXdCb3g9IjAgMCAxMy40NCAxMy40NTgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEzLjQ0IDEzLjQ1OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzVEODg1OSIgcG9pbnRzPSIwLjAxLDYuNzUgMTMuNDIsNi43NSA2LjcyLDEzLjQ1OCAiLz4NCjxwb2x5Z29uIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMDAyRjJGIiBwb2ludHM9IjAsNi43NSAxMy40NCw2Ljc1IDYuNzE1LDAgIi8+DQo8L3N2Zz4NCg==) }figure {text-align: center;margin-left: -2%;width: 104%;margin-bottom: 40px }figure img {max-width: 98%;padding: 1%;background: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .3) }figure.no-shadow {width: 100%;margin-left: 0 }figure.no-shadow img {box-shadow: none;max-width: 100%;padding: 0 }figcaption {font-size: 90%;margin: .7em auto 1em auto;color: #222;font-style: italic }.shape-reference {visibility: hidden;position: fixed }.masthead a {color: #ddd }.masthead svg {display: none }.masthead svg.behind-meta {position: absolute;left: 53%;top: 30%;z-index: 4 }.masthead svg.left-meta {position: absolute;left: 50%;margin-left: -1060px;top: -10% }svg.left-shape {position: absolute;left: 0;top: 40%;z-index: 1;display: none;pointer-events: none }svg.right-shape {position: absolute;right: 0;top: 80%;z-index: 1;display: none;pointer-events: none }.masthead a:hover {color: #fff }.content {position: relative;padding-bottom: 160px;z-index: 5 }.container:after, .content:after {clear: both;content: '';display: block }.livedemo a {padding: 14px 20px;background: #333;color: #fff !important;font-size: 24px;border-radius: 4px;transition: background .3s ease-out }.livedemo {margin-bottom: 2em }.livedemo.mid {text-align: center;margin-bottom: 4em }.left {float: left }.right {float: right }.column {max-width: 750px }.column:after {content: '';display: block;clear: both }.column ul {padding: 0 0 1em 15px }.column ol {padding: 0 0 1em 40px; max-width: 100%; overflow: auto; }.column li {background-position: 0 7px;line-height: 1.5;padding-bottom: .8em }.column ul li {padding-left: 30px }.column ol li {padding-left: 10px }.boxout {background: #444;padding: 15px;color: #d0d0d0;font-size: 16px;font-style: italic;border-radius: 4px;margin-bottom: 1em }.boxout h1, .boxout h2 {font-size: 22px;color: #fff;margin: 0;padding: 0 0 .8em 0;font-style: normal }.boxout a {color: #fff !important;font-weight: 700 }.boxout p:last-of-type {margin: 0 0 .5em 0;padding: 0 }.hatched {background: #222 url(/images/pattern.svg) }.video-container {height: 35%;max-height: 350px }.masthead h2 {font-size: 24px;margin: 0 0 30px 0;padding: 0;line-height: 1.2;font-family: Lato;color: #fff;text-shadow: 0 2px 2px rgba(0, 0, 0, .75);text-transform: none;letter-spacing: -.04em }.masthead {box-sizing: border-box;-moz-box-sizing: border-box;padding: 30px 0 30px 0;position: relative;margin-bottom: 40px }.masthead.small h2 {font-size: 34px;margin: 0 }.masthead p {font-size: 16px;color: #cecece;max-width: 580px }.masthead.small p {display: none }table {width: 100%;border-spacing: 0;margin-bottom: 2em;font-size: 11px }tr {padding: 0;margin: 0 }td {margin: 0;border-left: 1px solid #ccc;border-top: 1px solid #ccc;padding: .3em }th {padding: .3em;background: #444;color: #fff;border-left: 1px solid #555 }table.left-titled th {text-align: left }tr:first-of-type td {border-top: none }tr:last-of-type td {border-bottom: 1px solid #ccc }td:last-of-type {border-right: 1px solid #ccc }@media (min-width:500px) {table {font-size: 15px }td, th {padding: .5em }figcaption {max-width: 75% }}@media (min-width:615px) {.masthead.small h2 {font-size: 44px }}@media (min-width:800px) {.masthead {padding: 90px 0 0 0;margin-bottom: 120px;overflow: hidden }.masthead.small {height: auto;padding: 40px 0 40px 0;margin-bottom: 60px }.masthead h2 {font-size: 63px;width: 70% }.masthead p {font-size: 23px;padding-bottom: 3em }.masthead.small h2 {font-size: 54px }table {font-size: 16px }td, th {padding: 1em }}@media (min-width:1000px) {body, html {font-size: 20px }.boxout {padding: 30px 40px;font-size: 22px }h2 {font-size: 33px }.boxout h1, .boxout h2 {font-size: 28px }}@media (min-width:1150px) {.masthead svg {display: block }svg.left-shape, svg.right-shape {display: block }}@media (min-width:1200px) {.masthead.small h2 {font-size: 60px }.masthead h2 {width: 65% }}header {height: 180px;padding: 35px 0 0 0;position: relative;z-index: 2;text-align: center }header:after {width: 100%;height: 5px;top: 0;position: absolute;left: 0;content: '' }.home header:after {background: linear-gradient(to right, #fff 0, #ff8000 33%, #008c8c 66%, #000 100%) }.blog header:after {background: linear-gradient(to right, #fff 0, #0085b2 33%, #ff007f 66%, #000 100%) }.tutorials header:after {background: linear-gradient(to right, #fff 0, #50c0fb 33%, #630 66%, #000 100%) }.lab header:after {background: linear-gradient(to right, #fff 0, #ffe63e 33%, #58b23d 66%, #000 100%) }#logo, #logo a, #logo svg {width: 90px;height: 94px;position: relative;display: inline }#logo:after {pointer-events: none;font-size: 11px;font-family: Lato;color: #666;content: 'Aerotwist';text-transform: uppercase;text-align: center;position: absolute;bottom: 0;left: 0;letter-spacing: 4px }nav {text-transform: uppercase;font-family: Lato;font-size: 15px;color: #222;height: 34px;line-height: 34px;margin: 0 }nav ul {padding: 5px 0 0 0;margin: 5px 0 0 0 }nav ul li {display: inline;position: relative;margin-right: 15px;padding: 0;background: 0 0 }nav ul li:last-child {margin-right: 0 }nav ul li a {color: #666;text-decoration: none }nav ul li.active a {color: #222 }nav ul li a:hover {color: #111;text-decoration: none }nav ul li.active:after {content: '';width: 100%;height: 3px;position: absolute;bottom: -4px;left: 0;background: #000 }.home nav ul li.active:after {background: #ff8307 }.blog nav ul li.active:after {background: #da0a7a }.tutorials nav ul li.active:after {background: #00bfff }.lab nav ul li.active:after {background: #f0de3d }nav svg {pointer-events: none;display: none }nav svg#left-line {position: absolute;left: -120px;top: 0 }nav svg#right-line {position: absolute;right: -80px;top: -100px }@media (min-width:750px) {header {height: 200px }nav {font-size: 16px;letter-spacing: 3px }nav ul li.active:after {bottom: -9px;left: -2px }}@media (min-width:950px) {#logo, #logo a, #logo svg {display: block;float: left;width: 90px;height: 94px }nav {display: block;font-size: 16px;float: left;height: 94px;line-height: 94px;margin-left: 200px }nav svg {display: block }nav ul li {letter-spacing: 6px;margin-right: 30px }nav ul li.active:after {bottom: -14px }header {height: 200px;padding: 75px 0 0 0 }}@media (min-width:1050px) {nav ul li {margin-right: 60px }}.new-site {margin: 0 auto;width: 70%;height: 55px;max-width: 855px;background-size: contain;background-position: center center;background-repeat: no-repeat }.home .masthead .container {padding-top: 30px }.home .masthead .main-title {font-family: Lato;text-transform: uppercase;font-size: 20px;font-weight: 700;padding-bottom: 50px;margin: 10px 0 10px 0 }.home .masthead .sub-title {font-family: Garamond, serif;font-weight: 700;font-style: italic;font-size: 20px;color: #ffcd9d;margin-top: 5px;line-height: 1;margin: 0 auto;width: 70%;display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row }.home .masthead .sub-title div {-webkit-flex: 0 0 auto;flex: 0 0 auto;padding: 0 10px }.home .masthead .sub-title div.lines {padding: 0;-webkit-flex: 1 0 auto;flex: 1 0 auto }@media (min-width:400px) {.home .masthead .sub-title {font-size: 24px;margin-top: 8px }.home .masthead .sub-title div.lines {background: url(data:image/svg+xml;base64,PHN2ZyBpZD0ibWFzdGhlYWQtcGF0dGVybiIgd2lkdGg9IjEiIGhlaWdodD0iNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNCQURBREIiIC8+CiAgPHJlY3QgeD0iMCIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0JBREFEQiIgLz4KICA8cmVjdCB4PSIwIiB5PSI2IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjQkFEQURCIiAvPgo8L3N2Zz4K) center center repeat-x }}@media (min-width:500px) {.home .masthead .container {padding-top: 30px }.home .masthead .main-title {font-size: 30px }.new-site {height: 90px;width: 80% }.home .masthead .sub-title {width: 80% }}@media (min-width:635px) {.home .masthead .sub-title {font-size: 29px;margin-top: 10px }.home .masthead .main-title {font-size: 36px;margin: 10px 0 .1em 0 }}@media (min-width:800px) {.home .masthead .container {padding-top: 40px }.new-site {height: 120px;width: 80% }.home .masthead .sub-title {width: 80% }.home .masthead .main-title {font-size: 40px;margin: .15em 0 0 0 }}.home .masthead {text-align: center;position: relative;margin-bottom: 60px;padding: 0;overflow: hidden }.home .masthead a:after {content: '';width: 100%;height: 100%;background-image: radial-gradient(circle farthest-side at center, rgba(0, 0, 0, 0) 25%, rgba(8, 22, 22, .4) 100%);position: absolute;top: 0;left: 0 }.home .masthead a {display: block;width: 100%;height: 100%;text-decoration: none }.home .masthead .container {max-width: 1050px;height: 100% }.home .masthead svg#pattern {position: absolute;left: 0;top: 0 }.home .masthead:after {width: 100%;height: 5px;bottom: 0;position: absolute;left: 0;content: '';background: linear-gradient(to right, #fff 0, #ff8000 33%, #008c8c 66%, #000 100%) }@media (min-width:500px) {.home .masthead {margin-bottom: 80px }}@media (min-width:800px) {.home .masthead {margin-bottom: 140px }}@media (min-width:950px) {.home .masthead {text-align: center;position: relative }.home .masthead .container {padding-top: 35px }.new-site {height: 148px;width: 70% }.home .masthead .sub-title {width: 88% }.home .masthead .main-title {font-size: 60px;margin: .15em 0 0 0 }}@media (min-width:1050px) {.home .masthead .sub-title {width: 68% }}.home .column a, .home p a {color: #ff8307;text-decoration: none }.posts {padding-bottom: 20px;border-bottom: 1px solid #e7e7e7;margin-bottom: 50px }.posts .left {display: block;font-family: Lato;font-weight: 700;width: 75px;float: left;margin-right: 20px }.posts .right {display: block;float: left;width: 65% }.posts ul a {text-decoration: none;display: block }.posts .right span {display: block }.posts .right .title {font-size: 18px;color: #666;margin-bottom: 4px }.posts a:hover .right .title {color: #333 }.posts ul {padding: 0 }.posts ul li {display: block;clear: both;margin-bottom: 35px;padding: 0;background: 0 0;line-height: 1.1 }.posts .date, .posts .year {display: block;text-align: right }.posts .date {color: #ff8307;text-transform: uppercase;font-size: 19px;line-height: 19px }.posts .year {color: #666;text-align: right;font-size: 13px;line-height: 13px }.posts .tags {color: #7ac3c3;font-size: 13px;font-family: Lato }@media (min-width:615px) {.posts .right .title {font-size: 22px }}@media (min-width:950px) {.posts .right {width: 70% }.posts .right .title {font-size: 25px }}.around-the-web ul {padding: 0 }.around-the-web li {margin-bottom: 35px;line-height: 1.1 }.around-the-web .meta, .around-the-web .title {display: block }.around-the-web .title {font-size: 18px;color: #666;margin-bottom: 4px }.around-the-web a {text-decoration: none }.around-the-web a:hover .title {color: #333 }.around-the-web .meta {font-size: 13px;text-transform: uppercase;color: #aaa;font-family: Lato }.around-the-web .location {color: #7ac3c3 }.around-the-web .type {color: #278a76 }@media (min-width:1200px) {.posts {width: 58%;float: left;padding: 0;margin: 0;border: none }.posts p {width: 85% }.around-the-web {width: 38%;float: right }.around-the-web, .posts {margin-bottom: 90px }.around-the-web h2 {font-size: 19px }}footer {min-height: 430px;background: #222 url(/images/pattern.svg);position: relative;color: #ececec;font-size: 17px;clear: both }footer p {padding-right: 0 }footer a {color: #fff;font-weight: 700;text-decoration: none }footer .container {padding-top: 80px }footer .panel {-moz-box-sizing: border-box;box-sizing: border-box;position: relative;width: 100%;max-width: 510px;padding-left: 0 }footer .disclaimer {font-size: 14px;font-style: italic;color: #aaa;clear: both;text-align: center;padding: 50px 0 50px 0;width: 90%;margin: 0 auto }footer h2 {color: #fff;padding: .2em 0 0 0;margin: 0 0 .4em 0 }footer .get-in-touch, footer .subscribe {display: none }@media (min-width:450px) {footer .bio {position: relative;width: 100%;padding-left: 145px }footer .bio:after {content: '';background: url(/images/me_2022.jpg) no-repeat center center;position: absolute;top: 0;left: 10px;display: block;background-size: 120px 120px;width: 120px;height: 120px;border-radius: 50%;box-shadow: 0 3px 4px rgba(0, 0, 0, .3);border: 4px solid #fff }}@media (min-width:550px) {footer .bio {position: relative;width: 100%;padding-left: 195px }footer .bio:after {left: 20px;display: block;background-size: 143px 143px;width: 143px;height: 143px }footer .panel {float: left }}@media (min-width:940px) {footer .bio {width: 55% }footer .bio p:last-child {display: none }footer .get-in-touch, footer .subscribe {display: block;width: 40%;padding-left: 40px;margin-left: 40px;border-left: 1px solid #555 }footer .subscribe {display: none }}@media (min-width:1260px) {footer .bio {width: 35% }footer .get-in-touch, footer .subscribe {width: 27%;display: block }}.blog .masthead.hatched:after {width: 100%;height: 5px;bottom: 0;position: absolute;left: 0;content: '';background: linear-gradient(to right, #fff 0, #0085b2 33%, #ff007f 66%, #000 100%) }.blog hr {height: 1px;background: #ccc;border: none;margin: .5em 0 2.5em 0 }.blog .masthead a {color: #fff;font-weight: 700 }.blog .column a, .blog p a {color: #6ebad3;text-decoration: none }.blog table td:first-of-type {color: #fff;font-weight: 700;background-color: #dd0473 }.blog .meta {color: #fff;background: #222;border-radius: 5px;padding: 20px;margin: -70px 0 30px 0;z-index: 6;max-width: 678px }.blog .column blockquote:after, .blog .meta:after {content: '';width: 108px;height: 50px;opacity: .6;background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4IiBoZWlnaHQ9IjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJ2ZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI1NCIgeTE9IjUwIiB4Mj0iNTQiIHkyPSIwIj4KICAgIDxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzMzMzMzMyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDAwMDAwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cG9seWdvbiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0idXJsKCN2ZykiIHBvaW50cz0iMCwwIDEwOCwwIDAsNTAgIi8+Cjwvc3ZnPgo=);position: absolute;right: 3px;bottom: -50px }.blog .meta:after {display: none }.blog .meta ul {margin: 0;padding: 0 }.blog .meta li {background: 0 0;padding: 0;font-size: 14px;margin: 0 0 16px 0 }.blog .meta li:last-child {margin: 0 }.blog .meta span {display: block;margin-bottom: .3em;font-family: Lato;font-weight: 700;text-transform: uppercase }.blog .meta span.name {color: #919191 }.blog .meta li.last-updated {font-size: 16px }.blog .meta li.tags .value {text-transform: lowercase }.blog .meta li.share .value {display: inline }.blog .meta li.share .value a {color: #fff;text-decoration: none }.blog .footer-share {padding-top: 1.4em;border-top: 1px dotted #ccc;font-size: 85%;color: #999 }.blog .footer-share span:first-of-type {padding-left: 10px }.blog .footer-share a {color: #777;text-decoration: none }.blog .footer-share a:hover {text-decoration: underline;color: #444 }.footer-share .value:last-child {padding-left: 17px }.blog .column blockquote {-moz-box-sizing: border-box;box-sizing: border-box;max-width: 270px;padding: 25px;font-size: 16px;position: relative;width: 100%;color: #666;font-family: Lato;font-weight: 700;text-shadow: 0 1px 1px rgba(255, 255, 255, .9);border-radius: 4px;border-top: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;background: #f7f7f7;background: linear-gradient(to bottom, #fefefe 0, #f7f7f7 8%, #f7f7f7 92%, #fefefe 100%);margin: 0 0 80px 0;display: none }.blog .column blockquote:after {opacity: .05 }.blog .column blockquote p {font-weight: 700;margin: 0;padding: 0 }.blog .column.left blockquote.quote, .blog .column.right blockquote.quote {display: block;margin-left: 18px;margin-right: 0;margin-bottom: 1em;padding: .4em 0 .4em 16px;border-left: 6px solid #dd0473;border-radius: 0;border-top: none;border-bottom: none;max-width: 100%;width: 100%;float: none;background: 0 0;font-size: 16px;font-family: Helvetica, Arial, sans-serif;line-height: 1.4 }.blog .column blockquote p {font-weight: 400;color: #222 }.blog .column blockquote.quote:after {display: none }.blog .column blockquote.quote footer {margin-top: .7em;color: #222;min-height: 0;height: auto;background: 0 0 }.blog .livedemo a:hover {background: #dd0473 }.blog .posts ul {padding-left: 0 }.blog .posts .date {color: #da0a7a }.blog .posts {padding: 0;margin: 0;border: none }@media (min-width:615px) {.blog .column blockquote {display: block }.blog .column.right blockquote {margin-right: 40px;float: left }.blog .column.left blockquote {margin-left: 40px;float: right }}@media (min-width:800px) {.blog .meta {padding: 32px 36px 42px 36px;margin: -90px 0 30px 0 }.blog .meta li {margin: 0 0 25px 0;font-size: 16px }.blog .meta li.last-updated {font-size: 21px }.blog .column blockquote {padding: 40px;font-size: 23px;max-width: 350px }.blog .column.right blockquote {margin-right: 40px;float: left }.blog .column.left blockquote {margin-left: 40px;float: right }.blog .posts ul li {float: left;width: 48%;clear: none }.blog .posts ul li:nth-child(2n+1) {clear: left }.blog-listing .column.left {width: 100%;max-width: 100% }}@media (min-width:1000px) {.blog .masthead h2 {width: 80% }.blog .column.right blockquote {margin-left: -180px }.blog .column.left blockquote {margin-right: -180px }.blog .column.left blockquote.quote, .blog .column.right blockquote.quote {font-size: 20px }}@media (min-width:1150px) {.blog .meta {position: absolute;width: 318px;top: -350px;right: 0;margin: 0 }.blog .meta:after {display: block }}@media (min-width:1200px) {.blog .column blockquote {padding: 50px;font-size: 25px;max-width: 450px }.blog-listing .posts {width: 100%;max-width: 100% }.blog .column.right blockquote {margin-left: -300px }.blog .column.left blockquote {margin-right: -300px }}.tutorials .youtube-embed {width: 100%;max-width: 960px;margin: -145px auto 0 auto;position: relative }.tutorials .youtube-embed img {width: 100%;background: #222 }.tutorials .youtube-embed a {display: block;position: relative }.tutorials .youtube-embed a::after {content: "";width: 96px;height: 96px;background: url(/images/baseline-play_circle_filled-24px.svg);background-size: cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) }.tutorials .masthead:after {width: 100%;height: 5px;bottom: 0;position: absolute;left: 0;content: '';background: linear-gradient(to right, #fff 0, #50c0fb 33%, #630 66%, #000 100%) }.tutorials .posts .date {color: #50c0fb }.tutorials .posts {padding: 0;margin: 0;border: none }.tutorials .column a, .tutorials p a {color: #50c0fb;text-decoration: none }.tutorials .livedemo a:hover {background: #50c0fb }.tutorials .masthead {background-size: contain;background-position: center center;background-repeat: no-repeat;height: 105px }.tutorials .masthead.hatched {background-repeat: repeat }.tutorials-listing.tutorials .masthead {height: auto }.tutorials .meta {color: #fff;background: #222;border-radius: 5px;padding: 20px;margin: 0 0 30px 0;z-index: 6;max-width: 678px;display: none }.tutorials .meta:after {content: '';width: 108px;height: 50px;opacity: .6;background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4IiBoZWlnaHQ9IjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJ2ZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI1NCIgeTE9IjUwIiB4Mj0iNTQiIHkyPSIwIj4KICAgIDxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6IzMzMzMzMyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDAwMDAwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cG9seWdvbiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0idXJsKCN2ZykiIHBvaW50cz0iMCwwIDEwOCwwIDAsNTAgIi8+Cjwvc3ZnPgo=);position: absolute;right: 3px;bottom: -50px }.tutorials .meta:after {display: none }.tutorials .meta ul {margin: 0;padding: 0 0 1em 0 }.tutorials .meta li {background: 0 0;padding: 0;font-size: 14px;margin: 0 0 1em 0;color: #777;font-family: Lato;font-weight: 700;text-transform: uppercase }.tutorials .meta li a {color: #eee;display: block;text-decoration: none }.tutorials .meta li a:hover {color: #50c0fb }.tutorials .meta li:last-child {margin: 0 }.tutorials .meta span {display: block;margin-bottom: .3em;font-family: Lato;font-weight: 700;text-transform: uppercase }.tutorials .meta span.name {color: #919191 }.tutorials .meta li.last-updated {font-size: 16px }.tutorials .meta li.tags .value {text-transform: lowercase }.tutorials .meta li.share .value {display: inline }.tutorials .meta li.share .value a {color: #fff;text-decoration: none }.tutorials .meta li.share .value:last-child {padding-left: 14px;margin-left: 10px;background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiAgPGNpcmNsZSBmaWxsPSIjREQwNDc0IiBjeD0iMiIgY3k9IjIiIHI9IjIiIC8+Cjwvc3ZnPgo=) no-repeat left center }@media (min-width:440px) {.tutorials .masthead {height: 132px }.tutorials .youtube-embed {margin: -172px auto 0 auto }}@media (min-width:660px) {.tutorials .masthead {height: 180px }.tutorials .youtube-embed {margin: -220px auto 0 auto }}@media (min-width:800px) {.tutorials .masthead {height: 240px }.tutorials .meta {padding: 32px 36px 42px 36px;margin: -90px 0 30px 0 }.tutorials .meta li {margin: 0 0 1em 0;font-size: 16px }.tutorials .meta li.last-updated {font-size: 21px }.tutorials-listing .column.left {width: 100%;max-width: 100% }.tutorials .posts ul li {float: left;width: 48%;clear: none }.tutorials .posts ul li:nth-child(2n+1) {clear: left }.tutorials .youtube-embed {margin: -360px auto 0 auto }}@media (min-width:960px) {.tutorials .youtube-embed {width: 85%;max-width: 1265px;margin: -320px auto 30px auto }.tutorials .youtube-embed img {max-width: 750px;min-height: 425px;border-radius: 4px;box-shadow: 0 3px 4px rgba(0, 0, 0, .3) }.tutorials .youtube-embed a {max-width: 750px }}@media (min-width:1000px) {.tutorials .masthead {height: 280px }.tutorials .youtube-embed {margin: -360px auto 30px auto }}@media (min-width:1200px) {.tutorials .masthead {height: 340px }.tutorials-listing .posts {width: 100% }.tutorials .youtube-embed {margin: -400px auto 30px auto }.tutorials .youtube-embed a::after {width: 128px;height: 128px }}@media (min-width:1370px) {.tutorials .meta {position: absolute;width: 318px;top: -20px;right: 0;margin: 0;display: block }.tutorials .meta:after {display: block }}@media (min-width:1500px) {.tutorials .masthead {height: 445px;background-size: 1500px 445px }.tutorials-listing .masthead {background-size: auto }.tutorials .youtube-embed {margin: -500px auto 30px auto }.tutorials .youtube-embed img {max-width: 960px;min-height: 545px }.tutorials .youtube-embed a {max-width: 960px }.tutorials .youtube-embed a::after {width: 152px;height: 152px }}.lab .fwa {width: 100px;height: 100px;background: url(/static/misc/fwa-badge.png) center center no-repeat;text-indent: -1000em;position: absolute;top: 0;right: 0 }.lab .masthead:after {width: 100%;height: 5px;bottom: 0;position: absolute;left: 0;content: '';background: linear-gradient(to right, #fff 0, #ffe63e 33%, #58b23d 66%, #000 100%) }.lab .posts .date {color: #58b23d }.lab .posts {padding: 0;margin: 0;border: none }.lab .column a, .lab p a {color: #58b23d;text-decoration: none }.lab .livedemo a:hover {background: #58b23d }.lab .masthead {background-size: contain;background-position: center center;background-repeat: no-repeat;height: 105px }.lab-listing.lab .masthead {height: auto }@media (min-width:440px) {.lab .masthead {height: 132px }}@media (min-width:660px) {.lab .masthead {height: 180px }}@media (min-width:800px) {.lab .masthead {height: 240px }}@media (min-width:1000px) {.lab .masthead {height: 280px }}@media (min-width:1200px) {.lab .masthead {height: 340px }}@media (min-width:1500px) {.lab .masthead {height: 445px;background-size: 1500px 445px }.lab-listing .masthead {background-size: auto }}@media (min-width:800px) {.lab-listing .column.left {width: 100%;max-width: 100% }.lab .posts ul li {float: left;width: 48%;clear: none }.lab .posts ul li:nth-child(2n+1) {clear: left }}@media (min-width:1200px) {.lab-listing .posts {width: 100% }}