@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

html {
	width: 100%;	
}

body {
	font-family: Arial, sans-serif;
	font-size: 15pt;
/*	overflow: hidden;*/
	transition: top 1.8s cubic-bezier(.49,.22,.52,1.35);
}

@font-face {
	font-family: 'PlayfairDisplay-Regular';
	src: url(../PlayfairDisplay-Regular.otf);
}

@font-face {
	font-family: 'PlayfairDisplaySC-Black';
	src: url(../PlayfairDisplaySC-Black.otf);
}

@font-face {
	font-family: 'Muli';
	src: url(../Muli.ttf);
}

@font-face {
	font-family: 'Muli-Light';
	src: url(../Muli-Light.ttf);
}

@font-face {
	font-family: 'Muli-SemiBold';
	src: url(../Muli-SemiBold.ttf);
}

@keyframes hvr-icon-float-away{
	0%{
		opacity: 1;
	}

	100%{
		opacity: 0;
		-webkit-transform:translateY(-1em);
		transform:translateY(-1em)
	}
}


a {
	text-decoration: none !important;
	transition: .2s ease-out;
}

a img {
	border: none !important;
}

ul {
	list-style-type: none !important;
}

p {
	font-size: 1em;
	font-family: 'Muli';
}

h1 {
	color: #f3e8db;
}

h2 {
	font-family: 'PlayfairDisplay-Regular';
	color: #f3e8db;
}

h3 {
	font-family: 'PlayfairDisplaySC-Black';
	color: #f3e8db;
}

/*--------------------------------------------------------------------------------- Navigation --------------------------------------------------------------*/

/*
	nav {
		height: 7.5%;
		padding: 0 1.25%;
		background-color: #F29727;
	}

	.navbar-nav {
		height: auto;
		padding: 5% 0;
	}

	.home-align {
		margin: 0.5% 0px 0 0px;
	}


	.bg-light {
	}

	.home {
		background-image: url('../img_layout/home2.png');
		background-repeat: no-repeat;
		background-position: center;
		position: center;
		width: 27px;
		height: 27px;
		margin: 0.5% 20px 0 50px;
		padding: 0 0 0 0;
		vertical-align: middle;

	}

	a.home:hover, a.home:focus, a.home:active {
		background-image: url('../img_layout/home.png');
		background-repeat: no-repeat;
		width: 27px;
		height: 27px;
	}

	nav ul {
		width: 100% !important;
		height: auto;
	}

	.nav-bouton {
		width: 80px;
	}

	.nav-bouton2 {
		width: 80px;
	}

	nav a {
		font-size: 1.5em;
		font-family: 'BebasNeue-Light';
		color: #f3e8db !important;
		vertical-align: middle !important;
		height: auto;
	}

	nav a:hover, a:active {
		font-family: 'BebasNeue';
		color: #f3e8db !important;
		text-align: left !important;
		text-shadow: none;
	}
*/

/*------------------------------------------------------------------------------- Header -------------------------------------------------------------------------------*/

header {
	background-color: #f3e8db;
	height: auto;
	padding: 18% 25% 18%;
	margin: none;
	text-align: center;
}


header h1 {
	width: 100%;
	text-align: center;
	font-size: 4.75em;
}

.johannes {
	font-family: 'PlayfairDisplay-Regular';
	color: #a87b69;
	text-align: center;
	text-shadow: 0px .75px 0.25px rgba(0, 0, 0, .4);
}

.bignat {
	font-family: 'PlayfairDisplaySC-Black';
	color: #a87b69;
	text-align: center;
	text-shadow: 0px .75px 0.25px rgba(0, 0, 0, .4);

}

/*
	header .birthday {
		display: inline-block;
		font-family: 'BebasNeue-Light';
		font-size: .35em;
		margin: 0% 0% 0;
	}
*/

header h2 {
	width: 100%;
	font-family: 'PlayfairDisplay-Regular';
	color: #a87b69;
	text-shadow: 0px .75px 0.25px rgba(0, 0, 0, .4);
	margin: -20px 0 0 0;
}

header h3 {
	text-align: center;  
	margin: 30px 0 0 0;
}


h3 a:link, a:visited {
	color: #a87b69;
	font-family: 'PlayfairDisplay-Regular';
	text-shadow: 0px .75px 0.25px rgba(0, 0, 0, .4);
}

