body {
font-size: 16px;
font-family: normal;
1background-color: #fbfbfb;
font-family: 'Roboto', sans-serif;

}

* { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  max-height: 999999px;
}

a {
outline: none !important;
}

.center {
width: 1170px;
margin-left: auto;
margin-right: auto;

} 

h2, h3{
font-family: 'Open Sans', sans-serif;
color: #3056A4;
text-transform: capitalize;
font-size: 27px;
padding-bottom: 40px;
}

h3{
font-size: 20px;
padding-bottom: 20px;
font-family: none;
}

p{
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-align: justify;
color: #969696;
}

/*Strona Głowna*/

/* Nagłówek .Logo i telefon  */
#naglowek {
width: 100%;
height: 125px;
float: left;
clear: both;
}

#naglowek .center {
position: relative;
}

#naglowek .logo{
display: block;
width: 400px;
height: 94px;
background-image: url("../img/med.png");
background-repeat: no-repeat;
background-position: left top;
background-size: 80%;
position: absolute;
top: 16px;
left: 0px;
}

#naglowek .kontakt-naglowek{
display: block;
float: left;
height: 40px;
line-height: 40px;
position: absolute;
top: 40px;
right: 0px;
}

#naglowek .kontakt-naglowek span {
display: block;
float: left;
padding-left: 55px;

font-size: 34px;
color: #3A3AB9;
font-weight: 700;
position: relative;
}

#naglowek .kontakt-naglowek span i {
display: block;
width: 40px;
height: 40px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background-image: url("../img/telefon.png");
background-repeat: no-repeat;
background-position: right top;
background-size: auto;
background-size: 100%;
}


/*Nawigacja*/
#nawigacja {
width: 100%;
height: 56px;
float: left;
clear: both;
background-color: #24407B;
position: relative;
-webkit-box-shadow: 0px 5px 4px -1px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 5px 4px -1px rgba(0,0,0,0.7);
box-shadow: 0px 5px 4px -1px rgba(0,0,0,0.7);
z-index: 1100;
}

/* Menu główne */
 #nawigacja .menu-glowne{
float: left;
}

 #nawigacja ul.menu-glowne, ul.menu-glowne {
display:block;
width:600px;
height:56px;
text-align:left;
position:absolute;
z-index:4;  
}

 #nawigacja ul.menu-glowne li, ul.menu-glowne li{
display:block;
float:left;
margin: 0px 2px;
padding: 0px;
}

#nawigacja ul.menu-glowne li a, ul.menu-glowne li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
line-height: 56px;
height: 56px;
color:white; 
padding-left: 15px;
padding-right: 15px;
}

#nawigacja ul.menu-glowne li a:hover, ul.menu-glowne li a:hover, #stopka .menu-glowne li a:hover, #nawigacja ul.menu-glowne li.active a, #stopka .menu-glowne li.active a {
background-color: #3056A4;
}

 /*Menu Społecznościowe */
#nawigacja .center {
position: relative;
} 
 
#nawigacja ul.menu-social {
display:block;
float: right;
}

#nawigacja ul.menu-social li{
display:block;
float:left;
} 

#nawigacja ul.menu-social li a i {
display: block;
width: 35px;
height: 35px;
float: left;
margin-left: 10px;
margin-top: 10px;
}

#nawigacja ul.menu-social li a i.facebook{
background-image: url(../img/f.png);
background-repeat: no-repeat;
background-position:  center center;
background-size: 100%;
}

#nawigacja ul.menu-social li i.twitter{
background-image: url(../img/t.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}

#nawigacja ul.menu-social li a i.google{
background-image: url(../img/g.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
}


#nawigacja ul.menu-social li a:hover i.google, #nawigacja ul.menu-social li a:hover i.twitter, #nawigacja ul.menu-social li a:hover i.facebook{
-webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.75);
-moz-box-shadow:    0px 0px 15px 0px rgba(255, 255, 255, 0.75);
box-shadow:         0px 0px 15px 0px rgba(255, 255, 255, 0.75);
}

