From cfb5fc4ef1b826ef3f571e9f772ed38e0975be65 Mon Sep 17 00:00:00 2001 From: mahdieftekhaari Date: Fri, 20 Dec 2024 12:03:45 +0330 Subject: [PATCH] testing deploy --- index.html | 342 +- package.json | 2 +- public/{img => images}/1.png | Bin public/{img => images}/13.png | Bin public/{img => images}/16.png | Bin public/{img => images}/17.jpg | Bin public/{img => images}/17.png | Bin public/{img => images}/2.png | Bin public/{img => images}/5.png | Bin public/{img => images}/6.png | Bin .../Reunion-Ventures_Organogram.png | Bin public/{img => images}/Secure-payments.png | Bin public/{img => images}/about-us.png | Bin public/{img => images}/account.png | Bin public/{img => images}/affection.png | Bin .../afm-warning-xlarge-2048x109.jpg | Bin public/{img => images}/afm.png | Bin public/{img => images}/appointment.png | Bin public/{img => images}/arrow.png | Bin public/{img => images}/calc-2.png | Bin public/{img => images}/calc-img.png | Bin public/{img => images}/check.png | Bin public/{img => images}/communication.png | Bin .../contact-me-in-new-items.png | Bin public/{img => images}/contact-me.png | Bin public/{img => images}/five-steps.png | Bin public/{img => images}/hero.png | Bin public/{img => images}/hero_img.png | Bin public/{img => images}/house.png | Bin .../installatie-modulaire-zorgwoning.png | Bin public/{img => images}/installation.png | Bin public/{img => images}/invest-1.png | Bin public/{img => images}/invest-2.png | Bin public/{img => images}/invest-3.png | Bin public/{img => images}/invest-4.png | Bin public/{img => images}/invest-invest.png | Bin public/{img => images}/invest.png | Bin .../investeren-nederlandse-woningen-2.png | Bin .../investeren-nederlandse-woningen.png | Bin .../investeren-vastgoed-obligaties.png | Bin .../investeringen-in-verhuurd-vastgoed.png | Bin public/{img => images}/investment.png | Bin .../kantoor-thuisborg-finance.jpg | Bin .../kantoor-thuisborg-finance.png | Bin public/images/logo.png | Bin 6907 -> 25630 bytes public/{img => images}/mail.png | Bin public/{img => images}/materials.png | Bin public/{img => images}/message.png | Bin public/{img => images}/mijn-thuisborg.png | Bin public/{img => images}/mod-1.png | Bin public/{img => images}/mod-2.png | Bin .../moderne-modulaire-zorgwoning.png | Bin ...ulaire-zorgwoning-afwerkingsmaterialen.png | Bin .../modulaire-zorgwoning-model45.png | Bin .../modulaire-zorgwoning-model63.png | Bin .../modulaire-zorgwoningen-thuisborg.png | Bin .../modulaire-zorgwoningen.png | Bin public/{img => images}/modular-houses.png | Bin public/{img => images}/obligaties-tb19.png | Bin public/{img => images}/obligaties-tb20.png | Bin .../offering-investment-opp.jpg | Bin .../onze-vastgoedmaatschappijen.PNG | Bin .../overwaarde-huis-opnemen.png | Bin public/{img => images}/overwaarde-opnemen.jpg | Bin public/{img => images}/overwaarde-opnemen.png | Bin .../overwaarde-verzilveren-thuisborg.png | Bin .../{img => images}/partners/alles-zelf.png | Bin .../{img => images}/partners/borgplaats.png | Bin public/{img => images}/partners/erinthuis.png | Bin public/{img => images}/partners/goedthuis.png | Bin public/{img => images}/partners/hart.png | Bin public/{img => images}/partners/hestiva.png | Bin public/{img => images}/partners/vondellan.png | Bin public/{img => images}/payment-protection.png | Bin public/{img => images}/payment-sent.png | Bin public/{img => images}/persoonlijk-advies.png | Bin public/{img => images}/phone.png | Bin ...attegrond-modulaire-zorgwoning-model63.jpg | Bin .../pop-up/modal-26-10-2023.jpg | Bin public/{img => images}/popup-sept-2022.jpg | Bin public/{img => images}/property-item.jpg | Bin public/{img => images}/redeem-1.png | Bin public/{img => images}/redeem-2.png | Bin public/{img => images}/redeem-4.png | Bin public/{img => images}/redeem-4.psd | Bin public/{img => images}/redeem-5.png | Bin public/{img => images}/redeem.png | Bin public/{img => images}/request-bg.jpg | Bin public/{img => images}/schermafbeelding .png | Bin public/{img => images}/schermafbeelding.png | Bin public/{img => images}/search.png | Bin public/{img => images}/sponsor-1.png | Bin public/{img => images}/sponsor-2.png | Bin .../stappenplan-woningwaarde-verzilveren.png | Bin public/{img => images}/star.png | Bin public/{img => images}/tablet-back.png | Bin .../{img => images}/thuisborg-organogram.jpg | Bin public/{img => images}/thuisborg-tb.png | Bin public/{img => images}/v2/aangeboden.jpg | Bin public/{img => images}/v2/arrow-down.png | Bin public/{img => images}/v2/bieden.jpg | Bin .../{img => images}/v2/calc-imgs/analysis.svg | 0 public/{img => images}/v2/calc-imgs/call.svg | 0 .../{img => images}/v2/calc-imgs/duration.svg | 0 public/{img => images}/v2/calc-imgs/house.svg | 0 .../v2/calc-imgs/investment.svg | 0 public/{img => images}/v2/calendar-icon.svg | 0 public/{img => images}/v2/check-black.svg | 0 public/{img => images}/v2/check-salad.svg | 0 public/{img => images}/v2/check-white.svg | 0 public/{img => images}/v2/check.svg | 0 public/{img => images}/v2/contact-image.jpg | Bin public/{img => images}/v2/icon-deal.png | Bin .../{img => images}/v2/icon-house-auction.png | Bin .../v2/icon-house-exchange.png | Bin .../v2/icon-house-guarantee.png | Bin public/{img => images}/v2/icon-house.png | Bin public/{img => images}/v2/mortgage.png | Bin .../{img => images}/v2/overwaarde-opnemen.jpg | Bin public/{img => images}/v2/property-item.jpg | Bin public/{img => images}/v2/qa.png | Bin public/{img => images}/v2/river-home.jpg | Bin public/{img => images}/v2/shield.svg | 0 .../{img => images}/v2/smiling-older-man.jpg | Bin public/{img => images}/v2/wish-list.png | Bin .../verzilver-woningwaarde.png | Bin public/{img => images}/verzilverplan.png | Bin .../woningwaarde-calculator.jpg | Bin .../woningwaarde-calculator.png | Bin .../woningwaarde-estate-plan.png | Bin ...ningwaarde-vastgoed-obligaties-serie16.png | Bin ...ningwaarde-vastgoed-obligaties-serie17.png | Bin .../woningwaarde-verzilverplan.png | Bin public/{img => images}/z-45.png | Bin public/{img => images}/z-63.png | Bin public/{img => images}/z45-double-1.png | Bin public/{img => images}/z45-double-2.png | Bin public/{img => images}/z45-map.png | Bin public/{img => images}/zorgwoning.jpg | Bin public/img/logo.png | Bin 25630 -> 0 bytes public/partials.html | 313 +- src/js/app.js | 624 ++++ src/js/components/Contact.vue | 107 + src/js/components/CurrencyInput.vue | 27 + src/js/components/Hamburger.vue | 80 +- src/js/components/Loading.vue | 62 + src/js/components/MiniCalculator.vue | 139 + src/js/components/Modal.vue | 61 + src/js/components/Mollie.vue | 151 + src/js/components/MollieRedirect.vue | 242 ++ src/js/components/Overzicht.vue | 228 ++ src/js/components/SteppedFormHandler.vue | 310 ++ src/js/components/TBRegister19.vue | 2057 +++++++++++ src/js/components/TBRegister20.vue | 2037 +++++++++++ src/js/components/TBRegister21.vue | 2064 +++++++++++ src/js/components/TBRegister22.vue | 2037 +++++++++++ src/js/components/TBRegister23.vue | 2073 +++++++++++ src/js/components/TBRegister24.vue | 2037 +++++++++++ src/js/components/TBRegisterSteps19.vue | 1801 ++++++++++ src/js/components/ZohoRule.vue | 82 + src/js/components/ZohoSignature.vue | 71 + src/js/components/calculator.vue | 925 +++++ src/js/components/calculator2024.vue | 653 ++++ src/js/components/commentSlider.vue | 84 + src/js/components/formHandler.vue | 193 ++ src/js/components/popUp.vue | 117 + src/js/components/priceInput.vue | 52 + src/js/components/registeration.vue | 400 +++ src/js/directives/animate.vue | 32 + src/js/directives/tabs.vue | 114 + src/js/directives/toggler.vue | 29 + src/js/helpers/zoho_signature.js | 181 + src/js/main.js | 7 - src/js/store/calculator_module.js | 27 + src/js/store/index.js | 46 +- src/js/store/store.js | 214 ++ src/styles/app.scss | 0 src/styles/components/_btn.scss | 108 + src/styles/components/_calculator-2024.scss | 735 ++++ src/styles/components/_calculator.scss | 431 +++ src/styles/components/_form-handler.scss | 33 + src/styles/components/_hamburger.scss | 67 + src/styles/components/_index.scss | 19 + src/styles/components/_input.scss | 23 + src/styles/components/_load_spinner.scss | 35 + src/styles/components/_loading.scss | 48 + src/styles/components/_message.scss | 34 + src/styles/components/_min-calc.scss | 189 + src/styles/components/_modal.scss | 185 + src/styles/components/_property-items.scss | 122 + src/styles/components/_share.scss | 71 + src/styles/components/_snack.scss | 120 + src/styles/components/_tabs.scss | 67 + src/styles/components/_tooltip.scss | 112 + src/styles/components/_users-comments.scss | 164 + src/styles/layouts/_catalogs.scss | 441 +++ src/styles/layouts/_form-style12.scss | 62 + src/styles/layouts/_hero-3.scss | 88 + src/styles/layouts/_hero-system-v2.scss | 401 +++ src/styles/layouts/_index.scss | 17 + src/styles/layouts/_investment-steps.scss | 83 + src/styles/layouts/_layout-10.scss | 101 + src/styles/layouts/_layout-11.scss | 157 + src/styles/layouts/_layout-8.scss | 138 + src/styles/layouts/_layout-9.scss | 81 + src/styles/layouts/_offer-comments.scss | 124 + src/styles/layouts/_overzicht.scss | 317 ++ src/styles/layouts/_packages-v2-b.scss | 155 + src/styles/layouts/_packages-v2.scss | 138 + src/styles/layouts/_pagination.scss | 63 + src/styles/layouts/_register.scss | 940 +++++ src/styles/main.scss | 18 +- src/styles/partials/_5-steps.scss | 194 ++ src/styles/partials/_asym-image-text.scss | 97 + src/styles/partials/_blog-post.scss | 246 ++ src/styles/partials/_breadcrumb.scss | 71 + src/styles/partials/_calculator.scss | 33 + src/styles/partials/_categories.scss | 59 + src/styles/partials/_centerized-section.scss | 33 + src/styles/partials/_contact-me.scss | 111 + src/styles/partials/_contact-us.scss | 308 ++ src/styles/partials/_faq.scss | 177 + src/styles/partials/_footer.scss | 259 ++ src/styles/partials/_hero.scss | 445 +++ src/styles/partials/_img-text-aligner.scss | 142 + src/styles/partials/_index.scss | 39 + src/styles/partials/_inlin-cta.scss | 119 + src/styles/partials/_invest.scss | 160 + src/styles/partials/_layout-1.scss | 66 + src/styles/partials/_layout-2.scss | 45 + src/styles/partials/_layout-3.scss | 69 + src/styles/partials/_layout-4.scss | 79 + src/styles/partials/_layout-5.scss | 223 ++ src/styles/partials/_layout-6.scss | 150 + src/styles/partials/_layout-7.scss | 145 + src/styles/partials/_load-spinner.scss | 35 - src/styles/partials/_modular-align.scss | 66 + src/styles/partials/_modular-houses.scss | 146 + src/styles/partials/_modular-item.scss | 240 ++ src/styles/partials/_mottos.scss | 18 + src/styles/partials/_nav.scss | 485 +++ src/styles/partials/_new-calc-home.scss | 33 + src/styles/partials/_new-items.scss | 21 + src/styles/partials/_offering-properties.scss | 176 + src/styles/partials/_packages.scss | 173 + src/styles/partials/_partners.scss | 79 + src/styles/partials/_pop-up.scss | 201 ++ src/styles/partials/_redeem.scss | 167 + src/styles/partials/_register-page.scss | 328 ++ src/styles/partials/_side-by-side.scss | 99 + src/styles/partials/_vacancies.scss | 35 + src/styles/utils/_elements.scss | 751 ++++ src/styles/utils/_index.scss | 5 + src/styles/utils/_mixins.scss | 26 + src/styles/utils/_rules.scss | 79 + src/styles/utils/_settings.scss | 51 + src/styles/utils/_utils.scss | 17 - src/styles/utils/_variables.scss | 140 + src/styles/utils/reset/reset.mobile.css | 394 +++ src/styles/utils/reset/reset.pc.css | 490 +++ src/styles/vendors/_animate.scss | 3045 +++++++++++++++++ src/styles/vendors/animate.min.css | 7 + 262 files changed, 36307 insertions(+), 178 deletions(-) rename public/{img => images}/1.png (100%) rename public/{img => images}/13.png (100%) rename public/{img => images}/16.png (100%) rename public/{img => images}/17.jpg (100%) rename public/{img => images}/17.png (100%) rename public/{img => images}/2.png (100%) rename public/{img => images}/5.png (100%) rename public/{img => images}/6.png (100%) rename public/{img => images}/Reunion-Ventures_Organogram.png (100%) rename public/{img => images}/Secure-payments.png (100%) rename public/{img => images}/about-us.png (100%) rename public/{img => images}/account.png (100%) rename public/{img => images}/affection.png (100%) rename public/{img => images}/afm-warning-xlarge-2048x109.jpg (100%) rename public/{img => images}/afm.png (100%) rename public/{img => images}/appointment.png (100%) rename public/{img => images}/arrow.png (100%) rename public/{img => images}/calc-2.png (100%) rename public/{img => images}/calc-img.png (100%) rename public/{img => images}/check.png (100%) rename public/{img => images}/communication.png (100%) rename public/{img => images}/contact-me-in-new-items.png (100%) rename public/{img => images}/contact-me.png (100%) rename public/{img => images}/five-steps.png (100%) rename public/{img => images}/hero.png (100%) rename public/{img => images}/hero_img.png (100%) rename public/{img => images}/house.png (100%) rename public/{img => images}/installatie-modulaire-zorgwoning.png (100%) rename public/{img => images}/installation.png (100%) rename public/{img => images}/invest-1.png (100%) rename public/{img => images}/invest-2.png (100%) rename public/{img => images}/invest-3.png (100%) rename public/{img => images}/invest-4.png (100%) rename public/{img => images}/invest-invest.png (100%) rename public/{img => images}/invest.png (100%) rename public/{img => images}/investeren-nederlandse-woningen-2.png (100%) rename public/{img => images}/investeren-nederlandse-woningen.png (100%) rename public/{img => images}/investeren-vastgoed-obligaties.png (100%) rename public/{img => images}/investeringen-in-verhuurd-vastgoed.png (100%) rename public/{img => images}/investment.png (100%) rename public/{img => images}/kantoor-thuisborg-finance.jpg (100%) rename public/{img => images}/kantoor-thuisborg-finance.png (100%) rename public/{img => images}/mail.png (100%) rename public/{img => images}/materials.png (100%) rename public/{img => images}/message.png (100%) rename public/{img => images}/mijn-thuisborg.png (100%) rename public/{img => images}/mod-1.png (100%) rename public/{img => images}/mod-2.png (100%) rename public/{img => images}/moderne-modulaire-zorgwoning.png (100%) rename public/{img => images}/modulaire-zorgwoning-afwerkingsmaterialen.png (100%) rename public/{img => images}/modulaire-zorgwoning-model45.png (100%) rename public/{img => images}/modulaire-zorgwoning-model63.png (100%) rename public/{img => images}/modulaire-zorgwoningen-thuisborg.png (100%) rename public/{img => images}/modulaire-zorgwoningen.png (100%) rename public/{img => images}/modular-houses.png (100%) rename public/{img => images}/obligaties-tb19.png (100%) rename public/{img => images}/obligaties-tb20.png (100%) rename public/{img => images}/offering-investment-opp.jpg (100%) rename public/{img => images}/onze-vastgoedmaatschappijen.PNG (100%) rename public/{img => images}/overwaarde-huis-opnemen.png (100%) rename public/{img => images}/overwaarde-opnemen.jpg (100%) rename public/{img => images}/overwaarde-opnemen.png (100%) rename public/{img => images}/overwaarde-verzilveren-thuisborg.png (100%) rename public/{img => images}/partners/alles-zelf.png (100%) rename public/{img => images}/partners/borgplaats.png (100%) rename public/{img => images}/partners/erinthuis.png (100%) rename public/{img => images}/partners/goedthuis.png (100%) rename public/{img => images}/partners/hart.png (100%) rename public/{img => images}/partners/hestiva.png (100%) rename public/{img => images}/partners/vondellan.png (100%) rename public/{img => images}/payment-protection.png (100%) rename public/{img => images}/payment-sent.png (100%) rename public/{img => images}/persoonlijk-advies.png (100%) rename public/{img => images}/phone.png (100%) rename public/{img => images}/plattegrond-modulaire-zorgwoning-model63.jpg (100%) rename public/{img => images}/pop-up/modal-26-10-2023.jpg (100%) rename public/{img => images}/popup-sept-2022.jpg (100%) rename public/{img => images}/property-item.jpg (100%) rename public/{img => images}/redeem-1.png (100%) rename public/{img => images}/redeem-2.png (100%) rename public/{img => images}/redeem-4.png (100%) rename public/{img => images}/redeem-4.psd (100%) rename public/{img => images}/redeem-5.png (100%) rename public/{img => images}/redeem.png (100%) rename public/{img => images}/request-bg.jpg (100%) rename public/{img => images}/schermafbeelding .png (100%) rename public/{img => images}/schermafbeelding.png (100%) rename public/{img => images}/search.png (100%) rename public/{img => images}/sponsor-1.png (100%) rename public/{img => images}/sponsor-2.png (100%) rename public/{img => images}/stappenplan-woningwaarde-verzilveren.png (100%) rename public/{img => images}/star.png (100%) rename public/{img => images}/tablet-back.png (100%) rename public/{img => images}/thuisborg-organogram.jpg (100%) rename public/{img => images}/thuisborg-tb.png (100%) rename public/{img => images}/v2/aangeboden.jpg (100%) rename public/{img => images}/v2/arrow-down.png (100%) rename public/{img => images}/v2/bieden.jpg (100%) rename public/{img => images}/v2/calc-imgs/analysis.svg (100%) rename public/{img => images}/v2/calc-imgs/call.svg (100%) rename public/{img => images}/v2/calc-imgs/duration.svg (100%) rename public/{img => images}/v2/calc-imgs/house.svg (100%) rename public/{img => images}/v2/calc-imgs/investment.svg (100%) rename public/{img => images}/v2/calendar-icon.svg (100%) rename public/{img => images}/v2/check-black.svg (100%) rename public/{img => images}/v2/check-salad.svg (100%) rename public/{img => images}/v2/check-white.svg (100%) rename public/{img => images}/v2/check.svg (100%) rename public/{img => images}/v2/contact-image.jpg (100%) rename public/{img => images}/v2/icon-deal.png (100%) rename public/{img => images}/v2/icon-house-auction.png (100%) rename public/{img => images}/v2/icon-house-exchange.png (100%) rename public/{img => images}/v2/icon-house-guarantee.png (100%) rename public/{img => images}/v2/icon-house.png (100%) rename public/{img => images}/v2/mortgage.png (100%) rename public/{img => images}/v2/overwaarde-opnemen.jpg (100%) rename public/{img => images}/v2/property-item.jpg (100%) rename public/{img => images}/v2/qa.png (100%) rename public/{img => images}/v2/river-home.jpg (100%) rename public/{img => images}/v2/shield.svg (100%) rename public/{img => images}/v2/smiling-older-man.jpg (100%) rename public/{img => images}/v2/wish-list.png (100%) rename public/{img => images}/verzilver-woningwaarde.png (100%) rename public/{img => images}/verzilverplan.png (100%) rename public/{img => images}/woningwaarde-calculator.jpg (100%) rename public/{img => images}/woningwaarde-calculator.png (100%) rename public/{img => images}/woningwaarde-estate-plan.png (100%) rename public/{img => images}/woningwaarde-vastgoed-obligaties-serie16.png (100%) rename public/{img => images}/woningwaarde-vastgoed-obligaties-serie17.png (100%) rename public/{img => images}/woningwaarde-verzilverplan.png (100%) rename public/{img => images}/z-45.png (100%) rename public/{img => images}/z-63.png (100%) rename public/{img => images}/z45-double-1.png (100%) rename public/{img => images}/z45-double-2.png (100%) rename public/{img => images}/z45-map.png (100%) rename public/{img => images}/zorgwoning.jpg (100%) delete mode 100644 public/img/logo.png create mode 100644 src/js/app.js create mode 100644 src/js/components/Contact.vue create mode 100644 src/js/components/CurrencyInput.vue create mode 100644 src/js/components/Loading.vue create mode 100644 src/js/components/MiniCalculator.vue create mode 100644 src/js/components/Modal.vue create mode 100644 src/js/components/Mollie.vue create mode 100644 src/js/components/MollieRedirect.vue create mode 100644 src/js/components/Overzicht.vue create mode 100644 src/js/components/SteppedFormHandler.vue create mode 100644 src/js/components/TBRegister19.vue create mode 100644 src/js/components/TBRegister20.vue create mode 100644 src/js/components/TBRegister21.vue create mode 100644 src/js/components/TBRegister22.vue create mode 100644 src/js/components/TBRegister23.vue create mode 100644 src/js/components/TBRegister24.vue create mode 100644 src/js/components/TBRegisterSteps19.vue create mode 100644 src/js/components/ZohoRule.vue create mode 100644 src/js/components/ZohoSignature.vue create mode 100644 src/js/components/calculator.vue create mode 100644 src/js/components/calculator2024.vue create mode 100644 src/js/components/commentSlider.vue create mode 100644 src/js/components/formHandler.vue create mode 100644 src/js/components/popUp.vue create mode 100644 src/js/components/priceInput.vue create mode 100644 src/js/components/registeration.vue create mode 100644 src/js/directives/animate.vue create mode 100644 src/js/directives/tabs.vue create mode 100644 src/js/directives/toggler.vue create mode 100644 src/js/helpers/zoho_signature.js create mode 100644 src/js/store/calculator_module.js create mode 100644 src/js/store/store.js create mode 100644 src/styles/app.scss create mode 100644 src/styles/components/_calculator-2024.scss create mode 100644 src/styles/components/_calculator.scss create mode 100644 src/styles/components/_form-handler.scss create mode 100644 src/styles/components/_hamburger.scss create mode 100644 src/styles/components/_index.scss create mode 100644 src/styles/components/_input.scss create mode 100644 src/styles/components/_load_spinner.scss create mode 100644 src/styles/components/_loading.scss create mode 100644 src/styles/components/_message.scss create mode 100644 src/styles/components/_min-calc.scss create mode 100644 src/styles/components/_modal.scss create mode 100644 src/styles/components/_property-items.scss create mode 100644 src/styles/components/_share.scss create mode 100644 src/styles/components/_snack.scss create mode 100644 src/styles/components/_tabs.scss create mode 100644 src/styles/components/_tooltip.scss create mode 100644 src/styles/components/_users-comments.scss create mode 100644 src/styles/layouts/_catalogs.scss create mode 100644 src/styles/layouts/_form-style12.scss create mode 100644 src/styles/layouts/_hero-3.scss create mode 100644 src/styles/layouts/_hero-system-v2.scss create mode 100644 src/styles/layouts/_index.scss create mode 100644 src/styles/layouts/_investment-steps.scss create mode 100644 src/styles/layouts/_layout-10.scss create mode 100644 src/styles/layouts/_layout-11.scss create mode 100644 src/styles/layouts/_layout-8.scss create mode 100644 src/styles/layouts/_layout-9.scss create mode 100644 src/styles/layouts/_offer-comments.scss create mode 100644 src/styles/layouts/_overzicht.scss create mode 100644 src/styles/layouts/_packages-v2-b.scss create mode 100644 src/styles/layouts/_packages-v2.scss create mode 100644 src/styles/layouts/_pagination.scss create mode 100644 src/styles/layouts/_register.scss create mode 100644 src/styles/partials/_5-steps.scss create mode 100644 src/styles/partials/_asym-image-text.scss create mode 100644 src/styles/partials/_blog-post.scss create mode 100644 src/styles/partials/_breadcrumb.scss create mode 100644 src/styles/partials/_calculator.scss create mode 100644 src/styles/partials/_categories.scss create mode 100644 src/styles/partials/_centerized-section.scss create mode 100644 src/styles/partials/_contact-me.scss create mode 100644 src/styles/partials/_contact-us.scss create mode 100644 src/styles/partials/_faq.scss create mode 100644 src/styles/partials/_footer.scss create mode 100644 src/styles/partials/_hero.scss create mode 100644 src/styles/partials/_img-text-aligner.scss create mode 100644 src/styles/partials/_index.scss create mode 100644 src/styles/partials/_inlin-cta.scss create mode 100644 src/styles/partials/_invest.scss create mode 100644 src/styles/partials/_layout-1.scss create mode 100644 src/styles/partials/_layout-2.scss create mode 100644 src/styles/partials/_layout-3.scss create mode 100644 src/styles/partials/_layout-4.scss create mode 100644 src/styles/partials/_layout-5.scss create mode 100644 src/styles/partials/_layout-6.scss create mode 100644 src/styles/partials/_layout-7.scss delete mode 100644 src/styles/partials/_load-spinner.scss create mode 100644 src/styles/partials/_modular-align.scss create mode 100644 src/styles/partials/_modular-houses.scss create mode 100644 src/styles/partials/_modular-item.scss create mode 100644 src/styles/partials/_mottos.scss create mode 100644 src/styles/partials/_nav.scss create mode 100644 src/styles/partials/_new-calc-home.scss create mode 100644 src/styles/partials/_new-items.scss create mode 100644 src/styles/partials/_offering-properties.scss create mode 100644 src/styles/partials/_packages.scss create mode 100644 src/styles/partials/_partners.scss create mode 100644 src/styles/partials/_pop-up.scss create mode 100644 src/styles/partials/_redeem.scss create mode 100644 src/styles/partials/_register-page.scss create mode 100644 src/styles/partials/_side-by-side.scss create mode 100644 src/styles/partials/_vacancies.scss create mode 100644 src/styles/utils/_elements.scss create mode 100644 src/styles/utils/_index.scss create mode 100644 src/styles/utils/_mixins.scss create mode 100644 src/styles/utils/_rules.scss create mode 100644 src/styles/utils/_settings.scss delete mode 100644 src/styles/utils/_utils.scss create mode 100644 src/styles/utils/_variables.scss create mode 100644 src/styles/utils/reset/reset.mobile.css create mode 100644 src/styles/utils/reset/reset.pc.css create mode 100644 src/styles/vendors/_animate.scss create mode 100644 src/styles/vendors/animate.min.css diff --git a/index.html b/index.html index b9445e4f..34316788 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,9 @@ - + - - ---page title--- - + Thuisborg @@ -42,7 +32,7 @@ - + + + + + + + + + + + + + + + +
+ + +
+ + + + + diff --git a/package.json b/package.json index 7adbb5e9..c69173cd 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "cms-frontend-boilerplate", + "name": "Thuisborg", "private": true, "version": "0.0.0", "type": "module", diff --git a/public/img/1.png b/public/images/1.png similarity index 100% rename from public/img/1.png rename to public/images/1.png diff --git a/public/img/13.png b/public/images/13.png similarity index 100% rename from public/img/13.png rename to public/images/13.png diff --git a/public/img/16.png b/public/images/16.png similarity index 100% rename from public/img/16.png rename to public/images/16.png diff --git a/public/img/17.jpg b/public/images/17.jpg similarity index 100% rename from public/img/17.jpg rename to public/images/17.jpg diff --git a/public/img/17.png b/public/images/17.png similarity index 100% rename from public/img/17.png rename to public/images/17.png diff --git a/public/img/2.png b/public/images/2.png similarity index 100% rename from public/img/2.png rename to public/images/2.png diff --git a/public/img/5.png b/public/images/5.png similarity index 100% rename from public/img/5.png rename to public/images/5.png diff --git a/public/img/6.png b/public/images/6.png similarity index 100% rename from public/img/6.png rename to public/images/6.png diff --git a/public/img/Reunion-Ventures_Organogram.png b/public/images/Reunion-Ventures_Organogram.png similarity index 100% rename from public/img/Reunion-Ventures_Organogram.png rename to public/images/Reunion-Ventures_Organogram.png diff --git a/public/img/Secure-payments.png b/public/images/Secure-payments.png similarity index 100% rename from public/img/Secure-payments.png rename to public/images/Secure-payments.png diff --git a/public/img/about-us.png b/public/images/about-us.png similarity index 100% rename from public/img/about-us.png rename to public/images/about-us.png diff --git a/public/img/account.png b/public/images/account.png similarity index 100% rename from public/img/account.png rename to public/images/account.png diff --git a/public/img/affection.png b/public/images/affection.png similarity index 100% rename from public/img/affection.png rename to public/images/affection.png diff --git a/public/img/afm-warning-xlarge-2048x109.jpg b/public/images/afm-warning-xlarge-2048x109.jpg similarity index 100% rename from public/img/afm-warning-xlarge-2048x109.jpg rename to public/images/afm-warning-xlarge-2048x109.jpg diff --git a/public/img/afm.png b/public/images/afm.png similarity index 100% rename from public/img/afm.png rename to public/images/afm.png diff --git a/public/img/appointment.png b/public/images/appointment.png similarity index 100% rename from public/img/appointment.png rename to public/images/appointment.png diff --git a/public/img/arrow.png b/public/images/arrow.png similarity index 100% rename from public/img/arrow.png rename to public/images/arrow.png diff --git a/public/img/calc-2.png b/public/images/calc-2.png similarity index 100% rename from public/img/calc-2.png rename to public/images/calc-2.png diff --git a/public/img/calc-img.png b/public/images/calc-img.png similarity index 100% rename from public/img/calc-img.png rename to public/images/calc-img.png diff --git a/public/img/check.png b/public/images/check.png similarity index 100% rename from public/img/check.png rename to public/images/check.png diff --git a/public/img/communication.png b/public/images/communication.png similarity index 100% rename from public/img/communication.png rename to public/images/communication.png diff --git a/public/img/contact-me-in-new-items.png b/public/images/contact-me-in-new-items.png similarity index 100% rename from public/img/contact-me-in-new-items.png rename to public/images/contact-me-in-new-items.png diff --git a/public/img/contact-me.png b/public/images/contact-me.png similarity index 100% rename from public/img/contact-me.png rename to public/images/contact-me.png diff --git a/public/img/five-steps.png b/public/images/five-steps.png similarity index 100% rename from public/img/five-steps.png rename to public/images/five-steps.png diff --git a/public/img/hero.png b/public/images/hero.png similarity index 100% rename from public/img/hero.png rename to public/images/hero.png diff --git a/public/img/hero_img.png b/public/images/hero_img.png similarity index 100% rename from public/img/hero_img.png rename to public/images/hero_img.png diff --git a/public/img/house.png b/public/images/house.png similarity index 100% rename from public/img/house.png rename to public/images/house.png diff --git a/public/img/installatie-modulaire-zorgwoning.png b/public/images/installatie-modulaire-zorgwoning.png similarity index 100% rename from public/img/installatie-modulaire-zorgwoning.png rename to public/images/installatie-modulaire-zorgwoning.png diff --git a/public/img/installation.png b/public/images/installation.png similarity index 100% rename from public/img/installation.png rename to public/images/installation.png diff --git a/public/img/invest-1.png b/public/images/invest-1.png similarity index 100% rename from public/img/invest-1.png rename to public/images/invest-1.png diff --git a/public/img/invest-2.png b/public/images/invest-2.png similarity index 100% rename from public/img/invest-2.png rename to public/images/invest-2.png diff --git a/public/img/invest-3.png b/public/images/invest-3.png similarity index 100% rename from public/img/invest-3.png rename to public/images/invest-3.png diff --git a/public/img/invest-4.png b/public/images/invest-4.png similarity index 100% rename from public/img/invest-4.png rename to public/images/invest-4.png diff --git a/public/img/invest-invest.png b/public/images/invest-invest.png similarity index 100% rename from public/img/invest-invest.png rename to public/images/invest-invest.png diff --git a/public/img/invest.png b/public/images/invest.png similarity index 100% rename from public/img/invest.png rename to public/images/invest.png diff --git a/public/img/investeren-nederlandse-woningen-2.png b/public/images/investeren-nederlandse-woningen-2.png similarity index 100% rename from public/img/investeren-nederlandse-woningen-2.png rename to public/images/investeren-nederlandse-woningen-2.png diff --git a/public/img/investeren-nederlandse-woningen.png b/public/images/investeren-nederlandse-woningen.png similarity index 100% rename from public/img/investeren-nederlandse-woningen.png rename to public/images/investeren-nederlandse-woningen.png diff --git a/public/img/investeren-vastgoed-obligaties.png b/public/images/investeren-vastgoed-obligaties.png similarity index 100% rename from public/img/investeren-vastgoed-obligaties.png rename to public/images/investeren-vastgoed-obligaties.png diff --git a/public/img/investeringen-in-verhuurd-vastgoed.png b/public/images/investeringen-in-verhuurd-vastgoed.png similarity index 100% rename from public/img/investeringen-in-verhuurd-vastgoed.png rename to public/images/investeringen-in-verhuurd-vastgoed.png diff --git a/public/img/investment.png b/public/images/investment.png similarity index 100% rename from public/img/investment.png rename to public/images/investment.png diff --git a/public/img/kantoor-thuisborg-finance.jpg b/public/images/kantoor-thuisborg-finance.jpg similarity index 100% rename from public/img/kantoor-thuisborg-finance.jpg rename to public/images/kantoor-thuisborg-finance.jpg diff --git a/public/img/kantoor-thuisborg-finance.png b/public/images/kantoor-thuisborg-finance.png similarity index 100% rename from public/img/kantoor-thuisborg-finance.png rename to public/images/kantoor-thuisborg-finance.png diff --git a/public/images/logo.png b/public/images/logo.png index 1d6ebdce13003219b68e0718711b216dfa1a7a92..0db8f29efe93aff59316f69cc3cc506cc744595a 100644 GIT binary patch literal 25630 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 BHBvC0Sj%y1kxWc5kz1X0`8++56mc&OPVq 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 - - +
+
+
+ Klanten waarderen ons met een 9.0 +
+ + + + + +
+ +
+
+
    +
  • +
    • +
+
+
+ +
+
+
+ +
+ +
+ +
+ + +
+
+ + +
+
+
+ + +
\ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 00000000..3443c863 --- /dev/null +++ b/src/js/app.js @@ -0,0 +1,624 @@ +window.Vue = require("vue").default; +window.Axios = require('axios'); +window.Vuex = require('vuex'); + +import Datepicker from 'vuejs-datepicker'; +import {Datetime} from 'vue-datetime'; +import store from './store/store'; +import VTooltip from 'v-tooltip'; +import VueAgile from 'vue-agile'; +import HighchartsVue from 'highcharts-vue'; +import VuePersianDatetimePicker from 'vue-persian-datetime-picker'; +import VueSlider from 'vue-slider-component'; +import CurrencyInput from './components/CurrencyInput'; + +let scrollTo = require('vue-scrollto'); + + +Vue.use(HighchartsVue); +Vue.use(Vuex); +Vue.use(VueAgile); +Vue.use(VTooltip); +import CoolLightBox from 'vue-cool-lightbox'; + +Vue.use(require('vue-cookies')); +Vue.use(VuePersianDatetimePicker, { + name: 'custom-date-picker', + props: { + format: 'YYYY-MM-DD', + displayFormat: 'YYYY-MM-DD', + editable: false, + inputClass: 'form-control my-custom-class-name', + placeholder: 'Selecteer datum', + altFormat: 'YYYY-MM-DD', + color: '#00dbb1', + autoSubmit: true, + locale: 'nl', + } +}); +// Components +Vue.component('datepicker', Datepicker); +Vue.component('lightbox', CoolLightBox); +Vue.component('modal', require('./components/Modal.vue').default); +Vue.component('hamburger', require('./components/Hamburger.vue').default); +Vue.component('comment-slider', require('./components/commentSlider.vue').default); +Vue.component('calculator', require('./components/calculator.vue').default); +Vue.component('calculator-2024', require('./components/calculator2024.vue').default); +Vue.component('registration', require('./components/registeration.vue').default); +Vue.component('popup', require('./components/popUp.vue').default); +Vue.component('price-input', require('./components/priceInput.vue').default); +Vue.component('overzicht', require('./components/Overzicht.vue').default); +Vue.component('form-handler', require('./components/formHandler.vue').default); +Vue.component('signature', require('./components/ZohoSignature.vue').default); +Vue.component('loading', require('./components/Loading.vue').default); +Vue.component('mollie', require('./components/Mollie.vue').default); +Vue.component('mollie-redirect', require('./components/MollieRedirect.vue').default); +Vue.component('stepped-form-handler', require('./components/SteppedFormHandler.vue').default); +// Vue.component('tb-register-19', require('./components/TBRegister19.vue').default); +// Vue.component('tb-register-20', require('./components/TBRegister20.vue').default); +Vue.component('tb-register-21', require('./components/TBRegister21.vue').default); +Vue.component('tb-register-22', require('./components/TBRegister22.vue').default); +Vue.component('tb-register-23', require('./components/TBRegister23.vue').default); +Vue.component('tb-register-24', require('./components/TBRegister24.vue').default); +Vue.component('contact', require('./components/Contact.vue').default); +Vue.component('mini-calculator', require('./components/MiniCalculator.vue').default); +Vue.component('datetime', Datetime); +Vue.component('vue-slider', VueSlider); +Vue.component('currency-input', CurrencyInput); +//directives + +Vue.directive('animate', require('./directives/animate').default); +Vue.directive('tabs', require('./directives/tabs').default); +Vue.directive('toggler', require('./directives/toggler').default); + +//mixins +Vue.mixin({ + methods: { + Translate(input, lang = 'en', load = 0) { + let res = input, dic = {}; + dic = this.$store.getters.getDictionary; + if (isEmptyObject(dic)) { + if (!!!load) { + setTimeout(this.Translate(input, 1), 300) + } + } else { + for (const [key, value] of Object.entries(dic)) { + if (input === value['en']) { + res = value[lang]; + } + } + } + return res; + } + } +}); +const isEmptyObject = (obj) => { + for (var prop in obj) { + if (obj.hasOwnProperty(prop)) { + return false; + } + } + return JSON.stringify(obj) === JSON.stringify({}); +} +window.app = new Vue({ + el: '.app-cont', + store, + data() { + return { + faqList: [ + { + title: '1. Estate Plan', + items: [ + { + "question": "Wat zijn de voorwaarden voor het Estate Plan?", + "answer": "

Zo lang u in uw woning blijft wonen, blijft u daar de eigenaar van. Voor het verzilveren van uw woning op basis van het Estate Plan, is het van belang dat uw woning hypotheekvrij is. Daarnaast dient uw woning vrij van beslagen te zijn en eventuele achterstanden van betalingen (nutsbedrijven, OZB, etc.) te zijn voldaan.

\n

Wanneer u nog een lopende hypotheeklening heeft, komt u mogelijk niet in aanmerking. Dit hangt af van de resterende looptijd en omvang van deze lening. Heeft u vragen of u toch voor dit aanbod in aanmerking kunt komen, neem dan contact met ons op.

\n" + }, + { + "question": "Waarom het Estate Plan in plaats van extra lenen bij een bank?", + "answer": "

Omdat u niet leent, heeft u ook geen rentekosten. In plaats daarvan ontvangt u een aanbetaling op de toekomstige koopsom voor uw woning. In vergelijk met een ‘omgekeerde hypotheek’, ook wel genoemd ‘verzilverhypotheek’ of ‘opeethypotheek’, ontvangt u bij deze vorm van sales & lease back een hogere vrije uitkering op uw woning in vergelijking met wat u bij een bank zou kunnen lenen. Er is geen toets op uw inkomen. Zo lang u in uw woning wilt blijven wonen, blijft de woning in uw eigendom.

\n" + }, + { + "question": "Hoeveel krijgt u voor uw woning?", + "answer": "

U ontvangt 90% van de waarde van uw woning, op basis van een onafhankelijke (NWWI-) taxatie.
Middels een onafhankelijke makelaar/taxateur en gevalideerd door het Nederlands Woning Waarde Instituut (NWWI) wordt de waarde in het economisch verkeer ofwel de vrije verkoopwaarde vastgesteld. Hiermee is de objectiviteit van de woningwaarde gewaarborgd. Uiteindelijk zal deze getaxeerde waarde het uitgangspunt vormen in de gehele transactie en in het bijzonder voor ons aanbod aan u als woningbezitter.

\n

De bevindingen van de taxatie worden vastgelegd in een taxatierapport. Een taxatierapport geeft echter geen inzicht in de bouwkundige staat van het onroerend goed, wel wordt de onderhoudsstaat bekeken en beoordeeld bij de taxatie. Daarom zal, waar Thuisborg dat nodig acht, naast een taxatie een bouwkundige keuring plaatsvinden waarvan de resultaten worden vastgelegd in een bouwkundig rapport.

\n

Thuisborg draagt alle kosten van deze transactie en van de verkoop van uw woning wanneer u uw woning wilt verlaten. Het onderhoud van uw woning en alle kosten voor u als eigenaar blijven voor uw rekening. U mag dat steeds naar eigen voorkeur en inzicht uit laten voeren.

\n" + }, + { + "question": "Hoe wordt de opbrengst van de woning aan mij uitgekeerd?", + "answer": "

Ieder jaar ontvangt u, of ontvangen uw kinderen of overige ontvangers, een uitkering ter hoogte van de jaarlijkse belastingvrije schenkingsvrijstelling. In 2020 is deze vrijstelling:

\n
    \n
  • \n

    EUR 5.515,- per kind, per jaar

    \n
    • \n
  • \n

    EUR 2.208,- per overige ontvangers van een schenking

    \n
    • \n
\n

Deze uitkering is in overleg aan te passen aan uw wensen en persoonlijke situatie. Wanneer u of uw partner de woning verlaat, kopen wij uw woning voor 90% van de oorspronkelijk getaxeerde woningwaarde, minus de gedane jaarlijkse uitkeringen U kunt altijd zo lang als u wilt blijven wonen. Blijft u langer dan vooraf overeengekomen, dan brengen wij daar een nieuwe offerte voor uit, aangepast aan uw wensen en uw (nieuwe) omstandigheden van dat moment. U kunt uw woning op ieder moment verlaten. Wij regelen vanaf dat moment de hele verkoop ervan.

\n" + }, + { + "question": "Hoe is het onderhoud van de woningen geregeld?", + "answer": "

Het onderhoud van uw woning en alle kosten van eigenaarschap blijven voor uw rekening. Wij stellen jaarlijks samen vast hoe het onderhoud wordt uitgevoerd en leggen deze afspraken vooraf vast in een Meerjaren onderhoudsplanning (‘MOP’).

\n

Desgewenst kunt u het onderhoud steeds geheel of gedeeltelijk uitbesteden aan Vondellaan Vastgoed Beheer.

\n" + }, + { + "question": "Hoe worden mijn woongenot en mijn woningopbrengst beschermd?", + "answer": "

U houdt alle rechten op uw woning die u bij aanvang al had, tot aan het moment dat u besluit dat u de woning wilt verlaten. Wij zullen een uittreksel van de koopovereenkomst bij het Kadaster vastleggen. Wij kunnen vooraf, of gedurende de periode van bewoning na verkoop, van geval tot geval aanvullende regelingen en zekerheden overeenkomen voor wat betreft:

\n
    \n
  • \n

    De uitvoering van het onderhoud

    \n
    • \n
  • \n

    De bewoning van de woning

    \n
    • \n
  • \n

    De waardeontwikkeling van de woning

    \n
    • \n
  • \n

    Veranderingen in de schenkingsvrijstelling

    \n
    • \n
\n

Wanneer u of uw partner de woning verlaten, koopt Thuisborg, of een andere door Thuisborg aangewezen partij, uw woning. Mocht u komen te overlijden gedurende de periode van bewoning na verkoop, dan zullen alle resterende bedragen waar u zelf recht op heeft, door Thuisborg worden doorbetaald aan uw erfgenamen.

\n

Houd u nog recht op periodieke uitkeringen van de woningopbrengst?

\n
    \n
  • \n

    Wanneer Thuisborg gedurende de periode van bewoning in gebreke zou blijven met het doen van periodieke uitkeringen, kunt u de oorspronkelijke verkoopovereenkomst uiteindelijk ontbinden en ook – waar van toepassing – in rechte een aanvullende schadevergoeding of nakoming vorderen.

    \n
    • \n
  • \n

    Houdt u een groot deel van uw uitkering nog van ons tegoed voor na afloop van de periode van bewoning? Dan kunnen wij aanvullende zekerheden vestigen.

    \n
    • \n
\n" + }, + ] + }, + { + sectionTitle: '2. Verzilverplan', + items: [ + { + title: '2.1 Voorwaarden', + items: [ + { + "question": "Wat zijn de voorwaarden voor het Verzilverplan?", + "answer": "

Het is van belang dat uw woning hypotheekvrij is, of wanneer u nog een lopende hypotheek heeft, de hypotheek kunt aflossen met het ontvangen bedrag bij aanvang van verzilveren (verkoop van uw woning). Thuisborg verzilvert 80% van de getaxeerde woningwaarde. De verdeling van deze 80% bepaalt u, de woningeigenaar, zelf. De huur die u gaat betalen varieert met het verzilverbedrag dat u bij aanvang ontvangt.

\n

Daarnaast dient uw woning vrij van beslagen te zijn en eventuele openstaande bedragen van betalingen (nutsbedrijven, OZB, etc.) moeten zijn voldaan.

\n

In vergelijk met een ‘opeethypotheek’-lening, heeft ‘verkoop-met-terughuur’ de volgende voordelen:

\n
    \n
  • \n

    Een groter deel van de woningwaarde komt op de bankrekening van de verkoper

    \n
    • \n
  • \n

    Geen zorgen meer over het onderhoud (indien gewenst) of over de waardeontwikkeling van de woning

    \n
    • \n
  • \n

    Beter aan te passen aan uw wensen, ook tijdens de huurperiode.

    \n
    • \n
\n

U krijgt met andere woorden, meer maatwerk, en minder risico. In ruil daarvoor betaalt u een hogere (huur-) vergoeding in vergelijk met de (hypotheekrente) vergoeding die u anders bij een hypotheek aan uw bank zou betalen. Daar staat tegenover, dat u ook geen schuld meer heeft bij de bank.

\n" + }, + { + "question": "Welke aankoopformule gebruikt Thuisborg en wat zijn de kosten en vergoedingen?", + "answer": "

Thuisborg gaat bij de berekening uit van de getaxeerde waarde in het economische verkeer van de woning (ofwel de vrije verkoopwaarde) en een bepaald verzilverpercentage daarvan (de ‘koopsom’). Een deel zal vooraf bij de aankoop worden uitgekeerd (de aanbetaling vooraf op de koopsom) en het overige deel bij doorverkoop van de woning (het ‘restant koopsom’).

\n

Daarbovenop bevat de formule een winstdelingsregeling voor de verkoper/huurder bij positieve waardeontwikkelingen van de woning. Voorts zal gedurende de afgesproken huurperiode door de verkoper/huurder een maatschappelijk verantwoorde huur worden betaald, met huurvergoedingen gebaseerd op de hoogte van het bedrag dat de verkoper/huurder vooraf krijgt uitbetaald. Zie hiervoor onze calculator en kosten en vergoedingen.

\n" + }, + { + "question": "Hoe werkt de calculator op de website?", + "answer": "

De Calculator

\n
    \n
  • \n

    Houdt rekening met de stijging van de waarde van de woning die wij verwachten voor de komende jaren en neemt de waardering van de woning als uitganspunt bij het berekenen van uitkeringen en vergoedingen.

    \n
    • \n
  • \n

    Geeft inzicht in de voordelen die wij met u willen realiseren in het duurzaam beheer van uw woning en in het optimaliseren van de eindopbrengst ervan wanneer u de woning verlaat. Daarnaast geeft het een maatstaf voor een eerste vergelijking van de huur (exclusief heffingen, toeslagen of kosten nutsvoorzieningen) in vergelijking met andere aanbiedingen of alternatieve oplossingen.

    \n
    • \n
\n
    \n
  • \n

    Houdt geen rekening met de bijzonderheden van uw woning of met de wensen en voorwaarden die er geen onderdeel van uitmaken. Aan de Calculator kunnen daarom geen rechten worden ontleend. De via de Calculator gegeven indicatie vormen in geen enkel opzicht een garantie van daadwerkelijk resultaat, aankoop of uitkering.

    \n
    • \n
  • \n

    Geeft aan onder welke voorwaarden Thuisborg uw woning zou kunnen aankopen onder de voorwaarden van het Thuisborg Woningwaarde Verzilverplan, Estate Plan of Modulair Wonen Plan. Via de Calculator kan een woningeigenaar/verkoper zelf zijn voorkeuren voor huur, aankoop en verkoop invullen op basis waarvan bijvoorbeeld een indicatieve huurprijs kan worden berekend. De Calculator houdt rekening met de stijging van de waarde van de woning die wij verwachten voor de komende jaren en neemt de waardering van de woning als uitgangspunt bij het berekenen van de verwachte kosten en opbrengsten.

    \n
    • \n
\n

 

\n

De calculator geeft een eerste indruk van de voorwaarden waaronder Thuisborg uw woning zou kunnen aankopen. De via de calculator gegeven indicatie vormt in geen enkel opzicht een garantie van daadwerkelijk resultaat of uitkering.

\n

Vanaf het moment dat u geen woningeigenaar meer bent hoeft u bepaalde kosten niet meer te voldoen. Hierbij valt onder meer te denken aan:

\n
    \n
  • \n

    Onroerende Zaak Belasting(OZB)

    \n
    • \n
  • \n

    Bijdrage van de Vereniging van Eigenaren (VvE) (waar van toepassing)

  • Opstalverzekering

" + }, + { + "question": "Hoe worden mijn woongenot en mijn woningopbrengst beschermd?", + "answer": "

Uw bescherming blijft in stand, en hangt niet af van de resultaten van Thuisborg door de jaren heen.

\n

Als huurder van uw woning geniet u steeds de volledige wettelijke huurbescherming die voor iedereen in Nederland geldt. U bent daarmee verzekerd van ongestoord woongenot. Als huurder kunt u ook aanspraken maken op de wettelijke voorschriften die gelden voor het onderhoud en het wooncomfort van uw woning.

\n

Mocht u komen te overlijden gedurende de periode van bewoning na verkoop, dan zullen alle resterende bedragen waar u zelf recht op heeft, door Thuisborg worden doorbetaald aan uw erfgenamen.

\n

Houdt u een groot deel van uw uitkering nog van ons tegoed voor na afloop van de huurperiode? Dan kunnen wij aanvullende zakelijke zekerheden stellen zoals een borg- of garantstelling, of een recht van eerste hypotheek. Deze worden notarieel vastgelegd.

\n" + }, + { + "question": "Hoe wordt de waarde van mijn woning bepaald?", + "answer": "

Wanneer Thuisborg of een investeerder overgaat tot verzilveren van uw woning, wordt er een indicatieve berekening gemaakt gebaseerd op de waardebepaling en de door u verstrekte gegevens. Komen partijen tot overeenstemming over de belangrijkste voorwaarden van prijzen, vergoedingen en levering, dan zal een NWWI-taxatie en eventueel een bouwkundige keuring plaatsvinden.

\n

Middels een onafhankelijk makelaar/taxateur en gevalideerd door het Nederlands Woning Waarde Instituut (NWWI) wordt de waarde in het economisch verkeer ofwel de vrije verkoopwaarde vastgesteld. Hiermee is de objectiviteit van de woningwaarde gewaarborgd. Uiteindelijk zal deze getaxeerde waarde het uitgangspunt vormen in de gehele transactie en in het bijzonder voor ons aanbod aan u als woningbezitter.

\n

De bevindingen van de taxatie worden vastgelegd in een taxatierapport. Een taxatierapport geeft echter geen inzicht in de bouwkundige staat van het onroerend goed, wel wordt de onderhoudsstaat bekeken en beoordeeld bij de taxatie. Daarom zal, waar Thuisborg dat nodig acht, naast een taxatie een bouwkundige keuring plaatsvinden waarvan de resultaten worden vastgelegd in een bouwkundig rapport.

\n" + }, + ] + }, + { + title: '2.2 Huur', + items: [ + { + "question": "Blijft de huurprijs gedurende de huurperiode hetzelfde?", + "answer": "

Voor wat betreft de huurprijzen wordt in beginsel uitgegaan van huurindexatie op basis van inflatiecijfers van het Centraal Bureau voor de Statistiek (het ‘CBS’). Dit betekent dat de huur wordt aangepast op basis van de consumentenprijsindex (CPI) van het CBS. Dit is ook het cijfer dat wij gebruiken om het rendement voor de investeerders in onze woningen mee te berekenen.

\n

Thuisborg maakt er zich steeds sterk voor, dat u altijd zo lang in uw woning kunt blijven wonen als u dat zelf wilt. Wij hebben echter ook verplichtingen naar onze investeerders toe. Als u gewoon blijft wonen en de woning niet verlaat na de afgesproken huurperiode, dan zult u in ieder geval een hogere (marktconforme) huur dienen te betalen. Zolang u blijft wonen, ontvangt u geen restant koopsom en winstdeling. Deze komen immer pas beschikbaar bij doorverkoop van de woning. U zult dus moeten overwegen of het wel voordelig voor u is om te blijven wonen.

\n" + }, + { + "question": "Wat gebeurt er met de VvE kosten?", + "answer": "

In geval van aankoop van een appartement zal nader gekeken moeten worden naar bijkomende servicekosten, de VvE bijdrage en in hoeverre deze redelijk zijn voor de begrippen van Thuisborg. Thuisborg zal een gedeelte van de VvE kosten aan u kunnen doorberekenen als onderdeel van de servicekosten. Hierover maken we vooraf afspraken.

\n

Uiteraard is het van belang dat de verkoop en terughuur van uw appartement binnen de voorwaarden van uw VvE mogelijk is. In de akte van splitsing kunt u dit nakijken.

\n" + }, + { + "question": "Wanneer wordt de huurovereenkomst getekend?", + "answer": "

Bij het aangaan van de koop-/verkoopovereenkomst van de woning zal de verkoper onlosmakelijk daarmee verbonden een huurovereenkomst aangaan met Thuisborg. Dit zal in beginsel een huurovereenkomst voor bepaalde tijd zijn. Deze huurtermijn is geheel gebaseerd op uw wensen. Thuisborg maakt er zich steeds sterk voor, dat u altijd in uw woning kunt blijven wonen zolang u dat zelf wilt. Wilt u langer blijven wonen dan vooraf voorzien, dan kunnen wij altijd aan uw woonwensen voldoen.

\n" + }, + { + "question": "Welke kosten dien ik als huurder te betalen?", + "answer": "

U betaalt als huurder een verlaagde basis huurvergoeding aan Thuisborg (dit bedrag wordt door de Calculator indicatief aangegeven). Het huurbedrag van de calculator is een indicatie. Afhankelijk van uw persoonlijke omstandigheden, de aanvullende diensten vanwege de woonbegeleiding en bijvoorbeeld de zekerheid van ontvangst van huurpenningen of de persoonlijke afstemming rondom het onderhoud van de woning kunnen aanvullende persoonlijke kosten in rekening gebracht worden. Deze worden van geval tot geval vooraf gespecificeerd overeengekomen.

\n

Daarnaast komen de overige door huurders te betalen bedragen en heffingen voor rekening van u als huurder. Daaronder vallen kosten als gebruiker van de woning (rioolheffing, waterschapsbelasting voor huurders en afvalstoffenheffing, plus het gebruikersdeel van de onroerendzaakbelasting (OZB)), en de kosten voor nutsvoorzieningen (gas, elektra, water, warmte en internet). U kunt ervoor kiezen – in overleg met Thuisborg – om het onderhoud van de woning geheel of gedeeltelijk zelf te (blijven) regelen en te betalen, of deze door ons te laten te laten uitvoeren.

\n" + }, + { + "question": "Hoe wordt de hoogte van de basis huurvergoeding berekend?", + "answer": "

Thuisborg baseert de door u te betalen huurvergoeding voor een deel op het deel van de aankoopvergoeding dat u vooraf ontvangt. Dit betekent dat als u een hoger bedrag wenst te ontvangen als aanbetaling op de koopsom, uw huurprijs omhoog zal gaan. Wij gaan graag samen met u na wat voor u de beste keuzes zijn.

\n" + }, + { + "question": "Mag ik van het aankoopbedrag dat ik ontvang de huur vooruit betalen?", + "answer": "

Ja, dat mag, maar dit hangt af van de gehanteerde aankoopformule. Het vooruit te betalen bedrag aan huurpenningen wordt dan in mindering gebracht op c.q. wordt verrekend met het te betalen restant koopsom. Er vindt dan in beginsel geen huurindexatie plaats over de betaalde periode en er worden dan in beginsel geen extra kosten in rekening gebracht voor het verhuurbeheer.

\n" + }, + { + "question": "Mag ik onderverhuren?", + "answer": "

Onder- of doorverhuur is na aanvang van de verzilvering alleen nog toegestaan met instemming vooraf van Thuisborg.

\n" + }, + { + "question": "Kan ik mijn huurovereenkomst vervroegd opzeggen en moet ik dan een opzegvergoeding betalen?", + "answer": "

U mag altijd de huur opzeggen, ook wanneer de huurovereenkomst nog niet is verlopen. Thuisborg zal ook in dat geval dezelfde kosten en bedragen in rekening brengen. Zie over deze kosten en bedragen de vraag: Hoe wordt het nettoresultaat berekend?

\n" + }, + { + "question": "Wat als mijn partner of ik komen te overlijden gedurende de looptijd van de huurovereenkomst?", + "answer": "

De huurovereenkomst blijft ongewijzigd en de langstlevende gehuwd of geregistreerd partner kan in de woning blijven wonen. In het geval dat u beiden komt te overlijden wanneer de huurovereenkomst nog loopt, eindigt daarmee ook de huurovereenkomst. Een eventueel overgebleven vooruitbetaald huurbedrag zal dan worden uitgekeerd aan de erfgenamen, inclusief het restant koopsom en uw percentage van het nettoresultaat (de ‘winstdeling woningverkoper’) van de woning bij de eerstvolgende doorverkoop.

\n" + }, + { + "question": "Wat als ik naar een verpleeghuis ga gedurende de looptijd van de huurovereenkomst?", + "answer": "

De huurovereenkomst blijft ongewijzigd en uw gehuwd of geregistreerd partner kan in de woning blijven wonen. In het geval dat u beide naar een verpleeghuis gaat, kunt u de huurovereenkomst steeds opzeggen. In dat geval hoeft u geen huurvergoedingen meer te betalen.

\n" + }, + { + "question": "Kan ik als huurder te maken krijgen met een andere verhuurder?", + "answer": "

Ja, ter zake van het eigendomsrecht en de huurovereenkomst zal Thuisborg gerechtigd zijn om haar rechten en verplichtingen als verhuurder over te dragen aan een rechtsopvolger of enige derde (geheel of gedeeltelijk) in haar plaats te stellen. Dat zal bijvoorbeeld het geval zijn wanneer Thuisborg een pakket woningen doorverkoopt aan een institutionele belegger. Dit betekent dat deze rechtsopvolger dan de rechtsverhouding van verhuurder ten opzichte van huurder kan overnemen. Uw rechten uit onze overeenkomst blijven dan gelijk.

\n" + }, + { + "question": "Wat zijn mijn rechten als huurder wanneer de woning door Thuisborg wordt gekocht/verzilverd en later aan een derde wordt overgedragen of bij een faillissement van Thuisborg?", + "answer": "

De afspraken zoals opgenomen in de koop- en huurovereenkomst blijven dan overeind. In het Burgerlijk Wetboek is vastgelegd dat koop geen huur breekt (zie art. 7:226 lid 1 BW). Dit wil zeggen dat de nieuwe woningeigenaar steeds volgens de wet verplicht is om een bestaande huurovereenkomst te eerbiedigen. Dat geldt bijvoorbeeld ook voor toetredende hypotheekhouders.

\n

De regel dat de overgang van de onderliggende zaak de bestaande huurovereenkomst niet aantast, geldt niet alleen bij overdracht van de verhuurde zaak, maar ook bij andere wijze van eigendomsverkrijging. Als de verhuurde zaak bijvoorbeeld krachtens erfrecht op een nieuwe eigenaar overgaat, moet deze steeds volgens de toepasselijke wettelijke regelingen evengoed de lopende huurovereenkomst eerbiedigen.

\n" + }, + { + "question": "Wat gebeurt er als de afgesproken huurperiode afloopt?", + "answer": "

Wanneer de afgesproken huurperiode afloopt, dan heeft u drie opties:

\n
    \n
  • \n

    Allereerst kunt u er voor kiezen om de woning door Thuisborg te laten verkopen aan derden. In dit geval dient u te verhuizen en ontvangt u bij doorverkoop van de woning het restant koopsom en uw percentage van het nettoresultaat (de ‘winstdeling woningverkoper’).

    \n
    • \n
  • \n

    Een tweede optie is dat u de woning van Thuisborg zelf terugkoopt. Ook in dit geval ontvangt u van ons het restant koopsom en uw percentage van het nettoresultaat, die dan verrekend worden met de (terug-)verkoopsom.

    \n
    • \n

  • Een derde optie is dat u de woning blijft huren. De afgesproken huurperiode is dan afgelopen en u dient dan de hogere (marktconforme) huurvergoeding te betalen zoals in de huurovereenkomst die u met ons bent aangegaan.

" + }, + { + "question": "Er is brand geweest, wat nu?", + "answer": "

Wanneer u vanwege brand of andere oorzaken de woning (tijdelijk) niet meer kunt bewonen, zult u een alternatieve en vergelijkbare woonruimte moeten betrekken. U heeft daarbij de dekking en voorzieningen die gelden vanwege de overeenkomst met de verzekeringsmaatschappij (opstalverzekering). Wanneer uw woning voor Thuisborg aangekocht wordt, sluit Thuisborg deze verzekering af. Thuisborg zal samen met de verzekeringsmaatschappij afstemmen en ervoor zorgen dat de woning waar mogelijk in de oude toestand wordt hersteld, waarna u deze eventueel weer kunt gaan bewonen.

\n

Indien door opzet of grove nalatigheid van de huurder een dergelijke situatie is ontstaan kan Thuisborg de huurovereenkomst beëindigen en kan de huurder een boete/schadevergoeding verschuldigd zijn aan Thuisborg. Ook zal de winstdeling bij doorverkoop in dat geval lager kunnen uitvallen, vanwege een mogelijk vroegtijdige verkoop.

\n" + }, + ] + }, + { + title: '2.3 Onderhoud', + items: [ + { + "question": "Mijn woning heeft achterstallig onderhoud en is gedateerd. Is dit een probleem?", + "answer": "

Nee, voor Thuisborg is dit in beginsel geen probleem. Thuisborg koopt graag alle soorten woningen, zowel in een perfecte staat, maar ook huizen met achterstallig onderhoud.

\n" + }, + { + "question": "Wat zijn de kosten als ik het onderhoud via Thuisborg laat doen?", + "answer": "

Het bedrag van het standaard verwachte onderhoud van iedere individuele woning is – op basis van een Meerjaren Onderhoudsplanning (‘MOP’) vooraf – bij de overeengekomen huurprijs inbegrepen.

\n

In geval van achterstallig onderhoud kan het bruto verkoopresultaat bij doorverkoop van de woning in mindering worden gebracht op het restant aankoopsom en op de winstdelingsregeling. Zie hierover ook de vraag: Hoe wordt het nettoresultaat berekend?

\n

Dit betekent dus onder meer dat er bij het onderhoudsplan en tijdens de huurperiode in beginsel voor het onderhoud er geen kosten in rekening worden gebracht bij de woningverkoper/huurder die niet waren ingecalculeerd c.q. die niet redelijkerwijs vooraf al voorzien kunnen worden door een professionele woninginvesteerder.

\n" + }, + { + "question": "Hoe is het onderhoud van de woning geregeld?", + "answer": "

U kunt de woning na verkoop zelf onderhouden, of u kunt dat aan ons overlaten. Wij besteden het onderhoud van uw woning uit aan Vondellaan Vastgoed Beheer.

\n

U kunt er ook voor kiezen om de eerste jaren het onderhoud zelf te doen, en het daarna uit te besteden. Wanneer een woningverkoper/huurder zelf het onderhoud wil blijven doen, dan komen het (groot) onderhoud en de desbetreffende kosten voor risico en rekening van de woningverkoper/huurder. Daarnaast heeft u de verplichting om de woning gedurende de huurperiode tenminste in dezelfde staat van onderhoud te houden, zoals die bij aankoop door Thuisborg in de onafhankelijke taxatie en technische keuring werd vastgelegd.

\n

Na ondertekening van de koop- en huurovereenkomst zal de verkoper in overeenstemming met Thuisborg een Meerjaren Onderhoudsplanning (‘MOP’) opstellen rondom de aanpassingen, het beheer en het onderhoud van de woning.

\n" + }, + ] + }, + { + title: '2.4 Kosten en vergoedingen', + items: [ + { + "question": "Wanneer ontvangt u de aanbetaling vooraf op de koopsom?", + "answer": "

De aanbetaling vooraf op de koopsom ontvangt u met het passeren van de overdrachtsakte bij een door Thuisborg aan te wijzen notaris.

\n" + }, + { + "question": "Wie betaalt de aankoopkosten van de woning, waaronder de kosten koper (k.k)", + "answer": "

De aankoopkosten van de woning, waaronder met name de overdrachtsbelasting, de kosten van de makelaar en notaris en de kosten van taxatie en bouwkundige keuring (gemiddeld geschat op ca. 4,5% van de vrije verkoopwaarde) worden in het geval van aankoop voor Thuisborg zelf, door Thuisborg gefinancierd. Wanneer u daar al een bedrag voor betaald heeft in de intake, krijgt u deze van ons retour met de eerstvolgende uitkering.

\n

De aan- of verkoopkosten van uw woning hoeft u dus niet zelf vooruit te betalen (afgezien van bijzondere afspraken). De verkoopkosten van uw woning worden verrekend met het bruto verkoopresultaat bij de uiteindelijke doorverkoop van de woning, wanneer u de woning definitief verlaat.

\n" + }, + { + "question": "Wat betekent dit concreet voor u?", + "answer": "

Thuisborg neemt als nieuwe eigenaar het risico van waardedeling over van de woning verkoper en draagt na verkoop de eindverantwoording voor het beheer van de woning.

\n

Thuisborg betaalt tenminste 80% van de marktwaarde van de woning en kan daar bovenop een winstdeling met de woningverkoper overeenkomen voor het geval de woning gedurende de periode van verhuur verder in waarde stijgt.

\n

In het geval zoals weergegeven in de calculator, wanneer er een winstdeling is afgesproken, rekent Thuisborg 3% van de woningwaarde bij aanvang van de verhuurperiode en 10% van de woningwaarde na afloop van de verhuurperiode, wanneer de woning doorverkocht zal worden. Deze 3% en 10% worden alleen in rekening gebracht voor zover de waarde van de woning daarvoor voldoende is gestegen en de woning verkoper eerst zijn minimale vaste 80% van de oorspronkelijke woningwaarde ontvangen heeft. Afhankelijk van de afgesproken dienstverlening kan Thuisborg extra kosten voor verhuurbeheer in rekening brengen. De calculator op de site houdt daar geen rekening mee.

\n" + }, + { + "question": "Worden er kosten in rekening gebracht?", + "answer": "

De kosten genoemd bij aanvang verzilveren (aankoopkosten, -lasten, -heffingen en – vergoedingen) en de kosten bij doorverkoop van de woning aan het einde van de huurtermijn worden in mindering gebracht op het bruto verkoopresultaat; de opbrengst van de woning bij doorverkoop na afloop van de verhuurperiode. De aankoop- en verkoopvergoedingen voor Thuisborg worden alleen in rekening gebracht voor zover de waarde van de woning daar voldoende voor gestegen is.

\n

Wanneer u uw woning wilt verzilveren via Thuisborg of door plaatsing op Borgplaats, zal Thuisborg een waardebepaling van de woning opvragen. De kosten hiervoor bedragen EUR 50,-. Deze kosten zullen bij u in rekening worden gebracht. Wanneer Thuisborg uw woning verzilvert of wanneer er via Borgplaats een bemiddeling plaats vindt, nemen wij deze kosten over.

\n" + }, + { + "question": "Wanneer ontvangt u het restant koopsom?", + "answer": "

Wanneer de woning wordt doorverkocht op het moment dat de bewoning daarvan eindigt, verkopen wij de woning. Op dat moment is er een uitkering mogelijk en ontvangt u het restant koopsom. Wij streven er naar de woning na afloop van de bewoning zo snel mogelijk door te verkopen. De periode die daarvoor nodig is hangt natuurlijke mede af van de marktomstandigheden.

\n" + }, + { + "question": "Hoe wordt het nettoresultaat berekend?", + "answer": "

Het nettoresultaat is de bruto verkoopopbrengst van de woning, met aftrek van:

\n
    \n
  • \n

    De verkoopvergoeding van 10% voor Thuisborg;

    \n
    • \n
  • \n

    De kosten om de woning verkoop gereed te maken, waaronder de kosten van de verkopende makelaar namens Thuisborg en de kosten van woningaanpassing in verband met het uitvoeren van eventueel achterstallig onderhoud;

    \n
    • \n
  • \n

    De investering van de woning. Deze investering bestaat met name uit:

    \n
      \n
    • \n

      de aanbetaling vooraf,

      \n
      • \n
    • \n

      alle aankoopkosten van de woning, waaronder met name de overdrachtsbelasting, de kosten van de makelaar en notaris en de kosten van taxatie en keuring,

      \n
      • \n
    \n
    • \n
\n
    \n
  • \n
      \n
    • \n

      de aankoopvergoeding van 3% voor Thuisborg vanwege de bemiddeling/opdracht tot dienstverlening,

      \n
      • \n
    • \n

      het nog te betalen deel van de koopsom bij het definitief verlaten van de woning.

      \n
      • \n
    \n
    • \n
\n

De vergoedingen voor Thuisborg bij aankoop en bij doorverkoop worden alleen in rekening gebracht voor zover er daarvoor voldoende meeropbrengst is bij verkoop van de woning (einde huurtermijn). Voor zover dat niet het geval is worden deze kosten gedragen door Thuisborg. Kortom, de verkoper ontvangt in alle gevallen tenminste 80% van de marktwaarde van de woning, en daarboven een mogelijke winstdeling.

\n" + }, + { + "question": "Kan ik ook in timing en omvang variëren bij de aanbetalingen op de koopsom?", + "answer": "

Variaties kunnen bij aanvang en gedurende de looptijd van de bewoning doorgevoerd blijven worden. Thuisborg levert maatwerk waarmee aanpassingen mogelijk zijn vanuit de standaard aankoopformule. U kunt met Thuisborg bijvoorbeeld ook afspreken dat u de aanbetalingen op de koopsom in delen uitbetaald wilt krijgen of dat u deze wilt verrekenen met de te betalen huur(termijnen). In voorkomende gevallen doen wij daarvoor apart offerte. Deze offerte is gratis, maar aanpassingen kunnen leiden tot (extra) kosten.

\n" + }, + { + "question": "Hoe worden de betalingen van de woning gegarandeerd?", + "answer": "

U ontvangt de eerste betaling op de koopsom met het passeren van de overdrachtsakte bij een door Thuisborg aan te wijzen notaris. Thuisborg zal rechtstreeks het juridische eigendom houden van de woning voor de duur van de huurovereenkomst. Wilt u meer of andere vormen van zekerheden, dan kunnen wij hiervoor oplossingen aanbieden die passen bij uw persoonlijke situatie en wensen.

\n" + }, + { + "question": "Komt de uitbetaling van het restant koopsom en de winstdeling woningverkoper te vervallen in geval van overlijden?", + "answer": "

Nee, het bedrag van het restant koopsom en uw percentage van het netto resultaat (de ‘winstdeling woningverkoper’) wordt altijd uitgekeerd door Thuisborg. In beginstel zal dat dan zijn aan de langstlevende bij doorverkoop van de woning. In het geval dat er uitsluitend nog erfgenamen zijn, dan worden deze bedragen aan de boedel van uw nalatenschap/aan uw erfgenamen uitgekeerd.

\n" + }, + { + "question": "Wat voor soort woningen koopt Thuisborg?", + "answer": "

Thuisborg koopt Nederlandse woningen in de meeste gevallen met een vrije verkoopwaarde tussen ca. EUR 200.000 en ca. EUR 500.000. De woning dienen in beginsel op eigen grond te staan, er mag in beginsel ook geen erfpacht op zijn gevestigd (tenzij die voor een langere periode kan worden afgekocht). Monumentale panden met bijzondere (vergunning-) voorwaarden kunnen niet altijd aangekocht of bemiddeld worden.

\n" + }, + { + "question": "Wanneer ik een aanvraag verstuur naar Thuisborg voor een (indicatief) bod op mijn woning, zit ik dan ergens aan vast?", + "answer": "

Nee, u kunt vrijblijvend een aanvraag indienen en bent nergens toe verplicht. 

\n" + }, + { + "question": "Wat betekent het voor u als Thuisborg u een bod of een aanbieding doet?", + "answer": "

Wanneer Thuisborg aan u een bod of een aanbieding doet is dit vrijblijvend. Het is dan ook onder voorbehoud van een geaccepteerde taxatie, een bouwtechnische keuring en acceptatie van de voorwaarden zoals opgenomen in het Woningwaarde Verzilverplan, het Estate Plan of het Modulair Wonen Plan van Thuisborg. Zie hierover ook Algemene Consumentenvoorwaarden van Thuisborg zoals die van toepassing zijn op een dergelijke indicatie.

\n" + }, + { + "question": "Wordt er door Thuisborg altijd een bod uitgebracht?", + "answer": "

Nee, niet op alle woningen brengen wij een bod uit. Soms is het zo dat de huidige vraagprijs van een woning in vergelijking met de huidige marktwaarde (veel) te hoog is of dat de periode waarin de transactie afgerond zou moeten gaan worden (veel) te kort is. Wij zullen dan geen bieding kunnen uitbrengen.

\n" + }, + { + "question": "Is er ook sprake van een drie-dagen-bedenktijd regel of een financieringsvoorbehoud bij verkoop aan Thuisborg?", + "answer": "

De wettelijke bedenktijd (bescherming voor de particuliere kopers) geldt niet voor Thuisborg wanneer Thuisborg als professionele tegenpartij uw woning aankoopt. Wij kopen immers bedrijfsmatig en dan geldt de wettelijke bedenktijd niet. Als woninginvesteerder kopen wij – uitzonderingen daargelaten – ook zonder financieringsvoorbehoud.

\n" + }, + { + "question": "Is het een probleem als ik nog een hypotheek heb?", + "answer": "

U kunt uw koopwoning aan Thuisborg verkopen en weer terug huren van ons wanneer u nog een lopende hypotheek heeft. Dit hangt mede af van de hoogte van het uitstaande bedrag. De bestaande hypotheek zal dan immers eerst door Thuisborg ingelost moeten worden.

\n

Deze aflossing wordt dan ingehouden op de koopsom.

\n" + }, + { + "question": "Kan ik mijn woning verkopen aan Thuisborg wanneer er executoriaal beslag is gelegd op mijn woning?", + "answer": "

Met de opbrengst van de woning bij verkoop dienen de openstaande hypotheeklening en alle eventuele achterstanden en (executoriale of conservatoire) vorderingen te worden afgelost. Als de opbrengst van de woning niet voldoende is dan zal er toestemming verkregen moeten worden van hypotheekverstrekker(s) of beslaglegger(s). Thuisborg en de notaris kunnen u hierbij begeleiden. U kunt contact met ons opnemen om alle mogelijkheden te bespreken.

\n" + }, + ] + }, + ] + }, + { + sectionTitle: '3. Algemene informatie Verzilveren', + items: [ + { + title: '3.1 Taxatie en bouwkundige keuring', + items: [ + { + "question": "Waarom altijd een taxatie, en waar nodig een bouwkundige keuring?", + "answer": "

Wat voor Thuisborg in de eerste plaats van belang is, is dat er geen sprake is van onverwachte eigenschappen van de onroerende zaak. 

\n

Voordat Thuisborg tot aankoop van de woning overgaat c.q. voordat Thuisborg een koopovereenkomst en een verhuurovereenkomst zal ondertekenen, dient middels een onafhankelijke makelaar/taxateur en gevalideerd door het Nederlands Woning Waarde Instituut (NWWI) de waarde in het economisch verkeer, ofwel de vrije verkoopwaarde, vast te zijn gesteld. Hiermee is de objectiviteit van de waardebepaling gewaarborgd.

\n

De bevindingen van de taxatie worden vastgelegd in een taxatierapport. Een taxatierapport geeft echter geen inzicht in de bouwkundige staat van het onroerend goed, wel wordt de onderhoudsstaat bekeken en beoordeeld bij de taxatie. Daarom zal, waar Thuisborg dat nodig acht, naast een taxatie een bouwtechnische keuring plaatsvinden waarvan de resultaten worden vastgelegd in een bouwkundig rapport.

\n

De bouwkundige toestand van het onroerend goed dient te zijn opgenomen in een daartoe opgesteld bouwkundig rapport dat voldoet aan de eisen van de Nationale Hypotheek Garantie (NHG). Het bouwkundig rapport geeft samen met het taxatierapport een objectief beeld van de waarde van het onroerend goed.

\n" + }, + { + "question": "Wat is een bouwtechnische keuring?", + "answer": "

Een bouwtechnische keuring is een professionele, complete visuele beoordeling van de totale onderhoudsstaat en de bouwtechnische aspecten van een woning. De opzet van de keuring is onder meer om gebreken te ontdekken die mogelijk voor problemen kunnen zorgen en/of tot (hoge) kosten kunnen leiden. Deze aspecten kunnen van invloed zijn op de beslissing omtrent het wel of niet aankopen van een woning.

\n" + }, + { + "question": "Wat wordt tijdens een bouwtechnische keuring gecontroleerd?", + "answer": "

Tijdens een bouwtechnische keuring komen zaken aan de orde als:

\n
    \n
  • \n

    De fundering, kruipruimte (beperkt) en vloeren

    \n
    • \n
  • \n

    De riolering, ventilatie, leidingwerk in kruipruimte

    \n
    • \n
  • \n

    De bouwkundige staat van vloeren, muren, metselwerk, voegwerk en lateien

    \n
    • \n
  • \n

    De staat en toestand van dak, pannen, dakbeschot, goten, zink en schoorstenen

    \n
    • \n
  • \n

    De technische staat en te verwachten levensduur van dakbedekking en dakconstructie

    \n
    • \n
  • \n

    De staat van puien, kozijnen, ramen, deuren e.d.

    \n
    • \n
  • \n

    Een visuele beoordeling van de technische staat van de cv-installatie

    \n
    • \n
  • \n

    Een visuele beoordeling van de technische staat van de elektrische installatie

    \n
    • \n
  • \n

    Een visuele beoordeling van de onderhoudsstaat van keuken

    \n
    • \n
  • \n

    Een visuele beoordeling van de onderhoudsstaat van alle overige sanitaire groepen

    \n
    • \n
  • \n

    Een oordeel over de staat van eventuele schuren, garages en opstallen

    \n
    • \n
  • \n

    Het vaststellen van de aanwezigheid van een loden waterleiding, asbest of het risico van koolmonoxide e.d.

    \n
    • \n
  • \n

    Een kostenraming inclusief de direct noodzakelijke kosten, termijnkosten en 
    verbeterkosten

    \n
    • \n
\n

De totale bouwkundige keuring is visueel en niet-destructief (inspectie zonder het object te beschadigen). Asbest zal bijvoorbeeld worden gemeld indien het eenvoudig visueel waarneembaar is. De inspectie is echter geen asbestinventarisatie. Aanwezigheid van asbest kan middels deze inspectie niet totaal worden uitgesloten. Gebreken die na het verwijderen van wandafwerkingen, aftimmeringen e.d. zichtbaar worden vallen buiten het bereik van een visuele inspectie.

\n" + }, + { + "question": "Wanneer ik een aanvraag verstuur naar Thuisborg voor een (indicatief) bod op mijn woning, zit ik dan ergens aan vast?", + "answer": "

Nee, u kunt vrijblijvend een aanvraag indienen en bent nergens toe verplicht. 

\n" + }, + { + "question": "Wie betaalt uiteindelijk de taxatie en de bouwtechnische keuring?", + "answer": "

De kosten van de taxatie en de bouwkundige keuring worden bij u in rekening gebracht of ze worden in mindering gebracht op het bruto verkoopresultaat bij doorverkoop van de woning, bij afloop van de huurperiode.

\n" + }, + { + "question": "Wanneer dient de taxatie en de bouwtechnische keuring te hebben plaatsgevonden?", + "answer": "

De data van de taxatie en de bouwtechnische keuring dienen voldoende recent te zijn, en daarmee in principe te liggen in de drie maanden die voorafgaan aan de datum van ondertekening van de definitieve koop- en verhuurovereenkomst.

\n" + }, + { + "question": "Wanneer de taxatie niet gunstig uitvalt voor u als verkoper en u wilt de verkoop niet doorzetten wat zijn dan uw kosten?", + "answer": "

Indien de koop- en verhuurovereenkomst niet tot stand komt na het ondertekenen van de opdracht tot dienstverlening, dan kan Thuisborg een vergoeding ter hoogte van de met Thuisborg gemaakte (tarief)afspraken in rekening brengen, indien en voor zover van toepassing.

\n" + }, + { + "question": "Wat is de vrije verkoopwaarde van een woning?", + "answer": "

De vrije verkoopwaarde is de waarde van een woning die in volledig eigendom leeg en onbezwaard kan worden overgedragen op de vrije markt in de normale situatie van vraag en aanbod. Het is de waarde die de hoogstbiedende bij een niet-gedwongen verkoop voor een huis zou geven. Dit wordt ook wel de economische of onderhandse verkoopwaarde genoemd.

\n" + }, + ] + }, + { + title: '3.2 Overeenkomst tot dienstverlening', + items: [ + { + "question": "Wanneer dient u als woningverkoper de overeenkomst tot dienstverlening te ondertekenen?", + "answer": "

De overeenkomst tot dienstverlening dient door u vooraf te worden ondertekend wanneer wij actief werkzaamheden gaan verrichten om uw woning te (doen) verzilveren.

\n

Dat is bijvoorbeeld het geval wanneer:

\n
    \n
  • \n

    Uw woning op Borgplaats niet anoniem geplaatst wordt (bijvoorbeeld bij opname van adresgegevens en/of foto’s)

    \n
    • \n
  • \n

    Wij (bemiddelings) werkzaamheden moet gaan (laten) verrichten, waaronder het inschakelen van een makelaar voor taxatie of het laten uitvoeren van een bouwtechnische keuring;

    \n
    • \n

  • Wij zelf bemiddelen (waaronder het begeleiden of voorbereiden van bezichtigingen) vanwege verzilvering van uw woning door een investeerder.

    • \n
\n" + }, + { + "question": "Als ik de overeenkomst tot dienstverlening heb ondertekend met Thuisborg, kan ik dan op mijn besluit terugkomen (intrekking of opschorten)?", + "answer": "

Met betrekking tot het intrekken, opschorten van de overeenkomst door de opdrachtgever of wegens het van rechtswege beëindigen ervan, is opdrachtgever, aan Thuisborg een vergoeding verschuldigd ter hoogte van de met Thuisborg gemaakte (tarief) afspraken, indien en voor zover van toepassing.

\n

U heeft na ondertekenen van de overeenkomst tot dienstverlening een wettelijke bedenktijd van 14 dagen. Wanneer u het niet wenselijk vindt om binnen 14 dagen bedenktijd al kosten te gaan maken, kunt u eerst aan ons (binnen 3 werkdagen na ondertekenen van de overeenkomst) schriftelijk/per e-mail verzoeken de dienstverlening 14 dagen op te schorten. U maakt in dat geval gebruik van de 14 dagen bedenktijd, zonder dat er kosten worden gemaakt.

\n

Indien u dat niet aangeeft binnen die drie werkdagen of indien u na deze periode van 14 dagen de overeenkomst intrekt of onderbreekt, kunnen wij u een vergoeding ter hoogte van de met Thuisborg gemaakte (tarief) afspraken in rekening brengen, indien en voor zover van toepassing.

\n" + }, + { + "question": "Wat als Thuisborg de opdracht tot dienstverlening teruggeeft?", + "answer": "

Wanneer Thuisborg de opdracht aan u teruggeeft, kan zij alleen de gemaakte kosten (aan derden) in rekening brengen (bijvoorbeeld vanwege een taxatie of bouwkundige keuring), maar niet haar standaard uurtarief of eigen kosten vanwege intrekking of gemiste inkomsten daaruit.

\n" + }, + { + "question": "Wat als u al eerder een opdracht tot dienstverlening aan een andere makelaar hebt gegeven en een transactie vindt daarna via Thuisborg plaats?", + "answer": "

Wanneer u als woningverkoper al eerder een opdracht tot dienstverlening aan een makelaar heeft gegeven voor de verkoop van de woning, dan zal Thuisborg bij een transactie via Thuisborg de standaard intrekkingskosten van die opdracht in mindering brengen op haar eigen bemiddelingsvergoeding. In dat geval betekent dat voor u dat u geen dubbele kosten maakt.

\n

Laat u vooraf bij Thuisborg informeren wanneer er sprake is van bijzondere afspraken met derden, waaronder woningmakelaars, voor de beste begeleiding in dit proces.

\n" + }, + ] + } + ] + }, + { + title: '4. Modulaire woningen', + items: [ + { + "question": "Wat is modulair bouwen?", + "answer": "

In feite is het heel eenvoudig. U geeft aan welke woning of extra ruimte u nodig heeft en kiest de materialen voor de afwerking. Wij bouwen vervolgens in ons atelier de volledige module op basis van houtskeletbouw. De kant-en-klare unit wordt vervolgens bij u thuis geleverd en geplaatst. Pijlsnel, hoogst kwalitatief, uiterst flexibel, enorm duurzaam en aantrekkelijk geprijsd.

\n

Pearl Homes (onze leverancier) beschikt over een moderne fabriek in België, waar alle units semi-automatisch geproduceerd worden. De machines voeren tot in de kleinste details het op maat getekende concept uit. In functie van de wensen, worden alle voorzieningen in het atelier toegevoegd, zodat het modulaire gebouw volledig afgewerkt naar de werf kan vertrekken. Een elektricien, schilder, of loodgieter komt er niet meer aan te pas. Je kunt direct na de plaatsing en aansluiting van water en elektriciteit, de nieuwe woning gebruiken.

\n" + }, + { + "question": "Waarom modulair bouwen?", + "answer": "

Kwalitatief bouwen én wonen

\n

Modulair bouwen met houtskeletbouw is een bouwmethode die wereldwijd heeft bewezen dat ze beter is dan andere werkwijzen. Door hiervoor de juiste, gesofisticeerde machines in te zetten, wint deze techniek makkelijk op efficiëntie. Er is haast geen foutenmarge. De materialen zijn in de bouwfase niet onderhevig aan klimatologische omstandigheden. Tel daar de kennis, ervaring en het vertrouwen van onze vakmensen bij, en u mag zeker zijn van een onberispelijke kwaliteit.

\n

Maatwerk

\n

Naast de standaard modules bieden wij ook maatwerk. In tegenstelling tot traditionele sleutel-op-de-deurprojecten of kant en klare standaardmodules, kan u zelf alle details van uw woning, bedrijfsgebouw of andere constructie kiezen. De vorm van de volumes, het aantal verdiepingen, de indeling, materialen voor de afwerking,… Alles wordt samen met u in detail gekozen en besproken. Wij schikken ons volledig naar uw wensen!

\n

Snel bouwen

\n

De bouwmethode van onze leverancier laat toe dat uw project in amper 2 maanden na het verkrijgen van de bouwvergunning, volledig gerealiseerd kan worden. Dit ongeacht de weersomstandigheden. De capaciteit van de fabriek is groot genoeg om alle deadlines netjes te halen. En.. time is money! Reken zelf gerust eens uit wat u hierdoor kunt besparen, bijvoorbeeld aan huurgeld voor uw huidige accommodatie…

\n

Goedkoop bouwen

\n

Omdat er veel werk machinaal wordt gedaan, hebben we geen last van de hoge loonkosten. Een prijs die we dus niet moeten doorrekenen… De productie gebeurt in België, zodat ook de transportkosten beperkt zijn. Door de grote volumes en steengoede afspraken met onze leveranciers, kan Pearl Homes prijstechnisch een onklopbaar eindproduct afleveren. Kijk en vergelijk: wie heeft er gelijk?

\n

Ecologisch bouwen

\n

Dat houtskeletbouw veruit de meest duurzame bouwmethode is, moeten we u niet meer vertellen. Alle materialen zijn energetisch gewoon top én later perfect recupereer baar (circulaire economie). Pearl Homes houdt tevens rekening met de strengste energienormen. Daarom zijn onze woningen BEN (Bijna Energie Neutraal). Wij voldoen nu al aan het maximale E-peil van 2021, dat lager moet zijn dan 30! Die inspanningen in duurzaamheid zijn niet alleen goed voor het milieu, maar ook voor uw portefeuille.

\n" + }, + { + "question": "Wat is houtskeletbouw?", + "answer": "

Houtskeletbouw is een bouwmethode die in alle uithoeken van de wereld al decennialang wordt gehanteerd om snel, kwalitatief en duurzaam te bouwen. Omdat het exact deze voordelen zijn waar onze klanten naar op zoek zijn, kiest Pearl Homes voor houtskeletbouw als systeem voor het optrekken van de beste modulaire woningen en bijgebouwen.

\n

Populaire bouwmethode

\n

Het zal niemand verwonderen dat houtskeletbouw wereldwijd de meest toegepaste bouwmethode is. Concreet houdt het in dat de dragende structuren uit hout worden vervaardigd. Vloeren, plafonds, balken en kolommen… het hele frame is gemaakt van robuuste houtsoorten. De afwerking gebeurt met plaatmateriaal. Daarbij worden alle elementen stevig geïsoleerd, zodat houtskeletbouw een uiterst energiezuinige methode van bouwen is. De keuze voor hout laat toe dat alle vormen en uitsparingen voor voorzieningen, perfect op maat kunnen gezaagd worden. Dit gebeurt machinaal, zodat alles perfect past.

\n

Zie je dat eraan?

\n

Nee, zowel vanbinnen als vanbuiten ziet een woning in houtskeletbouw er exact hetzelfde uit als een klassiek huis. Dat komt omdat de afwerking gebeurt met materialen naar keuze. Rondom de houten structuur kan perfect een muur van bakstenen worden gemetseld. Op het dak leggen we de pannen van uw keuze. Binnen wordt alles netjes geschilderd, bepleisterd of behangen. En ook de vloeren worden afgewerkt met materialen naar keuze (tegels, parket, laminaat…)

\n

Beter in prefab?

\n

Het grote voordeel van houtskeletbouw is dat alle werkzaamheden in de fabriek, dus onder dak kunnen gebeuren. Er kan dus geen weerverlet optreden, zoals bij de traditionele woningbouw. De volledige unit, bestaande uit het houten frame, de binnenmuren, en alle technische voorzieningen, is gebruiksklaar bij het transport naar de werf. Rest alleen nog de montage op het voorziene dek, en klaar is kees!

\n" + }, + { + "question": "Waarom een modulaire mantelzorgwoning bouwen?", + "answer": "

Heel wat oudere en (chronisch) zieke mensen willen absoluut niet in een ziekenhuis, rust- of verzorgingstehuis verblijven. Anderzijds beseffen ze dat hun eigen woning niet is aangepast aan de hulp die ze nodig hebben. Hun kinderen of andere familieleden willen graag de zorg op zich nemen, maar hebben niet meteen de ruimte om één of twee extra personen in huis te halen. Dé ideale oplossing voor alle partijen is een modulaire mantelzorgwoning!

\n" + }, + { + "question": "Hoe is het onderhoud van de woningen geregeld?", + "answer": "

Thuisborg stelt de modulaire woning beschikbaar en plaatst deze op de door u gewenste locatie. Voor u, of juist voor uw (mantel)verzorger(s). Thuisborg regelt en neemt de kosten voor het vervoer, plaatsing, eventuele vergunning en verzekering voor haar rekening.

\n

U betaalt alleen de aansluitkosten, die van locatie tot locatie kunnen verschillen afhankelijk van uw wensen en de periode dat de woning naar verwachting in gebruik zal blijven. Dit kunt u bij uw gemeente navragen. De woning kan zo lang als gewenst bewoond blijven; er is geen limiet aan de termijn.
\nVoor het gebruik van de modulaire woning wordt een standaard huurovereenkomst voorgesteld, met een standaard regeling voor de kosten van (klein) onderhoud voor u als gebruiker en (groot) onderhoud voor de eigenaar (Thuisborg).

\n" + }, + { + "question": "Welke zorgwoningen biedt Thuisborg?", + "answer": "

Thuisborg biedt keuze uit 2 basistypen modulaire woningen; een unit van 45m2 en een unit van 63 m2. De gehele woning is altijd rolstoel en rollator toegankelijk. U kunt zelf meedenken hoe uw ideale woning wordt ingedeeld qua lay-out en materiaalkeuze, zodat ze zijn afgestemd op u persoonlijke en fysieke voorkeuren. Zelfstandig modulair wonen kan al vanaf 45 m2.

\n

De uitvoering van onze Loftels geeft u de ervaring gebruiker te zijn van een veilige en luxe modulaire woning met een rijke uitstraling. Naast dagelijks gemak en comfort staat duurzaamheid centraal voor wat betreft de keuze van materialen (100% recyclebaar of herbruikbaar) en de toegepaste energiehuishouding.

\n

We bieden u de mogelijkheid gebruik te maken van state of the art technieken op het gebied van zonne-energie en klimaatbeheersing.

\n

U heeft geen zorgen meer over het onderhoud uw woning. De woning is beter aan te passen aan uw wensen. U krijgt dus meer maatwerk, en minder risico’s. In ruil daarvoor betaalt u een hogere (huur) vergoeding, in vergelijking met de (hypotheekrente) vergoeding die u anders bij een hypotheeklening aan uw bank zou betalen.

\n" + }, + { + "question": "Praktische informatie Mantelzorgwoning (Rijksoverheid)", + "answer": "

Welke regels gelden voor de bouw van een mantelzorgwoning?
\nU heeft geen omgevingsvergunning (voorheen bouwvergunning) meer nodig voor een mantelzorgwoning op uw eigen terrein. De regels voor de bouw van een mantelzorgwoning zijn eenvoudig. Vergelijkbaar met die van een garage of tuinhuis. Daarvoor is ook geen vergunning nodig. Vraag bij de gemeente na hoe de regels precies zijn.

\n

Wat is een mantelzorgwoning?
\nEen mantelzorgwoning is een woning op het terrein van het huis van iemand die zorg nodig heeft. De woning is bedoeld voor de zorgverlener (vriend, familielid). Het is ook mogelijk dat de persoon die zorg nodig heeft in de mantelzorgwoning woont. In dat geval woont de zorgverlener in het bijbehorende huis.

\n

Geen vergunning, wel regels
\nDat u geen vergunning nodig heeft, wil niet zeggen dat er geen regels gelden bij de bouw of het plaatsen van een mantelzorgwoning. Zo moet u wel gewoon voldoen aan het Bouwbesluit. Hierin staan regels op het gebied van veiligheid, gezondheid en milieu. Informeer hiernaar bij uw gemeente.

\n

Beëindiging mantelzorg
\nHoudt de mantelzorg op? Dan mag het bouwwerk niet langer gebruikt worden als woning. U hoeft de woning niet af te breken, maar u moet bijvoorbeeld wel de keuken en badkamer verwijderen.

\n

Mantelzorgwoning in beschermd stadsgezicht of monument
\nWoont u in een rijksbeschermd stadsgezicht of is uw pand een monument? Dan heeft u meestal wel een omgevingsvergunning nodig voor het plaatsen van een mantelzorgwoning.

\n" + }, + { + "question": "Kan ik ook een modulaire woning huren als ik een koopwoning achter laat?", + "answer": "

Het Modulair Wonen Plan is bedoeld voor senioren die mantelzorg nodig hebben, maar die hun woning (nog) niet willen verkopen.

\n

Thuisborg levert een (extra) modulaire woning, op specificatie van de toekomstige bewoner. De vrijkomende woning wordt door Thuisborg verhuurd aan derden. Het beheer daarvan wordt uitgevoerd voor Vondellaan Vastgoed Beheer.

\n

De opbrengst van de verhuurde woning dekt de kosten van de geleverde modulaire woningen en kan – afhankelijk van de kwaliteit, omvang en locatie – ook meeropbrengsten opleveren, die ten goede komen aan de eigenaar van de woning. Deze opbrengst – in de regel tot ca. EUR 500,- per maand – wordt maandelijks uitgekeerd.

\n

Wanneer de modulaire woning niet meer nodig is, wordt deze door Thuisborg afgevoerd. De oorspronkelijke woning wordt dan verkocht. Thuisborg garandeert een verkoopopbrengst die gelijk is aan de waarde van de woning, op het moment dat de extra modulaire woning geleverd werd.

\n

Tot zekerheid van de ontvangst van de opbrengst van de oorspronkelijke woning kan een hypothecair zekerheidsrecht (recht van eerste hypotheek) geleverd worden.

\n

Het Modulair Wonen Plan werkt zonder inkomenstoetsing en zonder verplichte extra advieskosten. Wij behouden het recht voor om informatie op te vragen over uw inkomen- en vermogenspositie en wij adviseren u altijd om u van zoveel mogelijk onafhankelijk professioneel advies te voorzien.

\n" + }, + { + "question": "Wanneer ik gebruik maak van het Modulair Wonenplan, welk bedrag ontvang ik maandelijks?", + "answer": "

Dit bedrag wordt gepersonaliseerd. Het is o.a. afhankelijk van de waarde van de woning die u achterlaat, voor welke periode u denkt de modulaire woning te gebruiken en welk type woning u kiest. In bijzondere gevallen – bijvoorbeeld wanneer u uw woning tussentijds ook al alvast aan Thuisborg wil verkopen, zijn veel hogere maandelijkse uitkeringen bespreekbaar.

\n

In de meeste gevallen ontvangt u dit bedrag netto. Raadpleeg voor uw persoonlijke omstandigheden ook een belasting- of subsidie adviseur.

\n" + }, + { + "question": "Welke kosten zijn voor mij?", + "answer": "

Wanneer u een modulaire woning huurt stelt Thuisborg de modulaire woning beschikbaar en neemt de kosten van transport, plaatsing, vergunning en verzekering voor zijn rekening.
U betaalt alleen de aansluitkosten. (Kan op het netwerk van de woning) Per gemeente na te vragen.
Wanneer u een unit koopt zijn de transport, plaatsing, verzekering en aansluitkosten voor uw rekening.

\n" + }, + { + "question": "Ik woon in het buitenland kan ik hier ook gebruik van maken?", + "answer": "

Thuisborg regelt de plaatsing van de woning voor u binnen Nederland en verzorgt waar nodig de vergunning bij de gemeente. In geval van plaatsing in het buitenland maken wij een aparte offerte voor het transport. Plaatsing van woningen buiten Nederland is alleen mogelijk in combinatie van beheer van uw vrijkomende woning in Nederland.

\n" + }, + { + "question": "Worden de woningen gemeubileerd opgeleverd?", + "answer": "

De woningen worden niet gemeubileerd opgeleverd. Wij bieden een bijzondere korting aan in combinatie met onze partner (Hestiva) voor de inrichting van woningen. U krijgt 20% korting op de gehele collectie van Interieur.Hestiva.nl wanneer u gebruikmaakt van de modulaire woning. Vraag om de kortingscode bij uw accountmanager.

\n" + }, + { + "question": "Hoe lang duurt het voordat mijn woning klaar is?", + "answer": "

U moet rekening houden met dat de woning niet direct klaar staat. Dit om rekening te kunnen houden met uw persoonlijke wensen. In combinatie met het intake- en offerte proces duurt het gemiddeld 8 weken voordat de woning kant en klaar is. In combinatie met een eventueel vergunningstraject bij de gemeente kan het totale traject ca. 12 weken duren.

\n" + }, + { + "question": "Kan ik ook zelf de indeling van de woning bepalen?", + "answer": "

De indeling is standaard maar wel bespreekbaar.

\n" + }, + { + "question": "Kan Thuisborg mijn eigen woning ook direct kopen?", + "answer": "

Ja. In combinatie met ons Estate Plan kunnen wij uw eigen woning direct aankopen en u een nieuwe modulaire woning leveren. U ontvangt dan maandelijks een deel van de waarde van uw eigen woning. Deze uitkering kan oplopen tot EUR 7.000 per maand, bovenop de vergoeding tot EUR 500 die u al ontvangt uit het beheer van uw vrijkomende woning. U ontvangt hier een aparte offerte voor die is afgestemd op uw wensen voor maandelijkse uitkering en einduitkering bij het verlaten van de modulaire woning. Hierdoor houdt u maandelijks een bedrag over afgestemd op uw eigen wensen en woont u in een nieuwe modulaire woning.

\n
\n

Wanneer de modulaire woning niet meer gewenst is, verzorgt Thuisborg de afvoer en het hergebruik daarvan. De oorspronkelijke woning die onze vastgoedbeheerder in beheer heeft, wordt dan verkocht. U ontvangt dan 100% van de waarde die de woning had op het moment dat de modulaire woning in gebruik werd genomen. Deze waarde wordt vastgesteld door een onafhankelijk (NWWI-) taxateur. 

\n
\n" + }, + { + "question": "Zijn de woningen energiezuinig?", + "answer": "

De woningen hebben een energielabel B. Als maatschappelijke onderneming stimuleert Thuisborg het gebruik van een zonne-energie installatie.

\n" + }, + ] + }, + { + title: '5. Investeren in Obligaties van Thuisborg', + items: [ + { + "question": "Welke informatie geldt bij voorrang in de rechtsverhouding tussen de obligatiehouders en Thuisborg in geval van strijdigheid of mogelijke onduidelijkheid?", + "answer": "

Alle effecten van Thuisborg worden uitgegeven in overeenstemming met de voorwaarden, zoals opgenomen in de akte van die producten. Daarin is steeds expliciet opgenomen, dat in geval van strijdigheid of mogelijke onduidelijkheid de specifieke bepalingen van de akte van het financiële product, voorrang vinden boven andere vormen van informatieverstrekking over dat product.

\n" + }, + { + "question": "Zijn de Algemene Consumentenvoorwaarden van toepassing op consumenten die effecten van Thuisborg kopen?", + "answer": "

De Algemene Consumentenvoorwaarden, te downloaden op de website van Thuisborg, zijn bedoeld voor de dienstverlening rondom het verzilveren van woningwaarde en de woonbegeleiding van huurders. Deze voorwaarden zijn niet van toepassing op de aankoop van de effecten van Thuisborg.

\n" + }, + { + "question": "Als ik investeer in obligaties van Thuisborg, wie zijn dan over het algemeen de huurders van door Thuisborg aan te kopen woningen?", + "answer": "

De doelgroep bestaat over het algemeen uit senioren. Veel senioren hebben een beperkt inkomen, maar wel overwaarde in hun woning. Als zij die overwaarde mogen vrijmaken, kunnen zij langer in hun eigen huis blijven wonen. Echter, banken en andere aanbieders van financiële producten bieden deze groep slechts beperkte mogelijkheden om hun overwaarde te verzilveren. Dan zou je kunnen denken aan de optie om de woning maar te verkopen en vervolgens een andere woning te gaan huren, of een kleiner huis te kopen. Maar een grote groep senioren wil helemaal niet verhuizen. Bij veel mensen is er de wens en behoefte om zo lang mogelijk in het eigen huis te blijven wonen en men is bereid daarvoor het vermogen in dat huis te gebruiken om dat mogelijk te maken, bijvoorbeeld ter aanvulling op het pensioen of voor additionele (toekomstige) zorg. Uit verschillende onderzoeken is deze wens naar voren gekomen.

\n" + }, + { + "question": "Waarom zijn de rendementen uit investeringen beperkt tot een vast maximum?", + "answer": "

Het inkomen van onze investeerders – het rendement of de rentevergoeding op de aangeboden effecten – wordt uiteindelijk betaald uit de huurvergoedingen die wij ontvangen van de senioren die hun huis aan ons verkocht hebben. Tijdens de looptijd van de investeringen die wij aanbieden kunnen wij vooraf bepalen welke maximale huur nog als maatschappelijk verantwoord kan gelden in verhouding tot de waarde van de woningen die ermee worden aangekocht. Dit maximum – een redelijke huur – bepaalt de maximale uitkeringen op de aangeboden effecten.

\n

Daarbij komt, dat de aangeboden rendement vergoeding moet worden afgezet tegen de zekerheid die deze investering biedt. Uiteindelijk gaat het – als wij ons werk goed doen – om de aankoop van uitvoerig geëvalueerde, goed gedocumenteerde liquide Nederlandse woningen die periodiek onderhouden worden, met tevreden huurders die daar nog lang in willen blijven wonen.

\n" + }, + { + "question": "Zijn de obligaties gedekt door zekerheden?", + "answer": "

De belangrijkste zekerheid voor obligatiehouders wordt gevormd doordat Thuisborg slechts een beperkte aanbetaling doet op het onroerend goed dat zij in bezit krijgt. Als uitgangspunt geldt dat Thuisborg tot ca. 80% van de marktwaarde (afhankelijk van de gekozen aankoopformule en de persoonlijke wensen van de verkoper) zal investeren voor de aankoop van een hypotheekvrije, liquide woning.

\n" + }, + { + "question": "Wat moet ik doen als ik mijn obligaties wil verkopen?", + "answer": "

De obligaties zijn niet genoteerd aan een gereglementeerde markt waarop vraag en aanbod van effecten elkaar treffen. De obligaties kunnen daarom in de praktijk alleen onderhands worden verkocht. Voorwaarde daarbij is dat daarvoor ook instemming van Thuisborg is verkregen. Thuisborg zal andere obligatiehouders die hebben aangegeven in obligaties geïnteresseerd zijn, dan op verzoek contacteren. Maar u kunt zelf ook een koper vinden buiten de kring van bestaande obligatiehouders.

\n" + }, + { + "question": "Kan ik deelnemen vanuit het buitenland?", + "answer": "

Deelname in de obligaties staat open voor natuurlijke- en rechtspersonen op basis van het informatiedocument en de voorwaarden van de obligaties.

\n

De obligaties worden steeds uitgegeven voor aanbieding en verhandeling vanuit Nederland.

\n" + }, + { + "question": "Probeert Thuisborg buiten de te werken?", + "answer": "

Thuisborg werkt steeds binnen het toezicht van de AFM en heeft van tijd tot tijd ook afstemming met de AFM over haar aanbieding(en).

\n

Het overleg met de AFM omvat zaken als:

\n

– oprichtingskosten en voorinvesteringen,

\n

– productvoorwaarden en – rendementsberekeningen,

\n

– algemene voorwaarden en de structuur van de rapportage over de betrokken rechtspersonen,

\n

– cash flow prognoses en de communicatie met investeerders.

\n

Hierbij wordt vooral gekeken of alle essentiële informatie aan consumenten is verstrekt ten tijde van de overeenkomst in het kader van de Wet handhaving consumentenbescherming en de Wet oneerlijke handelspraktijken. De AFM beoordeelt daarop gedurende de looptijd van de effecten of Thuisborg conform deze wettelijke beschermingsbepalingen handelt.

\n" + }, + { + "question": "Waarom is er geen AFM-toezicht op de aangeboden investeringen?", + "answer": "

De standaard AFM vrijstellingsvermelding zegt niets over de kwaliteit van de aanbieding maar informeert u enkel over het feit dat deze is vrijgesteld van de verplichting om een Wft-prospectus te publiceren. Er is wel degelijk toezicht van de AFM op de aanbieding van deze effecten van Thuisborg. Echter, dat toezicht is gebaseerd op de Wet handhaving consumentenbescherming (Whc), niet op de Wet financieel toezicht (Wft).

\n" + }, + { + "question": "Wat betekent de vermelding: 'Geen prospectusplicht voor deze activiteit?'", + "answer": "

Deze vermelding betekent dat deze aanbieding van effecten door Thuisborg vrijgesteld is van de prospectusplicht zoals bedoeld in de Wet op het Financieel Toezicht (‘Wft’), omdat daar een vrijstelling van beschikbaar is.

\n

De meest bekende vrijstelling is de grens van € 5,0 miljoen. ‘Kleine’ aanbiedingen, die onder deze grens vallen, zijn daarmee automatisch vrijgesteld van de (Europese) prospectuswetgeving. De reden voor de vrijstelling is dat deze wetgeving te uitgebreid en duur is voor kleine aanbieders, waardoor het niet mogelijk is om dergelijke effecten zonder deze vrijstelling aan te bieden.

\n

In het geval een aanbieder gebruik maakt van deze vrijstelling, schrijft de AFM een verplichte waarschuwingstekst voor, die op een voorgeschreven manier bekend moet worden gemaakt.

\n" + }, + { + "question": "Is het risico voor een obligatiehouder / deelnemer lager dan dat voor de aandeelhouder?", + "answer": "

In principe wordt eerst het eigen vermogen van Thuisborg als eerste aangesproken indien Thuisborg niet aan haar verplichtingen kan voldoen. Thuisborg en haar holdingmaatschappij Soliditry B.V. hebben echter een beperkt vermogen (eigen vermogen plus garanties) om tegenvallers op te vangen. Dit betekent dat tegenvallende resultaten in de ontwikkeling van Thuisborg ook gevolgen kunnen hebben voor de obligatiehouders / deelnemers.

\n" + }, + { + "question": "Welke bijzondere voordelen biedt u aan obligatiehouders die ook hun huis willen verkopen?", + "answer": "

Welke bijzondere voordelen biedt u aan obligatiehouders die ook hun huis willen verkopen?

\n

De obligaties die wij uitgeven, zijn standaard producten. De dienstverlening rondom uw huis wordt door Thuisborg volledig aangepast aan uw individuele situatie. Daarin kunnen wij dus rekening houden met de voordelen van een intensieve samenwerking.

\n

In gelijke gevallen zullen huizenbezitters die ook al bij ons investeren, voorrang genieten bij transacties rondom hun woning. Gedeelde kostenvoordelen, wanneer u als huurder ook investeert in de obligaties van Thuisborg, kunnen leiden tot lagere huur-, transactie- of onderhoudskosten, al naar gelang de persoonlijke situatie en de mogelijkheden van de betrokken woning. Dit wordt geheel aangepast aan de persoonlijke wensen van de huurder.

\n

Evenzo worden bestaande investeerders die op zoek zijn naar directe vastgoedinvesteringen, door ons persoonlijk op de hoogte gebracht van nieuwe bijzondere aanbiedingen.

\n" + }, + { + "question": "Kan ik een obligatie schenken?", + "answer": "

Ja, het is mogelijk om een obligatie te schenken aan een derde. De rechten op (eind-)uitkering, hoofdsom en rendement worden dan door Thuisborg op naam van de ontvanger geregistreerd. U ontvangt een certificaat op naam van deze persoon bij het afsluiten van schenking.

\n" + }, + { + "question": "Is een vastgoed obligatie hetzelfde als een obligatie?", + "answer": "

De term obligatie wordt vaak gebruikt in verband met de uitgifte van waardepapieren die door de Nederlandse overheid worden uitgegeven (‘Staatsobligaties’). Staatsobligaties bieden een gering risico met een doorgaans lager rendement. Obligaties kunnen ook door ondernemingen worden uitgegeven, waaronder door Thuisborg om er vastgoed mee aan te kopen of te ontwikkelen. In vergelijking met Staatsobligaties bieden de obligaties van Thuisborg een hoger rendement, tegen een hoger risico.

\n" + }, + { + "question": "Wat zijn Woningwaarde Vastgoed Obligaties?", + "answer": "

Woningwaarde Vastgoed Obligaties zijn obligaties en worden aangeboden door Thuisborg Finance B.V. Ze zijn bedoeld voor investeerders die willen beleggen in de prijsontwikkeling van de Nederlandse particuliere woningmarkt. Zie Vastgoed Obligaties.

\n

Met de aangetrokken gelden worden hypotheekvrije, goed verkoopbare en langjarig verhuurde woningen bemiddeld en aangekocht. Daarnaast wordt er geïnvesteerd in de verdere ontwikkeling van het verzilveren van woningen, in de begeleiding van zowel huurders als investeerders, in de ontwikkeling van een online handelsplatform (Borgplaats) en in onze website als digitaal platform, met alle daaraan gekoppelde dienstverlening.

\n" + } + ] + } + ], + }; + }, + methods: { + toggleSearch: function () { + this.$store.commit('toggleSearch'); + }, + toggleFaq: function (elm) { + let clicked = elm.target, + parent = clicked.closest('.faq-set__item'), + parentStat = parent.classList.contains('active'); + if (parentStat) { + parent.classList.remove('active'); + } else { + parent.classList.add('active'); + } + }, + navClick($event) { + // + // let url = window.location; + // let targeturl = $event.target.getAttribute('href').replace('#', ''); + // if (!document.getElementById(targeturl)) { + // window.location.href = url.origin + '/#' + targeturl; + // } else { + // setTimeout(function () { + // window.location.hash = targeturl + // }, 1000); + // } + // this.closeNavIfIsOpened(); + }, + closeNavIfIsOpened: function () { + if (this.$store.getters.getNav) { + this.$store.commit('toggleNav'); + } + }, + isMobile: function () { + if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) + || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) { + return true; + } else { + return false; + } + }, + findOS: function () { + let userAgent = window.navigator.userAgent, + platform = window.navigator.platform, + macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'], + windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'], + iosPlatforms = ['iPhone', 'iPad', 'iPod'], + os = null; + + if (macosPlatforms.indexOf(platform) !== -1) { + os = 'mac'; + } else if (iosPlatforms.indexOf(platform) !== -1) { + os = 'ios'; + } else if (windowsPlatforms.indexOf(platform) !== -1) { + os = 'windows'; + } else if (/Android/.test(userAgent)) { + os = 'android'; + } else if (!os && /Linux/.test(platform)) { + os = 'linux'; + } + + return os; + }, + navCta: function () { + if (window.location.pathname.includes('/investeren')) { + let btn = document.querySelector('.nav-header__menu__items .btn'); + btn.innerText = 'Download brochure'; + btn.href = "#"; + btn.addEventListener('click', function () { + let element = document.getElementById('invest-form'), + headerOffset = 100, + elementPosition = element.getBoundingClientRect().top, + offsetPosition = elementPosition + window.pageYOffset - headerOffset; + window.scrollTo({ + top: offsetPosition, + behavior: "smooth" + }); + }); + } + if (window.location.pathname.includes('/beleggingspanden')) { + let btn = document.querySelector('.nav-header__menu__items .btn'); + btn.innerText = 'Oriëntatiegesprek aanvragen'; + btn.href = "#"; + btn.addEventListener('click', function () { + let element = document.getElementById('request-call'), + headerOffset = 100, + elementPosition = element.getBoundingClientRect().top, + offsetPosition = Math.round(elementPosition + window.pageYOffset - headerOffset); + element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});//safari + window.scroll({ + top: offsetPosition, + behavior: 'smooth' + });//chrome + }); + } + }, + }, + created() { + let _this = this; + this.$store.commit('setMobile', {mobile: this.isMobile(), width: window.innerWidth, os: this.findOS()}); + window.addEventListener("resize", function (ev) { + _this.$store.commit('hideNav'); + _this.$store.commit('setMobile', {mobile: _this.isMobile(), width: window.innerWidth}); + }); + this.$store.commit('parseLang'); + }, + mounted() { + this.navCta(); + }, + watch: {} +}); diff --git a/src/js/components/Contact.vue b/src/js/components/Contact.vue new file mode 100644 index 00000000..e1288a96 --- /dev/null +++ b/src/js/components/Contact.vue @@ -0,0 +1,107 @@ + + + diff --git a/src/js/components/CurrencyInput.vue b/src/js/components/CurrencyInput.vue new file mode 100644 index 00000000..a1f8c7f5 --- /dev/null +++ b/src/js/components/CurrencyInput.vue @@ -0,0 +1,27 @@ + + diff --git a/src/js/components/Hamburger.vue b/src/js/components/Hamburger.vue index c2d14419..500fd662 100644 --- a/src/js/components/Hamburger.vue +++ b/src/js/components/Hamburger.vue @@ -2,9 +2,9 @@
- - - + + +
@@ -24,76 +24,8 @@ export default { this.$store.commit('toggleNav'); } }, + mounted() { + }, + watch: {} } - diff --git a/src/js/components/Loading.vue b/src/js/components/Loading.vue new file mode 100644 index 00000000..50eb019c --- /dev/null +++ b/src/js/components/Loading.vue @@ -0,0 +1,62 @@ + + + diff --git a/src/js/components/MiniCalculator.vue b/src/js/components/MiniCalculator.vue new file mode 100644 index 00000000..f8f7f61f --- /dev/null +++ b/src/js/components/MiniCalculator.vue @@ -0,0 +1,139 @@ + + + diff --git a/src/js/components/Modal.vue b/src/js/components/Modal.vue new file mode 100644 index 00000000..ff5c084c --- /dev/null +++ b/src/js/components/Modal.vue @@ -0,0 +1,61 @@ + + + diff --git a/src/js/components/Mollie.vue b/src/js/components/Mollie.vue new file mode 100644 index 00000000..580e4106 --- /dev/null +++ b/src/js/components/Mollie.vue @@ -0,0 +1,151 @@ + + + diff --git a/src/js/components/MollieRedirect.vue b/src/js/components/MollieRedirect.vue new file mode 100644 index 00000000..9cc4f01a --- /dev/null +++ b/src/js/components/MollieRedirect.vue @@ -0,0 +1,242 @@ + + + diff --git a/src/js/components/Overzicht.vue b/src/js/components/Overzicht.vue new file mode 100644 index 00000000..428a01a9 --- /dev/null +++ b/src/js/components/Overzicht.vue @@ -0,0 +1,228 @@ + + + diff --git a/src/js/components/SteppedFormHandler.vue b/src/js/components/SteppedFormHandler.vue new file mode 100644 index 00000000..7a80554e --- /dev/null +++ b/src/js/components/SteppedFormHandler.vue @@ -0,0 +1,310 @@ + + + \ No newline at end of file diff --git a/src/js/components/TBRegister19.vue b/src/js/components/TBRegister19.vue new file mode 100644 index 00000000..c1b51aaa --- /dev/null +++ b/src/js/components/TBRegister19.vue @@ -0,0 +1,2057 @@ + + + \ No newline at end of file diff --git a/src/js/components/TBRegister20.vue b/src/js/components/TBRegister20.vue new file mode 100644 index 00000000..ad420d40 --- /dev/null +++ b/src/js/components/TBRegister20.vue @@ -0,0 +1,2037 @@ + + + \ No newline at end of file diff --git a/src/js/components/TBRegister21.vue b/src/js/components/TBRegister21.vue new file mode 100644 index 00000000..badde1c4 --- /dev/null +++ b/src/js/components/TBRegister21.vue @@ -0,0 +1,2064 @@ + + + \ No newline at end of file diff --git a/src/js/components/TBRegister22.vue b/src/js/components/TBRegister22.vue new file mode 100644 index 00000000..e5c9ab7c --- /dev/null +++ b/src/js/components/TBRegister22.vue @@ -0,0 +1,2037 @@ + + + \ No newline at end of file diff --git a/src/js/components/TBRegister23.vue b/src/js/components/TBRegister23.vue new file mode 100644 index 00000000..c9c0836a --- /dev/null +++ b/src/js/components/TBRegister23.vue @@ -0,0 +1,2073 @@ + + + \ No newline at end of file diff --git a/src/js/components/TBRegister24.vue b/src/js/components/TBRegister24.vue new file mode 100644 index 00000000..941dd036 --- /dev/null +++ b/src/js/components/TBRegister24.vue @@ -0,0 +1,2037 @@ + + + \ No newline at end of file diff --git a/src/js/components/TBRegisterSteps19.vue b/src/js/components/TBRegisterSteps19.vue new file mode 100644 index 00000000..f01dc737 --- /dev/null +++ b/src/js/components/TBRegisterSteps19.vue @@ -0,0 +1,1801 @@ + + + \ No newline at end of file diff --git a/src/js/components/ZohoRule.vue b/src/js/components/ZohoRule.vue new file mode 100644 index 00000000..8c7c213a --- /dev/null +++ b/src/js/components/ZohoRule.vue @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/js/components/ZohoSignature.vue b/src/js/components/ZohoSignature.vue new file mode 100644 index 00000000..b47201f3 --- /dev/null +++ b/src/js/components/ZohoSignature.vue @@ -0,0 +1,71 @@ + + + diff --git a/src/js/components/calculator.vue b/src/js/components/calculator.vue new file mode 100644 index 00000000..e9b31b17 --- /dev/null +++ b/src/js/components/calculator.vue @@ -0,0 +1,925 @@ + + diff --git a/src/js/components/calculator2024.vue b/src/js/components/calculator2024.vue new file mode 100644 index 00000000..d571209e --- /dev/null +++ b/src/js/components/calculator2024.vue @@ -0,0 +1,653 @@ + + diff --git a/src/js/components/commentSlider.vue b/src/js/components/commentSlider.vue new file mode 100644 index 00000000..b63f625b --- /dev/null +++ b/src/js/components/commentSlider.vue @@ -0,0 +1,84 @@ + + diff --git a/src/js/components/formHandler.vue b/src/js/components/formHandler.vue new file mode 100644 index 00000000..792a7d5d --- /dev/null +++ b/src/js/components/formHandler.vue @@ -0,0 +1,193 @@ + + + \ No newline at end of file diff --git a/src/js/components/popUp.vue b/src/js/components/popUp.vue new file mode 100644 index 00000000..5ad725c4 --- /dev/null +++ b/src/js/components/popUp.vue @@ -0,0 +1,117 @@ + + + diff --git a/src/js/components/priceInput.vue b/src/js/components/priceInput.vue new file mode 100644 index 00000000..5f5d1ac5 --- /dev/null +++ b/src/js/components/priceInput.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/js/components/registeration.vue b/src/js/components/registeration.vue new file mode 100644 index 00000000..f2f2244f --- /dev/null +++ b/src/js/components/registeration.vue @@ -0,0 +1,400 @@ + + diff --git a/src/js/directives/animate.vue b/src/js/directives/animate.vue new file mode 100644 index 00000000..c46205ec --- /dev/null +++ b/src/js/directives/animate.vue @@ -0,0 +1,32 @@ + diff --git a/src/js/directives/tabs.vue b/src/js/directives/tabs.vue new file mode 100644 index 00000000..a139a214 --- /dev/null +++ b/src/js/directives/tabs.vue @@ -0,0 +1,114 @@ + diff --git a/src/js/directives/toggler.vue b/src/js/directives/toggler.vue new file mode 100644 index 00000000..d6ea564b --- /dev/null +++ b/src/js/directives/toggler.vue @@ -0,0 +1,29 @@ + \ No newline at end of file diff --git a/src/js/helpers/zoho_signature.js b/src/js/helpers/zoho_signature.js new file mode 100644 index 00000000..b90ed562 --- /dev/null +++ b/src/js/helpers/zoho_signature.js @@ -0,0 +1,181 @@ +const event = new CustomEvent("change"); +export const zf_SetCanvasElemWidth = function (linkName) { + var canvasElem = document.getElementById("drawingCanvas-" + linkName); + if (canvasElem !== null && canvasElem.nodeName == 'CANVAS') { + var imgElem = document.getElementById("img-" + linkName); + var signContainerSignature = document.getElementById("signContainer-" + linkName); + canvasElem.width = signContainerSignature.parentNode.offsetWidth; + if (imgElem) { + imgElem.setAttribute("class", "signImg");// No I18N + } + } +} + +export const zf_AddEventListenersToCanvas = function (canvasElem) { + canvasElem.addEventListener("mousedown", function (event) { + var context = canvasElem.getContext("2d");// No I18N + var position = zf_GetXYCoords(event, canvasElem, false); + context.moveTo(position.X, position.Y); + context.beginPath(); + var startScribble = function (event) { + zf_StartScribbling(event, canvasElem, context, false); + } + var endScribble = function (event) { + zf_EndScribbling(event, canvasElem, context, startScribble, endScribble); + } + this.addEventListener("mousemove", startScribble, false); + this.addEventListener("mouseup", endScribble, false); + this.addEventListener("mouseout", endScribble, false); + this.addEventListener('touchstart', function (event) { + position = zf_GetXYCoords(event, canvasElem, true); + context.moveTo(position.X, position.Y); + context.beginPath(); + event.preventDefault(); + zf_changeFlag(canvasElem); + }, false); + this.addEventListener('touchmove', function (event) { + zf_StartScribbling(event, canvasElem, context, true); + event.preventDefault(); + zf_changeFlag(canvasElem); + }, false); + }); + var userAgent = window.navigator.userAgent; + var msie = userAgent.indexOf("MSIE "); + if (msie > 0) { + this.addEventListener("keypress", function (event) { + if (event.keyCode === 13) { + event.preventDefault(); + zf_changeFlag(canvasElem); + } + }); + } + +} + +export const zf_ClearSignature = function (signElemID) { + var signatureElem = document.getElementById(signElemID); + var signContext = signatureElem.getContext("2d");// No I18N + signContext.clearRect(0, 0, signatureElem.width, signatureElem.height); + zf_changeFlag(signatureElem); +} + +export const zf_GetXYCoords = function (event, signatureElem, isTouchEvent) { + var xCoordinate, yCoordinate; + var signElemLeftPos = zf_GetOffsetLeft(signatureElem); + var signElemTopPos = zf_GetOffsetTop(signatureElem); + + var xPosition, yPosition; + if (!isTouchEvent) { + xPosition = event.clientX; + yPosition = event.clientY; + } else { + xPosition = event.changedTouches[0].clientX; + yPosition = event.changedTouches[0].clientY; + } + + if (!isTouchEvent && (event.pageX || event.pageY)) { + xCoordinate = event.pageX; + yCoordinate = event.pageY; + } else if (isTouchEvent && (event.changedTouches[0].pageX || event.changedTouches[0].pageY)) { + xCoordinate = event.changedTouches[0].pageX; + yCoordinate = event.changedTouches[0].pageY; + } else { + xCoordinate = xPosition + document.body.scrollLeft + document.documentElement.scrollLeft; + yCoordinate = yPosition + document.body.scrollTop + document.documentElement.scrollTop; + } + var xVal = xCoordinate - signElemLeftPos; + var yVal = yCoordinate - signElemTopPos; + return {X: xVal, Y: yVal}; +} + +export const zf_GetOffsetLeft = function (signElem) { + var rect = signElem.getBoundingClientRect(); + var offSetLeft = document.body.scrollLeft; + if (offSetLeft == 0) { + offSetLeft = offSetLeft + rect.left + document.documentElement.scrollLeft; + } else { + offSetLeft = offSetLeft + rect.left; + } + return offSetLeft; +} + +export const zf_GetOffsetTop = function (signElem) { + var rect = signElem.getBoundingClientRect(); + var offSetTop = document.body.scrollTop; + if (offSetTop == 0) { + offSetTop = offSetTop + rect.top + document.documentElement.scrollTop; + } else { + offSetTop = offSetTop + rect.top; + } + return offSetTop; +} + +export const zf_StartScribbling = function (event, canvasElem, context, isTouchEvent) { + var position = zf_GetXYCoords(event, canvasElem, isTouchEvent); + context.lineTo(position.X, position.Y); + context.stroke(); + context.strokeStyle = "#000000"; // No I18N + zf_changeFlag(canvasElem); +} + +export const zf_EndScribbling = function (event, canvasElem, context, startScribleEventListn, endScribleEventListn) { + context.closePath(); + canvasElem.removeEventListener("mousemove", startScribleEventListn); + canvasElem.removeEventListener("mouseup", endScribleEventListn); + canvasElem.removeEventListener("mouseout", endScribleEventListn); + zf_changeFlag(canvasElem); +} + +export const zf_isCanvasEmpty = function (signElemID) { + const cnv = document.getElementById(signElemID); + const blank = document.createElement('canvas'); + blank.width = cnv.width; + blank.height = cnv.height; + return cnv.toDataURL() === blank.toDataURL(); +} +export const zf_changeFlag = function (elm) { + elm.dispatchEvent(event); +} +export const syncInputWithCanvas = function (input, canvasElem) { + input.value = canvasElem.toDataURL(); +} +export const zf_ValidateSignature = function (objElem) { + // unused but is a part of it, maybe needs to be used in future + var linkName = objElem.getAttribute("compname"); + var canvasElem = document.getElementById("drawingCanvas-" + linkName); + var isValidSign = zf_IsSignaturePresent(objElem, linkName, canvasElem); + var hiddenSignInputElem = document.getElementById("hiddenSignInput-" + linkName); + if (isValidSign) { + hiddenSignInputElem.value = canvasElem.toDataURL(); + } else { + hiddenSignInputElem.value = "";// No I18N + } + return isValidSign; +} + +export const zf_MandatoryCheckSignature = function (objElem) { + // unused but is a part of it, maybe needs to be used in future + var linkName = objElem.getAttribute("compname"); + var canvasElem = document.getElementById("drawingCanvas-" + linkName); + var isValid = zf_IsSignaturePresent(objElem, linkName, canvasElem); + return isValid; +} + +export const zf_IsSignaturePresent = function (objElem, linkName, canvasElem) { + // unused but is a part of it, maybe needs to be used in future + var context = canvasElem.getContext('2d'); // No I18N + var canvasWidth = canvasElem.width; + var canvasHeight = canvasElem.height; + var canvasData = context.getImageData(0, 0, canvasWidth, canvasHeight); + var signLen = canvasData.data.length; + var flag = false; + for (var index = 0; index < signLen; index++) { + if (!canvasData.data[index]) { + flag = false; + } else if (canvasData.data[index]) { + flag = true; + break; + } + } + return flag; +} \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 3ccea1af..396c256b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -34,16 +34,9 @@ const app = createApp({ }); app - // Add mixins to Vue .mixin(translateMixin) - - // Add vuex store to Vue .use(store) - - // Add directives to Vue .directive('animate', Animate) - - // Add component to Vue .component('hamburger', Hamburger) .mount('#app'); diff --git a/src/js/store/calculator_module.js b/src/js/store/calculator_module.js new file mode 100644 index 00000000..783318da --- /dev/null +++ b/src/js/store/calculator_module.js @@ -0,0 +1,27 @@ +const calculator = { + state: {}, + mutations: { + somemutation(state, mode) { + state.searchFields.view = mode; + this.dispatch('updateQSFromParams'); + } + }, + getters: { + somegetter: state => { + /* returns search result */ + return state.filteredProperties; + }, + + }, + actions: { + + someactiion({commit}) { + commit('loading', true); + commit('doSearch'); + commit('sortList'); + commit('loading', false); + commit('filteredUpdate'); + }, + }, +}; +export default calculator; \ No newline at end of file diff --git a/src/js/store/index.js b/src/js/store/index.js index 8fb6c07f..c59b6c8b 100644 --- a/src/js/store/index.js +++ b/src/js/store/index.js @@ -1,9 +1,13 @@ import {addObserver} from '../helpers/utils.js'; +import calculator_module from './calculator_module'; import {createStore} from 'vuex'; export default createStore({ - modules: {}, + modules: { + calculator: calculator_module + }, state: { + search: false, device: { mobile: false, width: 0, os: null, }, @@ -24,8 +28,22 @@ export default createStore({ layout: 'modal', closeBtnClass: '' }, + lightbox: { + index: null, + list: [] + }, + snackList: [], }, mutations: { + //Lightbox + setLightbox: function (state, payload) { + state.lightbox = payload; + }, + unsetLightbox: function (state) { + state.lightbox.index = null; + state.lightbox.list = []; + }, + //Translation & language parseLang: function (state) { state.dictionary = [] state.dictionaryLoaded = true; @@ -41,12 +59,6 @@ export default createStore({ setLang: function (state, lang) { state.lang = lang }, - setDevice: function (state, obj) { - this.dispatch('isMobile').then(res => { - state.device.mobile = res; - }) - state.device.width = window.innerWidth; - }, detectLanguage: function (state) { const qs = new URL(document.location); if (qs.pathname.includes('/nl')) { @@ -57,18 +69,26 @@ export default createStore({ state.lang = 'nl'; } }, + //Device + setBaseUrl(state) { + state.baseUrl = window.location.origin; + if (window.location.hostname === 'localhost') { + state.baseUrl = 'https://thuisborg.dotcms.online/'; + } + }, + setDevice: function (state, obj) { + this.dispatch('isMobile').then(res => { + state.device.mobile = res; + }) + state.device.width = window.innerWidth; + }, toggleNav: function (state) { state.navStatus = !state.navStatus; }, hideNav: function (state) { state.navStatus = false; }, - setBaseUrl(state) { - state.baseUrl = window.location.origin; - if (window.location.hostname === 'localhost') { - // state.baseUrl = window.location.origin; - } - }, + //Modal showModal: function (state) { document.body.style.overflow = "hidden" state.modal = true; diff --git a/src/js/store/store.js b/src/js/store/store.js new file mode 100644 index 00000000..2f0a2e65 --- /dev/null +++ b/src/js/store/store.js @@ -0,0 +1,214 @@ +import Vue from 'vue'; +import calculator_module from './calculator_module'; +window.Vuex = require('vuex'); + +Vue.use(Vuex); +export default new Vuex.Store({ + modules: { + calculator: calculator_module + }, + state: { + lang: 'nl', + search: false, + modal: false, + modalObj: { + loadType: null, + purgeOnClose: false, + header: '', + body: '', + class: '', + buttons: {}, + components: [] + }, + lightbox: { + index: null, + list: [] + }, + snackList: [], + device: { + mobile: false, + width: 0, + os: null + }, + navStatus: false, + dictionary: [], + dictionaryLoaded: false + }, + mutations: { + parseJSON: function (state) { + let obj = state.dictionary, out = []; + for (let i = 0; i <= obj.en.length; i++) { + let tmp = {}, en, nl, it; + // console.log(obj.nl[i]) + for (const [key, value] of Object.entries(obj.en[i])) { + tmp.en = `${value}`; + } + for (const [key, value] of Object.entries(obj.nl[i])) { + tmp.nl = `${value}`; + } + for (const [key, value] of Object.entries(obj.it[i])) { + tmp.it = `${value}`; + } + out.push(tmp) + } + }, + parseLang: function (state) { + if (document.location.pathname === '/en') { + state.lang = 'en' + } else { + state.lang = 'nl' + } + Axios({ + method: "GET", + // url: '../lang/lang.json', //local address, + url: '/template/lang/lang.json', //server + }).then(response => { + state.dictionary = response.data + state.dictionaryLoaded = true; + // this.commit('parseJSON'); tmp for inserting languages + }).catch(error => { + console.log('error loading ditionary') + }); + }, + //lightbox + setLightbox: function (state, payload) { + state.lightbox = payload; + }, + unsetLightbox: function (state) { + state.lightbox.index = null; + state.lightbox.list = []; + }, + //modal + showModal: function (state) { + state.modal = true; + }, + hideModal: function (state) { + state.modal = false; + if (state.modalObj.purgeOnClose) { + let _this = this; + setTimeout(function () { + _this.commit('unsetModal'); + }, 500); + } + }, + unsetModal: function (state) { + state.modalObj = { + loadType: null, + purgeOnClose: false, + header: '', + body: '', + class: '', + buttons: {}, + components: [] + }; + }, + setModal: function (state, obj) { + state.modalObj.loadType = obj.loadType; + state.modalObj.purgeOnClose = obj.purgeOnClose; + state.modalObj.header = obj.header; + state.modalObj.body = obj.body; + state.modalObj.class = obj.class; + state.modalObj.component = obj.component; + if (!!obj.buttons) { + state.modalObj.buttons = obj.buttons; + } else { + state.modalObj.buttons = false; + } + if (obj.loadType == 'component') { + state.modalObj.components = []; + state.modalObj.components.push(obj.component.name); + } + this.commit('showModal'); + }, + //snack + popSnack: function (state, snack) { + for (var i = 0; i < state.snackList.length; i++) { + if (state.snackList[i] == snack) { + state.snackList.splice(i, 1); + } + } + }, + popLoadingSnack: function (state) { + let search = state.snackList.filter(x => x.type == 'loading'); + if (search.length) { + this.commit('popSnack', search[0]); + } + }, + pushSnack: function (state, snack) { + if (snack.type == 'loading') { + if (state.snackList.filter(x => x.type == 'loading').length) { + return; + } + snack.id = parseInt(Math.random() * 1000); + state.snackList.push(snack); + return snack; + } else { + snack.id = parseInt(Math.random() * 1000); + state.snackList.push(snack); + setTimeout(function (_this) { + _this.commit('popSnack', snack); + }, 5000, this); + } + }, + //set device info + setMobile: function (state, obj) { + state.device = obj; + }, + //nav + toggleNav: function (state) { + state.navStatus = !state.navStatus; + }, + hideNav: function (state) { + state.navStatus = false; + }, + hideDashNav: function (state) { + state.dashNav = false; + }, + //search + toggleSearch: function (state) { + state.search = !state.search; + }, + hideSearch: function (state) { + state.search = false; + }, + toggleContactModal: function (state) { + let modal = { + loadType: 'component', + component: {name: 'contact', options: {}}, + buttons: false, + class: 'modal-1', + }; + this.commit('setModal', modal); + } + }, + getters: { + lightbox: state => { + return state.lightbox + }, + getSnacks: state => { + return state.snackList; + }, + getModal: state => { + return state.modalObj + }, + getMobile: state => { + return state.device + }, + getNav: state => { + return state.navStatus + }, + getSearch: state => { + return state.search + }, + getlang: state => { + return state.lang + }, + getDictionary: state => { + return state.dictionary + }, + getDictionaryLoaded: state => { + return state.dictionaryLoaded + } + }, + actions: {} +}); diff --git a/src/styles/app.scss b/src/styles/app.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/styles/components/_btn.scss b/src/styles/components/_btn.scss index e69de29b..d8762b9f 100644 --- a/src/styles/components/_btn.scss +++ b/src/styles/components/_btn.scss @@ -0,0 +1,108 @@ +@use "@/styles/utils" as *; + +.btn { + background: $green; + color: $white; + border-radius: .8rem; + padding: 2rem 3rem; + line-height: 1; + font-size: 1.8rem; + font-weight: 500; + border: none; + cursor: pointer; + box-shadow: 0 3px 13px rgba($black, 0.24); + display: inline-block; + + &:hover { + color: $white; + opacity: .9; + } + + &.white { + background: $white; + color: $green; + + &:hover { + color: $green; + } + } + + &.large { + padding: 2.5rem 7.5rem; + } + + &.no-bg { + background: none; + color: $navy; + box-shadow: none; + } + + &.outline { + background: none; + border: .1rem solid; + line-height: .9; + + &.green { + color: $green; + border-color: $green; + box-shadow: none; + } + } + + &.navy { + color: $navy; + } + + &.small { + font-size: 1.8rem; + } + + + &.btn-blue { + background: #2f66a0; + } + + &.btn-deactivate { + background: #b2f0de; + } + + &.btn-style { + border-radius: 0; + margin: 0 auto; + } + + &.btn-style-radius { + border-radius: 2px; + } + + &.btn-disabled { + background-color: #ebebeb; + color: black; + font-weight: bold; + } + + //#redesign + &.v2 { + border-radius: 2px; + box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.25); + } + + &.some-green { + background: #63d8b3; + } +} + +//#redesign +.link { + font-style: italic; + color: $navy-3; + font-weight: 500; + text-decoration: underline; + margin-top: 3rem; + font-size: 1.8rem; + + @include mobile { + font-size: 1.6rem; + margin: 2rem auto; + } +} \ No newline at end of file diff --git a/src/styles/components/_calculator-2024.scss b/src/styles/components/_calculator-2024.scss new file mode 100644 index 00000000..1666db62 --- /dev/null +++ b/src/styles/components/_calculator-2024.scss @@ -0,0 +1,735 @@ +@use "@/styles/utils" as *; + +.calculator-v2024 { + background-color: $gray; + padding: 7rem 4%; + + .predef-con { + text-align: center; + margin: 0 auto; + max-width: 960px; + padding: 4rem 0; + + h2 { + display: block; + text-align: center; + font-size: 4.3rem; + font-weight: bold; + color: #0e68a5; + line-height: 1; + } + + h3 { + color: $green; + font-weight: bold; + font-size: 3.2rem; + margin: 2rem 0; + } + + a { + color: $black; + text-decoration: underline; + } + } + + .calculator-v2024-comp { + display: flex; + overflow: hidden; + border-radius: 5rem; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, .06); + + .questions-result { + flex: 1; + background-color: $white; + display: flex; + justify-content: space-between; + + .questions-frame { + overflow: hidden; + padding: 6rem; + background-color: $gray; + flex: 1; + + .questions { + transition: transform .3s ease-in-out; + //flex-basis: 50%; + display: flex; + flex-flow: row; + flex-wrap: nowrap; + gap: 6rem; + width: 100%; + + .switch input[type=checkbox]:checked + label { + background-color: $green; + } + + .question-set { + flex: 0 0 auto; + width: 100%; + } + + .question { + margin-bottom: 4rem; + position: relative; + + &:last-of-type { + margin-bottom: 0; + } + + .question-container { + margin-bottom: 2rem; + + label { + font-size: 1.8rem; + font-weight: 500; + + .number { + color: $navy; + font-weight: 500; + } + + span { + color: $black-1; + } + } + + .has-tooltip { + background-color: $green; + width: 2.2rem; + height: 2.2rem; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + + &:after { + cursor: pointer; + content: '?'; + color: $white; + font-size: 1.6rem; + } + } + } + + .field { + + .slider-added-val { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1em; + + .slider-cont { + flex: 1 + } + + .slider-val { + color: $green; + font-size: 1.4rem; + font-weight: bold; + } + } + + &.w-80 { + max-width: 80%; + } + + input { + background-color: #edf8fe; + border: 1px solid #d9eaf3; + } + + .checkbox-group { + display: flex; + align-items: center; + gap: 2rem; + + .chk-set { + display: inline-flex; + align-items: center; + + > label { + color: $navy; + font-weight: bold; + font-size: 1.4rem; + line-height: 1; + cursor: pointer; + padding-left: 1rem; + } + } + + .radioNew { + label { + border-color: $green; + + &:after { + background-color: $green; + } + } + } + } + + .vue-slider-dot-tooltip-inner { + &:after { + border-top-color: #002e5b; + } + + background-color: #002e5b; + } + + .vue-slider { + flex: 1; + } + + .vue-slider-rail { + background: #bddeff; + } + + .vue-slider-dot-handle { + background: #00dbb1; + box-shadow: none; + } + + .vue-slider-process { + background: #002e5b; + } + + .has-marks { + margin-bottom: 2rem; + + .vue-slider-marks { + + .vue-slider-mark-label { + font-weight: bold; + color: $green; + } + } + } + } + + &.disabled { + &:after { + position: absolute; + width: 100%; + height: 100%; + backdrop-filter: grayscale(100); + background: rgb(243, 247, 250, .5); + top: 0; + left: 0; + content: ''; + z-index: 99; + + } + } + } + } + + &.extended { + .questions { + transform: translateX(calc(-100% - 6rem)); + } + } + + &.personal-info { + .questions { + transform: translateX(calc(-200% - 12rem)); + } + } + } + + .results { + //background: hsla(205, 46%, 10%, 1); + //background: linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%); + //background: -moz-linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%); + //background: -webkit-linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%); + //background: hsla(213, 77%, 14%, 1); + //background: linear-gradient(90deg, hsla(213, 77%, 14%, 1) 0%, hsla(202, 27%, 45%, 1) 100%); + //background: -moz-linear-gradient(90deg, hsla(213, 77%, 14%, 1) 0%, hsla(202, 27%, 45%, 1) 100%); + //background: -webkit-linear-gradient(90deg, hsla(213, 77%, 14%, 1) 0%, hsla(202, 27%, 45%, 1) 100%); + background-color: $white; + padding: 6rem; + width: 40rem; + //max-width: fit-content; + min-width: 280px; + flex: 0 0 auto; + + .result-wrapper { + h3 { + color: $black-3; + font-size: 2.4rem; + font-weight: bold; + line-height: 1; + margin-bottom: 4rem; + } + + .resline { + margin-bottom: 2rem; + + .title-row { + font-size: 1.6rem; + color: $black-3; + display: flex; + justify-content: space-between; + margin-bottom: 5px; + + .green-highlight { + color: $green; + text-decoration: underline; + text-decoration-color: $black-3; + text-decoration-style: dashed; + text-underline-offset: 5px; + font-weight: 500 + } + } + + .desc-row { + font-size: 1.4rem; + color: $black-3; + font-weight: 300; + } + } + + .label-question { + color: $black-1; + font-size: 1.4rem; + } + + .green-link { + cursor: pointer; + color: $navy; + font-weight: bold; + font-size: 1.4rem + } + } + + .details { + font-size: 1.4rem; + color: #648799; + margin-top: 2rem; + box-sizing: content-box; + margin-left: -6rem; + padding: 3rem 6rem; + border-top: 1px solid #ebebeb; + width: 100%; + + .green-highlight { + color: $navy; + text-decoration: underline; + text-decoration-color: $black-3; + text-decoration-style: dashed; + text-underline-offset: 5px; + font-weight: 500 + } + + .detail-set { + margin-bottom: 3rem; + position: relative; + + &:before { + position: absolute; + content: ""; + background: #ebebeb; + width: 1rem; + height: 1rem; + left: -2rem; + top: 0; + } + + .detail-row { + &:before { + display: none; + } + + padding-left: 2rem; + margin-bottom: 1rem; + + &:last-of-type { + margin-bottom: 0; + } + + + } + + h6 { + line-height: 1; + font-size: 1.4rem; + color: #648799; + margin-bottom: 1rem; + } + } + + .detail-row { + position: relative; + + &:before { + position: absolute; + content: ""; + background: #ebebeb; + width: 1rem; + height: 1rem; + left: -2rem; + top: 0; + bottom: 0; + margin: auto; + } + + b { + font-weight: 300; + } + + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 3rem; + + > * { + &:last-child { + text-align: right; + flex: 0 0 auto; + } + } + + &.single { + display: flex; + text-align: left; + + p { + display: block; + flex: 1; + text-align: left; + line-height: 2.1; + } + } + } + } + } + } + } + + .lang-switcher { + position: absolute; + right: 6rem; + top: 3rem; + display: inline-flex; + border-radius: 4px; + align-items: center; + + b { + //color: #32577c; + color: #ffffff; + font-size: 1.2rem; + margin-right: 1rem; + opacity: .5; + letter-spacing: 1px; + } + + select { + border-radius: 4px; + background: #32577c; + border: none; + font-size: 1.3rem; + cursor: pointer; + color: $green; + font-weight: 500; + + option { + font-weight: 300; + text-align: center; + } + } + } + + .tabs-col { + min-width: 30rem; + display: flex; + justify-content: flex-end; + background: hsla(213, 77%, 14%, 1); + background: linear-gradient(90deg, hsla(213, 77%, 14%, 1) 0%, hsla(202, 27%, 45%, 1) 100%); + background: -moz-linear-gradient(90deg, hsla(213, 77%, 14%, 1) 0%, hsla(202, 27%, 45%, 1) 100%); + background: -webkit-linear-gradient(90deg, hsla(213, 77%, 14%, 1) 0%, hsla(202, 27%, 45%, 1) 100%); + + //filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#08203E", endColorstr="#557C93", GradientType=1 ); + padding: 8rem 0 8rem 2%; + position: relative; + align-items: center; + + .bg { + display: block; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; + z-index: 0; + opacity: 0.3; + mix-blend-mode: exclusion; + } + + ul { + position: relative; + + + &:after { + content: ''; + width: 1.8rem; + height: calc(100% - 4rem); + position: absolute; + z-index: 0; + border-left: 2px dashed $green; + right: 6rem; + top: 0; + bottom: 0; + margin: auto; + } + + display: flex; + flex-flow: column; + gap: 6rem; + + li { + transition: ease-in-out all .3s; + cursor: pointer; + z-index: 9; + display: flex; + align-items: center; + gap: 2rem; + justify-content: flex-end; + position: relative; + padding-right: 6rem; + + &:after { + display: none; + position: absolute; + margin: auto; + right: -.5rem; + top: 0; + bottom: 0; + width: 1.2rem; + height: 1.2rem; + border-radius: 50%; + content: ''; + background-color: $green; + } + + .title { + text-align: right; + color: $white; + + h6 { + font-size: 1.8rem; + font-weight: bold; + line-height: 1; + } + + span { + opacity: 50%; + display: block; + line-height: 1.2; + font-weight: bold; + font-size: 1.4rem; + letter-spacing: 1px; + } + } + + .icon { + //background-color: #32577c; + background-color: #648799; + width: 3.6rem; + height: 3.6rem; + border-radius: 50%; + text-align: center; + display: inline-flex; + justify-content: center; + align-items: center; + flex: 0 0 auto; + + img { + display: block; + width: 1.8rem; + } + } + + &.active { + .icon { + background-color: $green; + } + + &:after { + display: block; + } + + .title { + h6 { + color: $green; + } + + span { + opacity: 1; + color: #58b5a0; + } + } + } + } + } + } + + .step-footer { + display: flex; + justify-content: flex-end; + align-items: center; + + .btns { + display: flex; + gap: 2rem; + } + + .secondary-btn { + cursor: pointer; + background-color: transparent; + font-weight: bold; + border-radius: 1rem; + padding: 1.4rem 2.8rem; + text-transform: capitalize; + font-size: 1.4rem; + transition: ease-in-out all .3s; + color: #82939f; + + &:hover { + background-color: #ededed; + color: $navy; + } + } + + .green-btn { + transition: ease-in-out all .3s; + cursor: pointer; + background-color: $green; + font-weight: bold; + color: $white; + border-radius: 1rem; + padding: 1.4rem 2.8rem; + text-transform: capitalize; + font-size: 1.4rem; + letter-spacing: 1px; + opacity: .85; + + &:hover { + opacity: 1; + } + } + } + + @media all and (max-width: 1200px) and (min-width: 960px) { + .calculator-v2024-comp { + .questions-result { + .questions-frame { + flex: 0 0 auto; + width: 50%; + } + + .results { + min-width: 0; + flex: 0 0 auto; + width: 50%; + } + } + } + } + @media all and (max-width: 960px) { + .lang-switcher { + top: 1.4rem; + right: 1.4rem; + } + .calculator-v2024-comp { + flex-flow: column; + border-radius: 3rem; + } + .tabs-col { + .bg { + display: none; + } + + padding: 4rem; + justify-content: center; + + ul { + flex-flow: row; + gap: 4rem; + + &:after { + display: none; + } + + li { + padding: 0; + flex-flow: row-reverse; + gap: 1rem; + + .title { + text-align: left; + flex: 0 0 auto; + } + + &.active { + &:after { + display: none; + } + } + } + } + } + } + @media all and (max-width: 640px) { + .calculator-v2024-comp { + .questions-result { + flex-flow: column; + + .results { + min-width: 0; + width: 100%; + } + } + } + .tabs-col { + ul { + li { + .title { + h6, span { + font-size: 1rem; + } + } + } + } + } + } +} + +.currency-container { + position: relative; + + &::before { + position: absolute; + z-index: 99; + content: "EUR"; + left: 2rem; + margin: auto; + top: 0; + bottom: 0; + color: #00dbb1; + font-weight: bold; + width: 2rem; + height: 2rem; + font-size: 1.6rem; + line-height: 2rem; + } + + input { + width: 100%; + font-size: 1.6rem; + color: #0e68a5; + font-weight: 500; + padding: 1rem 2.5rem 1rem 6rem; + } +} \ No newline at end of file diff --git a/src/styles/components/_calculator.scss b/src/styles/components/_calculator.scss new file mode 100644 index 00000000..d3b2371c --- /dev/null +++ b/src/styles/components/_calculator.scss @@ -0,0 +1,431 @@ +@use "@/styles/utils" as *; + +.calculator { + display: flex; + align-items: center; + justify-content: center; + flex-flow: column; + width: 100%; + + .section-title { + padding: 0; + margin-bottom: 4rem; + } + + .has-tooltip { + &:after { + content: 'i'; + border-radius: 50%; + border: .2rem solid $green; + width: 3rem; + height: 3rem; + text-align: center; + line-height: 3rem; + display: inline-block; + vertical-align: middle; + color: $green; + } + + cursor: pointer; + } + + .steps-cont { + width: 100rem; + flex-flow: column; + display: none; + animation-duration: .5s; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-name: fadeIn; + + &.active { + display: flex; + } + } + + .calculator__fields { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + //counter-set: list-counter; + .calculator__header { + padding-bottom: 3rem; + border-bottom: .1rem solid rgba($navy, .4); + text-align: center; + + h2 { + font-size: 3.3rem; + font-weight: 500; + line-height: 4.3rem; + color: $navy; + } + + h3 { + font-size: 3rem; + line-height: 4rem; + color: $green; + margin: 1rem 0; + } + + a { + color: $black; + border-bottom: .1rem solid; + font-size: 1.8rem; + } + } + + .calculator__row { + //counter-increment: list-counter; + //&:before{ + // content: counter(list-counter); + //} + padding: 3rem; + border-bottom: .1rem solid rgba($navy, .4); + + &:last-of-type { + border-bottom: none; + } + + .calculator__row__title { + color: $navy; + font-size: 2.4rem; + font-weight: 500; + line-height: 4rem; + margin-bottom: 2rem; + } + + .calculator__row__field { + &.price-input { + position: relative; + + &:before { + position: absolute; + z-index: 99; + content: 'EUR'; + left: 2rem; + margin: auto; + top: 0; + bottom: 0; + color: $green; + font-weight: 500; + width: 2rem; + height: 2rem; + font-size: 2rem; + line-height: 2rem; + } + + input { + position: relative; + z-index: 0; + padding-left: 6rem; + } + + .price-input { + input { + width: 100%; + font-size: 2.4rem; + color: $navy; + font-weight: 500; + line-height: 3rem; + padding: 2rem 2.5rem 2rem 6rem; + } + } + } + + + &.required { + &:before { + content: '*'; + color: red; + font-size: 1.5em; + margin-right: .5em; + vertical-align: middle; + } + } + } + + .calculator__row__value { + font-size: 2.4rem; + line-height: 4rem; + font-weight: 500; + color: $navy; + + .price { + &:before { + content: 'EUR'; + margin-right: 1rem; + } + } + + .year { + &:after { + content: 'jaar'; + margin-left: 1rem; + } + } + } + + .messages { + p { + margin-top: 1.5em; + margin-left: 1.5em; + font-size: 1.2em; + line-height: 2em; + color: red; + } + } + + } + + .submit-status { + font-size: 2.4rem; + padding: 1.5em; + + .success { + color: $green; + } + + .error { + color: red; + } + } + + input[type="text"], input[type="number"] { + font-size: 2.4rem; + color: $navy; + font-weight: 500; + line-height: 3rem; + padding: 2rem 2.5rem; + } + + select { + border-radius: 1rem; + border: 0.2rem solid rgba($black, 0.14); + font-size: 2.4rem; + color: $navy; + font-weight: 500; + line-height: 3rem; + padding: 1.7rem 2.5rem; + } + + .vue-slider-rail { + background: $white; + } + + .vue-slider-dot-handle { + background: $navy; + box-shadow: none; + + &:before { + position: absolute; + top: 1.3rem; + left: 0; + right: 0; + height: .1rem; + margin: auto; + background: rgba($white, .5); + width: 1.6rem; + content: ''; + } + + &:after { + position: absolute; + top: 1.7rem; + left: 0; + right: 0; + height: .1rem; + margin: auto; + background: rgba($white, .5); + width: 1.6rem; + content: ''; + } + } + + .vue-slider-process { + background: $green; + } + + .has-marks { + margin-bottom: 2rem; + + .vue-slider-marks { + + .vue-slider-mark-label { + font-weight: bold; + color: $green; + } + } + } + + .cw-10 { + width: calc(100% - 10rem); + } + + .cw-30 { + width: calc(100% - 30rem); + } + + .cw-40 { + width: calc(100% - 40rem); + } + + .cw-50 { + width: calc(100% - 50rem); + } + + .cw-60 { + width: calc(100% - 60rem); + } + } + + .stepchange { + width: 100%; + text-align: right; + margin-top: 4rem; + } + + .calculator__result { + width: 70%; + box-shadow: 0 3px 33px rgba($black, .05); + border-radius: 2rem; + overflow: hidden; + background: $white; + align-self: center; + + .calculator__result__section { + border-bottom: .1rem solid rgba($navy, .4); + padding: 4rem; + font-size: 1.8rem; + color: $black; + + .highlight { + font-weight: bold; + color: $navy; + } + + &:last-of-type { + border-bottom: none; + } + + &.__green { + background: $green; + color: $white; + border-bottom: none; + font-size: 2.4rem; + line-height: 3.3rem; + + .highlight { + color: $white; + } + } + } + } + + .step-2 { + .stepchange { + flex: 0 0 auto; + display: flex; + justify-content: space-between; + } + } + + .step-3 { + .stepchange { + text-align: center; + } + } + + .loading { + display: inline-block; + vertical-align: middle; + margin-bottom: -0.5rem; + + .load-spinner { + display: inline-block; + position: relative; + min-width: 3rem; + min-height: 3rem; + + div { + position: absolute; + border: .3rem solid rgba($white, .5); + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; + + &:nth-child(2) { + animation-delay: -0.5s; + } + } + } + + @keyframes lds-ripple { + 0% { + top: 45%; + left: 45%; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0; + left: 0; + width: 90%; + height: 90%; + opacity: 0; + } + } + } + + @include mobile { + .steps-cont { + width: 100%; + } + .section-title { + margin-bottom: 2rem; + } + .has-tooltip { + &:after { + width: 2rem; + height: 2rem; + line-height: 2rem; + } + } + .calculator__fields { + input[type=text], select { + font-size: 1.5rem; + line-height: 2.5rem; + padding: 1rem 1.5rem; + } + + .calculator__header { + h2, h3 { + font-size: 2rem; + line-height: 3rem; + } + } + + .calculator__row { + padding: 1rem; + + .calculator__row__title { + font-size: 1.5rem; + line-height: 2.5rem; + } + } + + *.cw-10, *.cw-20, *.cw-30, *.cw-40, *.cw-50, *.cw-60 { + width: 100%; + } + } + .calculator__result { + width: 100%; + + .calculator__result__section { + padding: 2rem; + } + } + } +} \ No newline at end of file diff --git a/src/styles/components/_form-handler.scss b/src/styles/components/_form-handler.scss new file mode 100644 index 00000000..e13cd2cb --- /dev/null +++ b/src/styles/components/_form-handler.scss @@ -0,0 +1,33 @@ +@use "@/styles/utils" as *; +@use './btn' as *; + +.js-validation-error:after { + content: attr(js-validation-message); + font-size: 1.4rem; + color: red; + display: block; +} + +.g-recaptcha { + &.error { + &:after { + content: attr(data-errormessage); + font-size: 1.4rem; + color: red; + display: block; + } + } +} + +.form-handler { + .btn.fh-flexible-btn-color { + @extend .btn-disabled; + } + + &.formIsValid { + .btn.fh-flexible-btn-color { + background-color: #00dbb1; + color: $white; + } + } +} \ No newline at end of file diff --git a/src/styles/components/_hamburger.scss b/src/styles/components/_hamburger.scss new file mode 100644 index 00000000..761fd193 --- /dev/null +++ b/src/styles/components/_hamburger.scss @@ -0,0 +1,67 @@ +@use "@/styles/utils" as *; + +.ham-cont { + display: none; + position: relative; + width: 3rem; + height: 2.4rem; + align-items: center; + justify-content: center; + + .hamburger-lines { + height: 24px; + width: 30px; + position: absolute; + top: 0; + right: 0; + z-index: 2; + display: flex; + flex-direction: column; + justify-content: space-between; + + .line { + display: block; + height: 3px; + width: 100%; + border-radius: 10px; + background: $navy; + + &.line1 { + transform-origin: 0% 0%; + transition: transform 0.4s ease-in-out; + } + + &.line2 { + transition: transform 0.2s ease-in-out; + } + + &.line3 { + transform-origin: 0% 100%; + transition: transform 0.4s ease-in-out; + } + } + } + + &.is-open { + + .hamburger-lines { + .line { + &.line1 { + transform: rotate(45deg); + } + + &.line2 { + transform: scaleY(0); + } + + &.line3 { + transform: rotate(-45deg); + } + } + } + } + + @include mobile { + display: block; + } +} \ No newline at end of file diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss new file mode 100644 index 00000000..8f3f73bf --- /dev/null +++ b/src/styles/components/_index.scss @@ -0,0 +1,19 @@ +@use "@/styles/utils" as *; + +//#TODO: resolve this 2 files + +//@import "~vue-cool-lightbox/dist/vue-cool-lightbox.min.css"; +//@import '~vue-slider-component/theme/default.css'; +@forward "./btn"; +@forward "./property-items"; +@forward "./input"; +@forward "./users-comments"; +@forward "./hamburger"; +@forward "./modal"; +@forward "./tabs"; +@forward "./calculator"; +@forward "./tooltip"; +@forward "./form-handler"; +@forward "./loading"; +@forward "./min-calc"; +@forward "./calculator-2024"; \ No newline at end of file diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss new file mode 100644 index 00000000..04c704c8 --- /dev/null +++ b/src/styles/components/_input.scss @@ -0,0 +1,23 @@ +@use "@/styles/utils" as *; + +input { + border: .2rem solid rgba($black, .14); + font-size: 1.45rem; + padding: 1.2rem; + background: $white; + border-radius: 1rem; + transition: $transition-3; + + &:focus { + border-color: rgba($navy, .5); + } +} + +textarea { + border: .2rem solid rgba($black, .14); + font-size: 1.45rem; + padding: 1.2rem; + background: $white; + border-radius: 1rem; + transition: $transition-3; +} \ No newline at end of file diff --git a/src/styles/components/_load_spinner.scss b/src/styles/components/_load_spinner.scss new file mode 100644 index 00000000..a4a6d947 --- /dev/null +++ b/src/styles/components/_load_spinner.scss @@ -0,0 +1,35 @@ +.load-spinner { + display: inline-block; + position: relative; + min-width: 4rem; + min-height: 4rem; + + div { + position: absolute; + border: .3rem solid rgba(0, 0, 0, .2); + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; + + &:nth-child(2) { + animation-delay: -0.5s; + } + } +} + +@keyframes lds-ripple { + 0% { + top: 45%; + left: 45%; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0; + left: 0; + width: 90%; + height: 90%; + opacity: 0; + } +} diff --git a/src/styles/components/_loading.scss b/src/styles/components/_loading.scss new file mode 100644 index 00000000..e64abdf3 --- /dev/null +++ b/src/styles/components/_loading.scss @@ -0,0 +1,48 @@ +@use "@/styles/utils" as *; + +.loading-holder { + display: flex; + align-items: center; + justify-content: center; + flex-flow: column; + .loading-msg{ + margin-top: 1rem; + color: #002e5b; + } +} + +.load-spinner { + position: relative; + width: 6rem; + height: 6rem; + + div { + position: absolute; + border: .3rem solid rgba(#136ba7, .2); + opacity: 1; + border-radius: 50%; + margin: auto; + top: 0; + left: 0; + right: 0; + bottom: 0; + animation: lds-ripple 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite; + + &:nth-child(2) { + animation-delay: -0.6s; + } + } +} + +@keyframes lds-ripple { + 0% { + width: 0; + height: 0; + opacity: 1; + } + 100% { + width: 90%; + height: 90%; + opacity: 0; + } +} diff --git a/src/styles/components/_message.scss b/src/styles/components/_message.scss new file mode 100644 index 00000000..b909bddd --- /dev/null +++ b/src/styles/components/_message.scss @@ -0,0 +1,34 @@ +.message { + display: block; + margin: .3rem 0; + transition: $transition-3; + font-weight: bold; + font-size: 1.2rem; + line-height: 1.5rem; + position: absolute; + left: 0; + top: 100%; + + &:before { + content: "~"; + vertical-align: middle; + margin: 0 .5rem; + display: inline-block; + } + + &.error { + color: $red; + } + + &.success { + color: $green; + } + + &.warning { + color: $yellow; + } + + &.info { + color: $blue; + } +} diff --git a/src/styles/components/_min-calc.scss b/src/styles/components/_min-calc.scss new file mode 100644 index 00000000..3c471a5c --- /dev/null +++ b/src/styles/components/_min-calc.scss @@ -0,0 +1,189 @@ +@use "@/styles/utils" as *; + +.mini-calculator { + border-radius: 1rem; + background: $gray; + //background: #e3f1fb; + //background-color: #e9f7f5; + flex-flow: column; + width: 100%; + overflow: hidden; + box-shadow: 0 10px 31px rgba(0, 0, 0, 0.115); + border: 1px solid rgba(0, 0, 0, .02); + + .flex { + display: flex; + align-items: center; + gap: 1rem; + } + + .link-to { + display: inline-flex; + align-items: center; + font-weight: bold; + font-size: 0.8em; + text-transform: capitalize; + opacity: 1; + transition: all ease-in-out .3s; + line-height: 1.2; + float: right; + background: $green; + border-radius: 4px; + padding: 0 0.8rem; + color: $white; + + i { + display: inline-block; + font-size: 1.5em; + font-weight: 500; + } + + &:hover { + opacity: .8; + } + } + + .flex-end { + display: flex; + justify-content: flex-end; + } + + .title-lang { + display: flex; + justify-content: space-between; + width: 100%; + padding: 3rem 3rem 0 3rem; + + h3 { + font-weight: bold; + color: $green; + line-height: 1; + font-size: 2rem; + } + + .lang-switcher { + display: inline-flex; + background: $white; + border-radius: 4px; + + select { + background: none; + border: none; + font-size: 1.3rem; + cursor: pointer; + color: $navy; + font-weight: 500; + + option { + font-weight: 300; + text-align: center; + } + } + } + } + + .fields-wrapper { + padding: 3rem; + } + + .results-wrapper { + padding: 3rem; + //background: $green; + background-color: #e9f7f5; + color: $white; + line-height: 1.8; + + .result-row { + //color: $black-1; + color: #959595; + } + + .color-navy { + font-weight: 500; + color: $navy; + text-decoration: underline; + text-decoration-color: $green; + text-decoration-style: dashed; + text-underline-offset: 5px; + } + } + + .field-row { + margin-bottom: 2rem; + font-weight: 500; + color: $navy; + + &:last-of-type { + margin-bottom: 0; + } + + .value-cont { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + gap: 5%; + + .vue-slider { + flex: 1; + + } + + input { + width: 10rem; + border: none + } + } + + } + + .vue-slider-rail { + background: $white; + } + + .vue-slider-dot-handle { + background: $navy; + box-shadow: none; + + &:before { + position: absolute; + top: 1.3rem; + left: 0; + right: 0; + height: .1rem; + margin: auto; + background: rgba($white, .5); + width: 1.6rem; + content: ''; + } + + &:after { + position: absolute; + top: 1.7rem; + left: 0; + right: 0; + height: .1rem; + margin: auto; + background: rgba($white, .5); + width: 1.6rem; + content: ''; + } + } + + .vue-slider-process { + background: $green; + } + + .has-marks { + margin-bottom: 2rem; + + .vue-slider-marks { + + .vue-slider-mark-label { + font-weight: bold; + color: $green; + } + } + } +} + diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss new file mode 100644 index 00000000..ca11d1d4 --- /dev/null +++ b/src/styles/components/_modal.scss @@ -0,0 +1,185 @@ +@use "@/styles/utils" as *; + +.modal-mask { + position: fixed; + z-index: 99999; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, .2); + backdrop-filter: blur(8px); + display: table; + transition: opacity .3s ease; +} + +.modal-wrapper { + display: table-cell; + vertical-align: middle; +} + +.modal-container { + min-width: 30rem; + max-width: 96vw; + margin: 0 auto; + background-color: $white; + border-radius: 2rem; + transition: $transition-3; + position: relative; + + i.close { + position: absolute; + transition: $transition-2; + display: block; + cursor: pointer; + z-index: 999; + font-size: 2.5rem; + top: 2.5rem; + right: 2.5rem; + color: $navy; + width: 3rem; + height: 3rem; + text-align: center; + border-radius: 50%; + line-height: 2.4rem; + font-weight: bold; + border: .2rem solid; + padding-left: 0.1rem; + + &:hover { + color: $blue; + } + } +} + +.modal-header { + color: $navy; + padding: 2rem; + border-bottom: .1rem solid $black; + + h3 { + text-transform: capitalize; + font-size: 2rem; + font-weight: 600; + } +} + +.modal-body { + width: 100%; + padding: 3rem; + + .body-cont { + max-height: calc(100vh - 18rem); + overflow: auto; + + &::-webkit-scrollbar-track { + //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: rgba($gray, .8); + border-radius: 1rem; + } + + &::-webkit-scrollbar { + width: .6rem; + height: .6rem; + background-color: rgba($gray, .8); + border-radius: 1rem; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba($black, .3); + border-radius: 1rem; + } + } +} + +.modal-footer { + text-align: right; +} + +.modal-default-button { + display: inline-block; + vertical-align: middle; + background: $blue; + color: $white; + padding: 0 1.6rem; + border-radius: $radius; + cursor: pointer; + box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); + margin-left: .6rem; +} + +.modal-enter, .modal-leave-active { + opacity: 0; +} + +.modal-enter .modal-container, +.modal-leave-active .modal-container { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +.modal-container { + &.modal-1 { + background: #E3F8F1; + border: .1rem solid #2F66A0; + box-shadow: none; + width: 1080px; + + .close { + color: #2F66A0; + border: none; + width: 2rem; + font-weight: normal; + height: 2rem; + font-size: 3rem; + } + + .modal-body { + padding: 5rem; + display: flex; + flex-flow: column; + align-items: center; + width: 100%; + + } + + @media all and (max-width: 1000px) { + .modal-body { + .body-cont { + width: 100%; + } + } + } + @media all and (max-width: 640px) { + .modal-body { + padding: 3rem; + + .body-cont { + + } + } + } + } +} + +@include mobile { + .modal-container { + width: 96%; + + i.close { + top: 1rem; + right: 1rem; + } + } + .modal-body { + padding: 1.5rem; + } + .modal-header { + padding: 1.5rem; + + h3 { + font-size: 1.7rem; + line-height: 1.6rem; + } + } +} \ No newline at end of file diff --git a/src/styles/components/_property-items.scss b/src/styles/components/_property-items.scss new file mode 100644 index 00000000..d6c76a8f --- /dev/null +++ b/src/styles/components/_property-items.scss @@ -0,0 +1,122 @@ +@use "@/styles/utils" as *; + +.property-items { + display: flex; + width: 100%; + flex-wrap: wrap; + + .property-items__item { + flex: 0 0 auto; + width: calc((100% - 7rem) / 3); + margin-bottom: 4.5rem; + background: $gray; + border-radius: 1.7rem; + overflow: hidden; + display: inline-flex; + flex-flow: column; + justify-content: space-between; + margin-right: 3.5rem; + + &:nth-of-type(3n) { + margin-right: 0; + } + + .img-cont { + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + overflow: hidden; + height: 34rem; + + img { + height: 100%; + width: 100%; + object-fit: cover; + } + } + + .txt-cont { + align-self: flex-end; + width: 100%; + padding: 3rem; + display: flex; + flex-direction: column; + flex: 1; + justify-content: space-between; + + p { + color: $navy; + font-size: 2.18rem; + margin-bottom: 3rem; + width: 100%; + line-height: 3.3rem; + } + + .txt-cont__footer { + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + + span { + color: $black-1; + } + } + } + } + + @include mobile { + margin-right: 0; + flex-flow: column; + .property-items__item { + width: 100%; + display: flex; + margin-bottom: 1.5rem; + flex-flow: row; + + .img-cont { + display: inline-flex; + width: 13rem; + height: 20rem; + justify-content: center; + align-items: center; + overflow: hidden; + flex: 0 0 auto; + + img { + width: auto; + min-width: auto; + } + } + + .txt-cont { + display: inline-flex; + padding: 1.5rem; + + p { + font-size: 1.5rem; + line-height: 2.4rem; + margin-bottom: 1rem; + } + + .txt-cont__footer { + align-items: flex-start; + flex-flow: column; + + span { + font-size: 1.4rem; + line-height: 2rem; + } + + .btn { + margin-top: 1rem; + align-self: flex-end; + font-size: 1.5rem; + padding: 1.2rem 1.6rem; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/components/_share.scss b/src/styles/components/_share.scss new file mode 100644 index 00000000..fc6d966c --- /dev/null +++ b/src/styles/components/_share.scss @@ -0,0 +1,71 @@ +.share-this { + z-index: 9999; + cursor: pointer; + position: relative; + + .share-title { + display: block; + width: 100%; + font-weight: 900; + text-transform: capitalize; + + .icon { + vertical-align: middle; + font-weight: bold; + } + + &:hover { + color: $black; + } + } + + ul.links { + position: absolute; + background: $black; + padding: 1.5rem; + top: calc(100% + 1.5rem); + right: 0; + line-height: 2rem; + border-radius: .4rem; + display: flex; + box-shadow: 0 0 6px rgba(0, 0, 0, .2); + + &:before { + content: ''; + width: 0; + height: 0; + position: absolute; + right: 1.5em; + bottom: 100%; + border-right: 0.6rem solid transparent; + border-left: 0.6rem solid transparent; + border-bottom: 0.6rem solid $black + } + + li { + + a { + display: block; + padding: 0 1.5rem; + white-space: nowrap; + color: $white; + + span { + font-weight: bold; + } + } + + .icon { + margin-right: .5rem; + color: $white; + } + } + } +} + +.tmpHidden { + opacity: 0; + position: absolute; + width: 0; + height: 0; +} diff --git a/src/styles/components/_snack.scss b/src/styles/components/_snack.scss new file mode 100644 index 00000000..17d2bab2 --- /dev/null +++ b/src/styles/components/_snack.scss @@ -0,0 +1,120 @@ +.snackContainer { + position: fixed; + max-width: 38rem; + bottom: 0; + z-index: 999999; + left: 0; + right: 0; + margin: auto; + + .snack { + text-align: center; + border-radius: .4rem; + background: $blue; + min-height: 5rem; + line-height: 5rem; + color: #fff; + font-size: 1.5rem; + font-weight: 500; + margin-bottom: .5rem; + box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); + + > span { + float: left; + max-width: 28rem; + text-transform: capitalize; + } + + .icon { + float: left; + margin: 1.5rem; + height: 2rem; + width: 2rem; + line-height: 2rem; + font-size: 1.2rem; + font-weight: 700; + border-radius: 50%; + background: #fff; + color: #1976d2; + text-align: center; + + &:after { + font-family: icons; + content: '\e929'; + } + } + + .close { + float: right; + margin: 1rem; + height: 3rem; + width: 3rem; + border-radius: 50%; + line-height: 2.7rem; + font-size: 2.4rem; + cursor: pointer; + + &:hover { + background: rgba(0, 0, 0, 0.06); + } + } + + &.success { + background: #00e8a8; + + .icon { + color: #00e8a8; + + &:after { + font-family: icons; + content: '\e90f'; + font-size: 2.3rem; + font-weight: normal; + margin: 0.05rem 0 0 -0.1rem; + display: inline-block; + } + } + } + + &.error { + background: #d32f2f; + + .icon { + color: #d32f2f; + + &:after { + font-family: icons; + content: '\e929'; + display: inline-block; + transform: rotate(180deg); + } + } + } + + &.warning { + background: $red; + + .icon { + color: $red; + } + } + + &.loading { + .loading-holder { + position: relative; + display: inline-block; + vertical-align: middle; + float: left; + width: 4rem; + margin: .5rem; + height: 4rem; + } + + svg.svg-loading { + stroke: $white; + max-width: 100%; + } + } + } + +} diff --git a/src/styles/components/_tabs.scss b/src/styles/components/_tabs.scss new file mode 100644 index 00000000..84fce38b --- /dev/null +++ b/src/styles/components/_tabs.scss @@ -0,0 +1,67 @@ +@use "@/styles/utils" as *; + +.tabs { + background: $white; + border-radius: 2rem; + box-shadow: 0 3px 33px rgba($black, .05); + display: flex; + justify-content: space-between; + + .nav { + border-right: .1rem solid rgba($navy, .5); + width: 30%; + flex: 0 0 auto; + display: inline-flex; + flex-flow: column; + + .nav-item { + cursor: pointer; + font-size: 2.6rem; + font-weight: 500; + line-height: 4rem; + color: $navy; + padding: 4rem; + border-bottom: .1rem solid rgba($navy, .2); + + + &.active { + position: relative; + color: $green; + border-bottom: .1rem solid rgba($navy, .5); + + &:after { + position: absolute; + left: 100%; + border-right: .1rem solid white; + width: 0; + height: 100%; + top: 0; + content: ''; + } + } + + &:hover { + color: $green; + } + } + } + + .tab-contents { + padding: 5rem; + font-size: 2.3rem; + line-height: 4rem; + color: $black-1; + + p { + margin-bottom: 2rem; + } + + .tab { + display: none; + + &.active { + display: block; + } + } + } +} diff --git a/src/styles/components/_tooltip.scss b/src/styles/components/_tooltip.scss new file mode 100644 index 00000000..896d6be5 --- /dev/null +++ b/src/styles/components/_tooltip.scss @@ -0,0 +1,112 @@ +@use "@/styles/utils" as *; + +.tooltip { + display: block !important; + z-index: 10000; + + .tooltip-inner { + background: $green; + color: white; + border-radius: 2rem; + padding: 1rem 1.5rem; + font-size: 1.4rem; + } + + .tooltip-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: $green; + z-index: 1; + } + + &[x-placement^="top"] { + margin-bottom: 5px; + + .tooltip-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="bottom"] { + margin-top: 5px; + + .tooltip-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="right"] { + margin-left: 5px; + + .tooltip-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &[x-placement^="left"] { + margin-right: 5px; + + .tooltip-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &.popover { + $color: #f9f9f9; + + .popover-inner { + background: $color; + color: black; + padding: 24px; + border-radius: 5px; + box-shadow: 0 5px 30px rgba(black, .1); + } + + .popover-arrow { + border-color: $color; + } + } + + &[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; + } + + &[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; + } +} \ No newline at end of file diff --git a/src/styles/components/_users-comments.scss b/src/styles/components/_users-comments.scss new file mode 100644 index 00000000..e069811d --- /dev/null +++ b/src/styles/components/_users-comments.scss @@ -0,0 +1,164 @@ +@use "@/styles/utils" as *; + +.users-comments { + background: $white; + + .user-comments__title-row { + display: flex; + justify-content: space-between; + + a { + font-size: 2.4rem; + line-height: 4rem; + color: $green; + border-bottom: .1rem solid; + } + } + + .comments-slider { + padding: 5.5rem 0; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + + > * { + display: inline-flex; + flex: 0 0 auto; + } + + .arrow { + width: 15.5rem; + cursor: pointer; + transition: opacity ease-in-out .3; + + img { + display: block; + } + + &.right { + justify-content: flex-end; + + img { + transform: rotate(-180deg); + } + } + + &:hover { + opacity: .8; + } + } + + .comments-slider__list { + position: relative; + overflow: hidden; + flex: auto; + + .comments-slider__list__item { + width: 100%; + flex: 0 0 auto; + + .comments-slider__list__item__comment { + display: flex; + + .comment-text { + font-size: 2.4rem; + line-height: 3rem; + color: $black-1; + display: block; + + &:before { + font-size: 0; + } + + &:after { + font-size: 7.3rem; + font-weight: bold; + color: $navy; + line-height: 1; + vertical-align: text-top; + margin-right: 2rem; + height: 4rem; + display: inline-block; + margin-left: 2rem; + content: "”"; + } + } + + .q { + font-size: 7.3rem; + font-weight: bold; + color: $navy; + line-height: 7rem; + vertical-align: text-top; + margin-right: 2rem; + } + } + + p { + color: $green; + font-size: 2.4rem; + margin-top: 3rem; + } + } + } + } + + @include mobile { + padding: 4rem 0; + .user-comments__title-row { + margin-bottom: 2rem; + + .section-subtitle { + font-size: 2.3rem; + line-height: 3.4rem; + text-align: center; + width: 100%; + } + + a { + display: none; + } + } + .comments-slider { + padding: 0; + + .arrow { + width: 2rem; + + img { + width: 2rem; + height: auto; + } + } + + .comments-slider__list { + .comments-slider__list__item { + p { + margin-top: 1rem; + font-size: 1.5rem; + line-height: 2.5rem; + padding: 0 1rem; + } + + .comments-slider__list__item__comment { + .q { + display: none; + + } + + .comment-text { + padding: 0 1rem; + font-size: 1.5rem; + line-height: 2.3rem; + + &:before, &:after { + display: none; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_catalogs.scss b/src/styles/layouts/_catalogs.scss new file mode 100644 index 00000000..b37ba7b5 --- /dev/null +++ b/src/styles/layouts/_catalogs.scss @@ -0,0 +1,441 @@ +@use "@/styles/utils" as *; +.catalogs { + padding-top: 10rem; + background-color: $white; + + .cat-cont { + background-color: $gray; + padding: 5rem 7rem; + + .title { + font-size: 3.7rem; + color: $navy-3; + font-weight: bold; + text-align: center; + } + + .tabs-main-cont { + margin-top: 4rem; + + .tabs { + flex-flow: column; + background: none; + box-shadow: none; + border-radius: 0; + + .tab-contents { + padding: 0; + margin-top: 6rem; + margin-bottom: 2rem; + + .switchtitle { + display: none; + } + } + + .nav { + width: 100%; + display: flex; + justify-content: space-between; + flex-flow: row; + border: none; + gap: 3rem; + + .nav-item { + border: none !important; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + font-size: 1.3em; + background-color: $white; + color: #999695; + padding: 1em; + border-radius: 1rem; + flex-basis: 100%; + text-align: center; + @media all and (min-width: 1000px) and (max-width: 1300px) { + font-size: 1.2em; + } + + &:after { + display: none; + } + + &.active { + background-color: #63D8B3; + color: $white; + } + } + } + + } + } + } + + .catalog-item { + position: relative; + display: flex; + overflow: hidden; + border-radius: 2rem; + + &.blur { + .img-cont { + backdrop-filter: blur(2px); + } + } + + .img-cont { + position: relative; + z-index: 0; + width: 100%; + + img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + } + } + + .notice { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + height: auto; + display: inline-table; + margin: auto; + padding: 1.5rem 3rem; + color: $navy-3; + background: rgba(233, 233, 233, .75); + opacity: 1; + + p { + font-size: 2.1rem; + font-weight: bold; + line-height: 2.6rem; + text-align: center; + margin: 0; + } + } + + .item-info { + background: rgba(233, 233, 233, .75); + position: absolute; + padding: 3rem; + width: 100%; + height: 100%; + left: 0; + overflow: hidden; + transition: .5s all ease-in-out; + display: flex; + flex-flow: column; + top: 100%; + transform: translateY(-11rem); + + h6 { + color: $navy-3; + font-weight: bold; + text-align: center; + font-size: 0; + line-height: initial; + } + + ul { + display: flex; + justify-content: space-between; + height: 6rem; + flex-flow: column; + + li { + display: flex; + width: 100%; + font-size: 1.2rem; + line-height: initial; + + &:last-of-type { + display: none; + } + + + b { + color: $navy-3; + flex-basis: 100%; + + &:after { + content: ':'; + } + } + + span { + flex-basis: 100%; + color: $black; + } + + } + } + + .al-center { + display: none; + } + + .toggle-contact { + cursor: pointer; + font-size: 0; + padding: 0; + border: none; + color: $navy-3; + border-radius: 1rem; + background: rgba($white, .6); + font-weight: bold; + } + } + + &:hover { + + .notice { + opacity: 0; + transition: .2s all ease-in-out; + } + + .item-info { + justify-content: space-between; + transform: translateY(-100%); + padding-top: 6rem; + + h6 { + font-size: 2.1rem; + transition: font-size .1s ease-in-out; + } + + .al-center { + display: block; + } + + .toggle-contact { + transition: all 1s ease-in-out; + font-size: 1.2rem; + padding: 1rem 5rem; + border: .1rem solid #63D8B3; + } + + ul { + height: auto; + + li { + &:last-of-type { + display: flex; + } + } + } + } + } + + &.hint-cell { + background: #DFEFEF; + padding: 6rem; + border-radius: 2rem; + align-items: center; + + .wrapper { + display: flex; + + img { + width: 6rem; + height: auto; + } + + p { + padding-left: 3rem; + margin-bottom: 0; + color: $black; + font-size: 2.1rem; + line-height: initial; + } + } + } + } + + @media all and (max-width: 1080px) { + .cat-cont { + padding: 4rem; + + .tabs-main-cont { + margin-top: 4rem; + + .tabs { + .nav { + + .nav-item { + font-size: 1.1em; + } + } + + } + } + } + .catalog-item { + .item-info { + padding: 3rem 1rem; + transform: translateY(-13rem); + + ul { + li { + font-size: 1.8rem; + } + } + } + + &:hover { + .item-info { + h6 { + font-size: 2.4rem; + } + + .toggle-contact { + font-size: 2.1rem; + } + } + } + + &.hint-cell { + padding: 3rem; + } + } + } + @media all and (max-width: 780px) { + .cat-cont { + padding: 0; + + .title { + padding-top: 4rem; + font-size: 2rem; + } + + .tabs-main-cont { + .tabs { + .nav { + overflow-x: scroll; + padding: 2rem; + background: #e5e5e5; + flex-wrap: nowrap; + gap: 2rem; + + .nav-item { + flex: 0 0 auto; + font-size: 1.1em; + } + } + + } + } + } + .catalog-item { + width: 100%; + flex-flow: column; + + .notice { + bottom: auto; + top: 25%; + } + + .item-info { + position: static; + background: #ededed; + transform: none; + height: auto; + padding: 2rem; + + h6 { + display: none + } + + ul { + height: auto; + margin-bottom: 2rem; + + li { + &:last-of-type { + display: flex; + } + } + } + + .al-center { + display: block; + + .toggle-contact { + font-size: 1.4rem; + padding: 1rem 5rem; + border: .1rem solid #63D8B3; + } + } + } + + &.hint-cell { + padding: 3rem; + } + + &:hover { + .item-info { + transform: translateY(0); + padding-top: 2rem; + } + + h6 { + display: none; + } + + .toggle-contact { + font-size: 1.4rem; + } + } + } + .tab-contnent__wrapper { + padding: 0 2rem; + } + } + @media all and (max-width: 480px) and (hover: none) { + + .catalog-item { + &.hint-cell { + .wrapper { + flex-flow: column; + align-items: center; + gap: 2rem; + + p { + padding: 0; + } + } + } + } + } +} + +.gridx3 { + display: grid; + justify-content: start; + align-items: stretch; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; + + + .double { + grid-column: span 2 / auto; + } + + .tripple { + grid-column: span 3 / auto; + } + + @media all and (max-width: 1080px) { + grid-template-columns: repeat(2, 1fr); + .double { + grid-column: span 1 / auto; + } + } + @media all and (max-width: 780px) { + display: flex; + align-items: center; + flex-flow: column; + } +} \ No newline at end of file diff --git a/src/styles/layouts/_form-style12.scss b/src/styles/layouts/_form-style12.scss new file mode 100644 index 00000000..00d248d6 --- /dev/null +++ b/src/styles/layouts/_form-style12.scss @@ -0,0 +1,62 @@ +@use "@/styles/utils" as *; +.form-style12 { + .form-desc { + padding-right: 30%; + font-size: 2.1rem; + margin-bottom: 2.5rem; + } + + .fields-wrapper { + padding-right: 30%; + + .form-row { + margin-bottom: 1.5rem; + + .form-row__input { + input { + width: 100%; + } + } + } + } + + .agreement-submit { + display: flex; + flex-flow: column; + + .agreement { + margin-bottom: 2.5rem; + color: $navy-3; + + input[type=checkbox] { + border: none; + } + } + + .btn { + align-self: flex-end; + + } + } + + @media all and (max-width: 900px) { + .form-desc { + padding-right: 0; + } + .fields-wrapper { + padding-right: 0; + } + } + @media all and (max-width: 480px) { + .form-desc { + font-size: 1.6rem; + } + .agreement-submit { + + .btn { + font-size: 1.4rem; + padding: 1.4rem 2.4rem; + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_hero-3.scss b/src/styles/layouts/_hero-3.scss new file mode 100644 index 00000000..ed9ac803 --- /dev/null +++ b/src/styles/layouts/_hero-3.scss @@ -0,0 +1,88 @@ +@use "@/styles/utils" as *; +.hero-3 { + background-color: $white; + padding-bottom: 4em; + + .hero-inner { + display: flex; + width: 100%; + justify-content: space-between; + background-color: $gray-2; + + .hero-content { + flex: 0 0 auto; + max-width: 58%; + padding: 7.5rem 7rem 7.5rem 7rem; + font-size: 2.1rem; + color: $black; + align-self: center; + + h1 { + font-size: 4.8rem; + line-height: 6.5rem; + font-weight: bold; + color: $navy-3; + margin-bottom: 2rem; + } + + .btn { + margin-top: 4.5rem; + } + } + + .hero-image { + display: inline-flex; + width: 42%; + flex: 0 0 auto; + max-height: 100%; + justify-content: flex-end; + + .hero-image-cont { + border-radius: 0 0 0 4rem; + overflow: hidden; + height: calc(100% + 4em); + max-width: 100%; + } + + img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + } + } + } + + @media all and (max-width: 768px) { + .hero-inner { + flex-flow: column-reverse; + + .hero-image { + width: 100%; + + .hero-image-cont { + width: calc(100% - 4rem); + height: auto; + } + } + + .hero-content { + width: 100%; + padding: 4rem; + max-width: none; + + h1 { + font-size: 3rem; + line-height: initial; + } + + p { + font-size: 1.6rem; + } + + + } + } + + } +} \ No newline at end of file diff --git a/src/styles/layouts/_hero-system-v2.scss b/src/styles/layouts/_hero-system-v2.scss new file mode 100644 index 00000000..2cd14aaf --- /dev/null +++ b/src/styles/layouts/_hero-system-v2.scss @@ -0,0 +1,401 @@ +@use "@/styles/utils" as *; +.hero-system-v2 { + background: $gray-2; + position: relative; + padding: $padding-4-4 0; + + &.bg-white { + background-color: $white; + } + + .hero-wrapper { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + flex-flow: row-reverse; + + + .hero-image { + padding-right: 7rem; + max-width: calc(50% - 6rem); + + img { + border-radius: 3rem; + width: 100%; + } + } + + .hero-inner { + position: relative; + z-index: 999; + max-width: 50%; + + .hero-container { + position: relative; + + .investeren-title { + padding-left: $padding-7-0; + + + h1, h2 { + margin-bottom: $margin-2-5; + color: $navy-3; + font-weight: 700; + font-size: 4.8rem; + line-height: 6.5rem; + } + + p { + font-size: 2.1rem; + letter-spacing: 0.02em; + color: $black; + margin-bottom: $margin-5-5; + } + + ul { + li { + font-size: 2.1rem; + line-height: 4rem; + + span { + display: inline-block; + } + } + } + } + + .background-checkmark { + background: $green-light; + padding: 4.4rem 14rem 4.4rem 14rem; + width: 100%; + border-radius: 0 3rem 3rem 0; + + h2 { + color: $grass-green-2; + font-weight: 600; + font-size: 2.1rem; + } + + ul { + font-weight: 500; + font-size: $txt-1-8; + } + + &.pad7 { + padding-left: 7rem; + } + } + } + } + + } + + .arrow-container { + width: 100%; + display: flex; + align-items: flex-start; + padding-left: 7rem; + + h3 { + font-size: 2.1rem; + position: relative; + font-weight: bold; + border-bottom: .4rem solid #63D8B3; + } + + img { + margin-top: 4rem; + } + } + + @media all and (max-width: 1280px) { + .hero-wrapper { + .hero-inner { + .hero-container { + .background-checkmark { + padding: 4.4rem 4.4rem 4.4rem 7rem; + + .checkmarked { + font-size: 2rem; + } + } + } + } + } + .arrow-container { + justify-content: space-between; + + h3 { + flex: 0 0 auto; + } + + img { + max-width: 30%; + object-fit: contain; + height: auto; + } + } + } + @media all and (max-width: 960px) { + padding: 4rem 0; + .hero-wrapper { + .hero-image { + padding-right: 4rem; + } + + .hero-inner { + .hero-container { + .investeren-title { + padding: 0 0 0 4rem; + + h1, h2 { + margin-bottom: 2rem; + } + + p { + margin-bottom: 2rem; + } + } + + .background-checkmark { + padding: 4rem; + + .checkmarked { + font-size: 2rem; + } + } + } + } + } + .arrow-container { + padding-left: 4rem; + flex-wrap: wrap; + justify-content: center; + flex-flow: column; + align-items: center; + + img { + max-width: 25%; + object-fit: contain; + height: auto; + } + } + } + @media all and (max-width: 780px) { + padding: 0; + .hero-wrapper { + flex-flow: column; + + .hero-image { + padding: 2rem; + width: 100%; + max-width: 100%; + } + + .hero-inner { + max-width: 100%; + width: 100%; + padding: 0 2rem; + margin-top: 2rem; + + .hero-container { + .investeren-title { + padding: 0; + + h1, h2 { + font-size: 3rem; + line-height: initial; + } + + } + + .background-checkmark { + padding: 2rem; + border-radius: 2rem; + + .checkmarked { + font-size: 2rem; + } + } + } + } + } + .arrow-container { + padding-left: 2rem; + + h3 { + font-size: 1.6rem; + } + + img { + max-width: 20%; + object-fit: contain; + height: auto; + } + } + } + @media all and (max-width: 480px) { + padding: 2rem 0; + + .hero-wrapper { + .hero-image { + padding: 0 2rem; + } + + .hero-inner { + + .hero-container { + + .investeren-title { + + padding-right: 0; + + h1.h2 { + font-size: 3rem; + line-height: initial; + } + + p { + font-size: 1.8rem; + } + } + + .background-checkmark { + h2 { + font-size: 1.8rem; + line-height: 2.4rem; + } + + .checkmarked { + font-size: 1.6rem; + } + + .checkmarked { + font-size: 2rem; + } + } + } + } + } + } + + &.reversed { + .hero-wrapper { + flex-flow: row; + + .hero-image { + padding-right: 0; + padding-left: 7rem; + } + + .hero-inner { + .hero-container { + .background-checkmark { + border-radius: 2rem 0 0 2rem; + } + } + } + } + + @media all and (max-width: 1200px) { + .hero-wrapper { + .hero-inner { + .hero-container { + .background-checkmark { + padding: 4.4rem 7rem 4.4rem; + } + } + } + } + } + @media all and (max-width: 960px) { + padding: 4rem 0; + .hero-wrapper { + .hero-image { + padding: 0 4rem; + } + + .hero-inner { + .hero-container { + .investeren-title { + padding: 0 4rem 0 0; + } + } + } + } + } + @media all and (max-width: 780px) { + .hero-wrapper { + flex-flow: column; + + .hero-inner { + .hero-container { + .background-checkmark { + padding: 2rem; + border-radius: 2rem; + } + } + } + } + } + @media all and (max-width: 480px) { + padding: 2rem 0; + .hero-wrapper { + .hero-image { + padding: 0 2rem; + } + + .hero-inner { + .hero-container { + .investeren-title { + + padding-right: 0; + + h1, h2 { + font-size: 3rem; + line-height: initial; + } + + p { + font-size: 1.8rem; + } + } + + .background-checkmark { + padding: 2rem; + + &.pad7 { + padding: 2rem; + } + + h2 { + font-size: 1.8rem; + line-height: 2.4rem; + } + + .checkmarked { + font-size: 1.6rem; + } + } + } + } + } + } + } + + &.style-423 { + .hero-wrapper { + .hero-inner { + .hero-container { + .background-checkmark { + padding: 4rem 7rem; + @media all and (max-width: 780px) { + padding: 4rem; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_index.scss b/src/styles/layouts/_index.scss new file mode 100644 index 00000000..741281aa --- /dev/null +++ b/src/styles/layouts/_index.scss @@ -0,0 +1,17 @@ +@use "@/styles/utils" as *; + +@forward "./hero-system-v2"; +@forward "./packages-v2"; +@forward "./packages-v2-b"; +@forward "./overzicht"; +@forward "./layout-8"; +@forward "./layout-9"; +@forward "./layout-10"; +@forward "./layout-11"; +@forward "./offer-comments"; +@forward "./register"; +@forward "./hero-3"; +@forward "./catalogs"; +@forward "./investment-steps"; +@forward "./form-style12"; +@forward "./pagination"; \ No newline at end of file diff --git a/src/styles/layouts/_investment-steps.scss b/src/styles/layouts/_investment-steps.scss new file mode 100644 index 00000000..24e5de45 --- /dev/null +++ b/src/styles/layouts/_investment-steps.scss @@ -0,0 +1,83 @@ +@use "@/styles/utils" as *; +.investment-steps { + padding: 10rem 0; + background: $white; + + h2 { + font-size: 4.8rem; + line-height: initial; + margin-bottom: 3rem; + color: $navy-3; + font-weight: bold; + text-align: center; + } + + .steps-wrapper { + padding: 0 7rem; + display: flex; + flex-wrap: wrap; + gap: 3.5rem 9rem; + justify-content: center; + counter-set: lis; + + li { + flex-basis: calc((100% - 18rem) / 3); + background: #DFEFEF; + border-radius: 1rem; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + padding: 2.5rem 3.5rem; + counter-increment: lis; + position: relative; + display: flex; + justify-content: center; + flex-flow: column; + align-items: center; + gap: 2rem; + + img { + max-height: 10rem; + } + + p { + font-size: 2.1rem; + text-align: center; + } + + &:before { + content: counter(lis) "."; + position: absolute; + top: 2rem; + left: 2rem; + color: $navy-3; + } + } + } + + @media all and (max-width: 1000px) { + h2 { + font-size: 3.5rem; + } + .steps-wrapper { + padding: 0; + gap: 3rem; + } + } + @media all and (max-width: 640px) { + padding: 2rem 0; + h2 { + font-size: 2.4rem; + } + .steps-wrapper { + padding: 0 2rem; + flex-flow: column; + + li { + width: 100%; + + p { + font-size: 1.6rem; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_layout-10.scss b/src/styles/layouts/_layout-10.scss new file mode 100644 index 00000000..ac6be9d4 --- /dev/null +++ b/src/styles/layouts/_layout-10.scss @@ -0,0 +1,101 @@ +@use "@/styles/utils" as *; +.layout-10 { + padding: 8.5rem 0 17rem; + display: flex; + justify-content: center; + background-color: $white; + + .layout-10-inner { + display: inline-block; + background: linear-gradient(180deg, rgba(244, 247, 250, 0.2) 0%, rgba(244, 247, 250, 0.16) 26.56%, rgba(244, 247, 250, 0.16) 50%, rgba(244, 247, 250, 0.2) 70.83%, rgba(244, 247, 250, 0.2) 86.98%, rgba(244, 247, 250, 0.2) 97.4%, rgba(244, 247, 250, 0.2) 100%); + border-radius: 1rem; + border: .2rem solid $green; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); + padding: 6.5rem; + margin: 0 15rem; + backdrop-filter: blur(20px); + + .title { + font-size: 3.7rem; + line-height: 5rem; + margin-bottom: 3rem; + font-weight: bold; + text-align: center; + color: $navy-3; + } + + p { + font-size: 2.1rem; + line-height: initial; + text-align: center; + color: $black; + } + + .layout-10-features { + margin-top: 3rem; + display: flex; + align-items: center; + justify-content: center; + gap: 6rem; + + .l10-f { + display: inline-flex; + justify-content: space-around; + align-items: center; + gap: 2rem; + + img { + max-height: 8rem; + } + + p { + color: $navy; + max-width: 18rem; + font-size: 2.1rem; + line-height: 2.7rem; + text-align: left; + } + } + } + } + + @media all and (max-width: 768px) { + padding: 4rem; + .layout-10-inner { + width: 100%; + margin: 0 auto; + padding: 2rem; + + .title { + font-size: 3rem; + line-height: initial; + + } + + p { + text-align: left; + font-size: 1.6rem; + } + + .layout-10-features { + flex-flow: column; + gap: 2rem; + + .l10-f { + width: 100%; + justify-content: flex-start; + + img { + width: 4rem; + height: auto; + } + + p { + font-size: 1.6rem; + max-width: none; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_layout-11.scss b/src/styles/layouts/_layout-11.scss new file mode 100644 index 00000000..f93001b2 --- /dev/null +++ b/src/styles/layouts/_layout-11.scss @@ -0,0 +1,157 @@ +@use "@/styles/utils" as *; +.layout-11 { + padding: 5rem 7rem; + + .layout-11-inner { + padding: 1rem; + background-color: $white; + border-radius: 1rem; + } + + .l11-img { + overflow: hidden; + border-radius: 1rem; + + img { + width: 100%; + display: block; + } + } + + .l11-content { + padding: 3.5rem; + display: flex; + justify-content: space-between; + align-items: flex-end; + + .col { + flex-basis: 45%; + display: inline-flex; + flex-flow: column; + + h3 { + color: $navy-3; + font-size: 3.7rem; + font-weight: bold; + line-height: 5rem; + margin-bottom: 3.5rem; + } + + p { + color: $black; + font-size: 2.1rem; + line-height: 3rem; + margin-bottom: 2rem; + } + + a.link { + font-style: italic; + color: $navy-3; + font-weight: 500; + text-decoration: underline; + margin-top: 3rem; + font-size: 1.8rem; + } + + ul { + color: $navy; + font-weight: 500; + margin-bottom: 2rem; + + li { + margin-bottom: 4rem; + font-size: 1.8rem + } + } + + &.cta-cont { + justify-content: center; + + .btn { + width: 100%; + text-align: center; + } + + .wrapper { + padding: 0 15%; + } + } + } + + } + + @media all and (max-width: 1100px) { + .l11-content { + gap: 0; + + .col { + flex-basis: 55%; + + &.cta-cont { + flex-basis: 40%; + + .wrapper { + padding: 0; + } + } + } + } + } + @media all and (max-width: 880px) { + padding: 4rem; + .l11-content { + flex-flow: column; + gap: 4rem; + + .col { + flex-basis: 100%; + + &.cta-cont { + flex-basis: 40%; + + .wrapper { + padding: 0; + } + } + } + } + } + @media all and (max-width: 640px) { + .l11-content { + padding: 2rem; + + .col { + + h3 { + font-size: 2.5rem; + line-height: 3rem; + margin-bottom: 2rem; + } + + p { + font-size: 1.6rem; + line-height: initial; + } + + a.link { + font-size: 1.6rem; + margin: 2rem auto; + } + + ul { + li { + margin-bottom: 2rem; + font-size: 1.6rem + } + } + + &.cta-cont { + + .wrapper { + padding: 0; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_layout-8.scss b/src/styles/layouts/_layout-8.scss new file mode 100644 index 00000000..950bfc82 --- /dev/null +++ b/src/styles/layouts/_layout-8.scss @@ -0,0 +1,138 @@ +@use "@/styles/utils" as *; +.layout-8 { + background: $white; + padding-bottom: $padding-10; + + .twin-n { + display: flex; + justify-content: center; + padding: 6.5rem 9rem; + align-items: center; + + .twin-n-img { + width: 50%; + padding-right: 6rem; + + img { + width: 100%; + border-radius: 3rem; + } + } + + .text-set { + h2 { + color: $navy-3; + margin-bottom: $margin-3-0; + font-weight: 700; + font-size: 3.7rem; + line-height: 5rem; + } + + p { + margin-bottom: $margin-3-0; + font-weight: 400; + font-size: 2.1rem; + line-height: 2.5rem; + letter-spacing: 0.02em; + color: $black; + padding-right: $padding-3-0; + } + + .green-text { + color: $grass-green-2; + } + } + + .right-content { + padding-top: $padding-3-3; + width: 50%; + + .background-checkmark { + line-height: 2; + + li { + padding: $padding-1-3; + font-weight: 400; + font-size: 2.1rem; + line-height: 2.5rem; + letter-spacing: 0.02em; + } + } + } + } + + @include mobtop { + padding: $padding-3-0 0; + + .twin-n { + padding: 0; + + .twin-n-img { + width: calc(100% - 2rem); + margin: $margin-1-0; + + img { + height: 100%; + width: 100%; + } + } + + .text-set { + h2 { + font-size: $txt-2-7; + } + + p { + font-size: $txt-1-5; + } + } + + .right-content { + width: 100%; + padding: $padding-2-0; + } + } + } + @media all and (max-width: 780px) { + padding: $padding-3-0 0; + + .twin-n { + display: block; + padding: 0; + + .twin-n-img { + width: calc(100% - 2rem); + margin: $margin-1-0; + padding: 0; + + img { + width: 100%; + } + } + + .text-set { + h2 { + font-size: 2.6rem; + line-height: initial; + margin-bottom: $margin-3-0; + } + + p { + font-size: $txt-1-5; + line-height: 2.5rem; + margin-bottom: $margin-2-5; + + + div { + text-align: center; + } + } + } + + .right-content { + width: 100%; + padding: 0 $padding-1-0; + } + } + } + +} \ No newline at end of file diff --git a/src/styles/layouts/_layout-9.scss b/src/styles/layouts/_layout-9.scss new file mode 100644 index 00000000..885023d3 --- /dev/null +++ b/src/styles/layouts/_layout-9.scss @@ -0,0 +1,81 @@ +@use "@/styles/utils" as *; +.layout-9 { + background: $gray-2; + display: flex; + justify-content: space-between; + align-items: center; + + .text-cont { + padding: 0 $padding-1-8 0 $padding-7-0; + width: 50%; + + p { + color: $black; + margin: $margin-2-6 0 $margin-5-6; + font-weight: 400; + font-size: $txt-1-9; + line-height: 25px; + } + + .layout-btn { + display: flex; + padding-right: 18rem; + justify-content: space-between; + gap: 2rem; + + .btn-style-radius { + width: 184px; + text-align: center; + } + } + } + + .img-cont { + display: flex; + width: 50%; + padding-left: $padding-4-3; + + img { + width: 100%; + } + } + + @include mobile { + display: block; + + .text-cont { + padding: $padding-2-1; + width: 100%; + + .sec-title { + font-size: $txt-3-3; + text-align: center; + } + } + + .img-cont { + width: calc(100% - 2rem); + margin: 0 auto; + padding-left: 0; + + .thuisborg-tb { + width: 100%; + } + } + + .layout-btn { + display: flex; + justify-content: space-between; + + .btn-style-radius { + margin-right: 0 !important; + } + } + } + @include mobtop { + .layout-btn { + display: flex; + justify-content: space-between; + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_offer-comments.scss b/src/styles/layouts/_offer-comments.scss new file mode 100644 index 00000000..c6fb01a5 --- /dev/null +++ b/src/styles/layouts/_offer-comments.scss @@ -0,0 +1,124 @@ +@use "@/styles/utils" as *; +.offer-comments { + background-color: $white; + padding: 8rem 0 8rem 7rem; + + .wrapper { + align-items: center; + display: flex; + justify-content: space-between; + gap: 7rem; + + .offer { + background-color: #DFEFEF; + width: 50%; + display: inline-flex; + border-radius: 1rem 0 0 1rem; + align-items: center; + position: relative; + padding: 4rem 0; + + .img-cont { + display: inline-flex; + justify-content: flex-end; + position: absolute; + right: 0; + left: 0; + z-index: 0; + height: 100%; + + img { + height: 100%; + } + } + + .txt-cont { + position: relative; + z-index: 9; + padding-left: 7rem; + max-width: 60%; + flex: 0 0 auto; + + h4 { + font-size: 3.7rem; + line-height: 5rem; + color: $navy-3; + font-weight: bold; + } + + p { + font-size: 2.4rem; + line-height: 3.3rem; + color: $navy-3; + font-weight: 500; + margin: 2rem 0; + } + } + } + } + + .users-comments { + background: #ffffff; + display: inline-flex; + flex-flow: column; + width: 50%; + + .section-subtitle { + font-size: 3.7rem; + } + + .comments-slider { + .arrow { + width: 4rem; + } + + .comments-slider__list { + .comments-slider__list__item { + display: inline-flex; + flex-flow: column; + + p { + color: $navy-3; + display: inline-flex; + align-self: flex-end; + } + } + } + } + } + + @media all and (max-width: 780px) { + padding: 4rem 0; + .wrapper { + gap: 3rem; + flex-flow: column; + + .offer { + width: calc(100% - 4rem); + align-self: flex-end; + + .txt-cont { + padding-left: 4rem; + max-width: 70%; + + h4 { + font-size: 2.5rem; + line-height: initial; + } + + p { + font-size: 1.6rem; + line-height: 2.3rem; + } + } + } + } + + .users-comments { + padding: 4rem; + width: 100%; + } + + + } +} \ No newline at end of file diff --git a/src/styles/layouts/_overzicht.scss b/src/styles/layouts/_overzicht.scss new file mode 100644 index 00000000..0a893145 --- /dev/null +++ b/src/styles/layouts/_overzicht.scss @@ -0,0 +1,317 @@ +@use "@/styles/utils" as *; +.overzicht { + background: $gray-2; + padding: $padding-3-3 0; + + .overzicht-wrapper { + display: flex; + justify-content: space-between; + width: 100%; + + .title-controls { + border-radius: 0 2rem 2rem 0; + background-color: $green-light; + width: 50%; + flex: 0 0 auto; + padding: $padding-3-6 $padding-1-0 $padding-3-6 $padding-7-2; + + .title { + font-size: $txt-3-7; + line-height: 50px; + font-weight: bold; + color: $navy-3; + } + + .controls { + .control-section { + margin-top: $margin-3-5; + + .cs-title { + font-size: $txt-2-1; + + &.navy { + color: $navy-3; + } + } + + span { + margin-right: $margin-5-0; + } + + p { + margin-bottom: $margin-1-8; + } + + .options-list { + display: inline-block; + line-height: 6rem; + + .btn { + font-size: $txt-1-8; + font-weight: 700; + line-height: 21px; + margin: 0 $margin-3-0 0 0; + padding: $padding-1-3 $padding-1-8; + color: $black; + + &.btn-deactivate { + color: $white; + } + + &:last-child { + margin-right: 0; + height: auto; + } + } + + select.btn { + padding: $padding-1-0 $padding-1-5; + height: 4.5rem; + line-height: 4.5rem; + } + + } + } + } + } + + .results { + width: 50%; + flex: 1; + justify-content: center; + display: inline-flex; + padding: 0 6.5rem; + + .results-inner { + width: 100%; + display: flex; + flex: 0 0 auto; + flex-direction: column; + justify-content: space-between; + height: fit-content; + + .title { + color: $navy-3; + font-size: $txt-2-7; + font-weight: bold; + text-align: center; + margin-bottom: $margin-1-0; + line-height: 4rem; + } + + .chart { + background: $white; + width: 100%; + height: calc(100% - 16rem); + display: flex; + flex: 0 0 auto; + flex-direction: column; + + .chart-title { + width: 100%; + padding: $padding-2-0 $padding-2-0 0 $padding-2-0; + color: $navy; + font-weight: bold; + font-size: $txt-2-1; + + + h4 { + padding: 0 $padding-2-0; + margin-bottom: $padding-2-0; + color: $navy; + font-weight: bold; + } + } + + > div { + width: 100%; + } + + .highcharts-axis-title { + font-family: $fontset; + font-size: $txt-1-4; + font-weight: bold; + } + } + + .result-actions { + margin-top: $margin-6-2; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + span { + font-weight: bold; + font-size: $txt-2-1; + + b { + color: $navy-3; + } + } + } + } + } + } + + @media all and (max-width: 1200px) { + .overzicht-wrapper { + .title-controls { + padding: $padding-3-6; + } + + .results { + padding: 0 4%; + + .results-inner { + + .chart .chart-title { + font-size: 100%; + } + } + } + } + } + @media all and (max-width: 780px) { + .overzicht-wrapper { + flex-direction: column; + + .title-controls { + width: 100%; + padding: $padding-3-0; + border-radius: 0; + + .title { + br { + display: none; + } + } + + .controls { + display: flex; + justify-content: space-between; + flex-direction: column; + + .control-section { + width: 100%; + display: flex; + flex-direction: column; + + .cs-title { + margin-right: 0; + margin-bottom: 1.8rem; + } + + .options-list { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: flex-start; + + .btn { + width: 45%; + margin-right: 0; + margin-bottom: 2rem; + white-space: nowrap; + } + } + } + } + } + + .results { + width: 100%; + padding: 0; + .results-inner { + + .title { + display: none; + } + + .chart { + height: auto; + } + + .result-actions { + margin-top: $padding-3-6; + justify-content: space-evenly; + } + } + } + } + } + @include mobile { + .overzicht-wrapper { + .title-controls { + .title { + font-size: 2.4rem; + line-height: 3rem; + + br { + display: none; + } + } + + .controls { + flex-direction: column; + + .control-section { + width: 100%; + + .cs-title { + font-size: 1.6rem; + + } + + .options-list { + gap: 1rem; + + .btn { + margin-bottom: 0; + white-space: nowrap; + font-size: 1.4rem; + text-align: center; + height: auto; + padding: 1rem 0; + } + + select.btn { + padding: 0.7rem; + height: auto; + } + } + } + } + } + + .results { + .results-inner { + + .title { + } + + .chart { + .chart-title { + font-size: 1.4rem; + line-height: 2rem; + } + } + + .result-actions { + flex-direction: column; + margin-top: 2rem; + + span { + font-size: 1.4rem; + } + + .btn { + padding: 1rem 2rem; + margin-top: 1rem; + font-size: 1.4rem; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_packages-v2-b.scss b/src/styles/layouts/_packages-v2-b.scss new file mode 100644 index 00000000..edf4328b --- /dev/null +++ b/src/styles/layouts/_packages-v2-b.scss @@ -0,0 +1,155 @@ +@use "@/styles/utils" as *; +.packages-v2-b { + padding: $padding-3-7 0 $padding-6-3 0; + background: $white; + + .packages-container { + display: flex; + justify-content: space-around; + + .pkg { + background: linear-gradient(180deg, rgba(50, 105, 162, 0) -169.41%, $navy-2 100%); + box-shadow: rgba(0, 0, 0, 0.05) 0 3px 33px; + overflow: hidden; + height: fit-content; + + .pkg-head { + background: linear-gradient(180deg, rgba(50, 105, 162, 0) -169.41%, $navy-2 100%); + position: relative; + border-radius: 3rem 3rem 0 0; + overflow: hidden; + + .pkg-title { + text-align: center; + color: $white; + + h2 { + font-size: $txt-2-1; + font-weight: 600; + padding: $padding-2-8 0 $padding-4-3; + } + } + } + + .pkg-body { + font-size: $txt-1-6; + position: relative; + display: flex; + justify-content: center; + + img { + width: 100%; + display: block; + } + + .pkg-footer { + padding: 0 $padding-2-0 $padding-2-0; + position: absolute; + bottom: 0; + + .checkmarked { + color: $white; + margin-bottom: $margin-2-0; + display: flex; + align-items: baseline; + font-weight: 400; + font-size: $txt-1-6; + line-height: 19px; + letter-spacing: 0.02em; + + &:before { + flex: 0 0 auto; + } + } + } + } + + .cta-cont { + display: flex; + align-items: center; + justify-content: space-evenly; + font-size: $txt-1-4; + line-height: 2rem; + background: $green; + box-shadow: 0 2px 3px 1px rgb(0 0 0 / 25%); + border-radius: 2px; + color: $white; + width: 184px; + margin: $margin-6-2 auto; + + .secondary { + color: $white; + padding: $padding-1-2; + font-weight: 700; + font-size: $txt-1-8; + line-height: 21px; + } + } + + .layout-btn { + background: linear-gradient(360deg, #3269A2 -196.47%, rgba(50, 105, 162, 0) 178%); + border-radius: 0 0 20px 20px; + padding: $padding-2-7 0; + display: flex; + justify-content: center; + + .btn-blue { + width: 184px; + text-align: center; + padding: $padding-1-2; + + font-weight: 700; + font-size: $txt-1-8; + line-height: 21px; + } + } + } + } + + @media all and (max-width: 860px) { + .packages-container { + gap: 3rem; + width: 90%; + margin: 0 auto; + .pkg { + .pkg-body { + .pkg-footer { + padding: 0; + + .checkmarked { + margin-bottom: 0; + } + } + } + } + } + } + + @media all and (max-width: 640px) { + .packages-container { + display: block; + + .pkg { + width: 100% !important; + margin: $margin-2-0 0; + + .pkg-body { + .pkg-footer { + padding: 0; + } + } + .cta-cont { + flex-flow: column; + margin: $margin-2-2 auto; + } + } + } + } +} + +.back-blur { + border-radius: 2rem; + background: $green-light !important; + backdrop-filter: blur(0.5px); + padding: $padding-1-2 !important; +} \ No newline at end of file diff --git a/src/styles/layouts/_packages-v2.scss b/src/styles/layouts/_packages-v2.scss new file mode 100644 index 00000000..85485283 --- /dev/null +++ b/src/styles/layouts/_packages-v2.scss @@ -0,0 +1,138 @@ +@use "@/styles/utils" as *; +.packages-v2 { + padding: $padding-3-7 0 $padding-6-7 0; + background: $white; + + .packages-container { + display: flex; + justify-content: space-evenly; + + @include mobile { + display: block; + margin: $margin-1-1; + } + + .pkg { + box-shadow: rgba(0, 0, 0, 0.05) 0 3px 33px; + border-radius: 2rem; + overflow: hidden; + + &:after { + content: ""; + height: 2rem; + display: block; + background: linear-gradient(180deg, rgba(50, 105, 162, 0) -169.41%, $navy-2 100%); + } + + .pkg-head { + background: linear-gradient(0deg, $navy-2 0%, rgba(50, 105, 162, 0) 284.12%); + position: relative; + + .pkg-title { + text-align: center; + color: $white; + + h2 { + font-size: $txt-2-1; + line-height: 29px; + padding: $padding-2-8 0 $padding-4-3 0; + } + } + } + + .pkg-body { + position: relative; + display: flex; + + img { + width: 100%; + } + + .checkmarked { + color: $white; + margin-bottom: $margin-2-2; + display: flex; + line-height: 19px; + letter-spacing: 0.02em; + font-size: $txt-1-6; + + &:before { + flex: 0 0 auto; + } + } + } + + .pkg-content-wrapper { + position: absolute; + padding: 0 $padding-5-8; + width: 100%; + height: 100%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + top: 0; + left: 0; + + ul { + margin-bottom: 4rem; + } + } + + .cta-cont { + display: flex; + align-items: center; + width: 100%; + justify-content: center; + + .btn { + font-weight: 700; + color: $white; + font-size: $txt-1-8; + line-height: 2.1rem; + } + } + } + } + + @media all and (max-width: 860px) { + .packages-container { + gap: 3rem; + width: 90%; + margin: 0 auto; + + .pkg { + .pkg-body { + .pkg-content-wrapper { + padding: 0 $padding-1-2; + } + } + } + } + } + @media all and (max-width: 640px) { + .packages-container { + + .pkg { + width: 100%; + margin: $margin-2-0 0; + + .pkg-body { + + .pkg-content-wrapper { + padding: 0 $padding-1-2; + } + } + + .cta-cont { + width: 100%; + + .btn { + font-size: $txt-1-8; + line-height: 1.4rem; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_pagination.scss b/src/styles/layouts/_pagination.scss new file mode 100644 index 00000000..ba09712f --- /dev/null +++ b/src/styles/layouts/_pagination.scss @@ -0,0 +1,63 @@ +@use "@/styles/utils" as *; + +.pagination { + display: flex; + justify-content: center; + align-items: center; + + nav { + //background-color: $gray; + padding: 2rem 4rem; + border-radius: 1rem; + + ul { + display: flex; + align-items: center; + gap: clamp(20px, 2vw, 4rem); + line-height: 2rem; + + li { + display: inline-flex; + justify-content: center; + align-items: baseline; + line-height: 2rem; + + * { + display: inline-block; + vertical-align: middle; + } + + + > span { + font-size: 4rem; + font-weight: 100; + color: $navy; + } + + a { + font-weight: bold; + font-size: 1.8rem; + color: $navy; + padding: 1rem; + border-radius: 1.2rem; + min-width: 2rem; + + &[rel="next"], &[rel="prev"] { + font-size: 4rem; + font-weight: 100; + } + + + &:hover, &.active { + color: $green; + background-color: #ddf5ef; + } + } + + &.disabled { + opacity: .5; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/layouts/_register.scss b/src/styles/layouts/_register.scss new file mode 100644 index 00000000..1ffe9900 --- /dev/null +++ b/src/styles/layouts/_register.scss @@ -0,0 +1,940 @@ +// #TODO: Resolve this file +//@import "~vue-datetime/dist/vue-datetime.css"; + +@use "@/styles/utils" as *; +.register-v2 { + position: relative; + padding: $margin-15-0 0; + display: flex; + justify-content: center; + align-items: center; + + .loading-cont { + position: absolute; + top: 0; + left: 0; + z-index: 999; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, .3); + backdrop-filter: blur(20px); + } + + .btn { + &.reg-btn { + border-radius: 3px; + box-shadow: 0 4px 4px rgba(0, 0, 0, .25); + padding: 1.2rem 2.2rem; + font-weight: bold; + background: #2F66A0; + + &.disabled { + background: #BCBCBC; + color: $white; + } + } + } + + .signature-cont { + .zf-signContainer { + margin: 0; + padding: 0; + width: 100%; + + canvas { + cursor: crosshair; + border: 1px solid #ccc; + background: #fff; + width: 100%; + } + + a { + font-size: 11px; + text-decoration: underline; + } + } + } + + .payment-selection { + display: none; + + &.enabled { + display: flex; + } + + .select-payment { + //background: #FAF9F9; + padding: 2rem; + + h3 { + font-size: 1.8rem; + font-weight: bold; + margin-bottom: 2rem; + } + + .methods { + padding-left: 2rem; + + li { + padding: 1rem 0; + border-bottom: .1rem solid #F3F3F3; + cursor: pointer; + + span { + color: #999; + margin-left: 1rem; + } + + * { + vertical-align: middle; + } + + i { + display: inline-block; + height: 4.4rem; + border-radius: .5rem; + border: .1rem solid #ddd; + padding: .5rem; + min-width: 6rem; + text-align: center; + line-height: 3rem; + color: $navy; + font-weight: bold; + } + + img { + height: 3rem; + display: inline-block; + } + + &:before { + display: inline-block; + background-color: #ddd; + content: ''; + width: 2rem; + height: 2rem; + border-radius: 50%; + margin-right: 1rem; + vertical-align: middle; + } + + &.selected, &:hover { + span { + color: $navy; + } + + &:before { + background-color: $navy; + } + } + } + } + } + } + + .other-payment-method { + display: none; + + &.enabled { + display: flex; + } + + justify-content: center; + align-items: center; + min-height: 100%; + } + + .other-payment-cont { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + img { + display: inline-block; + } + + p, h2 { + padding: 0 20%; + text-align: center; + } + } + + .single-line-h2 { + font-size: 1.6rem; + line-height: 2.1rem; + margin-bottom: 1rem; + + &.bold { + font-weight: bold; + } + + &.navy { + color: #0e68a4; + } + } + + .seperator { + border-bottom: .1rem solid #ABABAB; + width: 100%; + display: block; + } + + .single-line-p { + font-size: 1.2rem; + line-height: 1.6rem; + + &.bold { + font-weight: bold; + } + } + + .checkbox-group { + display: inline-flex; + align-items: center; + gap: 1rem; + } + + .checkbox-set { + display: inline-block; + + input { + display: inline-block; + vertical-align: middle; + margin-right: .5rem; + } + + label { + display: inline-block; + } + } + + .rad-group { + display: inline-flex; + align-items: center; + gap: 1rem; + } + + .radio-set { + display: inline-block; + + input { + display: inline-block; + vertical-align: middle; + margin-right: .5rem; + } + + label { + display: inline-block; + } + } + + .js-validation-error { + align-items: center; + + &:after { + margin-left: 1rem; + } + } + + .multi-fields { + display: flex; + justify-content: flex-start; + column-gap: 2rem; + width: 100%; + flex-wrap: wrap; + + &.col-2 { + column-gap: 8rem; + row-gap: 2rem; + + .col { + width: calc(50% - 4rem); + + input, select { + width: 100%; + } + } + } + } + + &-back-img { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 0; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + &-wrapper { + background-color: $white; + border-radius: 1.5rem; + width: 920px; + position: relative; + z-index: 9; + overflow: hidden; + + .intro { + .intro-header { + padding: 2.8rem $padding-5-3 0; + } + + .intro-body { + padding: 0 $padding-5-3; + } + + .logo { + .logo-image { + margin: 0 auto; + display: block; + } + } + + h1 { + margin: 5.5rem 0 6rem 0; + font-weight: bold; + font-size: 2.4rem; + line-height: 2.8rem; + color: $navy-2; + text-align: center; + } + + .intro-text { + p { + font-size: 1.8rem; + line-height: 2.1rem; + } + + margin-bottom: 5.5rem; + } + + .intro-agreement { + font-weight: 400; + font-size: 18px; + margin-bottom: 5.5rem; + + .agreement-item { + font-size: 1.8rem; + display: block; + + > * { + display: inline-block; + vertical-align: middle; + } + + input { + margin-right: .5rem; + } + } + } + + .submit-bar { + display: flex; + justify-content: flex-end; + padding-bottom: 3.7rem; + + } + + .intro-footer { + display: flex; + justify-content: space-around; + padding: 2.6rem 8.2rem; + background: linear-gradient(90deg, #F4F7FA 48.42%, #DFEFEF 77.01%); + gap: 6.7rem; + } + } + } + + .tabs-cont { + display: flex; + flex-direction: column; + width: 100%; + padding: 0 3.2rem; + border-radius: .3rem; + + .tab-header { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: 1fr; + width: 100%; + position: relative; + z-index: 0; + + .tab { + position: relative; + z-index: 0; + + .title { + padding: 2rem 1.5rem; + border-left: .1rem solid #B5B5B5; + background: #DCDCDC; + margin-top: 2rem; + text-align: center; + font-size: 1.4rem; + white-space: nowrap; + + b { + border-radius: 50%; + background: #63D8B3; + color: $white; + width: 4rem; + height: 4rem; + vertical-align: middle; + display: inline-block; + margin-right: .5rem; + text-align: center; + line-height: 4rem; + font-size: 1.8rem; + + } + } + + &.type-tab { + &:first-of-type { + .title { + border-left: none; + } + + } + + &:last-of-type { + .title { + border-radius: 0 3px 0 0; + } + } + } + + &.active { + z-index: 9; + + .title { + border-left: 0; + box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.25); + border-radius: 3px 3px 0 0; + background: #F4F7FA;; + margin-top: 0; + padding: 3rem 1.5rem; + } + } + } + } + + .tab-body { + position: relative; + z-index: 9; + + .tab-wrapper { + padding: 3.2rem; + background-color: #F4F7FA; + height: 60rem; + overflow-y: scroll; + + &::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: rgba(#9FDAC7, .2); + border-radius: 1rem; + } + + &::-webkit-scrollbar { + width: .6rem; + background-color: rgba(#9FDAC7, .2); + border-radius: 1rem; + } + + &::-webkit-scrollbar-thumb { + background-color: #9FDAC7; + border-radius: 1rem; + } + } + + .tab-footer { + display: flex; + padding: 2.5rem 0 5rem; + justify-content: space-between; + flex-flow: row-reverse; + } + + .row { + display: flex; + flex-flow: column; + margin-top: 2rem; + + &.required { + .label { + label { + &:after { + content: '*'; + color: #FF0000; + } + } + } + } + + .label { + font-weight: bold; + font-size: 1.4rem; + text-transform: capitalize; + } + + .input { + margin-top: 1rem; + + &.js-validation-error { + &:after { + margin-left: 0; + margin-top: .5rem; + } + } + + input { + border-radius: 0; + } + + input[type=text], input[type=date], input[type=number] { + min-width: 220px; + border: .1rem solid #DCDCDC; + border-radius: 0; + height: 4rem; + } + + select { + min-width: 220px; + border: .1rem solid #DCDCDC; + border-radius: 0; + padding: 0 1rem; + height: 4rem; + line-height: 4rem; + } + + .date-picker-container-icon { + width: 100%; + display: flex; + + .vpd-icon-btn { + display: none; + } + + .vdp-datepicker { + + input[type=text] { + min-width: 0; + width: 195px; + } + } + + .icon-cont { + border: 0.1rem solid #DCDCDC; + border-left: none; + display: inline-flex; + justify-content: center; + align-items: center; + padding: 0 1.2rem; + cursor: pointer; + + img { + display: block; + } + } + } + + &.check-inline { + > input[type=checkbox] { + display: inline-block; + vertical-align: middle; + } + + > label { + display: inline-block; + vertical-align: middle; + } + } + } + + .note { + margin-top: .6rem; + font-size: 1.4rem; + + p { + font-size: 1.2rem; + font-style: italic; + } + } + } + } + + + &.intro { + padding: 0; + + .tab-body { + background: $white; + } + } + } + + .steps-cont { + &.tab-style { + position: relative; + + &:before { + background: linear-gradient(90deg, #DFEFEF 48.42%, #F4F7FA 77.01%);; + width: 100%; + height: 2.6rem; + position: absolute; + top: 0; + left: 0; + content: ''; + } + + &:after { + background: linear-gradient(90deg, #F4F7FA 48.42%, #DFEFEF 77.01%);; + width: 100%; + height: 2.6rem; + position: absolute; + bottom: 0; + left: 0; + content: ''; + } + } + } + + .steps-header { + padding: 3.2rem; + + .logo { + margin-top: 2rem; + margin-bottom: 1rem; + display: block; + + img { + max-width: 28rem; + } + } + + h1 { + text-align: center; + display: block; + font-size: 2.4rem; + font-weight: bold; + color: $navy; + } + } + + .payment-status { + flex-direction: column; + width: 100%; + display: flex; + justify-content: center; + + .paid { + text-align: center; + border-radius: 1rem; + margin: 2rem 0 4rem; + padding: 4rem; + background-color: #00e8a8; + color: $white; + font-weight: bold; + + p:first-of-type { + font-size: 2em; + margin-bottom: 4rem; + } + + .code { + color: rgba(#002e5b, .5) + } + } + + &.failed { + color: $black; + + .paid { + background-color: $yellow; + color: $black; + + p { + color: $black; + + b { + color: $red; + + &:before { + content: '('; + } + + &:after { + content: ')'; + } + } + } + + } + } + } + + .mollie-redirect { + width: 100%; + } + + .redirect-cont { + flex-direction: column; + margin: 2rem 0 4rem; + width: 100%; + padding: 4rem; + background-color: #efefef; + border-radius: 1rem; + display: flex; + justify-content: center; + text-align: center; + + .redirect-counter { + width: 100%; + } + + .loading-holder { + margin-bottom: 4rem; + + .loading-msg { + font-size: 4rem; + } + } + + .redirect-message { + color: #002e5b; + font-weight: bold; + } + + .timer, .redirect-link { + color: #00e8a8; + font-weight: bold; + } + } + + @media all and (max-width: 1100px) { + &-wrapper { + width: 96%; + + .intro { + .intro-footer { + justify-content: space-between; + align-items: center; + + .afm { + max-width: 70%; + height: auto; + } + } + } + } + .tabs-cont { + .tab-header { + .tab { + .title { + b { + width: 3rem; + height: 3rem; + line-height: 3rem; + font-size: 1.4rem; + } + } + } + } + } + } + @media all and (max-width: 640px) { + .btn { + font-size: 1.4rem; + } + .js-validation-error { + position: relative; + padding-bottom: 2rem; + + &:after { + position: absolute; + bottom: 0; + left: 0; + margin-left: 0; + } + } + &-wrapper { + + .intro { + .logo .logo-image { + max-width: 20rem; + } + + .intro-body { + padding: 0 2rem; + } + + .intro-header { + padding: 2rem 2rem 0; + + } + + .intro-text { + margin-bottom: 2rem; + + p { + font-size: 1.4rem; + } + } + + .intro-agreement { + font-weight: 400; + + margin-bottom: 2rem; + + .agreement-item { + font-size: 1.4rem; + margin-bottom: 1rem; + align-items: flex-start; + + input { + margin-top: .5rem; + } + } + } + + h1 { + margin: 2rem 0; + font-size: 2rem; + } + + .submit-bar { + padding-bottom: 2rem; + + } + + .intro-footer { + padding: 2rem; + flex-direction: column; + + .afm { + display: block; + max-width: 100%; + width: 100%; + } + + .logos { + margin-top: 1rem; + width: 100%; + height: auto; + } + } + } + } + .steps-header { + padding: 2rem; + text-align: center; + + .logo { + margin: 2rem 0 0 0; + + img { + max-width: 20rem; + } + } + + h1 { + line-height: inherit; + font-size: 2rem; + } + } + .tabs-cont { + padding: 0 2rem; + + .tab-header { + overflow: auto; + + .tab { + &.active { + .title { + padding: 1.5rem 1rem; + } + } + + .title { + margin-top: 1rem; + padding: 1rem; + font-size: 1.4rem; + white-space: nowrap; + + b { + display: none; + } + } + } + + } + + .tab-body { + .tab-wrapper { + padding: 2rem; + height: 60vh; + } + + .row { + .input { + label { + font-size: 1.4rem; + } + + input[type=text], input[type=date], input[type=number], select, input[type=file] { + max-width: 100%; + width: 100%; + } + } + } + } + } + .single-line-h2 { + font-size: 1.4rem; + line-height: initial; + } + .multi-fields { + flex-direction: column; + + .col { + width: 100%; + } + + &.col-2 { + gap: 1rem; + + .col { + width: 100%; + + .note { + font-size: 1.4rem; + line-height: 2rem; + } + } + } + } + .other-payment-method { + .other-payment-cont { + text-align: center; + + p { + max-width: 80%; + font-size: 1.4rem; + } + } + } + } +} + +.vpd-simple-content { + direction: rtl !important; +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 4e322458..5ebf7fb0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,8 +1,10 @@ -// Basics -@use "utils/utils.scss"; - -// Components -@use "components/btn.scss"; - -// Complex reusable blocks -@use "partials/load-spinner.scss"; \ No newline at end of file +//utils +@use "@/styles/utils/reset/reset.pc.css" as *; +@use "@/styles/utils/reset/reset.mobile.css" as *; +@use "@/styles/utils" as *; +// components +@use "@/styles/components" as *; +// partials +@use "@/styles/partials" as *; +// layouts +@use "@/styles/layouts" as *; diff --git a/src/styles/partials/_5-steps.scss b/src/styles/partials/_5-steps.scss new file mode 100644 index 00000000..01f37dd9 --- /dev/null +++ b/src/styles/partials/_5-steps.scss @@ -0,0 +1,194 @@ +@use "@/styles/utils" as *; +.hero.five-steps { + p { + color: $black-1; + } + + .breadcrumb .breadcrumb__cont { + margin-top: 8rem; + } + + &.asym-image-text .asym__text { + padding: 5rem 0; + } +} + +.fs-tab-cta { + padding: 6rem 0 10rem; + + .btns-cont { + display: flex; + justify-content: center; + align-items: center; + + .btn { + margin: 0 1rem; + border: .1rem solid transparent; + + &.navy { + border: .1rem solid $navy; + } + } + } + + .tab-5steps { + &.verzilver { + display: none; + } + } + + &.verzilverplan { + .btns-cont { + .btn { + background: $white; + color: $navy; + border: .1rem solid $navy; + + &.verz { + background: $green; + color: $white; + border-color: $green; + } + } + } + + .tab-5steps { + display: none; + + &.verzilver { + display: flex; + } + } + } + + .tab-5steps { + margin-top: 6rem; + + .tab-contents { + .switchtitle { + display: none; + } + } + } +} + +@include mobile { + .hero.five-steps { + background: $gray; + + .breadcrumb { + display: none; + } + + &.asym-image-text { + &:before { + display: none; + } + + .asym__text { + padding: 1.5rem; + + .btn { + width: 100%; + text-align: center; + } + } + + .asym__image { + } + } + } + .fs-tab-cta { + padding: 3rem 0 0 0; + + .btns-cont { + flex-flow: column; + + .btn { + width: 100%; + + &:first-child { + margin-bottom: 1rem; + } + } + } + + .standard.tabs-main-cont { + width: 100%; + } + + .tab-5steps.tabs { + background: none; + box-shadow: none; + margin-top: 3rem; + + .nav { + display: none; + } + + .tab-contents { + padding: 0; + + .tab { + padding: 0 2rem; + border-bottom: .1rem solid rgba($navy, .4); + display: block; + max-height: 6rem; + overflow: hidden; + transition: max-height 0.3s ease-out; + + &:last-of-type { + border-bottom: none; + } + + .tab-contnent__wrapper { + padding-bottom: 2rem; + } + + .switchtitle { + font-size: 2rem; + line-height: 6rem; + height: 6rem; + width: 100%; + position: relative; + font-weight: 500; + + &:after { + content: '+'; + } + + display: flex; + justify-content: space-between; + color: $navy; + } + + &.active { + max-height: 300rem; + transition: max-height 0.5s ease-in; + + .switchtitle { + color: $green; + + &:after { + content: '-'; + } + } + } + } + + p { + font-size: 1.5rem; + line-height: 2.5rem; + + &:last-of-type { + margin-bottom: 0; + } + } + + .switchtitle { + display: block; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_asym-image-text.scss b/src/styles/partials/_asym-image-text.scss new file mode 100644 index 00000000..d814361f --- /dev/null +++ b/src/styles/partials/_asym-image-text.scss @@ -0,0 +1,97 @@ +@use "@/styles/utils" as *; +.asym-image-text { + position: relative; + background: $white; + + .btn { + text-align: center; + } + + &:before { + content: ""; + z-index: 0; + width: 100%; + height: calc(100% - 6rem); + left: 0; + top: 0; + background: $gray; + position: absolute; + } + + .asym__image { + display: flex; + justify-content: flex-end; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: calc(100% + 6rem); + z-index: 0; + + + img { + position: relative; + z-index: 9; + object-fit: cover; + height: 100%; + max-width: calc(50% - 6rem); + } + + &.limit-img-height { + height: 100%; + overflow: hidden; + align-items: flex-end; + } + } + + .asym__text { + z-index: 99; + position: relative; + margin: auto; + padding: 11rem 0; + + .asym__text__cont { + width: 50%; + } + } + + @include desktop-high { + display: flex; + justify-content: space-between; + flex-flow: row-reverse; + align-items: flex-start; + padding-bottom: 10rem; + .asym__image { + justify-content: flex-end; + flex: 0 0 auto; + display: inline-flex; + width: 50%; + position: relative; + + &:before { + display: none; + } + + img { + max-width: 100%; + } + } + .asym__text { + width: 50%; + flex: 0 0 auto; + display: inline-flex; + position: relative; + padding: 5rem; + + .standard { + width: 100%; + display: flex; + flex-flow: column; + } + + .asym__text__cont { + width: auto; + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_blog-post.scss b/src/styles/partials/_blog-post.scss new file mode 100644 index 00000000..fcc0da2f --- /dev/null +++ b/src/styles/partials/_blog-post.scss @@ -0,0 +1,246 @@ +@use "@/styles/utils" as *; +.blog-post__hero { + z-index: 0; + background: $white; + position: relative; + + .blog-post__hero__image { + &:before { + background: $gray; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: calc(100% - 6rem); + content: ''; + z-index: 0; + } + + z-index: 0; + position: relative; + width: 100%; + display: flex; + justify-content: flex-end; + + img { + position: relative; + z-index: 9; + max-width: 50%; + display: block; + } + } + + .blog-post__hero__text { + height: 100%; + display: flex; + align-items: center; + position: absolute; + top: 0; + left: 0; + right: 0; + margin: auto; + z-index: 999; + + h1 { + color: $navy; + font-size: 5.5rem; + line-height: 6.6rem; + font-weight: bold; + margin-bottom: 2.5rem; + } + + p { + font-size: 2.4rem; + line-height: 3.6rem; + color: rgba($black, .8); + margin-bottom: 5rem; + } + + .txt-cont { + max-width: calc(50% - 6rem); + } + + .breadcrumb { + position: absolute; + bottom: 0; + left: 0; + right: 0; + margin: auto; + + .breadcrumb__cont { + background: none; + padding: 0; + } + } + } + + &.no-cover { + padding-bottom: 6rem; + + .blog-post__hero__image { + display: none; + } + + .blog-post__hero__text { + position: static; + background: $gray; + padding: 6rem 0; + + .txt-cont { + width: 100%; + max-width: none; + } + + .breadcrumb { + background: $white; + padding: 2.5rem; + } + } + } + + @include mobile { + background: $gray; + padding-bottom: 2rem; + .blog-post__hero__image { + position: static; + width: 100%; + margin-bottom: 2rem; + + &:before { + display: none; + } + + img { + width: calc(100% - 2rem); + max-width: none; + } + } + .blog-post__hero__text { + position: static; + height: auto; + + .breadcrumb { + display: none; + } + + .txt-cont { + max-width: 100%; + } + + p { + line-height: 2.4rem; + font-size: 1.4rem; + margin-bottom: 1rem; + } + + h1 { + font-size: 2.5rem; + line-height: 3rem; + margin-bottom: 1.5rem; + } + } + &.no-cover { + padding-bottom: 0; + } + } +} + +.blog-page { + .layout-6 { + color: $black-1; + font-size: 2rem; + line-height: 3rem; + padding: 6rem 0; + + h2 { + display: block; + font-size: 2.5rem; + color: $green; + font-weight: bold; + line-height: 2.4rem; + margin-bottom: 2.5rem; + } + + ul { + font-size: 2rem; + margin-bottom: 2rem; + } + + img { + max-width: 100%; + margin: 1rem; + } + + h3 { + display: block; + font-size: 2rem; + color: $navy; + font-weight: bold; + line-height: 3rem; + margin-bottom: 2rem; + } + + p { + color: $black-1; + font-size: 2rem; + line-height: 3rem; + margin: 1rem 0; + } + + .layout-6__cont { + .l6_right { + .box { + margin-bottom: 6rem; + + &:last-of-type { + margin-bottom: 0; + } + } + } + + .l6_left { + color: $black-1; + font-size: 2rem; + line-height: 3rem; + } + } + + .cats-cont { + li { + a { + display: flex; + justify-content: space-between; + color: $navy; + font-size: 2rem; + line-height: 4rem; + + span { + color: $black-1; + } + } + } + } + } + + @include mobile { + .layout-6 { + padding: 2rem 0; + + p, span { + font-size: 1.5rem; + } + + .blog-page .layout-6 .layout-6__cont .l6_right .box { + margin-bottom: 2rem; + } + + .cats-cont { + li { + a { + font-size: 1.5rem; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_breadcrumb.scss b/src/styles/partials/_breadcrumb.scss new file mode 100644 index 00000000..cf10c967 --- /dev/null +++ b/src/styles/partials/_breadcrumb.scss @@ -0,0 +1,71 @@ +@use "@/styles/utils" as *; +.breadcrumb { + h1 { + font-size: 5.5rem; + font-weight: bold; + color: $navy; + padding: 10rem 0; + line-height: 4rem; + } + + .breadcrumb__cont { + background: $white; + padding: 2.5rem; + + .breadcrumb__cont__items { + display: flex; + + li { + color: rgba($black, .6); + font-size: 1.5rem; + display: inline-block; + vertical-align: middle; + margin-right: .5rem; + + &:after { + content: '|'; + margin-left: .5rem; + } + + &:last-of-type { + margin-right: 0; + + &:after { + display: none; + } + } + + a { + color: rgba($black, .6); + font-size: 1.5rem; + display: inline-block; + transition: $transition-3; + border-bottom: .1rem solid $white; + + &:hover { + border-bottom: .1rem solid; + } + } + + span { + border-bottom: .1rem solid $white; + } + } + } + } + + @include mobile { + .standard { + width: 100%; + } + h1 { + font-size: 2.5rem; + line-height: 2.8rem; + padding: 1.5rem; + } + .breadcrumb__cont { + display: none; + } + } + +} \ No newline at end of file diff --git a/src/styles/partials/_calculator.scss b/src/styles/partials/_calculator.scss new file mode 100644 index 00000000..bff20a5c --- /dev/null +++ b/src/styles/partials/_calculator.scss @@ -0,0 +1,33 @@ +@use "@/styles/utils" as *; +.hero.calculator-page { + p { + color: $black-1; + } + + .breadcrumb .breadcrumb__cont { + margin-top: 8rem; + } + + &.asym-image-text .asym__text { + padding: 5rem 0; + } +} + +.calculator-cont { + padding: 8rem 0; +} + +@include mobile { + .calculator-cont { + padding: 4rem 0; + } + .hero.calculator-page { + .breadcrumb { + display: none; + } + + &.asym-image-text .asym__text { + padding: 2rem; + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_categories.scss b/src/styles/partials/_categories.scss new file mode 100644 index 00000000..a7903685 --- /dev/null +++ b/src/styles/partials/_categories.scss @@ -0,0 +1,59 @@ +@use "@/styles/utils" as *; +.categories-cont { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 4rem; + + ul { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + max-width: 96%; + + li { + margin: .5rem; + + a { + display: block; + background: $gray; + color: $navy; + padding: 1rem 3rem; + border-radius: .7rem; + text-align: center; + transition: $transition-3; + } + + &.active, &:hover { + a { + color: $white; + background: $green; + } + } + } + } + + select { + + } + + @include mobile { + ul { + display: none; + } + form { + width: 100%; + + select { + width: 100%; + color: $navy; + display: block; + border-color: $navy; + border-radius: .7rem; + height: 5rem; + padding: 1rem; + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_centerized-section.scss b/src/styles/partials/_centerized-section.scss new file mode 100644 index 00000000..958120ed --- /dev/null +++ b/src/styles/partials/_centerized-section.scss @@ -0,0 +1,33 @@ +@use "@/styles/utils" as *; +.centerized-section { + background: $white; + + .section-title { + padding: 0 0 4rem; + } + + p { + text-align: center; + font-size: 2.3rem; + color: $black-1; + line-height: 4rem; + } + + @include mobile { + padding: 2rem 1.5rem; + .standard { + width: 100%; + } + .section-title { + padding: 0; + font-size: 2rem; + line-height: 3rem; + margin-bottom: 1rem; + } + p { + font-size: 1.5rem; + line-height: 2.5rem; + text-align: left; + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_contact-me.scss b/src/styles/partials/_contact-me.scss new file mode 100644 index 00000000..bd2387ca --- /dev/null +++ b/src/styles/partials/_contact-me.scss @@ -0,0 +1,111 @@ +@use "@/styles/utils" as *; +.contact-me-cont { + background: $white; + +} + +.contact-me { + padding: 5rem 0 8rem 0; + + .contact-me-aligner { + max-width: 144rem; + } + + .contact-me__cont { + background: $gray; + border-radius: 2rem; + display: flex; + align-items: center; + justify-content: flex-start; + + img { + width: 40rem; + } + + .txt-cta { + padding: 6rem 6rem 6rem 0; + display: inline-flex; + align-items: center; + justify-content: space-between; + flex: 1; + + h4 { + font-size: 3.5rem; + font-weight: bold; + color: $navy; + line-height: 4.5rem; + } + + .btn { + display: inline-flex; + flex: 0 0 auto; + margin: 0 1rem; + } + } + + @media (min-width: 640px) and (max-width: 900px) { + img { + width: auto; + } + .txt-cta { + flex-wrap: wrap; + + h4 { + flex: 0 0 auto; + width: 100%; + } + + .btn { + margin-top: 1rem; + margin-left: 0; + } + } + } + + } + + @include mobile { + display: none; + } +} + +.blog-page .contact-me { + font-size: 20px; + padding: 2em 0; + + .contact-me-aligner { + max-width: 100%; + } + + .contact-me__cont { + img { + width: 10em; + margin: 0; + } + + .txt-cta { + padding: 1em 1em 1em 0; + + h4 { + font-size: .9em; + line-height: 1em; + } + + .btn { + margin: 0 .5em; + padding: .5em 1em; + font-size: 0.6em; + flex: auto; + text-align: center; + } + } + } + + @media (min-width: 640px) and (max-width: 900px) { + .contact-me__cont .txt-cta { + .btn { + margin: .5em 0; + } + } + } +} diff --git a/src/styles/partials/_contact-us.scss b/src/styles/partials/_contact-us.scss new file mode 100644 index 00000000..6982e66f --- /dev/null +++ b/src/styles/partials/_contact-us.scss @@ -0,0 +1,308 @@ +@use "@/styles/utils" as *; + +.contact-us { + background: $white; + + .contact-us__cont { + display: flex; + justify-content: space-between; + align-items: flex-start; + + .content { + background: $gray; + width: calc(35% - 3.3rem); + flex: 0 0 auto; + border-radius: 1.7rem; + padding: 3rem; + + ul { + li { + font-size: 2.1rem; + font-weight: 500; + margin-bottom: 2.5rem; + color: $navy; + + span { + color: $green; + } + + &:last-of-type { + margin-bottom: 0; + } + } + } + } + + .form { + padding: 5rem; + background: $gray; + width: calc(65% - 3.3rem); + flex: 0 0 auto; + border-radius: 1.7rem; + color: $black-1; + font-size: 2.3rem; + + h3 { + font-size: 3.3rem; + color: $navy; + font-weight: bold; + line-height: 4rem; + margin-bottom: 5rem; + } + + .form-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + + &:last-of-type { + margin-bottom: 0; + } + + .form-row__input { + width: 60%; + max-width: 50rem; + flex: 0 0 auto; + + > input { + line-height: 4.2rem; + width: 100%; + } + + textarea { + width: 100%; + min-height: 10rem; + } + + &.radio-group { + display: flex; + align-items: center; + + .radio-set { + margin-right: 3rem; + + input { + vertical-align: middle; + display: inline-block; + } + } + } + + .code-num { + width: 100%; + + > input { + line-height: 4.2rem; + } + } + } + } + + .agreement-submit { + margin-top: 4rem; + display: flex; + justify-content: space-between; + align-items: center; + + .agreement { + a, label { + color: rgba($black, .8); + } + + a { + border-bottom: .1rem solid; + } + + font-size: 2rem; + } + } + } + } + + @include mobile { + .standard { + width: 100%; + } + .contact-us__cont { + flex-flow: column; + + .content { + background: $white; + width: 100%; + padding: 1.5rem; + + ul { + li { + margin-bottom: 1rem; + font-size: 1.5rem; + line-height: 2.4rem; + } + } + } + + .form { + padding: 2rem 1.5rem; + width: 100%; + border-radius: 0; + font-size: 1.6rem; + + h3 { + font-size: 2rem; + font-weight: normal; + line-height: 3rem; + margin-bottom: 2rem; + } + + .form-row { + margin-bottom: 1rem; + flex-flow: column; + align-items: flex-start; + + .form-row__label { + margin-bottom: .5rem; + } + + .form-row__input { + width: 100%; + max-width: none; + + input[type="text"] { + line-height: 2.2rem; + } + } + + &.mobile__inline { + flex-flow: row; + + .form-row__label { + margin-bottom: 0; + } + + .form-row__input { + margin-left: 2rem; + width: auto; + } + } + } + + .agreement-submit { + flex-flow: column; + + .agreement { + font-size: 1.6rem; + margin-bottom: 2rem; + } + + .btn { + width: 100%; + } + } + } + } + .contact-me { + display: none; + } + } +} + +// version 2 +.contact-us-modal { + max-width: 80rem; + padding-bottom: 2rem; + + .img-cont { + overflow: hidden; + border-radius: .5rem; + margin-bottom: 2.5rem; + display: flex; + justify-content: center; + align-items: center; + + @media all and (min-width: 1640px) { + max-height: 28vh; + } + + img { + display: block; + } + } + + .hinter { + text-align: center; + font-size: 2.1rem; + color: $navy-3; + } + + .contact-us-modal-form { + .form_hiddens { + display: none; + } + + .fields-wrapper { + display: grid; + justify-content: start; + align-items: stretch; + grid-template-columns: repeat(2, 1fr); + grid-gap: 1em; + padding: 3rem 0; + + .form-row { + + //&.double { + // grid-column: span 2 / auto; + //} + + .form-row__input { + input { + width: 100%; + } + } + + .form-row__label { + display: none; + } + } + } + } + + .agreement-submit { + display: flex; + justify-content: space-between; + flex-flow: column; + align-items: center; + + .agreement { + margin-bottom: 2rem; + display: flex; + align-items: center; + color: $navy-3; + font-size: 1.8rem; + + input[type=checkbox] { + margin-right: .5rem; + } + } + } + + @media all and (max-width: 1000px) { + max-width: none; + width: 100%; + } + + @media all and (max-width: 640px) { + max-width: none; + width: 100%; + .hinter { + font-size: 1.6rem; + } + .contact-us-modal-form { + .fields-wrapper { + display: flex; + grid-gap: 1em; + padding: 2rem 0; + flex-flow: column; + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_faq.scss b/src/styles/partials/_faq.scss new file mode 100644 index 00000000..5ca62b44 --- /dev/null +++ b/src/styles/partials/_faq.scss @@ -0,0 +1,177 @@ +@use "@/styles/utils" as *; +.faq-cont { + background: $white; + padding-bottom: 8rem; +} + +.faq-set { + margin-bottom: 3rem; + + &:last-of-type { + margin-bottom: 0; + } + + .faq-set__title { + display: block; + font-size: 3.3rem; + color: $navy; + font-weight: bold; + line-height: 4rem; + margin-bottom: 3rem; + } + + ul { + display: block; + margin-bottom: 3rem; + } + + .faq-set__item { + background: $gray; + border-radius: 1.7rem; + display: block; + padding: 3rem; + margin-bottom: 2rem; + + &:last-of-type { + margin-bottom: 0; + } + + .faq-set__item__header { + display: flex; + justify-content: space-between; + align-items: center; + + h4 { + font-size: 3.3rem; + color: $navy; + font-weight: bold; + line-height: 4rem; + transition: $transition-3; + } + + .toggler { + width: 2rem; + height: 3rem; + cursor: pointer; + position: relative; + font-size: 3.3rem; + color: $navy; + font-weight: bold; + line-height: 1; + display: inline-block; + transition: all ease-in-out .3s; + + &:before { + content: '+'; + } + } + } + + .faq-set__item__desc { + overflow: hidden; + display: block; + max-height: 0; + transition: max-height 0.15s ease-out; + + p { + font-size: 2.3rem; + line-height: 4rem; + color: $black-1; + } + + ul { + li { + padding-left: 2rem; + list-style-position: inside; + list-style-type: disc; + + p { + display: inline; + } + + ul { + padding-left: 2rem; + + li { + list-style-type: circle; + } + } + } + } + + h4, h3 { + font-size: 2.5rem; + font-weight: 500; + } + } + + &.active { + .faq-set__item__header { + h4 { + line-height: 7rem; + } + + .toggler { + transform: rotate(45deg); + + &:before { + //content: '-'; + } + } + } + + .faq-set__item__desc { + max-height: 500rem; + transition: max-height 0.5s ease-in; + } + } + + } + +} + +@include mobile { + .faq-cont { + padding: 1.5rem; + + .standard { + width: 100%; + } + } + .faq-set { + .faq-set__title { + font-size: 2rem; + line-height: 3rem; + margin-bottom: 2rem; + } + + .faq-set__item { + padding: 1.5rem; + + .faq-set__item__header { + h4 { + font-size: 1.7rem; + line-height: 2rem; + } + + .toggler { + font-size: 2rem; + line-height: 3rem; + } + } + + .faq-set__item__desc { + p { + font-size: 1.5rem; + line-height: 2.8rem; + } + } + + &.active { + .faq-set__item__header h4 { + line-height: 2rem; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_footer.scss b/src/styles/partials/_footer.scss new file mode 100644 index 00000000..af326758 --- /dev/null +++ b/src/styles/partials/_footer.scss @@ -0,0 +1,259 @@ +@use "@/styles/utils" as *; +.footer { + background: $white; + padding: 2rem 7rem 0; + + .footer-cont { + padding: 10rem 0; + display: flex; + justify-content: space-between; + + .col { + flex: 0 0 auto; + max-width: 33%; + } + + .logo-address { + > a { + display: block; + margin-bottom: 6rem; + + img { + display: block; + max-width: 100%; + } + } + + p { + color: rgba($black, .8); + + a { + color: $green; + } + } + } + + .menu-cont { + ul { + margin-bottom: 5rem; + + li { + a { + color: rgba($black, .8); + line-height: 3rem; + font-weight: 500; + } + } + } + } + + .contact-us { + .contact-form { + display: block; + padding: 3rem; + background: $gray; + border-radius: 2rem; + margin-bottom: 2rem; + + p { + color: $navy; + margin-bottom: 2.5rem; + } + + form { + display: flex; + + input { + width: 50%; + border: .2rem solid rgba($black, .14); + font-size: 1.45rem; + padding: 1.2rem; + background: $white; + border-radius: 1rem; + } + + justify-content: space-between; + + .btn { + padding: 1.5rem 2.5rem; + flex: 0 0 auto; + } + } + } + + .sponsors { + display: flex; + justify-content: flex-end; + align-items: center; + + > * { + margin-left: 2rem; + } + } + } + } + + .copyright { + background: $white; + padding: 3rem 0; + box-shadow: 0 3px 60px rgba($black, .08); + + .copy__cont { + display: flex; + justify-content: space-between; + + .copy { + color: $black-2; + + a { + color: $black-2; + margin-left: .5rem; + + &:before { + content: '|'; + margin-right: .5rem; + } + } + } + } + } + + @include desktop-high { + padding: 2rem 4rem 0; + .footer-cont { + .contact-us .contact-form form { + input { + min-width: 18rem; + flex: 0 0 auto; + + } + + .btn { + flex: 0 0 auto; + font-size: 1.5rem; + } + } + } + .copyright { + font-size: 1.6rem; + } + } + @media all and (min-width: 640px) and (max-width: 920px) { + padding: 2rem 4rem 0; + .footer-cont { + flex-wrap: wrap; + + .col { + &.contact-us { + max-width: initial; + width: 100%; + } + } + } + } + @include mobtop { + padding: 2rem 4rem 0; + + .copyright { + .copy__cont { + text-align: center; + flex-flow: column; + } + } + } + @include mobile { + padding: 2rem 2rem 0; + .footer-cont { + flex-flow: column; + padding: 0; + + .col { + max-width: none; + + &.logo-address { + > a { + display: none; + } + + p { + font-size: 1.5rem; + line-height: 2.5rem; + } + + margin-bottom: 3rem; + } + + &.menu-cont { + ul { + margin-bottom: 0; + } + + .btn { + display: none; + } + + margin-bottom: 3rem; + } + + &.contact-us { + .contact-form { + p { + font-size: 1.4rem; + } + + form { + flex-wrap: wrap; + gap: 1rem; + + input { + min-width: 24rem; + } + + .btn { + justify-self: center; + font-size: 1.4rem; + } + } + } + + .sponsors { + width: 100%; + justify-content: space-around; + + a { + margin: 0; + } + } + } + } + } + .copyright { + padding: 1.5rem; + + .copy__cont { + width: 100%; + flex-flow: column; + + .copy { + font-size: 1.5rem; + line-height: 2.5rem; + text-align: center; + + span { + display: block; + } + + a:first-of-type { + &:before { + display: none; + } + } + } + + .review { + display: none; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_hero.scss b/src/styles/partials/_hero.scss new file mode 100644 index 00000000..84c08648 --- /dev/null +++ b/src/styles/partials/_hero.scss @@ -0,0 +1,445 @@ +@use "@/styles/utils" as *; +.hero { + position: relative; + background: $white; + + &.asym-image-text { + .asym__image { + height: 100%; + } + + &:before { + height: calc(100% - 6rem); + } + } + + //&.asym-image-text { + // &.five-steps { + // &:before { + // height: calc(100% - 12rem); + // } + // } + //} + + h1 { + color: $navy; + font-size: 5.5rem; + line-height: 6.6rem; + font-weight: bold; + margin-bottom: 2.5rem; + } + + p { + font-size: 2.4rem; + line-height: 3.6rem; + color: rgba($black, .8); + margin-bottom: 5rem; + } + + .breadcrumb { + .breadcrumb__cont { + display: inline-flex; + background: none; + padding: 0; + margin-top: 6rem; + } + } + + &.about-us { + p { + color: $black-1; + } + + .breadcrumb .breadcrumb__cont { + margin-top: 8rem; + } + + &.asym-image-text .asym__text { + padding: 5rem 0; + } + } + + .hero__cta-cont { + display: flex; + margin-top: 6rem; + align-items: center; + //justify-content: space-between; + } + + ul { + li { + font-size: 2.1rem; + line-height: 4rem; + + span { + display: inline-block; + } + } + } + + .hero__search { + display: inline-flex; + position: relative; + padding: 3rem 4rem; + background: $green; + margin-top: 4rem; + border-radius: 1rem; + + form { + width: 100%; + display: flex; + justify-content: space-between; + } + + input { + width: 54rem; + border: none; + font-size: 2rem; + line-height: 1; + color: $navy; + padding: 1.5rem 2rem; + border-radius: 1rem; + margin-right: 2.5rem; + } + } + + @include desktop-high { + h1 { + font-size: 4.5rem; + line-height: 5.5rem; + } + p { + margin-bottom: 2rem; + } + ul { + li { + line-height: 3.3rem; + + span { + display: inline; + } + } + } + &.asym-image-text { + padding-bottom: 0; + + .asym__text { + margin: 0; + } + } + .hero__search { + margin-top: 2rem; + justify-content: space-between; + padding: 2rem; + display: flex; + width: 130%; + + input { + width: 40rem; + } + } + } + @include mobile { + &:before { + position: absolute; + background: $gray; + content: ''; + width: 100%; + top: 0; + left: 0; + z-index: 0; + height: calc(100% - 6rem); + } + position: relative; + &.asym-image-text { + display: flex; + flex-flow: column; + + .asym__text { + display: flex; + width: 100%; + padding: 1.5rem; + position: relative; + + .standard { + width: 100%; + } + + .asym__text__cont { + width: 100%; + } + } + + h1 { + font-size: 2.5rem; + line-height: 3rem; + margin-bottom: 1.5rem; + } + + p { + line-height: 2.4rem; + font-size: 1.4rem; + margin-bottom: 1rem; + } + + .asym__image { + + &:before { + display: none; + } + + align-self: flex-end; + position: relative; + overflow: hidden; + width: calc(100% - 1.5rem); + justify-content: flex-end; + align-items: center; + border-radius: 0 0 0 5rem; + + img { + max-width: none; + width: 100%; + } + } + + ul { + li { + font-size: 1.3rem; + line-height: 2.3rem + } + } + } + .hero__search { + margin-top: 2.5rem; + padding: 1.5rem; + width: 100%; + box-shadow: 0 3px 13px rgba($black, .24); + + form { + width: 100%; + flex-direction: column; + } + + input { + font-size: 1.4rem; + line-height: 2.4rem; + width: 100%; + font-weight: 500; + margin: 0 0 1.5rem 0; + } + + .btn { + width: 100%; + display: block; + + } + } + &.about-us { + background: $gray; + + &:before { + display: none; + } + + .breadcrumb { + display: none; + } + + &.asym-image-text .asym__image { + } + + &.asym-image-text .asym__text { + padding: 2rem; + } + + .btn { + width: 100%; + text-align: center; + } + } + } +} + +.hero-system { + background: $white; + position: relative; + + .hero-wrapper { + background: $gray; + position: relative; + + .hero-image { + z-index: 9; + position: absolute; + top: 0; + right: 0; + height: calc(100% + 6rem); + max-width: calc(50% - 6rem); + overflow: hidden; + + img { + height: 100%; + object-fit: cover; + } + } + + .hero-inner { + position: relative; + z-index: 999; + padding: 11rem 0; + + .hero-container { + max-width: 50%; + position: relative; + } + } + + } + + .hero-breadcrumb { + .breadcrumb { + .breadcrumb__cont { + padding: 2rem 0 0 0; + } + } + } + + h1 { + color: $navy; + font-size: 5.5rem; + line-height: 6.6rem; + font-weight: bold; + margin-bottom: 2.5rem; + } + + p { + font-size: 2.4rem; + line-height: 3.6rem; + color: rgba($black, .8); + margin-bottom: 5rem; + } + + ul { + li { + font-size: 2.1rem; + line-height: 4rem; + + span { + display: inline-block; + } + } + } + + .hero__search { + display: inline-flex; + position: relative; + padding: 3rem 4rem; + background: $green; + margin-top: 4rem; + border-radius: 1rem; + + form { + width: 100%; + display: flex; + justify-content: space-between; + } + + .btn { + flex: 0 0 auto; + } + + input { + width: 54rem; + border: none; + font-size: 2rem; + line-height: 1; + color: $navy; + padding: 1.5rem 2rem; + border-radius: 1rem; + margin-right: 2.5rem; + } + } + + &.no-cover { + .hero-wrapper { + .hero-inner { + .hero-container { + max-width: 100%; + } + } + } + } + + @include mobile { + position: relative; + h1 { + font-size: 2.5rem; + line-height: 3rem; + margin-bottom: 1.5rem; + } + + p { + line-height: 2.4rem; + font-size: 1.4rem; + margin-bottom: 1rem; + } + + ul { + li { + font-size: 1.3rem; + line-height: 2.3rem + } + } + .hero-wrapper { + display: flex; + flex-direction: column; + + .hero-image { + position: relative; + width: 100%; + padding-left: 2%; + max-width: none; + + img { + display: block; + width: 100%; + height: auto; + } + } + + .hero-inner { + padding: 4rem 0; + + .hero-container { + max-width: none; + width: 100%; + } + } + } + .hero__search { + margin-top: 2.5rem; + padding: 1.5rem; + width: 100%; + box-shadow: 0 3px 13px rgba($black, .24); + + form { + width: 100%; + flex-direction: column; + } + + input { + font-size: 1.4rem; + line-height: 2.4rem; + width: 100%; + font-weight: 500; + margin: 0 0 1.5rem 0; + } + + .btn { + width: 100%; + display: block; + + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_img-text-aligner.scss b/src/styles/partials/_img-text-aligner.scss new file mode 100644 index 00000000..1ecedef3 --- /dev/null +++ b/src/styles/partials/_img-text-aligner.scss @@ -0,0 +1,142 @@ +@use "@/styles/utils" as *; +.img-text-aligner { + position: relative; + z-index: 9; + + .standard { + display: flex; + justify-content: center; + + > div { + width: 50%; + flex: 0 0 auto; + } + + } + + .img__cont { + display: inline-flex; + + img { + display: block; + @media (min-width: 1921px) { + border-radius: 6rem; + } + } + } + + &.img-is-left { + .img__cont { + justify-content: flex-end; + padding-right: 10rem; + + img { + border-radius: 0 6rem 6rem 0; + } + } + } + + &.img-is-right { + .img__cont { + justify-content: flex-start; + padding-left: 10rem; + + img { + border-radius: 6rem 0 0 6rem; + } + } + } + + &.single-block { + + .standard { + flex-flow: column; + + > div { + width: 100%; + } + } + } + + @include desktop-high { + .img__cont { + align-self: flex-start; + + img { + width: 100%; + height: auto; + } + } + &.img-is-right { + .txt__cont { + padding-left: 2rem; + } + } + &.img-is-left { + .txt__cont { + padding-right: 2rem; + } + } + } + @include mobile { + .standard { + flex-flow: column; + + > div { + width: 100%; + } + } + &.img-is-left { + .img__cont { + padding-right: 2rem; + + img { + width: 100%; + border-radius: 0 2rem 2rem 0; + } + } + + .txt__cont { + padding: 2rem 2%; + + p { + margin: 0 0 2rem 0; + font-size: 1.5rem; + line-height: 2.8rem; + + + div { + text-align: center; + } + } + } + } + &.img-is-right { + .standard { + flex-direction: column-reverse; + } + + .img__cont { + padding-left: 2rem; + + img { + width: 100%; + border-radius: 2rem 0 0 2rem; + } + } + + .txt__cont { + padding: 2rem 2%; + + p { + margin: 0 0 2rem 0; + font-size: 1.5rem; + line-height: 2.8rem; + + + div { + text-align: center; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_index.scss b/src/styles/partials/_index.scss new file mode 100644 index 00000000..562cdbf3 --- /dev/null +++ b/src/styles/partials/_index.scss @@ -0,0 +1,39 @@ +@use "@/styles/utils" as *; + +@forward "./nav"; +@forward "./footer"; +@forward "./hero"; +@forward "./mottos"; +@forward "./img-text-aligner"; +@forward "./modular-align"; +@forward "./asym-image-text"; +@forward "./invest"; +@forward "./layout-1"; +@forward "./layout-2"; +@forward "./layout-3"; +@forward "./layout-4"; +@forward "./layout-5"; +@forward "./layout-6"; +@forward "./breadcrumb"; +@forward "./contact-us"; +@forward "./contact-me"; +@forward "./modular-item"; +@forward "./new-items"; +@forward "./faq"; +@forward "./modular-houses"; +@forward "./centerized-section"; +@forward "./partners"; +@forward "./side-by-side"; +@forward "./redeem"; +@forward "./inlin-cta"; +@forward "./5-steps"; +@forward "./calculator"; +@forward "./layout-7"; +@forward "./register-page"; +@forward "./categories"; +@forward "./vacancies"; +@forward "./blog-post"; +@forward "./pop-up"; +@forward "./packages"; +@forward "./offering-properties"; +@forward "./new-calc-home"; \ No newline at end of file diff --git a/src/styles/partials/_inlin-cta.scss b/src/styles/partials/_inlin-cta.scss new file mode 100644 index 00000000..a5727e03 --- /dev/null +++ b/src/styles/partials/_inlin-cta.scss @@ -0,0 +1,119 @@ +@use "@/styles/utils" as *; +.inlin-cta { + display: flex; + justify-content: flex-start; + background: $white; + + .inlin-cta__child { + width: 50%; + flex: 0 0 auto; + display: inline-flex; + justify-content: flex-start; + align-items: flex-start; + + .img-cont { + max-width: 40%; + overflow: hidden; + position: relative; + z-index: 0; + flex: 0 0 auto; + display: inline-flex; + justify-content: flex-start; + + img { + display: block; + height: auto; + } + } + + .txt-cont { + padding: 5rem 10rem 5rem 0; + + h4 { + color: $navy; + font-size: 3.3rem; + line-height: 4.5rem; + font-weight: 500; + margin-bottom: 3.5rem; + } + } + + &:first-of-type { + border-right: .1rem solid rgba($green, .4); + } + &.img-is-left{ + .txt-cont { + padding: 5rem; + } + } + &.img-is-right { + + .img-cont { + justify-content: flex-end; + } + + .txt-cont { + padding: 5rem 0 5rem 10rem; + } + } + } + + @include mobile { + flex-flow: column; + .inlin-cta__child { + width: 100%; + position: relative; + + &:first-of-type { + border: none; + } + + + .img-cont { + z-index: 0; + max-width: none; + width: 100%; + + img { + height: 20rem; + width: auto; + } + } + + .txt-cont { + position: absolute; + right: 0; + top: 0; + padding: 1.5rem; + z-index: 99; + + h4 { + font-size: 1.4rem; + line-height: 2.5rem; + padding-left: 40%; + margin-bottom: 1.5rem; + } + + .btn { + width: 100%; + text-align: center; + } + } + + &.img-is-right { + .txt-cont { + padding: 1.5rem; + + h4 { + padding-left: 0; + padding-right: 40%; + } + } + + .img-cont { + //justify-content: flex-start; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_invest.scss b/src/styles/partials/_invest.scss new file mode 100644 index 00000000..727c4041 --- /dev/null +++ b/src/styles/partials/_invest.scss @@ -0,0 +1,160 @@ +@use "@/styles/utils" as *; +.invest { + &.asym-image-text { + //&:before { + // display: none; + //} + + .asym__image { + &:before { + background: $gray; + width: 100%; + height: calc(100% - 4rem); + position: absolute; + content: ''; + } + } + + .asym__text { + padding: 5rem 0; + } + } + + .section-title { + text-align: left; + padding: 0; + //line-height: 5.8rem; + margin-bottom: 2rem; + } + + p { + font-size: 2.4rem; + color: $black; + } + + .invest-form { + margin-top: 3rem; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + > input { + width: calc(50% - 1.5rem); + margin-bottom: 1.5rem; + + &[type=checkbox] { + border: .2rem solid rgba($black, .14); + width: auto; + margin: 0; + vertical-align: middle; + display: inline-block; + } + } + + .agreement { + width: 100%; + display: block; + margin-bottom: 2.5rem; + + label { + cursor: pointer; + font-size: 1.6rem; + color: rgba($black, .8); + + a { + color: rgba($black, .8); + border-bottom: .1rem solid; + } + } + } + + .code-num { + width: calc(50% - 1.5rem); + margin-bottom: 1.5rem; + } + } + + @include desktop-high { + &.asym-image-text { + background: $gray; + padding-bottom: 0; + + .asym__text { + padding: 5rem; + } + } + } + @include mobile { + background: $gray; + padding: 2rem 0; + min-height: 23rem; + .section-title { + font-size: 2rem; + line-height: 3rem; + } + &.asym-image-text { + justify-content: flex-end; + display: flex; + + .asym__text { + width: 100%; + + padding: 2rem; + + .asym__text__cont { + width: auto; + } + } + + .asym__image { + width: 40%; + height: 23rem; + flex: 0 0 auto; + overflow: hidden; + justify-content: flex-start; + + &:before { + display: none; + } + + img { + max-width: none; + height: 100%; + width: auto; + } + } + } + + p, .invest-form { + display: none; + } + } +} + +.investpage { + @include mobile { + &.hero { + background: $white; + + &:before { + display: none; + } + + &.asym-image-text { + .asym__image { + //top: 17rem; + } + } + + .hero__cta-cont { + flex-flow: column-reverse; + margin-top: 0; + + .btn { + text-align: center; + width: 100%; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_layout-1.scss b/src/styles/partials/_layout-1.scss new file mode 100644 index 00000000..ed73fd9c --- /dev/null +++ b/src/styles/partials/_layout-1.scss @@ -0,0 +1,66 @@ +@use "@/styles/utils" as *; +.layout-1 { + background: $white; + padding-bottom: 7rem; + + .twin { + align-items: flex-start; + } + + .text-set { + h2 { + font-size: 4.3rem; + font-weight: bold; + color: $navy; + line-height: 5rem; + margin-bottom: 5rem; + } + + p { + font-size: 2.3rem; + color: $black-1; + line-height: 3.8rem; + margin-bottom: 5rem; + } + } + + .img-cont { + padding-left: 6rem; + + img { + width: 100%; + } + } + + @include mobile { + padding: 3rem 0; + .twin { + flex-flow: column; + + .half { + width: 100%; + } + + .double-image { + display: none; + } + } + .text-set { + h2 { + font-size: 2rem; + line-height: 3rem; + margin-bottom: 3rem; + } + + p { + font-size: 1.5rem; + line-height: 2.5rem; + margin-bottom: 2.5rem; + + + div { + text-align: center; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_layout-2.scss b/src/styles/partials/_layout-2.scss new file mode 100644 index 00000000..2543a181 --- /dev/null +++ b/src/styles/partials/_layout-2.scss @@ -0,0 +1,45 @@ +@use "@/styles/utils" as *; +.layout-2 { + position: relative; + overflow: hidden; + background: $white; + + &:before { + content: ''; + background: $gray; + width: 100%; + height: calc(100% - 5rem); + position: absolute; + z-index: 0; + } + + .txt__cont { + padding-top: 5rem; + + p { + margin: 3rem 0 2rem 0; + font-size: 2.4rem; + line-height: 3.8rem; + color: $black-1; + } + } + + @include desktop-high { + .standard { + width: 100%; + } + } + @include mobile { + .section-title { + padding-left: 2%; + padding-right: 2%; + } + background: $gray; + .standard { + width: 100%; + } + &:before { + display: none; + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_layout-3.scss b/src/styles/partials/_layout-3.scss new file mode 100644 index 00000000..7b4dfc6d --- /dev/null +++ b/src/styles/partials/_layout-3.scss @@ -0,0 +1,69 @@ +@use "@/styles/utils" as *; +.layout-3 { + position: relative; + overflow: hidden; + background: $white; + + p { + color: $black-1; + font-size: 2.4rem; + line-height: 3.2rem; + margin: 3rem 0; + } + + .btn { + margin-top: 3rem; + } + + .checkmarked { + font-size: 2.1rem; + line-height: 4rem; + } + + .img-text-aligner { + align-items: center; + + &:first-of-type { + margin-bottom: 10rem; + } + } + + @include desktop-high { + .standard { + width: 100%; + } + } + @include mobile { + background: $gray; + .section-subtitle { + padding-left: 2%; + padding-right: 2%; + } + .section-title { + text-align: center; + background: $white; + } + .js__toggle__handle { + padding: 2rem 2%; + font-size: 2rem; + line-height: 3.5rem; + font-weight: 500; + } + .standard { + width: 100%; + } + &:before { + display: none; + } + .checkmarked { + font-size: 1.5rem; + line-height: 2.5rem; + } + ul + div { + text-align: center; + } + .img-text-aligner:first-of-type { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_layout-4.scss b/src/styles/partials/_layout-4.scss new file mode 100644 index 00000000..79251a91 --- /dev/null +++ b/src/styles/partials/_layout-4.scss @@ -0,0 +1,79 @@ +@use "@/styles/utils" as *; +.layout-4 { + padding: 6.5rem 0; + background: $white; + + p { + color: $black-1; + font-size: 2.4rem; + line-height: 3.2rem; + margin: 3rem 0; + } + + ul { + font-size: 2.1rem; + line-height: 4rem; + } + + .btn { + margin-top: 3rem; + } + + .modular-aligner:first-of-type { + margin-bottom: 5.5rem; + } + + @include mobile { + padding: 0; + background: $gray; + .modular-aligner { + .section-subtitle { + display: none; + } + + &.img-is-right { + .img-cont { + padding: 0; + margin-bottom: 2rem; + } + + .modular-aligner__cont { + flex-flow: column-reverse; + } + } + + &.img-is-left { + .img-cont { + padding: 0; + margin-bottom: 2rem; + } + } + + &:first-of-type { + margin-bottom: 0; + } + } + .js__toggle__handle { + padding: 2rem 2%; + font-size: 2rem; + line-height: 3.5rem; + font-weight: 500; + } + p { + font-size: 1.5rem; + line-height: 2.8rem; + margin: 0 0 2rem 0; + + + div { + text-align: center; + } + } + &.exception{ + .js__toggle__handle{ + &:after{ + height: 3rem; + } + } + } + } +} diff --git a/src/styles/partials/_layout-5.scss b/src/styles/partials/_layout-5.scss new file mode 100644 index 00000000..7b08d722 --- /dev/null +++ b/src/styles/partials/_layout-5.scss @@ -0,0 +1,223 @@ +@use "@/styles/utils" as *; +.layout-5 { + background: $white; + position: relative; + + .img-cont { + display: block; + overflow: hidden; + position: relative; + z-index: 0; + + img { + display: block; + } + } + + .overlay { + position: absolute; + z-index: 99; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + padding: 3rem 0; + + .form-cont { + width: 65%; + border-radius: 2rem; + background: $white; + padding: 5rem; + box-shadow: 0 3px 33px rgba($black, .05); + + > h5 { + font-size: 3.3rem; + font-weight: 500; + line-height: 4rem; + color: $navy; + } + + > p { + color: $black-1; + font-size: 2.3rem; + margin-bottom: 5rem; + } + + .form-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + + &:last-of-type { + margin-bottom: 0; + } + + .form-row__input { + width: 50rem; + + > input { + line-height: 4.2rem; + width: 100%; + } + + &.radio-group { + display: flex; + align-items: center; + + .radio-set { + margin-right: 3rem; + + input { + vertical-align: middle; + display: inline-block; + } + } + } + + .code-num { + > input { + line-height: 4.2rem; + } + + width: 100%; + } + } + } + + .agreement-submit { + margin-top: 4rem; + display: flex; + justify-content: space-between; + align-items: center; + + .agreement { + a, label { + color: rgba($black, .8); + } + + a { + border-bottom: .1rem solid; + } + + font-size: 2rem; + } + } + } + } + + @include mobile { + display: flex; + flex-flow: column; + .img-cont { + img { + width: 100%; + } + } + .overlay { + position: relative; + padding: 2rem; + width: 100%; + + .standard { + width: 100%; + } + + .form-cont { + box-shadow: none; + width: 100%; + padding: 0; + + > h5 { + font-size: 2rem; + line-height: 3rem; + margin-bottom: 1rem; + } + + > p { + font-size: 1.5rem; + line-height: 2.5rem; + } + + .form-row { + margin-bottom: 1rem; + flex-flow: column; + align-items: flex-start; + + .form-row__label { + margin-bottom: .5rem; + } + + .form-row__input { + width: 100%; + + input[type="text"] { + line-height: 2.2rem; + } + } + + &.mobile__inline { + flex-flow: row; + + .form-row__label { + margin-bottom: 0; + } + + .form-row__input { + margin-left: 2rem; + width: auto; + } + } + } + + .agreement-submit { + flex-flow: column; + + .agreement { + font-size: 1.5rem; + margin-bottom: 2rem; + } + + .btn { + width: 100%; + } + } + } + } + } + + + &.normalized { + padding: 4rem 0; + + .overlay { + position: relative; + z-index: 999; + } + + .img-cont { + position: absolute; + z-index: 0; + width: 100%; + height: 100%; + top: 0; + left: 0; + + img { + object-fit: cover; + width: 100%; + height: 100%; + } + } + + @media all and (max-width: 640px) { + .overlay { + .form-cont { + padding: 2rem; + } + } + } + } + +} \ No newline at end of file diff --git a/src/styles/partials/_layout-6.scss b/src/styles/partials/_layout-6.scss new file mode 100644 index 00000000..27c6d4dd --- /dev/null +++ b/src/styles/partials/_layout-6.scss @@ -0,0 +1,150 @@ +@use "@/styles/utils" as *; + +.layout-6 { + background: $white; + padding-bottom: 9rem; + + .layout-6__cont { + display: flex; + justify-content: space-between; + + + .l6_left { + width: calc(((100% - 10rem) * 60) / 100); + flex: 0 0 auto; + + h2 { + font-size: 4.3rem; + font-weight: bold; + color: $navy; + margin-bottom: 3rem; + line-height: 5rem; + } + + p { + font-size: 2.3rem; + line-height: 4rem; + color: $black-1; + } + + .checkmarked { + font-size: 2.4rem; + line-height: 4rem; + } + + > * { + margin-bottom: 3rem; + + &:last-child { + margin-bottom: 0; + } + } + + } + + .l6_right { + width: calc(((100% - 10rem) * 40) / 100); + flex: 0 0 auto; + + .single-shadowed-image-box { + margin-bottom: 7rem; + } + + .double-image { + &.pl-8-bl { + margin-bottom: 15rem; + } + } + + .box { + h3 { + font-size: 2.8rem; + color: $navy; + line-height: 4rem; + font-weight: bold; + margin-bottom: 2rem; + } + + .checkmarked { + font-size: 2.3rem; + } + } + } + } + + li.checkmarked { + display: flex; + align-items: baseline; + + &:before { + flex: 0 0 auto; + } + } + + @include mobile { + padding: 0; + .standard { + width: 100%; + } + .layout-6__cont { + flex-flow: column; + + .l6_left { + padding: 2rem; + width: 100%; + + h2 { + font-size: 2rem; + line-height: 3rem; + margin-bottom: 1rem; + } + + p { + font-size: 1.5rem; + line-height: 2.8rem; + } + + .checkmarked { + font-size: 1.5rem; + line-height: 2.5rem; + } + + > * { + margin-bottom: 1rem; + } + } + + .l6_right { + width: 100%; + + .double-image { + display: none; + } + + .single-shadowed-image-box { + box-shadow: none; + border-radius: 0; + padding: 1.5rem; + width: 100%; + margin-bottom: 4rem; + } + + .box.rounded { + border-radius: 0; + padding: 2rem; + + h3 { + font-size: 1.5rem; + line-height: 2.5rem; + margin-bottom: 1rem; + } + + .checkmarked { + font-size: 1.5rem; + line-height: 2.5rem; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_layout-7.scss b/src/styles/partials/_layout-7.scss new file mode 100644 index 00000000..93e74e54 --- /dev/null +++ b/src/styles/partials/_layout-7.scss @@ -0,0 +1,145 @@ +@use "@/styles/utils" as *; +.layout-7 { + background: $white; + padding-bottom: 10rem; + + .layout-7__cont { + display: flex; + justify-content: space-between; + + .txt-cont { + flex: 0 0 auto; + width: 50%; + + h2 { + font-weight: bold; + font-size: 4.3rem; + line-height: 5rem; + margin-bottom: 5rem; + color: $navy; + } + + p { + font-size: 2.3rem; + line-height: 4rem; + color: $black-1; + margin-bottom: 3rem; + } + } + + .img-info { + width: 50%; + flex: 0 0 auto; + padding-left: 6rem; + + .img-info__cont { + width: 100%; + box-shadow: 0 3px 33px rgba($black, .05); + border-radius: 2rem; + overflow: hidden; + display: inline-flex; + + .img-cont { + max-width: 30%; + overflow: hidden; + + img { + display: block; + } + } + + .info-cont { + background: $white; + padding: 5rem; + align-items: center; + justify-content: center; + display: inline-flex; + color: $navy; + flex-flow: column; + + h5 { + font-size: 2rem; + font-weight: 500; + line-height: 3.3rem; + margin-bottom: 5rem; + } + + p { + width: 100%; + font-size: 1.9rem; + line-height: 3rem; + + b { + color: $green; + font-weight: normal; + } + } + } + } + } + } + + @include mobile { + padding: 4rem 0; + .layout-7__cont { + flex-flow: column; + + .txt-cont { + width: 100%; + + h2 { + font-size: 2rem; + line-height: 3rem; + margin-bottom: 1rem; + } + + p { + font-size: 1.5rem; + line-height: 2.3rem; + } + } + + .img-info { + width: 100%; + padding-left: 0; + + .img-info__cont { + + .img-cont { + max-width: none; + width: 35%; + flex: 0 0 auto; + display: inline-flex; + justify-content: center; + + img { + display: inline-flex; + height: 100%; + width: auto; + margin-left: 20rem; + } + } + + .info-cont { + padding: 2rem; + width: 65%; + flex: 0 0 auto; + + h5 { + font-size: 1.5rem; + font-weight: 500; + line-height: 2.5rem; + margin-bottom: 2rem; + } + + p { + font-size: 1.5rem; + line-height: 2rem; + } + } + } + + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_load-spinner.scss b/src/styles/partials/_load-spinner.scss deleted file mode 100644 index 946d0e4a..00000000 --- a/src/styles/partials/_load-spinner.scss +++ /dev/null @@ -1,35 +0,0 @@ -.load-spinner { - position: relative; - width: 3rem; - height: 3rem; - - div { - position: absolute; - border: .3rem solid rgba(0, 0, 0, .2); - opacity: 1; - border-radius: 50%; - margin: auto; - top: 0; - left: 0; - right: 0; - bottom: 0; - animation: lds-ripple 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite; - - &:nth-child(2) { - animation-delay: -0.6s; - } - } -} - -@keyframes lds-ripple { - 0% { - width: 0; - height: 0; - opacity: 1; - } - 100% { - width: 90%; - height: 90%; - opacity: 0; - } -} \ No newline at end of file diff --git a/src/styles/partials/_modular-align.scss b/src/styles/partials/_modular-align.scss new file mode 100644 index 00000000..3f2aa690 --- /dev/null +++ b/src/styles/partials/_modular-align.scss @@ -0,0 +1,66 @@ +@use "@/styles/utils" as *; +.modular-aligner { + position: relative; + padding: 5.5rem 0; + + &:before { + content: ''; + background: $sky; + position: absolute; + height: 100%; + width: 100%; + left: 0; + top: 0; + z-index: 0; + } + + .modular-aligner__cont { + position: relative; + z-index: 9; + display: flex; + justify-content: space-between; + align-items: center; + + > div { + width: 50%; + flex: 0 0 auto; + } + } + + img { + border-radius: 6rem; + display: block; + max-width: 100%; + } + + &.img-is-right { + .img-cont { + padding-left: 5.5rem; + } + } + + &.img-is-left { + &:before { + right: 0; + left: auto; + } + + .img-cont { + padding-right: 5.5rem; + } + } + + @include mobile { + padding: 2rem 0; + &:before { + display: none; + } + .modular-aligner__cont { + flex-flow: column; + + > div { + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_modular-houses.scss b/src/styles/partials/_modular-houses.scss new file mode 100644 index 00000000..88e88385 --- /dev/null +++ b/src/styles/partials/_modular-houses.scss @@ -0,0 +1,146 @@ +@use "@/styles/utils" as *; +.modular-houses-hero { + h1 { + color: $navy; + font-size: 5.5rem; + line-height: 6.6rem; + font-weight: bold; + margin-bottom: 2.5rem; + } + + p { + font-size: 2.4rem; + line-height: 3.6rem; + color: $black-1; + margin-bottom: 5rem; + } + + .benefits { + margin-bottom: 5rem; + + li { + display: block; + line-height: 3rem; + color: $navy; + font-size: 2.5rem; + margin-bottom: 2.5rem; + + &:last-of-type { + margin-bottom: 0; + } + + img { + margin-right: 1.5rem; + display: inline-block; + vertical-align: middle; + } + + span { + display: inline-block; + vertical-align: middle; + } + } + } + +} + +.mhpage { + &.centerized-section { + padding-bottom: 12rem; + } + + .img-text-aligner { + margin-bottom: 12rem; + + &.single-block { + margin-bottom: 0; + } + } +} + +@include mobile { + .modular-houses-hero { + position: relative; + background: $gray; + + &:before { + display: none; + } + + .breadcrumb { + display: none; + } + + &:before { + position: absolute; + background: $gray; + content: ''; + width: 100%; + top: 0; + left: 0; + z-index: 0; + height: calc(100% - 6rem); + } + + &.asym-image-text { + + h1 { + font-size: 2.5rem; + line-height: 3rem; + margin-bottom: 1.5rem; + } + + p { + line-height: 2.4rem; + font-size: 1.4rem; + margin-bottom: 1rem; + } + + } + + .benefits { + li { + font-size: 1.5rem; + line-height: 2rem; + margin-bottom: 1.5rem; + + img { + margin-right: .5rem; + width: 1.7rem; + height: auto; + } + } + } + + .btn { + width: 100%; + text-align: center; + } + } + .mhpage { + &.centerized-section { + padding-bottom: 2rem; + } + + .img-text-aligner { + margin-bottom: 0; + + &.img-is-right { + flex-flow: column-reverse; + } + + .section-title { + background: $gray; + font-weight: bold; + padding: 1.5rem; + text-align: left; + font-size: 1.6rem; + line-height: 2.6rem; + } + + .section-subtitle { + display: none; + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_modular-item.scss b/src/styles/partials/_modular-item.scss new file mode 100644 index 00000000..86bd69e7 --- /dev/null +++ b/src/styles/partials/_modular-item.scss @@ -0,0 +1,240 @@ +@use "@/styles/utils" as *; +.modular-item { + overflow: hidden; + padding: 11rem 0; + + > div { + display: flex; + justify-content: space-between; + } + + &.white { + background: $white; + } + + .modular-item__left { + width: calc(50% - 3.3rem); + flex: 0 0 auto; + justify-content: flex-end; + display: inline-flex; + + .txt__cont { + width: calc(100% - 240px); + @media (max-width: 1640px) { + width: calc((1100px / 2) - 3rem); + } + @media (max-width: 1440px) { + width: calc((1000px / 2) - 3rem); + } + @media (max-width: 1000px) { + width: 48%; + } + + .section-subtitle { + font-size: 4rem; + line-height: 5.5rem; + margin-bottom: 5rem; + } + + p { + font-size: 2.4rem; + line-height: 4rem; + color: $black-1; + margin-bottom: 4rem; + } + + h3 { + font-size: 3rem; + font-weight: bold; + line-height: 4rem; + color: $navy; + } + + h4 { + font-size: 2.5rem; + font-weight: 500; + margin-top: 2rem; + line-height: 3rem; + color: $black-1; + margin-bottom: 1rem; + } + + *:last-child { + margin-top: 4rem; + } + } + } + + .modular-item__right { + width: calc(50% - 3.3rem); + flex: 0 0 auto; + flex-direction: column; + align-items: flex-end; + display: inline-flex; + + img { + width: 100%; + display: block; + } + + .desc-table { + width: calc(100% - 4rem); + padding: 4rem; + background: $navy; + border-radius: 0 0 0 3rem; + color: $white; + + h3 { + font-size: 3rem; + font-weight: bold; + margin-bottom: 3rem; + line-height: 3rem; + } + + ul { + li { + display: flex; + flex: 1; + font-size: 2.4rem; + line-height: 4rem; + + span { + width: 50%; + flex: 0 0 auto; + } + + b { + width: 50%; + flex: 0 0 auto; + font-weight: 300; + + &.align-center { + flex-wrap: wrap; + display: flex; + align-items: center; + justify-content: space-evenly; + text-align: center; + + span { + width: auto; + flex: none; + } + } + } + } + } + + p { + margin: 1rem 0; + } + + h5 { + margin: 1rem 0 0 0; + } + } + } + + @include mobile { + flex-flow: column; + padding: 0; + padding-bottom: 2rem; + > div { + flex-flow: column; + position: relative; + } + .section-subtitle { + padding: 2rem 1.5rem; + } + .modular-item__left { + width: 100%; + padding: 0 1.5rem; + + .txt__cont { + width: 100%; + + .section-subtitle { + display: none; + } + + p { + font-size: 1.5rem; + line-height: 2.5rem; + margin-bottom: 2rem; + + + div { + position: absolute; + bottom: 0; + } + } + + .btn { + width: 100%; + text-align: center; + } + + h3 { + font-size: 1.5rem; + line-height: 2.5rem; + } + + h4 { + font-size: 1.5rem; + line-height: 2.5rem; + } + + div:last-child { + text-align: center; + width: 92%; + margin: 2rem auto; + } + } + } + .modular-item__right { + width: 100%; + margin-bottom: 15rem; + + img { + width: calc(100% - 1.5rem); + height: auto; + margin-bottom: 2rem; + } + + .desc-table { + width: 100%; + padding: 1.5rem; + border-radius: 0; + + h3 { + margin-bottom: 0; + font-size: 2rem; + line-height: 3rem; + } + + ul { + li { + margin-top: 1rem; + flex-flow: column; + font-size: 1.5rem; + line-height: 2.5rem; + + + > span { + color: $green; + width: 100%; + } + + b { + width: 100%; + + &.align-center { + span { + color: $white; + } + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_mottos.scss b/src/styles/partials/_mottos.scss new file mode 100644 index 00000000..48f14c91 --- /dev/null +++ b/src/styles/partials/_mottos.scss @@ -0,0 +1,18 @@ +@use "@/styles/utils" as *; +.mottos { + padding: 7rem 0; + background: $white; + + ul { + display: flex; + width: 100%; + justify-content: space-between; + + li { + font-size: 2.1rem; + } + } + @include mobile { + display: none; + } +} \ No newline at end of file diff --git a/src/styles/partials/_nav.scss b/src/styles/partials/_nav.scss new file mode 100644 index 00000000..2475e07b --- /dev/null +++ b/src/styles/partials/_nav.scss @@ -0,0 +1,485 @@ +@use "@/styles/utils" as *; +.afm { + width: 100%; + display: block; + background: $white; + + img { + width: 100%; + display: block; + } + + @include mobile { + display: none; + } +} + +.nav-header__topbar { + background: $grass-green; + padding: 2rem 4rem; + display: flex; + justify-content: space-between; + + .rating { + display: inline-block; + vertical-align: middle; + margin: 0 1rem; + } + + .contact__menu { + ul { + li { + display: inline-block; + vertical-align: middle; + margin-right: 3rem; + + img { + display: inline-block; + vertical-align: middle; + margin-right: 1rem; + } + + &:last-of-type { + margin-right: 0; + } + + a { + display: inline-block; + vertical-align: middle; + color: $black-2; + + &.btn { + color: #ffffff; + font-weight: 500; + font-size: 1.7rem; + } + } + } + } + } +} + +.nav-header__menu { + z-index: 99999; + position: sticky; + top: 0; + background: $white; + display: flex; + align-items: center; + justify-content: space-between; + padding: 2rem 4rem; + box-shadow: 0 3px 60px rgba($black, .08); + + .logo { + margin-right: 2rem; + + img { + max-width: 24rem; + height: 5rem; + display: block; + } + } + + .nav-header__menu__items { + display: inline-flex; + align-items: center; + line-height: 2.4rem; + + > li { + display: inline-block; + margin-right: 5rem; + vertical-align: middle; + position: relative; + + &:last-of-type { + margin-right: 0; + } + + a { + color: $navy; + font-weight: bold; + display: block; + font-size: 2.1rem; + transition: $transition-2; + + &.btn { + color: $white; + font-weight: 500; + font-size: 1.7rem; + } + + &:hover { + color: $green; + } + } + + .btn { + &:hover { + color: $white; + } + } + + > ul { + position: absolute; + background: white; + padding: 3.5rem; + left: 0; + width: fit-content; + margin-left: -3.5rem; + top: 100%; + border-radius: 0 0 1rem 1rem; + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; + animation-timing-function: ease-in-out; + display: none; + + > li { + display: block; + margin: 0 0 2rem 0; + + &:last-of-type { + margin: 0; + } + + a { + font-size: 1.9rem; + font-weight: 400; + display: block; + white-space: nowrap; + line-height: 2rem; + padding-bottom: .2rem; + border-bottom: .1rem solid transparent; + + &:hover { + border-bottom: .1rem solid; + } + } + } + } + + &:hover { + ul { + display: block; + -webkit-animation-duration: .3s; + animation-duration: .3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both + } + } + + &.active { + a { + color: $green; + } + } + } + } + + .nav-header__right-cont { + display: inline-flex; + align-items: center; + } + + @media (min-width: 1000px) and (max-width: 1670px) { + .logo { + margin-right: 3rem; + + img { + height: 5rem; + } + } + .nav-header__menu__items { + > li { + a { + font-size: 2rem; + } + + margin-right: 3rem; + } + } + } + @include desktop-high { + padding: 2rem 2%; + .logo { + margin-right: 3rem; + + img { + height: auto; + width: 20rem; + } + } + .nav-header__menu__items { + > li { + margin-right: 2rem; + + a { + font-size: 1.6rem; + + &.btn { + padding: 1.5rem 1.7rem; + } + } + } + } + } +} + +.nav-header__search { + position: relative; + display: inline-flex; + width: 5rem; + height: 5rem; + align-self: center; + flex: 0 0 auto; + + .search__cta { + flex: 0 0 auto; + display: inline-flex; + justify-content: center; + width: 100%; + height: 100%; + padding: 0 1.5rem; + margin-left: 2rem; + border-radius: 50%; + align-items: center; + transition: $transition-3; + cursor: pointer; + + &:hover { + background: $navy; + + img { + filter: invert(1) brightness(100); + } + } + } + + .search__form { + position: absolute; + background: $navy; + top: 100%; + right: -3.4rem; + display: none; + padding: 2rem; + border-radius: 2rem; + margin-top: 1rem; + animation-fill-mode: forwards; + animation-name: fadeInDown; + animation-duration: .3s; + + &:before { + content: ''; + position: absolute; + bottom: 100%; + right: 2.7rem; + width: 0; + height: 0; + border-bottom: 1rem solid $navy; + border-right: 1rem solid transparent; + border-left: 1rem solid transparent; + } + + input { + width: 22rem; + border: none; + margin-right: 1.5rem; + background: rgba($green, .2); + text-transform: capitalize; + color: $white; + } + } + + &.open { + .search__cta { + background: $navy; + + img { + filter: invert(1) brightness(100); + } + } + + .search__form { + display: flex; + } + } +} + +.nav-menu__mobile { + display: none; + position: fixed; + height: 100%; + width: 100%; + left: 0; + top: 0; + z-index: 99; + padding: 15rem 1rem; + justify-content: flex-start; + align-items: center; + flex-flow: column; + background: $navy; + box-sizing: border-box; + animation-duration: .3s; + animation-fill-mode: forwards; + animation-name: fadeIn; + overflow-y: auto; + + ul { + display: block; + width: 100%; + + > li { + line-height: 2.5em; + + a { + color: $white; + font-weight: bold; + font-size: 2.1rem; + } + + .btn { + width: 100%; + text-align: center; + margin: 2rem 0; + } + + > ul { + font-size: 1.7rem; + line-height: 2em; + padding-left: 1rem; + } + } + + &:last-of-type { + li { + display: flex; + align-items: center; + + a { + margin-left: 1rem; + font-weight: 300; + font-size: 1.7rem; + } + } + } + + .has-children { + overflow: hidden; + max-height: 5rem; + transition: max-height ease-in-out .6s; + + span { + display: block; + color: $white; + font-weight: bold; + font-size: 2.1rem; + } + + &.opened { + max-height: 30rem; + } + } + } +} + +@media (min-width: 640px) and (max-width: 960px) { + .nav-header__menu .nav-header__menu__items { + line-height: 4.6rem; + flex-wrap: wrap; + } +} + +@include mobile { + .ham-cont { + margin-left: 1rem; + } + .nav-header__topbar { + flex-flow: column; + padding: 1rem; + position: relative; + z-index: 999; + + .review { + width: 100%; + text-align: center; + font-size: 1.3rem; + line-height: 1.7rem; + + > span:first-of-type { + display: block; + } + + .rating { + + img { + height: 1.3rem; + } + } + } + + .contact__menu { + display: none; + } + } + .nav-header__menu { + padding: 1.5rem; + + .logo { + margin: 0; + + img { + width: 22rem; + max-width: 90%; + height: auto; + } + } + + .nav-header__menu__items { + display: none; + } + } + .nav-header__search { + .search__cta { + padding: 1rem; + margin: 0; + + img { + width: 2rem; + } + + &:hover { + + } + } + + .search__form { + width: 100vw; + top: 4.8rem; + border-radius: 0; + right: -5.5rem; + + &:before { + right: 6.2rem; + } + + input { + + } + } + + &.open { + .search__cta { + + img { + } + } + + .search__form { + } + } + } + .nav-menu__mobile { + &.is-open { + display: flex; + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_new-calc-home.scss b/src/styles/partials/_new-calc-home.scss new file mode 100644 index 00000000..c8200ec4 --- /dev/null +++ b/src/styles/partials/_new-calc-home.scss @@ -0,0 +1,33 @@ +@use "@/styles/utils" as *; +.new-calc-home { + background-color: $white; + padding: 7rem 10%; + + .inner-wrapper { + display: flex; + width: 100%; + justify-content: space-between; + + > * { + flex: 0 0 auto; + flex-basis: 48%; + } + + .txt__cont { + h2 { + font-size: 4.3rem; + font-weight: bold; + color: $navy; + line-height: 5rem; + margin-bottom: 5rem; + } + + p { + font-size: 2.3rem; + color: $black-1; + line-height: 3.8rem; + margin-bottom: 5rem; + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_new-items.scss b/src/styles/partials/_new-items.scss new file mode 100644 index 00000000..13b681f3 --- /dev/null +++ b/src/styles/partials/_new-items.scss @@ -0,0 +1,21 @@ +@use "@/styles/utils" as *; +.new-items { + background: $white; + padding-bottom: 8rem; + @include mobile { + padding: 2rem 1.5rem; + .standard { + width: 100%; + } + .contact-me { + display: none; + } + .al-center { + padding: 4rem 0; + + .btn { + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_offering-properties.scss b/src/styles/partials/_offering-properties.scss new file mode 100644 index 00000000..d2ca5dff --- /dev/null +++ b/src/styles/partials/_offering-properties.scss @@ -0,0 +1,176 @@ +@use "@/styles/utils" as *; +.offering-properties { + padding: 6rem 0; +} + +.offering-investment { + padding: 6rem 0; + background: $white; + + .title-slides { + display: flex; + justify-content: space-between; + + .desc-title { + width: 50%; + flex: 0 0 auto; + + h1, h2, h3 { + font-size: 3.3rem; + font-weight: bold; + line-height: 4.5rem; + color: $navy; + margin-bottom: 2rem; + } + + ul { + margin-bottom: 2rem; + + li { + font-size: 2.1rem; + line-height: 4rem; + + &.checkmarked { + display: flex; + align-items: baseline; + + &:before { + flex: 0 0 auto; + } + } + } + } + + } + + .property-slider { + width: 50%; + flex: 0 0 auto; + align-items: center; + + .slide.agile__slide img { + width: 100% !important; + } + + .agile__actions { + margin-top: 2rem; + + .agile__nav-button { + background: $navy; + border-radius: 50%; + border: none; + font-size: 2rem; + color: $white; + padding: 0; + width: 4rem; + height: 4rem; + } + + .agile__dots { + .agile__dot { + margin: 0 .5rem; + + button { + padding: 0; + border: none; + border-radius: 50%; + background-color: rgba(0, 0, 0, .2); + width: 1rem; + height: 1rem; + } + + &.agile__dot--current { + button { + background-color: $navy; + } + } + } + } + } + } + + @include mobile { + flex-direction: column-reverse; + .desc-title { + width: 100%; + } + .property-slider { + margin-bottom: 4rem; + width: 100%; + } + } + } + + p { + font-size: 2.3rem; + color: #595959; + line-height: 3.8rem; + } + + .data-cont { + margin-top: 4rem; + + h1, h2, h3 { + font-size: 3.3rem; + font-weight: bold; + line-height: 4.5rem; + color: $navy; + margin-bottom: 2rem; + } + + .data-table { + font-size: 1.8rem; + color: $white; + line-height: 3rem; + display: grid; + grid-column-gap: 2rem; + grid-row-gap: 2rem; + border-radius: 2rem; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fill, minmax(30rem, calc((100% - 2rem) / 2))); + + li { + background-color: $green; + padding: 2rem; + border-radius: 1rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + + > * { + display: flex; + justify-content: space-between; + position: relative; + flex-wrap: wrap; + + &:before { + position: absolute; + content: '✔'; + filter: brightness(0) invert(1); + } + + span { + color: $black-3; + padding-left: 4rem; + padding-right: 2rem; + flex: 0 0 auto; + } + + b { + color: $white; + font-weight: 500; + } + + } + + } + + @media all and (max-width: 900px) { + grid-template-columns: repeat(auto-fill, calc(50% - 2rem)); + } + @include mobile { + grid-template-columns: repeat(auto-fill, 100%); + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_packages.scss b/src/styles/partials/_packages.scss new file mode 100644 index 00000000..085d61b2 --- /dev/null +++ b/src/styles/partials/_packages.scss @@ -0,0 +1,173 @@ +@use "@/styles/utils" as *; +.packages { + padding: 6rem 0; + + .packages-container { + display: flex; + justify-content: space-evenly; + + .pkg { + background: $white; + width: 35%; + box-shadow: rgba(0, 0, 0, 0.05) 0 3px 33px; + border-radius: 2rem; + overflow: hidden; + + .pkg-head { + background-color: $green; + position: relative; + + &:after { + position: absolute; + width: 0; + height: 0; + content: ''; + border-top: 1rem solid $green; + border-right: 1rem solid transparent; + border-left: 1rem solid transparent; + top: 100%; + left: 0; + right: 0; + margin: auto; + } + + .pkg-title { + text-align: center; + background-color: rgba(0, 0, 0, .1); + color: $white; + + h2 { + font-size: 2.4rem; + font-weight: bold; + line-height: 8rem; + } + + } + + .pkg-bold { + padding: 4rem 2rem; + color: $black-3; + + h3 { + line-height: 1; + font-size: 4rem; + text-align: center; + color: $white; + } + } + + .percent { + text-align: center; + font-size: 4rem; + margin: 3rem 0; + + span { + font-size: .5em; + margin: 0 .5em; + } + + b { + font-weight: bold; + } + } + + .per { + position: absolute; + color: $white; + bottom: 0; + right: 0; + line-height: 1; + padding: 1rem; + } + } + + .pkg-body { + font-size: 2rem; + padding: 2em 1em; + + .checkmarked { + color: $black-1; + margin-bottom: 2rem; + display: flex; + align-items: baseline; + + &:before { + flex: 0 0 auto; + } + } + } + + .pkg-footer { + padding: 0 2em 2em; + } + + .cta-cont { + display: flex; + align-items: center; + justify-content: space-evenly; + font-size: 1.4rem; + line-height: 2rem; + + a { + font-weight: bold; + font-size: 1em; + + &.primary { + border-radius: 5rem; + border: .2rem solid $green; + color: $green; + padding: .5em .75em; + + &:after { + display: inline-block; + content: '>'; + font-size: 2rem; + font-weight: 500; + vertical-align: middle; + margin-left: .5em; + } + + } + + &.secondary { + color: $black-3; + line-height: 4rem; + } + } + + } + } + } + + @media all and (max-width: 860px) { + .packages-container { + .pkg { + .cta-cont { + flex-flow: column; + + a { + margin-top: 2rem; + } + } + } + } + } + @media all and (max-width: 640px) { + .packages-container { + flex-flow: column; + + .pkg { + width: 100%; + margin-bottom: 4rem; + + .cta-cont { + flex-flow: column; + + a { + margin-top: 2rem; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_partners.scss b/src/styles/partials/_partners.scss new file mode 100644 index 00000000..3b149009 --- /dev/null +++ b/src/styles/partials/_partners.scss @@ -0,0 +1,79 @@ +@use "@/styles/utils" as *; +.our-partners { + background: $white; + padding-bottom: 6rem; + + .section-subtitle { + font-size: 4.3rem; + line-height: 5rem; + margin-bottom: 4rem; + } +} + +.partners-cont { + li { + display: flex; + justify-content: space-between; + font-size: 2.3rem; + font-weight: 500; + color: $navy; + align-items: center; + padding-bottom: 1.7rem; + margin-bottom: 6rem; + border-bottom: .1rem solid rgba($navy, .4); + + &:last-of-type { + margin-bottom: 0; + } + + .images { + display: inline-flex; + align-items: center; + + img { + display: inline-block; + max-height: 6.4rem; + width: auto; + margin-left: 9rem; + } + } + } +} + +@include mobile { + .our-partners { + .standard { + width: 100%; + } + + padding: 3rem 0; + + .section-subtitle { + font-size: 2rem; + line-height: 3rem; + margin-bottom: 2rem; + padding: 0 1.5rem; + } + } + .partners-cont { + li { + padding: 0 1.5rem; + flex-flow: column; + text-align: left; + align-items: flex-start; + font-size: 1.5rem; + line-height: 2.5rem; + margin-bottom: 2rem; + + .images { + margin: 1.5rem 0; + flex-wrap: wrap; + + img { + margin: 0 1rem 0 0; + max-height: 4rem; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_pop-up.scss b/src/styles/partials/_pop-up.scss new file mode 100644 index 00000000..b5a5d03c --- /dev/null +++ b/src/styles/partials/_pop-up.scss @@ -0,0 +1,201 @@ +@use "@/styles/utils" as *; +.popup-cont { + position: fixed; + bottom: 0; + left: 0; + z-index: 99999; +} + +.popup-image { + display: flex; + justify-content: center; + flex: 1; + align-items: center; + + a { + display: block; + + &:hover { + opacity: 1; + } + } + + img { + max-width: 90vh; + height: auto; + display: block; + @media all and (orientation: portrait) { + max-width: 90vw; + } + } +} + +.popup { + position: fixed; + z-index: 99999; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, .1); + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(3px); + text-align: center; + transition: all ease-in-out .3s; + opacity: 1; + + .popup-wrapper { + display: flex; + align-items: center; + justify-content: center; + position: relative; + transition: all ease-in-out .5s; + transform: scale(1); + } + + i.close { + position: absolute; + transition: all ease-in-out 0.2s; + cursor: pointer; + z-index: 999; + font-size: 1.8rem; + right: 5%; + top: 5%; + color: $white; + width: 3rem; + height: 3rem; + text-align: center; + border-radius: 50%; + background: $navy; + display: flex; + justify-content: center; + align-items: center; + font-family: monospace; + cursor: pointer; + } + + &.hidden { + opacity: 0; + transform: scale(0); + + .popup-wrapper { + transform: scale(0); + } + } +} + +.popup-minified { + margin: 1rem; + background-color: $navy; + display: flex; + align-items: center; + color: $white; + border-radius: 1rem; + padding: 1rem; + cursor: pointer; + + span { + padding: 0 1rem; + } + + .closer { + border-left: .1rem solid rgba($white, .1); + padding: 0 1rem; + } +} + +.popup-2023-10 { + .popup { + background: rgba(245, 245, 245, 0.10); + backdrop-filter: blur(2px); + + .popup-wrapper { + max-width: 760px; + border-radius: 20px; + background: #E3F8F1; + border: 1.5px solid #2F66A0; + padding: 40px; + position: relative; + isolation: isolate; + + &:before { + border-radius: 20px; + content: ''; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background: linear-gradient(180deg, #FFF -31.77%, rgba(255, 255, 255, 0.00) 162.38%); + z-index: -1; + } + + .img-cont { + border-radius: 5px; + overflow: hidden; + + img { + display: block; + width: 100%; + } + } + + .heading { + margin-top: 20px; + text-align: center; + + h3 { + color: #2F66A0; + text-align: center; + font-size: 30px; + font-weight: 500; + line-height: 1.2; + max-width: 91%; + } + } + + .body { + max-width: 94%; + color: #000; + text-align: center; + font-size: 21px; + font-style: italic; + font-weight: 400; + line-height: 1.4; + margin-top: 1.5rem; + } + + .footer { + background: none; + display: flex; + justify-content: center; + align-items: center; + + a { + display: inline-block; + border-radius: 2px; + background: #63D8B3; + box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.25); + color: #FFF; + font-size: 18px; + font-weight: 500; + line-height: 1; + letter-spacing: 0.36px; + padding: 15px 50px; + } + } + } + + i.close { + background: none; + font-size: 3.4rem; + right: 0; + top: 0; + width: 5rem; + height: 5rem; + color: $navy; + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_redeem.scss b/src/styles/partials/_redeem.scss new file mode 100644 index 00000000..bdd6bd0a --- /dev/null +++ b/src/styles/partials/_redeem.scss @@ -0,0 +1,167 @@ +@use "@/styles/utils" as *; +.plans { + padding: 0 7rem 5rem; + + .side-by-side { + .side-by-side__item { + display: flex; + flex-flow: column; + justify-content: space-between; + padding: 1rem; + + h3 { + font-weight: bold; + text-align: center; + font-size: 3.7rem; + margin: 0; + } + + p { + margin-top: 3.5rem; + text-align: center; + color: $black; + font-size: 2.1rem; + line-height: initial; + padding: 0 3rem; + } + + .wrapper { + flex: 1; + display: flex; + flex-flow: column; + justify-content: flex-end; + padding: 3rem; + + ul { + padding: 0 15%; + + li { + color: $navy; + font-weight: 500; + font-size: 1.8rem; + line-height: initial; + margin-bottom: 4rem; + + &:last-of-type { + margin-bottom: 0; + } + } + } + + .btn { + text-align: center; + width: 80%; + margin-bottom: 3rem; + } + } + } + } + + @media all and (max-width: 880px) { + padding: 0 4rem 4rem; + .side-by-side { + .side-by-side__item { + .wrapper { + ul { + padding: 0; + } + } + } + } + } + @media all and (max-width: 640px) { + .side-by-side { + .side-by-side__item { + padding: 1rem; + margin-bottom: 2rem; + + .img-cont { + margin: 0; + } + + h3 { + font-size: 2.4rem; + line-height: initial; + margin: 2rem 0; + } + + p { + font-size: 1.6rem; + padding: 0; + } + + .wrapper { + padding: 2rem 0; + + + ul { + margin: 2rem 0; + + li { + font-size: 1.6rem; + } + } + + .btn { + width: 100%; + } + } + } + } + } +} + +.inlin-cta-cont.redeem { + background: $white; + padding-bottom: 10rem; +} + +.hero.redeem { + p { + color: $black-1; + } + + .breadcrumb .breadcrumb__cont { + margin-top: 8rem; + } + + &.asym-image-text .asym__text { + padding: 5rem 0; + } +} + + +@include mobile { + .redeem { + &.hero { + background: $gray; + + &:before { + display: none; + } + + &.asym-image-text { + .asym__text { + padding: 2rem 0; + + .asym__text__cont { + padding: 0 2rem; + } + + .btn { + width: 100%; + text-align: center; + } + } + + .breadcrumb { + display: none; + } + } + } + + &.inlin-cta-cont { + padding-bottom: 0; + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_register-page.scss b/src/styles/partials/_register-page.scss new file mode 100644 index 00000000..43ec7bd8 --- /dev/null +++ b/src/styles/partials/_register-page.scss @@ -0,0 +1,328 @@ +@use "@/styles/utils" as *; +.register { + background: $white; + display: flex; + flex-flow: column; + min-height: 100vh; + + .logo-header { + padding: 2.5rem 4rem; + border-bottom: .1rem solid rgba($navy, .4); + } + + .register-form-cont { + padding-top: 7rem; + display: inline-flex; + justify-content: center; + align-items: center; + flex-flow: column; + + .register-form { + display: inline-flex; + text-align: center; + align-items: center; + flex-direction: column; + + .progress-bar { + border: .2rem solid rgba($black, .14); + background: $white; + border-radius: 1rem; + position: relative; + height: 1.4rem; + width: 55rem; + + .progress-bar__progress { + position: absolute; + top: -.2rem; + left: -.2rem; + background: $green; + height: 1rem; + box-sizing: content-box; + border: .2rem solid $green; + border-radius: 1rem; + transition: $transition-3; + } + } + + .title-cont { + text-align: center; + margin-top: 6rem; + margin-bottom: 2rem; + max-width: 85rem; + + h1 { + color: $navy; + font-weight: bold; + font-size: 4.5rem; + line-height: 6rem; + display: inline-block; + vertical-align: middle; + } + + img { + display: inline-block; + vertical-align: middle; + } + } + + .step-cont { + display: flex; + text-align: center; + flex-direction: column; + animation-name: fadeIn; + animation-fill-mode: forwards; + animation-duration: .3s; + animation-timing-function: ease-in-out; + + > p { + color: $black-1; + font-size: 2.3rem; + line-height: 4rem; + margin-bottom: 5rem; + max-width: 55rem; + } + + .code-num { + width: 100%; + margin: 2rem 0; + + input { + margin-bottom: 0; + } + } + } + + form { + width: 55rem; + + .field-row { + margin-bottom: 2rem; + text-align: left; + + &:after { + margin-top: 1rem; + } + } + + input[type="text"], input[type="number"] { + width: 100%; + color: $navy; + font-size: 2.2rem; + margin-bottom: 2rem; + + &:last-of-type { + margin-bottom: 0; + } + } + + input[type="number"] { + font-size: 1.7rem; + line-height: 2; + } + + > p { + font-size: 1.8rem; + color: rgba($black-1, .8); + text-align: center; + width: 100%; + margin: 3rem 0; + } + + select { + border-radius: 1rem; + border: 0.2rem solid rgba($black, 0.14); + font-size: 2.2rem; + color: $navy; + width: 100%; + font-weight: 500; + line-height: 3rem; + padding: 1.2rem 1.5rem; + } + + .inpt-set { + margin-bottom: 3rem; + width: 55rem; + + p { + font-size: 1.8rem; + color: rgba($black-1, .8); + width: 100%; + margin-bottom: 1rem; + text-align: left; + } + } + + .agreement { + margin: 2rem 0; + display: flex; + align-items: center; + position: relative; + + &:after { + position: absolute; + top: 100%; + left: 0; + } + + input[type="checkbox"] { + margin-right: 1rem; + } + + label { + display: inline-block; + vertical-align: middle; + font-size: 2rem; + color: rgba($black-1, .8); + + a { + color: $black-1; + padding-bottom: .5rem; + border-bottom: .1rem solid; + } + } + } + + .btn { + margin-top: 2rem; + width: 100%; + text-align: center; + } + } + } + } + + .thank-you { + .checkmark__circle { + stroke-dasharray: 166; + stroke-dashoffset: 166; + stroke-width: 2; + stroke-miterlimit: 10; + stroke: $green; + fill: none; + animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; + } + + .checkmark { + width: 56px; + height: 56px; + border-radius: 50%; + display: block; + stroke-width: 2; + stroke: #ffffff; + stroke-miterlimit: 10; + margin: 0 auto; + box-shadow: inset 0px 0px 0px $green; + animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; + } + + .checkmark__check { + transform-origin: 50% 50%; + stroke-dasharray: 48; + stroke-dashoffset: 48; + animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; + } + + @keyframes stroke { + 100% { + stroke-dashoffset: 0; + } + } + @keyframes scale { + 0%, 100% { + transform: none; + } + 50% { + transform: scale3d(1.1, 1.1, 1); + } + } + @keyframes fill { + 100% { + box-shadow: inset 0px 0px 0px 30px $green; + } + } + } + + @include mobile { + .logo-header { + display: flex; + padding: 1.5rem; + justify-content: center; + + a { + display: inline-flex; + text-align: center; + } + + img { + display: inline-block; + width: auto; + height: 5rem; + } + } + .register-form-cont { + padding: 3rem 0; + + .register-form { + .progress-bar { + width: 100%; + border-radius: 0; + border-left: none; + border-right: none; + + .progress-bar__progress { + border-radius: 0 1rem 1rem 0; + } + } + + .title-cont { + width: 100%; + margin: 3rem 0 1rem 0; + + h1 { + font-size: 2.2rem; + line-height: 3rem; + } + + img { + width: 4rem; + height: 4rem; + } + } + + > p { + font-size: 1.5rem; + line-height: 2.5rem; + max-width: none; + padding: 0 1.5rem; + margin: 0 0 2rem; + } + + form { + width: 100%; + padding: 0 1.5rem; + + input[type=text], input[type="text"], select { + font-size: 1.8rem; + } + + .inpt-set { + width: 100%; + margin-bottom: 1rem; + + p { + font-size: 1.5rem; + line-height: 2.5rem; + } + } + + .agreement { + label { + font-size: 1.5rem; + text-align: left; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_side-by-side.scss b/src/styles/partials/_side-by-side.scss new file mode 100644 index 00000000..278187cf --- /dev/null +++ b/src/styles/partials/_side-by-side.scss @@ -0,0 +1,99 @@ +@use "@/styles/utils" as *; +.side-by-side { + display: flex; + justify-content: space-between; + //align-items: center; + + .side-by-side__item { + width: calc((100% - 6rem) / 2); + background: $white; + border-radius: 2rem; + padding: 4.5rem 3.5rem; + box-shadow: 0 3px 33px rgba($black, .05); + + h3 { + font-size: 3.3rem; + font-weight: 500; + color: $navy; + line-height: 4rem; + margin-bottom: 3rem; + } + + .img-cont { + border-radius: 2rem; + overflow: hidden; + display: flex; + justify-content: center; + margin-bottom: 3.5rem; + + img { + display: block; + width: 100%; + } + } + + p { + font-size: 2.4rem; + color: $black-1; + line-height: 4rem; + margin-bottom: 3.5rem; + } + + ul { + li { + font-size: 2.4rem; + line-height: 4rem; + + &.checkmarked { + display: flex; + align-items: baseline; + + &:before { + display: inline-flex; + flex: 0 0 auto; + } + } + } + + margin-bottom: 3.5rem; + } + } + + @include mobile { + flex-flow: column; + .side-by-side__item { + box-shadow: none; + width: 100%; + padding: 2rem; + + h3 { + font-size: 2rem; + line-height: 3rem; + margin-bottom: 0; + } + + .img-cont { + margin: 2rem 0; + } + + p { + font-size: 1.5rem; + line-height: 2.5rem; + margin-bottom: 1rem; + } + + ul { + margin-bottom: 2rem; + + li { + font-size: 1.5rem; + line-height: 2.5rem; + } + } + + .btn { + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/src/styles/partials/_vacancies.scss b/src/styles/partials/_vacancies.scss new file mode 100644 index 00000000..6ce6a7ac --- /dev/null +++ b/src/styles/partials/_vacancies.scss @@ -0,0 +1,35 @@ +@use "@/styles/utils" as *; +.vacancies { + background: $white; + padding: 10rem 0; + + h2 { + display: block; + font-size: 2.5rem; + color: $green; + font-weight: bold; + line-height: 2.4rem; + margin-bottom: 2.5rem; + } + + ul { + font-size: 2rem; + margin-bottom: 2rem; + } + + h3 { + display: block; + font-size: 2rem; + color: $navy; + font-weight: bold; + line-height: 3rem; + margin-bottom: 2rem; + } + + p { + color: $black-1; + font-size: 2rem; + line-height: 3rem; + margin: 1rem 0; + } +} \ No newline at end of file diff --git a/src/styles/utils/_elements.scss b/src/styles/utils/_elements.scss new file mode 100644 index 00000000..785dc7f6 --- /dev/null +++ b/src/styles/utils/_elements.scss @@ -0,0 +1,751 @@ +@use "@/styles/utils/variables" as *; +@use "@/styles/utils/mixins" as *; + +.s-hover { + overflow: hidden; + transition: $transition-3; + + * { + display: block; + } + + &:hover { + > * { + transform: translateY(-2rem); + } + } +} + +.row-layout { + display: flex; + justify-content: space-between; + align-items: center; + + &.around { + justify-content: space-around; + } + + &.start { + align-items: flex-start; + } +} + +.checkbox { + width: 2rem; + height: 2rem; + position: relative; + display: inline-block; + vertical-align: middle; + + input[type=checkbox] { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + z-index: 9999; + position: absolute; + top: 0; + left: 0; + cursor: pointer; + + &:hover { + & + label { + &:after { + opacity: .5; + } + } + } + } + + label { + cursor: pointer; + position: absolute; + width: 2rem; + height: 2rem; + top: 0; + left: 0; + background: none; + border: .3rem solid $black; + border-radius: .7rem; + z-index: 0; + + &:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + background: $black; + border-radius: .3rem; + bottom: 0; + content: ""; + height: 1rem; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 0; + width: 1rem; + transition: $transition-2; + } + + } + + input[type=checkbox]:checked + label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; + } + + //sizes + &.med { + width: 1.5rem; + height: 1.5rem; + + label { + width: 1.5rem; + height: 1.5rem; + border-radius: .4rem; + + &:after { + width: .5rem; + height: .5rem; + border-radius: .15rem; + } + } + } + + @include mobile { + width: 1.5rem; + height: 1.5rem; + + label { + width: 1.5rem; + height: 1.5rem; + border-radius: .4rem; + + &:after { + width: .5rem; + height: .5rem; + border-radius: .15rem; + } + } + } +} + +.radioNew { + width: 2rem; + height: 2rem; + position: relative; + display: inline-block; + vertical-align: middle; + + input[type=radio] { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + z-index: 9999; + position: absolute; + top: 0; + left: 0; + cursor: pointer; + + &:hover { + & + label { + &:after { + opacity: .5; + } + } + } + } + + label { + cursor: pointer; + position: absolute; + width: 2rem; + height: 2rem; + top: 0; + left: 0; + background: none; + border: .3rem solid $black; + border-radius: .7rem; + z-index: 0; + + &:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + background: $black; + border-radius: .3rem; + bottom: 0; + content: ""; + height: 1rem; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 0; + width: 1rem; + transition: $transition-2; + } + + } + + input[type=radio]:checked + label:after { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; + } + + + @include mobile { + width: 1.5rem; + height: 1.5rem; + + label { + width: 1.5rem; + height: 1.5rem; + border-radius: .4rem; + + &:after { + width: .5rem; + height: .5rem; + border-radius: .15rem; + } + } + } +} + +.switch { + width: 5rem; + height: 3rem; + position: relative; + display: inline-block; + vertical-align: middle; + + input[type=checkbox] { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + z-index: 9999; + position: absolute; + top: 0; + left: 0; + cursor: pointer; + + &:hover { + & + label { + &:after { + opacity: 1; + } + } + } + } + + label { + display: block; + vertical-align: middle; + background: #cec9bf; + border-radius: 2rem; + overflow: hidden; + transition: $transition-1; + width: 100%; + height: 100%; + + &:after { + transition: $transition-1; + display: block; + cursor: pointer; + position: absolute; + width: 2rem; + height: 2rem; + top: .5rem; + left: .5rem; + content: ''; + background: $white; + border-radius: 50%; + z-index: 0; + opacity: .95; + } + + } + + input[type=checkbox]:checked + label { + background: yellow; + + &:after { + transform: translateX(100%); + } + } + + //sizes + &.med { + width: 1.5rem; + height: 1.5rem; + + label { + width: 1.5rem; + height: 1.5rem; + border-radius: .4rem; + + &:after { + width: .5rem; + height: .5rem; + border-radius: .15rem; + } + } + } + + @include mobile { + width: 3.2rem; + height: 1.8rem; + label { + &:after { + width: 1.4rem; + height: 1.4rem; + top: 0.2rem; + left: 0.2rem; + } + } + } +} + +.crop-radius { + &.bl { + //bottom left + border-radius: 0 0 0 6rem; + @include mobile { + border-radius: 0 0 0 2rem; + } + } + + &.br { + //bottom right + border-radius: 0 0 6rem 0; + @include mobile { + border-radius: 0 0 2rem 0; + } + } + + &.br-tr { + border-radius: 0 6rem 6rem 0; + @include mobile { + border-radius: 0 2rem 2rem 0; + } + } +} + +.green-text { + color: $green; +} + +.checkmarked { + color: $navy; + + &:before { + content: ''; + //background-image: url("../images/check.png"); + background-image: url("../images/v2/check.svg"); + width: 2rem; + height: 2rem; + background-size: 100%; + display: inline-block; + background-repeat: no-repeat; + margin-right: .8rem; + vertical-align: middle; + } + + &.salad { + &:before { + background-image: url("../images/v2/check-salad.svg"); + } + } + + @include mobile { + font-size: 1.3rem; + line-height: 2.3rem; + &:before { + width: 10px; + height: 10px; + margin-right: .4rem; + background-size: 100%; + } + } +} + +.aligned-marks { + .checkmarked { + align-items: baseline; + display: flex; + + &:before { + flex: 0 0 auto; + + } + } +} + +.twin { + display: flex; + justify-content: space-between; + + > .half { + flex: 0 0 auto; + } +} + +.double-image { + position: relative; + display: block; + + > img { + box-shadow: 0 3px 33px rgba(0, 0, 0, .14); + display: inline-block; + position: relative; + border-radius: 3rem; + z-index: 0; + + &:last-of-type { + position: absolute; + z-index: 9; + max-width: 40%; + height: auto; + } + } + + &.pr-6-br { + > img { + &:first-of-type { + width: calc(100% - 12rem); + } + + &:last-of-type { + right: 6rem; + bottom: -6rem; + } + } + } + + &.pl-8-bl { + display: flex; + justify-content: flex-end; + margin-bottom: 8rem; + + > img { + &:first-of-type { + width: calc(100% - 8rem); + } + + &:last-of-type { + left: 0; + bottom: -8rem; + } + } + } +} + +.section-title { + display: block; + position: relative; + z-index: 9; + text-align: center; + font-size: 4.3rem; + font-weight: bold; + color: $navy; + line-height: 5rem; + padding: 10rem 0; + @include mobile { + font-size: 2rem; + line-height: 3.5rem; + padding: 2.5rem 0; + text-align: left; + } +} + +.section-subtitle { + font-weight: bold; + font-size: 3.3rem; + color: $navy; + line-height: 4.5rem; + @include mobile { + font-size: 1.6rem; + line-height: 2.6rem; + } +} + +.shadowed-image { + box-shadow: 0 3px 33px rgba(0, 0, 0, .14); +} + +.review { + color: $black-2; + + span { + display: inline-block; + vertical-align: middle; + } + + .rating { + display: inline-block; + //vertical-align: middle; + margin: 0 1rem; + + img { + display: inline-block; + vertical-align: middle; + } + } +} + +.single-shadowed-image-box { + width: 100%; + padding: 10rem 2rem; + border-radius: 2rem; + box-shadow: 0 3px 33px rgba(0, 0, 0, .14); + display: flex; + justify-content: center; + align-self: center; + + img { + max-width: 100%; + } +} + +.box { + padding: 4.5rem; + + &.rounded { + border-radius: 2rem; + } + + &.gray { + background: $gray; + } +} + +.js__toggling-content { + @include mobile { + .js__toggle__handle { + position: relative; + + &:after { + content: '+'; + transition: $transition-3; + position: absolute; + right: 1rem; + top: 0; + bottom: 0; + margin: auto; + display: table; + font-weight: bold; + } + } + .js__toggling-content__content { + max-height: 0; + overflow: hidden; + transition: max-height ease-in-out .3s; + } + &.opened { + > .js__toggle__handle { + &:after { + content: '-'; + color: $green; + } + } + + > .js__toggling-content__content { + max-height: 300rem; + } + } + } +} + +.js__tgc { + @include mobile { + .js__tg__handle { + position: relative; + + &:after { + content: '+'; + transition: $transition-3; + position: absolute; + right: 1rem; + top: 0; + bottom: 0; + margin: auto; + display: table; + font-weight: bold; + } + } + .js__tgc__content { + max-height: 0; + overflow: hidden; + transition: max-height ease-in-out .3s; + } + &.opened { + > .js__tg__handle { + &:after { + content: '-'; + color: $green; + } + } + + > .js__tgc__content { + max-height: 200rem; + } + } + } +} + +.mobile__only { + display: none !important; + @include mobile { + display: block !important; + } +} + +.form_hiddens { + display: none !important; +} + +.code-num { + width: calc(50% - 1.5rem); + display: inline-flex; + + input { + text-transform: capitalize; + + &:first-of-type { + border-radius: 1rem 0 0 1rem; + border-right: none; + width: 10rem; + } + + &:last-of-type { + width: calc(100% - 10rem); + border-radius: 0 1rem 1rem 0; + } + } +} + +.__mobile_max_60 { + @include mobile { + max-width: 60%; + } +} + +.backgrounded-title { + position: relative; + display: block; + padding: 6rem 0; + + &:before { + content: ''; + background: $navy; + width: 100%; + height: 100%; + z-index: 1; + position: absolute; + left: 0; + top: 0; + opacity: 0.2; + } + + img { + position: absolute; + z-index: 0; + left: 0; + top: 0; + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + filter: brightness(.2); + } + + h1, h2, h3 { + text-transform: capitalize; + color: $white; + position: relative; + font-weight: bold; + z-index: 9; + font-size: 5.5rem; + line-height: 6.6rem; + text-align: center; + } + + @include mobile { + h1, h2, h3 { + font-size: 3rem; + line-height: 4.2rem; + } + } +} + +.bg-gray { + background-color: $gray; +} + +.simple-sect { + padding: 6rem 0; + line-height: 4.5rem; + font-size: 2.3rem; + + .section-title { + padding: 2rem 0; + margin-bottom: 4rem; + } + + .checkmarked { + margin-bottom: 1rem; + + &:last-of-type { + margin-bottom: 0; + } + } +} + +.data-table-standard { + width: 100%; + + .table-cont { + overflow-x: auto; + display: flex; + justify-content: center; + + table { + border: .1rem solid $navy; + background: $white; + font-size: 2rem; + } + + tr { + padding: 1rem 0; + + &:nth-of-type(2n) { + background: $gray; + } + } + + th { + max-width: 30rem; + padding: 1rem; + text-align: center; + color: $navy; + } + + td { + padding: 1rem; + text-align: center; + } + } +} \ No newline at end of file diff --git a/src/styles/utils/_index.scss b/src/styles/utils/_index.scss new file mode 100644 index 00000000..c32258b4 --- /dev/null +++ b/src/styles/utils/_index.scss @@ -0,0 +1,5 @@ +@forward "@/styles/utils/variables"; +@forward "@/styles/utils/mixins"; +@forward "@/styles/utils/settings"; +@forward "@/styles/utils/rules"; +@forward "@/styles/utils/elements"; \ No newline at end of file diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss new file mode 100644 index 00000000..01c14d16 --- /dev/null +++ b/src/styles/utils/_mixins.scss @@ -0,0 +1,26 @@ +@use "@/styles/utils/variables" as *; +/* mixins */ + +@mixin aboveMax { + @media (min-width: #{$max}) { + @content; + } +} + +@mixin desktop-high { + @media (min-width: #{$ld-desktop}) and (max-width: #{$hd-desktop}) { + @content; + } +} + +@mixin mobtop { + @media (min-width: #{$tablet}) and (max-width: $desktop) { + @content; + } +} + +@mixin mobile { + @media (max-width: #{$tablet}) { + @content; + } +} diff --git a/src/styles/utils/_rules.scss b/src/styles/utils/_rules.scss new file mode 100644 index 00000000..8b63584e --- /dev/null +++ b/src/styles/utils/_rules.scss @@ -0,0 +1,79 @@ +@use "@/styles/utils/variables" as *; + +a { + text-decoration: none; + cursor: pointer; + color: $blue; + transition: $transition-1; + + &:hover { + opacity: .9; + } +} + +.margin-0 { + margin: 0 !important; +} + +.full { + width: 100%; +} + +.half { + width: 50%; +} + +.middle { + margin: 0 auto; +} + +.isellipsis { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.standard { + width: $standard; + @media (max-width: 1640px) { + width: 1100px; + } + @media (max-width: 1440px) { + width: 1000px; + } + @media (max-width: 1000px) { + width: 96%; + } +} + +.relative { + position: relative; +} + +.al-right { + text-align: right; +} + +.al-center { + text-align: center; +} + +*:focus { + outline: none; +} + +.clrfx:after { + visibility: hidden; + display: block; + content: ""; + clear: both; + height: 0; +} + +* html .clrfx { + zoom: 1; +} + +*:first-child + html .clrfx { + zoom: 1; +} \ No newline at end of file diff --git a/src/styles/utils/_settings.scss b/src/styles/utils/_settings.scss new file mode 100644 index 00000000..3ba3ae6b --- /dev/null +++ b/src/styles/utils/_settings.scss @@ -0,0 +1,51 @@ +@use "@/styles/utils/variables" as *; +@use "@/styles/utils/mixins" as *; + +html { + width: 100%; + height: 100%; + font-size: 62.5%; + scroll-behavior: smooth; + @media (max-width: 1640px) { + font-size: 56.25%; + } + @media (max-width: 1440px) { + font-size: 50%; + } + @media (max-width: 1200px) { + font-size: 43.75%; + } + @media (max-width: 640px) and (max-width: 960px) { + font-size: 31.25%; + } + @media (max-width: 640px) { + font-size: 62.5%; + } +} + +body { + background: $gray; + color: $black; + direction: ltr; + font-size: 1.7rem; + font-family: $fontset; + text-align: left; + width: 100%; + height: 100%; + + &.register-page { + background: $white; + } + + @include aboveMax { + .app-cont { + max-width: $max; + margin: 0 auto; + } + } +} + +.main { + position: relative; + z-index: 0; +} \ No newline at end of file diff --git a/src/styles/utils/_utils.scss b/src/styles/utils/_utils.scss deleted file mode 100644 index 4f217b23..00000000 --- a/src/styles/utils/_utils.scss +++ /dev/null @@ -1,17 +0,0 @@ -html, body { - @apply scroll-smooth; -} - -#app { - @apply font-quicksand; -} - - -input { - outline: none; - - &:focus { - outline: none; - } -} - diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 00000000..aa07f55e --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1,140 @@ +//fonts +$fontset: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + +//colors +$white: #ffffff; +$black: #000000; +$black-1: #595959; +$black-2: #2f2c2c; +$black-3: #002e5b; +$gray: #f3f7fa; +$gray-2: #F4F7FA; +$navy: #0e68a5; +$sky: #f3f7fa; +$green: #00dbb1; +$grass-green: #def3f2; +$grass-green-2: #63D8B3; +$green-light: #DFEFEF; + +//system colors +$blue: #12A0FF; +$red: #FF3107; +$yellow: #FEDD59; +$navy-2: #3269A2; +$navy-3: #2F66A0; + +//gradients + +//size padding +$padding-1-0: 1rem; +$padding-1-2: 1.2rem; +$padding-1-3: 1.3rem; +$padding-1-5: 1.5rem; +$padding-1-8: 1.8rem; +$padding-2-0: 2rem; +$padding-2-1: 2.1rem; +$padding-2-3: 2.3rem; +$padding-2-5: 2.5rem; +$padding-2-6: 2.6rem; +$padding-2-7: 2.7rem; +$padding-2-8: 2.8rem; +$padding-3-0: 3rem; +$padding-3-2: 3.2rem; +$padding-3-3: 3.3rem; +$padding-3-6: 3.6rem; +$padding-3-7: 3.7rem; +$padding-4-3: 4.3rem; +$padding-4-4: 4.4rem; +$padding-5-0: 5rem; +$padding-5-2: 5.2rem; +$padding-5-3: 5.3rem; +$padding-5-8: 5.8rem; +$padding-6-2: 6.2rem; +$padding-6-3: 6.3rem; +$padding-6-6: 6.6rem; +$padding-6-7: 6.7rem; +$padding-6-9: 6.9rem; +$padding-7-0: 7rem; +$padding-7-2: 7.2rem; +$padding-7-8: 7.8rem; +$padding-8-8: 8.8rem; +$padding-8-4: 8.4rem; +$padding-9-0: 9rem; +$padding-10: 10rem; +$padding-11-0: 11.0rem; +$padding-11-9: 11.9rem; +$padding-13-6: 13.6rem; +$padding-13-0: 13.0rem; +$padding-16-8: 16.8rem; + +//margin +$margin-1-0: 1rem; +$margin-1-1: 1.1rem; +$margin-1-6: 1.6rem; +$margin-1-8: 1.8rem; +$margin-2-0: 2rem; +$margin-2-2: 2.2rem; +$margin-2-5: 2.5rem; +$margin-2-6: 2.6rem; +$margin-3-0: 3rem; +$margin-3-3: 3.3rem; +$margin-3-5: 3.5rem; +$margin-4-0: 4rem; +$margin-5-0: 5rem; +$margin-5-5: 5.5rem; +$margin-5-6: 5.6rem; +$margin-6-2: 6.2rem; +$margin-6-3: 6.3rem; +$margin-6-7: 6.7rem; +$margin-11-9: 11.9rem; +$margin-15-0: 15rem; +$margin-18-0: 18rem; +$margin-55-0: 55rem; + +// radius +$radius: .4rem; + +// Breakpoints +$max: 2000px; +$hd-desktop: 1440px; +$desktop: 1200px; +$ld-desktop: 960px; +$tablet: 640px; +$mobile: 480px; + +//font sizes +$txt-1-0: 1rem; +$txt-1-2: 12px; +$txt-1-3: 13px; +$txt-1-4: 14px; +$txt-1-5: 15px; +$txt-1-6: 16px; +$txt-1-8: 18px; +$txt-1-9: 19px; +$txt-2-0: 20px; +$txt-2-1: 21px; +$txt-2-4: 24px; +$txt-2-6: 26px; +$txt-2-7: 27px; +$txt-3-3: 33px; +$txt-3-7: 37px; +$txt-4-8: 48px; + +//spaces + +//$standard: 144rem; +$standard: calc(100% - 480px); + +//shadows +$nav-shadow: 0 0 5px rgba(0, 0, 0, .1); +$big-shadow: 0 0 50px rgba(0, 0, 0, .05); +$white-bg-shadow: 0 0 5px rgba(0, 0, 0, .10); + +//transition +$transition-1: all ease-in-out .1s; +$transition-2: all ease-in-out .2s; +$transition-3: all ease-in-out .3s; + +//goodies +//background-color: #141E30; +//background: linear-gradient(to right, #24243e, #141E30, #0f0c29); } \ No newline at end of file diff --git a/src/styles/utils/reset/reset.mobile.css b/src/styles/utils/reset/reset.mobile.css new file mode 100644 index 00000000..dca8543b --- /dev/null +++ b/src/styles/utils/reset/reset.mobile.css @@ -0,0 +1,394 @@ +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + -ms-text-size-adjust: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 1 */ + -webkit-tap-highlight-color: transparent; /* 2 */ + height: 100%; +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; /* 1 */ + font-size: 14px; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ + text-decoration: none; +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + text-decoration: underline; /* 1 */ + text-decoration: underline dotted; /* 1 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * 1. Contain overflow in all browsers. + * 2. Improve readability of pre-formatted text in all browsers. + */ +pre { + overflow: auto; /* 1 */ + white-space: pre; /* 2 */ + white-space: pre-wrap; /* 2 */ + word-wrap: break-word; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Correct color not being inherited. + Known issue: affects color of disabled elements. + * 2. Change font properties to `inherit` in all browsers (opinionated). + * 3. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ + vertical-align: middle; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + * 2. Show the overflow in Edge, Firefox, and IE. + */ + +button, +input, /* 1 */ +input { /* 2 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/* Re-set default cursor for disabled elements. */ +[disabled] { + cursor: default; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* 1. Remove default vertical scrollbar in IE 8/9/10/11. */ +textarea { + overflow: auto; /* 1 */ + resize: none; + vertical-align: top; +} + +/* Don't inherit the `font-weight` (applied by a rule above). +NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ + +optgroup { + font-weight: bold; +} + +/* webkit focus outline */ +input, +select, +textarea { + outline: 0; +} + +/* Android 下 input focus 消除高亮外框 */ +textarea, +input { + -webkit-user-modify: read-write-plaintext-only; +} + +input::-ms-clear, +input::-ms-reveal { + display: none; +} + +/** + * placeholder text color + */ +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: inherit; + opacity: 0.54; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/* table + ========================================================================== */ + +/* Remove table cell spacing and padding */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { + margin: 0; +} + +ul, ol, li, dl, dd { + margin: 0; + padding: 0; +} + +ul, ol { + list-style: none outside none; +} +h1, h2, h3, h4, h5, h6 { + font-size: 100%; + font-weight: normal; + line-height: 2; +} + +* { + box-sizing: border-box; +} diff --git a/src/styles/utils/reset/reset.pc.css b/src/styles/utils/reset/reset.pc.css new file mode 100644 index 00000000..b2e92159 --- /dev/null +++ b/src/styles/utils/reset/reset.pc.css @@ -0,0 +1,490 @@ +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, /* 1 */ +figcaption, +figure, +footer, +header, +main, /* 2 */ +menu, +nav, +section, +summary { /* 1 */ + display: block; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Correct color not being inherited. + Known issue: affects color of disabled elements. + * 2. Change font properties to `inherit` in all browsers (opinionated). + * 3. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ + vertical-align: middle; +} + +/** + * Restore the font weight unset by the previous rule. + */ + +optgroup { + font-weight: bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; + resize: none; + vertical-align: top; +} + +/* webkit focus outline */ +input, +select, +textarea { + outline: 0; +} + +/* Re-set default cursor for disabled elements. */ +[disabled] { + cursor: default; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, ff, and Safari. + */ + +input::-moz-placeholder, +textarea::-moz-placeholder { + color: inherit; + opacity: 0.54; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: inherit; + opacity: 0.54; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +input::-ms-clear, +input::-ms-reveal { + display: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* table + ========================================================================== */ + +/* Remove table cell spacing and padding */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { + margin: 0; +} + +ul, ol, li, dl, dd { + margin: 0; + padding: 0; +} + +ul, ol { + list-style: none outside none; +} + +h1, h2, h3, h4, h5, h6 { + font-size: 100%; + font-weight: normal; +} + +i { + font-style: normal; +} \ No newline at end of file diff --git a/src/styles/vendors/_animate.scss b/src/styles/vendors/_animate.scss new file mode 100644 index 00000000..26c7d0b4 --- /dev/null +++ b/src/styles/vendors/_animate.scss @@ -0,0 +1,3045 @@ +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite +} + +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s +} + +.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { + -webkit-animation-duration: .75s; + animation-duration: .75s +} + +@-webkit-keyframes bounce { + 0%, 20%, 53%, 80%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1); + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + 40%, 43% { + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0) + } + 40%, 43%, 70% { + -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); + animation-timing-function: cubic-bezier(.755, .05, .855, .06) + } + 70% { + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0) + } + 90% { + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0) + } +} + +@keyframes bounce { + 0%, 20%, 53%, 80%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1); + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + 40%, 43% { + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0) + } + 40%, 43%, 70% { + -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); + animation-timing-function: cubic-bezier(.755, .05, .855, .06) + } + 70% { + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0) + } + 90% { + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0) + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-transform-origin: center bottom; + transform-origin: center bottom +} + +@-webkit-keyframes flash { + 0%, 50%, to { + opacity: 1 + } + 25%, 75% { + opacity: 0 + } +} + +@keyframes flash { + 0%, 50%, to { + opacity: 1 + } + 25%, 75% { + opacity: 0 + } +} + +.flash { + -webkit-animation-name: flash; + animation-name: flash +} + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05) + } + to { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } +} + +@keyframes pulse { + 0% { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05) + } + to { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } +} + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse +} + +@-webkit-keyframes rubberBand { + 0% { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } + 30% { + -webkit-transform: scale3d(1.25, .75, 1); + transform: scale3d(1.25, .75, 1) + } + 40% { + -webkit-transform: scale3d(.75, 1.25, 1); + transform: scale3d(.75, 1.25, 1) + } + 50% { + -webkit-transform: scale3d(1.15, .85, 1); + transform: scale3d(1.15, .85, 1) + } + 65% { + -webkit-transform: scale3d(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1) + } + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .95, 1) + } + to { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } +} + +@keyframes rubberBand { + 0% { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } + 30% { + -webkit-transform: scale3d(1.25, .75, 1); + transform: scale3d(1.25, .75, 1) + } + 40% { + -webkit-transform: scale3d(.75, 1.25, 1); + transform: scale3d(.75, 1.25, 1) + } + 50% { + -webkit-transform: scale3d(1.15, .85, 1); + transform: scale3d(1.15, .85, 1) + } + 65% { + -webkit-transform: scale3d(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1) + } + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .95, 1) + } + to { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } +} + +.rubberBand { + -webkit-animation-name: rubberBand; + animation-name: rubberBand +} + +@-webkit-keyframes shake { + 0%, to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0) + } + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0) + } +} + +@keyframes shake { + 0%, to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0) + } + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0) + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake +} + +@-webkit-keyframes headShake { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0) + } + 6.5% { + -webkit-transform: translateX(-6px) rotateY(-9deg); + transform: translateX(-6px) rotateY(-9deg) + } + 18.5% { + -webkit-transform: translateX(5px) rotateY(7deg); + transform: translateX(5px) rotateY(7deg) + } + 31.5% { + -webkit-transform: translateX(-3px) rotateY(-5deg); + transform: translateX(-3px) rotateY(-5deg) + } + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg) + } + 50% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes headShake { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0) + } + 6.5% { + -webkit-transform: translateX(-6px) rotateY(-9deg); + transform: translateX(-6px) rotateY(-9deg) + } + 18.5% { + -webkit-transform: translateX(5px) rotateY(7deg); + transform: translateX(5px) rotateY(7deg) + } + 31.5% { + -webkit-transform: translateX(-3px) rotateY(-5deg); + transform: translateX(-3px) rotateY(-5deg) + } + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg) + } + 50% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +.headShake { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-name: headShake; + animation-name: headShake +} + +@-webkit-keyframes swing { + 20% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg) + } + 40% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg) + } + 60% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg) + } + 80% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg) + } + to { + -webkit-transform: rotate(0deg); + transform: rotate(0deg) + } +} + +@keyframes swing { + 20% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg) + } + 40% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg) + } + 60% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg) + } + 80% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg) + } + to { + -webkit-transform: rotate(0deg); + transform: rotate(0deg) + } +} + +.swing { + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing +} + +@-webkit-keyframes tada { + 0% { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } + 10%, 20% { + -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); + transform: scale3d(.9, .9, .9) rotate(-3deg) + } + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) + } + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) + } + to { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } +} + +@keyframes tada { + 0% { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } + 10%, 20% { + -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg); + transform: scale3d(.9, .9, .9) rotate(-3deg) + } + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate(3deg) + } + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg) + } + to { + -webkit-transform: scaleX(1); + transform: scaleX(1) + } +} + +.tada { + -webkit-animation-name: tada; + animation-name: tada +} + +@-webkit-keyframes wobble { + 0% { + -webkit-transform: none; + transform: none + } + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); + transform: translate3d(-25%, 0, 0) rotate(-5deg) + } + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); + transform: translate3d(20%, 0, 0) rotate(3deg) + } + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); + transform: translate3d(-15%, 0, 0) rotate(-3deg) + } + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); + transform: translate3d(10%, 0, 0) rotate(2deg) + } + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); + transform: translate3d(-5%, 0, 0) rotate(-1deg) + } + to { + -webkit-transform: none; + transform: none + } +} + +@keyframes wobble { + 0% { + -webkit-transform: none; + transform: none + } + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); + transform: translate3d(-25%, 0, 0) rotate(-5deg) + } + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); + transform: translate3d(20%, 0, 0) rotate(3deg) + } + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); + transform: translate3d(-15%, 0, 0) rotate(-3deg) + } + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); + transform: translate3d(10%, 0, 0) rotate(2deg) + } + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); + transform: translate3d(-5%, 0, 0) rotate(-1deg) + } + to { + -webkit-transform: none; + transform: none + } +} + +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble +} + +@-webkit-keyframes jello { + 0%, 11.1%, to { + -webkit-transform: none; + transform: none + } + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg) + } + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg) + } + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg) + } + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg) + } + 66.6% { + -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); + transform: skewX(-.78125deg) skewY(-.78125deg) + } + 77.7% { + -webkit-transform: skewX(.390625deg) skewY(.390625deg); + transform: skewX(.390625deg) skewY(.390625deg) + } + 88.8% { + -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); + transform: skewX(-.1953125deg) skewY(-.1953125deg) + } +} + +@keyframes jello { + 0%, 11.1%, to { + -webkit-transform: none; + transform: none + } + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg) + } + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg) + } + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg) + } + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg) + } + 66.6% { + -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); + transform: skewX(-.78125deg) skewY(-.78125deg) + } + 77.7% { + -webkit-transform: skewX(.390625deg) skewY(.390625deg); + transform: skewX(.390625deg) skewY(.390625deg) + } + 88.8% { + -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); + transform: skewX(-.1953125deg) skewY(-.1953125deg) + } +} + +.jello { + -webkit-animation-name: jello; + animation-name: jello; + -webkit-transform-origin: center; + transform-origin: center +} + +@-webkit-keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1) + } + 40% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03) + } + 80% { + -webkit-transform: scale3d(.97, .97, .97); + transform: scale3d(.97, .97, .97) + } + to { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1) + } +} + +@keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1) + } + 40% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03) + } + 80% { + -webkit-transform: scale3d(.97, .97, .97); + transform: scale3d(.97, .97, .97) + } + to { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1) + } +} + +.bounceIn { + -webkit-animation-name: bounceIn; + animation-name: bounceIn +} + +@-webkit-keyframes bounceInDown { + 0%, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0) + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0) + } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0) + } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0) + } + to { + -webkit-transform: none; + transform: none + } +} + +@keyframes bounceInDown { + 0%, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0) + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0) + } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0) + } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0) + } + to { + -webkit-transform: none; + transform: none + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown +} + +@-webkit-keyframes bounceInLeft { + 0%, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0) + } + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0) + } + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0) + } + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0) + } + to { + -webkit-transform: none; + transform: none + } +} + +@keyframes bounceInLeft { + 0%, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0) + } + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0) + } + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0) + } + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0) + } + to { + -webkit-transform: none; + transform: none + } +} + +.bounceInLeft { + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft +} + +@-webkit-keyframes bounceInRight { + 0%, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0) + } + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0) + } + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0) + } + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0) + } + to { + -webkit-transform: none; + transform: none + } +} + +@keyframes bounceInRight { + 0%, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0) + } + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0) + } + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0) + } + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0) + } + to { + -webkit-transform: none; + transform: none + } +} + +.bounceInRight { + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight +} + +@-webkit-keyframes bounceInUp { + 0%, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0) + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0) + } + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0) + } + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0) + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +@keyframes bounceInUp { + 0%, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); + animation-timing-function: cubic-bezier(.215, .61, .355, 1) + } + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0) + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0) + } + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0) + } + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0) + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +.bounceInUp { + -webkit-animation-name: bounceInUp; + animation-name: bounceInUp +} + +@-webkit-keyframes bounceOut { + 20% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9) + } + 50%, 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1) + } + to { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } +} + +@keyframes bounceOut { + 20% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9) + } + 50%, 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1) + } + to { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } +} + +.bounceOut { + -webkit-animation-name: bounceOut; + animation-name: bounceOut +} + +@-webkit-keyframes bounceOutDown { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0) + } + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0) + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0) + } +} + +@keyframes bounceOutDown { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0) + } + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0) + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0) + } +} + +.bounceOutDown { + -webkit-animation-name: bounceOutDown; + animation-name: bounceOutDown +} + +@-webkit-keyframes bounceOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0) + } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0) + } +} + +@keyframes bounceOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0) + } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0) + } +} + +.bounceOutLeft { + -webkit-animation-name: bounceOutLeft; + animation-name: bounceOutLeft +} + +@-webkit-keyframes bounceOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0) + } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0) + } +} + +@keyframes bounceOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0) + } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0) + } +} + +.bounceOutRight { + -webkit-animation-name: bounceOutRight; + animation-name: bounceOutRight +} + +@-webkit-keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0) + } + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0) + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0) + } +} + +@keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0) + } + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0) + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0) + } +} + +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0 + } + to { + opacity: 1 + } +} + +@keyframes fadeIn { + 0% { + opacity: 0 + } + to { + opacity: 1 + } +} + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn +} + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown +} + +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig +} + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft +} + +@-webkit-keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes fadeInLeftBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.fadeInLeftBig { + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig +} + +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight +} + +@-webkit-keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes fadeInRightBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.fadeInRightBig { + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig +} + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp +} + +@-webkit-keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes fadeInUpBig { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.fadeInUpBig { + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig +} + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1 + } + to { + opacity: 0 + } +} + +@keyframes fadeOut { + 0% { + opacity: 1 + } + to { + opacity: 0 + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut +} + +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0) + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0) + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown +} + +@-webkit-keyframes fadeOutDownBig { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0) + } +} + +@keyframes fadeOutDownBig { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0) + } +} + +.fadeOutDownBig { + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig +} + +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) + } +} + +@keyframes fadeOutLeft { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) + } +} + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft +} + +@-webkit-keyframes fadeOutLeftBig { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0) + } +} + +@keyframes fadeOutLeftBig { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0) + } +} + +.fadeOutLeftBig { + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig +} + +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) + } +} + +@keyframes fadeOutRight { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) + } +} + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight +} + +@-webkit-keyframes fadeOutRightBig { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0) + } +} + +@keyframes fadeOutRightBig { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0) + } +} + +.fadeOutRightBig { + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig +} + +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0) + } +} + +@keyframes fadeOutUp { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0) + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp +} + +@-webkit-keyframes fadeOutUpBig { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0) + } +} + +@keyframes fadeOutUpBig { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0) + } +} + +.fadeOutUpBig { + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig +} + +@-webkit-keyframes flip { + 0% { + -webkit-transform: perspective(400px) rotateY(-1turn); + transform: perspective(400px) rotateY(-1turn) + } + 0%, 40% { + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out + } + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); + transform: perspective(400px) translateZ(150px) rotateY(-190deg) + } + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); + transform: perspective(400px) translateZ(150px) rotateY(-170deg) + } + 50%, 80% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 80% { + -webkit-transform: perspective(400px) scale3d(.95, .95, .95); + transform: perspective(400px) scale3d(.95, .95, .95) + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } +} + +@keyframes flip { + 0% { + -webkit-transform: perspective(400px) rotateY(-1turn); + transform: perspective(400px) rotateY(-1turn) + } + 0%, 40% { + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out + } + 40% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); + transform: perspective(400px) translateZ(150px) rotateY(-190deg) + } + 50% { + -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); + transform: perspective(400px) translateZ(150px) rotateY(-170deg) + } + 50%, 80% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 80% { + -webkit-transform: perspective(400px) scale3d(.95, .95, .95); + transform: perspective(400px) scale3d(.95, .95, .95) + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } +} + +.animated.flip { + -webkit-backface-visibility: visible; + backface-visibility: visible; + -webkit-animation-name: flip; + animation-name: flip +} + +@-webkit-keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0 + } + 0%, 40% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 40% { + -webkit-transform: perspective(400px) rotateX(-20deg); + transform: perspective(400px) rotateX(-20deg) + } + 60% { + -webkit-transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotateX(10deg); + opacity: 1 + } + 80% { + -webkit-transform: perspective(400px) rotateX(-5deg); + transform: perspective(400px) rotateX(-5deg) + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px) + } +} + +@keyframes flipInX { + 0% { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0 + } + 0%, 40% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 40% { + -webkit-transform: perspective(400px) rotateX(-20deg); + transform: perspective(400px) rotateX(-20deg) + } + 60% { + -webkit-transform: perspective(400px) rotateX(10deg); + transform: perspective(400px) rotateX(10deg); + opacity: 1 + } + 80% { + -webkit-transform: perspective(400px) rotateX(-5deg); + transform: perspective(400px) rotateX(-5deg) + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px) + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInX; + animation-name: flipInX +} + +@-webkit-keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0 + } + 0%, 40% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 40% { + -webkit-transform: perspective(400px) rotateY(-20deg); + transform: perspective(400px) rotateY(-20deg) + } + 60% { + -webkit-transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotateY(10deg); + opacity: 1 + } + 80% { + -webkit-transform: perspective(400px) rotateY(-5deg); + transform: perspective(400px) rotateY(-5deg) + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px) + } +} + +@keyframes flipInY { + 0% { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0 + } + 0%, 40% { + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in + } + 40% { + -webkit-transform: perspective(400px) rotateY(-20deg); + transform: perspective(400px) rotateY(-20deg) + } + 60% { + -webkit-transform: perspective(400px) rotateY(10deg); + transform: perspective(400px) rotateY(10deg); + opacity: 1 + } + 80% { + -webkit-transform: perspective(400px) rotateY(-5deg); + transform: perspective(400px) rotateY(-5deg) + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px) + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInY; + animation-name: flipInY +} + +@-webkit-keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px); + transform: perspective(400px) + } + 30% { + -webkit-transform: perspective(400px) rotateX(-20deg); + transform: perspective(400px) rotateX(-20deg); + opacity: 1 + } + to { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0 + } +} + +@keyframes flipOutX { + 0% { + -webkit-transform: perspective(400px); + transform: perspective(400px) + } + 30% { + -webkit-transform: perspective(400px) rotateX(-20deg); + transform: perspective(400px) rotateX(-20deg); + opacity: 1 + } + to { + -webkit-transform: perspective(400px) rotateX(90deg); + transform: perspective(400px) rotateX(90deg); + opacity: 0 + } +} + +.flipOutX { + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important +} + +@-webkit-keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px); + transform: perspective(400px) + } + 30% { + -webkit-transform: perspective(400px) rotateY(-15deg); + transform: perspective(400px) rotateY(-15deg); + opacity: 1 + } + to { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0 + } +} + +@keyframes flipOutY { + 0% { + -webkit-transform: perspective(400px); + transform: perspective(400px) + } + 30% { + -webkit-transform: perspective(400px) rotateY(-15deg); + transform: perspective(400px) rotateY(-15deg); + opacity: 1 + } + to { + -webkit-transform: perspective(400px) rotateY(90deg); + transform: perspective(400px) rotateY(90deg); + opacity: 0 + } +} + +.flipOutY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY +} + +@-webkit-keyframes lightSpeedIn { + 0% { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0 + } + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg) + } + 60%, 80% { + opacity: 1 + } + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg) + } + to { + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes lightSpeedIn { + 0% { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0 + } + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg) + } + 60%, 80% { + opacity: 1 + } + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg) + } + to { + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.lightSpeedIn { + -webkit-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out +} + +@-webkit-keyframes lightSpeedOut { + 0% { + opacity: 1 + } + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0 + } +} + +@keyframes lightSpeedOut { + 0% { + opacity: 1 + } + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0 + } +} + +.lightSpeedOut { + -webkit-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in +} + +@-webkit-keyframes rotateIn { + 0% { + transform-origin: center; + -webkit-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: center + } + to { + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateIn { + 0% { + transform-origin: center; + -webkit-transform: rotate(-200deg); + transform: rotate(-200deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: center + } + to { + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn +} + +@-webkit-keyframes rotateInDownLeft { + 0% { + transform-origin: left bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateInDownLeft { + 0% { + transform-origin: left bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft +} + +@-webkit-keyframes rotateInDownRight { + 0% { + transform-origin: right bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateInDownRight { + 0% { + transform-origin: right bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight +} + +@-webkit-keyframes rotateInUpLeft { + 0% { + transform-origin: left bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateInUpLeft { + 0% { + transform-origin: left bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft +} + +@-webkit-keyframes rotateInUpRight { + 0% { + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +@keyframes rotateInUpRight { + 0% { + transform-origin: right bottom; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + opacity: 0 + } + 0%, to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1 + } +} + +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight +} + +@-webkit-keyframes rotateOut { + 0% { + transform-origin: center; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: center + } + to { + transform-origin: center; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0 + } +} + +@keyframes rotateOut { + 0% { + transform-origin: center; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: center + } + to { + transform-origin: center; + -webkit-transform: rotate(200deg); + transform: rotate(200deg); + opacity: 0 + } +} + +.rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut +} + +@-webkit-keyframes rotateOutDownLeft { + 0% { + transform-origin: left bottom; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } +} + +@keyframes rotateOutDownLeft { + 0% { + transform-origin: left bottom; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + opacity: 0 + } +} + +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft +} + +@-webkit-keyframes rotateOutDownRight { + 0% { + transform-origin: right bottom; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } +} + +@keyframes rotateOutDownRight { + 0% { + transform-origin: right bottom; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } +} + +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight +} + +@-webkit-keyframes rotateOutUpLeft { + 0% { + transform-origin: left bottom; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } +} + +@keyframes rotateOutUpLeft { + 0% { + transform-origin: left bottom; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: left bottom + } + to { + transform-origin: left bottom; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + opacity: 0 + } +} + +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft +} + +@-webkit-keyframes rotateOutUpRight { + 0% { + transform-origin: right bottom; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0 + } +} + +@keyframes rotateOutUpRight { + 0% { + transform-origin: right bottom; + opacity: 1 + } + 0%, to { + -webkit-transform-origin: right bottom + } + to { + transform-origin: right bottom; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + opacity: 0 + } +} + +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight +} + +@-webkit-keyframes hinge { + 0% { + transform-origin: top left + } + 0%, 20%, 60% { + -webkit-transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out + } + 20%, 60% { + -webkit-transform: rotate(80deg); + transform: rotate(80deg); + transform-origin: top left + } + 40%, 80% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1 + } + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0 + } +} + +@keyframes hinge { + 0% { + transform-origin: top left + } + 0%, 20%, 60% { + -webkit-transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out + } + 20%, 60% { + -webkit-transform: rotate(80deg); + transform: rotate(80deg); + transform-origin: top left + } + 40%, 80% { + -webkit-transform: rotate(60deg); + transform: rotate(60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1 + } + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0 + } +} + +.hinge { + -webkit-animation-name: hinge; + animation-name: hinge +} + +@-webkit-keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); + transform: translate3d(-100%, 0, 0) rotate(-120deg) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +@keyframes rollIn { + 0% { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); + transform: translate3d(-100%, 0, 0) rotate(-120deg) + } + to { + opacity: 1; + -webkit-transform: none; + transform: none + } +} + +.rollIn { + -webkit-animation-name: rollIn; + animation-name: rollIn +} + +@-webkit-keyframes rollOut { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); + transform: translate3d(100%, 0, 0) rotate(120deg) + } +} + +@keyframes rollOut { + 0% { + opacity: 1 + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); + transform: translate3d(100%, 0, 0) rotate(120deg) + } +} + +.rollOut { + -webkit-animation-name: rollOut; + animation-name: rollOut +} + +@-webkit-keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 50% { + opacity: 1 + } +} + +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 50% { + opacity: 1 + } +} + +.zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn +} + +@-webkit-keyframes zoomInDown { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +@keyframes zoomInDown { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +.zoomInDown { + -webkit-animation-name: zoomInDown; + animation-name: zoomInDown +} + +@-webkit-keyframes zoomInLeft { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +@keyframes zoomInLeft { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +.zoomInLeft { + -webkit-animation-name: zoomInLeft; + animation-name: zoomInLeft +} + +@-webkit-keyframes zoomInRight { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +@keyframes zoomInRight { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +.zoomInRight { + -webkit-animation-name: zoomInRight; + animation-name: zoomInRight +} + +@-webkit-keyframes zoomInUp { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +@keyframes zoomInUp { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +.zoomInUp { + -webkit-animation-name: zoomInUp; + animation-name: zoomInUp +} + +@-webkit-keyframes zoomOut { + 0% { + opacity: 1 + } + 50% { + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 50%, to { + opacity: 0 + } +} + +@keyframes zoomOut { + 0% { + opacity: 1 + } + 50% { + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3) + } + 50%, to { + opacity: 0 + } +} + +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut +} + +@-webkit-keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + to { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + to { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +.zoomOutDown { + -webkit-animation-name: zoomOutDown; + animation-name: zoomOutDown +} + +@-webkit-keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0) + } + to { + opacity: 0; + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(.1) translate3d(-2000px, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center + } +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0) + } + to { + opacity: 0; + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(.1) translate3d(-2000px, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center + } +} + +.zoomOutLeft { + -webkit-animation-name: zoomOutLeft; + animation-name: zoomOutLeft +} + +@-webkit-keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0) + } + to { + opacity: 0; + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(.1) translate3d(2000px, 0, 0); + -webkit-transform-origin: right center; + transform-origin: right center + } +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0) + } + to { + opacity: 0; + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(.1) translate3d(2000px, 0, 0); + -webkit-transform-origin: right center; + transform-origin: right center + } +} + +.zoomOutRight { + -webkit-animation-name: zoomOutRight; + animation-name: zoomOutRight +} + +@-webkit-keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + to { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19); + animation-timing-function: cubic-bezier(.55, .055, .675, .19) + } + to { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1); + animation-timing-function: cubic-bezier(.175, .885, .32, 1) + } +} + +.zoomOutUp { + -webkit-animation-name: zoomOutUp; + animation-name: zoomOutUp +} + +@-webkit-keyframes slideInDown { + 0% { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +@keyframes slideInDown { + 0% { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown +} + +@-webkit-keyframes slideInLeft { + 0% { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +@keyframes slideInLeft { + 0% { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft +} + +@-webkit-keyframes slideInRight { + 0% { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +@keyframes slideInRight { + 0% { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight +} + +@-webkit-keyframes slideInUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +@keyframes slideInUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible + } + to { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } +} + +.slideInUp { + -webkit-animation-name: slideInUp; + animation-name: slideInUp +} + +@-webkit-keyframes slideOutDown { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0) + } +} + +@keyframes slideOutDown { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0) + } +} + +.slideOutDown { + -webkit-animation-name: slideOutDown; + animation-name: slideOutDown +} + +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) + } +} + +@keyframes slideOutLeft { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) + } +} + +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft +} + +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) + } +} + +@keyframes slideOutRight { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) + } +} + +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight +} + +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0) + } +} + +@keyframes slideOutUp { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0) + } + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0) + } +} + +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp +} \ No newline at end of file diff --git a/src/styles/vendors/animate.min.css b/src/styles/vendors/animate.min.css new file mode 100644 index 00000000..76d2fe1a --- /dev/null +++ b/src/styles/vendors/animate.min.css @@ -0,0 +1,7 @@ +@charset "UTF-8";/*! + * animate.css - https://animate.style/ + * Version - 4.1.1 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2020 Animate.css + */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animate__animated.animate__infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animate__animated.animate__repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animate__animated.animate__repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animate__animated.animate__faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animate__animated.animate__fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animate__animated.animate__slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animate__animated.animate__slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animate__animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animate__animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.animate__bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.animate__shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.animate__shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.animate__headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.animate__swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.animate__jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.animate__heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.animate__backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.animate__backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.animate__backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.animate__backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.animate__backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.animate__bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.animate__bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.animate__bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.animate__bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.animate__bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.animate__bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.animate__fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.animate__fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.animate__fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.animate__fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.animate__fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.animate__fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.animate__fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.animate__fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.animate__rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.animate__hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.animate__jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.animate__rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.animate__zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.animate__zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.animate__zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.animate__zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.animate__zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.animate__slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} \ No newline at end of file