@charset "utf-8";
/* 
	Style sheet for: akbarian.de 
	Created by: RD, on 02.Feb.2013 
	Last update by: AMA, on 22.Mai.2018
	Importing reset file:  No Reset File
        Reset: [disabled]
	Overriding: 
	Namespacing:
	Naming Convention: camelCase example: #mainArticle, .bottomImg
	Images: located in the assets/images folder at the root of the main website
	
	Table of contents: 
		1.	Main Elements 
		2.	HEADER
		3.	MAIN ARTICLE
		4.	HOME PAGE
		5.	CONTENT DIV
		6.	DOWNLOAD PAGE
		7.	IMPRESSUM PAGE
		8.	VORGEHENSWEISE PAGE
		9.	KONTAKT PAGE
		10.	PROZESSMANAGEMENT PAGE
		11.	TRAININGS PAGE
		12.	PERSONALMANAGEMENT PAGE
		13.	MARKETING PAGE
		14.	VERTRIEB PAGE
		15.	DIENSTLEISTUNGEN PAGE
		16.	FOOTER
		17.	Reusable Rules
			17.1.	Checked List
		18. Table
	

	FONTS:
		font-family: 'Rambla', sans-serif;
		font-family: 'Great Vibes', cursive;
	
	Color Scheme:
		rgb(242,239,223)
		rgb(101,111,140)
		rgb(155,191,171)
		rgb(65,54,89)
		rgb(33,20,38)
*/

/*
	##########################################################################
	#                           Main Elements				 #	
	##########################################################################
*/
html{
	padding: 0;
	margin: 0;
}

body, h1, h2, h3, h4, p, a, article, section, footer{
	padding: 0;
	margin: 0;
}

article, section, figure, figcaption, hgroup, header, nav, footer{
    display:block;
}

img{
    max-width: 100%;
}

body{
    font-family:Verdana, Arial, Helvetica;
    line-height: 1.3;
    font-size:100%;
    width:96%;
    max-width:1920px;
    margin: 0 auto;
    background-color: rgb(255, 255, 255);
}



/*
	##########################################################################
	#				HEADER					 #	
	##########################################################################
*/
header#mainHeader{
	position:relative;
	display:block;
	width:100%;
	min-width:240px;
	height:262px;
	padding-top:3px;
	margin:0 auto 0px auto;
 	font-size:16px;
	line-height: 1.3;
	background-color: white;
}

div#h3dimgheader{
    width:100%;
    height:261px;
    background-color: white;
    background-image: url('../assets/images/center.png');
    background-repeat: repeat-x;
}

div#h3dimgheader div.leftdv{
    float:left;
    height:261px;
    width: 190px;
    margin:0;
    background-image: url('../assets/images/left.png');
    background-repeat: no-repeat;
}

div#h3dimgheader div.rightdv{
    float:right;
    height:261px;
    width: 190px;
    background-image: url('../assets/images/right.png');
    background-repeat: no-repeat;
}

header#mainHeader a{
    text-decoration:none;
    color:black;
}

header#mainHeader h1{
    position: absolute;
    margin:0;
    padding:0;
    top:20px;
    left:110px;
    text-indent:-9999px;
    height:120px;
    width:100px;
    background-image:url('../assets/images/logo2021.png');
    background-repeat:no-repeat;
    background-size: contain;
}

header#mainHeader h1 a{
    display:block;
    height:120px;
    width:100px;
    margin:0;
    margin-top:-40px;
}

header#mainHeader p.siteSlogan{
    position: absolute;
    font-family: 'Great Vibes', cursive;
    text-align: center;
    top: 54px;
    width: 100%;
    font-size: 2em;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.4); 
    text-shadow: 3px 4px 5px #FFFFFF, 0px 0px 10px #FFFFFF, -2px -2px 1px #FFFFFF; 
    opacity: 1;
    z-index:100;
    cursor:default;
    background:transparent;
}

header#mainHeader p.siteAddress{
    position:absolute;
    font-size:1.7em;
    font-weight:normal;
    color:black;
    top:149px;
    left:103px;
    text-shadow:5px 5px 5px rgba(0,0,0,0.5);
    z-index:100;
    background:transparent;
    margin:0;
}

header#mainHeader p.siteAddress small{
    font-size: 0.5em;
    font-weight: bold;
}

