/* --------------
style
----------------- */

.next-prev-articles {
  width: auto;
  height: auto;
  min-height: 40px;
}
.effect {
}

.g-ads {
  width: 100%;
  height: 250px;
  color: #ccc;
    font-weight: lighter;
  text-align: center;
                vertical-align: middle;
}
.base-post {
  width: 100%;
  height: auto;
  float: left;
  margin-bottom: 40px;
}
.data-notfound {
  width: 100%;
  height: auto;
  padding: 20px;
  margin-top: 40px;
  color: #fff;
  background-color: #f4645f;
  font-size: 18px;
  margin-bottom: 40px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.data-notfound p {
  margin-left: 10%;
}

.warn {
    position: absolute;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#ebook-list {
  margin-top: 40px;
  width: 100%;
  float: left;
  min-height: 30px;
  height: auto;
  padding:20px;

  background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.download-er {
}
.download-er a {
  float: right;
  position: relative;
  color: #38b7ea;
  text-decoration: none;

}

.download-er a:hover,
.download-er a:focus {
  outline: none;
}
.title-eb {
width:80%;
}
.list-e {
  font-weight: lighter;
  height: auto;
  float: left;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border-bottom:1px solid #f5f5f5;
}

.list-e:last-child {
  margin-bottom:0 !important;
border-bottom:1px solid #fff !important;
}
.cl-effect-15 a {
  margin-top: -23px;
  padding: 5px 0;
  color: #999;
  font-size: 14px;
  font-weight: normal;
  text-shadow: none;
}
.category-list li:last-child {
 border-bottom: none !important;
} 

.cl-effect-15 a::before {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding: 5px 0;
  max-width: 0;
  border-bottom: 2px solid #38b7ea;
  color: #38b7ea;
  content: attr(data-hover);
  -webkit-transition: max-width 0.5s;
  -moz-transition: max-width 0.5s;
  transition: max-width 0.5s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
  max-width: 100%;
}
.list-e:hover {
    -webkit-transition: max-width 0.5s;
  -moz-transition: max-width 0.5s;
  transition: max-width 0.5s;
  border-bottom: 1px solid #f0f0f0;
  color:#38b7ea;
}
.post-tutorial {
  width: 29.955%;
  float: left;
  background: #fff;
  height: auto;
  font-size: 13px;
  margin-right: 40px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.post-tutorial:last-child {
  margin-right: 0px;
}



.ads-bottom {
  width: 90%;
  height: 100px;
  margin-left: 4.8%;
  margin-bottom: 20px;
  font-weight: lighter;
  float: left;
  color: #ccc;
  text-align: center;
                vertical-align: middle;
}
.post-tutorial a {
  color: #3b3b3b;
}

.post-tutorial a:hover {
  color: #38b7ea;
}

.effect a {
  position: relative;
  display: inline-block;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}



.effect a:hover,
.effect a:focus {
  outline: none;
}
.contact-gc {
  color: #ddd !important;
}

.contact-gc:hover {
  text-decoration: underline;
}

.cl-effect-11  {
  position: relative;
  z-index: 1;
  width: auto;
  height: 60px;
}

.cl-effect-11 a {
  overflow: hidden;
}

.cl-effect-11 a span {
  display: block;
  padding: 20px;
  background: #263139;

  width: auto;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.post-tutorial img {
  width: 100%;
  height: 160px;
  margin-bottom: 20px;
}

.post-tutorial p {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  
  font-weight: normal !important;
  font-size: 16px;
}

.i-post {
  font-weight: lighter;
  margin-left: 20px;
}

.cl-effect-11 a::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  padding: 20px;
  width: 100%;
  height: 100%;
  background: #38b7ea;
  color: #fff;
  font-weight: 600;
  content: attr(data-hover);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(-25%);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.cl-effect-11 a:hover span,
.cl-effect-11 a:focus span {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%);

}

.cl-effect-11 a:hover::before,
.cl-effect-11 a:focus::before {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  transform: translateX(0%);

}

.cl-effect-10  {
  position: relative;
  z-index: 1;
  width: auto;
  height: 60px;
}

.cl-effect-10 a {
  overflow: hidden;
}

.cl-effect-10 a span {
  display: block;
  padding: 20px;
  background: #263139;

  width: auto;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.cl-effect-10 a::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  padding: 20px;
  width: 100%;
  height: 100%;
  background: #38b7ea;
  color: #fff;
  font-weight: 600;
  content: attr(data-hover);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(25%);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.cl-effect-10 a:hover span,
.cl-effect-10 a:focus span {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%);

}

.cl-effect-10 a:hover::before,
.cl-effect-10 a:focus::before {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  transform: translateX(0%);

}
.bg-warning-search {
  margin-top: 40px;
  font-size: 20px;
}
.bg-warning-search b {
  font-weight: 600;
  font-style: italic;
  font-family: 'Source Sans Pro';
}
.container-5{
  overflow: hidden;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  white-space: nowrap;
}

.some-text {
  font-style: 'Source Sans Pro';
  font-size: 20px;
  height: 80px;
  color: #3b3b3b;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #f3f3f3;
}
.searching-article {
  width: 100%;
  padding: 20px;
  height: 170px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f3f3f3;
}

.img-search {
  height: 100%;
  width: 120px;
  float: left;
  margin-right: 20px;
}
.img-search img {
  width: 120px;
  height: 120px;
}

.text-title {
  font-size: 22px;
  color: #3b3b3b;
  font-weight: lighter;
  margin-bottom: 20px;
}

.text-title a {
  text-decoration: none;
  color: #3b3b3b;
}

.text-title a:hover {
  color: #38b7ea;
}

.text-date-s {
  font-size: 13px;
  margin-right: 10px;
}

.text-cate {
   font-size: 12px;
}

.text-auth {
  margin-top: 10px;
  font-size: 15px;
  color: #3b3b3b;

}



.text-auth a {
  color: #38b7ea;
}

.number-s {
  width: 40px;
  height: 40px;
  margin: auto;
  margin-top: 10px;
  margin-right: 20px;
  float: left;
  text-align: center;
  padding-top: 10px;
  font-family: 'Source sans Pro';
  color: #999;
  font-size: 18px;
}



.container-5 input#email{
  width: 100%;
  height: 50px;
  background: #fff;
  border: none;
  font-size: 10pt;
    margin-left: auto;
  margin-right: auto;
  color: #666;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  outline: none;
  border-radius: 5px;
}

.container-5 input#email::-webkit-input-placeholder {
   color: #65737e;
}

.container-5 input#email:-moz-placeholder { /* Firefox 18- */
   color: #65737e;
}

.container-5 input#email::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;
}

.container-5 input#email:-ms-input-placeholder {
   color: #65737e;
}

.container-5 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width:96px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

.container-5:hover button.icon, .container-5:active button.icon, .container-5:focus button.icon{
  outline: none;
  opacity: 1;
  margin-left: -100px;
}

@media screen and (max-width : 360px) {


}

.container-5:hover button.icon:hover{
  background: #ededed;
}

.container-4{
  overflow: hidden;
  width: 100%;
  vertical-align: middle;
  white-space: nowrap;
}

.container-4 input#search{
  width: 100%;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  outline: none;
  border-radius: 5px;
}

.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;
}

