body {overflow-x: hidden;}
/* main{padding: 48px 0;} */
/* main {background-color: #e9f5db;} */
main {background-color: #f1e7b4;}
/* 
main {background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='400' cy='400' r='29%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230EF'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='62.5%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230FF'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='800'/%3E%3Cg %3E%3Cpath fill='url(%23b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;  
} */

.color-blue-sub {color: #0f9ad0;}

.btn { background-color: #e0486f !important; color: #fff !important; border: 2px solid transparent !important}
.btn:hover {background-color: transparent !important; border: 2px solid #e0486f !important; color: #e0486f !important; }
.btn.secondary {background-color: transparent !important; color: #e0486f !important;}
.btn.secondary:hover{ background-color: #e0486f !important; color: transparent !important; color: #fff !important;}

#hero-section {background-image: radial-gradient(circle farthest-corner at 100% 0%, #ffa500, 20%, lightblue 90%); background-attachment: fixed; }
#hero-section::after{width: 100%; max-height: 175px; content: ''; height: 100%; background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%); position: absolute; bottom: 0;}
*{scroll-behavior: smooth;}
#hero {  overflow: hidden; display: flex;flex-direction: column; padding-top: 128px !important; gap: 32px;  width: 100vw; display: flex; align-items: center; justify-content: center; }
#hero .hero-text{align-items: center; display: flex; justify-content: center; flex-direction: column;}
#hero .hero-text h1 {
  height: auto;
color: #27C6F0;
text-shadow: 1px 9px 5px rgba(0,0,0,0.39);
z-index: 10;
}


#fly {position: absolute;z-index: 6; top: 40px; left: -40px; transform: rotate(-40deg); z-index: 0;}
#textFly {  font-weight: 700; font-size: 32px}
  /* animation: moveForwardText 5s ease-out;} */
/* } */

@keyframes moveForward {
  from {left: -150px}
  to {left: calc(100%)}
}

@keyframes moveForwardText {
  from {left: -150px}
  to {left: calc(50% - (255px / 2))}
}

.font-medium{ font-weight: 750 !important;}

.navbar-wrapper {width: 100%; background-color: transparent; display: flex; justify-content: center;  -webkit-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.12); -moz-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.12); box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.12);}
.navbar-wrapper .navbar-container { display: flex; align-items: center; justify-content: space-between; max-width: 1800px; width: 100%;}
.navbar-wrapper .navbar-container .right {display: flex; }
.navbar-wrapper .navbar-container .right a {padding: 24px 32px; transition: 0.5s all;}
.navbar-wrapper .navbar-container .right a:hover {opacity: 0.76;}
/* .navbar-wrapper .navbar-container .right a:nth-last-child(1){background-color: red !important; } */

.navbar-wrapper * {font-size: 24px; color: #111; text-decoration: none;} 

section {padding: 128px 98px;}

.hero-section .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}


.main-section {background-color: #fff; width: 100%;  z-index: 1;}
/* .main-section *{z-index: 10 !important; position: relative;} */
/* .main-section::after{position: absolute; content:  ''; left: 0; width: 100vw; height: 100%; top: 0;background-color: #fff; z-index: 1; left: 0} */

.wave {
  width: 300vh;
  transform: translateX(-50%);
  --size: 50px;
  --m: 0.5;
  --p: calc(var(--m)*var(--size));
  --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));
  
  z-index: 100;
  position: relative;
  height: 200px;
  width: 300vw;

  mask:
    radial-gradient(var(--R) at left 50% var(--d,top) calc(var(--size) + var(--p)),#000 99%,#0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at left 50% var(--d,top) calc(-1*var(--p)),#0000 99%,#000 101%) 
      left 50% var(--d,top) var(--size)/calc(4*var(--size)) 100% repeat-x;
  background:linear-gradient(90deg,#fff,#fff);

  transition: all 0.6s;
  animation: scrollX 45s ease-in-out infinite;
}

.wave.bottom {
  --d: bottom;
  animation: scrollXR 45s ease-in-out infinite;

}

/* .wave-2 .wave {
  transform: translateX(-10%);
} */

@keyframes scrollX {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes scrollXR {
  0% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


 .book-background {
  width: 100vw;
  /* height: 100vh; */
  min-height: 350px;
  margin: 0;
  position: relative;
  background-color: #111;
    background-image: linear-gradient(to top, #d2b48c 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #b22222, #871a1a 5%, transparent 5%), linear-gradient(to right, transparent 6%, #ff6347 6%, #ff3814 9%, transparent 9%), linear-gradient(to right, transparent 27%, #556b2f 27%, #39481f 34%, transparent 34%), linear-gradient(to right, transparent 51%, #fa8072 51%, #f85441 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #008080 42%, #004d4d 44%, transparent 44%), linear-gradient(to right, transparent 45%, #008080 45%, #004d4d 47%, transparent 47%), linear-gradient(to right, transparent 48%, #008080 48%, #004d4d 50%, transparent 50%), linear-gradient(to right, transparent 87%, #789 87%, #4f5d6a 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #bdb76b 14%, #989244 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #808000 10%, #4d4d00 13%, transparent 13%), linear-gradient(to right, transparent 21%, #8b4513 21%, #5e2f0d 25%, transparent 25%), linear-gradient(to right, transparent 58%, #8b4513 58%, #5e2f0d 64%, transparent 64%), linear-gradient(to right, transparent 92%, #2f4f4f 92%, #1c2f2f 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #2f4f4f 96%, #1c2f2f 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #cd5c5c 35%, #bc3a3a 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #bc8f8f 78%, #bc8f8f 80%, transparent 80%, transparent 82%, #bc8f8f 82%, #bc8f8f 83%, transparent 83%), linear-gradient(to right, transparent 66%, #a52a2a 66%, #7c2020 85%, transparent 85%);

  /* background-image: linear-gradient(to top, #222 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #222, #2e2e2e 5%, transparent 5%), linear-gradient(to right, transparent 6%, #222 6%, #2e2e2e 9%, transparent 9%), linear-gradient(to right, transparent 27%, #222 27%, #2e2e2e 34%, transparent 34%), linear-gradient(to right, transparent 51%, #222 51%, #2e2e2e 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #222 42%, #2e2e2e 44%, transparent 44%), linear-gradient(to right, transparent 45%, #222 45%, #2e2e2e 47%, transparent 47%), linear-gradient(to right, transparent 48%, #222 48%, #2e2e2e 50%, transparent 50%), linear-gradient(to right, transparent 87%, #222 87%, #2e2e2e 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #222 14%, #2e2e2e 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #222 10%, #2e2e2e 13%, transparent 13%), linear-gradient(to right, transparent 21%, #222 21%, #1a1a1a 25%, transparent 25%), linear-gradient(to right, transparent 58%, #222 58%, #2e2e2e 64%, transparent 64%), linear-gradient(to right, transparent 92%, #222 92%, #2e2e2e 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #222 96%, #1a1a1a 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #222 35%, #2e2e2e 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #333 78%, #333 80%, transparent 80%, transparent 82%, #333 82%, #333 83%, transparent 83%), linear-gradient(to right, transparent 66%, #222 66%, #2e2e2e 85%, transparent 85%); */
  background-size: 300px 150px;
  background-position: center bottom;
} 
/* .book-background { color: #fff;} */
.book-background .information { max-width: 800px; background-color: #fff;   margin: 32px auto; padding: 24px 32px; border-radius: 32px 32px 0px 32px; position: relative;}
.book-background .information::after { content:  ''; right: -40px; bottom: 0; width: 100px;  height: 200px; position: absolute ; transform: translateY(calc(100% - 55px)) rotate(15deg) scaleX(-1); background-image: url(../img/bert-transparent.png); background-size: contain; background-repeat: no-repeat;}

@media screen and (max-width: 800px) {
  .col {width: 100% !important;}
  section {padding: 32px 16px !important;}
  .column-mobile {flex-direction: column;}
  img {margin: 24px 0 !important;}
}



#stage {
  position: fixed;
  /* width: 800px; */
  /* height: 600px; */
  bottom: 0;
  left: 0;
  /* transform: translate(-50%, -100%); */
}

path {
  fill: none;
  stroke: green;
}

/**
Test 2*/



#sun {
  position: absolute;
  z-index: 10;
  top: 2%;
  right: 0%;
  font-size: 5em;
  -webkit-animation: sunshine 180s infinite alternate;
          animation: sunshine 180s infinite alternate;
}

@-webkit-keyframes sunshine {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sunshine {
  to {
    transform: rotate(360deg);
  }
}
.tree {
  position: absolute;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tree__1, .tree__2, .tree__3, .tree__5 {
  width: 0;
  height: 0;
  border-radius: 10%;
}
.tree__5 {
  /*added this top branch on last-sw */
  border: 20px solid transparent;
  border-bottom: 25px solid #a7ac5c;
}
.tree__1 {
  border: 45px solid transparent;
  border-bottom: 50px solid #878822;
  margin-top: -60px;
}
.tree__2 {
  border: 60px solid transparent;
  border-bottom: 65px solid #4a560c;
  margin-top: -80px;
}
.tree__3 {
  border: 70px solid transparent;
  border-bottom: 80px solid #303b2b;
  margin-top: -100px;
}
.tree__4 {
  /*trunk base*/
  width: 10px;
  height: 50px;
  background: #211610;
}

#grass {
  width: 100vw;
  left: 0;

  position: absolute;
    bottom: 0;
    background: transparent;
    height: 75px;
}

#walkingBert {
  transform-origin: 0% 100%;
  transform: rotate(100deg);
  -webkit-animation: walk 200s infinite ease-in-out;
          animation: walk 200s infinite ease-in-out;
}

@-webkit-keyframes walk {
  to {
    transform: translateX(102vw) rotate(90deg);
  }
}

@keyframes walk {
  to {
    transform: translateX(102vw) rotate(90deg);
  }
}


@media screen and (max-width: 800px ) {
  .col { width: 100%;}
}

/**
.book-background:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #111;
  
  background-image: linear-gradient(to top, #d2b48c 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #b22222, #871a1a 5%, transparent 5%), linear-gradient(to right, transparent 6%, #ff6347 6%, #ff3814 9%, transparent 9%), linear-gradient(to right, transparent 27%, #556b2f 27%, #39481f 34%, transparent 34%), linear-gradient(to right, transparent 51%, #fa8072 51%, #f85441 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #008080 42%, #004d4d 44%, transparent 44%), linear-gradient(to right, transparent 45%, #008080 45%, #004d4d 47%, transparent 47%), linear-gradient(to right, transparent 48%, #008080 48%, #004d4d 50%, transparent 50%), linear-gradient(to right, transparent 87%, #789 87%, #4f5d6a 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #bdb76b 14%, #989244 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #808000 10%, #4d4d00 13%, transparent 13%), linear-gradient(to right, transparent 21%, #8b4513 21%, #5e2f0d 25%, transparent 25%), linear-gradient(to right, transparent 58%, #8b4513 58%, #5e2f0d 64%, transparent 64%), linear-gradient(to right, transparent 92%, #2f4f4f 92%, #1c2f2f 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #2f4f4f 96%, #1c2f2f 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #cd5c5c 35%, #bc3a3a 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #bc8f8f 78%, #bc8f8f 80%, transparent 80%, transparent 82%, #bc8f8f 82%, #bc8f8f 83%, transparent 83%), linear-gradient(to right, transparent 66%, #a52a2a 66%, #7c2020 85%, transparent 85%);
  background-size: 300px 300px;
  background-position: center bottom;
  clip-path: circle(150px at center center); 
  animation: flashlight 5000ms infinite;
}
.book-background:after {
  content: '';
  width: 25px;
  height: 10px;
  position: absolute;
  left: calc(50% + 59px); 
  bottom: 100px;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #fff 50%, transparent 50%), radial-gradient(circle, #fff 50%, transparent 50%); 
  background-size: 10px 10px;
  background-position: left center, right center;
  animation: eyes 5000ms infinite;
}
@-moz-keyframes flashlight {
  0%, 9% {
    opacity: 0;
    clip-path: circle(150px at 45% 10%);
  }
  10%, 15%, 85% {
    opacity: 1;
  }
  50% {
    clip-path: circle(150px at 60% 20%);
  }
  54%, 100% {
    clip-path: circle(150px at 55% 92%);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes flashlight {
  0%, 9% {
    opacity: 0;
    clip-path: circle(150px at 45% 10%);
  }
  10%, 15%, 85% {
    opacity: 1;
  }
  50% {
    clip-path: circle(150px at 60% 20%);
  }
  54%, 100% {
    clip-path: circle(150px at 55% 92%);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-o-keyframes flashlight {
  0%, 9% {
    opacity: 0;
    clip-path: circle(150px at 45% 10%);
  }
  10%, 15%, 85% {
    opacity: 1;
  }
  50% {
    clip-path: circle(150px at 60% 20%);
  }
  54%, 100% {
    clip-path: circle(150px at 55% 92%);
  }
  88%, 100% {
    opacity: 0;
  }
}
@keyframes flashlight {
  0%, 9% {
    opacity: 0;
    clip-path: circle(150px at 45% 10%);
  }
  10%, 15%, 85% {
    opacity: 1;
  }
  50% {
    clip-path: circle(150px at 60% 20%);
  }
  54%, 100% {
    clip-path: circle(150px at 55% 92%);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-moz-keyframes eyes {
  0%, 52% {
    opacity: 0;
  }
  53%, 87% {
    opacity: 1;
  }
  64% {
    transform: scaleY(1);
  }
  67% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes eyes {
  0%, 52% {
    opacity: 0;
  }
  53%, 87% {
    opacity: 1;
  }
  64% {
    transform: scaleY(1);
  }
  67% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1);
  }
  88%, 100% {
    opacity: 0;
  }
}
@-o-keyframes eyes {
  0%, 52% {
    opacity: 0;
  }
  53%, 87% {
    opacity: 1;
  }
  64% {
    transform: scaleY(1);
  }
  67% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1);
  }
  88%, 100% {
    opacity: 0;
  }
}
@keyframes eyes {
  0%, 52% {
    opacity: 0;
  }
  53%, 87% {
    opacity: 1;
  }
  64% {
    transform: scaleY(1);
  }
  67% {
    transform: scaleY(0);
  }
  70% {
    transform: scaleY(1);
  }
  88%, 100% {
    opacity: 0;
  }
}