/*!
Theme Name: herzatelier
Author: OHO Design
Author URI: https://ohodesign.ch
Description: herzatelier`s eigenes Theme.
Text Domain: herzatelier
*/


/*   ----- BRANDING ------
**   Herzatelier-Coral:        #de7f83
**   Herzatelier-Coral-light:  rgba(222, 126, 130, 0.75)   //   #e69ea1
**   Herzatelier-Bordeaux:     #4f111d
*/

/* -------------- */

@import url('/wp-content/themes/herzatelier/ha-style.css');
/* SETUP ****************************************************************************************/

/* Interactions */

a, button, span, div {
  -webkit-tap-highlight-color: rgba(247, 247, 247, 0);
}

::selection {
  background: #de7f83;
  color: #fff !important;
}

::-moz-selection {
  background: #de7f83;
  color: #fff !important;
}

/* OHO CMS Branding*/

#ub_global_footer_content {
  display: none !important;
}

/* Fonts */

@font-face {
  font-family: 'Poppins Light';
  src: local('Poppins Light'), local('Poppins-Light'),
  url("/wp-content/themes/herzatelier/font/Poppins/Poppins-Light.eot?#iefix") format("embedded-opentype"),
  url("/wp-content/themes/herzatelier/font/Poppins/Poppins-Light.woff2") format("woff2"),
  url("/wp-content/themes/herzatelier/font/Poppins/Poppins-Light.woff") format("woff");
}

@font-face {
  font-family: 'Poppins SemiBold';
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
  url("/wp-content/themes/herzatelier/font/Poppins/Poppins-SemiBold.eot?#iefix") format("embedded-opentype"),
  url("/wp-content/themes/herzatelier/font/Poppins/Poppins-SemiBold.woff2") format("woff2"),
  url("/wp-content/themes/herzatelier/font/Poppins/Poppins-SemiBold.woff") format("woff");
}

@font-face {
  font-family: 'Playfair Display Italic';
  src: local('PlayfairDisplay-Italic'),
  url("/wp-content/themes/herzatelier/font/Playfair/PlayfairDisplay-Italic.eot?#iefix") format("embedded-opentype"),
  url("/wp-content/themes/herzatelier/font/Playfair/PlayfairDisplay-Italic.woff2") format("woff2"),
  url("/wp-content/themes/herzatelier/font/Playfair/PlayfairDisplay-Italic.woff") format("woff");
}

@font-face {
  font-family: 'Playfair Display Bold';
  src: local('PlayfairDisplay-Bold'),
  url("/wp-content/themes/herzatelier/font/Playfair/PlayfairDisplay-Bold.eot?#iefix") format("embedded-opentype"),
  url("/wp-content/themes/herzatelier/font/Playfair/PlayfairDisplay-Bold.woff2") format("woff2"),
  url("/wp-content/themes/herzatelier/font/Playfair/PlayfairDisplay-Bold.woff") format("woff");
}

@font-face {
  font-family: 'Boska Bold';
  src: url('/wp-content/themes/herzatelier/font/Boska_Complete/Boska_Complete/Fonts/WEB/fonts/Boska-Bold.woff2') format('woff2'),
       url('/wp-content/themes/herzatelier/font/Boska_Complete/Boska_Complete/Fonts/WEB/fonts/Boska-Bold.woff') format('woff'),
       url('/wp-content/themes/herzatelier/font/Boska_Complete/Boska_Complete/Fonts/WEB/fonts/Boska-Bold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}



p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

/* *** */

h1 {
  font-family: 'Boska Bold';
  font-size: 42px;
  line-height: 1.4em;
  letter-spacing: 0.02em;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
}

h2 {
  font-family: 'Boska Bold';
  font-size: 42px;
  line-height: 1.4em;
  letter-spacing: 0.02em;
  color: #4f111d;
}

h3 {
  font-family: 'Boska Bold';
  font-size: 23px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: rgba(18, 34, 67, 1);
  text-decoration: none;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
}

p, li {
  font-family: 'Poppins Light', sans-serif;
  color: #000;
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: 0em;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
}

strong, b {
  font-family: 'Poppins SemiBold', sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: 0em;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
}


.soft {
  opacity: 0.3;
}

body {
  font-family: 'Poppins Light', sans-serif;
}

h1, h2, h3, h4, h5, h6, b, strong, b, p, li {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-variant-numeric: lining-nums !important;
  -webkit-font-variant-numeric: lining-nums !important;
  -moz-font-variant-numeric: lining-nums !important;
  -ms-font-variant-numeric: lining-nums !important;
  -o-font-variant-numeric: lining-nums !important;
}

/* Loading FOUT */

.wf-loading p, .wf-loading a, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4 {
  visibility: hidden;
}

.wf-active p, .wf-active a, .wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4 {
  visibility: visible;
}

.wf-inactive p, .wf-inactive a, .wf-inactive h1, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4 {
  visibility: visible;
}

/* Spacing */

html {
  height: 100%;
  box-sizing: border-box;
}

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

body {
  position: relative;
  min-height: 100%;
  background: #fff;
  overflow-x: hidden;
}

.stopscrol {
  overflow: hidden;
}

.HAstatic-header-wrapper {
  margin-top: 50px;
}

#main {
  margin: 118px auto 265px auto;
  padding: 0px 35px 70px 35px;
  max-width: 960px;
}

.HAfullwidth-wrapper-inner {
  margin: 30px auto 100px auto;
  padding: 0px 35px 0px 35px;
  max-width: 960px;
}

.main-content {
  margin: 30px auto 30px auto;
  padding: 0px 35px 0px 35px;
  max-width: 960px;
}

.post-main {
  margin: 30px auto 380px auto !important;
  max-width: 740px !important;
}

#subsite-main-container {
  width: 100%;
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}


