@font-face {
    font-family: Lato-Black;
    src: url('fonts/Lato-Regular.ttf') format('truetype');
}

body {
    margin: 0;
    font-family: 'Lato-Black';
}

a:hover {
    cursor: pointer;
}

.logo {
    width: auto;
    height: 100%;
    float: left;
    padding-left: 1%;
}

.menuBar {
    width: 100vw;
    height: 75px;
    background-color: rgb(0,2,42);
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    z-index: 100;
    display: block;
}


.topnav {
    overflow: hidden;
    padding-top: 15px;
}

@media screen and (min-width: 700px) {
    .topnav {
        float:left;
    }
}

    .menuOption {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 100%;
    }

        .menuOption:hover {
            font-weight: bold;
        }

        .menuOption.active {
            font-weight: bold;
        }

    .topnav .icon {
        display: none;
    }

@media screen and (max-width: 700px) {
    .topnav {
        width: 30%;
        position: absolute;
        left: 70%;
        z-index: 3;
    }
    .menuOption {
        display: none;
    }

        .menuOption.icon {
            float: right;
            display: block;
            color: white;
            font-size: 20px;
        }

    .logo {
        height: 100%;
        width: auto;
    }
}

@media screen and (max-width: 700px) {
    .topnav.responsive {
        background: rgb(0,2,42);
    }

        .topnav.responsive .icon {
            position: relative;
            right: 0;
            top: 0;
            text-align: right;
            color: white;
            font-size: 20px;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            color: white;
            font-size: 10px;
        }
}

.twitter:hover {
    color: #1DA1F2;
}

.instagram:hover {
    color:#e95950;
}

.facebook:hover {
    color: #3B5998;
}

.red {
    color: #821D30;
}

@media screen and (min-width: 700px) {
    .socialsContainerMobile {
        display: none;
    }

    .socialsContainer {
        padding-top: 10px;
        padding-right: 15px;
    }

    .socials {
        color: white;
        font-size: 25px;
        padding-left: 15px;
    }

    .ButtonContainer {
        float: right;
        padding-right: 1%;
        padding-top: 15px;
        display: flex;
    }

    .DonateButton {
        background-color: white;
        color: rgb(0,2,42);
        border-radius: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        font-weight: 900;
        cursor: pointer;
    }

        .DonateButton:hover {
            transform: scale(0.95);
        }

    .HouseHeart {
        font-size: 25px;
        padding-right: 10px;
        float: left;
    }

    .GetInvolved {
        float: right;
        padding-top: 6.5px;
        font-size: 15px;
    }
}

@media screen and (max-width: 700px) {
    .socialsContainer {
        display: none;
    }

    .socialsContainerMobile {
        padding-top: 5px;
        text-align: center;
        position: fixed;
        bottom: 0;
        background-color: rgb(0,2,42);
        width: 100%;
        z-index: 5;
        padding-bottom: 5px;
    }

    .socials {
        color: white;
        font-size: 25px;
        padding-right: 10px;
    }

    .ButtonContainer {
        position: fixed;
        text-align: center;
        left: 43%;
        padding-top: 20px;
    }

    .DonateButton {
        background-color: white;
        color: rgb(0,2,42);
        border-radius: 10px;
        cursor: pointer;
        font-weight: 900;
    }

        .DonateButton:hover {
            transform: scale(0.95);
        }

    .HouseHeart {
        font-size: 25px;
        padding-right: 10px;
        float: left;
    }

    .GetInvolved {
        float: right;
        padding-top: 6.5px;
        font-size: 15px;
    }
}

.footer {
    background-color: #C1C1C6;
    padding: 2%;
    position: relative;
}

@media screen and (min-width: 700px) {

    .footerLogo {
        width: 10%;
        height: auto;
    }

    .footer .botnav {
        float: right;
    }

    .footer a {
        color: rgb(18,7,49);
        text-decoration: none;
        padding-left: 3px;
        font-size: 17px;
    }

        .footer a:hover {
            font-weight: bold;
        }

    .footer p {
        text-align: right;
    }

    .footer .donate_button_container {
       text-align: right;
    }

    .footer_links {
        text-align: right;
    }

    .copyright {
        position: absolute;
        bottom: 0;
        right: 2%;
        font-size: 15px;
    }

    .mobile-break {
        display: none;
    }

    .slingWaterMark {
        text-align: center;
    }

    .slingLogo {
        height: 30px;
        width:auto;
        padding-left: 5px;
        position: absolute;
        bottom: 3.5vh;
    }
}


@media screen and (max-width: 700px) {
    .botnav {
    }

    .footer {
        padding-bottom: 40px;
    }

    .footer img {
        width: 30%;
        height: auto;
    }

    .footer {
        text-align: center;
    }

    .footer a {
        color: rgb(18,7,49);
        text-decoration: none;
        padding-left: 3px;
    }

        .footer a:hover {
            font-weight: bold;
        }

    .footer p {
    }

    .footer_links {
        display: none;
    }
    
    .copyright {
        font-size: 10px;
    }

    .slingWaterMark img {
        width: 7%;
    }
}

@media screen and (min-width: 700px) {
    .mobile-break{
        display: none;
    }
}

/* scrollbar width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* scrollbar Track */
::-webkit-scrollbar-track {
    color: rgb(0,2,42);
    background-color: rgb(0,2,42);
    border-radius: 5px;
}

/* scrollbar Handle */
::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 5px;
}