body { background-image:url("/dokumenty/szablonyimg/71-bg-page.jpg"); background-repeat: no-repeat; background-color: #000; background-position:50% -10%; font-family: Arial;}
#wrapper {width: 1100px; overflow: hidden; margin: 0 auto;text-align: left;}
#main {width: 1100px;overflow: hidden;padding: 20% 0 170px 0;color:#fff;}
#left_column {width:47%;float:left;margin:0 3%;}
#right_column {width:47%;float:right;}
h1 {text-align: center;width: 100%;text-transform: uppercase;}
ul {list-style: none; }
li {height: 60px; width: 410px;padding: 10% 0; } 
.tekst{float:left;width: 220px;border-right: 1px solid #fff; padding-right:30px;text-align: right; min-height: 76px;}
.buttony {text-transform: uppercase;text-align: center;padding:6%; }
.buttony a {text-decoration: none; color:#fff; font-size: 1.5em;}
.buttony a:hover {color:#54798b;}

#pl,#en,#de,#fr,#bg,#sk,#ua,#it,#lt,#cz,#mg {position:relative;}
#pl span:before,#en span:before,#de span:before,#fr span:before,#bg span:before,#sk span:before,#ua span:before,#it span:before,#lt span:before,#cz span:before,#mg span:before { position: absolute; left:-15%; width:23px; height:15px; display:inline-block; background-image:url("/dokumenty/szablonyimg/71-sprite.png"); content:""; margin:2% 0; border:1px solid #fff;}
#pl span:before{ background-position:-23px -50px; }
#en span:before{ background-position:0 -50px; }
#de span:before{ background-position:-46px -50px; }
#fr span:before{ background-position:-69px -50px; }
#bg span:before{ background-position:-92px -50px; }
#sk span:before{ background-position:-117px -50px; }
#ua span:before{ background-position:-147px -50px; }
#it span:before{ background-position:-182px -50px; }
#lt span:before{ background-position:-206px -50px; }
#mg span:before{ background-position:-240px -50px; }
#cz span:before{ background-position:-270px -50px; }

@media (min-width:871px) and (max-width: 1100px) { 
  #wrapper {width: 100%;}
  #main {width: 100%;}
  #right_column {padding: 0 3%; width: 40%;}
  #left_column {padding: 0 7%; margin: 0; width: 40%;}
  .buttony {padding: 8% 22%;}
  .buttony a {font-size: 1em; }
  .tekst {width: 40%; font-size: 0.9em;}
}

@media (max-width: 870px) { 
  h1 {font-size: 5vw;}
  #wrapper {width: 100%;}
  #main {width: 100%;}
  ul {padding: 0;}
  li { width: 91%!important; -webkit-transition: width 1s; -o-transition: width 1s;transition: width 1s;margin: 0;}
  #left_column {width: 100%;}
  #right_column {width: 100%;}
  #pl, #en, #de, #fr, #bg, #sk, #ua, #it, #cz, #mg {height: 100%;}
  #en::before {position: relative!important;left:0; margin:0 46%;}
  #de::before {position: relative!important;left:0; margin:0 46%;}
  #it::before {position: relative!important;left:0; margin:0 46%;}
  #lt::before {position: relative!important;left:0; margin:0 46%;}
  #fr::before {position: relative!important;left:0; margin:0 46%;}
  #bg::before {position: relative!important;left:0; margin:0 46%;}
  #sk::before {position: relative!important;left:0; margin:0 46%;}
  #ua::before {position: relative!important;left:0; margin:0 46%;}
  #pl::before {position: relative!important;left:0; margin:0 46%;}
  #mg::before {position: relative!important;left:0; margin:0 46%;}
  #cz::before {position: relative!important;left:0; margin:0 46%;}
  .tekst {float:none;width: 60%; min-height:100%;border-right:none; padding: 5% 0 0 0; text-align: center;margin: auto;}
  .buttony {float:none;text-align: center;
    
  }
  
  @media (max-width: 500px) {
    h1 {font-size: 7vw;}
  }