header#mainHeader p.siteDescription{
	position:absolute;
	font-size:1.2em;
	font-weight:normal;
	top:182px;
	left:103px;
	text-shadow:5px 5px 5px rgba(0,0,0,0.5);
	z-index:100;
	background:transparent;
	color:black;
	margin:0;
}

header#mainHeader img.sonnenuhr{
	position:absolute;
	right:91px;
	bottom:40px;
}

header#mainHeader nav h2{
    display:none;
}

header#mainHeader ul.navigationList{
	position:absolute;
	top:14px;
	right:104px;
	margin:0;
	padding:0;
	font-size:0.9em;
	list-style: none;
	z-index:999;
}

header#mainHeader ul.navigationList li{
	float:left;
	margin-right:1em;
}

header#mainHeader ul.navigationList li a:link, header#mainHeader ul.navigationList li a:visited{
	text-transform: capitalize;
	text-decoration: none;
	color:rgb(128,128,128);
	-webkit-transition: color ease-in-out 0.4s;
	-moz-transition: color ease-in-out 0.4s;
	-o-transition: color ease-in-out 0.4s;
	transition: color ease-in-out 0.4s;
}

header#mainHeader ul.navigationList li a:hover, header#mainHeader ul.navigationList li a:active,header#mainHeader ul.navigationList li a:focus{
	color: rgb(0, 0, 255);
}

header#mainHeader ul.navigationList li a.current{
	color: rgba(0, 0, 255,0.6);
}

body#index header#mainHeader a.homePage, 
body#dienstleistungen header#mainHeader a.dienstleistungen,
body#vorgehensweise header#mainHeader a.vorgehensweise, 
body#kontakt header#mainHeader a.kontakt, 
body#download header#mainHeader a.download{
	color: rgba(0, 0, 255,0.6);
	cursor:default;
}
/*
	##########################################################################
	#                            MAIN ARTICLE               	         	 #	
	##########################################################################
*/
article#mainArticle{
	float: left;
	width:99%;
	height:auto;
	margin: -5px auto 20px auto;
	padding-left:1%;
	line-height: 1.5;
}

article#mainArticle>h2{
	font-size: 1.2em;
    font-weight: bold;
	margin-bottom: 10px;
	padding-left: 15px;
}

article#mainArticle h2 + p{
 	padding-left: 30px;
	padding-right:30px; 
}

/*
	##########################################################################
	#                               HOME PAGE				 #	
	##########################################################################
*/
article#mainArticle div.viewPartWrapper{
	width: 93%;
	height: auto;
	margin: 30px auto 35px auto;
}

article#mainArticle div.viewPartWrapper section.viewPart{
	width: 30%;
        
}

article#mainArticle div.viewPartWrapper section.center{
    	border-right:solid 2px rgba(0,200,250,0.5);
	border-left:solid 2px rgba(0,200,250,0.5);
        margin: 0px auto;
        padding:0 2.5% 5px 0;
}

article#mainArticle div.viewPartWrapper section.left{
    float: left;
}

article#mainArticle div.viewPartWrapper section.right{
    float: right;
}

article#mainArticle div.viewPartWrapper section.viewPart h3{
	font-size: 1em;
        font-weight: bold;
	text-align: center;
	color: rgb(14,64,137);
	text-shadow: 1px 1px 1px #FFFFFF;
}

article#mainArticle div.comConWrapper img.bottomImg{
	display:block;
	width:300px;
	height:250px;
	margin:10px auto 20px auto;
}
/*
	##########################################################################
	#				CONTENT DIV				 #	
	##########################################################################
*/
article#mainArticle div.comConWrapper{
	clear: left;
 	padding-left: 30px; 
	padding-right:30px;
	margin-bottom: 10px;
}

article#mainArticle div.comConWrapper a{
	color:rgb(0,0,255);
	text-decoration:none;
}

article#mainArticle div.comConWrapper b{
	color:rgb(0,0,0);
}
/*
	##########################################################################
	#				DOWNLOAD PAGE                   	 #	
	##########################################################################
*/
article#mainArticle div.download{
	width:90%;
	margin:10px auto 0 auto;
}

article#mainArticle div.download section.dlsection{
	position:relative;
	width:48%;
	min-height:700px;
	border:solid 1px black;
}

article#mainArticle div.download section.left{
	float:left;
}

