@font-face {
    font-family: 'AchilleIIFY medium italic';
    src: url('../fonts/achilleiify-mediumitalic.eot');
    src: url('../fonts/achilleiify-mediumitalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/achilleiify-mediumitalic.woff2') format('woff2'),
         url('../fonts/achilleiify-mediumitalic.woff') format('woff'),
         url('../fonts/achilleiify-mediumitalic.ttf') format('truetype'),
         url('../fonts/achilleiify-mediumitalic.svg#achille_ii_fyitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AchilleIIFY regular';
    src: url('../fonts/achilleiify-regular.eot');
    src: url('../fonts/achilleiify-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/achilleiify-regular.woff2') format('woff2'),
         url('../fonts/achilleiify-regular.woff') format('woff'),
         url('../fonts/achilleiify-regular.ttf') format('truetype'),
         url('../fonts/achilleiify-regular.svg#achille_ii_fyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Narrow medium';
    src: url('../fonts/gothamnarrow-medium.eot');
    src: url('../fonts/gothamnarrow-medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamnarrow-medium.woff2') format('woff2'),
         url('../fonts/gothamnarrow-medium.woff') format('woff'),
         url('../fonts/gothamnarrow-medium.ttf') format('truetype'),
         url('../fonts/gothamnarrow-medium.svg#gotham_narrowmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Narrow book';
    src: url('../fonts/gothamnarrow-book.eot');
    src: url('../fonts/gothamnarrow-book.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamnarrow-book.woff2') format('woff2'),
         url('../fonts/gothamnarrow-book.woff') format('woff'),
         url('../fonts/gothamnarrow-book.ttf') format('truetype'),
         url('../fonts/gothamnarrow-book.svg#gotham_narrowbook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Narrow bold';
    src: url('../fonts/gothamnarrow-bold.eot');
    src: url('../fonts/gothamnarrow-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamnarrow-bold.woff2') format('woff2'),
         url('../fonts/gothamnarrow-bold.woff') format('woff'),
         url('../fonts/gothamnarrow-bold.ttf') format('truetype'),
         url('../fonts/gothamnarrow-bold.svg#gotham_narrowbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

html {
  /* set base font-size to equiv "10px", which is adapted to rem unit */
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
  /* thanks to @guardian, @victorbritopro and @eQRoeil */
  font-size: calc(1em * 0.625);
}

body {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	font-family: 'palatino regular';
	font-size: 1.6rem; // ex. 1.6rem would be "16px" equivalent
	color: #2b2d34; }

#page-content {
	position: relative;
	width: 100vw;
	max-width: 1220px;
	margin: 20px auto;
	background-color: #fff; }

.is-centered {
	text-align:  center; }

.is-full-width {
  position: relative; }
  .is-full-width * {
    position: relative;
    z-index: 10; }
  .is-full-width:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 5;
    background-color: inherit;
    color: inherit; }

header {
	margin-bottom: 35px;
}
header p {
	text-align: center;
	font-family: 'AchilleIIFY medium italic';
	font-size: 3rem;
  margin-bottom: 25px;
  color: #676465;
}
header #banner > div {
	width:  100%;
	max-width:  100%;
	display: flex;
}
header #banner > div:nth-of-type(1) > div:nth-of-type(1),
header #banner > div:nth-of-type(1) > div:nth-of-type(3) {
	flex: 1;
}
header #banner > div:nth-of-type(1) > div:nth-of-type(2) {
	flex: 2;
}
header #banner > div > div img {
	max-width: 100%;
	display: inline-block;
}

header #banner > div:nth-of-type(2) > div:nth-of-type(1) {
	width: 25%;
}
header #banner > div:nth-of-type(2) > div:nth-of-type(2) {
	display: flex;
	width: 75%;
}
header #banner > div:nth-of-type(2) > div img {
	max-width: 100%;
	display: inline-block;
}
header #banner > div:nth-of-type(2) {
	margin-top: -20px;
}
header #banner > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) {
	width: 66.66%;
}
header #banner > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) {
	width: 33.33%;
	align-self: center;
}


