body {background-color: #dadada; font-family: lato-medium;}
h3 {color: #f68f33; font-family: lato-bold; font-size: 15px; margin: auto;	}
p {margin: 0px 0px 10px 0px;  color: #8e8e8e; font-size: 13px; font-family: lato-medium;}
a {font-family: lato-medium;}
@font-face {font-family: lato-bold; src: url('../fonts/lato-bold.ttf'); }
@font-face { font-family: lato-medium; src: url('../fonts/lato-medium.ttf'); }
	
.clear {clear: both;}			
.page {margin: 40px auto 0px auto; max-width: 1100px; position: relative; background-color: #f1f1f1; width: 96%;}
.lang { max-width: 1100px; width: 96%; margin: 0px auto 0 auto; position: relative; top: -30px;}
.lang ul {list-style-type: none; padding: 0; margin: 0; float: right; margin-right: 50px;}
.lang li {display: inline; padding: 0; margin: 0;}
.lang li a{color: #8e8e8e; text-decoration: none; text-transform: uppercase;}
.lang li:first-child::after { content: ' /';color: #8e8e8e;}
.container {height: 550px;position: relative;}
@media all and (max-width: 1050px) {	.container {height: 450px;}}
@media all and (max-width: 850px) {		.container {height: 350px;}}
@media all and (max-width: 660px) {		.container {height: 250px;}}
@media all and (max-width: 480px) {		.container {height: 200px;}}
@media all and (max-width: 400px) {		.container {height: 170px;}}
@media all and (max-width: 340px) {		.container {height: 150px;}}
@media all and (max-width: 320px) {		.container {height: 130px;}}
.image {height: 100%; width: 100%; background-color: white;background-image: url("../images/zahlavi.png"); background-repeat: no-repeat;
		background-size: 70%; background-position: left;position: absolute;}
.overlay {
	height: 100%; width: 65%; right: 0px; background-image: url(../images/targo.png); background-repeat: no-repeat;
	background-size: auto 101%; position: absolute; background-position: right; z-index: 10;}
@media all and (max-width: 340px) { 
	.overlay {width: 60%;}
}
	
	.navtg {display:none;}
@media all and (max-width: 800px) {
	.targo .nav  {position: static; width: auto; background: none; color: #645e54; text-align: right; display: none; right: 0px; top: 40px;width: 100%; padding-bottom: 10px;}
	.targo .navtg {z-index: +100;position:fixed; top:0; right:0; display:block; height: 50px; width: 50px; font-size: 50px; font-weight: bold; color: black; text-decoration: none;}	
	.targo .nav_bar li{clear:both; border: 0px; text-align:center; width: 100%; box-sizing:border-box; font-size:17px; color:white;}
	.targo .nav_bar li a {color: white; display: block; padding: 0px; margin: 0px; line-height: 15px;}
	.content {padding-top:0px;}
	@media all and (max-width: 330px) {.content {overflow: hidden;}}
	header {height:64px;}
	.targo.visiblenav .nav {display:block; height: 310px; width:100%; position:fixed; background-color: #5c5c5c; top: 64px !important; }
	.targo .login {display:block; clear: both;border-left:none;}
	
	.visiblenav .container, .visiblenav .products, .visiblenav .home, .visiblenav .locations, .visiblenav .services, .visiblenav .working, .visiblenav .principles, .visiblenav .team, .visiblenav .contactus, .visiblenav .years, .visiblenav .space, .visiblenav .footer {display: none;}

	}
	
.nav {width: 100% - 25px; height: 90px; background-color: #727272; position: relative; padding-left: 25px; z-index:1000;}
	.nav a:link {color: white; text-decoration: none;}
	.nav a:visited {color: white; text-decoration: none}
	.nav a:hover {color: #f68f33}
	.nav ul {margin: 0px; padding: 0px; list-style-type: none;}
	.nav li {margin: 0px; display: inline; padding: 0 10px;	}
	.nav li a {padding: 35px 15px; line-height: 90px; }
@media all and (max-width: 1170px) {.nav li a {padding: 35px 10px;}}
@media all and (max-width: 1100px) {.nav li a {padding: 35px 5px;}}
@media all and (max-width: 1000px) {.nav li a {padding: 35px 0px;}}
@media all and (max-width: 920px) {.nav li {padding: 0px 3px;}}
	
.wbg {height:70px;}
.left {float: left; max-width: 100%;}
	
.login { color: white; width: 150px; position: absolute; line-height: 50px; right: 0; top: 20px;
	background-image: url(../images/login.png); background-repeat: no-repeat; background-position: 10px 6px; background-size: 20%; border-left: 1px solid #808080;}
	.login a {text-decoration: none; color: white; padding: 10px 50px;}
	.login a:hover {color: #f68f33}
	
	
.loginopts {display: none; position: absolute; top: 60px; right: 0px; padding: 10px 20px;background-color: #727272;}
.loginopts a {display: block; width: 80px; }
.loginopts.visible {display: block;}

@media all and (max-width: 800px) { .login {top: 0; width: 100px; line-height: 30px;} .login a {padding: 10px;} .loginopts {top: 30px;} }
	
.space {width: 100%; height: 80px; background-color: #e6e6e6; position: relative;}
h1, h2 {	color: #f68f33;font-family: lato-bold;font-size: 45px;margin: 50px 0px 10px 50px;width: 270px;	float: left;line-height: 90%;}	
@media all and (max-width: 430px) {h1,h2 {font-size: 30px;}}
@media all and (max-width: 350px) {h1,h2 {margin-left: 10px;}}
h1 strong, h2 strong {color: #8e8e8e;}

.home .hometext {float: right; width: 90%; max-width: 670px; clear: left; margin: -86px 5% 50px 0; box-sizing: border-box;}
@media all and (max-width: 1150px) {.home .hometext {margin-top: 50px;}}
.home .text {float: left; width: 100%; padding-right: 0px;	box-sizing: border-box; background: white; padding: 30px;}
.home .text p{ font-size: 13px; text-align: justify;}
.home .bullets {float: left;width: 100%;	box-sizing: border-box; background: white; padding: 30px; margin-top: 50px;}
.home .bullets ul {padding: 0; margin: 0;font-size: 13px;}
.home .bullets ul li{padding: 0 0 20px 20px; margin: 0; list-style-type: none; color: #8e8e8e;}
.home .bullets ul li::before{ padding: 0; margin: 0;  content: '▪'; font-size: 30px; color:#f68f33; position: absolute; margin: -11px 0 0 -16px;}

	
	
.products {position: relative;margin: auto;}
.products .scrollpage {margin: 50px 5% 50px 0px;max-width: 630px; width: 90%; background: white;}
.scrollpage {width: 100%; height: 400px;background-color: transparent;float: right;overflow-x: auto;white-space: nowrap;position: relative;}
.scrollpane { width: 9999px; height: 400px;}

.product-img-box {box-sizing: border-box; padding:10px; width:210px; height:200px; float:left; }
.product-img-box { position:relative;}
.product-img {overflow-x: hiden; max-width: 90%; max-height: 90%; margin-left:auto; display:block; margin:auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.text1 {color: #808080;margin: 10px 0px 10px 50px;width: 270px;padding-left: 5px;float:left;clear:left;}	
@media all and (max-width: 370px) {.text1, .targo  .page .left p {width: 90%; margin: 10px 5%;}}

.image2 {height: 358px;width: 270px; max-width: 90%; display: none;background-repeat: no-repeat;background-size: contain;background-position: center;margin: 0px 50px;float:left;clear:left;}		
@media all and (max-width: 350px) { .image2 { margin: 0 5%;}}
.image2.visible {display: block;}
.services {	position: relative;margin: auto;}
.services .left p {color: #808080;margin: 10px 0px 10px 50px;width: 270px;padding-left: 5px;float:left;clear:left;}	
.text2 {font-size: 12px;color: #808080;max-width: 630px; width: 90%; margin: 50px 5% 50px 0px; box-sizing: border-box;padding: 50px 30px 30px 30px;background-color: white;float: right;}

.working {position: relative;margin: auto; padding-bottom: 50px;}
.sponsors {max-width: 690px; width: 90%; height: 520px;margin: 50px 5% 0px 0px;background-color: white;float: right;}
.sponsors .logo-box .subentries {display: none;}
.searched {max-width: 690px; width: 90%; height: 130px;margin: 10px 5% 0px 0px;background-color: white;float: right; background-repeat: no-repeat; background-position-y: 70px;  background-position-x: 20px; background-size: 150px; display: none;}
.scrollpane2 {height: 130px;}
.logo-box {margin: 35px 45px; height: 50px; width: 140px; float: left;box-sizing: border-box; position: relative;}
.page .logo { max-height: 100%; max-width: 140px; position: absolute;}

.principles {position: relative;margin: auto;}
.principles .left p {color: #808080;margin: 10px 0px 10px 50px;width: 270px;padding-left: 5px;float:left;clear:left;}	
.principles .left p strong {font-weight: normal; color: #f68f33;}	
.ecovadis { text-align: center;}
.ecovadis img{max-width: 70%;}
.text3 {font-size: 12px;color: #808080; max-width: 630px; width: 90%; margin: 50px 5% 30px 0px; box-sizing: border-box;padding: 50px 30px 30px 30px;background-color: white;float: right;}
.text3 h3 {text-transform: uppercase;}

.team {position: relative;margin: auto;margin-bottom:20px;}
.nav2 {float: left;clear: left;margin: 50px 0px 0px 0px;padding: 0px;font-family: arial;}
.nav2 ul {list-style-type: none;padding: 0px;margin: 0px 0px 0px 50px;}
@media all and (max-width: 350px) { .nav2 ul {margin-left:10px;} }
.nav2 a:link {color: #727272;text-decoration: none;padding-left: 25px;}
.nav2 a:visited {color: #727272;text-decoration: none;}
.nav2 a:hover {color: #f68f33;background-image: url(../images/elipsa.png);background-repeat: no-repeat;background-size: 15px;background-position: left;}

.search-box {width: 210px;height: 44px;color: #dddddd;background-color: #dddddd;margin: 15px 0px 0px 75px;border: 0px;}
@media all and (max-width: 350px) { .search-box {width: 90%; margin: 15px 5%; } }
.search-column {background-color: #dddddd; border: none;  }
.search-container input#search{background: #dddddd;border: none; position: absolute; margin: 12px 0px;}
.search-icon {background-image: url(../images/lupa.png); height: 30px; width: 30px;  background-repeat: no-repeat; background-size: 80%; float: left; position: relative; margin: 10px 0px 10px 5px;}

.photos {max-width: 697px; width: 90%; margin: 50px 5% 0px 0px;padding: 0px;float: right; min-height:350px; }
.photo {box-sizing: border-box;float: left; margin-right: 6px;margin-bottom: 10px;width: 168px;border: 10px solid white; height: 223px;}

.locations{ height: 680px; background-color: white; box-sizing: border-box; padding: 0px 0px; position: relative;}
/*.map-labels-cs { background:url('../../images/map-labels-cs.png') no-repeat top left; background-size: contain; width: 217px; height: 100px; left:50%; margin-left: -380px; bottom:-10px;  position: absolute; }*/
#index-map{ margin-top: 0px; background: url(../../images/mapa-svet.png?1) white; background-position: center; background-size: contain; background-repeat: no-repeat; float: right; width: 100%; height: 100%; display: block; position: relative; max-height: 503px;}
/*#index-map.cs{background-image: url(../../images/mapa-svet-cs.jpg) }*/
#index-map.detail{background-image: url(../../images/evropa.jpg) }
.map-detail {position: absolute; width: 100%; height: 100%; background-color: white; display: none; text-align: center;}
.map-detail img { max-width: 80%;}
/*.map-detail.visible {display: block;}*/
.locations .point {position: absolute; display: block; width: 128px; height: 128px; left: 50%; margin: 115px 0px 0px -40px;}
/*@media all and (max-width: 825px) {.map-labels-cs {margin-left: -375px;}}
@media all and (max-width: 815px) {.map-labels-cs {width: 200px; bottom: -7px; margin-left: -360px; background-color: white;}}
@media all and (max-width: 800px) {.map-labels-cs {width: 190px; bottom: -4px; margin-left: -350px;}}
@media all and (max-width: 780px) {.map-labels-cs {width: 180px; bottom: -2px; margin-left: -340px;}}
@media all and (max-width: 760px) {.map-labels-cs {width: 170px; bottom: 4px; margin-left: -330px;}}
@media all and (max-width: 730px) {.map-labels-cs {width: 160px; bottom: 8px; margin-left: -315px;}}
@media all and (max-width: 700px) {.map-labels-cs {width: 150px; bottom: 14px; margin-left: -305px;}}
@media all and (max-width: 670px) {.map-labels-cs {width: 140px; bottom: 20px; margin-left: -289px;}}
@media all and (max-width: 640px) {.map-labels-cs {width: 130px; bottom: 26px; margin-left: -276px;}}
@media all and (max-width: 607px) {.map-labels-cs {width: 120px; bottom: 30px; margin-left: -260px;}}
@media all and (max-width: 575px) {.map-labels-cs {width: 110px; bottom: 34px; margin-left: -245px;} .map-detail { margin-left: -150px; margin-top: 50px;}}
@media all and (max-width: 545px) {.map-labels-cs {width: 100px; bottom: 40px; margin-left: -232px;}.locations .point {width: 80px; height: 80px; margin-top: 155px;}}
@media all and (max-width: 515px) {.map-labels-cs {width: 90px; bottom: 46px; margin-left: -218px;}}
@media all and (max-width: 487px) {.map-labels-cs { bottom: 52px; margin-left: -206px;}}
@media all and (max-width: 461px) {.map-labels-cs { bottom: 60px; margin-left: -195px;}}
@media all and (max-width: 440px) {.map-labels-cs { bottom: 60px; margin-left: -185px;}}
@media all and (max-width: 418px) {.map-labels-cs { bottom: 66px; margin-left: -175px;}}
@media all and (max-width: 396px) {.map-labels-cs { bottom: 72px; margin-left: -167px;}}
@media all and (max-width: 380px) {.map-labels-cs {width: 80px; bottom: 80px; margin-left: -160px;}}
@media all and (max-width: 365px) {.map-labels-cs {bottom: 80px; margin-left: -154px;}}
@media all and (max-width: 352px) {.map-labels-cs {bottom: 80px; margin-left: -149px;}}
@media all and (max-width: 343px) {.map-labels-cs {width: 70px; bottom: 80px; margin-left: -142px;}.map-detail { margin-left: -120px; margin-top: 80px;}}
@media all and (max-width: 330px) {.map-labels-cs { bottom: 80px; margin-left: -136px;}}
@media all and (max-width: 315px) {.map-labels-cs { bottom: 80px; margin-left: -128px;}}*/


.contact  {background-color: #dbdbdb;float: right;width: 100%;margin-top: 20px;padding: 10px 0px; height: auto; display: none;}
.contact.visible  {display: block;}
.contactd { display: none;}
.name {width:28%;color: #2b2b2b;font-family: lato-medium;font-size: 11px; box-sizing:border-box; padding: 10px 10px 10px 20px;float: left;}
.adress1 {width:33%;color: #2b2b2b;font-family: lato-medium;font-size: 11px; box-sizing:border-box; padding: 10px;float: left;margin-top:1px}
.tel {width:38%;color: #2b2b2b;font-family: lato-medium;font-size: 11px; box-sizing:border-box; padding: 10px;float: left;}
.phoneicon {padding-left: 20px;}
.phoneicon::before {padding-right: 5px; color: #aaa;}
.emailicon {padding-left: 20px;}
.emailicon::before {padding-right: 5px;color: #aaa;}

.contact a {color: #2b2b2b;}

@media all and (max-width: 600px) {
	.name, .adress1, .tel {width: 100%;padding-left: 10px;}
}

.contactus {position: relative;margin: auto;}

.branches {max-width: 690px; width: 90%;margin: 100px 5% 0px 0px;padding: 10px 0 0px 0; float: right;}
@media all and (max-width: 1140px) {.branches {margin-top: 0px;} }
.branches button {padding: 10px 30px; margin-top: 10px; background-color: #8e8e8e; border: 0px none; color: white; cursor: pointer; margin-right: 10px; text-transform: uppercase;}
.branches .bdet {display: none; color: white; margin-top: 10px; background-color: #8e8e8e; padding: 10px 30px;}
.branches .bdet h3 {color: white; margin-bottom: 10px;}
.branches .bdet address {font-style: normal; white-space: pre-line; float: left; width: 60%;}
.branches .bdet a {color: white;}
.branches .bdet .col2 {float: left; width: 40%;}
.branches .bdet .col3 {float: left; width: 100%; margin-top: 10px;}
.branches .bdet .fa::before {padding-right: 5px;}
.branches .bdet.visible {display: block;}
@media all and (max-width: 700px) {
	.branches button {padding: 10px 20px;}
	.branches .bdet address {width: 100%;}
	.branches .bdet .col2 {width: 100%; margin-top: 10px;}
}
@media all and (max-width: 500px) {
	.branches button {padding: 10px 10px;}
}


.column {max-width: 690px; width: 90%; margin: 10px 5% 50px 0px;padding: 10px 0 30px 0;background-color: #8e8e8e;float: right;}
.formular { display: block; width: 19%; float: left; box-sizing: border-box; color: white;padding-left: 30px; line-height: 34px; margin: none;font-size: 12px;font-family: lato-medium;}
.formulartext {clear: both;display: inline-block;color: white;margin: 10px 0px 0px 30px;font-size: 12px;font-family: lato-medium;}
.columns {background-color: #8e8e8e;border: none; line-height: 30px; width: 80%;margin: 0px 0px 0px 0px;color: white; float: right;}
.message {background-color: #5a5a59;border: none;width: 90%;height: 100px;color: white;margin: 10px 5% 10px 5%; resize: none;}
.hrcontact {width: 90%;padding: none;margin: 0px 5%;background-color: #737373;height: 3px;border: none;	clear: both;}
.send {position: right;color: white;background-color: transparent;border: none;float: right;margin-right: 30px;font-family: lato-medium;}

@media all and (max-width: 700px) {
	.formular {width: 25%;}
	.columns {width: 74%;}
}

@media all and (max-width: 550px) {
	.formular {width: 30%;}
	.columns {width: 69%;}
}

@media all and (max-width: 440px) {
	.formular {width: 35%;}
	.columns {width: 63%;}
}
@media all and (max-width: 380px) {
	.formular {width: 90%;}
	.columns {width: 90%;}
}


.years {position: relative;}
.photos2 {float: right; background-color: white;margin: 50px 5% 50px 0px;max-width: 690px; width: 90%; box-sizing: border-box; padding: 20px 0px;}
.phototext {box-sizing: border-box;width: 25%;float: left;text-align: center;padding: 10px;font-size: 14px;}
.phototext strong {color: #f68f33;font-weight: normal;}
.phototext p {min-height: 70px;}
.photo2 {width: 80%;padding-bottom: 10px;}
.footer {color: #5a5a59;text-align: center;font-size: 12px;font-family: lato-bold;padding-top: 40px;width: 100%;height: 60px;background-color: #e6e6e6;position: relative;}
.footer a {color: #5a5a59;font-family: lato-bold;}

@media all and (max-width: 700px) {
	.phototext {width: 50%; }
}
@media all and (max-width: 400px) {
	.phototext {width: 100%; }
}




/*****************************************************************************/
/*                                  SLIDER                                   */
/*****************************************************************************/

.slidercont { position: absolute; width: 70%;  float: left; height: 100%; overflow: hidden;}
.slider {width: 100%; height: 100%;position: relative; margin: 0;}
.slider img { object-fit: cover; width: 100%; height: 100%;}

.slider .bullets {position: absolute; top: 16px; margin-left: 4px; width: auto; z-index: 20000;}
.slider .bullets.swiper-pagination-bullets .swiper-pagination-bullet { width: 18px; height: 18px; border: 0px none; margin: 7px; border-radius: 9px; cursor: pointer; background: #E3E8EB; opacity: 1; }
.slider .bullets .swiper-pagination-bullet:hover {background-color: #B4ADAD;}
.slider .bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #B4ADAD; cursor: Default;}

@media all and (max-width: 700px) { 
	.slider .bullets {top: 10px;}
	.slider .bullets.swiper-pagination-bullets .swiper-pagination-bullet {width: 14px; height: 14px; margin: 4px; border-radius: 7px;}
}
@media all and (max-width: 480px) { 
	.slider .bullets.swiper-pagination-bullets .swiper-pagination-bullet {width: 10px; height: 10px; margin: 2px; border-radius: 5px;}
}



/*****************************************************************************/
/*                                  OVERLAY                                  */
/*****************************************************************************/

#colorbox #cboxClose{top: 0;right: 0;}
#colorbox #cboxLoadedContent {margin-bottom: 0;}
#overlay {display: none;}
.covinfo {max-width: 450px; padding: 40px 50px; overflow: hidden;} 
.covinfo p { font-family: lato-medium; font-size: 15px; text-align: justify;}
.covinfo a {color: #8e8e8e}
.covinfo strong {font-weight: normal; color: #f68f33;}
.covinfo .logo {float: right; margin-top: -34px;}