h3 a:hover, a:active {
	color: #5e7da3;
	font-family: 'PlayfairDisplay-Regular';
	text-shadow: none;
}

h3 span {
	width: 100%;
}

h3 span a {
	font-size: 1em;
}

.LinkedIn {
	width: 28px;
	height: 28px;
	fill: #a87b69;
	cursor: pointer;
	color: #f3e8db;
	margin: 0 0 0 10px;
}

.Insta {
	width: 28px;
	height: 28px;
	fill: #a87b69;
	cursor: pointer;
	color: #f3e8db;
	margin: 0 0 0 10px;
}

.LinkedIn:hover, .Insta:hover,
.LinkedIn:active, .Insta:active {
	fill: #5e7da3;
	margin: 0 0 0 10px;
	opacity:1;
}

.download, .download:visited {
	width: 50%;
	height: 48px;
	margin: 2.75% 25% 0 25%;
	padding: 1.5px 2px;
	font-size: 1.25em;
	font-family: 'PlayfairDisplay-Regular' !important;
	color: #f3e8db;
	border: none;
	background: none !important;
	cursor: pointer;
	outline: none;
}

.download:hover, .download:active {
	width: 50%;
	height: 48px;
	margin: 2.75% 25% 0 25%;
	padding: 1.5px 2px;
	font-family: 'PlayfairDisplay-Regular' !important;
	outline: none;
	color: #a87b69;
	border: none;
	background-color: #5e7da3 !important;
	cursor: pointer;
	box-shadow: inset 0px .75px 0.25px rgba(63, 63, 63, .4);
	-webkit-box-shadow: inset 0px .75px 0.25px rgba(63, 63, 63, .4);
	-moz-box-shadow: inset 0px .75px 0.25px rgba(63, 63, 63, .4);
	-o-box-shadow: inset 0px .75px 0.25px rgba(63, 63, 63, .4);

}

/*-------------------------------------------------------------------------------- Main --------------------------------------------------------------------------------*/

main {
	width: 100%;
	height: auto;
	background-color: #f3e8db;
}

#book {
	width: 100%;
	padding: 10% 17.5%;
	font-family: 'PlayfairDisplay-Regular';
	color: #a87b69;
}

/*
#book h3{
	color: #F29727 !important;
	font-size: 1.8em;
	float: left;
}
*/

#book ul {
	display: inline-block;
}

#book ul li {
	float: left;
	margin: .75% 1.5% .75% 1.5%;

/*	
	font-family: 'Bebas Neue Bold';
	font-size: 1.2em;
	color: #f3e8db;
	text-shadow: 0.75px 1.75px 2px rgba(63, 63, 63, .4);
	text-align: center;
*/
}

.nonagon {
	-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
	clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
	width: 110px;
	height: 110px;

/* 	background-color: #F29727;
	transform-origin: 100%;
  	text-align: center;

	box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-webkit-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-moz-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-o-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
*/
	vertical-align: middle;
	mask: url('#mask');
	-webkit-mask-size: calc(100%/1);
	-moz-mask-size: calc(100%/1); 
	-webkit-mask-position: center;
	-moz-mask-position: center;
	transition: mask-size .3s; 	
	cursor: pointer;

}

/*-------------------------------------------------------------------------- Contact & Footer --------------------------------------------------------------------------*/

#contact {
	height: auto;
	padding: 5% 15% 5% 15%;
	background-color: #f3e8db;
}

/*
#contact form {
}
*/

#contact form fieldset {
	border: none;
}

fieldset label {
	width: 80%;
	font-family: 'PlayfairDisplay-Regular';
	font-size: 1.4em;
	margin: .35% 0 .5% 0%;
	color: #a87b69;
	text-align: left;
 	text-shadow: 0 0.75px 0.5px rgba(63, 63, 63, .4);
}

fieldset input[type=text], input[type=email] {
	width: 80%;
	height: 4.25%;
	margin: 0 0 .75% 0;
	padding: 1.25%;
	font-family: 'Muli';
	font-size: 1em;
	color: #f3e8db;
	outline: none;
	border: none;
	background: #a87b69;
/*	box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-webkit-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-moz-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-o-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);*/
}

