/** SERFAS FARMS RESPONSIVE STYLING AND CSS OVERRIDES **/ /*---------------------------------------------------------------------------------------------------------------------------------------- 1920+. RESPONSIVE CASES - SCALES DOWN ABOVE 1920 ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (min-width: 1921px) { /** GLOBAL STYLING **/ /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ } /*----------------------------------------------------------------------------------------------------------------------------------------- 1830. RESPONSIVE CASES - SCALES DOWN BELOW 1830 ------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1830px) { /** GLOBAL STYLING **/ /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ } /*----------------------------------------------------------------------------------------------------------------------------------------- 1650. RESPONSIVE CASES - SCALES SITE DOWN BELOW 1650px -----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1650px) { /** GLOBAL STYLING **/ #colophon #pre-footer .menu .menu-primary-container ul li.home-btn, #masthead #site-navigation.main-navigation .menu-primary-container ul li.home-btn { display:none; } /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ } /*---------------------------------------------------------------------------------------------------------------------------------------- 1440. RESPONSIVE CASES - SCALES SITE DOWN BELOW 1440px ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1440px) { /** GLOBAL STYLING **/ /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ } /*---------------------------------------------------------------------------------------------------------------------------------------- 1260. RESPONSIVE CASES - SCALES SITE BELOW 1260px ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1260px) { /** GLOBAL STYLING **/ #masthead #site-navigation.main-navigation .menu-primary-container ul li a { font-size:16px; padding:0 20px; } .site-header .site-branding { padding:24px 0 0 60px; } .site-header .site-branding a img { width: 275px; height: 177px; } /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ } /*---------------------------------------------------------------------------------------------------------------------------------------- 1182. RESPONSIVE CASES - SCALES SITE BELOW 1180 ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1179px) { /** GLOBAL STYLING **/ /** HOMEPAGE STYLING **/ #home-hero-container .module-fancy-heading { width:65%; } /** INTERIOR PAGE STYLING **/ } /*---------------------------------------------------------------------------------------------------------------------------------------- 1024. RESPONSIVE CASES - SCALES SITE BELOW 1024 ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1024px) { /** GLOBAL STYLING **/ .error404 .mobmenur-container, .post-template-default .mobmenur-container, .search-results .mobmenur-container, .page-template-default .mobmenur-container { top: 30px; margin-right: 20px; margin-top: 0px; } .error404 .mob-menu-header-holder, .post-template-default .mob-menu-header-holder, .search-results .mob-menu-header-holder, .page-template-default .mob-menu-header-holder { height:80px; } .error404 .mob-menu-header-holder, .error404 .mob-menu-header-holder, .post-template-default .mob-menu-header-holder, .post-template-default .mob-menu-header-holder .mob-menu-logo-holder, .search-results .mob-menu-header-holder, .search-results .mob-menu-header-holder .mob-menu-logo-holder, .page-template-default .mob-menu-header-holder, .page-template-default .mob-menu-header-holder .mob-menu-logo-holder { height:85px; display: flex; align-items: center; padding-left:10px; } .error404 .mob-menu-header-holder .mob-menu-logo-holder a, .post-template-default .mob-menu-header-holder .mob-menu-logo-holder a, .search-results .mob-menu-header-holder .mob-menu-logo-holder a, .page-template-default .mob-menu-header-holder .mob-menu-logo-holder a { width:105px; height:67px; display:block; } .error404 .mob-menu-header-holder .mob-menu-logo-holder a img, .post-template-default .mob-menu-header-holder .mob-menu-logo-holder a img, .search-results .mob-menu-header-holder .mob-menu-logo-holder a img, .page-template-default .mob-menu-header-holder .mob-menu-logo-holder a img { width:105px; height:67px !important; background:url('/wp-content/uploads/2026/02/serfas-farms-logo_425.png')no-repeat; background-size:105px auto; } .mob-menu-header-holder.scroll { background:#778d4e; } .mob-menu-header-holder.scroll .mobmenur-container i { color:#fff; } .error404 .mob-menu-header-holder.scroll .mob-menu-logo-holder a img, .post-template-default .mob-menu-header-holder.scroll .mob-menu-logo-holder a img, .search-results .mob-menu-header-holder.scroll .mob-menu-logo-holder a img, .page-template-default .mob-menu-header-holder.scroll .mob-menu-logo-holder a img { width:105px; height:67px !important; background:url('/wp-content/uploads/2026/03/serfas-farms-logo_425_wht.png')no-repeat; background-size:105px auto; } .mobmenu-panel .mobmenu-content .menu-primary-container #mobmenuright li a { font-family: "balboa", sans-serif; font-size: 18px; padding: 10px 0px 10px 20px; color: #fff; text-transform: capitalize; align-content: center; letter-spacing: 0.02em; } .mobmenu-panel .mobmenu-content .menu-primary-container #mobmenuright li .sub-menu li { padding-left:0; } .mobmenu-panel .mobmenu-content .menu-primary-container #mobmenuright li .sub-menu li a { font-size: 16px; padding: 6px 0 6px 34px; } .mobmenu-panel .mobmenu-content .menu-primary-container #mobmenuright li .sub-menu { padding: 0 0 16px 0; } .mob-expand-submenu i { font-size:18px; } #colophon #pre-footer .menu { display:none; } #colophon #pre-footer .branding { flex-basis:100%; } #colophon { background: #fff url(/wp-content/uploads/2026/03/sf-footer-mobile-bg.jpg) no-repeat; height:fit-content; background-position:right center; background-position: right bottom 40px; background-size: contain; } #colophon #pre-footer { height:fit-content; } /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ } /*---------------------------------------------------------------------------------------------------------------------------------------- 1000. RESPONSIVE CASES - SCALES SITE BELOW 1000 ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1000px) { /** GLOBAL STYLING **/ /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ #primary #sf-sponsorship-orgs .tb_text_wrap ul { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } /*---------------------------------------------------------------------------------------------------------------------------------------- M-820. RESPONSIVE CASES - SCALES SITE BELOW 820 ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 820px) { /** GLOBAL STYLING **/ /** HOMEPAGE STYLING **/ #home-hero-container .module-fancy-heading { width:100%; } .site-main.interior.content-area.our-history-company-profile .about-sf-video-container .serfas-family-gallery .tf_swiper-container .tf_swiper-slide .slide-content { position:relative; background: rgba(0, 0, 0, .95); } .site-main.interior.content-area.our-history-company-profile .about-sf-video-container .serfas-family-gallery .tf_swiper-container .tf_swiper-slide .slide-content .slide-title { width:95%; font-size:14px; line-height:18px; } .site-main.interior.content-area.our-history-company-profile .about-sf-video-container .serfas-family-gallery .tf_swiper-thumbs .tf_swiper-wrapper .tf_swiper-slide .slide-inner-wrap, .site-main.interior.content-area.our-history-company-profile .about-sf-video-container .serfas-family-gallery .tf_swiper-thumbs .tf_swiper-wrapper .tf_swiper-slide .slide-inner-wrap .slide-image, .site-main.interior.content-area.our-history-company-profile .about-sf-video-container .serfas-family-gallery .tf_swiper-thumbs .tf_swiper-wrapper .tf_swiper-slide .slide-inner-wrap .slide-image img { height:20px; } /** INTERIOR PAGE STYLING **/ } /*---------------------------------------------------------------------------------------------------------------------------------------- M-768. RESPONSIVE CASES - SCALES SITE BELOW 768 ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 767px) { /** GLOBAL STYLING **/ /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ #primary #sf-sponsorship-orgs .tb_text_wrap ul { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } /*---------------------------------------------------------------------------------------------------------------------------------------- M-600 RESPONSIVE CASES - SCALES SITE BELOW 600 ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 600px) { /** GLOBAL STYLING **/ #colophon .site-info { padding:10px 0; height:fit-content; flex-direction: column-reverse; } #colophon .site-info p { padding:10px 0 0 0; } #colophon .site-info .sep, #colophon .site-info a.site-by-coles { display:none; } .smooth-back-to-top-button.btn-right-side { right:20px; } /** HOMEPAGE STYLING **/ .page-template-default #page #home-hero-container .module-fancy-heading .fancy-heading .main-head { font-size: 56px; line-height: 58px; padding: 0 10% 0 0; } #home-hero-container .module-fancy-heading .fancy-heading .main-head {} #home-hero-container .serfas-farms-video { background: #778d4e; border-radius:6px; position: relative; z-index: 1; } #home-hero-container .serfas-farms-video .tb_text_wrap a { background:none; border:0px; padding:0; padding:12px 20px; display: block; } #home-hero-container .serfas-farms-video .tb_text_wrap a i { margin: 0px 0 0 12px; top: 2px; position: relative; } #home-body-container { background:none; } .home-services-container .module_column { padding:0 0 40px 0; } #home-stats-container { padding:75px 0; height:fit-content; } #home-stats-container .home-stats-boxes > .module_column { padding:25px 0; } .smooth-back-to-top-button.btn-right-side { right:20px !important; } .smooth-back-to-top-button, .wp-singular .smooth-back-to-top-button { bottom:25px !important; } /** INTERIOR PAGE STYLING **/ } /*---------------------------------------------------------------------------------------------------------------------------------------- M-425 RESPONSIVE CASES - SCALES SITE BELOW 425 ----------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 425px) { /** GLOBAL STYLING **/ /** HOMEPAGE STYLING **/ /** INTERIOR PAGE STYLING **/ }