/* general interface----------------------------------------- */
.toc_object .expand_body li a:before {
    left: -22px;
}
em {
    font-weight: unset;
    font-style: italic;
}
li {
	line-height: unset;
}
@media (min-width: 477px) {
	.smallerlist li, .smallerlist li {
		font-size: .965rem;
		margin: 0 0 .5rem;
	}
	div.media-row.smallerlist > div h3, div.media-row.smallerlist > div h3 {
		font-size: 1rem !important;
	}
}
@media (max-width: 1060px) {
	.thide {
		display: none !important;
	}
}
@media (max-width: 640px) {
	.mhide {
		display: none !important;
	}
}
.hero-overlay.bottom {
    background: linear-gradient(to top, rgba(0, 0, 0, .95), 62%, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0));
    width: 100%;
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 31%;
    opacity: .652;
    z-index: 1;
}
.contrast85 {
    filter: contrast(0.85);
}
.bigbulls.bbul.invert > li:hover:before {
    background: #37709b;
}
.expand_body li.nav_main a:before {
    content: "\f1db";
    font-size: 1rem;
    left: -22px !important;
	font-weight: 400 !important;
}
.expand_body li.nav_main > a:before {
    content: "\f104";
    font-size: 1.5rem;
    left: -22px !important;
	top: -1px;
	line-height: 1.5rem;
}
.expand_body li.nav_home, .expand_body li.nav_main {
    font-weight: unset;
}
.offwhite .responsive {
    padding-top: 0;
}
div.herovideo {
	padding: 0 !important;
	min-height: unset;
}
div.herovideo .fluid-width-video-wrapper, div.herovideo .videoWrapper { 
	position: unset;
    padding-bottom: unset;
    height: unset;
    margin: 0;
}
 div.herovideo .videoWrapper iframe { 
	border-radius: 0;
}
.bigger-text {
    font-size: 1.25rem;
    font-weight: 300;
}
.panels.responsive.splitheading {
	padding: 0;
}
.panels.responsive.splitheading h2 {
	margin-bottom: 0;
}
.panels.responsive.splitheading + .panels > div {
	padding-top: 30px !important;
}
#intro.panels {
	min-height: 500px;
}
@media (max-width: 1060px) {
	#intro.panels {
		min-height: unset;
	}
}
div.tile {
	margin: 0;
	padding: 15px 15px 20px;
	border-radius: 5px;
}
div.media-row.pillars > div.tile p:first-of-type, div.media-row.pillars > a.tile p:first-of-type   {
	margin: 0;
}
div.media-row.pillars > div.tile p:first-of-type + h3, div.media-row.pillars > a.tile p:first-of-type + h3  {
	margin-top: 0 !important;
}
div.media-row.pillars > div.tile, div.media-row.pillars > a.tile {
	padding-top: 50px;
	margin-top: 50px;
}
div.media-row.pillars > div img {
	width: 72px;
	position: absolute;
	top: -36px;
	left: 50%;
	margin-left: -36px;
	transition: all .175s ease-in-out;
	filter: unset !important;
	height: auto;
}
div.media-row.pillars > div:hover img[src*="png"], div.media-row.pillars > div:focus img[src*="png"] {
	width: 95px;
	margin-left: -45.5px;
	top: -51px;
}
.max-220 {
	max-width: 220px;
}
.max-420 {
	max-width: 420px;
}
.max-530 {
	max-width: 530px;
}
.max-640 {
	max-width: 640px;
}
.max-700 {
	max-width: 700px;
}
.max-960 {
	max-width: 960px;
}
.max-1280 {
	max-width: 1280px;
}
.media-row.radius img {
	border-radius: 5px;
}
.tips h2:before {
    top: 2px !important;
    scale: unset !important;
}
.tips h2, .tips h3 {
    font-size: 1.175rem !important;
	font-weight: 700;
}
.bold {
	font-weight: 600 !important;
}
a.lactive {
    color: #000;
    text-decoration: none;
    pointer-events: none;
    font-weight: 600;
}
a.lactive:before {
	content: "\f111" !important;
    font-size: 1rem !important;
}
.nolist {
    overflow: unset;
}
.nomargin {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.panels h2, h2 {
	font-weight: 300;
	color: #01468c;
	font-size: 2rem !important;
}
h1, h2, h3, h4, h5 {
    color: #333;
}
.panels.blue {
    background: #01468c !important;
}
.sitemap div.media-row > div h3 {
    font-weight: 400;
    margin-top: 0;
    font-size: 1.25rem !important;
}
a:active, a:link, a:visited {
    transition: none;
}
.panels h1 + p.intro {
    font-size: 1.325rem;
    font-weight: 300;
}
.panels.dark h1, .panels.dark h2, .panels.dark h3, .panels.dark a, .panels.dark p, div.dark li, div.dark a, div.dark p, .dark a:hover,  .dark a:focus, .dark a:visited:hover, .dark a:visited:focus, .dark h1, .dark h2, .dark h3, .dark a, .dark p, .panels.ltblue h1, panels.dark ul {
	color: #FFF;
}
.dark a:focus, .dark a:visited:focus, .tips.blue a:focus, .tips.blue a:visited:focus {
	outline: 2px solid #FFF !important;
}
.center1160, .responsiive.center1160 {
    max-width: 1160px !important;
    margin: auto;
}
.center900, .responsive.center900 {
    max-width: 900px !important;
    margin: auto;
}
.center240 {
	max-width: 240px;
	margin: auto;
}
.centertext {
	text-align: center;
}
li.active ul {
    display: block !important;
    margin-top: 24px;
}
.panels.hero .page-intro {
    font-weight: 400;
    font-size: 1.2rem;
    margin-top: 20px;
}
.panels h1.supersize {
    font-size: 4em;
    line-height: 1.15em;
}
* {
    background-size: cover;
    background-repeat: no-repeat;
}
.responsive {
    max-width: 1520px;
}
h1 + .page-intro {
    margin-top: revert;
}
div.heropanel {
    background-color: #01468c !important;
}
.panels.hero .page-intro {
    font-weight: 400;
    font-size: 1.2rem;
    margin-top: 20px;
}
div.tips.inline {
    min-width: 300px;
}

.tips h2:before, .tips h3:before, .tips p:before {
    top: 0px;
}
.bigbulls.bbul.black.invert > li:before {
    background-color: #111A21;
}
.bigbulls.nolist > li:before {
    display: none;
}
div.tips.inline {
    padding: 20px;
}
h1 + .page-intro {
    margin-top: 19px !important;
	font-size: 1.25rem;
}
div.panels h2 {
	color: #01468c;
}
div.panels.dark h2, div.panels.blue h2 {
	color: #FFF;
}
h1 + .page-intro {
    margin-top: revert;
}
h2 + .page-intro {
    margin-top: -10px !important;
}
.panels h3 {
    font-size: 1.25em !important;
    margin-bottom: 11px;
}
h3.first {
    border-bottom: 1px solid #CCC;
    padding-bottom: 10px;
}
div.heropanel {
    background-color: #01468c !important;
}
.bradius {
	border-radius: 5px;
}
.bg-white {
	background: #FFF;
	background-color: #FFF;
}
.shadows, .subshadows img {
	-webkit-box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.07);
}
.tilt-cc5, .tilt-cc3, .tilt-c5, .tilt-c3 {
    transform: rotate(-3deg);
    position: relative;
    margin: auto;
	transition: all .135s ease;
}
.tilt-cc5{
    transform: rotate(-5deg);
}
.tilt-c5{
    transform: rotate(5deg);
}
.tilt-c3{
    transform: rotate(3deg);
}
.tilt-cc5:hover, .tilt-cc3:hover, .tilt-c5:hover, .tilt-c3:hover {
    transform: rotate(0deg);
}
/* twin panels ------------------------------*/
.panels.duo {
    display: grid;
    grid-gap: 0;
    grid-template-columns: repeat(2, 1fr);
    min-height: 400px;
    background: #eee;
    padding: 0;
    margin: auto;
}
.panels.duo.v-center, .media-row.v-center {
    align-items: center;
}
.vcenter, .panels.duo.wimage > div:nth-of-type(1) {
    /* align-items: center; centers child elements' content */
    align-self: center;
}
/* max container size from responsive is 1520px */
.panels.duo > div {
    max-width: 760px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 2140px) {
    .panels.duo.wimage > div:nth-of-type(2) {
        max-width: 50vw;
    }
}
.panels.duo > div h1:first-child, .panels.duo > div h2:first-child, .panels.duo > div h3:first-child, .panels.duo > div h4:first-child {
    margin-top: 0;
}
/* text left */
.panels.duo.textleft > div:nth-of-type(1), .panels.duo.textright > div:nth-of-type(2)  {
    justify-self: end;
    padding: 62px 40px 62px 0;
}
.panels.duo.textleft > div:nth-of-type(2), .panels.duo.textright > div:nth-of-type(1)  {
    padding: 62px 0 62px 40px;
}

