#bikini {
  font-family: Head;
  margin-top: 10px;
  /* background-color:rgba(23, 0, 31, 0.5); */
  width: 100%;
  /* height:450px; */
  color: #333;
  text-align: center;
  vertical-align: center;
  font-weight: 300;
  cursor: pointer;
  height: 100%;
  /* background: #f0f8ff70; */
}

#left .weather-left-info {
  width: 100%;
}

.head-graph__footer.active-border img {
  width: 35px;
  filter: brightness(0) invert(1);
}
.head-graph__footer.active-border div {
  width: 33.3333333333%;
  font-size: 0.9em !important;
  text-align: center;
}

#bikini .portal {
  opacity: 0;
  cursor: pointer;
  margin-top: -35%;
  font-size: 4vw;
}

#bikini:hover {
  background: #2e2d55;
  color: white;
}

#bikini:hover h5 {
  opacity: 0;
}

#bikini:hover .portal {
  opacity: 1;
  margin-top: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 40%;
}

#bikini:hover h4 {
  opacity: 0;
}

#bikini:hover img {
  opacity: 0;
}

body {
  min-height: 100%;
  width: 100%;
  padding: 0 !important;
  position: relative;
  overflow-x: hidden;
}

html {
  width: 100%;
  overflow-x: hidden;
}

@font-face {
  font-family: Head;
  src: url(../../../fonts/Cormorantgaramond.ttf);
}
@font-face {
  font-family: aleo;
  src: url(../../../fonts/gregor.ttf);
}
.navbar-form {
  padding-bottom: 5px;
  padding-right: 2%;
}

.navbar-toggle {
  padding: 18px 15px;
}

#bikini img {
  margin-top: 10px;
}

#bikini h4 {
  margin-top: -10px;
}

h4 {
  margin-top: 0;
  font-size: 60px;
  font-family: aleo;
  margin-bottom: 0;
}

h5 {
  margin: 0;
  font-size: 24px;
  font-family: aleo;
}

.weather-left-info {
  width: 100%;
  max-height: 333px;
}

#loading:has(.loaderWidget) {
  min-height: 300px;
}

.col-1-2 {
  width: 39%;
}

.col-1-4 {
  width: 30%;
}

#newscont {
  position: relative;
  top: 10px;
  padding: 20px;
  font-family: aleo;
}

#news1 {
  margin-top: 20px;
}

#p1 {
  height: 100% !important;
}

#newscont .btn-lg, .btn-group-lg > .btn {
  font-size: 22px;
  height: 46px;
  background-color: rgba(137, 228, 255, 0.17);
  color: #717171;
}

.thumbnail {
  padding: 0;
}

.newsname {
  font-size: 2.7rem;
  text-align: center;
  line-height: 0.9em;
  border-bottom: 1px solid #C7C7C7;
  min-height: 65px;
  padding-top: 15px;
  color: #808080;
}

#navigation {
  width: 100%;
  font-size: 20px;
  text-align: center;
  padding-bottom: 20px;
  color: #808080;
}

#navigation a {
  font-size: 22px;
  color: black;
}

#navigation a:checked {
  color: deepskyblue;
}

#newscont p {
  text-align: justify;
  padding-top: 20px;
  font-size: 18px;
  overflow: hidden;
  height: 140px;
}

.time {
  font-size: 16px;
  color: #C0C0C0;
  text-align: end;
  right: 10px;
  padding: 4px;
}

/*.col-sm-3 a {
color:#DCDCDC;
font-size:100px;
text-decoration: none; 
}
  .col-sm-3
  {
  vertical-align:center;
  text-align:center;
  padding:20px;
  width:24%;
  height:400px;
  color:white;
    background-color: rgba(0, 0, 75, 0.9);
margin-left:10px;
  height:330px;
  }*/
.modal-dialog2 {
  height: 98%;
  margin: 1%;
}

.modal-body {
  padding: 0;
}

canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
}

.forchart {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: central;
}

.swiper-slide {
  cursor: pointer;
}

.modal-footer2 {
  background-color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  /* margin-top: 15px; */
  padding: 19px 20px 20px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

.modal-header .close {
  margin-top: -2px;
  font-size: 26px;
  color: white;
}

#none2 {
  display: none;
}

#mapDiv {
  height: 85%;
}

.modal-header {
  font-family: Head;
  padding: 10px;
  line-height: 0.9em;
}

