@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
@font-face {
    font-family: 'nugia_vintageregular';
    src: url('fonts/nugiavintage-webfont.woff2') format('woff2'),
         url('fonts/nugiavintage-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'muloka_kerashregular';
    src: url('fonts/mulokakerash-bwg4x-webfont.woff2') format('woff2'),
         url('fonts/mulokakerash-bwg4x-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



*{
	margin:0;
	padding:0;
	font-family:'Quicksand', Calibri,sans-serif;
	font-size:16px;
	line-height:1.7;
}
h1,h2,h3{
		
}
h1,.fauxh1{
	font-size:1.7rem;
	font-weight:600;
}
h2,.fauxh2{
	font-family:'muloka_kerashregular',Arial,sans-serif;
	font-size: 1.7rem;
	font-weight: 100;
	letter-spacing: 1.2px;
	line-height: 1.4;
}
h3,.fauxh3{
	font-size:1.2rem;
	font-weight:600;
}
p,
.faux-p,
h2.faux-p{
	font-size:1rem;
	font-family:'Quicksand', Calibri,sans-serif;
	line-height:1.7;
	letter-spacing:0;
}
p,
.faux-p,
.gros-p,
.big-p{
	font-family:'Quicksand', Calibri,sans-serif;
	margin:10px 0 15px 0;
	font-weight:400;
	text-transform:none;
}
.gros-p,.gros-p b,.gros-p strong{
	font-size:1.5rem;
}
.big-p,.big-p b,.big-p strong{
	font-size:2rem;
}
.bigbig-p{
	font-size:2.6rem;
}
b,strong{
	font-weight:600;
}
span{
	display:block;
}
span.noblock{
	display:inline-block;
}
a{
	text-decoration:none;
	color:#;
}
ul{
	list-style-type:none;
}
ul.liste{
	list-style-type:disc;
	margin-left:25px;
}


/* /// COULEURS /// */
.bleu{
	color:#2f3e90;
}
.bg-bleu{
	background-color:#2f3e90;
}
.border-bleu{
	border:4px solid #2f3e90;
}

.corail{
	color:#ed6f41;
}
.bg-corail{
	background-color:#ed6f41;
}
.border-corail{
	border:4px solid #ed6f41;
}

.rouge{
	color:#e83f3d;
}
.bg-rouge{
	background-color:#e83f3d;
}
.border-rouge{
	border:4px solid #e83f3d;
}

.rose{
	color:#ee7160;
}
.bg-rose{
	background-color:#ee7160;
}
.border-rose{
	border:4px solid #ee7160;
}


.noir{
	color:#1d1d1d;
}
.bg-noir{
	background-color:#1d1d1d;
}
.border-noir{
	border:4px solid #1d1d1d;
}

.blanc{
	color:#ffffff;
}
.bg-blanc{
	background-color:#ffffff;
}
.border-blanc{
	border:4px solid #ffffff;
}

.bg-noir,.bg-noir a,.bg-noir p,.bg-noir span,.bg-noir b,.bg-noir strong,.bg-noir h1,.bg-noir h2,.bg-noir h3,
.bg-bleu,.bg-bleu a,.bg-bleu p,.bg-bleu span,.bg-bleu b,.bg-bleu strong,.bg-bleu h1,.bg-bleu h2,.bg-bleu h3,
.bg-corail,.bg-corail a,.bg-corail p,.bg-corail span,.bg-corail b,.bg-corail strong,.bg-corail h1,.bg-corail h2,.bg-corail h3,
.bg-rouge,.bg-rouge a,.bg-rouge p,.bg-rouge span,.bg-rouge b,.bg-rouge strong,.bg-rouge h1,.bg-rouge h2,.bg-rouge h3,
.bg-rose,.bg-rose a,.bg-rose p,.bg-rose span,.bg-rose b,.bg-rose strong,.bg-rose h1,.bg-rose h2,.bg-rose h3{
	color:#ffffff;
}


/* /// WIDTH FLEX & CO /// */
.flexblock{
	display:flex;
}
.flexreverse{
	flex-direction:row-reverse;
}
.items-center{
	align-items:center;
}
.items-end{
	align-items:flex-end;
}
.items-start{
	align-items:flex-start;
}
.justif-center{
	justify-content:center;
}
.wrap{
	flex-wrap:wrap;
}
.midwidth{
	width:46%;
}
.un-tiers{
	width:29%;
}
.deux-tiers{
	width:73%;
}
.un-quart{
	width:21%;
}
.trois-quart{
	width:71%;
}
.midwidth,
.un-tiers,
.deux-tiers,
.un-quart,
.trois-quart{
	margin:20px 2%;
}
.capsule{
	max-width:1200px;
	margin:0 auto;
}
.capsule600{
	max-width:600px;
	margin:0 auto;
}
.capsule1000{
	max-width:1000px;
	margin:0 auto;
}

.transition{
	transition:0.4s;
}

section.all,
header,footer{
	width:80%;
	padding:30px 10%;
	margin:30px auto;
}

button.bta{
	display: block;
	width: fit-content;
	padding: 2px 20px 4px 20px;
	margin: 30px auto;
	border: none;
	box-shadow: none;
	border-radius: 50px;
	transform: rotate(-5deg);
	transition:0.4s;
}
button.bta a{
	color:#ffffff;
	font-size:1rem;
	font-weight:600;
}
button.bta.bta-corail{
	background-color:#ed6c41;
}

button.bta.bta-bleu{
	background-color:#2f3e90;
}

button.bta.bta-blanc{
	background-color:#ffffff;
}
button.bta.bta-blanc a{
	color:#ed6c41;
}

button.bta.bta-clair{
	background-color:rgba(255,255,255,0.5);
}

button.bta.bta-corail:hover,
button.bta.bta-bleu:hover{
	background-color:#1d1d1d;
	transition:0.4s;
	transform: rotate(0deg);
}

figure.img-bg{
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

img{
	width:100%;
	height:auto;
}

.mt250{
	margin-top:250px !important;
}

.relative{
	position:relative;
}
.absolute{
	position:absolute;
}
.z3{
	z-index:3;
}




/* /// HEADER /// */
header#header{
	margin-top:0;
	padding-top:10px;
	padding-bottom:90px;
}
aside.top{
	justify-content:space-between;
}
aside.top img.transition{
	width:21px;
}
aside.top a,
aside.top p{
	font-size:0.85rem;
}
aside.top a img{
	margin-right:5px;
	width:30px;
}
aside.top a:hover > aside.top a img{
	margin-right:8px;
}
 /* /// MENU PRINCIPAL /// */
nav#main-menu{
	margin:0px auto;
}
nav#main-menu ul{
	justify-content:space-between;
}
nav#main-menu ul li, 
nav#main-menu ul li a{
	text-transform:uppercase;
	font-weight:500;
	font-size:1.1rem;
}
li.logo-java-top{
	max-width:350px;
}

