/*
Description: Theme fuer segert.net - HTML5, CSS3
Author: Ralph Segert
Date: 03/2017 
Author URI: http://segert.net
*/


* {
margin: 0;
padding: 0;
}

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}


body {
font-size: 100%;
font-family: 'din-next-lt-pro', Helvetica, Verdana, sans-serif;  
color: #000;
}

a:focus {
outline: 0;
}

img, fieldset {
border: 0;
}

img {
vertical-align: middle;
}


@font-face {
font-family: "din-next-lt-pro";
font-display: swap;
src: url('font/dinnextltpro-light.eot'),
url('font/dinnextltpro-light.woff') format('woff');
}


@font-face {
font-family: "dinnextltpro-regular";
font-display: swap;
src: url('font/dinnextltpro-regular.eot'),
url('font/dinnextltpro-regular.woff') format('woff');
}

@font-face { 
font-family: 'Affogato-Regular';
font-display: swap;
src: url('font/affogato/Affogato-Regular.eot'),
url('font/affogato/Affogato-Regular.woff'),
url('font/affogato/Affogato-Regular.ttf');
}

@font-face { 
font-family: 'Affogato-Medium';
font-display: swap;
src: url('font/affogato/Affogato-Medium.eot'),
url('font/affogato/Affogato-Medium.woff'),
url('font/affogato/Affogato-Medium.ttf');
}





a {
border: 0;
text-decoration: none;
}

h1, h2, h3, h4, h5 {
font-weight: normal;
font-family: Times, 'Times New Roman', serif;
}

/* __ Grundgrid __ */


.wrapper {
margin: 0 auto; 
width: 100%;
}

.header {
margin: 0 auto; 
width: 100%;
background-color: #7E7E7E; 
}

.main {
margin: 0 auto; 
width: 100%;
}

.footer {
margin: 0 auto; 
width: 100%; 
background: #000;
}

.nav-wrapper, .main-wrapper, .footer-wrapper {
margin: 0 auto;
max-width: 980px;
}

.main-wrapper {
max-width: 100%;
background: linear-gradient(-180deg, #FFFFFF 48%, #F3F3F3 96%);
border-bottom: 1px solid #F3F3F3;
}


.nobg { /* entfernt Verlauf */
background: #fff;
border-bottom: 0;
}

.graubg {
background: #7F7F7F;
color: #fff;
}

.logo-image {
width: 100%; 
height: 110px; 
background: url("images/logo-ralph-segert@2x.png") center no-repeat; 
background-size: 182px 19px; 
background-position-y:  calc(100% - 51%);
}

.logo-image p {
float: left; 
margin-top: 36px; 
width: 100%; 
text-align: center;
}

.logo-image a {
width: 200px; 
height: 25px;
font-size: 1.9em; 
letter-spacing: 1.4px; 
color: transparent;
}


/* __ Hauptnavigation __ */


#stopper { /* Container für zeitfixierte Hauptnavi */
position: relative;
height: 57px;
}

.hm {
position: relative;
margin: 0 auto; 
height: 57px; 
border-top: 4px solid #ccc; 
border-bottom: 4px solid #ccc; 
background-color: #000; 
text-align: center;
transition: all 0.3s ease;	
}

.nav {
width: 100%;
padding: 0 0 0 0;
text-align: center;
margin-top: -4px;
}

.nav ul li {
display: inline;
}

.nav li a {
float: left;
width: 50%;
height: 57px; 
padding: 15px 14px;
color: #fff;
border-top: 4px solid #ccc;
border-bottom: 4px solid #ccc;
}

.nav li .aktiv {
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
background-color: #C30000;
color: #fff;
border-top: 4px solid #F6F6F6;
border-bottom: 4px solid #F1F1F1;
}

.nav li .aktiv:hover {
border-top: 4px solid #F6F6F6;
border-bottom: 4px solid #F1F1F1;
}

