@charset "UTF-8";
/* CSS Document */


* {
	box-sizing: border-box;
}

body {
	width: 100%;
	margin: 0 auto;
	background-color: #D7C5FC;
	font-family: 'Josefin Sans', sans-serif;
	overflow-x: hidden !important;
}

img {
	font-size: 12px;
	font-weight: lighter;
	font-style: italic;
}

.logoCess {
	max-width: 200px;
}



h1 {
	font-family: 'Chelsea Market', cursive;
	font-size: 30px;
	margin-bottom: 0;
	font-weight: normal;
	padding-bottom: 20px;
}

p {
	padding-bottom: 15px;
	font-size: 12px;
}

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    text-decoration: none;
    color: black;
}

a:hover {
	cursor: pointer;
}

ul, li {
	padding: 0;
	margin: 0;
}

.underlineLink {
    text-decoration: underline;
}

.bouton {
	font-family: 'Chelsea Market', cursive;
	border: 1px solid black;
	border-radius: 50px;
	font-size: 16px;
	padding: 5px 10px;
	margin: 10px;
	line-height: 50px;
}

.bouton:hover {
	background-color: black;
	color: #D7C5FC;
}

* {
outline: 0;
}



/* MENU */

header img {
	display: none;
}

header a {
	font-family: 'Chelsea Market', cursive;
	text-decoration: none;
	color: black;
}

header a:hover {
	color: white;
}

header li {
	list-style: none;
	padding: 0;
}

header ul {
	padding: 0;
	margin: 0;
}

header nav {
	position: fixed;
	top: 50%;
	right: -130px;
	transform: translateY(-50%) rotate(90deg);
	z-index: 1;
}

header nav ul {
	display: flex;
	justify-content: center;
}

header nav li {
	padding: 15px !important;
	font-size: 13px !important;
	text-transform: uppercase;
}



/* menu mobile */

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

	header nav.ouvert {
		left: 0;
		top: 0;
		transition: 1.5s;
		transform: rotate(0deg);
		background-color: white;
		height: 100%;
	}

	header nav {
		position: fixed;
		top: 0;
		transform: translate(-50%);
		left: -100%;
		transition: 1.5s;
		transform: rotate(0deg);
		height: 100vh;
		width: 100vw;
		z-index: 2;
	}

	header nav ul {
		flex-direction: column;
		height: 100%;
		text-align: center;
		padding: 0;
	}

	header nav li {
		padding: 0;
		line-height: 50px;
	}

	header nav a {
		padding: 10px 100px;
		font-size: 20px;
	}

	header nav a:hover {
		color: #D1B0FE;
	}

	header .menu {
		position: fixed;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		z-index: 3;
		width: 50px;
		height: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 1%;
	}

	header .cercle {
		height: 10px;
    	width: 10px;
    	border-radius: 100%;
    	background-color: black;
    	transition: 1.5s;
	}

	header .menu.actif .un {
		transform: translateY(17px);
		height: 9px;
    	width: 9px;
	}

	header .menu.actif .trois {
		transform: translateY(-17px);
		height: 9px;
    	width: 9px;
	}

	footer {
		display: none;
	}
	
	.cessSlider footer {
		display: block;
	}


}





/* MAIN CESS */

main.cessSlider {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 300px;
}

.cessSlider h1 {
	font-size: 40px;
	margin: 0;
}

.cessSlider .bouton {
	line-height: normal !important;
}

.cessSlider p {
	font-size: 25px;
	padding-bottom: 0;
	margin-top: 0px;
}

.cessSlider #slider {
	width: 100%;
  max-width:600px;
  height:300px;
}
.cessSlider #slider #slides {
  width:inherit;
  height:inherit;
}
.cessSlider #slider .slide {
  width:inherit;
  height:inherit;
  position:absolute;
  display: flex !important;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  display:none !important;
}

