@font-face {
	font-family: ormont; 
	src: url(../fonts/youssef-habchi_ormont/Ormont-Light.otf);
/* 	src: url(../fonts/youssef-habchi_ormont/Ormont-Outline.otf); */
}

@font-face {
	font-family: pistara; 
	src: url(../fonts/paulo-r_pistara/Pistara.otf);
}



/*******************
Color Sheme:
- white 		: #ECECEC
- blue (light) 	: #8ED0DE 
- blue			: #1F78B3

Use:
	lnk: 		: #8ED0DE

*******************/


body{
/* 	background: url("../IMG_0107.JPG"); */
	background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
   	margin: 0px;
	padding: 0px;
	background: #000;
	height: 100%;
	font-family:Arial;
}

#background,
#background_fade{
	width: 100%;
	position: fixed;
	z-index: -1;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0;
}

#background_fade{

}

/*********************/
/****** GENERAL ******/
/*********************/


/***** imgloader ***/
/*

img.image{
	opacity: 0;
	-webkit-transition: opacity 200ms ease;
	-moz-transition: opacity 200ms ease;
	-ms-transition: opacity 200ms ease;
	-o-transition: opacity 200ms ease;
	transition: opacity 200ms ease;
}

img.image.imgloader-loaded{
	opacity: 1;
}
*/

/*******************/

*[onclick]{
	cursor: pointer;
}

a{
	color: #8ED0DE;
	text-decoration: none;
}

h1, h2, h3, h4{
	font-family: inherit;
	font-weight: normal;
	font-size: 21px;
	color: #ECECEC;
}

h1{
/* 	background: #2B78B0; */
	padding:5px 0px;
}

h3{
	background: #1F78B3;
	padding: 3px 5px;
	font-size: 14px;
	display: inline-block;
}

a:hover{
	color: #1F78B3;
}

.pos-r{
/* 	width: 310px; */
	width: 262px;
	float: right !important;
}

.pos-l{
	float: left;
/* 	max-width: 665px; */
	max-width: 685px;
}

.content{
	width: 1000px;
	margin: auto;
}

.text,
.textbox{
	font-family: inherit;
	font-weight: normal;
	font-size: 15px;
	color: #ECECEC;
}

.textbox{
	margin: 0px;
/* 	padding:5px; */
	padding: 15px 15px;
	background: rgba(0,0,0,0.6); 
}

.text > img,
img.image{
	border: 3px solid #8ED0DE;
	width:300px;
	float: right;
}

.text > img{
	margin: 15px;
}

.text > img:nth-of-type(even){
	float: left;
}

img.image,
figure.image{
	border: 3px solid #7CBBCD;
	margin:5px;
}

img.image[data-current=true],
img.image[data-selected=true],
img.image:hover{
	border-color: #2172AC;
}


figure.image{
	margin: 0;
    position: relative;
	overflow: hidden;
	cursor: pointer;
	background: #000;
}

figure.image img{
	max-width: 100%;
	opacity: 0.7;
    display: block;
    position: relative;
    transform: scale(1.01);
    transition: transform 0.4s, opacity 0.3s;
    
    height: 100%;
    object-fit: cover;
    object-position: top;
    width: 100%;
}

figure.image[data-current="true"] img,
figure.image:hover img{
    transform: scale(1);
    opacity: 1;
}

figure.image:after{
	content: '';
	background: rgb(0,0,0);
	opacity: 0.2;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	transition: all 0.2s linear;
}

figure.image > figcaption{
	color: #ececec;
    font-size: 20px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    margin: -15px auto 0;
    padding: 0;
    position: absolute;
    text-align: center;
    z-index: 1;
    top: 50%;
    width: 100%;
    transition: margin 0.2s ease-out;
}

figure.image > figcaption > a{
	color: inherit !important;
}

figure.image:hover,
figure.image[data-current="true"]{
	border-color: #2B78B0;
}

figure.image:hover > figcaption,
figure.image[data-current="true"] > figcaption{
	margin-top: 65px;	
}

figure.image:hover:after{
	top: 160px;
	opacity: 0.4;
}

/*********************/
/******* Overpage ******/
/*********************/

#overpage{
	position: fixed;
	top:0px;
	left:0px;
	right:0px;
	width: 100%;
	height:0px;
	background: #78B8CC;
	z-index: 20;
}



/*********************/
/******* LAYOUT ******/
/*********************/

/** HEADER **/

#header{
	height: 190px;
	width: 100%;
	position: fixed;
	background: rgba(0,0,0,0.5);
	top:0px;
	z-index: 2;
