/* ==========================================================================
   Layouts. Mobile first - Media queries to later handle desktop/tablets
   ========================================================================== */
@charset "UTF-8";

#container {
	min-height: 100vh;
	vertical-align: top;
}
.back-to-top {
	font-family: 'Oswald', sans-serif;

	position: fixed;
	z-index: 100;
	display: none;

	background: #EF3E33;
	color: #ffffff;

	padding: 5px 5px 2px 5px;
	margin: 0;
	bottom: 0;
	right: 5px;

	text-decoration: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
.back-to-top i {
	font-size: 130%;
	color: #fff;
	padding: 5px;
}
#debug_pageid {
	z-index: 100;
	position: fixed;
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 90%;
	background: #EF3E33;
	color: #fff;
	padding: 2px 5px;
	bottom: 0;
	left: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
/* default overlay css */
/* The '.overlay_area' class can be applied to any <div> that you want to take on these attributes. The <div> is then centered over the page. */
#wp_cookie_policy, .overlay_area {
	z-index: 400;
	display: none;

	position: fixed;
	top: 50%;
	left: 50%;
	max-height: 90%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	width: auto;
	
	vertical-align: top;
	text-align: left;
    padding: 15px;
	
	margin: auto;
	overflow-x: auto;

	background: #fff;
	border: 1px solid #c0c0c0;

	/* Box shadow */
	box-shadow: 2px 2px 8px #666;
	-webkit-box-shadow: 2px 2px 8px #666;
	-moz-box-shadow: 2px 2px 8px #666;

	/* Border radius */
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#wp_cookie_policy {
	font-size: 0.8em;
	width: 90%;

    top: inherit;
	bottom: 0;
    left: 0;
    right: 0;	

	-webkit-transform: inherit;
	transform: inherit;
}
#wp_customer {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

	position: relative;
    text-wrap: none;
	font-size: 0.8em;
	text-align: right;
	height: 18px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#wp_customer_detail, #wp_customer_balance {
	display: inline-block;
}
#wp_customer_detail {
	margin-right: 2em;
}
/* fixed header */
#wp_header {
	width: 100%;
	z-index: 100;
	position: fixed;
	top: 0;
}
#wp_body {
	/* sit below fixed header */
	margin-top: 84px;
}
#wp_body.mobile_body {
	/* sit below fixed header */
	margin-top: 76px;
}
#wp_body.admin_height1 {
	/* sit below fixed header */
	margin-top: 169px;
}
#wp_body.admin_height2 {
	/* sit below fixed header */
	margin-top: 201px;
}
#wp_header_nav2 > #wp_customer, #wp_header_nav2 > #wp_customer a {
    color: #fff;
    padding: 5px;
}
#sitesearchform .meganav-column {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;

	text-align: center;
}
    /* no flex box support - fallback */
    .no-flexbox #sitesearchform .meganav-column {
        display: table-cell;
		width: 80%;
    }

#sitesearchform input {
    width: 90%;
    font-size: 1.3em;
    padding: 2px;
	text-align: center;

	margin-top: 0.7em;
	margin-bottom: 0.7em;

    border: 1px solid #ccc;
	border-radius: 7px;

    /* Transitions */    
    -webkit-transition: all 0.5s ease 0.2s;
    -moz-transition: all 0.5s ease 0.2s;
    -o-transition: all 0.5s ease 0.2s;
    -ms-transition: all 0.5s ease 0.2s;
    transition: all 0.5s ease 0.2s;
}
/* mobile form placeholder which is later cloned */
#tmpsearch {
    display: none
}
#searchmobile {
	margin-top: 1em;
	margin-bottom: 1.2em;
	text-align: center;
}
#searchmobile input {
    display: inline-block;
    width: 90%;
    font-size: 1.2em;
    padding: 2px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 7px;
}
/* style placeholders (only works when done individually) */
#sitesearchform input::-webkit-input-placeholder {
	color: #888;
	text-align: center;
}
#sitesearchform input:-moz-placeholder { /* Firefox 18- */
	color: #888;
	text-align: center;
}
#sitesearchform input::-moz-placeholder {  /* Firefox 19+ */
	color: #888;
	text-align: center;
}
#sitesearchform input:-ms-input-placeholder {
	color: #888;
	text-align: center;
}
#searchmobile input::-webkit-input-placeholder {
	color: #888;
	text-align: center;
}
#searchmobile input:-moz-placeholder { /* Firefox 18- */
	color: #888;
	text-align: center;
}
#searchmobile input::-moz-placeholder {  /* Firefox 19+ */
	color: #888;
	text-align: center;
}
#searchmobile input:-ms-input-placeholder {
	color: #888;
	text-align: center;
}

