body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans Narrow', sans-serif;
  color: #fff;
}

.flex-container {
  position: absolute;
  height: 80vh;
  width: 100%;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
}

.sub_title{
	font-size: 19px;
	padding: 12px 12px;
}

.flex-title {
  color: #f1f1f1;
  position: relative;
  font-size: 1.4vw;
  margin: auto;
  text-align: center;
  transform: rotate(00deg);
  top: 79%;
  padding: 5px;
  border: 2px solid #f1f1f1;
  width: max-content;
  border-radius: 10px;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
@media screen and (max-width: 768px) {
  .flex-title {
    transform: rotate(0deg) !important;
    font-size: 4vw;
    top: 57% !important;
  }
  
}

.pact_questions ul {
    margin: 2.5em 0 2em 0;
}
.pact_questions ul li.active, .pact_questions ul li:hover, .active {
    color: #f7d315;
	border-radius: 3em;
	border-color:#F6D100;
	border-width: 2px;
}
.pact_questions ul li {
    font-weight: 600;
    font-size: 1.2em;
	display: inline-table;
	vertical-align: middle;
	width: calc(20% - 77px);
    text-align: center;
    cursor: pointer;
    border: solid 0.1em transparent;
    text-transform: uppercase;
}
.flex-about {
  opacity: 0;
  color: #f1f1f1;
  position: relative;
  width: 70%;
  font-size: 1.3vw;
  padding: 0% 5%;
  top: 60%;
  border: 2px solid #f1f1f1;
  border-radius: 10px;
  margin: auto;
  text-align: center;
  transform: rotate(0deg);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.nav-link {
    display: block;
	padding: 0.7em 0.2em;
}

#menu2 ul li {
	padding: 0.1em 0.1em !important;
}

.flex-about p{margin: 0 !important}
.flex-about:hover {
    opacity: 1;
}
.flex-title:hover {
    transform: rotate(0deg);
}
@media screen and (max-width: 768px) {
  .flex-about {
    padding: 1%;
    border: 0px solid #f1f1f1;
	top: 34%;
  }
  
}

.flex-slide {
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;

}
@media screen and (max-width: 768px) {
  .flex-slide {
    overflow: auto;
    overflow-x: hidden;
  }
  .barbara, .klaus, .lukasz, .marek {
    background-position: top center !important;
    background-size: cover !important;
    overflow: hidden;
  }  
}

@media screen and (max-width: 768px) {
  .flex-slide p {
    font-size: 2em;
  }
}

@media screen and (max-width: 768px) {
  .flex-slide ul li {
    font-size: 2em;
  }
}

.flex-slide:hover {
  -webkit-flex-grow: 2.4;
  flex-grow: 2.4;
}


@media screen and (min-width: 768px) {
  .home {
    -moz-animation: aboutFlexSlide;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: aboutFlexSlide;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: aboutFlexSlide;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
}

@keyframes aboutFlexSlide {
  0% {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
  50% {
    -webkit-flex-grow: 3;
    flex-grow: 3;
  }
  100% {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
}
@media screen and (min-width: 768px) {
  .flex-title-home {
    transform: rotate(0deg);
    top: 79%;
    -moz-animation: homeFlextitle;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: homeFlextitle;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: homeFlextitle;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
}


.flex-about-home {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .flex-about-home {
    -moz-animation: flexAboutHome;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: flexAboutHome;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: flexAboutHome;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
}

@keyframes flexAboutHome {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.contact-form {
  width: 100%;
}

input {
  width: 100%;
}

textarea {
  width: 100%;
}

.barbara {
  background:  url(../images/1.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.elizabeth {
  background:  url(../images/2.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.klaus {
  background:  url(../images/3.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.lukasz {
  background:  url(../images/4.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.marek {
  background:  url(../images/5.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}


.zuza {
  background:  url(../images/6.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.anna {
  background:  url(../images/7.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.andrea {
  background:  url(../images/8.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.karina {
  background:  url(../images/9.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.norbert {
  background:  url(../images/10.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.mattheus {
  background:  url(../images/11.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.adam {
  background:  url(../images/12.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.spinner {
  position: fixed;
  top: 0;
  left: 0;
  background: #222;
  height: 100%;
  width: 100%;
  z-index: 11;
  margin-top: 0;
  color: #fff;
  font-size: 1em;
}

.cube1, .cube2 {
  background-color: #fff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}