@CHARSET "ISO-8859-1";
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
html, body {
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}
a {
  text-decoration: none;
}

/* Les typos */
@font-face {
  font-family: "SangBleuRepublicMedium";
  src: url("../fonts/SangBleuRepublic-Medium-WebXL.eot");
  src: url("../fonts/SangBleuRepublic-Medium-WebXL.woff") format("woff"),
  url("../fonts/SangBleuRepublic-Medium-WebXL.ttf") format("opentype"),
  url("../fonts/SangBleuRepublic-Medium-WebXL.svg#filename") format("svg");
}
@font-face {
  font-family: "SangBleuRepublicRegular";
  src: url("../fonts/SangBleuRepublic-Regular-WebXL.eot");
  src: url("../fonts/SangBleuRepublic-Regular-WebXL.woff") format("woff"),
  url("../fonts/SangBleuRepublic-Regular-WebXL.ttf") format("opentype"),
  url("../fonts/SangBleuRepublic-Regular-WebXL.svg#filename") format("svg");
}
@font-face {
  font-family: "SangBleuRepublicRegularItalic";
  src: url("../fonts/SangBleuKingdom-RegularItalic-WebXL.eot");
  src: url("../fonts/SangBleuKingdom-RegularItalic-WebXL.woff") format("woff"),
  url("../fonts/SangBleuKingdom-RegularItalic-WebXL.ttf") format("opentype"),
  url("../fonts/SangBleuKingdom-RegularItalic-WebXL.svg#filename") format("svg");
}
@font-face {
  font-family: "SangBleuKingdom";
  src: url("../fonts/SangBleuKingdom-Regular-WebM.eot");
  src: url("../fonts/SangBleuKingdom-Regular-WebM.woff") format("woff"),
  url("../fonts/SangBleuKingdom-Regular-WebM.ttf") format("opentype"),
  url("../fonts/SangBleuKingdom-Regular-WebM.svg#filename") format("svg");
}
@font-face {
  font-family: "SangBleuSunriseRegular";
  src: url("../fonts/SangBleuSunrise-Regular-WebM.eot");
  src: url("../fonts/SangBleuSunrise-Regular-WebM.woff") format("woff"),
  url("../fonts/SangBleuSunrise-Regular-WebM.ttf") format("opentype"),
  url("../fonts/SangBleuSunrise-Regular-WebM.svg") format("svg");
}

/* Scrollbar */
#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #FDFDFD;
}
#style-1::-webkit-scrollbar
{
  width: 6px;
  background-color: #FDFDFD;
}
#style-1::-webkit-scrollbar-thumb
{
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #000000;
}

/* TEXTES */
p {
  color: #000;
  text-align: left;
  font-family: 'SangBleuRepublicRegular';
  font-size: 1.7vw;
  padding-bottom: 8%;
}
.menu h1 {
  font-family: 'SangBleuRepublicRegular', sans-serif;
  font-size: 2.5vw;
}
h1, h2 {
  font-family: 'SangBleuKingdom', sans-serif;
  font-size: 2vw;
}
h2 {
  font-family: 'SangBleuRepublicRegularItalic';
  font-size: 1.3vw;
}
.description h1 {
  font-family: 'SangBleuRepublicMedium';
  font-size: 2.7vw;
  margin-top: 15%;
  padding-bottom: 2%;
  color: #000;
}
.description h2 {
  position:absolute;
  bottom:0;
  padding-bottom: 3%;
  background-color: #fff;
  width: 20%;
  padding: 13px;
  border: 3px dotted #000;
  border-radius: 30px; 
  margin-bottom: 3%;
}
.description h3 {
  font-family: 'SangBleuRepublicMedium';
  font-size: 1.9vw;
  margin-top: 10%;
  padding-bottom: 0%;
  color: #000;
}
.liens {
  color: #8ba3ba;
}