article#mainArticle div.download section.right{
	float:right;
}

article#mainArticle div.download section.left img{
	width:400px;
	height:150px;
        display: block;
        margin: 15px auto;
	-webkit-transition:all 1s;
	-moz-transition:all 1s;
	-ms-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
}

article#mainArticle div.download section.left img:hover, article#mainArticle div.download section.left img:focus, article#mainArticle div.download section.left img:active{
	-webkit-transform:scale(1.4);
	-moz-transform:scale(1.4);
	-ms-transform:scale(1.4);
	-o-transform:scale(1.4);
	transform:scale(1.4);
	z-index:999;
} 

article#mainArticle div.download section.dlsection a.pdf{
	display:block;
	position:absolute;
	bottom:0px;
	right:0px;
	width:100%;
	text-align:center;
	background:rgba(0,0,0,0.2);
}

article#mainArticle div.download section.dlsection a.pdf span{
	font-size:0.7em;
}

article#mainArticle div.download section.dlsection div.content{
	margin:0 10px 0 10px;
	padding-bottom:2em;
}

article#mainArticle div.download section.dlsection div.content a{
	color:rgb(0,0,255);
	text-decoration:none;
}

article#mainArticle div.download section.dlsection h3{
	font-size:1em;
	padding:1em;	
	margin-bottom:0.7em;
	text-align:center;
	background-color:rgb(242,239,223);
        height: 3.125em;
        display: block;
}

article#mainArticle div.download section.right h3{
	line-height:3;
}

/*
	##########################################################################
	#				IMPRESSUM PAGE				 #	
	##########################################################################
*/
body#impressum div.impressum{
	float:left;
	width:50%;
	padding-left:1em;
}

body#impressum p.contact{
	margin-bottom:0.2em;
}

body#impressum div.haftungshinweis p.copyright{
	font-size:0.8em;
}

#ibmlogo{
    margin-top: 115px;
}

body#impressum div.haftungshinweis{
    padding-left:1em;
    width: 98%;
    clear: left;
}



/*
	##########################################################################
	#				VORGEHENSWEISE PAGE			 #	
	##########################################################################
*/
article#mainArticle div.comConWrapper div.vorgehensweiseContainer{
	width:100%;
	margin:0 auto;
}

article#mainArticle div.comConWrapper ol.vorgwol{
	float:left;
	width:45%;
}

article#mainArticle div.comConWrapper div.vorgehensweise{
	position:relative;
	float:right;
	width:620px;
	height:270px;
	margin:100px auto 0 auto;
	background-image: url('../assets/images/vorgehensweise.png');
	background-repeat:no-repeat;
	background-size:620px 270px;
}

article#mainArticle div.comConWrapper div.vorgehensweise div.desc{
 	position:absolute;
	width:65px;
	height:50px;
}

article#mainArticle div.comConWrapper div.vorgehensweise div.desc div{
	width:0;
	height:0;
	overflow:hidden;
	padding:1em;
	border:solid 3px rgba(0,100,255,0.5);
	border-radius:10px;
	background:rgba(255,255,255,1);
	opacity:0;
	visibility:hidden;
	-webkit-transition:opacity 0.85s;
 	-moz-transition:opacity 0.85s;
	-o-transition:opacity 0.85s;
	transition:opacity 0.85s;
	font-size:13px;
	line-height:1.8;
}

article#mainArticle div.comConWrapper div.vorgehensweise div#vorbereitung{
	top:105px;
	left:48px;
}

article#mainArticle div.comConWrapper div.vorgehensweise div#erstGespraech{
	top:105px;
	left:127px;
}

article#mainArticle div.comConWrapper div.vorgehensweise div#utw{
	top:30px;
	left:222px;
	width:125px;
	height:215px;
}

article#mainArticle div.comConWrapper div.vorgehensweise div#auswertung{
	top:105px;
	right:95px;
	width:150px;
}

article#mainArticle div.comConWrapper div.vorgehensweise div.desc:hover div{
    width:300px;
    min-height:40px;
    height:auto;
    opacity:1;
    visibility:visible;
    margin-top:-160px;
    cursor:default;
}

article#mainArticle div.comConWrapper div.vorgehensweise div#vorbereitung:hover div{
    margin-top:-205px; 
}

