/*
Theme Name: Prerada plastike i metala Haluzan
Author: COLOR BOX kreativna industrija
Author: http://colorbox.hr/
Version: 1.0
*/
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,strike,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{margin:0;padding:0;border:0;font-weight:400;font-style:normal;text-align:left;font-family:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}ol,ul{list-style:none}blockquote:after,blockquote:before,q:after,q:before{content:""}
a, input, div {outline: 0; -webkit-appearance: none;}

body{font: 62.5%/1.3 'Lato', Helvetica, sans-serif; color: #000; background: #fff; font-weight: 400;}
h1, h2, h3, h4, h5, h6{font: 62.5%/1.3 'Lato', Helvetica, sans-serif; font-weight: 700;}
a:hover {text-decoration: none;}
img{max-width: 100%; width: auto;}
h1{font-size: 2.2em;}
h2{font-size: 2em;}
h3{font-size: 1.8em;}
h4{font-size: 1.6em;}
h5{font-size: 1.4em;}
input, textarea{font: 62.5%/1.3 'Lato', Helvetica, sans-serif;}

.clearfix:before, .clearfix:after{content: "";  display: table;}
.clearfix:after{clear: both;}
.clearfix{*zoom: 1;}

.container{max-width: 1140px; padding: 0 15px; margin: 0 auto;}
#header{min-height: 92px;}
#header .logo{margin: 15px 60px 15px 0; float: left; line-height: 0; max-width:300px;}
#header .homeIcon{float: left; line-height: 0;}
#header .menu{float: right; margin:50px 0 0 0;}
#header .menu > li{display: block; float: left; font-size: 1.6em; font-weight: 700; letter-spacing: 0.005em; padding: 10px 0 15px 0; position: relative; text-transform: uppercase;}
#header .menu > li > a{padding: 0 20px;}
#header .menu > li.menu-item-has-children{background: url(img/menu_arrow.png) no-repeat; background-position: right top;}
#header .menu > li.menu-item-has-children:hover > .sub-menu{display: block;}
#header .menu > li.menu-item-has-children:hover{background: #d7df23;}
#header .menu > li.menu-item-has-children:hover > a{background: #d7df23; color: #fff;}
#header .menu > li > a{color: #000000;}
#header .menu .sub-menu{display: none; position: absolute; top: 46px; left: 0; width: 276px; background: #d7df23; z-index: 9999;}
#header .menu > li.menu-item-has-children > .sub-menu > li{text-transform: uppercase; font-size: 0.835em; line-height: 1.35em; position: relative; padding: 0 10px;}
#header .menu .sub-menu li a{color: #ffffff; border-top: 1px solid #fff; padding: 10px 10px 8px; display: block;}
#header .menu .sub-menu li:first-child > a{border-top:none;}
#header .menu .sub-menu li:hover ul{display: block;}
#header .menu .sub-menu .sub-menu{display:none; position: absolute; left:  276px; top: 0; background: #d7df23; width: 276px;}
#header .menu .sub-menu .sub-menu{font-size: 1em;}
#mobileMenu{display: none;}
#header .container{position: relative;}
#header .search{position: absolute; top: 15px; right: 33px}
#header .search input[type="text"]{padding: 0 47px 0 10px; height: 27px; border:1px solid #000; width: 201px; font-size: 1.5em;}
#header .search input[type="submit"]{border:none; width: 37px; top:0; right: 0; height: 37px; display: block;  position: absolute; background: url('img/s-icon.png') no-repeat;}


@media screen and (min-width: 1024px) and (max-width: 1169px) {
	#header .logo{margin-left: 0; margin-right: 0;}
	#header .homeIcon{display: none;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#header .logo{margin-left: 0; margin-right: 0; max-width:200px;}
	#header .homeIcon{display: none;}
	#header .homeIcon{display: none;}
	#header .menu > li{font-size: 1.2em; padding-top: 14px;}
	#header .sub-menu{top: 45px; width: 200px;}
	#header .sub-menu .sub-menu{left: 200px; width: 200px;}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	#mobileMenu{display: block;}
	#header .homeIcon{display: none;}
	#header .menu{display: none;}
	#header .sub-menu{display:  block; position: relative; width: 100%; top: 0;}
	#header .logo{margin:25px 0 0 13px; max-width: 190px;}
	#header{min-height: 105px;}
	.mobile-menu-icon{display: block; position: absolute; top:38px; right: 24px; cursor: pointer;}
	#mobileMenu .mobileMenu{position: absolute; top: 105px; right: 0; left: 0; z-index: 9999; background:#056839; display: none;}
	#mobileMenu .mobileMenu li a{color:#fff; text-align: center; display: block; text-transform: uppercase; font-size: 1.6em; font-weight: 700; padding: 5px 30px 5px 30px;}
	#mobileMenu .mobileMenu .sub-menu{background: #d9e126; display: none;}
	#mobileMenu .mobileMenu li{border-top:1px solid #fff;}
	#header .search{display: none;}
}

#homeSlider{height: 522px; position: relative;}
#homeSlider .sliderLogo{position: absolute; left: 0; bottom: 0;}
#homeSlider .slide{height: 522px;}
#homeSlider .text{background: url(img/slide-bg.png); position: absolute; top: 159px; right: 0; width: 316px; padding: 28px 80px 17px 25px;}
#homeSlider .text p{color: #fff; font-size: 3em; line-height: 1.2em; letter-spacing: 0.015em; margin: 0 0 18px 0;}
#homeSlider .text span{width: 11px; height: 20px; cursor: pointer; float: left; background:url(img/slider-arrows.png);}
#homeSlider .text span.prev{background-position: top left; margin: 0 0 0 38px;}
#homeSlider .text span.next{background-position: top right; margin: 0 0 0 38px;}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#homeSlider, #homeSlider .slide{height: 300px;}
	#homeSlider .sliderLogo{max-width: 30%;}
	#homeSlider .text p{font-size: 2em;}
	#homeSlider .text{top:90px; width: 260px;}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	#homeSlider .sliderLogo{display: none;}
	#homeSlider{height: 292px;}
	#homeSlider .slide{height: 292px;}
	#homeSlider .text{width: 100%; padding: 0; top: auto; bottom: 0;}
	#homeSlider .text p{padding: 20px 60px 0 15px; font-size: 2.268em;}
	#homeSlider .text span.prev{margin: 0 0 20px 15px;}
}