/*animacja8*/
#animacja {
float: left;
width: 100%;
height: 500px;
background-color: white;
overflow: hidden;
}

#animacja .bx-next, #animacja .bx-prev {
1background-color: yellow;
width: 60px;
height: 60px;
margin-top: -30px;
}

#animacja .bx-next{
background: url(../img/next2.png);
background-position: center center;
background-size: 80%;
background-repeat: no-repeat;
}

#animacja .bx-prev{
background: url(../img/prev2.png);
background-position: center center;
background-size: 80%;
background-repeat: no-repeat;
}

#animacja .bx-prev:hover, #animacja .bx-next:hover{
background-position: center center;
background-color: rgba(48,86,164, 0.1);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#animacja-glowna .tlo {
width: 100% !important;
height: 500px;
}

#animacja-glowna .tlo1{
width: 100%;
height: 500px;
background: url(../img/1.jpg);
background-position: center center;
background-size: 65%;
background-repeat: no-repeat;
}

#animacja-glowna li {
width: 100% !important;
}

#animacja-glowna .tlo2{
width: 100%;
height: 500px;
background: url(../img/2.jpg);
background-position: center center;
background-size: 65%;
background-repeat: no-repeat;

}

#animacja-glowna .tlo3{
width: 100%;
height: 500px;
background: url(../img/3.jpg);
background-position: center center;
background-size: 65%;
background-repeat: no-repeat;

}

.tlo.tlo2 {
background-color: white;
}

.tlo.tlo3 {
background-color:white;
}

#animacja-glowna .tlo span.tekst1 {
display: block;
position: absolute;
z-index: 10;
top: 200px;
font-size: 60px;
text-align: left;
font-weight: bolder;
text-shadow: 1px 1px 25px rgba(255, 255, 255, 1), 1px 1px 25px rgba(255, 255, 255, 1),  2px 2px 1px rgba(0, 0, 0, 0.7);
color:#3056A4;
margin-bottom: 40px;
text-transform: capitalize;
left: 40%;
width: 60%;
}

#animacja-glowna .center {
position: relative;
} 

#animacja-glowna .tlo span.tekst2{
display: block;
position: absolute;
z-index: 10;
top: 280px;
font-family: 'Roboto', sans-serif;
font-size:35px;
text-align: left;
color: #464D53;
color:#3056A4;
text-shadow: 1px 1px 25px rgba(255, 255, 255, 1), 1px 1px 25px rgba(255, 255, 255, 1), 2px 2px 1px rgba(0, 0, 0, 0.7);
text-transform: capitalize;
left: 40%;
width: 60%;
}



/* trzy zdjęcia*/
#trzy-zajawki {
width: 100%;
float: left;
height: 128px;
margin-bottom: 130px;
}

#trzy-zajawki .center {
position: relative;
}

#trzy-zajawki .center .absolute {
position: absolute;
width: 100%;
z-index: 1100;
top: -30px;
}

#trzy-zajawki .lewa, #trzy-zajawki .srodek, #trzy-zajawki .prawa {
float: left;
background-color: white;
-webkit-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
-moz-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
background-color: white;
position: relative;
} 

#trzy-zajawki .srodek {
margin-left: 45px;
margin-right: 45px;
}

#trzy-zajawki .lewa {
width: 360px;
height: 220px;
background: url(../img/z1.jpg);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#trzy-zajawki .tytul1 {
width: 380px;
height: 40px;
display: block;
position: absolute;
z-index: 2;
top: -15px;
left: -10px;
background-color: #16336D;
text-transform: uppercase;
color: white;
font-size: 16px;
font-weight: 700;
line-height: 40px;
text-align: center;

-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;

-webkit-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
-moz-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
}

#trzy-zajawki .tytul2 {
width: 380px;
height: 40px;
display: block;
position: absolute;
z-index: 2;
bottom: -15px;
right: -10px;
background-color: #3056A4;
text-transform: uppercase;
color: white;
font-size: 16px;
font-weight: 700;
line-height: 40px;
text-align: center;

