/*---------------------sound_button---------------------*/
.menu-right{
  display:flex;
}


#sound_button{
  width:38.34px;
  height:23.61px;
  margin-top:11px;
  margin-right:24px;
}

#sound_button img{
  width:100%;
  height:100%;
}

#sound_button, .sound_off{
  opacity:0.3;
}


.sound_on{
  opacity:1 !important;
}


@media(max-width: 720px) {

  #sound_button{
    width:38.34px;
    height:23.61px;
    margin-top:1rem;
    margin-right:4px;
  }
}

/*---------------------sound_button---------------------*/


.slide-block{
  animation: SlideIn 5s ease 2s;
  animation-fill-mode: forwards;
  opacity:0;
}

.slide-block-title{
	animation: SlideIn 4s ease 1s;
	animation-fill-mode: forwards;
	opacity:0;
}

.slide-block-title2{
	animation: SlideIn 1s ease 0.5s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
    z-index:-1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    z-index:-1;
  }
}

.fade-block-title{
	animation:fadeIn 1s ease 0.2s;
	animation-fill-mode: forwards;
	opacity:0;

}

.fade-block-title2{
  animation:fadeIn 1s ease 0.5s;
  animation-fill-mode: forwards;
  opacity:0;

}

@keyframes fadeIn {
  0% {
    opacity: 0;
    z-index:-1;
  }
  100% {
    opacity: 1;
    z-index:-1;
  }
}

.effect-fade {
  opacity : 0;
  /*transform : translate(0, 60px);*/
  transition : all 1500ms;
}

 
.effect-fade.effect-scroll {
  opacity : 1;
  /*transform : translate(0, 0);*/
}


.effect-fade-p0 {
  opacity : 0;
  transform : translate(0, 40px);
  transition : all 1500ms ease 0.5s;
}

 
.effect-fade-p0.effect-scroll-p0 {
  opacity : 1;
  transform : translate(0, 0);
}


.effect-fade-p1 {
  opacity : 0;
  transition-delay: 1500ms;
  transition : all 2000ms ease 1.5s;
}

 
.effect-fade-p1.effect-scroll-p1 {

  opacity : 1;
}

.effect-fade-p2 {
  opacity : 0;
  transition-delay: 1500ms;
  transition : all 2000ms ease 1.5s;
}
.effect-fade-p2.effect-scroll-p2 {

  opacity : 1;
}


/*---------------------new------------------------*/
 
.effect-parent .fade1{
  opacity:0;
  transition : all 2000ms;
}

.effect-parent.effect-scroll .fade1{
  opacity:1;
}


.effect-parent .fade2{
  opacity:0;
  transition : all 800ms ease-out 0.3s;
  transform : translate(0, 40px);
}

.effect-parent.effect-scroll .fade2{
  opacity:1;
  transform : translate(0, 0);

}

.effect-parent .fade3{
  opacity:0;
  transition : all 1000ms ease-out 0.7s;
}

.effect-parent.effect-scroll .fade3{
  opacity:1;

}


@media(max-width: 720px) {

.effect-parent .fade3{
  opacity:0;
  transition : all 800ms ease-out 0.3s;
}

.effect-parent.effect-scroll .fade3{
  opacity:1;

}

.effect-parent .fade4,.effect-parent .fade5{
  opacity:0;
  transition : all 1000ms ease-out 0.7s;
  transform : translate(0,40px);
}

.effect-parent.effect-scroll .fade4,
.effect-parent.effect-scroll .fade5{
  opacity:1;
  transform : translate(0, 0);

}
}
/*--------------------------new------------------------*/


@media(max-width: 720px) {

.effect-fade-p1 {
  opacity : 0;
  transition-delay: 1500ms;
  transition : all 1500ms ease 0.5s;
}

.effect-fade-p1.effect-scroll-p1 {

  opacity : 1;
}

.effect-fade-p2 {
  opacity : 0;
  transition-delay: 1500ms;
  transition : all 2000ms ease 1.5s;
}

}



