/* CSS reset */
body, p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

/* Box Model */
* {
    box-sizing: border-box; 
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: white;
    background-image: url(images/body-gradient.gif);
    background-repeat: repeat-x;
    
    font-size: 16px;
}
body h1, h2, dt {
    font-family: 'Playfair Display', serif;
}

/* wrapper */

div#wrapper {
    margin: 0 auto;
    max-width: 1250px;
    box-shadow: 0 0 10px #777;

}


/* --header-- */
header {
    background-color: #f3f3f3;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-size: 37px;
    background-position: 2% 1rem;
}

header h1 {
    color: #333;
    padding: 1rem 0 0 4.5rem;
    font-size: 1.75rem;
}
header h2 {
    color: #333;
    padding-left: 4.5rem;
    font-size: .86rem;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
}


/* --navigation-- */
/* --phone nav-- */
@media only screen and (max-width: 800px) {
    nav {
        background-color: #f3f3f3;
        
        padding: .5rem 2%;
    }
    nav ul.mynav {
        list-style-type: none;
        padding: 0;
        text-align: center;
    }
    nav ul.mynav li a {
        padding: .2rem 1rem;
        margin-bottom: .5rem;
        color: #f3f3f3;
        background-color: #555;
        
        font-weight: 600;
        text-decoration: none;
        display: block;
        border: solid 1px #dfdfdf;
        border-radius: .5rem;
    }
    nav ul.mynav li a:hover {
        background-color: #f3f3f3;
        color: #000;
    }
    nav ul.mynav li.active a {
        background-color: #d44927;
    }
    
    
    
    
} /*end phone nav*/

/* --desktop nav-- */
@media only screen and (min-width: 801px) {
   nav { 
        background-color: #555;
        background: linear-gradient(#777 0%, #333 100%);
        font-family: 'Roboto', sans-serif;
        border-top: solid 1px #000;
        border-bottom: solid 1px #000;
    }
    nav ul.mynav {
        margin: 0;
        padding: 0;
    }
    nav ul.mynav li{
        float: left;
        list-style-type: none;
    }

    nav ul.mynav li a {
        display: block;
        padding: .5rem 1.5rem;
        color: #f3f3f3;
        text-decoration: none;
        border-right: solid 1px #f3f3f3;
    }

    nav ul.mynav li a:hover {
        background-color:#f3f3f3;
        color: #000;
    }

    nav ul.mynav li.active a {
        background-color: #D44927;
    }

    .keepOpen {
        clear: both;
    }
} /*end desktop nav*/

/* --main--*/
main {
    padding: .5rem 2%;
    background-color: #fff;
}
main h1 {
    font-size: 1.5rem;
    color: #5A95A7;
    border-bottom: 1px solid lightslategray;
    margin-bottom: .4rem;
    text-shadow: 2px 2px #ddd;
}
main h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: .2rem;
}
main p {
    padding-bottom: .8rem;
    line-height: 150%;
}
main blockquote {
    margin: .4rem 2%;
    font-size: .9rem;
}
main a {
    color: #D44927;
}
main a:hover {
    color: #5A95A7;
}

/* --lists-- */
main ul.check, ol.bulb {
    margin: 0 0 .8rem 0;
    padding: 0 0 0 2rem;
}
main ul.check {
    list-style-image: url(images/check.png)
}
main ol.bulb {
    list-style-image: url(images/lightbulb.png)
}

main dl dt {
    margin: 0;
    font-weight: 600;
    padding: 0 0 0 1rem;
}
main dl dd {
    margin: 0;
    padding: 0 0 .75rem 2rem;
}

/* styling images */
figure.bioPhoto {
    margin: 0 0 0 2%;
    padding: .5em;
    float: right;
    border: 1px solid #999;
    width: 30%;
    box-shadow: 0 0 10px #777;
}
figure.bioPhoto img {
    width: 100%;
}
figure.bioPhoto figcaption {
    text-align: center;
}

#gallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 5% 0 5%;
}

figure.portfolio {
    margin: 1rem;
    padding: .5em;
    border: 1px solid #999;
/*    width: 25%;*/
    width: 400px;
}
figure.portfolio img {
    width: 100%;
}

/*
#gallery img {
    width: 80%
}
*/



/* form styling */
form.booking fieldset {
    margin-bottom: 2rem;
    border-radius: .5rem;
    font-size: .8rem;
    color: #555;
}

form.booking legend {
    font-size: 1rem;
    margin-left: 1rem;
}
form.booking span {
    display: block;
    padding: .8rem 0 0 .3rem;
}
form.booking .userinfo {
    width: 20rem;
    border-radius: .6rem;
    border: solid 1px #ddd;
    padding: .4rem;
}
form.booking .userbutton {
    width: 20rem;
    padding: .8rem;
    margin-left: 2%;
    background: #D44927;
    border: solid 1px #bbb;
    border-radius: .6rem;
}
form.booking .userbutton:hover {
    color: white;
    background: #5A95A7;
}
form.booking textarea {
    display: block;
    border-radius: .6rem;
    border: solid 1px #ddd;
}

/* --map-- */
iframe.mymap {
    border: 1px solid #ddd;
    width: 96%;
    margin-left: 2%;
}


/* --table-- */
table.pricing {
    border-collapse: collapse;
    font-size: .8rem;
    border: 1px solid #ddd;
    margin: 0 .25rem 2%;
    width: 98%;
}

table.pricing th {
    text-align: left;
    background-color: #d44927;
    color: #f3f3f3;
    font-size: 1.2rem;
    padding: .1rem .5rem;
}

table.pricing td {
    padding: .5rem;
}

table.pricing tr:nth-child(even) {
    background-color: #ddd;
}

table.pricing tr:hover {
    background-color: #333;
    color: #f3f3f3;
}

/* --video-- */
iframe.myvideo {
    width: 98%;
    margin-left: 1%;
    height: 640px;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* --footer-- */
footer {
    background-color: rgb(90,149,167)
}
footer p {
    text-align: center;
    color: white;
    padding: .5rem;
    font-size: .8rem;
    font-weight: 600;
}