#mespg{
  padding:10px;
  margin: 0 auto;
}
#mespg *{
  box-sizing:border-box;
}
.mespg-container:after, .mespg_fields-wrapper:after{
  clear:both;
  display:table;
  content: "";
}
#mespg ul, #mespg li, #mespg label{
  margin:0;
  padding: 0;
  border: none;
  font-weight: normal;
}
/*------- search results profile grid------------*/
.mespg-results{
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding-top: 10px;
}
.mespg-container{
  margin-top: 20px;
}
.mespg-user{
  margin-bottom: 10px;
}
.mespg-user__wrap{
  padding: 10px;
  position: relative;
  height: auto;
  border: 3px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}
.mespg-user__wrap:hover{
  border-color: #bbb;
}
.mespg-user__avatar{
  width: 100px;
  height: 100px;
  margin: 3px auto 0;
}
.mespg-user__avatar img{
  width:100%;
  height:100%;
  max-height:100%;
  max-width:100%;
  border-radius: 50%;
  border: 5px solid #eee;
}
.mespg-user__wrap:hover img{
  border-color: #bbb;
}
.mespg-user__details{
  padding: 10px 0 0 0;
  overflow: hidden;
  text-align: center;
}

@media (min-width:800px){
  .mespg-user{
    width:50%;
    float:left;
    padding:0 5px;
  }
  .mespg-user__wrap{
    padding: 0;
    height: 330px;
  }
}
@media (min-width:1200px){
  .mespg-user{
    width:33.333333%;
    float:left;
  }
}
/*----- pagination ---------*/
.mespg-pagination{
  text-align: center;
  margin-top:50px;
}
#mespg .mespg-pagination > ul{
  list-style: none;
  display: inline-block;
  text-align: center;
}
#mespg .mespg-pagination  li{
  display: inline-block;
  margin: 10px 5px;
  text-align: center;
}
#mespg .mespg-pagination li span{
  padding: 5px 13px;
  background: #eee;
  border: 1px solid #ccc;
}

#mespg .mespg-pagination li.mespg-active span, #mespg .mespg-pagination li:hover span{
  background: #888;
  color: #fff;
}