.nav li a:hover {
color: #fff;
background-color: #C30000;
border-top: 4px solid #ccc;
border-bottom: 4px solid #ccc;
transition: .3s; 
}

.fixed { /* Oben fixiertes Menue mit Hilfe eines JS-Snippets. "top" zieht Menue teilweise nach oben */
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}



/* __ Hauptbereiche Content __ */


.content-wrapper {
margin: 0 auto;
max-width: 980px;
}

.content-start {
float: left;
width: 100%;
text-align: center;
}

.content-start p a, .content-start ol a, .content-start ul a {
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
color: #D50000;
}

.content-start strong {
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
font-size: 100%;
}

.content-start h1 {
padding-left: 17%;
padding-right: 17%;
font-size: 210%;
letter-spacing: .5px;
margin-bottom: 3.5%;
margin-top: 9%;
line-height: 140%;
}

.content-start h2 {
padding-left: 17%;
padding-right: 17%;
font-size: 210%;
letter-spacing: .5px;
margin-bottom: 3.5%;
margin-top: 8%;
line-height: 140%;
}

.content-start .h2startseite {
	margin-top:-1%;
	line-height:1.4em;
	color:#666;
	font-size:170%;
}

.content-start h1 a, .content-start h2 a {
color: #000;
}

.content-start h1 a:hover, .content-start h2 a:hover {
color: #55198B;
}

.content-start p {
font-size: 110%;
color: #000;
line-height: 2em;
letter-spacing: .2px;
padding: 0 18% 2.5% 18%;
}

.content-start ol, .content-start ul {
list-style-type: square;
font-size: 100%;
text-align: left;
line-height: 2em;
padding-bottom: 4%;
padding-left: 23.6%;
padding-right: 18%;
color: #000;
}

.content-start li {
padding-bottom: 2%;
}

.content-about h1 {
padding-left: 18%;
}

.content-about {
text-align: left;
}


.content-work p:nth-of-type(2) {
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;

letter-spacing: 1px;
}

.content-work a {
color: #D50000;
}

.content-work a:hover {
color: #000;
}

.blogteaser {
margin-bottom: 12%;
}

.blogteaser h3 {
padding-left: 18%;
padding-right: 17%;
font-size: 130%;
letter-spacing: .5px;
margin-bottom: 1%;
margin-top: 6%;
line-height: 1.5em;
text-align: left;
}

.blogteaser h3 a, .blogteaser p a {
color: #fff;
}

.blogteaser h3 a {
border-bottom: 1px dotted #ccc;
}

.blogteaser h3 a:hover {
color: #000;
border-bottom: 1px dotted #fff;
}

.blogstart p a, .blogstart ul a {
color: #D50000;
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
}

.blogstart p a:hover {
color: #000;
}

.blogteaser p {
text-align: left;
color: #000;
}


.blogstart section {
margin-bottom: 6%;
}


.blogstart h1 {
font-family: Times, serif;
margin-top: 1%;
margin-bottom: 7%;
font-size: 170%;
color: #666;
}

.blogstart h2 {
text-align: center;
font-family: Times, serif;
padding: 0 18% 0 18%;
margin: 9% 0 2% 0;
font-size: 180%;
line-height: 1.5em;
letter-spacing: .5px;
}


.blogstart h3, .blogstart h4, .blogstart h5 {
text-align: center;
font-family: Times, serif;
padding-left: 18%;
padding-right: 18%;
margin-bottom: 1.5%;
font-size: 160%;
letter-spacing: .5px;
margin-top: 2%;
}


.blogstart h4 {
font-size: 160%;
margin-bottom: 3%;
margin-top: 6%;
}

.blogstart h5 {
font-size: 140%;
margin-top: 4%;
margin-bottom: -2%;
}

.blogstart p {
text-align: left;
font-size: inherit;
line-height: 2em;
letter-spacing: 0;
padding: 1% 15% 1% 17%;
font-size: 110%;
color: #000;
}

