html, body
	{
		height: 100%;
	}
	
	body
	{
		margin: 0px;
		padding: 0px;
		background: #2066ac;
		background-repeat: no-repeat;
 		background-attachment: fixed;
		font-family: 'Questrial', sans-serif;
		font-size: 12pt;
		color: rgba(0,0,0,.6);
	}
	
	
	h1, h2, h3
	{
		margin: 0;
		padding: 0;
		color: #333333;
		
	}
	
	p, ol, ul
	{
		margin-top: 0;
	}
	
	ol, ul
	{
		padding: 0;
		list-style: none;
	}
	
	p
	{
		line-height: 180%;
	}
	
	strong
	{
		font-weight: normal;
	}
	
	em
	{
		font-style: normal;
	}
	
	a
	{
		color: #333333;
		text-decoration: none;
	}
	
	a:hover
	{
		text-decoration: none;
	}
	

	.container
	{
		margin: 0px auto;
		width: fit-content;
	}
	

/*********************************************************************************/
/* Form Style                                                                    */
/*********************************************************************************/

	form label
	{
		display: block;
		text-align: left;
		margin-bottom: 0.5em;
	}
	
	form .submit
	{
		margin-top: 2em;
		line-height: 1.5em;
		font-size: 1.3em;
	}

	form input.text,
	form select,
	form textarea
	{
		position: relative;
		-webkit-appearance: none;
		display: block;
		border: 0;
		background: #fff;
		background: rgba(255,255,255,0.75);
		width: 100%;
		border-radius: 0.50em;
		margin: 1em 0em;
		padding: 1.50em 1em;
		box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
		border: solid 1px rgba(0,0,0,0.15);
		-moz-transition: all 0.35s ease-in-out;
		-webkit-transition: all 0.35s ease-in-out;
		-o-transition: all 0.35s ease-in-out;
		-ms-transition: all 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
		font-size: 1em;
		outline: none;
	}


	form input.text:focus,
	form select:focus,
	form textarea:focus
	{
		box-shadow: 0 0 2px 1px #E0E0E0;
		background: #fff;
	}
		
	form textarea
	{
		min-height: 12em;
	}

	form .formerize-placeholder
	{
		color: #555 !important; /*Davy's grey*/
	}

	form ::-webkit-input-placeholder
	{
		color: #555 !important; /*Davy's grey*/
	}

	form :-moz-placeholder
	{
		color: #555 !important;
	}

	form ::-moz-placeholder
	{
		color: #555 !important; /*Davy's grey*/
	}

	form :-ms-input-placeholder
	{
		color: #555 !important; /*Davy's grey*/
	}

	form ::-moz-focus-inner
	{
		border: 0;
	}


/*********************************************************************************/
/* Image Style                                                                   */
/*********************************************************************************/

	.image
	{
	  display: inline-block;
	  border: 1px solid rgba(0,0,0,.1);
	  max-width: 100%;
      height: auto;
      width: auto\9; /* ie8 */
	}
	
	.image img
	{
	  display: block;
	  width: 100%;
	  max-width: 100%;
      height: auto;
      width: auto\9; /* ie8 */
	}
	
	.image-full
	{
	  display: block;
	  width: 100%;
	  margin: 0 0 3em 0;
	  max-width: 100%;
      height: auto;
      width: auto\9; /* ie8 */
	}
	
	.image-left
	{
		float: left;
		margin: 0 2em 2em 0;
	}
	
	.image-centered
	{
	  display: fit-content;
	  margin: 0 0 2em 0;
	  max-width: 100%;
      height: auto;
      width: auto\9; /* ie8 */
	}
	
	.image-centered img
	{
	  margin: 0 auto;
	  max-width: 100%;
      height: auto;
      width: auto\9; /* ie8 */
	}

/*********************************************************************************/
/* Social Icon Styles                                                            */
/*********************************************************************************/

	ul.contact
	{
		margin: 0;
		padding: 2em 0em 0em 0em;
		list-style: none;
	}
	
	ul.contact li
	{
		display: inline-block;
		padding: 0em 0.10em;
		font-size: 1em;
	}
	
	ul.contact li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
	
	ul.contact li a
	{
		color: #FFF;
	}
	
	ul.contact li a:before
	{
		display: fit-content;
		background: #4C93B9;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: rgba(255,255,255,1);
	}
	

