@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-family:'codropsicons';src:url(../fonts/codropsicons/codropsicons.eot);src:url(../fonts/codropsicons/codropsicons.eot?#iefix) format('embedded-opentype') , url(../fonts/codropsicons/codropsicons.woff) format('woff') , url(../fonts/codropsicons/codropsicons.ttf) format('truetype') , url(../fonts/codropsicons/codropsicons.svg#codropsicons) format('svg');font-weight:normal;font-style:normal}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{font-size:100%;padding:0;margin:0}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}body{font-family:'Lato',Calibri,Arial,sans-serif;color:#b3b9bf;background:#f9f9f9}a{color:#888;text-decoration:none}a:hover,a:active{color:#333}.container>header{margin:0 auto;padding:2em;text-align:center;background:rgba(0,0,0,.01)}.container>header h1{font-size:2.625em;line-height:1.3;margin:0;font-weight:300}.codrops-top{background:#fff;background:rgba(255,255,255,.6);text-transform:uppercase;width:100%;font-size:.69em;line-height:2.2}.codrops-top a{padding:0 1em;letter-spacing:.1em;color:#888;display:inline-block}.codrops-top a:hover{background:rgba(255,255,255,.95);color:#333}.codrops-top span.right{float:right}.codrops-top span.right a{float:left;display:block}.codrops-icon:before{font-family:'codropsicons';margin:0 4px;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}.codrops-icon-drop:before{content:"\e001"}.codrops-icon-prev:before{content:"\e004"}.codrops-icon-archive:before{content:"\e002"}.codrops-icon-next:before{content:"\e000"}.codrops-icon-about:before{content:"\e003"}.codrops-demos{padding-top:1em;font-size:.9em}.codrops-demos a{display:inline-block;margin:.5em;padding:.7em 1.1em;border:3px solid #b3b9bf;color:#b3b9bf;font-weight:700}.codrops-demos a:hover,.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{border-color:#2c3f52;color:#2c3f52}@media screen and (max-width:25em){.codrops-icon span{display:none}}.grid{padding:20px 20px 100px 20px;max-width:1300px;margin:0 auto;list-style:none;text-align:center}.grid li{display:inline-block;width:280px;margin:0;padding:20px;text-align:left;position:relative}.grid figure{margin:0;position:relative}.grid figure img{max-width:100%;display:block;position:relative}.grid figcaption{position:absolute;top:0;left:0;padding:20px;background:#2c3f52;color:#ed4e6e;background-color:#ffca01}.grid figcaption h3{margin:0;padding:0;color:#fff}.grid figcaption a{text-align:center;padding:5px 10px;border-radius:2px;display:inline-block;background:#ed4e6e;color:#fff}.cs-style-1 figcaption{height:100%;width:100%;opacity:0;text-align:center;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .3s , opacity .3s;-moz-transition:-moz-transform .3s , opacity .3s;transition:transform .3s , opacity .3s}.no-touch .cs-style-1 figure:hover figcaption,.cs-style-1 figure.cs-hover figcaption{opacity:1;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px);-ms-transform:translate(15px,15px);transform:translate(15px,15px)}.cs-style-1 figcaption h3{margin-top:70px}.cs-style-1 figcaption span{display:block}.cs-style-1 figcaption a{margin-top:30px}.cs-style-2 figure img{z-index:10;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s}.no-touch .cs-style-2 figure:hover img,.cs-style-2 figure.cs-hover img{-webkit-transform:translateY(-90px);-moz-transform:translateY(-90px);-ms-transform:translateY(-90px);transform:translateY(-90px)}.cs-style-2 figcaption{height:90px;width:240px;top:auto;bottom:10px}.cs-style-2 figcaption a{position:absolute;right:21px;top:69px;width:131px;background-color:#2b2b2b}.cs-style-3 figure{overflow:hidden}.cs-style-3 figure img{-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s}.no-touch .cs-style-3 figure:hover img,.cs-style-3 figure.cs-hover img{-webkit-transform:translateY(-50px);-moz-transform:translateY(-50px);-ms-transform:translateY(-50px);transform:translateY(-50px)}.cs-style-3 figcaption{height:100px;width:100%;top:auto;bottom:0;opacity:0;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .4s , opacity .1s .3s;-moz-transition:-moz-transform .4s , opacity .1s .3s;transition:transform .4s , opacity .1s .3s}.no-touch .cs-style-3 figure:hover figcaption,.cs-style-3 figure.cs-hover figcaption{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform .4s , opacity .1s;-moz-transition:-moz-transform .4s , opacity .1s;transition:transform .4s , opacity .1s}.cs-style-3 figcaption a{position:absolute;bottom:20px;right:20px}.cs-style-4 li{-webkit-perspective:1700px;-moz-perspective:1700px;perspective:1700px;-webkit-perspective-origin:0 50%;-moz-perspective-origin:0 50%;perspective-origin:0 50%}.cs-style-4 figure{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.cs-style-4 figure>div{overflow:hidden}.cs-style-4 figure img{-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s}.no-touch .cs-style-4 figure:hover img,.cs-style-4 figure.cs-hover img{-webkit-transform:translateX(25%);-moz-transform:translateX(25%);-ms-transform:translateX(25%);transform:translateX(25%)}.cs-style-4 figcaption{height:100%;width:50%;opacity:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotateY(-90deg);-moz-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-transition:-webkit-transform .4s , opacity .1s .3s;-moz-transition:-moz-transform .4s , opacity .1s .3s;transition:transform .4s , opacity .1s .3s}.no-touch .cs-style-4 figure:hover figcaption,.cs-style-4 figure.cs-hover figcaption{opacity:1;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition:-webkit-transform .4s , opacity .1s;-moz-transition:-moz-transform .4s , opacity .1s;transition:transform .4s , opacity .1s}.cs-style-4 figcaption a{position:absolute;bottom:20px;right:20px}.cs-style-5 figure img{z-index:10;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s}.no-touch .cs-style-5 figure:hover img,.cs-style-5 figure.cs-hover img{-webkit-transform:scale(.4);-moz-transform:scale(.4);-ms-transform:scale(.4);transform:scale(.4)}.cs-style-5 figcaption{height:100%;width:100%;opacity:0;-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .4s , opacity .4s;-moz-transition:-moz-transform .4s , opacity .4s;transition:transform .4s , opacity .4s}.no-touch .cs-style-5 figure:hover figcaption,.cs-style-5 figure.cs-hover figcaption{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}.cs-style-5 figure a{position:absolute;bottom:20px;right:20px}.cs-style-6 figure img{z-index:10;-webkit-transition:-webkit-transform .4s;-moz-transition:-moz-transform .4s;transition:transform .4s}.no-touch .cs-style-6 figure:hover img,.cs-style-6 figure.cs-hover img{-webkit-transform:translateY(-50px) scale(.5);-moz-transform:translateY(-50px) scale(.5);-ms-transform:translateY(-50px) scale(.5);transform:translateY(-50px) scale(.5)}.cs-style-6 figcaption{height:100%;width:100%}.cs-style-6 figcaption h3{margin-top:60%}.cs-style-6 figcaption a{position:absolute;bottom:20px;right:20px}.cs-style-7 li:first-child{z-index:6}.cs-style-7 li:nth-child(2) {z-index:5}.cs-style-7 li:nth-child(3) {z-index:4}.cs-style-7 li:nth-child(4) {z-index:3}.cs-style-7 li:nth-child(5) {z-index:2}.cs-style-7 li:nth-child(6) {z-index:1}.cs-style-7 figure img{z-index:10}.cs-style-7 figcaption{height:100%;width:100%;opacity:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:opacity .3s , height .3s , box-shadow .3s;-moz-transition:opacity .3s , height .3s , box-shadow .3s;transition:opacity .3s , height .3s , box-shadow .3s;box-shadow:0 0 0 0 #2c3f52}.no-touch .cs-style-7 figure:hover figcaption,.cs-style-7 figure.cs-hover figcaption{opacity:1;height:130%;box-shadow:0 0 0 10px #2c3f52}.cs-style-7 figcaption h3{margin-top:86%}.cs-style-7 figcaption h3,.cs-style-7 figcaption span,.cs-style-7 figcaption a{opacity:0;-webkit-transition:opacity 0s;-moz-transition:opacity 0s;transition:opacity 0s}.cs-style-7 figcaption a{position:absolute;bottom:20px;right:20px}.no-touch .cs-style-7 figure:hover figcaption h3,.no-touch .cs-style-7 figure:hover figcaption span,.no-touch .cs-style-7 figure:hover figcaption a,.cs-style-7 figure.cs-hover figcaption h3,.cs-style-7 figure.cs-hover figcaption span,.cs-style-7 figure.cs-hover figcaption a{-webkit-transition:opacity .3s .2s;-moz-transition:opacity .3s .2s;transition:opacity .3s .2s;opacity:1}@media screen and (max-width:31.5em){.grid{padding:10px 10px 100px 10px}.grid li{width:100%;min-width:300px}}