/* EXPv4 */

body { margin: 0; } /* Google Translate adds a margin */

#pagecell { position: static; clear: both; } 

#pagecell {
	width: 800px;
	color: #000;
}
.contentholder {
	color: #000;
}

button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
	border: 0px none;
}


#header:after { clear: both; content: ""; display: block; } /*sadly, we need this to force the container to conform to correct height when containing floats */

#pagecell { top: 0; }
#pagecell:after { clear: both; content: ""; display: block; }

.contentholder {
	margin-bottom: 0 !important;
}

/* Nav */
#logo { 
	float: left;
	width: 40%;
	height: auto;
}
#menu { 
	vertical-align: middle;

	text-align: right;
	width: 60%;

	float: left;
	margin-top: 2em;
}
#menu ul { 
	padding-left: 0;
	list-style: none;
}
#menu li { 
	max-width: 8em;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	padding-left: 1.5em;
}

.speed_warning {
	vertical-align: text-top;
    height: 80%;
}

/* Page */
.bar { 
	width: 100%;
	border-bottom: none !important;

	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px; 

	clear: both;
}
.bar-inner:after { clear: both; content: ""; display: block; }
	.bar .left { float: left; padding-right: 1.5em; }
	.bar .right { float: right; }

	.bar .left, .bar .right { margin-top: 0.8em; margin-bottom: 0.5em; }


.box, .box-long, .box-wm, .box.full .float, .box-wm.full .float { 
	float: left; 
	width: 780px;
	box-sizing: border-box;
}
.box:after, .box-long:after, .box-wm:after { clear: both; content: ""; display: block; }

.box-wm { 
	background-size: cover;
}

.box.third {
	width: 32%;
}
.box.two_thirds {
	width: 62%;
}


.box-top { height: auto; }
.box-top h1 { 
	padding: 0 0 0.4em 0;
	font-size: 1.4em;
	margin: 0.4em 0.5em 0 0.5em;
}

.box-top:after { clear: both; content: ""; display: block; }

.box-top p { line-height: 1.2em; } /* fix for now ui */

.short { width: 378px !important; /*compensate for 2x1px border on some themes */ }


.box.full, .box-wm.full {
	width: 100% !important;
	margin: 0;
	border-radius: 0; 
}

	.box.full .float, .box-wm.full .float {
		margin: 0 auto;
		float: none;
		padding: 3em 0;
	}

	.box.full h2, .box-wm.full h2 {
		margin: 0;
		padding: 0.5em 0 1.2em 0;
	}

	.start { margin-top: 2.3em !important; }
	.restart { 
		padding-top: 2.3em !important;
		padding-bottom: 2.3em !important;
	}

.box.blank, .blank .box-mid {
	background: transparent;
	border: transparent;
	box-shadow: none;
}

.full .box-top {
    text-transform: none;
}

.box .left { float: left; }
.box .right { float: right; }
	td.right { float: none !important; } /*bug fix for table layouts in accounts list*/


.feat { 
	padding-right: 0;
	padding-bottom: 0;
}
.feat img { 
	float: right;
	width: 30%;
	padding-left: 10px;
}
.short .feat img { width: 50%; }


.mini { 
	position: relative;
	height: 13em;
}

.mini .box-top { 
	font-size: 1em;
	padding: 1.1em 1em 0.8em 1em;
	line-height: 1.5em;
}


.mini .button {
	font-size: 0.8em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	margin-left: 0;
	margin-bottom: 0.4em;
}

.mini .button.success {
	padding-left: 0.5em;
	padding-right: 0.4em;
}

.mini .feat img { width: 32%; }

.mini .blerb { 
	overflow: hidden;
	height: 8.2em;
    line-height: 1.2em;
}
.mini .blerb a { 
	color: inherit;
	text-decoration: none;
}


	.badge {
		position: absolute;
		right: -2.7em;
		bottom: 2em;
		transform: rotate(-45deg);
		width: 12em;
		height: 2em;
		text-align: center;
		line-height: 2em;
		box-shadow: 0 0 0.8em -0.15em #272727;
	}

	.badge.updated {
		background-color: #7c0dce;
		color: #FFF;
	}

	.badge.new {
		background-color: #f13049;
		color: #FFF;
	}