fieldset textarea[type=message]{
	width: 80%;
	height: 250px;
	border: none;
	margin: 0 20% .75% 0;
	padding: 1.25%;
	font-family: 'Muli';
	font-size: 1em;
	color: #f3e8db;
	text-align: left;
	resize: none;
	outline: none;
	border: none;
	background: #a87b69;
/*	box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-webkit-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-moz-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-o-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);*/
}

fieldset input[type=submit], fieldset input[type=reset] {
	width: 10%;
	height: 48px;
	margin: .75% 2% 0 0;
	padding: 1.5px 2px;
	box-sizing: border-box; 
	font-family: 'PlayfairDisplay-Regular';
	font-size: 1.25em;
	color: #f3e8db;
	text-shadow: 0px 0.75px 0.25px rgba(63, 63, 63, .4);
	outline: none;
	border: none;
	background: #a87b69;
	cursor: pointer;
}

input[type=submit]:hover, input[type=reset]:hover,
input[type=submit]:active, input[type=reset]:active {
	font-size: 1.25em;
	color: #f3e8db; /* rgb(42, 41, 41); */
	background: #5e7da3;
	font-family: 'PlayfairDisplaySC-Black';
/*	box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-webkit-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-moz-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
	-o-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4); */
}

footer {
	width: 100%;
	height: 5%;
	padding: 0 0 0.75% 0;
	background-color: #f3e8db;
	text-align: center;
}

footer p {
	font-family: 'PlayfairDisplaySC-Black';
	font-size: 1.25em;
	color: #a87b69;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------ Queries -------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------- Screen min 821px & max 1280px -------------------------------------------------------------------*/


@media screen and (min-width: 821px) and (max-width: 1280px) {

	header {
		background-color: #F29727;
		padding: 15% 25% 19% 25%;
		margin: auto;
		text-align: center;
	}

	header h1 {
		color: #f3e8db;
		font-size: 3.75em;
		text-align: center;
		margin: 4.5% 0 30px 0;
	}

	header h2 {
		color: #f3e8db;
		font-size: 2.75em;
	}

	header h2 span {
		width: 100% !important;
		text-align: center;
		display: inline-block;
	}

	h3 span a{
		width: 8%;
		font-size: 1em;
	}

	header h3 a:link, a:visited {
		font-family: 'PlayfairDisplay-Regular';
		color: #f3e8db;
	}

	header h3 a:hover, a:active {
		font-family: 'PlayfairDisplay-Regular';
		color: #f3e8db;
	}

	.LinkedIn:hover, .Insta:hover {
		fill: #f3e8db !important;
		text-shadow: none;
	}

/*----------------------------------------------------------------------- Screen (821px - 1280px) - Main ---------------------------------------------------------------*/

	#book {
		padding: 8.5% 12.5% 2.5% 12.5%;
		font-family: 'PlayfairDisplay-Regular';
		color: #F29727;
	}

	#book ul {
		display: inline-block;
	}

	#book ul li {
		float: left;
		margin: 1.5%;
	}


/*------------------------------------------------------------------ Screen (821px - 1280px) - Contact & Footer --------------------------------------------------------*/

	#contact {
		width: 90%;
		padding: 10% 5% 2.5% 5%;
	}

	fieldset input[type=text], input[type=email] {
		width: 80%;
		height: 4.25%;
		margin: 0 0 .75% 0;
		padding: .75%;
		font-size: 1.2em;
	}
	
	fieldset textarea[type=message]{
		width: 80%;
		height: 250px;
		margin: 0 20% .75% 0;
		padding: .75%;
		font-size: 1.2em;
	}
	
	fieldset input[type=submit], fieldset input[type=reset] {
		width: 25%;
		height: 58px;
		margin: 1.5% 2.5% 0 0;
		padding: 1.5px 2px;
		font-size: 1.5em;
	}

	input[type=submit]:hover, input[type=reset]:hover,
	input[type=submit]:active, input[type=reset]:active {
		font-family: 'BebasNeue-Book';
		font-size: 1.5em;
		color: #5e7da3; /* rgb(42, 41, 41); */
		background: #F29727;
/*		box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
		-webkit-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
		-moz-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
		-o-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4); */
	}

	footer {
		width: 100%;
		height: 5%;
		padding: 0 0 0.75% 0;
		background-color: #f3e8db;
		text-align: center;
	}

	footer p {
		font-family: 'PlayfairDisplay-Regular';
		font-size: 1.25em;
		color: #5e7da3;
	}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/



