/*
	Généralités
*/

	/*
	Bleu I2N : #1D3359
	Rouge I2N : #E83843
	*/

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

	::-moz-selection {
		background: #1D3359D9;
		color: #FFF;
	}

	::selection {
		background: #1D3359D9;
		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;
	}

	.background-image {
		background-image: url('../images/background_i2n.jpg');
	}


/*
	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;
		}

	}