/* ========================================================================
 * Styling DSM1
 * ======================================================================== */
@import url('https://fonts.googleapis.com/css?family=Assistant:400,600,700,800|Open+Sans+Condensed:300|Ubuntu+Condensed|Work+Sans');
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
@import url('https://fonts.googleapis.com/css?family=Major+Mono+Display');

html,body {padding: 0;margin: 0;width: 100%;height: 100%;}
body {position: relative;overflow-x: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;height: 100%;
/*perspective: 1px;overflow-y: scroll;*/
}

.oben{background-color: #f5f5f5;}
.slogan{padding-top: 25px;}
.slogan h1 {color: #675345;font-size: auto;padding-left: 0px;}
.nav-link {font-size: 1.2rem;}
.img-gleich{object-fit: cover;object-position: top;width: 100%;height: 712px;max-height: 712px;margin-bottom: 1rem;}

/* ================= Sticky ================================================== */
.test {position:relative;opacity: 0;}
.test.logosm {position: static;opacity: 1;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}/*.leiste {background-color: rgb(220,160,140,0.1) !important;opacity: 0;}*/
.leiste.sicht {background: rgba(0, 0, 0, 1);-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}

.navbar{padding: 0rem 0rem;}
.navbar-nav .nav-item a.nav-link {/*background-color: #F8F9FA;font-family: 'Major Mono Display', monospace;*/padding: 10px;font-weight: 600;}
nav.leiste a.js-scroll-trigger:hover {text-decoration: none;}
h3.logos:hover {color: rgba(211, 251, 246, 0.9) !important;}
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
/*    font-family: 'Major Mono Display', monospace;*/
    color: rgba(235, 101, 26,1) !important;background: none !important;text-decoration: underline;
}
.navbar-nav .nav-item a.nav-link:hover {background-color: none;color: rgb(237, 106, 31) !important;padding: 10px;}
h1.logo,h3.logo,h4.logo, h4.modal-title {font-family: 'Major Mono Display', monospace;font-size: 3rem !important;}
main.inner {padding-top: 12rem;}

@media (max-width:768px)  {
    a.logo img{width:17rem;}
    main.inner {padding-top: 3rem;}
    .h1, h1 {font-size: 1.5rem;}
    h1.logo,h3.logo,h4.logo  {font-size: 1.5rem !important;}
    nav .container {padding-right: 15px !important;padding-left: 15px !important;}
    .heading.py-5 {padding-bottom: 0rem !important;padding-top: 0rem !important;}
}
@media (max-width:360px)  {
    a.logo img{width:17rem;}
    main.inner {padding-top: 3rem;}
    .h1, h1 {font-size: 1.2rem;}
    h1,h3,h4  {font-size: 1.2rem !important;}
    nav .container {padding-right: 15px !important;padding-left: 15px !important;}
    .heading.py-5 {padding-bottom: 0rem !important;padding-top: 0rem !important;}
}
.navbar-dark .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}
.navbar-toggler {border: 0px solid transparent;}

.vh-100 {min-height:100vh;}