.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;
}

.container-4 input#search:-ms-input-placeholder {
   color: #65737e;
}

.container-4 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
  outline: none;
  opacity: 1;
  margin-left: -50px;
}

.container-4:hover button.icon:hover{
  background: white;
}


.content-body {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.outer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.outer:before,
.outer:after {
  content: "";
  display: table;
}
.outer:after {
  clear: both;
}
@media screen and (max-width: 559px) {
  .outer {
    padding: 10px;
  }
}

@media screen and (max-width: 1233px) {
  .post-tutorial {
    width: 29.8222%;
  }
}

@media screen and (max-width: 1178px) {
  .post-tutorial {
    width: 30.6666%;
    margin-right: 30px;
  }
}

@media screen and (max-width: 1165px) {
  .post-tutorial {
    width: 30.5555%;
  }
}

@media screen and (max-width: 1120px) {
  .post-tutorial {
    width: 30.4444%;
  }
}

@media screen and (max-width: 1079px) {
  .post-tutorial {
    width: 30.33333%;
  }
}

@media screen and (max-width: 1042px) {
  .post-tutorial {
    width: 30.2222%;
  }
}

@media screen and (max-width: 1006px) {
  .post-tutorial {
    width: 30.1111%;
  }
}

@media screen and (max-width: 973px) {
  .post-tutorial {
    width: 30%;
  }
}

@media screen and (max-width: 943px) {
  .post-tutorial {
    width: 29.888%;
  }
}

@media screen and (max-width: 914px) {
  .post-tutorial {
    width: 29.77777%;
  }
}
@media screen and (max-width: 887px) {
  .post-tutorial {
    width: 29.6666%;
  }
}
@media screen and (max-width: 862px) {
  .post-tutorial {
    width: 29.5555%;
  }
}

@media screen and (max-width: 839px) {
  .post-tutorial {
    width: 29.4444%;
  }
}

@media screen and (max-width: 817px) {
  .post-tutorial {
    width: 29.3333%;
  }
}

@media screen and (max-width: 799px) {
  .post-tutorial {
    width: 31.2222%;
    margin-right: 22px;
  }
}
@media screen and (max-width: 776px) {
  .post-tutorial {
    width: 31.111%;
  }
}

@media screen and (max-width: 716px) {
  .post-tutorial {
    width: 31%;
  }
}
@media screen and (max-width: 685px) {
  .post-tutorial {
    width: 30.8888%;
  }
}
@media screen and (max-width: 655px) {
  .post-tutorial {
    width: 30.7777%;
  }
}
@media screen and (max-width: 629px) {
  .post-tutorial {
    width: 30.6666%;
  }
}
@media screen and (max-width: 607px) {
  .post-tutorial {
    width: 30.555%;
  }
}
@media screen and (max-width: 584px) {
  .post-tutorial {
    width: 31.666%;
    margin-right: 12px;
  }
}

@media screen and (max-width: 515px) {
  .post-tutorial {
    width: 31.4444%;
  }
  .post-tutorial img {
    height: 140px;
  }
}

@media screen and (max-width: 470px) {
  .post-tutorial:first-child {
    margin-left: 10px;
    margin-right: 10px;
  }
  .post-tutorial {
    width: 45.2222%;
    margin-bottom: 10px;
  }

  .post-tutorial:last-child {
    margin-left: 26%;
  }
}

@media screen and (max-width: 370px) {
  .post-tutorial:first-child {
    margin-left: 0;
    width: 100% !important;
  }
  .post-tutorial {
    width: 100% !important;
    margin-bottom: 20px;
  }

  .post-tutorial:last-child {
    margin-left: 0;
  }
}

.left,
.alignleft {
  float: left;
}
.right,
.alignright {
  float: right;
}
.clear {
  clear: both;
}
.logo {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
#container {
  position: relative;
}
#container > .outer {
  margin-bottom: 30px;
}
@media screen and (min-width: 1200px) {
  #main {
    display: inline;
    float: left;
    width: 67%;
    margin: 0 0.7692307692308%;
  }
}

@media screen and (max-width: 1240px) {
  .btn-3d {
    padding: 15px 10px 15px 20px;
  }
}

@media screen and (max-width: 1122px) {
  .btn-3d {
    padding: 15px 5px 15px 20px;
  }
}

@media screen and (max-width: 1183px) {
  .foot-box {
    height: 300px !important;
  }
}

@media screen and (max-width: 1078px) {
  .foot-box {
    height: 320px !important;
  }
}



@media screen and (max-width: 963px) {
  .btn-3d {
    padding: 15px 0px 15px 60px !important;
  }
}

@media screen and (max-width: 1076px) {
  .btn-3d {
    padding: 15px 3px 15px 35px;
  }
}

@media screen and (max-width: 890px) {
  .btn-3d {
    padding: 15px 0 15px 40px;
  }
}

@media screen and (max-width: 777px) {
  .btn-3d {
    padding: 15px 0 15px 50px;
  }
}

@media screen and (max-width: 600px) {
  .img-search {
    width: 80px;
    height: 100%;
  }
  .img-search img {
    width: 80px;
    height: 80px;
  }
   .next-prev-articles {

  min-height: 60px;
  }
  .searching-article {
    height: 150px;
    margin-bottom: -10px;
  }
  .number-s {
    height: 100%;
  }
}
@media screen and (max-width: 376px) {


 .next-prev-articles {

  min-height: 100px;
  }
  }
@media screen and (max-width: 480px) {
  .img-search {
    width: 80px;
    height: 100%;
    min-height: 170px;
    float: left;
  }
  .img-search img {
    width: 80px;
    height: 80px;
  }

  .searching-article {
    height: auto;
    min-height: 170px;
    margin-bottom: 0;
  }
  .number-s {
    display: none;
  }
  }
@media screen and (min-width: 800px) and (max-width: 1199px) {
  #main {
    display: inline;
    float: left;
    width: 67.6923076923077%;
    margin: 0 0.7692307692308%;
  }
}
.archive-article-header a,
.layout-wrap-inner.tag-cloud a,
.archive-article-header a:visited,
.layout-wrap-inner.tag-cloud a:visited {
  color: #565a5f;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  transition: 0.2s ease;
}
.archive-article-header a:hover,
.layout-wrap-inner.tag-cloud a:hover,
.archive-article-header a:visited:hover,
.layout-wrap-inner.tag-cloud a:visited:hover {
  color: #38b7ea;
}
.article-date,
.article-category-link,
.archive-year,
.widget-title {
  text-decoration: none;
  text-transform: uppercase;
  color: #999;
  font-size: 13px;
  line-height: 1em;
}
.widget-title a{
  text-decoration: none;
  text-transform: uppercase;
  color: #999;
  font-size: 13px;
  line-height: 1em;
}
.widget-title1 {
  text-decoration: none;
  text-transform: uppercase;
  color: #999;
  font-size: 13px;
  line-height: 1em;
  margin-top:38px;

  margin-bottom:-22px;
}
.widget-title1 a{
  text-decoration: none;
  text-transform: uppercase;
  color: #666;

  font-family: "Source Sans Pro";
  font-size: 14px;
  font-weight: 300 !important;

  line-height: 1em;
}

.no-bold {
  font-weight: 100;
}
.widget-title1 a:hover {
  color: #38b7ea;
}

