@media only screen and (min-width:1200px) {
    .OurFirmPage #top-section {
        height: calc(100vh - 179px);
        min-height: 710px
    }
    #people,
    #terms,
    .CareersPage #opportunities {
        height: calc(100vh - 60px)
    }
}

@media only screen and (max-width:1220px) {
	.grid-text__mask img { display: none; }
	.grid-text__mask { background: none; }
	.grid-text p, .grid-text h2 { color: #4896d3; }
    .baner-title{
        width: 100%;
    }
    .baner-text{
        width: 100%;
        margin: 0;
    }
    .baner-content{
        padding: 100px 20px;
    }
    #map-section .right-details {
        padding: 25px 10px 10px 5%
    }
    .expertise-list .expertise,
    .resources-container .item .details {
        padding: 10px
    }
    #map-section .title {
        font-size: 40px;
        line-height: 44px;
        margin-bottom: 30px
    }
    #map-section .location {
        padding-right: 10px;
        margin-bottom: 40px
    }
    #map-section .location .name {
        font-size: 21px;
        line-height: 25px
    }
    #expertise-list .title {
        font-size: 24px;
        line-height: 28px
    }
    #expertise-list .subtitle {
        font-size: 20px;
        line-height: 23px
    }
    #expertise-content .left-sidebar {
        width: 380px
    }
    .items-boxes .box .box-title {
        padding: 10px;
        font-size: 17px;
        line-height: 20px
    }
    .expertise-list .expertise .type {
        font-size: 16px;
        line-height: 19px
    }
    #resources-publications .container>.title {
        margin-bottom: 14px
    }
    .top-action {
        margin-bottom: 20px
    }
    #search-section #search-form .input-field {
        width: 600px
    }
    #search-section #search-form label {
        font-size: 40px
    }
    #opportunities .right-content .icon-angle-right {
        font-size: 17px
    }
}

