@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext);

body
{font-size: large;
font-family:  'Roboto', 'DejaVu Sans', 'Arial', sans-serif;
font-weight: normal;
text-align: justify;
background-color: #000000;
color: #000000; 
margin: auto;
margin-top: 0px;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 30px;
max-width: 1366px;} 

div.main
{background-color: #ffffff; 
background-image: url("../grafika/tlo-main-01.png"); 
background-position: top left;
background-repeat: no-repeat;
border-style: solid;
border-top-width: 3px;
border-left-width: 2px;
border-right-width: 3px;
border-bottom-width: 3px;
border-color: #cd5c5c;
border-bottom-color: #494949;
border-top-color: #494949;
border-radius: 17px;
margin-top: 3px;}

main
{background-image: url("../grafika/tlo-main-02.png"); 
background-position: bottom right;
background-repeat: no-repeat;
text-align: justify;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 70px;}

.flex-container
{display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
align-content: stretch;
padding-top: 10px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;}

.flex-item
{display: inline-block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 45%;
align-self: flex-start;
padding-left: 10px;
padding-right: 10px;}

article > section
{display: block;
text-align: center;
padding-left: 50px;
padding-right: 50px;}

iframe /* Uwaga: Z tego korzysta też Re-Captcha */
{display: block;
margin: auto;
margin-bottom: 2cm;
text-align: center;}

audio
{margin: 0 auto; 
display: block;}

