ul.links li.menu-icon-199,
  ul.menu li.menu-icon-199 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Radar_Reunion.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-199:hover,
  ul.menu li.menu-icon-199:hover {
    background-size: 110%;
  }

  a.menu-icon-199,
  ul.links li.menu-icon-199 a,
  ul.menu li.menu-icon-199 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-208,
  ul.menu li.menu-icon-208 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Radar_Reunion_1.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-208:hover,
  ul.menu li.menu-icon-208:hover {
    background-size: 110%;
  }

  a.menu-icon-208,
  ul.links li.menu-icon-208 a,
  ul.menu li.menu-icon-208 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-209,
  ul.menu li.menu-icon-209 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Vignette_Mascareignes_1.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-209:hover,
  ul.menu li.menu-icon-209:hover {
    background-size: 110%;
  }

  a.menu-icon-209,
  ul.links li.menu-icon-209 a,
  ul.menu li.menu-icon-209 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-211,
  ul.menu li.menu-icon-211 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_bmm_cote.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-211:hover,
  ul.menu li.menu-icon-211:hover {
    background-size: 110%;
  }

  a.menu-icon-211,
  ul.links li.menu-icon-211 a,
  ul.menu li.menu-icon-211 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-212,
  ul.menu li.menu-icon-212 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_bmm_large_reunion.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-212:hover,
  ul.menu li.menu-icon-212:hover {
    background-size: 110%;
  }

  a.menu-icon-212,
  ul.links li.menu-icon-212 a,
  ul.menu li.menu-icon-212 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-213,
  ul.menu li.menu-icon-213 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_bmm_grand_large.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-213:hover,
  ul.menu li.menu-icon-213:hover {
    background-size: 110%;
  }

  a.menu-icon-213,
  ul.links li.menu-icon-213 a,
  ul.menu li.menu-icon-213 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-214,
  ul.menu li.menu-icon-214 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_vignette_bulletin_ack.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-214:hover,
  ul.menu li.menu-icon-214:hover {
    background-size: 110%;
  }

  a.menu-icon-214,
  ul.links li.menu-icon-214 a,
  ul.menu li.menu-icon-214 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-215,
  ul.menu li.menu-icon-215 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/report.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-215:hover,
  ul.menu li.menu-icon-215:hover {
    background-size: 110%;
  }

  a.menu-icon-215,
  ul.links li.menu-icon-215 a,
  ul.menu li.menu-icon-215 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-216,
  ul.menu li.menu-icon-216 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/P-M-A-Sat%20Antilles%20Guyane_2.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-216:hover,
  ul.menu li.menu-icon-216:hover {
    background-size: 110%;
  }

  a.menu-icon-216,
  ul.links li.menu-icon-216 a,
  ul.menu li.menu-icon-216 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-217,
  ul.menu li.menu-icon-217 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_iles_glorieuses.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-217:hover,
  ul.menu li.menu-icon-217:hover {
    background-size: 110%;
  }

  a.menu-icon-217,
  ul.links li.menu-icon-217 a,
  ul.menu li.menu-icon-217 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-218,
  ul.menu li.menu-icon-218 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_juan_de_nova.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-218:hover,
  ul.menu li.menu-icon-218:hover {
    background-size: 110%;
  }

  a.menu-icon-218,
  ul.links li.menu-icon-218 a,
  ul.menu li.menu-icon-218 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-219,
  ul.menu li.menu-icon-219 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_ile_europa.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-219:hover,
  ul.menu li.menu-icon-219:hover {
    background-size: 110%;
  }

  a.menu-icon-219,
  ul.links li.menu-icon-219 a,
  ul.menu li.menu-icon-219 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-220,
  ul.menu li.menu-icon-220 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_ile_du_tromelin.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-220:hover,
  ul.menu li.menu-icon-220:hover {
    background-size: 110%;
  }

  a.menu-icon-220,
  ul.links li.menu-icon-220 a,
  ul.menu li.menu-icon-220 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-221,
  ul.menu li.menu-icon-221 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_ile_de_la_nouvelle_amsterdam.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-221:hover,
  ul.menu li.menu-icon-221:hover {
    background-size: 110%;
  }

  a.menu-icon-221,
  ul.links li.menu-icon-221 a,
  ul.menu li.menu-icon-221 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-222,
  ul.menu li.menu-icon-222 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_iles_crozet.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-222:hover,
  ul.menu li.menu-icon-222:hover {
    background-size: 110%;
  }

  a.menu-icon-222,
  ul.links li.menu-icon-222 a,
  ul.menu li.menu-icon-222 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-223,
  ul.menu li.menu-icon-223 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/diroi_iles_kerguelen.svg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-223:hover,
  ul.menu li.menu-icon-223:hover {
    background-size: 110%;
  }

  a.menu-icon-223,
  ul.links li.menu-icon-223 a,
  ul.menu li.menu-icon-223 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-229,
  ul.menu li.menu-icon-229 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Vignette_sat_OI.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-229:hover,
  ul.menu li.menu-icon-229:hover {
    background-size: 110%;
  }

  a.menu-icon-229,
  ul.links li.menu-icon-229 a,
  ul.menu li.menu-icon-229 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-230,
  ul.menu li.menu-icon-230 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Vignette_Mascareignes_2.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-230:hover,
  ul.menu li.menu-icon-230:hover {
    background-size: 110%;
  }

  a.menu-icon-230,
  ul.links li.menu-icon-230 a,
  ul.menu li.menu-icon-230 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-231,
  ul.menu li.menu-icon-231 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Radar_Reunion_2.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-231:hover,
  ul.menu li.menu-icon-231:hover {
    background-size: 110%;
  }

  a.menu-icon-231,
  ul.links li.menu-icon-231 a,
  ul.menu li.menu-icon-231 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-232,
  ul.menu li.menu-icon-232 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Vignette_Mascareignes_0.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-232:hover,
  ul.menu li.menu-icon-232:hover {
    background-size: 110%;
  }

  a.menu-icon-232,
  ul.links li.menu-icon-232 a,
  ul.menu li.menu-icon-232 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-233,
  ul.menu li.menu-icon-233 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Radar_Reunion_0.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-233:hover,
  ul.menu li.menu-icon-233:hover {
    background-size: 110%;
  }

  a.menu-icon-233,
  ul.links li.menu-icon-233 a,
  ul.menu li.menu-icon-233 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-234,
  ul.menu li.menu-icon-234 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Climat.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-234:hover,
  ul.menu li.menu-icon-234:hover {
    background-size: 110%;
  }

  a.menu-icon-234,
  ul.links li.menu-icon-234 a,
  ul.menu li.menu-icon-234 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-235,
  ul.menu li.menu-icon-235 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/PE-Reunion.gif);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-235:hover,
  ul.menu li.menu-icon-235:hover {
    background-size: 110%;
  }

  a.menu-icon-235,
  ul.links li.menu-icon-235 a,
  ul.menu li.menu-icon-235 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-243,
  ul.menu li.menu-icon-243 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/Vignette_Mascareignes.png);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-243:hover,
  ul.menu li.menu-icon-243:hover {
    background-size: 110%;
  }

  a.menu-icon-243,
  ul.links li.menu-icon-243 a,
  ul.menu li.menu-icon-243 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }

    
  ul.links li.menu-icon-281,
  ul.menu li.menu-icon-281 {
    

  
    height: 150px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/meteofrance.re/files/menu_icons/dina.jpg);       
    background-repeat: no-repeat;
    background-position: center;

    background-size: 100%;
    
    transition: all 0.3s linear;
  }

  ul.links li.menu-icon-281:hover,
  ul.menu li.menu-icon-281:hover {
    background-size: 110%;
  }

  a.menu-icon-281,
  ul.links li.menu-icon-281 a,
  ul.menu li.menu-icon-281 a {
    position:relative;

    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    width: 100%;


    text-align: center;
    padding: 15px;
    color: #FFF;
    font-size: 16px;
    font-family: "Quicksand", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    background: none;
    box-shadow: none;
    font-size: 0.8em;
    line-height: inherit !important;
    font-weight: 700;
    text-shadow: 0 2px 5px #004c80;
  }

  .animation-title {
    text-shadow: none;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    font-family: "Quicksand",sans-serif;
    height: 20px;
    padding-left: 6px;
    padding-right: 6px;
    background: #db0084;
    line-height: 20px;
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: calc(100% - 20px); 
  }


.menu--main-vignette ul.menu, 
.menu--animations-vignette ul.menu, 
.menu--vignettes-marine ul.menu, 
.menu--vignettes-marine-guadeloupe ul.menu, 
.menu--vignettes-marine-saint-mart ul.menu, 
.menu--animation-vignette ul.menu{
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px; 
}

@media screen and (max-width: 1023px){
  .menu--main-vignette ul.menu, 
  .menu--animations-vignette ul.menu, 
  .menu--vignettes-marine ul.menu, 
  .menu--vignettes-marine-guadeloupe ul.menu, 
  .menu--vignettes-marine-saint-mart ul.menu, 
  .menu--animation-vignette ul.menu{
    grid-template-columns: 1fr 1fr;
  }
}