#main-content .et_pb_row.our-work-row {
max-width: 1360px;
border-top: none;
}
#ourWorkU .sub-heading {
font-size: 30px;
line-height: 38px;
color: black;
font-weight: 900;
padding-bottom: 0 !important;
margin-bottom: 40px;
margin-top: 0;
}
#ourWorkU .hero-heading {
font-size: 105px;
line-height: 110px;
color: black;
font-weight: 900;
}
#ourWorkU.hero .outer-block {
top: -230px;
left: 0;
max-width: 1030px;
height: 61px;
width: 100%;
position: relative;
z-index: 1;
}
#ourWorkU.hero .outer-block .animate-block {
margin-left: 0 !important;
}
.hero .our-work-row .animate-block.reveal {
width: 100% !important;
}
.work-grid .esg-multiplefilters {
display: flex;
flex-direction: row;
column-gap: 62px;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button {
text-align: left !important;
height: 90px !important;
background: transparent !important;
border-left: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-width: 2px !important;
border-color: transparent !important;
font-family: 'Poppins' !important;
box-shadow: none !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.available .esg-mobile-filter-button {
border-color: black !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span {
display: block !important;
font-size: 50px !important;
font-weight: 700 !important;
height: 90px;
line-height: 86px;
color: black !important;
box-shadow: none !important;
z-index: 2;
position: relative;
}
.work-grid .esg-multiplefilters .eg-clearfix {
display: none !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button i {
display: none !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper:first-child .esg-mobile-filter-button span::before {
content: '02';
font-size: 50px !important;
font-weight: 700 !important;
line-height: 74px;
color: black !important;
margin-right: 35px;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper:last-child .esg-mobile-filter-button span::before {
content: '03';
font-size: 50px !important;
font-weight: 700 !important;
line-height: 74px;
color: black !important;
margin-right: 35px;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper {
overflow: visible;
width: 50%;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::after {
content: '';
height: 38px;
width: 51px;
background-image: url(https://staging2.fishgate.co.za/fishgate_2024/wp-content/uploads/2024/06/arrow_skew_black.png);
background-size: contain;
display: inline-block;
transform: rotate(315deg);
background-repeat: no-repeat;
float: right;
margin-top: 21px;
transition: 0.3s !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.open .esg-mobile-filter-button span::after {
transform: rotate(360deg) !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.expertise .esg-dropdown-wrapper {
display: flex !important;
position: relative !important;
opacity: 0;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1338px;
width: 100vw;
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0;
top: 0;
z-index: 0;
transition: max-height 0.6s ease 0.1s, padding-bottom 0.6s ease, opacity 0.4s ease;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.industries .esg-dropdown-wrapper {
display: flex !important;
opacity: 0;
position: relative !important;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1360px;
width: calc(100vw + 60px);
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0;
top: 0;
left: 0;
z-index: 0;
transition: max-height 0.6s ease 0.4s, padding-bottom 0.6s ease, opacity 0.4s ease;
}
.work-grid .esg-multiplefilters.open .esg-filter-wrapper.industries.open {
position: relative !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.industries.open .esg-dropdown-wrapper,
.work-grid .esg-multiplefilters .esg-filter-wrapper.expertise.open .esg-dropdown-wrapper {
border-bottom: 2px solid #000 !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper {
z-index: 1570 !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.industries.open {
z-index: 1571 !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.expertise.open {
z-index: 1571 !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-selected-filterbutton.esg-mobile-filter-button {
border-top: none !important;
border-bottom: 2px solid #000 !important;
height: 99px !important;
transition: ease border 400ms, ease padding-bottom 400ms, ease height 400ms, border-bottom 600ms;
} .work-grid .esg-multiplefilters .esg-filter-wrapper.open .esg-dropdown-wrapper {
max-height: 1000px !important;
margin: 30px 0 0 0;
padding-bottom: 30px !important;
border-bottom: 2px solid #000 !important;
opacity: 1;
transition: max-height 0.6s ease 0.4s, padding-bottom 0.6s ease, opacity 0.8s ease 0.8s, border-bottom 0.4s ease 0.4s;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton {
flex-basis: 25%;
font-size: 18px;
line-height: 30px;
font-weight: 600;
color: black !important;
margin-right: 2px;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton span.esg-filter-checked {
display: none !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton span {
font-family: 'Merriweather', serif;
font-size: 20px;
font-weight: 900;
line-height: 40px;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button::before {
content: '';
height: 40px;
width: 0;
background-color: white;
position: absolute;
z-index: 1;
top: 38px;
transition: 0.5s !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.expertise.open .esg-mobile-filter-button::before {
content: '';
height: 40px;
width: 98%;
background-color: white;
position: absolute;
z-index: 1;
top: 38px;
transition: 0.5s !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.industries.open .esg-mobile-filter-button::before {
content: '';
height: 40px;
width: 98%;
background-color: white;
position: absolute;
z-index: 1;
top: 38px;
transition: 0.5s !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper:nth-child(1) .esg-mobile-filter-button:hover::before {
width: 98% !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper:nth-child(2) .esg-mobile-filter-button:hover::before {
width: 98% !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton span {
z-index: 2;
position: relative;
padding: 3px 10px;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton span::before {
content: '';
height: 100%;
width: 0;
background-color: white;
position: absolute;
z-index: 1;
top: 0;
left: -5px;
transition: 0.7s !important;
z-index: -1;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton:hover span:before,
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton.selected {
width: calc(100% + 10px) !important;
} #ourWorkU .esg-nav-by-shortcode {
max-width: 460px;
width: 100%;
margin: 0 0 0 auto;
display: block;
}
#ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper {
margin-top: 0;
position: relative;
width: 100%;
display: block;
height: 62px;
}
#ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper input.eg-search-input {
max-width: 531px;
width: 100%;
height: 62px;
background: transparent;
border: 2px solid black;
border-radius: 30px;
padding: 15px;
position: absolute;
top: 0;
right: 0;
font-family: 'Poppins', sans-serif;
font-size: 21px;
line-height: 21px;
letter-spacing: 5.25px;
font-weight: 500;
text-transform: uppercase;
}
.darkmode #ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper input.eg-search-input {
max-width: 531px;
width: 100%;
height: 62px;
background: transparent;
border: 2px solid #ffffff99;
border-radius: 30px;
padding: 15px;
position: absolute;
top: 0;
right: 0;
font-family: 'Poppins', sans-serif;
font-size: 21px;
line-height: 21px;
letter-spacing: 5.25px;
font-weight: 500;
text-transform: uppercase;
color: #ffffff99 !important;
}
.darkmode #ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper input.eg-search-input::placeholder {
color: #ffffff99 !important;
}
#ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper .eg-search-submit {
position: absolute;
top: 10px;
right: 23px;
background: transparent;
border: 0;
font-size: 26px;
width: 42px;
height: 42px;
}
#ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper .eg-search-submit.hide {
position: absolute;
top: 10px;
right: 23px;
background: transparent;
border: 0;
font-size: 26px;
width: 42px;
height: 42px;
display: none !important;
}
#ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper .eg-search-submit.hovered,
#ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper input.eg-search-input.hovered {
box-shadow: none !important;
}
#ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper .eg-search-submit .eg-icon-search:before {
content: '' !important;
width: 42px;
height: 42px;
display: block;
background-image: url(https://staging2.fishgate.co.za/fishgate_2024/wp-content/uploads/2025/02/our-work-search-icon.svg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 42px 42px;
}
.darkmode #ourWorkU .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper .eg-search-submit .eg-icon-search {
filter: invert(1) !important;
opacity: 0.60 !important;
}
#ourWorkU .esg-nav-by-shortcode .eg-search-clean {
background-color: transparent !important;
width: 42px !important;
height: 42px !important;
border: 0 !important;
box-shadow: none !important;
transition-delay: 0.7s !important;
position: absolute !important;
right: 13px;
top: 13px;
z-index: -1;
display: none;
}
#ourWorkU .esg-nav-by-shortcode .eg-search-clean {
background-color: transparent !important;
width: 42px !important;
height: 42px !important;
border: 0 !important;
box-shadow: none !important;
transition-delay: 0.7s !important;
position: absolute !important;
right: 13px;
top: 11px;
margin: 0 !important;
z-index: 2 !important;
display: none !important;
}
#ourWorkU .esg-nav-by-shortcode .eg-search-clean.show {
background-color: transparent !important;
width: 42px !important;
height: 42px !important;
border: 0 !important;
box-shadow: none !important;
transition-delay: 0.7s !important;
position: absolute !important;
right: 13px;
top: 11px;
margin: 0 !important;
z-index: 2 !important;
display: block !important;
}
#ourWorkU .esg-nav-by-shortcode .eg-search-clean::before {
content: '';
width: 42px;
height: 2px;
background-color: #000;
transform-origin: center;
transform: rotate(-45deg);
position: absolute;
top: 19px;
left: 0;
}
#ourWorkU .esg-nav-by-shortcode .eg-search-clean::after {
content: '';
width: 42px;
height: 2px;
background-color: #000;
transform-origin: center;
transform: rotate(45deg);
position: absolute;
top: 19px;
left: 0;
}
#ourWorkU .esg-nav-by-shortcode .eg-search-clean i.eg-icon-cancel {
display: none !important;
}
#ourWorkU .esg-nav-by-shortcode .eg-search-clean i.eg-icon-cancel:before {
display: none !important;
}
.work-grid .esg-overflowtrick {
margin-top: 35px !important;
height: 100% !important;
} .work-grid .myportfolio-container ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 18px !important;
align-content: flex-start !important;
height: 100% !important;
padding-bottom: 30px !important;
}
.work-grid .myportfolio-container ul.mainul li {
background-color: transparent !important;
position: unset !important;
}
.work-grid .myportfolio-container ul.mainul li .esg-media-cover-wrapper .esg-entry-media {
border-radius: 45px !important;
} .work-grid .myportfolio-container ul.mainul li:nth-child(3n) .esg-entry-media {
padding: 0 !important;
}
.work-grid .myportfolio-container ul li .esg-bottom {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 45px;
width: 100%;
line-height: 37px;
} .work-grid .myportfolio-container ul li .esg-bottom:first-child {
bottom: 75px !important;
}
.work-grid .myportfolio-container ul li:hover .esg-entry-media .esg-media-poster::after {
background: linear-gradient(to bottom, rgba(229, 209, 209, 0) 0%, rgb(248, 247, 244) 100%);
}
.work-grid .myportfolio-container ul li .esg-entry-media .esg-media-poster::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 55%;
pointer-events: none;
transition: background 0.5s ease;
}
.work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore {
height: 60px;
max-width: fit-content;
width: 100%;
margin-top: 45px;
background: linear-gradient(to left, transparent 50%, white 50%);
background-size: 210% 100%;
background-position: right bottom;
transition: background-position 0.35s ease-in-out;
border: 2px solid black;
border-radius: 30px;
font-size: 20px;
color: black;
font-weight: 600;
font-family: 'Poppins';
padding: 13px 66px 15px 45px;
letter-spacing: 1.5px;
box-shadow: none !important;
position: relative;
}
.work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore::after {
content: '';
height: 24px;
width: 23px;
background-image: url(https://staging2.fishgate.co.za/fishgate_2024/wp-content/uploads/2024/06/arrow_down_small_black.svg);
background-size: contain;
position: absolute;
background-repeat: no-repeat;
top: 15px;
right: 25px;
transform: rotate(315deg);
transition: 0.3s !important;
}
@media only screen and (min-width: 601px) {
#ourWorkU .work-grid .myportfolio-container .esg-loadmore-wrapper.esg-text-center.no-work-parent {
border-top: none !important;
}
}
@media only screen and (max-width: 600px) {
.darkmode #ourWorkU .work-grid .myportfolio-container .esg-loadmore-wrapper.esg-text-center.no-work-parent {
border-top: 2px solid #ffffff99;
}
#ourWorkU .work-grid .myportfolio-container .esg-loadmore-wrapper.esg-text-center.no-work-parent {
border-top: 2px solid #000000;
}
#ourWorkU .work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore.no-work {
height: 30px;
max-width: fit-content;
width: 100%;
margin-top: 0;
background: transparent;
border: none !important;
border-radius: 30px;
font-size: 16px;
color: black;
font-weight: 600;
font-family: 'Poppins';
padding: 0 66px 15px 45px;
letter-spacing: 1.5px;
box-shadow: none !important;
position: relative;
}
#ourWorkU .work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore:hover {
background-color: transparent !important;
}
.work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore.no-work:hover {
height: 30px;
max-width: fit-content;
width: 100%;
margin-top: 0;
background: transparent;
border: none !important;
border-radius: 30px;
font-size: 16px;
color: black;
font-weight: 600;
font-family: 'Poppins';
padding: 0 66px 15px 45px;
letter-spacing: 1.5px;
box-shadow: none !important;
position: relative;
}
.work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore.no-work::after {
content: '';
height: 24px;
width: 23px;
background-image: url(https://staging2.fishgate.co.za/fishgate_2024/wp-content/uploads/2024/06/arrow_down_small_black.svg);
background-size: contain;
position: absolute;
background-repeat: no-repeat;
top: 15px;
right: 25px;
transform: rotate(315deg);
transition: 0.3s !important;
display: none !important;
}
}
.work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore:hover {
background-position: left bottom !important;
}
.work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore:hover::after {
transform: rotate(360deg);
} h2#workgrid-heading {
font-family: 'Merriweather', serif;
font-size: 100px;
text-align: left;
line-height: 118px;
font-weight: bold;
display: inline;
background: linear-gradient(to bottom, transparent 46%, white 46%, white 94%, transparent 93%);
background-size: 0% 100%;
background-repeat: no-repeat;
background-position: left;
padding: 5px 30px 0 5px;
animation: highlight-grow 3s ease-out forwards;
}
.darkmode .grid-work-header h2#workgrid-heading {
font-size: 100px;
text-align: left;
line-height: 118px;
color: #ffffff99 !important;
font-weight: bold;
display: inline;
background: linear-gradient(to bottom, transparent 46%, rgba(255, 255, 255, 0.15) 46%, rgba(255, 255, 255, 0.15) 94%, transparent 93%);
background-size: 0% 100%;
background-repeat: no-repeat;
background-position: left;
padding: 5px 30px 0 5px;
animation: highlight-grow 3s ease-out forwards;
}
span.search-criteria {
font-family: 'Poppins', sans-serif;
font-size: 100px;
text-align: left;
line-height: 118px;
font-weight: bold;
display: inline;
padding: 5px 30px 0 5px;
position: relative;
top: 4px;
font-style: italic;
}
.grid-work-header {
margin: 0 0 40px 0;
} .work-grid {
z-index: 1;
transition-delay: 1.0s !important;
} .work-grid article .esg-filter-wrapper.dropdownstyle.available {
height: 90px;
}
.work-grid article .esg-filter-wrapper.dropdownstyle.available.open {
height: 100% !important;
}
.work-grid .myportfolio-container ul li .esg-bottom a {
min-height: 100% !important;
}
.work-grid .myportfolio-container ul.mainul li .esg-media-cover-wrapper .esg-entry-media {
height: 100% !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton.selected span::before {
width: calc(100% + 10px) !important;
} .darkmode .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button,
.darkmode .work-grid .esg-multiplefilters:first-child .esg-filter-wrapper:last-child,
.darkmode .work-grid .esg-multiplefilters .esg-filter-wrapper.eg-search-wrapper input.eg-search-input,
.darkmode .work-grid .esg-multiplefilters .esg-overflowtrick #workgrid-heading,
.darkmode #ourWorkU .et_pb_row.et_pb_row_0,
.darkmode .work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore {
border-color: hsl(0deg 0% 100% / 60%) !important;
}
.darkmode .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span,
.darkmode .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before,
.darkmode .work-grid .esg-filter-wrapper.eg-search-wrapper .eg-search-clean::before,
.darkmode .work-grid .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper input.eg-search-input,
.darkmode .work-grid .esg-nav-by-shortcode .esg-filter-wrapper.eg-search-wrapper input.eg-search-input::placeholder,
.darkmode .work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore {
color: hsl(0deg 0% 100% / 60%) !important;
}
.darkmode .work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore {
background: linear-gradient(to left, transparent 50%, #ffffff35 50%) !important;
background-size: 210% 100% !important;
background-position: right bottom !important;
transition: background-position 0.35s ease-in-out !important;
}
.darkmode .work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore:hover {
background-position: left bottom !important;
}
.darkmode .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button::before,
.darkmode .work-grid .esg-multiplefilters .esg-overflowtrick #workgrid-heading {
opacity: 0.15 !important;
}
.darkmode .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::after,
.darkmode .work-grid .myportfolio-container .esg-navigationbutton.esg-loadmore::after {
filter: invert(1) !important;
opacity: 0.60 !important;
}
.darkmode .work-grid .myportfolio-container ul li .esg-bottom {
color: hsl(0deg 0% 100% / 60%) !important;
}
.darkmode .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton:hover span,
.darkmode .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton.selected span {
color: hsl(0deg 0% 0% / 80%) !important;
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
.work-grid ul li .esg-entry-media .esg-media-poster::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 66%;
pointer-events: none;
transition: background 0.5s ease;
} .work-grid .eg-washington-element-3 {
font-size: 30px !important;
line-height: 34px !important;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:first-child {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 65px !important;
width: 100%;
line-height: 40px;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 16px !important;
width: 100%;
line-height: 40px;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) a {
font-size: 18px !important;
line-height: 22px !important;
}
.darkmode .work-grid .myportfolio-container ul li .esg-bottom {
color: hsl(0deg 0% 100% / 80%) !important;
}
}
@media only screen and (min-width: 641px) and (max-width: 767px) {
.work-grid ul li .esg-entry-media .esg-media-poster::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 67%;
pointer-events: none;
transition: background 0.5s ease;
} .work-grid .eg-washington-element-3 {
font-size: 25px !important;
line-height: 30px !important;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:first-child {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 60px !important;
width: 100%;
line-height: 40px;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 16px !important;
width: 100%;
line-height: 40px;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) a {
font-size: 18px !important;
line-height: 22px !important;
}
.darkmode .work-grid .myportfolio-container ul li .esg-bottom {
color: hsl(0deg 0% 100% / 80%) !important;
}
}
@media only screen and (min-width: 481px) and (max-width: 640px) {
.work-grid ul li .esg-entry-media .esg-media-poster::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 67%;
pointer-events: none;
transition: background 0.5s ease;
} .work-grid .eg-washington-element-3 {
font-size: 30px !important;
line-height: 36px !important;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:first-child {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 60px !important;
width: 100%;
line-height: 40px;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 25px !important;
width: 100%;
line-height: 40px;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) a {
font-size: 20px !important;
line-height: 24px !important;
}
.darkmode .work-grid .myportfolio-container ul li .esg-bottom {
color: hsl(0deg 0% 100% / 80%) !important;
}
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
.work-grid ul li .esg-entry-media .esg-media-poster::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 73%;
pointer-events: none;
transition: background 0.5s ease;
} .work-grid .eg-washington-element-3 {
font-size: 22px !important;
line-height: 26px !important;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:first-child {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 55px !important;
width: 100%;
line-height: 40px;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) {
font-family: 'Poppins' !important;
position: absolute !important;
bottom: 16px !important;
width: 100%;
line-height: 40px;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) a {
font-size: 18px !important;
line-height: 22px !important;
}
.darkmode .work-grid .myportfolio-container ul li .esg-bottom {
color: hsl(0deg 0% 100% / 80%) !important;
}
} @media (max-width: 768px) {
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span,
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
font-size: 40px !important;
}
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span {
padding: 0 10px !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::after {
height: 35px !important;
width: 45px !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button::before {
top: 26px !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button:hover::before {
width: 100% !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper {
padding: 0px 70px 20px 90px !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton {
flex-basis: unset !important;
width: fit-content !important;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:first-child {
bottom: 35px !important;
font-size: 26px !important;
line-height: 32px !important;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:nth-child(2) a {
overflow: hidden !important;
text-overflow: ellipsis !important;
text-wrap: nowrap !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.available .esg-mobile-filter-button {
padding: 0 !important;
}
}
@media (max-width: 639px) {
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:first-child {
bottom: 55px !important;
font-size: 30px !important;
line-height: 35px !important;
}
}
@media (max-width: 540px) {
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span,
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
font-size: 35px !important;
}
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
margin-right: 20px !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::after {
height: 35px !important;
width: 25px !important;
margin-top: 28px !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper {
padding: 0px 50px 20px 65px !important;
}
}
@media (max-width: 480px) {
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
margin-right: 15px !important;
}
.work-grid .myportfolio-container ul li .esg-bc.eec .esg-bottom:first-child {
bottom: 45px !important;
font-size: 28px !important;
line-height: 34px !important;
}
}
@media (max-width: 425px) {
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper {
padding: 0px 10px 20px 10px !important;
}
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span,
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
font-size: 33px !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::after {
right: -5px !important;
position: relative !important;
}
}
@media (max-width: 400px) {
body .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
margin-right: 10px !important;
}
}
@media (max-width: 390px) {
body #ourWorkU .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span,
body #ourWorkU .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
font-size: 30px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span,
body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
font-size: 40px !important;
}
body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
margin-right: 15px !important;
} body .work-grid .esg-filters.esg-multiplefilters {
display: flex !important;
flex-direction: column !important;
column-gap: 0;
row-gap: 0 !important;
} body .work-grid .esg-filters.esg-multiplefilters .esg-filter-wrapper {
width: 100% !important;
} #ourWorkU .our-work-row {
padding-top: 0 !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.expertise .esg-dropdown-wrapper {
display: flex !important;
position: relative !important;
opacity: 0;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1338px;
width: 100%;
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0 !important;
top: 0;
z-index: 0;
transition: max-height 0.6s ease 0.1s, padding-bottom 0.6se ase, opacity 0.4s ease;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.industries .esg-dropdown-wrapper {
display: flex !important;
opacity: 0;
position: relative !important;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1360px;
width: 100%;
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0 !important;
top: 0;
left: 0;
z-index: 0;
transition: max-height 0.6s ease 0.4s, padding-bottom 0.6s ease, opacity 0.4s ease;
} .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton {
width: fit-content !important;
flex-basis: 48% !important;
} .work-grid .esg-multiplefilters .esg-filter-wrapper.open .esg-dropdown-wrapper {
max-height: 1000px !important;
padding-bottom: 30px !important;
margin: 30px 0 0 0 !important;
opacity: 1 !important;
transition: max-height 0.6s ease 0.4s, padding-bottom 0.6s ease, opacity 0.4s ease !important;
}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
.work-grid .esg-multiplefilters .esg-filter-wrapper.expertise .esg-dropdown-wrapper {
display: flex !important;
position: relative !important;
opacity: 0;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1338px;
width: 100%;
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0 !important;
top: 0;
z-index: 0;
transition: max-height 0.6s ease 0.1s, padding-bottom 0.6s ease, opacity 0.4s ease;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.industries .esg-dropdown-wrapper {
display: flex !important;
opacity: 0;
position: relative !important;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1360px;
width: 100%;
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0 !important;
top: 0;
left: 0;
z-index: 0;
transition: max-height 0.6s ease 0.4s, padding-bottom 0.6s ease, opacity 0.4s ease;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton {
width: fit-content !important;
flex-basis: 48% !important;
}
}
@media only screen and (min-width: 320px) and (max-width: 599px) {
.work-grid .esg-multiplefilters .esg-filter-wrapper.expertise .esg-dropdown-wrapper {
display: flex !important;
position: relative !important;
opacity: 0;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1338px;
width: 100%;
justify-content: flex-start;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0 !important;
top: 0;
z-index: 0;
transition: max-height 0.6s ease 0.1s, padding-bottom 0.6s ease, opacity 0.4s ease;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.industries .esg-dropdown-wrapper {
display: flex !important;
opacity: 0;
position: relative !important;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1360px;
width: 100%;
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0 !important;
top: 0;
left: 0;
z-index: 0;
transition: max-height 0.6s ease 0.4s, padding-bottom 0.6s ease, opacity 0.4s ease;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton {
width: fit-content !important;
flex-basis: 100% !important;
}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
.grid-work-header {
height: auto !important;
margin: 0 0 40px 0;
}
.grid-work-header span.search-criteria {
font-size: 45px;
line-height: 55px !important;
}
body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span,
body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
font-size: 30px !important;
line-height: 80px !important;
}
body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::before {
margin-right: 15px !important;
}
body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span::after {
height: 24px !important;
width: 24px !important;
position: absolute !important;
margin-top: 0 !important;
top: 32px !important;
right: 11px !important;
} body .work-grid .esg-filters.esg-multiplefilters {
display: flex !important;
flex-direction: column !important;
column-gap: 0;
row-gap: 0 !important;
} body .work-grid .esg-filters.esg-multiplefilters .esg-filter-wrapper {
width: 100% !important;
} body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button span {
height: auto !important;
padding: 0 11px 0 0 !important;
position: relative;
top: -2px;
}
body #ourWorkU .work-grid #our_work .esg-multiplefilters .esg-filter-wrapper .esg-mobile-filter-button {
min-height: 80px !important;
max-height: 80px !important;
margin-bottom: 0 !important;
padding: 0 0 0 0 !important;
} #ourWorkU .our-work-row {
padding-top: 0 !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.expertise .esg-dropdown-wrapper {
display: flex !important;
position: relative !important;
opacity: 0;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1338px;
width: 100%;
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0 !important;
top: 0;
z-index: 0;
transition: max-height 0.6s ease 0.1s, padding-bottom 0.6s ease, opacity 0.4s ease;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.industries .esg-dropdown-wrapper {
display: flex !important;
opacity: 0;
position: relative !important;
background: transparent;
padding: 0 0 0 0 !important;
flex-wrap: wrap;
max-width: 1360px;
width: 100%;
justify-content: space-between;
max-height: 0;
overflow: hidden;
margin: 0 0 0 0 !important;
top: 0;
left: 0;
z-index: 0;
transition: max-height 0.6s ease 0.4s, padding-bottom 0.6s ease, opacity 0.4s ease;
} .work-grid .esg-multiplefilters .esg-filter-wrapper .esg-dropdown-wrapper .esg-filterbutton {
width: fit-content !important;
flex-basis: 100% !important;
} .work-grid .esg-multiplefilters .esg-filter-wrapper.open .esg-dropdown-wrapper {
max-height: 255px !important;
overflow-y: scroll !important;
padding-bottom: 30px !important;
margin: 0 0 0 0 !important;
opacity: 1 !important;
transition: max-height 0.6s ease 0.4s, padding-bottom 0.6s ease, opacity 0.4s ease !important;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.open .esg-dropdown-wrapper::-webkit-scrollbar {
width: 7px;
visibility: visible;
opacity: 1;
}
.work-grid .esg-multiplefilters .esg-filter-wrapper.open .esg-dropdown-wrapper::-webkit-scrollbar-thumb {
width: 7px;
border-radius: 4px;
visibility: visible;
opacity: 1;
background-color: #000;
}
.work-grid #our_work .esg-multiplefilters .esg-filter-wrapper.open::after {
content: 'Scroll Down';
display: block;
width: 100%;
height: 40px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 40px;
text-align: center;
}
#ourWorkU h3.sub-heading {
margin-bottom: 0 !important;
}
#ourWorkU .esg-nav-by-shortcode {
margin-bottom: 20px;
}
h2#workgrid-heading {
font-family: 'Merriweather', serif;
font-size: 45px;
text-align: left;
line-height: 55px;
font-weight: bold;
display: inline;
background: linear-gradient(to bottom, transparent 46%, white 46%, white 94%, transparent 93%);
background-size: 0% 100%;
background-repeat: no-repeat;
background-position: left;
padding: 5px 30px 0 0;
animation: highlight-grow 3sease-out forwards;
}
}
#ourWorkU .esg-overflowtrick.fadeOut {
opacity: 0;
transition: ease opacity 0.4s
}
#ourWorkU .esg-overflowtrick.fadeIn {
opacity: 1;
transition: ease opacity 0.4s
}
#ourWorkU .mainul.fadeOut {
opacity: 0;
transition: ease opacity 0.4s
}