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


@-moz-viewport { width: device-width; scale: 1; }
@-ms-viewport { width: device-width; scale: 1; }
@-o-viewport { width: device-width; scale: 1; }
@-webkit-viewport { width: device-width; scale: 1; }
@viewport { width: device-width; scale: 1; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: 'Open Sans', helvetica, arial, sans-serif;
}

body {
    margin:0 auto;
    padding:0;
}

/*---------------------------------------------------------------------TOP BAR*/

header{
  width: 100%;
  height:5rem;
  margin: -1.5rem 0 0rem 0;

  background-color: #333;
}

h1 {
  left: 0;

    color: #fff;

    padding: 1rem 0 0 4rem;

}




/*NAVIGATION*/

/*-----------------------------------------------------------MOBILE NAVIGATION*/


.nav-btn,
.nav-btn:link,
.nav-btn:visited {
  top: 0;
  height: 40px;
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 46px;
  margin: 1rem;

  background: transparent url("../images/icon-nav.svg") no-repeat 0 0;
  border: 0;

  text-indent: 100%;
  white-space: nowrap;
}

.nav-btn:hover,
.nav-btn:focus,
.nav-btn:active {
  background-position: 0 -40px;
}

.nav-btn[data-state="active"] {
  background-position: -46px -40px;
}

.nav {
  overflow: hidden;
  padding: 0;

  background-color: #333;

  text-align:center;
}

.nav > ul {
  margin: 2rem 0 .5rem 0rem;
  padding: 0.8rem 0;


  list-style-type: none;
  font-size: 1.25rem;
  text-align: center;
}

.nav ul {
  margin: 0 0 .5rem 0;
}

.nav li {
  padding: .2rem;
}

.nav a,
.nav a:link,
.nav a:visited {
  padding: .3rem 10px;
  width: 2rem;


  border: 0;

  color: #fff;
  text-decoration: none;

  text-align: center;
}

.nav a:hover,
.nav a:focus,
.nav a:active {

  color: #333;
}

.nav-bottom {
  margin-top: 1.5rem;
}

.nav-top {
  max-height: 0;

  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
}

.nav-top[data-state="expanded"] {
  max-height: 25rem;

  position: relative;
}


@media only screen and (min-width: 80em) {

  .nav{
    display: none;
  }

  .nav-btn {
    display: none;
  }

}



/*---------------------------------------------------LARGE NAVIGATION DROPDOWN*/

.large-screen-nav {
  display: none;
}


@media only screen and (min-width: 80em) {

  .large-screen-nav {
     display: inherit;

     margin: -3rem 0 0 8rem;
  }

}

.large-screen-nav li {
  display: inline;

  padding: 0 0 0 .8rem;
}

.large-screen-nav a {
  text-decoration: none;

  color: #fff;
}

.large-screen-nav a:hover,
.large-screen-nav a:focus,
.large-screen-nav a:active {
  color: #ccc;
}




/*----------------------------------------------------------------------SEARCH*/

.search {
  float: right;

  width: 15rem;

  margin: 1rem 0rem 0 0;
}

/*SEARCH MEDIA QUERIES*/

@media only screen and (min-width: 31.25em) {
  .search {
    width: 20rem;
  }

}

@media only screen and (min-width: 50em) {

.search {
  margin: -3rem 0 0 0;
}


}

@media only screen and (min-width: 80em) {

.search {
  margin: -3rem 0 0 0;
}

  }

/*------------------------------------------------------------------------------------------HOME PAGE*/



/*------------------------------------------------------------------HEADER DIV*/

.header {
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;

    margin: 4rem 0 0 0;
}


@media only screen and (min-width: 100em) {

  .header {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;

    margin: 4rem 0 4rem 0;
}

}

@media only screen and (min-width: 101em) {

  .header {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;

    margin: 4rem 0 4rem 0;
}

}



/*------------------------------------------------------------------------DATE*/

.date h3 {
  line-height: .5rem;
  font-size: 1rem;

  font-style: italic;
}

@media only screen and (min-width: 50em){

  .date h3 {
    font-size: 2rem;
    line-height:3rem;
  }

}

@media only screen and (min-width: 90em){

  .date h3 {
    font-size: 2rem;
    line-height: 3rem;
  }

}


@media only screen and (min-width: 100em){

  .date h3 {
    font-size: 2rem;
    line-height: 4rem;

    margin: -1rem 0 0 0;
  }

}





/*---------------------------------------------------------------------WEATHER*/