/* Menu */
.menu li {
  color: #000;
  background:#fff;
}
.menu li.active {
  background:#fff;
  color: #fff;
}
nav {
  display: block;
  position:absolute;
  width: 100%;
  top:0;
  left:0;
  z-index: 70;
  padding: 0;
  margin:0;
}
nav li {
  display:inline-block;
  margin-left: 1vw;
  margin-right: 1vw;
  color: #000;
}
nav li.active {
}
nav li a {
  color:#FFF;
  text-decoration:none;
  color:#000;
}
nav li.active a {
  padding:0;
  display:block;
  color: #000;
}
nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0;
  padding-top: 0;
  font-family: 'SangBleuSunriseRegular', sans-serif;
  font-size: 1vw;
  background-color: #FFF;
}
nav li a:hover {
  color:black;
  font-style:none;
  font-weight: 1000;
}
nav li .menu a:hover {
}
nav ul li {
    list-style: none;
    flex-grow: 1;
    text-align: center;
}
nav ul li a {
    display: block;
}
.menugauche {
  text-align: left;
  margin-left: 2.7vw;
}
.menudroit {
  margin-right: 2.7vw;
}


/* PAGE CONTACT */
.body2 {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #F4FEED;
}
a {
  color: #497471;
}  
.menutop-contact ul li a {
  background-color: #F4FEED;
}
.menutop-contact li {
  background-color: #F4FEED;
}
.menutop-contact li a {
  color: #497471;
}
.menutop-contact li.active a {
  color: #497471;
}
.menutop-contact ul{
  background-color: #F4FEED;
}
.menutop-contact li.active {
  background-color: #F4FEED;
}
.container-contact {
  background-color: #F4FEED;
}
.desctiption-contact {
  background: #F4FEED;
  width: 60%;
  height: 100%;
  padding-right: 2%;
  float: left;
}
.desctiption-contact2 {
  background: #F4FEED;
  width: 35%;
  height: 100%;
  padding-right: 2%;
  margin-left: 1.5%;
  float: left;
}
.desctiption-contact h1 {
  color: #497471;
  font-family: 'SangBleuRepublicRegular';
  font-size: 2.5vw;
  margin-top: 10%;
  padding-left: 4%;
}
.desctiption-contact p {
  color: #497471;
  font-family: 'SangBleuKingdom';
  font-size: 2.5vw;
  padding-left: 4%;
  margin-top: 7%;
}
.desctiption-contact2 {
  width: 35%;
  height: auto;
  padding-top: 5%;
}
.desctiption-contact2 p {
  color: #497471;
  font-family: 'SangBleuKingdom';
  font-size: 1.9vw;
  padding-left: 10%;
}
.desctiption-contact2 h3 {
  color: #497471;
  font-family: 'SangBleuKingdom';
  font-size: 2.5vw;
  margin-top: 2.5%;
  padding-left: 10%;
  padding-bottom: 5%;
}
.desctiption-contact2 h4 {
  color: #497471;
  font-family: 'SangBleuKingdom';
  font-size: 2.5vw;
  margin-top: 3%;
  padding-left: 10%;
  padding-bottom: 5%;
}
#style-2::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
  border-radius: 10px;
  background-color: #F4FEED;
}
#style-2::-webkit-scrollbar
{
  width: 6px;
  background-color: #F4FEED;
}
#style-2::-webkit-scrollbar-thumb
{
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
  background-color: #F4FEED;
}


/* Galerie d'images */
.imagescentre {
  width: 100%;
  height: 100%;
  float: left;
  padding-right: 1.5%;
  padding-left: 1.5%;
  padding-top: 6.25%;
}
img {
  border: 0;
  display: block;
  width: 100%;
}
.grid {
  max-width: 6000px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  background: #fff;
}
.grid .item {
  display: block;
  float: left;
  padding-right: 1.5%;
  padding-left: 1.5%;
  padding-bottom: 3%;
  width: 33.333%;
  opacity: 1;
}
.grid .item2 {
  width: 66.666%;
}
.grid .item3 {
  width: 100%;
}
.grid .item a,.grid .item img {
  outline: none;
  border: none;
  display: block;
  max-width: 100%;
}
video {
  float: left;
  display: block;
  max-width: 100%;
}

/* Fond fac */
.fac {
  background: url(../images/fac/background2.gif);
}

/* Barre blanche bas */
.blancfix {
  position: fixed;
  background: #fff;
  width: 100%;
  height: 5.4%;
  bottom: 0;
}