.fade-block-zm{
  animation:fadezm 1.5s ease 1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadezm{
  0%{
    opacity:0.7;
    transform:scale(1,1) rotate(0deg);
    transform-origin:center center;
  }


  65%{
    opacity:0.5;
    transform:scale(0.1,0.1) rotate(260deg);
    transform-origin:center center;
  }


  100%{
    opacity:1;
    transform:scale(1,1) rotate(360deg);
    transform-origin:center center;
  }
}


.invert-button-bgb::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  color:black;
  background-color: white;
  transform-origin: left top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.invert-button-bgw::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  color:white;
  background-color: black;
  transform-origin: left top;
  transform: scale(0, 1);
  transition: transform .3s;
}


.invert-button-bgb:hover::before , .invert-button-bgw:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.invert-button-bgb:hover p,.invert-button-bgb:hover img ,.invert-button-bgb:hover label, .invert-button-bgb:hover span{
  color:black;
}

.invert-button-bgb .go-b,.invert-button-bgb .cursor-b{
  opacity:0;
}

.invert-button-bgb:hover .cursor-b,.invert-button-bgb:hover .go-b{
  opacity:1;
}


.invert-button-bgw:hover .cursor-b,.invert-button-bgw:hover .go-b{
  opacity:0;
}

.invert-button-bgw:hover p,.invert-button-bgw:hover img,.invert-button-bgw:hover label, .invert-button-bgw:hover span{
  color:white;
}


.invert-button-bgw-top::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  color:white;
  background-color: black;
  transform-origin: left top;
  transform: scale(1, 0);
  transition: transform .3s;
}

.invert-button-bgb-top:hover::before , .invert-button-bgw-top:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.invert-button-bgw-top:hover label .invert-button-bgw-top:hover span{
  filter:invert(100%);
}



.invert-button-bgb-center::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  color:black;
  background-color: white;
  transform-origin: center center;
  transform: scale(0, 1);
  transition: transform .3s;
}

.invert-button-bgb-center:hover::before , .invert-button-bgw-center:hover::before {
  transform: scale(1, 1);
}

.invert-button-bgw-center:hover label, .invert-button-bgw-center:hover span{
  filter:invert(100%);
}
.submit-button button:hover img:first-child{
  opacity:0;
}

.submit-button button:hover img:last-child{
  opacity:1;
}

.submit-button button img:last-child{
  opacity:0;
}

@keyframes typing {
  0%{
    width: 0;
    opacity:1;
  }
  100%{
    opacity:1;
  } 
} }
@keyframes caret { 50% { border-color: transparent; } }

.typing-text {
font-family: monospace; 
width: 8ch;
border-right: .08em solid;
overflow: hidden;
white-space: nowrap;
animation: typing 1s steps(5, end), caret 0.5s;
animation-delay: 1.5s;
opacity:0;
animation-fill-mode:forwards;
}


@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

.motion-text {
  overflow: hidden;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  color: #aa8f7b;
  font-family: 'Josefin Sans', sans-serif;

}

.motion-text span {
  display: block;
  transform: translate(100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  animation-fill-mode:forwards;

}

.motion-text.-visible,
.motion-text.-visible span {
  transform: translate(0, 0);
}

/*----------------------------fade-block-left-------------------*/

.fade-block-left {
  position: relative;
  overflow: hidden;
  padding: 0 1px 0 0;
}

.fade-block-left:before {
  content:'';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform: translate(0,0);
  animation: swipeRight 1.1s cubic-bezier(0.6,0,0.4,1);
  animation-fill-mode: forwards;
}


@keyframes swipeRight {
  0% {
    transform: translate(0);
    width:0%;
  }
  50%, 60% {
    transform: translate(-100%,0);
  }
  100% {
    transform: translate(100%,0);
  }
}