div#_intro {min-height: 2rem;}

div#_welcomeVillage { width: 100%; margin-top: 1rem;
  > div.wlcActions { width: 100%; display: flex; justify-content: center; align-items: center; gap: 2rem; row-gap: 1rem; flex-wrap: wrap; 
    > div.wlcAction {width: 20rem; border: 1px solid #CCC; background-color: #F5F5F5; padding: 0.5rem; display: flex; justify-content: left; align-items: center; gap: 1rem; 
      > img {width: 2rem;}
      > div.actionContent { 
        > p.actionHeader {font-size: 1.2rem; text-align: left; white-space: nowrap;}
        > div.actionLinks {display: flex; justify-content: left; align-items: center; gap: 1rem; row-gap: 0.25rem; flex-wrap: wrap; font-size: 0.9rem}
      }  
    
    }
    div.wlcAction:first-of-type {margin: 0}
  }
}

div.welcomeModules {width: 100%; display: flex; justify-content: left; align-items: top; gap: 2rem; flex-wrap: wrap; margin-top: 2rem;
  > div.welcomeModule {width: calc(50% - 1rem);
    > ul.welcomeDocuments {width: 100%;
      > li {display: flex; justify-content: left; align-items: center; gap: 0.5rem; margin-top: 1rem;
        > img {height: 2rem;}
      }
      > li:first-child {margin: 0}
    } 
    > ul.welcomePays { border: 1px solid #CCC; background-color: #F5F5F5; padding: 0.5rem;
      > li {display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 0.5rem;
        > div:nth-child(1) {width: 3rem; text-align: center;}
        > div:nth-child(2) {width: 10rem; text-align: center;}
      } 
      > li:first-child { margin: 0;}
      > li:nth-child(2) {
        > div {font-weight: bold}
      } 
    }
    > h2.additional {margin-top: 2rem; }
    > ul.welcomeAdditional { border: 1px solid #CCC; background-color: #F5F5F5; padding: 0.5rem;
      > li {display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 0.5rem;
        > div:nth-child(1) {flex-grow: 1; text-align: left;}
        > div:nth-child(2) {width: 6rem; text-align: right;}
      } 
      > li:first-child { margin: 0;}
      > li:nth-child(2) {
        > div {font-weight: bold}
      } 
    }
    > ul.welcomeServices {
      > li { border: 1px solid #CCC; padding: 0.5rem; margin-top: 0.5rem; background-color: #F5F5F5;
        > h3 {margin: 0; text-align: center;
          > p {font-size: 0.9rem}
        }
        > div.tarifs {display: flex; justify-content: center; align-items: top; gap: 1rem; text-align: center; margin-top: 0.5rem;
          > div.tarifCol {
            > p:nth-child(2) {margin-top: 0.5rem}
          }
        }
      }
      > li:first-child {margin: 0}
    }
  }
}

#_introImg {border-radius: 1rem; width: 100%}
#_intro {position: relative}
#_mobileIntro {display: none; }
#_intro h1 {position: absolute; top: 0.5rem; right: 1rem; color: white; font-size: 1.7rem; text-shadow: 1px 1px 3px black;}

