/* ========================================================================== Reset + Fonts ==========================================================================*/ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block; } audio, canvas, video {display: inline-block; } audio:not([controls]) {display: none; height: 0; } [hidden] {display: none; } html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body {margin: 0; } a:focus {outline: thin dotted; } a:active, a:hover {outline: 0; } abbr[title] {border-bottom: 1rem dotted; } b, strong {font-weight: 600; } dfn {font-style: italic; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } mark {background: #ff0; color: #000; } code, kbd, pre, samp {font-family: monospace, serif; font-size: 1rem; } pre {white-space: pre-wrap; } q {quotes: "\201C""\201D""\2018""\2019"; } small {font-size: 80%; } sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup {top: -0.5rem; } sub {bottom: -0.25rem; } img {border: 0; width:100%;} svg:not(:root) {overflow: hidden; } figure {margin: 0; } fieldset {border: 1rem solid #c0c0c0; margin: 0 2rem; padding: 0.35rem 0.625rem 0.75rem; } legend {border: 0; padding: 0; } button, input, select, textarea {font-family: inherit; font-size: 100%; margin: 0; } button, input {line-height: normal; } button, select {text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] {cursor: default; } ul,li,ul li, ol li {margin:0;padding:0} input[type="checkbox"], input[type="radio"] {-webkit-box-sizing: border-box;box-sizing: border-box; padding: 0; } input[type="search"] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0; } textarea {overflow: auto; vertical-align: top; } table {border-collapse: collapse; border-spacing: 0; } *, *::after, *::before {-webkit-box-sizing: border-box;box-sizing: border-box; } /* FONT - PROXIMA */font-display: auto; @font-face {font-family: "ProximaNova"; font-weight:200; font-display:swap; src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Thin-webfont.eot?#iefix"); src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Thin-webfont.ttf") format('truetype'), url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Thin-webfont.woff") format('woff'); } @font-face {font-family: "ProximaNova"; font-weight:300; font-display:swap; src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Light-webfont.eot?#iefix"); src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Light-webfont.ttf") format('truetype'), url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Light-webfont.woff") format('woff'); } @font-face {font-family: "ProximaNova"; font-weight:400; font-display:swap; src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Reg-webfont.eot?#iefix"); src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Reg-webfont.ttf") format('truetype'), url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Reg-webfont.woff") format('woff'); } @font-face {font-family: "ProximaNova"; font-weight:500; font-display:swap; src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Sbold-webfont.eot?#iefix"); src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Sbold-webfont.ttf") format('truetype'), url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/ProximaNova-Sbold-webfont.woff") format('woff'); } @font-face {font-family:"ProximaNova"; font-weight:600; font-display:swap; src:url("https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); } /* FONT - ROBOTO */ @font-face {font-family: "RobotoSlab"; font-weight:200; font-display:swap; src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/RobotoSlab-Thin.ttf") format('truetype'); } @font-face {font-family: "RobotoSlab"; font-weight:300; font-display:swap; src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/RobotoSlab-Light.ttf") format('truetype'); } @font-face {font-family: "RobotoSlab"; font-weight:500; font-display:swap; src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/RobotoSlab-Reg.ttf") format('truetype'); } @font-face {font-family: "RobotoSlab"; font-weight:600; font-display:swap; src: url("https://cdn2.hubspot.net/hubfs/857538/CCB/_styles/fonts/RobotoSlab-Bold.ttf") format('truetype'); } /* ========================================================================== Structure ==========================================================================*/ html {background: var(--white); } main, section {display:block;width:100%;position:relative;} main {position: relative;width: 100%;color:#3D4659;background:#FFF;overflow: hidden;} :root {font-size: 62.5%; --white: #FFFFFF; --green20: #5CC883; --green10: #9DE3BC; --orange20: #FF9C41; --orange10: #FFBE82; --blue50 : #04428C; --blue40 : #2E99E6; --blue30 : #5FC2FF; --blue20 : #95D8FF; --blue10 : #DAE7F5; --gray60 : #202C3E; --gray50 : #3D4659; --gray40 : #8491A7; --gray30 : #C0CCDA; --gray20 : #E0E6ED; --gray10 : #EFF2F7; --font-primary:'ProximaNova','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; --font-secondary:'RobotoSlab','ProximaNova','Open Sans','Helvetica Neue',Helvetica;} :root body {margin: 0; font-size: 1.6rem; color: var(--gray60); font-family: var(--font-primary);-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh;} body { opacity: 1; transition: 0.3s opacity; } body.fade-out { opacity: 0; transition: none; } .lazyload, .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; transition: opacity 0.3s; } /* GRID LAYOUTS */ .grid {display: grid;grid-gap: 20px;grid-template-columns: repeat(16, [col-start] 1fr);max-width:1366px;margin: 0 auto;position: relative;} .grid--3 {display: grid;grid-gap: 20px;grid-template-columns: repeat(3, [col-start] 1fr);width:100%;position:relative;} .grid--4 {display: grid; grid-template-columns: repeat(4, [col-start] 1fr);width:100%;position:relative;} .grid--6 {display: grid;grid-gap: 20px;grid-template-columns: repeat(6, [col-start] 1fr);width:100%;position:relative;} .grid--9 {display: grid; grid-template-columns: repeat(9, [col-start] 1fr);width:100%;position:relative;} .grid--20 {display: grid;grid-gap: 0;grid-template-columns: repeat(20, [col-start] 5%);max-width: 100%;margin: 0 auto;} .grid--20x7 {display: grid;width: 100%;grid-template-columns: repeat(20, auto);grid-template-rows: repeat(7, [row-start] 79px);/* margin: 0 auto; */} .grid__container--1x2 {grid-column: col-start / span 2;} .grid__container--1x3 {grid-column: col-start / span 3;} .grid__container--1x4 {grid-column: col-start / span 4;} .grid__container--1x5 {grid-column: col-start / span 5;} .grid__container--1x6 {grid-column: col-start / span 6;} .grid__container--1x7 {grid-column: col-start / span 7;} .grid__container--1x8 {grid-column: col-start / span 8;} .grid__container--1x9 {grid-column: col-start / span 9;} .grid__container--1x10 {grid-column: col-start / span 10;} .grid__container--1x16 {grid-column: col-start / span 16;} .grid__container--1x20 {grid-column: col-start / span 20;} .grid__container--2x2 {grid-column: col-start 2 / span 2;} .grid__container--2x3 {grid-column: col-start 2 / span 3;} .grid__container--2x4 {grid-column: col-start 2 / span 4;} .grid__container--2x5 {grid-column: col-start 2 / span 5;} .grid__container--2x6 {grid-column: col-start 2 / span 6;} .grid__container--2x7 {grid-column: col-start 2 / span 7;} .grid__container--2x8 {grid-column: col-start 2 / span 8;} .grid__container--2x14 {grid-column: col-start 2 / span 14;} .grid__container--3x2 {grid-column: col-start 3 / span 2;} .grid__container--3x3 {grid-column: col-start 3 / span 3;} .grid__container--3x5 {grid-column: col-start 3 / span 5;} .grid__container--3x6 {grid-column: col-start 3 / span 6;} .grid__container--3x12 {grid-column: col-start 3 / span 12;} .grid__container--4x2 {grid-column: col-start 4 / span 2;} .grid__container--4x4 {grid-column: col-start 4 / span 4;} .grid__container--4x5 {grid-column: col-start 4 / span 5;} .grid__container--5x2 {grid-column: col-start 5 / span 2;} .grid__container--5x4 {grid-column: col-start 5 / span 4;} .grid__container--5x5 {grid-column: col-start 5 / span 5;} .grid__container--5x9 {grid-column: col-start 5 / span 9;} .grid__container--6x7 {grid-column: col-start 6 / span 7;} .grid__container--6x9 {grid-column: col-start 6 / span 9;} .grid__container--7x2 {grid-column: col-start 7 / span 2;} .grid__container--7x3 {grid-column: col-start 7 / span 3;} .grid__container--7x4 {grid-column: col-start 7 / span 4;} .grid__container--7x7 {grid-column: col-start 7 / span 7;} .grid__container--7x9 {grid-column: col-start 7 / span 9;} .grid__container--8x2 {grid-column: col-start 8 / span 2;} .grid__container--9x2 {grid-column: col-start 9 / span 2;} .grid__container--9x4 {grid-column: col-start 9 / span 4;} .grid__container--9x5 {grid-column: col-start 9 / span 5;} .grid__container--9x6 {grid-column: col-start 9 / span 6;} .grid__container--9x8 {grid-column: col-start 9 / span 8;} .grid__container--10x2 {grid-column: col-start 10 / span 2;} .grid__container--10x3 {grid-column: col-start 10 / span 3;} .grid__container--10x4 {grid-column: col-start 10 / span 4;} .grid__container--10x5 {grid-column: col-start 10 / span 5;} .grid__container--10x6 {grid-column: col-start 10 / span 6;} .grid__container--11x2 {grid-column: col-start 11 / span 2;} .grid__container--11x6 {grid-column: col-start 11 / span 6;} .grid__container--12x2 {grid-column: col-start 12 / span 2;} .grid__container--12x3 {grid-column: col-start 12 / span 3;} .grid__container--12x8 {grid-column: col-start 12 / span 8;} .grid__container--13x2 {grid-column: col-start 13 / span 2;} .grid__container--14x2 {grid-column: col-start 14 / span 2;} .grid__container--14x3 {grid-column: col-start 14 / span 3;} .grid__container--15x2 {grid-column: col-start 15 / span 2;} /* .grs--1 {grid-row-start:1} .grs--2 {grid-row-start:2} .grs--3 {grid-row-start:3} .grs--4 {grid-row-start:4;} .grs--5 {grid-row-start:5} .grs--6 {grid-row-start:6} .grs--7 {grid-row-start:7} .grs--8 {grid-row-start:8} .grs--9 {grid-row-start:9} .grs--10 {grid-row-start:10} .grs--11 {grid-row-start:11} .grs--12 {grid-row-start:12} .grs--13 {grid-row-start:13} .grs--14 {grid-row-start:14} .grs--15 {grid-row-start:15} .grs--16 {grid-row-start:16} .grs--17 {grid-row-start:17} .grs--18 {grid-row-start:18}*/ .type__pg-header .block-left {z-index: 1;position: absolute;display: inline-block;bottom: 45%;left: 15%;width: 50%;} /* ========================================================================== Typography ==========================================================================*/ /* BASIC TEXT STYLES */ p {font-size: 1.8rem;font-weight: 300;line-height: 1.6em} h1 {position: relative; font-size: 3rem; font-weight: 600;} h2 {position: relative;font-weight: 600;font-size: 4.2rem;text-transform: uppercase;letter-spacing: 0.5rem;margin:0;} h3 {position: relative;font-size: 2.4rem;font-weight: 300;font-family: var(--font-secondary);} h4 {position: relative;font-size: 2.2rem;font-weight: 600;line-height: 3.4rem;} h5 {position: relative; font-size: 2rem;} h6 {position: relative; font-size: 1.8rem; font-weight: 600;} a,a:hover, a:focus {outline: none; text-decoration: none; } a:hover {cursor: pointer;} /* ALTERNATE TEXT STYLES */ .txt-p {font-size: 1.6rem; font-weight: 300; line-height: 1.5em;} .txt-h3 {font-family: var(--font-secondary); font-size: 2.4rem; font-weight: 300; color: #8491A7; margin: 0; } .txt-cta {font-family: var(--font-secondary); font-size: 2.4rem; font-weight: 300; line-height: 1.7em;} .txt-headline{color: var(--gray50); font-size: 2.5rem;font-family: var(--font-secondary);font-weight: 300;line-height: 1.7em;padding: 3rem 0;} .txt-tagline{font-family: var(--font-secondary);font-weight: 300;line-height: 1.7em;padding: 3rem 0;color: var(--gray50);font-size: 2.5rem;} .txt-direct--main {color: var(--gray50);font-size: 2.5rem;font-family: var(--font-secondary);font-weight: 300;line-height: 1.7em;padding: 3rem 0;} .txt-direct {font-family: var(--font-secondary);font-weight: 300;line-height: 1.7em;padding: 3rem 0;color: var(--gray50);font-size: 2.5rem;} .sub {font-size:1.4rem;} /*.txt-direct::after {content: ''; width: 40%; position: relative; display: block; height: 1px; background-color: #232f3f; margin: 40px auto;} */ .txt-direct b {font-weight:400;} h1.txt-direct b{border-bottom: 1px dashed; padding-bottom: 5px; font-weight: 600} /* SECTION TYPES */ .type__pg-header h2 {font-size: 5.5rem;font-weight: 600;} .type__pg-header h3 {font-size: 3rem;font-weight: 300;margin: 10px 0 0;} .type__pg-header h3 b {font-weight: 400;} .type__pg-header p {font-size: 1.8rem;font-weight: 300;line-height: 3rem;padding: 0 0 20px 0;max-width: 500px;} .type__sec-header h3 {margin: 2rem 0 0 0;color: var(--gray40);font-weight: 300;font-size: 2.2rem;} .type__cta {z-index:1} .type__cta .rainbow {height:8px;display:block;width:100%} .type__cta .large-cta{padding:30px 0;background-color: var(--gray60);position:relative;display:block;width:100%;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} .type__cta .large-cta:hover {background-color: #031421;} .type__cta .large-cta p{-webkit-transform:scale(1);transform:scale(1);font-size: 5rem;font-weight: 500;text-transform: uppercase;font-size: 4.2rem;font-weight: 500;text-transform: uppercase;letter-spacing: 0.5rem;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} /* .type__cta .large-cta p::after{content: "";display: inline-block;position: absolute;top: -1px;right: -20px;width: 20px;height: 20px;background: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/icon-sm_playbtn.png);background-size: 35%;background-repeat: no-repeat;background-position: 50% 50%;transition: all 0.2s ease-out;filter: invert(0.6);background-color: var(--blue30);} */ .type__cta .large-cta:hover p {-webkit-transform: scale(1.02);transform: scale(1.02);} .type__cta .large-cta a::after {-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out; white-space: nowrap ; content: ''; background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/ico_arrow.png); background-size: 80%; background-position: 0% 100%; background-repeat: no-repeat; margin: 0 0 0 0.5rem; height: 40px; width: 40px; display: inline-block; position: relative; -webkit-filter: saturate(8) hue-rotate(200deg); filter: saturate(8) hue-rotate(200deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);} .type__cta .large-cta:hover a::after {-webkit-filter: saturate(8) hue-rotate(0deg);filter: saturate(8) hue-rotate(0deg);} /* FOOTER STYLES */ .type__footer {background: url('https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/bck-dust_scratches.png')} .type__footer.no-bck {background: none} .type__footer h6 {text-transform: uppercase;color: var(--gray40);font-weight: 600;letter-spacing: 1.5px;margin: 0 0 2rem;font-size: 1.6rem;/* border-bottom: 2px solid var(--gray50); *//* border-left: 2px solid; *//* padding-bottom: 1.5rem; */} .type__footer ul {margin: 0; padding: 0; list-style-type: none;} .type__footer li {padding: 0 0 1.2rem;margin:0} .type__footer li:hover {cursor: pointer;} .type__footer li a{text-decoration: none; margin: 0;line-height: 1.8rem;color: var(--gray40);font-size: 1.5rem;font-weight: 300;-webkit-transition: all 0.1s ease;transition: all 0.1s ease;display: inline-block;white-space: pre-wrap;position:relative;} .type__footer li a:before {background: var(--gray40);content: "";display: block;position: absolute;width: 100%;height: 1px;bottom: -4px;-webkit-transform: translateY(2px);transform: translateY(2px);opacity: 0;-webkit-transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;transition: transform 0.15s ease-out, opacity 0.15s ease-out;transition: transform 0.15s ease-out, opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;} .type__footer li:hover a {-webkit-transform: translateY(-0.5px);transform: translateY(-0.5px);color: var(--gray50);} .type__footer li:hover a:before{-webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1;} /* BUTTON THEMES */ .type__pg-header .btn__slant-lft, .type__pg-header .btn__slant-lft::after {border: 3px solid var(--blue30); color:var(--white);} .type__pg-header .btn__slant-rt, .type__pg-header .btn__slant-rt::after {border: 3px solid var(--orange20);background-color: var(--orange20);color: var(--white);} .type__blockquote .btn__slant-lft, .type__blockquote .btn__slant-lft::after, .type__2col .btn__slant-lft, .type__2col .btn__slant-lft::after {border: 3px solid var(--blue50); background-color: var(--blue50); color: var(--white);} .type__blockquote .btn__slant-rt, .type__blockquote .btn__slant-rt::after, .type__2col .btn__slant-rt, .type__2col .btn__slant-rt::after {border: 3px solid var(--blue30); background-color: var(--blue30); color: var(--white);} .btn__slant-lft, .btn__slant-lft::after, .btn__slant-rt, .btn__slant-rt::after {-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out; text-decoration:none} .btn__slant-lft:hover, .btn__slant-lft:hover::after {-webkit-transition: all .1s ease-in-out;transition: all .1s ease-in-out; text-decoration: underline;} .btn__slant-rt:hover, .btn__slant-rt:hover::after {-webkit-transition: all .1s ease-in-out;transition: all .1s ease-in-out; text-decoration: underline;} /* BUTTON ELEMENTS */ .btn__slant-lft {border-radius: 2px;z-index:1; position: relative; display: inline-block; padding: 1rem 1rem 1rem 3rem; margin: 0 1px; text-transform: uppercase; font-family: var(--font-primary); font-weight:600; letter-spacing: 0.1rem; white-space: nowrap; border-right: none !important; -webkit-box-shadow: 0px 0px 0px rgba(146, 146, 146, 0); box-shadow: 0px 0px 0px rgba(146, 146, 146, 0); } .btn__slant-lft::after {content: ""; z-index: -1; position: absolute; display: inline-block; width: 100%; height: calc(100% + 6px); top: -3px; left: 10px; -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: skew(-28deg,0deg); transform: skew(-28deg,0deg); border-left: none !important;-webkit-box-shadow: 0px 0px 0px rgba(146, 146, 146, 0);box-shadow: 0px 0px 0px rgba(146, 146, 146, 0);} .btn__slant-rt { border-radius: 2px;z-index:1; position: relative; display: inline-block; padding: 1rem 3rem 1rem 1rem; text-transform: uppercase; font-family: var(--font-primary); font-weight:600; letter-spacing: 0.1rem; white-space: nowrap; border-left: none !important;margin-left:5rem; -webkit-box-shadow: 0px 0px 0px rgba(146, 146, 146, 0); box-shadow: 0px 0px 0px rgba(146, 146, 146, 0);} .btn__slant-rt::after { content: ""; z-index: -1; position: absolute; display: inline-block; width: 100%; height: calc(100% + 6px); top: -3px; right: 20px; -webkit-transform: skew(-28deg,0deg); transform: skew(-28deg,0deg); background-color: var(--orange20); border-right: none !important;-webkit-box-shadow: 0px 0px 0px rgba(146, 146, 146, 0);box-shadow: 0px 0px 0px rgba(146, 146, 146, 0);} /* BUTTON MODS */ .btn--vid {padding: 10px 50px 10px 10px;} .btn--vid span::after {content: ""; display: inline-block; position: absolute; top: 0; right: 0; border-radius: 0; width: 30px; height: 100%; background: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/icon-sm_playbtn.png); background-size: 40%; background-repeat: no-repeat; background-position: 50% 50%; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; border-left: 2px solid #00000005; background-color: #0000001f; padding: 15px;} .btn--vid:hover span::after {background-color: #00000033} .ply-btn {background-color: rgba(95, 194, 255, 0.95);border: 6px solid rgba(95, 194, 255, 0.95); border-radius: 50%; display: inline-block;width: 60px;height: 60px;position: relative;transition: all ease .3s;-webkit-transition: all ease .3s;margin: 0 20px 0 0;cursor: pointer;vertical-align: top;} .ply-btn:hover { -webkit-box-shadow: 0 0 50px 0 #5fc2ff; box-shadow: 0 0 50px 0 #5fc2ff; cursor: pointer; } .ply-btn::after {content:'';width: 30px;height: 20px;border-top: 11px solid transparent;border-bottom: 11px solid transparent;border-left: 15px solid #fff;/* margin: 0 auto; *//* padding: 0; *//* transform: translate(20%,73%); */transition: all ease .3s;-webkit-transition: all ease .3s;position: absolute;top: 25%;left: 40%;} /* ========================================================================== UTILITY : Specific and targeted tasks ==========================================================================*/ /* LINK STYLES */ .u-link {text-decoration: none; color: var(--blue30);} .u-link2 {text-decoration: none; color: var(--gray50); border-bottom: 2px solid var(--blue20); padding-bottom: 3px;-webkit-transition: all .2s ease;transition: all .2s ease; font-weight:500} .u-link2:hover { color: var(--blue30); padding-bottom: 0px;-webkit-transition: all .2s ease;transition: all .2s ease;} .u-link3 {text-decoration: none; color: var(--gray50);transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;} .u-link3:before {background: var(--gray40);content: "";display: block;position: absolute;width: 100%;height: 1px;bottom: -4px;-webkit-transform: translateY(2px);transform: translateY(2px);opacity: 0;-webkit-transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;transition: transform 0.15s ease-out, opacity 0.15s ease-out;transition: transform 0.15s ease-out, opacity 0.15s ease-out, -webkit-transform 0.15s ease-out;} .u-link3:hover {-webkit-transform: translateY(-0.5px); transform: translateY(-0.5px);} .u-link3:hover:before { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1;} .u-link--dashed {border-bottom: 1px dashed; padding-bottom: 3px; color: var(--blue30); font-weight: 600;} .u-link--vid {white-space: nowrap;display: block;font-size: 1.4rem;font-weight: 500;color: var(--blue40);} .u-link--vid::after {content: "";display: inline-block;position: absolute;top: -1px;right: -25px;width: 20px;height: 20px;background: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/icon-sm_playbtn.png);background-size: 35%;background-repeat: no-repeat;background-position: 50% 50%;-webkit-transition: all 0.2s ease-out;transition: all 0.2s ease-out;-webkit-filter: invert(0.6);filter: invert(0.6);} /* TEXT COLORS */ .u-txt--white {color: var(--white);} .u-txt--green20 {color: var(--green20);} .u-txt--green10 {color: var(--green10);} .u-txt--orange20 {color: var(--orange20);} .u-txt--orange10 {color: var(--orange10);} .u-txt--blue50 {color: var(--blue50);} .u-txt--blue40 {color: var(--blue40);} .u-txt--blue30 {color: var(--blue30);} .u-txt--blue20 {color: var(--blue20);} .u-txt--blue10 {color: var(--blue10);} .u-txt--gray60 {color: var(--gray60);} .u-txt--gray50 {color: var(--gray50);/* font-size: 3.8rem; */} .u-txt--gray40 {color: var(--gray40);} .u-txt--gray30 {color: var(--gray30);} .u-txt--gray20 {color: var(--gray20);} .u-txt--gray10 {color: var(--gray10);} /* PADDING OPTIONS */ .u-center {text-align:center;} .u-center-block {margin-left: auto; margin-right: auto; display:inline-block;} .u-pad_tb--5 {padding-top:5rem; padding-bottom:5rem;} .u-pad_tb--10 {padding-top:10rem; padding-bottom:10rem;} .u-pad_tb--15 {padding-top:15rem; padding-bottom:15rem;} .u-pad_tb--20 {padding-top:20rem; padding-bottom:20rem;} .u-pad_tb--25 {padding-top:25rem; padding-bottom:25rem;} .u-pad_tb--30 {padding-top:30rem; padding-bottom:30rem;} .u-pad_b--5 {padding-bottom:5rem;} .u-pad_b--10 {padding-bottom:10rem;} .u-pad_b--15 {padding-bottom:15rem;} .u-pad_b--20 {padding-bottom:20rem;} .u-pad_b--25 {padding-bottom:25rem;} .u-pad_b--30 {padding-bottom:30rem;} .u-pad_b--35 {padding-bottom:35rem;} .u-pad_b--40 {padding-bottom:40rem;} .u-pad_t--5 {padding-top:5rem;} .u-pad_t--10 {padding-top:10rem;} .u-pad_t--15 {padding-top:15rem;} .u-pad_t--20 {padding-top:20rem;} .u-pad_t--25 {padding-top:25rem;} .u-pad_t--30 {padding-top:30rem;} .u-pad_t--35 {padding-top:35rem;} .u-pad_t--40 {padding-top: 40rem;} .u-pad_lr--10 {padding-left:10rem;padding-right:10rem;} .u-pad_lr--20 {padding-left:20rem;padding-right:20rem;} .u-pad_lr--30 {padding-left:30rem;padding-right:30rem;} .u-pad_l--10 {padding-left:10rem;} .u-pad_l--15 {padding-left:15rem;} .u-pad_l--20 {padding-left:20rem;} .u-pad_r--10 {padding-right:10rem;} .u-pad_r--15 {padding-right:15rem;} .u-pad_r--20 {padding-right:20rem;} /* SHOW/HIDE */ .u-invisible {visibility: hidden;} .u-hidden {display: none} .u-opacity {opacity:0 !important} .u-show {display: block} .u-visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1rem; margin: -1rem; overflow: hidden; padding: 0; position: absolute; width: 1rem; } .u-visuallyhidden.focusable:active, .u-visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* OVERRIDES + MISC */ .u-nopad {padding:0 !important} .wistia_embed {position: relative; display: inline-block;} .u-border_rt--grey10 {border-right: 1px solid var(--gray30);} .u-border_t--grey2 {border-top: 2px solid var(--gray10);} .u-underline {text-decoration: underline;} .u-highlight {background-color: #fff3dd;padding: 0.3rem 0.8rem;} .u-border--btm { border-bottom: 1px solid #424242;} .sub-line {margin: 0;font-size: 1.4rem;line-height: 2.2rem;color: var(--gray50);} /* ========================================================================== Tab Function ==========================================================================*/ /* #tabs {display: grid;grid-template-columns: repeat(10, [col-start] 1fr);grid-template-rows: repeat(7, [row-start] 79px);z-index: 1;position: relative;} */ .c-tabs-nav {list-style: none;padding: 25px 0 0;position: relative;border-top: 1px solid #5fc2ff36;text-align: center;grid-column: col-start / span 10;grid-row-start: 1;max-width: 1024px;} .c-tabs-nav__link {text-decoration: none;color: #FFF;opacity: 1;margin-right: 0;padding: 20px 15px;font-family: 'ProximaNova', sans-serif;font-weight: 400;font-size: 1.2em;/* display: block; */} .c-tabs-nav__link.is-active {/* opacity: 1; *//* color: #FFBE82; *//* font-weight: 600; */} .c-tab {display: none;/* grid-column: col-start / span 10; */grid-row-start: 2;z-index:1;} .c-tab.is-active {display: block; } /* .c-tab.is-active .menu__item {color:#FFF;transition: color 0.6s cubic-bezier(1, 0.01, 0.04, 1.02);} */ .c-tab__content {/* display: flex; */position: relative;-webkit-animation: showTab 400ms ease-in-out both;animation: showTab 400ms ease-in-out both;} .c-tab-nav-marker {min-height: 6px;background-color: #FFBE82;position: absolute;top: -1px;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;} /* #tabs.c-tabs {pointer-events: auto;grid-column: col-start 1 / span 20;display: grid;grid-template-columns: repeat(10, auto);grid-template-rows: repeat(7, [row-start] 79px);z-index: 1;position: relative;} */ #tabs .c-tabs-nav {/* margin: 0; *//* z-index: 100; *//* grid-column: col-start 4 / span 14; *//* max-width: none; *//* grid-row-start: 1; */} /* #tabs .c-tab { grid-column: col-start / span 20;grid-row-start: 2;z-index: 1;} */ /* #tabs .c-tab__content {grid-column: col-start 1 / span 20;grid-template-columns: repeat(20, [col-start] 5%);grid-template-rows: repeat(3, [row-start] 200px);display: grid;} */ /* #tabs .content--reveal{position: absolute;z-index: 2;right: auto;top: auto;} */ /* #tabs .content__inner {grid-column: 1 col-start / span 20;grid-template-columns: repeat(20, [col-start] 5%);grid-template-rows: repeat(7, [row-start] auto);display: grid;background: linear-gradient(154deg, #2275CE 27.58%, #41A0F0 63.38%, #5FC2FF 88.6%);} */ .hs_recaptcha{display:none!important} /* --MODAL RESETS-- */ .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-preview-wrapper p, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form p, .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-preview-wrapper h4, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form h4, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .advance-wrapper {position: relative;} .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .advance-wrapper {margin: 0 auto !important; text-align: center;} .leadinModal-close {z-index: 1 !important;} /*.dyno-image::after {content: ''; background-color: rgba(0, 0, 0, 0.19); position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 1; z-index: 0; }*/ /* --MODAL SPECIFIC STYLES-- */ .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-preview-wrapper p {width: 50% !important; margin: 20px auto !important; font-weight: 100; text-align: center; font-size: 1.3em; color: #fff !important;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-preview-wrapper h4, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form h4 { margin: 0 auto !important; display: block; text-align: center; font-size: 2.5em; font-weight: 100;} .leadinModal-theme-default .leadin-button-primary {outline: none; width: auto !important; border: 2px solid #ffffff !important; border-radius: 30px !important; /*padding: 7px 21px 7px 20px !important; margin: 7px 5px !important;*/ font-weight: 100 !important; font-size: 1em !important; transition: top ease .3s,box-shadow ease .3s;} /*.leadin-button-primary:hover {color: #fff; box-shadow: 0 0 20px 0 #e86864; top: -5px;}*/ .leadinModal-theme-default.leadinModal-v3 .leadinModal-close:before {color: #fff !important; font-size: 2.5em !important; font-weight: 100 !important; line-height: 1em !important;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .dyno-image {display: inline-block !important; vertical-align: top !important;; float: none !important; position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; width: 100% !important; height: auto!important; overflow: hidden; z-index: 0; margin: 0 !important; padding: 0 !important; background-color:#202C3D;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .dyno-image img {height: auto; max-width: none; max-height: none;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadinModal-content {border-radius: 0px !important;box-shadow: 0px 0px 50px rgba(0,0,0,0.25) !important; border-width: 5px !important; font-size:1em !important;} body.page #leadinModal-144741 .leadin-button-primary {background: #e86864 !important} /*rgba(166, 73, 73, 0) !important*/ /* --MODAL FORM STYLES-- */ .leadinModal.leadinModal-theme-default.leadinModal-v3 .dyno-image img {width: 80%; padding:3em;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadinModal-content label {color: #fff !important; font-size: 1.2em !important; font-weight: 400 !important;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadinModal-content {border-width: 0 !important; width:30em !important;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-preview-wrapper p { width: auto !important; text-align: left;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-preview-wrapper h4, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form h4 { margin: 0 auto !important; display: block; text-align: left; font-size: 2.5em; font-weight: 500; color: #EFF2F7; font-family:'ProximaNova-Soft'; line-height: 1.2em;} .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .advance-wrapper {text-align: left} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-button-primary {width: auto !important; border: 2px solid #e86864 !important; border-radius: 30px !important; font-weight: 100 !important; font-size: 1em !important; } .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form h4, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form h4, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form p, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form p, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form .leadin-form-wrapper {position:relative; margin-left:0 !important;} /* --TOP POPUP-- */ .leadinModal.leadinModal-theme-top.leadinModal-v3.leadinModal-preview .leadin-button { border-radius: 20px; font-size: 0.8em; text-transform: uppercase; font-weight: 100; padding: 10px 20px; display:none;} .leadinModal.leadinModal-theme-top.leadinModal-v3.leadinModal-preview h4 {font-weight: 300;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .thank-you-button {display:none} .leadinModal.leadinModal-theme-default.leadinModal-v3 .thank-you-message, .leadinModal.leadinModal-theme-default.leadinModal-v3 .thank-you-message * {color: #fff; font-size: 1.5em; font-family: ProximaNova-Soft; line-height: 1.3em;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadinModal-content-wrapper {background-color:rgb(123, 167, 87) !important;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .thank-you-message {padding:50px;} /* --OPTIONS (no form)-- */ .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-form .leadin-form-wrapper {opacity:0 !important;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .dyno-image img {width: 200% !important;} /* -- SINGLE IMAGE POPUP FUNC --*/ .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .leadin-button, .leadin-preview-wrapper h4, .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-preview-wrapper p, .leadinModal.leadinModal-theme-default.leadinModal-v3.leadinModal-preview .advance-wrapper {display:none !important;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .dyno-image {position: relative !important;} .leadinModal.leadinModal-theme-default.leadinModal-v3 .dyno-image img {width:100% !important; padding:0 !important;cursor:pointer} .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-content-body .leadin-preview-wrapper, .leadinModal.leadinModal-theme-default.leadinModal-v3 .leadin-content-body #leadin-content-form-wrapper {padding:0 !important;} /* -- SPECIFIC PROMO - WWW LEAD APP Q4 */ #leadinModal-628053.leadinModal-theme-top.leadinModal-preview.leadinModal-v3 .leadinModal-content .leadinModal-close:before {color:#fff !important;} #leadinModal-628053.leadinModal.leadinModal-theme-top.leadinModal-v3 .leadinModal-close {top:20px;} #leadinModal-628053.leadinModal.leadinModal-theme-top.leadinModal-v3 .advance-wrapper .leadin-button-secondary {background: rgba(58, 20, 107, 0.35) !important; color: #ffffff !important; padding: 10px 20px !important; border-radius: 0px; white-space: nowrap; display:inline-block;transition: .2s all;} #leadinModal-628053.leadinModal.leadinModal-theme-top.leadinModal-v3 .advance-wrapper .leadin-button-secondary:hover {background:rgba(58, 20, 107, 0.5) !important} #leadinModal-628053.leadinModal-theme-top.leadinModal-preview.leadinModal-v3 .leadinModal-content .leadin-preview-wrapper h4 { display: inline-block !important; color:#ffffff !important} #leadinModal-628053.leadinModal.leadinModal-theme-top.leadinModal-v3.leadinModal-preview .leadin-preview-wrapper { background-position: left; background-size: 40%; background-repeat: no-repeat; padding: 0.5% 0;text-align:right;} #leadinModal-628053.leadinModal-theme-top.leadinModal-preview.leadinModal-v3 .leadinModal-content-wrapper{background: rgb(0,162,218); background: -moz-linear-gradient(left, rgba(0,162,218,1) 0.00%, rgba(141,0,218,1) 100%); background: -webkit-linear-gradient(left, rgba(0,162,218,1) 0.00%,rgba(141,0,218,1) 100%); background: linear-gradient(to right, rgba(0,162,218,1) 0.00%,rgba(141,0,218,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2da', endColorstr='#8d00da',GradientType=1 ); } #leadinModal-628053 .leadin-preview-wrapper .clearfix-image {display:none;} /* ========================================================================== Desktop Navigation ==========================================================================*/ #main-logo {width:250px;height:auto;} #alt-logo {width:100px; height:auto} #type__gbl-nav{min-height: 150px;position: absolute;} .gblNavPrimary__logo {display: block;margin: 2rem 0 2rem;-webkit-transform: scale3d(.9, .9, 1);transform: scale3d(.9, .9, 1);-webkit-transform-origin: 0 50%;transform-origin: 0 50%;-webkit-transition: all .1s ease-in-out;transition: all .1s ease-in-out;z-index: 1;/* text-align: right; */} .gblNavActions__menuIconBar {-ms-transform-origin: 0 50%; -o-transition: all .15s ease-in-out; -webkit-backface-visibility: hidden; -webkit-transform-origin: 0 50%; -webkit-transition: all .15s ease-in-out; backface-visibility: hidden; transform-origin: 0 50%; transition: all .15s ease-in-out;} .mm-menu-open .gblNavActions__menuIconBar--top {-webkit-transform: translate3d(-.0625rem,-.125rem,0) rotate(45deg); transform: translate3d(-.0625rem,-.125rem,0) rotate(45deg);} .mm-menu-open .gblNavActions__menuIconBar--middle{opacity: 0} .mm-menu-open .gblNavActions__menuIconBar--bottom {-webkit-transform: translate3d(-.0625rem,.25rem,0) rotate(-45deg); transform: translate3d(-.0625rem,.25rem,0) rotate(-45deg);} /* Global Nav Bar */ .gblNavBar {-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;height: 3.75rem;left: 0;padding: 3em 5em;position: fixed;top: 0;-webkit-transform-origin: 50% 0;transform-origin: 50% 0;width: 100%;z-index: 100;-webkit-transition: opacity .1s linear .1s, height .1s linear;transition: opacity .1s linear .1s, height .1s linear;} .gblNavBar::after, .gblNavBar::before {-webkit-backface-visibility: hidden;backface-visibility: hidden;content: "";left: 0;opacity: 0;position: absolute;width: 100%;/* top: -150px; */} .gblNavBar::before {-webkit-transition: all .3s ease;transition: all .3s ease;background-color: rgba(255, 255, 255, 1);height: 100%;opacity: 0;z-index: 0;/* transition-delay:.2s; */top: -150px;} .gblNavBar:hover::before {opacity: 1;top: 0;-webkit-transition-delay:0s;transition-delay:0s;} /*.gblNavBar::after {background-color: rgba(0, 0, 0, .6); display: block; height: calc(100vh + 2.1875rem); top: -2.1875rem; transition: opacity .1s linear, visibility 0s linear .1s; visibility: hidden; z-index: 1 }*/ .gblNavActions, .gblNavPrimary {-ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-box; display: flex; } .gblNavPrimary {margin-right: auto;} .gblNavPrimary__item {-webkit-backface-visibility: hidden;backface-visibility: hidden; -webkit-transition: opacity .1s linear; transition: opacity .1s linear; margin: 0 3.5rem 0 0; display: block; } .gblNavBar:hover .gblNavPrimary__link, .gblNavBar.is-fixed .gblNavPrimary__link {color:#202C3E;} .gblNavPrimary__item:hover .gblNavPrimary__link, .gblNavBar.is-fixed .gblNavPrimary__item:hover .gblNavPrimary__link {/* color: #a1abb9; */} .gblNavPrimary__item:hover .gblNavDropdown {visibility: visible;} .gblNavDropdown::before {-webkit-backface-visibility: hidden;backface-visibility: hidden; background-color: var(--white); border-bottom: .0625rem solid #dbd9d2; content: ""; height: calc(100% - 2rem); left: 0; opacity: 0; position: absolute; top: 4.1rem; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition: all .1s linear; transition: all .1s linear; width: 100%; z-index: 0; -webkit-transition-delay:.1s; transition-delay:.1s; } .gblNavPrimary__item:hover .gblNavDropdown::before {opacity: 1;-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transition: all .2s linear .2s;transition: all .2s linear .2s;-webkit-transition-delay:0s;transition-delay:0s;} .gblNavPrimary__link {white-space: nowrap; color: var(--white); font-family: var(--font-secondary); font-size: 1em; font-weight: 400; position: relative; -webkit-transition: color .1s linear; transition: color .1s linear } .gblNavPrimary__link:hover {color: #71d5ff; -webkit-transition: color .2s linear; transition: color .2s linear } .gblNavPrimary__link.is-active {color: #71d5ff; font-weight: 500} .gblNavPrimary__link.dd::after {white-space: nowrap ; content: ''; background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/ico_arrow.png); background-size: 80%; background-position: 50% 100%; background-repeat: no-repeat; margin: 0 0 0 0.5rem; height: 16px; width: 16px; display: inline-block; position: relative;-webkit-filter: saturate(8);filter: saturate(8);} .gblNavPrimary__item:hover .gblNavPrimary__link.dd::after { -webkit-transform: scaleY(-1) translateY(-3px); transform: scaleY(-1) translateY(-3px); -webkit-filter:saturate(1); filter:saturate(1);} .gblNavActions {-webkit-backface-visibility: hidden;backface-visibility: hidden; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; position: unset; display:inline-block;} .gblNavActions__cta {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;z-index: 2;} .gblNavActions .gblNavPrimary__item:last-child { position: inherit; } .mm-menu.is-fixed .gblNavActions__cta { position: absolute; bottom: 20%; left: 20%; display: block; right: 30%; z-index: 2; opacity: 1; -webkit-transition: all .2s ease; transition: all .2s ease; } .mm-menu.is-fixed .mm-level-overlay .gblNavActions__cta, .mm-menu.is-fixed .mm-level-overlay .social-icons { z-index: 1; opacity: 0; } .mm-menu.is-fixed .social-icons { position: absolute; bottom: 0; left: 0; display: block; right: 10%; z-index: 2; opacity: 1; background: var(--gray10); -webkit-transition: all .2s ease; transition: all .2s ease; } .gblNavActions__ctaLink {white-space:nowrap; display: inline-block;font-size: 1.7rem;padding: 1.2rem 1.8rem;border: 2px solid #72D5FF;color: var(--white);border-radius: 2px;z-index: 1;background-color: #72D5FF00;-webkit-transition: all .3s linear;transition: all .3s linear;} /* background-color: var(--blue30); display: block; text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: 0.2rem; border: 2px solid var(--blue30); color: var(--white); */ .gblNavBar:hover .gblNavActions__ctaLink {background-color: #72D5FF} /* .gblNavBar.is-fixed:hover .gblNavActions__ctaLink {background-color: #72D5FF00} */ .gblNavActions__toggleButton {-moz-appearance: none; -o-transition: all .2s ease-in-out; -webkit-appearance: none; -webkit-transition: all .2s ease-in-out; background: none; border: none; cursor: pointer; display: inline-block; margin: 0; padding: 0; position: relative; top: 0; transition: all .2s ease-in-out; z-index: 10;outline:none; right: -40px; top: -100px; opacity: 0} .gblNavActions__toggleButton g {fill: var(--blue40);} .mm-menu-open .gblNavActions__toggleButton g {fill:var(--gray50)} .gblNavActions__menuIcon {display: block } .gblNavDropdown {-ms-flex-pack: center; -webkit-backface-visibility: hidden; -webkit-box-sizing: border-box; backface-visibility: hidden; box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; left: 0; margin-top: -5px; padding: 5rem 0rem 4rem; position: absolute; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; visibility: hidden; width: 100%; z-index: 0; opacity: 1;overflow: hidden; -webkit-transition-delay:0s; transition-delay:0s; } .gblNavDropdown__icon {display: inline-block; margin: 0 1.5rem 1rem 0.5rem; max-width: 3.75rem; width: 100%; vertical-align: middle; } .gblNavDropdown__desc {margin: 0 0 .625rem; color: #202C3E; line-height: 1.4em; font-size: 1.55rem; padding: 0 0 0 1em;} .gblNavDropdown__menu {-webkit-backface-visibility: hidden;backface-visibility: hidden; opacity: 0; padding: 0 2em; position: relative; -webkit-transform: translateY(-5%); transform: translateY(-5%); -webkit-transition-delay: .1s; transition-delay: .1s; -webkit-transition: all .1s linear; transition: all .1s linear; max-width: 23%; border-right: 1px solid #E0E6ED; list-style: none;} .gblNavDropdown__menu:last-child {border-right:none;} .gblNavDropdown__menu ul {padding:0;} .gblNavDropdown__menu ul li {color:#202C3E; margin: 0 0 0.5em 1em; font-size: 1em; list-style: none;} .gblNavPrimary__item .gblNavDropdown .gblNavDropdown__menu a, .gblNavBar.is-fixed .gblNavPrimary__item .gblNavDropdown .gblNavDropdown__menu a {color:#414c5e;background: radial-gradient(ellipse at center, #EFF2F7 0%,#EFF2F7 70%,#e8e8e8 70%,#ffffff00 70%,#ffffff00 71%); background-size: 45px 80%; background-repeat: no-repeat; background-position: 0 0; min-height: 53px;-webkit-transition-delay: 0s;transition-delay: 0s;-webkit-transition: all 0s ease-in;transition: all 0s ease-in;} .gblNavPrimary__item:hover .gblNavDropdown .gblNavDropdown__menu {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; -webkit-transition-delay: .2s; transition-delay: .2s;} .gblNavPrimary__item:hover .gblNavDropdown .gblNavDropdown__menu:nth-child(1){-webkit-transition-delay:0.2s;transition-delay:0.2s;} .gblNavPrimary__item:hover .gblNavDropdown .gblNavDropdown__menu:nth-child(2){-webkit-transition-delay:0.28s;transition-delay:0.28s;} .gblNavPrimary__item:hover .gblNavDropdown .gblNavDropdown__menu:nth-child(3){-webkit-transition-delay:0.36s;transition-delay:0.36s;} .gblNavPrimary__item:hover .gblNavDropdown .gblNavDropdown__menu:nth-child(4){-webkit-transition-delay:0.44s;transition-delay:0.44s;} .gblNavPrimary__item .gblNavDropdown .gblNavDropdown__menu:hover a, .gblNavBar.is-fixed .gblNavPrimary__item .gblNavDropdown .gblNavDropdown__menu:hover a{color:#2E99E6;} .gblNavPrimary__item .gblNavDropdown .gblNavDropdown__menu:hover a img {-webkit-filter:saturate(10) brightness(0.9);filter:saturate(10) brightness(0.9)} .gblNavDropdown__item {margin: 0 0 .625rem } .gblNavDropdown__menu>.gblNavPrimary__link {font-size: 1.8rem; margin: 0 0 1rem; font-weight:400; } .gblNavDropdown .gblNavPrimary__link {color: #71d5ff;; display: block; width:100%; } .gblNavDropdown .gblNavPrimary__link.is-active:hover {color: #004e56; letter-spacing: 0 } .gblNavPrimary__menu {-ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .gblNavBar {-ms-flex-pack: justify; height: 5.3125rem; -webkit-box-pack: justify; justify-content: space-between; position: absolute; top: 0 } .gblNavBar:hover .gblNavPrimary__logo {-webkit-filter: contrast(0) brightness(0.8);filter: contrast(0) brightness(0.8);} .gblNavPrimary__logo {-webkit-transform: scaleX(1);transform: scale(1);} .gblNavPrimary__item .icon--dropdown {margin-bottom: 0em; margin-left: 0.5em; fill: #71d5ff; } .gblNavPrimary__item:hover .icon--dropdown { -webkit-transform: scaleY(-1); transform: scaleY(-1) } .gblNavBar::after, #alt-logo, .gblNavBar.is-fixed #main-logo {display: none } .gblNavBar.is-fixed {position: fixed; top: 0; -webkit-transition: all .2s linear; transition: all .2s linear; } .gblNavBar.is-fixed::before {/* opacity: 0.98; */-webkit-transition: all .2s linear;transition: all .2s linear;background-color: rgba(255, 255, 255, 0);z-index: -1;} .gblNavBar.is-fixed .gblNavActions {display: none} .gblNavBar.is-fixed .gblNavPrimary__logo {-webkit-filter: brightness(0.3);filter: brightness(0.3);-webkit-transition: all .2s linear;transition: all .2s linear;-webkit-transition-delay: .2s;transition-delay: .2s;} .gblNavBar.is-fixed .gblNavPrimary__menu {-webkit-backface-visibility: hidden;backface-visibility: hidden; -webkit-transition: opacity .1s linear; transition: opacity .1s linear } .gblNavBar.is-fixed .gblNavActions__ctaLink {background-color: var(--blue30); display: block; text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: 0.2rem; border: 2px solid var(--blue30); color: var(--white);} .gblNavBar.is-fixed .gblNavActions__toggleButton {opacity: 1;top: 0;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;} .gblNavBar.is-fixed .gblNavPrimary__logo {-webkit-transform: scaleX(1);transform: scaleX(1);/* filter: brightness(0.3) saturate(0); */overflow: hidden;display: block;width: 60px;} /* .gblNavBar.is-fixed #alt-logo {display: block;width: inherit;position: relative;} */ .gblNavBar.is-fixed { top: 0 } /* GLOBAL NAV BAR - Invert */ #type__gbl-nav.invert-head .gblNavPrimary__logo {filter: brightness(0.3) !important} #type__gbl-nav.invert-head .gblNavPrimary__link {color: var(--gray60);} #type__gbl-nav.invert-head .gblNavActions__ctaLink {background-color: #72D5FF;} /* GLOBAL NAV BAR - Minimal */ #type__gbl-nav.min-head .gblNavPrimary__menu {display: none;} /* GLOBAL NAV BAR - Minmal/None */ #type__gbl-nav.no-head .gblNavBar::before, #type__gbl-nav.no-head .gblNavBar:hover::before, #type__gbl-nav.min-head .gblNavBar::before, #type__gbl-nav.min-head .gblNavBar:hover::before { -webkit-transition: all .3s ease; transition: all .3s ease; background-color: rgba(255, 255, 255, 1); height: 100%; opacity: 0; z-index: 0; top: -150px;} #type__gbl-nav.no-head .gblNavBar:hover .gblNavPrimary__logo, #type__gbl-nav.min-head .gblNavBar:hover .gblNavPrimary__logo {filter: none;} #type__gbl-nav.no-head .gblNavBar {justify-content: flex-end;} #type__gbl-nav.no-head .gblNavActions, #type__gbl-nav.no-head .gblNavPrimary {display: none;} .type__footer .gblNavPrimary__logo img {-webkit-filter: contrast(0) brightness(0.8);filter: contrast(0) brightness(0.8);width: 200px;} .footer__ad-ccbvid img {-webkit-transform: scale(1);transform: scale(1);-webkit-filter: brightness(1.5);filter: brightness(1.5);border-radius: 60% 38% 60% 42%;-webkit-transition: -webkit-transform 0.2s ease;transition: -webkit-transform 0.2s ease;transition: transform 0.2s ease;transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .footer__ad-ccbvid p {text-align:left; font-size: 1.3rem;margin: 1.5rem 0 2rem 0;font-weight: 300;line-height: 1.6em;font-family: var(--font-secondary);color: var(--gray50);} .type__footer .copyright {letter-spacing: 0;margin:0;} .type__footer .legal {margin:1rem 0 0 0;color: var(--gray20);} .type__footer .legal a, .type__footer .legal span{margin: 0 1rem;color: var(--gray40);font-size: 1.25rem;font-weight: 300;} #footer-vid-ad {cursor:pointer} .social-icons a {position: relative;display: inline-block;background: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/icon-gbl-social.png) top left no-repeat;background-size: 633px;height: 25px;width: 25px;margin: 1.5rem 0.5rem;-webkit-filter: contrast(0.6) saturate(1);filter: contrast(0.6) saturate(1);} .social-icons a.facebook {background-position: -30px -31px} .social-icons a.twitter {background-position: -90px -30px} .social-icons a.instagram {background-position: -213px -29px} .social-icons a.vimeo {background-position: -153px -91px} .download-app {margin: 0;display: block;} .download-app a {position: relative;display: inline-block;border-radius: 10px;margin: 0 0 10px 0;border: 1px solid var(--gray20);} .download-app img {-webkit-filter: invert(1) brightness(0);filter: invert(1) brightness(0);width: 130px;padding: 10px 20px 6px 15px;} #download-app--google {padding: 11px 20px 8px 15px;} #mm-menu h5 {position: absolute;bottom: 0;left: 10%;font-size: 2rem;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;} .mm__scene-all {position:relative;background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/sidenav-welcome.png), url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/sidenav-welcome-bck.png);background-repeat: no-repeat;/* background-color: var(--blue30); */background-size: 40%, 100%;background-position: center bottom -65px, center;height: 20%;z-index: -1;} .mm__scene-software {position:relative;/*background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/mm-scene-software.png);*/background-repeat: no-repeat;background-color: var(--blue20);background-size: contain;background-position: top 0px left 40%;height: 20%;z-index: -1;} .mm__scene-resources {position:relative;/*background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/mm-scene-resources.png);*/background-repeat: no-repeat;background-color: var(--green10);background-size: contain;background-position: top 40px left 40%;height: 20%;z-index: -1;} .mm__scene-company {position:relative;/*background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/mm-scene-company.png);*/background-repeat: no-repeat;background-color: var(--gray10);background-size: contain;background-position: top 40px left 40%;height: 20%;z-index: -1;} .mm__scene-customers {position:relative;/*background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/mm-scene-customers.png);*/background-repeat: no-repeat;background-color: var(--blue10);background-size: contain;background-position: top 40px left 40%;height: 20%;z-index: -1;} /* ========================================================================== Side Nav - Scroll + Mobile ==========================================================================*/ #gblNavMobileContainer {position: fixed; top: 0;right: -950px;width: 100%;max-width: 450px;} .mm-container {position: relative;/* overflow: hidden; overflow-y: scroll;*/} .mm-container.mm-menu-open {overflow-y: hidden; } .mm-menu-open .mm-menu-pusher::after {width: 100%;height: 100%;opacity: 1;-webkit-transition: opacity .3s;transition: opacity .3s;z-index: 99;} .mm-menu-pusher::after {position: absolute;top: 0;right: 0;width: 0;height: 0;background: rgba(76, 76, 76, 0.75);content: '';opacity: 0;-webkit-transition: opacity .3s,width .1s .3s,height .1s .3s;transition: opacity .3s,width .1s .3s,height .1s .3s;} #mm-menu .arrow-right::after{right: 15%;margin-top: 5px;-webkit-transition: all 0.2s;transition: all 0.2s;content: '';background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/ico_arrow.png);background-size: cover;height: 12px;width: 12px;position: absolute;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-webkit-filter: brightness(0.3);filter: brightness(0.3);} nav#mm-menu li {position: unset; margin:0} .menu-trigger {position: relative; padding-left: 60px; font-size: 0.9em; } .menu-trigger::before {position: absolute; top: 2px; left: 0; width: 40px; height: 6px; background: var(--white); -webkit-box-shadow: 0 6px #34495e, 0 12px var(--white), 0 18px #34495e, 0 24px var(--white); box-shadow: 0 6px #34495e, 0 12px var(--white), 0 18px #34495e, 0 24px var(--white); content: ''; } .mm-pusher {position: relative;right: 0;height: 100vh;background-color: #202C3E;} .mm-menu {position: absolute;top: 0;right: 0;z-index: 1;width: 100%;height: 100vh;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);} .mm-level {position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: var(--white); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); z-index:1;} .mm-pusher::after, .mm-level::after, .mm-level::before {position: absolute; top: 0; left: 0; width: 0; height: 0; content: ''; opacity: 0; } .mm-pusher::after, .mm-level::after {background: rgba(0,0,0,0.3);-webkit-transition: opacity 0.2s, width 0.1s 0.2s, height 0.1s 0.2s;transition: opacity 0.2s, width 0.1s 0.2s, height 0.1s 0.2s; } .mm-level::after {z-index: -1; } .mm-pusher.mm-pushed::after, .mm-level.mm-level-overlay::after {width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .mm-level.mm-level-overlay {cursor: pointer; } .mm-level.mm-level-overlay.mm-level::before {width: 100%; height: 100%; background: transparent; opacity: 1; } .mm-pusher, .mm-level {-webkit-transition: all 0.2s;transition: all 0.2s; } .mm-menu-open .gblNavBar .gblNavPrimary__logo {opacity: 0} .mm-menu-open .gblNavBar.is-fixed .gblNavActions__toggleButton {-webkit-transform:scale(0.8);transform:scale(0.8)} .mm-overlap .mm-level.mm-level-open {-webkit-box-shadow: none;box-shadow: none;-webkit-transform: translate3d(40px, 0, 0);transform: translate3d(40px, 0, 0);} .mm-menu > .mm-level, .mm-menu > .mm-level.mm-level-open, .mm-menu.mm-overlap > .mm-level, .mm-menu.mm-overlap > .mm-level.mm-level-open {-webkit-box-shadow: 1px 0 30px rgba(0,0,0,0.3);box-shadow: 1px 0 30px rgba(0,0,0,0.3);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} .mm-cover .mm-level.mm-level-open {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); } .mm-cover .mm-level.mm-level-open > ul > li > .mm-level:not(.mm-level-open) {-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0); } .mm-menu ul {margin: 0; padding: 0; list-style: none; } .mm-menu h2 {margin: 0; padding: 1em; color: rgba(0,0,0,0.4); text-shadow: 0 0 1px rgba(0,0,0,0.1); font-weight: 300; font-size: 2em; } .mm-menu.mm-overlap h2::before {position: absolute; top: 0; left: 0; margin-right: 8px; font-size: 75%; line-height: 1.8; opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.1s 0.2s; transition: opacity 0.2s, -webkit-transform 0.1s 0.2s; transition: opacity 0.2s, transform 0.1s 0.2s; transition: opacity 0.2s, transform 0.1s 0.2s, -webkit-transform 0.1s 0.2s; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .mm-menu.mm-cover h2 {text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 1em; } .mm-overlap .mm-level.mm-level-overlay > h2::before {opacity: 1; -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, -webkit-transform 0.2s; transition: transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s; -webkit-transform: translateX(0); transform: translateX(0); } .mm-menu ul li > a {display: block;padding: 1.5em 1em 1.5em 2.5em;outline: none;-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1);font-size: 1.8rem;font-weight: 400;color: var(--gray50);-webkit-transition: background 0.2s, -webkit-box-shadow 0.2s;transition: background 0.2s, -webkit-box-shadow 0.2s;transition: background 0.2s, box-shadow 0.2s;transition: background 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;} .mm-menu ul li::before {position: absolute; left: 10px; z-index: -1; color: rgba(0,0,0,0.2); line-height: 3.5; } /*.mm-level > ul > li:first-child > a {box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2); }*/ .mm-menu ul li a:hover, .mm-level > ul > li:first-child > a:hover { background: rgba(199, 199, 199, 0.2); -webkit-box-shadow: inset 0 -1px rgba(0,0,0,0); box-shadow: inset 0 -1px rgba(0,0,0,0); } .mm-menu .mm-level.mm-level-overlay > ul > li > a, .mm-level.mm-level-overlay > ul > li:first-child > a {-webkit-box-shadow: inset 0 -1px rgba(0,0,0,0);box-shadow: inset 0 -1px rgba(0,0,0,0); } .mm-level > ul > li:first-child > a:hover, .mm-level.mm-level-overlay > ul > li:first-child > a {-webkit-box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);} .mm-back {background: rgba(0,0,0,0.1); outline: none; color: var(--white); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; display: block; font-size: 0.8em; padding: 1em; position: relative; -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.1); box-shadow: inset 0 1px rgba(0,0,0,0.1); -webkit-transition: background 0.2s; transition: background 0.2s; } .mm-back::after {font-family: 'linecons'; position: absolute; content: "\e037"; right: 10px; font-size: 1.3em; color: rgba(0,0,0,0.3); } .mm-menu .mm-level.mm-level-overlay > .mm-back, .mm-menu .mm-level.mm-level-overlay > .mm-back::after {background: transparent; -webkit-box-shadow: none; box-shadow: none; color: transparent; } .no-csstransforms3d .mm-pusher, .no-js .mm-pusher {padding-left: 300px; } .no-csstransforms3d .mm-menu .mm-level, .no-js .mm-menu .mm-level {display: none; } .no-csstransforms3d .mm-menu > .mm-level, .no-js .mm-menu > .mm-level {display: block; } /* ========================================================================== Animate + Gradients + Effects ==========================================================================*/ .txt-linear-wipe {text-align: center;background: -webkit-gradient(linear, left top, right top, color-stop(20%, #9de3bc), color-stop(40%, #95d8ff), color-stop(60%, #2889d0), color-stop(80%, #ffbe82));background: linear-gradient(to right, #9de3bc 20%, #95d8ff 40%, #2889d0 60%, #ffbe82 80%);background-size: 200% auto;color: #000;background-clip: text;text-fill-color: transparent;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: shine 5s linear infinite;animation: shine 5s linear infinite;letter-spacing: 0.5rem;} .txt-rotate-wipe {background-image: -webkit-linear-gradient(92deg, #95d8ff, var(--blue30)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 10s infinite linear; } .rainbow {height:5px; background-image: -webkit-gradient(linear,left top, left bottom,from(#eff2f7),to(#eff2f7)), -webkit-gradient(linear,left top, left bottom,from(#9de3bc),to(#9de3bc)), -webkit-gradient(linear,left top, left bottom,from(#5cc883),to(#5cc883)), -webkit-gradient(linear,left top, left bottom,from(#95d8ff),to(#95d8ff)), -webkit-gradient(linear,left top, left bottom,from(var(--blue30)),to(var(--blue30))), -webkit-gradient(linear,left top, left bottom,from(#2889d0),to(#2889d0)), -webkit-gradient(linear,left top, left bottom,from(#06538b),to(#06538b)), -webkit-gradient(linear,left top, left bottom,from(#ffbe82),to(#ffbe82)), -webkit-gradient(linear,left top, left bottom,from(var(--orange20)),to(var(--orange20))); background-image: linear-gradient(#eff2f7,#eff2f7), linear-gradient(#9de3bc,#9de3bc), linear-gradient(#5cc883,#5cc883), linear-gradient(#95d8ff,#95d8ff), linear-gradient(var(--blue30),var(--blue30)), linear-gradient(#2889d0,#2889d0), linear-gradient(#06538b,#06538b), linear-gradient(#ffbe82,#ffbe82), linear-gradient(var(--orange20),var(--orange20)); background-size: calc(1 * (100% / 9)) 100%, calc(2 * (100% / 9)) 100%, calc(3 * (100% / 9)) 100%, calc(4 * (100% / 9)) 100%, calc(5 * (100% / 9)) 100%, calc(6 * (100% / 9)) 100%, calc(7 * (100% / 9)) 100%, calc(8 * (100% / 9)) 100%, calc(9 * (100% / 9)) 100%; background-repeat:no-repeat; } .grad-bck {background: rgb(2,162,218); background: linear-gradient(135deg, rgba(2,162,218,1) 22%,rgba(128,25,219,1) 91%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02a2da', endColorstr='#8019db',GradientType=1 ); position:relative; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);} .dots-01 {bottom: 0; left: 0; -webkit-transform: translate(-20%, 60%) rotate(24deg); transform: translate(-20%, 60%) rotate(24deg);} .dots {position: absolute; background: url(https://cdn2.hubspot.net/hubfs/857538/CCB/marketing_site/_img/homepage/dots_blue.svg); background-repeat: repeat; background-size: 28px; width: 50vw; height: 50vh; min-width: 300px; min-height: 300px; border-radius: var(--spacing-small);} .dots-container {position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; opacity: 0.75;} .bounceIn {-webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 1s; animation-delay: 1s;} @-webkit-keyframes bounceIn {from {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% {-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn {from {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% {-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes showTab{from {opacity: 0; top: -1rem} to {opacity: 1; top: 0;} } @keyframes showTab{from {opacity: 0; top: -1rem} to {opacity: 1; top: 0;} } @-webkit-keyframes hue {from {-webkit-filter: hue-rotate(0deg); } to {-webkit-filter: hue-rotate(-360deg); } } @-webkit-keyframes shine {to {background-position: 200% center; } } @keyframes shine {to {background-position: 200% center; } } /* ========================================================================== Hubspot + Hosting Platform Overwrites + SEO ==========================================================================*/ /* SEO QUICK OVERRIDES */ .btxt-p {font-size: 1.8rem;font-weight: 300;line-height: 1.6em} .btxt-h1 {position: relative; font-size: 3rem; font-weight: 600;} .btxt-h2 {position: relative;font-weight: 600;font-size: 4.2rem;text-transform: uppercase;letter-spacing: 0.5rem;margin:0;} .btxt-h3 {position: relative; font-size: 2.4rem; font-weight: 300;font-family: var(--font-secondary); } .btxt-h4 {position: relative; font-size: 2.2rem; font-weight: 600; line-height:1.4rem;} .btxt-h5 {position: relative; font-size: 2rem;} .btxt-h6 {position: relative; font-size: 1.8rem; font-weight: 600;} /* ========================================================================== Breakpoints ==========================================================================*/ @media (min-width: 1280px) { } @media (min-width: 1024px) and (max-width: 1279px) { .type__pg-header .block-left { transform: scale(0.9); bottom: 35%; left: 5%;} } @media (min-width: 900px) and (max-width: 1023px) { .product__accordion--title {color: #202c3e;font-weight: 100;} .product__accordion--desc img {max-width: 70%;margin-bottom: 20%;} .product__accordion--desc p { padding: 0 5% 15% 5%;} .product__accordion--item input[type=radio]:checked ~ .product__accordion--desc {height: auto; } .product__accordion--item input[type=radio]:checked ~ label { padding: 20px 0; border-top: 10px solid #9f2eb2;margin-top: 0;} .product__accordion--item label::after {top: 40%; right: 10%;} .product__accordion--item input[type=radio]:checked ~ label h3 {color: var(--blue30); font-size: 2em; font-weight: 100;} .span12 .hs-col.col-left h1 {margin: 8% 0 0 0%;} .span12 .hs-col.col-left h3 {margin: 0 0 10% 0%;} .span12 .hs-col.col-left h6 {margin: 30px auto;max-width: 280px;} .ply-btn {margin: 0 auto;} #hs_cos_wrapper_widget_1500406429585 .hs-col.col-right {padding:0} .white-bg {border-bottom:none} .product__accordion--item input[type=radio]:checked ~ label {border-top:none} .product__accordion--item input[type=radio]:checked ~ label h3 { color: var(--blue30); font-size: 1.5em; font-weight: 500;} #feature-quotes p {display:none} .type__pg-header .block-left {transform: scale(0.8); width: 100%;left: 0;} .gblNavPrimary__menu {padding: 0;} .gblNavBar {padding: 3em 1.5em;} .gblNavDropdown {padding: 8rem 0 5rem;} .gblNavDropdown__icon {display:none} .gblNavPrimary__item .gblNavDropdown .gblNavDropdown__menu a, .gblNavBar.is-fixed .gblNavPrimary__item .gblNavDropdown .gblNavDropdown__menu a {background:none} } @media (min-width: 600px) and (max-width: 899px) { #type__gbl-nav {z-index: 1001;} .gblNavPrimary__menu{display:none; } .gblNavActions__toggleButton { top: 0px; right: -40px; opacity: 1; filter:brightness(4)} .gblNavBar.is-fixed .gblNavActions__toggleButton {filter:brightness(1)} .mm-menu-open .gblNavBar .gblNavPrimary { background-color:transparent;border-bottom:0px solid} .mm-menu .social-icons { position: absolute; bottom: 0; left: 0; display: block; right: 10%; z-index: 2; opacity: 1; background: var(--gray10); -webkit-transition: all .2s ease; transition: all .2s ease; } /* .mm-menu .gblNavActions__cta { position: absolute; bottom: 20%; left: 20%; display: block; right: 30%; z-index: 2; opacity: 1; -webkit-transition: all .2s ease; transition: all .2s ease; } */ .mm-menu .mm-level-overlay .gblNavActions__cta, .mm-menu .mm-level-overlay .social-icons {z-index: 1; opacity: 0;} .mm-menu-open .gblNavActions__toggleButton g {fill: var(--gray50);} .mm-menu-open .gblNavBar {z-index:200} /* .mm-menu-open .mm-menu-pusher::after {z-index: 0} */ .mm-menu-open .gblNavActions__cta {display:none} .type__pg-header .block-left { transform: scale(0.75); width: 100%; left: 0; bottom: 33%;} } /* phone-only */ @media (max-width: 599px) { :root {font-size: 50%;} .type__pg-header h2 {font-size: 3.5rem;} .type__pg-header .block-left {z-index: 1;position: absolute;display: inline-block;top: 10%;left: 0;width: 100%;text-align: center;padding: 0 10%;} #alt-logo {display:inline-block; width: inherit; margin: 20px 0 15px 25px;} #gblNavMobileContainer { position: absolute; top: 0; right: -210%; width: 100%; max-width: none; } .gblNavActions, #main-logo, .gblNavBar::before {display: none} .btn__slant-lft::after, .btn__slant-rt::after {display:none} .type__blockquote .btn__slant-lft, .type__pg-header .btn__slant-lft {width: 100%; padding: 2rem 1.5rem;font-size: 2rem;white-space: normal;} .type__blockquote .btn__slant-lft { border: 3px solid var(--blue50) !important; background-color: var(--blue50);} .type__pg-header .btn__slant-lft {display:none} .type__pg-header .btn__slant-rt { border: 3px solid var(--orange30) !important;} .type__blockquote .btn__slant-rt{ border: 3px solid var(--blue30) !important;} .btn__slant-lft, .btn__slant-rt { width: 100%; padding: 2rem 2rem 2rem 0; font-size: 2rem; margin: 0; display: block;margin: 0 0 10px;} .btn__slant-rt.btn--vid { width: 250px; margin:0 auto; padding: 2rem;} .btn--vid span { position: relative;display:block} .btn--vid span::after{position: absolute; top: -5px;right: 0;border-radius: 50%;} h2 { font-size: 3.8rem; letter-spacing: 0.3rem; } .grid { grid-gap: 10px;} .mm-menu ul li > a {font-size: 2.2rem} .grid__container--3x12 {grid-column: col-start 2 / span 14;} .grid__container--1x7, .grid__container--9x6 {grid-column: col-start 3 / span 12;} .type__cta .large-cta p { line-height: normal; padding: 0 2rem; } .u-link--vid { white-space: nowrap; display: inline-block; font-size: 2rem; } .u-link--vid::after {} .type__footer {} .type__footer .grid__container--2x3 { grid-column: col-start 3 / span 12; } .type__footer .gblNavPrimary__logo { max-width: unset; position: relative; margin: 0; display: inline-block; -webkit-transform: none; transform: none; margin: 0rem 4rem 4rem; } .type__footer .gblNavPrimary__logo img{ width: 100%; } .type__footer .grid__container--2x2, .type__footer .grid__container--4x2 { grid-column: col-start 3 / span 12; } .type__footer .grid__container--4x2{ padding-bottom: 3rem; } .type__footer .grid__container--8x2, .type__footer .grid__container--12x2 {grid-column: col-start 3 / span 5;} .type__footer .grid__container--10x2, .type__footer .grid__container--14x3 {grid-column: col-start 10 / span 6;} .type__footer .footer__ad-ccbvid p{text-align: left;font-size: 1.9rem;margin: 1.5rem 0 2rem 0;font-weight: 300;line-height: 1.6em;} .type__footer .footer__ad-ccbvid img{-webkit-transform: scale(1);transform: scale(1);-webkit-filter: brightness(1.5);filter: brightness(1.5);border-radius: 0;-webkit-transition: -webkit-transform 0.2s ease;transition: -webkit-transform 0.2s ease;transition: transform 0.2s ease;transition: transform 0.2s ease, -webkit-transform 0.2s ease;width: 80%;margin: 0 auto; border: 10px solid var(--gray50);} .type__footer li a { font-size: 1.8rem; font-weight: 400; line-height: 2rem; } .type__footer h6{ margin: 2rem 0 2rem; font-size: 2.2rem; } .gblNavPrimary {width: 100%;margin: 0;display: block;} .gblNavPrimary__logo {width: inherit;max-width: 50px;position: relative;margin: 0;display: inline-block;-webkit-transform: none;transform: none;} .gblNavActions__toggleButton {top: -20px;right: 20px;opacity: 1;} .gblNavBar .gblNavActions__toggleButton g {fill: var(--white); -webkit-transform:scale(0.8); transform:scale(0.8)} .invert-head .gblNavBar .gblNavActions__toggleButton g {fill: var(--gray60);} .gblNavBar{ -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; padding: 0; position: absolute; top: 0; } .gblNavBar .gblNavActions__ctaLink {background-color: #72D5FF00;display: block;text-align: center;text-transform: uppercase;font-weight: 400;border: 2px solid var(--gray50);color: var(--gray50);} .gblNavBar:hover .gblNavActions__ctaLink {background-color: #72D5FF00;} .gblNavBar.is-fixed .gblNavActions__toggleButton g {fill: var(--gray50)} .gblNavBar.is-fixed .gblNavActions__toggleButton { right: 25px;top: 25px;position: absolute; } .gblNavBar.is-fixed .gblNavPrimary__logo{ width: inherit; overflow: visible; -webkit-transform: none; transform: none; } .gblNavBar.is-fixed .gblNavPrimary { background-color: var(--white); border-bottom: 1px solid var(--gray20); } .gblNavBar.is-fixed .gblNavActions__ctaLink { background-color: var(--blue30); display: block; text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: 0.2rem; border: 2px solid var(--blue30); color: var(--white); font-size: 2.5rem; padding: 2.2rem 2rem; } .mm-menu-open .gblNavBar .gblNavPrimary { background-color:transparent;border-bottom:0px solid} .mm-menu .social-icons { position: absolute; bottom: 0; left: 0; display: block; right: 10%; z-index: 2; opacity: 1; background: var(--gray10); -webkit-transition: all .2s ease; transition: all .2s ease; } .mm-menu .gblNavActions__cta { position: absolute; bottom: 20%; left: 20%; display: block; right: 30%; z-index: 2; opacity: 1; -webkit-transition: all .2s ease; transition: all .2s ease; } .mm-menu .mm-level-overlay .gblNavActions__cta, .mm-menu .mm-level-overlay .social-icons {z-index: 1; opacity: 0;} .mm-menu-open .gblNavActions__toggleButton g {fill: var(--gray50);} .mm-menu-open .gblNavBar {z-index:200} .mm-menu-open .mm-menu-pusher::after {z-index: 0} .u-mobile--hidden {display: none} .type__cta .large-cta a::after {height: 30px;width: 30px;-webkit-filter: saturate(0);filter: saturate(0);} .footer__ad-ccbvid img{text-align: center;display: block;cursor:pointer;} .footer__ad-ccbvid img:hover {cursor:pointer;} .footer__ad-ccbvid .wistia_click_to_play {width:auto !important} #type__gbl-nav.no-head .gblNavPrimary {display:block} } /* ========================================================================== Form ==========================================================================*/ .global-form .hs-button.primary.large,.global-form .hs-button.primary.large:hover{background-color:var(--gray60);color:#fff;border-color:var(--gray60)} .global-form label{float:none;} .wistia_responsive_padding{border:10px solid rgba(255, 255, 255, 0);border-radius:2px;-webkit-box-shadow:-100px 20px 100px rgba(0, 0, 0, 0.14);box-shadow:-100px 20px 100px rgba(0, 0, 0, 0.14);background-color:#fff;} .global-form .hs-button.primary.large:hover{background-color:#dfdfdf;color:#675a69;border-color:#dfdfdf;} .global-form input[type="text"],.global-form input[type="email"],.global-form input[type="tel"],.global-form select{ border: 0px solid #dfdfdf; border-bottom: 1px solid #222; color: #ffffff; font-size: 1.7rem; line-height: 4rem; margin-bottom: 9px; padding: 0 0 0 10px; max-width: 500px; display: block; letter-spacing: normal; text-indent: 0.25em; font-weight: normal; border-radius: 0;} body form.hs-form fieldset[class*="form-columns"] .hs-input {width:100%} .global-form .hs-form-field, .global-form .hs-form fieldset {margin: 0;} .global-form .hs-form {overflow: hidden; overflow-y: hidden; max-height: 90vh;} .global-form .input, .global-form .hs-form-field {position:relative;} .global-form .hs-form-field {margin:0} legend {display:none !important;} .js .gs--open label {opacity: 1; transition-duration: 0.5s; color: #a2a19e; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1rem; padding-top: 1rem; font-weight: 600;} li.hs-form-radio {display: inline-block; float: left; padding: 0px; margin:0px; } .global-form .contact-form label {display:block; text-align:left; font-size: 16px; font-weight: 300; position:relative;} .global-form .hs-form-field {margin:0 0 20px;} .global-form .hs_submit { margin:0;padding:0; display: block; width: 100%; clear: both; } .global-form .hs-form-radio label {float:left; margin:0; overflow:auto; background-color: #ffffff;} .global-form .hs-form-radio label span {text-align: center; font-size: 15px; padding: 12px 34px; display: block; position:relative; border:1px solid #dfdfdf; } .global-form .hs-form-radio label span:hover {cursor:pointer;} .global-form .hs-form-radio label input {position:absolute; top:-30px; } .global-form .hs-form-radio input:checked + span {color: #2196F3;border:1px solid #2196F3; } .global-form .hs-form-radio input:checked + label {border:1px solid #2196F3;} .global-form .hs-form-required {display:none;} .global-form form {position:relative} .global-form .mod-form {padding:10%; margin: -120px 0 0 10%; border-radius:2px;box-shadow: 0 50px 100px rgba(32,44,62,0.35);} .global-form ul.hs-error-msgs.inputs-list label, .global-form ul.hs-error-msgs.inputs-list {display:none !important} .global-form .hs-input.invalid.error {border-color: #ff0600;} .global-form label {float:left; font-size: 0.9em;font-weight: 400; margin: 0.5em 0; display: inline-block;} .global-form .hs-input {border-radius:5px; padding:0 20px;} .hs_submit input, .global-form .hs-button.primary.large{padding: 20px 40px; margin: 25px auto; outline: none; font-size: 2rem; font-weight: 500; letter-spacing: 0px; line-height: inherit; -webkit-appearance: none; border-radius: 3px;} .global-form select {height:47px; background-color: #FFF0; border-color:#fff0;border-radius:0} h5.signup {font-size: 1.8em;font-weight: 400;line-height: 1.3em;/*border-bottom: 5px solid #F9C046;*/padding: 0 0 1em 0;margin: 0 0 20px;text-align:center;} .global-form form.hs-form fieldset[class*="form-columns"] .hs-input:focus { border: 0px solid #5FC2FF; color: #ffffff; -webkit-appearance: none;} body .global-form .hs-button.primary, body .global-form input[type="submit"], body input[type="button"], .global-form textarea {padding: 15px 30px; background: #000; border-radius: 30px; /*border: 2px solid #5FC2FF;*/ color: #FFF;-webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-appearance: none;} body .hs-button.primary:hover, body .global-form input[type="submit"]:hover, body .global-form input[type="button"]:hover, body .global-form .hs-button.primary:focus, .global-form textarea:focus {background:#5FC2FF; -webkit-appearance: none;} .global-form .hs-form-field { margin: 0 } .global-form .modal { cursor: pointer; font-weight: 400 } .global-form .btn { margin: 0; padding: 0; cursor: pointer; border: 0; background: 0 } .global-form .btn:focus { outline: 0 } .global-form .btn--gs { font-size: 1.5em } .global-form .btn--hidden { pointer-events: none; opacity: 0 } .global-form input { border: 0; background: transparent; border-radius: 0; -webkit-appearance: none } .global-form input:focus { outline: 0 } .global-form a, .global-form .btn { text-decoration: none; color: #d17c78; outline: 0 } .global-form .hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none } .global-form .icon { display: block; width: 1.5em; height: 1.5em; margin: 0 auto; fill: currentColor } .wrap--blur { -webkit-filter: blur(5px); filter: blur(5px); -webkit-transition: -webkit-filter .5s .1s; transition: -webkit-filter .5s .1s; transition: filter .5s .1s; transition: filter .5s .1s, -webkit-filter .5s .1s } .gs.global-form { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center } .js .gs.global-form { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100vh } .js .gs::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(92,92,92,0.98); } .js .gs--open .btn--gs-close { display: block } .global-form .btn--gs-close { opacity: 0.9; position: fixed; top: 40px; right: 40px; -webkit-transition: opacity .3s; transition: opacity .3s; width: 50px; background-image: url(https://cdn2.hubspot.net/hubfs/857538/CCB/_imgs/_global/icon-close--124x124.png); height: 50px; background-size: 50px; background-repeat: no-repeat; z-index: 101; filter: brightness(1.5); display: none; } .global-form .gs__form { margin: 5em 0; padding: 2em; border-radius: 2px; transition: all .5s } .global-form input::-webkit-input-placeholder { color: #4a319e } .global-form input::-moz-placeholder { opacity: 1; color: #4a319e } .global-form input:-ms-input-placeholder { color: #4a319e } .global-form input::-webkit-gs-cancel-button, .global-form input::-webkit-gs-decoration { -webkit-appearance: none } .global-form input::-ms-clear { display: none } .js .gs-body--move .btn--gs { pointer-events: none; opacity: 0 } .js .gs--open .gs__form { opacity: 1; box-shadow: 0 5px 10px rgba(32, 44, 62, 0.1); background-color: #fff; transition: all .5s } .js .gs { pointer-events: none } .js .gs--open { pointer-events: auto } .js .gs::before { opacity: 0; transition: opacity .5s } .js .gs--open::before, .js .gs--open .form-title { opacity: 1 } .btn--gs-close { opacity: 0; transition: opacity .5s } .gs--open .btn--gs-close { opacity: 1 } .global-form select, .global-form .gs__info, .global-form .signup { opacity: 0; transform: translate3d(0, 50px, 0); transition: opacity .4s, transform .4s } .gs--open select, .gs--open .gs__info, .gs--open .signup { opacity: 1; transform: translate3d(0, 0, 0) } .gs--open select:first-child { transition-delay: .15s } .gs--open select:nth-child(2) { transition-delay: .2s } .js .global-form input { transform: scale3d(0, 1, 1); transform-origin: 0 50%; transition: transform .3s } .js .global-form label { opacity: 0; transition: transform .2s; color: var(--blue20); } .js .gs--open input { transform: scale3d(1, 1, 1); transition-duration: .5s } .js .gs--open label { opacity: 1; transition-duration: .5s } /* ========================================================================== Breakpoints - Form ==========================================================================*/ @media (max-width: 599px) { .btn--gs-close { font-size: 1.25em; top: 60px } .global-form input[type="text"],.global-form input[type="email"],.global-form input[type="tel"],.global-form select{ line-height: 20px; margin-bottom: 5px; max-width: 500px; display: block; width:100% !important; } .global-form .hs-form { max-width: 610px; margin: 0px auto 0; text-align: center; } .global-form .hs-form fieldset.form-columns-2 .hs-form-field { width: 100% !important; float: none !important; } .global-form ul.hs-error-msgs.inputs-list {display:none !important} .global-form .btn--gs-close {top:10px !important;right:10px !important;width:30px !important;height:30px !important;background-size:contain !important;} .global-form .hs_submit input, .global-form .hs-button.primary.large{padding:10px 30px;margin:10px auto;} .global-form fieldset.form-columns-2 .global-form .hs-form-field, .global-form fieldset.form-columns-1 .hs-form-field {text-align:left} /* body .global-form form.hs-form fieldset[class*="form-columns"] .hs-input{margin: 0; border-bottom: 1px solid #fff; border-radius: 0;} */ .global-form h5.signup {font-size: 1.5em;font-weight: 500;padding: 0;width: 90%;} .global-form .hs-form .js label {font-size: 1.8rem !important;} .global-form label{font-size:0.8em;} .global-form .input, .global-form .hs-form-field { margin: 0 !important;} .global-form .hbspt-form{width:80%;} .gs.global-form select{border: 2px solid var(--gray60);} }