/* box.css - a simple box-based framework for responsive web design

Pages are maximum 8 boxes wide, made up of groups of divs called box1 to box8.
Boxes float on the left, make them float right by adding 'right' to the box divs class.
Ensure the box divs stack at all times to form solid rectangles so as not to leave gaps.
All box divs have a fluid height of 100%, unless assgigned a fixed height in pixels of
h640, h480, h320, h160, h80, h60, h50, h40, h30, h20, h10, h5, h2 or h1.

Box.css uses css tables to lay out rows of equal height boxes. Oh! the irony of using 
tables to lay out web pages. But it's probably the best method of ensuring equal height 
boxes now that (a) we have css table elements (rather than inline tags only) and (b) 
we can use media queries to turn tables on and off.

Plan the right box layout, then respect a logical flow of text & images from box to box.

Note box.css works with all modern browsers, it does not work with IE8 and earlier 
because they don't support media queries or max-width or translateY.

(c) ZZIPWIRE Ltd 2015. All rights reserved. */

/*==========  Mobile First  ==========*/

html, body{
	background:#fff;
	color:#444;
	width:100%;
	height:100%;
}

a{
	text-decoration:none;
}

.banner-wrapper{
	max-width:1080px;
	margin-left:auto;
    margin-right:auto;
	height:inherit;
}

.content-wrapper{
	max-width:1080px;
	margin-left:auto;
    margin-right:auto;
}

.hcenter{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.vcenter{
	position:relative;
	top:50%;
	-webkit-transform:translatey(-50%);
	-ms-transform:translatey(-50%);
	transform:translatey(-50%);
}

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8{
	width:100%;
	height:100%;
	text-align:center;
	box-sizing:border-box;
	position:relative;
}

.row-wrapper{
	display:block;
	margin-top:20px;
	width:100%;
}

.row {
	display:block;
}

.cell{
	display:block;
}

.cell-spacer{
	width:10px;
	height:20px;
}

.h640{
	height:640px;
}

.h480{
	height:480px;
}

.h320{
	height:320px;
}

.h160{
	height:160px;
}

.h80{
	height:80px;
}

.h60{
	height:60px;
}

.h50{
	height:50px;
}

.h40{
	height:40px;
}

.h30{
	height:30px;
}

.h20{
	height:20px;
}

.h10{
	height:10px;
}

.h5{
	height:5px;
}

.h2{
	height:2px;
}

.h1{
	height:1px;
}

.pt50{
	padding-top:50px;
}

.pt45{
	padding-top:45px;
}

.pt40{
	padding-top:40px;
}

.pt35{
	padding-top:35px;
}

.pt30{
	padding-top:30px;
}

.pt25{
	padding-top:25px;
}

.pt20{
	padding-top:20px;
}

.pt15{
	padding-top:15px;
}

.pt10{
	padding-top:10px;
}

.pt5{
	padding-top:5px;
}

.pb50{
	padding-bottom:50px;
}

.pb45{
	padding-bottom:45px;
}

.pb40{
	padding-bottom:40px;
}

.pb35{
	padding-bottom:35px;
}

.pb30{
	padding-bottom:30px;
}

.pb25{
	padding-bottom:25px;
}

.pb20{
	padding-bottom:20px;
}

.pb15{
	padding-bottom:15px;
}

.pb10{
	padding-bottom:10px;
}

.pb5{
	padding-bottom:5px;
}

.pl50{
	padding-left:50px;
}

.pl45{
	padding-left:45px;
}

.pl40{
	padding-left:40px;
}

.pl35{
	padding-left:35px;
}

.pl30{
	padding-left:30px;
}

.pl25{
	padding-left:25px;
}

.pl20{
	padding-left:20px;
}

.pl15{
	padding-left:15px;
}

.pl10{
	padding-left:10px;
}

.pl5{
	padding-left:5px;
}

.pr50{
	padding-right:50px;
}

.pr45{
	padding-right:45px;
}

.pr40{
	padding-right:40px;
}

.pr35{
	padding-right:35px;
}

.pr30{
	padding-right:30px;
}

.pr25{
	padding-right:25px;
}

.pr20{
	padding-right:20px;
}

.pr15{
	padding-right:15px;
}

.pr10{
	padding-right:10px;
}

.pr5{
	padding-right:5px;
}

.responsive-img{
	max-width:100%;
	max-height:100%;
	width:100%;
}

.left{
	float:left;
}

.left-when-wide{

}

.right{
	float:right;
}

.right-when-wide{

}

.clearfix{
	clear:both;
}

.hide-when-narrow{
	display:none;
}

#collapse-menu-wrapper{
	z-index:999;
	position:relative;
	right:10px;
	padding:10px;
}

.collapse-menu-bar{
	width:24px;
	height:4px;
	border-radius:6px;
	margin-bottom:6px;
	background:#fff;
}

.collapse-menu-bar-bottom{
	margin-bottom:0px;
}

.collapse-menu-box{
	position:absolute;
	right:0px;
	z-index:9;
	font-size:20px;
	padding:40px 40px 40px 20px;
	background:#000;
	border-radius:0 0 0 50px;
}

.hide-menu{
	display:none;
}

.show-menu{
	display:block;
}

.box-text{
	font-size:14px;
	line-height:18px;
}

.title-text,.medium-text{
	font-size:16px;
	line-height:20px;
}

.large-text{
	font-size:20px;
	line-height:24px;
}

.very-large-text{
	font-size:24px;
	line-height:28px;
}

.box-pad{
	padding:20px;
}

.white-text{
	color:#fff;
}

.bold-text{
	font-weight:bold;
}

.align-left{
	text-align:left;
}

.align-right{
	text-align:right;
}

.preload-image{
	opacity:0;
}

/* Custom, iPhone Retina */ 
@media only screen and (min-width:320px) {
	
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width:480px) {
	
	.box-text{
		font-size:16px;
		line-height:20px;
	}
	
	.title-text,.medium-text{
		font-size:18px;
		line-height:22px;
	}
	
	.large-text{
		font-size:24px;
		line-height:28px;
	}

	.very-large-text{
		font-size:28px;
		line-height:32px;
	}
	
}

/* Small Devices, Tablets */
@media only screen and (min-width:768px) {

	.row-wrapper{
		display:table;
	}

	.row {
		display:table-row;
	}

	.cell{
		display:table-cell;
	}

	.hide-when-narrow{
		display:block;
	}
	
	.show-when-narrow{
		display:none;
	}
	
	.box1{
		width:12.5%;
	}
	
	.box2{
		width:25%;
	}
	
	.box3{
		width:37.5%;
	}
	
	.box4{
		width:50%;
	}
	
	.box5{
		width:62.5%;
	}
	
	.box6{
		width:75%;
	}
	
	.box7{
		width:87.5%;
	}
	
	.box8{
		width:100%;
	}
	
	.left-when-wide{
		float:left;
	}

	.right-when-wide{
		float:right;
	}
	
	.title-text{
		font-size:22px;
		line-height:26px;
	}

	.very-large-text{
		font-size:32px;
		line-height:36px;
	}
	
}

/* Medium Devices, Desktops */
@media only screen and (min-width:900px) {

	.very-large-text{
		font-size:36px;
		line-height:40px;
	}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width:1200px) {

}