/* ... */
html {
  -webkit-font-smoothing: subpixel-antialiased;
  font-smooth: auto;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

body {
  margin: 0; }

h1, h2, h3, h4, h5, h6, p, blockquote, figure, ol, ul, dl, dt, dd {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit; }

a {
  text-decoration: none;
  color: inherit; }

img {
  max-width: 100%;
  height: auto;
  border: 0; }

main {
  display: block; }

*:focus {
  outline: none; }

*::-moz-focus-inner {
  border: 0; }

input, select {
  box-sizing: border-box; }

select {
  outline: none; }
  select:focus::-ms-value {
    background: transparent;
    color: inherit; }

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  text-transform: none; }

iframe {
  margin: 0;
  padding: 0; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  font-weight: 400;
  color: #999; }

input:-moz-placeholder, textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-weight: 400;
  opacity: 1;
  color: #999; }

input::-moz-placeholder, textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-weight: 400;
  opacity: 1;
  color: #999; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-weight: 400;
  color: #999; }

/* star trek */
input::placeholder, textarea::placeholder {
  font-weight: 400;
  color: #999; }

/* uses variables from ../10-settings/variables */
/* ... */
html {
  font-size: 16px;
  height: 100%; }

body {
  color: #333;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.375;
  overflow-x: hidden;
  height: 100%;
  display: flex;
  flex-direction: column; }

h1 {
  font-family: "Open Sans", Arial, Helvetica, sans-serif; }
  @media only screen and (max-width: 44.999em) {
    h1 {
      font-size: 1.1em;
      line-height: 1.2495; } }
  @media only screen and (min-width: 45em) and (max-width: 104.999em) {
    h1 {
      font-size: 1.76em;
      line-height: 1.1235; } }
  @media only screen and (min-width: 105em) {
    h1 {
      font-size: 2.2em;
      line-height: 1.05; } }

@media only screen and (max-width: 44.999em) {
  h2 {
    font-size: 1.105em;
    line-height: 1.1525; } }

@media only screen and (min-width: 45em) and (max-width: 104.999em) {
  h2 {
    font-size: 1.36em;
    line-height: 1.25; } }

@media only screen and (min-width: 105em) {
  h2 {
    font-size: 1.7em;
    line-height: 1.25; } }

@media only screen and (max-width: 44.999em) {
  h3 {
    font-size: 1.05em;
    line-height: 1.135; } }

@media only screen and (min-width: 45em) and (max-width: 104.999em) {
  h3 {
    font-size: 1.12em;
    line-height: 1.25; } }

@media only screen and (min-width: 105em) {
  h3 {
    font-size: 1.4em;
    line-height: 1.25; } }

@media only screen and (max-width: 44.999em) {
  h4 {
    font-size: 1.1em;
    line-height: 1.1108; } }

@media only screen and (min-width: 45em) and (max-width: 104.999em) {
  h4 {
    font-size: 1.1em;
    line-height: 1.222; } }

@media only screen and (min-width: 105em) {
  h4 {
    font-size: 1.1em;
    line-height: 1.222; } }

@media only screen and (max-width: 44.999em) {
  p {
    font-size: 1em;
    line-height: 1.2992; } }

@media only screen and (min-width: 45em) and (max-width: 104.999em) {
  p {
    font-size: 1em;
    line-height: 1.4; } }

@media only screen and (min-width: 105em) {
  p {
    font-size: 1em;
    line-height: 1.4; } }

h1 {
  font-weight: 600; }

h2 {
  font-weight: 400; }

h3, h4, h5, h6 {
  font-weight: 300; }

p {
  margin-bottom: 0; }

select {
  font-size: inherit; }

input {
  width: auto; }

a {
  color: #fb7f1b; }

a:hover {
  color: #e76903; }

/* ... */
/* start vars: o-input */
/* end vars */
.o-bullet {
  position: relative;
  display: inline-block;
  margin-left: 15px; }
  .o-bullet:before {
    content: "";
    position: absolute;
    top: 7px;
    left: -15px;
    width: 5px;
    height: 5px;
    background-color: #999;
    border-radius: 100%; }

/* ... */
/* start vars: o-button */
/* end vars */
.o-button {
  position: relative;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 10px 20px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background-color: #fb7f1b;
  border: 0;
  -webkit-transition: background .25s linear;
  transition: background .25s linear; }
  .o-button--full {
    width: 100%; }
  .o-button--lwcase {
    text-transform: none; }
  .o-button:hover {
    background-color: #e76903;
    -webkit-transition: all .25s linear;
    transition: all .25s linear; }

.o-button--free:hover {
  background-color: #e76903;
  -webkit-transition: all .25s linear;
  transition: all .25s linear;
  color: #fff; }

.o-button.is-selected {
  color: #fff;
  background-color: #e76903;
  -webkit-transition: all .25s linear;
  transition: all .25s linear; }

/* ... */
/* uses variables from ../10-settings/variables */
/*
 * style checkboxes by adding element & hiding actual checkbox
 * usage: when <input type="checkbox"> exists, wrap in a <span class="c-checkbox"> (or div) and 
 * add <label class="checkbox__object" for="checkbox_id">
 */
/* start vars: c-checkbox */
/* end vars */
.o-checkbox {
  position: relative;
  display: inline-block; }

.checkbox__wrapper {
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px; }
  .checkbox__wrapper input[type=checkbox] {
    visibility: hidden; }
    .checkbox__wrapper input[type=checkbox]:checked + .checkbox__object:after {
      opacity: 1;
      -webkit-transition: opacity .25s linear;
      transition: opacity .25s linear; }

.checkbox__object {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border: 1px solid #bbb; }
  .checkbox__object:after {
    content: '';
    width: 12px;
    height: 6px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 3px solid #555;
    border-top: none;
    border-right: none;
    background-color: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  .checkbox__object:hover::after {
    opacity: 0.3; }
  .checkbox__object.checkbox__object--partial:after {
    width: auto;
    height: auto;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background: #555;
    -webkit-transform: rotate(0);
    transform: rotate(0); }

.checkbox__name {
  display: inline-block;
  color: #333;
  margin: 0;
  padding-left: 30px;
  line-height: 1.2; }
  .checkbox__name--small {
    font-size: 0.9em; }
  .checkbox__name--block {
    display: block; }

/* ... */
/* start vars: o-input */
/* end vars */
.o-input {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #fff;
  color: #333;
  box-sizing: border-box; }

/* ... */
/*
 * base ul, no bullets
 */
.o-list-bare {
  list-style: none; }

/* ... */
/*
 * basic format of a li with inline-block
 */
.o-list-inline {
  list-style: none; }

.list-inline__item {
  display: inline-block; }

/* ... */
/*
 * this class is used to stretch li's inside an ul to each occupy the same width
 */
.o-list-wide {
  list-style: none;
  display: table;
  table-layout: fixed;
  width: 100%; }

.list-wide__item {
  display: table-cell; }

/* ... */
/* start vars: o-loader */
/* end vars */
.o-loader {
  margin: -1em 0 0 -1em;
  position: absolute;
  /* parent needs position: relative */
  text-indent: -9999em;
  border: solid rgba(251, 127, 27, 0.2);
  /* add border width to increase it */
  border-left-color: #fb7f1b;
  -webkit-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite;
  overflow: hidden;
  z-index: 1; }

.o-loader,
.o-loader:after {
  border-radius: 100%;
  width: 2em;
  height: 2em; }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

/* ... */
/* start vars: o-loader */
/* end vars */
.o-platforms {
  position: absolute;
  left: 40px;
  top: 510px;
  font-size: 0.8em;
  color: #fff; }
  .o-platforms--app {
    color: #333;
    left: 110px; }
  @media only screen and (min-width: 45em) and (max-width: 59.999em) {
    .o-platforms {
      top: 450px; } }
  @media only screen and (max-width: 44.999em) {
    .o-platforms {
      display: none; } }
  .o-platforms .platforms__text {
    display: block;
    vertical-align: middle; }
  .o-platforms .platforms__item {
    display: block;
    vertical-align: middle;
    margin: 0;
    padding-left: 25px;
    height: 20px;
    line-height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    box-sizing: border-box; }
    .o-platforms .platforms__item--ios {
      background-image: url(../images/platform-ios.png); }
    .o-platforms .platforms__item--ios-start {
      background-image: url(../images/platform-ios-start.png); }
    .o-platforms .platforms__item--android {
      background-image: url(../images/platform-android.png); }
    .o-platforms .platforms__item--android-start {
      background-image: url(../images/platform-android-start.png); }
    .o-platforms .platforms__item--windows {
      background-image: url(../images/platform-windows.png); }
    .o-platforms .platforms__item--windows-start {
      background-image: url(../images/platform-windows-start.png); }
  .o-platforms.is-inline .platforms__item {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding-left: 30px;
    overflow: hidden; }
  .o-platforms--app.is-inline .platforms__text {
    display: inline-block; }

/* ... */
/* start vars: o-loader */
/* end vars */
.o-scrollbars::-webkit-scrollbar {
  width: 10px; }

.o-scrollbars::-webkit-scrollbar-track {
  background-color: rgba(204, 204, 204, 0.9); }

.o-scrollbars::-webkit-scrollbar-thumb {
  background-color: rgba(251, 127, 27, 0.5); }

.o-scrollbars::-webkit-scrollbar-thumb:hover {
  background-color: #e76903; }

/* ... */
/* start vars: o-button */
/* end vars */
.o-select {
  position: relative;
  width: 200px;
  /* can be relative to parent, =100% */
  background-color: transparent;
  border: 1px solid;
  margin: 0;
  padding: 0;
  font-size: 1em;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle; }
  .o-select:hover .select__action {
    border-top-color: #000;
    -webkit-transition: border-top-color .25s linear;
    transition: border-top-color .25s linear; }
  .o-select .select__object {
    width: calc(100% + 30px);
    height: 100%;
    padding: 5px;
    font-size: 1em;
    background-color: transparent;
    border: 0;
    -webkit-appearance: menulist;
    cursor: pointer; }
    .o-select .select__object:hover {
      color: #000;
      background-color: #ccc;
      -webkit-transition: background-color .25s linear;
      transition: background-color .25s linear; }
  .o-select .select__action {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    right: 10px;
    /* add a 10px space from the right */
    background-color: transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fb7f1b;
    z-index: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: none; }

/* ... */
/* start vars: clients */
/* end vars */
.m-clients {
  position: relative;
  width: 100%; }

.clients__title {
  margin-bottom: 20px; }

.clients__item {
  vertical-align: top;
  width: 140px;
  padding: 10px;
  margin: 0 10px 10px 0;
  background-color: #fff;
  border: 1px solid #fff;
  overflow: hidden;
  text-align: center;
  line-height: 1em;
  font-size: 0.7em;
  color: #555;
  box-sizing: border-box; }
  .clients__item:hover {
    border-color: #f0f0f0; }

.clients__link {
  display: block;
  color: #555; }

.clients__logo {
  margin-bottom: 5px; }

/* clients */
.clients__testimonials {
  width: 100%;
  margin: 10px 0;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  text-align: left;
  box-sizing: border-box;
  color: #777; }

.clients__testimonials-name {
  color: #000;
  display: block;
  margin-top: 10px; }

/* ColorBox */
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden; }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left; }

#cboxContent {
  position: relative; }

#cboxLoadedContent {
  overflow: auto; }

#cboxTitle {
  margin: 0;
  font-size: 1.2em; }

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer; }

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block; }

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0; }

#cboxOverlay {
  background: #fff; }

#cboxContent {
  overflow: visible; }

.cboxIframe {
  background: #000; }

#cboxError {
  padding: 25px;
  border: 1px solid #ccc; }

#cboxLoadedContent {
  background: #000; }

#cboxLoadingGraphic {
  background: url(../images/loading.gif) no-repeat center center; }

#cboxLoadingOverlay {
  background: #000; }

#cboxTitle {
  position: absolute;
  top: -22px;
  left: 0;
  color: #fff; }

#cboxCurrent {
  position: absolute;
  top: -22px;
  right: 205px;
  text-indent: -9999px; }

#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose {
  text-indent: -9999px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  background: url(../images/controls.png) no-repeat 0 0; }

#cboxPrevious {
  background-position: 0px 0px;
  right: 44px; }

