/*-----------------------------*\
 #SECTION CONTAINER
\*-----------------------------*/

.meteo-section {
 width: 28%;
 height: 100vh;
 display: block;
 margin-left: 72%;
 position: absolute;
 background:linear-gradient(to bottom, rgba(0,0,0,0.3), var(--medium-grey));
 box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
 box-sizing:border-box;
 transition: margin-left 2s ease-out;
 transition-delay: 2s;
}
.date-time {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.date-text{
  font-family: "urbanist";
  color: white;
  font-size: var(--medium-typo);
  font-weight: normal;
}

.date {
  float: left;
  margin-left: var(--big-space);
  font-size: var(--medium-typo);
  font-weight: normal;
  padding-top: var(--big-space);
}

.time {
  float: right;
  margin-right: calc(var(--big-space) + var(--medium-space));
  line-height: 3.2vw;
  font-size: calc(var(--title)*2);
  font-weight:500;
  padding-top: var(--big-space);

}

.current-meteo {
  text-align: center;
  margin-right: calc(var(--big-space) + var(--medium-space));
  margin-left: var(--big-space);
  border-left: solid 2px var(--medium-grey);
  padding-top: var(--big-space);
}

.current-meteo__image {
  height: 20vh;
}

.current-meteo--text {
  display: flex;
  justify-content: center;
  padding-top: calc(var(--medium-space)*1.5);
  padding-bottom:calc(var(--big-space)*1.5);
}

.current-meteo__temp {
  display: block;
  padding-top: var(--small-space) !important;
  padding-left: var(--small-space) !important;
  font-size: calc(var(--title)*2);
  font-weight:500;
  line-height: 3.2vw;
}

.current-res {
  font-family: "urbanist";
  color: white;
  font-size: var(--medium-typo);
  font-weight: normal;
  padding-left: var(--small-space);
  color:var(--grey);
  padding-top: var(--small-space);
  text-align: left;
  padding-right: var(--small-space) !important;
}


.forecast-meteo--day {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding-right: calc(var(--big-space) + var(--medium-space));
  padding-left: var(--big-space);
  padding-top: var(--medium-space);
  padding-bottom:var(--small-space);
}

.forecast-img {
  width: 50%;
}
.day {
  width: 35%;
}

.pop-bloc {
  display: flex;
  align-items: center;
  width: 35%;
}

.pop {
  padding-left: calc(var(--small-space)/2);
  color: var(--grey);
}

.temp-bloc {
  display: flex;
  justify-content: right;
  text-align: right;
  width: 30%;
}

.temp-res {
  padding-left: var(--small-space);
  color: var(--grey);
  min-width: 50%;
}