/*!
  Theme Name: Hellodialog Theme
  Theme URI: https://www.hellodialog.com
  Description: Theme for the Hellodialog website
  Author: Dave Hoeks
  Author URI: https://github.com/h00x
  Template: elementor-hello-theme-master
  Version: 1.0.0
  Requires at least: 4.7
  Tested up to: 5.0
  Text Domain: hello-elementor
*/
/*
  ===============================
    Variables
  ===============================
*/
/*
  ===============================
    Mixins
  ===============================
*/
/*
  ===============================
    Typography
  ===============================
*/
#main h1 {
  font-size: 3.75rem;
  line-height: 5rem;
  font-weight: 800;
}
@media screen and (max-width: 479px) {
  #main h1 {
    font-size: 2rem;
    line-height: 3rem;
  }
}
#main h2 {
  font-size: 2.5rem;
  line-height: 3.5rem;
  font-weight: 800;
}
@media screen and (max-width: 479px) {
  #main h2 {
    font-size: 1.75rem;
    line-height: 2.375rem;
  }
}
#main h3 {
  font-size: 1.75rem;
  line-height: 2.375rem;
  font-weight: 700;
}
@media screen and (max-width: 479px) {
  #main h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
#main h4 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
@media screen and (max-width: 479px) {
  #main h4 {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
}
#main h5 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
}
@media screen and (max-width: 479px) {
  #main h5 {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
#main h6 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
#main p {
  font-family: "Roboto", Sans-serif;
}
#main .short-margin {
  margin-bottom: 8px;
}
#main .no-margin-text p, #main .no-margin-text h1, #main .no-margin-text h2, #main .no-margin-text h3, #main .no-margin-text h4, #main .no-margin-text h5, #main .no-margin-text h6 {
  margin-bottom: 0;
}
#main a {
  color: #EA0A8D;
}
#main a:hover {
  color: #b7066e;
}
#main .small-text-ps {
  font-size: 0.75rem;
}
#main .contact-header h4.elementor-heading-title {
  color: #313233;
}
#main .aqua-rounded {
  color: #ffffff;
}

/*
  ===============================
    Elements
  ===============================
*/
#main .pink-btn.full-width-button a {
  padding: 20px 20px;
  width: 100%;
}
#main .pink-btn a {
  background-color: #EA0A8D;
  background-size: 300% 110%;
  background-position: -4px -4px;
  background-image: linear-gradient(135deg, #FF3AB3 15%, #EA0A8D 35%);
  border-radius: 4px;
  border: 0;
  color: #ffffff;
  padding: 20px 48px;
  transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor: pointer;
}
#main .pink-btn a:hover {
  background-position: 20% -4px;
  box-shadow: 0 12px 20px -8px rgba(134, 6, 81, 0.5);
  transform: scale(1.03);
  color: #ffffff;
}
#main .aqua-btn.full-width-button a {
  padding: 20px 20px;
  width: 100%;
}
#main .aqua-btn a {
  background-color: #3ACDD7;
  background-size: 300% 110%;
  background-position: -4px -4px;
  background-image: linear-gradient(135deg, #7BD7DF 15%, #3ACDD7 35%);
  border-radius: 4px;
  border: 0;
  color: #ffffff;
  padding: 20px 48px;
  transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor: pointer;
}
#main .aqua-btn a:hover {
  background-position: 20% -4px;
  box-shadow: 0 12px 20px -8px rgba(22, 100, 106, 0.5);
  transform: scale(1.03);
  color: #ffffff;
}
#main .elementor-location-footer a {
  color: #7C7E80;
}
#main .elementor-location-footer a:hover {
  color: #DCDEDF;
}
#main .centered-vertical-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 4px solid #EBEBEB;
  background: #EBEBEB;
  height: 100%;
  width: 4px;
  transform: translateX(-50%);
}
#main .centered-vertical-line.half-line-bottom::before {
  top: unset;
  bottom: 0;
  height: 50%;
}
#main .centered-vertical-line.half-line-top::before {
  height: 50%;
}
#main .centered-horizontal-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 4px solid #EBEBEB;
  background: #EBEBEB;
  height: 4px;
  width: 100%;
  transform: translateY(-50%);
}
#main .centered-horizontal-line.line-align-right::before {
  right: 0;
  left: unset;
  width: 50%;
}
#main .centered-horizontal-line.line-align-left::before {
  width: 50%;
}
#main .line-below .elementor-widget-wrap {
  border-bottom: 2px solid #EBEBEB;
  padding-bottom: 2rem;
  transition: border-color 0.3s ease-in-out;
}
#main .line-below .elementor-widget-wrap:hover {
  border-color: #EA0A8D;
}
#main .white-gradient-overlay::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 50;
  background-image: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 50%);
}
#main .klanten-testimonial .elementor-testimonial__content {
  border-radius: 4px;
  transition: box-shadow 0.3s ease-in-out;
}
#main .klanten-testimonial .elementor-testimonial__content:hover {
  box-shadow: 0 2px 16px -8px rgba(0, 0, 0, 0.2);
}
#main a.arrow-link .animate-arrow {
  animation-duration: 3s;
  animation-name: arrowanimation;
  animation-iteration-count: infinite;
}
#main #price-switcher {
  text-align: center;
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */
}
#main #price-switcher .switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  margin: 0 8px;
}
#main #price-switcher .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
#main #price-switcher .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3ACDD7;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#main #price-switcher .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#main #price-switcher input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}
#main #price-switcher .slider.round {
  border-radius: 16px;
}
#main #price-switcher .slider.round:before {
  border-radius: 50%;
}
#main #price-switcher .light-text {
  color: #DCDEDF;
}
#main #price-switcher span {
  color: #7C7E80;
  transition: color 0.3s ease-in-out;
}
#main .hide {
  display: none;
}
#main.elementor-editor-active .hide {
  display: block;
}

