@charset "utf-8";

/**
 * Die ganze Website
 */
/********************************************************************************
	Ganze Seite: 		.page-container-2
	Logo-Bereich:		.header-banner
	Meta-Menu Bar: 		.header-bar-1-left
	Mittlere Spalte:	.main-container
	Rechte Spalte:		.right-column
*********************************************************************************/

/* Diese Deklaration muss Stern, html und body definieren um Bootstrap.css zu überschreiben! */
*, html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-repeat: no-repeat !important; /* Diese Eigenschaft würde sonst irgendwo (habe ich nicht herausgefunden) überschrieben */
/*	letter-spacing: 0.02em; */
}

/**
 * Grosser Bildschirm
 */
@media all and (min-width: 768px) {
	*, html, body {
		font-family: var(--big-screen---font-family);
		font-size: var(--big-screen---font-size);
		line-height: var(--big-screen---line-height);
	}
}

/**
 * Kleiner Bildschirm
 */
@media all and (max-width: 767px) {
	*, html, body {
		font-family: var(--small-screen---font-family);
		font-size: var(--small-screen---font-size);
		line-height: var(--small-screen---line-height);
	}
}

*:before, *:after {
	width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	content: inherit;
}

html {
	width: 100%;
	width: auto;
	height: 100%;
	min-height: 100%;
}

body {
	float: left;
	width: 100%;
/*	height: 100vw; */
/*	height: 100%; */ /* Beschränkt die Höhe auf den Viewport und verhindert dadurch die sticky navbar! */
	min-height: 100%;
	padding: 0;
	margin: 0 auto;
	overflow-x: hidden;
/*	overflow-y: auto; */
}

@media all and (max-width: 1100px) {
	/*
	body {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	*/
}

div {
/*	border: 1px solid red; */
}

.ui-dialog .ui-dialog-titlebar {
	display: grid;
	height: 50px;
	line-height: 50px;
	background-color: #eeeeee;
	background-image: none;
	border: 0;
	border-radius: 0;
}

.ui-widget-content {
	background-color: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]):not(input[type="file"]),
select,
.ui-widget select {
	font-weight: normal;
	border-radius: 5px;
	margin: 0;
	background-color: #f7f7f7;
	border-style: inset;
	padding-left: 3px;
	width: 100%;
/*	max-width: 500px; */
}

input[type="file"] {
}

/**
 * Grosser Bildschirm
 */
@media all and (min-width: 768px) {

	input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]):not(input[type="file"]),
	select,
	.ui-widget select {
/*		font-size: var(--input-field-big-screen---font-size); */
		height: var(--input-field-big-screen---height);
		line-height: var(--input-field-big-screen---height);
	}
}

/**
 * Kleiner Bildschirm
 */
@media all and (max-width: 767px) {

	input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]):not(input[type="file"]),
	select,
	.ui-widget select {
		font-size: var(--input-field-small-screen---font-size);
		height: var(--input-field-small-screen---height);
		line-height: var(--input-field-small-screen---height);
	}

}

input[type="radio"],
input[type="checkbox"] {
	height: 24px;
	display: table-cell;
	/*	margin-right: 3px; */
	margin: unset;
	line-height: inherit;
	vertical-align: middle;
}

input:required {
	box-shadow: none;
}

.inputSubmit {
	float: left;
	width: 100%;
	position: sticky;
	top: 0;
}

textarea {
	font-weight: normal;
	resize: none;
	padding: 0;
	margin: 0;
	border-radius: 5px;
	background-color: #f7f7f7;
	width: 100%;
}

option {
	padding: 0 0 0 3px;
	border-radius: 5px;
	line-height: initial;
	margin: 0;
	border: 0;
}

#paypal-button input {
	height: auto;
}

.mce-edit-area {
	font-size: 1em;
}

