@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,latin-ext);
@import "reboot.css";
html {
	height: 100%; }
body {
	display: grid;
	justify-items: center;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	grid-template-columns: 90%;
	grid-template-rows: 120px auto 120px;

	min-height: 100%;
	font-family: 'Open Sans', sans-serif;
	font-size: 120%;
	color: #444;
	overflow-x: hidden; }

body,
header,
section:hover:before {
	opacity: 1; }

/* Barvy */
header,
header h1,
header p,
p.motto:first-child,
p.motto:nth-child(2n):hover a,
footer,
footer a {
	color: #FFF; }

h1, h2, h3,
h2 span:hover,
section:before {
	color: #65BBE3; }


/* Transition */
header,
footer,
h1,
h1:after,
h1:before,
p.motto:nth-child(2n):hover a,
p.motto:nth-child(2n) a,
#home {
	transition: 1s ease; }

section:hover:before,
section:before,
h2 span {
	transition: 0.5s ease; }

header,
main,
footer {
	width: 100%; }

header,
footer {
	background-color: #0052B4;
	padding: 1em;
	overflow: hidden;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, .3); }

header {
	display: flex;
	justify-content: center;
	align-items: center;
	grid-row-start: 1;
	z-index: 900;
	border-radius: 0 0 5px 5px; }

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	grid-row-start: 2;
	margin-bottom: 1em; }
footer {
	grid-row-start: 3;
	align-items: end;
	padding: 1em;
	border-radius: 5px 5px 0 0; }
footer p {
	text-align: center; }

h1, h2, h3 {
	letter-spacing: .05em;
	text-align: center; }
h1 {
	display: block;
	/* position: relative; */
	top: 0;
	width: 700px;
	min-height: 90px;
	padding-left: 100px;
	text-align: left;
	font-weight: 400;
	
	background-image: url(images/logo-eu.png);
	background-repeat: no-repeat;

}

h1:after {
	content: "Get the best route, every day";
	display: block;
	font-weight: 400;
	font-size: 64%;
}

h2 span {
	position: absolute;
	left: -50px;
	width: 200px;
	height: auto;
	color: #b8e9f7;
	text-align: center;
	font-size: 180px;
	z-index: -1;
	cursor: default;
}

h2 span:hover {
	left: -40px;
}

h2 {
	margin-top: 1em;
	margin-bottom: -0.1em;
	font-weight: 400;
	font-size: 2.9em;
}

p.motto {
	margin: 28px auto 0 auto;
	padding: 20px;
	text-align: center;
	font-size: 120%;
	letter-spacing: 0.02em;
}
p.motto:first-child {
	position: relative;
	width: 70%;
	margin-top: 0;
	font-size: 130%;
	border-radius: 50px;
	background-color: #5C5BFE;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.37);
}
p.motto a {
	color: #5C5BFE;
	text-decoration: none;
}
p.motto:nth-child(2n) a {
	position: relative;
	padding: 0px;
	border-radius: 3px;
}

p.motto:nth-child(2n):hover a {
	background-color: #5C5BFE;
	padding: 5px 10px;
}

p.motto span{
	padding: 0 .2em;
	color: #FE5A5A;
	font-size: 130%;
}

p.motto:first-child:before {
	content: "";
	position: absolute;
	left: 28%;
	top: -20px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 0 20px;
	border-color: transparent transparent transparent #5b5bfe;
}

p,
p:hover h2 span {
	line-height: 140%; }

dl.kontakty {
	overflow: auto; }
dl.kontakty dt {
	font-size: 150%;
	margin-top: 0.75em;
	clear: both; }
dl.kontakty dt img {
	vertical-align: text-bottom;
	float: left;
	margin: 0 1em 1em 0;
	margin-left: 5px;
	border-radius: 50%; }
dl.kontakty dd {
	line-height: 140%;
	margin-top: 0.3em; }

section {
	width: 250px;
	margin-top: 32px;
	padding-bottom: 10px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1); } 

section:before {
	position: relative;
	left: -4000px;
	/* content se počítá v HTM pomocí JavaScriptu */
	font-size: 15px;
	opacity: 0.3; }
section:hover:before {
	left: 30px; }
section:hover {
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.37); }

a img,
dl.kontakty dt img {
	border-radius: 50%;
	border: 5px solid #fff;
	transition: .2s ease;
	background-color: #8BD1B5;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, .3); }

/* #home {
	position: fixed;
	top: 160px;
	width: 60px;
	height: 72px;
	left: 15px;
	opacity: 0;
	background-image: url(images/home.png);
	background-repeat: no-repeat; } */

section > a,
section > span {
	display: block;
	width: 100%;
	padding-top: 70px;
	text-align: center;
	text-decoration: none;
	font-weight: 700; }

section > a {
	color: #65BBE3; }

section > nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin-top: 10px; }
section > nav a {
	display: block;
	min-width: 24px;
	min-height: 24px;
	color: #65BBE3;
	background-color: transparent;
	margin: 0 8px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1); }