#ourClients{padding: 21px 0 24px 0; text-align: center;}
#ourClients img{border-left: 1px solid #cccccc; display: inline-block;}
#ourClients img:first-child{border-left: none;}
@media screen and (min-width: 1024px) and (max-width: 1169px) {
	#ourClients .container{width: 994px; margin: 0 auto;}
	#ourClients img{width: 246px;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#ourClients .container{width: 738px; margin: 0 auto;}
	#ourClients img{width:182px;}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	#ourClients{display: none;}
}

#aboutUs{margin:50px 0 0 0;}
#aboutUs .aboutus-triangle{position: absolute; top: 0; right: 0;}
#aboutUs .clearfix{background: #8dc63f; line-height: 0; position: relative;}
#aboutUs .image{float: left; position: relative; width: 44%;}
#aboutUs .text{float: right; width: 56%; position: relative;}
#aboutUs .aboutus-shape{position: absolute; bottom: -115px; right: -105px;}
#aboutUs .aboutus-people{position: absolute; bottom: 0; right: 40px;}
#aboutUs .text h2{font-size: 6.4em; text-align: center; color: #fff; margin: 17px 0 0 0;}
#aboutUs .text p{font-size: 2em; text-align: justify; color: #fff; line-height: 1.2em; padding: 0 20px; font-style: italic; letter-spacing: -0.04em;}
@media screen and (min-width: 1024px) and (max-width: 1169px) {
	#aboutUs .text h2{font-size: 4.8em;}
	#aboutUs .text p{font-size: 1.8em;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#aboutUs .text h2{font-size: 2em;}
	#aboutUs .text p{font-size: 1.4em; margin:7px 0 0 0;}
	#aboutUs .aboutus-people{width: 120px;}
	#aboutUs .aboutus-shape{position: absolute; bottom: -70px; right: -65px; width: 130px;}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	#aboutUs  .container{padding: 0;}
	#aboutUs .aboutus-shape{display: none;}
	#aboutUs .aboutus-people{display: none;}
	#aboutUs .image{width: 100%; float: none;}
	#aboutUs .image img{margin: 0 auto;}
	#aboutUs .aboutus-triangle{width: 60px;}
	#aboutUs .content-image{width: 100%;}
	#aboutUs .text{width: 100%; float: none;}
	#aboutUs .text h2{font-size: 2.9em; margin: 25px 0 15px;}
	#aboutUs .text p{padding: 0 50px 50px; font-size: 1.6em;}
}
.galleryIcon{position:absolute; right:0; bottom:0;}



