@media (max-width:640px), (max-height:400px) {
	:root {
		--slide-background-color: rgba(0, 0, 0, 1);
	}

	body {
		overflow: unset;
	}

	#wrapper {
		position   : absolute;
		z-index    : 2;
		overflow   : unset;
	}

	.swiper-container {
		overflow: visible;
	}

	#slides .container {
		position: static;
		width   : 100%;
		height  : auto;
	}

	#slides h2 {
		position        : static;
		width           : 100%;
		height          : auto;
		background-image: none;
		text-indent     : 0;
		color           : #fff;
		font-weight     : 700;
		font-size       : 2em;
		text-transform  : uppercase;
		text-align      : center;
		margin-bottom   : 1em;
	}

	#services .cols {
		display: block;
	}

	#services .col {
		display      : block;
		width        : 100%;
		max-width    : 350px;
		margin       : 0 auto 1.5em auto;
		padding-left : 0;
		padding-right: 0;
	}

	#services p {
		font-size: 1.1em;
	}

	#services .line {
		display: none;
	}

	#controls {
		display: none;
	}

	#contact .container {
		width    : 100%;
		max-width: 520px;
		margin   : 0 auto;
	}

	#contactform {
		font-size: 1.1em;
		width    : 100%;
		padding  : 0 1em;
	}

	#contactform .field {
		display: block;
	}

	#contactform label {
		width        : 30%;
		display      : block;
		float        : left;
		padding-right: .5em;
	}

	#contactform .input {
		width  : 70%;
		display: block;
		float  : left;
		margin : 0;
	}

	html {
		background-image     : url(/assets/img/bgsmall.jpg);
		background-attachment: local;
		background-size      : cover;
		background-position  : center;
	}

	#contact {
		background: var(--slide-background-color);
	}

	#contact p {
		font-size: 1.1em;
	}

	#contact .more {
		width: 100%;
	}

	#footer {
		text-align: center;
	}

	#nav a {
		margin: 0 .5em;
	}

	#nav a:hover,
	#nav a.active {
		border-color: transparent;
	}

	#videobg,
	#portfolio .video {
		display: none;
	}
}

@media (min-width:641px) and (max-width:960px) {
	#services h2 {
		top                : 5%;
		bottom             : auto;
		height             : 50%;
		width              : 50%;
		background-position: right top;
	}

	#services .container {
		width: 90%;
	}
}

@media (max-width:400px) {
	#nav a {
		font-size: .8em;
		padding  : 1em 0;
		margin   : 0 .5em;
	}

	#intro .title {
		width: 320px;
	}

	#contact .phone,
	#contact .social,
	#contact .address,
	#contact .hours {
		float: none;
		width: 100%;
	}

	#contact .address {
		text-align  : center;
		border-right: 0;
	}

	#contact .social {
		border-left: none;
		border-top : 1px dotted rgba(255, 255, 255, .2);
	}

	#contact .social a {
		font-size: 1.6em;
	}
}

@media (max-width:460px),
(max-height:460px) {
	#project-dialog {
		font-size          : .85em;
		background-position: center top;
	}
}

/* iPhone 3, iPhone 4 - portrait */
@media (max-width:320px) and (max-height:480px) {
	body {
		background-size: auto 480px;
	}

	#intro.swiper-slide {
		height    : 480px;
		min-height: 0;
	}
}

/* iPhone 3, iPhone 4 - landscape */
@media (max-width:480px) and (max-height:320px) {
	body {
		background-size: 480px auto;
	}

	#intro.swiper-slide {
		height    : 320px;
		min-height: 0;
	}
}