@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700);.codrops-header,.content,.related,.related>a{text-align:center}.content{padding:0 1em;margin:0 auto;position:relative}.codrops-header{width:100%;height:100%;position:absolute;top:0;z-index:1000;font-size:1.5em}.codrops-header h1{position:absolute;font-weight:700;font-size:3.5em;line-height:1.2;color:#fff;z-index:1000;padding:0;margin:0;left:0;letter-spacing:5px;width:51%;top:53%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.codrops-header h1 span{display:block;font-size:35%}.codrops-header h1 a{color:#eff62b}.codrops-header h1 a:focus,.codrops-header h1 a:hover{color:#fff}.codrops-header h1 span::after,.codrops-header h1 span::before{content:' ― ';font-weight:200}.codrops-top{width:100%;font-weight:500;font-size:.69em;line-height:2.2;padding:1em 0;position:absolute;z-index:100;text-transform:uppercase;letter-spacing:1px}.codrops-top a{color:#fff;display:inline-block;padding:1em 2em;text-decoration:none;letter-spacing:2px}.codrops-top span.right{float:right}.codrops-top span.right a{display:block;float:left}.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:400;font-style:normal;font-variant:normal;font-family:codropsicons;line-height:1;speak:none;-webkit-font-smoothing:antialiased}.codrops-icon-drop:before{content:"\e001"}.codrops-icon-prev:before{content:"\e004"}.codrops-demos{padding:3em 0}.codrops-demos a{font-weight:700;font-size:.85em;text-transform:uppercase;letter-spacing:1px;padding:.5em 0;margin:0 1.5em;display:inline-block;border-bottom:2px solid transparent}.codrops-demos a.current-demo{color:#333;border-color:#333}ul.ref{padding:0;margin:0;list-style:none}ul.ref li{padding:1em 0}.related{font-weight:500;padding:5em 0 4em}.related>a{width:calc(100% - 20px);max-width:340px;border:1px solid initial;display:inline-block;margin:20px 10px;padding:25px}.related a img{max-width:100%;opacity:.8}.related a:active img,.related a:hover img{opacity:1}.related a h3{margin:0;font-weight:400;font-size:.925em;padding:1em 0 .3em;max-width:300px;text-align:left}@media screen and (max-width:60em){.codrops-header h1{font-size:7em}}@media screen and (max-width:30em){.wrap{height:100vh!important;background:#3d4955}.codrops-header{top:100%}.codrops-header h1{padding-top:5em}.codrops-header h1 i{font-size:42%;max-width:90%}.codrops-icon{font-size:1.5em}.codrops-icon span{display:none}}