/* Mobile phone version first */

/* == General ================================================================ */

.mobile_only {
	display: block;
}

.desktop_only {
	display: none;
}

.lineless_link:link { 
  text-decoration: none; 
} 
.lineless_link:visited { 
  text-decoration: none; 
} 
.lineless_link:hover { 
  text-decoration: none; 
} 
.lineless_link:active { 
  text-decoration: none; 
}

.cp_richtext {
	margin-top: -1em;
}

iframe {
	border: none;
}

/* == Test debug output (on debug page) ======================================== */

.debug_output {
	white-space: pre;
	width: 80vw;
	margin-left: 10vw;
	background: black;
	color: white;
	overflow-x: auto;
	padding: 10px;
	font-family: Courier, monospace;
	font-size: small;
}

.debug_output > a {
	color: white;
}
.debug_output > a:visited {
	color: white;
}
.debug_output > a:link {
	color: white;
}

.debug_headline {
	font-size: large;
	font-weight: bold;
}

.debug_error {
	color: red;
}

.debug_success {
	color: lightgreen;
}

.debug_header {
	font-size: xx-large;
	font-weight: bold;	
	margin-top: 30px !important;
	margin-bottom: 25px !important;
}

/*
.debug_coverage {
	width: 80vw;
	height: 80vw;
	margin-left: 10vw;
	padding: 10px;
}

.debug_coverage_frame {
	width: 100%;
	height: 100%;
}
*/

/* == Locale Selectors ========================================================= */

.locale_selectors_container {
	position: absolute;
	top: 1vw;
	right: 1vw;
	margin-bottom: 0;
}

.locale_selectors {
	display: inline-grid;
	grid-gap: 1vw;
	width: fit-content;
}

.locale_selector {
	grid-row: 1;

	width: 4vw;
	height: 4vw;
	margin-left: 0.5vw;
	opacity: 0.7;
	transition: opacity 0.2s;
}

@media (max-width: 550px) {
	.locale_selector {
		width: 8vw;
		height: 8vw;
	}	
}

.locale_selector img {
	width: 100%;
	height: 100%;
}

.locale_selector:hover {
	opacity: 1;
}

/* =========================================================== */

.content_container {  
	position: absolute;
	width: 100%;
}

.content {  
	overflow-x: hidden;
}

.backitem {  
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -100;
	object-fit: cover;
	background-size: cover;
	min-height: 100vh;
}

.content_item_centeredtext {  
	padding-bottom: 10px;
	margin-bottom: 10px;
	
	overflow: auto;
	
	text-align: center;	
}

.content_collapsed_teaser {
	cursor: pointer;
	text-decoration: underline;
}

.content_item_text {
	padding-bottom: 10px;
	margin-bottom: 10px;
	
	overflow: auto;
}

.content_item_error {
	padding-top: 100px;
	padding-bottom: 100px;

	text-align: center;
	overflow: auto;

	color: red;
	font-size: xx-large;
}

.content_section {
	position: relative;
	overflow: hidden;
	transition: height 0.5s;
}

.content_section.collapsed {
	height: 0px !important;
}

.content_section_inner {
	width: var(--section-width-mobile);	
	margin: 0 auto;
	
	display: block;
	grid-gap: 0 30px;
}

.content_section_decoration {
	min-width: 100%;
	
	margin-top: 30px;
	margin-bottom: 30px;
}

.content_section_image {
	max-width: 100%;
	min-width: 100%;
}

.content_image_container_raw {
	margin: 0 auto;
}

.content_section_text {
	overflow: auto;
}

.content_section_fullscreen {
	height: 100vh;
	width: 100vw;
}

/* =========================================================== */

.content_embed_container {
	width: 100%;	
	text-align: center;
	overflow: hidden;
	
	margin: 0 auto;
}

.content_embed {
	width: 100%;	
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}

.content_embed > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* =========================================================== */

.content_table_container {
    border-style: hidden;
	border-collapse: collapse;
	text-align: center;
	overflow: hidden;
	width: 100%;
}

.content_table_container > tbody tr:nth-child(2n + 1) {
	background: #ffffff11;
}
	
.content_table_container > tbody tr:nth-child(2n) {
	background: #00000011;
}

.content_table_container > tbody:first-child {
	border-top: none;
}

.content_table_container > tbody > tr {
	border-top: 1px solid yellow;
	border-bottom: 1px solid yellow;
}

.content_table_container > tbody:last-child {
	border-bottom: none;
}

.content_table_container > tbody > tr > td {
	vertical-align: top;
	text-align: left;
	border: none;
	display: flex;
	
	padding-left: 8px;
	padding-right: 8px;
}

.content_table_container > tbody > tr > td:before {
	content: attr(data-label);
	font-weight: bold;
    width: 120px;
    min-width: 120px;
}

.content_table_container > tbody > tr > td:first-child {
	padding-top: 4px;
}

.content_table_container > tbody > tr > td:last-child {
	padding-bottom: 4px;
}

.table_footer_container {
	margin: 20px 20px 20px 20px;
	text-align: center;
}

/* =========================================================== */

.iconlinklist_container {
	width: 100%;
	padding-top: 10px;
	overflow: hidden;
}

.iconlinklist_container_fullscreen {
	position: absolute;
	bottom: 0;
	left: 0;
}

.iconlinklist_icon {
	font-size: 70px;
	transform: scale(1);
	transition: transform 0.2s;
}
.iconlinklist_icon:hover {
	transform: scale(1.2);
}