/* mascotte */
figure.mascotte-top{
	position:relative;
	margin:-150px auto -350px 5%;
	width:fit-content;
	animation: cauda 7s linear infinite;
}
figure.mascotte-top img{
	width:300px;
	display:block;
}
span.verbes-mascotte{
	position:absolute;
	color:#ed6f41;
	font-weight:600;
}

@keyframes cauda {
  0% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}
@keyframes caudabis {
  0% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(-1deg);
  }
}

span.verbes-mascotte.mangez{
	top: 70px;
  right: 20px;
  transform: rotate(-20deg);
}
span.verbes-mascotte.buvez{
	top: 120px;
  right: 10px;
  transform: rotate(-10deg);
}
span.verbes-mascotte.dansez{
	top: 160px;
  right: -30px;
  transform: rotate(-10deg);
}
span.verbes-mascotte.partagez{
	top: 210px;
  right: -60px;
  transform: rotate(-5deg);
}



/* ANIMATIONS ELEMENTS */
/*animation element*/
.animation-element {
  opacity: 0;
}

/*animation element sliding left*/
.animation-element.slide-left {
  opacity: 0;
  transition: all 800ms linear;
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.slide-right {
  opacity: 0;
  transition: all 800ms linear;
  transform: translate3d(100px, 0, 0);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.slide-up {
  opacity: 0;
  transition: all 800ms linear;
  transform: translate3d(0, 100px, 0);
}

.animation-element.slide-up.in-view {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

@-webkit-keyframes fadeIn { 
0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn { 
0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn { 
 0%   { opacity: 0; }
  100% { opacity: 1; } 
}

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:2s;
	-moz-animation-duration:2s;
	animation-duration:2s;
}

.fade-in.fade-in-one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.fade-in-two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay:1.7s;
animation-delay: 1.7s; 
}

.fade-in.fade-in-three {
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
animation-delay: 2.6s;
}



/* ///// PAGE ACCUEIL ///// */
aside.horaires-home span{
	display:inline-block;
	font-weight:500;
}

/* cadres verbes */
section.full{
	width:90%;
	margin:20px 5%;
}
section.verbes-home{
	justify-content:space-around;
}
article.cadre-verbe{
	display:block;
	width:250px;
	height:250px;
	padding:20px;
	position:relative;
	margin:0 2%;
}
span.alcool{
	font-size:0.7rem;
	line-height:1.4;
}
figure.picto-verbe{
	height:35px;
	width:auto;
	position:absolute;
	top:200px;
	right:15px;
}

/* /// bienvenue /// */
figure.right-bienvenue{
	height:1100px;
	right:0;
	top:-390px;
}

/* /// esprit java /// */
figure.left-esprit{
	bottom: -50px;
	left: 0;
	height: 750px;
	z-index: -1;
}


/* /// privatisation home /// */
figure.right-private{
	right:0;
	top:30px;
	height:750px;
}
aside.privatisation-home span{
	display:flex;
	align-items:center;
}
aside.privatisation-home span:before{
	content:" ";
	width:30px;
	height:1px;
	background-color:#ffffff;
	margin-right:10px;
}


/* mascotte bottom home */
figure.mascotte-home-bottom{
	width: 260px;
	margin: 25px auto 0 auto;
}

/* /// feed insta /// */
.carre-insta{
	width:170px;
	height:170px;
	margin:0 5px;
}
div.insta-footer{
	width:150px;
	height:150px;
	text-align:center;
	padding:10px;
}
div.insta-footer p{
	font-size: 1rem;
	margin: 5px auto;
	font-weight: 600;
}
div.insta-footer p.suivez{
	margin-top:15px;
	margin-bottom:10px;
	font-size:1.1rem;
}
div.insta-footer p,
div.insta-footer img{
	transform: rotate(-5deg);
}
div.insta-footer img{
	width:38px;
}


/* /// FOOTER /// */
footer#footer{
	margin-bottom:0 !important;
	padding-bottom:10px;
	padding-top:150px;
	margin-top:-70px;
}
nav#menu-legal ul li{
	margin:0 5px;
}
nav#menu-legal ul li a{
	font-size:0.8rem;
}