#subsite-main {
  margin: 0px auto 350px auto;
  padding: 30px 35px 0px 35px;
  max-width: 995px;
}

.HAmedium-wrapper {
  max-width: 960px;
  margin: 20px auto 50px auto;
  padding: 0 35px 0 35px;
}

.entry-content {
  max-width: 900px;
  margin: 40px auto 40px auto;
}

header {
  z-index: 5;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* Hide Comments */

#comments {
  display: none;
}

.cat-links {
  display: none;
}

/* Entry Date */

.entry-date-wrapper {
  text-align: center;
  margin-bottom: 30px;
}

/* Entry Title */

.entry-header {
  display: none;
}

/* Links */

p a {
  text-decoration: none;
  border-bottom: 1px solid #de7f83;
  padding: 0px 0px 1px 0px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.mlink {
  text-decoration: none;
  border-bottom: 0px solid #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.mlink:hover {
  border-bottom: 2px solid #fff;
}

.error-404 p a {
  border-bottom: 1px solid #fff;
}

.error-404 p a:hover b {
  color: #de7f83;
}

p a:hover {
  cursor: pointer;
  border-bottom: 1px solid #de7f83;
  color: #de7f83;
}

p a strong, p a b {
  padding: 0px 0px 0px 0px !important;
  font-weight: 700 !important;
}

a, a:visited {
  color: #de7f83;
  text-decoration: none;
}

a:hover, a:active {
  color: #de7f83;
  text-decoration: none;
  cursor: pointer;
}

a {
  text-decoration: none;
  cursor: pointer;
}

/**/

.cta-button {
  position: relative;
  display: inline-block;
  padding: 10px 40px;
  background-size: 100%;
  overflow: visible;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/wp-content/themes/herzatelier/media/nav-brush.png");
}
.cta-button p {
  margin-top: 25px;
  color: #fff;
}

/* DESKTOP ****************************************************************************************/

/*
01. Main
02. Navigation
03. Footer
04. Inner Content
05. NoScript
*/

/*
-----------------------------------------------------------------------------

02. Navigation

-----------------------------------------------------------------------------
*/

/* Navi-Wrapper */

#HAhead-banner {
  position: fixed;
  width: 100%;
  padding: 0px 35px 0px 35px;
  top: 0px;
  z-index: 97;
  height: 150px;
  background: #fff;
  border-bottom: 7px solid #de7f83;

  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;

  -webkit-box-shadow: inset 0px 5px 5px -3px rgba(0, 0, 0, 0.10);
  -moz-box-shadow: inset 0px 5px 5px -3px rgba(0, 0, 0, 0.10);
  box-shadow: inset 0px 5px 5px -3px rgba(0, 0, 0, 0.10);
}

#site-navigation-wrapper {
  margin: 0px auto;
  max-width: 1200px;
  height: 150px;
}

/* Branding */
#HAlogo {
  position: absolute;
  display: inline-block;
  width: 115px;
  height: auto;
  margin-top: 15px;
  opacity: 1;
  z-index: 55;
  overflow: visible;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}


/* Navi styling */
#site-navigation {
  display: inline;
  float: right;
  width: 85%;
}

#HAnavi-desktop {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  float: right;
}

#HAnavi-desktop li a {
  font-family: 'Poppins SemiBold', sans-serif;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: inherit;
  padding: 7px;
}

#HAnavi-desktop li > a {
  position: relative;
}

#HAnavi-desktop li > a:before {
  content: "";
  position: absolute;
  z-index: -55;
  height: 60px;
  width: 0px;
  box-shadow: inset 0px 0px 4px 7px #fff;
  opacity: 0;
  visibility: hidden;

  background-position: 7px;
  background-repeat: no-repeat;
  background-image: url("/wp-content/themes/herzatelier/media/nav-brush.png");

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}


#HAnavi-desktop li > a.HAnavi-jump-and-joy:before {
  top: -9px; left: -15px;
  background-size: 210px 35px;
  /*  transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -webkit-transform: rotate(2deg); */
}
#HAnavi-desktop li > a.HAnavi-noete:before {
  top: -11px; left: -24px;
  background-size: 165px 30px;

}
#HAnavi-desktop li > a.HAnavi-veraenderung:before {
  top: -9px; left: -12px;
  background-size: 175px 35px;
}
#HAnavi-desktop li > a.HAnavi-person:before {
  top: -10px; left: -12px;
  background-size: 120px;
  /*  transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -webkit-transform: rotate(4deg); */

}
#HAnavi-desktop li > a.HAnavi-kontakt:before {
  top: -9px; left: -8px;
  background-size: 100px;

  /* transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg); */
}

#HAnavi-desktop li>a:hover:before {
  visibility: visible;
  opacity: 1;
}

#HAnavi-desktop li > a.HAnavi-jump-and-joy:hover:before {
  width: 125%;
}
#HAnavi-desktop li > a.HAnavi-noete:hover:before {
  width: 170%;
}
#HAnavi-desktop li > a.HAnavi-veraenderung:hover:before {
  width: 122%;
}
#HAnavi-desktop li > a.HAnavi-person:hover:before {
  width: 135%;
}
#HAnavi-desktop li > a.HAnavi-kontakt:hover:before {
  width: 130%;
}



#HAnavi-desktop li {
  float: left;
  padding: 50px 20px 20px 20px;
}

#HAnavi-desktop li, #HAnavi-desktop a {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

/* Highlight the actual site */
#HAnavi-desktop li.actual-site > a:before {
  opacity: 1;
  visibility: visible;
}

#HAnavi-desktop li.actual-site > a.HAnavi-jump-and-joy:before {
  width: 125%;
}
#HAnavi-desktop li.actual-site > a.HAnavi-noete:before {
  width: 170%;
}
#HAnavi-desktop li.actual-site > a.HAnavi-veraenderung:before {
  width: 122%;
}
#HAnavi-desktop li.actual-site > a.HAnavi-person:before {
  width: 135%;
}
#HAnavi-desktop li.actual-site > a.HAnavi-kontakt:before {
  width: 130%;
}


/* Change navigation when scrolled */
.scrolled-nav #HAhead-banner {
  background: white;
}

/*
-----------------------------------------------------------------------------

03. Footer

-----------------------------------------------------------------------------
*/

.HAfooter p, .HAfooter a, .HAfooter b, .HAfooter-mobile p, .HAfooter-mobile a, .HAfooter-mobile b {
  font-size: 15px;
  line-height: 1.6em;
  color: #fff;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
}

footer p a:hover {
  color: #fff;
}

/*** */

footer {
  position: absolute;
  margin: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 140px;
  overflow: hidden;
  background: #de7f83;
  padding: 10px 35px 0px 35px;
}


.onlymobile {
  display: none;
}

#HAfooter-banner1 {
  background: #de7f83;
  height: 90px;
  padding: 10px 35px 0px 35px;
}



#HAfooter-banner2 {
  width: 100%;
  bottom: 0px;
  padding: 0;
}


.HAfooter {
  max-width: 700px;
  float: none;
  margin: 0 auto;
}

.HAfooter .left-col {
  width: 170px;
}
.HAfooter .left-col #HAfooter-logo {
  max-width: 120px;
}


/*
-----------------------------------------------------------------------------

04. Inner Content

-----------------------------------------------------------------------------
*/

.HAstatic-header-wrapper {
  padding: 11px 0px 8px 0px;
  margin: 0;
  margin-top: -6px;
}

/* Home */

#primary {
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0px;
  z-index: -99;
}

.primary-home {
  background-image: url('/wp-content/themes/herzatelier/media/header/Titelbild-water.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 29%;
}


#bloginfo {
  text-align: center;
  display: block;
  position: relative;
}
#bloginfo::after {
  content: "";
  width: 250px;
  height: 5px;
  display: block;
  background: #de7f83;
  margin: 10px auto;
}

#main .pb {
  padding-bottom: 17rem;
}

#main .home-link {
  padding: 5rem 0;
  position: relative;
}
#main .home-link:first-of-type::before {
  content: "";
  position: absolute;
  width: 50vw;
  height: 100%;
  right: 50%;
  top: 0;
  display: block;
  background: #4f111d;
  z-index: -1;
}

#main .home-link:first-of-type::after {
  content: "";
  position: absolute;
  width: 50vw;
  height: 100%;
  left: 50%;
  top: 0;
  display: block;
  background: url('/wp-content/themes/herzatelier/media/header/HerzAtelier-Lebensberatung-min.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

#main .home-link:last-of-type::before {
  content: "";
  position: absolute;
  width: 50vw;
  height: 100%;
  right: 50%;
  top: 0;
  display: block;
  background: url('/wp-content/themes/herzatelier/media/header/Tanz-Herzatelier-Cropped-min.jpg');
  background-size: cover;
  background-position: right top;
  z-index: -1;
}

#main .home-link:last-of-type::after {
  content: "";
  position: absolute;
  width: 50vw;
  height: 100%;
  left: 50%;
  top: 0;
  display: block;
  background: #de7f83;
  z-index: -1;
}