#cboxPrevious:hover {
  background-position: 0px -25px; }

#cboxNext {
  background-position: -25px 0px;
  right: 22px; }

#cboxNext:hover {
  background-position: -25px -25px; }

#cboxClose {
  background-position: -50px 0px;
  right: 0; }

#cboxClose:hover {
  background-position: -50px -25px; }

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
  right: 66px; }

.cboxSlideshow_on #cboxSlideshow {
  background-position: -75px -25px;
  right: 44px; }

.cboxSlideshow_on #cboxSlideshow:hover {
  background-position: -100px -25px; }

.cboxSlideshow_off #cboxSlideshow {
  background-position: -100px 0px;
  right: 44px; }

.cboxSlideshow_off #cboxSlideshow:hover {
  background-position: -75px -25px; }

/* ... */
/* start vars: content */
/* end vars */
.m-content {
  position: relative;
  width: 100%;
  max-width: 1240px;
  padding: 0 20px;
  margin: 20px auto;
  box-sizing: border-box; }

.content__left {
  width: 65%;
  margin-right: 5%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 20px; }
  @media only screen and (max-width: 44.999em) {
    .content__left {
      width: 100%;
      margin-right: 0; } }

.content__right {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 20px; }
  @media only screen and (max-width: 44.999em) {
    .content__right {
      width: 100%; } }

