/*Overwrite default-styles*/
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}

body, html {background-color: #fff; text-align: center}
.cypher #wrapper {border-width: 0}
@media screen and (min-width: 980px) {
  .cypher #wrapper {max-width: 100%; min-width: 0}
}
li {line-height: 1.6 !important}
.cypher #socialBlocks a {margin-left: 0; padding: 8px; border-radius: 50%}
.cypher #socialBlocks i:after {background: url('/images/icons/footer-icons.svg') no-repeat; background-size: 40px; width: 40px; left: -20px}
.cypher #socialBlocks a.socialTwr {background-color: #02abf0}
.cypher #socialBlocks a.socialFb {background-color: #395791}
.cypher #socialBlocks a.socialLin {background-color: #007ab8}
.cypher #socialBlocks a.socialYouTube {background-color: #cc0300}

/* ------ Text ------ */
.underline, #brand_history h2 {
  font-size: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.awards .owl-item > div .sideText h2 {
  font-size: 18px
}
.main-form label span, nav ol li a {
  font-size: 16px
}

.ellipsis {white-space: nowrap; text-overflow: ellipsis; overflow: hidden}
.lozenge {padding: 8px 15px; color: #fff; margin: 0 3px; display: inline-block; border-radius: 20px}
.lozenge:hover {opacity: .7}

/* ------ Colors ------ */
.awards .owl-item > div.neo h2:before, .contact-info a.neo, .blogBtnNeo, .home_carousel_nav a.neo.selected, .neo_lozenge, #confirmation.sent {background: #048497}
.awards .owl-item > div.matrix h2:before, .contact-info a.matrix, .home_carousel_nav a.matrix.selected, .matrix_lozenge {background: #4f7a81}
.awards .owl-item > div.indie h2:before, .contact-info a.indie, .blogBtnIndie, .home_carousel_nav a.indie.selected, .indie_lozenge {background: #645892}

.neo-highlight, .neo a {color: #048497}
.matrix-highlight, .matrix a, .contact-info .call a:hover {color: #4f7a81}
.indie-highlight, .indie a, .contact-info .call a:hover {color: #645892}

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

/* ------ Transitions ------ */
.owl-nav > div, nav, .about-stats li .num, #socialBlocks a, .lozenge {
  transition: all 0.4s
}

/* ------ Intro ------ */
.preloader.home_carousel {opacity: 1; margin-top: -40px}
.preloader .shapes {position: relative; width: 100%; height: 100%}
.preloader .shapes > * {position: absolute; display: block; width: 30%; border-radius: 50%; transition: all 1.2s ease-in-out; background: linear-gradient(45deg, #645792, #6a8285); border-radius: 50%; left: 35%; top: 30%}
.preloader .shapes > *::before,
.preloader .loading:before,
.preloader .loading_circle:before {content: ''; display: block; padding-bottom: 100%}
.preloader .shapes .circle1.preload {top: 30%; left: 31%; width: 22%}
.preloader .shapes .circle2.preload {bottom: 30%; right: 34%; width: 14%}
.preloader .loading {position: absolute; z-index: 1; top: 50%; left: 50%; width: 40%; transform: translate(-50%,-50%)}
.preloader .loading_circle {border: 13px solid #fff; border-top: 13px solid #36b1c4; border-radius: 50%; position: absolute; top: 0; width: 100%; height: 100%; animation: spin_360 2s linear infinite; box-shadow: 0 0 25px rgba(0, 0, 0, 0.2), inset 0 0 25px rgba(0, 0, 0, 0.2)}
.home_carousel:not(.preloader) {display: none}
@keyframes spin_360 {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}

/* ------ Header ------ */
body:not(.home) header:not(.scrolled) nav.mainNav ul > li > a {
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.3px;
}
header {position: fixed; top: 0; max-width: 100%}
header .product_logo .ir {border: 0; height: 100%; display: block; overflow: hidden}
header .product_logo .ir:before {content: ""; display: block; height: 100%; width: 0}

header nav.mainNav {display: none}
header nav.mainNav ul {padding: 0}
header nav.mainNav ul > li {border: 0; padding: 0 9px}
header nav.mainNav ul > li:hover {background-color: transparent}
header nav.mainNav ul > li > a {padding: 6px 3px; line-height: 32px; border-bottom: 3px solid transparent; transition: all .2s ease-in-out; color: #fff}
header:not(.scrolled) nav.mainNav ul > li > a:hover,
header:not(.scrolled) nav.mainNav ul > li.selected a,
.about li.aboutUs a, .contact li.contact a {border-bottom-color: #fff !important}
header nav.mainNav ul > li.selected {background: none}
header nav.mainNav ul > li > a:hover,
header nav.mainNav ul > li.selected > a,
.about header.scrolled li.aboutUs a, .contact header.scrolled li.contact a {border-bottom-color: #d3d3d3 !important}

header.scrolled nav.mainNav > * > li > a,
.home header nav.mainNav ul > li > a {color: #5e5f5f}

@media screen and (max-width: 1179px) {
  header nav.mainNav ul > li > a {font-size: 16px}
}
@media screen and (min-width: 980px) {
  .headerContainer {padding: 0 25px}
  .headerContainer nav.mainNav ul {width: 100%; display: flex}
  .headerContainer nav.mainNav ul .aboutUs {margin-left: auto}

  header .mobileBar, .mobileLogo h1 {display: none}
}
@media screen and (max-width: 979px) {
  header nav {display: none}
  header .mobileBar {background-color: #fff; padding: 5px 9px; overflow: hidden; color: #fff; box-sizing: border-box; transition: opacity .2s ease}
  .home header .mobileBar {opacity: 0}
  header .mobileBar .leftMobileBar {display: block; width: 36px; height: 32px; background: url('/images/icons/mobile-nav-icon.gif') center no-repeat; background-color: #81a7aa; border-radius: 4px; background-size: 18px; background-position: 50% 9px; margin: 0; position: static}
  nav ul li a {font-size: 19px; color: #222}
  .mm-menu:not(.mm-opened) {display: none !important}
  .mm-menu {text-align: initial}
  .mm-page {background-color: #fff !important}
  .mm-opened .mm-page #wrapper {width: 100%}
}

/* ------ Home main carousel ------ */
.carousel_holder {margin-top: 50px; display: flex; flex-direction: column; height: calc(100vh - 60px); width: 100%; padding: 0 20px; box-sizing: border-box}
.carousel_holder img {vertical-align: bottom}
.home_carousel_nav .cypher_logo {margin-bottom: 20px}
.home_carousel_nav .cypher_logo img {width: 204px; margin-bottom: 10px}
.home_carousel_nav .cypher_logo div {color: #5e5f5f; font-size: 15px; letter-spacing: 0.7px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
.home_carousel_nav a {color: #fff; background: #a2a2a2; padding: 8px 15px; border-radius: 20px; transition: background .3s ease-in-out; display: inline-flex; align-items: center}
.home_carousel_nav a.matrix {margin: 0 3px}
.home_carousel_nav p {opacity: 0; display: none; color: #5e5f5f; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; margin: 20px auto 0; max-width: 500px}
.home_carousel_nav a.neo.selected ~ p.neo,
.home_carousel_nav a.matrix.selected ~ p.matrix,
.home_carousel_nav a.indie.selected ~ p.indie {opacity: 1; display: block}

.home_carousel {overflow: hidden; opacity: 0; transition: opacity .3s ease-in-out}
.home_carousel.owl-loaded {opacity: 1}
.home_carousel .owl-item {float: left}
.home_carousel .owl-item img, .home_carousel:not(.owl-loaded) img {width: 100%}
.home_carousel .owl-item {cursor: default}
.home_carousel .owl-nav.disabled {display: none}

@media screen and (min-width: 768px) {
  .home_carousel_nav .cypher_logo {margin-bottom: 30px}
  .home_carousel_nav .cypher_logo img {width: 254px}
  .home_carousel_nav .cypher_logo div {font-size: 17px}
  .home_carousel_nav a.matrix {margin: 0 10px}
  .home_carousel_nav p {font-size: 17px; margin-top: 30px}
  .home_carousel_nav a {padding: 10px 20px}
}
@media screen and (max-width: 1023px) {
  .home_carousel {padding-top: 30px; flex: 1}
  .home_carousel .owl-stage-outer, .home_carousel .owl-stage-outer *:not(img) {height: 100%}
  .home_carousel .owl-item > * {display: flex; align-items: center}
  .home_carousel .owl-item > * img {object-fit: cover}
}
@media screen and (min-width: 1024px) {
  .carousel_holder {flex-direction: row; align-items: center; text-align: left}
  .home_carousel_nav .inner {width: 350px; max-width: 100%; height: 300px; margin: 0 auto}
  .home_carousel_nav {width: 40%}
  .home_carousel {width: 60%; height: 100vh; display: flex; align-items: center}
}
@media screen and (min-width: 1090px) {
  .home_carousel_nav .inner {width: 380px; height: 400px}
  .home_carousel_nav .cypher_logo img {width: 320px}
  .home_carousel_nav .cypher_logo div {font-size: 20px}
  .home_carousel_nav p {font-size: 19px}
  .home_carousel_nav a img {height: 18px}
}
@media screen and (max-width: 500px) {
  .carousel_holder {margin-top: 40px}
  .home_carousel {padding-top: 0}
}

a.url, button {display: inline-block; height: 41px; color: #fff; letter-spacing: 1px; overflow: hidden; position: relative; z-index: 1; padding-top: 12px; margin: 30px 0 10px; transition: 300ms ease-in}
a.url:before {content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; padding: inherit; transform: translate3d(-100%, 0, 0); transition: transform 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); border-radius: 50px}
a.url.matrix:before {right: 0; left: auto; transform: translate3d(100%, 0, 0)}
a.url:hover:before {transform: translate3d(0, 0, 0)}
a.url span {display: inline-block}

/* ------ Intro & Products ------ */
#intro .intro_text {max-width: 740px; margin: auto auto 50px; padding: 0 20px}
.tour_section {overflow: hidden; padding: 40px 0}
.feature_info {width: 43%; text-align: left}
.feature_info p {line-height: 1.7}
.feature_info a {margin: 10px 0}
.feature_visual.feature_lrg {width: 56%}

/* ------ About ------ */
.underline {position: relative; padding: 83px 18px 0; margin-bottom: 83px}
#brand_story .underline, .contact .underline {padding-top: 99px}
.underline:before {position: absolute; content: ""; width: 5px; background-color: #e0e0e0; height: 2px; top: 100%; left: 50%; margin: 30px 0 0 0; width: 86px; margin-left: -43px}
.underline span {text-transform: lowercase}

#about {padding-bottom: 40px; position: relative}
#about p, .awards p {line-height: 1.8}
#about img {margin: auto 0 0; width: 100%; border-radius: 8px}

.about-stats, .contact-info ul {margin: 0 auto 30px; padding: 0 20px; width: 100%; max-width: 1300px !important}
.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 {margin: 0 auto 25px}
.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 li span {font-size: 16px; 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 ------ */
.our_regions {padding: 0}
.our_regions #map {margin: 20px 0 50px}
.our_regions #map path {cursor: default}

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

.guides a {max-width: 224px; margin: 0 11px 20px; display: inline-block; box-sizing: border-box; vertical-align: top; border-radius: 10px; 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; 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; 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 {transition: all .3s ease-in-out}
.guides a:hover {transform: translate(-2px,-2px); box-shadow: 5px 5px 20px rgba(0,0,0,0.3)}

/* ------ Brand story ------ */
.twoColumnHolder {max-width: 1300px}

#brand_story {background: linear-gradient(45deg, #6a8285, #85acaf); position: relative}
#brand_story:before {background: linear-gradient(rgba(116,173,216,0.8),rgba(0,0,0,0)); left: 0; width: 100%; height: 30%; position: absolute; content: ''}
#brand_story .twoColumnHolder, #about .twoColumnHolder {padding: 0 30px}
#brand_story .twoColumnHolder.middleLine {padding-bottom: 40px}
#brand_story p, #about p {margin: 25px 0 25px; line-height: 1.7; text-align: left}
#brand_story * {color: #fff; position: relative}
#brand_story .twoColumnHolder .twoColumnText p:first-child {margin-top: 0}
#brand_story .twoColumnHolder:first-child .twoColumnText p:last-child {margin-bottom: 0}
#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; padding-top: 50px}
#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; padding-top: 0}
#vision_mission .twoColumnHolder div.text div p, #section2 p {line-height: 1.7; font-size: 17px}
#vision_mission .twoColumnHolder div.text div p {max-width: 700px; margin: auto}

#our_values {padding: 70px 0; background: linear-gradient(45deg, #645792 20%, #85acaf); color: #fff}
#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; padding: 0}
.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) {
  .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%}

  #about.twoColumnHolder {display: flex}
  #about.twoColumnHolder .twoColumnText {display: flex; flex-direction: column}
}
@media screen and (min-width: 980px) {
  .timeline {margin-top: 70px}
  #our_values .iconNav a {margin: 0 13px 15px}

  .mobile_only {display:none !important}
}
@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: 1.7}
}

/* ------ News ------ */
#news {padding: 0 20px 70px; overflow: hidden; position: relative; background-color: #85acaf; z-index: 0}
#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}
#news .underline, #news > p {color: #fff}
#news .lozenge {margin: 3px}
#news-carousel {max-width: 1500px; width: 100%; margin: 60px 0 20px; padding-top: 30px}
#news-carousel.newsHolder > div {width: auto; margin: 0; display: block; background: transparent; box-shadow: none}
#news-carousel.newsHolder > .owl-dots {display: none}
.newsHolder .owl-stage, .newsHolder .owl-stage .owl-item {display: flex; padding: 0}
.newsHolder .owl-stage {flex-flow: row wrap; justify-content: center}
.newsHolder .owl-stage .owl-item {flex-direction: column; display: inline-block; float: none; overflow: hidden}
.newsHolder .owl-item > div {text-align: left; cursor: default; height: 100%; flex-direction: column; display: flex; max-width: 330px; box-shadow: 0 3px 5px rgba(0,0,0,.15); background: #fff; margin: auto; padding: 0; border-radius: 10px}
.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; border-radius: 10px 10px 0 0}
.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}
.newsHolder .owl-stage .owl-item .newsLink {padding: 15px 20px; margin-top: auto}
.newsHolder .owl-stage .owl-item .newsLink a {margin: 0; display: block; text-align: center; color: #fff; padding: 10px 15px; transition: all .3s ease-in-out; border-radius: 50px}
.newsHolder .newsLink a {background-color: #5e5f5f}
.newsHolder .owl-stage .owl-item .newsLink a:hover {background-color: #797979}
.newsHolder .owl-stage .owl-item .newsLink a i {margin: -4px 0 0 5px}
.newsHolder .owl-stage .owl-item .newsLink a i:after {top: -220px; left: -40px}

.owl-nav button:focus {box-shadow: none}
.news .owl-nav {position: absolute; width: 100%; top: 0; right: 10px; margin-top: -27px !important; z-index: 10}
.news .owl-carousel .owl-nav .owl-next, .news .owl-carousel .owl-nav .owl-prev {padding: 0 0 0 12px !important}
.news .owl-nav button {position: absolute; right: 0; width: 34px; height: 34px; display: inline-block; overflow: hidden; text-indent: -500px; background-color: #5e5f5f !important; border-radius: 4px; box-sizing: border-box}
.news .owl-nav button:hover {opacity: .7}
.news .owl-nav button.disabled {opacity: 0.4; cursor: default}
.news .owl-nav .owl-prev {right: 40px}
.news .owl-nav span {display: block; position: absolute; margin-top: 12px}
.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 button span:after {margin-top: 1px}

/* ------ Awards ------ */
.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 h3 {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 button {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; top: 21px; left: 18px}
.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 .owl-prev span {left: 4px}
.awards .owl-nav span:before, .awards .owl-nav span:after {width: 40px; height: 2px}
.awards .owl-nav button span:after {margin-top: 1px}
.owl-nav .owl-prev span:after, .owl-nav .owl-next span:before {transform: rotate(45deg)}
.owl-nav .owl-prev span:before, .owl-nav .owl-next span:after {transform: rotate(-45deg)}

/* ------ Contact ------ */
.contact *[role="main"] {background: linear-gradient(45deg, #645792, #6a8285); overflow: hidden}
.contact .underline {color: #fff}
.contact form {max-width: 1240px; margin: 0 auto; vertical-align: top}
.contact-info ul div {position: relative; display: inline-block}
.contact-info ul img {margin-top: 30px}
.contact-info ul svg {position: absolute; top: 0; left: 0}
.contact-info ul circle {fill: transparent}
.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}
}

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/icons/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 .error {border-bottom-color: #ff7474}
form .error ~ .required:last-child {background-color: #ff7474}
.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: 0 0 20px}

input[type="text"], textarea {vertical-align: middle; border: none; background-color: transparent; padding: 0 22px 0 37px; font-size: 17px; height: 50px; width: 100%; color: #fff; border-bottom: 2px solid rgba(255,255,255,.5); margin: 0 0 5px; border-radius: 0}
input[type="text"]:focus, textarea:focus {box-shadow: none}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 30px #655d8f inset !important}
input:-webkit-autofill {-webkit-text-fill-color: #fff !important}
label[for='marketing_channel'] {margin: 0}
label[for='marketing_channel'] > span:first-of-type {padding-left: 30px; display: block; border-bottom: 1px solid rgba(255, 255, 255, .5)}
select {font-size: 17px; height: 44px; width: 100%; margin-bottom: 5px}
input:hover, input:focus, textarea:hover, textarea:focus {opacity: 1}
label span {color: #fff}
input ~ span.required, textarea ~ span.required, label[for='marketing_channel'] span.required {display: inline-block; background-color: #1b9fb3; float: right; font-size: 13px; padding: 0 7px; line-height: 20px; border-radius: 20px}
label i {position: absolute; top: 15px; left: 6px; 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: 12px 30px 35px; margin: 0 0 0 20px; float: right; border: none; -webkit-appearance: none; cursor: pointer; background-color: #fff; font-size: 18px; border-radius: 50px; color: #5e5f5f; letter-spacing: 0; line-height: 1.3}
button:focus {outline: 0}
button:disabled {opacity: 0.5; cursor: default}
button:not(:disabled):hover {opacity: .6}
#confirmation {display: none}
#confirmation.sent {margin: 30px auto 0; height: 58px; display: table; border-radius: 50px; box-shadow: 0 0 15px rgba(0,0,0,0.05)}
#confirmation.sent span {display: table-cell; vertical-align: middle; padding: 0 20px; color: #fff}
.contact-info {font-size: 22px; padding: 0 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, footer a {color: #838383}
.contact-info ul a {border-bottom: 1px solid #838383; padding-bottom: 2px; display: inline-block}
.contact-info a.url {width: 240px; height: auto; margin: 3px 10px; padding: 20px 30px; border-radius: 50px}
.contact-info a.url:before {color: #000}

/*------------------- Features Comparison -------------------*/
.cypher_features #contentBody {max-width: 100%; padding: 0}
.cypher_features .fullColumn .twoThirds {max-width: 1340px}
.cypher_features table.plansComparisonHeader h3 {color: #fff !important}
.cypher_features table.plansComparisonBody th {background: #f1f1f1; color: #5e5f5f}
.cypher_features table.plansComparisonHeader th.plan_neo, table.plansComparisonBody td.plan_neo i:after {background-color: #048497}
@media screen and (max-width: 320px) {
 .cypher_features table.plansComparisonHeader th h3 {font-size: 10px !important}
}

/*------------------- Other pages -------------------*/
#contentHeader {background: linear-gradient(45deg, #645792, #6a8285 60%); color: #fff}
#contentBody {text-align: left; max-width: 1300px}
#contentBody h1 {text-align: center; font-size: 34px; position: relative; padding-bottom: 30px}
#contentBody h2, #contentBody dt {color: #655c91}
#contentBody h3 {color: #048497}
#contentBody p {line-height: 1.5}
#contentBody ol {list-style: decimal}
#contentBody li {padding: 0 !important; margin-top: 2px}
#contentBody li:before {display: none}
#contentBody a {text-decoration: underline; color: #048497}

.cookie_policy #contentBody {padding-top: 0}

.careers_sml_button {margin: 10px auto; color: #222 !important; text-align: center; background-color: #e2e2e2; padding: 10px 15px; transition: all .3s ease-in-out; border-radius: 50px; text-decoration: none !important}
.careers_sml_button:hover {background-color: #eee}

footer {padding: 20px; background-color: #fff; flex-shrink: 0; box-shadow: 0 0 25px rgba(0,0,0,.15); position: relative}
footer > * {display: flex !important; align-items: center; justify-content: space-between; width: 1280px; max-width: 100%; margin: auto !important}
footer > * a {color: #222 !important; display: inline-block; font-size: 15px; margin: 3px 7px}
footer > * a:hover {opacity: 0.6}

/*------------------- Gradient blocks -------------------*/
*[class*="gradient_block"] {border-radius: 3px; padding: 15px 20px}
*[class*="gradient_block"] * {color: #fff !important}
.gradient_block1 {background: linear-gradient(135deg, #00afa6, #006c82)}
.gradient_block2 {background: linear-gradient(135deg, #d47134, #a94571)}
.gradient_block3 {background: linear-gradient(135deg, #0d8198, #7658b1)}

/* ------ Media queries ------ */
@media screen and (max-width: 369px) {
  .home .underline {padding-top: 20px !important; margin-bottom: 40px}
}
@media screen and (max-width: 420px) {
  .news > p {margin: 0}
  .form-footer > div {font-size: 14px}
  .form-footer button {width: 90px; flex-shrink: 0}
}
@media screen and (min-width: 568px) {
  .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[type="text"], textarea, label[for='marketing_channel'] > span:first-of-type {margin-bottom: 15px}

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

  .about-stats li {margin: 0 0 40px -4px; width: 33%}
}
@media screen and (max-width: 767px) {
  .intro .intro_text {margin-bottom: 20px}

  #news-carousel {padding-left: 0; padding-right: 0}
  #news-carousel h3 {font-size: 18px}

  footer {padding: 20px 5px}
  footer > * {flex-direction: column}
  footer > * > *:not(:first-child):not(:last-child) {margin: 10px 0}
}
@media screen and (min-width: 768px) {
  .awards .owl-item > div .sideText h2 {
    font-size: 21px
  }
  .awards > p, .main-form label span:not(.required), .twoColumnText p {
    font-size: 17px
  }

  #intro {margin-top: 100px}
  .about-stats {margin: 0 auto 70px; padding: 0 30px}

  .contact-info ul li {min-width: 240px}
}
@media screen and (min-width: 860px) {
  .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}
  .underline {padding-top: 40px !important; margin-bottom: 50px}
  .underline:before {margin-top: 15px}
}
@media screen and (min-width: 980px) {
  .mobile-only {display: none}
  .about-stats li {width: 20%}
  .underline, #brand_history h2, .home h2, #wrapper #contentHeader h1 {font-size: 32px}

  .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 (max-width: 1279px) {
  .about-stats li div img {height: 120px}
}
@media screen and (min-width: 1280px) {
  .about-stats li .num {font-size: 50px; line-height: 45px; margin: 5px 0 10px}
}