* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

body { color:#303030; background:#fff; padding-top:90px; }



/*------------------------------------------------*/
/*-------------------- GRID ----------------------*/
/*------------------------------------------------*/
.width-1-1,
.width-1-2,
.width-1-3,
.width-1-4,
.width-2-3 { float:left; }

.width-1-1 { width:100%; margin-left:0; margin-right:0; }

.width-1-2 { width:48.4375%; /*460 of 960*/ margin-left:0; margin-right:3.125%; }
* > .width-1-2:nth-of-type(2n) { margin-right:0; }
* > .width-1-2:nth-of-type(2n+1) { clear:left; }

.width-1-3 { width:31.25%; /*300 of 960*/ margin-left:0; margin-right:3.125%; }
* > .width-1-3:nth-of-type(3n) { margin-right:0; }
* > .width-1-3:nth-of-type(3n+1) { clear:left; }

.width-2-3 { width:64.58333333333334%; /*620px*/ }

.width-1-4 { width:22.65625%; /*217.5 of 960*/ margin-left:0; margin-right:3.125%; }
* > .width-1-4:nth-of-type(4n) { margin-right:0; }
* > .width-1-4:nth-of-type(4n+1) { clear:left; }


/*------------------------------------------------*/
/*---------------- CUSTOM FONTS ------------------*/
/*------------------------------------------------*/
body { font-family: 'Montserrat', sans-serif; } /*400,700*/
.font-normal { font-family: 'Montserrat', sans-serif !important; }

.main-nav,
.mobile-nav-wrapper,
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
.pre-footer h2,
.site-footer,
.gallery-button  { /* font-family:'Oswald', sans-serif; font-weight:400; */ }

.main-nav,
.mobile-nav-wrapper,
/*.image-container h1,
.image-container .h1-like,*/
.article-header h1,
.article-header .h1-like,
.gallery-button { font-weight:700; }

.main-nav { letter-spacing:1px; }



/*------------------------------------------------*/
/*-------------------- TYPE ----------------------*/
/*------------------------------------------------*/
body { font-size:15px; line-height:30px; color:#303030; letter-spacing:0.020em; }

h1,
.h1-like { font-size:45px; line-height:60px; font-weight:700; text-align:center; }

h2,
.h2-like { font-size:20px; line-height:35px; margin:0.25em 0; color:#303030; text-transform:uppercase; font-weight:400; }

.intro-text { color:#303030; font-size:20px; line-height:35px; text-align:center; }



/*------------------------------------------------*/
/*--------------- GENERAL STUFF ------------------*/
/*------------------------------------------------*/
a { color:#ff5500; text-decoration:none; }
a:hover { text-decoration:underline; }

hr { border:0; height:5px; width:50px; background:#ff5500; margin:0.5em auto; }

img { max-width:100%; height:auto; }
img.center { display:block; margin-left:auto; margin-right:auto; }

.circle { border-radius:50%; }
img.circle { border:2px solid #ff5500; }

ul.inline { padding:0; }
ul.inline li { display:inline-block; }

.background-black { background:#000; }

.overflow-hidden { overflow:hidden; }

.text-center { text-align:center; }
.uppercase { text-transform:uppercase; }

ul.fancy { padding:0; /*margin:1em 0;*/ margin:0 0 0 0.25em; list-style:none; }
ul.fancy ul.fancy { margin-left:1em; }
/* ul.fancy.bigger { font-size:18px; line-height:24px; } */
/* ul.fancy > li { padding:0.25em 0 0.25em 1.5em; background:transparent url(../img/orange-circle-small.png) 0 0.6em no-repeat; } */
ul.fancy > li { padding:0.25em 0 0.25em 18px; position:relative; }
ul.fancy > li:before { content:""; display:inline-block; width:3px; height:18px; vertical-align:-10%; background:#ff5500; margin-top:2px; margin-right:15px; position:absolute; top:6px; left:0; }
/* ul.fancy.bigger > li { padding:0.5em 0 0.5em 2.5em; background:transparent url(../img/orange-circle.png) 0 0.4em no-repeat; } */

ul.fancy ul { list-style:circle; padding-left:1em; }
ul.fancy ul li:before { display:none; }

.background-orange { background:#ff5500;}

.position-relative { position:relative; }
.position-absolute { position:absolute; }
.position-static { position:static; }

.margin-top-sm { margin-top:1em; }
.margin-right-sm { margin-right:1em; }
.margin-bottom-sm { margin-bottom:1em; }
.margin-left-sm { margin-left:1em; }

.margin-top-md { margin-top:2em; }
.margin-right-md { margin-right:2em; }
.margin-bottom-md { margin-bottom:2em; }
.margin-left-md { margin-left:2em; }

.margin-top-lg { margin-top:4em; }
.margin-right-lg { margin-right:4em; }
.margin-bottom-lg { margin-bottom:4em; }
.margin-left-lg { margin-left:4em; }

.padding-top-sm { padding-top:1em; }
.padding-right-sm { padding-right:1em; }
.padding-bottom-sm { padding-bottom:1em; }
.padding-left-sm { padding-left:1em; }

.padding-top-md { padding-top:2em; }
.padding-right-md { padding-right:2em; }
.padding-bottom-md { padding-bottom:2em; }
.padding-left-md { padding-left:2em; }

.padding-top-lg { padding-top:4em; }
.padding-right-lg { padding-right:4em; }
.padding-bottom-lg { padding-bottom:4em; }
.padding-left-lg { padding-left:4em; }

.bg-light-gray {
	background:#f6f6f6;
}

.vertical-center-inside {
	display:flex;
	flex-direction:column;
	justify-content:center;
}



/*------------------------------------------------*/
/*------------------ JARALLAX --------------------*/
/*------------------------------------------------*/
.jarallax {
    position: relative;
    z-index: 0;
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}



/*-------------------------------------------------------------------*/
/*----------------------------- SLIDE IN ----------------------------*/
/*-------------------------------------------------------------------*/
.fade-in {
  opacity: 0;
}
.come-in {
  transform: translateX(0) translateY(75px);
  opacity: 0;
  animation: come-in 1s ease forwards;
}
.come-in.from-top {
  transform: translateX(0) translateY(-75px);
}
.come-in.from-right {
  transform: translateX(75px) translateY(0);
}
.come-in.from-bottom {
  transform: translateX(0) translateY(75px);
}
.come-in.from-left {
  transform: translateX(-75px) translateY(0);
}
.come-in.from-top-right {
  transform: translateX(75px) translateY(-75px);
}
.come-in.from-bottom-right {
  transform: translateX(75px) translateY(75px);
}
.come-in.from-bottom-left {
  transform: translateX(-75px) translateY(75px);
}
.come-in.from-top-left {
  transform: translateX(-75px) translateY(-75px);
}
.come-in:nth-child(odd) {
  animation-duration: 2s;
  /* So they look staggered */
}
@keyframes come-in {
  to {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}



/*------------------------------------------------*/
/*------------------- HEADER ---------------------*/
/*------------------------------------------------*/
.site-header { width:100%; position:fixed; top:0; z-index:9998; background:#fff; color:#303030; line-height:90px; }
.site-header .content-wrapper { max-width:1100px; }
/* .site-header .background-orange { padding:10px 1em; position:relative; z-index:1; box-shadow:0 3px 8px rgba(0,0,0,0.41); } */
a.homer { float:left; width:225px; height:43px; height:90px; display:block; background:transparent url(../img/logo-header.png) 50% 50% no-repeat; overflow:hidden; text-indent:-100%; }

.main-nav { float:right; list-style:none; padding:0 0 0 10px; margin:0; font-size:12px; text-transform:uppercase; }
.main-nav li { display:inline-block; /*padding:0 0.5em;*/ line-height:80px;  }
.main-nav li:last-child { border-right:none;  }
.main-nav a { color:#303030; padding:0 0.75em; display:inline-block; border-bottom:5px solid transparent; }
.main-nav a.current,
.main-nav a:hover { /* color:#ff5500;*/ text-decoration:none; border-bottom:5px solid #ff5500; }

.main-nav .separator {
	width:1px;
	margin:0 10px;
	height:50px;
	background:#ff5500;
	vertical-align:-25%;
}
body.hr .lang-selection-hr { display:none; }
body.en .lang-selection-en { display:none; }

.mobile-nav-trigger { display:none; width:38px; height:90px; margin:0 0 0 0.5em; background:transparent url(../img/mobile-nav-icon.png) no-repeat 50% 50%; float:right; text-indent:-100%; overflow:hidden; }

.mobile-nav-wrapper { position:fixed; top:90px; right:0; bottom:0; left:0; overflow-y:auto; z-index:100; background:#000; padding-left:0; display:none; line-height:3; font-size:14px; text-align:center; text-transform:uppercase; }
.mobile-nav-wrapper > ul { list-style:none; padding:0; margin:0; border-top:1px solid #000; background:#292929; }
.mobile-nav-wrapper li { display:block; }
.mobile-nav-wrapper li + li { border-top:1px solid #ccc; }
.mobile-nav-wrapper li.lang-selection { border-top:0 none; }
.mobile-nav-wrapper li.separator { display:block; border:0 none; height:3px; background:#ff5500; }
/*.mobile-nav-wrapper .lang-selection { background:#ff5500; }
.mobile-nav-wrapper .lang-selection a:hover { background:#ff5500; }*/
.mobile-nav-wrapper li a { display:block; padding:0 0.5em; color:#fff; text-decoration:none; }
.mobile-nav-wrapper li a:hover { background:#ff5500; color:#fff; }

body.mobile-nav-opened { overflow:hidden; }

/*
.language-bar-wrapper { position:fixed; width:100%; top:77px; }
.language-bar { position:absolute; padding:41px 0 0; top:0; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,0.41), inset 0 3px 5px -3px rgba(0,0,0,0.41); transition:top 300ms ease; z-index:0; border-radius:0 0 10px 10px; max-width:130px; }
.language-bar:hover { top:38px; }
.language-bar .menu-title { color:#ff5500; display:block; float:left; text-align:center; width:100%; margin:3px 0; }
.language-bar ul { margin:0; padding:0; list-style:none; }
.language-bar ul li { display:block; width:36px; margin:5px 10px; float:left; text-align:center; height:23px; }
.icon_hr,
.icon_en { display:inline-block; width:36px; height:24px; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; overflow:hidden; text-indent:-9999px; }
.icon_hr { background-image:url(../img/flag-cro.png); }
.icon_hr:hover,
body.hr .icon_hr { background-image:url(../img/flag-cro-hover.png); }
.icon_en { background-image:url(../img/flag-eng.png); }
.icon_en:hover,
body.en .icon_en { background-image:url(../img/flag-eng-hover.png); }
*/

.language-list {
	list-style:none;
	padding:0;
	margin:0;
}
.language-list li {
	display:inline-block;
}

.mobile-language-bar { display:none; position:static; list-style:none; /*height:55px;*/ margin:0; width:auto; text-align:center; padding:0; background:#fff; padding:0.5em;border-radius:0 0 10px 10px; box-shadow:0 0 8px rgba(0,0,0,0.7); }
.mobile-language-bar li { display:inline-block; line-height:24px; margin:0 0.5em; }
.mobile-language-bar li a { vertical-align:top; }



/*------------------------------------------------*/
/*-------------- IMAGE CONTAINER -----------------*/
/*------------------------------------------------*/
.image-container { /*background-color:#fff;*/ background-repeat:no-repeat; background-position:50% 50%; /*background-size:cover;*/ width:100%; height:340px; /*text-align:center; padding:2em;*/ }
.home .image-container { height:600px; }
/*.image-container h1 { border-left:5px solid #ff5500; padding-left:10px; }*/
.image-container > .content-wrapper { width:100%; }
.image-container h1 { color:#fff; text-align:left; margin:10px 0; }
.image-container h1:before { content:""; display:inline-block; height:46px; margin-top:5px; width:5px; background:#ff5500; margin-right:10px; float:left; }
.image-container .intro-text,
.image-container p { color:#fff; font-size:15px; line-height:30px; text-align:left; }
.article-header { width:100%; text-align:center; margin-bottom:2em; padding:0 1em; }
.article-header h1,
.article-header .h1-like { /*color:#fff;*/ font-size:64px; line-height:1.2em; text-transform:uppercase; display:inline-block; margin:0.5em auto 0; border-bottom:1px solid #fff; padding-bottom:5px; }
.article-header { /*margin:5px 0 0 0;*/ font-size:18px; line-height:24px; }
.article-header p a { font-weight:bold; color:#ff5500; }

.home .image-container { background-image:url(../uploads/backgrounds/home.jpg); }
.image-container.contact { background-image:url(../uploads/backgrounds/contact.jpg); }
.image-container.machining { background-image:url(../uploads/backgrounds/machining.jpg); }
.image-container.products { background-image:url(../uploads/backgrounds/products.jpg); }
.image-container.products-paper { background-image:url(../uploads/backgrounds/products-paper.jpg); }
.image-container.products-cardboard { background-image:url(../uploads/backgrounds/products-cardboard.jpg); }
.image-container.products-wood { background-image:url(../uploads/backgrounds/products-wood.jpg); }
.image-container.products-food { background-image:url(../uploads/backgrounds/products-food.jpg); }
.image-container.products-plastic { background-image:url(../uploads/backgrounds/products-plastic.jpg); }
.image-container.products-packaging { background-image:url(../uploads/backgrounds/products-packaging.jpg); }
.image-container.products-metal { background-image:url(../uploads/backgrounds/products-metal.jpg); }
.image-container.fairs { background-image:url(../uploads/backgrounds/fairs.jpg); }
.image-container.waterjet { background-image:url(../uploads/backgrounds/waterjet.jpg); }
.image-container.about { background-image:url(../uploads/backgrounds/about-us.jpg); }

.image-container.footer { height:430px; background-image:url(../uploads/backgrounds/footer.jpg); }



/*------------------------------------------------*/
/*----------- HOMEPAGE AND CATEGORY --------------*/
/*------------------------------------------------*/
.post-box { margin-bottom:6em; text-align:center; padding:0; }
.post-box h2 {  margin:1em 0 0.5em 0; }
.post-box h2 a { color:#303030; text-decoration:none; transition:300ms ease all; }
.post-box h2 a:hover { color:#ff5500; }
.post-box p { text-align:left; }
.post-box .image-wrapper { display:block; border:1px solid #d7d7d7; }
.post-box.no-border .image-wrapper { border:0 none; }
.post-box .image-wrapper img { width:100%; }
.post-box .excerpt { text-transform:uppercase; color:#ff5500; }
.post-box .read-more { margin:0.25em 0 0.5em 0;  margin-top:25px; }
.post-box .read-more:hover {  }

a.btn,
.btn { display:inline-block; font-weight:bold; font-size:15px; color:#fff; background:#ff5500; text-transform:uppercase; padding:5px 14px; transition:all 300ms ease;  }
a.btn:hover,
.btn:hover { background:#303030; text-decoration:none; }


/*------------------------------------------------*/
/*------------------ CONTENT ---------------------*/
/*------------------------------------------------*/
.the-content,
.content-wrapper { margin-left:auto; margin-right:auto; max-width:980px; padding-left:10px; padding-right:10px; }
.the-content > article > *:first-child { margin-top:0; }
.the-content > article > *:last-child { margin-bottom:10px; }
.the-content > article > ul.gallery,
.the-content > article > .read-more { margin-bottom:0; }

.the-content { padding-top:4em; padding-bottom:4em; }
.the-content > article { /* padding:20px 20px 10px 20px; */ }

.featured-image-container { width:100%; position:relative; margin:1.5em 0; }

.bg-1-wrapper {
	background:url(../img/bg-1.jpg) 50% 100% no-repeat;
}
.bg-2-wrapper {
	background:url(../img/bg-2.jpg) 50% 0 no-repeat;
}
.bg-3-wrapper {
	background:url(../img/bg-3.jpg) 50% 100% no-repeat;
}



/*------------------------------------------------*/
/*-------------- ABOUT -> FLAGS ------------------*/
/*------------------------------------------------*/
ul.flags { list-style:none; padding:0; }
ul.flags li { line-height:35px; margin-bottom:0.75em; }
ul.flags .flag { display:inline-block; width:60px; height:35px; margin-right:1em; vertical-align:middle; background-image:url(../img/flags.png); background-repeat:no-repeat; border:1px solid #fff; box-shadow:0 2px 3px 1px #aaa; }
ul.flags .flag-1 { background-position:0 0; }
ul.flags .flag-2 { background-position:-60px 0; }
ul.flags .flag-3 { background-position:-120px 0; }
ul.flags .flag-4 { background-position:-180px 0; }
ul.flags .flag-5 { background-position:-240px 0; }
ul.flags .flag-6 { background-position:-300px 0; }
ul.flags .flag-7 { background-position:-360px 0; }
ul.flags .flag-8 { background-position:-420px 0; }
ul.flags .flag-9 { background-position:-480px 0; }
ul.flags .flag-10 { background-position:-540px 0; }
ul.flags .flag-11 { background-position:-600px 0; }
ul.flags .flag-12 { background-position:-660px 0; }
ul.flags .flag-13 { background-position:-720px 0; }
ul.flags .flag-14 { background-position:-780px 0; }
ul.flags .flag-15 { background-position:-840px 0; }
ul.flags .flag-16 { background-position:-900px 0; }
ul.flags .flag-17 { background-position:-960px 0; }
ul.flags .flag-18 { background-position:-1020px 0; }
ul.flags .flag-19 { background-position:-1080px 0; }
ul.flags .flag-20 { background-position:-1140px 0; }
ul.flags .flag-21 { background-position:-1200px 0; }
ul.flags .flag-22 { background-position:-1260px 0; }
ul.flags .flag-23 { background-position:-1320px 0; }
ul.flags .flag-24 { background-position:-1380px 0; }
ul.flags .flag-25 { background-position:-1440px 0; }
ul.flags .flag-26 { background-position:-1500px 0; }
ul.flags .flag-27 { background-position:-1560px 0; }
ul.flags .flag-28 { background-position:-1620px 0; }
ul.flags .flag-29 { background-position:-1680px 0; }
ul.flags .flag-30 { background-position:-1740px 0; }


/*------------------------------------------------*/
/*-------------------- MAP -----------------------*/
/*------------------------------------------------*/
iframe.map { width:100%; display:block; margin:1em auto 0 auto; }
iframe.map.narrow { width:80%; }

iframe.map {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
	  -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */
	  -webkit-backface-visibility: hidden;  /* Fix for transition flickering */
}



/*------------------------------------------------*/
/*------------------ GALLERY ---------------------*/
/*------------------------------------------------*/
ul.gallery { list-style:none; padding:0; margin-bottom:0.75em; }
ul.gallery li.width-1-3 { width:32.608695652173914%; /*300px*/ margin-right:1.0869565217391304%; /*10px*/ margin-bottom:1.0869565217391304%; }
ul.gallery > li.width-1-3:nth-of-type(3n) { margin-right:0; }
ul.gallery > li.width-1-3:nth-of-type(3n+1) { clear:left; }
ul.gallery a { display:block; }

.gallery-button { text-transform:uppercase; display:inline-block; color:#fff; background:#ff5500; padding:5px 14px; transition:all 300ms ease; }
.gallery-button:hover { text-decoration:none; background:#000; }

.gallery-item {	border:1px solid #d7d7d7; }
.gallery-item img {	width:100%; }


/*------------------------------------------------*/
/*------------------- FOOTER ---------------------*/
/*------------------------------------------------*/
.pre-footer { /*background:#444; padding:2em 0;*/ }
.pre-footer h2 { /*color:#fff; font-size:38px; line-height:48px;*/ }

.site-footer { color:#fff; background:#000; }

.download-pdf { background:transparent url(../img/pdf-icon.png) no-repeat 50% 100%; padding-bottom:65px; display:inline-block; color:#fff; }
.download-pdf:hover { text-decoration:none; color:#ff5500; }

.download-pdf-wrapper {
	margin-top:10px;
}
.footer-copyright-wrapper {
	margin-top:30px;
}



/*------------------------------------------------*/
/*----------------- RESPONSIVE -------------------*/
/*------------------------------------------------*/
@media (max-width:1080px){
	.main-nav {	font-size:11px;	}
}
@media (max-width:1020px){
	.main-nav { display:none; }
	.mobile-nav-trigger { display:block; }
	.language-bar { display:none; }
	.mobile-language-bar { display:inline-block; }
  .image-container .content-wrapper { padding-left:25px; padding-right:25px; }
}
@media (min-width:1021px){
	.mobile-nav-wrapper { display:none !important; }
}

@media (max-width:860px){
	.site-footer .contact-bar ul { padding-right:0; padding-bottom:90px; background:transparent url(../img/logo-footer.png) no-repeat 50% 98%; }
	.site-footer .contact-bar ul li { display:block; width:100% !important; text-align:center; margin-bottom:0.5em; }
	.triangle { padding-left:0; background:none; }
	.triangle br { display:none; }

	.flags .width-1-3 { width:50%; clear:none; padding-left:0; padding-right:1em; margin:0 0 2% 0; }
}

@media (max-width:660px){
	.the-content .width-1-3,
	.pre-footer .width-1-3,
	.the-content .width-1-2,
	.pre-footer .width-1-2,
	.the-content .width-2-3,
	.pre-footer .width-2-3,
	.the-content .width-1-1 
	.pre-footer .width-1-1,
	.site-footer .width-1-3,
	.width-1-4 { width:96%; margin-left:2%; margin-right:2%; clear:none; padding-left:1em; padding-right:1em; margin-bottom:2%; }

	.flags .width-1-3 { margin:0 0 2% 0; padding-left:0; padding-right:0; }	

	/* this next part separates articles on "cat listings" a bit and resets it back for the last child */
	.the-content > .width-1-3,
	.the-content > .width-1-2,
	.the-content > .width-2-3,
	.the-content > .width-1-1 { margin-bottom:4em; }
	.the-content > .width-1-3:last-child,
	.the-content > .width-1-2:last-child,
	.the-content > .width-2-3:last-child,
	.the-content > .width-1-1:last-child { margin-bottom:2%; }

	ul.gallery li.width-1-3 { display:block; text-align:center; width:50%; margin-left:auto; margin-right:auto; }
	ul.gallery li.width-1-3 { width:48.4%; /*300 of 960*/ margin-left:0; margin-right:3%; text-align:center; padding:0; margin-bottom:3%; }
	ul.gallery > li.width-1-3:nth-of-type(3n) { margin-right:3.125%; }
	ul.gallery > li.width-1-3:nth-of-type(3n+1) { clear:none; }
	ul.gallery > li.width-1-3:nth-of-type(2n) { margin-right:0; }
	ul.gallery > li.width-1-3:nth-of-type(2n+1) { clear:left; }

	.article-header h1,
	.article-header .h1-like { font-size:40px; }

	iframe.map { width:90%; }

	body { padding-top:50px; }
	
	.mobile-nav-wrapper { top:60px;	}
	a.homer { height:60px; }

	.mobile-nav-trigger { margin:0 0 0 0.5em; height:60px; }
	.site-header .background-orange { padding:4px 0.5em; }

	.home .article-header { min-height:0; }

	.site-footer > .content-wrapper .width-1-3 {
		float:none;
		margin:0 auto;
	}
	.site-footer > .content-wrapper .width-1-3 + .width-1-3 {
		margin-top:2em;
	}
  h1,
  .h1-like { font-size:28px; line-height:40px; }
  .image-container h1:before { height:30px; }

  .intro-text { font-size:16px; }
}

@media (max-width:400px){
	/*a.homer { width:66px; background:transparent url(../img/logo-header-narrow.png) 50% 50% no-repeat; }*/
	iframe.map { height:300px; }
}