/* Package cards & compare table (from the original WordPress pages) */
.ws-card { transition: all ease .9s; border: 1px solid #ddd; background: white; animation: down .4s forwards; color: #ccc; } .ws-card:hover { box-shadow: 0 0 13px #FBCFD0; border: 1px solid #FF393E; animation: up .3s forwards; background: #fcfcfc; } @keyframes up { 0% { transform: scale(1); } 100% { transform: scale(1.03); } } @keyframes down { 0% { transform: scale(1.03); } 100% { transform: scale(1); } } .pack-one { padding: 14px 0; background: #999; } .pack-two { background: #FF7D80; animation: grad-out .5s ease forwards; background: linear-gradient(90deg, #FF7D80, #FF7D80, rgba(131, 58, 180, 1), #FF393E); background-size: 1400% 90%; padding: 30px 0; } .pack-three { background: #999; transition: all ease .9s; padding: 14px 0; } .ws-card:hover .pack-one { background: #FF393E; } .ws-card:hover .pack-two { animation: grad-in .3s ease forwards; background: linear-gradient(90deg, #FF7D80, #FF7D80, rgba(131, 58, 180, 1), #FF393E, #FF393E, #FF393E 120%); background-size: 500% 200%; } .ws-card:hover .pack-three { background: #FF393E; } @keyframes grad-in { 0% { background-position: 0% 0% } 100% { background-position: 66% 100% } } @keyframes grad-out { 0% { background-position: 66% 100% } 100% { background-position: 0% 0% } } .pack-one, .pack-two, .pack-three { transition: all ease .4s; font-weight: 400; font-size: 2.5rem; margin-bottom: 30px; color: white; } .ws-card-special { font-weight: 500; color: white; padding: 30px 0; margin-bottom: 30px; background: #FF393E; } .ws-pack-item { position: relative; margin: 0 20px; text-align: left; padding-left: 10%; padding-top: 7px; padding-bottom: 7px; color: #999; font-size: .9rem; border-bottom: 1px solid #ddd; text-decoration: none; } .ws-table-item { position: relative; margin: 0 20px; text-align: left; padding-left: 10%; padding-top: 7px; padding-bottom: 7px; color: #999; font-size: .9rem; text-decoration: none; } .ws-pack-item-last, .ws-pack-table-last { position: relative; margin: 0 20px; text-align: left; padding-left: 10%; padding-top: 10px; padding-bottom: 10px; color: #999; font-size: .9rem; text-decoration: none; } .ws-pack-item a { color: blue; } .ws-pack-item::before, .ws-pack-item-last::before { content: ""; color: #FF393E; display: block; box-sizing: border-box; position: absolute; left: 10px; top: 8px; width: 6px; height: 10px; border-width: 0 2px 2px 0; border-style: solid; transform-origin: bottom left; transform: rotate(45deg) } .ws-compare-tick td, .ws-compare-tick-last td { text-align: center; color: red; } .ws-compare-tick::before, .ws-compare-tick-last::before { text-align: center; content: ""; color: #6BD089; display: inline-block; box-sizing: border-box; position: relative; left: -4px; top: -2px; width: 8px; height: 16px; border-width: 0 2px 2px 0; border-style: solid; transform-origin: bottom left; transform: rotate(45deg) } .ws-table-item::before, .ws-pack-table-last::before { text-align: center; content: ""; color: #60C5F1; display: inline-block; box-sizing: border-box; position: relative; left: -30px; top: -2px; width: 8px; height: 16px; border-width: 0 2px 2px 0; border-style: solid; transform-origin: bottom left; transform: rotate(45deg) } .ws-pack-item:hover, .ws-pack-item-last:hover { background: #f5f5f5; } .ws-card:hover .ws-pack-item, .ws-card:hover .ws-pack-item-last { color: #333; } .ws-card-title { font-weight: 600; font-size: 2rem; padding: 20px 0; } .ws-currency { font-size: 3rem; color: #666; } .ws-card:hover .ws-card-title { color: #666; } .ws-card:hover .ws-currency { color: #FF393E; } .ws-card:hover { color: #FF393E; } .annual { font-size: 1.3rem; color: #777; font-weight: 200; } .ws-pack-button { transition: all ease .3s; border: none; background: #FF393E; border-radius: 10px; width: 100%; margin: 20px 0; font-size: 1.2rem; color: white; padding: 16px 30px; } .ws-pack-button:hover { background: #333; } .circ { padding: 0px 7px; border: 1px solid #F47378; color: red; border-radius: 50%; }  .ws-currency-strike{font-weight:400;text-decoration:line-through;font-size:3rem;color:#777} .ws-card:hover .ws-currency-strike{font-weight:400;text-decoration:line-through;font-size:3rem;color:red}