/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/
html {
	overflow-y: -moz-scrollbars-vertical;
	overflow-y: scroll;}

html ,body {
  min-width: 100%;
  height: 100%;
  min-width:680px;
  min-height:100%;
}
@font-face {
    font-family: 'embassy_btregular';
    src: url('../font/embassy.eot');
    src: url('../font/embassy.eot?#iefix') format('embedded-opentype'),
         url('../font/embassy.woff2') format('woff2'),
         url('../font/embassy.woff') format('woff'),
         url('../font/embassy.ttf') format('truetype'),
         url('../font/embassy.svg#embassy_btregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Fira_Code';
    src: url('../font/FiraCode-Regular.eot');
    src: url('../font/FiraCode-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/FiraCode-Regular.woff2') format('woff2'),
        url('../font/FiraCode-Regular.woff') format('woff'),
        url('../font/FiraCode-Regular.ttf') format('truetype'),
        url('../font/FiraCode-Regular.svg#FiraCode-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




.naglowek{
	z-index: 100;
	position: fixed;
	width: 100%;
	/*transform:skew(20deg,-15deg); 
	-webkit-transform:skew(20deg,-15deg); 
	-moz-transform:skew(20deg,-15deg); 
	-o-transform:skew(20deg,-15deg); */
}

.content{
z-index:1;
background-color: #FFF;
margin-top: 16em;
 padding-bottom: 80px;
}

.stable{
z-index:100;
position: fixed;
background-color: #0000FF;
}

.wielki_bialy_prostokat{
	height: 18em;
	position: fixed;
	top:0;
	width:100%;
	/*background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 12%, rgba(255,255,255,1) 46%, rgba(255,255,255,1) 94%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(12%, rgba(255,255,255,1)), color-stop(46%, rgba(255,255,255,1)), color-stop(94%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 12%, rgba(255,255,255,1) 46%, rgba(255,255,255,1) 94%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 12%, rgba(255,255,255,1) 46%, rgba(255,255,255,1) 94%, rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 12%, rgba(255,255,255,1) 46%, rgba(255,255,255,1) 94%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 12%, rgba(255,255,255,1) 46%, rgba(255,255,255,1) 94%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );*/
	background-color: white;
	z-index: 2;
	
}

.contanier{
	position: relative;
	min-height: 100%;
}
.menubar{
	position: fixed;
	top:0;
	width: 100%;
	height: 8px;
	background-color: #575757;
	z-index:115;
}
.menu{
	position: relative;
	top: 6px;
	text-align: right;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
	z-index: 100000;
	font-family: calibri;
}
 ul.menulist, ul li.menulist{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	z-index:4;
}
.menulist li{
	display: inline;
	white-space: nowrap;
	vertical-align:-16px;
	}
.menulist-active{
	/* padding-left: 71px; */
	padding-top:16px;
	vertical-align:-16px;
	background: url("../img/menu1.png") no-repeat;
	z-index:4;
	background-size: 50% 50%;
}

.left_side{
	background-image: url("../img/Papug_Lewy.png");
    background-repeat: no-repeat;
    background-position: 0px -130px;
	background-size: 30% 100%; 
	width: 30%;
	height: 100%;
	display:inline;
	position:fixed;
	background-size: 100%;
	top:8px;
	z-index:3;
}
.center{
width:47%;
display:block;
position:relative;
left:30%;
}
.right_side{
	background-size: 100%;
	background-image: url("../img/Liscie_prawe.png");
    background-repeat: no-repeat;
    background-position: 75% 0px;
	background-size: 25% 100%; 
	width: 22%;
	height: 100%;
	display:block;
	position:fixed;
	background-size: 100%;
	top:8px;
	right: 0%;
	z-index:3;
}

.footer{
	background-color: #fff;
	background-image: url("../img/kropka.png");
	background-position: 0px 20px;
    background-repeat: repeat-x;
    margin-left: 20%;
    margin-right: 20%;
	padding-top: 20px;
	text-align: right;
	width: 60%;
	position: fixed;
	height: 35px;
	bottom: 0px;
	
	}
/* `Container
/* `Container
----------------------------------------------------------------------------------------------------*/
.main{
padding-top:50px;
}
.container{
  margin-top: 8px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  background: #FF0000;
 
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid
 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}



@media (max-width: 959px) { 
body{
min-width:959px;
}
.right_side,
.left_side,
.center
{position: absolute;}


 }

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}



/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after,
.container_16:before,
.container_16:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after,
.container_16:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12,
.container_16 {
  zoom: 1;
}

@media only screen and (max-width: 1024px) {
  /* For tablets: */
	.left_side{display: none;}
	.center{left:2%;}
	.menu{width:100%;text-align:left;}
}

h1 {
	  font-family: Fira_Code;
	  font-size: 4em;
	  text-align: left;
	  line-height: 1em;
	  margin-left: 5%;
	  color: #575757;
	  font-weight: lighter;
	  margin-top: 1em;
}