@media only screen and (max-width:1063px) {

    .input-group input[type="checkbox"] + label:before{
        width: 20px;
        height: 20px;
    }
    .input-group input[type="checkbox"] + label{
        font-size: 14px;
        line-height: 20px;
        padding-left: 30px;
    }
    .input-group input[type="checkbox"] + label:after{
        width: 20px;
        height: 20px;
        margin-left: 0;
        background-size: cover;
    }
    .input-group ul li{
        margin-right: 0;
    }
    .title-h1{
        font-size: 26px;
    }
    #resources-publications .title{
        font-size: 18px;
    }
    .textcols{
        column-gap: 4%;
    }
    .text-content-item{
        width: 48%;
        margin: 0;
        margin-bottom: 30px;
    }
    .text-content-wrap{
        justify-content: space-between;
    }
    .resources-publications-link{
        font-size: 15px;
    }
    #title-h1{
        padding-top: 40px;
    }
    .filter-list li{
        width: 33%;
    }
    .news-view-container .item .title, .resources-container .item .title{
        min-height: 46px;
    }
    #footer .footer-col .title,
    #top-menu ul,
    .footer-col.pay-online {
        text-align: left
    }
    .container,
    .section {
        width: 100%;
        max-width: 100%
    }
    .section {
        margin-bottom: 18px
    }
    #special-announcement-wrapper {
        left: 22px
    }
    .CareersPage #top-section,
    .OurFirmPage #top-section,
    .section {
        width: calc(100% - 40px)
    }
    #community .container,
    #expertise .container,
    #footer .container,
    #header .top-bar .container,
    #header>.container,
    #opportunities,
    #terms .container {
        padding-left: 20px;
        padding-right: 20px
    }
    #careers .content .title,
    #hero-image .content h4,
    #map-section .title,
    #newsletter .title,
    #people .content .title,
    #people2 .content .title,
    #top-section .title,
    .OurFirmPage #top-section .content .title,
    .section .container>.title,
    .section .left-content>.title,
    .section .right-content>.title,
    .section>.title {
        font-size: 35px;
        line-height: 39px
    }
    #careers .content p,
    #community p,
    #contact .right-content .subtitle,
    #expertise-content .right-content .subtitle,
    #opportunities .left-content p,
    #page-content .lead,
    #people .content p,
    #people2 .content p,
    #terms .right-content p,
    #top-section .container .content>.subtitle,
    #top-section .container .content>p,
    #top-section .left-content p,
    .news-view-container .item .title,
    .resources-container .item .title {
        font-size: 19px;
        line-height: 23px
    }
    #contact .right-content .title,
    #expertise-content .title,
    #map-section .location .name,
    #opportunities .right-content .title,
    #post-content .left-sidebar .btn,
    #search-section #search-form label,
    .expert.openings .title,
    .profile-container .left-title {
        font-size: 21px;
        line-height: 25px
    }
    #expertise-list .title {
        font-size: 23px;
        line-height: 27px
    }
    #careers .content .btn,
    #contact .right-content .label,
    #expertise-content .actions a,
    #expertise-content .left-sidebar ul li,
    #experts .top-action .label,
    #map-section .location .address,
    #newsletter .subtitle,
    #people .content .btn,
    #people2 .content .btn,
    .job-available .left-title {
        font-size: 17px;
        line-height: 20px
    }
    #map-section .location p,
    #newsletter p,
    #page-content p,
    .OurFirmPage #people .content .btn,
    .OurFirmPage #people2 .content .btn,
    .job-available .details p,
    .news-view-container .item p,
    .profile-container .details p,
    .profile-container .details ul li,
    .resources-container .item p,
    ol li,
    p,
    ul li {
        font-size: 15px;
        line-height: 19px
    }
    .btn {
        font-size: 15px
    }
    #header .top-bar a {
        font-size: 12px;
        line-height: 20px
    }
    #header .top-bar a:before {
        line-height: 20px
    }
    #header>.container {
        padding-top: 10px;
        z-index: 6
    }
    #header .logo img {
        max-height: 55px;
        width: auto
    }
    #header .icon-menu {
        display: block;
        float: right;
        width: 35px;
        font-size: 0;
        margin-top: 3px;
        cursor: pointer;
        z-index: 9999;
        position: relative
    }
    #header .icon-menu:before {
        font-size: 35px;
        line-height: 45px;
        margin: 0;
        color: #000
    }
    .HomePage #header .icon-menu:before {
        color: #FFF
    }
    .HomePage.sticky #header .icon-menu:before {
        color: #069dde;
    }
    .HomePage #header .icon-menu.menu-opened:before,
    .HomePage #header ul li,
    .HomePage #header ul li a {
        color: #000
    }
    #header .icon-menu.menu-opened:before {
        content: '\e803'
    }
    .HomePage #header {
        width: 100%;
        border: 0;
        padding: 20px
    }
    .HomePage.sticky #header {
        padding: 0px;
    }
    .HomePage #header .container {
        padding-bottom: 20px;
    }
    #top-menu {
        position: absolute;
        top: 0;
        right: 0;
        width: 0%;
        max-width: 400px;
        min-height: calc(100vh - 39px);
        background: #FFF;
        padding: 95px 20px 30px 60px;
        z-index: 999;
        opacity: 0;
        overflow: hidden;
        filter: alpha(opacity=0);
        visibility: hidden;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        -webkit-box-shadow: 0 0 20px 0 rgba(51, 51, 51, .1);
        box-shadow: 0 0 20px 0 rgba(51, 51, 51, .1)
    }
    #top-menu.menu-opened {
        width: 100%;
        visibility: visible;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    #top-menu ul li {
        display: block;
        font-size: 20px;
        line-height: 25px;
        margin: 25px 0 0
    }
    #top-menu ul li:first-child {
        margin-top: 0
    }
    #opportunities .left-content,
    #opportunities .right-content {
        width: 50%
    }
    #footer {
        padding-bottom: 0
    }
    .footer-col {
        margin-bottom: 30px
    }
    .footer-col.explore {
        width: 100%;
        padding: 0
    }
    .footer-col.contact,
    .footer-col.offices,
    .footer-col.pay-online {
        width: 33.33%
    }
    #hero-image {
        margin-bottom: 20px
    }
    #hero-image .content {
        padding-top: 90px;
        padding-bottom: 90px
    }
    #hero-image .icon-angle-down,
    .OurFirmPage #top-section .icon-angle-down {
        bottom: 15px;
        font-size: 15px;
        line-height: 19px
    }
    #expertise {
        padding-top: 40px;
        padding-bottom: 70px
    }
    .expertise-list .expertise {
        margin: 0 4px 8px;
        width: calc(50% - 8px)
    }
    #contact .left-content,
    #contact .right-content,
    #expertise-content .left-sidebar,
    #expertise-content .right-content,
    #map-section #map,
    #map-section .right-details,
    #news_views .left-content,
    #news_views .right-content {
        width: 100%;
        max-width: 100%;
        float: none
    }
    #news_views .right-content {
        padding-top: 20px;
        padding-left: 0;
        text-align: center
    }
    .items-boxes .box,
    .right-content .items-boxes .box {
        width: calc(50% - 8px);
        max-width: calc(50% - 8px);
        margin: 4px
    }
    #careers .content .title,
    #careers .content p,
    #expertise-content .left-sidebar ul li {
        margin-bottom: 15px
    }
    .items-boxes .box .box-title {
        font-size: 15px;
        line-height: 19px
    }
    .icon-angle-right,
    form label {
        font-size: 17px
    }
    .ContactUsPage #top-section {
        min-height: 400px;
        line-height: 400px
    }
    #contact {
        padding: 30px 0
    }
    #contact .right-content {
        padding-left: 0
    }
    form label {
        line-height: 20px
    }
    #map-section .right-details {
        padding: 20px
    }
    #top-section {
        min-height: 300px;
        line-height: 300px
    }
    #expertise-list .clearfix>* {
        padding: 10px 20px
    }
    .arrow-link {
        font-size: 15px
    }
    #top-section .container .content {
        max-width: 100%
    }
    #breadcrumbs {
        padding: 15px 0
    }
    #breadcrumbs a,
    #breadcrumbs span {
        font-size: 16px;
        line-height: 20px
    }
    #expertise-content .left-sidebar {
        margin-bottom: 25px
    }
    #expertise-content .actions a {
        width: calc(50% - 50px);
        margin-right: 20px
    }
    #insights {
        padding: 30px 0
    }
    #insights .items-boxes .box {
        max-width: calc(50% - 8px)
    }
    #insights .items-boxes .icon-angle-right {
        width: calc(50% - 8px);
        margin: 30px 8px 0 0
    }
    .experts-list .expert {
        margin: 4px 4px 15px;
        width: calc(50% - 8px)
    }
    .expertise-page #expertise {
        padding-top: 30px;
        padding-bottom: 30px
    }
    .expertise-list .icon-angle-right {
        width: calc(50% - 8px);
        margin-top: 30px
    }
    #insights .container,
    .job-available .container {
        padding-left: 15px;
        padding-right: 15px
    }
    .expertise-page #expertise .container {
        padding: 0;
        overflow: hidden
    }
    .JobsPage #top-section {
        height: 286px;
        line-height: 286px
    }
    #top-section .container .content>.title {
        line-height: 50px
    }
    .JobsPage #top-section .container .content {
        max-width: 100%
    }
    .job-available .container .title {
        text-align: center
    }
    #newsletter {
        height: auto;
        min-height: 450px;
        line-height: 450px
    }
    #newsletter .content {
        line-height: normal
    }
    #mc-embedded-subscribe-form .input-field {
        padding: 0 10px 0 15px
    }
    .Blog #top-section .container .content {
        max-width: 420px
    }
    #news-views {
        padding-top: 30px
    }
    .top-action {
        padding-top: 0
    }
    .news-view-container .item {
        width: calc(50% - 8px);
        margin: 4px
    }
    .news-view-container .item .details {
        padding: 30px 15px 20px
    }
    .news-view-container .item .image span {
        left: 20px
    }
    .news-view-container .item p,
    .resources-container .item p {
        display: block;
        width: 100%
    }
    .BlogPost #resources-publications .container {
        padding-left: 15px;
        padding-right: 15px
    }
    .BlogPost #resources-publications {
        padding: 40px 0
    }
    .OurFirmPage #top-section .content .title+p {
        margin-top: 20px
    }
    .OurFirmPage #top-section {
        height: auto;
        line-height: 400px
    }
    #terms .left-content .title {
        line-height: 50px
    }
    #terms .left-content {
        padding-right: 25px
    }
    .styledSelect {
        font-size: 17px
    }
    .people-page #experts {
        padding: 15px 0 30px
    }
    #search-section #search-form .input-field {
        width: 450px;
        height: 45px;
        line-height: 45px
    }
    #search-section #search-form .submit-btn:before {
        line-height: 45px
    }
    .SearchPage #resources-publications .container {
        padding-left: 15px;
        padding-right: 15px
    }
    #top-section>.container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px
    }
    #experts {
        padding-top: 30px
    }
    .job-available {
        padding: 30px 0
    }
    #search-section #search-form .submit-btn {
        width: 40px
    }
}

