section{
    position:relative;
    float:right;
    margin-top: 20px;
    margin-right: 20px;
}

p{
color: black;
font-family: arial;
display: table-cell;
text-align: center;
vertical-align: middle;
}

.scroll-down {
opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;
}

.scroll-down {
position: fixed;
left: 97% !important;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
border: 2px solid #80838b;
background-size: 14px auto;
background: #80838b;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

  .hide {
    opacity: 0;
    left: -100%;
  }
  .show {
    opacity: 1;
    left: 0;
  }

@keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    }
    40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    }
    60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    }
}