.btn-codereveal,.d-container{font-family:europa,sans-serif}.d-container,.d-flex{box-sizing:border-box}.d-btn-primary{background:#7a7a7a;color:#fff;width:12em;text-align:center;transition:background .4s ease-in-out}.d-btn-primary:hover{background:#919393}.d-btn-primary.t-purple{background:#484281}.d-btn-primary.t-purple:hover{background:#2a2749}.d-btn-primary.t-blue{background:#38ABCC}.d-btn-primary.t-blue:hover{background:#2f8199}.d-btn-secondary{background:0 0;border:1px solid #111;color:#111}.btn-codereveal{margin-left:1em;background:url(/img/icon_view.svg) 10px 50% no-repeat;border:1px solid #b6b6b6;border-radius:5px;color:#111;display:inline-block;font-size:.9em;padding:.75em 2em .75em 4em;text-transform:uppercase;text-decoration:none;text-align:left;transition:background .4s ease}@media all and (min-width:48em){.btn-codereveal{margin-left:0}}.btn-codereveal:hover{background-color:#ddd}.codeblock+.d-container{margin:0 auto 2em}.codeblock{background:#222;color:#fff;display:block;line-height:1.4;margin:2em 1em;padding:1em;position:relative;white-space:pre-wrap}@media all and (min-width:40em){.codeblock{margin:2em auto 0;padding:1em}.d-navigation li{float:left}}.codeblock code{display:block;max-width:660px;margin:0 auto}.codereveal-block{display:block;max-width:650px;margin:2em auto}.codeblock.js-code-is-hidden{display:none}.codeblock.js-code-is-visible{-webkit-animation:reveal .5s .1s ease-in-out both;animation:reveal .5s .1s ease-in-out both;display:block}.d-container:first-child{margin-top:0}.d-container{background:#f7f7f7;border-bottom:1px solid #eee;margin:2em auto;padding:2em 5%;width:100%}.d-container:after{clear:both;content:"";display:table}.d-container>h1{color:#333;font-size:2em;line-height:1.2;margin:0 0 .5em;text-align:center}@media all and (min-width:30em){.d-container>h1{font-size:3em}}.d-frame{background:#333;border:1px solid #ddd;clear:both;margin:0 auto;max-height:30em;max-width:30em;overflow:hidden}.d-navigation{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin:2em auto 0}.d-navigation ul{padding-left:0}.d-navigation li a{border-radius:10px;display:block;margin:1em;padding:.75em 1em;text-decoration:none}.d-flexbox-navigation{background:#484281;border:1px solid #111;padding:2em 2.5em 1em}.d-btn-primary{border:none;border-radius:5px;padding:.5em 1em}.d-flexbox-navigation ul{padding-left:0;display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 1 20%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;transition:all .4s ease-in-out}.d-navigation ul{margin-left:-1em;padding:0}.d-navigation li{list-style:none;padding-left:1em}.d-flexbox-navigation li{display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 1 20%;list-style:none;-webkit-box-align:center;align-items:center;-webkit-box-pack:start;justify-content:flex-start;transition:all .4s ease-in-out}.d-flexbox-navigation li a{border:1px solid #111;padding:1.5em;display:block;background:#fff;border-radius:3px;text-decoration:none;text-align:center;color:#333;width:100%;transition:all .4s ease-in-out}.d-flexbox-navigation li a:hover{background:#a303cb;color:#fff}.d-flex{display:-webkit-box;display:flex;margin:0 auto;-webkit-box-align:stretch;align-items:stretch;flex-wrap:wrap}@media all and (min-width:49em){.d-flex{flex-wrap:nowrap}}.d-flex li{color:#fff;display:-webkit-box;display:flex;list-style:none;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:1em}.d-flex li:nth-of-type(1){background:#484281}.d-flex li:nth-of-type(2){background:#5248af}.d-flex li:nth-of-type(3){background:#786bfa}.d-flex li:nth-of-type(4){background:#aba3f9}.d-flex li:nth-of-type(5){background:#a303cb}.d-ex1,.d-ex2{max-width:600px}.d-ex3,.d-ex4{max-width:1000px}@media all and (max-width:48em){.d-ex4{max-width:320px;-webkit-box-align:center}}.d-ex5,.d-ex6{max-width:600px}.d-ex1 li:nth-of-type(1){-webkit-box-flex:2;flex:2 0 100px}.d-ex1 li:nth-of-type(2){-webkit-box-flex:0;flex:0 0 150px}.d-ex1 li:nth-of-type(3),.d-ex2 li:nth-of-type(1){-webkit-box-flex:2;flex:2 0 100px}.d-ex2 li:nth-of-type(2){-webkit-box-flex:0;flex:0 0 150px}.d-ex2 li:nth-of-type(3){-webkit-box-flex:2;flex:2 0 50px}.d-ex3 li:nth-of-type(1){-webkit-box-flex:3;flex:3 0 0}.d-ex3 li:nth-of-type(2){-webkit-box-flex:1;flex:1 0 0}.d-ex3 li:nth-of-type(3){-webkit-box-flex:2;flex:2 0 0}.d-ex4 li:nth-of-type(1){-webkit-box-flex:1;flex:1 0 150px}.d-ex4 li:nth-of-type(2){-webkit-box-flex:3;flex:3 0 200px}.d-ex4 li:nth-of-type(3){-webkit-box-flex:2;flex:2 0 175px}.d-ex4 li:nth-of-type(4){-webkit-box-flex:4;flex:4 0 225px}.d-ex5 li:nth-of-type(1){-webkit-box-flex:1;flex:1 1 200px}.d-ex5 li:nth-of-type(2){-webkit-box-flex:3;flex:3 2 200px}.d-ex5 li:nth-of-type(3){-webkit-box-flex:2;flex:2 3 200px}.d-ex5 li:nth-of-type(4){-webkit-box-flex:4;flex:4 1 200px}.d-ex6 li:nth-of-type(1){-webkit-box-flex:1;flex:1 1 150px}.d-ex6 li:nth-of-type(2){-webkit-box-flex:3;flex:3 2 400px}.d-ex6 li:nth-of-type(3){-webkit-box-flex:2;flex:2 3 400px}.d-ex6 li:nth-of-type(4){-webkit-box-flex:4;flex:4 0 200px}.d-flex-order{display:-webkit-box;display:flex;max-width:100%;margin:0 auto;flex-wrap:wrap;-webkit-box-pack:start;justify-content:flex-start;-webkit-box-align:stretch;align-items:stretch}.d-flex-order>li{display:-webkit-box;display:flex;-webkit-box-flex:0;flex:0 0 100%;list-style:none}@media all and (min-width:48em){.d-container>h1{font-size:3.5em}.d-flex-order>li{-webkit-box-flex:0;flex:0 0 33%}}.d-flex-order>li a{color:#333;background:#fff;border:1px solid #ddd;display:block;width:100%;margin:1em;padding:1.5em;text-decoration:none;transition:background .35s ease}.d-flex-order>li a:hover{background:#eee}.d-flex-order>li h2{display:block;font-size:2.2em;line-height:1.3}.d-flex-order>li time{color:#666;display:block;margin:.5em 0 1em}.d-flex-order>li p{display:-webkit-box;display:flex}.d-flex-order>li.d-flex-pinned{-webkit-box-ordinal-group:0;order:-1;-webkit-box-flex:0;flex:0 0 100%}@media all and (min-width:48em){.d-flex-order>li.d-flex-pinned{-webkit-box-flex:0;flex:0 0 66%}}.d-flex-stretch{display:-webkit-box;display:flex;max-width:960px;margin:0 auto;flex-wrap:wrap;-webkit-box-pack:start;justify-content:flex-start;-webkit-box-align:stretch;align-items:stretch}.d-flex-stretch>div{display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 0 30%;border:1px solid #ddd;border-left:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;padding:2em;background:#fff}.d-flex-stretch>div:first-child{border-left:1px solid #ddd}.d-flex-stretch h2{margin:0 0 1em}.d-flex-vertical{-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;min-height:30em}.d-flex-vertical-center{display:-webkit-box;display:flex;background:#fff;color:#333;padding:2.5em;-webkit-box-flex:0;flex:0 0 200px;border:1px solid #ddd}@media all and (min-width:30em){.d-flex-vertical-center{-webkit-box-flex:0;flex:0 0 400px}}.is-removing{-webkit-animation:flexRemove .5s .5s ease forwards 1;animation:flexRemove .5s .5s ease forwards 1}.is-adding{-webkit-animation:flexInsert .5s .5s ease forwards 1;animation:flexInsert .5s .5s ease forwards 1}@-webkit-keyframes flexInsert{0%{-webkit-transform:scale(0);transform:scale(0)}70%{-webkit-transform:scale(1.05);transform:scale(1.05)}80%{-webkit-transform:scale(.95);transform:scale(.95)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes flexInsert{0%{-webkit-transform:scale(0);transform:scale(0)}70%{-webkit-transform:scale(1.05);transform:scale(1.05)}80%{-webkit-transform:scale(.95);transform:scale(.95)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes flexRemove{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);transform:scale(0)}}@keyframes flexRemove{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);transform:scale(0)}}