/* CSS Document */

.diagonal-bg-white { position: relative; border: none; overflow: hidden; padding: 0px; z-index:1; }
.diagonal-bg-white:hover { color: #393939!important; transition: none; }
.diagonal-bg-white:after { content: ""; position: absolute; top: 0; left: 0; width: 300%; height: 500%; background: #ffffff; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(-66% - 25px)) translateY(-36%) rotate(-25deg); transition: transform .5s; }
.diagonal-bg-white:hover::after { transform: translateY(10%) translateX(-150px) rotate(-25deg); }

.diagonal-bg-light-grey { position: relative; border: none; overflow: hidden; padding: 0px; z-index:1; }
.diagonal-bg-light-grey:hover { color: #393939!important; transition: none; }
.diagonal-bg-light-grey:after { content: ""; position: absolute; top: 0; left: 0; width: 300%; height: 550%; background: #C6C6C6; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(-66% - 25px)) translateY(-36%) rotate(-30deg); transition: transform .5s; }
.diagonal-bg-light-grey:hover::after { transform: translateY(10%) translateX(-75px) rotate(-30deg); }

.diagonal-bg-dark-grey { position: relative; border: none; overflow: hidden; padding: 0px; z-index:1; }
.diagonal-bg-dark-grey:hover { color: #ffffff!important; transition: none;}
.diagonal-bg-dark-grey:after { content: ""; position: absolute; top: 0; left: 0; width: 300%; height: 500%; background: #393939; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(-77% - 25px)) translateY(-36%) rotate(-30deg); transition: transform .5s; }
.diagonal-bg-dark-grey:hover::after { transform: translateY(10%) translateX(-150px) rotate(-30deg); }

.diagonal-bg-orange { position: relative;  border: none; overflow: hidden; padding: 0px; z-index:1; }
.diagonal-bg-orange:hover { color: #ffffff!important; transition: none; }
.diagonal-bg-orange:after { content: ""; position: absolute; top: 0; left: 0; width: 300%; height: 500%; background: #FF921E; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(-66% - 25px)) translateY(-36%) rotate(-30deg); transition: transform .5s; }
.diagonal-bg-orange:hover::after { transform: translateY(10%) translateX(-150px) rotate(-30deg); }

.diagonal-bg-purple { position: relative;  border: none; overflow: hidden; padding: 0px; z-index:1; }
.diagonal-bg-purple:hover { color: #ffffff!important; transition: none; }
.diagonal-bg-purple:after { content: ""; position: absolute; top: 0; left: 0; width: 300%; height: 500%; background: #8a288f; z-index: -1; transform-origin: 0% 0%; transform: translateX(calc(-66% - 25px)) translateY(-36%) rotate(-30deg); transition: transform .5s; }
.diagonal-bg-purple:hover::after { transform: translateY(10%) translateX(-150px) rotate(-30deg); }



.mega-menu-column .diagonal-text-grey-orange .financial-services a{ color:#393939; text-decoration: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( -210deg, #8a288f 50%, #8a288f 50%, #393939 50%)!important; background-size: 250% 200%; background-position: 100%; }
.mega-menu-column .diagonal-text-grey-orange .financial-services a:hover { transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1); background-position: 0%; }



.diagonal-text-orange-grey a { color:#FF921E; text-decoration: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( -210deg, #393939 50%, #393939 50%, #FF921E 50%); background-size: 250% 200%; background-position: 100%; }
.diagonal-text-orange-grey a:hover { color:#FF921E; text-decoration: none; transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1); background-position: 0%; }

.diagonal-text-grey-orange a { color:#393939; text-decoration: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( -210deg, #FF921E 50%, #FF921E 50%, #393939 50%); background-size: 250% 200%; background-position: 100%; }
.diagonal-text-grey-orange a:hover { color:#393939; text-decoration: none; transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1); background-position: 0%; }

.diagonal-text-purple-grey a { color:#8a288f; text-decoration: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( -210deg, #393939 50%, #393939 50%, #8a288f 50%); background-size: 250% 200%; background-position: 100%; }
.diagonal-text-purple-grey a:hover { transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1); background-position: 0%; }

.diagonal-text-grey-purple a { color:#393939; text-decoration: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( -210deg, #8a288f 50%, #8a288f 50%, #393939 50%); background-size: 250% 200%; background-position: 100%; }
.diagonal-text-grey-purple a:hover { transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1); background-position: 0%; }

.diagonal-text-white-grey a { color:#ffffff; text-decoration: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( -210deg, #393939 50%, #393939 50%, #ffffff 50%); background-size: 250% 200%; background-position: 100%; }
.diagonal-text-white-grey a:hover { transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1); background-position: 0%; }

.diagonal-text-grey-white a { color:#393939; text-decoration: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient( -210deg, #ffffff 50%, #ffffff 50%, #393939 50%); background-size: 250% 200%; background-position: 100%; }
.diagonal-text-grey-white a:hover { transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1); background-position: 0%; }


@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.diagonal-bg-purple:hover{ transition: all 0.3s; background: #8a288f; }
	.diagonal-bg-orange:hover{ transition: all 0.3s; background: #FF921E; }
	.diagonal-bg-dark-grey:hover{ transition: all 0.3s; background: #393939; }
	.diagonal-bg-light-grey:hover{ transition: all 0.3s; background: #C6C6C6; }
	.diagonal-bg-white:hover{ transition: all 0.3s; background: #ffffff; }
	.diagonal-bg-purple:after, .diagonal-bg-orange:after, .diagonal-bg-dark-grey:after, .diagonal-bg-light-grey:after, .diagonal-bg-white:after{ display: none; }
	.diagonal-text-orange-grey a, .diagonal-text-grey-orange a, .diagonal-text-purple-grey a, .diagonal-text-grey-purple a, .diagonal-text-white-grey a, .diagonal-text-grey-white a, .mega-menu-column .diagonal-text-grey-orange .financial-services a{ background-image: none!important; }
}