#showbalance {
    display: none;
}
#showbalance .table1 {
	max-width: 100%;
}
/* web page panels/containers */
#wp_breadcrumbs, #wp_main_content, #wp_panel_top, #wp_panel_bottom, #wp_header_nav1, #wp_header_nav2, #wp_header_nav3, #wp_header_nav4 {
	vertical-align: top;
	text-align: left;
}
#wp_logo_mega {
    /* we will use flexbox for top <li> */
	-webkit-flex: 0 0 120px;
    -ms-flex: 0 0 120px;
    flex: 0 0 120px;
	text-align: center;

	margin-right: 5px;
	height: 80px;
	width: 120px;
	
	/* move everything up a bit */
	margin-top: -15px;
}
    /* no flex box support - fallback */
    .no-flexbox #wp_logo_mega {
        display: inline-block;
        width: 120px;
    }

#wp_logo_mega img {
    display: inline-block;
	min-width: 120px;
	max-width: 120px;
    width: 120px;
}
#wp_logo_mobile {
    display: inline-block;
	float: left;
	padding: 5px 0px;
}
#wp_logo_mobile img {
    display: inline-block;
	min-width: 80px;
	max-width: 80px;
    width: 80px;
}
#wp_header_nav1 {
    background: #fff;
	border-bottom: 5px solid #ef3e33;
}
/* hide on startup */
#wp_header_nav1_mobile {
	display: block;
	overflow: auto;
	padding: 0px 10px;
	width: 100%;
}
#wp_header_nav2 {
    background: #2F546C;

    /* http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html */
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #417596 0%, #2F546C 100%);
    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #417596 0%, #2F546C 100%);
    /* Opera */ 
    background-image: -o-linear-gradient(top, #417596 0%, #2F546C 100%);
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #417596), color-stop(1, #2F546C));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #417596 0%, #2F546C 100%);
    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #417596 0%, #2F546C 100%);
}
#wp_header_nav3 {
	padding: 5px;
	padding-left: 10px;
}
#wp_header_nav3 .css_button {
	padding: 2px;
	margin: 2px;
	font-size: 90%;
}
#wp_header_nav3 p {
	margin: 0;
	width: 100%;
}
#wp_header_nav4 {
	padding: 5px;
}
.nav_admin {
	background: #FFEAD5;
}

/* ------ NEW MOBILE MENU ------------ */
/*--- apply to '#new_mobilemenu > ul' list---*/
#new_mobilemenu {
	z-index: 400;
	display: block;
	position: absolute;

	vertical-align: top;
	text-align: left;

	margin-top: 3.95em;
	margin-left: -10px;
	width: 70%;

    opacity: 0;
    visibility: hidden;
    overflow: auto;

	background: #ef3e33;
	color: #fff;

	border-bottom: 1px solid #fff;

	/* Border radius */
	border-radius: 0 0 16px 16px;
	-moz-border-radius: 0 0 16px 16px;
	-webkit-border-radius: 0 0 16px 16px;

    /* Transitions */    
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;

}
/* These use Font-Awesome */
#wp_button_menu, #wp_button_search, #wp_button_user, #wp_button_sms {
    display: inline-block;
    float: right;
    padding-left: 2px;
    padding-right: 5px;
	font-size: 1.5em;
	line-height: 2.5em;
}
#wp_button_menu:hover, #wp_button_search:hover,#wp_button_user:hover, #wp_button_sms:hover, .wp_button_selected {
    cursor: pointer;
	color: #D22E42;
}
.new_mobilemenu_show {
    opacity: 1 !important;
    visibility: visible !important;
}
.new_mobilemenu_li_back {
	text-align: right;
}
.new_mobilemenu_back {
    display: inline-block;
	text-align: left;
    text-decoration: none;
    color: inherit;
	width: auto;
	float: left;
	padding: 0px 5px;
}
.new_mobilemenu_category {
	display: block;
	font-weight: bold;
	text-align: center;
	width: auto;
}
.new_mobilemenu_link {
    display: block;
    text-decoration: none;
}
.new_mobilemenu_link:hover {
    text-decoration: underline;
    cursor: pointer;
}
.new_mobilemenu_right {
    display: inline-block;
	float: right;
	text-align: right;
    text-decoration: none;
	margin-top: 5px;

}
.new_mobilemenu_left {
    display: inline-block;
	text-align: left;
    text-decoration: none;
    color: inherit;
}
.new_mobilemenu_navigate:hover {
    cursor: pointer;
}
.new_mobilemenu_bold {
	font-weight: bold !important;
	font-size: 110% !important;
}
#new_mobilemenu > ul,
#new_mobilemenu > ul a,
#new_mobilemenu > ul li {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-size: 1em;
    font-weight: normal;
    color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
