.htmleaf-container{
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.htmleaf-content {
  font-size: 150%;
  padding: 3em 0;
}

.htmleaf-content h2 {
  margin: 0 0 2em;
  opacity: 0.1;
}

.htmleaf-content p {
  margin: 1em 0;
  padding: 5em 0 0 0;
  font-size: 0.65em;
}
.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }/*light grey*/
.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
.bgcolor-7 { background: #d0d6d6; }/*White tea*/
.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
/* Header */
.htmleaf-header{
  padding: 3em 190px 4em;
  letter-spacing: -1px;
  text-align: center;
  
}
.htmleaf-header h1 {
  font-weight: 600;
  font-size: 2em;
  line-height: 1;
  margin-bottom: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.htmleaf-header h1 span {
  font-family: 'Raleway';
  display: block;
  font-size: 60%;
  font-weight: 400;
  padding: 0.8em 0 0.5em 0;
  color: #c3c8cd;
  text-shadow:none;
}
/*nav*/
.htmleaf-demo a{color: #1d7db1;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
/* Top Navigation Style */
.htmleaf-links {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 1.5em;
  text-align: center;
}

.htmleaf-links::after {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
  background: #dbdbdb;
  content: '';
  -webkit-transform: rotate3d(0,0,1,22.5deg);
  transform: rotate3d(0,0,1,22.5deg);
}

.htmleaf-icon {
  display: inline-block;
  margin: 0.5em;
  padding: 0em 0;
  width: 1.5em;
  text-decoration: none;
}

.htmleaf-icon span {
  display: none;
}

.htmleaf-icon:before {
  margin: 0 5px;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-family: 'icomoon';
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}
/* footer */
.htmleaf-footer{width: 100%;padding-top: 10px;}
.htmleaf-small{font-size: 0.8em;}
.center{text-align: center;}
/* icomoon */
.icon-home:before {
  content: "\e600";
}

.icon-pacman:before {
  content: "\e623";
}

.icon-users2:before {
  content: "\e678";
}

.icon-bug:before {
  content: "\e699";
}

.icon-eye:before {
  content: "\e610";
}

.icon-eye-blocked:before {
  content: "\e611";
}

.icon-eye2:before {
  content: "\e612";
}

.icon-arrow-up-left3:before {
  content: "\e72f";
}

.icon-arrow-up3:before {
  content: "\e730";
}

.icon-arrow-up-right3:before {
  content: "\e731";
}

.icon-arrow-right3:before {
  content: "\e732";
}

.icon-arrow-down-right3:before {
  content: "\e733";
}

.icon-arrow-down3:before {
  content: "\e734";
}

.icon-arrow-down-left3:before {
  content: "\e735";
}

.icon-arrow-left3:before {
  content: "\e736";
}



@media screen and (max-width: 50em) {
  .htmleaf-header {
    padding: 3em 10% 4em;
  }
  .htmleaf-header h1 {
        font-size:2em;
    }
}


@media screen and (max-width: 40em) {
  .htmleaf-header h1 {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 30em) {
    .htmleaf-header h1 {
        font-size:1.2em;
    }
}