#main article .bg--lightPink {
  position: relative;
  background: rgba(222, 126, 130, 1);
  padding: 1em;
  width: 35rem;
  margin: 0 auto;
  transform: scale(0.75);
}

#main article:last-of-type .bg--lightPink {
  background: #4f111d;
}

#main article .bg--lightPink .img-wrap {
  position: absolute;
  width: 16rem;
  height: 23rem;
}

.fcolor--lightPink {
  color: #de7f83;
}

#main article .bg--lightPink .img-wrap.left {
  left: -4rem;
}

#main article .bg--lightPink .img-wrap.right {
  right: -4rem;
}

#main article .bg--lightPink .img-wrap.right:after {
  content: "";
  background: radial-gradient(at top left, #4f111d, transparent 90%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#main article .bg--lightPink .img-wrap.left:after {
  content: "";
  background: radial-gradient(at top right, #4f111d, transparent 90%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#main article .bg--lightPink .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#main article h2 {
  line-height: 1.2em;
  max-width: 700px;
  text-align: center;
  margin: 30px auto;
}

#main article h2.light {
  opacity: 0.25;
}

#main article h2.fcolor--white {
  color: #fff;
  position: relative;
  z-index: 1;
}

#HAmain-quote-wrapper {
  margin: 280px auto 200px auto;
  padding: 0 35px 0 35px;
  max-width: 1200px;
}

#HAmain-quote-wrapper h1, #HAmain-quote-wrapper p {
  margin-top: 15px;
  max-width: 700px;
  width: 100%;
  left: 0;
  color: #fff;
  text-align: center;
  margin: auto;
}

#HAmain-quote-wrapper p {
  font-family: 'Boska Bold';
  font-size: 24px;
}



#subsite-primary {
  width: 100%;
  height: auto;
  min-height: 600px;
  position: relative;
  padding-bottom: 80px;
  float: left;
  /* z-index: -99; */
}

.HAangebot-teaser {
  text-align: center;
  padding: 25px 0 25px 0;
}

#HA-pre-footer {
  bottom: 140px;
  width: 100%;
  padding: 10px 35px 10px 35px;
  background: #fff;
  position: absolute;
}

#HA-pre-footer a {
  color: #000;
  font-family: 'Poppins SemiBold', sans-serif;
  line-height: 45px;
  font-size: 18px;
  width: 270px;
  text-align: center;
  margin: 20px auto 30px auto;
  display: block;
}
#HA-pre-footer a::after {
  content: "";
  width: 150px;
  height: 3px;
  display: block;
  background: #000;
  margin: 0 auto;

  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#HA-pre-footer a:hover::after {
  width: 200px;
}


.HAsmall-wrapper {
  max-width: 740px;
  margin: 0px auto 0 auto;
}

.intro-container {
  margin-top: 220px;
  position: relative;
}


/* Veraenderung, Nöte, jumpnjoy */
#subsite-primary.veraenderung,
#subsite-primary.noete,
#subsite-primary.jumpnjoy {
  padding-bottom: 0;
}


.veraenderung .HAmedium-wrapper,
.noete .HAmedium-wrapper,
.jumpnjoy .HAmedium-wrapper {
  margin-top: 5vw;
}

.veraenderung h1,
.noete h1,
.jumpnjoy h1 {
  color: #fff;
  text-align: center;
  text-shadow: 2px 4px 8px rgba(0,0,0,0.3);
}


.veraenderung .HAsmall-wrapper, .veraenderung #subsite-main,
.noete .HAsmall-wrapper, .noete #subsite-main,
.jumpnjoy .HAsmall-wrapper, .jumpnjoy #subsite-main {
  margin-top: 0;
  padding-top: 0;
}

.veraenderung .container,
.noete .container,
.jumpnjoy .container {
  width: 100%;
  margin-top: 140px;
  height: 350px;
  max-height: 350px;
  overflow: hidden;
  position: relative;
}
.veraenderung .container .bg-img,
.noete .container .bg-img,
.jumpnjoy .container .bg-img {
  width: 100%;
  position: absolute;
}

.veraenderung .container .bg-img {
  -webkit-transform: rotateY(180deg) translateY(-50%);
  -moz-transform: rotateY(180deg) translateY(-50%);
  -ms-transform: rotateY(180deg) translateY(-50%);
  -o-transform: rotateY(180deg) translateY(-50%);
  transform: rotateY(180deg) translateY(-50%);
}

.veraenderung .brush-overlay,
.noete .brush-overlay,
.jumpnjoy .brush-overlay {
  width: 100%;
  bottom: 0;
  position: absolute;
}


/* Person */
#subsite-primary.person {
  padding-bottom: 0;
}

.person h1 {
  color: #de7f83;
  text-align: center;
}

#subsite-main.person {
  padding-top: 0;
}

ul.indent li {
  transform: translateX(1.2em);
}

