/* Installation de la police du site */
@font-face {
	font-family: 'myFont';
	src: url('CrayonLibre.ttf') format('ttf'),
		url('CrayonLibre.ttf') format('truetype');
}

* {
  box-sizing: border-box;
  max-width : 100%;
  margin: auto;
}

html {
	position: static;
	font-family: myFont, cursive;
}

p {
	text-align:justify;
}

body {
  position: static;
  display: block;
  text-align: justify;
  background: #ffffff url("../img/fond_foret.jpg") no-repeat fixed left top;
  background-size: cover;
}

a{
	color: black;
	text-decoration: none;
	outline: none;
}

h1 {
  font-size: 8vh;
}

h3{
	font-size:4vh;
	font-weight: normal;
}

.header {
  padding: 3% 3% 0% 3%;
  text-align: center;
  background:rgba(190,190,190,0.4) ;
  display: flex;
  flex-wrap:wrap;
}
.logo_right img{
	float: right;
	width:50%;
	transform: scaleX(-1);
	transition: all 0.3s;
}
.logo_left img{
	float: left;
	width:50%;
	transition: all 0.3s;
}
.logo_left img:hover{
	transform: scaleX(-1);
}
.logo_right img:hover{
	transform: scaleX(1);
}
.logo_right, .logo_left{
	width:20%;
}
.titles{
	width:60%;
}

.quote{ 
	width:100%;
	float:right;
	text-align:right;
	font-size:2vh;
}
/* Style the top navigation bar */
nav {
  overflow: hidden;
  background:rgba(98,49,0,0.6);
}

/* Style the topnav links */
nav a {
  float: left;
  font-size: 1.5em;
  color: #f2f2f2;
  text-align: center;
  padding: 2vh 2vw;
  text-decoration: none;
  transition: all 0.5s;
  cursor: pointer;
  background:rgba(0,0,0,0);
  outline: none;
  margin: 0;
}

/* Dégradé au survol du lien du menu */
nav a:hover {
  background: rgba(98,49,0,0.6);
  color: black;
}

/* Bouton de fermeture menu dropdown : caché*/
.closebtn {
  display: none;
}
/*Onglet galerie photo: caché*/
.menu_gallery{
	display:none;
}
 /*menu dropdown: caché*/
.openmenu {
	cursor:pointer;
	display:none;
}
/* Corps du site */
.corpus{
	display:block;
	overflow:auto;
	background: rgba(255,255,255,0.5);
	border-bottom-left-radius:6vh;
	border-bottom-right-radius:6vh;
}
/* Colonne principale : 75% */
.leftcolumn {  
  padding:0 5vh 1vh 5vh;
  float: left;
  width: 75%; 
}
.leftcolumn img{
  display: block;
  width: auto;
  height: auto;
}	
/* Colonne de droite : 25% */
.rightcolumn {
  padding:0 2vh 1vh 0;
  float: right; 
  width: 25%;
}
.rightcolumn img{
  display: block;
  width: auto;
  height: auto;
}
/* Fake image: images centrées dans le div: 1/3 du contenant, flottant à gauche */
.fakeimg, .fakeimg2 {
  display:flex;
  max-width: 33%;
  max-height:33%;
  float: left;
  align-items: center;				
  justify-content: center;
}
/* Une marge à droite de l'image pour décaler le texte*/
.fakeimg {  
	margin-right:1vw;	
}
/* Pas de marge: on empile 3 images dans le container */
.fakeimg2 {	 
	background: rgba(0,0,0,0.4);
	height:25vh;
	overflow:clip;
}

/* articles */
.card {
  display:block;
  background: rgba(255,255,255,0.5);
  padding: 2vh;
  margin-top: 2vh;
  border-radius: 2vh;
}
.card a, .card_main a{
	color: blue;
	text-decoration: underline;
	outline: plain;
}
.card:after {
  content: "";
  display: block;
  clear: both;
}
.card_main {
  display:block;
  background-color: rgba(255,255,255,0.5);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 1vh;
  border-radius: 2vh;
  overflow:auto;
}

.card_main h3 {
  	padding: 1% 1% 1% 1%;
	font-size:4vh;
	font-weight: normal;
}
.card_main img {
	float: left;
	height:100px;
	width:100px;
	border-radius: 50%;
}
.card_main::after {
  content: "";
  clear: both;
  display: table;
}
   
/* Footer */
.footer {
  padding: 1% 5% 5% 5%%;
  text-align: center;
  font-size:6vh;
  background: rgba(240,240,240,0.8);  
  margin-bottom: 1%;
  border-radius:4vh;
  overflow:auto;
}
.boutons{
	  display: flex;
	  justify-content:center;
	  margin: auto;
}

.button {
background: rgba(255,255,255,0.5);
  border-radius: 10px;
  border: 4px double #cccccc;
  color: black;
  text-align: center;
  padding: 20px;
  width: 40%;
  transition: all 0.5s;
  cursor: pointer;
}
.button_0{
	display: flex;
	background: rgba(255,255,255,0.2);
	color: black;
	text-align: center;
	text-decoration:none;
	border:none;
	border-radius:2vh;
	padding: 1%;
	transition: all 0.5s;
	cursor: pointer;
	justify-content:center;
	align-items:center;
	margin-bottom:1%;
}
.button:hover, .button_0:hover{
  background: rgba(240,148,54,0.5); 
  color:brown;
  font-weight: bold;
  }
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 10%;
  font-weight:bold;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
