/* hide english language texts */
[lang=en] {
    display: none;
}

/* site font */
@font-face { 
    font-family: 'eifFont';
    src: url('OpenSans-Regular.ttf') format('truetype'); 
}
@font-face { 
    font-family: 'eifFont';
    src: url('OpenSans-Italic.ttf') format('truetype');
    font-style: italic; 
}
@font-face { 
    font-family: 'eifFont';
    src: url('OpenSans-Bold.ttf') format('truetype');
    font-weight: bold; 
}
@font-face { 
    font-family: 'eifFont';
    src: url('OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic; 
}


body {
    background-image: linear-gradient(to right, #01176a, #0258d4);
    color: white;
    font-family: eifFont;
}

#body-row {
    margin-left: 0;
    margin-right: 0;    
}

/* navbar top with toogle-menu phone number mail adress and language change  */
#navbar {
    background-color: #ec6608;
    height:46px;
    z-index:100;    
    padding:0;
}

.navbar-nav { 
    flex-direction: row;
    
}

.navbar-collapse{
    background-color: #ec6608;
    padding-left: 10px;
}

.small-device-home{
    padding-left: 10px;
}

.small-device-logo{
    padding: 0px;
}

.contact-item{
    padding-left: 6vw;
    padding-right: 6vw;    
    font-size: 14pt;
}

.nav-link {
    color: white;
    font-size: 14pt;    
}

.nav-link .active{
    background-color:#01176a;
}

.dropdown-menu {
    background-color: #ec6608;
    color: white;
    border: none;
    margin-left:20px;
    border-radius: unset;
}

.dropdown-menu a:hover {
    background-color: #ec6608;        
    border: none;
}

.custom-toggler .navbar-toggler-icon {
    margin: 0px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255);    
}

/* header with logo, heading text and some colering polygons */

.header {
    position: fixed;
    top:46px;
    left: 0;    
    width: 70%;    
    background-color: white;
    text-align: center;
    height: 150px;
    z-index:80;
}

.header-small-device {
    position: fixed;
    top:46px;
    left: 0;    
    width: 100%;    
    background-color: white;    
    height: 150px;
    overflow: hidden;
    z-index:80;
}

#headerCarousel {
    height: 150px;
}

.header-text {
    display:flex;
    align-items:right;
    flex-direction: row;
    position: fixed;
    float: right;
    clear: both;
    top:46px;
    right: 0; 
    width:40%;        
    padding-top: 20px;
    padding-right: 0px;
    height: 150px;       
    color: white;
    text-align: left;    
    z-index:89;     
    line-height: 1;   
}

.header-text img{
      
    float: left;
    padding-right: 2%;
    
}

#logo{
    left:0;
    position: fixed;
    height: 150px;
}


.header_polygon {    
    width: 60%;
    height: 90%;
    top:0;
    right: 0;
    position: fixed;
    z-index:88;
    pointer-events: none;
}

.header_diagonal_polygon {    
    width: 60%;
    height: 100%;
    top:0;
    right: 0;
    position: fixed;
    z-index:86;
    pointer-events: none;
}
.header_diagonal_polygon_line {    
    width: 60%;
    height: 90%;
    top:0;
    right: 0;
    position: fixed;
    z-index:89;
    pointer-events: none;
}

 /* Main content picture in triangle format  */
.polygon_image {    
    width: 60%;
    height: 100%;
    top:0;
    right: 0;
    position: fixed;
    z-index:20;
    overflow: hidden;
}

.diagonal_polygon {    
    width: 60%;
    height: 100%;
    top:0;
    right: 0;
    position: fixed;
    z-index:21;
    overflow: hidden;
}

.diagonal_polygon_line {    
    width: 60%;
    height: 100%;
    top:0;
    right: 0;
    position: fixed;
    z-index:22;
    overflow: hidden;
}

.index-polygon {    
    width: 100%;
    height: 100%;
    top:196px;
    left: 0;
    position: fixed;
    z-index:20;
    overflow: hidden;
}

/* Main content */
#content-container {
    top: 196px; 
    margin-left:auto;    
    float: left;
    z-index:25;    
}

