Christians Hover CSS Showroom

.picture {
	width: 100%;
	position: relative;
	margin: 0 auto;
	max-width: 360px;
	transform: rotate(0deg);
	transform-origin: 50% 0;
	animation: rotation 2s 1 linear;
}
@keyframes rotation {
	0% {transform: rotate(0deg);}
	10% {transform: rotate(-5deg);}
	20% {transform: rotate(0deg);}
	30% {transform: rotate(5deg);}
	40% {transform: rotate(0deg);}
	50% {transform: rotate(-3deg);}
	60% {transform: rotate(0deg);}
	70% {transform: rotate(3deg);}
	80% {transform: rotate(0deg);}
	90% {transform: rotate(-2deg);}
	100% {transform: rotate(0deg);}
}
.hook {
	width: 4px;
	height: 4px;
	background-color: #5c5c5d;
	margin: 0 auto 32px auto;
	border-radius: 50%;
	box-shadow: 0 1px 0 1px #a49c7c;
}
.hook:before {
	content: '';
	width: 40px;
	height: 40px;
	border: 3px solid #a49c7c;
	position: absolute;
	top: 13px;
	transform: rotate(45deg);
	z-index: -1;
	margin: 0 auto;
	left: 0;
	right: 0;
	box-shadow: inset 2px 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.frame {
	height: 100%;
	border-top: 6px solid #b89675;
	border-right: 6px solid #7b654f;
	border-bottom: 6px solid #7b654f;
	border-left: 6px solid #a67c52;
	box-shadow: 0px 12px 10px -5px rgba(0, 0, 0, 0.78);
	z-index: 1;
	position: relative;
}
.inside {
	height: 100%;
	text-align: center;
	background: linear-gradient(149deg, #d3d4d5 0%, #d3d4d5 50%, #cccccc 51%, #cccccc 100%);
	border: 10px solid #fff;
	box-shadow: inset 0 4px 4px -1px rgba(60, 60, 60, 0.3);
	z-index: 9;
	position: relative;
}


					   XXXddddXX
					 XXX      XXXX
				   X0X          lXX                       XX0XXXX
				  XXl            lX                   XXXXXXXXXXXXXXdX
				XNX              XXN               XXXddX           XXdd0
		   XXXdddd;XN            XlX           XNXXddX                 XXdXX
		 NXdXdXXNNXXN           NXXdXXXXXXXXXXXXXX                       XlXN
	   NXlX       Xl0          XXXXlX0000000XXXNX                         XX0XXlX
	 X0Xl         NXl0X       XXX:XX                                       NlX    X0
	XXX            Nl X0X   XXXXXN     XX                                  XX      dX
   XXX            NdX  XdXXXXXlXX      XX                                  XX      X
  XXX            NXX  XXNX0XXdN                                           X0XXX:XdX
  0XX           XX   X   XXXXX                                 XXXXXXX00XXdXXX
 Nll         XXXX   X     XXX             XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 XXX      XXX     XX     lXN           NXdddXXX
XXX     XXl     XX      XX           XdXX
NlX     XdX      XXdN   dXX          XXl
NlX     XXN       XXX   dXX          Xl                               XXXXXX
XXl      XXX      XXX   XX0          Xl                               0ld   X0X
XXX      XXX     XXX    XXX         XlX                         XXXXXlXN    XdN
 NXl       XXXl dXXX     dXX         XXl                        XlX  l dX   XXl
  XXl        XXdX0X       lXN         NXldX                    XlXX  X0   XXXXXN
   NXX                     lXX         X0XddXXXXXXXXXXXX0X       XlX          dXX
	XXdl                    XlXX          XX0XXXXXXXXXXdXdX       XX        XXXdN
	   XXdXd                  XXXN                   XXXl0      XlXX     XXXd
		  XXdX                N0dXdX0XXX   XXXXXXXXXXXXXXX     XlXX   X0XX
			 XXX                 N0Xdddd    ddXXXXXXN         dXX    NXlX
			   XXXldX0000000000XXXXXXX0XXXdXdXXXX            XdX    XXX
				  NXX    XXXXXXXXXXXXXXXXXXXX  XXXXX       XlXN   X0l
									 XXX        NXddXXX   XlXX   NXl
									 XX000XXXX    XXXddX0dXX    Xd
									 XXXXXXlXX       N0dXXdXX X0X
								   XlXXXXdlXX          XX0XddXX
								   lXXXXl XX               XXXdX
								   XdX0d XX0  NX0X            XNXXd
								 dXl0XXXXdX   XlXX               NXdd
								 XXlXXlXXXX     XlXX                XXX
								 XXXXdXXXdXdX     lXN                 NXl
								dXX0XXXXXXXNXl     XdX                 XXl
								XNNXXX       XdX    dXX                 NXX
							   XN XXl         XXl     lXXX              Xl
							  lX  0lX          XX X      XXX             0l
							  XX NXXXl         X  N      XXdX           XXl
							 lX XXlXlX0       X  dXXX    lXdX           NXl
							 dN XlXXlXXX      lXX0XlX  XdX0          NXXd
							lX XdX0XdX Xd X  XXX  XXXXXXX        N0XXdd0
						   lX  XlXXl0   XNXXX    0XNX      XXX  N0XXX
						  lXX XlXXXXN       XNXXXXXXX       XlX      Xl
			NNNNNNXXXXXX0XldN XdXX0lX              XXX       XdXN     XX
   XXXXXXXXXXXXXXXXXXXXXXXN  XlXXdXX             XXlX        XlX     XddXXXXXXXXXXXd
	XXXXXXX                 XlXXXlXX      XXXXXXXdlXX        NXlXXXXXXXXXd0XXXXXXXX0lXN
	XXXXXXXXXXXXXXXXXXXXXXXXlXNXXlX    XXXdXX0XXXXXX          N0X00XXXNN            Xl0
	XX0          XXXXXXXXXXXX XlXX    XlXXN                             XdXX     N0XdX
XXXXXXXXXXXXXXXXXXXNNNNXXX   X0XdX    NXlXXXXXXX                          XXXXXXXXXXXN
NXXXXXXXXXXXXXXXXXXXXXXXXXXXXXdXX     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXdlXXXXXNX
					  XXNNX00XX            XXNNNXXXXXXX000XXXXXXXXXXXXXXXXXX

2D Transitions

Grow

.hover-grow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-grow:hover, .hover-grow:focus, .hover-grow:active {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

Shrink

.hover-shrink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-shrink:hover, .hover-shrink:focus, .hover-shrink:active {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

Pulse

.hover-pulse {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-pulse:hover, .hover-pulse:focus, .hover-pulse:active {
	-webkit-animation-name: hover-pulse;
	animation-name: hover-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;
}

Pulse Grow

.hover-pulse-grow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-pulse-grow:hover, .hover-pulse-grow:focus, .hover-pulse-grow:active {
	-webkit-animation-name: hover-pulse-grow;
	animation-name: hover-pulse-grow;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.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;
}

Pulse Shrink

.hover-pulse-shrink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-pulse-shrink:hover, .hover-pulse-shrink:focus, .hover-pulse-shrink:active {
	-webkit-animation-name: hover-pulse-shrink;
	animation-name: hover-pulse-shrink;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.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;
}

Push

.hover-push {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-push:hover, .hover-push:focus, .hover-push:active {
	-webkit-animation-name: hover-push;
	animation-name: hover-push;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

Pop

.hover-pop {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-pop:hover, .hover-pop:focus, .hover-pop:active {
	-webkit-animation-name: hover-pop;
	animation-name: hover-pop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

Bounce In

.hover-bounce-in {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.hover-bounce-in:hover, .hover-bounce-in:focus, .hover-bounce-in:active {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

Bounce Out

.hover-bounce-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.hover-bounce-out:hover, .hover-bounce-out:focus, .hover-bounce-out:active {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

Rotate

.hover-rotate {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-rotate:hover, .hover-rotate:focus, .hover-rotate:active {
	-webkit-transform: rotate(4deg);
	transform: rotate(4deg);
}

Grow Rotate

.hover-grow-rotate {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-grow-rotate:hover, .hover-grow-rotate:focus, .hover-grow-rotate:active {
	-webkit-transform: scale(1.1) rotate(4deg);
	transform: scale(1.1) rotate(4deg);
}

Float

.hover-float {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-float:hover, .hover-float:focus, .hover-float:active {
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
}

Sink

.hover-sink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-sink:hover, .hover-sink:focus, .hover-sink:active {
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
}

Bob

.hover-bob {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-bob:hover, .hover-bob:focus, .hover-bob:active {
	-webkit-animation-name: hover-bob-float, hover-bob;
	animation-name: hover-bob-float, hover-bob;
	-webkit-animation-duration: .3s, 1.5s;
	animation-duration: .3s, 1.5s;
	-webkit-animation-delay: 0s, .3s;
	animation-delay: 0s, .3s;
	-webkit-animation-timing-function: ease-out, ease-in-out;
	animation-timing-function: ease-out, ease-in-out;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction: normal, alternate;
	animation-direction: normal, alternate;
}

Hang

.hover-hang {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-hang:hover, .hover-hang:focus, .hover-hang:active {
	-webkit-animation-name: hover-hang-sink, hover-hang;
	animation-name: hover-hang-sink, hover-hang;
	-webkit-animation-duration: .3s, 1.5s;
	animation-duration: .3s, 1.5s;
	-webkit-animation-delay: 0s, .3s;
	animation-delay: 0s, .3s;
	-webkit-animation-timing-function: ease-out, ease-in-out;
	animation-timing-function: ease-out, ease-in-out;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction: normal, alternate;
	animation-direction: normal, alternate;
}

Skew

.hover-skew {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-skew:hover, .hover-skew:focus, .hover-skew:active {
	-webkit-transform: skew(-10deg);
	transform: skew(-10deg);
}

Skew Forward

.hover-skew-forward {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.hover-skew-forward:hover, .hover-skew-forward:focus, .hover-skew-forward:active {
	-webkit-transform: skew(-10deg);
	transform: skew(-10deg);
}

Skew Backward

.hover-skew-backward {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.hover-skew-backward:hover, .hover-skew-backward:focus, .hover-skew-backward:active {
	-webkit-transform: skew(10deg);
	transform: skew(10deg);
}

Wobble Horizontal

.hover-wobble-horizontal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-wobble-horizontal:hover, .hover-wobble-horizontal:focus, .hover-wobble-horizontal:active {
	-webkit-animation-name: hover-wobble-horizontal;
	animation-name: hover-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;
}

Wobble Vertical

.hover-wobble-vertical {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-wobble-vertical:hover, .hover-wobble-vertical:focus, .hover-wobble-vertical:active {
	-webkit-animation-name: hover-wobble-vertical;
	animation-name: hover-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;
}

Wobble To Bottom Right

.hover-wobble-to-bottom-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-wobble-to-bottom-right:hover, .hover-wobble-to-bottom-right:focus, .hover-wobble-to-bottom-right:active {
	-webkit-animation-name: hover-wobble-to-bottom-right;
	animation-name: hover-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;
}

Wobble To Top Right

.hover-wobble-to-top-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-wobble-to-top-right:hover, .hover-wobble-to-top-right:focus, .hover-wobble-to-top-right:active {
	-webkit-animation-name: hover-wobble-to-top-right;
	animation-name: hover-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;
}

Wobble Top

.hover-wobble-top {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.hover-wobble-top:hover, .hover-wobble-top:focus, .hover-wobble-top:active {
	-webkit-animation-name: hover-wobble-top;
	animation-name: hover-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;
}

Wobble Bottom

.hover-wobble-bottom {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

.hover-wobble-bottom:hover, .hover-wobble-bottom:focus, .hover-wobble-bottom:active {
	-webkit-animation-name: hover-wobble-bottom;
	animation-name: hover-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;
}

Wobble Skew

.hover-wobble-skew {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-wobble-skew:hover, .hover-wobble-skew:focus, .hover-wobble-skew:active {
	-webkit-animation-name: hover-wobble-skew;
	animation-name: hover-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;
}

Buzz

.hover-buzz {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-buzz:hover, .hover-buzz:focus, .hover-buzz:active {
	-webkit-animation-name: hover-buzz;
	animation-name: hover-buzz;
	-webkit-animation-duration: 0.15s;
	animation-duration: 0.15s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

Buzz Out

.hover-buzz-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-buzz-out:hover, .hover-buzz-out:focus, .hover-buzz-out:active {
	-webkit-animation-name: hover-buzz-out;
	animation-name: hover-buzz-out;
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

Forward

.hover-forward {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-forward:hover, .hover-forward:focus, .hover-forward:active {
	-webkit-transform: translateX(8px);
	transform: translateX(8px);
}

Backward

.hover-backward {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-backward:hover, .hover-backward:focus, .hover-backward:active {
	-webkit-transform: translateX(-8px);
	transform: translateX(-8px);
}

3D Transitions

2D-3D

.hover-3d-button {
	position: relative;
	top: 0;
	display: inline-block;
	vertical-align: middle;
	box-shadow:0 5px 0 0 #cdcccc;
	transition: all 0.2s;
}

.hover-3d-button:hover, .hover-3d-button:focus, .hover-3d-button:active {
	top: 4px;
	box-shadow: 0 1px 0 0 #cdcccc;
	transition: all 0.2s;
}

.hover-3d-button-two {
	position: relative;
	top: 0;
	left: 0;
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	transition: all .2s;
}

.hover-3d-button-two:before, .hover-3d-button-two:after {
	position: absolute;
	content: '';
	transition: all .2s;
}

.hover-3d-button-two:before {
	height: 7px;
	width: 100%;
	bottom: -7px;
	left: 3px;
	-webkit-transform: skewX(45deg);
	transform: skewX(45deg);
	background-color: #cdcccc;
}

.hover-3d-button-two:after {
	height: 100%;
	width: 7px;
	right: -7px;
	bottom: -4px;
	-webkit-transform: skewY(45deg);
	transform: skewY(45deg);
	background-color: #a0a0a0;
}

.hover-3d-button-two:hover, .hover-3d-butto-two:focus, .hover-3d-button-two:active {
	top: 4px;
	left: 4px;
}

.hover-3d-button-two:hover:before, .hover-3d-butto-two:focus:before, .hover-3d-button-two:active:before{
	height: 3px;
	bottom: -3px;
	left: 2px;
}

.hover-3d-button-two:hover:after, .hover-3d-butto-two:focus:after, .hover-3d-button-two:active:after {
	width: 3px;
	right: -3px;
	bottom: -2px;
}

3D-Skew

.hover-3d-button-tree {
	position: relative;
	top: 0;
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	transition: all .2s;
	-webkit-transform: skew(-20deg);
	transform: skew(-20deg);
}

.hover-3d-button-tree:before, .hover-3d-button-tree:after {
	position: absolute;
	content: '';
	transition: all .2s;
}

.hover-3d-button-tree:before {
	bottom: -10px;
	height: 10px;
	width: 100%;
	left: 2px;
	-webkit-transform: skewX(20deg);
	transform: skewX(20deg);
	background-color: #cdcccc;
}

.hover-3d-button-tree:after {
	right: -3px;
	height: 97%;
	width: 4px;
	bottom: -4px;
	-webkit-transform: skewY(70deg);
	transform: skewY(70deg);
	background-color: #a0a0a0;
}

.hover-3d-button-tree:hover, .hover-3d-butto-tree:focus, .hover-3d-button-tree:active {
	top: 4px;
}

.hover-3d-button-tree:hover:before, .hover-3d-butto-tree:focus:before, .hover-3d-button-tree:active:before{
	height: 6px;
	bottom: -6px;
}

.hover-3d-button-tree:hover:after, .hover-3d-butto-tree:focus:after, .hover-3d-button-tree:active:after {
	height: 97%;
	width: 3px;
	right: -3px;
	bottom: -2px;
}

3D-Card

a.hover-3d-card {
	position: relative;
}

.hover-3d-card:before {
	right: 100%;
	border-right: 10px solid #7f7f7f;
	border-top: 21px solid transparent;
	content: "";
	display: block;
	height: 0;
	position: absolute;
	top: 0;
	width: 7px;
}

.hover-3d-card:hover, .hover-3d-card:focus, .hover-3d-card:active {
	*/ Was du hier haben willst /*
}

Background Transitions

Fade

.hover-fade {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	overflow: hidden;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
}

.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
	background-color: #8a1420;
	color: white;
}

Back Pulse

@-webkit-keyframes hover-back-pulse {
	50% {
		background-color: rgba(32, 152, 209, 0.75);
	}
}

@keyframes hover-back-pulse {
	50% {
		background-color: rgba(138, 20, 32, 0.75);
	}
}

.hover-back-pulse {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	overflow: hidden;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
}

.hover-back-pulse:hover, .hover-back-pulse:focus, .hover-back-pulse:active {
	-webkit-animation-name: hover-back-pulse;
	animation-name: hover-back-pulse;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	background-color: #8a1420;
	color: white;
}

Sweep To Right

.hover-sweep-to-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-sweep-to-right:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-sweep-to-right:hover, .hover-sweep-to-right:focus, .hover-sweep-to-right:active {
	color: white;
}

.hover-sweep-to-right:hover:before, .hover-sweep-to-right:focus:before, .hover-sweep-to-right:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

Sweep To Left

.hover-sweep-to-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-sweep-to-left:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-sweep-to-left:hover, .hover-sweep-to-left:focus, .hover-sweep-to-left:active {
	color: white;
}

.hover-sweep-to-left:hover:before, .hover-sweep-to-left:focus:before, .hover-sweep-to-left:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

Sweep To Bottom

.hover-sweep-to-bottom {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-sweep-to-bottom:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-sweep-to-bottom:hover, .hover-sweep-to-bottom:focus, .hover-sweep-to-bottom:active {
	color: white;
}

.hover-sweep-to-bottom:hover:before, .hover-sweep-to-bottom:focus:before, .hover-sweep-to-bottom:active:before {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}

Sweep To Top

.hover-sweep-to-top {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-sweep-to-top:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-sweep-to-top:hover, .hover-sweep-to-top:focus, .hover-sweep-to-top:active {
	color: white;
}

.hover-sweep-to-top:hover:before, .hover-sweep-to-top:focus:before, .hover-sweep-to-top:active:before {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}

Bounce To Right

.hover-bounce-to-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.hover-bounce-to-right:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-bounce-to-right:hover, .hover-bounce-to-right:focus, .hover-bounce-to-right:active {
	color: white;
}

.hover-bounce-to-right:hover:before, .hover-bounce-to-right:focus:before, .hover-bounce-to-right:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

Bounce To Left

.hover-bounce-to-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.hover-bounce-to-left:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-bounce-to-left:hover, .hover-bounce-to-left:focus, .hover-bounce-to-left:active {
	color: white;
}

.hover-bounce-to-left:hover:before, .hover-bounce-to-left:focus:before, .hover-bounce-to-left:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

Bounce To Bottom

.hover-bounce-to-bottom {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.hover-bounce-to-bottom:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-bounce-to-bottom:hover, .hover-bounce-to-bottom:focus, .hover-bounce-to-bottom:active {
	color: white;
}

.hover-bounce-to-bottom:hover:before, .hover-bounce-to-bottom:focus:before, .hover-bounce-to-bottom:active:before {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

Bounce To Top

.hover-bounce-to-top {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.hover-bounce-to-top:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-bounce-to-top:hover, .hover-bounce-to-top:focus, .hover-bounce-to-top:active {
	color: white;
}

.hover-bounce-to-top:hover:before, .hover-bounce-to-top:focus:before, .hover-bounce-to-top:active:before {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

Radial Out

.hover-radial-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
	background: #e1e1e1;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-radial-out:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	border-radius: 100%;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-radial-out:hover, .hover-radial-out:focus, .hover-radial-out:active {
	color: white;
}

.hover-radial-out:hover:before, .hover-radial-out:focus:before, .hover-radial-out:active:before {
	-webkit-transform: scale(2);
	transform: scale(2);
}

Radial In

.hover-radial-in {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
	background: #8a1420;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-radial-in:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #e1e1e1;
	border-radius: 100%;
	-webkit-transform: scale(2);
	transform: scale(2);
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-radial-in:hover, .hover-radial-in:focus, .hover-radial-in:active {
	color: white;
}

.hover-radial-in:hover:before, .hover-radial-in:focus:before, .hover-radial-in:active:before {
	-webkit-transform: scale(0);
	transform: scale(0);
}

Rectangle In

.hover-rectangle-in {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	background: #8a1420;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-rectangle-in:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #e1e1e1;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-rectangle-in:hover, .hover-rectangle-in:focus, .hover-rectangle-in:active {
	color: white;
}

.hover-rectangle-in:hover:before, .hover-rectangle-in:focus:before, .hover-rectangle-in:active:before {
	-webkit-transform: scale(0);
	transform: scale(0);
}

Rectangle Out

.hover-rectangle-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	background: #e1e1e1;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-rectangle-out:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-rectangle-out:hover, .hover-rectangle-out:focus, .hover-rectangle-out:active {
	color: white;
}

.hover-rectangle-out:hover:before, .hover-rectangle-out:focus:before, .hover-rectangle-out:active:before {
	-webkit-transform: scale(1);
	transform: scale(1);
}

Shutter In Horizontal

.hover-shutter-in-horizontal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	background: #8a1420;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-shutter-in-horizontal:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #e1e1e1;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-shutter-in-horizontal:hover, .hover-shutter-in-horizontal:focus, .hover-shutter-in-horizontal:active {
	color: white;
}

.hover-shutter-in-horizontal:hover:before, .hover-shutter-in-horizontal:focus:before, .hover-shutter-in-horizontal:active:before {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
}

Shutter Out Horizontal

.hover-shutter-out-horizontal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	background: #e1e1e1;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-shutter-out-horizontal:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #8a1420;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-shutter-out-horizontal:hover, .hover-shutter-out-horizontal:focus, .hover-shutter-out-horizontal:active {
	color: white;
}

.hover-shutter-out-horizontal:hover:before, .hover-shutter-out-horizontal:focus:before, .hover-shutter-out-horizontal:active:before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

Shutter In Vertical

.hover-shutter-in-vertical {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	background: #8a1420;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-shutter-in-vertical:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #e1e1e1;
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-shutter-in-vertical:hover, .hover-shutter-in-vertical:focus, .hover-shutter-in-vertical:active {
	color: white;
}

.hover-shutter-in-vertical:hover:before, .hover-shutter-in-vertical:focus:before, .hover-shutter-in-vertical:active:before {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
}

Shutter Out Vertical

.hover-shutter-out-vertical {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	background: #e1e1e1;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-shutter-out-vertical:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #8a1420;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-shutter-out-vertical:hover, .hover-shutter-out-vertical:focus, .hover-shutter-out-vertical:active {
	color: white;
}

.hover-shutter-out-vertical:hover:before, .hover-shutter-out-vertical:focus:before, .hover-shutter-out-vertical:active:before {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}

Icons

Icon Back

.hover-icon-back {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
}

.hover-icon-back .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-back:hover .hover-icon, .hover-icon-back:focus .hover-icon, .hover-icon-back:active .hover-icon {
	-webkit-transform: translateX(-4px);
	transform: translateX(-4px);
}

Icon Forward

.hover-icon-forward {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
}

.hover-icon-forward .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-forward:hover .hover-icon, .hover-icon-forward:focus .hover-icon, .hover-icon-forward:active .hover-icon {
	-webkit-transform: translateX(4px);
	transform: translateX(4px);
}

Icon Down

@-webkit-keyframes hover-icon-down {
	0%,
	50%,
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	25%,
	75% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
}

@keyframes hover-icon-down {
	0%,
	50%,
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	25%,
	75% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
}

.hover-icon-down {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-down .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-down:hover .hover-icon, .hover-icon-down:focus .hover-icon, .hover-icon-down:active .hover-icon {
	-webkit-animation-name: hover-icon-down;
	animation-name: hover-icon-down;
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

Icon Up

@-webkit-keyframes hover-icon-up {
	0%,
	50%,
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	25%,
	75% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}
}

@keyframes hover-icon-up {
	0%,
	50%,
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	25%,
	75% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}
}


.hover-icon-up {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-up .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-up:hover .hover-icon, .hover-icon-up:focus .hover-icon, .hover-icon-up:active .hover-icon {
	-webkit-animation-name: hover-icon-up;
	animation-name: hover-icon-up;
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

Icon Spin

.hover-icon-spin {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-spin .hover-icon {
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.hover-icon-spin:hover .hover-icon, .hover-icon-spin:focus .hover-icon, .hover-icon-spin:active .hover-icon {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}

Icon Drop

@-webkit-keyframes hover-icon-drop {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	51%,
	100% {
		opacity: 1;
	}
}

@keyframes hover-icon-drop {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	51%,
	100% {
		opacity: 1;
	}
}

.hover-icon-drop {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-drop .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-drop:hover .hover-icon, .hover-icon-drop:focus .hover-icon, .hover-icon-drop:active .hover-icon {
	opacity: 0;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-animation-name: hover-icon-drop;
	animation-name: hover-icon-drop;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

Icon Fade

.hover-icon-fade {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-fade .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: color;
	transition-property: color;
}

.hover-icon-fade:hover .hover-icon, .hover-icon-fade:focus .hover-icon, .hover-icon-fade:active .hover-icon {
	color: #0F9E5E;
}

Icon Float Away

-webkit-keyframes hover-icon-float-away {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-1em);
		transform: translateY(-1em);
	}
}

@keyframes hover-icon-float-away {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-1em);
		transform: translateY(-1em);
	}
}

.hover-icon-float-away {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-float-away .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hover-icon-float-away:hover .hover-icon, .hover-icon-float-away:focus .hover-icon, .hover-icon-float-away:active .hover-icon {
	-webkit-animation-name: hover-icon-float-away;
	animation-name: hover-icon-float-away;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

Icon Sink Away

@-webkit-keyframes hover-icon-sink-away {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(1em);
		transform: translateY(1em);
	}
}

@keyframes hover-icon-sink-away {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(1em);
		transform: translateY(1em);
	}
}

.hover-icon-sink-away {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-sink-away .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hover-icon-sink-away:hover .hover-icon, .hover-icon-sink-away:focus .hover-icon, .hover-icon-sink-away:active .hover-icon {
	-webkit-animation-name: hover-icon-sink-away;
	animation-name: hover-icon-sink-away;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

Icon Grow

.hover-icon-grow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-grow .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-grow:hover .hover-icon, .hover-icon-grow:focus .hover-icon, .hover-icon-grow:active .hover-icon {
	-webkit-transform: scale(1.3) translateZ(0);
	transform: scale(1.3) translateZ(0);
}

Icon Shrink

.hover-icon-shrink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-shrink .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-shrink:hover .hover-icon, .hover-icon-shrink:focus .hover-icon, .hover-icon-shrink:active .hover-icon {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}

Icon Pulse

@-webkit-keyframes hover-icon-pulse {
	25% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}
	75% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
}

@keyframes hover-icon-pulse {
	25% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}
	75% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
}

.hover-icon-pulse {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-pulse .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-pulse:hover .hover-icon, .hover-icon-pulse:focus .hover-icon, .hover-icon-pulse:active .hover-icon {
	-webkit-animation-name: hover-icon-pulse;
	animation-name: hover-icon-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;
}

Icon Pulse Grow

@-webkit-keyframes hover-icon-pulse-grow {
	to {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}
}

@keyframes hover-icon-pulse-grow {
	to {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}
}

.hover-icon-pulse-grow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-pulse-grow .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-pulse-grow:hover .hover-icon, .hover-icon-pulse-grow:focus .hover-icon, .hover-icon-pulse-grow:active .hover-icon {
	-webkit-animation-name: hover-icon-pulse-grow;
	animation-name: hover-icon-pulse-grow;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.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;
}

Icon Pulse Shrink

@-webkit-keyframes hover-icon-pulse-shrink {
	to {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
}

@keyframes hover-icon-pulse-shrink {
	to {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
}

.hover-icon-pulse-shrink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-icon-pulse-shrink .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-pulse-shrink:hover .hover-icon, .hover-icon-pulse-shrink:focus .hover-icon, .hover-icon-pulse-shrink:active .hover-icon {
	-webkit-animation-name: hover-icon-pulse-shrink;
	animation-name: hover-icon-pulse-shrink;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.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;
}

Icon Push

@-webkit-keyframes hover-icon-push {
	50% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
	}
}

@keyframes hover-icon-push {
	50% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
	}
}

.hover-icon-push {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-push .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-push:hover .hover-icon, .hover-icon-push:focus .hover-icon, .hover-icon-push:active .hover-icon {
	-webkit-animation-name: hover-icon-push;
	animation-name: hover-icon-push;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

Icon Pop

@-webkit-keyframes hover-icon-pop {
	50% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}
}

@keyframes hover-icon-pop {
	50% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}
}

.hover-icon-pop {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-pop .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-pop:hover .hover-icon, .hover-icon-pop:focus .hover-icon, .hover-icon-pop:active .hover-icon {
	-webkit-animation-name: hover-icon-pop;
	animation-name: hover-icon-pop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

Icon Bounce

.hover-icon-bounce {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-bounce .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-bounce:hover .hover-icon, .hover-icon-bounce:focus .hover-icon, .hover-icon-bounce:active .hover-icon {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

Icon Rotate

.hover-icon-rotate {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-rotate .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-rotate:hover .hover-icon, .hover-icon-rotate:focus .hover-icon, .hover-icon-rotate:active .hover-icon {
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}

Icon Grow Rotate

.hover-icon-grow-rotate {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-grow-rotate .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-grow-rotate:hover .hover-icon, .hover-icon-grow-rotate:focus .hover-icon, .hover-icon-grow-rotate:active .hover-icon {
	-webkit-transform: scale(1.5) rotate(12deg);
	transform: scale(1.5) rotate(12deg);
}

Icon Float

.hover-icon-float {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-float .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-float:hover .hover-icon, .hover-icon-float:focus .hover-icon, .hover-icon-float:active .hover-icon {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
}

Icon Sink

.hover-icon-sink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-sink .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-icon-sink:hover .hover-icon, .hover-icon-sink:focus .hover-icon, .hover-icon-sink:active .hover-icon {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
}

Icon Bob

@-webkit-keyframes hover-icon-bob {
	0% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}
	50% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}
	100% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}
}

@keyframes hover-icon-bob {
	0% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}
	50% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}
	100% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}
}

@-webkit-keyframes hover-icon-bob-float {
	100% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}
}

@keyframes hover-icon-bob-float {
	100% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}
}

.hover-icon-bob {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-bob .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-bob:hover .hover-icon, .hover-icon-bob:focus .hover-icon, .hover-icon-bob:active .hover-icon {
	-webkit-animation-name: hover-icon-bob-float, hover-icon-bob;
	animation-name: hover-icon-bob-float, hover-icon-bob;
	-webkit-animation-duration: .3s, 1.5s;
	animation-duration: .3s, 1.5s;
	-webkit-animation-delay: 0s, .3s;
	animation-delay: 0s, .3s;
	-webkit-animation-timing-function: ease-out, ease-in-out;
	animation-timing-function: ease-out, ease-in-out;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction: normal, alternate;
	animation-direction: normal, alternate;
}

Icon Hang

@-webkit-keyframes hover-icon-hang {
	0% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
	50% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	100% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
}

@keyframes hover-icon-hang {
	0% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
	50% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	100% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
}

@-webkit-keyframes hover-icon-hang-sink {
	100% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
}

@keyframes hover-icon-hang-sink {
	100% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
}

.hover-icon-hang {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-hang .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-hang:hover .hover-icon, .hover-icon-hang:focus .hover-icon, .hover-icon-hang:active .hover-icon {
	-webkit-animation-name: hover-icon-hang-sink, hover-icon-hang;
	animation-name: hover-icon-hang-sink, hover-icon-hang;
	-webkit-animation-duration: .3s, 1.5s;
	animation-duration: .3s, 1.5s;
	-webkit-animation-delay: 0s, .3s;
	animation-delay: 0s, .3s;
	-webkit-animation-timing-function: ease-out, ease-in-out;
	animation-timing-function: ease-out, ease-in-out;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-direction: normal, alternate;
	animation-direction: normal, alternate;
}

Icon Wobble Horizontal

@-webkit-keyframes hover-icon-wobble-horizontal {
	16.65% {
		-webkit-transform: translateX(6px);
		transform: translateX(6px);
	}
	33.3% {
		-webkit-transform: translateX(-5px);
		transform: translateX(-5px);
	}
	49.95% {
		-webkit-transform: translateX(4px);
		transform: translateX(4px);
	}
	66.6% {
		-webkit-transform: translateX(-2px);
		transform: translateX(-2px);
	}
	83.25% {
		-webkit-transform: translateX(1px);
		transform: translateX(1px);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes hover-icon-wobble-horizontal {
	16.65% {
		-webkit-transform: translateX(6px);
		transform: translateX(6px);
	}
	33.3% {
		-webkit-transform: translateX(-5px);
		transform: translateX(-5px);
	}
	49.95% {
		-webkit-transform: translateX(4px);
		transform: translateX(4px);
	}
	66.6% {
		-webkit-transform: translateX(-2px);
		transform: translateX(-2px);
	}
	83.25% {
		-webkit-transform: translateX(1px);
		transform: translateX(1px);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

.hover-icon-wobble-horizontal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-wobble-horizontal .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-wobble-horizontal:hover .hover-icon, .hover-icon-wobble-horizontal:focus .hover-icon, .hover-icon-wobble-horizontal:active .hover-icon {
	-webkit-animation-name: hover-icon-wobble-horizontal;
	animation-name: hover-icon-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;
}

Icon Wobble Vertical

@-webkit-keyframes hover-icon-wobble-vertical {
	16.65% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
	33.3% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
	49.95% {
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
	}
	66.6% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}
	83.25% {
		-webkit-transform: translateY(1px);
		transform: translateY(1px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes hover-icon-wobble-vertical {
	16.65% {
		-webkit-transform: translateY(6px);
		transform: translateY(6px);
	}
	33.3% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
	49.95% {
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
	}
	66.6% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}
	83.25% {
		-webkit-transform: translateY(1px);
		transform: translateY(1px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.hover-icon-wobble-vertical {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-wobble-vertical .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-wobble-vertical:hover .hover-icon, .hover-icon-wobble-vertical:focus .hover-icon, .hover-icon-wobble-vertical:active .hover-icon {
	-webkit-animation-name: hover-icon-wobble-vertical;
	animation-name: hover-icon-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;
}

Icon Buzz

@-webkit-keyframes hover-icon-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 hover-icon-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);
	}
}

.hover-icon-buzz {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-buzz .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-buzz:hover .hover-icon, .hover-icon-buzz:focus .hover-icon, .hover-icon-buzz:active .hover-icon {
	-webkit-animation-name: hover-icon-buzz;
	animation-name: hover-icon-buzz;
	-webkit-animation-duration: 0.15s;
	animation-duration: 0.15s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

Icon Buzz Out

@-webkit-keyframes hover-icon-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(1px) rotate(0);
		transform: translateX(1px) rotate(0);
	}
	100% {
		-webkit-transform: translateX(-1px) rotate(0);
		transform: translateX(-1px) rotate(0);
	}
}

@keyframes hover-icon-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(1px) rotate(0);
		transform: translateX(1px) rotate(0);
	}
	100% {
		-webkit-transform: translateX(-1px) rotate(0);
		transform: translateX(-1px) rotate(0);
	}
}

.hover-icon-buzz-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.hover-icon-buzz-out .hover-icon {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.hover-icon-buzz-out:hover .hover-icon, .hover-icon-buzz-out:focus .hover-icon, .hover-icon-buzz-out:active .hover-icon {
	-webkit-animation-name: hover-icon-buzz-out;
	animation-name: hover-icon-buzz-out;
	-webkit-animation-duration: 0.75s;
	animation-duration: 0.75s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

Border Transitions

Border Fade

.hover-border-fade {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow;
	transition-property: box-shadow;
	box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
}

.hover-border-fade:hover, .hover-border-fade:focus, .hover-border-fade:active {
	box-shadow: inset 0 0 0 4px #8a1420, 0 0 1px rgba(0, 0, 0, 0);
}

Hollow

.hover-hollow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: background;
	transition-property: background;
	box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
}

.hover-hollow:hover, .hover-hollow:focus, .hover-hollow:active {
	background: none;
}

Trim

.hover-trim {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-trim:before {
	content: '';
	position: absolute;
	border: #8a1420 solid 4px;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	opacity: 0;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: opacity;
	transition-property: opacity;
}

.hover-trim:hover:before, .hover-trim:focus:before, .hover-trim:active:before {
	opacity: 1;
}

Ripple Out

@-webkit-keyframes hover-ripple-out {
	100% {
		top: -12px;
		right: -12px;
		bottom: -12px;
		left: -12px;
		opacity: 0;
	}
}

@keyframes hover-ripple-out {
	100% {
		top: -12px;
		right: -12px;
		bottom: -12px;
		left: -12px;
		opacity: 0;
	}
}

.hover-ripple-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-ripple-out:before {
	content: '';
	position: absolute;
	border: #e1e1e1 solid 6px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

.hover-ripple-out:hover:before, .hover-ripple-out:focus:before, .hover-ripple-out:active:before {
	-webkit-animation-name: hover-ripple-out;
	animation-name: hover-ripple-out;
}

Ripple In

@-webkit-keyframes hover-ripple-in {
	100% {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 1;
	}
}

@keyframes hover-ripple-in {
	100% {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 1;
	}
}

.hover-ripple-in {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-ripple-in:before {
	content: '';
	position: absolute;
	border: #e1e1e1 solid 4px;
	top: -12px;
	right: -12px;
	bottom: -12px;
	left: -12px;
	opacity: 0;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

.hover-ripple-in:hover:before, .hover-ripple-in:focus:before, .hover-ripple-in:active:before {
	-webkit-animation-name: hover-ripple-in;
	animation-name: hover-ripple-in;
}

Outline Out

.hover-outline-out {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-outline-out:before {
	content: '';
	position: absolute;
	border: #e1e1e1 solid 4px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: top, right, bottom, left;
	transition-property: top, right, bottom, left;
}

.hover-outline-out:hover:before, .hover-outline-out:focus:before, .hover-outline-out:active:before {
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;#8a1420
}

Outline In

.hover-outline-in {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-outline-in:before {
	pointer-events: none;
	content: '';
	position: absolute;
	border: #e1e1e1 solid 4px;
	top: -16px;
	right: -16px;
	bottom: -16px;
	left: -16px;
	opacity: 0;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: top, right, bottom, left;
	transition-property: top, right, bottom, left;
}

.hover-outline-in:hover:before, .hover-outline-in:focus:before, .hover-outline-in:active:before {
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
	opacity: 1;
}

Round Corners

.hover-round-corners {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: border-radius;
	transition-property: border-radius;
}

.hover-round-corners:hover, .hover-round-corners:focus, .hover-round-corners:active {
	border-radius: 1em;
}

Underline From Left

.hover-underline-from-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-underline-from-left:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 100%;
	bottom: 0;
	background: #8a1420;
	height: 4px;
	-webkit-transition-property: right;
	transition-property: right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-underline-from-left:hover:before, .hover-underline-from-left:focus:before, .hover-underline-from-left:active:before {
	right: 0;
}

Underline From Center

.hover-underline-from-center {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-underline-from-center:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 51%;
	right: 51%;
	bottom: 0;
	background: #8a1420;
	height: 4px;
	-webkit-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-underline-from-center:hover:before, .hover-underline-from-center:focus:before, .hover-underline-from-center:active:before {
	left: 0;
	right: 0;
}

Underline From Right

.hover-underline-from-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-underline-from-right:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 100%;
	right: 0;
	bottom: 0;
	background: #8a1420;
	height: 4px;
	-webkit-transition-property: left;
	transition-property: left;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-underline-from-right:hover:before, .hover-underline-from-right:focus:before, .hover-underline-from-right:active:before {
	left: 0;
}

Reveal

.hover-reveal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-reveal:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-color: #8a1420;
	border-style: solid;
	border-width: 0;
	-webkit-transition-property: border-width;
	transition-property: border-width;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-reveal:hover:before, .hover-reveal:focus:before, .hover-reveal:active:before {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	border-width: 4px;
}

Underline Reveal

.hover-underline-reveal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-underline-reveal:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 0;
	background: #8a1420;
	height: 4px;
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-underline-reveal:hover:before, .hover-underline-reveal:focus:before, .hover-underline-reveal:active:before {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

Overline Reveal

.hover-overline-reveal {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-overline-reveal:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	top: 0;
	background: #8a1420;
	height: 4px;
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-overline-reveal:hover:before, .hover-overline-reveal:focus:before, .hover-overline-reveal:active:before {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

Overline From Left

.hover-overline-from-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-overline-from-left:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 100%;
	top: 0;
	background: #8a1420;
	height: 4px;
	-webkit-transition-property: right;
	transition-property: right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-overline-from-left:hover:before, .hover-overline-from-left:focus:before, .hover-overline-from-left:active:before {
	right: 0;
}

Overline From Center

.hover-overline-from-center {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-overline-from-center:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 51%;
	right: 51%;
	top: 0;
	background: #8a1420;
	height: 4px;
	-webkit-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-overline-from-center:hover:before, .hover-overline-from-center:focus:before, .hover-overline-from-center:active:before {
	left: 0;
	right: 0;
}

Overline From Right

.hover-overline-from-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	overflow: hidden;
}

.hover-overline-from-right:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 100%;
	right: 0;
	top: 0;
	background: #8a1420;
	height: 4px;
	-webkit-transition-property: left;
	transition-property: left;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.hover-overline-from-right:hover:before, .hover-overline-from-right:focus:before, .hover-overline-from-right:active:before {
	left: 0;
}

Shadow and Glow Transitions

Shadow

.hover-shadow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow;
	transition-property: box-shadow;
}

.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

Grow Shadow

.hover-grow-shadow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow, transform;
	transition-property: box-shadow, transform;
}

.hover-grow-shadow:hover, .hover-grow-shadow:focus, .hover-grow-shadow:active {
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

Float Shadow

.hover-float-shadow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-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, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform, opacity;
	transition-property: transform, opacity;
}

.hover-float-shadow:hover, .hover-float-shadow:focus, .hover-float-shadow:active {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
}

.hover-float-shadow:hover:before, .hover-float-shadow:focus:before, .hover-float-shadow:active:before {
	opacity: 1;
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
}

Glow

.hover-glow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow;
	transition-property: box-shadow;
}

.hover-glow:hover, .hover-glow:focus, .hover-glow:active {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

Shadow Radial

.hover-shadow-radial {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-shadow-radial:before, .hover-shadow-radial:after {
	pointer-events: none;
	position: absolute;
	content: '';
	left: 0;
	width: 100%;
	box-sizing: border-box;
	background-repeat: no-repeat;
	height: 5px;
	opacity: 0;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: opacity;
	transition-property: opacity;
}

.hover-shadow-radial:before {
	bottom: 100%;
	background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
	background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.hover-shadow-radial:after {
	top: 100%;
	background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
	background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.hover-shadow-radial:hover:before, .hover-shadow-radial:focus:before, .hover-shadow-radial:active:before, .hover-shadow-radial:hover:after, .hover-shadow-radial:focus:after, .hover-shadow-radial:active:after {
	opacity: 1;
}

Box Shadow Outset

.hover-box-shadow-outset {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow;
	transition-property: box-shadow;
}

.hover-box-shadow-outset:hover, .hover-box-shadow-outset:focus, .hover-box-shadow-outset:active {
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

Box Shadow Inset

.hover-box-shadow-inset {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: box-shadow;
	transition-property: box-shadow;
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
	/* Hack to improve aliasing on mobile/tablet devices */
}

.hover-box-shadow-inset:hover, .hover-box-shadow-inset:focus, .hover-box-shadow-inset:active {
	box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
	/* Hack to improve aliasing on mobile/tablet devices */
}

a.box-drop-shadow {
	drop-shadow(0px 1px 5px black);
}

Speech Bubbles

Bubble Top

.hover-bubble-top {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-bubble-top:before {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	border-style: solid;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	left: calc(50% - 10px);
	top: 0;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #e1e1e1 transparent;
}

.hover-bubble-top:hover:before, .hover-bubble-top:focus:before, .hover-bubble-top:active:before {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}

Bubble Right

.hover-bubble-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-bubble-right:before {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	border-style: solid;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	top: calc(50% - 10px);
	right: 0;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #e1e1e1;
}

.hover-bubble-right:hover:before, .hover-bubble-right:focus:before, .hover-bubble-right:active:before {
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
}

Bubble Bottom

.hover-bubble-bottom {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-bubble-bottom:before {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	border-style: solid;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	left: calc(50% - 10px);
	bottom: 0;
	border-width: 10px 10px 0 10px;
	border-color: #e1e1e1 transparent transparent transparent;
}

.hover-bubble-bottom:hover:before, .hover-bubble-bottom:focus:before, .hover-bubble-bottom:active:before {
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
}

Bubble Left

.hover-bubble-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-bubble-left:before {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	border-style: solid;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	top: calc(50% - 10px);
	left: 0;
	border-width: 10px 10px 10px 0;
	border-color: transparent #e1e1e1 transparent transparent;
}

.hover-bubble-left:hover:before, .hover-bubble-left:focus:before, .hover-bubble-left:active:before {
	-webkit-transform: translateX(-10px);
	transform: translateX(-10px);
}

Bubble Float Top

.hover-bubble-float-top {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
.hover-bubble-float-top:before {
	position: absolute;
	z-index: -1;
	content: '';
	left: calc(50% - 10px);
	top: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #e1e1e1 transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-bubble-float-top:hover, .hover-bubble-float-top:focus, .hover-bubble-float-top:active {
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
}

.hover-bubble-float-top:hover:before, .hover-bubble-float-top:focus:before, .hover-bubble-float-top:active:before {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}

Bubble Float Right

.hover-bubble-float-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-bubble-float-right:before {
	position: absolute;
	z-index: -1;
	top: calc(50% - 10px);
	right: 0;
	content: '';
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #e1e1e1;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-bubble-float-right:hover, .hover-bubble-float-right:focus, .hover-bubble-float-right:active {
	-webkit-transform: translateX(-10px);
	transform: translateX(-10px);
}

.hover-bubble-float-right:hover:before, .hover-bubble-float-right:focus:before, .hover-bubble-float-right:active:before {
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
}

Bubble Float Bottom

.hover-bubble-float-bottom {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-bubble-float-bottom:before {
	position: absolute;
	z-index: -1;
	content: '';
	left: calc(50% - 10px);
	bottom: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #e1e1e1 transparent transparent transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-bubble-float-bottom:hover, .hover-bubble-float-bottom:focus, .hover-bubble-float-bottom:active {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}

.hover-bubble-float-bottom:hover:before, .hover-bubble-float-bottom:focus:before, .hover-bubble-float-bottom:active:before {
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
}

Bubble Float Left

.hover-bubble-float-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-bubble-float-left:before {
	position: absolute;
	z-index: -1;
	content: '';
	top: calc(50% - 10px);
	left: 0;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #e1e1e1 transparent transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.hover-bubble-float-left:hover, .hover-bubble-float-left:focus, .hover-bubble-float-left:active {
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
}

.hover-bubble-float-left:hover:before, .hover-bubble-float-left:focus:before, .hover-bubble-float-left:active:before {
	-webkit-transform: translateX(-10px);
	transform: translateX(-10px);
}

Curls

Curl Top Left

.hover-curl-top-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}

.hover-curl-top-left:before {
	pointer-events: none;
	position: absolute;
	content: '';
	height: 0;
	width: 0;
	top: 0;
	left: 0;
	background: white;
	/* IE9 */
	background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
	/*For IE7-8-9*/
	z-index: 1000;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: width, height;
	transition-property: width, height;
}

.hover-curl-top-left:hover:before, .hover-curl-top-left:focus:before, .hover-curl-top-left:active:before {
	width: 25px;
	height: 25px;
}

Curl Top Right

.hover-curl-top-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}
.hover-curl-top-right:before {
	pointer-events: none;
	position: absolute;
	content: '';
	height: 0;
	width: 0;
	top: 0;
	right: 0;
	background: white;
	/* IE9 */
	background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: width, height;
	transition-property: width, height;
}
.hover-curl-top-right:hover:before, .hover-curl-top-right:focus:before, .hover-curl-top-right:active:before {
	width: 25px;
	height: 25px;
}

Curl Bottom Right

.hover-curl-bottom-right {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}
.hover-curl-bottom-right:before {
	pointer-events: none;
	position: absolute;
	content: '';
	height: 0;
	width: 0;
	bottom: 0;
	right: 0;
	background: white;
	/* IE9 */
	background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
	box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: width, height;
	transition-property: width, height;
}
.hover-curl-bottom-right:hover:before, .hover-curl-bottom-right:focus:before, .hover-curl-bottom-right:active:before {
	width: 25px;
	height: 25px;
}

Curl Bottom Left

.hover-curl-bottom-left {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
}
.hover-curl-bottom-left:before {
	pointer-events: none;
	position: absolute;
	content: '';
	height: 0;
	width: 0;
	bottom: 0;
	left: 0;
	background: white;
	/* IE9 */
	background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
	box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: width, height;
	transition-property: width, height;
}
.hover-curl-bottom-left:hover:before, .hover-curl-bottom-left:focus:before, .hover-curl-bottom-left:active:before {
	width: 25px;
	height: 25px;
}

Geometrische Formen

#oval {
	width: 200px;
	height: 100px;
	background: #a84444;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}

#up-triangle {
	width: 0;
	height: 0;
	border-bottom: 120px solid #a84444;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
}

#down-triangle {
	width: 0;
	height: 0;
	border-top: 80px solid #a84444;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
}

#left-triangle {
	width: 0;
	height: 0;
	border-right: 100px solid #a84444;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}

#right-triangle {
	width: 0;
	height: 0;
	border-left: 100px solid #a84444;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}

#twelve-point-star {
	height: 100px;
	width: 100px;
	background: #a84444;
}

#twelve-point-star:before {
	height: 100px;
	width: 100px;
	background: #a84444;
	content:"";
	position: absolute;

	/* Rotate */
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
}

#twelve-point-star:after {
	height: 100px;
	width: 100px;
	background: #a84444;
	content:"";
	position: absolute;

	/* Rotate */
	-moz-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

#six-point-star {
	position: relative;
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 100px solid #a84444;
}

#six-point-star:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-top: 100px solid #a84444;
	margin: 30px 0 0 -60px;
}

#star-dotted-border{
	background: transparent;
	width: 60px;
	height: 60px;
	border: dotted 10px #a84444;
	margin: 20px auto;
	position: relative;
}

#star-dotted-border:before{
	content: "";
	background: transparent;
	width: 60px;
	height: 60px;
	border: dotted 10px #a84444;
	position: absolute;
	left: -10px;
	top: -10px;
	transform: rotate(30deg);
}

#star-dotted-border:after{
	content: "";
	background: transparent;
	width: 60px;
	height: 60px;
	border: dotted 10px #a84444;
	position: absolute;
	left: -10px;
	top: -10px;
	transform: rotate(60deg);
}

#pentagon {
	position: relative;
	width: 54px;
	border-width: 50px 18px 0;
	border-style: solid;
	border-color: #a84444 transparent;
}

#pentagon:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	top: -85px;
	left: -18px;
	border-width: 0 45px 35px;
	border-style: solid;
	border-color: transparent transparent #a84444;
}

#hexagon {
	width: 100px;
	height: 55px;
	background: #a84444;
	position: relative;
}

#hexagon:before {
	content: "";
	position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid #a84444;
}

#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	order-right: 50px solid transparent;
	border-top: 25px solid #a84444;
}

STOP

#octagon {
	width: 100px;
	height: 100px;
	background: #a84444;
}

#octagon:before {
	height: 0;
	width: 40px;
	content:"";
	position: absolute;
	border-bottom: 30px solid #a84444;
	border-left: 30px solid rgba(255,255,255,0);
	border-right: 30px solid rgba(255,255,255,0);
}

#octagon:after {
	height: 0;
	width: 40px;
	content:"";
	position: absolute;
	border-top: 30px solid #a84444;
	border-left: 30px solid rgba(255,255,255,0);
	border-right: 30px solid rgba(255,255,255,0);
	margin: 70px 0 0 0;
}

#mushroom{
	position: relative;
	width: 100px;
	height: 50px;
	background: #a84444;
	border-radius: 100% 100% 0 0 / 170% 170% 0 0;

}

#mushroom:after{
	position: absolute;
	content:'';
	width: 50px;
	height: 80px;
	background: #a84444;
	left: 50%;
	margin-left: -25px;
	border-radius: 100% 100% 50% 50% / 200% 200% 30% 30%;
	top: 50%;
}

#cross{
	background: #a84444;
	width: 33px;
	height: 100px;
	position: relative;
	transform: rotate(45deg);
}

#cross:before{
	background: #a84444;
	content: "";
	width: 100px;
	height: 33px;
	position: absolute;
	top: 33px;
	left: -33px;
}

#cross-rounded-borders{
	background: #a84444;
	width: 33px;
	height: 100px;
	position: relative;
	transform: rotate(45deg);
	border-radius: 20px;
}

#cross-rounded-borders:before{
	background: #a84444;
	content: "";
	width: 100px;
	height: 33px;
	position: absolute;
	top: 33px;
	left: -33px;
	border-radius: 20px;
}

#plus{
	background: #a84444;
	width: 33px;
	height: 100px;
	position: relative;
}

#plus:before{
	background: #a84444;
	content: "";
	width: 100px;
	height: 33px;
	position: absolute;
	top: 33px;
	left: -33px;
}

#plus-rounded-borders{
	background: #a84444;
	width: 33px;
	height: 100px;
	position: relative;
	border-radius: 20px;
}

#plus-rounded-borders:before{
	background: #a84444;
	content: "";
	width: 100px;
	height: 33px;
	position: absolute;
	top: 33px;
	left: -33px;
	border-radius: 20px;
}

#speech-bubble {
	width: 120px;
	height: 80px;
	background: #a84444;
	position: relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#speech-bubble:before {
	content:"";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-right: 26px solid #a84444;
	border-bottom: 13px solid transparent;
	margin: 13px 0 0 -25px;
}

	#egg {
		display: block;
		width: 60px;
/* width has to be 70% of height */
/* could use width:70%; in a square container */
		height: 80px;
		background-color: #a84444;

/* beware that Safari needs actual px for border radius (bug) */
		-webkit-border-radius: 63px 63px 63px 63px/	108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
		border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
	}

#pacman {
	width: 0px;
	height: 0px;
	border-right: 40px solid transparent;
	border-top: 40px solid #a84444;
	border-left: 40px solid #a84444;
	border-bottom: 40px solid #a84444;
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
}

#biohazard {
	width: 0;
	height: 0;
	border-bottom: 40px solid black;
	border-top: 40px solid black;
	border-left: 40px solid yellow;
	border-right: 40px solid yellow;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
}

#heart {
	position: relative;
	width: 100px;
	height: 80px;
}

