/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1400px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    .wc-spc-lf-tp{ padding-top: 88px; padding-left: 0px; }
    .user-profile{padding-right: 90px; width: 675px;}

 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 900px) 
  and (max-device-width: 1440px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; }
    .form-layout.signup-frm-spc { margin-top: 114px; float:right;}
    .user-profile{padding-right: 90px; width: 675px;}
 
}

@media screen 
  and (min-device-width: 1050px) 
  and (max-device-width: 1440px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; }
    .form-layout.signup-frm-spc { margin-top: 114px;}
    .user-profile{padding-right: 90px; width: 675px;}
  
}
@media screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; }
    .form-layout.signup-frm-spc { margin-top: 41px;}
    .user-profile{padding-right: 90px;width: 570px;}
   
  
}

/* mobile */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 960px)
  and (-webkit-min-device-pixel-ratio: 2) {
   

    .main-wrp{ padding-left: 15px; padding-right: 15px;}
    .wc-spc-lf-tp {
      padding-top: 52px;
      padding-left: 28px;
      padding-bottom:50px;
  }
  .form-layout.signup-frm-spc{margin-top: 50px; float:unset; margin: 50px auto;}

.navbar-toggler{    padding: 0px; margin-top: -10px;
  width: 40px;
  height: 40px;
  float: right; box-shadow: 0px; outline: 0px;}
.navbar-toggler span{ width: 100%; display: block; height: 3px; background:#000; margin:7px 0;}

  .col-reverse{display: flex;
    flex-direction: column-reverse;}
    .reset-pass-spc {
      margin-top: 20px;
  }
/* profile */
.inner-wrp{ padding-left: 15px; padding-right: 15px; height: 100%; overflow: auto;}
.user-profile{ padding-right: 0px; margin-left: 0px;position: unset; margin-top:20px ; width: 100%;}
.data-wrp {padding-left: 15px;padding-right: 15px;padding-bottom: 50px; padding-top: 0px;}
.card-warpper{ margin-left: 15px; margin-right: 0px; float: unset;margin-left:15px; margin-top: 90px;}
.add-card-warpper{margin-left: 15px; margin-right: 0px; float: unset; margin-left:15px; margin-top: 50px;}
  .talk-to-me{ margin-bottom: 30px;}
  .profile-data-wrp{ position: relative;}
  .user-profile-photo {
    position: absolute;
    right: 82px;
    top: 16px;
}
}

/* tab */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .main-wrp{background-position: bottom 100px left -100px;}
   
   

}
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}
/* /

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .col-reverse{
      flex-direction:unset;}
      .main-wrp{background-size: 100%;    background-position: bottom -10px left -130px;}
      .card-warpper{ float: left;}
      .add-card-warpper{ float: left; margin-top: 0px;}
      .user-profile{    width: 540px;
        margin-left: 30px; margin-top: 0px;} 

}
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .main-wrp{background-position: bottom -10px left -130px !important;}
    .wc-spc-lf-tp{ padding-left: 0px;     padding-top: 100px;}
    .user-profile{padding-right: 0px; width: 380px;}
    .card-warpper{margin-bottom: 40px; margin-right: 25px;}

}