body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

/* Create a Parallax Effect */
.full-bg{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.my-slide {
  min-height: 100%;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    /* background-image: url('../images/parallax1.webp'); */
    min-height: 100%;
}
.bgimg-2 {
    background-image: url('../images/parallax2.webp');
    min-height: 100%;
}
.bgimg-3 {
    background-image: url('../images/parallax3.webp');
    min-height: 100%;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* -------- Butterfly animation ------- */
.butterfly-space{
  min-height: 100%;
  top: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
div#butterflyContainer{
  margin-top: 30%;
  margin-left: 200px;
  min-width: 400px;
  position: relative;
  width: 60%;
  animation-name: butterfly-container;
  animation-duration: 10s;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
div#butterflyObject {
  width: 200px;
  height: 200px;
  margin-left: -200px;
  background-image: url("../images/butterfly-body-200px.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.butterfly-wings {
  display: flex;
}
.butterfly-wings::before,
.butterfly-wings::after {
  content: "";
  padding-top: 100%;
  flex: 1;
 background-image: url("../images/butterfly-wings-200px.webp");
  background-size: 200% 100%;
  animation: left-wing 10s linear infinite alternate;
  transform-origin: right;
}
.butterfly-wings::after {
  background-position: right;
  animation-name: right-wing;
  transform-origin: left;
}
@keyframes butterfly-container {
  0%  {	left:-200px; top:0%;}
  33% {	left:40%; top:40%; transform: rotate(720deg);}
  66% {	left:40%; top:40%; transform: rotate(720deg);}
  100%  {left:120%; top:100%; transform: rotate(1440deg);}
}
@keyframes left-wing {
  0%  {	transform: rotateY(0deg); }
  33% {	transform: rotateY(7000deg); }
  33.1% { transform: rotateY(85deg); filter: brightness(0.1);}
  50% {	transform: rotateY(85deg); filter: brightness(0.1);}
  52% {	transform: rotateY(0deg); filter: brightness(1);}
  66% {	transform: rotateY(0deg);}
  100%  {	transform: rotateY(7000deg); }
}
@keyframes right-wing {
  0%  {	transform: rotateY(0deg); filter: brightness(1); }
  33% {	transform: rotateY(-7000deg); filter: brightness(1);}
  33.1% { transform: rotateY(-85deg); filter: brightness(0.1);}
  50% {	transform: rotateY(-85deg); filter: brightness(0.1);}
  52% {	transform: rotateY(0deg); filter: brightness(1);}
  66% {	transform: rotateY(0deg);}
  100%  {	transform: rotateY(-7000deg); }
}