@import url(global.css);
@import url(header2.css);
@import url(footer.css);
@import url(menu.css);

#wrap{
font-family: corbel, colibri, Sans-serif !important;
}

/*main*/

#main{
padding-bottom: 100px;
}

/* tableaux commandes */

#commande{
margin-top: 50px;
font-family: "Colibri Light", Sans-serif;
font-size: 90%;
}

/*Header*/
.com-header{
display: flex;
align-items: center;
padding: 0px 10px 1px 10px;
background-color: #eeeeff;
border: thin #ccc solid;
margin-top: 25px;
}

.com-header p:first-child{
flex: 1;
}

.com-header:first-child{
margin-top: 0px;
}

.com a{
color: #336699;
}

.com a:hover{
color: blue;
text-decoration: underline;
}

.color{
font-size: 90%;
color: orange;
font-style: italic;
}

/*commandes*/

.box-commandes{
display: flex;
align-items: center;
flex-wrap: wrap;
color: #777;
border: thin #ccc solid;
border-top: none;
}

.imgProduit img{
padding: 10px 0px 10px 0px;
}

.imgProduit, .nomArticle, .destinataire{
margin-left: 1%;
}

.nomArticle{
color: #555;
}

.imgProduit{
width: 20%;
}

.nomArticle{
width: 40%;
}

.destinataire{
width: 35%;
}

.pourcent{
opacity: 0.8;
font-size: 90%;
padding: 1px 5px 1px 5px;
background-color: #ffcc33;
color: #333;
border-radius: 5px;
border: thin #777 solid;
font-weight: 600;
text-shadow: 0.5px 0.5px #fff;
}

.pourcent, .prixReduit{
display: inline-block;
}

.destinataire{
font-style: italic;
font-size: 90%;
}

/* RESPONSIVE */

@media screen and (max-width:960px){

.imgProduit, .nomArticle, .destinataire{
margin-left: 1%;
}

.imgProduit{
width: 30%;
}

.imgProduit img{
display: block;
margin: auto;
position: relative;
top: 40px;
}

.nomArticle{
width: 65%;
}

.destinataire{
position: relative;
bottom: 40px;
width: 100%;
margin-left: 32%;
margin-bottom: -20px;
}

}

@media screen and (max-width:640px){

#main{
padding-bottom: 50px;
}

.imgProduit, .nomArticle, .destinataire{
margin-left: 0%;
}

.imgProduit{
width: 100%;
}

.imgProduit img{
width: 150px;
position: relative;
top: 0px;
}

.nomArticle{
width: 100%;
text-align: center;
margin-top: 10px;
}

.destinataire{
width: 100%;
position: relative;
bottom: 0px;
text-align: center;
margin-bottom: 20px;
}


}