@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600); body { font-family: 'Open Sans', sans-serif; } /*Select all section element that id starts with 'pricing' word*/ section[id^="pricing"]{ padding: 20px 0; } .pricing-table-wrap p, .pricing-table-wrap li { margin: 0; } /*START code for table 1*/ .pricing-table-wrap { text-align: center; margin-bottom: 30px; } .tb-header-1 > h1 { font-size: 24px; padding: 20px 0; text-transform: uppercase; margin: 0; } .tb-price-1 { padding: 15px 0; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 18px; } .tb-features-1 { color: #fff; font-size: 15px; padding: 20px 0 30px; position: relative; } .tb-price-1 > p > span { font-size: 72px; } .tb-features-1 li { font-size: 15px; } .tb-features-1 > ul { margin: 0; padding: 0; list-style: none; } .tb-features-1 > ul > li { padding: 10px 15px 0; } .tb-features-1 > ul > li > i { margin-right: 10px; } .tb-action-1 { padding: 30px 0; } .tb-features-1:before { content: ''; position: absolute; bottom: -35px; left: 0; height: 70px; width: 45%; background: #e84c3d; -webkit-transform: skew(0deg,10deg); -moz-transform: skew(0deg,10deg); -ms-transform: skew(0deg,10deg); -o-transform: skew(0deg,10deg); transform: skew(0deg,10deg); } .tb-features-1:after { content: ''; position: absolute; bottom: -35px; right: 0; height: 70px; width: 45%; background: #e84c3d; -webkit-transform: skew(0deg,-10deg); -moz-transform: skew(0deg,-10deg); -ms-transform: skew(0deg,-10deg); -o-transform: skew(0deg,-10deg); transform: skew(0deg,-10deg); } .tb-action-1 > .btn { border-bottom: 4px solid #e84c3d; border-radius: 0; font-size: 15px; font-weight: 700; margin-top: 70px; padding: 10px 20px; text-transform: uppercase; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .pricing-table-wrap.tb-1:hover .btn { color: #fff; border-bottom: 4px solid #fff; } /* END code for table 1*/ /* START code for table 2*/ #pricing-table-2,#pricing-table-4 { /*background: #242f35;*/ /*padding: 150px 0;*/ font-size: 15px; } .pricing-table-wrap.tb-2 { background: #fff none repeat scroll 0 0; border-radius: 4px; overflow: hidden; } /*.tb-header-2 {*/ /*background: #27bccf none repeat scroll 0 0;*/ /*}*/ .tb-header-2 > h1 { /*color: #fff;*/ font-size: 24px; padding: 25px 0; text-transform: uppercase; margin: 0; font-weight: 600; } .tb-header-2 > p { /*background: #fff none repeat scroll 0 0;*/ border-radius: 3px 3px 0 0; color: #bcbcbc; display: inline-block; font-size: 18px; margin: 0; padding: 15px; } .tb-header-2 span { /*color: #263238;*/ display: block; font-size: 54px; font-weight: 600; line-height: 50px; } .tb-features-2 > ul { list-style: outside none none; margin: 0; padding: 0; } .tb-features-2 li { color: #676767; padding: 20px 20px; margin: 0; } /*.tb-features-2 li:nth-child(even) {*/ /*color: #797979;*/ /*background: #ecf2f3;*/ /*}*/ .tb-action-2 > .btn { /*background: #27bccf none repeat scroll 0 0;*/ color: #fff; font-size: 15px; font-weight: 600; margin: 30px 0; padding: 10px 20px; text-transform: uppercase; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } /*.pricing-table-wrap.tb-2:hover .btn {*/ /*background: #263238;*/ /*}*/ /* END code for table 2*/ /* START code for table 3*/ #pricing-table-3 { /*background: #f5f5f5 none repeat scroll 0 0;*/ font-family: 'Poppins',sans-serif; } .pricing-table-wrap.tb-3 { background: #fff none repeat scroll 0 0; box-shadow: 1px 1px 3px 1px #ddd; clear: both; } .tb-header-3 { position: relative; } .tb-header-3 > h1 { color: #898989; font-size: 18px; margin: 0; text-transform: capitalize; font-family: 'Poppins',sans-serif; padding: 20px 0; font-weight: 400; } .tb-price-3 { color: #fff; padding: 30px 0; } .price-std { background: #eb768c none repeat scroll 0 0; } .price-bus { background: #31aae2; } .tb-price-3.price-pro { background: #c183d6 none repeat scroll 0 0; } .tb-price-3 span { font-size: 54px; font-weight: 600; } .tb-features-3 > ul { list-style: outside none none; margin: 0; text-align: left; } .tb-features-3 > ul > li > i { color: #b8b8b8; margin-right: 15px; } .tb-features-3 li { color: #898989; padding: 15px 20px; } .tb-features-3 { padding: 20px 0; font-size: 14px; } .tb-action-3 > .btn { background: #dfdfdf none repeat scroll 0 0; color: #898989; font-size: 14px; margin-bottom: 40px; padding: 15px 29%; border-radius: 0; text-transform: capitalize; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .tb-header-3::after { background: #fff none repeat scroll 0 0; bottom: -10px; content: ""; height: 20px; position: absolute; transform: rotate(-45deg); width: 20px; left: 45%; } .pricing-table-wrap.tb-3:hover .btn { background: #3a3a3a none repeat scroll 0 0; color: #fff; } /* END code for table 3*/ /* START code for table 4*/ .pricing-table-wrap.tb-4 { background: #f3f8fb none repeat scroll 0 0; font-family: 'Roboto',sans-serif; padding-top: 40px; } .tb-header-4 > h1 { color: #676767; font-size: 24px; font-weight: 400; margin: 0; } .tb-price-4 > p { line-height: 40px; margin-bottom: 0; color: #676767; padding: 30px 0; } .tb-price-4 > P > span { display: block; font-size: 54px; font-weight: 600; color: #3a3a3a; } .tb-4.divider { background: #d0cccc none repeat scroll 0 0; height: 1px; margin: 0 auto; width: 75%; } .tb-features-4 > ul { list-style: outside none none; margin: 0; padding: 20px 0; font-size: 14px; } .tb-features-4 > ul > li { color: #676767; font-size: 14px; padding: 10px 15px; margin:0; } .tb-footer { background: #31aae2 none repeat scroll 0 0; color: #fff; font-weight: 500; padding: 20px 0; text-transform: uppercase; } .tb-footer > p { margin-bottom: 0; } .tb-action-4 .btn { background: #000 none repeat scroll 0 0; border-radius: 50px; color: #fff; font-weight: 500; margin: 20px 0 40px; padding: 15px 45px; text-transform: capitalize; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .pricing-table-wrap.tb-4:hover .btn { background: #31aae2; } .pricing-table-wrap.tb-4:hover { border: 5px solid #31aae2; -webkit-transform: translate(0,-5px); -ms-transform: translate(0,-5px); -o-transform: translate(0,-5px); transform: translate(0,-5px); } /* END code for table 4*/ /* START code for table 5*/ .pricing-table-wrap.tb-5 { border: 1px solid #ebebeb; font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", sans-serif; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .tb-header-5 > h1 { color: #676767; font-size: 18px; margin: 25px; text-transform: uppercase; } .tb-price-5 span { color: #3a3a3a; font-size: 54px; } .tb-price-5 > p { color: #676767; } .tb-price-5 { border-bottom: 1px solid #ebebeb; border-top: 1px solid #ebebeb; padding: 30px 0; } .tb-features-5 > ul { color: #969696; list-style: outside none none; margin: 0; padding-bottom: 20px; padding-top: 20px; text-align: center; } .tb-features-5 > ul > li { padding: 5px 20px; } .tb-features-5 > ul > li > i { font-size: 13px; margin-right: 10px; } .tb-action-5 .btn { background: transparent none repeat scroll 0 0; border: 1px solid #3a3a3a; border-radius: 0; color: #3a3a3a; font-size: 14px; margin: 20px 0 40px; padding: 12px 30px; text-transform: uppercase; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .pricing-table-wrap.tb-5:hover { box-shadow: 2px 5px 15px 1px #ebebeb; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } /* END code for table 5*/ /* START code for table 6*/ /*#pricing-table-6 {*/ /*background: #2a2d34;*/ /*}*/ .pricing-table-wrap.tb-6 { background: #fff none repeat scroll 0 0; border-radius: 7px; overflow: hidden; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; border-left: 1px solid rgba(128, 128, 128, 0.23); border-right: 1px solid rgba(128, 128, 128, 0.23); border-bottom: 1px solid rgba(128, 128, 128, 0.23); } .tb-header-6 > h1 { background: #529366 none repeat scroll 0 0; color: #fff; font-size: 18px; margin: 0; padding: 20px; text-transform: uppercase; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .tb-price-6 { background: #529366 none repeat scroll 0 0; border-radius: 50%; height: 130px; margin: 20px auto; text-align: center; width: 130px; padding: 18px; box-shadow: 1px 1px 5px 1px #aaa; } .tb-price-6 > p { color: #fff; font-size: 45px; line-height: 1.55; } .tb-price-6 > p > span { font-size: 30px; } .tb-price-6 > span { color: #fff; margin-top: -11px; display: block; } .tb-features-6 > ul { list-style: outside none none; margin: 0; text-align: center; } .tb-features-6 > ul > li > i { margin-right: 10px; font-size: 13px; } .tb-features-6 li { color: #969696; padding: 5px 20px; } .tb-action-6 .btn { background: #3b82e9 none repeat scroll 0 0; box-shadow: 1px 1px 5px 1px #aaa; color: #fff; margin: 25px 0; padding: 10px 20px; text-transform: uppercase; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .tb-action-6 .btn i { font-size: 13px; margin-left: 10px; } .pricing-table-wrap.tb-6:hover .tb-header-6 > h1 { background: #ff5e6b; } .pricing-table-wrap.tb-6:hover .tb-price-6 { background: #ff5e6b; } .pricing-table-wrap.tb-6:hover .tb-action-6 .btn { background: #ff5e6b; } li.left-space { margin-left: 78px; } /* END code for table 6*/ @media only screen and (max-width: 991px) { .tb-price-1 > p > span,.tb-header-2 > p > span,.tb-price-3 > p > span { font-size: 48px; } .tb-action-3 > .btn { padding: 15px 30px; } } @media only screen and (max-width: 767px) { .tb-features-1::before { width: 51%; } }