body {
margin: 0 auto;
padding: 0px;
text-align: center;
max-width: 1024px;
font-family: arial;
color: black;
}

#bg-top {
background-image: url(images/bg_gora.jpg);
width: 100%;
height: 80px;
margin: 0 auto;
padding: 0px;
}

#top {
width: 100%;
margin: 0 auto;
padding: 0px;
}

#logotyp {
float: left;
padding-top: 15px;
}

#szk {
float: right;
padding-top: 20px;
}

#cien {
 box-shadow: 0 0 1em #333;
}


#duze {
background-image: url(images/top.png);
width: 100%;
height: 315px;
clear: both;
margin: 0 auto;
}

#menu {
width:250px;
float: left;
padding-top:60px;
padding-left:15px;
margin:0;
padding:0;
}

#menu ul {
list-style-type: none;
padding-top:3px;
padding-left:15px;
}

#menu ul li a{
padding:4px;
float:left;
color:#002293;
}

#website {
width: 100%;
margin: 0 auto;
padding-top: 320px;
}

#tresc {
width: 67%;
float: left;
font-size: 18px;
color: black;
text-align: justify;
line-height: 1.5;
padding-left:5px;
}

#mapa {
width: 100%;
align: center;
}

H1 {
font-size: 28px;
color: navy;
font-family: verdana;
text-align: left;
font-weight: bold;
}

P1 {
font-size: 20px;
color: navy;
font-weight: bold;
}


.style1 {font-size: 18px;
	font-weight: bold;
	color: navy;}

.style2 {font-size: 18px;
	font-weight: bold;
	color: navy;
	}

.style3 {font-size: 17px;
	font-weight: bold;}

.style4 {font-size: 18px}

.style5 {font-size: 16px;
	font-weight: bold;
	color: navy;
	}

.style8 {font-size: 16px;
	font-weight: bold;
	color: #0000CC;
	font-style: italic;}

.style9 {color: #0000CC;
	font-weight: bold;
	}

.style10 {font-size: 14px;
	font-weight: bold;}

#tresc a:hover {
color: #00196B;
font-size: 14px;
font-weight: bold;
text-decoration: underline;
}

#right {
width: 27%;
padding-top:85px;
float: right;
padding-left:10px;
}



#stopka {
background-image: url(images/stopka.jpg);
width: 100%;
height: 52px;
margin: 0 auto;
padding: 0px;
clear:both;
}

#stopka a:link {
color: white;
text-decoration: none;
}

#stopka a:visited {
color: white;
text-decoration: none;
}

#stopka a:hover {
color: navy;
text-decoration: none;
}

#lewo {
float:left;
color:white;
font-size:11px;
padding-left: 5px;
padding-top:20px;
text-align:left;
}

#prawo {
float:right;
color:white;
font-size:11px;
padding-right: 5px;
padding-top:30px;
text-align:left;
}

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

a:hover {
color: navy;
text-decoration: none;
}

.contact-form { width: 100%; }
.contact-form > iframe { width: 100%; min-height: 400px; }

#cien img {display:block;}

@media (max-width: 1040px) {
  body { box-sizing: border-box; padding: 20px; }
  #bg-top { display: block; }
  #duze { background-position: center right; }
}

@media (max-width: 980px) {
  #tresc { width: 100%; }
  #right { width: 100%; padding: 0; margin-bottom: 20px;}
  #right > br { display: none; }
  #cien { width: 33%; float: left;margin-bottom: 20px; }
  #szk { padding-bottom: 20px; }
}

@media (max-width: 800px) {
  #logotyp { display: block; width: 100%; margin: 0 auto; }
  #bg-top { background: none;}
  #szk { display: block; width: 100%; margin: 0 auto; }
  #tresc {
    margin-top: 75px;
  }
  .btn-blue, .btn-yellow {width: 50%; max-width: inherit;}
}


@media (max-width: 700px) {
  #duze { background-position: center center; }
  .contact-form { width: 100%; }
  #tresc > div.contact-form > table > tbody > tr > td { width: 100%; display: block;}
  #tresc > div.contact-form > table > tbody > tr > td > div { text-align: left!important;}
  #tresc > div.contact-form > table > tbody > tr > td > textarea { width: 100%!important;; }
}

@media (max-width: 540px) {
  #szk { font-size: 0; }
  #szk > img:first-of-type { margin-bottom: 12px; }
  #tresc > ul  { padding-left: 20px; }
}

@media (max-width: 560px) {
  #menu { margin: 0 auto; display: block; overflow: hidden; float: none; }
  #menu > ul { display: block; overflow: hidden; padding: 0; }
  #menu > ul > li { display: block; overflow: hidden;}
  #menu > ul > li > a { display: block; overflow: hidden; margin: 0 auto; float: none; }
  #cien { width: 100%; float: left; }
}


.main-menu-content{
  display: block;
  overflow: hidden;
}
.mobile {
  display: none;
  cursor: pointer;
  background-color: #f6c501;
  padding: 10px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow:
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

@media (max-width: 768px) {
  #menu {
    display: none;
  }
  .mobile {
    display: inline-block;
  }

  #duze {
    background-position: center center;
  }
}
@media (max-width: 560px) {
  #duze {
    background-position: -380px 10px;
    margin-top: 30px;
  }

}

@media (max-width: 498px) {
  #duze {
    background: none;
  }
  #website {
    padding-top: 0;
  }
}

.active {
    display: inline-block!important;
    width: 100%!important;
    background-color: #00218f;
    border: 1px solid rgba(128, 128, 128, 0.39);
    box-sizing: border-box;
  }

  .active ul li {
      display: block!important;
      width: 100%!important;
      overflow: hidden;
    }

    .active ul li a {
        display: block!important;
        margin: 0 auto;
        width: 100%;
      }

      .btn-blue, .btn-yellow {
        padding: 6px;
        margin: 0 20px;
        max-width: 228px;
        float: left;
        box-sizing: border-box;
        border-radius: 4px;
      }

      .btn-blue {
        background-color: #002293;
        color: white;
        font-size: 18px;
        font-weight: 700;
      }

      .btn-yellow {
        padding: 8px;
        background-color: #ffd100;
      }

      .btn-yellow a{
        color: #002293;
        font-size: 16px;
        font-weight: 700;
      }

      .btn-yellow i{
        color: #000000;
        font-size: 18px;
      }

      .btn-blue, .btn-yellow i{
        margin-right: 5px;
      }

      @media (max-width: 800px) {
        .btn-yellow {float: right;}
      }
      @media (max-width: 600px) {
        .btn-blue, .btn-yellow {float: none; display: block; width: 100%;max-width: inherit; margin-left: 0;margin-bottom: 10px;}
      }

      @-webkit-keyframes spaceboots {
      	0% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
      	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
      	40% { -webkit-transform: translate(1px, 0px) rotate(1deg); }
      	60% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
      	80% { -webkit-transform: translate(-1px, 0px) rotate(1deg); }
      	100% { -webkit-transform: translate(1px, 0px) rotate(-1deg); }
      }

      .btn-blue:hover span i, .btn-yellow:hover span i {
        -webkit-animation-name: spaceboots;
        -webkit-animation-duration: 1.2s;
        -webkit-transform-origin:50% 50%;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;
        }
