[canvas=container],
[off-canvas] {
    padding: 0px;
}
.custom-fixed-width {
  width: 300px;
}
.custom-fixed-height {
  width: 400px;
}

.custom-fluid-width {
  width: 50%;
}

.custom-responsive-width {
  width: 70%;
}

[class*=js-] {
    cursor: pointer;
}

html, body {
	background-color: #222222;
}
#header {
    position: absolute;
    width: 100%;
    background-color: #222222;
    z-index: 9999;
}
#logo_title {
    font-weight: bold;
    color: #FFF;
    /* float: right; */
    margin-left: 100px;
    font-size: 30px;
    width: 50px;
    line-height: 30px;
    position: absolute;
    top: 5px;
}

.js-toggle-left-slidebar {
    float: left;
}
.js-toggle-right-slidebar {
    float: right;
}
#legenda {

}
.container {
    padding-bottom: 10px
}
#adverts {
	margin-top: 20px;
}

.advert {
	border-radius: 3px;
	border: 1px solid #727272;
	margin-bottom: 10px;
	padding: 3px;
}
#header .form_szukaj {
margin-top: 48px;
    position: absolute;
    margin-left: 830px;
}
#start .form_szukaj {
    margin-top: 90px;
    position: relative;
}
.form_szukaj_left {
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	display:none;
	    float: left;
}
.szukaj {
	width: 220px;
	height: 50px;
}
.szukaj1 {
	width: 71%;
}
.szukaj2 {
	width: 25%;
}
.fb-like{
    /* float: left; */
    /* margin-right: -35px; */
    margin-top: 80px;
    padding-bottom: 10px;
    /* margin-left: 110px; */
    position: absolute !important;
    left: 110px;
}
.spacer {
	position:absolute; top: 20px; right:15px; width:150px
}
.spacer a{
	color: #FFF;
}
.spacer a:hover{
	color: #C00000;
}
.navicon-spacer {
	background-image:url("/images/spacer.png");
	    background-repeat: no-repeat;
    height: 23px;
    width: 21px;
    float: right;
    	right: 0px;
	top: 0px;
	position: absolute;
}

.navbar {

	background-size: 100%;
	background-repeat: no-repeat;
	
	/* Bootstrap Changes */
	border: none;
	width: 100%;
	left: auto;
	right: auto;
	    height: 110px;
	-webkit-box-shadow: 0px 6px 51px -13px rgba(0,0,0,0.43);
-moz-box-shadow: 0px 6px 51px -13px rgba(0,0,0,0.43);
box-shadow: 0px 6px 51px -13px rgba(0,0,0,0.43);
}

#menu {
	display: none;
}

.navbar #logo {
	text-align: center;
	display: block;
	margin-left:10px;
	width: 255px;
}
#logo a{
	display: block;
    overflow: auto;
}
#logo2 {
	margin-top: 4px;
	text-align: center;
	display: block;
}
#top-arrow {
	padding-top: 17px;
	padding-bottom: 13px;
}

.navbar .js-toggle-left-slidebar {
	width: 58px;
	float: left;
	padding: 14px;
	color: #FFF;
	margin-top: 60px;
}
.navbar .js-toggle-left-slidebar:hover {
	color: #C00000;
}


.navbar .js-toggle-right-slidebar {
	width: 50px;
	float: right;
	padding: 14px 0 0px 14px;
	color: #FFF;
	margin-top:60px
}
.navbar .js-toggle-right-slidebar:hover {
	color: #C00000;
}

.js-toggle-left, .js-toggle-right, .sb-open-left, .sb-open-right, .sb-close {
	cursor: pointer;
}

#sb-site {
	box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
}

.sb-right {
}

.navicon-line {
	width: 24px;
	height: 4px;
	border-radius: 1px;
	margin-bottom: 3px;
	background-color: #fff;
}

ul.navbar-nav {
display: block;
    top: 10px;
    margin-bottom: 10px;
    left: 310px;
    margin-left: 30px;
}

#footer {
	position: absolute;
	bottom: 0px;
	height: auto;
	width: 100%;
	background-color: #222222;
	z-index: 9999;
}
#top #footer #copyright {
	color: #CCC;
	text-align: center;
	font-size: 10px;
	padding: 5px;
}