.tweet {
display: block;
margin: 2% 19% 1% 21%;
}

.blogstart .appetizer {
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
font-size: 150%;
color: #687389;
line-height: 1.6em;
margin: 2% 8% 3% 9%;
}

.blogstart ol, .blogstart ul {
padding: 1.5% 16% 1.5% 20%;
font-size: inherit;
}

.blogstart ul {
list-style-type: square;
color: #4B5569;
}

.blogstart .related {
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
}

.blogstart li {
line-height: 1.6em;
font-size: 100%;
}

.blogstart .bigbild, .blogteaser .bigbild {
text-align: center;
padding: 2% 16% 2% 16%;
}

.blogstart .bigbild img, .blogteaser .bigbild img {
width: 100%;
height: auto;
margin-bottom: 2%;
}

.blogstart .midbild, .blogteaser .midbild {
text-align: center;
padding: 2% 11% 2% 11%;
}


.blogstart .midbild img, .blogteaser .midbild img {
width: 70%;
height: auto;
margin-bottom: 2%;
}

.blogstart .teaserbild, .blogteaser .teaserbild {
text-align: center;
padding: 1% 0 2% 0;
}

.blogstart .teaserbild img, .blogteaser .teaserbild img {
width: 36%;
height: auto;
}

.bildrahmen img {
border: 1px solid #c30000;
padding: 4px;
background-color: #fff;
}

.blogstart .kleinbild, .blogteaser .kleinbild {
text-align: center;
}

.blogstart .kleinbild img, .blogteaser .kleinbild img {
width: 34%;
height: auto;
margin: 1% 0 2% 30%;
}

.blogstart .bildfloat, .blogteaser .bildfloat {
text-align: left;
}

.blogstart .bildfloat img, .blogteaser .bildfloat img {
float: left;
width: 28%;
height: auto;
margin: 1.5% 3% 2% 0;
}


.blogstart .infoline {
font-family: Times, 'Times New Roman', serif;
font-size: 80%;
color: #4B5569;
letter-spacing: .5px;
text-align: center;
padding: .2% 18% 1.7% 18%;

}

.blogstart .infoline a {
font-family: Times, serif;
}


.blogstart .datum {
font-size: 100%;
margin-top: 4%;
margin-bottom: 1%
}


.blogstart .topline {
margin-top: 2%;
margin-bottom: -2%;
font-size: 80%;
color: #666;
}

.blogstart .underline {
font-size: 80%;
margin-top: -1%;
}

.blogstart .comments {
font-size: 90%;
color: #000;
padding-left: 4%;
padding-right: 19%;
}



.blogstart .avatar {
float: left; 
margin-top: 1%;
margin-right: -18.5%;
}

.blogstart .avatar img {
width: 60%;
height: auto;
}


.blogstart .login {
margin-top: 3%;
margin-bottom: -2%;
font-size: 90%;
color: #666;
}

.blogstart .logout {
margin-top: 3%;
margin-bottom: 2%;
font-size: 90%;
color: #666;
}

.blogstart .pklein {
font-size: 90%;
}

.blogstart .sm-icons {
text-align: center;
margin-top: 1%;
margin-bottom: 4%;
}

.blogstart .mail {
text-align: center;
margin-top: 2%;
margin-bottom: 6%;
}

.blogkategorien {
margin: 5% 0 9% 0;
max-height: 70px;
}

.blogkategorien ul {
width: 100%;
text-align: center;
padding-left: 0;
padding-right: 0;
}

.blogkategorien ul li {
display: inline;
font-size: 95%;
}

.blogkategorien li {
margin-right: 8%;
}

.blogkategorien li:last-of-type {
margin-right: 0;
}

.blogkategorien a {
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
color: #000;
}

.blogkategorien a:hover {
color: #888;
}

.blogkategorien .aktiv {
color: #C30000;
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
}

.blogstart  blockquote p {
line-height: 1.7em;
font-style: italic;
color: #666;
margin: 0% 4% 0 5%; 
}

