/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* // RESET /////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* // GÉNÉRAL ///////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */

::selection { background-color: #060830; color: #fff;}
::-moz-selection { background-color: #060830; color: #fff;}

html { -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ }
body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	background: #fff;
	-webkit-transition: background .5s linear;
			transition: background .5s linear;
}

*, *:before, *:after {
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.return {display: block;}

a {text-decoration: none;}

/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* // ANIMATIONS ////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */



/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* // HEADER ////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */


header {
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo {margin: 0 15% 0 0;}
.logo svg {width: 100px; fill: #060830;}
.container {
	height: 100vh;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

h1 {
	font-family: 'Playfair Display', serif;
	font-size: 3em;
	line-height: 1.2;
	margin: 0 0 10%;
	max-width: 500px;
	font-weight: 700;
	color: #060830;
}

h2 {
    font-family: 'Playfair Display', serif;
	font-size: 1.313em;
	line-height: 1.2;
	margin: 5% 0 2.5%;
	font-weight: 700;
	color: #060830;
}

.btn {
	color: #060830;
	display: inline-block;
	font-weight: 700;
	position: relative;
	padding: 7px 0;
    margin: 0 15px 0 0;
}

.btn:before {
    content: '';
    display: block;
    width: 105%;
    left: -2.5%;
    height: 5px;
    border-radius: 30px;
    bottom: 8px;
    z-index: -1;
    position: absolute;
    background: #ffc556;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-transition: all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.btn:hover:before {
	background: #08D8D6;
    -webkit-transform: scaleY(2);
    -ms-transform: scaleY(2);
	transform: scaleY(2);
}



/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* // CONTENT - TEXTE ///////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */

span.design {color: #ffc556;}

p {
	font-size: 1em;
	font-weight: 400;
	line-height: 2;
}


p, a {color: #727D8C;}



p a.design:before {background: #ffc556;}
p a.ref:before {background: #08D9D6;}


/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* // LANDING ///////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape),
	only screen and (max-width : 1024px) {
		.btn:hover:before {
			background: #ffc556;
			-webkit-transform: none;
				-ms-transform: none;
					transform: none;
		}
}

@media only screen and (max-width : 768px) {
	.container {padding: 5%; min-height: 500px; position: relative;}
	h1 {font-size: 2em;}
}

@media only screen and (max-width : 580px) {
	.logo {margin: 0 0 5%;}
	header {display: block; text-align: center; max-width: 480px;}
}


/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* // FOOTER ////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */

footer {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
	width: 100%;
	padding: 0 5% 5% 5%;
	pointer-events: none;
	text-align: center;
}


footer a {pointer-events: auto; font-weight: 700;}
footer p {font-size: .65em; max-width: inherit;}


footer .mentions {position: relative;}
footer .mentions:before {
	content: '';
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 5px;
	background: #727d8c;
	position: absolute;
	left: 0;
	top: 100%;
	margin: 5px 0 0;
	-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
			transform-origin: left center;
	-webkit-transform: scaleX(0);
		-ms-transform: scaleX(0);
			transform: scaleX(0);
	-webkit-transition: .4s;
			transition: .4s;
}

footer .mentions:hover:before {
	-webkit-transform: scaleX(1);
		-ms-transform: scaleX(1);
			transform: scaleX(1);
}


/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* // OLDIES ////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */


.oldies header {
	position: absolute;
	width: 800px;
	height: 600px;
	text-align: center;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.oldies .logo,
.oldies h1 {
	margin: 0 auto 5%;
}