/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, cite, code,del, dfn, img, ins, kbd, q, s, samp, strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, .main-nav, output, ruby, section, summary,time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;line-height: 100%;}
body {line-height: 1;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {	border-collapse: collapse;border-spacing: 0;}

/* ----------------------------- */
/* ------- HTML Elements ------- */
/* ----------------------------- */
body {font-family: "Open Sans", Helvetica, Arial, sans-serif; color: #696a67; font-weight: 400; background-color: #FFFFFF; font-size: 16px; line-height: 167%;}
p {line-height: 167%;}
a {color: #1795d0; outline: none; text-decoration: none;}
a:focus, a:hover, a:active {color: #96cc4b; text-decoration: underline;}
a.lb {cursor: url('../images/lupe.png'), pointer;}
h1 {font-size: 18px; margin: 40px 0 16px 0; font-weight: 600; line-height: 130%;}
h2 {font-size: 16px; margin: 20px 0 16px 0; font-weight: 600; line-height: 130%;}
h3 {font-size: 16px; margin: 20px 0 16px 0; font-weight: 600; line-height: 130%;}

/* ----------------------------- */
/* ------- Basic Classes ------- */
/* ----------------------------- */
.floatleft {float: left;}
.floatright {float: right;}
.clearfloat {clear: both;}

/* ----------------------------- */
/* ---- Document Structure ----- */
/* ----------------------------- */
#container {width:100%; max-width:854px; margin:0 22px;}
#site-header {}
#main, footer {}


/* ----------------------------- */
/* ---------- Header ----------- */
/* ----------------------------- */
#site-title .logo a {display: block; width: calc(100% - 44px); max-width: 332px; height: 39px; background: url("../images/annemarie-stammkoetter-kommunikationstraining.png") 0 0 no-repeat; background-size: contain; margin: 40px 0 48px 0;}
#site-title .logo a span {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
#site-title .address {font-weight: 600; color: #1795d0; line-height: 167%;}




/* ---------- .main-navigation ----------- */
.main-nav {padding: 40px 0 0 0;}
.main-nav ul {list-style: none; margin: 0; padding: 0; }
.main-nav li {display: inline;}
.main-nav li:after {content: "|"; display: inline-block; margin: 0 2px 0 4px; font-weight: 700; color: #1795d0; }
.main-nav li:last-child:after {content:""; margin: 0;}
.main-nav ul li a {font-weight: 700; color: #1795d0; text-decoration: none;}
.main-nav ul li a:focus,
.main-nav ul li a:hover,
.main-nav ul li a:active {color: #96cc4b; text-decoration: none;}


/* ----------------------------- */
/* ---------- Content ---------- */
/* ----------------------------- */
article {width: calc(100% - 44px); margin: 40px 0 0 0;padding: 100px 0 40px 0; background: url("../images/sprechblase_gelb.png") 0 0 no-repeat; }
article p {margin: 0 0 16px 0;}
article ul,
article ol {margin: 16px 0 16px 20px; padding-left: 16px;}
article ul li,
article ol li {line-height: 167%; margin-top: 7px;}



/* ----------------------------- */
/* ----------- Footer ---------- */
/* ----------------------------- */
footer {clear:both; width: calc(100% - 44px); background: url("../images/people.png") 50% 100% no-repeat; background-size: contain; min-height: 164px;}

/* ----------------------------- */
/* -------- Startseite --------- */
/* ----------------------------- */
.home #container {background: url("../images/bg_index.png") 50% 60px no-repeat; min-height: 400px;}
.home #main {min-height: 200px;}
.home .main-nav,
.home article {background: none;}
.home #site-title .logo a,
.home article,
.home footer {width: 100%;}
.home #site-title .address,
.home .main-nav {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
.home article {position: relative; margin-top: 0;}
.home article header {position: absolute; top: 32px; left: 20px;}
.home h1 {font-size: 20px; color: #fff; font-weight: 400; margin: 0;}
.home h1 span {display: inline-block; margin-right: 40px;}
.home p.telefon {position: absolute; top: 118px; left: 0px; margin-left: -12px;}
.home p.telefon a.tellink {color: #96cc4b; text-decoration: none; font-weight: 700; font-size: 12px;}
.home p.email {position: absolute; top: 84px; right: 0;}
.home p.email a {color: #1795d0; text-decoration: none; font-weight: 700; font-size: 12px;}
.home p.email a:hover {color: #96cc4b; text-decoration: none;}
.home p.home-nav {position: absolute; top: 174px; left: 50px;}
.home p.home-nav {color: #949491;}
.home p.home-nav a {color: #949491; font-weight: 700; font-size: 12px;}
.home p.home-nav a:hover {color: #96cc4b; text-decoration: none;}

/* ----------------------------- */
/* ------- Media Queries ------- */
/* ----------------------------- */

@media screen and (min-width: 340px) {
    .home #main {min-height: 300px;}
    .home article header {top: 40px; left: 20px;}
    .home h1 span {margin-right: 90px;}
    .home p.telefon {top: 158px; left: 0px; }
    .home p.email {top: 130px; right: 8px;}
    .home p.home-nav {top: 244px; left: 80px;}
}
@media screen and (min-width: 400px) {
    .home #main {min-height: 400px;}
    .home article header {top: 60px; left: 40px;}
    .home h1 span {margin-right: 100px;}
    .home p.telefon {top: 208px; left: 20px; }
    .home p.telefon a.tellink {font-size: 14px;}
    .home p.email {top: 160px; right: 8px;}
    .home p.email a {font-size: 14px;}
    .home p.home-nav {top: 304px; left: 90px;}
    .home p.home-nav a {font-size: 14px;}
}
@media screen and (min-width: 470px) {
        .home #container {min-height: 600px;}
    .home #main {min-height: 500px;}
    .home article header {top: 80px; left: 60px;}
    .home h1 {font-size: 24px;}
    .home h1 span {margin-right: 120px;}
    .home p.telefon {top: 278px; left: 20px; }
    .home p.email {top: 200px; right: 8px;}
    .home p.home-nav {top: 394px; left: 150px;}
}
@media screen and (min-width: 590px) {
    .home #main {min-height: 580px;}
    .home article header {top: 110px; left: 60px;}
    .home h1 {font-size: 30px;}
    .home h1 span {margin-right: 140px;}
    .home p.telefon {top: 328px; left: 30px; }
    .home p.telefon a.tellink {font-size: 16px;}
    .home p.email {top: 240px; right: 18px;}
    .home p.email a {font-size: 16px;}
    .home p.home-nav {top: 444px; left: 170px;}
    .home p.home-nav a {font-size: 16px;}
}
@media screen and (min-width: 660px) {
    .home #main {min-height: 680px;}
    .home article header {top: 130px; left: 80px;}
    .home h1 {font-size: 36px;}
    .home h1 span {margin-right: 144px;}
    .home p.telefon {top: 388px; left: 40px; }
    .home p.email {top: 286px; right: 18px;}
    .home p.home-nav {top: 524px; left: 230px;}
}
@media screen and (min-width: 768px) {
    .home article header {top: 170px; left: 110px;}
    .home h1 {font-size: 36px;}
    .home h1 span {margin-right: 160px;}
    .home p.telefon {top: 428px; left: 60px; }
    .home p.email {top: 346px; right: 38px;}
    .home p.home-nav {top: 614px; left: 280px;}
}
@media screen and (min-width: 880px) {
	.mobile-only {display:none;}
    #container {margin:0 auto;}
    #site-header {margin: 72px 0 0 0;} 
    #site-title {width: 50%; float: left; }
    #site-title .logo a {width: 332px; height: 39px; margin: 18px 0 48px 0;}
    #site-title .address {}
	.off-canvas-nav ul {display:none;}
    .main-nav {width: 50%; float: right; text-align: right; background: url("../images/sprechblase_gruen_blau.png") 100% 0 no-repeat; padding: 126px 0 17px 0;}
    .main-nav ul {margin: 0 12px 0 0; text-align: right;}    
    article {width: auto; margin: 50px 0 0 158px; padding: 62px 0 80px 70px;}
    footer {width: 100%;}
    
    /* Startseite */
    .home footer {background-image: none;}
    .home #main {min-height: 600px;}
    .home article header {top: 132px; left: 20px;}
    .home h1 {font-size: 36px; margin: 0;}
    .home h1 span {margin-right: 144px;}
    .home p.email {top: 266px; right: 308px;}
    .home p.telefon {top: 338px; left: 0px; margin-left: -12px;}
    .home p.home-nav {top: 484px; left: 150px;}
}
@media screen and (min-width: 1024px) {
    a.tellink, a.tellink:hover {text-decoration: none; cursor: auto;}
    #site-title a.tellink:hover {color: #1795d0;}
}
@media screen and (max-width: 879px) {
    .home #container {background-size: contain; width: calc(100% - 44px);}
    .home article {padding: 0;}
}