@font-face {
	font-family: DM_Sans;
	src: url(../font/DMSans-Regular.ttf);
}
@font-face {
	font-family: DM_Sans-bold;
	src: url(../font/DMSans-Bold.ttf);
	font-weight: bold;
}
@font-face {
	font-family: DM_Sans-italic;
	src: url(../font/DMSans-Italic.ttf);
	font-weight: italic;
}
@font-face {
	font-family: DM_Sans-bolditalic;
	src: url(../font/DMSans-BoldItalic.ttf);
	font-weight: italic;
}
@font-face {
	font-family: DM_Sans-medium;
	src: url(../font/DMSans-Medium.ttf);
	font-weight: italic;
}

:root
{
	--pri: #DDDDDD;
	--sec: #242424;
	--textColor: #FFFFFF;
}

body
{
	min-width: 900px;
	min-height: 100vh;

	margin: 0;
	padding: 0;
	font-family: DM_Sans;

	display: grid;
	width: 100%;

	grid-template-areas:
	"mainpage"
	"footer";

	grid-template-rows: 	1fr 80px;
	grid-template-columns: 1fr;
}

hr
{
	margin-top: 40px;
	margin-bottom: 0px;

	border: 1px solid #E7E7E7;
}

.bold
{
	font-family: DM_Sans-bold;
}

/* background color, behind page */
.background
{
	position: absolute;
	background-color: #242424;
	background-color: var(--sec);

	width: 100%;
	min-width: 800px;
	height: 296px;
	z-index: -1;
}

/* complete page, fix center */
.document
{
	grid-area: mainpage;

	display: flex;
	justify-content: center;

	flex-grow: 1;

	width: 100%;
	height: 100%;
}

/* header, top image and event date */
.header
{
	grid-area: header;

	margin-top: 40px;

	display: flex;
	align-items: center;
}
.top_logo
{
	width: 300px;
	height: 60px;

	color: white;
	background-repeat: no-repeat;
}
.top_empty
{
	flex-grow: 1;
}
.top_date
{
	color: var(--textColor);
}

.clockSVG
{
	margin-left: 40px;
	margin-right: 20px;
	margin-top: 100px;

}
.clockSVG #svgColor
{
	stroke: var(--textColor);
}

.top_title
{
	font-family: DM_Sans-bold;
	font-size: 18px;
	color: var(--pri);
	letter-spacing: 1px;
}

/* dot with title */
.title
{
	grid-area: title;

	margin-top: 40px;
	margin-bottom: 40px;
}
.top2_dot
{
	display: inline-block;
	background-color: var(--pri);
	width: 20px;
	height: 20px;
	border-radius: 10px;
	margin-right: 15px;
	margin-bottom: 4px;
}
.top2_text
{
	color: var(--textColor);

	font-family: DM_Sans-bold;
	font-size: 48px;
}
.top2_live
{
	color: var(--pri);

	font-family: DM_Sans-bolditalic;
}

/* event image */
.eventlogo
{
	grid-area: image;
	margin-top: 40px;
	margin-bottom: 40px;

	background-repeat: no-repeat;

	text-align: center;
}
.eventlogo > img
{
	border-radius:  10px;
	width: 311px;

}


/* event links container */
.eventlinks
{
  grid-area: eventlinks;
	margin-left: 50px;
	padding-left: 50px;
	margin-bottom: 60px;

	height: 100%;

	border-left: 2px solid #E7E7E7;
}
.eventlinksAddedWhenNoImage
{
		margin-left: 0;
		border-left: 0;
		padding-left: 0;
}

.eventlinks_title
{
	padding-top: 20px;

	font-family: DM_Sans-bold;
	font-size: 36px;

	color: var(--pri);
}

.event_element
{
	display: flex;
	align-items: center;
	padding-left: 15px;
	padding-right: 15px;

	padding-top: 40px;
	padding-bottom: 40px;

	border-bottom: 2px solid #E7E7E7;
}


