:root
{
	--red: #DC0821;
	--dark-red: #9a0617;
}

@keyframes rotate360
{
	0%
	{
		transform: rotateZ(0deg);
	}
	100%
	{
		transform: rotateZ(360deg);
	}
}

page-content:not([mgc]) section.login
{
	margin-top: 100rem;
}

page-content:not([mgc]) section.login form
{
	display: block;
	width: 300rem;
	margin: 0 auto;
}

page-content:not([mgc]) section.login form > *
{
	display: block;
	margin: 10rem auto 0 auto;
	width: 100%;
}

page-content:not([mgc]) section.login form input
{
	cursor: text;
	padding: 5rem 15rem;
	box-sizing: border-box;
	color: #000;
}

iframe#mgc-export-frame
{
	display: none !important;
	position: absolute;
	left: 0;
	top: -10000rem;
}

page-content[mgc] .button
{
	white-space: nowrap;
}

page-content[mgc] strong
{
	font-weight: 300 !important;
}

page-content[mgc] img.loader
{
	width: 48rem !important;
	height: 48rem !important;
	position: fixed;
	left: calc(50vw - 24rem) !important;
	top: calc(50vh - 24rem) !important;
	z-index: 999;
	animation: rotate360 1s linear infinite;
}

/* page content */
page-content[mgc]
{
	width: 100vw !important;
	height: 100vh !important;
	padding-top: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
}

page-content[mgc] > page-body
{
	width: 100vw !important;
	height: 100vh !important;
	overflow: hidden;
	background: #000;
}

page-content[mgc] > page-body > header
{
	display: block;
	height: 53rem;
	background: #000;
	border-bottom: 3rem solid var(--red);
	line-height: 50rem !important;
	box-sizing: border-box;
	text-align: center;
	padding: 0 20rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff !important;
	font-weight: 300;
	font-size: 20rem !important;
	letter-spacing: .5rem;
}

page-content[mgc] > page-body > main
{
	display: block;
	position: relative;
	width: 100vw;
	height: calc(100vh - 146rem);
	overflow: auto;
	overflow-x: hidden;
}

page-content[mgc] > page-body > nav
{
	display: block;
	height: 93rem;
	background: #000;
	text-transform: uppercase;
	box-sizing: border-box;
	overflow: visible;
	border-top: 3rem solid var(--red);
	position: relative;
}

page-content[mgc] > page-body > nav:after
{
	position: absolute;
	left: 0;
	bottom: 93rem;
	background: linear-gradient(180deg, rgba(0,0,0,.33) 0%, #000 100%);
	display: block;
	content: attr(msg);
	width: 100%;
	height: 0;
	line-height: 40rem;
	height: 40rem;
	padding-bottom: 20rem;
	z-index: 0;
	overflow: hidden;
	color: #fff;
	text-align: center;
	transition: all .5s;
	text-transform: none;
	opacity: 0;
	transform: scale(1, 0);
	transform-origin: center bottom;
	font-weight: 300;
}

page-content[mgc] > page-body > nav[msg]:after
{
	opacity: 1;
	transform: scale(1, 1);
}

page-content[mgc] > page-body > nav:before
{
	z-index: 1;
	position: absolute;
	width: 140rem;
	height: 23rem;
	left: calc(50% - 70rem);
	top: -23rem;
	content: "";
	background: url(/web/images/mgc-vawe.svg) center top no-repeat;
	background-size: 100% 100%;
}

page-content[mgc] > page-body > nav > div
{
	display: grid;
	grid-template-columns: 1fr 1fr 1.33fr 1fr 1fr;
	grid-gap: 1rem;
	width: 480rem;
	max-width: 95vw;
	margin: 17rem auto 0 auto;
	height: 53rem;
	position: relative;
	z-index: 2;
}

page-content[mgc] > page-body > nav > div > span
{
	display: block;
	width: 100%;
	height: 100%;
}

page-content[mgc] > page-body > nav > div > span > mgc-button
{
	display: block;
	width: 48rem;
	height: 53rem;
	position: relative;
	cursor: pointer;
	margin: 0 auto;
}

page-content[mgc] > page-body > nav > div > span > mgc-button *
{
	cursor: pointer;
}

page-content[mgc] > page-body > nav > div > span > mgc-button > img
{
	display: block;
	width: 24rem !important;
	height: auto !important;
	margin: 0 auto;
	position: relative;
	top: 4rem;
	z-index: 0;
}

page-content[mgc] > page-body > nav > div > span > mgc-button.home > img
{
	width: 40rem !important;
	top: -16rem;
}

page-content[mgc] > page-body > nav > div > span > mgc-button:before
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	content: "";
}

page-content[mgc] > page-body > nav > div > span > mgc-button:after
{
	position: absolute;
	z-index: 0;
	left: 0;
	bottom: 4rem;
	height: 10rem;
	width: 100%;
	text-align: center;
	text-transform: none;
	line-height: 10rem !important;
	font-size: 9rem !important;
	color: #fff;
	content: attr(lbl);
	font-weight: 300;
	white-space: nowrap;
}