figure#logo-footer{
	width:200px;
}

footer div.bloc-footer{
	width:35%;
}
footer div.bloc-footer p,
footer div.bloc-footer a,
footer div.bloc-footer span{
	font-size:0.9rem;
	margin:0 auto;
}
div.right-footer{
	text-align:right;
}



/* /// PAGE PRIVATISATION /// */
article.picto-priva{
	text-align:center;
}
figure.right-pq-priva{
	top:-170px;
	right:0;
	height:850px;
}

/* pictos bg corail */
article.picto-priva figure{
	width:65px;
	height:65px;
	margin:0 auto;
}


/* focus photos */
section.photos-priva{
	margin-bottom:190px;
}
section.photos-priva figure{
	width:220px;
	height:220px;
}
section.photos-priva figure figcaption{
	position: absolute;
	bottom: -70px;
	left: 10%;
	transform: rotate(-5deg);
	color:#2f3e90;
	font-size:0.9rem;
	line-height:1.4;
}
figure.mascotte-priva-bottom img{
	width: 310px;
	margin: -200px auto 0 -75px;
	display: block;
	z-index: 3;
	position: relative;
}
section.photos-priva figure.fleche1 figcaption:before,
section.photos-priva figure.fleche2 figcaption:before,
section.photos-priva figure.fleche3 figcaption:before{
	display: inline-block;
	position: absolute;
}
section.photos-priva figure.fleche1 figcaption:before{
	content:url('img/fleche1.png');
	bottom: -10px;
	left: -35%;
}
section.photos-priva figure.fleche2 figcaption:before{
	content:url('img/fleche2.png');
	bottom: 5px;
	left: -15%;
}
section.photos-priva figure.fleche3 figcaption:before{
	content:url('img/fleche3.png');
	bottom: 10px;
	left: -25%;
}



/* /// PAGE CONTACT /// */
.coordonnees a.flexblock img{
	width:35px;
	margin-right:15px;
}
.coordonnees a.flexblock{
	color:#2f3e90;
	font-size:1.25rem;
	transition:0.4s;
}
.coordonnees a.flexblock p{
	font-weight:500;
}
.coordonnees a.flexblock:hover{
	transition:0.4s;
	margin-left:5px;
}







