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

/* box model fix here */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}


/* ---NAVIGATION --- */

@media only screen and (max-width:600px){
    nav {
        background-color: #e7eeee;
            padding: .5rem 2%;
    }
    nav ul.navbar {
        list-style-type: none;
        padding:0;
        }
    nav ul.navbar li a {
    padding: .6rem 1.2rem;
    margin-bottom: .4rem;
    background-color: #7E8A51;
    font-weight: 600;
    text-decoration: none;
    display: block;
    border: solid 1px #e7eeee;
    border-radius: .6rem;
    }
    
    nav ul.navbar li a {
    display: block; 
   
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
}
    nav ul.navbar li.active a{
    background-color: #CC9206;
      color: #032B20;
    text-shadow: .5px .5px 0px #f6f6f6;
}
nav ul.navbar li a:hover {
    background-color: #FDCE07;
    color: #fff;
     color:#032B20;
}   
   
    }   

 @media only screen and (min-width: 601px){
    nav {
    background-color: #CC9206;
    background: linear-gradient(to bottom, #D9B106 0%, #CC9206 100%);
 
}
nav ul.navbar {
    list-style-type: none; 
    margin: 0;
    padding: 0; 
}
nav ul.navbar li {
    float: left; 
    
}
nav ul.navbar li a {
    display: block; 
    padding:.5rem 1.2rem; 
    text-decoration: none;
    color: #FFF;
    letter-spacing: 2px;
    border: none; 
    font-weight: 600; 
}

nav ul.navbar li.active a{
        background-color: #FDCE07;
  color: #032B20;
}
nav ul.navbar li a:hover {
        background-color: #51660E; 
    color: #fff; 
}
}
        
    
    
/* --- BODY --- */
body {
   font-family: 'Libre Baskerville', serif;
    color: #000;
    background-color: white; 
    font-size: .9rem;
    background-image: url("images/white_wave.png");
}

/* --- WRAPPER --- */

div#wrapper {
    margin: 0 auto;
    max-width: 1200px; 
    min-width: 200px;
    box-shadow: 0px 0 15px #d3d3d3;   
}

/* --- HEADER --- */

header {
    background-color: #80BFC9;
    padding-left: 3%;
     background-image: url(images/toucan.png);
    background-repeat: no-repeat;
    background-position:.5% 100%;
    background-size:60px;
    
}

header h1 {
    color: #032B20; 
    padding: 1rem 0 .5rem 2rem;
    font-size:2.1rem;
    text-shadow: .5px .5px 0px #f6f6f6;
    margin-left: 2%;
    letter-spacing: -.1rem;
}
header h2 {
    color: #233B3B;
    padding: 0 0 .22rem 2rem;
    margin: -1% 0 0 0;
    font-size: 1rem;
    letter-spacing: .25rem;
    text-shadow: .5px .5px 0px #f6f6f6;
    margin-left: 2%;
}



/* --- MAIN --- */
main {
    padding: .5rem 1.8%; 
    background-color: #FFF;
}
main h1 {
    font-size: 1.5rem;
    color: #51660E;
    margin-bottom: .6rem;
    padding-top: 2%;
}
main h2 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
    color: #CC9206;
    text-shadow: .5px .5px 0px lightgray;
}

main h3 {
	font-size: 1rem; 
	margin-bottom: .5rem; 
	
}
main p {
    padding-bottom: .7rem;
    line-height: 150%;
    padding: 0 1%;
}
main blockquote {
    font-style: italic;
    margin: .4rem 2%;
    font-size: .9rem;
    margin-bottom: 4%;
}
main a {
    color: #52B8C2;
    text-decoration: none;
 color: #51660E;
   
}
main a:hover {
    color: #CC9206;
}


/* --- IMAGES --- */

figure.right {
    float: right; 
    Width: 45%; 
    min-width: 250px;
    margin: .9rem 1% 3% 3%;
}
figure.right img {
    width: 100%;
}


figure.trips {
    float:left;
    height:275px;
    width: 325px; 
    padding-top:.5px;
    border: .5px solid #51660E;
    text-align: center;
    margin: 1rem 2rem 3% 1.5rem; 
}

figure.trips img {
width: 100%;
}

figure.trips figcaption {
    font-size: .5em;
}
figure.trips figcaption span {
    display: block; 
    font-weight: bold;
    font-size: .7rem; 
    color: #233B3B;
}





div.packages {
display: block; 
float: left; 
width: 95%; 
height: auto; 
border: 1px solid #51660E;
border-radius: 5px;  
padding: 2% 2% 1% 1rem; 
background-color: #EFEFEF;
margin: 1% 4% 2% 1%; 
}


div.packages img {
display: block; 
float: left; 
width:42%; 
min-width: 310px; 
margin-right: 3%; 
margin-bottom: 4%; 
}


/* --- VIDEO --- */

.puravida {
    width: 92%;
    margin-left:4%; 
    margin-bottom: 4%; 
    margin-top: 2%;
    height: 25rem; 
    border: none; 
    padding-top: 2%;
}

/* --- FORM STYLING --- */

form.book {
width: 45%; 
min-width: 350px; 
}

form.book fieldset {
    margin-bottom: 2rem; 
    border-radius: .4rem; 
    border: 2px solid #80BFC9;
    font-size: .75rem;
    color:#032B20; 
    color: #000;
    background-color: #EFEFEF; 
    padding-bottom: 1.8rem; 
    padding-left: 1rem; 
}
form.book legend {
    font-weight: bold; 
    margin-left: 1rem;
    color:#CC9206; 
    font-size: .85rem; 
}

form.book input {
color: #000;
font-size: .9rem;  
}


form.book span {
    display: block; 
    padding: .8rem 0 0 .3rem;
}



form.book .userinfo {
    width: 20rem;
    border-radius: .3rem;
    border: solid 1px #032B20; 
    padding: .5rem; 
    
}
form.book .formbutton {
    width: 200px; 
    height: 45px;
    padding: .6rem;
    padding-bottom: .7rem; 
    margin: -1% 0 6% 2%; 
    background: #FDCE07;
    border-radius: .4rem;
    font-weight: bold;
    color:#032B20;
    border: solid 1px #FDCE07; 
}

.small {
font-variant: small-caps; 
font-size: 1rem; 
}



/* --- FOOTER --- */
footer {
     background-color: #032B20; 
    
}
footer p {
    text-align: center;
    padding: .5rem;
    color: white; 
    font-size: .8rem; 
    font-weight: 600; 
}


/* --- OTHER --- */
div.keepOpen {
    clear: both;
}