.clearfix { clear: both; height: 0; overflow: hidden; }


/* The 3 CONTAINERS  */
/* fixed values */
/* mobil:  */
/* tablet:   */
/* pc:  */
div.header-container {
  	position: fixed;
  	left: 0;
  	top: 0;
  	width: 100%;
  	z-index: 20;
}

div.content-container { 
  	z-index: 10;
}
div.footer-container {
  	width: 100%; 
 /* 	position: fixed;  */
  	bottom: 0;
  	left: 200;
  	z-index: 20;
}

/* Relative Locations of HEADER-CONTAINER and CONTENT-CONTAINER */
/* This is the border between header and content.  */
/* The border between footer and content doesn't matter as footer isd fixed and high z-value */
/* NOTE! if you change the margins, you must change the margins in the javascript! */
/* mobil:  */
/* tablet:   */
/* pc:  */
div.header-container {	height:          auto; }
div.content-container {  margin-top:      20px; }

@media all and (min-width: 501px) and (max-width: 768px) {
}
@media all and (max-width: 501px) {
}

/* FOOTER-CONTAINER */
/* mobil: */
/* tablet: */
/* pc: */
div.footer-container { display: block; }

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

/* HEADER-CONTAINER + FOOTER-CONTAINER */
/* javascript-triggered menu */
/* mobil: display menu icon */
/* tablet: */
/* pc: */
.header-menu-icon, .footer-menu-icon { display: none; }

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



/* NAV MENU in section  */
/* pc: show section nav */
div.section-nav { display: block; }
/* mobil: none -- display nav bar block via javascript */
/* tablet: none -- nav bar contains inline divs */
@media all and (max-width: 768px) {
}


/* */
/* */

/* NAV MENU in header  */
/* pc: none */
div.header-nav { display: none;  }
/* tablet: block display of nav menu at all times */
@media all and (min-width: 501px) and (max-width: 768px){
}
/* mobile: hidden nav menu under javascript control */
@media all and (max-width: 501px) {
}











/* NAV MENU TEXT divs */
/* display text divs are inline (tablet) or block (pc, mobil)*/
/* pc: block */
/* mobil: block */
div.menu { display: block; padding: 0 0 0 0; }
/* tablet:  inline  */
@media all and (min-width: 501px) and (max-width: 768px){
}




/* CONTENT */
/* pc:  */
div.section-one {  float: left; }
div.section-two {  float: right; }
div.section-three {  float: left; }

div.section-nav {  float: left; }
div.section-nav {  width: 18%; }
div.section-one {  width: 41%; }  /* 37% */
div.section-two {  width: 35%; }
div.section-three {  width: 76%; }

/* tablet:   */
@media all and (max-width: 768px) {
}
/* mobil:  */
@media all and (max-width: 501px) {
}








/* FOOTER */
/* mobil:  */
/* tablet:   */
/* pc:  */
.footer-debug{ display: none; } 
.footer-debug{ float: right; }

/* FOOTER */
/* mobil:  */
/* tablet:   */
/* pc:  */
.footer-title { display: inline; }
.footer-title { float: left; }

.header-title { float: left; }
@media all and (max-width: 768px) and (min-width: 501px){
}

/* FOOTER SHOWS WEBSITE AUTHOR */
/* tablet:  shows  */
/* pc:  shows  */
.footer-author { display: inline; float: right; }
.footer-author-mobil { display: none }
/* mobil: no room */
@media all and (max-width: 501px) {
}


/* HEADER Entries */
/* pc:  */
.header-short-title { display: inline; }
.header-page , .header-short-title { display: none; }
.header-title  { display: none; }
.header-subtitle { display: none; }
.header-subtitle { float: left; }
.footer-subtitle { display: inline; clear: both;}

/* tablet:   */
@media all and (max-width: 768px) {
}
/* mobil:  */
@media all and (max-width: 501px) {
}

/* IMAGE CYCLE DIV containing the image  */
/* image box that cycles around images in a directory */
/* IMPORTANT: - limit one per page */
/* tablet:   */
/* pc:  */
div#image-cycle { 
		text-align: right; 
		padding: 0 0 0 0;
}
/* mobil:  */
@media all and (max-width: 501px) {
}


/* IMAGE CYCLE */
div#image-cycle .one-image-cycle { 
		display: none;  /* javascript controls display, start with all hidden */ 
		width: 100%;
}