* {
    /*this is a CSS reset*/
    margin: 0px;
    padding: 0px;
}

/*THIS IS THE MOBILE CODE SECTION////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
body {
    background-color: rgb(129, 198, 209);
    margin: 0;
}

.wrapper {
    width: 100%;
    margin: auto;
    /* this centers the wrapper
}

/* Navagation section ////////////////////////////////////////////////////////
/* background color is transparent so the original nav image remains 
.navLinks {
    overflow: hidden;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
    /*position: fixed;
    top: 20;
    z-index: 3;

}

/* Style the links inside the navigation bar 
.navLinks a {
    float: left;
    display: flex;
    text-align: center;
    padding: 0.888em 1em;
    text-decoration: none;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 1em;
    font-weight: 500;
    color: #fff4D3;


}

a.homeLogo:link {
    cursor: none;
    opacity: 1;
    max-width: 100%;
    height: auto;
    display: flex;
    text-align: left;
    /*margin-block-start: 0.5em;
}

a.homeLogo:hover {
    cursor: pointer;
    opacity: 0.5;

}

a.homeLogo:active {
    cursor: none;
    opacity: 1;
}

/* Change the color of links on hover 
.navLinks a:hover {
    background-color: transparent;
    color: #0d475c;
}

/* Add an active class to highlight the current page 
.navLinks a.active {
    background-color: transparent;
    color: #fff4D3;

}*/

/* Hide the link that should open and close the topnav on small screens
.navLinks .icon {
    display: none;
}
*/
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) 
@media screen and (max-width: 600px) {
    .navLinks a:not(:first-child) {
        display: none;
    }

    .navLinks a.icon {
        float: right;
        display: flex;
        padding-right: 5%;

    }
}*/

/* The "responsive" class is added to the navLinks with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) 
@media screen and (max-width: 600px) {
    .navLinks.responsive {
        position: relative;
    }

    .navLinks.responsive a.icon {
        position: absolute;
        right: 5%;
        top: 0;
    }

    .navLinks.responsive a {
        float: none;
        display: flex;
        text-align: left;
        padding: 5%;
    }
}*/

/*this is the button to return to the top of page*/
/*#myBtn {
    display: none;
    position: fixed;
    bottom: 5%;
    right: 10%;
    z-index: 9;
    font-size: 1.25em;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 4px;
}

#myBtn:hover {
    background-color: #555;
}


@media screen and (max-width: 600px) {

    .navRow {
        margin-top: 60%;
        margin-left: 5%;
    }

    /*Information blocks for each page*/

/*Specific containers for Home Page

    .twoColumnIndex1 {
        margin-top: 10px;
        display: block;
        max-width: 100%;
        height: auto;

    }

    .twoColumnIndex2 {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .twoColumnIndex3 {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .twoColumnLeftA img {
        max-width: 100%;
        height: auto;
    }

    .twoColumnRightA {
        background-color: #fff4d3;
        max-width: 50%;
    }

    .twoColumnLeftB {
        background-color: #70bebc;
        max-width: 50%;

    }

    .twoColumnRightB img {
        max-width: 100%;
        height: auto;
    }

    a.homeLinks:link {
        cursor: none;
    }

    a.homeLinks:hover {
        cursor: pointer;
        text-decoration-line: underline;
    }

    a.homeLinks:active {
        cursor: none;
    }

}*/

/*-----------------DESKTOP CODE STARTS HERE------------------------------------------------------------------------------
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

@media screen and (min-width:601px) {

}*/
body {
    background-color: #ffffff;
    margin: 0;
}


.wrapper {
    margin: auto;
    max-width: 1000px;
    /*This centers the wrapper*/
}

/* styles for the navigation bar for all pages except the Membership, Facilities and Events pages have different background images*/

nav {
    height: auto;
    max-width: 100%;
}

.navBackground1 {
    background-image: url('images/Nav_Home.png');
    background-size: cover;
}

/* for Memebership page*/
.navBackground2 {
    background-image: url('images/Nav_Membership.png');
    height: auto;
    max-width: 100%;
}

/*for the Events page*/
.navBackground3 {
    background-image: url('images/Nav_Eventl.png');
    height: auto;
    max-width: 100%;
}

/*for the Facilities page*/
.navBackground4 {
    background-image: url('images/Nav_Facilities.png');
    max-width: 100%;
    height: auto;
}

