UNPKG

equation-admin-template

Version:

Booststrap 4 admin template made by equation

1,597 lines (1,359 loc) 35 kB
/* Common styles */ .pricing--tashi .pricing__item:hover { border-radius: 10px; color: #fff; background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%); background-image: linear-gradient(-225deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%); } .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 2em; } .pricing__item { position: relative; text-align: center; -webkit-flex: 0 1 315px; flex: 0 1 315px; } .pricing__feature-list { text-align: left; } .pricing__action { color: inherit; border: none; background: none; } .pricing__action:focus { outline: none; } /* Individual styles */ /* Sonam */ .pricing--sonam .pricing__item { margin: 1em; padding: 1em 1em 5em 1em; cursor: default; border-radius: 10px; background: #1F1F1F; /*background-image: linear-gradient(to top, #f77062 0%, #6156ce 100%);*/ background-image: linear-gradient(-45deg, #29323c 0%, #485563 100%); /*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; } .pricing--sonam .pricing__item.p-t-1 { background-image: linear-gradient(120deg, #cc7cf4 0%, #5247bd 100%); } .pricing--sonam .pricing__item.p-t-2 { background-image: linear-gradient(120deg, #6156ce 0%, #25d5e4 100%); } .pricing--sonam .pricing__item.p-t-3 { background-image: linear-gradient(120deg, #ea635a 0%, #816cfd 100%); } .pricing--sonam .pricing__item.p-t-1:hover { /*background: #816cfd;*/ /*background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);*/ background: #6156ce; } .pricing--sonam .pricing__item.p-t-2:hover { /*background: #816cfd;*/ /*background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);*/ background: #6156ce; } .pricing--sonam .pricing__item.p-t-3:hover { /*background: #816cfd;*/ /*background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);*/ background: #6156ce; } .pricing--sonam .pricing__title { font-size: 18px; font-weight: 600; width: 100%; margin: 0 0 0.25em; padding: 0 0 1.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .pricing--sonam .pricing__item.p-t-1 .pricing__title { } .pricing--sonam .pricing__item.p-t-2 .pricing__title { } .pricing--sonam .pricing__item.p-t-3 .pricing__title { } .pricing--sonam .pricing__price { color: #ffffff; font-size: 2.75em; font-weight: 600; padding: 0.60em 0 0.75em; } .pricing--sonam .pricing__item.p-t-1 .pricing__price { } .pricing--sonam .pricing__item.p-t-2 .pricing__price { } .pricing--sonam .pricing__item.p-t-3 .pricing__price { } .pricing--sonam .pricing__sentence { font-weight: 600; } .pricing--sonam .pricing__item.p-t-1 .pricing__sentence { } .pricing--sonam .pricing__item.p-t-2 .pricing__sentence { } .pricing--sonam .pricing__item.p-t-3 .pricing__sentence { } .pricing--sonam .pricing__feature-list { margin: 0; padding: 2em 1.25em 2em; } .pricing--sonam .pricing__item.p-t-1 .pricing__feature-list { } .pricing--sonam .pricing__item.p-t-2 .pricing__feature-list { } .pricing--sonam .pricing__item.p-t-3 .pricing__feature-list { } .pricing--sonam .pricing__bottom__section { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; text-align: center; } .pricing--sonam .pricing__item.p-t-1 .pricing__bottom__section { } .pricing--sonam .pricing__item.p-t-2 .pricing__bottom__section { } .pricing--sonam .pricing__item.p-t-3 .pricing__bottom__section { } .pricing--sonam .pricing__action { font-weight: 600; margin-top: auto; padding: 0.75em 2em; border-radius: 5px; border: solid 1px #fff; /*background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);*/ background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%); -webkit-transition: background 0.3s; transition: background 0.3s; margin-bottom: 1.5rem!important; cursor: pointer; } .pricing--sonam .pricing__item.p-t-1 .pricing__action { border-radius: 30px; border: none; background: #fff; color: #1d1d1d; } .pricing--sonam .pricing__item.p-t-2 .pricing__action { border-radius: 30px; border: none; background: #fff; color: #1d1d1d; } .pricing--sonam .pricing__item.p-t-3 .pricing__action { border-radius: 30px; border: none; background: #fff; color: #1d1d1d; } .pricing--sonam .pricing__action:hover, .pricing--sonam .pricing__action:focus { background: #f77062; } .pricing--sonam .pricing__item.p-t-1 .pricing__action:hover, .pricing--sonam .pricing__item.p-t-1 .pricing__action:focus { color: #fff; background-image: linear-gradient(-20deg, #5f8bf4 0%, #c68aff 100%); box-shadow: 0 0 10px rgba(46, 59, 125, 0.23); } .pricing--sonam .pricing__item.p-t-2 .pricing__action:hover, .pricing--sonam .pricing__item.p-t-2 .pricing__action:focus { color: #fff; background-image: linear-gradient(-20deg, #5f8bf4 0%, #c68aff 100%); box-shadow: 0 0 10px rgba(46, 59, 125, 0.23); } .pricing--sonam .pricing__item.p-t-3 .pricing__action:hover, .pricing--sonam .pricing__item.p-t-3 .pricing__action:focus { color: #fff; background-image: linear-gradient(-20deg, #5f8bf4 0%, #c68aff 100%); box-shadow: 0 0 10px rgba(46, 59, 125, 0.23); } /* Tenzin */ .pricing--tenzin .pricing__item1, .pricing__item2, .pricing__item3 { margin: 1em; padding: 0em 0 7em 0; text-align: left; color: #ee3d50; background: #fff; box-shadow: 0 0 10px rgba(200, 204, 227, 0.23); -webkit-transition: border-color 0.3s; transition: border-color 0.3s; position: relative; text-align: center; border: solid 1px #e9ecef; -webkit-flex: 0 1 315px; flex: 0 1 315px; } .pricing--tenzin .pricing__item1 .pricing__action { background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); } .pricing--tenzin .pricing__item2 .pricing__action { background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); } .pricing--tenzin .pricing__item3 .pricing__action { background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); } .pricing--tenzin .pricing__item1:hover, .pricing__item2:hover, .pricing__item3:hover { box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); } .pricing--tenzin .pricing__item:hover { border-color: #3862f5; box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); } .pricing--tenzin .pricing__title { font-size: 20px; color: #1d1d1d; font-weight: 600; text-transform: initial; } .pricing--tenzin .pricing__price { font-size: 28px; font-weight: 600; color: #6156ce; padding: 0.5em 0 0.75em; border-top: 1px solid #f1f3f1; } .pricing--tenzin .pricing__currency { font-size: 0.5em; vertical-align: super; } .pricing--tenzin .pricing__sentence { font-weight: 600; padding: 0 0 0.5em; color: #3b3f5c; } .pricing--tenzin .pricing__feature-list { font-size: 14px; line-height: 2.5; font-style: normal; margin: 0; padding: 1.25em 0 2.5em; list-style: none; text-align: center; color: #3b3f5c; } .pricing--tenzin .pricing__bottom__section { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; text-align: center; } .pricing--tenzin .pricing__action { font-weight: 600; margin-top: auto; padding: 12px 36px; color: #fff; border-radius: 30px; background: #3862f5; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; cursor: pointer; } .pricing--tenzin .pricing__item1 .pricing__action:hover, .pricing--tenzin .pricing__item1 .pricing__action:focus { background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); } .pricing--tenzin .pricing__item2 .pricing__action:hover, .pricing--tenzin .pricing__item2 .pricing__action:focus { background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); } .pricing--tenzin .pricing__item3 .pricing__action:hover, .pricing--tenzin .pricing__item3 .pricing__action:focus { background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); } /* Yama */ .pricing--yama .pricing__item { margin: 1em; padding: 0 0 2em; color: #fff; border-radius: 4px; background-image: linear-gradient(to top, #07e0c4 0%, #24ccda 100%); } .pricing--yama .pricing__item.p-y-1 { background: #4EA3F6; } .pricing--yama .pricing__item.p-y-2 { background: #9536F7; } .pricing--yama .pricing__item.p-y-3 { background: #07dabf; } .pricing--yama .pricing__title { font-size: 1.7em; font-weight: 600; line-height: 1; width: 90%; margin: 0 auto; padding: 1em 0em 0.3em; } .pricing__amp { padding: 0.15em 0 0.1em; color: #fff; } .pricing--yama .pricing__sentence { margin-bottom: 2em; color: #ffffff; margin-top: 10px; } .pricing--yama .pricing__price { font-size: 33px; font-weight: 600; position: relative; z-index: 10; overflow: hidden; padding: 0.75em; cursor: default; color: #fff; -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: #ffffff21; -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: #fff; } .pricing--yama .pricing__feature-list { margin: 0; padding: 3em 1em; list-style: none; text-align: center; /*color: #6a6563;*/ } .pricing--yama .pricing__action { font-weight: 600; padding: 1em 2em; border-radius: 4px; /*background: #6156ce;*/ /*-webkit-transition: background-color 0.3s, color 0.3s;*/ transition: background-color 0.1s, color 0.1s; } .pricing--yama .pricing__item.p-y-1 .pricing__action { background-image: linear-gradient(120deg, #accbee 0%, #e7f0fd 100%); color: #0081e6; } .pricing--yama .pricing__item.p-y-2 .pricing__action { background-image: linear-gradient(120deg, #e6e9f0 0%, #eef1f5 100%); color: #9536F7; } .pricing--yama .pricing__item.p-y-3 .pricing__action { background-image: linear-gradient(to right, #eafffb 0%, #f1f2f6 100%); color: #07e0c4; } .pricing--yama .pricing__item.p-y-1 .pricing__action:hover, .pricing--yama .pricing__item.p-y-1 .pricing__action:focus { color: #3b3f5c; background: #fff; } .pricing--yama .pricing__item.p-y-2 .pricing__action:hover, .pricing--yama .pricing__item.p-y-2 .pricing__action:focus { color: #3b3f5c; background: #fff; } .pricing--yama .pricing__item.p-y-3 .pricing__action:hover, .pricing--yama .pricing__item.p-y-3 .pricing__action:focus { color: #3b3f5c; background: #fff; } /* Rabten */ .pricing--rabten .pricing__item { cursor: default; color: #e95f2b; max-width: 320px; border: solid 1px #f1f3f1; } .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: #816cfd; } .pricing--rabten .pricing__price { font-size: 38px; font-weight: 600; 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: 600; margin: 0 0 1em 0; padding: 0 0 0.5em; color: #3b3f5c; text-transform: uppercase; margin-top: 10px; } .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: 600; margin-top: auto; padding: 1em 2em; color: #fff; border-radius: 30px; background: #816cfd; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .pricing--rabten .pricing__action:hover, .pricing--rabten .pricing__action:focus { background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%); } /* Pema */ .pricing--pema .pricing__item { margin: 1em; color: #888ea8; background: #fff; cursor: default; overflow: hidden; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.05); } .pricing--pema .pricing__item.p-p-1 { background: #0081e6; } .pricing--pema .pricing__item.p-p-2 { background: #0081e6; } .pricing--pema .pricing__title { font-size: 28px; margin: 0.5em 0 0; color: #ffffff; font-weight: 600; } .pricing--pema .icon { display: inline-block; min-width: 2em; color: #fff; vertical-align: middle; font-size: 1.3em; padding: 6px; } .pricing--pema .pricing__price { font-size: 5em; font-weight: 700; color: #fff; 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: #e9ecef; font-weight: normal; } .pricing--pema .pricing__sentence { font-weight: 600; margin: 0 0 1em 0; padding: 0 0 0.5em; color: #e8e8e8; font-size: 16px; } .pricing--pema .pricing__feature-list { font-size: 1.1em; margin: 0; padding: 1.5em 0 2.5em 0; list-style: none; color: #3b3f5c; font-weight: 600; } .pricing--pema .pricing__feature { padding: 0.15em 0; color: #fff; font-weight: normal; } .pricing--pema .pricing__action { font-weight: 600; margin-top: auto; padding: 1em 2em; color: #fff; border-radius: 30px; background: #00b1f4; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .pricing--pema .pricing__item.p-p-1 .pricing__action { } .pricing--pema .pricing__item.p-p-2 .pricing__action { } .pricing--pema .pricing__item.p-p-1 .pricing__action:hover, .pricing--pema .pricing__item.p-p-1 .pricing__action:focus { background-color: #25d5e4; border: none; } .pricing--pema .pricing__item.p-p-2 .pricing__action:hover, .pricing--pema .pricing__item.p-p-2 .pricing__action:focus { background-color: #25d5e4; border: none; } /* norbu */ .pricing--norbu .pricing__item { margin: 1em; /*color: #3b3f5c;*/ color: #49346f; cursor: default; background: #fff; 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 { background: #49346f; color: #fff; } .pricing--norbu .pricing__title { font-size: 26px; font-weight: 600; margin: 0.5em 0; padding: 1em; position: relative; /*color: #49346f;*/ } .pricing--norbu .pricing__title::after { content: ''; position: absolute; width: 20%; height: 1px; background: #49346f; left: 40%; bottom: 0; } .pricing--norbu .icon { display: inline-block; min-width: 2em; } .pricing--norbu .pricing__price { font-size: 50px; padding: 0.5em 0 0 0; font-weight: 600; position: relative; z-index: 100; /*color: #5247bd;*/ } .pricing--norbu .pricing__currency { font-size: 0.5em; vertical-align: super; } .pricing--norbu .pricing__period { font-size: 15px; /* display: block; */ padding: 1em; } .pricing--norbu .pricing__sentence { padding: 1em 2em; font-size: 1em; margin: 0 auto 1em; /*color: #787c97;*/ /*color: #3b3f5c;*/ } .pricing--norbu .pricing__feature-list { font-size: 1.15em; letter-spacing: 0; padding: 2em 0; list-style: none; /*width: 228px;*/ } .pricing--norbu .pricing__feature { /*line-height: 1.4;*/ line-height: 1.6; /*color: #1d1d1d;*/ font-size: 15px; } .pricing--norbu .pricing__feature::before { content: "\ea3c"; font-family: 'flaticon'; display: inline-block; vertical-align: middle; padding: 0 0.75em 0 0; } .pricing--norbu .pricing__action { text-transform: uppercase; flex: none; /*padding: 12px 36px;*/ padding: 12px 45px; color: #ffffff; background: #49346F; border: solid 1px #fff; border-radius: 30px; -webkit-transition: background 0.3s; transition: background 0.3s; } .pricing--norbu .pricing__action:hover, .pricing--norbu .pricing__action:focus { /*background-image: linear-gradient(to top, #dfe9f3 0%, white 100%); color: #4f5163;*/ color: #ffffff; background: #f8538d; border-color: #f8538d; box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1); will-change: opacity, transform; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } /* Yonten */ /*.pricing--yonten .pricing__item { padding: 1em 0; cursor: default; color: #fff; margin: 1em; border: 1px solid #24ccda; max-width: 320px; border-radius: 10px; }*/ .pricing--yonten .pricing__item1 { /*padding: 1em 0;*/ padding: 2.5em 0; cursor: default; color: #fff; margin: 1em; /*border: 1px solid #24ccda;*/ background-color: #000; /*background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);*/ background-image: linear-gradient(-45deg, #25d5e4 0%, #816cfd 100%); max-width: 320px; border-radius: 10px; position: relative; text-align: center; -webkit-flex: 0 1 315px; flex: 0 1 315px; } .pricing--yonten .pricing__item1:hover { z-index: 100; /*background-color: #d3d3d3;*/ background: #22213C; } .pricing--yonten .pricing__item2 { /*padding: 1em 0;*/ padding: 2.5em 0; cursor: default; color: #fff; margin: 1em; /*border: 1px solid #24ccda;*/ background-color: #000; /*background-image: linear-gradient(135deg, #5247bd 0%, #764ba2 100%);*/ background-image: linear-gradient(-45deg, #5247bd 0%, #9964d0 100%); max-width: 320px; border-radius: 10px; position: relative; text-align: center; -webkit-flex: 0 1 315px; flex: 0 1 315px; } .pricing--yonten .pricing__item2:hover { z-index: 100; /*background-color: #d3d3d3;*/ background: #22213C; } .pricing--yonten .pricing__item3 { /*padding: 1em 0;*/ padding: 2.5em 0; cursor: default; color: #fff; margin: 1em; /*border: 1px solid #24ccda;*/ background-color: #000; background-image: linear-gradient(-45deg, #f8538d 0%, #FFC796 100%); max-width: 320px; border-radius: 10px; position: relative; text-align: center; -webkit-flex: 0 1 315px; flex: 0 1 315px; } .pricing--yonten .pricing__item3:hover { z-index: 100; /*background-color: #d3d3d3;*/ background: #22213C; } .pricing--yonten .pricing__item:hover { z-index: 100; } .pricing--yonten .pricing__item:hover::after { content: ''; pointer-events: none; position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; box-sizing: content-box; border: 2px solid #24ccda; border-radius: 10px; } .pricing--yonten .pricing__title { font-size: 1.5em; margin: 0 0 0.5em 0; padding: 0 0 0.5em; color: #fff; } .pricing--yonten .icon { font-size: 3em; margin: 0 0 0.5em 0; color: #fff; } .pricing--yonten .pricing__price { font-size: 35px; margin: 0 0 0.5em 0; font-weight: 600; color: #ffffff; } .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: #d3d3d3; } .pricing--yonten .pricing__feature-list { margin: 0; padding: 0.25em 0 5em; list-style: none; text-align: center; color: #efefef; } .pricing--yonten .pricing__feature { padding: 0.25em; } .pricing--yonten .pricing__action { font-weight: 600; margin-top: auto; padding: 12px 36px; border-radius: 30px; background: #ffffff; color: #392e97; -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: #3f4257; background: #fff; } /* tashi */ .pricing--tashi .pricing__item { font-family: 'Roboto Condensed', sans-serif; margin: 0.5em; /*padding: 1em 2em; text-align: left;*/ padding: 2.5em 2em; text-align: center; color: #000; background: #ffffff; border-radius: 10px; border: solid 1px #e9ecef; box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); } .pricing--tashi .pricing__title { font-size: 22px; font-weight: 400; margin: 0 0 0.55em; color: #f8538d; margin-bottom: 1.5rem!important; text-transform: uppercase; } .pricing--tashi .pricing__item:hover .pricing__title, .pricing--tashi .pricing__item:hover:nth-child(2) .pricing__title, .pricing--tashi .pricing__item:hover:nth-child(3) .pricing__title { color: #fff; } .pricing--tashi .pricing__item:nth-child(2) .pricing__title { color: #00d1c1; } .pricing--tashi .pricing__item:nth-child(3) .pricing__title { color: #ff6f00; } .pricing--tashi .pricing__price { font-size: 3.3em; font-weight: 400; padding: 0.85em 0; color: #6424c9; } .pricing--tashi .pricing__item:hover .pricing__price { color: #fff; } .pricing--tashi .pricing__currency { font-size: 0.65em; vertical-align: super; color: #6424c9; } .pricing--tashi .pricing__item:hover .pricing__currency { color: #fff; } .pricing--tashi .pricing__period { font-size: 0.35em; color: #3b3f5c; } .pricing--tashi .pricing__item:hover .pricing__period { color: #fff; } .pricing--tashi .pricing__sentence { padding: 0 0 0.5em; margin: 0; color: #535965; } .pricing--tashi .pricing__item:hover .pricing__sentence { color: #fff } .pricing--tashi .pricing__feature-list { font-size: 0.95em; margin: 0; padding: 0 0 2.5em; list-style: none; color: #888ea8; } .pricing--tashi .pricing__item:hover .pricing__feature-list { color: #fff; } .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: 7px; height: 2px; background: #d3d3d3; 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.45em; width: 50px; height: 50px; line-height: 50px; color: #fff; border-radius: 50%; background: #f8538d; /*background-image: linear-gradient(-45deg, #6424c9 0%, #7579ff 100%);*/ background-image: linear-gradient(-45deg, #ee3d50 0%, #ff89b2 100%); -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; cursor: pointer; } .pricing--tashi .pricing__item:nth-child(2) .pricing__action { background: #07e0c4; /*background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);*/ background-image: linear-gradient(-45deg, #6cfdc1 0%, #04befe 100%); } .pricing--tashi .pricing__item:nth-child(3) .pricing__action { /*background: #816cfd;*/ background-image: linear-gradient(-45deg, #fb555f 0%, #f58b22 100%); } .pricing--tashi .pricing__action:hover, .pricing--tashi .pricing__action:focus { background: #fff !important; color: #1A1F28; } /* 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; } .pricing--palden .pricing__deco { border-radius: 10px 10px 0 0; padding: 4em 0 9em; position: relative; /*background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);*/ background-image: linear-gradient(120deg, #d0b3eb 0%, #6291ff 100%); } .pricing--palden .pricing__deco-img { position: absolute; bottom: 0; left: 0; width: 100%; height: 160px; } .pricing--palden .pricing__title { font-size: 0.75em; margin: 0; text-transform: uppercase; letter-spacing: 5px; color: #fff; } .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: 4em; font-weight: 600; padding: 0; color: #fff; margin: 0 0 0.25em 0; line-height: 0.75; } .pricing--palden .pricing__currency { font-size: 20px; vertical-align: top; color: rgba(255, 255, 255, 0.6); } .pricing--palden .pricing__period { font-size: 14px; padding: 0 0 0 0.5em; color: rgba(0,0,0,0.4); font-style: italic; } .pricing--palden .pricing__sentence { font-weight: 600; margin: 0 0 1em 0; padding: 0 0 0.5em; } .pricing--palden .pricing__feature-list { margin: 0; padding: 0; list-style: none; text-align: center; } .pricing--palden .pricing__feature { padding: 1em 0; } .pricing--palden .pricing__action { font-weight: 600; padding: 12px 36px; color: #fff; border-radius: 30px; /*background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);*/ background-image: linear-gradient(120deg, #d0b3eb 0%, #6291ff 100%); -webkit-transition: background-color 0.3s; transition: background-color 0.3s; cursor: pointer; } .pricing--palden .pricing__action:hover, .pricing--palden .pricing__action:focus { /*background-image: linear-gradient(-20deg, #ff9a44 0%, #fc6076 100%);*/ background-image: linear-gradient(-20deg, #4c74d2 0%, #ac54ff 100%); -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } /* Pricing Table 10 */ .billing-cycle-radios { display: block; margin: 0 auto; text-align: center } .billing-cycle-radios.text-align-left { text-align: left } .billing-cycle-radios .radio { margin-right: 20px } .billing-cycle-radios .radio:last-child { margin-right: 0 } .pricing-plans-container { border-radius: 4px; display: flex } .pricing-plan { flex: 1; padding: 35px 35px; position: relative; color: #3b3f5c; border: solid 1px #f1f3f1; /*box-shadow: 0 0 25px rgba(0, 0, 0, .1);*/ } .pricing-plan:hover { box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); } .pricing-plan:first-of-type { } .pricing-plan:last-of-type { } .pricing-plan h3 { font-size: 22px; font-weight: 600; margin-bottom: 20px; text-align: center; } .pricing-plan p { margin: 0; color: #888ea8; font-size: 14px; text-align: center; } .billed-yearly-label { display: none } .billed-yearly .billed-yearly-label { display: block } .billed-yearly .billed-monthly-label { display: none } .pricing-plan-label { background: #f1f3f1; border-radius: 4px; font-size: 18px; color: #a6a4a4; text-align: center; line-height: 24px; padding: 15px; margin: 30px 0 } .pricing-plan-label strong { font-size: 32px; font-weight: 600; color: #6156ce; margin-right: 5px; line-height: 30px } .pricing-plan-features strong { color: #333; font-weight: 600; margin-bottom: 5px; line-height: 24px; display: inline-block } .pricing-plan-features ul { padding: 0; margin: 0 } .pricing-plan-features ul li { display: block; margin: 0; padding: 3px 0; line-height: 24px; color: #6156ce; } .pricing-plan .button:hover { } .pricing-plan .button { background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 10px; } .pricing-plan .button:hover { box-shadow: 0 4px 12px rgba(102, 103, 107, .15) } .billed-yearly-radio.billed-yearly-switch span.txt-monthly { opacity: 0.5; } .billed-yearly-radio span.txt-yearly { opacity: 0.5; } .billed-yearly-radio.billed-yearly-switch span.txt-yearly { opacity: 1; } .billed-yearly-radio span.txt-yearly span.badge { visibility: hidden; padding: 4px 11px; } .billed-yearly-radio.billed-yearly-switch span.txt-yearly span.badge { visibility: visible; } .billed-yearly-radio span.txt-monthly, .billed-yearly-radio span.txt-yearly { color: #e95f2b; font-weight: 600; } .pricing-plan.recommended { box-shadow: 0 0 45px rgba(0, 0, 0, .09); padding: 35px; margin: 6rem 0 0 0; } .pricing-plan.recommended p { } .pricing-plan .recommended-badge { background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%); color: #fff; position: absolute; width: 100%; /*height: 45px;*/ height: 59px; top: -45px; left: 0; text-align: center; border-radius: 4px 4px 0 0; font-weight: 600; /*line-height: 45px*/ line-height: 59px; } .recommended .pricing-plan-label { background-color: #f1f3f1; color: #f58b22; } .recommended .pricing-plan-label strong { color: #ec6262; font-weight: 700; font-size: 44px; } .pricing-plan.recommended .button { background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%); color: #fff!important; } .pricing-plan.recommended .pricing-plan-features strong { } .pricing-plan.recommended .pricing-plan-features ul li { } /* Landing */ #pricingWrapper { padding: 10.25rem 1.25rem; } .pricing--tashi .pricing__item:hover { border-radius: 10px; color: #fff; background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%); background-image: linear-gradient(-225deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%); } .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 2em; margin-top: 90px; } .pricing__item { position: relative; text-align: center; -webkit-flex: 0 1 315px; flex: 0 1 315px; } .pricing__feature-list { text-align: left; } .pricing__action { color: inherit; border: none; background: none; } .pricing__action:focus { outline: none; } .pricing--landing .pricing__item1, .pricing__item2, .pricing__item3 { margin: 1em; padding: 0em 0 7em 0; text-align: left; color: #ee3d50; background: #fff; box-shadow: 0 0 10px rgba(200, 204, 227, 0.23); -webkit-transition: border-color 0.3s; transition: border-color 0.3s; position: relative; text-align: center; border: solid 1px #e9ecef; -webkit-flex: 0 1 315px; flex: 0 1 315px; } .pricing--landing .pricing__item1 .pricing__action { background-image: linear-gradient(-20deg, #5247bd 0%, #9977e1 100%); cursor: pointer; } .pricing--landing .pricing__item2 .pricing__action { background-image: linear-gradient(-20deg, #5247bd 0%, #9977e1 100%); cursor: pointer; } .pricing--landing .pricing__item3 .pricing__action { background-image: linear-gradient(-20deg, #5247bd 0%, #9977e1 100%); cursor: pointer; } .pricing--landing .pricing__item1:hover,.pricing__item2:hover, .pricing__item3:hover { box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); } .pricing--landing .pricing__item:hover { border-color: #3862f5; box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); } .pricing--landing .pricing__title { font-size: 18px; color: #000000; font-weight: 600; text-transform: initial; border-bottom: solid 1px #e9ecef; } .pricing--landing .pricing__price { font-size: 34px; font-weight: 500; color: #6156ce; padding: 0.5em 0 0.35em; border-top: 1px solid #f1f3f1; } .pricing--landing .pricing__currency { font-size: 0.5em; vertical-align: super; } .pricing--landing .pricing__period { font-size: 0.5em; } .pricing--landing .pricing__sentence { font-weight: 600; padding: 0 0 0.5em; color: #3b3f5c; } .pricing--landing .pricing__feature-list { font-size: 14px; line-height: 2.5; font-style: normal; margin: 0; padding: 1.25em 0 2.5em; list-style: none; text-align: center; color: #3b3f5c; font-weight: 500; } .pricing--landing .pricing__feature-list li:nth-child(even) { background-color: #f4f4f4; padding: 13px 0; } .pricing--landing .pricing__feature-list li.pricing__feature-na span { text-decoration: line-through; } .pricing--landing .pricing__feature-list li.pricing__feature-na i { color: #acb0c3; } .pricing--landing .pricing__feature-list li.pricing__feature-na:hover i { color: #e7515a; } .pricing--landing .pricing__bottom__section { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; text-align: center; } .pricing--landing .pricing__action { margin-top: auto; padding: 12px 36px; color: #fff; border-radius: 30px; background: #3862f5; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .pricing--landing .pricing__item1 .pricing__action:hover, .pricing--landing .pricing__item1 .pricing__action:focus { background-image: linear-gradient(-20deg, #9977e1 0%, #5247bd 100%); } .pricing--landing .pricing__item2 .pricing__action:hover, .pricing--landing .pricing__item2 .pricing__action:focus { background-image: linear-gradient(-20deg, #9977e1 0%, #5247bd 100%); } .pricing--landing .pricing__item3 .pricing__action:hover, .pricing--landing .pricing__item3 .pricing__action:focus { background-image: linear-gradient(-20deg, #9977e1 0%, #5247bd 100%); }