|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/kanvakanva.com/public_html/template/css/ |
Upload File : |
/*!
* Hover.css (http://ianlunn.co.uk/)
* Version: 1.0.7
* Author: Ian Lunn @IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
* Made available under a MIT License:
* http://www.opensource.org/licenses/mit-license.php
* Hover.css Copyright Ian Lunn 2014.
*/
.button {
margin: .4em;
padding: 1em;
cursor: pointer;
background: #FF1C32;
text-decoration: none;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
.grow {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}
.shrink {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.shrink:hover {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9)
}
@-webkit-keyframes pulse {
25% {
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
75% {
-webkit-transform:scale(0.9);
transform:scale(0.9)
}
}
@keyframes pulse {
25% {
-webkit-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1)
}
75% {
-webkit-transform:scale(0.9);
-ms-transform:scale(0.9);
transform:scale(0.9)
}
}
.pulse {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.pulse:hover {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes pulse-grow {
to {
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
}
@keyframes pulse-grow {
to {
-webkit-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1)
}
}
.pulse-grow {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.pulse-grow:hover {
-webkit-animation-name: pulse-grow;
animation-name: pulse-grow;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
@-webkit-keyframes pulse-shrink {
to {
-webkit-transform:scale(0.9);
transform:scale(0.9)
}
}
@keyframes pulse-shrink {
to {
-webkit-transform:scale(0.9);
-ms-transform:scale(0.9);
transform:scale(0.9)
}
}
.pulse-shrink {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.pulse-shrink:hover {
-webkit-animation-name: pulse-shrink;
animation-name: pulse-shrink;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
@-webkit-keyframes push {
50% {
-webkit-transform:scale(0.8);
transform:scale(0.8)
}
100% {
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes push {
50% {
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8)
}
100% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
}
.push {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.push:hover {
-webkit-animation-name: push;
animation-name: push;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes pop {
50% {
-webkit-transform:scale(1.2);
transform:scale(1.2)
}
100% {
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes pop {
50% {
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2)
}
100% {
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
}
.pop {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.pop:hover {
-webkit-animation-name: pop;
animation-name: pop;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
.rotate {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.rotate:hover {
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg)
}
.grow-rotate {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.grow-rotate:hover {
-webkit-transform: scale(1.1) rotate(4deg);
-ms-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg)
}
.float {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.float:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px)
}
.sink {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.sink:hover {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px)
}
@-webkit-keyframes hover {
50% {
-webkit-transform:translateY(-3px);
transform:translateY(-3px)
}
100% {
-webkit-transform:translateY(-6px);
transform:translateY(-6px)
}
}
@keyframes hover {
50% {
-webkit-transform:translateY(-3px);
-ms-transform:translateY(-3px);
transform:translateY(-3px)
}
100% {
-webkit-transform:translateY(-6px);
-ms-transform:translateY(-6px);
transform:translateY(-6px)
}
}
/*.hover {
display: inline-block;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.hover:hover {
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-animation-name: hover;
animation-name: hover;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate
}*/
@-webkit-keyframes hang {
50% {
-webkit-transform:translateY(3px);
transform:translateY(3px)
}
100% {
-webkit-transform:translateY(6px);
transform:translateY(6px)
}
}
@keyframes hang {
50% {
-webkit-transform:translateY(3px);
-ms-transform:translateY(3px);
transform:translateY(3px)
}
100% {
-webkit-transform:translateY(6px);
-ms-transform:translateY(6px);
transform:translateY(6px)
}
}
.hang {
display: inline-block;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.hang:hover {
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hang;
animation-name: hang;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
.skew {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.skew:hover {
-webkit-transform: skew(-10deg);
-ms-transform: skew(-10deg);
transform: skew(-10deg)
}
.skew-forward {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.skew-forward:hover {
-webkit-transform: skew(-10deg);
-ms-transform: skew(-10deg);
transform: skew(-10deg)
}
.skew-backward {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.skew-backward:hover {
-webkit-transform: skew(10deg);
-ms-transform: skew(10deg);
transform: skew(10deg)
}
@-webkit-keyframes wobble-vertical {
16.65% {
-webkit-transform:translateY(8px);
transform:translateY(8px)
}
33.3% {
-webkit-transform:translateY(-6px);
transform:translateY(-6px)
}
49.95% {
-webkit-transform:translateY(4px);
transform:translateY(4px)
}
66.6% {
-webkit-transform:translateY(-2px);
transform:translateY(-2px)
}
83.25% {
-webkit-transform:translateY(2px);
transform:translateY(2px)
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes wobble-vertical {
16.65% {
-webkit-transform:translateY(8px);
-ms-transform:translateY(8px);
transform:translateY(8px)
}
33.3% {
-webkit-transform:translateY(-6px);
-ms-transform:translateY(-6px);
transform:translateY(-6px)
}
49.95% {
-webkit-transform:translateY(4px);
-ms-transform:translateY(4px);
transform:translateY(4px)
}
66.6% {
-webkit-transform:translateY(-2px);
-ms-transform:translateY(-2px);
transform:translateY(-2px)
}
83.25% {
-webkit-transform:translateY(2px);
-ms-transform:translateY(2px);
transform:translateY(2px)
}
100% {
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}
.wobble-vertical {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.wobble-vertical:hover {
-webkit-animation-name: wobble-vertical;
animation-name: wobble-vertical;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes wobble-horizontal {
16.65% {
-webkit-transform:translateX(8px);
transform:translateX(8px)
}
33.3% {
-webkit-transform:translateX(-6px);
transform:translateX(-6px)
}
49.95% {
-webkit-transform:translateX(4px);
transform:translateX(4px)
}
66.6% {
-webkit-transform:translateX(-2px);
transform:translateX(-2px)
}
83.25% {
-webkit-transform:translateX(2px);
transform:translateX(2px)
}
100% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@keyframes wobble-horizontal {
16.65% {
-webkit-transform:translateX(8px);
-ms-transform:translateX(8px);
transform:translateX(8px)
}
33.3% {
-webkit-transform:translateX(-6px);
-ms-transform:translateX(-6px);
transform:translateX(-6px)
}
49.95% {
-webkit-transform:translateX(4px);
-ms-transform:translateX(4px);
transform:translateX(4px)
}
66.6% {
-webkit-transform:translateX(-2px);
-ms-transform:translateX(-2px);
transform:translateX(-2px)
}
83.25% {
-webkit-transform:translateX(2px);
-ms-transform:translateX(2px);
transform:translateX(2px)
}
100% {
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0)
}
}
.wobble-horizontal {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.wobble-horizontal:hover {
-webkit-animation-name: wobble-horizontal;
animation-name: wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes wobble-to-bottom-right {
16.65% {
-webkit-transform:translate(8px, 8px);
transform:translate(8px, 8px)
}
33.3% {
-webkit-transform:translate(-6px, -6px);
transform:translate(-6px, -6px)
}
49.95% {
-webkit-transform:translate(4px, 4px);
transform:translate(4px, 4px)
}
66.6% {
-webkit-transform:translate(-2px, -2px);
transform:translate(-2px, -2px)
}
83.25% {
-webkit-transform:translate(2px, 2px);
transform:translate(2px, 2px)
}
100% {
-webkit-transform:translate(0, 0);
transform:translate(0, 0)
}
}
@keyframes wobble-to-bottom-right {
16.65% {
-webkit-transform:translate(8px, 8px);
-ms-transform:translate(8px, 8px);
transform:translate(8px, 8px)
}
33.3% {
-webkit-transform:translate(-6px, -6px);
-ms-transform:translate(-6px, -6px);
transform:translate(-6px, -6px)
}
49.95% {
-webkit-transform:translate(4px, 4px);
-ms-transform:translate(4px, 4px);
transform:translate(4px, 4px)
}
66.6% {
-webkit-transform:translate(-2px, -2px);
-ms-transform:translate(-2px, -2px);
transform:translate(-2px, -2px)
}
83.25% {
-webkit-transform:translate(2px, 2px);
-ms-transform:translate(2px, 2px);
transform:translate(2px, 2px)
}
100% {
-webkit-transform:translate(0, 0);
-ms-transform:translate(0, 0);
transform:translate(0, 0)
}
}
.wobble-to-bottom-right {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.wobble-to-bottom-right:hover {
-webkit-animation-name: wobble-to-bottom-right;
animation-name: wobble-to-bottom-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes wobble-to-top-right {
16.65% {
-webkit-transform:translate(8px, -8px);
transform:translate(8px, -8px)
}
33.3% {
-webkit-transform:translate(-6px, 6px);
transform:translate(-6px, 6px)
}
49.95% {
-webkit-transform:translate(4px, -4px);
transform:translate(4px, -4px)
}
66.6% {
-webkit-transform:translate(-2px, 2px);
transform:translate(-2px, 2px)
}
83.25% {
-webkit-transform:translate(2px, -2px);
transform:translate(2px, -2px)
}
100% {
-webkit-transform:translate(0, 0);
transform:translate(0, 0)
}
}
@keyframes wobble-to-top-right {
16.65% {
-webkit-transform:translate(8px, -8px);
-ms-transform:translate(8px, -8px);
transform:translate(8px, -8px)
}
33.3% {
-webkit-transform:translate(-6px, 6px);
-ms-transform:translate(-6px, 6px);
transform:translate(-6px, 6px)
}
49.95% {
-webkit-transform:translate(4px, -4px);
-ms-transform:translate(4px, -4px);
transform:translate(4px, -4px)
}
66.6% {
-webkit-transform:translate(-2px, 2px);
-ms-transform:translate(-2px, 2px);
transform:translate(-2px, 2px)
}
83.25% {
-webkit-transform:translate(2px, -2px);
-ms-transform:translate(2px, -2px);
transform:translate(2px, -2px)
}
100% {
-webkit-transform:translate(0, 0);
-ms-transform:translate(0, 0);
transform:translate(0, 0)
}
}
.wobble-to-top-right {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.wobble-to-top-right:hover {
-webkit-animation-name: wobble-to-top-right;
animation-name: wobble-to-top-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes wobble-top {
16.65% {
-webkit-transform:skew(-12deg);
transform:skew(-12deg)
}
33.3% {
-webkit-transform:skew(10deg);
transform:skew(10deg)
}
49.95% {
-webkit-transform:skew(-6deg);
transform:skew(-6deg)
}
66.6% {
-webkit-transform:skew(4deg);
transform:skew(4deg)
}
83.25% {
-webkit-transform:skew(-2deg);
transform:skew(-2deg)
}
100% {
-webkit-transform:skew(0);
transform:skew(0)
}
}
@keyframes wobble-top {
16.65% {
-webkit-transform:skew(-12deg);
-ms-transform:skew(-12deg);
transform:skew(-12deg)
}
33.3% {
-webkit-transform:skew(10deg);
-ms-transform:skew(10deg);
transform:skew(10deg)
}
49.95% {
-webkit-transform:skew(-6deg);
-ms-transform:skew(-6deg);
transform:skew(-6deg)
}
66.6% {
-webkit-transform:skew(4deg);
-ms-transform:skew(4deg);
transform:skew(4deg)
}
83.25% {
-webkit-transform:skew(-2deg);
-ms-transform:skew(-2deg);
transform:skew(-2deg)
}
100% {
-webkit-transform:skew(0);
-ms-transform:skew(0);
transform:skew(0)
}
}
.wobble-top {
display: inline-block;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.wobble-top:hover {
-webkit-animation-name: wobble-top;
animation-name: wobble-top;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes wobble-bottom {
16.65% {
-webkit-transform:skew(-12deg);
transform:skew(-12deg)
}
33.3% {
-webkit-transform:skew(10deg);
transform:skew(10deg)
}
49.95% {
-webkit-transform:skew(-6deg);
transform:skew(-6deg)
}
66.6% {
-webkit-transform:skew(4deg);
transform:skew(4deg)
}
83.25% {
-webkit-transform:skew(-2deg);
transform:skew(-2deg)
}
100% {
-webkit-transform:skew(0);
transform:skew(0)
}
}
@keyframes wobble-bottom {
16.65% {
-webkit-transform:skew(-12deg);
-ms-transform:skew(-12deg);
transform:skew(-12deg)
}
33.3% {
-webkit-transform:skew(10deg);
-ms-transform:skew(10deg);
transform:skew(10deg)
}
49.95% {
-webkit-transform:skew(-6deg);
-ms-transform:skew(-6deg);
transform:skew(-6deg)
}
66.6% {
-webkit-transform:skew(4deg);
-ms-transform:skew(4deg);
transform:skew(4deg)
}
83.25% {
-webkit-transform:skew(-2deg);
-ms-transform:skew(-2deg);
transform:skew(-2deg)
}
100% {
-webkit-transform:skew(0);
-ms-transform:skew(0);
transform:skew(0)
}
}
.wobble-bottom {
display: inline-block;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.wobble-bottom:hover {
-webkit-animation-name: wobble-bottom;
animation-name: wobble-bottom;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes wobble-skew {
16.65% {
-webkit-transform:skew(-12deg);
transform:skew(-12deg)
}
33.3% {
-webkit-transform:skew(10deg);
transform:skew(10deg)
}
49.95% {
-webkit-transform:skew(-6deg);
transform:skew(-6deg)
}
66.6% {
-webkit-transform:skew(4deg);
transform:skew(4deg)
}
83.25% {
-webkit-transform:skew(-2deg);
transform:skew(-2deg)
}
100% {
-webkit-transform:skew(0);
transform:skew(0)
}
}
@keyframes wobble-skew {
16.65% {
-webkit-transform:skew(-12deg);
-ms-transform:skew(-12deg);
transform:skew(-12deg)
}
33.3% {
-webkit-transform:skew(10deg);
-ms-transform:skew(10deg);
transform:skew(10deg)
}
49.95% {
-webkit-transform:skew(-6deg);
-ms-transform:skew(-6deg);
transform:skew(-6deg)
}
66.6% {
-webkit-transform:skew(4deg);
-ms-transform:skew(4deg);
transform:skew(4deg)
}
83.25% {
-webkit-transform:skew(-2deg);
-ms-transform:skew(-2deg);
transform:skew(-2deg)
}
100% {
-webkit-transform:skew(0);
-ms-transform:skew(0);
transform:skew(0)
}
}
.wobble-skew {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.wobble-skew:hover {
-webkit-animation-name: wobble-skew;
animation-name: wobble-skew;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
@-webkit-keyframes buzz {
50% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
100% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
}
@keyframes buzz {
50% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
100% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
}
.buzz {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.buzz:hover {
-webkit-animation-name: buzz;
animation-name: buzz;
-webkit-animation-duration: .15s;
animation-duration: .15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
90% {
-webkit-transform:translateX(2px) rotate(0);
transform:translateX(2px) rotate(0)
}
100% {
-webkit-transform:translateX(-2px) rotate(0);
transform:translateX(-2px) rotate(0)
}
}
@keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg)
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg)
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg)
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg)
}
90% {
-webkit-transform:translateX(2px) rotate(0);
-ms-transform:translateX(2px) rotate(0);
transform:translateX(2px) rotate(0)
}
100% {
-webkit-transform:translateX(-2px) rotate(0);
-ms-transform:translateX(-2px) rotate(0);
transform:translateX(-2px) rotate(0)
}
}
.buzz-out {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.buzz-out:hover {
-webkit-animation-name: buzz-out;
animation-name: buzz-out;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1
}
.border-fade {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: inset 0 0 0 4px #FF1C32, 0 0 2px rgba(0,0,0,0)
}
.border-fade:hover {
box-shadow: inset 0 0 0 4px #666, 0 0 2px rgba(0,0,0,0)
}
.hollow {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: background;
transition-property: background;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: inset 0 0 0 4px #FF1C32, 0 0 2px rgba(0,0,0,0)
}
.hollow:hover {
background: 0 0
}
.trim {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.trim:before {
content: '';
position: absolute;
border: #fff solid 4px;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
opacity: 0;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: opacity;
transition-property: opacity
}
.trim:hover:before {
opacity: 1
}
.outline-outward {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.slide-title .outline-outward:before {
}
.outline-outward:before {
content: '';
position: absolute;
border: #FF1C32 solid 2px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left
}
.outline-outward:hover:before {
bottom: -4px;
left: -4px;
right: -4px;
top: -4px;
}
.outline-inward {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.outline-inward:before {
pointer-events: none;
content: '';
position: absolute;
border: #FF1C32 solid 4px;
top: -16px;
right: -16px;
bottom: -16px;
left: -16px;
opacity: 0;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left
}
.outline-inward:hover:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
opacity: 1
}
.round-corners {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: border-radius;
transition-property: border-radius;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.round-corners:hover {
border-radius: 1em
}
.glow {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.glow:hover {
box-shadow: 0 0 8px rgba(0,0,0,.6)
}
.box-shadow-outset {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.box-shadow-outset:hover {
box-shadow: 2px 2px 2px rgba(0,0,0,.6)
}
.box-shadow-inset {
display: inline-block;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
box-shadow: inset 0 0 0 rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0)
}
.box-shadow-inset:hover {
box-shadow: inset 2px 2px 2px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,0)
}
.float-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 80%);
background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 80%);
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity
}
.float-shadow:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px)
}
.float-shadow:hover:before {
opacity: 1;
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px)
}
@keyframes hover {
50% {
-webkit-transform:translateY(-3px);
-ms-transform:translateY(-3px);
transform:translateY(-3px)
}
100% {
-webkit-transform:translateY(-6px);
-ms-transform:translateY(-6px);
transform:translateY(-6px)
}
}
@-webkit-keyframes hover-shadow {
0% {
-webkit-transform:translateY(6px);
transform:translateY(6px);
opacity:.4
}
50% {
-webkit-transform:translateY(3px);
transform:translateY(3px);
opacity:1
}
100% {
-webkit-transform:translateY(6px);
transform:translateY(6px);
opacity:.4
}
}
@keyframes hover-shadow {
0% {
-webkit-transform:translateY(6px);
-ms-transform:translateY(6px);
transform:translateY(6px);
opacity:.4
}
50% {
-webkit-transform:translateY(3px);
-ms-transform:translateY(3px);
transform:translateY(3px);
opacity:1
}
100% {
-webkit-transform:translateY(6px);
-ms-transform:translateY(6px);
transform:translateY(6px);
opacity:.4
}
}
.hover-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.hover-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 80%);
background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 80%);
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity
}
.hover-shadow:hover {
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-animation-name: hover;
animation-name: hover;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
.hover-shadow:hover:before {
opacity: .4;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hover-shadow;
animation-name: hover-shadow;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate
}
.shadow-radial {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.shadow-radial:after, .shadow-radial:before {
pointer-events: none;
position: absolute;
content: '';
left: 0;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 5px;
opacity: 0;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: opacity;
transition-property: opacity
}
.shadow-radial:before {
bottom: 100%;
background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 80%);
background: radial-gradient(ellipse at 50% 150%, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 80%)
}
.shadow-radial:after {
top: 100%;
background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 80%);
background: radial-gradient(ellipse at 50% -50%, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 80%)
}
.shadow-radial:hover:after, .shadow-radial:hover:before {
opacity: 1
}
.bubble-top {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.bubble-top:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: top;
transition-property: top;
left: -webkit-calc(50% - 10px);
left: calc(50% - 10px);
top: 0;
border-width: 0 10px 10px;
border-color: transparent transparent #FF1C32
}
.bubble-top:hover:before {
top: -10px
}
.bubble-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.bubble-right:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: right;
transition-property: right;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
right: 0;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #FF1C32
}
.bubble-right:hover:before {
right: -10px
}
.bubble-bottom {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.bubble-bottom:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: bottom;
transition-property: bottom;
left: -webkit-calc(50% - 10px);
left: calc(50% - 10px);
bottom: 0;
border-width: 10px 10px 0;
border-color: #FF1C32 transparent transparent
}
.bubble-bottom:hover:before {
bottom: -10px
}
.bubble-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.bubble-left:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: left;
transition-property: left;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
left: 0;
border-width: 10px 10px 10px 0;
border-color: transparent #FF1C32 transparent transparent
}
.bubble-left:hover:before {
left: -10px
}
.bubble-float-top {
display: inline-block;
position: relative;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.bubble-float-top:before {
position: absolute;
z-index: -1;
content: '';
left: -webkit-calc(50% - 10px);
left: calc(50% - 10px);
top: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #FF1C32;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: top;
transition-property: top
}
.bubble-float-top:hover {
-webkit-transform: translateY(5px) translateZ(0);
-ms-transform: translateY(5px) translateZ(0);
transform: translateY(5px) translateZ(0)
}
.bubble-float-top:hover:before {
top: -10px
}
.bubble-float-right {
display: inline-block;
position: relative;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.bubble-float-right:before {
position: absolute;
z-index: -1;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
right: 0;
content: '';
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #FF1C32;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: right;
transition-property: right
}
.bubble-float-right:hover {
-webkit-transform: translateX(-5px);
-ms-transform: translateX(-5px);
transform: translateX(-5px)
}
.bubble-float-right:hover:before {
right: -10px
}
.bubble-float-bottom {
display: inline-block;
position: relative;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.bubble-float-bottom:before {
position: absolute;
z-index: -1;
content: '';
left: -webkit-calc(50% - 10px);
left: calc(50% - 10px);
bottom: 0;
border-style: solid;
border-width: 10px 10px 0;
border-color: #FF1C32 transparent transparent;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: bottom;
transition-property: bottom
}
.bubble-float-bottom:hover {
-webkit-transform: translateY(-5px) translateZ(0);
-ms-transform: translateY(-5px) translateZ(0);
transform: translateY(-5px) translateZ(0)
}
.bubble-float-bottom:hover:before {
bottom: -10px
}
.bubble-float-left {
display: inline-block;
position: relative;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.bubble-float-left:before {
position: absolute;
z-index: -1;
content: '';
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
left: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #FF1C32 transparent transparent;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: left;
transition-property: left
}
.bubble-float-left:hover {
-webkit-transform: translateX(5px);
-ms-transform: translateX(5px);
transform: translateX(5px)
}
.bubble-float-left:hover:before {
left: -10px
}
.curl-top-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
left: 0;
background: #fff;
background: -webkit-linear-gradient(315deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
background: linear-gradient(135deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 1000;
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: width, height;
transition-property: width, height
}
.curl-top-left:hover:before {
width: 25px;
height: 25px
}
.curl-top-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.curl-top-right:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
top: 0;
right: 0;
background: #fff;
background: -webkit-linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
background: linear-gradient(225deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
box-shadow: -2px 2px 2px rgba(0,0,0,.4);
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: width, height;
transition-property: width, height
}
.curl-top-right:hover:before {
width: 25px;
height: 25px
}
.curl-bottom-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.curl-bottom-right:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
bottom: 0;
right: 0;
background: #fff;
background: -webkit-linear-gradient(135deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
background: linear-gradient(315deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
box-shadow: -2px -2px 2px rgba(0,0,0,.4);
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: width, height;
transition-property: width, height
}
.curl-bottom-right:hover:before {
width: 25px;
height: 25px
}
.curl-bottom-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0,0,0,0)
}
.curl-bottom-left:before {
pointer-events: none;
position: absolute;
content: '';
height: 0;
width: 0;
bottom: 0;
left: 0;
background: #fff;
background: -webkit-linear-gradient(45deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
background: linear-gradient(45deg, #fff 45%, #aaa 50%, #ccc 56%, #fff 80%);
box-shadow: 2px -2px 2px rgba(0,0,0,.4);
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: width, height;
transition-property: width, height
}
.curl-bottom-left:hover:before {
width: 25px;
height: 25px
}
/* Common style */
.ideas-hover figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
width:100%;
text-align: center;
cursor: pointer;
}
.ideas-hover figure img {
position: relative;
display: block;
width:100%;
height:auto;
}
.ideas-hover figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ideas-hover figure figcaption::before, .ideas-hover figure figcaption::after {
pointer-events: none;
}
.ideas-hover figure figcaption, .ideas-hover figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.ideas-hover figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.ideas-hover figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}
.ideas-hover figure h2 span {
font-weight: 800;
}
.ideas-hover figure h2, .ideas-hover figure p {
margin: 0;
}
.ideas-hover figure p {
letter-spacing: 2px;
font-size: 68.5%;
}
/* Individual effects */
/*---------------*/
/***** Lily *****/
/*---------------*/
figure.effect-lily img {
width: -webkit-calc(100% + 50px);
width: calc(100% + 50px);
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px, 0, 0);
transform: translate3d(-40px, 0, 0);
}
figure.effect-lily figcaption {
top: auto;
bottom: 0;
height: 50%;
text-align: left;
}
figure.effect-lily h2, figure.effect-lily p {
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
figure.effect-lily h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-lily p {
color: rgba(255,255,255,0.6);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
}
figure.effect-lily:hover img, figure.effect-lily:hover p {
opacity: 1;
}
figure.effect-lily:hover img, figure.effect-lily:hover h2, figure.effect-lily:hover p {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-lily:hover p {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}
/*---------------*/
/***** Sadie *****/
/*---------------*/
figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
}
figure.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
figure.effect-sadie figcaption::before, figure.effect-sadie p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
figure.effect-sadie:hover h2 {
color: #fff;
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
}
figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Roxy *****/
/*---------------*/
figure.effect-roxy {
background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
}
figure.effect-roxy img {
width: -webkit-calc(100% + 60px);
width: calc(100% + 60px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
figure.effect-roxy figcaption::before {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
border: 2px solid #fff;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
figure.effect-roxy figcaption {
padding: 3em;
text-align: left;
}
figure.effect-roxy h2 {
padding: 30% 0 10px 0;
}
figure.effect-roxy p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
figure.effect-roxy:hover img {
opacity: 0.7;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-roxy:hover figcaption::before, figure.effect-roxy:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba {
}
figure.effect-bubba img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-bubba:hover img {
}
figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-bubba figcaption::before {
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
figure.effect-bubba figcaption::after {
border-right: 2px solid #fff;
border-left: 2px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
figure.effect-bubba h2 {
padding-top: 30%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
figure.effect-bubba p {
padding: 20px 2.5em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
figure.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-bubba:hover h2, figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Romeo *****/
/*---------------*/
figure.effect-romeo {
-webkit-perspective: 1000px;
perspective: 1000px;
}
figure.effect-romeo img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, 0, 300px);
transform: translate3d(0, 0, 300px);
}
figure.effect-romeo:hover img {
opacity: 0.6;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-romeo figcaption::before, figure.effect-romeo figcaption::after {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
figure.effect-romeo:hover figcaption::before {
opacity: 0.5;
-webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
figure.effect-romeo:hover figcaption::after {
opacity: 0.5;
-webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
figure.effect-romeo h2, figure.effect-romeo p {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-romeo h2 {
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
}
figure.effect-romeo p {
padding: 0.25em 2em;
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
}
figure.effect-romeo:hover h2 {
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
}
figure.effect-romeo:hover p {
-webkit-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
}
/*---------------*/
/***** Layla *****/
/*---------------*/
figure.effect-layla {
background: #18a367;
}
figure.effect-layla img {
min-width: 100%;
height: -webkit-calc(100% + 40px);
height: calc(100% + 40px);
}
figure.effect-layla figcaption {
padding: 3em;
}
figure.effect-layla figcaption::before, figure.effect-layla figcaption::after {
position: absolute;
content: '';
opacity: 0;
}
figure.effect-layla figcaption::before {
top: 50px;
right: 10px;
bottom: 50px;
left: 10px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
figure.effect-layla figcaption::after {
top: 10px;
right: 50px;
bottom: 10px;
left: 50px;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
figure.effect-layla h2 {
padding-top: 26%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-layla p {
padding: 0.5em 2em;
text-transform: none;
opacity: 0;
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
figure.effect-layla img, figure.effect-layla h2 {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
figure.effect-layla img, figure.effect-layla figcaption::before, figure.effect-layla figcaption::after, figure.effect-layla p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla:hover img {
opacity: 0.7;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-layla:hover figcaption::before, figure.effect-layla:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-layla:hover h2, figure.effect-layla:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-layla:hover figcaption::after, figure.effect-layla:hover h2, figure.effect-layla:hover p, figure.effect-layla:hover img {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
/*---------------*/
/***** Honey *****/
/*---------------*/
figure.effect-honey {
background: #4a3753;
}
figure.effect-honey img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-honey:hover img {
opacity: 0.5;
}
figure.effect-honey figcaption::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: #fff;
content: '';
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
figure.effect-honey h2 {
position: absolute;
bottom: 0;
left: 0;
padding: 1em 1.5em;
width: 100%;
text-align: left;
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
figure.effect-honey h2 i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
figure.effect-honey figcaption::before, figure.effect-honey h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.effect-honey:hover figcaption::before, figure.effect-honey:hover h2, figure.effect-honey:hover h2 i {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Oscar *****/
/*---------------*/
figure.effect-oscar {
background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
}
figure.effect-oscar img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-oscar figcaption {
padding: 3em;
background-color: rgba(58,52,42,0.7);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}
figure.effect-oscar figcaption::before {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
border: 2px solid #fff;
content: '';
}
figure.effect-oscar h2 {
margin: 20% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
figure.effect-oscar figcaption::before, figure.effect-oscar p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}
figure.effect-oscar:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-oscar:hover figcaption::before, figure.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-oscar:hover figcaption {
background-color: rgba(58,52,42,0);
}
figure.effect-oscar:hover img {
opacity: 0.4;
}
/*---------------*/
/***** Marley *****/
/*---------------*/
figure.effect-marley figcaption {
text-align: right;
}
figure.effect-marley h2, figure.effect-marley p {
position: absolute;
right: 10px;
left: 10px;
padding: 10px 0;
}
figure.effect-marley p {
bottom: 10px;
line-height: 1.5;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
figure.effect-marley h2 {
top: 10px;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
figure.effect-marley:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-marley h2::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #fff;
content: '';
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
figure.effect-marley h2::after, figure.effect-marley p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-marley:hover h2::after, figure.effect-marley:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Ruby *****/
/*---------------*/
figure.effect-ruby {
background-color: #17819c;
}
figure.effect-ruby img {
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
figure.effect-ruby:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-ruby h2 {
margin-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
figure.effect-ruby p {
margin: 1em 0 0;
padding: 3em;
border: 2px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, 20px, 0) scale(1.1);
transform: translate3d(0, 20px, 0) scale(1.1);
}
figure.effect-ruby:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-ruby:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
/*---------------*/
/***** Milo *****/
/*---------------*/
figure.effect-milo {
background:none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
}
figure.effect-milo img {
width: -webkit-calc(100% + 60px);
width: calc(100% + 60px);
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0) scale(1.12);
transform: translate3d(-10px, 0, 0) scale(1.12);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.effect-milo:hover img {
opacity: 0.5;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
figure.effect-milo h2 {
position: absolute;
right: 0;
bottom: 0;
padding: 1em 1.2em;
}
figure.effect-milo p {
padding: 0 10px 0 0;
width: 50%;
border-right: 2px solid #fff;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px, 0, 0);
transform: translate3d(-40px, 0, 0);
}
figure.effect-milo:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Dexter *****/
/*---------------*/
figure.effect-dexter {
background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
background: linear-gradient(to bottom, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
}
figure.effect-dexter img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-dexter:hover img {
opacity: 0.4;
}
figure.effect-dexter figcaption::after {
position: absolute;
right: 10px;
bottom: 10px;
left: 10px;
height: -webkit-calc(50% - 10px);
height: calc(50% - 10px);
border: 7px solid #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
figure.effect-dexter:hover figcaption::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-dexter figcaption {
padding: 3em;
text-align: left;
}
figure.effect-dexter p {
position: absolute;
right: 60px;
bottom: 60px;
left: 60px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
figure.effect-dexter:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Sarah *****/
/*---------------*/
figure.effect-sarah {
background: #42b078;
}
figure.effect-sarah img {
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.effect-sarah:hover img {
opacity: 0.4;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-sarah figcaption {
text-align: left;
}
figure.effect-sarah h2 {
position: relative;
overflow: hidden;
padding: 0.5em 0;
}
figure.effect-sarah h2::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
figure.effect-sarah:hover h2::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-sarah p {
padding: 1em 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
figure.effect-sarah:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*---------------*/
/***** Zoe *****/
/*---------------*/
figure.effect-zoe figcaption {
top: auto;
bottom: 0;
padding: 1em;
height: 3.75em;
background: #fff;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
figure.effect-zoe h2 {
float: left;
}
figure.effect-zoe figcaption > span {
float: right;
}
figure.effect-zoe p {
position: absolute;
bottom: 8em;
padding: 2em;
color: #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-zoe h2, figure.effect-zoe figcaption > span {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}
figure.effect-zoe figcaption > span::before {
display: inline-block;
padding: 8px 10px;
font-family: 'feathericons';
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-eye::before {
content: '\e000';
}
.icon-paper-clip::before {
content: '\e001';
}
.icon-heart::before {
content: '\e024';
}
figure.effect-zoe h2 {
display: inline-block;
}
figure.effect-zoe:hover p {
opacity: 1;
}
figure.effect-zoe:hover figcaption, figure.effect-zoe:hover h2, figure.effect-zoe:hover figcaption > span {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-zoe:hover h2 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
figure.effect-zoe:hover figcaption > span:nth-child(4) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
figure.effect-zoe:hover figcaption > span:nth-child(3) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
figure.effect-zoe:hover figcaption > span:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/*---------------*/
/***** Chico *****/
/*---------------*/
figure.effect-chico img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.12);
transform: scale(1.12);
}
figure.effect-chico:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
.ideas-hover .animated:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-chico figcaption {
padding: 3em;
}
figure.effect-chico figcaption::before {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
border: 2px solid #fff;
content: '';
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.effect-chico figcaption::before, figure.effect-chico p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-chico h2 {
padding: 20% 0 20px 0;
}
figure.effect-chico p {
margin: 0 auto;
max-width: 200px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.ideas-hover .animated:hover figcaption::before, .ideas-hover .animated:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-chico:hover figcaption::before, figure.effect-chico:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
/* @media screen and (max-width: 69.5em) {
.ideas-hover figure {
width: 50%;
}
.ideas-hover figure figcaption {
font-size: 90%;
}
}*/
@media screen and (max-width: 41.5em) {
.ideas-hover figure {
width: 100%;
}
}