//highlighted is a hightlighed section of content
.highlighted, .panel {
    padding:2em 1.75em;
    margin: 1em 0;
    background:$highlighted-background-color;
    box-shadow: 0 0 0;

    img{
        max-width:100%;
    }
    &.section{
        margin:0px;
    }
    &.alignCenter {
      text-align:center;
    }

    h2:first-of-type, h3:first-of-type, h4:first-of-type {
        margin-top:0px;
    }

    h2, h3, h4, p, ul, ol, em {
        color:$highlighted-font-color;
    }



    em{
        font-size:80px;
        font-style:normal;
        line-height:60px;
        margin-bottom:30px;
        font-weight:800;
        display:block;
    }

    a.btn {
        font-size:$base-font-size;
        border-color:$highlighted-font-color;
        color:$highlighted-font-color;
        background:transparent;
        margin:0px 0 20px;
        display:inline-block;

        @media screen and (max-width:400px){
            width:100%;
        }
    
        &:hover{
          background:$highlighted-font-color;
          color:$highlighted-background-color;
        }
    }

    &.alt{
        background:$highlighted-alt-background-color;

            h2, h3, h4, p, ul, ol, em {
            color:$highlighted-alt-font-color;

    }

                 a.btn {
        border-color:$highlighted-alt-font-color;
        color:$highlighted-alt-font-color;

        
        &:hover{
          background:$highlighted-alt-font-color;
          color:$highlighted-alt-background-color;
        }
    }

    }

    
        @media screen and (max-width:400px){
                padding:1.5em 1em;
        }
}



@media (max-width: 768px){
.lead {
    font-size: 21px;
}
}




a.arrow {
    padding: 15px;
    display:block;
    position:relative;
    border-bottom:1px solid $ArrowLinkBorderColor;

    &:first-of-type{
        border-top:1px solid $ArrowLinkBorderColor;
    }


        
    &:after{
    content:'\f105';    
    font-family: FontAwesome;
    font-size: 20px;
    border-radius: 50%;
    border: 2px solid $ArrowLinkColor;
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 2px 0 0 2px;
    margin: -18px 5px 0 0;
    color:$ArrowLinkColor;
    display:inline-block;
    right:0px;
    position:absolute;
    top:50%;
    
 
    }  

       &:hover{
       background:#f2f2f2;

       &:after{
        background:$ArrowLinkColor;
        color:#fff;
    }
       }
}


li a.arrow:first-of-type{
    border-top:none;
}