@media (max-width: 700px) {
	.iconlinklist_icon {
		font-size: 40px;
	}
}

/* =========================================================== *

.menu {
	width: 100%;
	text-align: center;
	font-size: xx-large;
	
	margin-top: 1vw;
	margin-bottom: 4vw;
}

.menu_item {	
	opacity: 0.3;
	transition: opacity 0.2s;
}
.menu_item:hover {
	opacity: 1;
}

/* =========================================================== */

.content_footer {
	padding-top: 20px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	margin-top: 15px;
	
	overflow: hidden;
	font-size: small;	
	opacity: 0.5;
	
	text-align: center;
	white-space: nowrap;
}

.footer_item {
	padding-bottom: 20px;	
}

.footer_separator::after{
    content: "\a";
    white-space: pre;
}

.footer_link:before {
	content: "\a";
    white-space: pre;
}

/* =========================================================== */

.section_tiles_container {
	display: grid;
    grid-gap: 2px;
    
    width: auto;
    margin: 0;
}

.section_tile {
    position:relative;
    width: auto;
    margin: 0;
    display: grid;
}

.section_tile_before {
	padding-bottom: 100%;
	display: block;
	grid-area: 1 / 1 / 2 / 2;
}

.section_tile:hover .hover_tooltip {
    opacity: 1;
}

.section_tile_link {
	grid-area: 1 / 1 / 2 / 2;
	border: none;
}

.section_tile_link:focus {
	border: inherit;
	outline: none;
} 

.section_tile_link:link {
	text-decoration: none;
}

.section_tile_image {
	width: 100%;
    height: 100%;
    position: absolute;
	object-fit: cover;
}

.section_tile_image_iframe {
	height: 100%;
	width: 100%;
}

.section_list_link_tile {
	width: 100%;
    height: 100%;
    
    text-align: center;
    display: table;
}

.section_list_link_tile_text {
	font-size: 4vw;
	display: table-cell;
    vertical-align: middle;
}

.section_dummy_tile {
	cursor: default;
}

.link_cursor {
	cursor: pointer;	
}

.hover_tooltip {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	
	display: grid;
	grid-template-columns: auto;
	
	padding: 10px;
	background: #000000cc;
	color: #ffffff;
	font-size: 1.1vw;	
	
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:  opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition:  opacity 0.5s;
	transition:  opacity 0.5s;	
}

.tooltip_title {
	font-weight: bold;
	grid-column: 1;
}

.tooltip_item {
	grid-column: 1;
}

/* =========================================================== */

.image_popup {
	width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 1);
    margin-top: -1px;
    animation: zoom 0.3s ease-in-out;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.image_popup img {
    height: 100%;
    object-fit: cover;
}

.image_popup_close_btn {
    color: rgba(255, 255, 255, 0.87);
    font-size: 25px;
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.image_popup_close_btn:hover {
    color: rgb(255, 255, 255);
}

/* =========================================================== */

.debuginfo_panel {
	background: #ffffff;
	color: #000000;
	position: absolute;
	z-index: 99999;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	border: 2px solid #ff0000;
	margin: 10px;
	padding: 20px;
}

.debug_badge {
	background: #ff0000;
	color: #ffffff;
	position: fixed;
	z-index: 99998;
	top: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	white-space: nowrap;
	padding: 10px;
	
	animation: fadeout 1s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	
	writing-mode: vertical-lr;
	text-orientation: upright;
	cursor: pointer;
}

@keyframes fadeout {
	from { opacity: 1; }
    to   { opacity: 0.05; }
}

/* =========================================================== */
/* =========================================================== */


@media (min-width: 1025px) {
	.mobile_only {
		display: none;
	}
	
	.desktop_only {
		display: block;
	}

	/* =========================================================== */
	
	.content_section_inner {
		width: var(--section-width-desktop);
		display: grid;	
	}
	
	.section_list_link_tile_text {
		font-size: 2.3vw;
	}
	
	/* =========================================================== */
	
	.content_table_container > tbody tr:nth-child(2n + 1) {
		background: unset;
	}
		
	.content_table_container > tbody tr:nth-child(2n) {
		background: unset;
	}
	
	.content_table_container > tbody > tr {
		border: none;
		padding: 0;
	}

	.content_table_container > tbody > tr > td {
		display: table-cell;
		border: 1px solid yellow;
		
		padding-top: 4px;
		padding-bottom: 4px;
	}
	
	.content_table_container > tbody > tr > td:before {
		display: none;
	}
	
	/* =========================================================== */

	.content_footer {
		overflow: visible;
	}
	
	.content_footer:before {
	    content: "";
	    margin-left: -100%;
	}
	.content_footer:after {
	    content: "";
	    margin-right: -100%;
	}

	.footer_separator:before {
		content: " | ";
	}

	.footer_separator::after{
	    content: "";
	    white-space: inherit;
	}
	
	.footer_link:before {
		content: "";
	    white-space: normal;
	}
	
	.footer_separator {
		opacity: 1;
	}
	
	/* =========================================================== */
	
	.menu {
		font-size: x-large;
		margin-top: 0;
		margin-bottom: 0;
	}
	
	/* =========================================================== */
	
	.locale_selector {
		width: 2vw;
		height: 2vw;
	}
}


/* =========================================================== */
/* =========================================================== */


@media (min-width: 1400px) {
	.content_section_inner {
		width: var(--section-width-xlarge);	
	}
}