@import (once) "default.less";
@import (once) "common.less";




@media (max-width:640px){
}


/* .message ///////////////////////*/
.message{
padding:20px 0 0 0;

.icon{
.dib;
.vam;
margin:0 0 0 -10px;
}
h2{
.dib;
.vam;
img{ height:40px; }
}

article{
width:820px;
padding:30px 0 0 0;
.center;
}
dl{
.dt;
direction:rtl;
padding:0 0 10px 0;
}
dd{
.dtc;
.vat;
direction:ltr;
}
.image{
padding:0 0 0 20px;
p{
padding:10px 0;
.tar;
font-size:14pt;
}
}
h4{
padding:40px 0 30px 0;
}
}


@media (max-width:960px){
.message{
article{
width:95%;
}
h3 img{
max-width:100%;
}
h4 img{
max-width:100%;
}
.image{
width:40%;
}
.image img{
max-width:100%;
}
.image p{
font-size:11pt;
}
}
}


@media (max-width:720px){
.message{
.icon{
height:80px;
margin:0;
}
h2 img{
height:30px;
}
}
}


@media (max-width:560px){
.message{
header{
width:300px;
}

article{
width:300px;
}
.icon{
height:60px;
margin:0 5px 0 -10px;
}
h2 img{
height:25px;
}

dl{
direction:ltr;
}
dd{
.db;
width:100%;
}
.image{
.tac;
width:100%;
padding:0;
p{
padding:10px;
}
}
h4{
padding:30px 0 15px 0;
font-size:12pt;
p{ .bold; }
}
}
}