@charset "utf-8";

/* ********** ********** START ********** ********** */
/* RESET Styles */

* {margin: 0; padding: 0; box-sizing: border-box;}

*:before, *:after {box-sizing: border-box;}
*::before, *::after {box-sizing: border-box;}

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body {line-height: 1;}

ol, ul {}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

table {border-collapse: collapse; border-spacing: 0;}

/* RESET Styles */
/* ********************** END ********************** */





/* ********** ********** START ********** ********** */
/* HTML Elements */

html, body {height: 100%; margin: 0; padding: 0;}

body {position: relative; display: flex; flex-flow: row wrap; justify-content: center; height: 100%; margin: 0; padding: 0; line-height: 1.25rem; font-size: 1rem; font-family: 'Roboto', sans-serif; font-weight: 300; color: rgba(38,41,48,1);}

h1, h2, h3, h4, h5, h6 {clear: both; font-family: 'Open Sans', sans-serif; font-weight: 400;}

h1 {margin: 0 0 16px 0;}

h2, h3, h4, h5, h6 {margin: 16px 0 16px 0;}

h1 {line-height: 40px; font-size: 28px;}
h2 {line-height: 25px; font-size: 25px;}
h3 {line-height: 23px; font-size: 23px;}
h4 {line-height: 21px; font-size: 21px;}
h5 {line-height: 20px; font-size: 20px;}
h6 {line-height: 19px; font-size: 19px;}