.blogstart .backlink {
width: 100%;
text-align: center;
font-size: inherit;
}


/* Suche */


.content-start .suchbereich {
float: left;
width: 100%;
margin-bottom: 0;
}

.content-start .suchblog {
margin-bottom: -140px;
}


.content-start .suchbereich h2 {
margin: 0 0 5% 0;
text-align: center;
color: #000;
}

.content-start .suchergebnis a {
border-bottom: 0;
}

.content-start .suchbereich ul {
padding: 0 22% 3% 25%;
}

.content-start .suchergebnis p {
padding: 0 6% 12% 6%;
text-align: center;
}

.content-start .suchergebnis small {
color: #333;
font-family: 'dinnextltpro-regular', Helvetica, Verdana, sans-serif;
}

.content-start .suchergebnis li {
list-style-type: square;
color: #41a93e;
padding-bottom: 5%;
line-height: 1.5em;
}


.content-start .suchbereich label {
display: none;
}

.content-start .suchbutton {
border: 0;
color: #000;
background-color: #ccc;
width: 12%;
padding: 1.5% 0 1.7% 0;
cursor: pointer;
font-size: .8em;
transition: .3s;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}

.content-start .suchbutton:hover {
background-color: #666;
color: #fff;
}

.content-start .suchfeld {
width: 52%;
padding: 1.4% 2% 1.6% 2%;
font-size: .8em;
border: 1px solid #ccc;
border-right: 0;
background-color: #fff;
margin-right: -5px;
vertical-align: top;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}


iframe {
margin: 1.5% 0 .1% 0;
}


/* __ Formular __ */


legend {
display: none;
}

.content-start form  {
margin: 5% 0 3% 0;
}

.content-start form p {
width: 100%;
}


.content-start .textfeld {
font-family: inherit;
width: 70%;
font-size: 120%;
margin-top: 2%;
padding: 2.8% 2% 2.8% 2%;
background-color: #fff;
opacity: 1;
border: 1px solid #999;
border-radius: 0;
}

.content-start .textfeld2 {
font-family: inherit;
width: 166px;
font-size: 100%;
margin-top: 2%;
padding: 1% 1% 1% 1%;
background-color: #fff;
opacity: 1;
border: 1px solid #999;
border-radius: 0;
}

.content-start textarea {
font-family: inherit;
width: 70%;
font-size: 120%;
margin-top: 2.5%;
padding: 1.5%;
height: 115px;
-moz-appearance: none;
}

.content-start .kommentarfeld {
font-family: inherit;
width: 70%;
font-size: 90%;
margin-top: 2.5%;
padding: 1.5%;
height: 180px;
-moz-appearance: none;
}

.sendbutton {
padding: 2.5% 5% 2.5% 5%; 
background: #7F7F7F;
border: 1px solid #fff;
border-radius: 4px;
box-shadow: 4px 4px 0px 0px #c4c4c4;
color: #fff;
font-size: 110%;
text-decoration: none;
transition: .2s;
letter-spacing: 1px;
width: 70%;
cursor: pointer;
margin: 3% 0 9% 0;
} 

.sendbutton:hover {
color: #D50000;
background: #eee;
transition: 0.4s;
box-shadow: 4px 4px 0px 0px #fff;
}


/* __ Buttons __ */


.blogteaser .morebutton, .content-blog .morebutton, .blogstart .weiterbutton {
float: left;
width: 100%;
}



.blogteaser .morebutton a, .content-blog .morebutton a {
display: block;
font-size: 95%;
letter-spacing: 0.32px;
text-align: center;
width: 16%;
color: #000;
background: #EBEBEB;
padding: 1.1% 0 1% 0;
text-decoration: none;
border-radius: 4px;
margin: 3% 0 12% 42%;
}

.blogteaser .morebutton a:hover, .content-blog .morebutton a:hover {
color: #fff;
background-color: #979797;
transition: .3s;
}