-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;

-webkit-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
-moz-box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.22);
}

#trzy-zajawki .srodek .tytul1 {
background-color: #B30B0B;
}

#trzy-zajawki .srodek .tytul2 {
background-color: red;
}

#trzy-zajawki .prawa .tytul1 {
background-color: #7A990D;
}

#trzy-zajawki .prawa .tytul2 {
background-color: #a8cd29;
}

#trzy-zajawki .srodek {
width: 360px;
height: 220px;
background: url(../img/z2.jpg);
background-position: center center;
background-size: 50%;
background-repeat: no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: white;
}

#trzy-zajawki .prawa {
width: 360px;
height: 220px;
background: url(../img/z3.png);
background-position: center center;
background-size: 40%;
background-repeat: no-repeat;
background-color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}


/* kolumny 3 */
#glowna {
float: left;
width: 100%;
margin-bottom: 40px;
}

#glowna .lewa, #glowna .srodek, #glowna .prawa {
float: left;
}

#glowna .srodek {
margin-left: 45px;
margin-right: 45px;
}

#glowna .lewa, #glowna .srodek {
width: 400px;
}

#glowna .prawa {
 width: 280px;
}

/*2 zdjęcia na głownej*/
i.img {
display: block;
float: left;
width: 100%;
height: 220px;
background-color: black;
margin-bottom: 20px;
margin-top: -10px;

background: url(../img/p1.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.srodek i.img {
background: url(../img/p2.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
}

ul.lista {
display: block;
width: 100%;
}

ul.lista li {
display: block;
width: 100%;
min-height: 30px;
line-height: 30px;
margin-bottom: 10px;
color: #969696;
font-size: 18px;
padding-left: 40px;
position: relative;
}

ul.lista li i {
display: block;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
background: url(../img/ok.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}

.button {
display: block;
border: none;
outline: none;
margin-top: 20px;
display: block;
float: right;
width: 240px;
height: 45px;
text-align: center;
font-size: 16px;
color: white;
background-color: #16336D;
background-color: #3056A4;

text-decoration: none;
line-height: 45px;
font-weight: 900;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.button:hover {
opacity: 0.8;
}
/* koniec kolumny 3 */
 
 /*Opinie*/
#opienie-onas {
width: 100%;
float: left;
background-color: #3157A5;
background-color: #3056A4;
}

#glowna p{
line-height: 18px;
}

#opienie-onas .pierwsza, #opienie-onas .druga, #opienie-onas .trzecia, #opienie-onas .czwarta{
display: block;
float: left;
width: 260px;

}
#opienie-onas .druga{
margin-left: 42px;
margin-right: 42px;
}

#opienie-onas .trzecia{
margin-right: 42px;
}

#opienie-onas .pierwsza .obrazek, #opienie-onas .trzecia .obrazek{
display: block;
width: 88px;
height: 88px;
margin-left: auto;
margin-right: auto;
background: url(../img/woman.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 80%;

margin-bottom: 20px;
}

#opienie-onas .druga .obrazek, #opienie-onas .czwarta .obrazek{
display: block;
width: 88px;
height: 88px;
margin-left: auto;
margin-right: auto;
background: url(../img/man.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 80%;

margin-bottom: 20px;
}

#opienie-onas p {
float: left;
clear: both;
line-height: 20px;
text-align:center;
}

#opienie-onas {
padding-top: 40px;

}

#opienie-onas h2, #opienie-onas h3, #opienie-onas p {
color: white;
font-family: "Open Sans",sans-serif;
}

#opienie-onas h3 {
text-align: center;
}

#opienie-onas h3.mapah3 {
margin-top: 20px;
margin-bottom: 20px;
display: block;
float: left;
width: 100%;
font-size: 27px;
}


 /*mapa i stopka*/
#mapa  {
width: 100%;
height: 350px;
position: relative;
float: left;

}

#mapa iframe{
width: 100%;
height:350px; 
position: absolute;
z-index: 1;
left: 0;
top: 0;
}

