@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: 3px;
border-right-width: 4px;
border-bottom-width: 3px;
border-color: #DA70D6;
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;}

img
{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: 1cm;
text-align: center;
box-shadow: 5px 5px 5px #888888;} /* trzeci parametr oznacza rozpraszanie cienia */

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

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

figure
{margin-bottom: 3cm;}

figcaption
{font-size: smaller;
text-align: center;}

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

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

p
{text-align: justify;}

q
{font-style: italic;}

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

span.underline
{text-decoration: underline;}

ul
{text-align: justify;}

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

video
{margin-bottom: 2cm;}


/* =========== 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, #708090, 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;}

section.galeria > h2
{width: 47%;}

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

h3
{background-color: transparent;
font-size: medium;
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: #800080;}

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




/* ================= NAWIGACJA MENU =================== */
header
{display: block;
background-color:  white;
background-image: url("../grafika/nawigacja-tlo.webp");
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: 8px; /* kreska pod menu */
border-bottom-color: #800080;
position: relative;} /* Po to, aby podrzędny element <nav> pozycjonować wewnątrz <header> */

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

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: 20px;
margin-right: 20px;
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: x-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: #d2b48c;}

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

a.menu:hover
{background-color: #808080;
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;}




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

header
{background-image: url("../grafika/nawigacja-tlo.webp");}

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

#logoIMG
{width: 70%;
height: 70%;}

#divNaIkoneResponsywna
{display: block;
font-size: 56px;
color: #c0c0c0;
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: #d2b48c;}

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

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;} 

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, main > img, #bannerOdnosnik > img, #reklamaOdnosnik > img, #reklamaOdnosnik2 > img, video, figure > img, div.flex-item > section > figure > img, div.flex-item > img
{width: 100%;
max-width: 500px;
height: auto;}

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

h1
{font-size: x-large;}

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

article > section > h2, section.galeria > h2
{width: 100%;}

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

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

.flex-item, .flex-item > section
{display: block;
padding-left: 0px;
padding-right: 0px;
margin: 0 auto;}
}

/* ==================== 901 - 1320 ====================== */
/* Uwaga: min-device-width oraz max-device-width są deprecated */
@media all and (min-width: 901px) and (max-width: 1320px) {
body
{width: 100%;
font-size: medium;}

section > img
{width: 100%;
max-width: 400px;
height: auto;}

article > section > img
{width: 100%;
max-width: 800px;
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;}

}