@media screen and (max-width: 1050px) {
  .banner div:not(#officalPages) {
    left:350px !important;
  }
  .menu a img {
    width:2em !important;
  }
  .menu a span {
    font-size:0.8em;
    margin-bottom:1.5rem !important;
  }
  .banner .mainTitle {
    left:380px !important;
  }
}

@media screen and (max-width: 920px) {
  .nav div {
    display:none;
  }
  .menuslider {
    display:block !important;
  }
  .banner .mainTitle {
    left:300px !important;
    top:40px !important;
  }
}


@media screen and (max-width: 850px) {
  .banner div:not(#officalPages) {
    font-size:1.5rem !important;
    left:300px !important;
  }
  .banner .mainTitle {
    left:280px !important;
  }
}

@media screen and (max-width: 750px) {
  .banner div:not(#officalPages) {
    left:250px !important;
    top:180px !important;
  }
  .banner .mainTitle {
    left:220px !important;
    font-size:1.8rem !important;
  }
}

@media screen and (max-width: 650px) {
  .banner .mainTitle {
    left:150px !important;
  }
}

@media screen and (max-width: 600px) {
  .banner div:not(#officalPages) {
    left:180px !important;
    top:150px !important;
  }
  .newsimg {
    right:70px !important;
  }
  .banner .mainTitle {
    left:150px !important;
    top:20px !important;
    font-size:1.5rem !important;
  }
}

@media screen and (max-width: 520px) {
  .banner .mainTitle {
    left:100px !important;
  }
}

@media screen and (max-width: 460px) {
  .banner .mainTitle {
    top:8px !important;
    left:80px !important;
  }
}

@media screen and (max-width: 420px) {
  .banner div:not(#officalPages) {
    left:50px !important;
    top:140px !important;
  }
  .picpaw, .piccan {
    display:none;
  }
  .story {
    width:90% !important;
    margin-top:1rem !important;
  }
  .story iframe {
    height:100% !important;
  }
  .story h3, .pichome1, .pichome2, .pichome3 {
    margin-top:3rem !important;
  }
  .newsBlock {
    padding:2rem !important;
  }
  .newsBlock div {
    width:80% !important;
  }
  .newsBlock ul {
    line-height:2rem !important;
  }
  .newsimg {
    right:5px !important;
    top:420px !important;
  }
  footer div a i {
    margin-top:0 !important;
  }
  footer {
    justify-content: flex-start !important;
  }
  .jconfirm-title-c, .jconfirm-content {
    width:100% !important;
    font-size:1rem !important;
  }
  .fa-angle-right, .fa-angle-left {
    font-size:2rem !important;
  }
  .store h3 {
    margin-bottom:2rem !important;
  }
  .flex-center {
    width:80% !important;
  }
  .service {
    width:100% !important;
    margin-left: 0;
    margin-right: 0;
  }
  .service div {
    width:100% !important;
  }
  .mask-wrapper {
    position: relative;
  }
  .card{
    position: relative;
  }
  .mask-inner {
    min-height: 350px !important;
    height: auto !important;
    left:0 !important;
    top:0 !important;
    z-index: 9;
  }
 
  .serviceConsumes{
    position: absolute;
    top: 0;
    left: 0;
  }
  .mask-inner span p {
    width:300px !important;
  }
  .mask-inner span {
    margin-left:0 !important;
  }
  .adoptionbtn, .picturebtn {
    margin-top:1rem;
  }
  .adoptiondiv, .shareDiv {
    margin:0 auto !important;
    margin-bottom:2rem !important;
  }
  #picureForm {
    width:80% !important;
  }
  .pictureInfo {
    width:100% !important;
    margin-top:2rem !important; 
  }
  .adoptionInfo {
    max-height:none !important;
  }
  .accountblock {
    width:350px !important;
    margin:0 auto !important;
  }
  #loginForm {
    margin-right:1.5em !important;
  }
  .registerradio {
    margin-right:.5rem !important;
  }
  .isadoption {
    margin-right:0 !important;
  }
  .bonusrwd {
    line-height:4rem;
  }
  .banner .mainTitle {
    top:3px !important;
    left:50px !important;
  }
}

@media screen and (max-width: 387px) {
  .banner .mainTitle {
    left:50px !important;
    font-size:1.3em !important;
  }
}

@media screen and (max-width: 375px) {
  .banner div:not(#officalPages) {
    left:20px !important;
    top:140px !important;
  }
}