/* Carousel flickity */
.carousel {
  background: #fff;
  height: 100%;
  width: 63.7%;
  float: left;
  padding-top: 1.5%; /* coins ronds */
}
.carousel-cell {
  width: 100%; /* full width */
  height: 100%; /* height of carousel */
  background: #fff;
  text-align: center;
  counter-increment: carousel-cell;
}
.flickity-page-dots {
  bottom: 5%;
}
.carousel-cell img {
  right: 0;
  bottom: 0;
  top:0;
  right:0;
  width: 101%;
  height: 101%;
  background-size: 100% 100%;
  background-color: white; /* in case the video doesn't fit the whole page*/
  background-position: center center;
  background-size: contain;
  object-fit: cover; /*cover video background */
  z-index:300;
}
.carousel-cell .video {
  right: 0;
  bottom: 0;
  top:0;
  right:0;
  width: 102%;
  height: 102%;
  background-size: 100% 100%;
  background-color: white; 
  background-position: center center;
  background-size: contain;
  object-fit: cover; 
  z-index:300;
}
/* coins ronds */
.item img {
  border-radius: 30px; 
}
/* fade transition effect */
.flickity-slider {
}
.carousel-cell {
  left: 0 !important;
  opacity: 0.01;
  transition: opacity 0.8s ease-in-out;
  z-index: -1;
}
.carousel-cell.is-selected {
  opacity: 1;
  z-index: 0
}


/* Container */
.container {
  width: 100%;
  height: 100%;
  padding-top: 4.8%;
  margin: auto;
  overflow: hidden;
  padding-left: 3%;
  padding-bottom: 3%;
}

/* Texte de description du projet */
.description {
  background: #fff;
  width: 33%;
  height: 100%;
  padding-left: 2%;
  padding-right: 2%;
  margin-left: 1.5%;
  float: left;
}




/* AUTRES SUPPORTS */
@media all and (max-width: 1000px) and (min-width: 768px) {
  .grid .item {width: 50%;}
  .grid > .item {width: 50%;}
  .blancfix {height: 3%;}
}

/* AUTRES SUPPORTS / IPHONE */
@media all and (max-width: 768px) and (min-width: 0px) {
  .grid .item {width: 100%;}
  .grid > .item {width: 100%;}
  .imagescentre {width: 100%;}
  .description {
    width: 100%;
    height: auto;
    padding-left: 0%;
    margin-left: 0%;
    padding-right: 0%;
  }
  .carousel {
    width: 100%;
    height: 85%;
  }
  .container {
    overflow:visible;
    padding: 3%;
    padding-top: 11.8%;
    padding-bottom: 20%;
  }
  .imagescentre {
  padding-top: 13%;
}
  .menu h1 {font-size: 4vw;
}
p {
  font-size: 3.8vw;
  padding-bottom: 6%;
  width: 95%;
}
.menu h1 {
  font-size: 5vw;
}
h2 {
  font-size: 3vw;
  padding-bottom: 10%;
  width: 60%;
}
.description h1 {
  font-size: 4.5vw;
  margin-top: 7%;
  padding-bottom: 0%;
}
.description h2 {
  position: relative;
  width: 80%;
}
  .blancfix {height: 1.8%;
}

/* PAGE CONTACT */
.desctiption-contact {
  width: 100%;
  height: auto;
  padding-right: 2%;
  float: left;
}
.desctiption-contact2 {
  width: 100%;
  height: auto;
  padding-right: 2%;
  margin-left: 1.5%;
  float: left;
  padding-right: 0%;
}
.desctiption-contact h1 {
  font-size: 4.7vw;
  margin-top: 5%;
  padding-left: 4%;
}
.desctiption-contact p {
  font-size: 4.6vw;
  padding-left: 4%;
  margin-top: 7%;
}
.desctiption-contact2 {
  width: 100%;
  height: auto;
}
.desctiption-contact2 p {
  font-size: 4.6vw;
  padding-left: 4%;
}
.desctiption-contact2 h3 {
  font-size: 4.6vw;
  padding-left: 4%;
  padding-bottom: 5%;
  margin-top: -12%;
}
.desctiption-contact2 h4 {
  font-size: 4.6vw;
  padding-left: 4%;
  padding-bottom: 5%;
}

}