* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}

/* -------------------------------------------*/
/* -----------LES ELEMENTS -------------------*/
/* -------------------------------------------*/

header{
display:none;
margin:0;

}

body {

	margin: 0 auto;
 	background-color: -webkit-linear-gradient(top left, #F6E497, #FFEFB6);
	background-color: linear-gradient(top left, #F6E497, #FFEFB6);
	font-family: 'open sans condensed:700', sans-serif;
	font-size: 1rem;
	color: #89725B;

	display: flex;
	flex-flow: row wrap;
	/*text-align: center;*/
	/*min-height: 100vh;*/

	justify-content: center; /* alignement horizontal*/
	align-items: space-around; /* vertical, align-self possible pour un élément*/

}



#banniere {
 	position: relative;
  align-self: flex-start;

}


#align {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}


#alignmenus {

  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;

}


a {
 font-family: 'open sans condensed:300', sans-serif;
 font-size: 1.3rem;
 text-decoration: none;

}

ul,li {
 margin: 0;
 padding: 0;
 list-style: none;

}


footer{
  width: 100%;
  padding: 10px 20px;
  margin-top: 50px;
  font-family: 'open sans condensed:300', sans-serif;
  font-size: .6rem;
  text-align: center;
  align-self: center;

}
 footer p {
  margin: 5px auto;
}

footer a {
  font-size: .8rem;
  font-family: 'Fresca', sans-serif;
}

footer a:hover {
  font-size: .9rem;
} 

/* ---------quart cercle logo--------------- */


#cerclelogo {
  
 position: absolute;
 left: 50px;
 top: 50px;
  width: 200px;
  height: 200px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;



 
}


.box1{
  float: left;
  width: 100px;
  height: 100px;
  -webkit-border-radius: 100% 0 0 0;
  border-radius: 100% 0 0 0;
	background-color: black;

}

.box1>img {
  	  	position: relative;
  	  	top: 10px;
  }


.box2 {
float: left;
width: 100px;
  height: 100px;
    -webkit-border-top-right-radius:200%;
  border-top-right-radius:200%;
  padding-top: 20px;
    z-index: 5;


}

.box2>img {
  position: relative;
  	width: 90%;
  	height: 90%;

}

.box3{
 float: left;
 width: 100px;
  height: 100px;
  -webkit-border-bottom-left-radius:200%;
  border-bottom-left-radius:200%;
  background-color: black;
}

.box4{
 float: left;
  width: 100px;
  height: 100px;
  -webkit-border-radius: 0 0 100% 0;
  border-radius: 0 0 100% 0;
  background-color: black;
}

/* fin quart cercle logo -------------------*/








/* ---------menu nav menus1--------------- */


nav#menus1 {
  
 
  width: 300px;
  height: 300px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;

 

 
}


.menu1{
  float: left;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 100% 0 0 0;
  border-radius: 100% 0 0 0;
	background-color: #FC7F3C;

}




.menu2 {
float: left;
width: 150px;
  height: 150px;
    -webkit-border-top-right-radius:200%;
  border-top-right-radius:200%;
  background-color: turquoise;


}



.menu3{
 float: left;
 width: 150px;
  height: 150px;
  -webkit-border-bottom-left-radius:200%;
  border-bottom-left-radius:200%;
  background-color: teal;
}

.menu4{
 float: left;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 0 0 100% 0;
  border-radius: 0 0 100% 0;
  background-color: #FCDE8E;
}

/* fin nav  menus1-------------------*/









/* -------------------------------------------*/
/* -----------Les comportements --------------*/
/* -------------------------------------------*/

.menu1, .menu2, .menu3,
.menu4 {
	opacity: 0;
	transition: opacity 1s;

}

.menuA:hover{
	opacity: 1; 

}

.menuB:hover {
	opacity: 1; 

}





/* ----------page Ecole -------------------*/


#cerclelogo.pageecole .box2,#cerclelogo.cursus .box2 {
    
    background-color: #FC7F3C;
}

#menus1 .casevide {
   float: left;
width: 150px;
  height: 150px;
    -webkit-border-top-right-radius:200%;
  border-top-right-radius:200%;
   opacity:0;

}

h2 {
  color: black;
  font-family: 'Fresca', sans-serif;
  font-size: 1.8rem;
  padding-top: 18px;
  padding-left: 8px;
  margin-left: 0;

}

nav#menus2 {

  align-self: flex-start;

}



nav#menus2 li a {
  color: white;
  font-family: 'Fresca', sans-serif;
  font-size: 1.3rem;

}
nav#menus2 li {
  background-color: rgba(252,222,142,.3);
  padding: 1px 2px 1px 2px;
  margin-bottom: 2px;
  border-radius: 3px;

}
nav#menus2 li:hover {
  background-color: rgba(252,127,60,.8);

 
}
nav#menus2 li a:hover {
  color: white;
 
}


/* fin page ecole-------------------*/




/* ----------page cursus -------------------*/

#align {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}


#alignmenus {

  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;

}


nav#menus3 {
  background-color: rgba(255,255,255,.7);
  padding-left: 18px;
  padding-top: 9px; 
  width:  200px;
  height: 230px;
  border-radius: 3px;


  align-self: flex-start;
}

nav#menus3 li {
  padding: 0;
}


nav#menus3 a{
  text-decoration: none;
  text-align: left;
  color: #FC7F3C;
  font-family: 'Fresca', sans-serif;
  font-size: 1rem;
}

nav#menus3 a:hover{
 color: black;
}



/* fin page cursus-------------------*/


/* page acteur-------------------*/

article {
  width: 450px;
  margin-top: 20px;
  align-self: flex-start;
  background-color: white;
  border-radius: 3px;
  font-size: 1rem;
  font-family: 'Fresca', sans-serif;
  padding: 10px;


}
figure {
  margin: 0 auto;
 
}


figure#acteur img {
  width: 100%;
  margin: 0 auto;
}

h2 {
 margin-top: 0;

}



/* fin page cursus-------------------*/



/* page terzieff et sous menus-------------------*/

#cerclelogo.terzieff .box2 {
    
    background-color: #FCDE8E;
}

nav#menus2.terzieff li:hover {
  background-color: #FCDE8E;
  opacity: .8;
 
}

nav#menus2.terzieff a:hover {
  color: black;
  opacity: .8;
 
}

nav#menus3.spectacles a{ 
  color: black;
 } 

nav#menus3.spectacles a:hover{ 
  color: #FCDE8E;
 } 

article a {
  font-size: 1rem;
  font-family: 'Fresca', sans-serif;
  color: turquoise;

}

/* fin page terzieff et sous menus-------------------*/




/* -------------------------------------------*/
/* Responsive testé sur chrome tous devices -------------------------- 
media et balise meta viewport sinon ne marche pas */

@media handheld, only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
	
  body{
    width: auto;

  }

  nav#menus2 li a {
      color: black;

  }



}





@media handheld, only screen and (min-width: 640px), only screen and (min-device-width: 640px) {

 body{
    width: auto;

    background: url("photos/037acteurs.jpg") no-repeat center fixed ;
     -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover;



  }

#footeraccueil {
      margin-top: 400px;
}


  footer p {
      color: white;
}





}