article#mainArticle div.comConWrapper div.vorgehensweise div#erstGespraech:hover div{
    margin-top:-180px; 
}

article#mainArticle div.comConWrapper div.vorgehensweise div#utw:hover div{
    margin-top:-127px;
    margin-left:-96px;
    width:290px;
}

article#mainArticle div.comConWrapper div.vorgehensweise div#auswertung:hover div{
    width:200px;
    margin-top:-130px;
    margin-left:-40px;
}

#vorgehensweiseImg{
    display: none;
}

ol.vorgwol{
    margin-top:0; 
}

ol.vorgwol>li{
    margin-top:10px;
}

ol.vorgwol li li{
    margin-top:5px;
}
/*
	##########################################################################
	#				KONTAKT PAGE                             #	
	##########################################################################
*/
body#kontakt article#mainArticle div.comConWrapper div:first-child{
    float:left;
    width:60%;
}

body#kontakt article#mainArticle div.comConWrapper img#kontaktImg{
    float:right;
}
/*
	##########################################################################
	#				PROZESSMANAGEMENT PAGE			 #	
	##########################################################################
*/
body#prozessmanagement article#mainArticle div.comConWrapper ul{
    list-style:none;
}

body#prozessmanagement article#mainArticle div.comConWrapper p{
    margin-bottom:0.3em;
}
/*
	##########################################################################
	#				TRAININGS PAGE				 #	
	##########################################################################
*/
body#trainings article#mainArticle div.comConWrapper p{
    margin-bottom:0.2em;
}

body#trainings article#mainArticle div.comConWrapper ul li{
    margin-bottom:0.5em;
}

body#trainings article#mainArticle div.comConWrapper p.details{
    font-size:0.8em;
}
/*
	##########################################################################
	#			PERSONALMANAGEMENT PAGE                          #	
	##########################################################################
*/
body#personalmanagement article#mainArticle div.comConWrapper p{
    margin-bottom:0.3em;
}

body#personalmanagement article#mainArticle div.comConWrapper ul{
    margin:0.5em 0 0.5em 0.7em;
}

body#personalmanagement article#mainArticle div.comConWrapper ul li{
    margin-bottom:0.2em;
}
/*
	##########################################################################
	#				MARKETING PAGE				 #	
	##########################################################################
*/
body#marketing article#mainArticle div.comConWrapper p{
    margin-bottom:0.3em;
}

body#marketing article#mainArticle div.comConWrapper p:first-child{
    margin:0 0 0.5em 0;
}

body#marketing article#mainArticle div.comConWrapper ul{
    margin:0.5em 0 0.5em 0.7em;
}

body#marketing article#mainArticle div.comConWrapper ul li{
    margin-bottom:0.3em;
}

body#marketing article#mainArticle div.comConWrapper div:first-child{
    float:left;
    width:60%;
}

body#marketing article#mainArticle div.comConWrapper img#marketingImg{
    float:right;
}
/*
	##########################################################################
	#				VERTRIEB PAGE                            #	
	##########################################################################
*/
body#vertrieb article#mainArticle div.comConWrapper p{
    margin-bottom:0.3em;
}

body#vertrieb article#mainArticle div.comConWrapper ul{
    margin:0.5em 0 0.5em 0;
}

body#vertrieb article#mainArticle div.comConWrapper ul li{
    margin-bottom:0.9em;
}

/*
	##########################################################################
	#				FOOTER					 #	
	##########################################################################
*/

footer#pageFooter{
    clear: both;
    width: 100%;
    min-height: 20px;
    height:auto;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    background-color: rgba(153, 153, 153, 0.2);
    font-family: Rambla, sans-serif;
    text-align:center;
}

footer#pageFooter p{
    margin-top:10px;
}

footer#pageFooter A, A:visited, footer A:hover{
    text-decoration: none;
    color: #0000FF;
}

footer#pageFooter p span{
    border-right: 1px solid black;
    padding-right: 0.5em;
    padding-left: 0.5em;
    text-align: center;
}

footer#pageFooter p span:last-child{
    border:none;
}

footer#pageFooter p.copyright a{
    color:black;
}