#heart:before, #heart:after {
	position: absolute;
	content: "";
	left: 50px;
	top: 0;
	width: 50px;
	height: 80px;
	background: #a84444;
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

#heart:after {
	left: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin :100% 100%;
}

#infinity {
	position: relative;
	width: 139px;
	height: 80px;
}

#infinity:before, #infinity:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	border: 20px solid #a84444;
	-moz-border-radius: 50px 50px 0 50px;
	border-radius: 50px 50px 0 50px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#infinity:after {
	left: auto;
	right: 0;
	-moz-border-radius: 50px 50px 50px 0;
	border-radius: 50px 50px 50px 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#yin-yang {
	width: 76px;
	height: 38px;
	background: #fff;
	border-color: #a84444;
	border-style: solid;
	border-width: 2px 2px 38px 2px;
	border-radius: 100%;
	position: relative;
}

#yin-yang:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	background: #fff;
	border: 13px solid #a84444;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

#yin-yang:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #a84444;
	border: 13px solid #fff;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

#badge-ribbon {
	position: relative;
	background: #a84444;
	height: 78px;
	width: 78px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

#badge-ribbon:before, #badge-ribbon:after {
	content: '';
	position: absolute;
	border-bottom: 61px solid #a84444;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	top: 60px;
	left: -10px;
	-webkit-transform: rotate(-140deg);
	-moz-transform: rotate(-140deg);
	-ms-transform: rotate(-140deg);
	-o-transform: rotate(-140deg);
}