.list-item-wrapper {
  display: flex;
  justify-content: center;
}
.list-item-wrapper .styled-list {
  display: inline-block;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  color: #ffffff;
}
.list-item-wrapper .styled-list p {
  line-height: 2.5rem;
}
.list-item-wrapper .styled-list-aqua {
  background-image: linear-gradient(135deg, #7BD7DF 2%, #2EBAC5 96%);
  box-shadow: 0 2px 8px -2px rgba(22, 100, 106, 0.5);
}
.list-item-wrapper .styled-list-magenta {
  background-image: linear-gradient(135deg, #FF3AB3 2%, #EA0A8D 96%);
  box-shadow: 0 2px 8px -2px rgba(134, 6, 81, 0.5);
}

@keyframes arrowanimation {
  40% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.2em);
  }
  60% {
    transform: translateX(0);
  }
}
/*
  ===============================
    Blocks
  ===============================
*/
#main .call-to-action-block {
  transform: skewY(-2deg);
  z-index: 100;
  margin-bottom: -2rem;
  background-image: linear-gradient(120deg, #EA0A8D 6%, #A155FF 55%, #3ACDD7 100%);
}
#main .call-to-action-block h1, #main .call-to-action-block h2, #main .call-to-action-block h3, #main .call-to-action-block h4, #main .call-to-action-block h5, #main .call-to-action-block h6 {
  color: #ffffff;
}
#main .call-to-action-block .call-to-action-block-content {
  transform: skewY(2deg);
}
#main .header-homepage {
  background-image: linear-gradient(120deg, #EA0A8D 6%, #A155FF 55%, #3ACDD7 100%);
  background-position: center;
  background-size: auto;
  background-color: #EA0A8D;
}
#main .header-homepage::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center bottom -4px;
  background-size: 102% auto;
  transition: none;
}
@media screen and (min-width: 1439px) {
  #main .header-homepage::after {
    background-image: url(./images/hellodialog-shape.svg);
  }
}
@media screen and (max-width: 1439px) {
  #main .header-homepage::after {
    background-image: url(./images/hellodialog-shape-sml.svg);
  }
}
#main .header-homepage h1, #main .header-homepage h2, #main .header-homepage h3, #main .header-homepage h4, #main .header-homepage h5, #main .header-homepage h6 {
  color: #ffffff;
}
#main .header-homepage .header-link a {
  color: #ffffff;
  transition: opacity 0.3s ease-in-out;
}
#main .header-homepage .header-link a:hover {
  opacity: 0.6;
}
#main .header-homepage .header-link p {
  margin: 0;
}
#main .gradient-page-header {
  background-color: #EA0A8D;
  background-image: url(./images/vervolg-pages-header-overlay.svg), linear-gradient(120deg, #EA0A8D 6%, #A155FF 55%, #3ACDD7 100%);
  background-repeat: no-repeat;
  background-position: center bottom -1px, center;
  background-size: 102% auto, auto;
}
#main .gradient-page-header h1, #main .gradient-page-header h2, #main .gradient-page-header h3, #main .gradient-page-header h4, #main .gradient-page-header h5, #main .gradient-page-header h6 {
  color: #ffffff;
}
#main .gradient-page-header-no-overlay {
  background-color: #EA0A8D;
  background-image: linear-gradient(120deg, #EA0A8D 6%, #A155FF 55%, #3ACDD7 100%);
}
#main .gradient-page-header-no-overlay h1, #main .gradient-page-header-no-overlay h2, #main .gradient-page-header-no-overlay h3, #main .gradient-page-header-no-overlay h4, #main .gradient-page-header-no-overlay h5, #main .gradient-page-header-no-overlay h6 {
  color: #ffffff;
}
#main .app-video {
  width: 1004px;
  margin: 0 auto;
  box-shadow: 0 20px 36px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
