@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
  position:absolute;
  bottom:50%;
  right:50%;
	left:50%;
  animation: arrowmove 3s ease-in-out;
	animation-fill-mode: forwards;
animation-iteration-count:infinite;
	text-shadow: 0 0 10px #000;
}


.scroll_down a{
  position: absolute;
  left: -28px;
  bottom: 26px;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
}


.scroll_down {
  display: inline-block;
  width: 6px;
  height: 110px;
  margin: 0 14.2px;

  background-color: #fff;
}

.scroll_down::before,
.scroll_down::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: calc(50% - 3px);
  width: 6px;
  height: 30px;

  background-color: #fff;
  transform-origin: 50% calc(100% - 3px);
}

.scroll_down::before {
  transform: rotate(45deg);
}

.scroll_down::after {
  transform: rotate(-45deg);
}



@keyframes arrowmove{
   0%{bottom:5%;opacity: 0;}
   50%{bottom:10%; opacity: 1;}
   100%{bottom:5%; opacity: 0;}
}






@media screen and (max-width:640px){
.scroll_down{
  position:absolute;
  bottom:25%;
  right:50%;
	left:50%;
  animation: arrowmove 3s ease-in-out;
	animation-fill-mode: forwards;
animation-iteration-count: infinite;
	text-shadow: 0 0 10px #000;
}


.scroll_down a{
  position: absolute;
  left: -28px;
  bottom: 26px;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
	display: none;
}


.scroll_down {
  display: inline-block;
  width: 6px;
  height: 50px;
  margin: 0 14.2px;

  background-color: #fff;
}

.scroll_down::before,
.scroll_down::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: calc(50% - 3px);
  width: 6px;
  height: 30px;

  background-color: #fff;
  transform-origin: 50% calc(100% - 3px);
}

.scroll_down::before {
  transform: rotate(45deg);
}

.scroll_down::after {
  transform: rotate(-45deg);
}
@keyframes arrowmove{
   0%{bottom:25%;opacity: 0;}
   50%{bottom:30%; opacity: 1;}
   100%{bottom:25%; opacity: 0;}
}
}
