@media (min-width: 641px) {
html{height:100%; background-color:#faf3ee;}
body{
	font-family: 'Source Sans Pro', sans-serif;
	color:#25221e;
	height:100%;
	margin:0;
	background: url(../images/vedana_desktop_footer.jpg) no-repeat center bottom;
	background-size: contain;
	}
/* HOMEPAGE DESKTOP /////////////////////////////////////////////////////////////////*/
	.container.homepage{
		padding-top: 240px;
		background: url(../images/vedana_desktop_logo.png) no-repeat center 40px;
		background-size: 25%;
		text-align: center;
	}
	.home_content{
		background: url(../images/vedana_desktop_visuel.png) no-repeat center -60px;
		background-size: 100%;
	}
	.home_intro{padding-top: 235px;}
	.homepage h1{font-size:1.3em;line-height:1.4em;font-weight: 400;margin:0}
	.homepage h2{font-size:1.1em;line-height:1.2em;font-weight: 200;margin:0}
	.homepage h2 br{display: none;margin-left:0.5em;}
	.homepage .logo{display: none;}
	
/* SELECT DESKTOP //////////////////////////////////////////////////////////////////////*/
	.select{margin-bottom: 10%}
	.select h1 {
		font-size:1.6em;
		line-height:1em;
		font-weight: 200;
		margin: 3em 0 0.4em 0
	}
	.oeuvre a{
		color:#25221e;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 2em;
		display: inline-block;	
		padding: 0.8em;
	}
	.oeuvre a:hover{
		color:#faf3ee;
		background-color:#25221e;
		border-radius: 4px;
		padding: 0.5em;
		margin:0.3em;
		text-decoration:none; 
	}	
	
	.select .logo{padding-top: 10%}
	.select .logo img{width: 25%;}
/* OTHER PAGES DESKTOP /////////////////////////////////////////////////////////////////*/
	
	.container{text-align: center;padding: 0 10%;}
	.logo{
		padding-top: 5%
	}
	.logo img{
	width: 20%;
	}	
	h1{
		text-transform: uppercase;
		font-weight: 400;
		font-size: 2.5em;
		line-height: 2.4em;
		margin:0.5em 0;
	}
	h2{
		font-size:1.6em;
		line-height:1em;
		font-weight: 200;
		margin: 1em 0
	}
	
	.form-check{
		display: inline-block;
		padding: 0.4em 1.2em;
		font-size: 1.4em;
		text-align: left;
		width: auto;
		margin:auto;
		/*text-transform: uppercase;*/
	}
	/* Masquer le bouton radio d'origine */
	input[type=radio]{
		display: none;
	}
	/* Affichage par défaut du bouton radio personnalisé */
	input[type=radio] + label:before {
		background: #fff;
		border: 3px solid #ccc;
		border-radius: 50%;
		margin-top: -3px;
		margin-right: 6px;
		display: inline-block;
		vertical-align: middle;
		content: '';
		width: 1.4em;
		height: 1.4em;
	}
	input[type=radio]:checked + label:before {
		background: #25221e;
		border-color: #25221e;
		box-shadow: inset 0px 0px 0px 3px #faf3ee;
	}
	label{
		cursor:pointer;
	}
	.form-control::placeholder{
		font-size: 1.1em;
		font-style: italic;
		font-weight: 200;
		color:#25221e;
		text-align: center;
	}
	.form-control{
		height: 3em;
		background-color:#faf3ee;
		border-color: #25221e;
		color:#25221e;
		font-size: 1.2em;
		margin-top:1em;
		width: 40%;
		margin: auto;
	}
	.container form span{
		font-size: 1em;
		line-height: 2.5em;
		font-weight: 200;
	}
	.container form button{
		display: block;
		margin: 2em auto;
		padding: 1em;
		border: none;
	}
/* NUAGE /////////////////////////////////////////////////////////////*/
	.nuage .logo{
		padding-top: 3%;
	}
	.nuage .logo img{
	width: 15%;
	}
	.nuage h2{
		text-transform: none;
		font-size:1.6em;
		line-height:1em;
		font-weight: 200;
		margin: 1.2em 0 0 0
	}
	.nuage h1{
		text-transform: uppercase;
		font-weight: 400;
		font-size: 2.1em;
		line-height: 1.2em;
		margin: 0.8em 0 0 0;
	}
	.nuage_block{
		/*margin-top:2em;*/
		width:100%;
		height:320px;
		/*background-color:#e3d1b8;*/
		line-height:320px;
		border: none;
	}
	.nuage .bouton{
		border: none;
		margin:0 auto;
		background: none;
		width: inherit;
	}
	
	.nuage a{
		padding:0.9em;
		width: inherit;
		background-color: #25221e;
		border-radius: 4px;
	}
	
/* REMERCIEMENTS  /////////////////////////////////////////////////////////////////*/
	.remerciements h1{margin-bottom: 0;}
	.remerciements h2{
		color:#25221e;
		font-size:1.1em;
		line-height:1.5em;
		font-weight: 200;
		margin:0
	}
	.remerciements h2 a{color:#25221e;text-decoration: underline}
	.container.remerciements{
		padding-top: 160px;
		background: url(../images/vedana_desktop_logo.png) no-repeat center 30px;
		background-size: 16%;
		text-align: center;
	}
	.remerciements .logo{display: none;}
	.remerciements_content{
		background: url(../images/vedana_desktop_visuel.png) no-repeat center -50px;
		background-size: 80%;
	}
	.remerciements_intro{padding-top: 150px;}
/* GLOBAL DESKTOP /////////////////////////////////////////////////////////////////*/
	.homepage .bouton{
		margin: 3em auto;
		background: none;
	}
	.bouton a, button{
		background-color: #25221e;
		border-radius: 4px;
		color:#faf3ee;
		text-decoration: none;
		font-weight: 200;
		font-size: 1.1em;
		line-height: 1.2em;
		padding:0.9em;
	}
}



/* RESPONSIVE MOBILE /////////////////////////////////////////////////////////////*/
/* RESPONSIVE MOBILE /////////////////////////////////////////////////////////////*/
/* RESPONSIVE MOBILE /////////////////////////////////////////////////////////////*/
/* RESPONSIVE MOBILE /////////////////////////////////////////////////////////////*/
/* RESPONSIVE MOBILE /////////////////////////////////////////////////////////////*/


@media (max-width: 640px) {
html{height:100%;}
body{
	font-family: 'Source Sans Pro', sans-serif;
	color:#3d362f;
	height:100%;
	margin:0;
	background-color:#faf3ee;
}
/* HOMEPAGE MOBILE ////////////////////////////////////////////////////////////*/
	.container.homepage{
		width:100%;
		height: 100%;
		background: url(../images/vedana__mobile_home_background.jpg) no-repeat top left;
		background-size: cover;
	}
	.homepage h1{font-size:1.3em;line-height:1.4em;font-weight: 400;margin:0}
	.homepage h2{font-size:1.1em;line-height:1.2em;font-weight: 200;margin:0}
	.home_content{width: 50%;position:absolute;right:0;height: 100vh;text-align: center;}
	.home_intro{
		width: 80%;
		margin: auto;
		position: absolute;
		left: 0%;
		right: 0%;
		top: 0vh;
		bottom: 0vh;
		height: 60%;
	}
	.homepage .logo img{
		width:90%;
		height: auto;
		margin: 20% auto 0;
	}
	.homepage .bouton{
		margin: 20% auto;
		padding:0.9em 0em;
	}
	
/* SELECT MOBILE //////////////////////////////////////////////////////////////////////*/
	.select{
		margin-bottom: 20%;
	}
	.select h1 {
		font-size:1.4em;
		line-height:1.2em;
		font-weight: 200;
		margin: 2em 0 1em 0;
	}
	.oeuvre a{
		color:#25221e;
		text-transform: uppercase;
		background:none;
		font-weight: 400;
		font-size: 2em;	
		padding: 0.3em;
		display: block;
		width: inherit;
	}
	.oeuvre a:hover{
		color:#faf3ee;
		background-color:#25221e;
		border-radius: 4px;
		padding: 0.2em;
		margin:0em;
		display: block;
		text-decoration:none; 
	}	
	
	
/* OTHER PAGES MOBILE //////////////////////////////////////////////////////////////*/
	.container{text-align: center;padding: 0 10%;}
	.logo{
		width:40%;
		margin: 0 auto;
		padding-top: 10%
	}
	.logo img{
		width:100%;
	}	
	h1{
		text-transform: uppercase;
		font-weight: 400;
		font-size: 2.1em;
		line-height: 2.4em;
		margin:0;
	}
	h2{
		font-size:1.6em;
		line-height:1em;
		font-weight: 200;
		margin: 0.8em 0 1em 0;
	}
	
	.form-check{
		display: block;
		padding: 0.4em 0.6em;
		font-size: 1.4em;
		text-align: left;
		width: 100%;
		margin:auto;
		/*text-transform: uppercase;*/
	}
	/* Masquer le bouton radio d'origine */
	input[type=radio]{
		display: none;
	}
	/* Affichage par défaut du bouton radio personnalisé */
	input[type=radio] + label:before {
		background: #fff;
		border: 3px solid #ccc;
		border-radius: 50%;
		margin-top: -3px;
		margin-right: 6px;
		display: inline-block;
		vertical-align: middle;
		content: '';
		width: 1.4em;
		height: 1.4em;
	}
	input[type=radio]:checked + label:before {
		background: #25221e;
		border-color: #25221e;
		box-shadow: inset 0px 0px 0px 3px #faf3ee;
	}
	label{
    	cursor:pointer;
		text-align: center;
		margin: auto;
		display: block;
	}
	.form-control::placeholder{
		font-size: 1.1em;
		font-style: italic;
		font-weight: 200;
		color:#25221e;
		text-align: center;
	}
	.form-control{
		height: 3em;
		background-color:#faf3ee;
		border-color: #25221e;
		color:#25221e;
		font-size: 1.2em;
		margin-top:3em;
	}
	.container form span{
		font-size: 1em;
		line-height: 2.5em;
		font-weight: 200;
	}
	.container form button{
		display: block;
		margin: 12% auto;
		padding: 1em;
		border: none;
	}
	

/* NUAGE /////////////////////////////////////////////////////////////*/
	.nuage h1{
		text-transform: none;
		font-size:1.6em;
		line-height:1em;
		font-weight: 200;
		margin: 1em 0 0 0
	}
	.nuage h2{
		text-transform: uppercase;
		font-weight: 400;
		font-size: 2.1em;
		line-height: 1.4em;
		margin:0;
	}
	.nuage_block{
		margin-top:1em;
		width:100%;
		height:200px;
		/*background-color:#e3d1b8;*/
		border:none;
		line-height:200px;
	}
	.nuage .bouton{
		border: none;
		margin: 10% auto;
		background: none;
		width: inherit;
	}
	
	.nuage a{
		padding:0.9em;
		width: inherit;
		background-color: #25221e;
		border-radius: 4px;
	}
/* REMERCIEMENTS  /////////////////////////////////////////////////////////////////*/
	.remerciements h1{
		text-transform: uppercase;
		font-weight: 400;
		font-size: 1.8em;
		line-height: 1.8em;
		margin:0;
	}
	.remerciements h2{
		color:#25221e;
		font-size:1.1em;
		line-height:1.5em;
		font-weight: 200;
		margin:0
	}
	.remerciements h2 a{color:#25221e;text-decoration: underline}
	.container.remerciements{
		padding-top: 80px;
		background: url(../images/vedana_desktop_logo.png) no-repeat center 30px;
		background-size: 50%;
		text-align: center;
	}
	.remerciements .logo{display: none;}
	.remerciements_content{
		background: url(../images/vedana_desktop_visuel.png) no-repeat center 50px;
		background-size: 100%;
	}
	.remerciements_intro{padding: 150px 0 40px 0;}
/* GLOBAL ////////////////////////////////////////////////////////////*/
	.bouton, .container form button{
		background-color: #25221e;
		border-radius: 4px;
		width: inherit;
	}
	.bouton a, .container form button{
		color:#faf3ee;
		text-decoration: none;
		font-weight: 200;
		font-size: 1.1em;
		line-height: 1.2em;
	}
	
}