html, body 
{
  min-height: 100%;
  
}

body
{
    width: 90%;
    min-height: 95vh;
    margin: auto;
    font-family: arial, verdana;
    box-shadow: 10px 10px 5px grey;
    border: 1px solid black;
}

a
{
    text-decoration: underline !important;
}

header
{
    width: 100%;
    clear: both;
    margin: auto;
}

.bg-dark
{
    background-color: #4E4B52 !important;
}

.nav-item
{
    font-size: 3vw;
}

.dropdown-item
{
    font-size: 3vw;
}

.navbar-nav a
{
    text-decoration: none !important;
}

.navbar-nav li a
{
    color: white !important;
}

#menuButton
{
    margin: auto;
    width: 25px;
    height: 1vw;
    padding-left: 4vw;
    padding-bottom: 3vw;
    font-size: 1.7vw;
    border: none;
}

.dropdown-menu, hover, .dropdown-item
{
    background-color: #4E4B52 !important;
}

#title
{
    width: 100%;
    min-height: 5.0vh;
    margin: auto;
    padding-top: 1vh;
    font-size: 4vw;
    color: white;
    text-align: center;
    background-color: #4E4B52;
}

#mainBody
{
    min-height: 65vh;
}

#mainContainer
{
    margin-top: 3vh;
}

#mainBoxOne
{
    width: 100%;
    min-height: 75vh;
    margin: auto;
    margin-bottom: 5vh;
    color: black;
    overflow: scroll;
    padding: 1.9vw;
    border-radius: 25px;
    box-shadow: 10px 10px 30px grey;
    border: 1px solid black;
}

#mainBoxOnePics
{
    width: 100%;
    min-height: 75vh;
    margin: auto;
    margin-bottom: 5vh;
    color: black;
    overflow: scroll;
    padding: 1.9vw;
/*    border-radius: 25px;*/
    box-shadow: 10px 10px 30px grey;
    border: 1px solid black;
}

#logo
{
    float: left;
    width: 6vh;
}

#boxHeader
{
    text-align: center;
    width: 100%;
    font-size: 3.0vw;
}

#boxHeader h3
{
    font-size: 6.0vw !important;
}

#bursary h2
{
    font-size: 4.0vw !important;
}

#boxBody
{
    float: left;
    clear: both;
    width: 100%;
    font-size: 3vw;
    min-height: 70vh;
    margin-top: 2vh;
}

#boxBodyPics
{
    float: left;
    clear: both;
    width: 100%;
    font-size: 1vw;
    min-height: 70vh;
    margin-top: 2vh;
}

#supportPics img
{
    width: 100%;
    height: 100%;
    border: 2px solid black;
}

.img_pics
{
    width: 100%;
    height: auto;
    border: 1px solid black;
}

/*.carousel-indicators
{
    width: 75%;
    margin: auto;
}

.carousel-caption
{
    width: 75%;
    max-height: 1vw;
    margin: auto;
    margin-bottom: 1vh;
    padding-bottom: 3vh;
    font-size: 2vw;
    text-align: left;
}*/

legend
{
    font-size: 3vw;
}

#bursaryWinners
{
    margin-bottom: 1em;
}

/* START OF @media */

/* iPhones Landscape */
@media only screen and (max-width: 750px) and (orientation: landscape)
{
    .nav-item
    {
        font-size: 1.5vw;
    }
    
    .dropdown-item
    {
        font-size: 1.5vw;
    }
    
    #mainBoxOne
    {
        width: 100%;
        min-height: 75vh;
        margin: auto;
        margin-bottom: 5vh;
        color: black;
        overflow: scroll;
        padding: 1.9vw;
        border-radius: 25px;
        box-shadow: 10px 10px 30px grey;
        border: 1px solid black;
    }
    
    #logo
    {
        float: left;
        width: 15vh;
    }
    
    #boxHeader
    {
        float: left;
        width: 80%;
        text-align: center;
        margin-top: 2.5vh;
        margin-left: 1vw;
    }
    
    #boxHeader h3
    {
        font-size: 4.0vw !important;
    }
    
    #bursary h2
    {
        font-size: 3.0vw !important;
    }
    
    #boxBody
    {
        font-size: 2vw;
        margin-top: 5vh;
/*        border: 1px dashed blue;*/
    }

/*    .carousel-caption
    {
        width: 75%;
        max-height: 1vw;
        margin: auto;
        margin-bottom: 1vh;
        padding-bottom: 14vh;
        font-size: 2vw;
        text-align: left;
    }*/
    
    legend
    {
        font-size: 2.5vw;
    }    
}