#zmien-mape {
display: block;
width: 220px;
height: 40px;
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
text-align: center;
line-height: 40px;
text-decoration: none;
}

#mapa1, #mapa2 {
opacity: 0;
visibility: hidden;
}

#mapa1.open, #mapa2.open {
opacity: 1;
visibility: visible;
}

#stopka {
width: 100%;
height: 56px;
float: left;
position: relative;
background-color: #24407B;
}
 
#stopka p {
line-height: 56px;
font-size: 16px;
color: white;
}

#stopka .center {
position: relative;
}

#stopka ul.menu-glowne {
position: absolute;
top: 0;
right: 0;
width: auto;
}

#stopka ul.menu-glowne a {
font-size: 14px;
}
/*koniec ST*/
 
 
 /*Podstrony*/

/*główne zdjęcie na podstronach*/
.naglowek {
float:left;
width:100%; 
height:400px;
position: relative;

}

.naglowek i.img {
display:block;
width:100%;
height:400px; 
position: relative;
margin: 0;
padding: 0;
}

 /*duże zdjęcie */
 i.img.ofirmie {
position: absolute;
background:url(../img/ofirmie2.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size: cover;
}

 i.img.oferta {
background:url(../img/oferta1.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size: 90%;
}

i.img.sluch {
background:url(../img/sluch2.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size: cover;
}

i.img.kontakt {
background:url(../img/kontakt.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size: cover;
}

/*Scieżka- powrotu dla wszystkich podstron*/
#sciezka {
float: left;
width: 100%;
height: 50px;
background-color: #A1A1A1;
margin-bottom: 40px;
position: relative;
overflow-x: hidden;
-webkit-box-shadow: 0px 5px 4px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 5px 4px -1px rgba(0,0,0,0.5);
box-shadow: 0px 5px 4px -1px rgba(0,0,0,0.5);
} 

#sciezka .linia1 {
position: absolute;
z-index: 1;
width: 50%;
right: -20px;
top: 0;
height: 50px;
background-color: #3056A4;

-moz-transform: skewX(-18deg);
-webkit-transform: skewX(-18deg);
-o-transform: skewX(-18deg);
-ms-transform: skewX(-18deg);
transform: skewX(-18deg);
} 

#sciezka ul {
float: left;
display: block;
}

#sciezka ul li, #sciezka ul li.kolor1, #sciezka ul li, #sciezka ul li.kolor2, #sciezka ul li, #sciezka ul li.kolor3{
float: left;
display: block;
height: 50px;
line-height: 50px;
font-size: 16px;
color: white;
margin-right: 5px;
}

#sciezka ul li a {
color: white;
text-decoration: none;
}

#sciezka ul li a:hover {
text-decoration: underline;
}
/*koniec Scieżki*/
 

/*O firmie / Oferta/ Słuch*/
/*podział układu w O-firmir i Oferta*/
#calosc .artykul, #calosc .zdjecie{
display: block;
float: left;
}

#calosc .artykul{
width: 750px;
height: auto;
}
/*class artykuł*/
.artykul  {
padding-bottom: 30px;
}
.artykul p {
font-size: 16px;
line-height: 22px;
padding: 0;
margin: 0;
margin-bottom: 20px;
} 
.artykul h2 {
font-size: 36px;
}
.artykul h2, .artykul h3 {
height: auto;
display: inherit;
padding: 0;
margin: 0;
margin-bottom: 20px;
font-family: "Open Sans",sans-serif;
text-transform: none !important;
}

.artykul h2 {
width: 100%;
}

.artykul ul.lista li {
font-size: 16px;
padding-left: 28px;
min-height: 22px;
line-height: 22px;
margin-bottom: 10px;
}

ul.lista li i {
width: 22px;
height: 22px;
}

#calosc .zdjecie{
display: block;
float:left;
width:420px;
height: auto;
}

 #calosc .zdjecie i {
display: block;
float: right;
width:250px;
height:250px;
margin-bottom: 30px;
margin-top: 40px;
}

 /*zdjęcie po prawej O firmie / Oferta /Słuch*/ 
