﻿/*
Theme Name: CTB Inc
Theme URI: http://www.digitalhill.com/
Author: Digital Hill Multimedia
Author URI: http://www.digitalhill.com/
Description: This is the theme for CTBInc.com
Template: dhwp-base
Version: 1.0.0
License: Proprietary
Text Domain: ctbinc
Tags: 
see https://make.wordpress.org/themes/handbook/review/required/theme-tags/
see WordPress' CSS coding standards https://make.wordpress.org/core/handbook/coding-standards/css
*/

/* LIKELY SITE-SPECIFIC CHANGES */
html,body { font-family:"Roboto Condensed",sans-serif; color:#000; }
button, input, optgroup, select, textarea { font-family:"Roboto Condensed"; } /* overrides normalize */

h1, h2, h3, h4 { font-weight: bold; margin-bottom:.5em; }
h1, h2 { font-style: italic; }
h1 { font-size: 3em; }

.logo-container img { background-color: #fff; border-radius: 50%; padding: 4px; }

.dhmenu ul li:hover > a { background-color: #fece0b; }

.social-links,
.translation-header { text-align: right; position: relative; }
.social-links { z-index: 2; background-color: #5c5c5c; box-shadow:0 -10px 10px inset rgba(0,0,0,.2); padding:0; max-height:0; overflow:hidden; transition:all .2s ease-in-out; }
.social-links img { transition:all .2s ease-in-out; width:32px; }
.translation-header { z-index: 1; background-color: #fff; }

.social-links.share-me { max-height:50px;  }
.social-links.share-me img { padding:.5em 0; }

.dhmain { background: #f3f3f3 url(../svg/bg-body-e9e9e9.svg) repeat top center / 200px; }

/* cookie banner */
.cookiedisclaimer { z-index: 3; padding-top:1em; position: fixed; bottom: 0; left: 0; right: 0; background-color: #464646; color: #fff; box-shadow:0 0 15px rgba(0,0,0,.5); }
.cookiedisclaimer button { cursor: pointer; background-color: #f0f0f0; color: #000; border: 1px solid #f0f0f0; box-shadow: 0 0 5px rgba(0,0,0,.5); font-weight: bold; text-transform:uppercase; padding: .5em 1em; margin: .25em 0 0; }

/* news post adjustments */
.single-post .dhmain { background: #fff; }
.post-excerpt,
.single-post .contain-post { border: 1px solid #ccc; padding: 1em; border-radius: 1em; }
.single-post .contain-post h2 { font-style: normal; padding: 1rem; margin-bottom:1rem; margin-top:0; padding-top:0; border-bottom: 1px solid #ccc;  }
.single-post .contain-content { background-color: #ebebeb; padding:1em; }

a.back-to { text-decoration: none; }
a.back-to:hover,
a.back-to:focus,
a.back-to:active { text-decoration: underline; }

.contain-filters,
.contain-posts { background-color:#fff; margin-bottom:2em; margin-top:2em; padding:1em 0; }
.contain-filters { border:3px solid rgba(0,0,0,.1); border-left:none; border-right:none; }

.post-list.dhflex-wrap:after { content: ""; flex-basis: 31.55%; } /* attempts to avoid last row separating two items */
.post-excerpt h3 a { color: #a38300; text-decoration: none; }
.post-excerpt h3 a:hover,
.post-excerpt h3 a:focus,
.post-excerpt h3 a:active { text-decoration: underline; }

.dhwidget-area.social-links a:link, .dhwidget-area.social-links a:visited { opacity:1; }

.translation-header select { border: none; padding: .5em; margin: 0 .5em .5em; font-weight: bold; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 0 50px rgba(0,0,0,.2); background-color: #fff; }
.translation-header select,
.translation-header .share-ctb { display: inline-block; vertical-align:top; }
.share-ctb { cursor: pointer; }

.contain-filters p.filter { background: #ccc; font-style: italic; color: #666; }
.contain-filters .filter { box-sizing:border-box; border:1px solid #ccc; border-left:none; padding:.25em; text-align:center; font-size:1.2em; font-weight:bold; }
.contain-filters a.filter { margin: 1em 0; text-decoration:none; }
.contain-filters a.filter.selected,
.contain-filters a.filter:hover,
.contain-filters a.filter:focus,
.contain-filters a.filter:active { background-color: #fece0b; }

.ctbintro { background: #fdd01b url(../png/leaves-2.png) no-repeat top left; text-align: center; color:#000; font-style:italic; padding:4em 0 1em; }
.ctblabel { background: #f0be07; text-align: center; color:#fff; font-style:italic; padding:1px 0; }
.ctblabel p { margin:.25em; }
.ctbintro h1 { margin: .25em 0; }
.ctbintro p { margin: 0; font-size: 1.5em; }
.ctbintro:before { content: " "; display: block; background-color: rgba(255,255,255,.3); border: 1px solid rgba(235,201,74,.5); border-left:none; border-right:none; height:1em; position: absolute; top: 0; width: 100%; }


/* keep headlines closer to the things that follow them */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-bottom: 18px; }
.entry-content h1 + *,
.entry-content h2 + *,
.entry-content h3 + *,
.entry-content h4 + * { margin-top: 18px; }

.container-wrap { margin: 2em 0; border: 2px solid rgba(0,0,0,.1); border-left: none; border-right: none; background-color: #fff; border-image: linear-gradient(to right, #e9e9e9 0%,#d3d3d3 30%,#d3d3d3 70%,#e9e9e9 100%); border-image-slice: 1; padding: 0 2em; }

.wp-block-column > :first-child { margin-top:0; } /*the intent of this is to have text line up with images when they are next to eachother in columns, plus avoid having a double margin caused by the column and it's first child both having a margin */

table.wp-block-table { display:table; }
table.wp-block-table.alignwide,
table.wp-block-table.alignfull { width:100%; }


footer.dhwidget-area a:link,
footer.dhwidget-area a:visited { opacity: 1; }

footer.prefooter { z-index:2; position:relative; background-color: #fecd08; padding: 1em; border:none; box-shadow:0 10px 10px rgba(0,0,0,.2); }
footer.prefooter p { text-align: center; font-style: italic; font-weight: bold; margin: 0; color: #6b5603; }

.ctbcontact.dhflex,
.ctbphones.dhflex,
.ctbemail.dhflex { margin-bottom: 0; }
.ctbcontact h5 { color: #fecd08; font-size: 1.3em; margin-bottom: 0; }
.ctbcontact p.ownership { margin-top: 0; }

.ctbphones:before,
.ctbemail:before { content: " "; border-radius: 50%; background-color: #fff; background-size: 30px; background-repeat:no-repeat; background-position:center; display: block; float: left; width: 50px; height: 50px; margin-right: 1em; }
.ctbphones:before { background-image:url(../svg/icon-phone.svg); }
.ctbemail:before { background-image: url(../svg/icon-email.svg); }

.ctbphones p,
.ctbemail p { margin:0; }
.ctbemail a,
.ctbemail a:link,
.ctbemail a:visited { color: #fecd08; text-decoration:underline; display:inline-block; margin:.5em 0; font-size:1.1em; text-transform:uppercase; font-weight:bold; font-style:italic; }
.ctbemail a:active,
.ctbemail a:hover,
.ctbemail a:focus { text-decoration: none; }

.latestnews { background-color: rgba(255,255,255,.2); padding:1em 2em; color:#000; }
.latestnews h5 { font-size:1.3em; font-style:italic; text-transform:uppercase; }
.latestnews h6 { margin-bottom: 0; color: #fecd08; }
.latestnews p { margin-top:0; font-size:.9em; }


footer.footer { position:relative; z-index:1; background: #808285 url(../svg/pinstripe.svg) repeat top center; background-size:4px 8px; border: none; padding: 0; }
footer.footer .content-area { background-color: #808285; padding:2rem; }

footer.postfooter { background-color: #bcbec0; color: #fff; text-transform: uppercase; font-size: .9em; padding: 1em 0; border:none; }
footer.postfooter .ctbcopyright { font-style:italic; font-weight: bold; }
footer.postfooter .dhflex-wrap { flex-direction: row-reverse; }
footer.postfooter .dhflex { margin-bottom:0; }

/* home page adjustments */
.entry-content > .wp-block-nextend-smartslider3:first-child { margin-bottom:0; }
.entry-content > .wp-block-nextend-smartslider3:first-child + div.alignfull a { text-decoration:none; }
.entry-content > .wp-block-nextend-smartslider3:first-child + div.alignfull a:hover,
.entry-content > .wp-block-nextend-smartslider3:first-child + div.alignfull a:focus,
.entry-content > .wp-block-nextend-smartslider3:first-child + div.alignfull a:active { text-decoration: underline; }
.entry-content > .wp-block-nextend-smartslider3:first-child + div.alignfull { margin:0; }

/* ctbbrandlist shortcode styles */
.ctbpost-slider { background-color: #efeff0; padding: 1em 0; margin-top: 0 !important; background: linear-gradient(to right, #f3f3f3 0%,#eaeaea 30%,#eaeaea 70%,#f3f3f3 100%) }
.ctbpost-slider-outer { border: 2px solid rgba(0,0,0,.1); border-left: none; border-right: none; background-color: #fff; border-image: linear-gradient(to right, #e9e9e9 0%,#d3d3d3 30%,#d3d3d3 70%,#e9e9e9 100%); border-image-slice: 1; }
.ctbpost-slider-inner { display: flex; flex-flow: row nowrap; justify-content: flex-start; }
.ctbpost-slider-slide { float: left; flex-basis: 20%; transition: all .3s ease-in-out; }
.ctbpost-intro { flex-basis: 16%; padding: 1.5em 0; }
.ctbpost-intro h3,
.ctbpost-intro p { margin: 0; font-style: italic; color: #888; }
.ctbpost-intro p { font-size: .9em; text-transform: uppercase; }
a.ctbpost-nav { flex-basis: 2%; text-decoration: none; cursor: pointer; display: flex; color: #aaa; line-height: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
a.ctbpost-prev { border-right: 1px solid #ccc; }
a.ctbpost-next { border-left: 1px solid #ccc; }
a.ctbpost-prev:after { content: "►"; flex-basis: 100%; text-align: right; transform: rotateY(180deg); } /* ◀ isn't used here because in Edge, WordPress emojis replace it with an emoji design -- super annoying */
a.ctbpost-next:after { content: "►"; flex-basis: 100%; text-align: right; }


.ctbpost-slides-container { flex-basis: 80%; overflow: hidden; position: relative; }
.ctbpost-slides-wrapper { position:relative; left:0; transition:.3s left ease-in-out; height:100%; display: flex; flex-flow: row nowrap; justify-content: flex-start; }

a.ctbpost-link { display: flex; justify-content: center; align-items: center; }
.ctbpost-slides-wrapper a.ctbpost-link img { max-width: 90%; max-height:70%; }
a.ctbpost-nav.max:after { opacity:0; cursor:default; }
a.ctbpost-nav:hover,
a.ctbpost-nav:focus,
a.ctbpost-nav:active,
a.ctbpost-nav.active { color: #000; }
a.ctbpost-link:hover,
a.ctbpost-link:focus,
a.ctbpost-link:active,
a.ctbpost-link.active { background-color: #fecd08; color:#000; }
a.ctbpost-link:hover img,
a.ctbpost-link:focus img,
a.ctbpost-link:active img,
a.ctbpost-link.active img { filter: grayscale(100%); }
.brand-slider a.ctbpost-link span,
.brand-grid a.ctbpost-link span { display: none; }

.ctbpost-slider-slide a.ctbpost-link { min-width: 25%; border-right: 1px solid #ccc; }

.ctbpost-details-outer { border: 2px solid rgba(0,0,0,.1); padding: 1em 0; border-left: none; border-right: none; background-color: #fff; border-image: linear-gradient(to right, #fff 0%,#d3d3d3 30%,#d3d3d3 70%,#fff 100%); border-image-slice: 1; margin-top: 1em; }

.ctbpost-details .dhflex { margin-bottom:0; }
.ctbpost-details .dhflex.related-brands { margin-top: 1em; }
.related-brands h4,
.ctbpost-details .dhflex.width-50 h4 { color: #999; font-style: italic; font-weight: normal; margin-bottom: 0; }
.ctbpost-details .dhflex.width-50 ul { list-style-type: none; padding-left:.5em; margin:0; }
.ctbpost-details .dhflex.width-50 li { margin:0; }
.ctbpost-details h3.ctbpost-name { display:none; }

.ctbpost-details-close { text-align:right; }
.ctbpost-details-close a { display:inline-block; font-weight:bold; line-height:1; vertical-align:middle; padding:1px 7px 3px; border-radius:3px; text-decoration:none; font-size:1.2em; background-color:#fecd08;}

.ctbpost-grid { background-color:#fff; padding:3em 0 2em; }
.ctbpost-grid-wrapper { display: grid; grid-gap: .8em; }

.ctbpost-grid-slide { background-color:#fff; border:1px solid #ccc; margin-bottom:1%; text-decoration:none; }


.brand-grid .ctbpost-grid-wrapper { grid-template-columns: repeat(5, 1fr); }
.brand-grid .ctbpost-grid-slide { min-height: 10em; }
.brand-grid .ctbpost-grid-slide img { max-width:90%; }
.market-grid .ctbpost-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
.market-grid .ctbpost-grid-slide { line-height: 1.1; text-align: center; font-size: 1.5em; font-weight: bold; font-style: italic; border-radius: 1em; padding: .8em 0; }
.history-grid .ctbpost-grid-wrapper { grid-template-columns: repeat(4, 1fr); }
.history-grid .ctbpost-grid-slide { line-height: 1.1; text-align: center; font-size: 3em; color: #a38300; font-weight: bold; font-style: italic; padding: .8em 0; }

.ctbpost-details-holder { display: none; grid-column: 1 / -1; }
.ctbpost-details-holder.showing { display: block;  margin: 0 0 1%; background: linear-gradient(to right, #ffffff 0%,#efeff0 30%,#efeff0 70%,#ffffff 100%); }
.ctbpost-details-holder .ctbpost-details-outer { margin: 1.5% 0; }


.executive-intro { background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,#ffffff 70%,#ffeb9c 100%); padding-top: 2em; }
.executive-intro a.ctbpost-link { background: none; display: block; text-decoration: none; }
.executive-intro q { font-size: 1.2em; text-indent: .7em; display: block; position: relative; }
.executive-intro q:before,
.executive-intro q:after { transform: scale(1.5); top: .2em; position: relative; display: inline-block; }
.executive-intro q:before { content: "“"; right: .35em; }
.executive-intro q:after { content: "”"; right: .7em; }

.executive-intro .dhflex.width-70 { padding-top: 2em; }
.executive-intro .dhflex.width-30 { margin-bottom: 0; background-repeat: no-repeat; background-position: bottom center; background-size: contain; }

.executive-intro a.ctbpost-link h3 { display: inline-block; background-color: #fecd08; color: #000; font-style: italic; padding: .2em .5em; margin: 2em 0 0; }
.executive-intro a.ctbpost-link p { font-size: .9em; font-weight: bold; margin-top: .5em; }

.executive-grid .ctbpost-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
.executive-grid .ctbpost-grid-slide { line-height: 1.1; text-align: center; border-radius: .5em; padding: .8em 0; }
.executive-grid a.ctbpost-grid-slide.ctbpost-link { display: block; text-align: left; padding: 1em; box-sizing: border-box; color: #a38300; }
.executive-grid a.ctbpost-link img { max-width:100%; margin-bottom:.5em; }
.executive-grid a.ctbpost-link span.post-title { display: block; font-size: 1.3em; font-weight: bold; margin-bottom:.25em; }
.executive-grid a.ctbpost-link span.post-title+br { display:none; }
.executive-grid a.ctbpost-link span.job-title { display: block; }
.executive-grid a.ctbpost-grid-slide.ctbpost-link:hover,
.executive-grid a.ctbpost-grid-slide.ctbpost-link:focus,
.executive-grid a.ctbpost-grid-slide.ctbpost-link:active,
.executive-grid a.ctbpost-grid-slide.ctbpost-link.active { background-color: #ebebeb; color: #a38300; }
.executive-grid a.ctbpost-grid-slide.ctbpost-link:hover img,
.executive-grid a.ctbpost-grid-slide.ctbpost-link:focus img,
.executive-grid a.ctbpost-grid-slide.ctbpost-link:active img,
.executive-grid a.ctbpost-grid-slide.ctbpost-link.active img { filter:unset; }
.executive-grid .ctbpost-details-holder.showing:first-child { margin-top: -2.5em; }
.executive-grid .ctbpost-details-holder.showing:first-child .ctbpost-details-outer { margin-top: 0; padding-top: 0; border-top: none; }

/* new styles 2021 - Executive Team page */
@media (min-width: 783px) {
	.page-id-4831 .executive-grid a.ctbpost-link img { max-width: 150px; float: right;  } 
}
.page-id-4831 .wp-block-group { background-color:#fff; margin:-2em 0; width:100%; max-width:none; padding:1em 0 .2em; z-index:2; position:relative; }
.page-id-4831 .wp-block-group h2 { max-width:1000px; border-bottom:2px solid #ccc; margin-left:auto; margin-right:auto; padding-bottom:.5em; }
.page-id-4831 .executive-grid { padding:2.5em 0 .3em; }

.ctbpost-grid.culture-grid { background-color: transparent; padding-top: .5em; }
.ctbpost-grid.culture-grid .ctbpost-details-holder .ctbpost-details-outer { margin: 0; }
.ctbpost-grid.culture-grid .ctbpost-details-holder .ctbpost-details-inner { padding-left: 14px; padding-right: 14px; }
.culture-grid .ctbpost-grid-wrapper { grid-template-columns: repeat(3, 1fr); }
.culture-grid .ctbpost-grid-slide { display: block; line-height: 1.1; text-align: center; padding:1em 0; }
.culture-grid .ctbpost-grid-slide img { height:4em; margin:0 auto 1em; display:flex; width:30%; }
.culture-grid .ctbpost-grid-slide .post-title { font-size:1.5em; font-weight:bold; font-style:italic; }

.market-categories { border-top: 1px solid #ececec; padding-top: 1em; text-align: right; }
.market-categories ul,
.market-categories li { list-style-type: none; margin: 0; padding: 0; }
.market-categories li { display:inline-block; font-weight: bold; font-style:italic; font-size: 1.1em; color: #ccc; }
.market-categories li + li:before { content: "•"; display: inline-block; color: #fecd08; margin:0 1em; }
.market-categories li.selected { color: #a38300; }

.related-brands img { max-width:150px; width:95%; }
.related-brands .dhflex { width:auto; display:flex; align-items:center; justify-content:flex-start; margin-bottom:.5em; grid-column:span 1; }
.related-brands .dhflex-wrap { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: .8em; }


/* business units */
.business-unit { border:1px solid #ccc; border-radius:1em; background-color:#fff; margin:.5em auto; padding-left:14px; padding-right:14px; }
.business-unit .unit-wrap { padding-top:1em; }
.business-unit .connections-wrap { margin-top: 1em; margin-bottom: 1em; background: linear-gradient(to right, #ebebeb 1%,#ebebeb 50%,#fecd08 50.1%,#fecd08 100%); }
.business-unit .connections-wrap .dhflex { padding:.5em 1em; }
.business-unit p.scope { border-bottom: 1px solid #d3d3d3;  }
.business-unit h3 { font-weight:normal; }
.business-unit h3 strong { font-weight: bold; }
.business-unit ul { font-size:.95em; list-style-type:none; margin:0; padding:0; line-height:1.1; }

/* Normal Menu Styles */
/* 782 based on WP mobile menu flip */
@media (min-width: 783px) { 
	.logo-container { top:-2em; width:13%; }
	header.dhlogomenu { background: transparent; border-bottom:none; }
	.dhmenu > li > ul { border-top-width: 0; }
	.dhlogomenu .dhmenu > li > a,
	.dhlogomenu .dhmenu > li:last-of-type > a { margin-left: -4px; padding: .5em; font-size: 1.2em; font-weight: bold; font-style: italic; color: #000; padding-right: 60px; background: #fff url(../png/bg-menu.png) no-repeat center right; }


	.contain-filters p.filter { background: #ccc url(../svg/icon-filters.svg) no-repeat 1em center/20px; padding-left: calc(20px + 1em); }

	.business-unit .details { max-height: 0; overflow: hidden; opacity: 0; transition: all .2s ease-in-out; }
	.business-unit:hover .details { max-height: 300px; opacity: 1; }

}

/* adjust padding at certain sizes so menu doesn't crowd logo - might have to do this at a few different breakpoints */
/* works in conjunction with .logo-container {width} to ensure menu and logo don't overlap */
@media (max-width: 1300px) and (min-width: 783px) {  }

/* when max-width is hit */
@media (max-width: 1000px) {
	.business-unit { margin-left: 5px; margin-right: 5px; }
}


/* 782 based on WP mobile menu flip */
@media (max-width: 782px) {

	h1 { font-size:2em; }
	.ctbintro p { font-size: 1em; }

	.social-links ul { display: block; text-align: center; }
	.social-links.share-me { max-height: 100px; }

	.ctbphones.dhflex { margin-bottom: 1em; }
	header.dhmenu-header { z-index:3; }
	.dhlogomenu .content-area:after,
	.dhlogoheaderwidget .content-area:after { background-color: #fff; border-bottom: none; height: 90px; }
	.submenu-expander span,
	span.dhmenu-icon > span { background-color: #4d4d4d; border-radius: 3px; }
	span.dhmenu-icon { top:30px; }

	.logo-container { position: absolute; padding:0 14px; margin-left:-2%; }

	.dhmenu.expanded { top:90px; padding-top:20px; background-color:#fff; }

	.dhmain { margin-top:90px; }
	.ctbintro { padding-top:2em; }

	.social-links { position: absolute; top: 90px; right:0; box-shadow: 0 10px 10px inset rgba(0,0,0,.2); }
	.social-links.share-me { padding-top: 30px; }
	.translation-header { position:absolute; top:30px; right:40px; z-index:3; background:transparent; }
	.translation-header .share-ctb { width: 30px; }
	.translation-header select { font-size:12px; border-radius:8px; color:#fff; background-color:#4d4d4d; box-shadow:none; }


	/* home slider */
	.ctbpost-slider-inner { flex-flow: row wrap; }
	.ctbpost-intro { flex-basis:100%; display:flex; justify-content:space-between; align-items:baseline; padding:.4em 0; }
	.ctbpost-slides-container { flex-basis: 100%; overflow-x:scroll; }
	a.ctbpost-nav { display:none; }
	a.ctbpost-link { padding: .5em 0; }

	.ctbpost-grid-slide {  }
	.ctbpost-details-close a { padding: 1px 7px 3px; }

	.brand-grid .ctbpost-grid-wrapper { grid-template-columns: repeat(3, 1fr); }
	.brand-grid .ctbpost-grid-slide { min-height: 5em; }

	.market-grid .ctbpost-grid-slide { box-sizing: border-box; font-size: 1.1em; padding: .3em; }

	.business-unit .connections-wrap { margin-top: -1em; font-size:.9em; }

	.history-grid .ctbpost-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
	.history-grid .ctbpost-grid-slide { min-height: 0; }

	.culture-grid .ctbpost-grid-wrapper { grid-template-columns: repeat(2, 1fr); }


	.related-brands .dhflex-wrap { grid-template-columns: repeat(2, 1fr); }

}

/* 568 based on iphone 5 landscape */
@media only screen and (max-width:568px) {

	.contain-filters p.filter { display:none; }
	.contain-filters a.filter { border-left:1px solid #ccc; }
	.cookiedisclaimer { font-size:10px; }

	.culture-grid .ctbpost-grid-slide .post-title { font-size:1.3em; }

}




/* IE10+ fixes - due to no CSS Grid support -- and yes, this means that the last line on IE10+ won't sort to left nicely */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
	.dhflex.latestnews { max-width: 48.65%; }

	.ctbpost-grid-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; }
	.brand-grid .ctbpost-grid-slide { flex-basis: 19%; max-width: 19%; }
	.market-grid .ctbpost-grid-slide,
	.executive-grid .ctbpost-grid-slide { flex-basis: 49%; max-width: 49%; }
	.history-grid .ctbpost-grid-slide { flex-basis: 24%; max-width: 24%; }
	.culture-grid .ctbpost-grid-slide { flex-basis: 32%; max-width: 32%; }
	.ctbpost-details-holder.showing { flex-basis: 100%; max-width: 100%; }

}

@media screen and (-ms-high-contrast: active) and (max-width: 782px), screen and (-ms-high-contrast: none) and (max-width: 782px) {
	.brand-grid .ctbpost-grid-slide { flex-basis: 32%; max-width: 32%; }
	.history-grid .ctbpost-grid-slide,
	.culture-grid .ctbpost-grid-slide { flex-basis: 49%; max-width: 49%; }
}