@font-face {
   font-family: BebasNeuewebfont ;
   src: url('/css/Comfortaa Thin.ttf');
}
body {font-family: BebasNeuewebfont, tahoma, Arial, Helvetica, sans-serif;}

checkbox{width: 70px; height: 70px;}
.oboksiebie{  
	display: inline-flex;	
    display:-webkit-flex;
	display: -ms-flexbox;
	flex-flow: row wrap;
	justify-content: center; /* Wyrównujemy wszystkie elementy, które sÄ? w Å?rdoku diva do Å?rodka :) [Poziomo] */
	align-items: center;  /*// Wyrównujemy wszystkie elementy, które sÄ? w Å?rdoku diva do Å?rodka :)[Pionowo] */	
	/*padding: 5% 0px; */
	padding: 0px; 
	/*align-self: flex-start; *//* wyrównanie do góry */
	/*justify-content: space-around;*/
	/*display:flex; (jedno pod drugim)*/
	/*display:inline-flex; (w 1 lini)*/
	
	
}
.button {
	text-align:center;
   background: #3D94F6;
   background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #FFFFFF;
   font-family: Open Sans;
   font-size: 40px;
   font-weight: 100;   
   box-shadow: 1px 1px 20px 0px #000000;
   -webkit-box-shadow: 1px 1px 20px 0px #000000;
   -moz-box-shadow: 1px 1px 20px 0px #000000;
   text-shadow: 1px 1px 20px #000000;
   border: solid #337FED 1px;
   text-decoration: none;   
   cursor: pointer;
   
   padding:10px;
   margin: 5px;   
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	
}
.klawisz {
   text-align:center;
   background: #3D94F6;
   background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #FFFFFF;
   
   font-size: 40px;
   font-weight: bold;   
   box-shadow: 1px 1px 20px 0px #000000;
   -webkit-box-shadow: 1px 1px 20px 0px #000000;
   -moz-box-shadow: 1px 1px 20px 0px #000000;
   text-shadow: 1px 1px 20px #000000;
   border: solid #337FED 1px;
   text-decoration: none;   
   cursor: pointer;
   
   display: block;
   float: left;
   
   padding-top:20px;
   margin: 5px;
   width: 130px;
   height: 80px;
   
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.maly {
   padding-top:5px;
   margin: 5px;
   height: 60px;
}

.klawisz:hover {
   background: #1E62D0;
   background-image: -webkit-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -moz-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -ms-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: -o-linear-gradient(top, #1E62D0, #3D94F6);
   background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
   text-decoration: none;   
}

.red, .red:hover {
   background: #cf0404;
	background: -moz-linear-gradient(top, #cf0404, #ff3019); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #cf0404, #ff3019); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #cf0404, #ff3019); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		
}
.green, .green:hover {
   background: green;
	/* background: -moz-linear-gradient(top, #cf0404, #ff3019); /* FF3.6-15 */
	/* background: -webkit-linear-gradient(top, #cf0404, #ff3019); /* Chrome10-25,Safari5.1-6 */
	/* background: linear-gradient(to bottom, #cf0404, #ff3019); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	



background: rgba(164,179,87,1);
background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(164,179,87,1)), color-stop(100%, rgba(117,137,12,1)));
background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -o-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: linear-gradient(to bottom, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c', GradientType=0 );

		
}
.orange, .orange:hover {
   background: orange;
	/* background: -moz-linear-gradient(top, #cf0404, #ff3019); /* FF3.6-15 */
	/* background: -webkit-linear-gradient(top, #cf0404, #ff3019); /* Chrome10-25,Safari5.1-6 */
	/* background: linear-gradient(to bottom, #cf0404, #ff3019); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
background: rgba(255,175,75,1);
background: -moz-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(255,146,10,1)));
background: -webkit-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
background: -o-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
background: -ms-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
background: linear-gradient(to bottom, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a', GradientType=0 );
	
}

.prawa {
	text-align: center;
	height:100%;
}

.lewa {			
	float: left; text-align: center; 
	width: calc(100% - 450px);
	min-width: 45%;	
	/*max-height: calc(100% - 28%);*/
	height: 100%;	
	position: fixed; background: black; z-index:5;		
	
}
.poz {			
	overflow: auto;
	height: 100%;			
}
.input {	
	color: white; text-align: center; background:black; border: none; width: 400px; font-weight:bold; font-size: 68px;
	font-weight:bold; font-size: 48px; color: #f1f1f1;
	text-shadow: -1px 0 green, 0 1px green, 1px 0 green, 0 -1px green;
}
.input_label {	
	font-weight:bold; font-size: 48px; color: #f1f1f1;
	text-shadow: -1px 0 green, 0 1px green, 1px 0 green, 0 -1px green;
}
.nazwa_label {	
	font-weight:bold; font-size: 40px; color: #f1f1f1;
	text-shadow: -1px 0 blue, 0 1px blue, 1px 0 blue, 0 -1px blue;
}

/*
@media screen and (max-width:1000px) {
	.lewa {		
		width: calc(100% - 250px - 50px);
		min-width: 200px;
	}
	.prawa {
		
	}
	.klawisz {		
	   padding:5px;
	   margin: 5px;
	   width: 70px;
	   height: 60px;
	}
	.input {	
		font-size: 42px;
	}
	.input_label {	
		font-size: 42px;
	}
	.nazwa_label { 
		font-size: 26px;
	}
}
*/

.klawisze {	
	margin: 2px;
	padding: 5px 25px;
	border: 1px solid black;
	font-size: 48px;
	text-align: center;
	
	 background: #3D94F6;
   background-image: -webkit-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -moz-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -ms-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: -o-linear-gradient(top, #3D94F6, #1E62D0);
   background-image: linear-gradient(to bottom, #3D94F6, #1E62D0);
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #FFFFFF;
}
.klawiatura {
	z-index: 999;
	bottom: -315px;
    transition: bottom 0.5s ease-out 0s;	
	position: absolute; 
	left: 0; height: 350px; width:100%; border-top-width: 1px; border-top-style:solid; border-top-color: white;
	background: RGB(86, 86, 86); 
	
} 
.klawiatura:hover {
	bottom: 0px;
}

.close {  color: #aaaaaa; float: right; font-size: 48px; font-weight: bold; margin-right: 20px;}
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }