/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

/* variables */

:root {
  --main-contrast-color: #7ba041; /* green */
  --main-contrast-color-dark: #51731D; /* dark green */
  --secondary-contrast-color : #ba6e48; /* dark orange */
  --secondary-contrast-color-light : #c48463;/* light orange */
  --secondary-contrast-color-dark : #7a5d44;/* brown */
  --main-contrast-color-darker1: #6b8331;
  --main-contrast-color-darker2: #5e7624;
  --main-contrast-color-darker3: #4b6115;
  --page-max-width: 1024px;
}

/* end variables */

/* Media breakpoints */

/** 
max-width: 321px
min-width : 460px;
min-width : 700px;
min-width : 999px;
min-width: 1440px;
**/

/* end Media breakpoints */


/* general styles */


/* end general styles */

/* header */

header {
}

header div.main {
	background-image: url(../static-images/main-header-image-christophe-borret.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	height:53px;
	border-bottom: 2px solid var(--main-contrast-color);
}

header a#titles {
	color: var(--main-contrast-color);
	display: block;
	margin: 13px 0 0 54px;
	float: left;
}

@media screen and (max-width: 321px) {
	header a#titles {
		font-size: 15px;
		margin: 13px 0 0 48px;
	}
}

header a#titles:hover {
	text-decoration: none;
}

header a#titles #site-title {
	font-weight: 600;
	line-height: 1em;
	margin:0;
}

header a#titles #site-subtitle {
	font-size: 0.9em;
	font-style: italic;
	padding-left:0.4em;
	margin:0;
	line-height: 1em;
}

header a#titles #site-subtitle span.long-version {
	display: none;
}

header #menu-icon {
	display:block;
	font-size: 2em;
	line-height: 1em;
	text-align: center;
	background-color: var(--main-contrast-color);
	/*padding: .1em;*/
	color: #FFF;
	text-decoration: none;
	cursor: pointer;
	position: absolute;
	top: 11px;
	right: 11px;
	width: 1em;
	height: 1em;
	border-radius: 0.1em;
	-webkit-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

@media screen and (max-width: 321px) {
	header #menu-icon {
		right: 8px;
	}
}


header #menu-icon:hover {
	opacity: .8;
}

header #menu-icon span {
	vertical-align: top;
}


header nav#main-menu {
	display:none;
}


header nav#main-menu ul {

}

header nav#main-menu ul li {

}

header nav#main-menu ul li a {
		color:var(--main-contrast-color-dark);
		font-weight: 600;
		-webkit-transition: color 0.3s;
		-o-transition: color 0.3s;
		transition: color 0.3s;
	}

header nav#main-menu ul li a:hover {
		color:var(--main-contrast-color);
		text-decoration: none;
	}

header nav#main-menu.small-screens {
	display:block;
	position: absolute;
	top: 48px;
	left: 0;
	width: 100%;
	text-align: center;
	background : white;
	border-top: 1px solid var(--main-contrast-color);
	border-bottom: 1px solid var(--main-contrast-color);
	z-index:99;
	height: 100%;
}

header nav#main-menu.small-screens ul {

}

header nav#main-menu.small-screens ul li {
	border-bottom: 1px solid var(--main-contrast-color);
}


header nav#main-menu.small-screens ul li {
	
}
header nav#main-menu.small-screens ul li a {
	display: inline-block;
	width: 100%;
	padding-top:1em;
	padding-bottom:1em;
}

header div.sub {
	
		border-bottom: 1px solid #ccc;
	}

body.interior-page header div.sub {
    display: none;
}

header #button-reservation {
	clear: both;
	text-align: center;
	margin-top: -13px;
}

header #button-reservation a {
	display: inline-block;
	background: #FFF;
	border: var(--secondary-contrast-color) solid 2px;
	border-radius: 0.3em;
	color: var(--secondary-contrast-color);
	font-weight: 600;
	padding :0.1em 0.3em;
	margin: 0.3em auto 0 auto;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

header #button-reservation a:hover {
	color: var(--secondary-contrast-color-light);
	border-color:var(--secondary-contrast-color-light);
	text-decoration: none;
}

header #contact-blurb {
	padding : 0.3em 0.6em;
}

header #contact-blurb p {
	text-align: center;
	font-size: 0.9em;
	margin-top: 0;
}

/** landscape small screens header **/

@media screen and (min-width: 460px) {
	header a#titles #site-subtitle span.long-version {
		display: inline;
		}
}

/** end landscape small screens header **/