/* Slidebars */

.sb-slidebar {
	background-color: #222222;
}

/* ---------------
 * 003 - Slidebars
 */

.sb-slidebar {
	background-color: #222222; /* Background colour. */
	color: #e8e8e8; /* Text colour. */
}

.sb-slidebar a {
	color: #C00000;
	text-decoration: none;
}

.sb-slidebar a:hover {
	color: #C00000; /* Link hover colour. */
	text-decoration: underline;
}

/* Main Menu */
.sb-menu { /* Apply to <ul> or <ol>. */
	padding: 0;
	margin: 0;
	list-style-type: none;
font-size: 11px;
}

.sb-menu li {
	width: 100%;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1); /* Will lighten any background colour you set. */
	border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Will darken any background colour you set. */
}

.sb-menu > li:first-child {
	border-top: none; /* Removes top border from first list item.. */
	border-bottom: none;
	padding: 1em !important;
	font-weight: bold;
	color: #FFF;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.1);
	    float: left;
}

.sb-menu > li:last-child {
	border-bottom: none; /* Removed bottom border from last list item. */
}

.sb-menu li a {
	width: 100%; /* Makes links full width. */
	display: inline-block;
	padding-top: 5px;
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 5px; /* Creates an even padding the same size as your font. */
	color: #f2f2f2;
	text-transform: uppercase;
	max-height:60px;
}

.sb-menu li a:hover {
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.05); /* Will lighten any background colour you set. */
}

#opis {
	padding:0 0 100px 100px;
}

/* Borders */
.sb-left .sb-menu li a {
	border-left: 3px solid transparent;
	padding:20px;
}

.sb-left .sb-menu li a:hover {
	border-left: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}

.sb-right .sb-menu li a {
	border-right: 3px solid transparent;
}

.sb-right .sb-menu li a:hover {
	border-right: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}

/* Left */


.sb-menu li .sb-open-right, .sb-menu li small {
	display: inline-block;
	padding: 14px;
}

.sb-menu li img {
	margin-right: 10px;
	position:relative;
	max-width:20px;
}

/* Right */
aside#about-me {
	padding: 14px 14px 14px 14px;
}

img.img-me {
	margin: 14px auto;
	border: 4px solid #fff;
}

/* Slidebar Type */

.sb-slidebar, .sb-slidebar h3 {
	color: #F0F0F0;
}

.sb-slidebar ul.sb-nav li a {
	color: #DEDEDE;
}

.sb-slidebar ul.sb-nav li a:hover {
	color: #C7C7C7;
	text-decoration: none;
}

.sb-slidebar ul.sb-nav li span:hover {
	color: #C7C7C7;
}

/* Anchor Links */
#download, #api, #options, #helper-classes {
	margin-top: -50px;
	padding-top: 50px;
}

/* Helper Classes */
.add-bottom-margin {
	margin-bottom: 15px;
}

.no-bottom-margin {
	margin-bottom: 0;
}

.add-top-margin {
	margin-top: 15px;
}

.no-top-margin {
	margin-top: 0;
}

.push-down {
	position: relative;
	top: 2px;
}
#overlay {
	background-color: #222222;
	position: absolute;
	z-index: 999999;
	opacity:0.9;
	width:100%;
	height:100%;
	display: ;
}

#start {
	background-color: #000000;
	position: relative;
	z-index: 999999;
	opacity: 1.0;
	width:400px;
	margin-left: auto;
	margin-right: auto;
	margin-top:10%;
	padding:20px 40px;
	border-radius:5px;
}
#start ul {
	padding: 0px;
	margin: 0px;

}

#start ul li{
	width:100%;
	height: 50px;
	list-style: none;
	line-height: 40px;
	margin-bottom: 20px;
	
}

#start ul li a{
	padding: 10px;
	display: block;
	font-size: 20px;
	border-radius: 3px;
	color: #ffffff;
	background-color: #222222;
}
#start ul li a:hover{
	display: block;
	font-size: 20px;
	color: #f6f6f6;
	background-color: #c00000;
}
@media (min-width: 1400px) {
	#opis {
	padding:0 200px 0 200px;
}
	#start #logo_title {
    top: 30px;
}
}
@media (max-width: 1400px) {
	#opis {
	padding:0 150px 0 150px;
}
	#start #logo_title {
    top: 30px;
}

	.navbar .sb-toggle-right {
	margin-top:75px
}
	.navbar .sb-toggle-left {
	margin-top:75px
}
	#logo2 {
	margin-right: 0px
	}