img, video
{display: block; /* W tej sytuacji fotka nie potrzebuje pojemnika <div>, ani elementu <br> na końcu */
margin: auto;
border-style: solid;
border-width: 1px;
border-radius: 16px;
margin-bottom: 2cm;
text-align: center;
box-shadow: 5px 5px 5px #888888;} /* trzeci parametr oznacza rozpraszanie cienia */

img.inline
{border-style: none;
box-shadow: none;
border-radius: 0px;
display: inline;
margin: 0;
vertical-align: baseline;}

img.premium
{border-style: none;
box-shadow: none;
border-radius: 0px;
display: inline;
margin: 0;
vertical-align: middle;}

figure
{margin-bottom: 2cm;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;}

figure > img
{margin-bottom: 5px;}

.opisVideo
{margin-bottom: 20px;}

section > img:first-of-type, section > a:first-of-type
{margin-top: 2cm;}

#reklama > a > img
{margin-bottom: 20px;}

img.noborder
{border-style: none;
box-shadow: none;
border-radius: 0px;}

#logoIMG
{border-style: none;
box-shadow: none;
margin: 0px;}

#autor-fotka-01
{float: right; 
margin-left: 10px;}

#autor-fotka-01 > img
{margin-bottom: 0px;}

#autor-kontakt-01
{font-size: smaller;
line-height: 150%;
margin-bottom: 30px;}

p
{text-align: justify;}

p.faq
{font-weight: bold;
margin-top: 1cm;}

p:first-of-type:first-letter
{font-size: 140%;}

.underline
{text-decoration: underline;}

.errorSystemRejestracji
{color: #ff0000;
font-size: small;}

q
{font-style: italic;}

ul
{text-align: justify;}

section > ul
{margin-bottom: 1cm;}

li
{margin-top: 0px;
margin-bottom: 10px;}

li.duze
{font-size: xx-large;
line-height: 200%;}

.icon
{display: inline-block;
border-style: none;
border-radius: 0;
box-shadow: none;
margin-bottom: 0px;
vertical-align: bottom;}

button
{display: block;
margin: 0 auto;}

hr
{border-style: solid;
border-width: 5px;
border-color: #e9967a; 
margin-top: 3cm;}



/* =========== NAGŁÓWKI ========== */
h1
{font-weight: bold; 
font-size: xx-large; 
color: #000000;
letter-spacing: 1px;
text-align: center;
margin-top: 0.2cm;} 

h2
{text-align: left;
background-color: transparent;
background-image: linear-gradient(to right, black, white);
border-radius: 7px;
font-weight: bold; 
font-size: x-large;
color: #ffffff;
margin-top: 30px;
text-indent: 0.5cm;
letter-spacing: 1px;
padding-top: 1px;
padding-bottom: 2px;
vertical-align: middle;}

article > section > h2
{width: 47%;}

h2:before
{content: "◼ ";
color: #cd5c5c;
vertical-align: top;} 

h3
{background-color: transparent;
color: #000000; /* #bc8f8f; */
font-weight: bold;
text-indent: 0.5cm;
text-align: left;
margin-top: 20px;
margin-bottom: 5px;}

/* ============== HIPERLINKI ============== */
a 
{font-weight: bold;
text-decoration: none;} 
 
a:link
{color: #cd5c5c;}

a:active, a:hover
{color: #dc143c;}
 
a:visited
{color: #808080;}

a.premium
{color: tan;
padding-right: 5px;}



/* ================= NAWIGACJA MENU =================== */
header
{display: block;
background-color:  white;
background-image: linear-gradient(to right, white 20%, #000000);
border-style: solid;
border-top-width: 1px;
border-top-color: transparent;
border-top-left-radius: 17px;
border-top-right-radius: 17px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 10px; /* kreska pod menu */
border-bottom-color: #cd5c5c; 
position: relative;} /* Po to, aby podrzędny element <nav> pozycjonować wewnątrz <header> */

#logoPojemnik
{display: inline-block;
margin-left: 10px;
margin-top: 5px;}

nav
{display: inline-block;
position: absolute;
right: 0px;
bottom: 0px;}

#divNaIkoneResponsywna
{display: none;  /* Gdy aktywne, ma wartość "block" */
font-size: xx-large; 
font-weight: bold; 
color: #000000; 
text-align: right; 
margin-top: 5px;
margin-right: 10px;
margin-bottom: 0px;}

ul.menu
{list-style-type: none;
margin-right: 10px;
margin-top: 0px;}

li.menu
{display: inline-block;
background-color: transparent;
padding: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
text-align: center;} 

a.menu
{display: block;
/* width: 95%;  Podajemy szerokość elementu <a> (a nie <li>), aby cała powierzchnia przycisku była klikalna */
width: 150px;
background-color: #000000;
border-style: solid;
border-width: 1px;
border-color: #696969;
border-radius: 7px;
box-shadow: 5px 5px 5px #000000; /* trzeci parametr oznacza rozpraszanie cienia */
color: #ffffff;
font-size: large;
font-weight: bold;
letter-spacing: 1px;
padding: 2px;
text-decoration: none;
transition: background-color 500ms;} /* Powolna zmiana koloru tła po najechaniu myszką */

a.menuActive
{background-color: #cd5c5c;}

a.menu:link
{color: #ffffff;}

a.menu:hover
{background-color: #cd5c5c;
color: #ffffff;
animation: potrzasnij 200ms normal linear;}

@keyframes potrzasnij { 
0%		{transform: rotate(0deg);}
10%  {transform: rotate(-1deg);}
40%  {transform: rotate(1deg);}
70%  {transform: rotate(-1deg);}
80%  {transform: rotate(1deg);}
100%{transform: rotate(0deg);} 
}

a.menu:visited
{color: #ffffff;}


/* ====================== STOPKA ====================== */
footer
{text-align: center;
background-color: #fffaf0;
background-image: linear-gradient(white, black 60%);
color: #ffffff;
border-style: solid;
border-top-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-top-color: #dcdcdc;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 3px;
border-bottom-left-radius: 17px;
border-bottom-right-radius: 17px;}

a.stopka:link
{color: #ffffff;}

a.stopka:visited
{color: #f5f5f5;}

a.stopka:hover
{color: #ff69b4;}

p.stopka
{text-align: center;
font-size: x-small;
color: #f5f5f5;
padding: 0px;
margin: 0px;}

/* =================== XML ======================= */
th.xml
{border-style: solid;
border-width: 2px;
border-color: #c0c0c0;
background-color: #000000;
color: #ffffff;
padding: 5px;}

td.xml1kolumna
{border-style: solid;
border-width: 2px;
border-color: #c0c0c0;
padding: 7px;}

td.xml2kolumna
{border-style: solid;
border-width: 2px;
border-color: #c0c0c0;
font-style: italic;
padding: 7px;}

td.xml3kolumna
{border-style: solid;
border-width: 2px;
border-color: #c0c0c0;
text-align: center;
padding: 7px;}

td.xml4kolumna
{border-style: solid;
border-width: 2px;
border-color: #c0c0c0;
text-align: center;
padding: 7px;
vertical-align: bottom;}

td.xml4kolumna > img
{margin-bottom: 0px;
border-radius: 0;}

/* ================== brutto2netto =============== */

#brutto2netto
{background-color: #fffafa;
text-align: center;
width: auto;
min-width: 290px;
max-width: 500px;
border-style: solid;
border-width: 1px;
margin: 0 auto}

#wartoscVAT, #wartoscNetto
{font-weight: bold;}

.naglowekBrutto2Netto
{color: #ffffff;
background-color: #000000;
font-weight: bold;
text-align: center;
border-style: none;
padding: 6px;
margin-top: 0px;}


/* ================= LIGHTBOX =================== */

div.darkBox {
text-align: center;
display: none;
position: fixed;
z-index: 2;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.98); } /* Czwarty parametr oznacza przeźroczystość. Można użyć do tego celu także opacity */

div.lightBox {
display: block;
z-index: 3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 40%; 
height: 50%;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-radius: 7px;
box-shadow: 5px 5px 5px #000000;} /* wprowadzony przez CSS3, trzeci parametr oznacza rozpraszanie cienia */

p.lightBoxP {
font-size: 100px;
font-style: oblique;
font-weight: bold;
color: #ff0000;
text-align: center;
padding: 15px;
margin: 10px;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translate(0, -50%);
}

/* ============== GEOLOKALIZACJA ===================== */
#miejsceDanychLokalizacji > iframe
{width: 500px; 
height: 412px;}



/* ========== RESPONSIVE DEFINITION AND BREAKPOINTS ============ */
/* ==================== 320 - 900 ====================== */
@media all and (min-width: 320px) and (max-width: 900px) {
body
{width: 100%;
font-size: small;}

p
{font-size: small;}

header
{background-image: linear-gradient(to right, white 20%, #a9a9a9);}

nav
{display: block;
position: absolute;
right: 0px;
top: 0px;}

#divNaIkoneResponsywna
{display: block;
text-align: right;
margin-top: 0px;
margin-right: 0px;
margin-left: auto;
padding-top: 5px;
padding-right: 8px;
width : 70px;
height: 90%;
position: relative;
right: 0px;
top: 0px;}

#divNaIkoneResponsywna:hover
{color: #cd5c5c;}

ul.menu
{display: none; 
margin: 0px;
height: auto;
padding: 0px;
background-color: #696969;
opacity: 0.9;}

li
{font-size: small;}

li.menu
{display: list-item;
background-color: transparent;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
text-align: center;} 

li.duze
{font-size: medium;
line-height: 200%;}

a.menu
{display: block;
line-height: 30px;
font-size: large;
padding: 2px;
border-style: none;
border-radius: 0;
box-shadow: none;
transition: none;}

a.menu:hover
{animation: none;}

/* ======= Sekcja MAIN =========== */

section > img, section > a > img, .flex-item > img, #bannerOdnosnik > img, #fotkiRotacja > img, #reklamaOdnosnik > img, #reklamaOdnosnik2 > img
{width: 100%;
max-width: 500px;
height: auto;}

h1
{font-size: medium;}

h2
{font-size: small;
margin-top: 0px;}

h3
{font-size: small;}

article > section
{display: block;
text-align: center;
padding-left: 0px;
padding-right: 0px;}

article > section > img, article > section > video, article > section > figure > video
{width: 100%;
max-width: 800px;
height: auto;}

article > section > h2
{width: 100%;}

.flex-container
{flex-direction: column;
flex-wrap: nowrap;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;}

.flex-item
{display: block;
padding-left: 0px;
padding-right: 0px;}

#flex-item-index-01
{order: 2;}

#flex-item-index-02
{order: 1;}

#autor-fotka-01
{float: none;
margin-left: 0;
margin-right: 0;}

#autor-fotka-01 > img
{width: 100%;
max-width: 400px;
height: auto;}

#autor-kontakt-01
{text-align: center;
font-size: medium;
line-height: 150%;
margin-bottom: 30px;}

#miejsceDanychLokalizacji > iframe
{width: 310px;
height: 255px;}
}



/* ==================== 901 - 1100 ====================== */
@media all and (min-width: 901px) and (max-width: 1100px) {
body
{width: 100%;
font-size: medium;}

section > img, .flex-item > img, section > video, video
{width: 100%;
max-width: 400px;
height: auto;}

article > section > img, article > section > video, article > section > figure > video
{width: 100%;
max-width: 1000px;
height: auto;}

.flex-container
{flex-direction: row;}

h2
{font-size: large;}

li.menu
{margin-left: 8px;
margin-right: 8px;} 

a.menu
{font-size: medium;
width: 125px;}

#autor-fotka-01
{float: none;
margin-left: 0;
margin-right: 0;}

#autor-fotka-01 > img
{width: 100%;
max-width: 300px;
height: auto;}

#autor-kontakt-01
{text-align: center;
font-size: medium;
line-height: 150%;
margin-bottom: 30px;}

#miejsceDanychLokalizacji > iframe
{width: 400px;
height: 329px;}
}