html{line-height:1.7}
body{font-family:'Roboto',sans-serif;font-size:15px;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p{margin-top:0}
img{max-width:100%;height:auto}
a{text-decoration:none}
header h1{margin:0;font-weight:normal;font-size:638%;font-family:'Roboto',sans-serif;line-height:1}
header p{font-size:100%;margin:0;}

.wrapper{max-width:1200px;max-width:1200px;background-color:#fff;margin:0 auto;background-position:top;background-size:cover}
.section{max-width:1200px;margin:0 auto}
.container{max-width:1200px;margin:0 auto;overflow:hidden}


.slika{float: left;margin-right: 15px;}
.slika1{float: right;margin-right: 15px;margin-top: 15px;}

.naslov2{font-size:28px;line-height: 130%;margin-top: 13px;font-weight: 500;text-align:left;}
.naslov5 {font-size:28px;line-height: 125%;margin-top: 20px;font-weight: 500;text-align:center;}
.naslov21{font-size:28px;line-height: 130%;margin-top: 13px;font-weight: 500;text-align:left;float: left;}

.poz {
		background-image: url('../images/bg.jpg');
		background-repeat: no-repeat;
		background-size: cover;	
		background-position: center;
		

}
.poz1 {
	background-image: url('../images/bg1.jpg');
	background-repeat: no-repeat;
		background-size: cover;	
		background-position: center;
	

}

.poz2 {
	background-image: url('../images/bg2.jpg');
	background-repeat: no-repeat;
	background-size: cover;	
	background-position: center;
	

}



.mySlides {display: none}


.slideshow-container {
 
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


.dot {
    cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


.BOX2 {text-align:center;margin-top: 50px;}



.row{margin-bottom:0px}
.col{width:100%;float:left;box-sizing:border-box;padding:0px;}
.col1{width:100%;float:left;box-sizing:border-box;padding:0px}
.col3{width:100%;float:left;box-sizing:border-box;padding:0px}
.col4{width:100%;float:left;box-sizing:border-box;}


.col-xs-12{width:100.662%}
.col-xs-11{width:91.662%}
.col-xs-10{width:83.332%}
.col-xs-9{width:75%}
.col-xs-8{width:66.662%}
.col-xs-7{width:58.331%}
.col-xs-6{width:50%}
.col-xs-5{width:41.662%}
.col-xs-4{width:33.332%}
.col-xs-3{width:25%}
.col-xs-2{width:20%}
.col-xs-1{width:8.332%}



@media screen and (min-width:748px){
	.row{margin-bottom:0}	
    
	.col-sm-12{width:100.662%}
	.col-sm-11{width:91.662%}
	.col-sm-10{width:83.332%}
	.col-sm-9{width:75%}
	.col-sm-8{width:66.662%}
	.col-sm-7{width:58.331%}
	.col-sm-6{width:50%}
	.col-sm-5{width:41.662%}
	.col-sm-4{width:33.332%}
	.col-sm-3{width:25%}
	.col-sm-2{width:20%}
	.col-sm-1{width:8.332%}
}

@media screen and (min-width:1100px){
	.col-md-12{width:100.662%}
	.col-md-11{width:91.662%}
	.col-md-10{width:83.332%}
	.col-md-9{width:75%}
	.col-md-8{width:66.662%}
	.col-md-7{width:58.331%}
	.col-md-6{width:50%}
	.col-md-5{width:41.662%}
	.col-md-4{width:33.332%}
	.col-md-3{width:25%}
	.col-md-2{width:20%}
	.col-md-1{width:8.332%}}
	
@media screen and (min-width:1200px){
	.col-lg-12{width:100.662%}
	.col-lg-11{width:91.662%}
	.col-lg-10{width:83.332%}
	.col-lg-9{width:75%}
	.col-lg-8{width:66.662%}
	.col-lg-7{width:58.331%}
	.col-lg-6{width:50%}
	.col-lg-5{width:41.662%}
	.col-lg-4{width:33.332%}
	.col-lg-3{width:25%}
	.col-lg-2{width:20%}
	.col-lg-1{width:8.332%}}
	


.pasus {    background: linear-gradient(to right, #f749a1, #a520d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;}
	
	.pasus1{    background: linear-gradient(to right, #5eccfd, #23c9aa);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: bold;}

.pasus2{background: linear-gradient(to right, #fd63f7, #9669fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;}


	
.item a{padding:2%;overflow:hidden;width:540px}
.item img{max-width:100%;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}
.item:hover img{-moz-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.04)}
hr{    width: 32px;
    height: 8px;
    border-radius: 4px;
	background: linear-gradient(to right, #5eccfd, #23c9aa);
	float: left;
}

.paragraf{margin: 10% 5% 10%;text-align: left;}

.box-c .product{position:relative;width:100%;max-width:600px;height:auto;overflow:hidden;transition:all .1s ease-in-out;box-sizing:border-box}
.box-c p{font-size:18px;padding:0;margin: 5% 0% 7% 0%;line-height:125%;color:#fff;text-align:center;font-weight: 300;}


.box-c4 .product{position:relative;width:100%;max-width:280px;height:auto;overflow:hidden;transition:all .1s ease-in-out;box-sizing:border-box}
.box-c4 p{font-size:18px;padding:0;line-height:125%;color:#000;text-align:left;font-weight: 400;}



.box-c1 .product{position:relative;width:100%;max-width:600px;height:auto;margin:1em 0;overflow:hidden;border: none;transition:all .1s ease-in-out;box-sizing:border-box}
.box-c1 .product .product-info{width:100%;max-width:100%;height:auto;float:center;}
.box-c1  p{font-size:18px;padding:0;margin:1px;line-height:1.3em;text-align:left;color:#fff;}
.box-c1 h3{text-align:left;color:#fff; font-size:26px;font-weight:600;color:#fff;line-height: 125%;}
.box-c1 h2{text-align:left;color:#fff; font-size:14px;font-weight:400; margin:0;}
.box-c1 h4{color:#fff;text-align: left; font-size: 26px;font-weight: 400;margin-bottom: 20px;}


.box-c3 .product{position:relative;width:100%;max-width:570px;height:auto;margin:1em 0;overflow:hidden;border: none;transition:all .1s ease-in-out;box-sizing:border-box}
.box-c3 h3{text-align:center;color:#fff; font-size:26px;font-weight:400; margin:0;line-height: 125%;margin-top: 7%;}




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





@media screen and (max-width: 788px){
  .col1 {
    width: 33.333%;
    float: left;
    box-sizing: border-box;
    padding: 0px;
}

.box-c1 h3 {font-size: 30px;}

}




@media screen and (max-width:568px) {
        .naslov2 {font-size: 22px;}        
        .box-c4 p {font-size: 16px;}
        .box-c1 h3{text-align: center;}


}
@media screen and (max-width:540px){
	
	.col3{padding: 10px 10px 10px 10px;}
	.col3 {	width: 100%;}

 
    .paragraf{margin:  0 0 0 0;}


	}
	
@media screen and (max-width: 480px) {
		.naslov2 {
    font-size: 22px;

   
}

.naslov2b {font-size: 20px;}

}


@media screen and (max-width: 370px){
  .col1 {
    width: 100%;
    float: none;
    box-sizing: border-box;
    padding: 0px;
}
.box-c1 h3{font-size: 25px;margin-bottom: 0;}
.box-c4 p{text-align: center;margin-top: -18px;}
hr{float:none;margin-bottom:0px;}
.naslov2{font-size: 18px;}
.slika{margin-right: 7px;}
.naslov5{font-size: 25px;}
.naslov21{font-size: 25px;}
.BOX2{margin-top: 0;}

}