/* Menu */
#navbar {
  background-color: #333;
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 1;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}




/* Parallax Scrolling */
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
}

/* Turn off parallax scrolling for tablets and phones */

@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.bgimg-1 {
  background-image: url("bgimg1.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("bgimg2.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("bgimg3.jpg");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

/* image grid */
.row {
  display: flexbox;
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  flex: 25%;
  max-width: 24%;
  padding: 0 6px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Letter */

.letter1{
position:relative;
top:50%;
left:30%;
width:530px;
height:316px;
}

.letter1:before{
content:"";
position:absolute;
bottom:128px;
left:10px;
background-image:url("before.png");
width:530px;
height:316px;
filter:hue-rotate(70deg) saturate(100%) brightness(150%);
}

.overimgdiv2{
background-color:white;
width:500px;
height:220px;
position:absolute;
left:25px;
bottom:4px;
font-size:10px;
text-align:center;
overflow:hidden;
transition:height 0.4s;
border-radius:5px;
}

/* hue-rotate色相旋转 saturate饱和 drop-shadow投影*/
.letter1:after{
content:"";
position:absolute;
bottom:0px;
left:10px;
background-image:url("after.png");
width:530px;
height:260px;
filter:hue-rotate(70deg) saturate(100%) brightness(150%) drop-shadow( 0px 0px 100px lightsalmon);
}

.letter1:hover .overimgdiv2{
height:550px;
}

.letter {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  text-align: center;
  color: #000;
  background-color: #111
}

/* link */

a:link {
color:#FFDAB9;
text-decoration:underline;
}

a:visited {
color:#FFA07A;
text-decoration:underline;
}

a:hover {
color:#FFEF00;
text-decoration:none;
}

a:active {
color:#FF6347;
text-decoration:none;
}