page-content[mgc] > page-body > main > mgc-content
{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20rem;
	width: 740rem;
	max-width: calc(100vw - 40rem);
	margin: 0 auto;
	padding: 20rem 20rem 30rem 20rem;
	position: relative;
}

page-content[mgc] > page-body > main > mgc-content *
{
	color: #fff;
}

page-content[mgc] mgc-info
{
	display: block;
	text-align: center;
}

/* sekce */
page-content[mgc] mgc-section
{
	display: inline-flex;
	flex-wrap: wrap;
	grid-gap: 20rem;
	width: 100%;
	max-width: calc(100vw - 40rem);
	position: relative;
}

page-content[mgc] mgc-section mgc-box
{
	display: block;
	width: 100%;
	background: #111;
}

page-content[mgc] mgc-section mgc-head
{
	display: grid;
	grid-template-columns: 16rem auto min-content;
	gap: 10rem;
	text-align: left;
	height: 24rem;
	line-height: 24rem;
	font-weight: 300;
	letter-spacing: .5rem;
	font-size: 16rem !important;
	align-items: center;
	padding: 15rem 20rem;
	position: relative;
}

page-content[mgc] mgc-section mgc-head mgc-colexp
{
	display: block;
	width: 14rem;
	height: 20rem;
	position: absolute;
	right: 20rem;
	top: 15rem;
	cursor: pointer;
}

page-content[mgc] mgc-section mgc-head mgc-colexp:before
{
	content: "";
	width: 8rem;
	height: 2rem;
	position: absolute;
	left: calc(50% - 6rem);
	top: calc(50% - 1rem);
	display: block;
	background: #fff;
	transform: rotate(45deg);
	transition: all .5s;
}

page-content[mgc] mgc-section mgc-head mgc-colexp:after
{
	content: "";
	width: 8rem;
	height: 2rem;
	position: absolute;
	right: calc(50% - 6rem);
	top: calc(50% - 1rem);
	display: block;
	background: #fff;
	transform: rotate(-45deg);
	transition: all .5s;
}

page-content[mgc] mgc-section mgc-head[colexp],
page-content[mgc] mgc-section mgc-head[colexp] *
{
	cursor: pointer;
}

page-content[mgc] mgc-section mgc-head[colexp='e'] mgc-colexp:before
{
	transform: rotate(-45deg);
}

page-content[mgc] mgc-section mgc-head[colexp='e'] mgc-colexp:after
{
	transform: rotate(45deg);
}

page-content[mgc] mgc-section mgc-head > img
{
	display: block;
	width: 16rem !important;
	height: 16rem !important;
}

page-content[mgc] mgc-section mgc-data
{
	display: block;
	padding: 15rem 0;
	margin: 0 20rem;
	border-top: 1rem solid #333;
}

page-content[mgc] mgc-head[colexp='c'] + mgc-data
{
	display: none !important;
}

page-content[mgc] mgc-section mgc-data > mgc-buttons
{
	display: flex;
	flex-direction: row-reverse;
	gap: 10rem;
	padding-top: 10rem;
}

/* vozy */
page-content[mgc] mgc-cars-list
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 5rem;
}