#new_mobilemenu > ul {
	overflow: auto;
}
/* if max-height < 600px, set fixed height in menu ul */
@media all and (max-height: 37.5em) {
	#new_mobilemenu > ul {
		max-height: 360px;
	}
}
#new_mobilemenu > ul > li {
    list-style: none;
    padding: 0.5em;
    border-bottom: 1px solid #fff;
}
#new_mobilemenu > ul > li:last-child {
    border-bottom: none;
}
#wp_breadcrumbs {
    vertical-align: middle;
	font-size: 0.8em;
	color: #fff;
	background-color: #EF3E33;
	padding: 12px 0px 12px;
}
#wp_breadcrumbs a {
	color: #fff;
}
#wp_breadcrumbs i {
	padding-top: 3px;
	padding-left: 3px;
}
#wp_breadcrumbs span {
	vertical-align: top;
	display: inline-block;
}
#wp_breadcrumbs a:hover {
	text-decoration: underline;
}
/* .page_footer and copyright */
.wp_footer {
	padding-top: 10px;
	background: #262629;
	text-align: left;
	font-size: 102%;
	color: #fff;
}
#wp_copyright.wp_footer {
	background: #404040;
}
.wp_footer .flex_row {
	padding: 10px 25px;
}
.wp_footer h3 {
	font-size: 90%;
	color: #fff;
	padding-bottom: 4px;
}
.wp_footer ul {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	min-width: 23%;
	margin: 0px 0px 10px 10px;
	padding: 0px;
}
#wp_copyright .wp_footer ul {
	display: block;
	width: 100%;
}
.wp_footer ul li {
	list-style: none;
	margin: 0px;
}
.wp_footer a {
	color: #ddd;
	text-decoration: none;
}
.wp_footer a:hover,
.wp_footer a:hover h3 {
	color: #ef3e33;
	background: transparent;
	text-decoration: none;
}


/* Makes .page_footer stick to the bottom */
.page_wrapper {
    min-height: 100%;
    /* same as .page_footer height, but minus) */
    margin-bottom: -150px; 
}
.page_wrapper:after {
    content: "";
    display: block;
}
.page_wrapper:after {
    /* must be equal to .page_footer height */
    height: 150px; 
}
.page_footer {
    height: 150px; 
	/*border-top: 5px solid #ef3e33;*/
}

/* inherit overflow so dropdowns work */
#wp_header_nav1, #wp_header_nav2, #wp_header_nav4 {
    overflow: inherit;
}

article {
    vertical-align: top;
    text-align: left;
}
/* section: default to full width and clear. use margin instead of padding */
section {
    display: block;
	width: 97%; /* fallback if needed */
	width: calc(100% - 20px);
    margin-bottom: 10px;
    margin-right: 20px;
    clear: both;
}
section img {
    padding: 10px 5px;
}
/* fix ie8/ie9. Fixes <section> without 'flex_cell' followed by section with 'flex_cell' */
.ie8 section, .ie9 section {
    display: table-row;
	margin-bottom: 20px;
}
.ie8 section.flex_cell, .ie9 section.flex_cell {
    display: inline-block;
}

/* flexbox layout and contents */
/** <section> contents **/
/** Use these classes for template layout of your pages or to flex sections of content
 
<div class="flex_row">
   <section> ... </section>
   <section class="flex_cell"> ... </section>
   <section class="flex_cell"> ... </section>
   <section class="flex_cell"> ... </section>
   <section class="flex_cell"> ... </section>
   <section class="flex_cell"> ... </section>
   <section class="flex_cell"> ... </section>
   <section> ... </section>
   <section class="flex_cell"> ... </section>
   <section class="flex_cell"> ... </section>
   <section class="flex_cell"> ... </section>
   <section class="flex_cell"> ... </section>
</div>

    The .no-flexbox class is put on the page by modernizr.js when doing flexbox detection. '.no-flexbox' class it is then used as a fallback.
 
*/

