li a {
	font-size: 2vw;
	margin-right: 25px;
}

nav{
	background-color: #FFFFFF !important;
}

footer{
    background-color: #373636;
}

#sponsors {
	text-align: center;
}

#social_media{
    text-align: center;
}

#social_media img{
    margin: 30px;
}

body{
    display: flex;
    /*Body has to have the minimum height of the viewport, allowing the footer to be pushed down*/
    min-height: 100vh;
    justify-content: space-between;
    /* Turns all flex items into rows that stacks on top of each other */
    flex-direction: column;
}


.dropdown-item {
	font-size: 1.2vw !important;
}


/* Callum allocated space */
#body1 {
	background-image: url('images/arena.jpg');
	background-repeat: no-repeat;
}
	
#body1, #body2 h3 {
	color: white;
}

#body1, #body2 p {
	color: white;
}

.card-body {
	margin-bottom: -10px !important;
}

#body1, #body2 h1 {
	color: white;
}


.header_blue{
	color: #0498DE !important;
	font-weight: bold;
	font-size: 20px;
}

/* End of callum */
 
/* Eion allocated space */
#container_jb{
    background-color: #0085bd;
    height: auto;
}

#container_jb p{
    color: #FFFFFF;
}

#covid_notice{
    background-color: #002b56;
    /*Aligning content in the center*/
    display: flex;
    align-items: center;
    justify-content: center;
}

#covid_notice p{
    color: #FF3333;
    font-size: 1.2vw;
    margin: 2vw;
    font-weight: 600;
}

#saturday_intro, #hc_introduction{
    /*Background image is centered in the viewport*/
    background-position: center center;
    background-repeat: no-repeat;
    /*Scales the background image proportionally*/
    background-size: cover;
}

#saturday_intro{
    height: 50vw;
}


#saturday_intro_text h1{
    margin-left: 10vw;
    font-size: 6vw;
    margin-top: 3vw;
    color: #FFFFFF;
    width: 40%;
    float: left;
}

#saturday_intro_text p{
    width: 40%;
    font-size: 2vw;
    margin-left: 10vw;
    float: left;
}

#saturday_intro_img img{
    float: left;
    margin-left: 8vw;
}

#membership_button a, #enquiries_button a{
    background-color: #FFFFFF;
    height: 10vw;
    padding: 3vw;
    font-size: 1.2vw;
    margin: 5vw;
    /*How to make the text align in the center*/
    text-decoration: none;
    color: #0085bd;
}


#membership_button a{
    border-radius: 50px;
}

#membership_button{
    text-align: center;
}

#saturday_term1_dates h2 {
    font-size: 3vw;
    color: #FFFFFF;
    padding: 1vw;
}

#saturday_term1_dates p{
    font-size: 2vw;
    padding-bottom: 1vw;

}

#saturday_term1_dates{
    background-color: #044280;
    width: 60vw;
    /*Centering the division*/
    text-align: center;
    /*Centering the text*/
    margin: auto;
    /*Pushing the division further away from the text above*/
    margin-top: 5vh;
}

#sunday_open_gym_title{
    text-align: center;
}

#sunday_open_gym_title h1{
    color: #FFFFFF;
    font-size: 2vw;
    padding: 1vw;
}

.orange{
    color: #FFA500;
}

#white_opacity_bg{
    width: 20vw;
    margin: auto;
}

#sunday_open_gym_title p{
    font-size: 2vw;
    margin-left: 10vw;
    margin-right: 10vw;
}

#enquiries_button{
    text-align: center;
}

#sunday_open_gym_title img{
    width: 20%;
}

table{
    background-color: #FFFFFF;
}

td{
    text-align: center;
    font-size: 1.3vw;
    padding: 3vw !important;
    font-weight: 600;
}

.bigger_text{
    font-size: 2.5vw;
}

td a{
    margin-top: 1vw;
    border-radius: 2vw !important;
    font-size: 1.3vw !important;
}

#hc_introduction{
    margin-bottom: 5vw;
}

#hc_introduction h1{
    /*Makes the font color white*/
    color: #FFFFFF;
    /*Add margin to the left of the header so it isn't too close to the side*/
    margin: 3vw;
    /*Make the font size bigger*/
    font-size: 4vw;
}

#hc_img{
    text-align: center;
}


#hc_introduction_para h2{
    font-size: 3vw;
    color: #FFFFFF;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 3vw;
}

