/*###############################################################################################################################################
																Generic content
################################################################################################################################################*/

html {
	margin:0;
	padding:0;
	-webkit-text-size-adjust:100%; /* Prevent font scaling in landscape while allowing user zoom (iPhone) */
}
body {
	margin:0;
	padding:0;
	font-family: 'Dosis', serif;
}
img {
	display:block;
	border:0;
}

/*-  Customisable background image/colour.
Simply change ID to wrapper-1, wrapper-2 etc in the html source --*/
#header-wrapper {
	width:100%;
	margin:0 auto 0 auto;omfor
	background-color:#FFFFFF;
}

header {
	position:relative;
	max-width:960px;
	margin:0 auto;
	padding:0 10px;
}

/* Hide and show standard and mobile logo */
.logo img {
	display:inline;
	width:100px;
	margin:60px 0 10px 0;
}
.logo-tablet img {
	display:none;
}
.logo-mobile img {
	display:none;
}

/* Images within content */
.col-100 img {
	max-width:100%;
	margin:0% 0 0% 0%;
	position:relative;
}
.col-50 img {
	max-width:100%;
	margin:2% 0% 4% 0%;
	position:relative;
}
.col-30 img {
	max-width:100%;
	margin:2% 0 4% 0;
	position:relative;
}
.col-20 img {
	max-width:100%;
	margin:2% 0 4% 0;
	position:relative;
}
/* -------------------- */

.mobile-scroll-top {
	display:none;
}


/* Generic global class, where once applied, will hide class element in desired-view only.
The following CSS will "show" the element in all views other than than the selected.
 */
.hide-mobile {
	display:block;
}
.hide-desktop {
	display:none !important;
}
.hide-tablet {
	display:block;
}

/* Removes default hyperlink style */
p .remove-link-style {
	color:inherit !important;
	text-decoration:none !important;
}
h3 .remove-link-style {
	color:inherit !important;
	text-decoration:none !important;
}
h2 .remove-link-style {
	color:inherit !important;
	text-decoration:none !important;
}
h1 .remove-link-style {
	color:inherit !important;
	text-decoration:none !important;
}

/*###############################################################################################################################################
																Hero banner and background-slideshow
################################################################################################################################################*/

#banner-title-container {
	position:relative;
	max-width:960px;
	margin:0 auto;
	padding:0 30px 0 0;
	top:0;
	background-color:#;
}
.banner-title {
	position:relative; top:15px; left: 15px;
	display:inline-block; padding:10px;
	background-color:#72BF44;
	font-size:50px; font-weight:300; color:#FFFFFF;
}

#full-width-banner {
	margin-top:20px;
	width:100%;
	background:url('images/banner-bg.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}

#banner-container {
	position:relative !important;
	margin: 0 auto !important;
	max-width: 960px;
}

#banner-container img {
	/* The following three lines will horizontally and vertically centre an image inside of its parent container */
	position: relative !important;
	margin: auto !important;
	max-width: 100% !important;
	max-height: 300px !important; line-height: 300px !important;
}


/*###############################################################################################################################################
																Containers and Wrappers
################################################################################################################################################*/

#wrapper {
	position:relative;
	max-width:940px;
	margin:0 auto;
	padding:0 10px;
	overflow:auto;
	background-color:;
}

.col-wrapper {
	position:relative;
	height:auto !important;
	margin:2% auto 2% auto;
	padding:2px 0;
	overflow:auto;
}

.col-100 {
	max-width:100%;
	margin:0;
	padding:0;
	clear:both;
	background:#;
}

.col-60 {
	position:relative;
	max-width:62%;
	float:left;
	margin:0 4% 0 0;
	padding:0;
	background:#;
}

.col-50 {
	position:relative;
	max-width:46%;
	float:left;
	margin:0 4% 0 0;
	padding:0;
	background:#;
}

