/* Header */

	header {
		width: 100vw;
		height: 100vh;
		margin: 0;
	}

	/* Carousel */

	.container, .carousel, .carousel-inner, .carousel-item , .active {
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		position: absolute;
		z-index: 0;
	}

	#carousel-item-1 {
		background-image: url(../img/slide1.jpeg);
		background-size: cover;
		background-position: center;
	}

	#carousel-item-2 {
		background-image: url(../img/slide2.jpeg);
		background-size: cover;
		background-position: center;
	}

	#carousel-item-3 {
		background-image: url(../img/slide3.jpeg);
		background-size: cover;
		background-position: center;
	}

	.carousel h5 {
		font-size: 2vw;
	}

	.h5Color {
		color: #ECC852;
	}

	.headerTitle {
		width: 100vw;
		height: 90vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 2;
		position: absolute;
		background-image: url(../img/logoBackground.png);
		background-repeat: no-repeat;
		background-position: center;
	}

	.headerTitle  h1{
		margin: 0;
		padding: 0 3vw;
		width: auto;
		text-align: center;
		color: #fefefe;
		font-size: 8vw;
		text-shadow: #000 0 0 2vw;
		border-left: solid 2px #ECC852;
		border-right: solid 2px #ECC852;
		transition: 300ms;
	}

	.headerTitle h1:hover {
		padding: 0 5vw;
		letter-spacing: 5px;
	}

	.headerTitle p {
		margin: 0;
		width: auto;
		text-align: center;
		color: #fefefe;
		text-shadow: #000 0 0 2vw;
		font-size: 1.5vw;
	}

	/* Navbar */

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		width: 100vw;
		background-color: rgba(0,0,0,.7);
	}

	.navbar-brand img {
		width: 40px;
	}

	.nav-item, .nav-link {
		color: #fefefe;
		transition: 300ms;
		height: 100%;
		border-bottom: solid 2px transparent;
		margin: 0 20px;
		font-family: 'Josefin Sans', sans-serif;
	}

	.nav-item:hover, .nav-link:hover {
		border-bottom: solid 2px #ECC852;
		color: lightgrey;
	}

	.navbar-toggler {
		width: 40px;
		height: 50px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		position: fixed;
		right: 20px;
		top: 10px;
	}

	.burgerBar {
		width: 40px;
		height: 5px;
		background-color: #fefefe;
		border-radius: 20px;
	}
/* CORP */

	#corp {
		width: 100vw;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 100vh;
	}

/********/

/* A propos */

	.aPropos {
		width: 100vw;
		height: auto;
		margin: 0;
	}

	.aProposDesc {
		background-color: #000;
		padding: 5vw 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.aProposDesc {
		color: #fefefe;
	}

	.aProposDesc h2 {
		color: #ECC852;
		text-align: center;
		font-size: 3vw;
		margin-bottom: 3vw;
		padding: 0 3vw;
	}

	.aProposDesc a {
		text-decoration: none;
		color: #fefefe;
		padding: 0.5vw 1vw;
		font-size: 1.5vw;
		align-self: flex-start;
		margin-left: 6.5vw;
		border-bottom: solid 3px #e83c3e;
	}

	.aProposImg {
		padding: 5vw 0;
		/*background-color: #ECC852;*/
		background-image: url(../img/fondAPropos.png);
		background-size: cover;
		background-position: center;
	}

	.aProposImg img {
		position: relative;
		left: -3vw;
		width: 30vw;
		box-shadow: 0px 0px 3vw #000;
	}

	.aProposImgDesc p {
		position: relative;
		top: -1vw;
		left: -1vw;
		font-size: 1.5vw;
		color: #fefefe;
		background-color: #e83c3e;
		text-align: center;
		box-shadow: 0px 0px 3vw #000;
	}

/* Portfolio */

	.portfolio {
		width: 100vw;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #000;
	}

	.portfolio-head {
		width: 100vw;
		padding: 2vw 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ECC852;
	}

	.portfolio-head h2 {
		color: #000;
		text-align: center;
		font-size: 3vw;
		padding: 0 3vw;
		font-family: 'Josefin Sans', sans-serif;
		margin: 0;
	}

	.portfolio-head p {
		color: #000;
		margin: 0;
	}

	#categories {
		padding: 5vw 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#categories ul {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	#categories ul li {
		border-top: 3px solid transparent;
		font-size: 1vw;
		width: 15vw;
		text-decoration: none;
		color: #fefefe;
		list-style: none;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 2vw;
		cursor: pointer;
	}

	.activePF {
		font-size: 1vw;
		width: 12vw;
		text-decoration: none;
		color: #fefefe;
		list-style: none;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 2vw;
		border: none;
		border-bottom: solid 3px #e83c3e;		
	}

	#categories ul li p {
		margin: 0;
		padding: 0;
		text-align: center;
		font-family: 'Josefin Sans', sans-serif;
	}

	#projets {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: left;
		padding: 0 0 5vw 0;
	}

	#projets a {
		text-decoration: none;
		color: #000;
	}

	.projet {
		width: 20vw;
		margin: 2.5vw;
		height: 20vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-position: center;
		background-size: cover;
	}

	.pf-fond {
		width: 100%;
		height: 100%;
		opacity: 0;
		background-color: #fefefe;
		transition: 300ms;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-decoration: none;
	}

	.pf-fond:hover {
		width: 90%;
		height: 90%;
		opacity: 1;
	}

	.pf-fond h3 {
		font-family: 'Josefin Sans', sans-serif;
		font-size: 1.8vw;
		text-decoration: none;
	}

	.cercle {
		width: 1.5vw;
		height: 1.5vw;
		border-radius: 2vw;
		background-color: #e83c3e;
	}

	.pf-fond p {
		font-size: 1vw;
		text-align: center;
		letter-spacing: 2px;
		text-decoration: none;
	}

	#pf1 {
		background-image: url(../img/konami.png);
	}

	#pf2 {
		background-image: url(../img/galerie.png);
	}

	#pf3 {
		background-image: url(../img/nowtech.png);
	}

	#pf4 {
		background-image: url(../img/cci.jpg);
	}

	#pf5 {
		background-image: url(../img/sfr.png);
	}

	#pf6 {
		background-image: url(../img/hball.png);
	}

	#pf7 {
		background-image: url(../img/lasttrip.jpg);
	}

	#pf8 {
		background-image: url(../img/paris.png);
	}

	#pf9 {
		background-image: url(../img/droit.png);
	}

	#pf10 {
		background-image: url(../img/courtseine.jpg);
	}

	#pf11 {
		background-image: url(../img/com.png);
	}

	#pf12 {
		background-image: url(../img/fest.jpg);
	}

	#pf13 {
		background-image: url(../img/pneu.png);
	}

	#pf14 {
		background-image: url(../img/arma.png);
	}

	#pf15 {
		background-image: url(../img/mysterium.jpg);
	}

	#pf16 {
		background-image: url(../img/basket.jpg);
	}

	#pf17 {
		background-image: url(../img/sourire.png);
	}


