i {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
i:after {
  content: '';
  background: url('/images/icons/main-icons.png?82') no-repeat;
  width: 60px; height: 10000px; /* actual width (halves width for retina display) - height 10 000 accounts for future additions */
  left: 0;
  position: absolute;
}
@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) {
  i:after {
    background-image: url('/images/icons/main-icons-retina.png?82');
    background-size: 60px; /* half actual width */
  }
}
i.icnColor:after, a:hover i:after {left: -20px}
i.teachers:after {top: -200px;}
i.listing:after {top: -500px}
i.email:after {top: -640px}
i.user:after {top: -700px}
i.school:after {top: -1320px}
i.portal:after {top: -2020px}

.contact-info ul#socialBlocks li {width: auto; min-width: 80px}
#socialBlocks a {border: none; background: #5e5f5f; margin-left: 5px; padding: 5px 12px 10px; display: inline-block; border-radius: 50%}
#socialBlocks a:hover {background: none; opacity: 1}
#socialBlocks a span {display: none}
#socialBlocks i {width: 20px; height: 19px}
.svg #socialBlocks i:after {background: url('/images/icons/footer-icons.svg') no-repeat; background-size: 40px; width: 40px}
.no-svg #socialBlocks i:after {background: url('/images/icons/footer-icons-sml.png?2') no-repeat; background-size: 40px; width: 40px}
#socialBlocks a i:after {left: -20px}
#socialBlocks a:hover i:after {left: 0}
#socialBlocks a.socialFb i:after {top: 0}
#socialBlocks a.socialTwr i:after {top: -19px}
#socialBlocks a.socialLin i:after {top: -38px}
#socialBlocks a.socialRss i:after {top: -56px}
#socialBlocks a.socialGoogle i:after {top: -76px}
#socialBlocks a.socialPin i:after {top: -95px}
#socialBlocks a.socialYouTube i:after {top: -114px}
#socialBlocks a.socialVimeo i:after {top: -134px}
#socialBlocks a.socialIG i:after {top: -152px}

/* ------ Css Resets ------ */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td, figure {margin: 0; padding: 0}
input, select, textarea {margin: 0; padding: 0; outline: none; font-family: inherit; box-sizing: border-box}

table {border-collapse: collapse; border-spacing: 0}
fieldset {border: 0}
ul {list-style: none}
caption {text-align: left}
h1, h2, h3, h4, h5, h6 {font-weight: normal}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''}
abbr, acronym {border: 0}

a {cursor: pointer}
a, a:hover {text-decoration: none}
a, a:focus, a:active, a:hover {outline: none}
a img {border: 0}
*, *:after, *:before {box-sizing: border-box}

/* For HTML5 */
main, article, aside, details, figcaption, figure, footer, header, hgroup, nav, article, summary, menu {display: block}
audio, canvas, video {display: inline-block; *display: inline; *zoom: 1}
audio:not([controls]) {display: none; height: 0}
svg:not(:root) {overflow: hidden}

/* ------ Defaults ------ */
::-moz-selection, ::selection {
  background: #666666;
  color: #fff;
  text-shadow: none;
}
.chromeframe {
  position: relative;
  margin: 0;
  padding: 0.7em 6px;
  background: #fff;
  color: #000;
  z-index: 500;
}
.chromeframe a {
  text-decoration: underline;
  color: #000;
}

/* ------ Layout Helpers ------ */
.floatL { float: left}
.floatR { float: right}
.center {text-align:center}
.valign-mid {display: table-cell; vertical-align: middle}
.nowrap {white-space: nowrap}
.mt0 {margin-top: 0}
.mt20 {margin-top: 20px}
.mr0 {margin-right: 0}
.mr5 {margin-right: 5px}
.mb0 {margin-bottom: 0}
.ml5 {margin-left: 5px}

/* ------ Text ------ */
html, body {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  line-height: 1.3;
  text-align: center;
}
html, body, button {
  font-family: 'RobotoLightNew', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale
}
.home-holder article, div.about-platforms, nav {
  -webkit-font-smoothing: antialiased; -webkit-text-stroke: 0.35px;/* safari */
}
strong {
  font-family: 'RobotoRegularNew', helvetica, arial, sans-serif;
  font-weight: normal
}
.italics {
  font-family: 'RobotoLightItalicNew', helvetica, arial, sans-serif
}

.underline, #brand_history h2 {
  font-size: 24px
}
.awards .owl-item > div .sideText h2 {
  font-size: 18px
}
.home-holder article .platform-description, article.about .about-platforms > div p, article.about p, article.awards p, .main-form label span, nav ol li a {
  font-size: 16px
}
.cypher-logo div {
  font-size: 15px
}
.home-holder article a.more, .home-holder div.platform .heading p {
  font-size: 14px
}

.ellipsis {white-space: nowrap; text-overflow: ellipsis; overflow: hidden}
p, dl dd {
  margin: 10px 0;
  line-height: 1.4
}

