/* 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,  Arial, sans-serif; height: 100%;color: #333; background: #2E6047 ; text-align:center; }
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 14px; list-style-type: square}

a {text-decoration:none; color: #2E6047}
a:hover {color: #777}
s { text-decoration:none; white-space: nowrap; }
.g-100 {position: relative; top:-100px;}
.g-50 {position: relative; top:-49px;}
.middle {vertical-align: middle;}
.block {display: block;}
.in_block {display: inline-block;}
.relative {position: relative;}
.top {vertical-align: top;}
.bottom {vertical-align: bottom;}
.do_lewej {text-align:left; }
.do_prawej {text-align:right; }
.do_srodka {text-align:center; }
.justuj {text-align: justify;}
.floatR {float: right;margin: 0 14px 14px 0 }
.floatL {float: left;}
.BL1200 {min-width: 320px; max-width:1200px;}
 /* Pasek blokujący się na Górze strony */
.fixed { position: fixed; top: 0;  }
.sticky { width: 100%; text-transform: uppercase; z-index: 999  }

#MENU_ZEWN { width: 100%;z-index: 20;  text-align:center;padding: 0; height: 32px;background: #fff; border-bottom: #2E6047 1px solid;}
 #menu_poz nav { max-width:1200px; margin: 0 auto 0px;  text-align: right;    }
 
/*#menu_poz nav a {  display: inline-block; padding: 0px 20px;  color: #2E6047;   font-size: 15px; line-height: 24px; }
#menu_poz nav a:hover { color: #c00; text-decoration:underline;  }
 */

/* # # # MENU GŁÓWNE # # #  */
#menu { width:100%; margin:0;  padding:0; list-style-type:none; }
/* - - - a - - - */			
#menu > li > a {display:table-cell; width:100%;vertical-align: middle; height: 25px;  padding: 4px 17px 0px 17px; text-decoration:none;
 text-align:center; color: #2E6047; text-transform:uppercase;   border-bottom: transparent 3px solid;  font-weight: normal; font-size: 16px;  line-height: 18px;}
#menu > li:hover > a {color: #c62829;   border-bottom: #c62829 3px solid; background:#fff;  }

/* ----- ROZWIJANA CZĘŚĆ POZIOMEGO MENU -------------------- */
#menu > li {position:relative; display: inline; vertical-align: middle;margin:0;   text-align:left; z-index:999;  }
#menu > li:hover > ul { visibility:visible;  z-index:999; width:100%;}
			
 /* MENU rozwijane POJEDYŃCZE */
#menu > li > ul { visibility:hidden; position:absolute; top: 17px;  left:-21px; list-style-type:none; background:#fff;  border-left: #c62829 1px solid;}
#menu > li > ul > li.pm { margin:0; padding:0;  } 
/* - - - a - - - */			
#menu > li > ul > li.pm > a { display:block;width:100%;   text-decoration:none; margin: 0 1px 0 1px;  padding:7px 7px 7px 7px; color: #2E6047;
			border-bottom: #ccc 1px solid;  border-right: #c62829 1px solid;  background:#fff; box-shadow: 2px 3px 7px #777; 	font-size: 14px;  line-height: 18px;}       
#menu > li > ul > li.pm > a:hover {width:100%; color: #000; background: #ccc;}   

/* --- NAGŁÓWEK //////////////////////////////////---*/
#NAG_ZEWN  { margin: 0 0 0px 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; min-width:320px;   }
#NagLewy a {color: #000; font-weight: normal; font-size: 21px;  line-height: 24px;}
.logo {display:inline; height:77px;margin: 0 0 0 14px; vertical-align:top;}

#NagSrod  {display:table-cell; text-align:center; vertical-align: middle; width:50%; }
.fb {position: absolute; right:230px; top:14px;}


#NagPrawy {position: relative; display:table-cell; text-align:right; vertical-align: text-top; vertical-align: top; width:240px; margin: 0 2px 0 0; padding:0px 20px 0 0; color: #aaa; }
#NagPrawy a { display:block; margin: 0 0 0px 0; font-size: 28px; line-height: 28px; }
#NagPrawy h1, #NagPrawy strong { color: #333; margin: 0  0 14px 0; font-weight: normal;  font-family: 'Montserrat', Tahoma, Arial, sans-serif; font-size: 21px; line-height: 35px; white-space:nowrap;}

#NagPrawy img {vertical-align:middle}

/* OBRAZ 1 ////////////////// */
 section.image { position: relative; height: 540px; vertical-align: text-top; vertical-align: top; margin: 0 auto;}	
