
body {background-color: #f3edff;}

.container{
display: grid; 
grid-template-columns: repeat(12, [col-start] 1fr); 
grid-template-rows: repeat(12, [row-start] auto);
}

.logo{
grid-column: 1/ span 1;
grid-row: 1/ span 1;

background-image: url("civic.png");
width: 100%;
height: auto;
 background-size: contain; 
 background-position: center;
  background-repeat: no-repeat;

}

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

.logo{	
grid-column: 1/ span 1;
grid-row: 1/ span 1;
	
background-image: url("logo.jpg");
width: 100%;
height: auto;
 background-size: contain; 
 background-position: center;
background-repeat: no-repeat;

}	
}

.head_picture{
grid-column: 3/ span 8; 
grid-row: 1/ span 1;
}

.title1{
grid-column:3/ span 8; 
grid-row: 2/ span 1;
}

.title1_text{
justify-self: center; 
text-align: center;
color: red;
font-family: BlackChanceryRegular; 
font-size: 3em; 
padding: 0;
margin: 0;
}

.title2{
grid-column: 2/ span 10; 
grid-row: 3/ span 1; 
justify-self: center;
}

.title2_text{
text-align: center; 
color: red;
}

.title2a_text{
font-family: BlackChanceryRegular;
 font-size: 1.5em;
} 

.title2b_text{
font-family: sans-serif; 
font-size: 1.25em; 
font-weight: bold;
}

.news_box{
background-color: #ffffff;
grid-column: 3/ span 8;
grid-row: 4/ auto;
}

.news_box2{
border: 0.1em solid;  
margin auto;
}

.news_text{
text-align: center; 
font-size: 2em;
margin: 2px;
}


.item_fb{
		grid-column: 1/ span 12;
		grid-row: 12;
}
  
	
   .fb {
	display: flex;
	flex-direction: column;
  	align-items: center;
  	justify-content:center;
  	margin-top: 2px;
 
   }

	.copy{
	font-size: 10px;
}
