body * {
  hyphens: auto;
}




/*//////////////////////////////////////////// logo & nav bar ////////////////////////////////////////////////*/
 .navbar-brand-home	img		{
   width:225px;
   transition: width 500ms;
   height:auto;
   transform: translateY(0rem);
  }

  .top-nav-collapse .navbar-brand-home img {
    width:95px;
    transition: width 500ms;
    height:auto;
    transform: translate(-1rem, -0.5rem);
  }

  .top-nav-collapse {
    background: #949392;
  }

.navbar-custom li a	{
    letter-spacing: 0.03em;
    font-size: 1.75rem;
    color: rgb(255, 255, 255);
    font-weight: 600;
    opacity: .75;
    filter: alpha(opacity=30);
    text-transform:uppercase;
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }

.navbar-custom .nav li.active a {
    outline: none;
	opacity:1;
  	filter: alpha(opacity=100);
    background-color: #949392;
}
.top-nav-collapse li.active a:hover,
.top-nav-collapse li.active a:focus,
.top-nav-collapse li.active a:active {
    background: #54BBAB !important;
}
.top-nav-collapse li a:hover, .top-nav-collapse li a:focus, .top-nav-collapse li.active a, .top-nav-collapse li.active-subpage a {
  background: #54BBAB !important;
}

@media(max-width:992px) {
  .navbar-custom .container-wide 		{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .navbar-custom li a	{
    font-size: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .navbar-brand-home img				{
    width:56px !important;
    height:auto;
    transform: translate(-1rem, -0.5rem);
  }
  .hidden-li							{display:none!important;}
  .navbar-collapse, .navbar-header	{
    background:#949392 !important;
  }
  .top-nav-collapse li a:hover, .top-nav-collapse li a:focus, .top-nav-collapse li.active a, .top-nav-collapse li.active-subpage a {
    background: #54BBAB !important;
  }
}
@media (max-width: 758px), (max-width: 580px), (max-width:992px)  {
  .top-nav-collapse li a:hover, .top-nav-collapse li a:focus, .top-nav-collapse li.active a, .top-nav-collapse li.active-subpage a, .navbar-custom li a:hover, .navbar-custom li a:active, .navbar-custom li a:focus {
    background: #54BBAB !important;
  }
}


/*//////////////////////////////////////////// video ////////////////////////////////////////////////*/

button.playPause {
  padding: 10px 14px;
}

.full-screen-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
  }
  .full-screen-video-wrap > video {
    display: block;
    /* width: 100vw; */
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-53%, -50%);
    z-index: 1;
  }
  @media screen and (max-aspect-ratio: 1920/1080) {
    .full-screen-video-wrap > video {
      transform: translate(-50%, -50%);
      object-fit: cover;
      height: 100vh;
    }
  }
  /* @media screen and (min-aspect-ratio: 1920/1080) {
    .full-screen-video-wrap > video {
      width: 100%;
    }
  } */
  .extra-overlay {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/overlay_diagonal_dark.png) repeat;
    z-index: 2;
    overflow: hidden;
    opacity: 0.6;
  }
  @media (max-width: 580px) {
    .full-screen-video-wrap video {
      transform: translate(-50%, -68%);
      height: 36vh;
      object-fit: cover;

    }
  }
  @media (min-width:768px) {
    .full-screen-video-wrap video {
      transform: translate(-50%, -50%);
      min-height: 100%;
      min-width: 100%;
      object-fit: cover;
    }
  }
  /* .my-overlay-dark {
    position: relative;
    top: 0;
    left: 0;
    background: url(../img/overlay_diagonal_dark.png) repeat;
    z-index: 3;
    overflow: hidden;
  } */


  /*//////////////////////////////////////////// intro ////////////////////////////////////////////////*/
  .overlay-dark	{
    background: none;
  }

  .grey-wrap {
    position: absolute;
    z-index: 1;

  }

  .aligner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
    padding: 5rem;

  }

  .aligner-item-left {
    margin-right: auto;
    z-index: 3;
  }

  .aligner-item-right {
    z-index: 3;

  }

  #home {
    background: url(../img/20190308_Webseite_AbJetzt_Intro-BG_1800x1164.jpg) no-repeat center scroll;
    background-color: #ED6A53 !important;
  }
  .no-site {
    height: 100vh;
    width: auto;
    background-color: #ED6A53 !important;
  }
        @media (min-width:768px) {
            #home 						{
              height: 100%;
              background: url(../img/20190308_Webseite_AbJetzt_Intro-BG_1800x1164.jpg) no-repeat center scroll;
              background-color: #ED6A53 !important;
            }
            #home .carousel-wrapper		{padding-top: 30%;
                                        padding-bottom: 10%;}
        }
        @media (max-width:768px) {
            .intro-body,
            #home .carousel-wrapper 	{height:500px!important}
            #home .carousel-wrapper		{padding-top:50%;}
            #home {
              background: url(../img/20190308_Webseite_AbJetzt_-Mobile-BG_1200x776.jpg) no-repeat center scroll;
              background-color: #ED6A53 !important;
            }
        }
        @media (max-width: 580px) {
            .intro-body,
            #home .carousel-wrapper 	{height:460px!important}
            #home .carousel-wrapper 	{padding-top:30%;}
            #home	.carousel-inner		{padding-left:.5em;padding-right:.5em;}
            #home {
              background: none;/*url(../img/20190308_Webseite_AbJetzt_Tablet-BG_348x477.jpg) no-repeat center scroll !important; */
              background-color: #ED6A53 !important;
            }
            .aligner {
              flex-direction: column-reverse;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: flex-start;
            }
            /* .overlay-dark {
              display: none;      /* video in mobile */
            /*} */

        }
        /* @media screen and (max-aspect-ratio: 1920/1080) and (max-width: 690px){
          .full-screen-video-wrap > video {
            transform: translate(-50%, -50%);

            height: 100vh;
          }
        } */

