@media only screen and (min-width: 200px)

  {

body {
   font-family:Arial, Helvetica, sans-serif;
}
.clearfix:before, .clearfix:after{
     content: "";
     display: table;
}
.clearfix:after{
     clear: both;
}
a{
     color:#0067ab;
     text-decoration:none;
}
a:hover{
     text-decoration:underline;
}

#BlocFormRegLog
{
 text-align: center;
   
}

#logoEtLogoLinkLogoRegi
{
  display: flex;
  justify-content: space-around;
}

#logoLogoRegi
{
position: relative;    
height: 47px;
width: 130px;
margin-top: 20px;
background: url(imaj/logoS.png);
background-repeat: no-repeat;
background-position: center;
margin-bottom: 30px;
}

#logoLinkLogoRegi
{
display: inline-block;
position: relative;
height: 100%;
width: 100%;
}

      
#MessageFromPhp
{
    display: none;
    background-color: #FFACC8;
    width: 90%;
    margin: auto;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
}

.form{
     width:95%;
     margin: 0 auto;
     border: 1px solid silver;  
}


.conditionEtMessageDerreur, .messageDePrecision
{
     font-size: 0.8em;
     text-align: left;
     margin-left: 5px; 
}

.cacher
{
    display: none;
}

#indicationDeConnectionApresEnregistrement, #indicationDeCreationDeCompte
{
  text-align: left; 
  margin-left: 5px;
  font-size: 0.8em;   
}

.label
{
    font-size: 0.8em;
     text-align: left;
     margin-left: 15px;
     margin-top: 15px;
     font-weight: bold;   
}

input[type='text'], input[type='email'],
input[type='password'] {
     width: 85%;
     border-radius: 2px;
     border: 1px solid #CCC;
     padding: 10px;
     color: #333;
     font-size: 14px;
     margin-top: 5px;
}

input[type='submit']{
     padding: 5px 15px 5px;
     color: #fff;
     background-color: #0067ab;
     text-shadow: rgba(0,0,0,0.24) 0 1px 0;
     font-size: 16px;
     box-shadow: rgba(255,255,255,0.24) 0 2px 0 0 inset,#fff 0 1px 0 0;
     border: 1px solid #0164a5;
     border-radius: 2px;
     margin-top: 10px;
     cursor:pointer;
}

input[type='submit']:hover {
     background-color: #024978;
                    }

input:focus { outline: 0; } 

#passwordOublier
{
  color: blue;
  text-align: left;
  margin-left: 5px;
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.9em;
}


#passwordOublier:hover
{
  text-decoration: underline;
}

.messageDePrecision
{
  font-size: 0.8em;
  color: grey;
}

.envoyer
{
  margin-bottom: 20px;
  margin-top: 25px;
}

.annuler
{
  color: blue;
  text-align: right;
  cursor: pointer;
  opacity: 0.7;
  margin-right: 10px;
  margin-bottom: 20px;
}

.annuler:hover
{
  text-decoration: underline;
}

/*specially for reg*/


#messageDuCode
{
position: absolute;
z-index: 1000;
background-color: rgba(220,220,220,1);
width: 85%;
padding:5px;
border-radius: 5px;
top:80px;
font-size: 0.8em;

}  

#theCode
{
font-size: 1.4em;
}  

#jeComprends
{
 background-color: rgba(140,140,140,1);
 cursor: pointer;
 width: 90%;
 text-align: center;
 padding: 10px;
 margin-top: 20px;
 border-radius: 3px;
 bottom: 20px;
 font-size: 1.2em;
}

#jeComprends:hover
{
background-color: rgba(150,150,150,1);;
}

/*specially for reg*/


}



  @media only screen and (min-width: 350px)

  {


#logoLogoRegi
{  
height: 54px;
width: 150px;
margin-top: 20px;
background: url(imaj/logoM.png);
}

      
#MessageFromPhp
{
    width: 320px;
}

.form{
     width: 320px;
}


.conditionEtMessageDerreur, .messageDePrecision
{
     margin-left: 30px; 
}


#indicationDeConnectionApresEnregistrement, #indicationDeCreationDeCompte
{
  margin-left: 15px;
  font-size: 1em;    
}

.label
{

     margin-left: 25px;
     margin-top: 20px;
  
}

input[type='text'], input[type='email'],
input[type='password'] {
     width: 250px;
}

input[type='submit']{
     padding: 10px 25px 8px;
}


#passwordOublier
{
  margin-left: 15px;
  font-size: 1em;
}


.envoyer
{
  margin-bottom: 20px;
  margin-top: 30px;
}

.annuler
{
  margin-right: 20px;
  margin-bottom: 20px;
}


/*specially for reg*/

#messageDuCode
{
 padding: 10px;
}  

 
/*specially for reg*/
  



}


@media only screen and (min-width: 600px)

{

 #logoLogoRegi
{  
height: 65px;
width: 180px;
margin-top: 20px;
background: url(imaj/logoB.png);
}
   


/*specially for reg*/
#theCode
{
font-size: 1.6em;
}

#jeComprends
{
 width: 110px;
 padding: 15px;
 margin-left: 150px;
 margin-top: 20px;
 border-radius: 2px;
}

#jeComprends:hover
{
background-color: rgba(150,150,150,1);;
}

#messageDuCode
{
width: 320px;
top: 80px;
right: 100px;
padding: 20px;
}  

 
/*specially for reg*/
  
}