body {
  background: #12c2e9;  /* fallback for old browsers */
  background: linear-gradient(to right, #c31432, #240b36); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: no-repeat;
  height: device-height;
  width: device-width;
  background-position:center;
  background-attachment: fixed;
  background-size: cover;
  font-family: 'Roboto', sans-serif;
}
.box{
  align-items: center;
  width: 65%;
  height: auto;
  background: none
  background-position: center center;
  background-attachment: fixed;
  padding: 40px;
  text-align: center;
  margin: auto;
  margin-top: 0;
  color: white;
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  overflow-y: auto;

}
@media only screen and (max-width: 620px)
{
  .box{
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
     align-items: center;
     align-content: center;
     width: 300px;
     height: auto;
     background: none;
     background-position: center;
     background-attachment: fixed;
     padding: 3px;
     text-align: center;
     margin: auto;
     margin-top: 0;
     color: white;
     font-family: 'Roboto', sans-serif;
     overflow: hidden;
     overflow-y: auto;
  }
}

.logo
{
  width: 20%;
  height: 20%;
}
@media only screen and (max-width: 720px)
{
  .logo
  {
    width: 60%;
    height: 60%;
  }
}

.noticeimg
{
  border: 20px solid rgba(0,0,0, 0.4);
  width: 50%;
  height:auto;
  border-radius: 10px;
}
@media only screen and (max-width: 720px)
{
  .noticeimg
  {
    width: 100%;
  }
}

}
.box h1{
  font-size: 30px;
  letter-spacing: 4px;
  font-weight: 100;
  font-family:  Arial Black;
}
.box li{
  display: inline-block;
  margin: 6px;
  list-style: none;
}
.box li a{
  color: white;
  text-decoration: none;
  font-size: 40px;
  transition: all ease-in-out 250ms;
}
.box li a:hover{
  color: #b9b9b9;
}
.group{
  width: 95%;
  height: 95%;
}
.round
{
  width: 80px;
  height: 80px;
  border-radius: 100%;
}
.video
{
width: 100%;
height: auto;
border-radius: 10px;
}
.aplimg
{
  width: 50%;
  height:auto;
}
@media only screen and (max-width: 720px)
{
  .aplimg
  {
    width: 100%;
  }
}