.col-30 {
	position:relative;
	min-width:30%;
	max-width:30%;
	float:left;
	margin:0 3% 0 0;
	padding:0;
	background:#;
}

.col-20 {
	position:relative;
	min-width:18%;
	max-width:18%;
	float:left;
	margin:0 2% 0 0;
	padding:0;
	background:#;
}

#background-wrapper {
	width:100%;
	margin:0 auto;
	padding:20px 0;
	background-position:center center;
	background-size:cover;
}

#background-wrapper-usa {
	width:100%;
	margin:0 auto;
	padding:20px 0;
	background-position:center center;
	background-size:cover;
	background-image:url(images/usa-background.jpg);
}

#background-wrapper-white {
	width:100%;
	margin:0 auto;
	padding:20px 0;
	background:#FFFFFF;
	background-position:center center;
	background-size:cover;
}
/*-- The box class is applied in the 3 column layout for packages --*/
.box {
	max-width:26% !important;
	min-width:26% !important;
	margin:20px 0 20px 22px !important;
	padding:0 10px !important;
	border:1px solid #EEEEEE;
	background-color:#F4F4F4;
}
.box h1, h2, h3 {
	margin:10px 0 !important;
}


/*###############################################################################################################################################
																Typography
################################################################################################################################################*/

h1, h2, h3 {
	font-family: 'Dosis', serif;
}
h4, h5, h6, p, ul, ol {
	font-family: 'Dosis', serif;
}

strong h1, h3, h2 {
	font-weight:700;
}

h1, h2, h3, p, ul, ol {
	line-height:135%;
}
h1, h2, h3, p {
	margin:20px 0 !important;
}

h1 {
	font-size:60px; font-weight:500;
	line-height:100%;
	margin:30px 0;
	letter-spacing:-0.02em;
	word-spacing:0.02em;
	color:#000000; /* iBreathe Green */
}

h2 {
	font-size:38px;	font-weight:400;
	line-height:110% !important;
	letter-spacing:-0.02em;
	word-spacing:0.02em;
	color:#000000;
}

h3 {
	font-size:22px; font-weight:700;
	line-height:120%;
	letter-spacing:0em;
	word-spacing:0.02em;
	color:#72BF44;
}

p, ol, ul, td, th {
	font-size:22px;
	font-weight:400;
	color:#000000 !important;
}

p strong {
	font-weight:700;
}

li > strong {
	font-weight: 700;
}

small {
	font-size:16px;
	font-weight:300;
	color:#222222;
}

/* Use these additional classes to shrink existing fonts. Other attributes are inherited from parent. */
.font-size-90pc {
	font-size:90% !important;
}
.font-size-80pc {
	font-size:80% !important;
}
.font-size-70pc {
	font-size:70% !important;
}

/*###############################################################################################################################################
																Links
################################################################################################################################################*/

a:link {
	text-decoration:underline;
	color:#2da44a;
}
a:visited {
	text-decoration:underline;
	color:#2da44a;
}
a:hover {
	text-decoration:none;
	color:#2da44a;
}
a:active {
	text-decoration:underline;
	color:#2da44a;
}

/*###############################################################################################################################################
																Ordered and Unordered Lists
################################################################################################################################################*/

/* The following list styles are not inherited, but
match the generic p styles in terms of size and weight */
ul {
	margin:1em 0 1em 2em;
}
ul li {
	margin:0.7em 0 0.7em 0.4em;
	color:#000000;
	list-style:disc;
	list-style-position:outside;
}

/* The following list styles are not inherited, but
match the generic p styles in terms of size and weight */
ol {
	margin:1em 0 1em 2em;
}
ol li {
	margin:0.7em 0 0.7em 0.4em;
	color:#000000;
	list-style:decimal;
	list-style-position:outside;
}