@media (max-width: 1580px) {
    .panels.duo.textleft > div:nth-of-type(1), .panels.duo.textright > div:nth-of-type(2)  {
		padding: 62px 40px 62px 20px;
	}
.panels.duo.textleft > div:nth-of-type(2), .panels.duo.textright > div:nth-of-type(1)  {
		padding: 62px 20px 62px 40px;
	}
}
/* end text left */

/*text right*/
.panels.duo.textright > div:nth-of-type(1) {
    order: 2;
    justify-self: start;
}
.panels.duo.textright > div:nth-of-type(2) {
    justify-self: end;
}
.panels.duo.vcenter > div:nth-of-type(1) {
	align-self: center;
}
.panels.duo.wimage > div:nth-of-type(2) {
    padding-left: 0 !important;
	min-height: 500px;
	background-size: cover !important;
}
/*end text right*/

.responsive .panels.duo.textleft > div:nth-of-type(1) {
    padding-left: 0 !important;
}
.responsive .panels.duo.textright > div:nth-of-type(1) {
    padding-right: 0 !important;
}
/* contonuing panels */
.panels.duo.continuing > div:nth-of-type(2), .panels.duo.continuing_extra > div:nth-of-type(2) {
	padding-top: 85px !important;
}
/* colour options former darker blue is 003972 or AAA peel blue 005799*/
.panels.duo.ltbluegrey {
    background: linear-gradient(to right, #005ea6  50.1%, #f2f4f7 50%) !important;
}

@media (max-width: 1060px) {
	.panels.duo.mobilejoin > div:nth-of-type(1) {
		padding-bottom: 0 !important;
	}
	.panels.duo.mobilejoin > div:nth-of-type(2) {
		padding-top: 0 !important;
	}
    .panels.duo {
        display: block;
        margin: auto;
		width: 100%;
    }
	.panels.duo > div {
		padding: 0 !important;
		width: 100% !important;
		max-width: unset !important;
		padding: 62px 20px !important;
		justify-self: unset !important
	}
	.panels.duo.wimage > div:nth-of-type(2){
		min-height: unset;
        aspect-ratio: 16 / 9 !important;
	}
    .panels.duo.bluegrey {
        background: unset;
    }
    .panels.duo.ltbluegrey > div:nth-of-type(1) {
        background: #005ea6 ;
    }
    .panels.duo.ltbluegrey > div:nth-of-type(2) {
        background: #f2f4f7;
		aspect-ratio: unset;
    }
	.panels.duo.continuing > div:nth-of-type(2) {
		padding-top: 0 !important;
	}
	.panels.duo.continuing_extra > div:nth-of-type(2) {
		padding-top: 62px !important;
	}
}
/* end duo panels ------------------------------- */

/* footer --------------------------------------- */
.footer {
    color: #fff;
    padding: 3rem 0;
    background-image: url(/sites/default/files/microsites/budget/_img/p-rotated-black-10perc.png);
    background-color: #01468c;
    background-repeat: no-repeat;
    background-size: 397px;
    background-position: right 5% bottom 79%;
}

@media (max-width: 1010px) {
    .footer {
        background-image: none;
    }
}
.footer li a:link, .footer li a:visited {
    color: #fff;
    text-decoration: none;
}
.footer li a:link:hover, .footer li a:visited:hover, .footer li a:focus {
    outline: 2px solid #fff !important;
	transition: none;
}
.footer ul {
    list-style: none;
    margin: 7px 0 17px !important;
    padding: 0 !important;
}
/* social icons */

.footer .social ul {
    margin-top: 0 !important;
}
.footer li {
    margin-bottom: 0.5rem;
}
.footer .social li {
    display: inline-block;
    float: left;
    margin: 0 0.5rem 0 0;
}
.footer .social li:last-of-type {
    margin-right: 0;
}
.footer .social li a {
    display: block;
    width: 40px;
    padding: 5.5px;
    box-sizing: border-box;
}
.footer .social img {
    width: 100%;
}

@media (max-width: 370px) {
    .footer .social li {
        margin: 0 0.35rem 0 0;
    }
}
.footer_cols, .copyright {
    width: 1520px;
    max-width: calc(100% - 40px);
}
.copyright {
    margin: 25px auto 0;
    border-top: 1px solid rgba(255, 255, 255, 0.23);
}
.footer_cols {
    display: grid;
    grid-gap: 20px;
    margin: auto;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1320px) {
    .footer_cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1010px) {
    .footer_cols, .copyright {
        display: block;
        text-align: center;
    }
    .footer_cols > div {
        clear: both;
        margin: 0 auto !important;
        overflow: hidden;
        width: max-content;
    }
    .footer .social ul {
        text-align: center;
        overflow: hidden;
        margin-bottom: 30px !important;
    }
}
.footer_cols > div {
    margin-bottom: 40px;
}
/* end footer --------------------------------------- */


.panels h1.supersize {
    font-size: 4em;
    line-height: 1.15em;
}
/* animation --------------------------------------- */
.breathe {
    animation: breathe 0.5s ease forwards;
    animation-delay: 1.27s;
}
@keyframes breathe {
     0% {
     width: 50%;
     left: 25%;
    }
     100% {
     width: 60%;
     left: 20%;
    }
}
.bgfade {
    animation: bgfade 40s infinite ease forwards;
}
@keyframes bgfade {
     0% {
     background: #01172f;
    }
     50% {
     background: #111a21;
    }
     100% {
     background: #01172f;
    }
}
/* code --------------------------------- */
.code-wrapper {
    background: #111a21;
    border-radius: 7px 7px 0 22px;
    position: relative;
    margin: 40px 0;
}
.code-wrapper p {
    color: #FFF;
    display: inline-block;
    float: left;
    margin: 0;
}
.code-wrapper p.ico {
    float: right;
    cursor: pointer;
}
.code-wrapper button {
    float: right;
}
.code-wrapper .labels {
    display: block;
    overflow: hidden;
    padding: 0;
}
.code-wrapper .labels p:first-child {
    padding: 9px;
    font-weight: 700;
}
p.ico a {
    background: rgb(255 255 255 / 12%);
    padding: 10px 15px;
    font-size: .95rem;
    top: 10px;
    right: 2px;
    position: relative;
    border-radius: 0 5px 0 0;
    transition: all .1s;
    color: #FFF;
    text-decoration: none;
}
.offwhite p.ico a {
    top: 8px;
    right: 1px;
    border-radius: 0 6px 0 0;
}
a.code:hover, p.ico a.code:focus {
    background: #cf4827 !important;
}
a.code:before {
    font-family: 'Material Icons';
    margin-right: 6px;
    vertical-align: bottom;
    font-size: 1.35rem;
    content: '\e14d';
}
a.code.copied {
    opacity: .5;
}
a.code.copied:before {
    content: '\e5ca';
}
pre {
    padding: 20px;
    border-radius: 0 0 0 7px;
    max-height: 50vh;
    min-height: 100px;
    overflow: auto;
    font-size: 1rem;
    background: #f2f4f7;
    border: 2px solid #2f2f2f;
    margin: 0;
    tab-size: 2;
}
.offwhite pre {
    -webkit-box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.07);
    background: #fff;
    border: 0;
}
/* end code --*/