#badge-ribbon:after {
	left: auto;
	right: -10px;
	-webkit-transform: rotate(140deg);
	-moz-transform: rotate(140deg);
	-ms-transform: rotate(140deg);
	-o-transform: rotate(140deg);
}

#space-invader{
	box-shadow:
		0 0 0 1em #a84444,
		0 1em 0 1em #a84444,
		-2.5em 1.5em 0 .5em #a84444,
		2.5em 1.5em 0 .5em #a84444,
		-3em -3em 0 0 #a84444,
		3em -3em 0 0 #a84444,
		-2em -2em 0 0 #a84444,
		2em -2em 0 0 #a84444,
		-3em -1em 0 0 #a84444,
		-2em -1em 0 0 #a84444,
		2em -1em 0 0 #a84444,
		3em -1em 0 0 #a84444,
		-4em 0 0 0 #a84444,
		-3em 0 0 0 #a84444,
		3em 0 0 0 #a84444,
		4em 0 0 0 #a84444,
		-5em 1em 0 0 #a84444,
		-4em 1em 0 0 #a84444,
		4em 1em 0 0 #a84444,
		5em 1em 0 0 #a84444,
		-5em 2em 0 0 #a84444,
		5em 2em 0 0 #a84444,
		-5em 3em 0 0 #a84444,
		-3em 3em 0 0 #a84444,
		3em 3em 0 0 #a84444,
		5em 3em 0 0 #a84444,
		-2em 4em 0 0 #a84444,
		-1em 4em 0 0 #a84444,
		1em 4em 0 0 #a84444,
		2em 4em 0 0 #a84444;
		background: #a84444;
	width: 1em;
	height: 1em;
	overflow: hidden;
	margin: 50px auto 70px auto;
}