#_wlcAboutSnt {display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-top: 2rem}
.wlcAboutText {white-space: pre-line; word-wrap: break-word; overflow-wrap: break-word;}
#_logo {width: 12rem;}
#_welcomeNews {margin-top: 2rem;}
#_welcomeNews ul {display: flex; justify-content: space-around; align-items: top}
#_welcomeNews ul li {background-color: #FAFAFA; width: 28%; padding: 2%; border-radius: 1rem; border: 1px solid #CCC; }
.welcomeNewsDate {font-size: 0.7rem; color: gray; margin-bottom: 0.5rem}
.welcomeNewsHeader {font-size: 1.1rem; font-weight: bold; margin-bottom: 0.5rem; margin-top: 0.3rem}
.welcomeNewsText {margin-bottom: 0.5rem}
.welcomeNewsLink {text-align: right}
.welcomeLEBackGreen {width: calc(100% - 2rem - 2px); padding: 1rem; border: 1px solid #CCC; text-align: center; font-weight: bold; color: green; background-color: #DFD} 
.welcomeLEBackRed {width: calc(100% - 2rem - 2px); padding: 1rem; border: 1px solid #CCC; text-align: center; font-weight: bold; color: red; background-color: #FDD}
.welcomeLEBackGray {width: calc(100% - 2rem - 2px); padding: 1rem; border: 1px solid #CCC; text-align: center; font-weight: bold; color: red; background-color: #F5F5F5}
.welcomeNewsImageBox {text-align: center}
.welcomeNewsImageBox > img {width: calc(100% - 1rem)}

#_welcomeMap {margin-top: 1rem}
.welcomeContactsUp > p {margin-top: 1rem}
#_welcomeContacts div {margin-bottom: 1rem}
#_welcomeNoNews {color: red}
.welcomeAllLink {text-align: right; margin-top: 0.5rem}

#_welcomeSntLife {margin-top: 2rem;}
#_welcomeSntLife > ul {display: flex; justify-content: space-between; align-items: stretch; gap: 1rem}
#_welcomeSntLife > ul > li {border: 1px solid #CCC; padding: 1rem; text-align: center; cursor: pointer; color: blue}
#_welcomeSntLife > ul > li:hover {border: 1px solid black}
#_welcomeSntLife > ul > li > img {width: 100%}
#_welcomeSntLife > ul > li > p {margin-top: 1rem}

.wlcServices h3 {width: calc(100% - 1rem); padding: 0.5rem; padding-bottom: 0; margin: 0}
.wlcServices h4 {font-size: 1rem; margin: 0.5rem 0}
.wlcServicesBox {display: flex; justify-content: space-between; align-items: top}
.wlcServicesLeft {width: 59%; margin: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start}
.welcomeEW {display: flex; text-align: center; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; border: 1px solid #CCC}
.welcomeEBox {display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.5rem}
.welcomeEBox:nth-child(even) {width: 44%}
.welcomeEBox:nth-child(odd) {width: 54%}
.welcomeEBox > div > p:nth-child(2) {font-size: 0.8rem}
.welcomeEBox > div > p:nth-child(3) {font-size: 1.2rem; margin-top: 0.5rem}
.welcomeEBox > h4 {width: 100%}
#_welcomeWater {list-style: none; display: flex; justify-content: space-between; margin-bottom: 0.5rem; align-items: top; flex-wrap: wrap; padding: 1rem 0.5rem}
.welcomeWaterSum {text-align: center}

.welcomeWaterStar {width: 100%; display: flex; justify-content: space-around; align-items: center; margin-bottom: 0.5rem}
.welcomeWaterStar > div:last-child {font-size: 1.2rem}
.wlcWaterVal {width: 100%; text-align: center; font-size: 1.2rem; margin-bottom: 0.5rem}

#_welcomeLoginButton {display: none}

.wlcNoWeather {width: 100%; color: red; text-align: left}
.wlcWeatherHeader > p {text-align: left; font-size: 0.8rem; color: gray}
.wlcWeatherLE {width: 100%; display: flex; justify-content: space-between; align-items: top; flex-wrap: wrap}
#_wlcWeather {width: 20rem}
#_mtMeetingMenu {margin-top: 1rem}
#_wlcWeather img {width: 3rem}
.wlcLenenergo {display: none; width: calc(100% - 22rem)}
.wlcWeatherCopyright {font-size: 0.7rem; color: gray; text-align: right; margin-top: 0.2rem}
#_wlcWeatherDateBox {display: flex; justify-content: space-around; align-items: center}
#_wlcWeatherDateBox > li {padding: 0.2rem 0.5rem}
.wlcWeatherIconBox {display: flex; justify-content: space-between; align-items: center; gap: 2rem; text-align: center}
.wlcWDDDate {font-size: 1rem}
.wlcWDDIcon {width: 3rem}
.wlcWDDText {font-size: 1.2rem; margin-bottom: 0.2rem}
.wlcWDDTempLow, .wlcWDDTempHigh {font-size: 0.8rem; color: gray}
.wlcWDDTempAvg {margin: 0 0.5rem; font-size: 1.5rem}
.wlcWeatherSun {display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 0.5rem}
.wlcWeatherDayParams {display: flex; justify-content: center; align-items: top; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0}
.wlcWeatherDayParams > div {border: 1px solid #CCC; padding: 0.2rem; width: 5rem}
.wlcWeatherDayParams img {width: 2rem}
.wlcWeatherSun {border: 1px solid #CCC}
.wlcWDNTemp, .wlcWDHTemp {font-size: 1.5rem}
.wlcWDNFeels, .wlcWDHFeels {font-size: 0.7rem}
.wlcWDNTempFeelsLike, .wlcWDHTempFeelsLike {font-size: 1rem}
.wlcWDHText, .wlcWDNText {font-size: 1.2rem; height: 4rem; text-align: center; display: flex; justify-content: left; align-items: center; flex-wrap: wrap}
.wlcWeatherWindBox {width: 100% !important; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border: 1px solid #CCC; padding: 0.2rem 0.5rem; text-align: center; font-size: 0.9rem}
.wlcWeatherWindBox > img {width: 2rem}
.wlcWeatherWindBox > div {width: calc(100% - 3rem)}
.wlcWeatherWindBox > p {text-align: right}
.wlcWeatherTimeBox {display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem}
.wlcWeatherTimeBox > p {font-size: 1.2rem}
#_wlcWeatherHourRange {padding: 0}
.wlcWeatherNowTimeBox {display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: 1.2rem}
.wlcWeatherNowTimeBox > p:last-child {font-size: 1rem }

.wlcWDSelect {border: 1px solid #CCC}


@media only screen AND (max-width: 500px) 
{
  div.welcomeModules {
    > div.welcomeModule {width: 100%;
      > ul.welcomeServices {
        > li {border: 0; background-color: white;}
      } 
      > ul.welcomePays {border: 0; background-color: white;}
      > ul.welcomeAdditional {border: 0; background-color: white;}
    }
  }
  #_intro {display: none}
  #_mobileIntro {margin-top: 10px;display: block}
  #_wlcAboutSnt {display: none}
  .welcomeNewsImageBox {text-align: left}
  #_welcomeSntLife > ul {flex-wrap: wrap} 
  #_welcomeSntLife > ul > li {width: calc(50% - 3rem)}
  #_welcomeVillage {width: 100%;
    > div.wlcActions { 
      > div.wlcAction {width: 100%;}
    }  
  } 
  #_welcomeNews {margin-top: 1rem}
  #_welcomeNews ul {display: block}
  #_welcomeNews ul li {width: 96%; padding: 2%; background-color: white; border: 0; margin-top: 0.5rem}  
  #_welcomeBox {margin-top: 2rem;}
  #_welcomeDocs ul {width: 98%; text-align: left}
  #_welcomeDocs ul li {width: 100%; text-align: left; padding: 0.5rem}
  #_welcomeDocs ul li a {display: flex; justify-content: left; align-items: center}
  #_welcomeDocs ul li a img {height: 30px; margin-right: 0.5rem}  
  #_welcomeContacts {width: 100%; margin-left: 0; margin-top: 2rem}
  h2 {text-align: left; background-color: #EEE; padding: 0.5rem}
  .wlcPays {display: block}
  .wlcPaysBox {display: block; margin: 0}
  .welcomeEBox {gap: 0.5rem}
  .wlcPaysLeft {width: calc(100% - 2px); margin-top: 2rem}
  .welcomeEW:nth-child(1) {height: 15rem; margin-bottom: 1.7rem}
  .welcomeV {width: calc(100% - 2px); margin-top: 2rem}
  .welcomeWaterStar {font-size: 0.9rem}
  #_welcomeLoginButton {display: block; margin: 2rem auto} 
  #_welcomeDocuments > li {display: flex !important; justify-content: left; align-items: center; gap: 1rem; flex-wrap: nowrap}
  #_welcomeDocuments > li > img {height: 2rem}
  .wlcLenenergo {width: 100%; margin-top: 2rem; }
  #_wlcWeather {width: 100%}
}

@media only screen AND (orientation: landscape) AND (max-width: 1024px) 
{
  #_intro {display: none}
  #_mobileIntro {display: block; margin-top: 10px}
  #_aboutSnt {display: none}
  #_welcomeVillage > ul > li > p {font-size: 0.8rem}
  #_welcomeNews {margin-top: 1rem}
  #_welcomeNews ul {display: block}
  #_welcomeNews ul li {width: 96%; padding: 2%; background-color: white; border: 0; margin-top: 0.5rem}  
  #_welcomeBox {margin-top: 2rem; display: block}
  #_welcomeDocs ul {width: 100%; text-align: left}
  #_welcomeDocs ul li {width: 100%; text-align: left; padding: 0.5rem}
  #_welcomeDocs ul li a {display: flex; justify-content: left; align-items: center}
  #_welcomeDocs ul li a img {height: 30px; margin-right: 0.5rem}
  #_welcomeContacts {width: 100%; margin-left: 0; margin-top: 2rem; display: flex; justify-content: space-between; align-items: top; flex-wrap: wrap}
  #_welcomeContacts h2 {width: 100%}
  .welcomeContactsUp {margin-top: 1rem; width: 13rem}
  #_contactsMap {min-width: 60%}
  .welcomeH2 {margin-bottom: 0.5rem; text-align: left; background-color: #EEE; padding: 0.5rem}
  #_welcomePays {display: block}
  #_welcomeEW {width: calc(100% - 2px); margin-top: 2rem}
  #_welcomeV {width: calc(100% - 2px); margin-top: 2rem}
  .wlcLenenergo {width: 100%; margin-top: 2rem}
  .wlcWeather {width: 100%}
}