/* Keine CSS-Formatierung! */
* .raw-html {
	animation: none;
	animation-delay: 0ms;
	animation-direction: normal;
	animation-duration: 0ms;
	animation-fill-mode: none;
	animation-iteration-count: 1;
	animation-name: none;
	animation-play-state: running;
	animation-timing-function: ease;
	backface-visibility: visible;
	background: 0;
	background-attachment: scroll;
	background-clip: border-box;
	background-color: transparent;
	background-image: none;
	background-origin: padding-box;
	background-position: 0 0;
	background-position-x: unset;
	background-position-y: unset;
	background-repeat: no-repeat;
	background-size: auto auto;
	border: 0;
	border-style: none;
	border-width: medium;
	border-color: inherit;
	border-bottom: 0;
	border-bottom-color: inherit;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-style: none;
	border-bottom-width: medium;
	border-collapse: separate;
	border-image: none;
	border-left: 0;
	border-left-color: inherit;
	border-left-style: none;
	border-left-width: medium;
	border-radius: 0;
	border-right: 0;
	border-right-color: inherit;
	border-right-style: none;
	border-right-width: medium;
	border-spacing: 0;
	border-top: 0;
	border-top-color: inherit;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top-style: none;
	border-top-width: medium;
	bottom: auto;
	box-shadow: none;
	box-sizing: content-box;
	caption-side: top;
	clear: none;
	clip: auto;
	color: inherit;
	columns: auto;
	column-count: auto;
	column-fill: balance;
	column-gap: normal;
	column-rule: medium none currentColor;
	column-rule-color: currentColor;
	column-rule-style: none;
	column-rule-width: unset;
	column-span: 1;
	column-width: auto;
	content: normal;
	counter-increment: none;
	counter-reset: none;
	cursor: auto;
	direction: ltr;
	display: inline;
	empty-cells: show;
	float: none;
	font: unset;
	font-family: inherit;
	font-size: medium;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	height: auto;
	hyphens: none;
	left: auto;
	letter-spacing: normal;
	line-height: normal;
	list-style: none;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: disc;
	margin: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	max-height: none;
	max-width: none;
	min-height: 0;
	min-width: 0;
	opacity: 1;
	orphans: 0;
	outline: 0;
	outline-color: invert;
	outline-style: none;
	outline-width: medium;
	overflow: visible;
	overflow-x: visible;
	overflow-y: visible;
	padding: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	page-break-after: auto;
	page-break-before: auto;
	page-break-inside: auto;
	perspective: none;
	perspective-origin: 50% 50%;
	position: static;
	/* May need to alter quotes for different locales (e.g fr) */
	quotes: '\201C' '\201D' '\2018' '\2019';
	right: auto;
	tab-size: 8;
	table-layout: auto;
	text-align: inherit;
	text-align-last: auto;
	text-decoration: none;
	text-decoration-color: inherit;
	text-decoration-line: none;
	text-decoration-style: solid;
	text-indent: 0;
	text-shadow: none;
	text-transform: none;
	top: auto;
	transform: none;
	transform-style: flat;
	transition: none;
	transition-delay: 0s;
	transition-duration: 0s;
	transition-property: none;
	transition-timing-function: ease;
	unicode-bidi: normal;
	vertical-align: baseline;
	visibility: visible;
	white-space: normal;
	widows: 0;
	width: auto;
	word-spacing: normal;
	z-index: auto;
	/* basic modern patch */
	all: initial;
	all: unset;
}

.ui-widget .ui-widget {
	font-size: unset;
}

/* Disable fucking Twitter-Bootstrap pollutions!!! */
.radio, .checkbox {
	position: unset;
	margin: unset;
}

/* Disable fucking Twitter-Bootstrap pollutions!!! */
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
	position: unset;
	margin: unset;
}

/* Disable fucking stupid Twitter-Bootstrap pollutions!!! */
.hidden {
	display: unset !important;
}

.hpl-th.hidden,
.hpl-td.hidden {
	display: table-cell !important;
}