/*----------------------------------------------------------------------- Screen (641px - 820px) ----------------------------------------------------------------------*/


@media screen and (min-width: 641px) and (max-width: 820px) {

	header {
		background-color: #F29727;
		padding: 15% 7.5% 25% 7.5%;
		margin: auto;
		text-align: center;
	}

	header h1 {
		font-size: 3.5em;
		margin: 0 0 30px 0;
		margin: 4.5% 0 30px 0;
	}

	header h2 {
		color: #f3e8db;
		font-size: 2.5em;
	}

	header h2 span {
		width: 100% !important;
		text-align: center;
		display: inline-block;
	}

	header h3 a:link, a:visited {
		font-family: 'PlayfairDisplay-Regular';
		color: #f3e8db;
	}

	header h3 a:hover, a:active {
		font-family: 'PlayfairDisplay-Regular';
		color: #f3e8db;
	}
	
	header h3 span a{
		width: 8%;
		font-size: 1em;
	}

	.LinkedIn:hover, .Insta:hover {
		fill: #f3e8db !important;
	}

/*----------------------------------------------------------------------- Screen (641px - 820px) - Main ---------------------------------------------------------------*/

	#book {
		padding: 8.5% 20% 6.5% 20%;
		color: #F29727;
	}

	#book ul {
		display: inline-block;
	}

	#book ul li {
		float: left;
		margin: 1.25%;
	}

	.nonagon {
		width: 95px;
		height: 95px;
	}

/*------------------------------------------------------------------ Screen (641px - 820px) - Contact & Footer --------------------------------------------------------*/

	#contact {
		padding: 0% 20% 2.5% 20%;
	}

	fieldset input[type=text], input[type=email] {
		width: 95%;
		height: 68px;
		margin: 0 0 .75% 0;
		padding: .75%;
	}

	fieldset textarea[type=message]{
		width: 95%;
		height: 300px;
		margin: 0 20% .75% 0;
		padding: .75%;
	}

	fieldset input[type=submit], fieldset input[type=reset] {
		width: 42.5%;
		height: 48px;
		margin: .75% 2% 0 0;
		padding: 1.5px 2px;
	}

	input[type=submit]:hover, input[type=reset]:hover,
	input[type=submit]:active, input[type=reset]:active {
		font-size: 1.25em;
		color: #f3e8db; /* rgb(42, 41, 41); */
		background: #5e7da3;
		font-family: 'PlayfairDisplay-Regular';
	/*	box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
		-webkit-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
		-moz-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4);
		-o-box-shadow: 0px .75px 0.25px rgba(63, 63, 63, .4); */
	}

	footer p {
		font-size: 1.25em;
	}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------- Screen (381px - 640px) ------------------------------------------------------------------------*/

@media screen and (min-width: 381px) and (max-width: 640px) {

	header {
		background-color: #F29727;
		padding: 25%;
		margin: auto;
		text-align: center;
	}

	header h1 {
		font-family: 'PlayfairDisplaySC-Black';
		font-size: 4.75em;
		color: #f3e8db;
		text-align: center;
		margin: 4.5% 0 30px 0;
	}

	.johannes {
		text-align: center;
	}

	.bignat {
		text-align: center;
	}

	header h2 {
		font-size: 2.5em;
		color: #f3e8db;
		text-align: center;
	}

	header h2 span {
		width: 100% !important;
		text-align: center;
		display: inline-block;
	}

	header h3 {
		font-family: 'PlayfairDisplay-Regular';
		font-size: 2em;
		color: #f3e8db;
		text-align: center;  
		text-shadow: 0px 1.5px 0.25px rgba(0, 0, 0, .4);
	}
	
/*	header h3 span {
		display: inline-block;
		width: 100% !important;
		text-align: center !important;
	}
*/

	header h3 a:link, a:visited {
		font-family: 'PlayfairDisplay-Regular';
		color: #f3e8db;
	}
	
	header h3 a:hover, a:active {
		font-family: 'PlayfairDisplaySC-Black';
		color: #f3e8db;
		text-shadow: none;
	}
	
	header h3 span a{
		width: 8%;
		font-size: 1em;
		margin: none !important;
	}

	.LinkedIn:hover, .Insta:hover {
		fill: #f3e8db !important;
	}

/*--------------------------------------------------------------------- Screen (381px - 640px) - Main ------------------------------------------------------------*/
	
	#book {
		padding: 12% 14% 8% 6%;
		font-family: 'PlayfairDisplay-Regular';
		color: #F29727;
	}

	#book ul {
		display: inline-block;
		margin-left: 20%;
	}

	#book ul li {
		float: left;
		margin: 0 0 3.25% 3.25%; 
	}

	.nonagon {
		width: 80px;
		height: 80px;
	}

