*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box}.clearfix:before,.clearfix:after{display:table;content:''}.clearfix:after{clear:both}a{outline:0;text-decoration:none}a:hover,a:focus{color:#00aedf}section{padding:1em;text-align:center}.content{margin:0 auto;max-width:100%}.content>h2{clear:both;margin:0;padding:2em 1% 2em;color:#484b54;font-weight:800;font-size:1em}.content>h2:first-child{padding-top:0}.codrops-header{margin:0 auto;padding:2em 1em;text-align:center}.codrops-header h1{margin:0;font-weight:800;font-size:4em;line-height:1.3}.codrops-header h1 span{display:block;padding:0 0 .6em .1em;color:#74777b;font-weight:300;font-size:45%}.codrops-demos{clear:both;padding:1em 0 0;text-align:center}.content+.codrops-demos{padding-top:5em}.codrops-demos a{display:inline-block;margin:0 5px;padding:1em 1.5em;text-transform:none;font-weight:bold}.codrops-demos a:hover,.codrops-demos a:focus,.codrops-demos a.current-demo{background:#3c414a;color:#fff}.codrops-top{width:100%;text-transform:none;font-weight:800;font-size:.69em;line-height:2.2}.codrops-top a{display:inline-block;padding:1em 2em;text-decoration:none;letter-spacing:1px}.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:normal;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"}.related{clear:both;padding:6em 1em;font-size:120%}.related>a{display:inline-block;margin:10px 10px;padding:15px;border:1px solid #4f7f90;text-align:center}.related a:hover{border-color:#39545e}.related a img{max-width:100%;opacity:.8}.related a:hover img,.related a:active img{opacity:1}.related a h3{margin:0;padding:.5em 0 .3em;max-width:300px;text-align:left}body #cdawrap{background:0;top:50px;border:0}body #cdawrap a{color:#fff !important}body #cda-remove{color:#fff}@media screen and (max-width:25em){.codrops-header{font-size:50%}.codrops-icon span{display:none}}.grid{position:center;clear:both;margin:0 auto;padding:10px 0px;float:right;max-width:100%x;list-style:none;text-align:center}.grid figure{position:relative;float:left;overflow:hidden;margin:5px 10px;max-height:360px;width:31%;height:200px;background:#3085a3;text-align:center;cursor:pointer}.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:.8}.grid figure figcaption{padding:1.5em;color:#fff;text-transform:none;font-size:18px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.grid figure figcaption::before,.grid figure figcaption::after{padding:1em;pointer-events:none}.grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}.grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}.grid figure h2{word-spacing:-0.15em;font-weight:300}.grid figure h2 span{font-weight:800}.grid figure h2,.grid figure p{margin:0}.grid figure p{letter-spacing:1px;font-size:68.5%}figure.effect-jazz{background:rgba(26,22,21,0.8)}figure.effect-jazz img{background:rgba(26,22,21,0.8);margin:-10px 0 0 -10px;max-width:none;width:-webkit-calc(100% + 10px);width:calc(100% + 10px);opacity:.5;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(10px,10px,0);transform:translate3d(10px,10px,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}figure.effect-jazz figcaption::after,figure.effect-jazz img,figure.effect-jazz p{font-size:18px;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}figure.effect-jazz figcaption::after{position:absolute;top:0;left:0;width:100%;height:100%;border-top:1px solid #fff;border-bottom:1px solid #fff;content:'';opacity:0;-webkit-transform:rotate3d(0,0,1,45deg) scale3d(1,0,1);transform:rotate3d(0,0,1,45deg) scale3d(1,0,1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}figure.effect-jazz h2,figure.effect-jazz p{opacity:1;-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1)}figure.effect-jazz h2{Font-size:30px;padding-top:16%;-webkit-transition:-webkit-transform .35s;transition:transform .35s}figure.effect-jazz p{padding:.5em 2em;text-transform:none;font-size:.85em;opacity:0}figure.effect-jazz:hover img{opacity:.2;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}figure.effect-jazz:hover figcaption::after{opacity:1;-webkit-transform:rotate3d(0,0,1,45deg) scale3d(1,1,1);transform:rotate3d(0,0,1,45deg) scale3d(1,1,1)}figure.effect-jazz:hover h2,figure.effect-jazz:hover p{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}figure.effect-lexi{background:rgba(26,22,21,0.8)}figure.effect-lexi img{background:rgba(26,22,21,0.8);margin:-10px 0 0 -10px;max-width:none;width:-webkit-calc(100% + 10px);width:calc(100% + 10px);opacity:.2;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(10px,10px,0);transform:translate3d(10px,10px,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}figure.effect-lexi figcaption::before,figure.effect-lexi p{font-size:18px;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}figure.effect-lexi figcaption::before{position:absolute;right:-100px;bottom:-100px;width:300px;height:300px;border:2px solid rgba(26,22,21,0.2);border-radius:50%;box-shadow:0 0 0 900px rgba(28,22,21,0.1);content:'';opacity:0;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}figure.effect-lexi:hover img{opacity:.6;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-lexi h2{font-size:30px;text-align:left !important;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(2px,2px,0);transform:translate3d(2px,2px,0)}figure.effect-lexi p{position:absolute;right:0;bottom:0;padding:0 1.5em 1.5em 0;width:140px;text-align:right;opacity:0;-webkit-transform:translate3d(20px,20px,0);transform:translate3d(20px,20px,0)}figure.effect-lexi:hover figcaption::before{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}figure.effect-lexi:hover h2,figure.effect-lexi:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-duke{background:-webkit-linear-gradient(-45deg,#34495e 0%,#cc6055 100%);background:linear-gradient(-45deg,#34495e 0%,#cc6055 100%)}figure.effect-duke img,figure.effect-duke p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}figure.effect-duke:hover img{opacity:.1;-webkit-transform:scale3d(2,2,1);transform:scale3d(2,2,1)}figure.effect-duke h2{-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}figure.effect-duke p{position:absolute;bottom:0;left:0;margin:20px;padding:30px;border:2px solid #fff;text-transform:none;font-size:90%;opacity:0;-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1);-webkit-transform-origin:50% -100%;transform-origin:50% -100%}figure.effect-duke:hover h2,figure.effect-duke:hover p{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}@media screen and (max-width:50em){.content{padding:0 10px;text-align:center}.grid figure{display:inline-block;float:none;margin:10px auto;width:100%}}