.blogstart .weiterbutton a {
display: block;
font-size: inherit;
letter-spacing: 0.32px;
text-align: center;
width: 20%;
color: #fff;
background: #666;
padding: 1% 0 1.2% 0;
text-decoration: none;
border-radius: 4px;
margin: 0 0 12% 40.4%;
transition: .3s;
}

.blogstart .weiterbutton a:hover {
background: #000;
}


/* __ Footer __ */


.footer-start {
padding: 5% 0 12% 0;
text-align: center;
}


.footer-start p {
font-family: 'din-next-lt-pro', Helvetica, Verdana, sans-serif;
font-size: 90%;
letter-spacing: .5px;
line-height: 2.3em;
color: #aaa;
}

.footer-start a {
color: #ddd;
}

.footer-start a:hover{
color: #fff;
}


.footer-start .cloud {
width: 100%;
color: #999;
padding: 4% 21% 2% 21%;
text-align: center;
line-height: 1.6em;
}


/* __ Grafischer Content __ */


.referenz-finkeldei {
position: relative;
width: 100%; 
height: 700px; 
background: url("images/referenz-finkeldei@2x.jpg") center no-repeat; 
background-size: 820px 754px;
background-position-y: 4px;
}


.referenz-m2f {
position: relative;
width: 100%; 
height: 470px; 
background: url("images/referenz-m2f.jpg") center no-repeat; 
background-size: 811px 470px;
background-position-y: 4px;
}

.referenz-schlafdigital {
position: relative;
width: 100%; 
height: 890px; 
background: url("images/referenz-schlafdigital@2x.jpg") center no-repeat; 
background-size: 805px 905px;
background-position-y: -10px;
}

.referenz-impulse {
position: relative;
width: 100%; 
height: 575px; 
background: url("images/referenz-psychotherapeutische-praxis.jpg") center no-repeat; 
background-size: 693px 588px;
background-position-y: -10px;
}

.referenz-akds {
position: relative;
width: 100%; 
height: 420px; 
background: url("images/referenz-akds@2x.jpg") center no-repeat; 
background-size: 700px 420px;
background-position-y: 6px;
}

.referenz-dmg {
position: relative;
width: 100%; 
height: 860px; 
background: url("images/referenz-dmg@2x.jpg") center no-repeat; 
background-size: 700px 860px;
}


.referenz-start-01 {
position: relative;
width: 100%; 
height: 421px; 
background: url("images/referenz-m2f@2x.png") center no-repeat; 
background-size: 700px 421px;
background-position-y: 1px;
}

.referenz-start-02 {
position: relative;
width: 100%; 
height: 464px; 
background: url("images/referenz-defakto@2x.png") center no-repeat; 
background-size: 700px 452px;
background-position-y: 11px;
}

.referenz-mariengymnasium {
position: relative;
width: 100%; 
height: 490px; 
background: url("images/referenz-mariengymnasium@2x.png") center no-repeat; 
background-size: 700px 497px;

}

.referenz-bdp {
position: relative;
width: 100%; 
height: 470px; 
background: url("images/referenz-bdp@2x.png") center no-repeat; 
background-size: 700px 510px;
background-position-y: 4px;
}

.referenz-allstorage {
position: relative;
width: 100%; 
height: 494px; 
background: url("images/referenz-allstorage@2x.png") center no-repeat; 
background-size: 700px 493px;
background-position-y: 11px;
}

.referenz-appverstand {
position: relative;
width: 100%; 
height: 480px; 
background: url("images/referenz-appverstand@2x.png") center no-repeat; 
background-size: 700px 492px;
}

.referenz-ea {
position: relative;
width: 100%; 
height: 460px; 
background: url("images/referenz-ea@2x.png") center no-repeat; 
background-size: 700px 491px;
}

.referenz-gaficon {
position: relative;
width: 100%; 
height: 483px; 
background: url("images/referenz-gaficon@2x.png") center no-repeat; 
background-size: 700px 491px;
}


