body {
  overflow-x: hidden;
background-color: #fff!important;
    color: #000!important;
      font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 200;
  letter-spacing: 0.075rem;
}

* {
  box-sizing: border-box;
}


p {   line-height: 1.5;   font-size: 1.2rem; letter-spacing: 0; }

a, a:focus, a:active { color: #000; text-decoration: none; }
a:hover  {color: #5a87dc; text-decoration: underline; }
a:visited {color: #000; text-decoration: none; }

.right-center { text-align: right; }
.left-center { text-align: left; }

@media (max-width: 767px) {
.right-center, .left-center { text-align: center; }
}

.m-right { margin-right: 1em; }
.m-left { margin-left: 1em; }

@media (max-width: 767px) {
.m-right { margin-right: 0; }
.m-left { margin-left: 0; }
}

.team-name { font-weight: 300;  line-height: 1.1;padding-top: 0.5em;}
.team-bild { width: 80%; margin: 0 auto;display: flex;}
.deine-vorteile { text-align: center; list-style-type: none;line-height: 1.5;font-size: 1.2rem;letter-spacing: 0;padding-left: 0;}

.no-margin { margin-left: 0; margin-right: 0; }
.no-padding { padding-left: 0; padding-right: 0; }

.kontakt-item { text-align: center; margin: 0 auto; padding: 2rem; }
.kontakt-item p {  }
.kontakt-item a { color: #fff; }
.kontakt-item a:hover { text-decoration: none; }
.kontakt-joblink { font-size: 5rem; line-height: 1; font-family: "Univers 39 Thin Ultra Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif; }


.jobwrapper { }

.lila { color: #5a87dc; }
.black { color: #000; }
.white { color: #fff; }
.bg-lila { background: #5a87dc; }
.bg-black { background: #000; }

  
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
    font-family: "Univers 39 Thin Ultra Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1;
}

.versal-icon { height: 100%; float: right; width: 3rem;padding-bottom: 0.8rem;padding-top: 0.2rem;}
.text-werte { letter-spacing: 0.075rem; }


.display-1 { line-height: 0.9; }
h1, h2 { padding-bottom: 2rem; }
h3 { font-size: 1.5rem; }
.table { color: #000; }

.button { display: inline-flex; font-size: 2rem; background: #fff; color: #5a87dc; border: 3px solid #5a87dc; border-radius: 10rem; padding: 0.25rem 2rem; margin-top: 2rem; }
.button:hover, .button:focus { background: #5a87dc; color: #fff; border-color: #5a87dc; text-decoration: none; }

.hunds-button { border: 4px solid #5a87dc;  padding: 1rem; color: #5a87dc!important;;  text-transform: uppercase;  font-size: 1.2rem; margin-top: 1rem; display: inline-block; }
.hunds-button:hover, .hunds-button:active { background: #5a87dc; color: #fff!important; text-decoration: none; }

.hunds-bewerben-button { border: 4px solid #fff;  padding: 1rem;  color: #fff!important;  text-transform: uppercase;  font-size: 1.2rem; margin-top: 1rem; display: inline-block; }
.hunds-bewerben-button:hover, .hunds-bewerben-button:active { background: #fff; color: #000!important; text-decoration: none; }

.sm-icon { padding: 1rem; }

.slogan { color: #fff;  text-transform: uppercase;  text-align: right;   font-size: 2rem;  font-family: "Univers 39 Thin Ultra Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0 2rem 3rem 0;}
.JobSignet { height: 24rem; max-width: 100%; display: flex; /*! margin: 0 auto; */}

@media (max-width: 767px) {
  .JobSignet { margin: 0 auto; }
}

.solo-headline { font-size: 4rem; line-height: 1.3; }
.solo-headline a:hover, .solo-headline a:focus { color: #5a87dc; text-decoration: none; }
.JobHeadline { font-size: 6rem; line-height: 1; white-space: nowrap; }
.KennenlernenSignet { max-height: 14rem; }
.KontaktSignet { height: 10rem; }
.JobKontakt { font-size: 6rem; line-height: 1; font-family: "Univers 39 Thin Ultra Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.HeaderSignet {  width: 25%; margin-top: 6rem;margin-bottom: 3rem;max-height: 14rem;}

/* NAVIGATION */

#offcanvasNavbar { width: 100%; background: #000;}
.NavbarSignet { display: block; margin: 6rem auto 2rem auto; max-height: 14rem;}
.MastheadLogo { width: 50%; display: block; margin: 0 auto 2rem auto; }

.nav-icons a {  font-size: 3rem;  color: #5a87dc; padding-left: 2rem; padding-right: 2rem;}
.nav-icons a:hover {  color: #fff; }


#mainNav {
  /*! padding-top: 1rem; */
  /*! padding-bottom: 1rem; */
  /*! background-color: #000; */
   font-family: "Univers 39 Thin Ultra Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#mainNav .navbar-toggler {
  padding: 0 0 0 8px;
  font-size: 1rem;
  color: #f00;
  text-transform: uppercase;
  border: none;
  box-shadow: 0 0 0 0!important;
  width: 24px;
}


#mainNav .navbar-nav .nav-item .nav-link {
  font-size: 4rem;
  color: #fff;
  text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-top: 2px solid #fff;
  line-height: 110%;
  width: 75%
}

#mainNav .nav-last-item {
    border-bottom: 2px solid #fff;
    margin-bottom: 4rem;
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #5a87dc; text-decoration: none;
}

@media (min-width: 768px) {
  #mainNav .navbar-nav .nav-item .nav-link {
width: 50%;  
}
}
  

@media (min-width: 992px) {
  #mainNav {
    /*! padding-top: 1.5rem; */
    /*! padding-bottom: 1.5rem; */
    /*! transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out; */
  }
  
  #mainNav .navbar-brand {
  }
    
  #mainNav .navbar-brand img {
  }
    
  #mainNav.navbar-shrink {
  }
    
  #mainNav.navbar-shrink .navbar-brand {
  }
    
#mainNav.navbar-shrink .navbar-brand img {
  }
}

@media (min-width: 1200px) {

    #mainNav {
    /*! padding-top: 1rem; */
    /*! padding-bottom: 1rem; */
    /*! transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out; */
  }
  #mainNav .navbar-brand img {
  }
}

.masthead .navbar-nav .nav-item .nav-link {
      font-size: 4rem;
      color: #000;
      text-align: center;
    text-transform: uppercase;
    margin-left: 15%;
    margin-right: 15%;
    border-bottom: 2px solid #000;
       font-family: "Univers 39 Thin Ultra Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
      width: 75%;
      margin: 0 auto;
      padding: 0;
      line-height: 1.3;
}


.masthead .navbar-nav .nav-item:last-of-type .nav-link {
    border-bottom: none;
}

.masthead .navbar-nav .nav-item .nav-link.active, .masthead .navbar-nav .nav-item .nav-link:hover {
  color: #5a87dc; text-decoration: none;
}

@media (min-width: 768px) {
  .masthead .navbar-nav .nav-item .nav-link {
 width: 50%;
  }  
}
    
    
/* NAVI-TOGGLER */

.toggler-container {
  border-radius: 0;
  position: absolute;
  top: 3rem;
  left: 3rem;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  background: #5a87dc;
  z-index: 3000;
}

.toggler {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  cursor: pointer;
}

.toggler span {
  display: block;
  width: 100%;
  height: 0.15rem;
  background: #fff;
  transition: all .3s;
  position: relative;
}

.toggler span + span {
  margin-top: 0.25rem;
}

.active span:nth-child(1) {
  animation: ease .7s top forwards;
}

.not-active span:nth-child(1) {
  animation: ease .7s top-2 forwards;
}

.active span:nth-child(2) {
  animation: ease .7s scaled forwards;
}

.not-active span:nth-child(2) {
  animation: ease .7s scaled-2 forwards;
}

.active span:nth-child(3) {
  animation: ease .7s bottom forwards;
}

.not-active span:nth-child(3) {
  animation: ease .7s bottom-2 forwards;
}

@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 0.4rem;
    transform: rotate(0);
  }
  100% {
    top: 0.4rem;
    transform: rotate(45deg);
  }
}

@keyframes top-2 {
  0% {
    top: 0.4rem;
    transform: rotate(45deg);
  }
  50% {
    top: 0.4rem;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}

@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 0.4rem;
    transform: rotate(0);
  }
  100% {
    bottom: 0.4rem;
    transform: rotate(135deg);
  }
}

@keyframes bottom-2 {
  0% {
    bottom: 0.4rem;
    transform: rotate(135deg);
  }
  50% {
    bottom: 0.4rem;
    transform: rotate(0);
  }
  100% {
    bottom: 0rem;
    transform: rotate(0);
  }
}

@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}



/* ICON-NAV */

.icon-nav { 
	position: fixed;
	top: 7rem;
	right: 0;
	padding: 1rem;
	z-index: 1000;
	overflow: hidden;
	letter-spacing: 0;
}

.icon-nav ul {
	position: relative;
	right: -100%;
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
    list-style-image: none;
}

.icon-nav ul li a {
	position: relative;
	right: 3rem;
	display: inline-block;
	background: #000;
	color: #fff;
    border: 1px solid #000;
	padding: 0.25em 0.5em;
	width: 110%;
}

.icon-nav ul li a:hover {
	right: 100%;
	color: #5a87dc;
    border: 1px solid #5a87dc;
	text-decoration: none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.icon-nav-text {
	padding-left: 2rem;
	font-size: 1.5rem;
	display: inline-block;
}



/* ACCORDION */
.accordion { }
.accordion-header { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.accordion-body { font-size: 1.2rem; letter-spacing: 0; }
.accordion-item, .accordion-button { border-radius: 0!important; color: #000!important;  }
.accordion-item { border: none; border-bottom: 1px solid #000; }
.accordion-item h2 { padding-bottom: 0; }
.accordion-button { display: flex; /*! text-align: center; */ font-size: 1.5rem; text-transform: uppercase; font-weight: 200!important;;justify-content: space-between;}
.accordion-button:focus {  box-shadow: none; }
.accordion-button:not(.collapsed) { color: #000!important; border-bottom: none; background: none; }
.accordion-button::after { display: none; }

.accordion > .card { border: none;  border-bottom: 1px solid #222!important; border-radius: 0; }
.accordion .card-header { background: none; border: none; padding: .75rem 1.25rem .75rem .25rem;  }
.accordion > .card:last-child { border: none!important; }

.accordion-icon { rotate: 90deg; color: #5a87dc; transition: rotate 0.3s ease-in-out; height: 2rem; }
.collapsed > .accordion-icon { rotate: 0deg; }
.accordion-button-text { padding-right: 1rem; }


/* ICONS */

.fi { width: 100%; fill: #fff; height: 15rem; }



/* MODAL */
.modal-content { width: 95%!important; margin: 0 auto; background: rgba(255,255,255,0.9); border: 1px solid #000; }

@media (min-width: 768px) {
    .modal-content { width: 75%!important; }
}

.btn-modal { background-color:#000; border-color:#fff; color: #fff;}
.btn-modal:hover, .btn-modal:active, .btn-modal:focus  { background-color:#5a87dc; border-color: #5a87dc; color: #000; }

.modal-body h2 {
    font-size: 4rem!important; text-transform: uppercase;
}

.modal-dialog {
  margin: 1rem auto;
  max-width: 100vw;
}

.modal-content {
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}

.portfolio-modal .close-modal {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  background-color: transparent;
}
.portfolio-modal .close-modal:hover {
  color: #5a87dc;
}


.page-section {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  section {
    padding: 9rem 0;
  }
}

::-moz-selection {
  background: #5a87dc;
  text-shadow: none;
}

::selection {
  background: #5a87dc;
  text-shadow: none;
}

img::-moz-selection {
  background: transparent;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

.btn-xl {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.btn-social {
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 100%;
}



/* HEADER */
header.masthead {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  text-align: center;
  background-image: url("../img/hunds-header-bg.webp");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center bottom;
  background-size: cover;
}
header.masthead .masthead-subheading {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5rem;
  margin-bottom: 25px;
}
header.masthead .masthead-heading {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 3.25rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  header.masthead {
    /*! padding-top: 17rem; */
    /*! padding-bottom: 12.5rem; */
  }
  header.masthead .masthead-subheading {
    font-size: 2.25rem;
    font-style: italic;
    line-height: 2.25rem;
    margin-bottom: 2rem;
  }
  header.masthead .masthead-heading {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 4.5rem;
    margin-bottom: 4rem;
  }
}


#kennenlernen {
  padding-top: 3rem;
  padding-bottom: 1rem;
  text-align: center;
  background-image: url("../img/hunds-header-bg.webp");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

#unsere-werte { background: #000; color: #fff; }
#bewerbungsformular { background: #5a87dc; color: #fff; }


#kontakt { background: #5a87dc; color: #fff; }


.footer {
    padding-top: 0.5rem;
    border-top: 1px solid #000; 
  text-align: center;
  font-size: 0.9rem;
}