/* tables ------------------------ */
.table-wrapper {
    max-height: 85vh;
    max-width: max-content;
    width: 100%;
	min-width: 300px;
    overflow: auto;
    position: relative;
    border: 1px solid #598ec1;
    border-top: 0;
    border-left: 0;
}

.table-wrapper.no-hover table tr:hover td {
    background: none !important;
    color: initial !important;
}
.table-wrapper.no-hover tr:hover th[scope="row"] {
    background: #eef4fc !important;
    color: initial !important;
}
table, th, td {
    border: 1px solid #598ec1;
    border-collapse: separate;
    border-spacing: 0;
}
th, td {
    padding: 10px 12px;
    vertical-align: top;
    text-align: left;
    border-right: 0;
    border-bottom: 0;
}
table th, .rowhead.bold {
    font-weight: 600;
}
table td {
    background: #FFF;
}
table th[scope="col"] {
    color: #FFF;
    background: #0054a6;
    z-index: 2;
}
table th[scope="row"], td.rowhead {
    color: #000;
    background-color: #eef4fc;
    z-index: 1;
}
table tr:hover td {
    background: #fceeac !important;
    color: #000;
}
tr:hover th[scope="row"], tr:hover td[scope="row"]  {
    background: #FFE364 !important;
    color: #000 !important;
}
/*high contrast for keyboard navigation*/
table tr:focus td, .table-wrapper.no-hover tr:focus td {
    background: #2f2f2f !important;
    color: #FFF;
}
tr:focus th[scope="row"], tr:focus td[scope="row"], .table-wrapper.no-hover tr:focus th[scope="row"], .table-wrapper.no-hover tr:focus td[scope="row"]  {
    background: #000 !important;
    color: #FFF !important;
}
/*end keyboard navigation contrast*/