a.toplogo:hover {text-decoration: none;color: #2B8693 !important;}
h1.toplogo{font-family: 'Kaushan Script', cursive;}

.dropdown-menu {position: absolute;top: 100%;left: 0;z-index: 1000;display: none;float: left;min-width: 10rem;padding: .5rem 0;margin: 0rem 0 0;font-size: 1rem;color: #212529;text-align: left;list-style: none;background-color: #ececec;background-clip: padding-box;border: 0px solid rgba(0,0,0,.15);border-radius: 0rem;}
.dropdown-item.active, .dropdown-item:active {color: #fff;text-decoration: none;background-color: #2B8693;}
.dropdown-divider {height: 0;margin: .5rem 0;overflow: hidden;border-top: 1px solid #c6c7c8;}

/*.sticky-wrapper{margin-top: 20px !important;}*/
.jumbotron {padding: 3rem 0rem 0rem 0rem;}
.content {padding: 3em 0;}
.footer {border-top: 5px solid #eee;padding: 3em 0;margin-top: 3em;text-align: center;}

.heading {background: #485563;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #29323c, #485563);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}



a.text-warning{color:#EB651A !important;}
a.text-warning:focus, a.text-warning:hover {color: #007BFF !important;}
.text-warning{color:#EB651A !important;}
.text-info{color:#2B8693 !important;}
.bg-info {background-color:#48748C !important;}
.bg-primary{background-color: #37596b !important;}/*2B8693 #9198cc*/
.bg-footer{background-color: #37596b !important;}/*2B8693 #9198cc*/
.bg-footer-end{background-color: #000000 !important;}
.bg-success{background-color: rgba(69, 143, 159, 0.5) !important;}/*#2B8693*/
.bg-rosa{background-color: rgba(220, 97, 90, 0.9) !important;}
.bg-violett{background-color: rgba(149, 161, 173,0.9) !important;}
.bg-gelb {background-color: rgba(253, 234, 197,1.0);}
.bg-thema{background-color: #D9DBD4 !important;}
.bg-rot{background-color: #ea8888;}
.bg-grau{background-color: #686868;}
.bg-light {background-color: #f0f0f0 !important;}
.bg-logo-gelb{background-color: #EB651A !important;}
.bg-dark-footer{background-color: rgba(35, 38, 41,1);}
.h-60{padding-top: 5rem;padding-bottom: 5rem;}

/*.btn.btn-primary{background-color: rgba(86, 144, 165,1.0) !important;border-color: #666666;}*/
.btn.btn-success{background-color: #2B8693 !important;border-color: #666666;}
.btn-success.focus, .btn-success:focus { box-shadow: 0 0 0 .2rem rgba(129, 129, 129, 0.5);}
.text-success{color:#2B8693 !important;}
.card-footer {border-top: 0px solid rgba(0,0,0,.125) !important;}
#myBtn {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;font-size: 18px;border: none;outline: none;/*background-color: #2B8693;color: white;*/cursor: pointer;padding: 4px 8px 7px;border-radius: 4px;}
.bg-dunkel {background-color: #325162 !important;}

.card-post:hover {box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}


.portfolioFilter ul li.nav-item{padding:10px;}
/* ------------------ Modal ------------------ */
.modal-content {background-color: #999999;border: 1px solid rgba(252, 46, 46, 0.2);border-radius: 0rem;outline: 0;}
.close {font-size: 3rem;}
.shadow-lg {box-shadow: 0 1rem 3rem rgb(0, 0, 0) !important;}

.carousel-caption {right: 35%;left: 35%;}
.carousel-caption {width: auto;bottom: 10%;background-color: rgba(72, 116, 140,.5);/*opacity: .2;*/}
.gradient-overlay-start {overflow: hidden;/*position: relative;*/ }
.gradient-overlay-start > *:first-child:before {content: '';width: 100%;height: 100%;display: block;position: absolute;left: 0px;top: 0px;pointer-events: none;/*background: linear-gradient(to bottom right, rgba(178, 213, 173,.1) , transparent 80%);*/background: linear-gradient(to bottom right, rgba(178, 213, 173,0.1), transparent 80%);}

/************************************ Cookies ******************************************************/
.cookiealert {position: fixed;bottom: 0;left: 0;width: 100%;margin: 0 !important;z-index: 999;opacity: 0;border-radius: 0;/*background: #212327 url("img/cubes.png");*/background: #212327;transform: translateY(100%);transition: all 500ms ease-out;color: #ecf0f1;}
.cookiealert.show {opacity: 1;transform: translateY(0%);transition-delay: 1000ms;}
.cookiealert a {text-decoration: underline}
.cookiealert .acceptcookies {margin-left: 10px;vertical-align: baseline;}

/*.oberflaeche a.active {color: #007bff ! important; }*/

.opaque-overlay {overflow: hidden;position: relative; > *:first-child:before {content: '';width: 100%;height: 100%;display: block;position: absolute;left: 0px;top: 0px; pointer-events:none;background: rgba(52, 58, 64, 0.5);}
}
/*
.opaque-overlay {overflow: hidden;position: relative; }
.opaque-overlay > *:first-child:before {content: '';width: 100%;height: 100%;display: block;position: absolute;left: 0px;top: 0px;pointer-events: none;background: rgba(52, 58, 64, 0.25); }
*/
p.menu span{float: right;}
.card-deck span {display: none;}

@media (min-width:1200px){
    .card-deck span:nth-of-type(5n) {display: block;width: 100%;}
}
@media (min-width:992px) and (max-width: 1199px) {
   .card-deck span:nth-of-type(4n) {display: block;width: 100%;}
}
@media (min-width:768px) and (max-width: 991px) {
    .card-deck span:nth-of-type(3n) {display: block;width: 100%;}
}
@media (min-width: 576px) and (max-width: 767px) {
    .card-deck span:nth-of-type(2n) {display: block;width: 100%;}
}
/* add css for margin fix -- this will not be needed after beta */
.card-deck .card {margin-left: 15px;margin-right: 15px;}
.card-deck .card:not(:last-child) {margin-right: 15px;}
.card-deck .card:not(:first-child) {margin-left: 15px;}


/*#kontakt h3{font-family: 'Major Mono Display', monospace;}*/

/*************** ModalBox **************/

/*.modal-content {position: relative;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;width: 100%;pointer-events: auto;background-color: #929b9e !important;background-clip: padding-box;border: 1px solid rgba(0,0,0,.2);border-radius: 0rem;outline: 0;}
.modal-header {
display: -ms-flexbox;display: flex;-ms-flex-align: start;align-items: flex-start;-ms-flex-pack: justify;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #9b9b9b;border-top-left-radius: .3rem;border-top-right-radius: .3rem;}
.modal-footer {display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;-ms-flex-pack: end;justify-content: flex-end;padding: 1rem;border-top: 0px solid #e9ecef;}*/.para {background : url('../../img/uebermich2.jpg') no-repeat center center fixed !important;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

/***********************************************************************************
parallax
************************************************************************************/
#produkte {background : url('../../img/uebermich3.jpg') 50% 0 fixed;height: auto; margin: 0 auto;width: 100%;position: relative;padding: 100px 0;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;}
#produkte > *:first-child:before {content: '';width: 100%;height: 100%;display: block;position: absolute;left: 0px;top: 0px;pointer-events: none;background: linear-gradient(to bottom right,rgba(2, 2, 2, 0.7),rgba(18, 18, 18, 0.5));}

.drueber{
/*background : url('../../img/bahn.jpg');  */
/*100% 0 fixed*/
background-repeat: no-repeat;background-attachment: fixed;  /* background-position: center top; */
/*height: auto;*/ 
height: 50vh;
margin: 0 auto;width: 100%;/**//*padding-top: 200px 0;*/
-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;/**/
display: flex;flex: 1 0 auto;position: relative;
z-index: -1;justify-content: center;align-items: center;
/*  transform: translateZ(1px) scale(1);*/
perspective: 1px;transform-style: preserve-3d;top: 0;left: 0;z-index: -1;background-size: 110%;}


#drunter { color:#212327;
/*background-color:rgba(50,50,50,0.4);*/ 
/*-------------------------------------  background: linear-gradient(to bottom right,rgba(0, 0, 0, 0.7),rgba(89, 75, 117, 0.5));-----------*/
/*opacity: .6; */
height: 100%; /*Variabel*/
margin: 0 auto;/*Variabel*/
/*width: 100%;
padding:  100px ;*/
-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;display: block;left: 0px;top: 0px;
}
#drunter-start { color:#212327;
/*background-color:rgba(50,50,50,0.4);*/ 
/*-------------------------------------  background: linear-gradient(to bottom right,rgba(0, 0, 0, 0.7),rgba(89, 75, 117, 0.5));-----------*/
/*opacity: .6; */
height: 100%; /*Variabel*/
margin: 0 auto;/*Variabel*/
/*width: 100%;
padding:  100px ;*/
-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;display: block;left: 0px;top: 0px;
}
#drunter-media { color:#212327;
/*background-color:rgba(50,50,50,0.4);*/ 
/*-------------------------------------  background: linear-gradient(to bottom right,rgba(0, 0, 0, 0.7),rgba(89, 75, 117, 0.5));-----------*/
/*opacity: .6; */
height: 100%; /*Variabel*/
margin: 0 auto;/*Variabel*/
/*width: 100%; Variabel*/
 /* padding:  100px ;Variabel */
-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;display: block;left: 0px;top: 0px;
}
.opaque-overlay {overflow: hidden;position: relative; }
.opaque-overlay > *:first-child:before {content: '';width: 100%;height: 100%;display: block;position: absolute;left: 0px;top: 0px;pointer-events: none;background-color: rgb(58, 154, 232)!important;}

.gradient-overlay {overflow: hidden;position: relative; }
.gradient-overlay > *:first-child:before {content: '';width: 100%;height: 100%;display: block;position: absolute;left: 0px;top: 0px;pointer-events: none;
      background: linear-gradient(to top left, #17122d 0%, #683430 120%);
}

/****************************************************************************************************************************/
.bg-img {position: relative;width: 100%;height: 100%;background: url('../../img/zahnstocher.jpg') center center no-repeat;background-size: cover;}
  .bg-img:before {
    content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: linear-gradient(to bottom right,#9b303f,#25dcbc);opacity: .6; 
  }
  
/* Animate*/
.animate-in-down {transition: all 1.3s ease-out;position: relative;opacity: 1;top: 0px; }
.animate-in-down.out-of-viewport {top: 40px;opacity: 0; }
.animate-in-left {  transition: all 1.0s ease-out;  position: relative;opacity: 1; left: 0%; }
.animate-in-left.out-of-viewport {opacity: 0;left: -5%; }
.animate-in-right {transition: all 1.0s ease-out;position: relative;opacity: 1;left: 0%; }
.animate-in-right.out-of-viewport {opacity: 0;left: 5%; }  


@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.2, 1.2);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.2, 1.2);
  }
}

.carousel-inner .carousel-item > img {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}