Demo */
body
{
    font-family: "Hiragino Kaku Gothic ProN","Microsoft JhengHei", Meiryo, sans-serif;
}
h1,h2,h3,h4,h5,h6{
  text-shadow:0px 1px 2px #999;
  font-family: "Hiragino Kaku Gothic ProN","Microsoft JhengHei", Meiryo, sans-serif;
}
h1{
  margin-top: 50px;
}

.caption h2{
  margin-top: 0px;
  font-size: 1.8em;
}

.caption h3{
  margin-top: 0px;
  font-size: 1.5em;
}
.caption h4{
  margin-top: 0px;
  font-size: 1.2em;
  text-align: left;
}

/* Header settings */
header {
  height:100vh; /* you can change that height to 100%, please get sure youre Header is ready */
  background-attachment:fixed;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-image:linear-gradient(to left, black 40%, white 100%), url('../img/photo02.jpg');
  background-blend-mode:screen; /* you can remove that, if you do that delet the "linear-gradient(to right, black 0%, white 100%)," */
}

@media (max-width:767px){
  header {
  background-attachment:inherit;
}
}

header .row
{
    margin-top:40vh; /* Handle the row */
}

@media (max-width:767px){
    header .row
{
    margin-top:30vh; /* Handle the row on mobile */
}
}

header h1
{
    font-family: "Hiragino Kaku Gothic ProN","Microsoft JhengHei", Meiryo, sans-serif;
    text-align:center;
    font-size:55px;
    color:#F8CA4D;
    text-shadow:0px 0px 4px #222;
}
header h2
{
    font-family: "Hiragino Kaku Gothic ProN","Microsoft JhengHei", Meiryo, sans-serif;
    text-align:center;
    font-size:30px;
    color:#ddd;
    text-shadow:0px 0px 4px #222;
}

@media (max-width:767px){
    header h1
{
    font-size:41px;
}
    header h2
{
    font-size:20px;
}
}

header p
{
    text-align:center;
    font-size:21px;
}

header .btn-link
{
    border:1px solid #2F3440;
    margin-top:20px;
    font-size:21px;
    letter-spacing:1px;
    color:#2F3440;
    text-shadow:0px 0px 1px #222;
    box-shadow:0px 0px 1px #000;
}

header .btn-link:hover
{
    text-decoration:none;
    color:#eee;
    border:1px solid #eee;
    transition:all 0.7s;
    text-shadow:0px 0px 3px #000;
}



/* Custom navbar settings */
.navbar-default {
  background-color:#3F5666;
  border-color:#2F3440;
  border-bottom:1px solid #00c9c0;
  border-radius:0px;
}

.navbar-default .navbar-nav > li > a {
  color:#fff;
  letter-spacing:1px;
  font-weight:500;
}

.navbar-default .navbar-brand {
  color:#ffffff;
  letter-spacing:1px;
}

.navbar-default .navbar-brand:hover {
  color:#eee;
  transition:all 0.7s;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color:#eee;
  background-color:#2F3440;
  transition:all 0.7s;
  font-size:21px;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color:#eee;
  background-color:#2F3440;
  transition:all 0.7s;
  font-size:15px;#FFFFFFFF
}


@media (min-width:992px){
  /*在文字兩邊使用::before以及::after兩個擬元素來表現左右二個線條(寬140高2)*/
  .site-title-sub::before,
  .site-title-sub::after {
  content: "";
  display: inline-block;
  width: 80px;
  height: 2px;
  margin: 0 30px;
  background-color: #9C7334;
  vertical-align: middle;
  }
}

.commentary{
  height:100vh; /* you can change that height to 100%, please get sure youre Header is ready */

}

.about,.painting,.commentary{
  padding: 80px 30px;
}

.artist{
  padding: 80px 30px;  
  background-attachment:fixed;
  background-size: cover;
  background-position:right top;
  background-repeat:no-repeat;  
  background-image:linear-gradient(to left, black 40%, white 100%), url('../img/artist01.jpg');
  background-blend-mode:screen; /* you can remove that, if you do that delet the "linear-gradient(to right, black 0%, white 100%)," */
}
.activity{
  padding: 80px 30px;  
  background-attachment:fixed;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;  
  background-image:linear-gradient(to left, black 0%, white 100%), url('../img/photo03.png');
  background-blend-mode:screen; /* you can remove that, if you do that delet the "linear-gradient(to right, black 0%, white 100%)," */
}

.heading{
  position: relative;
  margin: 30px 0 15px;
  letter-spacing: 2px;
  font-size: 2em; 
  text-shadow:0px 0px 6px #999;   
  font-family: "Hiragino Kaku Gothic ProN","Microsoft JhengHei", Meiryo, sans-serif;
  display: inline-block;
  padding-bottom: 15px;
}

.heading::before{
  bottom: 5px;
}
.about-text{
  margin: 30px 0;
  line-height: 2.5em;
  font-size: 1.1em;
}

.txt-content{
  margin: 5px;
  display: flex;
  flex-wrap: wrap;
}

.about p, .txt-content p{
  padding: 10px 35px;
}



.about-text img{
  max-width: 100%;
  float: left;
  margin: 5px 10px;
  box-shadow: 2px 2px 3px #111;
}



.txt-content img { 
  max-width: 100%; 
  /*float: left; */
  margin: 10px 10px;
  /*box-shadow: 2px 2px 3px #aaaaaa;*/
}

.caption dt.title{
  font-size: 1.25em;
  color: #fff;
  letter-spacing: 3px;
  text-shadow: 0 0 2px #333;
  display: inline-block;
  padding: 5px 20px;
  margin: 30px 30px;
  background-color: #3f5666;
  border-radius: 5px;
}
.caption dd{
  font-size: 1em;
  margin: 10px 40px;
}
.txt-title {
  color: #DB0;
}
.back-to-top {
  /*goto top*/
  cursor: pointer;
  position: fixed;
  bottom: 80px;
  right: 20px;
  display:none;
  width: 50px;
  border-radius: 50%;
}
.thumbnail img{
  max-width: 100%;
}


/*側邊欄*/

.sideNav{
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 0;
  padding: 10px;
  background-color:rgba(63, 86, 102, 0.5);
}
.sideNav ul{
  list-style:none;
  padding: 0;
  margin: 0;
}
.sideNav ul li a{
  display:block;
  width: 12px;
  height: 12px;
  background-color:#fff;
  border-radius:50%;
  margin: 10px auto;
  padding: 0;
  transition: .3s;
}
.sideNav ul li a:hover{
  background-color: #266;
}
.sideNav .active a,.sideNav ul .active a:hover{
  background-color:#000;
}

/*側邊欄End*/