/****************** SPLASH *******************/


section.splash {
height: 100vh;
background-color: #f8f4f1;
}


a:hover {
  text-decoration: none;
  box-shadow: 0px 0px 0px 0px;
}

div#desc a {
  color : #ffffff !important;

    text-transform: lowercase;}


/****************** FOOTER *******************/

footer {
height: 150vh;
background-color: #f8f4f1;
}

footer a {
    color: #14808C;
}

footer a:hover {
    color: #033A40;
}



footer iframe {
height : 400px;
}


footer strong {
  color: #14808C;
  font-size: 25px;


}

footer div.titre {
  padding: 55px 55px 0px 55px;
  float:left;
}

footer h2 {
  font-size : 24px;
  color : black;
}

@media only screen and (max-width: 770px) {

  .slider{
    height: 400px;
    margin-top : 35px !important;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    .cards {
      flex: 1 1 auto;
    } ;
  }

.footer {
  display: none;
}

.premiere-cards {margin-left: 30px;
}

}

@media only screen and (min-width: 771px) {

  .slider{
    width : 834px;
    margin :auto;

  }

  .cards {
    min-height: 370px;
  }

  .fin-slide {
    display: none;
  }

}





.slider-tag{
  padding-bottom: 8px;
  margin-bottom: 10px;
  display: flex;
  width : 240px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  .tag {
    flex: 1 1 auto;
  } ;
}

.cards {
  float : left;
  margin : 15px 5px 15px 15px;
  width : 248px;
  background-color : #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.07);
}


.tag {
  /*margin-right : 3px;*/
  opacity : 0.8;
  background-color : #F1F1F1;
  color : black;
  border-radius: 50px;
  font-weight: 400;
  font-size: 9px;
  padding : 8px;
  margin-right: 5px;

}

.cards h2{
  margin:0;
  font-size : 18px;
  font-weight : 500; 
}

.cards p {
  font-weight : 400;
  font-size: 12px;
  opacity : 0.6;;
}

.cards a {
  font-size : 12px;
}

.img-cards{
    height: 165px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}

.content-cards{
  padding : 15px 18px 5px 18px;
}

.bouton-zone{
  padding : 0px 15px 5px 15px;
}

.bouton-zone a{
  font-weight: 400;
  margin :0;
  padding : 0;
  text-transform: uppercase;
  float: left;

}

a.principal{
  color : #fff !important;
  border-radius: 3px;
  padding : 6px;

}

a.secondaire{
  border-radius: 3px;
  padding : 6px;

}

.fin-slide, .fin-slide-home {
  height: 400px; 
  width: 218px; 
}


.slider-point {
width : 100%;
height : 85vh;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;

  .cards-feed {
    flex: 1 1 auto;
  }

}

.cards-feed {
float : left;
min-width : 350px !important;
height : 84vh;
padding : 25px;
margin:  25px 15px 25px 30px !important;}


.title-col {
  width : 100%; 
  float: left;"

}

.title-col h2{
  font-weight : 500;
margin : -5px 0px 20px 0px;
 width:200px; float : left;"

}

.voir-plus {
  font-size : 15px;
  text-align : right; 
  width : 145px; 
  margin-top : 7px;
  float : left; 

}


.voir-plus a{
  font-size : 15px;
  padding : 7px 15px 7px 15px;
  border-radius : 50px;
  border : 1px solid black;
}

.voir-plus a:hover{
  color : blue;
  border : 1px solid blue;
}

.title-col img{
height : 20px;
margin-bottom : 5px;

}



/****************** FRANCE *******************/

.france{
position: absolute;
text-align: right;
top: -100px;
right: 0px;
height: 750px;
border: 0px solid black;
}

.france svg{
  height:650px;
}

.france .pointer {
    cursor: pointer;
  text-align: center;
    width: auto;

}

.france.pointer a, .france.pointer label a {
  cursor: pointer;
}

.france .pointer svg{
  height:35px;
}




.france .pointer label{
    cursor: pointer;

      display: block;
margin-top: 2px;
  background-color : #14808C;
  padding: 3px 5px;
  color: white;
  transition: background-color 0.7s;
}


