@charset "UTF-8";
/* CSS Document */

/*==== Styles for Index Page====*/
#intro p {
background-color: rgba(223,1,0,0.86);
color: white;
}





#backgroundLayer {
  background-color:#DF0000;
  }



#content ul li a {
background-color: rgba(223,1,0,0.86);
}


#footer {
  color:#DF0000;
  }
  
/*==== Custom Front Page Buttons ====*/

#welcome {
box-sizing: border-box;
margin-top: 35px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 8px;
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-size: 30px;
line-height: 38px;
max-width: 500px;
}

.welcomeName {
white-space: nowrap;
}

#content #buttonMenu {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left:20px;
list-style: none;
max-width: 400px;
width:100%;
box-sizing: border-box;

}

#content #buttonMenu li {
display:inline-block;
width: 32%;
padding: 0;
margin: 0;
box-sizing: border-box;
}

#content #buttonMenu li a {
display: block;
border-style: solid;
border-width: 2px;
border-color: black;
border-radius: 16px;
text-decoration: none;
background-color: white;
overflow: hidden;
}

#content #buttonMenu li a svg {
width: 100%;
display: block;
box-sizing: border-box;
}

#content #buttonMenu li a svg .normal{
transition: all .3s ease-out;
}

#content #buttonMenu li a svg .hoverText{
transition: all .6s ease-out;
}

#content #buttonMenu li a:hover svg .hoverText {
opacity: 1;
}


#content #buttonMenu li a:hover svg .normal {
transform: translateY(150px);
}


.topLabel {
font-size: 49px;
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
}

.hoverText {
font-family: 'Source Sans Pro', 'Myriad Pro', sans-serif;
font-weight: 500;
font-size: 90px;
opacity: 0;
}

#bAboutFill {
fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-miterlimit:10;
}

#bAboutLines {
fill:none;stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;
}


@media screen and (max-width: 980px) and (min-height: 770px) {
#welcome {
max-width: none;
}
}


@media screen and (max-width: 450px) and (max-height: 760px) {
#welcome {
margin-top: 25px;
font-size: 24px;
line-height: 28px;
margin-bottom: 4px;
}
}
@media screen and (max-width: 610px) and (max-height: 425px) {
#welcome {
margin-top: 25px;
font-size: 24px;
line-height: 28px;
}
#content #buttonMenu {
max-width: 300px;}



}

@media screen and (max-width: 290px) {
#content #buttonMenu li {
display:inline-block;
width: 100px;
}
}