@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400;1,500&display=swap");
/* Alternative was of working with variables
:root{
    --classicblue: #0f4c82;
}

to call it use var():
color: var(--classicblue);
*/
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Crimson Pro', serif;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: bold;
}

h1 {
  font-size: 2.0em;
  text-align: center;
}

h2 {
  font-size: 1.8em;
}

h3 {
  font-size: 1.6em;
  text-align: center;
}

h4 {
  font-size: 1.3em;
}

h5 {
  font-size: 1.3em;
}

p, blockquote {
  font-size: 1.15em;
  line-height: 1.3em;
}

.navbar {
  background-color: white;
  padding: 1em;
  color: #0f4c82;
  /*font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: .9em;
    font-variant: caps;
    */
}

.navbar .nav-logo {
  height: 70px;
}

.navbar .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  place-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar .mobile-menu {
  cursor: pointer;
  height: 25px;
}

nav {
  display: none;
}

a {
  color: #909193;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

section {
  padding: 4em 2em;
}

section h1, section h2, section h3, section h4, section h5 {
  margin-bottom: .5em;
  color: #0f4c82;
}

.hero {
  background-image: url("/img/bgs/BG02_blue.png");
  background-color: white;
  height: 70%;
  background-position: center;
  background-size: cover;
  color: white;
  text-align: center;
  position: relative;
}

.hero .left-col {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}

.hero .left-col .hero-logo {
  min-height: 150px;
  max-height: 25vh;
  width: auto;
}

.hero .left-col h1 {
  font-size: 2em;
  line-height: 1.3em;
  margin-top: 3em;
  color: white;
}

.hero .right-col {
  display: none;
}

.features {
  margin-left: 2em;
}

.features ul.feature-list {
  margin: 0;
  padding-left: .1em;
}

.features ul.feature-list li {
  margin-bottom: 1em;
  position: relative;
}

.features ul.feature-list li:before {
  content: '';
  position: absolute;
  left: -2em;
  top: .4em;
  width: 20px;
  height: 15px;
  background-image: url(../img/menuIcons-01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: .5em;
}

.funding {
  background-image: url("/img/bgs/220117_LOGO_BPP_BlaueRauten-35.png");
  background-color: white;
  height: 40%;
  background-position: center;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 350px;
}

.funding .left-col {
  display: none;
}

.funding .right-col {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.funding .right-col ul li img {
  height: 50px;
  width: auto;
  margin: 2em 2em;
}

.funding .right-col ul li p {
  width: 100%;
}

.funding .right-col h2 {
  line-height: 1.3em;
  margin-left: 1em;
}

.contacts {
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.contacts label {
  display: block;
  margin: .3em 0 .6em 0;
}

.contacts .contact-right {
  width: 100%;
}

.contacts .contact-right address {
  font-family: 'Crimson Pro';
}

.contacts input, .contacts textarea {
  width: 100%;
  padding: .8em;
  margin-bottom: 1em;
  border-radius: 0.3em;
  border: 1px solid #909193;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Crimson Pro';
  font-size: 1em;
  color: #0f4c82;
}

.contacts input[type="submit"] {
  background-color: #0f4c82;
  color: white;
  font-weight: bold;
  font-size: 1.3em;
  border: none;
  margin-bottom: 5em;
  border-radius: 5em;
  display: inline-block;
  padding: .8em 2em;
  width: unset;
  cursor: pointer;
}

.contacts p {
  margin: .5em;
  padding-bottom: .5em;
  font-size: 1.1em;
}

.contacts iframe {
  z-index: -1;
  width: 100%;
  height: 300px;
  border-radius: 0.3em;
  border: 1px solid #0f4c82;
}

nav.menu-btn {
  display: block;
}

nav {
  position: fixed;
  z-index: 999;
  width: 50%;
  right: 0;
  top: 0;
  background-color: white;
  height: 100vh;
}

nav ul.primary-nav {
  margin-top: 5em;
}

nav li a {
  color: #0f4c82;
  text-decoration: none;
  display: block;
  padding: .5em;
  font-size: 1.3em;
  padding: 1em;
}

nav li a:hover {
  font-weight: bold;
  background-color: #0f4c82;
  color: white;
}

.mobile-menu-exit {
  float: right;
  margin: 1em;
  cursor: pointer;
}

.down-arrow a {
  color: #787878;
}

.down-arrow {
  color: #787878;
  font-size: 30px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.floating-arrow {
  -webkit-animation-name: floating-arrow;
          animation-name: floating-arrow;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes floating-arrow {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  65% {
    -webkit-transform: translate(-50%, 15px);
            transform: translate(-50%, 15px);
  }
  to {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}

@keyframes floating-arrow {
  from {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  65% {
    -webkit-transform: translate(-50%, 15px);
            transform: translate(-50%, 15px);
  }
  to {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}

footer {
  background: #909193;
  height: auto;
  width: 100%;
  font-family: "Poppins", sans-serif;
  color: white;
  padding: .5em;
}

footer a {
  color: white;
  text-decoration: none;
}

footer .footer-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

footer ul li {
  padding-left: 1.2em;
}

.thankyou {
  text-align: center;
  background-image: url("/img/bgs/BG03_gray_trans.png");
  background-color: white;
  height: 70%;
  background-position: center;
  background-size: cover;
  color: #0f4c82;
  text-align: center;
}

.thankyou .left-col {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}

.thankyou .left-col .thankyou-logo {
  min-height: 150px;
  max-height: 25vh;
  width: auto;
}

.thankyou .left-col h1 {
  font-size: 1.3em;
  line-height: 1.3em;
  margin-top: 3em;
}

.thankyou .right-col {
  display: none;
}

.impressum {
  background-image: url("/img/bgs/220117_LOGO_BPP_BlaueRauten_Hero_03_blue copy 3.png");
  background-color: white;
  height: 75%;
  background-position: center;
  background-size: cover;
  color: #0f4c82;
  font-size: 1em;
  min-height: 700px;
}

.impressum .left-col {
  width: 90%;
}

.impressum .right-col {
  display: none;
}

/*
.contact-cta{
    background-color: map-get($map: $mycolors, $key: accentgray);
    color: white;
    text-decoration: none;
    padding: .3em 1.2em;
    font-size: 1.25em;
    border-radius: 5em;
    font-weight: bold;
    display: inline-block;
}
*/
@media only screen and (min-width: 768px) {
  .mobile-menu, .mobile-menu-exit {
    display: none;
  }
  .navbar .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 250px auto;
        grid-template-columns: 250px auto;
    -webkit-box-pack: unset;
        -ms-flex-pack: unset;
            justify-content: unset;
  }
  .navbar nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background: none;
    position: unset;
    height: auto;
    width: 100%;
    padding: 0;
  }
  .navbar nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .navbar nav a {
    font-size: 1.1em;
    padding: .1em 1em;
  }
  .navbar nav ul.primary-nav {
    margin: 0;
  }
  .navbar nav li.current a {
    font-weight: bold;
  }
  .navbar nav li.contact-cta a {
    border: 2px solid #909193;
    background: #909193;
    font-weight: bold;
    border-radius: 5em;
    color: white;
    font-size: 1.2em;
    margin-top: -.2em;
  }
  .navbar nav li.contact-cta a:hover {
    background: white;
    color: #909193;
    font-weight: bold;
  }
  .funding {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .funding .left-col {
    left: 25%;
  }
  .funding .right-col {
    float: right;
    max-width: 50%;
  }
  .impressum {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .impressum .left-col {
    width: 100%;
    max-width: 55%;
  }
  .impressum .right-col {
    float: right;
    max-width: 50%;
  }
}

@media only screen and (min-width: 1080px) {
  .container {
    width: 1080px;
    margin: 0 auto;
  }
  .hero, .thankyou, .funding {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .hero .left-col, .thankyou .left-col, .funding .left-col {
    left: 25%;
  }
  .hero .right-col, .thankyou .right-col, .funding .right-col {
    float: right;
    max-width: 50%;
  }
  .impressum {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .impressum .left-col {
    max-width: 50%;
  }
  .impressum .right-col {
    float: right;
    max-width: 50%;
  }
  .contacts .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .contacts .contact-left {
    width: 45%;
    padding-left: 4em;
  }
  .contacts .contact-left textarea {
    height: 32em;
  }
  .contacts .contact-right {
    width: 45%;
    padding-left: 4em;
  }
  .contacts .contact-right iframe {
    height: 500px;
  }
}

/* picture background properties
.hero-image {
    background-image: url("photographer.jpg"); // The image used 
    background-color: #cccccc; /* Used if the image is unavailable 
    height: 500px; /* You must set a specified height 
    background-position: center; /* Center the image 
    background-repeat: no-repeat; /* Do not repeat the image 
    background-size: cover; /* Resize the background image to cover the entire container 
  };



img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
};

<img src="paris.jpg" alt="Paris"> 


Fortunately, there’s a CSS-based solution. In essence, it’s a hack which applies the background image to a ::before or ::after pseudo element rather than the parent container. The pseudo element can then be transformed independently of the content.
Transforming the Background Only

The container element can have any styles applied, but it must be set to position: relative, since our pseudo element will be positioned within it. You should also set overflow: hidden unless you’re happy for the background to spill out beyond the confines of the container.

#myelement {
  position: relative;
  overflow: hidden;
}

We can now create an absolutely positioned pseudo element with a transformed background. The z-index is set to -1 to ensure it appears below the container’s content:

#myelement::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(background.png) 0 0 repeat;
  transform: rotate(30deg);
}




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