header #banner > div:nth-of-type(2) {
	margin-top: -20px;
}
header #banner > div:nth-of-type(2) > div img {
	max-height: 156px;
}
header #banner > div:nth-of-type(2) > div:nth-of-type(1) img {
	border-radius: 50%;
}
header #banner > div:nth-of-type(2) > div:nth-of-type(3) {
	align-self: center;
}

#page-main > div {
	position: relative;
	display:flex;
	font-family: 'AchilleIIFY regular';
}
#page-main > div > div:nth-of-type(1),
#page-main > div > div:nth-of-type(3) {
	flex: 1.25;
}
#page-main > div > div:nth-of-type(2) {
	flex: 2;
	padding: 0 20px;
	text-align: justify;
	hyphens: auto;
}
#page-main > div > div:nth-of-type(2) p {
	margin-bottom: 15px;
}
#page-main > div > div img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
#page-main > div > div:nth-of-type(3) {
	position:relative;
	background-color: #8ba939;
	padding: 30px 10px;
}
#page-main > div > div:nth-of-type(3) ul {
	margin-left: 15px;
	color: #fff;
	font-size: 1.5rem;
	font-family: 'Gotham Narrow medium';
}
#page-main > div > div:nth-of-type(3) ul li {
	margin-bottom: 8px;
}
#page-main > div > div:nth-of-type(3) .cartouche {
	display: inline-block;
  position: absolute;
  top: -20px;
  padding: 8px 10px;
  border: 2px solid #8ba939;
  background-color: #fff;
  color: #8ba939;
  left: -13px;
	font-family: 'Gotham Narrow bold';
}

footer {
	display: flex;
	justify-content: space-between;
	border: 3px solid #656263;
  color: #656263;
  padding: 8px 15px;
  margin-top: 20px;
	font-family: 'Gotham Narrow bold';
	font-size: 2rem;
}
footer a {
	color: #656263;
}
footer #footer-left {
	flex:1;
}
footer #footer-center {
	display: flex;
	justify-content: space-between;
	flex:2;	
}
footer #footer-center > span {
	padding-left: 30px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 26px;
}
footer #footer-center > span:nth-of-type(1) {
	background-image: url(../images/PICTO-TEL.webp);
}
footer #footer-center > span:nth-of-type(2) {
	background-image: url(../images/PICTO-MAIL.webp);
}
footer #footer-right {
	flex: 2;
	text-align: right;
	color: #8ba939;
}
footer .smaller-font {
	font-family: 'Gotham Narrow book';
	font-size: 1.75rem;
}

@media screen and (max-width: 768px) {
	header #banner > div:nth-of-type(1) > div:nth-of-type(1),
	header #banner > div:nth-of-type(1) > div:nth-of-type(3) {
		display:none;
	}

	header #banner > div:nth-of-type(2) {
		margin-top: -12px;
	}
	header #banner > div:nth-of-type(2) > div:nth-of-type(1) {
		display:none;
	}
	header #banner > div:nth-of-type(2) > div:nth-of-type(2) {
		width: 100%;
		flex-direction: column;
	}
	header #banner > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) {
		width: 100%;
		margin: 0 auto;
	}
	header #banner > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) {
		width: 40%;
		margin: 0 auto;
	}

	#page-main > div {
		flex-direction: column;
	}

	#page-main > div > div:nth-of-type(1) {
		padding: 0 20px;
	}

	#page-main > div > div:nth-of-type(3) {
		margin-top: 20px;
	}
	#page-main > div > div:nth-of-type(3) ul {
		margin-left: 27px;
	}

	#page-main > div > div:nth-of-type(3) .cartouche {
		left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  footer {
  	flex-direction: column;
  	margin:0 20px;
  }

  footer div {
  	margin-bottom: 10px;
  }

  footer #footer-center {
  	flex-direction: column;
  }

  footer #footer-center span {
  	margin-bottom: 10px;
  }
  footer #footer-center span:last-child {
  	margin-bottom: 0;
  }

  footer #footer-right {
  	text-align: left;
  }

}