/* The following "h2 list" styles are not inherited, but
match the generic h2 styles in terms of size and weight */
h2 ul {
	margin:1em 0 1em 1em;
}
h2 ul li {
	color:#6DCFF6;
	margin:0.6 0 0.6em 1em;
	list-style:disc;
	list-style-position:outside;
}

/* The following "h2 list" styles are not inherited, but
match the generic h2 styles in terms of size and weight */
h2 ol {
	margin:1em 0 1em 1em;
}
h2 ol li {
	color:#6DCFF6;
	margin:0.6em 0 0.6em 1em;
	font-weight:400;
	line-height:100%;
	list-style:decimal;
	list-style-position:outside;
}

/* The following "h3 list" styles are not inherited, but
match the generic h3 styles in terms of size and weight */
h3 ul {
	margin:1em 0 1em 1.5em;
}
h3 ul li {
	color:#000000;
	margin:0.8em 0 0.8em 1em;
	font-weight:400;
	line-height:110%;
	list-style:disc;
	list-style-position:outside;
}

/* The following "h3 list" styles are not inherited, but
match the generic h3 styles in terms of size and weight */
h3 ol {
	margin:1em 0 1em 1.5em;
}
h3 ol li {
	color:#000000;
	margin:0.8 0 0.8em 1em;
	font-weight:400;
	line-height:110%;
	list-style:decimal;
	list-style-position:outside;
}

.bullet-green li {
	margin:0.7em 0 0.7em -0.7em !important;
	padding-left:1.2em !important;
	list-style-type:none !important;
	background:url('images/bullet-green.png') !important;
	background-size:12px !important;
	background-position:0px 3px !important;
	background-repeat:no-repeat !important;
}
.bullet-yellow li {
	margin:0.7em 0 0.7em -0.7em !important;
	padding-left:1.2em !important;
	list-style-type:none !important;
	background:url('images/bullet-yellow.png') !important;
	background-size:12px !important;
	background-position:0px 3px !important;
	background-repeat:no-repeat !important;
}
.bullet-yellow-dark li {
	margin:0.7em 0 0.7em -0.7em !important;
	padding-left:1.2em !important;
	list-style-type:none !important;
	background:url('images/bullet-yellow-dark.png') !important;
	background-size:12px !important;
	background-position:0px 3px !important;
	background-repeat:no-repeat !important;
}
.bullet-tick-yellow li {
	margin:0.7em 0 0.7em -0.7em !important;
	padding-left:1.4em !important;
	list-style-type:none !important;
	background:url('images/bullet-tick-yellow.png') !important;
	background-size:20px !important;
	background-position:0px 6px !important;
	background-repeat:no-repeat !important;
}

/*###############################################################################################################################################
																Tables
################################################################################################################################################*/

table {
	border:1px solid;
}

td {
	background-color:#F2F2F2;
	border:1px solid #FFFFFF;
	border-collapse:collapse;
	padding:7px 5px;
	line-height:120%;
}

/* Apply class to specify number of columns in table: 1, 2 or 3 */
td.one-column {
	width:100%;
}
td.two-column {
	width:50%;
}
td.three-column {
	width:33%;
}

/*###############################################################################################################################################
																Footer
################################################################################################################################################*/

/* Full width container */
footer {
	position:relative;
	overflow:auto;
	width:100%;
	margin:0;
	padding:30px 0;
	background:#333333;
}

/* Wraps the contents (texts, links etc) */
#footer-content-wrapper {
	max-width:940px;
	margin:0 auto;
	padding:0 10px;
	overflow:auto;
	letter-spacing:0.3px;
}

/* Target the h3 inside of the footer container */
#footer-content-wrapper h3 {
	font-weight:300;
	letter-spacing:0.5px;
	color:#FFFFFF;
}
/* Target the paragraphs and list items inside of the footer container */
#footer-content-wrapper p {
	margin:0 !important;
	padding:0 !important;
	font-size:13px;
	color:#FFFFFF !important;
}
#footer-content-wrapper ul li {
	margin:0;
	padding:0;
	font-size:13px;
	line-height:20px;
	color:#FFFFFF !important;
}