.weather {
  height:32rem;
  width: 32rem;

  background-color: #999;

  padding: 2rem;
  margin: 3rem 0 5rem 0;
}

.weather-link {
  text-decoration:none;
  color: #333;
}

.weather-link:hover,
.weather-link:active,
.weather-link:focus{
  color: #fff;
}

@media only screen and (min-width: 38em){

  .weather{
    width: 39rem;
  }

}


@media only screen and (min-width: 40em){

  .weather {
    width: 17em;
  }

}


@media only screen and (min-width: 100em) {

  .weather {
    width: 20rem;
    height: 26rem;
  }

}





/*-------------------------------------------------------------------BIRTHDAYS*/

.birthdays{
  background-color: #333;
  color: #fff;


  width:17rem;
  height: 17rem;

  margin: 1rem 0 0 -2rem;
  padding: 1rem;
}


.birthdays h4{
  line-height: 1rem;
}


.birthdays li {
  list-style-type:none;

  padding: 1rem;

  text-align: center;

  display: inline;
}

.birthdays a {
  text-decoration:none;
  color: #fff;
}

.birthdays a:hover,
.birthdays a:focus,
.birthdays a:active {
  color: #ccc;
}


/*BIRTHDAYS MEDIA QUERIES*/

@media only screen and (min-width: 20em){

  .birthdays {
    width: 24rem;
    height: 17rem;
  }

  .birthdays li {
    padding: 1.2rem;
  }

}



@media only screen and (min-width: 25em){

  .birthdays {
    width: 25rem;
  }


}


@media only screen and(min-width: 30em){

  .birthdays {
    width: 32rem;
    height: 17rem;
  }

  .birthdays li {
    padding: 1.3rem;
  }

}


@media only screen and (min-width: 32em) {

  .birthdays{
    width: 32rem;
    height: 17rem;

    margin: .5rem 0 0 -2rem;

  }

  .birthdays li {
    padding: 1.5rem;

    font-size: 1.3rem;
  }

}

@media only screen and (min-width: 35em){

  .birthdays {
    width: 39rem;
  }

}


@media only screen and (min-width:40em){

  .birthdays {
    width: 33rem;
    height: 32rem;

    margin: -18.3rem 1rem 1rem 15rem;

    padding: 2rem;
  }

  .birthdays h4 {
    font-size: 1.8rem;
  }

  .birthdays li {
    padding: 3rem;

    font-size: 1.5rem;
  }

}


@media only screen and (min-width: 50em) {

  .birthdays {
    width: 35rem;

    margin: -25.9rem 1rem 1rem 15rem;
  }

  .birthdays li {
    font-size: 1.5rem;

    padding: 1.5rem;
  }

  .birthdays h4 {
    line-height: 2.3rem;
    font-size: 2rem;
  }

}

@media only screen and (min-width: 54em){

  .birthdays li {
    padding: 1.5rem;
  }

  .birthdays{
    width: 44rem;

  }

}

@media only screen and (min-width: 60em){

   .birthdays {
    width: 58rem;
    padding: 4rem;

  }

  .birthdays li {
    padding: 1.5rem;
  }


}


@media only screen and (min-width:65em){

  .birthdays {
    width: 64em;
  }

  .birthdays li {
    padding: 2rem;
  }

}


@media only screen and (min-width: 79em){

  .birthdays {
    width: 63rem;
    padding: 8rem;

  }
  .birthdays h4 {
    font-size: 2rem;
  }



}

@media only screen and (min-width: 80em) {

  .birthdays {
    width: 64rem;
    padding: 4rem;

  }

  .birthdays h4 {
    font-size: 2rem;
  }

  .birthdays li {
    padding: 2rem;
  }

}

@media only screen and (min-width: 85em){

  .birthdays{
    width: 70rem;
    padding: 4rem;

  }

  .birthdays li {
    padding: 4rem;
  }

}


@media only screen and (min-width: 90em){

  .birthdays {
    width: 74rem;
    padding: 4rem;

  }

}


@media only screen and (min-width: 94em){

  .birthdays {
    width: 82rem;


  }

  .birthdays li {
    padding: 2rem;
  }

}

@media only screen and (min-width: 100em) {

  .birthdays {
    width: 20rem;
    height: 15.6rem;

    margin: .5rem 0 0 -2rem;
  }

  .birthdays h4 {
    font-size: 1rem;

    width: 16rem;

    margin: -2rem 0 2rem -1rem;

  }

  .birthdays ul {
    width: 16rem;

    margin: -1.7rem 0 0 -2rem;
  }

  .birthdays li {
    font-size:1rem;

    padding: 1rem;
  }

}