#start {
	margin-top:5%;
}
}

@media (max-width: 1330px) {
	#logo2 {
	display: none;
	}	
	
}
@media (max-width: 1290px) {
	
	#start #logo_title {
    top: 30px;
}

#start_title {
    font-size: 24px !important;
	margin-top: 60px !important;
	margin-bottom: 20px !important;
}
#start #logo {
    margin-left: 0px !important;
	    width: 100%;
}
#start .form_szukaj {
    margin-top: 50px;
    position: relative;
}
#header .form_szukaj {
	 display: none;
}
}
@media (max-width: 980px) {
	#menu {
    display: block;
}
.navbar-left{
	float:left !important;
	margin-left: 10px;
	} 
#start {
    margin-top: 10%;
	
}

.navbar #logo {
    margin-left: 50px;
}
#start #logo {
    margin-left: 0px !important;
}
.fb-like {
    margin-left: 100px;
}

.form_szukaj_left {
	display: block;
	margin-left: 10px;
}
		ul.navbar-nav {
		display: none;
	}
}

@media (max-width: 768px) {
#opis {
	padding:0 50px 0 50px;
}
#start {
	margin-top:10%;
}
#left_menu #weather {
    float: left; 
	display: block !important;
	position: relative;
	
}

		.navbar .sb-toggle-right {
	margin-top:0px
}
		.navbar .sb-toggle-left {
	margin-top:0px
}
.container {
    padding-bottom: 0px
}
.spacer {
    text-align: center;
    position: relative;
    top: 15px;
    width: 120px;
    margin-left: auto;
    margin-right: auto;
	right: auto;
	left: auto;
	font-size: 10px;
}
.navbar .sb-toggle-right {
    color: #FFF;
    position: absolute;
    right: 0px;
    top: 0px;
font-size: 10px;

}
.navbar .sb-toggle-left {
	font-size: 10px;

}
.navicon-spacer{
transform:scale(0.5); 
-webkit-transform:scale(0.5); 
-moz-transform:scale(0.5); 
-o-transform:scale(0.5);
}
#copyrights {
	font-size: 9px;
}
#copyrights p{
	line-height: 10px;
}
#start #logo {
    margin-left: 0px !important;
}
}
@media (min-width: 950px) {
.navbar .js-toggle-left-slidebar {
	display: none;
}
}
@media (max-width: 530px) {
	
	.navbar {

    height: 100px;

}
#pano #opis {
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}
#opis {
	padding:0  10px 0 10px;
}

	.fb-like {
   display:none !important;
}
#header #weather {
   display:none !important;
}
.navbar #logo{
	display:none;

}
.navbar #logo img{
	height:50px;

}
.navbar #logo #logo_title{
	font-size:14px;
	line-height:18px;
	margin-left: 50px;
	margin-top: 5px;
}
#start {
	width:300px;
	margin-left: auto;
	margin-right: auto;
	margin-top:10%;
	padding:10px 20px;
	border-radius:5px;
}
#start_title {
    font-size: 24px;
	margin-top: 60px;
	margin-bottom: 20px;
}
#start .szukaj {
    width: 190px;
    height: 50px;
}
.navbar {
    height: 0px;
}	
.js-toggle-left-slidebar {
	margin-top: 0px !important;
}
.js-toggle-right-slidebar {
	margin-top: 0px !important;
}
}

@media (min-width: 530px) {
#left_menu #logo{
	display:none;
	margin-left: 10px !important;
}
#left_menu #logo img {
    height: 100px;
}

}


.img-responsive-stretch {
	display: block;
	width: 100%;
	height: auto;
}
#top .navbar.navbar-default.navbar-fixed-top.sb-slide .container .nav.navbar-nav.navbar-left li {
	margin-top: 0px;
	margin-right: 0px;
}
/* Submenus */
.sb-submenu {
	display: none;
	padding: 0;
	margin: 0;
	list-style-type: none;
	background-color: rgba(255, 255, 255, 0.05); /* Submenu background colour. */
}