/* ------------------- */
/* Flexbox rows layout */
/* ------------------- */
.flex_row, .flex_row_center {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
	
	justify-content: left;

	width: 1000px;

	margin: auto;
	padding: 10px;
}
.flex_row_center {
	justify-content: center;
	max-width: 1000px;
	width: inherit;	
}

    /* flexbox fallback */
    .no-flexbox .flex_row {
		display: table;
		margin: auto;
		width: 100%;
    }
#wp_header_nav1_meganav.flex_row {
	padding: 0px 25px;
}
#wp_breadcrumbs.flex_row {
	padding: 0px 12px 0 30px;
}
/* ------------------- */
/* Flexbox cells layout */
/* ------------------- */

.flex_cell {
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    overflow-x: auto;
    align-self: stretch;
	width: auto;
}
/* cell contraints (double is twice as large as single) */
.flex_cell_single, .flex_cell_auto {
    -webkit-flex: 1 1 24%;
    -ms-flex: 1 1 24%;
    flex: 1 1 24%;

	margin-right: 10px;
	margin-bottom: 10px;
	vertical-align: top;
}
.flex_cell_auto {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

	margin-right: 10px;
	margin-bottom: 10px;
}
.flex_cell_center {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    align-self: center;

	margin-right: 10px;
	margin-bottom: 10px;
}
    /* flexbox fallback */
	/* use table-cell */
    .no-flexbox .flex_cell_single, .no-flexbox .flex_cell_auto {
		display: table-cell;
        width: 33%;
		text-align: left;
	}
	
	
.flex_cell_single img {
	width: 100%;
}
.flex_cell_double {
    -webkit-flex: 1 1 48%;
    -ms-flex: 1 1 48%;
    flex: 1 1 48%;

	margin-right: 10px;
	margin-bottom: 10px;
	vertical-align: top;
}
    /* flexbox fallback */
	/* use table-cell */
    .no-flexbox .flex_cell_double {
        display: table-cell;
        width: 48%;
		text-align: left;
    }

/* page index */
.menucontainer {
	display: inline-block;
	position: relative;
	margin-bottom: 10px;

	padding: 5px;
	word-wrap: break-word;

	border: 1px solid #222;
	background: #eee;
	color: #444;

	/* Box shadow */
	box-shadow: 2px 2px 8px #bbb;
	-webkit-box-shadow: 2px 2px 8px #bbb;
	-moz-box-shadow: 2px 2px 8px #bbb;

	/* Border radius */
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.menucontainer h1,.menucontainer h2,.menucontainer h3,.menucontainer h4,.menucontainer h5,.menucontainer h6 {
    background: transparent;
    border: none;
    padding: 2px;
    font-size: 0.9em;
    color: #666;
}
.menucontainer h1 {
    text-align: left;
    font-size: 1.2em;
    color: #444;
    width: 100% !important;
}
.menucontainer ul {
    list-style: none;
}
.menucontainer li {
    font-size: 0.9em;
    color: #666;
    border-bottom: solid 1px #dadada;
}
.menucontainer li:before {
	content: '' !important;
}
.menucontainer a {
    text-decoration: none;
}
.menucontainer a:hover {
    text-decoration: underline;
}
.menucontainer .curr_menu_selected a {
    text-decoration: underline;
}


/* ------ NEW MEGA MENU ------------ */
/*--- 'meganav' nav class (apply to <ul>) ---*/

.meganav,
.meganav a,
.meganav ul,
.meganav li,
.meganav div,
.meganav form,
.meganav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.meganav a { text-decoration: none; }
 
.meganav li { list-style: none; }

.meganav {
    position: relative;
    cursor: default;
    z-index: 330;
	width: 100%;
	font-size: 100%;
	
	/* we will use flexbox for top <li> */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
    /* no flex box support - fallback */
    .no-flexbox .meganav {
        display: table;
		margin: auto;
        width: 100%;
    }

#wp_header_nav4 .meganav {
    z-index: 310;
}
 
/* rest of top navigation */
.meganav > li {
    /* we will use flexbox for top <li> */
	-webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
	text-align: center;
}
    /* no flex box support - fallback */
    .no-flexbox .meganav > li {
        display: table-cell;
        width: auto;
		vertical-align: bottom;
    }
/* 'Company' */
.meganav > li:nth-last-child(4) {
	margin-right: 8em;
}
/* 'Search' */
.meganav > li:last-child {
	margin-right: 16em;
}
#wp_header_nav4 .meganav > li {
	margin-right: 0;
}
#wp_header_nav4 .meganav > li:last-child {
	margin-right: 40%;
}
.meganav > li > a {
	font-family: 'Oswald', sans-serif;
    position: relative;
    display: block;
    z-index: 330;

	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	
    font-size: 94.7%;
    background: transparent;
    color: #666;
 
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
#wp_header_nav4 .meganav > li > a {
    z-index: 310;
    padding: 2px 5px;
}