/*---------------------------------------------------------------PHOTO GALLERY*/

.large-screen-slider{
  display: none;
}

@media only screen and (min-width: 50em) {

  .large-screen-slider {
    -webkit-order: -1;
    order: -1;
    display: -webkit-flex;
    display: flex;

    margin: 4rem 0 4rem 0;
  }
}

@media only screen and (min-width: 80em) {

  .large-screen-slider {
    -webkit-order: -1;
    order: -1;
    display: -webkit-flex;
    display: flex;

    margin: 3rem 0 0 0;
  }

}

@media only screen and (min-width: 83em){

  .large-screen-slider {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;

  }

}

/*--------------------------------------------------------MOBILE SCREEN SLIDER*/

.mobile-screen-slider .column1 {

  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.mobile-screen-slider .column1 img{
  width: 200px;
}

.mobile-screen-slider .item1 {
  height: 20rem;
  width: 15rem;

  margin: 0 0 1rem 1rem;
  padding: 1rem;

  background-color: #999999;

}

.mobile-screen-slider .text{
  width: 14rem;
  margin: 1rem 0 0 0;

}

.mobile-screen-slider .text h2 {
  font-size: 1rem;

}


/*MOBILE SCREEN SLIDER MEDIA QUERIES*/

@media only screen and (min-width: 31.25em) {

  .mobile-screen-slider .item1 {
    width: 30rem;
    height: 15rem;
  }

  .mobile-screen-slider .column1 img {
    width: 250px;
  }

  .mobile-screen-slider .text {
    margin: -10rem 0 0 18rem;

    width: 10rem;
  }

}


@media only screen and (min-width: 40em){

  .mobile-screen-slider .column1 {
    margin: 0 0 0 2rem;
  }

  .mobile-screen-slider .item1 {
    width: 40rem;
  }

  .mobile-screen-slider .text {
    width: 18rem;
  }

  .mobile-screen-slider .text h2 {
    font-size: 1.1rem;
  }

}

@media only screen and (min-width: 50em) {

.mobile-screen-slider {
  display: none;
}

}



/*---------------------------------------------------------------ANNOUNCEMENTS*/

.announcements {
  margin: 5rem 0 1rem 1rem;

  font-size: 1.5rem;
}


@media only screen and (min-width: 40em){

  .announcements {
    margin: 0 0 7rem 1rem;
  }

}


@media only screen and (min-width: 40em){

  .announcements {
    margin: 4rem 0 7rem 4rem;
  }

}

@media only screen and (min-width: 50em) {

  .announcements {
  margin: 0rem 0 8rem 1.5rem;

  font-size: 2rem;
}

}

@media only screen and (min-width: 75em){

  .announcements {
    margin: -2rem 0 5rem 4rem;
  }

}

@media only screen and (min-width: 80em) {

  .announcements {
  margin: 5rem 0 1rem 10rem;

  font-size: 2rem;
}

}




/*---------------------------------------------------------------ARTICLE BOXES*/


.column1 {

  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;

}

.column1 img{
  width: 200px;
}

.item1 {
  height: 20rem;
  width: 15.1rem;

  margin: 0 0 1rem 1rem;
  padding: 1rem;

  background-color: #999999;

}

.item2 {
  height: 25rem;
  width: 30rem;

  margin: 0 0 1rem 1rem;
  padding: 1rem;

  background-color: #999999;
}

.text{
  width: 15rem;
  margin: 1rem 0 0 0;

}

.text h2 {
  font-size: 1rem;

}

.article-link {
  text-decoration:none;
  color: #000;
}

.article-link:hover,
.article-link:active,
.article-link:focus {
  opacity:0.4;
  filter:alpha(opacity=40); /* For IE8 and earlier */
}


@media only screen and (min-width: 32em) {

  .column1 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;

    margin: 0;
  }

  .column1 img{
    width: 200px;
  }

  .item1 {
    height: 20rem;
    width: 15.1rem;

    margin: 0 0 1rem 1rem;
    padding: 1rem;

    background-color: #999999;
  }

  .text {
    width: 13rem;
    margin: 0rem 0 0 1rem;
  }

  .text h2 {
    font-size: 1.3rem;
  }

}


