/* Common styles */ .pricing { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; width: 100%; margin: 0 auto 3em; } .pricing__item { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; text-align: center; -webkit-flex: 0 1 330px; flex: 0 1 330px; background: #fff; /*-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.06); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.06); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.06);*/ } .pricing__feature-list { text-align: left; } .pricing__action { color: inherit; border: none; background: none; width: 100%; } .pricing__action:focus { outline: none; } /* Individual styles */ /* Rabten */ .pricing--rabten .pricing__item { /*padding: 2em 4em;*/ cursor: default; color: #262b38; /*max-width: 320px;*/ } .pricing--rabten .pricing__item:nth-child(2) { border-right: 1px solid rgba(139, 144, 157, 0.18); border-left: 1px solid rgba(139, 144, 157, 0.18); } .pricing--rabten .pricing__title { font-size: 18px; margin: 0 0; } .pricing--rabten .icon { font-size: 2.5em; color: #8b909d; -webkit-transition: color 0.3s; transition: color 0.3s; } .pricing--rabten .pricing__item:hover .icon { color: #FF9000; } .pricing--rabten .pricing__price { font-size: 3em; font-weight: 400; /*margin: 0.5em 0 0.75em;*/ overflow: hidden; padding: .1em 0; background: rgba(0,0,0,.03) } .pricing--rabten .pricing__currency { font-size: 20px; vertical-align: super; } .pricing--rabten .pricing__period { font-size: 0.35em; color: #8b909d; } .pricing--rabten .pricing__anim { display: inline-block; position: relative; } .pricing--rabten .pricing__item:hover .pricing__anim { -webkit-animation: moveUp 0.4s forwards; animation: moveUp 0.4s forwards; -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .pricing--rabten .pricing__item:hover .pricing__anim--2 { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; } @-webkit-keyframes moveUp { 50% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 51% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 52% { opacity: 1; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @keyframes moveUp { 50% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 51% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 52% { opacity: 1; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } .pricing--rabten .pricing__sentence { margin: 0 0 1em 0; padding: 0 0 0.5em; color: #8b909d; font-size: 14px; } .pricing--rabten .pricing__feature-list { font-size: 16px; margin: 0; /*padding: 0.25em 0 2.5em;*/ list-style: none; text-align: center; color: #8b909d; padding: 0 0 2em 0; } .pricing--rabten .pricing__action { width: 60% margin: 0 auto; font-weight: bold; text-transform: uppercase;; letter-spacing: 1px; margin-top: auto; padding: 1.4em 1em; color: rgba(0,0,0,.8); border-radius: 1px; border: 2px solid rgba(0,0,0,.8); /*background: #2D6CDF;*/ -webkit-transition: background-color 0.3s; transition: background-color 0.3s; font-size: 12px; } .pricing--rabten .pricing__action:hover, .pricing--rabten .pricing__action:focus { background-color: rgba(0,0,0,.8); color: #fff; } @media screen and (max-width: 60em) { /*.pricing--rabten .pricing__item { max-width: none; width: 90%; flex: none; border: none !important; opacity: 1 !important; }*/ }