.meganav .meganav_top_selected {
	color: #fff !important;
	background: #ef3e33;

	/* Border radius */
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;

	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;

}
.meganav > li:hover > a {
	color: #fff !important;
	background: #ef3e33;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

	/* Border radius */
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;

	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
}
.meganav > li > div {
    position: absolute;
    width: 100%;
    left: 0;
	margin-top: 4px;

    opacity: 0;
    visibility: hidden;
    overflow: auto;
 
    background: transparent;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    /* Transitions */    
    -webkit-transition: all .2s ease .2s;
    -moz-transition: all .2s ease .2s;
    -o-transition: all .2s ease .2s;
    -ms-transition: all .2s ease .2s;
    transition: all .2s ease .2s;
}
    /* no flex box support - fallback */
    .no-flexbox .meganav > li > div {
        display: table;
		margin: auto;
        width: 100%;
    }

.meganav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}
/* this class is added/removed by Javascript at this location '.meganav > li:hover > div' */
.meganav .meganav-hidediv {
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: auto !important;
}

/* sidepanel always hide by default (it will only display under .meganav class) */
.meganav-sidepanel {
    display: none;
}
.meganav .meganav-sidepanel {
    display: block;

    /* nested flex item (20% width) */
    -webkit-flex: 1 1 20%;
    -ms-flex: 1 1 20%;
    flex: 1 1 20%;

    padding-right: 0.5em;

	border-right: 2px solid rgba(255,255,255,0.5);
    background-color: #ef3e33;
}
    /* no flex box support - fallback */
    .no-flexbox .meganav-sidepanel {
        display: table-cell;
        width: 20%;
    }
.meganav .meganav-sidepanel h1 {
    font-size: 1em;
    color: #fff;
    margin-top: 0;
}
.meganav .meganav-sidepanel h2,
.meganav .meganav-sidepanel h3,
.meganav .meganav-sidepanel h4,
.meganav .meganav-sidepanel p {
    font-size: 0.9em;
    color: #fff;
    border: none;
}
.meganav .meganav-sidepanel p {
    text-align: justify;
}
.meganav .meganav-column-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    /* nested flex item (75% width) */
    -webkit-flex: 1 1 75%;
    -ms-flex: 1 1 75%;
    flex: 1 1 75%;

	background: #ef3e33;

	/* Border radius */
	border-radius: 0 0 16px 16px;
	-moz-border-radius: 0 0 16px 16px;
	-webkit-border-radius: 0 0 16px 16px;
	
	border-bottom: 1px solid rgba(255,255,255,0.5);
}
    /* no flex box support - fallback */
    .no-flexbox .meganav-column-container {
        display: table;
		margin: auto;
        width: 100%;
    }

.meganav .meganav-fullrow {
    -webkit-flex: 1 1 100% !important;
    -ms-flex: 1 1 100% !important;
    flex: 1 1 100% !important;
	margin-bottom: -1em;
}
    /* no flex box support - fallback */
    .no-flexbox .meganav-fullrow {
        display: table-cell;
        width: 100%;
    }

.meganav .meganav-column {
    -webkit-flex: 1 1 31%;
    -ms-flex: 1 1 31%;
    flex: 1 1 31%;

    padding: 0.5em;
	text-align: left;
}
    /* no flex box support - fallback */
	/* use table-cell and float */
    .no-flexbox .meganav .meganav-column {
        display: table-cell;
		float: left;
		width: 33%;
    }
	/* wrapping for above by clearing left */
	.no-flexbox .meganav .meganav-column:nth-child(3n+1) {
		clear: left;
	}
.meganav .meganav-column h3 {
    font-size: 105.3%;
    line-height: 1.2;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	margin-left: 0.9em;
	padding-bottom: 8px;
	width: 100%;
	width: calc(100% - 20px);
}
.ie8 .meganav .meganav-column h3 {
	font-weight: bold; 
}
.meganav .meganav-column li {
    margin-bottom: 0.4em;
}
.meganav .meganav-column li a {
    display: block;
    line-height: 1.2;
    font-size: 100%;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    padding: 0 5px;
}
.meganav .meganav-column li a:hover,
.meganav .meganav_menu_selected a {
	color: #fff !important;
}
.meganav .meganav-column li a:before {
	font-family: 'FontAwesome';
	content: "\f105\00a0";
	opacity: 0;
}
.meganav .meganav-column li a:hover:before,
.meganav .meganav_menu_selected a:before {
    font-family: 'FontAwesome';
    content: "\f105\00a0";
	opacity: 1 !important;
}
.meganav .meganav-column li a:after {
	font-family: 'FontAwesome';
	content: "\00a0\f104";
	opacity: 0;
}
.meganav .meganav-column li a:hover:after,
.meganav .meganav_menu_selected a:after {
    font-family: 'FontAwesome';
    content: "\00a0\f104";
	opacity: 1 !important;
}