.box.feature_icon {
	width: 128px !important;
}
.box.feature_icon img { 
	height: 122px;
	float: right;
}
.box.feature { width: 632px; }

.bulbous { display: none; }

.category { margin-top: 1.5em; }
.category .box-top {
	height: auto;
	padding-bottom: 0.5em;
}
.category .box-top:after { clear: both; content: ""; display: block; }
.category h1 {
	font-size: 1.4em;
	margin: 0.3em 0.1em 0 0.3em;
}
.category h2 {
	font-size: 1.2em;
	margin: 0.2em 0.4em 0 0.2em;
}

p { margin: 5px 0 10px 5px; }

.i_help { 
	color: #5bc0de;
}

#coms_foot:after { clear: both; content: ""; display: block; }


/* Icons */
.popular { 
	float: left;
	color: #e81c4f;
    padding-right: 0.3em;
    padding-top: 0.15em;
}

.clear { clear: both; } /* needed to make container height stretch over left floats */

#footer { 
	clear: both;
	margin: 1em auto;
	max-width: 800px;
	border: 0;
	background: transparent;
}
#footer a:link, #footer a:visited, #footer a:hover { text-decoration: none; color: #000; }


/* Standard Forms */
form label { 
	padding: 0.8em;
	display: inline-block;
}

form input[type=text], form input[type=password], form input[type=email], form input[type=search], form input[type=number], form input[type=url], form select { 
	height: auto;
	padding: 0.5em 0 0.45em 0.5em;
	border: 1px solid #C5C6C8;
	border-radius: 3px;
}

form textarea {
	padding: 0.6em;
	background-color: #fff;
	width: 95%;
	border: 1px solid #C5C6C8;
	border-radius: 3px;
}

form button[type="submit"], form input[type="submit"] {
	float: right;
}

form input[readonly] {
	background: transparent;
	border: none !important;
	color: inherit;
}


/* Cart */

		#shopping-cart .left, #checkout .left { padding: 0.3em; }
		#shopping-cart .left .fa, #checkout .left .fa { padding-right: 0.3em; }

		 #checkout { margin-bottom: 3em; }

		#shopping-cart .box-mid {
			height: 27.3em;
		}

		#shopping-cart .box-mid { overflow-y: auto; }
		#checkout .box-mid {
			height: 22.3em;
			overflow-y: auto;
		}
		#checkout:after { clear: both; content: ""; display: block; }

		#checkout button#payment {
			float: right;
			margin-top: 0.3em;
		}

		.checkout_btn {
			font-size: 1.5em;
			float: right;
		}

	#cart { 
		clear: both;
		min-height: 22em;
	}

		.cart_row { border-bottom: 1px solid #ccc !important; }
		
		#cart .num { padding: 0.4em 0; }
		#cart .course { padding: 0.6em 0 0.6em 0.6em; }
		
		.cross, .cross a:link, .cross a:visited, .cross a:hover {
			color: red;
			text-decoration: none;
			font-size: 1.1em;
		}
		.cross a { cursor: pointer; }

		.num {
			text-align: right;
			min-width: 50px;
		}
		.num input {
			padding: 0.4em;
			width: 4em;
		}
		
		.totals {
			text-align: right;
			border-bottom: 0px !important;
		}
		.totals td {
			padding-top: 1em !important;
		}

		#total { 
			font-weight: bold;
			font-size: 1.2em;
		}
		.bulk_savings { 
			text-align: left;
			font-style: italic;
		}
		#prices { margin-top: 20px; }


	.buy { width: 780px; }
	.buy .box-mid { padding-top: 0; }

	.buy #num {
		height: 2em;
		width: 3em;
		text-align: center;
		vertical-align: top;
		margin-top: 0.04em;
	}

	.buy .right { padding: 0.2em; }


		.bracket {
			display: inline-block;
			margin-left: 0;
			min-width: 6.1em;
			width: 13.7%;
			vertical-align: top;
			padding-top: 0.8em;
		}
			.bracket .price { 
				font-size: large;
				margin-bottom: 0.5em;
			}
			.bracket .vol {
				font-style: italic;
				font-weight: bold;
			}

		.price_explanation {
			font-size: x-small;
			margin-top: 2em;
		}
		

	#cat_btns .float {
		padding: 0.6em 0em;
	}
	#cat_btns { margin-bottom: 0.8em; }

	#cat_btns .button.level {
		font-size: 0.8em;
		margin: 0.5em 1em 0.5em 0;
		min-width: 9em;
		padding: 0.7em;
	}