.table-wrapper table th[scope="row"], .table-wrapper table td[scope="row"], .table-wrapper table td.rowhead {
    position: sticky;
    left: 0;
    background-color: #eef4fc;
    border-right: 1px solid #598ec1;
}
.table-wrapper table th[scope="col"] {
    position: sticky;
    top: 0;
}
.table-wrapper table th[scope="col"]:first-child {
    position: sticky;
    background: #09447e;
    top: 0;
    left: 0;
    border-left: 1px solid #598ec1;
    border-right: 1px solid #598ec1;
    z-index: 3;
}
.scrolling {
	border: 1px solid #598ec1;
}
.scrolling:before {
    background: #3b4a54;
    position: sticky;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
    color: #FFF;
    text-align: center;
	padding: 4px 50px 4px 4px;
	box-sizing: border-box;
	vertical-align: middle;
	background-size: 24px;
    background-repeat: no-repeat;
    background-position: right 13px center;
}

.scrolling.scrollwidth:before {
    content: 'Scroll table right for more.';
	background-image: url('/sites/default/files/2026-03/swipe_horizontal_white_2.svg');
	/*animation: horizbounce 2.85s infinite;*/
}
.scrolling.scrollheight:before {
    content: 'Scroll table down for more.';
	background-image: url('/sites/default/files/2026-03/swipe_vertical_white_2.svg');
	/*animation: vertbounce 2.85s infinite;*/
}
.scrolling.scrollwidth.scrollheight:before {
    content: 'Scroll table down or left for more.';
	animation: alldir 4.85s infinite;
}