.widget-title1 h2 {

}

#header,
#profile .inner,
.article-inner,
#comments,
.archive-article,
#toTop {
  background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.article-entry h1,
.widget h1 {
  font-size: 2em;
}
.article-entry h2,
.widget h2 {
  font-size: 1.5em;
}
.article-entry h3,
.widget h3 {
  font-size: 1.3em;
}
.article-entry h4,
.widget h4 {
  font-size: 1.2em;
}
.article-entry h5,
.widget h5 {
  font-size: 1em;
}
.article-entry h6,
.widget h6 {
  font-size: 1em;
  color: #999;
}
.article-entry hr,
.widget hr {
  border: 1px dashed #eceff2;
}
.article-entry strong,
.widget strong {
  font-weight: bold;
}
.article-entry em,
.widget em,
.article-entry cite,
.widget cite {
  font-style: italic;
}
.article-entry sup,
.widget sup,
.article-entry sub,
.widget sub {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.article-entry sup,
.widget sup {
  top: -0.5em;
}
.article-entry sub,
.widget sub {
  bottom: -0.2em;
}
.article-entry small,
.widget small {
  font-size: 0.85em;
}
.article-entry acronym,
.widget acronym,
.article-entry abbr,
.widget abbr {
  border-bottom: 1px dotted;
}
.article-entry ul,
.widget ul,
.article-entry ol,
.widget ol,
.article-entry dl,
.widget dl {
  margin: 0 20px;
  line-height: 1.6em;
}
.article-entry ul ul,
.widget ul ul,
.article-entry ol ul,
.widget ol ul,
.article-entry ul ol,
.widget ul ol,
.article-entry ol ol,
.widget ol ol {
  margin-top: 0;
  margin-bottom: 0;
}
.article-entry ul,
.widget ul {
  list-style: disc;
}
.article-entry ol,
.widget ol {
  list-style: decimal;
}
.article-entry dt,
.widget dt {
  font-weight: bold;
}
#header {
  background: #fff;
  position: relative;
}
#header a,
#header a:visited {
  white-space: nowrap;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  transition: 0.2s ease;
  color: #565a5f;
}
#header a:hover {
  color: #38b7ea;
}
.header-inner #logo,
#main-nav,
#sub-nav,
#search-form-wrap {
  height: 40px;
  line-height: 40px;
  padding: 12px 15px;
}
.header-inner #logo,
#main-nav {
  float: left;
}
#sub-nav,
#search-form-wrap {
  float: right;
}
.header-inner {
  height: 100%;
  position: relative;
}
.header-inner #logo {
  display: inline-block;
}
.header-inner #logo .logo {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 5px;
}
.header-inner #logo .site-title {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  font-weight: 600;
}
#header-title {
  text-align: center;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;
}
.header-sub {
  border-top: 1px solid #eceff2;
}
.header-sub ul {
  margin: 0 15px;
}
.header-sub ul:before,
.header-sub ul:after {
  content: "";
  display: table;
}
.header-sub ul:after {
  clear: both;
}
.header-sub ul li {
  float: left;
  margin: 0 10px;
}
.header-sub ul li a {
  display: inline-block;
  line-height: 48px;
}
.header-sub .main-nav-link {
  display: inline-block;
  line-height: 48px;
}
@media screen and (min-width: 560px) and (max-width: 799px) {
  #header-sub {
    display: none;
  }
}
@media screen and (max-width: 559px) {
  #header-sub {
    display: none;
  }
  .bg-warning-search {
    margin-top: 20px;
  }
}
@media screen and (min-width: 560px) and (max-width: 799px) {
  #main-nav {
    display: none;
  }

}
@media screen and (max-width: 559px) {
  #main-nav {
    display: none;
  }
    .widget-title1 {
    margin-top: 10px !important;
    margin-bottom: 18px !important;
}
}

