/* ===================
   Transitions
   ===================*/
#socialBlocks li a, .colorBtn, .navButtons a.button, .tour #contentHeader a, .tour_section a, .product_blocks a, .logo_white_btn {
  -webkit-transition: all .15s ease;
  -moz-transition: all .15s ease;
  transition: all .15s ease;
}
.homeCTAs a, .homeCTAs a figure img, .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, .featureFloating .featureContent div a img, .newsHolder div > a, ul.imgIcons li, ul.imgIcons li a, .price_block a .contact, .cta_cards a, .plansComparisonBody .tick, .comparisonsBlocks a.contentBlock {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.imgDivider .phoneHolder div, .imgDivider > img, .revealUp, .revealUpOnLoad, a.siteRibbon, .features .homeTour#section1 h1, .lrgTopHeading:not(.storyHeading), .implementation .alternateBg h2, .mapHolder a.marker {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  transition: all .7s ease;
}
.imgDivider > img, .carouselNav li, .comparisons .columnR img, .home_intro.animate img:not(.filler), .brochure .columnR img {
  -webkit-transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;s
transition: all .8s ease-in-out
}
.revealUp, .revealUpOnLoad, .comparisons .columnR img, .brochure .columnR img {
  transform:translateY(50px); -ms-transform:translateY(50px);
  -moz-transform:translateY(50px); -webkit-transform:translateY(50px); -o-transform:translateY(50px)
}
.mapHolder a.marker, .home_intro img:not(.filler) {
  transform:translateY(-50px); -ms-transform:translateY(-50px);
  -moz-transform:translateY(-50px); -webkit-transform:translateY(-50px); -o-transform:translateY(-50px)
}
#wrapper.contact a.contentBlock:hover, .imgIcons a:hover {
  -ms-transform: translate(-2px,-2px);
  -webkit-transform: translate(-2px,-2px);
  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 {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.imgDivider .phoneHolder div, .imgDivider > img {
  transform:translateY(300px); -ms-transform:translateY(300px);
  -moz-transform:translateY(300px); -webkit-transform:translateY(300px); -o-transform:translateY(300px)
}

.imgDivider.laptopScreen > img {
  transform:translateY(140px); -ms-transform:translateY(140px);
  -moz-transform:translateY(140px); -webkit-transform:translateY(140px); -o-transform:translateY(140px)
}
.revealUp, .revealUpOnLoad, .comparisons .columnR img, .carouselNav li, .imgIcons li, .mapHolder a.marker, .home_intro img:not(.filler), .plansComparisonBody .tick, .brochure .columnR img, a.siteRibbon {
  opacity: 0
}
.revealUp.animate, .revealUpOnLoad.animate, .imgDivider.animate .phoneHolder div, .imgDivider.animate > img, .carouselNav.animate li, .comparisons .columnR img.animate, .features .homeTour#section1 h1.animate, .lrgTopHeading.animate, .implementation .alternateBg h2.animate, ul.imgIcons.animate li, .mapHolder.animate a.marker, .revealDownOnLoad.animate, .home_intro.animate img:not(.filler), .plansComparisonBody.animate .tick, .brochure .columnR img.animate {
  opacity: 1;
  transform:translateY(0px); -ms-transform:translateY(0px);
  -moz-transform:translateY(0px); -webkit-transform:translateY(0px); -o-transform:translateY(0px)
}
a.siteRibbon.animate {
  opacity: 1
}

/* ===================
   Font Sizes
   ===================*/
h1, h2, .lrgTopHeading, #wrapper h4, .featuresHome h2, #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
}
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;
}
.homeCTAs h1, .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, .features .homeTour h1, .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 ol > li > a, nav.footerNav div h2, nav.footerNav div .heading, .resellers #contentBody .contentBlock p {
  font-size: 19px;
}
header.transparentNav nav.mainNav ol > li > a, .homeWrap .bottomLinks a, .pricing #contentWrap hgroup p, #facebox .frmLogin button, #facebox .smlSignupButton, form#reseller button {
  font-size: 18px;
}
#loginForm, #loginForm input, #loginForm button, #facebox .frmLogin, #facebox .frmLogin input, .bjqs-caption h2, h5 {
  font-size: 17px;
}
.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 #centreColumn .rightColumn h2 {margin-top: 0}
nav.footerNav div ol li a, #socialBlocks li a, footer a.language, footer a.language, .bjqs-caption p, .studentModuleView table td span:not(.px16) {
  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.png') 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.png') 0 50% no-repeat;
  background-size: 180px auto;
}
.indie header .product_logo, .indie .mobileLogo .product_logo {
  background: url('/images/logo/indie-logo.png') 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;}

nav.mainNav ol > li:nth-last-child(2) {border-width: 0 0 0 1px}
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: 17px; padding: 4px 10px}
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}

