/* 

- .col-left, .col-right (Singen)
- .fixed (contact)
- .fullwidth: negative margins (pictures, black sheet)
- .inline
- .invert: white on black
- .line: top line
- .offset-l: left margin
- .offset-b: margin at bottom (2em)
- .offset-t: padding on top
- .offset-v: remove horizontal padding
- .nomargin
- .padded (black sheet)
- .padded--mobile: (black sheet: padding for headline)
- .padded--reduced: (black sheet: padding for cta)
- .paragraph: margin at bottom (1em)
- .stretched: full height

HEADQUARTER
- .padded: remove margin-top from style definition (add .offset-t at parent if needed)
- remove .figure (add .offset-t at parent if needed)

*/

/* UTIL */

main img {
    pointer-events: none}

/* cols */
.col-left{
	float: left;
	clear: left}
.col-right{
	width: 65%}
	
@media screen and (min-width: 30em) {
	.columnized {
		display: flex;
		/*border: 1px solid red*/}
	/*.columnized > .column-content {
		border: 1px solid blue}*/
	.columnized > .column-content > div {
		height: 100%}
}

/* display */
@media screen and (max-width: 29.938em) {
	.desktop{
		display: none}
}
@media screen and (max-width: 29.938em) {
	.hidden--mobile{
		visibility: hidden}
}
.inline{
	padding-right: 0.25em;
	display: inline-block}
.invisible{
	display: none}

/* height/width */
@media screen and (max-width: 22.5em) {
	.fullwidth{
		width: calc(100% + 1.25em);
		margin-left: -0.625em}
}
@media screen and (min-width: 22.5em) and (max-width: 29.938em) {
	.fullwidth{
		width: calc(100% + 2.5em);
		margin-left: -1.25em}
}
@media screen and (min-width: 29.938em) {
	.stretched{
		height: 100%}
}

/* invert */
.invert{
	background: #000}
@media screen and (max-width: 29.938em) {
	.invert--mobile{
		background: #000}
}

/* line */
.line{
	border-top: 1px solid #fff}
@media screen and (min-width: 48em) {
	.line{
		border-top: 2px solid #fff}
}

/* offset (margin/padding) */
.nomargin{
	margin-bottom: 0}
.offset-b{
	margin-bottom: 2em}
@media screen and (min-width: 30em) {
	.offset-l{
		margin-left: 2rem !important}
}
@media screen and (min-width: 48em) {
	.offset-l{
		margin-left: 4.75rem !important}
}
@media screen and (min-width: 90em) {
	.offset-l{
		margin-left: 6.75rem !important}
}
@media screen and (min-width: 29.938em) {
	.offset-t{
		padding-top: 1em}
}
@media screen and (min-width: 48em) {
	.offset-t{
		padding-top: 2em}
}
@media screen and (min-width: 60em) {
	.offset-v{
		padding-left: 0;
		padding-right: 0}
}
@media screen and (min-width: 90em) {
	.offset-v{
		padding-left: 0;
		padding-right: 0}
}
.padded{ /* remove margin-top, use .offset-t */
	/*margin-top: 1em;*/
	padding: 1em 0.625rem}
@media screen and (min-width: 22.5em) {
	.padded{
		padding: 2rem 1.25rem}
}
@media screen and (min-width: 30em) {
	.padded{
		margin-top: 1em;
		padding: 2rem}
}
@media screen and (min-width: 48em) {
	.padded{
		margin-top: 2em;
		padding: 3rem}
}
@media screen and (min-width: 90em) {
	.padded{
		padding: 128px}
}
@media screen and (max-width: 22.5em) {
	.padded--mobile{
		padding: 0.625rem;
		padding-bottom: 0}
}
@media screen and (min-width: 22.5em) and (max-width: 29.938em) {
	.padded--mobile{
		padding: 1.25rem;
		padding-bottom: 0}
}	
.row{
	margin-bottom: 2em}
.row:last-child{
	margin-bottom: 0}

/*	
.demo .skills__list .row{
	margin-bottom: 1em}*/
/*.demo .list-teaser{
	margin-bottom: 2.5em}*/
.demo .list li{
	margin-bottom: 1em}
.demo .list li:last-child{
	margin-bottom: 0}

/* position */
@media screen and (min-width: 29.938em) {
	.fixed{
		position: absolute}
}

/* text */
.justify {
	text-align: justify;
}
.hyphenate{
  word-wrap: break-word;
  overflow-wrap: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto}
.paragraph{
	margin-bottom: 1em}