@media only screen and (max-width:760px) {
    .input-group ul{
        width: 100%;
    }

    .baner-title .title{
        font-size: 26px;
    }
    .baner-title .subtitle{
        font-size: 16px;
    }
    .baner-text p{
        font-size: 14px;
    }
    .news-view-container .item .title, .resources-container .item .title{
        min-height: 0px;
    }
    .filter-list{
        width: 100%;
    }
    .filter-list li a{
        font-size: 13px;
    }

	.mobile-tablet {
		display: block !important;
	}
    .Blog #top-section .container .content>.subtitle {
        margin-top: 0px;
    }
	#top-section .social-media {
		position: absolute;
		left: 10px;
		bottom: -119px;
		z-index: 9999;
	}
	.StaffMemberPage #top-section {
		overflow: inherit;
		margin-bottom: 30px;
	}
    .StaffMemberPage #top-section .container .content {
        text-align: right;
        min-width: auto
    }
    .sticky #header {
        height: 80px
    }
    #special-announcement {
        display: none
    }
    #careers .content .title,
    #hero-image .content h4,
    #map-section .title,
    #newsletter .title,
    #people .content .title,
    #people2 .content .title,
    #top-section .title,
    .OurFirmPage #top-section .content .title,
    .section .container>.title,
    .section .left-content>.title,
    .section .right-content>.title,
    .section>.title {
        font-size: 30px;
        line-height: 34px
    }
    .CareersPage #top-section,
    .OurFirmPage #top-section,
    .section {
        width: calc(100% - 20px)
    }
    #community .container,
    #expertise .container,
    #footer .container,
    #header .top-bar .container,
    #header>.container,
    #insights .container,
    #opportunities,
    #tc-content .container,
    #terms .container,
    #top-section>.container,
    .TermsAndConditionsPage #breadcrumbs .container,
    .job-available .container {
        padding: 20px
    }
    .OurFirmPage #top-section .container {
        height: 100%
    }
    .CareersPage #top-section,
    .people-page .experts-list .expert .image img {
        height: auto
    }
    #careers .content {
        padding: 10px
    }
    #header .logo img {
        max-height: 45px
    }
    #header .icon-menu,
    .footer-col.explore .footer-links {
        margin: 0
    }
    #map-section .location,
    #opportunities .left-content,
    #opportunities .right-content,
    #tc-content .left-content,
    #tc-content .right-content,
    .profile-container .left-title {
        padding: 0
    }
    #expertise-content .actions a,
    #expertise-list .building,
    #expertise-list .civil,
    #expertise-list .commercial .left-content,
    #expertise-list .commercial .right-content,
    #expertise-list .employment,
    #expertise-list .environment,
    #expertise-list .family,
    #expertise-list .immigration,
    #expertise-list .notory,
    #expertise-list .overseas,
    #expertise-list .wills,
    #insights .items-boxes .box,
    #insights .items-boxes .icon-angle-right,
    #map-section .location,
    #map-section .location+.location,
    #mc-embedded-subscribe-form .field,
    #opportunities .left-content,
    #opportunities .right-content,
    #post-content .left-sidebar,
    #tc-content .left-content,
    #tc-content .right-content,
    #top-section .left-content,
    #top-section .right-content,
    .expertise-list .expertise,
    .experts-list .expert,
    .footer-col.contact,
    .footer-col.explore .footer-links,
    .footer-col.offices,
    .footer-col.pay-online,
    .items-boxes .box,
    .job-available .details,
    .job-available .left-title,
    .news-view-container .item,
    .profile-container .details,
    .profile-container .left-title,
    .resources-container .item,
    .resources-container .item .details,
    .resources-container .item .image,
    .right-content .items-boxes .box,
    .section .left-content,
    .section .right-content {
        width: 100%;
        max-width: 100%;
        margin: 0 0 10px
    }
    #header .top-bar .container,
    #map-section .location,
    .job-available {
        text-align: center
    }
    .expertise-list .icon-angle-right {
        width: auto;
        margin: 25px 0 0
    }
    #expertise-list .building,
    #expertise-list .commercial .right-content,
    #expertise-list .environment,
    #expertise-list .family,
    #expertise-list .notory,
    #expertise-list .overseas {
        min-height: 170px
    }
    .expertise-list .icon-angle-right,
    .job-available .btn {
        float: none
    }
    .job-available .left-title,
    .resources-container .item .image {
        text-align: center;
        padding: 0
    }
    .job-available .details.two-cols p {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0
    }
    .job-available .clearfix {
        text-align: left
    }
    .CareersPage #top-section .right-content img {
        min-height: 100%;
        max-height: 100%
    }
    .top-action {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        float: none
    }
    .resources-container .item .image:after {
        right: 0
    }
    .resources-container .item .image img {
        height: auto;
        max-height: 200px;
        margin: 0 auto
    }
    #people img {
        max-height: 180px;
        min-height: 300px
    }
    .experts-list .expert {
        margin-bottom: 30px
    }
    .profile-container .details.three-cols ul {
        width: 100%
    }
    #search-section #search-form label {
        display: block;
        margin: 0 0 10px
    }
    #search-section #search-form .input-field {
        width: 100%;
        margin: 0;
        padding: 0 45px 0 10px
    }
    #search-section #search-form .submit-btn {
        height: 45px;
        bottom: 0;
        top: auto
    }
    #search-section {
        height: auto;
        min-height: 300px;
        line-height: 300px
    }
    #search-section #search-form {
        line-height: normal
    }
    #resources-publications {
        padding-top: 20px
    }
    #tc-content {
        padding-bottom: 10px
    }
    #top-section .right-content img {
        min-height: auto;
        max-height: 150px;
        object-fit: cover;
        margin: 0 auto;
        display: block;
        width: 100%
    }
    #opportunities {
        padding: 20px
    }
    #opportunities .left-content {
        margin-bottom: 40px
    }
    #opportunities .right-content .icon-angle-right,
    #opportunities .right-content .title {
        float: left;
        clear: both
    }
    #people .content {
        max-width: 100%
    }
    .section .right-content {
        display: inherit;
        vertical-align: middle;
        width: 100%;
        min-height: auto
    }
    #header .top-bar a {
        margin-left: 10px;
        font-size: 15px
    }
    .section .left-content,
    .section .right-content {
        min-height: auto
    }
    #community,
    #terms {
        padding: 4px 0
    }
}