/** medium and large screens header */

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

	header {
		
	}

	header div.main {
		background-image: url(../static-images/main-header-image-medium-screens-christophe-borret-197x125.jpg);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: auto 100%;
		border-bottom: 1px solid #ccc;
		height:125px;
		position: relative;
	}

	header nav#main-menu {
		font-size: 1em;
	}

	header a#titles {
	display: block;
	margin: 43px 0 0 157px;
	float: left;
	font-size: 1.7em;
	}

	header a#titles #site-title {
		
	}

	header a#titles #site-subtitle {
		padding-left:1.5em;
		font-size: 0.6em;
		
	}


	header #menu-icon {
		display: none;
	}
	header nav#main-menu {
		position: absolute;
		right: 0;
		bottom: 0;
		display:block;
		margin:0 0.5em 0 0;
	}
	header nav#main-menu ul {
		list-style: none;
		margin:0;
		padding: 0;
	}
	header nav#main-menu ul li {
		display: inline-block;
		margin:0;
		padding: 0;
	}
	header nav#main-menu ul li a {
		padding: 0.5em;
	}

	header div.sub {
		padding:0.5em 0.8em 0em 0.8em;
	}

	

	header #button-reservation {
	
	margin-top: 0;
	}

	header #contact-blurb {
		

	}

	header #contact-blurb p {

		text-align:center;
		font-size: 0.9em;
		margin-top: 0;
		margin-bottom: 0;
	}

}

/*** large screens only ***/

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

	header div.main {
		background-image: url(../static-images/main-header-image-large-screens-christophe-borret-600x380.jpg);
		height:194px;
	}

	header a#titles {
	display: block;
	margin: 73px 0 0 262px;
	float: left;
	font-size: 2em;
	}

	header a#titles #site-subtitle {
		padding-left:1.5em;
		font-size: 0.8em;		
	}
	header nav#main-menu {
		font-size: 1.2em;
		margin-right: 3%;
	}

	header div.sub {

	}

	header #button-reservation {
	text-align: left;
	float: left;
	margin-bottom: 0.4em;
	margin-top: 0;
	}

	header #contact-blurb {
		float: left;
		display: block;
		width: auto;
		margin: 0.3em 0 0 0.3em;

	}

	header #contact-blurb p {
		font-size: 1em;
	}
}

/*** end large screens only ***/

/*** medium and large screens header Retina ***/

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                -webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (                -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                -webkit-min-device-pixel-ratio: 2)  and (min-width: 700px),
only screen and (                -o-min-device-pixel-ratio: 2/1)  and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  header div.main {
		background-image: url(../static-images/main-header-image-large-screens-christophe-borret-1200x760.jpg);
		
	}

}

/*** end medium and large screens header Retina ***/

/** end medium and large screens header **/

/* end header */

/* body sections (default styles - homepage) */

section {
	background-repeat: no-repeat;
	background-position: top center;
	background-size: auto 37px;
	padding: 60px 1em 0em 1em ;
	position: relative;
	margin: 0 0 1em 0;
}

section:before {
  display: block;
  position: absolute;
  top:0;
  left:0;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255, 255, 255, 0)), to(rgba(0,0,0, 0.3)));
  background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 0, rgba(0,0,0, 0.3) 100%);
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0, rgba(0,0,0, 0.3) 100%);
  margin-top: 0px;
  height: 17px;
  width: 100%;
  content: '';

}

section div.section-blurb {
	text-align: center;
	font-size: 0.9em;
	max-width: var(--page-max-width);
	margin:0 auto;
}

section div.section-blurb.secondary {
	margin-top:20px;
	padding-top:10px;
	width: auto;
	border-top: 1px solid #999	;
}

section div.section-blurb p {
	margin-top: 0
}

section div.section-blurb h2 {
	margin: 0 0 0.4em 0;
}

section div.section-blurb h2 {
	color: var(--secondary-contrast-color);
}

section div.section-blurb h2 span.minus {
	font-size: 0.8em;
	font-weight: normal;
}

section div.section-blurb h3, section div#paypal-buttons-container h3 {
	color: var(--main-contrast-color);
}

.interior-page section div.section-blurb ul li p.list-element-title {
	color: var(--main-contrast-color);
	font-weight: bold;
}

.interior-page section div.section-blurb ul li {
	list-style: none;
	margin-top: 2em;
}

section div.button-read-more, section div.button-reservation.secondary {
	clear: both;
	text-align: center;
	margin-top: 0.4em;
}

section div.button-read-more a {
	display: inline-block;
	background: #FFF;
	border: var(--main-contrast-color) solid 2px;
	border-radius: 0.3em;
	color: var(--main-contrast-color);
	font-weight: 600;
	font-size: 0.9em;
	padding :0.1em 0.3em;
	margin: 0.3em auto 0 auto;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	position: relative;
	z-index: 99;
}

section div.button-read-more a:hover, section div.button-reservation.secondary a:hover {
	color: var(--main-contrast-color-dark);
	border-color:var(--main-contrast-color-dark);
	text-decoration: none;
}



section#personnes {
	background-image: url(../static-images/woman-eyes-pano-717x37.jpg);
}

