body {
  background: #fff;
  font-size: 16px;
  line-height: 1.7em;
  font-family: Dosis;
}
a {
  text-decoration: none;
}
/*---------------------------------------------------
    LESS Elements 0.9
  ---------------------------------------------------
    A set of useful LESS mixins
    More info at: http://lesselements.com
  ---------------------------------------------------*/
.container {
  min-height: 2000px;
  width: 80%;
  margin: 0 auto;
}
.mainlogo {
  font-size: 45px;
  font-family: Lobster;
  padding-top: 30px;
  padding-left: 20px;
  font-weight: normal;
  color: #CE4F4F;
  /*color: #0099FF;*/
  text-shadow: 0 1px 0 #aaa,
                   0 2px 0 #fff,
                   0 3px 0 #bbb,
                   0 4px 0 #fff,
                   0 2px 0 #aaa;
  cursor: pointer;
}
.mainlogo a:visited {
  color: #CE4F4F;
}
.footer {
  margin-top: 250px;
  width: 100%;
  height: 400px;
  border-top: 1px solid #ddd;
}
.footer .flogo {
  text-align: right;
  font-size: 26px;
  font-family: Lobster;
  padding-top: 30px;
  padding-right: 20px;
  font-weight: normal;
  color: #CE4F4F;
  /*color: #0099FF;*/
  text-shadow: 0 1px 0 #aaa,
                       0 2px 0 #fff,
                       0 3px 0 #bbb,
                       0 4px 0 #fff,
                       0 2px 0 #aaa;
  cursor: pointer;
}
@media only screen and (max-width: 600px) {
  .footer .flogo {
    text-align: left;
    padding-right: 0;
    padding-left: 20px;
  }
}
.footer .flogo a:visited {
  color: #CE4F4F;
}
.footer .hello {
  text-align: left;
  color: #CE4F4F;
  padding-left: 20px;
  padding-top: 30px;
  font-size: 26px;
  font-family: Lobster;
  text-shadow: 0 1px 0 #aaa,
                       0 2px 0 #fff,
                       0 3px 0 #bbb,
                       0 4px 0 #fff,
                       0 2px 0 #aaa;
}
.footer .hello.email {
  text-shadow: none;
  color: #888;
  font-size: 14px;
  padding-top: 15px;
  font-family: Dosis;
}
.footer .hello.email a:visited {
  color: #888;
}
.footer .hello.email a {
  color: #888;
}
.footer .hello.email a:hover {
  text-decoration: underline;
}
.header-container {
  height: 100px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.header-container .header {
  height: 100px;
  width: 80%;
  border-bottom: 1px solid #ccc;
  background: #fefefe;
  margin: 0 auto;
}
h1.logo {
  font-family: Lobster;
  font-size: 32px;
  font-weight: normal;
  /*text-shadow: 0px 0px 2px #000;*/
}
.top-sep {
  width: 100%;
  height: 150px;
}
.intro .block {
  margin: 0 10px;
  background: #eee;
  padding-bottom: 75px;
}
.intro .block.black {
  background: #111;
}
.intro .block.black .splash h1 {
  color: #eee;
  text-shadow: 0 1px 0 #333,
                       0 2px 0 #000,
                       0 3px 0 #111,
                       0 4px 0 #888,
                       0 2px 0 #666;
}
.intro .block.black .splash h2 {
  color: #888;
}
.intro .block.blue {
  background: #4891DC;
}
.intro .block.blue .splash h1 {
  color: #fff;
  text-shadow: 0 1px 0 #888,
                       0 2px 0 #777,
                       0 3px 0 #666,
                       0 4px 0 #555,
                       0 2px 0 #000;
  text-shadow: none;
}
.intro .block.blue .splash h2 {
  color: #ccc;
}
.intro .block .splash {
  padding: 0px 50px;
  text-align: center;
}
.intro .block .splash h1 {
  font-size: 68px;
  color: #0099FF;
  font-weight: normal;
  text-shadow: 0 1px 0 #eee,
                   0 2px 0 #fff,
                   0 3px 0 #bbb,
                   0 4px 0 #fff,
                   0 2px 0 #aaa;
}
@media only screen and (max-width: 600px) {
  .intro .block .splash h1 {
    font-size: 32px;
    line-height: 30px;
  }
}
@media only screen and (min-width: 601px) and (max-width: 959px) {
  .intro .block .splash h1 {
    font-size: 42px;
  }
}
.intro .block .splash h2 {
  color: #bbb;
  font-size: 18px;
  font-weight: normal;
}
@media only screen and (max-width: 600px) {
  .intro .block .splash h2 {
    font-size: 14px;
  }
}
.intro .block .splash .buttons {
  margin-top: 50px;
}
.main-intro {
  width: 100%;
  text-align: center;
  padding: 150px 0;
}
.main-intro h1 {
  line-height: 34px;
  font-size: 46px;
}
@media only screen and (max-width: 600px) {
  .main-intro h1 {
    font-size: 26px;
  }
}
@media only screen and (min-width: 601px) and (max-width: 959px) {
  .main-intro h1 {
    font-size: 32px;
  }
}
.main-intro p {
  padding: 0 100px;
}
@media only screen and (max-width: 600px) {
  .main-intro p {
    padding: 0;
  }
}
.section {
  width: 100%;
  background: #fff;
}
.section .block {
  text-align: center;
  padding: 20px 40px;
  background: #eee;
  color: #999;
  margin: 10px;
  margin-bottom: 0;
  border: 1px solid #eee;
}
.section .block h2 {
  font-weight: normal;
}
.section .block .icon {
  font-size: 52px;
  margin-top: 20px;
}
.section .block.code {
  text-align: left;
  padding: 10px 40px;
}
.section .block.outline {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  border-color: #ccc;
  background: #fff;
  color: #bbb;
}
.section .block.outline:hover {
  color: #4891DC;
  border-color: #4891DC;
}
.section .block.outline-no-hover {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  border-color: #ccc;
  background: #fff;
  color: #bbb;
}
.section .block.blue {
  background: #4891DC;
  color: #fff;
}
.section .block.black {
  /*background: #F04475;
            border-color: #F04475;
            color: #eee;*/
}
.section .block.green {
  background: #2EB135;
  color: #fff;
}
.section .block.white {
  background: #fff;
  border-color: #fff;
  color: #666;
  text-align: left;
  padding-left: 0;
  padding-top: 100px;
}
.section .block.option {
  padding: 0;
  text-align: left;
  color: #222;
}
.section .block.option .title {
  background: #f5f5f5;
  display: block;
  padding: 20px;
  margin: 5px;
  font-size: 34px;
}
.section .block.option ul {
  list-style: none;
  padding: 5px;
  margin: 0;
  font-family: monospace;
  font-size: 14px;
}
.section .block.option ul li {
  background: #f5f5f5;
  margin: 3px;
  padding: 5px;
}
.section .block.option ul li span {
  font-weight: bold;
  font-style: italic;
  color: #2EB135;
}
.section.expression .block {
  padding: 10px;
}
.section.expression .block .caption {
  position: relative;
  background: #000;
  color: #eee;
  padding: 20px;
  opacity: .9;
  z-index: 1;
}
.tinytip {
  background: #0099FF;
  color: #fff;
  padding: 5px;
  width: 100%;
}
.tinytip p {
  padding: 0;
  margin: 0;
}