/*******************************************************************************
landingpage.less
*******************************************************************************/
/*******************************************************************************
        Headline + Text
*******************************************************************************/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  font-family: "Mulish", sans-serif;
  color: #1ca6a6;
}
h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center {
  text-align: center;
}
h1.justify,
h2.justify,
h3.justify,
h4.justify,
h5.justify,
h6.justify {
  text-align: justify;
}
.businessPage h1,
.businessPage h2,
.businessPage h3,
.businessPage h4,
.businessPage h5,
.businessPage h6,
.contactPage h1,
.contactPage h2,
.contactPage h3,
.contactPage h4,
.contactPage h5,
.contactPage h6,
.legalPage h1,
.legalPage h2,
.legalPage h3,
.legalPage h4,
.legalPage h5,
.legalPage h6,
.jobPage h1,
.jobPage h2,
.jobPage h3,
.jobPage h4,
.jobPage h5,
.jobPage h6 {
  color: #555554;
}
h1 {
  margin: 1rem 0;
  font-size: 3.5rem;
  line-height: 1.1;
}
h2 {
  margin: 1rem 0;
  font-size: 3rem;
  line-height: 1;
}
h3 {
  margin: 1rem 0 0.75rem;
  font-size: 2.25rem;
  line-height: 1;
}
h4 {
  margin: 1rem 0 0.75rem;
  font-size: 1.5rem;
}
h5 {
  margin: 1rem 0 0.5rem;
  font-size: 1.1rem;
}
@media only screen and (min-width: 1024px) {
  :is(.jobsPage, .businessPage, .contactPage) h1 {
    font-size: 5.5rem;
    line-height: 1;
  }
  :is(.jobsPage, .businessPage, .contactPage) h2 {
    font-size: 4.75rem;
  }
  :is(.jobsPage, .businessPage, .contactPage) h3 {
    font-size: 3.125rem;
    line-height: inherit;
  }
  :is(.jobsPage, .businessPage, .contactPage) h4 {
    font-size: 1.25rem;
  }
}
:is(.jobsPage, .businessPage) h2 + h3 {
  margin-top: -1rem;
}
:is(.jobsPage, .businessPage) h3 + h4,
:is(.jobsPage, .businessPage) h4 + h5 {
  margin-top: -0.5rem;
}
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h1 + ul,
h2 + ul,
h3 + ul,
h4 + ul,
h5 + ul,
h1 + ol,
h2 + ol,
h3 + ol,
h4 + ol,
h5 + ol {
  margin-top: 0;
}
.jobPage h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
  line-height: 1.1;
}
p {
  text-align: left;
  /*	&:not(.businessPage):not(.jobsPage):not(.contactPage) {
	    text-align: justify;
	text-align-last: center;
	}*/
}
p.center {
  text-align: center;
}
strong {
  font-weight: 700;
}
figure {
  margin: 0;
}
figcaption {
  font-size: 80%;
}
/*******************************************************************************
        Hyperlink + Buttons
*******************************************************************************/
a,
a:link,
a:hover,
a:focus,
a:active,
a:visited {
  outline: none;
}
a:focus {
    outline: 2px solid;
    outline-offset: 4px;
}
button {
  font-family: "Mulish", sans-serif;
  font-size: 1em;
  font-weight: normal;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: underline;
  transition: all 0.125s ease;
}
a:hover,
a:focus {
  text-decoration: underline;
  color: #cccccc;
}
a.socials {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
a.socials i {
  line-height: 32px;
}
a.linkedin {
  background-color: #0077b5;
}
a.facebook {
  background-color: #3b5999;
}
a.instagram {
  background-color: #e4405f;
}
.cta {
  display: inline-block;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 1px;
  background-color: transparent;
  border-radius: 20px;
  text-decoration: none;
}
.cta:hover,
.cta:focus {
  text-decoration: none;
}
.cta.cta-primary {
  color: #ffffff;
  background-color: #a31780;
}
.cta.cta-primary:hover {
  color: #ffffff;
  background-color: #1ca6a6;
}
.cta.cta-secondary {
  color: #ffffff;
  background-color: #f5991a;
}
.cta.cta-secondary:hover {
  color: #ffffff;
  background-color: #1ca6a6;
}
.cta + .cta {
  margin: 1em auto 0;
}
.cta.bigger {
  font-size: 1.5rem;
}
@media only screen and (orientation: landscape) and (max-width: 768px) {
  .cta + .cta {
    margin: 0 0 0 1em;
  }
}
@media only screen and (min-width: 768px) {
  .cta + .cta {
    margin: 0 0 0 1em;
  }
}
/*******************************************************************************
        Helpers
*******************************************************************************/
ol li,
ul li {
  margin: 0.5em 0;
}
ul.diversity li,
ul.violet li {
  position: relative;
  list-style: none;
}
ul.diversity li:before,
ul.violet li:before {
  content: '';
  position: relative;
  display: inline-block;
  left: -0.75em;
  width: 12px;
  height: 12px;
  border-radius: 6px;
}
ul.diversity li:nth-child(1):before {
  background-color: #f5501a;
}
ul.diversity li:nth-child(2):before {
  background-color: #fd9300;
}
ul.diversity li:nth-child(3):before {
  background-color: #f6ce14;
}
ul.diversity li:nth-child(4):before {
  background-color: #0ca703;
}
ul.diversity li:nth-child(5):before {
  background-color: #1b65f9;
}
ul.diversity li:nth-child(6):before {
  background-color: #da0d6a;
}
ul.violet li:before {
  background-color: #a31780;
}
i.x05 {
  font-size: 0.5em;
}
i.x1-5 {
  font-size: 1.5em;
}
i.x2 {
  font-size: 2em;
}
i.x2-5 {
  font-size: 2.5em;
}
i.x3 {
  font-size: 3em;
}
i.x4 {
  font-size: 4em;
}
small {
  font-size: 0.75rem;
  line-height: 1.4;
}
/*******************************************************************************
        Form
*******************************************************************************/
.inputgroup {
  position: relative;
  margin: 1.5em 0;
}
.inputgroup input,
.inputgroup textarea {
  display: block;
  width: 100%;
  padding: 0.75rem;
  color: #545454;
  font-family: "Mulish", sans-serif;
  font-size: 1.125rem;
  background: white;
  border: none;
  border-radius: 2px;
}
.inputgroup textarea {
  height: 130px;
}
.inputgroup input:focus,
.inputgroup textarea:focus {
  outline: none;
}
.inputgroup input.error,
.inputgroup textarea.error {
  outline: none;
  border: 1px solid #cc4a47 !important;
  box-shadow: 0 0 3px #cc4a47;
}
.inputgroup label {
  font-size: 1.125rem;
  font-weight: bolder;
  line-height: 1.8;
}
.inputgroup:not(.optional) label:after {
  content: '*';
  color: red;
}
#newsletterForm .inputgroup:not(.optional) label:after {
  content: '';
}
#newsletter .item {
  padding: 2em 1em;
  border-radius: 3px;
  box-shadow: 10px 33px 72px 0px hsla(0, 0%, 0%, 0.15);
}
#newsletter .item #newsletterForm {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
}
#newsletter .item #newsletterForm .inputgroup {
  flex: 0 0 100%;
}
#newsletter .item #newsletterForm .inputgroup input,
#newsletter .item #newsletterForm .inputgroup textarea {
  background-color: hsl(0, 0%, 90%);
}
#newsletter .item #newsletterForm .btn-sent {
  flex: 0 0 auto;
  margin: 0 1em;
}
#newsletter .item #newsletterFormB2B .inputgroup input,
#newsletter .item #newsletterFormB2B .inputgroup textarea {
  background-color: hsl(0, 0%, 90%);
}
@media only screen and (min-width: 768px) {
  #newsletter .item {
    padding: 2em 5em;
  }
}
@media only screen and (min-width: 1024px) {
  #newsletter .item {
    padding: 4em 5em;
  }
  #newsletter .item #newsletterForm {
    justify-content: space-between;
  }
  #newsletter .item #newsletterForm .inputgroup {
    flex: 1 0 auto;
    margin-bottom: 0;
  }
  #newsletter .item #newsletterForm .btn-sent {
    flex: 0 0 264px;
    margin: 0 1em;
  }
}
.contact {
  margin-top: 4em;
  padding: 2em 1em 1em;
  background-color: #00B6B6;
  border-radius: 3px;
  box-shadow: 10px 33px 72px 0px hsla(0, 0%, 0%, 0.15);
}
.contact figure {
  margin-top: -4em;
}
.contact figure img {
  max-width: 100%;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .contact {
    margin-top: 8em;
    padding: 2em 5em 1em;
  }
  .contact figure {
    margin-top: -6em;
  }
}
@media only screen and (min-width: 1024px) {
  .contact {
    margin-top: 16em;
    padding: 4em 5em 1em;
  }
  .contact figure {
    margin-top: -12em;
  }
}
.contactPage .contactForm {
  padding: 1rem 2rem;
  background-color: white;
  box-shadow: 10px 33px 72px 0px hsla(0, 0%, 0%, 0.15);
}
.contactPage .contactForm .inputgroup input,
.contactPage .contactForm .inputgroup textarea {
  background-color: hsl(0, 0%, 90%);
}
.sentForm {
  margin: 2em auto 0;
  background: #98cc47;
  color: white;
  text-align: center;
  padding: 8px 16px;
  border-radius: 2px;
}
.sentForm i {
  margin-right: 0.25rem;
}
.btn-sent {
  padding: 0.75em 2em;
  color: white;
  background-color: #A3167F;
  border: none;
  border-radius: 24px;
}
/*******************************************************************************
        Structure
*******************************************************************************/
section {
  position: relative;
  background: white;
  padding: 1px 0;
}
section .area {
  position: relative;
  margin: 2em 1em;
}
section .area:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
section .area + .content {
  margin-top: -1em;
}
section.violet {
  background-color: #a31780;
}
section.orange {
  background-color: #f5991a;
}
section.teal {
  background-color: #1ca6a6;
}
section.grey {
  background-color: #555554;
}
section.violet,
section.orange,
section.teal,
section.grey {
  color: white;
}
section.violet h1,
section.orange h1,
section.teal h1,
section.grey h1,
section.violet h2,
section.orange h2,
section.teal h2,
section.grey h2,
section.violet h3,
section.orange h3,
section.teal h3,
section.grey h3,
section.violet h4,
section.orange h4,
section.teal h4,
section.grey h4,
section.violet h5,
section.orange h5,
section.teal h5,
section.grey h5,
section.violet h6,
section.orange h6,
section.teal h6,
section.grey h6 {
  color: white;
}
.jobsPage section:nth-child(2)  {
  background-color: #a31780;
  color: white;
}
.jobsPage section:nth-child(2)  h1,
.jobsPage section:nth-child(2)  h2,
.jobsPage section:nth-child(2)  h3,
.jobsPage section:nth-child(2)  h4,
.jobsPage section:nth-child(2)  h5,
.jobsPage section:nth-child(2)  h6 {
  color: white;
}
@media only screen and (min-width: 600px) {
  section .area {
    margin: 4em 1em;
  }
}
@media only screen and (min-width: 1200px) {
  section .area,
  section#topic .area {
    max-width: 1160px;
    margin: 4em auto;
  }
}
.contactPage section .content,
.legalPage section .content {
  margin: 8em 1em 2em;
}
.jobPage section .area {
  position: relative;
  margin: 8em 1em 2em;
}
.jobPage section .area img {
  max-width: 100%;
  height: auto;
}
@media only screen and (min-width: 1024px) {
  .jobPage section .area {
    max-width: 920px;
    margin: 8em auto 2em;
  }
}
/*******************************************************************************
        timebeam Aufbau & Cardsets + Card
*******************************************************************************/
.contentSplitted {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  flex-flow: column nowrap;
  margin: 1em 0;
  clear: both;
}
.contentSplitted h2:first-child,
.contentSplitted h3:first-child {
  margin-top: 0;
}
.contentSplitted .item {
  order: 2;
}
.contentSplitted .item.reversed {
  order: 1;
}
.contentSplitted .item.textItem {
  padding: 0 1em;
}
.contentSplitted.content5xn {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .contentSplitted {
    flex-flow: row wrap;
    margin: 4em 0;
  }
  .contentSplitted .item {
    order: 1;
  }
  .contentSplitted .item.reversed {
    order: 2;
  }
  .contentSplitted .item.textItem {
    max-width: 570px;
  }
  .contentSplitted .item.textItem.left {
    margin-left: auto;
  }
  .contentSplitted .item.textItem.right {
    margin-right: auto;
  }
  #wearegamechangers .contentSplitted .textItem,
  #benefits .contentSplitted .textItem,
  .businessPage #wecandomore .contentSplitted .textItem,
  #vision .contentSplitted .textItem {
    max-width: 640px;
  }
  #benefits .contentSplitted {
    align-items: flex-end;
  }
}
.content2xn,
.content3xn,
.content4xn,
.content5xn {
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: space-between;
}
.content2xn .item,
.content3xn .item,
.content4xn .item,
.content5xn .item {
  margin: 1em 0;
}
.content2xn .item p,
.content3xn .item p,
.content4xn .item p,
.content5xn .item p {
  text-align: justify;
  text-align-last: left;
}
.content2xn .item figure,
.content3xn .item figure,
.content4xn .item figure,
.content5xn .item figure {
  margin: 0;
}
.content2xn .item figure img,
.content3xn .item figure img,
.content4xn .item figure img,
.content5xn .item figure img {
  max-width: 100%;
  height: auto;
}
.content2xn .item ul,
.content3xn .item ul,
.content4xn .item ul,
.content5xn .item ul,
.content2xn .item ol,
.content3xn .item ol,
.content4xn .item ol,
.content5xn .item ol {
  text-align: left;
}
.content2xn .item.center,
.content3xn .item.center,
.content4xn .item.center,
.content5xn .item.center {
  text-align: center;
}
.content2xn .item.center p,
.content3xn .item.center p,
.content4xn .item.center p,
.content5xn .item.center p {
  text-align: center;
  text-align-last: center;
}
#workwhereveryouwant .content2xn,
#wearegamechangers .content2xn,
#welcomeeveryone .content2xn,
#wecandomore .content2xn,
#hero .content2xn,
#vision .content2xn,
#mission .content2xn,
.businessPage section:nth-child(2) .content2xn {
  align-items: center;
}
#workwhereveryouwant .content2xn .item:not(.textItem),
.businessPage section:nth-child(2) .content2xn .item:not(.textItem) {
  text-align: center;
}
#wearegamechangers .content2xn .item:not(.textItem),
#mission .content2xn .item:not(.textItem) {
  text-align: right;
}
#teamheros h3 {
  margin-bottom: 0.5rem;
  line-height: 1;
  text-transform: uppercase;
}
#teamheros h3 + p {
  margin-bottom: 0.5rem;
}
#teamheros h3 + p + p {
  margin-top: 0.5rem;
}
#weneedahero .item h2 {
  margin-top: 1em;
  margin-bottom: 0.5rem;
}
#weneedahero .item h2 + p {
  font-size: 1.25rem;
  margin-bottom: 1.5em;
}
#benefits .item h2 {
  margin-bottom: 0;
}
#benefits .item h2 + p {
  font-size: 1.25rem;
  margin-bottom: 0;
}
#benefits .item:nth-child(2) {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #weneedahero .item {
    position: relative;
  }
  #weneedahero figure {
    position: absolute;
    bottom: -8em;
    z-index: 2;
  }
}
.content2xn .item {
  flex: 0 0 100%;
}
.content2xn .item:not(.textItem):first-child {
  padding-right: 2em;
}
.content2xn .item:not(.textItem):last-child {
  padding-left: 2em;
}
.content3xn .item {
  flex: 0 0 100%;
}
.content4xn .item {
  flex: 0 0 100%;
}
.content5xn {
  justify-content: flex-start;
}
.content5xn .item {
  margin: 0;
  flex: 0 0 50%;
}
#benefittoolbox .content5xn .item {
  text-align: center;
  padding: 1em;
}
#benefittoolbox.orange .content5xn .item:nth-child(4n),
#benefittoolbox.orange .content5xn .item:nth-child(4n+1) {
  background-color: #d27a00;
}
#benefittoolbox.grey .content5xn .item:nth-child(4n),
#benefittoolbox.grey .content5xn .item:nth-child(4n+1) {
  background-color: #3b3b3b;
}
@media only screen and (min-width: 768px) {
  .content2xn .item {
    margin: 0;
    flex: 0 0 50%;
    /*&:not(.textItem) {
				&:first-child {
					padding: 0;
					margin-right: 2em;
				}
				&:last-child {
					padding: 0;
					margin-left: 2em;
				}
			}*/
  }
  #wearegamechangers .content2xn .item:not(.textItem),
  #benefits .content2xn .item:not(.textItem),
  .businessPage #wecandomore .content2xn .item:not(.textItem),
  #vision .content2xn .item:not(.textItem) {
    flex: 0 0 calc(50% - 70px);
  }
  .content4xn .item {
    flex: 0 0 48%;
  }
  .content3xn .item {
    flex: 0 0 32%;
  }
  #weneedahero .content3xn .item {
    flex: 0 0 25%;
  }
  #weneedahero .content3xn .item:nth-child(2) {
    flex: 0 0 50%;
  }
  .content5xn .item {
    flex: 0 0 20%;
  }
  #benefittoolbox .content5xn .item {
    padding: 1.5em 3em;
  }
  #benefittoolbox.orange .content5xn .item:nth-child(4n),
  #benefittoolbox.orange .content5xn .item:nth-child(4n+1) {
    background-color: transparent;
  }
  #benefittoolbox.grey .content5xn .item:nth-child(4n),
  #benefittoolbox.grey .content5xn .item:nth-child(4n+1) {
    background-color: transparent;
  }
  #benefittoolbox.orange .content5xn .item:nth-child(odd) {
    background-color: #d27a00;
  }
  #benefittoolbox.grey .content5xn .item:nth-child(odd) {
    background-color: #3b3b3b;
  }
}
@media only screen and (min-width: 1024px) {
  .content4xn .item {
    flex: 0 0 23%;
  }
}
.jobHead {
  border-bottom: 1px solid #d37e09;
}
.jobHead a {
  display: block;
  padding: 0.5em;
  font-weight: 700;
  color: white;
  background-color: #f5991a;
  text-decoration: none;
}
.jobHead a:hover,
.jobHead a:focus {
  background-color: #d37e09;
}
.jobHead a i {
  padding-right: 0.5rem;
}
.quote {
  max-width: 760px;
  margin: 3em auto;
  padding: 0 2em;
}
.quote p:first-child {
  position: relative;
  font-size: 1.5rem;
  font-style: italic;
  text-align: justify;
}
.quote p:first-child:before,
.quote p:first-child:after {
  position: absolute;
  font-size: 7rem;
  line-height: 0;
}
.quote p:first-child:before {
  content: "”";
  left: -54px;
  top: 32px;
}
.quote p:first-child:after {
  content: "“";
  right: -16px;
  bottom: -32px;
}
.quote div {
  text-align: right;
}
.quote div:before,
.quote div:after {
  content: "‒";
  padding: 0 4px;
}
.grey .quote {
  color: #f5991a;
}
.strengths {
  margin: 2rem 0;
  padding: 0.01rem 0 0.01rem 1rem;
  border-left: 1px solid #f5991a;
}
.strengths:nth-child(2) {
  border-width: 2px;
}
.strengths:nth-child(3) {
  border-width: 4px;
}
.strengths:nth-child(4) {
  border-width: 6px;
}
.strengths:nth-child(5) {
  border-width: 8px;
}
.strengths:nth-child(6) {
  border-width: 10px;
}
.strengths:nth-child(7) {
  border-width: 12px;
}
.strengths:nth-child(8) {
  border-width: 14px;
}
.strengths:nth-child(9) {
  border-width: 16px;
}