@charset "utf-8";
body {
  background-image: url(/images/fish/ripples-background.jpg);
  background-color: #f6f6f6;
  background-size: cover;
  background-repeat: repeat;
  background-position: center top;	
  background-attachment: scroll;
  font-family: 'Roboto', sans-serif; font-size: 14px;  
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding-left: 2%;
  padding-right: 2%;
}

img {
  border-style: none;
} 

h1 {
	font-size: 16px;
	color: #000000;
    font-family: 'Broadway Regular', sans-serif;
	text-decoration: none;
}

h2 {
  font-size: 14px;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;

}

h3 {
  color: #000000;
  font-size: 14px;  
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

h4 {
  color: #000000;
  font-size: 14px;  
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

h5 {  
  color: #000000;
  font-size: 14px;  
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

a {
  font-size: 14px;
  color: #3300ff;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

a:visited {
  font-size: 14px;
  color: #ff0000;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

p {
	font-size: 14px;
	color: #000000;
	font-family: Roboto, sans-serif;
	text-decoration: none;
}

i {
  font-size: 12px;
  font-style: italic;
  font-family: Arial, sans-serif;
  text-decoration: none;
}

em {
  font-size: 14px;
  font-style: italic;
  color: #0000ff;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
}

.smaller-text {
    font-size: smaller;
}

.responsive-image {
    width: 100%; /* Makes the image take up the full width of its container */
    height: auto; /* Maintains the aspect ratio */
    max-width: 100%; /* Prevents the image from getting larger than its container */
    display: block; /* Removes the extra space at the bottom of images */
}

.clearfix {
  clear: both;
}

div {
  padding: 3px;
}

* , *:before, :after {
	box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-areas: 
    "section1 section1 section1 section1"
    "section2 section2 section2 section2"
    "section3 section3 section3 section3"
    "section4 section4 section4 section4"
    "section5 section6 section7 section8"
    "section10 section11 section12 section13"
    "section14 section19 section19 section20"
    "section21 section21 section21 section21";
		
  grid-template-columns: 1fr 24% 24% 26%;  
  overflow-x: auto;
  background-color: #ffffff;
  border: 1px solid purple; 
  border-radius: 20px;
  /* grid-gap: 1px; */
}

.header {
  grid-area: section1;
  text-align: center;
}

.searchbox {
  grid-area: section2;
  overflow: auto;
}

.expand {
	grid-area: section3;
	overflow: auto;
	text-align: center;
}

.byline {
	grid-area: section4;
	overflow: auto;
	text-align: left;
}

.sidebar {
  grid-area: section5;
  text-align: center;
}

.marina {
	grid-area: section6;
	text-align: left;
}

.contact {
	grid-area: section7;
	text-align: left;
}

.gps {
	grid-area: section8;
	text-align: center;
}

.sidebar1 {
	grid-area: section10;
	text-align: center;
}

.bodytext {
	grid-area: section11;
	text-align: left;
}

.bodytext2 {
	grid-area: section12;
	text-align: left;
	top: auto;
}

.bodytext3 {
	grid-area: section13;
	text-align: left;
}

.space {
	grid-area: section14;
	text-align: center;
}

.link {
  grid-area: section19;
  overflow: auto;
}

.space2 {
  grid-area: section20;
	text-align: center;
}

.footer {
  grid-area: section21;
  text-align: center;
}

@media all and (max-width: 768px) {
body {
  padding-left: 2%;
  padding-right: 2%;
}

div {
  padding: 5px;
}
  .container {
	grid-template-areas: 
      "section1" 
      "section2"
      "section3"
      "section4"
      "section5"
      "section6"
      "section7"
	  "section8"
      "section10"
      "section11"
      "section12"
      "section13"
	  "section14"	  
      "section19"
	  "section20"
      "section21";
	grid-template-columns: 1fr;
	overflow-x: auto;
	background-color:  #ffffff;
	font-family: Roboto, sans-serif;
    }
}

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
body {
  padding-left: 2%;
  padding-right: 2%;
}

div {
  padding: 5px;
}

  .container {
      grid-template-areas: 
      "section1" 
      "section2"
      "section3"
      "section4"
      "section5"
      "section6"
      "section7"
	  "section8"
      "section10"
      "section11"
      "section12"
      "section13"
      "section14"
      "section19"
	  "section20"
      "section21";

      grid-template-columns: 1fr;
      overflow-x: auto;
      background-color:  #ffffff;
    }
}