@keyframes horizbounce {
	0% {
		background-position: right 10px center;
	}
	15% {
		background-position: right 13px center;
	}
	85% {
		background-position: right 13px center;
	}
	100% {
		background-position: right 10px center;
	}
}
@keyframes vertbounce {
	0% {
		background-position: right 13px bottom 5px;
	}
	15% {
		background-position: right 13px center;
	}
	85% {
		background-position: right 13px center;
	}
	100% {
		background-position: right 13px bottom 5px;
	}
}
@keyframes alldir {
	0% {
		background-image: url('/sites/default/files/2026-03/swipe_horizontal_white_2.svg');
	}
	49% {
		background-image: url('/sites/default/files/2026-03/swipe_horizontal_white_2.svg');
	}
	50% {
		background-image: url('/sites/default/files/2026-03/swipe_vertical_white_2.svg');
	}
	99% {
		background-image: url('/sites/default/files/2026-03/swipe_vertical_white_2.svg');
	}
	100% {
		background-image: url('/sites/default/files/2026-03/swipe_horizontal_white_2.svg');
	}
}

/*responsive*/
@media (max-width: 1280px) {
    .table-wrapper table th[scope="row"], .table-wrapper table td[scope="row"], .table-wrapper table td.rowhead {
        max-width: 130px;
    }
    .table-wrapper table {
        width: max-content;
    }
	.table-wrapper {
		max-height: 75vh;
	}
	.table-wrapper {
		width: 100%;
	}
	.table-wrapper th, td {
		max-width: 182px;
	}
}
@media (max-width: 364px) {
	.table-wrapper:before {
		background-image: none !important;
		padding: 4px;
	}
}
/*fix drupal mobile rendering*/
table.bt tfoot th, table.bt tfoot td, table.bt tbody td {
    border: unset;
    display: table-cell !important;
    vertical-align: unset;
    float: unset;
    width: unset;
}
table.bt thead, table.bt tbody th {
    display: revert;
}
/*kill the headers showing in cells by postioning them visibly out of the modal but screen readers will still read them*/
table.bt tfoot th::before, table.bt tfoot td::before, table.bt tbody td::before {
    /*content: none;
    display: none;
    -webkit-flex-shrink: unset;
    -ms-flex-shrink: unset;
    flex-shrink: unset;*/
    position: absolute;
    left: -10000px;
}
/* kill double-thick cell colours*/
.table-basic tbody td, .ck-content .table table tbody td, table tbody td, table thead th {
    border: 1px solid #598ec1 !important;
}
/* end tables -------------------------------------------------*/

/* form elements ----------------------------------------------*/
button.selected {
    background: #1c6600 !important;
}
button a {
    display: block;
}
button.selected:before {
    font-family: 'FontAwesome';
    content: '\f058';
    margin: -5px 5px 0 5px;
}
th .fa {
    font-size: 24px;
    position: relative;
    top: 2px;
}
.callout {
    background: #f5f7f9;
    padding: 10px;
    border: 1px solid #ccc;
}
.regform p {
    clear: both;
    padding: 5px 0;
}
.highlight {
    background: #FC0;
    color: #000;
    font-weight: 700;
}
.btn-orange.green {
    background: #1c6600;
}
.btn-orange.green:hover, .btn-orange.green:focus {
    background: #036;
}
textarea.short {
    min-height: 25px;
}
.redbox {
    border: 2px solid #F00 !important;
    background: #ffd60057 !important;
    color: #000 !important;
}
.in_page_nav > ol {
    margin: 20px 0 0 20px;
    padding: 0;
}
.in_page_nav > ol > li {
    margin: 10px 0;
}
.in_page_nav ol li ul li {
    list-style: disc;
}
.boptions .btn-orange {
    background: #333 !important;
}
.smallfont {
    font-size: .9em;
}
.boptions .btn-orange:hover, .boptions .btn-orange:focus {
    background: #000 !important;
}
.regform p {
    clear: both;
    padding: 5px 0;
}
textarea {
    font-family: "Courier New", Courier, monospace;
    display: block;
    clear: both;
    width: 100%;
    margin: 15px 0;
    min-height: 100px;
    box-sizing: border-box;
}
textarea.textcode {
    overflow-x: auto;
    box-sizing: border-box;
    margin: 10px 0 30px;
    border: 3px solid #000;
    border-width: 0 0 0 3px;
    background: #f5f7f9;
    padding: 15px 25px 15px!important;
    tab-size: 2;
}
/* end form elements ----------------------------------------------*/

