@import url(http://fonts.googleapis.com/css?family=Questrial|Playfair+Display:400,700);@font-face{font-weight:400;font-style:normal;font-family:'codropsicons';src:url(//garakutalab.online/wp-content/plugins/tilt-photo-hover-effect/css/../fonts/codropsicons/codropsicons.eot);src:url(//garakutalab.online/wp-content/plugins/tilt-photo-hover-effect/css/../fonts/codropsicons/codropsicons.eot?#iefix) format('embedded-opentype'),url(//garakutalab.online/wp-content/plugins/tilt-photo-hover-effect/css/../fonts/codropsicons/codropsicons.woff) format('woff'),url(//garakutalab.online/wp-content/plugins/tilt-photo-hover-effect/css/../fonts/codropsicons/codropsicons.ttf) format('truetype'),url(//garakutalab.online/wp-content/plugins/tilt-photo-hover-effect/css/../fonts/codropsicons/codropsicons.svg#codropsicons) format('svg')}*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box}.clearfix:before,.clearfix:after{display:table;content:''}.clearfix:after{clear:both}body{background:#fff;color:#333;font-size:1em;font-family:'Questrial','Avenir','Helvetica Neue',Helvetica,Arial,sans-serif}a{outline:none;color:#a09493;text-decoration:none}a:hover,a:focus{color:#c58782}.mobile-note{position:absolute;bottom:1em;color:#fff;font-size:1.15em;text-align:center;width:100%;padding:1em;background:#fb7f93;display:none;font-family:'Avenir','Helvetica Neue',Helvetica,Arial,sans-serif}.codrops-header{text-align:center;height:100vh;overflow:hidden;background:url(//garakutalab.online/wp-content/plugins/tilt-photo-hover-effect/css/../img/1.jpg) no-repeat center center;background-size:auto 100vh}.codrops-header h1{margin:.5em 0 0;letter-spacing:-1px;font-weight:400;font-size:4.25em;line-height:1;position:absolute;width:100%;top:25vh;color:#fff;pointer-events:none;font-family:'Playfair Display',Georgia,serif}.codrops-header h1 span{display:block;padding:2em 0 1em;color:#3a3231;font-size:.2em;text-transform:uppercase;font-weight:400;letter-spacing:3px;text-shadow:none;font-family:'Questrial','Avenir','Helvetica Neue',Helvetica,Arial,sans-serif}.github-link{font-size:.95em;position:absolute;right:60px;top:22px}.github-link span{margin:0 0 0 5px}.hero{position:absolute;top:60px;left:60px;bottom:60px;right:60px;overflow:hidden}.hero__imgwrap{position:relative;width:100%;height:100%;overflow:hidden}.hero__imgwrap:after{content:'';position:absolute;background:rgba(76,0,1,.1);top:0;left:0;width:100%;height:100%;pointer-events:none}.hero__img{position:absolute;top:50%;left:50%;width:auto;height:100vh;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.hero__imgwrap .tilt__back,.hero__imgwrap .tilt__front{background-size:auto 100vh}.codrops-links{position:absolute;z-index:1000;display:inline-block;text-align:center;font-size:.85em;white-space:nowrap;left:60px;top:15px}.codrops-links:after{position:absolute;top:0;left:51%;width:1px;height:100%;background:rgba(160,148,147,.5);content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg)}.codrops-icon{display:inline-block;margin:.5em;padding:0;width:1.5em;text-decoration:none}.codrops-icon span{display:none}.codrops-icon:before{margin:0 5px;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"}.content{padding:4em 0 2em}.content>p{max-width:900px;margin:1em auto;padding:1em .5em 0}.content p>code{background:#ddd;display:inline-block;padding:.25em .5em;border-radius:3px}.content--color-alt{background:#ede8da;color:#a39c88}.poster-headline{text-align:center;font-family:'Playfair Display',Georgia,serif;font-size:2.65em;font-weight:400;margin:.25em 0 .5em}.poster-text{font-size:1.15em;text-align:center;padding:1em 0;max-width:1000px;margin:0 auto;line-height:1.5;max-width:800px}.grid{position:relative;display:-ms-flexbox;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;-ms-justify-content:center;justify-content:center;list-style:none;padding:3em 0 0;margin:0 auto;max-width:1020px}.grid__item{width:100%}.grid--xray .grid__item{width:300px}.grid__item-title{font-family:'Playfair Display',Georgia,serif;font-size:1em;padding:1em 0;font-weight:700}.grid__item-title code{color:#aaa;font-weight:400;font-size:.85em}.grid--xray .grid__img{width:300px;height:300px}.grid__img img{max-width:100%;display:block}.grid__img--border .tilt__back,.grid__img--border .tilt__front{border:1px solid #333}.grid__img--border .tilt{overflow:visible}.grid--examples{max-width:830px}.grid--examples .grid__img{position:relative;height:0;padding-bottom:66.714%;overflow:hidden}.grid--examples .tilt{position:absolute;top:0}.grid__img--example-2:after{content:'';position:absolute;box-shadow:inset 0 0 50px 30px rgba(2,0,37,.8);pointer-events:none;width:100%;height:100%;top:0;left:0}.grid__img--example-3 .tilt{-webkit-filter:grayscale(100%) brightness(105%) contrast(120%);filter:grayscale(100%) brightness(105%) contrast(120%);-webkit-transition:filter .5s,-webkit-filter .5s;transition:filter .5s,-webkit-filter .5s}.grid__img--example-3 .tilt:hover{-webkit-filter:none;filter:none}.grid__img--example-4 .tilt{width:120%;height:120%;top:-10%;left:-10%}.def-list{max-width:900px;background:#f0f0f0;border-radius:10px;margin:1em auto;padding:3%}.def-list dt{font-family:'Avenir','Helvetica',Arial,sans-serif}.def-list dt:not(:first-child){margin-top:2em}.def-list dd{margin:0;font-size:.95em;line-height:1.4}.content--related{text-align:center;font-weight:700;padding:8em 0}.media-item{display:inline-block;padding:1em;vertical-align:top;-webkit-transition:color .3s;transition:color .3s}.media-item__img{max-width:100%;opacity:.7;-webkit-transition:opacity .3s;transition:opacity .3s}.media-item:hover .media-item__img,.media-item:focus .media-item__img{opacity:1}.media-item__title{margin:0;padding:.5em;font-size:1em}@media screen and (min-aspect-ratio:1440/960){.hero__imgwrap .tilt__back,.hero__imgwrap .tilt__front,.codrops-header{background-size:100vw auto}.hero__img{width:100vw;height:auto}}@media screen and (max-width:40em){.codrops-header h1{font-size:2.5em}.hero{left:20px;bottom:20px;right:20px}.mobile-note{display:block}}