/*Header*/
header {
    background-image: url('images/mixed_team_crop.png');
    background-repeat: no-repeat;
    background-size: 105%;
}

#header_logo {
    padding-left: 1rem;
    padding-top: 0.4rem;
}

#header_text {
    margin: 0.8rem 0 0 0;
    padding-right: 2rem;
    color: #2FBEC2;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    filter: brightness(150%);
}



/*Navbar*/
a:hover {
    color: #FF0000;
}

#nav_button {
    background-color:#FFFFFF;
}

nav {
    background-color: #FDC010;
}

#navbarNav {
    background-color: #FDC010;
}

#pagelinks li {
    font-size: 17px;
}

#title {
    font-size: 30px;
}

#title a {
    font-weight: 800;
    color: #E42D26;
    text-decoration: none;
}

#title a:hover {
    color: #2FBEC2;
}


/*Footer*/
footer {
    background-color:#2FBEC2; /* Sets background colour to blue */
}

#footer_logo {
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}

#footer_text {
    font-weight: bold;
    padding-top: 5px;
    text-align: center;
}

footer ul {
    list-style-type: none;
}

#social_media {
    padding-top: 15px;
    text-align: center;
}

/* Page contents */
main {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

main h2, main h3, main h5{
    color: #E42D26;
}

.button {
    margin-top: 1rem;
    text-align: center;
}

.bold {
    font-weight: bold;
}

.about_content {
    padding-top:1rem;
}


/* Contact page */
.map-responsive{

    overflow:hidden;

    padding-bottom:56.25%;

    position:relative;

    height:0;


}

.map-responsive iframe{


    right:0;

    top:0;

    height:100%;

    width:100%;

    position:absolute;


}

iframe {
    width: 100%;
    height: 500%;
}

#map {
    text-align: center;
}

/* Club Portal */
#club_carousel {
    padding-bottom: 0.4rem; 
 }
 
 #club_portal {
     padding-top: 0.4rem;
 }
 
 #club_portal h3 {
     color: #E42D26;
 }
 
 #club_guidelines li {
     padding-bottom: 10px;
 }
 
 #portal_button {
     padding-bottom: 0.8rem;
     text-align: center;
 }

 /* Services Page */
#fees_list_details img {
    padding-bottom: 0.4rem;
}

#new_members_text h3 {
    padding-top: 0.4rem;
}

#services {
    padding-top: 0.4rem;
}

#services_carousel {
    padding-bottom: 0.4rem; 
 }

#services h3 {
    color: #E42D26;
    padding-bottom: 0.4rem;
}

#services h4 {
    color: #E42D26;
    padding-bottom: 0.4rem;
}

#services h5 {
    color: #E42D26;
}

#services p {
    padding-top: 0.4rem;
}

/* Small viewport */
@media only screen and (min-width: 576px) {
    #header_logo {
        padding-bottom: 0.4rem;
        padding-left: 1rem;
        padding-top: 0.4rem;
    }

    #header_text {
        text-align: center;
        padding-top: 0.6rem;
        color: #2FBEC2;
        font-size: 1.5rem;
        font-weight: bold;
        filter: brightness(150%);
        font-weight: bold;
    }
}

/* Medium viewport */
@media only screen and (min-width: 768px) {
    #header_logo {
        padding-bottom: 0.4rem;
        padding-left: 1rem;
        padding-top: 0.4rem;
    }

    #header_text {
        text-align: center;
        padding-top: 0.8rem;
        color: #2FBEC2;
        font-size: 1.8rem;
        font-weight: bold;
        filter: brightness(150%);
        font-weight: bold;
    }
}

/* Large viewport */
@media only screen and (min-width: 992px) {

    #header_logo {
        padding-bottom: 0.4rem;
        padding-left: 1rem;
        padding-top: 0.4rem;
    }

    #header_text {
        text-align: center;
        padding-top: 2rem;
        color: #2FBEC2;
        font-size: 2rem;
        font-weight: bold;
        filter: brightness(150%);
        font-weight: bold;
    }

    .nav-link {
        width: 100%;
    }

    #pagelinks {
        margin-left: 4rem;
    }

    #pagelinks a {
        margin-left: 0.6rem;
    }

    #social_media {
        padding-bottom: 0.4rem;
        padding-left: 1rem;
        padding-top: 0.4rem;
        text-align: center;
    }

    #footer_logo {
        padding-bottom: 0.4rem;
        padding-left: 1.4rem;
        padding-top: 0.4rem;
        text-align: left;
    }

    #footer_text {
        font-weight: bold;
        padding-bottom: 0.4rem;
        padding-right: 1.4rem;
        padding-top: 0.4rem;
        text-align: right;
    }

    .button-size {
        font-size: 1.5rem;
    }

    /* About Page */
    .about_content {
        padding-top: 0rem;
    }

    
    /* Club Portal */
    #club_summary p {
        font-size: 20px;
        padding-top: 24px;
    }

    #portal_button {
        padding-bottom: 0.8rem;
        padding-top: 1rem;
    }

    /* Services Page */
    #fees_list_details {
        padding-top: 1.4rem;
    }

    #fees_pricing {
        padding-top: 1.4rem;
    }

    #new_members_text p {
        margin-right: 3rem;
    }
}  

