

html,body{ height: 100%; }
body{ margin: 0; }

h5{margin-left: 25%;
   margin-right: 25%;}

h2{text-align:center;}

p {margin-left: 25%;
   margin-right: 25%;}

section a{ min-height: 100%; }

#info{ background-color: rgb(196,224,173); }
#brochure{ background-color: lightpink; }
#guidebook{ background-color: rgb(200,216,207); }
#typebook{ background-color: lightblue; }

nav{ 
 /* position: fixed; 
  left: 0;
  top: 0;*/
  background-color: lightyellow;
  width: 100%;
}


nav ul { 
    margin-bottom: 0; 
	text-align:center;
}

nav ul li{  
  display: inline-block;
  padding: 5px 25px 1px 25px; 
  
}

nav ul li a { 
  color:black;
  text-decoration: none;
  font-size: calc( 1vw + 8px );
  font-family: verdana, sans-serif;
}

nav ul li a:hover{ 
  color:black;
  text-decoration: underline;
}


/* The grid: six equal columns that floats next to each other */
.columnX {
    float: left;
    width: 15%;
    padding:5px;
    margin-left: 20%;
}

/* Style the images inside the grid */
.columnX img, .columnY img, .columnZ img  {
    opacity: 0.8; 
    cursor: pointer; 
}

.columnX img:hover, .columnY img:hover, .columnZ img:hover   {
    opacity: 1;
}

/* Clear floats after the columns */
.rowX:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container */
.containerX{
    position: relative;
    display: none;
}

/* Expanding image text */
#imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
    position: absolute;
    right: 15px;
    color: black;
    font-size: 35px;
    cursor: pointer;
    bottom: 19em;
}


.container1{
margin-left:20%;
margin-right:20%;
}

.gfx{
width:100%
}







.columnY {
    float: left;
    width: 15%;
    padding:5px;
    margin-left: 20%;
}

#imgtext1 {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
}

.columnZ {
    float: left;
    width: 15%;
    padding:5px;
    margin-left: 20%;
}

#imgtext2 {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
}







