/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, 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, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align: baseline;}     
    
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}

* {margin:0; padding:0; box-sizing:border-box; transition:all 0.2s ease-out 0s; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}   

@font-face {
    font-family: 'apple_garamond';
    src: url('../fonts/applegaramond-lightitalic-webfont.eot');
    src: url('../fonts/applegaramond-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/applegaramond-lightitalic-webfont.woff') format('woff'),
         url('../fonts/applegaramond-lightitalic-webfont.ttf') format('truetype'),
         url('../fonts/applegaramond-lightitalic-webfont.svg#apple_garamond_lightitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {font-size:16px;}
body {font-family:"Source Sans Pro",Arial,sans-serif; line-height:1; color:#1f2626; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}

/*---------------------------- ALLGEMEIN -------------------------------------*/

a {outline:none; color:#1f2626;}
:focus {outline:none;}
p {line-height:150%; margin-bottom:10px;}
p:last-child {margin-bottom:0;}
b {font-weight:bold; /*font-size:1.5rem;*/}
img {max-width:100%; height:auto; border:none; display:block;}
input, select, textarea, label {font-size:100%; font-family:inherit; color:inherit;}
h1 {font-size:4rem; font-weight:bold; color:#1fa1b7; line-height:150%;}
h2 {font-size:3rem; font-weight:bold; color:#1fa1b7; margin-bottom:15px;}
h3 {font-size:2rem; font-weight:bold; margin-bottom:10px; line-height:125%;}
nav ul {list-style:none;}
#content-container ul {margin-left:20px; line-height:150%;}
  #content-container ul li {margin-bottom:20px;}  

.col-3 > div, .col-3 li {float:left; width:31%; margin:0 3.5% 3.5% 0;}
.col-3 > div:nth-of-type(3n), .col-3 li:nth-of-type(3n), .col .last {margin-right:0;}
.col-5 > * {display:inline-block; vertical-align:middle; width:18%; margin-right:2.5%;}  

p.col-2 {-webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px;}

.button {padding:5px 10px; border:2px solid #1fa1b7; color:#1fa1b7; text-decoration:none; font-size:1.25rem; float:right; margin-top:10px; font-weight:bold;}
.clear, .wrapper:after, nav ul:after, .col:after {float:none; clear:both; height:0; display:block; font-size:0; content:"."; visibility:hidden;}

/* 
  türkis: #1fa1b7 
  schwarz: #1f2626
  grau: #5b6060
*/

/*----------------------------- BEREICHE -------------------------------------*/

.wrapper {margin:0 auto; max-width:950px; width:90%; position:relative;}
.full-width {width:100%; height:auto; margin:0 auto;}

#header-container {padding:20px; /*position:fixed; background:#fff; width:100%;*/}
  #logo {float:left; width:250px;}
  nav.main {float:right;}
    nav.main li {float:left; margin-left:20px;}
      nav.main li a {display:block; /*padding:10px;*/ line-height:125px; font-size:1.5rem; font-weight:bold; text-decoration:none; text-transform:lowercase;}
      nav.main li.active a, nav.main li a:hover {color:#1fa1b7;}
#content-container {/*padding-top:84px;  berechnen */}
  #content-container section {margin-bottom:20px; border-bottom:1px solid #efefef; padding-bottom:20px;} 
  #content-container section.no-border {border-bottom:0; padding-bottom:0;}
    #projects > div {position:relative;}
      #projects .overlay {position:absolute; width:100%; height:100%; background-color:rgba(0,0,0,0.6);}
        #projects .overlay h3 {color:#fff; text-align:center; padding:25% 10%;}
          #projects .overlay span {display:block; font-size:smaller; font-weight:normal;}
      #projects > div:hover .overlay {display:none;}
    ul#praxis {list-style:none; margin-left:0;}
      ul#praxis li {border:1px solid #efefef;}
  #header-img {background:none no-repeat center center #1fa1b7; margin-bottom:20px; padding:50px 20px;}
    #header-img h1 {color:#fff;}
#contact-container {font-size:larger; margin-bottom:0; padding:20px 0; background-color:#5b6060; text-align:center; color:#1fa1b7;}
  #contact-container section {font-size:0;}
    #contact-container section div {font-size:1.25rem;}
      #contact-container b {font-weight:bold; color:#fff;}
      #contact-container a {color:#1fa1b7;}
  
#footer-container {padding:20px 0; background:#1f2626;}
  #copy {float:left; color:#5b6060;}
  #face {margin:0 auto; -webkit-border-radius:50%; border-radius:50%;}
  nav.footer {float:right;}
    nav.footer li {float:right;}
      nav.footer li a {margin-left:10px; color:#fff; text-decoration:none;}
      
#doctenaCalendarWidget.calendar-widget {margin:10px 0 0!important;}

/*-------------------------- MEDIA QUERIES -----------------------------------*/

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

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

}

@media only screen and (max-width: 768px){
  nav.main li a {font-size:1.25rem;}
  h1 {font-size:3rem;}
  h2 {font-size:2rem; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto;}

}

@media only screen and (max-width: 568px){
  #header-container, #header-img {padding:20px 0;}
  nav.main {margin-top:20px;}
  nav.main, #logo {float:none;}
    nav.main li {margin:0 20px 0 0;}
      nav.main li a {line-height:100%; padding:10px 0; font-size:1.25rem;}
}

@media all and (max-width: 480px) {

  #logo {margin:0 auto;}

  nav.main li {float:none; margin:0;}
    nav.main li a {display:block; text-align:center;}

  p.col-2 {-webkit-column-count:1; -moz-column-count:1; column-count:1; }
  .col-5 > * {display:block; width:100%; margin:0 0 10px;}
  .col-3 > div, .col-3 li {float:none; width:100%; margin:0 0 10px;}
  #copy, nav.footer, nav.footer li {float:none;}
  nav.footer li a {margin:10px 0 0; display:block;}
  
}