/*************************************************************************************************************************************************
  Content      *********************************************************************************************************************************
*************************************************************************************************************************************************/
/**************************************************************************************
  Hilfsklassen
**************************************************************************************/
#content h1,#content  .h1{
color:#7e0035;
margin-bottom:20px;
}

#content h2,#content  .h2{
font-size:20px;
}

#content h4,#content  .h4{
color:#7e0035;
}

.img-responsive{
width:100%;
height:auto;
}

.round{
/*border-radius: 50%;*/
border-radius: 3px;
}

.iconlist .fa{
margin-left:15px;
margin-right:15px;
font-size:20px;
}

.tile{
display:inline-block;
padding:5px;
text-align:center;
margin-left:15px;
margin-right:15px;
margin-bottom:15px;
}

.btn.colored{
	background-color:#7e0035;
	color:white;
}

i.blackicon{
	font-size:40px;
	margin:5px;
cursor: pointer;
}

.bg-gray-soft{
/*background-color:#E8E8E8;*/
background-color:#D8D8D8;
margin-bottom:20px;
}

.bg-gray-soft > div{
padding:15px;
}

.bg-gray-boxes{
/*background-color:#E8E8E8;*/
background-color:#D8D8D8;
margin:15px;
padding:15px;
position:relative;
}

.bg-gray-boxes .price{
position:absolute;
z-index:1;
bottom:-10px;
right:-10px;
width:auto;
height:auto;
padding:10px 20px;
background-color:#7e0035;
color:white;
}

img.phones{
width:25%;
height:auto;
margin:10px;
}


/**************************************************************************************
  Web
**************************************************************************************/
.fa.bigger{
font-size:25px;
cursor: pointer;
}

.fa.colored{
	color:#7e0035;
cursor: pointer;
}

.card{
background-color:none;
border:none;
}


/**************************************************************************************
  Partner
**************************************************************************************/
.partnercover{
position:relative;
}

img.partnerimg{
width:100%;
height:auto;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
padding:35px;
display: block;
-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

img.partnerimg:hover{
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}

.partnercover .fa{
position:absolute;
top:10px;
right:10px;
color:#7e0035;
z-index:5;
font-size:20px;
/*display:none;*/
}

.partnertext{
position:absolute;
bottom:0;
left:0;
background-color:#7e0035;
color:white;
padding:2px 10px;
z-index:5;
font-size:12px;
display:none;
}

/*.partnercover:hover .fa,*/
.partnercover:hover .partnertext{
display:block;
}



/**************************************************************************************
  Team
**************************************************************************************/
.team{
position: relative;
text-align:center;
margin:0 auto;
}

.team.teambig{
max-height:300px;
max-width:300px;
}

.team.teamsmall{
max-height:200px;
max-width:200px;
}

.team img{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}


.teamsmall:hover img, .teambig:hover img {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}

.teamtext{
position:absolute;
top:15px;
left:-5px;
background-color:#7e0035;
color:white;
padding:2px 10px;
z-index:5;
font-size:12px;
}

.teamtext a, .teamtext .fa{
color:white;
}






/*************************************************************************************************************************************************
  System     *********************************************************************************************************************************
*************************************************************************************************************************************************/
/**************************************************************************************
  Font
**************************************************************************************/
@font-face {
    font-family: 'TitilliumText22LMedium';
    src: url('../fonts/TitilliumText22L004-webfont.eot');
    src: url('../fonts/TitilliumText22L004-webfont.eot') format('embedded-opentype'),
         url('../fonts/TitilliumText22L004-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L004-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L004-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'RoundedHead';
    src: url('../fonts/RoundedHead.eot');
    src: url('../fonts/RoundedHead.eot') format('embedded-opentype'),
         url('../fonts/RoundedHead.woff') format('woff'),
         url('../fonts/RoundedHead.ttf') format('truetype'),
         url('../fonts/RoundedHead.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


/**************************************************************************************
  Header
**************************************************************************************/
html,body {
	padding:0px;
	margin:0px;
	height: 100%;
	font-family: 'TitilliumText22LMedium';
    font-weight: normal;
    font-style: normal;
}

#content{
margin-top:3%;
margin-bottom:3%;
}

.modal-open {
    padding-right: 0px !important;/*Ergänzung für Boiotstrap Modal Popup (Fehler vom Modal)*/
	overflow: auto;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
	font-family: 'RoundedHead';
}

header{
	width:100%;
	height:100%;
	background: url("../uploads/Images/background.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color:white;
background-attachment: local;
}

header p{
	font-size:20px;
}

#header-opacity{
	position: absolute;
	margin:0 auto;
	text-align:center;
	width:100%;
	height:100%;
	z-index:2;
	background:rgba(0,0,0,0.4);
}
#header-navigation{
	width:100%;
	height:20%;
	/*border:1px solid red;*/
}
#header-content{
	width:100%;
	height:50%;
	padding-top:10%;
	/*border:1px solid red;*/
}
#header-icons{
	margin:0 auto;
	width:100%;
	height:20%;
	text-align:center;
	/*border:1px solid red;*/
}

#header-icons h2{
	font-size:25px;
}

#header-scrollicon{
	margin:0 auto;
	width:100%;
	height:10%;
	text-align:center;
	/*border:1px solid red;*/
}

#header-scrollicon i.scrollicon{
	color:white;
	font-size:30px;
}

main .container, footer .container{
	padding-top:20px;
	padding-bottom:20px;
}

