@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/* General CSS used throught website */

* {
    margin: 0;
    padding: 0;
    border: 0;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    padding-right: 0;
    padding-left: 0;
}

p {
    font-family: "lato", sans-serif;
    text-align: left;
}

h2 {
    padding-top: 20px;
    font-family: "Lato", sans-serif;
    font-weight: 700;

}


/*.body-style css used to center webite on larger screen sizes*/
body {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
}

/*Navigation*/
nav {
    background-color: #130a02;
}

.navbar-dark .navbar-nav .nav-link {
    color: #0ad6ff;
    font-family: "Lato", sans-serif;
    font-weight: 400;
}

.navbar-dark .navbar-toggler {
    color: #0ad6ff;
    margin-left: 5px;
}

/* Header  */

.rams-cycling-club-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    min-width: 25%;
}

#header-hero-background-image {
    background: url(../images/HeaderHeroBackgroundImageBW.png)no-repeat center center;
    background-size: 2000px
}

.header-container {
    padding-top: 50px;

}

/* About Us*/

.about-us-hero-image-first {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.about-us-hero-image-second {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.about-us-heading {
    background-color: #130a02;
    color: #0ad6ff;
    height: 75px;
}

/*Club Rides*/

.club-ride-heading {
    background-color: #130a02;
    color: #0ad6ff;
    height: 75px;
}


#map {
    height: 500px;
    /* The height is 400 pixels */
    width: 70%;
    /* The width is the width of the web page */
    margin-left: auto;
    margin-right: auto;
}

.club-ride-buttons-outter {
    padding-top: 25px;
    padding-bottom: 25px;
}


.button-passive {
    width: 50%;
    height: 100px;
    text-decoration: none;
    display: inline-block;
    font-family: "lato", sans-serif;
    border-radius: 8px;
    font-weight: 400;
    background: #130a02;
    color: #0ad6ff;
    border: 4px solid #0ad6ff;
    font-size: 1rem;
}

.button-active {
    width: 50%;
    height: 100px;
    text-decoration: none;
    display: inline-block;
    font-family: "lato", sans-serif;
    border-radius: 8px;
    font-weight: 400;
    background: #0ad6ff;
    color: #130a02;
    border: 4px solid #130a02;
    font-size: 1rem;
}

/*Join the Crew*/

.join-the-crew-heading {
    background-color: #130a02;
    color: #0ad6ff;
    height: 75px;
}

form {
    font-family: "lato", sans-serif;
}

.form-send-button-passive {
    width: 50%;
    height: 50px;
    text-decoration: none;
    display: inline-block;
    font-family: "lato", sans-serif;
    border-radius: 8px;
    font-weight: 400;
    background: #130a02;
    color: #0ad6ff;
    border: 4px solid #0ad6ff;
}

.form-send-button-active {
    width: 50%;
    height: 50px;
    text-decoration: none;
    display: inline-block;
    font-family: "lato", sans-serif;
    border-radius: 8px;
    font-weight: 400;
    background: #0ad6ff;
    color: #130a02;
    border: 4px solid #130a02;
}

/*Footer*/

.footer {
    min-height: 60px;
    height: auto;
    margin: 0;
}

.footer-background {
    background-color: #130a02;
}

.social-align {
    text-align: center;
}

.social-links li a i {
    padding-top: 20px;
    font-size: 2rem;
    width: 50px;
    text-align: center;
    text-decoration: none;
    color: #0ad6ff;
    letter-spacing: 20px;
}

/*Hover*/

/*Hover Navigation*/

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #b00404;
}

/*Hover Icons*/

.fa-instagram:hover {
    color: #b00404;
}

.fa-twitter:hover {
    color: #b00404;
}

.fa-facebook-square:hover {
    color: #b00404;
}