.department { width: 100%; max-width: 1480px; margin: 0 auto; display: flex; }

.departmentContact { width: 300px; padding: 20px; background: #ECF7FA; }
.departmentContent { width: calc(100% - 380px); margin-left: 20px; padding: 20px 20px 0 0; }

.departmentIntro { font-size: 20px; line-height: 34px; border-bottom: 1px solid #ECF7FA; padding: 0 0 20px; }

.departmentContact h3 { font-size: 22px; line-height: 26px; margin-top: 40px; }
.departmentContact h3:first-child { margin-top: 0; }
.departmentContact a i { text-decoration: none; margin-left: 5px; }

.locationNotes { margin: 10px 0 0; font-size: 14px; line-height: 22px; }

.departmentMap { width: 100%; }
.departmentMap iframe { width: 100%; border: 0; height: 450px; }

.departmentIcons { padding: 0 0 20px; display: flex; flex-wrap: wrap; }
.qlIcon { width: calc(20% - 20px); margin: 10px; }
.qlIcon a { display: block; text-align: center; font-weight: 700; text-decoration: none; padding: 25px 0 15px; color: #0F1910; font-size: 17px; }
.qlIcon a i { font-size: 50px; line-height: 100px; display: block; margin: 0 auto 10px; width: 100px; height: 100px; text-align: center; border-radius: 50%; background: #C4DD95; border: 3px solid #063C50; position: relative; }
.qlIcon.qlAlt a i { background: #7ED1E1; }
.qlIcon a i:after { top: -3px; left: -3px; padding: 3px; box-shadow: 0 0 0 3px #C4DD95; opacity: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
.qlIcon.qlAlt a i:after { box-shadow: 0 0 0 3px #7ED1E1; }
.qlIcon a:hover i { background: #95C241; }
.qlIcon a:hover i:after { top: -5px; left: -5px; padding: 5px; box-shadow: 0 0 0 3px #95C241; }
.qlIcon.qlAlt a:hover i { background: #2EAFC7; }
.qlIcon.qlAlt a:hover i:after { top: -5px; left: -5px; padding: 5px; box-shadow: 0 0 0 3px #2EAFC7; }
.qlIcon a i:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content:''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.qlIcon a i:before { speak: none; font-size: 50px; line-height: 100px; display: block; -webkit-font-smoothing: antialiased; }

.departmentContactStaff img { width: 100%; margin: 10px 0; height: auto; }

.departmentContentStaff { width: calc(100% + 20px); margin: -20px -10px 0; display: flex; flex-wrap: wrap; }
.departmentContentStaff .staffMember { width: calc(33.33% - 20px); margin: 10px; }
.departmentContentStaff .staffMember a.button { margin-top: 10px; }
.departmentContentStaff .staffMember img.staffMemberPagePhoto { width: 100%; object-fit: cover; height: calc(80% - 5px) !important; margin: 0 0 5px; }
.staffMemberBio { max-width: 800px !important; } 

.departmentContactStaffMember { margin: 0 0 10px; }

@media screen and (max-width: 1400px) { 
    .departmentContentStaff .staffMember img.staffMemberPagePhoto { height: calc(75% - 5px) !important; }
}
@media screen and (max-width: 1300px) { 
    .qlIcon { width: calc(25% - 20px); }
}
@media screen and (max-width: 1120px) { 
    .qlIcon { width: calc(33.333% - 20px); }
    .departmentContentStaff .staffMember img.staffMemberPagePhoto { height: calc(70% - 5px) !important; }
}
@media screen and (max-width: 1000px) { 
    .departmentContentStaff .staffMember { width: calc(50% - 20px); }
    .departmentContentStaff .staffMember img.staffMemberPagePhoto { height: calc(75% - 5px) !important; }
}
@media screen and (max-width: 900px) { 
    .departmentContentStaff .staffMember img.staffMemberPagePhoto { height: calc(72% - 5px) !important; }
}
@media screen and (max-width: 880px) {
    .qlIcon { width: calc(50% - 20px); }
    .departmentContentStaff .staffMember { width: calc(100% - 20px); }
    .departmentContentStaff .staffMember img.staffMemberPagePhoto { height: 600px !important; max-width: 400px; }
}
@media screen and (max-width: 720px) { 
    .department { flex-wrap: wrap; }
    .departmentContact { order: 2; width: 360px; padding: 20px calc(50% - 180px) 80px; margin-bottom: -40px; text-align: center; }
    .departmentContent { order: 1; width: calc(100% - 40px); padding: 20px; margin: 0; }
}
@media screen and (max-width: 440px) { 
    .departmentContentStaff .staffMember img.staffMemberPagePhoto { height: 550px !important; }
}
@media screen and (max-width: 400px) { 
    .departmentContent { width: calc(100% - 40px); padding: 20px; }
    .deparmtentContact { width: calc(100% - 20px); padding-left: 10px; padding-right: 10px; }
}

/* Department List */
.listDepartment { border-bottom: 1px solid #ECF7FA; padding: 20px 10px; display: flex; }
.listDepartment h3 { margin: 0 0 5px; }
.listDepartmentInfo { width: 340px; }
.listDepartmentInfo h3 { font-size: 24px; line-height: 32px; }
.listDepartmentServices { width: calc(100% - 340px); }
.listDepartmentServices a { display: inline-block; padding: 7.5px 15px; text-decoration: none !important; font-size: 17px; line-height: 32px; color: #0F1910 !important; position: relative; }

.listDepartmentServices a i { background: #C4DD95; width: 32px; height: 32px; line-height: 32px; margin: 0 5px 0 0; text-decoration: none !important; display: inline-block; text-align: center; border-radius: 50%; position: relative; }
.listDepartmentServices a.qlAlt i { background: #7ED1E1; }
.listDepartmentServices a i:after { top: -1px; left: -1px; padding: 1px; box-shadow: 0 0 0 1px #0F1910; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -webkit-transform: scale(.8); -moz-transition: -moz-transform 0.2s, opacity 0.2s; -moz-transform: scale(.8); -ms-transform: scale(.8); transition: transform 0.2s, opacity 0.2s; transform: scale(.8); opacity: 0; }
.listDepartmentServices a:hover i:after, .serviceNav a.active i:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
.listDepartmentServices a i:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content:''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.listDepartmentServices a i:before { speak: none; font-size: 17px; line-height: 32px; display: block; -webkit-font-smoothing: antialiased; }

@media screen and (max-width: 890px) { 
    .listDepartmentServices a { display: block; }
}
@media screen and (max-width: 675px) {
    .listDepartment { flex-wrap: wrap; }
    .listDepartmentInfo { width: 100%; margin: 0 0 20px; }
    .listDepartmentServices { width: 100%; }
    .listDepartmentServices a { padding: 7.5px 0; }
}