#proizvodnja{padding: 0 0 45px 0;}
#proizvodnja .text{width: 470px; float: left;}
#proizvodnja h2{font-size: 5.6em; color: #99cc33; margin: 56px 0 79px 40px;}
#proizvodnja h3{font-size: 3.7em; color: #d7df23; margin: 0 0 0 78px;}
#proizvodnja p{font-size: 2.1em; color: #666666; max-width: 400px; line-height: 1.15em; margin: 26px 0 0 80px;}
#proizvodnja a{color: #666; text-decoration:underline;}
#proizvodnja .image{width: 587px; float: right; padding: 168px 0 0 0;}
#proizvodnja .image img{cursor: pointer;}
#proizvodnja  .gallery{position:relative;}
#single  .gallery div{line-height:0;} 
#proizvodnja  .gallery div{line-height:0;}
#productInfo .image .gallery div{line-height:0;}

@media screen and (min-width: 1024px) and (max-width: 1169px) {
	#proizvodnja .image{width: 510px;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#proizvodnja h2{margin: 100px 0 0 0; font-size: 3.4em;}
	#proizvodnja h3{margin: 0 0 0px 0; font-size: 2.4em;}
	#proizvodnja p{margin: 26px 0 0 0; font-size: 1.7em;}
	#proizvodnja .text{width: 50%;}
	#proizvodnja .image{width: 50%; padding-top: 120px;}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	.shadow{display: none !important;}
	#proizvodnja .text{float: none; width: 290px; margin:0 auto;}
	#proizvodnja .image{float: none; width: 100%;}
	#proizvodnja .image img{margin:0 auto; display: block;}
	#proizvodnja h2{font-size: 2.6em; margin: 30px 0 20px; text-align: center;}
	#proizvodnja h3{margin:0 0 15px 0; font-size: 1.68em; text-align: center;}
	#proizvodnja p{margin:0; font-size: 1.5em;}
	#proizvodnja .image{padding: 30px 0 0 0; margin:0 auto;}
	#proizvodnja .container{padding: 0;}
}

#map{height: 408px;}


