/* STAFF NAME */
.staffCon h3 { font-size:20px; }

/* SOCIAL & CONTACT BUTTONS */
.staffIcons a { background: #6198c5; }

/* VIEW PROFILE BUTTON BG */
a.staffLink { background: #00225b;  }

/* SOCIAL & CONTACT BUTTON ON PROFILE & INTERNAL PAGE */
.staffProLeft .eaStaffBtns a { background:#6198c5; }
.staffProLeft .eaStaffBtns a:hover i { color:#6198c5; }

/* CUSTOM BACKGROUND COLOUR OPTION */
.customBg { background:#6198c5; }

/* LIGHT BACKGROUND COLOUR OPTION */
.lightBg { background:#f3f3f3; }

/* DARK BACKGROUND COLOUR OPTION */
.darkBg { background:#0f0f0e; }


/** STAFF INDEX PAGE **/
.eaStaff { width: 24%; margin:0.5%; float: left; position:relative; }
.eaBg { padding:20px; }
.staffImg { width:100%; height:250px; border:solid 2px #eee; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position:relative; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(0%); }
.staffImg.circ { width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; border: solid 2px #eee; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.staffImg  .staffIcons { position:absolute; bottom:10px; width:100%; }
.staffCon { text-align: center; }
    .staffCon .pad { padding:20px 0 10px 0; }
    .staffCon h3 { line-height: normal; margin: 0; }
.staffIcons { text-align: center; }
    .staffIcons a { width: 36px; height: 36px; display: inline-block; margin-top:10px; }
        .staffIcons a:hover { -moz-opacity:.70; filter:alpha(opacity=70); opacity:.70; color: #fff; }
        .staffIcons a i { line-height: 36px; font-size: 18px; color: #fff; }
a.staffLink { display: inline-block; padding: 8px 30px; color: #fff;  }
    a.staffLink:hover { text-decoration: none; -moz-opacity:.80; filter:alpha(opacity=80); opacity:.80; color: #fff; }
.staffIcons a[href=''], .staffIcons a[href='mailto:'], .staffIcons a[href='tel:'], .staffIcons a[href='callto:'], .eaStaffBtns a[href=''], .eaStaffBtns a[href='mailto:'], .eaStaffBtns a[href='tel:'] { display: none !important; }

/** INDIVIDUAL PROFILE **/
.staffProLeft { width:25%; margin-right:3%; float:left; }
.staffLeftImg { width:100%; height:250px; border:solid 2px #eee; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position:relative; }
.staffLeftImg.circ { position: relative; border-radius: 50%; width: 100%; height: auto; padding-top: 100%; }
.staffProLeft img { width: 100% !important; display: block !important; height: auto !important; }
.staffProRight { width:72%; float:left; }
.staffProLeft .eaStaffBtns { padding:15px 0; text-align:center; }
.staffProLeft .eaStaffBtns a { display:inline-block; width:40px; height:40px; color:#fff; text-align:center; transition: background-color 0.5s ease; }
.staffProLeft .eaStaffBtns a.circ { border-radius:50%; }
.staffProLeft .eaStaffBtns a:hover { background:#fff; }
.staffProLeft .eaStaffBtns a i { line-height:40px; font-size:20px; }
.staffProLeft .circ { position: relative; border-radius: 50%; width: 100%; height: auto; padding-top: 100%; border:solid 4px #eee; }

.circ20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.circ50 { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.rndBtns { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

.hideEl { display:none !important; }
.showEl { display:block !important; }
.hideIn { display:none; }


.lightBg .staffImg, .customBg .staffImg{ border:solid 2px #fff; }
.darkBg { color:#fff; }
.darkBg a.staffLink:hover, .customBg  a.staffLink:hover { -moz-opacity:.80; filter:alpha(opacity=80); opacity:.80; color: #fff; }
.customBg { color:#fff; }
.customBg h3 { color:#0f0f0e; }
.customBg .staffImg { border:solid 2px #fff; }
.customBg .staffIcons a { background: #fff; color:#0f0f0e; }
.customBg .staffIcons a i { color: #0f0f0e; }
.customBg a.staffLink { background: #0f0f0e; color: #fff;  }

.sidePanel { padding:15px; border:solid 2px #eee; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.sidePanel, .sidePanel p, .sidePanel td, .sidePanel td p { font-size:14px; }

/****** EFFECTS *****/
.toggleBorder { border:0 !important; }

@media all and (max-width: 1200px) {
    .eaStaff { width: 32%; margin: 0.5%; }
    .staffImg { height: 300px; }
}

@media all and (max-width: 768px) {
    .eaStaff { width: 46%; margin: 2%; }
    .staffImg { height: 400px; }
	.staffProLeft { width:60%; margin:0 auto; float:none; }
	.staffProRight { width:100%; float:none; }
}

@media all and (max-width: 460px) {
    .eaStaff { width: 90%; margin: 5%; }
    .staffImg { height: 350px; }
}