/* CSS  Milion Chvilek */


/* Import externích fontů */
@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css'); /* font-awesome */
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:300,400,400i,500,1087,700,900&subset=latin-ext'); /* google fonty */
@import url('https://fonts.googleapis.com/css?family=Passion+One&subset=latin-ext'); /* google fonty */


html, body {
box-sizing: border-box;
margin: 0;
font-family: "Barlow Semi Condensed", sans-serif;
border: 0;
padding: 0;
font-size: 15pt;
line-height: 1.65em;
}

body {
	background-color: #05E5A4;
}


.mainContainer {
	height: 100%;
	width: 100%;
}
.index .middleContainer {
	background-color: #fff;
	width: calc(822vw / 1920 * 100);
	height: calc(529vw / 1920 * 100);
	border-radius: calc(19vw / 1920 * 100);
	position: absolute;
	left: calc(50% - (411vw / 1920 * 100));
	top: calc(50% - (264.5vw / 1920 * 100));
}
.index .middleContainer h2 {
	text-align: center;
	color: #262668;
	font-size: calc(47vw / 1920 * 100);
	line-height: calc(54vw / 1920 * 100);
	padding: calc(72vw / 1920 * 100) calc(133vw / 1920 * 100);
}
.kodInputContainer {
	width: calc(448vw / 1920 * 100);
	height: calc(104vw / 1920 * 100);
	margin-left: auto;
	margin-right: auto;
}
.kodInputContainer input {
	width: 100%;
	height: 100%;
	background-color: #E6E6E6;
	border: 0;
	border-radius: calc(52vw / 1920 * 100);
	text-align: center;
	outline: none;
	font-size: calc(36vw / 1920 * 100);
	font-weight: semi-bold;
	font-family: "Barlow Semi Condensed", sans-serif;
}
.vstoupitInputContainer {
	width: calc(328vw / 1920 * 100);
	height: calc(98vw / 1920 * 100);
	position: absolute;
	left: calc(50% - (164vw / 1920 * 100));
	bottom: calc(-49vw / 1920 * 100);
}
.vstoupitInputContainer input {
	width: 100%;
	height: 100%;
	background-color: #FA1A5B;
	border: 0;
	border-radius: calc(49vw / 1920 * 100);
	text-align: center;
	outline: none;
	font-size: calc(29vw / 1920 * 100);
	font-weight: normal;
	font-family: "Barlow Semi Condensed", sans-serif;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
}

.copyrightContainer {
	position: absolute;
	left: calc(53vw / 1920 * 100);
	bottom: calc(41vw / 1920 * 100);
	font-size: calc(18vw / 1920 * 100);
	color: #262668;
	font-weight: bold;
}

.index .odvahaContainer {
	width: calc(163vw / 1920 * 100);
	height: calc(116vw / 1920 * 100);
	position: absolute;
	left: calc(50% - (81.5vw / 1920 * 100));
	top: calc(-200vw / 1920 * 100);
}
.odvahaContainer svg {
	width: 100%;
}
.logoContaner {
	width: calc(90vw / 1920 * 100);
	position: absolute;
	right: calc(44vw / 1920 * 100);
	bottom: 0;
}
.logoContaner svg {
	width: 100%;
}



.video .middleContainer {
	width: calc(743vw / 1920 * 100);
	height: calc(575vw / 1920 * 100);
	position: absolute;
	left: calc(50% - (371.5vw / 1920 * 100));
	top: calc(50% - (400vw / 1920 * 100));
}
.video .middleContainer h2 {
	text-align: center;
	color: #262668;
	font-size: calc(47vw / 1920 * 100);
	line-height: calc(54vw / 1920 * 100);
}
.video .middleContainer .videoContainer {
	width: calc(743vw / 1920 * 100);
	height: calc(0.5625 * (743vw / 1920 * 100));
	position: relative;
}
.video .middleContainer video {
	width: 100%;
	height: 100%;
}
#videoBorder {
	border: calc(8vw / 1920 * 100) solid #05E5A4;
	position: absolute;
	top: calc(25vw / 1920 * 100);
	bottom: calc(25vw / 1920 * 100);
	left: calc(25vw / 1920 * 100);
	right: calc(25vw / 1920 * 100);
	pointer-events: none;
}
.video .odvahaContainer {
	width: calc(114vw / 1920 * 100);
	height: calc(82vw / 1920 * 100);
	position: absolute;
	left: calc(50vw / 1920 * 100);
	top: calc(49vw / 1920 * 100);
}
.video .jduNaToContainer {
	width: calc(310vw / 1920 * 100);
	height: calc(284vw / 1920 * 100);
	position: absolute;
	bottom: 0;
	left: calc(50% - (155vw / 1920 * 100));
	overflow: hidden;
}
.video .jduNaToContainer svg {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: calc(-15vw / 1920 * 100);
}





