@charset "utf-8";


#header ul li { display: inline-block; vertical-align: middle; text-align: left; padding: 0 10px; }
#header ul li:first-child:before { content: ""; background: url(../obr/phone_icon.png) no-repeat left center; display: inline-block; vertical-align: middle; width:20px; height:18px; background-size: contain; margin-right: 8px; }

#header ul li:last-child:before { content: ""; background: url(../obr/email_icon.png) no-repeat left center; display: inline-block; vertical-align: middle; width:16px; height:16px; background-size: contain; margin-right: 8px; }


/****************** logo + menu *********************/
a.logo > img { max-width:50%; }

/****************** header certifikaty *********************/
ul.header-certifikaty li { display: inline-block; vertical-align: middle; padding: 0 30px; position: relative;}
ul.header-certifikaty li:last-child, ul.header-certifikaty li + li + li { padding-right: 0; }
ul.header-certifikaty li:before { content: ""; background: url(../obr/fajka_icon.png) no-repeat left center; display: inline-block; vertical-align: middle;  width:35px; height: 35px; background-size: contain; position: absolute; left:-10px; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%);}


.menu { width:100%; z-index:600; white-space:nowrap; margin: .3em 0; }
.menu ul:first-child { width: 100%; vertical-align: middle; max-width: 100%;  z-index:999; }
.menu ul:first-child > li > a { position:relative; }
.menu ul li { display:inline-block; padding:0 8px; position: relative; }
.menu ul li a { display:block; text-align:center; padding:0 6px; font-size:14px; font-weight:normal; letter-spacing:1px; color:#fff; font-weight: bold; }
.menu ul li a:hover, .menu ul li a.active { color:#56a5d6 }

.menu ul:first-child > li > a.sub:after { content:url("../obr/arrow_menu.png"); display:inline-block; vertical-align:middle; -moz-transform:scale(0.40); transform:scale(.40); -webkit-transform:scale(.40); }

/**** submenu ***/
.menu ul li > ul.submenu { display:none;  }
ul.submenu { position:absolute; min-width: 200px; left: 50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%);  top:40px; border-top:4px solid #56a5d6; border-bottom:4px solid #56a5d6; background:#28384d; z-index:999;  }
ul.submenu:before { content:""; position:absolute; top:-15px; left:50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 0 10px 14px 10px; border-color: transparent transparent #56a5d6 transparent;  }
ul.submenu > li { display:block; position: relative; border-bottom:1px solid #56a5d6; padding:8px 4px;  }
ul.submenu > li:before { position: absolute; left:10px; top: 50%;  content:""; background: url(../obr/arrow_slider_right.png) no-repeat left center; width: 8px; height: 8px;  vertical-align: middle; background-size: contain; transform: translateY(-50%)}
ul.submenu li:last-child { border:none; }
ul.submenu > li > a { color:#fff; text-transform:none; font-weight:normal; text-align:left; font-size:14px; letter-spacing:.4px; padding-left: 20px;  }

.menu ul:first-child > li:last-child { padding-right: 0; }

a.fb { position: relative; }
a.fb:before { content: ""; position: absolute; background: url(../obr/fb_icon.png) no-repeat center center;background-size:20%; border: 1px solid #ccc; padding: 12px; top:75%; right: 0;  }
a.fb:hover:before { border-color: #56a5d6}

.sluzba { max-width: 90%; height:250px; position: relative; overflow:hidden; margin: 0 auto;}
.sluzba > .sl { min-width: 50px; min-height:50px; position: absolute; top: 0; left: 0; z-index: 999 }
.sluzba > .sl > img { padding: 10px; }
.sluzba > img { min-width: 110%; min-height:auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }

.sluzba > .sp { position: absolute; width: 100%; height: auto; left: 0; bottom: 0; padding: 10px; }
.sluzba > .sp > h1 { padding-bottom: 10px; }
.sluzba > .sp > p { color: #fff; }

/********************** mini gallery ****************/

.projects [class*="col-"] { position: relative;  overflow: hidden; min-height:250px; border: 2px solid #fff; }
.projects a { display:block; }
.projects a > img { min-height:auto; max-width: 100%; min-height: 100%; position: absolute;  left: 0; top: 0; right: 0; bottom: 0; margin:auto;  }