#main .app-video .elementor-fit-aspect-ratio {
  padding-bottom: 497px;
  margin-top: 60px;
}
#main .app-video .elementor-fit-aspect-ratio video {
  border-radius: 0 0 4px 4px;
}
#main .dialog-message {
  font-size: 1rem;
}
#main .hd-team-carousel h1, #main .hd-team-carousel h2, #main .hd-team-carousel h3, #main .hd-team-carousel h4, #main .hd-team-carousel h5, #main .hd-team-carousel h6 {
  color: #ffffff;
  margin-bottom: 0;
}
#main .hd-team-carousel i {
  font-size: 1rem;
}
#main .card-style h3 a {
  color: #313233;
}

/*
  ===============================
    Forms
  ===============================
*/
#main .form-hd .validation_error {
  background-color: #ffffff;
  border: 2px solid #EA0A8D;
  color: #EA0A8D;
  border-radius: 4px;
  text-align: left;
  padding: 1rem;
  font-size: 1rem;
}
#main .form-hd .gform_body li {
  padding-right: 0;
}
#main .form-hd .gform_body li .gfield_checkbox input {
  margin: 4px 4px 4px 0;
}
#main .form-hd .gform_body .gfield_error {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}
#main .form-hd .gform_body .gfield_error input, #main .form-hd .gform_body .gfield_error textarea {
  border: 2px solid #EA0A8D;
}
#main .form-hd .gform_body .gfield_error .gfield_label {
  color: #EA0A8D;
}
#main .form-hd .gform_body .gfield_error .ginput_container {
  line-height: 1;
}
#main .form-hd .gform_body .gfield_error .ginput_container textarea {
  margin-bottom: 0;
}
#main .form-hd .gform_body .gfield_error .gfield_description {
  padding: 0.5rem;
  color: #ffffff;
  background-color: #EA0A8D;
  display: inline;
  border-radius: 0 0 4px 4px;
}
#main .form-hd .gfield {
  margin-top: 1.5rem;
}
#main .form-hd .gform_wrapper {
  margin-bottom: 0;
}
#main .form-hd .gform_wrapper .gform_footer {
  padding-bottom: 0;
}
#main .form-hd label {
  margin-bottom: 0;
}
#main .form-hd .ginput_complex label {
  margin-bottom: 8px;
}
#main .form-hd input, #main .form-hd textarea {
  border: 1px solid #EBEBEB;
  padding: 1rem;
}
#main .form-hd input:focus, #main .form-hd textarea:focus {
  border-bottom: 1px solid #3ACDD7 !important;
}
#main .form-hd input[type=submit] {
  background-color: #3ACDD7;
  background-size: 300% 110%;
  background-position: -4px -4px;
  background-image: linear-gradient(135deg, #7BD7DF 15%, #3ACDD7 35%);
  border-radius: 4px;
  border: 0;
  color: #ffffff;
  padding: 20px 48px;
  transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor: pointer;
}
#main .form-hd input[type=submit]:hover {
  background-position: 20% -4px;
  box-shadow: 0 12px 20px -8px rgba(22, 100, 106, 0.5);
  transform: scale(1.03);
  color: #ffffff;
}
#main .form-hd.form-fullwidth-btn input[type=submit] {
  width: 100%;
}
#main .form-hd.footer-button input[type=submit] {
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1);
}
#main .form-hd.footer-button .gform_footer {
  margin: 0;
}
#main .form-hd.form-remove-required label .gfield_required {
  display: none;
}
#main .form-hd.form-colored-bg label {
  color: #ffffff;
}
#main .form-hd.form-colored-bg input, #main .form-hd.form-colored-bg textarea {
  border: 1px solid transparant;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.2);
}
#main .form-hd.form-colored-bg .gform_confirmation_message {
  color: #ffffff;
}
#main .form-hd.form-colored-bg .gform_body .gfield_error .gfield_label {
  color: #ffffff;
}
#main .form-hd.form-remove-label label {
  display: none;
}
#main .form-hd ::placeholder {
  color: #DCDEDF;
}
#main .form-aqua-btn .elementor-button {
  background-color: #3ACDD7;
  background-size: 300% 110%;
  background-position: -4px -4px;
  background-image: linear-gradient(135deg, #7BD7DF 15%, #3ACDD7 35%);
  border-radius: 4px;
  border: 0;
  color: #ffffff;
  padding: 20px 48px;
  transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor: pointer;
}
#main .form-aqua-btn .elementor-button:hover {
  background-position: 20% -4px;
  box-shadow: 0 12px 20px -8px rgba(22, 100, 106, 0.5);
  transform: scale(1.03);
  color: #ffffff;
}

