/* MOBILE FIRST */

/* ----- DEBUG ----- */
div, h1, h2, h3, p, li {
}
div {
    border:thin transparent solid;
}


/* Reset Rules, check for duplicates if Normalise.css */

html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
*, *:before, *:after {
    -webkit-box-sizing:inherit;
    -moz-box-sizing:inherit;
    box-sizing:inherit;
}
a {
    text-decoration:none;
    color:rgb(104,183,223);
}

/* ----- Global CSS, mobile Version ----- */

body {
    margin:0; padding:0;
    font-family: 'Cormorant Garamond', serif; !important;
    background-color: rgb(28, 33, 43);
}
#uber-wrapper {
    width:100%;
    height:100vh;
}
#column-wrapper {
    width:90%;
    max-width:900px;
    min-height:99.95vh;
    margin:0px auto 0px auto;
    background-color: rgb(66, 71, 80);
    box-shadow: 0px 0px 2em 0px rgba(0,0,0,0.3);
}
.width-page-full {
    width:90%;
    margin:0px auto 0px auto;
}
.cen {
    margin:0px auto 0px auto;
}
.group:after {
    content:"";
    display:table;
    clear:both;
}
#header-wrapper {
    margin-top:3%;
}
#logoimage {
    width:200px; height:131px;
    display:block;
}
#logoimage .img {
    overflow:hidden; !important;
}
#firmenname {
    display:block;
    width:70%;
    margin:1em auto 0 auto;
    text-align: center;
    font-size: 1.5em;
    color: rgb(228, 234, 238);
}

h1 {
    margin-top:0em;
    color:rgb(99,99,99);
}
p {
    color: rgb(228, 234, 238);
}
#navigation-wrapper {
    width:100%;
}
ul.navi {
    list-style-position:inside;
    padding:0;
    text-align:center;
    margin:1.3em auto .5em auto;
}
li.navi-button {
    font-family: 'Fira Sans', sans-serif;
    list-style:none;
    display:inline-block;
    margin:0 .2em;
    padding:.2em .7em;
    border-radius:.3em;
    background-color: rgb(66, 89, 105); 
    font-size:.9em;
    color: rgb(251, 248, 242);
}
#content-wrapper {
    width:100%;
    display:block;
}
#footer-wrapper {
    margin:2% auto 0px auto;
    clear:both;
    width:100%;
}
#footer p {
    font-size:1em;
    color:rgb(99,99,99);
    margin:10px 0px;
    padding:0px;
}
p.lead {
    font-family: 'Fira Sans', sans-serif;
    font-size:1.2em;
    font-weight:500;
    color: rgb(105,183,223);
    margin: 1.7em 1.7em 1.7em 1.7em;
    padding: 0;
}
p.fliess {
    font-size:1.2em;
    margin: 1.7em 1.7em 1.7em 1.7em;
    color: rgb(228, 234, 238);
    padding: 0;
}
ul {
    font-size:1.2em;
    margin: 1.7em 10vw 1.7em 1.7em;
    padding-left: 0.9em;
    color: rgb(228, 234, 238);
}
li {
    margin-bottom:.3em;
    margin-left:0;

}

/* Seitenspezifisches */
/* index.php */

a.button {
    width:100%;
} 

/* BREKING POINT, ab 700 Pixel */

@media (min-width:700px) {
#content {
    float:left;
    width:70%;
}
img.news {
    width:40%;
    float:left;
    margin-right:1em;
}

}

/* BREKING POINT, ab 1000 Pixel */

@media (min-width:1000px) {
#content {
    width:75%;
}
#navigation {
    width:25%;
    font-size:1.7em;
}
#banner-startseite {
    background-size:100%;
}
.sub-logo {
    float:left;
    text-align:left;
}
#logo-spirit-support {
    margin-right:1.3vw;
}
#logo-topspeaker {
    margin-right:1.3vw;
}
#keywords {
    margin-top:4em;
}
#keywords li {
    font-size:2.3em;
    margin-bottom:0.8em;
}
#img-hglueck {
    height:22vw;
    max-height:16em;
}
#img-top-speaker {
    height:22vw;
    max-height:16em;
}


}