.herostyles .logos-md .tech-logo-list > .tech-logo-item {
	/*already coverd by 14169 but 14172-14174 need to be restricted to min-width: 1600px (see below), then this rule is not necessary*/
	max-width: calc(100% / 7); 
}
@media (min-width: 400px) {
	/*new*/
	.text-xs-nowrap {
		white-space: nowrap !important;
	}
	.text-xs-wrap {
		white-space: wrap !important;
	}
	/*new*/
	.d-xs-block {
		display: block !important; 
	}
}
@media (min-width: 576px) {
	/*new*/
	.text-sm-nowrap {
		white-space: nowrap !important;
	}
	.text-sm-wrap {
		white-space: normal !important;
	}
}
@media (min-width: 576px) and (max-width: 767.98px) {
	/*new to reduce badge size between sm and md*/
	.herostyles .f-hero-badge {
		font-size: 1.25rem; 
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	/*.shift-img-md_lg-# for tight image and/or double headline below 992px*/
	/*as .carousel-item headline has more space 1-3 should be sufficient for homepage slides*/
	.shift-img-md_lg-1 .hero-desktop-background {
		margin-top: 10px; 
		margin-bottom: -10px; }
	.carousel-item .shift-img-md_lg-1 .f-hero-body__cta {
		margin-bottom: -7px; 
	}
	.shift-img-md_lg-2 .hero-desktop-background {
		margin-top: 20px; 
		margin-bottom: -20px; }
	.carousel-item .shift-img-md_lg-2 .f-hero-body__cta {
		margin-bottom: -13px; 
	}
	.shift-img-md_lg-3 .hero-desktop-background {
		margin-top: 30px; 
		margin-bottom: -30px; }
	.carousel-item .shift-img-md_lg-3 .f-hero-body__cta {
		margin-bottom: -18px; 
	}
	/*.featured-page could need more image shift*/
	.shift-img-md_lg-4 .hero-desktop-background {
		margin-top: 40px; 
		margin-bottom: -40px; 
	}
}
@media (min-width: 768px) {
	/*new*/
	.text-md-nowrap {
		white-space: nowrap !important;
	}
	/*new, to block text-xs/sm-nowrap in horizontal layout*/
	.text-md-wrap {
		white-space: normal !important;
	}
	/*temporarily to nutralize added class (mt-md-n4) to reduce .f-hero-content--vertical .f-hero-body top: 10% (19926)
	value is ok for .carousel-item with badge, adapt for .featured-page? see next rule*/
	.featured-page .f-hero-body .row.mt-md-n4 {
		margin-top: 0 !important;
	}
	/*add to compensate for lack of badge in .featured-page*/
	.featured-page .f-hero-content--vertical .f-hero-body {
		top: 6%; 
	}
	/*new*/
	.shift-body > .row {
		align-content: space-around; 
		margin-top: -45px;
		height: 192px; /*keeps same headline position in .carousel-item, 
		in .featured-page headline will shift down so also use .shift-img-md_lg-#*/
	}
	.featured-page .shift-body > .row {
		margin-top: -30px;
	}
	.shift-img .hero-desktop-background {
		top: 4%; 
		bottom: -4%; 
	}
	/*update rule 19936
	1.75rem is in general too small*/
	.herostyles .f-hero-content--vertical .f-hero-title {
		font-size: 2rem; 
	}
	/*update rule 19942
	10% is quite much for vertical layout*/
	.herostyles .f-hero-content--vertical .f-hero-body__cta {
		bottom: 8%; 
	}
	.shift-img .f-hero-body__cta {
		margin-bottom: -18px; 
	}
}
@media (min-width: 992px) and (max-width: 1599.98px) {
	/*all new
	for headlines that break at 1600px (or below)*/
	.shift-img-xxxl .hero-desktop-background {
		top: 3%; 
		bottom: -3%; 
	}
	.shift-img-xxxl .f-hero-body__cta {
		margin-bottom: -12px; 
	}
}
@media (min-width: 992px) and (max-width: 1349.98px) {
	/*all new
	for headlines that break at 1350px (or below)*/
	.shift-img-xxl .hero-desktop-background {
		top: 3%; 
		bottom: -3%; 
	}
	.shift-img-xxl .f-hero-body__cta {
		margin-bottom: -11px; 
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	/*all new
	for headlines that break at 1200px (or below)*/
	.shift-img-xl .hero-desktop-background {
		top: 3%; 
		bottom: -3%; 
	}
	.shift-img-xl .f-hero-body__cta {
		margin-bottom: -10px; 
	}
}
@media (min-width: 992px) {
	/*all new*/
	.text-lg-nowrap {
		white-space: nowrap !important;
	}
	.text-lg-wrap {
		white-space: normal !important;
	}
	.herostyles .f-hero-content--vertical .f-hero-title {
		font-size: 2.25rem; 
	}
	.carousel-item .shift-body > .row {
		margin-top: -60px;
		height: 222px; /*keeps same headline position*/
	}
	.featured-page .shift-body > .row {
		margin-top: -25px;
	}
}
@media (min-width: 1200px) {
	/*new*/
	.text-xl-nowrap {
		white-space: nowrap !important;
	}
	.text-xl-wrap {
		white-space: normal !important;
	}
}
@media (min-width: 1350px) {
	/*new*/
	.text-xxl-nowrap {
		white-space: nowrap !important;
	}
	.text-xxl-wrap {
		white-space: normal !important;
	}
}
@media (min-width: 1600px) {
	/*see first rule, when a lot of logos are used, it's less colossal from 1600px and wider*/
	.herostyles .logos-md .tech-logo-list > .tech-logo-item {
		max-width: calc(100% / 8) !important; 
	}
	.text-xxxl-nowrap {
		white-space: nowrap !important;
	}
	.text-xxxl-wrap {
		white-space: normal !important;
	}
}
@media (max-width: 991.98px) {
	/*new to reduce button size*/
	.herostyles .hero-link {
		font-size: .97rem; 
		padding: 0.4rem 1rem; 
	}
}
@media (max-width: 767.98px) {
	/*update rule 20083
	200px is too small, better to adapt image hight to fit nicely*/
	.herostyles .f-hero-content:not([data-bgimage-type="full"]) .f-hero-background-container {
		height: 250px; 
	}
	/*new, mobile image on landing page can be higher than slide as there are no badge and button*/
	.featured-page .herostyles .f-hero-content:not([data-bgimage-type="full"]) .f-hero-background-container,
	.lgr-img-sm_md .f-hero-background-container {
		height: 270px; 
	}
	/*new for larger mobile image*/
	.lgr-img-sm_md-1 .f-hero-background-container {
		height: 290px; 
		top: -1%; 
	}
	.lgr-img-sm_md-2 .f-hero-background-container {
		height: 310px; 
		top: -2%; 
	}
	.lgr-img-sm_md-3 .f-hero-background-container {
		height: 330px; 
		top: -3%; 
	}
	/*new for double headline below 768px*/
	.shift-img-md .hero-mobile-background {
		top: -6%; 
		bottom: 6%; 
	}
	/*update or remove rule 19981*/
	.herostyles .f-hero-body {
		min-height: auto; 
	}
	/*to override rule 20005, must be deleted as below 768 the layout is vertical anyway
	change 20003 into 1.75rem and delete 20352-20359*/
	.herostyles .f-hero-content--vertical .f-hero-title {
		font-size: 1.75rem;
	}
	/*new*/
	.herostyles .f-hero-title {
		margin-bottom: 1rem;
	}
	/*new to reduce button size more than below 992px*/
	.herostyles .hero-link {
		font-size: .85rem; 
	}
	/*new to compensate <p> magin in non-vertical slides*/
	.herostyles .f-hero-body__cta {
		margin-bottom: 8px; 
	}
}
@media (max-width: 575.98px) {
	/*update rule 20363 and add f-hero-text font-size*/
	.herostyles .f-hero-title, .herostyles .f-hero-content--vertical .f-hero-title {
		font-size: 1.5rem;
	}
	/*new*/
	.herostyles .f-hero-text {
		font-size: 1.25rem; 
	}
}
