@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

body {
	font-family: 'Open Sans Condensed', sans-serif;
	margin : 0;
}

h1.sitetopic {
	font-size : 72px;
	text-align : center;
	display : none;
}

a {
	text-decoration : none;
}

.logo {
	display : block;
	margin : 35px auto;
}

#siteview {
	padding : 0 5% 2% 5%;
	width : 90%;
}

#footer {
	background : #000;
	width : 96%;
	padding : 2%;
	margin-top : 25px;
}

	#footer .row {
		width : 86%;
		padding : 2% 5%;
		margin : 2%;
		text-align : center;
		color : #fff;
		font-size : 18px;
		border-top : 1px solid #fff;
		border-bottom : 1px solid #fff;
	}
	
	#footer a {
		color : #fff;
	}

.col {
	float : left;
	width : 29.33%;
	margin : 0 2%;
	text-align : center;
	box-shadow : 0 0 10px #000;
}

	.col h3 {
		margin : 15px 0;
		font-size : 28px;
		text-transform : uppercase;
	}
	
	.col img {
		display : block;
		margin : 15px auto;
		width : 50%;
	}

	.col img.full {
		width : 100%;
		height : auto;
	}
	
.clearfix {
	clear : both;
	width : 100%;
}

.hus { color : #ff1a1a; } .hus:hover { box-shadow : 0 0 10px #ff1a1a; }
.kok { color : #ff8000; } .kok:hover { box-shadow : 0 0 10px #ff8000; }
.bad { color : #0099ff; } .bad:hover { box-shadow : 0 0 10px #0099ff; }

@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 736px) {
		
		#siteview {
			padding : 2%;
			width : 96%;
		}
		
		h1.sitetopic {
			font-size : 36px;
		}
		
		.col {
			float : none;
			width : 96%;
			display : block;
			margin-bottom : 10px;
		}
			
			.col h3 {
				display : inline-block;
			}
		
		.hus:hover,
		.kok:hover,
		.bad:hover {
			box-shadow : none;
}