/* Theme Name: Apptentive Theme URI: http://www.drivendevelopment.com/ Description: WordPress theme for Apptentive. Author: Driven Development Version: 1.0 */ @import url(default.css); /** * Defaults and Resets */ *, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} html {font-size: 62.5%; -webkit-text-size-adjust: none;} html, body {margin: 0; padding: 0; background: #fff; overflow-x: hidden;} body {font-family: 'Lato', Arial, Verdana, Sans-Serif; font-size: 20px; line-height: 30px; color: #575757;} form {margin: 0; padding: 0;} img {border: 0; max-width: 100%; height: auto;} td {vertical-align: top;} strong {font-weight: bold;} p {margin: 0 0 20px 0;} p:last-child {margin: 0;} a {transition: 0.25s ease; text-decoration: none; color: #fe414d;} a:hover {color: #000;} h1, h2, h3, h4, h5, h6, .heading {font-family: 'Raleway', Arial, Verdana, sans-serif; font-weight: normal;} /** * General */ .clearBoth, .clear {clear: both; height: 0px; font-size: 0; line-height: 0; display: block;} .clearfix {zoom: 1;} .clearfix:after {content: " "; display: block; font-size: 0; line-height: 0; height: 0; clear: both; visibility: hidden;} .hidden {height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px;} .screen-reader-text {clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px;} a#skip, a#skip:hover, a#skip:visited {position: absolute; left: 0px; top: -500px; width: 1px; height: 1px; overflow: hidden; padding: 10px; background: #3f3f3f; display: block; color: #fff;} a#skip:active, a#skip:focus {position: fixed; width: auto; height: auto; top: 10px; left: 10px; z-index: 10000;} nav ul {margin: 0; padding: 0; list-style-type: none;} /** * Layout */ #page {min-width: 320px; padding-top: 90px;} #header {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: 0.25s ease; background: #fff;} #header > div {height: 90px; position: relative; z-index: 10; background: #fff;} #header .logo {position: absolute; top: 30px; left: 40px;} #header nav {font-family: 'Raleway', Arial, Verdana, sans-serif; font-size: 17px; line-height: 21px; float: right; margin: 28px 80px 0 0; font-weight: 300;} #header nav > ul > li {float: left; margin: 0 0 0 60px; transition: 0.25s ease;} #header nav > ul > li:not(.product-menu) {position: relative;} #header nav > ul > li:not(.product-menu) .mega-menu {top: 62px;} #header nav > ul > li > a {text-transform: uppercase; font-weight: bold; letter-spacing: 1px; color: #232a49; text-decoration: none; display: block; padding: 12px 0; position: relative;} #header nav > ul > li.active > a {color: #478fcc;} #header nav > ul > li.demo {position: absolute; top: 28px; right: 40px; opacity: 0; pointer-events: none;} #header nav > ul > li.demo > a {padding: 12px 25px; background: #478fcc; border-radius: 50px; color: #fff; font-size: 18px; text-transform: none; letter-spacing: normal;} #header nav > ul > li.demo > a:focus, #header nav > ul > li.demo > a:hover {background: #1a3e5c;} #header nav > ul > li.login > a {color: #f04b5a; padding-left: 28px; background: url(images/v2/icon-login.svg) no-repeat left center;} /* #header nav > ul > li.login > a:focus, #header nav > ul > li.login > a:hover {color: #000;} */ #header nav > ul > li.active > ul, #header nav > ul > li.active > .mega-menu {opacity: 1; pointer-events: all; z-index: 1;} #header nav > ul > li.active.menu-item-has-children > a:before, #header nav > ul > li.active.product-menu > a:before {position: absolute; content: ""; left: calc(50% - 12px); top: 60px; border: solid 12px transparent; border-top-color: #fff; width: 12px; height: 12px; z-index: 10;} #header nav > ul > li > ul {position: absolute; top: 62px; left: -30px; background: #232a49; color: #fff; padding: 30px 30px; width: 200px; font-size: 15px; line-height: 19px; opacity: 0; pointer-events: none; z-index: 0; transition: 0.5s ease;} #header nav > ul > li > ul li + li {margin-top: 10px;} #header nav > ul > li > ul a {color: #fff; text-decoration: none;} #header nav > ul > li > ul a:focus, #header nav > ul > li > ul a:hover {color: #02b2d3; text-decoration: underline;} #header .mega-menu {position: absolute; top: 90px; left: 0; right: 0; padding: 50px 40px; background: #232a49; color: #fff; opacity: 0; pointer-events: none; z-index: 0; transition: 0.5s ease;} #header .mega-menu:before {position: absolute; content: ""; top: 0; right: -10000px; bottom: 0; left: -10000px; background: #232a49; z-index: 0;} #header .mega-menu .headline {margin: 0 0 15px 0; font-weight: bold; text-transform: uppercase; letter-spacing: 2px;} #header .mega-menu a {color: #fff;} #header .mega-menu a:focus, #header .mega-menu a:hover {color: #02b2d3; text-decoration: underline;} #header .mega-menu .links {margin: 0; padding: 0; list-style-type: none; column-count: 2; column-gap: 50px; font-size: 15px; line-height: 19px;} #header .mega-menu .links li + li {margin-top: 15px;} #header .mega-menu .links a {display: inline-block; position: relative; padding: 2px 0 0 35px; background: url(images/v2/solutions-customer-acquisition.svg) no-repeat left top; background-size: 25px auto; min-height: 25px;} #header .mega-menu .links a img {position: absolute; top: 0; left: 0; width: 25px;} #header .mega-menu .links .reputation-management a {background-image: url(images/v2/solutions-reputation-management.svg);} #header .mega-menu .links .customer-loyalty a {background-image: url(images/v2/solutions-customer-loyalty.svg);} #header .mega-menu .links .roadmap a {background-image: url(images/v2/solutions-roadmap.svg);} #header .mega-menu .links .retargeting a {background-image: url(images/v2/solutions-retargeting-v3.svg);} #header .mega-menu .links .employee-experience a {background-image: url(images/v2/solutions-employee-experience.svg);} #header .mega-menu .links .fan-signals a {background-image: url(images/v2/features-fan-signals.svg);} #header .mega-menu .links .channels a {background-image: url(images/v2/features-channels.svg);} #header .mega-menu .links .ratings-and-reviews a {background-image: url(images/v2/features-ratings-and-reviews.svg);} #header .mega-menu .links .analytics a {background-image: url(images/v2/features-analytics.svg);} #header .mega-menu .links .in-app-messaging a {background-image: url(images/v2/features-in-app-messaging.svg);} #header .mega-menu .links .actions a {background-image: url(images/v2/features-actions.svg);} #header .mega-menu .links .integrations a {background-image: url(images/v2/features-integrations.svg);} #header .mega-menu .links .apptentive-for-web a {background-image: url(images/v2/features-apptentive-for-web.svg);} #header .mega-menu .links .covid-19 a {background-image: url(images/v2/solutions-covid-19.svg);} #header .mega-menu .generic-sub-nav {width: 560px; display: flex; flex-wrap: wrap; position: relative; left: -440px; font-size: 16px; line-height: 20px; justify-content: right;} #header .mega-menu .generic-sub-nav .callout {width: 350px; border-right: solid 1px #285b86; padding: 0 50px 0 0;} #header .mega-menu .generic-sub-nav .callout .thumb {display: block; position: relative; margin: 0 0 20px 0;} #header .mega-menu .generic-sub-nav .callout .thumb img {display: block;} #header .mega-menu .generic-sub-nav .callout .thumb .label {background: rgba(71,143,204,0.80); position: absolute; left: 0; bottom: 0; right: 0; padding: 15px 20px; font-weight: bold; text-transform: uppercase;} #header .mega-menu .generic-sub-nav .callout a:focus .thumb .label, #header .mega-menu .generic-sub-nav .callout a:hover .thumb .label {color: #fff;} #header .mega-menu .generic-sub-nav .right {width: 210px; padding: 0 0 0 50px;} #header .mega-menu .generic-sub-nav .right > ul > li > a {display: none;} #header .mega-menu .generic-sub-nav .right li + li {margin-top: 10px;} #header .resources-menu .mega-menu .generic-sub-nav .callout .thumb .label:before {position: absolute; content: ""; width: 22px; height: 23px; top: 15px; right: 20px; background: url(images/v2/icons/download.png) no-repeat center center;} #header .product-sub-nav {max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; position: relative;} #header .product-sub-nav > .left {width: 65%; padding: 0 50px 0 0;} #header .product-sub-nav > .left .container {display: flex;} #header .product-sub-nav > .left .container > .links {width: 65%; padding: 0 50px 0 0;} #header .product-sub-nav > .left .container > .video {width: 35%; font-size: 16px; font-weight: normal;} #header .product-sub-nav > .left .container > .video img {display: block; margin: 0 0 10px 0;} #header .product-sub-nav > .right {width: 35%; padding: 0 0 0 50px; border-left: solid 1px #285b86;} #header .product-sub-nav > .right .links a:focus, #header .product-sub-nav > .right .links a:hover {color: #69cbb0;} #header .product-sub-nav.no-feature > .left {width: 50%;} #header .product-sub-nav.no-feature > .right {width: 50%;} #header .product-sub-nav > .left .container > .links {width: 100%; padding: 0;} #header .toggle-menu {display: none; position: absolute; top: 23px; right: 40px;} body.admin-bar #header {top: 32px;} #alert-bar {background: #f5f6f8; font-size: 18px; line-height: 24px; padding: 10px 0; position: relative; visibility: hidden; pointer-events: none; position: fixed; left: 0; right: 0; bottom: 0; box-shadow: 0 0 20px 0 rgba(0,0,0,0.2); z-index: -1;} /* position: absolute; top: -1000px; */ #alert-bar .container {display: flex; justify-content: center; align-items: center;} #alert-bar .icon {padding-right: 20px; max-width: 70px;} #alert-bar .close {position: absolute; top: calc(50% - 15px); width: 30px; height: 30px; font-size: 20px; line-height: 30px; right: 5px; background: none; border: none; cursor: pointer;} #alert-bar .close:focus, #alert-bar .close:hover {color: #fe414d;} body.alert-bar #alert-bar {visibility: visible; pointer-events: all; z-index: 1000;} /* position: relative; top: auto; left: auto; margin-bottom: 90px; */ /*body.alert-bar #page {padding-top: 0;}*/ body.sticky-header #header {box-shadow: 0 0 20px 0 rgba(0,0,0,0.2); top: 0 !important;} #banner {background: url(images/banners/home.jpg) no-repeat center center; background-size: cover; margin-top: -100px; text-align: center; font-size: 24px; line-height: 32px; font-weight: 300; color: #585858;} #banner > div {min-height: 340px; padding-top: 150px; padding-bottom: 20px;} #banner > div.full-width {min-height: 0; padding: 0 1000px;} #banner p {margin: 0 0 30px 0;} #banner .heading {margin: 0 0 20px 0; font-size: 52px; line-height: 56px; color: #dc2636; font-style: normal;} #banner .jump-nav {background: rgba(250,248,246,0.7);} #footer {padding-bottom: 26px; background: #ff414d; font-size: 14px; line-height: 18px; color: #9d9b9b; overflow: hidden; position: relative;} #footer > div {background: #f5f6f8; box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);} #footer > div > div {padding-top: 70px; padding-bottom: 40px;} #footer a {color: #575757; text-decoration: none;} #footer a:focus, #footer a:hover {text-decoration: underline;} #footer .upper {display: flex; flex-wrap: wrap; border-bottom: solid 1px #ccc; padding: 0 0 30px 0; margin: 0 0 20px 0; min-height: 280px;} #footer .upper > .left {width: 70%; font-family: 'Raleway', Arial, Verdana, sans-serif;} #footer .upper > .left > ul {float: left; width: 25%; padding-right: 30px;} #footer .upper > .left > ul > li > a {color: #232a49; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; font-size: 16px;} #footer .upper > .left > ul > li > ul > li:first-child {margin-top: 10px;} #footer .upper > .left > ul > li > ul > li + li {margin-top: 8px;} #footer .upper ul {margin: 0; padding: 0; list-style-type: none;} #footer .upper > .right {width: 30%; position: relative;} #footer .upper > .right .social {position: absolute; right: 0; bottom: 0;} #footer .upper .newsletter {padding: 30px 20px; background: #fff; border-radius: 20px;} #footer .upper .newsletter .headline {margin: 0 0 10px 10px; font-size: 16px; line-height: 20px; color: #ff414d; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;} #footer .upper .newsletter .form {position: relative; background: #f5f6f8; border-radius: 30px; overflow: hidden; min-height: 42px;} #footer .upper .newsletter .form [type="text"], #footer .upper .newsletter .form [type="email"] {width: 100%; background: none; border: 0; padding: 11px 15px; font-size: 16px; line-height: 20px; height: auto; margin: 0;} #footer .upper .newsletter .form .mktoButton {font-size: 0; width: 45px !important; padding: 0 !important; height: 42px; position: absolute; top: 0; right: 0; bottom: 0; -webkit-appearance: none; border-radius: 0 !important; border: none; background: #e3edf7; color: #478fcc;} #footer .upper .newsletter .form .mktoButton:before {position: absolute; content: ""; font-family: 'FontAwesome'; content: "\f00c"; font-size: 20px; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 42px;} #footer .upper .newsletter .form .mktoForm {width: 100% !important; padding: 0 !important;} #footer .upper .newsletter label {clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px;} #footer .upper .newsletter .success, #footer .upper .newsletter .submitted-message {color: #e84958; font-weight: bold; background: #fff; display: none; text-align: center; line-height: 42px;} #footer .upper .newsletter input#Email {width: 100% !important; margin: 0 !important;} #footer .upper .newsletter .mktoForm .mktoFormCol {float: none; width: 100%; margin: 0 !important;} #footer .upper .newsletter .form .mktoButtonRow {position: static;} #footer .upper .newsletter .mktoForm .mktoFieldWrap, #footer .upper .newsletter .mktoForm .mktoField {float: none;} #footer .upper .newsletter .mktoForm .mktoClear, #footer .upper .newsletter .mktoForm .mktoOffset, #footer .upper .newsletter .mktoForm .mktoGutter {display: none;} #footer .upper .newsletter .mktoForm .mktoButtonRow {display: block;} #footer .upper .newsletter .mktoForm .mktoButtonWrap {margin: 0 !important;} #footer .lower a {color: #9d9b9b;} #footer .lower ul {margin: 0; padding: 0; list-style-type: none; display: inline;} #footer .lower ul li {display: inline; margin-left: 30px;} #alerts {background: #df2637; font-size: 15px; line-height: 20px; font-weight: bold; text-align: center; color: #fff;} #alerts > div {padding-top: 20px; padding-bottom: 15px; min-height: 55px;} #alerts strong {font-weight: 900;} #alerts .slides {margin: 0; padding: 0; list-style-type: none;} #alerts .slides li {display: none;} #alerts a {color: #fff;} .section {background: no-repeat center center; background-size: cover;} .section.white {background-color: #fff;} .section.beige {background-color: #f4f0eb;} .section.gutter > div:first-child {padding-top: 70px; padding-bottom: 70px;} .section.extra-large-gutter > div {padding-top: 100px; padding-bottom: 100px;} .section > div {position: relative; max-width: 1460px; padding: 0 40px; margin: 0 auto;} .section .full-width {padding: 0 1000px; margin: 0 -1000px; min-height: 0; max-width: 100000px;} .section .border-top {border-top: solid 1px #d9d6d1;} .section .see-more-banner {padding: 20px 1000px; background: #f4f1ec; text-align: center; line-height: 20px;} .section .section > div {padding-left: 0; padding-right: 0;} .section.last-section > div:first-child {padding-bottom: 150px;} .section.light-text h1, .section.light-text h2, .section.light-text h3, .section.light-text h4, .section.light-text .heading, .section.light-text .intro {color: #fff;} .medium-width {max-width: 850px; margin: 0 auto;} /** * Miscellaneous/components */ .toggle-menu {color: #232a49; font-size: 18px; line-height: 20px; font-weight: 600;} .toggle-menu > span {display: inline-block; width: 32px; height: 26px;} .toggle-menu > span span {display: block; width: 32px; height: 4px; margin-bottom: 6px; background: #232a49; transition: .3s ease;} .toggle-menu.active {color: #232a49;} .toggle-menu.active > span {-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);} .toggle-menu.active > span span {background: #232a49;} .toggle-menu.active > span span:nth-child(1) {-webkit-transform: translateY(7px); -ms-transform: translateY(7px); transform: translateY(7px);} .toggle-menu.active > span span:nth-child(2) {opacity: 0;} .toggle-menu.active > span span:nth-child(3) {-webkit-transform: rotate(-90deg) translateX(13px); -ms-transform: rotate(-90deg) translateX(13px); transform: rotate(-90deg) translateX(13px);} .aligncenter {margin: 0 auto;} img.aligncenter {display: block;} .flexslider {touch-action: pan-y !important; -ms-touch-action: pan-y !important;} .flexslider ul {margin: 0; padding: 0; list-style-type: none;} .generic-content {margin: 0 auto;} .generic-content h2 {margin: 0 0 20px 0; font-size: 36px; line-height: 34px; font-weight: bold;} .generic-content h3 {margin: 0 0 10px 0; font-size: 25px; line-height: 29px; font-weight: bold;} .generic-content h4 {margin: 0; font-size: 18px; line-height: 22px; font-weight: bold;} .generic-content p + h2 {margin-top: 40px;} .generic-content-grid {display: flex; flex-wrap: wrap; margin: 0 -20px -60px -20px;} .generic-content-grid > div {width: 33.3333%; padding: 0 20px 60px 20px;} .generic-content-grid h2 {margin: 0 0 10px 0; font-size: 30px; line-height: 34px; color: #333f50;} .intro {font-size: 18px; line-height: 22px; font-weight: 300; text-align: center; margin: 0 auto 50px auto; max-width: 880px;} .intro:last-child {margin-bottom: 0;} .intro .heading {margin: 0 0 20px 0; font-size: 38px; line-height: 44px; color: #2d2d2d;} .intro.large-copy {font-size: 24px; line-height: 28px;} .callouts {margin: 0 -20px 10px -20px; text-align: center;} .callouts > div {display: inline-block; vertical-align: top; width: 33.3333%; padding: 0 30px 30px 30px; font-size: 18px; line-height: 27px; font-weight: 300; text-align: center;} .callouts > div > div {text-align: left;} .callouts > div > div > a {color: #434646;} .callouts > div > div > a:hover {color: #dc2636;} .callouts > div > div > a:hover .icon img {background: rgba(255,255,255,0.4);} .callouts h3 {margin: 0; font-size: 21px; line-height: 25px; font-weight: bold;} .callouts h4 {margin: 0; font-size: 21px; line-height: 25px; font-weight: 300; text-align: center;} .callouts ul:last-child {margin-bottom: 0;} .callouts .icon img {display: block; margin: 0 auto 25px auto; border-radius: 50%; transition: background 0.25s ease;} .callouts .heading {margin: 0 0 15px 0; text-align: center; font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 18px; line-height: 22px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold;} .callouts .blue .heading, .callouts .blue .accent {color: #5ca2b4;} .callouts .red .heading, .callouts .red .accent {color: #e84958;} .callouts .green .heading, .callouts .green .accent {color: #71b095;} .callouts.four-wide > div {width: 25%;} .callouts.five-wide > div {width: 20%;} .callouts.left-align-text > div > div {text-align: left;} .callouts.colors .heading {color: #5ca2b4;} .callouts.colors > div:nth-child(2) .heading {color: #e84858;} .callouts.colors > div:nth-child(3) .heading {color: #71b095;} .feature-benefits .callouts h2, .feature-benefits .callouts .heading, .page-template-template-feature .callouts h2, .page-template-template-feature .callouts .heading {font-size: 26px; line-height: 30px; font-weight: 300; color: #2d2d2d; text-align: center; text-transform: none; letter-spacing: normal;} .btn, .gform_button {display: inline-block; padding: 15px 30px; font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 16px; font-style: normal; line-height: 22px; color: #fff; background: #478fcc; border-radius: 30px; cursor: pointer; border: none; margin: 0; -webkit-appearance: none; text-align: center; font-weight: bold; text-transform: uppercase;} .btn:focus, .btn:hover {background: #1a3e5c; color: #fff;} .btn-grey {background: #e9e9e9; color: #393939; font-weight: normal; text-transform: none;} .btn-beige {background: #ede6de; color: #4b4b4b;} .btn.small {font-size: 14px; line-height: 18px; padding: 13px 20px;} .btn.mega {font-size: 26px; line-height: 30px; padding: 30px 40px;} .btn.xlrg {padding: 25px 35px; border-radius: 10px;} .btn .fa {margin-left: 10px; color: #dc2636;} .btn.seafoam {background: #73af95;} .btn.light-blue {background: #5fa2b3;} .btn.dark-blue {background: #0e3351; color: #fff;} .btn.light-red {background: #e64a5b;} .btn.light-red-2 {background: #fe414d;} .btn.bright-blue {background: #00b9da;} .btn.bright-blue:focus, .btn.bright-blue:hover {background: #fff; color: #00b9da;} .btn.subscribe {background: #232949; padding: 7px 15px; letter-spacing: 1px;} .btn.subscribe:after {font-family: 'FontAwesome'; content: "\f0e0"; margin-left: 10px; font-weight: normal;} .btn.subscribe:focus, .btn.subscribe:hover {background: #478fcc;} .button-group {margin: 40px 0; text-align: center;} .button-group:last-child {margin-bottom: 0;} .button-group .btn {min-width: 180px; margin: 10px 8px 0 8px;} .shadow-btn {display: inline-block; font-size: 24px; line-height: 28px; font-weight: normal; color: #dc2636; background: #fff; padding: 15px 20px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);} .contact-btn {display: inline-block; padding: 15px 15px 15px 60px; text-align: left; font-size: 21px; line-height: 25px; color: #2d2d2d; text-decoration: none; font-weight: 300; background: #fff url(images/icons/phone.png) no-repeat 15px center;} .contact-btn.email {background-image: url(images/icons/email.png);} .contact-button-group {max-width: 680px; margin: 0 auto;} .contact-button-group .contact-btn {width: 47%;} .icon-link {display: inline-block; padding: 0 0 0 45px; background: url(images/icons/phone.png) no-repeat left center; font-size: 21px; line-height: 35px; color: #2d2d2d;} .icon-link:hover {color: #e84958;} .icon-link.email {background-image: url(images/icons/email.png);} br + .icon-link {margin-top: 5px;} .callout-banner {font-size: 24px; line-height: 28px; font-weight: 300; color: #615f5f; text-align: center;} .callout-banner h2, .callout-banner .heading {margin: 0 0 20px 0; font-size: 40px; line-height: 44px; color: #2d2d2d;} .radial-progress-bars {margin: 0 -20px; text-align: center;} .radial-progress-bars > div {float: left; width: 33.3333%; padding: 0 30px;} .radial-progress-bars .logo img {display: block; margin: 0 auto;} .radial-progress-bars .progress-bar {height: 240px; max-width: 240px; margin: 0 auto 20px auto; position: relative; font-size: 21px; line-height: 24px; color: #323232;} .radial-progress-bars .progress-bar .content {position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; padding: 0 40px;} .radial-progress-bars .progress-bar .progress {display: block; font-size: 48px; line-height: 52px; font-weight: bold; color: #dc2636;} .radial-progress-bars .progress-bar .radial-progress-bar {position: absolute; top: 0; left: 0;} .radial-progress-bars .caption {font-size: 28px; line-height: 34px; color: #323232;} .accent {color: #dc2636;} .accent-blue, .accent-blue .heading, .accent-blue a, a.accent-blue {color: #5da1b4;} .accent-red, .accent-red .heading, .accent-red a, a.accent-red {color: #e84958;} .accent-green, .accent-green .heading, .accent-green a, a.accent-green {color: #71b095;} .quote-block {display: table; width: 100%; font-size: 18px; line-height: 24px; font-weight: 300;} .quote-block > div {display: table-cell;} .quote-block .photo {width: 130px; vertical-align: top;} .quote-block .logo {width: 230px; vertical-align: middle;} .quote-block .content {padding: 0 50px 0 30px; vertical-align: top;} .quote-block .author-deets {font-size: 18px; line-height: 22px; font-style: italic; color: #dc2636;} .quote-block .author-deets .separator {font-style: normal; color: #4a4a4a; margin: 0 10px;} .logo-quote-block {display: table; width: 100%; font-size: 18px; line-height: 24px; font-weight: 300; max-width: 1030px;} .logo-quote-block > div {display: table-cell;} .logo-quote-block .logo {width: 350px; vertical-align: middle; padding: 0 50px;} .logo-quote-block .logo img {display: block; margin: 0 auto;} .logo-quote-block .content {vertical-align: top;} .logo-quote-block .author-deets {font-size: 18px; line-height: 22px; font-style: italic; color: #dc2636;} .logo-quote-block .author-deets .separator {font-style: normal; color: #4a4a4a; margin: 0 10px;} .quote-photo {position: relative; width: 130px; height: 130px;} .quote-photo:after {position: absolute; top: 0; left: 0; width: 130px; height: 130px; content: ""; background: url(images/quote-photo-mask.png) no-repeat center center; background-size: cover;} .quote-photo img {display: block;} .demo-banner {background: #e84958 url(images/banners/demo-2.jpg) no-repeat center center; background-size: cover; text-align: center; border-bottom: solid 20px #efddda;} .demo-banner > div {padding: 80px 20px 200px 20px;} .demo-banner .heading {margin: 0 0 40px 0; font-size: 48px; line-height: 52px; color: #fff;} .demo-banner .content {margin: 0 auto; background: rgba(255,255,255,0.8); box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);} .demo-banner .logo-icon {position: absolute; top: -70px; left: 50%; margin-left: -62px;} .demo-banner .super-heading {margin: 0 0 30px 0; font-size: 30px; line-height: 34px; font-weight: bold; color: #fff;} .demo-banner.v2 {border-bottom: none;} .demo-banner.v2 > div {padding-top: 120px; padding-bottom: 100px;} #demo-form {text-align: center; font-family: 'Raleway'; font-size: 28px; line-height: 32px; color: #2f2f2e; font-weight: 300; padding: 40px 30px; position: relative;} #demo-form form > div, #demo-form label, #demo-form .field, #demo-form .input, #demo-form .mktoForm .mktoLabel, #demo-form .mktoForm .mktoFormCol {display: inline-block; float: none;} #demo-form .mktoForm .mktoFieldWrap {float: none;} #demo-form label {padding-top: 0; font-size: 28px; line-height: 32px; color: #2f2f2e; vertical-align: baseline; font-weight: 300;} #demo-form .mktoField {padding: 10px 15px; width: 170px !important; font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 28px; line-height: 32px; font-weight: 300; color: #2f2f2e; border: none; background: #fff; border-bottom: solid 3px #abced8; float: none;} #demo-form .mktoEmailField {width: 230px !important;} #demo-form .mktoTelField {width: 230px !important;} #demo-form ::-webkit-input-placeholder {color: #2f2f2e; opacity: 1;} #demo-form :-moz-placeholder {color: #2f2f2e; opacity: 1;} #demo-form ::-moz-placeholder {color: #2f2f2e; opacity: 1;} #demo-form :-ms-input-placeholder {color: #2f2f2e; opacity: 1;} #demo-form .mktoForm {width: 100% !important; text-align: center;} #demo-form .mktoForm div, #demo-form .mktoForm span, #demo-form .mktoForm label, #demo-form .mktoForm p {text-align: center;} #demo-form .mktoGutter, #demo-form .mktoForm .mktoOffset, #demo-form .mktoForm .mktoClear, #demo-form .mktoForm .mktoRequiredField .mktoAsterix {display: none;} #demo-form .mktoButtonRow {position: absolute; left: 50%; bottom: -100px; margin: 0 0 0 -90px; display: block;} #demo-form .mktoButtonRow button {width: 180px;} #demo-form input#FirstName, #demo-form input#LastName, #demo-form input#Email {margin: 0 !important;} #demo-form input#Company {margin: 0 5px 0 0 !important;} #demo-form label[for="Company"] {width: auto !important;} #demo-form .submitted-message {display: none;} #demo-form .hs-input:invalid {border-bottom: solid 3px #abced8;} #demo-form .hs-form-field {position: relative; margin: 0 2px;} #demo-form .hs-form-field .hs-error-msgs {position: absolute; z-index: 10; margin: 0; padding: 15px; list-style-type: none; background: #dc2636; color: #fff; top: 70px; left: 0; font-size: 15px; line-height: 19px; text-align: left; box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2);} #demo-form .hs-form-field .hs-error-msgs:before {position: absolute; content: ""; top: -20px; left: 20px; border: solid 10px #dc2636; border-color: transparent transparent #dc2636 transparent;} #demo-form .hs-form-field .hs-error-msgs label {display: inline; margin: 0;} .hs-form .hs-button {display: inline-block; padding: 15px 30px; font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 18px; font-style: normal; line-height: 22px; color: #fff; background: #dc2636; border-radius: 5px; cursor: pointer; text-transform: uppercase; font-weight: 700; border: none; margin: 0; -webkit-appearance: none; text-align: center;} ul.social {margin: 0; padding: 0; list-style-type: none;} ul.social li {display: inline-block; margin: 0 6px;} ul.social .fa {background: #ccc; border-radius: 23px; width: 46px; height: 46px; text-align: center; color: #fff; font-size: 26px; line-height: 46px; color: #f5f6f8; transition: 0.25s ease;} ul.social a:focus .fa, ul.social a:hover .fa {background: #ff414d;} ul.social.wide li {margin: 0 15px;} ul.social.red .fa {background: #dc2636; color: #fff;} ul.social.red a:hover .fa {background: #dc2636; color: #000;} .radial-progress-bar canvas {width: 100%; height: 100%;} .vertically-centered {position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .notes {font-size: 15px; line-height: 19px; color: #7f7f7f; text-align: center;} #jump-nav {margin: 0; padding: 0; list-style-type: none; text-align: center; font-size: 15px; line-height: 19px; font-style: normal; letter-spacing: 1px; font-weight: 600; text-transform: uppercase;} #jump-nav li {display: inline-block; position: relative;} #jump-nav li:before {position: absolute; content: ""; width: 1px; top: 20px; bottom: 20px; right: 0; background: #fff;} #jump-nav li:last-child:before {display: none;} #jump-nav a {display: inline-block; transition: none; padding: 20px; margin: 0 20px; border-bottom: solid 4px transparent; position: relative; color: #555; background: no-repeat left center;} #jump-nav a:hover {color: #dc2636;} #jump-nav .active a:before {position: absolute; content: ""; bottom: 12px; left:0; right: 0; height: 2px;} #jump-nav a[class^="icon"] {padding-left: 30px; padding-right: 0;} #jump-nav a[class^="icon"]:after {position: absolute; content: ""; top: 50%; margin-top: -12px; left: 0; width: 25px; height: 25px; background: url(images/v2/icons/guide.png) no-repeat center top;} /* #jump-nav a[class^="icon"]:hover:after {background-position: 0 -25px;} #jump-nav a.icon-video:after {background-position: 0 -200px;} #jump-nav a.icon-video:hover:after {background-position: 0 -225px;} #jump-nav a.icon-document:after {background-position: 0 -150px;} #jump-nav a.icon-document:hover:after {background-position: 0 -175px;} #jump-nav a.icon-checklist:after {background-position: 0 -100px;} #jump-nav a.icon-checklist:hover:after {background-position: 0 -125px;} #jump-nav a.icon-chart:after {background-position: 0 -50px;} #jump-nav a.icon-chart:hover:after {background-position: 0 -75px;} */ #jump-nav a.icon-video:after {background-image: url(images/v2/icons/video.png);} #jump-nav a.icon-document:after {background-image: url(images/v2/icons/case-study.png);} #jump-nav a.icon-chart:after {background-image: url(images/v2/icons/infographic.png);} .red #jump-nav {background: #fe414d; color: #fff; font-weight: normal;} .red #jump-nav a {color: #fff;} .red #jump-nav li.active a:before {background: #fff;} .condensed#jump-nav a {margin: 0 20px; padding: 20px 0;} hr {height: 1px; font-size: 1px; line-height: 1px; margin: 30px 0; background: #89d7c1; border: none;} hr.tall-margin {margin: 80px 0;} hr.dots {height: 8px; background: url(images/v2/red-dot.png) repeat-x left top;} .faq-cols {margin: 0 -20px 40px -20px;} .faq-cols > div {padding: 0 20px; float: left; width: 33.3333%;} .faq-cols .heading {margin: 0 0 20px 0; font-size: 24px; line-height: 28px; font-weight: 700; color: #666; font-weight: bold; padding: 0 10px;} .faqs {margin: 0 0 20px 0; padding: 0; list-style-type: none; font-size: 16px; line-height: 21px; color: #615f5f; font-weight: 300;} .faqs > li {border-bottom: solid 1px #ccc;} .faqs > li > a {display: block; position: relative; padding: 15px 50px 15px 10px; color: #615f5f; font-size: 18px; line-height: 22px;} .faqs > li > a:hover {color: #dc2636;} .faqs > li > a:before {position: absolute; content: ""; top: 50%; right: 10px; margin-top: -12px; width: 24px; height: 24px; border-radius: 12px; background: #aed0d9;} .faqs > li > a:after {position: absolute; content: "+"; top: 50%; right: 10px; margin-top: -12px; width: 24px; height: 24px; line-height: 24px; color: #fff; font-weight: normal; text-align: center; font-size: 23px;} .faqs > li.expanded > a {background: #eae4dd;} .faqs > li.expanded > a:before {background: #fff;} .faqs > li.expanded > a:after {content: "-"; line-height: 21px; color: #eae4dd;} .faqs .answer {padding: 15px 10px; background: #f4f0eb; display: none;} a.see-more {font-size: 16px; line-height: 20px; font-weight: bold; letter-spacing: 1px; color: #a19f9b; text-transform: uppercase; display: inline-block;} a.see-more:before {font-family: FontAwesome; content: "\f0fe"; color: #dc2636; margin: 0 10px 0 0;} a.see-more:hover {color: #dc2636;} a.see-more.disabled {opacity: 0.3; cursor: default;} a.see-more.disabled:hover {color: #a19f9b;} a.read-more {font-size: 16px; letter-spacing: 1px; font-weight: bold; text-transform: uppercase;} .dot-heading {margin: 0 0 40px 0; font-size: 36px; line-height: 40px; color: #2d2d2d; text-align: center;} .dot-heading:before, .dot-heading:after {display: inline-block; content: ""; width: 8px; height: 8px; background: #dcd9d4; border-radius: 4px; margin-right: 15px; vertical-align: middle;} .dot-heading:after {margin-left: 15px;} .line-heading {margin: 0 0 30px 0; padding: 0 0 30px 0; position: relative; font-size: 21px; line-height: 25px; color: #e84958; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; text-align: center;} .line-heading:after {position: absolute; content: ""; width: 200px; left: 50%; margin-left: -100px; bottom: 0; background: #ccc; height: 1px;} .hairline-heading {margin: 0 0 40px 0; font-size: 24px; line-height: 28px; color: #2d2d2d; font-weight: bold; text-align: center; position: relative;} .hairline-heading:before {position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #ccc; content: "";} .hairline-heading > span {background: #fff; padding: 0 20px; position: relative; display: inline-block;} .underline-heading {margin: 0 0 30px 0; padding: 0 0 30px 0; font-size: 40px; line-height: 44px; border-bottom: solid 1px #ccc; text-align: center;} .content-list > div + div {margin-top: 60px;} .icon-content {font-size: 18px; line-height: 27px; font-weight: 300; max-width: 630px; margin: 0 auto 20px auto; background: url(images/cog.png) no-repeat left center; min-height: 100px; padding: 0 0 0 120px;} .content-right {font-size: 18px; line-height: 24px; font-weight: 300;} .content-right > .left {float: left; width: 180px; margin: 5px 0 0 0; position: relative;} .content-right > .right {float: right; width: 100%; margin-left: -200px;} .content-right > .right > div {margin-left: 200px;} .content-right .heading {margin: 0 0 5px 0; font-size: 32px; line-height: 36px; font-weight: bold; color: #e84958;} .photo-grid {margin: 0 -6px;} .photo-grid > div {float: left; width: 25%; padding: 0 6px 12px 6px;} .photo-grid img {display: block; width: 100%;} ul.checkmarks {margin: 0; padding: 0; list-style-type: none; font-size: 0;} ul.checkmarks li {font-size: 18px; line-height: 24px; font-weight: 300; padding: 0 0 0 60px; margin: 0 0 30px 0; background: url(images/checkmark.png) no-repeat; min-height: 45px;} ul.checkmarks.split li {display: inline-block; width: 50%; vertical-align: top; padding-right: 20px;} .mobile-screenshot {width: 235px; position: relative;} /* padding: 67px 0 0 55px; */ .mobile-screenshot img {display: block;} /*.mobile-screenshot:after {position: absolute; content: ""; width: 285px; height: 461px; top: 0; left: 0; background: url(images/phone-mask.png) no-repeat;}*/ .split-columns-container {max-width: 1080px; margin: 40px auto 0 auto;} .split-columns {margin: 0 -15px; text-align: center;} .split-columns > div {display: inline-block; vertical-align: top; width: 50%; padding: 0 15px;} img.shadow {display: block; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);} .accent {color: #e84958;} /* Red */ .accent-2 {color: #5da1b4;} /* Teal */ .default-copy {font-size: 18px; line-height: 27px; font-weight: 300;} .default-copy .large-copy {font-size: 24px; line-height: 28px;} a.video-link {display: inline-block; position: relative; max-width: 100%;} a.video-link:after {position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; border-radius: 45px; border: solid 7px #fff; text-align: center; line-height: 76px; font-family: FontAwesome; content: "\f04b"; font-size: 30px; color: #fff; text-indent: 5px; margin: -45px 0 0 -45px;} a.video-link img {display: block;} .study-link {font-size: 14px; line-height: 22px; display: inline-block; min-height: 20px; color: #5ca2b4; text-transform: uppercase; letter-spacing: 1px; font-weight: 900;} .study-link .fa {font-size: 18px; margin-right: 5px; font-weight: normal;} .logos {margin: 0 -15px -30px -15px; font-size: 0; text-align: center;} .logos > div {display: inline-block; vertical-align: middle; margin: 0 15px 30px 15px;} .content-block {background: #fff; padding: 40px 20px; color: #585858; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);} .section-break {background: #fff; font-size: 24px; line-height: 28px; font-style: italic; color: #585858; text-align: center; font-weight: 300;} .section-break > div {padding-top: 15px; padding-bottom: 15px;} .feature-callouts > div {padding-top: 50px; padding-bottom: 0;} .feature-callout {display: table; width: 100%; table-layout: fixed; font-size: 18px; line-height: 27px; font-weight: 300; padding: 50px 0 0 0; border-top: solid 1px #ccc;} .feature-callout > .content {display: table-cell; vertical-align: middle; width: 50%; padding: 20px 30px 20px 0;} .feature-callout > .photo {display: table-cell; vertical-align: bottom; width: 50%; padding: 0 0 0 30px;} .feature-callout > .photo img {display: block; margin: 0 auto;} .feature-callout h3 {margin: 0 0 10px 0; font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 40px; line-height: 44px; font-weight: normal;} .feature-callout h4 {margin: 0 0 20px 0; font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 30px; line-height: 34px; font-weight: 300;} .feature-callout a {font-weight: normal;} .feature-callout.blue h3 {color: #5da1b4;} .feature-callout.red h3 {color: #e84958;} .feature-callout.green h3 {color: #71b095;} /* .feature-callout + .feature-callout {border-top: solid 1px #ccc;} */ .pull-quote {margin: 30px 60px; padding: 0 0 30px 0; font-weight: 300; font-size: 26px; line-height: 30px; color: #2d2d2d; text-decoration: none; display: block; position: relative;} .pull-quote:after {position: absolute; left: 0; bottom: 0; font-family: 'FontAwesome'; content: "\f099"; color: ##A3D3F6; font-size: 22px; color: #A3D3F6;} .show-me-callout {font-size: 25px; line-height: 31px; font-weight: 300; color: #fff; text-align: center; padding: 30px; background: #232949;} .show-me-callout .logo {margin: 0 0 10px 0;} .show-me-callout .logo img {display: block; margin: 0 auto;} .show-me-callout p:not(:last-child) {margin: 0 0 30px 0;} aside .widget .show-me-callout a, aside .widget .show-me-callout a:focus, aside .widget .show-me-callout a:hover {color: #fff;} /** * Resources */ .resources-grid {margin: 0 -20px -60px -20px; font-size: 22px; line-height: 30px;} .resources-grid > div {display: inline-block; vertical-align: top; width: 33.3333%; padding: 0 20px 60px 20px;} .resources-grid > div > div {max-width: 270px; margin: 0 auto;} .resources-grid .heading {margin: 0 0 10px 0; font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 32px; line-height: 36px; font-weight: 300;} .resources-grid .btn {width: 100%;} .resources-grid .thumb {margin: 0 0 20px 0;} .resources-grid .thumb img {display: block;} .featured-resources {position: relative;} .featured-resources:before {position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; content: ""; background: #ccc;} .featured-resources > .left {float: left; width: 50%; padding: 0 50px 0 0;} .featured-resources > .right {float: right; width: 50%; padding: 0 0 0 50px;} .featured-resources .thumb {float: left; width: 40%;} .featured-resources .content {float: left; width: 60%; padding: 0 0 0 20px;} .featured-resources .heading {margin: 0 0 10px 0; font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 33px; line-height: 43px; font-weight: 300;} #more-resources-banner {font-size: 24px; line-height: 28px; font-style: italic; font-weight: 300; color: #fff; text-align: center; border-bottom: solid 1px #ccc;} #more-resources-banner > div:first-child {padding-top: 70px; padding-bottom: 50px;} #more-resources-banner .heading {margin: 0; font-size: 50px; line-height: 54px; font-style: normal; color: #69cbb0; font-weight: 300;} #more-resources-banner .jump-nav {background: rgba(255,255,255,0.85);} .wp-video {padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden;} .wp-video > div {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100% !important; height: 100% !important;} /** * Blog */ .generic-banner#banner {background-image: url(images/banners/generic.jpg);} .post {color: #2d2d2d; margin: 0 0 60px 0;} .post h1 {margin: 0 0 20px 0; font-size: 44px; line-height: 48px; color: #dc2636;} .post h2 {margin: 0 0 5px 0; font-size: 32px; line-height: 36px; font-weight: 300;} .post .meta {font-size: 13px; line-height: 17px; color: #585858; margin: 0 0 20px 0; font-weight: normal; text-transform: uppercase;} .post .summary {font-size: 22px; line-height: 32px; font-weight: 300;} .post .nav-single {display: none;} .post header {margin: 30px 0;} .post header {font-size: 13px; line-height: 17px; font-weight: bold; text-transform: uppercase;} .post header > div {display: table; width: 100%;} .post header > div > div {display: table-cell; vertical-align: middle; padding: 0 20px 0 0;} .post header > div > div.author-photo {width: 80px;} .post header > div > div.share {padding: 0;} .post header .social > div {float: right;} .post header .addthis_sharing_toolbox {display: inline-block; vertical-align: middle; margin: 0 0 0 5px;} .post header .at-icon-wrapper {background: #9d9d9d !important; border-radius: 4px;} .post header .author-photo img {display: block; width: 60px; border-radius: 30px;} .post footer .categories {margin: 20px 0; font-size: 13px; line-height: 17px; text-transform: uppercase;} .post footer .author {background: #f4f0eb; padding: 30px; font-size: 14px; line-height: 19px; font-weight: 300;} .post footer .author h4 {margin: 0; font-size: 21px; line-height: 25px; font-weight: 300;} .post footer .author > .photo {float: left; width: 100px;} .post footer .author > .photo img {display: block; width: 100px; border-radius: 50px; margin: 0 auto;} .post footer .author > .bio {float: right; width: 100%; margin-left: -130px;} .post footer .author > .bio > div {margin-left: 130px;} .post footer .author > .bio .content {margin: 0 0 20px 0;} .featured-post {border-bottom: solid 1px #dcd9d4; padding: 0 0 40px 0; margin: 0 0 40px 0;} .featured-post h2 {font-size: 50px; line-height: 58px;} .featured-post > .thumb {float: left; width: 41%;} .featured-post > .thumb img {display: block; border: solid 10px #f4f0eb;} .featured-post > .content {float: right; width: 59%; padding: 0 0 0 50px;} .featured-post .summary {font-weight: normal;} .summary-post {border-bottom: solid 1px #dcd9d4; padding: 0 0 40px 0; margin: 0 0 40px 0;} .summary-post .entry-content > .thumb {float: left; width: 24%;} .summary-post .entry-content > .content {float: left; width: 76%; padding: 0 0 0 30px;} .sidebar-layout > .content {float: left; width: 100%; margin-right: -380px;} .sidebar-layout > .content > div {margin-right: 430px;} .sidebar-layout > aside {float: right; width: 380px; position: relative;} aside .widget-title {margin: 0 0 20px 0; font-size: 31px; line-height: 35px; font-weight: 300; color: #232949;} aside .widget {margin: 0 0 50px 0; font-size: 21px; line-height: 25px; font-weight: 300;} aside .widget ul {margin: 0; padding: 0; list-style-type: none;} aside .widget a {color: #2d2d2d;} aside .widget a:hover {color: #e84958;} aside .widget_categories li {margin: 0 0 10px 0;} aside div.contribute {border-top: solid 1px #dcd9d4; padding: 20px 0 0 0;} aside .connect {border-top: solid 1px #dcd9d4; border-bottom: solid 1px #dcd9d4; padding: 20px 0; margin-top: -20px;} aside .connect h4 {margin: 0 0 10px 0;} aside .widget_search h4 {margin: 0 0 10px 0;} aside .popular-posts li + li {padding-top: 10px; margin-top: 10px; border-top: solid 1px #dcd9d4;} a.contribute {display: block; padding: 0 80px 0 0; background: url(images/v2/icons/contribute.png) no-repeat right center; min-height: 55px; font-size: 16px; line-height: 20px; color: #2d2d2d; font-weight: 300;} a.contribute h4 {margin: 0; font-size: 31px; line-height: 35px; font-weight: 300; color: #69cbb0;} a.contribute:hover {color: #e84958;} #searchform {position: relative;} #searchform input[type="text"] {border: solid 1px #dcd9d4; padding: 10px; font-size: 21px; line-height: 25px; width: 100%;} #searchform button {position: absolute; top: 0; right: 0; padding: 12px; display: block; cursor: pointer; background: none; border: none;} #searchform button .fa {font-size: 25px; color: #e84958;} .related-posts {margin: 40px 0 0 0;} .related-posts h3 {margin: 0 0 20px 0;} .related-posts h4 {margin: 0; font-size: 17px; line-height: 21px; font-weight: bold;} .related-posts .posts {margin: 0 -20px;} .related-posts .post {display: inline-block; vertical-align: middle; width: 50%; padding: 0 20px; margin: 0 0 40px 0;} .related-posts .deets {font-size: 13px; text-transform: uppercase; color: #585858;} /** * Individual feature */ .feature-banner#banner {min-height: 600px; background: #f2ede8; border-bottom: solid 20px #f6f3f0; font-size: 24px; line-height: 32px; color: #615f5f; text-align: left; font-weight: 300;} .feature-banner#banner h1 {font-size: 48px; line-height: 52px; margin: 0 0 10px 0; color: #e84958;} .feature-banner#banner h2 {font-size: 32px; line-height: 36px; margin: 0 0 20px 0; color: #2d2d2d;} .feature-banner#banner .content {padding: 0 45% 40px 0; position: relative; z-index: 2; min-height: 410px;} .feature-banner#banner .photo {position: absolute; left: 20px; right: 40px; padding: 0 0 0 57%; bottom: -100px; z-index: 1;} .feature-banner#banner .photo img {float: right; display: block; margin: 0 auto;} .feature-banner.screenshots#banner .content {padding: 0 59% 0 0;} .feature-banner.screenshots#banner .desktop {position: absolute; left: 20px; right: 40px; padding: 0 0 0 43%; bottom: -20px;} .feature-banner.screenshots#banner .desktop:after {position: absolute; bottom: -50px; height: 50px; left: -200px; right: -200px; background: #fff; content: "";} .feature-banner.screenshots#banner .desktop img {float: right; box-shadow: 0 0 30px 15px rgba(0,0,0,0.1); display: block; margin: 0 auto;} .feature-banner.screenshots#banner .mobile {position: absolute; left: 20px; right: 0; padding: 0 0 0 80%; bottom: -80px;} .feature-banner.screenshots#banner .mobile img {float: right; display: block; margin: 0 auto;} .benefits-grid {margin: 0 -40px -40px -40px; font-size: 0; text-align: center;} .benefits-grid > div {display: inline-block; width: 33.3333%; padding: 0 40px 40px 40px; vertical-align: top;} .benefits-grid > div > div {font-size: 18px; line-height: 24px; font-weight: 300; text-align: left;} .benefits-grid .icon img {display: block; margin: 0 auto 30px auto;} .benefits-grid .heading {margin: 0 0 20px 0; font-size: 26px; line-height: 30px; color: #2d2d2d; font-weight: 300;} .banner-slider {overflow: hidden;} .banner-slider > div {max-width: 1120px; margin: 0 auto; position: relative;} .banner-slider ul {margin: 0; padding: 0; list-style-type: none;} .banner-slider .slide {background: #5ca2b4 no-repeat center center; background-size: cover; min-height: 650px; padding: 175px 20px 20px 20px; font-size: 24px; line-height: 32px; color: #fff; font-weight: 300; text-align: center; position: relative;} .banner-slider .slide .background {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(images/bg-slide.png) no-repeat center center; background-size: 1080px; z-index: 1;} .banner-slider .slide .heading {margin: 0 0 20px 0; font-size: 40px; line-height: 44px; color: #fff;} .banner-slider .slide.green {background-color: #6daa90;} .banner-slider .slide.red {background-color: #e74958;} .banner-slider .slide .inner {opacity: 0; transition: 0.75s ease; max-width: 780px; position: relative; z-index: 2; margin: 0 auto;} .banner-slider .flex-active-slide .slide .inner {opacity: 1;} .banner-slider .flex-viewport {overflow: visible !important;} .banner-slider .line-heading {position: absolute; top: 50px; left: 0; right: 0; color: #fff; padding: 0 0 15px 0; margin: 0 0 15px 0; z-index: 3;} .banner-slider .line-heading:after {background: #fff;} .banner-slider .no-photo-layout {max-width: 550px; margin: 0 auto;} .banner-slider .photo-layout {display: table; table-layout: fixed;} .banner-slider .photo-layout > div {display: table-cell; vertical-align: middle;} .banner-slider .photo-layout .content {width: 60%; text-align: left; padding: 0 40px 0 0;} .banner-slider .photo-layout .photo {width: 40%;} .banner-slider .photo img {display: block; margin: 0 auto; max-width: 300px;} .banner-slider .action {margin: 40px 0 0 0;} .banner-slider .action .btn {background: #2f626f; min-width: 280px;} .banner-slider .flex-control-paging {position: absolute; top: 110px; left: 0; right: 0; text-align: center; margin: 0; padding: 0; list-style-type: none;} .banner-slider .flex-control-paging li {display: inline-block; margin: 0 5px; vertical-align: top;} /* .banner-slider .flex-control-paging li:first-child, .banner-slider .flex-control-paging li:last-child {display: none;} */ .banner-slider .flex-control-paging a {display: inline-block; vertical-align: top; background: #fff; width: 24px; height: 24px; border-radius: 12px; opacity: 0.3; text-indent: -10000px; font-size: 0; line-height: 0; cursor: pointer;} .banner-slider .flex-control-paging a.flex-active {opacity: 1;} .study-quote-block {font-size: 21px; line-height: 28px; font-weight: 300;} .study-quote-block .logo {float: left; width: 200px;} .study-quote-block .logo img {display: block; margin: 0 auto;} .study-quote-block .quote {float: right; width: 100%; margin: 0 0 0 -220px;} .study-quote-block .quote > div {margin: 0 0 0 220px;} .study-quote-block .author-deets {font-size: 18px; line-height: 22px; font-style: italic; color: #dc2636;} .study-quote-block .author-deets .separator {font-style: normal; color: #4a4a4a; margin: 0 10px;} .study-quote-block .action {margin: 40px 0 0 0; text-align: center;} .study-quote-block.video .video {float: left; width: 280px;} .study-quote-block.video .video img {display: block; margin: 0 auto;} .study-quote-block.video .quote {margin-left: -300px;} .study-quote-block.video .quote > div {margin-left: 300px;} .study-quote-block-grid {margin: 0 -20px;} .study-quote-block-grid > div {float: left; width: 50%; padding: 0 20px;} /** * Why Apptentive */ /* .why-banner#banner {min-height: 425px; background-image: url(images/banners/why-apptentive.jpg); border-bottom: solid 15px #f4f0eb;} .why-banner#banner > div {padding-top: 180px;} .why-banner#banner .heading {max-width: 750px; margin: 0 auto 20px auto; color: #2d2d2d; font-size: 40px; line-height: 48px;} */ .why-banner#banner {min-height: 530px; background-image: url(images/banners/why-apptentive-v2.jpg); text-align: left;} .why-banner#banner > div {padding-top: 180px;} .why-banner#banner .heading {max-width: 750px; margin: 0 0 20px 0; color: #4f4f4f; font-size: 50px; line-height: 56px;} .case-study-video-block {position: relative; z-index: 1;} .case-study-video-block > .left {float: left; width: 50%; padding: 0 40px 0 0;} .case-study-video-block > .right {float: right; width: 50%;} .case-study-video-block .logo {padding: 0 0 20px 0; margin: 0 0 20px 0; border-bottom: solid 1px #ccc;} .case-study-video-block + .case-study-video-block {margin-top: 40px;} .case-study-video-slider {position: relative;} .case-study-video-slider .slides {margin: 0; padding: 0; list-style-type: none;} .case-study-video-slider .slide {display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-items: flex-start; font-size: 20px; line-height: 26px; color: #5a5a5a; font-weight: 300;} .case-study-video-slider .slide h2 {margin: 0 0 10px 0; font-size: 40px; line-height: 44px; font-weight: normal; color: #2d2d2d;} .case-study-video-slider .slide .left {width: 37%; padding: 0 40px 140px 0;} .case-study-video-slider .slide .right {width: 63%;} .case-study-video-slider .slide .right img {display: block; width: 100%;} .case-study-video-slider .slide .video-link {display: block;} .case-study-video-slider .nav {position: absolute; left: 0; bottom: 0; width: calc(37% - 35px); z-index: 10;} .case-study-video-slider .nav .item {padding: 0 8px;} .case-study-video-slider .nav img {display: block; width: 100%;} .case-study-video-slider .slick-arrow {padding: 0; margin: 0; background: none; border: none; cursor: pointer; position: absolute; top: calc(50% - 13px); left: -20px; font-size: 26px; line-height: 26px; color: #3b3b3c;} .case-study-video-slider .slick-arrow.slick-next {left: auto; right: -20px;} .case-study-row {margin: 0 -40px; overflow: hidden; font-size: 24px; line-height: 32px; font-weight: 300; text-align: center; position: relative; z-index: 1;} .case-study-row > div {width: 33.3333%; float: left; padding: 0 40px 1000px 40px; margin: 0 0 -1000px 0;} .case-study-row > div + div {border-left: solid 1px #ccc;} .case-study-row .logo {height: 175px;} #case-study-block-banner {background-image: url(images/banners/case-studies.jpg);} #case-study-block-banner .heading {color: #fff;} .case-study-blocks {margin: 0 -15px;} .case-study-blocks > div {float: left; width: 33.3333%; padding: 0 15px 40px 15px;} .case-study-block {height: 230px; padding: 0 20px; display: block; background: #fff; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2); font-size: 21px; line-height: 25px; font-weight: 300; text-align: center; position: relative; color: #585858; text-decoration: none;} .case-study-block .vertically-centered {padding: 0 0 20px 0;} .case-study-block .accent {display: block; font-size: 40px; line-height: 44px;} .case-study-block .more {position: absolute; left: 0; right: 0; bottom: 30px;} #quotes-banner {background-image: url(images/banners/testimonials.jpg);} #quotes-banner .intro {color: #fff;} #quotes-banner .heading {color: #fff; font-weight: bold;} .quote-slider {position: relative; font-weight: 300;} .quote-slider .slides {margin: 0; padding: 0; list-style-type: none;} .quote-slider .upper {display: flex; flex-direction: row-reverse; align-items: center;} .quote-slider .quote {width: 75%; padding: 0 70px 0 0; font-size: 28px; line-height: 45px; color: #f4f0eb;} .quote-slider .logo {width: 25%;} .quote-slider .logo img {display: block; margin: 0 auto;} .quote-slider .lower {font-size: 18px; line-height: 24px; color: #aedeeb; margin: 30px 0 0 0; padding: 0 0 0 70px; position: relative;} .quote-slider .lower:before {position: absolute; content: ""; top: 5px; left: 0; width: 45px; height: 33px; background: url(images/left-quotemark.png) no-repeat;} .quote-slider .lower .author {font-size: 21px; color: #f4f0eb;} .quote-slider .flex-control-nav {position: absolute; left: 0; right: 0; bottom: -50px; margin: 0; padding: 0; list-style-type: none; text-align: center;} .quote-slider .flex-control-nav li {display: inline-block; vertical-align: middle; margin: 0 5px;} .quote-slider .flex-control-nav a {display: inline-block; vertical-align: middle; width: 18px; height: 18px; font-size: 0; line-height: 0; text-indent: -10000px; background: #8bbace; border-radius: 9px;} .quote-slider .flex-control-nav a.flex-active {background: #f4f0eb;} .case-study-filter-banner {position: relative;} .case-study-filter-banner .content {background: #f4f0eb; margin: 0 -10000px; padding: 50px 10000px 0 10000px; border-top: solid 30px #dc2636; position: relative; z-index: 2;} .case-study-filter-banner h2 {margin: 0 0 10px 0; padding: 0 0 30px 0; font-size: 38px; line-height: 38px; color: #4f4f4f; text-align: center; border-bottom: solid 1px #ccc;} .case-study-filter-banner .filters {position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1;} .case-study-filter-banner .filters > div {background: rgba(255,255,255,0.98); box-shadow: rgba(0,0,0,0.1) 0 0 50px; margin: 0 -10000px; padding: 40px 10000px 20px 10000px; opacity: 0; transition: 0.5s ease;} .case-study-filter-banner .filters h4 {margin: 0 0 10px 0; font-size: 15px; line-height: 19px; text-transform: uppercase; font-weight: bold;} .case-study-filter-banner .filters ul {margin: 0; padding: 0; list-style-type: none; column-count: 2; column-gap: 20px;} .case-study-filter-banner .filters li {margin: 0 0 5px 0;} .case-study-filter-banner .filters [type="checkbox"] {margin: 0 10px 0 0; position: relative; top: -2px;} .case-study-filter-banner .filters .industries {float: left; width: 50%;} .case-study-filter-banner .filters .use-cases {float: left; width: 50%;} .case-study-filter-banner .filters .close {display: block; width: 50px; text-align: center; margin: 20px auto 0 auto; color: #555; font-size: 30px; line-height: 50px;} .case-study-filter-banner.show-filters .filters {pointer-events: auto;} .case-study-filter-banner.show-filters .filters > div {opacity: 1;} .case-studies {margin: 0 -20px -80px -20px; padding: 60px 0; list-style-type: none; display: flex; flex-wrap: wrap; font-size: 18px; line-height: 28px; position: relative;} .case-studies > li {width: 33.3333%; padding: 0 20px 80px 20px;} .case-studies h3 {margin: 0 0 10px 0; padding: 0 0 10px 0; font-size: 24px; line-height: 28px; color: #dc2636; font-weight: normal; border-bottom: solid 1px #ccc;} .case-studies .thumb img {display: block; margin: 0 0 20px 0; width: 100%;} .case-studies .tag {font-size: 14px; font-weight: bold; text-transform: uppercase; color: #5da1b4; letter-spacing: 1px; margin: 0 0 5px 0;} .quote-bubble-grid {text-align: center; font-size: 0;} .quote-bubble-grid > div {display: inline-block; width: 374px; vertical-align: middle; padding: 0 20px 40px 20px;} .quote-bubble {font-size: 18px; line-height: 24px; position: relative; padding: 0 30px; text-align: center; font-style: italic; color: #2d2d2d; width: 334px; height: 334px; background: url(images/bg-quote-bubble.png) no-repeat;} .quote-bubble:before {position: absolute; top: 40px; left: 50%; width: 27px; height: 21px; content: ""; background: url(images/quote-mark.png) no-repeat; margin: 0 0 0 -16px;} .join-call-to-action {text-align: center; margin: 0 0 80px 0;} .join-call-to-action .heading {font-size: 40px; line-height: 44px; margin: 0 0 40px 0;} .mfp-container {padding: 20px;} .pager, .nav-links {margin: 40px 0; font-size: 0;} .pager .page-numbers, .nav-links .page-numbers {display: inline-block; margin: 0 10px 10px 0; border-radius: 5px; text-transform: uppercase; text-align: center; min-width: 50px; min-height: 40px; font-size: 19px; line-height: 50px; font-weight: 900; background: #f5f6f8; color: #585858;} .pager .page-numbers.current, .nav-links .page-numbers.current {background: #fe414d; color: #fff;} .pager .prev, .pager .next, .nav-links .prev, .nav-links .next {padding: 0 15px;} .split-feature-banner header {text-align: center; padding: 40px 0;} .split-feature-banner header h2 {margin: 0; font-size: 21px; line-height: 25px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;} .split-feature-banner .content {display: flex; font-size: 24px; line-height: 32px; color: #fff; font-weight: 300;} .split-feature-banner .content > div {width: 50%; background: #6daa90 url(images/bg-slide.png) no-repeat center center; background-size: cover;} .split-feature-banner .content > div > div { width: 100%; max-width: 640px; padding: 40px;} .split-feature-banner .content > .left > div {float: right;} .split-feature-banner .content > .right {background-color: #e74958;} .split-feature-banner .content h3, .split-feature-banner .content .heading {margin: 0 0 20px 0; font-size: 40px; line-height: 44px; color: #fff;} /** * Home page */ body.home #banner {font-size: 30px; line-height: 34px; font-weight: 300;} body.home #banner > div {max-width: 880px; min-height: 660px; padding-top: 240px;} body.home #banner .heading {font-size: 60px; line-height: 64px; color: #2d2d2d;} body.home .intro {font-size: 24px; line-height: 28px;} #front-banner {font-size: 0; margin-top: -100px; padding-top: 100px;} #front-banner .heading {margin: 0 0 20px 0; font-size: 60px; line-height: 64px; font-weight: 300;} #front-banner .heading em {color: #dc2636; font-weight: 500; font-style: normal;} #front-banner > div {padding-top: 60px; padding-bottom: 40px;} #front-banner > div > .left {display: inline-block; vertical-align: middle; width: 50%; font-size: 22px; line-height: 26px; padding-right: 20px;} #front-banner > div > .right {display: inline-block; vertical-align: middle; width: 50%; padding-left: 20px;} #front-banner p {margin: 0 0 30px 0;} #front-banner-2 {background: #fff; margin-top: -100px; padding-top: 100px; text-align: center; font-weight: 300;} #front-banner-2 > div {padding-top: 90px;} #front-banner-2 {font-size: 32px; line-height: 36px; color: #5a5a5a;} #front-banner-2 h1 {margin: 0 auto 20px auto; font-size: 60px; line-height: 60px; color: #2d2d2d; font-weight: normal;} #front-banner-2 h1 em {color: #df2637; font-style: normal;} #front-banner-2 .photo {margin: 20px 0 0 0;} #front-banner-2 .photo img {display: block; width: 100%;} #front-banner-2 .btn {font-size: 16px; padding: 13px 20px; position: relative; top: -3px; margin-left: 10px;} #front-banner-3 {background: #fff url(images/bg-hero-banner.jpg) no-repeat center bottom; background-size: cover; margin-top: -100px; padding-top: 100px; text-align: center; font-weight: 300;} #front-banner-3 > div {padding-top: 90px; padding-bottom: 140px;} #front-banner-3 h1 {margin: 0 auto 20px auto; font-size: 56px; line-height: 68px; color: #4f4f4f; font-weight: bold;} #front-banner-3 h1 em {color: #5a5a5a; font-weight: 300; display: block; font-size: 42px;} #front-banner-3 .content {max-width: 880px; margin: 0 auto;} #front-banner-3 .btn {padding: 25px 35px; border-radius: 10px; margin-top: 60px;} #tagline-banner {font-size: 44px; line-height: 54px; color: #fcfcfa; background: #dd2a3c; text-align: center; font-weight: 300;} #tagline-banner > div {padding-top: 45px; padding-bottom: 45px;} #logo-banner {background: #df2637; padding: 40px 0;} #logo-banner .row {display: flex; justify-content: space-around;} #logo-banner .row > div {padding: 0 20px;} #logo-banner .slides {margin: 0; padding: 0; list-style-type: none; display: flex; align-items: center; height: 60px;} #logo-banner .slides li {display: none;} #logo-banner .row.three-wide, #logo-banner .row.two-wide {display: none;} #logo-banner .row.seven-wide > div {width: 14.28%;} #logo-banner .row.three-wide > div {width: 33.3333%;} #logo-banner img {display: block; margin: 0 auto; max-height: 60px;} .logo-card {width: 100%; height: 140px; line-height: 140px; text-align: center; margin: 0 auto;} .logo-card img {display: inline-block; margin: 0 auto; vertical-align: middle;} .logo-card .front, .logo-card .back {box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.1); background: #fff; height: 140px;} .logo-card .back {display: none;} .logo-cards {font-size: 0; margin: -3px;} .logo-cards > div {display: inline-block; vertical-align: middle; width: 33.3333%; padding: 3px;} /** * Pricing */ .pricing-plans {margin: 0 -10px 40px -10px; overflow: hidden; font-size: 15px; line-height: 19px; color: #7f7f7f;} .pricing-plans > div {float: left; width: 25%; padding: 0 10px; margin-top: 35px;} .pricing-plans > div > div {background: #fff; padding: 0 0 10000px 0; margin: 0 0 -10000px 0; position: relative;} .pricing-plans .highlight {background: #dc2636; padding: 10px 0; font-size: 11.8px; line-height: 15px; color: #fff; text-transform: uppercase; letter-spacing: 1px; text-align: center;} .pricing-plans .emphasize {margin-top: 0;} .pricing-plans .head {height: 140px; text-align: center; padding: 0 20px;} .pricing-plans .head .heading {margin: 0 0 10px 0; font-size: 24px; line-height: 28px; font-weight: bold; color: #4b4b4b; text-transform: uppercase;} .pricing-plans .pricing {border-top: solid 1px #f4f0eb; border-bottom: solid 1px #f4f0eb; padding: 20px; text-align: center; height: 150px;} .pricing-plans .pricing .price-wrapper {margin: 5px 0;} .pricing-plans .pricing .price {font-size: 48px; line-height: 52px; color: #dc2636; font-weight: bold; display: inline-block; vertical-align: middle;} .pricing-plans .pricing .period {display: inline-block; vertical-align: middle; text-align: left;} .pricing-plans .deets {padding: 20px 30px; min-height: 330px; border-top: solid 1px #f4f0eb;} .pricing-plans .deets ul {margin: 0; padding: 0; list-style-type: none;} .pricing-plans .deets li {margin: 0 0 5px 0;} .pricing-plans .action {padding: 0 30px 30px 30px;} .pricing-plans .action .btn {width: 100%; padding-left: 10px; padding-right: 10px;} .pricing-plans .action.multiple {text-align: center; font-size: 0;} .pricing-plans .action.multiple .btn {width: 46%; margin: 0 4px;} .pricing-plans small {font-size: 13px; line-height: 17px;} .pricing-plans.x2 {max-width: 700px; margin-left: auto; margin-right: auto;} .pricing-plans.x2 > div {width: 50%;} .pricing-plans.x3 > div {width: 33.3333%;} .pricing-plans.x5 > div {width: 20%;} .compare-plans {background: #548d9c url(images/bg-teal-banner.gif) repeat-x top left;} .compare-plans .intro {color: #fff;} .compare-plans .intro .heading {color: #fff;} .compare-plans .content {background: #f4f0eb; min-height: 400px;} /** * Press */ .press-banner#banner {background-image: url(images/banners/press.jpg);} .articles {font-size: 18px; line-height: 24px; font-weight: 300;} .articles article:first-child {margin-top: 0; padding-top: 0; border-top: none;} .articles article, .articles .more .articles article:first-child {margin-top: 40px; padding-top: 40px; border-top: solid 1px #dcd9d4;} .articles article > .image {float: left; width: 200px; margin: 5px 0 0 0; position: relative;} .articles article > .content {float: right; width: 100%; margin-left: -200px;} .articles article > .content > div {margin-left: 200px;} .articles .meta {font-size: 16px; margin: 0 0 10px 0;} .articles .heading {margin: 0 0 5px 0; font-size: 21px; line-height: 24px; font-weight: bold;} .articles .more {display: none;} .articles a {color: #e84958;} .articles a:hover {color: #000;} .events-grid {margin: 0 -15px; font-size: 18px; line-height: 24px; font-weight: 300; color: #fff;} .events-grid > .event {display: inline-block; vertical-align: top; width: 50%; margin: 0 0 30px 0; padding: 0 15px;} .events-grid > .event > .image {float: left; width: 200px; margin: 5px 0 0 0; position: relative;} .events-grid > .event > .content {float: right; width: 100%; margin-left: -200px;} .events-grid > .event > .content > div {margin-left: 200px;} .events-grid .heading {margin: 0 0 5px 0; font-size: 21px; line-height: 24px; font-weight: bold;} .events-grid a {color: #e84958;} .events-grid a:hover {color: #000;} .press-inquiries-block {font-size: 24px; line-height: 28px;} #banner.press-banner-v2 {background-image: url(images/bg-press-page-header.jpg);} #banner.press-banner-v2 > div:first-child {padding-bottom: 60px;} .press-banner-v2 h1 {margin: 0 0 60px 0; font-size: 58px; line-height: 62px; font-weight: bold; color: #4f4f4f;} .press-banner-v2 ul.social {margin-top: 50px;} .press-banner-v3 {background: url(images/v2/bg-page-header-dots.png) no-repeat center top; text-align: center;} .press-banner-v3 > div {padding-top: 100px; padding-bottom: 100px;} .press-banner-v3 h1 {margin: 0 0 60px 0; font-size: 58px; line-height: 62px; font-weight: 300; color: #1a3e5c;} .press-banner-v3 ul.social {margin-top: 50px;} .company-news {display: flex; flex-wrap: wrap; background: #f5f6f8; position: relative;} .company-news > .left {width: calc(50% - 350px); display: flex; align-items: center; text-align: center; justify-content: flex-end; color: #fff;} .company-news > .left > div {padding: 40px; width: 100%; max-width: 400px;} .company-news > .right {width: calc(50% + 350px); padding: 40px 0 50px 0;} .company-news h2 {margin: 0 0 20px 0; font-size: 42px; line-height: 46px; color: #fff; font-weight: bold;} .company-news .left ul {margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: space-between; font-size: 14px; line-height: 18px; letter-spacing: 1px; font-weight: 300; text-transform: uppercase;} /* .company-news .left li:before {font-family: 'FontAwesome'; content: "\f046"; margin-right: 5px; font-size: 20px; display: inline-block; vertical-align: middle;} */ .company-news .stories {max-width: 1200px;} .company-news .stories article {padding: 0 40px; display: none;} .company-news .stories article + article {border-left: solid 1px #d1cfcb;} .company-news .stories h3 {margin: 0 0 20px 0; font-size: 18px; line-height: 27px; color: #585858; font-weight: bold;} .company-news .stories h3 a {color: #585858;} .company-news .stories h3 a:focus, .company-news .stories h3 a:hover {text-decoration: underline;} .company-news .stories .thumb img {display: block; margin: 0 0 30px 0;} .company-news .stories .date {margin: 0 0 5px 0; font-size: 15px; line-height: 19px; color: #585858; font-weight: 300; text-transform: uppercase;} .company-news .stories .slick-track {display: flex;} .company-news .stories .slick-track > div + div {border-left: solid 1px #d1cfcb;} .company-news .stories.slick-initialized article {display: block;} .company-news .actions {position: absolute; right: 0; bottom: 0; display: flex;} .company-news .actions .btn {border-radius: 0; padding: 10px 30px; font-size: 14px; line-height: 18px; background: #fe414d; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;} .company-news .actions .previous {background: #5e5e5e; opacity: 1;} .company-news .actions .previous.inactive {opacity: 0; pointer-events: none;} input.custom[type="checkbox"] {clip: rect(0px, 0px, 0px, 0px); position: absolute; margin: 0;} input.custom[type="checkbox"] + label {display: inline-block; position: relative; padding: 0 0 0 23px; cursor: pointer;} input.custom[type="checkbox"] + label:before {position: absolute; display: block; content: ""; width: 14px; height: 14px; top: 3px; left: 0; border: solid 2px #fff;} input.custom[type="checkbox"]:checked + label:after {position: absolute; top: 0px; left: 1px; font-family: 'FontAwesome'; content: "\f00c"; font-size: 16px;} .media-kit > div {padding-top: 50px; padding-bottom: 70px; position: relative;} .media-kit header {margin: 0 auto 80px auto; max-width: 670px; font-size: 24px; line-height: 32px; font-weight: 300; color: #615f5f; text-align: center; position: relative;} .media-kit header .content {border: solid 1px #b1b1b1; border-width: 0 1px; padding: 0 20px;} .media-kit header h3 {margin: 0 0 20px 0; font-size: 14px; line-height: 18px; color: #b1b1b1; text-transform: uppercase; font-weight: bold; position: absolute; left: -120px; top: calc(50% - 10px);} .media-kit h2 {margin: 0 0 20px 0; padding: 0 0 20px 0; font-size: 21px; line-height: 25px; text-transform: uppercase; font-weight: bold; color: #232949; position: relative;} .media-kit h2:after {position: absolute; content: ""; width: 100px; height: 1px; background: #dcd9d4; left: calc(50% - 50px); bottom: 0;} .media-kit-facts {font-size: 19px; line-height: 23px; color: #615f5f; font-weight: 300; text-transform: uppercase;} .media-kit-facts h3 {margin: 0 0 20px 0; font-size: 23px; line-height: 27px; color: #b1b1b1; font-weight: bold;} .media-kit-facts > div {display: flex; flex-wrap: wrap; align-items: center; position: relative; border-bottom: solid 5px #f6f5f5; margin: 0 0 50px 0; position: relative;} .media-kit-facts > div:before {position: absolute; content: ""; left: calc(50% - 2px); width: 4px; top: 0; bottom: 0; background: #f6f5f5;} .media-kit-facts > div > div {width: 50%;} .media-kit-facts .left {text-align: center; padding: 20px;} .media-kit-facts .left em {font-size: 110px; line-height: 110px; font-weight: bold; color: #dd2536; font-style: normal; display: block; margin: 0 0 15px 0;} .media-kit-facts .right {display: flex; flex-wrap: wrap; padding: 0 50px;} .media-kit-facts .right > div {width: 50%; padding: 0 0 50px 0;} .media-kit-facts .right em {font-size: 60px; line-height: 60px; display: block; margin: 0 0 15px 0; color: #232949; font-weight: bold; font-style: normal;} .media-download-buttons {display: flex; flex-wrap: wrap; justify-content: space-between;} .media-download-buttons > a {width: calc(50% - 10px); background: url(images/bg-logo-download.jpg) no-repeat center center; background-size: cover; font-size: 22px; line-height: 26px; font-weight: bold; text-transform: uppercase; color: #fff; letter-spacing: 1px; text-decoration: none; text-align: center; display: flex; align-items: center; min-height: 180px; text-align: center; justify-content: center;} .media-download-buttons > a > span:before {display: inline-block; content: ""; width: 96px; height: 96px; background: url(images/icons/heart.png) no-repeat center center; margin-right: 20px; vertical-align: middle;} .media-download-buttons > a.image-downloads {background-image: url(images/bg-image-download.jpg);} .media-download-buttons > a.image-downloads > span:before {background-image: url(images/icons/camera.png);} .press-connect {font-size: 24px; line-height: 32px; color: #615f5f; font-weight: 300;} .press-connect > div {padding-top: 90px; padding-bottom: 60px;} .press-connect .content {margin: 0 auto; max-width: 640px; text-align: center;} .press-events > div {padding-top: 40px; padding-bottom: 90px;} .press-events h2 {margin: 0 0 20px 0; padding: 0 0 20px 0; font-size: 21px; line-height: 25px; text-transform: uppercase; font-weight: bold; color: #fff; position: relative; text-align: center;} .press-events h2:after {position: absolute; content: ""; width: 60px; height: 1px; background: #dcd9d4; left: calc(50% - 30px); bottom: 0;} .press-connect {position: relative;} .press-connect:before {position: absolute; content: ""; width: 125px; height: 125px; background: url(images/v2/logo-icon.svg) no-repeat center center; top: -65px; left: calc(50% - 62px);} .press-connect > div {padding-top: 100px; padding-bottom: 100px;} .press-connect h2 {margin: 0 0 20px 0; padding: 0 0 20px 0; font-size: 21px; line-height: 25px; text-transform: uppercase; font-weight: bold; color: #232949; position: relative; text-align: center;} .press-connect h2:after {position: absolute; content: ""; width: 60px; height: 1px; background: #dcd9d4; left: calc(50% - 30px); bottom: 0;} .press-connect ul.social {margin: 50px 0;} /** * Features */ .callouts > div > div {text-align: center;} .features-banner#banner {border-bottom: solid 20px #f0f0f0; font-size: 42px; line-height: 48px; background-position: center bottom; background-color: #fff;} /* .features-banner#banner > div {min-height: 550px; max-width: 780px; padding-top: 200px;} .features-banner#banner .heading {font-size: 48px; line-height: 52px; color: #2d2d2d;} */ .features-banner#banner > div {min-height: 620px; max-width: 1000px; padding-top: 200px;} .features-banner#banner .heading {font-size: 58px; line-height: 68px; color: #4f4f4f; font-weight: bold;} .screenshots-section .lower > div {padding-bottom: 0;} .screenshots-section .desktop-screenshot img {display: block; margin: 0 auto;} .screenshots-section .content {position: relative; padding: 0 300px 0 0; font-size: 18px; line-height: 27px; font-weight: 300;} .screenshots-section .content > .left {float: left; width: 45%; font-size: 30px; line-height: 34px; padding: 0 40px 0 0;} .screenshots-section .content > .left .heading {margin: 0 0 10px 0; font-size: 40px; line-height: 44px; color: #5ca2b4; font-weight: normal;} .screenshots-section .content > .left .heading a {color: #5ca2b4;} .screenshots-section .content > .right {float: left; width: 55%;} .screenshots-section .content .mobile-screenshot {position: absolute; right: 35px; top: -367px;} #reporting-and-analytics {background-image: url(images/banners/analytics.jpg); color: #fff;} #reporting-and-analytics .heading, #reporting-and-analytics .line-heading {color: #fff;} section > .next-container {margin-top: -7em; padding-bottom: 6em;} section > div > .prev-feature {float: left; margin-top: 2em;} section > div > .next-feature {float: right; margin-top: 2em;} .customer-success .upper {padding-bottom: 0;} .customer-success .upper .content {display: table; table-layout: fixed; font-size: 24px; line-height: 32px; font-weight: 300;} .customer-success .upper .content > div {display: table-cell; vertical-align: middle; width: 48%; padding: 0 20px 20px 0;} .customer-success .upper .content > .right {width: 52%; vertical-align: bottom; padding: 0;} .customer-success .upper .content > .right img {display: block; width: 100%; margin: 0 auto;} .customer-success .upper .content h2 {margin: 0 0 20px 0; font-size: 21px; line-height: 25px; color: #e84958; letter-spacing: 1px; text-transform: uppercase; font-weight: bold;} .customer-success .upper .content h3 {margin: 0 0 10px 0; font-size: 36px; line-height: 40px; color: #2d2d2d;} .customer-success .lower > div {padding-bottom: 0;} .customer-success .lower .content > .left {float: left; width: 33.3333%; padding: 0 20px 0 0;} .customer-success .lower .content > .right {float: left; width: 66.6666%;} .customer-success .lower .content h2 {margin: 0 0 20px 0; font-size: 40px; line-height: 44px; color: #e84958;} .gallery-fallback {display: none;} .gallery-fallback img {display: block; margin: 0 auto;} #integrations {background-image: url(images/banners/integrations.jpg); color: #fff;} #integrations > div {max-width: 930px;} #integrations .heading, #integrations .line-heading {color: #fff;} #integrations .line-heading:after {background: #bae0ea;} #integrations .content {background: #fff; padding: 40px 20px; color: #585858; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);} .platforms-and-languages .upper {padding-top: 0; padding-bottom: 0;} .platforms-and-languages .upper .content {display: table; table-layout: fixed; font-size: 24px; line-height: 32px; font-weight: 300;} .platforms-and-languages .upper .content > div {display: table-cell; vertical-align: middle; width: 48%; padding: 60px 20px 60px 0;} .platforms-and-languages .upper .content > .right {width: 52%; vertical-align: middle; padding: 20px 0;} .platforms-and-languages .upper .content > .right img {display: block; width: 100%;} .platforms-and-languages .upper .content h2 {margin: 0 0 20px 0; font-size: 21px; line-height: 25px; color: #e84958; letter-spacing: 1px; text-transform: uppercase; font-weight: bold;} .platforms-and-languages .upper .content h3 {margin: 0 0 10px 0; font-size: 36px; line-height: 40px; color: #2d2d2d;} .platforms-and-languages .lower {font-size: 18px; line-height: 27px; font-weight: 300;} .platforms-and-languages .lower .heading {margin: 0 0 10px 0; font-size: 30px; line-height: 34px; color: #e84958;} .platforms-and-languages .lower .content > .left {float: left; width: 35%; padding: 0 60px 40px 0;} .platforms-and-languages .lower .content > .right {float: left; width: 65%;} .platforms-and-languages .lower .content .cols > div {float: left; width: 33.3333%; padding: 0 20px 0 0;} .logo-strip {display: table; text-align: center; table-layout: fixed;} .logo-strip > div {display: table-cell; width: 33.3333%; vertical-align: middle; padding: 0 10px;} .logo-strip img {display: block; width: 100%;} .targets {margin: 0 -30px 50px -30px; font-size: 21px; line-height: 25px; font-weight: bold; text-align: center;} .targets > div {float: left; width: 33.3333%; padding: 0 30px;} .targets img {display: block; margin: 0 auto 20px auto;} .targets .green {color: #71b095;} .targets .red {color: #e84958;} .targets .blue {color: #4d8e9e;} .feature-studies-grid {text-align: center; margin: 0 -40px;} .feature-studies-grid > div {display: inline-block; vertical-align: bottom; width: 33.3333%; padding: 0 40px;} .feature-studies-grid .heading {margin: 0 0 30px 0; font-size: 30px; line-height: 34px; color: #4d4d4d; min-height: 68px; font-weight: normal; font-family: 'Lato', Arial, Verdana, sans-serif;} /** * Contact */ .split-content-blocks {position: relative; text-align: left; font-size: 21px; line-height: 25px; font-weight: 300;} .split-content-blocks:before, .split-content-blocks:after {position: absolute; display: block; content: ""; top: 0; left: 0; right: 50%; bottom: 0; margin: 0 25px 0 0; background: rgba(250,248,246,0.8); box-shadow: 2px 2px 0 2px rgba(0,0,0,0.1); z-index: 1;} .split-content-blocks:after {left: 50%; right: 0; margin: 0 0 0 25px;} .split-content-blocks h3 {margin: 0 0 20px 0; font-size: 24px; line-height: 28px; color: #dc2636; font-weight: normal;} .split-content-blocks .left, .split-content-blocks .right {float: left; width: 50%; position: relative; padding: 30px 75px 30px 50px; z-index: 2;} .split-content-blocks .right {padding-left: 75px;} .split-content-blocks .map-container {border: solid 2px #dcd9d4; position: relative; margin: 0 -20px; padding-bottom: 65%;} .split-content-blocks .map-container > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .contact-banner#banner {background-image: url(images/banners/contact.jpg);} .contact-banner#banner > div {padding-bottom: 120px;} .contact-banner#banner .content {max-width: 600px; margin: 0 auto;} .gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium, .gform_wrapper textarea.medium {width: 100%;} .gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"], .gform_wrapper textarea.medium, .gform_wrapper textarea.large {padding: 10px; text-indent: 0; font-size: 21px; line-height: 25px; border: solid 2px #dcd9d4; border-radius: 5px;} body .gform_wrapper label.gfield_label + div.ginput_container {margin-top: 0;} .gform_wrapper ul li.gfield {margin: 0 0 15px 0;} .gform_wrapper .gform_footer {margin: 0; padding: 0;} .gform_wrapper .gform_button, .gform_wrapper input[type="submit"] {border-radius: 5px;} .gform_wrapper div.validation_error {border-top-color: #dc2636; border-bottom-color: #dc2636; color: #dc2636; font-size: inherit;} .contact-form .top_label .gfield_label {display: none;} /** * Team */ .team-banner#banner {min-height: 0; background-image: url(images/banners/team.jpg);} .team-banner#banner > div {min-height: 0; padding-bottom: 0;} /* .team-banner#banner .lower > div {height: 400px; width: 995px; margin: 0 auto; font-size: 0; line-height: 0; position: relative; margin-top: -100px; background: url(images/bg-team-banner-center.png) no-repeat center top;} .team-banner#banner .lower > div:before {position: absolute; top: 0; left: -1000px; width: 1000px; height: 400px; background: url(images/bg-team-banner-left.png) repeat-x right bottom; content: "";} .team-banner#banner .lower > div:after {position: absolute; top: 0; right: -1000px; width: 1000px; height: 400px; background: url(images/bg-team-banner-right.png) repeat-x left bottom; content: "";} */ .team-banner#banner .lower > div {height: 120px; width: 995px; margin: 0 auto; font-size: 0; line-height: 0; position: relative; margin-top: -100px;} .team-grid {margin: 0 -20px; text-align: center; font-size: 14px; line-height: 18px; font-weight: 300; position: relative;} .team-grid > div {padding: 0 20px; width: 25%; float: left; margin: 0 0 40px 0;} /* .team-grid .bio {background: #dc2636; position: relative; margin-top: 30px; display: none; text-align: left; color: #fff; padding: 20px; font-size: 18px; line-height: 22px;} .team-grid .bio:before {position: absolute; content: ""; border: solid 20px #dc2636; border-color: transparent transparent #dc2636 transparent; left: 50%; margin-left: -20px; top: -40px;} */ .team-grid .bio {display: none;} .team-grid .photo {padding-bottom: 100%; background: no-repeat center top; background-size: 100%; transition: 0.25s ease; position: relative;} .team-grid a:hover .photo, .team-grid a.active .photo {background-position: center 100%;} .team-grid a.active .photo:after {position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; border: solid 10px rgba(223,38,55,0.6);} .team-grid h4 {margin: 10px 0 0 0; font-size: 18px; line-height: 22px; color: #2d2d2d; font-weight: normal;} .join-the-team {max-width: 980px; margin: 0 auto 100px auto;} .join-the-team > .left {float: left; width: 40%;} .join-the-team > .left > div {display: table; margin: 0 auto;} .join-the-team > .left > div > div {display: table-cell; vertical-align: middle; padding: 0 40px; width: 50%;} .join-the-team > .left > div > div + div {border-left: solid 1px #ccc;} .join-the-team > .left img {width: 100%; display: block;} .join-the-team > .right {float: left; width: 60%; padding: 0 0 0 40px; max-width: 500px;} .join-the-team .intro {text-align: left;} #bio-dialog {background: #fff; padding: 30px; max-width: 600px; margin: 0 auto; font-weight: 300; position: relative;} #bio-dialog h4 {margin: 0; font-size: 18px; line-height: 22px; color: #2d2d2d; font-weight: normal;} #bio-dialog .head {margin: 0 0 20px 0;} #bio-dialog .photo {float: left; width: 80px; height: 80px; background: no-repeat center top; background-size: 100%;} #bio-dialog .photo img {display: block; border-radius: 50%;} #bio-dialog .deets {float: right; width: 100%; margin-left: -100px; height: 80px;} #bio-dialog .deets > div {margin-left: 100px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} #bio-dialog .title {font-size: 16px; line-height: 20px; color: #e84958; margin: 0 0 20px 0;} /** * About */ .about-banner#banner {min-height: 465px; background-image: url(images/banners/about.jpg);} .two-photo-banner-link a {display: block; font-size: 21px; line-height: 25px; font-weight: bold; text-align: center; letter-spacing: 1px; color: #fff; text-transform: uppercase; position: relative;} .two-photo-banner-link a img {display: block; float: left; width: 50%;} .two-photo-banner-link .section {background: rgba(93,161,180,0.7); position: absolute; left: 0; bottom: 0; right: 0;} .two-photo-banner-link .section > div {padding-top: 20px; padding-bottom: 20px;} .making-mobile-better {max-width: 980px; margin: 0 auto;} .making-mobile-better > .left {float: left; width: 35%; padding: 0 40px 0 0;} .making-mobile-better > .right {float: left; width: 65%;} .making-mobile-better .heading {margin: 0 0 20px 0; padding: 0 0 20px 0; font-size: 40px; line-height: 44px; font-weight: normal; border-bottom: solid 1px #e84958;} .we-are-apptentive {margin: 0; padding: 150px 0 0 0; font-size: 65px; line-height: 69px; color: #2d2d2d; font-weight: normal; font-family: 'Raleway', Arial, Verdana, sans-serif; text-align: center; background: url(images/v2/logo-icon.svg) no-repeat center top; background-size: 130px 130px;} .we-are-apptentive span {display: inline-block; position: relative; top: -15px; width: 100%; max-width: 337px; height: 67px; font-size: 0; text-indent: -10000px; background: url(images/apptentive-text.png) no-repeat; background-size: 100%;} /** * ROI Calculator */ .roi-calc-heading {width: 427px; height: 70px; text-indent: -10000px; background: url(images/roi-calculator.png) no-repeat; margin: 0 auto 20px auto;} #banner.roi-calc-banner {font-size: 35px; line-height: 39px; text-align: center; font-family: 'Raleway', Arial, Verdana, sans-serif; font-weight: 700;} #banner.roi-calc-banner small {font-size: 15px; line-height: 19px; color: #90877b; font-style: italic; font-family: 'Lato', Arial, Verdana, sans-serif; font-weight: normal;} .intro-ribbon {font-size: 16px; line-height: 20px; color: #4c463e; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-family: 'Raleway', Arial, Verdana, sans-serif; position: relative;} .intro-ribbon:after {position: absolute; content: ""; bottom: -40px; left: 50%; margin-left: -10px; width: 20px; height: 20px; border: solid 20px transparent; border-top-color: #f4f0eb;} .intro-ribbon > div {padding-top: 20px; padding-bottom: 20px;} .roi-calc-slider {background: #fff;} .roi-calc-slider select {font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 18px; line-height: 22px; padding: 5px; border: solid 2px #e0dbd5;} .roi-calc-slider .slides {margin: 0; padding: 0; list-style-type: none;} .roi-calc-slider .slide > div {padding-top: 90px; padding-bottom: 90px;} .roi-calc-slider .question {margin: 0 0 60px 0; padding: 0 0 40px 0; border-bottom: solid 1px #dfd7cf; text-align: center;} .roi-calc-slider .question h2 {margin: 0; font-size: 40px; line-height: 44px;} .roi-calc-slider .question .hint {font-size: 24px; line-height: 28px; color: #939393; font-style: italic; font-weight: 300; margin: 20px 0 0 0;} .roi-calc-slider .nav {margin: 40px 0 20px 0; text-align: center;} .roi-calc-slider .page {text-align: center; font-style: italic; font-size: 21px; color: #6b6561; margin: 0 0 60px 0;} .roi-calc-slider .answers .col {float: left; width: 50%; padding: 0 40px 0 0;} .roi-calc-data-inputs select {font-family: 'Lato', Arial, Verdana, sans-serif; font-size: 18px; line-height: 22px; padding: 5px; border: solid 2px #e0dbd5;} .roi-calc-data-inputs .label {float: left; width: 50%; text-align: right; font-size: 18px; line-height: 22px; text-transform: uppercase; color: #71b095; font-weight: bold; padding: 7px 20px 0 0;} .roi-calc-data-inputs .field {float: left; width: 50%;} .roi-calc-data-inputs .field select {width: 200px; display: inline-block; vertical-align: middle; margin: 0 10px 0 0;} .roi-calc-data-inputs .field a.help-icon {vertical-align: middle;} .roi-calc-data-inputs .input + .input {margin: 20px 0 0 0;} .box-radios {margin: 0; padding: 0; list-style-type: none; display: table; table-layout: fixed; width: 100%;} .box-radios li {display: table-cell; vertical-align: middle; padding: 0 3px;} .box-radios .box-radio {width: 100%;} .box-radio {clip: rect(0px, 0px, 0px, 0px); position: absolute; margin: 0;} .box-radio + label {display: block; position: relative; padding: 20px; border: solid 2px #dfd9d3; text-align: center; font-size: 16px; line-height: 20px; text-transform: uppercase; color: #383636; margin: 0; cursor: pointer;} .box-radio:checked + label {background: #71b095; border-color: #71b095; color: #fff;} .box-checkboxes {margin: 0; padding: 0; list-style-type: none;} .box-checkboxes li {margin: 0 0 10px 0;} .box-checkbox {clip: rect(0px, 0px, 0px, 0px); position: absolute; margin: 0;} .box-checkbox + label {display: block; position: relative; font-size: 21px; line-height: 25px; color: #383636; margin: 0; cursor: pointer; padding: 0 0 0 35px; font-weight: 300;} .box-checkbox + label:before {position: absolute; content: ""; top: 3px; left: 0; width: 21px; height: 21px; border: solid 2px #dfd9d3;} .box-checkbox:checked + label:before {background: #71b095; border-color: #71b095;} a.help-icon {display: inline-block; font-size: 18px; line-height: 28px; color: #dc2636; text-align: center; width: 28px; height: 28px; border-radius: 14px; background: #f4f0eb;} .metric-grid {display: table; table-layout: fixed; font-size: 24px; line-height: 28px; margin: 50px 0; width: 100%;} .metric-grid > div {display: table-cell; width: 33.3333%; text-align: center; vertical-align: middle; padding: 40px 20px;} .metric-grid > div + div {border-left: solid 1px #dfd7cf;} .metric-grid .label {display: none;} .metric-grid .value {display: block; margin: 0 0 20px 0; font-size: 72px; line-height: 72px; font-weight: 900; color: #dc2636;} .metric-grid .metric {display: block; font-size: 30px; line-height: 34px; margin: 10px 0 0 0;} /* .metric-grid .rating-increase {padding: 16px 0 12px 0;} .metric-grid .rating-increase.stack {padding: 0;} */ .metric-grid + .metric-grid {margin: -70px 0 50px 0;} .metric-grid + .metric-grid > div {padding-top: 0;} .metric-grid + .metric-grid .label {display: block;} .metric-grid:last-child {margin-bottom: 0;} ul.stars {margin: 0; padding: 0; list-style-type: none; display: inline-block; vertical-align: middle;} ul.stars li {display: inline-block; margin: 0 2px;} .star {background: url(images/rating-star.png) no-repeat left top; display: inline-block; width: 39px; height: 37px; position: relative;} .star.full {background-position: left -37px;} .star.half {width: 20px;} .star.half-full:after {position: absolute; content: ""; top: 0; left: 0; width: 20px; height: 37px; background: url(images/rating-star.png) no-repeat left -37px;} .rating-increase {margin: 0 0 20px 0;} .rating-increase .label {display: inline-block; vertical-align: middle; font-size: 30px; line-height: 30px; font-weight: 300; margin: 0 5px;} .rating-increase.stack .label {display: block; margin: 5px 0 10px 0;} .roi-calc-results-callout {background-image: url(images/roi-calc-email-banner.jpg); font-size: 28px; line-height: 32px; font-weight: bold; color: #fff;} .roi-calc-results-callout > div {padding-top: 50px; padding-bottom: 50px;} .roi-calc-results-callout > div > div {display: table; margin: 0 auto;} .roi-calc-results-callout > div > div > div {display: table-cell; vertical-align: middle;} .roi-calc-results-callout .content {padding: 0 20px 0 0;} .roi-calc-report-callout {background-image: url(images/roi-calc-email-banner.jpg); font-size: 25px; line-height: 35px; color: #fff; text-align: center;} .roi-calc-report-callout > div {padding-top: 40px; padding-bottom: 40px;} .roi-calc-report-callout strong {font-size: 28px;} .roi-calc-report-callout .btn {margin-top: 10px;} .dialog {background: #fff; position: relative; margin: 0 auto;} .dialog .hs-input {width: 100%; padding: 10px; border: solid 1px #ccc; font-family: 'Lato', Arial, Verdana, Sans-serif; font-size: 18px; line-height: 22px; font-weight: normal;} .dialog form > div + div {margin-top: 15px;} .dialog label {display: block; margin: 0 0 2px 0;} .dialog .actions {text-align: center;} .dialog .hs-button {width: auto;} .dialog .hs-error-msgs {margin: 0; padding: 10px 20px; list-style-type: none; background: #dc2636; color: #fff;} .dialog .hs-richtext {margin: 0 0 20px 0;} .chart-columns {display: table; margin: 0 auto; font-size: 18px; line-height: 22px; text-align: center;} .chart-columns > div {display: table-cell; vertical-align: middle; padding: 0 40px;} .chart-columns > div + div {border-left: solid 1px #dfd7cf;} .chart-columns h3 {margin: 0 0 10px 0; font-size: 24px; line-height: 28px; font-weight: bold;} #roi-calc-lead-form-dialog {padding: 40px; max-width: 600px;} #roi-calc-request-demo-dialog {padding: 40px; max-width: 600px;} /** * Customer Love template */ #banner.video-banner > div {padding-bottom: 0; padding-left: 0; padding-right: 0;} .video-banner .content {padding: 0 20px;} .video-banner .video {position: relative; padding-bottom: 56.25%;} .video-banner .video video {position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%;} .video-banner .video .play {position: absolute; top: 50%; left: 50%; margin: -73px 0 0 -73px; display: block; border-radius: 50%; border: solid 10px #fff; background: #dd2a3b;} .video-banner .video .play img {display: block;} #love-banner {overflow: hidden;} #love-flow {position: relative; margin: 40px 0 0 150px;} #love-flow > div {background: #fff; box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.2); padding: 0 0 0 175px;} #love-flow:before {position: absolute; content: ""; top: -40px; left: -1084px; width: 1263px; height: 1233px; background: url(images/phone-in-hand.png) no-repeat;} #love-flow h2 {margin: 0; padding: 15px 0; font-size: 25px; line-height: 29px; color: #fff; font-weight: bold; text-align: center; background: #82c4a6; position: relative;} #love-flow h3 {margin: 0 0 5px 0; font-size: 13px; line-height: 17px; color: #2d2d2d; text-transform: uppercase; font-weight: normal;} #love-flow h2:before {position: absolute; content: ""; width: 46px; height: 29px; background: url(images/long-white-arrow.png) no-repeat; left: 0; top: 15px;} #love-flow ul {margin: 0; padding: 20px 0 25px; list-style-type: none; text-align: center; display: flex; flex-wrap: wrap; justify-content: center;} #love-flow li {width: 20%; padding: 0 20px;} #love-flow a {display: block; font-size: 18px; line-height: 22px; color: #71b095; text-decoration: none; font-weight: bold; text-align: center;} #love-flow img {display: block; margin: 0 auto 10px auto;} #love-flow .no h2 {background: #5ca2b4;} #love-flow .no a {color: #5ca2b4;} #love-flow a:hover, #love-flow .no a:hover {color: #000;} #banner.video-banner {background: #fff; font-size: 32px; line-height: 38px; border-bottom: solid 20px #f0f0f0;} #banner.video-banner h1 {margin: 0 0 20px 0; font-size: 60px; line-height: 64px;} #banner.video-banner .btn {position: relative; top: -3px; margin-left: 10px;} /** * 3D Gallery overrides */ .dg-wrapper {width: 280px; height: 475px;} .dg-wrapper a {width: 280px; height: 475px; border-radius: 10px; background: #b7b3ad;} .dg-wrapper a img {padding: 0; border-radius: 10px;} .dg-container {height: auto; max-width: 800px; margin: 0 auto;} .dg-container .dg-wrapper a {cursor: default;} .dg-container nav {position: static; bottom: auto; left: auto; margin: 0; width: auto;} .dg-container nav a {position: absolute; top: 50%; left: -80px; display: block; text-indent: 0; font-size: 80px; color: #000;} .dg-container nav a.dg-next {left: auto; right: -80px;} .dg-container nav span {text-indent: 0; float: none; width: auto; height: auto; opacity: 0.1; transition: 0.25s ease;} .dg-container nav a:hover span {opacity: 1;} /** * One-Pager template */ .one-pager {font-weight: 300; font-size: 24px; line-height: 32px;} .one-pager header {text-align: center; margin: 0 0 40px 0;} .one-pager footer {text-align: center; margin: 40px 0 0 0;} .one-pager h1 {margin: 0 0 20px 0; font-size: 52px; line-height: 56px; color: #dc2636;} .one-pager h2 {margin: 0 0 20px 0; font-size: 40px; line-height: 44px; font-weight: 300;} .one-pager h3 {margin: 0 0 20px 0; font-size: 23px; line-height: 27px; font-weight: 500;} .one-pager .beige:not(:first-child) {background: #f9f8f5;} .one-pager .section:last-child > div {padding-bottom: 70px;} .one-pager .line-heading {font-size: 23px; line-height: 25px;} .op-two-cols {display: flex; flex-wrap: wrap; align-items: center; padding: 70px 0;} .op-two-cols > .photo {width: 50%; padding: 0 30px 0 0;} .op-two-cols > .photo img {display: block; margin: 0 auto;} .op-two-cols > .content {width: 50%; padding: 0 0 0 30px;} .op-two-cols.swap {flex-direction: row-reverse;} .op-two-cols.swap > .photo {padding: 0 0 0 30px;} .op-two-cols.swap > .content {padding: 0 30px 0 0;} .op-two-cols.skinny-photo {padding: 50px 0;} .op-two-cols.skinny-photo > .photo {width: 25%; padding: 0;} .op-two-cols.skinny-photo > .content {width: 75%; padding: 0 0 0 150px;} .op-two-cols.skinny-photo.swap > .content {padding: 0 150px 0 0;} .op-two-cols .btn {margin-right: 5px;} .op-checkmarks-section {padding: 70px 0;} .op-checkmarks-section .body {display: flex; flex-wrap: wrap; align-items: flex-start;} .op-checkmarks-section .body > .headline {width: 33.3333%; padding: 0 40px 0 0;} .op-checkmarks-section .body > .headline h2 {color: #dc2636;} .op-checkmarks-section .body > .content {width: 66.6666%;} .op-checkmarks-section .checkmarks {display: flex; flex-wrap: wrap; align-items: flex-start;} .op-checkmarks-section .checkmarks > li {width: 50%; padding-right: 40px;} .op-phone-banner {padding: 40px 0; display: flex; flex-wrap: wrap; align-items: flex-start;} .op-phone-banner > .phone {width: 25%; position: relative; z-index: 5;} .op-phone-banner > .phone > div {position: relative;} .op-phone-banner > .phone img {display: block; margin: 0 auto;} .op-phone-banner > .content {width: 75%; padding: 60px 0 100px 70px; position: relative;} .op-phone-banner > .content:before {position: absolute; content: ""; top: -40px; left: -10000px; right: -10000px; bottom: 0; background: #fff;} .op-phone-banner > .content > div {position: relative;} .white .op-phone-banner > .content:before {background-color: #f9f8f5;} .op-icon-grid-section {padding: 60px 0;} .op-icon-grid-section > .items {display: flex; flex-wrap: wrap; margin: 0 -30px -70px -30px; text-align: center; font-size: 18px; line-height: 27px; justify-content: center;} .op-icon-grid-section > .items > div {width: 33.3333%; padding: 0 30px 120px 30px; position: relative;} .op-icon-grid-section > .items img {display: block; max-width: 130px; margin: 0 auto 20px auto;} .op-icon-grid-section h3 {font-weight: bold;} .op-icon-grid-section .action {position: absolute; left: 0; right: 0; bottom: 70px;} .op-generic {padding: 40px 0; text-align: center;} body.page-template-template-one-pager:not(.page-id-39992) #header nav, body.page-template-template-one-pager:not(.page-id-39992) #footer .upper {display: none;} #one-pager > section:first-child .btn {min-width: 220px; margin: 0 5px 20px 0;} #one-pager > section:first-child .content p:nth-last-child(2) {margin-bottom: 30px;} /** * Careers */ #banner.careers-intro {font-size: 26px; line-height: 34px; font-weight: normal; background: #fff; position: relative;} #banner.careers-intro h1 {margin: 0 0 20px 0; font-size: 58px; line-height: 62px; font-weight: 300; color: #1a3e5c;} #banner.careers-intro h2 {margin: 0 0 10px 0; font-size: 20px; line-height: 24px; font-weight: bold; color: #1a3e5c; text-transform: uppercase; letter-spacing: 1px;} #banner.careers-intro .content {display: flex; flex-wrap: wrap; align-items: center; text-align: left;} #banner.careers-intro .content > .text {width: 45%; padding: 0 70px 0 0;} #banner.careers-intro .content > .photo {width: 55%; position: relative;} /* max-width: 579px; */ #banner.careers-intro .content > .photo img {display: block;} #banner.careers-intro .content > .photo img.placeholder {visibility: hidden;} /* #banner.careers-intro .content > .photo:before {position: absolute; content: ""; width: 120%; top: -30px; height: 100%; right: -120px; background: url(images/v2/bg-careers-page-dots-2.png) no-repeat center center; background-size: contain;} */ #banner.careers-intro .careers-intro-slider {position: absolute; top: 0; left: 0; display: none;} #banner.careers-intro .careers-intro-slider.ready {visibility: visible;} #banner.careers-intro .careers-intro-slider .slider {position: relative;} #banner.careers-intro .careers-intro-slider.slider-1 {top: 0.5%; padding: 0 31% 0 0.5%; z-index: 1;} #banner.careers-intro .careers-intro-slider.slider-2 {top: 52%; padding: 0 50% 0 10%; z-index: 2;} #banner.careers-intro .careers-intro-slider.slider-3 {top: 5%; padding: 0 0 0 74%; display: block; z-index: 3; display: none;} #banner.careers-intro .careers-intro-slider.slider-4 {top: 42%; padding: 0 5% 0 75%; z-index: 5;} #banner.careers-intro .careers-intro-slider.slider-5 {top: 60%; padding: 0 3% 0 62%; z-index: 4;} #banner.careers-intro .careers-intro-slider.slider-1 img, #banner.careers-intro .careers-intro-slider.slider-2 img {box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.2);} /* #banner.careers-intro .careers-intro-slider img {display: none;} */ #banner.careers-intro .careers-intro-slider.slick-initialized img {display: block;} #banner.careers-intro .social {margin: 40px 0 40px -15px;} #banner.careers-intro .slides {margin: 0; padding: 0; list-style-type: none;} .values-grid {display: flex; flex-wrap: wrap; font-size: 17px; line-height: 22px; font-weight: 300; background: #fff;} .values-grid h2 {margin: 0 0 20px 0; font-size: 32px; line-height: 36px; text-transform: uppercase; color: #fff; font-weight: bold;} .values-grid h3 {margin: 0 0 10px 0; font-size: 17px; line-height: 21px; text-transform: uppercase; color: #232949; font-weight: bold; letter-spacing: 1px;} .values-grid > div {width: 20%; display: flex; align-items: center;} .values-grid > div.grid-intro {background: #0c3252; width: 40%; padding: 40px 60px; font-size: 25px; line-height: normal; color: #fff; text-align: left;} .values-grid > div.grid-intro > div {max-width: 400px;} .values-grid .text > div {padding: 40px;} .values-grid .photo {background: no-repeat center center; background-size: cover; padding-bottom: 20%;} h2.bar {margin: 0 auto 20px auto; font-size: 21px; line-height: 25px; text-transform: uppercase; font-weight: bold; color: #232949; text-align: center;} h2.bar span {position: relative; display: inline-block; padding: 0 0 20px 0;} h2.bar span:after {position: absolute; content: ""; height: 1px; background: #dcd9d4; left: 20px; right: 20px; bottom: 0;} ul.benefits-grid {margin: 0 -30px -70px -30px; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; font-size: 15px; line-height: 19px; text-transform: uppercase; font-weight: bold; text-align: center; color: #fff;} ul.benefits-grid > li {width: 25%; padding: 0 30px 70px 30px;} ul.benefits-grid img {display: block; margin: 0 auto 20px auto;} .career-culture > header {padding: 40px 20px;} .photo-with-text-row {display: flex; flex-wrap: wrap; background: #f5f6f8;} .photo-with-text-row > div {width: 50%;} .photo-with-text-row h3 {margin: 0 0 20px 0; font-size: 33px; line-height: 37px; color: #dd2536;} .photo-with-text-row .photo {background: no-repeat center center; background-size: cover;} .photo-with-text-row .photo img {display: block; width: 100%; visibility: hidden;} .photo-with-text-row .content {display: flex; align-items: center;} .photo-with-text-row .content > div {max-width: 800px; padding: 60px 80px;} .photo-with-text-row.swap {background: #fff; flex-direction: row-reverse;} .photo-with-text-row.swap .content {justify-content: flex-end;} .photo-with-text-row.white {background: #fff;} .career-benefits header {margin: 0 0 40px 0; text-align: center; color: #fff;} .career-benefits header h2 {color: #fff;} .career-culture {background: #fff;} .career-culture header {padding: 40px 0 20px 0;} .careers-join-us header, .careers-join-us footer {font-size: 24px; line-height: 32px; font-weight: 300; text-align: center; margin: 0 auto 60px auto; max-width: 700px;} .careers-join-us footer {margin-bottom: 0;} .career-quotes-banner {background: #f5f6f8;} .career-quotes-banner header {padding: 70px 0 40px 0;} .career-quotes-banner footer {padding: 20px 0 130px 0; text-align: center;} .career-quote-slider {min-width: 33%; width: 750px; margin: 0 auto; font-size: 18px; line-height: 25px; font-weight: 300; position: relative; padding: 0 0 180px 0;} .career-quote-slider em {font-style: normal; font-weight: bold; color: #fe414d; font-size: 24px; line-height: 28px;} .career-quote-slider .author {font-size: 15px; line-height: 19px; font-weight: bold; text-transform: uppercase; text-align: right;} .career-quote-slider .slick-list {overflow: visible;} .career-quote-slider .slide {position: relative; padding: 0 120px; opacity: 0.2; transition: opacity .5s ease;} .career-quote-slider .slide:before {font-family: 'FontAwesome'; content: "\f10d"; top: 10px; left: 50px; font-size: 35px; color: #fe414d; position: absolute;} .career-quote-slider .slick-active .slide {opacity: 1;} .career-quote-slider .slick-arrow {position: absolute; left: calc(50% - 50px); bottom: 100px; border: none; background: none; padding: 0; color: #fe414d; font-size: 40px; line-height: 40px; cursor: pointer; font-weight: 300;} .career-quote-slider .slick-arrow.slick-next {left: auto; right: calc(50% - 50px);} .career-quote-slider .slick-slide {outline: none;} .instagram-banner {background: #fff; padding: 0 30px 30px 30px; text-align: center; font-size: 18px; line-height: 24px; color: #2b2b2b;} .instagram-banner .fa {font-size: 32px; margin-right: 10px; vertical-align: middle; display: inline-block;} .instagram-widget {position: relative;} .instagram-widget ul {margin: 0 -8px; padding: 0; list-style-type: none; font-size: 0;} .instagram-widget li {display: inline-block; vertical-align: middle; position: relative; padding: 0 8px 16.6666% 8px; overflow: hidden; width: 16.6666%;} .instagram-widget li a {position: absolute; top: 0; left: 5px; right: 5px;} /** * Fan Signals template */ #banner.fan-signals-intro > div {max-width: 1500px;} #banner.fan-signals-intro .content {padding-right: 55%; display: flex; justify-content: flex-end;} #banner.fan-signals-intro .content > div {max-width: 510px;} #banner.fan-signals-intro .photo {padding-left: 47%;} #banner.fan-signals-intro .photo {right: 20px; top: calc(50% + 65px); bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} #banner.fan-signals-intro img {display: block; box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);} .centered-text-banner > div {font-size: 24px; line-height: 34px; max-width: 950px; font-weight: 300; text-align: center;} .text-with-photo {display: flex; flex-wrap: wrap; align-items: center; margin: 50px -50px;} .text-with-photo:first-child {margin-top: 0;} .text-with-photo > div {width: 50%; padding: 0 50px;} .text-with-photo img {display: block; margin: 0 auto;} .text-with-photo h2 {margin: 0 0 20px 0; font-size: 40px; line-height: 44px; color: #dc2636; font-weight: 300;} .text-with-photo.blue h2 {color: #5ca2b4;} .text-with-photo.swap {flex-direction: row-reverse;} .text-with-photo.wide-text .photo {width: 35%;} .text-with-photo.wide-text .content {width: 65%;} body.page-template-template-fan-signals .text-with-photo:last-child {margin-bottom: 70px;} /** * Forms */ input[type="text"], input[type="email"], input[type="password"], select, textarea {font-family: 'Lato', Arial, Verdana, sans-serif; color: #2f2f2f; font-weight: 300;} input[type="submit"] {cursor: pointer; border-radius: 0;} /** * Heartbeat animation */ @-webkit-keyframes heartbeat { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 14% { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 42% { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes heartbeat { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 14% { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 42% { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes heartbeat { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 14% { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 42% { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartbeat { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 14% { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 42% { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } /* Styles for old versions of IE */ .heartbeat { font-family: sans-serif; font-weight: 100; } /* :not(:required) hides this rule from IE9 and below */ .heartbeat:not(:required), #alerts p:first-child:before { -webkit-animation: heartbeat 1900ms ease 0s infinite normal; -khtml-animation: heartbeat 1900ms ease 0s infinite normal; -moz-animation: heartbeat 1900ms ease 0s infinite normal; -ms-animation: heartbeat 1900ms ease 0s infinite normal; -o-animation: heartbeat 1900ms ease 0s infinite normal; animation: heartbeat 1900ms ease 0s infinite normal; display: inline-block; position: relative; overflow: hidden; text-indent: -9999px; background: url(images/heartbeat.svg); background-repeat: no-repeat;; width: 20px; height: 20px; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #alerts p:first-child {position: relative; margin-left: 30px;} #alerts p:first-child:before {content: ""; position: absolute; top: -1px; margin-left: -30px;} /************************************************************************* * Customer Stories */ body.single-customer_story{ background-color: #fff; } .single-customer_story img{ max-height: 100%; } .customer-story__banner { position: absolute; height: 550px; width: 100%; background-size: cover; background-position: center; z-index: 0; } .customer-story__content { position: relative; z-index: 1; } .customer-story .page-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 50px; margin-bottom: 15px; font-weight: bold; font-size: 47px; color: #fff; text-align: center; text-transform: uppercase; } .customer-story .page-title__logo { padding: 0 35px; } .customer-story .page-title__text { padding: 20px 35px; border-right: 2px #fff solid; line-height: 1; } .customer-story .introduction-text { max-width: 755px; margin: 15px auto 70px; font-family: 'Raleway', Arial, Verdana, sans-serif; color: #fff; font-size: 34px; text-align: center; line-height: 1.5; } .customer-story .video { position: relative; max-width: 805px; margin: 70px auto 60px; text-align: center; } .customer-story .video video { width: 100%; height: 100%; box-shadow: 0 0 25px 2px rgba(0,0,0, 0.35); } .customer-story .video .play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .statistics-header{ margin-bottom: 49px; font-size: 47px; font-weight: bold; text-align: center; line-height: normal; } .statistics-blocks{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 80px; } .statistics-block{ flex: 1 1 0%; text-align: center; padding: 0 10px;} .statistics-block:not(:last-of-type){ border-right: 1px #d1cfcb solid; } .statistics-block__image-wrapper { position: relative; height: 185px; } .statistics-block__image-wrapper img{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .statistics-block__text { margin-top: 35px; } .statistics-block__text p { margin: 0; font-family: "Lato", Helvetica, Arial, sans-serif; font-size: 24px; } .statistics-block__text-line-1 { font-weight: 300; } .statistics-block__text-line-2{ font-weight: 600; } .single-customer_story .testimonial{ display: -webkit-box; display: -ms-flexbox; display: flex; padding: 95px 20px 85px !important; } .testimonial__author-image-wrapper { flex: 1 0 40%; text-align: center; } .testimonial__author-image-wrapper img { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; box-shadow: 0 0 25px 2px rgba(0,0,0, 0.35); } .testimonial__quotation-block { color: #fff; } .testimonial__quotation-block blockquote { padding: 0 10px; margin: 25px 0; font-family: 'Raleway', Arial, Verdana, sans-serif; font-size: 26px; line-height: 1.75; font-weight: 300; quotes: "“" "”" "‘" "’"; } .testimonial__quotation-block blockquote:before { content: open-quote; } .testimonial__quotation-block blockquote:after { content: close-quote; } .testimonial .author-block { position: relative; padding-right: 55px; text-align: right; font-family: "Lato", Helvetica, Arial, sans-serif; } .testimonial .author-block:after{ content: url('images/close-quote.png'); position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-left: 10px; } .author-block__name { font-weight: bold; font-size: 21px; } .author-block__title-company { font-weight: 300; font-size: 18px; } .author-block__title-company span:nth-of-type(2) { margin-left: 2px; padding-left: 5px; border-left: 1px #fff solid; } .single-customer_story .logo-icon { z-index: 10; } /**************************************************************************/ /** * Max width media queries */ @media only screen and (max-width: 1800px) { #front-banner-3 {background-size: contain;} } @media only screen and (max-width: 1636px) { .features-banner#banner {background-size: contain;} } @media only screen and (max-width: 1565px) { .why-banner#banner {background-size: contain; background-color: #fff; background-position: center bottom;} .values-grid > div.grid-intro {font-size: 17px; line-height: 22px;} } @media only screen and (max-width: 1300px) { .company-news > .left, .company-news > .right {width: 100%;} .company-news > .left {justify-content: center;} } @media only screen and (max-width: 1200px) { .values-grid > div.grid-intro {width: 66.6666%;} .values-grid > div {width: 33.3333%;} .values-grid .photo {padding-bottom: 33%;} .media-kit-facts {font-size: 16px; line-height: 20px;} .media-kit-facts .left em {font-size: 80px; line-height: 80px;} .media-kit-facts .right em {font-size: 50px; line-height: 60px;} } @media only screen and (max-width: 1100px) { .team-grid > div {width: 33.3333%;} } @media only screen and (max-width: 1050px) { .pricing-plans .action.multiple .btn {width: 100%;} .pricing-plans .action.multiple .btn-beige {margin-top: 7px;} } @media only screen and (max-width: 1000px) { #front-banner-2 > div {padding-top: 40px;} #front-banner-2 h1 {max-width: 800px;} #front-banner-2 .btn {display: block; top: auto; margin: 20px auto 0 auto; max-width: 200px;} #logo-banner .row.seven-wide {display: none;} #logo-banner .row.three-wide {display: flex;} .photo-with-text-row .content, .photo-with-text-row .photo {width: 100%;} .photo-with-text-row .content > div {max-width: 100%;} .instagram-widget li {width: 33.3333%; padding-bottom: 33.3333%;} } @media only screen and (max-width: 960px) { .radial-progress-bars .progress-bar {height: 200px; max-width: 200px;} .radial-progress-bars .progress-bar .progress {font-size: 37px; line-height: 41px;} .screenshots-section .content > .left, .screenshots-section .content > .right {float: none; padding: 0; width: 100%;} .screenshots-section .content > .left {margin: 0 0 20px 0;} .customer-success .upper .content {display: block; text-align: center;} .customer-success .upper .content > div, .customer-success .upper .content > .right {float: none; width: 100%; padding: 0; display: block;} .customer-success .upper .content > .right img {width: auto;} .customer-success .lower .content > .left, .customer-success .lower .content > .right {float: none; width: 100%; padding: 0;} .customer-success .lower .content > .left {text-align: center; margin: 0 0 40px 0;} .dg-container {display: none;} .gallery-fallback {display: block;} .platforms-and-languages .lower .content > .left, .platforms-and-languages .lower .content > .right {float: none; width: 100%; padding: 0;} .case-study-video-block > .left, .case-study-video-block > .right {float: none; width: 100%; padding: 0;} .case-study-video-block > .right {margin: 0 0 20px 0;} .case-study-row {margin: 0 auto; max-width: 400px;} .case-study-row > div {float: none; width: 100%; padding: 0; margin: 0;} .case-study-row > div + div {border-left: none; border-top: solid 1px #ccc; padding: 40px 0 0 0; margin: 40px 0 0 0;} .case-study-row .logo {height: auto; margin: 0 0 30px 0;} .case-study-row .vertically-centered {top: auto; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%);} .case-study-blocks > div {width: 50%;} .metric-grid {font-size: 19px; line-height: 23px;} .metric-grid .value {font-size: 67px; line-height: 67px;} .metric-grid .metric {font-size: 25px; line-height: 29px; margin: 5px 0 0 0;} #love-banner > div {padding-left: 0; padding-right: 0;} #love-flow {margin: 650px 0 0 0; padding: 0;} #love-flow > div {position: relative; padding: 0;} #love-flow:before {top: -615px; left: calc(50% - 1119px);} .features-banner#banner {font-size: 32px;} .features-banner#banner .heading {font-size: 40px; line-height: 46px;} .case-study-video-slider .slide .left, .case-study-video-slider .slide .right {width: 100%; padding: 0;} .case-study-video-slider .slide .right {margin: 0 0 30px 0;} .case-study-video-slider .nav {position: relative; bottom: auto; left: auto; width: 100%; margin: 30px 0 0 0; padding: 0 30px; max-width: 400px;} .case-study-video-slider .nav .slick-arrow {left: 0;} .case-study-video-slider .nav .slick-arrow.slick-next {left: auto; right: 0;} .company-news .stories {flex-wrap: wrap; padding: 0 40px;} .company-news .stories > article {width: 100%; padding: 0;} .company-news .stories > article + article {border-left: none; border-top: solid 1px #d1cfcb; padding-top: 40px; margin-top: 40px;} .media-kit-facts > div:before {display: none;} .media-kit-facts > div > div {width: 100%;} .media-kit header h3 {position: static;} .media-kit-facts .left {border-bottom: solid 5px #f6f5f5; margin: 0 0 50px 0;} .media-kit-facts .right {padding: 0; text-align: center;} .media-download-buttons > a {width: 100%;} .media-download-buttons > a + a {margin-top: 20px;} .press-connect ul.social {display: none;} } @media only screen and (max-width: 900px) { .pricing-plans {margin: 0;} .pricing-plans > div, .pricing-plans.x2 > div, .pricing-plans.x3 > div, .pricing-plans.x5 > div {float: none; width: 100%; padding: 0; margin: 0 0 40px 0;} .pricing-plans > div > div {padding: 0; margin: 0;} .pricing-plans .head {height: auto; padding: 30px 20px;} .pricing-plans .pricing {height: auto; padding: 30px 20px;} .pricing-plans .deets {min-height: 0;} .pricing-plans .vertically-centered {top: auto; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%);} .faq-cols {margin: 0;} .faq-cols > div {float: none; width: 100%; padding: 0; margin: 0 0 40px 0;} .events-grid {margin: 0; text-align: center;} .events-grid > .event {display: block; padding: 0; width: 100%;} .join-the-team > .left, .join-the-team > .right {float: none; width: 100%; padding: 0; max-width: 100%;} .join-the-team > .left {margin: 0 0 40px 0;} .join-the-team .intro {text-align: center;} .feature-banner#banner .content {padding: 0; text-align: center; min-height: 1px;} .feature-banner#banner .photo {position: relative; left: auto; right: auto; padding: 0; bottom: auto; margin-bottom: -100px;} .feature-banner#banner .photo img {float: none;} .feature-banner#banner h1 {font-size: 40px; line-height: 44px;} .feature-banner#banner h2 {font-size: 26px; line-height: 30px;} .feature-banner.screenshots#banner .screenshots {position: relative; max-width: 640px; margin: 0 auto;} .feature-banner.screenshots#banner .content {padding: 0;} .feature-banner.screenshots#banner .desktop {position: relative; left: auto; right: auto; padding: 0; bottom: auto;} .feature-banner.screenshots#banner .desktop img {float: none;} .feature-banner.screenshots#banner .mobile {left: 0; right: -40px; padding: 0 0 0 72%; bottom: -60px;} #banner.fan-signals-intro .photo {top: auto; transform: none; margin-bottom: 0;} #banner.fan-signals-intro .content > div {max-width: 100%;} .feature-studies-grid > div {width: 100%; display: block; vertical-align: top;} .feature-studies-grid > div + div {margin-top: 40px;} .feature-studies-grid .heading {min-height: 0;} .featured-post > .thumb {margin: 0 20px 5px 0;} .featured-post > .content {float: none; width: 100%; padding: 0;} .sidebar-layout > .content, .sidebar-layout > .content > div, .sidebar-layout > aside {float: none; width: 100%; margin: 0;} .feature-callout {text-align: center;} .feature-callout > .content, .feature-callout > .photo {display: block; width: 100%; padding: 0;} .feature-callout > .content {margin: 0 0 30px 0;} .featured-resources:before {display: none;} .featured-resources > .left, .featured-resources > .right {float: none; width: 100%; padding: 0;} .featured-resources > .right {margin: 50px 0 0 0; padding: 50px 0 0 0; border-top: solid 1px #ccc;} .featured-resources .thumb {width: 25%;} .featured-resources .content {width: 75%;} .team-banner#banner .lower > div {height: auto; padding-bottom: 40.20%; width: 100%; background-size: 100%; margin-top: -13%;} } @media only screen and (max-width: 850px) { .radial-progress-bars .progress-bar {font-size: 18px; line-height: 22px;} .radial-progress-bars .progress-bar {height: 170px; max-width: 170px;} .radial-progress-bars .progress-bar .progress {font-size: 30px; line-height: 34px;} .metric-grid, .metric-grid > div {display: block; width: 100%;} .metric-grid > div + div {border-left: none;} .metric-grid.footer {display: none;} .metric-grid .label {display: block;} .chart-columns, .chart-columns > div {display: block; width: 100%;} .chart-columns > div + div {margin-top: 40px; border-left: none;} .box-radios, .box-radios li {display: block;} .box-radios li + li {margin: 10px 0 0 0;} .roi-calc-slider .answers .col {float: none; width: 100%; padding: 0;} .roi-calc-data-inputs .label, .roi-calc-data-inputs .field {float: none; width: 100%; padding: 0; text-align: center;} .roi-calc-data-inputs .label {margin: 0 0 10px 0;} .roi-calc-results-callout {text-align: center;} .roi-calc-results-callout > div > div > div {display: block;} .roi-calc-results-callout .content {padding: 0 0 20px 0;} .study-quote-block-grid {margin: 0;} .study-quote-block-grid > div {float: none; width: 100%; padding: 0;} .case-studies > li {width: 50%;} .one-pager {font-size: 20px;} .one-pager h1 {font-size: 30px; line-height: 34px;} .one-pager h2 {font-size: 30px; line-height: 34px;} .op-two-cols > .content, .op-two-cols > .photo, .op-two-cols.swap > .content, .op-two-cols.swap > .photo, .op-two-cols.skinny-photo > .content, .op-two-cols.skinny-photo > .photo, .op-two-cols.skinny-photo.swap > .content, .op-two-cols.skinny-photo.swap > .photo {width: 100%; padding: 0; text-align: center;} .op-two-cols > .photo {margin: 0 0 30px 0;} .op-phone-banner > .phone, .op-phone-banner > .content {width: 100%; padding: 0; text-align: center;} .op-phone-banner > .phone {margin: 0 0 40px 0;} .op-phone-banner > .phone:before {position: absolute; content: ""; top: -40px; left: -20px; right: -20px; bottom: 120px; background: #fff;} .op-phone-banner > .content:before {display: none;} .white .op-phone-banner > .phone:before {background: #f9f8f5;} .op-checkmarks-section .body > .headline, .op-checkmarks-section .body > .content {width: 100%; padding: 0;} .op-checkmarks-section .body > .headline {text-align: center; margin: 0 0 30px 0;} .op-icon-grid-section > .items > div {width: 50%;} .career-quote-slider {width: 100%; min-width: 1px;} } @media only screen and (max-width: 800px) { } @media only screen and (max-width: 760px) { body.mobile-menu #header nav {display: block;} body.home #banner {background-color: #f4f0eb; background-size: 175% auto; background-position: center bottom;} body.home #banner > div {padding-top: 130px; min-height: 560px;} body.home #banner .heading {font-size: 43px; line-height: 47px;} #banner .heading, .features-banner#banner .heading {font-size: 40px; line-height: 44px;} #banner > div {min-height: 0;} .press-banner#banner {background-size: 150%; background-position: center bottom;} #jump-nav {display: none;} #more-resources-banner #jump-nav {display: block;} .case-study-filter-banner #jump-nav {display: block;} .intro .heading {font-size: 30px; line-height: 34px;} .callouts {margin: 0 auto;} .callouts > div, .callouts.four-wide > div, .callouts.five-wide > div {display: block; width: 100%; padding: 0; margin: 0;} .callouts > div + div {margin-top: 50px;} .feature-benefits .callouts h2, .feature-benefits .callouts .heading, .page-template-template-feature .callouts h2, .page-template-template-feature .callouts .heading, .feature-benefits .callouts > div > div {text-align: center;} .radial-progress-bars {margin: 0 auto; max-width: 240px;} .radial-progress-bars > div {float: none; width: 100%; padding: 0; margin: 0 0 70px 0} .radial-progress-bars > div:last-child {margin: 0;} .radial-progress-bars .progress-bar {height: 240px; max-width: 240px; font-size: 21px; line-height: 24px;} .radial-progress-bars .progress-bar .content {position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; padding: 0 40px;} .radial-progress-bars .progress-bar .progress {font-size: 48px; line-height: 52px;} .quote-block, .quote-block > div, .quote-block .content {display: block; padding: 0;} .quote-block {max-width: 500px; margin: 0 auto;} .quote-block .photo {margin: 0 auto 20px auto;} .quote-block .logo {display: block; margin: 30px auto 0 auto;} .logo-quote-block, .logo-quote-block > div, .logo-quote-block .content {display: block; padding: 0;} .logo-quote-block {max-width: 500px; margin: 0 auto;} .logo-quote-block .logo {display: block; margin: 0 auto 30px auto; padding: 0; width: auto;} .demo-banner .heading {font-size: 30px; line-height: 36px;} .content-right > .left, .content-right > .right, .content-right > .right > div {float: none; width: 100%; margin: 0;} .content-right > .left {margin: 0 0 10px 0;} .photo-grid > div {width: 33.3333%;} .contact-button-group .contact-btn {width: 100%; display: block; margin: 10px 0 0 0;} .screenshots-section .content {padding: 0; text-align: center;} .screenshots-section .content .mobile-screenshot {position: relative; top: auto; right: auto; margin: 40px auto;} .platforms-and-languages .upper {padding-top: 60px; padding-bottom: 60px;} .platforms-and-languages .upper .content {display: block;} .platforms-and-languages .upper .content > div, .platforms-and-languages .upper .content > .right {float: none; display: block; width: 100%; padding: 0;} .platforms-and-languages .upper .content > .right img {width: auto;} .platforms-and-languages .upper .content > .left {margin: 0 0 40px 0;} .split-columns {max-width: 540px; margin: 0 auto;} .split-columns > div {display: block; width: 100%; padding: 0;} .split-columns > div + div {margin-top: 40px;} .targets {margin: 0 auto; max-width: 240px;} .targets > div {float: none; width: 100%; padding: 0; margin: 0 0 40px 0;} .two-photo-banner-link a img {float: none; width: 100%;} .banner-slider .photo-layout, .banner-slider .photo-layout > div, .banner-slider .photo-layout .content, .banner-slider .photo-layout .photo {display: block; width: 100%; text-align: center; padding: 0;} .banner-slider .photo-layout .photo {margin: 20px 0;} .banner-slider .photo-layout .photo img {max-width: 200px;} .banner-slider .slide {font-size: 20px; line-height: 28px;} .banner-slider .slide .heading {font-size: 34px; line-height: 38px;} .study-quote-block .logo, .study-quote-block .quote, .study-quote-block .quote > div, .study-quote-block.video .video {margin: 0; float: none; width: 100%;} .study-quote-block .quote {margin: 20px 0 0 0;} .resources-grid > div {width: 50%;} #demo-form .hs-richtext {display: none;} #demo-form .field, #demo-form .mktoField {width: 100% !important; display: block;} #demo-form label, #demo-form .mktoForm .mktoLabel {display: none;} .mktoForm input[type="url"], .mktoForm input[type="text"], .mktoForm input[type="date"], .mktoForm input[type="tel"], .mktoForm input[type="email"], .mktoForm input[type="number"], .mktoForm textarea.mktoField, .mktoForm select.mktoField {height: auto !important;} .split-content-blocks:before, .split-content-blocks:after {display: none;} .split-content-blocks .left, .split-content-blocks .right {float: none; width: 100%; background: rgba(250,248,246,0.8); box-shadow: 2px 2px 0 2px rgba(0,0,0,0.1); padding: 30px;} .split-content-blocks .left {margin: 0 0 40px 0;} section > div > .prev-feature {text-align: center; float:none} section > div > .next-feature {text-align: center; float:none} #front-banner > div > .left, #front-banner > div > .right {display: block; width: 100%; padding: 0;} #front-banner > div > .left {text-align: center; margin: 0 0 20px 0;} #front-banner .heading {font-size: 43px; line-height: 47px;} #front-banner-2 {font-size: 26px; line-height: 30px;} #front-banner-2 h1 {font-size: 50px; line-height: 50px;} #front-banner-3 h1 {font-size: 40px; line-height: 46px;} #front-banner-3 h1 em {font-size: 32px;} #tagline-banner {font-size: 30px; line-height: 34px;} #tagline-banner > div {padding-top: 30px; padding-bottom: 30px;} .quote-slider .upper {display: block;} .quote-slider .quote, .quote-slider .logo {width: 100%; padding: 0;} .quote-slider .quote {font-size: 22px; line-height: 35px;} .quote-slider .logo {margin: 0 0 30px 0;} .quote-slider .lower {font-size: 16px; line-height: 22px;} .quote-slider .lower .author {font-size: 19px;} .case-study-filter-banner .filters .industries, .case-study-filter-banner .filters .use-cases {float: none; width: 100%;} .case-study-filter-banner .filters .industries {margin: 0 0 20px 0;} .why-banner#banner {min-height: 1px;} #love-flow h2 {padding: 15px 50px;} #love-flow li {width: 100%;} #love-flow li + li {margin-top: 40px;} .split-feature-banner .content {display: block;} .split-feature-banner .content > div {width: 100%;} .split-feature-banner .content > .left > div {float: none;} /*** Customer Stories ***/ .customer-story .page-title{ flex-direction: column; } .customer-story .page-title__text { border-right: none; } .statistics-blocks { display: block; } .statistics-block{ max-width: 100%; } .statistics-block:not(:last-of-type) { border-right: none; } .statistics-block:not(:first-of-type) { margin-top: 60px; } .single-customer_story .testimonial { display: block; } .op-checkmarks-section .checkmarks > li, .op-checkmarks-section .checkmarks > li:nth-child(odd), .op-checkmarks-section .checkmarks > li:nth-child(even) {width: 100%; padding-right: 0;} .op-icon-grid-section > .items > div {width: 100%;} #banner.careers-intro .content > .text, #banner.careers-intro .content > .photo {width: 100%; padding: 0; text-align: center;} #banner.careers-intro .content > .photo {margin: 30px 0 40px 0;} ul.benefits-grid > li {width: 33.3333%;} .values-grid > div {width: 100%;} .values-grid > div.grid-intro {width: 100%;} .values-grid .text {padding: 80px 40px;} .values-grid .photo {padding-bottom: 100%;} .text-with-photo > div, .text-with-photo.wide-text .photo, .text-with-photo.wide-text .content {width: 100%;} .text-with-photo .content {margin: 0 0 40px 0;} .text-with-photo.wide-text .content {margin: 40px 0 0 0;} .text-with-photo .photo img {max-width: 300px; width: 100%;} .underline-heading {font-size: 26px; line-height: 36px;} } @media only screen and (max-width: 700px) { .team-grid > div {width: 50%;} } @media only screen and (max-width: 650px) { } @media only screen and (max-width: 600px) { .photo-grid > div {width: 50%;} ul.checkmarks.split li {display: block; width: 100%; padding-right: 0;} .icon-content {padding: 120px 0 0 0; background-position: top center; text-align: center;} .logo-strip, .logo-strip > div {display: block; width: 100%; padding: 0;} .logo-strip > div + div {margin-top: 30px;} .logo-strip img {width: auto; margin: 0 auto;} .platforms-and-languages .lower .content .cols > div {float: none; width: 100%; padding: 0;} .case-study-blocks {margin: 0;} .case-study-blocks > div {float: none; width: 100%; padding: 0;} .case-study-blocks > div + div {margin: 30px 0 0 0;} .case-study-block {font-size: 19px;} .case-study-block .accent {font-size: 34px; line-height: 38px;} .quote-bubble-grid > div {display: block; width: 100%; padding: 0; width: 280px; margin: 0 auto;} .quote-bubble-grid > div + div {margin-top: 40px;} .quote-bubble {width: 280px; height: 280px; background-size: 280px 280px; font-size: 14px; line-height: 20px;} .featured-post > .thumb {float: none; width: 100%; margin: 0 0 20px 0;} .summary-post > .content, .summary-post > .thumb {float: none; width: 100%; padding: 0;} .summary-post > .thumb {margin: 0 0 10px 0;} .post footer .author {padding: 20px;} .post footer .author > .photo, .post footer .author > .bio, .post footer .author > .bio > div {float: none; margin: 0; width: 100%;} .post footer .author > .photo {margin: 0 0 20px 0;} .roi-calc-heading {width: 280px; height: 46px; background-size: 280px;} #banner.roi-calc-banner {font-size: 30px; line-height: 34px;} .career-quote-slider .slide {padding: 0 70px;} .career-quote-slider .slide:before {left: 20px;} #banner.careers-intro {font-size: 20px; line-height: 32px;} .values-grid > div.grid-intro {padding: 40px;} .values-grid .text {padding: 40px;} .values-grid .text > div {padding: 0;} ul.benefits-grid > li {width: 50%:} .photo-with-text-row .content > div {padding: 60px 40px;} .media-kit-facts .left em {font-size: 60px; line-height: 64px;} .media-kit-facts .right > div {width: 100%;} .media-download-buttons > a {padding: 30px 15px;} .media-download-buttons > a > span:before {display: block; margin: 0 0 20px 0; width: 100%;} .company-news .stories article {padding: 0;} .company-news .stories .slick-track > div + div {border-left: none;} ul.benefits-grid {font-size: 13px; line-height: 17px;} ul.benefits-grid > li {width: 50%;} } @media only screen and (max-width: 550px) { .resources-grid > div {width: 100%; display: block;} .logo-cards {text-align: center;} .logo-cards > div {width: 50%;} .logo-cards > div:nth-child(n+7) {display: none;} #front-banner-2 {font-size: 22px; line-height: 26px;} #front-banner-2 h1 {font-size: 35px; line-height: 40px;} #front-banner-3 > div {padding-bottom: 40px; padding-top: 40px;} #front-banner-3 h1 {font-size: 30px; line-height: 36px;} #front-banner-3 h1 em {font-size: 22px;} #front-banner-3 .btn {margin-top: 0;} .case-studies > li {width: 100%;} .why-banner#banner > div {padding-top: 130px;} .why-banner#banner .heading {font-size: 30px; line-height: 36px;} .features-banner#banner {padding-top: 100px; font-size: 22px; line-height: 26px;} .features-banner#banner > div {padding-top: 40px; min-height: 1px;} .features-banner#banner .heading {font-size: 30px; line-height: 36px;} #banner.video-banner {font-size: 22px; line-height: 26px;} #banner.video-banner > div {padding-top: 130px;} #banner.video-banner h1 {font-size: 30px; line-height: 36px;} #banner.video-banner .btn {display: block; max-width: 180px; margin: 20px auto 0 auto; top: auto;} .video-banner .video .play {width: 80px; height: 80px; margin: -40px 0 0 -40px; border-width: 5px;} } @media only screen and (max-width: 500px) { .section.gutter > div:first-child {padding-top: 40px; padding-bottom: 40px;} .op-two-cols .btn {display: block; width: 100%;} .op-two-cols .btn + .btn {margin-top: 20px;} ul.social.wide li {margin: 0 5px;} .company-news .stories {text-align: center;} .company-news .stories .thumb img {margin: 0 auto 30px auto;} .company-news .left ul {display: block;} .company-news .left ul li + li {margin-top: 10px;} .media-kit header {font-size: 18px; line-height: 28px;} } @media only screen and (max-width: 450px) { } @media only screen and (max-width: 400px) { .pricing-plans .action.multiple .btn {display: block; width: 100%;} .pricing-plans .action.multiple .btn + .btn {margin: 10px 0 0 0;} .photo-grid {margin: 0; max-width: 250px;} .photo-grid > div {width: 100%; padding: 0;} .photo-grid > div + div {margin-top: 10px;} .team-grid {margin: 0;} .team-grid > div {float: none; width: 100%; padding: 0;} #logo-banner .row.three-wide {display: none;} #logo-banner .row.two-wide {display: flex;} } /** * Min width media queries */ @media only screen and (min-width: 761px) { /* body.sticky-header #page {padding-top: 100px;} body.sticky-header #header {position: fixed; background: #fff; top: 0; left: 0; width: 100%; box-shadow: 0 0 10px 10px rgba(0,0,0,0.05); border-top: none; border-bottom: solid 1px #f4f0eb; z-index: 20;} body.sticky-header #header > div {height: 70px;} body.sticky-header #header .logo {width: 190px; bottom: 16px;} body.sticky-header #header .primary {bottom: 24px;} body.sticky-header #header .secondary {display: none;} body.sticky-header #header .primary > li.sign-in {display: none;} */ body.sticky-jump-nav #page {padding-top: 163px;} body.sticky-jump-nav #jump-nav {position: fixed; top: 90px; left: 0; width: 100%; z-index: 10; background: #fff; box-shadow: 0 0 10px 10px rgba(0,0,0,0.05);} body.sticky-jump-nav .red #jump-nav {background: #fe414d;} body.sticky-jump-nav .case-study-filter-banner .filters {position: fixed; top: 133px;} body.sticky-jump-nav .case-study-filter-banner .filters > div > div {max-width: 1200px; margin: 0 auto; padding: 0 20px;} } @media only screen and (min-width: 900px) { .pricing-plans > div:not(:last-child):not(:first-child) > div > .pricing { padding-top: 50px } } /******************************************************************************* * * V2 styles * ******************************************************************************/ .bg-ocean-blue {background: #08182f; background: -moz-linear-gradient(-45deg, #08182f 0%, #232a49 50%, #3a7aaf 100%); background: -webkit-linear-gradient(-45deg, #08182f 0%,#232a49 50%,#3a7aaf 100%); background: linear-gradient(135deg, #08182f 0%,#232a49 50%,#3a7aaf 100%);} .bg-blue-green {background: #478fcc; background: -moz-linear-gradient(-45deg, #478fcc 0%, #69cbb0 100%); background: -webkit-linear-gradient(-45deg, #478fcc 0%,#69cbb0 100%); background: linear-gradient(135deg, #478fcc 0%,#69cbb0 100%);} .bg-green-blue {background: #69cbb0; background: -moz-linear-gradient(-45deg, #69cbb0 0%, #478fcc 100%); background: -webkit-linear-gradient(-45deg, #478fcc 0%,#69cbb0 100%); background: linear-gradient(135deg, #69cbb0 0%,#478fcc 100%);} .bg-blue-teal {background: rgb(8,24,47); background: -moz-linear-gradient(-45deg, rgba(8,24,47,1) 0%, rgba(11,128,158,1) 100%); background: -webkit-linear-gradient(-45deg, rgba(8,24,47,1) 0%,rgba(11,128,158,1) 100%); background: linear-gradient(135deg, rgba(8,24,47,1) 0%,rgba(11,128,158,1) 100%);} .bg-grey {background: #f5f6f8;} .scrollmagic-pin-spacer {width: 100%; height: 100vh; overflow: hidden;} .scrollmagic-pin-spacer .test {position: absolute; top: 0; left: 0; width: 50px; height: 50px; background: #000;} .section-slider {height: 400%;} .section-slider .slide {height: 25%;} .logo-banner > div {padding-top: 70px; padding-bottom: 50px;} .logo-banner header {text-align: center; font-size: 20px; line-height: 24px; color: #69cbb0; margin: 0 0 30px 0;} .logo-banner header h2 {color: #fff;} .logo-banner .logos {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;} .logo-banner .logos > div {max-width: 135px;} /* .logo-banner .logos:not(:last-child) {margin: 0 0 60px 0;} */ .logo-banner .awards {border-top: solid 1px #979797; margin-top: 40px; padding-top: 40px;} .logo-banner .awards .logos > div {display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; background: #fff; border: solid 4px #D2242A; max-width: 150px; margin: 0 35px 30px 35px;} .logo-banner .awards img {display: block;} .logo-banner .awards a[href*="g2.com"] {margin-top: 8px;} .section-intro {max-width: 800px; margin: 0 auto 60px auto; text-align: center;} .section-intro h2 {margin: 0 0 10px 0; font-size: 44px; line-height: 48px; color: #ff414d; font-weight: 300;} .action-items {max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; font-size: 18px; line-height: 24px; text-align: center; justify-content: space-between;} .action-items > .left {width: 35%; padding: 0 100px 0 0;} .action-items > .right {} .action-items h2 {margin: 0 0 10px 0; padding: 80px 0 0 0; position: relative;; font-size: 22px; line-height: 26px; color: #ff414d; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; background: url(images/v2/caa-capture.svg) no-repeat center top;} .action-items h2 a {color: #ff414d;} .action-items h2 a:focus, .action-items h2 a:hover {text-decoration: underline;} .action-items .analyze h2 {background-image: url(images/v2/caa-analyze.svg);} .action-items .analyze h2, .action-items .analyze h2 a {color: #478fcc;} .action-items .act h2 {background-image: url(images/v2/caa-act.svg);} .action-items .act h2, .action-items .act h2 a {color: #69cbb0;} .action-items .items > div + div {margin-top: 40px;} .action-items img {display: block;} .section-header {max-width: 800px; margin: 0 auto 80px auto; text-align: center; position: relative;} .section-header h2 {margin: 0 0 20px 0; font-size: 46px; line-height: 50px; color: #1a3e5c; font-weight: 300;} .section-footer {max-width: 800px; margin: 60px auto 0 auto; text-align: center; font-size: 20px; line-height: 28px;} /* .pill-btn {padding: 10px 20px; background: #f5f6f8; border-radius: 20px; cursor: pointer; display: inline-block; color: #478ecc; font-size: 11px; line-height: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;} */ .pill-btn {padding: 15px 25px; background: #f5f6f8; border-radius: 40px; cursor: pointer; display: inline-block; color: #478ecc; font-size: 14px; line-height: 19px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;} .pill-btn:after {font-family: 'FontAwesome'; content: "\f054"; margin-left: 5px; font-size: 8px; font-weight: normal;} .pill-btn:focus, .pill-btn:hover {color: #000;} .heading-with-dots {margin: 0 0 30px 0; padding: 0 0 30px 0; font-size: 38px; line-height: 42px; color: #333f50; font-weight: 300; position: relative;} .heading-with-dots:before {position: absolute; content: ""; width: 68px; height: 4px; left: 0; bottom: 0; background: url(images/v2/red-dot.png) repeat-x left top;} #whr_embed_hook {text-align: center;} #whr_embed_hook .whr-info {display: none;} #whr_embed_hook .whr-items {margin: 40px 0; padding: 0; list-style-type: none;} /** * Home page */ #hero {position: relative; font-size: 26px; line-height: 34px; color: #575757; margin: 0 0 70px 0;} #hero h1 {margin: 0 0 10px 0; font-size: 56px; line-height: 68px; color: #1a3e5c; font-weight: 300;} #hero .large {position: relative;} #hero .large .content {padding: 120px 0 200px 0; max-width: 600px;} #hero .bg {position: absolute; bottom: 0; width: 4000px; height: 610px; right: 0;} #hero .bg svg {display: block; margin: 0 auto;} #hero .bg img {display: block; width: auto; height: 100%; margin: 0 auto;} #hero .small {display: none;} #hero .small .btn {width: 200px; margin: 0 auto; display: block;} #hero .slider {display: none;} #hero .slider img {display: block; width: 500px; height: 231px;} .stories-grid {display: flex; flex-wrap: wrap; margin: 0 -40px; font-size: 18px; line-height: 26px; color: #fff;} .stories-grid h2 {margin: 0 0 10px 0; font-size: 26px; line-height: 30px; color: #fff; font-weight: 300;} .stories-grid h3 {margin: 0 0 10px 0; font-size: 30px; line-height: 34px; color: #fff; font-weight: bold; text-transform: uppercase;} /* .stories-grid h2:before {position: absolute; content: ""; top: 0; left: 0; width: 120px; height: 120px; background: #fff url(images/v2/solutions-roadmap-blue.svg) no-repeat center center; border-radius: 50%;} */ .stories-grid > div {width: 33.3333%; padding: 0 40px;} .stories-grid > div + div {border-left: solid 1px rgba(255,255,255,0.5);} .stories-grid .icon img {max-width: 120px; display: block;} .stories-grid.no-separators > div + div {border-left: none; border-top: none;} .dial-banner {margin-bottom: -45px;} .dial-banner > div {padding-top: 100px;} .generic-feature-section + .dial-banner > div:before {position: absolute; content: ""; top: 0; left: 40px; right: 40px; height: 1px; background: #89d7c1;} .dial {position: relative; max-width: 1000px; min-height: 570px; margin: 0 auto; background: url(images/v2/dial-center-2.png) no-repeat center calc(100% - 25px); z-index: 10;} .dial:before {position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; background: url(images/v2/dial-dots.svg) no-repeat center 70px;} .dial:after {position: absolute; content: ""; bottom: -22px; left: 50%; margin-left: -40px; background: url(images/v2/logo-icon-without-tail.svg) no-repeat center center; width: 80px; height: 80px;} .dial .mask {position: absolute; width: 410px; height: 410px; border-radius: 50%; border: solid 25px #00b9da; bottom: 0; left: calc(50% - 205px); transform: rotate(-145deg);} .dial .mask:before {position: absolute; content: ""; width: 61px; height: 44px; top: -65px; left: calc(50% - 30px); background: url(images/v2/dial-pointer.png) no-repeat center center;} .dial ul {margin: 0; padding: 0; list-style-type: none; font-size: 20px; line-height: 22px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;} .dial ul li {position: absolute; text-align: left;} .dial ul li .break {display: block;} .dial ul li a:before {position: absolute; content: ""; bottom: 0; width: 60px; height: 60px; background: #fff url(images/v2/solutions-customer-acquisition.svg) no-repeat center center; border-radius: 50%;} .dial ul li.customer-aquisition {width: 150px; padding-bottom: 65px; top: -5px; left: calc(50% - 75px); text-align: center;} .dial ul li.customer-aquisition a:before {left: calc(50% - 30px);} .dial ul li.reputation-management {left: 13%; top: 13%; text-align: right;} .dial ul li.reputation-management a:before {left: auto; right: -65px; bottom: -40px; background-image: url(images/v2/solutions-reputation-management.svg); border-radius: 0; width: 65px;} .dial ul li.customer-loyalty {left: 72%; top: 13%;} .dial ul li.customer-loyalty a:before {left: -65px; bottom: -50px; background-image: url(images/v2/solutions-customer-loyalty.svg);} .dial ul li.employee-experience {left: 6%; top: 40%; text-align: right;} .dial ul li.employee-experience a:before {left: auto; right: -60px; bottom: -10px; background-image: url(images/v2/solutions-employee-experience.svg);} .dial ul li.roadmap {left: 82%; top: 40%;} .dial ul li.roadmap a:before {left: -75px; bottom: -8px; background-image: url(images/v2/solutions-roadmap.svg); border-radius: 0;} .dial ul li.retargeting {left: 85.7%; top: 70%;} .dial ul li.retargeting a:before {left: -73px; bottom: -10px; background-image: url(images/v2/solutions-retargeting-v3.svg); border-radius: 0; background-size: 50px auto;} .dial ul li.integrations {left: -1%; top: 71%; text-align: right;} .dial ul li.integrations a:before {left: auto; right: -70px; bottom: -20px; background-image: url(images/v2/solutions-integrations.svg);} .dial a {color: #575757;} .dial a:focus, .dial a:hover {color: #00b9da;} .dialed-in-banner {font-size: 20px; line-height: 24px; color: #fff; text-align: center; position: relative;} .dialed-in-banner > div {padding-top: 110px; padding-bottom: 60px;} .dialed-in-banner h2 {margin: 0 0 10px 0; font-size: 60px; line-height: 64px; color: #fff; font-weight: 300;} .dialed-in-banner strong {text-transform: uppercase; letter-spacing: 1px;} .request-demo-banner {font-size: 20px; line-height: 24px; color: #fff; text-align: center; position: relative;} .request-demo-banner > div {padding-top: 70px; padding-bottom: 70px;} .request-demo-banner h2 {margin: 0 0 10px 0; font-size: 44px; line-height: 48px; color: #fff; font-weight: 300;} .request-demo-banner p:not(:last-child) {margin: 0 0 30px 0;} .request-demo-banner strong {text-transform: uppercase; letter-spacing: 1px;} #caa-callout {position: relative; max-width: 560px;} #caa-callout h2 {margin: 0; padding: 70px 0 0 0; position: relative;; font-size: 20px; line-height: 24px; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; background: url(images/v2/caa-capture-white.svg) no-repeat center top; min-width: 60px; text-align: center;} #caa-callout h2 a {color: #fff;} #caa-callout .action {position: absolute; top: 9%; left: calc(50% - 75px); opacity: 0; min-width: 150px;} #caa-callout .action.analyze {top: 60%; left: 63%;} #caa-callout .action.analyze h2 {background-image: url(images/v2/caa-analyze-white.svg); background-position: left top;} #caa-callout .action.act {top: 45%; left: 9%; min-width: 90px;} #caa-callout .action.act h2 {background-image: url(images/v2/caa-act-white.svg);} #caa-callout .arrows {box-shadow: 0 0 30px 0 rgba(0,0,0,0.2); border-radius: 50%; transform: rotate(-90deg); opacity: 0;} #caa-callout .hero {position: absolute; display: block; top: 32%; left: 32%; width: 36%; transform: scale(0); border-radius: 50%;} #caa-callout .details {padding: 15px 10px; background: #fff; border: solid 6px #ccdbf1; border-radius: 15px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.2); text-align: left; position: absolute; top: -60px; left: calc(50% + 80px); width: 160px;} #caa-callout .details:before {position: absolute; content: ""; left: -30px; bottom: 20px; width: 24px; height: 44px; background: url(images/v2/caa-capture-pointer.png) no-repeat center center; background-size: contain;} #caa-callout .details ul {margin: 0; padding: 0 0 0 20px;} #caa-callout .details span {display: block;} #caa-callout .action.act .details {width: 270px; border-color: #cdeae8; left: -120px; top: auto; margin-top: 35px;} #caa-callout .action.act .details:before {bottom: auto; left: 145px; top: -25px; width: 25px; height: 21px; background-image: url(images/v2/caa-act-pointer.png);} #caa-callout .action.analyze .details {width: 220px; border-color: #d1e8f8; top: -50px;} #caa-callout .action.analyze .details:before {background-image: url(images/v2/caa-analyze-pointer.png); bottom: 50px;} .metrics-banner {background: #f5f6f8;} .metrics-banner .section-intro h2 {color: #1a3e5c;} .metrics {margin: 0 -30px -60px -30px; padding: 0; list-style-type: none; font-weight: 400; font-size: 22px; line-height: 26px; display: flex; flex-wrap: wrap; justify-content: center;} .metrics > li {display: flex; width: 33.3333%; padding: 0 30px 60px 30px;} .metrics > li > .icon {width: 35%;} .metrics > li > .content {width: 65%; padding: 40px 0 0 20px;} /** * Feature page template */ .feature-intro {font-size: 26px; line-height: 36px; background: #fff; position: relative;} .feature-intro:before {position: absolute; content: ""; transform: rotate(-12deg); top: 0; right: -200px; bottom: 0; left: -200px; background: #fff;} .feature-intro > div {padding-top: 100px;} .feature-intro h1 {margin: 0 0 10px 0; font-size: 56px; line-height: 68px; color: #1a3e5c; font-weight: 300;} .feature-intro .content {max-width: 500px;} .feature-secondary-intro .upper {position: relative; font-size: 20px; line-height: 28px; color: #fff;} .feature-secondary-intro .upper:before {position: absolute; content: ""; transform: rotate(-12deg); top: 0; right: -200px; bottom: 0; left: -200px; background: #478fcc; background: -moz-linear-gradient(-45deg, #478fcc 0%, #69cbb0 100%); background: -webkit-linear-gradient(-45deg, #478fcc 0%,#69cbb0 100%); background: linear-gradient(135deg, #478fcc 0%,#69cbb0 100%);} .feature-secondary-intro .upper > div {padding-top: 200px;} .feature-secondary-intro .upper h2 {margin: 0 0 20px 0; font-size: 46px; line-height: 56px; color: #fff; font-weight: 300;} .feature-secondary-intro .upper .container {display: flex; flex-wrap: wrap; flex-direction: row-reverse;} .feature-secondary-intro .upper .container > .left {width: 50%; padding: 0 100px 0 0;} .feature-secondary-intro .upper .container > .right {width: 50%;} .feature-secondary-intro .upper .container > .right img {display: block; margin-top: -450px; max-width: 125%;} .feature-section-with-image > div {padding-top: 80px; padding-bottom: 80px;} .feature-section-with-image .image img {display: block; margin: 0 auto;} .feature-secondary-intro + .feature-section-with-image > div {padding-top: 180px;} .feature-intro-container + .feature-section-with-image > div {padding-top: 180px;} .feature-divider + .feature-section-with-image > div {padding-top: 0;} .feature-highlights-section > div {padding-top: 70px; padding-bottom: 90px;} .feature-highlights-section .section-header h2 {color: #fff;} .feature-secondary-intro + .feature-highlights-section > div {padding-top: 200px;} .feature-highlights {margin: 0 -20px -80px -20px; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: center; font-size: 16px; line-height: 20px; font-weight: bold; color: #fff; text-transform: uppercase; letter-spacing: 1px; text-align: center;} .feature-highlights > li {max-width: 190px; padding: 0 20px 80px 20px;} .feature-highlights .icon img {display: block; margin: 0 auto 10px auto; max-width: 100px;} .feature-how-it-works {margin: 0 0 50px 0;} .feature-how-it-works .header > div {padding-top: 80px;} .feature-how-it-works .body {position: relative; min-height: 600px;} .feature-how-it-works .body:before {position: absolute; content: ""; transform: rotate(-12deg); top: 170px; right: -200px; bottom: 0; left: -200px; background: #478fcc; background: -moz-linear-gradient(-45deg, #478fcc 0%, #69cbb0 100%); background: -webkit-linear-gradient(-45deg, #478fcc 0%,#69cbb0 100%); background: linear-gradient(135deg, #478fcc 0%,#69cbb0 100%);} .feature-how-it-works.no-faqs .body:before {top: 50px;} .feature-how-it-works .upper {display: flex; flex-wrap: wrap; margin: 0 0 50px 0; min-height: 200px;} .feature-how-it-works .upper > .left {width: 55%; padding: 0 80px 0 0;} .feature-how-it-works .upper > .right {width: 45%; padding: 40px 0 0 0;} .feature-divider.feature-how-it-works .header > div {padding-top: 0;} .feature-faqs {font-size: 16px; line-height: 22px;} .feature-faqs > div {background: #f5f6f8; transition: 0.5s ease;} .feature-faqs > div > a {display: block; position: relative; padding: 20px 60px 20px 30px; color: #575757; text-decoration: none; font-weight: bold; font-size: 24px; line-height: 28px;} .feature-faqs > div > a:before {position: absolute; font-family: 'FontAwesome'; top: 20px; right: 20px; content: "\f067";} .feature-faqs > div > a:hover, .feature-faqs > div > a:focus {background: #e3edf7;} .feature-faqs > div + div {margin-top: 20px;} .feature-faqs > div.active {background: #e3edf7;} .feature-faqs > div.active > a {} .feature-faqs > div.active > a:before {content: "\f068";} .feature-faqs .content {padding: 0 30px 20px 30px;} .feature-faq-photos img {display: none;} .feature-faq-photos.slick-initialized img {display: block;} .feature-illustration-block {position: relative; float: right;} .feature-illustration-block .illustration img {display: block; border: solid 15px #fff; border-radius: 20px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.2); position: relative;} .feature-illustration-block .illustration:before {position: absolute; content: ""; background: #fff; bottom: -25px; left: 50px; right: 50px; border-radius: 50%; height: 100px; box-shadow: 0 0 40px 0 rgba(0,0,0,0.6); background: rgba(0,0,0,0.3);} .feature-illustration-block .photo img {position: absolute; bottom: -120px; right: -30px; border-radius: 50%; display: block; max-width: 240px;} .feature-quote {display: flex; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; font-size: 20px; line-height: 28px; color: #fff;} .feature-quote > .content {width: 70%; padding: 30px 40px 0 100px; background: url(images/v2/left-quote-mark.png) no-repeat left top;} .feature-quote > .photo {width: 30%; padding: 30px 0 0 0;} .feature-quote > .photo img {display: block; border-radius: 50%;} .feature-quote .author {margin: 0 0 20px 0;} .feature-quote .logo {max-width: 180px;} .feature-customer-stories-section > div {padding-top: 100px; padding-bottom: 100px;} .feature-customer-stories {display: flex; flex-wrap: wrap; margin: 0 -40px -80px -40px; font-size: 20px; line-height: 28px;} .feature-customer-stories > div {display: flex; width: 50%; padding: 0 40px 80px 40px;} .feature-customer-stories > div > div {padding: 20px 20px 40px 20px; background: #fff; box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); display: flex; flex-direction: column; cursor: pointer;} .feature-customer-stories h3 {margin: 0; font-size: 20px; line-height: 24px; color: #478fcc; text-transform: uppercase; font-weight: bold; letter-spacing: 1px;} .feature-customer-stories h3 a {color: #478fcc;} .feature-customer-stories h3 a:focus, .feature-customer-stories h3 a:hover {color: #000;} .feature-customer-stories .thumb img {display: block; margin: 0 0 30px 0;} .feature-customer-stories .content {display: flex; flex-wrap: wrap; align-items: center; flex-grow: 1;} .feature-customer-stories .content > .left {width: 55%; padding: 0 40px 0 0; text-align: center;} .feature-customer-stories .content > .left img {display: block; margin: 0 auto;} .feature-customer-stories .content > .right {width: 45%;} .feature-text-with-photo-section > div {padding-top: 20px; padding-bottom: 20px;} .feature-text-banner + .feature-text-with-photo-section > div {padding-top: 50px;} .feature-text-with-photo {display: flex; flex-wrap: wrap; max-width: 1150px; margin: 0 auto; align-items: center;} .feature-text-with-photo > .photo {width: 55%;} .feature-text-with-photo > .photo img {display: block;} .feature-text-with-photo > .content {width: 45%; padding: 0 0 0 40px;} .feature-text-with-photo h2 {margin: 0 0 30px 0; padding: 0 0 30px 0; font-size: 38px; line-height: 42px; color: #333f50; font-weight: 300; position: relative;} .feature-text-with-photo h2:before {position: absolute; content: ""; width: 68px; height: 4px; left: 0; bottom: 0; background: url(images/v2/red-dot.png) repeat-x left top;} .feature-text-with-photo.reverse {flex-direction: row-reverse;} .feature-text-with-photo.reverse > .content {padding: 0 40px 0 0;} .page-intro {font-size: 20px; line-height: 30px;} .page-intro > div {padding-top: 50px; padding-bottom: 50px;} .page-intro h1 {margin: 0 0 20px 0; font-size: 56px; line-height: 60px; color: #232949; font-weight: 300;} .page-intro h2 {margin: 0 0 20px 0; font-size: 38px; line-height: 42px; color: #232949; font-weight: 300;} .page-intro .container {display: flex; flex-wrap: wrap; vertical-align: middle;} .page-intro .content {width: 47%; padding: 0 100px 0 0;} .page-intro .photo {width: 53%;} .page-intro .photo > div { width: 110%;} .page-intro .photo img {display: block;} .generic-page-intro {color: #fff; font-size: 20px; line-height: 24px; text-align: center;} .generic-page-intro > div {padding-top: 80px; padding-bottom: 80px;} .generic-page-intro h1 {margin: 0 0 20px 0; font-size: 56px; line-height: 60px; font-weight: 300;} .feature-text-banner {font-size: 24px; line-height: 36px; color: #fff; text-align: center; font-weight: 300;} .feature-text-banner > div {padding-top: 80px; padding-bottom: 80px; background: url(images/v2/bg-globe-dots.png) no-repeat center bottom;} .feature-text-banner > div > div {max-width: 800px; margin: 0 auto;} .feature-uses-section {position: relative; z-index: 0; margin: 100px 0 50px 0;} .feature-uses-section > div {padding-top: 50px; padding-bottom: 150px;} .feature-uses-section:before {position: absolute; content: ""; transform: rotate(-12deg); top: 0; right: -200px; bottom: 0; left: -200px; background: rgb(8,24,47); background: -moz-linear-gradient(left, rgba(8,24,47,1) 0%, rgba(11,128,158,1) 100%); background: -webkit-linear-gradient(left, rgba(8,24,47,1) 0%,rgba(11,128,158,1) 100%); background: linear-gradient(to right, rgba(8,24,47,1) 0%,rgba(11,128,158,1) 100%);} .feature-uses-section .section-header {color: #fff;} .feature-uses-section .section-header h2 {color: #fff;} .feature-uses-section .stories-grid {font-weight: 300;} .generic-feature-section > div {padding-top: 80px; padding-bottom: 80px;} .feature-text-with-photo-section + .generic-feature-section > div:before {position: absolute; content: ""; top: 0; left: 40px; right: 40px; height: 1px; background: #89d7c1;} .features-grid {display: flex; flex-wrap: wrap; justify-content: center; font-size: 16px; line-height: 24px; text-align: center; font-weight: 300; margin: 0 -20px -60px -20px;} .features-grid > div {width: 33.3333%; padding: 0 60px 60px 60px;} .features-grid h3 {margin: 0 0 10px 0; font-size: 20px; line-height: 24px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold;} .features-grid .icon {max-width: 120px; margin: 0 auto 20px auto;} .features-grid .icon img {display: block; width: 100%;} .contact-intro {margin: 0 0 150px 0;} .contact-intro h1 {margin: 0; font-size: 56px; line-height: 60px; color: #1a3e5c; font-weight: 300;} .contact-intro .section-header {padding-top: 70px;} .contact-intro .body {position: relative; z-index: 1;} .contact-intro .body:before {position: absolute; content: ""; transform: rotate(-12deg); top: 30px; right: -200px; bottom: 0; left: -200px; background: #478fcc; background: -moz-linear-gradient(-45deg, #478fcc 0%, #69cbb0 100%); background: -webkit-linear-gradient(-45deg, #478fcc 0%,#69cbb0 100%); background: linear-gradient(135deg, #478fcc 0%,#69cbb0 100%);} .action-tiles {display: flex; flex-wrap: wrap; margin: 0 -10px -30px -10px; font-size: 21px; line-height: 30px;} .action-tiles > div {width: 25%; padding: 60px 10px 30px 10px; display: flex;} .action-tiles > div > div {width: 100%; position: relative; padding: 80px 40px 100px 40px; background: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);} .action-tiles h2 {margin: 0 0 20px 0; font-size: 32px; line-height: 36px; color: #333f50; font-weight: 300;} .action-tiles .icon {width: 120px; height: 120px; background: #f5f6f8; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); position: absolute; top: -60px; left: 40px; border-radius: 50%;} .action-tiles .icon img {display: block; width: 70px; margin: 0 auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .action-tiles .action {position: absolute; right: 0; bottom: 0; left: 0; padding: 25px; font-size: 16px; line-height: 20px; background: #f5f6f8; text-align: center;} .action-tiles .action a {color: #478fcc; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;} .action-tiles .action a:after {font-family: 'FontAwesome'; content: "\f105"; margin-left: 5px;} .action-tiles .action a:hover, .action-tiles .action a:focus {color: #000;} .contact-details {font-size: 24px; line-height: 36px; font-weight: 300;} .contact-details > div {padding-bottom: 100px;} .contact-details h2 {margin: 0 0 30px 0; font-size: 44px; line-height: 50px; font-weight: 300; text-align: center; color: #1a3e5c;} .contact-details h3 {margin: 0 0 10px 0; font-size: 32px; line-height: 36px; color: #575757; font-weight: 300;} .contact-details .content {display: flex; flex-wrap: wrap; flex-direction: row-reverse;} .contact-details .content > .left {width: 30%; padding: 80px 100px 0 0;} .contact-details .content > .right {width: 70%;} .logo-grid {display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -20px -40px -20px;} .logo-grid > div {width: 16%; padding: 0 20px 40px 20px;} .logo-grid img {display: block; margin: 0 auto;} .solution-logo-banner + .solution-logo-banner > div {border-top: solid 1px #89d7c1;} .solution-logo-banner.blue header {text-align: center; font-size: 20px; line-height: 24px; color: #69cbb0; margin: 0 auto 30px auto; max-width: 100%;} .solution-logo-banner.blue > div {padding-top: 70px; padding-bottom: 50px;} .solution-logo-banner.blue .logo-grid {align-items: center;} .solution-logo-banner.blue .logo-grid > div {max-width: 135px;} .feature-intro-container + .solution-logo-banner {margin-top: 80px;} #contact-map {position: relative; padding-bottom: 50%;} #contact-map > iframe {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;} #request-demo {background: #478fcc; position: relative; color: #fff; z-index: 100; position: fixed; top: -400px; left: 0; right: 0; transition: 0.5s ease; opacity: 0; pointer-events: none;} #request-demo > div {padding-top: 40px; padding-bottom: 40px;} #request-demo p {text-align: center;} #request-demo .confirmation {display: none;} #request-demo .close {padding: 0; margin: 0; background: none; border: none; position: absolute; top: 20px; right: 5px; display: block; width: 30px; height: 30px; text-align: center; font-size: 20px; line-height: 30px;} #request-demo .close:focus, #request-demo .close:hover {color: #fff;} #request-demo .resource-grid {margin-bottom: -30px;} #request-demo .resource-tile .summary {display: none;} #request-demo .resource-tile .type {display: none;} body.show-request-demo #request-demo {top: 90px; opacity: 1; pointer-events: all;} #request-demo-dialog {max-width: 600px; background: #478fcc; position: relative; color: #fff; margin: 0 auto; padding: 40px;} #request-demo-dialog p {text-align: center;} #request-demo-dialog .confirmation {display: none;} #request-demo-dialog .resource-grid {margin-bottom: -30px;} #request-demo-dialog .resource-grid > div {min-width: 50%;} #request-demo-dialog .resource-tile .summary {display: none;} #request-demo-dialog .resource-tile .type {display: none;} .request-demo-form {color: #fff; font-size: 16px; line-height: 20px; max-width: 800px; margin: 0 auto;} .request-demo-form a {color: #fff; text-decoration: underline !important;} .request-demo-form span {font-size: 16px !important; color: #fff !important;} .request-demo-form label {width: 100% !important;} .request-demo-form label[for="FirstName"], .request-demo-form label[for="LastName"], .request-demo-form label[for="Email"], .request-demo-form label[for="Company"], .request-demo-form label[for="Title"], .request-demo-form label[for="FirstName"], .request-demo-form label[for="FirstName"] {clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px !important;} .request-demo-form {display: flex; flex-wrap: wrap; width: 100% !important;} .request-demo-form .mktoFormRow {clear: none; width: 50%; padding: 0 10px 20px 10px;} .request-demo-form .mktoFormRow:nth-child(6), .request-demo-form .mktoFormRow:nth-child(7), .request-demo-form .mktoFormRow:nth-child(8), .request-demo-form .mktoFormRow:nth-child(9) {width: 100%; padding: 0 10px 5px 10px;} .request-demo-form .mktoClear {clear: none; display: none;} .request-demo-form .mktoOffset, .request-demo-form .mktoAsterix {display: none;} .request-demo-form .mktoHtmlText {width: 100% !important;} .request-demo-form input[type="text"], .request-demo-form input[type="email"] {width: 100% !important; display: block; padding: 10px; font-size: 16px; line-height: 20px; border: none;} .request-demo-form .mktoFieldWrap {position: relative;} .request-demo-form .mktoError {position: absolute; padding: 5px; background: #f00; color: #fff; z-index: 10; left: 20px; right: auto;} .request-demo-form .mktoButtonRow {width: 100%; padding: 5px 10px 0 10px;} .request-demo-form .mktoButton {display: inline-block; font-weight: bold; text-transform: uppercase; cursor: pointer; font-size: 14px; line-height: 18px; color: #fff; background: #0e3351; border-radius: 30px; padding: 11px 30px; border: none; width: 100%; transition: 0.25s ease;} .request-demo-form .mktoButton:focus, .request-demo-form .mktoButton:hover {background: #00b9da;} .request-demo-form .mktoButtonWrap, .request-demo-form .mktoFieldDescriptor {margin: 0 !important;} .request-demo-form label[for="GDPR_Consent_to_Processing__c"] {display: block; padding: 0 0 0 20px;} .request-demo-form #GDPR_Consent_to_Processing__c {position: absolute; top: 0; left: 0;} /** * Customer Stories page */ body.page-template-template-customer-stories #header {background: #fff;} /* .stories-page-header {font-size: 30px; line-height: 40px; font-weight: 300; position: relative; z-index: 1; background: #fff;} .stories-page-header:before {position: absolute; content: ""; left: calc(50% - 2000px); bottom: 0; width: 4000px; padding-bottom: 620px; background: url(images/v2/story-logos.png) no-repeat center center; background-size: contain;} .stories-page-header > div {padding-top: 50px; padding-bottom: 50px;} .stories-page-header h1 {margin: 0 0 20px 0; font-size: 56px; line-height: 60px; color: #232949; font-weight: 300;} .stories-page-header .content {max-width: 500px; position: relative; padding-bottom: 30%;} .stories-page-header .btn {font-weight: normal;} */ .stories-page-header {font-size: 30px; line-height: 40px; font-weight: 300; position: relative; z-index: 1; background: #fff; overflow: hidden;} .stories-page-header:before {position: absolute; content: ""; left: calc(50% - 1800px); bottom: 0; width: 3600px; padding-bottom: 940px; background: url(images/v2/customer-stories-header-ultrawide.svg) no-repeat center center; background-size: contain;} .stories-page-header > div {padding-top: 50px; padding-bottom: 50px;} .stories-page-header h1 {margin: 0 0 20px 0; font-size: 56px; line-height: 60px; color: #232949; font-weight: 300;} .stories-page-header .content {max-width: 500px; position: relative; padding-bottom: 25%;} .stories-page-header .btn {font-weight: normal;} .section-links-banner {position: relative; z-index: 1; text-align: center;} .section-links-banner > div {padding-top: 50px; padding-bottom: 50px;} .section-links-banner ul {margin: 0 -20px -20px -20px; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} .section-links-banner li {padding: 0 20px 20px 20px; max-width: 20%;} .section-links-banner a {color: #fff; text-decoration: none;} .section-links-banner a:focus, .section-links-banner a:hover {text-decoration: underline;} .customer-stats-banner {position: relative; margin: 0 0 60px 0;} .customer-stats-banner > div {padding-top: 60px; padding-bottom: 120px;} .customer-stats-banner:before {position: absolute; content: ""; transform: rotate(-5deg); top: -1000px; right: -200px; bottom: 0; left: -200px; background: #F5F6F8;} .customer-stats {display: flex; flex-wrap: wrap; font-size: 22px; line-height: 26px; text-align: center; color: #676767; margin: 0 -20px -60px -20px;} .customer-stats > div {width: 33.3333%; padding: 0 20px 60px 20px;} .customer-stats strong {display: block; font-size: 32px; line-height: 36px; color: #478ECC; text-transform: uppercase; letter-spacing: 2px;} .customer-stats .stat {font-size: 100px; line-height: 100px; color: #232A49; font-weight: bold; display: block; margin: 0 0 5px 0;} .customer-stats .logo img {display: block; margin: 0 auto; max-width: 150px;} .full-story-card {font-size: 28px; line-height: 42px; font-weight: 300; margin: 0 0 80px 0;} .full-story-card header {margin: 0 0 60px 0; text-align: center;} .full-story-card header .icon img {display: block; margin: 0 auto 20px auto;} .full-story-card header h2 {margin: 0; font-size: 27px; line-height: 31px; color: #FE424D; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;} .full-story-card > .body {overflow: hidden;} .full-story-card > .body > div {display: flex; flex-wrap: wrap; margin: 0 -50px -50px -50px;} .full-story-card > .body > div > div {width: 50%; padding: 0 50px 50px 50px;} .full-story-card .logo img {max-width: 250px;} .full-story-card .author {font-size: 20px; line-height: 30px;} .full-story-card .author .name {display: block;} .full-story-card .more {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 40px -20px -40px -20px;} .full-story-card .more > div {padding: 0 20px 40px 20px;} .full-story-card .more img {max-width: 200px;} .full-story-card + .full-story-card {margin-top: 80px; padding-top: 80px; border-top: solid 1px #C3C3C3;} .full-story-card.swap > .body > div {flex-direction: row-reverse;} .story-card {background: #F5F6F8; font-size: 20px; line-height: 30px; color: #676767;} .story-card .thumb img {display: block; width: 100%;} .story-card .content {padding: 50px;} .story-card .video-link {display: block;} .testimonial-banner {position: relative; font-size: 35px; line-height: 45px; color: #fff; text-align: center; font-weight: 300;} .testimonial-banner > div {padding-top: 100px; padding-bottom: 100px; max-width: 1150px;} .testimonial-banner:before {position: absolute; content: ""; transform: rotate(-5deg); top: 0; right: -200px; bottom: 0; left: -200px; background: #478fcc; background: -moz-linear-gradient(-45deg, #478fcc 0%, #69cbb0 100%); background: -webkit-linear-gradient(-45deg, #478fcc 0%,#69cbb0 100%); background: linear-gradient(135deg, #478fcc 0%,#69cbb0 100%);} .testimonial-banner .author {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 21px; line-height: 31px; text-align: left; margin: 40px 0 0 0;} .testimonial-banner .author .photo {width: 150px; margin-right: 30px;} /* width: 110px; */ .testimonial-banner .author .photo img {width: 100%; display: block; border-radius: 50%; border: solid 5px #fff;} .testimonial-banner .author .name {display: block;} .testimonial-banner.no-slant:before {transform: none;} .testimonial-banner-quote-slider .slick-dots {margin: 40px 0 0 0; padding: 0; list-style-type: none; text-align: center; font-size: 0; line-height: 0;} .testimonial-banner-quote-slider .slick-dots li {display: inline-block; margin: 0 8px; vertical-align: middle;} .testimonial-banner-quote-slider .slick-dots li.slick-active button {background: #232a49;} .testimonial-banner-quote-slider .slick-dots button {display: block; width: 20px; height: 20px; font-size: 0; line-height: 0; text-indent: -10000px; background: #fff; border-radius: 50%; cursor: pointer; border: none;} .testimonial-banner-quote-slider .slick-track {display: flex; align-items: center;} .testimonial-banner-quote-slider .slick-slide {outline: transparent;} /** * About page */ #about-intro {padding: 100px 0 100px 0;} #about-intro .upper h2 {margin: 0; font-size: 56px; line-height: 68px; font-weight: 300; color: #232A49;} #about-intro .upper .content {max-width: 600px; position: relative; z-index: 2;} #about-intro .photo {max-width: 1600px; margin: -200px auto 100px auto; position: relative;} /* #about-intro .photo:before {position: absolute; content: ""; top: -260px; right: 0; bottom: -60px; left: 0; background: url(images/v2/bg-about-header-dots.png) no-repeat calc(100% - 20px) center; background-size: contain;} */ #about-intro .photo img {display: block; margin: 0 auto;} /* #about-intro .lower .content {display: flex; flex-wrap: wrap; margin: 0 -50px -100px -50px;} #about-intro .lower .content > div {width: 50%; padding: 0 50px 100px 50px;} */ #about-intro .lower .content {text-align: center; font-size: 24px; line-height: 36px; font-weight: 300; max-width: 800px; margin: 0 auto;} .sevices-banner .section-header h2 {margin: 0; font-size: 30px; line-height: 34px; color: #fff;} .services-grid {margin: 0 -40px -40px -40px; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; font-weight: 300; text-transform: uppercase; text-align: center; justify-content: center;} .services-grid > li {width: 33.3333%; padding: 0 40px 40px 40px;} .services-grid a {color: #fff;} .services-grid a:focus, .services-grid a:hover {text-decoration: underline;} .services-grid img {display: block; margin: 0 auto 10px auto; max-width: 60px;} .profiles {text-align: center; max-width: 940px; margin: 0 auto;} .profiles > div {display: flex; flex-wrap: wrap; margin: 0 -40px -80px -40px; justify-content: center;} .profiles > div > div {width: 33.3333%; padding: 0 40px 80px 40px;} .profiles button {background: none; margin: 0; padding: 0; cursor: pointer; color: #478ECC; border: none; font-size: 25px; line-height: 30px; font-weight: 300; width: 100%;} .profiles button img {display: block; margin: 0 auto 30px auto; border-radius: 50%; max-width: 260px;} .profiles button .photo {width: 260px; height: 260px; margin: 0 auto 30px auto; background: no-repeat center top; background-size: 100% auto; border-radius: 50%; transition: 0.25s ease;} .profiles.founders > div > div:first-child {width: 100%;} /* .profiles button.active .photo, .profiles button:focus .photo, .profiles button:hover .photo {background-position: center 100%;} */ .profiles .profile-details {display: none;} .wide-photo-banner img {display: block; margin: 0 auto 50px auto;} /** * Executive Reports page */ .page-id-42479 #main > section:nth-child(3) > div {padding-bottom: 0;} .page-id-42479 .page-intro .content img {display: none;} /** * Blog */ .blog-header {display: flex; flex-wrap: wrap; margin: 30px 0; align-items: center; padding: 40px 0 0 0;} .blog-header h1 {margin: 0; padding: 0 30px 0 0; font-size: 56px; line-height: 68px; color: #1a3e5c; font-weight: 300; width: 70%;} .blog-header form {width: 30%; border: solid 1px #959595; display: flex; align-items: center; border-radius: 10px;} .blog-header form [type="text"] {width: calc(100% - 45px); font-size: 15px; line-height: 19px; padding: 13px 10px; border: none; background: none;} .blog-header form button {width: 45px; height: 45px; background: none; border: none; margin: 0; padding: 0; text-align: center; font-size: 28px; line-height: 43px; color: #ef4450; cursor: pointer;} .blog-sub-header {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0 30px 0;} .blog-sub-header h2 {margin: 0; font-size: 44px; line-height: 48px; color: #1a3e5c; font-weight: 300;} .blog-sub-header .filters {margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; font-size: 16px; line-height: 20px; color: #232949;} .blog-sub-header .filters > li {margin-left: 20px; position: relative;} .blog-sub-header .filters > li > button {padding: 0; margin: 0; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; border: none; cursor: pointer; font-size: 16px; line-height: 20px; background: none;} .blog-sub-header .filters > li ul {margin: 10px 0 0 0; padding: 20px; list-style-type: none; position: absolute; width: 200px; right: 0; background: #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); transition: 0.5s ease; opacity: 0; pointer-events: none; z-index: -1;} .blog-sub-header .filters > li ul:before {position: absolute; content: ""; border: solid 10px transparent; border-bottom-color: #e9e9e9; top: -20px; right: 20px;} .blog-sub-header .filters > li ul:after {position: absolute; content: ""; border: solid 10px transparent; border-bottom-color: #fff; top: -18px; right: 20px;} .blog-sub-header .filters > li.active ul {opacity: 1; pointer-events: all; z-index: 1;} .featured-blog-posts {display: flex; flex-wrap: wrap; margin: 0 0 50px 0;} .featured-blog-posts > .primary {width: 50%; padding: 0 20px 0 0; display: flex;} .featured-blog-posts > .primary .post-tile {font-size: 16px; line-height: 20px;} .featured-blog-posts > .primary .post-tile h2 {font-size: 42px; line-height: 50px;} .featured-blog-posts > .primary .post-tile .content {padding: 50px;} .featured-blog-posts > .primary .post-tile .photo {border-bottom-width: 10px; padding-bottom: 60%;} .featured-blog-posts > .secondary {width: 50%; display: flex; flex-wrap: wrap; flex-direction: column; margin: -15px 0; padding: 0 0 0 20px;} .featured-blog-posts > .secondary > div {padding: 15px 0; display: flex; height: 33.3333%;} .featured-blog-posts > .secondary > div:nth-child(1) .post-tile {border-top-color: #fe414d;} .featured-blog-posts > .secondary > div:nth-child(1) .post-tile .photo {border-bottom-color: #fe414d;} .featured-blog-posts > .secondary > div:nth-child(1) .post-tile .category {color: #fe414d;} .featured-blog-posts > .secondary > div:nth-child(1) .post-tile .label {background-color: #fe414d;} .featured-blog-posts > .secondary > div:nth-child(2) .post-tile {border-top-color: #69cbb0;} .featured-blog-posts > .secondary > div:nth-child(2) .post-tile .photo {border-bottom-color: #69cbb0;} .featured-blog-posts > .secondary > div:nth-child(2) .post-tile .category {color: #69cbb0;} .featured-blog-posts > .secondary > div:nth-child(2) .post-tile .label {background-color: #69cbb0;} .featured-blog-posts > .secondary > div:nth-child(3) .post-tile {border-top-color: #232949;} .featured-blog-posts > .secondary > div:nth-child(3) .post-tile .photo {border-bottom-color: #232949;} .featured-blog-posts > .secondary > div:nth-child(3) .post-tile .category {color: #232949;} .featured-blog-posts > .secondary > div:nth-child(3) .post-tile .label {background-color: #232949;} .featured-blog-posts > .secondary .post-tile {font-size: 15px; line-height: 19px; display: flex; flex-wrap: wrap; border-top: solid 10px #fe414d; min-height: 220px;} .featured-blog-posts > .secondary .post-tile h2 {font-size: 21px; line-height: 28px;} .featured-blog-posts > .secondary .post-tile .photo {width: 30%; padding-bottom: 0; border-bottom-width: 0px;} .featured-blog-posts > .secondary .post-tile .content {width: 70%; padding: 20px 30px; display: flex; align-items: center;} .post-tile {background: #f5f6f8; font-size: 12px; line-height: 16px; color: #232949; width: 100%; box-shadow: 0 0 5px 0 rgba(56,69,77,0.25); transition: 0.25s ease;} .post-tile:hover {transform: scale(1.05);} .post-tile h2 {margin: 0 0 10px 0; font-size: 17px; line-height: 23px; font-weight: bold;} .post-tile a {color: #232949; text-decoration: none; position: relative; left: 0;} .post-tile a:focus, .post-tile a:hover {text-decoration: underline;} .post-tile .photo {position: relative; padding-bottom: 100%; display: block; background: no-repeat center center; background-size: cover; border-bottom: solid 8px #478ecc;} .post-tile .content {padding: 20px 15px;} .post-tile .category {margin: 0 0 5px 0; color: #478ecc; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;} .post-tile .label {position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 20px; display: block; font-size: 16px; line-height: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #fff; background: #69cbb0;} .newsletter-callout-tile > div {display: flex; width: 100%; justify-content: center; align-items: center; padding: 30px; background: url(images/v2/bg-blog-newsletter-callout-lrg.png) no-repeat center center; background-size: cover; font-size: 18px; line-height: 26px; color: #fff; text-align: center;} .newsletter-callout-tile h2 {margin: 0 0 20px 0; font-size: 31px; line-height: 35px; font-weight: bold;} .newsletter-subscribe-form .form {position: relative; background: #f5f6f8; border-radius: 30px; min-height: 42px;} .newsletter-subscribe-form .form [type="text"], .newsletter-subscribe-form .form [type="email"] {width: 100%; background: none; border: 0; padding: 11px 15px; font-size: 16px; line-height: 20px; height: auto; margin: 0;} .newsletter-subscribe-form .form .mktoButton {font-size: 0; width: 45px !important; padding: 0 !important; height: 42px; position: absolute; top: 0; right: 0; bottom: 0; -webkit-appearance: none; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border: none; background: #e3edf7; color: #478fcc; border-top-right-radius: 30px; border-bottom-right-radius: 30px;} .newsletter-subscribe-form .form .mktoButton:before {position: absolute; content: ""; font-family: 'FontAwesome'; content: "\f00c"; font-size: 20px; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 42px;} .newsletter-subscribe-form .form .mktoForm {width: 100% !important; padding: 0 !important;} .newsletter-subscribe-form label {clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px;} .newsletter-subscribe-form .success, .newsletter-subscribe-form .submitted-message {display: none;} .newsletter-subscribe-form input#Email {width: 100% !important; margin: 0 !important;} .newsletter-subscribe-form .mktoForm .mktoFormCol {float: none; width: 100%; margin: 0 !important;} .newsletter-subscribe-form .form .mktoButtonRow {position: static;} .newsletter-subscribe-form .mktoForm .mktoFieldWrap, .newsletter-subscribe-form .mktoForm .mktoField {float: none;} .newsletter-subscribe-form .mktoForm .mktoClear, .newsletter-subscribe-form .mktoForm .mktoOffset, .newsletter-subscribe-form .mktoForm .mktoGutter {display: none;} .newsletter-subscribe-form .mktoForm .mktoButtonRow {display: block;} .newsletter-subscribe-form .mktoForm .mktoButtonWrap {margin: 0 !important;} #newsletter-subscribe-dialog {max-width: 600px; padding: 40px; background: #fff; position: relative; margin: 0 auto;} .post-grid {display: flex; flex-wrap: wrap; margin: 0 -15px;} .post-grid > div {display: flex; width: 25%; padding: 0 15px 30px 15px;} .post-grid > div:nth-child(8n+1) .post-tile .photo {border-bottom-color: #69cbb0;} .post-grid > div:nth-child(8n+1) .post-tile .category {color: #69cbb0;} .post-grid > div:nth-child(8n+2) .post-tile .photo {border-bottom-color: #232949;} .post-grid > div:nth-child(8n+2) .post-tile .category {color: #232949;} .post-grid > div:nth-child(8n+3) .post-tile .photo {border-bottom-color: #fe414d;} .post-grid > div:nth-child(8n+3) .post-tile .category {color: #fe414d;} .post-grid > div:nth-child(8n+5) .post-tile .photo {border-bottom-color: #01b9db;} .post-grid > div:nth-child(8n+5) .post-tile .category {color: #01b9db;} .post-grid > div:nth-child(8n+8) .post-tile .photo {border-bottom-color: #fe414d;} .post-grid > div:nth-child(8n+8) .post-tile .category {color: #fe414d;} .post-grid .callout {display: flex;} .post-grid .callout > a {width: 100%; background: no-repeat center center; background-size: cover;} .show-more-bar {position: relative; text-align: center; margin: 0 0 30px 0;} .show-more-bar:before {position: absolute; content: ""; background: #dedfe0; height: 3px; left: 0; right: 0; top: calc(50% - 1px);} .show-more-bar > span {padding: 0 13px; background: #fff; position: relative;} .show-more-bar button {display: inline-block; font-size: 16px; line-height: 20px; padding: 15px 25px; letter-spacing: 2px; font-weight: bold; text-transform: uppercase; background: none; cursor: pointer; margin: 0; border: solid 2px #232949; border-radius: 50px;} .show-more-bar button.loading:after {display: inline-block; content: ""; width: 16px; height: 16px; margin-left: 10px; background: url(images/v2/loading.gif) no-repeat center center;} .show-more-bar button[disabled] {opacity: 0.6;} #post {margin: 60px 0 0 0;} #post h2 {margin: 0 0 20px 0; font-size: 32px; line-height: 42px; color: #232949; font-weight: normal;} #post h3 {margin: 0 0 5px 0; font-size: 20px; line-height: 24px; color: #232949; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;} #post header {display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 40px 0;} #post header h1 {margin: 0 0 30px 0; font-size: 50px; line-height: 60px; color: #232949; font-weight: bold;} #post header .photo {width: 20%;} #post header .photo > div {padding-bottom: 100%; background: no-repeat center center; background-size: cover;} #post header .content {width: 80%; padding: 0 70px 0 0;} #post header .category {margin: 0; font-size: 20px; line-height: 24px; color: #478ecc; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;} #post header .meta {color: #9194a4; font-size: 19px; line-height: 23px;} #post blockquote {margin: 40px 0; font-size: 44px; line-height: 48px; color: #ff414d; font-weight: 300; padding: 0 0 0 30px; border-left: solid 5px #ff414d;} #post .back {margin: 0 0 20px 0; font-size: 16px; line-height: 20px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;} #post .back a {color: #232949;} #post .back a:focus, #post .back a:hover {text-decoration: underline;} #post .content-wrapper {display: flex; flex-wrap: wrap; flex-direction: row-reverse;} #post .content-wrapper > .content {width: calc(100% - 240px);} #post .content-wrapper > .content > div {max-width: 900px;} #post .content-wrapper > aside {width: 240px; padding: 0 50px 0 0;} #post .content-wrapper > aside h4 {margin: 0 0 20px 0; padding: 0 0 20px 0; position: relative; font-size: 24px; line-height: 28px; color: #232949; font-weight: 300;} #post .content-wrapper > aside h4:after {position: absolute; content: ""; left: 0; bottom: 0; width: 64px; height: 8px; background: url(images/v2/red-dot.png) repeat-x;} #post .nav {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 40px 0 0 0;} #post .nav a {display: inline-block; min-width: 210px; text-align: center; font-size: 16px; line-height: 20px; color: #232949; padding: 15px 25px; letter-spacing: 2px; font-weight: bold; text-transform: uppercase; border: solid 2px #232949; border-radius: 50px; transition: 0.25s ease;} #post .nav a:focus, #post .nav a:hover {background: #232949; color: #fff;} #post .nav .previous a:before {font-family: 'FontAwesome'; content: "\f104"; margin-right: 10px;} #post .nav .next a:after {font-family: 'FontAwesome'; content: "\f105"; margin-left: 10px;} #post .author {margin: 80px 0 0 0; background: #f5f6f8; padding: 70px 50px; font-size: 18px; line-height: 28px; color: #575757;} #post .author > div {display: flex; flex-wrap: wrap; max-width: 900px; margin: 0 auto; align-items: center;} #post .author h4 {margin: 0; font-size: 20px; line-height: 24px; color: #232a49; text-transform: uppercase; letter-spacing: 1px;} #post .author .photo {width: 20%;} #post .author .photo img {display: block; width: 100%; border-radius: 50%;} #post .author .bio {width: 80%; padding: 0 0 0 50px;} #post .addthis_sharing_toolbox {margin: 20px 0 10px 0;} .related-posts-banner .section-header {margin: 0 auto 40px auto;} /** * Resources */ .featured-resources-v2 {display: flex; flex-wrap: wrap; margin: 0 -15px 30px -15px;} .featured-resources-v2 > div {width: 33.3333%; padding: 0 15px 30px 15px; display: flex;} .featured-resources-v2 .resource-tile {padding: 0; font-size: 19px; line-height: 28px;} .featured-resources-v2 .resource-tile h3 {font-size: 25px; line-height: 31px;} .featured-resources-v2 .resource-tile .type.upper {display: none;} .featured-resources-v2 .resource-tile .type.lower {display: block;} .featured-resources-v2 .resource-tile .content {padding: 20px 30px 100px 30px;} .featured-resources-v2 .resource-tile .type {font-size: 20px;} .featured-resources-v2 .resource-tile .action {bottom: 40px;} .featured-resources-v2 .resource-tile .btn {font-size: 19px; line-height: 23px; padding: 15px 30px;} .featured-resources-v2 .resource-tile .photo {margin: 0;} .featured-resources-v2 > div:nth-child(1) .resource-tile {border-top-color: #69cbb0;} .featured-resources-v2 > div:nth-child(1) .type {color: #69cbb0;} .featured-resources-v2 > div:nth-child(1) .btn {background-color: #69cbb0;} .featured-resources-v2 > div:nth-child(1) .btn:focus, .featured-resources-v2 > div:nth-child(1) .btn:hover {background-color: #0e3351;} .featured-resources-v2 > div:nth-child(2) .resource-tile {border-top-color: #fe414d;} .featured-resources-v2 > div:nth-child(2) .type {color: #fe414d;} .featured-resources-v2 > div:nth-child(2) .btn {background-color: #fe414d;} .featured-resources-v2 > div:nth-child(2) .btn:focus, .featured-resources-v2 > div:nth-child(2) .btn:hover {background-color: #0e3351;} .featured-resources-v2 > div:nth-child(2) .resource-tile .photo .label {background-color: #fe414d;} .resource-tile {background: #f5f6f8; font-size: 14px; line-height: 20px; color: #575757; padding: 25px 25px 75px 25px; width: 100%; box-shadow: 0 0 5px 0 rgba(56,69,77,0.25); border-top: solid 8px #478ecc; position: relative; text-align: center;} .resource-tile h3 {margin: 0 0 10px 0; font-size: 18px; line-height: 22px; color: #232949; font-weight: bold;} .resource-tile h3 a {color: #232949;} .resource-tile h3 a:focus, .resource-tile h3 a:hover {text-decoration: underline;} .resource-tile .type {margin: 0 0 20px 0; font-size: 18px; line-height: 22px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: #478ecc;} .resource-tile .type.lower {display: none;} .resource-tile .action {position: absolute; left: 0; right: 0; bottom: 30px;} .resource-tile .btn {font-size: 14px; line-height: 18px; padding: 11px 30px;} .resource-tile .photo {background: no-repeat center center; background-size: cover; padding-bottom: 60%; margin: 0 0 15px 0; display: block; position: relative;} .resource-tile .photo .label {position: absolute; left: 0; bottom: 0; display: block; font-size: 16px; line-height: 20px; padding: 12px 20px; background: #69cbb0; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;} .resource-tile .summary {margin: 0 0 20px 0;} /* .resource-tile.resource-type-guide {border-top-color: #69cbb0;} .resource-tile.resource-type-guide .type {color: #69cbb0;} .resource-tile.resource-type-customer-story {border-top-color: #fe414d;} .resource-tile.resource-type-customer-story .type {color: #fe414d;} .resource-tile.resource-type-article {border-top-color: #01b9db;} .resource-tile.resource-type-article .type {color: #01b9db;} */ .resource-grid {display: flex; flex-wrap: wrap; margin: 0 -15px 30px -15px; justify-content: center;} .resource-grid > div {width: 25%; padding: 0 15px 30px 15px; display: flex;} .resource-grid > div:nth-child(8n+1) .resource-tile {border-top-color: #69cbb0;} .resource-grid > div:nth-child(8n+1) .type {color: #69cbb0;} .resource-grid > div:nth-child(8n+2) .resource-tile {border-top-color: #01b9db;} .resource-grid > div:nth-child(8n+2) .type {color: #01b9db;} .resource-grid > div:nth-child(8n+3) .resource-tile {border-top-color: #fe414d;} .resource-grid > div:nth-child(8n+3) .type {color: #fe414d;} .resource-grid > div:nth-child(8n+4) .resource-tile {border-top-color: #478ecc;} .resource-grid > div:nth-child(8n+4) .type {color: #478ecc;} .resource-grid > div:nth-child(8n+5) .resource-tile {border-top-color: #01b9db;} .resource-grid > div:nth-child(8n+5) .type {color: #01b9db;} .resource-grid > div:nth-child(8n+6) .resource-tile {border-top-color: #478ecc;} .resource-grid > div:nth-child(8n+6) .type {color: #478ecc;} .resource-grid > div:nth-child(8n+7) .resource-tile {border-top-color: #69cbb0;} .resource-grid > div:nth-child(8n+7) .type {color: #69cbb0;} .resource-grid > div:nth-child(8n+8) .resource-tile {border-top-color: #fe414d;} .resource-grid > div:nth-child(8n+8) .type {color: #fe414d;} @media only screen and (max-width: 1800px) { #hero .bg {right: -200px;} .feature-secondary-intro .upper .container > .right img {max-width: 100%;} } @media only screen and (max-width: 1500px) { .stories-page-header:before {padding-bottom: 50%;} } @media only screen and (max-width: 1500px) { .page-intro h1, .stories-page-header h1 {font-size: 40px; line-height: 50px;} .page-intro h2 {font-size: 28px; line-height: 36px;} } @media only screen and (max-width: 1400px) { #hero .bg {right: -400px;} #caa-callout .action.analyze .details {left: -30px; top: 130px;} #caa-callout .action.analyze .details:before {background-image: url(images/v2/caa-analyze-pointer-up.png); width: 44px; height: 24px; left: calc(50% - 22px); top: -30px;} } @media only screen and (max-width: 1270px) { #header nav > ul > li {margin-left: 40px;} } @media only screen and (max-width: 1200px) { #header {overflow: hidden; -webkit-overflow-scrolling: touch; background: rgba(35,31,32,0.9);;} #header > div {height: 60px; padding-top: 70px; background: #fff;} #header .toggle-menu {display: block;} #header .logo {top: 20px; width: 200px;} /* #header .nav-container {position: fixed; top: 90px; right: 0; bottom: 0; left: 0; overflow: auto; z-index: 1000; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: rgba(35,31,32,0.9);} */ #header .nav-container {background: rgba(35,31,32,0.9); margin: 0 -40px;} #header nav {background: #fff; float: none; margin: 0; padding: 0 0 40px 0;} #header nav > ul > li {float: none; margin: 0;} #header nav > ul > li > a {padding: 15px 40px;} #header nav > ul > li.menu-item-has-children > a:after, #header nav > ul > li.product-menu > a:after {border: none; color: #232a49; content: "\f078"; right: 40px; top: 15px; font-family: 'FontAwesome'; position: absolute; font-weight: normal;} #header nav > ul > li.menu-item-has-children.active > a:before, #header nav > ul > li.product-menu.active > a:before {display: none;} #header nav > ul > li.menu-item-has-children.active > a:after, #header nav > ul > li.product-menu.active > a:after {color: #fff; content: "\f077";} #header nav > ul > li.active {background: #232a49;} #header nav > ul > li.active > a {color: #fff;} #header nav > ul > li.demo {position: static; opacity: 1; text-align: center; margin-top: 20px; pointer-events: all;} #header nav > ul > li.demo > a {display: inline-block;} #header nav > ul > li.login {text-align: center; margin-top: 30px;} #header nav > ul > li.login a {display: inline-block; padding: 0 0 0 28px;} #header nav > ul > li:not(.product-menu) .mega-menu {top: auto;} #header nav > ul > li > ul {position: static; top: auto; left: auto; width: 100%; padding: 0 40px 30px 40px; top: auto; opacity: 1; pointer-events: all; display: none; transition: none;} #header .mega-menu {position: relative; top: auto; opacity: 1; pointer-events: all; padding: 0 40px 20px 40px; display: none; transition: none;} #header .mega-menu:before {display: none;} #header .mega-menu .links {column-count: 1;} #header .mega-menu .generic-sub-nav {width: 100%; display: block; left: auto; padding: 20px 0 0 0;} #header .mega-menu .generic-sub-nav .callout {max-width: 300px; padding: 0 0 20px 0; border-right: none; display: none;} /* #header .mega-menu .generic-sub-nav .right {width: auto; padding: 20px 0 0 0; border-top: solid 1px #285b86;} */ #header .mega-menu .generic-sub-nav .right {padding: 0 0 20px 0;} #header .product-sub-nav > .left, #header .product-sub-nav > .right, #header .product-sub-nav.no-feature > .left, #header .product-sub-nav.no-feature > .right {width: 100%; padding: 20px 0 0 0; border: none; border-top: solid 1px #62687e; margin-top: 30px;} #header .product-sub-nav > .left .container > .links {width: 100%; padding: 0;} #header .product-sub-nav > .left .container > .video {display: none;} #header .product-sub-nav > .left {margin-top: 0;} #page {padding-top: 70px;} body.sticky-jump-nav #jump-nav {top: 70px;} /* html.mobile-menu {overflow: hidden;} */ body.mobile-menu #header {bottom: 0; overflow: auto; overflow-y: scroll;} .action-tiles > div {width: 50%;} .contact-details .content > .left, .contact-details .content > .right {width: 100%; padding: 0;} .contact-details .content > .right {margin: 0 0 50px 0;} #hero .large .content {padding-bottom: 150px;} #hero .bg {right: -500px;} .page-intro > div {padding-top: 25px;} .feature-intro > div {padding-top: 25px; padding-bottom: 175px;} .stories-page-header > div {padding-top: 25px;} #about-intro .photo {margin: -125px auto 50px auto;} .generic-content-grid > div {width: 50%;} .metrics > li {width: 50%; max-width: 500px; margin: 0 auto;} .post-grid > div {width: 50%;} .featured-resources-v2 > div {width: 50%;} .featured-resources-v2 > div.newsletter-callout-tile {width: 100%;} #request-demo {display: none;} .request-demo-form .mktoFormRow {width: 100%;} } @media only screen and (max-width: 1100px) { #footer .upper > .left, #footer .upper > .right {width: 100%; padding: 0;} #footer .upper > .left {margin: 0 -15px;} #footer .upper > .left > ul {padding: 0 15px;} #footer .upper > .right {margin: 40px 0 0 0;} #footer .upper > .right .social {position: static; text-align: center; margin-top: 30px;} #hero {font-size: 20px; line-height: 28px; margin: 0 0 40px 0;} #hero h1 {font-size: 44px; line-height: 54px;} #hero .large .content {max-width: 500px; padding-top: 40px;} #hero .bg {right: -250px; width: 2820px; height: 430px;} .dial {padding-bottom: 400px;} .dial:before {display: none;} .dial .mask:before {display: none;} .dial ul {display: flex; flex-wrap: wrap; max-width: 600px; margin: 0 auto;} .dial ul li a {display: flex; align-items: center; min-height: 60px;} .dial ul li, .dial ul li.customer-aquisition, .dial ul li.reputation-management, .dial ul li.roadmap, .dial ul li.customer-loyalty, .dial ul li.retargeting, .dial ul li.employee-experience, .dial ul li.integrations {position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 50%; text-align: left; padding: 0 0 0 80px; margin: 0 0 40px 0;} .dial ul li a:before, .dial ul li.customer-aquisition a:before, .dial ul li.reputation-management a:before, .dial ul li.roadmap a:before, .dial ul li.customer-loyalty a:before, .dial ul li.retargeting a:before, .dial ul li.employee-experience a:before, .dial ul li.integrations a:before {bottom: auto; right: auto; top: 0; left: 0;} .feature-secondary-intro .upper > div {padding-bottom: 75px;} .feature-secondary-intro .upper .container {display: block;} .feature-secondary-intro .upper .container > .right img {max-width: 100%; margin: -325px auto 0 auto;} .feature-secondary-intro .upper .container > .left, .feature-secondary-intro .upper .container > .right {width: 100%; padding: 0;} .feature-secondary-intro .upper .container > .right {margin: 0 0 40px 0;} .feature-text-with-photo > .photo, .feature-text-with-photo > .content, .feature-text-with-photo.reverse > .photo, .feature-text-with-photo.reverse > .content {width: 100%; padding: 0;} .feature-text-with-photo {max-width: 600px; margin: 0 auto;} .feature-text-with-photo > .photo img {margin: 0 auto 10px auto;} .feature-how-it-works .upper {margin: 0 0 50px 0;} .feature-how-it-works .upper > .left, .feature-how-it-works .upper > .right {width: 100%; padding: 0;} .feature-how-it-works .upper > .right {margin: 40px 0 0 0; display: none;} .feature-how-it-works.no-faqs .body:before {top: 0;} .feature-how-it-works.no-faqs .upper {min-height: 50px;} .feature-illustration-block {max-width: 450px; margin: 0 auto; float: none;} .feature-customer-stories .content > .left, .feature-customer-stories .content > .right {width: 100%; padding: 0;} .feature-customer-stories .content > .left {margin: 0 0 30px 0; text-align: left;} .page-intro .content, .page-intro .photo {width: 100%; padding: 0;} .page-intro .content {max-width: 800px; margin: 0 0 40px 0;} .page-intro .photo > div {width: 100%;} .page-intro .photo img {margin: 0 auto;} .features-grid > div {width: 50%;} .page-id-42479 .page-intro .content img {display: block;} .page-id-42479 .page-intro .photo {display: none;} } @media only screen and (max-width: 980px) { .action-items > .left, .action-items > .right {width: 100%; padding: 0;} .action-items > .left {max-width: 400px; margin: 0 auto 40px auto;} .action-items > .right {display: none;} #caa-callout {margin: 0 auto; max-width: 400px;} .stories-grid {display: block; margin: 0;} .stories-grid > div {width: 100%; padding: 0;} .stories-grid > div + div {border-left: 0; border-top: solid 1px rgba(255,255,255,0.5); margin-top: 40px; padding-top: 40px;} .logo-grid > div {width: 20%;} .section-links-banner li {width: 100%; max-width: 100%;} .customer-stats {font-size: 16px; line-height: 22px;} .customer-stats strong {font-size: 14px; line-height: 18px;} .customer-stats .stat {font-size: 30px; line-height: 30px;} .full-story-card {font-size: 22px; line-height: 32px;} .full-story-card > .body > div > div {width: 100%;} .full-story-card .author {font-size: 16px; line-height: 26px;} #about-intro {padding-top: 100px;} #about-intro .upper {margin: 0 0 100px 0;} #about-intro .lower .content > div {width: 100%;} .services-grid > li {width: 50%;} .profiles > div > div {width: 50%;} .testimonial-banner {font-size: 22px; line-height: 32px;} .feature-uses-section > div {padding-bottom: 70px;} .feature-customer-stories-section > div {padding-top: 50px;} .section.extra-large-gutter > div {padding-top: 50px; padding-bottom: 50px;} .resource-grid > div {width: 50%;} .featured-blog-posts {display: block;} .featured-blog-posts > .primary {width: 100%; padding: 0; margin: 0 0 30px 0;} .featured-blog-posts > .primary .post-tile h2 {font-size: 40px; line-height: 50px;} .featured-blog-posts > .secondary {flex-direction: row; margin: 0 -15px; width: auto; padding: 0;} .featured-blog-posts > .secondary > div {width: 33.3333%; height: auto; padding: 0; padding: 0 15px;} .featured-blog-posts > .secondary .post-tile {display: block; border: none;} .featured-blog-posts > .secondary .post-tile .photo {width: 100%; padding-bottom: 60%; border-bottom-width: 10px;} .featured-blog-posts > .secondary .post-tile .content {width: 100%;} .featured-blog-posts > .secondary .post-tile .label {bottom: auto; left: auto; top: 0; right: 0;} } @media only screen and (max-width: 900px) { #hero {font-size: 17px; line-height: 27px;} #hero h1 {font-size: 34px; line-height: 44px;} #hero .large .content {max-width: 380px;} #footer .upper > .left {margin-bottom: -40px;} #footer .upper > .left > ul {width: 50%;} #footer .upper > .left > ul > li {margin-bottom: 40px;} /* .customer-stats {font-size: 18px; line-height: 22px;} .customer-stats .stat {font-size: 60px; line-height: 60px;} .customer-stats strong {font-size: 20px; line-height: 24px;} */ .generic-content-grid > div {width: 100%;} } @media only screen and (max-width: 750px) { #hero h1 {font-size: 28px; line-height: 30px;} #hero .large .content {max-width: 100%; padding: 40px 50% 100px 0;} #hero .bg {right: -250px; width: 2360px; height: 360px;} .feature-customer-stories {margin: 0 0 -80px 0;} .feature-customer-stories > div {width: 100%; padding: 0 0 80px 0;} .feature-customer-stories > div:nth-child(n+2) {display: none;} .feature-how-it-works.with-quote:not(.no-photo) .body:before {bottom: 150px;} .feature-how-it-works.no-photo .lower {padding-bottom: 50px;} .feature-quote {display: block;} .feature-quote > .content {width: 100%; padding: 0 0 0 50px; background-size: 30px auto;} .feature-quote > .photo {width: 100%; max-width: 200px; margin: 0 auto;} .feature-quote > .photo img {margin: 0 auto; display: block;} .feature-faqs > div > a {font-size: 18px; line-height: 22px;} .features-grid > div {padding: 0 20px 60px 20px;} .feature-text-banner > div {background-position: left bottom;} .action-tiles > div {width: 100%;} .logo-grid > div {width: 25%;} .customer-stats > div {width: 100%;} .profiles button .photo {width: 220px; height: 220px;} .metrics > li {width: 100%; max-width: 500px; margin: 0 auto;} .blog-header {display: block;} .blog-header h1 {margin: 0 0 20px 0; width: 100%; padding: 0;} .blog-header form {width: 100%;} .blog-sub-header {display: block;} .blog-sub-header .filters {display: block;} .blog-sub-header .filters > li {display: block; margin: 10px 0 0 0;} .blog-sub-header .filters > li ul {position: relative; top: auto; right: auto; width: 100%; max-height: 0px; margin: 0; padding: 0; pointer-events: all; z-index: 1; overflow: hidden;} .blog-sub-header .filters > li ul:before, .blog-sub-header .filters > li ul:after {right: auto; left: 20px;} .blog-sub-header .filters > li.active ul {max-height: 1000px; padding: 20px; margin: 10px 0 0 0;} #post header h1 {margin: 0; font-size: 40px; line-height: 50px;} #post header .photo, #post header .content {width: 100%; padding: 0;} #post header .photo {max-width: 400px; margin: 0 auto;} #post header .content {margin: 0 0 20px 0;} #post header .category {font-size: 16px; line-height: 20px;} #post header .meta {font-size: 16px; line-height: 20px;} #post .content-wrapper > .content, #post .content-wrapper > aside {width: 100%; padding: 0;} #post .content-wrapper > .content {margin: 0 0 40px 0;} #post .nav {display: block;} #post .nav .previous {margin: 0 0 20px 0;} #post .nav a {width: 100%; display: block;} #post .author {padding: 40px;} #post .author > div {display: block;} #post .author .photo {width: 100%; max-width: 200px; margin: 0 auto 30px auto;} #post .author .bio {width: 100%; padding: 0;} .featured-blog-posts > .secondary {display: block; margin: 0;} .featured-blog-posts > .secondary > div {width: 100%; padding: 0;} .featured-blog-posts > .secondary > div + div {margin-top: 30px;} .featured-resources-v2 > div {width: 100%;} } @media only screen and (max-width: 600px) { #hero .large .text {display: none;} #hero .large .content {padding-bottom: 50px;} #hero .small {display: block;} #hero .bg {right: -50px; width: 1443px; height: 220px;} .dial ul {font-size: 13px; line-height: 15px;} .dial ul li a {min-height: 40px;} .dial ul li a:before, .dial ul li.reputation-management a:before {background-size: 40px auto; width: 40px; height: 40px;} .dial ul li.retargeting a:before {background-size: 40px auto;} .dial ul li, .dial ul li.customer-aquisition, .dial ul li.reputation-management, .dial ul li.roadmap, .dial ul li.customer-loyalty, .dial ul li.retargeting, .dial ul li.employee-experience, .dial ul li.integrations {padding: 0 0 0 60px; margin: 0 0 20px 0;} .feature-intro {font-size: 18px; line-height: 26px;} .feature-intro h1 {font-size: 28px; line-height: 32px;} .feature-secondary-intro .upper {font-size: 18px; line-height: 26px;} .feature-secondary-intro .upper h2 {font-size: 28px; line-height: 32px;} .feature-secondary-intro + .feature-highlights-section > div {padding-top: 100px;} .feature-text-with-photo {font-size: 18px; line-height: 26px;} .feature-text-with-photo h2 {font-size: 28px; line-height: 32px;} .feature-how-it-works .header > div {padding-top: 40px;} .feature-section-with-image > div {padding-top: 40px; padding-bottom: 40px;} .feature-text-banner {font-size: 18px; line-height: 30px;} .section-intro {font-size: 18px; line-height: 26px;} .section-intro h2 {font-size: 28px; line-height: 32px;} .section-header {margin: 0 auto 40px auto;} .section-header, .section-footer {font-size: 18px; line-height: 26px;} .section-header h2 {font-size: 28px; line-height: 32px;} .feature-quote {font-size: 18px; line-height: 26px;} .feature-customer-stories {font-size: 18px; line-height: 26px;} .dialed-in-banner {font-size: 18px; line-height: 26px;} .dialed-in-banner h2 {font-size: 28px; line-height: 32px;} .features-grid > div {width: 100%; padding: 0 0 60px 0;} .contact-intro h1 {font-size: 28px; line-height: 32px;} .action-tiles {font-size: 18px; line-height: 28px;} .action-tiles h2 {font-size: 28px; line-height: 32px;} .contact-details {font-size: 18px; line-height: 28px;} .contact-details h2 {font-size: 28px; line-height: 32px;} .contact-details h3 {font-size: 28px; line-height: 32px;} .page-intro {font-size: 18px; line-height: 26px;} .page-intro h1 {font-size: 28px; line-height: 32px;} .page-intro h2 {font-size: 22px; line-height: 26px;} .heading-with-dots {font-size: 28px; line-height: 32px;} #about-intro {padding-top: 25px;} #about-intro .upper h2 {font-size: 28px; line-height: 32px;} #about-intro .lower .content {font-size: 18px; line-height: 36px;} .stories-page-header {font-size: 18px; line-height: 26px;} .stories-page-header h1 {font-size: 28px; line-height: 32px;} .request-demo-banner {font-size: 18px; line-height: 26px;} .request-demo-banner h1, .request-demo-banner h2 {font-size: 28px; line-height: 32px;} .logo-grid > div {width: 33.3333%;} .logo-banner .logos > div {max-width: 100px;} #contact-map {padding-bottom: 80%;} .testimonial-banner .author {display: block; text-align: center;} .testimonial-banner .author .photo {margin: 0 auto 20px auto;} .services-grid > li {width: 100%;} .profiles > div > div {width: 100%;} .summary-post .entry-content > .thumb, .summary-post .entry-content > .content {float: none; width: 100%; padding: 0;} .summary-post .entry-content > .thumb img {display: block; width: 100%; margin: 0 0 20px 0;} .pager .page-numbers, .nav-links .page-numbers {min-width: 30px; min-height: 30px; font-size: 15px; line-height: 30px; font-weight: bold;} .metrics {font-size: 18px; line-height: 22px;} .metrics > li > .content {padding-top: 0;} .blog-header h1 {font-size: 44px; line-height: 48px;} .featured-blog-posts > .primary .post-tile {font-size: 16px; line-height: 20px;} .featured-blog-posts > .primary .post-tile .content {padding: 20px 15px;} .featured-blog-posts > .primary .post-tile h2 {font-size: 20px; line-height: 30px;} .featured-blog-posts > .secondary {flex-wrap: wrap;} .featured-blog-posts > .secondary > div {width: 100%; padding: 0;} .featured-blog-posts > .secondary > div:first-child {padding: 0; margin: 0 0 30px 0;} .featured-blog-posts > .secondary > div:last-child {padding: 0;} .post-grid > div {width: 100%;} .resource-grid > div {width: 100%;} } @media only screen and (max-width: 500px) { /* #hero .bg {right: -200px;} */ #hero .bg {right: auto; width: auto; height: auto;} #hero #hero-animation {display: none;} #hero .slider {display: block; position: absolute; width: 500px; bottom: -10px;} #header > div {padding-left: 20px; padding-right: 20px;} #header nav > ul > li > a {padding: 15px 20px;} #header nav > ul > li.menu-item-has-children > a:after, #header nav > ul > li.product-menu > a:after {right: 20px;} #header nav > ul > li > ul {padding: 0 20px 30px 20px;} #header .logo {left: 20px;} #header .toggle-menu {right: 20px;} #header .nav-container {margin: 0 -20px;} #header .mega-menu {padding-left: 20px; padding-right: 20px;} #footer .upper > .left > ul {width: 100%;} #footer .lower {text-align: center;} #footer .lower ul {display: block; margin: 5px 0 0 0;} #footer .lower ul li {margin: 0 5px;} ul.social li {margin: 0 4px;} .feature-illustration-block .photo img {max-width: 140px; right: -20px; bottom: -60px;} .dial {background-size: calc(100% - 50px); padding-bottom: 85%;} .dial .mask {left: auto; width: 100%; height: auto; padding-bottom: calc(100% - 50px);} .dial ul {margin: 0 auto 90px auto;} .dial ul li .break {display: inline;} .dial ul li, .dial ul li.customer-aquisition, .dial ul li.reputation-management, .dial ul li.roadmap, .dial ul li.customer-loyalty, .dial ul li.retargeting, .dial ul li.employee-experience, .dial ul li.integrations {width: 100%;} .logo-grid > div {width: 50%;} .full-story-card > .body > div > div {width: 100%;} .stories-page-header .content {padding-bottom: 30%;} } @media only screen and (max-width: 450px) { #hero .slider {left: -30px;} #request-demo-dialog {padding: 40px 20px;} } @media only screen and (max-width: 350px) { /* #hero .bg {right: -250px;} */ } /** * Minimum width media queries */ @media only screen and (min-width: 1201px) { #header .mega-menu {display: block !important;} .sticky-header #header nav > ul > li.demo {opacity: 1; pointer-events: all;} .sticky-header #header nav > ul > li.login {opacity: 0; pointer-events: none;} }