/* Grid Page Home */

.container{
    display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr ;
grid-template-rows: 0.1fr .1fr 0.5fr .5fr 0.5;
grid-template-areas:
"Logoandbanner Logoandbanner Logoandbanner Logoandbanner"
"Navigation Navigation Navigation Navigation"
"What-is-SPCA What-is-SPCA What-is-SPCA AnimalPhoto"
"Photo-of-Animal-sparks-arena Animal-sparks-arena Animal-sparks-arena Animal-sparks-arena"
"Whats-on Whats-on-Photo Get-Involved Get-InvolvedPhoto"
"LogoandbannerFooter LogoandbannerFooter LogoandbannerFooter LogoandbannerFooter"
; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: #379DEB; }

/* Grid Page Home*/

/* Grid areas Home*/
.Logoandbanner{ grid-area: Logoandbanner; }

.Navigation{ grid-area: Navigation; }

.What-is-SPCA{ grid-area: What-is-SPCA; }

.AnimalPhoto{ grid-area: AnimalPhoto; }

.Get-Involved{ grid-area: Get-Involved;}

.Get-InvolvedPhoto{ grid-area: Get-InvolvedPhoto; }

.Animal-sparks-arena{ grid-area: Animal-sparks-arena; }

.Photo-of-Animal-sparks-arena{ grid-area: Photo-of-Animal-sparks-arena; }

.Whats-on{ grid-area: Whats-on; }

.Whats-on-Photo{ grid-area: Whats-on-Photo; }
.LogoandbannerFooter{ grid-area: LogoandbannerFooter;}


/* Grid areas Home */

/* Event page 2 */
.container1 {   
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"Logoandbanner Logoandbanner Logoandbanner Logoandbanner Logoandbanner Logoandbanner"
"Navigation Navigation Navigation Navigation Navigation Navigation"
"What-is-Event-1 What-is-Event-1 What-is-Event-1 What-is-Event-1-Photo-1 What-is-Event-1-Photo-1 What-is-Event-1-Photo-1"
"What-is-Event-1-Photo-2 What-is-Event-1-Photo-2  What-is-Event-1-Photo-2 Event-1-Bolitpont Event-1-Bolitpont  Event-1-Bolitpont"
"Where-to-book Where-to-book Map Map What-is-Event-1-Photo-3 What-is-Event-1-Photo-3"
"LogoandbannerFooter LogoandbannerFooter LogoandbannerFooter LogoandbannerFooter LogoandbannerFooter LogoandbannerFooter"; 
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: #379DEB; }

.Logoandbanner {grid-area: Logoandbanner;}
.LogoandbannerFooter{ grid-area: LogoandbannerFooter;}
.Navigation {grid-area: Navigation;}
.What-is-Event-1 {grid-area: What-is-Event-1;}
.What-is-Event-1-Photo-1 {grid-area:  What-is-Event-1-Photo-1;}
.What-is-Event-1-Photo-2 {grid-area: What-is-Event-1-Photo-2;}
.Where-to-book {grid-area: Where-to-book;}
.Map{grid-area: Map;}
.What-is-Event-1-Photo-3 {grid-area: What-is-Event-1-Photo-3;}
.Event-1-Bolitpont {grid-area: Event-1-Bolitpont Event-1-Bolitpont;}


@media (max-width: 400px) {
    .container{
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: auto ;
grid-template-areas: 
"Logoandbanner"
"Navigation"
"WWhat-is-Event-2"
" What-is-Event-2-Photo-1"
"PWhat-is-Event-2-Photo-2" 
"Event-2-Bolitpont"
"Where-to-book"
"What-is-Event-2-Photo-3" 
"Map"
"LogoandbannerFooter";}}
/* Event page 3*/



@media (max-width: 770px ) {
    .container{
display: grid;
grid-template-columns: 1fr 1fr ;
grid-template-rows: auto ;
grid-template-areas: 
"Logoandbanner Logoandbanner"
"Nav Nav "
"What-is-SPCA AnimalPhoto "
"Photo-of-Animal-sparks-arena Animal-sparks-arena "
"Whats-on Whats-on-Photo"
"Get-Involved Get-InvolvedPhoto"
"LogoandbannerFooter LogoandbannerFooter"

;
} }

@media (max-width: 400px) {
    .container{
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: auto ;
grid-template-areas: 
"Logoandbanner"
"Nav"
"What-is-SPCA"
"AnimalPhoto "
"Photo-of-Animal-sparks-arena" 
"Animal-sparks-arena "
"Whats-on" 
"Whats-on-Photo"
"Get-Involved" 
"Get-InvolvedPhoto"
"LogoandbannerFooter";}}


@media (max-width: 400px) {
    .container{
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: auto ;
grid-template-areas: 
"Logoandbanner"
"Navigation"
"What-is-Event-1"
"What-is-Event-1-Photo-1"
"What-is-Event-1-Photo-2" 
"Event-1-Bolitpont"
"Where-to-book"
"What-is-Event-1-Photo-3" 
"Map"
"LogoandbannerFooter";}}