.howto-assessment{ background: url(../images/bg-blue.png); padding: 12px; border-radius: 18px; text-align: center;}
.howto-assessment .title{ color: #06348b; font-size: 22px; font-weight: bold; padding: 8px;}
.howto-assessment .title2{ color: #000000; font-size: 14px; font-weight: bold; padding: 8px;}
.howto-assessment .step-howto{  display: flex; flex-wrap: wrap;}
.howto-assessment .thumbnail{ width:24%; display: inline-block; margin: 8px auto; background: #fff; border-radius: 18px; overflow: hidden; padding-bottom: 36px; position: relative;
  /*-webkit-box-shadow: 3px 3px 0px 0px rgba(141,164,178,1);
  -moz-box-shadow: 3px 3px 0px 0px rgba(141,164,178,1);
  box-shadow: 3px 3px 0px 0px rgba(141,164,178,1);*/
}
.howto-assessment .thumbnail img{ width: 100%; max-width: 190px;}
.howto-assessment .thumbnail div{ padding: 12px; line-height: 1.3; text-align: justify;}
.howto-assessment .thumbnail .step{ background: #66ccff; color: #fff; text-transform: uppercase;  font-weight: bold; font-size: 16px; text-align: center; padding: 8px; position: absolute; bottom: 0; width: 100%; border-top: 2px solid #aaaaaa;}

.title-form-assessment{ padding: 18px;}
.title-form-assessment .title{ font-size: 18px; color: #000; font-weight: bold; margin:8px auto;}
.title-form-assessment .title-personal{font-size: 18px; color: #666666; font-weight: bold; margin:8px auto;}

.form-assessment{ background: #e4f4fe; border-radius: 22px; color: #000;}
.form-assessment ul{ display: table; width: 100%;}
.form-assessment ul li{ display: table-row;}
.form-assessment ul li div{ display: table-cell; padding: 12px; border-bottom: 1px solid #fff; vertical-align: top;}
.form-assessment ul li div:first-child{ text-align: right; padding-left: 18px;}
.form-assessment ul li div .highlight{ color: #fa7c3c; float: left;}
.form-assessment ul li div input[type="text"] { padding: 4px 8px; width: 50%; border: 1px solid #fff;}
.form-assessment ul li div input[type="text"].short{ width: 22%;}
.form-assessment ul li div textarea{ height: 100px; padding: 4px 8px; width: 80%; border: 1px solid #fff;}
.form-assessment ul li div.time-sell br{ display: none;}

.button-position{ text-align: center; width: 100%; margin: 12px auto;}
.button-send{ background: #ffb01f; padding: 8px; color: #fff; margin: auto; border-radius: 12px; width: 150px; display: inline-block; border: 1px solid #ffb01f; border-bottom: 3px solid #b5b3b3; height: 40px;}
.button-send:hover{ text-decoration: none; background: #fbc768;}


@media( max-width:768px){
  .howto-assessment .thumbnail{ width: 48%;}
.form-assessment{ border-radius: 10px; }
   .form-assessment ul { padding:10px;}
  .form-assessment ul li {border-bottom: 1px solid #fff; text-align:left; display:block;}
  
  .form-assessment ul li div{ display: block; padding: 3px; border-bottom: none; vertical-align: top;}
  .form-assessment ul li div:first-child{ text-align:left; padding:3px ;}
  .form-assessment ul li div input[type="text"] { padding: 4px 8px; width: 90%; border: 1px solid #fff; font-size:16px;}
.form-assessment ul li div input[type="text"].short{ width: 33%; font-size:16px;}


}
@media( max-width:680px)
{
  .form-assessment ul li div input[type="text"] { padding: 4px 8px; width: 80%}
  .form-assessment ul li div input[type="text"].short{ width: 34%;}
  .form-assessment ul li div textarea{ height: 100px; padding: 4px 8px; width: 100%;}
  .form-assessment ul li div.time-sell br{ display: block;}
}
@media( max-width:420px){
  .howto-assessment .thumbnail{ width: 100%;}
  .form-assessment ul li div .highlight{ display: block; width: 100%; font-size: 10px;}
}