html, body, .mm-page {background-color: #fff !important}
h1 {font-size: 44px; line-height: 1.2}
h2 {color: #fff; margin-bottom: 24px}
p {line-height: 1.6; margin: 27px 0}
input, select, textarea, p, input[type="button"], button, li, blockquote {font-size: 18px}
.cypher li {font-size: 17px}
.header > div:first-child p, li {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
.px39 {font-size: 39px}
.px34 {font-size: 34px}
.px32, h2 {font-size: 32px}
.px31 {font-size: 31px}
.px30 {font-size: 30px}
.px29 {font-size: 29px}
.px28 {font-size: 28px}
.px27 {font-size: 27px}
.px26 {font-size: 26px}
.px25 {font-size: 25px}
.px23 {font-size: 23px}
.px22 {font-size: 22px}
.px21 {font-size: 21px}
.px20 {font-size: 20px}
.px19 {font-size: 19px}
.px18 {font-size: 18px}
.px17 {font-size: 17px}

.top_bg_circle {z-index: 1; height: 600px}
.top_bg_circle:before {width: 8000px; height: 8000px; margin-left: -4000px}
.indie .top_bg_circle:before {background: linear-gradient(135deg, #36376d 20%, #695490)}
.cypher .top_bg_circle:before {background: linear-gradient(135deg, #91babd 50%, #475480 85%)}
.cypher header {border: 0}
img {flex-shrink: 0}

.wrapper {max-width: 100%; margin: auto; box-sizing: border-box; padding: 0 40px}

.header {color: #fff; display: flex; justify-content: space-between; align-items: center; max-width: 1420px; margin: 140px auto 170px; box-sizing: border-box; position: relative; z-index: 1; padding: 0 40px; text-align: left}
.header > *:first-child p {margin-bottom: 0}
.header .list {background: #5bb253; padding: 20px 30px 45px; box-shadow: 10px 10px 35px 0 rgba(40, 43, 49, .3); background: url('/images/landing-pages/neo/header-students.jpg') 50% / cover no-repeat; margin-left: 90px}
.matrix .header .list {background-image: url('/images/landing-pages/about-lmss/matrix/header-learners.jpg')}
.indie .header .list {background-image: url('/images/landing-pages/about-lmss/indie/header-learners.jpg')}
.cypher .header .list {background-image: url('/images/landing-pages/about-lmss/cypher/header-learners.jpg')}
.header .list ul {display: inline-block; text-align: left; padding: 0; margin: 0 0 0 20px; list-style: inherit; margin-left: 20px; line-height: 1.7}

.intro {padding: 40px 0 50px; text-align: center; max-width: 950px; margin: 70px auto 0; position: relative}
.intro p {margin-bottom: 0}

.icon_list {display: flex; flex-flow: row wrap; width: 1420px; max-width: 100%; margin: 0px auto; justify-content: center; position: relative}
.icon_list > div {width: 30%; padding: 0 20px 40px; line-height: 1.5; max-width: 430px; box-sizing: border-box}
.icon_list > div div {display: flex; align-items: center}
.icon_list > div img {width: 140px; margin-right: 15px}

.users {display: flex; justify-content: space-between; flex-flow: row wrap; margin: 30px auto 90px; width: 1200px; max-width: 100%; text-align: center; position: relative}
.users > div {width: 24%; max-width: 200px; font-size: 19px}
.users > div img {margin-bottom: 10px}
.quote_bar {background: #dc7d7a; border-radius: 80px; padding: 10px 40px; margin: auto; display: table; text-align: center; color: #fff; border: 1px solid #fff; position: relative; z-index: 1}
.quote_bar cite {display: block; font-style: normal; font-size: 15px; color: rgba(255,255,255,0.7); margin-top: 2px}

.dot_lines {width: 100%; position: absolute; z-index: 0; background: url(/images/responsive/tour/neo/uptime-and-performance.svg) 50% 0 no-repeat; margin-top: -380px; height: 905px}
.side_bg_circle {width: 1000px; height: 1000px; right: 66%}

.info_grid {display: flex; justify-content: space-between; flex-flow: row wrap; max-width: 1450px; margin: 50px auto; position: relative}
.info_grid > div {width: 32%; padding: 0 20px 40px; line-height: 1.5; max-width: 420px; box-sizing: border-box; text-align: left}
.info_grid > div div {display: flex; align-items: center; margin-bottom: 15px}
.info_grid > div img {width: 100px}
.info_grid > div h3 {margin-left: 10px; font-size: 21px; color: #222}
.info_grid > div blockquote, .info_grid > div p {font-size: 19px; color: #048497}
.info_grid > div p {font-size: 18px; margin: 10px 0 0}
.cypher .info_grid > div blockquote, .matrix .info_grid > div blockquote, .matrix .info_grid > div p {color: #6a8285}
.info_grid > div cite {display: block; font-style: normal; color: #9c9c9c; border-top: 1px solid #e0e0e0; padding-top: 5px; font-size: 17px; margin-top: 5px}

.indie .info_grid {margin: 0 auto 50px}
.indie .info_grid > div {text-align: center}
.indie .info_grid > div div:first-child {margin-bottom: 15px}
.indie .info_grid > div img {width: 150px; margin: auto}
.indie .info_grid > div .reason {font-size: 19px; color: #6a8285; display: block}

hr {border-width: 0 0 1px; height: 0; margin: auto; max-width: 900px}
.spacer {width: 4%; height: 20px; flex-shrink: 0}

.divider {margin: 0 10px; color: #e8e8e8}
.colour_bar {background: linear-gradient(135deg, #6358b1, #0d8198); padding: 0 40px}
.middle_text {max-width: 1100px; margin: 0 auto; padding: 0; box-sizing: border-box; border-radius: 6px; display: flex; align-items: center; position: relative; text-align: left}
.middle_text + .middle_text {margin-top: -40px}
.middle_text ul {margin: 20px 0 0 40px}
.middle_text p {margin: 0}
.matrix .middle_text p {margin: 20px 0}
.middle_text > p:first-child {margin-left: 80px}
.middle_text > p:last-child {margin-right: 80px}
.colour_bar .middle_text p {color: #fff}
.colour_bar .middle_text p strong {color: #77c3d8}
.indie .colour_bar, .matrix .colour_bar, .cypher .colour_bar {background: linear-gradient(135deg, #2e3873, #6c7fb5)}
.indie .colour_bar  .middle_text p strong {color: #a1d7ff}
.matrix .colour_bar  .middle_text p strong {color: #a1d7ff}
.cypher .colour_bar  .middle_text p strong {color: #ffe2a1}

.flex_middle {display: flex; align-items: center}
#contentFooter {position: relative}

a.back_to_top {background-color: #048497; width: 51px; height: 50px; border-radius: 50%; border-width: 0; box-sizing: border-box; text-align: center; padding: 7px; margin: 0 0 0 20px; transition: all .25s ease; cursor: pointer; box-shadow: 3px 3px 15px rgba(0,0,0,0.3)}
a.back_to_top:hover {background-color: #16a83f}
a.back_to_top img {transform: rotate(-90deg)}

@media screen and (max-width: 1500px) {
  .header .list {margin-left: 100px}
}
@media screen and (max-width: 1360px) {
  h1 {font-size: 37px}
  .header .list {padding: 10px 15px 35px}
  .info_grid > div {max-width: 100%; padding: 0 0 40px}
  .icon_list > div img {width: 120px}
}
@media screen and (max-width: 1150px) {
  .header > div h1 {font-size: 30px}
  .header > div p.px23 {font-size: 19px}
  .header > div h2 {font-size: 28px}
  .header .list li {font-size: 17px}
}
@media screen and (max-width: 1100px) {
  .wrapper, .header {padding: 0 30px}
  .middle_text > p:first-child {margin-left: 0}
  .middle_text > p:last-child {margin-right: 0}
  .info_grid > div {width: 48%}
  .info_grid > div h3 {font-size: 20px}
  .icon_list {justify-content: space-between}
  .icon_list > div {width: 47%; max-width: 100%; padding: 0 0 40px}
  .users > div img {max-width: 150px}
}
@media screen and (min-width: 1025px) {
  .header .list {flex: 0 0 530px}/* list min-width */
  .indie .header .list {flex: 0 0 550px}
  .cypher .header .list {flex: 0 0 620px}
}
@media screen and (max-width: 1024px) {
  h1 {font-size: 33px}
  .header {margin-top: 130px}
  .header .list {flex: 0 0 500px; margin-left: 30px}
  .top_bg_circle {height: 560px}
  .middle_text img {width: 350px}
}
@media screen and (max-width: 979px) {
  .middle_text img {width: 300px}

  .header {display: block; text-align: center; max-width: 830px; margin-top: 70px; margin-bottom: 60px}
  .header .list {max-width: 550px; margin: 40px auto 0}
}
@media screen and (max-width: 768px) {
  .px39 {font-size: 34px}
  .px32 {font-size: 27px}
  .px31 {font-size: 26px}
  .px30, h2 {font-size: 25px}
  .px29 {font-size: 24px}
  .px28 {font-size: 21px}
  .px27 {font-size: 22px}
  .px26 {font-size: 21px}
  .px25 {font-size: 20px}
  .px23, .px22 {font-size: 19px}
  .px21, .px20, .users > div {font-size: 18px}
  .px19, .px18 {font-size: 17px}
  .px17, li, .cypher li {font-size: 15px}

  .wrapper {padding: 0 20px}
  .header {padding: 0 20px}

  .intro {padding-bottom: 10px}

  .info_grid {max-width: 450px; margin-top: 30px}
  .info_grid > div {width: 100%}
}
@media screen and (max-width: 700px) {
  .colour_bar {padding: 30px}
  .middle_text {flex-direction: column}
  .intro {flex-direction: column; text-align: center}
  .middle_text img {margin-bottom: 20px}
  .middle_text + .middle_text img {display: none}
}
@media screen and (max-width: 667px) {
  .icon_blocks img {width: 100px}
  .icon_blocks div {font-size: 16px}
  .icon_list > div {width: 100%}
}
@media screen and (max-width: 550px) {
  .px39 {font-size: 31px}
  .px30 {font-size: 24px}
  .px23, .px22 {font-size: 17px}
  .px20, p {font-size: 16px}

  .header {padding: 0}
  .header > div:first-child {margin: 0 20px}
  .header > div h1 {font-size: 24px}
  .header > div p.px23 {font-size: 18px; line-height: 1.4}
  .header > div h2 {font-size: 23px}
  .header > div .list {padding: 2px 10px 20px; margin: 0 -20px; box-sizing: none}

  .dot_lines {margin-top: -410px}

  .intro > div:nth-child(2) {padding: 0 20px}
  .intro {padding: 0}
  .icon_blocks {flex-wrap: wrap}
  .icon_blocks > div {flex: auto}
  .icon_blocks img {width: 90px; max-width: 100%}

  .info_grid > div h3 {font-size: 19px}
  .info_grid > div blockquote, .info_grid > div p {font-size: 17px}
  .info_grid > div cite {font-size: 15px}
  .users {margin-top: 10px; width: 400px}
  .users > div {width: 47%; max-width: 100%; margin-top: 20px}

  a.back_to_top {margin: 10px auto 0; display: block}
}
@media screen and (max-width: 340px) {
  .dot_lines {margin-top: -450px; background-position: -280px}
  .header .divider {margin: 0 8px}
}