/* hadrion.eu/raadix/tutoarial.html */
/* raadix slideshow tutorial        */

.start-left {
	grid-column-start: 1;
}

#slideshow-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: max-content;
	gap: 2mm;
	max-width: var(--max-main-width);
	min-height: 60mm;
	margin: 2mm auto 6mm auto;
	padding: 0 4mm;
}
.goto-button {
	grid-column: span 2;
	background-color: #878787;
	color: white;
	font-size: 4mm;
	line-height: 6mm;
	text-align: center;
	padding: 2mm 4mm;
	border: none;
	border-radius: 2mm;
	cursor: pointer;
}
.goto-button:hover {
	background-color: #82368C;
}
.goto-button:focus {
	outline: none;
}
.goto-select {
	background-color: #82368C;
}

.wideimage {
	width: 100%;
	margin: 0;
	padding: 0;
}
.slideshow-container {
	position: relative;
	grid-column: 1/-1;
	min-height: 20mm;
	padding: 0;
	margin: 0;
	border: 1px solid #575757;
}
.slide-button {
	position: absolute;
	width: 16mm;
	height: 16mm;
	border-radius: 8mm;
	border: none;
	color: white;
	background-color: rgba(0,0,0,0.12);
	font-size: 10mm;
	text-align: center;
	line-height: 16mm;
	cursor: pointer;
}
.slide-button:hover {
	background-color: black;
}
.slide-button:focus {
	outline: none;
}
.slide-block {
	display: none; 
	position: relative;
	padding: 0;
	margin: 0;
}
.slide-caption {
	display: none;
	position: absolute;
	margin: 0;
	border-radius: 2mm;
	box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.24);
	user-select: none;
}
.cp-title {
	background-color: #009FE3;
	color: white;
	font-size: 5mm;
	padding: 2mm 4mm;
	width: 60%;
	left: 20%;
	top: 1%;
	text-align: center;
}
.cp-head {
	background-color: #164194;
	color: white;
	font-size: 5mm;
	padding: 2mm 4mm;
	width: 60%;
	left: 20%;
	top: 1%;
	text-align: center;
}
.cp-normal {
	background-color: #FCD900;
	color: #575757;
	font-size: 4mm;
	padding: 1mm 2mm;
	text-align: left;
}
.cp-none {
	background: none;
}
.cp-outline {
	background: none;
	outline: 1mm solid #E53312;
	border-radius: 2mm;
}

#google_translate_element {
	display: none;
	grid-column: span 1;
	height: 20mm;
	background-color: white;
	border-radius: 2mm;
	font-size: 5mm;
	line-height: 10mm;
	padding: 5mm 0;
	text-align: center;
	text-decoration: none;
	color: white;
	margin: 0;
	border: none;
	outline: none;
}
.goog-te-banner-frame.skiptranslate {
	display: none; 
	visibility: hidden;
}

@media only screen and (min-width: 16cm) {
	.cp-title {
		font-size: 8mm;
		padding: 5mm 10mm;
	}
	.cp-head {
		font-size: 7mm;
		padding: 5mm 10mm;
	}
	.cp-normal {
		font-size: 6mm;
		padding: 2.5mm 4mm;
	}
	#slideshow-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	#raadix-logo     { display: block; }
	#hadrion-contact { display: none; }
	#google_translate_element { display: block; }
	#top-grid {
		grid-template-columns: 20mm auto 50mm;
	}
	#goto-top {
		font-size: 8mm;
	}
}

@media only screen and (min-width: 24cm) {
	#slideshow-grid {
		grid-template-columns: repeat(8, 1fr);
	}
	.text-section {
		grid-column: span 4;
	}
	#raadix-logo     { display: block; }
	#hadrion-contact { display: block; }
	#google_translate_element { display: block; }
	#top-grid {
		grid-template-columns: 20mm auto 50mm 20mm;
	}
	#goto-top {
		font-size: 8mm;
	}
}