/*	OBECNE.CSS 	*/

*	{margin: 0; padding: 0;}
::selection {background: #F16D31; color: #ffffff}

img, a img	{border: none}
html, body  {height:100%;} 

@font-face {
	font-family: 'Mona-Sans-Regular'; 
	src: url('Mona-Sans-Regular.ttf'); 
  }

 @font-face {
	font-family: 'Mona-Sans-Semibold'; 
	src: url('Mona-Sans-Semibold.ttf'); 
  }
body	{text-align: center; background-color: #ffffff;
	font-family:'Mona-Sans-Regular', "Open Sans", "Arial", sans-serif; color: #393837;}


.top	{color: #cccccc; /*stop: 0;*/ width: 100%; }
.fixed	{color: #555555; top: 0; width: 100%; background-color: #ffffff; position: fixed; z-index: 1000; border-bottom: 2px solid #eeeeee}

.fixed a, .fixed #logo strong	{color: #555555}
.top a		{color: #393837}
#logo a		{text-decoration: none}

a		{color: #005F88}
a:hover	{text-decoration: none}

#logo	{float: left; color: #cccccc; text-align: left}
#logo strong {margin-right: 5px}



#top-contact, #top-menu	{float: right; margin: 0}
#top-contact .fas:firstchild	{margin-left: 0;}
#top-contact a	{text-decoration: none}



#top-menu	{float: right; margin: 0}
#top-menu ul	{list-style: none;}
#top-menu ul li	{float: left}
#top-menu ul li a	{text-decoration: none; color: #393837}
#top-menu ul li a:hover, #top-contact a:hover	{/*background-color: rgba(0, 0, 0, 0.12) */}
.line	{border-left: solid 1px #555555;}
.top-menu-index .line	{border-left: solid 1px #ffffff;}

	
#headline-homepage, #headline	{clear: both; position: relative; text-align: left;}
#headline-homepage h1	{text-transform: uppercase; line-height: 120%; font-weight:bolder}
#headline-homepage p	{margin: 10px 0}
#headline	{text-align: center;}


.index	{/*background: #555555 url("../img/header.jpg") top center no-repeat; */}
.tieto		{background: #555555 url("../img/tieto-background.jpg") bottom center no-repeat; background-size: cover;  color: #ffffff}
.logisticbg	{background-color: #48748F; color: #ffffff}
.cmsbg	{background-color: #9A9EA6}
.fluently {background-color: #213544; color: #ffffff}



.portfolio  {clear: both;  }

h1, h2, h3, #logo  {font-family:'Mona-Sans-Semibold', "Open Sans", "Arial", sans-serif; }
h1		{ line-height: 130%}
#headline-homepage h1		{text-align: left}

h2		{font-weight: 800;}
h2.pink {background: url("../img/h2pink.png") top center no-repeat;}
h2.yellow {background: url("../img/h2yellow.png") top center no-repeat; }
h2.blue {background: url("../img/h2blue.png") top center no-repeat; }
h2.green {background: url("../img/h2green.png") top center no-repeat; }


p		{line-height: 1.7em; font-weight: 400; text-align: left; clear: left}
ul		{list-style: circle; }
ul li	{text-align: left; margin-top: 3px}

.read, .read-wide, .content p {margin: auto; clear: both}
p.note	{margin: auto; text-align: left; padding-bottom:20px}
.center	{text-align: center}
#headline-homepage ul, #headline ul		{margin:auto; text-align: center; list-style: none;}
#headline-homepage ul li, #headline	ul li	{margin-left: 0}
#headline-homepage ul li a, #headline ul li a	{color: #ffffff; text-decoration: none; text-transform: uppercase; border: none; background-color: #F16D31; 
font-weight: 800; }
#headline-homepage ul li a:hover, #headline ul li a:hover {background-color: #EB5D26}



.sedy	{color: #555555; background: #f4f5f6/*E7F5C6*/;  border-top: solid 1px #dddddd; border-bottom: solid 1px #dddddd; width: 100%; float: left}


.sedy-tieto		{background: url("../img/tieto-bw.jpg") bottom center no-repeat; background-size: cover; background-attachment: fixed}
.gradient	{background: #ffffff url("../img/gradient.png") top center repeat-x; /*border-bottom: 1px solid #dddddd;*/ }

/*h3, h4 {color: #005F88;}*/
h3 {text-align: left; line-height: 140%}

.obrazky  {clear:both; overflow: hidden; text-align: left;}
.jedna, .dva, .tri	  {float: left;}
.obrazky div h3	{font-weight: normal; margin-top: 0; color: #005F88} 


/* Reference velká */
.reference {float: left;}
.ritem {float: left; }


.levy-cs 	{float: left; width:650x; margin: 0 }
.pravy-cs 	{float: left; width:650x; margin: 0 }
.pravy-obr-cs	{float: right; width: 625px; margin: -55px 140px 0 0}
.levy-obr-cs	{float: right; width: 650px; margin: 0; text-align: right }

.reference-velka h3	{margin: 75px 0 10px 0px}
.reference-velka ul	{margin: 10px 0 10px 90px}

ul.cta		{list-style: none; margin: 40px 0 10px 50px}
ul.cta li a	{padding: 15px 20px; text-decoration: none; color: #ffffff; font-weight: 600; text-transform: uppercase}


.logistic-green		{background-color: #D7E8F9}
.logistic-green	h3	{color: #D2830F}
.logistic-green	ul li a			{background-color: #D2830F;}
.logistic-green	ul li a:hover	{background-color: #BD7407;}

.cms		{background-color: #2E3F50; color: #dddddd}
.cms	h3	{color: #64BFA4}
.cms	ul li a			{background-color: #64BFA4;}
.cms	ul li a:hover	{background-color: #50AB90 ;}
 
 
.content ul li { line-height: 140%; margin-bottom: 10px }
 

.aboutme {margin: auto; text-align: left; }
.about-item {clear: both}
.about-diamond {float: left; }
.about-text {float: right;}

#navigace   {clear: both; margin:auto;}
#navigace ul		{text-align: center; list-style: none; margin: auto; }
#navigace ul li 	{float: left}
#navigace ul li.another	{float: left}
#navigace ul li a	{color: #005F88; text-decoration: none; text-transform: uppercase; font-weight: 400;}
#navigace ul li a:hover {background-color: #F16D31; color: #ffffff}

.results	{text-align: center; margin: auto; }
.result		{/*border: 2px dashed #cccccc; */float: left; width: 33%}
.resultnumber, .resultpercent		{color: #005F88; font-weight: bold}


.mezera60   {float:left; clear: both; width: 100%; }
.diamond-separator-blue   {float:left; clear: both; width: 100%; 
background: url("../img/diamond-separator-blue.png") top center no-repeat}
.clear		{clear: both;  }


#footer	{color: #ffffff; background: #005F88; clear: both}
#footer h2 {color: #ffffff;}

#footer-content	{}
#footer-text	{margin-left: 140px}
#avatar	{float:left}



.content		{clear:both; }
.content ul, .read-wide ul 	{text-align: left; list-style: circle; float: none; }
.content img		{box-shadow: 0}
/*.content img		{box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15)}*/

#footer-text ul li	{float:left; list-style: none;}
#footer-text ul li a	{color: #ffffff; text-decoration: underline; text-transform: uppercase; 
font-weight: normal; }
#footer-text ul li a.tel   {color: #ffffff; border: none; background-color: #F16D31; text-decoration: none;
font-weight: 600;}
#footer-text ul li	a:hover {text-decoration: none;}
#footer-text ul li	a.tel:hover {background-color: #EB5D26}
.faktura  {color: #73A8BF; line-height: 120%;}

ul.diamonds		{background: url("../img/four-diamonds.png") top center no-repeat; }
.read-wide ul.diamonds 	{list-style: none;}
ul.diamonds li 	{text-align: center; float: left }
ul.diamonds li a	{display: block}

.testimonials1, .testimonials2 	{margin:auto; }
.testimonial	{float:left; background: url("../img/quote-right-solid.png") top left no-repeat; }
.testimonial p.note	{margin-left: 0}

p.name	{font-weight: bold; }



/* 1440 px */
	



@media (min-width: 1441px) {			
    .telo {width: 1380px; margin: auto; }
    .top	{height: 60px;}
    .fixed	{height: 50px; }
    .index	{ height: 700px; background-size: cover}
	.logisticbg	{ height: 800px; background-size: cover}
	.tieto	{ height: 800px; background-size: cover}
	.fluently	{ height: 786px; background-size: cover}
	    
    #logo, #top-menu, #top-contact	{margin-top: 25px; font-size: 21px;}
    #logo	{width: 480px}
    
    .fixed #logo, .fixed #top-menu/*, .fixed #top-contact*/	{margin-top: 14px; font-size: 18px;}
    .fixed #top-menu	{margin-top: 10px; font-size: 18px;}
    
    
    #top-menu	{width: 600px; margin-top: 22px;}
    #top-menu ul	{width: 600px; margin: 0}
    /*#top-contact .fas	{margin: 0 5px 0 10px;}*/
    #top-menu ul li a	{padding: 10px 20px; font-size: 18px}
    .top-menu-index ul li a	{font-size: 21px !important}
    
    #top-contact a	{padding: 10px 10px 10px 0; }
    .line	{margin-left:15px; margin-right: 5px}
    .lang	{}
    
    .read, .read p, .content p	{width: 700px; margin:auto; }
    .content h3 {width: 700px; margin: 30px auto 10px auto; }
    .content img {margin-top: 50px; max-width: 1380px}
    
    .levy  {margin: 40px 40px 0 0}
    .levy-cs  {margin: 0px 40px 0 0}
    
    .pravy p, .pravy-cs p {width: 600px; margin: 0}
    .pravy ul li, .pravy-cs ul li {width: 600px; margin: 0}
    .pravy-cs ul li {margin-left: 40px; font-size: 18px}
    
    
    .read-wide, .read-wide p {width: 800px; line-height: 1.7em}
    .read p, .read-wide p, .content p	{margin-top: 10px}
    .read-wide p:first-child {margin-top: 40px }
    
    .note	{font-size: 14px; width: 800px}
    #headline-homepage   {top: 120px;}
    #headline		{top: 100px;}
    
    
    #headline-homepage h1  {font-size: 70px;}
    #headline h1		{font-size: 60px;}
    
    h2		{font-size: 40px; padding-top: 60px}
    h2.pink, h2.yellow, h2.blue, h2.green {margin-top: 60px; padding-top: 40px;}
    
    h3		{margin: 30px 0 15px 0; font-size: 24px}
    
    
    ul		{width: 560px; margin: 5px auto 15px auto; }
    .content		{margin-top: 40px;clear: both }
    .content ul	{margin: 10px auto; width: 650px;}
    .content ul li  {width: 550px}
    
    .read-wide ul	{margin: 10px auto; width: 700px; }
    .read-wide ul li 	{width: 600px}
    
    
    p, ul		{width: 620px;}
    p, ul li		{ font-size:22px}
    p.big	{font-size: 22px;  width: 1080px;}
    #headline-homepage p.intro		{margin: 30px 0;}
    #headline p.intro		{margin: 12px auto 30px auto;}
    p.perex		{margin-top: 35px;}
    
    .border60	{border-top: 60px solid #ffffff; height: 991px; border-bottom: 37px solid #eeeeee;; margin-top: 40px;}
    .minus60	{margin-top: -41px; clear: none}
    #headline-homepage ul li, #headline ul li		{margin-top: 120px;}
    #headline-homepage ul li a, #headline ul li a	{padding: 20px 30px; font-size: 24px; }
    
   /* Reference velká */
	.reference {margin-top: 50px}
	.ritem {width: 650px; height: 470px; margin: 20px; /*overflow:hidden*/}
	.rimg img, .rimg  {width: 650px; height: 462px;}
	.rimg {margin: 10px 0 0 0}
	.ritem h3, .ritem p {width: 440px;}
	.ritem h3 {margin: 10px 0 0 0px}
	.ritem p {font-size: 14px; margin: 5px 0 0 0px}
    
    .levy, .pravy	{width: 720px; float: left; min-height: 300px}
    .levy-text h3	{margin: 60px 0 10px 45px}
    .levy-text p	{width: 450px; margin: 0 0 5px 75px}
    .pravy-text h3	{margin: 60px 0 10px 45px}
    .pravy-text p 	{width: 450px; margin: 0 0 5px 75px}
    
    .aboutme {width: 600px; margin-top: 60px; 
            background: url("../img/line.png") 10px 2px repeat-y;}
    .about-item {width: 700px;}
    .about-diamond {width: 70px; height: 90px; padding: 4px 0 0 35px; font-weight: 600; background: url("../img/about-grey.png") 0px 0px no-repeat;}
    .about-text {width: 580px;}
    .about-text h3 {margin: 0}
    .about-text p  {margin-top: 5px}
    
    
    #navigace   {width: 800px;}
    #navigace fas  {margin: 0 5px;}
    #navigace ul		{margin-top: 20px; width: 800px}
    #navigace ul li 	{margin: 0 30px; }
    #navigace ul li.another	{margin: 0 50px;}
    #navigace ul li a	{padding: 12px 25px}
    
    
    .results	{width: 900px; margin-top: 50px;  }
    .result		{/*padding: 26px; */width: 33%/*200px; margin: 20px*/}
    .resultnumber, .resultpercent		{color: #005F88; font-weight: bold}
    .resultnumber		{font-size: 80px; }
    .resultpercent		{font-size: 48px}
    
    .testimonials1	{width: 420px; margin-top: 40px}
    .testimonials2	{width: 920px; margin-top: 40px}
    .testimonial	{width: 420px; min-height: 264px;padding: 30px 0 0 40px;}
    .testimonial p	{width: 380px;}
    p.name	{margin-top: 20px}
    
    
    .sedy, .bily	{padding-bottom: 60px;}
    #footer	{/*bottom: 20px; font-size: 14px; width: 1440px*/}
    #footer-content	{width: 850px; margin: auto; margin-top: 35px;}
    #footer-text, #footer-text p	{width: 615px;}
    #avatar, #avatar img	{width: 200px; height: 200px}
    
    ul 		{float: left; margin-top: 60px;}
    #footer-text	{margin-left: 140px}
    #footer-text ul li		{}
    #footer-text ul li a	{padding: 20px 15px; font-size: 18px; }
    #footer-text ul li a.tel	{padding: 20px 30px; }
    #footer-text ul li a.mail	{padding-left: 30px }
    
    ul.diamonds	{width: 820px; height: 120px; margin-top: 40px}
    ul.diamonds li	{width: 25%; height: 120px; line-height: 120px;}
    ul.diamonds li a		{text-decoration: none}
    ul.diamonds li a:hover	{text-decoration: underline}
    
    .faktura	{font-size: 14px; clear: both; padding: 80px 0 20px 0}
    
    .mezera60   {height:60px;}
    .diamond-separator-blue   {height:65px; margin: 60px 0}
    
    }
    
    
    
    



	/* 992px */
    
    
    
    @media (min-width: 992px) and (max-width: 1440px) {			
        
		.telo {width: 940px; margin: auto; }
		.top	{height: 60px;}
		.fixed	{height: 50px; }
		
		.index	{ height: 600px; background-size: cover}
		.logisticbg { height: 700px; background-size: cover}
		.tieto 	{ height: 770px; background-size: cover}
		.fluently		{ height: 772px; background-size: cover}


		.logisticbg img		{max-width: 550px}
		/*.fluently img		{max-width: 550px}*/

		#logo	{margin-top: 22px; font-size: 21px;}
		#top-menu  	{margin-top: 15px; font-size: 18px;}
		#top-contact	{margin-top: 22px; font-size: 18px;}
		.line	{margin-left:10px; margin-right: 5px}
		#logo	{width: 400px}
		.topmail	{display:none}
		
		.fixed #logo, .fixed #top-menu, .fixed #top-contact	{margin-top: 14px; font-size: 18px;}
		.fixed #top-menu	{margin-top: 10px; font-size: 18px;}
		
		
		#top-menu	{width: 420px; margin-top: 22px;}
		#top-menu ul	{width: 420px; margin: 0}
		#top-contact .fas	{margin: 0 5px 0 20px;}
		#top-menu ul li a	{padding: 10px 10px; }
		
		
		
		.read, .read p, .content p	{width: 700px; margin:auto; }
		.content h3 {width: 700px; margin: 30px auto 10px auto; }
		.content img {margin-top: 45px; max-width: 940px}
		
		.levy  {margin: 40px 40px 0 0}
		.levy-cs  {margin: 0px 40px 0 0}
		
		.pravy p, .pravy-cs p {width: 600px; margin: 0}
		.pravy ul li, .pravy-cs ul li {width: 550px; margin: 0}
		.pravy-cs ul li {margin-left: 40px; font-size: 18px}
		
		
		.read-wide, .read-wide p {width: 800px; line-height: 1.7em}
		.read p, .read-wide p, .content p	{margin-top: 10px}
		.read-wide p:first-child {margin-top: 40px }
		
		.note	{font-size: 14px; width: 800px}
		#headline-homepage   {top: 60px;}
		#headline		{top: 100px;}
		
		
		#headline-homepage h1  {font-size: 50px; line-height: 1.4em;}
		#headline h1		{font-size: 50px;}
		/*#headline img		{max-width: 550px}*/
		
		h2		{font-size:36px; padding-top: 40px}
		h2.pink, h2.yellow, h2.blue, h2.green {margin-top: 40px; padding-top: 40px;}
		
		h3		{margin: 30px 0 15px 0; font-size: 24px}
		
		ul		{width: 560px; margin: 5px auto 15px auto; }
		.content		{margin-top: 40px;clear: both }
		.content ul	{margin: 10px auto; width: 650px;}
		.content ul li  {width: 550px}
		
		.read-wide ul	{margin: 10px auto; width: 700px; }
		.read-wide ul li 	{width: 600px}
		
		
		p		{width: 620px; }
		p, ul li		{ font-size: 20px}
		p.big	{font-size: 24px;  width: 940px;}
		#headline-homepage p.intro		{margin: 25px 0;}
		#headline p.intro		{margin: 10px auto 30px auto;}
		p.perex		{margin-top: 35px;}
		
		.border60	{border-top: 60px solid #ffffff; height: 991px; border-bottom: 37px solid #eeeeee;; margin-top: 40px;}
		.minus60	{margin-top: -41px; clear: none}
		#headline-homepage ul li, #headline ul li		{margin-top: 90px;}
		#headline-homepage ul li a, #headline ul li a	{padding: 20px 30px; font-size: 24px; }
		
		/* Reference velká */
		.reference {margin-top: 50px}
		.ritem {width: 430px; height: 310px; margin: 20px; /*overflow:hidden*/}
		.rimg img, .rimg  {width: 430px; height: 306px;}
		.rimg {margin: 10px 0 0 0}
		.ritem h3, .ritem p {width: 440px;}
		.ritem h3 {margin: 10px 0 0 0px}
		.ritem p {font-size: 14px; margin: 5px 0 0 0px}
		
		.levy, .pravy	{width: 720px; float: left; min-height: 300px}
		.levy-text h3	{margin: 60px 0 10px 45px}
		.levy-text p	{width: 450px; margin: 0 0 5px 75px}
		.pravy-text h3	{margin: 60px 0 10px 45px}
		.pravy-text p 	{width: 450px; margin: 0 0 5px 75px}
		
		.aboutme {width: 600px; margin-top: 60px; 
				background: url("../img/line.png") 14px 2px repeat-y;}
		.about-item {width: 550px;}
		.about-diamond {width: 90px; height: 90px; padding: 5px 0 0 35px; font-weight: 600; background: url("../img/about-grey.png") 5px 2px no-repeat;}
		.about-text {width: 420px;}
		.about-text h3 {margin: 0}
		.about-text p  {margin-top: 5px}
		
		
		#navigace   {width: 800px;}
		#navigace fas  {margin: 0 5px;}
		#navigace ul		{margin-top: 20px; width: 800px}
		#navigace ul li 	{margin: 0 30px; }
		#navigace ul li.another	{margin: 0 50px;}
		#navigace ul li a	{padding: 12px 25px}
		
		
		.results	{width: 900px; margin-top: 50px;  }
		.result		{padding: 26px; width: 200px; margin: 20px}
		.resultnumber, .resultpercent		{color: #005F88; font-weight: bold}
		.resultnumber		{font-size: 80px; }
		.resultpercent		{font-size: 48px}
		
		.testimonials1	{width: 420px; margin-top: 40px}
		.testimonials2	{width: 920px; margin-top: 40px}
		.testimonial	{width: 420px; min-height: 264px;padding: 30px 0 0 40px;}
		.testimonial p	{width: 380px;}
		p.name	{margin-top: 20px}
		
		
		.sedy, .bily	{padding-bottom: 60px;}
		#footer	{/*bottom: 20px; font-size: 14px; width: 1440px*/}
		#footer-content	{width: 850px; margin: auto; margin-top: 35px;}
		#footer-text, #footer-text p	{width: 615px;}
		#avatar, #avatar img	{width: 200px; height: 200px}
		
		ul 		{float: left; margin-top: 60px;}
		#footer-text	{margin-left: 140px}
		#footer-text ul li		{}
		#footer-text ul li a	{padding: 20px 15px; font-size: 18px; }
		#footer-text ul li a.tel	{padding: 20px 30px; }
		#footer-text ul li a.mail	{padding-left: 30px }
		
		ul.diamonds	{width: 820px; height: 120px; margin-top: 40px}
		ul.diamonds li	{width: 25%; height: 120px; line-height: 120px;}
		ul.diamonds li a		{text-decoration: none}
		ul.diamonds li a:hover	{text-decoration: underline}
		
		.faktura	{font-size: 14px; clear: both; padding: 80px 0 20px 0}
		
		.mezera60   {height:60px;}
		.diamond-separator-blue   {height:65px; margin: 60px 0}
		
		}
		
		
		
		





    /* 768px */
    
    
    
    @media (min-width: 768px) and (max-width: 991px) {				
        
		.telo {width: 720px; margin: auto; }
		.top	{height: 60px;}
		.fixed	{height: 45px;}
		.bg	{height: 480px}
		
		.index	{ /*background: #555555 ; */background-size: auto 100%/*auto 500px*/;}
		.logisticbg { height: 550px; background-size: cover}
		.tieto		{ height: 700px; background-size: cover}
		.fluently		{ height: 600px; background-size: cover}
		
		
		.logisticbg img		{max-width: 400px}
		.fluently img		{max-width: 600px; margin-top: 16px}
		.tieto img		{max-width: 500px; margin-top: 16px}

		#logo	{margin-top: 22px; font-size: 18px;}
		#top-menu  	{margin-top: 12px; font-size: 18px;}
		#top-contact	{margin-top: 25px; font-size: 16px;}
		#logo	{width: 300px}
		.topmail	{display:none}
		
		#top-menu	{width: 360px; margin-top: 22px;}
		#top-menu ul	{width: 360px; margin: 0}
		#top-contact .fas	{margin: 0 5px 0 0px;}
		#top-menu ul li a	{padding: 10px 10px; }
		
		.line	{margin-left:10px; margin-right: 0px}
		
		.fixed #logo 	{margin-top: 12px; font-size: 18px;}
		.fixed #top-menu	{margin-top: 9px; font-size: 16px;}
		.fixed #top-contact	{margin-top: 12px; font-size: 16px;}
		
		
		.read, .read p, .content p	{width: 700px; margin:auto; }
		.content h3 {width: 700px; margin: 30px auto 10px auto; }
		.content img {margin-top: 50px; max-width: 700px}
		
		.levy  {margin: 40px 40px 0 0}
		.levy-cs  {margin: 0px 40px 0 0}
		
		.pravy p, .pravy-cs p {width: 600px; margin: 0}
		.pravy ul li, .pravy-cs ul li {width: 550px; margin: 0}
		.pravy-cs ul li {margin-left: 40px; font-size: 18px}
		
		
		.read-wide, .read-wide p {width: 700px; line-height: 1.7em}
		.read p, .read-wide p, .content p	{margin-top: 10px}
		.read-wide p:first-child {margin-top: 40px }
		
		.note	{font-size: 14px; width: 650px}
		#headline-homepage   {top: 100px;}
		#headline		{top: 80px;}
		
		
		
		#headline-homepage h1  {font-size: 42px;}
		#headline h1		{font-size: 42px;}
		
		
		
		h2		{font-size: 32px; padding-top: 60px}
		h2.pink, h2.yellow, h2.blue, h2.green {margin-top: 40px; padding-top: 30px;}
		
		h3		{margin: 30px 0 15px 0; font-size: 21px}
		
		ul		{width: 560px; margin: 5px auto 15px auto; }
		.content		{margin-top: 40px;clear: both }
		.content ul	{margin: 10px auto; width: 650px;}
		.content ul li  {width: 550px}
		
		.read-wide ul	{margin: 10px auto; width: 700px; }
		.read-wide ul li 	{width: 600px}
		
		
		p		{width: 620px; }
		p, ul li		{ font-size: 18px}
		p.big	{font-size: 18px;  width: 700px;}
		#headline-homepage p.intro		{margin: 25px 0;}
		#headline p.intro		{margin: 10px auto;}
		p.perex		{margin-top: 25px;}
		
		.border60	{border-top: 60px solid #ffffff; height: 991px; border-bottom: 37px solid #eeeeee;; margin-top: 40px;}
		.minus60	{margin-top: -41px; clear: none}
		#headline-homepage ul li, #headline ul li		{margin-top: 70px;}
		#headline-homepage ul li a, #headline ul li a	{padding: 20px 30px; font-size: 24px; }
		
	
		/* Reference velká */
		.reference {margin-top: 50px}
		.ritem {width: 330px; height: 250px; margin: 15px; /*overflow:hidden*/}
		.rimg img, .rimg  {width: 340px; height: 242px;}
		.rimg {margin: 10px 0 0 0}
		.ritem h3, .ritem p {width: 440px;}
		.ritem h3 {margin: 10px 0 0 0px}
		.ritem p {font-size: 14px; margin: 5px 0 0 0px}

		.levy, .pravy	{width: 720px; float: left; min-height: 300px}
		.levy-text h3	{margin: 60px 0 10px 45px}
		.levy-text p	{width: 450px; margin: 0 0 5px 75px}
		.pravy-text h3	{margin: 60px 0 10px 45px}
		.pravy-text p 	{width: 450px; margin: 0 0 5px 75px}
		
		.aboutme {width: 650px; margin-top: 60px; 
				background: url("../img/line.png") 14px 2px repeat-y;}
		.about-item {width: 640px;}
		.about-diamond {width: 60px; height: 90px; padding: 5px 0 0 35px; font-weight: 600; background: url("../img/about-grey.png") 5px 3px no-repeat;}
		.about-text {width: 540px;}
		.about-text h3 {margin: 0}
		.about-text p  {margin-top: 5px; width: 540px;}
		
		
		#navigace   {width: 700px;}
		#navigace fas  {margin: 0 5px;}
		#navigace ul		{margin-top: 20px; width: 700px}
		#navigace ul li 	{margin: 0 30px; font-size: 15px}
		#navigace ul li.another	{margin: 0 20px;}
		#navigace ul li a	{padding: 12px 25px}
		
		
		.results	{width: 700px; margin-top: 50px;  }
		.result		{padding: 20px; width: 140px; margin: 20px}
		.resultnumber, .resultpercent		{color: #005F88; font-weight: bold}
		.resultnumber		{font-size: 60px; }
		.resultpercent		{font-size: 36px}
		
		.testimonials1	{width: 420px; margin-top: 40px}
		.testimonials2	{width: 700px; margin-top: 40px}
		.testimonials1 .testimonial	{width: 420px; min-height: 264px;padding: 30px 0 0 40px;}
		.testimonials2 .testimonial	{width: 300px; min-height: 264px;padding: 30px 0 0 40px;}
		.testimonial p	{width: 380px;}
		.testimonials2 p	{width: 300px; }
		p.name	{margin-top: 20px}
		
		
		.sedy, .bily	{padding-bottom: 60px;}
		#footer	{/*bottom: 20px; font-size: 14px; width: 1440px*/}
		#footer-content	{width: 700px; margin: auto; margin-top: 35px;}
		#footer-text, #footer-text p	{width: 600px;}
		#avatar, #avatar img	{width: 200px; height: 200px}
		
		ul 		{float: left; margin-top: 60px;}
		#footer-text	{margin-left: 75px}
		#footer-text ul li		{}
		#footer-text ul li a	{padding: 20px 15px; font-size: 18px; }
		#footer-text ul li a.tel	{padding: 20px 30px; }
		#footer-text ul li a.mail	{padding-left: 30px }
		
		ul.diamonds	{display: none; width: 700px; height: 120px; margin-top: 40px}
		ul.diamonds li	{width: 25%; height: 120px; line-height: 120px;}
		ul.diamonds li a		{text-decoration: none}
		ul.diamonds li a:hover	{text-decoration: underline}
		
		.faktura	{font-size: 14px; clear: both; padding: 80px 0 20px 0}
		
		.mezera60   {height:60px;}
		.diamond-separator-blue   {height:65px; margin: 60px 0}
		
		}
		
		
		
		
		
		
		
		









		
		
		
		@media (min-width: 576px) and (max-width: 767px){				/* 576px */
			
		.telo {width: 520px; margin: auto; }
		.top	{height: 60px;}
		.fixed	{height: 55px;}
		.bg	{height: 560px;}
		.bg	img {max-width: 460px}
		.index	{ /*background: #555555;*/ background-size: cover}
		.logisticbg { height: 550px; background-size: cover}
		.tieto		{ height: 600px; background-size: cover}
		.fluently		{ height: 540px; background-size: cover}

		.logisticbg img		{max-width: 400px}
		.fluently img		{max-width: 520px; margin-top: 16px}
		
		#logo	{margin-top: 22px; font-size: 18px; line-height: 1.35em}
		#top-menu  	{margin-top: 18px; font-size: 18px; float: right}
		#top-contact	{display:none}
		#logo	{width: 155px}
		
		
		#top-menu	{width: 350px; margin-top: 12px;}
		#top-menu ul	{width: 350px; margin: 10px 0 0 40px}
		#top-contact .fas	{margin: 0 5px 0 0px;}
		#top-menu ul li a	{padding: 10px 10px; }
		
		.line	{margin-left:10px; margin-right: 0px}
		
		.fixed #logo 	{margin-top: 5px; font-size: 18px;}
		.fixed #top-menu	{margin-top: 9px; font-size: 16px;}
		.fixed #top-contact	{margin-top: 12px; font-size: 16px;}
		
		
		.read, .read p, .content p	{width: 460px; margin:auto; }
		.content h3 {width: 460px; margin: 20px auto 10px auto; }
		.content img {margin-top: 40px; max-width: 460px}
		
		.levy  {margin: 40px 40px 0 0}
		.levy-cs  {margin: 0px 40px 0 0}
		
		.pravy p, .pravy-cs p {width: 500px; margin: 0}
		.pravy ul li, .pravy-cs ul li {width: 550px; margin: 0}
		.pravy-cs ul li {margin-left: 40px}
		
		
		.read-wide, .read-wide p {width: 500px; line-height: 1.7em}
		.read p, .read-wide p, .content p	{margin-top: 10px}
		.read-wide p:first-child {margin-top: 40px }
		
		.note	{font-size: 14px; width: 500px}
		#headline-homepage   {top: 80px;}
		#headline		{top: 80px;}
		
		
		#headline-homepage h1  {font-size: 36px; width: 500px}
		#headline h1		{font-size: 36px;}
		
		h2		{font-size: 32px; padding-top: 60px}
		h2.pink, h2.yellow, h2.blue, h2.green {margin-top: 20px; padding-top: 30px;}
		
		h3		{margin: 30px 0 15px 0; font-size: 21px}
		
		ul		{width: 560px; margin: 5px auto 15px auto; }
		.content		{margin-top: 40px;clear: both }
		.content ul	{margin: 10px auto; width: 420px;}
		.content ul li  {width: 420px}
		
		.read-wide ul	{margin: 10px auto; width: 500px; }
		.read-wide ul li 	{width: 500px}
		
		
		p		{width: 500px;}
		p, ul li		{ font-size: 18px}
		p.big	{font-size: 18px;  width: 500px;}
		#headline-homepage p.intro		{margin-top: 40px;}
		#headline p.intro		{margin: 10px auto;}
		p.perex		{margin-top: 25px;}
		
		.border60	{border-top: 60px solid #ffffff; height: 991px; border-bottom: 37px solid #eeeeee;; margin-top: 40px;}
		.minus60	{margin-top: -41px; clear: none}
		#headline-homepage ul li, #headline ul li		{margin-top: 70px;}
		#headline-homepage ul li a, #headline ul li a	{padding: 12px 20px; font-size: 18px; }
		
		/* Reference velká */
		.reference {margin-top: 40px}
		.ritem {width: 250px; height: 185px; margin: 5px; overflow:hidden}
		.rimg img, .rimg  {width: 250px; height: 178px;}
		.rimg {margin: 10px 0 0 0}
		.ritem h3, .ritem p {width: 245px;}
		.ritem h3 {font-size: 18px; margin: 10px 0 0 0px}
		.ritem p {font-size: 14px; margin: 5px 0 0 0px}
		



		
		.levy, .pravy	{width: 500px; float: left; min-height: 300px}
		.levy-text h3	{margin: 60px 0 10px 45px}
		.levy-text p	{width: 450px; margin: 0 0 5px 75px}
		.pravy-text h3	{margin: 60px 0 10px 45px}
		.pravy-text p 	{width: 450px; margin: 0 0 5px 75px}
		
		.aboutme {width: 420px; margin-top: 40px; 
				background: url("../img/line.png") 14px 2px repeat-y;}
		.about-item {width: 420px;}
		.about-diamond {width: 60px; height: 100px; padding: 5px 0 0 35px; font-weight: 600; background: url("../img/about-grey.png") 5px 3px no-repeat;}
		.about-text {width: 300px;}
		.about-text h3 {margin: 0}
		.about-text p  {margin-top: 5px; width: 300px;}
		
		
		#navigace   {width: 460px;}
		#navigace fas  {margin: 0 5px;}
		#navigace ul		{margin-top: 20px; width: 460px}
		#navigace ul li 	{margin: 0 30px; }
		#navigace ul li.another	{display:none}
		#navigace ul li a	{padding: 10px 15px}
		
		
		.results	{width: 460px; margin-top: 30px;  }
		.result		{padding: 15px; width: 140px; margin: 15px}
		.resultnumber, .resultpercent		{color: #005F88; font-weight: bold}
		.resultnumber		{font-size: 36px; }
		.resultpercent		{font-size: 24px}
		
		.testimonials1	{width: 420px; margin-top: 40px}
		.testimonial	{width: 420px; min-height: 264px;padding: 30px 0 0 40px;}
		.testimonial p	{width: 380px;}
		p.name	{margin-top: 20px}
		
		
		.sedy, .bily	{padding-bottom: 60px;}
		#footer	{/*bottom: 20px; font-size: 14px; width: 1440px*/}
		#footer-content	{width: 450px; margin: auto; margin-top: 35px;}
		#footer-text, #footer-text p	{width: 450px;}
		#avatar, #avatar img	{width: 200px; height: 200px}
		
		ul 		{float: left; margin-top: 60px;}
		#footer-text	{margin-left: 20px}
		#footer-text ul li		{}
		#footer-text ul li a	{padding: 20px 15px; font-size: 18px; }
		#footer-text ul li a.tel	{padding: 20px 30px; }
		#footer-text ul li a.mail	{padding-left: 30px }
		
		ul.diamonds	{display: none}
		
		.faktura	{font-size: 14px; clear: both; padding: 80px 0 20px 0}
		
		.mezera60   {height:60px;}
		.diamond-separator-blue   {height:65px; margin: 60px 0}
		
		}
		
		
		
		
		
		 
    
    
		@media (max-width: 575px) {				/* 320px */
        
			.telo {width: 300px; margin: auto; }
			.top	{height: 60px;}
			.bg	{height: 360px;}
			.bg img	{max-width: 300px;}
			.index	{ /*background: #555555  -200px 0 no-repeat; background-size: cover*/}
			.logisticbg { height: 450px; background-size: cover}
			.tieto, .fluently		{ height: 450px; background-size: cover}
			
			#logo	{margin-top: 15px; font-size: 16px; line-height: 1.5em}
			#top-menu, .topmenu320	{/*display:none*/}  	
			#top-contact	{margin: 25px 0 0 0}
			.topmail		{display:none}
			#logo	{width: 120px}
			.menu320 {display:none} 
			.lang	{margin: 0 0 0 60px}
			
			#top-menu	{width: 160px; margin-top: 15px;}
			#top-menu ul	{width: 260px; margin: 10px 0 0 0}
			#top-contact .fas	{margin: 0 5px 0 0px;}
			#top-menu ul li a	{padding: 10px 10px; }
			
			.fixed #logo 	{margin-top: 5px; font-size: 16px;}
			.fixed #top-menu	{margin-top: 9px; font-size: 16px;}
			.fixed #top-contact	{margin-top: 15px; font-size: 16px;}
			
			
			.read, .read p, .content p	{width: 300px; margin:auto; }
			.content h3 {width: 300px; margin: 20px auto 10px auto; }
			.content img {margin-top: 30px; max-width: 300px}
			
			.levy  {margin: 40px 40px 0 0}
			.levy-cs  {margin: 0px 40px 0 0}
			
			.pravy p, .pravy-cs p {width: 300px; margin: 0}
			.pravy ul li, .pravy-cs ul li {width: 30px; margin: 0}
			.pravy-cs ul li {margin-left: 40px}
			
			
			.read-wide, .read-wide p {width: 300px; line-height: 1.7em}
			.read p, .read-wide p, .content p	{margin-top: 10px}
			.read-wide p:first-child {margin-top: 40px }
			
			.note	{font-size: 12px; width: 300px}
			#headline-homepage   {top: 20px;}
			#headline		{top: 50px;}
			#headline-homepage img  {width: 60px}
			
			#headline-homepage h1  {font-size: 22px; width: 220px}
			#headline h1		{font-size: 24px;}
			
			h2		{font-size: 21px; padding-top: 60px}
			h2.pink, h2.yellow, h2.blue, h2.green {margin-top: 20px; padding-top: 30px;}
			
			h3		{margin: 30px 0 15px 0; font-size: 17px}
			
			ul		{width: 300px; margin: 5px auto 15px auto; }
			.content		{margin-top: 40px;clear: both }
			.content ul	{margin: 10px auto; width: 250px;}
			.content ul li  {width: 250px}
			
			.read-wide ul	{margin: 10px auto; width: 300px; }
			.read-wide ul li 	{width: 300px}
			
			
			p		{width: 300px;}
			p, ul li		{ font-size: 15px}
			p.big	{font-size: 16px;  width: 260px;}
			#headline-homepage p.intro		{margin: 20px 0;}
			#headline p.intro		{margin: 10px auto;}
			p.perex		{margin-top: 25px;}
			
			.border60	{border-top: 60px solid #ffffff; height: 991px; border-bottom: 37px solid #eeeeee;; margin-top: 40px;}
			.minus60	{margin-top: -41px; clear: none}
			#headline-homepage ul li, #headline ul li		{margin-top: 70px;}
			#headline-homepage ul li a, #headline ul li a	{padding: 10px 15px; font-size: 14px; }
			
			/* Reference velká */
			.reference {margin-top: 50px}
			.ritem {width: 300px; /*height: 320px; */margin: 5px; overflow:hidden}
			.rimg img, .rimg, .ritem h3, .ritem p {width: 280px;}
			.rimg {margin: 10px 0 0 10px}
			.ritem h3, .ritem p {margin: 10px 0 0 10px}
			.ritem p {font-size: 14px}
			
			.levy, .pravy	{width: 500px; float: left; min-height: 300px}
			.levy-text h3	{margin: 60px 0 10px 45px}
			.levy-text p	{width: 450px; margin: 0 0 5px 75px}
			.pravy-text h3	{margin: 60px 0 10px 45px}
			.pravy-text p 	{width: 450px; margin: 0 0 5px 75px}
			
			.aboutme {width: 300px; margin-top: 40px; 
					background: url("../img/line.png") 14px 2px repeat-y;}
			.about-item {width: 300px;}
			.about-diamond {width: 60px; height: 120px; padding: 5px 0 0 35px; font-weight: 600; background: url("../img/about-grey.png") 5px 3px no-repeat;}
			.about-text {width: 200px;}
			.about-text h3 {margin: 0}
			.about-text p  {margin-top: 5px; width: 200px;}
			
			
			#navigace   {width: 300px;}
			#navigace fas  {margin: 0 5px;}
			#navigace ul		{margin-top: 20px; width: 500px}
			#navigace ul li 	{margin: 0 10px; }
			#navigace ul li.another	{display: none}
			#navigace ul li a	{padding: 12px 25px}
			
			
			.results	{width: 300px; margin-top: 30px;  }
			.result		{padding: 10px; width: 100px; margin: 10px; font-size: 12px}
			.resultnumber, .resultpercent		{color: #005F88; font-weight: bold}
			.resultnumber		{font-size: 24px; }
			.resultpercent		{font-size: 16px}
			
			.testimonials1, .testimonials2	{width: 300px; margin-top: 0px}
			.testimonial	{width: 280px; min-height: 264px;padding: 20px 0 0 30px;}
			.testimonial p	{width: 240px;}
			p.name	{margin-top: 20px}
			
			
			.sedy, .bily	{padding-bottom: 60px;}
			#footer	{/*bottom: 20px; font-size: 14px; width: 1440px*/}
			#footer-content	{width: 300px; margin: auto; margin-top: 35px;}
			#footer-text, #footer-text p	{width: 300px;}
			#avatar, #avatar img	{width: 200px; height: 200px}
			
			ul 		{float: left; margin-top: 60px;}
			#footer-text	{margin-left: 20px}
			#footer-text ul li		{margin-top: 30px}
			#footer-text ul li:first-child		{width:300px; margin-top: 0px}
			#footer-text ul li a	{padding: 20px 15px; font-size: 14px; }
			#footer-text ul li a.tel	{padding: 10px 15px; }
			#footer-text ul li a.mail	{padding-left: 0px }
			
			ul.diamonds	{display: none}
			
			.faktura	{font-size: 12px; clear: both; padding: 40px 0 20px 0}
			
			.mezera60   {height:60px;}
			.diamond-separator-blue   {height:65px; margin: 60px 0}
			
			}