/* =================== Transitions ===================*/ #socialBlocks li a, .colorBtn, .navButtons a.button, .tour #contentHeader a, .tour_section a, .product_blocks a, .logo_white_btn { transition: all .15s ease } .bjqs-caption a, .comparisonsBlocks a.contentBlock img, form#reseller button, .brochures.animate a, .comparisonsBlocks.animate a, .iconNav a, #wrapper.contact a.contentBlock, .floatingNav a, .floatingNav ul, .storiesHolder a > div, .newsHolder div > a, ul.imgIcons li, ul.imgIcons li a, .price_block a .contact, .cta_cards a, .plansComparisonBody .tick, .comparisonsBlocks a.contentBlock { transition: all .3s ease-in-out } .revealUp, .revealUpOnLoad, a.siteRibbon, .lrgTopHeading:not(.storyHeading), .implementation .alternateBg h2, .mapHolder a.marker, .stagger_children_up > * { transition: all .7s ease } .comparisons .columnR img, .brochure .columnR img { transition: all .8s ease-in-out } .revealUp, .revealUpOnLoad, .comparisons .columnR img, .brochure .columnR img, .stagger_children_up > * { transform: translateY(50px) } .mapHolder a.marker { transform: translateY(-50px) } #wrapper.contact a.contentBlock:hover, .imgIcons a:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 20px rgba(0,0,0,0.3) } ul.dotNav li a.selected span, .no-touch ul.dotNav li a:hover span, .comparisonsBlocks a.contentBlock:hover img { transform: scale(1.1) } .revealUp, .revealUpOnLoad, .comparisons .columnR img, .imgIcons li, .mapHolder a.marker, .plansComparisonBody .tick, .brochure .columnR img, a.siteRibbon, .stagger_children_up > * { opacity: 0 } .revealUp.animate, .revealUpOnLoad.animate, .comparisons .columnR img.animate, .lrgTopHeading.animate, .implementation .alternateBg h2.animate, ul.imgIcons.animate li, .mapHolder.animate a.marker, .revealDownOnLoad.animate, .plansComparisonBody.animate .tick, .brochure .columnR img.animate, .stagger_children_up.animate > * { opacity: 1; transform: translateY(0px) } a.siteRibbon.animate { opacity: 1 } /* =================== Font Sizes ===================*/ h1, h2, .lrgTopHeading, #wrapper h4, #contentHeader p, .fullColumn p, .subText, .comparisonsBlocks:not(.webinar_section) a.contentBlock, .demo h3, .resellers button, .customLogo, nav.footerNav div .heading, .about-stats .num, .contentHeader p, .price_block h3, table.plansComparisonHeader h3, .tour h3, .product_blocks, .cypher_products { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } body:not(.home) header.transparentNav:not(.scrolled) nav.mainNav ol > li > a, .tour_nav { -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.3px; } .tour h2 { font-size: 35px } .tour h3 { font-size: 34px } .resellers .alternateBg #contentBody h2 { font-size: 32px } h2 { font-size: 30px; } .tour h4 { font-size: 28px } body.portal h1, #parallaxHeader #contentHeader h1, #parallaxHeader #contentHeader h2 { font-size: 26px; } .resellers #contentWrap .mapHeader { font-size: 25px; } .alternateBg h2, .resources .fullColumn h1, #contentWrap .lrgTopHeading { font-size: 24px; } body.portal #contentBody form h2, .materialStyle h2, h4 { font-size: 23px; } #contentFooter h2, .sales h2 { font-size: 22px } body.portal #contentBody h2#current_month {font-size: 22px; margin-top: 2px; line-height: 26px; float: left} body.portal #contentBody h2 { font-size: 21px; } dt, h3, .brochures h3, #contentWrap .lrgTopHeading.long { font-size: 20px; } nav.mainNav > * > li > a, nav.footerNav div h2, nav.footerNav div .heading, .resellers #contentBody .contentBlock p, .portal #contentBody .rightColumn h2 { font-size: 19px; } header.transparentNav nav.mainNav > * > li > a, #facebox .frmLogin button, #facebox .smlSignupButton, form#reseller button { font-size: 18px; } .bjqs-caption h2, h5 { font-size: 17px; } #loginForm, #loginForm input, #loginForm button, #facebox .frmLogin, #facebox .frmLogin input, .resellers .mapHolder a.marker + div span, .infographics #contentBody strong { font-size: 16px; } #loginForm .loginOptions, body.loginPage .difSignIn, #contentWrap p, .edu2 #contentWrap li { font-size: 15px; } body.portal #contentBody h2:not(.class_name) {margin-top: 15px} .portal #contentBody > h2:first-of-type:not(.class_name), .portal .rightColumn h2:not(.class_name) {margin-top: 0 !important} nav.footerNav div ol li a, #socialBlocks li a, footer a.language, footer a.language, .bjqs-caption p { font-size: 14px; line-height: 1.5; } .resellers .mapHolder a.marker + div span span:last-child { font-size: 13px } /*------------------- Header Bar & Navigation -------------------*/ header { position: fixed; top: 0; max-width: 100%; width: 100%; border-width: 0 0 4px 0; z-index: 10; box-shadow: 0 1px 4px rgba(0,0,0,.12); } header .product_logo { width: 170px; position: absolute; top: 0 } body.matrix header .product_logo {width: 235px} header .product_logo, body.edu2 .mobileLogo .product_logo {height: 75px} .neo header .product_logo, .neo .mobileLogo .product_logo { background: url('/images/logo/neo-logo-grey.svg') 0 50% no-repeat; background-size: 99px auto; /* not half of actual width */ } .matrix header .product_logo, .matrix .mobileLogo .product_logo { background: url('/images/logo/matrix-logo-grey.svg') 0 50% no-repeat; background-size: 180px auto; } .indie header .product_logo, .indie .mobileLogo .product_logo { background: url('/images/logo/indie-logo-grey.svg') 0 50% no-repeat; background-size: 123px auto; } .cypher header .product_logo, .cypher .mobileLogo .product_logo { background: url('/images/logo/cypher-logo.png') 0 50% no-repeat; background-size: 150px auto; } body.edu2 .mobileLogo h1 {background-position: 18px 24px !important} body.edu2 .ir:before{content: ""; display: block; height: 100%; width: 0} body.edu2 .ir {border: 0; height: 100%; display: block; overflow: hidden} header.transparentNav nav.mainNav ol > li.signupHolder {padding-right: 0} header.transparentNav nav.mainNav ol > li.signupHolder a, header.transparentNav nav.mainNav ol > li.signupHolder a:hover {border: 0 !important} header.transparentNav nav.mainNav ol > li.signupHolder span {font-size: 16px; padding: 0 13px; color: #fff} header.transparentNav.scrolled nav.mainNav ol > li.signupHolder span {color: #fff} .mm-menu .signupMobile > a {line-height: 40px} .mm-menu .signupMobile {margin: 0 12px 12px 0; color: #fff; text-align: center} .mm-menu .mm-list > li.mm-selected.signupMobile > a:not(.mm-subopen) {background: transparent; border: 0} .mobileBar .signupMobile {margin-right: 16px; display: none} /* Simple header - regional sub-pages */ header.simple_header {border-width: 0; height: auto; position: absolute; width: 100%; box-sizing: border-box; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; padding: 20px} header.simple_header, .newSite header.simple_header {box-shadow: none !important} header.simple_header .colorBtn {margin: 0; white-space: nowrap; background-color: rgba(0,0,0,.3)} header.simple_header .colorBtn:hover {background-color: rgba(0,0,0,.5)} header.simple_header .logo {height: 30px} @media screen and (max-width: 979px) { .newSite .simple_header + * #contentHeader {margin-top: 0; height: 170px !important} header.simple_header + #contentWrap #contentHeader:not(.multiline) h1 {vertical-align: bottom; padding-bottom: 18px} .tour header.simple_header + #contentWrap #contentHeader {padding-top: 80px} } @media screen and (max-width: 767px) { .newSite .simple_header .colorBtn {padding: 6px 12px !important; font-size: 15px} } @media screen and (max-width: 550px) { header.simple_header {justify-content: center; padding-top: 15px} header.simple_header > *:first-child {margin: 0 0 10px; display: block; width: 100%; text-align: center} .newSite .simple_header + * #contentHeader {height: 190px !important} .tour header.simple_header + #contentWrap #contentHeader {padding-top: 110px} } /* Dot navigation */ ul.dotNav { position: fixed; top: 50%; right: 0; padding-right: 5px; margin-top: -126px; z-index: 100; opacity: 0 } ul.dotNav.show { -webkit-transition: opacity 200ms ease-out; -moz-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out; opacity: 1 } ul.dotNav li { display: block; padding: 0; position: relative; } ul.dotNav li a { cursor: pointer; display: block; padding: 16px; position: relative; width: 10px; height: 10px; text-decoration: none; z-index: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } ul.dotNav li a span { width: 10px; height: 10px; border-radius: 50%; position: absolute; display: block; background-color: #5e5f5f; border: 2px solid transparent; transform: scale(0.7) } ul.dotNav li a.selected span, .no-touch ul.dotNav li a:hover span { background: none !important; border-color: #5e5f5f; border-width: 2px !important; } .no-touch ul.dotNav li div { position: absolute; right: 35px; top: 12px; padding: 2px 8px; font-size: 14px; white-space: nowrap; color: #fff; background-color: rgba(94,95,95,0.8); border-radius: 15px; opacity: 0; max-width: 0; } .touch ul.dotNav li div {display: none} .no-touch ul.dotNav li a:hover + div { opacity: 1; max-width: 300px; transition: opacity 300ms 50ms ease-out } .no-touch ul.dotNav li a span, ul.dotNav { transition: all 100ms ease-out } /*------------------- Body Content -------------------*/ #contentWrap {position: relative; z-index: 5} /* min-height flex */ #wrapper.thank_you {display: flex; flex-direction: column; min-height: 100vh; padding-top: 0} #wrapper.thank_you #contentWrap {flex: 1 0 auto; width: 100%; min-height: 200px; overflow: visible} #wrapper.thank_you footer {flex-shrink: 0; margin-top: auto} /* -- homepage carousel -- */ #carouselWrap {background: #6e6e6e; overflow: hidden; position: relative; height: 300px} ul.bjqs {position: relative; list-style: none; padding: 0; margin: 0; overflow: hidden; display: none} li.bjqs-slide {position: absolute; display: none} ul.bjqs-controls {list-style: none; margin: 0; padding: 0; z-index: 10} ul.bjqs-controls.v-centered li a {opacity: 0; background-repeat: no-repeat; display: inline-block}/*('/images/icons/icons.svg')*/ ul.bjqs-controls.v-centered li a, ul.twoColumnWrap li:before, ul.twoColumnWrap dl dt:before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='146.51' height='110' viewBox='0 0 146.51 110'%3E%3Cdefs%3E%3Cimage id='a' width='11' height='33' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAhCAYAAAAPm1F2AAAACXBIWXMAAAsSAAALEgHS3X78AAAAn0lEQVQ4T+2UsQ2DMBQFHReULhANkzBDUoSMwzqkB+bJBAhlgiiF82xdoojK7ihs6fyk57Og8TfeexPQOoH9I3Y/BzEcVMKJWjSko7d48XYoWtGJs7iSHX2FFzfHwSDuYiIHeveVLZ+8iFE8xEqO9DVe3MI/9mIWm3iRM32zl29iEU/xJhf6Ihe5yAeTe5P4upPnRtZESp91WVM0Zz5/AHJxqlZ4+kG4AAAAAElFTkSuQmCC'/%3E%3C/defs%3E%3Ctitle%3Eicons%3C/title%3E%3Cimage width='43' height='65' transform='translate(0 1) scale(0.98 0.95)' opacity='0.28' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAABACAYAAABlR0UdAAAACXBIWXMAAAthAAALYQFbeSumAAAFoUlEQVRoQ92a+Y9dYxjHv+2dUmWqtRZBqV3Vvi8daam1SUmIpUIsEVtELL9gUqJqq0pEkUhLqSXWEP2BiqXSIpakljKWMWovCf6A8f3meW7vnbn3znPOveecuUzyyUzuvDP3c97zvM/7Ps+56O/vx3DR3d09oppofDXhgKzh1wgyknSQUWRDZwN/raQx4f+JBmSJS5dccgwZS8aTzcg40kk28gsaOeT/it4sK1xaMzqabEomkIlkN7IH2ZVsT7b0C9BdKLWDeMllJL0t2Z0cTI4hXeRIsj/ZhWxNNoHdmbozH75hFri0Znqcz+q+ZBo5k1xELiHnk1nkaNgdKMsrbGpiPnzTVhkkvSM5gJzssjeTe8gCcju5lpzl8gqdzf1va2Y9fONWqCN9IDmVXEHuJEvIy+QV8gy53+Vn+QVuB5v1jsLEG0jPJFeS+eRZ8jb5iHzoPz9N5sLC5iiyE2xNKNYHhEso0AxDSF9F7iXPk5VkDfmWfEneJy+Qu8iFsEW7s/+PmkUaSqQlkF7gcqvIV+QH0kc+IyvIUjKHnEMOIzvAcn3NAg1F0pBQ+j3SQ34ka/0CNPsv+RjF/0lkMiyzaKOqyeehTFKalO7x1xQ6D8AW5mmw/K7ZLsd3PlkFdvbQ5qLbqkwwhcyApTyluafIO+QLWHhIXLGthfkqWQhLjbPJVNhuqh1Us63dNvs8noH0g+R6ch45Fgk2n5bFM5K+gZzh0nsmkW5JPGPpI9JINy2eg/SkNNJNieckvUUa6dTiOUqPSSOdSjxn6bopr2XxdpNOJA4ruXQbFYNaQMqzXbC8q01jMVlOVpPvyU/+fbW/rt93+/guJMzTEf9J6SHF21m6ofgg6a0C6b4q6U+LkK4rjkobQQtHBx1V4zr4zG4g/bN/l/Qb5NG8pWvEUeky6XiqJo1Wv9oGZ5MbySKXlqSyx6+wDKJKRqXXElghkKt0I/EOfyOlPRWsKlx1enuYvObSOkuvI7+TXvIBrIacByu7psHOHhPykK4nrtnWwV3FgGa7C9b3UB34IiwvKyz+JH+R32D1ou6CLuwaWBW/H6zp04khmjqtMFi8XMWon6HbrE1GVbmqE822NhiFx9/kHxf/nCwj95FLYbOtdaENRn3ApjaYiP+NeHWoqDWgFsEFsNh9DhbLveQPWKgoxlU3vkkega0FrQnVm2q1qWbUUaFh87JZBouXF+fGZBtYj+8UcjWsy6RzxyewOJf0Ov/5Y1iVPp9cRk6EnWe0wHW+yTzO64mXD1Tlav0Qcjq5DnZYWuby2nAUNsrjX8N6JWqj3QE7fCnM9oEt0szla1+ozLriU7lcIXM47GSnUHjI5TXLveQXWC5XdnkX1kabl7d8/RcH7p5aqJMCec36WpdfUYR841+kk/+uSn5NEfJD/7KN5eMBbSofDmhX+XDAIPk8C4tU8uGAAuVTzXw4oED5VGETDihQPtXxIJQsUD7V2SYULFB+Rhr5UC4iI3mNS5UqQ7EkZCC/CNbKu5gcR/ZGUK+GUklpUf518gS5FfZwdiqKfCSO9M1R7a7fwCor7bwLYQX3TFgRo2JGRU3+j8QTyD8J68GoVtWM9/mFrIQdDW6DNZ/U1Z2ISqzn94A2hfxS8hYsTHpcvPy8c3geiSeQ1wKcSx6HdQ5WOcv9tVswXDMeyB8PazLNgTWRVKeqC/YYuRv2JFoFerExnkB+MpkOm1U9Alcm0R24iVwOeyR+KOwjH+P9b/PNKgnlNYvqK+rzKMoeaqieCzvbnwDrKoSPWsI3zQpUmk3qJ6rnroU3xUX1EY+DyF6wlojyt0Kk7uZTqHiV/CifSYWBNiqFj7pe2ubVj1f3q/zZw+wfiTdLlfxon9WxLtvpF6SQUnjkdzpsFmD9Jz47/CLKlPzCwiZp+CZ54hewnmj8gL+NBrQr4YB25V/247oYv3d7LwAAAABJRU5ErkJggg==' style='isolation:isolate'/%3E%3Cpolygon points='15 31 35.6 10.4 31.5 6.3 6.3 31 31.3 55.8 35.4 51.7 15 31' fill='%23fff'/%3E%3Cimage width='45' height='64' transform='translate(35.84) scale(0.96 0.97)' opacity='0.28' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAABBCAYAAACuG5a4AAAACXBIWXMAAAuIAAALiAHljilJAAAGYklEQVRoQ+2aeaxdUxSH12u1VR1UTa3SNq2hNU8lhFAkSsxBjJWg5lnMQokxQUXMIZ4YiyBCQygxTxENrWoNoU8pooYi/nt+31v7vPuGc+8+955zz0P88SUv7+737nf23Xuttde+1t7ebv9GogM6B5q1pBH7u2YRHdAxyCX7iZXEgAA/9+8r+fiAivAgsYoYJoaLoWKwGNgXD1D7RZdGbIgYKUaLsWK8WFesFR5i5fBwpcnHpAcE6TXEOLGx2EZMEVuIDcLDrBrkS5v5LNJrivXF9mKaOEQcJg4QU8XmYj2xWpnyadIt4c1Zv6uLiWJHcbA4TVwqZooLxHFib7G1+SdSmnyaeLKuh4eZ3FYcKM4WN4n7xSPiXnGtOFXsF8aVJp8m3j+8MbO9odhNzBDXi9niZfGmmCseCw9zhti/TPlq4iwTIsYmYi9xprhNzBEfiIVivnhLPClmlS1fS5xNOVnsab62bxHPiQ/FF+IrsUi8I54SN5cpnybOGifZjBATxE7iaHGleEi8Lj4VS0SbWNwX8mniRBWSCaFwlNjUPAyeLG4QT4i3g3BbnfKFJalq4skG5Q3Hm8dwwuF54nbzJcNaZ8l8Yz77n4jXzCMO0eYE8wcmUZFlC01S6b+szDq1CVkzieWHivPFHRnlTwzyW5qH1hFWmfl+Mbm6xVPkk+xZr/x1Qb5rkhoZ/ie5gv3U0OzXfrEYeeL/KeZJajvzT4//RYIjCDS0dOID8skTgUhSN4qzzPcJUWqS+bpPlk7d8tEBOeUJmyQpos2t4kJxlHk23sq8RG4oXEYH5JBfGh6AUPm+eda9x7xAO1bsY14iNxTrowNyyH8Z5JeGn+eJl8QD4ipxuuUozqKyBch/J5aZL50F4lXzDJyrvomKVpFPDhqcO8mu1DQcKqaLy0Wr+ex+FIS/DywJv+O1romKeogDyRjzaNMRKgsXr1P+Y/Oy4IdAW/gdEefRRuWjggXL/xjgZyrLNxqVj8rFyCjPoWN+D3nW/uJG5aNiWcgoz8mJzUmU+UksN9+01eSpSukgDEuTj0plpYb8MeIK8zBIRFkUhH8Wv3SRZ82zYa82P4Tvbp5hiVxEsG6RJipUD13khwV5+jB7iOPNC67HxXvmpydmfYX4zTzi8EDUNzwgn9IR5mF2vHlJ3G3WozL1Yt27BKxTUjuJ5hxxl/l6XxRkfxd/BnnWPPvgefPzLTGe8y4Pz6x3xPdmivdMUHzczPpJ5qcjUv+CIIr4X+IP80/gc/Ml02pe19B04iAyKvw//m/L/+I9xNlEyWGb6o90fpB5OUCR9Yr4zDwZJUvlV/NoQ1alXKCjQKOJ6MIm5xTWvKVivdc3s8Xph4MEjaOnzWsYUj/hcEWQZvb5FFj/dMguMu9RcvAYaynxPCqTlRRpkggzRlwmonCgoDtAyctsEwoJid+aHzqI863iMvOafWfzAo6OGn2e4sNhRJqkQnKhbUe8Jm4vD3SVpidJGCRp7So2Mu+m0SYhxBabgDJKkxkJgSwJNiEpf2kNaTb02ubJrJd0bvEc0l/nkc4lnlN6Xh7phsULkJ6TR7oh8YKk78wjXbe4ZStf02rvtvC7uWEMYzPX3rnEC5aenkc6s3gTpKfmkc4k3iTpyXmko+JNlB6VR7qmeA9pdvykAqWH5pGuKm69a2rqhl3M74Iogu7LKZ0p5DUizmxTU9MSm2B+9jtcXGJedlbrlZQinSpu3S+vaA9wDUJ/71zzxPGCVVprfSJdS5w3YPNQxO8gjjS/LiQrUlNzxFoWpClN6YMn7QWyJ8llmnnISy6uBhUlXUucjcPRa6J5Sp5hfoJ51jxtk75J5/S/F5Yt3Yj4M+ZHL86MnGRYHjR5Hi5TupZ42lKZad6sYWO+a34h+6J4UFxTpvR/UpyDKTGcxNP1SpxDLzGcVtpscbd5X5AWW1I0NV06VTzIJzU3AtwIc7nKZROzerF5Y5IoQ4gkKdHw2cy8/mi6dC3xJJbThCEJjTPvASLIXSVLh4S0r/m9Jf29daxy6dpU6ariPeQHB3mWAKmf2edLCVPMZ5nMypJK7WM3i9ovdp95xGjOjA4PMSYIEzY77+Zjb1gU8QGVzTrQKt/0ZB2zLIaEh+pI5ZbhfrIoogM6Blnnd2v7W+W7tQOs8v3a0ma60yk2oNcfWOWbzGXOcC+P2IB/Kn8DKeCOBn5LLx4AAAAASUVORK5CYII=' style='isolation:isolate'/%3E%3Cpolygon points='63.4 31 42.8 10.4 46.9 6.3 72.1 31 47.1 55.8 43 51.7 63.4 31' fill='%23fff'/%3E%3Cpolygon points='92.7 11.8 84.6 3.6 86.2 2 96.1 11.8 86.2 21.6 84.6 20 92.7 11.8' fill='%235e5f5f'/%3E%3Cpolygon points='88 44.8 96.1 36.6 94.5 35 84.6 44.8 94.5 54.6 96.1 53 88 44.8' fill='%235e5f5f'/%3E%3Cpolygon points='111.5 11.8 103.3 3.6 105 2 114.9 11.8 105 21.6 103.4 20 111.5 11.8' fill='%23fff'/%3E%3Cpolygon points='146.51 3.44 143.5 0.43 139.4 4.53 135.3 0.43 132.29 3.44 136.39 7.54 132.29 11.63 135.3 14.65 139.4 10.55 143.5 14.65 146.51 11.63 142.41 7.54 146.51 3.44' fill='%23fff'/%3E%3Cuse transform='translate(41.5 77)' opacity='0.2' xlink:href='%23a'/%3E%3Crect x='45.53' y='81.06' width='2.9' height='25.13' fill='%23fff'/%3E%3Crect x='45.53' y='81.06' width='2.9' height='25.13' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cuse transform='translate(51.5 77)' opacity='0.2' xlink:href='%23a'/%3E%3Crect x='55.4' y='81.06' width='2.9' height='25.13' fill='%23fff'/%3E%3Crect x='55.4' y='81.06' width='2.9' height='25.13' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cimage width='23' height='32' transform='translate(108.5 78)' opacity='0.2' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAAACXBIWXMAAAsSAAALEgHS3X78AAABj0lEQVRIS7WWzysFURSAz3uKDa/82FhSioUtC3ZiYcOakq2Ntf+Bkq2NFEvZy/9AiJWyo6yQIo/xnebeml535t4782bq693m1XfOnXPmzJUkSUThahiadm3/K4sVq7AXWjBofvv0vk9QKDdZqngUZmAR5mAM+qGn7C6sXDOdhR04hF1Yh2kYKbsLvfSRDMEyHMMtXMEJbMMCjNtd+IQuuWa3AmfwDG/wCJdwAGswGRsgK1+Fc3iFH/gy6xs4gg2YigmQJ/+FP2jDO9xL+siiAhTJE4OuPxwBBsTTSSFyV4BNCeikUHk2wAOcSkAnxcizAYI6KVZuA7g6yQZoVpErnZ2kAXQHOjK0Bo0qcosNcA17ks6kVrfkuoNveJI0+yVJp2qzG/LaMs/2vmbdtWfuemsrd0vUvImR5/V37iALlUe9mTHy6JkSKi81DX3ytuQXzjvHXXL7DX2BT4konE+e/frfmWwvJLBwRXLXuWUftiSwcD5554lrHiZgWAIKlys3EfLOikGFK5SbAPWccuviH33fAEFLwKVCAAAAAElFTkSuQmCC'/%3E%3Cpolygon points='113.05 82.36 113.05 104.88 126.28 93.62 113.05 82.36' fill='%23fff'/%3E%3Cpolygon points='113.05 82.36 113.05 104.88 126.28 93.62 113.05 82.36' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Cimage width='23' height='33' transform='translate(3.5 77)' opacity='0.2' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAhCAYAAAAyCTAQAAAACXBIWXMAAAsSAAALEgHS3X78AAABXElEQVRIS8WWv07DMBCHL60QS1uJjTFsjfoADN0r8QhlgIlHYWNlrKI8AE/C0gnWSuwIlQHxR4Sf5QsyreNcnIuI9ElNIn0/+3qxTWVZUiy4Epe9902CgHgADsGYMb8HneW4hmAEUnDKpPxsGC13xFOwBNfMkp+Nqhk0ymrEGbgAObhnVhxwQrZESaMwIC7AA3gBzxxgZmBKNBbLA+It+OCA9nKBeMv3pkTysrQQF/xe9odGiDOStKKG2CvXEu/JNcV/5GTXiurL6yz+lZNd1Uz7mDY6J9tWlfgTvIJHFl9KxLvyCZiDG7Bm8Rd4B0/gDlyBGdmPJCh25aYkR2DBo96w9Bu88ahvwRk4BgfkWb//ZeT91dwpjX63OAH99HkfAf7pKAV45VoBtfLIANl6HhFg2le+E7UIiNtDBQHddv9AQE4a5xZPgO6JyxOQkuZZ0Qno55TrBCQuu+9/ACHDqo8YpYn1AAAAAElFTkSuQmCC'/%3E%3Cpolygon points='22.19 104.31 11.49 93.62 22.19 82.92 20.43 81.16 7.97 93.62 20.43 106.07 22.19 104.31' fill='%23fff'/%3E%3Cpolygon points='22.19 104.31 11.49 93.62 22.19 82.92 20.43 81.16 7.97 93.62 20.43 106.07 22.19 104.31' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cimage width='23' height='33' transform='translate(76.5 77)' opacity='0.2' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAhCAYAAAAyCTAQAAAACXBIWXMAAAsSAAALEgHS3X78AAABgklEQVRIS8WWvU7DMBRGb8PAAAWVJ6BbuyMxwNyFFQYYEM/BCl2Ad6i68CZICBamstEBMYNAQgiBwnfla8VJbCz8IyodxU2b89k3jmMqy5JM8OmYNH//C01xARZBV+B24ZN45SJeAutgU+D2MljwiZxyKQH3sg92wQk4BftgEBpgylfANjgHV+AGTMAhGIYEaDmXZA3sgEvwCJ7BDExDA1zyJ/ABXmMCbGW5AHci/owJMOX6hh6QqvUsNqBqqNLwBQMRTGMD6l/wR7lgmCKgfSJhgH04iQKs8lQBTvkvAffgzRGgl4rCK7cEHJF6yB5IPWRfEsQBPH15LeLpzNO645UbAatgAxyDa+n1twS8gFswJrWadv9fTrnKQrluqEMcPxVTiK3yVOKWPKW4JqdcSy7lfFlQ9ZrbogyvOS5JD4yk13PwHiN29fyM1J5lLiOYhIibcl3zPQlgKZeI70HQrqtq1PeKPIKRHPsh4prcCOARcIl6cgze6bZPVHvzQrd9Ehc/Oi+ogdFBGjsAAAAASUVORK5CYII='/%3E%3Cpolygon points='81.1 104.31 91.8 93.62 81.1 82.92 82.86 81.16 95.32 93.62 82.86 106.07 81.1 104.31' fill='%23fff'/%3E%3Cpolygon points='81.1 104.31 91.8 93.62 81.1 82.92 82.86 81.16 95.32 93.62 82.86 106.07 81.1 104.31' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E")}/*inline SVG for offline mode*/ #carouselWrap:hover ul.bjqs-controls.v-centered li a, .accessible_carousel ul.bjqs-controls.hover li a {opacity: 1} ol.bjqs-markers {list-style: none; padding: 0; margin: 0; width:100%} ol.bjqs-markers.h-centered {text-align: center} ol.bjqs-markers li {display: inline} ol.bjqs-markers li a {display: inline-block} body:not(.accessible_carousel) ul.bjqs-controls.v-centered li a {width: 42px; height: 62px; position: absolute; z-index: 3} body:not(.accessible_carousel) ul.bjqs-controls.v-centered li.bjqs-next a {right: 10px; background-position: -37px top} body:not(.accessible_carousel) ul.bjqs-controls.v-centered li.bjqs-prev a {left: 8px; background-position: left top} .accessible_carousel ul.bjqs-controls {padding: 8px 6px 4px; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); text-align: center; border-radius: 4px} .accessible_carousel ul.bjqs-controls.v-centered li {width: 37px; height: 29px; display: inline-block} .accessible_carousel ul.bjqs-controls.v-centered li a {width: 19px; height: 29px; display: inline-block} .accessible_carousel ul.bjqs-controls.v-centered li.bjqs-prev a {background-position: -6px -79px} .accessible_carousel ul.bjqs-controls.v-centered li.bjqs-next a {background-position: -79px -79px} .accessible_carousel ul.bjqs-controls.v-centered li.bjqs-pause a {background-position: -39px -79px; width: 26px} .accessible_carousel ul.bjqs-controls.v-centered li.bjqs-pause.play a {background-position: -106px -79px} .accessible_carousel #carouselWrap:hover ul.bjqs-controls.v-centered li a:hover {opacity: .7} .accessible_carousel #carouselWrap:hover ul.bjqs-controls.v-centered, .accessible_carousel ul.bjqs-controls.hover {background: rgba(0,0,0,.4)} .bjqs-caption {transform: translate(0, 0); z-index: 3; padding: 10px 20px 15px} .bjqs-caption br {display: none} .bjqs-caption a {background: rgba(255, 255, 255, .8); text-align: center; border-radius: 3px} ul.bjqs li, ul.bjqs li img {width: 100%} body:not(.updated-carousel) ul.bjqs li img {box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12)} .updated-carousel ul.bjqs li {background-repeat: no-repeat; background-size: cover; background-position: top center} ul.bjqs li .caption-wrapper {max-width: 1500px; height: 100%; margin: auto; position: relative} ul.bjqs li img[data-heading] {display: none} /* -- content headers -- */ #contentHeader, .contentHeader {width: 100%; display: inline-block} #contentHeader {padding: 20px 18px; text-align: center; box-sizing: border-box} /* -- parallax headers -- */ #parallaxHeader {overflow: hidden; position: relative} #parallaxHeader #contentHeader {height: 100px; display: table; position: relative; text-align: center} .narrow_header #parallaxHeader #contentHeader:before, #parallaxHeader #contentHeader.multiline:before {display: none} #parallaxHeader h1 {position: relative} #parallaxHeader h2, #parallaxHeader #contentHeader:not(.multiline) h1, #contentHeader.multiline > div {display: table-cell; vertical-align: middle; position: relative} #parallaxHeader p, .mid_page_parallax_header p {color: #fff} #parallaxHeader a, .mid_page_parallax_header a {display: inline-block} #contentHeader.multiline div > * {max-width: 730px; margin-left: auto; margin-right: auto} #contentHeader.multiline p:last-child {margin-bottom: 0} .about #parallaxHeader {border-bottom: 1px solid #e8e8e8} .newSite #contentHeader { text-align: left; background-repeat: no-repeat; background-position: center 0; background-size: cover; display: table; } .narrow_header #parallaxHeader #contentHeader {height: 96px; min-height: 96px; margin-bottom: 40px; padding-top: 16px} .newSite #contentWrap {min-height: auto} .floatingNav {margin: -68px auto 0; position: absolute; right: 45px; margin-right: 2px; z-index: 1001} .resources .floatingNav {margin-top: -122px} body:not(.indie) .about .floatingNav {margin-top: -53px} .news .floatingNav, .pricing .floatingNav, .indie .about .floatingNav {margin-top: -39px} .stories .floatingNav {margin-top: -51px; text-align: right} .floatingNav.fixed {position: fixed} .floatingNav > a {width: 48px; height: 48px; border-radius: 50%; display: inline-block; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); position: absolute; right: -30px; top: 50%; margin-top: -24px; z-index: 1} .floatingNav > a i:after {left: -40px} .floatingNav > a span, .floatingNav > a span:before, .floatingNav > a span:after {background: #fff} .floatingNav > a span {display: block; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -9px} .floatingNav > a span:before, .floatingNav > a span:after {content: " "; margin-top: -7px; position: absolute; left: 0; right: 0} .floatingNav > a span:after {margin-top: 7px} .floatingNav > a span, .floatingNav > a span:before, .floatingNav > a span:after {width: 18px; height: 2px; -webkit-transition: all 0.4s; transition: all 0.4s; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0)} .floatingNav.open > a span {background-color: transparent !important} .floatingNav.open > a span:before {margin-top: 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg)} .floatingNav.open > a span:after {margin-top: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg)} .floatingNav ul {width: 0; padding: 10px 0; box-shadow: 0 0 20px rgba(0,0,0,0.2); background: #fff; overflow: hidden; border-radius: 4px} .floatingNav.open ul {width: 170px} .about .floatingNav.open ul {width: 190px} .pricing .floatingNav.open ul {width: 190px} .floatingNav ul li a {color: #222; font-size: 16px; display: block; border-width: 0 1px 0 0; padding: 4px 0 4px 25px; margin-right: 35px; white-space: nowrap; opacity: .5} .floatingNav ul li a:hover, .floatingNav ul li a.selected, .floatingNav[selected-item="nav_item1"] li.nav_item1 a, .floatingNav[selected-item="nav_item2"] li.nav_item2 a, .floatingNav[selected-item="nav_item3"] li.nav_item3 a, .floatingNav[selected-item="nav_item4"] li.nav_item4 a, .floatingNav[selected-item="nav_item5"] li.nav_item5 a, .floatingNav[selected-item="nav_item6"] li.nav_item6 a, .floatingNav[selected-item="nav_item7"] li.nav_item7 a, .floatingNav[selected-item="nav_item8"] li.nav_item8 a, .floatingNav[selected-item="nav_item9"] li.nav_item9 a, .floatingNav[selected-item="nav_item10"] li.nav_item10 a, .floatingNav[selected-item="nav_item11"] li.nav_item11 a, .floatingNav[selected-item="nav_item12"] li.nav_item12 a {opacity: 1} /* Tour */ .tour_overview #contentWrap .lrgTopHeading {margin-top: 100px; padding: 0 15px} .tour_section {overflow: hidden; padding: 90px 0} .tour_section * {box-sizing: border-box} .container {margin: auto; padding: 0 15px; max-width: 1230px} .container_center {max-width: 100%; text-align: center} .container_center .feature_info {width: 100%; margin: 0; padding: 0; position: relative; z-index: 1; max-width: 840px; margin: auto} .container_center .feature_visual {margin-top: 30px} .container_center .feature_visual img {vertical-align: bottom} .tour_accessibililty .container_center .feature_visual {margin-top: -60px} .tour #parallaxHeader #contentHeader {background-size: auto !important} .tour .contentHeader {background-image: url('/images/responsive/tour/neo/shapes.svg')} .tour #contentHeader, .tour .contentHeader {background-repeat: repeat-x} .tour .colorBtn.large {font-size: 22px; padding: 12px 25px !important; margin-top: 20px} .tour_nav {padding: 15px 0 0 0} .tour_nav a {color: #fff; font-size: 17px; margin: 5px; padding: 5px 13px; box-shadow: 0 6px 24px 0 rgba(40, 43, 49, .16); border-radius: 3px} .tour_nav a:hover {box-shadow: 0 0 2px 0 rgba(40, 43, 49, .16)} .tour_nav a:hover i:after {left: -40px} /* Tour nav */ .tour .floatingNav {margin-top: -40px} .tour .floatingNav > a {top: 40px} .tour .floatingNav.open ul {width: 190px} .tour .floatingNav.open ul.tour_nav_wider {width: 222px} .tour .floatingNav ul li a {font-size: 15px; padding: 3px 0 3px 10px; margin-right: 15px; opacity: .6; display: flex} .tour .floatingNav ul li a span {border-radius: 50px; background-color: #e6e6e6; font: 11px/16px Arial; width: 16px; height: 16px; display: inline-block; box-sizing: border-box; text-align: center; vertical-align: middle; margin: 2px 8px 0 0; flex-shrink: 0} .tour .floatingNav ul li a:hover, .tour .floatingNav ul li a.selected, .tour .floatingNav[selected-item="nav_item1"] li.nav_item1 a, .tour .floatingNav[selected-item="nav_item2"] li.nav_item2 a, .tour .floatingNav[selected-item="nav_item3"] li.nav_item3 a, .tour .floatingNav[selected-item="nav_item4"] li.nav_item4 a, .tour .floatingNav[selected-item="nav_item5"] li.nav_item5 a, .tour .floatingNav[selected-item="nav_item6"] li.nav_item6 a, .tour .floatingNav[selected-item="nav_item7"] li.nav_item7 a, .tour .floatingNav[selected-item="nav_item8"] li.nav_item8 a, .tour .floatingNav[selected-item="nav_item9"] li.nav_item9 a, .tour .floatingNav[selected-item="nav_item10"] li.nav_item10 a, .tour .floatingNav[selected-item="nav_item11"] li.nav_item11 a, .tour .floatingNav[selected-item="nav_item12"] li.nav_item12 a {opacity: 1} .tour_progress li a:hover span, .tour_progress[selected-item="nav_item1"] li.nav_item1 a span, .tour_progress[selected-item="nav_item2"] li.nav_item2 a span, .tour_progress[selected-item="nav_item3"] li.nav_item3 a span, .tour_progress[selected-item="nav_item4"] li.nav_item4 a span, .tour_progress[selected-item="nav_item5"] li.nav_item5 a span, .tour_progress[selected-item="nav_item6"] li.nav_item6 a span, .tour_progress[selected-item="nav_item7"] li.nav_item7 a span, .tour_progress[selected-item="nav_item8"] li.nav_item8 a span, .tour_progress[selected-item="nav_item9"] li.nav_item9 a span, .tour_progress[selected-item="nav_item10"] li.nav_item10 a span, .tour_progress[selected-item="nav_item11"] li.nav_item11 a span, .tour_progress[selected-item="nav_item12"] li.nav_item12 a span {color: #fff; border-color: #fff; transform: scale(0.8)} .tour_progress {margin: 10px 0 0; display: inline-block; padding: 9px 17px; box-shadow: 0 12px 24px 0 rgba(40, 43, 49, .16); border-radius: 3px; position: relative} .tour_progress li:first-child {display: none} .tour_progress li {display: inline-block; padding: 1px 5px 2px; position: relative; margin-left: -4px; vertical-align: top} .tour_progress li:before {height: 2px; background-color: #fff; content: ''; position: absolute; top: 13px; width: 100%; left: 0} .tour_progress li:nth-child(2):before {width: 50%; right: 0; left: auto} .tour_progress li:last-child:before {width: 50%} .tour_progress li a {display: block; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)} .tour_progress li a span {background-color: #fff; width: 18px; height: 18px; color: #222; transform: scale(0.8); display: inline-block; font-family: Arial; padding: 2px; border-radius: 50%; border: 2px solid transparent; transition: all 100ms ease-out} .tour_progress li div {opacity: 1; padding: 2px 0 0 0; font-size: 12px; max-width: 60px; color: #fff} .floatingNav + .mid_page_parallax_header .contentHeader {background: transparent !important} .floatingNav + .mid_page_parallax_header .flexHolder {padding-top: 70px; padding-bottom: 20px} .floatingNav + .mid_page_parallax_header .contentHeader p {color: #686868; -webkit-font-smoothing: subpixel-antialiased;} .mid_page_parallax_header .flexHolder {display: flex; max-width: 1000px; margin: -10px auto; align-items: center; text-align: left; padding: 55px 20px; text-align: center;} .mid_page_parallax_header .flexHolder > div:only-child {margin: auto} .mid_page_parallax_header .flexHolder > div:first-child:not(:only-child) {width: 32%; margin-top: -10px;} .mid_page_parallax_header .flexHolder > div:last-child:not(:only-child) {flex: 1; margin-left: 130px; box-shadow: 15px 10px 40px rgba(0,0,0,.2); z-index: 10; display: none} .mid_page_parallax_header .flexHolder > div h2 {line-height: 1.4; font-size: 37px} .mid_page_parallax_header .flexHolder > div p {margin: 5px 0 0; font-size: 21px} .mid_page_parallax_header .large_video {position: absolute; left: 50%; transform: translate(-50%,0); margin-top: -136px; box-shadow: 0 10px 100px rgba(0,0,0,0.4); border-radius: 6px; background: #fff; overflow: hidden; max-width: 100%; display: none; z-index: 100} .mid_page_parallax_header .large_video video {display: block} .mid_page_parallax_header.wider .flexHolder {max-width: 1100px} .side_feature {position: relative; display: flex; justify-content: center; align-items: center} .side_feature.flipped {flex-direction: row-reverse} .feature_info {width: 33%; margin: 0 4%; padding: 0 15px} .feature_info.feature_lrg {margin: 0} .feature_info.align_higher {margin-top: -120px} .feature_visual {position: relative; top: 0; left: 0; padding: 0 15px; flex: 1 1 0; text-align: center; min-width: 0; /* FF flex basis fix */} .feature_visual.feature_lrg {padding-left: 100px; width: 66%} .flipped .feature_visual.feature_lrg {padding: 0 100px 0 0} .feature_visual img[src*='svg'] {min-height: 100%} /* IE11 fix */ .tour_section h2, .tour_section h3 {margin-top: 10px; margin-bottom: 20px; line-height: 1.2; letter-spacing: 0.5px} .tour .tour_section h2, .tour .tour_section h3 {color: #222} #contentWrap .tour_section p {font-size: 18px; margin: 16px auto 0; line-height: 1.7; color: #686868} .tour_colour_bg_1 {background-color: #c8dee2} .tour_section .tour_white_bg_and_shadow {box-shadow: 0 0 40px rgba(0,0,0,.16); border-radius: 14px} .tour_section .tour_section_bg {width: 100%; position: absolute; z-index: -1} .tour_section.reduce_cost .tour_section_bg {background: url('/images/responsive/tour/neo/overview-reduce-cost.svg') 50% 0 no-repeat; margin-top: -200px; height: 1591px} .tour_section.reduce_cost .feature_visual {margin-top: 30px} .indie .tour_section.reduce_cost .bubble:not(:nth-child(3)) {font-size: 15px} .tour_section .bubble {width: 110px; height: 110px; padding: 10px; display: table; border-radius: 50%; text-align: center; font-size: 13px; float: right; margin: 80px 40px 0; background: #048497 linear-gradient(135deg, #56af53 0%,#53a48f 100%); border: 4px solid #d9ecef; box-sizing: border-box} .tour_section .bubble:nth-child(2), .tour_section.uptime_and_performance .bubble:last-child {margin-top: 0; padding: 12px 10px 10px; background: linear-gradient(135deg, #da702f 0%,#c34c80 100%); width: 107px; height: 107px} .matrix .tour_section .bubble:nth-child(2), .matrix .tour_section.uptime_and_performance .bubble:last-child {background: linear-gradient(135deg, #ffd26b 0%,#eb8e4e 80%)} .tour_section .bubble:last-child, .tour_section.uptime_and_performance .bubble:nth-child(2) {margin-top: 45px; background: linear-gradient(135deg, #0d8198 0%,#4a6da7 100%); width: 85px; height: 85px} .tour_section .bubble > span {vertical-align: middle; display: table-cell; color: #fff} .tour_section .bubble {padding: 6px 5px 5px} .tour_section .bubble > span span {font-size: 25px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} .tour_types_of_games {padding: 0; margin-top: -170px; overflow: visible; background: #7caf53 url(/images/responsive/tour/neo/gamification-game-types.jpg) 50% / auto 100% no-repeat} .matrix .tour_types_of_games {background-color: #84aaad; background-image: url(/images/responsive/tour/matrix/gamification-game-types.jpg)} .indie .tour_types_of_games {background-color: #b2b2b2; background-image: url(/images/responsive/tour/indie/gamification-game-types.jpg); background-position: right 50%} .tour_types_of_games .px15 {font-size: 15px !important} .tour_types_of_games .feature_info.feature_lrg {background: #fff; padding: 13px 23px; box-shadow: 0 0 10px rgba(0,0,0,.4); margin: 350px 0 -20px; position: relative; z-index: 1; width: 460px} .tour_mastery_coverage .feature_visual {margin-top: 60px} .tour_standards .feature_info {max-width: 100%} .tour_mailchimp .feature_info {max-width: 870px} .feature_info .rules_button {font-size: 20px; background: linear-gradient(45deg, #737373, #828282); color: #fff; padding: 18px 23px; display: inline-block; margin-top: 30px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} .feature_info .rules_button i {margin-top: -3px} .tour_section.uptime_and_performance {padding-bottom: 140px} .tour_section.uptime_and_performance .tour_section_bg {background: url('/images/responsive/tour/neo/uptime-and-performance.svg') 50% 0 no-repeat; margin-top: -270px; height: 905px} .tour_section.uptime_and_performance .bubble_holder {width: 542px; max-width: 100%; margin: auto; overflow: hidden} .tour_section.uptime_and_performance .bubble {margin-top: 20px; margin-bottom: 0; border-color: #fff} .tour_section.uptime_and_performance .bubble:nth-child(2) {margin-top: 110px} .tour_section.uptime_and_performance .bubble:last-child {margin-top: 70px; padding-top: 0} .tour_section.support_forum .bubble_holder {width: 470px; margin: auto} .tour_section.support_forum .bubble {font-size: 16px} .tour_section.support_forum .bubble:first-child {margin: 0 10px; width: 220px; height: 220px} .tour_section.support_forum .bubble:last-child {margin: 160px 10px 0; padding-top: 7px; width: 130px; height: 130px} .tour_section.support_forum .bubble > span span {font-size: 35px} .tour_section.built_in_reports .tour_section_bg {background: url('/images/responsive/tour/neo/reporting-tools-built-in-reports-graph.svg') 50% 0 no-repeat; margin-top: 210px; height: 1138px} .tour_section .built_in_reports_pic1 {z-index:-2; position: relative; margin: 80px 0 0 0; max-width: 500px !important;} .tour_section .built_in_reports_pic2 {z-index:2; position: relative; margin: -180px 0 0 0; max-width: 380px !important} .tour_section .digital_media_bg {background: url('/images/responsive/tour/neo/e-commerce-digital-media-background.svg') 50% 0 no-repeat; margin-top: 190px; width: 100%; height: 954px; position: absolute; z-index: -1} .tour_section.tour_gradebook {padding: 70px 0 550px; background: #bdc7cc url('/images/responsive/tour/neo/assessment-powerful-gradebook.jpg') 50% 0 / auto 100% no-repeat} .matrix .tour_section.tour_gradebook {background-color: #a3bcc0} .tour_section.tour_gradebook p {max-width: 600px} .tour_section.tour_automation {height: 810px; padding: 0; background: url('/images/responsive/tour/neo/assessment-notification.svg') 50% bottom / auto 720px no-repeat} .tour_section.tour_automation .feature_info {width: 450px; top: 200px} .tour_section.tour_automation .phones_holder {width: 100%; max-width: 1460px; margin: -80px auto 0} .tour_section.tour_app_center {overflow: visible} .tour_section.tour_app_center img {box-shadow: 0 0 40px rgba(0,0,0,.16); border-radius: 4px} .tour_section.easy_payments {padding-top: 60px} /* Tour activity block image */ .tour_activity_display {display: flex; align-items: center; justify-content: center} .tour_activity_display svg {position: absolute; width: 520px; max-width: 100%; height: auto; box-shadow: 0 0 15px rgba(0,0,0,0.1); border-radius: 10px; margin-bottom: 20px} .tour_activity_display svg [data-name='activity'] {animation: tour_activity_circle 1.2s infinite; transform-origin: center; transform-box: fill-box} @keyframes tour_activity_circle { 0% {transform: scale(0.4); opacity: 1} 80% {transform: scale(.95); opacity: .2} 100% {transform: scale(1); opacity: 0} } .tour_activity_display svg [data-name='feed'] {animation: tour_activity_slide_down 15s infinite; animation-delay: 1s} @keyframes tour_activity_slide_down { 0% {transform: translateY(0)}/*23 repeat*/ 23% {transform: translateY(0)}/*10 repeat*/ 33% {transform: translateY(207px)} 56% {transform: translateY(207px)} 66% {transform: translateY(414px)} 89% {transform: translateY(414px)} 100% {transform: translateY(624px)} } .tour_two_columns, .tour_three_column, .tour_blocks {max-width: 1300px; margin: auto} .tour_blocks {display: flex; flex-flow: row wrap} .tour_two_columns > *, .tour_three_column > * {width: 39%; display: inline-block; margin: 0 5%; vertical-align: top} .tour_three_column > * {width: 28%; margin: 0 2%; text-align: center} .tour_section .tour_blocks > * {width: 46%; float: left; margin: 2%; padding: 30px 20px 30px 0; display: flex; align-items: center; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,.2); border-radius: 4px} .tour_section .tour_blocks > * img {margin-left: -20px; width: 130px} .tour_section .tour_blocks > * > div {padding: 0 0 0 24px} #contentWrap .tour_section .tour_blocks > * p {margin: 6px 0 0 0} .tour_base {background: #f2f2f2; padding: 90px 20px} .comparison .tour_base {background: #f9f9f9; padding: 30px 0 80px} .tour_testimonial_holder {max-width: 1250px; margin: auto; text-align: center;} .tour_testimonial_holder .tour_testimonial {width: 35%; text-align: left; vertical-align: top; display: inline-block; margin: 0 18px 50px 80px} .tour_testimonial {width: 500px; margin: 0 auto 50px; overflow: visible; position: relative; line-height: 1.6} .tour_testimonial > img {margin: -30px 0 0 -70px; position: absolute} .tour_testimonial > blockquote {position: relative; z-index: 1; margin-bottom: 20px; font-size: 18px} .tour_testimonial cite {display: table} .tour_testimonial cite > * {display: table-cell; vertical-align: middle} .tour_testimonial cite > img {width: 75px; height: 75px; border-radius: 50%; margin-right: 10px; border: 2px solid white} .tour_base.success_stories {background: linear-gradient(180deg, #ffffff, #dddee2)} .tour .testimonials_holder {margin: 40px auto; text-align: center; display: flex; justify-content: center} .tour .testimonials_holder .testimonial {max-width: 400px !important} .tour .testimonials_holder .testimonial blockquote {height: calc(100% - 50px)} .tour .testimonials_holder .testimonial .quoteText {display: flex; flex-direction: column; justify-content: space-between; margin: 15px 0; height: 100%} .tour .testimonials_holder .testimonial .quoteText p {margin: 0 auto} .tour .testimonials_holder .testimonial .quoteText p + p {margin-top: 15px} @media screen and (min-width: 1214px){ .tour .testimonials_holder .testimonial {margin: 50px 20px} } @media (max-width: 900px) { .tour .testimonials_holder {flex-flow: wrap} .tour .testimonials_holder .testimonial {max-width: 300px !important} } .tour_buttons {max-width: 1130px; margin: auto; text-align: center} .tour_buttons a.tour_overview_button {margin-bottom: 20px} .tour_buttons a.tour_overview_button + a.colorBtn {clear: both} .tour_buttons > a.colorBtn {display: inline-block; margin: 5px; padding: 17px 19px !important} .tour_buttons > a.colorBtn:first-of-type {padding-left: 13px !important} .tour_buttons > a.colorBtn:last-of-type {padding-right: 15px !important} .newSite .colorBtn {padding: 11px 24px !important} .newSite .colorBtn, .newSite a.smlSignupButton, .logo_white_btn, header.transparentNav nav.mainNav ol > li.signupHolder span, .newsLink a {box-shadow: 0 10px 22px 0 rgba(40, 43, 49, .18)} .newSite .colorBtn:hover, .newSite a.smlSignupButton:hover, .logo_white_btn:hover, header.transparentNav nav.mainNav ol > li.signupHolder a:hover span .newsLink a:hover {opacity: 1; box-shadow: 0 0 8px 0 rgba(40, 43, 49, .16)} .newSite .colorBtn i:after, .newSite a.smlSignupButton i:after {left: -40px} #wrapper.resources .colorBtn {padding: 8px 11px !important} #wrapper.resources .colorBtn i.inline {margin-right: 1px; margin-left: -1px} .about-stats {margin: 100px auto 60px; padding: 0 20px; width: 100%; max-width: 1000px; text-align: center; box-sizing: border-box} .about-stats li {width: 33%; display: inline-block; margin: 0 0 40px -4px; overflow: hidden; vertical-align: top} .about-stats li div {margin: 0 auto 20px} .about-stats li div {position: relative; display: inline-block} .about-stats li div img {height: 160px} .about-stats li span {display: block; color: #5e5f5f; letter-spacing: 0.5px; font-size: 19px; color: #676b75} .about-stats li .num {font-size: 40px; line-height: .7; margin: 10px 0; position: relative} .about .about-stats {max-width: 1200px} .about .about-stats li {width: 20%} .about .about-stats li div img {height: 130px} .tour_start {margin: 10px 0 120px} @media (max-width: 1440px) { .tour_section {padding: 60px 0} .feature_visual.feature_lrg {padding-left: 10px} .tour_types_of_games .feature_info.feature_lrg {margin: 250px 0 -60px} .indie .tour_types_of_games {margin-bottom: 190px} .indie .tour_types_of_games .feature_info.feature_lrg {margin: 350px 0 -200px} } @media (max-width: 1250px) { .tour_section h2 {font-size: 31px} .feature_visual.feature_lrg {width: 56%} .container:not(.container_center) .feature_visual img {width: 40vw} .container:not(.container_center) .feature_visual.feature_lrg img {width: 51vw} .container.container_center .feature_visual img {max-width: 100%} .support_forum .container:not(.container_center) .feature_visual.feature_lrg img {width: auto; max-width: 100%} .tour_types_of_games {margin-top: -110px} .tour_section.tour_automation .feature_info {width: 320px} .tour_section.tour_automation .phones_holder img {width: 300px} } @media (min-width: 1270px) { .tour_buttons {max-width: 1190px; display: flex; justify-content: center; align-items: center; padding: 0 20px} .tour_buttons .tour_progress {order: 2; margin: 0 5px} .tour_buttons a:nth-child(2) {order: 3} } @media (max-width: 1024px) { .tour_overview #contentWrap .lrgTopHeading {margin-top: 50px} .mid_page_parallax_header .flexHolder > div h2 {font-size: 33px} .feature_info {width: 43%; margin: 0 3%;} .flipped .feature_visual.feature_lrg {padding-right: 50px} .tour_section.built_in_reports .tour_section_bg {margin-top: 185px} .tour_section .built_in_reports_pic1 {margin-top: 40px} .tour_three_column {text-align: center} .tour_three_column > * {width: 45%} .tour_three_column > *:last-child {margin-top: 40px} .about .about-stats li {width: 30%} } @media (max-width: 991px) { .tour_section {padding: 40px 0} .feature_info {padding: 0} .tour_section h2, .tour_section h3 {font-size: 28px} .tour_section h4 {font-size: 26px} #contentWrap .tour_section p {font-size: 16px} .feature_visual.feature_lrg {padding-right: 0; /*flex: 0 0 0*/} .container:not(.container_center) .feature_visual img {width: 43vw} .container:not(.container_center) .feature_visual.feature_lrg img {width: 47vw} .tour_section.uptime_and_performance .tour_section_bg {margin-top: -310px} .tour_types_of_games {margin-top: -80px; background-position: 80%} .tour_types_of_games .feature_info.feature_lrg {width: 100%} .tour_section.tour_automation {background-position: 50% 30px; height: auto} .tour_section.tour_automation .feature_info {margin-top: 90px; width: 420px; position: static} .tour_section.tour_automation .phones_holder {margin: 40px 0} .tour_section.tour_automation .phones_holder img {float: none; width: 200px} .tour_accessibililty .container_center .feature_visual {margin-top: -20px} .tour_section .bubble {margin: 80px 5px 0} .tour_section .bubble_holder {width: 332px; max-width: 100%; overflow: hidden; margin: auto} .tour_section.uptime_and_performance .bubble_holder {width: 332px} .tour_testimonial_holder .tour_testimonial {margin-left: 65px} .tour_testimonial > img {width: 80px; margin: -22px 0 0 -55px} .tour_testimonial > blockquote {font-size: 16px} .tour_testimonial > cite {font-size: 15px} .tour_testimonial cite > img {width: 65px; height: auto} .neo .colorBtn {font-size: 17px} .indie_tour_start {margin-bottom: 90px} } @media (min-width: 980px) { .tour #contentHeader {height: 280px !important} } @media (max-width: 900px) { .tour_nav a {font-size: 15px} .tour_section .tour_blocks {padding: 0 20px} .tour_section .tour_blocks > * {width: 100%; margin: 10px 0; padding: 10px 20px 10px 0} .tour_section.built_in_reports .tour_section_bg {margin-top: 90px} .tour_buttons .tour_progress {max-width: 500px} .tour_progress li:before {width: 100% !important} .tour_progress li:nth-child(2):after, .tour_progress li:last-child:after {height: 10px; background-color: #fff; content: ''; position: absolute; top: 9px; width: 2px; left: 0} .tour_progress li:last-child:after {left: auto; right: 0} } @media (max-width: 767px) { .tour #parallaxHeader #contentHeader {padding: 35px 18px} .side_feature, .side_feature.flipped {flex-direction: column} .side_feature > * {width: 100% !important; text-align: center} .feature_info {margin: 0} .feature_info.align_higher {margin-top: 0} .feature_visual.feature_lrg {position: static; padding: 0 10px} .flipped .feature_visual {padding: 0 5px} .flipped .feature_visual.feature_lrg {padding: 0 1px} .container:not(.container_center) .feature_visual img {width: 100%; max-width: 500px; margin-top: 30px} .container:not(.container_center) .feature_visual.feature_lrg img {width: 100%} .feature_visual img.floatR {float: none} .tour .colorBtn.large {font-size: 16px} .tour_section.pt0 {padding-top: 40px !important} .tour_section.pb0:not(.tour_mastery_coverage):not(.tour_accessibililty):not(.pb0_mobile) {padding-bottom: 40px !important} .tour_accessibililty .container_center .feature_visual {margin-top: 5px} .tour_types_of_games {margin-top: -150px} .tour_section.tour_gradebook {padding: 50px 0 350px; background-size: auto 90%; background-position: 50% bottom} .tour_section.tour_gradebook p {max-width: 500px} .tour_testimonial {width: auto !important} .tour_testimonial_holder .tour_testimonial {margin-left: 55px} .tour_testimonial {margin-right: 0; margin-left: 40px} .tour_testimonial > img {width: 60px; margin: -18px 0 0 -43px} .tour_testimonial cite > img {width: 45px; height: auto} .tour_testimonial > blockquote {font-size: 16px} .about-stats li div img {height: 100px} .about-stats li span {letter-spacing: 0; font-size: 17px} .about-stats li .num {font-size: 32px} .tour_section.built_in_reports .tour_section_bg {margin-top: 285px} .container:not(.container_center) .feature_visual .built_in_reports_pic2 {margin-top: -100px} } @media (max-width: 580px) { .about-stats li {width: 50%} .about-stats li:last-child {width: 100%} .about .about-stats li {width: 50%} .indie .tour_types_of_games {margin-bottom: 240px} .indie .tour_types_of_games .feature_info.feature_lrg {margin: 340px 0 -250px} } @media (max-width: 479px) { .tour .floatingNav.open ul {width: 258px} .tour .floatingNav.open ul li a {padding-left: 15px; font-size: 15px; white-space: normal} #contentWrap .tour_section p {font-size: 15px} .tour_types_of_games {margin-top: -110px} .indie .tour_types_of_games {margin-bottom: 250px} .indie .tour_types_of_games .feature_info.feature_lrg {margin: 210px 0 -290px} .tour_section.tour_gradebook {padding-bottom: 313px; background-size: auto 84%} .tour_section.tour_automation .feature_info {width: 100%} .tour_section.built_in_reports .tour_section_bg {margin-top: 240px} .tour_three_column > *:not(:first-child) {margin-top: 30px} .tour_two_columns > div, .tour_three_column > div {display: flex; flex-flow: row wrap; align-items: center; width: auto; text-align: left} .tour_two_columns > div h3, .tour_three_column > div h4 {flex: 1} .tour_three_column > div img {margin-right: 15px; height: 100px} .tour_two_columns > div img {height: 100px; margin-right: 10px} .tour_collaboration .tour_two_columns > div img {height: 120px; margin: 0 -23px 0 -20px} .tour_two_columns > div p {margin-top: 0 !important} .tour_section.tour_automation .phones_holder img {width: 143px} } @media (max-width: 380px) { .indie .tour_types_of_games {margin-bottom: 340px} .indie .tour_types_of_games .feature_info.feature_lrg {margin: 200px 0 -370px} .tour_section.tour_gradebook {padding-bottom: 250px; background-size: auto 70%} .tour_testimonial_holder .tour_testimonial {margin-right: 0; margin-left: 40px} .tour_section .tour_blocks > * {display: block; text-align: center; padding: 15px} .tour_section .tour_blocks > * img {margin: 0; width: 70px} .tour_section .tour_blocks > * > div {padding: 0} .about .about-stats li div img {height: 100px} } @media (max-width: 365px) { .tour_section .bubble {margin-left: 0; margin-right: 0} .tour_section.uptime_and_performance .tour_section_bg {margin-top: 28px; background-size: auto 615px} .tour_section.uptime_and_performance .bubble:first-child, .tour_section.uptime_and_performance .bubble:last-child {width: 100px; height: 100px} .tour_section.uptime_and_performance .bubble:nth-child(2) {margin-right: -10px; margin-left: 15px} .tour_section.reduce_cost .bubble:nth-child(2) {margin-right: -22px; margin-left: 0} } .portal #contentHeader {position: relative; padding: 18px 20px; text-align: left; display: flex; justify-content: space-between; flex-wrap: wrap} .portal #contentHeader h1, .portal #contentHeader h2, .portal #contentHeader .heading_font, .narrow_header #contentHeader h1 {font-size: 22px} .portal #contentHeader h1 {position: relative} .portal #contentHeader span {color: #fff} .portal #contentHeader .subcategory {display: inline-flex} .portal #contentHeader .backLink img {width: 20px; height: 20px} .portal #contentHeader .backLink:hover img {opacity: .7} .portal #contentHeader .optionsRibbon {top: 0; padding-bottom: 2px; margin-top: -3px} .portal #contentHeader .optionsRibbon ul {margin: 2px 0 0 0} .portal.catalog_class #contentHeader h1 {flex: 1} .portal.catalog_item #contentHeader {min-height: 67px} .portal.catalog_item #contentHeader .heading_font span {font-weight: normal}/*match to other headings in Safari*/ .portal #contentHeader .backLink.heading_font {position: static; padding: 0; display: flex; align-items: center} .portal #contentHeader .backLink.heading_font img {margin: 0 9px 0 -4px} .portal #contentHeader .options_btn {padding-top: 3px; padding-bottom: 3px; margin-top: 0} html:not([dir=rtl]) .portal #contentHeader .calendar_btn:nth-child(2) {margin-left: auto !important} .portal #contentHeader .catalog_search_holder button {height: 29px} .portal #contentHeader .catalog_search_holder input {height: 31px} @media screen and (max-width: 480px) { .portal:not(.catalog_class) #contentHeader {flex-direction: column} .portal #contentHeader .catalog_search_holder {margin: 10px 0 0 0} .portal #contentHeader .catalog_search_holder input {width: 100%} .portal #contentHeader .optionsRibbon {margin: 10px 0 0} .portal #contentHeader .calendar_btn {align-self: center; margin: 10px 0 0 0 !important} } @media screen and (min-width: 480px) { .portal #contentHeader {align-items: center} } @media screen and (max-width: 559px) { .tour.narrow_header #parallaxHeader #contentHeader {padding-top: 20px} } @media screen and (min-width: 560px) { #parallaxHeader #contentHeader br {display: inline-block;} #parallaxHeader #contentHeader h1, #parallaxHeader #contentHeader h2, .contentHeader h2, .narrow_header #contentHeader h1 {font-size: 29px} .mobileBar .signupMobile {display: block} } @media screen and (max-width: 600px) { .portal.catalog_class #leftColumn .img_crop_wrap + div {padding: 10px 20px} } @media screen and (max-width: 767px) { .portal.catalog_class #leftColumn .infoHolder {padding: 10px 20px} .portal.catalog_class #contentHeader .showBelow768 {margin-left: 21px} .portal.catalog_class #leftColumn h1 {display: none} } @media screen and (min-width: 768px) { #parallaxHeader #contentHeader p, #contentWrap .contentHeader p {font-size: 19px;} #parallaxHeader #contentHeader {height: 130px} #parallaxHeader #contentHeader h1, #parallaxHeader #contentHeader h2, .contentHeader h2, .narrow_header #contentHeader h1 {font-size: 30px} .narrow_header #parallaxHeader #contentHeader {height: 130px; min-height: 130px} .portal.catalog_class #contentWrap.hasLeftColumn:before {position: absolute} .portal.catalog_class #contentHeader {position: fixed; z-index: 6} .portal.catalog_class #contentHeader h1 {margin-left: 274px} .portal.catalog_class #centreColumn h2:first-of-type {margin-top: 0} .portal.catalog_class #centreColumn .catalog_item_tabs:first-child .tabnav {margin-top: 0} .portal.catalog_class #leftColumn h1, .portal.catalog_class #contentHeader .showBelow768 {display: none} } @media screen and (min-width: 769px) and (max-width: 979px) { .catalog_class #centreColumn {padding-top: 15px} } @media screen and (max-width: 979px) { .newSite #contentHeader {margin-top: 44px;} .sales h2 {font-size: 19px} .portal #contentHeader {margin-top: -1px} body.portal #contentBody #contentHeader.mobileApp{ position:relative; margin-left:-20px; padding: 10px 40px 10px 20px; box-sizing: content-box; } body.portal #contentBody #contentHeader.mobileApp a.backLink{top: 10px} body.portal #contentBody #contentHeader.mobileApp h2{ margin-top: 2px; text-align: center; color: #fff; } } @media screen and (min-width: 980px) { #parallaxHeader {z-index: -1} #parallaxHeader #contentHeader, .newSite #contentHeader {padding-top: 67px} #parallaxHeader #contentHeader {min-height: 195px; padding-left: 0; padding-right: 0} #parallaxHeader #contentHeader.multiline h2 {display: block} #parallaxHeader #contentHeader.tall_header {min-height: 250px} .narrow_header #parallaxHeader #contentHeader {height: 195px; min-height: 195px; padding-top: 67px} .indie .narrow_header #parallaxHeader #contentHeader h2, .indie .narrow_header #parallaxHeader #contentHeader h1 {display: table-cell} .portal #contentHeader {padding: 18px 26px} .portal #contentHeader h1, .portal #contentHeader .heading_font {font-size: 24px} .portal.catalog_class #contentHeader {max-width: 1548px} .site_full_width.portal.catalog_class #contentHeader {max-width: 2050px} .portal.catalog_class #contentHeader h1 {margin-left: 270px} .sales .paper_size_holder {display: flex; justify-content: space-between; margin-top: 20px} } @media screen and (min-width: 1280px) { #parallaxHeader #contentHeader h1, #parallaxHeader #contentHeader h2, .contentHeader h2, .narrow_header #contentHeader h1 {font-size: 35px} } /* -- content body -- */ #contentBody, body.edu2.home-carousel #contentBody { margin: 0 auto; padding: 30px 18px; } .alternateBg #contentBody {padding-left: 0; padding-right: 0} body.edu2 #contentBody {max-width: 1080px; padding-top: 0} .portal #centreColumn {overflow: hidden} .alternateBg h2, .lrgTopHeading {text-align: center} .lrgTopHeading {margin-top: 35px} .lrgTopHeading.brochureHeading {margin: 20px auto !important} .resellers .lrgTopHeading {margin-top: 15px} p.subText {margin: 25px 0; text-align: center} .colorBtn {padding: 10px 15px; margin: 10px auto 0; display: inline-block; color: #fff; font-size: 16px} a.colorBtn:hover {color: #fff} .newSite .colorBtn, .newSite .navButtons a, .tour_nav a, a.smlSignupButton, nav.mainNav .signupHolder span, .newsIntro a, .newsLink a, .contactForm button, .signupForm button, .logo_white_btn {border-radius: 50px} .logo_white_btn {background-color: #fff; margin: 10px 5px 0; display: inline-block; font-size: 15px; padding: 12px 15px} .logo_white_btn > div {display: flex; align-items: center} .logo_white_btn.large {margin-top: 20px} .logo_white_btn.large img {height: 40px} body.home-carousel .customHTML {position: absolute; width: 100%; height: 100%; z-index: 0} body.home-carousel .customHTML p {margin: 0} /* -- 2 Column setup -- */ ul.twoColumnWrap li, ul.twoColumnWrap + ul.twoColumnWrap li:first-child { position: relative; padding: 0 0 0 25px; margin-top: 25px } ul.twoColumnWrap li p {margin-left: -25px} .demo ul.twoColumnWrap li, .demo ul.twoColumnWrap + ul.twoColumnWrap li:first-child {padding: 0} .demo ul.twoColumnWrap li p {margin-left: 0} ul.twoColumnWrap li:first-child { margin-top: 25px; } ul.twoColumnWrap li:before, dl dt:before { content: ''; width: 14px; height: 20px; position: absolute; left: 0; top: 4px; } ul.twoColumnWrap li:before, ul.twoColumnWrap dl dt:before {background-position: -84px -2px; background-repeat: no-repeat} .about ul.twoColumnWrap li:before {background: none} /* Stories, testimonials and case studies */ #wrapper[class="stories"] .floatingNav li:nth-child(1) a, #wrapper[class*="case_studies"] .floatingNav li:nth-child(2) a, #wrapper[class*="testimonials"] .floatingNav li:nth-child(3) a {opacity: 1} .stories h2 {font-size: 32px} .stories .colorBtn {margin: 10px auto} .stories_ctas {display: flex; max-width: 1100px; justify-content: center; padding: 30px; margin: 50px auto 0} .stories_ctas div {width: 40px; height: 20px} .stories_cta {width: 495px; height: 330px; position: relative; display: block; overflow: hidden; border-radius: 10px} .stories_cta:hover {box-shadow: 5px 5px 10px rgba(0,0,0,0.15)} .stories_cta img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s} .stories_cta:hover img {transform: scale(1.05)} .stories_cta .colorBtn {z-index: 1; white-space: nowrap; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)} .featured_video {overflow: visible; padding: 130px 0} .case_studies .featured_video {padding: 80px 0 100px} .featured_video.featured_stories_bg_holder {position: relative} .featured_video.featured_stories_bg_holder p {color: #fff !important} .featured_video .colorBtn {margin-top: 25px} .featured_video .embed-max-size {border: 20px solid white; box-shadow: 0 0 35px rgb(0,0,0, .15); margin-top: 0} .featured_stories_bg {position: absolute; top: -600px; bottom: 0; z-index: -1; background: url(/images/responsive/stories/success-stories-bg.png) 50% 0 no-repeat, linear-gradient(180deg, #fff 0%, #36abc0 10%, #36abc0); width: 100%; height: auto} .matrix .featured_stories_bg {background: url(/images/responsive/stories/matrix-success-stories-bg.png) 50% 0 no-repeat, linear-gradient(180deg, #fff 0%, #85acaf 10%, #359971)} .testimonials #contentWrap {overflow: visible}/* for sticky */ #testimonial_filter {margin-top: 25px; padding: 5px; background: #fff; position: sticky; top: 79px; z-index: 100; border-radius: 5px; display: inline-block; box-shadow: 0 5px 10px rgb(0 0 0 / 10%)} #testimonial_filter span {margin-right: 10px; position: relative; top: 2px; display: inline-block} #testimonial_filter button {box-shadow: none; transition: all .15s ease; margin: 0; padding: 0 10px} #testimonial_filter button:not(.active):not(:hover) {filter: grayscale(100%); opacity: .4} #testimonial_filter button:hover {opacity: 1} .testimonials_holder .testimonial.filterable {display: none} .testimonials_holder .testimonial.filterable.show {display: inline-block} @media screen and (max-width: 979px) { #testimonial_filter {top: 40px} #testimonial_filter button {margin: 3px auto} } @media screen and (max-width: 550px) { #testimonial_filter span {margin-bottom: 10px} #testimonial_filter button {line-height: 18px; padding: 7px 15px} } .stories .testimonials_holder {margin: 50px auto; text-align: center} .testimonials .testimonials_holder {margin: 60px auto 0; padding-bottom: 60px} .stories .testimonials_holder h2 {margin-bottom: 10px} .testimonials_holder .twoColumnHolder {max-width: 1200px; margin: 40px auto 20px} .testimonials_holder .columnHolder {column-gap: 10px} .matrix .testimonials_holder.reviews .columnHolder {height: 1000px} .testimonials_holder .testimonial {vertical-align: top; margin-top: 20px; display: inline-block; max-width: 300px; padding: 7px 20px; border-radius: 10px; position: relative; background: #fff; box-shadow: 0 3px 20px rgba(0,0,0,.1); margin: 10px 15px} .stories.testimonials .testimonials_holder .testimonial {margin: 30px 15px} .testimonials_holder .reviews_heading {color: #fff; padding-top: 50px} .testimonials_holder .testimonial img:first-child {width: 50px; margin-top: -50px; background-color: #048497; border-radius: 50%} .neo .testimonials_holder.reviews .testimonial img:first-child {background-color: #cc7170} .matrix .testimonials_holder .testimonial img:first-child {background-color: #85acaf} .matrix .testimonials_holder.reviews .testimonial img:first-child {background-color: #5e5f5f} #contentWrap .testimonials_holder .stars {margin: 15px auto} #contentWrap .testimonials_holder .review_quote {font-size: 20px} #contentWrap .testimonials_holder p strong {font-size: 14px} .testimonials_holder .testimonial img:last-child {margin-top: 10px; padding: 20px 0; max-height: 60px; width: auto} .testimonial .colorBtn {margin-bottom: 20px} .testimonials_holder.reviews.featured_stories_bg_holder {position: relative} .testimonials .featured_stories_bg {position: absolute; top: -600px; bottom: 0; z-index: -1; background: url(/images/responsive/stories/testimonials-bg.png) 50% 0 no-repeat, linear-gradient(180deg, #fff 0%, #36abc0 10%, #36abc0); width: 100%; height: auto} .matrix .testimonials .featured_stories_bg {background: url(/images/responsive/stories/matrix-testimonials-bg.png) 50% 0 no-repeat, linear-gradient(180deg, #fff 0%, #85acaf 10%, #c0d9db)} .case_studies_holder {max-width: 1400px; margin: 0 auto 60px; text-align: center; display: flex; flex-flow: wrap; justify-content: center} .case_studies_holder a {color: #222; display: flex; flex-direction: column; max-width: 260px; border-radius: 10px; position: relative; background: #fff; box-shadow: 0 3px 20px rgba(0,0,0,.1); overflow: hidden; margin: 20px} .case_studies_holder a:hover {color: #222; box-shadow: 5px 5px 10px rgba(0,0,0,0.15)} .case_studies_holder a img:first-of-type {z-index: 3; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 50px; box-sizing: border-box; padding: 7px; background-color: #fff; border-radius: 4px; box-shadow: 5px 5px 10px rgba(0,0,0,.1)} .case_studies_holder a img:last-of-type {object-fit: cover; height: 180px; clip-path: polygon(100% 0, 100% 75%, 0 100%, 0 0); margin-bottom: 15px} .case_studies_holder a > span {font-size: 15px; padding: 20px 15px; display: inline-block} .case_studies_holder a > span.label {background-color: #efefef; padding: 4px 10px !important; margin: auto 15px 15px; border-radius: 4px; align-self: center} @media (max-width: 1440px) { .stories_ctas {max-width: 820px} .stories_ctas .stories_cta {width: 350px; height: 260px} } @media screen and (min-width: 1214px) { .testimonials_holder .testimonial {margin: 50px} } @media screen and (max-width: 1213px) { .testimonials_holder .customer_logo {max-width: 100%; padding: 5px 5px 10px} .testimonials_holder .testimonial {margin: 20px} } @media (max-width: 768px) { .stories h2 {font-size: 28px !important} .stories_ctas {padding: 0 20px; display: block} .stories_ctas .stories_cta {width: 100%; height: 210px} .stories_ctas .stories_cta a {font-size: 14px} .matrix .testimonials_holder.reviews .columnHolder {height: auto} .featured_video {padding: 70px 0} .featured_video .embed-max-size {border-width: 10px} .featured_video .colorBtn {margin-bottom: 30px} .testimonials_holder h2 {margin: 30px 20px} .testimonials_holder .testimonial {margin: 20px} .testimonials_holder .reviews_heading {padding-top: 60px} } @media (max-width: 550px) { .stories h2 {font-size: 26px !important} .featured_video .embed-max-size {border-width: 5px; border-radius: 3px} } .story #contentHeader {background-image: url('/images/responsive/stories/header-neo.jpg')} .matrix .story #contentHeader {background-image: url('/images/responsive/stories/header-matrix.jpg')} .floatingIntro {position: relative} .floatingIntro .columnL {margin-top: -57px; display: inline-block; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.15); padding: 30px 20px; border-radius: 4px} .floatingIntro .shareLinks {margin: 0} .floatingIntro .shareLinks > div {float: none; padding-bottom: 10px} .floatingIntro .lrgTopHeading {text-align: left; margin: 0 0 25px !important; padding: 0} .floatingIntro p span {background-color: #eaeaea; padding: 1px 10px; margin: 0 2px 6px 0; display: inline-block; font-size: 14px; border-radius: 2px} .floatingIntro .columnL p img {margin: 0 40px 15px 0} .floatingIntro .image {height: 300px; background: 50% 50% / cover no-repeat; margin-bottom: 40px} .columnL, .columnR {box-sizing: border-box; -moz-box-sizing: border-box; width: 100%} .story #contentWrap section p, .story section li {line-height: 1.6em; font-size: 16px} .story .columnL {clear: both} .story .columnL section:not(.revealUpOnLoad) {padding: 20px 0 35px} .story .columnL h2 {font-size: 22px; padding-left: 20px; position: relative; margin: 10px 45px 0 0} .story .columnL h2:before {height: 90%; width: 3px; top: 5%; left: 0; position: absolute; content: ''} .story #contentWrap .columnL section p {margin-bottom: 30px} .story .columnR section {padding: 5px 0; margin: 25px 0 10px} .story #contentWrap .columnR section p {margin: 30px 0} .story #contentWrap .columnR section .embed-max-size + * {max-width: 660px; margin: 30px auto 20px; text-align: center} .story #contentWrap .columnR section p:first-child {margin-top: 15px} .navButtons {clear: both} .navButtons a.button, .newsHolder div > a {padding: 10px 15px; margin: 10px auto 0; display: inline-block; color: #fff} .stories .navButtons a.button {margin-bottom: 40px} .navButtons a.button i {margin-top: -4px} .navButtons a.button.prev {padding-left: 10px} .navButtons a.button.mid {margin: 10px 10px 0; padding: 16px 15px} .navButtons a.button.next {padding-right: 3px} .navButtons a.button.next i {margin-left: 7px} .navButtons a.button:hover i:after, .newsHolder > div > div > a:hover i:after {left: -40px} /* Column-count fallback */ .columnHolder .column {width: 30% !important} .columnHolder .column:not(.first) {margin-left: 4%} /* News and Awards */ .news #contentWrap {background-color: #f5f5f5} .news .alternateBg {padding-top: 36px; position: relative} .newsHolder {text-align: center; max-width: 1600px; margin: auto} .newsHolder > div, .newsHolder .blogFeedHolder div {border-radius: 6px; box-shadow: 0 3px 5px rgba(0,0,0,.15); background: #fff} .eventsHolder {margin-bottom: 15px} .alternateBg .eventsHolder h2, .alternateBg .eventsHolder + h2 {font-size: 23px; margin-bottom: 20px; -webkit-font-smoothing: subpixel-antialiased} .eventsHolder .newsHolder {display: flex; flex-wrap: wrap; justify-content: center;} .eventsHolder .newsHolder > div {margin: 0 15px 20px} .eventsHolder .newsHolder h3 {margin: 0} .eventsHolder .newsHolder p {margin-top: 2px} .news_tiles > div {border-radius: 10px; overflow: hidden; box-shadow: 0 3px 30px rgba(0,0,0,.15)} .newsHolder > div {width: 330px; text-align: left; margin: 0 15px 30px; display: inline-block; vertical-align: top; cursor: default; box-sizing: border-box} .newsHolder > div h1 {font-size: 35px; margin-bottom: 26px} .newsHolder div > div {padding: 15px 20px 0} .newsHolder .flexFixer {padding: 0} /* extra div for FF */ .newsHolder .flexFixer > div {height: 0; padding: 0 0 68.5%} .newsHolder .flexFixer > div img {max-width: 100%; height: auto} .newsHolder div h3 {margin: 15px 0; -webkit-font-smoothing: subpixel-antialiased} .newsHolder div p {line-height: 26px} .newsHolder div p a {text-decoration: underline} .newsHolder div > a i {margin: -4px 0 0 5px} .newsHolder .newsIntro {padding: 20px 10px; height: 319px} .newsHolder .blogFeedHolder {background: transparent; box-shadow: none; max-width: 100%} .newsHolder .blogFeedHolder strong {background: #bf5b54; color: #fff; padding: 8px 10px; display: inline-block; border-radius: 4px 4px 0 0} .newsHolder .blogFeedHolder a {background: transparent; padding: 0; color: #222; font-size: 15px;} .newsHolder .blogFeedHolder a:hover {background: transparent} .newsHolder .blogFeedHolder div {padding: 0; overflow: hidden} .newsHolder .blogFeedHolder div iframe {margin-bottom: -6px; width: 100%} #wrapper.news .show_news i.inline {margin-right: 1px; margin-left: -1px} .resources .newsHolder .blogFeedHolder {width: 100% !important} .resources .newsHolder > div, .resources .newsHolder .blogFeedHolder div {background: transparent; box-shadow: none; margin-bottom: 0} .flexbox .news_tiles, .flexbox .news_tiles > div {display: flex} .flexbox .news_tiles {flex-flow: row wrap; justify-content: center} .flexbox .news_tiles > div {flex-direction: column} .news_tiles .newsLink {padding-bottom: 20px; margin-top: auto} .flexbox .news_tiles .newsLink a {margin: 0; display: block; text-align: center} /* Over page news popup */ .news_popup {position: fixed; bottom: 25px; left: 25px; z-index: 10; width: 280px; transition-delay: 25s; transform: translateX(-305px)} .news_popup .newsHolder > div {margin: 0} .news_popup .flexFixer {position: relative} .news_popup .flexFixer a {position: absolute; top: 5px; right: 15px; background: url(../images/icons/icons.svg) top right; padding: 7px} .news_popup .flexFixer a:hover {background-color: transparent; opacity: .5} .news_popup .flexFixer img {width: 100%} .news_popup .newsHolder > div p {margin: 0; width: 100%} .news_popup .newsHolder > div p, .news_popup a {font-size: 15px; line-height: 1.6} @media screen and (min-width: 560px) { .newsHolder .newsIntro {margin-top: -60px} } @media screen and (min-width: 980px) { .newsHolder .blogFeedHolder {width: 1046px} .newsHolder .blogFeedHolder iframe {height: 225px} .resources .newsHolder .blogFeedHolder iframe {height: 472px !important} } @media screen and (max-width: 979px) { .resources .newsHolder .blogFeedHolder iframe {height: 705px !important} } @media screen and (max-width: 1452px) { .newsHolder .newsIntro {height: 319px} .newsHolder .blogFeedHolder {width: 693px} } @media screen and (max-width: 1141px) { .newsHolder {padding: 0 15px} .newsHolder > div {margin: 0 0 30px; width: 31.6%} .eventsHolder .newsHolder > div {margin: 0 8px 20px; width: 300px} .newsHolder .newsIntro > div {padding-top: 0} .newsHolder .newsIntro {float: left; width: auto; height: auto; max-width: 100%} .newsHolder .blogFeedHolder {width: 100%} .news_tiles > div:nth-child(3n+2) {margin: 0 2% 30px} .resources .newsHolder {padding: 0} } @media screen and (max-width: 769px) { .newsHolder .newsIntro {width: 100%} } @media screen and (max-width: 723px) { .newsHolder > div {width: 48%} .newsHolder .blogFeedHolder iframe {height: 444px !important} .news_tiles > div:nth-child(3n+2) {margin: 0 0 30px} .news_tiles > div:nth-child(odd) {margin: 0 3% 30px 0} } @media screen and (min-width: 723px) { .newsHolder .blogFeedHolder iframe {height: 225px !important} } @media screen and (max-width: 460px) { .newsHolder > div {width: 100%; max-width: 100%} .newsHolder > div img {width: 100%} .news_tiles > div:nth-child(odd) {margin: 0 0 30px} .eventsHolder .newsHolder > div {margin: 0 0 15px} } @media screen and (max-width: 374px) { .newsHolder .blogFeedHolder {width: auto} } .awards {background-color: #fff} .awards .imgDivider {height: 300px; width: 100%; padding: 0 20px; text-align: center; box-sizing: border-box; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center} .awards .imgDivider > * {margin-top: -70px} .awards .twoColumnHolder {padding: 0 0 70px; text-align: center} .iconNav {display: none; margin: -70px 0 30px; padding: 10px 20px 0; position: relative; background: #fff; border-radius: 3px} .iconNav a {width: 150px; display: inline-block; margin: 20px 10px; opacity: 0.4} .iconNav a.selected, .iconNav a:hover {opacity: 1} .iconNav a img {width: 100%} .iconNav div {height: 4px; width: 150px; margin: 0; transition: .8s ease-in-out; -webkit-transition: .8s ease-in-out; position: absolute; bottom: 0; left: 30px} .owl-dots button {margin-top: 2px} .owl-dots button:focus {box-shadow: none} .awards .iconNav {margin-bottom: 0; height: 256px; overflow: hidden} .awards .iconNav.auto_height {height: auto !important} .awards .iconNav a {width: auto; height: 85px; margin: 20px 15px} .awards .iconNav a img {width: auto; height: 100%} .awards #icon-carousel .owl-stage-outer {margin-top: 20px} .awards #icon-carousel .owl-dots {position: absolute; top: 20px; display: block; text-align: center; left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); width: 100%} #icon-carousel {width: 90%; max-width: 800px; margin: auto; padding-top: 30px} #icon-carousel .owl-stage-outer {position: relative; z-index: 2} #icon-carousel .owl-item > div img {height: 130px; width: auto; margin: 0 auto 30px} #icon-carousel .owl-item > div .text {text-align: center} #icon-carousel .owl-item > div .text h3 {margin-bottom: 20px} #icon-carousel .owl-item > div .text p {font-size: 17px; line-height: 28px} #icon-carousel .owl-nav {position: absolute; width: 100%; top: 96px; margin-top: -21px; z-index: 10; display: none} #icon-carousel .owl-nav .owl-prev {position: absolute; left: 0; margin-left: -18px} #icon-carousel .owl-nav .owl-next {position: absolute; right: 0; margin-right: -18px} #icon-carousel .owl-nav > div {width: 60px; height: 60px; padding: 20px 0 0 10px; display: inline-block; margin: 10px; overflow: hidden; text-indent: -500px} #icon-carousel .owl-nav span {display: block; position: absolute; margin-top: 20px;} #icon-carousel .owl-nav span:before, #icon-carousel .owl-nav span:after {content: " "; margin-top: -26px; position: absolute; left: 0; right: 0; background-color: #a0a0a0} #icon-carousel .owl-nav span, #icon-carousel .owl-nav span:before, #icon-carousel .owl-nav span:after {width: 40px; height: 2px} #icon-carousel .owl-nav > div span:after {margin-top: 1px} #icon-carousel .owl-nav .owl-prev span:after, #icon-carousel .owl-nav .owl-next span:before {transform: rotate(45deg)} #icon-carousel .owl-nav .owl-prev span:before, #icon-carousel .owl-nav .owl-next span:after {transform: rotate(-45deg)} @media screen and (max-width: 768px) { .awards .imgDivider {height: 110px} .awards .imgDivider > * {margin-top: 0} } @media only screen and (max-width: 1047px) { .awards #icon-carousel .owl-stage-outer {margin-top: 70px} .owl-controls {margin-top: 10px; text-align: center; -webkit-tap-highlight-color: transparent} .owl-controls .owl-nav [class*=owl-] {color: #fff; font-size: 14px; margin: 5px; padding: 4px 7px; background: #d6d6d6; display: inline-block; cursor: pointer; border-radius: 3px} .owl-controls .owl-nav [class*=owl-]:hover {background: #869791; color: #fff; text-decoration: none} .owl-controls .owl-nav .disabled{opacity: .5; cursor: default} .owl-dots .owl-dot {display: inline-block} .owl-dots .owl-dot span {width: 10px; height: 10px; margin: 5px 7px; background: #d6d6d6; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px} .owl-dots .owl-dot.active span,.owl-dots .owl-dot:hover span {background: #869791} } /* About */ .about .aboutProduct p {line-height: 1.5} .about .aboutProduct .twoColumnText a {text-decoration: underline} .about .aboutProduct img[class*="about_img"] {margin-top: 33px; width: 100%; border-radius: 4px} .about .aboutProduct img.about_img_left {margin-bottom: 25px} .about .aboutProduct img.about_img_right {margin-top: 25px} .indie .about .aboutProduct img.about_img_left {margin-top: 9px} .map_holder.alternateBg {padding: 40px 0 0 0} .map_legend {margin: 10px 0 4px; text-align: center} .map_legend div {display: inline-block; margin: 0 4px 6px} .map_legend div img {margin: -3px 6px 0; vertical-align: middle} .map_legend div img:first-of-type:not(:only-child) {margin-left: 6px} .map_legend div img:not(:only-child) {margin-right: 0; margin-left: -2px} .map_legend div img:last-of-type:not(:only-child) {margin-right: 6px} .about .our_regions {padding: 0 0 50px} .about .our_regions #map path {cursor: default} @media screen and (max-width: 1440px) { .about .our_regions #map {margin-left: 20px; margin-right: 20px} } @media screen and (max-width: 500px) { .about .our_regions #map {margin-left: 10px; margin-right: 10px} } .cypher_products {text-align: center; margin: 20px auto 50px; display: flex; justify-content: center; align-items: center} .cypher_products > img {border-right: 1px solid #a2a2a2; padding-right: 40px} .cypher_products > h2 {font-size: 30px !important; padding-left: 40px; color: #5d5d5d; margin: 0 !important} .product_blocks {max-width: 100%; width: 1380px; margin: 0 auto 20px; padding: 0 15px; display: flex; justify-content: center; flex-wrap: wrap; box-sizing: border-box} .product_blocks > * {color: #fff; box-shadow: 0 0 40px rgba(0,0,0,.15); margin: 4px; width: 100%; max-width: 32%; padding: 30px; box-sizing: border-box; border-radius: 10px; overflow: hidden; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center} .product_blocks > *.neo {background: #01616f} .product_blocks > *.matrix {background: #36575d} .product_blocks > *.indie {background: #3b3261} .product_blocks > *.neo figure {background: url('/images/responsive/about/about-neo.jpg') top left no-repeat; background-size: cover !important} .product_blocks > *.matrix figure {background: url('/images/responsive/about/about-matrix.jpg') top right no-repeat} .product_blocks > *.indie figure {background: url('/images/responsive/about/about-indie.jpg') top no-repeat} .product_blocks > * .heading {font-size: 28px} .product_blocks > * .heading span {font-size: 20px; display: block} .product_blocks > * .heading span, .product_blocks > * p {text-shadow: 1px 1px 2px rgba(0,0,0,.5)} .product_blocks > * .heading img {max-width: 100%} #contentWrap .product_blocks > * p {font-size: 18px; line-height: 1.5; margin: 20px 0 25px; text-shadow: 1px 1px 2px rgba(0,0,0,.5); width: 100%;/* IE11 */} .product_blocks > * a {font-size: 18px; margin-top: auto; color: #fff; border-bottom: 1px solid transparent} .product_blocks > * a i {margin: -3px -5px 0 5px} .product_blocks > * a:hover {border-bottom-color: #fff} .product_blocks > * a:hover i:after {left: -40px} .product_blocks > * > * {position: relative; z-index: 2} .product_blocks > * figure {background-size: 100% auto !important; opacity: .4; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1} @media (max-width: 900px) { .product_blocks > * {width: 350px; max-width: 100%} } @media (max-width: 600px) { .cypher_products {margin: 10px auto 20px} .cypher_products > img {padding-right: 20px; width: 160px} .cypher_products > h2 {font-size: 20px !important; padding-left: 20px} } @media (max-width: 400px) { .cypher_products > img {width: 160px} .product_blocks > * {width: 350px; max-width: 100%; margin: 10px 0; padding: 30px 20px} #contentWrap .product_blocks > * p {font-size: 16px; margin-bottom: 30px} } /* Comparisons */ .lrgContentBlock {float: none; width: 100%} .lrgContentBlock .sideText {padding-left: 45px} .comparisonsBlocks .flex_blocks, .comparisonsBlocks .webinar_blocks {display: flex; flex-flow: row wrap; justify-content: center; overflow: hidden} .comparisonsBlocks a.contentBlock {color: #fff; font-size: 26px; text-align: center; border-radius: 10px; display: inline-block; padding: 15px 10px; margin: 0 10px 20px; border: 0; width: 180px; float: none} .comparisonsBlocks a.contentBlock[href*="successfactors"] {font-size: 21px; word-break: break-word; hyphens: auto} .comparisonsBlocks a.contentBlock div {height: 100%; display: flex; flex-direction: column} .comparisonsBlocks a.contentBlock div > * {margin: auto} .comparisonsBlocks a.contentBlock div > img {margin: 8px auto 5px; transform: scale(0.9,0.9); height: 60px} .comparisonsBlocks a.contentBlock div > span:last-child {flex-grow: 1; display: flex; align-items: center; justify-content: center; /* adjusted for IE11 */} .comparisonsBlocks a.contentBlock:hover {opacity: .9} .comparisons section.alternateBg, .brochure section.alternateBg {position: relative} .comparisons .twoColumnHolder, .brochure .twoColumnHolder {text-align: right} .comparisons .floatingIntro + .columnL, .brochure .floatingIntro + .columnL {clear: both} .comparisons .floatingIntro .columnL, .brochure .floatingIntro .columnL {overflow: hidden; width: auto; margin-bottom: 40px; float: left} .comparisons .columnL, .brochure .columnL {margin-left: -4px; vertical-align: top; text-align: left} .comparisons .columnR, .brochure .columnR {display: inline-block; margin: 0 0 -4px -4px; overflow: hidden; text-align: left} .comparisons .columnR > *:first-child, .brochure .columnR > *:first-child {margin-top: 10px !important} .comparisons .columnL h2, .brochure .columnL h2 {font-size: 22px; text-align: left; padding-left: 0; position: relative; margin: 10px 45px 50px 0} .comparisons .columnL h2:before, .brochure .columnL h2:before {height: 3px; width: 30%; bottom: -20px; left: 0; position: absolute; content: ''} .comparisons .columnR h3, .brochure .columnR h3 {margin: 25px 0; text-align: center} .comparisons .columnR > h3, .brochure .columnR > h3 {margin: 0; text-align: left; font-size: 21px} .comparisons .columnR > h3 + p, .brochure .columnR > h3 + p {margin-top: 10px !important} .comparisons section.alternateBg, .brochure section.alternateBg {border: 1px solid #e2e0e0; border-width: 1px 0 0 0} .comparisons section.alternateBg:not(.pb0) .columnR > p:last-child, .brochure section.alternateBg:not(.pb0) .columnR > p:last-child {margin-bottom: 10px !important} .comparisons .columnR p:not(.center), .brochure .columnR p:not(.center) {line-height: 1.8; margin: 30px 0} .comparisons #section6 .columnR p:last-child:not(.center) {margin-bottom: 10px} .comparisons .columnR p.center span, .brochure .columnR p.center span {font-size: 15px; color: #999} .comparisons .columnR p.center img, .brochure .columnR p.center img {border: 1px solid #e2e0e0; border-bottom-width: 0; margin-top: 15px; max-width: 100%} .comparisons .columnR p.center:last-child img, .brochure .columnR p.center:last-child img {margin-bottom: -3px} .comparisons .columnR p.center, .brochure .columnR p.center {margin: 20px 2px -4px 0; text-align: center} .columnR a {text-decoration: underline} .columnR ul {margin-bottom: 25px; line-height: 28px} .columnR ul li {margin-top: 0; vertical-align: top} .columnR ul.columnHolder li, .columnR ul.columnHolder_2 li {width: 100%; box-sizing: border-box; margin: 0} .alternateBg .columnR ul {list-style: disc; margin-left: 25px} .comparisons .navButtons, .brochure .navButtons {margin: 35px 0 20px; overflow: hidden} #wrapper.contact a.contentBlock:hover {box-shadow: 2px 2px 15px rgba(0,0,0,0.15)} #wrapper.contact a.contentBlock:not(.floatR) {clear: left} /* Brochures */ .brochure .floatingIntro .columnL {padding: 0; display: flex} .brochure .floatingIntro .brochure_header_img img {vertical-align: bottom; box-shadow: 0 0 10px rgba(0,0,0,.1)} .brochure .floatingIntro .brochure_header_text {display: flex; flex-direction: column; padding: 30px 20px} .brochure .floatingIntro .lrgTopHeading {display: flex; align-items: center; padding: 0; margin-bottom: 10px !important} .brochure .floatingIntro .lrgTopHeading img {box-shadow: 0 0 10px rgba(0,0,0,.2); margin-right: 20px; display: none} .brochure .brochure_header_buttons {margin-top: auto} .brochure .brochure_header_buttons .navButtons, .brochure .brochure_header_buttons .navButtons a {margin: 0; overflow: visible} .brochure .brochure_header_buttons .shareLinks {margin: 0 30px 10px 0} .brochure .columnR .no_border img {border-width: 0 !important} .brochure .columnR .negative_margin {margin: -10px 0 !important} .brochure .columnR .negative_margin img {margin: 0 !important} .brochure .columnR .mt0 img {margin-top: 0; vertical-align: bottom} .brochure.white_paper .columnL {max-width: 800px} .brochure.white_paper .white_paper_form {min-width: 316px; min-height: 390px; margin-top: 0 !important} .brochure.white_paper .white_paper_form form {margin-top: 0 !important} .brochure.white_paper .white_paper_form > p {font-size: 13px !important; text-align: center; margin: 5px 0 0 0} .brochure.white_paper .lrgTopHeading {margin-bottom: 38px !important} .brochure.white_paper .columnR > *:nth-child(1) {margin-bottom: 40px} .brochure.white_paper .columnR > *:nth-child(1) form {width: 100% !important} .brochure.white_paper .columnR > *:nth-child(2) {float: right} .brochure.white_paper .columnR > *:nth-child(2) img {width: 200px; margin: 0 0 0 30px} .brochure.white_paper .columnR > *:nth-child(3) p:first-child {margin-top: 0 !important} .brochure.white_paper .columnR > *:nth-child(3) p.mb0 {clear: both} .brochure.white_paper .highlight_block {text-align: center} .brochure.white_paper .highlight_block p {background: #eae2d4; padding: 18px 30px; border-radius: 5px; margin: 10px 0 0; display: inline-block} .columnR .pill {color: #fff; padding: 3px 8px; border-radius: 3px; font-size: 15px; margin: 0 3px; position: relative; top: -2px} /* Hubspot forms */ .hbspt-form form {padding: 0; max-width: 100%; width: auto; margin: 0} .hbspt-form form > div:not(:first-child) {margin-top: 10px} .hbspt-form input[type="text"], .hbspt-form input[type="tel"], .hbspt-form input[type="email"], .hbspt-form select {width: 100%; padding: 6px 12px; font-size: 16px} .hbspt-form select {padding: 5px 7px; height: auto} .hbspt-form input[type="text"]::placeholder, .hbspt-form input[type="tel"]::placeholder, .hbspt-form input[type="email"]::placeholder {color: #bfbfbf; font-size: 16px} .hbspt-form input[type="checkbox"] {position: relative; top: 3px; border: 1px solid #999; width: 15px; height: 15px} .hbspt-form label {color: #fff; font-size: 13px; width: 100%} .hbspt-form input[type="submit"] {background-color: #56af53; display: block; margin: auto; padding: 6px 20px; box-shadow: rgba(0,0,0,.1) 2.13px 2.13px 3px 0} .hbspt-form input[type="submit"]:hover {opacity: .9} .hbspt-form p {font-size: 13px !important; line-height: 1.4 !important} .hbspt-form ul {margin: 0 0 15px !important; line-height: 1.4; list-style: none !important} .hbspt-form li {padding: 0 !important} .hbspt-form li:before {display: none} .hbspt-form .legal-consent-container a {text-decoration: underline; border: none} /* White Hubspot forms */ .white_form .hbspt-form {color: #222} .white_form .hbspt-form label {color: #222} .white_form .hbspt-form input:not([type='submit']), .white_form .hbspt-form select {box-shadow: rgba(0,0,0,0.09) 2.01px 2.01px 3px 0} /* PDF download forms */ .brochure .hbspt-form, .brochure .form_title {background: #048497; padding: 20px; border-radius: 0 0 4px 4px} .matrix .brochure .hbspt-form, .matrix .brochure .form_title {background: #7ea2a5} .matrix .hbspt-form input[type="submit"] {background: #e8ab2c} .indie .brochure .hbspt-form, .indie .brochure .form_title {background: #584a84} .indie .hbspt-form input[type="submit"] {background: #57ad9c} .brochure .form_title {font-size: 22px; display: block; color: #fff; padding-bottom: 0; text-align: center; border-radius: 4px 4px 0 0} .brochure .hbspt-form input[type="submit"] {width: 100%} .brochure .hbspt-form .legal-consent-container a {color: #fff} /* Side Hubspot form holder */ .side_img_form_holder {position: relative; padding: 10px 0 0; margin-bottom: -45px} .side_img_form_holder:before {content: ''; background: #dbeef1; width: 100%; position: absolute; top: 45px; bottom: 45px} .side_img_form_holder.inside {margin-bottom: -10px} .side_img_form_holder.inside:before {top: 20px; bottom: 10px} .side_img_form_holder .form {padding: 40px; margin: 0 auto; background-color: #fff; color: #fff; box-shadow: 0 0 35px 0 rgba(40, 43, 49, .2); position: relative; z-index: 1; max-width: 900px; background: #048497 bottom left no-repeat; box-sizing: border-box} .side_img_form_holder .form > .side_text {margin-right: 60px} .side_img_form_holder .form > .side_text h2 {color: #fff; margin-top: -4px; line-height: 1.2} .side_img_form_holder .form p {margin: 10px 0 0 0; line-height: 1.4} .side_img_form_holder .form p.center {margin: 10px 0 0 0} .side_img_form_holder .form p a {font-size: 13px; color: #fff; text-decoration: underline} .neo .side_img_form_holder .form {background-image: url('/images/landing-pages/philippines/college-demo-teal.jpg')} .matrix .side_img_form_holder:before {background: #c0d9db} .matrix .side_img_form_holder .form {background-color: #6a8285; background-image: url('/images/landing-pages/asia/matrix-form.png')} /* Resellers form */ .resellers_portal .hbspt-form label {padding: 7px 0 4px} .resellers_portal .hbspt-form input[type="submit"] {margin: 20px 0} .resellers_portal .hbspt-form input[type="text"], .hbspt-form input[type="email"], .hbspt-form input[type="number"], .hbspt-form select {width: 100% !important} .resellers_portal .submitted-message {box-sizing: border-box; border-radius: 10px; text-align: center; background-color: rgb(232, 240, 254); padding: 117px 0} .resellers_portal .submitted-message p {font-size: 18px !important} @media screen and (max-width: 1360px) { .side_img_form_holder .form {padding: 30px} } @media screen and (max-width: 920px) { .side_img_form_holder .inside {margin-bottom: 1px} } @media screen and (min-width: 768px) { .side_img_form_holder .form {display: flex} .side_img_form_holder .form > div:nth-child(2) {flex: 0 0 420px; min-height: 362px} } @media screen and (max-width: 767px) { .side_img_form_holder .form {padding-bottom: 260px !important; padding: 30px 20px} .side_img_form_holder .form form {margin-top: 20px !important} .side_img_form_holder .form > div.side_text {margin: 0} } @media screen and (max-width: 559px) { .resellers_portal .submitted-message {padding: 30px 0} } /* -- Full Column setup -- */ .fullColumn {border-bottom: 1px solid #e2e0e0; background: #f9f9f9; box-shadow: inset 0 2px 2px rgba(0,0,0,.1), inset 0 -2px 2px rgba(0,0,0,.1)} .fullColumn:nth-child(2n + 2) {background: #fff; box-shadow: none} .fullColumn div.twoThirds {overflow: hidden; margin: auto; padding: 20px; max-width: 1120px; -moz-box-sizing: border-box; box-sizing: border-box} .fullColumn img { border: 1px solid #e2e0e0; width: 100%; max-width: 340px; height: auto; margin-bottom: 20px; -moz-box-sizing: border-box; box-sizing: border-box; } .twoThirds > p {margin-bottom: 0;} .fullColumn div.twoThirds ul.twoColumnWrap li:first-child { margin-top: 30px; } .embed-max-size { margin: 20px auto 0; max-width: 640px; max-height: 480px; border-radius: 10px; overflow: hidden; } .embed-container { position: relative; padding-bottom: 56.25%; /* 75%; 4/3 ratio / 56.25%; 16/9 ratio */ height: 0; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Sitemap */ body.newSite:not(.home) .sitemap #contentBody {max-width: 1000px} .sitemap ul {margin-left: 20px !important} .sitemap .twoColumnText a {text-decoration: underline} .sitemap .twoColumnText .pdf_list ul a {position: relative; padding-left: 23px; display: inline-block} .sitemap .twoColumnText .pdf_list ul a i {position: absolute; left: 0} /* Info page - privacy, careers, cookie policy, GDPR, terms */ .info_page #contentBody {padding-top: 45px !important} .info_page #contentBody > h2:first-child {margin-top: 0} .info_page h2 {font-size: 26px; margin-top: 20px} .info_page h3 {font-size: 19px; margin-top: 20px} .info_page h4 {font-size: 18px; margin-top: 20px} .info_page #contentBody ul {list-style: disc; margin-left: 40px} .info_page #contentBody ul li {line-height: 1.4} .info_page #contentBody a {text-decoration: underline; word-break: break-word; word-wrap: break-word;/*word-wrap: IE and Edge*/} .info_page #contentBody a:hover {opacity: .6} .careers_btn {background-color: #eee; margin-top: 2px; transition: .4s; border-radius: 4px; line-height: 1.4; display: flex; justify-content: space-between; align-items: center; text-decoration: none !important; padding: 12px 20px} .careers_btn:hover {background-color: #e2e2e2; opacity: 0.9 !important} .careers_btn h3 {margin-top: 0} .careers_btn span {color: #222} @media screen and (max-width: 768px) { .info_page table {font-size: 14px} } @media screen and (max-width: 500px) { .info_page #contentBody {padding-top: 15px !important} .info_page h2 {font-size: 23px} .info_page h3 {font-size: 16px} .info_page h4 {font-size: 15px} .info_page table {font-size: 13px} } /* Team grid */ .team_grid {display: flex; justify-content: center; flex-flow: row wrap; margin: 0 auto; width: 980px; max-width: 100%; text-align: center} .team_grid > div {width: 33%; max-width: 300px; font-size: 17px; padding: 10px 10px 20px; box-sizing: border-box} .team_grid > div img {max-width: 200px; margin: 0 auto 10px; display: block; border-radius: 50%} .team_grid > div span {display: inline-block} .team_grid > div span:first-of-type {border-bottom: 1px solid #e0e0e0; padding: 5px 14px; margin-bottom: 5px; background: #999; color: #fff; border-radius: 51px} .team_grid > div span:nth-of-type(2) {font-size: 15px} .team_grid > div span:last-of-type {color: #ababab; font-size: 15px} .team_grid.four {width: 1100px} .team_grid.four > div {width: 25%} .team_grid.five {width: 1300px} .team_grid.five > div {width: 20%; padding: 20px 20px 30px} .team_grid.five > div img {max-width: 170px} @media screen and (max-width: 1100px) { .team_grid > div img {max-width: 150px} .team_grid.five > div {width: 33%} } @media screen and (max-width: 767px) { .team_grid.four, .team_grid.five {width: 500px; max-width: 100%} .team_grid.four > div, .team_grid.five > div {width: 45%; margin-bottom: 20px} .team_grid > div {font-size: 15px} } @media screen and (max-width: 600px) { .team_grid {margin-top: 10px; width: 200px} .team_grid > div, .team_grid.four > div, .team_grid.five > div {width: 100%; max-width: 100%; margin-top: 20px} } /* EdTech Centre */ .edtech h2 {font-size: 34px} .edtech .edtech_intro h2 {font-size: 30px} .edtech .tour_section h3 {font-size: 30px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #222} .edtech .centre_text {border-top: 1px solid #e2e0e0; padding: 60px 35px 0; text-align: center; background: linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,0))} .edtech .centre_text p {font-size: 18px !important; line-height: 1.7; max-width: 700px; margin: 10px auto 0}/*match tour text*/ .edtech .team {padding-bottom: 50px; margin-top: 30px} .edtech .team .centre_text {padding-bottom: 50px} .edtech .side_img_form_holder h2 {font-size: 26px} @media screen and (max-width: 1024px) { .edtech h2 {font-size: 30px} .edtech .edtech_intro h2, .edtech .tour_section h3 {font-size: 26px} } @media screen and (max-width: 991px) { .edtech .centre_text {padding: 30px 15px} .edtech .centre_text p {font-size: 16px !important} } @media screen and (max-width: 479px) { .edtech .centre_text {padding-bottom: 0} .edtech .centre_text p {font-size: 15px !important} } /* Google and Microsoft tools */ .edu_tools .ms_logo_spacer {height: 10px} .edu_tools .ms_logo {border: 1px solid #e2e2e2; border-radius: 3px; padding: 10px 10px 5px; margin: 0 auto; background-color: #fff; max-width: 230px; position: relative; margin-top: -30px} .edu_tools .ms_logo img {max-width: 100%} .edu_tools .tools_icons {border: 1px solid #eaeaea; border-radius: 50%; width: 65px; margin-bottom: 8px; padding: 5px} @media only screen and (max-width: 768px) { .edu_tools .ms_logo {max-width: 150px} .edu_tools .tools_icons {width: 50px} } /* Cookies */ .edu2 .popover-stack.policy:not(.with-blocker) .popover-content * {font-size: 13px; margin: 0} .edu2 .popover-stack.policy:not(.with-blocker) .popover-content p a {color: #fff; text-decoration: underline} .edu2 .popover-stack.policy:not(.with-blocker) .popover-footer button {margin-top: 0; font-size: 14px; line-height: 30px} @media only screen and (min-width: 781px) { .edu2 .popover-stack form {display: flex; max-width: 900px; margin: auto} .edu2 .popover-stack.policy:not(.with-blocker) .popover {display: flex; padding: 0; height: 80px} .edu2 .popover-stack.policy:not(.with-blocker) .popover-content {position: static; padding: 0; height: 100%} .edu2 .popover-stack.policy:not(.with-blocker) .popover-footer {position: static; width: auto} } @media only screen and (max-width: 780px) { .edu2 .popover-stack {min-width: 0} .edu2 .popover-stack.policy:not(.with-blocker) .popover {padding: 15px} .edu2 .popover-stack.policy:not(.with-blocker) .popover-content {height: calc(100% - 60px)} .edu2 .popover-stack.policy:not(.with-blocker) .popover-footer {position: static} } /* Careers */ .careers ul {margin: 1em 0} .careers .benefits_block {max-width: 900px; margin: 30px auto 10px} .careers .benefits_block h2 {margin: 0 0 20px; text-align: center} .careers .benefits_block > div > div {display: flex; align-items: center; margin-bottom: 20px} .careers .benefits_block > div img {width: 70px} .careers .benefits_block > div img[src*="responsive"] {width: 80px; margin-left: -5px} .careers .benefits_block > div strong {display: block; margin-bottom: 5px} body:not(.portal) .accordion_heading {padding: 10px 18px} body:not(.portal) .accordion_heading * {margin: 0 !important} body:not(.portal) .accordion_heading div span {margin-left: auto !important; font-size: 15px} body:not(.portal) .accordion_body {padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out} body:not(.portal) .accordion_body > *:first-child {margin-top: 18px} body:not(.portal) .accordion_body > ul:first-child {margin-bottom: 18px} @media (min-width: 768px) { .careers .benefits_block > div {column-count: 2; column-gap: 20px} } @media (max-width: 979px) { .careers .benefits_block > div span {font-size: 15px} } @media (min-width: 980px) { .careers .benefits_block {padding: 25px 25px 15px} .careers .benefits_block > div img {width: 90px} .careers .benefits_block > div img[src*="responsive"] {width: 100px; margin-left: -5px} } @media (max-width: 450px) { body:not(.portal) .accordion_heading div {display: block} } /* FAQ */ .faq .lrgTopHeading + .accordion_heading {margin-top: 35px} .faq .accordion_heading, .faq .accordion_body h3 {font-size: 19px} .faq .accordion_body {padding-left: 0} .faq .accordion_body li:first-child {margin-top: 0 !important} .faq .accordion_body li:not(:first-child) {margin-top: 15px !important} .faq .accordion_body li a {text-decoration: underline} @media (min-width: 768px) { .faq .accordion_body ul {column-count: 2; column-gap: 50px} .faq .accordion_body ul:not(.break_inside) li {break-inside: avoid} } @media (max-width: 767px) { .faq .accordion_heading, .faq .accordion_body h3 {font-size: 16px} } /* Partners */ .partners .subText {max-width: 880px; margin: 0 auto 30px; line-height: 1.5; font-size: 17px !important} .partners_list {display: flex; justify-content: center; flex-wrap: wrap; max-width: 1260px; margin: auto} .indie .partners_list {max-width: 900px} .neo .partners_list {max-width: 1200px} .partners_list:not(:last-child) {margin-bottom: 20px} .partners_list > * {border: 1px solid #e2e2e2; border-radius: 10px; padding: 0 10px 10px; max-width: 200px; margin: 0 8px 13px; text-align: center} .partners_list > * img {max-width: 100%; height: 70px} .partners_list > * span, .partners_list > * a {display: block; font-size: 14px} .partners .alternateBg a {text-decoration: underline} .partners_list > * span {color: #a2a2a2} .partners_list.partner_logos > * {max-width: 210px; padding: 10px 10px 5px} .partners_list.standards > * {width: auto; max-width: 100%; text-align: center; padding: 5px 10px; margin: 0 8px 40px; font-size: 22px; color: #afafaf} @media (max-width: 560px) { .partners .subText {font-size: 15px !important} .partners_list > * {max-width: 100px; margin: 0 4px 20px} .partners .alternateBg h2 {margin-bottom: 30px} .partners_list.standards > * {margin: 0 10px 20px; font-size: 18px} } /* Languages */ .language_list {display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 900px; margin: 40px auto 20px;} .language_list > * {border: 1px solid #e2e2e2; border-radius: 3px; padding: 5px 10px; margin-bottom: 10px; display: flex; align-items: center; width: 100%} .language_list > * img {margin-right: 10px; width: 16px; height: auto; flex-shrink: 0} @media (min-width: 400px) { .language_list > * {width: calc(50% - 30px)} } @media (min-width: 768px) { .language_list > * {width: calc(33% - 30px)} } @media (min-width: 980px) { .languages #contentWrap .lrgTopHeading {font-size: 26px} .language_list > * {width: calc(25% - 30px)} } /* GDPR */ .gdpr #contentBody ol {margin: 0 0 0 50px !important} .gdpr #contentBody li {line-height: 1.6} .gdpr_highlight {background-color: #ececec; padding: 10px 15px; border-radius: 10px; display: inline-block; width: 800px; max-width: 100%; box-sizing: border-box} /* Sales */ .sales {background-color: #fff; display: flex; flex-direction: column; height: 100vh} .sales #wrapper {flex: 1 0 auto; min-height: auto} .sales #contentBody {max-width: 1000px; padding-bottom: 45px} .sales #contentBody #sales_body p:first-of-type {margin-top: 0} .sales #contentBody #sales_body ul {margin-left: 25px} .sales #contentBody #sales_body.sales_overview li:not(:first-child) {margin-top: 13px !important; line-height: 1.6} .sales #contentBody #sales_body.sales_overview ul li:before {top: 2px} .sales #contentBody #sales_body a {text-decoration: underline} .sales #contentBody #sales_body .sales_subheading {display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-top: 1px solid #efefef} .sales #contentBody #sales_body .sales_subheading h2 {display: flex} .sales #contentBody #sales_body .sales_subheading h2 a {position: relative; top: -2px} .sales #contentBody #sales_body .sales_subheading > a {text-align: right} .sales #contentBody #sales_body .sales_subheading ~ table {display: none} .sales #contentBody #sales_body table th[class] {color: #fff} .sales #contentBody #sales_body table a, .sales #contentBody #sales_body table .flex {display: flex; align-items: center; line-height: 19px} .sales #contentBody #sales_body table a i {flex: 0 0 20px} .sales #contentBody #sales_body table .flex a {display: inline-block} .sales #contentBody #sales_body .img_icon {overflow: hidden; height: 25px; display: inline-block; vertical-align: middle; margin-right: 10px; border-radius: 2px; border: 1px solid #e6e6e6; flex: 0 0 auto;} .sales #contentBody #sales_body .img_icon img {width: 25px} .sales footer {flex-shrink: 0; padding: 20px !important; text-align: center; background: #5e5f5f} .sales footer a {color: #fff; display: inline-block; margin: 0 10px} .sales footer a:hover {opacity: .7} .sales #contentBody #sales_body a[href*='/cypher/'], .sales #contentBody #sales_body a[href*='/cypher-learning/'], .sales #contentBody #sales_body a[href*='/CYPHER'] {color: #5e5f5f} .sales #contentBody #sales_body a[href*='/neo/'] {color: #009eb5} .sales #contentBody #sales_body a[href*='/indie/'] {color: #8573ce} .sales .gradient_block {border-radius: 10px; padding: 20px; margin-bottom: 20px} .sales .gradient_block * {color: #fff !important} .sales .gradient_block ul li:before {background-position: -40px -1400px !important} .sales .gradient_block:nth-child(3n+1) {background: linear-gradient(135deg, #d47134, #a94571)} .sales .gradient_block:nth-child(3n+2) {background: linear-gradient(135deg, #00afa6, #006c82)} .sales .gradient_block:nth-child(3n+3) {background: linear-gradient(135deg, #0d8198, #7658b1)} /* Dell Sales */ .loginPage.dell h1 {display: flex; justify-content: space-between; align-items: center; width: 280px} .sales.dell .mobileBar .flag {position: relative; z-index: 2; width: 16px; display: inline-block; margin-top: 2px; padding: 0 6px 1px; border-radius: 3px} .sales.dell .mobileBar .flag img {width: 100%} .sales.dell nav {justify-content: flex-end} .sales.dell nav > * {width: auto !important} .sales.dell nav .flag {margin: auto; padding: 0 4px} .sales.dell nav .flag a {display: inline-block; background-color: rgba(255,255,255,.1); padding: 0 6px; border-radius: 3px; line-height: 20px} html[lang="en"] .sales.dell .mobileBar .flag.en, html[lang="es"] .sales.dell .mobileBar .flag.es {background-color: rgba(0,0,0,.1)} html[lang="en"] .sales.dell nav .flag.en a, html[lang="es"] .sales.dell nav .flag.es a {background-color: rgba(255,255,255,.4)} html[lang="en"] .sales.dell .logout .es, html[lang="es"] .sales.dell .logout .en, html[lang="en"] .sales.dell .resellersNav .es, html[lang="es"] .sales.dell .resellersNav .en {display: none} .sales.dell #wrapper #contentHeader {background: linear-gradient(135deg, #3287c1, #155a89)} .sales.dell #contentBody p {margin-bottom: 20px} .sales.dell .image_block {width: 100%; display: flex; flex-flow: row wrap; justify-content: center} .sales.dell .image_block img {width: 45%; margin: 25px 2% 0; min-width: 270px; max-width: 100%; border-radius: 4px} .sales.dell #contentBody #sales_body .guides a {text-decoration: none} @media screen and (max-width: 760px) { .sales.dell #contentBody #sales_body .guides {text-align: center} } /* Small sign up form */ #contentFooter {text-align: center; border-bottom: 2px solid #fff; padding: 80px 20px; clear: both} .resellers #contentFooter {padding-top: 60px; padding-bottom: 60px;} #contentFooter #contentFooterInner {max-width: 1120px; width: 100%; position: relative} #contentFooter #contentFooterInner h2 {color: #fff; margin-bottom: 30px} .smlSignup p {white-space: normal; margin: -5px 0 5px !important; font-size: 18px; line-height: 24px; text-align: center} .smlSignupSelect, .smlSignupButton {border-radius: 4px; width: 100%; margin-bottom: 15px} .smlSignup select {height: 44px; top: -1px; width: 100%} .smlSignupButton:disabled {opacity: 0.3; cursor: default} .smlSignupButton:not(:disabled):hover {opacity: 0.8} .smlSignup .switch_msg {border: 1px dashed #222; color: #222; padding: 9px 18px; margin: 0 0 15px; border-radius: 3px; display: none} .smlSignup .switch_msg, .smlSignup .switch_msg a {font-size: 16px} .smlSignup .sml_signup_radios {margin: 20px 0 30px} .smlSignup .sml_signup_radios label {position: relative; padding-left: 32px} .smlSignup .sml_signup_radios label:first-of-type {margin-bottom: 20px} .smlSignup .sml_signup_radios label:before {position: absolute; top: 50%; left: 0px; margin: -9px 0 0; border-color: #909090} .sliderFormHolder {background: #fff; padding: 50px; width: 320px; max-width: 70%} .sliderFormHolder .smlSignup {text-align: center; white-space: normal} .sliderFormHolder .smlSignupButton, a.smlSignupButton {padding: 6px 15px 5px; margin: 0; line-height: 33px; font-size: 19px; box-sizing: border-box; -moz-box-sizing: border-box} a.smlSignupButton {color: #fff} a.smlSignupButton:hover {background-color: rgba(255,255,255,0.3)} #facebox .smlSignup .smlSignupButton {margin: 0 !important} #facebox.valignModal {transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); top: 50% !important} #facebox.valignModal .popup {padding-top: 9px} /* Plans */ .pricing .plan_number div sup {font-size: 12px; margin-top: -2px} .plans_comparison_intro {max-width: 800px; margin: 0 auto 60px} #contentWrap .plans_comparison_intro p {font-size: 17px; text-align: center} .plans_comparison_intro p a {text-decoration: underline} @media screen and (max-width: 768px) { #contentWrap .plans_comparison_intro p {font-size: 16px} } @media screen and (max-width: 560px) { #contentWrap .plans_comparison_intro p {font-size: 15px} } /* Demo */ .demo #contentBody > div {width: 1088px; max-width: 100%; margin: auto; padding-bottom: 40px} ul.imgIcons {text-align: center} ul.imgIcons li { width: 128px; margin: 0 6px 8px; padding: 0 !important; display: inline-block; vertical-align: top } .about ul.imgIcons {padding: 20px 0 0} .about ul.imgIcons li {padding: 0 0 25px 0} ul.imgIcons li:before {display: none} ul.imgIcons li a {display: inline-block; width: 100%; color: #fff; font-size: 14px; box-shadow: 1px 1px 4px rgba(0,0,0,0.2); border-radius: 10px; overflow: hidden; background-color: #F5F5F5} ul.imgIcons li a > span, ul.imgIcons li > span {display: block; padding: 5px 5px 6px} .demo #contentBody .twoColumnWrap li:first-child, .demo #contentBody .twoColumnWrap + ul.twoColumnWrap li:first-child {margin-top: 25px} .imgIcons li img, .ourValues .iconNav a { -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity: 0 } .imgIcons.animate li img, .ourValues .iconNav.animate a {opacity: 1} .imgIcons li img {width: 100%; height: auto; margin-bottom: -4px} .contact ul.imgIcons {padding: 20px 0} .contact ul.imgIcons li a > span {display: table; padding: 3px 5px 4px; width: 100%; box-sizing: border-box} .contact ul.imgIcons li a > span span {display: table-cell; vertical-align: middle; height: 36px; line-height: 17px} /* Resellers */ .resellers.narrow_header #parallaxHeader #contentHeader {margin-bottom: 0} .resellers .colorBtn {margin: 10px 0 5px} .resellers .alternateBg:nth-of-type(2n+2) {border: 0; background-color: transparent; box-shadow: none} .resellers .alternateBg:nth-child(2) {padding-top: 0; padding-bottom: 20px; overflow: hidden} .resellers .contentBlock.floatR {margin-bottom: 35px} .resellers .contentBlock p {margin-bottom: 15px} .resellers #contentWrap ul.imgIcons li {color: #fff; font-size: 14px; box-shadow: 1px 1px 4px rgba(0,0,0,0.2); border-radius: 10px; overflow: hidden; background-color: #F5F5F5} #facebox form#reseller {max-width: 370px; margin: 0 auto} #facebox form#reseller *, #facebox .searchPortalForm input[type="button"] {width: 100%; border-radius: 3px} #facebox form#reseller input[type="text"], #facebox form#reseller select, #facebox form#reseller textarea, #facebox .searchPortalForm input[type="text"] {height: 44px; padding: 7px 10px; margin: 1px 0 11px} #facebox form#reseller select {color: #a9a9ab} #facebox form#reseller select option, #facebox form#reseller select.darkText {color: #222} #facebox form#reseller textarea {height: 102px; float: left} #facebox form#reseller p.terms {position: relative; margin-top: 0} #facebox form#reseller p.terms #agree + label {padding-left: 28px; font-size: 15px; box-sizing: border-box; user-select: none} #facebox form#reseller p.terms #agree + label:before {position: absolute; top: 6px; left: 0} #facebox form#reseller button, #facebox .searchPortalForm input[type="button"] {padding: 10px; margin: 1px 0; height: auto} #facebox .searchPortalForm input[type="button"] {line-height: 28px} #facebox form#reseller button:not(:disabled):hover {opacity: 1; background-color: #0f99ad} .matrix #facebox form#reseller button:hover {background-color: #4f7a81} #facebox form#reseller .invalid_format {border-color: red} @media screen and (min-width: 768px) and (max-width: 1090px) { .resellers #contentBody {margin-right: 15px} } .resellers .mapHolder {clear: both; margin-bottom: 2px} .neo .resellers .mapHolder {background: url('/images/responsive/resellers/mapBg-neo.jpg') 50% 0 / cover fixed no-repeat} .matrix .resellers .mapHolder {background: url('/images/responsive/resellers/mapBg-matrix.jpg') 50% 0 / cover fixed no-repeat} .resellers .mapHolder > div { position: relative; margin: auto; width: 100%; max-width: 800px } .resellers .mapHolder img {width: 100%; height: auto} .resellers #contentWrap .mapHeader {color: #fff; margin-bottom: 40px; text-align: center} .resellers .mapHolder a.marker { width: 2%; height: 4%; border-radius: 50%; border: 3px solid #ffffff; position: absolute; background: linear-gradient(#f4d31f, #e8a322); -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } .resellers .mapHolder a.marker.blue {background: linear-gradient(#38a4be, #3d6d9a)} .resellers .mapHolder a.marker.green {background: linear-gradient(#50ac89, #2b7967)} .resellers .mapHolder a.marker.pink {background: linear-gradient(#f24ec6, #a651ad)} .resellers .mapHolder a.marker + div { background-color: #fff; padding: 7px 9px 8px; text-align: left; position: absolute; opacity: 0; z-index: -1; cursor: default; -webkit-transition: opacity 0.6s ease; -moz-transition: opacity 0.6s ease; transition: opacity 0.6s ease } .resellers .mapHolder a.marker:hover + div { opacity: 1; z-index: 1000; } .resellers .mapHolder a.marker + div img { width: auto; height: 35px; float: left; margin-right: 12px; display: none } .resellers .mapHolder a.marker + div span {color: #222; float: left} .resellers .mapHolder a.marker + div span span:last-child {color: #383838} .resellers .mapHolder a.marker + div .arrow { position: absolute; width: 10px; height: 14px; top: 10px; left: -10px; overflow: hidden } .resellers .mapHolder a.marker + div .arrow:after { position: absolute; width: 10px; height: 10px; top: 2px; left: 6px; content: ''; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background-color: #fff } .resellers .mapHolder a.marker + div.tooltipLeft .arrow {right: -10px; left: auto} .resellers .mapHolder a.marker + div.tooltipLeft .arrow:after {right: 6px; left: auto} .resellersNav ul ul {display: none} .resellersNav li {margin: 5px 0; border-left: 3px solid transparent} .resellersNav li > * {color: #9a9a9a; padding: 0 27px 0 13px} .resellersNav li > span {color: #9a9a9a} .resellersNav li a.toggleList {display: flex; justify-content: space-between} .resellersNav li li a {padding-left: 10px; font-size: 15px} .resellersNav + div {margin-top: 25px} .resellersNav + div p a, .resellers_portal ul.links a {text-decoration: underline} .resellers_portal ul.links a {color: #222} .resellers_portal ul.links a:hover {opacity: .8} .resellers_portal .guides a {width: 224px; max-width: 224px} .resellers_portal .guides.landscape a, .sales .guides.landscape a {width: 320px; max-width: 320px} .resellers_portal a.infographic div {height: 248px} .resellers_portal iframe {margin: 0 1.7%} .resellers_portal .videos .fullColumn div.twoThirds {padding: 14px 2px} .resellers_portal .siteRibbon {display: none} /* Resources */ .resources p.subText {margin-top: 20px} .resources .auto_height {height: auto !important} .resources .fullColumn div.twoThirds, .fullColumn.videos {padding: 40px 20px} .resources .brochures div[class*='blocks'] a {width: 224px} .resources .brochures p.subText > a {background: transparent; text-decoration: underline; opacity: 1; box-shadow: none; margin: 0} .resources .brochure_blocks, .resources .guide_blocks, .resources .whitepaper_blocks {height: 313px; overflow: hidden} .resources .show_resources {margin-top: 10px} .resources .show_resources a {box-shadow: none; margin: 0} .resources .brochures div[class*='blocks'] a:hover, .comparisonsBlocks a.contentBlock:hover, .infographic_blocks > a:hover, .webinar_blocks > a:hover {box-shadow: 5px 5px 16px rgba(0,0,0,0.26)} .resources .videos .grid {height: 0; overflow: hidden} .resources .videos .grid .video span {margin-top: 5px; display: inline-block; font-size: 17px} /* Resources infographics */ .resources #contentWrap .fullColumn {text-align: center} .resources #contentWrap .fullColumn p {font-size: 16px; margin-bottom: 30px} .resources .fullColumn img {border: 0; float: none; width: 100%; margin: 0} .resources .infographic_blocks {height: 310px; overflow: hidden} /* Resources webinars */ .webinar_blocks {height: 320px; overflow: hidden} .webinar_blocks a.contentBlock {width: 300px !important; padding: 0 !important; box-shadow: 1px 1px 4px rgba(0,0,0,0.2); overflow: hidden} .webinar_blocks a.contentBlock:hover {opacity: 1} .webinar_blocks a.contentBlock div > img {height: auto; margin: 0; transform: scale(1,1) !important} .webinar_blocks a.contentBlock div > span {text-align: left !important; box-sizing: border-box} .webinar_blocks a.contentBlock div > .webinar_name {font-size: 15px; flex: 1; padding: 9px 13px 10px} .webinar_blocks a.contentBlock div > .base_bar {flex-grow: 0 !important; margin: 0 13px; padding: 10px 0; justify-content: space-between !important; font-size: 14px; color: #fff; border-top: 1px solid rgba(255,255,255,.2)} .brochure.webinar .floatingIntro .lrgTopHeading {margin-bottom: 15px !important} .brochure.webinar .brochure_header_buttons {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start} .brochure.webinar .brochure_header_buttons .shareLinks {margin-right: 0; margin-left: 0} .brochure.webinar .brochure_header_buttons .webinar_date {border-radius: 3px; padding: 9px 12px; font-size: 16px; order: 2; margin: 1px 0 0 25px; background-color: #ececec} .brochure .hosted_by, .brochure .videos {max-width: 500px; box-shadow: 0 0 22px rgba(0,0,0,0.1); padding: 30px; margin: auto; color: #fff} .brochure.webinar .videos {box-shadow: none; border-radius: 4px} .brochure .videos {padding: 20px} .brochure .hosted_by .flex {display: flex; align-items: center} .brochure #contentWrap .hosted_by .host_heading, .brochure #contentWrap .videos .video_heading {font-size: 20px; text-align: center; margin: 0 0 10px; color: #fff} .brochure .hosted_by img {margin-right: 20px; border-radius: 50%; box-shadow: 0 0 20px rgba(0,0,0,0.1)} .brochure .hosted_by .host_name {font-size: 17px} .brochure .hosted_by .host_title {margin-top: 8px} .brochure .hosted_by .host_info {font-size: 15px; line-height: 1.4; margin: 20px 0 0 !important} .brochure .videos p:not(.video_heading) {margin: 5px 0} /* Resources videos */ .videos .rev_slider {border: 1px solid #e0e0e0} .videos .tp-videolayer iframe {border: 0} .videos .fullwidthbanner-container .fullwidthabanner {background: #26292b} .videos .rs-fullvideo-cover {pointer-events: none} .videos .gyges .tp-tab-content {padding-left: 15px} .videos .gyges .tp-tab:hover, .videos .gyges .tp-tab.selected {background: transparent} .videos .tp-tabs {background: none !important} .videos .tp-tab {border: 0; margin: 0 2px} .videos .tp-tab:before {content: ''; background-color: #e0e0e0; width: 90%; height: 2px; position: absolute; bottom: 0; left: 0} .videos .tp-tab:hover, .videos .tp-tab.selected {background: none} .videos .gyges .tp-tab-title {margin-top: 5px; color: #222} .videos .tp-tab-title span {white-space: nowrap} .videos .tparrows.noSwipe {line-height: 36px; padding-left: 5px; width: 35px} .videos .tparrows.noSwipe:before {content: ''} .videos .tp-leftarrow.tparrows i.arrowRight, .videos .tp-rightarrow.tparrows i.arrowLeft {display: none} .videos .slotholder {transform: translate3d(0, 0, 0) !important} iframe.resizelistener {margin: 0 !important} .infographics #contentBody {position: relative} .infographics #contentBody .shareLinks {position: absolute; left: 61%; margin-left: 47px} .infographics #contentBody .shareLinks.fixed {position: fixed; z-index: 1} .infographics #contentBody > img {max-width: 100%; margin-bottom: 30px; border: 1px solid #c8c8c8} .infographics #contentBody li {line-height: 22px} .infographics #contentBody a:not(.button) {text-decoration: underline} .infographics .infographic_text .infographic_heading {font-size: 20px; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; margin-bottom: 20px} .infographics .infographic_text h3 {font-size: 18px; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto} .infographics #contentBody .infographic_text ol {margin-left: 15px} .infographics #contentBody .infographic_text ol ol, .infographics #contentBody .infographic_text ul {margin-left: 35px !important} /* ShareLinks */ .shareLinks {background-color: #e2e2e2; display: inline-block; margin-bottom: 30px} .shareLinks > div {float: left; padding: 10px 12px 0} .shareLinks > span {float: left; text-align: center; display: inline-block; width: 40px; height: 40px} .shareLinks .st_facebook_large {background-color: #3b579d} .shareLinks .st_twitter_large {background-color: #00aced} .shareLinks .st_linkedin_large {background-color: #007bb6} .shareLinks .st_pinterest_large {background-color: #c72223} .shareLinks .st_googleplus_large {background-color: #d64431} .shareLinks .st_facebook_large .stLarge {border: 10px solid #3b579d} .shareLinks .st_twitter_large .stLarge {border: 10px solid #00aced} .shareLinks .st_linkedin_large .stLarge {border: 10px solid #007bb6} .shareLinks .st_pinterest_large .stLarge {border: 10px solid #c72223} .shareLinks .st_googleplus_large .stLarge {border: 10px solid #d64431} .shareLinks .stButton {margin:0} .shareLinks .stButton .stLarge {background: none !important; border-width: 11px 10px 10px 9px} /* Lists */ .edu2 #contentBody div:not(.optionsRibbon) ul.tickList { padding-left: 5px; } .edu2 #contentBody div:not(.optionsRibbon) ul.tickList li:before { width: 16px; height: 16px; background: #0fa679 url('/images/icons/transparent-tick.svg') no-repeat; top: 50%; left: -5px; margin-top: -8px; } .edu2.matrix #contentBody div:not(.optionsRibbon) ul.tickList li:before {background-color: #85ACAF;} .edu2 #contentBody ol, .edu2 .fullColumn ol { list-style: decimal outside; margin-left: 20px; } /* Site ribbon */ nav.mm-opened + .mm-page a.siteRibbon {left: -230px} a.siteRibbon {position: fixed; bottom: 10px; left: 0; z-index: 5; box-shadow: 0 0 10px rgba(0,0,0,0.2); text-align: center; padding: 10px; background-color: rgba(255, 255, 255, 0.65); border-radius: 0 50% 50% 0} a.siteRibbon img {vertical-align: bottom} @media screen and (max-width: 1600px) { a.siteRibbon.stop {left: -230px} } @media screen and (max-width: 767px) { a.siteRibbon {padding: 5px 5px 5px 10px} a.siteRibbon img {width: 90px; height: auto} } /*------------------- Forms -------------------*/ .signup #contentWrap, .contactSales #contentWrap {text-align: center; padding-top: 40px} .signup #contentWrap:before {background: url('/images/responsive/signup/shapes-overlay.png') 50% 0 no-repeat; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0} .signup #contentBody {background-color: #fff; display: inline-block; padding: 20px 50px 30px !important; margin: 30px 0 100px; border-radius: 7px; position: relative} .signup #contentWrap .lrgTopHeading {margin-top: 10px} form.signupForm, .contactForm {display: inline-block; text-align: left; margin: 20px 0} form.signupForm {margin: 5px 0} form.signupForm input, form.signupForm select, form.signupForm textarea, form.signupForm label {margin: 0; width: 100%} form.signupForm label {display: block; padding: 5px 0px; margin: 2px 0} form.signupForm .form_row {display: flex; margin-top: 10px} form.signupForm .left_column {margin-right: 30px} form.signupForm .form_msg {background-color: #73b7b0; color: #fff; padding: 9px 18px; width: 100%; text-align: center; margin: 15px 0; border-radius: 7px; box-sizing: border-box; display: none} form.signupForm .form_msg a {color: #fff} form.signupForm hr {margin: 20px 0 0} form.signupForm .agree_terms {display: flex; justify-content: space-between} form.signupForm .agree_terms > * {font-size: 14px} form.signupForm .agree_terms i {padding-top: 10px} form.signupForm .domain_wrapper, form.signupForm .password_wrapper {display: flex} form.signupForm .domain_wrapper input, form.signupForm .password_wrapper input {width: 0 !important; flex: 1; border-radius: 3px 0 0 3px} form.signupForm .domain_wrapper span, form.signupForm .password_wrapper button {border: 1px solid #ccc; border-radius: 0 3px 3px 0; border-left: none; padding: 5px 6px 0px} form.signupForm .password_wrapper button {background-color: transparent; margin: 0; padding: 0 0 0 7px; line-height: 1} form.signupForm .password_wrapper button:hover {opacity: 1} form.signupForm .password_wrapper button:focus {box-shadow: none} form.signupForm .password_wrapper input + button > * {display: none; margin: 0 !important} form.signupForm .password_wrapper input[type='text'] + button > *:last-child {display: inline-block} form.signupForm .password_wrapper input[type='password'] + button > *:first-child {display: inline-block} form.signupForm button {font-size: 20px; padding: 5px 30px; margin: 40px auto 0; display: block} .contactForm textarea, .contactForm input[type='text'], .contactForm input#subject {max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box} .contactForm select {margin-right: 0} .contactForm span.formColumn {display: block; margin: 10px 0 0 0} .contactForm label {display: block; line-height: 17px} .contactForm a:not(.button), form.signupForm a {text-decoration: underline} .contactForm .navButtons a {background-color: #5e5f5f} .contactForm input#subject {width: 100%} .contactForm label[for='agree'], form.signupForm label[for='agree'] {user-select: none; line-height: 1.4; width: auto} .contactForm .required_text {color: #888; font-size: 15px; white-space: nowrap} .contactForm button {float: right; padding: 4px 22px 4px; margin-top: 10px; display: block} form.loginForm {font-size: 15px; display: block} nav.mainNav li > .dropDown form.loginForm > div { white-space: nowrap; display: table; width: 100%; } nav.mainNav li > .dropDown form.loginForm input[type="text"], nav.mainNav li > .dropDown form.loginForm input[type="password"] { vertical-align: top; } nav.mainNav li > .dropDown form.loginForm label[for="userid"], nav.mainNav li > .dropDown form.loginForm label[for="password"] { display: table-cell; text-align: left; padding: 1px 14px 0 0; vertical-align: top; } nav.mainNav li > .dropDown form.loginForm > div:last-child {font-size: 14px} nav.mainNav li > .dropDown form.loginForm label.emptyLabel {margin-right: 13px} nav.mainNav li > .dropDown form.loginForm a {vertical-align: middle} nav.mainNav li > .dropDown form.loginForm input[type="button"] {margin: -2px 0 0 17px} #contentBody > .alert_block {margin-top: 15px} /* ActiveCampaign forms */ form._inline-form label {width: auto; display: inline; margin: 0} form._inline-form input[type="checkbox"] {margin: 0 4px 0 0; clip: inherit; height: auto; width: auto; position: relative; top: -1px} /*------------------- Icons -------------------*/ i {margin: 0 6px 0 0} dl i {margin-top: -3px; margin-right: 0} /*------------------- Footer -------------------*/ footer {width: 100%; height: auto; padding: 20px 14px 5px; box-sizing: border-box} footer.regional_site_footer {padding: 20px 14px} footer.regional_site_footer .address {font-size: 14px} footer + footer {padding: 14px 20px; overflow: hidden} body.portal.home-carousel footer {border-top: 3px solid #fff} footer div {display: inline-block; vertical-align: top; margin: 0 -4px 0 0} footer .footerLinks div {width: 100%} footer .footerLinks .heading {width: 100% !important} footer div:not(.footerBase) .language, body.loginPage .language, body.mobileApp .language { padding: 7px 13px; display: inline-block; margin-top: 7px; white-space: nowrap; border-radius: 3px } footer .language strong, body.loginPage .language strong, body.mobileApp .language strong { font-size: 20px; line-height: 14px; margin-left: 8px; } footer .newsletterForm { max-width: 355px; padding: 0 6px; margin: 0; display: block; } footer .newsletterForm { margin-top: 20px } footer .newsletterForm, footer .newsletterForm div, footer .newsletterForm div input, footer .appLinks { width: 100%; box-sizing: border-box } footer .newsletterForm p { color: #fff; font-size: 16px; margin-top: 0 } footer .newsletterForm div { padding-right: 80px; position: relative } footer .newsletterForm div input { margin: 0; padding: 9px 6px; transition: background 0.2s linear; border: 0; height: 40px; -webkit-appearance: none; border-radius: 0 } footer .newsletterForm div input:focus { background-color: #efefef } footer .newsletterForm button { margin: 0; padding: 4px 10px 3px; position: absolute; top: 0; right: 0; -webkit-appearance: none; outline: none; font-size: 14px } footer .newsletterForm button:hover { opacity: 1 } footer .appLinks {padding: 5px 0 0; white-space: nowrap} footer .appLinks a {width: 40%; box-sizing: border-box; padding: 2px 3px; float: left} footer .appLinks img {width: 100%; height: auto} @media screen and (min-width: 980px) { footer .appLinks a {float: right} } footer .footerBase { border-top: 1px solid #c7c7c7; padding: 12px 5px 8px; margin-top: 25px; width: 100%; font-size: 14px } footer .footerBase a, footer .footerBase span { line-height: 1.5; white-space: nowrap; display: inline-block; padding: 4px 0 } footer .footerBase > a, .neo footer .footerBase span:not(:last-child) {margin-right: 15px} #socialBlocks li { margin: 0 6px 16px; display: inline-block; text-align: center } #socialBlocks li {width: 44px} footer .footerLinks.oneIcon + div #socialBlocks li { margin: 0 0 16px; /* One social icon */ } #socialBlocks li a {display: block; border-radius: 50%; padding: 10px 10px 12px} body.portal.twoColumnPage footer, body.portal.threeColumnPage footer { border-top: 0; } @media screen and (min-width: 980px) { .edu2 footer:not(.regional_site_footer) #socialBlocks {text-align: right; margin-left: 5px} } /* Regional site footer */ footer.regional_site_footer {padding: 40px 0 20px !important} footer.regional_site_footer nav.footerNav {max-width: 1400px} footer.regional_site_footer nav.footerNav div li {font-size: 18px !important} footer.regional_site_footer nav.footerNav div ol a {color: #222; padding: 0} footer.regional_site_footer .footerLinks + div {text-align: right} footer.regional_site_footer .appLinks a {float: right; width: 33%} footer.regional_site_footer .address {margin: 0 0 10px} footer.regional_site_footer .address span {font-size: 14px} @media screen and (max-width: 1450px) { footer.regional_site_footer nav.footerNav {margin: 0 40px} } @media screen and (max-width: 767px) { footer.regional_site_footer nav.footerNav {margin: 0 10px} footer.regional_site_footer nav.footerNav > div:last-child {padding: 0 40px 0 0} } /* =================== Navigation ===================*/ nav.mainNav {width: auto; position: absolute; top: 0; right: 30px} nav.mainNav> * > li {position: relative; display: inline-block; margin: 0 -5px 0 0; height: 100%; vertical-align: top} nav.mainNav> * > li > a {height: 100%; display: flex; align-items: center} nav.mainNav li > .dropDown {min-width: 204px; position: absolute; height: 0; opacity: 0; overflow: hidden; border-radius: 0 0 4px 4px; padding: 5px; border: 1px solid #e0e0e0; border: 1px solid var(--table-border-color)} nav.mainNav li:hover > .dropDown, nav.mainNav li > a:focus ~ .dropDown, nav.mainNav li:focus-within > .dropDown {height: auto; opacity: 1} nav.mainNav .dropDown ul {position: relative; z-index: 1} nav.mainNav .dropDown ul li {display: block; line-height: 2.8} nav.mainNav .dropDown ul li a {height: 100%; display: block; padding: 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 3px} nav.mainNav .dropDown ul li a:hover {background: rgba(0,0,0,.06); background: var(--opacity-6-bg-color)} /* =================== Custom Portal CSS ===================*/ @supports (display: block) { /* IE11 can't see this but other browsers can - new flex layout */ .portal #wrapper {display: flex; flex-direction: column; min-height: 100vh; padding-top: 0} .portal #contentWrap, .portal #contentBody {flex: 1 0 auto; width: 100%; min-height: 0; overflow-y: visible} .portal footer {flex-shrink: 0; margin-top: auto} } .portal header, .portal header .dropDown, .portal.transparent_header header:not(.scrolled) nav > * > li:hover .arrow:before {background: #fff; background: var(--bg-color)}/* to make editable */ .portal:not(.transparent_header) header nav.mainNav > * > li > a:hover, .portal:not(.transparent_header) header nav.mainNav > * > li.selected, .portal nav.mainNav .dropDown:before, .portal.transparent_header header:not(.scrolled) nav > * > li:hover .arrow:after {background-color: rgba(0,0,0,.02)} .portal nav.mainNav .dropDown:before {content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0} .portal.transparent_header header:not(.scrolled) {background-color: transparent; border-bottom-width: 0; border-top-color: transparent; box-shadow: none} .portal.transparent_header header:not(.scrolled) nav > * > li > a, .portal.transparent_header header:not(.scrolled) .customLogo span {color: #fff; transition: all .15s ease-in-out} .portal.transparent_header header:not(.scrolled) nav > * > li:not(.portalCart):not(.loginHolder):hover > a, .portal.transparent_header header:not(.scrolled) nav > * > li:not(.portalCart).selected > a, .portal.transparent_header header:not(.scrolled) nav > * > li.portalCart:hover > a img, .portal.transparent_header header:not(.scrolled) nav > * > li.portalCart.selected > a img {color: #fff; opacity: .6} .portal.transparent_header header:not(.scrolled) nav > * > li.loginHolder > a {box-shadow: 0 0 6px rgba(0,0,0,.2)} .portal.transparent_header header:not(.scrolled) nav > * > li:hover .arrow {overflow: hidden; position: absolute; z-index: 1; left: 0; bottom: -1px; width: 100%; height: 20px} .portal.transparent_header header:not(.scrolled) nav > * > li:hover .arrow:before, .portal.transparent_header header:not(.scrolled) nav > * > li:hover .arrow:after {content: ''; width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); position: absolute; bottom: -8px; left: 50%; margin-left: -8px; border: 1px solid #e0e0e0; border: 1px solid var(--table-border-color)} .portal.transparent_header header:not(.scrolled) nav.mainNav .dropDown {border-radius: 4px} .portal.transparent_header header:not(.scrolled) .top_logo, .portal.transparent_header header.scrolled .scrolled_logo {display: block} .portal:not(.transparent_header) header .top_logo, .portal.transparent_header header.scrolled .top_logo, .portal.transparent_header header:not(.scrolled) .scrolled_logo {display: none} .portal nav.mainNav .portalCart > a {padding: 0 15px} .portal nav.mainNav .portalCart > a .newAlert {padding: 4px; display: inline-block; position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -5px} .portal header nav.mainNav .loginHolder {display: inline-flex; padding: 0 20px; margin: 0} .portal header nav.mainNav .loginHolder a {height: auto; color: #fff; padding: 5px 14px; align-self: center; font-size: 17px; position: relative; overflow: hidden} .portal nav.mainNav .loginHolder a:before {content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; transition: all .2s ease-in-out} .portal nav.mainNav .loginHolder a:hover:before {background-color: rgba(255,255,255,.15)} .portal footer .powered_by {display: block; clear: both; padding: 0 0 9px} .portal footer .powered_by, .portal footer .powered_by a {color: #fff} .portal footer .powered_by a:hover {opacity: .7} .portal footer a.language {clear: both; background-color: #fff; padding: 3px 8px; margin: 2px 0 15px} .portal footer a.language:first-child {margin-top: 0} /* Header spacing */ @media (min-width: 980px) { .portal header {display: flex; min-width: 980px} .portal header > * {display: flex; position: static !important} .portal header .customLogo {flex: 1; padding: 0 15px 0 26px; align-items: center} .portal header .customLogo a {height: 68%} .portal header .customLogo a img {height: 100%} .portal .customLogo a span.longName {margin-top: -3px} .portal.portal_home #contentWrap {min-height: 650px} .portal.portal_home #contentWrap > *:only-child {position: absolute; top: 0; bottom: 0; width: 100%; height: auto !important} .portal.portal_home #contentWrap #carouselWrap:only-child > .bjqs, .portal.portal_home #contentWrap #carouselWrap:only-child > .bjqs > li {height: 100% !important} .portal header {height: 75px} .portal:not(.transparent_header).portal_home #contentWrap > *:first-child {margin-top: calc(75px + 4px)} .portal.catalog_class #contentHeader {top: calc(75px + 4px)} .portal.catalog_class #contentWrap {margin-top: calc(75px + 4px + 66px)} .portal:not(.catalog_class) #contentHeader {padding-top: calc(75px + 4px + 18px)} .portal #contentHeader .catalog_search_holder {margin: 0} .portal.transparent_header #carouselWrap:first-child:before {content: ''; height: 400px; width: 100%; position: absolute; z-index: 1; background: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,0))} } @media (max-width: 979px) { .portal header li .arrow, .portal .portalCart img {display: none} .portal .mobileLogo .top_logo {display: none} .portal nav.mm-menu .loginHolder a {background-color: transparent !important} .portal.portal_home #wrapper {margin-top: 40px} .portal:not(.catalog_class) #contentHeader {padding-top: calc(40px + 19px)} .portal.catalog_class #contentHeader {top: 40px} .portal.catalog_class #contentWrap {margin-top: calc(40px + 63px)} } @media (max-width: 767px) { .portal.catalog_class #contentHeader {margin-top: 1px} .portal.catalog_class #contentWrap {margin-top: 40px} } @media (min-width: 600px) { .portal.portal_home #contentWrap > *:not(#carouselWrap):only-child {position: absolute; top: 0; bottom: 0; width: 100%; height: auto !important} } .portal header > iframe {display: none} /* Remove weird iframe being added in IE10 & 11 */ body.portal #contentBody, .portal.catalog_item .hasRightColumn #centreColumn {padding: 20px 18px} body.portal #contentBody {width: auto} .portal .mobileLogo h1 {display: inline-block; line-height: 26px} body.portal #contentBody > .alert_block {margin: -10px 0 13px} body.portal .frmLogin .alert_block a i.xCrossSmall {margin-top: -2px} body.portal #contentBody ul.twoColumnWrap:nth-child(2n), body.portal .materialStyle ul.twoColumnWrap { margin-left: 0; } body.portal #contentBody ul:not(.twoColumnWrap) li {margin-top: 2px} body.portal #contentBody ul.largeImgs li, body.portal #contentBody ul.no_indent li {padding: 5px 0} /* overwrite default list styles */ body.portal #contentBody ul.tabnav { display:none; } body.portal #contentBody .optionsRibbon ul:not(.twoColumnWrap), body.portal #contentBody .optionsRibbonTable_separate ul:not(.twoColumnWrap) {margin-bottom: 3px} body.portal #contentBody .optionsRibbon ul li {padding: 0; margin: 0} body.portal #contentBody ul.twoColumnWrap li {margin: 0 0 25px 0} body.portal #contentBody ul:not(.twoColumnWrap):not(.no_indent):not(.largeImgs), body.portal #contentBody ol {margin-bottom: 15px} body.portal #contentBody p img {margin-top: 5px} /* =================== Login Page - sales, mobile app and simple login ===================*/ body.loginPage, body.mobileApp {line-height: 20px; border-top: 5px solid #457370; margin: 0; box-sizing: border-box} body.loginPage #loginWrap, body.mobileApp #loginWrap {position: absolute; width: 100%; height: 100%; margin-top: -5px; text-align: center} body.loginPage #loginWrap {background-size: cover; background-position: top center; background-repeat: no-repeat; background-attachment: fixed} body.loginPage #loginWrap:before, body.mobileApp #loginWrap:before {content: ''; display: inline-block; height: calc(100% - 45px); vertical-align: middle; margin-right: -0.25em} body.loginPage #loginForm, body.mobileApp #loginForm, body.mobileApp #portalSelect { height: auto; text-align: center; padding: 10px 20px 12px; background: #fff; width: 320px; display: inline-block; box-sizing: border-box; position: relative; vertical-align: middle; border-radius: 8px; overflow: hidden } body.loginPage [data-active_window="credentials"] { display: block } body.loginPage [data-active_window="access"], body.loginPage [data-active_window="password"] { display: none } body.loginPage #loginForm h1.customLogo, body.mobileApp #loginForm h1.customLogo { margin: auto auto 15px; text-align: left } body.loginPage .frmLogin > p, body.mobileApp .frmLogin > p { text-align: left; margin: 20px 0; color: #5e5f5f } #loginForm input[type="text"], #facebox .frmLogin input[type="text"], #loginForm input[type="password"], #facebox .frmLogin input[type="password"] { width: 100% !important; background-color: #fff; background-color: var(--bg-color); box-sizing: border-box; margin: 0 0 10px; border-radius: 0; border-width: 0 0 1px; padding: 8px 0; font-size: 15px; color: #5e5f5f; color: var(--main-text-color); } #loginForm input[type="text"]:focus, #facebox .frmLogin input[type="text"]:focus, #loginForm input[type="password"]:focus, #facebox .frmLogin input[type="password"]:focus { box-shadow: none; border-bottom-color: #8a8a8a; } #login_form input[type="text"]#userid { margin-bottom: 35px;/* popup and simple login */ } #loginForm input:-webkit-autofill, .loginPopup input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--bg-color) inset !important; -webkit-text-fill-color: var(--main-text-color) } body.loginPage #loginForm [data-active_window="credentials"] input[type="text"] { margin: 20px 0 0 } body.loginPage #loginForm [data-active_window="credentials"] { text-align: left; padding-top: 15px } #facebox .frmLogin label[for='userid'] {padding-top: 10px} body.loginPage #loginForm [data-active_window="credentials"] input[type="text"], #facebox .frmLogin input[type="text"], body.loginPage #loginForm [data-active_window="admin"] input[type="text"] { margin: 2px 0 15px } body.loginPage #loginForm input[type="password"], body.loginPage #loginForm input#password, #facebox .frmLogin input[type="password"] { margin: 2px 0 10px } body.loginPage [data-active_window="credentials"] > label { margin: 0; } body.loginPage #loginForm .alert_block {margin: 20px 0 0; text-align: left; width: 100%} body.loginPage #loginForm input ~ .alert_block {margin: 2px 0} body.mobileApp #loginForm button, body.loginPage #loginForm button, #facebox .frmLogin button, #facebox .smlSignup .smlSignupButton { color: #fff; display: block; padding: 4px 20px; margin: 9px auto 20px; border-radius: 50px; min-width: 75%; transition: opacity .3s ease-in-out } /* overwrite facebox buttons */ #facebox .frmLogin button {display: block !important; padding: 9px 20px !important; margin: 9px auto 20px !important; height: auto !important; font-size: 17px !important; line-height: 1.4 !important} #facebox .smlSignup .smlSignupButton {padding: 8px 0 10px; height: auto} body.mobileApp #loginForm button {margin-bottom: 30px} body.loginPage #sales_login button {margin-bottom: 0} body.loginPage .loginOptions, #facebox .frmLogin .loginOptions { width: 100%; position: relative; text-align: left; margin-top: 5px; margin-bottom: 20px } body.loginPage .loginOptions a, #facebox .frmLogin .loginOptions a { width: 50%; display: inline-block; vertical-align: top; text-align: right; margin-top: 1px } body.loginPage .loginOptions a:only-child, #facebox .frmLogin .loginOptions a:only-child { width: 100%; text-align: center } body.loginPage .loginOptions label {color: #048497} body.loginPage .loginOptions label, #facebox .frmLogin .loginOptions label { width: 50%; margin: 0 } body.loginPage .loginOptions label:before {left: 0} body.loginPage .loginOptions input[type="checkbox"] + label[for="checkboxName"], #facebox .frmLogin input[type="checkbox"] + label[for="checkboxName"] { width: 48%; display: inline-block } body.loginPage .loginOptions input[type="checkbox"] + label:before, #facebox .frmLogin input[type="checkbox"] + label:before { top: 0.1em } body.loginPage .loginOptions label[for="checkboxName"] span, #facebox .frmLogin label[for="checkboxName"] span { vertical-align: top; display: inline-block; width: 82%; margin-top: 1px } body.loginPage .loginOptions label[for="checkboxName"]:hover, body.loginPage .loginOptions a:hover, #facebox .frmLogin label[for="checkboxName"]:hover { opacity: .8 } .loginOptions:last-child {margin-bottom: 10px} #facebox .difSignIn[data-change_active] {margin-top: 12px} .difSignIn {line-height: 18px; color: #fff; text-decoration: none; padding: 8px 15px; display: flex; align-items: center; justify-content: space-between; position: relative; left: 0; right: 0; margin-left: -40px; margin-right: -40px; transition: opacity .5s ease-in-out} .difSignIn:hover {color: #fff; opacity: .7} .difSignIn + .difSignIn:hover {color: #fff; opacity: .75} .difSignIn:last-child {border-radius: 0 0 8px 8px; margin-bottom: -5px} form[style*="hidden"] .difSignIn {opacity: 0} body.mobileApp .difSignIn:last-child, body.loginPage .difSignIn:last-child {margin-bottom: 0} .difSignIn + .difSignIn {margin-top: 0 !important; opacity: .85} .difSignIn.mobile_change_site {background-color: #5e5f5f} .difSignIn i {display: block; width: 12px; height: 20px; margin: 0 0 0 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='27px' viewBox='-0.863 -3.843 12 27'%3E%3Cpolygon fill='%23FFFFFF' points='1.873,19.314 0,17.634 6.726,9.653 0,1.68 1.873,0 10.273,9.653 '/%3E%3C/svg%3E") 50% / 9px no-repeat}/*('/images/icons/large-arrow.svg')*/ .difSignIn i:after {display: none !important} body.loginPage > .language, body.mobileApp > .language {width: 100%; text-align: center; margin: 0; box-sizing: border-box} .powered_by {font-size: 14px; padding: 0 12px 9px} @media screen and (min-width: 460px) { #facebox .frmLogin > p:first-of-type {margin-top: 0} .frmLogin .loginOptions:last-child {margin-bottom: 44px}/*.frmLogin popup and login page*/ .frmLogin#login_form .difSignIn:first-of-type {margin-top: 30px} body.loginPage .difSignIn:first-of-type, #facebox .difSignIn:first-of-type {margin-top: 34px}/*pwd and access code*/ .smlSignup p {margin-bottom: 25px !important; font-size: 20px} ul.imgIcons li {width: 142px; margin: 0 9px 20px} #facebox .loginPopup.facebox-content.resellersForm {padding-bottom: 25px !important} .resellers ul.imgIcons li {width: 176px} } @media screen and (max-width: 499px), screen and (max-height: 579px) { body.loginPage #loginWrap {background: none !important} #facebox .frmLogin .loginOptions {font-size: 15px !important} body.loginPage #loginWrap, body.mobileApp #loginWrap {margin-top:0; position: static; height: auto} body.loginPage #loginWrap:before, body.mobileApp #loginWrap:before {display: none} body.loginPage, body.mobileApp, body.loginPage #loginWrap, body.mobileApp #loginWrap{background-color:#FFF} body.loginPage h1.customLogo a span, body.mobileApp h1.customLogo a span{width:200px} #facebox .frmLogin .loginOptions {padding-bottom: 5px} body.loginPage .difSignIn {margin-left: 0; margin-right: 0; border-radius: 3px; padding-left: 15px; padding-right: 15px} body.loginPage .difSignIn + .difSignIn {margin-top: 2px !important} .difSignIn.mobile_change_site {display: flex} body.loginPage > .site, body.mobileApp > .site {display: none} body.loginPage > .language, body.mobileApp > .language {font-size: 15px; padding: 0 0 10px} body.loginPage #loginForm h1.customLogo, body.mobileApp #loginForm h1.customLogo {text-align: center} } @media screen and (min-width: 500px) and (min-height: 580px) { /* MQ just for login form */ body.loginPage #loginForm, body.mobileApp #loginForm { padding: 15px 40px 0; width: 400px; box-shadow: 0 0 12px 12px rgba(0,0,0,0.06) } body.loginPage #loginForm button:not(.sso_btn), body.mobileApp #loginForm button:not(.sso_btn) {margin-top: 9px} #loginForm input[type="text"], #loginForm input[type="password"], #facebox .frmLogin input[type="text"], #facebox .frmLogin input[type="password"] { padding: 8px 0 } #loginForm .loginOptions, body.loginPage .difSignIn {font-size: 17px} body.loginPage #loginForm .language, body.mobileApp #loginForm .language {display: none} body.loginPage > .language, body.mobileApp > .language { display: block; position: absolute; bottom: 15px; right: 15px; width: auto; padding: 5px 11px; background: rgba(0,0,0,.2); color: #fff } body.mobileApp .language, body.mobileLogin .language {bottom: 60px} body.mobileApp #loginWrap:before, body.mobileLogin #loginWrap:before {height: calc(100% - 95px)} .difSignIn.mobile_change_site {display: none !important} .powered_by, .powered_by a {color: #fff; margin-top: 11px} .powered_by a:hover {opacity: .7; color: #fff} .portal footer .powered_by {margin-top: 1px} } @media screen and (max-width: 979px) { /* Only for smaller screens */ header h1, header .customLogo, .mm-menu .formHolder, .portal .mm-menu li > .arrow, header .product_logo { display: none; } #wrapper { padding-top: 41px; } .mobileLogo { background: #fff; } .mobileLogo h1 { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); padding: 0 18px } body.home-carousel .mobileLogo { position: relative; z-index: 9; } body.portal.home-carousel .mobileLogo {background: none;} body.portal.home-carousel .mobileLogo h1 {background: #fff;} .stories h3, .pricing #contentWrap h5 {font-size: 18px} .demo #contentBody .twoColumnWrap h3 + p {min-height: 88px} .infographics #contentBody {text-align: center} .infographics #contentBody ol, .infographics #contentBody .infographic_text *:not(.infographic_heading) {text-align: left} .infographics #contentBody > img {margin: 81px 0 20px} .infographics #contentBody .shareLinks {position: absolute; left: 50%; top: 42px; margin-left: -142px} .awards .contentBlock img, .news .contentBlock img {width: 230px} .comparisonsBlocks a.contentBlock {font-size: 21px; width: 140px; padding: 10px 5px 8px; margin: 0 1% 20px} .comparisonsBlocks a.contentBlock[href*="successfactors"] {font-size: 19px} /* ====== Portal Styles ======*/ .portal header {height: 40px; box-shadow: none} .portal #leftColumn {margin-bottom: 15px} .portal footer .footerLinks {padding: 0} /* ====== Flexible Fluid Footer ======*/ footer .footerLinks {padding-left: 6px} footer .footerLinks > div {margin: 0 -4px 15px 0} nav.footerNav div h2, nav.footerNav div .heading {margin-bottom: 5px} nav.footerNav div ol li.active a {background: rgba(255, 255, 255, 0.15)} nav.footerNav div ol li a {padding-left: 15px; font-size: 15px; display: inline-block} nav.footerNav div.appLinks a {padding: 5px; width: 50%; max-width: 148px} footer #socialBlocks {margin-top: 5px} } @media screen and (max-width: 400px) { .brochure .floatingIntro .lrgTopHeading img {display: none !important} .brochure.webinar .brochure_header_buttons {flex-flow: column} .brochure.webinar .brochure_header_buttons .webinar_date {order: 0; margin: 0 0 20px} } @media screen and (min-width: 460px) { .floatingIntro .shareLinks > div {float: left; padding-bottom: 0} .resellers .colorBtn {margin: 10px 5px} /* ====== Flexible Fluid Footer ======*/ footer .footerLinks, footer .footerLinks + div {width: 100%;} footer .footerLinks.oneIcon {width: 85%;} footer .footerLinks.oneIcon + div {width: 15%;} footer nav > div, footer div.footerLinks > div {padding-right: 20px; box-sizing: border-box} .newSite footer nav > div, .newSite footer div.footerLinks > div {padding-right: 0} footer nav > div:last-child, footer div.footerLinks > div:last-child { padding-right: 0; } footer nav > div:first-child:last-child { width: 100%; /* no social media links */ } footer div.footerLinks > div { min-width: 50%; /* min-width if social media links */ margin-bottom: 20px; } footer nav > div:first-child:last-child div { min-width: 20%; /* min-width if no social media links */ } footer .footerLinks div:first-child:nth-last-child(1) {width: 100%;} footer .footerLinks div:first-child:nth-last-child(2), footer .footerLinks div:first-child:nth-last-child(2) ~ div {width: 50%; /* 2 columns */} footer .footerLinks div:first-child:nth-last-child(3), footer .footerLinks div:first-child:nth-last-child(3) ~ div {width: 33.3333%; /* 3 columns */} footer .footerLinks div:first-child:nth-last-child(4), footer .footerLinks div:first-child:nth-last-child(4) ~ div {width: 25%; /* 4 columns */} footer .footerLinks div:first-child:nth-last-child(5), footer .footerLinks div:first-child:nth-last-child(5) ~ div {width: 20%; /* 5 columns */} footer ul#socialBlocks {width: 100%;} footer ul#socialBlocks li a i {margin-right: 0;} footer .footerLinks.oneIcon + div #socialBlocks li {margin: 0 0 16px; /* One social icon */} .portal footer .footerLinks.oneIcon + div #socialBlocks li {float: right;} } @media screen and (max-width: 479px) { .bjqs-caption {height: 100px; max-width: 100%; padding: 8px 20px 15px} .bjqs-caption h2, .bjqs-caption p { color: #fff !important; /* overwrite user colours as this will appear on grey */ } .bjqs-caption h2 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .bjqs-caption p { height: 65px; overflow: hidden; } .bjqs-caption a {line-height: 22px; display: block; max-width: 280px; margin: -60px 0; padding: 9px 20px; position: absolute; top: 0} .comparisons #parallaxHeader + .alternateBg h2 {margin-top: 33px} .comparisonsBlocks a.contentBlock {font-size: 19px; width: 126px; padding-bottom: 10px; margin: 0 2% 20px} .webinar_blocks {height: 295px} .webinar_blocks a.contentBlock {width: 267px !important} .resellers .mapHolder a.marker {display: none} .resellers .mapHolder a.marker, .resellers .mapHolder a.marker + div {position: static} .resellers .mapHolder a.marker + div {opacity: 1; visibility: visible; margin-bottom: 1px; padding: 4px 9px 5px} .resellers .mapHolder a.marker + div span {float: none} .resellers .mapHolder a.marker + div br, .resellers .mapHolder a.marker + div .arrow, .resellers .mapHolder img {display: none} .resellers .mapHolder a.marker + div br, .resellers .mapHolder a.marker + div .arrow {display: none} .resellers .mapHolder a.marker + div span span {display: inline-block; margin-right: -4px; width: 62%; vertical-align: top} .resellers .mapHolder a.marker + div span span:last-child {width: 38%; margin: 3px -4px 0 4px} .resellers .mapHolder a.marker + .hideBelow480 {display: none} .contact .contentBlock .sideImg img {width: 60px; height: auto} .contact .contentBlock .sideText h3 {font-size: 19px} .contactForm label {margin-bottom: 5px} .contactForm input, .contactForm select {width: 100%} #contentWrap footer .footerBase .language {display: block; margin-bottom: 5px} } @media screen and (min-width: 480px) { body:not(.newSite) .carOverlay {display: inline-block} .bjqs-caption {margin-left: 20px; max-width: 70%; padding: 0} .bjqs-caption > *:not(a) {text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7)} .bjqs-caption > *:not(a):not([style*='255, 255, 255']) {text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1)} .bjqs-caption a {line-height: 22px; margin: 5px 0 0; padding: 9px 25px; display: inline-block} .ourValues .iconNav a {width: 65px; height: 65px; margin: 0 13px 10px} .ourValues .iconNav a svg {width: 40px; height: 70px} /* ====== Header ======*/ .fullColumn img { float: right; margin-left: 20px; width: 50% } .resources .fullColumn img {margin: 0} .fullColumn hgroup {margin-bottom: 30px} /* ====== Forms ======*/ .contactForm label {width: 20%; margin-right: 2%; display: inline-block} .contactForm textarea, .contactForm input[type='text'], .contactForm input#subject {max-width: 75%; margin: 0 0 0 -4px} .contactForm #organization_name {vertical-align: top} } @media screen and (max-height: 400px) { .updated-carousel .bjqs-caption p {margin-top: 0} } @media screen and (min-width: 480px) and (max-width: 767px) { form.signupForm input, form.signupForm select, form.signupForm .domain_wrapper, form.signupForm .password_wrapper {width: calc(100% - 164px)} form.signupForm .left_column {margin: 10px 0} form.signupForm .domain_wrapper, form.signupForm .password_wrapper {display: inline-flex} form.signupForm label {width: 160px} } @media screen and (max-width: 559px) { body.portal .optionsRight { float: none; margin: 0 0 14px; left: -3px; top: 5px; clear: both; } .fullColumn div.twoThirds ul.twoColumnWrap + ul.twoColumnWrap li:first-child {margin-top: 25px} .accessible_carousel ul.bjqs-controls {left: 0; bottom: 0; transform: translateX(0); width: 100%; padding: 11px 0 8px; border-radius: 0} .accessible_carousel ul.bjqs-controls.v-centered {background: rgba(0,0,0,.3)} .accessible_carousel ul.bjqs-controls.v-centered li a {opacity: 1} .updated-carousel .bjqs-caption { background-color: rgba(0,0,0,0.3); width: 100%; max-width: 100%; height: auto; position: absolute; bottom: 0; padding: 15px 20px; box-sizing: border-box; margin: 0 !important } .accessible_carousel.updated-carousel .bjqs-caption {padding-bottom: 58px} .updated-carousel .bjqs-caption h2 { white-space: normal; overflow: visible; } .updated-carousel .bjqs-caption p {height: auto;} .updated-carousel .bjqs-caption a { margin: 5px auto; position: static; display: inline-block; } .contactForm label[for='agree'], form.signupForm label[for='agree'] {margin-bottom: 10px} #contentWrap footer .footerBase span {white-space: normal; margin: 0 10px 0 0} .brochure.white_paper .white_paper_form {min-width: 100%} .brochure.white_paper .columnR > *:nth-child(1) {margin-bottom: 20px} .brochure.white_paper .columnR > *:nth-child(2) {float: none; text-align: center} .brochure.white_paper .columnR > *:nth-child(2) img {width: 200px; margin: 0} .brochure.white_paper .highlight_block p {margin-top: 0} } @media screen and (min-width: 560px) { .bjqs .caption-wrapper {display: flex; align-items: center} .bjqs-caption {max-width: 50%} .bjqs-caption h2 {font-size: 25px} .bjqs-caption p, .bjqs-caption a {font-size: 18px} .bjqs-caption a {margin: 10px 0 0} /* ====== Body ======*/ ul.twoColumnWrap, body.portal #contentBody ul.twoColumnWrap { width: 48%; display: inline-block; vertical-align: top; margin: 0 -4px 0 0; } ul.twoColumnWrap li, ul.twoColumnWrap li:first-child, ul.twoColumnWrap + ul.twoColumnWrap li:first-child, .storiesHolder a { margin-top: 20px; } ul.twoColumnWrap + ul.twoColumnWrap, body.portal #contentBody ul.twoColumnWrap ~ ul.twoColumnWrap {margin-left: 4%;} ul.imgIcons {padding: 30px 0 10px} .twoColumnText { width: 47%; display: inline-block; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box; margin-right: 6%; } .twoColumnText + .twoColumnText {margin: 0 0 0 -4px} .about .flex_columns {display: flex} .about .flex_columns > .twoColumnText {display: flex; flex-direction: column} .about .flex_columns > .twoColumnText .about_img_left {vertical-align: bottom} .about .flex_columns > .twoColumnText .about_img_right {margin-top: auto} .about .aboutProduct img[class*="about_img"] {margin-bottom: 0} .floatingIntro .columnL {margin-top: -74px} .comparisons .floatingIntro .columnL, .brochure .floatingIntro .columnL {margin-top: -70px} .resellers .colorBtn {margin: 5px 5px 10px} .resellersNav {margin-bottom: 30px} .resellersNav, .resellersNav + div {width: 32%; margin-top: 10px; display: inline-block; margin-left: -4px; vertical-align: top} .resellersNav li > * {padding: 3px 27px 3px 13px; display: inline-block; line-height: 22px} .resellersNav li li a {padding-top: 0; padding-bottom: 0} .resellersNav + div {width: 68%; margin-top: 15px} .resellersNav[is-open] li.selected ul {display: block} /* ====== Forms ======*/ form.signupForm label {width: 160px} form.signupForm input[id*='subdomain'] {margin-right: 0 !important} .contactForm .flex, .signupForm .flex {display: flex; justify-content: space-between} #contentFooter {padding-left: 40px; padding-right: 40px} a.smlSignupButton {display: inline-block; width: 29%; min-width: 270px; margin: 0 2%} } @media screen and (max-width: 700px) { form.signupForm .agree_terms {display: block; text-align: center} .signupForm label[for='agree'] {display: block} } @media screen and (min-width: 700px) { .columnHolder { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .storiesHolder a {width: 47%; margin: 0 2% 10px 0} .storiesHolder a:nth-child(even) {margin-left: 2%; margin-right: 0} .storiesHolder a:first-child:last-child {margin-right: 0} } @media screen and (max-width: 767px) { .fullWidthMobile{width:100%} #contentWrap .contactForm label {font-size: 15px} .signup #contentBody {margin: 10px; padding: 10px 20px !important} form.signupForm .form_row {display: inline-block; width: 100%; margin-top: 0} form.signupForm .left_column {margin-right: 0} form.signupForm label {display: inline-block} form.signupForm button {margin: 20px auto} .lrgContentBlock .sideImg, .lrgContentBlock .sideText {display: block; width: 100%} .lrgContentBlock .sideImg {text-align: center; margin-bottom: 20px} .lrgContentBlock .sideText {padding-left: 0} .comparisons .sideText h3,.comparisons .sideText p {text-align: center} .comparisons .alternateBg .lrgContentBlock .sideText {padding-left: 0} .videos .tparrows.tp-leftarrow.noSwipe {display: none} .about .aboutProduct img + p {clear: both} } @media screen and (min-width: 768px) { /* ====== Fonts ======*/ dt { font-size: 26px } h3, .infographics .infographic_text .infographic_heading { font-size: 24px } .implementation h3, h3, nav.footerNav div .heading { font-size: 23px } .resellers #contentWrap .contentBlock p { font-size: 21px } #contentWrap .story p, .newsHolder h3, nav.footerNav div h2 { font-size: 19px } .home-carousel.updated-carousel #contentWrap .bjqs p, .home-carousel.updated-carousel #contentWrap .bjqs li { font-size: 19px } .home-carousel.updated-carousel #contentWrap .bjqs p { line-height: 25px } #contentWrap p, .edu2 #contentWrap li { font-size: 16px } /* ====== Body ====== */ ul.twoColumnWrap li, ul.twoColumnWrap li:first-child, ul.twoColumnWrap + ul.twoColumnWrap li:first-child, .storiesHolder a, .testimonials_holder .testimonial { margin-top: 50px; } ul.twoColumnWrap li:before, dl dt:before {top: 6px;} ul.twoColumnWrap li p {margin-left: 0;} .resellers .alternateBg #contentBody h2 {font-size: 37px} .resellers .contentBlock.floatR {width: 40%; padding: 0 0 0 20px; margin-bottom: 0} .resellers .contentBlock.floatR + .contentBlock {width: 60%} .resellers .imgIcons {padding-top: 25px} .resellersNav, .resellersNav + div {width: 25%} .resellersNav + div {width: 75%} .resellers_portal .twoColumn {width: 50%; float: left} .demo #contentBody div:not(.optionsRibbon) ul:not(.twoColumnWrap) li {padding: 0 0 0 42px} .demo #contentBody div:not(.optionsRibbon) ul:not(.twoColumnWrap) li:before {left: 18px} .storiesHolder {margin-bottom: 40px} .floatingIntro .columnL {width: 430px; padding: 40px 50px} .floatingIntro .lrgTopHeading {padding: 0 0 20px} .floatingIntro .image {position: absolute; top: 40px; right: 0; bottom: 0; left: 430px; height: auto} .story #contentBody > .columnL {width: 33%; float: left} .story .columnR {width: 67%; float: right} .story #contentWrap section p, .story section li {line-height: 1.8em} .story .columnR section {margin-bottom: 15px} .story .columnR ~ .columnR:before {width: 50%; height: 1px; content:''; display:block; border-top: 1px solid #e0e0e0; margin: auto} .story .columnL h2 {margin-top: 50px} .comparisons .columnL, .brochure .columnL {float: left; width: 26%} .brochure .columnR {width: 100%} .comparisons .columnR, .brochure .columnL + .columnR {width: 74%} .brochure .floatingIntro .brochure_header_text {padding: 30px 40px 25px} .brochure .brochure_header_buttons {display: flex; justify-content: space-between; flex-wrap: wrap} .iconNav {display: inline-block} .icon-carousel .owl-nav, #icon-carousel .img {display: none} .icon-carousel .owl-item > div .text h3 {margin-bottom: 40px} .icon-carousel .owl-item > div .text p {font-size: 17px; line-height: 28px} #contentFooterInner {display: block; margin: auto} /* ====== Forms ======*/ .contactForm label {width: 160px; margin-right: 2%} .contactForm #organization_name {vertical-align: initial} .contactForm textarea, .contactForm input#subject {margin: 5px 0 0 -4px; width: 580px} form.signupForm label, form.signupForm input, form.signupForm select {width: 300px} .signup.thank_you #contentWrap {position: relative} .signup.thank_you #contentBody {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 20px 0 0 0} /* ====== Flexible Fluid Footer ======*/ footer {padding-left: 20px; padding-right: 20px} .newSite footer {padding-top: 60px} .newSite footer.regional_site_footer {padding-bottom: 60px} .newSite body.portal footer {padding-bottom: 10px} footer .footerLinks {width: 71%; padding-left: 0} footer .footerLinks + div {width: 29%} .newSite footer .footerLinks {width: 63%} .newSite footer .footerLinks + div {width: 37%; padding-right: 0} .portal footer ul#socialBlocks li {float: right} .portal footer .powered_by {text-align: right} footer .footerBase {margin-top: 30px; padding-left: 0; padding-right: 0; text-align: right} footer .footerBase a.language {margin: 4px 0 0; float: left} } @media screen and (max-width: 850px) { .brochure .floatingIntro .brochure_header_img img {display: none} .brochure .floatingIntro .lrgTopHeading {margin-bottom: 20px !important} .brochure .floatingIntro .lrgTopHeading img {display: block} } @media screen and (max-width: 979px) { .about .aboutProduct img {width: 60px} } @media screen and (min-width: 980px) { h2 { font-size: 42px; } .bjqs-caption h2 { font-size: 38px; } h4 { font-size: 32px; } h5 { font-size: 26px; } .alternateBg h4, .bjqs-caption a { font-size: 23px; } .bjqs-caption p { font-size: 20px; } body.portal .mobileLogo h1 { display: none; } header { min-width: 1000px; height: 75px; border-width: 4px 0 0 0 } .headerContainer, .headerContainer nav.mainNav, .headerContainer nav.mainNav ol {display: flex} .headerContainer {padding: 0 25px; margin: auto} .headerContainer .product_logo {position: static; float: left; flex: 0 auto} .headerContainer nav.mainNav {position: static; flex: 1 0 auto; align-items: center; float: right} .headerContainer nav.mainNav ol {width: 100%} .headerContainer nav.mainNav ol li {flex: 0 1 auto} .headerContainer nav.mainNav ol .aboutUs {margin-left: auto} .portal header {width: 1550px} .portal.site_full_width header {width: 2050px} html:not([dir=rtl]) .portal nav.mainNav > * > li:last-child {margin-right: 6px} .pricing p.subText {margin: 25px 0 32px} ul.imgIcons {padding: 40px 0 20px} .resellers .alternateBg:first-child {padding-top: 130px} .resellers .colorBtn {margin: 0 5px 15px} .resellersNav, .resellersNav + div {width: 20%} .resellersNav + div {width: 80%} .ourValues .iconNav a {margin: 0 13px 15px} .signup #contentWrap, .contactSales #contentWrap {padding-top: 90px} /* ====== Carousel ======*/ ul.bjqs {min-width: 1124px} .bjqs-caption {margin-left: 120px; background: none} .bjqs-caption p {max-width: 500px} .bjqs-caption br {display: inline-block} .bjqs-caption a {line-height: 42px} /* ====== Pages ======*/ .floatingNav {right: 55px} .fullColumn div.twoThirds {padding: 50px 20px} .resources .fullColumn div.twoThirds, .fullColumn.videos {padding: 60px 20px} .newSite .resources .fullColumn div.twoThirds {max-width: 2200px} .fullColumn img {margin-left: 30px} .contactForm {width: 755px} .contactForm p {white-space: nowrap} .contactForm span.formColumn label {width: 150px} .contactForm span.formColumn {display: inline} .contactForm input + span.formColumn, .contactForm span.formColumn {margin: 0 0 0 50px} .contactForm textarea, .contactForm input#subject {max-width: 100%} .infographics #contentBody > img {float: left; margin-right: 50px; width: 61%;} .infographics #contentBody h3, .infographics .infographic_text .infographic_heading {margin-top: 70px} .infographics #contentBody > ol, .infographics .infographic_text ol {margin-left: 67%} .infographics #contentBody .infographic_text {margin-left: 65%} .infographics #contentBody .infographic_text h3 {margin-top: 0} .about .aboutProduct img {width: 115px} .logo_white_btn.large {font-size: 21px; padding: 12px 25px} .logo_white_btn.large img {height: 44px} .columnHolder { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; } .stories h3 span {line-height: 24px; font-size: 19px} .story .columnL h2, .comparisons .columnL h2, .brochure .columnL h2 {font-size: 28px; margin-left: 50px} .brochure .columnL h2 {font-size: 27px} .brochure.sml_heading .columnL h2 {font-size: 25px} .story.sml_story_heading .columnL h2 {font-size: 21px} .story .columnR section {margin-right: 40px} .brochure.webinar .columnR {display: flex} .brochure.webinar .columnR > *:nth-child(1) {order: 2} .brochure .hosted_by, .brochure .videos {flex: 0 0 350px; align-self: flex-start; margin: 0 10px 0 40px} .resources #contentWrap .fullColumn p, .contact #contentWrap .subText, .implementation #contentWrap .subText {font-size: 18px} #contentFooter h2 {font-size: 28px} /* ====== Portal ======*/ body.portal #contentBody, body.portal.catalog_item .hasRightColumn #centreColumn {padding: 25px 26px} body.portal #centreColumn {padding-left: 25px} body.portal #leftColumn ~ #centreColumn {padding-left: 15px} .portal .hasRightColumn #contentBody {display: flex} .portal footer div.footerLinks > div {margin-bottom: 16px} /* ====== Flexible Fluid Footer ======*/ footer div.footerLinks > div {min-width: 25%; /* min-width of social media links */} .neo footer div.footerLinks > div, .matrix footer div.footerLinks > div {min-width: 33%} .newSite footer h2, .newSite footer .heading {margin: -3px 0 15px; display: inline-block} .newSite footer ol li {margin-bottom: 2px} nav.footerNav div ol li.active a {opacity: 0.5} } @media screen and (max-width: 1097px) { .contactSales #contentWrap {background: #fff; border-bottom: 2px solid #e8e8e8} } @media screen and (min-width: 1098px) { .ourValues .iconNav a {width: 100px; height: 100px; margin: 0 13px 20px} .ourValues .iconNav a svg {width: 50px; height: 107px} .ourValues #icon-carousel .owl-item .text p {font-size: 19px; line-height: 31px} .contactSales header.transparentNav:not(.scrolled) {background: transparent} .contactSales #contentBody {background-color: rgba(255,255,255,0.9); max-width: none !important; width: auto; display: inline-block; padding: 30px 30px !important; margin: 30px 0 100px; border-radius: 3px} .signup #contentBody .lrgTopHeading, .contactSales #contentBody .lrgTopHeading {margin-top: 5px} .newSite footer .footerLinks {width: 71%} .newSite footer .footerLinks + div {width: 29%} .resellersNav, .resellersNav + div {width: 17%} .resellersNav + div {width: 83%} } @media screen and (max-width: 1179px) { header.transparentNav nav.mainNav ol > li > a {font-size: 16px} } @media screen and (min-width: 1190px) { .neo footer div.footerLinks > div, .matrix footer div.footerLinks > div {min-width: 20%} } @media screen and (min-width: 1280px) { .headerContainer {padding: 0 55px} .columnHolder {column-gap: 40px} .columnHolder_2 {max-width: 529px; column-count: 2; column-gap: 40px} .brochure .columnHolder_2 {max-width: 100%} ul.imgIcons li {margin: 0 21px 20px} ul.imgIcons li:first-child {margin-left: 0} ul.imgIcons li:last-child {margin-right: 0} .brochure.white_paper .columnR {display: flex} .brochure.white_paper .columnR > *:nth-child(1) {order: 3} .brochure.white_paper .columnR > *:nth-child(2) {order: 1} .brochure.white_paper .columnR > *:nth-child(2) img {width: auto; margin: 0} .brochure.white_paper .columnR > *:nth-child(3) {order: 2} .brochure.white_paper .columnR > *:nth-child(3) {margin: 0 40px} .brochure .hosted_by, .brochure .videos {align-self: center} .brochure.webinar .videos {align-self: flex-start} } @media screen and (max-width: 1439px) { .portal nav.mainNav > * > li > a {padding: 0 15px; font-size: 18px} } @media screen and (min-width: 1440px) { .portal nav.mainNav > * > li > a {padding: 0 25px} .newSite #socialBlocks li {margin-left: 7px; margin-right: 7px} footer .newsletterForm {max-width: 368px} } /* =================== New Main Site ===================*/ body.newSite #wrapper { box-shadow: none; max-width: 100%; min-width: 100%; padding-top: 0; } header.transparentNav { width: 100%; background-color: rgba(255, 255, 255, 0.93); border-bottom-width: 0; } header.transparentNav:not(.scrolled) { background-color: transparent; box-shadow: none; border-top-color: transparent; } header.transparentNav .product_logo {left: 5%} .neo:not(.home) header.transparentNav:not(.scrolled) .product_logo {background-image: url('/images/logo/neo-logo.svg')} .matrix header.transparentNav:not(.scrolled) .product_logo {background-image: url('/images/logo/matrix-logo.svg')} .indie header.transparentNav:not(.scrolled) .product_logo {background-image: url('/images/logo/indie-logo.svg')} .cypher header.transparentNav:not(.scrolled) .product_logo {background-image: url('/images/logo/cypher-logo-white.png')} header.transparentNav nav.mainNav ol > li { border: 0; padding: 0 9px } header.transparentNav nav.mainNav ol > li:hover { background-color: transparent; } body:not(.home) header.transparentNav:not(.scrolled) nav.mainNav ol > li > a { color: #fff; } header.transparentNav nav.mainNav ol > li > a { padding: 6px 3px; line-height: 32px; border-bottom: 3px solid transparent } header.transparentNav:not(.scrolled) nav.mainNav ol > li > a:hover, header.transparentNav:not(.scrolled) nav.mainNav ol > li.selected a, .comparison li.comparison a, .tour:not(.comparison) li.tour a, .resources li.resources a, .comparisons li.resources a, .infographics li.resources a, .news li.news a, .pricing li.pricing a, .stories li.stories a, .story li.stories a, .resellers li.resellers a, .about li.aboutUs a, .contact li.contact a {border-bottom-color: #fff !important} header.transparentNav nav.mainNav ol > li.selected {background: none;} header.transparentNav nav.mainNav ol > li > a:hover, header.transparentNav nav.mainNav ol > li.selected > a, .comparison header.scrolled li.comparison a, .tour:not(.comparison) header.scrolled li.tour a, .resources header.scrolled li.resources a, .comparisons header.scrolled li.resources a, .infographics header.scrolled li.resources a, .demo header.scrolled li.demo a, .pricing header.scrolled li.pricing a, .stories header.scrolled li.stories a, .story header.scrolled li.stories a, .resellers header.scrolled li.resellers a, .about header.scrolled li.aboutUs a, .contact header.scrolled li.contact a {border-bottom-color: #d3d3d3 !important} header.transparentNav nav.mainNav li.formHolder > .dropDown {right: 17px; margin-top: 17px} header.transparentNav nav.mainNav li.formHolder input[type="text"] {padding: 9px 5px} header.transparentNav nav.mainNav li.formHolder input[type="button"] {border-radius: 4px; padding: 6px 15px 5px} header.transparentNav nav.mainNav li.signupHolder > .dropDown {right: 3px; margin-top: 19px; width: 350px} header.transparentNav nav.mainNav li.signupHolder > .dropDown .switch_msg {text-align: center; line-height: 20px} header.transparentNav, header.transparentNav ol > li > a, nav.mainNav ol > li.signupHolder a span, .portal header { transition: all .2s ease-in-out; } @media screen and (max-width: 979px) { header.transparentNav:not(.scrolled) { border-width: 0 0 4px; } } [name="google_conversion_frame"] {display:none !important} body.newSite:not(.home) #contentBody, body.newSite footer nav, .twoColumnHolder {max-width: 1300px} .awards .twoColumnHolder {max-width: 1000px} .comparisons .twoColumnHolder {max-width: 1150px} .brochure .twoColumnHolder {max-width: 1350px} body.newSite footer nav, .twoColumnHolder {margin: 0 auto} /* ====== Homepage ======*/ .home .product_logo {display: none} .home nav {min-height: 75px} .home h2 {font-size: 35px} .home_wrap {padding: 0 15px; overflow: hidden; background-color: #fff} .home_wrap .colorBtn {font-size: 18px} .top_bg_circle {width: 100%; height: 680px; position: absolute; top: 0; overflow: hidden} .top_bg_circle:before {content: ''; width: 3400px; height: 3400px; border-radius: 0 0 50% 50%; position: absolute; bottom: 0; left: 50%; margin-left: -1700px; display: block} .home_intro {margin-top: 150px} .home_intro * {box-sizing: border-box} .home_intro > * {max-width: 1450px} .home_intro .feature_info {position: relative; z-index: 1} .home_intro .feature_info *:not(.colorBtn), .cta_cards a div {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} .home .home_intro .feature_info h1 {margin-bottom: 15px} .home_intro .feature_info h1 img {width: auto; height: 40px; vertical-align: bottom} .home_intro .feature_info h1 .region {background-color: rgba(0,0,0,.3); border-radius: 3px; font-size: 11px; color: #fff; padding: 2px 4px; font-weight: 700; margin: 0 4px; display: inline-block} .home_intro .feature_info h2 {line-height: 1.2; color: #686868; max-width: 500px} .home_intro .feature_info a:not(.colorBtn) {font-size: 23px; margin: 15px 0 30px; display: inline-block; color: #686868} .home_intro .feature_info a:not(.colorBtn):hover {opacity: .8} .home_intro .feature_info a:nth-of-type(2) {margin-right: 20px} .home_intro .feature_visual {margin-top: -65px; margin-left: -30px} .home_intro .feature_visual.feature_lrg {padding-left: 0; position: relative} .home_intro .feature_visual .laptop {position: absolute; z-index: 1; top: 0} .home_intro .hidden {transition: opacity .8s ease-in-out .8s, transform .8s ease-in-out .8s; opacity: 0; transform: translateX(50px)} .home_intro.animate .hidden {opacity: 1; transform: translateX(0)} .home_intro .feature_visual, .home_intro .feature_visual .home_filler {min-height: 721px} .home_intro .feature_visual .home_filler {position: absolute} .home_intro .feature_visual .video-wrapper {position: absolute; z-index: 2; margin: 8.6% 15.1% 0 15.1%} .home_intro .feature_visual .video-wrapper * {width: 100% !important} .home_intro .feature_visual .video-wrapper *:focus {outline: none} .home_intro .lrgTopHeading {margin: 50px auto 110px; font-size: 25px; color: inherit} body:not(.home) .home_intro .feature_info a:not(.colorBtn) {color: #fff} @keyframes hover_shape1 { 0% {transform: translateY(0) scale(1.3)} 50% {transform: translateY(20%) scale(1.2)} 100% {transform: translateY(0) scale(1.3)} } @keyframes hover_shape2 { 0% {transform: translateY(0) scale(1.6)} 50% {transform: translateY(-25%) scale(1.7)} 100% {transform: translateY(0) scale(1.6)} } @keyframes scale_shape1 { 0% {transform: scale(1.3)} 50% {transform: scale(1.1)} 100% {transform: scale(1.3)} } @keyframes scale_shape2 { 0% {transform: scale(1.5)} 50% {transform: scale(1.7)} 100% {transform: scale(1.5)} } @keyframes color_shape_neo1 { 0% {transform: scale(1.3)} 50% {transform: scale(1.1); background-color: #6db9b6} 100% {transform: scale(1.3)} } @keyframes color_shape_neo2 { 0% {transform: scale(1.5)} 50% {transform: scale(1.7); background-color: #56af53} 100% {transform: scale(1.5)} } @keyframes color_shape_matrix1 { 0% {transform: scale(1.3)} 50% {transform: scale(1.1); background-color: #6db9b6} 100% {transform: scale(1.3)} } @keyframes color_shape_matrix2 { 0% {transform: scale(1.5)} 50% {transform: scale(1.7); background-color: #378d79} 100% {transform: scale(1.5)} } @keyframes color_shape_indie1 { 0% {transform: scale(1.3)} 50% {transform: scale(1.1); background-color: #7897b3} 100% {transform: scale(1.3)} } @keyframes color_shape_indie2 { 0% {transform: scale(1.5)} 50% {transform: scale(1.7); background-color: #7575b4} 100% {transform: scale(1.5)} } @keyframes spin_360 { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } @keyframes clockwise_20 { 0% {transform: rotate(0deg)} 50% {transform: rotate(20deg)} 100% {transform: rotate(0deg)} } @keyframes anti_clockwise_45 { 0% {transform: rotate(0deg)} 50% {transform: rotate(-45deg)} 100% {transform: rotate(0deg)} } .home_intro .shapes {position: absolute; top: 0; z-index: 0; width: 100%; height: 100%} .home_intro .shapes > * {position: absolute; display: block; width: 20%; border-radius: 50%; transition: all 1.2s ease-in-out} .home_intro .shapes > *::before, .home_intro .loading:before, .home_intro .loading_circle:before {content: ''; display: block; padding-bottom: 100%} .home_intro .shapes .circle1.preload {top: 30%; left: 31%; width: 22%} .home_intro .shapes .circle2.preload {bottom: 30%; right: 34%; width: 14%} .home_intro .loading {position: absolute; z-index: 1; top: 50%; left: 50%; width: 40%; transform: translate(-50%,-50%)} .home_intro .loading_circle {border: 13px solid #fff; border-top: 13px solid #36b1c4; border-radius: 50%; position: absolute; top: 0; width: 100%; height: 100%; animation: spin_360 2s linear infinite; box-shadow: 0 0 25px rgba(0, 0, 0, 0.2), inset 0 0 25px rgba(0, 0, 0, 0.2)} .matrix .home_intro .loading_circle {border-top-color: #f08a2f} .indie .home_intro .loading_circle {border-top-color: #6061a0} /* option1 */ .home_intro .shapes.option1 .circle1:not(.preload) {animation: scale_shape1 20s infinite} .home_intro .shapes.option1 .circle2:not(.preload) {animation: scale_shape2 20s infinite} .neo .home_intro .shapes.option1 .circle1.preload {background-color: #56af53}/* green peach */ .neo .home_intro .shapes.option1 .circle2.preload {background-color: #dc7d7a} .neo .home_intro .shapes.option1 .loading {border-top-color: #dc7d7a} /* yellow orange */ .matrix .home_intro .shapes.option1 .circle1.preload {background-color: #438778}/* green */ .matrix .home_intro .shapes.option1 .circle2.preload {background-color: #65baa4} .matrix .home_intro .shapes.option1 .loading_circle {border-top-color: #7cc0b9}/* aqua */ .indie .home_intro .shapes.option1 .circle1.preload {background-color: #4f9286}/* dark green */ .indie .home_intro .shapes.option1 .circle2.preload {background-color: #57ad9c}/* green */ /* option2 */ .home_intro .shapes.option2 .circle1:not(.preload) {animation: hover_shape1 20s infinite} .home_intro .shapes.option2 .circle2:not(.preload) {animation: hover_shape2 20s infinite} .home_intro .shapes.option2 .circle1.preload {top: 35%} .home_intro .shapes.option2 .circle2.preload {bottom: 50%} .home_intro .shapes.option2 .circle1.preload {background-color: #0d8198}/* teal */ .neo .home_intro .shapes.option2 .circle2.preload {background-color: #56af53}/* green */ .matrix .home_intro .shapes.option2 .circle2.preload {background-color: #7cc0b9}/* aqua */ .indie .home_intro .shapes.option2 .circle1.preload {background-color: #7897b3}/* blue */ .indie .home_intro .shapes.option2 .circle2.preload {background-color: #6061a0}/* purple */ /* option3 */ .home_intro .shapes.option3 .circle1.preload {left: 45%} .home_intro .shapes.option3 .circle2.preload {right: 54%} .neo .home_intro .shapes.option3 .circle1:not(.preload) {animation: color_shape_neo1 20s infinite} .neo .home_intro .shapes.option3 .circle2:not(.preload) {animation: color_shape_neo2 20s infinite} .matrix .home_intro .shapes.option3 .circle1:not(.preload) {animation: color_shape_matrix1 20s infinite} .matrix .home_intro .shapes.option3 .circle2:not(.preload) {animation: color_shape_matrix2 20s infinite} .matrix .home_intro .shapes.option3 .loading_circle {border-top-color: #0d8198}/* teal */ .indie .home_intro .shapes.option3 .circle1:not(.preload) {animation: color_shape_indie1 20s infinite} .indie .home_intro .shapes.option3 .circle2:not(.preload) {animation: color_shape_indie2 20s infinite} /* final circles */ .home_intro .shapes .circle1 {height: auto; top: 0; left: 5%; animation: scale_shape1 20s infinite} .home_intro .shapes .circle2 {height: auto; bottom: 10%; right: 5%; animation: scale_shape1 20s infinite} .neo .home_intro .shapes .circle1 {background-color: #56af53} .neo .home_intro .shapes .circle2 {background-color: #36b1c4} .matrix .home_intro .shapes .circle1 {background-color: #7cc0b9} .matrix .home_intro .shapes .circle2 {background-color: #048497} .indie .home_intro .shapes .circle1 {background-color: #57ad9c} .indie .home_intro .shapes .circle2 {background-color: #6061a0} @media screen and (max-width: 1750px) { .home_intro .feature_visual, .home_intro .feature_visual .home_filler {min-height: 605px} .home_intro .container:not(.container_center) .feature_visual.feature_lrg img {width: 950px} } @media screen and (max-width: 1440px) { .home h2 {font-size: 33px} .home nav.mainNav .tour {padding-left: 0 !important} .home nav.mainNav .tour a {padding-left: 0 !important} .home_intro .feature_visual, .home_intro .feature_visual .home_filler {min-height: 506px} .home_intro .feature_info h2 {max-width: 400px} .home_intro .container:not(.container_center) .feature_visual.feature_lrg img {width: 800px} .home_intro .shapes .circle1 {top: 5%} .home_intro .shapes .circle2 {right: 2%} } @media screen and (max-width: 1200px) { .home_intro .container:not(.container_center) .feature_visual.feature_lrg img {width: 100%} .home_intro .feature_visual, .home_intro .feature_visual .home_filler {min-height: initial} .home_intro .feature_visual {margin-left: 0} .home_intro {margin-bottom: 80px} } @media screen and (max-width: 1100px) { .home h2 {font-size: 32px} .home_intro .feature_info a:not(.colorBtn) {font-size: 20px; margin-bottom: 20px} } @media screen and (max-width: 1025px) { .home_intro {margin-top: 140px} .home_intro .feature_info a.colorBtn {padding: 8px 21px !important} .home_intro .feature_visual {margin-top: 0} .home_intro .shapes .circle1 {top: 0} } @media screen and (max-width: 980px) { .newSite header {border: none; box-shadow: 0 0 12px rgba(0,0,0,.05) !important} .newSite header .mobileBar {background: #fff} .newSite header .mobileBar .rightMobileBar {color: #222} .newSite header .mobileBar .leftMobileBar {background-color: #38afc1; border-radius: 4px} .newSite.matrix header .mobileBar .leftMobileBar {background-color: #82cac8} .newSite.indie header .mobileBar .leftMobileBar {background-color: #8479ad} .home_intro {margin: 140px 0 120px} .home_intro .feature_info h1 img {height: 33px} .home_intro .feature_info h2 {font-size: 27px} .home_intro .feature_visual {margin-top: -30px} .home_intro .feature_visual.feature_lrg {padding-left: 20px} } @media screen and (min-width: 768px) { .home_intro .feature_info {width: 42%} .home_intro .feature_visual {width: 57%} .why_choose_us {margin-top: 100px} } @media screen and (max-width: 767px) { .home_intro {margin: 100px 0 80px} .home_intro .feature_info {max-width: 470px} .home_intro .feature_info h2 {max-width: 100%} .home_intro .feature_info a {margin-left: 10px; margin-right: 10px !important} .home_intro .feature_visual {margin: 50px 0 0 0} .home_intro .container:not(.container_center) .feature_visual {position: relative} .home_intro .container:not(.container_center) .feature_visual.feature_lrg img {margin-top: 0} .home_intro .feature_visual.feature_lrg {padding: 0} .why_choose_us {margin-top: 50px} } @media (min-width: 560px) and (max-width: 767px) { .home_intro .feature_visual .home_filler {left: 50%; transform: translateX(-50%); width: 500px} } @media (max-width: 540px) { .home_intro {margin-top: 70px} .home_intro > * {padding: 0} .home_intro .feature_info h1 img {height: 30px} .home_intro .loading_circle {border-width: 8px} .home_intro .shapes .circle1 {left: 0} .home h2 {font-size: 24px} .home p {font-size: 16px !important} .home a.colorBtn {font-size: 15px} .stagger_children_up > * {opacity: 1} } @media (max-width: 330px) { .home_intro .feature_info h2 {font-size: 25px} } .home section > h2 + p {font-size: 18px; line-height: 1.7; width: 737px; max-width: 100%; margin: 20px auto 10px; color: #777} .why_choose_us > p {margin-top: 35px} .why_choose_us .buttons a {margin: 10px} .why_choose_us_icons {margin-bottom: 60px} .why_choose_us_icons div {margin-top: 10px; display: inline-block; width: 330px; padding-top: 340px; max-width: 100%} .why_choose_us_icons div {background-repeat: no-repeat; background-position: top} .why_choose_us_icons div:nth-child(2) {background-size: 385px} .neo .why_choose_us_icons div:nth-child(1) {background-image: url('/images/responsive/home/neo/icon-powerful-features.svg')} .neo .why_choose_us_icons div:nth-child(2) {background-image: url('/images/responsive/home/neo/icon-easy-to-implement.png')} .neo .why_choose_us_icons div:nth-child(3) {background-image: url('/images/responsive/home/neo/icon-easy-to-use.svg')} .neo .why_choose_us_icons div:nth-child(4) {background-image: url('/images/responsive/home/neo/icon-reduced-costs.svg')} .matrix .why_choose_us_icons div:nth-child(1) {background-image: url('/images/responsive/home/matrix/icon-powerful-features.svg')} .matrix .why_choose_us_icons div:nth-child(2) {background-image: url('/images/responsive/home/matrix/icon-easy-to-implement.png')} .matrix .why_choose_us_icons div:nth-child(3) {background-image: url('/images/responsive/home/matrix/icon-easy-to-use.svg')} .matrix .why_choose_us_icons div:nth-child(4) {background-image: url('/images/responsive/home/matrix/icon-reduced-costs.svg')} .indie .why_choose_us_icons div:nth-child(1) {background-image: url('/images/responsive/home/indie/icon-powerful-features.svg')} .indie .why_choose_us_icons div:nth-child(2) {background-image: url('/images/responsive/home/indie/icon-easy-to-implement.png')} .indie .why_choose_us_icons div:nth-child(3) {background-image: url('/images/responsive/home/indie/icon-easy-to-use.svg')} .indie .why_choose_us_icons div:nth-child(4) {background-image: url('/images/responsive/home/indie/icon-reduced-costs.svg')} .why_choose_us_icons span {font-size: 18px; color: #999} .side_bg_circle {width: 1115px; height: 1115px; position: absolute; margin-top: -20px; right: 57%; overflow: hidden} .side_bg_circle:before {content: ''; background: linear-gradient(#dff6fa, #fff); width: 100%; height: 100%; border-radius: 50%; position: absolute; display: block} .home_wrap ~ #contentFooter {position: relative} .our_clients {padding-top: 160px} .our_clients h2 {font-size: 31px} .our_clients .container {max-width: 1350px} .our_clients .container .colorBtn {margin-top: 20px} .our_clients .container .feature_visual {margin-top: 60px; display: flex; flex-flow: column wrap; height: 306px} .our_clients .container .feature_visual > * {margin: 0 0 60px; display: flex; justify-content: center; align-items: center; flex-grow: 0} .our_clients .container .feature_visual > * img {max-height: 93px; width: auto; margin-top: 0} @media screen and (max-width: 1300px) { .our_clients h2 {font-size: 25px} .our_clients .container .feature_visual {padding: 0} } @media screen and (max-width: 1200px) { .our_clients .container .feature_visual {height: 220px} .our_clients .container .feature_visual > * {margin-bottom: 40px} .our_clients .container .feature_visual > * img {max-height: 70px} } @media screen and (max-width: 900px) { .our_clients .container {padding: 0} .our_clients .container .feature_visual {height: 280px} .our_clients .container .feature_visual > * {margin-bottom: 20px} .our_clients .container .feature_visual > * img {max-height: 73px} .our_clients .container .feature_visual > *:last-child {display: none} } @media (max-width: 570px) { .our_clients .container .feature_visual {height: 228px} .our_clients .container .feature_visual > * img {max-height: 56px} .our_clients .container .feature_visual > *:last-child {display: none} } @media (max-width: 440px) { .our_clients .container .feature_visual {height: 385px} .our_clients .container .feature_visual > *:last-child {display: block} .neo .our_clients .feature_visual > *:nth-child(1) {order: 1} .neo .our_clients .feature_visual > *:nth-child(2) {order: 6} .neo .our_clients .feature_visual > *:nth-child(3) {order: 7} .neo .our_clients .feature_visual > *:nth-child(4) {order: 2} .neo .our_clients .feature_visual > *:nth-child(5) {order: 3} .neo .our_clients .feature_visual > *:nth-child(6) {order: 8} .neo .our_clients .feature_visual > *:nth-child(7) {order: 9} .neo .our_clients .feature_visual > *:nth-child(8) {order: 4} .neo .our_clients .feature_visual > *:nth-child(9) {order: 5} .neo .our_clients .feature_visual > *:nth-child(10) {order: 10} } .indie_client_holder {padding-top: 160px; max-width: 1200px; margin: auto} .indie_clients {display: flex; flex-wrap: wrap; justify-content: center; margin-top: 40px} .indie_clients > * {width: calc(33% - 26px); padding: 34px; box-sizing: border-box; background-color: #fff; box-shadow: 0 0 30px rgba(0,0,0,.1); margin: 13px; border: 2px solid #f4f4f4; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; align-items: center; position: relative} .indie_clients > *:before {content: ''; position: absolute; bottom: 0; width: 100%; border-bottom: 4px solid #57ac9d} .indie_clients > * .client {border-radius: 50%; border: 15px solid #f5f5f5; margin-bottom: 20px; overflow: hidden} .indie_clients > * p {color: #7f7f7f; line-height: 1.6} .indie_clients > * div {margin: auto 0 0; padding-top: 25px} .indie_clients > * div strong {color: #454545; display: block; margin-bottom: 5px; font-size: 19px} .indie_clients > * div span {color: #57ac9d} @media (max-width: 1023px) { .indie_clients > * {width: calc(50% - 26px)} } @media (max-width: 767px) { .indie_clients > *:last-child {width: calc(100% - 26px)} } @media (max-width: 560px) { .indie_clients > *, .indie_clients > *:last-child {width: calc(100% - 10px); padding: 28px; margin: 5px} .indie_clients > * p {font-size: 15px !important} .indie_clients > * .client {margin-bottom: 10px} .indie_clients > * div {padding-top: 15px} } .our_regions {position: relative; z-index: 1; padding-top: 160px; max-width: 1350px; margin: auto} .our_regions h2 {margin-bottom: 28px} .our_regions .select_region {text-align: center; color: #9c9c9c; font-size: 23px} .our_regions .map_legend {margin: 2px 0 0; position: absolute; right: 2px; z-index: 1; background: #fff} .home.neo .matrix_legend, .home.neo .indie_legend, .home.matrix .neo_legend, .home.matrix .indie_legend, .about .map_legend .website_legend {display: none} .our_regions .map_wrap {position: relative; z-index: 1} .our_regions #map {margin-top: 20px; border: 12px solid #fff; border-radius: 10px; box-shadow: 0 0 50px rgba(0,0,0,.1); box-sizing: border-box; background: #fff; height: 650px; position: relative} .our_regions img[src*='shape'] {position: absolute; z-index: 0; opacity: 1} .our_regions img[src*='shape1.svg'] {left: -200px; bottom: -40px; width: 350px; animation: clockwise_20 60s linear infinite} .our_regions img[src*='shape2.svg'] {right: -250px; top: 200px; width: 400px; animation: clockwise_20 40s linear infinite} .our_regions img[src*='shape3.svg'] {right: -250px; top: 250px; width: 150px; animation: anti_clockwise_45 20s linear infinite; display: none} .map_legend *[class*='legend'] span {display: inline-block; width: 5px; height: 5px; position: relative; top: -2px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15)} .map_legend .hq_legend span {background: #e67308} .map_legend .offices_legend span {background: #e9d128} .map_legend .neo_legend span {background: #1e97a0} .map_legend .matrix_legend span {background: #4d6f72} .map_legend .indie_legend span {background: #7c73b1} .map_legend .website_legend span {background: #89c97b} .jvectormap-zoomin, .jvectormap-zoomout {display: none} body .jvectormap-tip {z-index: 5; background: #5e5f5f; border: 0; padding: 4px 10px; border: 2px solid rgba(0,0,0,0.1); border-radius: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.4)} body .jvectormap-tip i {margin: -4px -6px 0 0} @media screen and (max-width: 1200px) { .our_regions #map {border-width: 10px} .our_regions {padding-top: 110px} } @media screen and (max-width: 980px) { .our_regions #map {height: 400px} } @media screen and (max-width: 768px) { .our_regions #map {height: 350px} } @media screen and (max-width: 500px) { .our_regions #map {height: 250px} .our_regions .map_legend {font-size: 12px; margin: 0 -2px; width: 100%} .our_regions .map_legend div {margin: 0 2px} } @media screen and (max-width: 400px) { .our_regions {text-align: center} .our_regions #map {height: 200px} .home .our_regions #map {margin-top: 0} .home .our_regions .map_wrap {margin: 0 -13px} .our_regions .select_region {background: #fff; display: inline-block; border-radius: 20px; padding: 2px 20px; position: relative; z-index: 2; margin: 0 0 5px} } .target_market {position: relative; z-index: 1; clear: both; margin: 160px 0; max-width: 100%} .target_market_txt {text-align: center; position: absolute; z-index: 1; margin-top: -50px; width: 100%} .target_market_txt .target_market_width {width: 570px; margin: auto} .target_market_txt h2 {font-size: 33px; margin-bottom: 30px} .target_market_txt a {display: inline-block; margin: 10px 0} .target_market_imgs {width: 100%; max-width: 2100px; display: flex; justify-content: space-between} .target_market_imgs img {transition: margin .7s ease-in-out, width .1s ease-in-out; max-width: 923px; width: 50%; height: auto} .target_market_imgs img:first-child {margin-left: -20%} .target_market_imgs img:last-child {margin-right: -20%} .target_market_imgs img.animate:first-child {margin-left: -10%} .target_market_imgs img.animate:last-child {margin-right: -10%} @media screen and (max-width: 1800px) { .target_market {margin: 120px 0} .target_market_txt .target_market_width {max-width: 460px} .target_market_txt h2 {font-size: 29px} .target_market_imgs {max-width: 1600px} } @media screen and (max-width: 1500px) { .target_market_txt .target_market_width {max-width: 400px} .target_market_txt h2 {font-size: 26px} .target_market_imgs {max-width: 1500px} } @media screen and (max-width: 1400px) { .target_market {margin: 90px 0} .target_market_txt {margin-top: -20px} .target_market_txt .target_market_width {max-width: 350px} .target_market_txt h2 {font-size: 23px} .target_market_imgs {max-width: 1300px} } @media screen and (max-width: 1200px) { .target_market_imgs img:first-child {margin-left: -15%} .target_market_imgs img:last-child {margin-right: -15%} } @media screen and (min-width: 701px) { .target_market {display: flex; align-items: center} .target_market_imgs {position: relative; left: 50%; transform: translate(-50%,0)} } @media screen and (max-width: 700px) { .target_market_txt {position: relative} .target_market_txt .target_market_width {max-width: 100%} .target_market_imgs {display: block; text-align: center; margin-top: 30px} .target_market_imgs img {width: 70%; margin: 0 !important} .target_market_imgs img:last-child {display: none} .target_market_txt .buttons a {margin: 6px 3px} .target_market_txt .buttons br {display: none} } @media screen and (max-width: 540px) { .target_market_imgs img {width: 100%} } .indie_process_holder {padding-top: 160px; max-width: 1100px; margin: auto} .indie_process_holder h2 {max-width: 900px; margin: auto} .indie_process {position: relative; width: 100%; height: 250px; margin: 50px 0 0} .indie_process .center-line {position: absolute; width: 100%; height: 1px; bottom: 55px; transform: translateY(-50%); background: #e7e7e7} .indie_process .content {display: flex} .indie_process .point {width: 20%; position: relative; min-height: 250px} .indie_process .point:first-child:before, .indie_process .point:last-child:before {content: ''; position: absolute; height: 100%; width: 50%; background-color: #fff} .indie_process .point:last-child:before {right: 0} .indie_process .point_img {position: absolute; top: 35%; left: 50%; transform: translate(-50%,-60%); transition: all .3s ease-in-out} .indie_process .dot {position: absolute; bottom: calc(55px - 13px); left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #838383; font-size: 14px; border: 1px solid #e7e7e7; display: flex; justify-content: center; align-items: center; transition: all .3s ease-in-out} .indie_process .point.selected .dot {color: #fff; background-color: #57ac9d; border-color: transparent; box-shadow: 0 10px 8px rgba(0,0,0,.1)} .indie_process .point_txt {position: absolute; top: calc(100% - 20px); width: 100%; color: #838383; text-align: center} .indie_process .point_txt span {width: 100%; max-width: 200px; display: inline-block} @media (min-width: 700px) { .indie_process .point_img {opacity: 0; transform: translate(-50%,-60%)} .indie_process .point_img .mobile_icon {display: none} .indie_process.animate .point_img {opacity: 1; transform: translate(-50%,-50%)} } @media (max-width: 1024px) { .indie_process_holder h2 {max-width: 800px} } @media (max-width: 900px) { .indie_process .point_img img {width: 130px} .indie_process .point_txt {font-size: 15px} } @media (max-width: 700px) { .indie_process_holder {padding-top: 100px} .indie_process {height: auto; margin: 20px auto 0; max-width: 350px} .indie_process .center-line {height: 100%; width: 1px; left: 50%; bottom: auto; transform: translateY(0)} .indie_process .content {flex-direction: column} .indie_process .point {min-height: 0; width: 100%} .indie_process .point > * {display: flex; align-items: center; width: 100%; position: relative} .indie_process .point:first-child:before, .indie_process .point:last-child:before {height: 50%; width: 100%} .indie_process .point:first-child:before {top: 0} .indie_process .point:last-child:before {right: auto; top: auto; bottom: 0} .indie_process .point_img {position: static; transform: translate(-7px,6%); width: 50%; text-align: center} .indie_process .point_img .desktop_icon {display: none} .indie_process .dot {position: static; flex-shrink: 0; transform: none} .indie_process .point_txt {position: static; text-align: left; width: 50%; box-sizing: border-box; padding-left: 20px} .indie_process .point_txt span {white-space: normal} } @media (max-width: 400px) { .indie_process .point > * {height: 105px} .indie_process .point_img img {width: 110px} .indie_process .point_txt {font-size: 14px} } .mini_comparison {max-width: 1050px; margin: 80px auto 50px} .mini_comparison table {margin: 50px auto 30px; max-width: 850px} .mini_comparison th {border-radius: 8px 8px 0 0; padding: 13px 8px !important; border: 1px solid #fff; border-bottom-width: 0; font-size: 19px; color: #fff} .mini_comparison th:first-child {background: transparent; color: #222} .mini_comparison th.neo {background-color: #36b1c4} .mini_comparison td {line-height: 1.5; font-size: 15px} .mini_comparison td i:after {width: 16px; height: 16px; top: 0; background-image: url(/images/icons/transparent-tick.svg)} .mini_comparison td i.xCross:after {background-image: url(/images/icons/transparent-cross.svg)} .mini_comparison i.tick:after {background-color: #008093} .mini_comparison th, .mini_comparison td:not(.neo) i.tick:after {background-color: #a5a5a5} .mini_comparison td:not(.neo) i.xCross:after {background-color: #ce433e} @media (min-width: 769px) { .mini_comparison tr > *:not(:first-child) {text-align: center} } .home_news {text-align: center; margin: 100px auto 150px} .indie .home_news {margin-top: 150px} .home_news .newsHolder {margin: 50px auto 0} @media (max-width: 1470px) { .home_news .newsHolder > div:last-child {display: none} } @media (max-width: 723px) { .indie .home_news {margin-top: 100px} .home_news .newsHolder > div {width: calc(50% - 3%)} .home_news .newsHolder > div:nth-child(3) {display: none} } @media (max-width: 460px) { .home_news .newsHolder > div {width: 100%} } .cta_cards {position: relative; max-width: 100%; width: 1400px; margin: 35px auto 100px; display: flex; justify-content: center; flex-wrap: wrap} .cta_cards a {background: #fff; box-shadow: 0 0 40px rgba(0,0,0,.1); margin: .5%; min-width: 385px; width: 32%; padding: 30px 34px; box-sizing: border-box; display: flex; align-items: center} .cta_cards a:hover {box-shadow: 0 0 60px rgba(0,0,0,.2)} .cta_cards a svg {margin-right: 20px} .cta_cards a svg.cta_icon_1 {width: 150px} .cta_cards a svg.cta_icon_2 {width: 160px} .cta_cards a svg.cta_icon_3 {width: 170px} .matrix .cta_svg_bg {fill: #85acaf} .cta_cards a .heading {font-size: 26px} .cta_cards a p {margin-bottom: 0; font-size: 18px; line-height: 1.4; color: #222} .cta_cards a p i {margin-top: -3px} @media screen and (max-width: 1440px) { .why_choose_us_icons div {width: 310px; background-size: 345px !important; padding-top: 305px} } @media screen and (max-width: 1300px) { .why_choose_us_icons div {width: 245px; background-size: 280px !important; padding-top: 250px} } @media screen and (max-width: 1240px) { .tour_section .digital_media_bg {margin-top: 80px} } @media screen and (max-width: 1100px) { body.neo .mainNav .news, body.matrix .mainNav .news {display: none} .side_bg_circle {margin-top: -120px; right: 61%} } @media screen and (max-width: 1025px) { body.matrix .mainNav .resources {display: none} .why_choose_us_icons div {width: 230px; background-size: 265px !important; padding-top: 235px} } @media screen and (min-width: 801px)and (max-width: 1023px) { .side_bg_circle {margin-top: -160px; right: 60%} } @media screen and (max-width: 980px) { .why_choose_us_icons {max-width: 600px; margin-left: auto; margin-right: auto} .why_choose_us_icons div {width: 255px; background-size: 290px !important; padding-top: 260px} } @media (max-width: 900px) { .cta_cards a {padding: 20px 25px; min-width: 365px; margin: 2%} .cta_cards a p {font-size: 16px} } @media screen and (max-width: 800px) { .side_bg_circle {margin-top: 0} } @media (max-width: 700px) { .why_choose_us_icons div {width: 140px; background-size: 175px !important; padding-top: 145px} .why_choose_us_icons span {font-size: 15px} } @media (min-width: 560px) { .why_choose_us .buttons {width: 500px; margin: auto; display: flex} .why_choose_us .buttons a {width: 50%; margin: 0 10px} } @media (max-width: 540px) { .side_bg_circle {right: 46%} } @media (max-width: 400px) { .cta_cards {margin: 10px 0} .cta_cards a {display: block; text-align: center; min-width: 100%; margin: 8px 0} .cta_cards a svg {width: 100px !important} .indie .home_wrap .why_choose_us .colorBtn {font-size: 16px} .tour_section .digital_media_bg {margin-top: 60px} .home_news {text-align: center; margin: 60px auto} } /* ====== alternateBg ======*/ .alternateBg {padding: 40px 20px} .news .alternateBg {padding: 34px 0} .comparisons .alternateBg:first-of-type, .brochure .alternateBg:first-of-type {padding-top: 0} .about .alternateBg:first-of-type {padding-top: 55px; padding-bottom: 65px} .implementation .alternateBg:first-of-type {padding-top: 35px; padding-bottom: 35px} .alternateBg:nth-of-type(2n + 2) { background-color: #f9f9f9; box-shadow: inset 0 2px 2px rgba(0,0,0,.1), inset 0 -2px 2px rgba(0,0,0,.1); } @media screen and (max-width: 1440px) { .alternateBg .columnR .twoColumnHolder {padding-right: 32px !important} .pricing .optionsRibbon {overflow: visible} } @media screen and (max-width: 979px) { .alternateBg {padding: 40px 15px} .alternateBg .imgHolder img {margin-top: 30px} } @media screen and (max-width: 559px) { .alternateBg {padding: 35px 15px} } /* ====== Other Main Site Pages ======*/ .newSite .carOverlay {background-size: 1000px 100%;} .newSite .fullColumn div.twoThirds {max-width: 1340px;} .newSite #wrapper:not(.resources) .fullColumn { box-shadow: none; border-top: 1px solid #e2e0e0; } .newSite .about .twoColumnHolder h2 + p { font-size: 18px; line-height: 28px; text-align: center; } .imgHolder {overflow: hidden} .imgHolder img {margin: 70px 0 -4px; max-width: 100%} /* About Timeline */ .timeline {margin-top: 30px} .timeline ul {position: relative} .timeline ul:before { content: ''; top: 0px; right: 50%; width: 2px; background: #e8e8e8; height: 100%; position: absolute; z-index: 0; } .timeline ul li { list-style: none; overflow: hidden; display: list-item; } .timeline ul .timeline-date { width: 50%; float: left; position: relative; } .timeline ul .timeline-date::after, .timeline-text > div:first-child:after { content: ''; position: absolute; height: 7px; width: 7px; background-color: #c9c9c9; top: 41px; right: -6px; border-radius: 15px; z-index: 10; border: solid 3px #fff; } .timeline ul .timeline-date p { margin: 36px 20px 0 20px; text-align: right; color: #858585; font-size: 19px !important; } .timeline ul .timeline-text { width: 50%; max-width: 500px; float: left; position: relative; top: 10px; } .timeline .timeline-text > div { margin: 10px 5px 20px 20px; position: relative; padding: 5px 10px; border-radius: 3px; color: #fff; } .timeline .timeline-text > div h3, .timeline .timeline-text > div p { margin: 10px; line-height: 23px; font-size: 16px; } .timeline .timeline-text > div p a { color: #fff; text-decoration: underline; } .timeline ul li:nth-child(even) .timeline-date::after {left: -7px; right: auto;} .timeline ul li:nth-child(even) .timeline-date p {margin: 37px 20px 0; text-align: left;} .timeline-footer-wrap { text-align: center; padding-bottom: 15px; margin-top: 25px; } .timeline-footer-wrap > div { display: inline-block; padding: 10px 20px; position: relative; border-radius: 3px; color: #fff; } .timeline-arrow { position: absolute; width: 10px; height: 14px; top: 12px; left: -10px; overflow: hidden; } .timeline-arrow:after { position: absolute; width: 10px; height: 10px; top: 2px; left: 6px; content: ''; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .timeline-footer-wrap .timeline-arrow { top: -10px; left: 50%; margin-left: -7px; width: 14px; height: 10px; } .timeline-footer-wrap .timeline-arrow:after {top: 6px; left: 1px;} .implementation .timeline ul .timeline-date p { width: 50px; height: 50px; color: #fff !important; text-align: center !important; line-height: 50px; border-radius: 50%; background-color: #cfcfcf; margin-top: 23px !important; transform: scale(0.7); opacity: 0 } .implementation .timeline ul .timeline-date p.animate {opacity: 1; transition: all .7s ease; transform: scale(1)} .implementation .timeline ul .timeline-text {max-width: 600px} .implementation .timeline ul .timeline-text h3 {color: inherit} .implementation .timeline ul .timeline-text > div:first-child {margin-bottom: 0; border-radius: 10px 10px 0 0} .implementation .timeline ul .timeline-text > div + div {background-color: #fff !important; border: 1px solid #e1e1e1; margin-top: 0; border-radius: 0 0 10px 10px} .implementation .timeline ul .timeline-text > div + div * {color: #222} @media screen and (max-width: 559px) { .timeline ul:before {right: auto; left: 4px} .timeline ul .timeline-date {width: auto; float: none !important} .timeline ul .timeline-date p {text-align: left; margin-top: 0 !important} .timeline ul .timeline-date::after {content: none} .timeline ul .timeline-text {width: auto; float: none} .timeline-text > div:before {top: 10px} .timeline-text > div:first-child:after {top: 12px; left: -32px} .timeline ul li {margin-bottom: 10px; padding-left: 10px} .implementation .timeline ul li {overflow: visible} .implementation .timeline ul .timeline-date p {width: 24px; height: 24px; line-height: 24px; margin-top: 17px !important; font-size: 12px !important; position: absolute; left: -37px; z-index: 40} } @media screen and (min-width: 560px) { .alternateBg h2, .resources .fullColumn h2, #contentWrap .lrgTopHeading { font-size: 27px; margin-bottom: 30px; } .resources .fullColumn h2 {margin-bottom: 0} #contentWrap .lrgTopHeading.long { font-size: 24px } #contentWrap .lrgTopHeading {max-width: 1100px; margin: 35px auto 5px} .indie .tour #contentWrap .lrgTopHeading {max-width: 700px} .resellers_portal #contentWrap .lrgTopHeading {margin-bottom: 24px} .services .alternateBg h2, .stories #contentWrap p.lrgTopHeading {margin-bottom: 0} .timeline {margin-top: 50px} .timeline-arrow {top: 20px} .timeline ul li:nth-child(even) .timeline-arrow {right: -10px; left: auto} .timeline ul li:nth-child(even) .timeline-arrow:after {left: -6px} .timeline-text > div:first-child:after {display: none} .implementation .timeline ul .timeline-text h3 {line-height: 23px; font-size: 20px} .implementation .timeline ul li:nth-child(odd) .timeline-date p {float: right} #wrapper:not(.implementation) .timeline ul li:nth-child(even) .timeline-text > div p {text-align: right} .timeline ul li:nth-child(even) .timeline-text > div {margin-left: 5px; margin-right: 20px} .timeline ul li:nth-child(even) .timeline-date, .timeline ul li:nth-child(even) .timeline-text {float: right} } @media screen and (min-width: 980px) { .alternateBg h2, .resources .fullColumn h1, #contentWrap .lrgTopHeading { font-size: 32px; margin-bottom: 40px; } #contentWrap .lrgTopHeading.long { font-size: 28px } #contentWrap .lrgTopHeading {margin-bottom: 20px} .faq #contentWrap .lrgTopHeading {margin-bottom: 0} .contact #contentWrap .lrgTopHeading {margin-bottom: 7px} .brochure .floatingIntro .brochure_header_text {padding: 36px 50px 30px} .brochure.webinar .columnR > * > p:first-child {margin-top: 10px} .newSite .fullColumn, .fullColumn:nth-child(2n + 2) {border-bottom: 0} .timeline {margin-top: 70px} .implementation h3 {font-size: 23px} .implementation .timeline ul .timeline-text h3 {line-height: 28px; font-size: 25px} } /* Custom user portal header */ .portal.customHeader #wrapper {padding-top: 0 !important} .portal .custom-header {background-color: #fff; max-width: 100%; box-sizing: border-box} .portal .custom-header .mobileBar {height: 40px}