/* 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;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  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: 250px;
  -webkit-transition: opacity 300ms 50ms ease-out;
  -moz-transition: opacity 300ms 50ms ease-out;
  transition: opacity 300ms 50ms ease-out;
}
.no-touch ul.dotNav li a span, ul.dotNav {
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}

/*------------------- Body Content -------------------*/
#wrapper {  /* footer grey to extend if page is too short */
  min-height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#contentWrap {
  min-height: calc(100vh - 105px);
  position: relative;
  z-index: 5;
}
.portal #contentWrap, .portal #contentBody {
  overflow: hidden;
}
/* -- 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: url('/images/icons/icons.svg') no-repeat; display: inline-block}
#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;
}
.no-rgba .bjqs-caption a {
  background: white;
  filter: alpha(opacity=80);
}
.no-rgba .bjqs-caption a:hover {
  filter: alpha(opacity=100);
}
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, #wrapper:not(.tour) #parallaxHeader 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}

.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;
}
#contentHeader.multiline h2 {display: block; margin-top: -3px}
.narrow_header #parallaxHeader #contentHeader {height: 96px; min-height: 96px; margin-bottom: 40px; padding-top: 16px}
.newSite #contentHeader .pageHeadingWrap {
  vertical-align: middle;
  display: table-cell;
}

.floatingNav {margin: -68px auto 0; position: absolute; right: 45px; margin-right: 2px; z-index: 1001}
.resources .floatingNav {margin-top: -108px}
.indie .resources .floatingNav {margin-top: -80px}
body:not(.indie) .about .floatingNav {margin-top: -53px}
.news .floatingNav, .stories .floatingNav, .pricing .floatingNav, .indie .about .floatingNav {margin-top: -39px}

.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}
.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}
.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 10px; 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 ul li a {font-size: 15px; padding: 3px 0 3px 10px; margin-right: 15px}
.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-right: 8px}
.tour .floatingNav ul li a div {display: inline-block}
.tour .floatingNav ul li a {opacity: .6}
.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}
.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; flex-direction: row; justify-content: center; flex-wrap: wrap}
.tour .side_feature {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: 4px}

.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, .tour_standards {background: #e8e8e8}
.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-image: url('/images/responsive/tour/matrix/assessment-powerful-scores-table.jpg'); 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_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}
.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_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 {box-shadow: 0 12px 24px 0 rgba(40, 43, 49, .16)}
.newSite .colorBtn:hover, .newSite a.smlSignupButton:hover, .logo_white_btn: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: 350px !important}
}
@media (max-width: 900px) {
  .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 {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}
}

/* Features */
.features .homeTour {padding-left: 0; padding-right: 0}
.features .fullColumn, .fullColumn:nth-child(2n + 2) {background: none; box-shadow: none}
.features .fullColumn:last-child, .features .fullColumn {border-bottom: 0}
.features .fullColumn div.twoThirds {padding-bottom: 60px}
.features .fullColumn:last-child div.twoThirds {padding-bottom: 0}
.features .fullColumn hgroup {margin-top: -5px}
.features .fullColumn img {max-width: 538px; -moz-box-sizing: initial; box-sizing: initial; border-color: #d5d5d5}
.features .fullColumn img.plain {border-color: transparent; box-shadow: none}

.features .homeTour h1, .lrgTopHeading {padding: 0 18px}
.features .homeTour h1, .lrgTopHeading, .alternateBg h2 {margin-bottom: 35px; text-align: center}
.features .homeTour h1 {margin-bottom: 0}

.features .homeTour:not(#section6) {padding-bottom: 0}
.features .homeTour > img {margin-bottom: -4px; max-width: 100%}

.carouselNav {
  text-align: right;
  border-right: 1px solid #e7e7e7;
  float: left;
  position: relative;
  z-index: 2;
  width: 14%;
  min-width: 100px;
  display: table
}
.homeTour:nth-child(odd) .carouselNav {border-color: #d6d6d6}
.carouselNav ul, .feature-carousel .image, .feature-carousel .sideText {display: table-cell; vertical-align: middle}
.carouselNav ul a {color: #9a9a9a; padding: 6px 20px 6px 0; display: inline-block; line-height: 22px}
.carouselNav ul div {
  height: 30px;
  width: 3px;
  margin: 0;
  transition: .8s ease-in-out;
  -webkit-transition: .8s ease-in-out;
  position: absolute;
  top: 0; right: -2px
}
.carouselNav, .feature-carousel, .feature-carousel .owl-item > div {height: 352px}

.owl-item {cursor: default} /* remove text cursor on carousel */
.owl-nav.disabled {display: none}
.feature-carousel {overflow: hidden; float: left; width: 85%; opacity: 0; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out;}
.feature-carousel.owl-loaded {opacity: 1}
.feature-carousel .owl-item  {float: left}
.feature-carousel .owl-item > div, .feature-carousel:not(.owl-loaded) > div {display: table; padding-right: 2px}
.feature-carousel .image {width: 540px}
.feature-carousel .sideText {padding: 0 7%}
.features .homeTour .feature-carousel h3, .feature-carousel .homeTour  p {text-align: left; padding-left: 0}
.features .homeTour .feature-carousel h3 {font-size: 21px; margin-bottom: 30px}
.features .homeTour .feature-carousel p {line-height: 25px}
.feature-carousel .owl-item img, .feature-carousel:not(.owl-loaded) img {width: 100%; max-width: 100%; margin: 0; float: none}

.imgDivider {
  width: 100%; height: 400px;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden
}
.imgDivider:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em
}
.imgDivider .quote {
  display: inline-block;
  vertical-align: middle;
  width: 100%; max-width: 710px;
  color: #fff;
  text-align: center;
  font-size: 21px;
  line-height: 33px
}
.imgDivider .quote cite {margin-top: 15px; display: inline-block}
.imgDivider > img {width: 800px; max-width: 93%; vertical-align: bottom}
.imgDivider .phoneHolder {vertical-align: bottom; display: inline-block; width: 100%}
.imgDivider .phoneHolder div {float: left; width: 25%}

@media screen and (max-width: 1340px) {
  .feature-carousel .image {width: 50%}
}
@media screen and (max-width: 980px) {
  .edu2 #contentWrap .carouselNav ul a {font-size: 14px; line-height: 19px}
  .carouselNav {width: 19%}
  .feature-carousel {width: 80%}
  .feature-carousel .sideText {padding: 0 6% 0 5%}
  .features .homeTour .feature-carousel h3 {font-size: 19px; margin-bottom: 10px}
  .features #contentWrap .homeTour .feature-carousel p {font-size: 15px; line-height: 22px}
  .imgDivider {height: 300px}
  .imgDivider .phoneHolder {height: 100%}
  .imgDivider .phoneHolder div {width: 50%; height: 100%}
  .imgDivider .phoneHolder div:nth-child(1), .imgDivider .phoneHolder div:nth-child(4) {display: none}
  .imgDivider .phoneHolder div img {height: 100%; width: auto}
  .imgDivider .quote {max-width: 600px; font-size: 18px; line-height: 28px}
}
@media screen and (max-width: 767px) {
  .carouselNav, .feature-carousel .owl-nav {display: none}
  .feature-carousel {opacity: 1; width: 100%; height: auto}
  .feature-carousel > div {border-bottom: 1px solid #e7e7e7; padding: 20px 1px}
  .homeTour:nth-child(odd) .feature-carousel > div {border-color: #d6d6d6}
  .feature-carousel > div:last-child {border-bottom: 0}
  .feature-carousel .sideText {padding: 0 7% 0 0}
  .imgDivider {height: 300px; padding-right: 40px}
  .imgDivider.laptopScreen {height: 200px}
  .imgDivider > img {width: 460px}
}
@media screen and (max-width: 578px) {
  .feature-carousel .sideText {display: block; padding: 0 0 10px}
  .feature-carousel .image {display: block; width: 100%}
  .imgDivider.laptopScreen {height: 150px}
}
@media screen and (max-width: 480px) {
  .imgDivider .phoneHolder div {width: 100%}
  .imgDivider .phoneHolder div:nth-child(2) {display: none}
}
@media screen and (min-width: 980px) {
  .features .homeTour {padding-top: 80px}
  .features .homeTour#section1 {padding-top: 8px}
  .features .homeTour h1 {margin-bottom: 20px}
  .features .fullColumn div.twoThirds, .features .fullColumn:last-child div.twoThirds {padding-bottom: 80px}
}

.portal #contentHeader {position:relative; padding: 18px 20px; text-align: left}
.portal #contentHeader h1, .portal #contentHeader h2, .narrow_header #contentHeader h1 {font-size: 22px}
.portal #contentHeader h1 a {color: #fff}
.portal #contentHeader h1 a.backLink {margin: 10px 10px 0 10px}
.portal #contentHeader br {display: block}
.portal #contentHeader i:after {left: -40px}
.portal #contentHeader h1 a.backLink + span{display:inline-block;margin-left:25px}

@media screen and (min-width: 480px) {
  .portal #contentHeader br {display: none}
}
@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}

  #parallaxHeader #contentHeader {height: 210px}
  .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 .backLink {top: 16px}
  .portal.catalog_class #contentHeader .showAbove768 {display: none}
  .portal.catalog_class #contentHeader .showBelow768 {margin-left: 21px}
  .portal.catalog_class #leftColumn h1 {display: block !important}
}
@media screen and (min-width: 768px) {
  #parallaxHeader #contentHeader p, #contentWrap .contentHeader p {font-size: 19px;}

  #parallaxHeader #contentHeader {height: 200px}
  #parallaxHeader #contentHeader h1,  #parallaxHeader #contentHeader h2, .contentHeader h2, .narrow_header #contentHeader h1 {font-size: 35px}

  .narrow_header #parallaxHeader #contentHeader {height: 130px; min-height: 130px}

  .portal.catalog_class #wrapper {padding-top: 104px}
  .portal.catalog_class #contentWrap.hasLeftColumn:before {position: absolute;}
  .portal.catalog_class #contentHeader {position: fixed; top: 41px; z-index: 6}
  .portal.catalog_class #contentHeader .backLink {position: absolute; top: 17px; left: 15px}
  .portal.catalog_class #contentHeader h1 {margin-left: 300px}
  .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 #contentHeader {background-image: url('../images/responsive/headers/matrix/sales-sml.jpg')}
  .sales h2 {font-size: 19px}

  .portal.color-heading #contentHeader {margin-top: -1px}

  .portal #contentHeader h1 a.backLink {margin-left: 2px}
  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: 70px}
  #parallaxHeader #contentHeader {min-height: 290px; padding-left: 0; padding-right: 0}
  #parallaxHeader #contentHeader.multiline h2 {display: block}

  .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 {font-size: 24px}

  .portal.catalog_class #wrapper {padding-top: 147px}
  .portal.catalog_class #contentHeader {top: 78px; max-width: 1548px}
  .site_full_width.portal.catalog_class #contentHeader {max-width: 2050px}
  .portal.catalog_class #contentHeader > * {margin-top: 2px}
  .portal.catalog_class #contentHeader h1 {margin-left: 294px}

  .sales #contentHeader {background-image: url('../images/responsive/headers/matrix/sales.jpg')}
  .sales .paper_size_holder {display: flex; justify-content: space-between; margin-top: 20px}
}

/* -- 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}

.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: 3px}
.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:3;
}
body.home-carousel .customHTML p {
  margin: 0;
  width: 100%;
  height: 100%;
}

/* -- 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: url('/images/icons/icons.svg') -84px -2px no-repeat}
.homeTour ul.twoColumnWrap li:before, .about ul.twoColumnWrap li:before, .demo ul.twoColumnWrap li:before {background: none}

/* Stories */
.stories_video {margin: 40px 0}
.stories_video .embed-max-size {border: 20px solid #fff; border-bottom-width: 10px; border-radius: 5px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.2)}
.stories_video p {margin-top: 15px; line-height: 26px}

.storiesHolder {text-align: center}
.storiesHolder a {margin-top: 20px; display: inline-block; color: #222; width: 100%; margin: 0 0 50px; text-align: left; vertical-align: top}
.stories h3 {display: table; vertical-align: middle}
.stories h3 img {float:left; margin: 0 0 4px 0; width: auto; height: 60px}
.stories h3 img.wideLogo {max-width: 100%; height: auto; max-height: 60px}
.stories h3 span {display: table-cell; vertical-align: middle; padding-left: 20px}
.stories h3 span:first-child {padding: 0}
.stories h3 span {color: #797979}
.storiesHolder a > div, .testimonialsHolder .testimonial > div {
  padding: 7px 20px;
  margin-top: 20px;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  position: relative;
  background: #fff
}
.storiesHolder a > div {
  background: -moz-linear-gradient(top, #ffffff 20%, #efefef 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 20%,#efefef 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 20%,#efefef 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 20%,#efefef 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 20%,#efefef 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE9 */
}
.storiesHolder a:hover > div {box-shadow: 5px 5px 10px rgba(0,0,0,0.15)}
.storiesHolder a > div {border-bottom-width: 4px}
.stories p + p {margin-top: 15px}
.storiesHolder a p {line-height: 1.8em}
.storiesHolder a p span {background-color: #e6e6e6; padding: 1px 10px; margin: 0 2px 6px 0; display: inline-block; font-size: 14px; border-radius: 2px}
.storiesHolder a p span.floatR {background-color: transparent; padding: 1px 0;}
.storiesHolder a p span.floatR i {margin-right: -5px}
.stories .arrow {
  position: absolute;
  width: 21px;
  height: 15px;
  top: -15px; left: 20px;
  overflow: hidden;
  z-index: 10;
}
.stories .arrow:after {
  position: absolute;
  border: 1px solid #c8c8c8;
  background: #fff;
  width: 15px; height: 15px;
  top: 9px; left: 2px;
  content: '';
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg)
}

.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}
.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 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}

/* Testimonials */
.testimonialsHolder.twoColumnHolder {margin-bottom: 40px}
.stories #section2 h2 {margin-bottom: 0}
.testimonialsHolder .testimonial {margin-top: 20px; display: inline-block}

/* 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: 3px; box-shadow: 0 3px 5px rgba(0,0,0,.15); background: #fff}
.newsHolder > div {width: 330px; text-align: left; margin: 0 15px 30px; display: inline-block; vertical-align: top; cursor: default; box-sizing: border-box; -moz-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}
.indie .newsHolder .newsIntro {height: 120px}
.newsHolder .blogFeedHolder {background: transparent; box-shadow: none; max-width: 100%}
.newsHolder .blogFeedHolder strong {background: #9A9A9A; color: #fff; padding: 8px 10px; display: inline-block}
.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%}

.resources .newsHolder .blogFeedHolder {width: 100% !important}
.resources .newsHolder > div, .resources .newsHolder .blogFeedHolder div {background: transparent; box-shadow: none; margin-bottom: 0}

.flexbox .newsHolder + .newsHolder, .flexbox .newsHolder + .newsHolder > div {
  display: -webkit-flex;
  display: flex;
}
.flexbox .newsHolder + .newsHolder {
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
}
.flexbox .newsHolder + .newsHolder > div {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.newsHolder + .newsHolder .newsLink {padding-bottom: 15px; margin-top: auto}
.flexbox .newsHolder + .newsHolder .newsLink a {margin: 0; display: block; text-align: center;}

@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%}
  .newsHolder .newsIntro > div {padding-top: 0}
  .newsHolder .newsIntro {float: left; width: auto; height: auto; max-width: 100%}
  .newsHolder .blogFeedHolder {width: 100%}
  .newsHolder + .newsHolder > 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}
  .newsHolder + .newsHolder > div:nth-child(3n+2) {margin: 0 0 30px}
  .newsHolder + .newsHolder > 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%}
  .newsHolder + .newsHolder > div:nth-child(odd) {margin: 0 0 30px}
}
@media screen and (max-width: 374px) {
  .newsHolder .blogFeedHolder {width: auto}
}

.awards {background-color: #fff}
.awards .imgDivider {height: 300px}
.awards .imgDivider:before {height: 78%}
.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}

.awards .iconNav {margin-bottom: 0}
.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: 50px}
.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);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg)
}
#icon-carousel .owl-nav .owl-prev span:before, #icon-carousel .owl-nav .owl-next span:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg)
}

/* 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}
#map {height: 500px; width: 100%; text-align: left; border: 1px solid #d9dcde; border-width: 1px 0}

.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: 4px; 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/cypher/about-matrix.jpg') top right no-repeat}
.product_blocks > *.indie figure {background: url('/images/cypher/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: 3px;
  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 {display: inline-block; width: 100%; box-sizing: border-box; margin: 0}
.columnR ul li:before {top: 4px}
.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}

/* -- Full Column setup -- */
.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;
}
.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 .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}

/* Privacy */
.privacy h2 {font-size: 26px; margin-top: 20px}
.privacy h3 {font-size: 19px; margin-top: 20px}
.privacy ul li {padding: 0 0 0 30px; position: relative; line-height: 1.4}
.privacy #contentBody a {text-decoration: underline}

/* GDPR */
.gdpr ol {margin: 0 0 0 50px !important}
.gdpr 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.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}

/* 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: 3px; 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 .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: 20px; 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: 3px; 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: 3%; height: 9%;
  position: absolute;
  background: url('/images/responsive/resellers/map/marker-yellow.svg') 0 0 / cover no-repeat;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.resellers .mapHolder a.marker.blue {background-image: url('/images/responsive/resellers/map/marker-blue.svg')}
.resellers .mapHolder a.marker.green {background-image: url('/images/responsive/resellers/map/marker-green.svg')}
.resellers .mapHolder a.marker.orange {background-image: url('/images/responsive/resellers/map/marker-orange.svg')}
.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 a {color: #9a9a9a; padding: 0 27px 0 13px}
.resellersNav li a.toggleList {padding: 1px 27px 0 0 !important; float: right}
.resellersNav li li a {padding-left: 27px; 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 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 .hosted_by, .brochure .videos {max-width: 500px; box-shadow: 0 0 22px rgba(0,0,0,0.1); padding: 30px; margin: auto; background: linear-gradient(135deg, #00afa6, #006c82); color: #fff}
.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}
.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 ul {margin-left: 10px}
.infographics #contentBody .infographic_text ul li {padding: 0 0 0 25px !important; text-align: left}
.infographics #contentBody .infographic_text ol ol {margin-left: 35px; counter-reset: item}
.infographics #contentBody .infographic_text ol ol > li {text-indent: -30px; list-style-type: none; counter-increment: item}
.infographics #contentBody .infographic_text ol ol > li:before {display: inline-block; padding-right: 6px; font-family: 'RobotoRegularNew', helvetica, arial, sans-serif !important; text-align: right; content: counter(item) "."; width: 25px}

/* 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: 18px; height: 17px;
  background: #0fa679 url('/images/responsive/icons/landing-page-tick.png') 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: #56af53; 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 -------------------*/
.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}

.signup #contentWrap, .contactSales #contentWrap {text-align: center; padding-top: 40px}
form.signupForm, .contactForm {display: inline-block; text-align: left; margin: 20px 0}
form.signupForm label, form.signupForm span {display: block}
form.signupForm span.small_mobile_only {display: inline-block}
form.signupForm .organizationType {display: none}
form.signupForm input:not([type='submit']), form.signupForm select {width: 100%}
form.signupForm button {padding: 5px 30px; margin: 40px auto 0; display: block}
form.signupForm input[type="submit"], .contactForm button {float: right}
form.signupForm .form_msg {border: 1px dashed #222; color: #222; padding: 9px 18px; width: 100%; text-align: center; margin: 5px 0 15px; border-radius: 3px; box-sizing: border-box; display: none}
.contactForm a:not(.button), .signupForm a:not(.button) {text-decoration: underline}
.contactForm .navButtons a {background-color: #5e5f5f}
.contactForm button {padding: 4px 22px 4px; margin-top: 10px; display: block}

.contactForm input#subject {width: 100%}
.contactForm label[for='agree'], .signupForm label[for='agree'] {user-select: none; line-height: 1.4; width: auto}
@media screen and (min-width: 480px) and (max-width: 493px) {
  .matrix input#school_subdomain ~ span {margin-left: 167px}
}

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}

/* ===================
   Icons
   ===================*/
i {
  margin: 0 6px 0 0
}
dl i {
  margin-top: -3px;
  margin-right: 0;
}

/* --- Social Icons - Portal Site --- */
#socialBlocks a {padding: 10px}
.newSite #socialBlocks a {border-radius: 50%; padding: 10px 10px 12px}
#socialBlocks a i, .shareLinks .stButton .stLarge {width: 20px; height: 19px; margin-right: 0}
.svg #socialBlocks i:after, .svg .shareLinks .stLarge:after {background: url('/images/icons/footer-icons.svg') no-repeat; background-size: 40px; width: 40px}
.no-svg #socialBlocks i:after, .no-svg .shareLinks .stLarge:after {background: url('/images/icons/footer-icons-sml.png') no-repeat; background-size: 40px; width: 40px}
#socialBlocks a:hover i:after, .shareLinks .stButton .stLarge:after {left: -20px}
#socialBlocks a.socialFb i:after, .shareLinks .st_facebook_large .stLarge:after {top: 0}
#socialBlocks a.socialTwr i:after, .shareLinks .st_twitter_large .stLarge:after {top: -19px}
#socialBlocks a.socialLin i:after, .shareLinks .st_linkedin_large .stLarge:after {top: -38px}
#socialBlocks a.socialBlog i:after  {top: -57px}
#socialBlocks a.socialGoogle i:after, .shareLinks .st_googleplus_large .stLarge:after {top: -76px}
#socialBlocks a.socialPin i:after, .shareLinks .st_pinterest_large .stLarge:after {top: -95px}
#socialBlocks a.socialYouTube i:after {top: -114px}
#socialBlocks a.socialVimeo i:after {top: -133px}
#socialBlocks a.socialIG i:after {top: -152px}
#socialBlocks li.app {width: auto; vertical-align: top; margin: 2px 0 0 20px !important}
#socialBlocks li.app a {border-radius: 0; background: transparent !important; padding: 0}
#socialBlocks li.app a img {vertical-align: bottom}

/*------------------- Footer -------------------*/
footer {
  width: 100%;
  height: auto;
  padding: 20px 14px 5px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
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 div:not(.footerBase) .language, body.loginPage .language, body.mobileApp .language {
  background: #fff;
  padding: 7px 13px;
  display: inline-block;
  margin-top: 7px;
  white-space: nowrap;
}
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;
  -moz-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: 33%; box-sizing: border-box; padding: 2px 3px; float: left}
footer .appLinks img {width: 100%; height: auto}

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
}
body.portal.twoColumnPage footer, body.portal.threeColumnPage footer {
  border-top: 0;
}

