@import url("/s/calendar/style.css");


* { box-sizing:border-box; -webkit-font-smoothing: antialiased; }

html, body { width:100%; height:100%; margin:0; padding:0; }
body { background:#949ea8; background:#FFF; font-family:'Open Sans', sans-serif;  }
a img { border:none; }
a { text-decoration:none; }


#page { position:relative; width:100%; min-height:100%; }


#centerpiece { position:absolute; top:0; left:0; width:100%; height:auto; z-index:10; text-align:center; }
#seal { position:relative; top:2vw; display:inline-block; width:14vw; height:14vw; z-index:11; }
#curve { position:absolute; top:0; left:0; width:100%; height:auto; z-index:10;  }

#photofill { position:relative; z-index:5; width:100%; min-height:100vh; height:100vh; background:url(/images/windjammers.jpg) center no-repeat; background-size:cover; }
#photofill { background:url(/images/island.jpg) center no-repeat; background-size:cover; }


#logobar { position:relative; width:100%; height:12vw; padding:0; background:rgba(255,255,255,0.95); text-align:center; }


/* Move it Up */
#logobar { position:absolute; bottom:0; left:0; }

#logo { margin:2vw auto; height:8vw; width:auto; }

#social { position:absolute; left:2vw; top:1vw; width:10vw; height:10vw; }
#social i { display:inline-block; font-size:4vw; line-height:4vw; margin:.5vw; padding:0; }

#open-menu { position:absolute; right:2vw; top:2vw; text-align:center; font-size:2vw; color:#555; width:8vw; height:8vw; }
#open-menu i { font-size:6vw; display:block; color:#555; }

#tiles { display:flex; display:-webkit-flex;  display:block\9; width:100%; height:16vw; background:#FFF; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content: space-between; -webkit-justify-content:space-between; white-space-collapse: discard; font-size:0px; }
.tile {  position:relative; display:inline-block\9; width:16.0%; height:16vw; overflow:hidden; }
.tile img {  height:100%; width:auto;  }


.tile img {

  position:relative;
  z-index:1;
  -webkit-transition-duration: 12s;
  transition-duration: 12s;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: 16% 100%;
  transform-origin: 16% 100%;
  -webkit-filter:  saturate(0.6) brightness(1.2);
  filter:  saturate(0.6) brightness(1.2);
}


.tile img:hover {

  -webkit-transform: scale(1.3) rotate(3deg);
  transform: scale(1.3) rotate(3deg);
  -webkit-transform-origin: 16% 16%; 
  transform-origin: 16% 16%; 
  -webkit-filter:  saturate(1.4) brightness(1.2);
  filter:  saturate(1.4) brightness(1.2);
}

.tile > span { position:absolute; display: flex; display:-webkit-flex; align-items: center; -webkit-align-items: center;  justify-content: center; -webkit-justify-content: center; z-index:15; top:2.5vw; left:2.5vw; height:10vw; width:10vw; border-radius:50%; border:5px solid rgba(255,255,255,0.27); background:rgba(100,119,112,0.72); pointer-events:none; text-align:center; }
.tile > span:hover { background:rgba(206,177,16,0.72); }

.tile > span a { position:relative; z-index:22; color:#FFF; text-decoration:none; font-weight:400; text-transform:uppercase; font-size:1vw; pointer-events:all; }
.tile > span a:hover {  text-decoration: none; }
.tile i { display:block; font-size:32px;  }


.nautical { opacity:0.15; width:100%; height:100px; background:url(/images/nautical.png) no-repeat; background-size: cover; }

#calendar { position:relative; display:flex; display:-webkit-flex; display:block\9;  flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content: space-between; -webkit-justify-content: space-between; padding:1vw; width:100%; white-space-collapse: discard; background:#FFF; }

.date-tile { position:relative; display:inline-block\9; width:19%; height:20vw; background:#287389; color:#FFF; margin-top:1vw; padding:2vw; }




.month {  text-transform:uppercase; font-size:19px; font-weight:600; color:#c4dee6; }
.headline { font-size:14px; height:16vw;  overflow:hidden; }
.weekday { position:relative; left:-2px; font-size:15px;  }
.date { position:absolute; bottom:2vw; right:2vw; font-size:38px; line-height: 32px; font-weight:600; text-align:right; color:#c4dee6; }
.time { position:absolute; bottom:65px; height:15px; font-size:14px; }
.location { position:absolute; bottom:40px; height:15px; font-size:14px; width:100px; }
.docs { position:absolute; bottom:90px; height:15px; font-size:14px; width:100px; }
.docs a { color:#FFF; text-decoration:underline; }

.block-header { position:relative; width:100%; background:rgba(40,115,137,1);  color:#FFF; padding:1vw 2vw; font-size:22px; font-weight:300; margin:10px 0 0 0; }
.block-header * { color:#FFF; }
.block-header span { display:block; position:absolute; right:1vw; top:1vw; text-align:right; }




#page-documents { background:#AAA; width:100%;  }
#page-documents td { text-align:left; padding:0 !important; margin:0 !important; height:0; }

#recent-documents { position:relative; }
#recent-documents a { color:#FFF; }
#recent-documents table { border-collapse:collapse; width:100%; }
#recent-documents td { padding:1vw 2vw; border-bottom:1px solid #FFF; }
#recent-documents table * { color:#FFF; font-size:14px; }
#recent-documents h1 { width:100%; background:rgba(100,119,112,0.72);  color:#FFF; padding:1vw 2vw; font-size:22px; font-weight:300; margin:0;  }
#recent-documents h1 a { text-decoration: none;  }
#recent-documents a:hover i { color:#b4eeff;  }
#recent-documents a:hover { color:#b4eeff;  }
#recent-documents span { position:absolute; right:1vw; }
#recent-documents .document-date { width:20%; background:rgba(100,119,112,0.62); }
#recent-documents .document { background:rgba(100,119,112,0.52);  }
.fa-cloud-download-alt { font-size:24px !important; }
#recent-documents tr:hover { background:rgba(100,119,112,0.72); }



#annoucements { position:relative; }
#annoucements a { color:#FFF; }
#annoucements table { border-collapse:collapse; width:100%; }
#annoucements td { padding:1vw 2vw; border-bottom:1px solid #FFF; }
#annoucements table * { color:#FFF; font-size:16px; font-weight:400; }
#annoucements h1 { width:100%; background:rgba(137,40,40,1);  color:#FFF; padding:1vw 2vw; font-size:22px; font-weight:300; margin:0;  }
#annoucements h1 a { text-decoration: none;  }
#annoucements a:hover i { color:#e9c001;  }
#annoucements a:hover { color:#e9c001;  }
#annoucements span { position:absolute; right:1vw; }
#annoucements .document-date { width:20%; background:rgba(137,40,40,0.92); }
#annoucements .document { background:rgba(137,40,40,0.85);  }
.fa-cloud-download-alt { font-size:24px !important; }
#annoucements tr:hover { background:rgba(100,119,112,0.72); }




/* Responsive Nav */
#menu, #close { position:absolute; top:5vw; right:1vw; width:60px; height:60px; z-index:1000; display:none;  }
#close i { font-size:32px; line-height:32px; }

#wrapper { position:relative; width:100%; left:0%;  } 
#wrapper.open {  left:100%;  }
#responder { position:absolute; top:0; left:-100%; width:100%; padding:20px;  overflow:hidden;  }
#responder.open { left:0; }
#responder.open nav { position:fixed; width:90vw; margin:0 auto; }


#responder { padding:4vw; }
#responder nav { display: block; padding:2vw; height:100vh; background:url(/images/seagull.jpg) top right no-repeat; background-size: cover;  }
#responder nav a {  font-weight:400;  text-decoration: none; font-size:120%; color:#FFF;  display:block; margin:0; padding:5px;  }
#responder nav a:hover { color:#6cb1c8;  }


article { padding:5vw 10vw; font-size:16px; line-height:27px; }
article h1 { line-height:40px; color:#164755; }
article a { text-decoration: underline; color:#287389; }
article a:hover { color:#6cb1c8; }


/* Interior */

section#section-title { width:100%; height:7vw; background:#287389; color:#FFF; text-align:center; line-height:7vw;  }
section#section-title h1 { margin:0; line-height:7vw; font-size:2.4vw; }


/* Calendar */

.calendar-item { display:block; border:1px solid #AAA; padding:20px; margin:10px 0;  }
.calendar-item * { font-family:'Open Sans' !important; font-weight:300; }
.calendar-item b, .calendar-item strong { font-weight:600; }
.calendar-item .square { position:relative;  display:inline-block; width:100px; height:100px; vertical-align: top; }
.calendar-item .fulltext { position:relative; display:inline-block; max-width:500px; vertical-align: top; }
.calendar-item h2 { margin:0; padding:0; font-weight:300; }
.calendar-item .cmonth { text-align:center; font-size:14px; }
.calendar-item .cdate { text-align:center; font-size:36px;  }

footer { position:relative; width:100%; height:25vw; background:#164755;  color:#FFF; }
footer a { color:#FFF !important; text-decoration:underline; }
footer address div { display:inline-block; *display:inline;  vertical-align:top; margin:5px 2vw;  white-space: pre-line; font-style:normal; }
footer #seal-footer { position:absolute; top:3vw; right:2vw; width:10vw; height:10vw; background:url(/images/seal-footer.png); background-size: contain; }



@media only screen and (max-width: 1023px) {
	
  footer { height:auto; padding:2vw; }

} /* End Medium Screen Media Query */



@media only screen and (max-width: 720px) {


  #logobar { height:16vw; }
  #logo { margin:4vw auto }
  #social {  top:2vw; }
  #open-menu { top: 3vw;  } 

	#tiles { height:150vw; }
	.tile {  width:49.5%; height:48vw;  }
	.tile span { height:24vw; width:24vw; top:12vw; left:12vw; }
	.tile span a { font-size:3vw;  }

  .nautical { height:20px;  }
	.date-tile { width:33%; height:35vw; }
	.headline { height:25vw;  }
  textarea { width:100% !important; }

  .calendar-item .square { width:100%; }
  .calendar-item .square * { text-align:left; }

  footer #seal-footer { top:8vw; width:20vw; height:20vw; }

} /* End Small Screen Media Query */





@media only screen and (max-width: 500px) {

	.month {  font-size:14px; font-weight:300; }
	.date { font-size:23px; bottom:1vw; font-weight:300; }
  .weekday { top:10px; font-weight:300; }
  .headline { font-size:12px;  }

} /* End Small Screen Media Query */