section > a:hover,
section > nav a:hover {
	color: #2aa4db; }

footer a {
	margin: 0 .5em;
	text-decoration: none;
	border-bottom: 1px dotted #EEE; }
footer a:hover {
	border-bottom-style: solid; }


.dim {
	opacity: .3; }
.dim::before { content: url(images/nalada/0.png); }

.ico {
	background-repeat: no-repeat;
	background-position: top center;
	background-color: transparent; }


.ico-al { background-image: url(images/al.png); }
.ico-ad { background-image: url(images/ad.png); }
.ico-at { background-image: url(images/at.png); }
.ico-by { background-image: url(images/by.png); }
.ico-be { background-image: url(images/be.png); }
.ico-ba { background-image: url(images/ba.png); }
.ico-bg { background-image: url(images/bg.png); }
.ico-hr { background-image: url(images/hr.png); }
.ico-cy { background-image: url(images/cy.png); }
.ico-cz { background-image: url(images/cz.png); }
.ico-dk { background-image: url(images/dk.png); }
.ico-ee { background-image: url(images/ee.png); }
.ico-fo { background-image: url(images/fo.png); }
.ico-fi { background-image: url(images/fi.png); }
.ico-fr { background-image: url(images/fr.png); }
.ico-de { background-image: url(images/de.png); }
.ico-gi { background-image: url(images/gi.png); }
.ico-gr { background-image: url(images/gr.png); }
.ico-hu { background-image: url(images/hu.png); }
.ico-is { background-image: url(images/is.png); }
.ico-ie { background-image: url(images/ie.png); }
.ico-im { background-image: url(images/im.png); }
.ico-it { background-image: url(images/it.png); }
.ico-rs { background-image: url(images/rs.png); }
.ico-lv { background-image: url(images/lv.png); }
.ico-li { background-image: url(images/li.png); }
.ico-lt { background-image: url(images/lt.png); }
.ico-lu { background-image: url(images/lu.png); }
.ico-mk { background-image: url(images/mk.png); }
.ico-mt { background-image: url(images/mt.png); }
.ico-md { background-image: url(images/md.png); }
.ico-mc { background-image: url(images/mc.png); }
.ico-me { background-image: url(images/me.png); }
.ico-nl { background-image: url(images/nl.png); }
.ico-no { background-image: url(images/no.png); }
.ico-pl { background-image: url(images/pl.png); }
.ico-pt { background-image: url(images/pt.png); }
.ico-ro { background-image: url(images/ro.png); }
.ico-ru { background-image: url(images/ru.png); }
.ico-sm { background-image: url(images/sm.png); }
.ico-rs { background-image: url(images/rs.png); }
.ico-sk { background-image: url(images/sk.png); }
.ico-si { background-image: url(images/si.png); }
.ico-es { background-image: url(images/es.png); }
.ico-se { background-image: url(images/se.png); }
.ico-ch { background-image: url(images/ch.png); }
.ico-ua { background-image: url(images/ua.png); }
.ico-gb { background-image: url(images/gb.png); }
.ico-va { background-image: url(images/va.png); }



/* Mobilizace */
@media screen and (max-device-width: 480px) {


	html, body, header, footer {
		width: 100%;
		margin: 0;
		padding: 0;
		border: none;
	}
	html, body {
		background-image: none;
	}

	body,
	p.motto,
	p.motto span {
		font-size: 120%;
	}

	header {
		background-size: 75%;
		background-position: 50% 10px;
		box-shadow: none;
	}

	section {
		padding: 0 1em;
	}
	
	section:before {
		display: none;
	}

  
	p.motto:first-child {
		margin-top: 137px;
		font-size: 80%;
		width: 88%;
		padding: 18px 10px 12px;
		border-radius: 25px;
	}
	
	p.motto:nth-child(2n) {
		padding: 0;
		margin-top: -10px;
		margin-bottom: -10px;
	}

	ul.deska {
		width: 90%;
		font-size: 100%;
		margin: 30px 0 30px 0;
		padding-left: 10%;
		line-height: 64px;
	}
	ul.deska2 {
		margin-left: 0;
		padding-left: 10%;
	}
	ul.deska.li {
		vertical-align: middle;
	}
	ul.deska li a {
		width: 90%;
		width: auto;
		float: none;
		text-align: left;
		display: block;
	}
	ul.deska li a br {
		display: none;
	}
	ul.deska2 li:first-child a {
		padding-left: 0;
	}


	img{
	  max-width: 100%;
	  height: auto;
	}
	a img {
		position: relative;
		top: 16px;
		left: -16px;
		border: none;
		transition: none;
	}
	
	h1 {
		font-size: 120%;
		margin-top: 30px;
	}
   
	h1:before {
		display: none;
	}
	
	h1 {
		left: -25%;
	}

	footer {
		height: auto;
		color: #65bbe3;
	}
	footer a {
		display: block;
		height: 2em;
		line-height: 2em;
		padding-left: 1em;
		border-bottom: none;
	}
	footer a:first-child {
		padding-top: 1em;
	}
	
}