.referenzen-mobil {
position: relative;
width: 100%; 
height: 500px; 
background: url("images/referenzen-mobil@2x.png") center no-repeat; 
background-size: 700px 520px;
background-position-y: 6px;
}

.modulee-logo {
position: relative;
width: 100%; 
height: 180px; 
background: url("images/modulee@2x.png") center no-repeat; 
background-size: 286px 69.5px;
background-position-y: 0;
background-position-x: 46%;
}

.headred {
color: #D50000;
}


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


.referenz-m2f {
position: relative;
width: 100%; 
height: 212px; 
background: url("images/referenz-finkeldei.jpg") center no-repeat; 
background-size: 360px 208px;
background-position-y: 4px;
}

.referenz-m2f {
position: relative;
width: 100%; 
height: 212px; 
background: url("images/referenz-m2f.jpg") center no-repeat; 
background-size: 360px 208px;
background-position-y: 4px;
}

.referenz-impulse {
position: relative;
width: 100%; 
height: 285px; 
background: url("images/referenz-psychotherapeutische-praxis.jpg") center no-repeat; 
background-size: 346px 284px;
background-position-y: -10px;
}


.referenz-schlafdigital {
position: relative;
width: 100%; 
height: 415px; 
background: url("images/referenz-schlafdigital.jpg") center no-repeat; 
background-size: 360px 403px;
background-position-y: 6px;
}


.referenz-akds {
position: relative;
width: 100%; 
height: 220px; 
background: url("images/referenz-akds.jpg") center no-repeat; 
background-size: 350px 210px;
background-position-y: 6px;
}

.referenz-dmg {
position: relative;
width: 100%; 
height: 430px; 
background: url("images/referenz-dmg.jpg") center no-repeat; 
background-size: 350px 430px;
background-position-y: 6px;
}

.referenz-start-01 { 
width: 100%; 
height: 248px; 
background: url("images/referenz-m2f.png") center no-repeat; 
background-size: 350px 210.5px;
background-position-y: 38px;
}

.referenz-start-02 {
width: 100%; 
height: 286px; 
background: url("images/referenz-defakto.png") center no-repeat; 
background-size: 350px 226px;
background-position-y: 61px;
}

.referenz-mariengymnasium {
width: 100%; 
height: 300px; 
background: url("images/referenz-mariengymnasium.png") center no-repeat; 
background-size: 350px 248.5px;
background-position-y: 40px;
}

.referenz-bdp {
position: relative;
width: 100%; 
height: 310px; 
background: url("images/referenz-bdp.png") center no-repeat; 
background-size: 384px 279.5px;
background-position-y: 45px;
}

.referenz-allstorage {
width: 100%; 
height: 350px; 
background: url("images/referenz-allstorage-02.png") center no-repeat; 
background-size: 353px 288.6px;
background-position-y: 40px;
}

.referenz-appverstand {
width: 100%; 
height: 300px; 
background: url("images/referenz-appverstand.png") center no-repeat; 
background-size: 350px 246px;
background-position-y: 30px;
}

.referenz-ea {
width: 100%; 
height: 420px; 
background: url("images/referenz-ea-2.png") center no-repeat; 
background-size: 360px 383.2px;
background-position-y: 20px;
}

.referenz-gaficon {
width: 100%; 
height: 278px; 
background: url("images/referenz-gaficon.png") center no-repeat; 
background-size: 350px 245.5px;
background-position-y: 31px;
}


.referenzen-mobil {
width: 100%; 
height: 300px; 
background: url("images/referenzen-mobil.png") center no-repeat; 
background-size: 350px 260px;
background-position-y: 46px;
}



}


/* __ Misc __ */



#back-to-top { /* scriptgesteuerter Top-Balken */
position: fixed; /* Fixiert den Balken unten */
display: none;
width: 100%;
right: 0;
bottom: 0;
padding: 22px 0 22px 0;
background: #eee;
color: #000;
font-size: 110%;
text-align: center;
letter-spacing: 1px;
z-index: 1000;
cursor: pointer;
}


