html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body{
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2vh;
	letter-spacing: 2px;
	text-shadow: 0 0 10px #558ba2, 0 0 15px #558ba2, 0 0 20px #558ba2;
}

video{
	text-shadow: none;
	font-size: 1.2vh;
}

html{
	width: 100%;
	height: 100%;
}

br{
	display: none;
}

::cue {
  font-size: 3vh !important;
}


@media only screen and (min-width: 240px) and (max-width: 768px), only screen and (min-device-width: 240px) and (max-device-width: 768px) and (orientation:portrait)
{
    .top-text-container
	{
		font-size: 3vh !important;
		/*top: -20%;*/
	}

	br{
		display: none;
	}

	.bottom-text-container
	{
		/*top: 120%;*/
		font-size: 1.5vh !important;
	}
	body
	{
		font-size: 2vh;
	}

	#lang_select_pl, #lang_select_en, #lang_select_empty, #subtitles_button
	{
		font-size: 2vh !important;
		padding-left: 0px;
		margin-left: 0px;
	}

	#wrapper {
		height: 100%;
	}

	#content
	{
		max-width: 100vw !important;
		width: 100vw !important;
	}

	::cue {
 		font-size: 2vh !important;
	}

	video{
		font-size: 2vh;
	}	

	#myBar {
	  height: 2vh !important;
	}

	.play_button_img
	{
		width: 12vw !important;
	}
}

@media only screen and (min-width: 768px) and (max-width: 2600px), only screen and (max-device-width: 2600px) and (orientation:landscape)
{
    .top-text-container
	{
		font-size: 3vh !important;
		/*top: auto !important;*/
	}

	.bottom-text-container
	{
		/*top: auto !important;*/
	}
	body
	{
		font-size: 2vh;
	}

	#wrapper {
		height: 100vw;
	}

	#lang_select_pl, #lang_select_en, #lang_select_empty, #subtitles_button
	{
		font-size: 3vh !important;
		padding-left: 0px;
		margin-left: 0px;
	}

	#content
	{
		max-width: 80vw !important;
		width: 60vw;
	}

	br{
		display: block;
	}

	::cue {
	  font-size: 3vh !important;
	}

	video{
		font-size: 1.2vh;
	}

	#myBar {
	  height: 4vh !important;
	}

	.play_button_img
	{
		width: 6vw;
	}
}



#wrapper {
	position: relative;
	color: white;
	display: table;
	width: 100vw;
	height: 100vh;
}

#start_video_button
{
	position: absolute;
	width: 100%;
	height: 100%;
}

.play_button_img
{
	width: 6vw;
}

#start_screen_bg
{
	width: 100%;
	height: auto;
}

.lang_select
{
	position: absolute;
	z-index: 2;
	
	top: 10px;

}

#lang_select_pl, #lang_select_en, #lang_select_empty, #subtitles_button
{
	display: inline-block;
	font-size: 2vh;
	padding-left: 0px;
	margin-left: 0px;
}
#lang_select_pl
{
	padding-right: 0px;
	margin-right: 0px;
}

.centrify{
	position: absolute;
	margin: 0;
    left: 50%;
    top: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    
}

#play_movie
{
	position: absolute;
	margin: 0;
    left: 50%;
    top: 72%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 2vh;
    text-shadow: none;
}

#replay_button
{
	font-size: 2vh;
}

.optionChoice
{
	cursor: pointer;
	padding: 1.5vh;
}

#optionA, #optionB
{
	/*border: 3px solid #fff;*/
	width: 28vw;
	height: 4vh;
}

#lang_select_pl
{
	padding-left: 0px !important;
}

.video-container
{
	width: 100%;

}

.video-container video
{
	position: relative;
	z-index: 0;
	outline: none;
}

.overlayScreen
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.top-text-container
{
	position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%);	
    font-size: 3vh;
    text-align: center;
    text-transform: uppercase;
    font-weight:600;


    z-index: 3;
}

.bottom-text-container
{
	position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%);
    text-align: center;
    text-transform: uppercase;
    font-size: 2vh;
    font-weight:400;

    
}

#myProgress {
  width: 100%;
  background-color: #333;
}

#myBar {
  width: 1%;
  height: 4vh;
  background-color: white;/*#4CAF50;*/
}

#bg {
	background-color: black;
	background-image: linear-gradient(#051820, black, black, black, black, black, black, #051820);
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}

#content
{
	position: relative;
	margin: auto;
	padding: auto;
	margin-left:auto;
	margin-right:auto;
	max-width: 60vw;
	min-width: 60vw;
	display: block;
}

#pauseScreen
{
	display: none;
}

#resume_video_button
{

}

#control_buttons
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	display: block;
	font-size: 2vw;
	z-index: 2;

}