@charset "ISO-8859-1";

/***************Allgemein*********************************/
*{
    margin: 0;
    padding: 0;
}

html{
/*    scroll-behavior: smooth !important;*/
}

body {
    padding-bottom: 40px;
    color: white;
/* Hide scrollbar for IE and Edge */
	-ms-overflow-style: none; 
  }

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

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


p {
	color: #707070;
	font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
	font-size: 15px;
	font-weight: normal;
}


h1 {
	color: black;
	font-family: Arial, sans-serif;
	font-size: 30px;
	font-weight: normal;
}

.overlay-content h1 {
	letter-spacing: 5px;
	font-weight: bold;
}

h2 {
	color: black;
	font-family: Arial, sans-serif;
	font-size: 20px;
	font-weight: normal;
}


.overlay-content h2 {
	font-family: fantasy;
	color: #00c8d3;
}

.footer h2 {
	color: white;
}

.footer_inner p, .footer_bottom p {
	color: white;
}

.footer_bottom p {
	font-size: 10px;
}

.showroom p {
	color: black;
}

.seiten_info h2 {
	color: white;
}

h3 {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 50px;
    font-weight: bold;
}

h4 {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
}


h5 {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
}

hr {
	background: #00c8d3;
	color: #00c8d3;
	height: 1px;
	width: 25%;
	border: none;
	margin: auto;
}
/*                     Link
/*--------------------------------------------------------------*/


.footer_inner a:link {
	color: #00C8D3;
	text-decoration: none;
	border-bottom: #00C8D3 0.15em solid;
	padding-bottom: 2px;
}

.footer_inner a:visited {
	color: white;
	text-decoration: none;
}

.footer_inner a:hover {
	color: white;
	text-decoration: none;
}

.footer_inner a:active {
	color: #00C8D3;
	text-decoration: none;
}


.seiten_info a:hover {
	color: white;
	text-decoration: none;
}

/****************************Button*********************************/

#button{
  background: #F3B755;
}


/**********************Text Spalten Allgemein ******************/

.text_l {
    text-align: left;
    margin-left: 15px;
  }

.text_r {
    text-align: right;
    margin-right: 15px;
}

    /*************************Top Bar*****************************/

.top_bar {
    background: #01A2AA;
    min-height: 45px;
	min-width: 100%;
    align-items: center !important;
	display: none;
}

.top_bar .row {
	padding-top: 5px;
}

.top_bar .col-lg-4 {
	text-align: right;
  padding-right: 15px;
  float: right;
}

/*                             Haeder / Navbar
--------------------------------------------------------------------*/

.haeder {
  min-width: 100%;
}

.page_haeder_logo {
	display: none;
}

.page_haeder_logo .col-lg-6{
  vertical-align: middle;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 40px;
}

.page_haeder_logo .col-lg-3{
	display: none;
	
}
#navbar {
  min-width: 100%;	
  overflow: hidden !important; 
  background-color: #FFFFFF;
  z-index: 1000;
}

/* .page_haeder_menu {
  min-width: 100%;
  overflow: hidden;
  background-color: #FFFFFF;
}
*/ 

.page_haeder_menu .col-lg-8 {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  display: none;
}

.haeder_nav_main li {
  display: inline;
  margin-left: 20px;
}

.haeder_nav_main a {
  color: #707070; 
	font-family: Arial, sans-serif;
	font-size: 15px;
	font-weight: bold;
}

.haeder_nav_main .haeder_nav_activ a{
  color: #00C8D3 !important;
}

.page_haeder_menu .col-lg-2  {
	text-align: center;
	padding-top: 25px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}


.haeder_nav_pic {
	display: none;
}

/*                         Seitliches Menü   (Rechts)                 */
/*********************************************************************/
.header_nav_ham {
	display: none;
}

.header_nav_ham_col {
	display: none;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
  background-color: rgba(255,255,255);
  background-color: rgba(255,255,255, 1.0);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 40px;
}

/*                         Seitliches Menü   (Links)                 */
/*********************************************************************/

.header_nav_ham_L {
	display: none;
}

.haeder_nav_ham_L_col {
	display: none;
}