/*-------------------------------------------------------------------- Screen (381px - 640px) - Contact & Footer ------------------------------------------------------------*/

	#contact {
		width: 90%;
		padding: 15% 5% 5% 5%;
	}

	fieldset input[type=text], input[type=email] {
		width: 90%;
		height: 58px;
		margin: 0 0 .85% 0;
		padding: 2%;
	}

	fieldset textarea[type=message]{
		width: 90%;
		height: 300px;
		margin: 0 20% .75% 0;
		padding: 2.5%;
		font-size: 1.35em !important;
	}

	fieldset input[type=submit], fieldset input[type=reset] {
		width: 37.5%;
		height: 58px;
		margin: 1.5% 3% 0 0;
		padding: 1.5px 2px;
		font-size: 1.35em !important;
	}

	footer p {
		font-size: 1.25em;
	}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------- Screen (20px - 380px) -----------------------------------------------------------------------*/

@media screen and (min-width: 20px) and (max-width: 380px) {

	header {
		background-color: #F29727;
		padding: 30% 25% 40% 25%;
		margin: auto;
		text-align: center;
	}

	header h1 {
		font-family: 'PlayfairDisplaySC-Black';
		font-size: 4.75em;
		color: #f3e8db;
		text-align: center;
		margin: 10% 0 30px 0;
	}

	.johannes {
		width: 100%;
	}

	.bignat {
		width: 100%;
	}

	header h2 {
		font-size: 2.5em;
		color: #f3e8db;
		text-align: center;
	}

	header h2 span {
		width: 100% !important;
		text-align: center;
		display: inline-block;
	}

	header h3 {
		font-family: 'PlayfairDisplaySC-Black';
		font-size: 2em;
		color: #f3e8db;
		text-align: center;  
		text-shadow: 0px 1.5px 0.25px rgba(0, 0, 0, .4);
	}
	
/*	header h3 span {
		display: inline-block;
		width: 100% !important;
		text-align: center !important;
	}
*/

	header h3 a:link, a:visited {
		font-family: 'PlayfairDisplay-Regular';
		color: #f3e8db;
	}
	
	header h3 a:hover, a:active {
		font-family: 'PlayfairDisplaySC-Black';
		color: #f3e8db;
		text-shadow: none;
	}
	
	header h3 span a{
		width: 8%;
		font-size: 1em;
		margin: none !important;
	}

	.LinkedIn:hover, .Insta:hover {
		fill: #f3e8db !important;
	}

/*--------------------------------------------------------------------- Screen (20px - 380px) - Main ------------------------------------------------------------*/
	
	#book {
		padding: 20% 14% 8% 6%;
		font-family: 'PlayfairDisplay-Regular';
		color: #F29727;
	}

	#book ul {
		width: 100% !important;
		display: inline-block;
	}

	#book ul li {
		float: left;
		margin: 0 0 3.25% 3.25%; 
	}

	.nonagon {
		width: 80px;
		height: 80px;
	}
/*-------------------------------------------------------------------- Screen (20px - 380px) - Contact & Footer ------------------------------------------------------------*/

	#contact {
		width: 90%;
		padding: 15% 5% 5% 5%;
	}

	fieldset input[type=text], input[type=email] {
		width: 90%;
		height: 58px;
		margin: 0 0 .85% 0;
		padding: 2%;
	}

	fieldset textarea[type=message]{
		width: 90%;
		height: 300px;
		margin: 0 20% .75% 0;
		padding: 2.5%;
		font-size: 1.35em !important;
	}

	fieldset input[type=submit], fieldset input[type=reset] {
		width: 37.5%;
		height: 58px;
		margin: 1.5% 3% 0 0;
		padding: 1.5px 2px;
		font-size: 1.35em !important;
	}

	footer p {
		font-size: 1.25em;
	}
}