.modal-title {
  padding: 10px;
  text-align: center;
  font-size: 36px;
  line-height: 0.8;
}

.modal-content {
  font-family: Trebuchet MS;
  color: #989898;
  height: 100%;
  position: relative;
  background-color: rgba(255, 255, 255, 0.98);
  border: 0px solid #999;
  border: 0px solid rgba(0, 0, 0, 0.2);
  border-radius: 0px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}

.modal-header h4 {
  font-family: Head;
}

.btn-lg, .btn-group-lg > .btn {
  width: 100%;
  background-color: rgb(39, 41, 54);
  font-size: 30px;
  color: white;
  height: 45px;
  display: flex;
  font-family: Trebuchet MS;
  border-radius: 0;
  border: 1px solid rgba(23, 0, 31, 0);
  justify-content: center;
  align-items: center;
}

#left {
  /* border-left: 10px  solid rgba(23, 0, 31, 0); 
  border-bottom: 10px  solid rgba(23, 0, 31, 0);
  border-top: 10px  solid rgba(23, 0, 31, 0);
  border-right: 10px  solid rgba(23, 0, 31, 0);    */
  /* margin-bottom: -45px; */
  height: 100%;
  border: none;
  margin: 10px !important;
}

#right {
  /*   
  border-left: 10px  solid rgba(23, 0, 31, 0); 
  border-bottom: 10px  solid rgba(23, 0, 31, 0);
  border-top: 10px  solid rgba(23, 0, 31, 0); */
  height: 100%;
  border: none;
  margin: 10px !important;
  max-height: 333px;
}

.navbar-form {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-group {
  font-family: Trebuchet MS;
  /* padding-top:10px; */
  padding-left: 24px;
  padding-right: 12px;
  /* height:46px; */
}

a {
  color: #B0C4DE;
  font-size: 16px;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: white;
}

.aMy {
  text-decoration: none;
}

.aMy:hover {
  text-decoration: none;
  color: darkblue;
}

#main {
  color: black;
  font-weight: 900;
  border-radius: 6px;
  padding: 7px;
  background-color: rgba(50, 91, 103, 0.4);
}

#main:hover {
  color: white;
}

.navbar-inverse {
  height: 4% !important;
  background-color: black;
  opacity: 0.9;
  font-family: Head;
  /* min-height: 40px; */
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .container {
    width: 100%;
    margin-right: 0;
    height: 100%;
    /* height:40px; */
  }
}
@media (min-width: 700px) {
  .container {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* global */
body {
  height: 100%;
  /* background: url(../../../img/panels/galactic2.jpg) 100% 100% no-repeat;  */
  /* background: aliceblue; */
  /* background-image: url(../../../img/home_page/river2.jpg);
    color: rgb(100,100,100);
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 60px;
    background-repeat: no-repeat;
    background-size: cover; */
}

html {
  min-height: 100%;
  overflow-y: scroll;
}

.background {
  height: 100%;
  width: 100%;
  position: fixed;
}

.background-image {
  height: 100%;
  width: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  top: 0;
  left: 0;
  animation: fade 40s ease-in-out infinite alternate;
}

.navbar-fixed-top, .navbar-fixed-bottom {
  position: relative;
}

.background-image:nth-of-type(1) {
  animation-delay: 0s;
}

.background-image:nth-of-type(2) {
  animation-delay: 10s;
}

.background-image:nth-of-type(3) {
  animation-delay: 20s;
}

.background-image:nth-of-type(4) {
  animation-delay: 30s;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#container {
  height: 100%;
}

footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  /* background-color: #272936; */
  padding-top: 10px;
  text-align: center;
  /* color: white; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

footer p {
  margin: 0;
}

footer img {
  margin-left: 10px;
}

.wrapper {
  margin: 0 auto;
  padding: 20px;
  max-width: 95%;
  background-color: #fff;
}

h1 {
  color: white;
  font-family: Head;
  text-align: center;
  font-size: 2em;
  margin-bottom: 10px;
}

h2 {
  font-weight: 700;
}

/* grid */
.row {
  margin-top: 10px;
  margin-right: 0;
}

.row:last-child {
  margin-bottom: 0;
}

.weather-left-bottom-left.wow.bounceInLeft.animated {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  padding-bottom: 5px;
}

#temp, #preasure, #wind, #w_level, #humidity {
  width: 20%;
  margin: 5px 0.5% !important;
  white-space: nowrap;
  font-size: 1vw;
  flex-direction: column;
}

#phenomen i, #temp i, #preasure i, #wind i, #w_level i, #humidity i {
  font-size: 30px !important;
  padding-bottom: 5px;
}