/*----- form ---------*/
#mespg form{
  text-align: left;
  width: 100%;
}
.mespg-field{
  margin-top:10px;
}
.mespg-field input[type="text"]{
  padding: 2px 6px;
}
.mespg-field input[type="text"], .mespg-field select{
  width:100%;
  max-width: 100%;
  display: inline-block;
}
.mespg-field input[type="submit"], .mespg-field input[type="reset"]{
  display: inline-block;
  margin-bottom: 10px;
}
#mespg .mespg-checkfield > label{
  display:inline-block;
  margin-right: 15px;
  font-weight: normal;
  font-size: 0.9em;
}
.mespg-checkfield input{
  margin-right:0;
}
.mespg-groupfield input{
  margin-right:10px;
}
.mespg-groupfield label{
  display: inline-block;
}
.mespg-fieldlabel{
  font-weight: bold;
  display: block;
  margin-right: 10px;
}
.mespg-total-users{
  font-size: 0.9em;
  font-weight: bold;
}
#mespg .mespg-grouplist {
  list-style:none;
  text-align:left;
}
#mespg .mespg-grouplist > li{
  display:block;
}
.mespg-btnfield{
  text-align: center;
  margin-top: 20px;
}
@media (min-width:420px){
  #mespg form{
    max-width:390px;
    margin: 0 auto;
  }
}
@media (min-width:700px){
  #mespg form{
    max-width: 820px;
  }
  .mespg-field{
    float:left;
    width: 48%;
    margin-right:10px;
  }
  #mespg form:after{
    clear:both;
    display:table;
    content: '';
  }
  .mespg-fieldlabel{
    display: inline-block;
  }
  .mespg-geotypefield, .mespg-btnfield, .mespg-groupfield{
    width:100%;
  }
  .mespg-searchtypefield > label{
    margin-top:10px !important;
  }
}
.mespg-ca-selected .mespg-searchfield{
  width:100%;
}
.mespg-errormsg{
  text-align: center;
  width:100%;
}
.mespg-user__login{
  font-size: 1.2em;
}
.mespg-user:hover  .mespg-user__login{
    font-weight:bold;
}
.mespg-container .wpbdp-pagination{
  display: none !important;
}
.mespg-tooltip-wrap{
  position: relative;
}
.mespg-tooltip-wrap > .mespg-icon-help{
  position: absolute;
  left: 5px;
  top: 0;
  border: 1px solid transparent;
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1.3em;
  width:24px;
  height: 24px;
}
.mespg-tooltip-content{
  display: none;
  position: absolute;
  border: 1px solid #aaa;
  background: #fff;
  /*left: -1px;
  top: -4px;*/
  /*left: -1px;
  top: 2px;*/
  left:5px;
  top:0;
  z-index: 5;
  width: 200px;
  box-shadow: 5px 5px 5px;
  font-size: 1em;
  border-radius: 5px;
  font-weight: normal;
  line-height: 1.3em;
}
.mespg-tooltip-content .mespg-icon-help{
  display: block;
  font-size: 1em;
  line-height: 1.3em;
  width:24px;
  height: 24px;
  position: relative;
}
.mespg-tooltip-msg{
  text-align: left;
  display: inline-block;
  font-size: 0.9em;
  padding: 0px 10px 10px 10px;
}
/*------------- icon *----------------------*/
@font-face {
  font-family: 'fontello-mespg';
  src: url('font/fontello.eot?6317258');
  src: url('font/fontello.eot?6317258#iefix') format('embedded-opentype'),
       url('font/fontello.woff2?6317258') format('woff2'),
       url('font/fontello.woff?6317258') format('woff'),
       url('font/fontello.ttf?6317258') format('truetype'),
       url('font/fontello.svg?6317258#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?6317258#fontello') format('svg');
  }
}
*/
 
 [class^="mespg-icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello-mespg";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.mespg-icon-help:before { content: '\e801'; } /* '' */


/*---------- career advice results-----------------*/
.mespg-ca-container, 
.mespg-ca-post{
  width: 100%;
  display: block;
}
#mespg .mespg-ca-post img{
  width: 100%;
  height: auto;
  max-width: 100%;
  margin-bottom: 0;
  vertical-align: bottom;
}
#mespg .mespg-ca-post a{
  text-decoration: none;
}
.mespg-ca-post{
  margin: 0 0 11.5% 0;
}
#mespg .mespg-ca-post__title{
  margin-top: 10px;
  font-size: 18px;
}
@media (min-width: 479px){
  .mespg-ca-post{
    float: left;
    clear: none;
    width: 47.25%;
    margin: 0 5.5% 9.5% 0;
  }
  .mespg-ca-post:nth-child(2n){
      margin-right:0;
  }
  .mespg-ca-post:nth-child(2n + 1){
      clear:both;
  }
  .mespg-ca-container:after{
    clear: both;
    display: table;
    content: '';
  }
}
@media (min-width: 767px){
  .mespg-ca-post,.mespg-ca-post:nth-child(n) {
    float:left;
    clear: none;
    width: 29.666%;
    margin: 0 5.5% 7.5% 0;
  }
  .mespg-ca-post:nth-child(3n){
      margin-right:0;
  }
  .mespg-ca-post:nth-child(3n + 1){
      clear:both;
  }
}
@media (min-width: 981px){
  .mespg-ca-post, .mespg-ca-post:nth-child(n) {
    width: 20.875%;
    clear: none;
    margin-right: 5.5%;
    margin-bottom: 5.5%;
  }
  .mespg-ca-post:nth-child(4n){
      margin-right:0;
  }
  .mespg-ca-post:nth-child(4n + 1){
      clear:both;
  }
}