section#personnes div.section-blurb h2{
	color: var(--secondary-contrast-color);
}

section#personnes div.section-blurb h2 span.minus {
	color: var(--main-contrast-color);
}

section#animaux {
	background-image: url(../static-images/dog-pano-717x37.jpg);
}

section#animaux div.section-blurb h2{
	color: var(--secondary-contrast-color-dark);
}

section#animaux div.section-blurb h2 span.minus {
	color: var(--secondary-contrast-color);
}
section#lieux {
	background-image: url(../static-images/interior-pano-2-717x37.jpg);
}

section#lieux div.section-blurb h2{
	color: var(--secondary-contrast-color);
}

section#lieux div.section-blurb h2 span.minus {
	color: var(--main-contrast-color);
}

section#a-propos, section#reservation, section#temoignages {
	background-image: url(../static-images/pebble-pano-717x34.jpg);
}

section#ateliers {
	background-image: url(../static-images/workshop-pano-789x37.jpg);
}


/*** medium screens sections images Retina ***/

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 460px) and (max-width: 699px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 460px) and (max-width: 699px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 460px) and (max-width: 699px),
only screen and (                -webkit-min-device-pixel-ratio: 2) and (min-width: 460px) and (max-width: 699px),
only screen and (                -o-min-device-pixel-ratio: 2/1) and (min-width: 460px) and (max-width: 699px),
only screen and (                min-resolution: 192dpi) and (min-width: 460px) and (max-width: 699px),
only screen and (                -webkit-min-device-pixel-ratio: 2)  and (min-width: 460px) and (max-width: 699px),
only screen and (                -o-min-device-pixel-ratio: 2/1)  and (min-width: 460px) and (max-width: 699px),
only screen and (                min-resolution: 2dppx)  and (min-width: 460px) and (max-width: 699px) { 

	section#personnes {
	background-image: url(../static-images/woman-eyes-pano-1433x74.jpg);
	}
	section#animaux {
	background-image: url(../static-images/dog-pano-1433x74.jpg);
	}
	section#lieux {
	background-image: url(../static-images/interior-pano-1433x74.jpg);
	}
	section#a-propos, section#reservation {
	background-image: url(../static-images/pebble-pano-1433x74.jpg);
	}
	section#ateliers {
	background-image: url(../static-images/workshop-pano-1579x74.jpg);
}

}

/*** end medium screens sections images Retina ***/

/*** medium and large screens sections images and layout ***/

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

	section {
	background-size: auto 74px;
	padding: 90px 5rem 0em 5rem ;
	}

	section#personnes {
	background-image: url(../static-images/woman-eyes-pano-1433x74.jpg);
	}
	section#animaux {
	background-image: url(../static-images/dog-pano-1433x74.jpg);
	}
	section#lieux {
	background-image: url(../static-images/interior-pano-1433x74.jpg);
	}
	section#a-propos, section#reservation, section#temoignages {
	background-image: url(../static-images/pebble-pano-1433x74.jpg);
	}
	section#ateliers {
	background-image: url(../static-images/workshop-pano-1579x74.jpg);
}
}

/*** end medium and large screens sections images and layout ***/

/*** medium and large screens sections images Retina, XL screens classic ***/

@media
only screen and (min-width: 1440px),
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                -webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (                -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                -webkit-min-device-pixel-ratio: 2)  and (min-width: 700px),
only screen and (                -o-min-device-pixel-ratio: 2/1)  and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

	section#personnes {
	background-image: url(../static-images/sections-pano-woman-2880x135.jpg);
	}
	section#animaux {
	background-image: url(../static-images/sections-pano-dog-2880x135.jpg);
	}
	section#lieux {
	background-image: url(../static-images/sections-pano-living-room-2880x135.jpg);
	}
	section#a-propos, section#reservation {
	background-image: url(../static-images/sections-pano-pebble-2880x135.jpg);
	}
	section#ateliers {
	background-image: url(../static-images/sections-pano-workshop-2880x135.jpg);
}
}

/*** end medium and large screens sections images Retina, XL screens classic***/


/*** large screens sections layout ***/

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

	section {
	padding: 90px 7rem 0em 7rem ;
	}

	section div.section-blurb {
    font-size: 1em;
    }

    section div.button-read-more a, section div.button-reservation.secondary a {
    	font-size:1em;
	}

}

/*** end large screens sections ***/

/*** XL screens sections layout ***/

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

	section {
	padding: 165px 10rem 0em 10rem ;
	background-size: auto 135px;
	}

}

/*** end XL screens sections ***/



/* end body sections (default styles - homepage)  */



/* body sections (sub styles - interior pages) */

.interior-page section {
	margin-bottom: 1em;
}


.interior-page div.section-blurb p {
	margin-top: 1em;
}