/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

	.button
	{
		display: inline-block;
		margin-top: 2em;
		padding: 0.8em 2em;
		background: #64ABD1;
		line-height: 1.8em;
		letter-spacing: 1px;
		text-decoration: none;
		font-size: 1em;
		color: #FFF;
	}
	
	.button:before
	{
		display: inline-block;
		background: #8DCB89;
		margin-right: 1em;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		text-align: center;
		color: #272925;
	}
	
		
/*********************************************************************************/
/* Heading Titles                                                                */
/*********************************************************************************/

	.title
	{
		margin-bottom: 0.5em;
		display: fit-content;
		color: #333333;
	}
	
	.title h2
	{
		font-size: 3em;
		color: #333333;
	}

@media (max-device-width: 900px) 
{
  .title h2
  {
    font-size: 5vw
  }
}

@media (max-device-width: 600px) 
{
  	.title h2
  	{
      font-size: 6vw;
	}
}
	
	.title .byline
	{
		font-size: 1.1em;
		color: #333333; /*Dark charcoal*/
	}
	
/*********************************************************************************/
/* Flag                                                                     */
/*********************************************************************************/

	#flag{
	  float: right;
	  position: absolute;
	  top: 4px;
	  right: 5px;
	}

@media (max-device-width: 950px) {
	#flag{width: 30px}
}
	
	#flag2{
	  float: right;
	  position: absolute;
	  top: 20px;
	  right: 10px;
	  margin: 0 0 0 20px;
	}
	
@media only screen and (min-device-width: 800px) {
    #flag2 {  display: none}
}
	
@media only screen and (max-device-width: 800px) {
    #flag {  display: none}
}

/*********************************************************************************/
/* Le gîte                                                                */
/*********************************************************************************/

	#photos2{
	  padding: 2em 1em 2em 1em;
	  display: fit-content;
	  text-align: center;
	  max-width: 1366px;
	  margin-left: auto;
	  margin-right: auto;
	}
	
@media (max-width: 800px) {
 	#photos2{
	  margin: -1em 0em 3em 0;
	  padding: 0em 1em;
	}
}	

@media (max-device-width: 800px) {
 	#photos2{
	  margin: 0em 0em 3em 0;
	  padding: 0em 1em;
	}
}	
		
	.boite2
	{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		max-width: 1366px;
		margin-left: auto;
		margin-right: auto;
		/*border: solid red;*/
	}
	
@media (max-width: 800px) {
	.boite2{
	  	display: block;
	}
}

@media (max-device-width: 800px) {
	.boite2{
	  	display: block;
	}
}
	
	
	#gite{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 2em 10vw 0 0;
	}
	
@media (max-width: 950px) {
	#gite{
	  padding: 2em 4vw 0 0;
	}
}
	
@media (max-device-width: 800px) {
	#gite{ 
	  display: none;
	}
}
	
	#texte{
		width: 70%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1em;
	  	text-align: justify;
	}
	
@media (max-width: 800px) {
	#texte{ 
	  display: contents;
	}
}

@media (max-device-width: 800px) {
	#texte{ 
	  display: contents;
	}
}

/*********************************************************************************/
/* Le cadre                                                                     */
/*********************************************************************************/
	#photos{
	  padding: 2em 1em 2em 1em;
	  display: fit-content;
	  text-align: center;
	  max-width: 1366px;
	  margin-left: auto;
	  margin-right: auto;
	}
	
@media (max-device-width: 700px) {
 	#photos{
	  margin: 3em 0em;
	  padding: 0em 1em;
	}
}

	#hide_small, #hide_small2
	{
		display: block;
	}
@media (max-device-width: 800px) {
	#hide_small, #hide_small2
	{
	display: none;
	}
}
@media (max-width: 800px) {
	#hide_small, #hide_small2
	{
	display: none;
	}
}
	
	#hide_large, #hide_large2
	{
		display: none;
	}
	
