/* ---------- @ Responsive -----------*/

@media screen and (max-width: 1399px) {
	.wrapper {
		width: 900px;
		}
	.mainNavigation ul li a,
	.subNavigation ul li a {
		font-size: 14px;
		padding: 0 5px;
		}
	.headerSearch {
		margin-left: 10px;
		}
	.horizontalBoxes {
		width: 100%;
		flex-wrap: wrap;
		}
	.box {
		flex: 1 0 45%;
		}
	.fieldField {
		width: 700px;
		}
	.footerWrapper {
		width: 100%;
		flex-wrap: wrap;
		}
	.footerColumn {
		flex: 1 0 100%;
		text-align: center;
		}
	.footerRight p {
		text-align: center;
		}
	.footerSocial {
		float: none;
		text-align: center;
		}
}

@media screen and (max-width: 899px) {
	.wrapper {
		width: 95%;
		margin: 0 auto;
		}
	.fullWidthContent {
		width: 100%;
		}
	.textSide {
		width: 100%;
		}
	.imageSide {
		width: 100%;
		margin-bottom: 20px;
		}
	.box {
		flex: 1 0 90%;
		}
	.header {
		display: none;
		}
	.mobileHeader {
		display: block;
		background: #000;
		color: #fff;
		font-size: 30px;
		line-height: 50px;
		text-align: right;
		width: 100vw;
		}
	.mobileNavigation {
		display: block;
		position: absolute;
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
		left: 100vw;
		height: 100vh;
		background: #000;
		color: #fff;
		width: 0;
		overflow: hidden;
		}
	.mobileNavigation.open {
		left: calc(100vw - 250px);
		width: 250px;
		overflow: auto;
		}
	
	.mobileNavigation .mainNavigation ul li {
		display: block;
		}
	.mobileNavigation .mainNavigation ul li a {
		padding: 0 25px;
		width: calc(100% - 50px);
		}
	
	.mobileNavigation .headerSearch {
		float: none;
		margin-left: 25px;
		}
	.mobileNavigation .mainNavigation ul {
		width: 100%;
		display: block;
		}
	.mobileNavigation .mainNavigation {
		width: 100%;
		}
	
	.subNavigation {
		display: none;
		}
	.subNavigationMobileButton {
		display: block;
		}
	.subNavigationMobile {
		display: none;
		}
	
	.subNavigationMobile.open {
		display: block;
		}
	.subNavigationMobileButton {
		width: calc(100% - 40px);
		padding: 0 20px;
		font-size: 20px;
		line-height: 50px;
		background: #7A3209;
		color: #fff;
		text-align: right;
		}
	.subNavigationMobile ul li {
		display: block;
		}
	.subNavigationMobile ul li a {
		text-align: right;
		background: #7A3209;
		color: #fff;
		display: block;
		font-size: 16px;
		line-height: 30px;
		text-transform: uppercase;
		text-decoration: none;
		font-weight: 700;
		padding: 0 20px;
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
		}
	.subNavigationMobile ul li a:hover {
		color: #000;
		}
	.pageHeaderTall .pageHeaderLogo,
	.pageHeaderMedium .pageHeaderLogo,
	.pageHeaderShort .pageHeaderLogo {
		width: 30vw;
		padding: 3vw;
		text-align: center;
		margin: 0 auto;
		}
		
	.pageHeaderTall,
	.pageHeaderMedium,
	.pageHeaderShort {
		height: 25vw;
		background-size: cover;
		background-position: center center;
		}
		
	}