@import url('https://fonts.googleapis.com/css?family=Roboto'); @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-v23-latin-regular.woff2') format('woff2'); } :hover::-webkit-scrollbar-thumb { display: block; } *{ margin:0; padding:0; box-sizing: border-box; } body{ font-family: 'Roboto', sans-serif; font-size: 13.5px; color: #fff; background-color: #f9f9f9; box-sizing: border-box; padding: 35px; } .plansModal { visibility: hidden; opacity: 0; position: fixed; z-index: 1; top: 0px; right: 0px; bottom: 0px; left: 0px; display: flex; align-items: center; justify-content: center; padding: 30px; width: 100%; height: 100%; overflow: auto; background-color: rgba(143, 143, 143, 0.7); backdrop-filter: blur(5px); -moz-transition: all 300ms; -webkit-transition: all 300ms; } .plansModalShow { visibility: visible; opacity: 1; } .plansModalBox { display: flex; flex-direction: column; flex-wrap: nowrap; overflow: hidden; background-color: #fff; border-radius: 8px; position: relative; width: 550px; padding: 40px 10px 20px 20px; } .plansModalClose { position: absolute; right: 13px; top: 7px; color: #aaa; font-size: 22px; font-weight: bold; cursor: pointer; } .plansModalIframe { width: 100%; height: 100%; } .plansModalIframe iframe { width: 100%; height: 100%; } .plansModalPayment .plansModalBox { width: 1000px; height: 95%; max-height: 100%; }:root { --plan1-color: #48c3c4; --plan2-color: #2ec269; --plan3-color: #2e74c2; --plan1-bgcolor: #f0fafa; --plan2-bgcolor: #f3fbf6; --plan3-bgcolor: #f0f5fb; } ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 7px; background-color: #d0d2d5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border: 3px transparent solid; background-clip: padding-box; display: none; } .unselect { user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } .plans { } .plansIntro { display: flex; flex-direction: row; margin-bottom: 20px; } .plansIntroImage { margin: 0 50px; } .plansIntroImage img { max-height: 230px; } .plansIntroInfo { padding-top: 30px; } .plansIntroTitle { font-size: 2.2em; } .plansIntroDescription { margin-top: 15px; font-size: 1.1em; opacity: 0.7; line-height: 1.3em; } .plansBox { width: 100%; background: #fff; border-radius: 8px; overflow: hidden; color: #222; box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 10px 5px; border: 1px solid rgba(0, 0, 0, 0.05); max-width: 900px; margin: 0 auto 0 auto; } .plansHeader { text-align: left; padding: 30px 30px 30px 30px; border-bottom: 1px dashed rgba(0, 0, 0, 0.2); } .plansHeaderTitle { font-weight: normal; font-size: 25px; color: var(--color-1); } .plansGrid { padding: 40px 30px 30px 30px; } .plansGridHeader { display: grid; grid-template-columns: 1fr repeat(3, 1fr); } .plansGridHeaderEmpty, .plansGridFooterEmpty { display: flex; flex-direction: row; padding: 20px 25px 20px 0px; min-width: 270px; } .plansGridHeaderEmpty { border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .plansGridHeader .plansGridPlan { border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .plansGridPlanTitle { text-align: center; font-size: 17px; padding: 20px 0; } .plansGridPlanSubtitle { font-size: 35px; font-weight: bold; } .plansGridPlan1 .plansGridPlanTitle { color: var(--plan1-color); } .plansGridPlan2 .plansGridPlanTitle { color: var(--plan2-color); } .plansGridPlan3 .plansGridPlanTitle { color: var(--plan3-color); } .plansGridPlanCurrent { display: inline-flex; font-size: 13px; background-color: #444; color: #fff; padding: 5px 10px; margin-top: 10px; border-radius: 15px; } .plansGridRow { display: grid; grid-template-columns: 1fr repeat(3, 1fr); } .plansGridFeature, .plansGridCheck { -moz-transition: all 150ms; -webkit-transition: all 150ms; } .plansGridFeature { display: flex; flex-direction: row; padding: 20px 25px 20px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); min-width: 270px; } .plansGridFeatureIcon { margin-right: 8px; font-size: 1.5em; color: #2d74a2; color: var(--color-1); width: 25px; min-width: 25px; } .plansGridFeatureInfo { display: flex; flex-direction: column; flex-wrap: nowrap; } .plansGridFeatureTitle { font-size: 0.95em; line-height: 1.2em; text-transform: uppercase; font-weight: bold; margin-top: 3px; color: var(--color-1); } .plansGridFeatureDescription { margin-top: 3px; font-size: 0.9em; opacity: 0.7; } .plansGridCheck { display: flex; justify-content: center; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.07); border-left: 1px solid transparent; border-right: 1px solid transparent; } .plansGridCheckLimit { font-size: 0.9em; font-weight: normal; color: #fff; padding: 6px 8px; border-radius: 15px; white-space: nowrap; } .plansGridCheckOn, .plansGridCheckOff { min-width: 25px; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .plansGridPlan1 .plansGridCheckOn, .plansGridPlan1 .plansGridCheckLimit { background-color: var(--plan1-color); } .plansGridPlan2 .plansGridCheckOn { background-color: var(--plan2-color); } .plansGridPlan3 .plansGridCheckOn { background-color: var(--plan3-color); } .plansGridCheckOn:before { content: '✓'; color: #fff; font-size: 1.5em; } .plansGridCheckOff { background-color: #c2c2c2; } .plansGridCheckOff:before { content: '×'; color: #fff; font-size: 1.5em; } .plansGridFooter { display: grid; grid-template-columns: 1fr repeat(3, 1fr); text-align: center; font-weight: bold; } .plansGridPrice { text-align: center; font-weight: bold; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: center; padding: 20px 10px 0 10px; } .plansGridPriceInfo { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: center; margin-bottom: 10px; } .plansGridPriceDiscount { font-size: 12px; margin-bottom: 8px; display: inline-flex; flex-direction: row; flex-wrap: nowrap; } .plansGridPriceDiscount span { margin-right: 4px; font-weight: bold; } .plansGridPriceAmount { font-size: 22px; font-weight: normal; } .plansGridPriceAmount span { font-size: 0.9em; } .plansGridPriceSubtitle { font-size: 11px; opacity: 0.7; } .plansGridPriceFree .plansGridPriceTitle { font-size: 25px; } .plansGridPriceFree .plansGridPriceButton { visibility: hidden !important; display: none !important; } .plansGridPrice .plansGridPriceButton { display: inline-flex; visibility: visible; opacity: 1; background-color: #444; color: white; font-size: 0.9em; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; -moz-transition: all 300ms; -webkit-transition: all 300ms; } .plansGridPriceButton:hover { background-color: #222 !important; } .plansGridPlanSelected { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.03); border-top: 0px; } .plansGridPlan1.plansGridPlanSelected { border-left: 1px solid var(--plan1-color); border-right: 1px solid var(--plan1-color); background-color: var(--plan1-bgcolor) !important; } .plansGridPlan2.plansGridPlanSelected { border-left: 1px solid var(--plan2-color); border-right: 1px solid var(--plan2-color); background-color: var(--plan2-bgcolor) !important; } .plansGridPlan3.plansGridPlanSelected { border-left: 1px solid var(--plan3-color); border-right: 1px solid var(--plan3-color); background-color: var(--plan3-bgcolor) !important; } .plansGridHeader .plansGridPlanSelected { border-radius: 10px 10px 0 0; } .plansGridHeader .plansGridPlan1.plansGridPlanSelected { border-top: 1px solid var(--plan1-color); } .plansGridHeader .plansGridPlan2.plansGridPlanSelected { border-top: 1px solid var(--plan2-color); } .plansGridHeader .plansGridPlan3.plansGridPlanSelected { border-top: 1px solid var(--plan3-color); } .plansGridFooter .plansGridPlanSelected { border-radius: 0 0 10px 10px; } .plansGridFooter .plansGridPlan1.plansGridPlanSelected { border-bottom: 1px solid var(--plan1-color); } .plansGridFooter .plansGridPlan2.plansGridPlanSelected { border-bottom: 1px solid var(--plan2-color); } .plansGridFooter .plansGridPlan3.plansGridPlanSelected { border-bottom: 1px solid var(--plan3-color); } .plansGridPlanSelected .plansGridPriceButton { visibility: hidden; opacity: 0; cursor: default; } .plansForm { margin-top: 30px; padding: 30px; background: #f5f5f5; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1); } .plansFormInput { margin-bottom: 20px; } .plansFormInputTitle { font-size: 1.1em; margin-bottom: 8px; } .plansFormInputField { } .plansSummary { padding: 30px; background: #fff; border-top: 1px dashed rgba(0, 0, 0, 0.2); } .plansSummaryFree, .plansSummaryCost, .plansSummarySignup, .plansSummaryDowngrade { display: none; } .plansSummaryFree, .plansSummarySignup, .plansSummaryDowngrade { text-align: center; } .plansSummaryForm { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; justify-content: space-between; } .plansSummaryItems { display: flex; flex-direction: column; flex-wrap: nowrap; margin-right: 20px; width: 60%; } .plansSummaryItem { display: flex; flex-direction: column; flex-wrap: nowrap; margin-bottom: 20px; } .plansSummaryItem:last-child { margin-bottom: 0px; } .plansSummaryItemTitle { margin-bottom: 8px; font-weight: bold; } .plansSummaryItemDescription { font-size: 0.9em; margin-bottom: 10px; } .plansSummaryItemWarning { font-size: 0.9em; font-style: italic; opacity: 0.7; margin-top: 15px; } .plansSummaryItemInput input, .plansSummaryItemInput select { padding: 6px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; background-color: #f8f8f8; width: 150px; font-weight: bold; color: var(--color-1); } .plansSummaryTotal { display: flex; flex-direction: column; flex-wrap: nowrap; width: 40%; align-items: center; } .plansSummaryTotalPromo { text-align: center; margin-bottom: 20px; } .plansSummaryTotalPromoTitle { font-size: 1.2em; font-weight: bold; margin-bottom: 5px; } .plansSummaryTotalPromoDescription { color: #0068c7; font-weight: bold; } .plansSummaryTotalTitle { margin-bottom: 4px; } .plansSummaryTotalValue { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; } .plansSummaryTotalAmount { font-size: 2.3em; } .plansSummaryTotalSymbol { margin-left: 6px; font-size: 1.5em; } .plansSummaryTotalText { font-size: 0.85em; margin-left: 15px; } .plansSummarySubmit { margin-top: 20px; } .plansSummarySubmitButton { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; background-color: #0068c7; padding: 10px 20px; border-radius: 4px; cursor: pointer; border: 0px; } .plansSummarySubmitButton i { font-size: 2em; vertical-align: middle; margin-right: 10px; opacity: 0.7; color: #fff; } .plansSummarySubmitButtonText { color: #fff; opacity: 1; } .plansSummarySubmitButton, .plansSummarySubmitButton i, .plansSummarySubmitButtonText { -moz-transition: all 300ms; -webkit-transition: all 300ms; } .plansSummarySubmitButton:hover { background-color: #02529a; } .plansSummarySubmitButton:hover i, .plansSummarySubmitButton:hover .plansSummarySubmitButtonText { opacity: 1; } .plansSummaryFree .plansSummarySubmitButton { background-color: var(--plan1-color); } .plansSignup .plansGridPriceButton { display: none; } .plansSignup .plansSummarySignup { display: block !important; } .plansCost .plansSummaryCost { display: block; } .plansCost .plansSummaryCost { display: block; } @media (max-width: 768px) { .panelMobile { padding: 0px; } .plansBox { box-sizing: unset; border: unset; box-shadow: unset; max-width: unset; margin: unset; border-radius: unset; } .plansHeader { padding: 20px; text-align: center; } .plansHeaderTitle { font-size: 1.5em; color: unset; } .plansGrid { padding: 0 20px; } .plansGridHeader { display: none; } .plansGridRow, .plansGridFooter { display: flex; flex-direction: column; margin-bottom: 1rem; } .plansGridFeature { border-bottom: unset; } .plansGridPlan { display: flex; align-items: center; border: 1px solid #ddd; margin-bottom: 10px; padding: 0.5rem; position: relative; justify-content: flex-start; border-radius: 4px; } .plansGridPlan::before { content: attr(data-plan-title); font-weight: bold; color: #333; margin-right: 0.5rem; display: inline-block; width: 100%; } .plansGridPlan1.plansGridPlanSelected { border: 1px solid var(--plan1-color); } .plansGridPlan2.plansGridPlanSelected { border: 1px solid var(--plan2-color); } .plansGridPlan3.plansGridPlanSelected { border: 1px solid var(--plan3-color); } .plansGridFooter .plansGridPlan { border-radius: 4px !important; margin-bottom: 15px; padding: 20px; } .plansGridFooter .plansGridPlan::before { font-size: 1.3em; margin-bottom: 10px; font-weight: normal; color: var(--color-2); } .plansGridFooter .plansGridPlan1.plansGridPlanSelected { border: 1px solid var(--plan1-color); } .plansGridFooter .plansGridPlan2.plansGridPlanSelected { border: 1px solid var(--plan2-color); } .plansGridFooter .plansGridPlan3.plansGridPlanSelected { border: 1px solid var(--plan3-color); } .plansSummaryForm { display: flex; flex-direction: column; flex-wrap: nowrap; } .plansSummaryItems { width: unset; margin-right: unset; } .plansSummaryTotal { width: unset; margin-top: 20px; } .plansModal { padding: 0px; } .plansModalPayment .plansModalBox { height: 100%; border-radius: unset; padding: 0px; width: 100%; } }