.overlay2 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255);
  background-color: rgba(255,255,255, 1.0);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content2 {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay2 a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay2 a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay2 .closebtn2 {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 40px;
}

.myNav2_nav_main {
	text-align: left;
	padding-left: 40px;
}

.myNav2_boarder {
	border-bottom: 2px solid #00C8D3;
}


/*                            Video  (Cover)                        */
/********************************************************************/

.header_video {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
  }

.header_video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.header_video .container {
  position: relative;
  z-index: 2;
	padding-top: 200px;
}

.header_video .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

.h-100 {
	text-align: center;
	align-items: center !important;
}
/********************* CUSTOMIZE THE CAROUSEL **********************/

/* Carousel base class */

.carousel {
    height: 570px;
	max-width: 100%;
	text-align: center;
  }

  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    z-index: 10; 
  }
  
  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 570px;
    background-color: white;
  }
  .carousel-inner > .item > img {
/*    position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 570px;
  }


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

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-6 {
    margin-top: 150px;
    margin-bottom: 30px;
    text-align: center;
  }

  .marketing .col-lg-6 p {
    margin-top: 30px;
    margin-right: 50px;
    margin-left: 50px;
  }

.marketing .col-lg-6 h2 {
	margin-top: 50px;
}

.marketing {               
  min-width: 100%;         /* Gesamte Breite der Startseite */
  margin-bottom: 100px;
}


/* Kompetenze
------------------------------------------------------*/

.kompetenz {
  background: #e6f3ff;
  min-width: 100%;
}
  
.kompetenz_u {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 30px;

}

.kompetenz .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}

.kompetenz .col-lg-12 {
  margin-bottom: 100px;
}

.kompetenz .col-lg-4 p {
  margin-top: 30px;
  margin-right: 50px;
  margin-left: 50px;
  margin-bottom: 100px;
}

.kompetenz .col-lg-4 h2 {
  margin-top: 50px;
}


/*       Arbeiten
----------------------------------------------------------------------*/

.arbeit {
  min-width: 100%;
}

.arbeit_u {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 80px;

}

.gallery_small {
	display: none;
}

.gallery_big {
	display: block;
	}

.gallery_padding {
	padding-bottom: 20px;
}

/*   Showroom
----------------------------------------------------------------------*/

.showroom {
	min-width: 100%;
	background: #e6f3ff;
}

.showroom_u {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 30px;
}

/*        Footer
------------------------------------------------------------------------*/

.footer {
	background: #554D4D;
	min-width: 100%;
}

.footer_out {
	background: #554D4D;
	z-index: 100;
	position: relative;
	box-sizing: border-box;
	padding: 75px 10.3% 60px;
}

.footer_right {
	padding-left: 75px;
	padding-top: 30px;
	text-align: center;
}

.footer_bottom {
	background: #01A2AA;
	min-width: 100%;
}

.footer_bottom_out {
	background: #01A2AA;
	z-index: 100;
	position: relative;
	box-sizing: border-box;
	text-align: center;
	padding: 10px 10.3% 10px;
}

.footer_inner_row {
	padding-bottom: 50px;
	padding-top: 50px;
	text-align: center;
}

.footer_inner_row a {
	margin-left: 30px;
}

.footer .txt {
	padding-bottom: 50px;
}

/*                      Unterseiten                                   */
/**********************************************************************/

#navbar2 {
	z-index: 1001;
  min-width: 100%;	
  overflow: hidden !important; 
  background-color: #FFFFFF;
/*  z-index: 1000; */
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
/*  width: 100%; /* Full width */
}

.inhalt_fix {
	position: fixed;
	z-index: 101;
}

.inhalt_fix H1 {
	color: white;
	margin-top: 10px;
}

.seiten_info {
    background: #01A2AA;
    min-height: 40px;
	min-width: 100%;
    align-items: center !important;
	padding-top: 100px;
}

.seiten_info .row {
	text-align: center;
	padding-bottom: 10px;
	min-width: 100%;
}

.seiten_info .col-lg-12 {
	min-width: 100%;
}

.inhalt {
	min-width: 100%;
	padding-left: 100px;
	padding-right: 100px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.inhalt_extra {
	padding-top: 100px !important;
}

.layout_all {
	min-width: 100%;
	padding-top: 100px;
}

.layout_all_s {
	padding-top: 40px;
}
/*                             About                              */

.about_tab_main {
	display: none;
}

.about_tab_main_k {
	display: none;
}

.about_c {
	min-width: 100%;
	text-align: center;
	padding-top: 40px;
}

.about_o {
	text-align: center;
}

.About_t1 {
	text-align: center;
	padding-top: 60px;
}

.About_t1_p {
	padding-top: 20px;
}

.about_vita {
	min-width: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
}

.about_vita_pic {
	text-align: center;
}

.about_vita_pic_a {
	text-align: center;
	padding-top: 40px;
}

.about_tab {
	padding-top: 20px;
	padding-left: 20px;
}

.about_tab_pic {
	text-align: right;
	padding-top: 20px;
}

/*                           Service                                 */

.service {
	width: 80%;
}

.service_row {
	padding-top: 20px;
}

.service_row_l {
	padding-top: 20px;
	margin-bottom: 100px;
}
.service_col {
	text-align: center;
	padding-top: 40px;
}

.service_row_img {
	text-align: center;
}

/*************************Cookie popup*********************************/

#cookie-popup { 
    text-align: center; 
    background: #fff; 
    position: fixed;
    bottom: 0px; 
    left: 0;
    right: 0;
    z-index: 9999;
    line-height:20px;
    padding: 20px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    }
   
  .hinweis {
    min-width: 100%;
  }

  #cookie-popup.hidden {
    display: none;
  }