.content__page-title {
  color: #e76903;
  margin-bottom: 30px; }

.content__title {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd; }

/* ... */
/* start vars: m-fillform */
/* end vars */
.m-fillform {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center; }

.fillform__container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

.fillform__item {
  display: block;
  margin-bottom: 10px; }
  .fillform__item--platform {
    margin-top: 30px; }

.fillform__label {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  box-sizing: border-box; }
  @media only screen and (max-width: 44.999em) {
    .fillform__label {
      width: 100%; } }
  .fillform__label--personal {
    width: 140px; }
  .fillform__label--usage {
    width: 430px;
    font-size: 1em; }
    @media only screen and (min-width: 45em) and (max-width: 59.999em) {
      .fillform__label--usage {
        width: 300px; } }
    @media only screen and (max-width: 44.999em) {
      .fillform__label--usage {
        width: 100%; } }
  @media only screen and (min-width: 60em) {
    .fillform__label--right {
      text-align: right; } }

.fillform__input {
  display: inline-block;
  vertical-align: middle;
  margin: 2px 0;
  border: 0;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 0.9em; }
  .fillform__input--personal {
    width: 100%; }
  .fillform__input--name {
    width: 50%;
    margin-right: 2%; }
    .fillform__input--name:last-child {
      width: 48%;
      margin-right: 0; }
      @media only screen and (max-width: 44.999em) {
        .fillform__input--name:last-child {
          width: 100%; } }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--name {
        width: 100%;
        margin-right: 0; } }
  .fillform__input--company {
    width: 31%;
    margin-right: 2%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--company {
        width: 100%; } }
  .fillform__input--email {
    width: 35%;
    margin-right: 2%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--email {
        width: 100%; } }
  .fillform__input--phone {
    width: 30%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--phone {
        width: 100%; } }
  .fillform__input--meeting {
    width: 63%;
    margin-right: 2%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--meeting {
        width: 100%; } }
  .fillform__input--timezone {
    width: 35%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--timezone {
        width: 100%; } }
  .fillform__input--city {
    width: 29%;
    margin-right: 1%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--city {
        width: 100%;
        margin-right: 0; } }
  .fillform__input--state {
    width: 19%;
    margin-right: 1%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--state {
        width: 100%;
        margin-right: 0; } }
  .fillform__input--district {
    width: 24%;
    margin-right: 1%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--district {
        width: 100%;
        margin-right: 0; } }
  .fillform__input--zip {
    width: 19%;
    margin-right: 1%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--zip {
        width: 100%;
        margin-right: 0; } }
  .fillform__input--country {
    width: 30%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--country {
        width: 100%; } }
  .fillform__input--usage {
    width: calc(100% - 430px); }
    @media only screen and (min-width: 45em) and (max-width: 59.999em) {
      .fillform__input--usage {
        width: calc(100% - 300px); } }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--usage {
        width: 100%; } }
  .fillform__input--industry {
    width: 30%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--industry {
        width: 100%; } }
  .fillform__input--numbers {
    width: 15%; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--numbers {
        width: 100%; } }
  .fillform__input--platforms {
    color: #999;
    margin-left: -4px; }
    @media only screen and (max-width: 44.999em) {
      .fillform__input--platforms {
        width: 100%; } }
  .fillform__input--upload {
    width: 100%; }