/*//////////////////////////////////////////// sections ////////////////////////////////////////////////*/


.overlay-light {
    height: auto !important;
    min-height: 100vh !important;
}
.panel-body p {
    color: black;
}

#about h1, #newsletterPage h1 {
  margin-bottom: 0;
}

.full-screen {
  display: flex;

  min-height: 100vh;

}


@media(max-width: 580px) {
  .full-screen-padding-left-right {
    padding-left: 0;
    padding-right: 0;
  }
  .carousel-control .fa-chevron-left,
.carousel-control .icon-prev,
.carousel-control .icon-next {
  margin-left: -30px !important;
  }
}
@media (min-width:768px) {
  .full-screen-pading-top	{
    padding-top: 30px;
  }
  .full-screen-padding-left-right {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .full-screen {
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;

  }
}
@media(min-width: 1200px) {
  .full-screen-padding-left-right {
    padding-left: 25rem;
    padding-right: 25rem;
  }

}

.carousel-control .fa-chevron-left,
.carousel-control .fa-chevron-left,
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 50px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  font-size: 20px;
  opacity: .4;
  filter: alpha(opacity=40);
}

.carousel-control.left, .carousel-control.right {
  top: 50%;
}
.carousel-control-wide.right {
  right: 0;
  padding-left: 10rem;
}
.carousel-control-wide.left {
  left: 0;
  padding-right: 10rem;
}

/*//////////////////////////////////////////// blog all  ////////////////////////////////////////////////*/
.posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.post.item {
    width: 30rem;
}

.center-item {
  margin-left: auto;
  margin-right: auto;
}

.tag {
  margin: 2px;
}

.blog-label {
  font-weight: normal;
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.jmbt-blog {
  background: rgba(85, 101, 105, 0.1);
  margin-right: 14px;
  margin-left: 14px;
}

#blog-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/overlay_diagonal_light.png)repeat;
}

#blog-header h1 {
      /* font-size: 4.3em;
      font-weight: 800; */
      line-height: 1em;
      margin-bottom: 0;
      margin-top: 0;
      padding: 1.3em 0.5em;
}

.blog-post-escape {
  position: absolute;
  top: 4em;
  right: 3em;
  z-index: 100;
  font-size: 2em;
  color: #949392;
  border: solid 3px #949392;  
  border-radius: 25%;
  height: 1.5em;
  width: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-post-escape:hover {
  background: #556569;
  color: white;
  cursor: pointer;
}

/*//////////////////////////////////// blog cards /////////////////////////////////////////////////  */
/* #blog-link:hover {
  cursor: pointer;
  opacity: 0.8;
} */
#blog-link i {
  opacity: 0.5;
  visibility: hidden;
  transform: scale(0.5) translateY(20%);
}
.show-link-indicator {
  visibility: visible !important;
  animation: left-blog-link 1.8s infinite;
  animation-timing-function: ease-out;
}
.card-title {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 92%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.h-card {
  text-align: center;
  font-family: "Open Sans",Arial,sans-serif;
  font-size: 2.5em;
  letter-spacing: -0.7px;
  font-weight: 900;
  line-height: 1em;
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 3px;
  color: #ffffff;
  text-transform: uppercase;
}
.hover-h-card {
  transform: scale(3) translateY(80%);
  transition: all .3s ease-in-out;
}


/*//////////////////////////////////////////// about ////////////////////////////////////////////////*/
#about ul {
  text-align: left;
  list-style-position: inside;
}
.about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 90%;

}
.about-content {
  width: 60%;
  text-align: justify;
  /* hyphens: auto; */
}


