/* Theme Name: Food Safety Innovation Lab Theme URI: http://fsil.jacksonskyclients.com/ Author: Jackson Sky Web Design & Development Author URI: https://jacksonsky.com/ Description: This is a custom responsive theme designed and developed exclusively for Food Safety Innovation Lab. Version: 1.0 */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Normalize 2.0 Accessibility 3.0 Alignments 4.0 Clearings 5.0 Typography 6.0 Forms 7.0 Formatting 8.0 Lists 9.0 Tables 10.0 Links 11.0 Navigation 12.0 Layout 12.1 Header 12.2 Regular Content 12.3 Content Layouts 12.4 Sidebar Content 12.5 Footer 12.6 Home Page 12.7 Interior Pages 12.8 Page Elements 12.9 Posts 12.10 MISC Universal Styles 13.0 Comments 14.0 Widgets 15.0 Media 15.1 Galleries 16.0 Media Queries 16.1 Query sm - Over 576px 16.2 Query md - Over 768px 16.3 Query lg - Over 992px 16.2 Query xl - Over 1200px 17.0 Print --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 Normalize - See Stylesheet normalize.css --------------------------------------------------------------*/ /* But it is not enough now, below dont hide play button parent div */ *::-webkit-media-controls-panel { display: none!important; -webkit-appearance: none; } /* Old shadow dom for play button */ *::--webkit-media-controls-play-button { display: none!important; -webkit-appearance: none; } /* New shadow dom for play button */ /* This one works */ *::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } /*-------------------------------------------------------------- 2.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ /* Hide visually and from screen readers */ .hidden {display: none !important;} /* * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} /** Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;} /** Hide visually and from screen readers, but maintain layout */ .invisible {visibility: hidden;} /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus {background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */} /*-------------------------------------------------------------- 3.0 Alignments --------------------------------------------------------------*/ .alignleft {display: inline; float: left; margin-right: 1.5em;} .alignright {display: inline; float: right; margin-left: 1.5em;} .aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;} /*-------------------------------------------------------------- 4.0 Clearings --------------------------------------------------------------*/ /**** Clearfix update ****/ .group:before, .group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } * html .group { zoom: 1; } /* IE6 */ *:first-child+html .group { zoom: 1; } /* IE7 */ /*-------------------------------------------------------------- 5.0 Typography --------------------------------------------------------------*/ body, button, input, select, textarea { font-family: 'Poppins', 'Open Sans', Helvetica, Arial, sans-serif; font-size:18px; color:#403b33; font-weight: 400; font-style:normal; line-height:1.8; letter-spacing:.025em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6{font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif; font-weight:700; color:#94a545; line-height:1.2; margin:0; padding:0; margin-bottom:.5em;} h1{font-size:36px; margin-bottom:0; color: #fff; letter-spacing: .05em;} h1.page-title, #hero-section .page-title{font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif; font-weight:700; color:#fff; font-size:36px; margin-bottom:0; letter-spacing: .05em; text-transform: uppercase; line-height: .9;} .entry-content h1{font-size:32; color:#94a545; text-transform: uppercase; margin-bottom:.5em; letter-spacing: .025em;} h1.title-small{font-size: 18px;} h2{ font-size:28px; text-transform: uppercase;} #projectTitle h2{text-transform: none;} h3{ font-size:24px; } h4{ font-size:20px; color: #d37d28;} h5{ font-size: 16px;} h6{ font-size:16px;} p {margin: 0 0 1.8em; padding: 0;} #content{font-size: 16px;} dfn, cite, em, i {font-style: italic;} blockquote { color: #666; font-size: 18px; font-size: 1.125rem; font-style: italic; line-height: 1.7; margin: 0; overflow: hidden; padding: 0 0 0 1em; margin-bottom:1.5em; border-left:7px solid #F3EFEA; } blockquote cite { display: block; font-style: normal; font-weight: 600; margin-top: 0.5em; } address { margin: 0 0 1.5em;} pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #eee; text-decoration: none; } .big {font-size: 125%;} .light{ font-weight:300;} .normal{font-weight:400;} .semibold{font-weight:600;} .strong, strong{font-weight:700;} blockquote {quotes: "" "";} q {quotes: "“" "”" "‘" "’";} blockquote:before, blockquote:after {content: "";} :focus {outline: none;} .uppercase{text-transform: uppercase;} sup{ position: relative; top: 0; font-size: 50%; vertical-align: super; } /*-------------------------------------------------------{------- 6.0 Forms --------------------------------------------------------------*/ label { color: #676767; display: block; font-weight: 600; margin-bottom: 0.35em; font-size:14px; } .woocommerce label { color: #676767; margin-bottom: .1em; } .pardot-form label{color:#fff;} fieldset { margin-bottom: 1em; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select{ color: #686868; background: #fff; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); border: 1px solid #bbb; display: block; padding: 0.5em; font-size:14px; width: 100%; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #222; border-color: #333; } textarea { resize: vertical; } select { border: 1px solid #bbb; max-width: 100%; } input[type="radio"], input[type="checkbox"] { margin-right: 0.5em; } input[type="radio"] + label, input[type="checkbox"] + label { font-weight: 400; } /************* Buttons **********/ button,.button, .buttonAlt, a.button, input[type="button"], input[type="submit"], .woocommerce .section #respond input#submit.alt, .woocommerce .section a.button.alt, .woocommerce .section button.button.alt, .woocommerce .section input.button.alt, .section .woocommerce #respond input#submit.alt, .section .woocommerce a.button.alt, .section .woocommerce button.button.alt, .section .woocommerce input.button.alt, .section .woocommerce button.button.alt.disabled, .woocommerce .section button.button.alt.disabled, .woocommerce .section button.button.alt.disabled:hover { font-family: 'Poppins', 'Open Sans', Helvetica, Arial, sans-serif; text-transform:uppercase; text-align: center; background-color: #4799B5; border: 0; -webkit-box-shadow: none; box-shadow: none; color: #fff; cursor: pointer; display: inline-block; font-size: 16px; font-weight: 800; letter-spacing: .075em; line-height: 1; padding: .6em .65em .6em; text-shadow: none; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; margin-right: 10px; margin-bottom: 7px; text-decoration: none !important; } .button:after { font-family: 'FontAwesome'; content: '\f0a9'; padding-left: 5px; position: relative; } button:hover,.button:hover, .buttonAlt:hover, a.button:hover, input[type="button"]:hover, input[type="submit"]:hover, .woocommerce .section #respond input#submit.alt:hover, .woocommerce .section a.button.alt:hover, .woocommerce .section button.button.alt:hover, .woocommerce .section input.button.alt:hover, .section .woocommerce #respond input#submit.alt:hover, .section .woocommerce a.button.alt:hover, .section .woocommerce button.button.alt:hover, .section .woocommerce input.button.alt:hover{ color:#fff; text-decoration:none !important; background-color:#2c7b96;} button.buttonAlt, .button.buttonAlt, .buttonAlt, a.buttonAlt{background:#013966; color:#fff;} button.buttonAlt:hover, .button.buttonAlt:hover, .buttonAlt:hover, a.buttonAlt:hover{ background: #021f36; color:#fff; text-decoration: none !important;} a.buttonAlt.small{font-weight: 500; font-size: 14px; padding: .75em 1em;} .button.small{font-weight:700; font-size: 14px;} .trans2{-o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} /********* Placeholders **********/ /* Placeholder text color -- selectors need to be separate to work. */ ::-webkit-input-placeholder { color: #9f9f9f; font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif; } :-moz-placeholder { color: #9f9f9f; font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif; } ::-moz-placeholder { color: #9f9f9f; font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } :-ms-input-placeholder { color: #9f9f9f; font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif; } /*-------------------------------------------------------------- 7.0 Formatting --------------------------------------------------------------*/ hr { background-color: #dfe4e5; border: 0; height: 7px; margin-bottom: 1.5em; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } .inline-block{display: inline-block;} /*-------------------------------------------------------------- 8.0 Lists --------------------------------------------------------------*/ ul, ol { margin: 0 0 2em 2em; padding: 0;} ul {list-style: disc;} ol {list-style: decimal;} li{ padding-left:0; margin-bottom:.5em;} li > ul, li > ol {margin-bottom: 0; margin-left: 1.5em;} dt {font-weight: 700;} dd {margin: 0 1.5em 1.5em;} /*-------------------------------------------------------------- 9.0 Tables --------------------------------------------------------------*/ table { border-collapse: collapse; margin: 0 0 1.5em; width: 100%;} thead th { border-bottom: 2px solid #bbb; padding-bottom: 0.5em;} th { padding: 0.4em; text-align: left; } tr { border-bottom: 1px solid #eee;} td {padding: 0.4em;} th:first-child,td:first-child {padding-left: 0;} th:last-child,td:last-child {padding-right: 0;} /*** Pseudo Table Styles****/ .table{display:table;} .tableRow{display:table-row;} .tableCell{display:table-cell;} .tableMiddle{ vertical-align:middle;} .vert50{ height:50%;} /*-------------------------------------------------------------- 10.0 Links --------------------------------------------------------------*/ a{color:#4799B5; text-decoration: none;} #main .entry-content a{text-decoration: underline;} a:hover{color:#2C7B96; text-decoration:underline;} a.alt{color:#35b585;} a.alt:hover{color:#0b744d;} a:active, a:focus{outline:none;} /*-------------------------------------------------------------- 11.0 Navigation --------------------------------------------------------------*/ /********* Main Navigation ********/ #main-navigation-row{background:#4799b5;} #mainNav{} #mainNav ul{} #mainNav ul li{} #mainNav ul li a{} #mainNav ul li a:hover{} #mainNav ul li.active a{} /*** Mega Menu ***/ #main-navigation #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #main-navigation #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #main-navigation #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link, #main-navigation #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link:hover, #main-navigation #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link{font-weight: 600; } /*-------------------------------------------------------------- 12.0 Layout --------------------------------------------------------------*/ html, body { height: 100%; } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body { display: flex; flex-direction: column; background: #fff; background: rgba(255,255,255,1); } #site-main-frame{flex: 1 0 auto;} /*-------------------------------------------------------------- 12.1 Header --------------------------------------------------------------*/ /***** Mobile Header *****/ #mobile-top img{width: 225px; height: auto;} #mobile-title-holder{line-height: 1.2;} a.mobile-title{ color:#fff; line-height: 1.2; font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif; font-weight:700; font-size: 16px;} /***** Main Header *****/ #site-header{flex-shrink: 0; background: #fff; width: 100%; z-index: 100; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #site-header .site-logo img{width: auto; height: auto; max-height: 100%; max-width: 100%;} #site-header .site-title-con{} #site-header .site-title{font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif; font-weight:700; font-size:28px; text-transform: uppercase; color:#94a545; line-height: 1.1; border-left:4px solid #bfbfbf;} #site-header .site-title a{color: #94a545;} #site-header .site-title a:hover{text-decoration: none; color:#64721c; } #site-header .py-lg-4{-moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #site-header .site-logo{ -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #site-header .row.py-4.h-row{-moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} /** header shrink **/ #site-header.shrink .row.py-4.h-row{padding:10px !important;} /*-------------------------------------------------------------- 12.2 Regular Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- 12.3 Content Layouts --------------------------------------------------------------*/ /*-------------------------------------------------------------- 12.4 Sidebar Content --------------------------------------------------------------*/ #sidebar h3{font-size: 28px; color:#94a545; line-height: 1; margin-bottom: .6em; letter-spacing: .05em; text-transform: uppercase;} #sidebar ul.sidebar-list{list-style: none; margin: 0; padding: 0 0 .3em; font-size:16px;} #sidebar ul.sidebar-list li{line-height: 1.2; margin-bottom: .75em;} #sidebar a{text-decoration: none;} #sidebar a:hover{text-decoration:underline;} #sidebar h4{color:#403b33; text-transform: uppercase;} #sidebar hr{ background: #d37d28;} /*** Single Sidebar ****/ .single-sidebar h4{color:#403b33; text-transform: uppercase;} .single-sidebar .side-section hr{ background: #d37d28;} .single-sidebar .side-section{font-size: 14px; line-height: 1.3;} /*-------------------------------------------------------------- 12.5 Footer --------------------------------------------------------------*/ #main-footer{flex-shrink: 0; background:#403b33; color: #fff; font-size: 12px; font-weight:500; line-height: 1.7;} #main-footer .bg-split-fix-right{background:#4799b5;} #main-footer .footer-right-side{background:#4799b5;} #main-footer a{color:#fff; text-decoration: underline;} #main-footer a:hover{} #main-footer h2, #main-footer h3, #main-footer h4{color: #fff;} #main-footer h3{font-size: 24px; text-transform: uppercase;} #main-footer .footer-contact p{margin-bottom: .5em;} #main-footer .footer-signup input[type="text"], #main-footer .footer-signup input[type="email"]{color:#fff; background:#3f87a0; border: 0 none; font-family: 'Open Sans', Helvetica, Arial, sans-serif;} #main-footer .footer-signup input[type="text"]::placeholder, #main-footer .footer-signup input[type="email"]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 1; /* Firefox */} #main-footer .footer-signup input[type="text"]:-ms-input-placeholder, #main-footer .footer-signup input[type="email"]:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff;} #main-footer .footer-signup input[type="text"]::-ms-input-placeholder, #main-footer .footer-signup input[type="email"]::-ms-input-placeholder{ /* Microsoft Edge */ color: #fff;} #main-footer .footer-signup input[type="submit"]{padding: .5em; font-size: 14px; font-weight: 500; background:#2a596a; width: 100%; max-width: 200px; line-height: 1.8;} #main-footer .footer-signup input[type="submit"]:hover{background:#113a47;} /*-------------------------------------------------------------- 12.6 Home Page --------------------------------------------------------------*/ .home #hero-section{padding:28px 0;} .home #hero-section a.banner-link{color:#fff; font-weight: 600; text-transform: uppercase; text-shadow: 0px 0px 14px rgba(0,0,0,0.84);} /****** Section Partners ******/ .home #home-partners{background:#403b33;} /****** Section Partners ******/ .home #home-featured-project{background:#fff; } .home #home-featured-project .home-featured-image{background-size:cover; background-repeat: no-repeat; background-position: center; padding-bottom: 45%;} .home #home-featured-project .half-sizer{} .home #home-featured-project h2{letter-spacing: .05em; line-height: 1;} .home #home-featured-project h3{font-family: 'Poppins', 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 600; font-size:18px;} .home #home-featured-project hr.featured-hr{background:#d37d28; margin-left: 0; width:35%;} .home #home-featured-project .featured-link{font-weight: 600px; font-size: 24px; text-transform: uppercase;} /****** Section Partners ******/ .home #home-cta{background:#e6e7e8; } .home #home-cta .cta-card{background:#fff; line-height: 1.5;} .home #home-cta .cta-icon{font-size:72px; color:#94a545;} .home #home-cta h3{text-transform: uppercase;} .home #home-cta .cta-link{text-transform: uppercase; font-weight:600;} .home #home-cta .cta-news-link{font-weight: 600;} .home #home-cta .cta-date{color:#8b8171;} /*-------------------------------------------------------------- 12.7 Interior Pages --------------------------------------------------------------*/ /***** Map *****/ /*** Window ***/ #wpsl-gmap .wpsl-info-window h3{ font-size: 20px; font-family: 'Poppins', 'Open Sans', Helvetica, Arial, sans-serif;} /*** search ***/ #wpsl-wrap .wpsl-search{background:#7E9A9E} #wpsl-wrap .wpsl-search label {color:#fff; font-size: 16px;} #wpsl-wrap #wpsl-search-wrap .wpsl-input, #wpsl-wrap #wpsl-search-wrap .wpsl-select-wrap{display: block;} #wpsl-wrap #wpsl-search-btn, #wpsl-wrap #wpsl-search-wrap #wpsl-radius, #wpsl-wrap #wpsl-search-wrap #wpsl-results, #wpsl-wrap #wpsl-search-wrap .wpsl-input input, #wpsl-wrap #wpsl-search-wrap .wpsl-input label{display:block;} #wpsl-wrap #wpsl-search-wrap .wpsl-input{width:100%;} #wpsl-wrap .wpsl-select-wrap{width:100%;} #wpsl-wrap #wpsl-radius{padding-bottom: 10px;} #wpsl-wrap #wpsl-radius, #wpsl-wrap #wpsl-results{width:100%; margin-right: 0; padding-right: 10px;} #wpsl-wrap #wpsl-search-btn, #wpsl-wrap #wpsl-search-wrap input, #wpsl-wrap .wpsl-dropdown {border: 0 none; border-radius: 0;} #wpsl-wrap .wpsl-search #wpsl-search-input, #wpsl-wrap .wpsl-search .wpsl-dropdown, #wpsl-wrap .wpsl-search #wpsl-search-btn{font-size: 16px;} #wpsl-wrap .wpsl-search #wpsl-search-input{width: 150px;} #wpsl-wrap .wpsl-search .wpsl-input label {padding-right:10px;} #wpsl-wrap .wpsl-input label, #wpsl-wrap #wpsl-radius label, #wpsl-wrap #wpsl-category label{width: auto;} #wpsl-wrap .wpsl-search-btn-wrap #wpsl-search-btn{background-color: #569374; background-image: none; border:solid #fff 1px; color:#fff; text-transform: uppercase !important;} #wpsl-wrap .wpsl-search-btn-wrap #wpsl-search-btn:hover{background:#387053;} #wpsl-wrap .wpsl-search-btn-wrap {margin-right: 0 !important;} #wpsl-wrap #wpsl-search-wrap div{margin-right: 0;} /*** List ****/ #wpsl-wrap.wpsl-store-below #wpsl-result-list li.store-item{background:#DFE4E5;} #wpsl-wrap.wpsl-store-below #wpsl-result-list li.store-item h3 {color:#569374; padding-bottom: 0; margin-bottom: 0;} #wpsl-wrap.wpsl-store-below li.store-item .item-location{line-height: 1.3;} #wpsl-wrap .item-title{border-bottom: #b7c9c5 7px solid;} /******** Project List and Map Page ********/ #map .gm-style-iw{max-width: 400px !important;} #map .gm-style-iw hr{height: 1px; margin-bottom: .5em;} #map .gm-style-iw h5{font-family: 'Poppins', 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 15px;} .search-area #country, .search-area #status{height: 41px;} .search-area .clear{background:#4799B5; display: inline-block; color:#fff; line-height: 41px; padding-left: 1em; padding-right: 1em; font-size: 16px; text-transform: uppercase;} .search-area .clear:hover{text-decoration: none; background:#2C7B96;} #project-list .bar-card {background:#e6e7e8;} #project-list .project-meta {line-height: 1.2;} .search-area .results{font-size: 16px; text-align: center; line-height: 41px; background: #f2f3f4;} /******* Our Team ******/ .team .box{background:#E6E7E8;} .team .hs-box{font-size: 12px; line-height: 1.3; } .team .hs-name{font-size: 16px; font-weight: 700;} /******* Project Single ******/ .single-project h3{color:#403b33;} #project-sidebar h4{color:#403b33; text-transform: uppercase;} #project-sidebar .side-section hr{ background: #d37d28;} #project-sidebar .side-section{font-size: 14px; line-height: 1.3;} #project-sidebar .side-section .item-title{ font-weight: 600; text-transform:uppercase;} #project-sidebar .side-section .info .name{font-weight: 500;} /******** Resources List ********/ #resources-list .bar-card {background:#e6e7e8;} #resources-list a, #resources-list .entry-content a{text-decoration: none;} #resources-list a .resource-icon{font-size:24px; color:#4799B5;} #resources-list a .circle-center{border: 6px solid #4799B5; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #resources-list a:hover .circle-center{background:#fff;} #resources-list .resource-description{line-height: 1.5; font-size: 16px;} #resources-list .resource-description p:last-child{margin-bottom: 0; } #resources-list .project-meta{line-height: 1.2;} /*** Sidebar ***/ #resources-sidebar h4{color:#403b33; text-transform: uppercase;} #resources-sidebar .side-section hr{ background: #d37d28;} #resources-sidebar .side-section{font-size: 14px; line-height: 1.3;} #resources-sidebar .side-section .item-title{ font-weight: 600; text-transform:uppercase;} #resources-sidebar .side-section .info .name{font-weight: 500;} #resources-sidebar ul.sidebar-list{list-style: none; margin: 0; padding: 0 0 .3em; font-size:14px;} #resources-sidebar ul.sidebar-list li{line-height: 1.2; margin-bottom: .75em;} #resources-sidebar a{text-decoration: none;} #resources-sidebar a:hover{text-decoration:underline;} /******* Resource Single *********/ #resource-description h3{text-transform: uppercase; color:#403b33;} .meta-resource{font-size: 14px; line-height: 1.2;} /******** Global Themes ********/ #priorities-section .priority-item{background:#e6e7e9;} .pri-icon{background: #fff; font-size: 72px; color:#94a545 ;} #priorities-section .priority-item ul{font-size: 15px; line-height: 1.4;} #priorities-section h3{text-transform: uppercase;} /******** Systemic Changes in Food Systems ********/ #ways-section .way-item{background:#e6e7e9;} .way-icon{background: #fff; font-size: 72px; color:#94a545 ;} #ways-section h3{text-transform: uppercase;} .sy-sidebar{color:#94a545; font-size: 14px; line-height: 1.4; } /******* 404 ********/ #searchform #s{max-width: 400px; margin-bottom: .75em;} /*-------------------------------------------------------------- 12.8 Page Elements --------------------------------------------------------------*/ /**** Banner Area ****/ #hero-section.no-image{height: auto;} #hero-section{background-repeat: no-repeat; background-size: cover; position: relative; padding:28px 0; background-color:#403c33; color:#fff; font-size:16px;} #hero-section .parent-title{font-size:14px; color:#fff; text-transform:uppercase;} #hero-section hr{background: #d37d28; width: 40%; margin-left: 0;} #hero-section .page-intro p:last-child{margin-bottom: 0; } /*** Featured Project ****/ section#featured-project{background: #e6e7e8; font-size: 16px; font-weight: 500;} section#featured-project h2{font-size: 30px; text-transform: uppercase; line-height: 1;} section#featured-project h3{font-family: 'Poppins', 'Open Sans', Helvetica, Arial, sans-serif;; font-size: 18px; font-weight:600;} section#featured-project hr.featured-hr{background: #d37d28; width: 50%; margin-left: 0;} section#featured-project .featured-link{font-weight: 600px; font-size: 24px; text-transform: uppercase;} section#featured-project .featured-image{max-width: 400px; margin: 0 auto;} /**** Map ****/ #map{width: 100%; height: 350px;} /****** Resources Search Form *****/ #search-resources{background:#E6E7E8;} #search-resources-form h2{margin-bottom: 0;} #search-resources-form form ul{padding:0; margin: 0; color:#5e5e5e;} #search-resources-form form ul li{display:inline-block;} #search-resources-form form ul input, #search-resources-form form ul select{border:0; border-radius: 0;} #search-resources-form form ul select{ font-size: 16px; width: 100%; color:#5e5e5e;} #search-resources-form form ul li.sf-field-search {width: 100%;} #search-resources-form form ul li.sf-field-search label{width: 100%;} #search-resources-form form ul input.sf-input-text{font-size:24px; width: 100%;} #search-resources-form li label{width:100%;} #search-resources-form li.sf-field-taxonomy-value-chain-category{width:100%;} #search-resources-form li.sf-field-taxonomy-areas-of-inquiry-category{width:100%;} #search-resources-form li.sf-field-taxonomy-resource-country-category, #search-resources-form li.sf-field-taxonomy-type-category{width:100%} #search-resources-form li.sf-field-taxonomy-topics-category{width:100%;} #search-resources-form li.sf-field-taxonomy-resource-format{width:100%;} #search-resources-form li.sf-field-taxonomy-resource-use{width:100%;} /** Combo Box **/ #search-resources-form li .chosen-container-single .chosen-single{border:0; border-radius: 0; box-shadow: none; background-image: none; height: 2em; background: #fff; font-size:16px; color:#5e5e5e; font-weight: 400;} #search-resources-form li .chosen-container-single a.chosen-single{padding-left:5px;} #search-resources-form li .chosen-container-single .chosen-single span{line-height: 2em;} #search-resources-form li .chosen-container-single .chosen-single div b{background-position: 0 7px;} #search-resources-form .searchandfilter>ul>li[data-sf-combobox="1"] label{display: inline-block;} #search-resources-form li .chosen-container{top:-2px;} #search-resources-form li .chosen-container .chosen-drop{border:0; border-radius: 0;} #search-resources-form li .chosen-container .chosen-drop .chosen-search-input{background-color:#EEEEEE;} #search-resources-form li .chosen-container .chosen-drop .chosen-results li{display:block;} /*-------------------------------------------------------------- 12.9 Posts --------------------------------------------------------------*/ .blog-list article:last-of-type hr{display: none;} .single article:last-of-type hr{display: none;} .featuredCaption{color:#898681;} #paging-bottom{width:100%; display:block; clear:both;} #paging-bottom .alignleft, #paging-bottom .alignright{ background: #4799B5; display: block; width: 32%; } #paging-bottom .alignleft a, #paging-bottom .alignright a{ background: #4799B5; display: block; width: 100%; } #paging-bottom .alignleft { float: left; } #paging-bottom .alignright { float: right; } #paging-bottom .alignleft a, #paging-bottom .alignright a { color: #fff; text-decoration: none; font-weight: 500; display: block; width: 100%; text-align: center; text-transform: uppercase; padding: 10px 0; font-size: 16px; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; } #paging-bottom .alignleft a:hover, #paging-bottom .alignright a:hover { background: #2C7B96; } /******************* Blog Single ************************/ /********************* WordPress Styles *********************/ #postTitle h1{margin-bottom:5px !important; line-height:115%; text-transform:none;} #postTitle a {text-decoration:none;} #postInfo {color:#9f9f9f; font-size:14px; margin:0 0 20px 0; clear: both; font-style:italic;} #paging { display: block; text-align: center; margin-top: 60px; padding-bottom: 60px; font-weight:bold; font-size:14px; text-transform:uppercase; } /*-------------------------------------------------------------- 12.10 MISC Universal Styles --------------------------------------------------------------*/ .center{text-align: center;} .bold{font-weight: 700;} .extrabold{font-weight: 800;} .credit{color: #2d2d2d; font-weight: 700; font-size: 12px;} .smalltext{font-size: 12px;} .centerBtn{text-align:center; display:block; width:100%;} .noPad{padding: 0;} .moreLink{text-transform: uppercase; font-weight: 800;} .wrapper.overflow-vis, .overflow-vis{overflow: visible;} .trans-2{-o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} .card, .card-img{-webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0;} .circle-center{display: flex; border: 6px solid #94a545; border-radius: 50%; width:100%; justify-content: center; align-items: center;} .circle-center:before{content:""; float: left; padding-top: 100%;} /**** background split center column ****/ .bg-split-fix-middle{flex: 0 0 auto;} .bg-split-fix-left, .bg-split-fix-right{ flex:1;} .bg-split-fix-right{background:#4799b5;} /***** Video responsive embeds ******/ .embed-container {position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto;} .embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /*-------------------------------------------------------------- 13 Comments --------------------------------------------------------------*/ /*-------------------------------------------------------------- 14 Widgets --------------------------------------------------------------*/ /*-------------------------------------------------------------- 15 Media --------------------------------------------------------------*/ img {vertical-align: middle; max-width:100%; height:auto;} img.alignleft {float:left; display:inline; margin:5px 20px 15px 0; max-width:38%; height:auto;} img.alignright {float:right; display:inline; margin:5px 0 15px 20px; max-width:38%; height:auto;} img.alignnone {margin: 0 0 10px 0; max-width:100%; height:auto;} img.aligncenter {clear: both; display: block; margin: 0 auto 10px; max-width:100%; height:auto;} .wp-caption.alignright{float:right; margin:5px 0 15px 5%; max-width:40%; height:auto; border:1px solid #e1dbd8;} .wp-caption.alignleft{float:right; margin:5px 5% 15px 0; max-width:40%; height:auto; border:1px solid #e1dbd8;} .alignright {float: right; margin: 0 0 5px 15px; display:inline;} .alignleft {float: left; margin: 0 15px 5px 0; display:inline;} .center{text-align:center;} .wp-caption.alignright img{ width:100%; height:auto;} p.wp-caption-text {margin:4px 0 15px; font-size:11px; color:#9F9B91;} .wp-caption img{margin:5px 15px 5px 0;} .wp-caption {margin-bottom:10px; text-align:center; font-size:11px; color:#9f9f9f; max-width: 100%;} .wp-caption p{margin-bottom:5px;} /******* Video ******/ .embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; margin-bottom: 1.25em; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /** Lazy Load video fix**/ .embed-container .rll-youtube-player{position: initial!important; padding-bottom: initial !important;} /*-------------------------------------------------------------- 15.1 Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 16 Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 16.1 Query sm - Over 576px --------------------------------------------------------------*/ @media only screen and (min-width : 576px) { /*----- Typography -------*/ h1.page-title, #hero-section .page-title{font-size: 44px;} h1.title-small{font-size: 22px;} .entry-content h1{font-size:36px;} h2{ font-size:32px;} h3{ font-size:28px;} h4{ font-size:24px;} h5{ font-size:16px;} h6{ font-size:16px;} #content{font-size: 18px;} /*------ Sidebar Content --------*/ #sidebar h3{font-size: 36px; margin-bottom: .7em;} #sidebar .side-navigation ul{padding: 0 0 .4em; font-size: 18px;} #sidebar .side-navigation ul li{margin-bottom: 1.3em;} #sidebar ul.sidebar-list{padding: 0 0 .4em; font-size: 18px;} #sidebar ul.sidebar-list li{margin-bottom: 1.3em;} /*----- Footer -----*/ #main-footer h3{font-size: 21px;} /*------------ Home Page ---------*/ .home #hero-section{padding:50px 0;} .home #home-featured-project .half-sizer{} .home #home-featured-project h3{font-size: 21px;} /*----- Interior Pages -------*/ #resources-list a .resource-icon{font-size:30px;} /******** Global Themes ********/ .pri-icon{font-size: 60px;} /*----- Page Elements ------*/ /**** Hero Image ****/ #hero-section{padding: 32px 0; font-size: 17px;} #hero-section .parent-title{font-size:16px;} /*** Featured Project ****/ section#featured-project h2{font-size: 36px;} section#featured-project h3{font-size: 21px;} /***** Search Resource Form ******/ #search-resources-form li.sf-field-taxonomy-value-chain-category{width:50%; padding-right: 2%;} #search-resources-form li.sf-field-taxonomy-areas-of-inquiry-category{width:50%;} #search-resources-form li.sf-field-taxonomy-resource-format{width:50%; padding-right: 2%;} #search-resources-form li.sf-field-taxonomy-resource-use{width:50%;} #search-resources-form li.sf-field-taxonomy-resource-country-category{width:50%; padding-right: 2%;} #search-resources-form li.sf-field-taxonomy-type-category{width:50%;} #search-resources-form li.sf-field-taxonomy-topics-category{width:50%; padding-right: 2%;} #search-resources-form li.sf-field-submit{display: block;} /**** Why Food Safety *****/ .way-icon{font-size: 36px; } } /*-------------------------------------------------------------- 16.2 Query md - Over 768px --------------------------------------------------------------*/ @media only screen and (min-width : 768px) { /*----- Typography -------*/ h1.page-title, #hero-section .page-title{font-size: 54px;} h1.title-small{font-size: 26px;} .entry-content h1{font-size:44px;} h2{ font-size:36px;} h3{ font-size:32px;} h4{ font-size:21px;} h5{ font-size:16px;} h6{ font-size:16px;} /***** Navigation *****/ #page #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator{display:none;} /***** Main Header *****/ #site-header{position: fixed;} /***** Content ******/ #content{padding: 184px 0 0;} /*----- Footer -----*/ #main-footer h3{font-size: 24px;} /*----- Forms -----*/ /************* Buttons **********/ button,.button, .buttonAlt, a.button, input[type="button"], input[type="submit"], .woocommerce .section #respond input#submit.alt, .woocommerce .section a.button.alt, .woocommerce .section button.button.alt, .woocommerce .section input.button.alt, .section .woocommerce #respond input#submit.alt, .section .woocommerce a.button.alt, .section .woocommerce button.button.alt, .section .woocommerce input.button.alt, .section .woocommerce button.button.alt.disabled, .woocommerce .section button.button.alt.disabled, .woocommerce .section button.button.alt.disabled:hover{font-size: 24px; padding: .5em .75em;} /*------------ Home Page ---------*/ .home #hero-section{padding:72px 0;} .home #home-featured-project .half-sizer{width: 384px;} .home #home-featured-project h3{font-size: 21px;} /*------------ Interior Page ---------------*/ /******** Global Themes ********/ .pri-icon{font-size: 44px;} /*------------ Page Elements ----------------*/ /***** Banner Area ****/ #hero-section{padding: 36px 0; font-size: 18px;} /*** Featured Project ****/ section#featured-project h2{font-size: 48px;} section#featured-project h3{font-size: 21px;} /***** Search Resource Form ******/ #search-resources-form li.sf-field-taxonomy-value-chain-category{width:50%; padding-right: 2%;} #search-resources-form li.sf-field-taxonomy-areas-of-inquiry-category{width:50%;} #search-resources-form li.sf-field-taxonomy-resource-country-category, #search-resources-form li.sf-field-taxonomy-type-category{width:33.3%; padding-right: 2%;} #search-resources-form li.sf-field-taxonomy-topics-category{width:33.3%; padding-right: 0;} #search-resources-form li.sf-field-taxonomy-resource-format{width:50%; padding-right: 2%;} #search-resources-form li.sf-field-taxonomy-resource-use{width:50%;} /*----- MISC Universal Styles -------*/ /**** background split center column ****/ .bg-split-fix{display: flex;} .bg-split-fix-middle .container{width: 2000px;} } /*-------------------------------------------------------------- 16.3 Query lg - Over 992px --------------------------------------------------------------*/ @media only screen and (min-width : 992px) { /*----- Typography -------*/ h1.page-title, #hero-section .page-title{font-size: 72px;} h1.title-small{font-size: 28px;} .entry-content h1{font-size:54px;} h2 { font-size:48px;} h3{ font-size:36px;} h4{ font-size:24px;} h5{ font-size:16px;} h6{ font-size:16px;} /*------------ Home Page ---------*/ .home #hero-section{padding:100px 0;} .home #home-featured-project .half-sizer{width: 496px;} /*------------ Interior Pages ----------*/ #resources-list a .resource-icon{font-size:36px;} /**** Why Food Safety *****/ .way-icon{font-size: 72px; } /******** Global Themes ********/ .pri-icon{font-size: 60px;} /*------------ Page Elements ----------------*/ /***** Banner Area ****/ #hero-section{padding: 50px 0; font-size: 21px;} /*** Featured Project ****/ } /*-------------------------------------------------------------- 16.4 Query xl - Over 1200px --------------------------------------------------------------*/ @media only screen and (min-width : 1200px) { /*----- Typography -------*/ h1.page-title, #hero-section .page-title{font-size: 96px;} h1.title-small{font-size: 30px;} h2{ font-size:48px;} h3{ font-size:36px;} h4{ font-size:24px;} h5{ font-size:16px;} h6{ font-size:16px;} /*** Single Sidebar ****/ .single-sidebar h4{font-size: 30px;} #sidebar h4{font-size: 30px;} /*------------ Home Page ---------*/ .home #hero-section{padding:120px 0;} .home #home-featured-project .half-sizer{width: 600px;} .home #home-featured-project h2{font-size: 72px;} .home #home-featured-project h3{font-size: 24px;} /*------------ Interior Pages ----------*/ /******** Global Themes ********/ .pri-icon{font-size: 72px;} /***** Project Single *******/ #project-sidebar h4{font-size: 30px;} /****** Resources ******/ #resources-sidebar h4{font-size: 30px;} #resources-list a .resource-icon{font-size:42px;} /*----- Page Elements -----*/ /***** Banner Area ****/ #hero-section{padding: 60px 0; font-size:24px;} /*** Featured Project ****/ section#featured-project h2{font-size: 72px;} section#featured-project h3{font-size: 24px;} } /*-------------------------------------------------------------- 17 Print --------------------------------------------------------------*/ /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after, *:first-letter, *:first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }