@import url(bootstrap.css);
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:400");
.colour-number {
  background: #fff;
  padding: 0 4px;
  color: #000 !important;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  background: #fff; }

.colour-progress-circle {
  background: #fff;
  padding: 0 4px;
  color: #000 !important;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  background: #ebebeb; }

.colour-progress-indicator {
  background: #fff;
  padding: 0 4px;
  color: #000 !important;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  background: #66b8ff; }

.colour-progress-number {
  background: #fff;
  padding: 0 4px;
  color: #000 !important;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  background: #8b8b8b; }

body {
  font-family: Open Sans Condensed, sans-serif;
  font-size: 2.5rem; }

ul {
  list-style: none;
  padding: 0; }

a:hover {
  text-decoration: none; }

.session, .home, .demo, .como-usar, .custom, .vantagens, .browser-support, .rodape {
  padding-bottom: 90px;
  text-align: center;
  color: #fff; }
  .session h3, .home h3, .demo h3, .como-usar h3, .custom h3, .vantagens h3, .browser-support h3, .rodape h3 {
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: -2.2px; }

.home {
  background: #615C85 url(../img/bg.png) fixed;
  padding-bottom: 40px; }
  .home img {
    margin: 75px 0 20px;
    display: inline-block; }
  .home h2 {
    font-size: 3.25rem;
    font-weight: 400; }
  .home .button {
    display: inline-block;
    padding: 12px 60px;
    font-family: Open Sans Condensed, sans-serif;
    font-size: 2.25rem;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 35px;
    background: #fa4b24; }
    .home .button:hover {
      background: #f9370b; }

.box-circle {
  text-align: center;
  padding: 0; }
  @media (max-width: 480px) {
    .box-circle {
      width: 50%; } }
  @media (max-width: 480px) and (max-width: 380px) {
    .box-circle {
      width: 100%; } }

.demo {
  padding-bottom: 0;
  color: #615C85;
  background: url("../img/bg-2.png"); }
  .demo .browser {
    padding: 0;
    background: #fff url(../img/wireframe-browser-content.svg) top center;
    background-size: 100%; }
  .demo .browser-head {
    padding: 0; }
    .demo .browser-head img {
      width: 100%; }
  .demo .browser-content {
    padding-right: 0;
    padding-left: 0; }

.sand-box {
  font-family: monospace;
  font-size: 1.7rem;
  font-weight: 500;
  color: #333;
  padding: 8px 16px;
  border-radius: 9px;
  border: 2px solid #6b6b6b;
  background: #fff; }
  .sand-box .comentario {
    color: #999; }
  .sand-box .propriedade {
    color: #008080; }
  .sand-box .elemento {
    color: #000080; }
  .sand-box .valor {
    color: #d14; }

.como-usar {
  background: #8BB901 url(../img/bg.png) fixed; }

.custom {
  color: #8BB901;
  background: url("../img/bg-2.png"); }

.vantagens {
  color: #fff;
  background: #FB7456;
  background: #FB7456 url(../img/bg.png) fixed; }

.browser-support {
  color: #FB7456;
  background: url("../img/bg-2.png"); }
  .browser-support ul {
    list-style: none;
    padding: 0; }
    .browser-support ul li {
      display: inline-block;
      margin: 50px;
      color: #615C85; }
      .browser-support ul li img {
        width: 64px;
        height: 64px; }
      .browser-support ul li span {
        display: block; }

.rodape {
  font-size: 17px;
  color: #fff;
  background: #353249;
  padding-top: 7px;
  padding-bottom: 7px;
  background-image: url(../img/bg.png) fixed; }
  .rodape a {
    color: inherit;
    border-bottom: 1px dotted #fff; }
    .rodape a:hover {
      border-bottom: 1px dashed #fff; }

/*# sourceMappingURL=layout.css.map */