
 .button--secondary, .button--secondary:visited {
	 border-radius: 3px;
	 cursor: pointer;
	 display: inline-block;
	 min-width: 64px;
	 font-family: inherit;
	 font-size: inherit;
	 line-height: 15px;
	 outline: none;
	 text-align: center;
	 text-decoration: none;
	 text-shadow: none;
	 transition: background 0.1s linear;
	 font-weight: 400;
	 color: #ec1e26;
	 background: rgba(255,255,255,0.1);
	 border: 1px solid #ddd;
	 box-shadow: none;
	 padding: 10px 7px;
	 transition-property: border;
	 transition-timing-function: ease-in-out;
	 transition-duration: 0.15s;
}
 .button--full-width {
	 min-width: 385px;
}
 .icon-with-text {
	 display: inline-flex;
	 align-items: flex-start;
}
 .icon-with-text__icon {
	 flex-shrink: 0;
	 margin-right: 8px;
	 margin-top: -2px;
}
 .icon-svg--color-silver {
	 fill: #ccc;
	 color: #ccc;
}
 .icon-svg--color-blue {
	 fill: #ec1e26;
	 color: #ec1e26;
}
 .icon-svg {
	 display: inline-block;
	 vertical-align: middle;
	 height: 25px;
	 width: 25px;
}
 .heart-full {
	 position: absolute;
	 left: 0;
	 top: 0;
	 opacity: 0;
}
 .btn__effect {
	 display: inline-block;
	 position: relative;
}
 .effect-group {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 transform: rotate(25deg);
}
 .effect-group .effect {
	 display: block;
	 position: absolute;
	 top: 38%;
	 left: 50%;
	 width: 25px;
	 transform-origin: 0px 2px;
}
 .effect-group .effect:nth-child(2) {
	 transform: rotate(72deg);
}
 .effect-group .effect:nth-child(3) {
	 transform: rotate(144deg);
}
 .effect-group .effect:nth-child(4) {
	 transform: rotate(216deg);
}
 .effect-group .effect:nth-child(5) {
	 transform: rotate(288deg);
}
 .effect-group .effect:before {
	 content: "";
	 display: block;
	 position: absolute;
	 right: 0;
	 border-radius: 1.5px;
	 height: 3px;
	 background: #ec1e26;
}
 .effect-group .effect:after {
	 content: "";
	 display: block;
	 position: absolute;
	 top: 10px;
	 right: 10%;
	 border-radius: 50%;
	 width: 3px;
	 height: 3px;
	 background: #ec1e26;
	 transform: scale(0, 0);
}
 .active .heart-stroke {
	 opacity: 0;
}
 .active .heart-full {
	 opacity: 1;
}
 .active .icon-svg {
	 animation: bounceIn 0.5s linear;
}
 .active .effect:before {
	 animation: fireworkLine 0.5s linear 0.1s;
}
 .active .effect:after {
	 animation: fireworkPoint 0.5s linear 0.1s;
}
 .broken-heart {
	 position: absolute;
	 left: -10px;
	 top: 0;
	 opacity: 0;
}
 .broken-heart--left {
	 transform: rotate(0deg);
	 transform-origin: 60% 200%;
}
 .broken-heart--right {
	 transform: rotate(0deg);
	 transform-origin: 63% 200%;
}
 .broken-heart--crack {
	 stroke-dasharray: 15;
	 stroke-dashoffset: 15;
}
 .deactivate .broken-heart {
	 opacity: 1;
}
 .deactivate .broken-heart--left {
	 animation: crackLeft 0.35s cubic-bezier(0.68, -0.55, 0.265, 2.85) 0.15s forwards, hide 0.25s ease-in 0.55s forwards;
}
 .deactivate .broken-heart--right {
	 animation: crackRight 0.35s cubic-bezier(0.68, -0.55, 0.265, 2.85) 0.15s forwards, hide 0.25s ease-in 0.55s forwards;
}
 .deactivate .broken-heart--crack {
	 animation: crack 0.2s ease-in forwards;
}
 .button.one.desktop:not(.active):hover .heart-stroke {
	 animation: pulse 1s ease-out infinite;
}
 .button.two.desktop:not(.active):hover .heart-stroke {
	 animation: pulseBlue 1s ease-out infinite;
}
 @keyframes pulse {
	 0% {
		 opacity: 1;
		 transform-origin: center center;
		 transform: scale(1);
	}
	 50% {
		 opacity: 0.6;
		 transform: scale(1.15);
	}
	 100% {
		 opacity: 1;
		 transform: scale(1);
	}
}
 @keyframes pulseBlue {
	 0% {
		 transform-origin: center center;
		 transform: scale(1);
		 fill: #ccc;
	}
	 50% {
		 transform: scale(1.15);
		 fill: #ec1e26;
	}
	 100% {
		 transform: scale(1);
		 fill: #ccc;
	}
}
 @keyframes fireworkLine {
	 0% {
		 right: 30%;
		 transform: scale(0, 0);
	}
	 25% {
		 right: 30%;
		 width: 10px;
		 transform: scale(1, 1);
	}
	 35% {
		 right: 0;
		 width: 45%;
	}
	 70% {
		 right: 0;
		 width: 8px;
		 transform: scale(1, 1);
	}
	 100% {
		 right: 0;
		 transform: scale(0, 0);
	}
}
 @keyframes fireworkPoint {
	 30% {
		 transform: scale(0, 0);
	}
	 60% {
		 transform: scale(1, 1);
	}
	 100% {
		 transform: scale(0, 0);
	}
}
 @keyframes bounceIn {
	 0% {
		 transform: scale(0);
	}
	 30% {
		 transform: scale(1.25);
	}
	 50% {
		 transform: scale(0.9);
	}
	 70% {
		 transform: scale(1.1);
	}
	 80% {
		 transform: scale(1);
	}
}
 @keyframes crackLeft {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(-45deg);
	}
}
 @keyframes crackRight {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(45deg);
	}
}
 @keyframes crack {
	 0% {
		 stroke-dasharray: 15;
		 stroke-dashoffset: 15;
	}
	 80% {
		 stroke-dasharray: 15;
		 stroke-dashoffset: 0;
		 opacity: 1;
	}
	 100% {
		 opacity: 0;
	}
}
 @keyframes hide {
	 0% {
		 opacity: 1;
	}
	 100% {
		 opacity: 0;
	}
}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #ec1e26;
    color: #fff;
    font-size: 150%;
    position: absolute;
    padding: 15px 30px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}
 