/* iPad Portrait & X/XS iPhones Landscape */
@media only screen and (min-width: 750px) and (orientation: portrait)
{
    .nav-item
    {
        font-size: 1.5vw;
    }
    
    .dropdown-item
    {
        font-size: 1.5vw;
    }
    
    #mainBoxOne
    {
        width: 100%;
        min-height: 75vh;
        margin: auto;
        margin-bottom: 5vh;
    }
    
    #logo
    {
        float: left;
        width: 7vh;
    }
    
    #boxHeader
    {
        float: left;
        width: 70%;
        text-align: center;
        margin-top: 1.5vh;
        margin-left: 1vw;
    }
    
    #boxHeader h3
    {
        font-size: 4.0vw !important;
    }
    
    #bursary h2
    {
        font-size: 3.0vw !important;
    }
    
    #boxBody
    {
        font-size: 2vw;
        margin-top: 5vh;
    }
    
/*    .carousel-caption
    {
        width: 75%;
        max-height: 1vw;
        margin: auto;
        margin-bottom: 1vh;
        padding-bottom: 6vh;
        font-size: 2vw;
        text-align: left;
    }*/
    
    legend
    {
        font-size: 2.5vw;
    }  
}

/* iPad & X/XS iPhone Landscape */
@media only screen and (min-width: 800px) and (max-width: 1400px) and (orientation: landscape)
{
    .nav-item
    {
        font-size: 1.5vw;
    }
    
    .dropdown-item
    {
        font-size: 1.5vw;
    }
    
    #mainBoxOne
    {
        width: 100%;
        min-height: 70vh;
        margin: auto;
        margin-bottom: 5vh;
    }
    
    #mainBoxOnePics
    {
/*        width: 100%;
        min-height: 30vh;
        margin: auto;
        margin-bottom: 5vh;*/
    }
    
    #logo
    {
        float: left;
        width: 9vh;
    }
    
    #boxHeader
    {
        float: left;
        width: 80%;
        text-align: center;
        margin-top: 1.0vh;
        margin-left: 1vw;
/*        border: 1px solid red;*/
    }
    
    #boxHeader h3
    {
        font-size: 3.0vw !important;
    }
    
    #bursary h2
    {
        font-size: 2.0vw !important;
    }
    
    #boxBody
    {
        min-height: 50vh;
        font-size: 1.5vw;
        margin-top: 5vh;
/*        border: 1px dashed blue;*/
    }
    
    #boxBodyPics
    {
        min-height: 30vh;
        font-size: 1.5vw;
        margin-top: 5vh;
/*        border: 1px dashed green;*/
    }
    
/*    .carousel-caption
    {
        width: 75%;
        max-height: 1vw;
        margin: auto;
        margin-bottom: 1vh;
        padding-bottom: 10vh;
        font-size: 2vw;
        text-align: left;
    }*/
    
    legend
    {
        font-size: 2.0vw;
    }
}

/* Extra large devices (iMac, large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) and (orientation: landscape)
{
    #title
    {
        font-size: 3.0vw;
    }
    
    .nav-item
    {
        font-size: 1.0vw;
    }
    
    .dropdown-item
    {
        font-size: 1.0vw;
    }
    
    #mainBoxOne
    {
        width: 100%;
        min-height: 75vh;
        margin: auto;
        margin-bottom: 5vh;
        overflow: auto;
    }
    
/*    #mainBoxOnePics
    {
        width: 100%;
        min-height: 75vh;
        margin: auto;
        margin-bottom: 5vh;
        overflow: auto;
    }*/
    
    #logo
    {
        float: left;
        width: 9vh;
    }
    
    #boxHeader
    {
        float: left;
        width: 85%;
        text-align: center;
        margin-top: 2.0vh;
        margin-left: 1vw;
    }
    
    #boxHeader h3
    {
        font-size: 2.0vw !important;
    }
    
    #bursary h2
    {
        font-size: 1.0vw !important;
    }
    
    #boxBody
    {
        min-height: 50vh;
        font-size: .8vw;
        margin-top: 5vh;
    }
    
    #boxBodyPics
    {
        width: 100%;
        min-height: 50vh;
        font-size: .8vw;
        margin-top: 5vh;
    }
    
    #supportPics img
    {
        width: 50%;
    }
    
    .img_pics
    {
        width: 50%;
    }
    
    #bursary
    {
        width: 100%;
        margin: auto !important;
    }
    
    #bursary p
    {
        text-align: center;
        margin: auto !important;
    }
    
/*    .carousel-inner img
    {
        width: 50%;
        margin: 0px 21vw;
    }
    
    .carousel-indicators
    {
        width: 50%;
        margin: auto;
    }
    
    .carousel-caption
    {
        width: 50%;
        margin-bottom: 0vh;
        padding-bottom: 6vh;
        font-size: 1vw;
        text-align: center;
    }
    
    .carousel-control-prev
    {
        margin-left: 17vw;
    }
    
    .carousel-control-next
    {
        margin-right: 17vw;
    }*/
    
    legend
    {
        font-size: 2.0vw;
    }
}