.fillform__chars {
  font-size: 0.8em; }

.fillform__submit {
  left: 50%;
  -webkit-transform: translate(-50%, -0);
  -ms-transform: translate(-50%, -0);
  -moz-transform: translate(-50%, -0);
  -o-transform: translate(-50%, -0);
  transform: translate(-50%, -0);
  width: 250px;
  margin-top: 20px;
  margin-bottom: 20px; }
  @media only screen and (max-width: 44.999em) {
    .fillform__submit {
      width: 100%; } }
  .fillform__submit--large {
    width: auto; }
  .fillform__submit--simple {
    -webkit-transform: translate(-0, -0);
    -ms-transform: translate(-0, -0);
    -moz-transform: translate(-0, -0);
    -o-transform: translate(-0, -0);
    transform: translate(-0, -0);
    left: 0; }

/*
   .fillform__count, .fillform__submit {
      @include media-range(palm-wide,max) {
         margin-left: 20%;
      }
   }
   .fillform__count {
      font-size: 0.8em;
   }
   */
.fillform__field {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  text-align: left; }

.fillform__title {
  font-size: 1.2em;
  color: #fff;
  background-color: #fb7f1b;
  border: 0;
  padding: 10px 10px;
  margin: 0 0 30px 0;
  width: 150px; }
  .fillform__title .fillform__name {
    display: block;
    text-align: center; }

