/*
Theme Name: Happyforms
Author: The Theme Foundry
Author URI: https://wordpress.org/
Description: Happyforms' official site theme.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.1
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: happyforms
*/

/**
 *
 * Reset
 *
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
 *
 * Global
 *
 */
html {
  font-size: 62.5%;
}

body {
  font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
  color: #000;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem 3.5rem 2rem;
  margin: 5rem auto 10rem;
}

section {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

footer {
  padding: 0 2rem;
}

/**
 *
 * Typography
 *
 */
@font-face {
  font-family: 'MikadoBold';
  src: url('assets/fonts/361568_0_0.eot');
  src: url('assets/fonts/361568_0_0.eot?#iefix') format('embedded-opentype'), 
  	   url('assets/fonts/361568_0_0.woff2') format('woff2'), 
  	   url('assets/fonts/361568_0_0.woff') format('woff'), 
  	   url('assets/fonts/361568_0_0.ttf') format('truetype');
}

strong,
b {
  font-weight: bold;
}

em {
  font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'MikadoBold';
  font-weight: normal;
}

h1 {
  font-size: 3.5rem;
  text-align: center;
  line-height: 1.1;
  margin: 0 auto 5rem;
}

h1.smaller {
  font-size: 3.5rem;
}

h1 em {
  content: '';
  display: inline-block;
  padding: 0;
  line-height: .85;
  border-bottom: 5px solid #000;
  font-style: normal;
}

h1 span {
  display: block;
}

h2 {
  margin: 5rem 0;
  font-size: 2.5rem;
  text-align: center;
}

h2.big {
  margin: 4rem 0 5rem;
  font-size: 3.5rem;
}

h3 {
  font-size: 2.5rem;
}

h3.big {
  font-size: 3rem;
}

h4 {
  font-size: 2.5rem;
}

h5 {
  font-size: 2rem;
}

section.home-header h1 {
  margin: 0 auto 1.25rem auto;
}

section.home-header h2 {
  margin: 0 0 5rem 0;
  font-size: 2.2rem;
  font-family: 'sofia-pro-soft';
}

@media (min-width: 800px) {
  h1 {
    font-size: 5rem;
  }

  h2, h3, h4 {
    font-size: 3.8rem;
  }

  h2.big {
    font-size: 5rem;
  }

  h3.big {
    font-size: 4rem;
  }

  section.home-header h2 {
    font-size: 3.2rem;
  }
}

p {
  line-height: 1.3;
  font-size: 2.2rem;
}

a, 
a:hover,
a:visited,
a:active {
  color: #766bff;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/**
 *
 * Buttons
 *
 */
a.button {
  font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
  display: inline-block;
  margin: 0 auto;
  padding: 3rem 4rem;
  line-height: 1.5;
  font-weight: 700;
  font-size: 2.25rem;
  color: #fff;
  text-decoration: none;
  background-color: #776cff;
  border-radius: 10px;
  border: 5px solid #776cff;
}

a.button:hover {
  opacity: .9;
}

a.button--plain {
  font-size: 2.2rem;
  color: #000;
  text-decoration: underline;
}

a.button--plain:after {
  content: ' \02192';
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
  padding-left: .5rem;
}

/**
 *
 * Partial: release highlights
 *
 */
.release-highlights {
  width: 100%;
  margin-bottom: 0 5rem;
  overflow: hidden;
}

.release-highlights__inner {
  padding: 2rem 0;
  font-family: 'MikadoBold';
  text-transform: uppercase;
  background-color: #FF3727;
}

.release-highlights__title {
  margin: 0 auto;
  font-size: 2.4rem;
  text-transform: uppercase;
}

.release-highlights__inner section p {
  color: #fff;
  text-align: center;
  font-size: 2.2rem;
  display: block;
}

.release-highlights__inner a {
  color: #fff;
  text-decoration: none;
}

.release-highlights__inner span.rotated {
  display: inline-block;
  padding: 3px 6px;
  background-color: #fff;
  color: #FF3727;
  text-transform: uppercase;
  font-weight: bold;
  transform: rotate(-5deg) translateZ(0);
  margin-right: 6px;
  will-change: transform;
  -webkit-perspective: 1000;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
}

.release-highlights__title a:hover {
  text-decoration: underline;
}

.release-highlights__wave {
  width: 100%;
  height: 30px;
  background: url(assets/svg/wave.svg) no-repeat;
  background-position: center top;
  background-size: cover;
}

@media screen and (min-width: 800px) {
  .release-highlights {
    margin-bottom: 3rem;
  }

  .release-highlights__inner {
    padding: 2rem 0;
  }

  .release-highlights__line {
    max-width: 100%;
    font-size: 2rem;
  }

  .release-highlights__cta {
    margin: 0 0 0 5px;
  }
}

/**
 *
 * Partial: Navigation
 *
 */
.site-nav ul {
  list-style: none;
}

.primary-menu-container .menu-item {
  display: block;
  padding: 0 12px;
  font-size: 2.2rem;
}

@media (min-width: 800px) {
  .primary-menu-container .menu-item  {
    display: inline;
  }
}

.primary-menu-container .menu-item  a {
  color: #000;
  text-decoration: none;
}

.primary-menu-container .menu-item.current-menu-item a {
  text-decoration: underline;
}

/**
 *
 * Partial: Download
 *
 */
section.download {
  text-align: center;
}

section.download a {
  display: inline-block;
}

section.download a:before {
  content: url(assets/svg/click.svg);
  width: 45px;
  display: inline-block;
  vertical-align: middle;
  padding-right: 1.5rem;
}

@media (min-width: 800px) {
  section.download a {
    padding: 3rem 6rem;
  }

  section.download a:before {
    content: url(assets/svg/click.svg);
    width: 45px;
    display: inline-block;
    vertical-align: middle;
    padding-right: 1.5rem;
  }
}

/**
 *
 * Partial: Spotlights
 *
 */
.hf-spotlight {
  padding-top: 5rem;
  text-align: center;
}

.hf-spotlight__customer {
  max-width: 80%;
}

.hf-spotlight__quote {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.hf-spotlight blockquote p {
  font-size: 3rem;
}

.hf-spotlight blockquote,
.hf-spotlight blockquote * {
  max-width: 100%;
  text-align: left;
}

.hf-spotlight a {
  color: #000;
  text-decoration: underline;
}

.hf-spotlight a:hover {
  text-decoration: none;
}

@media (min-width: 800px) {
  .hf-spotlight + h2 {
    padding: 0 10%;
  }
}

blockquote {
  max-width: 92%;
  margin: 0 auto;
}

p {
  line-height: 1.2;
  font-size: 2.5rem;
}

blockquote p:before {
  content: '\201C';
}

blockquote p:after {
  content: '\201D';
}

blockquote p {
  text-align: center;
}

blockquote footer {
  margin-top: 3.5rem;
  font-size: 2rem;
  text-align: center;
}

@media (min-width: 800px) {
  blockquote p {
    font-size: 3.9rem;
    text-align: center;
  }
}

/**
 *
 * Header
 *
 */
header {
  text-align: center;
}

.header__logo {
  display: block;
  text-indent: -9999px;
  max-width: 100%;
  height: 50px;
  margin: 0 auto 1rem;
  background: url(assets/img/logo.png) no-repeat;
  background-position: center center;
  background-size: contain;
}

@media screen and (min-width: 800px) {
  .header__logo {
    width: 293px;
  }
}

header .user-nav {
  margin: 0.5rem 0 3rem;
}

header .user-nav ul {
  list-style: none;
}

header .user-nav ul li {
  display: inline-block;
  font-size: .9em;
}

header .user-nav ul li:not(:first-child)::before {
  content: "\007C";
  margin: 0 3px;
}

header .user-nav ul li a {
  color: #000;
  text-decoration: none;
}

@media (min-width: 800px) {
  header .user-nav {
    position: absolute;
    top: 140px;
    right: 20px;
    margin: 0;
  }
}

/**
 *
 * Footer
 *
 */
body > footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 3rem;
  text-align: center;
}

body > footer .site-nav {
  margin-bottom: 3rem;
}

body > footer p {
  font-size: 1.5rem;
}

body > footer p a {
  color: #000;
  text-decoration: none;
}

.site-footer__profile {
  margin: 0 1rem 3.5rem;
  padding: 40px 30px;
  box-shadow: 0 3px 6px #ccc;
  transform: rotate(-2deg) translateZ(0);
  will-change: transform;
  -webkit-perspective: 1000;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
}

@media (min-width: 800px) {
  .site-footer__profile {
    margin-left: 110px;
    margin-right: 110px;
  }
}

.site-footer__profile p {
  font-size: 2.2rem;
  line-height: 3rem;
}

.site-footer__profile p:not(:last-child) {
  margin-bottom: 2.2rem;
}

@media (max-width: 800px) {
  .site-footer__byline a:first-of-type:before {
    content: '';
    display: table;
    clear: both;
    margin-top: 0.5rem;
  }
}

.site-footer__copyright {
  margin-top: 1rem;
}

.site-footer__payment_methods {
  margin-top: 2rem;
}

.site-footer__payment_methods p {
  line-height: 25px;
}

.site-footer__payment_methods p img {
  vertical-align: middle;
}

.site-footer__payment_methods ul {
  list-style: none;
  margin-top: 1rem;
}

.site-footer__payment_methods ul li {
  display: inline-block;
}

.site-footer__encryption {
  margin-top: 2rem;
}

.site-footer__encryption img {
  display: block;
  margin: 0 auto;
}

.site-footer__encryption {
  text-align: center;
}

.site-footer__encryption span {
  display: inline-block;
  margin: 0 auto;
  width: 170px;
  background-color: #2c3c69;
  color: #fff;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

/**
 *
 * Page: Home
 *
 */
.home h1 + p {
  margin-bottom: 6rem;
  text-align: center;
}

.plugin-rating,
.plugin-usage {
  display: flex;
  align-items:center;
  justify-content: center;
  margin-top: 1rem;
}

.plugin-rating {
  font-size: 2rem;
}

.plugin-rating:before {
  content: url(assets/svg/rating.svg);
  width: 100px;
  padding-right: 1rem;
}

.plugin-usage {
  font-size: 1.4rem;
  line-height: 1.4rem;
}

.plugin-usage span {
  position: relative;
  display: inline-block;
  padding: 4px 4px 4px 5px;
  background-color: #df5226;
  border-radius: 3px 0 0 3px;
  color: #fff;
}

.plugin-usage span:before,
.plugin-usage span:after {
  content: "";
  position: absolute;
  right: -7px;
  border-left-width: 0;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

.plugin-usage span:before {
  bottom: 0;
  border-style: dashed;
  border-width: 7px;
  border-color: rgba(255,255,255,0);
  border-bottom: 7px solid #3F6998;
  border-top-width: 0;
  border-bottom-width: 18px;
  border-bottom-color: #df5226;
}

.plugin-usage span:after {
  top: 0;
  border-style: dashed;
  border-width: 8px;
  border-color: rgba(255,255,255,0);
  border-top: 8px solid #3F6998;
  border-bottom-width: 0;
  border-top-width: 18px;
  border-top-color: #df5226;
}

.plugin-usage img {
  height: 40px;
  padding-right: 1rem;
}

section.screenshot {
  max-width: 1800px;
  margin: 5rem auto 2.5rem;
  background: url(assets/svg/clouds.svg), url(assets/svg/clouds.svg);
  background-size: 290px 180px, 290px 180px;
  background-repeat: no-repeat;
  background-position: left 65%, 100% 20%;
}

.screenshot__wrapper {
  position: relative;
  max-width: 70%;
  margin: 0 auto;
  box-shadow: 2px 3.464px 12px 0px rgba(0, 0, 0, 0.1);
}

.screenshot__image {
  height: 100%;
  max-height: 680px;
  overflow: hidden;
}

.screenshot__wrapper img {
  width: 100%;
}

ul.benefits {
  list-style: none;
  margin-bottom: 6rem;
}

ul.benefits li {
  margin-bottom: 4rem;
}

ul.benefits li strong {
  font-family: 'MikadoBold';
  font-size: 2.2rem;
  font-weight: normal;
}

ul.benefits li p {
  margin-top: 1rem;
  line-height: 1.3;
  font-size: 2.2rem;
}

@media (min-width: 800px) {
  ul.benefits {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    column-gap: 10%;
  }

  ul.benefits li {
    break-inside: avoid;
  }

  ul.benefits li:nth-child(3n) {
    margin-bottom: 0;
  }
}

/**
 *
 * Page: Contact us
 *
 */
.page-template-contact main p {
  text-align: center;
}

.page-template-contact .happyforms-form {
  margin: 4rem 0 0;
}

@media (min-width: 800px) {
  .page-template-contact .happyforms-form {
    margin: 4rem auto 0;
    max-width: 600px;
  }
}

.happyforms-styles .happyforms-part input[type=text],
.happyforms-styles .happyforms-part input[type=password],
.happyforms-styles .happyforms-part input[type=email],
.happyforms-styles .happyforms-part input[type=tel],
.happyforms-styles .happyforms-part input[type=number],
.happyforms-styles .happyforms-part input[type=range],
.happyforms-styles .happyforms-part textarea,
.happyforms-styles .happyforms-part--signature .happyforms--signature-area--container,
.happyforms-styles .happyforms-part--scrollable_terms .scrollbox,
.happyforms-styles .happyforms-part:not(.happyforms-part--phone) select.happyforms-select,
.happyforms-attachment-box {
  border-width: 2px !important;
}

.happyforms-upload-area {
  height: 52px;
}

.happyforms-styles .happyforms-upload-area button.happyforms-plain-button,
.happyforms-styles .happyforms-upload-area .happyforms-input-group__suffix--button {
  background-color: #000 !important;
  color: #fff !important;
}

.happyforms-part__label {
  font-family: 'MikadoBold';
}

.happyforms-styles .happyforms-plain-button,
.happyforms-styles .happyforms-button--submit,
.happyforms-styles .happyforms-text-button {
  font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
}

/**
 *
 * Page: Help
 *
 */
.help-nav {
  margin: 0 0 7.5rem;
  padding: 5.5rem;
  font-size: 2.2rem;
  background-color: #f1f0ff;
  border-radius: 10px;
}

.help-nav ol {
  counter-reset: guidenav;
  list-style: none;
  margin: 0;
}

@media (min-width: 800px) {
  .help-nav ol {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

.help-nav li {
  line-height: 1.75;
}

.help-nav li:before {
  counter-increment: guidenav;
  content: counter(guidenav) '. ';
}

.help-nav a {
  color: #766bff;
  text-decoration: underline;
}

.help-nav a:hover {
  text-decoration: none;
}

.hf-help__list {
  list-style: none;
  margin: 0 auto;
}

.last-updated p {
  margin: 0 auto;
  margin-bottom: 6rem;
  line-height: 1.3;
  font-size: 2.2rem;
}

@media (min-width: 800px) {
  .hf-help__list,
  .last-updated p  {
    max-width: 73%;
  }
}

.hf-help-list__item {
  margin-bottom: 6rem;
  padding-bottom: 4rem;
}

.hf-help-list__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.hf-help-list__item ol {
  margin: 0 0 4rem 20px;
}

.hf-help-list__item ol:last-child {
  margin-bottom: 0;
}

.hf-help-list__item ol li {
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.hf-help-list__item h5 + ol {
  margin-top: 2rem;
}

.hf-help__list h3 {
  margin-bottom: 3rem;
  font-size: 2.2rem;
}

.hf-help__list h4 {
  margin: 4rem 0 1rem 0;
  font-size: 2.2rem;
}

.hf-help__list h5 + p {
  margin-top: 2rem;
}

.hf-help__list li {
  line-height: 1.3;
  font-size: 2.2rem;
}

.hf-help__list p {
  margin: 4rem 0;
  line-height: 1.3;
  font-size: 2.2rem;
}

.hf-help__list p:first-of-type {
  margin-top: 0;
}

.hf-help__list p:last-child {
  margin-bottom: 0;
}

.hf-help__list a {
  color: #766bff;
  text-decoration: underline;
}

.hf-help__list a:hover {
  color: #766bff;
  text-decoration: none;
}

.hf-help__list em {
  display: inline-block;
  font-weight: bold;
  font-style: normal;
}

.hf-help__list figure {
  max-width: 100%;
  margin: 4rem 0;
}

.hf-help__list figure img {
  width: 100%;
  box-shadow: 2px 3.464px 12px 0px rgba(0, 0, 0, 0.1);
}

a.hf-help__back-to-top {
  position: relative;
  display: block;
  margin: 5rem auto 0;
  font-weight: bold;
  font-size: 1.7rem;
  color: #dedede;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

a.hf-help__back-to-top:hover {
  color: #dedede;
  text-decoration: none;
}

a.hf-help__back-to-top:before,
a.hf-help__back-to-top:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  width: 35%;
  height: 1px;
  background-color: #dedede;
}

@media (min-width: 800px) {

  a.hf-help__back-to-top:before,
  a.hf-help__back-to-top:after {
    width: 42%;
  }
}

a.hf-help__back-to-top:after {
  left: auto;
  right: 0;
}

/**
 *
 * Page: Terms of service
 * Page: Privacy policy
 * Page: Cookie policy
 *
 */
section.narrow {
  list-style: none;
  margin: 0 auto;
}

@media (min-width: 800px) {
  section.narrow {
    max-width: 73%;
  }
}

section.narrow ul {
  margin: 0 0 4rem 20px;
}

section.narrow ul li {
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

section.narrow h3,
section.narrow h4 {
  margin-bottom: 3rem;
  font-size: 2.2rem;
}

section.narrow h5 {
  margin: 0 0 1rem 0;
}

section.narrow li {
  line-height: 1.3;
  font-size: 2.2rem;
}

section.narrow p {
  margin: 4rem 0;
  line-height: 1.3;
  font-size: 2.2rem;
  margin-top: 0;
}

section.narrow p:first-of-type {
  margin-top: 0;
}

section.narrow p:last-child {
  margin-bottom: 0;
}

section.narrow a {
  color: #766bff;
  text-decoration: underline;
}

section.narrow a:hover {
  text-decoration: none;
}

/**
 *
 * Page: Upgrade
 *
 */
.page-template-upgrade section:first-of-type h1 {
  max-width: 85%;
}

.page-template-upgrade h1 {
  margin: 0 auto 5rem;
}

.page-template-upgrade h1 + p {
  margin-bottom: 6rem;
  text-align: center;
}

.plan-selector {
  background-color: #f1f0ff;
  border-radius: 10px;
  z-index: 5;
  padding: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 980px) {
  .plan-selector {
    display: flex;
    justify-content: space-between;
    padding: 5rem;
  }

  .plan-selector__pricing {
    flex: 0 1 60%;
  }
}

.plan-selector__pricing h2 {
  margin: 0;
  text-align: left;
  font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
  line-height: 42px;
  font-weight: bold;
}

.plan-selector__discount {
  display: inline-block;
  position: relative;
  padding: 0 15px;
  text-transform: uppercase;
  font-size: .5em;
  line-height: 42px;
  background-color: #FFDD3E;
  color: #6F3900;
  vertical-align: middle;
  margin-top: -2px;
}

.plan-selector__discount:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  right: -20px;
  border: 21px solid #FFDD3E;
  border-left-width: 21px;
  border-right-color: transparent;
}

.plan-selector__pricing dl {
  margin-bottom: 1.5em;
}

.plan-selector__pricing dt {
  font-size: 40px;
  line-height: 30px;
  font-weight: bold;
  height: 50px;
  margin-bottom: 5px;
}

.plan-selector__pricing dt sup,
.plan-selector__pricing dt sub {
  vertical-align: text-top;
  font-size: .5em;
  line-height: 2.4;
}

.plan-selector__pricing dt sub {
  vertical-align: baseline;
}

.plan-selector__pricing dd {
  font-size: .85em;
}

#plan-selector__pricing__discount {
  position: relative;
  color: #ABABB6;
  margin-right: 5px;
}

#plan-selector__pricing__discount:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #C30000;
  top: 50%;
  transform: rotate(-15deg) translateZ(0);
  will-change: transform;
  -webkit-perspective: 1000;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
}

#plan-selector__pricing__price {
  color: #12B367;
}

.plan-selector__control {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  width: 100%;
  border: 2px solid #000;
  cursor: pointer;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  margin-bottom: 1.5em;
}

.plan-selector__control:focus-within {
  border: 2px solid #000;
}

.plan-selector__control:after {
  content: "";
  width: 20px;
  height: 10px;
  background-color: #000;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
  margin-right: 0.8em;
}

.plan-selector__control select,
.plan-selector__control:after {
  grid-area: select;
}

.plan-selector__control select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0.7em 0.8em 0.9em 0.8em;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: 2.2rem;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}

.plan-selector .button {
  width: 100%;
  font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
  font-size: 2.8rem;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 2rem;
}

@media (min-width: 980px) {
  .plan-selector .button {
    margin-bottom: 0;
  }
}

.plan-selector__features {
  flex: 0 1 35%;
}

.plan-selector__features ul {
  list-style: none;
  padding-left: 20px;
}

.plan-selector__features li {
  font-size: 2.2rem;
  line-height: 2;
}

.plan-selector__features li:before {
  content: url(assets/svg/tick.svg);
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1.5rem;
}

section.over-100-plan {
  padding: 40px;
  border-radius: 10px;
  background-color: #eaf7f0;
  margin-bottom: 6rem;
}

section.over-100-plan p:first-child {
  margin-bottom: 1rem;
}

section.over-100-plan a:hover {
  text-decoration: none;
}

.page-template-upgrade section.spotlight {
  margin-bottom: 2rem;
}

section.features {
  margin-bottom: 5rem;
}

section.features ul {
  list-style: none;
  font-size: 2.2rem;
  line-height: 2;
  text-align: center;
}

@media (min-width: 800px) {
  section.features ul {
    columns: 3;
    text-align: left;
  }
}

section.faqs {
  max-width: 715px;
  margin-top: 2rem;
}

.faqs h2 {
  margin-top: 0;
}

.faqs details:not(:last-of-type) {
  border-bottom: 2px solid #000;
}

.faqs summary {
  font-weight: bold;
  font-size: 2.25rem;
  cursor: pointer;
  padding: 2rem 0;
}

@media (min-width: 800px) {
  .faqs summary {
    font-size: 2.5rem;
  }
}

.faqs p {
  font-size: 2.2rem;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.faqs details:last-of-type p {
  margin-bottom: 0;
}

section.holiday-coupon {
  background-color: #FEF8C3;
  border-radius: 10px;
  text-align: center;
  padding: 2.5rem;
  margin-top: 4rem;
  border: dashed #6F3900 3px;
}

section.holiday-coupon dl {
  line-height: 1.8;
  font-size: 2.2rem;
}

section.holiday-coupon dt {
  color: #6F3900;
}

section.holiday-coupon dd {
  color: #917F56;
  font-size: 0.8em;
}

@media (min-width: 800px) {
  section.holiday-coupon {
    max-width: 900px;
  }
}

section.billing {
  margin-top: 5rem;
}

section.billing p {
  text-align: center;
  line-height: 2.25;
  font-size: 2rem;
}

section.review-and-refund {
  margin-top: 7rem;
  margin-bottom: 2rem;
}

section.review {
  margin-bottom: 5rem;
}

@media (min-width: 1200px) {
  section.review {
    margin-bottom: 0;
    padding: 0 5rem;
  }

  section.review-and-refund {
    display: flex;
    align-items: center;
    max-width: 1200px;
  }
}

section.review img {
  width: 100%;
}

section.refund-guarantee {
  background-color: #DEEFE3;
  border-radius: 10px;
  padding: 5rem;
}

section.refund-guarantee dl {
  line-height: 1.8;
  font-size: 2rem;
  position: relative;
}

@media (min-width: 800px) {
  section.refund-guarantee dl {
    padding-left: 90px;
  }
}

@media (min-width: 800px) {
  section.refund-guarantee dl:before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 6px;
    background-image: url(assets/svg/seal.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
}

section.refund-guarantee dt {
  font-weight: bold;
}

@media (min-width: 800px) {
  section.refund-guarantee {
    max-width: 900px;
  }
}

/**
 *
 * Page: Changelog
 *
 */
.hf-changelog,
.hf-changelog-choose {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  font-size: 2.2rem;
}

.hf-changelog ul:not(:last-child) {
  margin-bottom: 3rem;
}

.hf-changelog h4 {
  text-align: center;
  margin-bottom: 1rem;
}

.hf-changelog p {
  margin-bottom: 4rem;
  line-height: 1.5;
  text-align: center;
}

.hf-changelog-choose ul {
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
  text-align: center;
}

.hf-changelog-choose li {
  font-size: 2.6rem;
  margin-bottom: 2.2rem;
}

.hf-changelog-choose ul a {
  color: #000;
  text-decoration: none;;
}

.page-template-page-whats-new h4 {
  font-size: 2.2rem;
  margin-bottom: 3rem;
}

.page-template-page-whats-new main p {
  font-size: 2.2rem;
  margin-bottom: 2rem;
}

.page-template-page-whats-new main ul,
.page-template-page-whats-new main h4,
.page-template-page-whats-new main p {
  margin-left: auto;
  margin-right: auto;
}

.page-template-page-whats-new main ul {
  margin-bottom: 4rem;
}

@media (min-width: 800px) {
  .page-template-page-whats-new main ul,
  .page-template-page-whats-new main h4,
  .page-template-page-whats-new main p {
    max-width: 73%;
  }
}

.page-template-page-whats-new main ul li {
  font-size: 2.2rem;
  margin-left: 20px;
  margin-bottom: 2rem;
  line-height: 1.3;
}

code {
  font-family: monospace;
  padding: 2px 5px;
  color: #000;
  background-color: #dedede;
}

section.compare-prices {
  max-width: 1200px;
  margin-top: 7rem;
}

section.compare-prices h1 {
  margin-bottom: 0;
}

section.compare-prices .cta--button {
  margin-top: 4rem;
}

.hf-table {
  position: relative;
  display: flex;
  margin-bottom: 7rem;
  flex-flow: row wrap;
  justify-content: space-between;
}

.hf-table__cell {
  flex: 0 1 49.3333%;
  width: 49.3333%;
  position: relative;
}

@media screen and (min-width: 800px) {
  .hf-table__cell.compare-prices {
    flex: 0 1 33.3333%;
    width: 33.3333%;
  }
}

@media screen and (max-width: 800px) {
  .hf-table {
    flex-flow: column wrap;
  }
  .hf-table__cell {
    flex: 0 1 100%;
    width: 100%;
    margin-bottom: 20px;
  }
  .hf-table__cell--happyforms {
    margin-bottom: 40px;
  }
}

.hf-table__cell--semi-purple {
  background-color: #f1f0ff;
  border-radius: 10px;
}

.hf-table__cell--semi-green {
  background-color: #eaf7f0;
  border-radius: 10px;
}

.hf-table-cell__inner {
  padding: 4rem 2rem 6rem;
}

@media screen and (min-width: 800px) {
  .hf-table-cell__inner {
    padding: 6rem 2rem;
  }
}

.hf-table-cell__badge {
  position: absolute;
  top: -15px;
  width: 100%;
  text-align: center;
}

.hf-table-cell__badge span {
  padding: 8px 16px;
  background-color: #FFFCAC;
  color: #E9181D;
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.hf-table__cell--happyforms img {
  display: block;
  max-width: 295px;
  margin: 0 auto;
}

.hf-choose {
  text-align: center;
  margin-bottom: 0;
}

.hf-choose ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hf-choose li {
  line-height: 2.25;
  font-size: 2rem;
}

.hf-choose li:not(.crossed):before {
  content: url(../svg/tick.svg);
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  padding-right: .5rem;
}

.hf-choose li em {
  font-style: normal;
  text-decoration: underline;
}

.hf-choose li.crossed {
  color: #959595;
}

.hf-choose li.starter:after {
  content: "Starter";
  font-size: 1.5rem;
  background-color: rgb(119, 108, 255);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
}

.hf-choose h3 {
  margin-bottom: 2rem;
}

.hf-choose .cta--button {
  padding: 3rem 4rem;
  font-size: 2rem;
}

.hf-choose .disclaimer {
  margin-top: 1.5rem;
  font-size: 1.5rem;
}

.hf-choose__price-block {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.hf-choose__price-block > * {
  flex: 0 1;
  align-self: center;
  padding: 0 10px;
}

.hf-choose__price-block .hf-price {
  text-align: left;
}

.hf-choose__price-block .hf-choose__meta {
    line-height: 1.1;
    font-size: 9rem;
    color: #32b06f;
    text-align: center;
    font-family: 'sofia-pro-soft';
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 2rem;
}

.hf-choose__comparison {
  font-family: 'MikadoBold';
  font-weight: bold;
  font-size: 2.2rem;
  color: #ff3727;
  text-align: left;
}

.hf-choose__comparison span {
  display: block;
  font-size: 3rem;
}

@media screen and (min-width: 800px) {
  .hf-choose__comparison {
    font-size: 2.5rem;
  }
  .hf-choose__comparison span {
    font-size: 4.5rem;
  }
}

.hf-why {
  margin-top: 1.5rem;
  list-style-type: none;
  text-align: center;
}

.hf-why li {
  display: block;
  font-size: 2.2rem;
}

.hf-why--spacious {
  line-height: 2;
}

.hf-why li:before {
  content: url(../svg/tick.svg);
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  padding-right: .75rem;
}

.hf-why li:last-child {
  padding-right: 0;
}

@media (min-width: 800px) {
  .hf-why li {
    display: inline;
    padding-right: 30px;
  }

  .hf-download__badge {
    display: block;
    position: absolute;
    top: -50px;
    right: -15px;
    z-index: -1;
    width: 160px;
    height: 160px;
    font-size: 1.6rem;
    color: #3bb371;
  }

  .hf-download__badge span {
    display: block;
    font-weight: bold;
    font-size: 3.5rem;
  }
}

.hf-why.hf-why--block li {
  display: block;
  margin: 0 0 1rem;
  padding: 0;
}

.hf-why {
  max-width: 900px;
  margin: 0 auto;
}

.hf-why li {
  font-size: 2.4rem;
  padding-right: 20px;
}

.hf-why--spacious li:before {
  content: '';
  position: relative;
  box-sizing: content-box;
  top: -2px;
  width: 30px;
  height: 30px;
  padding-right: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 -1px;
}

.hf-why__refund-guarantee:before {
  background-image: url(assets/img/emoji/moneybag.png);
}

.hf-why__gutenberg-ready:before {
  background-image: url(assets/img/emoji/gear.png);
}

.hf-why__real-time-preview:before {
  background-image: url(assets/img/emoji/rocket.png);
}

.hf-why__reliable-message-delivery:before {
  background-image: url(assets/img/emoji/email.png);
}

.hf-why__spam-protection:before {
  background-image: url(assets/img/emoji/speech-balloon.png);
}

.hf-choose__price-block {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.hf-choose__price-block > * {
  flex: 0 1;
  align-self: center;
  padding: 0 10px;
}

.hf-choose__price-block .hf-price {
  text-align: left;
}

.hf-choose__price-block .hf-choose__meta {
  line-height: 1.1;
  font-size: 9rem;
  color: #32b06f;
  text-align: center;
  font-family: 'sofia-pro-soft';
  font-weight: 700;
  font-size: 2.2rem;
  margin-bottom: 3rem;
}

.hf-price {
  margin: 0 0 4rem;
  line-height: 1;
  font-size: 6.5rem;
  color: #32b06f;
  text-align: center;
}

.hf-price .crossed {
  color: #868686;
  -webkit-text-decoration-line: line-through;
  text-decoration: line-through #868686 6px;
}

.hf-price sup {
  font-size: 3rem;
  vertical-align: text-top;
}

.hf-price sub {
  font-size: 3rem;
  vertical-align: baseline;
}

.hf-choose li:not(.crossed):before {
  content: url(assets/svg/tick.svg);
  box-sizing: content-box;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  padding-right: .5rem;
}

.cta--button {
  display: inline-block;
  line-height: 1.5;
  font-weight: bold;
  font-size: 2.25rem;
  color: rgb(255, 255, 255);
  background-color: rgb(119, 108, 255);
  margin: 0px auto;
  padding: 3rem 4rem;
  text-decoration: none;
  border-radius: 10px;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(119, 108, 255);
  border-image: initial;
}

.cta--black {
  background-color: transparent;
  color: #000;
  border-color: #000;
  box-sizing: border-box;
}

.cta--button:hover {
  opacity: .9;
  color: #fff;
}

.cta--black:hover {
  color: #000;
}

section.hf-features .flex,
section.hf-features-integrations .flex,
section.hf-features-integrations__payments .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

section.hf-features .flex__item p,
section.hf-features-integrations .flex__item p,
section.hf-features-integrations__payments .flex__item p {
  font-size: 2rem;
}

section.hf-features .hf-features-item__image {
  max-width: 100%;
  margin-bottom: 3rem;
  box-shadow: 2px 3.464px 12px 0px rgb(0 0 0 / 10%);
}

section.hf-features-integrations,
section.hf-features-integrations__payments {
  margin-top: 2.5rem;
}

section.hf-features-integrations .hf-features-item {
  margin-bottom: 0px;
}

section.hf-features-integrations .flex__item,
section.hf-features-integrations__payments .flex__item  {
  width: 45%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
  align-content: flex-start;
}

.hf-integrations-item__image {
  display: flex;
  width: 200px;
  height: 60px;
  max-width: 100%;
  margin-bottom: 20px;
}

.hf-integrations-item__image img {
  width: 100%;
  max-height: 60px;
  align-self: center;
}

section.hf-features-integrations h2,
section.hf-features-integrations__payments h2,
section.hf-features-support h2 {
  margin-bottom: 1rem;
}

section.hf-features-support {
  margin-bottom: 5rem;
}

section.hf-features-integrations__payments center,
section.hf-features-integrations center {
  margin-bottom: 3.8rem;
}

.page-template-blog section.happyforms-blog-articles article.happyforms-blog-article {
  margin-bottom: 7rem;
}


.page-template-blog article h2.entry-title {
  text-align: left;
  margin-bottom: 1rem;
}

.page-template-blog article h2.entry-title a {
  color: #000;
  text-decoration: none;
}

.page-template-blog article h2.entry-title a:hover {
  color: #766bff;
}

span.happyforms-read-time {
  font-size: 1.5rem;
  color: #555;
}

span.happyforms-read-time svg {
    font-size: 1.5rem;
    width: 22px;
    display: inline-block;
    vertical-align: middle;
    padding-right: 0.5rem;
    fill: #555;
    margin-top: -3px;
}

.page-template-blog article .entry-content {
  margin-top: 4rem;
}

.page-template-blog article .entry-content *:not(h2):not(h3):not(h4):not(h5):not(h6),
.single article .entry-content *:not(h2):not(h3):not(h4):not(h5):not(h6),
.page article .entry-content *:not(h2):not(h3):not(h4):not(h5):not(h6){
  font-size: 2.2rem;
  line-height: 1.5;
}

.single .happyforms-post-thumbnail img,
.page-template-blog a.post-thumbnail img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  border-radius: 5px;
}

.page-template-blog a.happyforms-read-more {
  display: block;
  margin-top: 2rem;
}

.happyforms-blog-navigation {
  margin-top: 6rem;
  font-size: 2.2rem;
  text-align: center;
}

.single .happyforms-post-thumbnail {
  margin-bottom: 3.5rem;
}

.single h1.entry-title {
  text-align: left;
  margin-bottom: 1rem;
}

.single .entry-content {
  margin-top: 3rem;
}

.single main ul,
.single main ol {
  margin-left: 3rem;
}

.single p {
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.page-template-blog main section,
.single-template section {
  max-width: 700px;
}

.single-template section {
  margin-bottom: 4rem;
}

.single-template section:last-child {
  margin-bottom: 0px;
}

section.happyforms-discover-section {
  margin-top: 5rem;
}

section.happyforms-discover-section div {
  background-color: #776cff;
  padding: 5rem 4rem;
  border-radius: 0.5rem;
}

section.happyforms-discover-section div  {
  color: #fff;
  font-size: 2.2rem;
}

section.happyforms-discover-section a,
section.happyforms-discover-section p {
  font-size: 2.2rem;
  line-height: 1.5;
}

.single figure {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.single figure img {
  width: auto;
  max-width: 700px;
  height: auto;
  display: block;
  margin: auto;
}

.single article h1,
.single article h2,
.single article h3,
.single article h4,
.single article h5,
.single article h6 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

section.happyforms-discover-section .button {
  background: #fff;
  color: #776cff;
  margin: 0px;
  margin-top: 3rem;
}

.comments-area form.comment-form p {
  display: block;
  margin-bottom: 2rem;
  font-size: 2.2rem;
}

.comments-title,
.comment-reply-title {
  margin-bottom: 2rem;
}

.comments-area form.comment-form textarea,
.comments-area form.comment-form input[type="text"] {
  display: block;
  width: 100%;
  padding: 1rem;
  border: 2px solid #dbdbdb;
  border-radius: 5px;
  font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
  font-size: 2.2rem;
}

.comments-area .comment-form-cookies-consent input {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0px;
}

.comments-area .form-submit input {
  font-family: "sofia-pro-soft", Helvetica, Arial, sans-serif;
  font-size: 2.2rem;
  background: #000;
  color: #fff;
  padding: 15px 30px;
  border-radius: 4px!important;
  font-size: 2.2rem;
  border: 0px;
}

.comments-area ol li,
.comment-body {
  margin-bottom: 1rem;
}

.comment-body,
.comment-body p {
  font-size: 1.8rem;
}

.happyforms-table-of-contents {
  border: 0px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.happyforms-table-of-contents .ub_table-of-contents-header-container,
.happyforms-table-of-contents .ub_table-of-contents-extra-container {
  padding-left: 50px;
  padding-right: 50px;
  background-color: #f1f0ff;
}

.happyforms-table-of-contents .ub_table-of-contents-header-container {
  border-radius: 5px 5px 0 0;
  padding-top: 40px;
}

.happyforms-table-of-contents.ub_table-of-contents-collapsed .ub_table-of-contents-header-container {
  padding-bottom: 40px;
}

.happyforms-table-of-contents .ub_table-of-contents-extra-container {
  border-radius: 0 0 5px 5px;
  padding-bottom: 40px;
}

.happyforms-table-of-contents .ub_table-of-contents-title {
  font-weight: 600;
}

.happyforms-table-of-contents .ub_table-of-contents-extra-container {
  padding-top: 5px;
}

.happyforms-table-of-contents .ub_table-of-contents-extra-container ul li,
.happyforms-table-of-contents .ub_table-of-contents-extra-container ol li {
  list-style: none;
  line-height: 1.7;
}

.happyforms-table-of-contents .ub_table-of-contents-container > ul,
.happyforms-table-of-contents .ub_table-of-contents-container > ol {
  margin-left: 0px;
}

.happyforms-table-of-contents .ub_table-of-contents-extra-container ul li::before,
.happyforms-table-of-contents .ub_table-of-contents-extra-container ol li::before {
  content: url(assets/svg/arrow-right.svg);
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  padding-right: 0.5rem;
  color: #000;
  margin-top: -5px;
  margin-right: 6px;
}

.happyforms-content-toggle .wp-block-ub-content-toggle-accordion-content-wrap > ol,
.happyforms-content-toggle .wp-block-ub-content-toggle-accordion-content-wrap > ul {
  margin-left: 4%;
}


@media (min-width: 800px) {
  section.hf-features .flex,
  section.hf-features-integrations .flex {
    gap: 35px;
  }

  section.hf-features .flex .flex__item {
      width: 30%;
  }
  section.hf-features-integrations .flex .flex__item {
      width: 30%;
  }

  section.hf-features-integrations__payments .flex__item .hf-integrations-item__image {
    width: 350px;
    height: 60px;
  }

}

.hf-docs-cat-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.hf-docs-cat-wrapper .hf-cat {
  background: #f1f0ff;
  width: 31%;
  border-radius: 0.5rem;
  box-shadow: 0 10px 9px -10px #5a4f4f;
}

.hf-docs-cat-wrapper .hf-cat a {
  display: block;
  color: #000;
  text-decoration: none;
  padding: 5rem;
  text-align: center;
}

.hf-docs-cat-wrapper .hf-cat a:hover {
  color: #766bff;
}

.hf-docs-cat-wrapper .hf-cat h2 {
  font-size: 2.2rem;
  margin: 0;
}

.hf-docs-cat-wrapper .hf-cat span {
  font-size: 2rem;
  display: block;
}

.hf-page-has-sidebar section.docs-archive {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.hf-page-has-sidebar div.entry-content {
  width: 100%;
  max-width: 690px;
  width: 100%;
  max-width: 690px;
  background: #f1f0ff;
  border-radius: 5px;
  padding: 3rem 2rem
}

ul.hf-docs-archive-list li {
  list-style: none;
  margin-bottom: 2.5rem;
  padding-left: 3.5rem;
  padding-bottom: 2.5rem;
}

ul.hf-docs-archive-list li a {
  font-family: 'MikadoBold';
  font-size: 2.8rem;
  text-decoration: none;
  color: #000;
}

ul.hf-docs-archive-list li a:hover {
  color: #766bff;
}
.hf-docs-archive div.hf-docs-post-title {
  position: relative;
}
.hf-docs-archive div.hf-docs-post-title::before {
  content: "";
  background: url(assets/svg/arrow-right.svg);
  width: 21px;
  height: 20px;
  display: block;
  vertical-align: middle;
  color: #000;
  position: absolute;
  left: -3rem;
  top: 5px;
}

.hf-docs-archive .entry-title {
  margin-bottom: 2rem;
  text-align: left;
  font-size: 3rem;
}

.hf-docs-archive-list span.happyforms-read-time {
  display: block;
  margin-bottom: 1rem;
}

.hf-docs-archive-list li p {
  font-size: 2.2rem;
}

.hf-sidebar {
  width: 100%;
  max-width: 270px;
}

.hf-widget-title {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

ul#hf_doc_cat-categories {
  list-style: none;
}

ul#hf_doc_cat-categories li {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.hf-breadcrumbs-wrap {
  width: 100%;
}

.hf-breadcrumbs {
  font-size: 1.5rem;
}

.hf-breadcrumbs span {
  margin-right: .5rem;
}

.hf-header-block {
  max-width: 100%;
  background: #f1f0ff;
  padding: 5rem;
  margin-top: 3rem;
  text-align: center;
}

.hf-header-block > div {
  width: 100%;
  max-width: 980px;
  margin: auto;
}

.hf-header-block .documentation-title {
  font-size: 5rem;
  font-family: 'MikadoBold';
  margin-bottom: 1rem;
}

.hf-docs-categories-widget {
  padding: 3rem;
  background-color: #f1f0ff;
  border-radius: 5px;
}