/*
  ===============================
    Navigation
  ===============================
*/
#main .elementor-location-header nav {
  z-index: 200;
}
#main .elementor-location-header a {
  color: #7C7E80;
}
#main .elementor-location-header a:hover {
  color: #EA0A8D;
  opacity: 1;
}
#main .elementor-location-header a.elementor-item-active {
  color: #EA0A8D;
}
#main .elementor-location-header a.elementor-item-active::after {
  content: "";
  border-bottom: 2px solid #EA0A8D;
  width: 2rem;
  position: absolute;
  bottom: 0;
}
#main .elementor-location-header .elementor-element-8bb888f .elementor-widget-wrap {
  padding: 0;
  height: 0;
}
#main .elementor-location-header .mobile-menu .elementor-menu-toggle {
  position: absolute;
  right: 20px;
  top: -52px;
}
#main .elementor-location-header .mobile-menu .elementor-nav-menu--dropdown {
  margin-top: 32px;
  margin-right: 8px;
  position: absolute;
  right: 0;
}
#main .elementor-location-header .mobile-menu .elementor-nav-menu--dropdown a {
  color: #7C7E80;
}
#main .elementor-location-header .mobile-menu .elementor-nav-menu--dropdown .menu-item a:hover {
  color: #7C7E80;
  background-color: #DCDEDF;
  opacity: 1;
}
#main .elementor-location-header .mobile-menu .elementor-nav-menu--dropdown .current-menu-item a {
  color: #EA0A8D;
  background-color: #ffffff;
}
#main .elementor-location-header .logo-header {
  background: no-repeat url("/wp-content/uploads/2019/04/hd-logo-magenta.png");
  background-size: auto 75%;
  background-position: center;
}
@media screen and (max-width: 1024px) {
  #main .elementor-location-header .logo-header {
    background-size: auto 100%;
  }
}
#main .elementor-location-header .logo-header .elementor-widget-container {
  text-align: center;
}
#main .elementor-location-header .login-link-header p {
  text-align: center;
}
#main .elementor-location-header #telefoonnummer-nav {
  position: absolute;
  top: 3rem;
  right: 1rem;
  padding: 24px 8px 8px 8px;
  text-align: center;
  border-radius: 4px;
  width: 10rem;
  background-color: white;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
}
#main .elementor-location-header .call-to-action-btn {
  z-index: 100;
}
#main .elementor-location-header .call-to-action-btn:after {
  content: "30 dagen gratis";
  font-family: inherit;
  position: absolute;
  color: #7C7E80;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  background-color: #ffffff;
  border-radius: 0.25rem;
  padding: 0.5rem;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  z-index: -10;
}
#main .elementor-location-header .call-to-action-btn:hover:after {
  opacity: 1;
  visibility: visible;
  bottom: -3rem;
}
#main .elementor-location-header .call-to-action-btn .elementor-button {
  background-color: #EA0A8D;
  background-size: 300% 110%;
  background-position: -4px -4px;
  background-image: linear-gradient(135deg, #FF3AB3 15%, #EA0A8D 35%);
  border-radius: 4px;
  border: 0;
  color: #ffffff;
  padding: 20px 48px;
  transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor: pointer;
  width: 100%;
  border: 2px solid rgba(255, 255, 255, 0);
  padding: 20px;
}
#main .elementor-location-header .call-to-action-btn .elementor-button:hover {
  background-position: 20% -4px;
  box-shadow: 0 12px 20px -8px rgba(134, 6, 81, 0.5);
  transform: scale(1.03);
  color: #ffffff;
}
#main .elementor-location-header .elementor-sticky {
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
#main .elementor-location-header .elementor-sticky--effects {
  background-color: #ffffff;
  box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1);
  color: #ffffff;
}
#main .elementor-location-header .elementor-sticky--effects a:hover {
  color: #EA0A8D;
  opacity: 1;
}
#main .elementor-location-header .elementor-sticky--effects .call-to-action-btn .elementor-button {
  background-color: #EA0A8D;
  background-size: 300% 110%;
  background-position: -4px -4px;
  background-image: linear-gradient(135deg, #FF3AB3 15%, #EA0A8D 35%);
  border-radius: 4px;
  border: 0;
  color: #ffffff;
  padding: 20px 48px;
  transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0);
  padding: 20px;
}
#main .elementor-location-header .elementor-sticky--effects .call-to-action-btn .elementor-button:hover {
  background-position: 20% -4px;
  box-shadow: 0 12px 20px -8px rgba(134, 6, 81, 0.5);
  transform: scale(1.03);
  color: #ffffff;
}
#main .elementor-location-header .elementor-sticky--effects .logo-header {
  background: no-repeat url("/wp-content/uploads/2019/04/hd-logo-magenta.png");
  background-size: auto 75%;
  background-position: center;
}
@media screen and (max-width: 1024px) {
  #main .elementor-location-header .elementor-sticky--effects .logo-header {
    background-size: auto 100%;
  }
}