#curvedarrow {
	position: relative;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-right: 9px solid #a84444;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	margin: 84px auto 43px;
}

#curvedarrow:after {
	content: "";
	position: absolute;
	border: 0 solid transparent;
	border-top: 3px solid #a84444;
	border-radius: 20px 0 0 0;
	top: -12px;
	left: -9px;
	width: 12px;
	height: 12px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

#left-to-right-arrow {
	position: relative;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-right: 8px solid #a84444;
	/*transform*/
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin: auto;
		margin: 84px auto 43px;
}

#left-to-right-arrow:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 10px solid #a84444;
	/*transform*/
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
	margin-left: -2px;
	margin-top: -9px;
}

#outer_circle_wrapper{
	position: relative;
	min-height: 105px;
}
.outer_circle {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 420px;
	height: 420px;
	border: 40px solid #a84444;
	border-radius: 100%;
}

.inner_circle {
	position: absolute;
	left: 50px;
	top: 50px;
	width: 400px;
	height: 400px;
	background: transparent;
	border-radius: 250px;
}

.square {
	position: absolute;
	left: 420px;
	top: 90px;
	width: 100px;
	height: 125px;
	background: #b79f93;
}

.triangle1 {
	position: absolute;
	left: 360px;
	top: 50px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 0 100px 100px;
	border-color: transparent transparent #a84444 transparent;
}