#callback_cta {
	padding-top: 2em;
	padding-bottom: 1em;
}

	#callback_cta button[type=submit] {
		padding: 0.5em 0.7em;
		margin-bottom: 1em;
		font-size: 1em;
	}

	#callback_cta input {
		width: 30%;
		padding: 1em;
		margin-bottom: 1em;
	}

	#callback_cta #cheeky_more {
		display: none;
	}

	#callback_cta #cta_p {
		margin-bottom: 1.5em;
		font-size: 1.2em;
	}

	#callback_cta #cta_p a {
		    color: rgb(243, 243, 243) !important;
	}



/* Responsive Large Landscape Display */
@media only screen and (min-width:1200px) {
	.tri #pagecell, .tri #header-inner, .tri #footer-inner {
		width: 1200px;
	}
	.tri .box, .tri .box-wm, .tri .box.full .float, .tri .box-wm.full .float {
		width: 1174px;
	}

	.tri .tri-short { width: 378px !important; }

	.tri #footer {
		max-width: 1174px;
	}
	.tri .double {
		width: 776px !important;
	}
	/*.box.feature { width: 1032px; }*/

	.single { width: 378px !important; }

	.bulbous { display: inherit; }
	.subtle { display: none; }

	#btmImg, .stretch_img { background-size: auto 100% !important; } /* full stretchy image */
}

/* Responsive Phone/Small Tab */
@media only screen and (max-width:790px) {
	#pagecell, #footer-inner {
		width: auto;
		max-width: 800px;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#header { height: auto; }
	#header-inner {
		width: 95%;
		text-align: center;
		margin: 0 auto;
		height: auto !important;
	}
	
	#menu, #logo {
		float: none;
		margin: 0 auto;
		width: auto !important;
		padding-top: 1em;
	}
	
	#logo { 
		height: auto;
	}

	#logo img {
		margin: 0.1em !important;
		max-height: 3.5em;
	}

	#menu { text-align: center;	}
	#menu ul { 
		padding-left: 0;
		margin: 0;
	}
	#menu li {
		display: inline-table;
		height: 2.4em;
	}

	#cat_btns .button.level {
    	font-size: 0.7em;
    }

	#shopping-cart .box-mid, #cart { 
		height: auto !important;
		min-height: auto;
	}

	.box, .box-long, .box-wm,
	.box.full .float, .box-wm.full .float { 
		width: 95% !important;
	}
	.short .feat img { 
		width: 30%;
		max-width: 160px;
	}

		.box-top .left { clear: left; }
		.box-top .popular.fa.fa-heart { margin-bottom: 1em; }

	.slip_over { margin-bottom: 1.3em !important; }

	.flatten { display: none; } /* not mobile compatible */

	.inflate { overflow: scroll; } /* inflate for fat fingers */
	.inflate a { display: inline-block; padding: 1em; }

	.mini .blerb, .overscroll { overflow-y: scroll !important; }

	#btmImg, .stretch_img { background-size: auto 0% !important; } /* hide stretchy image */

	#footer {
		box-sizing: border-box;
		padding: 0 1em;
	}


	.button, button, input[type=button], input[type=submit] {
		margin-bottom: 0.4em;
	}


	#callback_cta input {
		width: 80%;
		display: block;
	}
	#callback_cta button[type=submit] {
		float: left;
	}

}


/* Social */

