@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'archivoregular';
    src: url('fonts/archivo-regular-webfont.woff2') format('woff2'),
         url('fonts/archivo-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Fading Transition Effect */
@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Zoom-In Transition Effect*/
@-webkit-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@-moz-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@-o-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}

body{font-family: 'Montserrat', sans-serif;color:#222121;}
p{font-family: 'archivoregular', sans-serif;color:#222121;}
footer {font-family: 'Montserrat', sans-serif;padding:40px; text-align:center;font-size:15px;line-height:1.75;color:#222121;}

.top-box{margin:0 auto;display:grid; grid-template-columns:auto;background-color:white; position: fixed;
  top: 0; width: 100%; right:5px; z-index: 1; float:right; padding-top:10px; justify-content: center;}
header{margin:0 auto;animation-name: fade; animation-duration: 3s; animation-fill-mode: forwards;}
nav{padding-top:5px;
	text-align:center;
	margin:0 auto;
	font-size:20px;
	height:50px;
	animation-name: fade;
 	animation-duration: 3s; 
 	animation-fill-mode: forwards;}


.menu a {
    clear:both;
    color:#222121;;
    margin:0 auto;
    line-height:50px;
    text-align:right;
  	-webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;}

nav a:hover, nav a:focus {
	background-color:#222121;
	color:white;
	padding: 20px;
}

.label {
     margin:0 auto;
     font-size: 30px;
     color:#292929;
     line-height:50px;
     display:none;
     width:25px;
     float:left;


}
#toggle {
     display:none;
}

#middle-box{display:grid;grid-template-columns:auto;grid-template-rows:auto; grid-row-gap:20px;}
#head-image{grid-column:1 / -1;width:80%;padding-top:180px;margin:0 auto;animation-name: scale; animation-duration: 2s; animation-fill-mode: forwards;}
#section-image{grid-column:1 / -1;width:80%;margin:0 auto;display:flex;flex-direction:row;gap:15px;}

.statement{grid-column:1 / -1;border-top:groove thin #222121;padding-top:5px;color:#222121;;width:80%;text-align:center;margin:0 auto;}
#statement{font-size:25pt;font-weight:bold;}
#statement-quote{font-size:15pt;line-height:1.75;font-style: italic;}

.announcement{grid-column:1 / -1;display:flex; flex-direction: row; gap:15px; border-top:groove thin #222121;;padding-top:5px;padding-bottom:5px;width:80%;color:#222121;margin:0 auto;}
#announcement-title {font-size:25pt; font-weight:bold; text-align:center; padding-top:20px;}
#announcement-paragraph {font-size:15pt; line-height:1.75; padding:0px 20px 10px 10px;text-indent:25px;}
#covid19-announcement-image{padding:10px;}
footer {margin:0 auto;}




@media screen and (max-width:1024px){
.vertical-line{display:none;}
.top-box
	{margin:0 auto;display:flex; flex-direction: row; width:100%; top:0px; right:5px; z-index: 1;float:left;padding-top:10px;justify-content: center;}
header
	{margin:0 auto;}
	
nav
	{font-size:20px;
    height:60px;
	margin-top:20px;}

.menu a 
	{clear:both;
    color:#564D43;
    line-height:50px;}

nav a:hover, nav a:focus
	{background-color:white;
	color:#222121;}
	
.label {
    display:block;
    cursor:pointer;
	background-color: white;
	border:groove thin lightgray;
	width:fit-content;
	padding-left:15px;
	padding-right:15px;
	font-size:40px;}

	
.menu {
    width:100%;
    height:100%;
    display:none;
	margin-left:-125px;}
	
.menu a {
	color:white;
	font-size:15px;
	margin: 0 auto;
    display:block;
    border-bottom: thin solid white;
    background-color:#222121;
	text-align: center;
	width:200%;}
	
#toggle:checked + .menu {display:block;}
#statement{font-size:25px;}
#statement-quote{font-size:15px;}
#announcement-title{font-size:25px;}
#announcement-paragraph{font-size:15px;padding-bottom:5px;}
}

@media screen and (min-width:769px)
	and (max-width:1024px)
{


.announcement{flex-wrap:wrap-reverse;text-align:center;margin:0 auto;}
#statement{font-size:25px;}
#statement-quote{font-size:15px;}
#announcement-title{font-size:25px;}
#announcement-paragraph{font-size:15px;padding-bottom:5px;}
#covid19-announcement-image{text-align:center;margin:0 auto;}
}
		
		
		
@media only screen
and (max-width : 768px){

#statement{font-size:20px;}
#statement-quote{font-size:15px;}
#announcement-title{font-size:20px;}
#announcement-paragraph{font-size:15px;padding-bottom:5px;}
.announcement{flex-wrap:wrap-reverse;text-align:center;margin:0 auto;}
#covid19-announcement-image{text-align:center;margin:0 auto;padding-top:10px;} }

@media only screen
and (min-width : 481px)
and (max-width : 768px) {

#section-image{flex-direction:column;flex-wrap:wrap;margin:0 auto;}
#statement{font-size:20px;}
#statement-quote{font-size:15px;}
#announcement-title{font-size:20px;}
#announcement-paragraph{font-size:15px;padding-bottom:5px;}
}


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

#section-image{flex-direction:column;flex-wrap:wrap;margin:0 auto;}
#statement{font-size:20px;}
#statement-quote{font-size:15px;}
#announcement-title{font-size:20px;}
#announcement-paragraph{font-size:15px;padding-bottom:5px;}

}

	
@media only screen
and (min-width : 321px)
and (max-width : 480px) {

#section-image{flex-direction:column;flex-wrap:wrap;margin:0 auto;}
#statement{font-size:20px;}
#statement-quote{font-size:15px;}
#announcement-title{font-size:20px;}
#announcement-paragraph{font-size:15px;padding-bottom:5px;}
}
	
@media only screen
and (max-width : 320px) {
.menu a{
    clear:both;
    text-decoration:none;
    color:#564D43;
    line-height:50px;}

nav a:hover, nav a:focus {
   	background-color:white;
	color:#222121;}
	
.label {
    display:block;
    cursor:pointer;
	width:fit-content;
	padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	font-size:20px;}
	
.menu {
    width:100%;
    height:100%;
    display:none;}
	
.menu a {
	color:white;
	font-size:15px;
	margin: 0 auto;
    display:block;
    border-bottom: thin solid white;
    background-color:#222121;
	text-align:center;
	width:200%;}
	
#toggle:checked + .menu {
     display:block;}
#section-image{flex-direction:column;flex-wrap:wrap;margin:0 auto;}
#box{grid-row-gap:15px;}
#head-image{grid-column:1 / -1;width:100%;padding-top:120px;margin:0 auto;}
#statement{font-size:20px;}
#statement-quote{font-size:15px; line-height:1.75}
#announcement-title {font-size:20px;}
#announcement-paragraph {font-size:15px; line-height:1.75;text-indent:0;}
#covid19-announcement-image{margin-bottom:10px;}
footer {margin:0 auto; line-height:1.75;font-size:15px;}
}