#content-container-space {
    top: 196px; 
    margin-left:auto;
    width: 180px;
    z-index:25;
}

#index-img-div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url("../images/index_skizze_1920.jpg");        
    left:380px;
    top: 196px;     
    z-index:19;
    overflow: hidden;
}

#index-img{    
    width: 100%;    
}

.index-list{
    position: absolute;
    list-style-type: none;
}

.index-list-small{    
    list-style-type: none;
    padding-inline-start: 0;
}

.content-text{
    position: relative;
    left: 0;
    max-width: 50%;
    width: 50%;
}

.content-text-top{    
    position: relative;
    left: 0;
    max-width: 40%;
    width: 40%;
}

.content-text-small{    
    max-width: 100%;
    width: 100%;
}

.index-text{
    position: absolute;
    top:300px;
}

.index-list li{    
    position: absolute;
    height: 40px;
    width: 200px;    
}

.index-list-small li{        
    height: 50px;
    width: 100%;
    margin: 5px;     
    background-color: #0258d4;    
}

#index-list-li1{
    top: 45px;
    left: 45px;
}

#index-list-li2{
    top: 90px;
    left: 90px;
}

#index-list-li3{
    top: 135px;
    left: 135px;
}

#index-list-li4{
    top: 180px;
    left: 180px;
}

#index-list-li5{
    top: 225px;
    left: 225px;
}

#index-list-li6{
    top: 270px;
    left: 270px;
}

#index-list-li7{
    top: 315px;
    left: 315px;
}

/* nav-bar bottom with some links */
.footer {
    position: fixed;
    height:46px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #ec6608;
    color: white;
    text-align: center;
    z-index:100;
    padding: 0px;
}

.footer-item{
    padding-left: 9vw;
    padding-right: 9vw;
}

.impressum_icon{
    font-size: 24pt;
    margin-top: 0px;
    padding: 0px;
    vertical-align: top;
    top: 0px;
}

/* diagonal shape for special design */
.diagonal_fill {
    position: absolute;
    z-index:21;
    right: 0;
    top: 0;
    max-width: 60%;
    width: 60%;
    height: 40px;    
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform:   skew(0, 45deg);
    -moz-transform:   skew(0, 45deg);
    -ms-transform:  skew(0, 45deg);
    -o-transform:   skew(0, 45deg);
    transform:   skew(0, 45deg);   
    background: #0258d4;
    opacity: 0.5;    
    overflow: hidden;
}

.diagonal_line {
    position: absolute;
    z-index:21;
    right: 0;
    top: 0;
    max-width: 60%;
    width: 60%;
    height: 2px;          
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform:   skew(0, 45deg);
    -moz-transform:   skew(0, 45deg);
    -ms-transform:   skew(0, 45deg);
    -o-transform:   skew(0, 45deg);
    transform:   skew(0, 45deg);    
    background: #ec6608;      
    overflow: hidden;
}

/* Sidebar with menu items and seperators */
#sidebar-container {
    position: absolute;
    margin-left: 0px;
    margin-top:196px;
    margin-bottom:46px;
    left:0;
    padding: 0;
    z-index: 80;
    
}

.sidebar-expanded {
    width: 160px;
}

.sidebar-collapsed {
    width: 60px;
    
}

.sidebar-action {
    height: 105px;
    background-color: #ec6608;
    color: white;
    border: none;
    padding-top: 8px;
    padding-bottom: 2px;    
}

.sidebar-single-line{
    padding-top: 8px;
}

.sidebar-icon{
    height: 48px;
    width: 48px;
}

.sidebar-action-active {  
    height: 105px;  
    background-color: #01176a;
    color: white;
    border: none;
    padding-top: 8px;
    padding-bottom: 2px;
}

#sidebar-container .list-group li {
    border: none;
}

/* Sidebar Separators */
.sidebar-separator-title {
    background-color: #ec6608;
    height: 35px;
    border: none;
}

.sidebar-separator-small {
    background-color: #ec6608;
    height: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: none;
}

.sidebar-separator-border {
    background-color: white;
    height: 1px;
    width: 200px;    
}

.sidebar-separator {    
    height: 25px;
}

.logo-separator {    
    height: 60px;
    border: none;
}