/* Prevent Bootstrap from overriding SnapPages styles in footer.
   SnapPages uses <span class="h2"><h2 style="font-size:2.6em"> where
   .h2 { font-size:10px } acts as the base unit. Bootstrap's .h2 rule
   would break this by setting font-size:2rem. We remove font-size/weight
   overrides so website.min.css and inline styles cascade correctly. */
#sp-footer .h1, #sp-footer .h2, #sp-footer .h3,
#sp-footer .h4, #sp-footer .h5, #sp-footer .h6 {
    margin-bottom: 0;
    line-height: normal;
}

#sp-footer h1, #sp-footer h2, #sp-footer h3,
#sp-footer h4, #sp-footer h5, #sp-footer h6 {
    margin-top: 0;
    margin-bottom: 0;
}

/* On the main SnapPages site, #sp-wrapper sets font-size:10px as the base,
   then theme CSS #sp-footer { font-size:1.8em } = 10*1.8 = 18px.
   On the calendar site there's no #sp-wrapper, so 1.8em cascades from the
   body's 16px = 28.8px (everything 1.6x too large). We set 18px directly
   to match the main site's computed value. */
#sp-footer{
    font-size: 18px;
    background-color: #ecf0f1;
    margin-top: 80px;
}

.top-footer{
    padding: 40px 40px;
}

.top-footer ul{
    display: flex;
    justify-content: space-between;
    margin-right: 250px;
    list-style: none;
    padding: 0;
}

.top-footer ul li{
    list-style: none;
}

.top-footer ul li ol{
    display: flex;
    flex-direction: column;
}

.top-footer ol{
    margin: 0;
    padding: 0;
}

.top-footer ol li{
    list-style: none;
}

.top-footer ul li ol li a, .top-footer ol li a{
   color: #80c1c6;
   font-family: "Raleway",Arial,"Helvetica Neue",Helvetica,sans-serif;
   font-weight: 500;
   font-size: .7em;
}

.top-footer ul li ol li a:hover, .top-footer ol li a:hover{
    color: #4c5758;
 }

.top-footer ul li span, .top-footer span{
    font-family: "Raleway",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: .9em;
    line-height: 1em;
    text-transform: none;
    letter-spacing: 0em;
    color: #4c5758;
}

#sp-footer .divider{
    border-bottom: 1px solid #4c5758;
    margin: 0 40px;
}

.bottom-footer{
    padding: 40px 40px;
}

.bottom-footer .contact-info ul li a{
    color: #80c1c6;
    font-family: "Raleway",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 500;
    font-size: .7em;
}

.bottom-footer .contact-info ul{
    padding: 0;
    margin: 0;
}

.bottom-footer .contact-info ul li{
    font-family: "Raleway",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5em;
    text-transform: none;
    letter-spacing: 0em;
    list-style: none;
    color: #4c5758;
}

.bottom-footer .contact-info ul li a:hover{
    color: #4c5758;
}

.bottom-footer .social{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-footer .social .copyright{
    line-height: 1em;
}

.bottom-footer .social .copyright h4{
    font-family: "Raleway",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0em;
    color: #4c5758;
    font-size: .7em;
}

.bottom-footer .social .copyright span{
    font-family: "Raleway",Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0em;
    color: #4c5758;
    font-size: .7em;
}

.social-icons{
    display: flex;
    align-items: center;
}

.social-icons a{
    padding: 0 5px;
}

.social-icons a i{
    color: #4c5758;
    font-size: 25px;
}

@media all and (max-width: 480px) {
    .top-footer ul{
        display: flex;
        flex-direction: column;
        margin-right: 0;
    }
    .bottom-footer .social{
        margin-top: 40px;
        display: block;
    }
    #sp-footer .divider{
        margin: 0 15px;
    }
    .bottom-footer{
        padding: 40px 15px;
    }
    .top-footer{
        padding: 40px 15px;
    }
 }

 @media all and (min-width: 480px) and (max-width: 768px) { 
    .top-footer ul{
        margin-right: 0;
    }
    #sp-footer{
        margin-top: 0;
        padding-bottom: 150px;
    }
    #sp-footer .divider{
        display: none;
    }
    
    .bottom-footer{
        display: none;
    }
 }

 @media all and (min-width: 768px) and (max-width: 1024px) { 
    .top-footer ul{
        margin-right: 0;
    }
 }