/*
Template Name: Bodo - Simple One Page Personal
Author: BdgPixel
Author URI:  http://themeforest.net/user/BdgPixel
*/
/* -----------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------
1) General
2) Page Loader
3) Helper
4) Header
5) Typography
6) Hero
7) Sections
 7.a) portfolio
 7.b) service
 7.c) experience
 7.d) testimonial
 7.e) blog
 7.f) about
 7.g) contact
 7.h) footer
8) Components
 8.a) skills


-------------------------------------------------------------

------------------------------------------------------------*/
/*-----------------------------------------1) General--------------------------------------------------*/
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
  font-family: 'Glyphter';
  src: url('../fonts/Glyphter.eot');
  src: url('../fonts/Glyphter?#iefix') format('embedded-opentype'), url('../fonts/Glyphter.woff') format('woff'), url('../fonts/Glyphter.ttf') format('truetype'), url('../fonts/Glyphter.svg#Glyphter') format('svg');
  font-weight: normal;
  font-style: normal;
}
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body,
html {
  left: 0;
  top: 0;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  font-family: 'Roboto', 'Noto Sans TC', sans-serif;
  height: 100%;
  width: 100%;
}
body {
  color: #2f2f2f;
  font-size: 16px;
  line-height: 1.7;
  background-color: #fff;
}
a {
  color: #2f2f2f;
  text-decoration: none;
  transition: ease .6s;
  -webkit-transition: ease .6s;
  -moz-transition: ease .6s;
  -o-transition: ease .6s;
  -ms-transition: ease .6s;
}
a:hover {
  text-decoration: none;
  color: #818181;
}
a:focus {
  outline: none;
  color: #999999;
  text-decoration: none;
}
iframe {
  border: none;
  /*width: 100%;*/

}
img { max-width: 100%; }
*:focus {
  outline: none;
}

/*----------------------------------------- 2) Preloader --------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 999999;
}
#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url(../images/loader.gif);
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  margin: -40px 0 0 -100px;
}
#status img {
  text-align: center;
  margin-top: -80px;
}

/*----------------------------------------- 3) Helper --------------------------------------------------*/
.no-pad {padding: 0 !important; margin: 0 !important;}
.pad-80 {padding-top: 80px;}
.mar-t-50{margin-top: 50px !important;}
.mar-tm-10{ margin-top: -10px;}

.white-col{
  background: #ffffff;
  padding: none;
}

/*---- span -----*/
.title-small span { position: relative;}
.title-small span:after {
  content: "";
  position: absolute;
  bottom: -20px;
  height: 3px;
  background: #DEDEDE;
  width: 28px;
  left: 0;
}
.title-small-center span {position: relative;}
.title-small-center span:after {
  content: "";
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  height: 3px;
  background: #DEDEDE;
  width: 28px;
  left: 0;
}

/*----- background ------*/
.grey-bg {
  background: #f6f6f6;
  padding: 120px 0;
  display: block;
}
.white-bg {
  background: #ffffff;
  padding: 120px 0;
  display: block;
}

/*-------- content --------*/
.content-detail {
  font-weight: 400;
  margin-top: 70px;
  line-height: 30px;
  font-size: 14px;
  letter-spacing: 0.4px;
}
.content-details {
  font-weight: 400;
  margin-top: 40px;
  line-height: 30px;
  font-size: 14px;
}
.pad-bottom {
  padding-bottom: 80px;
}
.text-detail {
  margin-top: 30px;
  color: #5f5f5f;
}

.listing-item{
  list-style: none;
  display: inline-block;
  width: 100%;
  padding: 0;
  margin: 0;
}

/*----------------------------------------- 4) Header --------------------------------------------------*/
.header {
  width: 100%;
  z-index: 9999;
}
.for-sticky {
  position: fixed;
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 50px;
  opacity: 0.8;
  z-index: 1;
  top: 0;
  left: 0;
  border-bottom: 1px solid #f1f1f1;
  display: block;
  padding: 0px 15px 5px 15px;
  background: #ffffff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.logo-nav {
  padding: 6px 0 10px 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 45px;
  display: block;
}
.opacity-nav {
  opacity: 0.8;
  z-index: 2;
}
/*----------- panel ----------*/
.content-wrap {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  width: 100%;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
}
.content::before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  content: '';
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
  transition: opacity 0.4s, transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}



/*----------------------------------------- 5) Typography --------------------------------------------------*/
h1,
h2,
h3,
h4,
h5 {
  letter-spacing: 0.8px;
  font-family: 'Roboto Slab', 'Noto Sans TC', sans-serif;
}
p {
  letter-spacing: 0.5px;
  font-size: 13px;
  line-height: 34px;
  font-weight: 300;
}

/*----------------------------------------- 7) Sections --------------------------------------------------*/
/*---------- a. portfolio -----------*/
ul.portfolio-image {
  list-style: none;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
}
ul.portfolio-image li {
  float: left;
  display: block;
  list-style: none;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-top: 46%;
}
ul.portfolio-image li:hover {
  cursor: pointer;
}
ul.portfolio-image li:hover img {
  -webkit-filter: grayscale(20%);
  transform: scale(1.15);
}
ul.portfolio-image li:hover .image-bg {opacity: 1;}
ul.portfolio-image li:hover .description-wrap {
  background: rgba(186, 186, 186, 0.6);
}
ul.portfolio-image li img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  /*-webkit-filter: grayscale(100%);*/
  transition: filter, transform, 0.5s;
}
ul.portfolio-image li .decription-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(242, 242, 242, 0.2);
  padding: 20px;
  transition: background, 0.5s;
}
ul.portfolio-image li .image-bg {
  color: #2f2f2f;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  display: inline-block;
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 10px 0;
  position: relative;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transition: opacity, 0.5s;
  letter-spacing: 1.5px;
  font-weight: 300;
  color: transparent;
}
ul.portfolio-image li .desc{
  position: absolute;
  z-index: 1;
  top: 45%;
  left: 0;
  display: table-cell;
  right: 0;
  text-align: center;
  color: #2f2f2f;
  font-size: 14px;
  font-weight: 700;
}


/*-------------- h. footer ------------------*/
.footer-top{
  width: 100%;
  text-align: center;
  color: #cccccc;
  display: table;
}

.footer-bottom{
  width: 100%;
  background: #2f2f2f;
  padding: 80px 0;
  color: #636363;
}

.footer-text{
  text-align: center;
  color: #fff;
}


/*-------------- new ------------------*/
.info-subtitle {
  color: #636363;
  margin-top: 20px;
  margin-bottom: 10px
}
.info-text {
  margin-left: 5%;
  font-weight: 300;
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}

.info-video {
  text-align: center;
  padding: 25px 0;
}

.item-line {
  margin-bottom: 20px;
}


.featherlight-image {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 80vh;
}