/* 	background: -moz-linear-gradient(#000000 0%, rgba(0,0,0,0.3) 100%); */
	background: linear-gradient(#000000 80px, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
	
	
/*
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
*/
}

/*
#header:hover{
	height: 120px;
}
*/

#header > .content{
	height:130px;
}

#logo{
	height:150px; /* 130 px */
	margin-top:-5px;
	float: left;
	margin-left: -30px;
}

#navigation{
	float: right;
	margin:23px 0px 0px 0px;
}

#navigation > ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#navigation > ul > li{
	float: left;
	height: 50px;
	margin: 10px 7px;
	padding:10px;
	line-height: 50px;
/* 	border-top:3px solid #73B9CA; */
	color: #ECECEC;
	font-family:Arial;
	font-size: 13px;
}

#navigation > ul > li a{
	text-decoration: none;
	color: inherit !important;
	
	display: inline-block;
    height: 50px;
}

/*
#navigation > ul > li:hover,
#navigation > ul > li[data-current=true]{
	color: #1672A7;
}
*/

#navigation > ul > li > span:hover,
#navigation > ul > li[data-current=true] > span{
	color: #1672A7;
}


#navigation > ul > li:hover > ul{
	height:100px;
}

#navigation > ul > li > ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
	background: rgba(0,0,0,0.5);
	position: absolute;
	height: 0px;
	overflow: hidden;

	-webkit-transition: height 300ms ease-out;
	-moz-transition: height 300ms ease-out;
	-ms-transition: height 300ms ease-out;
	-o-transition: height 300ms ease-out;
	transition: height 300ms ease-out;

}

#navigation > ul > li > ul > li{

	margin: 0px;
	padding:7px 10px;
	line-height: normal;
/* 	border-top: 1px solid #e0e0e0; */
	font-family:Arial;
	color: #fff;
	font-size: 15px;
}

#navigation > ul > li > ul > li:last-of-type{
/* 	border-bottom: 1px solid #e0e0e0; */
}

#navigation > ul > li > ul > li:hover{
	background: rgba(125, 186, 204, 0.5);
}



#navNews{
	background: rgba(255, 255, 255, 0.70);
	left: 30px;
	top: -25px;
	display: inline-block;
	position: relative;
	padding: 0;
	margin: 0;
	color: #000;
	font-size: 14px;
	max-height: 25px;
	overflow: hidden;
}

#navNews > p{
	margin: 5px 10px;
	padding: 0;
	float: left;
	cursor: default;
}

#navNews > a{
	position: relative;
	padding: 5px 20px 5px 10px;
	float: left;
	background: #7dbacb;
	color: #000;
	margin: 0 0 0 25px;
	font-size: 14px;
	cursor: pointer;
	
	transition: background 250ms ease, color 250ms ease;
}

#navNews > a:before{
	content: '';
	width: 0;
	height: 0;
	border: 13px solid;
	border-color: transparent #7dbacb #2f77ad transparent;
	border-color: transparent #7dbacb #7dbacb transparent;
	position: absolute;
	left: -25px;
	top: 0;
	
	transition: border-color 250ms ease;
}

#navNews > a:hover{
	color: #fff;
	background: #2f77ad;
}

#navNews > a:hover:before{
	border-color: transparent #2f77ad #2f77ad transparent;
}

/** MIDDLER **/

#middler{
	margin-top:170px;
	min-height: 100%;
	height:100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#middler > .content{
/* 	background: red; */
/* 	min-height: 800px; */
	height: 100%;
	position: relative;
	overflow: hidden;
/* 	min-height: 100%; */
}


/** FOOTER **/
#footer{
	background: rgba(0,0,0,0.7);
	border-top: 1px solid rgba(0,0,0.9);
/* 	height: 290px; */
	height: 315px;
	margin-top:30px;
}


#footer .block{
	width:320px;
	margin: 20px 10px 0px 10px;
	float: left;
	font-size:13px;	
}

#footer .block:first-of-type{
	margin-left:0px;
}

#footer .block:last-of-type{
	margin-right:0px;
}

#footer .block > h2{
	font-size: 16px;
	padding: 0px;
	margin: 0px;
	font-weight: bold;
}

#footer .block > .text:first-of-type{
	font-size: inherit;

	border-bottom: 1px solid #1F78B3;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

#footer .block > .lists{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

#footer .block > .lists > ul{
	color: #ECECEC;
	list-style: none;
	margin: 0px;
	padding: 0px;
	min-width: 50%;
}

#footer .block > .lists > ul > li{
	font-size: 13px;
	margin: 5px 0px;
	padding-left: 7px;
	position: relative;
	cursor: pointer;
}

#footer .block > .lists > ul > li > a{
	color: #eeeeee !important;
}