/* lists ----------------------------------------------------------*/
.ul-0, .ul-5, .ul-10, .ul-15, .ul-20 {
    margin-bottom: 30px;
}
.ul-0 + li, .ul-5 + li, .ul-10 + li, .ul-15 + li, .ul-20 + li {
    margin-top: -20px !important;
}
.ul-5 > li {
    margin: 0 0 5px;
}
.ul-10 > li {
    margin: 0 0 10px;
}
.ul-10 > li ul, .ul-15 > li ul, .ul-20 > li ul {
    margin: 5px 0 10px;
}
.ul-15 > li {
    margin: 12.5px 0;
}
.ul-20 > li {
    margin: 10px 0 20px !important;
}
p + .ul0 {
    margin-top: -11px;
}
ul.two-column, ul.three-colmn {
    column-gap: 83px;
    margin-left: 25px;
    padding-left: 0;
}
ul.nolist.two-column, ul.nolist.three-colmn {
    column-gap: 40px;
}
.two-column {
    column-count: 2;
}
.three-colmn {
    column-count: 3;
}
.two-column h3:first-child, .three-colmn h3:first-child, .two-column h2:first-child, .three-colmn h2:first-child {
    margin-top: 0;
}
.two-column, .three-colmn {
    column-gap: 40px;
    column-rule: 1px solid rgb(201 201 201 / 46%);
}
.two-column.noborder, .three-colmn.noborder {
    column-rule: none;
}

@media (max-width: 640px) {
    .two-column {
        column-count: 1;
    }
    ul.nolist.two-column {
        list-style: revert !important;
        margin: revert !important;
        padding: revert !important;
    }
    .bigbulls.nolist > li:before {
        display: block;
    }
}
/* end lists ------------------------------------------------------*/


/* design system pages---------------------------------------------*/
.sticky {
    position: sticky;
    top: 0;
}
.wrapper {
    display: grid;
    justify-content: space-between;
    margin: 0 auto;
    grid-template-columns: calc(75% - 40px) 25%;
    grid-column-gap: 40px;
    position: relative;
    max-width: 1520px;
    width: calc(100% - 40px);
}
.main-col {
    padding: 20px 0 55px;
}
.side-col {
    border: solid rgb(0 0 0 / 10%);
    border-width: 0 1px 0 1px;
    padding: 20px 20px 30px;
    background: #f5f7f9;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
}
.side-col h2:first-of-type {
    margin-top: 0;
}
.side-col h2 {
    margin: 30px 0 15px;
    font-size: 1.175em !important;
	font-weight: 700;
}
.toc_object h2 {
    font-size: 1rem !important;
    font-weight: 600;
    margin: 30px 0 0;
}

.side-col ul {
    margin-bottom: 30px !important;
}
.side-col li {
    margin: 0 0 11px;
}

@media screen and (max-width: 1280px) {
    #pagenav.screen-hidden {
        position: relative;
        left: unset;
        width: unset;
        height: unset;
        overflow: visible;
        opacity: unset;
    }
    .side-col #pagenav {
        display: none;
    }
    .wrapper {
        display: block;
        justify-content: unset;
        padding-bottom: 50px;
    }
    .main-col, .side-col {
        height: unset !important;
        width: 100%;
        clear: both;
        float: none;
        position: relative;
        top: unset;
    }
    .side-col {
        background: linear-gradient(180deg, #f5f7f9, transparent);
        border-width: 1px;
    }
    .hide1280 {
        display: none;
    }
}

