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

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/P-M-A-Sat%20Antilles%20Guyane_1.png);       
    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: 200px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/default/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-234,
  ul.menu li.menu-icon-234 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/Reseau%20climatique%20releves.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: 200px;
   
    display: block;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;

    display: flex;

    background-image: url(/sites/default/files/menu_icons/pluie_extreme_pf.png);       
    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-250,
  ul.menu li.menu-icon-250 {
    

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

    display: flex;

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

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

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

  a.menu-icon-250,
  ul.links li.menu-icon-250 a,
  ul.menu li.menu-icon-250 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-251,
  ul.menu li.menu-icon-251 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/isofronts.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-251,
  ul.links li.menu-icon-251 a,
  ul.menu li.menu-icon-251 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-252,
  ul.menu li.menu-icon-252 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/ModeleV2_vignette.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-252,
  ul.links li.menu-icon-252 a,
  ul.menu li.menu-icon-252 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-253,
  ul.menu li.menu-icon-253 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/Polynesie_vignette_4.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-253,
  ul.links li.menu-icon-253 a,
  ul.menu li.menu-icon-253 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-273,
  ul.menu li.menu-icon-273 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/Polynesie_vignette_3.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-273,
  ul.links li.menu-icon-273 a,
  ul.menu li.menu-icon-273 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-276,
  ul.menu li.menu-icon-276 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/PacifiqueSud_vignette_1.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-276,
  ul.links li.menu-icon-276 a,
  ul.menu li.menu-icon-276 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-277,
  ul.menu li.menu-icon-277 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/Polynesie_vignette_1.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-277,
  ul.links li.menu-icon-277 a,
  ul.menu li.menu-icon-277 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-278,
  ul.menu li.menu-icon-278 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/Polynesie_vignette_2.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-278,
  ul.links li.menu-icon-278 a,
  ul.menu li.menu-icon-278 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-279,
  ul.menu li.menu-icon-279 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/IsoFront_vignette_0.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-279,
  ul.links li.menu-icon-279 a,
  ul.menu li.menu-icon-279 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-295,
  ul.menu li.menu-icon-295 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/vignette_IDV.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-295,
  ul.links li.menu-icon-295 a,
  ul.menu li.menu-icon-295 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-296,
  ul.menu li.menu-icon-296 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/Vignette_Tahiti.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-296,
  ul.links li.menu-icon-296 a,
  ul.menu li.menu-icon-296 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-297,
  ul.menu li.menu-icon-297 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/VIgnette_moorea.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-297,
  ul.links li.menu-icon-297 a,
  ul.menu li.menu-icon-297 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-306,
  ul.menu li.menu-icon-306 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/sattelite_pacifique.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-306,
  ul.links li.menu-icon-306 a,
  ul.menu li.menu-icon-306 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-309,
  ul.menu li.menu-icon-309 {
    

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

    display: flex;

    background-image: url(/sites/default/files/menu_icons/PacifiqueSud_vignette_3.png);       
    background-repeat: no-repeat;
    background-position: center;

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

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

  a.menu-icon-309,
  ul.links li.menu-icon-309 a,
  ul.menu li.menu-icon-309 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;
  margin-bottom: 30px;
}

@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;
  }
}