.zoom img{
      /*width: 200px;*/
    height: auto;
  }
  .zoom {
    /*padding: 50px;*/
    /*background-color: green;*/
    transition: transform 1s;
    width: 200px;
    /*height: 200px;*/
    box-sizing: border-box;
    margin: 0 auto;
    /*margin-top: 50px;*/
  }

  .zoom:hover {
    -ms-transform: scale(2.5); 
    -webkit-transform: scale(2.5);  
    transform: scale(2.5); 
  }

 .bt-xs{
   border-radius: 4px;
  border:1px solid #ccc;
 }

 button{
  border-radius: 4px;
  border:1px solid #ccc;
 }
 @media screen  and (max-width:768px){
  .mytoast, .mytoast2{       
    min-width: 290px; 
    margin-left: -145px;
      /*top: 100px;   */
  }
  .mycomt{
    min-width: 290px; 
    margin-left: -145px;
    top: 150px; 
  }
  
}

.alert-toast{
  position: fixed;
  z-index:999999;
  top:75px;
  
}
.special-toast{
   display: block;
   min-width:auto; 
   position:fixed;
   z-index:2;
   top:200px;
   left:50%;
}
.toast-body{
  padding: 20px 20px;
  border:5px solid black;
  border-radius: 10px;
  background: #F5F5F5;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1)!important;
}
.mytoast{       
    min-width: 400px; 
    margin-left: -200px; 
    text-align: center;
     /*padding:50px;*/
    position: fixed;
    z-index: 2;
    left: 50%;
    top: 80px; 
}
.toast{
   /*width:70%;*/
   display: block;
   min-width:auto; 
   position:fixed;
   z-index:2;
   top:150px;
   left:50%;
  
  
   /*left:50px;*/
}
.index{
  z-index: 999999999999px;
}
.shadow{
   box-shadow: 1px 1px 4px  rgba(0, 0, 0, 0.7)!important;
   
}
.getmsgBox{
   animation-duration:  .3s;
   animation-name: VanillaToasts;
   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   pointer-events: all;
  
}
.hidemsgBox{
  animation-name: VanillaToastsFadeOut;
  animation-duration:.3s;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-fill-mode: forwards;

}

/*responsive start*/

@media screen  and (max-width:768px){

  .special-toast{
    width: auto;
    left: auto;
    top:250px!important; 
    font-size: 18px;
  }
  .toast{
    width: auto;
    left: auto;
    top:50px!important;

  }
  .position-xs-sm{
    /*position: relative!important;*/
  }
}
@media screen and (max-width:1024px){

  .special-toast{
    width: auto;
    left:auto;
    top:250px!important;
    font-size:30px; 
  }
    .toast{
    width: auto;
    left: auto;
    top:68px!important;
  }
  .position-xs-sm{
    position: relative!important;
  }
  
}

}
@media screen and (max-width:991px){}

/*ends*/

.simpletoast{
  position: fixed;
  z-index: 45;
}





.mytoast2{       
    min-width: 400px; 
    margin-left: -200px; 
    text-align: center;
     /*padding:50px;*/
    position: fixed;
    z-index: 2;
    left: 50%;
    /*top: 80px; */
    top: 150px; /*edited */
}

.vanillatoasts-toast {
  position: relative;
  padding: 20px 17px;
  margin: 20px;
  border-radius: 10px;
  background: #F5F5F5;
  cursor: pointer;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  animation-duration:  .3s;
  animation-name: VanillaToasts;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  pointer-events: all;
}
@keyframes VanillaToasts {
  from {
    transform: translate3d(400px, 0, 0);;
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.vanillatoasts-fadeOut {
  animation-name: VanillaToastsFadeOut;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-fill-mode: forwards;
}
@keyframes VanillaToastsFadeOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
}