.fillform__legal {
  text-decoration: underline; }

.fillform__legal-text {
  font-size: 0.8em; }

.fillform__platform {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 5px; }
  @media only screen and (max-width: 74.999em) {
    .fillform__platform {
      display: block;
      margin-right: 0; } }

.fillform__checkbox {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 5px; }
  .fillform__checkbox:last-child {
    margin-right: 0; }
  @media only screen and (max-width: 29.999em) {
    .fillform__checkbox {
      display: block; } }

.fillform {
  display: block; }

/* ... */
/* start vars: header */
/* end vars */
/* footer */
.m-footer {
  width: 100%;
  background-color: #f0f0f0;
  border-top: 1px solid #ddd; }

.footer__container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 20px 10px;
  box-sizing: border-box; }

.footer__list {
  font-size: 0.9em; }

.footer__item {
  width: 50%;
  vertical-align: top;
  box-sizing: border-box; }
  @media only screen and (max-width: 29.999em) {
    .footer__item {
      width: 100%; } }
  .footer__item--logo {
    position: relative;
    min-height: 60px;
    padding-left: 50px; }

.footer__text {
  margin-bottom: 10px; }

.footer__copyright {
  margin-top: 20px;
  font-size: 0.8em; }

/* ... */
/* start vars: header */
/* end vars */
.m-header {
  position: relative;
  width: 100%;
  height: 130px;
  border-bottom: 1px solid #ddd;
  z-index: 50; }
  @media only screen and (max-width: 44.999em) {
    .m-header {
      height: 90px; } }

.header__container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }

/* ... */
/* start vars: m-logo */
/* end vars */
.m-logo {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-0, -50%);
  -ms-transform: translate(-0, -50%);
  -moz-transform: translate(-0, -50%);
  -o-transform: translate(-0, -50%);
  transform: translate(-0, -50%);
  background-image: url(/images/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 99; }
  @media only screen and (min-width: 45em) {
    .m-logo {
      left: 40px;
      width: 240px;
      height: 75px; } }
  @media only screen and (max-width: 44.999em) {
    .m-logo {
      left: 10px;
      width: 192px;
      height: 60px; } }
  .m-logo--footer {
    width: 40px;
    height: 40px;
    background-size: cover;
    left: 0;
    top: 20px; }

.logo__title {
  display: none; }

.logo__link {
  display: block;
  height: 80px;
  text-decoration: none; }

/* ... */
/* start vars: m-logo */
/* end vars */
.m-primary-nav {
  z-index: 50;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  text-align: right; }
  @media only screen and (min-width: 45em) {
    .m-primary-nav {
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-0, -50%);
      -ms-transform: translate(-0, -50%);
      -moz-transform: translate(-0, -50%);
      -o-transform: translate(-0, -50%);
      transform: translate(-0, -50%);
      right: 0; } }
  @media only screen and (max-width: 29.999em) {
    .m-primary-nav {
      font-size: 0.9em; } }

