:root{
	--ag-font-color: #01161E;
	--ag-title-color: #124559;
	/* --jd-color-blue: #001F3F; */
	/* --jd-color-dark-blue: #000022; */
	/* --jd-color-light-grey: #f3f3f3; */
	--ag-color-white: #ffffff;
	--ag-color-black: #000000;
}

.has-font-color-background-color {background-color: var(--ag-font-color) !important;}
.has-font-color-color {color: var(--ag-font-color) !important;}
.has-title-color-background-color {background-color: var(--ag-title-color) !important;}
.has-title-color-color {color: var(--ag-title-color) !important;}
/* .has-blue-background-color {background-color: var(--jd-color-blue) !important;} */
/* .has-blue-color {color: var(--jd-color-blue) !important;} */
/* .has-dark-blue-background-color {background-color: var(--jd-color-blue) !important;} */
/* .has-dark-blue-color {color: var(--jd-color-blue) !important;} */
/* .has-light-grey-background-color {background-color: var(--jd-color-light-grey) !important;} */
/* .has-light-grey-color {color: var(--jd-color-light-grey) !important;} */
.has-white-background-color {background-color: var(--ag-color-white) !important;}
.has-white-color {color: var(--ag-color-white) !important;}
.has-black-background-color {background-color: var(--ag-color-black) !important;}
.has-black-color {color: var(--ag-color-black) !important;}


.trait{position: relative; display: flex; align-items: flex-end; gap: 1em;}
h2.trait{max-width: calc(100% - 100px);}
.has-text-align-center.trait{justify-content: center;}
.trait:after{flex-basis: auto; flex-grow: 1; content: ''; height: 2px; background: var(--ag-title-color); margin-bottom: 10px;}
h2.trait:after{flex-basis: 80px; flex-grow: 0;}

.px{padding-left: 25px; padding-right: 25px;}
/* .px-l{padding-left: 50px; padding-right: 50px;} */

@media(max-width: 781px){
	.has-text-align-center.trait{text-align: unset;}
}
@media(min-width: 782px){
	.px{padding-left: 50px; padding-right: 50px;}
	.px-l{padding-left: 5%; padding-right: 5%;}
	
	h2.trait:after{flex-basis: 150px;}
	.trait:after{margin-bottom: 20px;}
}
@media(min-width: 992px){
	.px-l{padding-left: 7.5%; padding-right: 7.5%;}
}
@media(min-width: 1280px){
	.px-l{padding-left: 10%; padding-right: 10%;}
}
@media(min-width: 1440px){
	.px-l{padding-left: 12.5%; padding-right: 12.5%;}
}

.icon-grid{}
.icon-grid a:before{content: url('../images/icon-grid.svg'); display: inline-block; width: 18px; vertical-align: middle; margin-right: 10px;}