.selector {
	clear: both;
	float: left;
	line-height: inherit;
	height: 100%;
/*	border: 1px solid #ccc; */
}

.selector label {
	display: table-row;
}

.selector span {
	display: table-cell;
	vertical-align: middle;
	line-height: inherit;
	height: 100%;
}

button {
/*	padding-left: 3px; */
	border-radius: 5px;
/*	height: 100%; */
}

legend {
	font-size: inherit; /* Override Bootstrap */
}

/* Macht das Tabellen auf iPhone horizontal gescrollt werden koennen */
.horizontal-scroll-wrapper {
	width: 100%;
/*	white-space: nowrap; */
	overflow-x: scroll;
/*	border: 3px solid #eeeeee; */
	-webkit-overflow-scrolling: touch;
}

.horizontal-scroll-wrapper {
/*	background: linear-gradient(to right, #80e02c 0%,#20380b 100%); */
}

/* Macht das Tabellen auf iPhone horizontal gescrollt werden koennen */
.table-wrapper-fixed {
	float: left;
	width: 100%;
}

.table-wrapper-fixed .hpl-table {
/*	table-layout: fixed; */
	width: 100%;
}

.hpl-table,
table {
	display: table;
	border-collapse: collapse;
}

thead,
.hpl-table-header-group {
	display: table-header-group;
}

tbody,
.hpl-table-body-group {
	display: table-row-group;	/* Tatsächlich table-row-group. Wo ist da die Konsistenz? */
}

tfoot,
.hpl-table-footer-group {
	display: table-footer-group;
}

.hpl-table .hpl-tr,
table tr {
	display: table-row;
/*	height: 100%; */
}

.hpl-table .hpl-th,
table th {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 5px;
	font-weight: bold;
/*	word-break: break-all; */
	word-wrap: break-word;
/*	height: 100%; */
}

.hpl-table .hpl-td,
table td {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 3px;
/*	word-break: unset; */
/*	word-wrap: unset; */
/*	white-space: nowrap; */
	word-wrap: break-word;
/*	height: 100%; */
}

.hpl-table.contenttable p {
	margin: 0 !important;
}

.contenttable {
	border: 2px solid #efefef;
}

.contenttable th,
.contenttable td {
	border: 0;
	padding: 1px 5px;
	border: 2px solid #efefef;
}

/*
.hpl-table {
	display: table;
	border-collapse: collapse;
}

.hpl-th {
	display: table-cell;
}

.hpl-td {
	display: table-cell;
}
*/

/* Diese Definition bewirkt, dass Inhalte nach schliessenden Accordions nach oben rutschen */
form {
	float: left;
	width: 100%;
}

fieldset {
/*	clear: bo.hpl-th; */
	width: 100%;
	border: 0;
}

em {
	font-style: italic;
}

blockquote {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 50px;
	border: 0;
}

strong {
	font-weight: bold;
}

a, a:active, a:focus {
	outline: none;
}

img, embed, object, video {
	border: 0;
	overflow: hidden;
}

p {
/*  clear: both; */
	font-family: inherit;
/*	margin: 0; */
}

p:first-child {
	margin-top: 0;
}

ul, ol {
	list-style-position: inside;
}

ul {
	margin-left: 20px;
}

li {
	margin: 10px 0 5px 10px;
	list-style: none;
	list-style-position: outside;
}

.link {
	margin-top: 10px;
}

.page-container-1 {
/*	height: 100%; /* Wenn diese Einstellung aktiviert wird, klebt der Footer am unteren Ende des Bildschirms, auch wenn gescrollt werden muss */
	width: 100%;
/*	max-width: 1100px; */
/*	max-width: 100%; */
	min-height: 100%;
	padding-bottom: 35px;
	background-color: #ffffff !important;
	margin: 0 auto;
	box-shadow: var(--box-shadow);
	position: relative;
}