/* ===================
   Custom Portal CSS
   ===================*/
body.portal #contentBody  {
  width: auto;
  padding: 20px 18px;
}
.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 {
  position: relative;
  padding: 0 0 0 26px;
  margin-top: 2px;
}
body.portal #contentBody ul:not(.twoColumnWrap) li:before, .alternateBg .columnR ul:not(.dotNav) li:before, .privacy #contentBody ul li:before {
  content: '';
  background: url('/images/icons/main-icons.png?80') no-repeat 0 -1400px;
  width: 20px;
  height: 20px;
  position: absolute;
  overflow: hidden;
  left: 0;
}
/* overwrite default list styles */
body.portal #contentBody ul.tabnav {
  display:none;
}
body.portal #contentBody .optionsRibbon ul:not(.twoColumnWrap) {
  margin-bottom: 3px;
}
body.portal #contentBody .optionsRibbonTable ul:not(.twoColumnWrap) {
  margin-bottom: 0;
}
body.portal #contentBody .optionsRibbon ul li {
  padding: 0; margin: 0;
}
body.portal #contentBody ul.calendarLegend:not(.twoColumnWrap) {
  margin-bottom: 0
}
body.portal #contentBody ul.calendarLegend li {
  padding: 0; margin: 0 6px 0 0;
}
body.portal #contentBody .optionsRibbon ul li:before, body.portal #contentBody ul.calendarLegend li:before {
  display: none;
}
body.portal #contentBody ul.twoColumnWrap li {
  margin: 0 0 25px 0;
}
body.portal #contentBody ul:not(.twoColumnWrap), body.portal #contentBody ol {
  margin-bottom: 15px;
}
body.portal #contentBody p img {
  margin-top: 5px;
}

nav.mainNav ol > li.portalCart {
  border-width: 0 0 0 1px;
  background-image: url('/images/icons/cart.png');
  background-repeat: no-repeat;
  background-position: center;
}
nav.mainNav ol > li.portalCart a {
  padding: 0 30px;
}
nav.mainNav ol > li.portalCart a .newAlert {
  background: #cb4437;
  color: #fff;
  position: relative;
  top: -10px;
  padding: 3px 2px;
  font: bold 10px/7px Arial, Helvetica, sans-serif;
  text-align: center;
  display: inline-block;
}

/* ===================
   Login Page
   ===================*/
body.loginPage, body.mobileApp {
  line-height: 20px;
  border-top: 5px solid #038497;
  margin: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body.loginPage, body.loginPage #loginWrap, body.mobileApp #loginWrap {
  background: #F5F5F5;
}
body.loginPage #loginWrap, body.mobileApp #loginWrap {
  position: absolute;
  width: 100%; height: 100%;
  margin-top: -5px;
  text-align: center;
}
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
}
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;
  text-align: left;
}
body.loginPage .frmLogin > p, body.mobileApp .frmLogin > p {
  text-align: left;
  margin: 20px 0;
  color: #5e5f5f;
}
body.loginPage #loginForm input[type="text"], body.mobileApp #loginForm input[type="text"], body.loginPage #loginForm input[type="password"], #facebox .frmLogin input[type="text"], #facebox .frmLogin input[type="password"] {
  width: 100%;
  padding: 10px 10px 7px;
  margin: 0;
  border: 1px solid #c2c2c2;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body.mobileApp #loginForm input[type="text"], body.loginPage #loginForm input[type="text"], body.loginPage #loginForm input[type="password"], #facebox .frmLogin input[type="text"], #facebox .frmLogin input[type="password"] {
  border-radius: 5px;
  box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
  margin: 0 0 10px;
}
body.mobileApp #loginForm input[type="text"]:focus, body.loginPage #loginForm input[type="text"]:focus, body.loginPage #loginForm input[type="password"]:focus, #facebox .frmLogin input[type="text"]:focus, #facebox .frmLogin input[type="password"]:focus {
  box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1), 0 0 3px 2px rgba(94, 180, 254, 1);
}
body.mobileApp #loginForm input[type="text"] {
  padding: 10px 10px 10px;
}
body.loginPage #loginForm [data-active_window="credentials"] input[type="text"] {
  margin: 20px 0 0;
}
body.loginPage #loginForm input[type="password"], body.loginPage #loginForm input#password {
  box-shadow: inset 3px 0 3px rgba(0,0,0,0.1);
  color: #5e5f5f;
}
body.loginPage #loginForm input[type="password"]:focus, body.loginPage #loginForm input#password:focus {
  box-shadow: inset 3px 0 3px rgba(0,0,0,0.1), 0 0 3px 2px rgba(94, 180, 254, 1);
}
body.loginPage #loginForm [data-active_window="credentials"] {
  text-align: left;
  padding-top: 15px;
}
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: 8px 0 15px;
}
body.loginPage #loginForm input[type="password"], body.loginPage #loginForm input#password, #facebox .frmLogin input[type="password"] {
  margin: 8px 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;
  padding: 10px 0 8px;
  margin: 10px 0 20px;
  border-radius: 5px;
  width: 100%;
  height: auto;
}
#facebox .frmLogin button, #facebox .smlSignup .smlSignupButton {padding: 8px 0 10px}
body.mobileApp #loginForm button, body.loginPage #loginForm button {
  padding: 8px 0 8px;
}
.touch body.mobileApp #loginForm button, .touch body.loginPage #loginForm button {
  padding-bottom: 12px;
}
#facebox .frmLogin button {
  padding: 10px 0 !important;
  margin: 10px 0 20px !important;
  border-radius: 5px !important;
  width: 100%;
  height: auto !important;
}
body.mobileApp #loginForm button{
  margin: 18px 0 0 0;
}
body.loginPage .loginOptions {
  width: 100%; position: relative; text-align: left; margin-bottom: 15px
}
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 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.mobileApp .difSignIn, body.loginPage .difSignIn {
  line-height: 36px;
  text-align: left;
  color: #fff;
  text-decoration: none;
  padding: 0 20px;
  border-radius: 5px;
  margin: 20px 0 10px;
  display: block;
  position: relative;
}
body.mobileApp .difSignIn {
  bottom: -10px;
}
body.loginPage form:not([data-active_window="credentials"]) .difSignIn, body.mobileApp form:not([data-active_window="credentials"]) .difSignIn,
body.loginPage form:not([data-active_window="admin"]) .difSignIn, body.mobileApp form:not([data-active_window="admin"]) .difSignIn {
  margin-top: 0;
}
body.loginPage:not(.mobileLogin) .difSignIn:hover, body.mobileApp .difSignIn:hover, #login-form-popup .difSignIn:hover, #facebox .frmLogin .difSignIn:hover {
  color: #fff;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