/*//////////////////////////////////////////// footer ////////////////////////////////////////////////*/
.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.custom-footer {
font-family:"Open Sans",Arial,sans-serif;
}

#footer p {
  color: #000000;
  opacity: 1;
}

#footer #viewdetails a {
  color: inherit;
  text-decoration: underline;
}

#footer img {
  height: auto;
  width: 50rem;
}
@media (max-width: 768px) {
  #footer img {
    width: 40rem;
  }
}
@media (max-width: 580px) {
  #footer img {
    width: 28rem;
  }
}


/*//////////////////////////////////////////// datenschutz tab impressum ////////////////////////////////////////////////*/

#info-1, #info-2, #info-3, #info-4, #info-5, #info-6, #info-7, #info-8, #info-9, #info-10, #info-11, #info-12, #info-13, #info-14, #info-15, #info-16, #info-17, #info-18, #info-19, #info-20 {
  display: none;
}
.bumper {
  width: auto;
  height: 50px;
}

/*//////////////////////////////////////////// custom tab down for impressum ////////////////////////////////////////////////*/
.float-over-top	{
  /* position: relative;  */
  top:0;
  left:40px;
  z-index:99; }

.tab-down {
  position: absolute;
  border-bottom-right-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border: 0!important;
  padding-left: 1.25em;
  padding-right: 1.25em;
  text-transform: none;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
}
.tab-down  {
  margin-bottom: 0;
}
.tab-down-tertiary {

  color: #fff;
  height: 39px!important;
}
.tab-down-tertiary a {
  color: #fff;
}
.tab-down-tertiary:before {
  width: 20px;
  height: 20px!important;
  top: -6px;
  right: 179px;
  position: absolute;
  content: '';
  background-image: none;/* background-image: radial-gradient(circle at 0% 100%, rgba(204, 0, 0, 0) 14px, #556569 15px); */
  display: block;
}
.tab-down-tertiary:after {
  width: 20px;
  height: 20px;
  top: -6px;
  right: -14px;
  position: absolute;
  content: '';
  background-image: none;/* background-image: radial-gradient(circle at 0% 100%, rgba(204, 0, 0, 0) 14px, #556569 15px); */
  display: block;
}
@media (max-width: 580px) {
  .tab-down-tertiary {
    margin-top: 0;
  }
  .tab-down-tertiary:before {
    right: 179px;
  }
}


/*//////////////////////////////////////////// buttons ////////////////////////////////////////////////*/
.btn-xl {
  font-size: 1.75rem;
  padding: 10px 18px;
  border-width: 2.5px;
}
.btn-xl:hover, .btn-xl:focus {
  background: #54BBAB !important;
}

.btn-lg {
  font-size: 1.75rem;

}

.btn-custom {
  padding: 5px 10px;
  font-size: 1.75rem;
}

.btn-grey {
  background-color: #556569;
  transition: .5s;
  color: #fff;
  letter-spacing: 0.03em;
}
.btn-grey:hover {
  background-color: #949392;
  color: #fff;
}
.btn-filter {
  transition: .5s;
  color: #fff;
  letter-spacing: 0.03em;
  margin: 5px;
}
.btn-green:hover {
  background-color: #C8D400;
  color: #fff;
}

@media (max-width: 380px) {
  .btn-xl {
    font-size: 1.2rem;
    padding: 10px 18px;
    border-width: 2.5px;
  }
}

/*//////////////////////////////////////////// links //////////////////////////////////////////////////////*/
.content-misc a {
  text-decoration: underline;
  color: inherit;
}
.content-misc a:hover, .content-misc a:active, .content-misc a:focus{
  color: #556569 !important;
  /* opacity: 0.7; */
}
.no-deco {
  text-decoration: none !important;
}

/*//////////////////////////////////////////// text styles ////////////////////////////////////////////////*/
p {
  font-size: 1.5rem;
}
h1, .bg-brand-secondary-dark h1 {
  color: #556569 !important;
}
/* .bg-brand-secondary-dark h2, .bg-brand-secondary-dark p {
  color: #000000 !important;              schrift für orange hintergrund
} */

label, .navbar-custom a, .nav-tabs .large a, .text-callout,
.text-big, .circle-text, h2, h4	  {
	font-family:"Open Sans",Arial,sans-serif;
}

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

.block-text {
  text-align: justify;
}

.no-transform {
  text-transform: none !important;
}

.text-big				{font-size:5em;font-weight:800;margin:0; line-height:.9em!important;text-transform:uppercase;}

@media (min-width: 980px) {
  p {
    font-size: 1.7rem;
  }
   #about li {
    font-size: 1.7rem;
  }
}

@media  (max-width: 980px) {
    .text-big							{font-size:4em;}
    }
