@charset "utf-8";
/* CSS Document */

/*controls size of product/client logo on subsites*/
	.group-ins-logo{
		width: 250px;
		height: auto;
	}

/*used to add vertical yellow indent to pitch area on product/industry pages*/
.pitch{
	
	border-left: 8px solid #e91c2a; 
}

/* used to remove any extra spacing on an element */

.zero-space{
	margin: 0px;
	padding: 0px;
}

/* used to make a basic coverforce style html table */

.tablecov1{
	border: 2px solid #000;
			
}

.tablecov1 > thead > tr > th,pa
.tablecov1 > tbody > tr > th,
.tablecov1 > tfoot > tr > th,
.tablecov1 > thead > tr > td,
.tablecov1 > tbody > tr > td,d
.tablecov1 > tfoot > tr > td {
  border: 2px solid #fff;
	padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;

}


.tablecov1 > thead > tr {
  background-color: #e91c2a;
	font-weight: bold;
	color: #000000;
	border-bottom: 4px solid #e91c2a;

}


.tablecov1 > tbody > tr:nth-of-type(odd) {
  background-color: #dddddd;
}

.tablecov1 > tbody > tr:nth-of-type(even) {
  background-color: #eeeeee;
}

/* used to put an underline on things*/

.ulined{
	
	text-decoration: underline;
}

/* yellow underlined h4 for Career Opportunities */
.ul-h4{
	border-bottom: medium solid #e91c2a;
}


/* Community Sponsor wording height */

.org-desc{
	
	height: 120px;
	overflow: hidden;
}


.quick-links li{
	
	padding-top: 5px;
	padding-bottom: 5px;
}