body#index footer#pageFooter a.homePage,
body#dienstleistungen footer#pageFooter a.dienstleistungen,
body#trainings footer#pageFooter a.trainings,
body#personalmanagement footer#pageFooter a.personalmanagement,
body#marketing footer#pageFooter a.marketing,
body#vertrieb footer#pageFooter a.vertrieb,
body#vorgehensweise footer#pageFooter a.vorgehensweise,
body#kontakt footer#pageFooter a.kontakt,
body#download footer#pageFooter a.download,
body#impressum footer#pageFooter a.impressum{
    border-bottom:solid 1px rgba(0,0,255,0.5);
    cursor:default;
}
/*
	##########################################################################
	#				Reusable Rules				 #	
	##########################################################################
*/
ul.checkedList{
    list-style-image: url('../assets/images/tick.png');
    color:rgb(0,0,0);
}

ul.checkedList li{
    padding-right:0.2em;
}

ul.checkedList li a{
    text-decoration:none;
    color:rgb(0,0,0);
}

.vertical-line{
    writing-mode:tb-rl;
	font-size:3em;
	float:left;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform:rotate(180deg);
    transform: rotate(180deg);
    white-space:nowrap;
    display:block;
	margin:15px;
}
.red-text{
	color:red;
}
.green-text{
	color:rgb(0,255,0);
}
.blue-text{
	color:rgb(0,0,255);
}
/*
	##########################################################################
	#									 Table 								 #	
	##########################################################################
*/
table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0.5em 0;
	font-size: 0.9em;
}

th {
	background-color: rgb(115, 215, 0);
	color: white;
}

th,
td {
	padding: 15px;
	text-align: left;
	border: none;
	border-bottom: 1px solid #ddd;
	margin: 0;
}

tr {
	transition: all 0.5s;
}

tr:hover {
	background-color: rgba(150, 144, 144, 0.4);
}

table td a {
	padding: 0.8em;
	border-radius: 0.5em;
	text-decoration: none;
	color: black;
	font-weight: 300;
	transition: all 0.3s;
	font-size: 0.8em;
	border: 1px solid rgba(59, 158, 62, 1);
}

table td a:hover {
	border: 1.5px solid rgba(59, 158, 62, 1);
	font-size: 0.82em;
}

td.va {
	text-align: center;
	vertical-align: middle;
}
.isaqb_logo {
	width: 300px;
	float: right;
	margin-bottom: 15px;
}

div.panel {
	background-color: white;
	width: 100%;
	overflow: hidden;
}

div.panel h3 {
	margin: 0.2em 0;
}

div.panel div.content {
	padding: 0 0.8em;
}


.form_wrapper {
    width: 50%;
    margin: 0 auto;
}

label {
    display: block;
}

input,
select {
    transition: border-color .5s ease-out;
    border: 1px solid rgba(146, 144, 144, 0.8);
    border-left: 5px solid;
}

input:optional {
    border-left-color: #999;
}

input:required:valid,
select:required:valid {
    border-left-color: palegreen;
}

input:required:focus:valid {
    background: url("../assets/images/tick.png") no-repeat 95% 50%;
    background-size: 25px;
  }

input:invalid,
select:invalid {
    border-left-color: salmon;
}

input[type=text],
input[type=email],
input[type=number],
select,
textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=checkbox] {
    display: inline-block;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

textarea {
    height: 200px;
}

input[type=submit]:hover {
    background-color: #45a049;
}


#mainContent {
	display:flex;
}

#mainContent h2 {
	margin-bottom: 0.5em;
}

#mainContent .vertical-line {
	float: none;
	text-align: right;
	flex: 1;	
}

#mainContent .sideContent {
	flex-grow: 3;
	padding-right: 1em;
}

.flex-container {
	width: 95%;
	display: flex;
	margin: 2em 0;
	flex-wrap: nowrap;
	justify-content: center;
}

.flex-container section {
	flex: 1;
}

.flex-container section h3 {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	color: rgb(14, 64, 137);
	text-shadow: 1px 1px 1px #FFFFFF;
}

.flex-container section:nth-child(2) {
	border-left: 1px solid rgba(0,200,250,0.5);
	border-right: 1px solid rgba(0,200,250,0.5);
}

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

.bio {
    display: flex;
    flex-direction: column;
}

.single-bio {
    display: flex;
    padding: 10px 0;
    margin: 5px 0;
}

.bottom-bio{
    flex-direction: row;
}

.top-bio{
    flex-direction: row-reverse;
}

