video::-webkit-media-controls { /* Works only on Chrome-based browsers */
    display: none;
}

.maincitywindow {position: absolute; background-color: #ffffff; left: 200px; top: 30px; padding: 30px; min-width: 300px; z-index: 201; overflow: hidden; transition: 0.1s; box-shadow: 0 0 20px rgba(0,0,0,0.5); color: black; text-align: center; border-radius: 10px; line-height: 1.5;  font-size: 20px; font-family: MontserratAlternates; }

.maincitywindow div {display: block; position: relative; margin-top: 10px; }
.maincitywindow a.button { width: 40px; display: inline-block; text-transform: none; margin-right: 20px; }

.smallmodalwindow {position: absolute; background-color: #ffffff; left: 50%; top: 50%; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); z-index: 201; overflow-y: auto; transform: translate(-50%, -50%); transition: 0.1s; border: 4px solid #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.5); box-sizing: border-box; color: black; text-align: center; border-radius: 10px; line-height: 1.5; padding: 20px; }

.smallmodalwindow a {

  color: #ef7f1a;
  font-weight: bold;
  text-decoration: none;
  line-height: 1;
  margin: 5px 0px;
  display: block;

}

.modalwindow {position: fixed; left: 50%; top: 50%; width: calc(100vw - 40px); max-width: 1600px; max-height: calc(100vh - 150px); transform: translate(-50%, -50%); z-index: 201; transition: 0.1s; box-shadow: 0 0 20px rgba(0,0,0,0.5); box-sizing: border-box; color: black; text-align: center; border-radius: 10px; line-height: 1.5;  background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(30px); -webkit-backdrop-filter:  blur(30px); }

.scrolled { overflow-y: auto; }

.modalwindow h2 {color: black; font-size: 22px; text-shadow: none; margin: 10px 0px 15px 0px; }
.modalwindow a.city {color: black; text-shadow: none; font-size: 20px; text-decoration: none; border-bottom: 1px dotted black; }
.modalwindow a.city:hover {border-bottom: none; }

#textdiv {background-color: #ab1414; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75;  position:absolute; bottom:-30px; width: 100%; padding: 5px; text-align: center; color: #ffffff; font-size: 18px; transition: 0.5s; }

#basketimage {margin: 0; }

a.close {position: absolute; display: block; width: 30px; height: 30px; top: -35px; right: 0px; z-index: 102; font-family: FontAwesome; font-size: 30px; color: #ef7f1a; text-decoration: none; background-color: white; border-radius: 15px; text-align: center; padding: 0; box-shadow: none; overflow: hidden; line-height: 30px; }

a.fullclose { position: relative; display: block; width: 100%; height: 100%; }


#next {position: absolute; width: 60px; height: 60px; top: 60px; right: -60px; z-index: 102; transition: 0.5s; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;}
#prev {position: absolute; width: 60px; height: 60px; top: 60px; left: -60px; z-index: 102; transition: 0.5s; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;}

.modalwindow:hover #next {position: absolute; width: 60px; height: 200px; top: 60px; right: 0px; z-index: 102; transition: 0.5s; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}
.modalwindow:hover #prev {position: absolute; width: 60px; height: 200px; top: 60px; left: 0px; z-index: 102; transition: 0.5s; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;}

.modalwindow a.small {COLOR: #ff0000; font-weight: normal; font-size: 13px; text-decoration: none; border-bottom: 1px dotted #ff0000; text-shadow: none;}
.modalwindow a.small:hover { border-bottom: 0px none #ff0000; }

.modalwindow img {max-width: 100%;}

#bigimage {position: relative; text-align: center; display: block; height: 100%; }

.modalwindowdialog {position: absolute; background-color: #ffffff; left: 50%; top: 50%; transform: translateX(-50%)  translateY(-50%);  width: 90%; max-width: 800px; z-index: 201; overflow-x: hidden; overflow-y: auto; border: 4px solid #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.5); box-sizing: border-box; color: black; font-size: 14px; text-align: center; border-radius: 10px; line-height: 1.5; padding: 10px; max-height: calc(100% - 40px); }

.modalwindowdialog h3 { color: #ef7f1a; font-size: 16px; font-weight: bold; text-align: center; margin: 0px 0px 10px 0px; }

.toast {position: fixed; background-color: #ffffff; left: 20px; bottom: -50px; max-width: 90%; z-index: 201; overflow: hidden; border: 4px solid #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.5); box-sizing: border-box; color: black; font-size: 14px; text-align: center; border-radius: 10px; line-height: 1.5; padding: 10px; animation-duration: 1s;
  animation-name: toast; animation-iteration-count: 2; animation-direction: alternate; opacity: 0;  }

@keyframes toast {
  from {
    bottom: -50px;
    opacity: 0;
  }

  to {
    bottom: 20px;
    opacity: 1;
  }
}

.toast h3 { color: #ef7f1a; font-size: 30px; font-weight: bold; text-align: center; margin: 0px; }

.modalwindowdialog a { color: white; background: #ef7f1a; display: inline-block; font-weight: bold; font-size: 12px; text-align: center; margin: 5px; padding: 6px 10px 5px 10px; border-radius: 11px; text-decoration: none; text-transform: uppercase; }

.modalwindowdialog img { width: 100%; }

#modalbuttons {position: relative; display: block; text-align: center; margin: 10px 0px 0px 0px; white-space: nowrap; }


.cookiewindowdialog {position: fixed; background-color: #ffffff; left: 20px; bottom: 20px;  max-width: 90%; z-index: 201; overflow: hidden; border: 4px solid #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.5); box-sizing: border-box; color: black; font-size: 14px; text-align: center; border-radius: 10px; line-height: 1.5; padding: 10px;  }


.cookiewindowdialog a { color: white; background: #ef7f1a; display: inline-block; font-weight: bold; font-size: 12px; text-align: center; margin: 5px; padding: 6px 10px 5px 10px; border-radius: 11px; text-decoration: none; text-transform: uppercase; }


div.listbannermain {overflow: hidden; position: relative;  width: 100%; padding-top: 25%; box-sizing: border-box; background-color: #ffffff; margin: 0px; border-radius: 10px; }

div.linkbanner { overflow: hidden; position: absolute;  width: 100%; height: 100%; top: 0px; left: 0px; z-index: 3; }

div.linkbanner img {width: 100%; height: 100%;}

div.listbanner {overflow: hidden; position: absolute;  width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0;  transition: 1s;  }

div.listbanner video { width: 100%; height: auto; position: absolute; z-index: 0; }

div.listbanner img.banner { width: 100%; }

div.listbanner div.loading { width: 100%; padding-top: 25%; position: absolute; top: 0; left: 0; z-index: 1; background-position: 50% 50%; background-image: url(/images/ajax_loader.svg); background-size: contain; background-repeat: no-repeat; }

div.arrow {width: 70px; height: 100px; position: absolute; z-index: 3; top: 50%; margin-top: -50px; z-index: 5; }




div.listbannerpagecontainer {overflow: hidden; position: relative;  width: 100%; padding-top: 50%; background-position: 0% 0%;  background-repeat: no-repeat;}
div.linkbannerpage {overflow: hidden; position: absolute;  width: 100%; height: 100%; top: 0px; left: 0px; text-align: center;  }
div.listbannerpage {overflow: hidden; position: absolute;  width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0;  transition: 0.5s; text-align: center; }
div.listbannerpagea {overflow: hidden; position: absolute;  width: 100%; height: 100%; top: 0px; left: 0px; opacity: 1;  transition: 0.5s; text-align: center; }

div.listbannerpage img, div.listbannerpagea img {max-width: 100%; max-height: 100%; }

div.listbannerpagecontainer div.arrow {width: 60px; height: 60px; top: -60px; position: absolute; z-index: 3; opacity: 1; transition: 0.5s;}
div.listbannerpagecontainer:hover div.arrow { top: 60px; }

div.listbannerpagecontainer div.marks { position: absolute;  width: 100%; bottom: -40px; text-align: center; transition: 0.5s; }

div.listbannerpagecontainer:hover div.marks { bottom: 10px; }


a.mark { display: inline-block; margin: 5px; width: 25px; height: 25px; box-sizing: border-box; background-color: #ef7f1a; border: 5px solid white; border-radius: 13px; }

a.marka { display: inline-block; margin: 5px; width: 25px; height: 25px; box-sizing: border-box; background-color: white; border: 5px solid #ef7f1a; border-radius: 13px; }



.gray50 {position: absolute; top: 0px; width: 100%; height: 100%; z-index: 200;}
body>.gray50 {position: fixed; background: rgba(255,255,255,0.5);  }

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

  .modalwindow { max-height: calc(100vh - 70px); font-size: 14px; }

  div.listbannerpagecontainer div.arrow { top: 60px; }

  div.listbannerpagecontainer div.marks { bottom: 10px; }

  a.mark {  margin: 3px; width: 15px; height: 15px; border: 3px solid white; border-radius: 8px; }

  a.marka { margin: 3px; width: 15px; height: 15px;  border: 3px solid #ef7f1a; border-radius: 8px; }


}


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

  .modalwindow {
    top: 0%;
    width: 100vw;
    max-height: 100vh;
    transform: translate(-50%, 0);
  }

  a.close {top: 5px; right: 5px; }


}