#HAbusinesscard {
  max-width: 740px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  background-color: #fff;
}

#HAbusinesscard-photo {
  width: 60%;
  margin: 50px auto 0 auto;
  display: block;
  position: relative;
  border-bottom: 15px solid #4f111d;
}

.titles {
  padding: 5px 25px;
  max-width: 740px;
  margin: auto;
}

.titles p {
  margin-top: 30px !important;
}

.titles p,
.titles b {
  color: #4f111d;
  text-align: center;
}




/* Coaching */

.HAcoaching {
  width: 100%;
  top: 80px;
  padding-left: 95px;
  padding-bottom: 55px;
  display: table;
  position: relative;
}

#coaching-first {
  top: 20px;
  padding-bottom: 0px;
}

.HAcoaching-description {
  float: left;
  width: 50%;
  padding: 50px 0 0 45px;
}

.HAcoaching-img {
  float: left;
  width: 50%;
  height: 260px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.HAcoaching-circle {
  width: 250px;
  height: 250px;
  border-radius: 125px;
  z-index: -20;
}

/* Kontakt */

#subsite-main.contact-special {
  margin-top: 30px;
  margin-bottom: 220px;
}

input {
  font-family: 'Poppins Light', sans-serif;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: #4f111d;
  background: #fff !important;
  border-bottom: solid rgba(222, 126, 130, 0.75) 2px !important;
  height: 50px;
  margin-bottom: 15px !important;
  padding: 0px !important;
  border-radius: 0px !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #4f111d !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #4f111d !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #4f111d !important;
}


input[type="submit"] {
  text-transform: none;
  font-family: 'Poppins SemiBold', sans-serif;
  text-align: center;
  font-size: 20px;
  color: #fff !important;
  background: #4f111d !important;
  height: auto;
  padding: 15px 40px 15px 40px !important;
  display: block;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  margin: 0 auto;
  border: 0 !important;
}

input[type="submit"]:hover {
  background: #de7f83 !important;
}

textarea {
  background: #f2f2f2  !important;
  padding: 20px !important;
  font-family: 'Poppins Light', sans-serif;
  font-size: 20px;
  margin: 20px 0px 40px 0px;
  border-radius: 0px !important;
  height: 250px;
}
textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #4f111d !important;
  text-align: center;
  opacity: 1; /* Firefox */
}

textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #4f111d !important;
  text-align: center;
}

input[type="textarea"]::-ms-input-placeholder { /* Microsoft Edge */
  color: #4f111d !important;
  text-align: center;
}

.wpcf7-not-valid-tip {
  font-family: 'Poppins Light', sans-serif;
  font-size: 15px !important;
  letter-spacing: 0.04em;
  color: #de7f83 !important;
  padding-left: 0px;
  margin: -10px 0 10px 0;
}

.ajax-loader {
  display: none !important;
}

.wpcf7-response-output {
  margin: 50px 0 0 0 !important;
  padding: 0 !important;
  content="\";
  text-align: center;
  color: #de7f83;
}

.wpcf7-mail-sent-ok {
  text-align: center;
  color: #00B16A !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border: 0;
}


/*
-----------------------------------------------------------------------------

05. NoScript / Print

-----------------------------------------------------------------------------
*/

.noscript-popup {
  padding: 15px;
  width: 100%;
  display: block;
  position: absolute;
  top: 100px;
  z-index: 999;
  background: rgba(150, 0, 0, 0.9);
  text-align: center;
  top: 0;
}

.noscript-popup a {
  color: #fff;
  font-size: 20px;
  font-family: 'Poppins Light', sans-serif;
}

#hide-noscript {
  padding: 5px;
  border: 1px solid #fff;
  border-radius: 5px;
  margin: 20px 0 0 100px;
}

#no-js:target {
  display: none;
}

/* TABLET ****************************************************************************************/

/*
01. Main
02. Navigation
03. Footer
04. Inner Content
05. NoScript
*/

