.vmodal{}

.vmodal.open .modal-overlay,
.vmodal.open .modal-window{
    opacity: 1;
    z-index: 1000;
}

.modal-window, .modal-overlay{
opacity: 0;
z-index: -1;

}

#yandex_rtb_R-A-741777-2
{

  position: fixed;  
  bottom: 0px; 
  width: 100%; 
  left: 50%; 
  margin-left: -50%;


}






.modal-overlay{

position: fixed;
top:0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.75);
}


.modal-window{
width: 500px;
height: 300px;
border-radius: 5px;
background:rgb(58, 100, 190);

min-height: 50px;
text-align: center;
word-wrap: break-word;
display: block;

position:relative;
top:50%;
left:50%;
margin:-150px 0 0 -250px;

overflow: auto;

/*margin: 300px auto;

absolute
*/  
  

 
}




.modal-header{
padding: 5px 10px;
display: flex;
justify-content: space-between;
border-bottom: 3px solid #ad9b9b;
}

.modal-title{
    font-size: 1.5rem;
}

.modal-close{
cursor: pointer;

}

.modal-body{
    padding: 0px;
    margin: auto;
    position: relative;
}
.modal-footer{
  background: rgba(168, 63, 63, 0);
  background-color: rgba(187, 100, 100, 0);
  border-top: rgba(187, 100, 100, 0);
  position: fixed;
  top: 50%;
  left: 50%;
  margin:135px 0 0 -260px;  
}


.modal-footermob{
  background: rgba(168, 63, 63, 0);
  background-color: rgba(187, 100, 100, 0);
  border-top: rgba(187, 100, 100, 0);
  position: fixed;
  top: 50%;
  left: 50%;
  margin:-154px 0 0 180px;  
}


button {
  background-color: rgba(109, 89, 93, 0);
  border-color: rgba(109, 89, 93, 0);
  border-bottom-color: rgba(109, 89, 93, 0);
  border-left-color: rgba(109, 89, 93, 0);
  border-right-color:rgba(109, 89, 93, 0);
  border-top-color: rgba(109, 89, 93, 0);

}



body {
    font-family: sans-serif;
    background-color: #dedede00;
    color: #333;
    padding: 20px 0 28px 0;
    margin: 0;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  .app-title {
    text-align: center;
    font-weight: normal;
    font-size: 2.6rem;
  }
  
  .animal {
    max-width: 650px;
    padding: 20px;
    margin: 30px auto;
    background-color:  rgb(114, 187, 236) ;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .animal h4 {
    margin: 0 0 6px 0;
  }
  
  .pet-photo {
    display: block;
    margin: 0 auto;
    width: 80%;
    
  }
  
  .pet-name {
    font-size: 2rem;
    font-weight: normal;
    margin: 0 auto;
  }
  
  .species {
    font-size: 0.9rem;
    color: rgba(136, 136, 136, 0);
    vertical-align: middle;
  }
  
  .foods-list {
    margin: 0;
    padding: 0;
    position: relative;
    left: 17px;
    font-size: 0.85rem;
    line-height: 1.5;
  }
  
  .footer {
    font-size: 0.7rem;
    color: rgba(136, 136, 136, 0);
    text-align: center;
    margin: 0;
  }


  .navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    visibility: visible;
  
  }


  @media (max-width: 500px){

    .modal-window{
      width: 300px;
      height: 300px;

      border-radius: 5px;
      background:rgb(58, 100, 190);

      min-height: 50px;
      text-align: center;
      word-wrap: break-word;
      display: block;

      position:absolute;
      top:50%;
      left:50%;
      margin:-150px 0 0 -150px;

      overflow: auto;

/*margin: 300px auto;*/       
        
        
    }


    .modal-footermob{
      background: rgba(168, 63, 63, 0);
      background-color: rgba(187, 100, 100, 0);
      border-top: rgba(187, 100, 100, 0);
      position: fixed;
      top: 50%;
      left: 50%;
      margin:-154px 0 0 80px;  
    }


  }