html{line-height:1.7}
body{font-family:'UbuntuFont';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;color:#ff002d;line-height:1}
header p{font-size:100%;margin:0;color:#fff;}

@font-face{
    font-family: 'UbuntuFont';
    src: url(../css/fonts/Ubuntu-Regular.ttf) ;
    font-weight: 200;
}
@font-face{
    font-family: 'UbuntuFont';
    src: url(../css/fonts/Ubuntu-Regular.ttf) ;
    font-weight: normal;
}
@font-face{
    font-family: 'UbuntuFont';
    src: url(../css/fonts/Ubuntu-Medium.ttf) ;
    font-weight: medium;
}
@font-face{
    font-family: 'UbuntuFont';
    src: url(../css/fonts/Ubuntu-Bold.ttf) ;
    font-weight: bold;
}



.wrapper{max-width:1200px;background:whitesmoke;max-width:1200px;background-repeat:no-repeat;margin:0 auto;background-position:top;background-size:cover}
.content-area p{font-size:14px;padding:10px 30px 10px 30px;margin:1px;line-height:125%;color:#fff;font-weight: 300;}
.section{max-width:1200px;margin:0 auto}
.container{max-width:1200px;margin:0 auto;overflow:hidden}


.naslov1{text-align:center;font-size:35px;line-height: 1.31; padding-top:77px;}
.graf{font-size:32px;margin:0;padding-left:29px;color:#fff;line-height: 105%;margin-bottom:20px;}
.note{color:#fff;text-align:left;font-size:14px;}

.fotka {display:block;position: absolute;top: 640px;left: 600px;}

.box-a h2{font-size:34px;margin:0;padding-left:29px;color:#d80506;line-height: 105%;text-align:left}

.mob-a{
    display: none;
}

.videowrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videowrapper iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

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

.col-xs-12{width:100%}
.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:16.662%}
.col-xs-1{width:8.332%}

.hide{display:block}
.hide2{display:none}

sup {font-size:16px; color:#fff;}

@media screen and (min-width:748px){
	.row{margin-bottom:0}
	.col{padding:0;}
	.col1{padding:.4em 5em 1em 5em;}
	.col3{padding:10px 50px 10px 50px;}
	
	.col-sm-12{width:100%}
	.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:16.662%}
	.col-sm-1{width:8.332%}
}

@media screen and (min-width:1100px){
	.col-md-12{width:100%}
	.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:16.662%}
	.col-md-1{width:8.332%}}
	
@media screen and (min-width:1200px){
	.col-lg-12{width:100%}
	.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:16.662%}
	.col-lg-1{width:8.332%}}
	
.slika{	width:100%;
		float:left;
		
}

.slika1{	width:100%;
		float:left;
		margin-top:100px;
		
}


.slika2{
		width:100%;
		float: left;
margin-top:45px;		
}



.paragraf {float:left;text-align:left;margin:50px 35px 20px 35px;}

	
.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:85%;border:0;height:0;border-top:2px solid #d80506;margin:0 auto}

.box-a .product{position:relative;width:100%;max-width:1200px;height:auto;box-sizing:border-box}
.box-a .product .product-info{width:100%;max-width:100%;height:auto;float:center;}
.box-a .product .product-info .product-content h1{font-size:22px;margin:0;padding-left:29px;color:#fff;line-height: 105%;}


.box-a{position:relative;width:100%;max-width:1200px;margin:0 auto;}
.box-a img{vertical-align:top}
.box-a h3{ font-size:25px;margin:0;padding-left:29px;color:#fff;line-height: 105%;text-align:left;}



.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:1000px){
	.col{padding:10px 30px 10px 30px;}	
	.col {
    width: 100%;
    float:none;
    box-sizing: border-box;
    padding: 0 10px;}	

	.slika{float: none;}
	.slika1{float: none;margin-top:0px;}
	.slika2{float: none;margin-top:0px;}
	.paragraf {
    float: left;
    text-align: left;
    margin: 10px 60px 10px 60px;
}

}


	

@media screen and (max-width:816px){

	
	.row{margin-bottom:0}
	.box-a {width:100%;}
	.box-a .product{margin:0 auto}
	.box-a .product .product-info{width:100%;height:auto;display:block;}	
.box-a .product .product-info .product-content h1{ margin:0;}

	.box-a{margin-bottom:2em}


	.col{padding:5px;}
	.col {
    width: 100%;
    float:none;
    box-sizing: border-box;
    padding: 0 10px;}
	
}

@media screen and (max-width: 750px) {
		.paragraf {
    
    margin: 10px 30px 10px 30px;
}
}



@media screen and (max-width: 670px){
		.naslov1{font-size:29px;}
			.slika{
		
		float:none;
		
}

			.slika1{
		
		float:none;
		
}
			.slika1{
		
		float:none;
		
}
}
	
	@media screen and (max-width: 600px) {
			.box-a h2{text-align: center; padding-left:0px;}
			.box-a h3{text-align: center;padding-left:0px;}}
		
	}

@media screen and (max-width:583px){
	
	.row{margin-bottom:0}
	.col{padding: 10px 30px 10px 30px;}
	.col1{padding: 10px 30px 10px 30px;}
	.col1 {	width: 100%;}
 	
	.box-a {width:100%;}
	.box-a .product{max-width:570px;margin:0 auto}
	.box-a .product .product-info{width:100%;max-width:100%;height:auto;display:block;}
	
.desk-a{
        display: none;
    }
    .mob-a{
        display: block;
    }	
}


@media screen and (max-width: 560px){
		.naslov1 {font-size:25px;}
		
		
}

@media screen and (max-width:520px){
	
			.content-area p {padding: 20px 0px 0px 0px;text-align: justify;}
			.paragraf { margin: 10px 0px 0px 0px;margin-left:0px;}

	}