@font-face {
	font-family: "Flaticon";
	src: url("../fonts/flaticon.eot");
	src: url("../fonts/flaticon.eot#iefix") format("embedded-opentype"),
	url("../fonts/flaticon.woff") format("woff"),
	url("f../fonts/laticon.ttf") format("truetype"),
	url("../fonts/flaticon.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
	font-family: Flaticon;
      


}.flaticon-book137:before {
	content: "\e000";
}
.flaticon-books19:before {
	content: "\e001";
}
.flaticon-bricks3:before {
	content: "\e002";
}
.flaticon-building86:before {
	content: "\e003";
}
.flaticon-businessman234:before {
	content: "\e004";
}
.flaticon-compass58:before {
	content: "\e005";
}
.flaticon-construction14:before {
	content: "\e006";
}
.flaticon-construction17:before {
	content: "\e007";
}
.flaticon-crane8:before {
	content: "\e008";
}
.flaticon-documents11:before {
	content: "\e009";
}
.flaticon-drawing7:before {
	content: "\e00a";
}
.flaticon-email20:before {
	content: "\e00b";
}
.flaticon-facebook51:before {
	content: "\e00c";
}
.flaticon-facebook52:before {
	content: "\e00d";
}
.flaticon-facebook7:before {
	content: "\e00e";
}
.flaticon-google114:before {
	content: "\e00f";
}
.flaticon-google115:before {
	content: "\e010";
}
.flaticon-hammer40:before {
	content: "\e011";
}
.flaticon-helmet6:before {
	content: "\e012";
}
.flaticon-home34:before {
	content: "\e013";
}
.flaticon-house129:before {
	content: "\e014";
}
.flaticon-house162:before {
	content: "\e015";
}
.flaticon-house7:before {
	content: "\e016";
}
.flaticon-industrial1:before {
	content: "\e017";
}
.flaticon-industrial2:before {
	content: "\e018";
}
.flaticon-industry:before {
	content: "\e019";
}
.flaticon-industry1:before {
	content: "\e01a";
}
.flaticon-industry2:before {
	content: "\e01b";
}
.flaticon-mechanic3:before {
	content: "\e01c";
}
.flaticon-more14:before {
	content: "\e01d";
}
.flaticon-paper98:before {
	content: "\e01e";
}
.flaticon-pen38:before {
	content: "\e01f";
}
.flaticon-ruler6:before {
	content: "\e020";
}
.flaticon-small71:before {
	content: "\e021";
}
.flaticon-social21:before {
	content: "\e022";
}
.flaticon-social38:before {
	content: "\e023";
}
.flaticon-social5:before {
	content: "\e024";
}
.flaticon-social71:before {
	content: "\e025";
}
.flaticon-social92:before {
	content: "\e026";
}
.flaticon-squares7:before {
	content: "\e027";
}
.flaticon-tower22:before {
	content: "\e028";
}
.flaticon-triangular45:before {
	content: "\e029";
}
.flaticon-triangular46:before {
	content: "\e02a";
}
.flaticon-twitter43:before {
	content: "\e02b";
}
.flaticon-twitter44:before {
	content: "\e02c";
}
.flaticon-wall20:before {
	content: "\e02d";
}
.flaticon-worker7:before {
	content: "\e02e";
}
.flaticon-worker8:before {
	content: "\e02f";
}

html {
font-family: 'Open Sans Condensed', sans-serif;
max-width: 1024px;
margin: 0 auto;

}
.container{
padding: 0 6px;
}

main {
    display:block;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	font-weight: 300;
	font-size: 1em;
}
 

/* Nav */
nav {
    position:relative;
    opacity: 1; 
	z-index: 1;
	
}
nav ul {

	position: relative;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	margin: 40px 0 10px auto;
	padding: 0;
	max-width: 400px;
	list-style: none;
	-ms-box-orient: horizontal;
	-ms-box-pack: right;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	
	
}

nav ul li {
	position: relative;
	z-index: 1;
	display: block;
	padding-bottom: 8px;
	text-align: center;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background-color: rgba(255,255,255,0.5);
    margin-right: 5px;
}

nav ul li a {
    top: 3px;
	position: relative;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
    text-transform: uppercase;
    color: black;
    -webkit-transition: top 0.4s;
    -moz-transition: top 0.4s;
    -ms-transition: top 0.4s;
    -o-transition: top 0.4s;
    transition: top 0.4s;

}

nav  span {
    font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 1px;
	font-size: 0.62em;
	text-transform: uppercase;
    cursor: inherit;
}

nav ul li a:hover{
  top:10px;
}

/* Icons */
.icon::before {
	z-index: 10;
	display: inline-block;
	margin: 0 0.4em 0 0;
	vertical-align: middle;
	text-transform: none;
	font-weight: normal;
	font-variant: normal;
	font-size: 1em;
	font-family: "Flaticon";
	line-height: 1;
	speak: none;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* Content */
.content-wrap {
	position: relative;
    margin: 0 auto;
	max-width: 1024px;
	text-align: center;
	display: block;
}


.content-wrap p {
	margin: 0;
	padding: 0.3em;
	color: #666a76;
	font-size: 1em;
	text-align: left;
	font-weight:300;

	line-height:1.5em;
}
.reftext{
position: relative;
display: inline-block;
width: 280px;
height: 300px;
border: 1px solid #bcbec0;
border-radius: 5px;
padding: 20px 10px 5px 10px;
margin: 20px 5px;
vertical-align: top;
}
.reftext >img{
position: absolute;
display: block;
top: -25px;
left: 130px;
border-radius: 50% 50%;
border: 1px solid #bcbec0;

}
.reftext p:first-letter{
margin-left:0;
}  
.content-wrap p:first-letter {
margin-left: 25px;
}
/* Fallback */
.no-js  {
	display: block;
	padding-bottom: 2em;
	border-bottom: 1px solid rgba(255,255,255,0.6);
}




.brend  {

float: left;
margin-top: -30px;
margin-left: 5px;
}

div.telo {

max-width: 1024px;
margin: -125px auto 0;

}


/* Baner */
div.baner {
    position: relative;
    max-width: 100%;
    height: 558px;
    z-index: -1;

}
.tekst{
position:absolute;
width:12em;
top: -21em;
left:2em;
z-index: 1;
 }
.tekst p{
text-align:left;
background-color: rgba(115,65,124,0.70);
color: #fff;
padding: 15px;
margin-bottom: 5px;
}

 .tekst p::first-letter{
 margin:inherit;
 }
.social{
position: relative;
float:right;
z-index: 1;
top:-10em;
 }
.social img{
display:block;
width:90%
}
 
div.baner1{
background:url("../img/o-nama-3.jpg") no-repeat center center;
background-size: 100% auto;

}
div.baner2{
background:url("../img/usluge.jpg") no-repeat center center;
background-size: 100% auto;
   
}
div.baner3{
background:url("../img/reference.jpg") no-repeat center center;
background-size: 100% auto;
   
}
div.baner4{
background:url("../img/contakt.jpg") no-repeat center center;
background-size: 100% auto;  
}


h1,h2{
margin: 1em 1em;
text-align: left;
font-size: 1.6em;
font-weight: 400;
color: #222222;
}

/*********
USLUGE
**********/


.proba {
    margin-right: 15px;
	margin-bottom: 10px;
    padding: 5px;
    height: auto;
    width: auto;
    display: inline-block;
	vertical-align: top;
 }
 .usluge{
 /* background-color: #F7AB8B;*/
 }
.proba a {
margin: 10px auto;
width: 120px;
height: 120px;
font-family: "Flaticon";
 display:block;
 background: #2ABBF6;
 border-radius: 50%;
 transition: all 0.2s linear;
 font-size: 3.5em;
line-height: 2;
text-decoration: none;
color: #222222;
 }
.proba a:hover {
background: #000;
box-shadow: 0 0 0 5px #fff, 0 0 0 8px #000;
 color: #ffffff;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -ms-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
 }
 .proba a:focus {
  color: #ffffff;
 }

div.desc {
  font-weight: normal;
  width: 125px;
  margin: 5px auto;
  }
.newboxes-2, .kontakt{
text-align: left;
word-break: break-all;
}

/******
FOOTER
*******/

/*sertifikati*/
#main{
display:inline-block;
margin: 10px 10px;
}

#main a{ 
display:inline-block;
padding:3px 8px;
color: #ffffff;
background-color:#A8A8B7;
margin: 5px 1.5px;
}
#main span{
margin-bottom: 5px;
display:block;
font-size: 1.2em;
}
#main a:hover{
color: #222222;
}

