.heading-primary { color: #fff; text-transform: uppercase; -webkit-backface-visibility: hidden; backface-visibility: hidden; margin-bottom: 20px; } .heading-primary--main { display: block; font-size: 20px; font-weight: 400; letter-spacing: 3px; -webkit-animation-name: moveInLeft; animation-name: moveInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } .heading-primary--sub { display: block; font-size: 12px; font-weight: 700; letter-spacing: 17px; -webkit-animation: moveInRight 1s ease-out; animation: moveInRight 1s ease-out; } .heading-secondary { font-family: 'Playfair Display', sans-serif; font-size: 30px; font-weight: 800; color: transparent; line-height: 1; -webkit-transition: all 0.2s; transition: all 0.2s; color: #333; } .btn, .btn:link, .btn:visited { text-transform: uppercase; text-decoration: none; padding: 20px 50px; display: inline-block; -webkit-transition: all 0.2s; transition: all 0.2s; position: relative; font-size: 14px; border: none; cursor: pointer; } .btn:hover { color: #fff; -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .btn:hover::after { -webkit-transform: scaleX(1.4) scaleY(1.6); transform: scaleX(1.4) scaleY(1.6); opacity: 0; } .btn:active, .btn:focus { outline: none; -webkit-transform: translateY(-1px); transform: translateY(-1px); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .btn--white { background-color: #fff; color: #777; } .btn--white::after { background-color: #fff; } .btn--green { background: -webkit-gradient(linear, left top, right top, from(#000), to(#AD3903)); background: linear-gradient(to right, #AD3903, #000); color: #fff; } .btn--green::after { background-color: #55c57a; } .price-html { margin: 0 auto; width: 100%; text-align: center; overflow: hidden; } .section-plans { margin: 0 auto; width: 100%; text-align: center; padding: 40px 0; } .card { -webkit-perspective: 150%; perspective: 150%; -moz-perspective: 150%; position: relative; min-height: 570px; } .card__side { height: 100%; -webkit-transition: all 0.8s ease; transition: all 0.8s ease; position: absolute; top: 0; left: 0; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; -webkit-box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .card__side--front { background-color: #fff; } .card__side--front-1 { background: linear-gradient(-45deg, #000, #AD3903); } .card__side--front-2 { background: linear-gradient(-45deg, #000, #AD3903); } .card__side--front-3 { background: linear-gradient(-45deg, #000, #AD3903); } .card__side--back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .card__side--back-1 { background: linear-gradient(-45deg, #AD3903, #000); } .card__side--back-2 { background: linear-gradient(-45deg, #AD3903, #000); } .card__side--back-3 { background: linear-gradient(-45deg, #AD3903, #000); } .card:hover .card__side--front-1, .card:hover .card__side--front-2, .card:hover .card__side--front-3 { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card:hover .card__side--back { -webkit-transform: rotateY(0); transform: rotateY(0); } .card__title { height: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card__heading { font-size: 1.4vw; font-weight: 700; text-transform: uppercase; text-align: center; color: #fff !important; width: 100%; text-shadow: 0px 0 #1E130B, 0 1px #1E130B, 4px 0 black, 0 3px #1E130B; } .card__heading-span { padding: 10px 15px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .card__details ul { list-style: none; width: 90%; margin: 0 auto; padding: 5px; } .card__details ul li { text-align: center; font-size: 15px; padding: 7px; color: #fff; } .card__details ul li:not(:last-child) { border-bottom: 1px solid #000; } .card__details ul li:not(:first-child) { border-top: 1px solid #AD3903; } .card__cta { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 90%; text-align: center; } .card__price-box { text-align: center; color: #fff; margin-bottom: 80px; } .card__price-only { font-size: 14px; text-transform: uppercase; } .card__price-value { font-size: 1.4vw; font-weight: 700; text-shadow: 0px 0 #1E130B, 0 1px #1E130B, 4px 0 black, 0 3px #1E130B; } .col-1-of-3 { display: inline-block; width: 31%; margin: 0 auto; text-align: center; padding: 0 20px 20px 20px; } .col-1-of-3 .fa { font-size: 50px; color: #d48d4f; margin-top: 40px; text-shadow: -1px 0 #1E130B, 0 1px #1E130B, 1px 0 black, 0 6px #1E130B; } @media screen and (max-width: 800px) { .col-1-of-3 { width: 100%; } .card__price-value, .card__heading { font-size: 3.4vw; } }