/* Fonts Used:
'Slabo 27px', serif;
'Oswald', sans-serif;
*/


header{
	background: black;
	position: ;
}

body{
	text-align: center;
  background-image: url("fam.png")
}

.urgent{
  color: red;
}

#boxes{
  text-align: center;
  display: inline-block;
}


ul{
  background-color: red;
  margin: 30pt;
  padding: 2pt;
  display: inline-block;
  list-style-type: none;
}

li {
    float: center;
}

li a {
    display: block;
    font-size: 8pt;
    font-family:'Slabo 27px', serif;
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
}

li a:hover {
    background-color: #990000;
}



/*Fading Images*/

#cf {
  position:relative;
  height:312px;
  width:500px;
  margin:0 auto;

}

#cf img {
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

 @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
  margin-top: -200px;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
border: 3px solid black;
}

#cf img.bottom {
  margin-bottom: -18px;
  border: 3px solid black;

}

/* Box */
.box_1 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 14px;
    border: 3px solid red;
    background-color: #ff8080;
    color: #666699;
    font-family: 'Oswald', sans-serif;
    font-size: 22px
}

.box_2 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 14px;
    border: 3px solid purple;  
    background-color: #e600ac;
    color: #666699;
    font-family: 'Oswald', sans-serif;
    font-size: 22px
}

.box_3 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 14px;
    border: 3px solid blue;  
    background-color: #8080ff;
    color: #666699;
    font-family: 'Oswald', sans-serif;
    font-size: 22px
}

.box_4 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 14px;
    border: 3px solid green;
    background-color: #99e699;
    color: #666699;
    font-family: 'Oswald', sans-serif;
    font-size: 22px  
}

.box_5 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 14px;
    border: 3px solid orange; 
    background-color: #ffcc80;
    color: #666699;
    font-family: 'Oswald', sans-serif;
    font-size: 22px 
}

.box_6 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 14px;
    border: 3px solid #ffcc00;
    background-color: #ffe680;
    color: #666699;
    font-family: 'Oswald', sans-serif;
    font-size: 22px
}

/*Boxes*/
.box_1:hover{
  background-color: red;
  color: white;
}

.box_2:hover{
  background-color: purple;
  color: white;
}

.box_3:hover{
  background-color: blue;
  color: white;
}

.box_4:hover{
  background-color: green;
  color: white;}

.box_5:hover{
  background-color: orange;
  color: white;
}

.box_6:hover{
  background-color: #ffcc00;
  color: white;
}

/* Medium Screen Width */

@media screen and (min-width:725px){
	#cf {
  position:relative;
  height:312px;
  width:500px;
  margin:0 auto;
}

li {
    float: left;
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}




}