.hljs{display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:transparent}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline}
/***************************/
body{
    background: #38235C;
    background: -webkit-linear-gradient(315deg,#633EA5 0,#38235C 100%);
    background: linear-gradient(135deg,#633EA5 0,#38235C 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#633EA5', endColorstr='#38235C', GradientType=1 );
    background-repeat: no-repeat;
    background-position: center;
    color: #B9AED2;
    font-family: 'Open Sans', sans-serif;
    position: relative;
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {color: #fff;
    font-family: 'Open Sans', sans-serif;}
pre{
    background: rgb(62, 52, 92);
    /*border-left: 4px solid #7371B7;*/
    color: #6C7887;
    overflow-x: auto;
    padding: 10px 20px 14px;
}
code{
    font-size: 13px;
}
a:hover{color: rgba(255,255,255,0.5);}
a[class*="btn"]{
    background: #503288 !important;
    box-shadow: 0 1px 4px #301D5C;
}
a[class*="btn"]:hover{
    background: #301D5C !important;
}

.site-header{
    padding: 80px 30px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 70px;
    text-align: center;
}
.site-header h1 .stars{
    position: relative;
    top: 5px;
    display: inline-block;
}
.site-header h1 .stars a{color: #4D3080;}
footer{
    margin-top: 50px;
    padding: 70px 20px;
    background-color: rgba(0,0,0,.1);
}
footer .images{
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 16px;
    border: 10px solid rgba(0,0,0,.2);
}
footer .images img{
    border-radius: 50%;
    border: 6px solid rgba(0,0,0,.1);
    -webkit-filter: hue-rotate(60deg);
    filter: hue-rotate(60deg);

}
.copyrights{
    line-height: 20px;
    padding: 15px 20px;
    background-color: rgba(0,0,0,.2);
    text-align: center;
}
.copyrights a{color: rgba(255,255,255,.4);}
.social i{
    color: rgba(255,255,255,.4);
    width: 50px;
    /*height: 50px;*/
    border-radius: 50%;
    text-align: center;
    line-height: 46px;
    font-size: 32px;

	-webkit-transition:  all 0.4s ease;
	    -moz-transition: all 0.4s ease;
	    -o-transition:  all 0.4s ease;
	    transition:  all 0.4s ease;
}
.social i:hover{
    color: rgba(0,0,0,.2);
}
/******************************************************************************/
.code-editor {
    width: 100%;
    text-align: left;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    margin-top: 16px;
    margin-bottom: 30px;
    -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
    -o-box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
}
.code-editor:before {
  content: attr(title);
  font-size: 11px;
  line-height: 40px;
  text-align: center;
  display: block;
  width: 100%;
  height: 40px;
  background-color: rgb(36, 28, 61);
  border-radius: 8px 8px 0 0;
}

a.control {
  display: inline-block;
  height: 10px;
  width: 10px;
  z-index: 2;
  margin: 0 1px;
  border-radius: 50%;
  background: #442a82;
}

.controls-wrapper {
  position: absolute;
  top: 10px;
  right: 15px;
}

/********************************************************************************/
.codeBox {
    position: relative;
    margin-bottom: 120px;
}

.codeBox {
    height: 430px;
    width: 100%;
    position: relative;
}

.browser {
    cursor: pointer;
    position: relative;;
    overflow: hidden;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
    margin-top: 16px;
    margin-bottom: 30px;
	-webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
	-o-box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
}

.browser .top {
    background: rgb(36, 28, 61);
    position: relative;
    height: 40px;
}

.browser .top span {
    left: 30px;
    top: 50%;
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    background: #442a82;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.browser .top span:before,
.browser .top span:after {
    content: "";
    top: 0;
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    background: #442a82;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.browser .top span:before {
    left: 15px;
}

.browser .top span:after {
    right: 15px;
}

.browser .top a:hover {color: rgb(51, 146, 100);}
.browser .top a {
    left: 70px;
    top: 8px;
    bottom: 8px;
    right: 15px;
    line-height: 24px;
    color: rgba(255,255,255,0.5);
    padding: 0 10px;
    background: #442a82;
    position: absolute;
    font-size: 11px;
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

	white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
}

.browser .output {
    display: block;
    background: #f1f1f1;
    padding: 20px;
    position: relative;
    color: #312b40;
}
.browser .output h1, .browser .output h2,
.browser .output h3, .browser .output h4, .browser .output h5,
.browser .output h6, .browser .output .h1,
.browser .output .h2, .browser .output .h3, .browser .output .h4,
.browser .output .h5, .browser .output .h6
{color: #312b40;}