.page-container-2 {
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100%;
/*	overflow: hidden; */
	margin: 0 auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
/*	background-color: #ffffff !important; */
}

.container-fluid {
	margin-left: 0; /* Braucht es um Bootstrap zu übersteuern */
	margin-right:0; /* Braucht es um Bootstrap zu übersteuern */
	margin: 0 auto;
	width: 100%;
	height: 100%;
	min-height: 100%;
/*	max-width: 1300px; */
/*	max-width: 100%; */
	background-color: #ffffff;
	background-repeat: repeat-y;
	position: relative;
	padding-bottom: 40px; /* Muss eingeschaltet werden, wenn Header-Banner und Header-Bar statisch sind */
	z-index: 1;
}

/**
 * Grosser Bildschirm
 */
@media all and (max-width: 767px) {
	.container-fluid {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/**
 * Kleiner Bildschirm
 */
@media all and (min-width: 768px) {
	.container-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.left-column {
/*	display: table-cell; */
/*	width: 0; */
}

.right-column {
/*	display: table-cell; */
/*	width: 0; */
}


/* Muss bootstrap.css übersteuern! */
.checkbox label {
	padding-left: unset;
}

label,
.label {
	color: #000; /* Override Bootstrap! */
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	white-space: normal;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	line-height: 27px;
}

@media all and (min-width: 768px) {
	label,
	.label {
/*		font-size: var(--input-field-big-screen---font-size); */
	}
}

@media all and (max-width: 767px) {
	label,
	.label {
/*		font-size: var(--input-field-small-screen---font-size); */
	}
}

/**
 * Die Aufteilung der Spalten
 * Es muss gelten: page-container-2.width = right-column.width + 2*right-column.margin + 2*right-column.padding +
 *                                          content2.width + 2*content2.margin + 2*content2.padding +
 */

.main-container {
/*	max-width: 1200px; */
	padding: 0;
/*	margin: 0 auto; */
	height: auto;
	min-height: 100%;
	color: black;
	font-size: 1.0em;
}

.main-container {
	width: 100%;
	height: 100%;
/*	margin: 0 auto; */
	padding: 10px;
	color: black;
	font-size: 1.0em;

	word-wrap: break-word;
	word-break: normal;
	white-space: normal;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.hyphens-auto {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.hyphens-none {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	-o-hyphens: none;
	hyphens: none;
}

/*** Headers ***/
h1, h2, h3, h4 {
	clear: both;
	float: left;
	width: 100%;
	margin-top: 0; /* Override bootstrap.css */
	margin-bottom: 0; /* Override bootstrap.css */
}

/*
 * Title
 */
.MsoTitle {
	font-family: var(--mso-title---font-family);
	font-weight: var(--mso-title---font-weight);
	font-style: var(--mso-title---font-style);
	font-size: var(--mso-title---font-size);
	line-height: var(--mso-title---font-size);
	color: var(--mso-title---color);
	text-decoration: var(--mso-title---text-decoration);
	margin-top: var(--mso-title---font-size);
	margin-bottom: var(--mso-title---font-size);
	letter-spacing: var(--header---letter-spacing);
}

.MsoTitle.csc-firstHeader {
	margin-top: 0;
}

.MsoTitle:first-of-type {
	margin-top: 0;
}

.MsoTitle:first-child {
	margin-top: 0;
}

.MsoTitle + .MsoTitle {
	margin-top: 0;
}

.MsoTitle + h1 {
	margin-top: 0;
}

/*
 * Header 1
 */
h1,
h1 span {
	font-family: var(--h1---font-family);
	font-weight: var(--h1---font-weight);
	font-style: var(--h1---font-style);
	font-size: var(--h1---font-size);
	line-height: var(--h1---font-size);
	color: var(--h1---color);
	text-decoration: var(--h1---text-decoration);
	margin-top: var(--h1---font-size);
	margin-bottom: var(--h1---font-size);
	letter-spacing: var(--header---letter-spacing);
}

h1.csc-firstHeader {
	margin-top: 0;
}

h1:first-of-type {
	margin-top: 0;
}

h1:first-child {
	margin-top: 10px;
}

/* Aufeinanderfolgende h1 Header */
h1 + h1 {
	margin-top: 0;
}

h1 + h2 {
	margin-top: 0;
}

/*
 * Header 2
 */
h2,
h2 span {
	font-family: var(--h2---font-family);
	font-weight: var(--h2---font-weight);
	font-style: var(--h2---font-style);
	font-size: var(--h2---font-size);
	line-height: var(--h2---font-size);
	color: var(--h2---color);
	text-decoration: var(--h2---text-decoration);
	margin-top: var(--h2---font-size);
	margin-bottom: var(--h2---font-size);
	letter-spacing: var(--header---letter-spacing);
}

h2.csc-firstHeader {
	margin-top: 0;
}

h2:first-of-type {
	margin-top: 0;
}

h2:first-child {
	margin-top: 0;
}

/* Aufeinanderfolgende h3 Header */
h2 + h2 {
	margin-top: 0;
}

h2 + h3 {
	margin-top: 0;
}

/*
 * Header 3
 */
h3,
h3 span {
	font-family: var(--h3---font-family);
	font-weight: var(--h3---font-weight);
	font-style: var(--h3---font-style);
	font-size: var(--h3---font-size);
	line-height: var(--h3---font-size);
	color: var(--h3---color);
	text-decoration: var(--h3---text-decoration);
	margin-top: var(--h3---font-size);
	margin-bottom: var(--h3---font-size);
	letter-spacing: var(--header---letter-spacing);
}

/* Obsolete: Aktuell ist h2 + h3 */
h3.csc-firstHeader {
	margin-top: 0;
}

h3:first-of-type {
	margin-top: 0;
}

h3:first-child {
	margin-top: 0;
}

/* Aufeinanderfolgende h3 Header */
h3 + h3 {
	margin-top: 0;
}

h3 + h4 {
	margin-top: 0;
}

/*
 * Header 4
 */
h4,
h4 span {
	font-family: var(--h4---font-family);
	font-weight: var(--h4---font-weight);
	font-style: var(--h4---font-style);
	font-size: var(--h4---font-size);
	line-height: var(--h4---font-size);
	color: var(--h4---color);
	text-decoration: var(--h4---text-decoration);
	margin-top: var(--h4---font-size);
	margin-bottom: var(--h4---font-size);
	letter-spacing: var(--header---letter-spacing);
}

h4.csc-firstHeader {
	margin-top: 0;
}

h4:first-of-type {
	margin-top: 0;
}

h4:first-child {
	margin-top: 0;
}

/* Aufeinanderfolgende h4 Header */
h4 + h4 {
	margin-top: 0;
}

h4 + h5 {
	margin-top: 0;
}

/*
 * Header 5
 */
h5,
h5 span {
	float: left;
	width: 100%;
	font-size: 100%;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
	/*	text-align: justify; */
}

/* Obsolete: Aktuell ist h4 + h5 */
h5.csc-firstHeader {
	margin-top: 0;
}

h5:first-of-type {
	margin-top: 0;
}

h5.csc-firstHeader {
	margin-top: 0;
}

/* Aufeinanderfolgende h5 Header */
h5 + h5 {
	margin-top: 0;
}

@media all and (max-width: 767px) {
	.main-container h1 {
		margin-bottom: 5px;
	}
}

.csc-default {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top: 20px;
}

.csc-default:first-child,
.csc-default:first-of-type {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*** Text allgemein ***/
.bodytext {
	line-height: 150%;
}

.bodytext .important {
	color: #f00;
}

.contenttable {
	width: auto;
	border-collapse: collapse;
}

.main-container-pagetitle,
.content3-pagetitle,
.csc-firstHeader {
	overflow: hidden;
	/*	width: auto; */
	/*	margin-top: 0 !important; */
	padding: 0px 0px 2px 0px;
	border-bottom: 0;
	/*	font-weight: bold; */
	/*	font-size: 180%; */
}


/*** After image in text wi.hpl-th image ***/
.csc-textpic-clear {
	width: 100%;
	height: 20px;
}

DIV.csc-textpic {
	overflow: visible;
}

.ui-tooltip {
	border: 1px solid #ccc;
	background: #ffeb9b;
	box-shadow: var(--box-shadow);
	padding: 5px 10px;
}

.back-link {
	float: left;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 20px 0;
	line-height: 16px;
}

.back-link p {
	margin: 0 !important;
	padding: 0 !important;
}


/*
.hyphenate {
	word-wrap: break-word;
	word-break: break-word; / * Works in Chrome * /
	white-space: normal;
	hyphens: auto;
	.hyphenate {
	background-color: lightgreen;
}
*/

/* Hyphhenator kann zum Testen ein- und ausgeschaltet werden! */
/*
#HyphenatorToggleBox {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: auto !important;
	z-index: 9999 !important;
	border: 3px solid red;
}

.don.hpl-thyphenate {
	background-color: red;
}
*/

/*** This is not working on Mobile iOS Safari ***/
.modal {
	display: none;
	position: fixed;

	top: 0;
	left: 0;

	height: 100%;
	width: 100%;

	background-color: #cccccc;
	opacity: 0.8;

	z-index: 9999;

	cursor: progress !important;

	filter: blur(10px);

	background-image: url('../../Icons/loading.gif');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

body.hpl-loading {
	overflow: hidden;
}

body.hpl-loading .modal {
	display: block;
}

.align-right {
	text-align: right;
}

/* Dies braucht es, wenn "Content Element CSS (otpional) (fluid_styled_content)" im Template eingebunden ist. */
.ce-textpic,
.ce-nowrap,
.ce-bodytext,
.ce-uploads li,
.ce-uploads div {
	overflow: visible;
	width: 100%;
}

.doubleScroll-scroll-wrapper {
	height: auto;
}

.horizonalScrollbarContentWrapper {
	float: left;
	width: 100%;
}

.content-element {
	float: left;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

/**
 * Felder die nur sichtbar sind für bestimmte Benutzer
 */
.visible-for-role {
	clear: both;
	float: left;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 5px;
	margin: 5px 0;
	background-color: #eee;
/*	opacity: 0.5; */
}

.visible-for-role::before {
	font-size: 0.75em;
}

.visible-for-role-superuser::before {
	content: "Nur sichtbar für den Superuser";
}

.visible-for-role-programmgestaltung::before {
	content: "Nur sichtbar für den Programm-Administrator";
}

.visible-for-role-newsadmin::before {
	content: "Nur sichtbar für den Info-Administrator";
}

/**
 *
 */
.ce-gallery {
	float: left;
/*	width: 100%; */
/*	border: 1px solid blue; */
}

.ce-row {
	clear: both;
	float: left;
	margin-bottom: 10px;
}

/** Breite 100% wenn nur ein einziges Bild in der Zeile ist. Das wird benötigt, damit der Scrollbar richtig initiert wird */
.ce-row > .ce-column:only-child {
	width: 100%;
	max-width: 100vw;
}

.ce-column {
	float: left;
	width: auto;
	margin-bottom: 10px;
	margin-right: 10px;
}

.ce-textpic {
	width: 100%;
}

figure {
	display: block !important;
	width: 100%;
}

.fill-whole-screen-width {
	width: 100vw;
	position: relative;
	left: calc(-50vw + 50%);
	padding-left: 20px;
	padding-right: 20px;
}

.left {
	float: left;
}

.center {
	/* ???? */
}

.right {
	float: right;
}