*{margin:0;padding:0;box-sizing:border-box}.group::after{content:"";display:table;clear:both}.embed-nav{background:#3d3d3e;font-family:"Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;font-size:13px;line-height:1.4;position:relative;z-index:1;position:relative;white-space:nowrap}.embed-nav ul{list-style:none}.embed-nav li{display:inline-block}.embed-nav a{text-decoration:none;color:#76daff;display:inline-block;position:relative;padding:8px 16px 8px}@media (max-width: 500px){.embed-nav a{padding:6px 10px}}.embed-nav a.active{background:#ccc;color:black}.embed-nav a.active:hover,.embed-nav a.active:focus{border-top-color:transparent}.embed-nav a.active:after{content:"";position:absolute;top:100%;left:50%;border-top:8px solid #ccc;border-left:8px solid transparent;border-right:8px solid transparent;margin-left:-8px}.cp-embed-logo{fill:white}.embed-nav .logo-wrap{position:absolute;right:0;top:0;border:0}.embed-nav .logo-wrap a{color:white;border:0;margin-right:0}@media (max-width: 550px){.embed-nav .logo-wrap #embed-codepen-logo,.embed-nav .logo-wrap .on{display:none}}.oldie .embed-nav .logo-wrap .logo,.oldie .embed-nav .logo-wrap .on{display:none}#embed-codepen-logo{display:inline-block;width:96px;height:17px;background-size:96px;margin-left:5px;vertical-align:top}#output{height:100%;overflow:hidden}#output.embed-scope .box{width:100%}#output pre{width:100%;white-space:pre-wrap;font-family:"Source Code Pro", Menlo, Consolas, Monaco, monospace;font-size:14px;line-height:1.45;padding:15px;-moz-tab-size:2;tab-size:2}#output pre code{font-family:"Source Code Pro", Menlo, Consolas, Monaco, monospace}html.ios #output pre{word-break:break-all}#output pre,#output iframe{height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.code-box{position:relative}.action-button{position:absolute;bottom:20px;right:20px;font-family:"Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;background:rgba(0,0,0,0.2);color:white;text-decoration:none;font-size:11px;text-transform:uppercase;padding:10px 10px 10px 10px;background:#222;border:1px solid rgba(255,255,255,0.2);opacity:0;-webkit-transform:translateZ(0);transform:translateZ(0);transition:opacity 0.2s ease}.action-button:hover,.action-button:active{color:#76daff;border-color:rgba(255,255,255,0.3)}.action-button.are-viewing{text-decoration:underline}body:hover .action-button{opacity:1}.view-compiled-button{opacity:1}#html-box,#css-box,#js-box,#result-box{display:none}#html-box.active,#css-box.active,#js-box.active,#result-box.active{display:block;height:100%}#result-iframe{width:100%;height:100%;border:none;background:white;overflow:scroll;-webkit-overflow-scrolling:touch}.ios-scroll-fix #result-box{-webkit-overflow-scrolling:touch;overflow-y:scroll}