.hinweis button {
	color: #fff;
}



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

.modal-dialog {
      min-width: 1000px;
      margin: 100px auto;
  }



.modal-body {
  position:relative;
  padding:0px;
}
.close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:9999;
  font-size:2rem;
  font-weight: normal;
  color:#000;
  opacity:1;
}


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

@media (min-width: 1200px) {
/*         Top Bar einblenden                   */	
	.top_bar {
		display: block;
	}

/*             Seitliches Menu einblenden          */	
	.header_nav_ham {
	display: block;
	}
	
	.haeder_nav_ham_L_col {
	display: block;
	}
	
	.header_nav_ham_col {
	display: block;
	}

	.page_haeder_logo .col-lg-3{
	display: block;
	}
	
/* Video Cover */
	
	.button_small {
		display: none;
	}
	
	.button_big {
		display: block;
	}
	
/* About */
	
/*	Einblender der großen Sicht */
	.about_tab_main {
		display: block;
	}
	
/*	Ausblenden der kleinen Sicht */
	.about_tab_main_k {
		display: none;
	}
	
/*	     Service            */
	
	.service_row img {
		max-width: 560px;
	}
	
	.service_row_img img {
		max-width: 808px;
	}
	
		
}

@media (min-width: 768px) {
      
    /* Bump up size of carousel content */
    .carousel-caption h5 {
      margin-bottom: 50px;
      font-size: 21px;
      line-height: 1.4;
    }
	
	.page_haeder_menu .col-lg-8 {
		display: block;
	}
	
	.page_haeder_logo {
	display: block;
	}

/* Video Cover */
	
	.button_small {
		display: none;
	}
	
	.button_big {
		display: block;
	}
		
/* About */
	
/*	Einblenden der großen Sicht */
	.about_tab_main {
		display: block;
	}

/*	Ausblenden der kleinen Sicht */
	.about_tab_main_k {
		display: none;
	}
	
/*	     Service            */
	
		
	.service_row img {
	width: 90%;
	}
	
		
}

@media (max-width: 768px) {

	h1 {
	color: black;
	font-family: Arial, sans-serif;
	font-size: 21px;
	font-weight: normal;
	}
	
	h2 {
	color: black;
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: normal;
	}
	
	h3 {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
	}
	
/*          Linke Menü anzeigen           */	
	.header_nav_ham_L {
	text-align: left;
	padding-left: 40px;
	display: block;
	}

	.haeder_nav_ham_L_col {
	padding-top: 30px;
  	padding-bottom: 30px;
	display: block;
	float: left;
	}
	
	.header_nav_ham_col {
		display: block;
		float: right;
		padding-right: 40px;
	}
	
	.haeder_nav_pic {
		display: block;
	}
	
/* Video Cover */
	
	.button_small {
		display: block;
	}
	
	.button_big {
		display: none;
	}
	
/* About */

	.inhalt_k {
		min-width: 100%;
	}
	
/*	Ausblenden der großen Sicht */
	.about_tab_main {
		display: none;
	}
	
	/*	Einblenden der kleinen Sicht */
	.about_tab_main_k {
		display: block;
		padding-bottom: 200px;
	}
	
	.about_tab {
		padding-left: 150px;
	}
	
	.about_tab2{
		text-align: center;
		padding-bottom: 10px;
	}
	
	.about_o img {
		width: 200px;
		padding-bottom: 20px;
	}
	
	.about_c img {
		width: 440px;
	}
	
/*	     Service            */
	
	.service {
	width: 90%;
	}
	
	.service_row img {
	width: 100%;
	text-align: center;
	}
	
	.service_back {
		display: none;
	}
/*       Footer             */
	
	.footer_logo img {
		width: 80%;
		height: 80%;
	}

/* Unsere Arbeiten        */
	
	.gallery_small {
		display: block;
}
	.gallery_big {
		display: none;
	}
	
		
}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 15px;
  }
}