*{
	font-family: arial;
}
.conteneur{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows:1fr ;
	grid-template-areas: "nav nav nav"
	                     "accueil accueil accueil"
	                     "info info info"
	                     "activite activite activite" 
	                     "foto foto foto"
	                     "kontak kontak kontak"
	                     "pye pye pye" ;
}

.nav{
	grid-area:nav;
	background-color:#007C80;
	display:grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows:1fr;
	grid-template-areas: "logo menu menu menu menu menu menu menu";
	

}

.nav ul{
	display: flex;
	list-style: none;
	justify-content: space-around;
	align-items: center;



}

.nav a{
	text-decoration:none;
	color: white;

}

	


    

.logo{
	grid-area:logo;
	background-color:#048B9A ;
	color: white;
	text-align: center;
	padding: 10px;

}

.menu{
	grid-area: menu;
	background-color:#048B9A;
	color: white;
	padding: 20px 20px;
}

.accueil{
	grid-area: accueil;
	background-color: #EFEFEF;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows:1fr ;
	grid-template-areas: "descriptionecole photoaccueil";
}

.descriptionecole{
	grid-area: descriptionecole;
	background-color: #EFEFEF;
	font-size: 40px;
	padding-top: 150px;
	padding-left: 50px;
	padding-right: 40px;
	padding-bottom:80px ;
	line-height: 1.5;
}

.photoaccueil{
	grid-area:photoaccueil;
	background-color: #EFEFEF;
	font-size: 30px;
	padding: 20px 30px;

}

.info{
	grid-area:info;
	background-color: white;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas: "photoinfo photoinfo textinfo textinfo textinfo textinfo";

}

.photoinfo{
    grid-area:photoinfo;
	background-color: white;
	padding: 20px 40px;

}

.textinfo{
	grid-area:textinfo;
	background-color: white;
	font-size: 20px;
	padding-top: 80px;
	padding-left: 40px;
	padding-right: 40px;
	font-family: arial;
	line-height: 1.5;

}

.inf{
	font-size: 25px;
}
.activite{
	grid-area:activite ;
	background-color: lightgray;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas: "anseyan aprantisaj espo";                                             
	                                                                                                                                  
}

.anseyan{
	grid-area:anseyan ;
	background-color: #FF7F00;
	font-size: 20px;
	color: white;
	padding: 70px 30px;

}

.Nosens{
	font-size: 25px;


}


.aprantisaj{
	grid-area:aprantisaj ;
	background-color: #A74AC7;
	font-size: 20px;
	color: white;
	padding: 70px 30px;

}

.App{
	font-size: 25px;

}

.espo{
	grid-area:espo ;
	background-color:#048B9A ;
	font-size: 20px;
	color: white;
	padding: 70px 30px;

}

.Sport{
	font-size: 25px;
}

.foto{
	grid-area:foto ;
	background-color: #EFEFEF;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas: "foto1 foto2 foto3";
	
}

.foto1{
	grid-area:foto1 ;
	background-color: #EFEFEF;
	padding: 20px;

}

.foto2{
	grid-area:foto2 ;
	background-color: #EFEFEF;
	padding: 20px;

}


.foto3{
	grid-area:foto3 ;
	background-color: #EFEFEF;
padding: 20px;
	
}



.kontak{
	grid-area:kontak ;
	color: black;
	text-align: center;
	margin: 20px 0;


}

.pye{
	grid-area:pye ;
	background-color: #03224C;
	text-align: center;
	color: white;
	margin: 20px   0;
	padding: 10px 10px;
	
}

.button{
	grid-area: button;
	color: white;
	background-color: #A74AC7;
	margin: 0 30px 0 0;

}




