Scroll down indicator on big title section

Hi,

I have found this scroll down arrow I would love to use on the big title section. However, I cannat get it to work on the zerif lite by just add the CSS from this site https://codepen.io/robooneus/pen/Aclqr

Maybe someone knows how to get it work?

The CSS i try to add is:

.arrow-wrap {
position:absolute;
z-index:1;
left:50%;
top:-5em;
margin-left:-5em;
background:#111;
width:10em;
height:10em;
padding:4em 2em;
border-radius:50%;
font-size:0.5em;
display:block;
}

.arrow {
float:left;
position:relative;
width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ffffff transparent transparent transparent;
-webkit-transform:rotate(360deg)
}

.arrow:after {
content:”;
position:absolute;
top:-3.2em;
left:-3em;
width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #111 transparent transparent transparent;
-webkit-transform:rotate(360deg)
}