.navLinks {
    display: flex;
    justify-content: space-evenly;
}

a {
    color: #fff4D3;
    margin-top: 10px;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 12pt;
    font-weight: 500;
}

a:link {
    color: #fff4D3;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: #0d475c;
    background-color: transparent;
    text-decoration: none;

}

a:active {
    color: #fff4D3;
    background-color: transparent;
    text-decoration: none;

}

a.homeLogo:link {
    cursor: none;
    opacity: 1;
}

a.homeLogo:hover {
    cursor: pointer;
    opacity: 0.5;

}

a.homeLogo:active {
    cursor: none;
    opacity: 1;
}

.navRow {
    margin-top: 200px;
    margin-left: 80px;
}

header {
    margin-top: 10px;
}

header img {
    max-width: 100%;
    height: auto;
}

/* THIS IS FOR THE FACILITIES HEADER ONLY IN ORDER TO INCLUDE A LINK TO THE DRONE VIDEO OF FVSA*/
.heroBackground {
    margin-top: 10px;
    background-image: url('images/facilitiesHero.png');
    height: auto;
    max-width: 100%;
}

.videoLink {
    padding-top: 150px;
    margin-left: 800px;

}

#droneShot:link {
    color: #fff4D3;
    background-color: #0d475c;
    padding: 15px 25px 15px 25px;
    border-radius: 26px;
    text-decoration: none;
}

#droneShot:hover {
    color: #2482a4;
    background-color: #fff4D3;
    padding: 15px 25px 15px 25px;
    border-radius: 26px;
    text-decoration: none;

}

#droneShot:active {
    color: #fff4D3;
    background-color: #0d475c;
    padding: 15px 25px 15px 25px;
    border-radius: 26px;
    text-decoration: none;

}

/* fonts used for each heading and paragraph for all pages. h1 is for all the titles for the text boxes, h2 is for the subtitles that are also used as links*/

h1 {
    font-size: 1.5em;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 20px;
    margin-left: 30px;
}

h2 {
    color: #0d475c;
    font-size: 1.1669em;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin-top: 10px;
    margin-left: 30px;
}

h3 {
    color: #fff4D3;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 1em;
    font-weight: 500;
}

h4 {
    color: #fff4D3;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 0.8331em;
    font-weight: 300;
}

/* this h5 is used only on the text on the navigation bar for Fox Valley Saddle Association*/
h5 {
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 1.3331em;
    font-weight: 500;
    color: #fff4D3;
    text-shadow: 2px 2px #3E4044;
}

p {
    color: #3E4044;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 0.8331em;
    font-weight: 400;
    margin: 20px 30px 0px 30px;

}

/*Information blocks for each page*/

/*Specific containers for Home Page*/

.twoColumnIndex1 {
    margin-top: 10px;
    display: flex;
    height: 400px;
}

.twoColumnIndex2 {
    display: flex;
    height: 404px;
}

.twoColumnIndex3 {
    display: flex;
    height: 388px;
}

/*.twoColumnLeftA {}*/

.twoColumnRightA {
    background-color: #fff4d3;
}

.twoColumnLeftB {
    background-color: #70bebc;

}

/*.twoColumnRightB {}*/

a.homeLinks:link {
    cursor: none;
}

a.homeLinks:hover {
    cursor: pointer;
    text-decoration-line: underline;
}

a.homeLinks:active {
    cursor: none;
}


/*Specific containers for the ABOUT US PAGE*/

.twoColumnPast {
    display: flex;
    height: 708px;
    margin-top: 10px;
}

.twoColumnLeft1 {
    background-color: #fff4D3;
    width: 600px;
    padding-left: 20px;
}

.twoColumnRight1 {
    width: 400px;
}

.twoColumnNow {
    display: flex;
    background-color: #70bebc;
    padding-bottom: 10px;
}

.twoColumnLeft2 {
    width: 600px;
}

.arialImage {
    margin-top: 30px;
}

.arialImageText {
    margin-left: 20px;
    margin-top: 10px;
}


.twoColumnRight2 {
    width: 400px;
    margin-left: 20px;
    margin-top: 20px;
}


/*Containers for MEMEBERSHIP PAGE*/

.oneColumnIndex {
    background-color: #fff4d3;
    margin-top: 10px;
}

.benefitText {
    text-align: center;
    padding-top: 10px;
}