@media only screen and (max-width: 1200px) {
  /*
  -----------------------------------------------------------------------------

  01. Main

  -----------------------------------------------------------------------------
  */


  h1 {
    font-size: 40px;
    line-height: 52px;
  }

  h2 {
    font-size: 40px;
    line-height: 1.5em;
  }


  #main {
    margin: 120px auto 360px auto;
    padding: 0px 70px 0px 70px;
  }


  #subsite-main {
    margin: 0px auto 350px auto;
    padding: 20px 70px 0px 70px;
    max-width: 740px;
  }

  .HAfullwidth-wrapper-inner {
    margin: 30px auto 100px auto;
    padding: 0px 35px 0px 35px;
    max-width: 960px;
  }
  header {
    margin: 0 0px 0px 0px;
  }

  #primary {
    width: 100%;
    height: 600px;
    position: absolute;
    padding-bottom: 70px;
    top: 0px;
    z-index: -99;
  }

  .primary-home {
    background-position: center 30%;
  }

  #HAmain-quote-wrapper {
    margin: 240px 15px 200px 15px;
  }

  #HAmain-quote-wrapper h1 {
    font-size: 35px;
  }

  #HAmain-quote-wrapper p {
    max-width: 500px;
    width: 100%;
  }

  #subsite-primary {
    padding-bottom: 60px;
  }


  /*
  -----------------------------------------------------------------------------

  02. Navigation

  -----------------------------------------------------------------------------
  */
  #HAlogo {
    width: 90px;
    margin-top: 10px;
  }
  /* Script containers */
  #HAhead-banner {
    padding: 0px 35px 0px 35px !important;
    height: 120px;
  }
  #site-navigation {
    width: 80%;
  }
  #HAnavi-desktop li {
    padding: 40px 10px 10px 10px;
  }




  /*
  -----------------------------------------------------------------------------

  03. Footer

  -----------------------------------------------------------------------------
  */

  #HAfooter-statement {
    text-align: center;
    background: #f2f3f0;
    width: 100%;
    padding: 10px 35px 10px 35px;
  }

  #HAfooter-statement p {
    font-family: 'Poppins Light', sans-serif;
    font-size: 15px;
    line-height: 28px;
    margin: 0px;
  }
  #HAfooter-banner2 {
    width: 100%;
    float: left;
  }


  .HAfooter {
    max-width: 600px;
    float: none;
    margin: 0 auto;
  }

  .HAfooter .left-col {
    width: 150px;
  }
  .HAfooter .left-col #HAfooter-logo {
    max-width: 100px;
  }

  .col-33 {
    width: auto;
  }
  .middle-col {
    padding-left: 25px;
    padding-right: 25px;
  }


  /*
  -----------------------------------------------------------------------------

  04. Inner Content

  -----------------------------------------------------------------------------
  */


  .home #bloginfo, .home article h2 {
    font-size: 35px;
    line-height: 1.2em;
  }

  .nomobile {
    display: none;
  }

  .HAsmall-wrapper {
    margin: 0px auto 0 auto;
    padding: 0 70px 0 70px;
  }

  .intro-container {
    margin-top: 200px;
  }


  /* Veraenderung, Nöte, Jumpnjoy */

  .veraenderung h1,
  .noete h1,
  .jumpnjoy h1 {
    margin-left: 20px;
  }

  .veraenderung .HAmedium-wrapper,
  .noete .HAmedium-wrapper,
  .jumpnjoy .HAmedium-wrapper {
    margin-left: 15px;
  }

  .veraenderung .HAsmall-wrapper, .veraenderung #subsite-main,
  .noete .HAsmall-wrapper, .noete #subsite-main,
  .jumpnjoy .HAsmall-wrapper, .jumpnjoy #subsite-main {
    margin-top: 0;
    padding-top: 0;
  }

  .veraenderung .container,
  .noete .container,
  .jumpnjoy .container {
    margin-top: 120px;
    height: 24vw;
    max-height: 350px;
  }

  .veraenderung .HAsmall-wrapper,
  .noete .HAsmall-wrapper,
  .jumpnjoy .HAsmall-wrapper {
    padding: 0;
  }

  /* Person */
  #HAbusinesscard-photo {
    width: 75%;
  }



  /* Kontakt */
  #contact-form-wrapper {
    padding: 0px !important;
  }

  /*
  -----------------------------------------------------------------------------

  05. NoScript  /  Print

  -----------------------------------------------------------------------------
  */
  #hide-noscript {
    display: block;
    margin: 20px auto;
    width: 50%;
  }
}

@media only screen and (max-width: 1100px) {
  #main .home-link {
    padding: 2rem 0 18rem; 
  }

  #main article .bg--lightPink {
    max-width: 100%;
    padding: 0.5em;
  }

  #main .home-link:first-of-type::before,
  #main .home-link:last-of-type::after {
    width: 100vw;
    height: 30%;
    left: calc(50% - 50vw);
    right: auto;
    top: 0;
    bottom: auto;
  }

  #main .home-link:first-of-type::after,
  #main .home-link:last-of-type::before {
    width: 100vw;
    height: 70%;
    left: calc(50% - 50vw);
    right: auto;
    top: auto;
    bottom: 0;
  }

  #main article .bg--lightPink .img-wrap {
    height: 16rem;
    width: 12rem;
  }

  #main article .bg--lightPink .img-wrap.left {
    left: -1rem;
  }

  #main article .bg--lightPink .img-wrap.right {
    right: -1rem;
  }
}

/* MOBILE ****************************************************************************************/

/*
01. Main
02. Navigation
03. Footer
04. Inner Content
05. NoScript
*/