#contact{padding: 14px 0 28px 0; min-height: 475px;}
#contact .container{position: relative;}
#contact .info{width: 390px; float: right; margin:30px 555px 0 0;}
#contact h2{font-size: 3.53em; color: #8dc642; text-align: center;}
#contact .info h3{font-size: 2.2em; color: #686b64; text-align: center; margin: 28px 0 2px 0;}
#contact .info p{font-size: 1.8em; color: #cccccc; text-align: left; line-height:1.25em;}
#contact .info p a{color: #cccccc;}
#contact .info p.center{text-align: center;}
#contact .info > p{margin:0 0 20px 0;}
#contact .info .item{position: relative; height: 50px;}
#contact .info .item img{display: block; float: left; position: absolute; left: 0; top: 0;}
#contact .info .item p{padding: 12px 0 0 60px;}
#contact .info .item p a{color: #cccccc; font-weight: 700;}
#contact .info .item-1 img{left:7px;}
#contact .info .item-2 img{top:14px; left: 11px;}
#contact .info .item-3 img{top:9px; left: 12px;}
#contact .info .social{padding: 33px 0 0 88px;}
#contact .info .social a{margin:0 16px;}
#contact .contactForm{position: absolute; background:#fff; right: 25px; top: 64px; box-shadow: 2px 3px 51px 0px rgba(0, 0, 0, 0.34); padding: 30px 20px 0; width: 420px;}
#contact .contactForm label{color: #8dc642; font-size: 1.6em; padding: 0 15px; display: block;}
#contact .contactForm input[type="text"], #contact .contactForm input[type="email"]{font-size: 1.6em; padding: 2px 10px 2px; display: block; margin:0 10px 13px; width: 400px; box-sizing : border-box; border:none; border-bottom: 1px solid #cccccc;}
#contact .contactForm textarea{font-size: 1.6em; display: block; margin:5px 10px; padding: 2px 10px; height: 130px; width: 400px; box-sizing : border-box; border:none; border-bottom: 1px solid #cccccc;}
#contact .contactForm input[type="submit"]{display: block; background:#f1f3ee; border:none; width: 100%; height: 70px; text-align: center; cursor: pointer; font-size: 2.26em; margin: 7px 0 0 0;}
#contact .contactForm form{margin: 30px 0 0 0;}
#contact .contactForm h5{text-align: center; position: absolute; bottom: -45px; left: 0; right: 0;}
#contact .contactForm h5 a{font-style: italic; color: #000; font-size: 1.15em;}
#contact .wpcf7-response-output{position: absolute; top: 52px; left: 25px; right: 25px; font-size: 1.2em; font-family: 'Lato', Helvetica, sans-serif; color: #686b64;}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	

	#contact .contactForm{width: 320px;}
	#contact .contactForm input[type="text"], #contact .contactForm input[type="email"]{width: 300px;}
	#contact .contactForm textarea{width: 300px;}
	#contact .contactForm h5{padding: 0 20px; bottom: -65px;}
	#contact .contactForm input[type="submit"]{font-size: 1.6em; height: 54px;}
	#contact .info{float: left; width: 350px}
	#contact .info p{font-size: 1.7em;}
	
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	#map{height: 250px;}
	#contact .info{float: none; width: 290px; margin: 15px auto 0 auto;}
	#contact .contactForm{width: 290px; box-shadow:none; padding: 0; right: 0; position: relative; top: 20px; margin: 0 auto;}
	#contact h2{font-size: 2.3em;}
	#contact .info h3{font-size: 1.5em;}
	#contact .info p{font-size: 1.5em;}
	#contact .info .social img{height: 25px;}
	#contact .contactForm input[type="text"], #contact .contactForm input[type="email"]{width: 270px;}
	#contact .contactForm textarea{width: 270px;}
	#contact .info .item-1 img{width: 30px; top: 10px;}
	#contact .info .item-2 img{width: 25px;}
	#contact .info .item-3 img{width: 25px;}
 	#contact .wpcf7-response-output{bottom: 0; left: 0; right: 0; top: auto;}
 	#contact .contactForm h5{position: relative; padding: 0 30px; }
 	#contact .info .item p{padding-left: 50px;}
}

#footer{min-height: 166px; background:#f1f3ee;}
#footer img{margin: 28px 0 25px 200px;}

@media screen and (min-width: 1024px) and (max-width: 1169px) {
	#footer img{margin-left: 50px;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#footer img{margin-left: 0; width: 250px;}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	#footer{display: none;}
}

#certifications .items{width: 972px; margin: 30px auto 30px;}
#certifications .item{float: left; width: 203px; margin: 0 20px 24px;}
#certifications .item p{font-size: 1.6em; color: #4c4747; text-align: center; font-style: italic; padding: 0 15px; line-height: 1.45em; margin:5px 0 0 0;}
@media screen and (min-width: 1024px) and (max-width: 1169px) {

}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#certifications .items{width: 738px; margin: 30px auto 30px;}
	#certifications .item{width: 203px;}
}
@media screen and (min-width: 540px) and (max-width: 767px) {
	#certifications .items{width: 486px; margin: 0 auto;}
	#certifications .item p{font-size: 1.3em;}
	#certifications .item{width: 203px; margin: 0 20px 24px;}
}
@media screen and (min-width: 320px) and (max-width: 539px) {
	#certifications .items{width: 290px; margin: 0 auto;}
	#certifications .item p{font-size: 1.3em;}
	#certifications .item{width: 125px; margin: 0 10px 24px;}
}