/* Footer links */
#footer-content-wrapper ul {
	margin-left:0 !important;
}
#footer-content-wrapper ul li {
	margin:0;
	padding:0 0 0 20px;
	line-height:20px;
	list-style:none;

	background:url('images/bullet-scribble-teal.png');
	background-repeat:no-repeat;
	background-position:left;
	background-size:12px;
}
#footer-content-wrapper a {
	text-decoration:none;
	color:#FFFFFF;
}
#footer-content-wrapper a:hover {
	text-decoration:none;
	color:#FFFFFF !important;
}

.footer-logo {
	margin:0 0 20px 0 !important;
	padding:0 !important;
}

.copyright p {
	font-size:15px !important;
}

/*###############################################################################################################################################
																Colours
################################################################################################################################################*/

.blue {	color:#055491 !important; }
.cyan { color:#00AEEF !important; }
.cyan-light { color:#6DCFF6 !important; }
.yellow { color:#FFE600 !important; }
.yellow-dark { color:#FFD400 !important; }
.grey { color:#777777 !important; }
.light-grey { color:#999999 !important; }

.black { color:#000000 !important; }
.white { color:#FFFFFF !important; }

.orange-dark { color:#E4A025 !important; }
.orange { color:#FDB913 !important; }
.orange-pastel { color:#FFCD67 !important; }

.yellow-dark { color:#FFD400 !important; }
.yellow { color:#FFE600 !important; }
.yellow-pastel { color:#FDED84 !important; }

.ibreathe-green-1 { color:#72BF44 !important; }

.green-dark { color:#BDB645 !important; }
.green { color:#D5E05B !important; }
.green-pastel { color:#DDE89A !important; }

.teal-dark { color:#00A8A5 !important; }
.teal { color:#5BC4BF !important; }
.teal-pastel { color:#96D5D2 !important; }

.cyan-dark { color:#0089CF !important; }
.cyan { color:#00AEEF !important; }
.cyan-pastel { color:#8ED8F8 !important; }

.blue-dark { color:#0B386A !important; }
.blue { color:#005B99 !important; }
.blue-pastel { color:#6A9AC2 !important; }

.grey-dark { color:#3C3A35 !important; }
.grey { color:#615C55 !important; }
.grey-pastel { color:#8A857D !important; }
.grey-light { color:#CEC7BD !important; }
.grey-very-light { color:#EAE4DC !important; }



/*###############################################################################################################################################
																Miscellaneous
################################################################################################################################################*/

.grey-border {
	border: 1px solid #555555 !important;
}

#breadcrumb-container {
	position:relative;
	max-width:960px;
	margin:0 auto;
	padding:0 10px !important;
	background:#EEEEEE;
}
#breadcrumb-container p {
	font-size:18px;
	font-weight:400;
	line-height:24px;
	padding:10px 0;
	color:#70BE47;
}
#breadcrumb-container strong {
	font-weight:700;	
}
#breadcrumb-container a {
	text-decoration:none;
	margin-right:8px; margin-left:8px;
	color:#000000;
}
#breadcrumb-container a:hover {
	text-decoration:underline;
	color:#70BE47;
}

.buy-button:link {
	position: relative;
    display: inline-block;
	padding: 15px 20px !important;
	background-color: #70BE47;
    border-radius: 7px;
    text-align: center;
    vertical-align: middle !important;
    font-size: 25px; font-weight: 500; color: #FFFFFF; text-decoration: none;
}
.buy-button:visited {
	background-color: #70BE47;
	color: #FFFFFF;
    text-decoration: none;
}
.buy-button:hover {
	background-color: #000000;
	color: #FFFFFF;
    text-decoration: none;
}
.buy-button:active {
	background-color: #70BE47;
	color: #FFFFFF;
    text-decoration: none;
}