.komp {display:block;}
.smart {display:none;}
.haslo {position: absolute; bottom:14%; left: 50%;     transform: translateX(-50%); color: #fff; text-align:center; font-size: 35px;line-height: 49px; text-shadow: #000 1px 1px 1px;}

 #masaze h2, #masaze h1, h3 {color: #fff; margin: 0px 0 0 0; text-align:center;font-weight: normal;  font-size: 36px; line-height: 48px;} 
  #masaze p {color: #fff; margin: 0px 0 0 0; text-align:center;font-weight: normal;  font-size: 18px; line-height: 18px;} 
.BLOK1_ZEWN  {clear:both;padding: 0 0 49px 0;background: #2E6047; /*  background: linear-gradient(#885536, #F5D791, #885536);  */ }
.BLOK2_ZEWN  {clear:both; background: #fff; border-top: #ccc 1px solid;}

.Blok1WEWN  { text-align:left; margin: 0px auto; font-size: 16px;  line-height: 24px; padding:20px 0 20px 0;  }
.Blok1WEWN > img {z-index:999; max-width: 100%!important; }

.BLOK_header {clear:both;padding: 0 0 0px 0;background: #2E6047; }

#Blok1Lewy  {display:table-cell; width:55%; vertical-align: text-top; vertical-align: top; text-align: left; padding: 21px 21px  21px 21px}
#Blok1Srod  {display:table-cell;  text-align:center; width:7%; padding: 21px 21px  21px 21px}
#Blok1Prawy {min-height: 480px;display:table-cell; width:38%; vertical-align: text-top; vertical-align: top; text-align: left; padding: 21px 7px 21px 21px}
h2 {color: #2E6047; margin: 1rem 0 0.5rem 0; text-align:left; font-weight: normal;  font-size: 28px; line-height: 28px; }
#Blok1Lewy h3 {color: #2E6047; margin: 14px 0 7px 0; text-align:left; font-weight: normal; font-size: 24px; line-height: 28px; }
#Blok1Prawy> img, #Blok1Lewy> img, #BlokLmenu img  {max-width: 100%!important; height: auto }
#Blok1Lewy > p {margin: 1rem 0 1rem 0}


.fot {display: inline-block; margin:21px 14px 7px 7px; vertical-align: middle; }
.fotogr { margin: 0 12px 0px 0; border: solid 1px #fff;  box-shadow: 2px 3px 7px #000; -webkit-box-shadow: 2px 3px 7px #000; -moz-box-shadow: 2px 3px 7px #000;}

table {border-right: #ddd 1px solid;border-bottom: #ddd 1px solid;}	
td {padding: 3px 7px; border-top: #ddd 1px solid;border-left: #ddd 1px solid;border-top: #ddd 1px solid;}
	
 iframe { max-width: 100% !important; }
 
#lista_ofer {display:block; width:100%;  margin: 0px auto;text-align: center; }

#lista_ofer a {display: inline-block; position: relative;  color: #fff; background: #777; border: #fff 2px solid; vertical-align: text-top; vertical-align: top; 
width: 250px; height:250px; text-align: center;  padding: 0;  margin:49px 21px 190px 21px;   font-size: 15px;  line-height:18px;	border-radius: 50%;} 
 #lista_ofer a:hover { border: #ffc 2px solid; } 
 
#lista_ofer  h3 {display:block;width: 250px; margin: 257px 0 0 0; text-align:center; color: #fff;  font-weight: bold; font-size: 21px;  line-height:24px; text-shadow: #000 1px 1px 2px; }
#lista_ofer p { text-align:center; color: #fff; margin: 7px 0 0 0;  font-size: 16px;  line-height:21px;}
#lista_ofer a:hover h3, #lista_ofer a:hover p {color: #ffc;}
#lista_ofer span {display: block;  margin: 7px auto;	  padding: 8px 12px; color: #2E6047; border: 1px solid #2E6047;	 border-radius: 7px;  background-color: #F5E8D3;   text-align: center;    font-size: 16px;  line-height: 1.25;  transition: all .15s ease-in-out;
}

.wiecej {   display: block;  margin: 7px auto;	  padding: 8px 12px; color: #2E6047; border: 1px solid #2E6047;	 border-radius: 7px;  background-color: #F5E8D3;   text-align: center;    font-size: 16px;  line-height: 1.25;  transition: all .15s ease-in-out;
}


#lista_ofer  a:hover span:hover, .wiecej:hover {color: #fff; background: #2E6047; }
#lista_ofer  a:hover span {color: #fff; background: #2E6047; border: 1px solid #F5E8D3;	}

 #lista_ofer a.ofer1 {background: #aaa  url(grafiki/masaz-profilaktyczny.jpg) no-repeat top center;}
 #lista_ofer a.ofer2 {background: #aaa  url(grafiki/masaz-relaksacyjny.jpg) no-repeat top center;}
 #lista_ofer a.ofer3 {background: #aaa  url(grafiki/logo-dien-chan.jpg) no-repeat top center;}
 #lista_ofer a.ofer4 {background: #aaa  url(grafiki/masaz-odchudzajacy.jpg) no-repeat top center;}
 #lista_ofer a.ofer5 {background: #aaa  url(grafiki/masaz-kregoslupa.jpg) no-repeat top center;}
 #lista_ofer a.ofer6 {background: #aaa  url(grafiki/drenaz-limfatyczny.jpg) no-repeat top center;}
 #lista_ofer a.ofer7 {background: #aaa  url(grafiki/masaz-relaksacyjny.jpg) no-repeat top center;}
 
#lista_ofer div.szer {display:table-cell; width:  250px; height: 250px; vertical-align: middle;text-align: center; margin:0 auto;} 
#lista_ofer img {display: block; max-width: 100%!important; border: #ccc 1px solid; margin: 0px auto 0px; /*  max-width: 160px; height:110px */;}

.podfoto {display: inline-block;  margin:0px 14px 7px 7px; vertical-align: middle; }
.foto { border: solid 1px #fff;  box-shadow: 2px 3px 7px #777;}
.foto:hover{ opacity: 0.7 }

	

 
#menu_sm {display:none; }
/* ---  MENU dla SMARTFONÓW -------- */
#menu_sm {position: fixed; top:1px; right:7px;  text-align: center;}
#menu0 { width: 180px; 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 { 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:#fff; color: #333;}

dt.poziom1  { color: #777; background: #eee; border: #ccc 1px solid; margin: 1px 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;}

dt.poziom2  { color: #fff; background: #aaa; border: #ccc 1px solid; margin: 0px 0 1px  0; padding: 0 0 0 4px; border-left: #ddd 1px solid; }
dt.poziom2:hover {background:#fff; color: #333;}

dd.poziom2  {  margin: 0px 0 0px  0px; padding: 0 0 0 3px;  color: #fff; background: #eee; border: #ccc 1px solid; border-left: #aaa 7px solid;  font-size:15px; line-height:36px;  	}
dd.poziom2:hover {background:#fff; color: #333;}

dd.poziom3  { color: #777; background:#eee; border: #ccc 1px solid; margin: 0px 0 3px  14px; padding: 0 0 0 10px; border-left: #ddd 3px solid; }
dd.poziom3:hover {background:#fff; color: #333;}

.rozwin {display:inline-block; float: right; width: 40px; height: 40px; color: #fff; background: #2E6047; border: #ccc 1px solid; font-size:40px; line-height:36px; text-align: center; border-left: #ccc 1px solid;  }
#menu0 span {color: #777; font-size:22px; line-height:30px;}
#menu0 i {color: #777; font-size:16px; line-height:30px;}

dd a:link, dl a:visited { display: block;  color: #333; background: #eee; }
dd a:hover, dl a:hover { display: block; background:#fff; color: #777; }
/*Koniec utawien menu*/ 			
			
 /* Pasek blokujący się na Górze strony */
  .fixed { position: fixed; top: 0;  }
  .sticky { width: 100%;       text-transform: uppercase; z-index: 999  }


            #footer {
                background-color: #2E6047; 
                color: #fff;
                padding: 25px 50px;
                font-size: 14px;
                text-align: center;
            }


/* ---- 1000px ------------- */
 @media all and (max-width:1000px) 
{
#Blok1Lewy {display: block; width: 95%; margin: 0 auto;  padding: 0; margin: 7px; }
.komp, #Blok1Srod {display:none;} 
.smart {display:block;}
.haslo {text-shadow: #000 1px 1px 1px;  font-size: 28px;  line-height: 36px; }
}

/* ---- 777px ------------- */
 @media all and (max-width:777px) 
{
#menu_sm {display:block; z-index: 999}
#MENU_ZEWN {display:none;}
#NagWEWN  {position: relative;  max-width:320px; margin: 0 auto;  padding:10px 0px 0 0; }
#NagLewy {display: block; width:100%; text-align:center; padding: 0; margin: 21px 0 0 0}
#NagSrod  {display: block; width:100%; padding: 0;}
#NagPrawy {display: block; width:100%;text-align:center; padding: 0;}
.logo, #NagPrawy img {max-width: 100% !important; height: auto; margin:4px;   display: inline-block;  }
.fb {position: absolute; left:0px; top:14px;}

}

/* ---- 640px ------------- */
 @media all and (max-width:640px) 
{
#Blok1Prawy    {display: block;  width: 96%; height: auto; min-width: 320px; min-height: 100px;padding: 0; margin: 7px  7px 7px 7px;}
#BANER_zewn {background: url('grafiki/baner2_s.jpg') no-repeat top center; height:163px;  }
}