/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 18, 2016 */


@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/opensans-light-webfont.eot');
    src: url('fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-light-webfont.woff2') format('woff2'),
         url('fonts/opensans-light-webfont.woff') format('woff'),
         url('fonts/opensans-light-webfont.ttf') format('truetype'),
         url('fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'caviar_dreamsbold';
    src: url('fonts/caviardreams_bold-webfont.eot');
    src: url('fonts/caviardreams_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caviardreams_bold-webfont.woff2') format('woff2'),
         url('fonts/caviardreams_bold-webfont.woff') format('woff'),
         url('fonts/caviardreams_bold-webfont.ttf') format('truetype'),
         url('fonts/caviardreams_bold-webfont.svg#caviar_dreamsbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'caviar_dreamsregular';
    src: url('fonts/caviardreams-webfont.eot');
    src: url('fonts/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caviardreams-webfont.woff2') format('woff2'),
         url('fonts/caviardreams-webfont.woff') format('woff'),
         url('fonts/caviardreams-webfont.ttf') format('truetype'),
         url('fonts/caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'caviar_dreamsbold_italic';
    src: url('fonts/caviardreams_bolditalic-webfont.eot');
    src: url('fonts/caviardreams_bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caviardreams_bolditalic-webfont.woff2') format('woff2'),
         url('fonts/caviardreams_bolditalic-webfont.woff') format('woff'),
         url('fonts/caviardreams_bolditalic-webfont.ttf') format('truetype'),
         url('fonts/caviardreams_bolditalic-webfont.svg#caviar_dreamsbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'caviar_dreamsitalic';
    src: url('fonts/caviardreams_italic-webfont.eot');
    src: url('fonts/caviardreams_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caviardreams_italic-webfont.woff2') format('woff2'),
         url('fonts/caviardreams_italic-webfont.woff') format('woff'),
         url('fonts/caviardreams_italic-webfont.ttf') format('truetype'),
         url('fonts/caviardreams_italic-webfont.svg#caviar_dreamsitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

element, body, h1, footer h1, nav a

{

    font-family: 'caviar_dreamsbold', Open Sans;

    font-weight: normal;

    margin: 0;

}

header

{


    display: flex;

    justify-content: space-between;

    align-items: flex-end;
    
    margin-right : 15px;

    margin-left : 15px;
 
    margin-bottom : 10px;

}

#logo img

{

    width: 100px;

    height: 39px;

}

#connexion-box {
 
	
	display:none;
        position:relative;
        margin-top: 36px;
        margin-right: 30px;
        z-index: 100;
        
        
 
}




#connexion

{

    background: url('images/connexion.png') no-repeat right ;

    width: 60px;

    height: 49px;

}




/* Navigation */


nav ul

{

    list-style-type: none;

    display: flex;

}


nav li

{

    margin-right: 60px;

}


nav a

{

    font-size: 1em;

    color: #2a2c3a;

    padding-bottom: 3px;

    text-decoration: none;

}


nav a:hover

{

    color: #760001;

    border-bottom: 3px solid #760001;

}


/*section principale*/
/*Alignement des colonnes*/
 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 4% auto; /* 15% from the top and centered */
    padding-left : 25px;
    padding: 20px;
    border: 1px solid #888;
    width: 630px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


section
{

    display: flex;


    align-items: flex-end;

    margin: 0;
 
    

}
/*opacité avant de passer la souris */
#espace-cours h1  ,#espace-parents h1 ,#espace-professeurs h1 
{
opacity:0;

}

#espace-cours h2  ,#espace-parents h2 ,#espace-professeurs h2 
{
opacity:0;

}

#espace-cours a ,#espace-parents a ,#espace-professeurs a 
{
opacity:0;

}

/*alignement à l'interieur des sections*/
#espace-cours,#espace-parents,#espace-professeurs
{
 	display: flex;

    	justify-content: flex-start;
      
        flex-direction: column;

 	width: 32%;

 	height: 780px;

 	overflow: hidden;
  

}
/*affichage du titre principal lors du passage de la souris*/

#espace-cours:hover h1 ,#espace-parents:hover h1,#espace-professeurs:hover h1
{
  font-family: 'caviar_dreamsregular';

  font-size: 47px;
  
  width : 100%;

  text-align :center;

  color :white;

  margin-top:100px;	
  
  opacity : 1;

}


#espace-cours:hover h2
{

  font-family: 'open_sanslight';

  font-size: 17px;
  
  width : 60%;

  text-align :center; 

  color :white;

  border-top: 1px solid #ffffff;

  border-bottom: 1px solid #ffffff;

  padding-top: 5px;

  padding-bottom: 5px;
    
  margin-left : 20%;

  margin-right : 20%;

  margin-top:100px;

  opacity : 1;

}

/*affichage du second titre  lors du passage de la souris*/

#espace-parents:hover h2
{

  font-family: 'open_sanslight';

  font-size: 17px;
  
  width : 60%;

  text-align :center; 

  color :white;

  border-top: 1px solid #ffffff;

  border-bottom: 1px solid #ffffff;

  padding-top: 5px;

  padding-bottom: 5px;
    
  margin-left : 20%;

  margin-right : 20%;

  margin-top:40px;

  opacity : 1;

}

#espace-professeurs:hover h2
{

  font-family: 'open_sanslight';


  font-size: 17px;
  
  width : 60%;

  text-align :center; 

  color :white;

  border-top: 1px solid #ffffff;

  border-bottom: 1px solid #ffffff;

  padding-top: 5px;

  padding-bottom: 5px;
    
  margin-left : 20%;

  margin-right : 20%;

  margin-top:100px;

  opacity : 1;

}
/*affichage du botton lors du passage de la souris*/
#espace-cours:hover a
{

  font-family: Open Sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : #2a2c3a;

  background-color: white;

  border: 2px solid #ffffff;

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:63px;

  border-radius: 25px;
  
  text-decoration: none;

  opacity:1;

}

#espace-parents:hover a
{

  font-family: Open Sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : #2a2c3a;

  background-color: white;

  border: 2px solid #ffffff;

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:55px;

  border-radius: 25px;
  
  text-decoration: none;

  opacity:1;

}

#espace-professeurs:hover a
{

  font-family: Open Sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : #2a2c3a;

  background-color: white;

  border: 2px solid #ffffff;

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:55px;

  border-radius: 25px;
  
  text-decoration: none;

  opacity:1;

}

/*formee du button lors du passage de la souris*/

#espace-cours a:hover
{

  font-family: open sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : white;

  background-color: transparent;

  border: 2px solid #ffffff; 

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:63px;

  border-radius: 25px;
  
  text-decoration: none;

  

}

#espace-parents a:hover
{

  font-family: open sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : white;

  background-color: transparent;

  border: 2px solid #ffffff; 

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:55px;

  border-radius: 25px;
  
  text-decoration: none;

  

}

#espace-professeurs a:hover
{

  font-family: open sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : white;

  background-color: transparent;

  border: 2px solid #ffffff; 

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:55px;

  border-radius: 25px;
  
  text-decoration: none;

  

}



#espace-cours
{
  
  background: url('images/page1/cours.jpg') no-repeat top ;
  flex: 1;

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

}

#espace-cours:hover
{
  
  background: url('images/page1/cours-hover.jpg') no-repeat  top;

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  

}
#espace-parents
{
  background: url('images/page1/parents.jpg') no-repeat top;
  flex: 1;

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

}

#espace-parents:hover
{
  background: url('images/page1/parents-hover.jpg') ;
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  

}

#espace-professeurs
{
  background: url('images/page1/professeurs.jpg') no-repeat top;
  flex: 1;

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

}
#espace-professeurs:hover
{
  background: url('images/page1/professeurs-hover.jpg') no-repeat top;

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

}
/*Responsive design*/

@media all and (max-device-width: 700px)

{

section
{

    display: flex;


    flex-direction: column;

    justify-content: center;
 
    
}

#espace-cours,#espace-parents,#espace-professeurs
{
 	

 	width: 100%;
        
 	
  

}

/*affichage du titre principal lors du passage de la souris*/

#espace-cours h1 ,#espace-parents h1,#espace-professeurs h1
{
  font-family: 'caviar_dreamsregular';

  font-size: 47px;
  
  width : 100%;

  text-align :center;

  color :white;

  margin-top:100px;	
  
  opacity : 1;

}


#espace-cours h2
{

  font-family: 'open_sanslight';

  font-size: 17px;
  
  width : 60%;

  text-align :center; 

  color :white;

  border-top: 1px solid #ffffff;

  border-bottom: 1px solid #ffffff;

  padding-top: 5px;

  padding-bottom: 5px;
    
  margin-left : 20%;

  margin-right : 20%;

  margin-top:100px;

  opacity : 1;

}

/*affichage du second titre  lors du passage de la souris*/

#espace-parents h2
{

  font-family: 'open_sanslight';

  font-size: 17px;
  
  width : 60%;

  text-align :center; 

  color :white;

  border-top: 1px solid #ffffff;

  border-bottom: 1px solid #ffffff;

  padding-top: 5px;

  padding-bottom: 5px;
    
  margin-left : 20%;

  margin-right : 20%;

  margin-top:40px;

  opacity : 1;

}

#espace-professeurs h2
{

  font-family: 'open_sanslight';


  font-size: 17px;
  
  width : 60%;

  text-align :center; 

  color :white;

  border-top: 1px solid #ffffff;

  border-bottom: 1px solid #ffffff;

  padding-top: 5px;

  padding-bottom: 5px;
    
  margin-left : 20%;

  margin-right : 20%;

  margin-top:100px;

  opacity : 1;

}
/*affichage du botton lors du passage de la souris*/
#espace-cours a
{

  font-family: Open Sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : #2a2c3a;

  background-color: white;

  border: 2px solid #ffffff;

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:63px;

  margin-bottom:60px;

  border-radius: 25px;
  
  text-decoration: none;

  opacity:1;

}

#espace-parents a
{

  font-family: Open Sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : #2a2c3a;

  background-color: white;

  border: 2px solid #ffffff;

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:55px;

  margin-bottom:60px;

  border-radius: 25px;
  
  text-decoration: none;

  opacity:1;

}

#espace-professeurs a
{

  font-family: Open Sans;

  font-size: 17px;
  
  width : 35%;

  text-align :center;

  vertical-align :center; 

  color : #2a2c3a;

  background-color: white;

  border: 2px solid #ffffff;

  padding : 4px 4px 4px 4px;

  margin-left : 30%;
    
  margin-top:55px;

  margin-bottom:60px;

  border-radius: 25px;
  
  text-decoration: none;

  opacity:1;

}





#espace-cours
{
  
  background: url('images/page1/cours-hover.png') no-repeat  ;

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  

}


#espace-parents
{
  background: url('images/page1/parents-hover.png') ;
  
/* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  

}


#espace-professeurs
{
  background: url('images/page1/professeurs-hover.png') no-repeat ;

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
 
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;


}
}

@media all and (max-device-width: 480px)
{

nav ul

{

    display: none;
   

}

#connexion

{

    background: url('images/MOBILE-MENU.png') no-repeat right;

    width: 130px;

    height: 49px;

}


#connexion:hover

{

    background: url('images/MOBILE-MENU-HOVER.png') no-repeat right;

    width: 130px;

    height: 54px;

}

#connexion ul

{

    list-style-type: none;
    width: 130px;
    height: 120px;
    background-color: rgba(90, 120, 139, 0.9);
    padding : 10px 3px 3px 10px;
    
    

}




#connexion:hover #connexion-box
{

	display:block;
        position:absolute;
        
              

}





#connexion a 

{

    display:block;

    font-size: 1em;

    color: #b3b3b3;

    padding-bottom: 20px;

    text-decoration: none;

    width : 100%;
    


}

#connexion a:hover 

{
    color: #ffffff;
}




}