main .row, footer .row{
	padding-top:8%;
	padding-bottom:8%;
}

main .icontext{
	padding-top:2%;
	padding-bottom:10%;
	margin-top:10px;
}

a,a:hover,a:active,a:visited,a:focus{
	color:#7e0035;
	text-decoration:none;
}

.btn,a.btn{
	color:#7e0035;
	text-decoration:none;
	padding:3px 20px;
	border: 1px solid #7e0035;
	border-radius: 2px;
	margin-right:5px;
background-color:transparent;
}

footer .btn{
	padding:10px;
	text-align:center;
	width:100%;
	font-family: 'RoundedHead';
	font-size:20px;
	margin-bottom:10px;
}

footer .btn.btn-secondary{
	margin-bottom:0px;
}

.btn:hover,a.btn:hover,footer .btn:hover{
	background-color:#7e0035;
	color:white;
}

button{
	background-color:transparent;
	border:none;
	padding:none;
}

/**************************************************************************************
  Font Awesome
**************************************************************************************/


header i.menuicon{
	color:#505050;
	font-size:40px;
	border:none;
}

header i.whiteicon{
	color:white;
	font-size:40px;
	margin:5px;
-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

header i.whiteicon:hover{
	font-size:50px;
	margin:0px;
}

main i.bigicon{
	font-size:100px;
	margin:5px;
color:black;
-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
main i.bigicon:hover{
	font-size:110px;
	margin:0px;
cursor: pointer;
}

main i.competenceicon{
	font-size:100px;
	margin:15px;
}
main i.competenceicon:hover{
	font-size:110px;
	margin:10px;
}


/**************************************************************************************
  Support Button
**************************************************************************************/
#support{
	position:fixed;
	z-index:1000;
	top:40%;
	height:160px; /*Höhe des gesamten Support Button Bereichs definieren*/
	width:300px;  /*Breite des gesamten Support Button Bereichs definieren*/
	right:-260px; /*Sichtbarkeit des gesamten Support Button Bereichs definieren*/
	background-color:white;
	transition:all 1s;
}

#support:hover{
	right:0;
}

#supportleft{
	height:100%;
	width:15%;
	position:relative;
	float:left;
}
#supportright{
	height:100%;
	width:85%;
	float:left;
	padding:10px;
}

#support .rotate{
    position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
	transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

#support .rotate span{
	color: #7e0035;
	font-family: 'RoundedHead';
	font-size:20px;
	text-decoration:none;
}

#support p{
	color:black;
	font-size:16px;
}

/**************************************************************************************
  Navigation
**************************************************************************************/
.navbar{
	background:rgba(255,255,255,0.9);
}

.navbar.navbar-scroll{
	background:rgba(255,255,255,0.9);
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item.dropdown .nav-link,
.navbar-nav .nav-item:active .nav-link,
.navbar-nav .nav-item:hover .nav-link,
.navbar-nav .nav-item.active .nav-link.nav-link-scroll,
.navbar-nav .nav-item.dropdown .nav-link.nav-link-scroll,
.navbar-nav .nav-item:active .nav-link.nav-link-scroll,
.navbar-nav .nav-item:hover .nav-link.nav-link-scroll{
	color:black;
	font-family: 'RoundedHead';
}
.navbar img.logo{
	width:100px;
}

.dropdown-menu{
text-align:center;
background-color:transparent;
border:none;
border-top: 1px solid rgba(0,0,0,.15);
}

/**************************************************************************************
  Slider
**************************************************************************************/
.carousel-indicators{
	position:relative;
	margin-top:20px;
}

.carousel-indicators li{
	background-color:#D8D8D8;
	width:100px;
	height:10px;
	margin:5px;
}
.carousel-indicators .active{
	background-color:#7e0035;
}

/**************************************************************************************
  Hilfsklassen
**************************************************************************************/
.bg-gray{
	background-color:#D8D8D8;
}

.cl-apload{
	color:#7e0035;
}

/**************************************************************************************
  Video
**************************************************************************************/
/*Braucht es, damit alles weiss ist im Firefox (sonst etwas grau)*/
#brightness{
			width: 100%;
			margin: 0 auto;
			border:none;
			text-align:center;
background-color: white !important;
		}

video {
width: 100%;
height: auto;
border:none;
background-color: white !important;
}

@media screen and (max-width: 550px) {video {width: 280px;}}



@media (min-width:768px){}
@media (min-width:992px){
	
	#header-icons h2{
		font-size:25px;
	}
	header i.whiteicon{
		font-size:80px;
	}

	header i.whiteicon:hover{
		font-size:90px;
	}
	
	main .row{
		padding-top:2%;
		padding-bottom:2%;
	}
	
	.navbar{
		background:transparent;
	}

	.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item.dropdown .nav-link,
	.navbar-nav .nav-item:active .nav-link{
		color:white;
	}
	
	.navbar-nav .nav-item:hover .nav-link{
		color:#7e0035;
		border:1px solid #7e0035;
	}
	.navbar img.logo{
		width:150px;
	}

.dropdown-menu{
		text-align:center;
		background:rgba(255,255,255,0.6);
		border:none;
		text-align:left;
	}
	
	.dropdown-menu li a:hover{
		color:#7e0035;
		background-color:transparent;
	}
	
	.dropdown:hover>.dropdown-menu {
	  display: block;
	}
	
	#support{
		top:60%;
	}
}
@media (min-width:1200px){}