.interior-page section div.section-blurb p, .interior-page section div.section-blurb h2, .interior-page section div.section-blurb h3 {
	text-align: left;
}


.interior-page section div.button-reservation.secondary {
	margin-top: 1em;
}

section div.contact-blurb {
	margin-top: 2em;
}

section div.contact-blurb p{
	text-align: center;
}

section div.button-reservation.secondary a {
	display: inline-block;
	background: #FFF;
	border: var(--main-contrast-color) solid 2px;
	border-radius: 0.3em;
	color: var(--main-contrast-color);
	font-weight: 600;
	padding :0.1em 0.3em;
	margin: 0.3em auto 0 auto;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	position: relative;
	z-index: 99;
}


.interior-page section #paypal-buttons-container ul.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
 
-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
  list-style: none;
  margin: 1rem auto;
  padding:0;
  max-width: var(--page-max-width);
}
.interior-page section #paypal-buttons-container ul.flex li {
  width: 100%;
  border-radius: 10px;
  border: 2px solid var(--main-contrast-color);
  margin: 0 0 13px 0;
  padding:1rem;
  text-align: center;
}

.interior-page section #paypal-buttons-container ul.flex.multicolor li.personnes {
  border-color: var(--main-contrast-color);
  }
.interior-page section #paypal-buttons-container ul.flex.multicolor li.animaux {
  border-color: var(--main-contrast-color-darker1);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.lieux {
  border-color: var(--main-contrast-color-darker2);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.ateliers {
  border-color: var(--main-contrast-color-darker3);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.libre {
  border-color: #999999;
}


.interior-page section #paypal-buttons-container ul.flex li button.payment-button {
  width: auto;
  border-radius: 2px;
  background: var(--main-contrast-color);
  margin: 0;
  padding:5px 10px;
  text-align: center;
  color: white;
  font-weight: bold;
}

.interior-page section #paypal-buttons-container ul.flex.multicolor li.personnes button.payment-button {
  background-color: var(--main-contrast-color);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.animaux button.payment-button {
  background-color: var(--main-contrast-color-darker1);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.lieux button.payment-button {
  background-color: var(--main-contrast-color-darker2);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.ateliers button.payment-button {
  background-color: var(--main-contrast-color-darker3);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.libre button.payment-button {
  background-color:  #999999;
}

.interior-page section #paypal-buttons-container ul.flex.multicolor li.personnes h3 {
  color: var(--main-contrast-color);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.animaux h3 {
  color: var(--main-contrast-color-darker1);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.lieux h3 {
  color: var(--main-contrast-color-darker2);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.ateliers h3 {
  color: var(--main-contrast-color-darker3);
}
.interior-page section #paypal-buttons-container ul.flex.multicolor li.libre h3 {
  color:  #999999;
}


.interior-page section #paypal-buttons-container ul.flex li input {
	width: 15%;
	padding: 5px;
}
/** flexbox changes on various screen sizes **/

	/*@media screen and (min-width: 460px) {
		.interior-page section #paypal-buttons-container ul.flex li {
  		width: 43%;	}
	}*/


	@media screen and (min-width: 1024px) {
		.interior-page section #paypal-buttons-container ul.flex li {
		/*width: calc(45% - 2px);*/
		flex: 0 1 45%;
		}	
	}

	/*@media screen and (min-width: 999px) {
		.interior-page section #paypal-buttons-container ul.flex li {
		width: 28%;

		}	
	}*/

	@media screen and (min-width: 1440px) {
		.interior-page section #paypal-buttons-container ul.flex li {
		/*width: calc(30% - 4px);*/
		flex: 0 1 29%;
		}	
	}

/** end flexbox changes **/

/** reservation page styles **/

body.reservation header #button-reservation {
	display: none;
}

/** end reservation page styles **/

/* end body sections (sub styles - interior pages) */



/* footer */

footer {
 /*background-color: rgba(0,0,0,0.8);*/
 font-size:0.9em;
}

.interior-page footer {
 border-top: 1px solid #999;
}

footer #footer-blurb {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(6%, rgba(255, 255, 255, 0)), to(rgba(0,0,0, 0.3)));
 background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 6%, rgba(0,0,0, 0.3) 100%);
 background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 6%, rgba(0,0,0, 0.3) 100%);
}



footer #footer-blurb  {
	padding:2rem;
}

footer #footer-blurb p {

}

footer #footer-nav-container {
border-top:1px solid #ddd;
	padding: 2rem 0;
}

footer #footer-nav-container ul {
	list-style: none;
	text-align: center;
	margin:0;
}

footer #footer-nav-container ul#footer-nav li {
	display: inline-block;
}

footer #footer-nav-container ul#footer-nav li a {
	
}

footer #footer-nav-container ul#footer-nav li a:hover {
	
}


/* end footer */