/* Theme Name: Stanchion Text Domain: stanchion Version: 1.0 Requires at least: 4.7 Requires PHP: 8 Description: Style for stanchion.co.za Author: the WordPress team Author URI: https://wordpress.org/ Theme URI: https://liquidthought.co.za License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html All files, unless otherwise stated, are released under the GNU General Public License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* General ================================== */ * {box-sizing:border-box;} :root { --midnight-blue:#011C40; --ghost-white:#F5F6FA; --orange:#F24405; --orange-red-opacity:rgba(255, 121, 73, 0.8); --orange-red-20:rgba(255, 121, 73, 0.2); --orange-red: #F24405; --gradient-1:linear-gradient(302deg, #F24405 12.15%, #FF7949 82.08%); --gradient-1-opacity: linear-gradient(302deg, rgba(242, 68, 5, 0.8) 12.15%, rgba(255, 121, 73, 0.8) 82.08%); --gradient-2:linear-gradient(128deg, #6EADFF 1.66%, #0558C4 94.22%); --denim-blue: #045BCC; --denim-blue-20: #045BCC20; --gradient-3: linear-gradient(128deg, #045BCC 1.65%, #000 120.63%); --grey: #D9DDEE; --subnav-orange: 100px; --subnav-blue: 50px; } body {background:var(--ghost-white);margin:0px;padding:0;font-family: century-gothic, sans-serif;font-weight: 400;font-style: normal;font-size:16px;-webkit-font-smoothing: antialiased;color:var(--midnight-blue);line-height:1.43em;position:relative;counter-reset: orderedList;overflow-x: hidden;font-smoothing:antialiased;} @font-face { font-family: 'stachion-icons'; src: url('font/stachion-icons.eot?48719702'); src: url('font/stachion-icons.eot?48719702#iefix') format('embedded-opentype'), url('font/stachion-icons.woff2?48719702') format('woff2'), url('font/stachion-icons.woff?48719702') format('woff'), url('font/stachion-icons.ttf?48719702') format('truetype'), url('font/stachion-icons.svg?48719702#stachion-icons') format('svg'); font-weight: normal; font-style: normal; } .icons, li.menu-item-has-children>a:after, .socials a:after, a.arrow-up:after, .button.download:before, .highlight h3:before, .holder:after, .section-contact-global ul li:before, .news-loop a .detail .tag:before {font-family: "stachion-icons";font-style: normal;font-weight: normal;speak: never;} .century a {font-family: century-gothic, sans-serif;font-style: normal;} .poppins, header ul li a, .section-solution ol li::before, h1, h2, h3, h4, .button, .section-timeline ul label, .modal-content span, .section-product-blue span, .page-sub-nav a, .contact-form .textbox, ul.select, .ui-autocomplete, .holder-404 .anim-holder .anim-end {font-family: poppins, sans-serif;font-style: normal;} a {color:var(--midnight-blue);} h1, h2, h3, h4 {font-weight: 700;font-style: normal;margin:0px;line-height:1.2em;} p {margin:0px;} h1 {font-size:44px;} h2 strong, h3 strong {font-weight:700;} h2 {font-size:44px;font-weight:400;max-width:480px;} h2 strong {font-weight:700;color:var(--denim-blue);} h3 {font-size:23px;} /* arrow up: e801 linkedin: e802 x: e803 */ header {position:fixed;top:0;left:0;width:100%;z-index:50;} header.blur {background: rgba(245, 246, 250, 0.90);backdrop-filter: blur(4px);} header.whiteback.blur {background: rgba(255, 255, 255, 0.90);backdrop-filter: blur(4px);} header.blueback.blur {background: rgba(43, 114, 214, 0.80);backdrop-filter: blur(4px);} header img.logo-white {display:none;} header img.logo-colour {display:block;} header.white img.logo-white {display:block;} header.white img.logo-colour {display:none;} header.white {background:none;} header ul {list-style:none;margin:32px 0px;padding:0px;display:flex;justify-content: flex-end;width:100%;z-index:1;transition:top .3s ease-out, opacity .3s linear .2s;} header ul li {padding:0;margin:0;position:relative;} header ul li a {display:inline-block;} header .flex>div:nth-of-type(1){display: flex;align-items: center;flex:0 0 0;} header .flex>div:nth-of-type(2){display: flex;justify-content: flex-end;} header ul li a {position:relative;color: var(--midnight-blue);font-size: 14px;font-weight: 500;line-height: 1.14em;letter-spacing: 0.84px;text-transform: uppercase;text-decoration:none;padding:0px 12px;transition:color .5s linear;} header ul li.current-menu-item>a, header ul li:hover {text-decoration:underline;text-underline-offset:7px;} header.white ul li.current-menu-item>a, header.white ul li:hover {text-decoration-color:white;} header ul.sub-menu li.current-menu-item>a, header ul.sub-menu li>a:hover {text-decoration:none !important;} header ul li:nth-last-of-type(1) a {padding-right:0;} header.white ul.nav>li>a {color:white;} header ul.sub-menu {position:absolute;top:calc(100% + 2px);right:0px;display: inline-flex;padding: 16px;flex-direction: column;align-items: flex-start;border-radius: 20px; background: var(--ghost-white);box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);width:auto;margin:0px;transform:translateY(-30px);opacity:0;pointer-events: none;transition: all .2s linear;} header ul li:hover ul.sub-menu {opacity:1;pointer-events: all;transform: translateY(0);} header ul.sub-menu li {display:block;width:100%;margin-bottom:16px;text-decoration:none;} header ul.sub-menu li:nth-last-of-type(1) {margin-bottom:0px;} header ul.sub-menu li a {font-size:13.1px;padding:0 16px;white-space: nowrap;border-radius: 10px;display:flex;line-height: 1em;height:32px;justify-content: flex-start;align-items:center;padding-top:3px;transition:background .2s linear;} header ul.sub-menu li a img {margin-right:14px;max-width: 15px;height: auto;} header ul.sub-menu li:nth-of-type(3) a img {position:relative;transform: translateX(-2px);} header ul.sub-menu li:hover a, header ul.sub-menu li.current-menu-item a {background:#fff;} header ul.sub-menu li.current-menu-item.nav-pro-services a {background:none;} li.menu-item-has-children>a {padding-right:26px;} li.menu-item-has-children>a:after { content: '\e800';transform-origin: center right;font-size: 10px;transform: scale(0.5);width: 10px;position: absolute;height: 10px;right: 12px; transition:transform .2s linear;line-height: 10px;display: block;top: 0;} header ul li:hover a:after{transform: scale(0.5) rotate(180deg);} .hamburger {margin:32px 0px;display:none;height:22px;width:32px;padding:0px 10px;z-index:2;} .hamburger div {width:12px;margin-bottom:5px;border:1px solid var(--midnight-blue);cursor:pointer;} header.white .hamburger div {border-color:white;} header.mobile ul {top:0;opacity:1;pointer-events: all;transition:top .3s ease-out,opacity .1s linear;} header.mobile .hamburger div {border-color:white;} header:after {position: absolute;content: "";top: 0;left: 0;background: rgba(0,0,0,0.2);width: 100%;height: 100vh;opacity:0;pointer-events: none;transition:opacity .2s ease-out;} header.mobile:after{opacity:1;} footer a {color:var(--midnight-blue);} footer ul {text-align:right;margin:0px;padding:0px;list-style:none;} footer ul a {color:var(--orange-red);font-weight:600;} footer .main-width {border-top:1px solid #DCDDE1;padding-top:50px;padding-bottom:50px;margin-top:160px;} footer .flex .flex {align-items:center;} footer .flex .flex>a {line-height:1em;flex:0 0 0;} .copyright {background: #EDEEF4;padding:24px 40px;text-align:center;} .socials {display:flex;} .socials a {display:flex;justify-content: center;align-items: center;text-decoration:none;width:48px;height:48px;border-radius:100%;border:1px solid #DCDDE1;transition:background .2s linear;margin-left:24px;} .socials a:hover {background:#DCDDE1;} a.linkedin:after {content:"\e802";} a.x:after {content:"\e803";} a.arrow-up {width:48px;height:48px;border-radius:100%;border:1px solid var(--midnight-blue);display:flex;justify-content: center;align-items: center;position:absolute;left:100%;text-decoration:none;transition:all .3s linear;max-width:48px;margin-left:20px;} a.arrow-up:after {content:"\e801";font-size:14px;} a.arrow-up:hover {color:white;background:var(--midnight-blue);} @media screen and (max-width:1380px){ footer a.arrow-up {position:relative;left:0;} } .main-width {max-width:1200px;margin:auto;position: relative;} .flex {display:flex;} .flex>* {flex:1;} .fade {opacity:0;} .top-margin {margin-top:160px;} .flex-wrap {flex-wrap:wrap;} @media screen and (max-width:1240px){ .main-width {padding-left:20px;padding-right:20px;} .orange-intro .main-width, header .main-width, .section-solution .main-width, .careers-purpose .main-width {padding-left:40px;padding-right:40px;} .orange-intro.outro .sticky-intro {max-width:calc(100% - 40px);} } @media screen and (max-width:952px){ } @media screen and (max-width:800px){ /* header */ header ul {opacity:0;pointer-events: none;position: absolute;width: 100%;flex-direction: column;left: 0px;margin: 0px;padding: 80px 40px;background: var(--gradient-1);box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);justify-content: flex-start;overflow-y: scroll;max-height:100vh;top:-100vh;} header ul::-webkit-scrollbar {display: none;} header ul {-ms-overflow-style: none;scrollbar-width: none;} .hamburger {display:block;position:relative;} header.mobile .hamburger div:nth-of-type(1) {transform: translateY(10px) translateX(-5px) rotate(45deg);width: 20px;position: absolute;top: -5px;} header.mobile .hamburger div:nth-of-type(2) {transform: translateY(10px) translateX(-5px) rotate(-45deg);width: 20px;position: absolute;top: -5px;} header.mobile .hamburger div:nth-of-type(3) {display:none;} header ul li a {padding:20px 0px;display:inline-flex;color:white;} li.menu-item-has-children>a:after {top:20px;} header ul.sub-menu {position: relative;padding: 0 0 10px 0;opacity: 0;height:0;top: 0;right: auto;transform: none;box-shadow:none;background:none;display: block;transition:all .3s linear;} header ul li:hover a:after{transform: scale(0.5) rotate(0deg);} header ul li.menu-item-has-children.over ul.sub-menu {height:auto;opacity:1;} header ul li.menu-item-has-children.over a:after {transform: scale(0.5) rotate(180deg);} header ul.sub-menu li:hover a, header ul.sub-menu li.current-menu-item a {background: none;} /* footer */ footer .main-width.flex {align-items: flex-start;padding:40px 40px 20px 40px;flex-wrap:wrap;} footer .main-width.flex .flex {margin-bottom:20px;flex: 0 0 100%;} footer li, footer .copyright {font-size:12px;text-align:left;} .socials a {width:40px;height:40px;margin-left:8px;} .socials a:nth-of-type(1) {margin-left:24px;} header.white.orange {background:var(--orange-red-opacity);backdrop-filter: blur(4px);} header ul li img {filter:invert(100%) grayscale(100%) brightness(200%);} } @media screen and (max-width:768px){ body {font-size:15px;} .no-container .main-width {padding-left:40px;padding-right:40px;} .top-margin {margin-top: 80px;} header .over ul.sub-menu {height:auto;} header ul ul.sub-menu li.current-menu-item>a, header ul ul.sub-menu li:hover {text-decoration:none!important;} header ul li ul.sub-menu li.current-menu-item>a, header ul li ul li.sub-menu:hover {text-decoration:none !important;} header ul li.current-menu-item>a, header ul li:hover {text-decoration:none !important;} .title1 {padding-right:10px;} } @media screen and (max-width:576px){ header img.logo {max-width:108px;} footer a.arrow-up {position: absolute;bottom: calc(100% + 40px);left: 20px;width:40px;height:40px;} } /* General Anaimtions */ .animate-text h1 {transition:all .5s ease-out;transform:translateY(100px);opacity:0;} .animate-text h2 {transition:all .5s ease-out;transform:translateY(100px);opacity:0;} .animate-text.animated h1 {transform:translateY(0px);opacity:1;} .animate-text.animated h2 {transform:translateY(0px);opacity:1;} .animate-text p {transition:all .5s ease-out .5s;opacity:0;} .animate-text.animated p {opacity:1;} .top-pad {padding-top:160px;} .relative {position:relative;} .orange-intro {transition:opacity .3s linear;color:#fff;} .orange-intro .sticky-intro {transition:width .5s linear, height .5s linear, top .3s linear, border-radius .6s linear;background: var(--gradient-1);height:100vh;width:100%;} .orange-intro .sticky-container {height:400vh;} .orange-intro.done {opacity:0;transition:opacity .2s linear;} .scale {transform:scale(1.05);} .orange-intro .phone {position:absolute;height:655px;left:50%;width: 215px;transform-origin: bottom center;transform: translateX(-50%);animation-duration:.5s;animation-fill-mode: forwards;transition:all .6s ease-out;bottom:-100vh;transition-delay:.3s;} .orange-intro img.p-hand {position:absolute;left:-106px;top:215px;z-index:2;transition:opacity .3s linear;transition-delay:0s;width:419px; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;} .orange-intro img.p-hand-mobile {display:none;} .orange-intro .p {position:absolute;left:0;top:0;width:215px;z-index:1;} .orange-intro .shadowx {height: 100%;width: 100%;position: absolute;left: -45%;filter: blur(50px);background: rgba(107,46,0,0.4);border-radius: 100px;top: 100px;} .orange-intro .shadow {height: 100%;width: 500px;position: absolute;left: -103%;border-radius: 100px;top: -13px;} .orange-intro .main-width {width:100%;position: absolute;top: 0;bottom: 0;display:flex;} .orange-intro .page-1 {position:relative;transition:position .4s linear;transition-delay:1s;padding-top:20vh;padding-bottom:20vh;width: calc(100% - 40px);display:flex;max-width: 1100px;margin: 0px auto;transform: translateX(50px);} .orange-intro .page-1 h1 {flex:1;position:relative;transition:opacity .3s linear;} .orange-intro .page-1 h1 strong {position:absolute;left:0;top:0;max-width:350px;opacity:0;animation-name:introcopy;animation-duration:1s;animation-fill-mode: forwards;} .orange-intro .page-1 h1 span {position:absolute;right:0;bottom:0;max-width: 280px;display: inline-block;opacity:0;animation-delay:3s;animation-name:introcopy;animation-duration:1s;animation-fill-mode: forwards;} .orange-intro .page-1 span.instruction {position: absolute;bottom: 10%;right: 0px;width: 271px;opacity:0;animation-name:introcopy;animation-duration:1s;animation-fill-mode: forwards;transition:opacity .3s linear;transition-delay:.5s;} .orange-intro .page-1 span.instruction:before {content:"";position: absolute;top:calc(100% + 20px);height:0;width:1px;background:white;animation-name:lineheightpx;animation-duration:1s;animation-fill-mode: forwards;} .orange-intro .page-1 span.instruction:after {content:"Scroll to learn more";} .orange-intro .page-1 .connector {position: absolute;left: 160px;right: 270px;top: 170px;bottom: 185px;} .orange-intro .page-1 .connector>div {background:rgba(255,255,255,1);position:absolute;width:0px;height:0;} .orange-intro .page-1 .connector>div:nth-of-type(1) {left:0;top:0;width:1px;animation-name:lineheight;animation-duration:.5s;animation-fill-mode: forwards;} .orange-intro .page-1 .connector>div:nth-of-type(2) {left:0;top:50%;height:1px;animation-name:linewidth;animation-duration:.5s;animation-fill-mode: forwards;} .orange-intro .page-1 .connector>div:nth-of-type(3) {right:0px;width:1px;top:50%;animation-name:lineheight;animation-duration:.5s;animation-fill-mode: forwards;} .orange-intro .p .face {animation-name:opacity;animation-duration:.5s;animation-fill-mode: forwards;} .orange-intro .page-1 .connector>div:nth-of-type(1):after {content:"";width:4px;height:4px;border:1px solid white;border-radius:100%;position:absolute;top:-5px;left:50%;transform: translateX(-50%);opacity:0;animation-name:introcopy;animation-duration:.1s;animation-fill-mode: forwards;} .orange-intro .page-1 .connector>div:nth-of-type(3):after {content:"";width:4px;height:4px;border:1px solid white;border-radius:100%;position:absolute;bottom:-5px;left:50%;transform: translateX(-50%);opacity:0;animation-name:introcopy;animation-duration:.1s;animation-fill-mode: forwards;} .phone.active {bottom:calc(50vh - 440px);} .phone .p:after {content:"";position:absolute;top:47%;left:20px;right:20px;border:1px solid #D4DEEA;} .phone .p img {width:100%;height:auto; image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;image-rendering: pixelated;} .phone .p .card {width:calc(100% - 50px);left:24px;top:80px;position:absolute;} .phone .p .face {width:45px;left:50%;top:66%;transform: translateX(-50%);position:absolute;transition:all .3s linear;opacity:0;} .phone .p .success {width:30px;left:50%;top:67%;transform: translateX(-50%);position:absolute;transition:all .3s linear;opacity:0;} .phone .p .success-text {width:100%;left:0;top:72%;text-align:center;position:absolute;transition:all .3s linear;color:var(--denim-blue);font-size:17px;line-height: 1.1em;opacity:0;} @media (min-height:855px){ .phone.active {bottom:-20px;} } @keyframes introcopy { 0% {opacity:0;} 100% {opacity:1;} } @keyframes lineheight { 0% {height:0;} 100% {height:50%;} } @keyframes linewidth { 0% {width:0;} 100% {width:100%;} } @keyframes lineheightpx { 0% {height:0;} 100% {height:100px;} } @keyframes opacity { 0% {opacity:0;} 100% {opacity:1;} } @keyframes opacityreverse { 0% {opacity:1;} 100% {opacity:0;} } @keyframes successgrow { 0% {opacity:0;opacity:1;transform: translateX(-50%) translateY(0px) scale(1.2);} 30% {opacity:1;transform: translateX(-50%) translateY(0px) scale(1);} 70% {opacity:1;transform: translateX(-50%) translateY(0px) scale(1);} 100% {opacity:1;transform: translateX(-50%) translateY(-20px) scale(1);} } .orange-intro .page-2 {position:absolute;opacity:0;padding:calc((100vh - 553px)/2) 80px 0 50%;transition:opacity .3s linear;transition-delay:.3s;} .orange-intro .page-2 p {font-size:25px;margin-bottom:40px;line-height:1.4em;} .orange-intro .page-2 strong {font-weight:700;} .orange-intro .page-2 a:nth-of-type(1) {margin-right:20px;margin-bottom:15px;} .orange-intro.outro .shadow {height: 64%;width: 100%;position: absolute;left: -15%;filter: blur(20px);background: rgba(107,46,0,0.4);border-radius: 50px;top: 47px;} .orange-intro.outro .shadow img {display:none;} .orange-intro .sticky-intro {transition:all .4s ease-out;transition-delay:0s;} /* Desktop only */ @media screen and (min-width:768px){ .orange-intro.outro {} .orange-intro.outro h1 {opacity:0;} .orange-intro.outro span.instruction {opacity:0 !important;} .orange-intro.outro img.p-hand {opacity:0;transition-delay:.2s;} .orange-intro.outro .phone {left:25%;transition-delay:.6s;bottom:calc(50% - 441px);} .orange-intro.outro .page-2 {position:relative;opacity:1;transition-delay:1s;} .orange-intro.outro .page-1 {position:absolute;opacity:0;transition-delay:1s;} .orange-intro .sticky-intro {transition:all .4s ease-out;transition-delay:0s;} .orange-intro.outro .sticky-intro {top: 100px;margin: auto;height: calc(100vh - 120px);border-radius: 50px;width: 1200px;overflow: hidden;transition-delay: 0s;} .orange-intro .p .face {animation-delay:4s;} .orange-intro .page-1 h1 strong {animation-delay:2s;} .orange-intro .page-1 h1 span {animation-delay:4.5s;} .orange-intro .page-1 .connector>div:nth-of-type(1) {animation-delay:3s;} .orange-intro .page-1 .connector>div:nth-of-type(2) {animation-delay:3.5s;} .orange-intro .page-1 .connector>div:nth-of-type(3) {animation-delay:4s;} .orange-intro .page-1 .connector>div:nth-of-type(1):after {animation-delay:3s;} .orange-intro .page-1 .connector>div:nth-of-type(3):after {animation-delay:4s;} .orange-intro .page-1 span.instruction {animation-delay:5s;} .orange-intro .page-1 span.instruction:before {animation-delay:5.5s;} .orange-intro.outro .p .face {opacity:1;animation-name:opacityreverse;animation-delay:2s;} .orange-intro.outro .p .success {animation-name:successgrow;animation-delay:2.5s;animation-duration:1.5s;animation-fill-mode: forwards;} .orange-intro.outro .p .success-text {animation-name:opacity;animation-delay:3.8s;animation-duration:.3s;animation-fill-mode: forwards;} } .section-reach.sticky-container {height:200vh;margin-top:-150vh} .section-reach h2, .section-reach p, .section-reach h2 strong {color:white;max-width:none;} .section-reach .flex {padding:80px 100px;position: relative;z-index:2;padding-bottom: 34%;} .section-reach .flex>div:nth-of-type(1) {flex:0 0 60%;padding-right:60px;} .section-reach .sticky {background: var(--gradient-2);top: 100px;margin: auto;height: calc(100vh - 120px);border-radius: 50px;overflow:hidden;align-items: flex-start;/*max-height: 730px;*/} .section-reach.about .sticky {height: auto;} .section-reach .globe {position: absolute;bottom:-10px;min-height:100px;width:100%;} .section-reach .globe img {max-width: 100%;} .section-reach .flex>div:nth-of-type(1) p {font-size:23px;line-height:1.5em;} .globe .marker {position:absolute;top:-100vh;width:10px;height:10px;border:3px solid white;border-radius:10px;transition:top 1s ease-out;} .globe .marker:nth-of-type(1) {left:22%;top:42%;transition-delay:.4s;} .globe .marker:nth-of-type(2) {left:46%;top:20%;transition-delay:.7s;} .globe .marker:nth-of-type(3) {left:52%;top:64%;transition-delay:1s;} .globe .marker:nth-of-type(4) {left:55.5%;top:32%;transition-delay:.9s;} .globe .marker:nth-of-type(5) {left:59.5%;top:39%;transition-delay:.6s;} .globe .marker:nth-of-type(6) {left:73%;top:79%;transition-delay:.3s;} .globe .marker:before {content:"";width:0px;height:100vh;position:absolute;left:1px;bottom:0;border:0.5px solid rgba(255,255,255,0.1);} .globe .marker.preflight {transition:top 0 ease-out;} .globe .marker.preflight:nth-of-type(1) {left:22%;top:-100vh;transition-delay:0s;} .globe .marker.preflight:nth-of-type(2) {left:46%;top:-100vh;transition-delay:0s;} .globe .marker.preflight:nth-of-type(3) {left:52%;top:-100vh;transition-delay:0s;} .globe .marker.preflight:nth-of-type(4) {left:55.5%;top:-100vh;transition-delay:0s;} .globe .marker.preflight:nth-of-type(5) {left:59.5%;top:-100vh;transition-delay:0s;} .globe .marker.preflight:nth-of-type(6) {left:73%;top:-100vh;transition-delay:0s;} .section-carousel {margin-top:160px;background:white;} .section-carousel .sticky-container {height:300vh;padding-top:120px;padding-bottom:120px;} .section-carousel .sticky {height:auto;top:calc((100vh - 280px)/2);} .section-carousel h2 strong {color:var(--orange-red);} .section-carousel h3 {color:var(--orange-red);margin-bottom:18px;} .section-carousel .flex {width:100%;} .section-carousel .box {background:var(--ghost-white);border-radius:40px;min-height:290px;min-width:400px;max-width:400px;margin-right:24px;padding:40px 35px 40px 40px} .section-carousel .box .imgHolder {height:75px;} .carousel {position:absolute;left:0px;top:0px;overflow:hidden;width:calc(50vw - 8px);min-height:290px;} .carousel .flex {position:absolute;left:0px;top:0px;} .section-carousel .relative {padding-bottom:120px;min-height:290px;margin-right: calc((100vw - 1200px)/-2);overflow:hidden;} .section-solution {} .section-solution ol {list-style: none;counter-reset: list;margin:0px;padding:0px;} .section-solution ol p {margin-bottom:20px;} .section-solution ol li {padding-bottom:40px;} .section-solution ol li::before {content: counter(list, decimal-leading-zero);counter-increment: list;margin-bottom: 24px;padding-bottom:24px;border-bottom:1px solid var(--denim-blue-20);display:block;color: var(--denim-blue);font-size:23px;font-weight:400;} .section-solution h3 {margin-bottom:24px;color: var(--denim-blue);font-size:23px;} .section-solution h2 strong {color:var(--denim-blue);} .section-solution h2 {padding-right: 20px;} .section-solution {background:url(/wp-content/themes/stanchion/images/background-logo-element.svg) calc( (100vw - 1200px)/2 ) 90px no-repeat;padding-bottom: 100px;margin-bottom: -100px;} .sticky-container {height:400vh;margin-top:0px;width:100%;} .sticky-container.container-2 {margin-top:-50vh;} .sticky {position:sticky;top:0;height:100vh;margin:0px auto;display:flex;justify-content: center;align-items: center;transition:all .5s linear;} .sticky-1 {top:130px;background:orange;} .sticky-2 {top:130px;background:red;} .slick-dots {top: auto;bottom: calc(100% + 20px);left: 0px;width: auto;} .slick-dots li button {width:10px;height:10px;background:none;border:1px solid white;border-radius:100%;padding:0;} .slick-dots li {padding:0px;margin:0;} .slick-dots li button:before {display:none;} .slick-dots li.slick-active button {background:white;} @media screen and (max-width:1200px){ .section-carousel .relative {margin-right: -20px;} } @media screen and (max-width:1024px){ .orange-intro .page-2 p {font-size: 18px;} .orange-intro .page-2 {padding-right:40px;} } @media screen and (max-width:768px){ h1 {font-size:42px;} h2 {font-size:26px;} h3 {font-size:18px;} .top-pad {padding-top: 80px;} .section-carousel .flex {flex-direction:column;} .section-carousel .relative {margin-top: 110px;overflow:visible;margin-right:0px;} .section-carousel .carousel {width: calc(100% + 20px);} .section-carousel .box {min-height: 320px;min-width: 250px;max-width: 250px;} .carousel {position: relative;overflow: visible;min-height: auto;} .section-carousel {margin-top: 80px;} .section-carousel .sticky {height: auto;top: 0;} .section-carousel .sticky-container {padding-top:80px;padding-bottom:120px;height:auto;position:relative;} .section-carousel .box {padding: 30px 25px 32px 30px;} .section-carousel .slick-dots li button {border:1px solid #FFDACD;} .section-carousel .slick-dots li.slick-active button {background:#FFDACD;} .section-reach .flex {padding: 40px 40px 33vw 20px;flex-direction: column;} .section-reach .flex>div:nth-of-type(1) {padding-right: 0;} .section-reach .flex h2 {margin-bottom:20px;} .section-reach .sticky {border-radius:40px;height:auto;max-height:none;} .section-reach .right-content {margin-top:20px;} .section-reach.sticky-container {height:auto;} .section-reach.about .sticky {height:auto;} .section-reach.about .flex>div:nth-of-type(1) p {font-size:15px;} .section-reach.about .flex>div p {margin-bottom:20px;} .section-reach.about .flex>div:nth-of-type(1) {flex: 1; padding-right: 0;} .globe .marker:before {display:none;} .globe .marker.preflight {top:initial;opacity:0;} .globe .marker {opacity:1;} .section-solution .flex {flex-direction:column;} .section-solution ol li {padding-bottom: 60px;} .section-solution h2 {margin-bottom:80px;} .section-solution {background-size:100%;background-position:left 60px;} .orange-intro .sticky-intro {position:relative;} .orange-intro .main-width {flex-direction:column;} .orange-intro .page-2 {position:relative;opacity:1;padding:0;} .orange-intro .page-1 {position:relative;opacity:1;flex-direction: column;} .orange-intro .page-1 h1 span, .orange-intro .page-1 h1 strong {position:relative;top:0;left:0;right:auto;bottom:auto;width:auto;max-width:none;display:inline;} .orange-intro .page-1 h1 .connector {display:none;} .orange-intro .page-1 span.instruction {right:auto;left:0;position:relative;} .orange-intro .page-1 span.instruction:after {content:"";position:absolute;width:5px;height:5px;border:1px solid white;border-radius:5px;top:40px;left: -3.5px;} .orange-intro .page-1 span.instruction:before {height:40px;} .orange-intro .page-1 span.instruction {margin: 10px 0 0 16px;} .orange-intro .page-2 p {font-size:18px;} .orange-intro .phone {animation-delay:0s;} .orange-intro .page-1 h1 strong {animation-delay:0s;} .orange-intro .page-1 h1 span {animation-delay:0s;} .orange-intro .page-1 .connector>div:nth-of-type(1) {animation-delay:0s;} .orange-intro .page-1 .connector>div:nth-of-type(2) {animation-delay:0s;} .orange-intro .page-1 .connector>div:nth-of-type(3) {animation-delay:0s;} .orange-intro .page-1 .connector>div:nth-of-type(1):after {animation-delay:0s;} .orange-intro .page-1 .connector>div:nth-of-type(3):after {animation-delay:0s;} .orange-intro .page-1 span.instruction {animation-delay:0s;} .orange-intro .page-1 span.instruction:before {animation-delay:0s;} .orange-intro .sticky-container {height: auto;} .section-reach.sticky-container {margin-top: 0;} .orange-intro .main-width {position:relative;} .orange-intro .sticky-intro {height:auto;padding-bottom:80px;} .orange-intro .page-1 {padding-top: 120px;padding-bottom: 170px;} .orange-intro.outro .sticky-intro {max-width: 100%;} .orange-intro img.p-hand-mobile {display: block;position: absolute;left: 0;top: 0;width: 100%;height: auto;z-index: 2;} .orange-intro .phone {position: relative;height: 70vw;left: 0;width: calc(100% + 80px);transform-origin: bottom center;transform: none;animation-duration: .5s;animation-fill-mode: forwards;transition: all .3s ease-in;bottom: 0;transition-delay: 0s;margin: 0px -40px;} .orange-intro .p {position: absolute;left: 10.5%;top: -23%;width: 37.5%;z-index: 1;transform: rotate(-6deg);bottom: auto;} .orange-intro img.p-hand {display:none;} .orange-intro .page-1 span.instruction:before {top:0;animation-duration:0s;} .orange-intro .p .face {opacity:1;animation-name:opacityreverse;animation-delay:2s;} .orange-intro .p .success {animation-name:successgrow;animation-delay:2.5s;animation-duration:1.5s;animation-fill-mode: forwards;} .orange-intro .p .success-text {animation-name:opacity;animation-delay:3.8s;animation-duration:.3s;animation-fill-mode: forwards;} @keyframes lineheightpx { 0% {height:0;} 100% {height:40px;} } } @media screen and (max-width:576px){ .orange-intro .page-1 h1 {max-width: 388px;} .orange-intro .page-2 a {width: 100%;margin: 0px 0px 20px 0px;} .orange-intro .page-1 {width: 100%;margin: 0px;transform: translateX(0px);padding-bottom: calc(100px + 10%);} .phone .p .card {width: calc(100% - 40px);left: 20px;top: 20%;} .orange-intro .phone {left: 20px;width: calc(100% + 60px);} } .button, .modal-form .hs-button {text-decoration:none;text-align: center;font-size: 13.1px;font-style: normal;font-weight: 500;line-height: 1.23em;letter-spacing: 0.78px;text-transform: uppercase;height:52px;border-radius: 10px;border: 1px solid;display:inline-flex;justify-content: center;align-items: center;padding:0px 20px;padding-top:3px;transition:background .3s linear, color .2s linear, border .3s linear, color .2s linear;cursor:pointer;} .button.button-blue {color: var(--denim-blue);border-color:var(--denim-blue);} .button.button-blue:hover {color: white;border-color:var(--denim-blue);background:var(--denim-blue);} .button.button-blue.inverse, .modal-form .hs-button {color: white;border-color:var(--denim-blue);background:var(--denim-blue);} .button.button-blue.inverse:hover, .modal-form .hs-button:hover {color: var(--denim-blue);border-color:var(--denim-blue);background:none;} .button.button-blue-white.inverse {color: white;border:none;;background:var(--denim-blue);} .button.button-blue-white.inverse:hover {color: var(--denim-blue);border-color:white;background:white;} .button.button-darkblue {color: var(--midnight-blue);border-color:var(--midnight-blue);} .button.button-darkblue:hover {color: white;border-color:var(--midnight-blue);background:var(--midnight-blue);} .button.button-darkblue.inverse {color: white;border-color:var(--midnight-blue);background:var(--midnight-blue);} .button.button-darkblue.inverse:hover {color: var(--midnight-blue);border-color:var(--midnight-blue);background:none;} .button.button-whiteorange {color: white;border-color:white;} .button.button-whiteorange:hover {color: var(--orange-red);background:white;} .button.button-whiteorange.inverse {color: var(--orange-red);border-color:white;background:white;} .button.button-whiteorange.inverse:hover {color: white;background:none;} .button.button-whiteblue {color: white;border-color:white;} .button.button-whiteblue:hover {color: var(--midnight-blue);background:white;} .button.button-whiteblue.inverse {color: var(--midnight-blue);border-color:white;background:white;} .button.button-whiteblue.inverse:hover {color: white;background:none;} .button.button-orange {color: var(--orange-red);border-color:var(--orange-red);} .button.button-orange:hover {color: white;border-color:var(--orange-red);background:var(--orange-red);} .button.button-orange.inverse {color: white;border-color:var(--orange-red);background:var(--orange-red);} .button.button-orange.inverse:hover {color:var(--orange-red);background:white;} .button.button-grey {color: var(--midnight-blue);border-color:var(--grey);background:var(--grey);} .button.button-grey:hover {color: var(--midnight-blue);border-color:var(--midnight-blue);background:none;} @media screen and (max-width:768px){ .button {height:40px;} } .section-partners {} .section-partners .sticky-container {height:450vh;padding-top:120px;} .section-partners .sticky {height:auto;top:calc((100vh - 400px)/2);} .section-partners h2 strong {color:var(--denim-blue);} .section-partners h2 {margin-bottom:25px;} .section-partners h3 {color:var(--denim-blue);margin-bottom:18px;} .section-partners p {max-width:390px;} .section-partners .flex {width:100%;} .section-partners .box {background:white;border-radius:40px;min-height:290px;min-width:400px;margin-right:24px;padding:40px 35px 40px 40px;display: flex;flex-direction: column;justify-content: flex-end;} .section-partners .box .imgHolder {height:30px;margin-top:auto;} .section-partners .box .imgHolder img {max-height: 100%;max-width: 160px;height: auto;width: auto;} .section-partners .box p {margin-bottom:20px;} .section-partners .relative {padding-bottom:120px;min-height:500px;} .section-partners .carousel {min-height:500px;} @media screen and (max-width:768px){ .section-partners .flex {flex-direction:column;} .section-partners .relative {margin-top:94px;padding-bottom:0px;} .section-partners .carousel {width: calc(100% + 20px);} .section-partners .box {min-height: auto;min-width: 60vw;max-width: 60vw;} .section-partners {margin-top: 0px;} .section-partners .sticky {height: auto;top: 0;} .section-partners .sticky-container {padding-top:80px;padding-bottom:0px;height:auto;position:relative;} .section-partners .box {padding: 30px 25px 25px 30px;min-height: 400px;} .section-partners .slick-dots li button {border:1px solid var(--denim-blue);} .section-partners li.slick-active button {background: var(--denim-blue);} } @media screen and (max-width:576px){ .section-partners .box {min-width: 70vw;max-width: 70vw;min-height: 510px;} } .section-team {background:var(--gradient-3);min-height:500px;color:white;padding-top:160px;padding-bottom:100px;} .section-team .flex>div {flex:0 0 50%;margin-bottom:60px;} .section-team h2 strong {color:white;display:block;} .section-team .button {margin-left:20px;} .section-team .flex>div:nth-of-type(2) {text-align:right;} .section-team .flex>div:nth-of-type(3) p {font-size:23px;line-height:1.5em;padding-right:100px;} .section-team .flex>div:nth-of-type(4) p {margin-bottom:20px;} .section-team .flex>div:nth-of-type(4) p:nth-last-of-type(1) {margin-bottom:0px;} .section-team .team {margin:0px;padding:0px;list-style:none;display:flex;flex-wrap: wrap;flex:0 0 100% !important;justify-content: space-between;} .section-team .team .box {flex:0 0 calc((100% - 80px)/6);cursor:pointer;} .section-team .team .box img {position:absolute;bottom:-3px;left:0;width:100%;height:calc(100% + 3px);object-fit: cover;} .section-team .team .box .imgHolder {background:var(--denim-blue);border-radius:22px;overflow:hidden;position:relative;height:calc((1200px - 80px)/6);transition:background .3s ease-out;} .section-team .team .box:hover .imgHolder {background:white;} .section-team .team .box strong {display:inline-block;position:relative;margin-top:15px;font-weight:600;} .section-team .team .box span {display:block;width:100%;font-size:14px;} .section-team .team .box strong:before {content:"";opacity:0;display:block;position:absolute;width:4px;height:4px;border-radius:100%;border:1px solid white;top:9.5px;left:calc(100% + 32px);transform: translateX(-5px);transition:all .2s linear;} .section-team .team .box strong:after {content:"";opacity:0;display:block;position:absolute;width:20px;height:1px;background:white;top:12px;left:calc(100% + 12px);transform: translateX(-5px);transition:all .2s linear;} .section-team .team .box:hover strong:before, .section-team .team .box:hover strong:after {opacity:1;transform: translateX(0);} .team .slick-dots li button {border:1px solid white;} .team li.slick-active button {background:white;} .modal.over {display:flex;pointer-events: all;opacity:1;} .modal {background:rgba(0,0,0,0.4);position:fixed;width:100%;height:100vh;left:0;top:0;z-index:50;overflow-y: scroll;padding:100px 0px;display:flex;pointer-events: none;opacity:0;transition:all .3s linear;} .modal-content {width:calc(100% - 40px);max-width:1000px;margin:auto;min-height:100px;border-radius: 40px; background: white;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);padding:14px;display:flex;position:relative;transform:translateY(100px);transition:all .3s linear;} .modal.over .modal-content {transform:translateY(0px);} .modal-content .button-close {position:absolute;right:18px;top:14px;width:40px;height:40px;cursor: pointer;} .modal-content .button-close:before, .modal-content .button-close:after {content:"";width:20px;height:1px;background:var(--midnight-blue);position:absolute;top:20px;left:10px;transform: rotate(45deg);} .modal-content .button-close:after {transform: rotate(-45deg);} .modal-content .imgHolder {flex:0 0 50%;border-radius:32px;background:var(--denim-blue);position:relative;min-height: 430px;overflow:hidden;max-height: 550px;} .modal-content .imgHolder img {position:absolute;bottom:-3px;left:0;width:100%;height:calc(100% + 3px);object-fit: cover;} .modal-content>div:nth-last-of-type(1) {padding:80px;} .modal-content p {margin-bottom:20px;} .modal-content .button {margin-top:20px;} .modal-content span {margin-bottom:30px;display:block;} .modal-content .button-close:hover:before, .modal-content .button-close:hover:after {background:var(--denim-blue);} @media screen and (max-width:1024px){ .section-team .team {width:calc(100% + 20px);display:block;margin-top: 60px;} .section-team .team .box {width:200px;padding-right:20px;} .section-team .flex {flex-direction: column;align-items: flex-start;} .section-team .button {margin-left: 0px;margin-right: 20px;} } @media screen and (max-width:980px){ .modal-content>div:nth-last-of-type(1) {padding: 80px 40px;} } @media screen and (max-width:768px){ .section-team .flex>div:nth-of-type(3) p {font-size: 15px;padding-right: 0px;} .section-team {padding-top: 80px;padding-bottom: 50px;} .section-team .flex>div:nth-of-type(2) {display:none;} .section-team .flex>div {margin-bottom: 25px;} .section-team .team {margin-top: 92px;} .modal.over .modal-content {flex-direction: column;padding:60px 18px 18px 18px;} .modal-content>div:nth-last-of-type(1) {padding:30px 0px 25px 0px;} .modal-content span {margin-top: 15px;} .section-team .team .box {flex: 0 0 200px;} /*.modal-content .button-close {position: absolute;right: 70px;top: 0px;width: calc(100% - 140px);height:50px;} .modal-content .button-close:before {display:none;} .modal-content .button-close:after {width:100%;height: 8px;background: #EAECF3;border-radius: 10px;transform:none;top:22px;} */ .modal-content {border-radius: 38px;} .modal-content .imgHolder {border-radius: 22px;} .modal-content .button-close:before, .modal-content .button-close:after {width:15px;} .modal-content .button-close {top:13px;right:5px;} .modal-content .imgHolder {min-height: calc(100vw - 80px);max-height: none;} .modal-content .button {margin-top: 20px;width: 100%;border-color: var(--midnight-blue);color: var(--midnight-blue);} .modal-content .imgHolder img {bottom: -5px;height: calc(100% + 5px);} } .copy-intro {text-align:center;margin-bottom: 416px;} .copy-intro.solutions {margin-bottom: calc(-150vh + 414px);} .copy-intro .sticky-container {height:150vh;} .copy-intro .sticky {flex-direction:column;height: auto;padding-top: 200px;} .copy-intro * {margin:0px auto;} .copy-intro h1 {max-width:700px} .copy-intro h1 span {color:var(--denim-blue);} .copy-intro p {max-width:480px;margin:10px auto 30px auto;} .copy-intro h3 strong p {margin:0;} @media screen and (max-width:768px){ .copy-intro {text-align: left;margin-bottom:0;/*margin-top:130px;*/} .copy-intro .sticky-container {height:auto;} .copy-intro .sticky {align-items: flex-start;height:auto;} .copy-intro p {margin: 10px 0;} .copy-intro .node {margin: 10px;height:32px;} .copy-intro.solutions {margin-bottom:0px;} .scale {transform: scale(1);} } .node {height:42px;width:1px;background:var(--midnight-blue);position:relative;} .node:after {content:"";border:1px solid var(--midnight-blue);position:absolute;top:100%;left:-3px;width:5px;height:5px;border-radius:100%;} .section-quote {margin-top:80px;} .section-quote .quote-holder {border-radius:40px;background:white;padding:80px 100px;} .section-quote .flex {flex-wrap:wrap;justify-content: space-between;align-items: center;} .section-quote .flex * {flex:inherit;} .section-quote .flex p {flex:0 0 100%;margin-bottom:40px;font-size:23px;line-height:1.5em;} .section-quote author img {width:80px;height:80px;border-radius:100%;overflow:hidden;margin-right:20px;} .section-quote author {align-items: center;} .node-head * {margin:0px auto;text-align:center;} .node-head h2 {max-width:700px;margin-bottom:25px;} .node-head h2 span {color:var(--denim-blue);} .node-head h2 strong {color:var(--denim-blue);} .node-head p {max-width:480px;margin:10px auto 30px auto;} @media screen and (max-width:768px){ .section-quote .quote-holder {padding:48px 24px;} .section-quote .quote-holder p {font-size:15px;} .section-quote .flex {flex-direction: column;align-items: flex-start;} .section-quote author img {width:60px;height:60px;margin-bottom:10px;} .section-quote .quote-holder>div img {max-width:100px;margin-top:20px;} } .section-timeline {} .section-timeline .main-width {background: url(/wp-content/themes/stanchion/images/background-logo-element-2.svg) left 110px no-repeat;background-size:100% calc(100% - 110px);padding-bottom: 100px;} .section-timeline .node-head h2 strong {color:var(--orange-red);} .section-timeline .node {background:var(--orange-red);} .section-timeline .node:after {border-color:var(--orange-red);} .section-timeline .timeline-holder {padding:0px 80px;} .section-timeline ul h3 {color:var(--orange-red);} .section-timeline ul {list-style:none;margin:0px;padding:0px;} .section-timeline ul li {display:flex;flex-wrap:wrap;margin-top:66px;} .section-timeline ul li * {flex:0 0 50%;} .section-timeline ul label {flex:0 0 100%;border-bottom:1px solid var(--denim-blue-20);color: var(--orange-red);font-size:23px;padding-bottom:24px;margin-bottom:24px;} .section-timeline ul p {margin-bottom:20px;} .section-timeline ul p:nth-last-of-type(1) {margin-bottom:0px;} @media screen and (max-width:952px){ .section-timeline .main-width {padding-bottom:0px;} } @media screen and (max-width:768px){ .node-head h2 {max-width: 300px;} .node-head .node {height: 32px;} .section-timeline {background-position: 0px 50px;background-size: 100%;padding-bottom: 0px;} .section-timeline ul li {flex-direction:column;} .section-timeline ul h3 {margin-bottom: 20px;} .section-timeline ul label {font-size: 18px;padding-bottom: 10px;margin-bottom: 15px;} .section-timeline .timeline-holder {padding:0px 0px;} } .section-image img {max-width:100%;height:auto;} .section-image a {position:relative;display: block;} .section-image a:after {content:"";width:135px;height:135px;background:url("./images/play-btn.svg") center center no-repeat;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-size:100%;transition:all .2s linear;} .section-image a:hover:after {width:145px;height:145px;} @media screen and (max-width:768px){ .section-image a:after {width: 7%;} .section-image a:hover:after {width: 10%;} } /* ========= Solutions ============================ */ header.white.whiteback .hamburger div {border-color:var(--midnight-blue);} header.white.whiteback .logo-colour {display:block;} header.white.whiteback .logo-white {display:none;} header.white.whiteback ul.nav>li>a {color:inherit;} .solutions-intro {color: white;} .solutions-overview {color: initial;} .gradient-blue {background:var(--gradient-2);min-height:100vh;padding:0 0 100px 0;} .copy-intro.solutions {color:white;} .copy-intro.solutions p {max-width:700px;} .button-holder {display:flex;} .button-holder .button {margin-right:15px;} .button-holder .button:before {font-family: "stachion-icons";font-style: normal;font-weight: normal;speak: never;font-size: 17px;margin-right: 8px;} .button-holder .button.verto:before {content:"\e809";} .button-holder .button.switchcare:before {content:"\e808";} .button-holder .button.proservices:before {content:"\e807";} .solutions-overview {margin-top:80px;} .solutions-overview .flex {border-radius:40px;background:white;align-items: flex-end;padding:0px 100px;} .solutions-overview .flex>div:nth-of-type(1) {padding-top:80px;padding-bottom:80px;} .solutions-overview .flex>div:nth-of-type(2)>div {display: flex;justify-content: flex-end;} .solutions-overview .flex>div:nth-of-type(2)>div img {display:block;} .solutions-overview h2, .solutions-overview strong {color:var(--denim-blue);} .solutions-overview h2 {font-size:34px;} .solutions-overview strong {font-weight:600;} .solutions-overview h2 strong {font-weight:700;} .solutions-overview p {margin-top:20px;} .solutions-intro>.main-width {margin-top:80px;} .solutions-intro>.main-width h3 {padding-right:130px;font-size:34px;} .section-solution-orange ul {list-style: none;margin:0 0 0 50%;padding:0px;} .section-solution-orange ul p {margin-bottom:20px;} .section-solution-orange ul li {padding-bottom:64px;} .section-solution-orange h3 {color: var(--orange-red);font-size:23px;margin-bottom: 24px;padding-bottom:24px;border-bottom:1px solid var(--orange-red-20);} .section-solution-orange h2 strong {color:var(--orange-red);} .section-solution-orange h2 {padding-right: 20px;} .section-solution-orange {background:url(/wp-content/themes/stanchion/images/background-logo-element-2.svg) calc( (100vw - 1200px)/2 ) 90px no-repeat;padding-bottom: 100px;} .section-solution-orange h3:before {font-family: "stachion-icons";font-style: normal;font-weight: normal;speak: never;font-size: 22px;margin-right: 8px;} .section-solution-orange li:nth-of-type(1) h3:before {content:"\e809";} .section-solution-orange li:nth-of-type(2) h3:before {content:"\e808";} .section-solution-orange li:nth-of-type(3) h3:before {content:"\e807";} .section-contact {padding-top:80px;padding-bottom:80px;margin-bottom:-160px;} .solutions .section-contact {background:white;} .section-contact .flex {align-items: end;} .section-contact h2 {font-weight:700;color:var(--orange-red);} .blue .section-contact h2 {font-weight:700;color:var(--denim-blue);} .blue .section-contact .button.button-orange.inverse { color: white; border-color: var(--denim-blue); background: var(--denim-blue); } .blue .section-contact .button.button-orange.inverse:hover { color: var(--denim-blue); border-color: var(--denim-blue); background: none; } .blue .section-contact .button.button-orange { color: var(--denim-blue); border-color: var(--denim-blue); } .blue .section-contact .button.button-orange:hover { color: white; border-color: var(--denim-blue); background: var(--denim-blue); } .section-contact a:nth-of-type(1) {margin-right:15px;} .section-contact .flex>div:nth-last-of-type(1) {text-align: end;} .solutions footer, .general footer {background:white;} /* Must be adapted to wordpress page name */ .general footer .main-width {margin-top:0px;} /* Must be adapted to wordpress page name */ @media screen and (max-width:992px){ .solutions-overview h2 {max-width:100%;} .solutions-overview .flex {flex-direction: column;} .solutions-overview .flex>div {width:100%;} .solutions-overview .flex>div:nth-of-type(2)>div {justify-content: center;} } @media screen and (max-width:768px){ .copy-intro .sticky {padding-top: 140px;} .copy-intro.solutions {margin-top:0px;} .copy-intro.solutions * {margin-left:0;} .button-holder {width: 100%;flex-direction: column;} .button-holder .button {margin-right:auto;margin-top:15px;padding: 5px 15px 0px 15px;} .solutions-overview .flex {border-radius:38px;padding:0px 20px;} .solutions-overview .flex>div:nth-of-type(1) {padding-top:60px;padding-bottom:60px;} .solutions-overview .flex>div:nth-of-type(2)>div {max-width:80%;} .solutions-overview .flex>div:nth-of-type(2)>div img {max-width:100%;} .solutions-overview h2 {font-size: 26px;} .solutions-intro>div.main-width {margin-top: 60px;padding:0px 40px;} .solutions-intro>div.main-width .flex {flex-direction:column;} .solutions-intro>div.main-width h3 {font-size:26px;margin-bottom:30px;padding:0;} .gradient-blue {padding:0 0 80px 0;} .section-solution-orange ul {margin:80px 0 0 0;} .section-solution-orange h3 {font-size:18px;padding-bottom:16px;margin-bottom:16px;} .section-solution-orange h3:before {font-size:20px;} .section-solution-orange {background-size: 100%;background-position: left 50px;padding-bottom: 10px;} .section-contact {padding-top: 60px;padding-bottom: 100px;} .section-contact .flex {flex-direction: column;} .section-contact .flex>div {width: 100%;} .section-contact .flex>div:nth-last-of-type(1) {margin-top: 30px;text-align: left;} } @media screen and (max-width:576px){ .section-contact a:nth-of-type(1),.section-contact a {width: 100%;margin-bottom: 15px;} } /* Solutions detail ======================= */ .copy-intro.product h3 {font-size:44px;display:flex;color:var(--orange-red);margin-bottom:24px;} .copy-intro.product h3 img {height:30px;margin-right:14px;} .copy-intro.product h1 {font-size:25px;} .copy-intro.product {margin-bottom:0px;} .button.download:before {content:'\e80e';font-size:12px;transform: translateY(-1px);} .button-holder.button {padding-top:3px;} .orange-gradient {background:var(--gradient-1);} .margin-negative.node-long {margin-top:calc(-150vh + 587px);} .margin-negative.node-short {margin-top:calc(-150vh + 517px);} .product-intro .flex {border-radius:40px;padding:80px 100px 0 100px;color:white;position:relative;} .product-intro img {display:block;max-width:100%;height:auto;width:320px;margin:auto;} .product-intro h2 {margin-bottom:30px;} .product-intro h2 strong {color:white;} .node-long .flex:before {content: "";position: absolute;left: 50%;top: -60px;height: 0;background: linear-gradient(0deg, white calc(100% - 60px), var(--orange-red) calc(100% - 60px));width: 1px;transform: translateX(-50%); animation-name:intronodelong;animation-delay:1s;animation-duration:.6s;animation-fill-mode: forwards;} .node-long .flex:after {content:"";position:absolute;width:5px;height:5px;border:1px solid white;left:50%;top:calc(100% - 90px);transform: translateX(-50%);border-radius:100%;opacity:0; animation-name:opacity;animation-delay:1.6s;animation-duration:.6s;animation-fill-mode: forwards; } @keyframes intronodelong { 0% {height:0;} 100% {height:calc(100% - 30px);} } .node-long.invisible .flex:before {top: 0px;height: calc(100% - 80px) !important;background: white;} .node-long.invisible .flex:after {top:calc(100% - 80px);} .product-intro ul {list-style:none;margin:0px;padding:0px;font-size:25px;line-height:1.4em;margin-bottom:80px;} .product-intro ul li {padding-bottom:30px;} .product-intro ul li:nth-last-of-type(1) {padding-bottom:0px;} .product-intro .flex>div:nth-of-type(1) {padding-right:60px;} .product-intro .flex>div:nth-of-type(2) {padding-left:60px;} .product-intro .flex>div:nth-of-type(2) h2 {display:none;} .paragraph-highlight {background:white;padding:100px 0;margin-top:100px;} .paragraph-highlight h2 strong, .paragraph-highlight .flex h3 strong {color:var(--orange-red);} .paragraph-highlight h2 {margin-bottom:30px;} .paragraph-highlight .flex>div:nth-of-type(1) p {margin-bottom:20px;} .paragraph-highlight .flex>div:nth-of-type(1) p:nth-last-of-type(1) {margin-bottom:0px;} .paragraph-highlight .flex>div:nth-of-type(2) h3 {font-size:34px;font-weight:400;} .paragraph-highlight .flex {gap:120px;} .section-product-blue .flex {gap:120px;} .section-product-blue .main-width {padding:0px 100px;} .section-product-blue .flex>div:nth-of-type(1) p {margin-top:30px;} .section-product-blue .flex>div:nth-of-type(2) {padding-top:140px;} .section-product-blue ul {list-style:circle;margin:0 0 60px 0;padding:0 0 0 18px;} .section-product-blue ul p {margin-bottom:20px;} .section-product-blue ul li {padding-bottom:5px;} .section-product-blue h3, .section-product-blue span {color: var(--denim-blue);font-size:23px;font-weight:700;} .section-product-blue h3 {margin-top: 24px;padding-top:24px;border-top:1px solid var(--denim-blue-20);margin-bottom:25px;} .section-product-blue h2 strong {color:var(--denim-blue);} .section-product-blue h2 {padding-right: 20px;} .section-product-blue {background: url(/wp-content/themes/stanchion/images/logo-background-verto.svg) left calc(50vw - 420px) top 215px no-repeat;background-size: 760px 780px;} .colour-box.orange .flex {background:var(--gradient-1);} .colour-box.blue .flex {background:var(--gradient-2);} .colour-box.inverse .flex{flex-direction:row-reverse;} .colour-box .flex {border-radius:40px;margin-top:100px;padding:80px 100px 80px 100px;color:white;position:relative;} .colour-box.image-hug-bottom .flex {padding:0px 100px;overflow:hidden;} .colour-box.image-hug-bottom .flex>div:nth-of-type(2) {padding:100px 0px;} .colour-box.image-hug-left .flex {padding:0px;overflow:hidden;} .colour-box.image-hug-left .flex>div:nth-of-type(2) {padding:100px 100px 100px 0px;} .image-hug-left .lottie-holder > lottie-player {height: 380px !important;} .image-hug-bottom .lottie-holder > lottie-player {height: auto !important;} .colour-box.no-margin .flex {margin-top:0px;} .colour-box img {display:block;max-width:100%;height:auto;width:100%;margin:auto;} .colour-box h2 {margin-bottom:30px;} .colour-box h2 strong {color:white;} .colour-box p {font-size:23px;line-height:1.4em;margin-bottom:24px;} .colour-box p:nth-last-of-type(1) {margin-bottom:0;} .colour-box.colour-box-intro p:nth-of-type(1) {font-size:25px;} .colour-box.colour-box-intro p:nth-of-type(1n+2) {font-size:16px;} .colour-box.colour-box-intro .flex>div:nth-of-type(2) {flex:0 0 55%;} .colour-box.colour-box-intro.inverse .flex>div:nth-of-type(1) {padding-left: 0px;margin-right: -30px;} .colour-box .button {margin-top:32px;} .colour-box .flex>div:nth-of-type(1) {padding-right:100px;align-self: end;} .colour-box.inverse .flex>div:nth-of-type(1) {padding-right:0;padding-left:100px;} .spacer {margin-top:80px;} .node-short .flex:before {content: ""; transition: all .3s linear;position: absolute;left: 50%;top: -60px;height:0px;background: linear-gradient(0deg, white calc(100% - 60px), var(--orange-red) calc(100% - 60px));width: 1px;transform: translateX(-50%); animation-name:intronode;animation-delay:1s;animation-duration:.6s;animation-fill-mode: forwards;} .node-short .flex:after {content:""; transition: all .3s linear;position:absolute;width:5px;height:5px;border:1px solid white;left:50%;top:45px;transform: translateX(-50%);border-radius:100%;opacity:0; animation-name:opacity;animation-delay:1.6s;animation-duration:.3s;animation-fill-mode: forwards; } .node-short.invisible .flex:before, .node-short.invisible .flex:after {opacity:0!important;} @keyframes intronode { 0% {height:0;} 100% {height:105px;} } @media screen and (max-width:980px){ .product-intro ul {font-size: 18px;} .product-intro h2 {font-size:34px;} } @media screen and (max-width:768px){ .copy-intro .button {margin-left:0px;} .copy-intro.product h1 {font-size: 15px;font-weight: 600;font-family: century-gothic, sans-serif;} .copy-intro.product h3 {flex-direction:column;margin-left:0;line-height: 1.1em;margin-bottom: 20px;} .copy-intro.product h3 span {margin-left:0;} .copy-intro.product p {margin: 20px 0;} .copy-intro.product .button {min-width: 174px;padding: 5px 10px 0px 10px;border-radius: 7px;font-size: 12px;} .copy-intro.product .button * {margin:0px;} .margin-negative.node-short, .margin-negative.node-long {margin-top:105px;} .product-intro .flex {flex-direction:column-reverse;padding:60px 20px 0px 20px;} .product-intro .flex>div:nth-of-type(1) h2 {display:none;} .product-intro .flex>div:nth-of-type(2) h2 {display:block;} .product-intro .flex>div:nth-of-type(2) {padding-left: 0px;} .product-intro .flex>div:nth-of-type(1) {padding-right: 0px;} .product-intro h2 strong {display:block;} .product-intro ul {font-size:15px;padding-left:35px;position:relative;} .product-intro ul li {padding-bottom: 23px;} .product-intro ul:before {content: "";position: absolute;left: 2px;top:5px;height: calc(100% - 15px);background: white;width: 1px;transform: translateX(-50%);} .product-intro ul:after {content:"";position:absolute;width:5px;height:5px;border:1px solid white;left:2px;top:calc(100% - 10px);transform: translateX(-50%);border-radius:100%;} .node-long .flex:before, .node-long .flex:after {display:none;} .product-intro .orange-gradient {background: linear-gradient(280deg, #F24405 0%, #FF7949 100%);} .paragraph-highlight {padding: 70px 0px;margin-top: 80px;} .paragraph-highlight .flex {gap: 30px;flex-direction: column;} .paragraph-highlight .flex>div:nth-of-type(2) h3 {font-size:26px;} .paragraph-highlight h2 {margin-bottom: 20px;} .section-product-blue .main-width {padding: 0px 40px;flex-direction: column;} .section-product-blue .flex {gap: 30px;} .section-product-blue .flex>div:nth-of-type(2) {padding-top: 40px;} .section-product-blue h3, .section-product-blue span {font-size:18px;} .section-product-blue {background-size: calc(100% - 50px);background-position: 25px 121px;} .section-product-blue ul li {font-size:16px;padding-bottom: 10px;line-height: 1.5em;} .section-product-blue ul {margin: 0;} .colour-box .flex, .colour-box.inverse .flex {border-radius: 38px;margin-top: 80px;padding: 60px 20px;flex-direction: column-reverse;} .colour-box .flex>div:nth-of-type(1) {margin-top: 0px;margin-bottom: -50px;} .colour-box p {font-size: 15px;} .colour-box .flex>div:nth-of-type(1), .colour-box.inverse .flex>div:nth-of-type(1) {margin-left:auto;margin-right:auto;padding:0;} .colour-box.image-hug-bottom .flex>div:nth-of-type(2) {padding:60px 0px;} .colour-box.image-hug-bottom .flex {padding: 0px 40px;} .colour-box.image-hug-left .flex>div:nth-of-type(2) {padding: 60px 20px;} .colour-box.image-hug-left .flex>div:nth-of-type(1), .colour-box.image-hug-left.inverse .flex>div:nth-of-type(1) {margin-left:0;} .spacer {margin:20px;} } @media screen and (max-width:576px){ .node-short .flex:before, .node-short .flex:after {left:33px;} .node-short .flex:before { top: -75px; height: 80px; background: linear-gradient(0deg, white calc(100% - 75px), var(--orange-red) calc(100% - 75px)); } .node-short .flex:after {top:30px;} } .section-carousel.carousel-solutions h2 strong {color:var(--denim-blue);} .orange .section-carousel.carousel-solutions h2 strong {color:var(--orange-red);} .section-carousel.carousel-solutions .box {background:var(--ghost-white);display:flex;flex-direction: column;justify-content: flex-start;min-height: 450px;} .section-carousel.carousel-solutions h3 {color: var(--denim-blue);min-height: 60px;} .orange .section-carousel.carousel-solutions h3 {color: var(--orange-red);} .section-carousel.carousel-solutions .flex>div:nth-of-type(1) {flex:0 0 380px;} .section-carousel.carousel-solutions .sticky>.flex>div:nth-of-type(1) {display:flex;align-items: center;} .section-carousel.carousel-solutions .carousel {width: calc(100vw);min-height: 450px;} .section-carousel.carousel-solutions .relative {min-height: 450px;} @media screen and (max-width:768px){ .section-carousel.carousel-solutions .flex>div:nth-of-type(1) {flex: 1;height:auto;display: block;} .section-carousel.carousel-solutions .slick-dots li.slick-active button {background: #A6CDFF;} .section-carousel.carousel-solutions .slick-dots li button {border: 1px solid #A6CDFF;} .section-carousel.carousel-solutions .carousel {width: calc(100% + 20px);} .section-carousel.carousel-solutions.no-container .carousel {width: calc(100% + 40px);} .section-carousel.carousel-solutions .sticky-container {padding-bottom:0;} .colour-box.colour-box-intro.inverse .flex>div:nth-of-type(1) {margin-right: 0;} } .solutions-product-detail-title {padding-top:200px;} .solutions-product-detail-title h1 {font-size:44px;display:flex;color:var(--orange-red);margin-bottom:24px;line-height:1em;} .orange .solutions-product-detail-title h1 {color:var(--orange-red);} .blue .solutions-product-detail-title h1 {color:var(--denim-blue);} .solutions-product-detail-title.orange h1 {color:var(--orange-red);} .solutions-product-detail-title h1 img {height:30px;margin-right:14px;} .solutions-product-detail-title p {padding:0 0 5px 50px;margin:0;font-size:25px;line-height:1.4em;max-width:none;} .solutions-product-detail-title p:nth-of-type(2) {font-size:16px;padding:0 0 100px 50px;} .page-sub-nav {border-radius: 54px;background: var(--white, #FFF);box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.10);padding:16px;position:absolute;bottom:-40px;display:inline-flex;} .page-sub-nav a {height:50px;padding:0 20px;display:flex;justify-content: center;align-items: center;flex:1;color:var(--orange-red);text-decoration:none;border-radius:50px;font-size:13.1px;letter-spacing: 0.78px;text-transform: uppercase;line-height:1em;padding-top:3px;font-weight:500;margin-right:10px;transition:background .3s linear;white-space: nowrap;} .page-sub-nav a.over, .page-sub-nav a.over:hover {background:var(--orange-red);color:white;} .page-sub-nav a:hover {background:var(--ghost-white);color:var(--orange-red);} .page-sub-nav a:nth-last-of-type(1) {margin-right:0px;} .blue .page-sub-nav a.over, .blue .page-sub-nav a.over:hover {background:var(--denim-blue);color:white;} .blue .page-sub-nav a {color:var(--denim-blue);} .product-detail-content {background:white;padding-top:134px;} .product-detail-paragraphs h2 {font-size:34px;margin-bottom:30px;max-width:none;} .product-detail-paragraphs h3 {font-size:23px;font-weight:400;margin-bottom:24px;} .product-detail-paragraphs p {max-width:850px;} .product-detail-paragraphs .flex.divider {margin-top:110px;gap:70px;flex-wrap:wrap;} .product-detail-paragraphs .flex.divider>div {flex:0 0 385px;max-width: 100%;} .product-detail-paragraphs .flex.divider>div.highlight {border-radius: 40px;border: 1px solid #DEE1EC;padding:30px;flex:1;max-width:540px;position:relative;} .highlight h3 {display:flex;} .highlight h3:before {content:"\e810";margin-right:10px;transform: translateY(-2px);color:var(--orange-red);font-size: 33px;} .blue .highlight h3:before {color:var(--denim-blue);} .product-detail-paragraphs .flex.divider>div.highlight:before {content:"";position:absolute;right:100%;top:50%;width:32px;background:var(--orange-red);height:1px;transform:translateY(-50%);} .product-detail-paragraphs .flex.divider>div.highlight:after {content:"";position:absolute;left:-38px;top:50%;width:5px;border:1px solid var(--orange-red);height:5px;transform:translateY(-50%);border-radius:100%;} .blue .product-detail-paragraphs .flex.divider>div.highlight:before {background:var(--denim-blue);} .blue .product-detail-paragraphs .flex.divider>div.highlight:after {border:1px solid var(--denim-blue);} .product-detail-content .section-carousel {margin-top:15px;} .product-detail-content .section-carousel .flex {align-items:center;} .pageviews {display:none;} .pageviews.over {display:block;} .orange .section-carousel.carousel-solutions h2 strong, .orange .section-carousel.carousel-solutions h3 {color:var(--orange-red);min-height: 60px;} @media screen and (max-width:768px){ .product-detail-content .section-carousel .flex {align-items:initial;} .product-detail-content .section-carousel {margin-top: 0;} .orange .product-detail-content .section-carousel .slick-dots li.slick-active button {background: #FFDACD;} .orange .product-detail-content .section-carousel .slick-dots li button {border: 1px solid #FFDACD;} .solutions-product-detail-title {padding-top:140px;} .solutions-product-detail-title h1 {font-size:42px;} .solutions-product-detail-title p {font-size:15px;} .page-sub-nav {width: 100%;border-radius: 26px;flex-direction: column;position:relative;bottom:0;} .orange .page-sub-nav {margin-bottom:calc(-1 * var(--subnav-orange));} .blue .page-sub-nav {margin-bottom:calc(-1 * var(--subnav-blue));} .orange .product-detail-content {padding-top:calc(80px + var(--subnav-orange));} .blue .product-detail-content {padding-top:calc(80px + var(--subnav-blue));} .product-detail-paragraphs h2 {font-size:26px;margin-bottom: 15px;} .product-detail-paragraphs .flex.divider {margin-top: 60px;} .product-detail-paragraphs .flex.divider>div.highlight:before {transform: translateX(50%);bottom: 100%;right: 50%;height: 32px;width: 1px;top:-32px;} .product-detail-paragraphs .flex.divider>div.highlight:after {left: auto;top: -38px;transform: translateX(50%);right: 50%;} .product-detail-paragraphs .flex.divider>div.highlight {padding:40px 30px;} .page-sub-nav a {height:40px;margin-right:0;flex: 0 0 40px;margin-bottom:10px;} .page-sub-nav a:nth-last-of-type(1) {margin-bottom:0px;} .solutions-product-detail-title p {padding: 0 0 5px 50px;} .solutions-product-detail-title p:nth-of-type(2) {padding: 0 0 40px 50px;font-size:15px;} } .section-promotion {background:white;padding-top: 120px;padding-bottom: 40px;} .section-promotion .flex {background: var(--ghost-white);border-radius: 40px;padding:80px 100px;justify-content: space-between;} .section-promotion .flex * {flex:initial;} .section-promotion h2 {max-width:none;padding-right:20px;} .blue .section-promotion h2 strong {color:var(--orange-red);} .section-promotion .button {white-space: nowrap;} @media screen and (max-width:980px){ .section-promotion .flex {padding:40px;align-items: center;} .section-promotion h2 {font-size:32px;} } @media screen and (max-width:768px){ .section-promotion {background:white;padding-top: 80px;padding-bottom: 0px;} .section-promotion .flex {padding:30px 20px;flex-direction: column;align-items: flex-start;border-radius:38px;} .section-promotion .button {margin-top:30px;} .section-promotion h2 {font-size:26px;} } @media screen and (max-width:576px){ .section-promotion {text-align:center;} .section-promotion strong {display:block;} .section-promotion .flex>div {width:100%;} .section-promotion .flex a {margin:10px auto;} .product-detail-paragraphs .flex.divider>div.highlight {padding: 40px 20px;margin: 0px -20px;} } /* contact us =================== */ .copy-intro.no-height .sticky-container {height:auto;} .copy-intro.no-height {margin-bottom:0;} .section-form {background:white;margin-top:72px;padding-top:120px;padding-bottom:120px;} .section-form .main-width {padding: 0px 100px;} .section-form .flex {gap:90px;} .section-form h2 {margin-bottom:26px;} .section-form h2 strong, .orange .copy-intro h1 span, .orange .copy-intro h1 strong {color:var(--orange-red);} .section-form.done .contact-form {display:none;} .section-form.done .flex>div:nth-of-type(1) {display:none;} .contact-form label {display:block;font-size:14px;} .contact-form .textbox {-webkit-appearance:none;border-radius: 4px;background: var(--ghost-white);height:45px;display:flex;padding:0px 10px;border:none;outline:none;width:100%;color:var(--midnight-blue);font-size:14px;margin-top:12px;line-height:1.1em;padding-top:3px;align-items: center;position:relative;} .contact-form .textbox::placeholder {color: #A1A4AF;opacity: 1;} .contact-form .textbox::-ms-input-placeholder {color:#A1A4AF;} .contact-form .textbox.success {border:1px solid #27AE60;padding-left:9px;} .contact-form .textbox.success + p.msg {color:#27AE60;} .contact-form .textbox.error {border:1px solid #EB5757;padding-left:9px;} .contact-form .textbox.error + p.msg {color:#EB5757;} .contact-form p.msg {position: absolute;top: 100%;font-size: 12px;} .contact-form textarea.textbox {min-height:100px;padding-top:15px;} .contact-form ul {margin:0px;padding:0;list-style:none;} .contact-form ul li {position:relative;margin-bottom:24px;} .contact-form .input-checkbox {padding-left:35px;} .contact-form .disabled {cursor:pointer;-ms-user-select: none;-webkit-user-select: none;user-select: none;} .contact-form .input-checkbox input {-webkit-appearance:none;width:16px;height:16px;border:1px solid #A1A4AF;position:absolute;left:0px;top:0px;border-radius:16px;} .contact-form .input-checkbox input[type="checkbox"]:checked:before {content:"";width: 10px;height: 10px;background:var(--midnight-blue);position: absolute;top: 2px;left: 2px;border-radius: 12px;} .holder.dropdown:after {content:"\e80b";position:absolute;right:20px;top:46px;font-size:8px;} li.over.holder.dropdown:after {transform:rotate(180deg);} .holder.search:after {content:"\e80a";position:absolute;right:16px;top:47px;font-size:16px;} .contact-message {display:none;} .section-form.done .contact-message {display:block;} .section-form.processing .contact-form button {display:none;} ul.select {margin:0px;padding:5px;background:#EDEFF5;position:absolute;width:100%;z-index:100;font-size:14px;display:none;top:77px;border-radius:0 0 4px 4px;} ul.select li {margin:0px;padding:10px 15px 5px 15px;cursor:pointer;border-radius:4px;} ul.select li:hover {background:white;} li.over ul.select {display:block;} .ui-autocomplete {margin:0px;padding:0px;background:var(--ghost-white);box-shadow:6px 6px 6px 0px rgba(0,0,0,0.1);position:absolute;z-index:100;font-size:14px;z-index: 50;width:auto;max-width:250px;transform: translateY(2px);list-style: none;} .ui-autocomplete li {margin:0px;padding:5px 10px;cursor:pointer;} .ui-autocomplete li:hover {background:white;} @media screen and (max-width:952px){ .section-form .flex {flex-direction:column;} } @media screen and (max-width:768px){ .copy-intro h1 {margin-left:0px;} .section-form {margin-top: 32px;padding-top: 60px;padding-bottom: 60px;} .section-form .flex {gap: 50px;} .section-form .main-width {padding: 0px 40px;} .contact-form textarea.textbox {min-height:200px;} } @media screen and (max-width:576px){ .copy-intro p {max-width:calc(100% - 30px);} .section-form .button {width:100%;} } .section-contact-global {margin-top:160px;color:white;} .section-contact-global .bucket {border-radius: 40px;background: linear-gradient(136deg, #045BCC 1.45%, #000 142.53%);box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.10);min-height:200px;padding:80px 100px;position:relative;overflow: hidden;} .section-contact-global h2 {margin-bottom:20px;} .section-contact-global h2 strong {color:white;} .section-contact-global p {max-width:300px;} .section-contact-global .flex {flex-wrap:wrap;position: relative;z-index: 1;} .section-contact-global .flex>div {flex:0 0 calc((100% - 180px)/3);margin-right:90px;} .section-contact-global .flex>div:nth-of-type(3n+3) {margin-right:0px;} .section-contact-global a {color:white;transition:all .3s linear;text-decoration:none;} .section-contact-global a:hover {color:white;opacity:0.5;} .section-contact-global ul {list-style:none;margin:25px 0 0 0;padding:0px;} .section-contact-global ul li {position:relative;padding-left:30px;padding-bottom:25px;} .section-contact-global ul li:nth-last-of-type(1) {padding-bottom:0px;} .section-contact-global h3 {margin:60px 0px 25px 0px;padding-bottom:25px;border-bottom:1px solid rgba(255,255,255,0.2);} .section-contact-global ul li:before {position:absolute;left:0px;top:0px;} .section-contact-global ul li.icon-address:before {content:"\e80d";font-size:18px;} .section-contact-global ul li.icon-map:before {content:"\e80c";font-size:18px;} .section-contact-global ul li.icon-phone:before {content:"\e805";font-size:18px;} .section-contact-global ul li.icon-mail:before {content:"\e804";font-size:12px;top:2px;} .section-contact-global img {position:absolute;right:60px;bottom:70px;max-width:80%;height:auto;z-index:0;} @media screen and (max-width:1024px){ .section-contact-global .flex>div {flex:0 0 calc((100% - 90px)/2);} .section-contact-global .flex>div:nth-of-type(3n+3) {margin-right:90px;} .section-contact-global .flex>div:nth-of-type(2n+2) {margin-right:0;} } @media screen and (max-width:768px){ .section-contact-global img {bottom:auto;top:50px;right:20px;max-width:calc(100% - 40px);} .section-contact-global .bucket {padding:60px 20px;} .section-contact-global h3 {margin: 40px 0px 25px 0px;padding-bottom: 18px;} .section-contact-global ul li {padding-bottom:20px;} .section-contact-global ul li:nth-last-of-type(1) {padding-bottom:20px;} .section-contact-global {margin-top: 80px;} } @media screen and (max-width:576px){ .section-contact-global .bucket {background:linear-gradient(97deg, #045BCC 1.65%, #000 120.63%);} .section-contact-global .flex>div {flex:0 0 100%;margin-right:0px;} .section-contact-global .flex>div:nth-of-type(3n+3) {margin-right:0px;} } /* General content template */ .copy-intro.general p {margin-top:20px;max-width:570px;margin: 10px auto;} .copy-intro.general p:nth-of-type(1) {font-size:25px;max-width:690px;line-height:1.4em;} .copy-intro.general p:nth-last-of-type(1) {margin-bottom:30px;} .copy-intro.general.no-height {margin-bottom: 0;padding-bottom: 67px;} .section-general-content {background:#fff;padding-top:120px;padding-bottom:120px;} .section-general-content .main-width {max-width:880px;} .section-general-content h1 {font-size:25px;font-weight:600;margin-bottom:24px;} .section-general-content h2 {font-size:23px;font-weight:600;margin-bottom:24px;} .section-general-content h3 {font-size:20px;font-weight:600;margin-bottom:24px;} .section-general-content h4 {font-size:18px;} .section-general-content h5 {font-size:16px;} .section-general-content p {margin-bottom:24px;} .section-general-content ul {padding-left:20px;} .section-general-content ol {padding-left:20px;} .section-general-content ul li, .section-general-content ol li {padding-bottom:10px;} @media screen and (max-width:768px){ .copy-intro.general p {margin-left:0;} .copy-intro.general p:nth-of-type(1) {font-size: 15px;} .copy-intro.general h1 {color:var(--denim-blue);line-height: 1.05em;margin-bottom: 10px;} .copy-intro.general p:nth-last-of-type(1) {margin-bottom:15px;} .section-general-content {background:#fff;padding-top:60px;} .section-general-content h1 {font-size:23px;margin-bottom:24px;font-family:revert;} .section-general-content h2 {font-size:20px;margin-bottom:24px;font-family:revert;} .section-general-content h3 {font-size:18px;margin-bottom:24px;font-family:revert;} .section-general-content h4 {font-size:16px;font-family:revert;} .section-general-content h5 {font-size:15px;font-family:revert;} .section-general-content p {margin-bottom:24px;font-family:revert;} } /* Careers =========================== */ .search-dropdown ul li :last-child{padding-bottom:0px !important;margin-bottom:0px !important;} .careers-vacancies .main-width { padding: 0px 100px; } @media screen and (max-width:1000px){ .careers-vacancies .main-width { padding: 0px 20px; } } .careers-vacancies {margin-top:100px;} .careers-vacancies h2 {max-width:none;} .careers-vacancies #job-list {padding:60px;background:white;border-radius:40px;list-style:none;max-width:700px;} .careers-vacancies #job-list li {border-bottom:1px solid rgba(1, 28, 64, 0.1);padding-bottom:30px;margin-bottom:30px;} .careers-vacancies #job-list li:nth-last-child(1) {border-bottom:none;padding-bottom:2px;margin-bottom:2px;} .careers-vacancies #job-list li a {display:block;text-decoration:none;} .careers-vacancies #job-list li a span {font-size:25px;font-weight:600;transition:all .3s linear;position:relative;line-height:1em; display: block; max-width: 380px;} .careers-vacancies #job-list li a:hover span {color: var(--denim-blue);} .careers-vacancies #job-list li a p {margin:8px 0px 24px 0px;} .no-careers-vacancies ul li a p {margin:1px 0px 0px 0px;} .careers-vacancies #job-list li a label {display:inline-flex;background:var(--ghost-white);border-radius:6px;height:30px;padding:3px 15px 0px 15px;font-size: 14px;margin-right: 5px;margin-bottom: 5px;} @media screen and (max-width:1000px){ .careers-vacancies #job-list li a label{ font-size: 13px; } } .careers-vacancies #job-list li a span:before { content: ""; opacity: 0; display: block; position: absolute; width: 4px; height: 4px; border-radius: 100%; border: 1px solid var(--denim-blue); top: 9.5px; right: calc(100% - 429px); transform: translateX(-5px); transition: all .2s linear; } .careers-vacancies #job-list li a span:after { content: ""; opacity: 0; display: block; position: absolute; width: 32px; height: 1px; background: var(--denim-blue); top: 12px; right: calc(100% - 423px); transform: translateX(-5px) translateY(0.5px); transition: all .2s linear; } @media screen and (max-width:1168px){ .careers-vacancies #job-list li a span:before {right: 0px;} .careers-vacancies #job-list li a span:after {right: 6px;} } .careers-vacancies #job-list li a:hover span:before {opacity:1;transform: translateX(0);} .careers-vacancies #job-list li a:hover span:after {opacity:1;transform: translateX(0) translateY(0.5px);} .careers-vacancies > .main-width > h2:first-child { display: block; } .careers-vacancies > .main-width > h2:nth-child(2) { display: none; } .modal-careers h2 {margin-bottom:20px;max-width:none;} .section-careers-carousel .column-1 {padding-right:60px;max-width: 560px;} .section-careers-carousel h2 {margin-bottom:20px;font-weight:400;} .section-careers-carousel h2 strong {font-weight:700;} .section-careers-carousel .sticky>div.flex {align-items: center;} .section-careers-carousel .carousel {width: calc(50vw + 40px);} .copy-intro.careers p:nth-of-type(1) {font-size: 25px;max-width: 840px;line-height: 1.4em;} .copy-intro.careers p {margin-top:20px;max-width:760px;margin: 10px auto;} .copy-intro.careers p:nth-last-of-type(1) {margin-bottom:30px;} .copy-intro.careers a.button {margin-bottom:30px;} .section-carousel.section-careers-carousel .box {background: var(--ghost-white);display: flex;flex-direction: column;justify-content: flex-start;} .section-carousel.section-careers-carousel .relative,.section-careers-carousel .carousel, .section-carousel.section-careers-carousel .box {min-height:400px;} .copy-intro {transition:opacity .3s linear;} .copy-intro.fade {opacity:0;} @media screen and (max-width:768px){ .careers-vacancies { margin-top: 88px; } .careers-vacancies .main-width { padding: 20px; } .careers-vacancies > .main-width > p { display: none; } .careers-vacancies #job-list {padding: 0;background: none;margin-top:64px} .careers-vacancies #job-list li a label {background:#E8EAF3;} .careers-vacancies #job-list li {border-width:2px;} .careers-vacancies #job-list li a span {font-size:25px;} .blue-large{font-size:25px !important;} .careers-vacancies > .main-width > h2:first-child {display:none;} .careers-vacancies > .main-width > h2:nth-child(2) {display:block;margin-bottom:48px;} .section-careers-carousel .carousel {width: calc(100% + 20px);} .section-careers-carousel .sticky>div.flex {align-items: unset;} .section-carousel.section-careers-carousel .slick-dots li.slick-active button {background: #D4D6E1;} .section-carousel.section-careers-carousel .slick-dots li button {border: 1px solid #D4D6E1;} .section-carousel.section-careers-carousel .sticky-container {padding-bottom:0px;} .copy-intro.careers p {margin-left:0;} .copy-intro.careers p:nth-of-type(1) {font-size: 15px;} .copy-intro.general h1 {line-height: 1.05em;margin-bottom: 10px;} .copy-intro.general p:nth-last-of-type(1) {margin-bottom:15px;} } .careers-life .careers-life-holder {border-radius: 40px;background: var(--gradient-2);min-height:100px;margin-top:60px;padding:100px;flex-wrap:wrap;color:white;} .careers-life .careers-life-holder>div {flex:0 0 50%;} .careers-life .careers-life-holder h2 strong {color:white;} .careers-life img {max-width:100%;height:auto;} .careers-life .careers-life-holder>div:nth-of-type(2) {padding:40px 0 0 80px;} .careers-life .careers-life-holder>div:nth-of-type(3) {padding:70px 0px 0 30px;} .careers-life .careers-life-holder>div:nth-of-type(4) {padding:110px 0px 0 80px;} .careers-life .careers-life-holder p {margin-top:30px;} .careers-life .careers-life-holder p:nth-of-type(1) {font-size:25px;line-height:1.5em;} @media screen and (max-width:1024px){ .careers-life .careers-life-holder>div {flex:0 0 100%;} .careers-life .careers-life-holder>div:nth-of-type(2) {padding:50px 0 0 30px;} .careers-life .careers-life-holder>div:nth-of-type(3) {padding:50px 0 0 30px;order:4;} .careers-life .careers-life-holder>div:nth-of-type(4) {padding:50px 0 0 0px;order:3;} } @media screen and (max-width:768px){ .careers-life .careers-life-holder {padding:60px 20px;border-radius:38px;margin-top:50px;} .careers-life .careers-life-holder p:nth-of-type(1) {font-size:15px;} .careers-life .careers-life-holder p {margin-top: 20px;} .careers-life .careers-life-holder>div:nth-of-type(2) {padding:30px 0 0 10px;} .careers-life .careers-life-holder>div:nth-of-type(3) {padding:30px 10px 0 0px;} .careers-life .careers-life-holder>div:nth-of-type(4) {padding:30px 0 0 0px;} } .careers-purpose .main-width {padding:0px 100px;} .careers-purpose ul {list-style: none;margin:0px 0px 0px 80px;padding:0px;} .careers-purpose ul p {margin-bottom:0px;} .careers-purpose ul li {padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid rgba(242, 68, 5, 0.2);} .careers-purpose ul li:nth-last-of-type(1) {padding-bottom:0px;margin-bottom:0px;border-bottom:none;} .careers-purpose strong {color:var(--orange-red);} .careers-purpose h2 {padding-right: 20px;max-width: 450px;} .careers-purpose {background: url(./images/background-logo-element.svg) left calc(50% - 40px) top 80px no-repeat;padding-bottom: 100px;margin-bottom: -100px;background-size: 540px;} @media screen and (max-width:768px){ .careers-purpose .flex {flex-direction:column;} .careers-purpose ul {margin: 0;} .careers-purpose ul li {padding-bottom: 20px;margin-bottom: 20px;} .careers-purpose h2 {margin-bottom:40px;} .careers-purpose {background-size:100%;background-position:left 60px;} .careers-purpose {background-size: 350px;} .careers-purpose .main-width {padding: 0px 40px;} } @media screen and (max-width:576px){ .careers-purpose {background-size: 100%;} .careers-purpose h2 {margin-bottom:40px;max-width: 280px;} } .department-names p span{ opacity: 0; float:right; } .department-names p.active span{ opacity:1; } .department-names p strong{ color:var(--midnight-blue); font-weight:400; } #selected-category{ color: var(--denim-blue); } /* Careers landing ========================== */ .careers-vacancies .insight-filters{ margin: 64px 0 80px 0; } .hidden { display: none; } .w-50 { width:50% } .search-input::placeholder { color: #A1A4AF; font-size: 14px; } .dropdown { width: 100%; position: relative; display: inline-block; } .search{width: 100%;} .filter-container { display: flex; align-items: stretch; width: 95%; margin: 64px 0 80px 0;gap:10px } .filter-container .search-input, .filter-container .select { flex: 1; } .filter-container .search-input { width:100% ;height:100%;font-family: poppins;font-weight: 400; padding: 14px 18px 13px 12px; border: none; border-radius: 4px; font-size: 14px; background: white url('./images/careers/search.svg') no-repeat right 16px center / 16px; cursor: pointer; } .filter-container .select { position: relative; margin-left: 10px; } .filter-container .search-container { flex: 1; } .filter-container .select { flex: 1; } .filter-container .selectBtn { background: white; padding: 14px 18px 13px 12px; border-radius: 4px; cursor: pointer; position: relative; user-select: none; color: #A1A4AF; font-size: 14px;font-family: poppins;font-weight: 400; } .filter-container .selectBtn:after { content: ""; position: absolute; top: 50%; right: 20px; width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg); border-right: 1px solid var(--midnight-blue); border-bottom: 1px solid var(--midnight-blue); transition: 0.2s ease; } .filter-container .selectBtn.active:after { transform: translateY(-50%) rotate(225deg); } .filter-container .selectDropdown { position: absolute; width: 100%; border-top: none; border-radius: 0 0 4px 4px; overflow: hidden; background: #EDEFF5; z-index: 1; visibility: hidden; transition: 0.2s ease; padding: 10px; } .filter-container .selectDropdown .option { padding: 8px 16px;cursor: pointer;font-family: poppins;font-size: 14px;font-weight: 400;border-radius: 4px; } .filter-container .selectDropdown .option:hover { background: white; } .filter-container .selectDropdown.toggle { visibility: visible; } .filter-container .selectBtn.active {border-radius: 4px 4px 0 0;} .filter-container .mobile-text {color: #011C40;} .department-names { flex: 1; display: flex; flex-direction: column;width:50% } .department-names p { font-size: 16px; line-height: 23px; padding: 10px 0; margin-bottom: 8px; cursor: pointer; border-bottom: 1px solid #dde0e8; } .department-names p:last-child { border-bottom: none; } .department-names p.active {color:var(--denim-blue);font-weight:bold; } .department-names p.active strong {color:var(--denim-blue);font-weight:bold; } #job-list { flex: 1; } .no-jobs p { font-size: 25px; line-height: 35px; font-weight: 600; } .no-jobs > a > p:nth-child(2) { font-size: 16px; font-weight: 400; } .no-jobs span { color:var(--denim-blue); } .no-jobs #selected-category { display: inline; } .no-jobs p:last-child {line-height: 23px;} .no-jobs ul li a span { display: flex; } .no-jobs { border-bottom: none !important; padding-bottom: 0px !important; margin-bottom: 0px !important; } .sidebar-container .sidebar-container { display: flex; } .department-names { flex: 1; max-width: 45%; padding-right: 60px; } .content-container { flex: 2; max-width: 100%; } .search-container { position: relative; } .search-dropdown { position: absolute; width: 100%; z-index: 1000; } .search-dropdown-content { display: none; position: absolute; width: 100%; max-height: 200px; overflow-y: auto; list-style: none; padding: 0; margin: 0; border: none; padding: 10px !important; background: #EDEFF5 !important; border-radius: 0 0 4px 4px !important; list-style: none; max-width: 700px; } .search-dropdown ul li { border-bottom: none !important; padding-bottom: 10px !important; margin-bottom: 10px !important; } .search-dropdown-content li { padding: 8px 12px; cursor: pointer; } .search-dropdown-content li:hover { background-color: #fff; } #articleDepartmentMob{ display: none; } .careers-vacancies .holder{ width:100%; } .careers-vacancies .insight-filters .flex>div { flex: 0 0 calc((100% - 40px) / 2); margin-right: 20px; } .myselect p.active{ color: #A1A4AF; } @media only screen and (min-width: 768px) { .department-names { display: flex; flex-direction: column; align-items: flex-start; } .department-names p { margin: 5px 0; cursor: pointer; color: black; } .department-names p.active {color: var(--denim-blue);font-weight: bold;} .department-names p.active strong{color: var(--denim-blue);font-weight: bold;} .mobile-dropdown { display: none; } .desktop-sidebar { display: block; } } @media only screen and (max-width: 768px) { .search-dropdown-content {margin-top: 0 !important;} .mobile-dropdown { display: block; } .desktop-sidebar { display: none; } .dropbtn { background-color: white; color: #A1A4AF; padding: 14px; font-size: 14px; text-align: left; border: none; width: 100%; cursor: pointer; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content p { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content p:hover { background-color: #f1f1f1; } .department-names .dropdown:hover .dropdown-content { display: block; } .no-jobs p {max-width:500px;} } @media only screen and (max-width: 768px) { .careers-vacancies .insight-filters{ margin:0; } .careers-vacancies .insight-filters .filter-form{ padding:0px; } .careers-vacancies .insight-filters .flex>div{ margin-right: 0; } .careers-vacancies .insight-filters .flex>div:nth-of-type(1){ margin-bottom: 10px; } .careers-vacancies .holder{ margin-bottom: 10px; } #articleDepartmentMob{ display: block; } .filter-container { margin: 10px auto;gap:0px;width:100%; } .filter-container, .mobile-dropdown { flex-direction: column; align-items: stretch; } .filter-container .select, .mobile-dropdown { margin-top: 10px; } .filter-container .select { margin-left: 0; } } /* Careers detail ========================== */ .careers-detail-paragraphs-columns { display: flex; gap: 142px; } .careers-detail-paragraphs { flex: 1; } .careers-detail-title { padding-top: 100px; } .careers-detail-title h1 { font-size: 44px; display: flex; color:var(--denim-blue);font-family:poppins;font-weight:700;line-height:52px;margin-bottom:24px; } .careers-detail-title p { font-size: 25px; font-weight: 600; display: flex; color: #011c40; line-height: 23px; margin-bottom: 8px; } .column p:nth-of-type(2) { font-size: 15px; font-weight: normal;max-width: 503px; } .careers-detail-content { background: white; padding-top: 80px; } .careers-detail-paragraphs h2 { font-size: 34px; margin-bottom: 30px; max-width: none; } .careers-detail-paragraphs h3 { font-size: 23px; font-weight: 700; margin: 30px 0 30px 0;font-family: century-gothic, sans-serif; } .careers-detail-paragraphs h3:nth-of-type(2), .careers-detail-paragraphs h3:nth-of-type(3) { margin: 64px 0 31px 0; } .careers-detail-paragraphs p {margin-bottom: 20px;} .careers-detail-paragraphs h3:nth-of-type(4) {margin: 65px 0 31px 0;} .careers-detail-paragraphs h4:nth-of-type(2) {margin:31px 0 23px 0;} .careers-detail-paragraphs h3::before { content: url(./images/careers/stanchion-logo-small.svg); margin-right: 5px; max-width: 100px; height: auto; display: inline-flex; vertical-align: middle;} .careers-detail-paragraphs h3:first-of-type { margin: 0 0 31px 0; } .careers-detail-paragraphs h4 { margin-bottom: 23px;font-size: 16px;font-weight: 600;font-family: century-gothic, sans-serif; } .careers-detail-paragraphs p { max-width: 850px; } .careers-detail-paragraphs ul { list-style-type: circle; padding: 0; margin-left:15px;line-height: 30px; } .careers-detail-paragraphs .flex.divider { margin-top: 110px; gap: 70px; flex-wrap: wrap; } .careers-detail-paragraphs .flex.divider>div { flex: 0 0 385px; max-width: 100%; } .careers-detail-title .main-width .container .column:first-child {margin-top:130px} .container { display: flex; gap:66px; } .column { flex: 1; } .column img { vertical-align: baseline; } .space-between { justify-content: space-between; } .right-column { position: relative; z-index: 1; } .section-interested { position: sticky; top: calc(20px + 100px); z-index: 1000; } .section-interested-blue-block{font-family: century-gothic, sans-serif; color: #fff; border-radius: 40px; background: var(--gradient-2); padding: 40px;width:350px;} .section-interested-blue-block h1 { font-size: 34px; font-weight: 700; margin-bottom: 24px; } .section-interested-blue-block p { font-size: 16px; font-weight: 400; margin-bottom: 24px; } .section-interested-blue-block p a { text-decoration: underline; color: #fff; } .section-interested-blue-block p:nth-of-type(2) { margin-bottom: 0px; } .section-interested-blue-block p:first-of-type {max-width: 211px;margin-bottom:16px;} .section-interested-blue-block p:nth-of-type(3) {display: none;} .section-interested-blue-block p:last-of-type {padding-top: 30px; font-size: 13px; font-style: italic; font-weight: 400; line-height: 19px; } .section-interested-blue-block p:last-of-type strong {padding-top: 30px; margin-left: 10px;font-style: normal; } .section-interested-note{font-size: 13px; font-style: italic; font-weight: 400; line-height: 19px; text-align: center;max-width: 310px; margin: 0 auto;margin-top: 24px;} .careers-detail-paragraphs .left-column { flex: 4; } .careers-detail-paragraphs .right-column { flex: 1; } .all-departments { display: flex; justify-content: space-between; } .department-count { margin-left: auto; } .no-search .column p span:first-child { color: var(--denim-blue); } .no-search { display: flex; justify-content: space-between; align-items: center; margin-top: 40px;gap: 113px; } .no-search ul { padding: 0px; background: transparent; border-radius: 0px; padding-left:15px;margin: 0px; list-style: circle; max-width: 700px; } .no-search ul li {border-bottom: none; margin-bottom: 2px;padding-bottom: 2px; } .column { flex: 1; } .no-search p { font-family: century-gothic, sans-serif; font-weight: 600; font-size: 25px; margin-bottom: 20px; line-height: 35px; } .no-search p span { color: #045BCC; } .no-search > .column > p:nth-child(2) { font-weight: 400; font-size: 16px; margin-bottom: 30px; } .careers-detail-paragraphs .right-column > p:last-child { font-family: century-gothic, sans-serif; margin-top: 20px; font-size: 13px; font-weight: 400; line-height: 19px; } .careers-detail-paragraphs .right-column > p:last-child strong { padding-left: 10px; } @media (max-width: 768px) { .no-search{gap:0px;margin-top:0px;} .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .column { flex-basis: 48%; } .careers-detail-paragraphs-columns { flex-direction: column; gap: 0; } .careers-detail-paragraphs .right-column { position: static; z-index: auto; } .section-interested { position: static; top: auto; margin-top:80px; } .careers-detail-title {padding-top: 40px;} .careers-detail-title h1 {font-size: 42px;} .careers-detail-title .main-width .container .column h1 {max-width:none; font-family: Poppins; font-weight: 700; margin-bottom: 32px; font-size: 42px; line-height: 45px ; } .careers-detail-title .main-width .container .column p:first-of-type{max-width:204px; margin-bottom:16px; font-size: 15px; font-weight: 600; line-height: 21px; } .careers-detail-title .main-width .container .column p:last-of-type{max-width:244px; font-size: 15px; font-weight: 400; line-height: 21px;} .container{gap:30px;margin-bottom:40px;} .careers-detail-paragraphs .right-column > p:last-child { display: none; } .section-interested-blue-block{width:auto; padding:48px 24px 48px 24px;} .section-interested-blue-block p {margin-bottom: 16px;font-size: 15px;} .section-interested-blue-block p:first-of-type {max-width: 211px;} .section-interested-blue-block p:last-of-type {display: block;padding-top:0} .section-interested-blue-block p:last-of-type strong {margin-left: 0px; } .section-interested-blue-block p:nth-of-type(2){max-width: 256px;margin-bottom:24px} .section-interested p:last-of-type {display: none;} .section-interested .section-interested-blue-block p:last-of-type {display: block;max-width: 282px;margin-bottom:0} .careers-detail-paragraphs h3 { font-size: 18px; font-weight: 600; line-height: 24px; display: inline-flex; } .careers-detail-paragraphs h3:nth-of-type(2) { max-width:301px; } .careers-detail-paragraphs h3:last-of-type { max-width:234px; } .careers-detail-paragraphs ul li{line-height: 21px;} .careers-detail-paragraphs ul li{line-height: 21px;} .section-interested-blue-block h1 { font-size: 26px;margin-bottom: 32px; } .section-interested-note{display:none;} } @media screen and (max-width: 768px) { .no-search { flex-direction: column-reverse; align-items: center; } .no-search .column { width: 100%; margin-bottom: 20px; } .no-search .column img { display: none; } .no-search .column:first-child { background-image: url('./images/careers/search-large.svg'); background-repeat: no-repeat; background-position: center; } } /* 404 page =================== */ .holder-404 svg {max-width:100%;height:auto;} .holder-404 svg path {opacity:0.1;transition:all .3s linear;} .holder-404 svg path.theoutline {opacity:0.3;} .holder-404 {background:var(--gradient-1);min-height:100vh;display: flex;flex-direction: column;justify-content: center;text-align: center;color: white; padding-top: 120px;padding-bottom: 120px;position:relative;} .holder-404>div {position:relative;z-index:1;} .holder-404:before {content:"";position:absolute;z-index:0;left:0px;top:0px;width:100%;height:100%;background:var(--gradient-2);transition:opacity .7s linear;opacity:0;} .holder-404.endback:before {opacity:1;} .holder-404 footer {display:none;} .holder-404 .main-width {display: flex;flex-direction: column-reverse;} .holder-404 .button-holder { justify-content: center;} .holder-404 h1 {font-size:25px;} .holder-404 p {margin:8px auto 30px auto;} .holder-404 a.button {margin: 0px 8px;} .holder-404 .button-whiteblue.inverse {color:var(--orange-red);} .holder-404 .button-whiteblue.inverse:hover {color:white;} .holder-404 a.button-whiteblue:hover {color:var(--orange-red);} .holder-404.endback .button-whiteblue.inverse {color:var(--denim-blue);} .holder-404.endback .button-whiteblue.inverse:hover {color:white;} .holder-404.endback a.button-whiteblue:hover {color:var(--denim-blue);} .holder-404 .button-whiteblue.inverse:before {content:"\e801";font-family: "stachion-icons";font-style: normal;font-weight: normal;speak: never;margin-right: 10px;transform: rotate(-90deg);font-size: 13px;margin-top: -3px;} .holder-404 .anim-holder{margin-bottom:80px;position:relative;} .holder-404 .section-404 {margin:auto;} .holder-404 .anim-holder .anim-end {position: absolute;top: 0;left: 50%;transform: translateX(-50%);font-size: 390px;font-weight: 700;line-height: 1em;opacity:0;transition:opacity 1.5s linear;pointer-events: none;} .holder-404 .anim-holder .anim-start {opacity:1;transition:opacity 1s linear;} .holder-404.end .anim-holder .anim-end {opacity:1;} .holder-404.end .anim-holder .anim-start {opacity:0;} @media screen and (max-width:768px){ .holder-404 {justify-content: flex-start;} .holder-404 .anim-holder .anim-end {font-size:47vw;} .holder-404 .button-holder {flex-direction: row;} .holder-404 .button-holder a.button {margin: 0px 8px;} } /* Animations ========================== */ .lottie-holder > lottie-player {height:320px !important;} .solutions-overview .lottie-holder > lottie-player {height:420px !important;} .solutions-overview .lottie-holder img {max-width:100%;max-height:100%;width:auto;height:auto;} @media screen and (max-width:576px){ .solutions-overview .lottie-holder > lottie-player {height:320px !important;} } /* Video Modal ========================== */ .modal-video {display:none;position:fixed;left:0;top:0;width:100%;height:100vh;background:rgba(0,0,0,0.9);padding:50px 10px;justify-content: center;align-items: center;} .modal-video.over {display:flex;} .modal-video .modal-content-2 {max-width:1200px;max-height:calc(100vh - 300px);width:100%;} .modal-video .button-close {position:absolute;right:30px;top:30px;width:40px;height:40px;cursor: pointer;} .modal-video .button-close:before, .modal-video .button-close:after {content:"";width:20px;height:1px;background:white;position:absolute;top:20px;left:10px;transform: rotate(45deg);} .modal-video .button-close:after {transform: rotate(-45deg);} .video-container {position: relative;padding-bottom: 56.25%;max-width: 1190px;margin: 0px auto;} .video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} /* Carousel height override ========================== */ .section-carousel.carousel-solutions .box {min-height:auto;} .section-carousel .box {min-height:auto;} .section-carousel.carousel-solutions .carousel {min-height:auto;} .carousel {min-height:auto;} .section-carousel.carousel-solutions .relative {min-height:auto;} .section-carousel .relative {min-height:auto;padding-bottom:0;} .carousel, .carousel .flex {position:relative;} .product-detail-content .section-carousel .flex {align-items:stretch;} @media screen and (max-width:768px){ .slick-track{display: flex !important;} .slick-slide{ height: inherit !important;} } /* Article detail ========================== */ .solutions.article footer { background: none; } .article-detail-paragraphs-columns { display: flex; gap: 0px; } .article-detail-paragraphs { flex: 1; } .article-detail-title { padding-top: 80px; } .article-detail-title .column.image { text-align: -webkit-right; padding: 0px; } .article-detail-title h1 { color: var(--midnight-blue); font-family: Poppins; font-size: 44px; font-style: normal; font-weight: 700; line-height: 52px; min-width: 670px; margin-bottom: 16px; } .article-detail-title p { color: var(--midnight-blue); font-size: 16px; font-style: normal; font-weight: 400; line-height: 23px; } .article-detail-title .container { align-items: flex-end; } .article-detail-paragraphs img { max-width: 100%;height:auto;margin-bottom:30px; } .article-detail-paragraphs .wp-block-image { margin-bottom: 32px; } .article-detail-title .column:nth-child(1) { padding-bottom: 80px; } .column p:nth-of-type(2) { font-size: 16px; font-weight: normal; } .article-detail-content { background: linear-gradient(180deg, #FFF 48.13%, #F5F6FA 76.74%); padding-top: 134px; } .article-detail-paragraphs { background-repeat: no-repeat; background-size: contain; background-position: center center; } .article-detail-paragraphs h2 { color: var(--midnight-blue, #011C40); font-family: Poppins; font-size: 23px; font-style: normal; font-weight: 700; line-height: 23px; margin-bottom: 32px; } .quote-card, .wp-block-quote { color: #fff; border-radius: 40px; background: var(--gradient-2); padding: 48px 64px; margin: 48px 0px; position: relative; } .quote-card p, .wp-block-quote p { color: var(--white, #FFF); font-size: 23px; font-style: normal; font-weight: 400; line-height: 35px; } .quote-card .author, .wp-block-quote cite { color: white; font-size: 16px; font-style: normal; font-weight: 400; line-height: 23px; margin-top: 24px; } .quote-card span, .wp-block-quote cite strong { font-weight: 600; } .article-detail-paragraphs h3 { font-size: 23px; font-weight: 700; margin: 24px 0 24px 0; } .article-detail-paragraphs h3::before { content: url(/wp-content/themes/stanchion/images/images/article/stanchion-logo-small.svg); margin-right: 5px; max-width: 100px; height: auto; } .insights-hightlight a:first-of-type h3 { margin: 0 0 24px 0; } .article-detail-paragraphs h4 { margin: 24px 0 24px 0; } .article-detail-paragraphs p { max-width: 850px; margin-bottom: 32px; } .article-detail-paragraphs ul { list-style-type: circle; padding: 0 0 0 19px; margin: 0 0 30px 0; } .article-detail-paragraphs ol { padding: 0 0 0 19px; margin: 0 0 30px 0; } .article-detail-paragraphs p + ul, .article-detail-paragraphs p + ol {margin-top:-20px;} .article-detail-paragraphs ul ul {margin-top:15px;} .article-detail-paragraphs li { margin-bottom: 15px; } .article-detail-paragraphs .flex.divider { margin-top: 110px; gap: 70px; flex-wrap: wrap; } .article-detail-paragraphs .flex.divider > div { flex: 0 0 385px; max-width: 100%; } .container { display: flex; flex-wrap: wrap; } .column { flex: 1; padding: 20px; } .column img { max-width: 100%; height: auto; display: block; text-align: left; } .space-between { justify-content: space-between; } .right-column { position: relative; z-index: 1; } .section-share { position: sticky; top: calc(20px + 100px); z-index: 1000; font-family: century-gothic, sans-serif; color: #fff; border-radius: 13px; background: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); padding: 24px; margin-top: 0px; } .section-share h1 { font-size: 34px; font-weight: 700; margin-bottom: 20px; } .section-share p { font-size: 16px; font-weight: 400; margin-bottom: 20px; } .section-share p:last-child { margin-bottom: 0px; } .section-share p a { text-decoration: underline; color: #fff; } .article-detail-paragraphs .left-column { flex: 4; max-width: 713px; background-image: url('/wp-content/themes/stanchion/images/article/background-logo-element.svg'); } .article-detail-paragraphs .right-column { flex: 1; display: flex; justify-content: flex-end; align-items: flex-start; } .column { flex: 1; } .column img { display: block; } /* Share */ .section-share { display: flex; flex-wrap: wrap; min-width: 312px; padding-bottom: 0px; max-width: 336px; ; } .section-share .share.title { color: var(--denim-blue); font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 600; line-height: 12px; background: none; } .section-share .share { color: var(--denim-blue); text-decoration: none; text-transform: uppercase; font-family: "stachion-icons"; font-style: normal; font-weight: normal; font-size: 15.5px; background: #F5F6FA; border-radius: 10px; width: 40px; height: 40px; margin-right: 8px; margin-bottom: 14px; text-align: center; vertical-align: middle; display: flex; align-items: center; justify-content: center; transition: all 0.5s; } .section-share .share:hover { background: #045BCC; color: #FFF; } .section-share .share:nth-child(1):hover { background: none; color: var(--denim-blue, #045BCC); } .section-share .share:nth-child(1) { margin-right: 16px; } .section-share .share:last-child { margin-right: 0px; } .section-share .copy:after { content: "\e81f"; } .section-share .facebook:after { content: "\e81d"; } .section-share .reddit:after { content: "\e815"; } .section-share .whatsapp:after { content: "\e820"; font-size: 17px; } .section-share .tumblr:after { content: "\e814"; } .section-share .pinterest:after { content: "\e80f"; } .section-share .mail:after { content: "\e821"; font-size: 9.5px; } .section-share .linkedin:after { content: "\e802"; font-size: 13px; } .section-share .x:after { content: "\e803"; font-size: 13px; } .quote-card:after, .wp-block-quote:after { content: ""; background: url('/wp-content/themes/stanchion/images/article/quote-marks.svg'); display: block; width: 45.413px; height: 55px; position: absolute; right: 48px; bottom: 48px; } @media (max-width: 1140px) { .article-detail-paragraphs .left-column { max-width: calc(100vw - 430px); } } @media (max-width: 968px) { .article-detail-title { padding-top: 140px; } .article-detail-content { padding-top: 64px; } .article-detail-title h1 { min-width: 100%; font-size: 26px; font-style: normal; font-weight: 700; line-height: 31px; } .quote-card, .wp-block-quote { padding: 48px 24px; } .quote-card p, .wp-block-quote p { font-size: 18px; } .article-detail-paragraphs .quote-card:after, .wp-block-quote:after { right: 30px; bottom: 30px; } .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .column { flex-basis: 48%; } } @media screen and (max-width: 768px) { .article-detail-paragraphs .left-column { max-width: 100%; } .section-share { position: absolute; bottom: 32px; top: auto; margin-top: 0; max-width: none; left: -20px; width: fit-content; right: -20px; } .article-detail-paragraphs-columns { flex-direction: column-reverse; gap: 0; } .article-detail-content { padding-top: 68px; } .quote-card, .wp-block-quote { width: calc(100% + 48px); margin-left: -24px; } .quote-card:after, .wp-block-quote:after { bottom: 31px; right: 31px; } .article-detail-title .container { flex-direction: column; align-items: flex-start; } .article-detail-title .column { padding: 0px; } .article-detail-title .column.image { width: calc(100% + 80px); margin-left: -40px; overflow: hidden; } .article-detail-title .column.image img { width: 100%; } .article-detail-paragraphs img { width: calc(100% + 80px); max-width: calc(100% + 80px); margin-left: -40px; } .wp-block-image img { max-width: calc(100% + 80px); } } @media screen and (max-width:576px){ .section-share {padding:14px 16px;} .section-share .share {margin-bottom:0px;} } @media screen and (max-width:370px) { .section-share .share:nth-child(1) { width: 100%; margin: 0 auto 0 0; height: 40px; justify-content: flex-start; } .section-share {width: 265px;} } .insights-loop.related {min-height:0px;} .article-detail-title .column {padding:0;} .section-share {min-width:auto;padding-top:16px;} .article-detail-paragraphs p {overflow: hidden;text-overflow: ellipsis;} @media screen and (min-width:769px){ .article-detail-paragraphs-columns {max-width: 100%;transform: 0;} .article-detail-paragraphs .left-column {max-width:none;} .article-detail-paragraphs .right-column {flex: 0 0 130px;} .section-share {min-width: 0;max-width: 72px;padding: 16px;} .section-share .share {margin-right:0px;margin-bottom:8px;} .section-share .share:nth-child(1) {margin: 0 0 15px 0;height: auto;} .section-share .share:last-child {margin-bottom: 0px;} } @media screen and (min-width:1024px){ .article-detail-paragraphs-columns {max-width: 860px;transform:translateX(65px);} .article-detail-title .container {max-width: 710px;margin: 0px auto;} .article-detail-title .column:nth-child(1) {padding-bottom: 80px;margin-top: 60px;} .article-detail-title .container {gap: 0px;} .article-detail-title .column:nth-child(2){display:none;} } /* Insights ===================== */ .insight-filters {margin-top:80px;} .insight-filters h2 strong {color:var(--orange-red);} .insight-filters.resources-filters h2 strong {color:var(--orange-red); font-size: 34px;} .textbox {font-family: poppins, sans-serif;font-style: normal;} .form-subscribe {background:white;padding:4px;border-radius:4px;display:flex;height:45px;width:100%;} .filter-form .textbox {-webkit-appearance:none;border-radius: 4px;background: white;height:48px;display:flex;padding:0px 10px;border:none;outline:none;width:100%;color:var(--midnight-blue);font-size:14px;line-height:1.1em;padding-top:3px;align-items: center;position:relative;} .resources-filters .filter-form .textbox{ background: #F5F6FA; } .resources-filters .filter-form .holder{ margin-right: 20px; } .filter-form.textbox::placeholder {color: #A1A4AF;opacity: 1;} .filter-form .textbox::-ms-input-placeholder {color:#A1A4AF;} .insight-filters .filter-form {margin-top:64px;} .insight-filters.resources-filters .filter-form {margin-top:32px;} .insight-filters .flex>div {flex:0 0 calc((100% - 40px)/3);margin-right:20px;} .insight-filters .flex>div:nth-of-type(3n + 3) {margin-right:0px;} .insight-filters ul.select {list-style:none;top:43px;left:0px;} .filter-form .textbox {} .filter-form .holder {position:relative;} .filter-form .holder.dropdown:after {content:"\e80b";position:absolute;right:20px;top:14px;font-size:8px;} .filter-form .holder.dropdown {cursor:pointer;} .filter-form .over.holder.dropdown:after {transform:rotate(180deg);} .filter-form .over.holder.dropdown ul.select {display: block;} .filter-form .holder.search:after {content:"\e80a";position:absolute;right:16px;top:13px;font-size:16px;} .insight-filters .button-grey.upload {height:48px;} .insight-filters .button-grey.upload:before {content:"\e801";font-family: "stachion-icons";font-style: normal;font-weight: normal;speak: never;margin-right:8px;font-size: 11px;transform: translateY(-1px);} .form-subscribe .textbox {-webkit-appearance:none;border-radius: 4px;background: white;height:37px;display:flex;padding:0px 10px;border:none;outline:none;width:100%;color:var(--midnight-blue);font-size:14px;line-height:1.1em;padding-top:3px;align-items: center;position:relative;} .form-subscribe.textbox::placeholder {color: #A1A4AF;opacity: 1;} .form-subscribe .textbox::-ms-input-placeholder {color:#A1A4AF;} .form-subscribe .textbox.success {border:1px solid #27AE60;padding-left:9px;} .form-subscribe .textbox.success + p.msg {color:#27AE60;} .form-subscribe .textbox.error {border:1px solid #EB5757;padding-left:9px;} .form-subscribe.textbox.error + p.msg {color:#EB5757;} .form-subscribe .button {height:37px;border-radius:4px;font-family: poppins, sans-serif;font-style: normal;} .subscribe {flex: revert;justify-content: flex-start;display: flex;flex-direction: column;align-items: flex-start;width:100%;max-width:465px;} .subscribe p {font-size: 14px;margin-bottom: 5px;} .blue.copy-intro h1 strong {color:var(--denim-blue);} .insights-hightlight {margin-top:60px;} .news-loop {flex-wrap:wrap;} .news-loop a {flex:0 0 calc((100% - 40px)/3);margin-right:20px;overflow:hidden;border-radius:40px;display:flex;flex-direction:column;position:relative;text-decoration:none;} .news-loop a:nth-of-type(3n + 3) {margin-right:0px;} .news-loop a .detail {padding:40px 30px;color:var(--midnight-blue);background:#fff;position:relative;} .news-loop a .detail .date {font-size:14px;margin-bottom:8px;height:26px;display:inline-flex;align-items: center;} .news-loop a .detail .tag {font-size:11px;text-transform: uppercase;background:white;height:26px;display:flex;justify-content: center;align-items: center;border-radius:28px;width:fit-content;padding:6.5px 15px 0px 15px;color:var(--midnight-blue);font-family: poppins, sans-serif;margin-bottom:22px;position:absolute;top:-50px;} .news-loop a.white-paper .detail .tag {} .news-loop a.white-paper .detail .tag:before {content:"\e8022";color:var(--midnight-blue);margin-right:5px;transform:translateY(-2px);} .news-loop a.white-paper:hover .detail .tag:before {color:var(--orange);} .news-loop a .detail .tag .insights-hightlight .news-loop a .detail {color:white;} .insights-hightlight .news-loop a:not(.news-highlight) .detail {background:var(--gradient-2);} .insights-hightlight .news-loop a .detail .tag {position:relative;left:0;top:0;color:var(--denim-blue);} .news-loop a h3 {font-weight:400;line-height:1.5em;font-size:18px;} .news-loop a .imgHolder {overflow:hidden;max-width:100%;height:225px;position:relative;} .news-loop a .imgHolder img {position:absolute;left:0px;top:0px;width:100%;height:100%;object-fit: cover;} .news-loop.news-loop-highlight a:nth-of-type(2) {margin-right:0px;} .news-loop a.news-highlight {flex:0 0 calc((100% - 20px)*0.66666);} .news-loop a.news-highlight .imgHolder {position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;} .news-loop a.news-highlight .detail, .news-loop a.news-highlight:hover .detail {position:absolute;left:10px;bottom:10px;right:10px;background:rgba(1, 28, 64, 0.8);border-radius:38px;z-index:2;max-width:570px;display:flex;flex-wrap:wrap;} .news-loop a.news-highlight .detail .date {order:1;margin-right: auto;} .news-loop a.news-highlight .detail .tag {order:2;color:var(--midnight-blue);} .news-loop a.news-highlight .detail h3 {order:3;width:100%;font-size:23px;font-weight:700;} .news-loop a.news-highlight .detail p {order:4;line-height:1.87em;} .insights-hightlight .news-loop a .detail {color:white;} /*, .insights-hightlight .news-loop a:hover .detail*/ .news-loop a:hover .detail {background:var(--gradient-1);color:white;} .news-loop a:not(.news-highlight):hover .detail .tag {color:var(--orange-red);} .insights-hightlight .news-loop a:hover .detail .tag {color:var(--denim-blue);} .insights-loop {margin-top:80px;} .insights-loop .news-loop a {margin-bottom:64px;} .insights-loop .button-holder {justify-content: center;} .section-contact .flex {flex-wrap: wrap;} .insights-hightlight .news-loop a .detail .tag, .news-loop a .detail .date {position:relative;} .insights-hightlight .news-loop a:nth-of-type(2) .detail .tag:before, .insights-hightlight .news-loop a:nth-of-type(1) .detail .date:before, .news-loop a .detail .date:before {content:"";background:url(/wp-content/themes/stanchion/images/news/node.svg) left top no-repeat;width:22px;height:6px;position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%);opacity:0;transition:all .3s linear;} .insights-hightlight .news-loop a:nth-of-type(2):hover .detail .tag:before, .insights-hightlight .news-loop a:nth-of-type(1):hover .detail .date:before, .news-loop a:hover .detail .date:before {opacity:1;left:calc(100% + 20px);} .insights-hightlight .news-loop a:nth-of-type(2) .detail .date:before {display:none;} @media screen and (max-width:992px){ .news-loop a {flex:0 0 calc((100% - 20px)/2);margin-right:20px;} .news-loop a:nth-of-type(3n + 3) {margin-right:20px;} .news-loop a:nth-of-type(2n + 2) {margin-right:0px;} .news-loop a.news-highlight {flex:0 0 calc((100% - 20px)/2);} .subscribe {max-width:none;margin-top:48px;} } @media screen and (max-width: 768px){ .insights-loop .button-holder .button {margin: auto;} .insights-loop {margin-top: 50px;} .section-contact h2 {margin-bottom: 10px;} .insight-filters .filter-form {flex-direction: column;padding: 0px 24px;} .insight-filters h2 {padding: 0px 24px;} .insight-filters .flex>div:nth-of-type(1) {margin-bottom:30px;} .filter-form .holder.search:after {right: 23px;top: 14px;font-size: 14px;} .filter-form .holder.dropdown:after {right: 24px;top: 14px;font-size: 9px;} .insight-filters .button-grey.upload {border: none;background: none;margin: 10px auto 0 50%;display: inline-flex;transform: translateX(-50%);font-size: 15px;text-transform: none;} .insight-filters .button-grey.upload:before {font-size: 15px;transform: translateY(-2px);} .insight-filters .filter-form {margin-top: 40px;} } @media screen and (max-width:576px){ .news-loop a {flex:0 0 100%;margin-right:0px;} .news-loop a:nth-of-type(3n + 3) {margin-right:0px;} .news-loop a:nth-of-type(2n + 2) {margin-right:0px;} .news-loop a.news-highlight {flex:0 0 100%;padding:124px 16px 16px 16px;margin-bottom:32px;} .news-loop a.news-highlight .detail {position:relative;left:0;bottom:0;} .news-loop a.news-highlight .detail .date {order:2;flex:0 0 100%;} .news-loop a.news-highlight .detail .tag {order:1;margin-right:auto;} .news-loop a .detail .tag {position:relative;top:0px;background:var(--ghost-white);} .news-loop a {border-radius:40px;} .insights-loop .news-loop a {margin-bottom: 32px;} .form-subscribe {background:none;flex-direction:column;height:auto;padding:10px 0px 30px 0px;} .form-subscribe .button, .form-subscribe .textbox {height:45px;margin-bottom:24px;border-radius:7px;} .insights-hightlight {margin-top: 0px;} } .loader { width: 60px; aspect-ratio: 4; --_g: no-repeat radial-gradient(circle closest-side,#F24405 90%,#0000); background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%; background-size: calc(100%/3) 100%; animation: l7 1s infinite linear; flex: 0 0 50px; margin: 0px auto 100px auto; } @keyframes l7 { 33%{background-size:calc(100%/3) 0% ,calc(100%/3) 100%,calc(100%/3) 100%} 50%{background-size:calc(100%/3) 100%,calc(100%/3) 0% ,calc(100%/3) 100%} 66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0% } } .loader.blue { width: 60px; aspect-ratio: 4; --_g: no-repeat radial-gradient(circle closest-side,#045BCC 90%,#0000); background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%; background-size: calc(100%/3) 100%; animation: l7 1s infinite linear; flex: 0 0 50px; margin: 50px auto 50px auto; } .page-template-template-insights p.subtitle {display:none;} .news-loop a .detail {flex: 1;} .insight-filters .button-grey.upload[data-sort="ASC"]:before {transform:translateY(-1px) rotate(180deg);} .insights-loop {min-height:950px;} .page-template-template-careers-2 .ui-autocomplete{ max-width: 480px; margin: 0px; padding: 5px; background: #EDEFF5; position: absolute; width: 100%; z-index: 100; font-size: 14px; display: none; top: 77px; border-radius: 0 0 4px 4px; margin-top: -5px; box-shadow: none; transform: translateY(2px); } .careers-vacancies #job-list .no-jobs li{ margin-bottom: 2px; padding-bottom: 2px; border-bottom: none; } @media screen and (max-width:1224px){ .page-template-template-careers-2 .ui-autocomplete{ width:100%; max-width: calc(50% - 120px) } } @media screen and (max-width:768px){ .page-template-template-careers-2 .ui-autocomplete{ width:100%; max-width: calc(100% - 40px) } } /* Careers Detail ================ */ .careers-template-default footer {background:white;padding-top: 160px;} .careers-template-default footer .main-width {margin-top:0px;} .careers-detail-paragraphs-columns { display: flex; gap: 142px; } .careers-detail-paragraphs { flex: 1; } .careers-detail-title { padding-top: 100px; } .careers-detail-title h1 { font-size: 44px; display: flex; color:var(--denim-blue);font-family:poppins;font-weight:700;line-height:52px;margin-bottom:24px; } .careers-detail-title p { font-size: 25px; font-weight: 600; display: flex; color: #011c40; line-height: 23px; margin-bottom: 8px; } .column p:nth-of-type(2) { font-size: 15px; font-weight: normal;max-width: 503px; } .careers-detail-content { background: white; padding-top: 80px; } .careers-detail-paragraphs h2 { font-size: 34px; font-weight: 700;margin-bottom: 30px; max-width: none; } .careers-detail-paragraphs h3 { font-size: 23px; font-weight: 700; margin: 64px 0 31px 0;} .careers-detail-paragraphs h3:nth-of-type(1) {margin: 30px 0 30px 0; } .careers-detail-paragraphs h3::before { content: url(/wp-content/themes/stanchion/images/careers/stanchion-logo-small.svg); margin-right: 5px; max-width: 100px; height: auto; display: inline-flex;vertical-align: middle;} .careers-detail-paragraphs h3:first-of-type { margin: 0 0 31px 0; } .careers-detail-paragraphs h4 {font-size: 16px;font-weight: 600;font-family: century-gothic, sans-serif; margin:31px 0 23px 0;} .careers-detail-paragraphs p { max-width: 850px; } .careers-detail-paragraphs ul {list-style-type: circle;padding: 0 0 0 3px;margin-left: 15px;margin-top: 0px;margin-bottom: 0px;line-height: 30px;} .careers-detail-paragraphs .flex.divider { margin-top: 110px; gap: 70px; flex-wrap: wrap; } .careers-detail-paragraphs .flex.divider>div { flex: 0 0 385px; max-width: 100%; } .careers-detail-title .main-width .container .column {padding:0;} .careers-detail-title .main-width .container .column:first-child {padding-bottom:80px;} .container { display: flex; gap:66px; } .column { flex: 1; } .column img { vertical-align: baseline; } .space-between { justify-content: space-between; } .right-column { position: relative; z-index: 1; } .section-interested { position: sticky; top: calc(20px + 100px); z-index: 1000; } .section-interested-blue-block{font-family: century-gothic, sans-serif; color: #fff; border-radius: 40px; background: var(--gradient-2); padding: 40px;width:350px;} .section-interested-blue-block h1 { font-size: 34px; font-weight: 700; margin-bottom: 24px; } .section-interested-blue-block p { font-size: 16px; font-weight: 400; margin-bottom: 24px; } .section-interested-blue-block p a { text-decoration: underline; color: #fff; } .section-interested-blue-block p:nth-of-type(2) { margin-bottom: 0px; } .section-interested-blue-block p:first-of-type {max-width: 211px;margin-bottom:16px;} .section-interested-blue-block p:nth-of-type(3) {display: none;} .section-interested-blue-block p:last-of-type {padding-top: 30px; font-size: 13px; font-style: italic; font-weight: 400; line-height: 19px; } .section-interested-blue-block p:last-of-type strong {padding-top: 30px; margin-left: 10px;font-style: normal; } .section-interested-note{font-size: 13px;font-style: italic;font-weight: 400;line-height: 19px;text-align: center;max-width: 310px; margin: 0 auto;margin-top: 24px;} .careers-detail-paragraphs .left-column { flex: 4; } .careers-detail-paragraphs .right-column { flex: 1; } .all-departments { display: flex; justify-content: space-between; } .department-count { margin-left: auto; } .no-search .column p span:first-child { color: var(--denim-blue); } .no-search { display: flex; justify-content: space-between; align-items: center; margin-top: 40px;gap: 113px; } .no-search ul { padding: 0px; background: transparent; border-radius: 0px; padding-left:15px;margin: 0px; list-style: circle; max-width: 700px; } .no-search ul li {border-bottom: none; margin-bottom: 2px;padding-bottom: 2px; } .column { flex: 1; } .no-search p { font-family: century-gothic, sans-serif; font-weight: 600; font-size: 25px; margin-bottom: 20px; line-height: 35px; } .no-search p span { color: #045BCC; } .no-search > .column > p:nth-child(2) { font-weight: 400; font-size: 16px; margin-bottom: 30px; } .careers-detail-paragraphs .right-column > p:last-child { font-family: century-gothic, sans-serif; margin-top: 20px; font-size: 13px; font-weight: 400; line-height: 19px; } .careers-detail-paragraphs .right-column > p:last-child strong { padding-left: 10px; } @media (max-width: 768px) { .careers-detail-paragraphs h4 {font-size: 15px;margin: 0px 0 23px 0;} .no-search{gap:0px;margin-top:0px;} .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .column { flex-basis: 48%; } .careers-detail-paragraphs-columns { flex-direction: column; gap: 0; } .careers-detail-paragraphs .right-column { position: static; z-index: auto; } .section-interested { position: static; top: auto; margin-top:80px; } .careers-detail-title {padding-top: 40px;} .careers-detail-title h1 {font-size: 42px;} .careers-detail-title .main-width .container .column h1 {font-family: Poppins;font-weight: 700;margin-bottom: 32px;font-size: 42px;line-height: 45px ;} .careers-detail-title .main-width .container .column p:first-of-type{margin-bottom:16px;font-size: 15px;font-weight: 600;line-height: 21px; } .careers-detail-title .main-width .container .column p:last-of-type{font-size: 15px;font-weight: 400; line-height: 21px;} .container{gap:30px;margin-bottom:40px;} .careers-detail-paragraphs .right-column > p:last-child { display: none; } .section-interested-blue-block{width:auto; padding:48px 24px 48px 24px;} .section-interested-blue-block p {margin-bottom: 16px;font-size: 15px;} .section-interested-blue-block p:first-of-type {max-width: none;} .section-interested-blue-block p:last-of-type {display: block;padding-top:0} .section-interested-blue-block p:last-of-type strong {margin-left: 0px; } .section-interested-blue-block p:nth-of-type(2){max-width: none;margin-bottom:24px} .section-interested p:last-of-type {display: none;} .section-interested .section-interested-blue-block p:last-of-type {display: block;max-width: 282px;margin-bottom:0} .careers-detail-paragraphs h3 {font-size: 18px;font-weight: 600;line-height: 24px; display: inline-flex;} .careers-detail-paragraphs h3:nth-of-type(2) {max-width:301px;} .careers-detail-paragraphs h3:last-of-type {max-width:234px;} .careers-detail-paragraphs ul li{line-height: 21px;padding-bottom: 10px;} .section-interested-blue-block h1 { font-size: 26px;margin-bottom: 32px; } .section-interested-note{display:none;} .no-search { flex-direction: column-reverse; align-items: center; } .no-search .column { width: 100%; margin-bottom: 20px; } .no-search .column img { display: none; } .no-search .column:first-child { background-image: url('/wp-content/themes/stanchion/images/careers/search-large.svg'); background-repeat: no-repeat; background-position: center; } } .careers-detail-title .image-container {display: flex;justify-content: end;align-items: flex-end;} .careers-detail-title .container>div.column:nth-of-type(2) {padding-bottom:0px;} .careers-detail-title .container{align-items: flex-end;} .careers-detail-title .image1 {flex: 1;max-width: 50%;margin-right: -50px;z-index: 2;margin-bottom: 44px;} .careers-detail-title .image2 {max-width: 64%;margin-left: -50px;z-index: 1;} @media only screen and (max-width: 768px) { .careers-detail-title .image-container {justify-content: center;} .careers-detail-title .image1 {max-width: 55%;margin-right: -5px;margin-bottom: 27px;} .careers-detail-title .image2 {max-width: 66%;margin-left: -73px;} .careers-detail-title .main-width .container .column:first-child {margin-top:80px;padding-bottom:0px;} } @media screen and (max-width:576px) { .careers-detail-title .image1 {max-width: 53%;margin-right: -5px;margin-bottom: 27px;} .careers-detail-title .image2 {max-width: 61%;} .careers-detail-title .main-width .container .column p:first-of-type{max-width:204px;} .careers-detail-title .main-width .container .column p:last-of-type{max-width:244px;} } /* Resources ============= */ .modal-form .modal-content>div {gap: 60px;} .modal-form .modal-content {max-width: 1200px;} .modal-form .modal-content h2 {max-width: 470px;margin-bottom: 30px;margin-top: 60px;} .modal-form .button-close {z-index:10;} .modal-form .section-form h2 strong {color: var(--denim-blue);} .modal-form .section-form {margin-top: 0px;padding-top: 0px;padding-bottom: 0px;} .gradient-orange {background: var(--gradient-1);padding: 0;color:white;padding-bottom:calc(var(--ctaheight) + 60px);} .gradient-orange .node {background: white;} .gradient-orange .node:after {border: 1px solid white;} .gradient-orange.copy-intro h1 {max-width:none;} .gradient-orange.copy-intro p {max-width:845px;} .form-cta-container {transform:translateY(-50%);margin-bottom:calc(var(--ctaheight) * -1);} .form-cta-container .main-width {background:white url("/wp-content/themes/stanchion/images/background-logo-element-cta.svg") right 50px top no-repeat;background-size:auto 100%;border-radius: 50px;padding: 50px 20px 50px 80px;box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.10);} .form-cta-container.resources-filters .main-width{ background: white; } .form-cta-flex {display: flex;align-items: center;} .form-cta-flex>div {margin-right:60px;} .form-cta-flex h2 {font-size: 34px;line-height: 1.17em;max-width:430px} .form-cta-flex h2 strong {font-weight: 700;color:var(--orange-red);} .form-cta-flex p {font-size: 14px;max-width:350px;line-height: 1.35em;} .form-cta-flex .button {white-space: nowrap;} .form-cta-flex .cta-results {flex:1;} .form-cta-flex .cta-results p, .form-cta-flex .cta-results h2{max-width:none;} .insight-filters.resources-filters {margin-top:0px;} .insight-filters.resources-filters h2 {max-width:170px;} .insight-filters.resources-filters h2 strong {color:var(--orange);} .news-loop .icon {font-family: "stachion-icons";font-style: normal;font-weight: normal;speak: never;} .resourcess-loop .icon.download{font-size: 17px;position: absolute;top: -97px;color:#fff;} .resourcess-loop .icon.download:before {content:"\E80E";font-size:32px;} .resourcess-loop .icon.video {position: absolute;top: -143px;left: 50%;transform: translateX(-50%);} .resourcess-loop .icon.video:before {content:"";width:59px;height:59px;background:url("./images/play-btn-resources.svg") no-repeat;background-size:100%;display:block;} .resourcess-loop .imgHolder:after {content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(1, 28, 64, 0.5);} .resourcess-loop {margin-top:80px;} .resourcess-loop .news-loop a {margin-bottom:64px;cursor: pointer;} .resourcess-loop .button-holder .button {margin-right: 0px;} .resourcess-loop .button-holder {justify-content: center;} .section-contact .flex {flex-wrap: wrap;} @media screen and (max-width: 980px){ .form-cta-flex {flex-direction: column;align-items: flex-start;} .form-cta-flex p {margin: 13px auto 20px auto;max-width: none;} .form-cta-flex h2 {max-width: none;} .form-cta-container .main-width {padding: 50px;} .form-cta-flex>div {margin-right: 0px;} } @media screen and (max-width: 768px){ .insight-filters .flex>div {margin-right:0;} .form-cta-flex h2 {font-size:18px;} .form-cta-container .main-width {padding: 50px 40px;} .resourcess-loop .button-holder .button {margin:auto;} .modal-form .modal-content>div {gap: 10px;flex-direction: column;} } @media screen and (max-width: 576px){ .form-cta-container .main-width {background:white url("/wp-content/themes/stanchion/images/background-logo-element.svg") left top no-repeat;background-size: calc(100% + 10px) auto;} .form-cta-flex>div {widht:100%;} .resourcess-loop .news-loop a .detail .tag {position: absolute;top: -50px;background: white;} .resourcess-loop {margin-top: 60px;} .insight-filters.resources-filters {margin-top:0px;} } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .modal-form .loader { width: 60px; aspect-ratio: 4; --_g: no-repeat radial-gradient(circle closest-side, #045BCC 90%, #0000); margin-top:123px; margin-left: 0px; } .downloaded-thanks h2{ color: var(--denim-blue, #045BCC); font-family: Poppins; font-size: 44px; font-style: normal; font-weight: 700; line-height: 53px; /* 120.455% */ } .video-modal{ display:none; opacity:0; position: fixed; z-index: 999; left:0px; width: 100%; animation: fadeIn 0.5s; background: rgba(0, 0, 0, 0.32); height:100%; top:0px; } .video-modal .content .close{ content:""; background-image: url("/wp-content/themes/stanchion/images/close.svg"); width:13px; height:13px; position: absolute; right:32px; top:26px; cursor:pointer; } .video-modal .content .video-container { position: relative; padding-bottom: 56.25%; } .video-modal .content .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-modal .content{ opacity:0; padding:64px 116px; border-radius: 40px; background-color: #FFFFFF; position: relative; margin-left: auto; margin-right: auto; max-width: 1200px; transition: all .3s; margin-top:116px; } .video-modal.active .content { opacity:1; } .video-modal.active { display:block; opacity:1; } @media screen and (max-width: 1228px){ .video-modal{ padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 768px){ .video-modal{ top:0px; } .video-modal .content{ padding:32px; padding-top: 64px; top:calc(50vh - 280px); } } /* Resources hubspot form styling */ .modal-form .field label {display: block;font-size: 14px;} .modal-form .field label span {margin-bottom:0px;} .modal-form .hs-button {margin-top:45px;} .modal-form .hs-error-msgs.inputs-list {list-style:none;margin:-15px 0 10px 0;padding:0px;color: #EB5757;} .modal-form .hs-error-msgs.inputs-list label {font-size: 12px;} .modal-form .hs_error_rollup .inputs-list {margin:30px 0 0 0;font-size: 14px;} .modal-form .hs-form-field .input .inputs-list {list-style: none;margin: 10px 0px;padding: 0px;} .modal-form .hs-form-field .input .inputs-list li {position:relative;padding-left:35px;} .modal-form .hs_recaptcha {margin-top:30px;} .modal-form .hs-input[type="checkbox"] {-webkit-appearance: none;width: 16px;height: 16px;border: 1px solid #A1A4AF;position: absolute;left: 0px;top: 0px;border-radius: 16px;} .modal-form .hs-input[type="checkbox"]:checked:before {content: "";width: 10px;height: 10px;background: var(--midnight-blue);position: absolute;top: 2px;left: 2px;border-radius: 12px;} .modal-form .hs-input[type="text"], .modal-form .hs-input[type="email"], .modal-form select.hs-input {font-family: poppins, sans-serif;-webkit-appearance: none;border-radius: 4px;background: var(--ghost-white);height: 45px;display: flex;padding: 0px 10px;border: none;outline: none;width: 100%;color: var(--midnight-blue);font-size: 14px;margin-top: 12px;line-height: 1.1em;padding-top: 3px;align-items: center;position: relative;margin-bottom:24px;} .modal-form .hs-form-required {display:none;} .resourcess-loop {min-height:300px;} .modal-form .thanks {display:none;} .modal-form.completed .flex>div {display:none;} .modal-form.completed .flex>div.thanks {display:block;text-align: left;} .modal-form.completed .flex>div.thanks p {margin-bottom:0px;} @media screen and (max-width:768px){ .modal-form .hs-button {height:45px;width: 100%;} } .modal-form .hs-fieldtype-text .hs-input, .modal-form .hs-fieldtype-select .hs-input{ width: 100%!important; } .modal-form .hs-fieldtype-select .input{ position: relative; } .modal-form .hs-fieldtype-select .input:after { content: "\e80b"; position: absolute; right: 20px; top: 14px; font-size: 8px; font-family: "stachion-icons"; font-style: normal; font-weight: normal; } .subscribe {position:relative;} .subscribe label {font-size: 14px;margin-bottom: 5px;position: absolute;bottom: 100%;} .subscribe ul {background:white;position:absolute;bottom:calc(100% + 7px);list-style:none;margin: 0px;padding:10px 15px;border-radius: 10px;box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);left:0px;} .subscribe ul label {position:relative;bottom:auto;font-size: 13px;} .subscribe ul:nth-of-type(2) {bottom: calc(100% + 57px);} .subscribe .hbspt-form {width:100%;text-align:left;} .subscribe .hs-button {text-decoration: none;text-align: center;font-size: 13.1px;font-weight: 500;line-height: 1.23em;letter-spacing: 0.78px;text-transform: uppercase;border: 1px solid;display: inline-flex;justify-content: center;align-items: center;padding: 0px 20px;padding-top: 3px;transition: background .3s linear, color .2s linear, border .3s linear, color .2s linear;cursor: pointer;white-space: pre-wrap;color: white;border-color: var(--orange-red);background: var(--orange-red);height: 37px;border-radius: 4px;font-family: poppins, sans-serif;font-style: normal; } .subscribe .hs_email {flex:1;} .subscribe .hs-input {font-family: poppins, sans-serif;font-style: normal; -webkit-appearance: none;border-radius: 4px;background: white;height: 37px;display: flex;padding: 0px 10px;border: none;outline: none;width: 100%;color: var(--midnight-blue);font-size: 14px;line-height: 1.1em;padding-top: 3px;align-items: center;position: relative;} .subscribe .hbspt-form form {background: white;padding: 4px;border-radius: 4px;display: flex;height: 45px;width: 100%;margin-top: 20px;position: relative;} .subscribe .hs-form-required {display:none;} .subscribe .hs-button:hover {color: var(--orange-red);background: white;border-color: var(--orange-red);} .subscribe .hs_error_rollup .inputs-list {display:none !important;} .subscribe .submitted-message h3 {font-weight: 700;color: var(--orange-red);font-size: 18px;font-family: poppins, sans-serif;} .subscribe .submitted-message {font-size: 15px;} @media screen and (max-width:768px){ .subscribe .hbspt-form form {background:none;flex-direction: column;padding:0px;height:auto;} .subscribe .hbspt-form .actions {margin-top:20px;} } @media screen and (max-width:576px){ .subscribe .hs-button {width:100%;} } .section-carousel .flex>* { flex: unset; } .animate-text.animated h2{ margin-right: 20px; } /* Updated Resources Styling */ .insight-filters.resources-filters{ z-index: 9; } .insight-filters.resources-filters .filter-form{ max-width: 100%; width: 100%; } .insight-filters.resources-filters h2{ font-size: 23px; line-height: 29px; margin-right: 58px; } .resources-filters.insight-filters .flex>div{ text-align: end; flex: auto; } .form-cta-container.resources-filters .main-width{ padding: 48px 80px; display: flex; } @media screen and (max-width:860px){ .form-cta-container.resources-filters .main-width{ flex-direction: column; padding: 48px 32px; } .insight-filters.resources-filters h2 {max-width:100%;} .insight-filters.resources-filters .button-grey.upload{ transform: none; margin: auto; } .resources-filters.insight-filters .flex>div{ text-align: center; } .resources-filters.form-cta-container .main-width{ border-radius: 38px; } } .insight-filters.resources-filters h2 strong{ font-size: 23px; } .modal-type{ display: flex; position: relative; border-bottom: 1px solid rgba(4, 91, 204, 0.2); background: var(--white, #FFF); padding-bottom: 16px; max-width: fit-content; margin-bottom: 28px; align-items: flex-start; } .resourcess-loop .modal-type .icon.download{ top: unset; position: relative; color: #045BCC; } .resourcess-loop .modal-type .icon.download:before{ font-size: 16px; margin-right: 13px; } .resourcess-loop .news-loop a .detail .tag:before { content: "\e8022"; color: var(--midnight-blue); margin-right: 5px; transform: translateY(-2px); } .news-loop a:not(.news-highlight):hover .detail .tag:before{ color: var(--orange-red); } .news-loop a.open .detail .tag:before { content: "\e813"; color: var(--midnight-blue); margin-right: 5px; transform: translateY(-2px); } .news-loop a:not(.news-highlight).open .detail .tag, .news-loop a:not(.news-highlight).open .detail .tag:before { color: var(--orange-red); } .resourcess-loop .icon.download:before{ font-size: 30px; } .form-paper .modal-type span{ margin-bottom: 0px; } .form-video .icon.download:before{ content: "\E814"; } .resourcess-loop .white-paper .icon.download{ top: -90px; } .form-gate .modal-content .modal-sub, .form-paper .modal-content .modal-sub{ max-width: 280px; } .form-paper .main-width, .form-gate .main-width{width: 100%;} .form-paper .icon.download { display: flex; align-items: flex-start; justify-content: flex-start; } .form-paper .loader{ display: none; } .form-paper.loading .loader{ display: block; } .form-paper.completed .loader{ display: none; } .form-paper.loading h2,.form-paper.loading .main-width > div > p{ display: none; } .form-paper.completed h2,.form-paper.completed .main-width > div > p{ display: block; } .form-paper.loading #myFormHolder{ display: none; } .form-gate.form-video .gated-content a:before{ content: "\E814"; } .form-gate .gated-content a{ flex-direction: row; background: #045BCC; color: #FFFFFF; width: fit-content; border: 1px solid var(--denim-blue, #045BCC); border-radius: 10px; margin-top: 60px; margin-bottom: 0px; } .form-gate .gated-content a:before{ content: "\E80E"; font-size: 17px; font-family: "stachion-icons"; font-style: normal; font-weight: normal; margin-right: 16px; } .search-no-result {margin-bottom:100px;display:flex;justify-content: space-between;max-width:900px;} .search-no-result h2 {font-size:25px;color:var(--midnight-blue);max-width:550px;font-weight:700;margin-bottom:32px;} .search-no-result h2 span {color:var(--orange-red);} .search-no-result ul {list-style:circle;margin-left: 0px;padding-left: 20px;} .search-no-result>div:nth-last-of-type(1) {margin-left:30px;} @media screen and (max-width:576px){ .search-no-result>div:nth-last-of-type(1) {display:none;} }