@media only screen and (max-width: 480px) {
  /*
  -----------------------------------------------------------------------------

  01. Main

  -----------------------------------------------------------------------------
  */
  /* Fonts */
  h1 {
    font-size: 30px;
    line-height: 43px;
  }
  h2 {
    font-size: 30px;
    line-height: 43px;
  }
  h3 {
    font-size: 22px;
    line-height: 27px;
  }
  p, li {
    font-size: 16px;
    line-height: 25px;
  }
  h4, h5, h6, strong, b {
    font-size: 16px;
    line-height: 25px;
  }
  #main {
    margin-top: 100px;
    padding: 0px 25px 0px 5px;
  }
  #subsite-main {
    margin-bottom: 500px;
    padding: 0px 35px 0px 35px;
  }
  /*
  -----------------------------------------------------------------------------

  02. Navigation

  -----------------------------------------------------------------------------
  */
  #HAlogo {
    width: 80px;
    margin-top: 0px;
    margin-left: -15px;
  }
  #HAhead-banner {
    padding: 0px 35px 0px 35px !important;
    height: 100px;
    border-bottom: 5px solid #de7f83;
  }
  .HAsmall-wrapper {
    margin: 0px auto 0 auto;
    padding: 0 35px 0 35px;
  }


  /* You'll find the rest of the mobile navi in a special breakpoint media tag */

  /*
  -----------------------------------------------------------------------------

  03. Footer

  -----------------------------------------------------------------------------
  */

  #HA-pre-footer {
    position: absolute;
    bottom: 170px;
    width: 100%;
  }

  #HAfooter-statement {
    padding: 15px 35px 15px 35px;
  }

  #HAfooter-statement p {
    font-size: 16px;
    line-height: 25px;
  }

  #HAfooter-banner1 {
    width: 100%;
    padding: 20px;
  }

  .onlymobile {
    display: inline;
  }

  #HAfooter-banner2 {
    width: 100%;
    float: left;
    text-align: center;
    height: 240px;
  }
  #HAfooter-wrapper {
    width: 100%;
    float: left;
  }
  #HAfooter-logo {
    width: 100px;
    float: none;
    margin: 0 auto 0 auto;
  }

  .HAfooter-mobile {
    width: 100%;
    float: left;
    margin: 3px 0px 25px 0px;
  }

  .HAfooter-small p strong, .HAfooter-small p b {
    color: #fff;
  }
  .HAfooter-mobile p, .HAfooter-mobile a, .HAfooter-mobile span {
    margin: 15px 0px 0px 0px;
    font-size: 14px;
    line-height: 20px;
  }

  /*
  -----------------------------------------------------------------------------

  04. Inner Content

  -----------------------------------------------------------------------------
  */



  #primary {
    height: 500px;
  }

  .primary-home {
    background-position: center bottom;
  }

  .nomobile {
    display: none;
  }


  /* Home */
  .home #bloginfo, .home article h2 {
    font-size: 30px;
    line-height: 1.2em;
  }

  #HAmain-quote-wrapper {
    margin: 180px 0 100px 0;
  }

  #HAmain-quote-wrapper h1, #HAmain-quote-wrapper p {
    margin: 30px auto;
    width: 100%;
  }

  #HAmain-quote-wrapper h1 {
    font-size: 30px;
    line-height: 1.4em;
  }



  .HAangebot-teaser {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .HAangebot-teaser p {
    margin-top: -77px;
  }


  /* Veraenderung, Noete, jumpnjoy */
  .veraenderung .HAmedium-wrapper,
  .noete .HAmedium-wrapper,
  .jumpnjoy .HAmedium-wrapper {
    margin-top: 12vw;
    margin-left: 0;
  }


  .veraenderung h1,
  .noete h1,
  .jumpnjoy h1 {
    margin-left: 0px;
  }


  .veraenderung .container,
  .noete .container,
  .jumpnjoy .container {
    margin-top: 90px;
    height: 35vw;
    max-height: 350px;
  }

  .veraenderung .HAsmall-wrapper,
  .noete .HAsmall-wrapper,
  .jumpnjoy .HAsmall-wrapper {
    padding: 0;
  }

  .veraenderung .container .bg-img {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    bottom: 0;
  }



  /* Person */
  #HAbusinesscard-photo {
    width: 100%;
  }

  .person h1 {
    margin-left: 0px;
  }

  .person .intro-container {
    margin-top: 150px;
  }



  /* Kontakt */

  .kontakt .HAsmall-wrapper {
    margin-top: 150px;
  }

  /* Forms */

  input {
    font-size: 17px;
    border-bottom: solid black 1px !important;
    height: 50px;
    margin-bottom: 5px !important;
  }


  input[type="submit"] {
    font-size: 17px;
    padding: 15px 35px 15px 35px !important;
  }


  textarea {
    font-size: 17px;
    margin: 10px 0px 20px 0px;
  }


  .contact-special {
    margin-bottom: 330px !important;
    margin-top: 70px !important;
  }


  .wpcf7-not-valid-tip {
    margin: -5px 0 10px 0;
  }


  /*
  -----------------------------------------------------------------------------

  05. NoScript

  -----------------------------------------------------------------------------
  */
}

/* SPECIAL BREAKPOINTS ****************************************************************************************/

/* Header-Banner */



