@media only screen and (min-width: 200px)
  {
  #loader
    {  
       position: fixed;  
       width: 98%;
       height: 53px;
       bottom: 100px;   
    }

    #loader img{
      width: 150px;
      height: 53px;
      display: inline-block;
      border-radius: 50px;
      border: 1px silver solid;
    } 


body {
   font-family:Arial, Helvetica, sans-serif;
 }

    #introForm
    {
      font-weight: bold;
    }

input[type="text"]
{

width: 84%;
border-radius: 2px;
border: 1px solid #CCC;
padding: 10px;
color: #333;
font-size: 14px;
margin-top: 5px;
}

span
{
  white-space: nowrap;
}


textarea
{
height: 50px;
width: 84%;
border-radius: 2px;
border: 1px solid #CCC;
padding: 10px;
color: #333;
font-size: 14px;
margin-top: 5px;
resize : none;
}

textarea:focus
{
outline: 0; 
}

select
{
height: 40px;
width: 90%;
border-radius: 2px;
border: 1px solid #CCC;
padding: 10px;
color: #333;
font-size: 14px;
margin-top: 5px;
}

#departement, #ville
{
width: 90%;
}

#formDUpload
{
text-align: center;
position: relative;
}


#theForm
{
border: silver 1px solid;
width: 90%;
margin: 0 auto;
}

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

input[type="file"]
{
display: none;
}


#images
{
display: flex;
flex-wrap: wrap;

}

#images label
{
background-color: silver;
margin: 5px;
text-align: center;
width: 45%; 
height: 110px;
}

.label
{
 width: 100%; 
 height: 110px;
 border: solid silver 1px;
 font-size: 0.8em;
 display: flex;
 align-items: center;
 justify-content: center;
}

#chargementImage p
{
font-weight: bold;
font-size: 0.9em;
}

img
{
height: 110px;
width: 100%;
}


input[type='submit']{
padding: 10px 25px 8px;
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: 15px;
cursor:pointer;
margin-bottom: 10px;
}

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

input:focus { outline: 0; } 
select:focus{ outline: 0; }

.labelDetail
{
margin-top: 35px;
text-align: left;
margin-left: 4%;
}

.labelDetail label
{
font-weight: bold;
font-size: 0.9em;
}

.conditionEtMessageDerreur
{
font-size: 0.8em;
text-align: left;
margin-left: 3%;

}

#couleurs, #tailles
{
font-size: 0.8em;
text-align: left;
}


#couleurs, #tailleVetement, #tailleChaussure
{
opacity: 0.3;
}

#labelTaille, #labelCouleur, #labelMarque, #marque, #labelAutresCouleurs, #labelAutresTailles, #autresTailles, #autresCouleurs
{
opacity: 0.3;
}

#otherColor, #otherSize
{
text-align: left;
margin-top: 20px;
font-weight: bold;
opacity: 0.3;
}

#etats
{
text-align: left; 
}

input[type='checkbox'], input[name='etat']
{
margin-left: 10px; 
}


.cacher
{
display: none;
}


#messageFromPhp
{
position: fixed;
left: 20px;
bottom: 90px;
padding: 20px;
background-color: black;
border-radius: 5px;
color: white;

}


}


@media only screen and (min-width: 400px)
  {
    #images label
    {
     width: 30%; 
     height: 110px;
    }

  }



@media only screen and (min-width: 600px)
  {
    #images label
    {
     width: 23%; 
     height: 110px;
    }
  }

  @media only screen and (min-width: 700px)
  {
    #images label
    {
     width: 15%; 
     height: 110px;
    }

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




@media only screen and (min-width: 800px)
  {
   
    .alaliy
    {
      display: none;
    }

    #introForm
    {
      font-size: 1.4em;
    }


input[type="text"]
{
width: 500px;
}

input[id="prix"]
{
width: 375px;
}

textarea
{
width: 500px;
}


select
{
width: 524px;
}

#departement, #ville
{
width: 260px;
}

#theForm
{
width: 680px;
min-width: 680px;
}

#chargementImage p
{
font-size: 1em;
}




.label
{
height: 170px;
width: 156px;
}


#images label
{

height: 170px;
width: 156px;
}

.labelDetail
{
margin-top: 35px;
text-align: left;
margin-left: 0%;
}

.labelDetail label
{
margin-left:85px;
font-weight: bold;
}

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

#couleurs, #tailles
{
font-size: 0.8em;
text-align: left;
}


#couleurs, #tailleVetement, #tailleChaussure
{
margin-left: 50px; 
opacity: 0.3;
}

#otherColor, #otherSize
{
margin-left: 50px;
}

#etats
{
text-align: left;
margin-left: 70px; 
}

img
{
height: 170px;
width: 156px;
}

#messageFromPhp
{
left: 100px;
bottom: 100px;
}


}

@media only screen and (min-width: 1025px)
  {
        #logoLogoRegi
    {  
    height: 65px;
    width: 180px;
    background: url(imaj/logoB.png);
    }
  }