@import "font-awesome.css";


@font-face {
    font-family: 'muliitalic';
    src: url('../fonts/muli-italic-webfont.woff2') format('woff2'),
         url('../fonts/muli-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mulilight';
    src: url('../fonts/muli-light-webfont.woff2') format('woff2'),
         url('../fonts/muli-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mulilight_italic';
    src: url('../fonts/muli-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/muli-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'muliregular';
    src: url('../fonts/muli-regular-webfont.woff2') format('woff2'),
         url('../fonts/muli-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* ---------------- CSS-Reset ------------------- */
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0px none;
	font-weight: normal;
	font-style: inherit;
	font-family: inherit;
	font-variant: inherit;
	text-decoration: none;
	table-layout: inherit;
} 

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/* ---------------- colors ------------------- */



/*

Lila 
107,22,135

Blau
17,17,131

Grün
39,138,42

Gelb
255,230,16

Rot1
255,64,0

Rot2
255,0,0


*/

/* ---------------- body / HTML ------------------- */

* {
    transition: all 0.3s linear;
}

html {
	font-size: 100%;
	font-family: 'mulilight'; 
    font-size: 100%;
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
    width: 100%;
    background-color: #171511;
    height: 100%;
}

body {
    font-size: 1rem;
    font-weight: normal;
    color: #878787;
    text-decoration: none;
    
    margin: auto;
    width: 100%;
    height: 100%;
    
    font-size: 1rem;
    line-height: 1.7rem;
    padding-bottom: 2rem;
    height: auto;
    position: relative;
    box-sizing: border-box;
}

/* ---------------- layout ------------------- */



#main {	
    width: 100%;
    background-image: url(../img/bg5.png);
    background-color: /*#29251e*/#1F1C17;
    padding: 0 4rem 3rem 4rem;
    box-sizing: border-box;
}

header {
    width: 100%;
    position: relative;
    height: 6rem;
    margin: auto;
    margin-top: 7rem;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6b1687+6,111183+30,278a2a+50,ffe610+70,ff4000+90,ff0000+100 */
    background: #6b1687; /* Old browsers */
    background: -moz-linear-gradient(left, #6b1687 6%, #111183 30%, #278a2a 50%, #ffe610 70%, #ff4000 90%, #ff0000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #6b1687 6%,#111183 30%,#278a2a 50%,#ffe610 70%,#ff4000 90%,#ff0000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #6b1687 6%,#111183 30%,#278a2a 50%,#ffe610 70%,#ff4000 90%,#ff0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    padding: 0 4rem;
    box-sizing: border-box;
}

#nav {
    height: 5rem;
    width: 100%;
    margin: auto;
    max-width: 760px;
    font-size: .9rem;
    box-sizing: border-box;
    text-align: right;
    padding: 1rem 0rem .5rem 4rem;
}

#logo {
    margin: auto;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    position: relative;
    height: 100%;
}

#logo h1 {
    color: white;
    font-size: 1.7rem;
    font-family: 'muliregular';
    left: 8rem;
    left: 2rem;
    bottom: 1rem;
    position: absolute;
}

#logo h1 span {
    font-size: 1.4rem;
    font-family: 'mulilight';
    padding-left: 2rem;  
}

#logo img {
    display: block;
    position: absolute;
    bottom: 1rem;
    height: 9rem;
    width: 9rem;
    right: 0.5rem;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ---------------- content ------------------- */


#main h1 {
    font-size: 1.3rem;   
    margin-bottom: .6rem;
    font-family: 'muliregular'; 
    margin-top: 1.7rem; 
}

#main h1:first-of-type {
    margin-top: 0rem; 
}

#main h2 {
    font-size: 1.2rem;   
    margin-bottom: .5rem;
    margin-top: 1.4rem; 
    font-family: 'muliregular'; 
}

#main h3 {
    font-size: 1.1rem;  
    margin-top: 1rem;    
    margin-bottom: .3rem;
    font-family: 'muliregular'; 
}

#content {
    margin: auto;
    background-color: rgba(23,   21,   17, 0.6);
    max-width: 760px;
    padding: 2rem;
    box-sizing: border-box;
    width: 100%;
}

#content p {
    text-align: justify;
    margin-bottom: .5rem;
    line-height: 1.7rem;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.b,
strong { font-family: 'muliregular'; }

.j { text-align: justify; }


#content a:link, 
#content a:visited {
    color: #878787;
    text-decoration: underline;
}

#content a:focus,
#content a:hover,
#content a:active {
    text-decoration: none;
}

/* ---------------- nav ------------------- */



#nav ul {
    list-style-type: none;
    height: 100%;
}

#nav li {
   display: inline-block;
    margin-left: .4rem;
    line-height: 4rem;
}

#nav a:link, 
#nav a:visited {
    font-family: 'mulilight';
    color: #818181;
    padding: .3rem .5rem;
    box-sizing: border-box; 
}

#nav a:focus,
#nav a:hover,
#nav a:active {
    background-color: #171511;
    color: #bbbbbb;
    color: #999999;
}

#nav li.a a {
    background-color: #171511;
    color: #bbbbbb;
    color: #999999;
}

.imgleft30 {
    width: 17rem;
    width: 12.5rem;
    width: 14rem;
    float: left;
    margin: 1rem 1.7rem .8rem 0;
    display: block;
}

img.imgleft30::after {
    content: " ";
    float: none;
    display: block;
    height: 0.001rem;
}


@media (max-width: 1100px) {
    
    header,
    #main {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    header {
        margin-top: 6rem;
    }

}

@media (max-width: 950px) {
    .imgleft30 {
        width: 12.5rem;
    }
}

@media (max-width: 740px) {
    
    
    #logo h1 {
        font-size: 1.6rem;
    }
    
    #logo h1 span {
        font-size: 1.2rem;
        display: blocK; 
        padding-left: 0rem;
    }

    .imgleft30 {
        width: 15.5rem;
    }

}

@media (max-width:620px) { 
    
    .imgleft30 {
        width: 12rem;
    }
       /*     
    #nav li {
        margin-left: .1rem;
    }
    
    #nav a:link, 
    #nav a:visited {
        font-size: .85rem;
        padding: .4rem .4rem;
    }*/
}

@media (max-width:500px) { 
     .imgleft30 {
         float: none;
        width: 100%;
        margin-bottom: 2rem;
    }
}


@media (max-width:460px) { 
    
    
    header,
    #main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
     
    header {
        height: 9rem;
    }
    
    #logo img {
        right: 0;
        left: auto;
        width: 8rem;
        height: 8rem;
        bottom: 5rem;
    }

    #logo h1 {
        font-size: 1.4rem;
    }
    
    #logo h1 span {
        font-size: 1rem;
        margin-top: -.3rem;
    }
    /*
    #nav li {
        text-align: center;
        margin-left: .1rem;
    }
    
    #nav a:link, 
    #nav a:visited {
        font-size: .75rem;
        padding: .3rem .3rem;
    }*/

}