html{
    scroll-behavior: smooth;
}
body{
    height: 100vh;
}

.counter{
    font-size: 2em;
}
.counter2{
    font-size: 2em;
}
.headerslogan {
    padding-top: 0;
    color: black;
    padding-bottom: 1rem;
    font-weight: bold;
    font-size: 44em;
    border-style: none;
}
.headerTitle{
    margin-bottom: 0;
    padding-bottom:0;
    margin-bottom: 50vh;
    border-style: solid;
    border-color: transparent;
    color: black;
    font-size: 44em;
     border-style: none;
}
.headerSloganSpans{
    font-weight: 300;
    font-family: 'Gothic A1', sans-serif;;
}
.bannerarrow{
    width: 100%;
    align-self: center;
    text-align: center;
    font-size: 1.5em
}
.quotebox{
    background-color: black;
    color: white;
    padding: 0 .55rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: .5em;
    font-weight: 600;
    border-radius: 3px;
    
}
.grassnote{
    font-size: .85em;
}
.infinitysymbol{
    min-width: 55px;
    height: 40vh;
}
.upbtn{
    position: fixed;
    top: 90vh;
    right: 5vw;
    /* border-radius: 50%;
    background-color: lightblue; */;
    border-style: solid;
    border-color: transparent;
} 
.upSVG{
    width: 40px;
    height: 40px;
    background-color: black;
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
}
.quotebox:active,  .contactbtn:hover{
    background-color: lightgray;
}
.x{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}  
.thirdCounterTitleWrap{
    color: white;
} 
@media(min-width: 1024px){
    .quotebox:hover, .upbtn:hover{
        opacity: .5;
    }
    .contactbtn:hover{
        opacity: .9;
    }
    /* .upbtn{
        top: 90vh;
    } */
}
@media(min-width: 1750px){
    .headerTitle{
        margin-bottom: 70vh;
    }
}
@media(min-width: 2500px){
    .headerTitle{
        margin-bottom: 100vh;
    }
}