.benefitLinks {
    display: flex;
    justify-content: space-around;
}

a.linkSet2 {
    color: #0d475c;
    margin-top: 10px;
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    font-size: 12pt;
    font-weight: 500;
}

a.sponsor {
    color: #3E4044;
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12pt;
}

a.sponsor:link {
    cursor: none;
}

a.sponsor:hover {
    cursor: pointer;
    text-decoration: underline;
}

a.sponsor:active {
    cursor: none;
}

a.contactInfo:link {
    cursor: none;
}

a.linkSet2:hover {
    cursor: pointer;
    text-decoration: underline;
}

a.linkSet2:active {
    cursor: none;
}

a.infoLinks:link {
    cursor: none;
}

a.infoLinks:hover {
    cursor: pointer;
    text-decoration: underline;
}

a.infoLinks:active {
    cursor: none;
}

.threeColumnIndex {
    display: flex;
    justify-content: space-around;
}

.threeColumnIndex {
    display: flex;
    background-color: #fff4D3;
    justify-content: space-around;
    padding: 10px 10px 20px 10px;
}


/* These Membership containers use the two Column layout */

.twoColumnMembership1 {
    display: flex;
    height: 445px;
}

.twoColumnLeftC {
    width: 500px;
}

.twoColumnRightC {
    background-color: #70bebc;
    width: 500px;
}

.twoColumnMembership2 {
    display: flex;
    height: 440px;
}

.twoColumnLeftD {
    background-color: #fff4d3;
    width: 500px;
}

.twoColumnRightD {
    width: 500px;
}

.twoColumnMembership3 {
    display: flex;
    height: 440px;
}

.twoColumnLeftEE {
    width: 500px;
}

.twoColumnRightEE {
    background-color: #70bebc;
    width: 500px;
}


.membershipProcess {
    display: flex;
    background-color: #fff4D3;
    padding-bottom: 20px;
}

.steps {
    width: 500px;
    justify-content: space-evenly;
    margin: 20px 0px 0px 20px;
}

ol {
    margin-top: 10px;
    margin-left: 30px;
}

ul {
    margin-left: 30px;
}

.tableInfo {
    width: 500px;
    margin: 20px 0px 0px 30px;
}

table {
    border: 2px solid #70bebc;
    border-collapse: collapse;
    border-spacing: 5px;
    margin-top: 30px;
    width: 450px;
}

th {
    background-color: #70bebc;
}

tr {
    border: 2px solid #70bebc;
    border-collapse: collapse;
    table-layout: auto;
    height: 30px;
}

td {
    border: 2px solid #70bebc;
    border-collapse: collapse;
}

.membershipLinks {
    padding: 20px;
}


/* specific containers for EVENTS PAGE, uses twoColumnIndex1, 2 and 3 from HOME PAGE containers and twoColumnLeftA and B, twoColumnRightA and B from HOME PAGE containers*/

.twoColumnIndex4 {
    display: flex;
    height: 459px;
}

.twoColumnIndex5 {
    display: flex;
    height: 401px;
}

/*specific containers for FACILITIES PAGE*/

.twoColumnIndexWater {
    display: flex;
    height: 382px;
    margin-top: 10px;
}

.twoColumnLeftWater {
    width: 500px;
}

.twoColumnRightWater {
    width: 500px;
    background-color: #fff4D3;
}

.twoColumnFacilities1a {
    display: flex;
    height: 261px;

}

.twoColumnFacilities1b {
    display: flex;
    height: 217px;

}

.twoColumnFacilities1c {
    display: flex;
    height: 219px;

}

.twoColumnFacilities1d {
    display: flex;
    height: 310px;

}

.twoColumnFacilities1e {
    display: flex;
    height: 305px;

}

.twoColumnFacilities2a {
    display: flex;
    height: 217px;
}

.twoColumnFacilities2b {
    display: flex;
    height: 245px;
}

.twoColumnLeftFacilitiesA {
    background-color: #70bebc;
    width: 500px;
}

.twoColumnRightFacilitiesA {
    width: 500px;

}

.twoColumnLeftFacilitiesB {
    background-color: #70bebc;
    width: 500px;
}

.twoColumnRightFacilitiesB {
    width: 500px;

}

.twoColumnLeftFacilitiesC {
    background-color: #70bebc;
    width: 500px;
}

.twoColumnRightFacilitiesC {
    width: 500px;

}

