/* Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
*/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 150px) and (max-width: 768px) { 
    body{
        font-size: 11px;
    }
    .container , .container-fluid {
        max-width: 96%;
        padding-left: 2%;
        padding-right: 2%;
        width: 96%;
    }
    .navbar-toggler {
        height: 50px;
        line-height: 50px;
        color: #FFFFFF;
        margin: 0px;
        padding: 0px;
        font-size: 14px;
        width: 30%;
        text-align: left;
    }
    /*#TopNavigation {
        width: 60%;
    }*/
    #TopNavigation {
        width: 97%;
        float: none;
        position: absolute;
        z-index: 9999;
        top: 51px;
        left: 1px;
    }
    #TopNavigation ul li a {
        border-bottom: #FFFFFF 1px solid;
    }
    .navbar-nav .dropdown-menu {
        position: unset !important;
        float: left;
        width: 100%;
        margin: 0px;
        top: 0px !important;
        transform: none !important;
    }
    .carousel-caption h2 {
        font-size: 18px;
    }
    .carousel-caption:hover a h2 , .carousel-caption:focus a h2 {
        background-color: #000000;
    }
    .carousel-video {
        max-width: 100%;
        height: auto;
    }
    .MainContent , footer {
        padding: 40px 0px;
    }
    .container-News-Stories , .News-Story{
        margin-bottom: 20px;
    }
    .bcfcspon {
        padding: 40px 0px 20px;
    }
    .bcfcspon-logo {
        margin-bottom: 20px;
    }
    footer ul {
        margin-bottom: 20px;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width:991px) {
    .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        max-width: 100%;
    }
    .navbar-toggler {
        height: 50px;
        line-height: 50px;
        color: #FFFFFF;
        margin: 0px;
        padding: 0px;
        font-size: 14px;
    }
    #TopNavigation {
        float: none;
        position: absolute;
        z-index: 1;
        top: 51px;
        left: 0px;
        width: 50%;
    }
    #TopNavigation ul li {
        border-bottom: #FFFFFF 1px solid;
        position: relative;
        background-color:#e2001a; 
    }
    .dropdown-menu {
        position: relative!important;
        width: 90%;
        transform: none !important;
        margin: -1px 0px 0px 10%;
        padding: 0px;
        float: left !important;
        height: auto;
    }
    
    .carousel-video {
        max-width: 85%;
        height: auto;
    }
    .carousel-caption h2 {
        font-size: 30px;
    }
    .MainContent , footer {
        padding: 60px 0px;
    }
    .container-News-Stories , .News-Story{
        margin-bottom: 30px;
    }
    .bcfcspon {
        padding: 60px 0px 30px;
    }
    .bcfcspon-logo {
        margin-bottom: 30px;
    }
    footer ul {
        margin-bottom: 30px;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    #TopNavigation ul li a {
        padding: 0px 15px;
    }

    .carousel-video {
        max-width: 55%;
        height: auto;
    }
    
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}

/* Extra Extra large devices (extra extra large desktops, 2000px and up)*/
@media (min-width: 2000px) {
    .carousel-item {
        text-align: center;
    }
}