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

body {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    
}

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

header div {
    padding-left: 1%;
}

header h1 {
    margin: 0;
    color: #FFFFFF;
    letter-spacing: .5px;
}

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: 700;
        text-align: center;
        border-bottom: solid 1px #aaa;
        color: #a7b6af;
        justify-content: space-between;
    }
    
    nav .active a {
        background-color: #c06f45;
        background-image: linear-gradient(to bottom, #c06f45, #b05145);
        color: white;
    }
    
} /*end of the media query*/

/*Wide screen here*/
@media only screen and (min-width: 601px) {
    
    nav {
    background-color: #a7b6af;   
    
    
}
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: #577d78;
    font-weight: 700;
    display: block;
    padding: .83rem 2rem;
}

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

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



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

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

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

main p {
    color: #000000;
    margin: 0 0 1rem 0;
    font-size: 20px;
}

main ol {
    margin: .5rem;
    padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
    width: 14rem;
    background-color: #a7b6af;
    color: #ffffff;
    border: 1px solid #a7b6af;
    border-radius: 5px; 
    list-style-type: circle;

    
}

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

main dl dd {
    color: #577d78;
    font-size: 1.1rem;
}

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: 1.1rem;
}

/* 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: #bf6f45;
    color: #ffffff;
    padding: .5rem;
    width: 15rem;
    border: 1px solid #bf6f45;
    border-radius: 5px;
}

main a {
    color: #747763;
    
}

main a:hover {
    color: #bf6f45;
  }

.beachhero {
    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: .98rem;
    color: #bf6f45;

    
}

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

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

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

div.destinations figcaption {
    text-align: center;
    font-size: 1.1rem;
    color: #bf6f45;
}

div.destinations img {
     border: 1.75px solid #000000;
}

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

}

div.box {
    display: block;
    background: ghostwhite; 
    font-size: 17px; 
    padding: 10px; 
    border: 1.5px solid #bf6f45; 
}
    
div.box img {
            float: left; 
            margin: 5px;
        }
        p {
            text-align: justify;
            font-size: 25px;
        }
    




#disneyland1 {
    padding-right:10px;
}

#keys1 {
    padding-right:10px;
}

#london1 {
    padding-right:10px;
}

/* form info here */

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

.myForm legend{
    color: #bf6f45;
    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: 'EB Garamond', serif;;
    font-size: 18px;
    font-weight: 400;
    }

.myForm textarea {
    height: 6rem;
    width: 34.5rem;
}

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

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

table.our-pricing {
width: 100%;
border-collapse: collapse;

}

table.our-pricing th {
    background-color: #bf6f45;
    color: white;
    padding: .5rem 2%;
    text-align: left;
}

table.our-pricing td {
    color: #54691F;
    padding: .4rem 2%;
}

table.our-pricing tr:nth-child(odd) {
    background-color: #f7f7f7;
}

table.our-pricing tr:hover {
    background-color: rgba(203,225,213,0.8);
}




/* footer stuff here */

footer {
    background-color: #a7b6af;
    text-align: center;
    color: #ffffff;
    padding: 1rem 0;
    font-size: 1.1rem;
    line-height: normal;
}

footer a {
  color: #ffffff;  
    
}

footer a:hover {
    color: #577d78;
    
}

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