.navbar-main {
  width: 100%;
  height: 60px;
  line-height: 60px;
  z-index: 1000;
  position: fixed;
  top: 0px;
  background-color: white;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Lato", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color: #817b79;
  transition: all 0.35s ease 0s; }
  .navbar-main a {
    color: inherit;
    text-decoration: none; }
  .navbar-main a:hover {
    color: #bf4e39; }

.navbar-main.affix {
  height: 39.6px;
  line-height: 39.6px;
  position: fixed;
  background: white !important;
  opacity: 0.9;
  color: black !important; }
  .navbar-main.affix .navbar-button {
    width: 27.72px;
    height: 27.72px;
    line-height: 27.72px;
    font-size: 19.8px;
    border: solid 1px #817b79; }

.navbar-main.expanded {
  background-color: transparent;
  color: #2b2b2b;
  border: 0px; }

.navbar-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer; }

.navbar-header, .navbar-list {
  height: 100%;
  margin: 0px;
  padding: 0px; }

.navbar-header {
  position: absolute;
  margin-left: 15%;
  font-size: 20px;
  text-transform: none; }
  @media only screen and (max-width: 900px) {
    .navbar-header {
      margin-left: 10%; } }

.navbar-button {
  width: 42px;
  height: 42px;
  line-height: 42px;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 0px;
  border-radius: 5px;
  margin-right: 15%;
  text-align: center;
  font-weight: 400;
  font-size: 30px; }
  @media only screen and (max-width: 900px) {
    .navbar-button {
      margin-right: 10%; } }
  @media only screen and (min-width: 900px) {
    .navbar-button {
      display: none; } }

.navbar-button:hover {
  border-color: #bf4e39 !important;
  color: #bf4e39; }

.navbar-list {
  float: right;
  margin-right: 15%; }
  @media only screen and (max-width: 900px) {
    .navbar-list {
      margin-right: 10%; } }
  .navbar-list li {
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer; }
  @media only screen and (min-width: 900px) {
    .navbar-list {
      display: block !important; } }
  @media only screen and (max-width: 900px) {
    .navbar-list {
      float: none;
      width: 300px;
      height: auto;
      position: relative;
      top: 100%;
      left: 100%;
      transform: translateX(-100%);
      padding: 0px;
      background-color: inherit;
      display: none; }
      .navbar-list li {
        text-align: center;
        display: block;
        background-color: inherit; } }
  @media only screen and (max-width: 500px) {
    .navbar-list {
      width: 100%; } }

.frontPage {
  height: 100%;
  color: white;
  background-image: url("../img/frontPage3.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center 0;
  background-size: cover; }
  .frontPage .header {
    font-weight: 100;
    z-index: 5;
    width: 400px;
    height: 144px;
    margin-top: calc(50vh - 144px/2 - 60px);
    margin-left: calc(50vw - 400px/2 - 30px);
    text-align: center; }
  .frontPage .title {
    font-size: 70px; }
  .frontPage .subtitle {
    font-size: 25px;
    text-transform: uppercase; }
  .frontPage .line {
    width: 50%;
    height: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50%;
    background-color: white; }

.introDescription {
  position: relative;
  z-index: 11;
  height: 100vh;
  color: white;
  border-bottom: 3px solid white;
  background-color: #151d29 !important;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 300;
  height: 500px; }
  .introDescription aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .introDescription aside img {
      width: 70%; }
    .introDescription aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .introDescription aside .youtube {
      width: 100%; }
  .introDescription article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .introDescription aside {
      width: calc(35vw - 20px - 30px*2); }
      .introDescription aside img {
        width: 100%; }
    .introDescription article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .introDescription {
      height: auto; }
      .introDescription aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .introDescription article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .introDescription:after {
    content: '';
    display: block;
    clear: both; }
  .introDescription aside {
    left: 30px; }
  .introDescription article:first-of-type {
    right: 30px; }
  .introDescription h2 {
    line-height: 160%; }
  .introDescription aside .playButton {
    display: block;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 48px solid #2c3e50;
    margin: 80px auto 40px auto;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    left: 8px;
    cursor: pointer; }
    .introDescription aside .playButton:before {
      content: '';
      position: absolute;
      top: -60px;
      left: -92px;
      bottom: -60px;
      right: -28px;
      border-radius: 50%;
      border: 8px solid #2c3e50;
      z-index: 2;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s; }
    .introDescription aside .playButton:after {
      content: '';
      opacity: 0;
      transition: opacity 0.6s;
      -webkit-transition: opacity 0.6s;
      -moz-transition: opacity 0.6s; }
    .introDescription aside .playButton:hover:before, .introDescription aside .playButton:focus:before {
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1); }
    .introDescription aside .playButton.active {
      border-color: transparent; }
      .introDescription aside .playButton.active:after {
        content: '';
        opacity: 1;
        width: 40px;
        height: 64px;
        background: #2c3e50;
        position: absolute;
        right: 4px;
        top: -32px;
        border-left: 16px solid #2c3e50;
        box-shadow: inset 24px 0 0 0 #f9f9f9; }
  .introDescription .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 600px;
    height: 70px;
    transform: translateY(30px); }

.differentParts {
  background-color: #405363 !important;
  color: white;
  height: 400px; }
  .differentParts aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .differentParts aside img {
      width: 70%; }
    .differentParts aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .differentParts aside .youtube {
      width: 100%; }
  .differentParts article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .differentParts aside {
      width: calc(35vw - 20px - 30px*2); }
      .differentParts aside img {
        width: 100%; }
    .differentParts article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .differentParts {
      height: auto; }
      .differentParts aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .differentParts article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .differentParts:after {
    content: '';
    display: block;
    clear: both; }
  .differentParts aside {
    right: 30px; }
  .differentParts article:first-of-type {
    left: 30px; }
  .differentParts aside div[class^='bt-'] {
    width: 160px;
    height: 35px;
    line-height: 35px; }
    @media only screen and (max-width: 900px) {
      .differentParts aside div[class^='bt-'] {
        width: calc(100% - 30px);
        height: 20px;
        line-height: 20px; } }

.introMech {
  height: 300px;
  background-image: url("../img/introMech.jpg");
  background-size: cover;
  color: white; }
  .introMech aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .introMech aside img {
      width: 70%; }
    .introMech aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .introMech aside .youtube {
      width: 100%; }
  .introMech article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .introMech aside {
      width: calc(35vw - 20px - 30px*2); }
      .introMech aside img {
        width: 100%; }
    .introMech article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .introMech {
      height: auto; }
      .introMech aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .introMech article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .introMech:after {
    content: '';
    display: block;
    clear: both; }
  .introMech aside {
    right: 30px; }
  .introMech article:first-of-type {
    left: 30px; }
  .introMech article {
    background-color: transparent !important; }

.motorChoice {
  height: 500px; }
  .motorChoice aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .motorChoice aside img {
      width: 70%; }
    .motorChoice aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .motorChoice aside .youtube {
      width: 100%; }
  .motorChoice article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .motorChoice aside {
      width: calc(35vw - 20px - 30px*2); }
      .motorChoice aside img {
        width: 100%; }
    .motorChoice article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .motorChoice {
      height: auto; }
      .motorChoice aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .motorChoice article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .motorChoice:after {
    content: '';
    display: block;
    clear: both; }
  .motorChoice aside {
    left: 30px; }
  .motorChoice article:first-of-type {
    right: 30px; }
  .motorChoice aside > img {
    max-height: 311px;
    max-width: 250px; }

.motorCasing {
  height: 500px; }
  .motorCasing aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .motorCasing aside img {
      width: 70%; }
    .motorCasing aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .motorCasing aside .youtube {
      width: 100%; }
  .motorCasing article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .motorCasing aside {
      width: calc(35vw - 20px - 30px*2); }
      .motorCasing aside img {
        width: 100%; }
    .motorCasing article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .motorCasing {
      height: auto; }
      .motorCasing aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .motorCasing article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .motorCasing:after {
    content: '';
    display: block;
    clear: both; }
  .motorCasing aside {
    right: 30px; }
  .motorCasing article:first-of-type {
    left: 30px; }
  .motorCasing aside > img {
    max-width: 320px;
    max-height: 425px; }

.sensorChoice {
  height: 500px; }
  .sensorChoice aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .sensorChoice aside img {
      width: 70%; }
    .sensorChoice aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .sensorChoice aside .youtube {
      width: 100%; }
  .sensorChoice article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .sensorChoice aside {
      width: calc(35vw - 20px - 30px*2); }
      .sensorChoice aside img {
        width: 100%; }
    .sensorChoice article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .sensorChoice {
      height: auto; }
      .sensorChoice aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .sensorChoice article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .sensorChoice:after {
    content: '';
    display: block;
    clear: both; }
  .sensorChoice aside {
    left: 30px; }
  .sensorChoice article:first-of-type {
    right: 30px; }
  .sensorChoice aside > img {
    max-width: 350px;
    max-height: 425px; }

.figure,
.equation,
.legende {
  display: block;
  max-width: 100%;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: 10px;
  margin-left: auto; }

.legende {
  text-align: center; }

.figure {
  border: 1px solid #186699; }

.equationInline {
  margin-bottom: -.2em; }

.elecIntro {
  height: 300px;
  background-image: url("../img/elecIntro.jpg");
  background-size: cover;
  color: white; }
  .elecIntro aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .elecIntro aside img {
      width: 70%; }
    .elecIntro aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .elecIntro aside .youtube {
      width: 100%; }
  .elecIntro article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .elecIntro aside {
      width: calc(35vw - 20px - 30px*2); }
      .elecIntro aside img {
        width: 100%; }
    .elecIntro article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .elecIntro {
      height: auto; }
      .elecIntro aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .elecIntro article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .elecIntro:after {
    content: '';
    display: block;
    clear: both; }
  .elecIntro aside {
    left: 30px; }
  .elecIntro article:first-of-type {
    right: 30px; }
  .elecIntro article {
    background-color: transparent !important; }

.introCode {
  height: 300px;
  background-image: url("../img/ArduinoWallpaper.bak.png");
  background-size: cover; }
  .introCode aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .introCode aside img {
      width: 70%; }
    .introCode aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .introCode aside .youtube {
      width: 100%; }
  .introCode article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .introCode aside {
      width: calc(35vw - 20px - 30px*2); }
      .introCode aside img {
        width: 100%; }
    .introCode article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .introCode {
      height: auto; }
      .introCode aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .introCode article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .introCode:after {
    content: '';
    display: block;
    clear: both; }
  .introCode aside {
    left: 30px; }
  .introCode article:first-of-type {
    right: 30px; }
  .introCode article {
    background-color: transparent !important; }

.OperatingDiagram {
  height: 450px; }
  .OperatingDiagram aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .OperatingDiagram aside img {
      width: 70%; }
    .OperatingDiagram aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .OperatingDiagram aside .youtube {
      width: 100%; }
  .OperatingDiagram article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .OperatingDiagram aside {
      width: calc(35vw - 20px - 30px*2); }
      .OperatingDiagram aside img {
        width: 100%; }
    .OperatingDiagram article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .OperatingDiagram {
      height: auto; }
      .OperatingDiagram aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .OperatingDiagram article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .OperatingDiagram:after {
    content: '';
    display: block;
    clear: both; }
  .OperatingDiagram aside {
    left: 30px; }
  .OperatingDiagram article:first-of-type {
    right: 30px; }

.codeArchitecture {
  height: 450px; }
  .codeArchitecture aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .codeArchitecture aside img {
      width: 70%; }
    .codeArchitecture aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .codeArchitecture aside .youtube {
      width: 100%; }
  .codeArchitecture article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .codeArchitecture aside {
      width: calc(35vw - 20px - 30px*2); }
      .codeArchitecture aside img {
        width: 100%; }
    .codeArchitecture article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .codeArchitecture {
      height: auto; }
      .codeArchitecture aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .codeArchitecture article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .codeArchitecture:after {
    content: '';
    display: block;
    clear: both; }
  .codeArchitecture aside {
    right: 30px; }
  .codeArchitecture article:first-of-type {
    left: 30px; }

.statesDescription {
  text-align: center; }
  .statesDescription article {
    display: inline-block;
    width: calc(33% - 10px) !important;
    text-align: left;
    vertical-align: top; }
    .statesDescription article:nth-child(3n+1) {
      float: left; }
    .statesDescription article:nth-child(3n+3) {
      float: right; }
    @media only screen and (max-width: 900px) {
      .statesDescription article {
        width: calc(48% - 10px) !important; }
        .statesDescription article:nth-child(2n+1) {
          float: left; }
        .statesDescription article:nth-child(2n+2) {
          float: right; } }
    @media only screen and (max-width: 500px) {
      .statesDescription article {
        width: calc(100% - 10px) !important; } }
  .statesDescription:after {
    display: block;
    clear: both;
    content: ''; }

.downloadSection {
  color: white;
  background-color: #4696e5 !important;
  height: 500px; }
  .downloadSection aside {
    width: calc(50vw - 20px - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center; }
    .downloadSection aside img {
      width: 70%; }
    .downloadSection aside pre {
      text-align: left;
      border: 1px solid #186699;
      overflow: auto; }
    .downloadSection aside .youtube {
      width: 100%; }
  .downloadSection article:first-of-type {
    width: calc(50vw - 60px);
    margin: 0px;
    padding: 0px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%; }
  @media only screen and (max-width: 900px) {
    .downloadSection aside {
      width: calc(35vw - 20px - 30px*2); }
      .downloadSection aside img {
        width: 100%; }
    .downloadSection article:first-of-type {
      width: calc(65vw - 30px*2); } }
  @media only screen and (max-width: 500px) {
    .downloadSection {
      height: auto; }
      .downloadSection aside {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; }
      .downloadSection article:first-of-type {
        width: calc(100vw - 20px -  30px*2);
        position: relative;
        transform: translateY(0px);
        left: 0px !important;
        right: 0px !important; } }
  .downloadSection:after {
    content: '';
    display: block;
    clear: both; }
  .downloadSection aside {
    right: 30px; }
  .downloadSection article:first-of-type {
    left: 30px; }
  .downloadSection article {
    text-align: right; }
    .downloadSection article h1,
    .downloadSection article h2 {
      margin: 0; }
  .downloadSection aside {
    text-align: left; }

footer {
  width: 100%;
  height: 100px; }
  footer .containor {
    position: fixed;
    z-index: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    color: #817b79;
    background-color: #171717;
    background-image: url("../img/bg-dark-grain.png"); }
    footer .containor .right,
    footer .containor .left {
      width: calc(50% - 50px);
      margin-top: 10px; }
      @media only screen and (max-width: 900px) {
        footer .containor .right,
        footer .containor .left {
          width: calc(50% - 20px); } }
    @media only screen and (max-width: 500px) {
      footer .containor .left {
        display: none !important; }
      footer .containor .right {
        width: 100% !important;
        text-align: center !important; } }
    footer .containor .right {
      float: right;
      text-align: left; }
    footer .containor .left {
      float: left;
      text-align: right; }
    footer .containor .scroll-top-bt {
      position: absolute;
      top: 0;
      right: 7%;
      margin: 0 !important;
      padding: 7px !important;
      padding-right: 13px !important;
      transform: rotate(-90deg);
      vertical-align: middle;
      border: 0 !important;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0; }
    footer .containor .bottom {
      font-size: 10;
      position: absolute;
      right: 0;
      bottom: 5px;
      left: 0;
      padding-left: 7%;
      padding-right: 7%; }
      @media only screen and (max-width: 900px) {
        footer .containor .bottom {
          padding-left: 3%; } }
      @media only screen and (max-width: 900px) {
        footer .containor .bottom {
          padding-right: 3%; } }
      footer .containor .bottom .copyright {
        float: left; }
      footer .containor .bottom .team {
        float: right; }
      @media only screen and (max-width: 500px) {
        footer .containor .bottom .copyright {
          display: none; }
        footer .containor .bottom .team {
          float: none;
          text-align: center; } }

/*@mixin incline-background($color) {
    background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23"+str-replace($color,"#","%23")+";' /%3E%3C/svg%3E");
}*/
section:nth-child(2n+1) {
  background-color: #eef2fb; }

section {
  position: relative;
  z-index: 10;
  display: block;
  width: calc(100vw - $section_padding-horiz * 2);
  max-width: calc(100vw - $section_padding-horiz * 2);
  padding: 30px 30px;
  margin: 0;
  background-color: white; }
  section h1 {
    font-size: 40px;
    font-weight: 400;
    line-height: 100%; }
  section h2 {
    font-size: 20px;
    font-weight: 400;
    line-height: 100%; }
  section.incline-top::before, section.incline-bottom::after {
    position: absolute;
    display: block;
    width: 100%;
    height: 40px;
    content: ' ';
    background-repeat: no-repeat;
    background-size: 100% 100%; }
  section.incline-top::before {
    top: 0;
    transform: translateY(-100%) scaleX(-1);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23f05f40;' /%3E%3C/svg%3E"); }
  section.incline-bottom::after {
    z-index: 11;
    bottom: 0;
    transform: translateY(100%) scaleY(-1);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23f05f40;' /%3E%3C/svg%3E"); }
  section:first-of-type {
    padding: 90px 30px; }

header {
  width: 80vw;
  height: 80px;
  margin-bottom: 20px;
  margin-left: 10vw;
  text-align: center;
  color: #2b2b2b; }
  header .title {
    font-size: 20px;
    line-height: 30px;
    line-height: 160%;
    height: 30px; }
  header .icon {
    font-size: 50px;
    line-height: 50px;
    height: 50px; }
  header:before {
    position: relative;
    display: inline-block;
    height: 2px;
    content: ' ';
    transform: translateX(-120%) translateY(40px);
    background-color: #817b79;
    width: 200px; }
    @media only screen and (max-width: 900px) {
      header:before {
        width: 130px; } }
  header:after {
    position: relative;
    display: inline-block;
    height: 2px;
    content: ' ';
    transform: translateX(120%) translateY(-40px);
    background-color: #817b79;
    width: 200px; }
    @media only screen and (max-width: 900px) {
      header:after {
        width: 130px; } }

article {
  font-size: 16px;
  line-height: 160%;
  max-width: 600px;
  margin: 0 auto; }

aside.float {
  width: 300px;
  height: 500px;
  background-color: #69ad40; }

.viewer {
  display: table;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0 !important;
  background-color: #2b2b2b;
  background-image: url("../img/bg-dark-grain.png"); }
  .viewer .image {
    display: table-cell;
    padding-top: 60px; }
    .viewer .image > .containor {
      position: relative;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain; }
      .viewer .image > .containor .arrow-left,
      .viewer .image > .containor .arrow-right {
        font-size: 32px;
        cursor: pointer;
        color: white;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none; }
      .viewer .image > .containor .arrow-right {
        right: 20px; }
      .viewer .image > .containor .arrow-left {
        left: 20px; }
      .viewer .image > .containor .caption {
        font-size: 20px;
        position: absolute;
        bottom: 0;
        height: 100px;
        padding: 5px;
        opacity: 0.6;
        color: #fbfbfb;
        background-color: #2b2b2b;
        width: calc(100% - 60px*2);
        padding-left: 60px;
        padding-right: 60px; }
        @media only screen and (max-width: 900px) {
          .viewer .image > .containor .caption {
            width: calc(100% - 40px*2); } }
        @media only screen and (max-width: 900px) {
          .viewer .image > .containor .caption {
            padding-left: 40px; } }
        @media only screen and (max-width: 900px) {
          .viewer .image > .containor .caption {
            padding-right: 40px; } }
        @media only screen and (max-width: 500px) {
          .viewer .image > .containor .caption {
            width: calc(100% - 5px*2);
            padding: 5px;
            text-align: center; } }
  .viewer aside {
    display: table-cell;
    text-align: center;
    background-color: white;
    box-shadow: 10px 0px 100px;
    width: 360px; }
    @media only screen and (max-width: 900px) {
      .viewer aside {
        width: 270px; } }
    .viewer aside .containor {
      position: absolute;
      top: 0;
      overflow-x: hidden;
      overflow-y: scroll;
      height: 100vh;
      max-height: 100vh; }
      .viewer aside .containor .header {
        position: relative;
        width: 100%;
        height: calc(250px - 60px);
        margin-top: 60px; }
        .viewer aside .containor .header h1,
        .viewer aside .containor .header h2 {
          line-height: 100%;
          margin: 0; }
        .viewer aside .containor .header .Logo {
          height: 100px;
          width: 190px;
          margin-top: 100px;
          margin-left: auto;
          margin-right: auto; }
      .viewer aside .containor .thumbnail:nth-child(2n) {
        float: right; }
      .viewer aside .containor .thumbnail {
        float: left;
        width: 50%;
        cursor: pointer;
        transition: border .35s ease 0s;
        color: transparent;
        background-position: center center;
        background-size: cover;
        height: 100px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none; }
        @media only screen and (max-width: 900px) {
          .viewer aside .containor .thumbnail {
            height: 75px; } }
        .viewer aside .containor .thumbnail.selected {
          width: calc(50% - 6px);
          border-left: 6px solid #bf4e39; }
    @media only screen and (max-width: 500px) {
      .viewer aside {
        display: none; } }

@-webkit-keyframes anim-fadeInLeft-short {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0); }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes anim-fadeInLeft-short {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0); }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.anim-fadeInLeft-short {
  -webkit-animation-name: anim-fadeInLeft-short;
  animation-name: anim-fadeInLeft-short; }

@-webkit-keyframes anim-fadeOutLeft-short {
  from {
    opacity: 1; }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0); } }

@keyframes anim-fadeOutLeft-short {
  from {
    opacity: 1; }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0); } }

.anim-fadeOutLeft-short {
  -webkit-animation-name: anim-fadeOutLeft-short;
  animation-name: anim-fadeOutLeft-short; }

@-webkit-keyframes anim-fadeInRight-short {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0); }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes anim-fadeInRight-short {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0); }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.anim-fadeInRight-short {
  -webkit-animation-name: anim-fadeInRight-short;
  animation-name: anim-fadeInRight-short; }

@-webkit-keyframes anim-fadeOutRight-short {
  from {
    opacity: 1; }

  to {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0); } }

@keyframes anim-fadeOutRight-short {
  from {
    opacity: 1; }

  to {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0); } }