@media (max-width: 1060px) {
    .side-col h2 {
        color: #1F1F1F;
        font-size: 1.5em;
    }
}
.nowrap {
    white-space: nowrap;
	font-weight: unset;
}
code {
    font-family: monospace;
    font-size: 1.1em;
    font-weight: 600;
    background: #dfdfdf;
    padding: 5px;
    border-radius: 2px;
    color: #000;
}
a.ico-share {
    display: block;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border-radius: 3px;
    padding: 6px;
    float: left;
    background: #00498e;
    margin: 15px 15px 0 0;
    transition: all .075s ease-in-out;
}
a.ico-share.lactive {
	pointer-events: all;
}
a.ico-share.lactive:before {
	display: none;
}
a.ico-share img {
    width: 100%;
    filter: invert(1);
    transition: all .125s ease-in-out;
}
a#copyUrl.ico-share img {
    transform: rotate(307deg);
}
a.ico-share:hover, a.ico-share:focus {
    background: #FFF;
    border: 2px solid #2b2b2b;
    outline: none;
}
a.ico-share:hover img, a.ico-share:focus img {
    filter: invert(0);
    transform: scalex(-1);
    transition: all .15s ease-in-out;
}
a#copyUrl.ico-share:hover img, a#copyUrl.ico-share:focus img {
    filter: invert(0);
    transform: scalex(-1) rotate(307deg);
    transition: all .15s ease-in-out;
}
a.ico-share:hover img, a.ico-share:focus img, a.ico-share img, .noflip {
    transform: none !important;
}
.external:after {
    font-family: FontAwesome;
    display: inline-block;
    position: relative;
    font-size: 15px;
    top: -0.5px;
    left: 5px;
    content: "\f08e";
    margin-right: .5em;
}
ul.buttongroup li a {
    margin: 0 !important;
}
ul.breadcrumbs {
    list-style: none;
    padding: 0 0 10px !important;
    margin: 0 0 60px !important;
    font-size: .95em;
    display: block !important;
    overflow: visible;
}
ul.breadcrumbs li {
    display: inline-block;
    float: left;
    margin: 0 0 8px 0;
}
.main-col h2 {
    color: #1F1F1F;
    margin: 40px 0 20px;
	font-size: 1.75rem !important;
    font-weight: 700;
}
ul.breadcrumbs li a:after {
    font-family: FontAwesome;
    content: "\f105";
    margin-left: .5rem;
    margin-right: .5rem;
    text-decoration: none !important;
    display: inline-block;
}
ul.breadcrumbs li:last-of-type a:after {
    content: '';
}
/* end design system pages-----------------------------------------*/


/* media grid layout --------------------------------------- */
.panels p.fade-up {
    animation-duration: 1.015s;
}
div.media-row {
    display: grid;
    grid-gap: 20px;
}
div.media-row.widegap {
    grid-gap: 45px;
}
div.media-row.five {
    grid-template-columns: repeat(5, 1fr);
}
div.media-row.four {
    grid-template-columns: repeat(4, 1fr);
}
div.media-row.three {
    grid-template-columns: repeat(3, 1fr);
}
div.media-row.three.persist {
    grid-template-columns: repeat(3, 1fr) !important;
	display: flex !important;
}
div.media-row.two {
    grid-template-columns: repeat(2, 1fr);
}
div.media-row.tiles > div {
    -webkit-box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.07);
    background: #fff;
    padding: 20px 20px 10px;
}
div.media-row.wicon > div {
    padding-top: 70px;
    position: relative;
}
div.media-row.borders > div {
    position: relative;
	border-top: 1px solid #CCC;
    border-right: 1px solid #CCC !important;
	border-radius: 0;
	padding: 0 10px 0 0;
}
div.media-row.background > div {
    position: relative;
    outline: 1px solid rgb(0 0 0 / 10%);
    padding: 0 10px;
    background: #f5f7f9;
}
div.media-row.borders.wicon > div {
	padding: 20px 20px 0 55px;
}
div.media-row.wicon > div p.icon {
    position: absolute;
    width: 40px;
    top: 0;
    left: 0;
    margin: 0;
}
div.media-row.wicon > div p.icon {
	top: 20px;
	left: 20px;
}
div.media-row.wicon.borders > div p.icon {
	top: 20px;
	left: 0;
}
div.media-row.wicon > div p.icon img {
    width: 100%;/*filter: invert(13%) sepia(100%) saturate(3400%) hue-rotate(198deg) brightness(89%) contrast(100%);*/
}
div.media-row > div h2, div.media-row > div h3, div.media-row > div h4, div.media-row.tiles > div p:first-child {
    margin-top: 0;
    font-size: 1.1rem !important;
}
div.media-row > div h2 a:link, div.media-row > div h3 a:link, div.media-row > div h4 a:link, div.media-row > div p:first-child a:link {
    text-decoration: none;
    display: block;
}
div.media-row > div h2 a:link:hover, div.media-row > div h3 a:link:hover, div.media-row > div h4 a:link:hover, div.media-row > div p:first-child a:link:hover, div.media-row > div h2 a:link:focus, div.media-row > div h3 a:link:focus, div.media-row > div h4 a:link:focus, div.media-row > div p:first-child a:link:focus {
    border-color: #000;
    outline: 2px solid !important;
    box-sizing: border-box;
}

@media (max-width: 1320px) {
    div.media-row.five {
        grid-template-columns: repeat(4, 1fr);
    }
	div.media-row.content_block.five > div{
        margin-bottom: 50px;
    }
}

@media (max-width: 1010px) {
    div.media-row.five, div.media-row.four {
        grid-template-columns: repeat(3, 1fr);
    }
	div.media-row.content_block.four > div{
        margin-bottom: 50px;
    }
}

@media (max-width: 720px) {
    div.media-row.five, div.media-row.four,  div.media-row.three  {
        grid-template-columns: repeat(2, 1fr);
    }
	div.media-row.content_block.three > div{
        margin-bottom: 50px;
    }
}

