/* CSS Document */

body {
	background: #262626;
	color: white;
	font-family: 'Cormorant Infant', serif;
	overflow-x: hidden;
}

#menu ul {
	display: flex;
}

#menu li {
	padding: 15px 40px 5px;
	flex-basis: 20%;
	text-align: right;
}

#menu li:first-child {
	flex-basis: 80%;
	text-align: left;
	font-style: italic;
}

.container {
	width: 100%;
	margin: auto;
}

#websites {
	border-left: 1px solid white;
	margin-left: 50px;
	position: relative;
}

#accueil .gauche p, #webd p {
	font-size: 12vw;
	padding-left: 20px;
	line-height: 22vh;
	text-transform: uppercase;
}

#webd {
	font-style: italic;
	text-align: right;
	padding-right: 20px;
}

#accueil img {
	position: absolute;
	bottom: 8vh;
	right: 10vw;
	width: 23%;
}

#accueil .droite p {
	font-size: 15px;
	color: #FFBBF0;
	padding-top: 13vh;
	width: 30%;
	margin-left: 15%;
	text-align: justify
}

#description {
	display: flex;
}

.description h2 {
	font-size: 56px;
font-weight: bold;
}

.description {
	padding-left: 45px;
}

.description p {
	padding-top: 20px;
	width: 75%;
	line-height: 20px;
}

#section1 {
	position: absolute;
	rotate: 270deg;
	left: -50px;
	bottom: 18px;
	font-style: italic;
	font-size: 20px;
}

#scroll {
	padding-left: 40px;
}

#parallax {
  position: relative;
  width: 100%;
  height: 45vh;
  background-image: url("img/portrait.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-position: 50% 50%;
	background-size: 20%;
}

.circle {
	padding: 30vh;
}

.circle img {
	margin: auto;
	display: block;
	animation: rotate 5s infinite linear;
}

@keyframes rotate {
	from {
    transform: rotate(0deg)
  }
  
  to {
    transform: rotate(360deg);
  }
}

#menu a {
  position: relative;
  cursor: pointer;
  padding: 8px 0;
  color: #fff;
  text-decoration: none;
  width: 50%;
}
#menu a:hover{
  color: #fff;
  text-decoration: none;
}

#menu a:before, a:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -2px;
  background: #fff;
}

#menu a:before {
  left: 0;
}
#menu a:after {
  right: 0;
  background: #fff;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#menu a:hover:before {
  background: #fff;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#menu a:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}

.site img {
	width: 30vw;
	filter: grayscale(100%);
	transition: all linear 0.2s;
}

.site img:hover {
	filter: grayscale(0%);
}

.site {
	padding: 3vh 6vw;
	display: flex;
}

#graphisme {
	position: relative;
	margin-top: 10%;
}

#title {
	border-bottom: 1px solid white;
	padding-bottom: 15px;
	width: 50%;
	display: block;
	text-align: right;
	margin: 20px 0px 100px 47%;
	font-style: italic;
	font-size: 20px;
}

.gp p:nth-child(4) {
	border-top: 2px dotted white;
	border-bottom: 2px dotted white;
	padding: 15px 0;
	margin-top: 15px;
}

.gp {
	float: left;
	clear: both;
	padding: 30px 0;
}

.legend {
	display: flex;
	justify-content: space-between;
	padding-bottom: 15px;
}

.legend p:first-child {
	text-transform: uppercase;
	font-weight: bold;
}

.legend p:last-child {
	text-align: right;
}

#allocine {
	margin-left: 16%;
}

#fff {
	float: right;
	margin-right: 5%;
	margin-top: 60%;
}

#ars {
	margin-top: 40%;
	float: right;
	margin-right: 5%;
}

#visit {
	float: right;
margin-right: 5%;
	padding-top: 42%;
}

#specimen, #affiche, #posters {
	margin-left: 5%;
}

#posters img {
	width: 100%;
}

#posters {
	margin-top: 100%;
}

#specimen {
	margin-top: 84%;
}

.col2 {
	width: 50%;
}

#graphisme_p {
	display: flex;
}

#footer {
	display: flex;
	border-top: 5px solid white;
	justify-content: space-between;
	font-size: 45px;
	padding: 2% 5%;
	line-height: 54px;
}

#footer a {
	color: white;
}

#signature {
	display: flex;
	justify-content: space-between;
	padding: 15px;
}

#signature a {
	color: white;
}

#signature p:nth-child(1) {
	flex: 20;
}

#signature p:nth-child(2) {
	flex: 1
}

.date {
	font-size: 13px;
	padding-bottom: 5px;
	font-style: italic;
}

a[data-fancybox] img {
  cursor: zoom-in;
}

.fancybox__caption {
  text-align: center;
	width: 50%;
}

@media (max-width: 765px) {
	#description {
		display: block;
	}
	
	#accueil .gauche p, #webd p {
		font-size: 15vw;
		line-height: 8vh;
	}
	
	#accueil .droite p {
		width: 75%;
		padding: 0;
		margin: 15px;
	}
	
	#parallax {
		background-size: 70vw;
		height: 80vh;
	}
	
	#menu li {
		flex-basis: 23%;
		padding: 15px 12px 5px;
  		text-align: center;
}
	.gauche {
		padding-top: 7%;
	}
	
#menu li:first-child {
		flex-basis: 13%;
	}
	
	.circle {
		padding: 0 0 15vh;
	}
	
	.site {
		display:block;
	}
	
	.site img {
		width: 76vw;
	}
	
	.description {
		padding: 0;
		text-align: center;
	}
	
	.description p {
		width: 100%;
	}
	
	.description h2 {
		padding-top: 20px;
	}
	
	#websites {
		margin-left: 35px;
	}
	
	.col2 {
		width: 100%;
	}
	
	#graphisme_p {
		display: block;
	}
	
	.gp {
		float: inherit;
	clear: none;
	padding: 0;
	}
	
	#specimen, #affiche, #allocine, #fff, #visit, #ars {
		padding: 10% 5%;
		margin: 0;
	}
	
	.gp img {
		width: 100%;
	}
	
	#visit {
		float: inherit;
	}
	
	#footer {
		font-size: 15px;
		line-height: 15px;
	}
	
	#signature p:nth-child(1) {
		flex: 50%;
	}
	
	#posters {
		margin-top: 0;
	}
}