@charset "UTF-8";

@import url("../header.css");

.slide {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.img-panel{
  height: 180px;
  width: 180px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  border-radius: 3px;
}

.stained {
  background-image: url("images/gallery-stained.png");
  animation: fade-in 1s ease-in;
}
.kiln {
  background-image: url("images/gallery-kiln.png");
  animation: fade-in 1.2s ease-in;
}
.sand {
  background-image: url("images/gallery-sand.png");
  animation: fade-in 1.4s ease-in;
}
.mirror {
  background-image: url("images/gallery-mirrors.png");
  animation: fade-in 1.6s ease-in;
}
.showers {
  background-image: url("images/gallery-showers.png");
  animation: fade-in 1.8s ease-in;
}


.caption {
  font-family: 'Advent Pro', sans-serif;
  font-size: 1.8em;
  position: relative;
  /* top: -50%; */
  text-align: center;
  width: min-content;
  /* margin: -0 auto; */
  text-transform: uppercase;
  line-height: 0.8;
  padding: 0.3em 0;
  border-top: 1px solid #fefefe96;
  border-bottom: 1px solid #fefefe96;
  -webkit-text-stroke: 1px #fff0;
  -webkit-text-fill-color: #fff;
  transition: all 0.35s ease-in-out;
  background-color: #00000081;
  box-shadow: 0px 0px 10px #000000b3;
}
.caption:hover{
  padding: 0.3em 0.3em;
  border-bottom: 1px solid #fff;
  border-top: 1px solid white;
  -webkit-text-stroke: 1px #fff;
  -webkit-text-fill-color: #fff;
  transition: all 0.35s ease-in-out;
}
#about {
  /* height: 100%; */
  width: 100%;
}
/* 2019 */
.newline {
    display: block;
    width: 0px;
    height: 0px;
}
/* 2019 */

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

}

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

}

@media only screen and (max-width: 680px) {
  .nav a {
    font-family: 'Microsoft Sans Serif';
    font-size: 12pt;
    font-weight: lighter;
    letter-spacing: 1px;
    text-decoration: none;
    color: #727273;
    padding-right: 15px;
  }
}
@media only screen and (max-width: 430px) {
  .img-panel{
    height: 130px;
    width: 130px;
    margin: 1px;
    overflow: hidden;
  }
  .caption{
    font-size: 1.4em;
    -webkit-text-stroke: 1px #ffffff8f;
    -webkit-text-fill-color: #fff;
  }
}

.main {
  width: 90%;
  max-width: 940px;
  /* height: 300px; */
  /* text-align: center;
  text-align-last: center; */
  margin: 40px auto;
  padding: 20px;
}

.shining {
    overflow: hidden;
    background: linear-gradient(90deg, white,  rgb(22, 22, 22), white);
    background-size: 20%;
    background-blend-mode: soft-light;
    background-repeat: no-repeat;
    animation: animate 6s linear 1s;
  }
.capital {
  color:black;
  font-size :4.5em;
  font-stretch: extra-condensed;
}

@keyframes animate {
  0% {
    opacity: 1;
    background-position: -100%;
  }
  100% {
    opacity: 0;
    background-position: 100%;
  }
}

@keyframes fade-in {
	0% {
    opacity: 0;
    /* transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg); */
	}
	100% {
    opacity: 1; 
    /* transform: perspective(500px) translate3d(0, 0, 0); */
  }
}

@keyframes fade-in-move-down {
	0% {
	  opacity: 0;
    transform: translateY(-5rem);
    transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
  }
  30% {
      opacity: 0;
  }
	100% {
	  opacity: 1;
    transform: translateY(0);
    transform: perspective(500px) translate3d(0, 0, 0);
  }
}