#footer .block > .lists > ul > li:before{
	content: '/';
	position: absolute;
	left: 0px;
}

#footer .block > .lists > ul > li:hover:before{
	color: #1F71AB;
}

/********************/
/***** SEITEN *******/
/********************/


/* Seite 1 - home / start */

#importantInformations{
	background: #2B78B0;
	position: fixed;
	width: 100%;
	bottom: 0px;
	right: 0px;
	left: 0px;
	height:30px;
	z-index: 2;
	color: #fff;
	font-size: 13px;
}

#importantInformations[data-displaymode="dark"]{
	background: rgba(255,255,255,0.75);
	color: #000;
}

#importantInformations ul{
/* 	width:40%; */
	margin: 7px 0px;
	padding: 0px;
	list-style: none;
}

#importantInformations ul > li{
	float: left;
	margin: 0px 7px;
}

#importantInformations ul:nth-of-type(1) > li{
	position: relative;
	padding-right:10px;
}

#importantInformations ul:nth-of-type(1) > li:after{
	content: '|';
	position: absolute;
	right:-5px;
}

#importantInformations ul:nth-of-type(1) > li:last-of-type:after{
	display: none;
}

#importantInformations ul > li > a{
	color: inherit;
	text-decoration: none;
	position: relative;
	border: none;
	padding-left: 5px;
}

#importantInformations ul > li > a > img{
 	border: medium none;
    display: inline-block;
    height: 20px;
    margin: -2px;
}

#importantInformations ul:nth-of-type(2) > li > a:before{
/* 	content: '/'; */
	position: absolute;
	left: 0px;
}

#importantInformations ul:nth-of-type(1){
	float: left;
}

#importantInformations ul:nth-of-type(1) > li:first-of-type{
	margin-left: 0px;
}


#importantInformations ul:nth-of-type(2){
	float: right;
}

#importantInformations ul:nth-of-type(2) > li{
	float: right;
	margin-right: 0px;
}

/*
#importantInformations ul:nth-of-type(2) > li:last-of-type{
	margin-right: 0px;
}
*/


#imageprev{
	float: left;
	width: 100%;
/* 	height:200px; */
	height: 100%;
/*
	position: fixed;
	top:50%;
	margin-top:-100px;
*/
/* 	background: red; */
}

#imageprev > #imgrow{
	width:86px;
	float: left;
}

#imageprev > #imgrow > img{
	width:70px;
	height: 70px;
	object-fit: cover;
}


#imageprev > #imgtext{
	background: #2172AC;
	padding: 5px 10px;
	float: left;
	left:5px;
	top: 5px;
	position: relative;
	overflow: hidden;
	
/* 	background: rgba(255,255,255,0.75); */
}

#imageprev > #imgtext > p{
	font-family:arial;
	color: #fff;
	margin: 0px;
	padding: 0px;
	float: left;
	
/* 	color: #000; */
}

#slogan{
	position: absolute;
	right:0px;
	top: 60px;
	color: #ECECEC;
	text-align: right;
	width: 420px;
	font-size: 20px;
/* 	font-family:Arial Black; */
	
	font-family: "Arial Black", Arial;
	font-weight: 900;

/* 	background: rgba(0,0,0,0.7); */
	padding:10px;
}

#slogan > span:last-of-type{
	font-weight: normal;
	font-family: Arial;
	font-size: 25px;
}

#slogan > span:last-of-type{
	font-size: 20px;
}

/*    Referenzen   */

#references_list{
	list-style: none;
	text-align: center;
	font-size:15px;
}

#references_list li{
/* 	float: left; */
	color: #ececec;
	cursor: pointer;
	padding:0px;
	display: inline-block;
	margin-top:2px;
}

#references_list li > a{
	padding: 2px 4px;
	color: #ececec;
	margin: 3px 3px 3px 0px;
}

#references_list li[data-current="true"] > a,
#references_list li:hover > a{
/* 	background: #1672a7; */
	color: #1672a7;
}

/*
ul.references_list li[data-current="true"] > a{
	background: #1F78B3;
}
ul.references_list li[data-current="true"]:hover > a{
	color: inherit;
}
*/

#references_list li:after{
	content: '/';
}

#references_list li:last-of-type:after{
	content: '';
}

#references_imglist{
	margin-top:30px;
	text-align: center;
}

#references_imglist img.image{
	width:100px;
	height:100px;
	margin: 10px;
	cursor: pointer;
	float: none;
	object-fit: cover;
}

#references_imglist img.image[data-selected=true],
#references_imglist img.image[data-selected=true]:hover{
/* #references_imglist img.image:hover{ */
	border-color: #2172AC;
}

