@font-face {
	font-family: 'klinic slab';
	src: url('/fonts/KlinicSlabBook.otf') format('opentype'); 
 
}

body {
    padding-top: 50px;
    padding-bottom: 20px;

    color:#808080;
    font-family: 'Neutra', 'klinic slab', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size:18px;
}

body a {
    color :#80006d;
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
   
    /* DEBUG */
    /*border:1px solid black;*/
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.HighlightColor {
color :#80006d;
}


.HeaderLogo {
    width: 700px;
    margin: 10px;
    float: left;

    /* Erst mit HeaderImg notwendig */
    height: 150px;
    

    /* DEBUG */
    /*border: 1px solid black;*/
    /*background-color: lightblue;*/
    
}

.HeaderLogo img {
    width:100%;
}

.HeaderImg {
    max-width:400px;
    /*min-width:200px;*/
    margin:10px;
   overflow:hidden;
    
    /* Erst mit HeaderImg notwendig */
    height: 145px;    

    /* DEBUG */
    border:2px solid #AAAAAA;

    box-shadow: 5px 5px 5px #AAAAAA;
    background-color: #f8f8f8;

    background-size:cover;
}


.HeaderImgtag {
    max-width:400px;
   overflow:hidden;
    
    /* Erst mit HeaderImg notwendig */
    height: 145px; 
}
.ContentPanel {
    width:700px; 
    margin:20px;
    float:left;

    box-shadow: 5px 5px 5px #AAAAAA;
    background-color: #f8f8f8;

    /* DEBUG */
    /*border:1px solid black;*/
  
}

.ContentPanel ul {
    list-style-type:square;
}

.ContentPanel ul ul {
    list-style-type:circle;
}

.ContactPanel {
    margin:20px;
    min-width:200px;
    overflow-x:hidden;

    box-shadow: 5px 5px 5px #AAAAAA;
    background-color: #f8f8f8;

    /* DEBUG */
    /*border:1px solid black;*/
}


 .ContactPanelHeadR {
            float:left;
            display: block;
        }

 .ContactPanelHeadL {
            float:left;
            display: none;
        }


 .ContentImg {
    width:100%;
    margin-bottom:10px;
    margin-top:10px;
}

  .ContentImg img {
    width:100%;
}

/*      Small Screens         */
@media screen and (max-width: 1000px) {
    
    .HeaderImg {
        display: none;
    }

    .HeaderLogo {
        width: 95%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    }

    body {
        padding-top:10px;
    }

    /*.ContentImg {
        display: none;
    }*/
    
}

@media screen and (max-width: 1200px) {

    .HeaderImg {
        display: none;
    }


    .ContentPanel {
        clear:both;
        width: 95%;
    }

    .ContactPanel {
        clear:both;
        float:left;
        width: 95%;

    }

    .ContactPanelHeadR {
             display: none;
        }
        .ContactPanelHeadL {
             display: block;
        }

       
}