/*styles the top and bottom sections of Quotes*/
.qm-top{

	background-image: url("https://www.coverforce.com.au/wageguard/images/wageguard quote marks.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	height: 27px;
}

.q-top{

	background-image: url("https://www.coverforce.com.au/wageguard/images/WageGuard top quote mark.png");
	background-size: contain;
	background-repeat: repeat-x;
	height: 27px;	
}

.q-bottom{
	background-image: url("https://www.coverforce.com.au/wageguard/images/WageGuard bottom quote mark.png");
	background-size: contain;
	background-repeat: repeat-x;
	height: 27px;
	
}


/*styles the white breadcrumb on top of page headings*/
.breadcrumb-heading{
	color: #fff;
	margin-top: 30px;
	font-weight: bold;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.breadcrumb-heading-black{
	color: #000000;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 0px;
	padding-bottom: 0px;
}


.breadcrumb-index{
	color: #e91c2a;
	margin-top: 20px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	font-weight: 600;
}

/*allows the breadcrumb-heading to get close to the pageheading*/
.pageheading{
	margin-top: 10px;
}

/*changes the colour of the hamburger menu shown when nav collapses*/
.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
}

/*removes hover underlines from any links as required*/
.no-decoration a:hover {
    text-decoration: none;
}


/* The following styling controls the look of the navbar search function */
.animate {
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.navbar-bootsnipp {
    background-color: rgb(255, 255, 255);
	border-radius: 0px;
	margin-bottom: 0px;
	z-index: 100;
}

.navbar-bootsnipp.affix-top {
	position: absolute;
	top: 0px;
	width: 100%;
}
.navbar-bootsnipp.affix {
	top: 0px;
	width: 100%;
}

.navbar-bootsnipp .bootsnipp-search {
	display: none;
}
.navbar-bootsnipp .bootsnipp-search .form-control {
	background-color: rgb(235, 235, 235);
	border-radius: 0px;
	border-width: 0px;
	font-size: 16px;
	padding: 10px 10px 0px 10px;
}
.navbar-bootsnipp .bootsnipp-search .form-control:focus {
	border-color: transparent;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn {
	padding: 14px 16px;
	border-radius: 0px;
}
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn.active,
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn:hover,
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn:focus {
	padding: 14px 16px 14px 15px;
}
.navbar-bootsnipp .bootsnipp-search .input-group-btn > .btn-default {
	background-color: rgb(245, 245, 245);
}

/* All pages - Making 2 ul columns that sit next to each other have the same height  Note: You need to use ul-2-cols on the container div. Then use col-1 on the left column and col-2 on the right column. For 2 columns that you want to stack to one column on a phone, use col-3 on the left column and col-4 on the right column. */
.ul-2-cols {
    display: table;
	/*margin-bottom: 20px;*/
	width:100%;
}

/* All pages - Column 1 (left) */
.ul-2-cols .col-1 .col-3 {
    display: table-cell;
    display: table-cell;
    float: none;
}

/* Column 2 (right) */
.ul-2-cols .col-2 .col-4{
	min-height:100%;
    height: 100%;
    display: table-cell;
    float: none;	
}

/* For tables on the sub sites - gives it a scroll when the screen gets smaller */
.table-scroll{
	overflow-x:auto;
}

/* All pages - Without this class, the <li>s will have a bullet point and an arrow. It doesn't seem to affect the <li>s in the nav */
ul{
	display:block;
	list-style-type: none;
}

/* To space out <li>s */
li{
	margin-bottom:3px;
}

/* Partner profile page and all sub site download pages - Download icon */
.download-icon li:before {
	content:'';
	float:left;
	display:inline-block;
	height:45px;
	width:35px;
	background-image: url(https://www.coverforce.com.au/wageguard/images/wg-download-icon.png);
	background-size:contain;
	background-repeat: no-repeat;
	margin-left:-10px;
	margin-right:10px;
}

.download-icon li{
	margin-bottom:30px;
}

/* Thank-you page that comes after a form submission - Container box */
.success-message{
	padding:10px 10px 20px 10px;
	margin-top:100px;
	/*border-color:#eeeeee;
	border-width:10px;
	border-style:solid;*/
}

/* Contruction Industry page - Setting 3 columns to sit together equally */
.three-cols{
	display:table-cell;
	padding-right:15px;	
}
.table-container{
	display:table-row;
}

.inline-block{
	display:table-cell;
}

/* All pages - This gives the <li>s an arrow as a bullet point */
/* Yellow arrow */
.custom-bullet li:before{
	content:"\e080";
	font-family:'Glyphicons Halflings';
	font-size:10px;
	float:left;
	margin-top:4px;
	padding-left:5px;
	margin-left:-20px;
	color:#e91c2a;
	padding-right:5px;
}

/* All pages - This gives the <li>s <li>s an arrow and additional indent as a bullet point */
/* Yellow arrow */
.ullvl2 li:before{
	content:"\2212";
	font-family:'Glyphicons Halflings';
	font-size:10px;
	float:left;
	margin-top:4px;
	padding-left:10px;
	margin-left:-20px;
	color:#777777;
	padding-right:5px;
}


/* Black arrow */
.custom-bullet-black li:before{
	content:"\e080";
	font-family:'Glyphicons Halflings';
	font-size:10px;
	float:left;
	margin-top:4px;
	padding-left:5px;
	margin-left:-20px;
	color:#000000;
	padding-right:5px;
}

/* To align the numbers up with the paragraph */
ol li{
	margin-left:10px;
}

/*footer-nav*/

.footerglyph{
	font-size: 200%;
	display: inline-block;
	position: relative;
	float: left;
	padding-right: 10px;
	margin-top: 5px;
}

.footerfloat{
	display: inline-block;
	position: relative;
	float: left;
	padding-left: 10px;
}
.footertoprow{
	padding-top: 10px;
	padding-bottom: 10px;
	height: auto;
	border-top: thin solid #000000; 
}

.footertoprow a{
	color: #fff;
}

.footertoprow a:hover{
	color: #000000;
}

.footer2ndrow{
	padding-top: 10px;
	padding-bottom: 10px;
}
.footernav{
	border-top: thick solid #fff;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.footernav a{
	color: #fff;
}

.footernav a:hover{
	color: #e91c2a;
}

.footernav a:visited{
	color: #fff;
}

/* All pages Aside - Styles the articles in the aside */
.article-aside{
	height:auto;
	width: auto;
	background-color:#333333;
	border-left-width: 10px;
	border-left-color: #ffcb00;
	border-left-style: solid;
	color: #ffffff;
	padding: 1px 10px 25px 15px;
	font-family: Arial, Helvetica, 'sans-serif';
	font-size: 90%;
	margin-bottom:15px;
	margin-bottom:15px;
	-webkit-appearance: none;
   	-moz-appearance: none;
  	-ms-appearance: none;
   	-o-appearance: none;
    appearance: none;
}

/* Slider */
.slick-slide {
    margin: 10px 0px;
	padding: 0px 20px;
	border-right: thin solid #222
}

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

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 50px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Slider Arrows */

.slick-prev,
.slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 30px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    margin-top: -10px;
    padding: 0;
    border: none;
    outline: none;
    &:hover, &:focus {
        outline: none;
        background: transparent;
        color: transparent;
        &:before {
            opacity: $slick-opacity-on-hover;
        }
    }
    &.slick-disabled:before {
        opacity: $slick-opacity-not-active;
    }
}

.slick-prev:before {
    
	font-family: "Glyphicons Halflings";
    content:"\e257";
    font-size: 20px;
    line-height: 1;
    color: #fff;
    opacity: $slick-opacity-default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-next:before {
    
	font-family: "Glyphicons Halflings";
    content:"\e258";
    font-size: 20px;
    line-height: 1;
    color: #fff;
    opacity: $slick-opacity-default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
    [dir="rtl"] & {
        left: auto;
        right: -25px;
    }
    &:before {
        content: $slick-prev-character;
        [dir="rtl"] & {
            content: $slick-next-character;
        }
    }
}

.slick-next {
    right: -25px;
    [dir="rtl"] & {
        left: -25px;
        right: auto;
    }
    &:before {
        content: $slick-next-character;
        [dir="rtl"] & {
            content: $slick-prev-character;
        }
    }
}
/* All pages - Styling for the links */

/* Yellow link, grey hover */
.a{
	color:#ffcb00;
}
.a:hover{
	color:#cccccc;	
	text-decoration:none;
	cursor: pointer;
}

/* All pages Yellow link, grey hover & yellow uline */
.link-yellow{
	color:#e91c2a;
}
.link-yellow:hover{
	text-decoration:none;
	border-bottom-color: #e91c2a;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	color:#cccccc;
	cursor:pointer;
}

/* Mango link - only for Contact us page*/
.link-mango{
	color:#f7931d;
}
.link-mango:hover{
	text-decoration:none;
	border-bottom-color: #f7931d;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	color:#cccccc;
	cursor:pointer;
}

/* Gradient1 link - only for Contact us page*/
.link-gradient1{
	color:#ffffff;
	border-bottom-color: #ffcb04;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.link-gradient1:hover{
	text-decoration:none;
	color:#cccccc;
	cursor:pointer;
}

/* Gradient3 link - only for Contact us page*/
.link-gradient3{
	color:#ffffff;
	border-bottom-color: #fcb70e;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.link-gradient3:hover{
	text-decoration:none;
	color:#cccccc;
	cursor:pointer;
}

/* Gradient5 link - only for Contact us page*/
.link-gradient5{
	color:#ffffff;
	border-bottom-color: #faa915;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.link-gradient5:hover{
	text-decoration:none;
	color:#cccccc;
	cursor:pointer;
}

/* Gradient6 link - only for Contact us page*/
.link-gradient6{
	color:#ffffff;
	border-bottom-color: #f9a218;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.link-gradient6:hover{
	text-decoration:none;
	color:#cccccc;
	cursor:pointer;
}



/* Black link, dark grey hover (because black links often sit on the aside which is light grey) */
.link-black{
	color:#000000;
}
.link-black:hover{
	text-decoration:none;
	border-bottom-color: #ffcb00;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	color:#666666;
	cursor:pointer;	
}

/* White link, yellow hover */
.link-white{
	color:#ffffff;
}
.link-white:hover{
	color:#ffcb00;
	text-decoration:none;
	cursor:pointer;
}

/* Grey link, dark grey hover (only used on the footer) */
.link-grey{
	color:#cccccc;
}
.link-grey:hover{
	color:#666666;
	text-decoration:none;
	border-bottom-color: #666666;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	cursor:pointer;
}

/* Black link with no underline, grey hover */
.link-no-uline{
	color:#000000;
}
.link-no-uline:hover{
	text-decoration:none;
	color:#666666;
	cursor:pointer;
}

/* White link with yellow hover, no uline*/
.link-no-uline-white{
	color:#ffffff;
}
.link-no-uline-white:hover{
	color:#ffcb00;
	text-decoration:none;
	cursor:pointer;
}

/* Black link with underline, grey hover */
.link-uline{
	color:#000000;
	border-bottom-color: #e91c2a;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.link-uline:hover{
	text-decoration:none;
	color:#666666;
	cursor:pointer;
}

/* Black link with underline, grey hover */
.link-uline-grey-hov{
	color:#ffffff;
	border-bottom-color: #e91c2a;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.link-uline-grey-hov:hover{
	text-decoration:none;
	color:#cccccc;
	cursor:pointer;
}

/* Black link with underline, grey hover */
.link-or-uline-grey-hov{
	color:#ffffff;
	border-bottom-color: #f7931d;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.link-or-uline-grey-hov:hover{
	text-decoration:none;
	color:#cccccc;
	cursor:pointer;
}

/* White link with underline, dark grey hover */
.link-uline-white{
	color:#ffffff;
	border-bottom-color: #ffcb00;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.link-uline-white:hover{
	text-decoration:none;
	color:#333333;
	cursor:pointer;
}

/* ---------------------------
	Group Income Protection Page
------------------------------ */
/* Group Income Protection page - thumbnails for each product */
.ip-thumbnails{
	height:180px;
	position:relative;
	background-repeat:no-repeat;
	/*border-right-color:#ffffff;
	border-right-width:8px;
	border-right-style: solid;*/
}

/* Grp IP pg - Aside logos */
.aside-logo-size{
	width:60%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 35%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	
}

/* Group IP pg aside - background to the Ip logos in the aside */
.ip-aside-logos{
	height:65px;
	position:relative;
	margin-bottom:5px;
	background-color:#000000;
}
.ip-aside-logos:hover{
	background-color:#333333;
}

/* Uplus and Wageguard need their size to be adjusted in order to appear consitent with PayCover and Wagecare */
.uplus-aside-logo{
	width:45%;
	left: 27%;
}
.wageguard-aside-logo{
	width:70%;
	left: 39%;
}

/* Income Protection logos that sits on top of the Income Protection thumbnails */
/* Also this aligns the products horizontally and vertically */
.ip-product-logo-sm{
	margin: 0;
    position: absolute;
    top: 42%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

/* Income Protection - width of each product logo (as they don't look consistent with the same width set to all of them */
.paycover-logo{
	width:85%;
	margin: 0;
    position: absolute;
    top: 47%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.uplus-logo{
	width:60%;
	margin: 0;
    position: absolute;
    top: 45%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

/* Group Income protection page - To go under Uplus introduction. Otherwise the other don't drop properly on Small screen. (The Uplus intro words are not as long as the PayCover) */
.spacer{
	height:20px;
}

.wagecare-logo{
	width:90%;
	margin: 0;
    position: absolute;
    top: 48%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.wageguard-logo{
	width:95%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}


/* Sub site dropdown menu */
.sub-site-menu {
	min-width: 100%;
	position: absolute;
	left: 50% !important;sub
	right: auto !important;
	text-align: left !important;
	transform: translate(-50%, 0) !important;
}

/* Bootstrap styling for dropdown menu on sub site (just changed the class name - from dropdown-menu to single-dropdown-menu - so it didn't intefer with the navbar */
.single-dropdown-menu {
	min-width: 100%;
	position: absolute;
	/*left: 50% !important;
	right: auto !important;
	text-align: left !important;
	transform: translate(-50%, 0) !important;*/
  top: 100%;
  z-index: 1000;
  display: none;
  float: left;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
}
.single-dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.single-dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.single-dropdown-menu > li > a {
  display: inline-block;
  padding: 3px 0px;
  float: left;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.single-dropdown-menu > .active > a,
.single-dropdown-menu > .active > a:hover,
.single-dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  background-color: #337ab7;
}
.single-dropdown-menu > .disabled > a,
.single-dropdown-menu > .disabled > a:hover,
.single-dropdown-menu > .disabled > a:focus {
  color: #777777;
}
.single-dropdown-menu > .disabled > a:hover,
.single-dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.open > .single-dropdown-menu {
  display: block;
}

/*.dropdown-menu-right {
  left: auto;
  right: 0;
}
.dropdown-menu-left {
  left: 0;
  right: auto;
}*/

/* Sub site - This specifies the width for the top heading logo on the sub sites pages. For example, Uplus, Wageguard etc */
.sub-site-logo{
	width:50%;
}

/* Sub site - This styles the side menu links */
.link-bg{
	color:#000000;	
}

/* Sub site - This styles the side menu links on hover */
.link-bg:hover{
	color:#000000;
	transition:all ease 0.5s;
	text-decoration:none;
}

/* Sub site - This styles the backgrounds of the side menu items */
.side-menu-item{
	background:#ffffff;
	/*padding:22px 10px 25px 20px;*/
	padding:15px 10px 15px 10px; 
	margin-bottom:-8px;
	cursor:pointer;
	font-size: 120%;
	font-family: "adelle", Georgia, "serif";
	line-height: 1.1;
}

/* Sub site - This styles the hover backgrounds of the side menu items */
.side-menu-item:hover{
	background:#cccccc;
	transition:all ease 0.5s;
}

.side-menu-item::active{
	background:#666666;
}

/* All pages - positions the top hero image */
.bg-align-ctr{
	background-position:center;
}

.bg-align-rt{
	background-position:right;
}

/* Styling for FAQs (mostly on sub site pages) */
.faq-question{
	background-color:#4F4F4F;
	color: #ffffff;
	padding:5px;
}

.faq-answer{
	padding:5px;
}

/* All pages - These are to give a left border to a div with each colour stop from the gradient as an option */
.gradient1-left-bdr{
	border-left-color:#e91c2a;
	border-left-width:8px;
	border-left-style: solid;
}
.gradient2-left-bdr{
	border-left-color:#E01523;
	border-left-width:8px;
	border-left-style: solid;
}
.gradient3-left-bdr{
	border-left-color:#C3121E;
	border-left-width:8px;
	border-left-style: solid;
}
.gradient4-left-bdr{
	border-left-color:#B3101B;
	border-left-width:8px;
	border-left-style: solid;
}
.gradient5-left-bdr{
	border-left-color:#9B0D17;
	border-left-width:8px;
	border-left-style: solid;
}
.gradient6-left-bdr{
	border-left-color:#860B13;
	border-left-width:8px;
	border-left-style: solid;
}
.gradient7-left-bdr{
	border-left-color:#6D090F;
	border-left-width:8px;
	border-left-style: solid;
}
.gradient8-left-bdr{
	border-left-color:#45060B;
	border-left-width:8px;
	border-left-style: solid;
}

.backtotop-btn{
	border-style: solid;
	border-width:1px;
	border-color:#999999;
	padding: 2px 5px;
	color:#999999;
}

.backtotop-btn:hover{
	border-style: solid;
	border-width:1px;
	border-color:#666666;
	padding: 2px 5px;
	color:#666666;
	text-decoration: none;
}

.backtotop-btn::active{
	text-decoration:none;
	color:#999999;
}

.margin-bottom{
	margin-bottom:10px;
}
	
/* ----------
	FORM
------------ */
/* Form - controls the hero image of the form */
.panel-bg-img{
	background-image:url(../../images/form-header-bg.jpg);
	height:200px;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 0px;
}

/* Form - Margin on the bottom of the internal part of form */
.panel-body{
	margin-bottom:9px;
}

/* Form had faint grey border I was trying to get rid of */
.panel-heading .panel-bg-img .panel-group .panel .panel-default .panel-heading .panel-title{
	border:none;
	border-width:0px;
	border-style:none;
	border-color:#ffffff;
}

/* Form - Gradient left border on the form */
.gr-left-border{
	border-left-width: 15px;
    border-left-style: solid;
	border-left-color:#ffcb00;
	border-left-color: rgba(255,203,16,1.0);
    -webkit-border-image: 
      -webkit-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    border-image:
      linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
}

/* Form - Gives form padding at the bottom */
.form-padding {
	padding-bottom: 20px;
}

/* Form - Background colour of the form input */
.form-control:focus {
  	background-color: #dddddd;
}

/*Font colour of the form input*/
.form-control::-moz-placeholder {
 	color: #999;
  	opacity: 1;
}

.form-control:-ms-input-placeholder {
  	color: #999;
}

.form-control::-webkit-input-placeholder {
  	color: #999;
}

.form-control::-ms-expand {
  	border: 0px;
  	background-color: transparent;
}

/* Form - Submit button on the form */
.submit-btn{
	background-color: #dddddd;
	padding:5px 15px 5px 15px;
	border: 0px;
	color:#000000;
}
.submit-btn:hover{
	background-color: #999999;
	color: white;
}

/* Form questions */
label [for=drop-down]{
	border:0px;
	border-radius:0px;
	background-colour: #eeeeee;
	text-decoration: none;
	-webkit-appearance: none;
   	-moz-appearance: none;
  	-ms-appearance: none;
   	-o-appearance: none;
    appearance: none;
}

/* Form - Ensures there's no cross browser styling on the form control (the form input) */
select {
	border:0px;
	-webkit-appearance:none;
}

/* Form - Getting rid of borders in the drop down section within the form */
option{
	border-size:0px;
}

/*Form - When questions in the form have and asterix that means it's a required field*/
.required{
    color:red;
}

/* ------------------
	INDUSTRY PAGE
--------------------- */
 /*New page 
.industry-thumbnail{
	background-repeat:no-repeat;
	background-size:cover;
	display:table;
} */

/* Industry page - banner in the body that has the quotation laid over it 
.body-banner{
	background-repeat:no-repeat;
	background-position: left bottom;
	position: relative;
	background-size: cover;
	overflow: hidden;
	/*background-size:contain; 
} */

/* Industry page - Construction & Building HBCF ad */
.hbcf-ad{
	/*height:300px;*/
	padding-top:10px;
	background-position:right;
	background-size:cover;
	background-repeat: no-repeat;
}

/* Industry page - Construction HBCF ad gradient line */
.ad-gradient-line{
     width:30%;
     height: 4px;
     background-image:url(https://www.coverforce.com.au/images/gradient-band-2.png);
     position:absolute;
}

/* Sub site - Top heading drop menu */
.single-dropdown li{
	list-style: none;
	padding: 15px 0px;
}

.single-dropdown li a{
	color: rgba(0,0,0,1.00)	;
	text-decoration: none;
}

.single-dropdown li a:hover{
	color: #e91c2a;
}


/* Styling for the person who wrote the quote */
.quote-author{
	font-size: 11px;
	float:right;
	text-align: right;
	margin-top: 4px;
	line-height: 15px;
}

/* The <p> tag seems to have a predetermined bottom margin. When a <ul> is at the bottom (even if it's wrapped in a <p> tag, the margin-bottom doesn't work. This is to give the <ul> an even margin-bottom to the <p> */
ul{
	margin-bottom:20px;
}

ol{
	margin-bottom:20px;
}

.aside-products ul {
	margin-bottom:5px;
}

/*--------------------------
	GROUP INSURANCE PAGES
----------------------------*/
/* Group Insurance page - The top white banner */
.group-ins-header-content{
	position:absolute;
	height:auto;
	margin-top:50px;
	padding-top:20px;
	padding-bottom:20px;
	left:0px;
	background-color:rgba(255,255,255,0.8);
	border-right-color:#e91c2a;
	border-right-style:solid;
	border-right-width:12px;
}

/* Group Insurance page - Puts the line in between LJ Hooker logo and the right-hand copy in the top header */
.left-border-black{
	border-left-color:#000000;
	border-left-width:3px;
	border-left-style:solid;
	padding-left:40px;
	float:right;
}

/* Group Insurance page - Image for the account executives */
.sm-team-thumbnail{
	margin-bottom:10px;
	height:150px;
	background-position: left bottom;
	background-size: cover;
	/*background-size:contain;*/
	background-color: #000000;
	background-repeat:no-repeat;
	
}

/* Group Insurance page - Caption for account executives */
.sm-team-caption{
	height:100px;
	padding:5px 10px 5px 15px;
	margin-right:0px;
	text-align: right;
}

/* Group Insurance page - The text in the aside under the headings "Risk Management tips" and "Bad timing?" */
.aside-body-div{
	margin-bottom:10px;
	padding-top:10px;
	padding-bottom:30px;
}

/* Gradient border on the right of a div */
.gr-right-border-sm{
	border-right-width: 8px;
    border-right-style: solid;
	border-right-color:#ffcb00;
	border-right-color: rgba(255,203,16,1.0);
    -webkit-border-image: 
      -webkit-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    border-image:
      linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
}

/* --------------------
	HOME INDEX PAGE
--------------------- */
.index-news-articles{
	padding:5px;
}

/* Home page - Container for the internal header and the 3 bands that sit next to it */
.home-internal-header-content{
	height:440px;
	position: absolute;
	
}

/* Home page - This is the internal background in the hero div */
.home-internal-bg{
	background-image: url(https://www.coverforce.com.au/wageguard/images/wageguard_white_logo_tagline.png);
	background-repeat: no-repeat;
	background-position: 30px 330px;
	background-size: 300px;
	height:440px;
	padding: 20px 60px 40px 60px;
	float:left;
	position:relative;
}

/* Home page - This makes up the 3 transparent bands that sit next to the home-internal-bg*/
.home-header-band{
	height:100%;
	width:40px;
	float:left;
	position:relative;
}

/* Home page button */
.home-btn{
    color:#000000;
    text-align:left;
    font-family: Arial;
    font-size: 120%;
	padding:10px 20px 10px 20px;
	/* Don't change anything below here */
    border:0;
    position:relative;
    overflow:hidden;
}

.home-btn:hover{
    border: none;
    color:#ffffff;
	cursor:pointer;
	text-decoration: none;
}

.chevron-mar-left{
	margin-left:20px;
}

.home-slider{
	height: 520px;
    background-image: url('../../css/img_flowers.jpg');
    background-size: cover;
	z-index:-2;
}

.carousel-inner{
	margin:0;
}

.index-banner-img1{
	background-image:url(../../images/1x/industry-banner-01.png);	
	background-size: contain;
	background-position: bottom right;
}


/* Top Hero Image - More height than average page */
.home-internal-header{
	width: 100%;
    height: 440px;
	position: relative;
	background-size:cover;
	background-repeat:no-repeat;
}

/* Class for the gradient band that sits above the home hero img */
.home-internal-header:before{
    content:" ";
    display:block;
    width:100%;
    height: 6px;
    background-image:url(https://www.coverforce.com.au/wageguard/images/gradient-band-wg.png);
    position:absolute;
    left:0px;
	z-index: 10000;
}

.cf-about{
	padding:40px 60px 40px 60px;
}

.black-banner{
	border-top-color:#363636;
	border-top-width:3px;
	border-top-style:solid;
	border-bottom-color:#363636;
	border-bottom-width:3px;
	border-bottom-style:solid;
	
}


/* Slider - Defines the outside container elements of the slider (Don't be fooled by "ac" which should stand for accordian - that was an accident. May need to do a find and replace of these classes later to avoid confusion. They're on all home page and partner pages sliders.
THESE STYLES WON'T BE NEEDED ONCE WE MOVE TO USING AMANDA'S SLICK SLIDER*/
.ac-container {
  overflow: hidden;
  margin: 10px 0px; 0px 0px;
  color: #000000;
  background: none;
  text-align: left;
}

.ac-container label {
  font-family: Adelle, Georgia, 'sans-serif';
  overflow: hidden;
  color: #ffffff;
  cursor: pointer;
  background: #333333;
  margin: 5px 0px 0px 0px;
  padding: 5px, 0px, 5px, 5px;
  position: relative;
  z-index: 20;
  display: block;
  height: 30px ;
  line-height: 33px ;
  font-size: 19px;
}
.ac-container label:hover {
  background: #444444;
  color: #ffffff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover {
  background: #444444;
  color: #ffffff;
  margin: 5px 0px 0px 0px;
  font-size: 19px;
  padding: 5px, 0px, 5px, 5px;
  font-weight: 400;
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  right: 13px;
  top: 7px;
  background: transparent url(https://tympanus.net/Tutorials/CSS3Accordion/images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after {
  background-image: url(https://tympanus.net/Tutorials/CSS3Accordion/images/arrow_up.png);
}
.ac-container input {
  display: none;
}
.ac-container article {
  background: #ffffff;
  overflow: hidden;
  height: 0px;
  position: relative;
  -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p {
  margin: 3px;
  padding: 10px;
  display: block;
}
.ac-container input:checked ~ article {
  -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.ac-container input:checked ~ article.ac-short {
  height: 140px;
}
.ac-container input:checked ~ article.ac-tall {
  height: 250px;
}
.ac-container input:checked ~ article.ac-grande {
  height: 500px;
}


/* New slick slider */
	$('.responsive').industry-slider({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

/* End of New slick slider */



/* -----------------------------------------
	Animated Gradient circle - Home page
------------------------------------------- */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* If you ever want to resuse the dot animation circle for group income protection banner, it's in test css */

/* All pages - To float something right */
.float-right{
	float:right;
}

/* Home page - "Select your product" element under Group Income Protection banner */
.select-product{
	height:255px;
}

/* Home page - To bring income protection products closer to the heading */
.minus-left-mg{
	margin-left:-10px;
}

/* Industry Construction - HBCF Insurance ad - minuses top margin on the Heading 3 text "Coverforce does HBCF Insurance"*/
.minus-top-mg{
	margin-top:0px;
}

.lg-minus-top-mg{
	margin-top:-15px;
}

/* Index home page - The padding around the product logos */
.product-logo{
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.paycover-index-logo{
	width:75%;
}
.uplus-index-logo{
	width:55%;
}
.wagecare-index-logo{
	width:80%;
}
.wageguard-index-logo{
	width:85%;
}

/* Home page - The rectangle arrows with the Income protection products */
.arrow-button-mg{
	margin-top:5px;
}

.arrow-button {
    position: relative;
    width: 260px;
    height: 60px;
    background-color: #000000;
}

.arrow-button:before, .arrow-button:after {
    content:" ";
    position: absolute;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}
.arrow-button:before {
    left: 100%;
    border-left: 20px solid #000000;
}
.arrow-button:hover{
	background-color:#666666;
	cursor:pointer;
}
.arrow-button:hover::before{
	border-left: 20px solid #666666;
	cursor:pointer;
}

/* Home page - News & Insights article thumbnails */
.home-article{
	height:auto;
	background-color:#333333;
	border-left-width: 10px;
	border-left-color: #ffcb00;
	border-left-style: solid;
	color: #ffffff;
	padding: 1px 10px 25px 15px;
	font-family: Arial, Helvetica, 'sans-serif';
	font-size: 90%;
	-webkit-appearance: none;
   	-moz-appearance: none;
  	-ms-appearance: none;
   	-o-appearance: none;
    appearance: none;
	bottom:0;
	left:0;
	position:absolute;
	margin-left:10px;
	margin-bottom:10px;
}

/* Home page - article background images */
.home-article-img{
	height:255px;
	background-image: url('../../css/img_flowers.jpg');
	background-repeat:no-repeat;
    background-size: cover;
	position: relative;
}

/* All pages - Making the date and "read more" under each article a smaller font size */
.font-12{
	font-size:12px;
}

.font-18{
	font-size:18px;
}

.font-24{
	font-size:24px;
}

/* Note: The feedback form is not on the current site 16/04/2018 */
/* Home page - getting rid of bold text in Feedback form (on the numbers in the first question) */
.no-txt-weight{
	font-weight:100;
}

/*Home page - Feedback form div*/
.feedback-form{
	padding-left:30px;
}

/* Home page - Feedback form internal contents */
.feedback-form-internal{
	height:520px;
}


/*-----------------
	PARTNER PAGES
-------------------*/
/* Partner Profile page - Holds the heading, sub heading & top "Submit enquiry" button in the heading of the page */
.partner-hd-bg{
	padding:0px 20px 50px 40px;
	position:absolute;
	margin-top:50px;
}

/* Partner Welcome - Top Header background */
.partner-wel-hd-bg{
	position:absolute;
	margin-top:50px;
	padding:0px 20px 10px 40px;
}

/* Partner Welcome page - Heading size */
.shout-out{
	font-size:270%;
	font-family: "adelle", Georgia, "serif";
}

/* Partner Profile - Increasing the margin of the fine print section (just above the form) */
.margin-top{
	margin-top:10px;
}

.lg-margin-top{
	margin-top:20px;
}

/* Partner Profile - Google map */		
.iframe-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.iframe-container {
  padding-bottom: 400px;
}
 
.iframe-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* To make Google map grayscale - partner profile page */
.iframe-container{
	-webkit-filter:grayscale(100%);
	filter:grayscale(100%);
}

/* Partner profile page - "Get in touch" */
	.address-map{
	padding: 0px 10px 20px 10px;
}

/* Partner Welcome - Coverforce video */
.cf-video {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.cf-video {
  padding-bottom: 340px;
}
 
.cf-video iframe {
  position: absolute;
  width: 50%;
  height: 100%;
}

/* Partner Profile page - social media icons */
.sm-social-icons{
	width:30px;
}

/* Partner Welcome page - To make gradient text */
	.gradient-text {
	color:rgba(255,203,16,1.0);
	background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #fff200), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
	background-image: gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
	-webkit-background-clip: text;
	background-clip: text;
	font-weight:bold;
}

/* Partner Profile - Carousel slider */
/* Partner Profile - Carousel images (If the partners want to show their clients) */
.client-logo{
	text-align:center;
	margin:0 auto;
}

.client-logo img{
	padding:20px;
}

/* Partner Profile - Padding for the text in "Key Contacts" Accordian dropdowns */
.aside-team-profile{
	padding:10px 6px 20px 6px;
	z-index:2;
}

/* Partner Welcome page - Indent for address on aside */
.indent{
	padding-left: 10px;
}

/* Partner Profile page - Coloured left borders for headings */
.yellow-border{
	border-left-color: #ffcb00;
	border-left-style: solid;
	border-left-width: 6px;
	padding-left:10px;
}
.passionfruit-border{
	border-left-color: #fbaf17;
	border-left-style: solid;
	border-left-width: 6px;
	padding-left:10px;	
}
.mango-border{
	border-left-color: #f7931d;
	border-left-style: solid;
	border-left-width: 6px;
	padding-left:10px;	
}

/* Partner Profile - Aside borders on each Key Contact div */
.border-btm {
   position: relative;
   text-align: left;
}

.border-btm::after {
    content:'';
    width:100%;
    position: absolute;
    left:0;
    bottom:-1px;
    height: 6px;
    background-color: #ffcb00;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #fff200), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: -webkit-linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: -moz-linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: -ms-linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: -o-linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
}

/* ---------------------
		BOARD PAGE
------------------------ */
/* New board page */
.board-thumbnails{
	height:200px;
	background-image: url('../../css/img_flowers.jpg');
    background-size: cover;
	background-repeat: no-repeat;
}

/* Makes the board member image stay exactly below heading */
.board-member{
	margin-bottom:-10px;
}

/* Board members name, title and their bio */
.board-name{
	margin-bottom:5px;
	margin-top:15px;
	padding-left:15px;
	padding-top:10px;
	color:#ffffff;
}
.board-title{
	margin-top:5px;
	padding-bottom:10px;
	padding-left:15px;
	font-size:16px;
	font-family: Arial, Helvetica, 'sans-serif';
	color:#ffffff;
}
.board-bio{
	height:250px;
}

.gr-left-border-sm{
	border-left-width: 8px;
    border-left-style: solid;
	border-left-color:#ffcb00;
	border-left-color: rgba(255,203,16,1.0);
    -webkit-border-image: 
      -webkit-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    border-image:
      linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
}

/* --------------------
	MANAGEMENT TEAM
---------------------- */
/* Management Team page - This makes the dropdown just slide down with ease */
.management-dropdown{
	transition: all ease 1s;
}

/* Class on the popup bio part - gives it a left hand gradient */
.bio-gradient{
border-left-width: 8px;
    border-left-style: solid;
	border-left-color:#ffcb00;
	border-left-color: rgba(255,203,16,1.0);
    -webkit-border-image: 
      -webkit-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
    border-image:
      linear-gradient(linear, 1 100%, 0 0, from(#f7931d), to(#ffcb04)) 1 100%;
}

/*Management Team page - Staff images*/
.management-thumbnail{
	border-right-width:10px;
	border-right-style:solid;
	border-right-color:#ffffff;
	margin-bottom:10px;
	height:200px;
	background-position: left bottom;
	background-size: cover;
	/*background-size:contain;*/
	background-color: #000000;
	background-repeat:no-repeat;
	
}

.management-dropdown{
	padding:10px 6px 20px 6px;
	z-index:1;
}

/* Partner Page - Staff images */
.team-thumbnail{
	height:180px;
	background-image: url('../../css/img_flowers.jpg');
    background-size: cover;
	position: relative;
	margin-bottom: 10px;
}

/* Management Team - Pop up content */
.bio-content{
	padding:20px;
	height:380px;	
}

/* Management Team - Pop up image */
.bio-img{
	height:250px;
	width:400px;
    background-size: cover;
	position: relative;
	background-repeat:no-repeat;
	background-color:#000000;
}

/* Makes the bio scroll if the text overflows */
.scroll{
	overflow:auto;
	height:260px;
	padding-right:15px;
}

/* Board Members page - Makes bio scroll if the text overflows */
.scroll-board-bios{
	overflow:auto;
	height:200px;
	padding:15px;
}

/* Close button on the pop up */
.close-button{
	z-index:1000;
	float:right;
	color:#000000;
	top:0;
	right:0;
	margin-right:25px;
	position:absolute;
	margin-top:18px;
	font-size:16px;
	font-family:Arial, Helvetica, 'sans-serif';
}

.close-button:hover{
	color:#ffcb00;
}

.transparent-bg{
	background-color:rgba(255,255,255,0.00);
}

/* Contact us page - close button on the accordian dropdown */
.contact-close-button{
	z-index:1000;
	float:right;
	color:#ffffff;
	padding:5px 8px 5px 8px;
	background-color:#000000;
	top:0;
	right:0;
	margin-right:-7px;
	position:absolute;
	margin-top:5px;
	font-size:16px;
	font-family:Arial, Helvetica, 'sans-serif';
}

.contact-close-button:hover{
	color:#ffcb00;
	text-decoration: none;
}


/* Management team - Name and title on the pop up modal */
.popup-name{
	margin-top:0px;
	margin-bottom:5px;
	color:#000000;
}

.popup-title{
	font-size:16px;
	margin-bottom:15px;
	font-family: Arial, Helvetica, 'sans-serif';
	color:#000000;
	font-weight: bold;
}

/* Management team - social icons on the pop up modal*/
.management-social-icons{
	height:30px;
	padding-top:1px;
	padding-bottom:2px;
}

/* --- Staff captions for Management Team and Partner pgs --- */
.team-caption{
	bottom:0;
	right:0;
	position:absolute;
	margin-right:10px;
	margin-bottom:15px;
	margin-left:5px;
	text-align:right;
	padding:5px 10px 10px 10px;
}

/* Gives the transparent box behind their names and titles */
.black-transparent-bg{
	background-color: rgba(0,0,0,0.4)
}

.white-transparent-bg{
	background-color:rgba(255,255,255,0.4);
}

.team-name{
	margin-top:4px;
	margin-bottom:4px;
	color:#ffffff;
}

.team-title{
	font-size:12px;
	margin-top:4px;
	margin-bottom:4px;
	font-family: Arial, Helvetica, 'sans-serif';
	color:#ffffff;
}

/* The read more button */
.team-button{
	font-size:12px;
	border:solid 1px #ffffff;
	padding: 2px 5px;
	font-family: Arial, Helvetica, 'sans-serif';
}

/* ------------------------------------
	About Us and Why Choose CF page
-------------------------------------- */
/* About Us - Makes the first word yellow */
span.first-word{
  color: #ffcb00;
  }

/* About Us - Styling for the horizontal line */
hr{
	width:350px;
	height:1px;
	background-color:#000000;
	float: left;
	margin-right:420px;
	margin-top:-1px;
	margin-bottom:6px;
	border:none;
}

/* About Us - Value icons */
.value-icon{
	max-width: 90px;
	max-height:90px;
	padding-top:8px;
}

/* All pages - For text that needs to be aligned right */
.align-right{
	text-align:right;
}

/* About Us - Styles for timeline */
.timeline {
  line-height: 1.4em;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
  line-height: inherit;
}

.timeline-title{
	font-size:18px;
}

/* About Us - Timeline item */
.timeline-item {
  padding-left: 40px;
  position: relative;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* About Us - Timeline info */
.timeline-info {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0 0 .5em 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* About Us - Timeline yellow circles */
.timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
}

/* About Us - Timeline yellow circles */
.timeline-marker:before {
  background: #fbaf17; /* passionfruit */
  border: 3px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  height: 15px;
  position: absolute;
  top: 1px;
  left: 0;
  width: 15px;
  -webkit-transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}

/* About Us - Timeline grey vertical line */
.timeline-marker:after {
  content: "";
  width: 3px;
  background: #cccccc;
  display: block;
  position: absolute;
  top: 19px;
  bottom: 3px;
  left: 6px;
}

.timeline-item:last-child .timeline-marker:after {
  content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
  background: transparent;
  border: 2px solid #fbaf17;
}

/* About Us - Timeline content */
.timeline-content {
  padding-bottom: 40px;
}

.timeline-content p:last-child {
  margin-bottom: 0;
}

/* About Us - Timeline period */
.period {
  padding: 0;
}

.period .timeline-info {
  display: none;
}

.period .timeline-marker:before {
  background: transparent;
  content: "";
  width: 15px;
  height: auto;
  border: none;
  border-radius: 0;
  top: 0;
  bottom: 30px;
  position: absolute;
  border-top: 3px solid #cccccc;
  
}

.period .timeline-marker:after {
  content: "";
  height: 32px;
  top: auto;
}

.period .timeline-content {
  padding: 40px 0 70px;
}

.period .timeline-title {
  margin: 0;
}

.marker-outline .timeline-marker:before {
  background: transparent;
  border-color: #FF6B6B;
}

.marker-outline .timeline-item:hover .timeline-marker:before {
  background: #FF6B6B;
}

/* Why Choose Coverforce page - Table icons */
.why-cf-table {
  display: table;
	-webkit-appearance: none;
   	-moz-appearance: none;
  	-ms-appearance: none;
   	-o-appearance: none;
    appearance: none;
}

.why-cf-table { 
  display: table-row;
}

.why-cf-table { 
  display: table-cell;
 	padding-right:5px;
	padding-left:5px;
	text-align:center;
}

/* Taking out the table border*/
.why-cf-table,
.why-cf-table div span {
  border: 0px solid #333333;  
}

/* Why Choose Coverforce - Icons */
.why-cf-icons{
	text-align:center;
	width:80px;
	padding: 15px 0px;
}

/* Why Choose Coverforce - icon captions */
.why-cf-cptn{
	text-align:center;
	font-size:14px;
	padding-left:45px;
	padding-right:45px;
	padding-bottom: 20px;
}


/* -----------------------
	News and Insights
------------------------- */
/* News and Articles page - This is the filter category list at the top of the articles that only appears on phone size (xs) because the icons don't fit on that size */
.news-filters-xs{
		display:none;
}


/* News and Article page - Heading content */
.internal-header-content-news{
	position: absolute;
	margin-top: 50px;
	height: 100px;
}

/* Header image on the News and Articles Page */
.news-header-img{
	height:440px;
	float:right;
	background:cover;
}

/* News and Articles Page - Header grey bg colour on the */
.news-header-bg{
	background-color:#333333;
	height:200px;
}



/* News and Article page - Styling for body article grey square (with left yellow border) */
.article-container {
  	position: relative;
  	margin-top: 50px;
	background-color:rgba(51,51,51,0.80);
	border-left-width: 15px;
	border-left-color: #ffcb00;
	border-left-style: solid;
	color: #ffffff;
	bottom: 0;
  	left: 0;
	margin-bottom:15px;
	margin-left:15px;
	padding-left: 25px;
	padding-right:15px;
	font-family: Arial, Helvetica, 'sans-serif';
/*font-size: 110%; changedtoday*/
	-webkit-appearance: none;
   	-moz-appearance: none;
  	-ms-appearance: none;
   	-o-appearance: none;
    appearance: none;
}

/* News and Articles page - The darker overlay that appears when hovering over the article box */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	transition: background 0.5s ease;
}

.article-container:hover .overlay {
	display: block;
	background: rgba(0, 0, 0, .3);
	display:inline-block;
}

/* News and Articles page - The headings of the body articles */
.ntitle {
	position: absolute;
	width: 100%;
	padding-left: 5px;
	padding-right:20px;
	top: 10px;
	font-family:Adelle, Georgia, serif;
	font-size:150%;
	text-align: left;
	color: white;
	z-index: 1;
	transition: top .5s ease;

}

/* News and Articles page - The subheadings of the body articles (Article Posted | October, 2017) */
.nsub-title {
	position: absolute;
	width: 100%;
	padding-left: 5px;
	padding-right:10px;
	font-size: 12px;
	font-weight:lighter;
	text-align: left;
	color: white;
	z-index: 1;
	transition: top .5s ease;
}


/* News and Articles page - The styling for the body articles buttons */
.button {
	position: absolute;
	font-size:15px;
	width: 500px;
	margin-left:5px;
	margin-bottom: 10px;
	top: 150px;
	text-align: left;
	opacity: 0;
	transition: opacity .35s ease;
}

.button a {
	width: 200px;
	padding: 5px 20px;
	text-align: center;
	color: white;
	border: solid 1px white;
	z-index: 1;
}

.button a:hover{
	color:#e91c2a;
	border: solid 1px #e91c2a;
	text-decoration:none;
}

.article-container:hover .button {
 	opacity: 1;
}

/* External container of all the news articles */
.news-container{
	padding:8px;
}

/* Background images for articles */
.article-imgs{
	max-width:100%;
	background-repeat:no-repeat;
    background-size: cover;
	border-width:8px;
	border-color:white;
	border-style: solid;
}

/*All pages*/
.italic{
	font-style:italic;
}

/* SINGLE ARTICLE PAGE */

.single-article-contr:before{
    content:" ";
    display:block;
    width:100%;
    height: 6px;
    background-image:url(../../images/gradient-band-2.png);
    position:absolute;
    left:0px;
	z-index: 1000;
}

.article-header{
	height:400px;
	padding-right:20px;
}

.article-hero{
	height:400px;
	float:right;
	background-repeat: no-repeat;
	background-position:left;
	background-size:cover;
}

/* --------------------
	CONTACT US PAGE
---------------------- */
/* State anchor buttons */
.state-loc{
	padding:10px;
	margin-right:10px;
	margin-bottom: 10px;
}

/* Colour key for each state - divides Coverforce Offices and Partners */
.contact-key{
	height:20px;
	width:20px;
	display:inline-block;
}
.contact-key-title{
	display:inline-block;
	padding-left:10px;
	margin-right:20px;
}

/* Contains the contact details on each of the office dropdowns */
.contact-dropdown{
	padding-left:30px;
}

/* This is the "visit office website" button at the bottom of the drop down */
.visit-office{
	height:40px;
}

/* Gives the "visit office website some top margin" */
.visit-office-link{
	margin-top:10px;
}

/* The is the height for each contact panel (the accordian panels before they're opened) */
.contact-container-div{
	height:auto;
}

/* This is the map pin that sits in the gradiating states buttons */
.map-pin{
	height:44px;
	width:29px;
	background-size:contain;
	background-repeat:no-repeat;
	display:inline-block;
}


/* Contact us page - Styling the iframe maps that sit in the dropdowns */
.iframe-contact-us {
  	position: relative;
  	height: 0;
  	overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.iframe-contact-us {
  	padding-bottom:400px;
}
 
.iframe-contact-us iframe {
  	position: absolute;
  	top:0;
  	left: 0;
  	width: 100%;
  	height: 100%;
	background-image:cover;
	border:none;
}

/* Contact us page - To make Google map grayscale - partner profile page */
.iframe-contact-us{
	-webkit-filter:grayscale(100%);
	filter:grayscale(100%);
}
/* Contact us page - The black/grey strips that hold each office's/partner's details */
.cf-contacts{
	padding:10px;
	background-size:contain;
	background-position: right -50px bottom -50px;
	background-repeat:no-repeat;
	height:80px;
}


.contact-details-glyphs{
	font-size: 150%;
	display: inline-block;
	position: relative;
	float: left;
	padding-right: 10px;
	margin-top: 0px;
	margin-left:-10px;
	margin-bottom:5px;
}


/* Contact us page - Styling the different city addresses/phone numbers etc and the bottom*/
.contact-phone{
	font-size: 120%;
	font-family: "adelle", Georgia, "serif";
	float:right;
}

.contact-address{
	margin-top:10px;
}

.contact-city{
	float:right;
	bottom:0;
	right:0;
	margin-right:10px;
	margin-top:18px;
	margin-bottom:0px;
	display:inline-block;
	font-size: 140%;
	font-family: "adelle", Georgia, "serif";
}


.sit-properly{
	margin-left: -15px;
	margin-right: -15px;
	background-repeat: no-repeat;
	background-size: cover;
	}

.dropdown-menu {
	min-width: 100%;
	position: absolute;
	left: 50% !important;
	right: auto !important;
	text-align: left !important;
	/*testing transform: translate(-50%, 0) !important;*/ 
}

.index-dropdown {
	min-width: 100%;
}


/* controls the width of the drop down menu*/
.multi-column {
	width: 800px;
	position: absolute;	
}

.about {
	width: 400px;
	position: absolute;	
}

.multi-column li{
	list-style: none;
	padding: 15px 0px;
}

.divided:before {
	content : "";
	position: absolute;
	left    : 0;
	bottom  : 0;
	height  : 1px;
	width   : 90%;  /* or 100px */
	border-bottom:1px solid #CCCCCC;
}
.multi-column li a{
	color: rgba(0,0,0,1.00)	;
	text-decoration: none;
}

.multi-column li a:hover{
	color: 
#e91c2a;
}

.navspace{
	height: 12px;
	margin-bottom: 0px;
}

.dropdown-background{
	background-color: rgba(255,255,255,0.93);
	margin: 0px;
	padding-bottom: 15px;
	border-bottom: 4px;
	border-bottom-color: #000000;
	padding-left: 10px;
}

/*multi column dropdown styling end*/


img{ 
	max-width: 100%;
	height: auto;
}

/*phone icon for footer*/
.callicon{
	background-image: url(../../images/icons/phone_icon.png);
	background-repeat: no-repeat;
	background-position: top left;
	min-height: 56px;		
}

/*separates phone number from phone icon*/
.call{
	margin-left: 35px;
	padding: 0px;
	border: 0px;
}

.social-icons{
	margin-bottom: 10px;
	margin-bottom: 5px;
	margin-right: 5px;
	margin-left: 5px;
}
.yellow{
	color: #FFCB03;
}
.mango{
	color:#f7931d;
}
.wgred{
	color: #e91c2a;
}

.passionfruit{
	color:#fbaf17;
}
.grey{
	color:#666666;
}
.adelle-lt{
	font-family: "adelle", Georgia, "serif";
	font-weight: 300;
	
}

.adelle-sb{
	font-family: "adelle", Georgia, "serif";
	font-weight: 600;
}

.white{
	color: #FFFFFF;
}

.black{
	color:#000000;
}
.nav-intro{
	background: #CCCCCC;
}

.internal-body-content{
	margin-top: 10px;
	margin-bottom: 20px;	
}

.internal-header:before{
    content:" ";
    display:block;
    width:100%;
    height: 6px;
    background-image:url(https://www.coverforce.com.au/wageguard/images/gradient-band-wg.png);
    position:absolute;
    left:0px;
}

.group-ins-header:before{
	content:" ";
    display:block;
    width:100%;
    height: 6px;
    background-image:url(https://www.coverforce.com.au/wageguard/images/gradient-band-wg.png);
    position:absolute;
    left:0px;
}

.top-row{
    width:100%;
    height: 10px;
    background-image:url(../../images/drop-shadow.png);
	background-repeat: repeat-x;
    left:0px;
	position: absolute;
	z-index: 100;
}

.top-row-black{
    width:100%;
    height: 10px;
    background-image:url(../../images/drop-shadow-dark.png);
	background-repeat: repeat-x;
    left:0px;
	position: absolute;
	z-index: 100;
}

/* Background colours */
.grey8bg{
	background-color: #bfbfbf;
}
.grey0bg{
	background-color: #999999;
}
.grey01bg{
	background-color: #d3d3d3;
}
.grey02bg{
	background-color: #9f9f9f;
}
.grey03bg{
	background-color: #cccccc;
}
.grey1bg{
	background-color: #EEEEEE;
}
.grey2bg{
	background-color: #DDDDDD;
}
.grey3bg{
	background-color: #666666;
	color:#ffffff;
}
.grey4bg{
	background-color: #333333;
	color: #ffffff;	
}
.grey5bg{
	background-color: #222222;
	color: #ffffff;
}
.grey6bg{
	background-color: #121212;
	color: #ffffff;
}
.whitebg{
	background-color: #FFFFFF;
}
.blackbg{
	background-color: #000000;
	color: #ffffff;
}
.darkbg{
	background-color:#201F1D;
	color: #ffffff;
}
.yellowbg{
	background-color: #FFCB00;
}

/* For the index home page - top hero opacity panels */
.black-bg-80{
	background-color:#000000;
	opacity:0.8;
}
.black-bg-70{
	background-color:#000000;
	opacity:0.7;
}
.black-bg-60{
	background-color:#000000;
	opacity:0.6;
}

.grey4-bg-80{
	background-color:#333333;
	opacity:0.8;
}
.grey4-bg-70{
	background-color:#333333;
	opacity:0.7;
}
.grey4-bg-60{
	background-color:#333333;
	opacity:0.6;
}

.white-bg-80{
	background-color:#ffffff;
	opacity:0.8;
}
.white-bg-70{
	background-color:#ffffff;
	opacity:0.7;
}
.white-bg-60{
	background-color:#ffffff;
	opacity:0.6;
}

.yellow-bg-80{
	background-color:#ffcb00;
	opacity:0.8;
}
.yellow-bg-70{
	background-color:#ffcb00;
	opacity:0.7;
}
.yellow-bg-60{
	background-color:#ffcb00;
	opacity:0.6;
}


.gradient1bg{
	background-color:#ffcb00;
}
.gradient2bg{
	background-color:#fdbd0b;
}
.gradient3bg{
	background-color:#fcb70e;
}
.gradient4bg{
	background-color:#fbb011;
}
.gradient5bg{
	background-color:#faa915;
}
.gradient6bg{
	background-color:#f9a218;
}
.gradient7bg{
	background-color:#f89b1b;
}
.gradient8bg{
	background-color:#f7931d;
}

/* Gives bottom spacing to divs/p tags etc */
.s-space{
	margin-bottom:20px;
}

.m-space{
	margin-bottom:40px;
}

.l-space{
	margin-bottom:60px;
}


/* If text needs to be bolded */
.font-weight{
	font-weight:600;
	display:inline-block;
}

.internal-header-content{
	position: absolute;
	margin-top: 50px;
	height: auto;
	padding-bottom: 20px;
	background-color:rgba(0,0,0,0.6);
}

/*For internal header text where no transparent background is required*/
.internal-header-content-nobg{
	position: absolute;
	margin-top: 50px;
	height: auto;
	padding-bottom: 20px;
}

.article-header{
	position: absolute;
	margin-top: 50px;
	height: auto;
	padding-bottom: 20px;
}

.internal-header, .group-ins-header{
	width: 100%;
    height: 400px;
    background-size: cover;
	position: relative;
}

/*Two colour orange button*/
/*button.quote-btn{
    color:#000000;
    text-align:left;
    font-family: Arial;
    font-size: 100%;
    background:rgb(247, 148, 30);
    margin-top: 10px;
	padding:10px 60px 10px 20px;
     
    border:0;
    position:relative;
    overflow:hidden;
}
button.quote-btn:after{
    background: #f9af56;
    padding:11px;
	font-family: "Glyphicons Halflings";
    content:"\e258";
    position:absolute;
    right:0;
    top:0;
}
.quote-btn:hover{
    border: none;
    background-color: #232323;
    color:#ffffff;
}*/

.dropdown-btn{
    color:#e91c2a;
    text-align:left;
    font-family: Arial;
    font-size: 100%;
    background:#000000;
	padding:10px 60px 10px 20px;
	/* Don't change anything below here */
    border:0;
    position:relative;
    overflow:hidden;
}
.dropdown-btn:after{
    background: #333333;
    padding:8px;
	font-family: "Glyphicons Halflings";
    content:"\e252";
    position:absolute;
	color:#e91c2a;
    right:0;
    top:0;
	
}
.dropdown-btn:hover{
    border: none;
    background-color: #666666;
    color:#ffffff;
	cursor:pointer;
	text-decoration: none;
}

.home-dropdown-btn{
    color:#e91c2a;
    text-align:left;
    font-family: Arial;
    font-size: 100%;
    background:#000000;
	padding:10px 60px 10px 20px;
	/* Don't change anything below here */
    border:0;
    position:relative;
    overflow:hidden;
}
.home-dropdown-btn:after{
    background: #222222;
    padding:8px;
	font-family: "Glyphicons Halflings";
    content:"\e252";
    position:absolute;
	color:#ffcb00;
    right:0;
    top:0;
	
}
.home-dropdown-btn:hover{
    border: none;
    background-color: #666666;
    color:#ffffff;
	cursor:pointer;
	text-decoration: none;
}

.index-dark-btn{
    color:#e91c2a;
    text-align:left;
    font-family: Arial;
    font-size: 100%;
    background:#000000;
	padding:10px 60px 10px 20px;
	/* Don't change anything below here */
    border:0;
    position:relative;
    overflow:hidden;
}
.index-dark-btn:after{
    background: #222222;
    padding:8px;
	font-family: "Glyphicons Halflings";
    content:"\e250";
    position:absolute;
	color:#e91c2a;
    right:0;
    top:0;
	
}
.index-dark-btn:hover{
    border: none;
    background-color: #666666;
    color:#ffffff;
	cursor:pointer;
	text-decoration: none;
}



.quote-btn{
    color:#000000;
    text-align:left;
    font-family: Arial;
    font-size: 100%;
    background:rgb(247, 148, 30);
	padding:10px 60px 10px 20px;
	/* Don't change anything below here */
    border:0;
    position:relative;
    overflow:hidden;
}
.quote-btn:after{
    background: #f9af56; /* This is CF Mango at 75% */
    padding:8px;
	font-family: "Glyphicons Halflings";
    content:"\e250";
    position:absolute;
    right:0;
    top:0;
	
}
.quote-btn:hover{
    border: none;
    background-color: #232323;
    color:#ffffff;
	cursor:pointer;
	text-decoration: none;
}


.quote-btn-ylw{
    color:#000000;
    text-align:left;
    font-family: Arial;
    font-size: 100%;
    background:#ffcb00;
	padding:10px 60px 10px 20px;
	/* Don't change anything below here */
    border:0;
    position:relative;
    overflow:hidden;
}

.quote-btn-ylw:after{
    background: #ffd942; /* This is CF Yellow at 75% */
    padding:8px;
	font-family: "Glyphicons Halflings";
    content:"\e250";
    position:absolute;
    right:0;
    top:0;
	
}
.quote-btn-ylw:hover{
    border: none;
    background-color: #232323;
    color:#ffffff;
	cursor:pointer;
	text-decoration: none;
}

.advert-btn{
    color:#000000;
    text-align:left;
    font-family: Arial;
    font-size: 100%;
    background:#ffcb00;
	padding:10px 35px 10px 20px;
    /* Don't change anything below here */
    border:0;
    position:relative;
    overflow:hidden;
	margin-top: 10px;
}

.aside-btn{
    color:#000000;
    text-align:left;
    font-family: Arial;
    font-size: 100%;
    background:rgb(247, 148, 30);
	padding:10px 35px 10px 20px;
    /* Don't change anything below here */
    border:0;
    position:relative;
    overflow:hidden;
	margin-top: 10px;
}

.aside-btn:after{
    background: #f9af56;
	padding: 8px;
	vertical-align: middle;
	font-family: "Glyphicons Halflings";
    content:"\e250";
    position:absolute;
    right:0;
    top:0;
	height: 100%;
		
}
.aside-btn:hover{
    border: none;
    background-color: #232323;
    color:#ffffff;
	cursor:pointer;
	text-decoration: none;
}

.advert-btn:hover{
    border: none;
    background-color: #232323;
    color:#ffffff;
	cursor:pointer;
	text-decoration: none;
}
 /* Carousel for footer logos */
.carousel-inner.onebyone-carosel { margin: auto; width: 90%;}
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }

.well-footer {
}

	h4,
	.h4{
	font-size: 130%;
	font-family: "adelle", Georgia, "serif";
	line-height: 1.3;
	padding-bottom: 10px;
		font-weight: 600;

}

@media (max-width: 576px){
	
	.bannerheader{
		font-size: 180%;
		font-weight: 500;
	}
	
	
.wageguard-logo{
	width:85%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
	
	
		/* News and Article page - Styling for body article grey square (with left yellow border) 576MAX */
.article-container{
  	width:230px;
	height: 180px;
	bottom: 5;
  	left: 0;
	padding-left: 0px;
	padding-bottom: 10px;
	margin-bottom:10px;
	margin-left:10px;
	
	}
	
/* News and Article page - The headings of the body articles 576MAX*/
.ntitle{
	font-size: 20px;
	top:0px;
	padding-left: 5px;
	padding-right: 20px;
}

/* News and Article page - The subheadings of the body articles (Article Posted | October, 2017) 576MAX */
.nsub-title{
	font-size: 11px;
  	top: 115px;
	padding-left:5px;	
	padding-right:20px;
}

/* News and Article page - The position of the article heading on hover 576MAX*/
.article-container:hover .ntitle {
	top: -10px;
}
	
/* News and Article page - The position of the article sub-heading on hover 576MAX*/
.article-container:hover .nsub-title {
	top: 105px;
}
	
/* News and Article page - The styling for the body articles buttons 576MAX*/
.button {
  	top: 140px;
	padding-left: 5px;
  	}	
	
	/* makes table fonts smaller so dense table is able to be read on phones (otherwise it goes off the screen)*/	
	
	.tablecov1{
	font-size: 8px; 
}
	/* styles the length of the descriptions of the supported organisations on the community page*/	
	
	.org-desc{
	
	height: 150px;
	overflow: hidden;
}
/* This allows a div to only sit properly on a phone size - usually used on the second column of a list so that it sits directly underneath the first column on an xs screen (otherwise it would have a slight indent/left margin).
If normal sit properly was used... from md screen and above, sometimes the right column overlaps with the left column because the left margin has been minused.
See Construction page - Speciality services column for an example (class has been used on this div) */
	.home-internal-bg{
	padding: 10px 20px 20px 20px;
		margin-left: -15px;
		background-position: 30px 350px;
	background-size: 180px;

}
	
/* Form success message */
.success-message{
	padding:10px 10px 20px 10px;
	margin-top:40px;
}

/* Home page - The rectangle arrows with the Income protection products */
.arrow-button {
    width: 270px;
    height: 60px;
}	
	
/* The is the height for each contact panel (the accordian panels before they're opened) */
.contact-container-div{
	height:180px;
}
		
/* Contains the contact details on each of the office dropdowns */
.contact-dropdown{
	padding-bottom:10px;
}
	
.home-header-band{
		width:25px;
	}	
	
.sit-properly-xs{
	margin-left: -15px;
	margin-right: -15px;
}
	
.paycover-logo{
	width:70%;
}

.uplus-logo{
	width:50%;
}

.wagecare-logo{
	width:75%;
}
	

	
/* Home page - Industry circles */
	.img-circle{
	text-align:center;
	width:40%;
}

/* When you have a list - This zeros out the top ul margin from md and below - It is to go on the 2nd column of a (large screen) three column list */
.no-top-ul-mg-xs{
	margin-top:-20px;		
}

/* When you have a list - This zeros out the top ul margin from md and below - It's obviously minuses more of a margin */
.no-top-ul-mg-md{
	margin-top:-20px;
}
	
.group-ins-header{
		height:440px;
	}

.group-ins-header-content{
	padding-top:auto;
	padding-bottom:auto;
	height:400px;
	margin-top:6px;	
}	

.left-border-black{
	float:left;
	border-left-color:none;
	border-left-width:none;
	border-left-style:none;
	padding-left:10px;
}

/* Sub site - removes breadcrumb heading on phone size */
.breadcrumb-heading-black{
	display:none;
	}
	
	
.aside-products{
		margin-top:200px;
}
	
.management-thumbnail{	
	background-size: contain;
	height: 150px;
}
		
	
/* Board Management page - On mobile screen, the bio of each board member sits too low without this style */
	.board-bio{
		margin-top:-19px;
}

/* Board Management page - Needs to be looked at. <p> and <ul> in the bios don't have the same top margin. In the copy, try and start each bio with a <p> tag to make it work. */
	.board-bio-internal{
		padding-top:15px;
}
	
/* Board Management page - Encompasses the staff member's name and title*/	
	.board-caption{
		margin-left:20px;
		margin-bottom:-80px;
}
	
/* News and Articles page - This is the filter category table at the top of the articles that disappears on phone size (xs) because the icons don't fit on that size */
	.table-xs{
		display:none;
}
	
/* This is to show the news filter list on a phone screen */
	.news-filters-xs{
		display:block;
		margin-bottom:20px;
		margin-top:-10px;
	}
	

	
.bio-gradient{
	border-left-width: 0px;
    border-left-style: none;
	border-left-color:none;
	}
	
.bio-header-gradient::after{
	content:" ";
    display:block;
    width:100%;
    height: 6px;
    background-image:url(../../images/gradient-band-2.png);
    position:absolute;
    left:0px;
	z-index:2;
	
/*
    content:'';
    width:100%;
    position: absolute;
    left:0;
    bottom:-1px;
    height: 6px;
    background-color: #ffcb00;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #fff200), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: -webkit-linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: -moz-linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: -ms-linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: -o-linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
    background: linear-gradient( linear, left top, right top, color-stop(0, #ffcb04), color-stop(0.15, #fdbd0b), color-stop(0.3, #fcb70e), color-stop(0.45, #fbb011), color-stop(0.6, #faa915),color-stop(0.75, #f9a218), color-stop(0.9, #f89b1b), color-stop(1, #f7931d) );
	
	*/
}
	
	
/* Home page - Feedback form internal contents */	
.feedback-form-internal{
		height:650px;
}
	
/* This is the top "Recommended Insurance Products" section in the Industry pages */
.industry-products-bg{
	height:390px;
	margin-top:210px;
}
	



/* Home page top Hero Image - More height than average page */
.home-internal-header{
	height:380px;
}

/* Sets the size, background and centres the industry icons on the home page */
.thumbnail{
	width:80%;
}
	
/* 2nd hero image on the home page */
.home-page-img{
	width: 100%;
    height: 710px;
	}

/* Home page - Coding for the white bg with arrow - hanging over 2nd hero image */
.arrow-div{
		height:445px;
}



/* To bring Income Protection products closer */
.minus-left-mg{
	margin-left:-10px;
	margin-top:-15px;
}
	
/* Partner Profile page - Top Header background */
.partner-wel-hd-bg{
	padding:0px 20px 0px 20px;
}
	
/* Partner Profile page - Top Header background */
.partner-hd-bg{
	padding:0px 20px 20px 20px;
}

/* Partner Welcome - Coverforce Video */
.cf-video iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 78%;
}

	
/* News and Article page - The headings of the hero article */
.hero-title{
	font-size:120%;
	top:10px;
	padding-right:30px;
	padding-left: 0px;
}

	
/* Why Choose Coverforce page - icon captions */
.why-cf-cptn{
	text-align:center;
	font-size:10px;
	padding-left:0px;
	padding-right:0px;
	padding-bottom: 20px;
}
	
/* News and Articles - Icon and icon captions table (under Filter by Category) */
#table-like {
  	display: none;
}
	
/* Form - The padding around the Request a free quote heading */
.form-display{
	padding-left:15px;
	padding-bottom:10px;
}
	
/* All pages - Column 1 (left) for 2 column table that you want to stack to one on a phone */
.col-3 {
    display: block;
    float: none;
}

/* Column 2 (right) for 2 column table that you want to stack to one on a phone */
.col-4 {
    height: 100%;
    display: block;
    float: none;	
}
	
/*Management Team page - Staff images*/
.management-thumbnail{
	border-right:none;
}
	
/* Group Insurance page - Caption for account executives */
.sm-team-caption{
	height:80px;
	margin-bottom:10px;
}
	
	
	}
@media (min-width:576px) and (max-width:767px){
	
	.bannerheader{
		font-size: 300%;
		font-weight: 600;
	}
	
	
.wageguard-logo{
	width:70%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
	
	
	
	/* styles the length of the descriptions of the supported organisations on the community page*/	
	
	.org-desc{
	
	height: 100px;
	overflow: hidden;
}
/* Group Insurance page - The franchise logo and copy directly underneath it (see LJ Hooker page for original example) */
.franchise{
 	margin: 0;
    position: absolute;
    top:50%;
    left: 22%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
		
	/* News and Article page - Styling for body article grey square (with left yellow border) 576-767 */
.article-container{
  	width:230px;
	height: 180px;
	bottom: 0;
  	left: 0;
	padding-left: 0px;
	padding-bottom: 10px;
	margin-bottom:10px;
	margin-left:10px;
	
	}
	
/* News and Article page - The headings of the body articles 576-767 */
.ntitle{
	font-size: 20px;
	top:0px;
	padding-left: 5px;
	padding-right: 20px;
}

/* News and Article page - The subheadings of the body articles (Article Posted | October, 2017) 576-767 */
.nsub-title{
	font-size: 11px;
  	top: 115px;
	padding-left:5px;	
	padding-right:20px;
}

/* News and Article page - The position of the article heading on hover 576-767*/
.article-container:hover .ntitle {
	top: -10px;
}
	
/* News and Article page - The position of the article sub-heading on hover 576-767*/
.article-container:hover .nsub-title {
	top: 105px;
}
	
/* News and Article page - The styling for the body articles buttons 576-767*/
.button {
  	top: 140px;
	padding-left: 5px;
  	}	


.home-header-band{
		width:35px;
	}	
	
	
}
@media (max-width: 767px){

	

	.gip-aside{
		display:none;
	}

	.hbcf-ad{
	/*height:250px;*/
}
	
/* The is the height for each contact panel (the accordian panels before they're opened) */
	
	.no-show-767{
		display: none;
	}	
.contact-container-div{
	height:115px;
}

	.home-internal-bg{
	padding: 10px 40px 20px 40px;
		margin-left: -15px;
		background-position: 30px 350px;
	background-size: 200px;

}
	
/* Partner Welcome page - Heading size */
.shout-out{
	font-size:150%;
	font-family: "adelle", Georgia, "serif";
}
	
.group-ins-header-content{	
	border-right-color:none;
	border-right-style:none;
	border-right-width:none;
}
	
/* The "business card" looking things on the contact us page */
.cf-contacts{
	height:260px;
}
	
/* Income Protection text that sits on the right of the image */
.ip-product-caption{
	padding-left:10px;
	padding-top:5px;
}
	
.paycover-logo{
	width:55%;
}

.uplus-logo{
	width:40%;
}
	
/* Group Income protection page - To go under Uplus introduction. Otherwise the other don't drop properly on Small screen. (The Uplus intro words are not as long as the PayCover) */
.spacer{
	height:0px;
	}
	
.wagecare-logo{
	width:60%;
}



/* Home page - Industry circles */
	.img-circle{
	text-align:center;
	width:60%;
}
	
	.article-header{
	z-index: 100;
	background-color:rgba(0,0,0,0.4)
		
	}

	

	

.scroll{
	height:260px;
}	

/* News and Article - The filter or sorting category needs this style so it's padding is the same as the divs surrounding it (on medium screen and below - after the offset is taken off) */
	.sortby{
		padding-left: 20px;
}
	
/* News and Article - Tis brings the icon table up a bit because it was sitting too low on this size screen (looks fine on larger size screens) */
	#table-like{
		margin-top: -20px;
	}
	
.popup-title{
	font-size:14px;
}
.board-title{
	font-size:14px;
}
	
/* 2nd hero image on the home page */	
.home-page-img{
	width: 100%;
    height: 520px;
}
	
/* Home page - Feedback form internal contents */
.feedback-form-internal{
	height:500px;
	padding-top:10px;
}
	.feedback-form{
	padding-left:15px;
}
	
/* This is the top "Recommended Insurance Products" section in the Industry pages */
.industry-products-bg{
	height:210px;
	margin-top:180px;
}

/* Home page top Hero Image - More height than average page */
.home-internal-header{
		height:300px;
}
	
	.dropdown-menu {
	max-width: 100%;
	position: absolute;
	left: 0px;
	right: 0px;
  	text-align: left;
  	transform: translate(0, 0) !important;
}
	/* Removes the white blurb under Product page headings for mobile as otherwise it's too long for header img */
	/*.product-intro{			
		display: none;
}	*/
	
	.callicon{
	background-image: url(https://www.coverforce.com.au/images/icons/phone_icon_padding.png);	
}	

.small-text{
		font-size:14px;
	}

/* Sets the size, background and centres the industry icons on the home page */
.thumbnail{
	width:80%;
	}

/* Home page - Coding for the white bg with arrow - hanging over 2nd hero image */
.arrow-div{
		height:520px;
}
	
/* Home page - The rectangle arrows with the Income protection products */
.arrow-button {
    width: 280px;
    height: 60px;
}	

/* Home page - The padding around the product logos */
.product-logo{
	padding-top:12px;
	padding-left:5px;
}
.product-logo-2{
	padding-top:8px;
	padding-left:5px;
}

/* Home page - top hero article background image */
.home-article-img{
	height:160px;
	
}

/* Home page - removing the right border as the news articles drop */
.remove-right-border-2{
	border-right:none;
	}
	
/* Home page - removing the right border as the news articles drop */
.remove-right-border-first{
	border-right:none;
	}
	
/* Partner Profile page - Top Header background */
.partner-hd-bg{
	padding:0px 0px 30px 30px;
}
	
/* Partner Welcome page - Top Header background */
.partner-wel-hd-bg{
	padding:0px 20px 0px 20px;
}
	
/* ---Staff captions for Management Team and Partner pgs--- */
.team-caption{
	bottom:0;
	right:0;
	position:absolute;
	margin-right:5px;
	margin-bottom:8px;
	text-align:right;
	padding:5px 10px 10px 10px;
	}

.team-name{
	font-size:14px;
}
	
.team-title{
	font-size:12px;
}
	
.team-button{
	font-size:12px;
	padding: 2px 5px;
}
	
/* These set the width of the form items that have a drop down option --------------Is this needed? Becuase it's set by a column */
.form-group .drop-down{
	width: 100%;
}
	
/* Management Team - Background grey box that holds management staff details */
.box{
	margin-right:-15px;	
}
	

	h3,
	.h3{
	font-size: 125%;
	font-family: "adelle", Georgia, "serif";
	/* Gradient is needed here*/
}
	
	h4,
	.h4{
	font-size: 115%;
}

/* Form - The padding around the Request a free quote heading */
.form-display{
	padding-left:30px;
	padding-bottom:10px;
}

/* The sub site union pages - makes the contact people sit next to each other. Without this class, they don't sit aligned properly on the left on small screen */
.sit-properly-sm{
	margin-left: -15px;
	margin-right: -15px;
}
	
	
}
@media screen and (min-width: 768px) {

.navbar-bootsnipp .navbar-nav > li > a {
	font-size: 15px;
	}

.navbar-bootsnipp .bootsnipp-search {
	background-color: rgb(235, 235, 235);
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	-o-transform: rotateX(-90deg);
	-ms-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 0 0 0;
	-moz-transform-origin: 0 0 0;
	-o-transform-origin: 0 0 0;
	-ms-transform-origin: 0 0 0;
	transform-origin: 0 0 0;
	visibility: hidden;
}
.navbar-bootsnipp .bootsnipp-search.open {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	visibility: visible;	
}
.navbar-bootsnipp .bootsnipp-search > .container {
		padding: 0px;    
}
	
/* multi column dropdown styling*/
/*controls the dropdown menu background position - the 50% thing makes the menu sit in the middle of its parent on the nav but this doesn't work well when hamburger on*/
}

@media (min-width: 768px) and (max-width: 1279px) {
	
.bannerheader{
		font-size: 250%;
		font-weight: 600;
	}
	
	
.wageguard-logo{
	width:85%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
	
			
	/* News and Article page - Styling for body article grey square (with left yellow border) 768-1279 */
.article-container{
  	width:215px;
	height: 180px;
	bottom: 0;
  	left: 0;
	padding-left: 0px;
	padding-bottom: 10px;
	margin-bottom:10px;
	margin-left:10px;
	
	}
	
/* News and Article page - The headings of the body articles 768-1279 */
.ntitle{
	font-size: 18px;
	top:0px;
	padding-left: 5px;
	padding-right: 20px;
}

/* News and Article page - The subheadings of the body articles (Article Posted | October, 2017) 768-1279*/
.nsub-title{
	font-size: 11px;
  	top: 115px;
	padding-left:5px;	
	padding-right:20px;
}

/* News and Article page - The position of the article heading on hover 768-1279*/
.article-container:hover .ntitle {
	top: -10px;
}
	
/* News and Article page - The position of the article sub-heading on hover 768-1279*/
.article-container:hover .nsub-title {
	top: 105px;
}
	
/* News and Article page - The styling for the body articles buttons 768-1279*/
.button {
  	top: 140px;
	padding-left: 5px;
  	}	

	
	/* styles the length of the descriptions of the supported organisations on the community page*/	
	
	.org-desc{
	
	height: 200px;
	overflow: hidden;
}
	
	.navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
}
	/* Group Insurance page - The franchise logo and copy directly underneath it (see LJ Hooker page for original example) */
.franchise{
 	margin: 0;
    position: absolute;
    top:50%;
   left: 24%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

		.home-internal-bg{
	padding: 10px 20px 20px 20px;
		margin-left: -15px;
		background-position: 30px 350px;
	background-size: 250px;

}
	

}
@media (max-width: 1024px){
	
	
		/* styles the length of the descriptions of the supported organisations on the community page*/	
	.tablecov1{
		font-size: 10px;
	}
/* Group Income Protection page - Aside logos */
.aside-logo-size{
	width:90%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 49%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	
}
.ip-aside-logos{
	height:65px;
	position:relative;
	margin-bottom:5px;
}

.uplus-aside-logo{
	width:70%;
	left: 38%;
}

.wageguard-aside-logo{
	width:90%;
	left: 48%;
}


/* Group Income protection page - To go under Uplus introduction. Otherwise the other don't drop properly on Small screen. (The Uplus intro words are not as long as the PayCover) */
.spacer{
	height:40px;
}	

/* Home page - The rectangle arrows with the Income protection products */
.arrow-button{
	width:280px;
}
.product-logo{
	margin: 0;
    position: absolute;
    top: 42%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
.paycover-index-logo{
	width:70%;
}
.uplus-index-logo{
	width:50%;
}
.wagecare-index-logo{
	width:75%;
}
.wageguard-index-logo{
	width:80%;
}
	
/* The is the height for each contact panel (the accordian panels before they're opened) */
.contact-container-div{
	height:120px;
}
.whitebg-m{
	background-color:#ffffff;
}
.grey1bg-m{
	background-color:#eeeeee;
}
.grey4bg-m{
	background-color:#333333;
}
	
/* The "business card" looking things on the contact us page */
.cf-contacts{
	height:310px;
}	

	
/* Home page - Industry circles */
.img-circle{
	text-align:center;
	width:80%;
}

/* Group Insurance page - Caption for account executives */
.sm-team-caption{
	height:80px;
}
	
	
	
.scroll{
	height:250px;
}
	
/* Board Management page - Encompasses the staff member's name and title*/
	.board-caption{
		margin-left:20px;
		margin-bottom:-90px;
	}

/* Home page - Feedback form internal contents */	
.feedback-form-internal{
		height:675px;
	}
	
/* Sets the size, background and centres the industry icons on the home page */
.thumbnail{
	width:100%;
	}
.feedback-form{
	padding-left:0px;
}


/* This is the top "Recommended Insurance Products" section in the Industry pages */
.industry-products-bg{
	height:170px;
	margin-top:260px;
}


/* Partner Welcome page - Top Header background */
.partner-wel-hd-bg{
	position:absolute;
	margin-top:30px;
	padding:0px 20px 0px 20px;
}
	
/* Partner Profile page - Top Header background */
.partner-hd-bg{
	padding:10px 10px 30px 30px;
}
	
/* ---Staff captions for Management Team and Partner pgs--- */
.team-caption{
	bottom:0;
	right:0;
	position:absolute;
	margin-right:5px;
	margin-bottom:8px;
	margin-left:5px;
	text-align:right;
	padding:5px 10px 10px 10px;
}

.team-name{
	font-size:12px;
}
	
.team-title{
	font-size:11px;
}
	
.team-button{
	font-size:11px;
	padding: 2px 5px;
}
	
}
@media (max-width: 1279px){
	

/* Sub site - This styles the backgrounds of the side menu items */
.side-menu-item{
	background:#ffffff;
	/*padding:22px 10px 25px 20px;*/
	padding:15px 10px 15px 10px; 
	margin-bottom:-8px;
	cursor:pointer;
	font-size: 100%;
	font-family: Arial, Helvetica, 'sans-serif';
	line-height: 1.1;
}
	
/* Form success message */
.success-message{
	padding:10px 10px 20px 10px;
	margin-top:40px;
}
	
/* The sub site union pages - makes the contact people sit next to each other */
.sit-properly-sm{
	margin-left:30px;
}
	
/* The is the height for each contact panel (the accordian panels before they're opened) */
.contact-container-div{
	height:100px;
}
.contact-city{
	float:right;
	bottom:0;
	margin-right:10px;
	margin-bottom:0px;
	display:inline-block;
	font-size: 140%;
	font-family: "adelle", Georgia, "serif";
}
/* External container of all the news articles */
.news-container{
	padding-left:16px;
	padding-right:16px;
}
	
/* Partner Welcome page - Heading size */
.shout-out{
	font-size:180%;
	font-family: "adelle", Georgia, "serif";
}
	
/* Home page - Industry circles */
.img-circle{
	text-align:center;
	width:60%;
}

.img-circle:hover{
	border-width:2px;
	border-color:#ffcb00;
	border-style:solid;
	cursor:pointer;
}
	
.cf-about{
	padding:30px 20px 10px 20px;
}

.white-transparent-bg{
	margin-bottom:20px;	
}
	
/* When you have a list - This zeros out the top ul margin from md and below - It's obviously minuses more of a margin */
.no-top-ul-mg-md{
	margin-top:-30px;
}

/* When you have a list - This zeros out the top ul margin from md and below - It is to go on the last column of a (large screen) three column list */
.no-top-ul-mg-md-2{
	margin-top:-20px;	
}

	
	.left-border-black{
	padding-left:30px;
}
	
.scroll{
	height:270px;
}
	
.centerme {
    margin-top: 15vh;
   }		
/* All pages - Get rid of the padding on the container fluid when the screen drops below 1279px */
.container-fluid{
		padding-left:0px;
		padding-right:0px;
}
	
/* Defines the outside container elements of the slider */
.ac-container{
		margin-left:auto;
}

/* Home page - Second hero image */
.home-page-img{
	width: 100%;
    height: 450px;
}
	
/* Board Management page - Encompasses the staff member's name and title*/
.board-caption{
	margin-left:20px;
	margin-bottom:-80px;
}
	
/* News and Article - The filter or sorting category needs this style so it's padding is the same as the divs surrounding it (on medium screen and below - after the offset is taken off) */
	.sortby{
		padding-left: 20px;
	}
	
	
	.lb-content{	
		top:0;
		margin-left:0px;
		/*left: 50%;
		margin-right: -50%;*/
		transform: translate(-50%, -50%);
}
	
/* Home page - Feedback form internal contents */	
.feedback-form-internal{
		height:600px;
}
	
/* This is the top "Recommended Insurance Products" section in the Industry pages */
	.industry-products-bg{
	height:160px;
	margin-top:240px;
}
	


	
/* These are the download titles. They have also been used on other titles with icons with them. (Needs to be checked if this is needed in industry page icons */
.download-hd{
	margin-top:5px;
	margin-bottom:10px;
	margin-right:40px;
}

/* Home page top Hero Image - More height than average page */
.home-internal-header{
		height:350px;
}
.getout{
	display: none;
}


.internal-header, .group-ins-header{
	height: 300px;
    }
	
.article-hero{
		height:300px;
}
	
.internal-header-content{
	margin-top: 30px;
	}

.dropdown-menu {
	max-width: 100%;
	position: absolute;
	left: 0px;
  	right: 0px;
  	text-align: left;
  	transform: translate(0, 0) !important;
}
	
	
	h1,
	.h1{
		font-size: 200%;
}
	
	h2,
	.h2{
		font-size: 150%;
}
	
	h3,
	.h3{
		font-size: 135%;
		font-family: "adelle", Georgia, "serif";
		/* Gradient is needed here*/
}
	h4,
	.h4{
		font-size: 120%;

}
	
	.callicon{
	background-image: url(../../images/icons/phone_icon_padding.png)	
}

/* Sets the size, background and centres the industry icons on the home page */
.thumbnail{
	width:70%;
}

/* Home page - Coding for the white bg with arrow - hanging over 2nd hero image */
.arrow-div{
	height:450px;
}

/* Home page - removing the right border as the news articles drop */
.remove-right-border{
		border-right:none;
	}
	
/* Home page - removing the right border as the news articles drop */
.remove-right-border-first{
		border-right:none;
	}

/* Partner Profile page - Top Header background */
.partner-hd-bg{
	padding:10px 10px 40px 40px;
}

/* Partner Welcome page - Top Header background */
.partner-wel-hd-bg{
	position:absolute;
	margin-top:30px;
	padding:0px 20px 0px 20px;
}

/* Partner Welcome - Coverforce video */
.cf-video iframe {
  	position: absolute;
  	top:0;
  	left: 0;
  	width: 85%;
  	height: 95%;
}
	
/* ---Staff captions for Management Team and Partner pgs--- */
.team-caption{
	bottom:0;
	right:0;
	position:absolute;
	margin-right:5px;
	margin-bottom:10px;
	text-align:right;
	padding:5px 10px 10px 10px;
}

/* Management Team page - Staff images 
.team-thumbnail{
	margin-bottom:10px;
}*/
	
/* News and Article page - Background images for articles */
	.article-imgs{
	height:250px;
}
	
	
/* News and Article page - Styling for HERO article grey square (with left yellow border) */
	.hero-container {
	margin-top: 130px;
	width: 650px;
	height: 150px;
	position: relative;
  	bottom: 0;
  	left: 0; 
	margin-bottom:10px;
	margin-left:10px;
	padding-left:25px;
}
	
/* News and Article page - The headings of the hero article */
	.hero-title {
	padding-left: 0px;
	padding-right:20px;
  	top: 10px;
 }
	
/* News and Article page - The sub-headings of the hero article (Article Posted | October, 2017) */
	.hero-sub-title {
  	padding-left: 0px;
	padding-right:10px;
 	top: 70px;
}
	
/* News and Article page - The position of the hero article heading on hover */
	.hero-container:hover .hero-title {
  	top: 0px;
}
	

/* Partner Profile page - Aside - Takes off the second paragraph indent*/
.li-icon-indent{
	margin-left:0px;
	margin-top:-10px;
}
	
/* Partner Profile page - Aside - Reduces indent on the Address */
.lg-indent{
	margin-left:10px;
}

/* News and Articles - Icon and icon captions table (under Filter by Category) */
#table-like {
  display: table;
  width: 700px;
}

}

@media (min-width: 1280px) and (max-width:1919px){
	
	.bannerheader{
		font-size: 280%;
		font-weight: 600;
	}
	
	
.wageguard-logo{
	width:80%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
	
	
				
	/* News and Article page - Styling for body article grey square (with left yellow border) 1280-1920 */
.article-container{
  	width:215px;
	height: 180px;
	bottom: 0;
  	left: 0;
	padding-left: 0px;
	padding-bottom: 10px;
	margin-bottom:10px;
	margin-left:10px;
	
	}
	
/* News and Article page - The headings of the body articles 1280-1920 */
.ntitle{
	font-size: 18px;
	top:0px;
	padding-left: 5px;
	padding-right: 20px;
}

/* News and Article page - The subheadings of the body articles (Article Posted | October, 2017) 1280-1920 */
.nsub-title{
	font-size: 11px;
  	top: 115px;
	padding-left:5px;	
	padding-right:20px;
}

/* News and Article page - The position of the article heading on hover 1280-1920*/
.article-container:hover .ntitle {
	top: -10px;
}
	
/* News and Article page - The position of the article sub-heading on hover 1280-1920*/
.article-container:hover .nsub-title {
	top: 105px;
}
	
/* News and Article page - The styling for the body articles buttons 1280-1920*/
.button {
  	top: 140px;
	padding-left: 5px;
  	}	
	.home-internal-bg{
	padding: 10px 20px 20px 20px;
		margin-left: -15px;
		background-position: 30px 330px;
	background-size: 270px;

}

}
@media (min-width: 1280px) {
	
	
	.bannerheader{
		font-size: 300%;
		font-weight: 600;
	}
	
	
.wageguard-logo{
	width:80%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
	
	
	
  .timeline-centered,
  .timeline-centered .timeline-item,
  .timeline-centered .timeline-info,
  .timeline-centered .timeline-marker,
  .timeline-centered .timeline-content {
    display: block;
    margin: 0;
    padding: 0;
  }
  .timeline-centered .timeline-item {
    padding-bottom: 40px;
    overflow: hidden;
  }
  .timeline-centered .timeline-marker {
    position: absolute;
    left: 50%;
    margin-left: -7.5px;
  }
  .timeline-centered .timeline-info,
  .timeline-centered .timeline-content {
    width: 50%;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-info {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-content {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item.period .timeline-content {
    float: none;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .timeline-centered .timeline-item.period {
    padding: 50px 0 90px;
  }
  .timeline-centered .period .timeline-marker:after {
    height: 30px;
    bottom: 0;
    top: auto;
  }
  .timeline-centered .period .timeline-title {
    left: auto;
	  padding-top:10px;
  }
	/*extra added*/
	
	.timeline-item,
                .timeline-info,
                .timeline-marker,
                .timeline-content {
                    display: block;
                    margin: 0;
                    padding: 0;
                }
                .timeline-item {
                    padding-bottom: 40px;
                    overflow: hidden;
                }
                .timeline-marker {
                    position: absolute;
                    left: 50%;
                    margin-left: -7.5px;
                }
                .timeline-info,
                .timeline-content {
                    width: 50%;
                }
                 .timeline-item:nth-child(odd) .timeline-info {
                    float: left;
                    text-align: right;
                    padding-right: 30px;
                }
                .timeline-item:nth-child(odd) .timeline-content {
                    float: right;
                    text-align: left;
                    padding-left: 30px;
                }    
                 .timeline-item:nth-child(even) .timeline-info {
                    float: right;
                    text-align: left;
                    padding-left: 30px;
                }
                 .timeline-item:nth-child(even) .timeline-content {
                    float: left;
                    text-align: right;
                    padding-right: 30px;
                }
                 .timeline-item.period .timeline-content {
                    float: none;
                    padding: 0;
                    width: 100%;
                    text-align: center;
                }
                .timeline-item.period {
                    padding: 50px 0 90px;
                }
                .period .timeline-marker:after {
                    height: 30px;
                    bottom: 0;
                    top: auto;
                }
                .period .{
                    left: auto;
                }
/* Home page - removing the right border as the news articles drop */
.remove-right-border-first{
		border-right:none;
	}
	
/* Group Insurance page - The franchise logo and copy directly underneath it (see LJ Hooker page for original example) */
.franchise{
 	margin: 0;
    position: absolute;
    top:50%;
    left: 20%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
	
	.dropdown-menu{
		  	transform: translate(-50%, 0) !important;
		
}
	
}
@media (max-width: 1400px){
/* Group Insurance page - internal header */
.group-ins-header-content{
	margin-top:30px;
	
}
/* The is the height for each contact panel (the accordian panels before they're opened) */
.contact-container-div{
	height:95px;
}

.contact-city{
	margin-right:5px;
	font-size: 120%;

}

/* Industry page - This is the top "Recommended Insurance Products" section*/
.aside-products{
		margin-top:30px;
	}
	
.scroll{
	height:270px;
}
	
/* Board Management page - Encompasses the staff member's name and title*/
	.board-caption{
		margin-left:20px;
		margin-bottom:-90px;
	}
	
/* Home page - Getting rid of the animating circle and text because it doesn't fit properly */	
.animation-container{
		display:none;
	}
/* Home page - Feedback form internal contents */
.feedback-form-internal{
		height:520px;
	}
	
/* Home page top Hero Image - More height than average page */
.home-internal-header{
		height:440px;
	}

	
/* This is the top "Recommended Insurance Products" section in the Industry pages */
.industry-products-bg{
	height:344px;
	margin-top:6px;
}

.internal-header, .group-ins-header{
	height: 350px;
    }
	
	.article-hero{
		height:350px;
	}


.article-header{
	margin-top: 30px;
}
	
.internal-header-content{
	margin-top: 30px;
}
	h1,
	.h1{
		font-size: 300%;
}
	
	h2,
	.h2{
		font-size: 150%;
	}
	
	h3,
	.h3{
		font-size: 140%;
		font-family: "adelle", Georgia, "serif";
}
	h4,
	.h4{
		font-size: 120%;
}
	
	.footerheading{
		margin-top: 10px;
		margin-bottom: 3px;
	}	
	
/* Start of styling for article-wirframes (Georgia)*/
.header-bg{
	float:right;
	width:100%;
	height:300px;
	background-image: url('../../css/img_flowers.jpg');
	background-size:cover;
}
	
.news-header-block{
	height:300px;
}
/* End of styling for article-wirframes (Georgia)*/	

/* Sets the size, background and centres the industry icons on the home page */
.thumbnail{
	width:50%;
	}

/* Partner Profile page - Top Header background */
.partner-hd-bg{
	padding:0px 10px 50px 40px;
}
	
/* Partner Welcome page - Top Header background */
.partner-wel-hd-bg{
	position:absolute;
	margin-top:30px;
	padding:0px 20px 0px 30px;
}

/* Partner Welcome - Coverforce video */
.cf-video iframe {
  	position: absolute;
  	top:0;
  	left: 0;
  	width: 90%;
  	height: 100%;
}
	
/* ---Staff captions for Management Team and Partner pgs--- */
	.team-caption{
	bottom:0;
	right:0;
	position:absolute;
	margin-right:5px;
	margin-bottom:10px;
	text-align:right;
	padding:5px 10px 10px 10px;
	}
	
/* These set the width of the form items that have a drop down option --------------Is this needed? Becuase it's set by a column */
	.form-group .drop-down{
	width: 50%;
}
	
/* News and Articles page - Styling for HERO article grey square (with left yellow border) */
.hero-container{
	max-width:550px;
	height:140px;
	margin-bottom:0px;
}
	
/* News and Article page - News and Articles - The headings of the hero article */
.hero-title{
	top:0px;
	padding-left:0px;
}
	
/* News and Article page - The sub-headings of the hero article (Article Posted | October, 2017) */
.hero-sub-title{
	top:60px;
	padding-left:0px;
}
	
/* News and Article page - The position of the hero article heading on hover */
.hero-container:hover .hero-title {
  	top: -5px;
}

	
/* News and Article page - The position of the hero article sub-heading on hover */
.hero-container:hover .hero-sub-title {
  	top: 55px;
}


/* News and Article page - The headings of the body articles */
.ntitle{
		padding-left:-10px;
	}
	
/* News and Article page - The subheadings of the body articles (Article Posted | October, 2017) */
.nsub-title{
		padding-left:-10px;
	}
	
/* News and Article page - The styling for the body articles buttons */
.button{
		margin-left:0px;
	}
}
@media (max-width: 1920px){
	
.centerme {
    margin-top: 30vh;
   }	
/* Partner Profile page - Top Header background */
.partner-hd-bg{
	padding:0px 10px 50px 40px;
}
	
/* Partner Welcome page - Top Header background*/
	.partner-wel-hd-bg{
	padding:0px 20px 10px 40px;
}

/* Form success message */
.success-message{
	padding:10px 10px 20px 10px;
	margin-top:60px;
}
	

/* Sets the size of the industry icons on the home page */
.thumbnail{
	width:40%;
}

/* The temporary grey strip showing insurers on the home page */
.insurers-home{
	width:80%;
	margin-left:10px;
}

/* Home page - smaller article background images */
.home-article-img{
	height:255px;
}
		

/* Gradient background with low priority articles under New and Insights on home page (this is hidden on large screen size) */
.gradient-article-bg{
	display:none;
	}

/* Partner Welcome - Coverforce video */
.cf-video iframe {
  	position: absolute;
  	top:0;
  	 width: 60%;
  	height: 100%;
	text-align: center;
}
	
/* ---Staff captions for Management Team and Partner pgs--- */
.team-caption{
	bottom:0;
	right:0;
	position:absolute;
	margin-right:10px;
	margin-bottom:15px;
	text-align:right;
	padding:5px 10px 10px 10px;
}
	
/* These set the size of the download icon on any page (sits before the download <li>) */
.download-icon li{
	margin-bottom:25px;
}
}
@media (min-width: 1920px){
	
	/* News and Article page - Styling for body article grey square (with left yellow border) min1920 */
.article-container{
  	width:280px;
	height: 180px;
	bottom: 0;
  	left: 0;
	padding-left: 0px;
	padding-bottom: 10px;
	margin-bottom:10px;
	margin-left:10px;
	
	}
	
/* News and Article page - The headings of the body articles min1920 */
.ntitle{
	font-size: 22px;
	top:0px;
	padding-left: 5px;
	padding-right: 20px;
}

/* News and Article page - The subheadings of the body articles (Article Posted | October, 2017) min1920 */
.nsub-title{
	font-size: 14px;
  	top: 115px;
	padding-left:5px;	
	padding-right:20px;
}

/* News and Article page - The position of the article heading on hover min1920*/
.article-container:hover .ntitle {
	top: -10px;
}
	
/* News and Article page - The position of the article sub-heading on hover min1920*/
.article-container:hover .nsub-title {
	top: 105px;
}
	
/* News and Article page - The styling for the body articles buttons min1920*/
.button {
  	top: 140px;
	padding-left: 5px;
  	}	
	
.centerme {
    margin-top: 30vh;
   }	

	.management-thumbnail{
		
	height: 250px;	
}
	.home-internal-bg{
	padding: 10px 20px 20px 20px;
		margin-left: -15px;
		background-position: 30px 320px;
	background-size: 300px;

}	
	
}
@media (min-width: 2500px){

	.bannerheader{
		font-size: 380%;
		font-weight: 600;
	}
	
	
.wageguard-logo{
	width:65%;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
	
	
	
	
	.internal-header, .group-ins-header{
	height: 600px;
    }
	
.home-internal-header{
		height:600px;
	}
	
	.article-hero{
		height:600px;
	}

	.home-internal-header-content{
	height:600px;
	position: absolute;
	
}

.home-internal-bg{
	height:600px;
	padding: 20px 60px 40px 60px;
	float:left;
	position:relative;
	background-position: 30px 330px;
	background-size: 400px;
}

	.home-header-band{
		width:60px;
		height: 100%;
	}	
	
	
	
}