Problem z resposywnością strony

Witam, znowu problem z tym portfolio tym razem chodzi o responsywność strony nie działa mi reguła @media. Przesyłam cały kod HTML i CSS:

Kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link rel="stylesheet" href="fontello/css/fontello.css" type="text/css" />
	<script src="zegar.js" type="text/javascript"></script>
	
	<title>Portfolio - Ignacjusz</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="author" content="Ignacy Gębuś" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="Shortcut icon" href="ikona.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	
</head>
<body onload="zegar()">
	<div id="strona">
		<div id="bajery">
			<div id="logo">
				<span>Ignacjusz</span>
			</div>
			<div id="zegar">
				<div id="czas"></div>
			</div>
			<div style="clear:both"></div>
		</div>
		
		<div id="kafle">
			<a href="index.html"><div id="k1"><i class="icon-home"></i><br/>Strona główna</div></a>
			<a href="omnie.html"><div id="k2"><i class="icon-user"></i><br/>O mnie</div></a>
			<div style="clear:both"></div>
			<a href="oferta.html"><div id="k3"><i class="icon-laptop"></i><br/>Oferta</div></a>
			<a href="kontakt.html"><div id="k4"><i class="icon-mail"></i><br/>Kontakt</div></a>
			<div style="clear:both"></div>
		</div>
		
		<div id="kafle2">
			<div id="tresc">
				<h2>Strona główna</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non tortor sit amet ipsum dictum interdum. Duis sollicitudin libero ut nunc efficitur ultricies. Sed in eros purus. Suspendisse enim metus, facilisis ut malesuada sit amet, ultricies id turpis. Aenean augue augue, euismod vel purus vitae, vulputate aliquet odio. Aenean bibendum ex ut ornare convallis. Phasellus iaculis lacus et nibh pretium, vel rutrum diam varius. Suspendisse potenti. Praesent dapibus non enim non fringilla.</p>
			</div>
			<div id="media">
				<a href="mailto:ignacjusz@spoko.pl"><div class="b"><i class="icon-mail-alt"></i><br/></div></a>
				<div style="clear:both"></div>
			</div>
		</div>
		<div style="clear:both"></div>
	</div>
	<div id="stopka">Portfolio - Ignacjusz 2015 | Ignacy Gębuś | &copy; Wszelkie prawa zastrzeżone</div>
</body>
</html>

html
{
	height: 100%;
}

body
{
	background-color: #666666;
	margin: 0 !important;
	font-family: 'Ubuntu', sans-serif;
	height: 100%;
	width: 100%;
	position: absolute;
	
	background-image: url(tlo.jpg);
	background-repeat: none;
	background-position: center;
}

#strona
{
	width: 85%;
	margin: 50px auto;
	border: 2px solid rgba(0, 0, 0, 0);
	border-radius: 15px;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 20px;
}

#bajery
{
	width: 100%;
	border-bottom: 3px dotted #FFFFFF;
}

#logo
{
	float: left;
	width: 50%;
}

#logo span
{
	font-size: 70px;
	font-weight: 700;
	text-align: left;
	padding: 10px;
}

#zegar
{
	float: right;
	width: 50%;
	font-weight: 700;
}

#czas
{
	text-align: right;
	padding: 10px;
	font-size: 70px;
}

#kafle
{
	padding-top: 20px;
	float: left;
	width: 48%;
	padding-right: 4%;
}

#k1
{
	height: 130px;
	width: 222px;
	padding: 10px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	border-radius: 0 20px;
	transition-duration: 0.5s;
	text-align: center;
	border: 2px solid #00CC66;
	color: #FFFFFF;
	font-size: 20px;
}

#k1:hover
{
	background-color: #00CC66;
	border-color: rgba(255, 255, 255, 0);
}

#k2
{
	height: 130px;
	width: 222px;
	padding: 10px;
	float: left;
	border-radius: 0 20px;
	transition-duration: 0.5s;
	text-align: center;
	border: 2px solid #FF9933;
	color: #FFFFFF;
	font-size: 20px;
}

#k2:hover
{
	background-color: #FF9933;
	border-color: rgba(255, 255, 255, 0);
}

#k3
{
	height: 130px;
	width: 222px;
	padding: 10px;
	float: left;
	border-radius: 0 20px;
	transition-duration: 0.5s;
	text-align: center;
	border: 2px solid #00CCFF;
	color: #FFFFFF;
	font-size: 20px;
}

#k3:hover
{
	background-color: #00CCFF;
	border-color: rgba(255, 255, 255, 0);
}

#k4
{
	height: 130px;
	width: 222px;
	padding: 10px;
	float: left;
	margin-left: 20px;
	border-radius: 0 20px;
	transition-duration: 0.5s;
	text-align: center;
	border: 2px solid #CC3399;
	color: #FFFFFF;
	font-size: 20px;
}

#k4:hover
{
	background-color: #CC3399;
	border-color: rgba(255, 255, 255, 0);
}

#kafle2
{
	float: left;
	width: 48%;
	padding-top: 20px;
}

#tresc
{
	border: 2px solid #FFFF00;
	border-radius: 20px 0;
	padding: 0 10px;
	transition-duration: 0.5s;
}

#tresc:hover
{
	background-color: rgba(255, 255, 0, 0.5);
	border-color: rgba(255, 255, 255, 0);
}

#tresc h2
{
	font-size: 30px;
	margin: 5px;
	font-weight: 700;
}

#tresc p
{
	font-size: 18px;
}

#media
{
	width: 100%;
	text-align: center;
	padding-top: 20px;
}

.b
{
	border-radius: 30px;
	border: 2px solid #FFFFFF;
	height: 50px;
	width: 50px;
	text-align: center;
	transition-duration: 0.5s;
	display: inline-block;
	margin-left: 20px;
	color: #FFFFFF;
}

.b:first-child
{
	margin-left: 0;
}

.b:hover
{
	border-color: rgba(255, 255, 255, 0);
	background-color: #FFFFFF;
	color: #000000;
}

#stopka
{
	position: absolute;
	font-size: 15px;
	bottom: 0;
	width: 100%;
	height: 20px;
	padding: 5px 0;
	text-align: center;
	background: #444444;
}

@media all and (max-height: 1260px) 
{
	k1
	{
		height: 111;
		width: 184;
		padding: 5;
	}
	
	k2
	{
		height: 111;
		width: 184;
		padding: 5;
	}
	
	k3
	{
		height: 111;
		width: 184;
		padding: 5;
	}
	
	k4
	{
		height: 111;
		width: 184;
		padding: 5;
	}
}