#login-form-popup, #facebox .frmLogin:not(.resellersForm) {margin-bottom:40px}
@media screen and (min-width: 460px) {
  #facebox .frmLogin:not(.resellersForm) {margin-bottom:52px;}
  .smlSignup p {margin-bottom: 25px !important; font-size: 19px}

  ul.imgIcons li {width: 142px; margin: 0 9px 20px}
  .resellers ul.imgIcons li {width: 176px}
}
body.loginPage .difSignIn i, body.mobileApp .difSignIn i, #login-form-popup .difSignIn i, #facebox .frmLogin .difSignIn i {
  display: block;
  width: 12px; height: 20px;
  position: absolute;
  top: 8px; right: 20px;
  margin: 0;
}
body.loginPage .difSignIn i:after, body.mobileApp .difSignIn i:after, #login-form-popup .difSignIn i:after, #facebox .frmLogin .difSignIn i:after {
  background: none;
}
.loginPage .difSignIn i, .mobileApp .difSignIn i, #login-form-popup .difSignIn i, #facebox .frmLogin .difSignIn i {background: url('/images/icons/icons.svg') -103px -2px no-repeat}
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 (max-width: 499px), screen and (max-height: 579px){
  #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}
  body.loginPage .loginOptions {margin-bottom: 20px}
  #facebox .frmLogin .loginOptions {padding-bottom: 5px}
  #facebox .frmLogin .difSignIn {width: 100%}
  #facebox .frmLogin .difSignIn i {right: 30px}
  .difSignIn.mobile_change_site {display: block}
  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, body.mobileApp, html#loginPageHtml {background: #404040}
  body.loginPage #loginWrap, body.mobileApp #loginWrap {background: transparent;}
  body.loginPage #loginForm, body.mobileApp #loginForm {
    padding: 20px 40px 42px;
    width: 400px;
    border: 1px solid #bbb;
    box-shadow: 0 0 4px 4px rgba(0,0,0,0.2);
  }
  body.loginPage #loginForm button, body.mobileApp #loginForm button {margin-top: 9px}

  body.loginPage #loginForm input[type="text"], body.loginPage #loginForm input[type="password"], body.mobileApp #loginForm input[type="text"], body.mobileApp #loginForm input[type="password"], #facebox .frmLogin input[type="text"], #facebox .frmLogin input[type="password"] {
    padding: 17px 17px 14px;
  }
  #loginForm .loginOptions, body.loginPage .difSignIn, body.mobileApp .difSignIn, #facebox .frmLogin .difSignIn {
    font-size: 17px;
  }
  body.loginPage .difSignIn, body.mobileApp .difSignIn, #login-form-popup .difSignIn, #facebox .frmLogin .difSignIn {
    height: 35px;
    position: absolute;
    bottom: -1px; left: -1px; right: -1px;
    margin: 0;
    border-radius: 0;
  }
  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;
  }
  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}
}
@media screen and (max-width: 979px) {
  /* Only for smaller screens */
  header h1, header .customLogo, .mm-menu .formHolder, 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 ======*/
  body.portal header {
    height: 40px;
  }
  body.portal.color-heading header {
    border-bottom-width: 0;
    box-shadow: none;
  }
  body.portal .hasRightColumn, body.portal .hasLeftColumn.hasRightColumn {
    padding: 20px 18px;
  }
  body.portal #leftColumn {
    margin-bottom: 15px;
  }
  /* ====== 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}
}
#login-form-popup .difSignIn, #facebox .frmLogin .difSignIn{
  bottom: -5px;
  left:-10px;
  line-height: 36px;
  text-align: left;
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  position: absolute;
}
@media screen and (max-width: 400px) {
  .brochure .floatingIntro .lrgTopHeading img {display: none !important}
}
@media screen and (min-width: 460px) {
  #facebox .frmLogin .difSignIn {width: 380px}

  .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%;
    position: relative;
    padding: 8px 20px 15px;
    top: 0 !important;  left: 0 !important;
  }
  .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, .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 {margin-top: 3px; width: 38%}
  .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%}
  input#watched_video ~ br {display: none}
  form.signupForm label ~ label, form.signupForm span ~ label {margin-top: 10px}

  #contentWrap footer .footerBase .language {display: block; margin-bottom: 5px}
}
@media screen and (min-width: 480px) {
  body:not(.newSite) .carOverlay {display: inline-block;}
  .bjqs-caption {
    position: absolute;
    top: 20px; left: 20px;
    max-width: 70%;
    padding: 0;
  }
  .bjqs-caption h2, .bjqs-caption p {
    -webkit-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    -moz-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  }
  .bjqs-caption a {line-height: 22px; margin: 5px 0 0; padding: 9px 25px; display: inline-block}
  .pricing_edu20 .plan_info {min-height: 300px; padding: 20px 10px 0}

  .ourValues .iconNav a {width: 65px; height: 65px; margin: 0 13px 10px}
  .ourValues .iconNav a svg {width: 40px; height: 70px}

  /* ====== Header ======*/
  .pageHeadingWrap {
    width: 68%;
    margin-left: 2%
  }
  .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}
  form.signupForm label ~ label {margin-top: 15px}
  form.signupForm label, form.signupForm span {display: inline-block}
  form.signupForm input:not([type='submit']), form.signupForm select {width: 180px}
  form.signupForm input#school_subdomain + span + span {margin-left: 167px}
}
@media screen and (min-width: 480px) and (max-width: 785px) {
  form.signupForm span#the_other_state ~ label {margin-top: 15px}
}
@media screen and (max-height: 400px) {
  .updated-carousel .bjqs-caption p {margin-top: 0}
}
@media screen and (min-width: 510px) {
  .pricing_edu20 .plan_info {min-height: 245px}
}
@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;
    top: auto !important; bottom: 0; left: 0 !important;
    padding: 15px 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .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;
  }

  #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 {
    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;
  }
  .pricing_edu20 .plan_info {min-height: 195px}
  /* ====== 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: -124px}
  .comparisons .floatingIntro .columnL, .brochure .floatingIntro .columnL {margin-top: -127px}

  .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 a {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] ul ul {display: block}

  /* ====== Forms ======*/
  form.signupForm label, form.signupForm span {
    display: inline-block;
  }
  form.signupForm label {
    width: 150px;
  }
  form.signupForm input:not([type='submit']), form.signupForm select {
    width: 180px;
    margin-right: 170px;
  }
  form.signupForm input#school_subdomain {margin-right: 0 !important}

  #contentFooter {padding-left: 40px; padding-right: 40px}
  a.smlSignupButton {display: inline-block; width: 29%; min-width: 270px; margin: 0 2%}
}
@media screen and (min-width: 700px) {
  form.signupForm input:not([type='submit']), form.signupForm select {
    margin-right: 250px;
  }
  .pricing_edu20 .plan_info {min-height: 100%; padding: 20px 20px 0}

  .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;}

  .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 h2, nav.footerNav div .heading {
    font-size: 23px
  }
  .resellers #contentWrap .contentBlock p {
    font-size: 21px
  }
  #contentWrap .story p, .newsHolder h3 {
    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
  }
  /* ====== Header ======*/
  .pageHeadingWrap {width: 80%; margin: 0}

  /* ====== Body ====== */
  ul.twoColumnWrap li, ul.twoColumnWrap li:first-child, ul.twoColumnWrap + ul.twoColumnWrap li:first-child, .storiesHolder a, .testimonialsHolder .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}

  .stories_video {margin-bottom: 0}
  .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 section ul {margin-left: 30px}
  .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}

  .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 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}
  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 (min-width: 785px) {
  form.signupForm label ~ label {margin-top: 0;}
  form.signupForm input:not([type='submit']), form.signupForm select {margin-right: 14px;}
  form.signupForm select.mr0 {margin-right: 0;}
  form.signupForm .form_msg {width: 545px; margin-left: 168px}
}
@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;
    border-bottom: 1px solid #e2e0e0
  }
  .headerContainer, .headerContainer nav.mainNav, .headerContainer nav.mainNav ol {display: -webkit-flex; display: -ms-flexbox; display: flex}
  .headerContainer {padding: 0 25px; margin: auto}
  .headerContainer .product_logo {position: static; float: left; -webkit-flex: 0 auto; -ms-flex: 0 auto; flex: 0 auto}
  .headerContainer nav.mainNav {position: static; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-align-items: center; -ms-flex-align: center; align-items: center; float: right}
  .headerContainer nav.mainNav ol {width: 100%}
  .headerContainer nav.mainNav ol li {-webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto}
  .headerContainer nav.mainNav ol .aboutUs {margin-left: auto}

  .portal header {width: 1548px}
  .portal.site_full_width header {width: 2050px}

  .pricing p.subText {margin: 25px 0 32px}
  .pricing_edu20 .price_block {max-width: 230px}
  .pricing_edu20 .plan_info {min-height: 296px}
  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 {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}
  .features .fullColumn div.twoThirds {padding-top: 23px}
  .features #section1 h1 {padding-top: 29px}
  .fullColumn img {margin-left: 30px}

  .pageHeadingWrap {
    margin-left: 45px;
    width: 60%;
    max-width: 540px;
  }
  .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 input[type="checkbox"] + label {margin-right: 172px}
  .contactForm textarea, .contactForm input#subject {max-width: 100%}
  .martix form.signupForm input#school_subdomain ~ span,
  form.signupForm input#school_subdomain + span + span {margin-left: 0}

  .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  {
    padding: 25px 26px;
  }
  body.portal #centreColumn {
    padding-left: 25px;
  }
  body.portal #leftColumn ~ #centreColumn {
    padding-left: 15px;
  }
  /* ====== Flexible Fluid Footer ======*/
  footer div.footerLinks > div {min-width: 25%; /* min-width if social media links */}
  .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, .signup #contentWrap {background: #fff; border: 2px solid #e8e8e8}
}
@media screen and (min-width: 1098px) {
  form.signupForm span + span {margin-right: 0;}

  .pricing_edu20 .price_block {max-width: 260px}
  .pricing_edu20 .plan_info {min-height: 200px}

  .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}

  .signup header.transparentNav:not(.scrolled), .contactSales header.transparentNav:not(.scrolled) {background: transparent}
  .signup #contentBody, .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}
  form.signupForm span + span:not(#the_other_state) {
    margin-right: 180px; /* push label onto next line */
  }

  .newSite footer .footerLinks {width: 71%}
  .newSite footer .footerLinks + div {width: 29%}

  .resellersNav, .resellersNav + div {width: 17%}
  .resellersNav + div {width: 83%}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  body.portal #contentBody ul:not(.twoColumnWrap) li:before, .edu2 #contentBody div:not(.optionsRibbon) ul:not(.twoColumnWrap) li:before, .alternateBg .columnR ul li:before, .privacy #contentBody ul li:before {
    background-image: url('/images/icons/main-icons-retina.png?80');
    background-size: 60px; /* half actual width */
  }
  .edu2 #contentBody div:not(.optionsRibbon) ul.tickList li:before {
    background-image: url('/images/responsive/icons/landing-page-tick-retina.png');
    background-size: 18px; /* half actual width */
  }
}
@media screen and (max-width: 1179px) {
  header.transparentNav nav.mainNav ol > li > a {font-size: 16px}
}
@media screen and (min-width: 1280px) {
  .headerContainer {padding: 0 55px}
  .pricing_edu20 .price_block {max-width: 270px;}
  .pricing_edu20 .plan_info {min-height: 100%;}

  .columnHolder {
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
  }
  .columnHolder_2 {max-width: 529px; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2}
  .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}
}
@media screen and (min-width: 1440px) {
  .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 nav.mainNav {/*right: 5%;*/}
header.transparentNav .product_logo {left: 5%;}
.neo header.transparentNav:not(.scrolled) .product_logo {background-image: url('/images/logo/neo-logo-white.png')}
.matrix header.transparentNav:not(.scrolled) .product_logo {background-image: url('/images/logo/matrix-logo-white.png')}
.indie header.transparentNav:not(.scrolled) .product_logo {background-image: url('/images/logo/indie-logo-white.png')}
.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; /* was 14 */
}
header.transparentNav nav.mainNav ol > li:hover {
  background-color: transparent;
}
header.transparentNav:not(.scrolled) nav.mainNav ol > li > a {
  color: #fff;
}
header.transparentNav nav.mainNav ol > li > a {
  padding: 0 3px;
  line-height: 38px;
  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, .homeWrap a, .homeWrap button, header.transparentNav ol > li > a, .homeWrap a.tourButton .icnCircle, .homeWrap::before, nav.mainNav ol > li.signupHolder a span {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.homeWrap {
  background: no-repeat top / cover #3b3b3b;
  top: 0; right: 0; bottom: 0; left: 0;
  position: absolute;
  overflow: hidden;
}
.homeWrap::before {
  content: "";
  background: #000;
  opacity: 0.2;
  filter: alpha(opacity=20);
  z-index: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  position: absolute;
}
body.matrix .homeWrap {background-color: #26383c;}
.homeWrap .homeMiddle {
  width: 100%; height: 60%;
  display: table;
  position: absolute;
  z-index: 8;
}
.homeWrap .homeIntro {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
.homeWrap .homeIntro img {
  width: 70%;
  max-width: 374px;
}
.homeWrap .homeIntro p {
  color: #fff;
  font-size: 25px;
  line-height: 30px;
  margin: 0 0 30px;
}
.homeWrap .homeIntro a, .homeWrap .homeIntro button {
  font-size: 20px;
  display:  inline-block;
  color: #fff;
  border-radius: 3px;
  padding: 10px 30px;
}
.homeWrap .homeIntro button:hover {opacity: 1}

/* quick sign up form */
.homeWrap .homeIntro form {display: none;}
.homeWrap .homeIntro form input, .homeWrap .homeIntro form select {
  border-radius: 3px;
  height: 44px;
  margin: 0 0 10px;
  padding: 7px 10px;
  font-size: 18px;
}
.homeWrap .homeIntro form select {margin-top: -15px;}
.homeWrap .homeIntro form input, .homeWrap .homeIntro form select, .homeWrap .homeIntro button,
.homeWrap .homeIntro form a, .homeWrap .homeIntro form .switch_msg {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-left: auto; margin-right: auto;
}
.homeWrap .homeIntro form input.error {border: 2px solid tomato; color: #e72300}
.homeWrap .homeIntro form p {margin: 0; line-height: 29px;}
.homeWrap .homeIntro button {margin: 0; padding: 6px 0;}
.homeWrap .homeIntro form .switch_msg {
  font-size: 19px;
  color: #fff;
  margin-bottom: 12px;
}
@media screen and (max-width: 400px) {
  .homeWrap .homeIntro form input, .homeWrap .homeIntro form select, .homeWrap .homeIntro button,
  .homeWrap .homeIntro form a, .homeWrap .homeIntro form .switch_msg {width: 100%;}
  .homeWrap .homeIntro form input, .homeWrap .homeIntro form select {height: 36px; padding: 2px 10px;}
  .homeWrap .homeIntro button {padding: 2px 0 3px;}
  .homeWrap .homeIntro form a {padding: 5px 0 6px;}
}

.homeWrap .homeiPad {
  position: absolute;
  bottom: 0;
  width: 100%; height: 40%;
}
.homeWrap .homeiPad img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  bottom: 0;
}
.homeiPad .ipad, .homeiPad .screen, .homeiPad .hand {opacity: 0; filter: alpha(opacity=0);}
.homeiPad .pressScreen {position: absolute;}
.homeWrap .homeiPad img.ipad {z-index: 1;}
.homeWrap .homeiPad img.lesson {z-index: 2;}
.homeWrap .homeiPad img.enroll {z-index: 3;}
.homeWrap .homeiPad img.classes {z-index: 4;}
.homeWrap .homeiPad img.dashboard {z-index: 5;}
.homeiPad .pressScreen {z-index: 6;}
.homeWrap .homeiPad img.hand {z-index: 7;}

.homeiPad .pressScreen div {
  height: 50px; width: 50px;
  margin-top: -35px; margin-left: -35px;
  border: 10px solid #000;
  background: transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  opacity: 0;
  filter: alpha(opacity=0);
}
.homeiPad .pressScreen div.animate {
  -webkit-animation: pulse 0.7s ease-out;
  -moz-animation: pulse 0.7s ease-out;
  animation: pulse 0.7s ease-out;
}
@-moz-keyframes pulse {
  0% {-moz-transform: scale(0); opacity: 0.0;}
  50% {-moz-transform: scale(0.5); opacity: 0.5;}
  100% {-moz-transform: scale(0.8); opacity: 0.0;}
}
@-webkit-keyframes "pulse" {
  0% {-webkit-transform: scale(0); opacity: 0.0;}
  50% {-webkit-transform: scale(0.5); opacity: 0.5;}
  100% {-webkit-transform: scale(0.8); opacity: 0.0;}
}
@keyframes pulse {
  0% {transform: scale(0); opacity: 0.0;}
  50% {transform: scale(0.5); opacity: 0.5;}
  100% {transform: scale(0.8); opacity: 0.0;}
}

.homeWrap .bottomLinks {
  position: absolute;
  bottom: 3%;
  width: 100%;
  z-index: 8;
}
.homeWrap .bottomLinks a {
  color: #fff;
  line-height: 41px;
}
.homeWrap .floatL a:hover, .homeWrap a.language:hover {opacity: 0.6;}
.homeWrap .centreWrap {
  width: 100%;
  position: absolute;
  text-align: center;
}
.homeWrap a.tourButton {
  font-size: 24px;
  display: none;
}
.homeWrap a.tourButton .icnCircle {
  background: rgba(255,255,255,0.2);
  width: 29px; height: 34px;
  border-radius: 50%;
  display: inline-block;
  margin: -4px 0 0 10px;
  vertical-align: middle;
  text-align: left;
  padding-left: 5px;
}
.homeWrap a.tourButton:hover .icnCircle {
  background: rgba(255,255,255,0.8);
}
.homeWrap a.tourButton:hover .icnCircle i:after {left: 0;}

.homeWrap a.tourButton .icnCircle i {margin: -12px 0 0 3px;}
.homeWrap a.tourButton .icnCircle i:after {left: -40px;}

.homeWrap .floatL, .homeWrap .floatR {z-index: 1; position: relative; }
.homeWrap .floatL {margin-left: 5%;}
.homeWrap .floatL a {margin-right: 40px;}
.homeWrap .floatR {margin-right: 5%;}
.homeWrap .floatR #socialBlocks {display: inline-block; margin-right: 13px; vertical-align: top; margin-top: 3px;}
.homeWrap .floatR #socialBlocks li {width: 36px; margin: 0 4px;}
.homeWrap .floatR #socialBlocks li a {padding: 7px 5px;}

[name="google_conversion_frame"] {display:none !important}

@media screen and (max-width: 767px) {
  body.edu2 .homeWrap.img1 {background-image: url('/images/responsive/home/neo-1-sml.jpg')}
  body.edu2 .homeWrap.img2 {background-image: url('/images/responsive/home/neo-2-sml.jpg')}
  body.edu2 .homeWrap.img3 {background-image: url('/images/responsive/home/neo-3-sml.jpg')}
  body.matrix .homeWrap.img1 {background-image: url('/images/responsive/home/matrix-1-sml.jpg')}
  body.matrix .homeWrap.img2 {background-image: url('/images/responsive/home/matrix-2-sml.jpg')}
  body.matrix .homeWrap.img3 {background-image: url('/images/responsive/home/matrix-3-sml.jpg')}
}
@media screen and (min-width: 768px) {
  .homeWrap::before {opacity: 0; filter: alpha(opacity=0)}
  body.edu2 .homeWrap.img1 {background-image: url('/images/responsive/home/neo-1.jpg')}
  body.edu2 .homeWrap.img2 {background-image: url('/images/responsive/home/neo-2.jpg')}
  body.edu2 .homeWrap.img3 {background-image: url('/images/responsive/home/neo-3.jpg')}
  body.matrix .homeWrap.img1 {background-image: url('/images/responsive/home/matrix-1.jpg')}
  body.matrix .homeWrap.img2 {background-image: url('/images/responsive/home/matrix-2.jpg')}
  body.matrix .homeWrap.img3 {background-image: url('/images/responsive/home/matrix-3.jpg')}
}
@media screen and (max-width: 979px) {
  .homeWrap .bottomLinks .floatL, .homeWrap .bottomLinks .floatR {display: none;}
  .homeWrap {margin-top: 41px;}
  .homeWrap .centreWrap {bottom: 0;}
  .homeWrap a.tourButton {font-size: 24px;}
  header.transparentNav:not(.scrolled) {
    border-width: 0 0 4px;
  }
}
@media (orientation:portrait) {
  .homeWrap .homeMiddle {
    height:60%; width: 100%;
  }
  .homeWrap .homeIntro {
    padding: 0 5%;
  }
  .homeWrap .homeiPad img {
    left: 0; right: 0;
    margin: auto;
    padding-right: 7%;
  }
}
@media screen and (orientation:portrait) and (min-width: 460px) {
  .homeWrap .homeIntro p {
    font-size: 30px;
    line-height: 38px
  }
  .homeWrap .homeIntro form input, .homeWrap .homeIntro form select, .homeWrap .homeIntro button,
  .homeWrap .homeIntro form a, .homeWrap .homeIntro form .switch_msg {
    width: 350px;
  }
}
@media screen and (orientation:portrait) and (min-width: 569px) {
  .homeWrap .homeMiddle {
    height: 52%;
  }
  .homeWrap .homeiPad {
    bottom: -10%;
    height: 60%;
  }
  .homeWrap .homeiPad img {
    left: 0; right: 0;
    margin: auto;
  }
}
@media screen and (orientation:portrait) and (min-width: 768px) {
  .homeWrap .homeIntro {
    padding: 0 15%;
  }
  .homeWrap .homeIntro a, .homeWrap .homeIntro button {
    font-size: 23px;
  }
}
@media screen and (orientation:portrait) and (max-height: 400px) {
  .homeWrap .homeIntro p {font-size: 22px; line-height: 26px; margin-bottom: 10px;}
}
@media screen and (orientation:portrait) and (max-height: 459px) {
  .homeWrap .homeIntro img {display:none;}
  .homeWrap .homeIntro p {margin-top: 0;}
  .homeWrap .homeIntro form .switch_msg {font-size: 16px; line-height: 18px;}
}
@media screen and (orientation:portrait) and (min-height: 459px) {
  .homeWrap .homeIntro p {
    margin: 15px 0 20px;
  }
}

@media screen and (orientation:landscape) {
  .homeWrap .homeMiddle {
    height: 100%; width: 46%;
    margin-left: 3%;
  }
  .homeWrap .homeIntro p {
    margin: 10px 0 20px;
  }
  .homeWrap .homeIntro a, .homeWrap .homeIntro button {
    padding: 10px 20px;
  }
  .homeWrap .homeiPad {
    width: 100%; height: 90%;
    left: 55%;
  }
}
@media screen and (orientation:landscape) and (max-height: 400px) {
  .homeWrap .homeIntro img {display:none;}
  .homeWrap .homeIntro p {margin-top: 0;}
}
@media screen and (orientation:landscape) and (max-width: 500px) {
  .homeWrap .homeIntro p {font-size: 20px;}
  .homeWrap .homeIntro a, .homeWrap .homeIntro button {font-size: 16px;}
}
@media screen and (orientation:landscape) and (min-width: 600px) {
  .homeWrap .homeMiddle {width: 48%;}
}
@media screen and (orientation:landscape) and (max-width: 768px) {
  .homeWrap .homeiPad img.hand, .homeiPad .pressScreen {display: none;}
}
@media screen and (orientation:landscape) and (min-width: 768px) {
  .homeWrap .homeMiddle {
    width: 45%;
    margin-left: 4%;
  }
  .homeWrap .homeIntro {
    padding-right: 4%;
  }
  .homeWrap .homeIntro p {
    margin: 20px 0 30px;
  }
  .homeWrap .homeIntro form input, .homeWrap .homeIntro form select, .homeWrap .homeIntro button,
  .homeWrap .homeIntro form a, .homeWrap .homeIntro form .switch_msg {
    width: 350px;
  }
  .homeWrap a.tourButton {
    display: inline-block;
  }
  .homeWrap .homeiPad {
    height: 85%;
    left: 48%;
  }
}
@media screen and (orientation:landscape) and (min-width: 980px) {
  .homeWrap .homeIntro img {display: none}
  .homeWrap .homeIntro p {
    font-size: 32px;
    line-height: 38px;
  }
  .homeWrap .homeIntro a, .homeWrap .homeIntro button {
    font-size: 23px;
    padding: 10px 30px;
  }
  .homeWrap .bottomLinks {
    bottom: 20px;
  }
}
@media screen and (orientation:landscape) and (min-width: 1300px) {
  .homeWrap .homeIntro p {
    font-size: 45px;
    line-height: 60px;
    margin: 0 0 40px;
  }
  .homeWrap .homeIntro > a {
    font-size: 26px;
    padding: 15px 40px;
  }
}
@media screen and (orientation:landscape) and (min-width: 1400px) {
  .homeWrap .homeIntro {
    padding: 0 4%;
  }
  .homeWrap .homeIntro p {
    margin: -30px 0 50px;
  }
  body.matrix .homeWrap .homeIntro {
    padding: 0 14%;
  }
}
@media screen and (orientation:landscape) and (min-height: 850px) {
  .homeWrap .homeiPad {height: 90%;}
}
@media screen and (orientation:landscape) and (min-height: 950px) {
  .homeWrap .homeiPad {height: 100%;}
}

body.newSite .homeWrap + #contentWrap {margin-top: 100%}
body.newSite:not(.home) #contentBody, body.newSite footer nav, .twoColumnHolder {max-width: 1300px}
.awards .twoColumnHolder {max-width: 1000px}
.neo .awards .twoColumnHolder, .comparisons .twoColumnHolder {max-width: 1150px}
.brochure .twoColumnHolder {max-width: 1350px}
body.newSite footer nav, .twoColumnHolder {margin: 0 auto}

/* ====== Homepage Dec 2017 ======*/
.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: 200px}
.home_intro * {box-sizing:border-box}
.home_intro .feature_info *:not(.colorBtn), .cta_cards a div {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
.home_intro .feature_info h2 {line-height: 1.2}
.home_intro .feature_info a:not(.colorBtn) {color: #fff; font-size: 23px; margin: 15px 0 30px; display: inline-block}
.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}
.home_intro .feature_visual img:not(.filler) {position: absolute; z-index: 1; top: 0}
.home_intro .lrgTopHeading {margin: 50px auto 110px; font-size: 25px; color: inherit}

.why_choose_us {margin-top: 50px}
.why_choose_us h2, .home .implementation h2 {font-size: 35px}
.why_choose_us p {font-size: 18px; line-height: 1.7; width: 737px; max-width: 100%; margin: 35px auto 10px; color: #777}
.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}

.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 .feature_info {padding-left: 0; margin-left: 0; width: 27%}
.our_clients .container .colorBtn {margin-top: 20px}
.our_clients .container .feature_visual {display: flex; flex-flow: column wrap; height: 306px}
.our_clients .container .feature_visual > * {margin: 0 0 60px 11%; display: flex; justify-content: center; align-items: center; flex-grow: 1}
.our_clients .container .feature_visual > * img {max-height: 93px; width: auto; margin-top: 0}

.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}

.home .implementation .timeline {margin: 100px 0 80px}
.home .implementation .timeline h2 {max-width: 800px; text-align: center; margin: auto}
.home .implementation .timeline, .home .implementation .colorBtn {position: relative}
.home .implementation .timeline ul:before {top: 40px}
.home .implementation .timeline ul {margin-top: 50px; padding-bottom: 70px}
.home .implementation .timeline ul li {overflow: visible}
.home .implementation .timeline .timeline-text > div {display: flex; margin: 10px 10px 20px; border: 1px solid #e1e1e1; border-radius: 3px; background: #fff; padding: 0}
.home .implementation .timeline .timeline-text > div > div {margin: 0 !important}
.home .implementation .timeline .timeline-text > div > div,
.home .implementation .timeline .timeline-text > div > div + div {border-radius: 4px 0 0 4px}
.home .implementation .timeline .timeline-text > div > div img {width: 220px; min-height: 100%}
.home .implementation .timeline .timeline-text > div > div + div {border: 0; color: #222; align-self: center}
.home .implementation .timeline .timeline-text > div h3,
.home .implementation .timeline .timeline-text > div p {margin: 10px 20px}

@media screen and (max-width: 1440px) {
  .home_intro .container:not(.container_center) .feature_visual.feature_lrg img {width: 800px}
  .why_choose_us_icons div {width: 310px; background-size: 345px !important; padding-top: 305px}
}
@media screen and (max-width: 1300px) {
  .top_bg_circle {height: 600px}
  .home_intro .feature_info h2 {font-size: 36px}
  .home_intro .container:not(.container_center) .feature_visual.feature_lrg img {width: 730px}

  .our_clients h2 {font-size: 25px}
  .our_clients .container .feature_visual > * {margin-left: 5%}
  .our_clients .container .feature_visual {padding-right: 0}
  .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}
  .home_intro .feature_info h2 {font-size: 32px}
  .home_intro .feature_info a:not(.colorBtn) {font-size: 20px; margin-bottom: 20px}

  .side_bg_circle {margin-top: -120px; right: 61%}
}
@media screen and (max-width: 1025px) {
  body.matrix .mainNav .resources {display: none}
  .top_bg_circle {height: 570px}
  .home_intro {margin-top: 180px}
  .home_intro .feature_visual {margin: -55px 0 0 -60px}
  .home_intro .container:not(.container_center) .feature_visual.feature_lrg img {width: 650px}
  .why_choose_us_icons div {width: 230px; background-size: 265px !important; padding-top: 235px}
  .home .implementation .timeline .timeline-text h3 {font-size: 22px}
}
@media screen and (min-width: 801px)and (max-width: 1023px) {
  .side_bg_circle {margin-top: -160px; right: 60%}
  .our_clients .container .feature_info {padding-right: 0; margin-right: 4%; width: 29%}
  .our_clients .container .feature_visual {height: 370px}
  .our_clients .container .feature_visual > * {margin: 0 0 40px 11%}
  .our_clients .container .feature_visual > * img {max-height: 83px}
  .our_clients .container .feature_visual > *:nth-child(1) {order: 1}
  .our_clients .container .feature_visual > *:nth-child(2) {order: 4}
  .our_clients .container .feature_visual > *:nth-child(3) {order: 3}
  .our_clients .container .feature_visual > *:nth-child(4) {order: 5}
  .our_clients .container .feature_visual > *:nth-child(5) {order: 2}
  .our_clients .container .feature_visual > *:nth-child(6) {order: 6}
}
@media screen and (min-width: 981px) {
  .home .implementation .timeline ul li:nth-child(even) .timeline-text > div {flex-direction: row-reverse}
  .home .implementation .timeline ul li:nth-child(even) .timeline-text > div {margin-right: 20px}
  .home .implementation .timeline ul li:nth-child(odd) .timeline-text > div {margin-left: 20px}
  .home .implementation .timeline .timeline-text > div > div.block-left,
  .home .implementation .timeline .timeline-text > div > div.block-right + div {border-radius: 4px 0 0 4px}
  .home .implementation .timeline .timeline-text > div > div.block-right,
  .home .implementation .timeline .timeline-text > div > div.block-left + div {border-radius: 0 4px 4px 0}
}

@media screen and (max-width: 980px) {
  .top_bg_circle {height: 490px}
  .home_intro {margin-top: 110px}
  .home_intro .feature_visual {margin-top: -30px}
  .home_intro .feature_visual.feature_lrg {padding-left: 20px}
  .home_intro .container:not(.container_center) .feature_visual.feature_lrg img {width: 580px}
  .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}

  .home .implementation .timeline ul {padding: 70px 0 0}
  .home .implementation .timeline ul:before,
  .home .implementation .timeline ul .timeline-date::after {content: none}
  .home .implementation .timeline ul li {margin-bottom: 10px; padding-left: 10px}
  .home .implementation .timeline ul .timeline-date {width: auto; float: none !important}
  .home .implementation .timeline ul .timeline-date p {text-align: left; margin-top: 0 !important; width: 24px; height: 24px; line-height: 24px; font-size: 12px !important; position: absolute; left: -37px; z-index: 40}
  .home .implementation .timeline ul .timeline-text {width: auto; float: none !important; top: -16px; margin-left: 10px; max-width: 100%}
  .home .implementation .timeline ul .timeline-text div > * {text-align: left !important}
  .home .implementation .timeline ul li:nth-child(even) .timeline-arrow {right: auto; left: -10px}
  .home .implementation .timeline ul li:nth-child(even) .timeline-arrow:after {left: 6px}
  .home .implementation .timeline .timeline-text > div > div img {width: 182px; margin: 0 20px}
}

@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}
  .our_clients .container {padding: 0}
  .our_clients .container .side_feature {display: block}
  .our_clients .container .side_feature > * {padding: 0; width: 100%}
  .our_clients .container .feature_info {text-align: center; margin-bottom: 50px}
  .our_clients .container .feature_visual > * {margin: 0 2% 40px 2%}
}
@media screen and (min-width: 768px) {
  .home_intro .feature_info {width: 42%}
  .home_intro .feature_visual {width: 57%}
}
@media screen and (max-width: 767px) {
  .home_intro .feature_info a {margin-left: 10px; margin-right: 10px !important}
  .top_bg_circle {height: 540px}
  .home_intro {margin-top: 100px}
  .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 {width: 100%; margin-top: 0}
}
@media (max-width: 700px) {
  .our_clients .container .feature_visual {height: 186px}
  .our_clients .container .feature_visual > * {margin-bottom: 20px}
  .our_clients .container .feature_visual > * img {max-height: 73px}
  .home .implementation .timeline .timeline-text > div > div img {width: 152px; margin: 0}
}
@media (min-width: 560px) {
  .home .implementation .timeline ul li:nth-child(even) .timeline-text h3 {text-align: right}

  .why_choose_us .buttons {width: 500px; margin: auto; display: flex}
  .why_choose_us .buttons a {width: 50%; margin: 0 10px}
}
@media (max-width: 540px) {
  .home_intro .feature_info h2 {font-size: 29px}
  .side_bg_circle {right: 46%}
  .our_clients .container .feature_visual {height: 228px}
  .our_clients .container .feature_visual > * {margin-bottom: 20px}
  .our_clients .container .feature_visual > * img {max-height: 56px}
  .home .implementation .timeline ul .timeline-text {top: -8px}
  .home .implementation .timeline .timeline-text > div {flex-direction: column}
  .home .implementation .timeline .timeline-text > div > div,
  .home .implementation .timeline .timeline-text > div > div + div {border-radius: 4px 4px 0 0}
  .home .implementation .timeline .timeline-text > div > div img {width: 132px; display: block; margin: 5px auto}
  .home .implementation .timeline .timeline-text h3 {font-size: 19px}
  .home .implementation .timeline .timeline-text p {font-size: 15px}
}
@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 Tour ======*/
.homeTour, .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}
.homeTour:nth-child(odd) {
  background-color: #f0f0f0;
  border: 1px solid #e2e0e0;
  border-width: 1px 0;
}
.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);
}
.homeTourInner, .homeTour > .homeTourIntro, .homeTourWide {
  margin: auto;
  max-width: 1083px;
}
.homeTourWide {
  max-width: 1700px;
}
.homeTourWide.imgRight .homeTourIntro {width: 26%; margin-right: 4%;}
.homeTourWide.imgRight .homeTourImg {width: 70%;}

.homeTour:nth-child(2) .homeTourWide {max-width: 1300px;}
.homeTour:nth-child(2) .homeTourIntro {width: 35%; margin-left: 3%;}
.homeTour:nth-child(2) .homeTourImg {width: 62%;}
.homeTour:nth-child(2) .homeTourImg.desktop_only img {float: left;}
.homeTour:nth-child(4) .homeTourIntro {width: 33%; margin: -15px 0 0 -2%;}
.homeTour:nth-child(4) .homeTourImg {width: 67%;}
.homeTour:nth-child(5) .homeTourImg.desktop_only img {margin-bottom: -4px}

.homeTourWide .homeTourIntro {
  vertical-align:middle;
  display:inline-block;
  margin-bottom: 0;
  text-align: left;
}
.homeTourWide .homeTourImg {
  vertical-align: middle;
  display: inline-block;
  margin-left: -4px;
}
.homeTourImg img {opacity: 0;}
.homeTourImg img.showImgs {
  opacity: 1;
  -webkit-transition: opacity .5s ease-in;
  transition: opacity .5s ease-in;
}
.homeTourIntro, .homeTour > .homeTourIntro {
  text-align: center;
  margin-bottom: 70px;
}
.homeTour.pb0 .homeTourIntro {margin-bottom: 30px;}
.homeTour.pb0 .homeTourImg {margin-top: 50px;}
.homeTourIntro a {white-space: nowrap;}
.homeTourIntro i {margin-top: -1px;}
.homeTour .homeTourIntro h3 {
  font-size: 35px;
}
#contentWrap .homeTour .homeTourIntro p {
  font-size: 18px;
  line-height: 28px;
}
.homeTourImg {text-align: center;}
.homeTour > .homeTourImg img, .homeTourWide.imgLeft .homeTourImg img {max-width: 100%;}
.homeTour .embed-max-size {
  padding: 5px;
  border: 1px solid #b5b5b5;
}
.homeTour .contentBlock {
  margin: 30px auto -20px;
  max-width:652px;
  float:none
}
.homeTour .contentBlock img {
  width: auto;
  height: 120px;
  margin-top: -4px;
}

/* ====== Home Tour Animations ======*/
.no-touch .homeTourIntro h3, .no-touch .homeTourIntro h3 + p {
  -webkit-transition: 500ms ease-in;
  -moz-transition: 500ms ease-in;
  -o-transition: 500ms ease-in;
  transition: 500ms ease-in;
  opacity: 0;
}
.no-touch .homeTourIntro h3.animate {
  -webkit-transition: 500ms ease-out;
  -moz-transition: 500ms ease-out;
  -o-transition: 500ms ease-out;
  transition: 500ms ease-out;
  opacity: 1;
}
.no-touch .homeTourIntro h3.animate + p {
  -webkit-transition: 500ms 200ms ease-out;
  -moz-transition: 500ms 200ms ease-out;
  -o-transition: 500ms 200ms ease-out;
  transition: 500ms 200ms ease-out;
  opacity: 1;
}
.no-touch .enterLeft:not(.animate), .no-touch .enterLeft:not(.animate) + p {
  transform:translateX(-50px);
  -ms-transform:translateX(-50px);
  -moz-transform:translateX(-50px);
  -webkit-transform:translateX(-50px);
  -o-transform:translateX(-50px);
}
.no-touch .enterRight:not(.animate), .no-touch .enterRight:not(.animate) + p {
  transform:translateX(50px);
  -ms-transform:translateX(50px);
  -moz-transform:translateX(50px);
  -webkit-transform:translateX(50px);
  -o-transform:translateX(50px);
}
.no-touch .enterRight.animate, .no-touch .enterRight.animate + p
.no-touch .enterLeft.animate, .no-touch .enterLeft.animate + p {
  transform:translateX(0);
  -ms-transform:translateX(0);
  -moz-transform:translateX(0);
  -webkit-transform:translateX(0);
  -o-transform:translateX(0);
}
.no-touch .enterBottom:not(.animate), .no-touch .enterBottom:not(.animate) + p {
  transform:translateY(30px);
  -ms-transform:translateY(30px);
  -moz-transform:translateY(30px);
  -webkit-transform:translateY(30px);
  -o-transform:translateY(30px);
}
.no-touch .enterBottom.animate, .no-touch .enterBottom.animate + p {
  transform:translateY(0);
  -ms-transform:translateY(0);
  -moz-transform:translateY(0);
  -webkit-transform:translateY(0);
  -o-transform:translateY(0);
}
.neo .homeTour:nth-child(3) .homeTourImg.desktop_only,
.matrix .homeTour:nth-child(5) .homeTourImg.desktop_only {position: relative;}
.neo .homeTour:nth-child(3) .homeTourImg.desktop_only img.mid,
.matrix .homeTour:nth-child(5) .homeTourImg.desktop_only img.mid {position: absolute; z-index: 1}
.neo .homeTour:nth-child(3) .homeTourImg.desktop_only img.enterLeft,
.matrix .homeTour:nth-child(5) .homeTourImg.desktop_only img.enterLeft {position: absolute}
.no-touch .homeTourInner img, .homeTourImgGroup.desktop_only img {
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.no-touch .homeTourInner img:not(.animate), .implementation .timeline ul .timeline-date p {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
}
.no-touch .homeTourInner img.animate, .implementation .timeline ul .timeline-date p.animate {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* ====== Home Tour Points ======*/
.homeTour ul.twoColumnWrap {width: 100%;}
.homeTour ul.twoColumnWrap + ul.twoColumnWrap {margin-left:auto;}
.homeTour ul.twoColumnWrap li {
  display: table;
  width: 47%;
  float: left;
}
.homeTour ul.twoColumnWrap li + li {margin-left: 4%;}
.homeTour ul.twoColumnWrap p {margin-left: 0;}
.homeTour ul.twoColumnWrap li .sideImg {
  display: table-cell;
  vertical-align: top;
  padding-top: 25px;
}
.homeTour ul.twoColumnWrap li .sideImg img {
  margin-right: 25px;
  width: 80px;
  height: 80px;
}
.homeTour ul.twoColumnWrap li, .homeTour ul.twoColumnWrap + ul.twoColumnWrap li:first-child {padding-left: 0;}

@media screen and (max-width: 1600px) {
  .homeTour:nth-child(4) .homeTourImg img {max-width: 100%;}
  .homeWrap .bottomLinks .floatL a {margin-right: 30px;}
}
@media screen and (max-width: 1440px) {
  .homeTourWide.imgRight .homeTourImg img {width: 1100px;}
  .homeTour:nth-child(4) .homeTourIntro h3 {line-height: 1.1;}

  .homeWrap .bottomLinks .floatL a {margin-right: 20px;}

  .features .fullColumn, .features .homeTour h1 {padding-right: 30px !important}
  .alternateBg .columnR .twoColumnHolder {padding-right: 32px !important}
  .pricing .optionsRibbon {overflow: visible}
}
@media screen and (max-width: 1340px) {
  .homeWrap .bottomLinks .floatL a:first-child {display:none;}
}
@media screen and (max-width: 1280px) {
  .homeWrap .bottomLinks .floatL a {margin-right: 20px;}
  .homeWrap .bottomLinks a {font-size: 17px;}
  .homeWrap .bottomLinks #socialBlocks li {width:32px; margin: 2px 3px 0;}
  .homeWrap .bottomLinks #socialBlocks li a {padding: 5px;}

  .homeTour .homeTourIntro h3 {
    font-size: 28px;
  }
  #contentWrap .homeTour .homeTourIntro p {
    font-size: 17px;
    line-height: 24px;
  }

  .homeTourWide.imgRight .homeTourIntro {width: 33%; margin-right: 5%;}
  .homeTourWide.imgRight .homeTourImg {width: 62%;}
  .homeTourWide.imgRight .homeTourImg img {width: 974px;}

  .homeTour:nth-child(4) .homeTourIntro, .homeTour:nth-child(4) .homeTourImg {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .homeTour:nth-child(4) .homeTourIntro {margin-left: 0;}
  .homeTour:nth-child(4) .homeTourIntro h3 {line-height: 1.3;}
  .homeTour:nth-child(4) .homeTourImg img {margin-bottom: 40px; float: none}
}
@media screen and (max-width: 1120px) {
  .homeWrap .bottomLinks .floatL a:nth-child(3) {display:none;}
}
@media screen and (max-width: 979px) {
  .homeTour, .alternateBg {padding: 40px 15px}
  .demo #contentBody > div {padding-bottom: 20px}

  .homeTour.pb0 {padding-bottom: 50px}
  .homeTourIntro, .homeTour > .homeTourIntro, .homeTourWide.imgRight .homeTourIntro, .homeTour:nth-child(2) .homeTourIntro {margin-bottom: 50px;}
  .homeTourWide.imgRight .homeTourIntro {text-align: center;}
  .homeTour .homeTourIntro h3 {font-size: 25px;}

  .homeTourWide .homeTourImg {margin-left: 0;}
  .homeTour > .homeTourImg, .homeTourWide.imgRight .homeTourImg, .homeTourWide.imgRight .homeTourImg img, .homeTour:nth-child(2) .homeTourIntro, .homeTour:nth-child(2) .homeTourImg {width: 100%;}
  .homeTour:nth-child(2) .homeTourIntro {margin-left: 0; text-align: center;}
  .homeTour .homeTourImg img {margin-bottom: 30px;}
  .homeTour:nth-child(4) .homeTourImg, .homeTour:nth-child(2) .homeTourImg img {margin-bottom: 20px;}
  .homeTourWide .homeTourImg img, .homeTourWide .homeTourImg .floatL {float: none;}

  .homeTour ul.twoColumnWrap li h3 {font-size: 23px;}
  .homeTour ul.twoColumnWrap li, .homeTour ul.twoColumnWrap.centerColumnWrap, .homeTourWide.imgRight .homeTourIntro {
    width: 100%;
    float: none;
  }
  .homeTour ul.twoColumnWrap li + li {margin-left: 0;}
  .homeTour ul.twoColumnWrap li .sideImg img {margin-right: 20px; width: 50px; height: 50px;}
  .homeTour ul.twoColumnWrap li, .homeTour ul.twoColumnWrap + ul.twoColumnWrap li:first-child {margin-top: 20px;}

  .alternateBg .imgHolder img {margin-top: 30px}
}
@media screen and (max-width: 559px) {
  .homeTour, .alternateBg {padding: 35px 15px}
  .demo #contentBody > div {padding-bottom: 0}
  .homeTour.pb0 {padding-bottom: 40px;}
  .homeTourIntro, .homeTour > .homeTourIntro, .homeTourWide.imgLeft .homeTourIntro, .homeTourWide.imgRight .homeTourIntro {text-align: left;}

  .homeTour > .homeTourIntro, .homeTourWide.imgRight .homeTourIntro, .homeTour:nth-child(2) .homeTourIntro {margin-bottom: 20px;}
  .homeTour:nth-child(4) .homeTourIntro {margin-bottom: 0;}
  .homeTour .homeTourImg img, .homeTourWide.imgLeft .homeTourImg, .homeTour:nth-child(2) .homeTourImg img {margin-bottom: 0;}
  .homeTour.pb0 .homeTourImg {margin-top: 30px;}

  #contentWrap .homeTour .homeTourIntro p {
    font-size: 15px;
    line-height: 22px;
  }
  .homeTour ul.twoColumnWrap li .sideImg {padding-top: 3px; float:left;}
  .homeTour ul.twoColumnWrap li .sideImg img {margin-right: 10px;}
  .homeTour ul.twoColumnWrap li h3 {
    font-size: 21px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    margin-left: 60px;
  }
  .homeTour ul.twoColumnWrap li h3 span {
    display: inline-block;
    vertical-align: middle;
    line-height: 23px;
  }
  .homeTour ul.twoColumnWrap li p {
    clear:both;
  }
}

/* ====== Other Main Site Pages ======*/
.newSite .carOverlay {background-size: 1000px 100%;}
.newSite .fullColumn div.twoThirds {max-width: 1340px;}
.newSite #wrapper:not(.features):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
}
.implementation .timeline ul .timeline-date p {opacity: 0}
.implementation .timeline ul .timeline-date p.animate {opacity: 1; -webkit-transition: all .7s ease; -moz-transition: all .7s ease;
  transition: all .7s ease;}