@media (max-width: 490px) {
    div.media-row.five, div.media-row.four, div.media-row.three, div.media-row.two {
        grid-template-columns: 1fr;
    }
	div.media-row.content_block.two > div{
        margin-bottom: 50px;
    }
}
div.media-row > div {
    border-right: none !important;
}
/* staggered load */
div.media-row > div:nth-of-type(2).move_in {
    animation-delay: 0.15s;
}
div.media-row > div:nth-of-type(3).move_in {
    animation-delay: 0.2s;
}
div.media-row > div:nth-of-type(4).move_in {
    animation-delay: 0.25s;
}
div.media-row > div:nth-of-type(5).move_in {
    animation-delay: 0.3s;
}
div.media-row > div:nth-of-type(6).move_in {
    animation-delay: 0.35s;
}
div.media-row > div:nth-of-type(7).move_in {
    animation-delay: 0.4s;
}
div.media-row > div:nth-of-type(8).move_in {
    animation-delay: 0.45s;
}
div.media-row > div:nth-of-type(9).move_in {
    animation-delay: 0.5s;
}
div.media-row > div:nth-of-type(10).move_in {
    animation-delay: 0.55s;
}
/* end media groups */


/*special big bullet numbers*/
ol.big_numbers {
  list-style: none;
  counter-reset: list_increment;
  margin: 30px 0 0 0 !important;
  padding: 0 !important;
  overflow: visible;
}
ol.big_numbers.shorter {
	margin-top: 0 !important;
}
/*ol.big_numbers > ul {
	padding-left: 18px !important;
}*/
ol.big_numbers > li {
	counter-increment: list_increment;
	padding: 0 0 0 2.75rem;
	position: relative;
	margin: .5rem 0 1.5rem;
}
ol.big_numbers.thick > li a {
  font-weight: 700;
  text-decoration: none;
  position: relative;
  display: inline-block;
}
li span.heading {
	margin-bottom: 5px;
	font-weight: 700;
	display: inline-block;
	/*color: #01468c;*/
}
ol.big_numbers.thick > li a:hover {
	outline: 1px solid;
}
ol.big_numbers > li::before {
    /* content: counter(list_increment) ". "; */
    content: counter(list_increment);
    position: absolute;
    left: 0px;
    border-radius: 1.25rem;
    width: 2.25rem;
    height: 2.25rem;
    display: block;
    top: -.575rem;
    border: 2px solid #01468c;
	color: #01468c;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    justify-content: center;
}
ol.big_numbers.blue > li::before {
	background: #01468c;
    color: #FFF;
}
ol.big_numbers.blue > li:hover:before {
	color: #01468c;
    background: none;
}
ol.big_numbers > li:hover:before {
	background: #01468c;
    color: #FFF;
}
ol.big_numbers > li:last-of-type {
	border-bottom: none;
}
ol.big_numbers.small > li {
	padding: 0 0 0 2.35rem;
}
ol.big_numbers.small > li::before {
	width: 1.75rem;
    height: 1.75rem;
	font-size: 1rem;
	top: -.25rem;
}
ol.big_numbers.nohover  > li:hover:before {
	background: initial;
	color: initial;
}
.mform fieldset {
	border-radius: 3px;
	border: 1px solid #CCC;
	padding: 0 20px 20px;
}
.mform legend {
    padding: 0;
    font-weight: 400;
    margin: 0;
}
.mform label {
	display: block;
	font-weight: 700;
	margin: 20px 2px 5px;
}
.mform label span {
	font-weight: 400;
}
.mform input, .mform select, .mform textarea {
	border: 1px solid #CCC;
	min-height: 2rem;
	padding: .5rem;
	font-size: 1rem;
	border-radius: 3px;
	width: 100%;
	max-width: calc(100% - 4px);
	margin: 2px;
    box-sizing: border-box;
}
.mform textarea {
	font-family: 'Open Sans';
	min-height: 4.5rem;
	width: 100%;
}
.mform div {
	overflow: hidden;
}
.w50rem {
	width: 50rem !important;
}
.w40rem {
	width: 40rem !important;
}
select {
	appearance: auto;
	-webkit-appearance: menulist;
}
.mform input:focus, .mform input:active, .mform textarea:focus, .mform textarea:active {
    color: #444444;
    outline: 2px solid #000000;
}
ul.options {
	list-style: none;
	margin: 20px 0 0 !important;
	padding: 0 !important;
	line-height: 2rem;
}
ul.options li {
	display: inline-block;
	margin-right: 6px;
}
ul.options li a {
    text-decoration: none;
    padding: 6px 9px;
    border: 1px solid #01468c;
    border-radius: 3px;
    color: #01468c;
}
ul.options li a:hover, ul.options li a:focus {
    background: #01468c;
	color: #FFF;
	outline: none;
}
ul.options li a.active:after {
	content: '\2713';
	display: inline-block;
    position: relative;
    left: 4px;
	font-weight: 700;
}