/* Contact */

	.contact {
		width: 100vw;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.contact-head {
		width: 100vw;
		padding: 2vw 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ECC852;
	}

	.contact-head h2 {
		color: #000;
		text-align: center;
		font-size: 3vw;
		padding: 0 3vw;
		font-family: 'Josefin Sans', sans-serif;
		margin: 0;
	}

	.contact-head p {
		color: #000;
		margin: 0;
	}

	.contact-body {
		width: 100vw;
		height: auto;
		padding: 5vw 0;
		background-color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contact-body form {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	form input, textarea {
		outline: none;
		border: none;
		padding: 1vw;
		background-color: #000;
		border-bottom: solid 2px #e83c3e;
		color: #fefefe;
		font-size: 1.5vw;
		font-family: 'Josefin Sans', sans-serif;
	}

	form .inputHalf {
		width: 25vw;
		margin: 2vw 2.5vw;
	}

	form .inputFull {
		width: 55vw;
		margin: 2vw 0;
	}

	form input[type=email], form input[type=tel] {
		width: 55vw;
		margin: 2vw 0;
	}

	form textarea {
		width: 55vw;
		height: 15vw;
	}

	form input[type=submit] {
		width: 15vw;
		margin-top: 2vw;
		transition: 300ms;
	}

	form input[type=submit]:hover {
		background-color: #fefefe;
		color: #000;
	}

	::placeholder {
		color: grey;
	}

/* Footer */

	footer {
		width: 100vw;
		height: auto;
		padding: 2vw 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ECC852;
	}

	footer p {
		text-align: center;
		margin: 0;
		padding: 0;
		color: #000;
	}

	@media screen and (max-width: 1024px) {
		/* Header */
		.headerTitle h1 {
			font-size: 14vw;
		}

		.headerTitle h1:hover {
			letter-spacing: normal;
		}

		.headerTitle p {
			font-size: 5vw;
		}

		.carousel-item h5 {
			font-size: 5vw;
		}

		/* A propos */

		.aProposDesc h2 {
			font-size: 5vw;
		}

		.aProposDesc a {
			display: none;
		}

		.aProposDesc p {
			font-size: 2vw;
			line-height: 4vw;
		}

		.aProposImg img {
			width: 35vw;
			left: -4vw;
		}

		.aProposImgDesc p {
			font-size: 2vw;
			padding: .5vw 1vw;
		}

		/* Portfolio */

		.portfolio-head {
			padding: 6vw 0;
		}

		.portfolio-head h2 {
			font-size: 5vw;
		}

		.portfolio-head p {
			font-size: 2vw;
		}

		#categories {
			width: 100vw;
		}

		#categories ul {
			width: 100vw;
			margin: 0;
			padding: 0;
			justify-content: space-around;
			flex-wrap: wrap;
		}

		#categories ul li {
			width: 30vw;
			margin: 5vw 10vw;
			padding-bottom: 1vw;
		}

		#categories ul li p  {
			font-size: 2.2vw;
		}

		.projet {
			width: calc(100vw/3 - 5vw);
			height: calc(100vw/3 - 5vw);
		}

		/* Contact */

		.contact-head {
			padding: 6vw 0;
		}

		.contact-head h2 {
			font-size: 5vw;
		}

		.contact-head p {
			font-size: 2vw;
		}

		form input, textarea {
			font-size: 2.2vw;
		}

		form .inputHalf {
			width: 35vw;
			margin: 2vw 2.5vw;
		}

		form .inputFull {
			width: 75vw;
			margin: 2vw 0;
		}

		form input[type=email], form input[type=tel] {
			width: 75vw;
			margin: 2vw 0;
		}

		form textarea {
			width: 75vw;
			height: 15vw;
		}

		form input[type=submit] {
			width: 20vw;
			margin-top: 2vw;
			transition: 300ms;
		}

		/* Footer */

		footer {
			padding: 4vw 0;
		}

		footer p {
			font-size: 2vw;
		}
	}

	@media screen and (max-width: 767px) {
		.aPropos {
			flex-direction: column-reverse;
		}

		.aProposImg {
			width: 100vw;
			height: 40vw;
			background-image: url(../img/Yannis.jpg);
			background-size: cover;
			background-position: 0 -40px;
			background-repeat: no-repeat;
			display: flex;
		}

		.aProposImg img {
			display: none;
		}

		.aProposImgDesc {
			display: none;
		}
	}

	@media screen and (max-width: 740px) {

		/* A propos */

		.aProposDesc h2 {
			font-size: 8vw;
		}

		.aProposDesc p {
			font-size: 3vw;
			line-height: 6vw;
		}

		/* Portfolio */

		.portfolio-head {
			padding: 7vw 0;
		}

		.portfolio-head h2 {
			font-size: 8vw;
		}

		.portfolio-head p {
			font-size: 3vw;
		}

		#categories ul {
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		#categories ul li {
			width: 40vw;
			height: 10vw;
			background-color: #e83c3e;
			padding-bottom: 2vw;
			margin: 2vw;
			border: solid 1vw #e83c3e;
			transition: 300ms;
		}

		#categories ul li:hover {
			background-color: #000;
		}

		#categories ul li p  {
			width: auto;
			height: auto;
			font-size: 3vw;
			color: #fefefe;
			margin-top: 2vw;
		}

		.projet {
			width: calc(100vw/3 - 5vw);
			height: calc(100vw/3 - 5vw);
		}

		/* Contact */

		.contact-head {
			padding: 7vw 0;
		}

		.contact-head h2 {
			font-size: 8vw;
		}

		.contact-head p {
			font-size: 3vw;
		}

		#formPart1 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		form input, textarea {
			font-size: 3vw;
		}

		form .inputHalf {
			width: 90vw;
			margin: 4vw 0;
		}

		form .inputFull {
			width: 90vw;
			margin: 4vw 0;
		}

		form input[type=email], form input[type=tel] {
			width: 90vw;
			margin: 4vw 0;
		}

		form textarea {
			width: 90vw;
			height: 25vw;
		}

		form input[type=submit] {
			width: 20vw;
			margin-top: 3vw;
			transition: 300ms;
		}

		/* Footer */

		footer {
			padding: 5vw 0;
		}

		footer p {
			font-size: 3vw;
		}

	}

	@media screen and (max-width: 480px) {
		/* Header */

		.aProposImg {
			background-position: 0 -35px;
		}

		/* A propos */

		.aProposDesc h2 {
			font-size: 9vw;
		}

		.aProposDesc p {
			font-size: 3.5vw;
			line-height: 7vw;
		}

		/* Portfolio */

		.portfolio-head {
			padding: 8vw 0;
		}

		.portfolio-head h2 {
			font-size: 9vw;
		}

		.portfolio-head p {
			font-size: 3.5vw;
		}

		#categories ul li {
			width: 40vw;
			height: 10vw;
			background-color: #e83c3e;
			padding-bottom: 2vw;
			margin: 2vw;
			border: solid 1vw #e83c3e;
			transition: 300ms;
		}

		#categories ul li:hover {
			background-color: #000;
		}

		#categories ul li p  {
			width: auto;
			height: auto;
			font-size: 3.5vw;
			color: #fefefe;
			margin-top: 2vw;
		}

		.projet {
			width: calc(100vw/2 - 5vw);
			height: calc(100vw/2 - 5vw);
		}

		/* Contact */

		.contact-head {
			padding: 8vw 0;
		}

		.contact-head h2 {
			font-size: 9vw;
		}

		.contact-head p {
			font-size: 3.5vw;
		}

		form input, textarea {
			font-size: 3.5vw;
		}

		form input[type=text] {
			width: 90vw;
			margin: 4.5vw 0;

		}

		form input[type=email], form input[type=tel] {
			width: 90vw;
			margin: 4.5vw 0;
		}

		form textarea {
			width: 90vw;
			height: 25vw;
		}

		form input[type=submit] {
			width: 20vw;
			margin-top: 3.5vw;
			transition: 300ms;
		}

		/* Footer */

		footer {
			padding: 6vw 0;
		}

		footer p {
			font-size: 3.5vw;
		}
	}