/*
 * Font
 */

/*
 * Reset stylů
 */

*,
*:after,
*:before {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

template,
[hidden] {
	display: none;
}

/*
 * Tělo dokumentu
 */

html {
	width: 100%;
	height: 100%;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.25;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/*
 * Bloky
 */

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 5vh 0 0;
}

/*
 * Pozadí novinek
 * - TODO definice vlastností background není ve validním CSS3 => v budoucnu přestane fungovat
 */

.news-root {
	width: 100%;
	height: 100%;
	/*padding-bottom: 48px;*/
}

.news-root:before {
	content: " ";
	display: table;
}

.news-root:after {
	content: " ";
	display: table;
	clear: both;
}

.news-root.blue {
	background:-moz-linear-gradient(
			center bottom,
			#9AD6F6 0%, #FFFFFF 100%
	);
	background:-webkit-gradient(
			linear,
			left bottom, left top,
			from(#9AD6F6), to(#FFFFFF)
	);
}

.news-root.green {
	background: -moz-linear-gradient(
			center top,
			#fff 0%, #72b666 100%
	);
	background: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#fff), to(#72b666)
	);
}

.news-root.red {
	background:-moz-linear-gradient(center top, rgba(255, 255, 255, 1) 0%, rgba(228, 49, 50, 0.80) 100%);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(228, 49, 50, 0.82))
	);
}

.news-root.grey {
	background:-moz-linear-gradient(
			center bottom, #E3E3E3 0%, #FFFFFF 100%
	);
	background:-webkit-gradient(
			linear,
			left bottom, left top,
			from(#E3E3E3), to(#FFFFFF)
	);
}

.news-root.yellow {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(250, 250, 145, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(250, 250, 145, 0.82))
	);
}

.news-root.white {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(250, 250, 250, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(250, 250, 250, 0.82))
	);
}

.news-root.black {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0.82))
	);
}

.news-root.fuchsia {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(195, 85, 195, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(195, 85, 195, 0.82))
	);
}

.news-root.silver {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(227, 228, 229, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(227, 228, 229, 0.82))
	);
}

.news-root.teal {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(24, 167, 181, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(24, 167, 181, 0.82))
	);
}

.news-root.purple {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(238, 130, 238, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(238, 130, 238, 0.82))
	);
}

.news-root.maroon {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(195, 33, 72, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(195, 33, 72, 0.82))
	);
}

.news-root.aqua {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(0, 255, 255, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(0, 255, 255, 0.82))
	);
}

.news-root.lime {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(158, 253, 56, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(158, 253, 56, 0.82))
	);
}

.news-root.navy {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(18, 10, 143, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(18, 10, 143, 0.82))
	);
}

.news-root.olive {
	background:-moz-linear-gradient(
			center top,
			rgba(255, 255, 255, 1) 0%, rgba(154, 185, 115, 0.80) 100%
	);
	background:-webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(255, 255, 255, 1)), to(rgba(154, 185, 115, 0.82))
	);
}

/*
 * Odsazení novinek
 */

.news-wrap {
	overflow: hidden;
	width: 100%;
	height: 100%;
	padding: 0 6%;
}

/*
 * Hlavní obrázek novinek
 */

.news-logo {
	float: right;
	margin: 6vh 0 0 3vw;
	/*max-width: 33%;*/
}

/*
 * Hlavní nadpis novinek
 */

.news-caption {
	font-weight: bold;
}

/*
 * Seznam novinek
 */

.news-list {
	color: #0061B3;
}

/*
 * Položka novinek
 */
.news-item {
	overflow: hidden;
}
.news-item:before {
	content: " ";
	display: table;
}

.news-item:after {
	content: " ";
	display: table;
	clear: both;
}

/*
 * Nadpis položky novinek
 */

.news-header {}

/*
 * Text položky novinek
 */


.news-text a {
	color: inherit;
	text-decoration: none;
}

/*
 * Obrázek položky novinek
 */

.news-image {
	float: left;
	max-width: 25%;
	min-width: 20%;
	margin: 48px 32px 0 0;
	border: 1px solid white;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-box-shadow: 0 0 10px #3C3C3C;
	-webkit-box-shadow: 0 0 10px #3C3C3C;
	box-shadow: 0 0 10px #3C3C3C;
}


/* OK, here's the good stuff. Start with fallback for browsers that don't support -webkit-line-clamp */
.clampMe {
	position: relative;
	height: 6.4em;
	overflow: hidden;
}

.clampMe:after {
	content: "";
	text-align: right;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 1.3em;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 5) {
	.clampMe {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
	}

	.clampMe:after {
		display: none;
	}
}


.loading {
	/*width: 100%;*/
	/*height: 70%;*/
	/*padding-left: 400px;*/
	/*text-align: center;*/
	padding-top: 6%;
	padding-left: 40.5%;
	/*font-size: 250px;*/
	font-size: 25vw;
	color: darkslategray;
}

.loading:after {
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	-webkit-animation: ellipsis steps(25,end) 2000ms infinite;
	animation: ellipsis steps(25,end) 2000ms infinite;
	content: "\2026"; /* ascii code for the ellipsis character */
	width: 0;
}

@keyframes ellipsis {
	to {
		width: 1.25em;
	}
}

@-webkit-keyframes ellipsis {
	to {
		width: 1.25em;
	}
}


.loader {
	margin: auto;
	border: 2vw solid #333333;
	border-radius: 50%;
	border-top: 2vw solid #009933;
	width: 30vw;
	height: 30vw;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}



@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
