.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 48px; } .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 { color: inherit; border: none; background: none; &:focus { outline: none; } } /* Individual styles */ /* Sonam */ .pricing--sonam { .pricing--inner_item{ padding: 32px; } .pricing__item { margin: 16px; cursor: default; border-radius: 10px; background: #1F1F1F; box-shadow: 0 5px 20px rgba(0,0,0,0.05), 0 15px 30px -10px rgba(0,0,0,0.3); -webkit-transition: background 0.3s; transition: background 0.3s; &:hover { background: #141315; } } .pricing__title { font-size: 32px; color: #ffffff; font-weight: bold; width: 100%; margin: 0 0 4px; padding: 0 0 32px; border-bottom: 3px solid rgb(27, 26, 28); } .pricing__price { color: #E06060; font-size: 28px; padding: 16px 0 12px; } .pricing__sentence { color: #ffffff; font-size:16px; font-weight: bold; } .pricing__feature-list { list-style: disc; margin: 0; color: #ffffff; font-size:16px; padding: 16px 20px 32px; } .pricing__action { font-weight: bold; margin-top: auto; padding: 12px 32px; border-radius: 5px; background: #E06060; -webkit-transition: background 0.3s; transition: background 0.3s; font-size: 16px; color: #ffffff; &:hover,:focus { background: #BD3C3C; } } } /* Jinpa */ .pricing--jinpa { .pricing__item { font-family: 'Sahitya', serif; margin: 24px 0; padding: 32px; cursor: default; color: #fff; border: 1px solid #CBFFC8; -webkit-transition: background-color 0.6s, color 0.3s; transition: background-color 0.6s, color 0.3s; &:nth-child(2) { border-right: none; border-left: none; .pricing__price { background: #eaa36e; } } :hover { color: #444; background: #CBFFC8; .pricing__price { color: #fff; background: #82C57E; } .pricing__action { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } &:first-child { .pricing__price { background: #eac36e; } } } .pricing__title { font-size: 32px; width: 100%; margin: 0; padding: 0; } .pricing__price { font-size: 23.2px; font-weight: bold; line-height: 95px; width: 100px; height: 100px; margin: 18.4px auto 16px; border-radius: 50%; background: #ea716e; -webkit-transition: color 0.3s, background 0.3s; transition: color 0.3s, background 0.3s; } .pricing__sentence { font-weight: bold; } .pricing__feature-list { margin: 0; padding: 16px 16px 32px 16px; list-style: none; text-align: center; } .pricing__action { font-weight: bold; margin-top: auto; padding: 12px 32px; opacity: 0; color: #fff; background: #82C57E; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); &:hover,&:focus { background: #6EA76B; } } } @media screen and (max-width: 960px) { .pricing--jinpa { .pricing__item { max-width: none; width: 90%; flex: none; &:nth-child(2) { border: 1px solid #fff; } } } } /* Tenzin */ .pricing--tenzin .pricing__item { margin: 16px; padding: 32px 40px; text-align: left; color: #262b38; 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__title { font-size: 1em; margin: 0 0 1em; } .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; color: #9CA0A9; border-bottom: 3px solid rgba(139, 144, 157, 0.18); } .pricing--tenzin .pricing__feature-list { font-size: 0.85em; font-style: italic; margin: 0; padding: 0.25em 0 2.5em; list-style: none; text-align: right; color: #8b909d; } .pricing--tenzin .pricing__action { font-weight: bold; margin-top: auto; padding: 1em 2em; color: #fff; border-radius: 30px; background: #3e62e0; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .pricing--tenzin .pricing__action:hover, .pricing--tenzin .pricing__action:focus { background-color: #3b5ac5; } /* Yama */ .pricing--yama .pricing__item { margin: 1em; padding: 0 0 2em; color: #fff; background: #1e1c20; } .pricing--yama .pricing__title { font-family: 'Playfair Display', serif; font-size: 2.35em; font-weight: 900; line-height: 1; width: 290px; margin: 0 auto; padding: 1em 1em 0em; } .pricing__amp { padding: 0.15em 0 0.1em; color: #0f0e0f; } .pricing--yama .pricing__sentence { margin-bottom: 2em; color: #555357; } .pricing--yama .pricing__price { font-size: 2em; font-weight: bold; position: relative; z-index: 10; overflow: hidden; padding: 0.75em; cursor: default; color: #ef7d46; background: #1a181b; -webkit-transition: color 0.3s; transition: color 0.3s; } .pricing--yama .pricing__item:hover .pricing__price { color: #fff; } .pricing--yama .pricing__price::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: #141315; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translate3d(-150%,0,0) skewX(40deg); transform: translate3d(-150%,0,0) skewX(40deg); } .pricing--yama .pricing__item:hover .pricing__price::before { opacity: 1; -webkit-transform: translate3d(0,0,0) skewX(0deg); transform: translate3d(0,0,0) skewX(0deg); } .pricing--yama .pricing__period { font-size: 0.5em; font-weight: normal; display: block; color: #2a272c; } .pricing--yama .pricing__feature-list { margin: 0; padding: 2em 1em; list-style: none; text-align: center; color: #6a6563; } .pricing--yama .pricing__action { font-weight: bold; margin: 0 2em; padding: 1em 2em; border-radius: 4px; background: #ef7d46; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .pricing--yama .pricing__action:hover, .pricing--yama .pricing__action:focus { color: #ef7d46; background: #fff; } /* Rabten */ .pricing--rabten .pricing__item { font-family: 'Roboto', sans-serif; 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: 1em; margin: 1.5em 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: #E03E3E; } .pricing--rabten .pricing__price { font-size: 2em; font-weight: bold; margin: 0.5em 0 0.75em; overflow: hidden; } .pricing--rabten .pricing__currency { font-size: 0.5em; 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 { font-weight: bold; margin: 0 0 1em 0; padding: 0 0 0.5em; color: #8b909d; } .pricing--rabten .pricing__feature-list { font-size: 0.85em; margin: 0; padding: 0.25em 0 2.5em; list-style: none; text-align: center; color: #8b909d; } .pricing--rabten .pricing__action { font-weight: bold; margin-top: auto; padding: 1em 2em; color: #fff; border-radius: 30px; background: #E03E3E; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .pricing--rabten .pricing__action:hover, .pricing--rabten .pricing__action:focus { background-color: #C53737; } @media screen and (max-width: 60em) { .pricing--rabten .pricing__item { max-width: none; width: 90%; flex: none; border: none !important; opacity: 1 !important; } } /* Pema */ .pricing--pema .pricing__item { font-family: 'Alegreya Sans', sans-serif; padding: 2em 3em; margin: 1em; color: #262b38; background: #fff; cursor: default; overflow: hidden; box-shadow: 0 0 15px rgba(0,0,0,0.05); } @media screen and (min-width: 66.250em) { .pricing--pema .pricing__item { margin: 1.5em 0; } .pricing--pema .pricing__item--featured { z-index: 10; margin: 0; font-size: 1.15em; } } .pricing--pema .pricing__title { font-size: 2em; margin: 0.5em 0 0; color: #1d211f; } .pricing--pema .icon { display: inline-block; min-width: 2em; color: #8A9790; vertical-align: middle; } .pricing--pema .pricing__price { font-size: 5em; font-weight: 800; color: #6ed19c; position: relative; z-index: 100; } .pricing--pema .pricing__currency { font-size: 0.5em; vertical-align: super; } .pricing--pema .pricing__period { font-size: 0.25em; display: inline-block; padding: 0 0 0 0.5em; color: #CEDED6; } .pricing--pema .pricing__sentence { font-weight: bold; margin: 0 0 1em 0; padding: 0 0 0.5em; color: #6ed19c; } .pricing--pema .pricing__feature-list { font-size: 0.95em; margin: 0; padding: 1.5em 0.5em 2.5em; list-style: none; } .pricing--pema .pricing__feature { padding: 0.15em 0; } .pricing--pema .pricing__action { font-weight: bold; margin-top: auto; padding: 1em 2em; color: #fff; border-radius: 5px; background: #6ed19c; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .pricing--pema .pricing__action:hover, .pricing--pema .pricing__action:focus { background-color: #4F5F56; } /* karma */ .pricing--karma .pricing__item { margin: 1em; color: #382628; background: #fff; cursor: default; text-transform: uppercase; letter-spacing: 4px; border: 2px solid #382628; border-radius: 5px; } .pricing--karma .pricing__title { font-size: 1em; font-weight: 700; margin: 0.5em 0 0; padding: 1em; border-bottom: 2px solid #382628; } .pricing--karma .icon { display: inline-block; min-width: 2em; } .pricing--karma .pricing__price { font-size: 3em; padding: 0.5em 0 0 0; margin: 1em; font-weight: bold; border: 2px solid #382628; position: relative; z-index: 100; } .pricing--karma .pricing__item--featured .pricing__price::after { background: url(../img/stamp.png); background-size: cover; content: ''; position: absolute; top: -30px; right: -20px; width: 100px; height: 100px; pointer-events: none; } .pricing--karma .pricing__currency { font-size: 0.5em; vertical-align: super; } .pricing--karma .pricing__period { font-size: 0.25em; display: block; padding: 1em; margin-top: 1.25em; border-top: 2px solid #382628; } .pricing--karma .pricing__sentence { margin: 0 0 1em 0; padding: 1em; font-size: 0.85em; border-bottom: 2px solid #382628; } .pricing--karma .pricing__feature-list { font-size: 0.85em; margin: 0; letter-spacing: 0; padding: 0 1em 2.5em 4em; list-style-type: square; } .pricing--karma .pricing__action { font-weight: bold; flex: none; margin: auto 1em 1em; padding: 1.25em 2em; color: #fff; background: #382628; letter-spacing: 2px; border-radius: 5px; border: 2px solid #382628; font-size: 0.95em; text-transform: uppercase; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .pricing--karma .pricing__action:hover, .pricing--karma .pricing__action:focus { background-color: #ffdbd5; color: #382628; } /* norbu */ .pricing--norbu .pricing__item { margin: 1em; color: #fff; cursor: default; font-family: 'Myriad Pro', Arial, sans-serif; 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; padding: 0.5em 0 0 0; font-weight: 400; position: relative; z-index: 100; } .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::before { content: "\e87a"; font-family: 'linearicons'; display: inline-block; vertical-align: middle; padding: 0 0.75em 0 0; } .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; } /* Dawa */ .pricing--dawa .pricing__item { padding: 0 2em; } .pricing--dawa .pricing__title { font-weight: bold; font-size: 1.8em; padding: 0 0 0.5em; background: url(../img/line.png) no-repeat 50% 100%; } .pricing--dawa .pricing__price { font-size: 3.75em; line-height: 1; margin: 1em 0 0.65em; font-family: 'Homemade Apple', cursive; } .pricing--dawa .pricing__period { font-size: 0.25em; display: block; } .pricing--dawa .pricing__sentence { font-family: 'Homemade Apple', cursive; margin: 0; } .pricing--dawa .pricing__feature-list { margin: 0 0 1.5em; padding: 1em; list-style: none; text-align: center; } .pricing--dawa .pricing__action { border-radius: 30px; font-size: 1.5em; padding: 0.5em 1.5em; font-family: 'Homemade Apple', cursive; -webkit-transition: color 0.3s; transition: color 0.3s; } .pricing--dawa .pricing__action:hover, .pricing--dawa .pricing__action:focus { color: #fffa5c; } @media screen and (max-width: 40em) { .pricing--dawa .pricing__item { border: 1px solid rgba(255,255,255,0.6); margin: 1em; } } /* Yonten */ .pricing--yonten .pricing__item { font-family: 'PT Sans', sans-serif; padding: 2em 4em; cursor: default; color: #fff; margin: 1em; border: 1px solid #5c6552; max-width: 320px; } @media screen and (min-width: 66.250em) { .pricing--yonten .pricing__item { margin: 0; } .pricing--yonten .pricing__item:nth-child(2) { border-right: none; border-left: none; } } .pricing--yonten .pricing__item:hover { z-index: 100; } .pricing--yonten .pricing__item:hover::after { content: ''; pointer-events: none; position: absolute; top: -5px; left: -5px; width: 100%; height: 100%; box-sizing: content-box; border: 5px solid #8bc34a; } .pricing--yonten .pricing__title { font-size: 1.5em; margin: 0 0 0.5em 0; padding: 0 0 0.5em; } .pricing--yonten .icon { font-size: 3em; margin: 0 0 0.5em 0; color: #85c34a; } .pricing--yonten .pricing__price { font-size: 2em; margin: 0 0 0.5em 0; font-weight: bold; color: #85c34a; } .pricing--yonten .pricing__currency { font-size: 0.5em; vertical-align: super; } .pricing--yonten .pricing__period { font-size: 0.35em; padding: 0 0 0 0.5em; color: #646D5B; } .pricing--yonten .pricing__feature-list { margin: 0; padding: 0.25em 0 8em; list-style: none; text-align: center; color: #81867D; } .pricing--yonten .pricing__feature { padding: 0.25em; } .pricing--yonten .pricing__action { font-weight: bold; margin-top: auto; padding: 1em 2em; border-radius: 40px; background: #85c34a; color: ; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .pricing--yonten .pricing__action:hover, .pricing--yonten .pricing__action:focus { color: #85c34a; background: #fff; } /* tashi */ .pricing--tashi .pricing__item { font-family: 'Roboto Condensed', sans-serif; margin: 0.5em; padding: 2em 2.5em; text-align: left; color: #fff; background: #262c37; } .pricing--tashi .pricing__title { font-size: 2em; font-weight: 300; margin: 0 0 0.15em; color: #E25A77; } .pricing--tashi .pricing__item:nth-child(2) .pricing__title { color: #E25ABC; } .pricing--tashi .pricing__item:nth-child(3) .pricing__title { color: #7E5AE2; } .pricing--tashi .pricing__price { font-size: 3em; font-weight: 300; padding: 0.85em 0; } .pricing--tashi .pricing__currency { font-size: 0.65em; vertical-align: super; color: #394150; } .pricing--tashi .pricing__period { font-size: 0.35em; padding: 0 0 0 0.5em; color: #535965; } .pricing--tashi .pricing__sentence { padding: 0 0 0.5em; margin: 0; color: #535965; } .pricing--tashi .pricing__feature-list { font-size: 0.95em; margin: 0; padding: 0 0 2.5em; list-style: none; color: #757983; } .pricing--tashi .pricing__feature { position: relative; display: block; padding: 0 0 0 20px; line-height: 1.5; } .pricing--tashi .pricing__feature::before { content: ''; position: absolute; width: 10px; height: 2px; background: #1F242D; left: 0; top: 50%; margin: -2px 0 0 0; } .pricing--tashi .pricing__action { -webkit-align-self: flex-end; align-self: flex-end; margin-top: auto; font-size: 1.55em; width: 60px; height: 60px; line-height: 60px; color: #fff; border-radius: 30px; background: #E25A77; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .pricing--tashi .pricing__item:nth-child(2) .pricing__action { background: #E25ABC; } .pricing--tashi .pricing__item:nth-child(3) .pricing__action { background: #7E5AE2; } .pricing--tashi .pricing__action:hover, .pricing--tashi .pricing__action:focus { background: #1A1F28 !important; } /* 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; }