@media only screen and (min-width: 40em) {

  .column1 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;

    margin: -4rem 0 5rem 4rem;
  }

  .item1 {
    height: 23rem;
    width: 20rem;
  }

  .text {
    margin: .5rem 0 0 2rem;
  }

}


@media only screen and (min-width: 50em) {

  .column1 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;

    margin: -4rem 0 4rem 0rem;
  }

  .column1 img{
    width: 200px;
  }

  .item1 {
    height: 14rem;
    width: 25rem;
  }

  .text{
    width: 10rem;
    margin: -9rem 0 0 13.5rem;
  }

  .text h2 {
    font-size: 1.3rem;
  }

}


@media only screen and (min-width: 75em){

  .item1 {
    width: 30rem;
  }

  .column1 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;

    margin: -2rem 0 2rem 8rem;
  }

}


@media only screen and (min-width: 80em) {

  .column1 {

    display: -webkit-flex;
    display: flex;
     -webkit-flex-direction: row;
    flex-direction: row;

    margin: 0 0 1rem 0;

  }

.column1 img{
  width: 200px;
}

.item1 {
  height: 10rem;
  width: 40rem;
}


.text{
  width: 18rem;
  margin: -9rem 0 0 15rem;

}

.text h2 {
  font-size: 1.3rem;
}




}

@media only screen and (min-width: 81em) {

  .column1 {

    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
  }

}

/*-------------------------------------------------------------NOMINATION FORM*/

.nomination{
  background-color: #ccc;

  padding: 1rem;
}

.nominate-header{
  background-color: #ccc;

  height: 3rem;
  margin: 0 0 0rem 0;
}

.nominate-header h3{
  margin: 2rem 0 -1rem 0;

  font-size: 1rem;
}

.nomination-p {
  padding: 2rem;
  margin: -1rem 0 1rem 0;
}

.nominate {
  padding: 2rem;
  margin: 5rem 0 0 0;
}


#wufoo-q7x2w5{
  width: 15rem;
  margin: 1rem;

  font-family: 'Open Sans', helvetica, arial, sans-serif;
}


@media only screen and (min-width: 32em){

  #wufoo-q7x2w5{
    width: 40rem;
  }

  .nominate-header h3 {
    margin: 3rem 0 0 0;

    font-size: 1.2rem;
  }

}

@media only screen and (min-width: 40em){

  #wufoo-q7x2w5{
    width: 55rem;
  }

  .nominate-header h3 {
    margin: 3rem 0 1rem 2rem;

    font-size: 1.3rem;
  }

  .nomination p {
    margin: 0 0 0 1rem;
  }

}


@media only screen and (min-width: 50em) {

  #wufoo-q7x2w5{
    width: 50rem;
  }

  .nominate-header h3 {
    margin: 3rem 0 1rem 4rem;

    font-size: 1.5rem;
  }

  .nomination p {
    margin: 0 0 4rem 4rem;
  }

  }


@media only screen and (min-width: 75em){

  #wufoo-q7x2w5{
    width: 60rem;
  }

  .nominate-header h3 {
    margin: 4rem 0 1rem 4rem;

    font-size: 2rem;
  }

  .nomination p {
    margin: 0 0 4rem 4rem;
  }

}


@media only screen and (min-width: 80em) {

  #wufoo-q7x2w5{
    width: 70rem;
    margin: -5rem 0 0 0rem;
  }

  .nominate-header h3{
    font-size: 2rem;
    margin: 1rem 0 0 20rem;

    width: 19rem;
  }

  .nomination p {
    margin: 0 0rem 0 18rem;
  }

  .nomination {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
  }

}


@media only screen and (min-width: 100em){

  .nomination p {
    margin: 0 0rem 0 18rem;
  }


}

/*--------------------------------------------------------------------------------------------FORM PAGE*/

/*-----------------------------------------------------------------------FORMS*/

.form-wrap {

    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.forms {
  background-color: #ccc;
  width: 27rem;

  padding: 2rem;

  margin: 0 0 5rem 2rem;
}

.forms a {
  text-decoration:none;

  color: #000;
}

.forms li {
  list-style-type: none;
}

.forms a:hover,
.forms a:active,
.forms a:focus {
  color: #fff;
}




/*----------------------------------------------------------------------FOOTER*/

footer{
  background-color: #333;
  color: #fff;
  padding: 2rem;
}

footer li {
  list-style-type: none;
}

footer a {
  text-decoration:none;
  color: #ccc;
}

footer a:hover,
footer a:active,
footer a:focus {
  color: #999;
}