.cf:after {
content: "";
display: table;
clear: both;
}



/*Styles for screen 1024px and lower*/
@media only screen and (max-width : 1024px) {

input, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}

}



/* Styles for screen 800px and lower */
@media only screen and (max-width : 800px) {

.nav {
padding: 0 0 0 8%;
}

.nav li a {
width: 50%;
font-size: 110%;
}

.nav li .aktiv {
font-size: 110%;
}


.main-wrapper {
background: transparent;
}

.graubg {
background: #7F7F7F;
}

.modulee-logo {
height: 280px; 
background: url("images/modulee@2x.png") center no-repeat; 
background-size: 321px 78px;
background-position-y: 120px;
}


.content-start h1 {
padding-left: 7%;
padding-right: 7%;
font-size: 230%;
margin-bottom: 3.5%;
margin-top: 9%;
}

.content-start p {
font-size: 110%;
padding-left: 8%;
padding-right: 8%;
}

.content-start ol {
font-size: 120%;
text-align: left;
line-height: 1.5em;
padding-left: 17%;
padding-right: 12%;
}

.blogstart h1 {
font-family: Times, serif;
margin-top: 1%;
margin-bottom: 3%;
font-size: 150%;
}

.blogkategorien {
margin: 4% 0 11% 0;
max-height: 70px;
}

.blogkategorien ul li {
font-size: 110%;
}

.blogkategorien li {
margin-right: 5%;
}

.blogkategorien li:last-of-type {
margin-right: 0;
}

.blogteaser h2 {
padding-left: 7%;
padding-right: 7%;
font-size: 160%;
margin-bottom: 2.5%;
margin-top: 6%;
}


.blogteaser h3 {
padding-left: 12%;
padding-right: 12%;
font-size: 150%;
margin-bottom: 2%;
margin-top: 7%;
}

.blogteaser .morebutton a {
font-size: 110%;
width: 20%;
padding: 1% 0 1.2% 0;
margin: 4% 0 11% 40%;
}


.blogstart .weiterbutton a {
width: 28%;
margin: 2% 0 9% 36%;
}

}