@media (max-device-width: 800px) {
	#hide_large, #hide_large2
	{
	display: block;
	}
}
@media (max-width: 800px) {
	#hide_large, #hide_large2
	{
	display: block;
	}
}

	.boite
	{
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		max-width: 1366px;
		margin-left: auto;
		margin-right: auto;
		/*border: solid red;*/
	}

	.cadre_photo
	{
		width: 50%;
		min-width: 400px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1em;
	}

	.cadre_texte
	{
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		min-width: 400px;
		height: auto;
		box-sizing: border-box;
		font-size: 1.1em;
		margin-bottom: -1em;
	}

@media (max-width: 800px) {
	.boite, .cadre_photo, .cadre_texte
	{
		display: contents;
	}
}

@media (max-device-width: 800px) {
	.boite, .cadre_photo, .cadre_texte
	{
		display: contents;
	}
}

	.cadre_interieur
	{
		margin: 0 8vw;
		text-align: justify;
		font-size: 1em;
	}
	
@media (min-width: 1900px) {
 	.cadre_interieur
  	{
		margin: 0 4vw;
	}
}

@media (max-width: 1100px) {
 	.cadre_interieur
  	{
		margin: 0 4vw;
		font-size: 0.9em;
	}
}

@media (max-width: 800px) {
	.cadre_interieur
	{
	display: block;
	margin: 1em 4vw;
	}
}

@media (max-device-width: 800px) {
	.cadre_interieur
	{
	display: block;
	margin: 1em 4vw;
	font-size: 1.8em;
	}
}

@media (max-device-width: 700px) {
	.cadre_interieur
	{
		display: block;
		margin: 1em 4vw;
		font-size: 1em;
	}
}
	
	.pic 
	{
	  display: inline-block;
	  color: #fff;
	  border-radius: 3px;
	}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header-wrapper{
	  overflow: hidden;
	  background: #FF9933; /*Deep saffron (orange)*/
	}

	#header{
	  text-align: center;
	  height: auto;
	}
	
	#menu-accordeon {
	  padding:0;
	  margin:0;
	  background: #FF9933; /*Deep saffron (orange)*/
	  list-style:none;
	  text-align: left;
	  width: 100%;
	}

	#menu-accordeon ul {
	  padding:0;
	  margin:0;
	  list-style:none;
	  text-align: center;
	}

	#menu-accordeon li {
	   border-radius: 6px;
	   margin-bottom: 0;  
	}

	#menu-accordeon li li {
	   max-height:0;
	   overflow: hidden;
	   transition: all .5s;
	   border-radius:0;
	   background: #444; /*Dark grey*/
	   box-shadow: none;
	   border:none;
	   margin:0;
	}

	#menu-accordeon a {
	  display:block;
	  text-decoration: none;
	  color: #fff; /*White*/
	  padding: 10px 0 0 20px;
	  font-family: 'Questrial', sans-serif;
	  text-transform: uppercase;
	  font-size:3em
	}

	#menu-accordeon ul li a, #menu-accordeon li:hover li a {
	  font-size:3em;
	  padding:20px 0;
	}

	#menu-accordeon li:hover {
	  background: #FF9933; /*Deep saffron (orange)*/
	}

	#menu-accordeon li li:hover {
	   background: #999; /* Medium grey*/
	}

	#menu-accordeon ul li:last-child {
	   border-radius: 0 0 0 0;
	   border:none;
	}

	#menu-accordeon li:hover li {
	  max-height: 15em;
	}

@media only screen and (min-device-width: 800px) {
    #menu-accordeon {  display: none; }
}
	
@media only screen and (max-device-width: 800px) {
    #header-wrapper {  display: none; }
}

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

	#logo
	{
		padding: 8em 0em 4em 0em;
	}
	
	#logo h1
	{
		display: block;
		margin-bottom: 0.20em;
		padding: 0.20em 0.9em;
		font-size: 3.5em;
	}
	
	#logo a
	{
		text-decoration: none;
		color: #FFF; /*White*/
	}
	
	#logo span
	{
		text-transform: uppercase;
		font-size: 2.90em;
		color: #FFF; /*White*/ 
	}

	#logo span a
	{
		color: rgba(255,255,255,0.8);
	}
	
	

/*********************************************************************************/
/* Menu                                                                          */
/*********************************************************************************/

	#menu
	{
	  height: 60px;
	}
	