@media screen and (max-width: 800px) {
	.index .middleContainer {
		width: calc(822vw / 1920 * 100 * 2);
		height: calc(529vw / 1920 * 100 * 2);
		border-radius: calc(19vw / 1920 * 100 * 2);
		left: calc(50% - (411vw / 1920 * 100 * 2));
		top: calc(50% - (264.5vw / 1920 * 100 * 2));
	}
	.index .middleContainer h2 {
		font-size: calc(47vw / 1920 * 100 * 2);
		line-height: calc(54vw / 1920 * 100 * 2);
		padding: calc(72vw / 1920 * 100 * 2) calc(133vw / 1920 * 100 * 2);
	}
	.kodInputContainer {
		width: calc(448vw / 1920 * 100 * 2);
		height: calc(104vw / 1920 * 100 * 2);
	}
	.kodInputContainer input {
		border-radius: calc(52vw / 1920 * 100 * 2);
		font-size: calc(36vw / 1920 * 100 * 2);
	}
	.vstoupitInputContainer {
		width: calc(328vw / 1920 * 100 * 2);
		height: calc(98vw / 1920 * 100 * 2);
		left: calc(50% - (164vw / 1920 * 100 * 2));
		bottom: calc(-49vw / 1920 * 100 * 2);
	}
	.vstoupitInputContainer input {
		border-radius: calc(49vw / 1920 * 100 * 2);
		font-size: calc(29vw / 1920 * 100 * 2);
	}

	.copyrightContainer {
		left: calc(53vw / 1920 * 100 * 2);
		bottom: calc(41vw / 1920 * 100 * 2);
		font-size: calc(18vw / 1920 * 100 * 2);
	}

	.index .odvahaContainer {
		width: calc(163vw / 1920 * 100 * 2.2);
		height: calc(116vw / 1920 * 100 * 2.2);
		left: calc(50% - (81.5vw / 1920 * 100 * 2.2));
		top: calc(-250vw / 1920 * 100 * 2);
	}
	.logoContaner {
		width: calc(90vw / 1920 * 100 * 2);
		right: calc(44vw / 1920 * 100 * 2);
	}


	.video .middleContainer {
		width: calc(743vw / 1920 * 100 * 2);
		height: calc(575vw / 1920 * 100 * 2);
		left: calc(50% - (371.5vw / 1920 * 100 * 2));
		top: calc(50% - (400vw / 1920 * 100 * 2));
	}
	.video .middleContainer h2 {
		font-size: calc(47vw / 1920 * 100 * 2);
		line-height: calc(54vw / 1920 * 100 * 2);
	}
	.video .middleContainer .videoContainer {
		width: calc(743vw / 1920 * 100 * 2);
		height: calc(0.5625 * (743vw / 1920 * 100 * 2));
	}
	#videoBorder {
		border: calc(8vw / 1920 * 100 * 2) solid #05E5A4;
		top: calc(25vw / 1920 * 100 * 2);
		bottom: calc(25vw / 1920 * 100 * 2);
		left: calc(25vw / 1920 * 100 * 2);
		right: calc(25vw / 1920 * 100 * 2);
	}
	.video .odvahaContainer {
		width: calc(114vw / 1920 * 100 * 3);
		height: calc(82vw / 1920 * 100 * 3);
		left: calc(50vw / 1920 * 100 * 2);
		top: calc(49vw / 1920 * 100 * 2);
	}
	.video .jduNaToContainer {
		width: calc(310vw / 1920 * 100 * 2);
		height: calc(284vw / 1920 * 100 * 2);
		left: calc(50% - (155vw / 1920 * 100 * 2));
	}
	.video .jduNaToContainer svg {
		bottom: calc(-15vw / 1920 * 100 * 2);
	}
}

@media screen and (min-width: 1280px) {
	.index .middleContainer {
		width: 550px;
		height: 354px;
		border-radius: 13px;
		left: calc(50% - (550px /  2));
		top: calc(50% - (354px /  2));
	}
	.index .middleContainer h2 {
		font-size: 31px;
		line-height: 36px;
		padding: 48px 89px;
	}
	.kodInputContainer {
		width: 300px;
		height: 70px;
	}
	.kodInputContainer input {
		border-radius: 35px;
		font-size: 24px;
	}
	.vstoupitInputContainer {
		width: 220px;
		height: 66px;
		left: calc(50% - (220px /  2));
		bottom: -33px;
	}
	.vstoupitInputContainer input {
		border-radius: 33px;
		font-size: 19px;
	}

	.copyrightContainer {
		left: 35px;
		bottom: 27px;
		font-size: 12px;
	}

	.index .odvahaContainer {
		width: 110px;
		height: 78px;
		left: calc(50% - (110px / 2));
		top: -132px;
	}
	.logoContaner {
		width: 60px;
		right: 30px;
	}


	.video .middleContainer {
		width: 500px;
		height: 400px;
		left: calc(50% - (500px / 2));
		top: calc(50% - (500px / 2));
	}
	.video .middleContainer h2 {
		font-size: 31px;
		line-height: 36px;
	}
	.video .middleContainer .videoContainer {
		width: 500px;
		height: calc(0.5625 * 500px);
	}
	#videoBorder {
		border: 5px solid #05E5A4;
		top: 16px;
		bottom: 16px;
		left: 16px;
		right: 16px;
	}
	.video .odvahaContainer {
		width: 77px;
		height: 55px;
		left: 33px;
		top: 33px;
	}
	.video .jduNaToContainer {
		width: 207px;
		height: 190px;
		left: calc(50% - (207px / 2));
	}
	.video .jduNaToContainer svg {
		bottom: -10px;
	}
}