@media screen and (max-width: 789px) {
  .widget-title1 {
    margin-top: 25px;
  }
}
@media screen and (min-width: 800px) and (max-width: 1199px) {
  #main-nav-mobile {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  #main-nav-mobile {
    display: none;
  }
}
.nav-icon,
.main-nav-link {
  float: left;
  display: block;
  padding: 0 15px;
}
.nav-icon {
  text-align: center;
  font-size: 14px;
  width: 14px;
  height: 14px;
  position: relative;
  cursor: pointer;
  height: 40px !important;
  line-height: 40px !important;
}
.main-nav-link {
  font-weight: 300;
}
@media screen and (min-width: 1200px) {
  #sub-nav {
    display: none;
  }
}
#sub-nav #profile-nav #profile-anchor {
  display: block;
  height: 40px;
  line-height: 40px;
}
#sub-nav #profile-nav #profile-anchor:before,
#sub-nav #profile-nav #profile-anchor:after {
  content: "";
  display: table;
}
#sub-nav #profile-nav #profile-anchor:after {
  clear: both;
}
#sub-nav #profile-nav .avatar,
#sub-nav #profile-nav .fa {
  float: left;
}
#sub-nav #profile-nav .avatar {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}
#sub-nav #profile-nav .fa {
  line-height: 40px;
}
@media screen and (max-width: 559px) {
  #search-form-wrap {
    display: none;
  }
}
#search-form-wrap .search-form {
  position: relative;
}
#search-form-wrap .search-form .search-form-input {
  width: 100%;
  height: 40px;
  padding: 0 30px 0 15px;
  line-height: 40px;
  -webkit-border-radius: 21px;
  border-radius: 21px;
}
#search-form-wrap .search-form .search-form-input::-webkit-search-results-decoration,
#search-form-wrap .search-form .search-form-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
#search-form-wrap .search-form .search-form-submit {
  top: 50%;
  right: 15px;
  border: none;
  cursor: pointer;
  margin-top: -7px;
  background: none;
  position: absolute;
  font: 13px font-icon;
  font-family: 'FontAwesome';
}
#search-form-wrap .search-form .search-form-submit:before {
  content: '\f002';
}
#search-form-wrap .search-form .search-form-submit:hover,
#search-form-wrap .search-form .search-form-submit:focus {
  color: #777;
}
.search-form-input,
.search-form-input.st-ui-search-input,
.search-form-input.st-default-search-input {
  -webkit-appearance: textarea;
  -webkit-appearance: textarea;
  -moz-appearance: textarea;
  appearance: textarea;
  padding: 0;
  width: 200px;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #565a5f;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  transition: 0.2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: auto !important;
  line-height: 1.6em;
  outline: none !important;
  background: none !important;
  font: 14px "open sans", "Helvetica Neue", "Microsoft Yahei", Helvetica, Arial, sans-serif;
  border: 1px solid #eceff2 !important;
}
.search-form-input:focus,
.search-form-input.st-ui-search-input:focus,
.search-form-input.st-default-search-input:focus {
  border-color: #38b7ea !important;
}
.search-form-input::-webkit-search-results-decoration,
.search-form-input.st-ui-search-input::-webkit-search-results-decoration,
.search-form-input.st-default-search-input::-webkit-search-results-decoration,
.search-form-input::-webkit-search-cancel-button,
.search-form-input.st-ui-search-input::-webkit-search-cancel-button,
.search-form-input.st-default-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
#main-nav-mobile {
  overflow-y: hidden;
  overflow-x: auto;
}
#main-nav-mobile .menu {
  margin: 0;
  height: 48px;
}
#main-nav-mobile .menu:before,
#main-nav-mobile .menu:after {
  content: "";
  display: table;
}
#main-nav-mobile .menu:after {
  clear: both;
}
#main-nav-mobile .menu .search-form-input {
  display: none;
  padding: 0 10px;
  margin-right: 15px;
  height: 32px;
  line-height: 32px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
}
@media screen and (max-width: 559px) {
  #main-nav-mobile .menu .search-form-input {
    display: block;
  }
}
#main-nav-mobile .menu .search-form-input::-webkit-search-results-decoration,
#main-nav-mobile .menu .search-form-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.bio {
  text-align: center;
}
#profile .inner .bio h2 {
  font-size: 1.3em;
  font-weight: bold;
  margin-top: 15px;
}
#profile .inner .bio p {
  margin: 5px 20px 10px 20px;
  text-align: justify;
  max-width: 300px;
  line-height: 1.5em;
}
.profile-block {
  padding: 15px 20px;
  border-bottom: 1px solid #eceff2;
}
.profile-block:last-child {
  border-bottom: none;
}
#profile {
  display: inline;
  float: left;
  width: 21.5384615384615%;
  margin: 0 0.7692307692308%;
  display: none;
}
@media screen and (min-width: 1200px) {
  #profile {
    display: block;
  }
}
#profile .inner {
  margin-top: 40px;
  background: #fff;
}
#profile .inner .base-info #avatar {
  display: block;
  margin: 10px auto 20px;
  width: 128px;
  height: 128px;
}
#profile .inner .base-info #name,
#profile .inner .base-info #title,
#profile .inner .base-info #location {
  display: block;
  text-align: center;
}
#profile .inner .base-info #name {
  font-size: 20px;
  font-weight: 600;
}
#profile .inner .base-info #location {
  font-size: 12px;
  margin-top: 5px;
  color: #9a9ea3;
}
#profile .inner .base-info #location .fa {
  margin-right: 5px;
}
#profile .inner .base-info #follow {
  color: #fff;
  width: 150px;
  height: 40px;
  display: block;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  margin: 20px auto 10px;
  background: #38b7ea;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  transition: 0.2s ease;
}
#profile .inner .base-info #follow:hover {
  background: #49c8fb;
}
#profile .inner .article-info {
  padding: 0px;
}
#profile .inner .article-info:before,
#profile .inner .article-info:after {
  content: "";
  display: table;
}
#profile .inner .article-info:after {
  clear: both;
}
#profile .inner .article-info .article-info-block {
  width: 50%;
  float: left;
  padding: 20px 15px;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 20px;
}
#profile .inner .article-info .article-info-block span {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
}
#profile .inner .article-info .article-info-block:first-child {
  border-right: 1px solid #eceff2;
}
#profile .inner .contact-info .contact-list {
  width: 100%;
}
#profile .inner .contact-info .contact-list td {
  text-align: center;
  font-size: 24px;
}
#profile .inner .contact-info .contact-list td a {
  position: relative;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  transition: 0.2s ease;
  color: #898d92;
}
#profile .inner .contact-info .contact-list td a:hover {
  color: #565a5f;
}
#profile .inner .contact-info .contact-list td a:hover:after {
  right: -50%;
  top: -41px;
  color: #fff;
  background: #333;
  font-size: 14px;
  content: attr(title);
  display: block;
  padding: 5px 15px;
  position: absolute;
  white-space: nowrap;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.2);
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  z-index: 1;
}
#profile .inner .contact-info .contact-list td a:hover:before {
  top: -12px;
  right: 8px;
  border: solid;
  border-color: #333 transparent;
  border-width: 5px 5px 0 5px;
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
}
#profile.card {
  top: 50px;
  right: 20px;
  z-index: 999;
  display: block;
  min-width: 280px;
  position: absolute;
}
#profile.card .profile-inner {
  position: relative;
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#profile.card .profile-inner:before,
#profile.card .profile-inner:after {
  z-index: 1;
  content: '';
  top: -20px;
  right: 10px;
  position: absolute;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}
#profile.card .profile-inner:after {
  z-index: 0;
  border-color: transparent transparent #dbdee1 transparent;
}
.article {
  margin: 40px 0;
}
.article-inner {
  overflow: hidden;
}
.article-banner {
  width: 300px;
  max-height: 240px;
  float: left;
  height: auto;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 0;
}
.article-meta:before,
.article-meta:after {
  content: "";
  display: table;
}
.article-meta:after {
  clear: both;
}
.article-meta > div {
  margin-bottom: 5px;
}
.article-meta .article-date,
.article-meta .article-category {
  margin-right: 10px;
  color: #9a9ea3;
}
.article-meta a {
  color: #9a9ea3;
}
.article-meta a:hover {
  color: #38b7ea;
}
.article-date {
  float: left;
}
.article-category {
  float: left;
  line-height: 1em;
  font-size: 13px;
  color: #565a5f;
}
.article-category .fa-angle-right {
  margin: 0 5px;
}
.article-header {
  padding: 20px 20px 0;
}
.article-header .article-title {
  display: block;
  margin-bottom: 14px;
}
.article-title {
  text-decoration: none;
  font-size: 2em;
  color: #33414a;
  line-height: 1.1em;

  font-weight: lighter;
  font-family: "Source Sans Pro";
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -ms-transition: color 0.2s;
  transition: color 0.2s;
}
a.article-title:visited {
  color: #565a5f;
}
a.article-title:hover {
  color: #38b7ea;
}
.article-entry {
  color: #565a5f;
  font-family: 'Source Sans Pro';
  padding: 0 20px;
  line-height: 1.6em;
}
.article-entry:before,
.article-entry:after {
  content: "";
  display: table;
}
.article-entry:after {
  clear: both;
}
.article-entry p,
.article-entry table {
  line-height: 1.6em;
  margin: 1.6em 0;
  font-family: 'Source Sans Pro';
}
.article-entry h1,
.article-entry h2,
.article-entry h3,
.article-entry h4,
.article-entry h5,
.article-entry h6 {
  font-weight: bold;
}
.article-entry h1,
.article-entry h2,
.article-entry h3,
.article-entry h4,
.article-entry h5,
.article-entry h6 {
  line-height: 1.1em;
  margin: 1.1em 0;
}
.article-entry a {
  color: #38b7ea;
  text-decoration: none;
}
.article-entry a:hover {
  text-decoration: underline;
}
.article-entry ul,
.article-entry ol,
.article-entry dl {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}
.article-entry img,
.article-entry video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
  box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
}
.article-entry iframe {
  border: none;
}
.article-entry table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.article-entry th {
  font-weight: bold;
  border-bottom: 3px solid #eceff2;
  padding-bottom: 0.5em;
}
.article-entry td {
  border-bottom: 1px solid #eceff2;
  padding: 10px 0;
}
.article-entry blockquote {
  position: relative;
  font-family: Georgia, "Times New Roman", "Microsoft Yahei", serif;
  font-size: 1.1em;
  margin: 0 -20px;
  padding: 10px 20px 10px 54px;
  background: #fcfcfc;
  border-left: 4px solid #eee;
}
.article-entry blockquote:before {
  top: 20px;
  left: 10px;
  content: "\f10d";
  color: #e2e2e2;
  font-size: 32px;
  font-family: FontAwesome;
  text-align: center;
  position: absolute;
}
.article-entry blockquote footer {
  font-size: 14px;
  margin: 1.6em 0;
  font-family: "open sans", "Helvetica Neue", "Microsoft Yahei", Helvetica, Arial, sans-serif;
}
.article-entry blockquote footer cite:before {
  content: "—";
  padding: 0 0.5em;
}
.article-entry .pullquote {
  text-align: left;
  width: 45%;
  margin: 0;
}
.article-entry .pullquote.left {
  margin-left: 0.5em;
  margin-right: 1em;
}
.article-entry .pullquote.right {
  margin-right: 0.5em;
  margin-left: 1em;
}
.article-entry .caption {
  color: #999;
  display: block;
  font-size: 0.9em;
  margin-top: 0.5em;
  position: relative;
  text-align: center;
}
.article-entry .video-container {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}
.article-entry .video-container iframe,
.article-entry .video-container object,
.article-entry .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.article-more-link a {
  display: inline-block;
  line-height: 1em;
  height: 40px;
  padding: 10px 15px;
  -webkit-border-radius: 15px;
  float: right;
  margin-bottom: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #ddd;
  color: #999;
  text-shadow: 0 1px #fff;
  text-decoration: none;
  vertical-align: right
}
.article-more-link a:hover {
  color: #38b7ea;
  text-decoration: none;
  border: 1px solid #38b7ea;
    -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}