.cessSlider #slider .active-slide {
	display:block;
  display: flex !important;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
}
.cessSlider #slider-nav {
  width:inherit;
  text-align:center;
  position:absolute;
  bottom:-46px;
}
.cessSlider #slider-nav ul {
  list-style:none;
  margin:0;
  padding:0;
  display:inline-block;
}
.cessSlider #slider-nav ul li.dot {
  display:inline;
  font-size:40px;
  color: white;
  cursor:pointer;
}
.cessSlider #slider-nav ul li.active-dot {
  color: black;
}
.cessSlider #slider-nav #update-btn {
  position:absolute;
  top:10px;
  right:20px;
  display:none;
}
.cessSlider #slider-nav #update-btn img {
  width:40px;
  height:40px;
  padding:0 5px;
  cursor:pointer;
}
.cessSlider #slider #dialog {
  z-index:1;
  width:35%;
  height:35%;
  color:white;
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.4em;
  border-radius:5px;
  position:absolute;
  top:33%;
  left:33%;
  display:none;
}
.cessSlider #slider #dialog #transparent {
  width:100%;
  height:100%;
  background-color:black;
  border-radius:5px;
  opacity:0.7;
}
.cessSlider #slider #dialog * {
  position:absolute;
}
.cessSlider #slider #dialog #msg {
  top:10%;
  left:10%;
}
.cessSlider #slider #dialog #input {
  width:75%;
  height:10%;
  border-radius:5px;
  font-size:0.8em;
  padding:2%;
  top:30%;
  left:10%;
}
.cessSlider #slider #dialog #ok {
  width:25%;
  height:15%;
  padding:2%;
  background-color:black;
  border-radius:5px;
  text-align:center;
  cursor:pointer;
  top:60%;
  right:40%;
}
.cessSlider #slider #dialog #cancel {
  width:25%;
  height:15%;
  padding:2%;
  background-color:black;
  text-align:center;
  border-radius:5px;
  cursor:pointer;
  top:60%;
  right:9%;
}

.cessSlider #slider .arrow {
  width:45px;
  height:45px;
  display:none;
}
.cessSlider #slider .left, #slider .right {
  position:absolute;
  top:45%;
  cursor:pointer;
}
.cessSlider #slider .left {
  left:2%;
}
.cessSlider #slider .right {
  right:2%;
}








/* MAIN BIO */

#bio {
	background-color: #C5FCC5;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	width: 90%;
}

#bio main {
	margin-top: 150px;
}

#bio .logoCess {
	padding-bottom: 30px;
}

#bio .bouton:hover {
	color: #C5FCC5;
}

#bio section {
	margin-bottom: 100px;
}

#bio p.intro {
	max-width: 400px;
	width: 90%;
	margin: 0 auto;
	font-size: 17px;
	line-height: 20px;
}

#bio h2 {
	font-size: 16px;
	margin: 0;
	padding: 0;
}

#bio h3 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: lighter;
	margin: 3px 0 10px 0;
	padding: 0;
}

#bio li {
	list-style: none;
	font-size: 14px;
	font-weight: normal;
}

#bio p.date {
	font-size: 12px;
	font-weight: lighter;
	padding-bottom: 0;
}

#bio nav li {
	font-size: 12px;
}

#bio .containerCV {
	display: flex;
	justify-content: center;
}

#bio .elementCV {
	text-align: left;
	padding: 20px;
	width: 50%;
}

#bio .ferD {
	text-align: right;
}

@media only screen and (max-width: 854px) {
	
	#bio .containerCV {
		flex-direction: column;
	}
	
	#bio .elementCV {
		text-align: center;
		width: 100%;
	}
}

@media only screen and (max-width: 414px) {
	#bio main {
		margin-top: 50px;
	}
	
	#bio .containerCV {
		margin-top: 0;
	}
	
	#bio section {
		margin-bottom: 50px;
	}
}





/* MAIN PORTFOLIO */

body#portfolio {
	background-color: white;
	max-width: 960px;
	text-align: center;
}


