:root {
  --red: red;
  --bg-color-1: var(--celestial);
  --bg-color-2: var(--celestial);
}

body, html {
  color: black;
}

body {
  overflow: hidden;
}

.body {
  overflow: visible;
}

/*HEADER*/

body,
header,
a.mPS2id-highlight {
  background-color: var(--celestial);
}

a.mPS2id-highlight,
.menu a.mPS2id-highlight {
  color: red;
}

.button-content:hover a.none {
  color: yellow;
}

a.menu-link-class:hover {
  color: red;
}

.header-bar {
  width: calc(83vw * 0.83);
}

.header-bar:hover {
  background-color: yellow;
}

.header-bar:hover:after {
  background-color: yellow;
  color: black;
}

#one:before    {width: calc(10vw * 1.0);}
#two:before    {width: calc(35vw * 1.0);}
#three:before  {width: calc(3vw * 1.0);}
#four:before   {width: calc(10vw * 1.0);}
#five:before   {width: calc(26vw * 1.0);}
#six:before    {width: calc(7vw * 1.0);}
#seven:before  {width: calc(18vw * 1.0);}

/*HEADER END*/


a:link		{color: black; text-decoration: none;}
a:visited	{color: black; text-decoration: none;}
a:hover		{color: black; text-decoration: none;}
a:active 	{color: black; text-decoration: none;}

/*    TEXT    */

h1,
h2,
h3 {
  color: var(--red);
}

h1.biggest {
  font-size: 20vw;
  line-height: 0.85em;
  letter-spacing: -0.7vw;
  margin-top: 6rem;
  margin-bottom: -2rem;
  text-align: center;
}

@media (min-width: 1200px) {
  h1.biggest {
    font-size: 28rem;
  }
}

.bu {
  margin: 1rem;
}

.center {
  text-align: center;
}


/*    LAYOUT    */


section {
  box-sizing: border-box;
}

.content__text {
  margin: 4rem 2rem 5rem 2rem;
}

@media (max-width: 479px) {
  .content__text {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.proletarier .content__text,
.trotzkismus .content__text,
.gruene .content__text {
  max-width: 60rem;
}

.segment {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.segment.first {
  background-color: var(--bg-color-1);
}

.lead__wrapper {
  color: var(--red);
  padding-bottom: 4.5rem;
}

.lead__wrapper:after {
  background-color: var(--red);
}

/*  TROTZKISMUS  */

.segment.trotzkismus {
  background-color: var(--bg-color-2);
  display: flex;
  justify-content: center;
}
.segment.trotzkismus p.first {
  font-size: 3rem;
}

/*  PROLETARIER  */

.segment.proletarier {
  background-color: var(--bg-color-1);
}

/*  GRUENE  */

.segment.gruene {
  background-color: var(--bg-color-2);
}

/*  OBSESSED  */

.segment.obsessed {
  background-color: var(--bg-color-2);
}

.segment.obsessed .content__text {
  max-width: 85rem;
}

/*  THERAPIST  */

.therapist .content__text {
  margin-top: 1rem;
}

.segment.therapist {
  background-color: var(--bg-color-2);
  align-items: center;
  padding: 3rem 1.75rem 5rem 1rem;
  box-sizing: border-box;
}

.therapist .specialobject {
  background-color: yellow;
  color: var(--red);
  display: flex;
  justify-content: center;
}

.segment.therapist .content__text {
  margin-top: 0;
  margin-bottom: 0;
}

.segment.therapist > .content__text {
  margin: 0;
}

.segment.therapist p:last-of-type {
  margin-bottom: -0.3rem;
}

.segment.therapist h4 {
  line-height: 3rem;
  margin-bottom: 1.5rem;
  max-width: none;
}

.segment.therapist h4,
.segment.therapist p {
  color: var(--red);
}

/*  KIRCHE  */

.segment.kirche {
  background-color: var(--bg-color-1);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.segment.kirche .content__text {
  max-width: 60rem;
  position: relative;
}

.segment.kirche .content__text:first-of-type {
    margin-bottom: 0;
}

.adorno, .benedikt {
  border: 0.3rem solid black;
  padding: 1rem 1rem 0.6rem 1rem;
  margin-bottom: 1rem;
}

.adorno p, .benedikt p {
  margin-bottom: 0;
}

.adorno {
  margin-right: 5rem;
}

.benedikt {
  margin-left: 5rem;
}

h6 {
  max-width: 110rem;
  color: black;
  color: white;
}

.big-quote {
  background-color: var(--red);
}

.big-quote:after {
  border-color: var(--red) transparent transparent transparent;
}


/*    IMAGES    */

img {
  max-width: 100%;
}

.image {
  max-width: 70rem;
}

.image.medium {
  max-width: 60rem;
}

.image.small {
  max-width: 40rem;
}

.image.big {
  padding: 2rem 2rem 0 2rem;
  margin: 0 auto;
}

@media (max-width: 479px) {
  .image.big {
    padding: 0;
  }
}

.image-wrapper {
  background-color: var(--plum);
  background-color: var(--mediumred);
  background-color: yellow;
  background-color: var(--red);
  width: 100%;
  margin-top: -2rem;
  padding-top: 5rem;
  margin-bottom: 1rem;
  padding-bottom: 5rem;
}

@media (max-width: 600px) {
  .image-wrapper {
    background-color: transparent;
    margin-top: -4rem;;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.image.umfluss {
  max-width: 60rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.image-2 {
  display: flex;
  justify-content: center;
  width: calc(100vw - 4rem);
  margin-left: calc(-50vw + 32rem);
  margin-bottom: 2rem;
}

.image-2 .image.big {
  margin: 0;
  padding: 0;
  max-width: 60rem;
}

.image-2 .image.big:first-of-type {
  padding-right: 2rem;
}

@media (max-width: 600px) {
  
  .image-2 {
    margin-left: 0rem;
    width: 100%;
  }
  
  .image-2 .image.big:first-of-type {
    padding-right: 1rem;
  }
  
}

video {
  max-width: 100%;
}

.video-wrapper {
  width: 100vw;
  position: absolute;
  left: calc(-50vw + 30rem);
  background-color: yellow;
}

@media (max-width: 550px) {
  .video-wrapper {
    left: -4rem;
  }
}

.video {
  display: inline-block;
  max-width: 20rem;
  position: absolute;
  left: -20rem;
}

.video.go {
  animation-name: video;
  animation-duration: 12s;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
}

@keyframes video {
  0%, 100% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(calc(100vw + 24rem + 10rem)) rotate(360deg); 
  }
}

@media (max-width: 479px) {
  .video.go {
    animation-duration: 5s;
  }
}

footer {
  background-color: var(--bg-color-1);
}

footer a {
  margin: 1rem;
}

footer a:link	  {color: black; text-decoration: underline;}
footer a:visited  {color: black; text-decoration: underline;}
footer a:hover    {color: yellow; text-decoration: underline;}
footer a:active   {color: yellow; text-decoration: underline;}


@media (max-width: 1200px) {

  .image.umfluss.rechts {
    margin: 1rem auto 1rem auto;
    float: none;
    display: flex;
    flex-direction: column;
  }
  
  .image.umfluss.links {
    margin: 1rem auto 1rem auto;
    float: none;
  }

}

@media (max-width: 900px) {

  .flexbox {
    flex-direction: column;
  }
  .therapist.segment .specialobject{
    flex-direction: column;
    align-items: center;
  }
  .therapist.segment .image {
  }

}