@media (max-device-width: 750px) 
{
 	#menu
  	{
      height: 120px;
	}
}
	
	#menu ul
	{
	  display: inline-block;
	  padding: 0em 2.8em;
	  text-align: center;
	}
	
	#menu li
	{
	  display: inline-block;
	}
	
	#menu li a, #menu li span
	{
	  display: inline-block;
	  padding: 0em 3vw;
	  text-decoration: none;
	  font-size: 0.90em;
	  font-weight: 600;
	  text-transform: uppercase;
	  line-height: 60px;
	  outline: 0;
	  color: #FFF; /*White*/
	}
		
@media (max-device-width: 500px) 
{
  	#menu li a, #menu li span{font-size: 3vw}
}

	
	#menu li:hover a, #menu li.active a, #menu li.active span 
	{ 
	  background: #FFF; /*White*/
	  border-radius: 7px 7px 0px 0px;
	  color: #FF9933; /*Deep saffron (orange)*/
	}
	
@media (max-device-width: 750px) 
{
	#menu li:hover a, #menu li.active a, #menu li.active span
	{
	  border-radius: 7px 7px 7px 7px;
	}
}
	
@media only screen and (min-device-width: 800px) 
{
  	#vallee3 {  display: none; }
}

@media only screen and (min-device-width: 800px) 
{
	#vallee4 {  display: none; }
}

@media only screen and (max-device-width: 800px) 
{
	#vallee {  display: none; }
}

@media only screen and (max-device-width: 800px) 
{
    #vallee2 {  display: none; }
}
	
/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

	#banner
	{
		padding-top: 3em;
		display: fit-content;
		width: fit-content;
		
	}
	
@media (max-device-width: 800px) 
{
	#banner
	{
      padding-top: 4em;
	}
}
	
	#banner2
	{
	  padding-top: 4em;
	  display: fit-content;
	  width: fit-content;
	}
	
@media (max-device-width: 800px) 
{
	#banner2
	{
      padding-top: 3em;
	}
}
	
	#container
	{
	display: fit-content;	
	}

@media only screen and (min-device-width: 800px) 
{
    #banner2 {  display: none; }
}
	
@media only screen and (max-device-width: 800px) 
{
    #banner {  display: none; }
}

/*********************************************************************************/
/* Wrapper                                                                       */
/*********************************************************************************/


	.wrapper
	{
	  overflow: hidden;
	  padding: 0em 0em 0em 0em;
	  display: fit-content;
	}

	#wrapper2
	{
	  overflow: hidden;
	  background: #F3F3F3; /*Light grey*/
	  padding: 0em 0em;
	  text-align: center;
	}

/*********************************************************************************/
/* Welcome                                                                       */
/*********************************************************************************/

	#welcome
	{
	  overflow: hidden;
	  width: fit-content;
	  padding: 2.5em;
	  text-align: center;
	  color: #333333; /*Dark charcoal*/
	}
	
@media (max-device-width: 800px)
{
	#welcome
	{
	  padding: 2em;
	}
}
	
	#welcome .content
	{
	  padding: 3em 1.5em 1.5em 1.5em;;
	  width: fit-content;
	  color: #333333; /*Dark charcoal*/
	}
	
@media (max-device-width: 800px)
{
	#welcome .content
	{
	  padding: 4em;
	}
}

	#welcome .title h2
	{
	color: #333333; /*Dark charcoal*/
	}
	
/*********************************************************************************/
/* Page                                                                          */
/*********************************************************************************/

	#page-wrapper
	{
	  overflow: hidden;
	  background: #2F1E28; /*Dark magenta-pink*/
	  padding: 3em 0em 6em 0em;
	  text-align: center;
	}


/*********************************************************************************/
/* Content                                                                       */
/*********************************************************************************/

	#content
	{
	  float: left;
	  width: 700px;
	  padding-right: 100px;
	  border-right: 1px solid rgba(0,0,0,.1);
	}

/*********************************************************************************/
/* Sidebar                                                                       */
/*********************************************************************************/

	#sidebar
	{
		float: right;
		width: 350px;
	}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	.container2
	{
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 1366px;
	}
	
@media (max-width: 800px){	
	.container2
	{
		margin: 0px 5vw;
		width: 100%;
		max-width: 1366px;
	}
}