@media (max-width: 640px)
{
	page-content[mgc] mgc-cars-list
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px)
{
	page-content[mgc] mgc-cars-list
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

page-content[mgc] mgc-cars-list > div
{
	display: block;
	width: 100% !important;
	background: #000;
	position: relative;
	cursor: pointer;
}

page-content[mgc] mgc-cars-list > div[info]:before
{
	position: absolute;
	left: 10rem;
	bottom: 10rem;
	content: "";
	background: var(--red) url(/web/images/mgc-ntf-w.svg) center no-repeat;
	background-size: 20rem;
	width: 32rem;
	height: 32rem;
	border-radius: 16rem;
	z-index: 1;
}

page-content[mgc] mgc-cars-list > div > img
{
	display: block;
	width: 100% !important;
	height: auto !important;
	cursor: pointer;
	transition: all .5s;
	outline: 1rem solid #111;
	outline-offset: -1rem;
}

page-content[mgc] mgc-cars-list > div:hover > img
{
	outline: 1rem solid var(--red);
	filter: brightness(110%) contrast(110%);
}

page-content[mgc] mgc-section.cars
{
	margin: 0 auto;
	width: auto;
}

page-content[mgc] mgc-section.cars mgc-box,
page-content[mgc] mgc-section.detail mgc-box
{
	width: 360rem !important;
	margin: 0 auto;
	transition: all .5s;
	outline: 1rem solid #111;
	outline-offset: -1rem;
}

page-content[mgc] mgc-section.cars mgc-box,
page-content[mgc] mgc-section.cars mgc-box *
{
	cursor: pointer;
	cursor: pointer;
}

page-content[mgc] mgc-section.cars mgc-box:hover
{
	outline: 1rem solid var(--red);
	filter: brightness(110%) contrast(110%);
}

page-content[mgc] mgc-car
{
	display: grid;
	grid-gap: 0;
}

page-content[mgc] mgc-car > img
{
	display: block;
	width: 100%;
	margin-bottom: -40rem;
}

page-content[mgc] mgc-car > h3
{
	display: grid;
	grid-template-columns: 60rem auto;
	padding: 20rem;
	align-items: center;
	position: relative;
	z-index: 1;
}

page-content[mgc] mgc-car > h3 > img
{
	display: block;
	width: 40rem;
	padding-right: 20rem;
}

page-content[mgc] mgc-car > h3 > strong
{
	display: block;
	position: relative;
	border-left: 1rem solid #999;
	padding-left: 20rem;
}

page-content[mgc] mgc-car > h3 > strong > span
{
	display: block;
	font-weight: normal;
	font-size: 11rem;
}

page-content[mgc] mgc-car > h3:before
{
	width: calc(100% - 2rem);
	height: 100rem;
	top: -60rem;
	left: 1rem;
	position: absolute;
	content: "";
	display: block;
	background: linear-gradient(0deg, #111 0%, transparent 100%);
	z-index: -1;
}

page-content[mgc] mgc-car > div.plate
{
	display: block;
	background: #fff;
	border-radius: 3rem;
	width: min-content;
	height: 32rem;
	box-sizing: border-box;
	margin: 0 auto 20rem 100rem;
}

page-content[mgc] mgc-car > div.plate > span
{
	color: #000 !important;
	letter-spacing: 0.5rem;
	font-size: 20rem;
	line-height: 28rem;
	font-weight: bold;
	transform-origin: left top;
	display: block;
	white-space: nowrap;
	padding: 0 10rem 0 24rem;
	position: relative;
	border: 1rem solid #000;
	border-radius: 3rem;
	margin: 1rem;
}

page-content[mgc] mgc-car > div.plate > span:before
{
	position: absolute;
	left: 0;
	top: 0;
	height: 28rem;
	width: 14rem;
	background: #033fa2;
	content: "";
	display: block;
}

page-content[mgc] mgc-car > div.info
{
	padding: 10rem 20rem 10rem 60rem;
	background: var(--red) url(/web/images/mgc-ntf-w.svg) 20rem 10rem no-repeat;
	background-size: 20rem;
}

page-content[mgc] mgc-car > div.info > span
{
	display: block;
	font-size: 14rem;
	font-weight: 300;
}

page-content[mgc] mgc-data > div.data
{
	display: grid;
	grid-gap: 5rem;
}

page-content[mgc] mgc-data > div.data > div
{
	display: grid;
	grid-template-columns: 85rem auto min-content;
	align-items: baseline;
	grid-gap: 10rem;
	white-space: nowrap;
}

page-content[mgc] mgc-data > div.data > div > span
{
	font-size: 9rem;
	letter-spacing: .5rem;
	white-space: nowrap;
	line-height: 20rem;
	position: relative;
	display: block;
}

page-content[mgc] mgc-data > div.data > div > strong,
page-content[mgc] mgc-data > div.data > div > strong > div,
page-content[mgc] mgc-data > div.data > div > strong > pre
{
	font-weight: 300;
	font-size: 11rem;
	line-height: 20rem;
	display: block;
}

page-content[mgc] mgc-data > div.data > div > strong > pre
{
	font-weight: normal;
	white-space: pre-line;
	max-width: 100%;
}

page-content[mgc] mgc-data > div.data > div > strong > pre + div
{
	margin-top: 10rem;
}

page-content[mgc] mgc-data > div.data > div > img
{
	display: block;
	width: 20rem;
	height: 20rem;
	cursor: pointer;
	transition: all .5s;
	align-self: center;
}

@media (min-width: 800px)
{
	page-content[mgc] mgc-section.detail mgc-box.hist
	{
		width: 100% !important;
	}
}

page-content[mgc] mgc-box.hist mgc-data > div.data
{
	overflow: hidden;
	grid-gap: 30rem;
}

page-content[mgc] mgc-box.hist mgc-data > div.data > div > span
{
	padding-left: 12rem;
}

page-content[mgc] mgc-box.hist mgc-data > div.data > div > span:before
{
	display: block;
	position: absolute;
	left: 3rem;
	bottom: calc(100% - 10rem);
	width: 1rem;
	height: 1000rem;
	background: #ccc;
	z-index: 1;
	content: "";
}

page-content[mgc] mgc-box.hist mgc-data > div.data > div > span:after
{
	display: block;
	position: absolute;
	left: 0;
	top: 6rem;
	width: 7rem;
	height: 7rem;
	border-radius: 4rem;
	background: var(--red);
	z-index: 2;
	content: "";
}