Clip Path

:root {
	/*Roundhouse*/
	--roundhouse: polygon(93.743% 29.455%, 55.029% 3.951%, 55.029% 3.951%, 54.066% 3.421%, 53.076% 3.006%, 52.065% 2.707%, 51.04% 2.523%, 50.008% 2.455%, 48.975% 2.502%, 47.947% 2.665%, 46.932% 2.943%, 45.936% 3.338%, 44.966% 3.848%, 7.219% 27.767%, 7.219% 27.767%, 5.958% 28.486%, 4.795% 29.376%, 3.738% 30.419%, 2.796% 31.603%, 1.976% 32.91%, 1.286% 34.328%, 0.736% 35.841%, 0.332% 37.433%, 0.084% 39.09%, 0% 40.798%, 0% 83.544%, 0% 83.544%, 0.149% 85.816%, 0.58% 87.97%, 1.27% 89.979%, 2.195% 91.814%, 3.332% 93.446%, 4.658% 94.845%, 6.148% 95.984%, 7.781% 96.833%, 9.532% 97.364%, 11.377% 97.547%, 88.627% 97.547%, 88.627% 97.547%, 90.473% 97.364%, 92.223% 96.833%, 93.856% 95.984%, 95.347% 94.845%, 96.672% 93.446%, 97.809% 91.814%, 98.735% 89.979%, 99.424% 87.97%, 99.856% 85.816%, 100.004% 83.544%, 100.004% 41.959%, 100.004% 41.959%, 99.932% 40.389%, 99.72% 38.858%, 99.375% 37.377%, 98.903% 35.96%, 98.311% 34.618%, 97.603% 33.363%, 96.786% 32.207%, 95.867% 31.162%, 94.85% 30.241%, 93.743% 29.455%);
}

.image-type-roundhouse .field--name-field-media-image {
	padding-top: 6%;
	position: relative;
	max-width: 514px;
}

.image-type-roundhouse .field--name-field-media-image:before {
	background-color: white;
	content: "";
	display: block;
	height: 90%;
	position: absolute;
	right: calc(4% + 2px);
	top: calc(0% + 2px);
	width: 90%;
	z-index: 1;
	clip-path: var(--roundhouse);
}

.image-type-roundhouse .field--name-field-media-image img {
	display: block;
	max-width: 90%;
	z-index: 2;
	position: relative;
	clip-path: var(--roundhouse);
	height: auto;
}

.image-type-roundhouse .field--name-field-media-image:after {
	background-color: #8a1420;
	content: "";
	display: block;
	height: calc(90% + 4px);
	position: absolute;
	right: 4%;
	top: 0%;
	width: calc(90% + 4px);
	z-index: 0;
	clip-path: var(--roundhouse);
}

:root {
	/*House-Top*/
	--roundhouse-top: polygon(7.011% 72.258%, 43.827% 97.394%, 43.827% 97.394%, 44.89% 97.984%, 45.982% 98.45%, 47.098% 98.792%, 48.23% 99.01%, 49.372% 99.104%, 50.516% 99.075%, 51.656% 98.922%, 52.785% 98.645%, 53.896% 98.244%, 54.982% 97.72%, 92.681% 75.353%, 92.681% 75.353%, 93.967% 74.471%, 95.147% 73.43%, 96.216% 72.245%, 97.165% 70.929%, 97.988% 69.496%, 98.678% 67.961%, 99.226% 66.338%, 99.627% 64.639%, 99.872% 62.88%, 99.956% 61.075%, 99.956% 3.257%, 99.956% 3.257%, 99.928% 2.845%, 99.846% 2.456%, 99.715% 2.098%, 99.541% 1.775%, 99.328% 1.493%, 99.08% 1.256%, 98.802% 1.07%, 98.5% 0.94%, 98.177% 0.871%, 97.84% 0.869%, 1.72% 15.798%, 1.72% 15.798%, 1.437% 15.871%, 1.173% 15.989%, 0.93% 16.148%, 0.711% 16.346%, 0.518% 16.578%, 0.354% 16.842%, 0.223% 17.132%, 0.125% 17.447%, 0.065% 17.781%, 0.044% 18.132%, 0% 58.143%, 0% 58.143%, 0.08% 59.916%, 0.314% 61.644%, 0.698% 63.313%, 1.223% 64.91%, 1.885% 66.422%, 2.676% 67.837%, 3.591% 69.141%, 4.622% 70.321%, 5.764% 71.365%, 7.011% 72.258%);
}

/*rechts ausgerichtitet mit linie unten links*/
.image-type-roundhouse-top .field--name-field-media-image {
	padding-bottom: 6%;
	position: relative;
	max-width: 514px;
}

.image-type-roundhouse-top .field--name-field-media-image:before {
	background-color: white;
	bottom: calc(0% + 2px);
	content: "";
	display: block;
	height: 90%;
	left: calc(4% + 2px);
	position: absolute;
	width: 90%;
	z-index: 1;
	clip-path: var(--roundhouse-top);
}

.image-type-roundhouse-top .field--name-field-media-image img {
	display: block;
	margin: 0 0 0 auto;
	max-width: 90%;
	z-index: 2;
	position: relative;
	clip-path: var(--roundhouse-top);
	height: auto;
}

.image-type-roundhouse-top .field--name-field-media-image:after {
	background-color: #8a1420;
	bottom: 0;
	content: "";
	display: block;
	height: calc(90% + 4px);
	left: 4%;
	position: absolute;
	width: calc(90% + 4px);
	z-index: 0;
	clip-path: var(--roundhouse-top);
}

