@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: 4%;
  padding-right: 4%;
}

img {
  border-style: none;
} 

h1 {
	font-size: 14px;
	color: #000000;
    font-family: 'Roboto', 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: #9900ff;
  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: 'Roboto', 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 section3 section3 section4"
    "section5 section6 section7 section8"
    "section9 section10 section11 section12"
    "section13 section14 section15 section16"
    "section17 section18 section19 section20"
    "section21 section22 section23 section24"
    "section25 section26 section27 section28"
    "section29 section30 section31 section32"
    "section33 section34 section35 section36"
    "section37 section38 section39 section40"	
    "section41 section41 section41 section41";
		
  grid-template-columns: 1fr 25.0% 25.0% 25.0%;  
  overflow-x: auto;
  background-color: #ffffff;
  border: 1px solid purple; 
  border-radius: 20px;
  /* grid-gap: 1px; */
}

.header {
  grid-area: section1;
}

.box1 {
	grid-area: section2;
  display: block;
  margin-left: auto;
  margin-right: auto;
	overflow: auto;
	text-align: center;
}

.searchbox {
  grid-area: section3;
  text-align: right;
}

.box2 {
	grid-area: section4;
  display: block;
  margin-left: auto;
  margin-right: auto;	
	overflow: auto;
	text-align: center;
}

.box3 {
	grid-area: section5;
  display: block;
  margin-left: auto;
  margin-right: auto;
	overflow: auto;
	text-align: center;
}

.box4 {
	grid-area: section6;
  display: block;
  margin-left: auto;
  margin-right: auto;	
	overflow: auto;
	text-align: center;
}

.box5 {
	grid-area: section7;
  display: block;
  margin-left: auto;
  margin-right: auto;	
	overflow: auto;
	text-align: center;
}

.box6 {
	grid-area: section8;
  display: block;
  margin-left: auto;
  margin-right: auto;	
	overflow: auto;
	text-align: center;
}

.box7 {
	grid-area: section9;
  display: block;
  margin-left: auto;
  margin-right: auto;
	overflow: auto;
	text-align: center;
}

.box8 {
	grid-area: section10;
  display: block;
  margin-left: auto;
  margin-right: auto;	
	overflow: auto;
	text-align: center;
}

.box9 {
	grid-area: section11;
  display: block;
  margin-left: auto;
  margin-right: auto;	
	overflow: auto;
	text-align: center;
}

.box10 {
	grid-area: section12;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box11 {
	grid-area: section13;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box12 {
	grid-area: section14;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box13 {
	grid-area: section15;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box14 {
	grid-area: section16;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box15 {
	grid-area: section17;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box16 {
	grid-area: section18;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box17 {
	grid-area: section19;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box18 {
	grid-area: section20;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box19 {
	grid-area: section21;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box20 {
	grid-area: section22;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box21 {
	grid-area: section23;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box22 {
	grid-area: section24;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box23 {
	grid-area: section25;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box24 {
	grid-area: section26;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box25 {
	grid-area: section27;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box26 {
	grid-area: section28;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box27 {
	grid-area: section29;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box28 {
	grid-area: section30;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box29 {
	grid-area: section31;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box30 {
	grid-area: section32;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box31 {
	grid-area: section33;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box32 {
	grid-area: section34;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box33 {
	grid-area: section35;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box34 {
	grid-area: section36;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box35 {
	grid-area: section37;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box36 {
	grid-area: section38;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box37 {
	grid-area: section39;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

.box38 {
	grid-area: section40;
  display: block;
  margin-left: auto;
  margin-right: auto;		
	overflow: auto;
	text-align: center;
}

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

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

div {
  padding: 3px;
}
  .container {
      grid-template-areas: 
      "section1"
	  "section2"  
      "section3"
      "section4"
      "section5"
      "section6"
      "section7"
      "section8"
	  "section9"
      "section10"
      "section11"
      "section12"
      "section13"
      "section14"
      "section15"
      "section16"
      "section17"
	  "section18"	  
      "section19"
      "section20" 
      "section21" 
      "section22" 
      "section23" 
      "section24" 
      "section25" 
      "section26" 
      "section27" 
      "section28" 
      "section29" 
      "section30" 
      "section31" 
      "section32" 
      "section33" 
      "section34" 
      "section35" 
      "section36" 
      "section37" 
      "section38" 
      "section39" 
      "section40" 
      "section41";
	  	  
      grid-template-columns: 1fr;
      overflow-x: auto;
      background-color:  #ffffff;
    }
}

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

div {
  padding: 3px;
}

  .container {
      grid-template-areas: 
      "section1"
	  "section2"  
      "section3"
      "section4"
      "section5"
      "section6"
      "section7"
      "section8"
	  "section9"
      "section10"
      "section11"
      "section12"
      "section13"
      "section14"
      "section15"
      "section16"
      "section17"
	  "section18"	  
      "section19"
      "section20" 
      "section21" 
      "section22" 
      "section23" 
      "section24" 
      "section25" 
      "section26" 
      "section27" 
      "section28" 
      "section29" 
      "section30" 
      "section31" 
      "section32" 
      "section33" 
      "section34" 
      "section35" 
      "section36" 
      "section37" 
      "section38" 
      "section39" 
      "section40" 
      "section41";

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