/* columns - flow attributes: .column_flow  UNDER REVIEW */
.column_flow1 {
        column-width: 28.0em;
        -moz-column-width: 28.0em;
        -webkit-column-width: 28.0em;

        column-fill: balance;
        -moz-column-fill: balance;
        -webkit-column-fill: balance;
        /* column gap */
	column-gap: 2.0em;
	-moz-column-gap: 2.0em;
	-webkit-column-gap: 2.0em;

        /* column rule styling */
        column-rule: 2px solid #dadada;
        -moz-column-rule: 2px solid #dadada;
        -webkit-column-rule: 2px solid #dadada;
}
.column_flow1 p:first-child {
	margin-top: 0px;
}
/* end columns - flow attributes */

.panel_buttons {
	width: 100%;
	margin-right: 0.5em;
	white-space: nowrap;
	clear: both;
}
.panel_buttons h1  {
	display: inline-block;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	float: left;
	clear: none;
}
.panel_buttons .panel_buttons_grp {
	display: inline-block;
	float: right;
	clear: none;
}
.box0, .box1, .box2, .box3 {
	display: inline-block;
	background: transparent;
	vertical-align: top;
	padding: 10px;
	
	min-width: 20%;
	width: 100%;
	margin-bottom: 1em;
	margin-right: 1em;
	overflow: auto;	
}
.box1 {
	border: 1px solid #ddd;
}
.box2 {
	border: 1px solid #a9c9e7;
}
.box3 {
	background: #555;
	min-width: 60%;
	width: auto;
}

/* no flex box support - fallback */
.no-flexbox .flex_cell {
    display: table-cell;
    vertical-align: top;
    overflow: auto;
    width: 100%;
}
/* no flex box support - end fallback */


/* Accordion design (as used for myaccount) 
 *
 * We will use a media query to make this responsive
 */
.accordion_box {
	border: 1px solid #D3D3D3;
    padding-left: 10px;
    padding-bottom: 0px;
    padding-right: 0px;
    background-color: #f0f0f0;
	width: 100%;
	overflow: auto;
}

.accordion_description {
    display: inline-block;
    padding-left: 10px;
    width: 30%
}
 
.accordion_detail {
    display: inline-block;
    float: right;
    width: 65%;  
    border-left: 1px solid lightgrey;
    padding-left: 10px; 
    padding-top: 20px;  
    background-color: white;
    min-height: 8em;
}

/* Accordion design (as used for samplecode)
 * This needs to have padding which is why it is a different class
 *
 * We will use a media query to make this responsive
 */