@media (max-device-width: 800px){	
	.container2
	{
		margin: 0px 5vw;
		width: 100%;
		max-width: 1366px;
	}
}
	
	#footer
	{
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		padding: 1em;
		background: #FF8204; /*Orange*/
		text-align: center;
		opacity: 0.7;
		margin-bottom: 2em;
		text-decoration: none;
		width: 100%;		
	}

	#footer .fbox1,
	#footer .fbox2,
	#footer .fbox3
	{
		float: left;
		font-size: 1.1em;
		color: #333333; /*Dark charcoal*/
		Width: 31%;
		display: block;
		padding: 0 0.5vw;
	}
	
@media (max-device-width: 800px){
	#footer .fbox1,
	#footer .fbox2,
	#footer .fbox3
	{
		font-size: 1.5em;
	}
}
	
@media (max-device-width: 700px){
	#footer .fbox1,
	#footer .fbox2,
	#footer .fbox3
	{
		font-size: 1.7em;
	}
}

	#footer .icon
	{
		display: block;
		margin-bottom: 0.5em;
		font-size: 1.8em;
		text-align: center;
		
	}
	@media (max-device-width: 600px){
	#footer .icon
	{
	font-size: 1.5em;
	text-align: center;
	}
	}

	
	#footer .title span
	{
		color: rgba(255,255,255,0.4);
	}
	
/*********************************************************************************/
/* Portfolio                                                                     */
/*********************************************************************************/

	#portfolio
	{
		overflow: hidden;
		padding-top: 5em;
		border-top: 1px solid rgba(0,0,0,0.2);
	}
	
	#portfolio .box
	{
		text-align: center;
		color: rgba(0,0,0,0.5);
	}
	
	#portfolio h3
	{
		display: block;
		padding-bottom: 1em;
		font-size: 1em;
		color: rgba(0,0,0,0.6);
	}

	#portfolio .title
	{
		text-align: center;
	}

	#portfolio .title h2
	{
		color: rgba(0,0,0,0.8);
	}

	.column1,
	.column2,
	.column3,
	.column4
	{
		width: 282px;
	}
	
	.column1,
	.column2,
	.column3
	{
		float: left;
		margin-right: 24px;
	}
	
	.column4
	{
		float: right;
	}

/*********************************************************************************/
/* Three Columns                                                                 */
/*********************************************************************************/

	#three-column
	{
		overflow: hidden;
		margin-top: 5em;
		padding-top: 1em;
		border-top: 1px solid rgba(0,0,0,0.2);
		text-align: center;
	}
	
	#three-column h2
	{
		margin: 1em 0em;
		font-size: 1.5em;
		font-weight: 700;
	}
	
	#three-column .icon
	{
		position: relative;
		display: block;
		margin: 0px auto 0.80em auto;
		background: none;
		line-height: 150px;
		font-size: 4em;
		width: 150px;
		height: 150px;
		border-radius: 100px;
		border: 6px solid #67128F; /*Magenta*/
		text-align: center;
		color: #FFF; /*White*/
		
	}
		
	#three-column #tbox1,
	#three-column #tbox2,
	#three-column #tbox3
	{
		float: left;
		width: 320px;
		padding: 80px 40px 80px 40px;
	}
	
	#three-column .title
	{
		text-align: center;
	}
	
	#three-column .title h2
	{
		font-size: 1.60em;
	}
	
	#three-column .title .byline
	{
		padding-top: 0.50em;
		font-size: 0.90em;
		color: #858585; /*Grey*/
	}

	#three-column .arrow-down
	{
		border-top-color: #292929; /*Dark grey*/
	}
	
	
	ul.tools
	{
		margin: 0;
		padding: 0em 0em 0em 0em;
		list-style: none;
	}
	
	ul.tools li
	{
		display: inline-block;
		padding: 0em .2em;
		font-size: 4em;
	}
	
	ul.tools li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
	
	ul.tools li a
	{
		color: #FFF; /*White*/
	}
	
	ul.tools li a:before
	{
		display: inline-block;
		background: #1ABC9C; /*Green-cyan*/
		width: 120px;
		height: 120px;
		border-radius: 50%;
		line-height: 120px;
		text-align: center;
		color: #FFFFFF; /*White*/
	}