/* Caret */
span.sb-caret {
	width: 0;
	height: 0;
	display: inline-block;
	margin: 0 5px;
	border: 5px solid transparent;
}

span.sb-caret { /* Caret Down */
	border-top: 5px solid;
	border-bottom: 0px solid transparent;
}

.sb-submenu-active > span.sb-caret { /* Caret Up */
	border-top: 0px solid transparent;
	border-bottom: 5px solid;
}

#copyrights {
	margin-top: 20px;
	padding: 14px;
	color: #f6f6f6;
	text-align: center;
	font-size: 11px;
}
#copyrights a{
	color: #f6f6f6;
}
#copyrights a:hover{
	color: #fff;
}
#copyrights p{
	margin: 0;
	padding: 0;
	line-height: 14px;
}
.navbar-right {

}
li.menu-start a {
    background-image: url("../images/map.png");
    background-repeat: no-repeat;
	background-position: center top;
}
#start_title {
    font-size: 30px;
    color: #ffffff;
	text-align: center;
	margin-top: 100px;
	margin-bottom: 30px;
}

#start .menu-lokalizacje a {
    background-image: url("../images/placeholders.png");
    background-repeat: no-repeat;
background-position: 87% 25%;
}
li.menu-lokalizacje a {
    background-image: url("../images/placeholders.png");
    background-repeat: no-repeat;
background-position: center 25%;
}
li.menu-lokalizacje a img {
	height:20px;
}
.menu-lokalizacje a:hover{
background-color: #C00000;
}
li.menu-panoramy a {
    background-image: url("../images/panorama.png");
    background-repeat: no-repeat;
    background-position: center 25%;
}
#start .menu-panoramy a {
    background-image: url("../images/panorama.png");
    background-repeat: no-repeat;
    background-position: 90% 50%;
}
.menu-panoramy a:hover{
background-color: #C00000;
}
#start .menu-szlaki a {
    background-image: url("../images/map-location.png");
    background-repeat: no-repeat;
background-position: 88% 25%;
}
li.menu-szlaki a {
    background-image: url("../images/map-location.png");
    background-repeat: no-repeat;
background-position: center 25%;
}
.menu-szlaki a:hover{
background-color: #C00000;
}
li.menu-spacer a {
    background-image: url("../images/map.png");
    background-repeat: no-repeat;
background-position: center 25%;
}
.navbar-default .navbar-nav>li>a:hover{
background-color: #C00000;
    padding-top: 68px;
    padding-bottom: 10px;
    /* line-height: inherit; */
    font-size: 13px;
    /* margin-right: 10px; */
    display: block;
   height: 98px;
}
.menu-gmina{
    background-image: url(../images/flag.png);
    background-repeat: no-repeat;
    background-position: center 25%;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 68px !important;
    font-size: 13px;
    background-color: #333333;
	border-radius: 0 0 3px 3px;
}
.menu-gmina:hover{
background-color: #C00000;
}
#opis {
	-webkit-box-shadow: 0px -6px 51px -13px rgba(0,0,0,0.43);
-moz-box-shadow: 0px -6px 51px -13px rgba(0,0,0,0.43);
box-shadow: 0px -6px 51px -13px rgba(0,0,0,0.43);
    border-radius: 3px;}
	
	/*
  Docs at http://http://simpleweatherjs.com

  Look inspired by http://www.degreees.com/
  Used for demo purposes.

  Weather icon font from http://fonts.artill.de/collection/artill-weather-icons

  DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break.
*/

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
  width: 100%;
  height: 100%;
  background: #1192d3 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/austin-2.jpg) no-repeat bottom right;
  background-size: cover;
}

body {
  font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

#weather {
    /* width: 500px; */
    margin: 0px auto;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    right: 10px;
    top: -10px;
}

i {
  color: #fff;
  font-family: weather;
  font-size: 70px;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

#weather h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}

#weather ul {
  margin: 0;
  padding: 0;
}

#weather li {
  background: #fff;
  background: rgba(255,255,255,0.90);
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}

#weather .currently {
  margin: 0 20px;
}
#pano #opis {
	padding-top: 150px;
	padding-bottom: 50px;
}