/* **********************************
Farben 
************************************* */


/* As hex codes */

.color-primary-0 { color: #243382 }	/* Main Primary color */
.color-primary-1 { color: #5A67AB }
.color-primary-2 { color: #3B4995 }
.color-primary-3 { color: #14226B }
.color-primary-4 { color: #08134E }

.color-secondary-1-0 { color: #9C1B5D }	/* Main Secondary color (1) */
.color-secondary-1-1 { color: #CD5F97 }
.color-secondary-1-2 { color: #B33876 }
.color-secondary-1-3 { color: #800A46 }
.color-secondary-1-4 { color: #5E0030 }

.color-secondary-2-0 { color: #7AB01E }	/* Main Secondary color (2) */
.color-secondary-2-1 { color: #B9E76A }
.color-secondary-2-2 { color: #96C93F }
.color-secondary-2-3 { color: #5F900B }
.color-secondary-2-4 { color: #436A00 }

.color-complement-0 { color: #BE9121 }	/* Main Complement color */
.color-complement-1 { color: #F9D373 }
.color-complement-2 { color: #D9AE44 }
.color-complement-3 { color: #9C720C }
.color-complement-4 { color: #735200 }



/* As RGBa codes */

.rgba-primary-0 { color: rgba( 36, 51,130,1) }	/* Main Primary color */
.rgba-primary-1 { color: rgba( 90,103,171,1) }
.rgba-primary-2 { color: rgba( 59, 73,149,1) }
.rgba-primary-3 { color: rgba( 20, 34,107,1) }
.rgba-primary-4 { color: rgba(  8, 19, 78,1) }

.rgba-secondary-1-0 { color: rgba(156, 27, 93,1) }	/* Main Secondary color (1) */
.rgba-secondary-1-1 { color: rgba(205, 95,151,1) }
.rgba-secondary-1-2 { color: rgba(179, 56,118,1) }
.rgba-secondary-1-3 { color: rgba(128, 10, 70,1) }
.rgba-secondary-1-4 { color: rgba( 94,  0, 48,1) }

.rgba-secondary-2-0 { color: rgba(122,176, 30,1) }	/* Main Secondary color (2) */
.rgba-secondary-2-1 { color: rgba(185,231,106,1) }
.rgba-secondary-2-2 { color: rgba(150,201, 63,1) }
.rgba-secondary-2-3 { color: rgba( 95,144, 11,1) }
.rgba-secondary-2-4 { color: rgba( 67,106,  0,1) }

.rgba-complement-0 { color: rgba(190,145, 33,1) }	/* Main Complement color */
.rgba-complement-1 { color: rgba(249,211,115,1) }
.rgba-complement-2 { color: rgba(217,174, 68,1) }
.rgba-complement-3 { color: rgba(156,114, 12,1) }
.rgba-complement-4 { color: rgba(115, 82,  0,1) }


.bg-primary-0 {
  background-color: #243382 !important;
}
.bg-primary-1 {
  background-color: #5A67AB !important;
}
.bg-secondary-1-0 {
  background-color: #9C1B5D !important;
}
.bg-secondary-1-1 {
  background-color: #CD5F97 !important;
}
.bg-secondary-2-0 {
  background-color: #7AB01E !important;
}
.bg-secondary-2-1 {
  background-color: #B9E76A !important;
}
.bg-complement-0 {
  background-color: #BE9121 !important;
}
.bg-complement-1 {
  background-color: #F9D373 !important;
}

.btn-primary-0 {
  color: #fff;
  background-color: #243382;
  border-color: #14226B;
}
.btn-secondary-1-0 {
  color: #fff;
  background-color: #9C1B5D;
  border-color: #800A46;
}
.btn-secondary-2-0 {
  color: #fff;
  background-color: #7AB01E;
  border-color: #5F900B;
}
.btn-complement-0 {
  color: #fff;
  background-color: #BE9121;
  border-color: #9C720C;
}


/* **********************************
Schriften 
************************************* */

.petit {
  font-size: 0.75rem;
}

h2.ombre {
  text-shadow: 3px 3px 4px #000;
}

p.ombre {
  text-shadow: 3px 3px 4px #000;
}


/* **********************************
Allgemeines 
************************************* */

.bg-image { 
  height: 100vh; 
  background-image: url('./home_background.jpg'); 
  background-size: cover;  
  background-repeat: no-repeat;
  background-attachment: fixed;
} 

a.weiss {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.mitte { 
  display: flex;
  align-items: center;
}

/* **********************************
Navi 
************************************* */

/* Show it is fixed to the top */
body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

.navbar-lang {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
  font-size: 0.5rem;
  text-decoration: none;
}

/* **********************************
Footer 
************************************* */

.mein-footer {
    padding: 2.5rem 0;
    color: #727272;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
  }

.mein-footer p:last-child {
    margin-bottom: 0;
  }

ul.footer {
    list-style-type: none;
}


.footer-link {
  display: block;
  padding: 0.5rem 1rem;
  color: black;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.footer-link:hover, .footer-link:focus {
  color: #0a58ca;
}

.footer-link.active {
  color: #afca01;
}

.footer-link.disabled {
  color: #5b5b5b;
}

.footer-unten {
  text-decoration: none;
  color: black;
}

.footer-unten:hover, .footer-unten:focus {
  text-decoration: none;
  color: #dc3545;
}


/* **********************************
Features 
************************************* */

.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #fff;
  border-radius: .75rem;
}

.icon-link {
  display: inline-flex;
  align-items: center;
}
.icon-link > .bi {
  margin-top: .125rem;
  margin-left: .125rem;
  transition: transform .25s ease-in-out;
  fill: currentColor;
}
.icon-link:hover > .bi {
  transform: translate(.25rem);
}

.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  border-radius: .75rem;
}

.rounded-4 { border-radius: .5rem; }
.rounded-5 { border-radius: 1rem; }

.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }

.card-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


/* **********************************
Video 
************************************* */

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}



/* **********************************
Carousel 
************************************* */

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 7.5rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}

img.crop-center {
  height: 32 rem;
  width: 100% !important;
  object-fit: cover;
  object-position: top center;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}