@import http://fonts.googleapis.com/css?family=Raleway;
/*----------------------------------------------
CSS Settings For HTML Div ExactCenter
------------------------------------------------*/
/* 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;

}

/*elements généraux de la page*/
element, body

{
 background: url('images/background.jpg');

 /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  

}




element, body, h1, footer h1, nav a

{

    font-family: 'caviar_dreamsbold', Open Sans;

    font-weight: normal;

    margin: 0;

}



/*Mise en page du menu de navigation*/
header

{


    display: flex;

    justify-content: space-between;

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

    padding-left : 15px;
 
    margin-bottom : 12px;

    background-color: white;


}

/* 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;

}


#logo img

{

    width: 100px;

    height: 39px;
    
    margin-left:20px;

}

#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;

}

/*Mise en page de la section principale*/
section

{

    

    background-color: rgba(90, 120, 139, 0.9);

    width: 376px;
    height: 474px;
    margin-top:60px;
    margin-left: auto;
    margin-right: auto;

}

/*Titre principal de la section*/
#login-box
{

     display: flex;

     justify-content: space-between;
      
     flex-direction: column;

     height: 400px; /* Un peu de hauteur pour que les éléments aient la place de bouger */

}


/*style du formulaire*/
form
{

     display: flex;

     justify-content: space-between;
      
     flex-direction: column;

     margin: auto;

     height: 300px; /* Un peu de hauteur pour que les éléments aient la place de bouger */

     width: 293px;

}
/*Mise en forme du placeholder*/
input[type=text],input[type=password] {
    width: 80%;
    height: 53px;
    
    margin: 8px 0;
    background-color: rgba(255, 255, 255, 0.23);
    font-family: 'open_sanslight';
    font-size: 14px;
    color: #ffffff;
    border-style: none;
    padding-left:55px;
    border-radius: 80px;
    }

input[type=submit] {
    width: 100%;
    height: 53px; 
     
    margin: 13px 0;
    background-color: rgba(241, 90, 36, 1);
    font-family: Open Sans;
    font-size: 16px;
    color: #ffffff;
    border-style: none;
    border-radius: 60px;
}

input[type=submit]:hover {

    background-color: rgba(220, 166, 106, 1);
  
}

/*Icone du placeholder*/
input[type=text]{
background-image:url(images/utilisateur_logo.png);
background-repeat:no-repeat;
background-position:6px;
}
input[type=password]{
background-image:url(images/password_logo.png);
background-repeat:no-repeat;
background-position:12px;
}



#login-box h1
{
  font-family: 'caviar_dreamsregular';

  font-size: 32px;
  
  width : 50%;

  text-align : center;

  color :white;

  margin: auto;
  margin-bottom: 35px;
  
  
}

#login-box img
{
  
  width : 84px;
  height: 33px ;

  text-align : center;

  color :white;

  margin: auto;	
  margin-top: 35px;
  margin-bottom: 25px;
}


#login-box h3
{
  font-family: Open Sans;

  font-size: 18px;
  
  width : 80%;

  text-align : center;

  color :  #6c2217;

  margin: auto;
  margin-bottom: 35px;
  
  
}

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

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;
}

header {
    display: none;
}


}