@charset "utf-8";
/* CSS Document - these are pure illuceo styles, all prefixed i_ */

/*============================= set standard site defaults  =========================================*/
/* Standard illuceo theme colours
Dark blue 	rgb(59,55,108)  	#3B376C
Light blue 	rgb(184,195,203) 	#B8C3CB - tone for backgrounds  rgb(243,245,246)	#F3F5F6
Yellow 		rgb(255,255,65) 	#FFFF41
Orange 		rgb(255,127,0) 		#FF7F00
Grey 		rgb(99,99,99) 		#636363
*/
.i_textarea {
	max-width: 95%;
	border: 1px solid #89a6da;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 2px;
	vertical-align: top;
}


/*============================= illuceo id elements - only use once on a page =========================================*/
#i_opacity_layer {
	position:fixed;
	top:0;
	width:100%;
	height:100%;
	background-color: #000000;
	opacity:0.5;
 	filter:alpha(opacity=50); /* For IE8 and earlier */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index:-1;	
}
#i_top {
	min-height: 10%;
	padding-top: 10px;
    background-color: white; /* #999; */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
	opacity:0.8;
 	filter:alpha(opacity=80); /* For IE8 and earlier */
}
#i_footer {
    width: 100%;
    background: none repeat scroll 0 0 #D2D2D2;
    bottom: 0;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.3) inset;
    color: #464646;
    padding: 5px 0;
    position: fixed;
    text-align: center;
}
/* ######### Landing page styles ######### */
#i_landing {
	width: 50%;
	margin-left: 20%;
	margin-top: 20%;
	position:fixed;
	z-index:1;
}
#i_landing_logo {
	position: fixed;
	top: 60%;
	left: 75%;
	z-index:1;
	width:24%;
}
#i_shell {
	width: 100%; 
	text-align: left;
	position: relative;
	margin: auto;
	padding: 0;
	z-index: 1;
}
/* pages are 2 columns, left for navigation, right for content */
#i_navigation {
/* total on left is 20% */
	width: 15%;  /* 20% */
	float: left;
	margin-left: 3%; /* 8% */
	margin-right: 2%;
	margin-bottom: 1%;
	margin-top: 1%;
	position: fixed;
}
#i_content {
/* total on right is 80% */
	width: 75%;  /* 60% */
	text-align: left;
	margin: auto; 
	margin-top: 1%;
	margin-bottom: 1%;
	margin-right: 3%;  /* 5% */
	padding: 1%; /*illuceo */
}
/*============================= illuceo class elements - can be used many times on a page =========================================*/
.i_area, .i_area_white, .i_area_clear  {
	/* this style controls font size of anything within the content areas 
	and font size on any elements within these areas must be expressed as a percentage of 75%
	eg 133% would then be the same as overall site default of 100% of browser setting */
	font-size: 75%;
	overflow: auto;
	/* background-color: #ffffff; /* #F8F5FA; */
	padding-top: 2%;
	padding-right: 1%;
	padding-bottom: 1%;
	padding-left: 1%;
	text-align: justify;
}
.i_area {
	background: rgba(243,245,246,0.7);
}
.i_area_white {
	background-color:#FFFFFF;
}
.i_area_clear {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.i_bar {
	padding:50px 80px;
	text-align: justify;
}
.i_gradient_dark {
/* add this whenever a box needs a background instead of plain white */
	background: rbga(184,195,203,1); /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, rgba(184,195,203,1), rgba(99,99,99,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(184,195,203,1), rgba(99,99,99,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(184,195,203,1), rgba(99,99,99,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(184,195,203,0.5), rgba(99,99,99,1)); /* Standard syntax (must be last) */
}
/* following based on illuceo brand colours */

/* Standard illuceo theme colours
Dark blue 	rgb(59,55,108)  	#3B376C
Light blue 	rgb(184,195,203) 	#B8C3CB - tone for backgrounds  rgb(243,245,246)	#F3F5F6
Yellow 		rgb(255,255,65) 	#FFFF41
Orange 		rgb(255,127,0) 		#FF7F00
Grey 		rgb(99,99,99) 		#636363
*/
.i_gradient_blue {
/* add this whenever a box needs a background instead of plain white */
	background: rgb(184,195,203); /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, rgb(184,195,203), rgb(59,55,108)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgb(184,195,203), rgb(59,55,108)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgb(184,195,203), rgb(59,55,108)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgb(184,195,203), rgb(59,55,108)); /* Standard syntax (must be last) */
}
.i_gradient_grey {
/* add this whenever a box needs a background instead of plain white */
	background: rgb(184,195,203); /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, rgb(184,195,203), rgb(99,99,99)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgb(184,195,203), rgb(99,99,99)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgb(184,195,203), rgb(99,99,99)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgb(184,195,203), rgb(243,245,246)); /* Standard syntax (must be last) */
}

/* following examples found at https://uigradients.com */
.i_gradient_winter {
/* add this whenever a box needs a background instead of plain white */
	background: #e6dada; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #e6dada, #274046); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #e6dada, #274046); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #e6dada, #274046); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #e6dada, #274046); /* Standard syntax (must be last) */
}
.i_gradient_moor {
/* add this whenever a box needs a background instead of plain white */
	background: #616161; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #616161, #9bc5c3); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #616161, #9bc5c3); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #616161, #9bc5c3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #616161, #9bc5c3); /* Standard syntax (must be last) */
}
.i_gradient_sirius {
/* add this whenever a box needs a background instead of plain white */
	background: #EFEFBB; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #EFEFBB, #D4D3DD); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #EFEFBB, #D4D3DD); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #EFEFBB, #D4D3DD); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #EFEFBB, #D4D3DD); /* Standard syntax (must be last) */
}
.i_gradient_delicate {
/* add this whenever a box needs a background instead of plain white */
	background: #D3CCE3; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #D3CCE3, #E9E4F0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #D3CCE3, #E9E4F0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #D3CCE3, #E9E4F0); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #D3CCE3, #E9E4F0); /* Standard syntax (must be last) */
}
.i_gradient_dull {
	background: #C9D6FF;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF);  /* Chrome 10-25, Safari 5.1-6 */
    background: -o-linear-gradient(right, #E2E2E2, #C9D6FF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #E2E2E2, #C9D6FF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #E2E2E2, #C9D6FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */	
}
.i_gradient_hydrogen {
	background: #667db6;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);  /* Chrome 10-25, Safari 5.1-6 */
    background: -o-linear-gradient(right, #667db6, #0082c8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #667db6, #0082c8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */	
}
.i_gradient_scooter {
	background: #36D1DC;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC);  /* Chrome 10-25, Safari 5.1-6 */
    background: -o-linear-gradient(right, #5B86E5, #36D1DC); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #5B86E5, #36D1DC); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #5B86E5, #36D1DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.i_gradient_bora_bora {
	background: #2bc0e4;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #2bc0e4, #eaecc6);  /* Chrome 10-25, Safari 5.1-6 */
    background: -o-linear-gradient(right, #2bc0e4, #eaecc6); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #2bc0e4, #eaecc6); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #2bc0e4, #eaecc6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.i_gradient_green_blue {
	background: #c2e59c;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #c2e59c, #64b3f4);  /* Chrome 10-25, Safari 5.1-6 */
    background: -o-linear-gradient(right, #c2e59c, #64b3f4); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #c2e59c, #64b3f4); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #c2e59c, #64b3f4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.i_gradient_shore {
	background: #70e1f5;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #70e1f5, #ffd194);  /* Chrome 10-25, Safari 5.1-6 */
    background: -o-linear-gradient(right, #70e1f5, #ffd194); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #70e1f5, #ffd194); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #70e1f5, #ffd194); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.i_gradient_monte_carlo {
	background: #CC95C0;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #7AA1D2, #DBD4B4, #CC95C0);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #7AA1D2, #DBD4B4, #CC95C0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.i_banner {
	width:96%;
	margin-left:auto;
	margin-right:auto;
	margin-top: 2px;
	border: medium solid #89a6da;
	border-radius: 15px;
	-moz-border-radius: 15px;
	opacity:1.0;
 	filter:alpha(opacity=100); /* For IE8 and earlier */
}
.i_mid_content {
/* creates a div 50% of page, aligned to middle of area */
	width:80%;
	margin-left:auto;
	margin-right:auto;
	margin-top: 2px;
	border: medium solid #009999;
	border-radius: 15px;
	-moz-border-radius: 15px;
}
.i_image {
	/* make sure image fits its div and scales if too big */
    height: auto;
	max-width: 100%;
	z-index:1;
	/* overflow: hidden; this seemed to mess things up eg login to fb on home page */
}
.i_image_icon {
height:16px;
width:16px;
}
.i_image_icon_24 {
height:24px;
width:24px;
}
.i_image_btn {
height:50px;
width:50px;
}
.i_image_rnd {
border-radius: 50%;
}
.i_image_cntr {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.i_issuu {
	height: 295px;
	width: 50%;
	margin-left:auto;
	margin-right:auto;
}
.i_notes, .i_notes_emphasis, .i_card_notes {
	padding-top: 1%;   /* 7.2.1 from 10px */
	padding-left: 1%; /* 7.2.1 from 10px */
	padding-right: 1%; /* 7.2.1 from 10px */
}
.i_card_notes {
	margin-left: 2%;
}
.i_doc_notes {
	padding-top: 0px;
	padding-left: 1%; /* 7.2.1 from 10px */
	padding-right: 1%; /* 7.2.1 from 10px */
	line-height: 1;
}

.i_notes_emphasis, .i_emphasis {
	font-style: italic;
}
.i_page_headers {
	font-size: 200%;
	font-weight: bolder;
	padding-left: 1%;
	padding-right: 1%;
	text-align:center;	/* text-shadow: 3px 3px 3px #000; */
}
.i_section_header {
	font-size: 150%;
	/* font-weight: bolder; */
	padding-left: 1%;
	padding-right: 1%;
	margin-bottom: 10px;
}
.i_table {
	table-layout:fixed;
	border-collapse:collapse;
	border:	0;
	padding: 2px; /*1%; */
	width: 100%;
}
.error {
	font-weight: bold;
	color: #C00
}
/* these 3 elements allow a div to fade in/out over 5s and will use when an update is successful */
.i_success_text {
    background:#15ea15;      /* #B8C3CB; */
    height: 30px;
    vertical-align: middle;
    font-size: 100%;
	border-radius: 15px;
	-moz-border-radius: 15px;
    -webkit-animation: fadeinout 10s linear forwards;
    animation: fadeinout 10s linear forwards;
}
.i_pdf {  /* use with <embed> of a pdf document */
	width:50%;
	height: 1000px;
	}
/* use fadeinout for fade effect */
@-webkit-keyframes fadeinout {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
	}
}
@keyframes fadeinout {
    0%, 100% {
        opacity: 0;
}
    50% {
        opacity: 1;
    }
}
/* use css-animation to make an element, eg div, disappear */
.i_success_div {
    width: 95%;
    height: 30px;
	text-align:center;
   -webkit-animation: css-animation 0s ease-in 10s forwards;
    animation: css-animation 0s ease-in 10s forwards;
}
@-webkit-keyframes css-animation {
    to {
        width: 0;
        height: 0;
        opacity: 0;
    }
}
@keyframes css-animation {
    to {
        width: 0;
        height: 0;
        opacity: 0;
    }
}
/*============================= Alignment  =========================================*/
.i_cntr, .i_center {
	text-align: center;
}
.i_cntr {
	/* Alternate center class, this one with padding added */
	padding: 10px 0;
}
.i_alignright {
	float: right;
	padding-right: 5px;
}
.i_text_right {
	text-align: right;
}
.i_text_left {
	text-align: left;
}
/*============================= Fonts  =========================================*/
.i_font_50 {
font-size: 50%;
}
.i_font_75 {
font-size: 75%;
}
.i_font_100 {
font-size: 100%;
}
.i_font_125 {
font-size: 125%;
}
.i_font_150 {
font-size: 150%;
}
.i_font_200 {
font-size: 200%;
}
.i_underline {
	text-decoration: underline;
}
.i_bold {
	font-weight: bold;
}
/*============================= Columns  =========================================*/
/* ######### Ensure colums created in sets that total 100% ##### */
/* use i_border with a column class to add border - be aware the 1% width may impact layouts by exceeding 100% */
/* columns 40/60 where right can either have or have no margin */
.i_left_col_40 {
	margin-left: 2%;
	margin-right: 1%;
	width: 37%;
	float: left;
}
.i_right_col_60 {
	width: 57%;
	float: right;
	margin-right: 2%;
	margin-left: 1%;
}
/* 80/20 */
.i_left_col_80 {
	margin-left: 2%;
	margin-right: 1%;
	width: 77%;
	float: left;
}
.i_right_col_20 {
	width: 17%;
	float: right;
	margin-right: 2%;
	margin-left: 1%;
}
/* 50/50 */
.i_left_col_50 {
	width: 47%;
	margin-left: 2%;
	margin-right: 1%;
	float: left;
}
.i_right_col_50 {
	width: 47%;
	float: right;
	margin-right: 2%;
	margin-left: 1%;
}
.i_left_col_50_brdr {
	width: 45%;
	margin-left: 2%;
	margin-right: 1%;
	float: left;
	border-color: #89a6da;
	border-width:1%;
	border-style:solid;
	border-radius: 15px;
	-moz-border-radius: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.i_right_col_50_brdr {
	width: 45%;
	float: right;
	margin-right: 2%;
	margin-left: 1%;
	border-color: #89a6da;
	border-width:1%;
	border-style:solid;
	border-radius: 15px;
	-moz-border-radius: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.i_right_col_no_margin_60 {
	width: 60%;
	float: right;
}
/* a 60/40 layout */
.i_left_col_60 {
	margin-left: 2%;
	margin-right: 1%;
	width: 57%;
	float: left;
}
.i_right_col_40 {
	width: 37%;
	float: right;
	margin-right: 2%;
	margin-left: 1%;
}
/* a 75/25 layout */
.i_left_col_75 {
	margin-left: 2%;
	margin-right: 1%;
	width: 72%;
	float: left;
}
.i_right_col_25 {
	width: 22%;
	float: right;
	margin-right: 2%;
	margin-left: 1%;
}
/* a 25/75 layout */
.i_left_col_25 {
	margin-left: 2%;
	margin-right: 1%;
	width: 22%;
	float: left;
}
.i_right_col_75 {
	width: 72%;
	float: right;
	margin-right: 2%;
	margin-left: 1%;
}
/* a 70/30 layout */
.i_left_col_70 {
	margin-left: 2%;
	margin-right: 1%;
	width: 67%;
	float: left;
}
.i_right_col_30 {
	width: 27%;
	float: right;
	margin-right: 2%;
	margin-left: 1%;
}
/* a 10/90 layout */
.i_left_col_10 {
	margin-left: auto;
	margin-right: auto;
	width: 10%;
	float: left;
}
.i_right_col_90 {
	width: 87%;
	float: right;
	margin-left: 1%;
	margin-right: 2%;
}
/* a 15/85 layout */
.i_left_col_15 {
	margin-left: auto;
	margin-right: auto;
	width: 15%;
	float: left;
}
.i_right_col_85 {
	width: 82%;
	float: right;
	margin-left: 1%;
	margin-right: 2%;
}
/* a 30/70 layout */
.i_left_col_30 {
	margin-left: 2%;
	margin-right: 1%;
	width: 27%;
	float: left;
}
.i_right_col_70 {
	width: 67%;
	float: right;
	margin-left: 1%;
	margin-right: 2%;
}
/* a 3 column layout */
.i_3col_left {
	width: 32%;
	float: left;
	margin-left: 1%;
}
.i_3col_mid {
	margin-left: 1%;
	margin-right: 1%;
	width: 32%;
	float: left;
}
.i_3col_right {
	width: 32%;
	float: left;
	margin-right: 1%;
}
/* a 3 column banner layout */
.i_3col_banner_left {
	width: 18%;
	float: left;
	text-align: center;
	margin-left: 1%;
	margin-right: 1%;
}
.i_3col_banner_mid {
	width: 60%;
	float: left;
	text-align: center;
}
.i_3col_banner_right {
	width: 18%;
	float: left;
	text-align: center;
	margin-left: 1%;
	margin-right: 1%;
}
/* a 3 column parallax layout, with transparent outer cols */
.i_3col_wide_left {
	width: 8%;
	float: left;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	margin-left: 1%;
	margin-right: 1%;
}
.i_3col_wide_mid {
	width: 80%;
	float: left;
	background: rgba(243,245,246,0.0)
}
.i_3col_wide_right {
	width: 8%;
	float: left;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	margin-left: 1%;
	margin-right: 1%;
}
/* a 3 column parallax layout for profiles, with transparent outer cols */
.i_3col_narrow_left {
	width: 23%;
	float: left;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	margin-left: 1%;
	margin-right: 1%;
}
.i_3col_narrow_mid {
	width: 50%;
	float: left;
	background: rgba(243,245,246,0.0)
}
.i_3col_narrow_right {
	width: 23%;
	float: left;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	margin-left: 1%;
	margin-right: 1%;
}

.i_clear {
	clear: both;
}
/*============================= borders  =========================================*/
.i_border {
	border-color: #89a6da;
	border-width:1px;
	border-style:solid;
	border-radius: 15px;
	-moz-border-radius: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.i_line {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	height: 3px;
	background: #F3F5F6;
	text-shadow: 2px 2px #B8C3CB;
}
hr.i_wiggly_line {
	height: 6px;
	background: url(../images/horizontal_line.png) repeat-x 0 0;	
    border: 0;
    width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1%;
}
/*============================= HTML5 Navigation Bar  =========================================*/
.i_nav {
	/*	background-color: #999999;
	border-radius: 15px;
	-moz-border-radius: 15px;
	*/
	border: 1px solid #A2A2A2;
	text-align:center;
	background-color: #A2A2A2;
	color: #fff;
	display: inline-block;
	margin: 0;
	font-size: 75%;
}
.i_nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.i_nav ul li {
    margin: 0;
    display: inline-block;
    list-style-type: none;
    transition: all 0.2s;
}
.i_nav > ul > li > a {
    color: #fff;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;
	font-size: 75%;
}
.i_nav li > ul{
    display : none;
    margin-top:1px;
    background-color: #bbb;

}
.i_nav li > ul li{
    display: block;
}
.i_nav  li > ul li a {
    color: #fff;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;
}
.i_nav li:hover {
    background-color: #666;
}
.i_nav li:hover > ul{
    position:absolute;
    display : block;
}
.i_nav li > ul > li ul  {
    display: none;
    background-color: #888;
}
.i_nav li > ul > li:hover > ul  {
    position:absolute;
    display : block;
    margin-left:100%;
    margin-top:-3em;
}
.i_nav ul > li.sub{
    background: url(../images/ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
}
.i_nav ul > li.sub li.sub{
    background: url(../images/ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
}
/* ## Navigation links at bottom of page ## */
.i_nav_button_sml:link,
.i_nav_button_sml:visited {
	color: #464646;
	text-decoration: none;
}
.i_nav_button_sml:hover,
.i_nav_button_sml:active {
	color: #000000;
	text-decoration: none;
}
/*============================= Login forms =========================================*/
.i_login {
	/* provides a block into which login fields held - NO LONGER USED */
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-top: 2px;
	border: medium solid #7974B8;
	/* background-color:#7974B8; */
	border-radius: 15px;
	-moz-border-radius: 15px;
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	box-shadow: 5px 5px 3px #888888;
}
.i_login_box {
	max-width: 45%;
	font-size: 75%;
	padding: 2px;
	background-color:#FFFFFF;
	/* background: #ffffff url('../../../default/external/images/backgrounds/form_input.gif') repeat-x top left; /* illuceo */ 
	margin: 2px;
	border: 1px solid #89a6da;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
/*============================= Lists  =========================================*/
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
/*body {
  padding: 0 2em;
  font-size: 1.3em;
  font-family: 'Roboto', 'sans-serif';
  color: white;
  background: black;
  input-placeholder: red;
} */

/* List styling */
.i_featureList, .i_featureList ul {
  margin-top: 0;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 0.5em;
  list-style-type: none;
}
.i_featureList li:before {
  position: absolute;
  margin-left: -1.3em;
  font-weight: bold;
}
.i_featureList li.tick:before {
  content: "\2713";
  color: #3b376c; /* darkgreen; */
}
.i_featureList li.cross:before {
  content: "\2717";
  color: #ff7f00; /* crimson; */
}
.i_list {
	margin: 5px 10px;
	padding: 0;
}
.i_list li {
	list-style: none;
	background: url('../images/tick.png') no-repeat 0 5px;
	padding-top: 7px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 30px;	
	/* padding-left: 5px;
	vertical-align: middle; */
}
/* arrow list */
.i_arrow_list {
}
.i_arrow_list ul {
    list-style-image: url("../images/arrow-rt.png");
    color: #eee;
}
.i_arrow_list ul li {
    line-height: 30px;
}
.i_order_list {
	margin-left: 4%;	
}
/*============================= Elements on the Customer Fees table  =========================================*/
.i_fees_table {
	table-layout:fixed;
	margin-left:auto;
	margin-right:auto;
	border-collapse:collapse;
	padding: 1%;
	border: 0;
	width: 75%;
}
.i_fees_results {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	margin-top: 10px;
	border: medium solid #EDE1F5;
	border-radius: 15px;
	-moz-border-radius: 15px;
	overflow: scroller;
	padding: 1%;
	/*min-height: 400px;
	max-height: 450px;*/
}
.i_fees_row_head {
	/* background-color: #ffffff; */
    background: #cccccc;
    background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#E5E5E5));
    background: -moz-linear-gradient(top, #cccccc, #E5E5E5);
    background: linear-gradient(to bottom, #cccccc, #E5E5E5);
}
.i_fees_row_odd {
	background-color: #E5E5E5;  /* #DAEEF3; */
}
.i_fees_row_even {
	background-color: #cccccc;
}
.i_fees_row_head, .i_fees_row_odd, .i_fees_row_even {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	padding: 1%;
}
.i_fees_col_1 {
	width: 25%;
}
.i_fees_col_2 {
	width: 15%;
}
.i_fees_col_3 {
	width: 15%;
}
.i_fees_col_4 {
	width: 15%;
}
.i_fees_col_5 {
	width: 15%;
}
.i_fees_col_6 {
	width: 15%;
}
/* columns 7, 8 & 9 not being used */
.i_fees_col_7 {
	width: 0%;
}
.i_fees_col_8 {
	width: 0%;
}
.i_fees_col_9 {
	width: 0%;
}
.i_fees_col_1, .i_fees_col_2, .i_fees_col_3, .i_fees_col_4, .i_fees_col_5, .i_fees_col_6, .i_fees_col_7, .i_fees_col_8, .i_fees_col_9 {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
} 
/*============================= 2 column tables to use on forms  =========================================*/
.i_form_results {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	margin-top: 10px;
	border: medium solid #EDE1F5;
	border-radius: 15px;
	-moz-border-radius: 15px;
	overflow: scroller;
	padding: 1%;
	/*min-height: 400px;
	max-height: 450px;*/
}
.i_form_row_head {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding: 1%;
	background-color: #cccccc;  /* #DAEEF3; */
}
.i_form_row_odd {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding: 1%;
	background-color: #E5E5E5;  /* #DAEEF3; */
}
.i_form_row_even {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding: 1%;
	background-color:#cccccc;  /* #DAEEF3; */;
}
.i_form_col_1 {
	width: 30%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.i_form_col_2 {
	width: 70%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
/* these 2 are specifically for the team builder page */
.i_role_col_1 {
	width: 87%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-left: 2%;
	margin-right: 1%;
	float: left;
}
.i_role_col_2 {
	width: 9%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	float: right;
	margin-left: 1%;
}
/* these 2 are specifically for 50/50 columns in a form */
.i_form_left_col_50 {
	width: 50%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.i_form_right_col_50 {
	width: 50%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
/*============================= Rows  =========================================*/
.i_row_odd {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding: 2px;
	background-color: #E5E5E5;  /* #DAEEF3; */
}
.i_row_even {
	width:95%;
	margin-left:auto;
	margin-right:auto;
	padding: 2px;
	background-color:#cccccc;  /* #DAEEF3; */;
}
/*============================= Tooltips  =========================================*/
/* these tooltips provide more info on buttons by displaying 'title' attribute */
/* Left Tooltip container */
.i_tooltip_left{
	display: inline;
	position: relative;
	text-align: left;
}
/* this element styles the box for the tooltip and positions below the link */
.i_tooltip_left:hover:before{
	/*background: #636363;  #F8F5FA; /* #333; */
	opacity:0.8;
 	filter:alpha(opacity=80); /* For IE8 and earlier */
	content: " ";
	position: absolute;
	z-index: 99;
    top: 50%;
    right: calc(100% - 7px); /* To the right of the tooltip */
    margin-top: -8px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent transparent #636363;
}
/* this element creates a pseudo class 'after' and forms the arrow to the right of the tool tip */
.i_tooltip_left:hover:after {
	background: #636363;
	opacity:0.8;
 	filter:alpha(opacity=80); /* For IE8 and earlier */
	border-radius: 5px;
	-moz-border-radius: 5px;
	color: #fff; 
	padding: 5px 15px;

	/* this causes the tooltip to be on left of link */
	content: attr(title);
	position: absolute;
	z-index: 98;
	width: 120px;
	top: -5px;
	right: 105%;
}
/* Right Tooltip container */
.i_tooltip_right{
	display: inline;
	position: relative;
	text-align: left;
}
/* this element styles the box for the tooltip and positions below the link */
.i_tooltip_right:hover:before{
	/*background: #636363;  #F8F5FA; /* #333; */
	opacity:0.8;
 	filter:alpha(opacity=80); /* For IE8 and earlier */
	content: " ";
	position: absolute;
	z-index: 99;
    top: 50%;
    left: calc(100% - 7px); /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent #636363 transparent transparent;
}
/* this element creates a pseudo class 'after' and forms the arrow to the right of the tool tip */
.i_tooltip_right:hover:after {
	background: #636363;
	opacity:0.8;
 	filter:alpha(opacity=80); /* For IE8 and earlier */
	border-radius: 5px;
	-moz-border-radius: 5px;
	color: #fff; 
	padding: 5px 15px;

	/* this causes the tooltip to be on right of link */
	content: attr(title);
	position: absolute;
	z-index: 98;
	width: 120px;
	top: -5px;
	left: 105%;

}
/* this is help text tooltips generated from  */
.i_help_tooltip {
    display:inline-block;
    position:relative;
    /* border-bottom:1px dotted #666; */
    text-align:left;
}

.i_help_tooltip .right {
    min-width:400px; 
    top:50%;
    left:100%;
    margin-left:20px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#FFFFFF;
    background-color:#636363;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:1px solid #3B376C;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; 
    opacity:0; 
    transition:opacity 0.8s;
}

.i_help_tooltip:hover .right {
    visibility:visible; opacity:1;
}

.i_help_tooltip .right i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.i_help_tooltip .right i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#636363;
    border:1px solid #3B376C;box-shadow:0 1px 8px rgba(0,0,0,0.5);
}




/*============================= LinkedIn Login  =========================================*/
.i_linkedin_btn{
	text-align: center;
  	margin: 2%;

}
.i_linkedin {
	/* position: absolute;
	top:-15%;
	left: 35%; */
}
.i_linkedin img {
	border-radius:50%;
	-webkit-border-radius:50%;
	-o-border-radius:50%;
	-moz-border-radius:50%;
	border:6px solid rgba(221, 218, 215, 0.23);
}
/*============================= Call to action button from http://buttonoptimizer.com/  =========================================*/
/* settings documneted in company manual - you can download CSS or create a PNG */
.i_cta_button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 10px 16px;
    border: 1px solid #80878d;
    border-radius: 15px;
    background: #d2dee7;
    background: -webkit-gradient(linear, left top, left bottom, from(#d2dee7), to(#80878d));
    background: -moz-linear-gradient(top, #d2dee7, #80878d);
    background: linear-gradient(to bottom, #d2dee7, #80878d);
    text-shadow: #5c6165 1px 1px 1px;
    /* font: normal normal bold 16px arial; */
    color: #ffffff;
    text-decoration: none;
}
.i_cta_button:hover,
.i_cta_button:focus {
    border: 1px solid #b7c1c9;
    background: #fcffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fcffff), to(#9aa2a9));
    background: -moz-linear-gradient(top, #fcffff, #9aa2a9);
    background: linear-gradient(to bottom, #fcffff, #9aa2a9);
    color: #ffffff;
    text-decoration: none;
}
.i_cta_button:active {
    background: #80878d;
    background: -webkit-gradient(linear, left top, left bottom, from(#80878d), to(#80878d));
    background: -moz-linear-gradient(top, #80878d, #80878d);
    background: linear-gradient(to bottom, #80878d, #80878d);
}
.i_cta_button:after{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 -4px -6px 4px;
    position: relative;
    top: 0px;
    left: 0px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAClElEQVRIidWV30tTYRjHP+/Z2Xa2JCZEYqEmjBEiTroS8yIEDbvQoIu6aNV9dNHF7rrouiFd+QfkbroRNMhoXRhSKZGgCRJZImihie3otja3s/N2sXPGkLOx1pVfeHlfnud5n+/z6z0HTjpEI5d6I0+6JOKmgLnlePRtLVtXIwQt4eGR6MNbj7d3kyGtre+wNTy8sfP5TdHJVmmEAGAvZzJ0Y6i/qyd4X8K1anaNEihFCVm3T+u/OjDQ0Xn+QW8kdsXJUO29HdMksh0h/EhKXbH3KpBwVgIFCabbp43dvT4482waGYkFBMwux6P5MoEUtId7QhMtba1BQ8q6wjcBfH4NoChh76hUrg+v35lrq+sA02UCwN/S1hrsuNR9IVesj0AChrQOFoldrkw6q4hITLenSwUwpCRrSHJmfQROOJJgqJo2emdscGZyplwuFWA/leNgK0mmHNbxRjg1xVnvEnDxcl+/W10yv69vrqkAv9JH7P08IJV3HOV/gtclUJqkoScPfgN5FSCPICUUDoUs17XqFNVILOBx0ekx0qsvE5MCJlbi0U0VwO9VORPQ8BbMuqI0TMlBwSRTkEgkAkHAq3CumNF3Fz8lBEwsx6NrUGqyrn/b+MiPHd1fZ4+LUuLpCQf3PVoTgM8lCLrz6dT8UuIoqY+vWM5rFaImwpHYvdOjI0/fm6cCzW6FbiWX1qdeTFZGbkNthADrrTW7FUKFlP5nYTHh5Bz+42Pndwm6lVzaWFhM5PeT407OofEMciGZ1een5mataXF0DrX/ByqlDO2lWvau5o5wemt9+2sxn321+vzRF0vvOILCUnosB/Zur0ocL6d57GxU7HlrGWqF8PhlW2ZH7xShUSG379gEZrWsThb+AjxMGcJGxO5AAAAAAElFTkSuQmCC") no-repeat left center transparent;
    background-size: 100% 100%;
}
/* buttons on forms */
.i_form_button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 10px 16px; /*12px 24px; */
    line-height: 19px;
    border: 1px solid #80878d;
    border-radius: 15px;
    background: #d2dee7;
    background: -webkit-gradient(linear, left top, left bottom, from(#d2dee7), to(#80878d));
    background: -moz-linear-gradient(top, #d2dee7, #80878d);
    background: linear-gradient(to bottom, #d2dee7, #80878d);
    text-shadow: #5c6165 1px 1px 1px;
    /* font: normal normal bold 16px arial; */
    color: #ffffff;
    text-decoration: none;
}
.i_form_button:hover,
.i_form_button:focus {
    border: 1px solid #b7c1c9;
    background: #fcffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fcffff), to(#9aa2a9));
    background: -moz-linear-gradient(top, #fcffff, #9aa2a9);
    background: linear-gradient(to bottom, #fcffff, #9aa2a9);
    color: #ffffff;
    text-decoration: none;
}
.i_form_button:active {
    background: #80878d;
    background: -webkit-gradient(linear, left top, left bottom, from(#80878d), to(#80878d));
    background: -moz-linear-gradient(top, #80878d, #80878d);
    background: linear-gradient(to bottom, #80878d, #80878d);
}
.i_form_button:after{
    content:  "\0000a0";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    margin: 0 -4px -6px 4px;
    position: relative;
    top: 0px;
    left: 0px;
    /* background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAClElEQVRIidWV30tTYRjHP+/Z2Xa2JCZEYqEmjBEiTroS8yIEDbvQoIu6aNV9dNHF7rrouiFd+QfkbroRNMhoXRhSKZGgCRJZImihie3otja3s/N2sXPGkLOx1pVfeHlfnud5n+/z6z0HTjpEI5d6I0+6JOKmgLnlePRtLVtXIwQt4eGR6MNbj7d3kyGtre+wNTy8sfP5TdHJVmmEAGAvZzJ0Y6i/qyd4X8K1anaNEihFCVm3T+u/OjDQ0Xn+QW8kdsXJUO29HdMksh0h/EhKXbH3KpBwVgIFCabbp43dvT4482waGYkFBMwux6P5MoEUtId7QhMtba1BQ8q6wjcBfH4NoChh76hUrg+v35lrq+sA02UCwN/S1hrsuNR9IVesj0AChrQOFoldrkw6q4hITLenSwUwpCRrSHJmfQROOJJgqJo2emdscGZyplwuFWA/leNgK0mmHNbxRjg1xVnvEnDxcl+/W10yv69vrqkAv9JH7P08IJV3HOV/gtclUJqkoScPfgN5FSCPICUUDoUs17XqFNVILOBx0ekx0qsvE5MCJlbi0U0VwO9VORPQ8BbMuqI0TMlBwSRTkEgkAkHAq3CumNF3Fz8lBEwsx6NrUGqyrn/b+MiPHd1fZ4+LUuLpCQf3PVoTgM8lCLrz6dT8UuIoqY+vWM5rFaImwpHYvdOjI0/fm6cCzW6FbiWX1qdeTFZGbkNthADrrTW7FUKFlP5nYTHh5Bz+42Pndwm6lVzaWFhM5PeT407OofEMciGZ1een5mataXF0DrX/ByqlDO2lWvau5o5wemt9+2sxn321+vzRF0vvOILCUnosB/Zur0ocL6d57GxU7HlrGWqF8PhlW2ZH7xShUSG379gEZrWsThb+AjxMGcJGxO5AAAAAAElFTkSuQmCC") no-repeat left center transparent; */
    background-size: 100% 100%;
}
/* buttons on top of table columns to re-sort data */
.i_col_button {
    display: inline-block;
    /* text-align: center; */
    vertical-align: middle;
    /* padding: 6px 2px; */
	padding: 1%;
    border: 0px solid #E5E5E5;
    border-radius: 0px;
    background: #cccccc;
    background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#E5E5E5));
    background: -moz-linear-gradient(top, #cccccc, #E5E5E5);
    background: linear-gradient(to bottom, #cccccc, #E5E5E5);
    /* font: normal normal normal 14px arial; */
    color: #3b376c;
    text-decoration: none;
}
.i_col_button:hover,
.i_col_button:focus {
    border: 0px solid #cccccc;
    background: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#b8c8cc));
    background: -moz-linear-gradient(top, #ffffff, #b8c8cc);
    background: linear-gradient(to bottom, #ffffff, #b8c8cc);
    color: #3b376c;
    text-decoration: none;
}
.i_col_button:active {
    background: #E5E5E5;
    background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#E5E5E5));
    background: -moz-linear-gradient(top, #E5E5E5, #E5E5E5);
    background: linear-gradient(to bottom, #E5E5E5, #E5E5E5);
}
/*============================= Toggle button from https://tympanus.net/  =========================================*/
/* where we want a checkbox to be replaced by a toggle switch, we will declare a <div class=i_switch> */
/* use i_switch for an on/off button and i_switch_yn for a yes/no button. */
.i_switch_wrapper {
	 min-height: 50px; 
	 padding-top: 5px;
}
.i_switch {
    width: 90px; /* 180px; */
    height: 25px;  /* 50px; */
    position: relative;
}
/* following makes the checkbox itself invisible */
.i_switch input {
    /* First, we make it as wide as the container */
    position: absolute;
    width: 100%;
    height: 100%;
    /* Then, we put it on top of everything else */
    z-index: 100;
    /* Last, we make it invisible */
    opacity: 0;
    /* This one is just for ergonomy */
    cursor: pointer;
}
/* the label will be the container of the toggle switch */
.i_switch label {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background: #a5a39d;
    border-radius: 20px;  /* 40px; */
    box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255,255,255,0.5);
}
/* the frame of the container of the toggle switch */
.i_switch label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
     /* top: -8px; right: -8px; bottom: -8px; left: -8px; */
    border-radius: inherit;
    background: #ccc; /* Fallback */
    background: linear-gradient(#f2f2f2, #ababab);
    box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}
/* pseudo element to create soft hollow */
.i_switch label:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
    /* top: -18px; right: -18px; bottom: -18px; left: -18px; */
    border-radius: inherit;
    background: #eee; /* Fallback */
    background: linear-gradient(#e5e7e6, #eee);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    -webkit-filter: blur(1px); /* Smooth trick */
    filter: blur(1px); /* Future-proof */
}
/* We turn it into a block element, give it the height of its parent and a little bit more than half of its width. We place it on the left of the container, with styling */
.i_switch label i {
    display: block;
    height: 100%;
    width: 60%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: inherit;
    background: #b2ac9e; /* Fallback */
    background: linear-gradient(#f7f2f6, #b2ac9e);
    box-shadow: inset 0 1px 0 white,
        0 0 8px rgba(0,0,0,0.3),
        0 5px 5px rgba(0,0,0,0.2);
}
/* first pseudo element enhance aesthetics */
.i_switch label i:after {
    content: "";
    position: absolute;
    left: 15%;
    top: 25%;
    width: 70%;
    height: 50%;
    background: #d2cbc3; /* Fallback */
    background: linear-gradient(#cbc7bc, #d2cbc3);
    border-radius: inherit;
}
/* second pseudo element add on/off */
.i_switch label i:before {
    content: "off";
    position: absolute;
    top: 50%;
    right: -50%;
    margin-top: -6px; /*-12px; */
    color: #666; /* Fallback */
    color: rgba(0,0,0,0.4);
    font-style: normal;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px; /* 24px; */
    text-transform: uppercase;
    text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
}
/* now set checked states */
.i_switch input:checked ~ label { /* Background */
    background: #9abb82;
}

.i_switch input:checked ~ label i { /* Toggle */
    left: auto;
    right: -1%;
}

.i_switch input:checked ~ label i:before { /* On/off */
    content: "on";
    right: 115%;
    color: #82a06a;
    text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
}
/* ---------------------- Now the Yes/No version ----------------------- */
.i_switch_yn {
    width: 90px; /* 180px; */
    height: 25px;  /* 50px; */
    position: relative;
}
/* following makes the checkbox itself invisible */
.i_switch_yn input {
    /* First, we make it as wide as the container */
    position: absolute;
    width: 100%;
    height: 100%;
    /* Then, we put it on top of everything else */
    z-index: 100;
    /* Last, we make it invisible */
    opacity: 0;
    /* This one is just for ergonomy */
    cursor: pointer;
}
/* the label will be the container of the toggle switch */
.i_switch_yn label {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background: #a5a39d;
    border-radius: 20px;  /* 40px; */
    box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255,255,255,0.5);
}
/* the frame of the container of the toggle switch */
.i_switch_yn label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
     /* top: -8px; right: -8px; bottom: -8px; left: -8px; */
    border-radius: inherit;
    background: #ccc; /* Fallback */
    background: linear-gradient(#f2f2f2, #ababab);
    box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}
/* pseudo element to create soft hollow */
.i_switch_yn label:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
    /* top: -18px; right: -18px; bottom: -18px; left: -18px; */
    border-radius: inherit;
    background: #eee; /* Fallback */
    background: linear-gradient(#e5e7e6, #eee);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    -webkit-filter: blur(1px); /* Smooth trick */
    filter: blur(1px); /* Future-proof */
}
/* We turn it into a block element, give it the height of its parent and a little bit more than half of its width. We place it on the left of the container, with styling */
.i_switch_yn label i {
    display: block;
    height: 100%;
    width: 60%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: inherit;
    background: #b2ac9e; /* Fallback */
    background: linear-gradient(#f7f2f6, #b2ac9e);
    box-shadow: inset 0 1px 0 white,
        0 0 8px rgba(0,0,0,0.3),
        0 5px 5px rgba(0,0,0,0.2);
}
/* first pseudo element enhance aesthetics */
.i_switch_yn label i:after {
    content: "";
    position: absolute;
    left: 15%;
    top: 25%;
    width: 70%;
    height: 50%;
    background: #d2cbc3; /* Fallback */
    background: linear-gradient(#cbc7bc, #d2cbc3);
    border-radius: inherit;
}
/* second pseudo element add on/off */
.i_switch_yn label i:before {
    content: "no";
    position: absolute;
    top: 50%;
    right: -50%;
    margin-top: -6px; /*-12px; */
    color: #666; /* Fallback */
    color: rgba(0,0,0,0.4);
    font-style: normal;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px; /* 24px; */
    text-transform: uppercase;
    text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
}
/* now set checked states */
.i_switch_yn input:checked ~ label { /* Background */
    background: #9abb82;
}

.i_switch_yn input:checked ~ label i { /* Toggle */
    left: auto;
    right: -1%;
}

.i_switch_yn input:checked ~ label i:before { /* On/off */
    content: "yes";
    right: 115%;
    color: #82a06a;
    text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
}
/* use as divs for label and toggle button */
.i_div_label {
	padding-top: 5px;
	margin-left: 2%;
	margin-right: 1%;
	margin-top: 5px;
	margin-bottom: 5px;
	float: left;
	text-align: left;
}
.i_div_button {
	float: left;
	min-height: 40px;
	margin-right: 2%;
	margin-left: 1%;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}
/*============================= arrows (instead of using images)  =========================================*/
/* Responsive arrows that appear in line with text; same colour and size as text - example "This is <i class="i_arr_right"></i> */
[class^=i_arr-]{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0; 
  display:      inline-block;
  padding:      .2em;
}
.i_arr-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.i_arr-left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.i_arr-up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.i_arr-down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
/* place the following as "This is <div class="i_arrow_dn"></div> */
.i_arrow_dn {
    width:0px;
    height:0px;
	padding-top: 1%;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:4px solid #fff;
}
.i_arrow_up {
    width:0px;
    height:0px;
	padding-top: 1%;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-bottom:4px solid #fff;
}
.i_arrow_rt {
    width:0px;
    height:0px;
	padding-top: 1%;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:4px solid #fff;
}
.i_arrow_lt {
    width:0px;
    height:0px;
	padding-top: 1%;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-right:4px solid #fff;
}
.i_arrow_no {
    width:0px;
    height:0px;
	padding-top: 1%;
    border:4px solid transparent;
}
/* this is a css way to display text as a graphic - again created at http://buttonoptimizer.com/ and documented in manual */
.i_graphic_text {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #3b376c;
    border-radius: 50px;
    background: #b8c3cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#b8c3cb), to(#3b376c));
    background: -moz-linear-gradient(top, #b8c3cb, #3b376c);
    background: linear-gradient(to bottom, #b8c3cb, #3b376c);
    text-shadow: #1e1c36 1px 1px 1px;
    font: normal normal normal 16px arial;
    color: #ffffff;
    text-decoration: none;
}
/*============================= Collapsible Divs  =========================================*/
.i_toggle-box {
  display: none;
}
.i_toggle-box + label {
  cursor: pointer;
  display: block;
  /*font-weight: bold;
  line-height: 21px; */
  margin-bottom: 2px;
}
.i_toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}
.i_toggle-box:checked + label + div {
  display: block;
}
.i_toggle-box + label:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}
.i_toggle-box:checked + label:before {
  content: "\2212";
}
/*============================= Unread Conversations  =========================================*/
/* http://www.cssportal.com/blog/create-css-notification-badge/ */
.i_unread {
   position:relative;
}
.i_unread[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-10px;
   right:-10px;
   font-size: 75%;  /*.7em; */
   background:#B8C3CB;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}
.i_unread[data-badge=""]:after {
content: none;
}
/*============================= Conversation Display  =========================================*/
.i_conversation {
	background: rgba(243,245,246,0.7);
	align-content: center;
	width: 90%;
	padding: 2%;
	margin-right: auto;
	margin-left: auto;
}
.i_sent_msg {
/* message sent by the user */	
	margin-left: 2%;
	margin-right: 1%;
	float: left;
	background: rgba(59,55,108,0.7);
	color: white;
}
.i_recd_msg {
/* message received by the user */		
	float: right;
	margin-right: 2%;
	margin-left: 1%;
	text-align: right;
	background: rgba(184,195,203,0.7);
}
.i_sent_msg, .i_recd_msg {
	padding: 2%;
   	border-radius:10px;	
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;   	
   	max-width: 60%;
	width: max-content;
}
/*============================= Search Cards  =========================================*/
.i_search_summary {
	width: 100%;
	height: 58px;
	background: #3c3c3c;
	color: #ffffff;
	
}
.i_search_summary_container {
	padding: 4px;
}
.i_search_filter {
	width: 100%;
	background: #3c3c3c;
	color: #ffffff;
	
}
.i_search_filter_container {
	padding: 4px;
}
/* Standard illuceo theme colours
Dark blue 	rgb(59,55,108)  	#3B376C
Light blue 	rgb(184,195,203) 	#B8C3CB - tone for backgrounds  rgb(243,245,246)	#F3F5F6
Yellow 		rgb(255,255,65) 	#FFFF41
Orange 		rgb(255,127,0) 		#FF7F00
Grey 		rgb(99,99,99) 		#636363
*/

.i_search_header {
	width: 100%;
	background: #636363;
	color: #ffffff;
	
}
.i_search_header_container {
	padding: 4px;
}
.i_search_results {
	background: rgba(243,245,246,0.0);
}
.i_search_card {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    padding-bottom: 5px;
	box-shadow: 5px 5px 3px #888888;}
}
.i_search_card_container {
    margin: 6px auto 6px auto;
}

.i_search_header_container {
	padding: 4px;
}
/*============================= profile styling  =========================================*/
.i_profile {
	background: rgba(243,245,246,0.0);
}
.i_profile_card {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    padding-bottom: 5px;
	box-shadow: 5px 5px 3px #888888;
}
.i_profile_card_container {
    margin: 6px auto 6px auto;
}
/*============================= radio button styling  =========================================*/
.i_radio_group {
  border: solid 3px #B8C3CB;
  display: inline-block;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.i_hidden {
	display: none;
}
.i_radio_login {
  border: solid 1px #B8C3CB;
  display: inline-block;
  margin: 5px;
  border-radius: 5px;
  overflow: hidden;
  font-size: 75%;
  text-align: left;
}
/* following derived from radio button styling in special.css */
.i_radio_input {
  position: absolute;
  visibility: hidden;
  display: none;
}
.i_radio_label {
  color: #ffffff;
  display: inline-block;
  cursor: pointer;
  /* font-weight: bold; */
  padding: 5px 5px;
  background: #B8C3CB;
  font-size: 75%;
}

.i_radio_input:checked + i_radio_label{
  color: #3B376C;
  background: #3B376C;
}

i_radio_label + i_radio_input + i_radio_label {
  border-left: solid 3px #3B376C;
}


/* -------------------- Rounded Corners */
.rounded {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}
.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }
.green   { background-color: #779126; }
.blue    { background-color: #B8C3CB; }
.yellow  { background-color: #eec111; }
.black   { background-color: #000; }
/* -------------------- Colors: Text */
.slate select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #3B376C; }
.yellow select  { color: #000; }
.black select   { color: #fff; }
/*============================= Parallax Home Page  =========================================*/

.i_bgimg_1, .i_bgimg_2, .i_bgimg_3, .i_bgimg_4, .i_bgimg_5, .i_bgimg_6, .i_bgimg_7, .i_bgimg_8, .i_bgimg_9, .i_bgimg_10, .i_bgimg_11, .i_bgimg_12, .i_bgimg_13, .i_bgimg_14, .i_bgimg_15, .i_bgimg_16, .i_bgimg_17, .i_bgimg_18, .i_bgimg_19, .i_bgimg_20, .i_bgimg_21, .i_bgimg_22, .i_bgimg_23, .i_bgimg_24, .i_bgimg_25, .i_bgimg_26, .i_bgimg_27, .i_bgimg_28, .i_bgimg_29, .i_bgimg_30, .i_bgimg_31, .i_bgimg_32, .i_bgimg_33, .i_bgimg_34, .i_bgimg_35, .i_bgimg_36, .i_bgimg_37, .i_bgimg_38, .i_bgimg_39, .i_bgimg_40, .i_bgimg_41, .i_bgimg_42 {
	position: relative;
  	opacity: 0.65;
  	background-attachment: scroll;  /* we turn parallax on in the media query below for larger screens */
  	background-position: center;
  	background-repeat: no-repeat;
  	/* background-size: contain;   this is what we want but have to make images = largest screen width */
  	background-size: cover;
  	height: auto;
	max-width: 100%;
}
.i_bgimg_2, .i_bgimg_3, .i_bgimg_4, .i_bgimg_5, .i_bgimg_6, .i_bgimg_7, .i_bgimg_8, .i_bgimg_9, .i_bgimg_10, .i_bgimg_11, .i_bgimg_12, .i_bgimg_13, .i_bgimg_14, .i_bgimg_15, .i_bgimg_16, .i_bgimg_17, .i_bgimg_18, .i_bgimg_19, .i_bgimg_20, .i_bgimg_21, .i_bgimg_22, .i_bgimg_23, .i_bgimg_24, .i_bgimg_25, .i_bgimg_26, .i_bgimg_27, .i_bgimg_28, .i_bgimg_29, .i_bgimg_30, .i_bgimg_31, .i_bgimg_32, .i_bgimg_33, .i_bgimg_34, .i_bgimg_35, .i_bgimg_36, .i_bgimg_37, .i_bgimg_38, .i_bgimg_39, .i_bgimg_40, .i_bgimg_41, .i_bgimg_42 {
  	min-height: 250px;
}

.i_caption {
  	position: absolute;
  	left: 0;
  	top: 50%;
  	width: 100%;
  	text-align: center;
  	color: #000;
	font-size: 100%;
}

.i_caption span.border {
  	background-color: #111;
  	color: #fff;
  	padding: 2%;
  	font-size: 150%;
    line-height: 150%;
  	letter-spacing: 5px;
}

h3 {
  	letter-spacing: 5px;
  	text-transform: uppercase;
  /* font: 20px "Lato", sans-serif; */
    font-size: 20px;
  	color: #111;
}

/* SMARTPHONES PORTRAIT */
@media only screen and (max-width: 479px) {
	.i_caption span.border {
	  	font-size: 100%;
	    line-height: 100%;
	  	letter-spacing: 3px;
	}
    .i_login {

    }
	.i_issuu {
    	width: 100%;
	}
    .i_table {

    }

    .i_job_row_head {
        display: none !important;
    }

    .i_table tbody {

    }

    .i_table tr {
        display: block;
    }

    .i_table tr td {
        display: block;
        width: 100%;
    }

    .i_job_row_odd {

    }

    .i_job_row_even td::before,
    .i_job_row_odd td::before {
        content: attr(data-header);
        display: inline-block;
        width: 40%;
        padding-right: 10px;
    }
    .i_job_row_even td select,
    .i_job_row_odd td select {
        max-width: 50%;
    }

    .i_notes .label {
        display: block;

}
    .i_notes .label + input {
        width: 100%;
    }

.i_bgimg_2, .i_bgimg_3, .i_bgimg_4, .i_bgimg_5, .i_bgimg_6, .i_bgimg_7, .i_bgimg_8, .i_bgimg_9, .i_bgimg_10, .i_bgimg_11, .i_bgimg_12, .i_bgimg_13, .i_bgimg_14, .i_bgimg_15, .i_bgimg_16, .i_bgimg_17, .i_bgimg_18, .i_bgimg_19, .i_bgimg_20, .i_bgimg_21, .i_bgimg_22, .i_bgimg_23, .i_bgimg_24, .i_bgimg_25, .i_bgimg_26, .i_bgimg_27, .i_bgimg_28, .i_bgimg_29, .i_bgimg_30, .i_bgimg_31, .i_bgimg_32, .i_bgimg_33, .i_bgimg_34, .i_bgimg_35, .i_bgimg_36, .i_bgimg_37, .i_bgimg_38, .i_bgimg_39, .i_bgimg_40, .i_bgimg_41, .i_bgimg_42 {
  	min-height: 250px;
}
.i_bgimg_1 {
  	background-image: url("../images/plx/479/image_1.jpg");
  	min-height: 50%;
}

.i_bgimg_2 {
  	background-image: url("../images/plx/479/image_2.jpg");
}

.i_bgimg_3 {
  	background-image: url("../images/plx/479/image_3.jpg");
}
.i_bgimg_4 {
  	background-image: url("../images/plx/479/image_4.jpg");
}
.i_bgimg_5 {
  	background-image: url("../images/plx/479/image_5.jpg");
}
.i_bgimg_6 {
  	background-image: url("../images/plx/479/image_6.jpg");
}
.i_bgimg_7 {
  	background-image: url("../images/plx/479/image_7.jpg");
}
.i_bgimg_8 {
  	background-image: url("../images/plx/479/image_8.jpg");
}
.i_bgimg_9 {
  	background-image: url("../images/plx/479/image_9.jpg");
}
.i_bgimg_10 {
  	background-image: url("../images/plx/479/image_10.jpg");
}
.i_bgimg_11 {
  	background-image: url("../images/plx/479/image_11.jpg");
}
.i_bgimg_12 {
  	background-image: url("../images/plx/479/image_12.jpg");
}
.i_bgimg_13 {
  	background-image: url("../images/plx/479/image_13.jpg");
}
.i_bgimg_14 {
  	background-image: url("../images/plx/479/image_14.jpg");
}
.i_bgimg_15 {
  	background-image: url("../images/plx/479/image_15.jpg");
}
.i_bgimg_16 {
  	background-image: url("../images/plx/479/image_16.jpg");
}
.i_bgimg_17 {
  	background-image: url("../images/plx/479/image_17.jpg");
}
.i_bgimg_18 {
  	background-image: url("../images/plx/479/image_18.jpg");
}
.i_bgimg_19 {
  	background-image: url("../images/plx/479/image_19.jpg");
}
.i_bgimg_20 {
  	background-image: url("../images/plx/479/image_20.jpg");
}
.i_bgimg_21 {
  	background-image: url("../images/plx/479/image_21.jpg");
}
.i_bgimg_22 {
  	background-image: url("../images/plx/479/image_22.jpg");
}
.i_bgimg_23 {
  	background-image: url("../images/plx/479/image_23.jpg");
}
.i_bgimg_24 {
  	background-image: url("../images/plx/479/image_24.jpg");
}
.i_bgimg_25 {
  	background-image: url("../images/plx/479/image_25.jpg");
}
.i_bgimg_26 {
  	background-image: url("../images/plx/479/image_26.jpg");
}
.i_bgimg_27 {
  	background-image: url("../images/plx/479/image_27.jpg");
}
.i_bgimg_28 {
  	background-image: url("../images/plx/479/image_28.jpg");
}
.i_bgimg_29 {
  	background-image: url("../images/plx/479/image_29.jpg");
}
.i_bgimg_30 {
  	background-image: url("../images/plx/479/image_30.jpg");
}
.i_bgimg_31 {
  	background-image: url("../images/plx/479/image_31.jpg");
}
.i_bgimg_32 {
  	background-image: url("../images/plx/479/image_32.jpg");
}
.i_bgimg_33 {
  	background-image: url("../images/plx/479/image_33.jpg");
}
.i_bgimg_34 {
  	background-image: url("../images/plx/479/image_34.jpg");
}
.i_bgimg_35 {
  	background-image: url("../images/plx/479/image_35.jpg");
}
.i_bgimg_36 {
  	background-image: url("../images/plx/479/image_36.jpg");
}
.i_bgimg_37 {
  	background-image: url("../images/plx/479/image_37.jpg");
}
.i_bgimg_38 {
  	background-image: url("../images/plx/479/image_38.jpg");
}
.i_bgimg_39 {
  	background-image: url("../images/plx/479/image_39.jpg");
}
.i_bgimg_40 {
  	background-image: url("../images/plx/479/image_40.jpg");
}
.i_bgimg_41 {
  	background-image: url("../images/plx/479/image_41.jpg");
}
.i_bgimg_42 {
  	background-image: url("../images/plx/479/image_42.jpg");
}
/* override 3 col plx  */
.i_3col_wide_left, .i_3col_narrow_left {
	width: 3%;
}
.i_3col_wide_mid,.i_3col_narrow_mid {
	width: 90%;
}
.i_3col_wide_right, .i_3col_narrow_right {
	width: 3%;
}

}
/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) and (max-width: 767px){
	.i_issuu {
    	width: 100%;
	}	
.i_bgimg_1 {
  	background-image: url("../images/plx/767/image_1.jpg");
  	min-height: 50%;
}

.i_bgimg_2 {
  	background-image: url("../images/plx/767/image_2.jpg");
}

.i_bgimg_3 {
  	background-image: url("../images/plx/767/image_3.jpg");
}
.i_bgimg_4 {
  	background-image: url("../images/plx/767/image_4.jpg");
}
.i_bgimg_5 {
  	background-image: url("../images/plx/767/image_5.jpg");
}
.i_bgimg_6 {
  	background-image: url("../images/plx/767/image_6.jpg");
}
.i_bgimg_7 {
  	background-image: url("../images/plx/767/image_7.jpg");
}
.i_bgimg_8 {
  	background-image: url("../images/plx/767/image_8.jpg");
}
.i_bgimg_9 {
  	background-image: url("../images/plx/767/image_9.jpg");
}
.i_bgimg_10 {
  	background-image: url("../images/plx/767/image_10.jpg");
}
.i_bgimg_11 {
  	background-image: url("../images/plx/767/image_11.jpg");
}
.i_bgimg_12 {
  	background-image: url("../images/plx/767/image_12.jpg");
}
.i_bgimg_13 {
  	background-image: url("../images/plx/767/image_13.jpg");
}
.i_bgimg_14 {
  	background-image: url("../images/plx/767/image_14.jpg");
}
.i_bgimg_15 {
  	background-image: url("../images/plx/767/image_15.jpg");
}
.i_bgimg_16 {
  	background-image: url("../images/plx/767/image_16.jpg");
}
.i_bgimg_17 {
  	background-image: url("../images/plx/767/image_17.jpg");
}
.i_bgimg_18 {
  	background-image: url("../images/plx/767/image_18.jpg");
}
.i_bgimg_19 {
  	background-image: url("../images/plx/767/image_19.jpg");
}
.i_bgimg_20 {
  	background-image: url("../images/plx/767/image_20.jpg");
}
.i_bgimg_21 {
  	background-image: url("../images/plx/767/image_21.jpg");
}
.i_bgimg_22 {
  	background-image: url("../images/plx/767/image_22.jpg");
}
.i_bgimg_23 {
  	background-image: url("../images/plx/767/image_23.jpg");
}
.i_bgimg_24 {
  	background-image: url("../images/plx/767/image_24.jpg");
}
.i_bgimg_25 {
  	background-image: url("../images/plx/767/image_25.jpg");
}
.i_bgimg_26 {
  	background-image: url("../images/plx/767/image_26.jpg");
}
.i_bgimg_27 {
  	background-image: url("../images/plx/767/image_27.jpg");
}
.i_bgimg_28 {
  	background-image: url("../images/plx/767/image_28.jpg");
}
.i_bgimg_29 {
  	background-image: url("../images/plx/767/image_29.jpg");
}
.i_bgimg_30 {
  	background-image: url("../images/plx/767/image_30.jpg");
}
.i_bgimg_31 {
  	background-image: url("../images/plx/767/image_31.jpg");
}
.i_bgimg_32 {
  	background-image: url("../images/plx/767/image_32.jpg");
}
.i_bgimg_33 {
  	background-image: url("../images/plx/767/image_33.jpg");
}
.i_bgimg_34 {
  	background-image: url("../images/plx/767/image_34.jpg");
}
.i_bgimg_35 {
  	background-image: url("../images/plx/767/image_35.jpg");
}
.i_bgimg_36 {
  	background-image: url("../images/plx/767/image_36.jpg");
}
.i_bgimg_37 {
  	background-image: url("../images/plx/767/image_37.jpg");
}
.i_bgimg_38 {
  	background-image: url("../images/plx/767/image_38.jpg");
}
.i_bgimg_39 {
  	background-image: url("../images/plx/767/image_39.jpg");
}
.i_bgimg_40 {
  	background-image: url("../images/plx/767/image_40.jpg");
}
.i_bgimg_41 {
  	background-image: url("../images/plx/767/image_41.jpg");
}
.i_bgimg_42 {
  	background-image: url("../images/plx/767/image_42.jpg");
}
	/* override 3 col plx  */
	.i_3col_wide_left,.i_3col_narrow_left {
		width: 8%;
	}
	.i_3col_wide_mid, .i_3col_narrow_mid {
		width: 80%;
	}
	.i_3col_wide_right,.i_3col_narrow_right {
		width: 8%;
	}
}
/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) and (max-width: 991px){
.i_bgimg_1 {
  	background-image: url("../images/plx/991/image_1.jpg");
  	min-height: 50%;
}

.i_bgimg_2 {
  	background-image: url("../images/plx/991/image_2.jpg");
}

.i_bgimg_3 {
  	background-image: url("../images/plx/991/image_3.jpg");
}
.i_bgimg_4 {
  	background-image: url("../images/plx/991/image_4.jpg");
}
.i_bgimg_5 {
  	background-image: url("../images/plx/991/image_5.jpg");
}
.i_bgimg_6 {
  	background-image: url("../images/plx/991/image_6.jpg");
}
.i_bgimg_7 {
  	background-image: url("../images/plx/991/image_7.jpg");
}
.i_bgimg_8 {
  	background-image: url("../images/plx/991/image_8.jpg");
}
.i_bgimg_9 {
  	background-image: url("../images/plx/991/image_9.jpg");
}
.i_bgimg_10 {
  	background-image: url("../images/plx/991/image_10.jpg");
}
.i_bgimg_11 {
  	background-image: url("../images/plx/991/image_11.jpg");
}
.i_bgimg_12 {
  	background-image: url("../images/plx/991/image_12.jpg");
}
.i_bgimg_13 {
  	background-image: url("../images/plx/991/image_13.jpg");
}
.i_bgimg_14 {
  	background-image: url("../images/plx/991/image_14.jpg");
}
.i_bgimg_15 {
  	background-image: url("../images/plx/991/image_15.jpg");
}
.i_bgimg_16 {
  	background-image: url("../images/plx/991/image_16.jpg");
}
.i_bgimg_17 {
  	background-image: url("../images/plx/991/image_17.jpg");
}
.i_bgimg_18 {
  	background-image: url("../images/plx/991/image_18.jpg");
}
.i_bgimg_19 {
  	background-image: url("../images/plx/991/image_19.jpg");
}
.i_bgimg_20 {
  	background-image: url("../images/plx/991/image_20.jpg");
}
.i_bgimg_21 {
  	background-image: url("../images/plx/991/image_21.jpg");
}
.i_bgimg_22 {
  	background-image: url("../images/plx/991/image_22.jpg");
}
.i_bgimg_23 {
  	background-image: url("../images/plx/991/image_23.jpg");
}
.i_bgimg_24 {
  	background-image: url("../images/plx/991/image_24.jpg");
}
.i_bgimg_25 {
  	background-image: url("../images/plx/991/image_25.jpg");
}
.i_bgimg_26 {
  	background-image: url("../images/plx/991/image_26.jpg");
}
.i_bgimg_27 {
  	background-image: url("../images/plx/991/image_27.jpg");
}
.i_bgimg_28 {
  	background-image: url("../images/plx/991/image_28.jpg");
}
.i_bgimg_29 {
  	background-image: url("../images/plx/991/image_29.jpg");
}
.i_bgimg_30 {
  	background-image: url("../images/plx/991/image_30.jpg");
}
.i_bgimg_31 {
  	background-image: url("../images/plx/991/image_31.jpg");
}
.i_bgimg_32 {
  	background-image: url("../images/plx/991/image_32.jpg");
}
.i_bgimg_33 {
  	background-image: url("../images/plx/991/image_33.jpg");
}
.i_bgimg_34 {
  	background-image: url("../images/plx/991/image_34.jpg");
}
.i_bgimg_35 {
  	background-image: url("../images/plx/991/image_35.jpg");
}
.i_bgimg_36 {
  	background-image: url("../images/plx/991/image_36.jpg");
}
.i_bgimg_37 {
  	background-image: url("../images/plx/991/image_37.jpg");
}
.i_bgimg_38 {
  	background-image: url("../images/plx/991/image_38.jpg");
}
.i_bgimg_39 {
  	background-image: url("../images/plx/991/image_39.jpg");
}
.i_bgimg_40 {
  	background-image: url("../images/plx/991/image_40.jpg");
}
.i_bgimg_41 {
  	background-image: url("../images/plx/991/image_41.jpg");
}
.i_bgimg_42 {
  	background-image: url("../images/plx/991/image_42.jpg");
}
	.i_tabs_text::before {
		content: "Step ";
	}
	.i_tabs_text::after {
		content: "  > ";
	}
}
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 992px) and (max-width: 1999px){
.i_bgimg_2, .i_bgimg_3, .i_bgimg_4, .i_bgimg_5, .i_bgimg_6, .i_bgimg_7, .i_bgimg_8, .i_bgimg_9, .i_bgimg_10, .i_bgimg_11, .i_bgimg_12, .i_bgimg_13, .i_bgimg_14, .i_bgimg_15, .i_bgimg_16, .i_bgimg_17, .i_bgimg_18, .i_bgimg_19, .i_bgimg_20, .i_bgimg_21, .i_bgimg_22, .i_bgimg_23, .i_bgimg_24, .i_bgimg_25, .i_bgimg_26, .i_bgimg_27, .i_bgimg_28, .i_bgimg_29, .i_bgimg_30, .i_bgimg_31, .i_bgimg_32, .i_bgimg_33, .i_bgimg_34, .i_bgimg_35, .i_bgimg_36, .i_bgimg_37, .i_bgimg_38, .i_bgimg_39, .i_bgimg_40, .i_bgimg_41, .i_bgimg_42 {
        background-attachment: fixed; /* Turn on parallax scrolling for tablets and desktops */

    }
.i_bgimg_1 {
  	background-image: url("../images/plx/1999/image_1.jpg");
  	min-height: 50%;
}

.i_bgimg_2 {
  	background-image: url("../images/plx/1999/image_2.jpg");
}

.i_bgimg_3 {
  	background-image: url("../images/plx/1999/image_3.jpg");
}
.i_bgimg_4 {
  	background-image: url("../images/plx/1999/image_4.jpg");
}
.i_bgimg_5 {
  	background-image: url("../images/plx/1999/image_5.jpg");
}
.i_bgimg_6 {
  	background-image: url("../images/plx/1999/image_6.jpg");
}
.i_bgimg_7 {
  	background-image: url("../images/plx/1999/image_7.jpg");
}
.i_bgimg_8 {
  	background-image: url("../images/plx/1999/image_8.jpg");
}
.i_bgimg_9 {
  	background-image: url("../images/plx/1999/image_9.jpg");
}
.i_bgimg_10 {
  	background-image: url("../images/plx/1999/image_10.jpg");
}
.i_bgimg_11 {
  	background-image: url("../images/plx/1999/image_11.jpg");
}
.i_bgimg_12 {
  	background-image: url("../images/plx/1999/image_12.jpg");
}
.i_bgimg_13 {
  	background-image: url("../images/plx/1999/image_13.jpg");
}
.i_bgimg_14 {
  	background-image: url("../images/plx/1999/image_14.jpg");
}
.i_bgimg_15 {
  	background-image: url("../images/plx/1999/image_15.jpg");
}
.i_bgimg_16 {
  	background-image: url("../images/plx/1999/image_16.jpg");
}
.i_bgimg_17 {
  	background-image: url("../images/plx/1999/image_17.jpg");
}
.i_bgimg_18 {
  	background-image: url("../images/plx/1999/image_18.jpg");
}
.i_bgimg_19 {
  	background-image: url("../images/plx/1999/image_19.jpg");
}
.i_bgimg_20 {
  	background-image: url("../images/plx/1999/image_20.jpg");
}
.i_bgimg_21 {
  	background-image: url("../images/plx/1999/image_21.jpg");
}
.i_bgimg_22 {
  	background-image: url("../images/plx/1999/image_22.jpg");
}
.i_bgimg_23 {
  	background-image: url("../images/plx/1999/image_23.jpg");
}
.i_bgimg_24 {
  	background-image: url("../images/plx/1999/image_24.jpg");
}
.i_bgimg_25 {
  	background-image: url("../images/plx/1999/image_25.jpg");
}
.i_bgimg_26 {
  	background-image: url("../images/plx/1999/image_26.jpg");
}
.i_bgimg_27 {
  	background-image: url("../images/plx/1999/image_27.jpg");
}
.i_bgimg_28 {
  	background-image: url("../images/plx/1999/image_28.jpg");
}
.i_bgimg_29 {
  	background-image: url("../images/plx/1999/image_29.jpg");
}
.i_bgimg_30 {
  	background-image: url("../images/plx/1999/image_30.jpg");
}
.i_bgimg_31 {
  	background-image: url("../images/plx/1999/image_31.jpg");
}
.i_bgimg_32 {
  	background-image: url("../images/plx/1999/image_32.jpg");
}
.i_bgimg_33 {
  	background-image: url("../images/plx/1999/image_33.jpg");
}
.i_bgimg_34 {
  	background-image: url("../images/plx/1999/image_34.jpg");
}
.i_bgimg_35 {
  	background-image: url("../images/plx/1999/image_35.jpg");
}
.i_bgimg_36 {
  	background-image: url("../images/plx/1999/image_36.jpg");
}
.i_bgimg_37 {
  	background-image: url("../images/plx/1999/image_37.jpg");
}
.i_bgimg_38 {
  	background-image: url("../images/plx/1999/image_38.jpg");
}
.i_bgimg_39 {
  	background-image: url("../images/plx/1999/image_39.jpg");
}
.i_bgimg_40 {
  	background-image: url("../images/plx/1999/image_40.jpg");
}
.i_bgimg_41 {
  	background-image: url("../images/plx/1999/image_41.jpg");
}
.i_bgimg_42 {
  	background-image: url("../images/plx/1999/image_42.jpg");
}
	.i_tabs_text::before {
		content: "Step ";
	}
	.i_tabs_text::after {
		content: "  > ";
	}
	
}

/*============================= Cards as a deck (revolving) =========================================*/

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.i_deck_h1{
  font-size: 2.5rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #444;
  text-align: center;
  margin: 2rem 0;
}

.i_deck_wrapper{
  /*width: 90%; */
  margin: 0 auto;
  max-width: 80rem;
  border-width: 5px;
  border-color: #ffffff;
  background: rgba(243,245,246,0.7);
}

.i_deck_cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.i_deck_col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}

.i_deck_container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
}

.i_deck_front,
.i_deck_back{
  background-size: cover;
	background-position: center;
	-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	min-height: 280px;
	height: auto;
	border-radius: 10px;
	color: #fff;
	/* font-size: 1.5rem; */
}
.i_deck_front {
	text-align: center;
	
}
.i_deck_back{
	text-align: left;
  	background: #cedce7;
  	background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  	background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  	background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
}

.i_deck_front:after{
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.i_deck_container:hover .i_deck_front,
.i_deck_container:hover .i_deck_back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.i_deck_back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.i_deck_inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 4px; /* 2rem; */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.i_deck_container .i_deck_back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.i_deck_container .i_deck_front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.i_deck_container:hover .i_deck_back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.i_deck_container:hover .i_deck_front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.i_deck_front .i_deck_inner p{
  /* font-size: 2rem; */
  margin-bottom: 2rem;
  position: relative;
}

.i_deck_front .i_deck_inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.i_deck_front .i_deck_inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}
@media screen and (max-width: 64rem){
  .i_deck_col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .i_deck_col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .i_deck_col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}
/*============================= Tabs on Readiness page =========================================*/
/*
@font-face{font-family: 'Abel';font-style: normal;font-weight: 400;src: local('Abel'), local('Abel-Regular'), url(https://fonts.gstatic.com/s/abel/v6/brdGGFwqYJxjg2CD1E9o7g.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'),local('Oswald-Regular'),url(https://fonts.gstatic.com/s/oswald/v10/yg0glPPxXUISnKUejCX4qfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');unicode-range: U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'),local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v10/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131, U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000;}
*/
/* https://codepen.io/cssmfcpro/pen/PNmzPg */
.i_tab {
	display:block;
	width:90%;
	height:430px;
	padding:5px 10px;
	overflow:hidden;-webkit-font-smoothing: 
	antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin:20px auto;
}
.i_tab #i_step1,.i_tab #i_step2,.i_tab #i_step3,.i_tab #i_step4,
#i_step5,.i_tab #i_step6,.i_tab #i_step7 {
	display:none;
	-webkit-animation:fadeInScale 1.2s ease-in-out;
	-moz-animation:fadeInScale 1.2s ease-in-out;
	-o-animation:fadeInScale 1.2s ease-in-out;
	-ms-animation:fadeInScale 1.2s ease-in-out;
	animation:fadeInScale 1.2s ease-in-out;
	height:250px;
	overflow:auto;
	/* font-family: 'Abel'; */
}
.i_tab #i_step1:target,.i_tab #i_step2:target,.i_tab #i_step3:target,.i_tab #i_step4:target,
#i_step5:target,.i_tab #i_step6:target,.i_tab #i_step7:target {
	display:block;
	padding:10px 10px;
	margin:8px auto;
	border-radius:4px;
	-webkit-border-radius:4px;
	/*font-size:18px;
	color:#666; */
	height:350px;
	overflow:auto;
	position:relative;
}
.i_tabs {
	border-bottom:4px solid #099;
	/* font-family:'Oswald'; */
}
.i_tabs a:link,.i_tabs a:visited {
	display:inline-block;
	padding:7px 24px;
	text-decoration:none;
	text-align:center;
	color:#fff;
	background:#099;
	border-radius:6px 6px 0 0;
	-webkit-border-radius:6px 6px 0 0;
	transition:all .3s;
	-webkit-transition:all .3s;}
.i_tabs a:hover {
	color:#fff;
	background:#066;
}
.i_tabs a:active, .i_tabs a:focus {
	background:#000;
	color:#fff;
}
.i_scrollbar::-webkit-scrollbar { 
	width:9px;
}
.i_scrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
	-webkit-border-radius:10px;
	border-radius:10px;
}
.i_scrollbar::-webkit-scrollbar-thumb {
	-webkit-border-radius:10px;
	border-radius:10px;
	background:#099;
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
.i_scrollbar::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(102,0,102,.3);
	border:1px solid #000;
}
#i_step1 img, #i_step2 img, #i_step3 img, #i_step4 img, 
#i_step5 img, #i_step6 img, #i_step7 img {
	/*display:inline-block;
	margin-right: 10px;
	float:left; */
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
}
@-webkit-keyframes fadeInScale {
    0% {-webkit-transform:scale(1);opacity:0;margin-left:-999px;border:none;}
    100% { -webkit-transform: scale(1);opacity:1;margin-left:0px;}
}
@-moz-keyframes fadeInScale {
    0% { -moz-transform: scale(1);opacity:0;margin-left:-999px;border:none;}
    100% { -moz-transform: scale(1)opacity:1;;margin-left:0px}
}
@-o-keyframes fadeInScale {
    0% { -o-transform: scale(1);opacity:0;margin-left:-999px;border:none;}
    100% { -o-transform: scale(1);opacity:1;margin-left:0px}
}
@-ms-keyframes fadeInScale {
    0% { -ms-transform: scale(1);opacity:0;margin-left:-999px;border:none;}
    100% { -ms-transform: scale(1);opacity:1;margin-left:0px}
}
@keyframes fadeInScale {
    0% { transform: scale(1);opacity:0;margin-left:-999px;border:none;}
    100% { transform: scale(1);opacity:1;margin-left:0px}
}  
/*============================= Tabs on Glossary page =========================================*/
.i_tab_v {
	display:block;
	width:90%;
	/* height:430px; */
	padding:5px 10px;
	overflow:hidden;-webkit-font-smoothing: 
	antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin:20px auto;
}
/*
Note: the following is generated on the Glossary page as internal css as the id names are linked to glossary_key in database
.i_tab_v #i_step1,.i_tab_v #i_step2,.i_tab_v #i_step3,.i_tab_v #i_step4,
#i_step5,.i_tab_v #i_step6,.i_tab_v #i_step7 {
	display:none;
	-webkit-animation:fadeInScale 1.2s ease-in-out;
	-moz-animation:fadeInScale 1.2s ease-in-out;
	-o-animation:fadeInScale 1.2s ease-in-out;
	-ms-animation:fadeInScale 1.2s ease-in-out;
	animation:fadeInScale 1.2s ease-in-out;
	height:250px;
	overflow:auto;
}
.i_tab_v #i_step1:target,.i_tab_v #i_step2:target,.i_tab_v #i_step3:target,.i_tab_v #i_step4:target,
#i_step5:target,.i_tab_v #i_step6:target,.i_tab_v #i_step7:target {
	display:block;
	padding:10px 10px;
	margin:8px auto;
	border-radius:4px;
	-webkit-border-radius:4px;

	height:350px;
	overflow:auto;
	position:relative;
}
*/
.i_tabs_v  {
	float: left;
	width: 18%;
	margin-right: 2%;
	/* nborder-bottom:4px solid #099; */
	/* font-family:'Oswald'; */
}
.i_tabs_v  a:link,.i_tabs_v  a:visited {
	display:inline-block;
	width: 100%;
	padding:3px 10px;
	font-size: 75%;
	margin-bottom: 2px;
	text-decoration:none;
	text-align:center;
	color:#fff;
	background:#099;
	/*
	border-radius:6px 6px 0 0;
	-webkit-border-radius:6px 6px 0 0;
	*/
	border-radius:6px;
	-webkit-border-radius:6px;
	transition:all .3s;
	-webkit-transition:all .3s;}
.i_tabs_v  a:hover {
	width: 100%;
	color:#fff;
	background:#066;
}
.i_tabs_v  a:active, .i_tabs_v  a:focus {
	width: 100%;
	background:#000;
	color:#fff;
}





/*============================= Media queries =========================================*/
  
/* Mobile */
@media screen and (max-width: 768px) {
    .i_bar {
        padding: 30px;
    }
	.i_tabs_text::before {
		content: '';
	}
	.i_tabs_text::after {
		content: '';
	}
	.i_tabs a:link,.i_tabs a:visited {
		width: 30px;
		text-align: center;
		font-size: 75%;
		padding: 4px 8px;
	}	
    .i_3col_left,
    .i_3col_mid,
    .i_3col_right {
        width: auto;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    .i_3col_banner_left,
    .i_3col_banner_mid,
    .i_3col_banner_right {
        width: auto;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    #i_top .i_3col_banner_left {
        width: 18%;
        float: left;
        text-align: center;
        margin-left: 1%;
        margin-right: 1%;
    }

    #i_top .i_3col_banner_mid {
        width: 60%;
        float: left;
        text-align: center;
    }

    #i_top .i_3col_banner_right {
        width: 18%;
        float: left;
        text-align: center;
        margin-left: 1%;
        margin-right: 1%;
    }

    .i_left_col_60,
    .i_right_col_40 {
        width: auto;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    .i_left_col_50,
    .i_right_col_50,
    .i_left_col_50_brdr {
        width: auto;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    .i_left_col_15,
    .i_right_col_85,
    .i_left_col_25,
    .i_right_col_75 {
        width: auto;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    .i_left_col_15,
    .i_right_col_85 {
		clear: both;
        margin-left: auto;
        margin-right: auto;	
    }
    .i_left_col_60 {
        margin-bottom: 30px;
    }

    .i_3col_wide_left,
    .i_3col_wide_right,
    .i_3col_narrow_left,
    .i_3col_narrow_right {
        display: none;
    }

    .i_area {
        padding: 30px;
    }

    .i_3col_wide_mid, .i_3col_narrow_mid {
        width: auto;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    .i_notes, .i_notes_emphasis {
        padding: 10px;
    }

    .i_form_row_odd,
    .i_form_row_even {
        display: block;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .i_form_row_odd td,
    .i_form_row_even td,
    .i_form_col_1,
    .i_form_col_2 {
        display: block;
        width: 100%;
        text-align: left;
        padding: 5px 10px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .i_form_row_odd .i_notes,
    .i_form_row_even .i_notes,
    .i_form_row_odd .i_notes_emphasis,
    .i_form_row_even .i_notes_emphasis {
        padding: 0;
    }

    .i_fees_table {
        width: 98%;
        display: block;
        overflow: auto;
    }
    .i_fees_table td {
        padding: 10px;
        vertical-align: top;
    }
	#i_step1 img, #i_step2 img, #i_step3 img, #i_step4 img, 
	#i_step5 img, #i_step6 img, #i_step7 img {
		max-width: 50%;
	}

    .i_switch {
        margin-bottom: 10px;
    }

    .teamtable thead {
        display: none !important;
    }

    .teamtable .i_3col_left,
    .teamtable .i_3col_mid,
    .teamtable .i_3col_right {
        margin-top: 10px;
    }

    .teamtable .i_3col_left::before,
    .teamtable .i_3col_mid::before,
    .teamtable .i_3col_right::before {
        content: attr(data-header);
        display: block;
        width: 90%;
    }
}
/*============================= Overlay spinner =========================================*/
/* https://codepen.io/MattIn4D/pen/LiKFC */
/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*============================= RAG Status =========================================*/
.i_status_red, .i_status_white, .i_status_yellow, .i_status_green, .i_status_blue, .i_status_black {
    /* margin: 20px auto; 
    box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;	
    */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #636363;
    display: inline-block;
    vertical-align: middle;
}
.i_status_red {
    background-color: red;
}

.i_status_yellow {
    background-color: gold;
}

.i_status_green {
    background-color: lime;
}

.i_status_blue {
    background-color: #4AB;
}
.i_status_white {
    background-color: #fff;
}
.i_status_black {
    background-color: #000000;
}
/*============================= Google icons =========================================*/
.material-icons{
	vertical-align: middle;
}
/* set sizes of icon eg <i class="material-icons md18">face</i> */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }


/* tick */


.icon_tick span:before {
  font-family: 'Material Icons';
  content: '\e86c';
  height:10px;
  width: 10px;
}
/*============================= Fancybox 3 overrides =========================================*/
.fancybox-content {
    max-width  : 80%;
    max-height : 90%;
    margin: 0;
}