/* prevent promblems with different browser*/

*{box-sizing: border-box;}

body {
    font-family: 'Teko', sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    background-color: #ffffff;
}

/* header stuff */
header {
    padding: 1rem 1vw;
    display: flex;
    align-items: flex-end;
    font-size: 1.5rem;
}
header div {
    padding-left: 1vw;
}
header h1{
    margin: 0;
    color: #003f91;
}
header p {
    margin: 0;
    color: #003f91;
    letter-spacing: .5px;
    font-size: 1.25rem;
}
.hero {
    width: 100%;
    margin: 0;
}
.hero img, .image-right img {
    width: 100%;
    height: auto;
}
/* nav stuff */
/*small screen*/
@media only screen and (max-width:600px) {
    nav {
        background-color: #e5f4e3;
        }
    nav ul {
        list-style-type: none;
        padding: 0 2vw;
        margin: 0;
        display: block;
        text-align: center;
}
    nav a {
        font-size: 1.1rem;
        text-decoration: none;
        color: #5da9e9;
        font-weight: 700;
        display: block;
        padding: .83rem 2rem;
    }
    nav li.active a{
        background-color: #98c1d9;
        color: #003f91;
        background-image: linear-gradient(to bottom,#ffffff, #ffffff )
    }
    nav a:hover {
        color: #003f91;
    }

} 
/*end of the media query*/
/*big screen*/
@media only screen and (min-width:601px) {
    nav {
        background-color: #e5f4e3;
        }
    nav ul {
        list-style-type: none;
        padding: 0 2vw;
        margin: 0;
        display: flex;
        }
    nav a {
        font-size: 1.1rem;
        text-decoration: none;
        color: #5da9e9;
        font-weight: 700;
        display: block;
        padding: .83rem 2rem;
        }
    nav li.active a{
        color: #003f91;
        background-image: linear-gradient(to bottom,#ffffff, #ffffff )
        }
    nav a:hover {
        color: #003f91;
        }
} 
/*end of the media query*/

/*main stuff*/
main {
    padding: 1rem 2vw;
}
main h1 {
    color: #003f91;
    margin-bottom: .2rem;
}
main p {
    color: #5da9e9;
    margin: 0 0 .3rem 0;
    font-size: 1.25rem;
}
main ul {
    padding: .5rem 3vw;
    background-color: #e5f4e3;
    color: #003f91;
    list-style-type: square;
}
main ul li {
    line-height: 95%;
    margin-bottom: .6rem;
    margin-top: .6rem;
    font-size: 1.25rem;
}
main address {
    color: #003f91;
    background-color: #e5f4e3;
    padding: .5rem;
    width: 12.5rem;
    border: 1px solid #003f91;
    border-radius: .7rem;
    font-style: normal;
}
main a{
    color: #003f91;
}
main a:hover{
    color:#5da9e9;
}
main h2 {
    color: #5da9e9;
    margin-bottom: .1rem;
}

main h3 {
    color: #5da9e9;
    
}
main h4{
    color: #003f91;
    font-size: 1rem;
}
main dl dt{
    color: #5da9e9;
    font-weight: 700;
}
main dl dd{
 color: #5da9e9; 
   font-size: .9rem;
}
div.bus {
    padding: .5rem;
    width: 100%;
    border: 1px solid #003f91;
    border-radius: .7rem;
    font-style: normal;
}
div.family {
    padding: .5rem;
    width: 100%;
    border: 1px solid #003f91;
    border-radius: .7rem;
    font-style: normal;
}
div.party {
    padding: .5rem;
    width: 100%;
    border: 1px solid #003f91;
    border-radius: .7rem;
    font-style: normal;
}
/*footer stuff*/
footer{
    background-color: #e5f4e3;
    text-align: center;
    color: #003f91;
    padding: 1rem 0;
    font-size: .8rem;
    clear:both;
}

footer a{
    color: #003f91;
}
footer a:hover{
    color:#5da9e9;
}

/*gallery*/
div.gallery {
    display: flex;
    flex-wrap: wrap;
}
div.gallery figure {
    margin: .5rem 2% 0 0
}
div.gallery figcaption {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color:#003f91;
}
div.gallery img:hover{
    box-shadow: 0px 0px 10px rgb(0,27,61)
}

header, nav, main, footer {
    max-width: 64rem;
    margin: 0 auto;
}
/*tables*/
    table {
    width:100%;
    border-collapse: collapse;
    }
    
    table th {
    background-color: #e5f4e3;
    color: #5da9e9;
    text-align: left;
    }
    table td {
        color: #003f91;
        padding: .4rem 2vw;
        align-items: center;
    }
    table tr:nth-child(odd){
    background-color: #F7FDEC;
    }
/*Form*/

.myForm fieldset {
    border: 1px solid #003f91;
    border-radius: 3px;
    margin-bottom: 1rem ;
}
.myForm legend {
    color:#5da9e9;
    font-size: 1rem;
}

.myForm label {
    margin: .5rem;
}

.myForm textarea {
    height: 6rem;
}

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

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

.myForm label, .myForm select,.myForm [type=radio], .myForm [type=text], .myForm [type=checkbox], .myForm [type=tel], .myForm textarea {
    color:#5da9e9;
    display:grid;
}

.myForm [type=text], .myForm [type=tel], .myForm select, .myForm textarea{
border: solid 1px #003f91;
padding: .3rem;
width: 250px;
border-radius: .3rem;
font-family: 'Teko', sans-serif;
font-weight: 300;
}