@media only screen and (max-width :480px){
*{
	font-family: arial;
}
.conteneur{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows:1fr ;
	grid-template-areas: "nav nav nav"
	                     "accueil accueil accueil"
	                     "info info info"
	                     "activite activite activite" 
	                     "foto foto foto"
	                     "kontak kontak kontak"
	                     "pye pye pye" ;
}

.nav{
	grid-area:nav;
	background-color:#007C80;
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows:1fr;
	grid-template-areas: "logo"
							" menu";
	

}

.nav ul{
	display: flex;
	flex-direction: column;
	list-style: none;
	justify-content: space-around;
	align-items: center;



}

.nav a{
	text-decoration:none;
	color: white;

}

	


    

.logo{
	grid-area:logo;
	background-color:#048B9A ;
	color: white;
	text-align: center;
	padding: 10px;

}

.menu{
	grid-area: menu;
	background-color:#048B9A;
	color: white;
	padding: 20px 20px;
}

.accueil{
	grid-area: accueil;
	background-color: #EFEFEF;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows:1fr ;
	grid-template-areas: "descriptionecole"
	" photoaccueil";
}

.descriptionecole{
	grid-area: descriptionecole;
	background-color: #EFEFEF;
	font-size: 18px;
	padding:30px;
	text-align: justify;
	line-height: 1.5;
}

.photoaccueil{
	grid-area:photoaccueil;
	background-color: #EFEFEF;
	padding: 5px
}

.info{
	grid-area:info;
	background-color: white;
	display: grid;
	grid-template-columns: 1fr:;
	grid-template-rows: 1fr;
	grid-template-areas: "photoinfo"
	                     "textinfo";

}

.photoinfo{
    grid-area:photoinfo;
	background-color: white;
	margin: 5px;
	padding: 5px 5px;
	

}

.photoinfo img{
	width: 100%;
}

.textinfo{
	grid-area:textinfo;
	background-color: white;
	font-size: 18px;
	font-family: arial;
	line-height: 1.5;
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 5px;
	padding-bottom: 25px;
	text-align: justify;
	width: 458px;

}

.inf{
	font-size: 20px;
	padding-bottom: 10px;
}

.activite{
	grid-area:activite ;
	background-color: lightgray;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "anseyan"
	                     "aprantisaj"
	                     "espo";                                             
	                                                                                                                                  
}

.anseyan{
	grid-area:anseyan ;
	background-color: #FF7F00;
	font-size: 18px;
	color: white;
	padding: 20px 30px;
	text-align: justify;


}

.Nosens{
	font-size: 20px;
	text-align: center;


}


.aprantisaj{
	grid-area:aprantisaj;
	background-color: #A74AC7;
	font-size: 18px;
	color: white;
	padding: 20px 30px;
	text-align: justify;

}

.App{
	font-size: 20px;
	text-align: center;

}

.espo{
	grid-area:espo;
	background-color:#048B9A;
	font-size: 18px;
	color: white;
	padding: 20px 30px;
	text-align: justify;


}

.Sport{
	font-size: 20px;
	text-align: center;
}

.foto{
	grid-area:foto;
	background-color: #EFEFEF;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "foto1"
	                     "foto2" 
	                    "foto3";
	
}

.foto1{
	grid-area:foto1 ;
	background-color: #EFEFEF;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	

}

.foto1 img{
	width: 100%;
}

.foto2{
	grid-area:foto2 ;
	background-color: #EFEFEF;
	padding: 2px;

}
.foto2 img{
	width: 100%;
}



.foto3{
	grid-area:foto3 ;
	background-color: #EFEFEF;
    padding: 2px;
	
}
.foto3 img{
	width: 100%;
}



.kontak{
	grid-area:kontak ;
	color: black;
	text-align: center;
	margin: 20px 0;
	font-size: 15px;


}

.pye{
	grid-area:pye ;
	background-color: #03224C;
	text-align: center;
	color: white;
	margin: 20px   0;
	padding: 10px 10px;
	
}

.button{
	grid-area: button;
	color: white;
	background-color: #A74AC7;
	margin: 8px 30px 0 0;

}



}