body, html {
	height: 100%;
	margin: 0;
	font: 15px 'Barlow', sans-serif;
	max-width: 100%;
    overflow-x: hidden;
}

.bgimg {
	position: relative;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bgimg-1 {
	background-image: url("images/Wallpaper_landscape.jpg");
	min-height: 100vh;
}

.bgimg-2 {
	background-image: url("images/00217 DSC_0140.jpg");
	min-height: 100vh;
}

.bgimg-3 {
	background-image: url("images/20240709_174445307_iOS.jpg");
	min-height: 100vh;
}

.bgimg-4 {
	background-image: url("images/balon_landscape.jpg");
	min-height: 100vh;
}
	
.bgimg-5 {
	background-image: url("images/VLT.jpg");
	min-height: 100vh;
}

.bgimg-6 {
	background-image: url("images/Kluzak.jpg");
	min-height: 100vh;
}

.bgimg-7 {
	background-image: url("images/Mraky3.jpg");
	min-height: 100vh;
}

#header {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
}

#subtitle {
	margin-top: 8%;
	width: 79%;
	color: #fff;
	font-family: 'BarlowCondensed', sans-serif;
	font-size: 1.8vw;
	letter-spacing: 0.25vw;
	font-weight: 200;
	text-align: left;
	padding-left: 21%;
}

#title {
	margin-top: -2.5%;
	width: 100%;
	color: #fff;
	font-family: 'BarlowCondensed', sans-serif;
	font-size: 10vw;
	letter-spacing: 0.14vw;
	font-weight: 600;
}

/** VSTUPENKY **/

.main-program-vstupenky {
	display: inline-block;
	font-weight: 300;
	white-space: nowrap !important;
	font-family: 'BarlowCondensed', sans-serif;
	text-transform: uppercase;
	/* font-size: 110%; */
	padding: 10px 12px 7px 15px;
	text-align: left;
	margin: 12px 70px 12px 0;
	min-width: 9.4em;
	letter-spacing: 0.07vw;
	text-decoration: none !important;
}
.main-program-vstupenky-popis {
	margin: 0.4em 0 0.8em 0;
	color: #666666;
}
.main-program-vstupenky.smaller {
	padding: 7px 0px 5px 12px;
}
.main-program-vstupenky strong {
	font-weight: 500 !important;
}
.main-program-vstupenky::after {
	background-size: 90px 90px;
	display: block;
	content: ' ';
	width: 90px;
	height: 90px;
	vertical-align: middle;
	float: right;
	position: relative;
	left: 44px;
	margin: -20px;
}
.main-program-vstupenky {
	color: #e61744 !important;
	background: #f7b9c7;
}
.main-program-vstupenky:hover {
	background: #eba0b1;
}
.main-program-vstupenky::after {
	background-image: url('https://www.hvezdarna.cz/wp-content/themes/hvezdarna/assets/images/icons/vstupenky.svg');
}
span.main-program-vstupenky {
	color: #808080 !important;
	background: #d3d3d3;
	opacity: 0.75;
}
span.main-program-vstupenky:hover {
	background: #c3c3c3;
}
span.main-program-vstupenky::after {
	background-image: url('https://www.hvezdarna.cz/wp-content/themes/hvezdarna/assets/images/icons/vstupenky-grey.svg');
}

/** END OF VSTUPENKY **/

.main-text {
	color: #000;
	background-color: white;
	width: 42%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.6vw;
	font-weight: 300;
}

h2 {
	font-family: 'BarlowCondensed', sans-serif;
	font-size: 2.6vw;
	text-transform: uppercase;
	letter-spacing: 0.25vw;
	font-weight: 200;
	color: #999;
	margin-top: 2.6vw;
	margin-bottom: 0;
	padding: 0 auto;
}

.style-bold {
	font-weight: 500;
}

.style-gray {
	color: #555;
}

.img-circle {
	border-radius: 50%;
}

.yt-wrapper {
	text-align: center;
	display: flex;
    justify-content: center;
	width: 100vw;
	height: 100vh;
	position: relative;
	left: 50%;         /* start from center of parent */
	transform: translateX(-50%); /* shift back by half width */
}

.yt-wrapper iframe {
	aspect-ratio: 16 / 9;
    width: 100% !important;
}

.sub-text {
	margin-top: 6%;
	margin-bottom: 8%;
}

.caption {
	background-color: transparent;
	color: #fff;
	font-size: 1.33vw;
	margin-left: 2%;
	padding-top: 1%;
	font-family: 'BarlowCondensed', sans-serif;
	letter-spacing: 0.25vw;
	font-weight: 200;
}