.twoColumnLeftFacilitiesD {
    width: 500px;
}

.twoColumnRightFacilitiesD {
    background-color: #fff4D3;
    width: 500px;
}

.twoColumnLeftFacilitiesE {
    width: 500px;
}

.twoColumnRightFacilitiesE {
    background-color: #fff4D3;
    width: 500px;
}

.twoColumnLeftFacilitiesF {
    background-color: #70bebc;
    width: 500px;
}

.twoColumnRightFacilitiesF {
    width: 500px;
}

.twoColumnLeftFacilitiesG {
    background-color: #70bebc;
    width: 500px;

}

.twoColumnRightFacilitiesG {
    width: 500px;
}

/*.arenaText {}*/

#droneShot:link {
    cursor: none;
}

#droneShot:hover {
    cursor: pointer;
    text-decoration: underline;
}

#droneShot:active {
    cursor: none;
}


#waterComplex:link {
    cursor: none;
}

#waterComplex:hover {
    cursor: pointer;
    text-decoration: underline;
}

#waterComplex:active {
    cursor: none;
}


/* Containers for CALENDAR PAGE*/

.twoColumnCalendar {
    display: flex;
    margin-top: 10px;
}

.calendarText {
    background-color: #fff4D3;
    width: 400px;
    padding: 10px 0px 0px 20px;
}

.googleCalendar {
    background-color: #70bebc;
    width: 600px;
    padding: 50px;
}


/*Containers for the CONTACT US PAGE*/

.twoColumnContact1 {
    display: flex;
}

.googleMap {
    background-color: #fff4D3;
    width: 500px;
    margin-top: 10px;
}

.map {
    padding: 30px 75px 30px 75px;
}

.contactInfo {
    background-color: #70bebc;
    margin-top: 10px;
    width: 500px;
}

.contactText {
    margin-top: 30px;
    margin-left: 30px;
}

.twoColumnContact2 {
    display: flex;
    background-color: #fff4D3;
    margin-top: 10px;
}

.message {
    width: 500px;
    margin-top: 30px;
    margin-left: 30px;
}

.messageText {
    width: 500px;
    margin-left: 30px;
}

form {
    margin-top: 10px;
    background-color: #fff4D3;
    padding-left: 20px;
    padding-top: 20px;
}

/*.formStuff {}*/

input[type=text] {
    width: 450px;
    margin-top: 8px;
    background-color: #ffffff;
    font-size: 16pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

input[type=textarea] {
    margin-top: 8px;
    width: 400px;
    height: 200px;
    background-color: #ffffff;
    font-size: 16pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/*-----------------------------addition of the captcha submit information button for humans-----------------------------------*/


.submitButton {
    padding: 20px 0px 20px 0px;
    width: 1000px;
}

input[type=submit] {
    width: 100px;
    padding: 12px;
    color: #ffffff;
    margin-left: 450px;
    background-color: #0d475c;
    border: 2px solid #0d475c;
    box-sizing: border-box;
}



/* this footer style is used on all the pages*/
footer {
    margin-top: 10px;
    background-image: url("images/FooterBar.png");
}

.footerNav {
    display: flex;
    justify-content: space-around;
}

.footerRow {
    display: flex;

}

.fRow1 {
    width: 600px;
    margin: 50px 0px 0px 200px;
}

.fvsaName {
    color: #fff4D3;
    font-family: Tahoma, sans-serif;
    font-size: 12pt;
    font-weight: 500;
}

.footerCopyright {
    margin: 05px 0px 0px 50px;
    color: #fff4D3;
    font-family: Tahoma, sans-serif;
    font-size: 12pt;
    font-weight: 500;
}


.fBlogo {
    margin-left: 60px;
}

a.fBlogo:link {
    opacity: 1;
}

a.fBlogo:hover {
    cursor: pointer;
    opacity: 0.5;
}

a.fBlogo:active {
    opacity: 1;
}

.footerFacebook {
    width: 400px;
    color: #fff4D3;
    margin-left: 350px;
    font-family: Tahoma, sans-serif;
    font-size: 12pt;
    font-weight: 500;
}

/* this is used for only the About Us and Facilities pages*/
.footnote {
    margin-left: 300px;
    font-family: Tahoma, sans-serif;
    font-size: 10pt;
    font-weight: 400;
}


/*fonts used in this website*/
.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.pt-sans-narrow-regular {
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
}