.social_btn {
	font-size: 2.2em; 
	padding-left: 0.4em;
}
.social-btn i { 
	margin-left: 0.3em;
}
.social_btn .fa-twitter-square { color: #00aced; }
.social_btn .fa-facebook-square { color: #3b5998; }
.social_btn .fa-linkedin-square { color: #007bb6; }
.social_btn .fa-youtube-square, .social_btn .fa-youtube-play { color: #F00; }
.social_btn .fa-google-plus-square { color: #dd4b39; }


/* Footer Integration */

body, #footer {
	background-color: #292d34;
	color: #fff;
}

#wrap {
	background-color: #fff;
}

#footer {
	box-sizing: border-box;
	height: auto;
	min-height: 8em;
	max-width: none;
	padding: 3em;
	margin-bottom: 0;
	margin-top: 2em;

	font-family: Lato,Helvetica,Arial,sans-serif;
	font-size: 1.2em;
}
#footer:after { clear: both; content: ""; display: block; }

	#pagecell.tight-footer ~ #footer {
		margin-top: 0;
	}

#footer a:link, #footer a:visited, #footer a:hover { 
	text-decoration: none; 
	color: #fff;
}

#footer-inner {
	margin: 0 auto;
}

#footer abbr { text-decoration: none; }

#footer .left { 
	float: left;
	width: auto;
	margin-right: 2em;
	margin-bottom: 3em;
	padding-left: 1em;
}




#footer #mc_embed_signup {
	max-width: 26em;
}

	#footer #mc_embed_signup .explain {
		padding-top: 1.5em;
		display: inline-block;
	}
	
	#footer #mc_embed_signup input[type=submit] {
		font-size: 1.2em;
		float: none;
		display: inline-block;
	}

	#footer #mc_embed_signup label {
		padding-top: 0;
		padding-left: 0;
		display: block;
	}

	#footer #mc_embed_signup input[type=email] {
		padding: 0.7em;
		margin: 0.4em 0;
	}




#footer .block_ul li {
	display: block;
	margin: 1.2em 5em 1.2em 0;
	font-size: 1.1em;
}

	#footer .block_ul li:before {
		font-family: 'FontAwesome';
		content: '\f054';
		margin-right: 0.8em;
		color: #fff;
	}

#footer .block_ul ul {
	display: inline-block;
	margin-top: 1em;
}






.foot_title .fa {
	margin-right: 0.4em;
}

.foot_title {
	font-size: 1.2em;
	margin-bottom: 0.8em;
	/*
	position: relative;
	left: -1em;*/
}


#footer .fa-map-signs {
	color: #ccac00;
}

#footer .fa-paper-plane {
	color: #2e86e6;
}

.foot_title .fa { color: #fff !important; }



#footer-left {
	width: auto;
}

	
	

	#footer ul { 
		padding: 0;
		margin: 0;
	}

	#footer li {
		display: inline-block;
		margin: 1.3em 2em 1.3em 0;
	}



#footer-right {
	width: auto;
}


	#footer #credits {
		line-height: 2.4em;
	}

	#footer #social_foot {
		margin-bottom: 2em;
	}

	#hm_cert {
		margin-right: 1.5em;
	}



@media only screen and (min-width:1200px) {
	
	.tri #footer  {
		max-width: none;
	}

	.tri #footer-right {
		width: auto;
		margin-top: 0;
	}

	.tri #footer #social_foot {
		float: none;
	}

	.tri #footer #credits {
		display: block;
	}

}



@media only screen and (max-width:790px) {

	#pagecell {
		max-width: 500px;
	}

	#footer-left, #footer-right {
		width: 100%;
	}

	#footer-left .left {
		width: 100%;

		margin-bottom: 4em;
		text-align: center !important;

		padding-left: 0;
		margin-right: 0;
	}

	#footer .block_ul li {
		margin: 1.5em;
	}

	#footer .block_ul li:before {
		content: '';
	}

	#footer-right {
		text-align: center !important;
	}

	#footer #mc_embed_signup { 
		max-width: none;
	}

}