* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* Grid layout */

body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1rem 1fr 1rem;
    grid-template-areas:
        "header header header"
        "hero    hero    hero"
        "....... main  ......"
        "footer footer footer";
}

/*
@media only screen and (min-width: 960px){

    body {
        grid-template-columns: 1rem minmax(200px, 600px) minmax(200px, 600px) minmax(200px, 600px) 1rem;
        grid-template-areas:
            "header header header header header"
            "hero   hero    hero   hero    hero"
            "...... main   main   main ....... "
            "footer footer footer footer footer";
    }
}
*/
header {
    grid-area: header;
}

#hero_section {
    grid-area: hero;
}

.main_content_section {
    grid-area: main;
}

footer {
    margin-top: auto;
    grid-area: footer;
}

/* Nav Bar */

.navbar-brand {
    font-size:35px;
    font-weight:600;
    text-transform:uppercase;   
}

.navbar,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

.navbar-nav {
    margin-left: auto;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

/* navbar underline from left taken from hover.css https://ianlunn.github.io/Hover/ */

.nav-link {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
  }

  .nav-link:before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #4a4e50;
    height: 4px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }

  .nav-link:hover:before, .nav-link:focus:before, .nav-link:active:before {
    right: 0;
  }

  /* modification to make underline permanent on active page */
  .active:before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 0;
    right: 0;
    bottom: 0;
    background: #4a4e50;
    height: 4px;
    } 

/* Hero Section */

#hero_section {
    background-image: url(../images/193_00758.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height:600px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#hero_style {
    position: absolute;
    max-width: 55rem;
    padding-inline: 1rem;
    text-align: center;
    padding: 0.4em 0.6em 0.4em 0.6em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:  rgba(0, 0, 0, 0.5);
    color: #fff;
}

#hero_style > h1 {
    margin: 0;
}

/* Main Content */

.main_content {
    padding: 50px 0px 50px 0px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

/* Footer*/

footer {
    color: #333;
    padding: 10px;
    border-top:#333 1px solid;
    display: flex;
    flex-direction: column;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#footer_social ul {
    margin: auto;
    list-style-type: none;
}

#footer_social li {
    text-align: center;
    padding: 10px;
    display: inline-block;
    border-color: #fff;
}

#footer_social i {
    color: #333;
}

#footer_social i:hover {
    transform: scale(1.5);
}

/* Responsive Footer using same breakpoints and max-width as bootstrap header */

@media (min-width: 576px) {
    footer {
        max-width: 540px;
        flex-direction: row;
    }

    .main_content {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    footer {
        max-width: 720px;
    }

    .main_content {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    footer {
        max-width: 960px;
    }

    .main_content {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    footer {
        max-width: 1140px;
    }

    .main_content {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {    
    footer {
        max-width: 1320px;
    }

    .main_content {
        max-width: 1320px;
    }
}

/* Contact Us Form Style inspired by "Responsive Web Design With HTML5 and CSS" by Ben Frain published by <packt> */

fieldset {
    border-radius: 3px;
    border: 1px solid #666;
    padding: 12px;
}

.form-Wrapper {
    padding:10px;
}

@media (min-width: 800px) {
    .form-Wrapper {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* reverse order to sort the label being after the input */
.form-Input_Wrapper {
    display: flex;
    flex-direction: column-reverse;
}

.form-Input_Wrapper label {
    color: #888;
    font-size: 15px;
    margin-bottom: 5px;
}

@media (min-width: 800px) {
    .form-Input_Wrapper {
        flex-direction: row-reverse;
        align-items: center;
    }
    .form-Input_Wrapper input {
        flex: 0 0 50%;
    }
    .form-Input_Wrapper label {
        flex: 1 0 50%;
        margin-bottom: 0;
    }
    textarea {
        flex: 1 0 50%;
    }
}

.form-Input_Wrapper + .form-Input_Wrapper {
    margin-top: 10px;
}

legend {
    font-size: 1.3em;
    padding: 3px 6px;
    color: #fff;
    margin-bottom: 10px;
    border-radius: 2px;
    width: auto;
    float: none;
}

input, textarea {
    min-height: 40px;
    padding: 2px;
    font-size: 17px;
    border: 1px solid #ebebeb;
    outline: none;
    transition: transform 0.4s, box-shadow 0.4s, background-position 0.2s;
    background: radial-gradient(400px circle, #fff 99%, transparent 99%),
        #f1f1f1;
    background-position: -400px 90px, 0 0;
    background-repeat: no-repeat, no-repeat;
    border-radius: 0;
    position: relative;
    caret-color: var(--caretColor);
}

input:focus,
textarea:focus {
    background-position: 0 0, 0 0;
}

/*color of placeholder text*/
input:placeholder-shown, textarea:placeholder-shown {
    color: #999;
}

/*This changes the color of placeholder text when the input gets focused*/
input:focus:placeholder-shown, textarea:focus:placeholder-shown {
    color: #555;
}

/* legends and inputs */
.contact-form_Wrapper {
    --caretColor: #4a4e50
}
.contact-form_Wrapper legend {
    background-color: #4a4e50;
}
.contact-form_Wrapper input:focus {
    border: 1px solid #4a4e50;
    box-shadow: inset 0 -3px 0 #4a4e50, 0 0 15px 5px #ebebeb;
}

/* Make all inputs scale up when they get focus */
.form-Input_Wrapper input:focus, .form-Input_Wrapper textarea:focus {
    transform: scale(1.06);
}

/* Basic styling to indicate that fields are required */
input:required + label:after, textarea:required + label:after {
    content: "*";
    font-size: 2em;
    position: relative;
    top: 6px;
    display: inline-flex;
    margin-left: 0.2ch;
    transition: color 1s;
}

input:required:invalid + label:after, textarea:required:invalid + label:after {
color: red;
}

input:required:valid + label:after, textarea:required:valid + label:after {
color: green;
}

/* Submit button flipper */
.form-Submit_Btn {
    appearance: none;
    border: 0;
    background: none;
    outline: 0;
    padding: 0;
    margin: 1em 0;
    font-size: 1rem;
}

.flipper {
    perspective: 400px;
    position: relative;
    width: 300px;
    height: 44px;
    display: block;
}

.flipper-object {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.panel {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.flipper-vertical .back {
    transform: rotateX(180deg);
}

.back {
    background-color: #739328;
    color: #fff;
}

.front {
    border: 1px solid #739328;
}

.form-Submit_Btn:hover .flipper-vertical,
.form-Submit_Btn:focus .flipper-vertical {
    transform: rotateX(180deg);
}

/* Heart rate zone calculator styling */

.h2Style {
    text-align: center;
}

.hrTable {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* HR Zones Styles */

#zone1 {
    font-size: 1.5em;
    background-color: #dadada;
    width: 60%;
    padding: 0.2em;
}

#zone2 {
    font-size: 1.5em;
    background-color: #1eb9db;
    width: 70%;
    padding: 0.3em;
}

#zone3 {
    font-size: 1.5em;
    background-color: #a3b928;
    width: 80%;
    padding: 0.2em;
}

#zone4 {
    font-size: 1.5em;
    background-color: #f8c400;
    width: 90%;
    padding: 0.2em;
}

#zone5 {
    font-size: 1.5em;
    background-color: #d02d2d;
    width: 100%;
    padding: 0.2em;   
}