:root {
	/*House-Bottom*/
	--roundhouse-bottom: polygon(92.988% 27.745%, 56.154% 2.611%, 56.154% 2.611%, 55.089% 2.015%, 53.993% 1.545%, 52.875% 1.199%, 51.741% 0.98%, 50.597% 0.885%, 49.451% 0.917%, 48.31% 1.075%, 47.18% 1.359%, 46.069% 1.769%, 44.984% 2.307%, 7.276% 24.673%, 7.276% 24.673%, 5.991% 25.549%, 4.811% 26.585%, 3.742% 27.767%, 2.793% 29.081%, 1.97% 30.512%, 1.28% 32.046%, 0.731% 33.669%, 0.33% 35.367%, 0.084% 37.126%, 0% 38.931%, 0% 96.749%, 0% 96.749%, 0.029% 97.162%, 0.112% 97.55%, 0.245% 97.909%, 0.422% 98.232%, 0.638% 98.514%, 0.889% 98.749%, 1.168% 98.931%, 1.472% 99.056%, 1.794% 99.118%, 2.13% 99.11%, 98.271% 84.206%, 98.271% 84.206%, 98.553% 84.137%, 98.818% 84.02%, 99.062% 83.86%, 99.283% 83.659%, 99.478% 83.423%, 99.644% 83.156%, 99.778% 82.861%, 99.877% 82.542%, 99.939% 82.204%, 99.96% 81.851%, 99.996% 41.862%, 99.996% 41.862%, 99.918% 40.091%, 99.684% 38.365%, 99.3% 36.696%, 98.774% 35.098%, 98.111% 33.584%, 97.319% 32.168%, 96.404% 30.862%, 95.372% 29.681%, 94.232% 28.637%, 92.988% 27.745%);
}

.image-type-roundhouse-bottom .field--name-field-media-image {
	padding-top: 6%;
	position: relative;
	max-width: 514px;
}

.image-type-roundhouse-bottom .field--name-field-media-image:before {
	background-color: white;
	content: "";
	display: block;
	height: 90%;
	position: absolute;
	right: calc(4% + 2px);
	top: calc(0% + 2px);
	width: 90%;
	z-index: 1;
	clip-path: var(--roundhouse-bottom);
}

.image-type-roundhouse-bottom .field--name-field-media-image img {
	display: block;
	max-width: 90%;
	z-index: 2;
	position: relative;
	clip-path: var(--roundhouse-bottom);
	height: auto;
}

.image-type-roundhouse-bottom .field--name-field-media-image:after {
	background-color: #8a1420;
	content: "";
	display: block;
	height: calc(90% + 4px);
	position: absolute;
	right: 4%;
	top: 0%;
	width: calc(90% + 4px);
	z-index: 0;
	clip-path: var(--roundhouse-bottom);
}

.hexagons div.hex {
	display: inline-block;
	width: clamp(100px,10vw,200px);
	height: clamp(100px,10vw,200px);
	background: #8a1420;
}

.hexagons div.hex:nth-child(1) {
	clip-path: polygon(98.66025% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%);
}

.hexagons div.hex:nth-child(2) {
	clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
}

.hexagons div.hex:nth-child(3) {
	clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}

.hexagons div.hex:nth-child(4) {
	clip-path: polygon(40% 7.67949%, 43.1596% 6.20615%, 46.52704% 5.30384%, 50% 5%, 53.47296% 5.30384%, 56.8404% 6.20615%, 60% 7.67949%, 81.65064% 20.17949%, 84.50639% 22.17911%, 86.97152% 24.64425%, 88.97114% 27.5%, 90.44449% 30.6596%, 91.34679% 34.02704%, 91.65064% 37.5%, 91.65064% 62.5%, 91.34679% 65.97296%, 90.44449% 69.3404%, 88.97114% 72.5%, 86.97152% 75.35575%, 84.50639% 77.82089%, 81.65064% 79.82051%, 60% 92.32051%, 56.8404% 93.79385%, 53.47296% 94.69616%, 50% 95%, 46.52704% 94.69616%, 43.1596% 93.79385%, 40% 92.32051%, 18.34936% 79.82051%, 15.49361% 77.82089%, 13.02848% 75.35575%, 11.02886% 72.5%, 9.55551% 69.3404%, 8.65321% 65.97296%, 8.34936% 62.5%, 8.34936% 37.5%, 8.65321% 34.02704%, 9.55551% 30.6596%, 11.02886% 27.5%, 13.02848% 24.64425%, 15.49361% 22.17911%, 18.34936% 20.17949%);
}

.hexagons div.hex:nth-child(5) {
	clip-path: polygon(94.33013% 47.5%, 94.69846% 48.2899%, 94.92404% 49.13176%, 95% 50%, 94.92404% 50.86824%, 94.69846% 51.7101%, 94.33013% 52.5%, 74.33013% 87.14102%, 73.83022% 87.85495%, 73.21394% 88.47124%, 72.5% 88.97114%, 71.7101% 89.33948%, 70.86824% 89.56505%, 70% 89.64102%, 30% 89.64102%, 29.13176% 89.56505%, 28.2899% 89.33948%, 27.5% 88.97114%, 26.78606% 88.47124%, 26.16978% 87.85495%, 25.66987% 87.14102%, 5.66987% 52.5%, 5.30154% 51.7101%, 5.07596% 50.86824%, 5% 50%, 5.07596% 49.13176%, 5.30154% 48.2899%, 5.66987% 47.5%, 25.66987% 12.85898%, 26.16978% 12.14505%, 26.78606% 11.52876%, 27.5% 11.02886%, 28.2899% 10.66052%, 29.13176% 10.43495%, 30% 10.35898%, 70% 10.35898%, 70.86824% 10.43495%, 71.7101% 10.66052%, 72.5% 11.02886%, 73.21394% 11.52876%, 73.83022% 12.14505%, 74.33013% 12.85898%);
}

.hexagons div.hex:nth-child(6) {
	clip-path: polygon(47.5% 5.66987%, 48.2899% 5.30154%, 49.13176% 5.07596%, 50% 5%, 50.86824% 5.07596%, 51.7101% 5.30154%, 52.5% 5.66987%, 87.14102% 25.66987%, 87.85495% 26.16978%, 88.47124% 26.78606%, 88.97114% 27.5%, 89.33948% 28.2899%, 89.56505% 29.13176%, 89.64102% 30%, 89.64102% 70%, 89.56505% 70.86824%, 89.33948% 71.7101%, 88.97114% 72.5%, 88.47124% 73.21394%, 87.85495% 73.83022%, 87.14102% 74.33013%, 52.5% 94.33013%, 51.7101% 94.69846%, 50.86824% 94.92404%, 50% 95%, 49.13176% 94.92404%, 48.2899% 94.69846%, 47.5% 94.33013%, 12.85898% 74.33013%, 12.14505% 73.83022%, 11.52876% 73.21394%, 11.02886% 72.5%, 10.66052% 71.7101%, 10.43495% 70.86824%, 10.35898% 70%, 10.35898% 30%, 10.43495% 29.13176%, 10.66052% 28.2899%, 11.02886% 27.5%, 11.52876% 26.78606%, 12.14505% 26.16978%, 12.85898% 25.66987%);
}

.hexagons div.hex:nth-child(7) {
	clip-path: polygon(85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 67.5% 80.31089%, 67.5% 80.31089%, 67.5% 80.31089%, 67.5% 80.31089%, 67.5% 80.31089%, 67.5% 80.31089%, 67.5% 80.31089%, 32.5% 80.31089%, 32.5% 80.31089%, 32.5% 80.31089%, 32.5% 80.31089%, 32.5% 80.31089%, 32.5% 80.31089%, 32.5% 80.31089%, 15% 50%, 15% 50%, 15% 50%, 15% 50%, 15% 50%, 15% 50%, 15% 50%, 32.5% 19.68911%, 32.5% 19.68911%, 32.5% 19.68911%, 32.5% 19.68911%, 32.5% 19.68911%, 32.5% 19.68911%, 32.5% 19.68911%, 67.5% 19.68911%, 67.5% 19.68911%, 67.5% 19.68911%, 67.5% 19.68911%, 67.5% 19.68911%, 67.5% 19.68911%, 67.5% 19.68911%);
}

.hexagons div.hex:nth-child(8) {
	clip-path: polygon(50% 15%, 50% 15%, 50% 15%, 50% 15%, 50% 15%, 50% 15%, 50% 15%, 80.31089% 32.5%, 80.31089% 32.5%, 80.31089% 32.5%, 80.31089% 32.5%, 80.31089% 32.5%, 80.31089% 32.5%, 80.31089% 32.5%, 80.31089% 67.5%, 80.31089% 67.5%, 80.31089% 67.5%, 80.31089% 67.5%, 80.31089% 67.5%, 80.31089% 67.5%, 80.31089% 67.5%, 50% 85%, 50% 85%, 50% 85%, 50% 85%, 50% 85%, 50% 85%, 50% 85%, 19.68911% 67.5%, 19.68911% 67.5%, 19.68911% 67.5%, 19.68911% 67.5%, 19.68911% 67.5%, 19.68911% 67.5%, 19.68911% 67.5%, 19.68911% 32.5%, 19.68911% 32.5%, 19.68911% 32.5%, 19.68911% 32.5%, 19.68911% 32.5%, 19.68911% 32.5%, 19.68911% 32.5%);
}

Useful clip-path links (right click ⇲ open link in new tab)

1. SVG to Clip Path Converter 2. Hexagons with rounded corners using `clip-path` 3. Convert SVG absolute clip-path to relative 4. CSS clip-path maker Google Ergebnisse

SVG Mask

.svg-mask1 {
	mask: url("../images/svg_mask1.svg");
	/* mask-size: cover; */
	/* mask-size: contain; */
	/* mask-size: auto auto; */
	mask-size: 5vw;
	/* mask-repeat: no-repeat; */
}

.svg-mask2 {
	mask: url("../images/svg_mask2.svg");
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: 50% 22%;
}

.svg-mask3 {
	mask: url("../images/svg_mask3.svg");
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: 50% 80%;
}

.svg-mask4{
	mask: url("../images/svg_mask4.svg");
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-mode: luminance;
}

Cut Border

Cut Border Top Left