/* Filtres */

		#portfolio .nav--filtres ul {
			display: flex;
			justify-content: space-between;
			list-style: none;
			padding: 0;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			top: 10%;
			line-height: 36px;
			z-index: 1;
		}

		#portfolio .nav--filtres li {
			cursor: pointer;
			font-family: 'Chelsea Market', cursive;
			border: 1px solid black;
			border-radius: 50px;
			font-size: 16px;
			padding: 0 10px;
			margin: 10px;
			background: white;
		}

		#portfolio .nav--filtres li:hover {
			color: white;
			background: black;
		}


		#portfolio .nav--filtres a {
			font-family: 'Chelsea Market', cursive;
			border: 1px solid black;
			background-color: white;
			border-radius: 50px;
			font-size: 16px;
			padding: 5px 10px;
			margin: 10px;
		}

		#portfolio .nav--filtres a:hover {
			background: black;
			color: white;
		}

		#portfolio .nav--filtres a.active {
			background: black;
			color: white;
		}


		@media only screen and (max-width: 627px) {
			#portfolio .nav--filtres ul { 
		 		flex-wrap: wrap;
		 		justify-content: center;
		 		align-items: center;
		 		top: 0%;
			}

			#portfolio .mosaique ul {
			margin-top: 15%;
			}
		}

		@media only screen and (max-width: 489px) {
			#portfolio .nav--filtres ul { 
		 		flex-direction: column;
		 		top: 0%;
				padding-top: 20px;
				position: absolute;
			}
			
			#portfolio .nav--filtres li { 
		 		margin: 3px;
			}

			#portfolio .mosaique ul {
				margin-top: 66% !important;
			}
			
			#portfolio .mosaique {
				padding-top: 40px;
			}
		}

		



		/* Mosaïque */
    	
    	#portfolio .mosaique {
			padding-bottom: 100px;
		}	    	

		#portfolio .mosaique ul {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 25%;
		}

		#portfolio .mosaique li {
			display: flex;
			width: 240px;
			height: 240px;
			padding: 5px;
		}

		#portfolio .mosaique img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			-webkit-filter: grayscale(1);
		}

		#portfolio .mosaique img:hover {
			-webkit-filter: grayscale(0);
			transition: 0.3s;
		}

		#portfolio .mosaique img.active {
			-webkit-filter: grayscale(0);
		}



		
/* MAIN PROJET */
		

body#projet {
	max-width: 960px;
	background-color: white;
}


#projet p.categorie {
	font-family: 'Chelsea Market', cursive;
}


#projet header a:hover, #portfolio header a:hover {
	color: #D7C5FC;
}

#projet main {
	margin: 150px 30px 0 30px;
	text-align: center;
	lax-width: 960px;
}

#projet section {
	margin-bottom: 100px;
}

#projet h2 {
	font-size: 14px;
	font-weight: lighter;
	text-transform: uppercase;
	margin-top: 0;
}

#projet a:hover {
	color: white;
}

#projet p.intro {
	max-width: 500px;
	margin: 0 auto;
	font-size: 17px;
	margin-top: 50px;
}

#projet img {
	margin: 0 auto;
	max-width: 90%;
}

#projet h3 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: lighter;
}

#projet p {
	font-size: 12px;
	padding: 0;
	margin-bottom: 30px;
}

#projet .bouton.top, #projet .bouton.reseaux {
	position: relative;
	padding: 5px 16px;
}

#projet .bouton.top img, #projet .bouton.reseaux img {
	position: absolute;
	width: 22px;
	left: 5px;
	bottom: 6px;
	min-width: 17px;
}

#projet .bouton.top:hover #arrow, #projet .bouton.reseaux:hover #soundcloud, #projet .bouton.reseaux:hover #facebook, #projet .bouton.reseaux:hover #instagram {
	display: none;
}

#projet .mockupWeb {
	padding-bottom: 30px;;
}

#sokoLogo {
	width: 300px;
}


@media only screen and (max-width: 414px) {
	#projet main {
		margin: 30px 30px 0 30px;
		text-align: center;
	}

	#projet section {
		margin-bottom: 50px;
	}
	
	#projet h1 {
		font-size: 18px;
	}

	#projet h2 {
		font-size: 10px;
		margin-bottom: 10px;
	}
	
	#projet p.intro {
		margin-top: 30px;
	}
}


		/* OSO */

		video {
			width: 100%;
		}


		/* LOUYETU */

		.pageWeb {
			border: 1px grey solid;
		}

		/* PLAYGROUND */

		img.plgrnd {
			max-width: 250px !important;
		}







/* CONTACT */

body#contact {
	background-color: #F9EFA5;
	max-width: 960px;
	width: 90%;
	text-align: center;
	margin: 0 auto;
}

#contact main {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#contact .bouton:hover {
	color: #F9EFA5;
}

#contact h1 {
	font-size: 25px;
}

#contact #telMobile {
	display: none;
}	

#contact #telDesktop {
	margin: 30px 0;
}


@media only screen and (max-width: 414px) {
	
	#contact #telDesktop {
		display: none;
	}		
	
	#contact #telMobile {
		display: inline;
		margin: 30px 0;
	}
	
}


/* MENTIONS LEGALES */

#mentionsLegales {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	width: 90%;
}

#mentionsLegales section {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}




/* FOOTER */

footer {
	position: fixed;
	left: -115px;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
}

footer p.footer {
	font-size: 9px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.footer a:hover {
	color: white;
}

#portfolio .footer a:hover {
	color: #D7C5FC;
}