@import url('https://fonts.googleapis.com/css?family=Karla:400,500,700');
html, body {
  height: 100%;
  width: 100%;
  font-family: 'Karla', sans-serif;
  color: #222;
}


#top {
	
	height:180px;
}
/*--- Logo --*/
.navtop {
  background-color: #fff;
  box-shadow: 1px 1px 10px #ddd;
}
.navbar {
 /* padding: 7em 0 !important;*/
}
.logo {
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  display: block;
  width: 173px;
  transition: all 0.25s linear;
}
.logo.shrink {
  width: 100px;
  height: auto;
}

/*--- Navigation --*/

/*
.navbar-nav li {
  
}
*/

.navtop .navbar-toggler {
    padding: 0px;
    font-size: 1.25rem;
    border: 0px solid transparent !important;
    border-radius: .25rem;
}

.navtop .navbar-nav .nav-link {
   text-align:center;
  font-size: .9em !important;
  color: #000;
  padding-left: 20px;
   padding-right: 20px;
}

.navtop .navbar-nav .nav-link:hover {
  color: #ff671d;
}

.navtop .navbar-nav .nav-link:active {
  color: #ff671d;
}



/* Hide the link that should open and close the topnav on small screens */
.nav .icon {
  display: none;
} 

/*--- Contact Icons --*/
.contact-no{
position: absolute;
right: 0px;
top: 0px;
margin: .5rem 1rem;
padding-inline-start: 0px;

 
}
.contact-no ul {
  list-style: none;
}
.contact-no li {
  display: inline-block;
  margin: 0px 10px 0px 0px;
  padding: 3px;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 100px;
  border: 1px solid #ff671d;
}

.contact-no li:last-child {

  margin: 0px 0px 0px 0px;
}

.contact-no li:hover {
  background:#ff671d;
}
.contact-no li a {
  color: #ff671d;
}
.contact-no li a:hover {
  color: #fff;
}

/*-- Image Slider --*/

.carousel-inner img {
  width: 100%;
  height: 100%; /*-- Bild wird am jeweiligen Screen bildschirmfüllend angezeigt --*/
}
.carousel-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /*-- Textposition im Headerbild --*/
}
.carousel-caption h2 {
  font-size: 280%;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px #222;
  padding-bottom: 3rem;
}
.btn-primary {
  background-color: #ff671d;
  border: 1px solid #ff671d;
  color: #fff;
}
.btn-primary:hover {
  background-color: #e94e12;
  border: 1px solid #e94e12;
  outline: none !important;
  box-shadow: none !important;
}
.btn-primary:active {
  outline: none !important;
  box-shadow: none !important;
}

/*-- Welcome Section --*/
.welcome-section {
  width: 55%; /*-- Macht den Viewport kleiner --*/
  margin: 0 auto;
  padding-top: 1rem;
}
.col-12 h4 {
  color: #ff671d;
  font-size: 200%;
}
strong {
  font-weight: bold;
}
.lead {
  color: #ff671d;
}




/*-- Service Section --*/
#services {
  padding: 60px 0;
}
#services .section-header {
  margin-bottom: 20px;
}

.service-row .item, .service-row .col {
  padding: 4px;
}
.card-body h5 {
  font-size: 1em !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  height: 280px;
  border-radius: 0;
  border: none;
  padding: 50px 0;
  margin: 0 auto;
  color: #ff671d;
  background-color: #eee;
  -webkit-transition: padding 0.5s; /* Übergang bei mouseout */
  -moz-transition: padding 0.5s;
  -ms-transition: padding 0.5s;
  -o-transition: padding 0.5s;
  transition: padding 0.5s;
	
  
}

.card.active {
   color: #fff;
  background-color: #ff671d;
  padding: 10px 0;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
	
  
}

.card.active .card-text {
  opacity: 1;
  -webkit-transition: 0.5s ease-in-out; /* Übergang bei hover */
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}


/*
.card:hover {
  color: #fff;
  background-color: #ff671d;
  padding: 10px 0;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
*/
.card-text {
  position: relative;
  padding: 10px 0;
  opacity: 0;
  -webkit-transition: padding 0.5s; /* Übergang bei mouseout */
  -moz-transition: padding 0.5s;
  -ms-transition: padding 0.5s;
  -o-transition: padding 0.5s;
  transition: padding 0.5s;
}

/*
.card:hover .card-text {
  opacity: 1;
  -webkit-transition: 0.5s ease-in-out; 
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
*/
.icon {
  font-size: 38px;
  transform: translateY(-5px);
}


/*-- Two Column Section --*/
.tc-section {
  width: 58%; /*-- Macht den Viewport kleiner --*/
  margin: 0 auto;
  padding-top: 4rem;
  padding-bottom: 2rem;
}
/*-- Contact Section --*/
/*#contact {
  padding-top: 2rem;
  background: #fff1ea;
}*/
.col-12 a {
  color: #ff671d;
}
/*-- Footer --*/
footer {
  color: #222; /*-- Schriftfarbe --*/
  padding-top: 1rem;
}
#copy p {
  font-size: 0.8em;
}
.footer-link {
  font-size: .9em !important;
  color: #000;
}
.footer-link:hover {
  color: #ff671d;
  text-decoration: none;
}
.footer-link:active {
  color: #ff671d;
}

/*-- Impressum Section --*/
.impressum-section {
  width: 75%; /*-- Macht den Viewport kleiner --*/
  margin: 0 auto;
  padding: 5rem 0;
}
.impressum-section a {
  color: #ff671d;
  text-decoration: none;
}

/*-- Media Queries --*/
/*-- Mit Medienabfragen (Media Queries) können Sie die Darstellung eines Dokuments
für verschiedene Ausgabemedien festlegen (https://wiki.selfhtml.org/wiki/CSS/Media_Queries).
Vgl. auch: https://www.w3schools.com/css/css_rwd_mediaqueries.asp --*/
@media (max-width: 992px) {}
@media (max-width: 768px) {
	
	
  .carousel-caption h2 {
    font-size: 175%;
  }
  .carousel-caption .btn {
    font-size: 95%
  }
	
	.md-hidden {
		display: none;
	}
	
	
}

	

@media (max-width: 576px) {
  #slides {
    display: none;
  }
 .col-12 h4 {
    padding-top: 3rem;
    font-size: 180%
  }
  .testimonial-item {
    font-size: 85%
  }
  .col-lg-6 {
    font-size: 85%
  }
  .impressum-section {
    font-size: 80%
  }
}
/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0 !important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
  padding: 1rem;
}
/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/