/*Styles for screen 640px and lower*/
@media only screen and (max-width : 640px) {



.modulee-logo {
height: 200px; 
background: url("images/modulee@2x.png") center no-repeat; 
background-size: 286px 69.5px;
background-position-y: 65%;
background-position-x: 24%;
margin-right: 5%;
}

.graubg {
background: #7F7F7F;
}

.nav {
padding: 0;
}

.nav li a {
width: 50%;
font-size: 105%;
padding-top: 3.7%;
padding-bottom: 3.5%;
background-color: #000;
}

.nav li .aktiv {
font-size: 105%;
padding-top: 3.7%;
padding-bottom: 3.5%;

}


.content-start h1 {
padding-left: 6%;
padding-right: 6%;
font-size: 200%;
margin-bottom: 4%;
margin-top: 15%;
}

.content-start p {
font-size: 110%;
padding-left: 4%;
padding-right: 4%;
padding-bottom: 3%;
line-height: 1.6em;
color: black;
}


.content-start h2 {
font-size: 200%;
margin-bottom: 4%;
padding-left: 6%;
padding-right: 6%;
margin-top: 15%;
}

.content-start ol {
font-family: inherit;
font-size: 100%;
text-align: left;
line-height: 1.6em;
padding-bottom: 3%;
padding-left: 10%;
padding-right: 2%;
}


.content-work h1 {
font-size: 180%;
}


.content-work p:nth-of-type(2) {
letter-spacing: 0;
margin-top: 3%;
}

section {
margin-bottom: 5%;
}

.blogstart h1 {
font-family: Times, serif;
margin-top: 3%;
margin-bottom: 8%;
font-size: 110%;
}


.blogstart h4 {
margin-top: 8%;
margin-bottom: 6%;
padding-left: 4%;
}

.blogstart .topline {
margin-top: 5%;
margin-bottom: -8px;
font-size: 95%;
color: #333;
}

.blogstart .comments {
font-size: 100%;
color: #000;
padding-left: 1%;
padding-right: 3%;
}

.blogstart .avatar {
float: left; 
margin-top: 2%;
margin-right: -9%;
}

.blogstart .avatar img {
width: 70%;
}

.formcenter {
width: 100%;
text-align: center;
}

.blogstart .pklein {
font-size: 100%;
line-height: 1.6em;
margin-bottom: 4%;
}

.blogstart .login {
margin-top: 3%;
margin-bottom: -2%;
font-size: 100%;
color: #666;
}

.blogstart .logout {
margin-top: 3%;
margin-bottom: 2%;
font-size: 100%;
color: #666;
}




.blogstart .bigbild, .blogteaser .bigbild {
padding: 4% 0 4% 0;
}

.blogstart .bigbild img, .blogteaser .bigbild img {
width: 92%;
}

.blogstart .midbild, .blogteaser .midbild {
padding: 4% 0 4% 0;
}

.blogstart .midbild img, .blogteaser .midbild img {
width: 92%;
}


.blogstart .teaserbild, .blogteaser .teaserbild {
text-align: center;
padding: 2% 0 4% 0;
}

.blogstart .teaserbild img, .blogteaser .teaserbild img {
width: 70%;
height: auto;
}

.blogstart .infoline {
font-size: 90%;
letter-spacing: 0;
text-align: center;
padding: 1% 2% 4% 1%;
}

.blogstart .appetizer {
line-height: 1.4em;
}


.blogteaser h2 {
padding-left: 4%;
padding-right: 4%;
font-size: 150%;
line-height: 1.4em;
margin-bottom: 4%;
margin-top: 14%;
}

.blogteaser h3 {
padding-left: 4%;
padding-right: 4%;
font-size: 150%;
margin-bottom: 3%;
margin-top: 12%;
}

.blogstart h3 {
margin-top: 4%;
}


.blogstart ol, .blogstart ul {
padding: 1% 6% 1% 10%;
}

.blogstart li {
line-height: 1.5em;

}

.blogteaser .morebutton a, .blogstart .weiterbutton a {
font-size: 110%;
width: 60%;
padding: 2% 0 2.2% 0;
margin: 6% 0 24% 20%;
}


.blogkategorien {
margin: 7% 0 12% 0;
}

.blogkategorien ul {
text-align: center;
padding-left: 4%;
padding-right: 4%;
line-height: 1.8em;
}

.blogkategorien ul li {
font-size: 100%;
}

.blogkategorien li {
margin-right: 7%;
}

.footer-start {
padding: 6% 0 20% 0;
text-align: center;
}


.content-start .textfeld {
width: 80%;
font-size: 110%;
margin-top: 4%;
}


.content-start textarea {
font-family: inherit;
width: 80%;
font-size: 110%;
margin-top: 5%;
height: 130px;
}

.sendbutton {
padding: 3% 5% 3% 5%; 
font-size: 110%;
transition: 0;
letter-spacing: 1px;
width: 80%;
cursor: none;
margin: 4% 0 14% 0;
} 

.sendbutton:hover {
transition: 0;
box-shadow: none;
}

.content-start .kommentarfeld {
width: 80%;
font-size: 100%;
}


.content-start .suchbutton {
width: 20%;
padding: 3% 0 3.9% 0;
}

.content-start .suchbutton:hover {
background-color: #666;
color: #fff;
}

.content-start .suchfeld {
width: 70%;
padding: 3% 2% 3% 2%;
font-size: .9em;
}


.footer-start .cloud {
padding: 4% 9% 2% 9%;
text-align: center;
line-height: 1.6em;
}


}