/******* Rift index page de presentation *******/
 
/***** Affichage index.php *****/
.menuBody { 
margin-top: 60px; border-top:none;  padding: 25px 50px; 
}
.flex-container {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
margin-bottom: 5%; 
}
.flex-container > div { 
}

/***** Image *****/
.image-container {
width: 60%; text-align: right;
}
img {
min-width: 100%; max-width: 100%; box-shadow: 10px 10px 5px #aaaaaa;
}

/***** Presentation site *****/
h1 {
font-size: 1.5em; letter-spacing: -0.07em; line-height: 1em; color: #242323; 
}
.presentationSite {
width: 30%; text-align: center; line-height: 1.3em; 
}
.creerSite > a {
text-decoration: none; color: #fff; line-height: 1.5em; font-weight: 700;
cursor: pointer; font-size: 1.2em; letter-spacing: -0.07em; 
}
.creerSite  a:hover {
font-size: 1.3em;
}

/***** Presentation detaillee *****/
.presentation-container {
margin: 5% 0; padding: 5% 5vw; border: 1px solid #d6dcdc;
line-height: 1.3em; background: #f9f9f9;  
}
.checkmark_list {
width: 90%; margin: auto; padding: 5% 5vw; background: #fff; border: 1px solid #d6dcdc; 
}
.titre2 {
font-size: 1.4em; font-weight: 600; letter-spacing: -0.07em; line-height: 1.2em; 
}
.checkmark {
color: white; font-weight: bold; margin-right: 10px; background: #e6a800;
padding: 2px 8px; border-radius: 50%; font-size: 0.9em; letter-spacing: -0.035em; 
}
.presentation-container > .checkmark_list > a {
text-decoration: none; color: #e6a800; font-size: 1.1em; letter-spacing: -0.035em; font-weight: 600; line-height: 1.6;  
}
.presentation-container a:hover { font-size: 1.2em;  }
.domaine { font-size: 15px; line-height: 1.3; color: #606060; }
.creerSite {
padding: 7px 30px 8px 30px; margin: 20px 0 0px 0;
text-align: center; background-color: #e6a800; border:none; border-radius: 5px;
}

/***** images 2 et 3 *****/
.flex-container2 {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: 5vh 0; padding: 2vh 2vw;  border: 1px solid #d6dcdc;
}
.flex-container2 > div {
width: 50%; padding: 2vh 2vw;
}

/***** Image2 *****/
.image-container2 { 

}
img {
max-width: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*************************************************
*********** CSS responsive telephone *************
**************************************************/
@media screen and (min-width: 800px) and (max-width: 1000px) {
#EntetePC {  
padding: 15px 15px ;
}
h1 {
font-size: 1.5em; 
}
.creerSite > a {
font-size: 1em;
}
.creerSite  a:hover {
font-size: 1.1em;
}
}

@media only screen and (max-width: 800px) { 
/***** Entete *****/
#EntetePC { display: none; }
#EnteteMobile {
display: block; position: fixed; top: 0; height: 60px; width: 100vw; margin: 0; padding: 15px 20px;  
border: none; background: #fcfbfa; z-index: 2; border-bottom: 1px solid #d6dcdc;
}
.nom_site_mobile a {
text-decoration: none; font-size: 25px; color: #242323; letter-spacing: -0.07em; line-height: 1.1;
}
#EnteteMobile #openNav {float:right;}
.navIcon {
 width: 27px; height: 2px; margin: 3px 0; cursor:pointer; background-color: #242323;
 }
.openNavMenu {
 font-size: 10px; color: #242323; letter-spacing: -0.07em; line-height: 1;
 }
#openNav {
cursor:pointer; padding-top: 4px;
}

/***** Menu *****/
.menu {
display: block; list-style-type: none;  border: none; 
}
ul {
background: #fff;
}
li {
  float: none;
}
.overlay > .overlay-content >  .menu > li { border: none; }
.overlay {
height: 100vh; width: 0; position: fixed; z-index: 3;  top: 0;  left: 0;  background-color: #fff;
overflow-x: hidden;  transition: 0.5s;  padding: 0; margin: 0;
}
.overlay-content {
position: relative; width: 80vw; top: 15vh; margin: 0vh 5vw; padding: 0;
}
.overlay a, .overlay a:visited, .overlay a:active, .closebtn { 
display: block; transition: 0.3s;	border-bottom: 1px solid #d6dcdc; padding: 3vh 0;
text-decoration: none;  color: #242323; line-height: 1.625;
cursor:pointer; text-align: left;
}
.closebtn {
 border: none;
}
.overlay a:hover, .overlay a:focus, .closebtn:hover, .closebtn:focus {
 color: #e8b01a;
}
.overlay .closebtn {
 position: absolute;  top: 0px; right: 10vw; font-size: 1.6em;  color: #242323;
}

/***** Affichage index.php *****/
.menuBody { 
margin-top: 60px; border-top:none; padding: 15px 10px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-container > div {
 width: 100%; margin-bottom: 10%; margin-top: 10%;
}

/***** Image *****/
.image-container {
width: 100%; text-align: right; 
}
img {
min-width: 100%; max-width: 100%; 
}

/***** Presentation site *****/
h1 {
font-size: 1.4em; letter-spacing: -0.07em; line-height: 1em; color: #242323; 
}
.presentationSite {
width: 100%; line-height: 1.1em; text-align: center; 
}
.checkmark_list {
width: 100%; margin: auto; padding: 15px 10px; background: #fff; border: 1px solid #d6dcdc; 
}
.creerSite > a {
text-decoration: none; color: #fff; line-height: 1.6em; font-weight: 700;
cursor: pointer; font-size: 1em; letter-spacing: -0.07em; 
}
.creerSite  a:hover {
font-size: 1.3em;
}
.flex-container2 {
/***** flex reverse flex-direction: column; *****/
display: flex;flex-direction: column-reverse;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center; border: none;
}
.flex-container2 > div { 
 width: 100%; margin-bottom: 10%; margin-top: 10%;
}

/***** Image2 *****/
.image-container2 {
width: 100%; text-align: center; 
}
img {
min-width: 100%; max-width: 100%; 
}

/***** Presentation detaillee *****/
.presentation-container {
width: 100%; line-height: 1.3em; text-align: left; padding: 0; border: none; border-radius: 10px;  font-size: 1.1em; 
}
.titre2 {
font-size: 1.4em; letter-spacing: -0.07em; line-height: 1.2em; color: #242323; 
}
.checkmark {
color: white; font-weight: bold; margin-right: 10px; background: #e6a800;
padding: 1px 4px; border-radius: 50%; font-size: 0.9em; letter-spacing: -0.035em; 
}
.presentation-container > a {
text-decoration: none; color: #e6a800; font-size: 1em; letter-spacing: -0.035em; font-weight: 600; line-height: 1.6;  
}
.presentation-container a:hover { font-size: 1.2em;  }
.domaine { font-size: 13px; line-height: 1.1;  }
.creerSite {
padding: 7px 30px 8px 30px; margin: 20px 0 0px 0;
text-align: center; background-color: #e6a800; border:none; border-radius: 5px;
}
#piedsPage {
text-align: center;letter-spacing: -0.035em; line-height: 1.6; color: #fff;
margin: 0; padding: 5px 0; background-color: #242323; 
}

}