.hover-cut-border-top-left{
	background: linear-gradient(135deg,transparent 5%,#e1e1e1 5%,#e1e1e1 100%,rgba(255, 255, 255, 0) 100%);
}

Cut Border Top Left

.hover-cut-border-top-right{
	background: linear-gradient(225deg,transparent 5%,#e1e1e1 5%,#e1e1e1 100%,rgba(255, 255, 255, 0) 100%);
}

Cut Border Top Left

.hover-cut-border-bottom-right{
	background: linear-gradient(315deg,transparent 5%,#e1e1e1 5%,#e1e1e1 100%,rgba(255, 255, 255, 0) 100%);
}

Cut Border Top Left

.hover-cut-border-bottom-left{
	background: linear-gradient(45deg,transparent 5%,#e1e1e1 5%,#e1e1e1 100%,rgba(255, 255, 255, 0) 100%);
}

Cut Border Top Left, Bottom Right

.hover-cut-border-top-left-bottom-right{
	background: linear-gradient(135deg,transparent 5%,#e1e1e1 5%,#e1e1e1 95%,rgba(255, 255, 255, 0) 95%);
}

Cut Border Bottom Left, Top Right

.hover-cut-border-top-right-bottom-left{
	background: linear-gradient(45deg,transparent 5%,#e1e1e1 5%,#e1e1e1 95%,rgba(255, 255, 255, 0) 95%);
}

Checkbox

Wifi

Bluetooth

.checkbox-switch input[type="checkbox"] {
	width: 0;
	height: 0;
	position: absolute;
	overflow: hidden;
}

.checkbox-switch *, .checkbox-switch *:after, .checkbox-switch *:before {
	box-sizing: border-box;
}

.checkbox-switch {
	margin: 0;
	padding: 0;
	border: 0;
	margin-bottom: 2.2652rem;
}

.checkbox-switch:after {
	content: "";
	display: table;
	clear: both;
}

.checkbox-switch .checkbox-right {
	float: right;
}

.checkbox-switch legend.legend-left {
	margin: 0 1.618rem 0 0;
	float: left;
}

.checkbox-switch input[type="checkbox"] + label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	line-height: 1.3rem;
}
.checkbox-switch input[type="checkbox"] + label:before {
	width: 2.3rem;
	height: 1.3rem;
	font-family: Arial, sans-serif;
	display: inline-block;
	content: '•';
	transition: all 0.2s ease;
	text-align: left;
	font-size: 2.25rem;
	line-height: 1rem;
	float: left;
	overflow: hidden;
	color: black;
	border: 0.1949902505rem solid black;
	border-radius: 0.65rem;
	margin: auto 0.5rem auto 0;
}

.checkbox-switch input[type="checkbox"] + label:after {
	content: "Off";
	width: 1.75rem;
	display: inline-block;
}
.checkbox-switch input[type="checkbox"]:checked + label:before {
	border-color: #00AC64;
	background: #00AC64;
	text-align: right;
	color: white;
}

.checkbox-switch input[type="checkbox"]:checked + label:after {
	content: "On";
}

.checkbox-switch input[type="checkbox"] + label:active:before, .checkbox-switch input[type="checkbox"]:checked + label:active:before {
	border-color: #808B8D;
	background: #808B8D;
	color: white;
}

Wifi

Bluetooth

.checkbox-two input {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

.checkbox-two input:checked + label::before {
	content: '\2713';
	background: #4a9c4e;
	color: #fafcfe;
	border-right-width: 1.62rem;
	border-left-width: 1px;
}

.checkbox-two label {
	position: relative;
	display: inline-block;
	padding-left: 5rem;
}

.checkbox-two .border-style label {
	padding-left: 4rem;
}

.checkbox-two label[for] {
	cursor: pointer;
}

.checkbox-two label::before, .checkbox-two label::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	transition: all .3s;
}

.checkbox-two label::before {
	width: 30px;
	height: 20px;
}

.checkbox-two label::before {
	content: '\00d7';
	line-height: 22px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	background: #eaecee;
	color: #aaacae;
	border: 1px solid;
	border-left-width: 1.62rem;
	border-color: rgba(0, 0, 0, 0.1);
	border-radius: .38em;
}

Flugmodus

VPN

.checkbox-tree input {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

.checkbox-tree input:checked + label::before {
	background: #4a9c4e;
	border-color: #4a8c4e;
}

.checkbox-tree input:checked + label::after {
	left: 32px;
	background: #fafcfe;
	border-color: #fafcfe;
}

.checkbox-tree label {
	position: relative;
	display: inline-block;
	padding-left: 4rem;
}

.checkbox-tree label[for] {
	cursor: pointer;
}

.checkbox-tree label::before, .checkbox-tree label::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	transition: all .3s;
}

.checkbox-tree label::before {
	width: 30px;
	height: 20px;
}

.checkbox-tree label::before {
	line-height: 22px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	background: #eaecee;
	color: #aaacae;
	border: 1px solid;
	border-left-width: 1.62rem;
	border-color: rgba(0, 0, 0, 0.1);
	border-radius: .38em;
	width: 3rem;
	background-color: #eaecee;
	border: 1px solid #babcbe;
	border-radius: 2rem;
}

.checkbox-tree label::after {
	width: 12px;
	height: 12px;
	left: 4px;
	top: 4px;
	background: #6a6c6e;
	border: 1px solid #6a6c6e;
	border-radius: 1rem;
}

Ich habe die Datenschutzerklärung gelesen.

.form-item-field-datenschutzerklaerung-value input {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

.form-item-field-datenschutzerklaerung-value input:checked + label::before {
	content: 'JA';
	font-size: 10px;
	background: #4a9c4e;
	color: #fafcfe;
	border-right-width: 1.62rem;
	border-left-width: 1px;
}

.form-item-field-datenschutzerklaerung-value label {
	position: relative;
	display: inline-block;
	padding-left: 5rem;
}

.form-item-field-datenschutzerklaerung-value .border-style label {
	padding-left: 4rem;
}

.form-item-field-datenschutzerklaerung-value label[for] {
	cursor: pointer;
}

.form-item-field-datenschutzerklaerung-value label::before, .form-item-field-datenschutzerklaerung-value label::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	transition: all .3s;
}

.form-item-field-datenschutzerklaerung-value label::before {
	width: 30px;
	height: 20px;
}

.form-item-field-datenschutzerklaerung-value label::before {
	content: 'NEIN';
	line-height: 22px;
	font-size: 10px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	background: #eaecee;
	color: #aaacae;
	border: 1px solid;
	border-left-width: 1.62rem;
	border-color: rgba(0, 0, 0, 0.1);
	border-radius: .38em;
}

Ich habe eine Melone getragen.

.form-item-field-datenschutzerklaerung-value-two input[type="checkbox"] {
	background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -webkit-linear-gradient(left, #bf0000 50%, #5fbf00 50%);
	background-size: 100% 100%, 200% 100%;
	background-position: 0 0, -50% 0;
	border-radius: 3px;
	cursor: pointer;
	height: 22px;
	padding-right: 25px;
	width: 80px;
	-webkit-appearance: none;
	-webkit-transition: .4s;
	margin: 0;
}

.form-item-field-datenschutzerklaerung-value-two input[type="checkbox"]:after {
	background-color: #333;
	background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
	border-radius: 3px;
	display: block;
	height: 18px;
	left: 0;
	position: relative;
	top: 0;
	width: 50px;
	content:'NEIN';
	font-weight:bold;
	padding-top:4px;
	text-align:center;
	text-transform:uppercase;
	color:#ddd;
}

.form-item-field-datenschutzerklaerung-value-two input[type="checkbox"]:checked {
	background-position: 0 0, 35px 0;
	padding-left: 30px;
	padding-right: 0;
}

.form-item-field-datenschutzerklaerung-value-two input[type="checkbox"]:checked:after {
	content:'JA';
}

Ich habe die AGB nicht verstanden.

.form-item-field-datenschutzerklaerung-value-agb input {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

.form-item-field-datenschutzerklaerung-value-agb input:checked + label::before {
	background: #fafcfe;
	border-color: #fafcfe;
}

.form-item-field-datenschutzerklaerung-value-agb input:checked + label::after {
	left: 32px;
		background: #4a9c4e;
	border-color: #4a8c4e;
}

.form-item-field-datenschutzerklaerung-value-agb label {
	position: relative;
	display: inline-block;
	padding-left: 4rem;
}

.form-item-field-datenschutzerklaerung-value-agb label[for] {
	cursor: pointer;
}

.form-item-field-datenschutzerklaerung-value-agb label::before, .form-item-field-datenschutzerklaerung-value-agb label::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	transition: all .3s;
}

.form-item-field-datenschutzerklaerung-value-agb label::before {
	width: 30px;
	height: 20px;
}

.form-item-field-datenschutzerklaerung-value-agb label::before {
	height: 2px;
	margin-top: 10px;
	line-height: 22px;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	background: #eaecee;
	color: #aaacae;
	width: 3rem;
	background-color: #eaecee;
}

.form-item-field-datenschutzerklaerung-value-agb label::after {
	width: 12px;
	height: 12px;
	left: 4px;
	top: 4px;
	background: #6a6c6e;
	border: 1px solid #6a6c6e;
	border-radius: 1rem;
}

Was?

Wie?

.checkbox-four input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.checkbox-four label {
  position: relative;
  display: inline-block;
  padding-left: 5rem;
}

.checkbox-four .border-style label {
  padding-left: 4rem;
}

.checkbox-four label[for] {
  cursor: pointer;
}

.checkbox-four label::after{
  content: "";
  position: absolute;
  display: none;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-four label::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  background: #eaecee;
  color: #aaacae;
  border: 1px solid #000;
  border-radius: 4px;
  transition: all .3s;
}

.checkbox-four label:hover::before {
  border: 1px solid #F07D00;
  background-color: #FCE5CC;
}

.checkbox-four label:focus {
  color: #F07D00;
}

.checkbox-four label:focus::before {
  border: 1px solid #F07D00;
  background-color: #FCE5CC;
}

.checkbox-four label::before {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
}

.checkbox-four input:checked + label::before {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #F07D00;
  border: 1px solid #F07D00;
}

.checkbox-four input:checked:hover + label::before {
  background-color: #FCE5CC;
}

.checkbox-four input:checked:hover + label::after {
  border-color: #F07D00;
}

.checkbox-four input:checked + label::after {
  display: block;
}

Ich habe die AGB nicht verstanden.

.form-item-field-datenschutzerklaerung-value-agb-2 input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.form-item-field-datenschutzerklaerung-value-agb-2 input:checked + label::before {
    background: #000831;
    border-color: #000831;
}

.form-item-field-datenschutzerklaerung-value-agb-2 input:checked + label::after {
    background-color: #f5b326;
    background-image: url('data:image/svg+xml,');
    background-position: 50% 60%;
    background-repeat: no-repeat;
    background-size: 40%;
    border: 3px solid #000831;
    border-radius: 60px;
    box-sizing: border-box;
    content: "";
    display: block;
    height: clamp(28px, 2vw, 48px);
    left: clamp(26px, 2vw, 42px);
    position: absolute;
    transform: rotate(90deg);
    width: clamp(28px, 2vw, 48px);
    transition: .3s linear;
}
                                
.form-item-field-datenschutzerklaerung-value-agb-2 label {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: var(--font-p);
    margin-bottom: 1em;
    min-height: clamp(28px, 2vw, 48px);
    padding-left: clamp(74px, 5vw, 108px);
    position: relative;
}

.form-item-field-datenschutzerklaerung-value-agb-2 label a {
    color: #69cdf9;
    margin: 1px 5px 0px;
}

.form-item-field-datenschutzerklaerung-value-agb-2 label a:hover {
    text-decoration: underline;
}

.form-item-field-datenschutzerklaerung-value-agb-2 label[for] {
    cursor: pointer
}

.form-item-field-datenschutzerklaerung-value-agb-2 label::before, 
.form-item-field-datenschutzerklaerung-value-agb-2 label::after {
    content: '';
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
    transition: all .3s;
}

.form-item-field-datenschutzerklaerung-value-agb-2 label::before {
    height: clamp(28px, 2vw, 48px);
    width: clamp(54px, 4vw, 88px);
}

.form-item-field-datenschutzerklaerung-value-agb-2 label::before {
    background: #000831;
    border-radius: 15vw;
    box-sizing: border-box;
}

.form-item-field-datenschutzerklaerung-value-agb-2 label::after {
    background-color: #69cdf9;
    background-image: url('data:image/svg+xml,');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 40%;
    border: 3px solid #000831;
    border-radius: 60px;
    box-sizing: border-box;
    content: "";
    display: block;
    height: clamp(28px, 2vw, 48px);
    left: 0px;
    margin: 0;
    position: absolute;
    width: clamp(28px, 2vw, 48px);
    transition: .3s linear;
}

Radio Buttons

Frau

Herr

.form-item-submitted-anrede [type="radio"]:checked,
.form-item-submitted-anrede [type="radio"]:not(:checked) {
	position: absolute;
	left: -9999px;
}

.form-item-submitted-anrede [type="radio"]:checked + label,
.form-item-submitted-anrede [type="radio"]:not(:checked) + label {
	position: relative;
	padding-left: 28px;
	cursor: pointer;
	line-height: 20px;
	display: inline-block;
	color: #fff;
}

.form-item-submitted-anrede [type="radio"]:checked + label:before,
.form-item-submitted-anrede [type="radio"]:not(:checked) + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border: 1px solid #656565;
	border-radius: 100%;
	background: #fff;
}

.form-item-submitted-anrede [type="radio"]:checked + label:after,
.form-item-submitted-anrede [type="radio"]:not(:checked) + label:after {
	content: '';
	width: 12px;
	height: 12px;
	background: #a84444;
	position: absolute;
	top: 4px;
	left: 4px;
	border-radius: 100%;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.form-item-submitted-anrede [type="radio"]:not(:checked) + label:after {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.form-item-submitted-anrede [type="radio"]:checked + label:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

Frau

Herr

.form-item-submitted-anrede-2 input[type=radio] {
	position: absolute;
	opacity: 0;
}
.form-item-submitted-anrede-2 input[type=radio] + label:before {
	content: "";
	background: #FFF;
	border-radius: 0;
	border: 1px solid grey;
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	position: relative;
	top: -0.2em;
	margin-right: 1em;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	transition: all 250ms ease;
}
.form-item-submitted-anrede-2 input[type=radio]:checked + label:before {
	background-color: #a84444;
	box-shadow: inset 0 0 0 4px #FFF;
}
.form-item-submitted-anrede-2 input[type=radio]:focus + label:before {
	outline: none;
	border-color: #a84444;
}
.form-item-submitted-anrede-2 input[type=radio]:disabled + .radio-label:before {
	box-shadow: inset 0 0 0 4px #FFF;
	border-color: #b4b4b4;
	background: #b4b4b4;
}
.form-item-submitted-anrede-2 input[type=radio] + label:empty:before {
	margin-right: 0;
}

Frau

Herr

Frau

Herr

Details Field

summary float

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.

summary float

Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

summary float

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.

details>* {
    padding: 0 1em;
}

details {
    clear: both;
    margin: 0 0 clamp(10px, 4vw, 20px);
}

summary {
    background: #1b2f8f21;
    color: #1b2f8f;
    border-radius: 13px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 15px 5%;
    position: relative;
    overflow: hidden;
}
details[open] {
    background: rgb(231, 234, 244);
    border-radius: 13px;
}
details[open] summary {
    border-radius: 13px 13px 0 0;
    background-color: #1b2f8f;
    color: #fff;
}

details:last-child summary {
    margin-bottom: 0;  
}


/* Summary Hover */
summary:before {
    background-color: #1b2f8f;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: -1;
    transition-duration: .5s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

summary:hover {
    color: #fff;
}

summary:hover::before {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(.52, 1.64, .37, .66);
}

/* FLOAT */
.float-details {
    position: relative;
}

details.float {
    overflow: auto;
}

details.float>div {
    position: relative;
    right: 0;
    top: 0;
    height: 100%;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: rgb(231, 234, 244);
    padding: 15px;
    border-radius: 0 0 13px 13px;
    overflow: hidden;
}
    
@media all and (min-width: 848px) {
    details {
        margin: 0;
    }
    details[open] {
    background: transparent;
        border-radius: 0;
    }
    summary {
        width: 100%;
        max-width: 32.9%;
        border-radius: 13px;
        margin-bottom: clamp(10px, 4vw, 20px);
    }
    
    details[open] summary {
        border-radius: 13px;
    }
    
    /* FLOAT */
    details.float::after {
        content: "";
        background: rgb(231, 234, 244);
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: block;
        width: 100%;
        max-width: 65.1%;
        border-radius: 13px;
        z-index: -1;
    }
    
    details.float>summary,
    details.float>div {
        float: left;
    }
    
    details.float>div {
        float: left;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: block;
        width: 100%;
        max-width: 65.1%;
        box-sizing: border-box;
        background: transparent;
            padding: 15px;
        border-radius: 13px;
        overflow: hidden;
    }
}

// JavaScript               
const detailsList = document.querySelectorAll('details');

detailsList.forEach((details) => {
    details.addEventListener('toggle', function(event) {
        if (details.open) {
            detailsList.forEach((otherDetails) => {
                if (otherDetails !== details && otherDetails.open) {
                    otherDetails.open = false;
                }
            });
        }
    });
});

summary inline-block

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.

summary inline-block

details>* {
    padding: 0 1em;
}
    
details {
    clear: both;
    margin: 0 0 clamp(10px, 4vw, 20px);
}
    
summary {
    background: #1b2f8f21;
    color: #1b2f8f;
    border-radius: 13px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 15px 5%;
    position: relative;
    overflow: hidden;
}
    
details[open] {
    background: rgb(231, 234, 244);
        border-radius: 13px;
}
    
details[open] summary {
    border-radius: 13px 13px 0 0;
    background-color: #1b2f8f;
    color: #fff;
}
    
details:last-child summary {
    margin-bottom: 0;
}
    
/* Summary Hover */
    summary:before {
    background-color: #1b2f8f;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: -1;
    transition-duration: .5s;
    transition-property: transform;
    transition-timing-function: ease-out;
}
    
summary:hover {
    color: #fff;
 }
    
summary:hover::before {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(.52, 1.64, .37, .66);
}
    
/* INLINE_BLOCK */
.inline-b-details {
    position: relative;
}
    
details.inline-b>summary,
details.inline-b>div {
    display: inline-block;
}
    
details.inline-b>div {
    position: relative;
    right: 0;
    top: 0;
    height: 100%;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: rgb(231, 234, 244);
    padding: 15px;
    border-radius: 0 0 13px 13px;
    overflow: hidden;
}
    
@media all and (min-width: 848px) {
    details {
        margin: 0;
    }

    details[open] {
    background: transparent;
        border-radius: 0;
    }

    summary {
        width: 100%;
        max-width: 32.9%;
        border-radius: 13px;
        margin-bottom: clamp(10px, 4vw, 20px);
    }
    
    details[open] summary {
        border-radius: 13px;
    }
    
    /* INLINE_BLOCK */
    details.inline-b::after {
        content: "";
        background: rgb(231, 234, 244);
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: block;
        width: 100%;
        max-width: 65.1%;
        border-radius: 13px;
        z-index: -1;
    }
    
    details.inline-b>div {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: block;
        width: 100%;
        max-width: 65.1%;
        box-sizing: border-box;
        background: transparent;
            padding: 15px;
        border-radius: 13px;
        overflow: hidden;
    }
}


// JavaScript           
const detailsList = document.querySelectorAll('details');

detailsList.forEach((details) => {
    details.addEventListener('toggle', function(event) {
        if (details.open) {
            detailsList.forEach((otherDetails) => {
                if (otherDetails !== details && otherDetails.open) {
                    otherDetails.open = false;
                }
            });
        }
    });
});

summary inline-block

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.

summary inline-block

details>* {
    padding: 0 1em;
}
    
details {
    clear: both;
    margin: 0 0 clamp(10px, 4vw, 20px);
}
    
summary {
    background: #1b2f8f21;
    color: #1b2f8f;
    border-radius: 13px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 15px 5%;
    position: relative;
    overflow: hidden;
}
    
details[open] {
    background: rgb(231, 234, 244);
        border-radius: 13px;
}
    
details[open] summary {
    border-radius: 13px 13px 0 0;
    background-color: #1b2f8f;
    color: #fff;
}
    
details:last-child summary {
    margin-bottom: 0;
}
    
/* Summary Hover */
    summary:before {
    background-color: #1b2f8f;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: -1;
    transition-duration: .5s;
    transition-property: transform;
    transition-timing-function: ease-out;
}
    
summary:hover {
    color: #fff;
 }
    
summary:hover::before {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(.52, 1.64, .37, .66);
}
    
/* INLINE_BLOCK */
.inline-b-details {
    position: relative;
}
    
details.inline-b>summary,
details.inline-b>div {
    display: inline-block;
}
    
details.inline-b>div {
    position: relative;
    right: 0;
    top: 0;
    height: 100%;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: rgb(231, 234, 244);
    padding: 15px;
    border-radius: 0 0 13px 13px;
    overflow: hidden;
}
    
@media all and (min-width: 848px) {
    details {
        margin: 0;
    }

    details[open] {
    background: transparent;
        border-radius: 0;
    }

    summary {
        width: 100%;
        max-width: 32.9%;
        border-radius: 13px;
        margin-bottom: clamp(10px, 4vw, 20px);
    }
    
    details[open] summary {
        border-radius: 13px;
    }
    
    /* INLINE_BLOCK */
    details.inline-b::after {
        content: "";
        background: rgb(231, 234, 244);
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: block;
        width: 100%;
        max-width: 65.1%;
        border-radius: 13px;
        z-index: -1;
    }
    
    details.inline-b>div {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: block;
        width: 100%;
        max-width: 65.1%;
        box-sizing: border-box;
        background: transparent;
            padding: 15px;
        border-radius: 13px;
        overflow: hidden;
    }
}


// JavaScript           
const detailsList = document.querySelectorAll('details');

detailsList.forEach((details) => {
    details.addEventListener('toggle', function(event) {
        if (details.open) {
            detailsList.forEach((otherDetails) => {
                if (otherDetails !== details && otherDetails.open) {
                    otherDetails.open = false;
                }
            });
        }
    });
});

File Upload Buttons

Lebenslauf

Nur eine Datei möglich.
2 MB Limit.
Erlaubte Dateitypen: pdf.

.form-type-webform-document-file input[type="file"] {
  cursor: pointer !Important;
  border: 1px solid #053171;
  padding: 0 5px 0 0;
  box-sizing: border-box;
  width: 100%;
}

.form-type-webform-document-file input[type="file"]::file-selector-button:hover,
.form-type-webform-document-file input[type="file"]::-webkit-file-upload-button:hover {
  background: #b11b0f;
}
/*Submit Button (delete file)*/
.form-type-webform-document-file input[type="submit"] {
  margin: 0;
  border: 1px solid #b11b0f;
  background: #b11b0f;
  color: #fff;
}

.form-type-webform-document-file input[type="submit"]:hover {
  background: #7A130B;
  color: #fff;
}
/*Submit Button (delete file) end*/

/*Button (datei auswählen)*/
/*ms style*/
.form-type-webform-document-file input[type="file"]::-ms-browse {
  border: none;
  padding: 16px 12px;
  margin-right: 5%;
  background: #053171;
  color: #fff;
  transition: all .4s;
  cursor: pointer;
  width: 100%;
  max-width: 204px;
}

/*webkit*/
.form-type-webform-document-file input[type="file"]::-webkit-file-upload-button {
  border: none;
  padding: 16px 12px;
  margin-right: 5%;
  background: #053171;
  color: #fff;
  transition: all .4s;
  cursor: pointer;
  width: 100%;
  max-width: 204px;
}

/*general*/
.form-type-webform-document-file input[type="file"]::file-selector-button {
  border: none;
  padding: 16px 12px;
  margin-right: 5%;
  background: #053171;
  color: #fff;
  transition: all .4s;
  cursor: pointer;
  width: 100%;
  max-width: 204px;
}
/*Button (datei auswählen) end*/

.form-type-webform-document-file .webform-element-description {
  padding-top: 10px;
  color: #666;
}

.form-type-webform-document-file .webform-element-description br {
  content: " ";
  display: inline-block;
  width: 5px;
}

Weitere Unterlagen (optional)

Maximal 3 Dateien möglich.
2 MB Limit.
Erlaubte Dateitypen: pdf.

.form-type-managed-file input[type="file"] {
  cursor: pointer !Important;
  border: 1px solid #053171;
  padding: 0 5px 0 0;
  box-sizing: border-box;
  width: 100%;
}

.form-type-managed-file input[type="file"]::file-selector-button:hover,,
.form-type-managed-file input[type="file"]::-webkit-file-upload-button:hover {
  background: #b11b0f;
}
/*Submit Button (delete file)*/
.form-type-managed-file input[type="submit"] {
  margin: 0;
  border: 1px solid #b11b0f;
  background: #b11b0f;
  color: #fff;
}

.form-type-managed-file input[type="submit"]:hover{
  background: #7A130B;
  color: #fff;
}
/*Submit Button (delete file) end*/

/*Button (datei auswählen)*/
/*ms style*/
.form-type-managed-file input[type="file"]::-ms-browse {
  border: none;
  padding: 16px 12px;
  margin-right: 5%;
  background: #053171;
  color: #fff;
  transition: all .4s;
  cursor: pointer;
  width: 100%;
  max-width: 204px;
}

/*webkit*/
.form-type-managed-file input[type="file"]::-webkit-file-upload-button {
  border: none;
  padding: 16px 12px;
  margin-right: 5%;
  background: #053171;
  color: #fff;
  transition: all .4s;
  cursor: pointer;
  width: 100%;
  max-width: 204px;
}

/*general*/
.form-type-managed-file input[type="file"]::file-selector-button {
  border: none;
  padding: 16px 12px;
  margin-right: 5%;
  background: #053171;
  color: #fff;
  transition: all .4s;
  cursor: pointer;
  width: 100%;
  max-width: 204px;
}
/*Button (datei auswählen) end*/

.form-type-managed-file .webform-element-description {
  padding-top: 10px;
  color: #666;
}

.form-type-managed-file .webform-element-description br {
  content: " ";
  display: inline-block;
  width: 5px;
}

Dateien Upload

Maximal 3 Dateien möglich.
2 MB Limit.
Erlaubte Dateitypen: pdf.

Weitere Dateien Upload (optional)

Maximal 3 Dateien möglich.
2 MB Limit.
Erlaubte Dateitypen: pdf.

CSS Filter Converter

Ziel Farbe (Hex):

Echte Pixel, Farbe durch CSS (background-color:) angewendet:

Gefilterte Pixel, Farbe mit CSS (filter:) angewendet:

RGBa to Hex Converter

Hex to Alphahex

Hex Code

Transparenz

Dein 8-Hex Code mit Transparenz #

Vorschau

Grid Safari Conform

(This effect is only visible in the safari browser)

Kurz und knapp


/* 
Bei Safari funktioniert der kutze Grid-Code mit "grid-template-columns: repeat(4, 1fr);" nicht, wodurch bei Boxen mit einem langen Wort und anderen mit kutzen oder getrennten Wörtern sich die Boxen beim verkleinern ungünsig verschieben. Dieses Problem wird mit der Codezeile unten verhindert.
*/

					
.button-wrapper.button-wrapper-grid {
	display: grid;
	margin: 30px auto 10px;
	width: 90%;
	gap: clamp(30px,4vw,90px);
	grid-template-rows: repeat(1, 1fr);
	grid-template-columns: repeat(1, 1fr);
}

.button-wrapper.button-wrapper-grid .button-box {
	box-sizing: border-box;
}

@media all and (min-width: 576px) {
	.button-wrapper.button-wrapper-grid {
		grid-template-rows: repeat(1, 1fr);
		
		/* ...o,O... Der "Trick" ...o,O... */
		grid-template-columns: repeat(2,minmax(160px,1fr));
	}
}

@media all and (min-width: 849px) {
	.button-wrapper.button-wrapper-grid {
		grid-template-rows: repeat(1, 1fr);
		
		/* ...o,O... Der "Trick" ...o,O... */
		grid-template-columns: repeat(3,minmax(160px,1fr));
	}
}

@media all and (min-width: 1200px) {
	.button-wrapper.button-wrapper-grid {
		width: auto;
		grid-template-rows: repeat(1, 1fr);
		
		/* ...o,O... Der "Trick" ...o,O... */
		grid-template-columns: repeat(3,minmax(160px,1fr));
	}
}

Eierschalensollbruchstellenverursacher

Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz

Hier ein Text

Grid NOT Safari Conform

(This effect is only visible in the safari browser)

Kurz und knapp

Eierschalensollbruchstellenverursacher

Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz

Hier ein Text

How to target Safari 16+ with a CSS @supports media query

(This effect is only visible in the safari browser)

If you open this page in Safari, the right column will be red.

All Browsers

Safari only

							
@supports (hanging-punctuation: first) and (-webkit-appearance: none) {
	.safari-only {
		background-color: red;
	}
}