#phenomen img {
  width: 60px !important;
}

.weather-left-info {
  width: 100%;
}

#left {
  background: none;
}

#right {
  background: none;
}

.loaderMargin {
  top: 0px !important;
}

.loaderWidget {
  width: 180px;
  height: 140px;
  display: block;
  margin: 0 auto 20px;
  background-image: radial-gradient(circle 25px at 25px 25px, #bceaff 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #bceaff 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #bceaff 100%, rgba(62, 152, 194, 0) 0), radial-gradient(circle 15px at 15px 15px, #bceaff 100%, transparent 0), linear-gradient(#bceaff 50px, rgba(255, 255, 255, 0.3294117647) 0);
  background-image: -webkit-radial-gradient(circle 25px at 25px 25px, #bceaff 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #bceaff 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #bceaff 100%, rgba(62, 152, 194, 0) 0), radial-gradient(circle 15px at 15px 15px, #bceaff 100%, transparent 0), linear-gradient(#bceaff 50px, rgba(255, 255, 255, 0.3294117647) 0);
  background-size: 50px 50px, 100px 75px, 50px 50px, 30px 32px, 136px 20px;
  background-repeat: no-repeat;
  background-position: 0px 30px, 30px 0px, 113px 29px, 147px 50px, 23px 60px;
  box-sizing: border-box;
  transform: translate(0%, 50%);
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-transform: translate(0%, 50%);
  -moz-transform: translate(0%, 50%);
  -ms-transform: translate(0%, 50%);
  -o-transform: translate(0%, 50%);
}

.loaderWidget::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 70px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  outline: none;
  color: #fff;
  box-sizing: border-box;
  animation: animloader 2.4s linear infinite;
  -webkit-animation: animloader 2.4s linear infinite;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.loaderWidget::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  outline: none;
  color: #fff;
  box-sizing: border-box;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.loader-arrow {
  width: 80px;
  height: 80px;
  display: inline-block;
  position: relative;
  border-width: 5px 4px 5px 4px;
  border-style: solid dotted solid dotted;
  border-color: #3e98c2 rgba(255, 255, 255, 0.3) #fff rgba(93, 128, 151, 0.3);
  border-radius: 50%;
  -khtml-border-radius: 50%;
  outline: none;
  box-sizing: border-box;
  margin-left: 45px;
  margin-top: 20px;
  animation: 1s rotate-arrow linear infinite;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-animation: 1s rotate-arrow linear infinite;
}

.loader-arrow:before, .loader-arrow:after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  border: 11px solid transparent;
  border-bottom-color: #fff;
  transform: translate(-10px, 34px) rotate(-35deg);
  -webkit-transform: translate(-10px, 34px) rotate(-35deg);
  -moz-transform: translate(-10px, 34px) rotate(-35deg);
  -ms-transform: translate(-10px, 34px) rotate(-35deg);
  -o-transform: translate(-10px, 34px) rotate(-35deg);
}

.loader-arrow:before {
  left: 2px;
  top: 10px;
}

.loader-arrow:after {
  border-color: #3e98c2 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  transform: translate(32px, 3px) rotate(-35deg);
  left: 25px;
  top: 3px;
  -webkit-transform: translate(32px, 3px) rotate(-35deg);
  -moz-transform: translate(32px, 3px) rotate(-35deg);
  -ms-transform: translate(32px, 3px) rotate(-35deg);
  -o-transform: translate(32px, 3px) rotate(-35deg);
}

.loaderMargin .loader-arrow {
  margin-left: -10px !important;
  margin-top: 40px !important;
}

.meteo-content .loader-arrow {
  margin-left: 0px;
}

@keyframes rotate-arrow {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
.loaderGraph::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 70px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  color: #fff;
  box-sizing: border-box;
  animation: animBuble 2.4s linear infinite;
  -webkit-animation: animBuble 2.4s linear infinite;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.removeImage {
  background-image: none !important;
}

.removeImage::after {
  display: none;
}

.bubble {
  border-radius: 50%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgb(204, 227, 230);
  height: 100px;
  position: absolute;
  width: 100px;
}

.bubble-1 {
  animation: animateBubble 4s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 55%;
  top: 5%;
  transform: scale(0.2);
}

.bubble-2 {
  animation: animateBubble 7s linear infinite, sideWays 5s ease-in-out infinite alternate;
  left: 95%;
  top: 15%;
  transform: scale(0.4);
}

.bubble-3 {
  animation: animateBubble 3s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 15%;
  top: 0;
  transform: scale(0.32);
}

.bubble-4 {
  animation: animateBubble 3s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 5%;
  top: 15%;
  transform: scale(0.3);
}

.bubble-5 {
  animation: animateBubble 6s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 25%;
  top: 0;
  transform: scale(0.6);
}

.bubble-6 {
  animation: animateBubble 8s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 45%;
  top: 0;
  transform: scale(0.1);
}

.bubble-7 {
  animation: animateBubble 10s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 65%;
  top: 5%;
  transform: scale(0.5);
}

.bubble-8 {
  animation: animateBubble 6s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 75%;
  top: 0;
  transform: scale(0.1);
}

.bubble-9 {
  animation: animateBubble 6s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 3%;
  top: 0;
  transform: scale(0.1);
}

.bubble-10 {
  animation: animateBubble 6s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 11%;
  top: 0;
  transform: scale(0.1);
}
@keyframes animloader {
  0% {
    box-shadow: 25px 0 rgb(192, 246, 255), 50px 0 rgb(141, 251, 255), 75px 0 rgb(192, 246, 255), 100px 0 rgb(141, 251, 255), 125px 0 rgb(192, 246, 255), 150px 0 rgb(141, 251, 255), 25px 0 rgb(192, 246, 255), 50px 0 rgb(141, 251, 255), 75px 0 rgb(192, 246, 255), 100px 0 rgb(141, 251, 255), 125px 0 rgb(192, 246, 255), 50px 0 rgb(141, 251, 255);
  }
  20% {
    box-shadow: 25px 20px rgb(192, 246, 255), 50px 20px rgb(141, 251, 255), 75px 10px rgb(192, 246, 255), 100px 30px rgb(141, 251, 255), 125px 20px rgb(192, 246, 255), 150px 30px rgb(141, 251, 255), 25px 5px rgb(192, 246, 255), 50px 10px rgb(141, 251, 255), 75px 10px rgb(192, 246, 255), 100px 10px rgb(141, 251, 255), 125px 15px rgb(192, 246, 255), 50px 0px rgb(141, 251, 255);
  }
  60% {
    box-shadow: 25px 60px rgb(192, 246, 255), 50px 40px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px rgb(192, 246, 255), 150px 60px rgba(255, 255, 255, 0), 25px 20px rgb(192, 246, 255), 50px 30px rgb(192, 246, 255), 75px 40px rgb(192, 246, 255), 100px 30px rgb(192, 246, 255), 125px 30px rgba(255, 255, 255, 0), 50px 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 25px 80px rgba(255, 255, 255, 0), 50px 40px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 100px 30px rgba(255, 255, 255, 0);
  }
}
.zoom-page {
  overflow-x: visible;
}
.zoom-page .s1 {
  max-height: 300px !important;
}
.zoom-page .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: unset;
}
.zoom-page .swiper-slide a img {
  min-width: 90% !important;
}
.zoom-page .forecast-days {
  font-size: 1vw;
}
.zoom-page .full-day__forecast-date {
  padding-top: 0px;
}
.zoom-page h5 {
  font-size: 1.6vw;
}
.zoom-page #forecast-hours__container {
  min-width: 98% !important;
}
.zoom-page #bikini h4 {
  margin-top: 0px !important;
}
.zoom-page .body-page {
  height: 260px;
}
.zoom-page .background, .zoom-page .overflow-mask {
  position: fixed;
}
.zoom-page .swiper-container {
  position: relative !important;
  max-height: 100%;
}
.zoom-page .swiper-container {
  margin-top: 140px !important;
}
.zoom-page footer {
  position: relative !important;
}
.zoom-page #forecast-hours__container {
  margin-bottom: -100px;
}
.zoom-page #loading:has(.loaderWidget) {
  margin-bottom: 200px !important;
}
.zoom-page .swiper-title {
  font-size: 1.2vw !important;
}
.zoom-page .swiper-slide a img {
  width: 100%;
}
.zoom-page .form-group a {
  font-size: 12px;
}