/* Extra large viewport */
@media only screen and (min-width: 1200px) {

    #header_logo {
        padding-bottom: 0.4rem;
        padding-left: 1rem;
        padding-top: 0.4rem;
    }

    #header_text {
        text-align: center;
        padding-top: 2.7rem;
        color: #2FBEC2;
        font-size: 2.5rem;
        font-weight: bold;
        filter: brightness(150%);
        font-weight: bold;
    }

    .nav-link {
        width: 100%;
    }

    #pagelinks {
        margin-left: 16rem;
    }

    #pagelinks a {
        margin-left: 0.6rem;
    }

    main p {
        font-size: 1.2rem;
    }

    .button-size {
        font-size: 2rem;
    }

    /* Club Portal */
    #club_guidelines li {
        padding-bottom: 8px;
    }

    /*Services Page */
    #new_members_text p {
        margin-right: 1.8rem;
    }

    #id_card_text ol {
        margin-top: 1.4rem;
    }

}

/* Extra extra large viewport */
@media only screen and (min-width: 1400px) {
    #header_logo {
        padding-bottom: 0.4rem;
        padding-left: 1rem;
        padding-top: 0.4rem;
    }

    #header_text {
        text-align: center;
        padding-top: 3rem;
        color: #2FBEC2;
        font-size: 3rem;
        font-weight: bold;
        filter: brightness(150%);
        font-weight: bold;
    }

    .nav-link {
        width: 100%;
    }

    #pagelinks {
        margin-left: 26rem;
    }

    #pagelinks a {
        margin-left: 0.6rem;
    }

    main p {
        font-size: 1.5rem;
    }

    .button-size {
        font-size: 2.5rem;
    }

    /*Services Page */
    #id_card_text ol {
        font-size: 18px;
        margin-top: 2.6rem;
    }

    #new_members_text p {
        margin-right: 1.8rem;
    }

    #services p {
        font-size: 18px;
    }

    #services ul {
        font-size: 18px;
    }

}

/*Homepage (index.html)*/
/*page contents*/
/* carousel */

#carousel img{
   height: 500px; 
   object-fit: cover;

}

body {
    background-color: white;
    padding: 10px;
}

#container1 {
    padding-top: 4%;
}

#container1 p{
    font-family: Calibri;
    font-size: 20px;
    font-weight: 250;
}

/*adjusting h3 headings*/
#p1 h3{
  color:#E42D26;
  font-weight: 700;
}

#container1 #p2 h3{
    color:#E42D26;
    font-weight: 700;
}

#p3 h3{
    color:#E42D26;
    font-weight: 700;
}

#table{
    padding-top: 0.75%;
}

#table h3{
    color:#E42D26;
    font-style: normal;
    font-weight: 700;
}

/*spacing between the texts and headings*/
#p1 {
    padding-bottom: 0.75%;
}

#p2 {
    padding-bottom: 2%;
}

#p3 {
    padding-bottom: 2%;
}

/*XS viewport carousel*/
@media (max-width: 576px) {
    #carousel img{
        height: 250px;
        object-fit: cover;
    }
}

/*SM viewport carousel*/
@media (max-width: 768px) and (min-width: 576px) {
    #carousel img{
        height: 290px;
        object-fit: cover;
    }
}


/*MD viewport carousel*/
@media (max-width: 992px) and (min-width: 768px) {
    #carousel img{
        height: 350px;
        object-fit: cover;
    }
}

/*LG viewport carousel*/
@media (max-width: 1200px) and (min-width: 992px) {
    #carousel img{
        height: 410px;
        object-fit: cover;
    }
}

/*XL viewport carousel*/
@media (max-width: 1400px) and (min-width: 1200px) {
    #carousel img{
        height: 450px;
        object-fit: cover;
    }
}

#card1 {
    float: left;
}

/*Safety page (safety.html)*/
/*page contents*/

#container1 {
  padding-top: 0px;
}

/*styling h3 for headings*/
#capsize-info h3{
    font-weight: 600;
    color: #E42D26
}

#clothing-info h3{
    font-weight: 600;
    color: #E42D26
}

#links h3{
    font-weight: 600;
    color: #E42D26
}

#numbers h3{
    font-weight: 600;
    color: #E42D26
}


#p1 h3{
    font-family: Calibri;
    font-weight: 600;

}

#p2 h3{
    font-weight: 600;
    color: #E42D26
}

#p1 {
    padding-top: 3%;
}

#p2 {
    padding-top: 2%;
}

#capsize-info {
    padding-top: 2%;
}

#clothing-info {
    padding-top: 2%;
}

#links {
    padding-top: 2%;
}

#numbers {
    padding-top: 2%;
}

#p1 {
    font-size: 20px;
    font-weight: 250;
    font-family: Calibri;
}

#capsize-info p{
    font-size: 20px;
    font-weight: 250;
    font-family: Calibri;
}

#clothing-info p{
    font-size: 20px;
    font-weight: 250;
    font-family: Calibri;
}

body{
    padding: 10px;
}