/*
	Généralités
*/

	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

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

	::selection{
		background: #fecc00;
		color: #fff;
	}

	html{
		font: normal 16px sans-serif;
		color: #555;
	}

	ul, nav{
		list-style: none;
	}

	a{
		text-decoration: none;
		color: inherit;
		cursor: pointer;

		opacity: 0.9;
	}

	a:hover{
		opacity: 1;
	}

	a.btn{
		color: #fff;
		border-radius: 4px;
		text-transform: uppercase;
		background-color: #2196F3;
		font-weight: 800;
		text-align: center;
	}

	hr{
		width: 150px;
		height: 2px;
		background-color: #2196F3;
		border: 0;
		margin-bottom: 80px;
	}

	section{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 125px 100px;
	}

	@media (max-width: 1000px){

		section{
			padding: 100px 50px;
		}

	}

	@media (max-width: 600px){

		section{
			padding: 80px 30px;
		}

	}

	section h3.title{
		color: #414a4f;
		text-transform: capitalize;
		font: bold 32px 'Open Sans', sans-serif;
		margin-bottom: 35px;
		text-align: center;
	}

	section p{
		max-width: 800px;
		text-align: center;
		margin-bottom: 35px;
		padding: 0 20px;
		line-height: 2;
	}

	ul.grid{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}


/*
	En-tête
*/

	header{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		padding: 35px 100px 0;
	}

	header h2{
		font-family: 'Quicksand', sans-serif;
	}

	header nav{
		display: flex;
	}

	header nav li{
		margin: 0 15px;
	}

	header nav li:first-child{
		margin-left: 0;
	}

	header nav li:last-child{
		margin-right: 0;
	}



	@media (max-width: 1000px){
		header{
			padding: 20px 50px;
		}
	}


	@media (max-width: 700px){
		header{
			flex-direction: column;	
		}

		header h2{
			margin-bottom: 15px;
		}
	}


/*
	Introduction
*/

	.introduction{
		position: relative;
		justify-content: center;
		min-height: 100vh;
		color: #fff;
		text-align: center;
	}

	.introduction .background-image{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #414a4f;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: -1;
	}

	.introduction .background-image:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #414a4f;
		opacity: 0.75;
	}

	.introduction h1{
		font: bold 60px 'Open Sans', sans-serif;
		margin-bottom: 15px;
	}

	.introduction h3{
		font: normal 28px 'Open Sans', sans-serif;
		margin-bottom: 40px;
	}

	.introduction a.btn{
		padding: 20px 46px;
	}

	@media (max-width: 800px){

		.introduction{
			min-height: 600px;
		}

		.introduction h1{
			font-size: 48px;
		}

		.introduction h3{
			font-size: 24px;
		}

		.introduction a.btn{
			padding: 15px 40px;
		}

	}


/*
	Galerie
*/

	.оur-work{
		background-color: #fff;
	}

	.gallery .grid li{
		padding: 20px;
		height: 350px;
		border-radius: 3px;

		background-clip: content-box;
		background-size: cover;
		background-position: center;
		background-color: #333;
	}

	.gallery .grid li.small{
		flex-basis: 40%;
	}

	.gallery .grid li.large{
		flex-basis: 60%;
	}


	@media (max-width: 1000px){

		.gallery .grid li.small,
		.gallery .grid li.large{
			flex-basis: 100%;
		}

	}


/*
	Caractéristiques
*/

	.features{
		background-color: #f7f7f7;
	}

	.features .grid li{
		padding: 0 30px;
		flex-basis: 33%;
		text-align: center;
	}

	.features .grid li i{
		font-size: 50px;
		color: #2196F3;
		margin-bottom: 25px;
	}

	.features .grid li h4{
		color: #555;
		font-size: 20px;
		margin-bottom: 25px;
	}

	.features .grid li p{
		margin: 0;
	}

	@media (max-width: 1000px){

		.features .grid li{
			flex-basis: 70%;
			margin-bottom: 65px;
		}

		.features .grid li:last-child{
			margin-bottom: 0;
		}

	}

	@media (max-width: 600px){

		.features .grid li{
			flex-basis: 100%;
		}

	}


/*
	Commentaires
*/

	.comments{
		background-color: #fff;
	}

	.comments .quote{
		text-align: center;
		width: 80%;
		font-size: 22px;
		font-weight: 300;
		line-height: 1.5;
		margin-bottom: 20px;
		padding: 0;
	}

	.comments .author{
		font-size: 18px;
		margin-bottom: 50px;
	}

	.comments .author:last-child{
		margin-bottom: 0;
	}

	@media (max-width: 1000px){

		.comments .quote{
			font-size: 20px;
		}

		.comments .author{
			font-size: 16px;
		}

	}


/*
	Contact
*/

	.contact{
		background-color: #f7f7f7;
	}

	.contact form{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		max-width: 800px;
		width: 80%;
	}

	.contact form input{
		padding: 15px;
		flex: 1;
		margin-right: 30px;
		font-size: 18px;
		color: #555;
	}

	.contact form .btn{
		padding: 18px 42px;
	}


	@media (max-width: 800px){

		.contact form input{
			flex-basis: 100%;
			margin: 0 0 20px 0;
		}

	}


/*
	Pied de page
*/

	footer{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		color: #fff;
		background-color: #414a4f;
		padding: 60px 0;
	}

	footer ul{
		display: flex;
		margin-bottom: 25px;
		font-size: 32px;
	}

	footer ul li{
		margin: 0 8px;
	}

	footer ul li:first-child{
		margin-left: 0;
	}

	footer ul li:last-child{
		margin-right: 0;
	}

	footer p{
		text-transform: uppercase;
		font-size: 14px;
		color: rgba(255,255,255,0.6);
		margin-bottom: 10px;
	}

	footer p a{
		color: #fff;
	}

	@media (max-width: 700px){

		footer{
			padding: 80px 15px;
		}

	}