/* GENERAL APPEARANCE */

body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: #FFECC4;
}

html {
   font-size: 1vw
}

/* DIV APPEARANCE */

.frame {
   width: 100%;
   height: auto;
   position: relative;
   margin: auto;
   top: 50px;
}

.content {
   position: relative;
   width: 60%;
   margin: auto;

}

.logo {
   position: relative;
   left: 0;
   width: 20%;
   text-align: left;
}


.header {
   width: 50%;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: center;
   font-size: 2rem;
   font-weight: bolder;
}

.button {
   position: absolute;
   right: 0;
   width: 10%;
   text-align: center;
   color: black;
}


/* TABLE APPEARANCE */

.grid {
   width: 80%;
   margin: 40px auto;
}

.gridbit {
   width: 17%;
   padding: 10px auto 0 auto;
}

/* CELL APPEARANCE */

.sect {
   font-size: 1.2rem;
   font-weight: bold;
   text-align: left;
   padding: 20px;
   width: 15%;
   color: #0033CC
}

.inst {
   font-size: 0.8rem;
   text-align: center;
   font-style: italic;
   font-weight: bold;
   color: fuchsia
}

/* IMAGE APPEARANCE */

.img {
   width: 10vw;
   height: auto;
   margin: 10px auto 0 auto
}

.PDFimage {
   transiiton: filter 0.5s;
   width:2.5rem;
}

.PDFimage:hover {
   filter: grayscale(100%);
}

.BLKimage {
     width:2rem;
}


/* TEXT APPEARANCE */

.warn {
   font-size: 1rem;
   color: fuchsia;
   font-style: italic;
}