@media  (max-width: 768px) {
    .text-big							{font-size:3em;}
    h1 								   {font-size:6.5em !important}
    h2								   {font-size:2em !important}
    .medium-headline     {font-size: 3em !important;}
}
@media  (max-width: 580px) {
    #contact-toggle h3,
    #contact-toggle .fa 			   {font-size:1.15em;}
    .text-big			  			   {font-size:2.5em;}
    .text-xl						   {font-size:6em;}
    h1 								   {font-size:5em !important}
    h2								   {font-size:1.3em !important}
}
@media  (max-width: 480px) {
  .medium-headline {
    font-size: 2em !important;
  }
}

.all-caps {
  text-transform: uppercase;
}
.case-sensitive {
  text-transform: none;
}

.big-headline {
  font-size: 8em;
}
.medium-headline {
  font-size: 5em;
}
.smaller-subheadline {
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.custom-subhead {
  font-size: 1.9rem;
  font-weight: 600;
  text-transform: uppercase;
}

.nav-element {
  letter-spacing: 0.03em;
  font-size: 1.75rem;
  /* font-weight: 550; */
  opacity: 0.75;
}
.nav-element:hover {
  opacity: 0.3;
  transition: 500ms;
}

@media  (max-width: 580px) {
  .nav-element {
    font-size: 1.5rem;
    font-weight: 500;

  }
}

.nav-element-small {
  /* color: #ffffff; */
  color: #000000;
  opacity: 0.75;
  text-decoration: underline;
  transition: 500ms;
}
.nav-element-small:hover {
  opacity: 0.3;
  transition: 500ms;
}

input::placeholder {
  font-size: 1.5rem;
}

    /*divider*/
.accent-rule-short {
  border-top: 2px solid;
  padding-bottom: 1em;
}

.bg-white .accent-rule-short {
  border-top: 2px solid  !important;
}



/*//////////////////////////////////////////// J's fonts.. ////////////////////////////////////////////////*/
@font-face {
  font-family: "CanvasScript";
  src:  url(../fonts/CanvasScript-Reg.otf) format("opentype");
}

@font-face {
  font-family: "RedBright";
  src:  url(../fonts/RedBright.woff);
}

.canvas-script-font {
  font-family: "CanvasScript", Arial, sans-serif;
}
.red-bright-font {
  font-family: "RedBright", serif;
  font-weight: 200;
}


/*//////////////////////////////////////////// custom colors ////////////////////////////////////////////////*/
.custom-green {
  color: #C8D400; 
}
.custom-blue {
  color: #00528C;
}
.custum-purple {
  color: #522583;
}
.custom-orange {
  color: #ED6A53; 
}
.custom-turquoise {
  color: #54BBAB; 
}
.custom-yellow {
  color: #FFE60B; 
}
.custom-dark-grey {
  color: #556569;
}
.custom-light-grey {
  color: #949392; 
}
.custom-black {
  color: #000000;
}
.custom-white {
  color: #ffffff !important;
}
.custom-magenta {
  color: #d4058d;
}

.custom-green-background {
  background: #C8D400;
}
.custom-blue-background {
  background: #00528C;
}
.custom-purple-background {
  background: #522583;
}
.custom-orange-background {
  background: #ED6A53;
}
.custom-turquoise-background {
  background: #54BBAB;  
}
.custom-yellow-background {
  background: #FFE60B;
}
.custom-dark-grey-background {
  background: #556569;
}
.custom-light-grey-background {
  background: #949392;
}
.custom-magenta-background {
  background: #d4058d;
}


/*//////////////////////////////////////////// padding & margin ////////////////////////////////////////////////*/
.small-padding-left {
  padding-left: 2rem;
}
.big-padding-left {
  padding-left: 10rem;
}
.small-padding-right {
  padding-right: 2rem;
}
.big-padding-right {
  padding-right: 10rem;
}

.small-padding-top {
  padding-top: 0.8rem;
}
.medium-padding-top {
  padding-top: 4rem;
}
.big-padding-top {
  padding-top: 10rem;
}

.small-padding-bottom {
  padding-bottom: 0.5rem;
}
.medium-padding-bottom {
  padding-bottom: 5rem;
}

/*//////////////////////////////////// media queries //////////////////////////////////////////////////////  */

@media (max-width: 500px) {
  #blog-link i {
    display: none;
  }
  .about-content {
    width: 90%;
  }
}

@media (max-width: 1050px) {
  .blog-post-escape {
    top: 2.5em;
    right: 1em;
  }
}

/*//////////////////////////////////// annimations //////////////////////////////////////////////////////////  */

@keyframes left-blog-link {
  0%   { 
    opacity: 0.1; 
  }
  50% { 
    opacity: 0.8; 
  }
  100% { 
    opacity: 0.1; 
  }
}