.nodesk{
	display:none;
}
/* ////////////////////////////////////// RESPONSIVE /////////////////////////////////////// */
@media screen and (max-width: 700px){
	.nomobile{
		display:none !important;
	}
	.nodesk{
	display:block;
	}
	.flexblock,
	.midwidth,
	.un-tiers,
	.deux-tiers,
	.un-quart,
	.trois-quart{
		display:block;
		width:96%;
		margin:20px 2%;
	}
	
	figure.img-bg{
		display:block;
		width:130%;
		margin:15px auto 15px -15%;
		height:300px;
		position:relative;
		right:auto;
		left:auto;
		top:auto;
		bottom:auto;
	}
	
	/* /// HEADER /// */
	figure.mascotte-top img{
		width:220px;
	}
	
	figure.mascotte-top{
		margin:-150px auto -350px -10%;
	}
	
	
	/* /// MENU BURGER /// */
	header#header-mobile{
		position:relative;
		margin: 0;
	}
	#hamburger-button {
		position:absolute;
	  z-index: 70000;
	  display: inline-block;
	  height:50px;
	  width:50px;
	  top: -75px;
	right: -10px;
	padding: 20px;
	}

	#hamburger-button:hover {
	  cursor:pointer;
	}

	#hamburger-button > span {
	  display: block;
	  height: 4px;
	  margin-bottom: 6px;
	  width: 30px;
	  background-color:#ffffff;
	  border-radius:5px;
	 -webkit-transition-timing-function: linear; /* Safari and Chrome */
	transition-timing-function: linear;
	transition-duration:0.6s;
	}
	
	#hamburger-button > span:first-child{
		width:26px
	}
	#hamburger-button > span:last-child{
		width:22px
	}

	#hamburger-button.open > span:first-child {
	-webkit-transform: translateY(9px) rotate(45deg); /* Chrome, Safari, Opera */
	transform:translateY(9px) rotate(45deg);
	width:30px;
	}


	#hamburger-button.open > span:nth-child(2) {
	   -webkit-transform: rotateY(90deg); /* Safari */
		transform: rotateY(90deg);
	  /* rotates the second child on the Y AXIS ONLY 90 degrees so it disappears into a point */
	}

	#hamburger-button.open > span:last-child {
	 -webkit-transform: translateY(-10px) rotate(-45deg); /* Chrome, Safari, Opera */
		transform: translateY(-10px) rotate(-45deg);
		width:30px;
	}


	.navbar{
	  position:absolute;
	  opacity:.975;
	  z-index:8;
	  height:100vh;
	  width: 125%;
	  left:-100vw;
	  transition:1s;
	  background-color:#2f3e90;
	  color:white;
	  top:-20px;
	  padding-top:20px;
	  margin-left:-12.5%;
	}

	.navbar.open{
	  left:0;
	}
	.navbar ul{
	  list-style:none;
	  margin-top:160px;
	  font-size:1.5em;
	}

	.navbar ul li{
	  margin-bottom: 10px;
		padding: 5px;
		text-align: center;
		font-family: 'Alata';
		font-size: 24px;
		font-weight: 500;
		text-transform: uppercase;
	}
	.navbar ul li a{
		font-size: 2rem;
		font-weight: 500;
		text-transform: uppercase;	
		color:#ffffff;
	}
	.navbar ul li:after{
		content:" ";
		width:20px;
		height:1px;
		background-color:#ffffff;
		display:block;
		margin:5px auto;
	}
	.navbar ul li:hover{
	  cursor:pointer;
	}
	
	
	/* /// LOGO TOP /// */
	figure#logo-menu-mobile{
		margin: -60px auto 75px auto;
		width: 100%;
		position:relative;
		z-index:10;
	}
	
	
	/* mascotte header */
	span.verbes-mascotte.mangez{
		top:50px;
		right:-10px;
	}
	span.verbes-mascotte.buvez{
		top: 100px;
		right: -25px;
	}
	span.verbes-mascotte.dansez{
		top: 150px;
		right: -50px;
	}
	span.verbes-mascotte.partagez{
		top: 200px;
		right: -50px;
	}
	
	
	
	
	/* /// ACCUEIL /// */
	section.verbes-home{
		margin-top:-110px;
	}
	article.cadre-verbe{
		margin:15px auto;
	}
	
	section#privatisation,
	section#infos-privat-pg{
		padding-bottom:0;
	}
	
	
	/* /// FOOTER /// */
	footer#footer{
		padding-top:0;
	}
	footer div.bloc-footer{
		width:100%;
		text-align:center;
	}
	figure#logo-footer {
	  width: 100%;
	  display: block;
	  margin:40px auto 0 auto;
	}
	div.insta-footer{
		position:relative;
		z-index:3;
		margin:0 auto;
	}
	
	
	/* /// PAGE PRIVATISATION /// */
	article.picto-priva{
		margin:55px auto 25px auto;
	}
	figure.img-bg.un-tiers.fleche1,
	figure.img-bg.un-tiers.fleche2,
	figure.img-bg.un-tiers.fleche3{
		margin:50px auto 110px auto;
	}
	
	
	/* /// PAGE CONTACT /// */
	.coordonnees a.flexblock{
		display:flex;
	}
	.coordonnees a.flexblock img{
		width:30px;
		margin-right:7px;
	}
	figure.map-home{
		width:130%;
		margin-left:-15%;
	}
	
	
	
	
}