/**prevent problems with different browers*/
* {box-sizing: border-box;}

body {
    font-family: 'Montserrat', sans-serif;

    font-size: 18px;
    font-weight: 300;
    margin: 0;
    
}

/* Header Stuff Here*/
header {
    background-color: #337c82;
    padding: 1.5rem 2%;   
    display: flex;
    align-items: flex-end;
}

header div {
    padding-left: 1%;
}

header h1 {
    margin: 0;
    color: #FFFFFF;
}

header p {
    margin: 0;
    color: #FFFFFF;
    letter-spacing: 1.25px;
}

/* nav stuff goes here */

/*Small screen here*/
@media only screen and (max-width: 600px) {
    nav ul {
        margin: 0;
        padding: 0 2%;
    }
    
    nav a{
        display: block;
        padding: .9rem;
        text-decoration: none;
        font-weight: 600;
        text-align: center;
        border-bottom: solid 1 px #aaa;
        color: #919a63;
    }
    
    nav .active a {
        background-color: #919a63;
        background-image: linear-gradient(to bottom, #919a63, #5e5f01);
        color: white;
    }
    
} /*end of the media query*/

/*Wide screen here*/
@media only screen and (min-width: 601px) {
    
    nav {
    background-color: #cbe1d5;   
    
    
}
nav ul{
   list-style-type: none; 
    padding: 0 .1%;
    margin: 0;
    display: flex;
    
}


/* Wayfinding You could just do nav a below if you choose */
/* use padding and NOT margin to make sure the entire block is clickable and NOT just the text */

nav ul li a {
    font-size: 1.3rem;
    text-decoration: none;
    color: #337c82;
    font-weight: 700;
    display: block;
    padding: .83rem 2rem;
}

nav li.active a {
    background-color: #cbe1d5;
    color: #ffffff;       
}

nav a:hover {
    color: #fff;
}
    
} /*end of the media query*/



/* stuff for the main */
main {
    padding: 1rem 2%; 
}

main h1 {
  color: #919a63; 
    margin-top: 0;
    margin-bottom: 1rem;
    }

main h2 {
  color: #919a63;  
    margin-bottom: .2rem;
}

main p {
    color: #000000;
    margin: 0 0 1rem 0;
}

main ol {
    margin: .5rem;
    padding: .5rem 3%;
    width: 12rem;
    background-color: #919a63;
    color: #ffffff;
    border: 1px solid #919a63;
    border-radius: 5px; 
    list-style-type: circle;
    
}

main dl dt {
    color: #337c82;
    font-weight: 700;
    margin-top: 0;
        
}

main dl dd {
    color: #337c82;
    font-size: .97rem;
}

main ul {
    list-style-type: disc;
}

/* to control the distance between two lines of the same paragraph, use line height. to control the distance between two separate items in the list use margin-bottom */

main ul li {
    line-height: 110%;
    margin-bottom: .5rem;
    font-size: .98rem;
}

/* to change the padding do NOT use px but instead divide the pixel number you want by the set font size and that will give you the rem number */

/* border radius rounds the corners really rounded would be good for a button though */

main address {
    font-style: normal;
    background-color: #919a63;
    color: #ffffff;
    padding: .5rem;
    width: 12.5rem;
    border: 1px solid #919a63;
    border-radius: 5px;
}

main a {
    color: #919a63;
    
}

main a:hover {
    color: #337c82;
  }

.jenhero {
    width: 100%;
    margin: 0;

}



figure.wrapped{
    width: 30%;
    margin: 0 0 0 2%;
    float: right;
    
}

figure.wrapped img {
    width: 100%;
    height: auto;
    
}

figure.wrapped figcaption {
    text-align: center;
    font-size: .75rem;
    color: #337c82;

    
}

.jenhero img {
    width: 100%;
    height: auto;
}

div.gallery {
    display: flex;
    flex-wrap: wrap;
}

div.gallery figure {
    margin: .5rem 2% 0 0;
    }

div.gallery figcaption {
    text-align: center;
    font-size: .8rem;
    color: #337c82;
}

div.gallery img:hover {
    box-shadow: 0px 0px 10px black;
}

/* form info here */

.myForm fieldset {
    border: 1px solid #337c82;
    border-radius: 3px;
    margin-bottom: 1rem;
    }

.myForm legend{
    color: #337c82;
    font-size: 1.3rem;    
}

.myForm labels {
    margin: .5rem;    
}

.myForm label, .myForm select, .myForm [type=text], .myForm [type=tel], .myForm [type=email], .myForm textarea {
    display: block;
}

.myForm [type=text], .myForm [type=tel], .myForm [type=email], .myForm select, .myForm textarea, .myForm [type=submit] {
    border: solid 1px #888;
    padding: .3rem;
    width: 250px;
    border-radius: .3rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 300;
    }

.myForm textarea {
    height: 6rem;
}

.myForm :required {
    background-color: #cbe1d5;
    
}

.myForm [type=submit] {
    background-color: #337c82;
    border: none;
    padding: 1rem 2rem;
    border-radius: 10px;
    color: white;
    margin: 1rem 0 0 1vw;
}






/* footer stuff here */

footer {
    background-color: #cbe1d5;
    text-align: center;
    color: #337c82;
    padding: 1rem 0;
    font-size: .87rem;
}

footer a {
  color: #337c82;  
    
}

footer a:hover {
    color: #ffffff;
    
}

/* Width of page coding */
header, nav, main, footer {
    max-width: 64rem;
    margin: 0 auto;
}