/*Setting the background for the introduction paragraph*/
#hc_introduction_para{
    text-align: center;
    background-image: url(images/basketball_silhouette_2.jpg.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 2.5vw;
}

#hc_introduction_para p{
    font-size: 2vw;
    padding-left: 5vw;
    padding-right: 5vw;
}

.table_left{
    float: left;
    margin-left: 11vw;
}

/*Making the context in this class centered veritcally of the text on the left of it*/
.table_right{
    float: right;
    margin-right: 20vw;
    padding-top: 3.5%;
}


.underline{
    text-decoration: underline;
}

.bigger_text{
    
}

#hc_table th{
    font-size: 2vw;
    text-align: center;
}

.grey{
    color: #D3D3D3;
}

#hc_img img{
    width: 80%;
}

#hc_table a{
    border-radius: 0 !important;
}

#hc_table tr img{
    float: left;
    padding-top: 5%;
    width: 10%;
}

.dark_grey{
    background-color: #808080;
}

#hc_table table{
    margin-bottom: 5vw;
}

.ss_table_bg_1{
    background-color: #44FFF9;
}

.ss_table_bg_2{
    background-color: #FFC300;
}

.ss_table_bg_3{
    background-color: #E8FF00;
}

.ss_table_bg_4{
    background-color: #7839FF;
}

.dark_blue{
    color: #04005E;
}
/* End of Eion */

/* Enoch allocated space */

/* Setting the background colour of the container */
#membershipsContainer {
    background-color: #373636;
}

/* Setting the background image for the cards and aligning it centre */
.card{
    background-image: url(images/button.png);
    background-position: center center;
    background-repeat: no-repeat;
}

/* Adding padding on each of the buttons so that there is some room in between each card */
#cardButton {
    padding: 2vw;
    
}

#cardButton p{
    color: #FFFFFF;
}

/* Changing the colour of the h5 headings in the cardButton container */
#cardButton h5 {
    color: #FFFFFF;
}

/* Making the font responsive in the cardButton container */
#cardButton p {
    font-size: 1vw;
}

/* Setting a background colour for the container and setting a width for the carousel */
#container_home {
    background-color: #373636;
    width: 70%;
    margin: auto;
    
}

/* Making font and line spacing responsive */
#containerList li{
    font-size: 1vw;
    line-height: 2.5vw;
}

/* Setting a different background colour for the divs */
#containerMembers {
    background-color: #999999;
}

/* Changing the colour, positioning, size and responsiveness of the header */
#containerMembers h1{
    font-size: 3vw;
    color: #FFFFFF;
    margin-left: 1.5vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
    text-align: center;
}

/* Changing the colour, adding padding to the intro paragraph and making it responsive */
#info {
    color: #FFFFFF;
    padding: 1.5vw 3.9vw 0vw 3.9vw;
    width: 63vw;
    float: left;
    text-align: center;
    font-size: 1vw;
}

/* Styling for the first image in the website */
#image1 {
    float: right;
    padding-right: 2vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    width: 30%;
}

/* First list on the page */
#fullBenefits {
    color: #FFFFFF;
    width: 45vw;
    padding: 5.5vw 1.6vw 1.6vw 7.8vw;
    float: left;
}

/* Second list on the page */
#multiBenefits {
    color: #FFFFFF;
    width: 45vw;
    padding: 5.5vw 7.8vw 1.6vw 1.6vw;
    float: right;
}

/* Different colour for the second block of the page */
#containerList {
    background-color: #5e5c5c;
}

/* Change in colour to the third block of the page */
#imageBackground {
    background-color: #999999;
}

/* Code for the images */
#image2 {
    float: left;
    padding: 2vw 2vw 2vw 4vw;
    width: 36%;
}

#image3 {
    float: left;
    padding-top: 2vw;
    padding-bottom: 2vw;
    width: 29.6%;
}

#image4 {
    float: left;
    padding: 2vw;
    width: 34%;
}

/* Changing header size and making it responsive */
h4{
    font-size: 1.9vw !important;
    color: #FFFFFF
}

/* End of Enoch */
 