.accordion_box2 { 
    border: 1px solid #D3D3D3;
    padding: 0px 10px;
    background-color: #f0f0f0 !important;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/* PRINT */
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* MEDIA QUERIES */

/* mobile (< 768px) breakpoint 1 */
/* max-width - 768px */
@media all and (min-width: 0.0em) and (max-width: 48em) {
    .exclude_mobile { display: none !important; }

	.box3 {
		min-width: 100%;
	}

	.overlay_area {
		width: 90%;
	}

	.flex_row {
		width: 100% !important;
		padding: 15px;
	}

	#new_mobilemenu {
		width: 100%;
	}
	
	.row-large a {
		font-size: 125%;
	}

	.fa-3x {font-size: 2.5em;}

    /* meganav */
    .meganav .meganav-column {
	-webkit-flex: 1 1 48%;
	-ms-flex: 1 1 48%;
	flex: 1 1 48%;
    }
    /* no flex box support - fallback */
    .no-flexbox .meganav .meganav-column {
		width: 50%;
    }
	/* wrapping for above */
	.no-flexbox .meganav .meganav-column:nth-child(2n+1) {
		clear: left;
	}

	.meganav {
	font-size: 85%;
	}

	#wp_customer_detail {
		margin-right: 0;
	}
	/* 'Company' */
	.meganav > li:nth-last-child(4) {
		margin-right: 0;
	}
	/* 'Search' */
	.meganav > li:last-child {
		margin-right: 0;
	}

    /* flexbox cells */
    .flex_cell {
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
    }
	.flex_cell_single {
		-webkit-flex: 1 1 100%;
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
	}
	.flex_cell_double {
		-webkit-flex: 1 1 100%;
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
	}
    /* no flex box support - fallback for .flex_cell */
    .no-flexbox .flex_cell {
		display: table-cell;
		vertical-align: top;
		width: 100%;
    }
    .no-flexbox .flex_cell_single {
        display: table-cell;
        width: 100%;
		text-align: left;
	}
    .no-flexbox .flex_cell_double {
        display: table-cell;
        width: 100%;
		text-align: left;
    }

    pre {
	min-width: 30em;
	max-width: 30em;
    }
    .table1 {
	max-width: 90%;
    }

    .f_left, .f_right, .f_center {
	max-width: 90%;
    }

	.wp_footer ul {
		min-width: 45%;
	}

    .accordion_description {
        text-align: center;
        width: 100%
    }
 
    .accordion_detail {
        float: none;
        width: 100%;  
        padding-left: 0px; 
        padding-top: 0px;  
        border-left: none;
        background-color: white;
        min-height: 0em;
    }

    .csofttab1 {
        width: 70%;
    }

	/* RWD Table - Unseen Column */
	.unseen-column .second, .unseen-column .third { display:none; visibility:hidden; }
	
}
/* tablet (768-992) breakpoint 2 */
/* min-width - 768px */
@media all and (min-width: 48em) and (max-width: 62.0em) {
    .exclude_tablet { display: none !important; }

	.overlay_area {
		width: 90%;
	}

	.flex_row {
		width: 100% !important;
	}
	.flex_cell_single img {
		width: 100%;
	}

    /* meganav */
    .meganav .meganav-column {
	-webkit-flex: 1 1 31%;
	-ms-flex: 1 1 31%;
	flex: 1 1 31%;
    }
    /* no flex box support - fallback */
    .no-flexbox .meganav .meganav-column {
	width: 33%;
    }
	/* wrapping for above */
	.no-flexbox .meganav .meganav-column:nth-child(3n+1) {
		clear: left;
	}

	.meganav {
	font-size: 85%;
	}

	#wp_customer_detail {
		margin-right: 0;
	}
	/* 'Company' */
	.meganav > li:nth-last-child(4) {
		margin-right: 0;
	}
	/* 'Search' */
	.meganav > li:last-child {
		margin-right: 0;
	}

	/* Message/Account centre */
	.meganav > li:nth-last-child(3),
	.meganav > li:nth-last-child(2) {
		margin-right: 0;
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
	}
	.account-centre,.messsage-centre {
		display: none;
	}

    /* flexbox cells */
    .flex_cell {
		-webkit-flex: 1 1 48%;
		-ms-flex: 1 1 48%;
		flex: 1 1 48%;
    }
	.flex_cell_single {
		-webkit-flex: 1 1 32%;
		-ms-flex: 1 1 32%;
		flex: 1 1 32%;
	}
	.flex_cell_double {
		-webkit-flex: 1 1 64%;
		-ms-flex: 1 1 64%;
		flex: 1 1 64%;
	}
    /* no flex box support - fallback for .flex_cell */
    .no-flexbox .flex_cell {
		display: table-cell;
		vertical-align: top;
		width: 48%;
    }
    .no-flexbox .flex_cell_single {
        display: table-cell;
        width: 32%;
		text-align: left;
	}
    .no-flexbox .flex_cell_double {
        display: table-cell;
        width: 64%;
		text-align: left;
    }

    pre {
	min-width: 30em;
	max-width: 40em;
    }
    .table1 {
	max-width: 90%;
    }

    .accordion_description {
        text-align: center;
        width: 100%
    }
 
    .f_left, .f_right, .f_center {
	max-width: 70%;
    }

    .accordion_detail {
        float: none;
        width: 100%;
        padding-left: 0px;
        padding-top: 0px;
        border-left: none;
        background-color: white;
        min-height: 0em;
    }
	
	/* RWD Table - Unseen Column */
	.unseen-column .third { display:none; visibility:hidden; }

}