.zoom-page__small .body-page {
  height: 360px;
}
@media screen and (min-width: 751px) and (max-width: 1350px) {
  #phenomen, #temp, #preasure, #wind, #w_level, #humidity {
    font-size: 0.9em !important;
    justify-content: center !important;
    width: 20%;
  }
  body:has(.desctop-gallery) .swiper-title {
    font-size: 1vw !important;
  }
  a.navbar-form.navbar-left {
    text-align: center;
    justify-content: left;
  }
  a.navbar-form.navbar-left span {
    max-width: 370px;
  }
  #forecast-hours__container {
    min-width: 100% !important;
  }
  div#highcharts-screen-reader-region-before-1 {
    min-width: 100%;
  }
  html {
    height: 100%;
  }
  #bikini img {
    margin-top: 0px;
    width: 20%;
  }
  h4 {
    font-size: 3vw;
  }
  h5 {
    font-size: 2vw;
  }
  #phenomen img {
    width: 55px !important;
  }
  #phenomen i, #temp i, #preasure i, #wind i, #w_level i, #humidity i {
    font-size: 25px !important;
  }
  div#container {
    min-height: 100px;
  }
  g.highcharts-series.highcharts-series-0.highcharts-spline-series {
    min-width: 100%;
  }
  .swiper-slide:hover img {
    width: 100%;
  }
  .swiper-container {
    bottom: 0px !important;
  }
  .swiper-slide {
    min-height: 220px !important;
  }
}
@media screen and (max-width: 750px) {
  div#none {
    display: none;
  }
  .zoom-page .swiper-slide a img {
    min-width: 80% !important;
    width: 80%;
  }
  body:has(.desctop-gallery) .swiper-title {
    max-width: 80%;
    margin-left: 10%;
  }
  .wg-contain {
    /* height: 200px !important; */
    min-height: 300px;
    justify-content: space-between;
  }
  /* #loading {
    margin-top: 400px;
  } */
  .swiper-container.s1 {
    max-width: 100%;
    position: relative;
    height: auto;
    min-height: 400px;
  }
  .zoom-page .body-page {
    height: auto;
  }
  .background {
    position: fixed;
  }
  .overflow-mask {
    position: fixed;
  }
  footer {
    position: relative;
    padding-bottom: 10px;
  }
  .body-page {
    flex-direction: column;
    height: 100%;
    max-height: 1150px;
    margin-top: 0;
  }
  #left {
    min-height: 300px;
    width: 98%;
    margin-bottom: 0 !important;
    margin-left: 1% !important;
    margin-top: 300px !important;
  }
  #left .weather-left-info {
    width: 100%;
    min-height: 300px;
  }
  .head-graph__footer div {
    font-size: 0.9em !important;
  }
  .zoom-page .swiper-title {
    padding-top: 10px;
    font-size: 6vw !important;
  }
  h3#temp {
    display: flex;
    margin: 0 0.5% !important;
  }
  .weather-left-top.weather-right-top {
    height: 100%;
    min-height: 280px;
  }
  .graph {
    min-height: 400px;
  }
  .zoom-page .forecast-days {
    font-size: 3.8vw;
  }
  .forecast-days {
    margin-left: 2%;
    font-size: 3.8vw;
    flex-direction: column;
    width: 96%;
  }
  .full-day__forecast-item__block1, .full-day__forecast-item__block2 {
    justify-content: center;
    font-size: 4vw;
  }
  .wind-dir__forecast-day, .wind-dir__forecast-night {
    margin-right: 7px;
  }
  .head-graph__top h6, .weather-left-top h6 {
    font-size: 6vw !important;
  }
  .head-graph {
    justify-content: space-between;
    height: 30%;
  }
  form.navbar-form.navbar-right {
    display: none;
    width: 100%;
  }
  .weather-left-top.wow.bounceInUp.animated.p-y-lg.p-y-md.p-y-sm {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 16px !important;
    padding-top: 30px;
  }
  .weather-left-bottom-left.wow.bounceInLeft.animated {
    margin-top: 0px;
  }
  #phenomen, #temp, #preasure, #wind, #w_level, #humidity {
    font-size: 0.9em !important;
    justify-content: center !important;
    margin-top: 0px !important;
  }
  .weather-left-top h4 {
    font-size: 16px !important;
    margin-left: 5px !important;
  }
  .head-graph__footer {
    min-height: 80px;
  }
  div#right {
    margin-bottom: 10px;
    width: 98%;
    height: 400px;
    min-height: 400px;
    margin-top: 0 !important;
    margin-left: 1% !important;
    border-top: 1px solid white !important;
  }
  div#right .weather-left-info {
    min-height: 100%;
    /* min-height: 300px !important;
    height: 300px !important; */
    /* background-color: rgb(39 38 80 / 59%) !important; */
  }
  .swiper-title {
    font-size: 14px !important;
  }
  body:has(.desctop-gallery) .swiper-slide {
    min-width: 100% !important;
  }
  .swiper-slide {
    min-width: 100% !important;
  }
  footer p {
    font-size: 10px;
  }
  .navbar-collapse.collapse {
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
    font-size: 12px;
  }
  .navbar-collapse.collapse a {
    font-size: 5vw;
  }
  .portal-link {
    margin-top: 10px !important;
    height: 100%;
  }
  #bikini:hover {
    margin-top: 0;
  }
  .navbar-collapse.collapse.show {
    min-height: 100% !important;
    position: fixed;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    background: aliceblue;
    z-index: 99999;
    margin-top: 10px;
  }
  form.navbar-form.navbar-right {
    flex-direction: column;
    justify-content: flex-start !important;
    height: 100% !important;
    align-items: flex-start !important;
    margin: 0;
    padding: 0;
    border: none !important;
  }
  .navbar-form.navbar-left {
    display: none;
  }
  form.navbar-form.navbar-right a {
    color: #272936 !important;
  }
  .navbar-toggle {
    padding: 12px;
    border: none;
  }
  .navbar-form .form-group {
    display: flex;
    margin: 20px 0 !important;
    padding: 0 !important;
  }
  a#button_goto-portal-top {
    padding: 10px;
  }
  .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: transparent !important;
  }
  .zoom-page #loading:has(.loaderWidget) {
    min-height: 0px;
    margin-bottom: 0 !important;
  }
}
@media screen and (min-width: 1240px) and (min-height: 1628px) {
  .zoom-page .swiper-container {
    position: absolute !important;
    bottom: 45px !important;
    margin-top: 0px !important;
    max-height: 500px !important;
    margin-left: 1%;
    width: 98% !important;
  }
  .zoom-page footer {
    position: absolute !important;
    bottom: 0;
  }
  footer p {
    margin: 0;
    font-size: 2vw;
    margin-bottom: 20px;
  }
  .zoom-page .swiper-container, .zoom-page .desctop-gallery {
    max-height: 500px;
  }
  .zoom-page .swiper-title {
    font-size: 2.15vw !important;
  }
  .zoom-page .body-page {
    height: 500px;
  }
  .zoom-page #forecast-hours__container {
    margin-bottom: 0px;
    margin-top: 0px;
  }
  #phenomen, #temp, #preasure, #wind, #w_level, #humidity {
    font-size: 1.1em !important;
    justify-content: center !important;
    width: 25%;
  }
  .head-graph__footer.active-border div {
    font-size: 1.1em !important;
  }
  #temp img {
    width: 50px;
  }
  .head-graph__footer {
    min-height: 100px;
  }
  .navbar-collapse.collapse {
    font-size: 1.8vw;
  }
  .navbar-collapse.collapse span {
    margin-top: 10px;
  }
  .form-group {
    padding-top: 15px;
  }
  .zoom-page .form-group a {
    font-size: 1.4vw;
  }
  .zoom-page h5 {
    font-size: 2.5vw;
  }
  #bikini h4 {
    font-size: 4vw;
  }
  #bikini img {
    margin-top: 0px;
    width: 50%;
  }
  .navbar-left img {
    width: 50px;
    margin-right: 10px;
    margin-top: 15px;
  }
  #phenomen i, #temp i, #preasure i, #wind i, #w_level i, #humidity i {
    font-size: 40px !important;
    margin-bottom: 5px;
  }
  .weather-left-bottom-left.wow.bounceInLeft.animated {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding-bottom: 5px;
    min-height: 100px;
  }
  .zoom-page .forecast-days {
    font-size: 1.5vw;
  }
  .full-day__forecast-item__block2 {
    flex-direction: column;
  }
  .zoom-page .full-day__forecast-date {
    padding-top: 10px;
    font-size: 2vw;
  }
  .full-day__forecast img {
    width: 45px;
  }
  .full-day__forecast-item__block1 {
    flex-direction: column;
  }
}/*# sourceMappingURL=all.css.map */