/* Mobile View (ipad portrait & smaller)
----------------------------------------------------- */
@media screen and (max-width: 768px) {
	body {
		background: #e9e1ce;
	}

	.mobile-hide {
		display: none!important;
	}
	.mobile-show {
		display: block!important;
	}

	/* Elements to hide for mobile */
	.wrapper a.menu-toggle,
	.home-vid,
	.wrapper .overlay .close {
		display: none;
	}

	.mobile-arrow {
		background: url('../images/arrow.svg') no-repeat 0 0;
		display: block;
		height: 22px;
		width: 20px;
		position: absolute;
		bottom: 24px;
		left: 50%;
		margin-left: -8px;
		transform: rotate(180deg);
	}

	.wrapper h1 {
		background-image: url('../images/logo-black.svg');
		width: 200px;
		height: 25px;
	}

	.wrapper .overlay {
		display: block;
		padding: 0 20px;
		position: relative;
		width: 100%;
		top: auto;
		left: auto;
		
	}
	.wrapper .overlay p {
		text-indent: 25px;
		font-size: 20px;
		line-height: 27px;
		padding-right: 0;
	}
	.img-box.portrait,
	.img-box.landscape {
		max-width: 90%;
	}
	div.contact {
		padding-bottom: 80px;
	}
	.overlay .top {
		font-size: 20px;
		cursor: pointer;
		position: relative;
		width: 100%;
		right: auto;
		top: auto;
		display: block;
	}
	.overlay .top:before {
		position: absolute;
		left: 50%;
		top: -10px;
		transform: translateX(-50%);
		height: 22px;
		width: 24px;
	}

	.spacer {
		background: #fff;
		height: 100%;
		width: 100%;
	}

}

/* Mobile View (ipad portrait & landscape)
----------------------------------------------------- */
@media (min-width: 550px ) and (max-width: 768px) { 

	body {
		background: #fff;
	}

	.wrapper h1,
	.wrapper .mobile-arrow,
	.wrapper .spacer {
		display: none!important;
	}

	

	.wrapper .home-vid {
		display: block;
		z-index: 5;
	 	
	}

	.wrapper .home-vid {
	 	position: absolute;
	    top: 50%;
	    left: auto;
	    min-width: 100%;
	    min-height: 0;
	    width: 100%;
	    height: auto;
	    z-index: 10!important;
	    transform: translateX(0) translateY(-50%);
	}

}