@media only screen and (max-width: 1057px) {


  #HAmobilenavtriggerbox {
    position: fixed;
    top: 0px;
    right: 0px;
    height: 120px;
    width: 100px;
    padding: 15px;
    display: block;
    z-index: -2;
  }

  #HAmobilenavwrapper {
    position: fixed;
    top: -50px;
    right: -50px;
    height: 140px;
    width: 0%;
    padding: 15px;
    display: block;
    z-index: 98;
    overflow: hidden;
  }
  #HAmobilenavwrapper.open {
    top: 0px;
    min-height: 350px;
    right: 0px;
    width: 100%;
    overflow: visible;
  }
  #HAmobilenavbox {
    position: fixed;
    top: -30px;
    right: 0px;
    height: 0px;
    width: 100%;
    padding: 15px;
    background: #de7f83;
    display: block;
    overflow: hidden;
    z-index: -2;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;
  }
  #HAmobilenavbox.open {
    top: 0px;
    height: 100vh;
    width: 100%;
    border-bottom: 100px solid #e69ea1;
    -webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
  }
  #HAmobilenavwrapper ul li {
    opacity: 0;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    transition: all 0.7s ease;
  }
  #HAmobilenavwrapper.open ul li {
    opacity: 1;
  }

  #HAnavi-mobile {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
  }

  #HAmobilenavwrapper ul {
    margin-top: 80px;
  }

  #HAnavi-mobile li a {
    font-family: 'Poppins Light', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 7px;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;
  }
  #HAnavi-mobile li a:hover {
    color: #4f111d;
    background: #fff;
  }
  #HAnavi-mobile li {
    float: right;
    padding: 25px 0px 5px 0px;
    text-align: center;
    width: 100%;
    opacity: 0;
  }
  #HAnavi-mobile li {
    opacity: 1;
  }
  #HAnavi-mobile li.actual-site a {
    color: #4f111d;
    background: #fff;
  }

  /* Navi Trigger */
  #HAmobilenavtrigger {
    position: fixed;
    top: 18px;
    right: 0px;
    width: 100px;
    height: 120px;
    padding: 15px;
    display: block;
    z-index: 99;
    cursor: pointer;
  }
  #HAnavtriggerline-1, #HAnavtriggerline-2 {
    display: block;
    border-bottom: 2px solid #4f111d;
    width: 30px;
    height: 5px;
    padding: 6px;
    margin-left: 20px;
    position: relative;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;
  }
  #HAmobilenavtriggerinner.open #HAnavtriggerline-1 {
    margin-top: 12px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  }
  #HAmobilenavtriggerinner.open #HAnavtriggerline-2 {
    margin-top: -14px;
    margin-left: 12px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
  }

}



/* Hide mobilenav on large screens and desktop navi on small screens */

@media only screen and (min-width: 1058px) {
  #HAmobilenavwrapper, #HAmobilenavtrigger {
    display: none;
  }
}

@media only screen and (max-width: 1057px) {
  #HAnavi-desktop {
    display: none;
  }
}

/*  */

@media only screen and (max-width: 590px) {

  #main .home-link {
    padding-top: 0px;
  }


  .HAfooter {
    display: none;
  }

  .HAfooter-small {
    width: 100%;
  }

  .HAfooter-small p, .HAfooter-small a, .HAfooter-small span {
    color: #fff;
    margin-top: 0;
  }

  #HAfooter-logo {
    width: 70px;
    margin: 0 auto 0 auto;
  }

  #HAfooter-banner2 {
    text-align: center;
  }

  footer {
    height: 240px !important;
    min-height: 240px !important;
    padding-left: 70px;
    padding-right: 70px;
  }

  #HA-pre-footer {
    bottom: 240px;
  }
  #subsite-main {
    margin: 0px auto 430px auto;
  }
  /* #main {
    margin: 620px auto 450px auto
  } */
  .contact-special {
    margin-bottom: 310px !important;
  }
}

@media only screen and (max-width: 520px) {

  /* #main {
    margin: 680px auto 450px auto !important;
  } */

}

@media only screen and (max-width: 480px) {

  /* #main {
    margin: 520px auto 450px auto !important;
  } */

  #main article h2 {
    font-size: 7vw;
  }

  footer {
    padding-left: 35px;
    padding-right: 35px;
  }

}

@media only screen and (min-width: 591px) {
  .HAfooter-small {
    display: none;
  }
}

@media only screen and (min-width: 340px) {
  #bloginfo::after {
    width: 100px;
  }
}




/* Mini Mobile *********************************/
@media only screen and (max-width: 325px) {

  p, li, h4, h5, h6, strong, b, input, textarea {
    font-size: 15px;
    line-height: 23px;
  }

  #HA-pre-footer a {
    font-size: 15px;
    width: 100%;
  }

  .HAfooter-small p b {
    font-family: 'Poppins Light', sans-serif;
    font-weight: normal;
    letter-spacing: normal;
  }

}