/* ------ Colors ------ */
.home-holder article.neo a.more, .awards .owl-item > div.neo h2:before, .contact-info a.neo, article.about .about-platforms > div.neo figure, .blogBtnNeo {background: #048497}
.home-holder article.matrix a.more, .awards .owl-item > div.matrix h2:before, .contact-info a.matrix, article.about .about-platforms > div.matrix figure, .confirmation.sent span, .blogBtnMatrix {background: #4f7a81}
.home-holder article.indie a.more, .awards .owl-item > div.indie h2:before, .contact-info a.indie, article.about .about-platforms > div.indie figure, .blogBtnIndie {background: #645892}
nav a span, nav a span:before, nav a span:after, header.bar ~ nav a span, header.bar ~ nav a span:before, header.bar ~ nav a span:after {background: #5e5f5f}

header.bar + nav.show-nav a span:before, header.bar + nav.show-nav a span:after, .no-csstransforms3d a.url:hover {background-color: #fff}

.home-holder article.neo a.more:hover, .neo-highlight, .neo a, .no-csstransforms3d a.url.neo:hover {color: #048497}
.home-holder article.matrix a.more:hover, .matrix-highlight, .matrix a, .contact-info .call a:hover, .no-csstransforms3d a.url.matrix:hover {color: #4f7a81}
.home-holder article.indie a.more:hover, .indie-highlight, .indie a, .contact-info .call a:hover, .no-csstransforms3d a.url.indie:hover {color: #645892}
.home-holder article .platform-description > div > p {color: #5e5f5f}

.neo .platform-description, .neo .platform-description p a, article.about a.neo-highlight, article.awards .neo a, article.awards a.neo-highlight, .contact-info a.neo, .home-holder article.neo a.more {border: 1px solid #048497}
.home-holder article.matrix .platform-description, .home-holder article.matrix .platform-description p a, article.about a.matrix-highlight, article.awards .matrix a, article.awards a.matrix-highlight, .contact-info a.matrix, .home-holder article.matrix a.more {border: 1px solid #4f7a81}
.home-holder article.indie .platform-description, .home-holder article.indie .platform-description p a, article.about a.indie-highlight, article.awards .indie a, article.awards a.indie-highlight, .contact-info a.indie, .home-holder article.indie a.more {border: 1px solid #645892}
.home-holder .platform-description p a, article.about a, article.awards a {border-width: 0 0 1px !important}

/* ------ Transitions ------ */
.owl-nav > div, nav, .about-stats li .num, article h1:before, #socialBlocks a {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#wrapper:nth-child(2) header:not(.bar) .logo-holder {-webkit-transition: box-shadow 1s; transition: box-shadow 1s; box-shadow: 0 0 0 rgba(0,0,0,.4)}
article h1:before {-webkit-transition-delay: 300ms; transition-delay: 300ms}


/* ------ Intro ------ */
.preloader {
  background-color: #5e5f5f;
  position: fixed;
  top: 0;
  width: 100%; height: 100%
}.preloader, .preloader.higher-zindex ~ #wrapper header, .preloader.higher-zindex ~ #wrapper .logo-holder {z-index: 50}
.preloader.visible + .preloader-animation {opacity: 1}

@keyframes loader {
  0%, 10%, 100% {width: 30px; height: 30px}
  65% {width: 60px; height: 60px}
}
@keyframes loaderBlock {
  0%, 30% { transform: rotate(0)}
  55% {background-color: #fff}
  100% {transform: rotate(90deg)}
}
@keyframes loaderBlockInverse {
  0%, 20% {transform: rotate(0)}
  55% {background-color: #fff}
  100% {transform: rotate(-90deg)}
}
.preloader-animation {position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%) rotate(45deg) translate3d(0,0,0); animation: loader 1.2s infinite ease-in-out; z-index: 51}
.preloader-animation span {position: absolute; display: block; width: 15px; height: 15px; background-color: #6a8285; animation: loaderBlock 1.2s infinite ease-in-out both}
.preloader-animation span:nth-child(1) {top: 0; left: 0}
.preloader-animation span:nth-child(2) {top: 0; right: 0; animation: loaderBlockInverse 1.2s infinite ease-in-out both}
.preloader-animation span:nth-child(3) {bottom: 0; left: 0; animation: loaderBlockInverse 1.2s infinite ease-in-out both}
.preloader-animation span:nth-child(4) {bottom: 0; right: 0}

header.bar {
  background-color: rgba(255, 255, 255, 0.93);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  position: fixed;
  width: 100%; top: 0;
  z-index: 10;
  height: 94px;
}header.bar .logo-holder {margin: 20px 30px 15px; width: 200px; position: static; padding: 0}
header.bar .logo-holder h1 {width: auto; margin: 0}
header.bar .logo-holder h1 img {margin: 0; width: 200px}
header.bar .logo-holder h1 img.logo_white {display: none}
header.bar .logo-holder h1 div {display: none}
article.about:before {content: ''; display: block; width: 100%}

header .logo-holder {position: relative; z-index: 2; padding: 25px 25px 20px}
header .logo-holder h1, .home-holder article .platform-description .valign-mid {text-align: left}
header .logo-holder h1 a {display: block}
header .logo-holder h1 div {margin: 13px 0 0 0; color: #5e5f5f;}
.cypher-logo div {letter-spacing: 0.7px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}

nav {
  position: fixed;
  z-index: 11;
  right: 0; top: 0;
}
nav > a {
  display: block;
  width: 62px; height: 70px;
  z-index: 11;
  padding: 40px 0 0 20px;
  position: relative;
}
nav a span {
  display: block;
  position: absolute;
}
nav a span:before, nav a span:after {
  content: " ";
  margin-top: -8px;
  position: absolute;
  left: 0;
  right: 0;
}
nav a span:after {margin-top: 8px}
nav a span, nav a span:before, nav a span:after {
  width: 23px;
  height: 2px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
nav.show-nav a span {background-color: transparent !important}
nav.show-nav a span:before {
  margin-top: 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
nav.show-nav a span:after {
  margin-top: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
nav ol {
  padding: 95px 0 20px 15px;
  position: fixed;
  background-color: #282828;
  width: 170px; height: 100%;
  top: 0; right: -170px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  list-style: none;
}
nav.show-nav ol {
  right: 0
}
nav ol li a {
  color: #bdbdbd;
  display: block;
  overflow: hidden;
  text-align: left;
  padding: 4px;
  position: relative;
  z-index: 1;
  transition: margin 1s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: margin 1s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: margin 1s cubic-bezier(0.23, 1, 0.32, 1);
}
nav ol li a[target="_blank"] {
  font-size: 16px;
}
.csstransforms3d nav ol li a:before {
  content: attr(data-text);
  position: absolute;
  top: 0; right: 0; width: 100%; height: 100%;
  background: #fff;
  color: #3a3a3a;
  padding: inherit;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.csstransforms3d nav ol li a:hover:before {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.no-csstransforms3d nav ol li a:hover {color: #fff}

.home-holder {border-top: 170px solid transparent}
.home-holder article, .home-holder article > div, .home-holder article figure {width: 100%; height: 33.5%; overflow: hidden}
.home-holder article > div {position: relative; height: 100%}
.home-holder article figure {position: absolute; top: 0; height: 100%}
.home-holder article.open {width: 100%}
.home-holder div.platform .heading {
  z-index: 1;
  position: relative;
  margin: 10px 18px 0
}
.home-holder div.platform .heading img {height: 35px; max-width: 100%}
.home-holder div.platform .heading p {color: #fff; text-transform: uppercase; margin-top: 0}

.csstransitions .home-holder article figure {
  transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  -ms-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.home-holder article.matrix figure {background: url('/images/cypher/matrix-home.jpg') 50% 50% / cover no-repeat}
.home-holder article.neo figure {background: url('/images/cypher/neo-home.jpg') 50% 50% / cover no-repeat}
.csstransitions .home-holder article:hover figure {
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1)
}
.home-holder article a.more, a.url, button {
  display: inline-block;
  width: 130px; height: 41px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding-top: 12px;
  margin: 30px 0 10px
}
a.url, button {
  -webkit-transition: 300ms ease-in;
  -o-transition: 300ms ease-in;
  transition: 300ms ease-in
}
.csstransforms3d a.url:before, .csstransforms3d .form-footer button:before {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #fff;
  padding: inherit;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.csstransforms3d a.url.matrix:before {
  right: 0; left: auto;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0)
}
.csstransforms3d a.url:hover:before, .csstransforms3d .form-footer button:not(:disabled):hover:before {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.home-holder article a.more span, a.url span {display: inline-block}

.home-holder article .platform-description {
  background-color: #fff;
  line-height: 40px;
  z-index: 12;
  width: 0;
  padding: 40px 0 0;
  border-width: 5px 0 0 0 !important
}
.home-holder .platform-description:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em
}
.home-holder .platform-description:after {
  content: '';
  display: block;
  height: 50px; width: 100%;
  bottom: 0; left: 0;
  position: absolute;
  opacity: 0
}
.home-holder .neo .platform-description:after {background: linear-gradient(rgba(4,132,151,0), #048497)}
.home-holder .indie .platform-description:after {background: linear-gradient(rgba(100,88,146,0), #645892)}
.home-holder .matrix .platform-description:after {background: linear-gradient(rgba(79,122,129,0), #4f7a81)}

.home-holder .platform-description .cypher-logo {display: none}
.home-holder .platform-description .cypher-logo img {margin-top: 0}
.home-holder article > .platform-description {left: 0}

.home-holder .platform-description .valign-mid {
  opacity: 0;
  display: inline-block;
  vertical-align: middle;
  width: 100%; max-height: 100%;
  padding: 27px 25px 20px;
  overflow: auto;
}
.home-holder .platform-description .valign-mid,
.home-holder .platform-description a.close,
.home-holder .platform-description:after {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -ms-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.home-holder article > .platform-description .valign-mid,
.home-holder article > .platform-description:after {
  transform:translateX(50px);
  -webkit-transform:translateX(50px);
}
.home-holder article > .platform-description.show-content .valign-mid,
.home-holder article > .platform-description.show-content:after {
  opacity: 1;
  transition-duration: 1s;
  -o-transition-duration: 1s;
  -webkit-transition-duration: 1s;

  transform:translateX(0);
  -webkit-transform:translateX(0);
}
.home-holder .platform-description .valign-mid > p {margin: 15px 0}
.home-holder .platform-description .valign-mid > p:first-of-type {margin: 0 0 15px}

a.close {
  width: 60px; height: 21px; top: 0; right: 8px;
  margin-left: -30px;
  display: block;
  position: absolute;
  z-index: 4;
  opacity: 0
}
.platform-description.show-content a.close {
  opacity: 1
}
a.close span {
  position: absolute;
  width: 30px; height: 2px; top: 50%; left: 50%;
  margin: 0 0 0 -14px;
}
a.close span:before, a.close span:after {
  position: absolute;
  width: 100%; height: 100%; left: 0;
  background-color: #bbb;
  content: '';
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
a.close:hover span:before, a.close:hover span:after {background-color: #cbcbcb}
a.close span:before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
a.close span:after {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

/* ------ Other Sections ------ */
article.about, article.contact {width: 100%; overflow: hidden}

/* ------ About ------ */
.underline, #brand_history h2 {position: relative; text-transform: uppercase; margin: 80px 18px}
.underline:before {position: absolute; content: ""; width: 5px; background-color: #e0e0e0; height: 2px; top: 100%; left: 50%; margin: 30px 0 0 0}
.underline.animate:before {width: 86px; margin-left: -43px}
.underline span {text-transform: lowercase}

article.about p, article.awards p {line-height: 1.8}
article.about .about-text, article.contact form {max-width: 1240px; margin: 0 auto; vertical-align: top;}
article.about .about-text {text-align: left; margin: 0 auto 55px; padding: 0 20px}
article.about .about-text > div > p {padding: 0 0; margin: 0 0 33px}
article.about .about-text img[class*="about_img"] {margin: -10px 0 20px; width: 100%; border-radius: 4px}
article.about .about-text img.about_img_right {margin: 0}
article.about .about-platforms {display: table; width: 100%}
article.about .about-platforms > div {padding: 50px 40px 45px; color: #fff; position: relative; overflow: hidden; border: 1px solid #fff; border-width: 1px 0 0}
article.about .about-platforms > div figure {width: 33.5%; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1 }
article.about .about-platforms > div img {max-width: 100%; margin-bottom: 20px}
article.about .about-platforms > div p {max-width: 480px; margin: 10px auto 0; text-shadow: 1px 1px 2px rgba(0,0,0,.5)}

.about-stats, .contact-info ul {
  margin: 0 auto 30px;
  padding: 0 20px;
  width: 100%;
  max-width: 1300px;
}
.about-stats li, .contact-info ul li {
  display: inline-block;
  margin: 0 0 40px -4px;
  width: 50%;
  overflow: hidden;
  vertical-align: top
}
.about-stats li div {
  width: 130px; height: 140px;
  margin: 0 auto 15px
}
.about-stats div, .contact-info ul div {position: relative; display: inline-block}
.about-stats div img, .contact-info ul img {margin-top: 30px}
.about-stats div svg, .contact-info ul svg {position: absolute; top: 0; left: 0}
.about-stats div circle, .contact-info ul circle {fill: transparent}
.about-stats div.animate circle, .contact-info ul div.animate circle {
  stroke: #4f7a81;
  stroke-width: 2;
  stroke-dasharray: 534;
  -webkit-transition: stroke-dashoffset 1s; /* don't use in FF */
  -webkit-animation-play-state: running;
  -moz-transform: rotate(-90deg) translateX(-190px); /* FF bug fix */
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}
@-webkit-keyframes show100 {
  from {stroke-dashoffset: 537}
  to {stroke-dashoffset: 0}
}
@keyframes show100 {
  from {stroke-dashoffset: 537}
  to {stroke-dashoffset: 0}
}
.about-stats li span {
  display: block;
  color: #5e5f5f;
  letter-spacing: 1px
}
.about-stats li span:not(.num) {text-transform: uppercase}
.about-stats li .num {
  font-size: 30px;
  line-height: 25px;
  margin: 5px 0 10px;
  position: relative;
}
.about-stats li .num, .about-stats li .num * {color: #4f7a81}
.about-stats li:not(:nth-child(4)):not(:nth-child(5)) .num:after {content: '+'; margin-left: 5px}
.about-stats li:last-child .num span {display: inline-block}

/* ------ Map ------ */
#map {height: 500px; width: 100%; margin-bottom: 1px; text-align: left; border-top: 1px solid #d9dcde}
.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-child:not(:only-child) {margin-left: 6px}
.map_legend div img:not(:only-child) {margin-right: 0; margin-left: -2px}
.map_legend div img:last-child:not(:only-child) {margin-right: 6px}

/* ------ Resources ------ */
article.resources {padding: 0 20px 70px; overflow: hidden}

.guides a {max-width: 224px; margin: 0 11px 20px; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: top; border-radius: 3px; overflow: hidden; box-shadow: 1px 1px 4px rgba(0,0,0,0.2)}
.guides .guide-holder a {width: auto}
.guides a img {-ms-interpolation-mode: bicubic; width: 100% !important; width: 100%; max-width: 340px; height: auto; -moz-box-sizing: border-box; box-sizing: border-box}
.guides a img + span {background-color: #5e5f5f}
.guides a > span {display: block; width: 102%; height: 48px; margin: -4px 0 0 -1px; padding: 0 14px; -moz-box-sizing: border-box; box-sizing: border-box; display: table}
.guides a span span {display: block; color: #fff !important; font-size: 15px; text-align: left}
.guides a span span:first-child:not(:last-child) {margin-top: 6px}
.guides a span span:first-child:last-child {display: table-cell; vertical-align: middle; text-align: center; line-height: 17px}
.guides a span + span {font-size: 12px}
.guides a {-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out}
.guides a:hover {-webkit-transform: translate(-2px,-2px); transform: translate(-2px,-2px); box-shadow: 5px 5px 20px rgba(0,0,0,0.3)}

/* ------ Brand story ------ */
.twoColumnHolder {max-width: 1300px; margin: 0 auto}

#brand_story {background: #85acaf; padding-top: 1px}
#brand_story .twoColumnHolder {padding: 0 30px}
#brand_story .twoColumnHolder.middleLine {padding-bottom: 40px}
#brand_story p {margin: 25px 0 25px; line-height: 1.7; text-align: left}
#brand_story .twoColumnHolder .twoColumnText p:first-child {margin-top: 0}
#brand_story .twoColumnHolder:first-child .twoColumnText p:last-child {margin-bottom: 0}
#brand_story * {color: #fff}
#brand_story .center {position: relative; width: 100%; overflow: hidden; height: 404px}
#brand_story .center img {margin-bottom: -4px; position: absolute; left: 50%; bottom: 0; margin-left: -772px; z-index: 1}
#brand_story a {text-decoration: underline}

#brand_history .twoColumnHolder {position: relative}
#brand_history .twoColumnHolder h2 {position: relative; background: #fff}
#brand_history .twoColumnHolder h2:before, #vision_mission h2:before {content: none !important}

#vision_mission {padding: 0; background: none}
#vision_mission .twoColumnHolder {max-width:100%; border: 2px solid #e0e0e0; border-width: 2px 0}
#vision_mission .twoColumnHolder > div {height: 260px; font-size: 17px}
#vision_mission .twoColumnHolder div.text {text-align: center; display: table}
#vision_mission .twoColumnHolder div.text div {display: table-cell; vertical-align: middle; padding: 20px}
#vision_mission .twoColumnHolder div.text div h2 {margin: 0 0 20px}
#vision_mission .twoColumnHolder div.text div p, #section2 p {line-height: 26px}
#vision_mission .twoColumnHolder div.text div p {max-width: 700px; margin: auto}

#our_values {padding: 70px 0}
#our_values h2 {margin-top: 0 !important}
#our_values .iconNav {margin: 0 0 30px; padding-top: 0; position: relative; z-index: 1; background: none; display: inline-block}
#our_values .iconNav a {width: 45px; height: 45px; border-radius: 50%; position: relative; background: #fff; margin: 10px 5px; transition: all 300ms ease-out; display: inline-block}
#our_values .iconNav a svg {width: 26px; height: 50px}
#our_values .iconNav a.selected {box-shadow: 4px 4px 20px rgba(0,0,0,0.2)}
#our_values #icon-carousel {max-width: 700px; padding-top: 0; margin: auto}
#our_values #icon-carousel p {padding: 10px 20px}
#our_values #icon-carousel .owl-dots {display: none}

/* ------ 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: 13px; width: 13px; 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: 17px; text-align: left}
.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: ''; 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}

.timeline .timeline-text > div, .timeline-footer-wrap > div, .timeline-arrow:after {background-color: #85acaf}
.timeline ul li:nth-child(3n+2) .timeline-text > div, .timeline ul li:nth-child(3n+2) .timeline-arrow:after {background-color: #6a8285}
.timeline ul li:nth-child(3n+3) .timeline-text > div, .timeline ul li:nth-child(3n+3) .timeline-arrow:after {background-color: #645892}

@media screen and (min-width: 480px) {
  #our_values .iconNav a {width: 65px; height: 65px; margin: 0 13px 10px}
  #our_values .iconNav a svg {width: 40px; height: 70px}
}
@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}

  #vision_mission .twoColumnHolder > div {float: none}
  #vision_mission .twoColumnHolder br {display: none}
}
@media screen and (min-width: 560px) {
  .twoColumnText {width: 47%; display: inline-block; vertical-align: top; box-sizing: border-box; margin-right: 6%}
  .twoColumnText + .twoColumnText {margin: 0 0 0 -4px}

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

  #brand_story .center {position: relative}
  #brand_story .center:after, #brand_history .twoColumnHolder:before, .middleLine:before {width: 2px; height: 350px; background: #e8e8e8; left: 50%; position: absolute; margin-left: -2px; content: ''}
  .middleLine:before {height: 100%}
  #brand_story .center:after {bottom: 0; background: #fff; z-index: 0}
  #vision_mission .twoColumnHolder > div {width: 50%; height: 400px}
  #vision_mission .twoColumnHolder div.text div {padding: 0 13%}
}
@media screen and (min-width: 980px) {
  .timeline {margin-top: 70px}
  #our_values .iconNav a {margin: 0 13px 15px}
}
@media only screen and (max-width: 1023px) {
  .about .twoColumnHolder:first-of-type .twoColumnText {width: 100%}
}
@media screen and (min-width: 1098px) {
  #our_values .iconNav a {width: 100px; height: 100px; margin: 0 13px 20px}
  #our_values .iconNav a svg {width: 55px; height: 118px; margin-top: -5px}
  #our_values #icon-carousel .owl-item .text h3 {font-size: 22px}
  #our_values #icon-carousel .owl-item .text p {font-size: 18px; line-height: 31px}
}

/* ------ News ------ */
article.news {padding: 0 20px 70px; overflow: hidden; position: relative; background-color: #85acaf; z-index: 0}
article.news:before {content: ''; background: url('/images/cypher/news-bg.jpg') no-repeat; opacity: .3; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-size: cover}
article.news .underline, article.news > p {color: #fff}
.blogBtnMatrix, .blogBtnNeo, .blogBtnIndie {padding: 6px 11px; color: #fff; margin: 0 3px; display: inline-block}
.blogBtnMatrix {margin-left: -16px}
#news-carousel {max-width: 1500px; width: 100%; margin: 60px 0 20px; padding-top: 30px}
.flexbox .newsHolder .owl-stage, .flexbox .newsHolder .owl-stage .owl-item {display: -webkit-flex; display: flex}
.flexbox .newsHolder .owl-stage {
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
}
.flexbox .newsHolder .owl-stage .owl-item {-webkit-flex-direction: column; flex-direction: column; display: inline-block; float: none; box-shadow: 0 3px 5px rgba(0,0,0,.15); background: #fff; overflow: hidden}
.newsHolder .owl-item > div {text-align: left; cursor: default; height: 100%; -webkit-flex-direction: column; flex-direction: column; display: -webkit-flex; display: flex}
.newsHolder .owl-item .flexFixer + div {padding: 15px 15px 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 .owl-item div h3 {margin: 15px 0; -webkit-font-smoothing: subpixel-antialiased}
.newsHolder .owl-item div a {color: #5e5f5f}
.newsHolder .owl-item div p {line-height: 26px; color: #888}
.newsHolder .owl-item div p a {text-decoration: underline}
.flexbox .newsHolder .owl-stage .owl-item .newsLink {padding: 15px 20px; margin-top: auto}
.flexbox .newsHolder .owl-stage .owl-item .newsLink a {margin: 0; display: block; text-align: center; background-color: #5e5f5f; color: #fff; padding: 10px 15px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out}
.flexbox .newsHolder .owl-stage .owl-item .newsLink a:hover {background-color: #797979}
.flexbox .newsHolder .owl-stage .owl-item .newsLink a i {margin: -4px 0 0 5px}
.flexbox .newsHolder .owl-stage .owl-item .newsLink a i:after {top: -220px; left: -40px}

.news .owl-nav {position: absolute; width: 100%; top: 0; right: 10px; margin-top: -27px; z-index: 10}
.news .owl-nav > div {position: absolute; right: 0; width: 34px; height: 34px; padding: 6px 0 0 12px; display: inline-block; overflow: hidden; text-indent: -500px; background-color: #5e5f5f}
.news .owl-nav > div.disabled {opacity: 0.4; cursor: default}
.news .owl-nav .owl-prev {right: 40px}
.news .owl-nav span {display: block; position: absolute; margin-top: 13px}
.news .owl-nav span:before, .news .owl-nav span:after {content: " "; margin-top: -6px; position: absolute; left: 0; right: 0; background-color: #fff}
.news .owl-nav span, .news .owl-nav span:before, .news .owl-nav span:after {width: 11px; height: 2px}
.news .owl-nav > div span:after {margin-top: 1px}

/* ------ Awards ------ */
article.awards {padding: 0 20px 70px; overflow: hidden}

#awards-carousel {width: 100%; max-width: 800px; margin: auto; padding-top: 30px}
.awards .owl-item > div .sideImg img {height: 140px; width: auto; margin: 0 auto}
.awards .owl-item > div .sideText {line-height: 22px; text-align: left}
.awards .owl-item > div .sideText h2 {margin-bottom: 20px; line-height: 1.3}

.awards .owl-nav {position: absolute; width: 100%; top: 72px; margin-top: -21px; z-index: 10}
.awards .owl-nav .owl-prev {position: absolute; left: 0; margin-left: -18px}
.awards .owl-nav .owl-next {position: absolute; right: 0; margin-right: -18px}
.awards .owl-nav > div {width: 60px; height: 60px; padding: 20px 0 0 10px; display: inline-block; margin: 10px; overflow: hidden; text-indent: -500px}
.awards .owl-nav span {display: block; position: absolute; margin-top: 20px;}
.awards .owl-nav span:before, .awards .owl-nav span:after {content: " "; margin-top: -26px; position: absolute; left: 0; right: 0; background-color: #a0a0a0}
.awards .owl-nav span, .awards .owl-nav span:before, .awards .owl-nav span:after {width: 40px; height: 2px}
.awards .owl-nav > div span:after {margin-top: 1px}
.owl-nav .owl-prev span:after, .owl-nav .owl-next span:before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.owl-nav .owl-prev span:before, .owl-nav .owl-next span:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* ------ Contact ------ */
article.contact {background-color: #3d595d; padding: 5px 0 0; border-bottom: 6px solid #4f7a81}
article.contact, article.contact .contact-info {border-top: 1px solid #d3d3d3}
article.contact .underline {color: #fff}

form {
  padding: 0 20px 50px;
  overflow: hidden;
}
input[type="checkbox"] {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; transform: translatez(0)}
input[type="checkbox"] + label {width: auto; cursor: pointer}
input[type="checkbox"] + label:before {background-color: #fcfcfc; border: 1px solid #c6c5c5; -webkit-font-smoothing: inherit; width: 18px; height: 18px; display: inline-block; position: relative; top: 2px; content:''; margin-right: 10px}
input[type="checkbox"]:checked + label:before {background: #fff url('/images/responsive/form-elements.png') no-repeat; background-size: 36px; /* half actual width */}
label[for="agree"] {color: #fff; user-select: none; line-height: 1.4}
label[for="agree"] a {color: #fff; text-decoration: underline}
.form-footer {display: flex; align-items: center; justify-content: space-between}
.form-footer > div {text-align: left}

.row {text-align: left; overflow: hidden}
.row > label {
  width: 100%;
  float: left;
  position: relative;
  min-height: 1px;
  display: inline-block;
  margin-bottom: 20px
}
input, textarea {
  vertical-align: middle;
  border: none;
  background-color: transparent;
  padding: 0 22px 0 37px;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 17px;
  height: 50px;
  -webkit-appearance: none;
  width: 100%;
  color: #fff;
  border-bottom: 1px solid #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  margin-bottom: 5px;
}
input ~ span:last-child, textarea ~ span:last-child, .confirmation {display: none}
input:hover, input:focus, textarea:hover, textarea:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
label span {color: #fff}
input.error ~ span:last-of-type, textarea.error ~ span:last-of-type {
  display: inline-block;
  background-color: tomato;
  float: right;
  font-size: 15px;
  padding: 1px 5px;
  line-height: 24px
}
label i {
  position: absolute;
  top: 15px; left: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
label i:after {left: -40px}
textarea {
  padding: 13px 10px 10px 37px;
  line-height: 22.5px;
  resize: none;
  display: block;
  overflow: hidden;
  word-wrap: break-word
}
button {
  padding: 18px 20px 40px;
  margin: 0 0 0 20px;
  float: right;
  border: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-color: #fff;
  font-size: 18px;
  text-transform: uppercase;
}
button:disabled {opacity: 0.5; cursor: default}
button span {color: #5e5f5f}
.csstransforms3d .form-footer button:not(:disabled):before, .no-csstransforms3d .form-footer button:not(:disabled):hover {background-color: #5e5f5f}
.csstransforms3d .form-footer button:not(:disabled):before, .no-csstransforms3d .form-footer button:not(:disabled):hover span {color: #fff}
.confirmation.sent {
  float: right;
  margin-top: 30px;
  height: 58px;
  display: table;
}
.confirmation.sent span {
  display: table-cell;
  vertical-align: middle;
  padding: 0 20px;
  color: #fff
}
.contact-info {
  font-size: 22px;
  padding: 50px 10px 40px;
  clear: both;
  background: #fff;
  overflow: hidden;
}
.contact-info ul {margin-top: 40px; padding: 0}
.contact-info ul li {
  min-width: 260px;
  text-align: center;
  width: 33%;
  margin-bottom: 25px
}
.contact-info ul div {width: 100px; height: 92px}
.contact-info ul img {margin-top: 0}
.contact-info ul li > span {display: block; margin-top: 20px; font-size: 17px}
.contact-info ul span br {display: none}
.contact-info, .contact-info ul a, a.info {color: #838383}
.contact-info ul a {border-bottom: 1px solid #838383; padding-bottom: 2px; display: inline-block}

.contact-info a.url {
  width: 270px; height: auto;
  text-transform: lowercase;
  margin: 3px 10px;
  padding: 20px 30px
}
.contact-info a.url:before {color: #000}

a.info {font-size: 16px; margin: 30px 10px 0; text-decoration: underline; display: inline-block}
.infoPage {background-color: #fff; display: flex; flex-direction: column; height: 100vh}
.infoPage #wrapper {padding-top: 0; background-color: #fff; position: relative; text-align: left; max-width: 100%; min-width: 100%; flex: 1 0 auto;
  min-height: auto}
.infoPage .header {text-align: center; position: relative; background-color: #e0e0e0}
.infoPage ol {list-style: decimal}
.infoPage .gdpr a:hover {opacity: .6}
.infoPage a {text-decoration: underline}
.infoPage a.back {position: absolute; left: 15px; top: 37px; display: inline-block; z-index: 5}
.infoPage a.back i {margin-top: -3px}
.infoPage .cypherLogo {padding: 20px 15px 15px}
.infoPage #contentBody {max-width: 1300px}
.infoPage h1 {text-align: center; font-size: 34px; position: relative; padding-bottom: 30px}
.infoPage h1:before {position: absolute; content: ""; width: 86px; background-color: #e0e0e0; height: 2px; bottom: 0; left: 50%; margin-left: -43px}
.infoPage dt, .infoPage a, .infoPage a.back:hover {color: #222}
.infoPage footer {padding: 20px; background-color: #5e5f5f; text-align: center; flex-shrink: 0}
.infoPage footer a {color: #fff; text-decoration: underline; display: inline-block}
.infoPage footer a:hover {opacity: 0.6}

/* ------ Media queries ------ */
@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) {
  /* */
}

@media screen and (max-width: 369px) {
  header {height: 135px}
  header .logo-holder h1 img {max-width: 180px}
  .home-holder {border-top-width: 135px}
  .blogBtnMatrix {margin: 0 0 10px}
}

@media screen and (min-width: 370px) {
  header:not(.bar) {height: 150px}
  header .logo-holder h1 img {max-width: 220px}
  .logo-holder p {font-size: 17px}
  .home-holder {border-top-width: 150px}
  nav > a {width: 68px}
}

@media screen and (max-width: 420px) {
  .home-holder div.platform .heading img {height: 22px}
  .news > p {margin: 0}
  .form-footer > div {font-size: 14px}
  .form-footer button {width: 90px; flex-shrink: 0}
}

@media screen and (min-width: 480px) {
  .home-holder article .bottom-content .heading {margin-left: 30px}
  .home-holder article a.more {margin-bottom: 50px; border-radius: 2px; border-width: 0 0 2px !important}
  .home-holder article a.more:after {width: 100%; height: 100%; background-color: rgba(255,255,255,.1); content: ''; position: absolute; top: 0; left: 0}
}

@media screen and (min-width: 568px) {
  .home-holder div.platform .heading p {
    font-size: 17px
  }
  header .logo-holder h1 {text-align: center}
  .row {margin: 0 0 20px}
  .row.col-2 > label {width: 49%}
  .row > label {margin-bottom: 0}
  .row > label:first-child {padding-right: 20px}
  .row.col-2 > label:last-child {margin-left: 2%}
  .row > label:first-child:last-child {padding: 0}
  input, textarea {margin-bottom: 15px}

  #news-carousel {margin: 0 auto 20px}
}

@media screen and (min-width: 640px) {
  .home-holder article .bottom-content .heading {margin-left: 70px}
}

@media screen and (max-width: 767px) {
  .home-holder {
    position: absolute;
    width: 100%; height: 100%;
    top: 0;
    overflow: hidden
  }
  header {
    background-color: rgba(255, 255, 255, 0.93);
    position: fixed;
    width: 100%; top: 0;
    z-index: 10;
    overflow: hidden;
  }
  header.bar {
    box-shadow: none;
    border-bottom: 1px solid #d5d5d5;
    height: 82px
  }
  header.overflow-show {overflow: visible}
  header.bar .logo-holder {margin-left: 19px; width: 155px}
  header.bar .logo-holder h1 img {width: 161px}
  header .logo-holder h1 img.logo_white {display: none}
  h1.cypher-logo {
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease
  }
  .home-holder div.platform {text-align: left}
  .home-holder article .platform-description {position: absolute; top: 0; border-width: 0 !important}
  .home-holder article .platform-description .valign-mid {overflow-y: scroll; -webkit-overflow-scrolling: touch; height: 100%}
  .home-holder article .platform-description .valign-mid p {color: #fff}
  .home-holder article .platform-description .valign-mid p * {color: #fff}
  .home-holder article .platform-description .valign-mid p a {border-color: #fff}
  .home-holder article.neo .platform-description .valign-mid {background: #048497}
  .home-holder article.indie .platform-description .valign-mid {background: #645892}
  .home-holder article.matrix .platform-description .valign-mid {background: #4f7a81}

  .home-holder article .bottom-content {position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%}
  .home-holder article a.more {position: absolute; right: 0; top: 50%; margin: 0; border: 0 !important; background-color: #fff !important; width: auto; border-radius: 2px 0 0 2px; padding: 11px 10px 12px 11px; transform: translateY(-50%); -webkit-transform: translateY(-50%); box-shadow: 0 0 25px rgba(0,0,0,.3);}
  .home-holder article a.more span {text-indent: 1000px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; position: relative; overflow: hidden}
  .home-holder article a.more span:after {content: ''; background: url('/images/icons/main-icons.png?82') no-repeat; width: 60px; height: 10000px;
    top: -220px; left: 0; position: absolute}

  .home-holder article.neo figure {background: #048497 url('/images/cypher/neo-home-mobile.jpg') right 0 / auto 100% no-repeat}
  .home-holder article.indie figure {background: #645792 url('/images/cypher/indie-home-mobile.jpg') right 0 / auto 100% no-repeat}
  .home-holder article.matrix figure {background: #6a8184 url('/images/cypher/matrix-home-mobile.jpg') right 0 / auto 100% no-repeat}
  .infoPage a.back {position: static; margin: 20px 0 10px}
}


@media screen and (min-width: 768px) {
  .underline, #brand_history h2 {
    font-size: 34px
  }
  .awards .owl-item > div .sideText h2 {
    font-size: 21px
  }
  article.about .about-platforms > div p {
    font-size: 19px
  }
  article.about p, article.awards > p, .main-form label span, .twoColumnText p {
    font-size: 18px
  }
  .home-holder div.platform .heading p {
    font-size: 15px
  }
  .cypher-logo div {
    font-size: 14px
  }

  nav {position: fixed}
  nav > a {height: 80px; width: 75px; padding-top: 44px}
  nav a span, nav a span:before, nav a span:after {background: #fff}

  header:not(.bar) {width: 100%; height: 85px; position: absolute; z-index: 2}
    header:not(.bar) .logo-holder {position: absolute; left: 50%; opacity: 1; transform: translateX(-50%); -webkit-transform: translateX(-50%); background: #5e5f5f; min-width: 350px; border-radius: 3px}
    #wrapper:nth-child(2) header:not(.bar) .logo-holder {box-shadow: 0 0 55px rgba(0,0,0,.2)}
    header .logo-holder.close {opacity: 0; transform: scale(0); -webkit-transform: scale(0)}
    header:not(.bar) .logo-holder h1 img.logo_grey {display: none}
    header.bar .logo-holder h1 {text-align: left}
    header .logo-holder h1 div {color: #fff}

  .home-holder {border-top-width: 0}
  .home-holder article {width: 33.5%; left: 0}
  .home-holder article:not(.open).neo {z-index: 1}
  .home-holder article.indie {width: 100%}
  .home-holder article.indie .platform {width: 33.5%; left: 33.5%}
  .home-holder article.matrix,
  .home-holder article.matrix .platform,
  .home-holder article.matrix .platform-description {right: 0; left: auto}

  .home-holder article.open > .platform {width: 33.5%}
  .home-holder div.platform h1 {margin-top: 35px}
  .home-holder article .platform-description {left: 0}
  .home-holder article .platform-description:after {display: none}
  .home-holder article .platform-description .cypher-logo {display: block; margin-bottom: 20px; text-align: center}
  .home-holder article .platform-description .valign-mid {padding: 0 50px; text-align: justify; max-width: 740px}

  .home-holder article .bottom-content {bottom: 0; z-index: 1; width: 100%}
  .home-holder article .bottom-content .heading {margin: 0}
  .home-holder div.platform .heading img {height: 26px}

  .csstransitions .home-holder article figure {
       transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1);
       -o-transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1);
       -webkit-transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1);
       transform: scale(1.07);
       -webkit-transform: scale(1.07);
     }
  .home-holder article.neo figure {background: url('/images/cypher/neo-home.jpg') 50% 50% / cover no-repeat}
  .home-holder article.indie figure {background: url('/images/cypher/indie-home.jpg') 50% 50% / cover no-repeat}
  .home-holder article.matrix figure {background: url('/images/cypher/matrix-home.jpg') 50% 50% / cover no-repeat}
  .csstransitions .home-holder article:hover figure {transform: scale(1.01); -webkit-transform: scale(1.01)}
  .home-holder article, .home-holder article > div, .home-holder article figure, .home-holder article .bottom-content {position: absolute}
  .home-holder article, .home-holder article > div, .home-holder article figure {height: 100%; top: 0}

  .csstransforms3d .home-holder article a.more:before {
       content: attr(data-text);
       position: absolute;
       top: 0; left: 0; width: 100%; height: 100%;
       background: #fff;
       padding: inherit;
       -webkit-transform: translate3d(-100%, 0, 0);
       transform: translate3d(-100%, 0, 0);
       -webkit-transition: -webkit-transform 0.3s;
       transition: transform 0.3s;
       -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
       transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1)
     }
  .no-csstransforms3d .home-holder article a.more:hover {background-color: #fff}
  .csstransforms3d .home-holder article.neo a.more:before {right: 0; left: auto; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0)}
  .csstransforms3d .home-holder article a.more:hover:before {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}

  a.close {width: 105px; height: 105px; right: 0; left: auto; margin: 0}
  a.close span {width: 50px; margin: 0 0 0 -25px}

  article.about .about-text {padding: 0 30px}
  article.about .about-text .two-column-text {width: 50%; padding-right: 3%; display: inline-block; vertical-align: top}
  article.about .about-text .two-column-text + .two-column-text {padding: 0 0 0 3%; margin-left: -4px}
  article.about .about-text img[class*="about_img"] {margin: 10px 0 0}
  .about-stats {margin: 0 auto 70px; padding: 0 30px}
  .about-stats li {width: 20%}

  article.about .about-platforms > div {width: 33.5%; display: table-cell; border-width: 0 0 0 1px}
  article.about .about-platforms > div > *:not(figure) {position: relative; z-index: 2}
  article.about .about-platforms > div > figure {z-index: 1; opacity: .6}

  article.about .about-platforms > div:first-child {border-width: 0}
  article.about .about-platforms > div.neo {background: #525F22}
  article.about .about-platforms > div.neo figure {background: url('/images/cypher/about-neo.jpg') top left no-repeat}
  article.about .about-platforms > div.indie {background: #645892}
  article.about .about-platforms > div.indie figure {background: url('/images/cypher/about-indie.jpg') top no-repeat}
  article.about .about-platforms > div.matrix {background: #0C2537}

  article.about .about-platforms > div.matrix figure {background: url('/images/cypher/about-matrix.jpg') top right no-repeat}

  article.about .about-platforms > div figure {background-size: 100% auto !important}

  article.contact {background: url('/images/cypher/contact.jpg') 50% 50% no-repeat; background-size: cover}
  .no-touch article.contact {background-attachment: fixed}
  .contact-info ul li {min-width: 240px}
}

@media screen and (min-width: 860px) {
  header .logo-holder {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition-property: width, height, opacity
  }
  .home-holder div.platform .heading img {height: 30px}
  .contact-info ul span br {display: block}
}

@media screen and (max-width: 979px) {
  .desktop-only {display: none}
  .awards .owl-item > div .sideImg img {margin-bottom: 30px; height: 113px}
}

@media screen and (min-width: 980px) {
  .mobile-only {display: none}

  .cypher-logo div {
    font-size: 17px
  }

  header .logo-holder {width: 36%}
  .home-holder div.platform .heading img {height: 35px}
  .home-holder div.platform .heading p {margin-top: 10px; font-size: 20px}
  .no-touch article.about .about-platforms > div figure {background-attachment: fixed !important; background-size: 35% auto !important}

  .awards .owl-item > div {display: table}
  .awards .owl-item > div .sideImg {display: table-cell; vertical-align: middle; width: 260px}
  .awards .owl-item > div .sideText {display: table-cell; vertical-align: middle}
  .awards .owl-item > div .sideText {padding-left: 25px}
  .awards .owl-nav {top: 50%}

  .contact-info ul span {font-size: 18px}
}

@media screen and (min-width: 1024px) {
  .about-stats {padding: 0}
}

@media screen and (min-width: 1280px) {
  .home-holder article a.more {
    font-size: 22px
  }
  .home-holder article .platform-description {
    font-size: 18px
  }
  .cypher-logo div {
    font-size: 20px
  }
  nav.show-nav {right: 0}
  nav > a {width: 79px}
  .home-holder article a.more {height: 64px; width: 240px; padding-top: 18px}
  .home-holder .platform-description .valign-mid {padding: 0 70px}

  .about-stats li .num {
    font-size: 50px;
    line-height: 45px;
    margin: 5px 0 10px;
  }
}

@media screen and (min-width: 1440px) {
  .home-holder div.platform .heading p {
    font-size: 23px
  }
  .cypher-logo div {
          font-size: 21px
  }
}