/* mystyle.css */

html, body, #wrapper {
    width: 100%;
    min-height: 100%;
}
body{
  margin:0;
  font-family:Comic Sans MS,Arial,Helvetica,sans-serif;
  background-image:url("images/main.png");
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

.header {                                       /* Header Section */
  position:fixed;
  left:0;
  top:0;
  width:100%;
  background-color:rgba(0,0,0,1);
  text-align:center;
  color:#f2f2f2;
  font-weight:bold;
}

.topnav{                                  /* Menu Section */
  overflow:hidden;
}

.topnav a{
  float:left;
  background-color:rgba(4,124,180,0.05);
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
  color:#f2f2f2;
  font-size:17px;
}

.topnav a:hover{
  background-color:rgba(255,0,0,0.6);
  border-radius:15px;
}

.topnav a.active{
  background-color:rgba(255,0,0,0.6);
  border-radius:15px;
}

.topnav-right{
  float:right;
}

.title-row{                                  /* Title Section */
  position:absolute;
  text-align:left;
  font-size:35px;
}

.special{
  text-decoration: none;
  color:#ffffff;
  font-size:35px;
}


div.middle{                             /* Boxes in the middle of the page */
  position:absolute;
  text-align:center;
  top:50%;
  font-size:22px;
  font-weight:bold;
  color:#000000;
}


.middle#left{                             /* Middle Left Boxes in the middle of the page */
  left:18%;

}
.middle#center{                             /* Middle Center Boxes in the middle of the page */
  left:43%;

}
.middle#right{                             /* Middle Right Boxes in the middle of the page */
  left:68%;
}

.container{                             /* Hover function over the boxes in the middle of the page */
}

.gimage{
  opacity:1;
  display:block;
  transition:.5s ease;
  backface-visibility:hidden;
}

.gmiddle{
  transition:.5s ease;
  opacity:0;
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
}

.container:hover .gimage{
  opacity:0.5;
}

.container:hover .gmiddle{
  opacity:1;
}

.gtext{
  background-color:rgba(250,10,10,.7);
  color:#000000;
  font-size:16px;
  padding:10px 20px;
  border-radius:15px;
}

.footer {                                       /* Footer Section */
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  background-color:rgba(0,0,0,.5);
  color:#000000;
  text-align:center;
}

table.center {
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

.bottomnav{                                  /* Footer Section */
  overflow:hidden;
}

.bottomnav a{
  float:left;
  color:#0645AD;
  text-align:center;
  padding:5px 6px;
  font-size:17px;
}