table#contact{
	width: 100%;
	margin: auto;
}

select {
  width: 100%;
  padding: 2% 4%;
  border: 4px lightblue;
  border-style: hidden;
  border-radius: 4px;
  background-color: #f1f1f1;
}
select:focus {
  box-shadow: 0 0 4px 4px lightblue;
}
textarea#message {
	width: 100%;
	height: 200px;
}
.input-text{
	padding: 1%;
    display: block-inline;
	border-radius: 6px;
	border: 1px solid #ccc!important;
    transition: width 0.4s ease-in-out;
	border: 1px solid #ccc;
	width: 50%;
}
.input-text:focus{
    width: 100%!important;
	border: 3px solid blue;
	border-radius: 4px;
	background-color: lightblue;
}




/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> RESPONSIVE LAYOUT : mobile phones <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
@media screen and (max-width: 500px) {
	
	*{
		font-size:3vw;
	}

	h2,h3,a {
		font-size:3vw;
	}
	
	.card_main h3 {
  	padding: 5% 5% 1% 5%;
	font-size:3vw;
	font-weight: normal;
}
	
	.header h4 {
	  font-size: 5vw;
	  font-style: italic;
	}
	/* Création d'un menu "dropdown" */
	.header {
		display:none;
	}
	.footer{
		font-size:4vw;
		padding-left:1vh;
		padding-right:1vh;
	}
	.openmenu {
		display:block;
		text-align:center;
		font-size:4vw;
	}
	.openmenu img{
		width:80%;
		margin: auto;
	}
	.sidenav {
	  height: 100%;
	  width: 0;
	  position: fixed;
	  z-index: 1000;
	  top: 0;
	  left: 0;
	  background: rgba(80,40,0,0.9);
	  overflow-x: hidden;
	  transition: 0.5s;
	  padding-top: 1vh;
	}

	.sidenav a{
		width:100%;
		display:block;
		font-size:5vw;
	}

textarea#message {
	width: 100%;
	height: 100px;
	}

	/*Affichage de la colonne principale uniquement */
	.leftcolumn {   
		width: 100%;
		padding: 0;
	}
	.rightcolumn {
		display:none;
	}
	.logo_right img, .logo_left img{
		display:none;
	}

}

/* GALERIE PHOTO*/

  .slider-container {
        height: 80vh;
        width: 80%;
        position: relative;
        overflow: hidden;
        text-align: center;
		background-color: black;
      }
      .menu {
        position: absolute;
        left: 0;
        z-index: 900;
        width: 100%;
        bottom: 0;
      }
      .menu label {
        cursor: pointer;
        display: inline-block;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50px;
        margin: 0 0.2em 1em;
      }
      .menu label:hover,
      .menu label:focus {
        background: #1c87c9;
      }
	  
	input[name="slides"] {
		display:none;
	}
      .slide {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 1;
        padding: 8em 1em 0;
        background-size: contain;
		background-repeat: no-repeat;
        background-position: 50% 50%;
        transition: left 0s 0.75s;
      }
      [id^="slide"]:checked + .slide {
        left: 0;
        z-index: 10;
        transition: left 0.65s ease-out;
      }
/* AJOUTER ICI LES IMAGES DANS LA GALERIE ¤ */ 

.slide-1 {	background-image: url("../gallery/001.jpg");		}
.slide-2 {	background-image: url("../gallery/002.jpg");		}
.slide-3 {	background-image: url("../gallery/003.jpg");		}
.slide-4 {	background-image: url("../gallery/004.JPG");		}
.slide-5 {	background-image: url("../gallery/005.jpg");		}
.slide-6 {	background-image: url("../gallery/006.jpg");		}
.slide-7 {	background-image: url("../gallery/007.jpg");		}
.slide-8 {	background-image: url("../gallery/008.jpg");		}
.slide-9 {	background-image: url("../gallery/009.jpg");		}
.slide-10 {	background-image: url("../gallery/010.jpg");		}
.slide-11 {	background-image: url("../gallery/011.jpg");		}
.slide-12 {	background-image: url("../gallery/012.jpg");		}
.slide-13 {	background-image: url("../gallery/013.jpg");		}
.slide-14 {	background-image: url("../gallery/014.jpg");		}
.slide-15 {	background-image: url("../gallery/015.jpg");		}
.slide-16 {	background-image: url("../gallery/016.jpg");		}
.slide-17 {	background-image: url("../gallery/017.jpg");		}
.slide-18 {	background-image: url("../gallery/018.jpg");		}
.slide-19 {	background-image: url("../gallery/019.jpg");		}
.slide-20 {	background-image: url("../gallery/020.jpg");		}
.slide-21 {	background-image: url("../gallery/021.jpg");		}
.slide-22 {	background-image: url("../gallery/022.jpg");		}