.price-1 { padding-top: 110px; padding-bottom: 110px; } .price-1 .plan { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 3px solid #ebedee; padding: 25px 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align: center; color: #bdc3c7; font-size: 18px; font-weight: normal; } .price-1 .plan > * { padding-left: 10px; padding-right: 10px; } .price-1 .plan b { color: #7f8c8d; } .price-1 .plan .title { color: #2c3e50; font-size: 24px; font-weight: 500; margin-bottom: 8px; } .price-1 .plan .description { margin: 26px 0; padding-top: 22px; border-top: 2px solid #ebedee; line-height: 28px; font-weight: normal; } .price-1 .plan .description b { font-weight: 500; } .price-1 .plan .btn { min-width: 170px; } .price-1 .ribbon { position: absolute; right: -3px; top: 26px; } @media (max-width: 991px) { .price-1 .ribbon { top: 4px; } } @media (max-width: 767px) { .price-1 .ribbon { top: 26px; } } @media (max-width: 767px) { .price-1 .plan { margin-top: 30px; } .price-1 .col-sm-4:first-child .plan { margin-top: 0; } } /** * Price 2 stylesheet * */ .price-2 { padding-top: 110px; padding-bottom: 110px; } .price-2 .plans { display: table; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 3px solid #e5e5e5; border-top: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .price-2 .plans .plan { display: table-cell; width: 33.33%; text-align: center; } .price-2 .plans .plan .ribbon { position: absolute; right: -1px; top: 47px; z-index: 2; } @media (max-width: 991px) { .price-2 .plans .plan .ribbon { top: 20px; } } @media (max-width: 767px) { .price-2 .plans .plan .ribbon { top: 50px; } } .price-2 .plans .title { padding: 55px 0 55px; background: #34495e; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 2px; white-space: nowrap; position: relative; } .price-2 .plans .title .price { margin: 10px 0 13px; font-size: 100px; font-weight: 500; background: #34495e; } .price-2 .plans .title .price .currency { font-size: 24px; vertical-align: top; position: relative; font-weight: 400; top: 26px; left: -10px; opacity: 50; filter: alpha(opacity=5000); opacity: 0.5; filter: alpha(opacity=50); } .price-2 .plans .title .price .period { font-size: 12px; vertical-align: bottom; position: relative; top: -27px; left: 10px; opacity: 50; filter: alpha(opacity=5000); opacity: 0.5; filter: alpha(opacity=50); } .price-2 .plans .title .btn.btn-clear { padding: 6px 12px; border: 2px solid #fff; color: #fff; font-size: 13px; background: transparent; opacity: 50; filter: alpha(opacity=5000); opacity: 0.5; filter: alpha(opacity=50); font-weight: 500; } .price-2 .plans .title .btn.btn-clear:hover, .price-2 .plans .title .btn.btn-clear:focus { border-color: #fff; color: #fff; opacity: 100; filter: alpha(opacity=10000); opacity: 1; filter: alpha(opacity=100); } .price-2 .plans .title .btn.btn-clear:active, .price-2 .plans .title .btn.btn-clear.active { border-color: #fff; color: #fff; opacity: 30; filter: alpha(opacity=3000); opacity: 0.3; filter: alpha(opacity=30); } .price-2 .plans .plan:first-child .title { margin-left: -3px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; } .price-2 .plans .plan:last-child .title { margin-right: -3px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; } .price-2 .plans .description { padding: 27px 40px; font-size: 18px; color: #bdc3c7; } .price-2 .plans .description b { color: #7f8c8d; font-weight: 500; } .price-2 .plans .description .description-box { text-align: left; padding: 13px 0; border-top: 2px solid #ebedee; } .price-2 .plans .description .description-box:first-child { border-top: 0; } .price-2 .plans .description .description-box [class*="fui-"] { margin-right: 18px; font-size: 24px; vertical-align: middle; color: rgba(52, 73, 94, 0.2); } .price-2 .plans .plan-2 { border-left: 2px solid #e5e5e5; border-right: 2px solid #e5e5e5; } .price-2 .plans .plan-2 .title { margin: 0 -2px; border-left: 2px solid #2f4254; border-right: 2px solid #2f4254; z-index: 3; } @media (max-width: 767px) { .price-2 .plans { display: block; width: auto; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .price-2 .plans .plan { display: block; width: auto; border: 0!important; margin-top: 50px; } .price-2 .plans .plan:first-child { margin-top: 0; } .price-2 .plans .title { -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; margin: 0!important; } .price-2 .plans .description { -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; border: 3px solid #e5e5e5; border-top: 0; } .price-2 .plans .plan-2 .ribbon { right: 0; } } .price-3 { padding-top: 110px; padding-bottom: 110px; } .price-3 .plans { *zoom: 1; } .price-3 .plans:before, .price-3 .plans:after { content: " "; display: table; } .price-3 .plans:after { clear: both; } .price-3 .plans:before, .price-3 .plans:after { display: table; content: ""; line-height: 0; } .price-3 .plans:after { clear: both; } .price-3 .plan { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 33.33%; text-align: center; color: #bdc3c7; font-size: 18px; } .price-3 .plan > * { padding-left: 10px; padding-right: 10px; } .price-3 .plan b { color: #7f8c8d; font-weight: 500; } .price-3 .plan .title { color: #2c3e50; font-size: 24px; font-weight: 500; margin-bottom: 8px; } .price-3 .plan .title .img { min-height: 134px; } .price-3 .plan .price { font-weight: 400; } .price-3 .plan .description { margin: 30px 0 35px; line-height: 28px; } .price-3 .plan .btn { min-width: 170px; font-weight: 500; } .price-3 .plan.plan-2 { border-left: 2px solid #e5e5e5; border-right: 2px solid #e5e5e5; } @media (max-width: 767px) { .price-3 .plan { float: none; width: auto; } .price-3 .plan.plan-2 { border: 0; border-top: 2px solid #ebedee; border-bottom: 2px solid #ebedee; padding: 50px 0; margin: 50px 0; } } .price-4 { padding-top: 110px; padding-bottom: 110px; } .price-4 .plan { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 2px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align: center; color: #bdc3c7; font-size: 18px; } .price-4 .plan > * { padding-left: 10px; padding-right: 10px; } .price-4 .plan b { color: #7f8c8d; } .price-4 .plan .title { color: #2c3e50; font-size: 24px; font-weight: 700; padding: 32px 0 7px; } .price-4 .plan .price { padding-bottom: 30px; border-bottom: 2px solid #ebedee; } .price-4 .plan .description { padding: 25px 40px; font-size: 18px; color: #bdc3c7; } .price-4 .plan .description b { color: #7f8c8d; font-weight: 500; } .price-4 .plan .description .description-box { padding: 16px 0; border-top: 2px solid #ebedee; } .price-4 .plan .description .description-box:first-child { border-top: 0; } .price-4 .plan .btn { display: block; background: #bdc3c7; color: white; width: auto; margin: 0 -2px -2px; padding: 22px 20px 24px; font-size: 22px; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; } .price-4 .plan .btn:hover, .price-4 .plan .btn:focus { background: #1abc9c; } .price-4 .plan .btn:active { background: #16a085!important; } .price-4 .plan, .price-4 .plan .title, .price-4 .plan .price { -webkit-transition: border-color 0.25s, background-color 0.25s, color 0.25s; -moz-transition: border-color 0.25s, background-color 0.25s, color 0.25s; -o-transition: border-color 0.25s, background-color 0.25s, color 0.25s; transition: border-color 0.25s, background-color 0.25s, color 0.25s; } .price-4 .plan:hover { border-color: #1abc9c; } .price-4 .plan:hover .title, .price-4 .plan:hover .price, .price-4 .plan:hover .btn { background: #1abc9c; border-color: #1abc9c; } .price-4 .plan:hover .title, .price-4 .plan:hover .price { color: #fff; } .price-4 .plan:hover .price { color: rgba(255, 255, 255, 0.7); } .price-4 .description-detail { color: #95a5a6; } .price-4 .description-detail > * + * { margin-top: 75px; } .price-4 .description-detail h6 { color: #1abc9c; font-size: 18px; font-weight: 700; margin-top: 10px; margin-bottom: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; } .price-4 .description-detail [class*="fui-"] { color: #bdc3c7; font-size: 24px; display: inline-block; margin-bottom: 13px; } @media (max-width: 767px) { .price-4 .description-detail > * { margin-top: 50px; } .price-4 .description-detail > * > * + * { margin-top: 50px; } } .price-5 { padding-top: 110px; padding-bottom: 90px; } .price-5 .plans { display: table; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 3px solid #e5e5e5; border-top: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .price-5 .plans .plan { display: table-cell; width: 33.33%; text-align: center; -webkit-transition: 0.4s background-color; -moz-transition: 0.4s background-color; -o-transition: 0.4s background-color; transition: 0.4s background-color; } .price-5 .plans .plan > * { position: relative; } .price-5 .plans .title { padding: 32px 0 40px; background: #1abc9c; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 3px; white-space: nowrap; } .price-5 .plans .title .price { font-size: 40px; font-weight: 500; letter-spacing: normal; margin: 0 0 4px; background: #1abc9c; } .price-5 .plans .title .price small { font-size: 24px; font-weight: normal; vertical-align: top; margin-right: 6px; margin-left: -1em; } .price-5 .plans .plan:first-child .title { margin-left: -3px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; } .price-5 .plans .plan:last-child .title { margin-right: -3px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; } .price-5 .plans .description { -webkit-transition: 0.4s opacity; -moz-transition: 0.4s opacity; -o-transition: 0.4s opacity; transition: 0.4s opacity; } .price-5 .plans .description .description-box { text-align: left; padding: 44px 50px 44px 44px; border-top: 2px solid #ebedee; } .price-5 .plans .description .description-box:first-child { border-top: 0; } .price-5 .plans .description big { font-size: 18px; font-weight: 500; color: #1abc9c; display: block; margin-bottom: 10px; } .price-5 .plans .description-more { position: absolute; top: 0; left: 0; right: 0; padding: 56px 40px 44px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: 0.4s opacity; -moz-transition: 0.4s opacity; -o-transition: 0.4s opacity; transition: 0.4s opacity; } .price-5 .plans .description-more big { font-size: 18px; font-weight: 500; color: #1abc9c; display: block; margin-bottom: 8px; } .price-5 .plans .description-more [class*="fui-"] { color: #1abc9c; font-size: 24px; margin-bottom: 25px; } .price-5 .plans .description-more .info { margin: 0 20px 55px; font-size: 14px; line-height: 18px; } .price-5 .plans .description-more .btn { display: block; max-width: 170px; margin: 0 auto; } .price-5 .plans .plan-2 { border-left: 2px solid #e5e5e5; border-right: 2px solid #e5e5e5; } .price-5 .plans .plan-2 .title { margin: 0 -2px; border-left: 2px solid #17a98c; border-right: 2px solid #17a98c; } .price-5 .plans .plan:hover { background-color: rgba(26, 188, 156, 0.05); } .price-5 .plans .plan:hover .description { opacity: 0; filter: alpha(opacity=0); } .price-5 .plans .plan:hover .description-more { opacity: 100; filter: alpha(opacity=10000); opacity: 1; filter: alpha(opacity=100); } @media (max-width: 767px) { .price-5 .plans { display: block; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .price-5 .plans .plan { display: block; width: auto; border: 0!important; } .price-5 .plans .plan + .plan { margin-top: 30px; } .price-5 .plans .title { margin: 0!important; -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; } .price-5 .plans .title + * { -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; border: 3px solid #e5e5e5; border-top: 0; } .price-5 .plans .description .description-box, .price-5 .plans .description-more { padding-left: 35px; padding-right: 35px; } } .price-5 .terms { text-align: center; margin: 40px 0 20px; color: #95a5a6; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 18px; } .price-5 .terms a { text-decoration: underline; color: #1abc9c; font-weight: normal; } .price-5 .terms a:hover { text-decoration: none; } .ribbon { display: block; position: relative; margin: 0; padding: 0 10px!important; background: #e74c3c; color: #fff; text-align: center; font-size: 14px; line-height: 24px; } .ribbon:before, .ribbon:after { display: block; position: absolute; line-height: 0; } .ribbon:before { content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAgCAYAAADe+2JdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAIcbAACL/wAA/RMAAIWJAACNJgAA5z0AADj/AAAeyY4zee8AAACLSURBVHja7M6xCcIAEAXQZwwpJI0W6V3AVgdwKrF3CWdwAhFcIjhDKiGCoDGxSVAxyQT5zcG94+5G+X4GS+zqOlEnxAKn72aTANs2aHCtIwGmfWjAAfsxhPIWeaSJVxaris98WN4i9/Nc9Rz/r32kSStA8Mri7oeqIsj7vj324QbXLrxghQN+TrwHABFIH/AzT59nAAAAAElFTkSuQmCC'); left: -7px; bottom: 0; } .ribbon:after { content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAIcbAACL/wAA/RMAAIWJAACNJgAA5z0AADj/AAAeyY4zee8AAACMSURBVHja7MwxDoJAFIThf9fVAo2x4A5cwprKytPY2HoJS6/hCbwBoaKi0WxYoyYg+ywICQK9jdPNl/dG5Zu1AA44Azsg1TRZAlvgAkQttlkBhz4CxGO4GEP++Cs0yc2ilWI+NYRBwGyim0svwr2syApHWdff716E6/M13HxUbztAL3I0nW6BE7D/DADKLyXavmqdkAAAAABJRU5ErkJggg=='); right: -5px; top: 0; } /* erlegant judicial */ .pricingSection{ background: #f7f7f7; position: relative; } .singlePrice{ background: #FFF; width: 100%; border-top: 5px solid #282828; position: relative; overflow: hidden; text-align: center; transition: all ease 700ms; -moz-transition: all ease 700ms; -webkit-transition: all ease 700ms; -ms-transition: all ease 700ms; -o-transition: all ease 700ms; } .singlePrice h3{ font-weight: bold; font-size: 14px; margin: 25px 0 50px; text-transform: uppercase; letter-spacing: 3px; line-height: 10px; color: #282828; position: relative; } .sectionTitle{ width: 100%; text-align: center; position: relative; margin-bottom: 55px; } .sectionTitle i{ font-size: 32px; color: #808184; } .sectionTitle p{ font-size: 16px; margin: 0px; letter-spacing: 1px; line-height: 24px; } .sectionTitle.whites p{ color: #FFF; } .sectionTitle h2{ font-size: 16px; letter-spacing: 3px; font-weight: 700; margin: 15px 0 20px; line-height: 11px; text-transform: uppercase; font-family: Roboto; } .sectionTitle.whites h2{ color: #FFF; } .sectionTitle.whites i{ color: #FFF; } .aspace-price{ text-align: center; font-size: 50px; color: #282828; line-height: 35px; margin-bottom: 45px; } .aspace-price span{ display: inline-block; font-size: 14px; letter-spacing: 1px; } .aspace-price span:first-child{ padding-right: 10px; } .priceBoddy{ position: relative; width: 100%; margin-bottom: 40px; } .priceBoddy p{ line-height: 24px; font-size: 14px; margin-bottom: 10px; text-align: center; } .priceFooter{ width: 100%; position: relative; } .priceFooter a{ background: #282828 none repeat scroll 0 0; color: #fff; display: inline-block; font-family: roboto; font-size: 14px; font-weight: bold; height: 45px; letter-spacing: 1px; line-height: 10px; padding-top: 17px; text-transform: uppercase; width: 100%; } .singlePrice:hover, .singleSelectPrice{ border-color: #b38441; } .singlePrice:hover a, .singleSelectPrice a{ background: #b38441; } .popularLabel{ background: #b38441 none repeat scroll 0 0; color: #fff; font-family: Roboto; font-size: 13px; font-weight: bold; left: -30px; letter-spacing: 3px; line-height: 10px; margin: 0; padding: 6px 0; position: absolute; text-transform: uppercase; top: 30px; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); width: 150px; }