/* style glуwne ----------------------------------------- */

body {	
	font-family: 'Trebuchet MS', Arial, sans-serif;
	font-size: 100%;
	color: #444;
	background: #e3c888 /* url(/foto/Busko.jpg) no-repeat 50% 50% */;
}

a:link, a:visited {
	text-decoration: none;
	color: #94893a;
	
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	
	transition: all 0.3s linear;

	/**/
}
	
a:hover {
	color: #000;
	background-color:#9CC;
}
	
h3 {	
	font-size: 90%;
	letter-spacing: 1px;
}

#wrap {
	margin: 20px auto 0 auto;
	padding: 10px 0 0 0;
	background: white;
	
	background: rgba(255,255,255,0.8);
	/**/
	max-width: 900px;
	
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	/**/
	
	
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
	box-shadow: 5px 5px 5px rgba(0,0,0,.5);
	/**/
}

/* header -------------------------------------*/
#header {
	border-bottom:1px solid #666; 
	width:100%;
	height: 100px;
	background:#eee;
}

#header #logo{
	float: left;
	font-size: 150%;
	margin: 40px 0 0 20px;
}
h1 { 
	font: 30px 'Luckiest Guy', arial, serif; 
}
#logo h2{
	font-size: 60%;
}

/* nawigacja główna ------------------------- */

#site_nav {	
	float: right;
	margin: 70px 10px 0 0;
}

#site_nav ul li{
	float:left;
	padding-left: 30px;
	font-size: 100%;
}
	
#site_nav ul li a:hover,
#site_nav ul li.active a,
#site_nav ul li a:focus {	
	color: #444;
}


/* tresc ---------------------------------- */

#main {	
	float: right;
	padding: 25px 0 0 0;
}


#content {	
	float: left;
	width: 60%;
	padding: 25px;
}

.article {
	margin: 0 0 20px 20px;

}
.article p { 
	line-height: 150%;
}

#dlugosci_wycieczek{
	width: 100%;
	margin-top: 20px;
}

#dlugosci_wycieczek td{
	border: 1px solid black;	
	padding: 10px;
}
#dlugosci_wycieczek tr:nth-of-type(3n-1){
	background-color:#6F9;	
}

#napis-1 {
  background: url(foto/pastelowy.jpg) no-repeat center center;
  background-size: cover;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

#napis-2 {
  background: url(foto/pastelowy.jpg) no-repeat top center;
  background-size: cover;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  cursor: pointer;
}
#napis-3 {
  background: url(foto/pastelowy.jpg) no-repeat top center;
  background-size: cover;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  cursor: pointer;
}

#napis-1 h1 {
  font-size: 200px;
  font-family: ChopinScript, sans-serif;
  text-align: center;
  -webkit-transition: text-shadow 1s ease;
  text-shadow: 0 0 1px rgba(0,0,0,.1);
  margin: 0;
  padding: 0;
}

#napis-2 h1 {
  font-size: 55px;
  font-family: ChopinScript, sans-serif;
  text-align: center;
  -webkit-transition: text-shadow 1s ease;
  text-shadow: 0 0 1px rgba(0,0,0,.1);
  margin-top: -75px;
  padding: 0;
}

#napis-3 h1 {
  font-size: 35px;
  font-family: Chunkfive Ex, sans-serif;
  text-align: center;
  -webkit-transition: text-shadow 1s ease;
  text-shadow: 0 0 1px rgba(0,0,0,.1);
  margin-top: -75px;
  padding: 0;
}

#maska{
    font-family: Chunkfive Ex, sans-serif;
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    border: 14px solid #fff;
    border-radius: .2em;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url(foto/pastelowy.jpg);
    -webkit-transform: rotate(-4deg);
    -moz-mask-image: url(foto/pastelowy.jpg);
    -moz-transform: rotate(-4deg);
    -o-mask-image: url(foto/pastelowy.jpg);
    -o-transform: rotate(-4deg);
    mask-image: url(foto/pastelowy.jpg);
    transform: rotate(-4deg);
}

/* aside ------------------------------- */

#aside {	
	float: right;
	width: 33%;
	
}

#aside h3 {	
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 1px;
	color: #930;
	margin: 20px 0 10px 0;
}

#aside p {	
	font-size: 80%;
	line-height: 150%;
}

#mapka img{
	margin: 10px 0px;	
}
#mapka li{
	line-height: 150%;	
}
#mapka {
	font-size: 80%;	
	padding: 0 0 20px 0;
}
/* stopka ----------------------- */

#footer {		
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 0;
	text-align: left;
}

#footer p {	
	margin: 0 0 4px 0;
	font-size: .8em; 
	line-height: 1.5; 
	color: #ccc;
}

#footer p a {	
	font-weight: bold;
	color: #ddd;
}
#footer p a:hover {	
	color: #fff;
}
	
#footer p img {	
	vertical-align: top;
}

/* kolko ----------------------- */
#circle{
	width: 150px;
	height: 150px;
	background: blue;
	color: white;
	position: absolute;
	top: 300px;
  left: 100%;
	margin-left: -150px;
	border-radius: 75px;
	
}
	
/* narzedzia css ---------------- */

.separator {	
	margin: 0 3px;
	color: white;;
}

.selfclear:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}