@media (max-width: 576px) {
	li a{
		font-size: 1.5vw;
	}
	
	#logo img{
		width: 60%;
		float: left;
	}

    #sponsors img{
        width: 80%;
    }
    
    footer{
        background-color: #373636;
    }
    
    
    #social_media img{
        width: 3%;
    }
    
	#slogan img {
		width: 0%;
	}
    
    #jb_logo img{
        width: 0%;
    }
    
    #covid_notice{
        height: 5vh;
    }
    
    #saturday_intro_img img{
        width: 30%;
    }
    
    #saturday_intro{
        background-image: url(images/jb_background_mobile.jpg);
    }
    
    #white_opacity_bg{
        background-image: url(images/white_opacity_bg_mobile.jpg);
    }
    
    #hc_introduction_para{
        background-image: url(images/basketball_silhouette_2_mobile.png);
    }
    
    .communtiy_margin {
	   margin-right: 10px;
	   margin-left: 10px;
	}
    
	#body2 {
		background-image: url('images/stands2.jpg');
		background-repeat: no-repeat;
	}
    
    #image1 img{
        width: 100%;
        padding-top: 2.5vw;
    }
    
    #containerList li{
        font-size: 2.4vw;
    }
    
    #info p{
        font-size: 2.4vw;
    }
    
    #cardButton p{
        font-size: 2vw;
    }
    
    #cardButton {
        text-align: center;
    }
}

@media (min-width: 577px){
    #sponsors img{
        width: 80%;
    }
    
    #social_media img{
        width: 3%;
    }
    
	#slogan img {
		width: 100%;
	}
    
    #jb_logo img{
        width: 0%;
    }

    #covid_notice{
        height: 5vh;
    }
    
    #saturday_intro_img img{
        width: 30%;
    }
    
    #saturday_intro{
        background-image: url(images/jb_background_mobile.jpg);
    }
    
    #white_opacity_bg{
        background-image: url(images/white_opacity_bg_mobile.jpg);
    }
    
    #hc_introduction_para{
        background-image: url(images/basketball_silhouette_2_mobile.png);
    }
    
	#body2 {
		background-image: url('images/stands1.jpg');
		background-repeat: no-repeat;
	}
    
    #image1 img{
        width: 100%;
        padding-top: 2vw;
    }
    
    #containerList li {
        padding-bottom: 50px;
    }
    
    #cardButton p{
        font-size: 2vw;
    }
    
}

@media (min-width: 1024px) {
	li a{
		font-size: 1.5vw;
	}
	
	#logo img{
		width: 80%;
		float: left;
	}
    
    #sponsors img{
        width: 70%;
    }
    
    #social_media img{
    width: 3%;
	}
    
	#slogan img {
		width: 100%;
	}
    
    #jb_logo img{
        width: 100%;
    }
    
    #covid_notice{
        height: 7vh;
    }
    
    #saturday_intro_img img{
        width: 40%;
    }
    
    #saturday_intro{
        background-image: url(images/jb_background_tablet.jpg);
    }
    
    #white_opacity_bg{
        background-image: url(images/white_opacity_bg_tablet.jpg);
    }
    
    #hc_introduction_para{
        background-image: url(images/basketball_silhouette_2_tablet.png);
    }
    
    .communtiy_margin {
	   margin-right: 30px;
	   margin-left: 30px;
	}
    
	#body2 {
		background-image: url('images/stands.jpg');
		background-repeat: no-repeat;
	}
    
    #image1 img{
        width: 100%;
    }
    
    #containerList li{
        font-size: 1.8vw;
    }
    
    #info p{
        font-size: 1.8vw;
    }
    
    #cardButton, #fullBenefits, #multiBenefits h4 {
        font-size: 2.5vw !important;
    }
    
    #cardButton p{
        font-size: 1.5vw;
    }
    
}

@media (min-width: 1920px) {
	li a{
		font-size: 1.2vw;
	}
	
	#logo img{
		width: 100%;
		float: left;
	}
    
    #sponsors img{
        width: 60%;
    }
    
    #social_media img{
        width: 2%;
    }
    
	#slogan img {
		width: 100%;
	}
    
    #covid_notice{
        height: 10vh;
    }
    
    #saturday_intro{
        background-image: url(images/jb_background.jpg);
    }
    
    #white_opacity_bg{
        background-image: url(images/white_opacity_bg.jpg);
    }
    
    #hc_introduction_para{
        background-image: url(images/basketball_silhouette_2.jpg.png);
    }
    
    .communtiy_margin {
	   margin-right: 50px;
	   margin-left: 50px;
	}
    
	#body2 {
		background-image: url('images/stands.jpg');
		background-repeat: no-repeat;
	}
    
}