/* desktop (992-1200) breakpoint 3 */
/* min-width - 992px */
@media all and (min-width: 62.0em) and (max-width: 75em) {
    .exclude_desktop { display: none !important; }
	.overlay_area {
		width: auto;
	}
	#wp_cookie_policy {
		width: 60%;
	}
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 1.17em;
	}

	.flex_row {
		width: 100% !important;
	}
	.flex_cell_single img {
		width: 90%;
	}

    /* meganav */
    .meganav .meganav-column {
	-webkit-flex: 1 1 31%;
	-ms-flex: 1 1 31%;
	flex: 1 1 31%;
    }
    /* no flex box support - fallback */
    .no-flexbox .meganav .meganav-column {
	width: 33%;
    }
	/* wrapping for above */
	.no-flexbox .meganav .meganav-column:nth-child(3n+1) {
		clear: left;
	}

	.meganav {
	font-size: 85%;
	}

	#wp_customer_detail {
		margin-right: 2em;
	}
	/* 'Company' */
	.meganav > li:nth-last-child(4) {
		margin-right: 2em;
	}
	/* 'Search' */
	.meganav > li:last-child {
		margin-right: 2em;
	}

    /* flexbox cells */
    .flex_cell {
		-webkit-flex: 1 1 32%;
		-ms-flex: 1 1 32%;
		flex: 1 1 32%;
    }
	.flex_cell_single {
		-webkit-flex: 1 1 24%;
		-ms-flex: 1 1 24%;
		flex: 1 1 24%;
	}
	.flex_cell_double {
		-webkit-flex: 1 1 48%;
		-ms-flex: 1 1 48%;
		flex: 1 1 48%;
	}
    /* no flex box support - fallback for .flex_cell */
    .no-flexbox .flex_cell {
		display: table-cell;
		vertical-align: top;
		width: 45%;
    }
    .no-flexbox .flex_cell_single {
        display: table-cell;
        width: 32%;
		text-align: left;
	}
    .no-flexbox .flex_cell_double {
        display: table-cell;
        width: 64%;
		text-align: left;
    }

    .f_left, .f_right {
	max-width: 48%;
    }
    .f_center {
	max-width: 60%;
    }

    pre {
	min-width: 30em;
	max-width: 60em;
    }
    .table1 {
	max-width: 80%;
    }
	
	/* RWD Table - Unseen Column */
	.unseen-column .second, .unseen-column .third { display:table-cell; visibility:visible; }

}
/* large screens (> 1200) breakpoint 4 */
/* min-width - 1200px */
@media all and (min-width: 75em){
    .exclude_large { display: none !important; }

	.overlay_area {
		width: auto;
	}
	#wp_cookie_policy {
		width: 60%;
	}
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 1.17em;
	}

	.flex_row {
		width: 1000px;
	}
	.flex_cell_single img {
		width: 90%;
	}

    /* meganav */
    .meganav .meganav-column {
	-webkit-flex: 1 1 31%;
	-ms-flex: 1 1 31%;
	flex: 1 1 31%;
    }

	#wp_customer_detail {
		margin-right: 2em;
	}
	/* 'Company' */
	.meganav > li:nth-last-child(4) {
		margin-right: 8em;
	}
	/* 'Search' */
	.meganav > li:last-child {
		margin-right: 16em;
	}

    /* no flex box support - fallback */
    .no-flexbox .meganav .meganav-column {
	width: 33%;
    }
	/* wrapping for above */
	.no-flexbox .meganav .meganav-column:nth-child(3n+1) {
		clear: left;
	}

	.meganav {
	font-size: 100%;
	}

    /* flexbox cells */
    .flex_cell {
		-webkit-flex: 1 1 24%;
		-ms-flex: 1 1 24%;
		flex: 1 1 24%;
    }
	.flex_cell_single {
		-webkit-flex: 1 1 24%;
		-ms-flex: 1 1 24%;
		flex: 1 1 24%;
	}
	.flex_cell_double {
		-webkit-flex: 1 1 48%;
		-ms-flex: 1 1 48%;
		flex: 1 1 48%;
	}
    /* no flex box support - fallback for .flex_cell */
    .no-flexbox .flex_cell {
		display: table-cell;
		vertical-align: top;
		width: 45%;
    }
    .no-flexbox .flex_cell_single {
        display: table-cell;
        width: 32%;
		text-align: left;
	}
    .no-flexbox .flex_cell_double {
        display: table-cell;
        width: 64%;
		text-align: left;
    }

    .f_left, .f_right, .f_center {
	max-width: 48%;
    }

    pre {
	min-width: 30em;
	max-width: 60em;
    }
    .table1 {
	max-width: 80%;
    }
	
	/* RWD Table - Unseen Column */
	.unseen-column .second, .unseen-column .third { display:table-cell; visibility:visible; }

}