.anim-fadeOutRight-short {
  -webkit-animation-name: anim-fadeOutRight-short;
  animation-name: anim-fadeOutRight-short; }

@-webkit-keyframes anim-bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }

  to {
    -webkit-transform: none;
    transform: none; } }

@keyframes anim-bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }

  to {
    -webkit-transform: none;
    transform: none; } }

.anim-bounceInLeft {
  -webkit-animation-name: anim-bounceInLeft;
  animation-name: anim-bounceInLeft; }

@-webkit-keyframes anim-bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

@keyframes anim-bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }

.anim-bounceOutLeft {
  -webkit-animation-name: anim-bounceOutLeft;
  animation-name: anim-bounceOutLeft; }

body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  background-color: #186699;
  font-family: "Lato", "Open Sans", "Helvetica Neue", Arial, sans-serif; }

.text-color-blue {
  color: #186699 !important; }

.bg-blue {
  background-color: #186699 !important; }

.border-blue {
  border: solid #186699 2px !important; }

.bt-blue {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-blue a {
    color: inherit; }
  .bt-blue:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #186699; }

.text-color-blue-light {
  color: #4696e5 !important; }

.bg-blue-light {
  background-color: #4696e5 !important; }

.border-blue-light {
  border: solid #4696e5 2px !important; }

.bt-blue-light {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-blue-light a {
    color: inherit; }
  .bt-blue-light:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #4696e5; }

.text-color-red {
  color: #bf4e39 !important; }

.bg-red {
  background-color: #bf4e39 !important; }

.border-red {
  border: solid #bf4e39 2px !important; }

.bt-red {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-red a {
    color: inherit; }
  .bt-red:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #bf4e39; }

.text-color-red-light {
  color: #f05f40 !important; }

.bg-red-light {
  background-color: #f05f40 !important; }

.border-red-light {
  border: solid #f05f40 2px !important; }

.bt-red-light {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-red-light a {
    color: inherit; }
  .bt-red-light:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #f05f40; }

.text-color-grey {
  color: #817b79 !important; }

.bg-grey {
  background-color: #817b79 !important; }

.border-grey {
  border: solid #817b79 2px !important; }

.bt-grey {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-grey a {
    color: inherit; }
  .bt-grey:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #817b79; }

.text-color-grey-light {
  color: #fbfbfb !important; }

.bg-grey-light {
  background-color: #fbfbfb !important; }

.border-grey-light {
  border: solid #fbfbfb 2px !important; }

.bt-grey-light {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-grey-light a {
    color: inherit; }
  .bt-grey-light:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #fbfbfb; }

.text-color-green {
  color: #69ad40 !important; }

.bg-green {
  background-color: #69ad40 !important; }

.border-green {
  border: solid #69ad40 2px !important; }

.bt-green {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-green a {
    color: inherit; }
  .bt-green:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #69ad40; }

.text-color-orange {
  color: #f79646 !important; }

.bg-orange {
  background-color: #f79646 !important; }

.border-orange {
  border: solid #f79646 2px !important; }

.bt-orange {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-orange a {
    color: inherit; }
  .bt-orange:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #f79646; }

.text-color-white {
  color: white !important; }

.bg-white {
  background-color: white !important; }

.border-white {
  border: solid white 2px !important; }

.bt-white {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-white a {
    color: inherit; }
  .bt-white:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: white; }

.text-color-blue-lighter {
  color: #eef2fb !important; }

.bg-blue-lighter {
  background-color: #eef2fb !important; }

.border-blue-lighter {
  border: solid #eef2fb 2px !important; }

.bt-blue-lighter {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-blue-lighter a {
    color: inherit; }
  .bt-blue-lighter:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: #eef2fb; }

.text-color-black {
  color: black !important; }

.bg-black {
  background-color: black !important; }

.border-black {
  border: solid black 2px !important; }

.bt-black {
  display: inline-block;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 15px;
  margin-top: 3px;
  background-color: inherit;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.35s ease 0s;
  text-align: center;
  cursor: pointer; }
  .bt-black a {
    color: inherit; }
  .bt-black:hover {
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: black; }

#loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
  background-color: #405363; }
  #loading .uil-ring-css {
    height: 200px !important;
    width: 200px !important;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px); }
    #loading .uil-ring-css > div {
      box-shadow: 0 6px 0 0 #bf4e39; }

#page {
  display: none; }

a {
  outline: 0;
  text-decoration: none; }

.hidden {
  visibility: hidden; }