.primary-nav__menu {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-0, -50%);
  -ms-transform: translate(-0, -50%);
  -moz-transform: translate(-0, -50%);
  -o-transform: translate(-0, -50%);
  transform: translate(-0, -50%);
  right: 20px;
  padding-right: 30px;
  color: #777;
  line-height: 30px;
  z-index: 800;
  display: none;
  cursor: pointer; }
  @media only screen and (max-width: 44.999em) {
    .primary-nav__menu {
      display: inline-block; } }
  .primary-nav__menu:hover {
    color: #333; }
    .primary-nav__menu:hover .primary-nav__menu-icon {
      background-color: #555; }
      .primary-nav__menu:hover .primary-nav__menu-icon:before, .primary-nav__menu:hover .primary-nav__menu-icon:after {
        background-color: #555; }
  .primary-nav__menu .primary-nav__menu-icon {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-0, -50%);
    -ms-transform: translate(-0, -50%);
    -moz-transform: translate(-0, -50%);
    -o-transform: translate(-0, -50%);
    transform: translate(-0, -50%);
    right: 0;
    width: 20px;
    height: 4px;
    background-color: #aaa;
    border-radius: 1px; }
    .primary-nav__menu .primary-nav__menu-icon:before, .primary-nav__menu .primary-nav__menu-icon:after {
      content: '';
      position: absolute;
      width: 20px;
      height: 4px;
      background-color: #aaa;
      border-radius: 1px; }
    .primary-nav__menu .primary-nav__menu-icon:before {
      top: -6px; }
    .primary-nav__menu .primary-nav__menu-icon:after {
      bottom: -6px; }

.primary-nav__list {
  position: relative;
  width: auto;
  display: inline-block;
  text-align: right; }
  @media only screen and (max-width: 44.999em) {
    .primary-nav__list {
      top: 0;
      width: 100%;
      overflow: hidden;
      opacity: 0;
      line-height: 30px;
      pointer-events: none; } }
  .primary-nav__list.is-visible {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    padding: 10px;
    line-height: 30px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
    -webkit-transition: all .15s linear;
    transition: all .15s linear;
    pointer-events: all; }
    .primary-nav__list.is-visible .primary-nav__item {
      display: block; }

.primary-nav__contacts {
  display: block;
  font-size: 0.8em;
  color: #777;
  padding: 0 10px 4px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee; }

.primary-nav__contacts-link {
  display: inline-block;
  margin-left: 10px;
  color: #777; }
  @media only screen and (max-width: 44.999em) {
    .primary-nav__contacts-link {
      display: block;
      margin-left: 0; } }

.primary-nav__item {
  position: relative;
  vertical-align: top;
  margin: 0 10px; }
  .primary-nav__item--line {
    margin: 10px 0;
    border-bottom: 1px solid #eee; }

.primary-nav__link {
  font-size: 1.1em;
  font-weight: 600; }
  .primary-nav__link--high {
    color: #fb7f1b; }
    .primary-nav__link--high:hover {
      color: #111; }
  .primary-nav__link--current {
    border-bottom: 1px solid #fb7f1b; }

/* ... */
/* start vars: m-slides */
/* end vars */
/* 4 categ */
.m-slides {
  width: 100%;
  padding: 40px 0;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box; }

.slides__container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }

.slides__categories {
  position: relative;
  width: 100%;
  padding: 20px 20px 40px;
  background: linear-gradient(#f0f0f0, #fff);
  border-bottom: 4px solid #ccc;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box; }

.slides__services {
  display: inline-block;
  vertical-align: middle;
  width: 45%; }
  @media only screen and (max-width: 29.999em) {
    .slides__services {
      width: 100%;
      margin-bottom: 20px; } }

.slides__services-list {
  margin-right: 20px; }
  @media only screen and (min-width: 30em) and (max-width: 44.999em) {
    .slides__services-list {
      margin-right: 10px; } }
  @media only screen and (max-width: 29.999em) {
    .slides__services-list {
      margin-right: 0; } }

.slides__services-item {
  width: 48%;
  margin: 1%;
  padding: 20px;
  font-size: 1.1em;
  line-height: 1em;
  color: #777;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
  -webkit-transition: all .15s linear;
  transition: all .25s linear; }
  @media only screen and (max-width: 44.999em) {
    .slides__services-item {
      width: 98%;
      padding: 10px 10px; } }
  .slides__services-item.is-active {
    color: #e76903;
    background-color: #fed3b1;
    border-color: #fed3b1;
    -webkit-transition: all .15s linear;
    transition: all .25s linear; }

.slides__services-name {
  position: relative;
  display: block;
  min-height: 40px;
  padding-left: 50px;
  background-repeat: no-repeat;
  background-position: left center;
  line-height: 1.2; }
  .slides__services-name--web {
    background-image: url(/images/icon_web.png); }
  .slides__services-name--desktop {
    background-image: url(/images/icon_desktop.png); }
  .slides__services-name--mobile {
    background-image: url(/images/icon_mobile.png); }
  .slides__services-name--cloud {
    background-image: url(/images/icon_cloud.png); }

.slides__technologies {
  display: inline-block;
  vertical-align: middle;
  width: 55%; }
  @media only screen and (max-width: 29.999em) {
    .slides__technologies {
      width: 100%; } }

.slides__technologies-list {
  margin-left: 20px; }
  @media only screen and (min-width: 30em) and (max-width: 44.999em) {
    .slides__technologies-list {
      margin-left: 10px; } }
  @media only screen and (max-width: 29.999em) {
    .slides__technologies-list {
      margin-left: 0; } }

.slides__technologies-item {
  position: relative;
  margin: 5px 0 5px 20px;
  color: #777; }
  .slides__technologies-item:before {
    content: '';
    position: absolute;
    top: 12px;
    left: -20px;
    width: 6px;
    height: 6px;
    background-color: #fb7f1b;
    transform: rotate(-45deg);
    transform-origin: 0 0; }

.slides__tag {
  position: relative;
  width: 100%;
  margin: 0; }

.slides__tag-text {
  margin: 0;
  padding: 30px 0 0;
  font-weight: 600;
  color: #fb7f1b;
  text-align: center; }
  .slides__tag-text:before {
    content: '';
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -0);
    -ms-transform: translate(-50%, -0);
    -moz-transform: translate(-50%, -0);
    -o-transform: translate(-50%, -0);
    transform: translate(-50%, -0);
    top: -1px;
    width: 30px;
    height: 30px;
    margin-left: -17px;
    border: 4px solid #ccc;
    border-width: 0 0 4px 4px;
    border-radius: 0 0 0 10px;
    background-color: #fff;
    transform: rotate(-45deg);
    transform-origin: 0 0; }

/* ... */
.m-social {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  text-align: right;
  min-width: 200px; }
  @media only screen and (max-width: 44.999em) {
    .m-social {
      text-align: left; } }

.social__item {
  display: inline-block;
  vertical-align: top;
  margin-right: 2px;
  width: 30px;
  height: 30px;
  opacity: 0.7;
  -webkit-transition: all .25s linear;
  transition: all .25s linear;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 100%;
  border: 2px solid transparent; }
  .social__item:hover {
    opacity: 1;
    border-color: #fff;
    -webkit-transition: all .25s linear;
    transition: all .25s linear; }
  .social__item--twitter {
    background-image: url(../images/social/twitter.png); }
  .social__item--facebook {
    background-image: url(../images/social/facebook.png); }
  .social__item--linkedin {
    background-image: url(../images/social/linkedin.png); }
  .social__item--youtube {
    background-image: url(../images/social/youtube.png); }
  .social__item--googleplus {
    background-image: url(../images/social/googleplus.png); }
  .social__item .social__name {
    display: none; }

/* ... */
/* start vars: m-start */
/* end vars */
/* 1st page text */
.m-start {
  position: relative;
  width: 100%;
  margin-top: 30px; }

.start__container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1240px;
  margin: 0 auto 20px;
  padding: 0;
  box-sizing: border-box; }

.start__textcol {
  display: inline-block;
  vertical-align: top;
  width: 31%;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 0.9em; }
  @media only screen and (min-width: 30em) and (max-width: 59.999em) {
    .start__textcol {
      width: 50%; } }
  @media only screen and (max-width: 29.999em) {
    .start__textcol {
      width: 100%;
      margin-bottom: 40px; } }
  .start__textcol:nth-child(3) {
    width: 38%; }
    @media only screen and (min-width: 30em) and (max-width: 59.999em) {
      .start__textcol:nth-child(3) {
        width: 100%;
        margin-top: 40px; } }
    @media only screen and (max-width: 29.999em) {
      .start__textcol:nth-child(3) {
        width: 100%;
        margin: 0; } }

.start__texttitle {
  margin-bottom: 20px;
  font-weight: 600;
  color: #6d3202; }

.start__textlist {
  margin-top: 10px; }

.start__textlist-item {
  position: relative;
  margin: 5px 0 0 20px; }
  .start__textlist-item:before {
    content: '';
    position: absolute;
    top: 7px;
    left: -20px;
    width: 7px;
    height: 7px;
    background-color: #fb7f1b;
    border-radius: 100%; }

/* contactform */
.start__contact {
  margin: 40px 20px 20px;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #eee;
  box-sizing: border-box;
  color: #777; }

.start__contact-title {
  margin: 0 0 20px;
  line-height: 1.3em;
  font-weight: 600;
  color: #555; }

.start__contactform p {
  margin: 0 0 10px 10px;
  color: #656565; }

.start__contactform p a {
  margin: 0;
  padding: 0;
  color: #642104;
  text-decoration: none; }

.start__contactform p a:hover {
  color: #000;
  text-decoration: none; }

.start__contact-form {
  width: auto; }

.outform label {
  display: block;
  width: auto;
  margin: 5px 0;
  font-weight: 300;
  color: #777; }

.outform span {
  display: block;
  width: auto;
  margin: 0 0 5px 0;
  font-weight: 300;
  color: #777; }

.start__contact-input {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 3px;
  box-sizing: border-box;
  background: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc; }

.outform textarea {
  height: 80px;
  margin-bottom: 5px; }

.outform input.sbmtbtn {
  width: 140px;
  margin: 15px 0 0;
  padding: 7px 0;
  font-weight: 400;
  color: #fff;
  background: #e76903;
  border: 1px solid #555;
  cursor: pointer; }

.outform input.sbmtbtn:hover {
  border-color: #000; }

.outform #name.error, #outform #email.error, #outform #phone.error, #outform #proj.error {
  border: 1px solid #f00; }

#lblFormMessage {
  display: block;
  width: auto;
  margin: 5px 0 5px 0;
  font-weight: 300; }

.formError {
  color: #f00; }

.formWarning {
  color: #f4a460; }

.formSuccess {
  color: #006400; }

.formNeutral {
  color: #777; }

.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  flex: 1 0 auto; }