.article-footer {
  font-size: 0.85em;
  line-height: 1.6em;
  border-top: 1px solid #eceff2;
  padding-top: 1.6em;
  margin: 0 20px 20px;
}
.article-footer:before,
.article-footer:after {
  content: "";
  display: table;
}
.article-footer:after {
  clear: both;
}
.article-footer a {
  color: #999;
  text-decoration: none;
}
.article-footer a:hover {
  color: #565a5f;
}
.article-tag-list-item {
  float: left;
  margin-right: 10px;
}
.article-tag-list-link:before {
  content: "#";
}
.article-comment-link {
  float: right;
}
.article-comment-link:before {
  content: "\f075";
  font-family: FontAwesome;
  padding-right: 8px;
}
.more {
  content: "\f075";
  font-family: FontAwesome;
  padding-right: 8px;
}

.article-share-link {
  cursor: pointer;
  float: right;
  margin-left: 20px;
}
.article-share-link:before {
  font-family: FontAwesome;
  padding-right: 6px;
}
#article-nav {
  position: relative;
}
#article-nav:before,
#article-nav:after {
  content: "";
  display: table;
}
#article-nav:after {
  clear: both;
}
@media screen and (min-width: 1200px) {
  #article-nav {
    margin: 40px 0;
  }
  #article-nav:before {
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -4px;
    content: "";
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #787c81;
  }
}
.article-nav-link-wrap {
  text-decoration: none;
  color: #999;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 40px;
  text-align: center;
  display: block;
}
.article-nav-link-wrap:hover {
  color: #565a5f;
}
@media screen and (min-width: 1200px) {
  .article-nav-link-wrap {
    width: 50%;
    margin-top: 0;
  }
}
@media screen and (min-width: 1200px) {
  #article-nav-newer {
    float: left;
    text-align: right;
    padding-right: 20px;
  }
}
@media screen and (min-width: 1200px) {
  #article-nav-older {
    float: right;
    text-align: left;
    padding-left: 20px;
  }
}
.article-nav-caption {
  letter-spacing: 2px;
  line-height: 1em;
  font-weight: bold;
  color: #565a5f;
  text-transform: uppercase;
}
#article-nav-newer .article-nav-caption {
  margin-right: -2px;
}
.article-nav-title {
  font-size: 0.85em;
  line-height: 1.6em;
  margin-top: 0.5em;
}
.article-share-box {
  position: absolute;
  display: none;
  background: #fff;
  -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-left: -145px;
  overflow: hidden;
  z-index: 1;
}
.article-share-box.on {
  display: block;
}
.article-share-input {
  width: 100%;
  background: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font: 14px "open sans", "Helvetica Neue", "Microsoft Yahei", Helvetica, Arial, sans-serif;
  padding: 0 15px;
  color: #565a5f;
  outline: none;
  border: 1px solid #eceff2;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  height: 36px;
  line-height: 36px;
}
.article-share-links {
  background: #f5f8f9;
}
.article-share-links:before,
.article-share-links:after {
  content: "";
  display: table;
}
.article-share-links:after {
  clear: both;
}
.article-share-twitter,
.article-share-facebook,
.article-share-pinterest,
.article-share-google {
  width: 50px;
  height: 36px;
  display: block;
  float: left;
  position: relative;
  color: #999;
  text-shadow: 0 1px #fff;
}
.article-share-twitter:before,
.article-share-facebook:before,
.article-share-pinterest:before,
.article-share-google:before {
  font-size: 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  text-align: center;
}
.article-share-twitter:hover,
.article-share-facebook:hover,
.article-share-pinterest:hover,
.article-share-google:hover {
  color: #fff;
}
.article-share-twitter:hover {
  background: #00aced;
  text-shadow: 0 1px #008abe;
}
.article-share-facebook:hover {
  background: #3b5998;
  text-shadow: 0 1px #2f477a;
}
.article-share-pinterest:hover {
  background: #cb2027;
  text-shadow: 0 1px #a21a1f;
}
.article-share-google:hover {
  background: #dd4b39;
  text-shadow: 0 1px #be3221;
}
.article-gallery {
  background: #000;
  position: relative;
}
.article-gallery-photos {
  position: relative;
  overflow: hidden;
}
.article-gallery-img {
  display: none;
  max-width: 100%;
}
.article-gallery-img:first-child {
  display: block;
}
.article-gallery-img.loaded {
  position: absolute;
  display: block;
}
.article-gallery-img img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.toc-article {
  background: #f9f9f9;
  margin: 2em 0 0 0.2em;
  padding: 1em;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}
.toc-article .toc-title {
  font-size: 120%;
}
.toc-article strong {
  padding: 0.3em 1;
}
ol.toc {
  width: 100%;
  margin: 1em 2em 0 0;
}
#toc {
  line-height: 1em;
  font-size: 0.8em;
  float: right;
}
#toc .toc {
  padding: 0;
}
#toc .toc li {
  list-style-type: none;
}
#toc .toc-child {
  padding-left: 0em;
}
#toc.toc-aside {
  display: none;
  width: 13%;
  position: fixed;
  right: 2%;
  top: 320px;
  overflow: hidden;
  line-height: 1.5em;
  font-size: 1em;
  color: color-heading;
  opacity: 0.6;
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -ms-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}
#toc.toc-aside strong {
  padding: 0.3em 0;
  color: color-font;
}
#toc.toc-aside:hover {
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  opacity: 1;
}
#toc.toc-aside a {
  -webkit-transition: color 1s ease-out;
  -moz-transition: color 1s ease-out;
  -ms-transition: color 1s ease-out;
  transition: color 1s ease-out;
}
#toc.toc-aside a:hover {
  color: color-theme;
  -webkit-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  -ms-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}
