#modal{
}
.modal-shown {
  display: block;
}
.modal-hidden {
  display: none;
}
.modal {
    position: sticky; 
    z-index: 10000; 
    padding-top: 0;
    left: 0;
    top: 67px;
    width: 100%; 
    height: calc(100vh - 67px);
    overflow: auto; 
    2background-color: rgba(2,0,0,0.3); 
}
.modal.twothirdsbottom {
  top: -1px;
  padding-top: 160px;
}

.modal.mediaplayer, .modal.videoplayer {
    position: fixed;
    left: 2vw;
    right: auto;
    width: 96vw;
    height: 67vh;
    top: 20vh;
}
.modal.prodpreview {
  position: fixed;
  left: 5vw;
  right: auto;
  width: 91vw;
  height: 80vh;
  top: 10vh;
}
.modal.videoplayer {
  left: calc( (100vw - 104vw) / 2);
  width: 104vw;
  background-color: transparent;
}
.modalfog {
  width: 100%;
  height: 100%;
  background: #c7c7c769;
  position: fixed;
  z-index: 9999;
}
.modalon {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
  opacity: .7;
}
  /* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px 20px;
    width: 100%;
    2height: 100%;
    max-width: 960px;
    position:relative;
    overflow: hidden;
    overflow-y:auto;
    animation:animebottom 0.4s
}
.modal.bottom .modal-content {
  height: 100%;
}
.modal.videoplayer .modal-content {
  padding: 24px;
  background: transparent;
}

.modal-content.dismiss,
.modal.dismiss
{
  animation: dismiss 0.4s;
}
@keyframes animetop{
  from{top:70px;opacity:0} 
  to{top:0;opacity:1
  }
}

@keyframes animebottom {
  from{bottom:-300px;opacity:0} 
  to{bottom:0;opacity:1
  }
}
@keyframes animeright{
  from{right:-700px;opacity:0} 
  to{right:0;opacity:1
  }
}
@keyframes dismiss {
  from{bottom:0;opacity:1}
  to{bottom:-300px;opacity:0
  }

}

.modal-closew {
  height: 30px;
  width: 40px;
  border: 0;
  background: no-repeat;
  top: 7px;
  right: 0;
  display: block;
  left: auto;
  position: absolute;
}
.modal.videoplayer .modal-closew {
  height: 48px;
  z-index: 999;
  right: 17px;
  top: 15px;
}
.modal-close { 
  cursor: pointer;
  right: 12px;
  top: 12px;
  position: absolute;
  background: transparent;

}
.modal-close:hover {
}
.modal-close::before {
  content:"\00D7";
  font-size:350%;
  line-height: 32px;
  color: var(--txtgrey1);
}
.modal-close.small1::before {
  font-size:250%;
}
.modal-hdr.sticky {
  position: sticky;
  position: -webkit-sticky; 
  z-index: 11111;
  width: 100%;
  background: #fff;
  top: 0;
  border-bottom: 1px solid #ddd;
  height: 67px;
  animation:animetop 0.3s
}

.modalhdr-center {
  text-align: center;
  position: absolute;
  width: 100%;
  margin-top: 14px;
  font: normal normal 26px/40px kmf1,arial,sans-serif;
  color: var(--txtgreen1);
}
.modal-hdr.sticky div.modal-closew {
  height: 30px;
  width: 50px;
  position: absolute;
  right: 0;
  top: 6px;
}
.modal-footer.sticky {
  height: 120px;
  width: 100%;
  background: #fff;
  z-index: 11111;
  top: calc(100% - 119px);
  position: sticky;
  bottom: 0;
  border: 0;
  border-top: 1px solid #c4c4c4;
  box-shadow: 0 0 29px rgb(0 0 0 / 14%);

}

@media screen and (min-width:550px){

}
@media screen and (min-width:840px){

  .modal-hdr.sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 500px;
    animation:animeright .1s
  }
  .modalhdr-center {
     width: 500px;
  }
  .modal {
    position: fixed;
    left: auto;
    right: 0;
    width: 500px;
  }
  .modal-content { 
    animation:animeright 0.2s;
  }

  .modal.kassa {
    position: fixed;
    left: calc(100% - (100% / 2 + 350px));
    right: auto;
    width: 700px;
    height: 80vh;
    top: 80px;
    background: #fff;
  }

  .modal.mediaplayer {
    position: fixed;
    left: calc(100% - (100% / 2 + 350px));
    right: auto;
    width: 700px;
    height: 80vh;
    max-height: 700px;
    top: 80px;
  }
  .modal.videoplayer {
    position: fixed;
    left: calc( (100vw - 70vw) / 2);
    right: auto;
    width: 70vw;
    height: auto;
    max-height: 700px;
    top: auto;
  }
  .modal.prodpreview {
    position: fixed;
    left: calc(100% - (100% / 2 + 350px));
    right: auto;
    width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    top: 80px;
  }
}