@media all and (max-width: 960px) {
	body {
		overflow-x: hidden;
	}
	
	body * {
		box-sizing: border-box;
	}
	.container {
		width: 92%;
		margin: 0 auto;
	}
	
	img {
		max-width: 100%;
	}
	
	#mainnavi {
		width: 100%;
	}
	

	
	.span-32 {
		width: 100%;
	}
	
	#boxes {
		text-align: center;
	}
	#boxes img {
		margin: 10px auto;
		display: block;
	}
	
	#rank-box {
		float: none;
		margin: 0 auto;
	}
	
	#lukas-box, #question-box {
		float: none;
		display: block;
		margin:10px auto;
		min-height:100px;
	}
	
	.span4 {
		width: 22%;
	}
	
	.span8 {
		width: 70%;
	}
	
	.span12 {
		width: 100%;
		margin: 10px auto;
	}
	

}

@media all and (max-width: 730px) {
	.notes {
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	a.title {
		font-size: 15px;
	}
	
	table.summary {
		width: 680px;
	}
	
	.span-26 {
		width: 100%;
	}
	
	input, textarea, input.text, input.title {
		max-width: 100%;
		width: 100%;
	}
	
	.table_responsive {
		width: 100%;
		overflow-x: scroll;
	}
	
	
	#mainnavi li {
		display: block;
		float:none;
		text-align: center;
		border: none;
		padding: 10px;
		margin: 0;
	}
	
	.span4, .span8, .row {
		width: 100%;
		float: none;
		clear: both;
		margin: 10px auto;
	}
	
		
	h1 {
		font-size: 28.5px;
		line-height: 33px;
	}
}


@media all and (max-width: 530px) {
	.content-left {
		float: none;
		margin: 10px auto;
		display: block;
	}
	
	h1 {
		font-size: 24.5px;
	}
	
	.buttons a {
   	    display: inline-block;
		padding: 10px 20px;
		font-size: 75%;
		color: #fff;
	}
	
	[class*="span"].pull-right, .row-fluid [class*="span"].pull-right {
		float: none;
		margin: 20px auto;
	}
	
	a.title {
		font-size: 13px;
		text-shadow: none;
		max-width: 100%;
		display: block;
		word-break: break-all;
	}
	
	ol#ranking {
		margin: 0 auto;
		display: block;
		width: 100%;
	}
}