#comments {
  padding: 20px;
  margin: 40px 0;
}
#comments a {
  color: #38b7ea;
}
.archives:before,
.archives:after {
  content: "";
  display: table;
}
.archives:after {
  clear: both;
}
.archives .article:first-child {
  margin: 20px 0;
}
.archive-year-wrap,
.archive-category-wrap,
.archive-tag-wrap,
.layout-title {
  font-size: 1.4em;
  margin: 40px 0 20px 0;
}
@media screen and (max-width: 559px) {
  .archive-year-wrap,
  .archive-category-wrap,
  .archive-tag-wrap,
  .layout-title {
    padding: 0 15px;
    font-size: 1.2em;
  }
}
.archive-year-wrap .fa,
.archive-category-wrap .fa,
.archive-tag-wrap .fa,
.layout-title .fa {
  margin-right: 3px;
}
.archive-year-wrap .archive-year,
.archive-category-wrap .archive-year,
.archive-tag-wrap .archive-year,
.layout-title .archive-year {
  color: #565a5f;
}
.archive-year-wrap .archive-year:hover,
.archive-category-wrap .archive-year:hover,
.archive-tag-wrap .archive-year:hover,
.layout-title .archive-year:hover {
  color: #38b7ea;
}
@media screen and (max-width: 559px) {
  .layout-wrap-inner {
    padding: 0 15px;
  }
}
.archive-article {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
  break-inside: avoid-column;
  padding: 0;
  margin-bottom: 15px;
}
.archive-article:before,
.archive-article:after {
  content: "";
  display: table;
}
.archive-article:after {
  clear: both;
}
.archive-article-thumbnail {
  float: left;
  margin-right: 10px;
}
.archive-article-thumbnail .thumbnail {
  width: 160px;
  height: 90px;
  display: block;
  position: relative;
  overflow: hidden;
}
.archive-article-thumbnail .thumbnail span {
  width: 100%;
  height: 100%;
  display: block;
}
.archive-article-thumbnail .thumbnail .thumbnail-image {
  position: absolute;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;
}
.archive-article-thumbnail .thumbnail .thumbnail-none {
  background-image: url("images/thumb-default-small.png");
}
@media screen and (max-width: 559px) {
  .archive-article-thumbnail .thumbnail {
    width: 120px;
    height: 67.5px;
  }
}
@media screen and (max-width: 559px) {
  #ebook-list {
     margin-top:0px !important; 
  }

  .title-eb {
 font-size:14px;
}
}
.archive-article-header {
  padding: 10px;
}
.archive-article-title {
  font-size: 1.2em;
  line-height: 1.2em;
}
@media screen and (max-width: 559px) {
  .archive-article-title {
    font-size: 1em;
    line-height: 1em;
    height: 1em;
    overflow: hidden;
    display: block;
  }
}
.archive-article-date {
  display: block;
  margin-top: 8px;
}
.layout-wrap-inner.list-categories ul {
  margin-left: 15px;
  list-style: none;
}
.layout-wrap-inner.list-categories ul li,
.layout-wrap-inner.list-categories ul .category-list-child {
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid border-color;
}
.layout-wrap-inner.list-categories ul li a,
.layout-wrap-inner.list-categories ul .category-list-child a {
  color: #777;
}
.layout-wrap-inner.list-categories ul ul,
.layout-wrap-inner.list-categories ul ol {
  list-style: none;
}
.layout-wrap-inner.list-categories ul ul li,
.layout-wrap-inner.list-categories ul ol li {
  border: none;
}
.layout-wrap-inner.list-categories ul ul li:last-child,
.layout-wrap-inner.list-categories ul ol li:last-child {
  padding-bottom: 0px;
}
.layout-wrap-inner.list-categories li a:before {
  color: #ccc;
  content: "\f0da";
  font-size: 12px;
  margin-right: 6px;
  font-family: FontAwesome;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  transition: 0.2s ease;
}
.layout-wrap-inner.list-categories li a:hover:before {
  color: #333;
}
.layout-wrap-inner.tag-cloud a {
  margin-right: 8px;
}
.layout-wrap-inner.tag-cloud a:before {
  content: '#';
}
#page-nav {
  margin: 40px auto;
  text-align: center;
  color: #999;
  overflow: hidden;
}
#page-nav:before,
#page-nav:after {
  content: "";
  display: table;
}
#page-nav:after {
  clear: both;
}
#page-nav a,
#page-nav span {
  height: 32px;
  padding: 0 10px;
  line-height: 32px;
  text-align: center;
  display: inline-block;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
#page-nav a {
  color: #999;
  text-decoration: none;
}
#page-nav a:hover {
  color: #fff;
  background: #38b7ea;
}
#page-nav .page-number {
  display: inline-block;
}


@media screen and (max-width: 559px) {
  #page-nav .page-number {
    display: none;
  }
}
#page-nav .current {
  color: #565a5f;
  font-weight: bold;
}
#page-nav .space {
  color: #eceff2;
}

.hr-line {
  width: 86%;
  margin: auto;
  height: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#footer {
  padding: 20px 0;
  border-top: 1px solid #eceff2;
  color: #565a5f;
  background: #1b1e23;
  min-height: 290px;
  height: auto;
  font-size: 16px;
  text-align: center;
}
#footer .outer {
  margin-bottom: 0;
}
#footer a {
  color: #38b7ea;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
#footer-info {
  line-height: 1.6em;
  font-size: 0.85em;
}
#foot-content {
  width: 86%;
  height: auto;
  min-height: 180px;
  margin-left: auto;
  margin-right: auto;
}
.made {
  margin: auto;
  font-size: 13px;
  color: #ededed;
  width: 305px;
  text-align: center;
}
.made i {
  color: #c13a3a;
}
.foot-box {
  width: 27%;
  height: auto;
  min-height: 180px;
  float: left;
}

.foot-box:nth-child(3) {
  width: 21%;
}
.foot-box:nth-child(2) {
  width: 22%;
  padding-left: 10px;
}
.foot-box:last-child {
  width: 30%;
  padding-top: 5px;
}
.tags-foot {
  padding:7px;
  background: #263139;
  color: #ededed;
  border-radius: 3px;
  margin: 5px;
  float: left;
  font-weight: normal;
  font-size: 12.8px;
}

.tags-foot a {
  color: #ededed !important;
}

