/**
 * Responsive.css
 * Based on 'A common set of breakpoints to start'.
 * http://alwaystwisted.com/post.php?s=2012-04-28-a-common-set-of-breakpoints-to-start
 * it’s not about what happens at the breakpoints — it’s about what happens between the breakpoints.
 */

.grid {
	padding: 0 20px;
}

@media only screen and (min-width: 1401px) {
}

@media only screen and (max-width: 1400px) {
	a.punch-logo {
		left: 22px;
		max-width: 40px;
	}
	.grid {
		padding: 0 10px;
	}
	.one,
	.two,
	.three,
	.four,
	.five,
	.six,
	.seven,
	.eight,
	.nine,
	.ten,
	.eleven,
	.twelve {
		padding: 10px;
	}
}

@media only screen and (max-width: 950px) {
	a.punch-logo {
		position: absolute;
	}
	p.filter-table input[type="search"] {
		display: none;
	}
	p.filter-table input[type="search"].has-focus {
		display: block;
	}
	.pace {
		top: 0;
	}
}

@media only screen and (max-width: 928px) {
	.main-nav {
		text-align: right;
	}
	a.punch-logo {
		max-width: 35px;
	}
	.main-nav a {
		font-size: 14px;
	}
}

@media only screen and (min-width: 900px) {
	.desktop-reverse-columns .four {
		float: right;
	}
}

@media only screen and (max-width: 950px) {
	div.meta .btn-group a span {
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	a.punch-logo {
		left: 25px;
	}
	.one,
	.two,
	.three,
	.four,
	.five,
	.six,
	.seven,
	.eight,
	.nine,
	.ten,
	.eleven,
	.twelve {
		padding: 10px;
		width: 100%;
		margin-bottom: 0 !important;
	}
}

@media only screen and (max-width: 700px) {
	.form-group {
		width: 100% !important;
	}
}

@media only screen and (max-width: 600px) {
	.grid {
		padding: 0;
	}
	.one,
	.two,
	.three,
	.four,
	.five,
	.six,
	.seven,
	.eight,
	.nine,
	.ten,
	.eleven,
	.twelve {
		padding: 10px;
	}
	main {
		margin-top: 20px;
	}
	.brok label.control-label {
		margin-bottom: 0;
	}

	a.punch-logo {
		left: 14px;
		max-width: 24px;
	}

	div.meta,
	.brok {
		padding: 10px;
	}
	/* span.inner,
	.page-nl-home .sw,
	.page-nl-home span.tm {
		padding: 6px 10px !important;
	} */
}

@media only screen and (max-width: 480px) {
	.hide-mobile {
		display: none !important;
	}
	html.login form {
		position: static;
		max-width: 100%;
		max-height: 100%;
	}
	html.login h1.punch {
		font-size: 6em !important;
		padding: 60px 0 !important;
	}
	html.login .password {
		width: 200px;
	}
}

@media only screen and (max-width: 330px) {
	html.login h1.punch {
		font-size: 5em !important;
	}
}

/**
 * file-worksheets
 */

@media (max-width: 500px), (max-height: 200px) {
	html.file-worksheets {
		overflow: hidden;
	}
	html.file-worksheets .sw-container {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999999;
	}
	html.file-worksheets .sw {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		font-size: 2rem;
	}
	html.file-worksheets .meta h1 span.name {
		position: fixed;
		top: 6px;
		left: 6px;
		z-index: 999999999999999999999;
		color: #fff;
		font-size: 14px;
		font-weight: 100;
		text-transform: lowercase;
	}
}