/* Changes the header to not be sticky when editing (doesn't show in the front end) */
body.elementor-editor-active selector {
  margin-bottom: 0px !important;
}

/*
  ===============================
    Single styling (blog posts)
  ===============================
*/
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
  color: #313233;
}
#main .partner-logo-block .elementor-testimonial__image img {
  width: auto;
}

/*
  ===============================
    Footer
  ===============================
*/
#main .elementor-location-footer h1, #main .elementor-location-footer h2, #main .elementor-location-footer h3, #main .elementor-location-footer h4, #main .elementor-location-footer h5, #main .elementor-location-footer h6 {
  color: #DCDEDF;
}

/*
  ===============================
    Accessibility
  ===============================
*/

.post-password-form {
	margin-top: 80px;
}

/*
  ===============================
    Alignments
  ===============================
*/
/*
  ===============================
    Clearings
  ===============================
*/
/*
  ===============================
    Widgets
  ===============================
*/
/*
  ===============================
    Content
  ===============================
*/
/*
  ===============================
    Mdia
  ===============================
*/

/*# sourceMappingURL=style.css.map */

.hs-input{
  border: 1px solid #EBEBEB !important;
  color: #333 !important;
  padding: 1rem !important;
  width: 100% !important;
}
.hs-input:focus{
  border-bottom: 1px solid #3ACDD7 !important;
}
.hs-form span{
  color: #333 !important;
  font-weight: 700;
}
.hs-form-field {
  margin-bottom: 12px;
}
fieldset.form-columns-1, fieldset.form-columns-2{
  max-width: 100% !important;
}
input.hs-button.primary.large{
  background-color: #3ACDD7;
  background-size: 300% 110%;
  background-position: -4px -4px;
  background-image: linear-gradient(135deg, #7BD7DF 15%, #3ACDD7 35%);
  border-radius: 4px;
  border: 0;
  color: #ffffff;
  padding: 20px 48px;
  transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  width: 100%;
}

input.hs-button.primary.large:hover{
  background-position: 20% -4px;
  box-shadow: 0 12px 20px -8px rgba(22, 100, 106, 0.5);
  transform: scale(1.03);
  color: #ffffff;
}

.hs-wit .hs-form span,
.hs-wit label.hs-error-msg.hs-main-font-element{
  color: #fff !important;
}