/* CSS Document */
/* The navigation links inside the overlay */
.deptbtn {
    background-color: rgba(255,255,255,1.00);
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    padding: .2em 1em;
    cursor: pointer;
    color: rgba(212,0,0,1.00);
    margin: .5em .5em .5em .5em;
    text-decoration: none;
    text-align: center;
    font-size: 2em;
    transition: 0.3s;/* Transition effects on hover (color) */
    display: inline-block;
    min-width: 20%;
    max-width: 20%;
}
/* When you mouse over the navigation links, change their color */
.deptbtn:hover, .deptbtn:focus {
  background-color:rgba(230,230,230,1.00);
}
.depttitle {
    text-align: center;
    font-family: "MontserratBold", "sans-serif";
    display: block;
    font-size: 3em;
    color: rgba(255,255,255,1.00);
}
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  text-align: center;
}
.overlay img{
    width: 10%;
    display: inline-block;
    margin-top: 3%;
}

/* Position the content inside the overlay */
.overlay-content {
  display: inline-block;
  width: 80%; /* 100% width */
  text-align: center; /* Centered text/links */
    margin-top: 2%;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 5em;
    color: rgba(255,255,255,1.00);
}

@media only screen and (max-width: 992px) {
    .deptbtn {
        font-size: 4em;
        margin: .3em .5em .3em .5em;
        padding: 0 0 0 0;
        display: inline-block;
        min-width: 80%;
        max-width: 80%;
    }
    .depttitle {
    text-align: center;
    font-family: "MontserratBold", "sans-serif";
    display: block;
    font-size: 4em;
    color: rgba(255,255,255,1.00);
}
    .overlay img{
        width: 25%;
        cursor: pointer;
    }
    
    .overlay .closebtn {
        font-size: 6em;
    }
}