.img-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;                    /* space between images */
	margin-bottom: 16px;
}

.img-row3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.img-row img {
	width: 100%;
	height: auto;
	display: block;
}



/* Phone portrait */
@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
	
	.bgimg {
		background-attachment: local !important;
	}
	
	.bgimg-1 {
	background-image: url("images/Wallpaper_portrait.jpg");
	min-height: 100vh;
	}
	
	.bgimg-2 {
	background-image: url("images/00217 DSC_0140_portrait.jpg");
	min-height: 100vh;
	}
	
	.bgimg-3 {
	background-image: url("images/20240709_174445307_iOS_portrait.jpg");
	min-height: 100vh;
	}
	
	.bgimg-4 {
	background-image: url("images/balon_portrait.jpg");
	min-height: 100vh;
	}
	
	.bgimg-5 {
	background-image: url("images/VLT_portrait.jpg");
	min-height: 100vh;
	}
	
	.bgimg-6 {
	background-image: url("images/Kluzak_portrait.jpg");
	min-height: 100vh;
	}
	
	.bgimg-7 {
	background-image: url("images/Mraky3_portrait.jpg");
	min-height: 100vh;
	}
	
	#subtitle {
		margin-top: 40%;
		width: 80%;
		font-size: 4.8vw;
		letter-spacing: 0.24vw;
		padding-left: 12.5%;
	}

	#title {
		margin-top: -2%;
		width: 85%;
		margin-left: auto;
		margin-right: auto;
		font-size: 22vw;
		letter-spacing: 0.14vw;
		text-align: right;
		line-height: 22vw;
	}
	
	h2 {
		font-size: 9vw;
		margin-top: 9vw;
	}
	
	.main-text {
		width: 85%;
		font-size: 6vw;
		padding-top: 3%;
	}
	
	.yt-wrapper iframe {
		aspect-ratio: 9 / 16;
		width: 100% !important;
	}
	
	.caption {
		font-size: 4.2vw;
		margin-left: 3%;
		padding-top: 2%;
	}
	
	.sub-text {
		margin-top: 9%;
		margin-bottom: 11%;
	}
	
	.img-row {
		grid-template-columns: 1fr;
	}
	.main-program-vstupenky {
		padding: 7px 10px 3px 12px;
		line-height: 170%;
		margin: 12px 60px 12px 0;
		min-width: 9.0em;
	}	
}

/* Phone landscape */
@media only screen and (max-device-width: 1024px) and (orientation: landscape) {

	.bgimg {
		background-attachment: local !important;
	}

	.bgimg-1 {
		background-image: url("images/Wallpaper_landscape.jpg");
		min-height: 100vh;
	}
	
	.bgimg-2 {
		background-image: url("images/00217 DSC_0140.jpg");
		min-height: 100vh;
	}
	
	.bgimg-3 {
		background-image: url("images/20240709_174445307_iOS.jpg");
		min-height: 100vh;
	}
	
	.bgimg-4 {
		background-image: url("images/balon_landscape.jpg");
		min-height: 100vh;
	}
	
	.bgimg-5 {
		background-image: url("images/VLT.jpg");
		min-height: 100vh;
	}

	.bgimg-6 {
		background-image: url("images/Kluzak.jpg");
		min-height: 100vh;
	}

	.bgimg-7 {
		background-image: url("images/Mraky3.jpg");
		min-height: 100vh;
	}
	
	#subtitle {
		margin-top: 8%;
		width: 80%;
		font-size: 2.5vw;
		letter-spacing: 0.24vw;
		padding-left: 12.5%;
	}

	#title {
		margin-top: -6%;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		font-size: 13vw;
		letter-spacing: 0.14vw;
		text-align: center;
		line-height: 22vw;
	}
	
	h2 {
		font-size: 5vw;
		margin-top: 5vw;
	}
	
	.main-text {
		width: 85%;
		font-size: 3.5vw;
		padding-top: 3%;
	}
	
	.yt-wrapper iframe {
		aspect-ratio: 16 / 9;
		width: 100% !important;
	}
	
	.caption {
		font-size: 2.5vw;
		margin-left: 3%;
		padding-top: 2%;
	}
	
	.sub-text {
		margin-top: 9%;
		margin-bottom: 11%;
	}
	.main-program-vstupenky {
		padding: 7px 10px 3px 12px;
		line-height: 170%;
		margin: 12px 60px 12px 0;
		min-width: 9.0em;
	}	
}