body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  color: #555;
  min-width: 600px;
  background: #F5F5F5;

}
body * { -webkit-backface-visibility: hidden; }

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 30px;
  margin-bottom: 15px;
}

h1 { margin-bottom: 45px; }
h3, .h3 { font-size: 22px; }

h1, h2, h3 { 
  font-weight: 300;
  color: #000;
}

#content img {
  background-color: #FFF;
  padding: 5px;
  border: solid 1px #E7E6EB;

	  -webkit-box-shadow: 0 0 20px 1px rgba(0,0,0,0.15);
  box-shadow: 				0 2px 10px 0px rgba(0,0,0,0.15);
  border-radius: 2px;
  margin: 10px 0;
}

h2, h3 {
  border-top: dashed 2px #DDD;
  padding-top: 15px;
}

/* -CLASSES */
.no-border { border: none !important; }
.package-desc {
  line-height: 1.8;
  font-family: monospace, monospace;
  font-size: 14px;
}
.example, .example * { color: #999; }
/* /CLASSES */

figcaption>em { color: #999; }

.screencast {
  background-color: #EEE;
  padding: 15px 15px 5px;
  border: solid 1px #CCC;
  -webkit-box-shadow: inset 0 0 20px 1px rgba(0,0,0,0.15);
  box-shadow: inset 0 2px 10px 0px rgba(0,0,0,0.15);
  border-radius: 2px;
  margin: 10px 0;
}

.screencast iframe {
  margin: 0 auto 10px;
  display: block;
  max-width: 100%;
  border: solid 3px #000;
}

.label {
  font-weight: 600;
  border-radius: 2px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
}

strong {
  font-weight: 600;
  color: #444
}

a, a>img {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

a:link, a:visited, a:hover, a:active { text-decoration: none }

a:link, a:visited { color: #4e6ee3 }

a:hover, a:active, a.active { color: #4E6EE3 }

#content a:hover>img { border: solid 1px #4E6EE3; }

#navbar a:link, #navbar a:visited { color: #CBD5FA }

#navbar a:hover, #navbar a:active { color: #FFF }

#navbar a.active { font-weight: 600; color:#FFF }

#navbar .fa { width: 20px }

.header-nav {
  -webkit-box-shadow: 0 2px 15px 0 rgba(0,0,0,0.1);
  box-shadow: 0 2px 15px 0 rgba(0,0,0,0.1);
}

#navbar {
  font-size: 14px;
  background: #4e6ee3;
  display: block;
  position: fixed;
  height: 100%;
  width: 20%;
  left: 0px;
  top: 0px;
  z-index: 1;
  color: #FFF;
  overflow:hidden;
}

#navbar ul {
  margin: 0;
  list-style-type: none;
  padding: 2.5em 0;
}

#navbar ul li a, #navbar ul li h4 {
  display: block;
  padding: 0 20px;
  position: relative;
  line-height: 33px;
}

#navbar ul li ul { padding: 0; }
#navbar li.sub-item { padding-left: 20px; }
#navbar ul li h4 { margin: 15px 0 0 }
#navbar ul li a:hover { background-color: rgba(0, 0, 0, 0.15); }

#navbar ul li a.active:after {
  content: "";
  display: block;
  border: 8px solid #F5F5F5;
  border-bottom-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0);
  border-top-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 9px;
  right: 0;
  z-index: 1;
}

#scroll-top-button {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background-color: rgba(0, 0, 0, 0.25);
  display: none;
  padding: 20px;
  color: #FFF;
  width: 81px;
  height: 60px;
  text-align: center;
  line-height: 20px;
  z-index:100
}

#scroll-top-button.visible { display: block }
#scroll-top-button:hover { background-color: rgba(7, 141, 198, 1); }
#navbar .logo { max-width: 100% }

#content {
  font-size: 14px;
  display: block;
  width: 75%;
  margin-left: 22%;
}

#content > div {
  border: solid 1px #D9D9D9;
  padding: 1em 15px 1.5em;
  margin-bottom: 650px;
  background: #FFF;
  border-radius: 3px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
}

#content h1, #content h2, #content h3, #content h4 {
  line-height: 1.5;
}

.rotated-img {
  -moz-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  margin: 40px;
  
  border-radius: 0;
}

pre strong { font-weight: 800 }
ol li { line-height: 1.9; }

pre {
  border: 1px solid #DDD;
  border-radius: 0;
  padding: 15px;

  -webkit-box-shadow: inset 0 2px 5px 0 rgba(0,0,0,0.05);
  box-shadow: 				inset 0 2px 5px 0 rgba(0,0,0,0.05);
}

a.rate-txt, a.rate-txt *  { color: #4e6ee3 }
a.rate-txt:hover, a.rate-txt:hover * { color: #00C66A }

/* Sections */
#content > #doc_support {
  padding-top: 25px;
	margin-top: 25px;
}

#doc_support img {
  padding:0;
  
  -webkit-box-shadow: 0px 10px 50px 1px rgba(0,0,0,0.25);
  box-shadow: 				0px 10px 50px 1px rgba(0,0,0,0.25);
}

#content > #doc_support,
#content > #doc_epilogue { font-size: 18px; }


/* Action Buttons
---------------------------------*/
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 20%;
  z-index: 50;
  padding: 15px;
  right: 0;
  background-color: rgba(245, 245, 245, 0.75);
  height: 90px;
}

/* Main buttons */
div.buttons { height:90px; }
.buttons a {
	position: relative;
  display: block;
  float: left;
  background-color: #078DC6;
  padding: 20px 30px;
  text-decoration:none;
  color: #FFF;
  font-weight: 300;
  z-index: 0;
}

a.demo {
  margin-right: 20px;
  background-color: #4e6ee3;
}
a.buy { margin-right: 20px }
a.support { background-color: #28bb32;}


div.buttons a:hover { background: #111;}

div.buttons a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: inherit;
    padding: 5px;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    
    -webkit-transition: -webkit-transform 0.35s, opacity 0.35s;
    -moz-transition: -moz-transform 0.35s, opacity 0.35s;
    transition: transform 0.35s, opacity 0.35s;
}

div.buttons a:hover:before {
    -webkit-transform: scale(1.05,1.1);
    -moz-transform: scale(1.05,1.1);
    -ms-transform: scale(1.05,1.1);
    transform: scale(1.05,1.1);
    opacity: 1;
}

li.separator { height: 10px }

a.btn-big {
  font-size: 14px;
  margin: 10px 0;
}
a.btn-big strong { color: inherit; }
a.btn-big:hover { color: #09BC55; }

@media (max-width: 1350px) {
  #navbar {
    font-size: 13px;
    min-width: 250px;
  }

  #content {
    margin-left: 290px;
  }

  .action-buttons {
    left: 280px;
    min-width: 600;
  }
} /* End (max-width: 1350px) */

@media (max-width: 979px) {
  #content {
    margin-left: 290px;
    width: 60%;
    min-width: 380px;
  }
} /* End (max-width: 979px) */