.france .pointer label:hover{
  background-color:#033A40;
}

.france .pointer.chausey{
  position: absolute;
  top : 120px;
  right: 460px;
}

.france .pointer.stm {
  position: absolute;
  top : 450px;
  right: 45px;
}

.france .pointer.vallee {
  position: absolute;
  top : 360px;
  right: 35px;
}


.france .pointer.labathude {
  position: absolute;
  top : 280px;
  right: 255px;
}

.france .pointer.sylvanes {
  position: absolute;
  top : 455px;
  right: 248px;
}


.france .pointer.mirecourt {
  position: absolute;
  top : 165px;
  right: 98px;
}



/****************** FRANCE POUR MOBILE *******************/

@media only screen  and (max-width: 770px){

section.splash {
height: 1200px;

}
.france {
overflow-y: scroll;
top: 470px;
right: 0;
}

.uk-section {
  position: absolute;
  top: 300px !important;}


#desc {
    width: 100vw;}

  .container iframe {

    margin: 5vmax;
    width: 78vw !important;  
    float: right;}




}


/****************** SLIDER *******************/


.uk-card-primary.uk-card-hover {
 background-color: #14808C;
transition: background-color 0.3s, background 0.3s;
}
.uk-card-primary.uk-card-hover:hover {
    box-shadow: 0px 0px 0px 0px;
   background-color:#033A40;
}


.uk-section {
  position : absolute;
  width:100vw;
  top : calc(100vh - 320px);
}


.owl-carousel {
  position: relative;
  margin-top: 30px;
}
.owl-nav {
  position: absolute;
  top: -60px;
  left: 10px;
}
.uk-card-primary {
  padding: 25px;
  border-radius: 1px;
  box-shadow: 0px 0px 0px 0px;
}
h3 {
  margin-top: 5px;
  padding :0;
}

h3.uk-card-title {
    color:#fff;
    font-size: 20px;
    opacity: 1;
    padding-bottom: 0px;
    font-weight: 500;
    font-family:'gilroy', sans-serif ;
}

.uk-card > :last-child {
  margin-top:0;
  margin-bottom: 10px
}
p {
  margin-top: 5px;
  margin-bottom: 15px;
}
.owl-next {
  background: #3286f0;
}
.owl-theme .owl-nav [class*='owl-'] {
  background: #383838;
}
.owl-dots {
  margin-top: 20px;
}
.uk-card-title {
  padding-bottom: 20px
}


/****************** HERITAGE *******************/





body {
    font-family: 'gilroy', sans-serif !important;
    font-weight: 500;
    width : 100vw;
    margin : 0;
}

@font-face{font-family:gilroy;src:url("https://d33wubrfki0l68.cloudfront.net/40ef73f4cafb82b89f451e434d86ccd2fa8de8dd/2aae3/_nuxt/fonts/151d9a1.woff2") 
format("woff2"),url("https://d33wubrfki0l68.cloudfront.net/7960861bd85d181bd3ff1abd77d55791d05c83e4/d6b4c/_nuxt/fonts/7d5dc17.woff") format("woff");
font-weight:500;
font-style: normal;
font-display: swap;}

