.-fx-image-gal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 85%; /* arbitrary valye */
  margin: 0px auto;
}
.-fx-gal-item {
  width: 45px;
  margin: 5px;
  border: 4px solid #FFF;
  overflow: hidden;
  border-radius: 15px;
}

.-fx-gal-image-thumb img {
  width: 100%;
  border-radius: 15px;
  cursor: pointer;
  /*-webkit-filter: grayscale(80%);*/
  /*-moz-filter: grayscale(80%);*/
  /*filter: grayscale(80%);*/
  transform: scale(1.2);
  transition: all 0.3s ease;
}

.-fx-gal-image-thumb:hover img {
  width: 100%;
  cursor: pointer;
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  filter: grayscale(0%);

  transform: scale(1.4);
  transition: all 0.5s ease;
}

.-fx-gal-image-thumb:focus + .-fx-gal-image-big {
  display: block;
}

.-fx-gal-image-big {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(5, 10, 15, 0.8);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  z-index: 999;
  transition: all 0.3s ease;
}

.-fx-gal-image-big img {
  max-width: 90vw;
  position: absolute;
  box-shadow: 0px 0px 800px 40px rgba(0, 0, 0, 0.9);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ol-control{
	display:none;
}

.ol-map-grad{
  color: white;
  position: relative; 
}
.ol-map-grad:before {
  z-index: 1;
  content: "";
  background: linear-gradient(0deg,#e9514b, #e9514b 85%);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  scroll-behavior: unset;
}
.mapOverlay {
  position: relative;
  z-index: 3;
  pointer-events: none;   
}
.mapOverlay:before {
  z-index: 1;
  content: "";
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: difference;
  pointer-events: none;
  scroll-behavior: unset;
}
.mapOverlay:after {
  z-index: 1;
  content: "";
  background: linear-gradient(0deg,#e9514b, #e9514b00 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  scroll-behavior: unset;
  mix-blend-mode: screen;
}

.cityHero.pickCityUI {
  height: 50vh;
}

.pickCityUI .cityP{
  text-align: right;
}

.pickCityUI .autoHeight {
  padding-bottom: 0px!important;
}
.pickCity__sidebarFilter {
  flex-basis: 250px;
}
.pickCity__universityList .universityTable {
  flex-basis: calc(100% - 340px);
  padding: 20px;
}
.pickCity__sidebarFilter {
  padding: 20px;
}
.pickCity__universityList {
  margin-left: 150px;
}
.pickCityUI {
  font-family: 'Maven Pro';
}
.lang {
  padding-right: 10px;
}

@media screen and (max-width: 1024px) {
  .universityTable {
      flex-direction: unset;
      width: 100%;
      padding: 0 20px;
  }
  label.whereLabel {
    display: revert;
  }  
}


@media screen and (max-width: 960px) {
  .ml-auto {
    margin-left: auto;
    right: 20px;
    position: relative;
  }
  .titleWrapper, .sidebarFilter {
    padding-left: 20px;
  }  
  .wrapperContent {
    padding: 0px 20px;
  }
  .pickCity__universityList {
    margin-left: 50px;
  }  
}
@media screen and (max-width: 768px) {
  .lang {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 650px) {
  .pickcity__Content {
    flex-basis: 100%!important;
  }
  .PickCityUI .citysidebar {
    flex-basis: 100%!important;
    margin-top: 40px;
  }
  .PickCityUI .section {
    height: auto;
    max-height: initial;
  }
  .PickCityUI .wrapperContent {
    margin-bottom: 40px;
  }  
  .titleWrapper, .sidebarFilter {
    padding-left: 20px;
  }    
  .pickCity__universityList {
    margin-left: 0px;
  }  
  .pickCity__universityList .universityTable {
    width: 100%;
    flex-basis: 100%;
  }
  .pickCity__sidebarFilter {
    padding: 20px;
    width: 100%;
    flex-basis: 100%;
  }
  .pickCity__sidebarFilter .cityselect {
    width: 85vw;
  }
  .pickCity__sidebarFilter label.arrow.whereLabel {
    max-width: 100%;
  }
}


@media screen and (max-width: 560px) {
  .ml-auto {
    margin-left: 20px;
    right: 0px;
    position: relative;
    flex-basis: 100%;
  }
}