/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(fonty/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(fonty/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}     
     
html {  height: 100%; scroll-behavior: smooth; }

body { margin: 0; font-family: 'Montserrat', Tahoma, Arial, Roboto, sans-serif; height: 100%;color: #333; background: #fff ; text-align:center;  font-size: 16px;  line-height: 24px;}
article, footer, header, main, nav, section { display: block;}
body, table, td, tr, img, h1, h2, h3, h4, p, div, form, main, nav  {margin: 0; padding: 0; text-indent:0; border:0} 
ul  { padding:0px; margin: 0px 0px 0px 21px; list-style-type: square}
li  { padding:0px; margin: 4px 0px 0px 0px;}
a {text-decoration:none;color: #c00;}
a:hover {color: #3e8bf5;}
s { text-decoration:none; white-space: nowrap; }
clear {clear:both; }
.komp {display:block;}
.smart {display:none;}
.separator {height: 14px; border-top: #ddd 1px solid;}
.do_srodka {display: block; text-align:center; }
.wprawo {float: right;}
.wlewo  {float: left;}
.odstep {height:7px;}
.InBlock { display:inline-block;}
.BorderTop { border-top: #aaa 1px solid;}

h1  {color: #c00; margin: 0px 0 7px 0; text-align:left;font-weight: normal;  font-size: 36px; line-height: 36px; }
h2 {color:  #3E77BB;  margin: 0px 0 7px 0; text-align:left;font-weight: normal;  font-size: 24px; line-height: 35px;}
h3  {color: #3E77BB; margin: 14px 0 7px 0; text-align:left;font-weight: normal;  font-size: 18px; line-height: 28px; }
.header {color:  #c00;  margin: 0px 0 7px 0; text-align:left;font-weight: normal;  font-size: 36px; line-height: 49px;}
 /* Pasek blokujący się na Górze strony */
.fixed { position: fixed; top: 0;  background:#c00 ; }
.sticky { width: 100%;   z-index: 999; } /*    text-transform: uppercase;  */
.fixed > #menu_poz > nav > a {
  color: #fff;
}

#MENU_ZEWN { width: 100%;z-index: 20;  text-align:center;padding: 0; height: 40px; border-bottom: #aaa 1px solid; }
#menu_poz nav { max-width:1200px; margin: 0 auto 0px;  text-align: center;   }
#menu_poz nav a {  display: inline-block; padding: 0px 20px; color: #333; text-transform:uppercase; font-weight: normal;  font-size: 16px; line-height: 36px; border: transparent 1px solid; }
#menu_poz nav a:hover { color: #c00;  background:#fff; border: #c00 1px solid;border-radius: 7px; 	-moz-border-radius: 7px; 	-webkit-border-radius: 7px; }

/* --- NAGŁÓWEK //////////////////////////////////---*/
#NAG_ZEWN  { margin: 0 0 1px 0; padding: 0 0 0 0; background: #fff;  }
#NagWEWN  {position: relative;  max-width:1200px; margin: 0 auto;  padding:10px 7px 0 0; }
#NagLewy  {display:table-cell; text-align:left; vertical-align: middle; width:330px;   }
.logo {width: 280px; margin: 0 0 0 14px}
.fb {}
#NagSrod  {display:table-cell; text-align:center; vertical-align: middle; width:60%; }
#NagPrawy {display:table-cell; text-align:right; vertical-align: top; min-width:240px; margin: 0 2px 0 0; padding:0px 20px 0 0; color: #aaa;   font-size: 25px; line-height: 36px;}
/* #NagPrawy h1 {display:inline; font-weight: normal;  font-family: 'Montserrat', Tahoma, Arial, Roboto, sans-serif;font-size: 13px; line-height: 20px; white-space:nowrap;} */
#NagPrawy p {white-space:nowrap; color: #000; font-size: 17px; line-height: 36px;}
#NagPrawy img {vertical-align:top; padding: 0 0 7px 0}

/*  ///// BANER ///// */
#BLOK_baner  {clear:both;  }
#baner {max-width:1900px; position: relative; margin: 0 auto}
#baner img {margin:0; max-width: 100%!important; display:block; height: auto; width: auto;max-height: 640px; } 
#baner h2.szkola { position: absolute;  bottom: 7%;  left: 50%;  transform: translate(-50%, 0%); color: #fff; text-shadow: #000 0px 0px 7px; font-family: Arial, sans-serif; font-style: italic; font-weight: bold;  font-size: 64px; line-height: 64px;} 

 #baner h2.szkola {    position: absolute;    bottom: 7%;    left: 50%;    transform: translate(-50%, 0%);    color: #fff;    text-shadow: #000 0px 0px 7px;    font-family: Arial, sans-serif;    font-style: italic;    font-weight: bold;    font-size: 64px;    line-height: 64px;    text-align: center;    width: 100%;    margin: 0;    padding: 0 20px;    box-sizing: border-box;    opacity: 0;}

/* Pełny cykl = 11 sekund */
#baner .tekst1 {    animation: fadeText1 11s infinite ease-in-out;}
#baner .tekst2 {    animation: fadeText2 11s infinite ease-in-out;}

/* === Pierwszy napis === */
@keyframes fadeText1
 {
    0%    { opacity: 1; }
    38%   { opacity: 1; }     /* widoczny ~4,5s */
    42%   { opacity: 0; }     /* 0,5s fade out */
    100%  { opacity: 0; }
}
/* === Drugi napis === */
@keyframes fadeText2 {
    0%    { opacity: 0; }
    46%   { opacity: 0; }     
    50%   { opacity: 1; }     /* zaczyna się 0,5s przed zanikiem pierwszego */
    88%   { opacity: 1; }     /* widoczny ~4,5s */
    92%   { opacity: 0; }     /* 0,5s fade out */
    100%  { opacity: 0; }
}
/* Responsywność  777px*/
@media all and (max-width: 777px)
{
    #baner h2.szkola {        font-size: 35px;        line-height: 38px;        bottom: 5%;    }
    #baner .tekst2 {        font-size: 33px;    }
}
/*  ///// koniec BANER ///// */
 
#BLOK1_ZEWN, #BLOK2_ZEWN   {clear:both; background: #fff;}
#Blok1WEWN  {min-width: 320px; max-width:1200px;text-align:left; margin: 0px auto; font-size: 16px;  line-height: 24px; padding:20px 7px 20px 7px; border-bottom: #aaa 0px solid;}

#Blok2WEWN  {min-width: 320px; max-width:1170px;text-align:left; margin: 0px auto;box-shadow: 2px 3px 7px #777;font-size: 16px;  line-height: 24px; padding:20px 7px 20px 7px; border-bottom: #aaa 0px solid;}



.Blok1Lewy  {display:table-cell; width:49%; vertical-align: text-top; vertical-align: top; text-align: left; padding: 0px 21px  21px 21px;border: blue 0px solid;}
.BlokSrod  {display:table-cell;  text-align:center; width:0,1%; padding: 0px 1px  0px 1px}
.Blok1Prawy {display:table-cell; width:50%; vertical-align: text-top; vertical-align: top; text-align: left; padding: 0px 7px 21px 21px; border: green 0px solid;}
.Blok1Lewy img, .Blok2Prawy img,  .Blok3 img, #Blok1WEWN img   {display: block; max-width: 100%!important; height:auto;  margin: 0;}


.Blok2Lewy  {display:table-cell; width:49%; vertical-align: text-top; vertical-align: top; text-align: left; padding: 0px 21px  21px 21px;border: blue 0px solid;}
.BlokSrod  {display:table-cell;  text-align:center; width:0,1%; padding: 0px 1px  0px 1px}
.Blok2Prawy {display:table-cell; width:50%; vertical-align: text-top; vertical-align: top; text-align: left; padding: 0px 7px 21px 21px; border: green 0px solid;}
.Blok2Prawy td {border: #ccc 1px solid; text-align:center;  font-size: 13px;  line-height: 18px;padding: 7px 3px  7px 3px;}

.Blok3  {display:table-cell; width:33%; vertical-align: text-top; vertical-align: top; text-align: left; padding: 7px 21px 14px 21px; border: green 0px solid;}
#cennik {width:97%}
#cennik td {border: #ccc 1px solid; text-align: center; font-size: 14px; line-height: 18px; padding: 7px 3px 7px 3px;}
#cennik th {border: #ccc 1px solid;background: #eee ; text-align: center; font-size: 14px; line-height: 18px; padding: 7px 3px 7px 3px;}

			
 iframe { max-width: 100% !important; }
#menu_sm {display:none; }
/* ---  MENU dla SMARTFONÓW -------- */
#menu_sm {position: fixed; top:4px; right:7px; width: 160px; text-align: center;}
#menu0 { width: 99%; margin: 0px auto 4px;  text-align: left; }
#menu0 dt {	cursor: pointer;}

/* menu boczne - przyciski*/
dl, dt, dd {display: block; margin: 0; font-size:16px; line-height:40px; }

dt.poziom0 {  width: 95%;height: 40px; color: #fff; background: transparent; border: #ccc 0px solid; margin: 0px 0 3px  0; padding: 0 0 0 10px; border-radius: 7px; 	-moz-border-radius: 7px; 	-webkit-border-radius: 7px;}
dt.poziom0:hover {background: transparent;  color: #e77516;}

dt.poziom1  { color: #777; background: #eee; border: #ccc 1px solid; margin: 3px 0 0px  0; padding: 0 0 0 10px; border-radius: 7px; 	-moz-border-radius: 7px; 	-webkit-border-radius: 7px;}
dt.poziom1:hover {background:#fff; color: #333;}

dt.poziom1a  { color: #fff; background: #aaa; border: #ccc 1px solid; margin: 3px 0 0px  0; padding: 0 0 0 10px; }
dt.poziom1a:hover {background:#eee; color: #333;}

.rozwin {display:inline-block; float: right; background: #c00; width: 40px; height: 40px; font-size:40px; line-height:36px; text-align: center; border: #c00 1px solid; border-radius: 7px; 	-moz-border-radius: 7px; 	-webkit-border-radius: 7px; }
#menu0 span {color: #777; font-size:22px; line-height:30px;}
#menu0 i {color: #fff; font-size:12px; line-height:30px;}

dd a:link, dl a:visited { display: block;  color: #333; background: #eee;font-size: 14px; line-height: 40px; }
dd a:hover, dl a:hover { display: block; background:#fff; color: #777; }
/*Koniec utawien menu*/ 		
			
#footer { background-color: #c00;   color: #fff; padding: 25px 50px; font-size: 14px;   text-align: center;   }

#STOP_ZEWN  { background: #444;color: #ddd; font-size: 16px; line-height:21px;}
#StopWEWN  { min-width: 320px; max-width:1200px; margin: 0 auto; padding: 21px 0}
#StopWEWN h4 {color:#fff;text-transform:uppercase; font-size: 20px; line-height:24px}
#StopLewy  {display:table-cell;  min-height:100px;  width:33%; padding: 0 21px 0 14px; text-align:left;}
#StopSrod  {display:table-cell; min-height:100px; width:33%; padding: 0 14px 0 21px;text-align:left; vertical-align: text-top; vertical-align: top;}
#StopPrawy {display:table-cell;min-height:100px;  width:33%;vertical-align: text-top;text-align:left; vertical-align: top;}


/* Powrót do  góry */
.to-top{ 	text-align:center; }
#scroll-to-top{ 	display:none; 	position:fixed; 	bottom:15px; 	right:20px; 	opacity:0.8; }
#scroll-to-top:hover{ 	opacity:1; }
/* koniec  Powrót do  góry */

/* ---- 1140px ------------- */
 @media all and (max-width:1120px) 
{
#baner h2.szkola  {   font-size: 49px;  line-height: 49px;}
}

/* ---- 777px ------------- */
 @media all and (max-width:777px) 
{
.komp {display:none;} 
.smart {display:block;}
#menu_sm {display:block; z-index: 999}
#MENU_ZEWN {display:none;}

#NagWEWN  {border-bottom: #ccc 1px solid;  }
#NagLewy {display: block; width:97%; text-align:left; padding: 0 0 0 7px; margin: 0}
#NagSrod  {display: block; width:97%; padding: 0; margin: 0;}
#NagPrawy {display: block; width:95%; text-align:left; padding: 0 0 0 7px; margin: 0; }

.logo {max-width: 100% !important; height: auto; position: relative; top:14px; display: inline-block;  }
.fb {float: right; position: relative; top:35px;}
/* #baner_WEWN {position: relative; top:-320px;  margin: 0px auto; } */

/* 
 #BLOK_baner {height: auto; }

#baner h2.szkola { position: absolute;  bottom: 7%;  left: 30%;  transform: translate(-30%, 0%);   font-size: 35px; line-height: 35px;} 
 */
h1 {   font-size: 28px;  line-height: 28px;}
 /* Blok tekstowy */
.Blok1Lewy, .Blok2Lewy,.Blok1Prawy,.Blok2Prawy {display: block; border-bottom: #ccc 1px solid; margin: 0 auto;  width:100%;  padding:  14px 0 14px 0; }
.Blok3 {display: block; margin: 0 auto;  width: 98%;  padding: 7px 0; }
.Blok1Lewy img, .Blok2Prawy img  {display: block; max-width: 100%!important; height:auto;  padding: 0; }
.Blok2Prawy td {border: #ccc 1px solid; text-align:center;  font-size: 12px;  line-height: 18px;padding: 0;}


#cennik {width: 100%;}

/* .Blok2Lewy img  {width: 100% !important;max-width: 417px !important;} */
#StopLewy  {display:block; height: auto;  width: auto; min-width: 320px;  padding: 0; }
#StopSrod  {display:block; height: auto;  width: auto; min-width: 320px;  padding: 0; }
#StopPrawy {display:block;  text-align:center;  height: auto;  width: auto; min-width: 320px;padding: 0; margin: 0; }
#StopPrawy h5, #StopPrawy h6 {text-align:center; }
#StopPrawy img.do_prawej {float: none}
#PASEK_ZEWN { height:auto; font-size: 14px; line-height:20px;  }
}

/* ---- 640px ------------- */
 @media all and (max-width:640px) 
{
/* h1 {   font-size: 24px;  line-height: 24px;} */
#baner h2.szkola { position: absolute;  bottom: 7%;  left: 30%;  transform: translate(-30%, 0%);   font-size: 28px; line-height: 35px;} 
}