.bio-info {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.bio img{
    width: 160px;
    height: 171px;
    border-radius: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    margin-right: 15px;
}

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

@media only screen and (max-width: 1340px) {
    body#vorgehensweise #mainArticle .comConWrapper ol.vorgwol{
	    width:95%;
    }
    
    #vorgehensweiseImg{
        display: block;
        margin: 0 auto;
        clear: both;
    }
    
    article#mainArticle div.comConWrapper div.vorgehensweise{
        display: none;
    }    
    
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    header#mainHeader p.siteSlogan{
        font-size: 1.4em;
        top: 64px;
    }
    

    body#kontakt article#mainArticle div.comConWrapper img#kontaktImg{
        float:none;
        clear: both;
        margin: 0 auto;
        display: block;
    }    
    
    body#marketing article#mainArticle div.comConWrapper img#marketingImg{
        float:none;
        clear: both;
        margin: 0 auto;
        display: block;        
    }
    
    body#marketing article#mainArticle div.comConWrapper div:first-child{
        width:95%;
    }    
    
    article#mainArticle div.download section.dlsection{
        min-height: 900px;
    }  
    
    article#mainArticle div.download section.right h3{
        line-height: 2;
    }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    article#mainArticle div.viewPartWrapper section.viewPart{
        width: 100%;
    }
    
    article#mainArticle div.viewPartWrapper section.center{
        border: none;
        padding: 0;
    }   
    

    article#mainArticle div.viewPartWrapper section.right{
        border-top:solid 2px rgba(0,200,250,0.5);
	border-bottom:solid 2px rgba(0,200,250,0.5);
        margin: 15px 0;
        padding: 15px 0;
    }    
    
    body#kontakt article#mainArticle div.comConWrapper div:first-child{
        width:95%;
    }    
    
    body#kontakt article#mainArticle div.comConWrapper img#kontaktImg{
        float:none;
        clear: both;
        margin: 0 auto;
        display: block;
    } 
    
    body#marketing article#mainArticle div.comConWrapper img#marketingImg{
        float:none;
        clear: both;
        margin: 0 auto;
        display: block;        
    }
    
    body#marketing article#mainArticle div.comConWrapper div:first-child{
        width:95%;
    }    
    
    article#mainArticle div.download section.dlsection{
        width: 90%;
        float: none;
        margin-top:15px;
    }  
    
    div#h3dimgheader{
        display: none;
    }

    div#h3dimgheader div.leftdv{
        display: none;
    }

    div#h3dimgheader div.rightdv{
        display: none;
    }
    
    header#mainHeader{
        background: -moz-linear-gradient(top,  rgba(233,238,242,1) 0%, rgba(130,141,146,0.94) 42%, rgba(130,141,146,0.96) 60%, rgba(233,238,242,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,238,242,1)), color-stop(42%,rgba(130,141,146,0.94)), color-stop(60%,rgba(130,141,146,0.96)), color-stop(100%,rgba(233,238,242,1)));
        background: -webkit-linear-gradient(top,  rgba(233,238,242,1) 0%,rgba(130,141,146,0.94) 42%,rgba(130,141,146,0.96) 60%,rgba(233,238,242,1) 100%);
        background: -o-linear-gradient(top,  rgba(233,238,242,1) 0%,rgba(130,141,146,0.94) 42%,rgba(130,141,146,0.96) 60%,rgba(233,238,242,1) 100%);
        background: -ms-linear-gradient(top,  rgba(233,238,242,1) 0%,rgba(130,141,146,0.94) 42%,rgba(130,141,146,0.96) 60%,rgba(233,238,242,1) 100%);
        background: linear-gradient(to bottom,  rgba(233,238,242,1) 0%,rgba(130,141,146,0.94) 42%,rgba(130,141,146,0.96) 60%,rgba(233,238,242,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9eef2', endColorstr='#e9eef2',GradientType=0 );
        box-shadow: 0 0 2px 3px rgba(128,128,128,0.5);
        -webkit-box-shadow: 0 0 2px 3px rgba(128,128,128,0.5);
        border-radius: 10px;
        margin-bottom: 20px;
        margin-top:10px;
        height: 500px;
    }
    
    header#mainHeader h1{
        left:10px;
    }
    
    header#mainHeader p.siteSlogan{
        font-size: 1.3em;
        top: 10px;
    }
    
    header#mainHeader p.siteAddress{
        left:23px;
    }
    
    header#mainHeader p.siteDescription{
        left:23px;
    }
    
    header#mainHeader img.sonnenuhr{
        right:10px;
        bottom: 0;
        width:100px;
        height:138.73px;    
    }  
    
    header#mainHeader ul.navigationList{
        left: 23px;
        right:0;
        top:220px;
        font-size: 1.5em;
    }
    
    header#mainHeader ul.navigationList li{
        width:65%;
        min-width: 195px;
        margin-top: 8px;
        background: rgb(176,212,227);
        background: -moz-linear-gradient(top,  rgba(176,212,227,1) 0%, rgba(136,186,207,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,212,227,1)), color-stop(100%,rgba(136,186,207,1)));
        background: -webkit-linear-gradient(top,  rgba(176,212,227,1) 0%,rgba(136,186,207,1) 100%);
        background: -o-linear-gradient(top,  rgba(176,212,227,1) 0%,rgba(136,186,207,1) 100%);
        background: -ms-linear-gradient(top,  rgba(176,212,227,1) 0%,rgba(136,186,207,1) 100%);
        background: linear-gradient(to bottom,  rgba(176,212,227,1) 0%,rgba(136,186,207,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 );
        padding: 0.1em 0.3em 0.1em 0.3em;
        border-radius: 10px;
        text-align: center;
    }
    
    header#mainHeader ul.navigationList li:hover{
        background: rgb(136,186,207);
        background: -moz-linear-gradient(top,  rgba(136,186,207,1) 1%, rgba(176,212,227,1) 94%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(136,186,207,1)), color-stop(94%,rgba(176,212,227,1)));
        background: -webkit-linear-gradient(top,  rgba(136,186,207,1) 1%,rgba(176,212,227,1) 94%);
        background: -o-linear-gradient(top,  rgba(136,186,207,1) 1%,rgba(176,212,227,1) 94%);
        background: -ms-linear-gradient(top,  rgba(136,186,207,1) 1%,rgba(176,212,227,1) 94%);
        background: linear-gradient(to bottom,  rgba(136,186,207,1) 1%,rgba(176,212,227,1) 94%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bacf', endColorstr='#b0d4e3',GradientType=0 );
    }
       
    header#mainHeader ul.navigationList li a:link, header#mainHeader ul.navigationList li a:visited{
        display: block;
        color: black;
    }
    
    header#mainHeader ul.navigationList li a:hover, header#mainHeader ul.navigationList li a:active,header#mainHeader ul.navigationList li a:focus{
	color: rgb(0, 0, 255);
    }
    header#mainHeader ul.navigationList li a.current{
	color: rgba(0, 0, 0,0.6);
    }
    
    body#index header#mainHeader a.homePage, 
    body#dienstleistungen header#mainHeader a.dienstleistungen,
    body#vorgehensweise header#mainHeader a.vorgehensweise, 
    body#kontakt header#mainHeader a.kontakt, 
    body#download header#mainHeader a.download{
	color: rgba(255, 255, 255,1);
	cursor:default;
    }
    
    article#mainArticle div.download section.right h3{
        line-height: 2;
	}
	
    .form_wrapper {
        width: 100%;
	}
	
	
    .flex-container {
		flex-direction: column;
	}

	.flex-container section:nth-child(2){
		border:none;
		border-top: 1px solid rgba(0,200,250,0.5);
		border-bottom: 1px solid rgba(0,200,250,0.5);
		margin: 1em 0;
		padding: 1em 0;
    }
    
    .bio {
        display: flex;
        flex-direction: column;
    }
    
    .single-bio {
        display: block;

    }
       
    .bio-info {
        display: block;
        padding: 10px 0 0 0px;
    }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    header#mainHeader p.siteSlogan{
        display: none;
    }
    
    header#mainHeader img.sonnenuhr{
        right:0px;
        width:70px;
        height:97.111px;    
    }
    
    footer#pageFooter{
        font-size: 1.4em;
    }
    
    footer#pageFooter p span{
        display: block;
        border:none;
    }

    .bio {
        display: flex;
        flex-direction: column;
    }
    
    .single-bio {
        display: block;

    }
   
    .bio-info {
        display: block;
        padding: 10px 0 0 0px;
    }
}