a {text-decoration: none;}
a:link {color: #333;}
a:visited {color: #333;}
a:hover {color: #333;}
a:active {color: #333;}

ul {margin: 0 0 20px 16px;}
ul ul, ul ul ul {margin: 0 0 0 16px;}

ol {margin: 0 0 20px 26px;}

input, select, option, textarea, button {font-family: 'Roboto', sans-serif; font-size: 14px;}

fieldset {padding: 20px;}
	fieldset legend {padding: 0 20px;}
				
label {line-height: 22px; font-size: 15px; font-weight: 400;}

input {border: none;}
input[type="text"], input[type="password"], input[type="email"] {padding: 5px 10px;}
input[type="submit"] {padding: 5px 20px; cursor: pointer;}
input[type="reset"] {padding: 5px 20px; cursor: pointer;}
input[type="button"] {padding: 5px 20px; cursor: pointer;}
input[type="checkbox"] {display: none;}
input[type="checkbox"]:after {content: "";}

input[type="checkbox"] + label {position: relative; padding: 0 0 0 30px;}
input[type="checkbox"] + label:before {position: absolute; left: 0; top: 0; display: block; width: 20px; height: 20px; border: 1px solid #363437; content: "";}
input[type="checkbox"]:checked + label:before {background: url(../icons/done-363437.svg) no-repeat center center / 20px 20px;}
			
select {border: 1px solid #ccc;}
	option {padding: 5px 10px;}

textarea {width: 100%; min-width: 100%; max-width: 100%; min-height: 48px; margin: 0 0 10px 0; padding: 5px 10px; border: 1px solid #ccc;}

button {padding: 5px 20px; border: 1px solid #f0f0f0; background-color: #f0f0f0; cursor: pointer;}

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder {opacity: 0.5;}
:hover::-webkit-input-placeholder, :hover::-moz-placeholder, :hover:-ms-input-placeholder, :hover:-moz-placeholder {opacity: 1;}

sup {position: relative; top: -0.5rem; font-size: 0.75rem;}

strong, b {font-weight: 500;}

p {margin: 0 0 16px 0;}

/* HTML Elements */
/* ********************** END ********************** */



#hlmenu{
text-align:center;
margin-top:32px;
}
#hlmenu a{
color:white;
font-size:17px;
margin-left: 21px;
border: 1px solid white;
padding: 12px;

}
#hlmenu a:hover{
color:grey;
}
























/* ********** ********** START ********** ********** */
/* Global Styles */

/* focus */
*:focus {outline: none;}

/* selection */
*::selection {background-color: #c10018; color: #fff;}

/* inner */
.inner {position: relative; width: 100%; max-width: 1200px; margin: 0 auto;}

/* motorove vozidla */
.mv {display: none;}

/* Global Styles */
/* ********************** END ********************** */





/* ********** ********** START ********** ********** */
/* animations */

@keyframes onloadfadein {
	from	{opacity: 0}
	to		{opacity: 1}
}

@keyframes slidetext {
	0%		{filter: blur(10px); opacity: 0;}
	20%		{filter: blur(0px); opacity: 1;}
	80%		{filter: blur(0px); opacity: 1;}
	100%	{filter: blur(10px); opacity: 0;}
}

/* animations */
/* ********************** END ********************** */





/* ********** ********** START ********** ********** */
/* #ID & .Class Styles */



/* BODY */

body {display: flex; padding: 52px 0 0 0;}



/* HEADER */

header:first-of-type {position: relative; display: flex; order: 2; justify-content: center; flex-direction: column; width: 100%; height: 560px; padding: 20px calc(50% - 400px); overflow: hidden; background-color: rgba(38,41,48,.7);}
	header:first-of-type:before {position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px; z-index: -1; filter: blur(0px); background: rgba(38,41,48,1) url(../photos/medzinarodna-nakladna-kamionova-doprava.jpg) no-repeat center bottom / cover; content: "";}
	header:first-of-type .wrapper {position: relative; max-width: 1200px; height: 100%; max-height: 240px; margin: 0; padding: 20px 20px 20px 340px; overflow: hidden; background-color: rgba(255,255,255,0.75);}
		header:first-of-type .wrapper:after {position: absolute; left: 0; top: 0; z-index: 1; display: block; width: 320px; height: 240px; border-right: 4px solid #fff; background: url(../photos/medzinarodna-nakladna-kamionova-doprava.jpg) no-repeat center center / cover; content: "";}
	header:first-of-type h1 {margin: 0 0 20px 0; padding: 0; text-transform: uppercase; line-height: 36px; font-size: 24px; font-weight: 400; color: #000;}
	header:first-of-type .slogan {margin: 0 0 20px 0; padding: 0; font-size: 18px; font-weight: 300; color: #000;}
	header:first-of-type ul {position: relative; height: 24px; margin: 0; padding: 0;}
		header:first-of-type ul li {position: absolute; margin: 0; padding: 0 0 0 42px; list-style: none; text-transform: lowercase; line-height: 24px; font-size: 24px; font-weight: 300; background: url(../icons/done.svg) no-repeat left center / 32px 32px; color: #000; opacity: 0; animation: slidetext, slidetext, slidetext, slidetext, slidetext; animation-duration: 5s; animation-fill-mode: forwards;}
		header:first-of-type ul li:nth-of-type(1) {animation-delay: 0s, 36s, 72s, 108s, 144s;}
		header:first-of-type ul li:nth-of-type(2) {animation-delay: 4s, 40s, 76s, 112s, 148s;}
		header:first-of-type ul li:nth-of-type(3) {animation-delay: 8s, 44s, 80s, 116s, 152s;}
		header:first-of-type ul li:nth-of-type(4) {animation-delay: 12s, 48s, 84s, 120s, 156s;}
		header:first-of-type ul li:nth-of-type(5) {animation-delay: 16s, 52s, 88s, 124s, 160s;}
		header:first-of-type ul li:nth-of-type(6) {animation-delay: 20s, 56s, 92s, 128s, 164s;}
		header:first-of-type ul li:nth-of-type(7) {animation-delay: 24s, 60s, 96s, 132s, 168s;}
		header:first-of-type ul li:nth-of-type(8) {animation-delay: 28s, 64s, 100s, 136s, 172s;}
		header:first-of-type ul li:nth-of-type(9) {animation-delay: 32s, 68s, 104s, 140s, 176s;}


/* NAV */

#nav-content {position: fixed; left: 0; right: 0; top: 0; z-index: 99998; display: flex; order: 1; justify-content: space-between; flex-flow: row wrap; height: 52px; padding: 0 20px; background-color: rgba(38,41,48,1);}
	#nav-content a {height: 52px; margin: 0 0 0 12px; line-height: 52px; font-size: 18px; font-weight: 400; color: #fff; opacity: 0.9; transition: 0.25s opacity;}
	#nav-content a:hover, #nav-content a.selected {border-bottom: 4px solid #fff; color: #fff; opacity: 1; transition: 0.25s opacity;}
	#nav-content a#logo {position: relative; align-self: flex-start; width: 176px; margin: 0; padding: 0; line-height: 52px; font-family: 'Titillium Web', sans-serif; font-weight: 500;}
		#nav-content a#logo .do {font-size: 32px;}
		#nav-content a#logo .and {font-size: 16px; color: #ccc;}
		#nav-content a#logo .cargo {font-size: 32px;}
		#nav-content a#logo:after {position: absolute; left: 1px; right: 3px; bottom: -24px; display: block; border-top: 4px solid #ccc; text-align: center; text-transform: uppercase; line-height: 24px; font-size: 16px; background-color: rgba(255,255,255,1); color: rgba(38,41,48,1); content: "Kamiónová doprava";}
	#nav-content a#logo:hover {border: none;}
	#nav-content .wrapper {display: flex; order: 2; justify-content: space-between; flex-flow: row nowrap;}
		#nav-content .icon {width: 24px; height: 52px; margin: 0 0 0 10px; text-indent: -99999px;}
		#nav-content .icon:hover, #nav-content .icon.selected {border-bottom: none;}
		#nav-content span.menu {order: 1; display: none; text-indent: -99999px; background: url(../icons/menu.svg) no-repeat center center / 34px 34px; opacity: 0.8; transition: 0.25s opacity; cursor: pointer;}
		#nav-content span.menu:hover {opacity: 1; transition: 0.25s opacity;}
		#nav-content #links-content {position: relative; display: block; order: 1; justify-content: space-between; flex-flow: row wrap; align-self: flex-start; margin: 0 10px 0 0;}
	#nav-content a.phone {order: 2; background: url(../icons/phone.svg) no-repeat center center / 24px 24px;}
	#nav-content a.email {order: 3; background: url(../icons/email.svg) no-repeat center center / 26px 26px;}

#nav-contacts {position: fixed; left: 0; right: 0; top: 0; z-index: 99998; display: flex; order: 0; justify-content: space-between; flex-flow: row wrap; height: 32px; padding: 4px 20px;}
	#nav-contacts a {width: 24px; height: 24px; margin: 0 0 0 6px; text-indent: 99999px;}
	#nav-contacts a.phone {background: url(../icons/phone.svg) no-repeat center center / 24px 24px;}
	#nav-contacts a.phone:hover {background-image: url(../icons/phone-hover.svg)}
	#nav-contacts a.email {background: url(../icons/email.svg) no-repeat center center / 24px 24px;}
	#nav-contacts a.email:hover {background-image: url(../icons/email-hover.html)}


  
/* MAIN */

main {position: relative; order: 3; min-height: calc(100% - 72px); padding: 0 20px;}

p a {text-decoration: underline; font-weight: 500;}

#content h1, h2, h3 {padding: 0 0 10px 0; border-bottom: 2px solid #ccc;}

#content article {width: 1300px; margin: 0 0 40px 0; padding: 20px 0 0 0;}
	#content article h2 {}
	#content article p {}
	#content article ul {}
	#content article img {}

#breadcrumbs {min-height: 48px;}
	#breadcrumbs a {position: relative; margin: 0; padding: 0; line-height: 28px; color: #666;}
	#breadcrumbs a:after {margin: 0 0 0 5px; line-height: 28px; content: ">";}
	#breadcrumbs a:hover {color: #333;}
	#breadcrumbs span {position: relative; margin: 0; padding: 0; line-height: 28px; color: #666;}
	#breadcrumbs span:hover {color: #333;}
                                                                                                       
	.photo-ilustration {float: left; width: 240px; margin: 5px 10px 10px 0;}
	.titulna-stranka .photo-ilustration {width: 200px;}
		.photo-ilustration img {max-width: 240px; filter: grayscale(50%);}
		.titulna-stranka .photo-ilustration img {max-width: 200px;}
		.photo-ilustration figcaption {font-size: 12px;}


/* ASIDE */

aside {order: 10;}

aside.main {width: 300px; margin: 48px 0 0 0;}
	aside.main article {margin: 0 0 10px 0; padding: 10px; background-color: #fff;}
		aside.main article label {width: 100%;}
		aside.main article input, aside.main article select {width: 100%; margin: 0 0 10px 0;}



/* FOOTER */

footer {flex: 1 100%; order: 99; width: 100%; padding: 20px; text-align: center; background-color: rgba(38,41,48,1); color: #fff;}
	footer p {margin: 0;}

/* #ID & .Class Styles */
/* ********************** END ********************** */





/* ********** ********** START ********** ********** */
/* Sub Site Styles */



/* Sub Site Styles */
/* ********************** END ********************** */





@media only screen and (max-width: 960px) {

/* BODY */

body {padding: 44px 0 0 0;}



/* HEADER */

header:first-of-type .wrapper {max-height: 100%; padding: 10px; overflow: initial;}
	header:first-of-type .wrapper:after {display: none;}
	header:first-of-type h1 {line-height: 24px; font-size: 20px;}
	header:first-of-type .slogan {font-size: 14px;}
		header:first-of-type ul li {padding: 0 0 0 34px; line-height: 16px; font-size: 16px; background-size: 24px 24px;}



/* NAV */

#nav-content {height: 44px; padding: 0 10px;}
	#nav-content a {height: 44px; line-height: 44px;}
	#nav-content a#logo {width: 126px; line-height: 44px;}
		#nav-content a#logo .do {font-size: 16px;}
		#nav-content a#logo .and {font-size: 8px;}
		#nav-content a#logo .cargo {font-size: 24px;}
		#nav-content a#logo:after {bottom: -16px; border-top: 2px solid #ccc; line-height: 16px; font-size: 12px;}
		#nav-content .icon {height: 44px;}
		#nav-content span.menu {display: flex;}
	#nav-content #links-content {position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none;}
	#nav-content #links-content.show {display: flex; flex-flow: column; justify-content: flex-start; height: 150px; background-color: rgba(0,0,0,0.8);}

 article {width: 100%;}

/* MAIN */

main {padding: 10px;}

#content article p {width: 100%;}
#content article ul {width: 100%;}
#content article img {width: 100%;}

}