.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: 3px 3px 0 0}
.implementation .timeline ul .timeline-text > div + div {background-color: #fff !important; border: 1px solid #e1e1e1; margin-top: 0; border-radius: 0 0 3px 3px}
.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: 480px) {
  .features .fullColumn img {margin-left: 5%;}
}*/
@media screen and (min-width: 560px) {
  .alternateBg h2, .features .homeTour h1, .resources .fullColumn h2, #contentWrap .lrgTopHeading {
    font-size: 27px;
    margin-bottom: 30px;
  }
  .resources .fullColumn h2 {margin-bottom: 0}
  #contentWrap .lrgTopHeading.long {
    font-size: 24px
  }
  .features .homeTour h1 {margin-bottom: 10px}
  #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: 768px) {
  .features .homeTour h1 {margin-bottom: 30px}
}
@media screen and (min-width: 980px) {
  .alternateBg h2, .features .homeTour h1, .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}

  .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}
}

body.portal.color-heading #contentWrap h1:not(#current_month) {display: none}
body.portal.color-heading #contentWrap #centreColumn.cart h1,
body.portal.color-heading #contentWrap .materialStyle h1 {display: block !important;}

/* Custom user portal header */
.portal.customHeader #wrapper {
  padding-top: 0 !important
}
.portal .custom-header {
  background-color: #fff;
  padding: 0 20px;
  max-width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* Home features */
.tp-static-layers use {fill: #fff}
.home .tp-videolayer iframe, .home .tp-videoposter {border: 1px solid #fff}
.tp-caption.centreBtns {text-align: center}
.tp-caption.centreBtns *, .tp-caption.leftBtns * {position: static !important}
.tp-caption.centreBtns .tp-parallax-wrap, .tp-caption.leftBtns .tp-parallax-wrap {display: inline-block; margin: 8px}
@media screen and (min-width: 450px) {
  .tp-caption.centreBtns .tp-parallax-wrap, .tp-caption.leftBtns .tp-parallax-wrap {white-space: nowrap}
}

.homeNav use, .featureFloating use {fill: #5e5f5f}
.indie.home svg path {fill: inherit}

.featuresHome *, .featuresHome *::after, .featuresHome *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.featuresHome {
  font-size: 62.5%;
  font-size: 1.6rem;
}
.featuresHome > h1 {
  font-size: 1.9rem;
  text-align: center;
  padding: 80px 20px 0;
  background-color: #fff
}
.featureFloating {
  position: relative;
  padding: 8px 10px 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 11px 18px rgba(0, 0, 0, 0.05);
  background-color: #fff
}
.featureFloating .appIcons a img {width: 120px; height: auto}
.featureFloating figure {text-align: center}
.featureFloating figure img {max-width: 100%}
.featureFloating figure .mobileFloatingPic {max-width: 400px; width: 100%}
.featureFloating figure img:first-child {
  position: absolute;
  z-index: -1;
  max-width: 90%
}
.featureFloating .featureContent div a:hover img {opacity: .8}
.featureFloating svg {position: absolute; left: 50%; bottom: 9px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%)}

.featureFixed {
  position: relative;
  padding: 0 10px;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 0 40%
}
.featuresHome h2 {color: #222}
.featuresHome h2 {font-size: 20px; line-height: 27px; margin-bottom: 0.9em; margin-bottom: 0.9em}
.featuresHome p {line-height: 1.6}
.featuresHome .featureContent {text-align: center}
.featuresHome .featureContent a.colorBtn {margin-top: 20px}
.featuresHome .featureFloating .featureContent a.colorBtn {margin-top: 10px}
.featuresHome .featureContent a:hover i:after {left: 0}
.featureFixed .featureContent::before {  /* small devices */
  content: '';
  display: block;
  width: 100%;
  padding-top: 75.5%; /*(height / width) * 100*/
  margin: 0.5em auto 0;
}
.featureFixed .featureContent::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto
}

.homeNav {
  position: fixed;
  z-index: 2;
  right: 25px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.homeNav a {
  display: block;
  height: 30px;
  width: 30px;
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  -moz-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  transition: opacity 0.2s 0s, visibility 0.2s 0s;
}
.homeNav a.feature-prev {margin-bottom: 10px}
.homeNav a.feature-prev svg {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform-origin: 50%;
  margin: -10px 0 0 -10px;
}
.homeNav a span {text-indent: 100%}
.homeNav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.homeNav a:hover {opacity: 0.5}
.no-js .homeNav {display: none}

/* Home CTAs */
.homeCTAs {padding: 40px 20px; background-color: #f3f3f3; text-align: center}
.homeCTAs h1 {margin-bottom: 60px}
.homeCTAs a {
  max-width: 376px;
  background-color: #fff;
  text-align: left;
  vertical-align: top;
  margin: 40px auto 0;
  color: #222;
  border: 4px solid #fff;
  box-shadow: 0 0 0 rgba(0,0,0,0.3);
  display: inline-block;
}
.homeCTAs a:first-of-type {margin-top: 0}
.homeCTAs a figure {position: relative; background-color: #efefef}
.homeCTAs a figure img {margin-bottom: -4px}
.homeCTAs a figure > img {position: absolute; z-index: 1; bottom: 4px; left: -10px; width: 90%; max-width: 376px}
.homeCTAs a figure div {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 37.5%;
  overflow: hidden
}
.homeCTAs a figure div img {width: 100%}
.homeCTAs a:hover {box-shadow: 0 0 20px rgba(0,0,0,0.15)}
.cssanimations .homeCTAs a:hover figure > img {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px)
}
.homeCTAs a figure img:nth-child(2) {width: 100%}
.homeCTAs a:nth-of-type(2) figure > img {left: -17px}
.homeCTAs a > div {padding: 24px 30px 20px}
.homeCTAs a > div h2 {font-size: 21px; color: #222}
.homeCTAs a > div p {font-size: 15px; line-height: 1.6}
.homeCTAs a > div p span {white-space: nowrap}

@media only screen and (max-width: 1047px) {
  .featuresHome .featureContent a.colorBtn {margin: 0; padding: 7px 10px}
  .featuresHome > h1 {padding-top: 50px}
  .toFeatureFixed, .featureFloating .colorBtn {display: none}
  .featureFloating {box-shadow: none}
  .featureFloating figure img:not(.mobileFloatingPic) {display: none}

  .home-mobile-carousel {overflow: hidden; opacity: 0; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; background-color: #fff; padding: 10px;}
  .home-mobile-carousel.owl-loaded {opacity: 1}
  .home-mobile-carousel .owl-stage-outer {position: relative; z-index: 1}
  .home-mobile-carousel .owl-item {float: left}
  .home-mobile-carousel .owl-dots {text-align: center}
  .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;-webkit-border-radius:3px;-moz-border-radius:3px;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;zoom:1;*display:inline}.owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;-webkit-transition:opacity 200ms ease;-moz-transition:opacity 200ms ease;-ms-transition:opacity 200ms ease;-o-transition:opacity 200ms ease;transition:opacity 200ms ease;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-dots .owl-dot.active span,.owl-dots .owl-dot:hover span{background:#869791}
}
@media only screen and (max-width: 560px) {
  .featureFixed .featureContent::before {background-size: 100% auto}
  .featuresHome p {font-size: 15px; line-height: 1.4}
  .home-mobile-carousel .owl-item {padding-bottom: 10px}
}
@media only screen and (min-width: 400px) {
  .featureFixed .featureContent::before {
    width: 400px;
    height: 302px;
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .featureFixed.img1 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-1.jpg")}
  .featureFixed.img2 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-2.jpg")}
  .featureFixed.img3 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-3.jpg")}
  .featureFixed.img4 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-4.jpg")}
  .featureFixed.img5 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-5.jpg")}
  .featureFixed.img6 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-6.jpg")}
  .matrix .featureFixed .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-1-matrix.jpg")}
  .matrix .featureFixed.img2 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-2-matrix.jpg")}
  .matrix .featureFixed.img3 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-3-matrix.jpg")}
  .matrix .featureFixed.img4 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-4-matrix.jpg")}
  .matrix .featureFixed.img5 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-5-matrix.jpg")}
  .matrix .featureFixed.img6 .featureContent::before {background-image: url("/images/responsive/home-new/img-mobile-6-matrix.jpg")}
  .indie .featureFixed .featureContent::before {background-image: url("/images/responsive/home-new/indie/img-mobile-1-indie.jpg")}
  .indie .featureFixed.img2 .featureContent::before {background-image: url("/images/responsive/home-new/indie/img-mobile-2-indie.jpg")}
  .indie .featureFixed.img3 .featureContent::before {background-image: url("/images/responsive/home-new/indie/img-mobile-3-indie.jpg")}
  .indie .featureFixed.img4 .featureContent::before {background-image: url("/images/responsive/home-new/indie/img-mobile-4-indie.jpg")}
  .indie .featureFixed.img5 .featureContent::before {background-image: url("/images/responsive/home-new/indie/img-mobile-5-indie.jpg")}

  .featureFloating .appIcons {margin-top: 15px !important}
}
@media only screen and (min-width: 768px) {
  .featureFloating {padding: 50px 20px 0}
  .featureFloating figure {text-align: left}
  .featureFloating figure .mobileFloatingPic {width: 50%}

  .featuresHome h2 {font-size: 1.5rem}
  .featuresHome p {font-size: 1.0rem; line-height: 1.6}
  .featureFixed {min-height: 350px; padding: 0 20px}
  .featuresHome .featureContent {
    width: 42%;
    position: absolute;
    right: 5%; top: 50%; bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: left
  }
  .featureFixed .featureContent::before {display: none !important}

  .homeCTAs {padding-top: 60px; padding-bottom: 60px}
  .flexbox .homeCTAs > div {
    display: flexbox;/* IE10 */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .homeCTAs > div {max-width: 1300px; margin: auto}
  .homeCTAs a {width: 44%; margin: 0 2%; display: inline-block}
  .homeCTAs a:last-of-type {margin-top: 40px}
  .homeCTAs a div h2 {font-size: 25px}
  .homeCTAs a div p {font-size: 17px}
}
@media only screen and (max-width: 799px) {
  .rev_slider_wrapper li:not([data-index="rs-4"]) .slotholder {visibility: hidden; display: none}
}
@media only screen and (min-width: 800px) {
  .rev_slider_wrapper li .mobileImg {visibility: hidden; display: none}
}
@media only screen and (max-width: 1023px) {
  .about .twoColumnHolder:first-of-type .twoColumnText {width: 100%}
}
@media only screen and (min-width: 1024px) {
  .homeCTAs {padding-top: 80px; padding-bottom: 80px}
  .flexbox .homeCTAs > div {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-start; /* IE */
  }
  .homeCTAs a {
    -webkit-flex: 1;
    flex: 1;
    width: 28%; margin: 0 2%
  }
  .homeCTAs a:last-of-type {margin-top: 0}
}
@media only screen and (max-width: 1048px) {
  .homeNav {display: none}
}
@media only screen and (min-width: 768px) and (max-width: 1048px) {
  .featureFixed.img1 {background-image: url("/images/responsive/home-new/img-mobile-1.jpg")}
  .featureFixed.img2 {background-image: url("/images/responsive/home-new/img-mobile-2.jpg")}
  .featureFixed.img3 {background-image: url("/images/responsive/home-new/img-mobile-3.jpg")}
  .featureFixed.img4 {background-image: url("/images/responsive/home-new/img-mobile-4.jpg")}
  .featureFixed.img5 {background-image: url("/images/responsive/home-new/img-mobile-5.jpg")}
  .featureFixed.img6 {background-image: url("/images/responsive/home-new/img-mobile-6.jpg")}
  .matrix .featureFixed.img1 {background-image: url("/images/responsive/home-new/img-mobile-1-matrix.jpg")}
  .matrix .featureFixed.img2 {background-image: url("/images/responsive/home-new/img-mobile-2-matrix.jpg")}
  .matrix .featureFixed.img3 {background-image: url("/images/responsive/home-new/img-mobile-3-matrix.jpg")}
  .matrix .featureFixed.img4 {background-image: url("/images/responsive/home-new/img-mobile-4-matrix.jpg")}
  .matrix .featureFixed.img5 {background-image: url("/images/responsive/home-new/img-mobile-5-matrix.jpg")}
  .matrix .featureFixed.img6 {background-image: url("/images/responsive/home-new/img-mobile-6-matrix.jpg")}

  .indie .featureFixed.img1 {background-image: url("/images/responsive/home-new/indie/img-mobile-1-indie.jpg")}
  .indie .featureFixed.img2 {background-image: url("/images/responsive/home-new/indie/img-mobile-2-indie.jpg")}
  .indie .featureFixed.img3 {background-image: url("/images/responsive/home-new/indie/img-mobile-3-indie.jpg")}
  .indie .featureFixed.img4 {background-image: url("/images/responsive/home-new/indie/img-mobile-4-indie.jpg")}
  .indie .featureFixed.img5 {background-image: url("/images/responsive/home-new/indie/img-mobile-5-indie.jpg")}

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    .featureFixed.img1 {background-image: url("/images/responsive/home-new/img-mobile-1-retina.jpg")}
    .featureFixed.img2 {background-image: url("/images/responsive/home-new/img-mobile-2-retina.jpg")}
    .featureFixed.img3 {background-image: url("/images/responsive/home-new/img-mobile-3-retina.jpg")}
    .featureFixed.img4 {background-image: url("/images/responsive/home-new/img-mobile-4-retina.jpg")}
    .featureFixed.img5 {background-image: url("/images/responsive/home-new/img-mobile-5-retina.jpg")}
    .featureFixed.img6 {background-image: url("/images/responsive/home-new/img-mobile-6-retina.jpg")}
    .matrix .featureFixed.img1 {background-image: url("/images/responsive/home-new/img-mobile-1-matrix-retina.jpg")}
    .matrix .featureFixed.img2 {background-image: url("/images/responsive/home-new/img-mobile-2-matrix-retina.jpg")}
    .matrix .featureFixed.img3 {background-image: url("/images/responsive/home-new/img-mobile-3-matrix-retina.jpg")}
    .matrix .featureFixed.img4 {background-image: url("/images/responsive/home-new/img-mobile-4-matrix-retina.jpg")}
    .matrix .featureFixed.img5 {background-image: url("/images/responsive/home-new/img-mobile-5-matrix-retina.jpg")}
    .matrix .featureFixed.img6 {background-image: url("/images/responsive/home-new/img-mobile-6-matrix-retina.jpg")}

    .indie .featureFixed.img1 {background-image: url("/images/responsive/home-new/indie/img-mobile-1-indie-retina.jpg")}
    .indie .featureFixed.img2 {background-image: url("/images/responsive/home-new/indie/img-mobile-2-indie-retina.jpg")}
    .indie .featureFixed.img3 {background-image: url("/images/responsive/home-new/indie/img-mobile-3-indie-retina.jpg")}
    .indie .featureFixed.img4 {background-image: url("/images/responsive/home-new/indie/img-mobile-4-indie-retina.jpg")}
    .indie .featureFixed.img5 {background-image: url("/images/responsive/home-new/indie/img-mobile-5-indie-retina.jpg")}
  }
}
@media only screen and (min-width: 1048px) {
  body {overflow-x: hidden; /* IE */}
  .featureFloating {padding-bottom: 100px}
  .featuresHome h2 {font-size: 1.8rem; line-height: 1.2}
  .featuresHome p {font-size: 1.1rem}
  .featureFixed {background-attachment: fixed; background-size: 100%; height: 100vh; position: relative; z-index:1}

  .featuresHome article {background-color: #f3f3f3}
  .featuresHome article:nth-child(2n+3), .featuresHome .featureFloating {background-color: #fff}
  .featuresHome.end-scroll .featureFixed {background-attachment: scroll}
  .featuresHome .featureContent {width: 28%; right: 13%}

  .awards #icon-carousel .owl-nav {display: block}
  .awards #icon-carousel .owl-stage-outer {margin-top: 0}

  .featureFloating figure img {
    position: relative;
    top: 50%; bottom: auto;
    max-width: 78%;
    -webkit-transition: 1.5s ease-out;
    -moz-transition: 1.5s ease-out;
    -o-transition: 1.5s ease-out;
    transition: 1.5s ease-out;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  .featureFloating figure img:first-child {
    position: absolute;
    max-width: 78%;
    -webkit-transform: translateY(-40%);
    -moz-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    -o-transform: translateY(-40%);
    transform: translateY(-40%)
  }
  .featureFloating figure img.animate {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
  .featureFloating figure img.animate:first-child {
    -webkit-transform: translateY(-55%);
    -moz-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    -o-transform: translateY(-55%);
    transform: translateY(-55%)
  }
  .featureFloating figure img.floatUp {
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    -o-transform: translateY(-30%);
    transform: translateY(-30%)
  }
  .featureFloating figure img.floatUp:first-child {
    -webkit-transform: translateY(-70%);
    -moz-transform: translateY(-70%);
    -ms-transform: translateY(-70%);
    -o-transform: translateY(-70%);
    transform: translateY(-70%)
  }

  .featureFixed.img1 {background-image: url("/images/responsive/home-new/img-1.jpg")}
  .featureFixed.img2 {background-image: url("/images/responsive/home-new/img-2.jpg")}
  .featureFixed.img3 {background-image: url("/images/responsive/home-new/img-3.jpg")}
  .featureFixed.img4 {background-image: url("/images/responsive/home-new/img-4.jpg")}
  .featureFixed.img5 {background-image: url("/images/responsive/home-new/img-5.jpg")}
  .featureFixed.img6 {background-image: url("/images/responsive/home-new/img-6.jpg")}
  .matrix .featureFixed.img1 {background-image: url("/images/responsive/home-new/img-1-matrix.jpg")}
  .matrix .featureFixed.img2 {background-image: url("/images/responsive/home-new/img-2-matrix.jpg")}
  .matrix .featureFixed.img3 {background-image: url("/images/responsive/home-new/img-3-matrix.jpg")}
  .matrix .featureFixed.img4 {background-image: url("/images/responsive/home-new/img-4-matrix.jpg")}
  .matrix .featureFixed.img5 {background-image: url("/images/responsive/home-new/img-5-matrix.jpg")}
  .matrix .featureFixed.img6 {background-image: url("/images/responsive/home-new/img-6-matrix.jpg")}

  .indie .featureFixed.img1 {background-image: url("/images/responsive/home-new/indie/img-1-indie.jpg")}
  .indie .featureFixed.img2 {background-image: url("/images/responsive/home-new/indie/img-2-indie.jpg")}
  .indie .featureFixed.img3 {background-image: url("/images/responsive/home-new/indie/img-3-indie.jpg")}
  .indie .featureFixed.img4 {background-image: url("/images/responsive/home-new/indie/img-4-indie.jpg")}
  .indie .featureFixed.img5 {background-image: url("/images/responsive/home-new/indie/img-5-indie.jpg")}

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
    .featureFixed.img1 {background-image: url("/images/responsive/home-new/img-1-retina.jpg")}
    .featureFixed.img2 {background-image: url("/images/responsive/home-new/img-2-retina.jpg")}
    .featureFixed.img3 {background-image: url("/images/responsive/home-new/img-3-retina.jpg")}
    .featureFixed.img4 {background-image: url("/images/responsive/home-new/img-4-retina.jpg")}
    .featureFixed.img5 {background-image: url("/images/responsive/home-new/img-5-retina.jpg")}
    .featureFixed.img6 {background-image: url("/images/responsive/home-new/img-6-retina.jpg")}
    .matrix .featureFixed.img1 {background-image: url("/images/responsive/home-new/img-1-matrix-retina.jpg")}
    .matrix .featureFixed.img2 {background-image: url("/images/responsive/home-new/img-2-matrix-retina.jpg")}
    .matrix .featureFixed.img3 {background-image: url("/images/responsive/home-new/img-3-matrix-retina.jpg")}
    .matrix .featureFixed.img4 {background-image: url("/images/responsive/home-new/img-4-matrix-retina.jpg")}
    .matrix .featureFixed.img5 {background-image: url("/images/responsive/home-new/img-5-matrix-retina.jpg")}
    .matrix .featureFixed.img6 {background-image: url("/images/responsive/home-new/img-6-matrix-retina.jpg")}

    .indie .featureFixed.img1 {background-image: url("/images/responsive/home-new/indie/img-1-indie-retina.jpg")}
    .indie .featureFixed.img2 {background-image: url("/images/responsive/home-new/indie/img-2-indie-retina.jpg")}
    .indie .featureFixed.img3 {background-image: url("/images/responsive/home-new/indie/img-3-indie-retina.jpg")}
    .indie .featureFixed.img4 {background-image: url("/images/responsive/home-new/indie/img-4-indie-retina.jpg")}
    .indie .featureFixed.img5 {background-image: url("/images/responsive/home-new/indie/img-5-indie-retina.jpg")}
  }

  .featureFloating figure .mobileFloatingPic {display: none}
}
@media only screen and (min-width: 1200px) {
  .featuresHome h2 {font-size: 1.9rem}
  .homeNav {display: block}
  .featuresHome .featureContent {width: 26%; right: 14%}
}
@media only screen and (min-width: 1400px) {
  .featuresHome h2 {font-size: 2.2rem}
}