.event_text
{
	display: inline-block;
	width: 100%;
}
.event_button
{
	display: inline-block;
	background-color: #242424;
	background-color: var(--pri);
	width: 160px;
	height: 40px;

	display: flex;
	align-items: center;

	font-family: DM_Sans-medium;
	font-size: 12px;

	color: white;

	border-radius: 20px;
	padding-left: 20px;

	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;

}

.event_button:hover
{
	cursor: pointer;
	background-color: var(--sec);

}
.event_button > span:first-child
{
	width: 130px;
}
.event_button > span:last-child
{
	width: 30px;
	margin-top: 4px;
}


/* embed */
.embed
{
	grid-area: embed;
	background-color: var(--pri);

	border-radius: 15px 15px 20px 20px;
}


/* slido container */
.part2_right
{
	grid-area: slido;
	background-color: var(--pri);

	height: 710px;

	margin-bottom: 40px;

	border-radius: 20px;
}
.slido, .embedWrapper
{
	position: relative;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% - 10px);

	border-radius: 15px;
	-webkit-radial-gradient(white, black);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);

	overflow: hidden;
}
.slido > iframe, .embedWrapper > iframe
{
	width: 100%;
	height: 100%;

	border: 0;
}

/* footer container */
.footer
{
  background-color: #F7F7F7;

	min-height: 80px;

	display: flex;
	align-items: center;
}
.footer > div:first-child
{
	flex-grow: 1;
}
.footer_text
{
	font-family: DM_Sans-medium;
	font-size: 12px;
	color: #919191;
	padding-right: 20px;
}
.footer > img
{
	margin-right: 30px;
}
.footer:hover > img, .footer_text:hover
{
	cursor: pointer;
}




/* grid layout */

#page {
  display: grid;
	width: 100%;
	max-width: 1366px;
  height: 100%;
	margin-left: 30px;
	margin-right: 30px;
  grid-template-areas:
	"header					header				header		header"
	"title  				title					title			title"
	"embed					embed			  	.					slido"
	"image					eventlinks		.	  			slido";

  grid-template-rows: 	100px 140px auto 1fr;
  grid-template-columns: 311px auto 40px 340px;
}

@media (max-width: 1360px) {
  #page {
		grid-template-areas:
		"header					header				header			header"
		"title  				title					title				title"
		"embed					embed			  	.						slido"
		"image					eventlinks		eventlinks	eventlinks";

	  grid-template-rows: 	100px 140px auto 1fr;
	  grid-template-columns: 311px auto 40px 340px;
	}

	.part2_right
	{
		height: 100%;
		min-height: 350px;
	}
}

@media (max-width: 1180px) {
  #page {
		width: 100%;

		grid-template-areas:
		"header					header						"
		"title  				title							"
		"embed					embed						 	"
		".							.									"
		"slido					slido							"
		".							.									"
		"image					eventlinks	   		";

	  grid-template-rows: 60px 140px auto 40px 600px 40px 1fr;
	  grid-template-columns:  311px 1fr;
	}

	.part2_right
	{
		width: 500px;
		margin: auto;
	}
}

@media (max-width: 970px) {
  #page {
		width: 100%;
		margin-left: 17px;
		margin-right: 17px;

		grid-template-areas:
		"header			header"
		"title			title"
		"embed			embed"
		".					."
		"image 			slido"
		"eventlinks eventlinks";

	  grid-template-rows: 60px 140px auto 40px 441px 1fr;
	  grid-template-columns: 1fr 500px;
	}

	.eventlinks
	{
			margin-left: 0;
			border-left: 0;
			padding-left: 0;
	}
	.eventlinks_title
	{
			margin-left: 20px;
	}

	.eventlogo
	{
		height: 441px;
		margin-top: 0;
		margin-left: 0;
		text-align: left;
	}
	.top_date > img
	{
		font-size: 14.5px;
		margin-left: 25px;
		margin-right: 15px;
	}
}


/*
#page {
	width: 100%;
	margin-left: 17px;
	margin-right: 17px;

	grid-template-areas:
	"header"
	"title"
	"embed"
	"."
	"slido"
	"image"
	"eventlinks";

	grid-template-rows: 60px 140px auto 40px 400px auto 1fr;
	grid-template-columns: 100% ;
}
*/