/* Common styles */ .bg-7 { color: #C3E9F5; background: linear-gradient(-45deg, #7e67e5, #02cbdf); } .bg-12 { background: #647df9!important; color: #7a90ff!important; } .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 0em; } .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; } .pricing__feature-list { text-align: left; } .pricing__action:focus { outline: none; } /* Individual styles */ /* Tenzin */ .pricing--tenzin .pricing__item { padding: 2em 2.5em; text-align: left; background: #EEF0F3; border-top: 3px solid #EEF0F3; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } .pricing--tenzin .pricing__item:hover { border-color: #3e62e0; } .pricing--tenzin .pricing__price { font-size: 2em; font-weight: bold; padding: 0.5em 0 0.75em; border-top: 3px solid rgba(139, 144, 157, 0.18); } .pricing--tenzin .pricing__currency { font-size: 0.5em; vertical-align: super; } .pricing--tenzin .pricing__sentence { font-weight: bold; padding: 0 0 0.5em; border-bottom: 3px solid rgba(139, 144, 157, 0.18); } .pricing--tenzin .pricing__feature-list { font-style: italic; margin: 0; padding: 0.25em 0 2.5em; list-style: none; text-align: right; color: #8b909d; } .pricing__item .btn { margin-top: auto; } /* norbu */ .pricing--norbu .pricing__item { border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); border-radius: 10px; -webkit-transition: border-color 0.3s, background 0.3s; transition: border-color 0.3s, background 0.3s; } .pricing--norbu .pricing__item:hover { border: 1px solid rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 0.18); } .pricing--norbu .pricing__title { font-size: 2em; font-weight: 400; margin: 0.5em 0; padding: 1em; position: relative; } .pricing--norbu .pricing__title::after { content: ''; position: absolute; width: 20%; height: 1px; background: #fff; left: 40%; bottom: 0; } .pricing--norbu .icon { display: inline-block; min-width: 2em; } .pricing--norbu .pricing__price { font-size: 3.5em; } .pricing--norbu .pricing__currency { font-size: 0.5em; vertical-align: super; } .pricing--norbu .pricing__period { font-size: 0.25em; display: block; padding: 1em; } .pricing--norbu .pricing__sentence { padding: 1em 2em; font-size: 1em; margin: 0 auto 1em; } .pricing--norbu .pricing__feature-list { font-size: 1.15em; margin: 0 2em; letter-spacing: 0; padding: 2em 0; list-style: none; } .pricing--norbu .pricing__feature { line-height: 1.4; } .pricing--norbu .pricing__feature i { margin-right: 10px; } .pricing--norbu .pricing__action { font-weight: bold; flex: none; margin: auto 1em 1em; padding: 1.25em 2em; color: #4aa8e4; background: rgba(255, 255, 255, 0.7); border-radius: 5px; -webkit-transition: background 0.3s; transition: background 0.3s; } .pricing--norbu .pricing__action:hover, .pricing--norbu .pricing__action:focus { background: #fff; } /* palden */ .pricing--palden .pricing__item { font-family: "Nunito", sans-serif; cursor: default; color: #84697c; background: #fff; box-shadow: 0 0 10px rgba(46, 59, 125, 0.23); border-radius: 20px 20px 10px 10px; margin: 1em; } @media screen and (min-width: 66.250em) { .pricing--palden .pricing__item { margin: 1em -0.5em; } .pricing--palden .pricing__item--featured { margin: 0; z-index: 10; box-shadow: 0 0 20px rgba(46, 59, 125, 0.23); } } .pricing--palden .pricing__deco { border-radius: 10px 10px 0 0; background: #7a90ff; padding: 4em 0 9em; position: relative; } .pricing--palden .pricing__deco-img { position: absolute; bottom: 0; left: 0; width: 100%; height: 160px; } .pricing--palden .pricing__item--featured .pricing__deco { padding: 5em 0 8.885em 0; } .pricing--palden .pricing__title { font-size: 0.75em; margin: 0; text-transform: uppercase; letter-spacing: 5px; color: #ffd5bd; } .pricing--palden .deco-layer { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .pricing--palden .pricing__item:hover .deco-layer--1 { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } .pricing--palden .pricing__item:hover .deco-layer--2 { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } .pricing--palden .icon { font-size: 2.5em; } .pricing--palden .pricing__price { font-size: 5em; font-weight: bold; padding: 0; color: #fff; margin: 0 0 0.25em 0; line-height: 0.75; } .pricing--palden .pricing__currency { font-size: 0.15em; vertical-align: top; color: rgba(0, 0, 0, 0.4); } .pricing--palden .pricing__period { font-size: 0.15em; padding: 0 0 0 0.5em; color: rgba(0, 0, 0, 0.4); font-style: italic; } .pricing--palden .pricing__sentence { font-weight: bold; margin: 0 0 1em 0; padding: 0 0 0.5em; } .pricing--palden .pricing__feature-list { margin: 0; padding: 0.25em 0 2.5em; list-style: none; text-align: center; } .pricing--palden .pricing__feature { padding: 1em 0; } .pricing--palden .pricing__action { font-weight: bold; margin: auto 3em 2em 3em; padding: 1em 2em; color: #fff; border-radius: 30px; background: #ffae7e; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .pricing--palden .pricing__action:hover, .pricing--palden .pricing__action:focus { background-color: #f38747; }