html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color:#DFE7EF;
}

/* heading */
h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;}

/* spaces */
.wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; }


.h-100{height: 100%;}
.main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed;    background-position: bottom -10px left -130px;
  background-size: 45%;}
/* navbar */
.spotLight-nav{ margin-top: 20px;}
.spotLight-nav li a{font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.7470597624778748px;
  text-align: left; color:#000; opacity: 0.6;
  }
  .spotLight-nav li {margin-right: 14px;} 
 .spotLight-nav li.active a{font-weight: 600; opacity: 1;}
 .spotLight-nav li.spotLight-img a{opacity: 1;}
 .navbar-brand{ margin-right: 57px;}

 /* ul list style */
 .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; float: left; margin-top: 24px; }
  .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;}
  .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;}
  .sign-in-up-list li span{ float: left;}
  /* form */
  .form-layout{ width: 100%; display: block; float: left;}
  .form-layout form{ display:block; float: left; width: 100%;}
  .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;}
  .form-layout .social-login{ display: block;     width: 339px;
    margin: 0 auto; margin-top: 37px;  margin-bottom: 37px; }
  .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;}
  .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;}
  .form-layout .social-login ul li:nth-child(2){margin:0 37px;}
  .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;}

  form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important;   color: #000000;
  
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;}
  form input:focus{  box-shadow:0px !important; outline: 0px !important;}

  /* placeholder */
  form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    line-height: 18px;
    color: #000000;
    opacity: 0.5;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
  }
  
  form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    line-height: 18px;
    color: #000000;
    opacity: 0.5;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
  }
  
  form input::-ms-input-placeholder { /* Microsoft Edge */
    line-height: 18px;
    color: #000000;
    opacity: 0.5;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
  }
   /* placeholder */
  .sb-button{    background: #514DA7;
    height: 50px;
    line-height: 35px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    width: 100%;}
    .sb-button img{ margin-right: 10px;}
    .sb-button:hover{ color:#fff;} 
    .form-layout p{margin-top:17px ;}
    .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;}
    .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;}
    .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 700;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;}
    .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important;
    }
    .form-layout p a:hover{ color:#000;}
    .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;}
    .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;}
    .form-layout.signup-frm-spc{width: 300px; display: block; float: left;  margin-top: 214px;}
    .welcome-hd-back{
      font-family: 'Bebas Neue', cursive;
      font-style: normal;
      font-weight: 600;
      font-size: 106px;
      line-height: 106px;
      color: #000000;
  }
  .form-layout .go-back span{ font-weight: 500 !important;}
  .reset-pass-spc{    margin-top: 110px;}

  /* profile */
  .inner-wrp {
    height: 100%;
    padding-left: 88px;
    padding-right: 37px;
    background:#fff;;
    font-family: 'Montserrat', sans-serif;
  
}
.user-profile-photo{width: 32px; height: 32px;}
.user-profile-photo a, img{ width: 100%;}
.inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;}
.inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000;  font-family: 'Montserrat', sans-serif;}
.tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;}
.user-profile{    display: block;
  float: left;
  margin-left:30px;
  position: relative;
  width: 760px;}
.user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;}
.talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;}
.talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;}
.talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;}
.talk-to-me ul li{ display: block; float: left;margin-right:3px;}
.talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;}
.joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; }
.joined-info li a{ color:#000; opacity: 0.5;}
.joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;}
.joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;}
.joined-info li{ float: left;}

/* list style */
.list-style-group{ width: 100%; display: block; float: left;}
.list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;  font-size: 14px; text-transform: uppercase;  font-weight: 600;}
.list-style{list-style-type: none; margin:0px; padding: 0px;}
.list-style li{ float: left;}
.list-style li a{ display: block; float: left;}
.list-style li a img{ width: 48px; display: block; float: left; }
.list-spc-top{ margin-top:15px ;}

/* social connects */
.social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;}
.social-connects li{ float: left; margin-right:0px ;}
.social-connects li a{ display: block; float: left; padding: 11px;}
.social-connects li a img.twitter{ margin-top:3px;}
.social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;}
.social-connects li a img{ width: 19px; display: block; float: left;}
.social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0;
  float: left;}
.connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} 

  /* profile tab */
  .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;}
  .top-brd{border-top: 1px solid #DFE7EF;}
.profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;}
.profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;}
.profile-tab li.active{ border-bottom: 4px solid #ef484f;}
.profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; }

/* profile data wrp */
.profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;}
.data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom: 88px; padding-top: 88px;}
.card-warpper{ width: 283px; background: #fff; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;}
.company-detail{    width: 100%;
  display: block;
  float: left;
  position: relative;
  margin-top: -63px;
  margin-bottom: 21px;}
.company-detail .c-logo{ width: 82px; display: block; float: left;}
.company-detail .c-logo img{ width: 100%;}
.company-detail .c-tag img{ width: 100%;}
.company-detail .c-tag { width: 89px; display: block; float: right;}
.card-warpper h1{width: 198px;    padding-bottom: 7px; border-bottom:1px solid #a5a5a5; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;}
.card-warpper .u-detail{    padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;}
.card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;}
.card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;}
.card-warpper p{  float: left;  padding: 12px 0 12px 0; width: 198px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; }
.card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;}
.card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;}
.card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;}
/* colors */
.cape-honey{ background: #fde2a3;}
.rose-bud{ background: #fba29a;}
.pattens-blue{ background: #ceeced;}

/* add new card */
.add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px;     height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;}
.add-card-warpper a{ display: block;
  width: 86px;
  margin: 0 auto;
  margin-top: 92px;}

  /* New Profile Buttons */
  .profile-buttons{ width: 261px; display: block; margin:0 auto;}
  /* button sm */
  .profile-sm-bt{    width: 180px;
    height: 54px;
    border-radius: 5px;
    border: 1px solid #514DA7;
    color: #514DA7;
    font-size: 16px;
    font-weight: 500;
    display: block;
    line-height: 55px;
    text-align: center;}
    .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
    /* button md */
    .profile-md-bt{    width:233px;
      height: 54px;
      border-radius: 5px;
      border: 1px solid #514DA7;
      color: #514DA7;
      font-size: 16px;
      font-weight: 500;
      display: block;
      line-height: 55px;
      text-align: center;}
      .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
          /* button lg */
    .profile-lg-bt{    width:261px;
      height: 54px;
      border-radius: 5px;
      border: 1px solid #514DA7;
      color: #514DA7;
      font-size: 16px;
      font-weight: 500;
      display: block;
      line-height: 55px;
      text-align: center;}
      .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
      .center-and-spc{ margin:0 auto; margin-bottom:15px;}
      .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;}
/* Replies */
.replies{ width: 100%; display: block; float: left;}