/* Editing should be kept to minimum */
html {
  font-family: Calibri,sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body {
  padding-top: 50px;
}
.container {
  width: 95%;
  max-width: 1200px;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: auto;
  margin-left: auto;
}
.clearfix{display: inline-block;}

/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix{display:block;}
/* End Hack */ 
@media (min-width: 768px) {
  .container {
//    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
//    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
//    width: 1170px;
  }
}
/*
#leftcol{
 width:15%; 
 float:left; 
 position:relative; 
 background-color:#FFFFFF; 
 padding:0px;
 }
*/
#maincol{
 width:90%; 
 float:right; 
 position:relative; 
 padding:0px; 
 overflow: none;
  }
ul.leftmenu {
    list-style-type: none;

    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ededed;
}

ul.leftmenu li {   cursor:pointer; float: left;}

ul.leftmenu li span {
    display: block;
    color: #000;
    text-align: left;
    padding: 5px 10px;
    text-decoration: none;
}

ul.leftmenu li akt {
    display: block;
    color: #000;
    text-align: left;
	background-color: #bbbbbb;
    padding: 5px 10px;
    text-decoration: none;
}

ul.leftmenu li:hover:not(.active) {background-color: #cccccc;}

ul.leftmenu li .active {background-color: #888888;}

ul.leftmenu li.left {float: left; }

.koniec {
    clear: left;
	padding: 10px;
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
footer {
  display: block;
}
#kreska { 
 height:1px; 
 background-color: #444444;
 overflow: hidden;
 position: relative;
 width: 99%;
}
a {
  color: #FF0032;
  background-color: transparent;
  text-decoration: none;
}
a:active,
a:hover {
  text-decoration: underline;
  outline: 0;
}
hr {
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
#komunikat {
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
}

.szary {
  color: #777;
}
h1 {
  margin: .7em 0;
  font-size: 3em;
}
h2 {
  margin: .35em 0;
  font-size: 2em;
}
.duzy {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.tlusty {
  font-weight: 700;
  font-size: 1.5em;
  margin-bottom: 10px;
}

.lead {
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
}
@media (min-width: 600px) {
  .lead {
    font-size: 21px; }
  .duzy {
    font-size: 50px; }

}

.topnav {
  border-width: 0 0 1px;
	top:10px;
	right:10px;
	left: 10px;
  border: 1px solid transparent;
  position: fixed;
  z-index: 1010;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000080;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #0000FF;}

ul.topnav li a.active {background-color: #FF0032;}

ul.topnav li.right {float: right;}

ul.topnav li.left {float: left; }

.mobile {hight: auto; }

.dropbtn {
    background-color: #000080;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border: none;
    max-width: 120px;
    cursor: pointer;
}

.dropdown {
    display: block;
float: right;
}

.dropdown-content {
    display: none;
	position: fixed;
    background-color: #f9f9f9;
    min-width: 220px;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a.active {background-color: #FF0032;}
.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #FF0032;
}

@media screen and (max-width: 640px){
ul.topnav li.left {display: inline-block;}
ul.topnav li.right {display: inline-block;}
.mobile {display: block;}
    ul.topnav li {display: none;
	 float: none;}
}

@media screen and (min-width: 650px){
	.mobile {display: none;}
}


.pokazslajdow{ /* rozmiar modulu na strone glowna */
		float: left; 
		width: 100%;
		height: 350px;
		position: relative;
		overflow: hidden;
}

@media (max-width: 700px) {
  .pokazslajdow {
		height: 250px;
  }
}

@media (max-width: 480px) {
  .pokazslajdow {
		height: 180px;
  }
	#static_text_area {
	width:60px;
}
}

.slajdyprawe{ /* rozmiar modulu w kolumnie */
		width: 100%;
		height: 220px;
		position: relative;
		overflow: hidden;
}

.smooth_slider_container {
	position: relative;
	height:100%;
	overflow: hidden;
}

.smooth_slider_panel {
	position: absolute;
	top:0px;
	left:0px;
	background-position: 0% 0%;
	background-repeat:no-repeat;
}

.noflicker {
	/* this is to prevent flickering on some Android devices */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
}

/* following are custom style for the demos. Customize as desired. */


#img_msg_area {
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	width:220px;
	min-height:20px;
	background-color:white;
	position:absolute;
	left:0px;
	top:10px;
	z-index: 120;
	font-size:1.2em;
	padding:0.3em;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
}

#static_text_area {
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	width:210px;
	background-color:white;
	position:absolute;
	right:10px;
	bottom:10px;
	z-index: 120;
	padding:0.5em;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
@media (max-width: 480px) {
#static_text_area {
	width:80px;
}
#static_text_area > img {
	width:60px;
}

}
#resume {
	position: absolute;
	top:5px;
	right:5px;
	background: darkred;
	color: white;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	padding: 5px 5px;
	font-size: 1em;
	z-index: 120;
}

#throbber {
	position: absolute;
	top:30px;
	right:100px;
	z-index: 150;
}

/* galeria */
div.gallery {
padding: 5px;
margin: 5px;
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 5px;
    float: left;
    width: 33%;
}

@media only screen and (max-width: 750px){
    .responsive {
        width: 44%;
	padding: 5px;
    }
}

@media only screen and (max-width: 480px){
    .responsive {
	padding: 5px;
        width: 98%;

    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* boxy */
.box {
    padding: 0 6px;
    width: 90%;
    float: left;
//    height: auto;
//  border: 2px solid #73AD21;  
}

.boxt {
	align: center;
    padding: 6px 6px;
    width: 70%;
    float: left;
//    height: auto;
//  border: 2px solid #73AD21;  
}


.boxm {
	align: center;
    padding: 6px 6px;
    width: 28%;
    float: left;
//    height: auto;
//  border: 1px solid #73AD21;  
}


@media only screen and (max-width: 750px){
    .boxm, .boxt {
        width: 48%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 600px){
    .box, .boxm, .boxt {
	align: center;
        width: 95%;
    }
}
.poziom {  
  margin: 20px 0; 
}
.koniec {
    clear: left;
	padding: 10px;
}
.prawy {
  float: right;
  right: 5px;
  left: auto;
  padding-right: 15px;
  padding-left: 0;
  text-align: right;
}

.lewy {
  float: left;
  right: auto;
  left: 5px;
  padding-right: 15px;
  padding-left: 15px;
  text-align: left;
}
img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-circle {
  border-radius: 50%;
}

::-webkit-input-placeholder { /* Edge */
  color: red;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::placeholder {
  color: red;
}