/* Font Icons from WeLoveIconFonts */
@import url(http://weloveiconfonts.com/api/?family=entypo);

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot?yrquyl');
  src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'),
    url('../fonts/icomoon.woff?yrquyl') format('woff'),
    url('../fonts/icomoon.ttf?yrquyl') format('truetype'),
    url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}


[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

.entypo-mail {
  margin-right: 10px;
}

/* ClearFix Hack */

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after { clear: both; }

/* For IE 6/7 only */
.cf { *zoom: 1; }


/* --------------------------
Customized CSS
---------------------------*/

/* html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  background-color: #162E33;
} */

.wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.wrapper > li {
  display: inline;
  margin: 0;
}

/* h2 {
  padding: 45px;
  font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
  font-size: 2.5em;
  font-weight: 300;
  color: #A79C8E;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0px 3px 0px #;
        filter: dropshadow(color=#266B68, offx=0, offy=1);
} */


/* .about {
  margin: 0 auto;
  padding: 0;
  line-height: 1.5em;
  font-size: 1.1em;
  width: 640px;
  color: #FFF;
  text-align: center;
} */
.htmleaf-links {
  width: 100%;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 1.5em;
  text-align: center;
  padding-bottom:15px; 
}
.htmleaf-links a{color: #fff;}
.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;
}
/* Box Styling */

.info-box-green, .info-box-red, .info-box-sky {
  margin: 50px auto;
  padding: 0;
  width:50%;
  -webkit-box-shadow: 0 8px 6px -6px black;
     -moz-box-shadow: 0 8px 6px -6px black;
          box-shadow: 0 8px 6px -6px black;
}

.info-box-red h4 {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: -10px;
}

.info-box-red > .info-content > .text {
 -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px; 
}

.info-box-green h4, .info-box-green > .info-content > .text {
 background-color: #00AB83;
}

.info-box-red h4, .info-box-red > .info-content > .text {
  background-color: #F8ECC9;
}

.info-box-sky h4, .info-box-sky > .info-content > .text {
  background-color: #00A5C3;
}

.info-box-green h4, .info-box-red h4, .info-box-sky h4 {
  padding: 25px;
  font-size: 1.125em;
  font-weight: 400;
  color: #eb9f9f;
}
.info-box-red h4 i {
  color: #A79C8E;
}

.info-box-green > .info-content > .text, .info-box-red > .info-content > .text, .info-box-sky > .info-content > .text {
  padding: 0px;
  font-size: 1em;
  line-height: 1.5em;
  height: 0;
  color: #A79C8E;
  overflow: hidden;
  -webkit-transition:  height 200ms ease;  
     -moz-transition:  height 200ms ease;  
       -o-transition:  height 200ms ease;  
          transition:  height 200ms ease;
}

.info-box-green > .info-content > .text > p, .info-box-red > .info-content > .text > p, .info-box-sky > .info-content > .text > p {
  padding: 20px 20px 60px;
}

.info-box-sky > .info-content > .text {
  background-color: #A79C8E;
  color: #444;
  border-radius: 0;
}
 
.info-box-green > .info-content > .text.open-green, .info-box-red > .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {
  display: block;
  height: auto;
}

.info-box-green > .info-content > span.close-green, .info-box-red > .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {
  -webkit-transform:rotate(135deg);
     -moz-transform:rotate(135deg);
       -o-transform:rotate(135deg);
      -ms-transform:rotate(135deg);
}

.info-box-green span, .info-box-red span, .info-box-sky span {
  display: inline-block;
  float: right;
  position: relative;
  bottom: 60px;
  right: 10px;
  margin: 0;
  padding: 10px;
  color: #A79C8E; /* 旋轉X   */
  font-size: 2em;
  cursor: pointer;
  /*  Rotate '+' to 'X' */
  -webkit-transition: all 600ms ease-in-out; 
     -moz-transition: all 600ms ease-in-out; 
       -o-transition: all 600ms ease-in-out; 
      -ms-transition: all 600ms ease-in-out; 
          transition: all 600ms ease-in-out;
}

.info-box-sky > .info-content > span.close-sky {
  color: #444;
}

.info-box-red span {
  position: relative;
  bottom: 50px;
  right: 10px;
}

/* 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";
}