body {
    margin:0;
    background-image:url(images/beach.jpg);
    font-family:'Open Sans',sans-serif;
    font-size:100%;
    color:#036;
 }
ul {
    padding:0;
    margin:0;
    list-style-type:none;
 }
a {
    text-decoration:none;
 }
#container {
    width:90%;
    margin:auto;
    background-color:#fff;    
 }
#logo {
    display:block;
    width:100%;
 }

#content {
    clear:both;
    position:relative;
    padding:1.5em 5%;
 }
.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #000;
}
h2 {
    clear:both;
    text-align:center;
 }
audio {
    visibility:hidden; 
    height:0; 
    width:0;
 }
#pauseplay {
    float:right; 
    width:32px; 
    height:32px; 
    cursor:pointer;
 }


.innerBox {
  background-color : #ffffff;
  background-repeat : repeat-y;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom : 1em;
}

#left {
    float: left;
    width: 32%;
    padding:5px;
}

#middle { 
    float: left;
    width: 32%;
    padding:5px;
}

#right {
    float:left;
    width:32%;
    padding:5px;
}

.columns {
    width:100%;
}
.left{
    float:left;
    width:300px;    
 }
.right {
    margin-left:360px;
 }
.clear {
    clear:both;
 }
.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
#map {
    height: 100%;
 }
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

#footer {
    background:#f5deb3;
    width:90%;
    margin:auto;
    text-align:center;
    font-family:sans-serif;
    font-size:80%;
    color:#010101;
    padding:0.5em 0;
 }
#footer a {
    color:#010101;
 }
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}