.tags-foot a:hover {
  text-decoration: none !important;
    -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.tags-foot:hover {
    -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  background: #22262e;
}




.box-head {
  width: 100%;
  height: 40px;
  letter-spacing: 0.5px;
  color: #fff;
  font-family: "Source Sans Pro";
  font-weight: 600;
  padding-top: 10px;
  text-transform: uppercase;
  font-size: 18px;
}
.box-content {
  margin-top: 20px;
  text-align: left;
  font-weight: lighter;
  color : #ddd !important;
}

.box-follow {
  width: 100%;
  height: auto;
  color: #fff;
  font-size: 20px;
  padding: 5px;
  margin-bottom: 20px;
  margin-top: 15px;
  text-align: center;
}
.box-follow a {
  text-decoration: none !important;
  color: #ccc !important;
}



.article-entry pre,
.article-entry .highlight {
  background: #34383d;
  margin: 0 -20px;
  padding: 15px 20px;
  border-style: solid;
  border-color: #eceff2;
  border-width: 1px 0;
  overflow: auto;
  color: #ccc;
  line-height: 22.400000000000002px;
}
.article-entry .highlight .gutter pre,
.article-entry .gist .gist-file .gist-data .line-numbers {
  color: #666;
  font-size: 0.85em;
}
.article-entry pre,
.article-entry code {
  font-family: "Source Sans Pro";
}
.article-entry code {
  background: #f0f2f1;
  text-shadow: 0 1px #fff;
  font-size: 13px;
  color: #f4645f;
  padding: 0 0.3em;
  box-shadow :0 1px 1px rgba(0, 0, 0, 0.125);
}
.article-entry pre code {
  background: none;
  text-shadow: none;
  padding: 0;
}
.article-entry .highlight pre {
  border: none;
  margin: 0;
  padding: 0;
}
.article-entry .highlight table {
  margin: 0;
  width: auto;
}
.article-entry .highlight td {
  border: none;
  padding: 0;
}
.article-entry .highlight figcaption {
  font-size: 0.85em;
  color: #999;
  line-height: 1em;
  margin-bottom: 1em;
}
.article-entry .highlight figcaption:before,
.article-entry .highlight figcaption:after {
  content: "";
  display: table;
}
.article-entry .highlight figcaption:after {
  clear: both;
}
.article-entry .highlight figcaption a {
  float: right;
}
.article-entry .highlight .gutter pre {
  text-align: right;
  padding-right: 20px;
}
.article-entry .highlight .line {
  height: 22.400000000000002px;
}
.article-entry .gist {
  margin: 0 -20px;
  border-style: solid;
  border-color: #eceff2;
  border-width: 1px 0;
  background: #34383d;
  padding: 15px 20px 15px 0;
}
.article-entry .gist .gist-file {
  border: none;
  font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
  margin: 0;
}
.article-entry .gist .gist-file .gist-data {
  background: none;
  border: none;
}
.article-entry .gist .gist-file .gist-data table {
  background: none;
}
.article-entry .gist .gist-file .gist-data .pl-vo {
  color: #fff;
}
.article-entry .gist .gist-file .gist-data .line-numbers {
  background: none;
  border: none;
  padding: 0 20px 0 0;
  height: 22.400000000000002px;
  vertical-align: top;
}
.article-entry .gist .gist-file .gist-data .line-data {
  padding: 0 !important;
}
.article-entry .gist .gist-file .highlight {
  margin: 0;
  padding: 0;
  border: none;
}
.article-entry .gist .gist-file .gist-meta {
  background: #34383d;
  color: #999;
  font: 0.85em "open sans", "Helvetica Neue", "Microsoft Yahei", Helvetica, Arial, sans-serif;
  text-shadow: 0 0;
  padding: 0;
  margin-top: 1em;
  margin-left: 20px;
}
.article-entry .gist .gist-file .gist-meta a {
  color: #38b7ea;
  font-weight: normal;
}
.article-entry .gist .gist-file .gist-meta a:hover {
  text-decoration: underline;
}
pre .comment,
pre .title,
pre .template_comment,
pre .header,
pre .javadoc {
  color: #999;
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo,
pre .winutils,
pre .method,
pre .request,
pre .status,
pre .nginx .title,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .clojure .title,
pre .deletion {
  color: #f2777a;
}
pre .number,
pre .preprocessor,
pre .preprocessor .keyword,
pre .built_in,
pre .literal,
pre .params,
pre .constant,
pre .command,
pre .lisp .body,
pre .parent,
pre .haskell .type {
  color: #f99157;
}
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute,
pre .addition {
  color: #9c9;
}
pre .string,
pre .value,
pre .inheritance,
pre .ruby .symbol,
pre .symbol .string,
pre .xml .cdata,
pre .function .title {
  color: #9c9;
}
pre .css .hexcolor,
pre .phpdoc,
pre .tex .formula {
  color: #6cc;
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .identifier,
pre .vhdl {
  color: #69c;
}
pre .keyword,
pre .javascript .function {
  color: #c9c;
}
@media screen and (min-width: 1200px) {
  #sidebar {
    display: inline;
    float: left;
    width: 29.232876%;
    margin: 0 0.7692307692308%;
  }
}
@media screen and (min-width: 800px) and (max-width: 1199px) {
  #sidebar {
    display: inline;
    float: left;
    width: 29.230769230769198%;
    margin: 0 0.7692307692308%;
  }
}
@media screen and (max-width: 799px) {
  #sidebar {
    display: inline;
    float: left;
    width: 100%;
  }
}
.widget {
  line-height: 1.6em;
  word-wrap: break-word;
  font-size: 0.9em;
}
.widget ul,
.widget ol {
  list-style: none;
  margin: 0;
}
.widget ul ul,
.widget ol ul,
.widget ul ol,
.widget ol ol {
  margin: 0 20px;
}
.widget ul ul,
.widget ol ul {
  list-style: disc;
}
.widget ul ol,
.widget ol ol {
  list-style: decimal;
}
.category-list-count,
.tag-list-count,
.archive-list-count {
  float: right;
  width: auto;
  min-width: 40px;
  height: auto;
  text-align: center;
  background: #38b7ea;
  color: #fff;
  border-radius: 30px;
  font-size: 0.85em;
}
.category-list-count:before,
.tag-list-count:before,
.archive-list-count:before {
  content: " ";
}
.category-list-count:after,
.tag-list-count:after,
.archive-list-count:after {
  content: " ";
}

.tagcloud a {
  margin-right: 5px;
}
.widget-wrap {
  margin: 40px 0px;
}
@media screen and (max-width: 559px) {
  .widget-wrap {
    margin: 40px 0px;
  }
}