#references_imglist img.image:hover{
	border-color: #7cbbcd;
}


h2#references_headline{
	margin-top: 50px;
}

.text#references_text{
	margin-top:20px;
}


/*  Service   */

#service_kategories{
	text-align: center;
}

#service_kategories figure.image{
	float: left;
	width: 47%;
	width: calc(50%-26px);
	height: 200px;
	margin: 10px;
}

#service_kategories img.image[data-current=true],
#service_kategories img.image:hover{
	border-color: #2172AC;
}

/* Service - *subPages */

#page_servicessubpage > h2{
	padding:0px 6px;
}

/* --> in global für .textbox
.textbox,
#page_servicessubpage > .text{
	margin: 0px;
	padding:5px;
	background: rgba(0,0,0,0.5); 
}
*/

#page_servicessubpage img.image{
	margin:0px 0px 10px 10px;
	width:120px;
	height:120px;
	object-fit: cover;
	overflow: hidden;
}

#page_servicessubpage img.image:nth-of-type(even){
	margin-left:0px;
}

.servicesKontaktButton{
	text-align: center;
	margin: 40px 0 30px 0;
	display: inline-block;
	font-size: 18px;
}

.servicesKontaktButton > p{
	background: rgba(255, 255, 255, 0.75);
	padding: 10px 20px;
	color: #000;
	margin: 0;
	display: inline-block;
	cursor: pointer;
	transition: background 200ms ease;
}

.servicesKontaktButton > p:hover{
	background: rgba(255, 255, 255, 0.85);
}


/*    Backstagepass   */

#newsflow div.entry {
	background: rgba(0,0,0,0.5);
	width:980px;
/* 	height:200px; */
/* 	overflow: hidden; */
	margin: 10px 0px;
	padding:10px;
	padding-bottom: 30px;
	border-bottom: 1px solid #1F78B3;
	position: relative;
}

#newsflow div.entry[data-displaymode="dark"] > p.title{
	background: rgba(0,0,0,0.7);
	color: #ECECEC;
}

#newsflow div.entry[data-displaymode="dark"] > p.date{
	background: rgba(0,0,0,0.7);
	color: #ECECEC;
	top: 81px;
}

#newsflow div.entry > img{
	width: 100%;
	height: 190px;
	object-fit: cover;
	 
}

#newsflow div.entry > p.title{
	background: rgba(255, 255, 255, 0.85);
	position: absolute;
	margin: 0px;
	top: 55px;
	height: 20px;
	padding: 3px 5px;
	z-index: 1;
}

#newsflow div.entry > p.date{
	background: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	position: absolute;
	margin: 0px;
	top: 78px;
	top: 81px;
	padding: 1px 5px;
	z-index: 1;	
}
#newsflow div.entry > div.text{
/*    white-space: nowrap; */
/*    overflow: hidden; */
   width: 100%;
   padding-top: 10px;
/*    height: 100px; */
/*    text-overflow: ellipsis; */
}

#newsflow div.entry > button.readmorecmd{
	background: #1f71ab none repeat scroll 0 0;
    border: medium none;
    bottom: 5px;
    color: #fff;
    cursor: pointer;
    left: 50%;
    margin-left: -55px;
    padding: 2px 3px;
    position: absolute;
    width: 110px;
    z-index: 1;
}

/** Kontakt **/
#page_kontakt{
	
}

#page_kontakt > div.entry{
	width:302px;
	border-left: 1px dashed #808080;
	float: left;
	height: 220px;
	padding:0px 15px;
	color: #ececec;
}

#page_kontakt > div.entry:first-of-type{
	margin-left:1px;
	border-left: none;
}
 
#page_kontakt > div.entry > h1,
#page_kontakt > div.entry > h1.title{
	color:#78B8CC;
	margin: 0px;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 17px;
}

#page_kontakt > div.entry > h2{
	margin: 10px 0px -5x 0px;
	font-weight: bold;
	font-size: 15px;	
}

#page_kontakt > div.entry > p{
	margin: 5px 0px;
	font-size: 13px;
}


/** Über Uns **/

#ueberuns_subpages figure.image{
	width: 229px;
	height: 170px;
	margin: 10px;
	float: left;
}

#ueberuns_subpages figure.image:first-of-type{
	margin-left: 0px;
}

#ueberuns_subpages figure.image:last-of-type{
	margin-right: 0px;
}


#ueberuns_subpages figure.image:hover > figcaption,
#ueberuns_subpages figure.image[data-current="true"] > figcaption{
	margin-top: 50px;	
}

#ueberuns_subpages figure.image:hover:after,
#ueberuns_subpages figure.image[data-current="true"]:after{
	top: 130px;
}