@media only screen and (max-width:1025px) {
    .slider-wave .button-slider {
        width: 60px;
        height: 60px;
        margin-top: -30px
    }
    .slider-wave .button-slider:hover {
        width: 90px
    }
    #hero-image .slider-wave .content {
        padding: 0 60px
    }
}

@media only screen and (max-width:760px) {
    .resources-container .item .image {
        width: 100%;
        height: 300px
    }
    .resources-container .item .image img {
        display: block;
        width: 100%;
        height: 300px;
        max-height: 300px;
        object-fit: cover
    }
    .Blog .resources-container {
        padding: 0px 20px;
    }
}

@media only screen and (max-width:600px) {
    .slider-wave .button-slider {
        width: 40px;
        height: 40px;
        margin-top: -20px
    }
    .slider-wave .button-slider:hover {
        width: 60px
    }
    #hero-image .slider-wave .content {
        padding: 0 40px
    }
    #hero-image .slider-wave .content h4 {
        font-size: 20px
    }
    #hero-image .slider-wave .content p {
        font-size: 26px;
        line-height: 30px
    }
    .textcols{
        column-count: 1;
        column-gap: 0;
    }
    .text-content-wrap{
        margin-top: 20px;
    }
    .text-content-item{
        width: 100%;
        margin-bottom: 20px;
    }
    .baner-text p br{
        display: none;
    }
    .baner-content{
        padding: 60px 20px;
    }
    .input-group ul li{
        width: 45%;
    }
}
@media only screen and (max-width:400px) {
    .filter-list li{
        width: 50%;
    }
	.StaffMemberPage #top-section .container {
		vertical-align: bottom;
	}
	#top-section .social-media {
		bottom: -41px;
	}
	.desktop {
		display: none !important;
	}
	.mobile-phone {
		display: block !important;
	}
        .input-group ul li{
        width: 100%;
    }
}


@media only screen and (max-width:1500px) {
	.grid-text__mask img { display: none; }
	.grid-text__mask { background: none; }
	.grid-text p, .grid-text h2 { color: #4896d3; }
	.grid-text__text p + ul { background: #035ba0; border-radius: 20px; padding: 40px 30px; }
	.grid-text__list .grid-text__title h4 { color: #4896D3; }
	.grid-text::before { background: none; }
	.grid-text__text ul li p h3, .grid-text__text ul li p { color: #FFF; }
}