.widget-title {
  margin-bottom: 0;
}
.widget {
  padding: 15px 5px;
}
.widget a {
  color: #777;
  text-decoration: none;
}
.widget a:hover {
  color: #333;
}
.widget ul ul,
.widget ol ul,
.widget dl ul,
.widget ul ol,
.widget ol ol,
.widget dl ol,
.widget ul dl,
.widget ol dl,
.widget dl dl {
  margin-left: 15px;
  list-style: disc;
}
.widget ul,
.widget ol {
  list-style: none;
}
.widget ul li,
.widget ol li,
.widget ul .category-list-child,
.widget ol .category-list-child {
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid border-color;
}
.widget ul li a,
.widget ol li a,
.widget ul .category-list-child a,
.widget ol .category-list-child a {
  color: #777;
}
.widget ul ul,
.widget ol ul,
.widget ul ol,
.widget ol ol {
  list-style: none;
}
.widget ul ul li,
.widget ol ul li,
.widget ul ol li,
.widget ol ol li {
  border: none;
}
.widget ul ul li:last-child,
.widget ol ul li:last-child,
.widget ul ol li:last-child,
.widget ol ol li:last-child {
  padding-bottom: 0px;
}
.widget ul:not(#recent-post) li a:before,
.widget ol:not(#recent-post) li a:before {
  color: #ccc;
  content: "\f0da";
  font-size: 12px;
  margin-right: 6px;
  font-family: FontAwesome;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  transition: 0.2s ease;
}
.widget ul:not(#recent-post) li a:hover:before,
.widget ol:not(#recent-post) li a:hover:before {
  color: #38b7ea;
}

#toTop {
  cursor: pointer;
  text-align: center;
  width: 64px;
  height: 64px;
  color: #fff;
  font-size: 32px;
  line-height: 64px;
  background: #565a5f;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
@media screen and (min-width: 560px) and (max-width: 799px) {
  #toTop {
    width: 54px;
    height: 54px;
    font-size: 28px;
    line-height: 54px;
  }
}
@media screen and (max-width: 559px) {
  #toTop {
    width: 54px;
    height: 54px;
    font-size: 28px;
    line-height: 54px;
  }
}
#toTop.fix {
  bottom: 20px;
  position: fixed;
}
#recent-post li {
  padding: 10px 0 10px 94px;
}
#recent-post li:before,
#recent-post li:after {
  content: "";
  display: table;
}
#recent-post li:after {
  clear: both;
}
#recent-post.no-thumbnail li {
  padding: 10px 0px;
}
#recent-post li .item-thumbnail {
  opacity: 1;
  float: left;
  margin-left: -94px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#recent-post li .item-thumbnail .thumbnail {
  width: 80px;
  height: 80px;
  display: block;
  position: relative;
  overflow: hidden;
}
#recent-post li .item-thumbnail .thumbnail span {
  width: 100%;
  height: 100%;
  display: block;
}
#recent-post li .item-thumbnail .thumbnail .thumbnail-image {
  position: absolute;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;
}
#recent-post li .item-thumbnail .thumbnail .thumbnail-none {
  background-image: url("images/thumb-default-small.png");
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}
#recent-post li .item-inner a,
#recent-post li .item-inner .item-category {
  font-size: 13px;
  text-transform: uppercase;
}
#recent-post li .item-inner a a,
#recent-post li .item-inner .item-category a {
  color: #38b7ea;
}
#recent-post li .item-inner a a:hover,
#recent-post li .item-inner .item-category a:hover {
  color: #333;
}
#recent-post li .item-inner a a,
#recent-post li .item-inner .item-category a,
#recent-post li .item-inner a .fa,
#recent-post li .item-inner .item-category .fa {
  margin-right: 5px;
}
#recent-post li .item-inner .item-title {
  font-size: 15px;
}
#recent-post li .item-inner .item-title a {
  color: #333;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#recent-post li .item-inner .item-date {
  color: #aaa;
  font-size: 13px;
  text-transform: uppercase;
}
#recent-post li:hover .item-thumbnail {
  opacity: 0.8;
}
#recent-post li:hover .item-title a {
  color: #38b7ea;
}
.article-banner1 {
  width: 100%;
  height: auto;
  max-height: 420px;
}

@media only screen and (max-width: 480px) {
.article-banner {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  float: none;
}
.article-title {
  font-size: 26px;
}
.article-date {
  font-size: 12px;
}
.article-category {
  font-size: 12px;
}
.article-share-link {
  font-size: 12px;
}
.article-comment-link {
  font-size: 12px;
}
.article-more-link a {
  display: inline-block;
  line-height: 1em;
  height: 32px;
  padding: 8px 10px;
  -webkit-border-radius: 15px;
  float: right;
  font-size: 13px;
  margin-bottom: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #ddd;
  color: #999;
  text-shadow: 0 1px #fff;
  text-decoration: none;
  vertical-align: right
}


.container-5{
  overflow: hidden;
  margin-top: 20px;
  width: 100%;
  vertical-align: middle;
  white-space: nowrap;
}

.container-5 input#email{
  width: 100%;
  height: 50px;
  background: #fff;
  border: none;
  font-size: 10pt;
    margin-left: auto;
  margin-right: auto;
  color: #666;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  outline: none;
  border-radius: 5px;
}

.container-5 input#email::-webkit-input-placeholder {
   color: #65737e;
}

.container-5 input#email:-moz-placeholder { /* Firefox 18- */
   color: #65737e;
}

.container-5 input#email::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;
}

.container-5 input#email:-ms-input-placeholder {
   color: #65737e;
}

.container-5 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width: 80px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

.container-5:hover button.icon, .container-5:active button.icon, .container-5:focus button.icon{
  outline: none;
  opacity: 1;
  margin-left: -83px;
}

.container-5:hover button.icon:hover{
  background: #ededed;
}

}
@media only screen and (max-width: 1024px) {
.article {
  margin-top: 40px;
  margin-bottom: 40px;
}


}

@media only screen and (max-width: 820px) {
  .foot-box {
  width: 50% !important;
  height: 200px !important;
  float: left;
}

.foot-box:nth-child(3) {
  height: 230px !important;
}
.foot-box:nth-child(2) {

}
.foot-box:last-child {
  height: 230px !important;
}
}
@media only screen and (max-width: 540px) {
  #footer {
    height: auto !important;
    padding-bottom: 10px;
  }

.box-head {
 text-align: left; 
}
  .foot-box {
  width: 100% !important;
  height: auto !important;
  float: none !important;
  margin-bottom: 20px;
}
.box-follow {
padding: 0 !important;
  }
  .btn-3 {
    width: 70%;
  }
.box-content {
  width: 100% !important;
  height: auto !important;
}
.foot-box:first-child {
  width: 100% !important;
  height: auto !important;
}
.foot-box:nth-child(3) {
  width: 100% !important;
    padding: 0 !important;
    min-height: 230px !important;
  height: auto !important;
  float: none;height: auto !important;
}
.foot-box:nth-child(2) {
  width: 100% !important;
float: none;
height: auto !important;
}
.box-subs {
}
.foot-box:last-child {
  width: 100% !important;
  float: none;

margin-top:-20px;
  height: 130px !important;
  min-height: 0 !important;

}
}
@media only screen and (max-width: 680px) {
  .foot-box {
  width: 50% !important;
  height: 220px !important;
  float: left;
}

}

@media only screen and (max-width: 780px) {
.article {
  margin-top: 40px;
  margin-bottom: 40px;
}

}

@media only screen and (max-width: 680px) {


.foot-box input[type="email"] {
  margin-left: 23px;
  width: 50%;
}
.made {
  margin-bottom: 10px;
  width: auto !important;
}
}

@media only screen and (max-width: 560px) {
.article {
  margin-top: 10px;
  margin-bottom: 40px;
}


}


@media only screen and (max-width: 559px) {
  #footer {
    padding-bottom: 5px;
}


.foot-box {
}

.foot-box input[type="email"] {
  margin-left: 0 !important;
  width: 100%; 
}
.made {
  margin-top: -20px;
}

}



@media only screen and (max-width: 393px) {
.foot-box:nth-child(3) {
  margin-top: 40px;
}

}
@media only screen and (max-width: 348px) {
.made {
  width: 280px;
}
}

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(54, 70, 80, 0.8) url('../img/cd-top-arrow.svg') no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #2c373e;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}
@media only screen and (max-width: 296px) {
  .made {
    font-size: 13px;
    width: 260px;
  }
}

@media only screen and (max-width: 375px) {
  .cl-effect-10 a span {
    font-size: 12px;
  }
  .cl-effect-11 a span {
    font-size: 12px;
  }
  .cl-effect-10 a {
    font-size: 12px;
  }
  .cl-effect-11 a {
    font-size: 12px;
  }
}