footer{
display: block;
width: 100%;
border-top: 1px solid #A8A8B7;
margin-bottom: 3px;
margin-top: 12px;
padding-top: 10px;
}

/**********
MAPA
***********/
.google-maps{
position: relative;
display: inline-block;
overflow: hidden;
max-width: 90%;
margin-left: 10px;
border: 1px solid #A8A8B7;
vertical-align:top;
}
/*Contact*/
#page-wrapper {
display: inline-block;
width:25em;
max-width: 80%;
padding: 1em;
padding-top: 0px;
margin-bottom: 20px;
font-weight: 600;
border: 1px solid #A8A8B7;
 }
.adresa{
padding: 5px;
float: right;
}
.adresa p:first-letter{
margin-left: 0;
}
.adkontakt{
margin: 10px;
}

b {
color: #222222;
}
a{
text-decoration: none;
color: #2AB9F0;
}
a:focus {
	outline: none;
	}

.img1{
float: right;
margin: 5px;
}
.img2{
margin: 5px;
float: left;
}
/******
CONTACT
*******/

.field {
  margin: 0.5em 0;
}

label {
  display: block;
  /*margin-top: 1.2em;
  margin-bottom: 0.5em;*/
  color: #999999;
  text-align: left;
}

input {

  width: 90%;
  padding: 0.5em 0.5em;
  font-size: 1em;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
}
textarea:focus, input:focus{
outline:1px solid #222222;
}

textarea {
  width: 90%;
  height: 100px;
  padding: 0.5em 0.5em;
  font-size: 1em;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
}
button {
  display: inline-block;
  border-radius: 3px;
  border: none;
  font-size: 1rem;
  padding: 0.5rem 0.8em;
  background: #4CC3F1;
  border-bottom: 1px solid #498b50;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
  margin: 0;
  width: 100%;
  text-align: center;
}

button:hover, button:focus {
  opacity: 0.75;
  cursor: pointer;
}

button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
/**********
MARQUEE
**********/
.textmarque{
border-top: 1px solid gray;
border-bottom: 1px solid gray;
color:#666a76;
font-size:1.1em;
}
.textmarque p{
margin:0;
padding:3px;
}
.marquee{
overflow: hidden;
}

/***********
media screen
***********/
@media screen and (max-width: 50em) {

.container nav a:before{
		display: none;
	}
.container nav ul{
	margin: 5px o;
	}
	div.baner  p{
font-size:initial;
}
div.baner {
   max-height: 400px;
  }
#main{
display:block;
margin:0px auto;
max-width: 200px;
}
#main a{ 
display:block;
}
.adresa{
float: none;
max-width: 370px;
margin:0 auto;
}
}

@media screen and (max-width: 35em){
div.brend  {
float: initial;
margin-top: 0;
}
nav ul{
margin: 5px auto;
}
.social{
margin:0;
top:-10em;
}
.social img{
width:40%;
}


}