#productPage{padding: 0 0 40px 0;}
#productPage .container{max-width: 1020px;}
#productPage .products .product{width: 237px; float: left; margin: 0 24px 0 0; position: relative; min-height: 230px;}
#productPage .triangle{position: absolute; bottom: 0; right: 0;}
#productPage .products .product a{position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 10;}
#productPage .products .product p{font-size: 1.5em; color: #737373; font-weight: 700; text-align: center; margin: 11px 0 0 0;}
#productPage .products .product .image{border:1px solid #d2d2d2; position: relative;}
.showMore{position: relative; text-align: center; margin: 40px 0 0 0}
.showMore .line{height: 1px; background:#474747; position: absolute; top: 13px; left: 0; right: 0; z-index: -1;}
.showMore a{display: inline-block; text-align: center; background:#fff; font-size: 2em; color: #474747; font-weight: 700; padding: 0 10px;}
.breadcrumb{font-size: 1.6em; color: #474747; text-transform: uppercase; margin: 28px 0 28px 0;}
@media screen and (min-width: 1024px){
	#productPage .products .product:nth-child(4n){margin-right: 0;}
}
@media screen and (min-width: 1024px) and (max-width: 1169px) {
	#productPage .container{max-width: 994px; margin: 0 auto;}
	#productPage .products .product{margin: 0 15px 0 0;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#productPage .container{max-width: 738px; margin: 0 auto;}
	#productPage .products .product{margin: 0 13px 0 0;}
	#productPage .products .product:nth-child(3n){margin-right: 0;}
}
@media screen and (min-width: 540px) and (max-width: 767px) {
	.breadcrumb{font-size: 1.4em;}
	#productPage .products{width: 510px; margin: 0 auto;}
	#productPage .products .product{margin-right: 0;}
	#productPage .products .product:nth-child(odd){margin-right: 36px;}
}
@media screen and (min-width: 320px) and (max-width: 539px) {
	.breadcrumb{font-size: 1.4em;}
	#productPage .products{width: 290px; margin: 0 auto;}
	#productPage .products .product{float: none; margin-left: auto; margin-right: auto;}
}

#single .container{max-width: 1020px;}
#single .products{margin: 20px 0 40px 0;}
#single .product{float: left; margin: 0 20px 0 0; width: 153px; position: relative;}
#single .product a{position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
#single .product:nth-child(6n){margin-right: 0;}
#productInfo .image{border:1px solid #d2d2d2; width: 561px; float: left; position: relative; cursor: pointer;}
#productInfo .image .icon{position: absolute; right: 0; bottom: 0;}
#productInfo .text{float: left; width: 417px; padding: 0 0 0 40px;}
#productInfo .text h2{font-size: 3.785em; font-weight: 700; color: #99cc33; margin: 43px 0 5px 0;}
#productInfo .text p{font-size: 1.8em; color: #99cc33; color:#666666; margin: 0 0 0 5px;}
#productInfo .text li{font-size: 2.1em; color: #99cc33; color:#666666; list-style: url(img/list.png); margin: 0 0 0 25px;}

@media screen and (min-width: 1024px) and (max-width: 1169px) {
	#productInfo .image{width: 535px;}
	#single .products{width: 994px; margin: 0 auto 20px;}
	#single .product{width: 149px;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#productInfo .image{width: 380px;}
	#productInfo .text{width: 330px; padding: 0 0 0 20px;}
	#productInfo .text h2{font-size: 2.8em; margin: 0 0 5px 0;}
	#productInfo .text p{font-size: 1.6em;}
	#productInfo .text li{font-size: 1.8em;}
	#single .products{width: 738px; margin: 0 auto 20px;}
	#single .product{width: 106px;}
}
@media screen and (min-width: 320px) and (max-width: 767px) {
	#productInfo .image{width: 100%;}
	#productInfo .text{width: 100%; padding: 0;}
	#productInfo .text h2{font-size: 2.8em; margin: 25px 0 5px 0;}
	#productInfo .text p{font-size: 1.6em;}
	#productInfo .text li{font-size: 1.8em;}
	#single .product{width: 132px;}
}





#homeSlider, #aboutUs{opacity:0;}
#aboutUs .image{opacity:0;}
#aboutUs .text h2, #aboutUs .text h3, #aboutUs .text p{opacity:0;}
#proizvodnja .text h2, #proizvodnja .text p{opacity:0;}
#proizvodnja  .image{opacity:0;}






form .hidden{display:none;}