@font-face{font-family:gilroy;
    src:url("https://d33wubrfki0l68.cloudfront.net/fd45bc0993c6f1a2711ddb634fb2da14f9d4a6f6/27c63/_nuxt/fonts/5784ee0.woff2") format("woff2"),
    url("https://d33wubrfki0l68.cloudfront.net/ed438e7b1d29108d2e36ac7eaaf810d98604a31e/20ed3/_nuxt/fonts/f8ac8bc.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:gilroy;src:url("https://d33wubrfki0l68.cloudfront.net/9185a62609dc08be229932d6840c078563ea3a62/d10a2/_nuxt/fonts/d5b92fa.woff2") format("woff2"),
    url("https://d33wubrfki0l68.cloudfront.net/e7e72722332c7b79a975e183710b822c70733a40/b482c/_nuxt/fonts/32750b0.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:gilroy;src:url("https://d33wubrfki0l68.cloudfront.net/f2787f6b5f8accace28f781bc9c48a6549ca8758/64535/_nuxt/fonts/2886dfd.woff2") format("woff2"),
url("https://d33wubrfki0l68.cloudfront.net/c882fc1c649492c2f8a551b636e465668e595b09/2744f/_nuxt/fonts/6171e2e.woff") format("woff"); font-weight:700;font-style:italic;font-display:swap}


h1, h2, h3{
      font-family: 'gilroy', sans-serif !important;
margin : 0;
color: #fff;
font-weight : 100;}

h1 {
background-color : white;
height : 100px;
width : 100px;
font-size : 38px;}

h2 {
font-size : 50px;
line-height: 50px;}

h3 {
opacity : 0.5;
padding : 0px;
margin : 0px;
margin-top : -15px;}


.container {
padding-top: 10vh;
height: 90vh;
width : 100vw;
color : white;
text-transform : uppercase;
font-weight : 100;
}

.container iframe{
margin : 5vmax;
width : 60vw;
height : 60vmin;
float : right;
}


#desc {
float : left; 
width : 25vmax;
margin : 5vw 0vw 0vw 5vw;}

#chausey {
background: linear-gradient(/*rgba(234, 234, 234, 0.65)*/ rgba(130, 192, 174,0.7), rgba(130, 192, 174,0.7)), 
          url('../images/card-chausey.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#chausey H1{
text-align: center;
line-height : 100px;
color : #82c0ae;}

#observatoire {
background: linear-gradient(/*rgba(234, 234, 234, 0.65)*/ rgba(172, 143, 201,0.7), rgba(172, 143, 201,0.7)), 
          url('../images/card-observatoire.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#observatoire H1{
text-align: center;
line-height : 100px;
color : #ac8fc9;}

#observatoire H2{
font-size: 43px;}

#valleeetroite {
background: linear-gradient(rgba(128, 110, 78,0.7), rgba(128, 110, 78,0.7)), 
          url('../images/card-valleeetroite.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#valleeetroite H1{
text-align: center;
line-height : 100px;
color : #806e4e;}

#labathude {
background: linear-gradient(rgba(209, 98, 98, 0.7), rgba(209, 98, 98, 0.7)), 
          url('../images/card-labathude.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#labathude H1{
text-align: center;
line-height : 100px;
color : #d16262;}

#labastidette {
background: linear-gradient(rgba(55, 192, 203, 0.7), rgba(55, 192, 203, 0.7)), 
          url('../images/card-labastidette.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#labastidette H1{
text-align: center;
line-height : 100px;
color : #37c0cb;}

#sylvanes {
background: linear-gradient(rgba(198, 130, 59, 0.7), rgba(198, 130, 59, 0.7)), 
          url('../images/card-sylvanes.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#sylvanes H1{
text-align: center;
line-height : 100px;
color : #c6823b;}

#sylvanes H2{
font-size: 43px;}

#mirecourt {
background: linear-gradient(rgba(118, 178, 102, 0.7), rgba(118, 178, 102, 0.7)), 
          url('../images/card-mirecourt.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#mirecourt H1{
text-align: center;
line-height : 100px;
color : #76b266;}

#paramelle {
background: linear-gradient(rgba(106, 113, 185, 0.7), rgba(106, 113, 185, 0.7)), 
          url('../images/card-paramelle.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#paramelle H1{
text-align: center;
line-height : 100px;
color : #6a71b9;}

#fumat {
background: linear-gradient(rgba(200, 115, 115, 0.7), rgba(200, 115, 115, 0.7)), 
          url('../images/card-fumat.png');
background-position : 0% 0%;
background-size : cover;
background-repeat : no-repeat;
background-attachment: fixed;}

#fumat H1{
text-align: center;
line-height : 100px;
color : #c87373;}


#mentions {
margin-top: 12vh;
font-weight: 100;
color : white;
opacity : 0.6;
text-align: center;
font-size : 12px;}



.bloc-marque {
min-width: 300px;
max-width: 30vw;
float: left;
padding :40px;
/*border: 1px solid red;*/
}

.bloc-marque img{
    width : 140px;
}

.bloc-marque p {
    padding-left : 12px;
    line-height: :em;
}