#calosc .zdjecie i.img-firma1{
background:url(../img/o2.png);
background-position:center center;
background-repeat:no-repeat;
background-size:77%;
}

#calosc .zdjecie i.img-firma2{
background:url(../img/f3.png);
background-position:center center;
background-repeat:no-repeat;
background-size:105%;
margin-top: 0;
}
 
#calosc .zdjecie i.img-oferta1{
background:url(../img/o1.png);
background-position:center center;
background-repeat:no-repeat;
background-size:77%;
}

#calosc .zdjecie i.img-oferta2{
background:url(../img/f2.png);
background-position:bottom center;
background-repeat:no-repeat;
background-size:100%;
}

#calosc .zdjecie i.img-sluch1{
background:url(../img/s2.png);
background-position: right center;
background-repeat:no-repeat;
background-size:100%;
margin-top: 40px;
}

#calosc .zdjecie .img-sluch2{
background:url(../img/s3.png);
background-position:center center;
background-repeat:no-repeat;
background-size:100%;
}
 /*koniec zdjęcie prawe O firmie / Oferta /Słuch*/ 

 /*kontakt*/ 
#kontakt .dane-kontaktowe .artykul, #kontakt .formularz{
display: block;
float: left;
width: 100%;
max-height:450px;
position: relative;
}

#kontakt-formularz {
overflow: hidden;
height: 450px;
}

#preloader {
width: 100%;
height: 100%;
position: absolute;
z-index: 10001;
background: url(../img/ajax-loader.gif);
background-position: center center;
background-repeat: no-repeat;
background-size: 35%;
background-color: white;
display: none;
}

#kontakt .dane-kontaktowe{
display: block;
float: left;
width: 470px;
}

#kontakt .formularz, #kontakt-formularz{
display: block;
float: left;
width: 700px;
position: relative;

}

.formularz .pole {
display: block;
width:700px;
height: 35px;
margin-bottom: 0px;
position: relative;
margin-bottom: 20px;
}

#kontakt-formularz h3{
margin-top: 2px;
}
.formularz .pole.textarea {
height: 135px;
}

input[type="text"], textarea{
position: absolute;
display: block;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: gray;
padding-left: 15px;
padding-right: 15px;
left: 0;
top: 0;
border: 1px solid #3056A4;
line-height: 40px;
text-transform: capitalize;
background-color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

textarea { 
font-family: 'Roboto', sans-serif;
font-size: 18px;
resize: none;
}

.submit .button{
margin-top: 0;
}

#podziekowanie{
display: none;
}


h3.mapah3{
display: block;
float: left;
width: 100%;
clear: both;
font-family: "Open Sans",sans-serif;
margin-bottom: 20px;
text-align: center;
margin-top: -20px;
}


label.error {
position: absolute;
z-index: 2;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
line-height: 35px;
color: red;
text-align: right;
padding-right: 20px;
}


/*loga firm */

.loga {
display: block;
float: left;
width: 750px;
height: 60px;
margin-bottom: 20px;
position: relative;
}

.loga i {
display: block;
float: left;
width: 25%;
height: 100%;
}

i.audio-service {
background: url(../img/l1.jpg);
background-position: center center;
background-size: 90%;
background-repeat: no-repeat;
}

i.bernafon {
background: url(../img/l2.jpg);
background-position: center center;
background-size: 90%;
background-repeat: no-repeat;
}

i.siemens {
background: url(../img/l3.jpg);
background-position: center center;
background-size: 90%;
background-repeat: no-repeat;
}

i.starkay {
background: url(../img/l4.jpg);
background-position: center center;
background-size: 90%;
background-repeat: no-repeat;
}

#kontakt-formularz {
    height: auto;
}

#kontakt .formularz {
max-height: 10000px;
}

.artykul p.small {
width: 100%;
display: block;
float: left;
padding: 15px;
border: 1px solid #3056A4;
font-size: 12px !important;
line-height: 14px !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}