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






.notSuccessPwd{
    color: darkorange !important;
}

.SuccessPwd{
    color: aquamarine !important;
}

.connexionPage{
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
}

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





}



h2

{

	color: #36648b

}



/* 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(254, 219, 70, 1);

    font-family: Open Sans;

    font-size: 16px;

    color: #ffffff;

    border-style: none;

    border-radius: 60px;

}



input[type=submit]:hover {



    background-color: rgba(140, 147, 69, 1);

  

}



input[type=button] {

    width: 100%;

    height: 53px; 

     

    margin: 13px 0;

    background-color: rgba(254, 219, 70, 1);

    font-family: Open Sans;

    font-size: 16px;

    color: #ffffff;

    border-style: none;

    border-radius: 60px;

}



input[type=button]:hover {



    background-color: rgba(140, 147, 69, 1);

  

}



#submitButton {

    width: 100%;

    height: 53px; 

     

    margin: 13px 0;

    background-color: rgba(254, 219, 70, 1);

    font-family: Open Sans;

    font-size: 16px;

    color: #ffffff;

    border-style: none;

    border-radius: 60px;

}



#submitButton:hover {



    background-color: rgba(140, 147, 69, 1);

  

}



.Evenement-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 */

    font-family: 'Lato', sans-serif;





  }





  /* Modal Header */

  .modal-header {

      padding: 2px 16px;

      background-color: #fff;

      color: #36648b;

      padding-top :15px;

      text-align: center



   

  }



  .modal-header h1 {



    font-size: 55px;

    font-family: lato;

}



.modal-header span {



    float : left;

}



  .modal-header h3 {

      

    font-weight: 300;

    font-size: 25px;

   

  }


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

    font-size: 18px;

    font-weight: bold;
    
    width : 80%;

    text-align : center;

    color :  #6c2217;

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

  /* Modal Body */

  .modal-body {padding: 2px 16px; color : #5b6572; text-align: center}



 .modal-body img {

    width: 60%;

}



  /* Modal Footer */

  .modal-footer {

      padding: 35px 16px;

      background-color: #fff;

      color: white;

  }



  .modal-footer a {

    width: 20%;

    padding: 5px;

    background-color: #82b440;

    font-family: Lato;

    font-weight: 300;

    font-size: 17px;

    color: #ffffff;

    border-style: none;

    border-radius: 20px;

    display: block;

    margin: auto;

    text-align: center;

    text-decoration: none;

}



  /* Modal Content */

  .modal-content {

      position: relative;

      background-color: #fefefe;

      margin: auto;

      padding: 0;

      border: 1px solid #888;

      width: 80%;

      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

      -webkit-animation-name: animatetop;

      -webkit-animation-duration: 0.4s;

      animation-name: animatetop;

      animation-duration: 0.4s

   

  }

  

  /* Add Animation */

	@keyframes animatetop {

		from {top: -300px; opacity: 0}

		to {top: 0; opacity: 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 : 70%;



  text-align : center;



  color :white;



  margin: auto;

  margin-bottom: 35px;

  

  

}



#login-box img

{

  

  width : 100px;

  height: 100px ;



  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-device-width: 700px)

{



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









}