html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

header, section, footer, aside, nav, main, article, figure { display: block; }

body {  line-height: 1.5em; color: #333; font-family: "PT Sans Narrow","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif; font-size: 1em; background: #e2f0ff; }

p { ; }

h1, h2, h3, h4, h5, h6 { font-family: inherit; line-height: 1em; color: inherit; text-rendering: optimizelegibility;  word-wrap: break-word; font-weight: normal; }
h1 { font-size: 2.6em; margin: 3% 2% .4% 2%; }
h2 { font-size: 1.8em; margin: 1.5% 2% .4% 2%; }
h3 { font-size: 1.5em; margin: 1.5% 2% .4% 2%; }
h4 { font-size: 1.2em; margin: 1.5% 2% .4% 2%; }

a:hover, a:active { outline: 0; }
a { color: #0088cc; text-decoration: none; font-weight: bold; }
a:focus {  outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
a:hover { color: #005580; text-decoration: underline; }

h2 a { font-weight: normal; /*color: #333;*/ }
h3 a { font-weight: normal; /*color: #333;*/ }

#page-container { margin-right: auto; margin-left: auto; background-color: #fff; *zoom: 1; overflow: hidden; max-width: 1200px; }

img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }

.fine-print { font-size: 0.8em; }

.clear { clear: both; *zoom: 1; }

header { background: url('/homepage-images/baja-california-sur.jpg') #75bcf9; position: relative; width: 100%; background-size: cover; }
header h1 { font-size: 2.6em; margin: 1% 2% .4% 6%; }
header h2 { font-size: 1.8em; margin: .5% 2% .4% 6%;; }

#title-padding { padding-top: 16%; }
#title-container {  position: absolute; top: 0;  bottom: 0; left: 0; right: 0; }
#title-container h1 { color: #fff; text-shadow: 1px 2px 1px #111; }
#title-container h2 { color: #fff; text-shadow: 1px 2px 1px #111; }

#primary-content { float: left; width: 75%; margin-top: 1em; text-align: center; }

#primary-content h2 { margin-top: 1.5em; }
#primary-content h3 { margin-top: .5em; }
#primary-content ul li { display: inline-block; height: 12em; width: 15em; }
#primary-content ul { margin: 1.5em 0; }

#featured-container {opacity:.85; position: relative; display: inline-block; margin: 5% 10% 1%; }
#featured-container:hover { opacity: 1; }
#image { z-index: 9; }
#image { }
#play { background: url('/homepage-images/play-button.png') center center no-repeat; position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; z-index: 10; pointer-events: none; }


#travel-info { float: right; width: 25%; }
#travel-info p { line-height: 1.2em; margin: .2em 0 .6em; }
#travel-info img { margin: 0; }
#travel-info ul { margin: 1em 0 2em; }
#travel-info h2 a { color: #333; }
#travel-info h3 a { color: #333; }

.travel-info-list { width: 90%; max-width: 320px; margin-right: auto; margin-left: auto; margin-top: 1em; }

footer { clear: both; text-align: center; padding-bottom: 1em; }
footer li { display: inline-block; padding: 0 1em; }
footer a {  width: 30%; }


/*mobile styles*/ 
@media only screen and (max-width:480px) {
#page-container { width: 100%; }
header { background-image: url(none); }
#title-padding { padding-top: 28%; }
#primary-content { float: none; width: 100%; }
#travel-info { float: none; width: 100%; }
.travel-info-list { width: 60%; }
	}

/*tablet styles*/
@media only screen and (min-width:481px) and (max-width:900px) {
#page-container { width: 100%; }
#title-padding { padding-top: 22%; }
#primary-content { float: none; width: 100%; }
#travel-info { float: none; width: 100%; }
.travel-info-list { width: 40%; }

	}

/*desktop styles*/
@media only screen and (min-width:901px) and (max-width:1200px) {
#page-container { width: 100%; }
	}

/*large display styles*/
@media only screen and (min-width:1201px) {

	}