* {
	margin: 0;
	padding: 0;
	border: 0;
}

/* pavanam-regular - latin */
@font-face {
  font-family: 'Pavanam';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('../fonts/pavanam-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/pavanam-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pavanam-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pavanam-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pavanam-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pavanam-v6-latin-regular.svg#Pavanam') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: 'zrnic';
	src: url('../fonts/zrnic.eot');
	src: url('../fonts/zrnic.eot?#iefix') format('embedded-opentype'),
	   url('../fonts/zrnic.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

:root {
	/* --color1: #f7c94e; JAUNE */
	--color2: #000000; /* GRIS FONCE*/
	--color3: #ffffff; /* BLANC */
	--color4: #e3e3e3; /* GRIS CLAIR*/
	--color5: #4E7DAB; /* BLEU CLAIR*/
	scroll-behavior:auto!important;
	color-scheme: light dark;
}


*:focus {
    outline: none;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 18px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 1px var(--color2);
	background-color: var(--color3);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--color1); 
	border-radius: 3px;
	opacity: 0.5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--color2); 
}

body  {
	background: var(--color1);
	font-family: "Pavanam", serif;
	font-size: 18px;
}

#menuMobile {
	display: none;
}

#menu {
	border:solid 0px red;
	padding:0;
	margin:0;
	height: 50px;
	background: var(--color2);
}

#menu ul {
	border:solid 0px blue;
	padding:0;
	margin:0;
	height: 50px;

}

#menu li {
	border:solid 0px yellow;
	padding:0;
	margin:0;
	height: 50px;

}

#menu li a {
	border:solid 0px green;
	padding:0 20px;
	margin:0;
	height: 50px;
	color:var(--color3);
}

#menu li a:hover {
	background: var(--color1);
	color: var(--color2);
}

#menu li .active {
	background: var(--color3);
	color: var(--color2);
}

#menu li .active:hover {
	background: var(--color3);
	color: var(--color2);
}

.nav-link {
	transition: none;
}

#menu > .nav > li > ul {
	height: auto !important;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
	display: none;
}

.navlink2:hover #menuQuisuisje, .navlink2:hover #menuPreferences, .navlink2:hover #menuServices {
    display: block;
    cursor: pointer;
}

#menuQuisuisje, #menuServices {
	position: absolute;
	width: 400px;
}

.is-hover {
	background: var(--color1);
	color: var(--color2)!important;
}

.navlink2 ul{
	background: var(--color3);
}

.navlink2 li{
	display: block;
	background: var(--color3);
	height: 70px !important;
}

.navlink2 ul a{
	background: var(--color3);
	color: var(--color2)!important;
	height: 70px !important;
	border-bottom:solid 1px var(--color4)!important;
}

.navlink2 li:last-child a{
	border-bottom:solid 0px var(--color1)!important;
}

.navlink2 ul li a i{
	margin-right:15px;
}

.navPreferences:hover {
	cursor: pointer;
}

#menuPreferences i {
	width: 22px;
	height: 22px;
	border-radius: 11px;
	border:solid 2px var(--color3);
}

#jaune i {
	background: #f7c94e;
}

#rouge i {
	background: #e3ac56;
}

#vert i {
	background: #aad4bd;
}

#bleu i {
	background: #9bc3e9;
}


.privacy, .privacyCenter {
	display: none;
	width:480px;
	min-height:455px;
	background: var(--color3);
	color:var(--color2);
	border:solid 0px var(--color1);
	bottom: 20px;
	left: 20px;
	margin:0x;
	border-radius: 5px;
	z-index: 20;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.privacy .cookieImage1 {
	width: 180px;
	height: 60px;
	margin-left: 30px;
	border:solid px red;
	position: absolute;
	background-color: var(--color1);
}

.privacy .cookieImage2 {
	width: 140px;
	height: 110px;
	margin-top: 330px;
	margin-left: 30px;
	border:solid px red;
	position: absolute;
	background-color: var(--color1);
}

.privacyCenter {
	z-index: 10;
}

.privacyBottom a {
	font-size: 20px;
	font-family: "zrnic", serif;
	background: var(--color1);
	color:var(--color2);
	margin:30px;
	padding:5px 10px;
	border-radius:3px;
	text-decoration: none;
}

.privacyBottom a:first-child {
	margin:30px 10px 30px 30px;
}

.privacyBottom a:last-child {
	margin:30px 30px 30px 10px;
}

.privacyTop a {
	font-size: 20px;
	font-family: "zrnic", serif;
	background: var(--color3);
	color:var(--color2);
	margin:30px 30px 15px 0;
	text-decoration: none;
}

.privacy a:hover {
	background: var(--color2);
	color: var(--color1);
}

.privacy ::selection, .privacyCenter ::selection {
	color: var(--color2);
	background: var(--color1);
}

.privacyCenter a:hover {
	background: var(--color2);
	color: var(--color1);
}

.privacy span{
	font-family: "zrnic", serif;
	font-size: 23px;
	font-weight: bold;
	padding:0px 0 20px 0;
}

.privacyCenter span{
	font-family: "zrnic", serif;
	font-size: 26px;
	font-weight: bold;
	padding:0;
}

.privacyTop {
	background: ;
	width: 100%;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.privacyTop a:hover {
	background: var(--colo3);
	color: var(--color2);
	text-decoration: underline;
}

.privacyMiddle {
	width: 100%;
	margin: 0;
	padding: 0 30px;
	height: 295px;
}

.politiqueCookie {
	color:var(--color2);
	font-weight: bold;
	margin:15px 0;
} 

.privacyBottom {
	width: 100%;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

.privacyCenter #toutRefuserPrivacyCenter, .privacyCenter #toutAccepterPrivacyCenter {
	font-size: 20px;
	font-family: "zrnic", serif;
	background: var(--color1);
	color:var(--color2);
	margin:20px 0;
	padding:5px 10px;
	border-radius:3px;
	text-decoration: none;
	font-weight: normal;
	display: block;
}

.privacyCenter #toutRefuserPrivacyCenter:hover, .privacyCenter #toutAccepterPrivacyCenter:hover {
	background: var(--color2);
	color: var(--color1);
}

.privacyCenter #toutAccepterPrivacyCenter {
	margin:20px 20px;
}

.privacyCenter .categories {
	margin:0;
	padding:0;
}

.privacyCenter .categorie {
	margin:20px 0 0 0;
	padding:15px 10px;
	border:solid 1px var(--color4);
	border-radius: 3px;
}

.privacyCenter .categorie:first-child {
	margin:0;
}

.privacyCenter .categorie:last-child {
	margin:20px 0 10px 0;
}

.privacyCenter .categorie .catIcone{
	margin:0;
	padding:0 0 0 10px;
	font-family: "zrnic", serif;
	font-size: 18px;
	font-weight: bold;
}

.form-check-input:focus {
    outline: none;
}

.privacyCenter .categorie .catNom{
	font-size: 18px;
	font-weight:bold;
	margin:0;
	padding:0;
}

.privacyCenter .categorie .catIcone:hover, .privacyCenter .categorie .catNom:hover{
	cursor: pointer;
}

.privacyCenter .categorie .catBouton{
	margin:0;
	padding:0;
	background: ;
	cursor: pointer;
}

.privacyCenter .wrapper{
	padding:0px;
	border-radius:0px;
	background-color: var(--color2);
	width: 45px;
	height: 1px;
	border-radius:15px;
}

.privacyCenter .toggleButton {
	width: 20px;
	height: 20px;
	border:solid 3px #909090;
	background-color: #909090;
	border-radius:50%;
	transition:0.2s ease;
}

.privacyCenter .privacyOn{
	margin-left:25px;
	background-color: var(--color1);
	border:solid 1px var(--color2);
}

.catDescription {
	padding:0;
}

.catDescription p {
	margin: 10px 0 0 0;
	padding:0 10px;
}

.catDescription .tableau {
	padding: 15px;
	margin: 20px 10px;
	border-radius: 3px;
	border: solid 1px var(--color4);
}

.catDescription .tableau:last-child {
	margin: 20px 10px 10px 10px;
}

.catDescription .cookie {
	padding:5px 10px;
	/*margin:10px;*/
	border-radius: 3px;
	background: var(--color2);
	color:var(--color1);
	font-weight: bold;
	display: inline-block;
}

.catDescription .cookieDate {
	padding: 0;
}

.catDescription .cookieDesc{
	padding:10px 0 0 0;
	color:var(--color2);
}

/*PLAYLIST*/

.player {
	width:500px;
	height:110px;
	background: var(--color2);
	color:var(--color3);
	border:solid 0px var(--color2);
	bottom: 0;
	right: -540px;
	transition-duration: 0.3s;
	transition: ;
	border-radius: 5px;
	z-index: 20;
	margin:20px 20px 20px 20px;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

#playlist {
	display: none;
}

.player .row {
	height:100%;
}

.player .sup {
	padding:0;
	margin:0;
	height:60px;
}

#progressbar {
	width: 100%;
	height: 10px;
	background: var(--color3);
	margin:0;
	padding:0;
	border: solid 0px green;
}

#progressbar:hover {
	cursor: pointer;
}

#progress {
	background: var(--color1);
	height: 10px;
	position: absolute;
	margin:0;
	padding:0; 
	border-right: solid 2px var(--color2);
	transition:0.5s;
}

.player .sub {
	padding:0;
	margin:0;
	height:40px;
}

.player .play {
	width: 40px;
	height: 100%;
	margin: 0px;
	/*background: red;*/
}

.player .timeBegin, .player .timeEnd {
	width: 190px;
	height: 100%;
	font-size: 14px;
	padding:0 15px;
	/*background: orange;*/
}

.player .prev, .player .next {
	width: 60px;
	height: 100%;
	/*background: blue;*/
}

.player .fermer {
	width: 30px;
	height: 30px;
	position: absolute;
	right: -10px;
	top:-10px;
	border-radius: 15px;
	background: var(--color2);
	border: solid 3px var(--color3);
	color:var(--color3);
}

.player .fermer:hover {
	cursor: pointer;
	background: var(--color3);
	color:var(--color2);
	border: solid 3px var(--color3);
}


.player .btn {
	width: 30px;
	height: 30px;
	background-color: var(--color3);
	border-radius: 15px;
}

.player .play .btn, .player .pause .btn {
	width: 40px;
	height: 40px;
	background-color: var(--color1);
	border-radius: 20px;
}

.player .play .material-icons, .player .pause .material-icons {
	font-size: 30px;
}

.player .material-icons {
	font-size: 22px;
}

.player .fermer .material-icons {
	font-size: 18px;
}


/*BODY*/

.container-fluid {
	margin: 0;
	padding: 0;
}

section {
	padding: 15vh 20vh;
}

#quisuisje, #experiences, #sportLoisirs, #fun, #contact {
	background: var(--color1);
}

#services, #competences, #formation, #k7, #projets {
	background: var(--color3);
}


#services{
	background-color: #fff;
    /*background-image: url(../img/background/.png);*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

#quisuisje{
    /*background-image: url(../img/background/.png);*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

.triangleA{
	width: 100%;
    height: 100px;
    background: linear-gradient(to bottom right, var(--color1) 0%, var(--color1) 50%, var(--color3) 50%, var(--color3) 100%);
}

.triangleB{
	width: 100%;
    height: 100px;
    background: linear-gradient(to bottom right, var(--color3) 0%, var(--color3) 50%, var(--color1) 50%, var(--color1) 100%);
}

.triangleC{
	width: 100%;
    height: 100px;
    background: linear-gradient(to bottom right, var(--color1) 0%, var(--color1) 50%, var(--color2) 50%, var(--color2) 100%);
}

section:nth-child(even) ::selection { color: var(--color2); background: var(--color1);}
section:nth-child(even) ::-moz-selection {color: var(--color2); background: var(--color1);}

section:nth-child(odd) ::selection { color: var(--color2); background: var(--color3);}
section:nth-child(odd) ::-moz-selection {color: var(--color2); background: var(--color3);}

.enSavoirPlus {
	font-family: "zrnic", serif;
	text-decoration: none;
	padding:5px 10px;
	border-radius: 3px;
	cursor: pointer;
}

section:nth-child(odd) .enSavoirPlus{background: var(--color3); color:var(--color2);}
section:nth-child(even) .enSavoirPlus{background: var(--color1); color:var(--color2);}

section:nth-child(odd) .enSavoirPlus:hover{background: var(--color2); color:var(--color1);}
section:nth-child(even) .enSavoirPlus:hover{background: var(--color2); color:var(--color3);}

.lienTexte {
	color: var(--color2);
	font-weight: bold;
}

section:nth-child(odd) .lienTexte:hover {
	color: var(--color3);
}

section:nth-child(even) .lienTexte:hover {
	color: var(--color1);
}

.sectionTitle {
	height: 35px;
}

section:nth-child(even) .sectionTitle{border-left: solid var(--color1) 5px;}
section:nth-child(odd) .sectionTitle{border-left: solid var(--color3) 5px;}

h1 {
	font-family: "zrnic", serif;
	font-size: 35px;
	line-height: 35px;
	text-transform: uppercase;
	padding:0 10px;
}

.sectionContent {
	padding:8vh 0;
}


*[class^="col-"], .row{
	/*background: yellow!important;*/
	padding:0;
	margin:0;
}

/*ACCUEIL*/

#accueil {
	height: 100vh;
	background-color: var(--color1);
}

#accueil .row {
	padding: 8vh 0 0 0;
	margin: 0;
	border: solid 0px red;
}

#accueil .image1, #accueil .image2 {
	height: 50vh;
	padding: 0;
	margin: 0;
}

#accueil .image1 .image1-mobile {
	display: none;
}

#accueil .image2 {
	border: solid 0px blue;
	padding-left: 5vh;
}

#accueil .desc {
	height: 10vh;
	padding: 0;
	margin: 0;
	font-family: "zrnic", serif;
	text-transform: uppercase;
	font-size: 30px;
}

#accueil .descMobile {
	display: none;
}

/*MODAL*/

#servicesCP .modal-content {
}

.serviceModalHead {
	background: var(--color1);
	height: 10%;
	width: 100%;
	cursor: pointer;
	padding:30px;
	color:var(--color3);
}

.boutonFermerModal {
	width: 50px;
	height: 50px;
	background: var(--color3);
	border-radius:25px;
	color:var(--color2);
}

.boutonFermerModal:hover {
	background: var(--color2);
	color:var(--color1);
	cursor: pointer;
}

.serviceModalBody {
	background: var(--color1);
	height: 90%;
	width: 100%;
	color: var(--color2);
}

.serviceModalBody .material-icons {
	font-size:100px;
}

.serviceModalBody h1 {
	padding:2vh 0 0 0;
	font-size:50px;
}

.serviceModalBody .aptitude {
}

.serviceModalBody .savoirFaire {
}

.serviceModalBody .savoirFaire .tag {
	text-align: left;
	color:var(--color2);
}

.serviceModalBody .row {
	border-top:solid 1px var(--color2);
	margin:10vh 0 0 0;
	padding:10vh 0 0 0;
}

.serviceModalBody .tags {
	text-align: right;
}

.serviceModalBody .tags .tag {
	font-family: "zrnic", serif;
	text-decoration: none;
	padding:5px 10px;
	border-radius: 3px;
	background: var(--color3);
	color:var(--color2);
	margin: 0 5px 10px 5px;
	display: inline-block;
}

/*SERVICES*/

/*
#services .serviceBloc {
	width: 45vh;
	height: 45vh;
	background: var(--color1);
	border: solid 1px black;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	border-radius: 5px;
	padding:0;
	margin:0;
}

#services .serviceBloc:nth-child(2) {
	margin: 0 5vh;
}

#services .serviceBloc .row {
	width:100%;
	padding:0;
	margin:0;
}

#services .serviceBloc .titre {
	padding:0;
	margin:0;
	height: 10vh;
	font-family: "zrnic", serif;
	font-size: 30px;
	border-bottom: solid 1px var(--color2);
}

#services .serviceBloc .icone {
	width: 10vh;
	height: 12vh;
}

#services .serviceBloc .icone .material-icons{
	font-size: 45px;
}

#services .serviceBloc .texte {
	padding:20px;
	margin:0;
	height: 25vh;
	text-align: center;
}

#services .serviceBloc .bouton {
	padding-right:20px;
	margin:0;
	height: 10vh;
}

#services .serviceBloc .bouton .enSavoirPlus{
	background: var(--color3);
}*/


#services .sectionContent {
	padding:8vh 0;
	border:solid 0px red;
}

#services .sectionContent .row {
	padding:0;
	margin:0;
	border:solid 0px blue;
}

.flip-container {
	perspective: 1000px;
	border:solid 0px red;
	padding:0;
	margin:0;
}

.flip-container.flipo .flipper {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(180deg);
	border:solid 0px green;
	padding:0;
	margin:0;
}

.flip-container {
	width: 25vw;
	height: 60vh;
	padding:0 2vh;
	margin:0;
}

.flipper {
	transition: 0.5s;
	transform-style: preserve-3d;
	position: relative;
	padding:0;
	margin:0;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	width:100%;
	height: 60vh;
	padding:0;
	margin:0;
}

.front {
	z-index: 2;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	background: var(--color1);
	height: 60vh;
	padding:3vh;
	margin:0;
	background: var(--color1);
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	background: green;
	height: 60vh;
	padding:3vh;
	margin:0;
	background: var(--color1);
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.back .retour {
	border-bottom:solid 2px var(--color2);
	width: 100%;
}

.back .retour:hover {
	cursor: pointer;
}

.back .retour:hover .material-icons {
	color: var(--color3);
}

.back .retour span {
	border-bottom:solid 0px var(--color2);
}

.back .retour .material-icons {
	border:solid 0px blue;
	transform: rotateY(180deg);
	margin-right: 10px;
	height: 5vh;
}

.back .liste {
	padding:0;
	margin:0;
	border:solid 0px red;
	height: 45vh;
}

.back ul {
	padding:0 0 15px 20px;
	margin:0;
	border:solid 0px blue;
}

.back .groupeTag {
	padding:0;
	margin:0;
	border:solid 0px red;
	text-align: center;
	height: 10vh;
}

.back .groupeTag .tag {
	font-family: "zrnic", serif;
	text-decoration: none;
	padding:5px 10px;
	border-radius: 3px;
	background: var(--color3);
	color:var(--color2);
	margin: 0 5px 10px 5px;
	display: inline-block;
}



#services .servBlock{
	height: 60vh;
	padding:3vh;
	margin:0 2vh;
	background: var(--color1);
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

#services .servBlock:first-child{
	margin:0 5vh 0 0;
}

#services .servBlock:last-child{
	margin:0 0 0 5vh;
}


.flip {
	transform: rotateY(180deg);
}

#services .icone .material-icons{
	font-size: 70px;
}


#services .icone{
	margin:0;
	padding:3vh 0 2vh 0;
}

#services .titre{
	height: 10vh;
	margin:0;
	padding:0;
}

#services .titre h1{
}

#services .description{
	height: 24vh;
	text-align: justify;
	padding:0;
	border:solid 0px var(--color1);
}

#services .enSavoirPlus{
	background: var(--color3);
	color: var(--color2);
}

#services .enSavoirPlus:hover{
	background: var(--color2);
	color: var(--color1);
}

/*QUISUISJE*/

#quisuisje .bulle {
	position: absolute;
	left: calc(50% - 360px);
	margin-top:-100px;
	width: 250px;
	height: 250px;
	border:solid 0px red;
	background-image: url(../img/quisuisje/bulle.png);
}

#quisuisje .photo{
	height: 250px;
	border:solid 0px red;
}

#quisuisje .photo img{
	width: 250px;
}

#quisuisje .photo img:hover{
	cursor: pointer;
}

#imgDessin {
	border:solid 0px green;
	position: absolute;
}

#imgPhoto {
	border:solid 0px red;
	display:none;
	position: absolute;
}

#quisuisje .titre{
	padding:5vh 0;
	font-family: "zrnic", serif;
	font-size: 35px;
	text-transform: uppercase;
}

#quisuisje .description{
	margin:0;
	padding: 0;
}

#quisuisje .description p{
	text-align: justify;
	margin: 0;
	padding: 0 25%;
}

#quisuisje .bouton{
	padding:5vh 0 0 0;
}


/*COMPETENCES*/

#competences {
}


#competences ul {
	background: none;
	border:0;
	margin:0;
	padding:0;
}

#competences li {
	border:0;
	margin:0;
	padding:0;
	background: none;
}

#competences li:nth-child(even){padding-right: 10px;}
#competences li:nth-child(odd){padding-left: 10px;}

.compLib {
	padding:0;
	margin:0;
	padding:0 10px 0 0;
	border: solid 0px black;
	height: 5vh;
}

.compVal {
	padding:0 0 0 10px;
	margin:0;
	border: solid 0px black;
	height: 5vh;
}

.compValBarre {
	padding:0;
	margin:0;
	background: var(--color4);
	width: 100%;
	height: 5px;
	border-radius: 2.5px;
}

.compProgBarre {
	background: var(--color1);
	width: 1px;
	height: 5px;
	border-right: solid 5px var(--color2);
}

/*EXPERIENCES*/

#experiences {
}

.expBlock > p {
	display: none;
}

.row > .expSousPoste {
	display: none;
}

.expBlock:nth-child(0){
	background: pink;
}

.expBlock {
	padding:0;
	margin:0;
	border-right:solid 1px var(--color2);
	padding:20px 0;
}

.expTexte {
	padding:0 13px;
	margin:0;
	font-size: 20px;
	border: solid 0px black; 
}

.expDate, .expPoste {
	font-family: "zrnic", serif;
}

.expDate {
	padding:0;
	margin:0;
	border: solid 0px black;
	font-size: 26px;
	line-height: 26px; 
}

.expPoste {
	font-size: 30px;
	line-height: 30px; 
	padding:15px 0;
	margin:0;
	border: solid 0px red;
	text-transform: uppercase;
}

.expTitre {
	background: var(--color3);
	padding:5px 10px;
	text-align: right
}

.expTitreRight {
	background: var(--color3);
	padding:5px 10px;
	text-align: left;
}

.expLieu {
	padding: 0 0 15px 0;
}

.expLieu a{
	background:var(--color2);
	color:var(--color1);
	padding:0 5px;
	text-decoration: none;
}

.expLieu a:hover{
	background:var(--color2);
	color:var(--color1);
	text-decoration: underline;
}

.expLieu .entreprise{
	background:var(--color2);
	color:var(--color1);
	padding:0 5px;
	text-decoration: none;
}

.expBouton {
	padding: 15px 0 100px 0;
}

.expInfo {
	margin: 0;
	padding: 0;
	text-align: right;
}

.expInfoRight {
	margin: 0;
	padding: 0;
	text-align: left;
}

.expInfoHide {
	display:none;
}

.tagexp {
	padding: 0 5px;
	background: var(--color1);
	color: var(--color2);
	border:solid 1px var(--color2);
	border-radius: 0px;
}

.expPlus {
	width:36px;
	height: 36px;
	border-radius: 18px;
	font-size: 25px;
	text-decoration: none;
	font-family: "zrnic", serif;
	background: var(--color3);
	color:var(--color2);
	cursor: pointer;
}

.expPlus:hover {
	background: var(--color2);
	color:var(--color1);
}

.expTrait {
	padding:15px 0 0 0;
	margin:0;
	border: solid 0px black;
	height: 100%; 
}

.trait {
	padding:0;
	margin:0;
	height: 1px;
	width: 100%;
	background: var(--color2);
}

.link {
}

.linkRond {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: var(--color2);
}

.linkRond:first-child {
	margin:20px 0 0 0;
}

.linkRond:last-child {
	margin: 0 0 30px 0;
}

.linkTrait {
	width: 1px;
	height: 40px;
	margin: 0 0 20px 0;
	background: var(--color2);
}

#experiences .enSavoirPlus {
	margin:30px 0 0 0;
}

/*FORMATIONS*/

.accordion {
	border-radius: 0!important;
	padding:0;
	margin:0;
}

.accordion-item {
	border:none;
	border-radius: 0!important;
	padding:0;
	margin:0;
	border:solid 0px red!important;
	border-bottom:solid 1px var(--color4)!important;
}

.accordion-item:hover{
	transition:none;
	cursor: pointer;
}

.accordion-item:first-of-type .accordion-button {
	border-radius: 0!important;
}

.accordion-item > li {
	display: none;
}

.accordion-header {
	padding:0;
	margin:0;
	border-bottom: solid 0px var(--color1);
}

.accordion-button {
	padding:2vh;
	margin:0;
	padding-left:0;
	color: var(--color2)!important;
	transition:none;
}

.accordion-button:hover{
	transition:none;
	color:var(--color2);
	background-color: var(--color1);
}

.accordion-button:focus {
    z-index: 3;
    border: none!important;
    box-shadow: none!important;
}

.accordion-button:not(.collapsed) {
	border: none;
    color: var(--color2);
    background: var(--color1);
    box-shadow: none;
}

.accordion-button::after {
	color: var(--color2)!important;
}

.accordion-button:not(.collapsed)::after {
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
	border-right:solid 1px var(--color1);
	border-left:solid 1px var(--color1);
	border-bottom:solid 1px var(--color1);
}

.formationDate {
	width: 80px;
	padding:5px 10px;
	font-family: "zrnic", serif;
	font-size: 25px;
	line-height: 30px;
}

.formationTitre {
	background: var(--color1);
	padding:5px 10px;
	text-transform: uppercase;
	font-family: "zrnic", serif;
	font-size: 25px;
	line-height: 30px;
}

.formationLieu {
	padding:5px 10px;
	line-height: 30px
}

#formation .enSavoirPlus {
	margin:30px 0 0 0;
}

/*SPORT & LOISIRS*/

#sportLoisirs {
}

#sportLoisirs #carouselSLMobile {
	display: none;
}

#sportLoisirs .visio {
	height: 35px!important;
	font-size: 30px!important;
	padding:0 4vh 0 0!important;
}

#sportLoisirs .row{
	border:solid 0px blue;
}

#sportLoisirs .row .material-icons{
	border:solid 0px blue;
	font-size: 35px;
	padding:4vh 20px 0 0;
}

#sportLoisirs .row .material-icons:hover{
	cursor: pointer;
}

#sportLoisirs .enSavoirPlus {
	background: var(--color1);
}

#sportLoisirs .enSavoirPlus:hover {
	background: var(--color2);
	color:var(--color1);
}

#sportLoisirs .slBlock{
	padding:0px 30px 30px 0px;
	margin:0;
}


#sportLoisirs .slBlock:nth-child(n+9){
	padding-bottom:0px;
}

#sportLoisirs .slBlock .diapo{
	z-index: 100;
	background: var(--color3);
	padding:12px;
	border-radius: 5px;
	cursor: url('data:image/svg+xml;utf8,<svg fill="%23333333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M13,3c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2S13,4.1,13,3z M7.25,22.5c-0.41,0-0.75,0.34-0.75,0.75S6.84,24,7.25,24 S8,23.66,8,23.25S7.66,22.5,7.25,22.5z M15.75,22.5c-0.41,0-0.75,0.34-0.75,0.75S15.34,24,15.75,24s0.75-0.34,0.75-0.75 S16.16,22.5,15.75,22.5z M19.24,19c-0.24,0-0.45,0.11-0.59,0.3c-0.55,0.73-1.42,1.2-2.4,1.2H16v-6l-4.32-2.67l1.8-2.89 C14.63,10.78,16.68,12,19,12v-2c-1.85,0-3.44-1.12-4.13-2.72l-0.52-1.21C14.16,5.64,13.61,5,12.7,5H7L4.5,9l1.7,1.06L8.1,7h2.35 l-2.4,3.84c-0.31,0.5-0.39,1.11-0.21,1.67l1.34,4.15l-3.12,3.76c-0.7-0.16-1.3-0.57-1.71-1.12C4.21,19.11,3.99,19,3.75,19 C3.31,19,3,19.36,3,19.75c0,0.15,0.05,0.31,0.15,0.45c0.82,1.1,2.13,1.8,3.6,1.8h9.5c1.47,0,2.78-0.7,3.6-1.8 c0.1-0.14,0.15-0.3,0.15-0.45C20,19.36,19.68,19,19.24,19z M14,20.5H8.6l2.9-3.5l-1-3.3l3.5,2.2V20.5z"/></svg>') 24 24, auto !important;
}

#sportLoisirs .diapo .image {
	width: 100%;
	height: 100%;
	padding:0;
	margin:0;
	position: relative;
	border:solid 1px var(--color2);
	background: var(--color1);
	cursor: url('data:image/svg+xml;utf8,<svg fill="%23333333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M13,3c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2S13,4.1,13,3z M7.25,22.5c-0.41,0-0.75,0.34-0.75,0.75S6.84,24,7.25,24 S8,23.66,8,23.25S7.66,22.5,7.25,22.5z M15.75,22.5c-0.41,0-0.75,0.34-0.75,0.75S15.34,24,15.75,24s0.75-0.34,0.75-0.75 S16.16,22.5,15.75,22.5z M19.24,19c-0.24,0-0.45,0.11-0.59,0.3c-0.55,0.73-1.42,1.2-2.4,1.2H16v-6l-4.32-2.67l1.8-2.89 C14.63,10.78,16.68,12,19,12v-2c-1.85,0-3.44-1.12-4.13-2.72l-0.52-1.21C14.16,5.64,13.61,5,12.7,5H7L4.5,9l1.7,1.06L8.1,7h2.35 l-2.4,3.84c-0.31,0.5-0.39,1.11-0.21,1.67l1.34,4.15l-3.12,3.76c-0.7-0.16-1.3-0.57-1.71-1.12C4.21,19.11,3.99,19,3.75,19 C3.31,19,3,19.36,3,19.75c0,0.15,0.05,0.31,0.15,0.45c0.82,1.1,2.13,1.8,3.6,1.8h9.5c1.47,0,2.78-0.7,3.6-1.8 c0.1-0.14,0.15-0.3,0.15-0.45C20,19.36,19.68,19,19.24,19z M14,20.5H8.6l2.9-3.5l-1-3.3l3.5,2.2V20.5z"/></svg>') 24 24, auto !important;
}

#sportLoisirs .diapo .image img{
	border:solid 0px red;
	padding:0;
	margin:0;
	cursor: url('data:image/svg+xml;utf8,<svg fill="%23333333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M13,3c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2S13,4.1,13,3z M7.25,22.5c-0.41,0-0.75,0.34-0.75,0.75S6.84,24,7.25,24 S8,23.66,8,23.25S7.66,22.5,7.25,22.5z M15.75,22.5c-0.41,0-0.75,0.34-0.75,0.75S15.34,24,15.75,24s0.75-0.34,0.75-0.75 S16.16,22.5,15.75,22.5z M19.24,19c-0.24,0-0.45,0.11-0.59,0.3c-0.55,0.73-1.42,1.2-2.4,1.2H16v-6l-4.32-2.67l1.8-2.89 C14.63,10.78,16.68,12,19,12v-2c-1.85,0-3.44-1.12-4.13-2.72l-0.52-1.21C14.16,5.64,13.61,5,12.7,5H7L4.5,9l1.7,1.06L8.1,7h2.35 l-2.4,3.84c-0.31,0.5-0.39,1.11-0.21,1.67l1.34,4.15l-3.12,3.76c-0.7-0.16-1.3-0.57-1.71-1.12C4.21,19.11,3.99,19,3.75,19 C3.31,19,3,19.36,3,19.75c0,0.15,0.05,0.31,0.15,0.45c0.82,1.1,2.13,1.8,3.6,1.8h9.5c1.47,0,2.78-0.7,3.6-1.8 c0.1-0.14,0.15-0.3,0.15-0.45C20,19.36,19.68,19,19.24,19z M14,20.5H8.6l2.9-3.5l-1-3.3l3.5,2.2V20.5z"/></svg>') 24 24, auto !important;
}

#sportLoisirs .diapo .image .description {
	border:solid 0px blue;
	text-align: center;
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    height: 100%;
    position: absolute;	
    display: none;
	cursor: url('data:image/svg+xml;utf8,<svg fill="%23333333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M13,3c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2S13,4.1,13,3z M7.25,22.5c-0.41,0-0.75,0.34-0.75,0.75S6.84,24,7.25,24 S8,23.66,8,23.25S7.66,22.5,7.25,22.5z M15.75,22.5c-0.41,0-0.75,0.34-0.75,0.75S15.34,24,15.75,24s0.75-0.34,0.75-0.75 S16.16,22.5,15.75,22.5z M19.24,19c-0.24,0-0.45,0.11-0.59,0.3c-0.55,0.73-1.42,1.2-2.4,1.2H16v-6l-4.32-2.67l1.8-2.89 C14.63,10.78,16.68,12,19,12v-2c-1.85,0-3.44-1.12-4.13-2.72l-0.52-1.21C14.16,5.64,13.61,5,12.7,5H7L4.5,9l1.7,1.06L8.1,7h2.35 l-2.4,3.84c-0.31,0.5-0.39,1.11-0.21,1.67l1.34,4.15l-3.12,3.76c-0.7-0.16-1.3-0.57-1.71-1.12C4.21,19.11,3.99,19,3.75,19 C3.31,19,3,19.36,3,19.75c0,0.15,0.05,0.31,0.15,0.45c0.82,1.1,2.13,1.8,3.6,1.8h9.5c1.47,0,2.78-0.7,3.6-1.8 c0.1-0.14,0.15-0.3,0.15-0.45C20,19.36,19.68,19,19.24,19z M14,20.5H8.6l2.9-3.5l-1-3.3l3.5,2.2V20.5z"/></svg>') 24 24, auto !important;
}

#sportLoisirs .diapo .image .description .details {
    height: 100%;
	cursor: url('data:image/svg+xml;utf8,<svg fill="%23333333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M13,3c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2S13,4.1,13,3z M7.25,22.5c-0.41,0-0.75,0.34-0.75,0.75S6.84,24,7.25,24 S8,23.66,8,23.25S7.66,22.5,7.25,22.5z M15.75,22.5c-0.41,0-0.75,0.34-0.75,0.75S15.34,24,15.75,24s0.75-0.34,0.75-0.75 S16.16,22.5,15.75,22.5z M19.24,19c-0.24,0-0.45,0.11-0.59,0.3c-0.55,0.73-1.42,1.2-2.4,1.2H16v-6l-4.32-2.67l1.8-2.89 C14.63,10.78,16.68,12,19,12v-2c-1.85,0-3.44-1.12-4.13-2.72l-0.52-1.21C14.16,5.64,13.61,5,12.7,5H7L4.5,9l1.7,1.06L8.1,7h2.35 l-2.4,3.84c-0.31,0.5-0.39,1.11-0.21,1.67l1.34,4.15l-3.12,3.76c-0.7-0.16-1.3-0.57-1.71-1.12C4.21,19.11,3.99,19,3.75,19 C3.31,19,3,19.36,3,19.75c0,0.15,0.05,0.31,0.15,0.45c0.82,1.1,2.13,1.8,3.6,1.8h9.5c1.47,0,2.78-0.7,3.6-1.8 c0.1-0.14,0.15-0.3,0.15-0.45C20,19.36,19.68,19,19.24,19z M14,20.5H8.6l2.9-3.5l-1-3.3l3.5,2.2V20.5z"/></svg>') 24 24, auto !important;
}

#sportLoisirs .diapo .activite {
	padding: 15px 0 0 0;
	font-family: "zrnic", serif;
	text-transform: uppercase;
	font-size: 20px;
	cursor: url('data:image/svg+xml;utf8,<svg fill="%23333333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M13,3c0-1.1,0.9-2,2-2s2,0.9,2,2c0,1.1-0.9,2-2,2S13,4.1,13,3z M7.25,22.5c-0.41,0-0.75,0.34-0.75,0.75S6.84,24,7.25,24 S8,23.66,8,23.25S7.66,22.5,7.25,22.5z M15.75,22.5c-0.41,0-0.75,0.34-0.75,0.75S15.34,24,15.75,24s0.75-0.34,0.75-0.75 S16.16,22.5,15.75,22.5z M19.24,19c-0.24,0-0.45,0.11-0.59,0.3c-0.55,0.73-1.42,1.2-2.4,1.2H16v-6l-4.32-2.67l1.8-2.89 C14.63,10.78,16.68,12,19,12v-2c-1.85,0-3.44-1.12-4.13-2.72l-0.52-1.21C14.16,5.64,13.61,5,12.7,5H7L4.5,9l1.7,1.06L8.1,7h2.35 l-2.4,3.84c-0.31,0.5-0.39,1.11-0.21,1.67l1.34,4.15l-3.12,3.76c-0.7-0.16-1.3-0.57-1.71-1.12C4.21,19.11,3.99,19,3.75,19 C3.31,19,3,19.36,3,19.75c0,0.15,0.05,0.31,0.15,0.45c0.82,1.1,2.13,1.8,3.6,1.8h9.5c1.47,0,2.78-0.7,3.6-1.8 c0.1-0.14,0.15-0.3,0.15-0.45C20,19.36,19.68,19,19.24,19z M14,20.5H8.6l2.9-3.5l-1-3.3l3.5,2.2V20.5z"/></svg>') 24 24, auto !important;
}

#sportLoisirs .modal-body {
	padding:0;
	margin:0;
	background-color: var(--color1);
	border-radius: 10px;
}

#sportLoisirs .modal-body img:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

/*K7*/

#k7 .couleur {
	background-color: var(--color1);
	width:570px;
	height:250px;
	z-index:9;
	position: absolute;
}

#k7 .k7 {
	width:650px;
	height:420px;
	border:solid 0px red;
	z-index:10;
}


/*FUN*/

#fun {
	height: 90vh;
	padding: 0;
}

#fun ::selection { background-color: var(--color1); color: var(--color2);}


#fun .pano {
	height: 80vh;
	background: url(../img/fun/fun-web.png) repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#fun .cit {
	border: solid 0px blue;
	paffing: 0;
	margin: 0;
	background: var(--color3);
}

#fun .scroll-container {
	display: none;
}

#fun .description {
	height: 10vh;
	border-top: solid 0px var(--color2);
	font-family: "zrnic", serif;
	font-style: italic;
	font-size: 20px;
}

#fun .visio {
	font-size: 25px!important;
	padding:0 4vh 0 0!important;
	cursor: pointer;
}

#fun .modal-body {
	padding:0;
	margin:0;
	background-color: var(--color1);
	border-radius: 10px;
}

/*PROJETS*/

#projets{
}

#projets .row{
}

.pBlock {
	padding:0;
	margin:0;
	border:solid 0px red;
	margin-top:5vh;
}

.pBlock:nth-child(-n+5){
	margin-top:0;
}

.pBlock .projetsImage:hover, .pBlock .projetsTitre:hover {
	cursor: pointer;
}

.projetsImage {
	padding:0;
	margin:0;
	height: 15vw;
	width: 100%;
}

.pBlock .projetsImage img{
	width: 90%;
	transition-duration: 0.3s;
}

.pBlock:hover .projetsImage img{
	width: 95%;
	transition-duration: 0.3s;
}

.projetsTitre {
	text-transform: uppercase;
	font-family: "zrnic", serif;
	font-size: 30px;
}

.pBlock .projetsTitre span {
	border-bottom: solid 2px var(--color3);
	transition-duration: 0.3s;
}

.pBlock:hover .projetsTitre span {
	border-bottom: solid 2px var(--color1);
}

#projets .modal-dialog {
	border:solid 0px red;
}

.modal-lg {
    max-width: 1200px;
}

#projets .modal-content {
}

#projets .modal-header {
	border-bottom:solid 1px var(--color4);
}

#projets .modal-header .close {
    background: var(--color1);
    width:30px;
    height:30px;
    border-radius: 15px;
    cursor: pointer;
}

#projets .modal-header .close:hover {
    background: var(--color2);
}

#projets .modal-header .close .material-icons {
    font-size: 14px;
}

#projets .modal-header .close:hover .material-icons {
    color: var(--color1);
}

#projets .modal-body {
	padding:0;
	margin:0;
	border:none;
}

#projets .modal-lg .visuel{
	border-right:solid 0px var(--color4);
	padding:0;
	margin:0;
}

#projets .modal-lg .texte {
	padding:0;
	margin:0;
}

#projets .modal-lg .texte div {
	width: 100%;
	text-align: center;
	padding-bottom: 3vh;
}

#projets .modal-lg .texte div:nth-child(-n+2) {
	padding-top: 3vh;
}

#projets .modal-lg .texte .infos {
	font-family: "zrnic", serif;
	display: block;
	font-size: 30px;
	text-transform: uppercase;
}

#projets .modal-lg .texte .titre {
	font-family: "zrnic", serif;
	font-size: 35px;
	text-transform: uppercase;
	border-bottom: solid 1px var(--color4);
}

#projets .modal-lg .texte .tag span {
	font-family: "zrnic", serif;
	text-decoration: none;
	padding:5px 10px;
	border-radius: 3px;
	background: var(--color1);
	color:var(--color2);
	margin: 0 5px 10px 5px;
	display: inline-block;
	text-transform: uppercase;
	font-size: 23px;
	line-height: 23px;
}

#projets .modal-lg .texte .date {
	margin-bottom: 10px;
}

#projets .modal-lg .texte .description {
	color:var(--color2);
	padding: 20px;
	text-align: justify;
}

#projets .modal-footer {
	border-top:solid 1px var(--color4);
}

#projets .modal-footer .enSavoirPlus:hover {
    color:var(--color1);
}


/*CONTACT*/

/*#notifConf {
	top: 180px;
}*/

#notifConf .symbol {
	background: var(--color1);
}

#notifErreur .symbol {
	background: red;
}

.notif {
	width:500px;
	height:110px;
	background: var(--color2);
	color:var(--color3);
	border:solid 0px var(--color2);
	top: 50px;
	padding-left:20px;
	right: -540px;
	transition-duration: 0.3s;
	border-radius: 5px;
	z-index: 20;
	margin:20px 20px 20px 20px;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.notif .row {
	height:110px;
	padding:0;
	margin:0;
}

.notif .symbol {
	width: 60px;
	height: 60px;
	border-radius: 30px;
}

.notif .notifTitre {
	font-family: "zrnic", serif;
	font-size: 30px;
}

.notif .material-icons {
	color: var(--color2);
	font-size: 50px;
}

#contact {
	margin-bottom:0vh !important;
}

#contact .sectionContent {
	padding-bottom:0;
}

#contact .infos div {
	border:solid 0px red;
	padding:20px 0;
}

#contact .infos .material-icons {
	font-size: 30px;
}

#contact a {
	color:var(--color2);
}

#contact .titre {
	font-family: "zrnic", serif;
	font-size: 30px;
	text-transform: uppercase;
	text-align: center;
	padding:40px 0 40px 0;
}

#contact form {
	margin-top:-5vh;
	width: 580px;
	border:solid 0px red;
	position: absolute;
	padding:0 40px 40px 40px;
	background: var(--color3);
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

#contact input, #contact textarea  {
	margin-bottom:15px;
	border:none;
	border-radius: 3px!important;
	border:solid 1px var(--color1);
	color:var(--color2);
	line-height: 25px;
	font-size: 18px;
	padding:15px;
}

#contact input:focus, #contact textarea:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: none;
	border:none;
	border-radius: 3px !important;
	border:solid 1px var(--color1);
	background-color: var(--color1);
}

#contact .invalid-tooltip {
	border:solid 0px blue;
}

#contact textarea {
	height: 18vh;
}

#contact .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color2);
    opacity: 1; /* Firefox */
}

#contact .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--color2);
}

#contact .form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--color2);
}

#contact textarea::-webkit-scrollbar-thumb {
  background-color: var(--color2);
}

#contact ::selection { background-color: var(--color2); color: var(--color1);}
#contact ::-moz-selection {background-color: var(--color2); color: var(--color1);}


#contact button {
	font-size: 20px;
	font-family: "zrnic", serif;
	background: var(--color1);
	color:var(--color2);
	margin:20px 20px 0 0;
	padding:5px 10px;
	border-radius:3px;
	text-decoration: none;
	font-weight: normal;
	display: block;
	border:none;
}

#contact button:hover {
	background: var(--color2);
	color:var(--color1);
}

#contact button:focus {
	outline: none !important;
	border:none;
}

#contact button:nth-child(2) {
	margin-right:0;
}

#contact .infos img {
	border:solid 0px red;
	width: 26px;
}

#contact .infos .image {
	display: none;
}

/*FOOTER*/

footer {
	padding: 10vh 20vh 0 20vh;
	background: var(--color2);
	color:var(--color3);
}

footer ::selection {
	color: var(--color2);
	background: var(--color1);
}

footer .illu {
	width: 350px;
	height: 106px;
	border: solid 0px white;
	background-color: var(--color1);
}

footer .titre{
	color:var(--color3);
	font-family: "zrnic", serif;
	font-size: 24px;
}

footer .mentions{
	padding:10vh 0 2vh 0;
}

footer .mentions span{
}

footer #afficherPrivacyCenter:hover {
	color: var(--color1);
	cursor: pointer;
}


/*
@media (prefers-color-scheme: dark) {
	:root {
		--background: pink;
		--text-color: blue;
		--color1: green;
		--color2: orange;
	}

	#accueil {
		background: red;
		background-color: red;
	}
}
*/


@media (min-width: 1100px) {
	body {
    	border:solid 0px red;
	}
}

@media (min-width: 960px) and (max-width: 1100px) {
	body {
    	border:solid 0px violet;
	}

	section {
		padding: 10vh 5vh;
	}
}

@media (min-width: 768px) and (max-width: 959px) {
	body {
    	border:solid 0px green;
	}


	#contact form {
		display: none;
	}

	footer {
		padding: 5vh 5vh 0 5vh;
	}
}

@media (max-width: 767px) {
	body {
    	border:solid 0px black;
	}

	#menu {
		display: none;
	}

	#menuMobile {
		display: block;
		z-index: 100;
	}

	#menuMobile ul li{
		background: var(--color3);
		width:20vw;
		height:20vw;
		padding:0;
		margin: 0;
	}

	#menuMobile ul li a{
		width:20vw;
		height:20vw;
		border-right: solid 1px var(--color4);
		padding:0;
		margin: 0;
		color: var(--color2);
	}

	#menuMobile ul li:nth-child(5){
		border-right: solid 0px var(--color1);
	}

	#menuMobile ul li .material-icons div {
		margin:0;
		padding:0;
	}

	#menuMobile ul li .material-icons {
		border: solid 0px var(--color2);
		font-size: 30px;
	}

	#menuMobile ul li span {
		border: solid 0px var(--color2);
		font-size: 12px;
	}

	#sousMenuMobile {
		border: solid 0px red;
		padding: 0;
		margin-bottom: -100vw;
		transition-duration: 0.3s;
	}

	#sousMenuMobile li:first-child {
		padding:0;
		margin:0;
	}

	#sousMenuMobile li {
		border-bottom: solid 1px var(--color4);
		width: 100% !important;
		padding: 0;
		margin: 0;
	}

	#sousMenuMobile li a {
		width: 100% !important;
		padding: 0;
		margin: 0;
	}

	#sousMenuMobile li a .material-icons {
		width: 20vw;
	}

	#sousMenuMobile li a span {
		width: 80vw;
		font-size: 16px;
	}

	.container-fluid {
		border:solid 0px red;
		padding:0;
		margin:0;
	}

	section {
		padding: 20vw 0;
		margin: 0;
		height: auto;
	}

	.sectionContent {
		padding:0;
		margin:0;
	}


	/*PRIVACY*/

		.privacy, .privacyCenter {
			display: none;
			width:100%;
			bottom: 0;
			left: 0;
			padding:0px;
			margin:0px;
			font-size: 17px;
			border-radius: 5px 5px 0px 0px;
			z-index:110;
		}

		.privacy .cookieImage2 {
			width: 100px;
			height: 79px;
			margin-top: 365px;
			margin-left: 20px;
			border:solid 0px red;
		}

		.privacyCenter {
			z-index:110;
		}

		.privacyBottom a {
			font-size: 18px;
			margin:0px;
			padding:5px 10px;
		}

		.privacyBottom a:first-child {
			margin:15px 5px 15px 15px;
		}

		.privacyBottom a:last-child {
			margin:15px 15px 15px 5px;
		}

		.privacyTop a {
			font-size: 20px;
			margin:15px 15px 5px 0;
		}

		.privacy span{
			font-family: "zrnic", serif;
			font-size: 22px;
			padding:0px 0 20px 0;
		}

		.privacyCenter span{
			font-size: 26px;
		}

		.privacyTop {
			width: 100%;
			height: 50px;
		}

		.privacyMiddle {
			width: 100%;
			margin: 0;
			padding: 0 15px;
			height: 350px;
		}

		.politiqueCookie {
			color:var(--color2);
			font-weight: bold;
			margin:15px 0;
		} 

		.privacyBottom {
			width: 100%;
			height: 50px;
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
		}

		.privacyCenter #toutRefuserPrivacyCenter, .privacyCenter #toutAccepterPrivacyCenter {
			font-size: 20px;
			font-family: "zrnic", serif;
			background: var(--color1);
			color:var(--color2);
			margin:20px 0;
			padding:5px 10px;
			border-radius:3px;
			text-decoration: none;
			font-weight: normal;
			display: block;
		}

		.privacyCenter #toutRefuserPrivacyCenter:hover, .privacyCenter #toutAccepterPrivacyCenter:hover {
			background: var(--color2);
			color: var(--color1);
		}

		.privacyCenter #toutAccepterPrivacyCenter {
			margin:20px 20px;
		}

		.privacyCenter .categories {
			margin:0;
			padding:0;
		}

		.privacyCenter .categorie {
			margin:20px 0 0 0;
			padding:15px 10px;
			border:solid 1px var(--color4);
			border-radius: 3px;
		}

		.privacyCenter .categorie:first-child {
			margin:0;
		}

		.privacyCenter .categorie:last-child {
			margin:20px 0 10px 0;
		}

		.privacyCenter .categorie .catIcone{
			margin:0;
			padding:0 0 0 10px;
			font-family: "zrnic", serif;
			font-size: 18px;
			font-weight: bold;
		}

		.form-check-input:focus {
		    outline: none;
		}

		.privacyCenter .categorie .catNom{
			font-size: 18px;
			font-weight:bold;
			margin:0;
			padding:0;
		}

		.privacyCenter .categorie .catIcone:hover, .privacyCenter .categorie .catNom:hover{
			cursor: pointer;
		}

		.privacyCenter .categorie .catBouton{
			margin:0;
			padding:0;
			background: ;
			cursor: pointer;
		}

		.privacyCenter .wrapper{
			padding:0px;
			border-radius:0px;
			background-color: var(--color2);
			width: 45px;
			height: 1px;
			border-radius:15px;
		}

		.privacyCenter .toggleButton {
			width: 20px;
			height: 20px;
			border:solid 3px #909090;
			background-color: #909090;
			border-radius:50%;
			transition:0.2s ease;
		}

		.privacyCenter .privacyOn{
			margin-left:25px;
			background-color: var(--color1);
			border:solid 1px var(--color2);
		}

		.catDescription {
			padding:0;
		}

		.catDescription p {
			margin: 10px 0 0 0;
			padding:0 10px;
		}

		.catDescription .tableau {
			padding: 15px;
			margin: 20px 10px;
			border-radius: 3px;
			border: solid 1px var(--color4);
		}

		.catDescription .tableau:last-child {
			margin: 20px 10px 10px 10px;
		}

		.catDescription .cookie {
			padding:5px 10px;
			/*margin:10px;*/
			border-radius: 3px;
			background: var(--color2);
			color:var(--color1);
			font-weight: bold;
			display: inline-block;
		}

		.catDescription .cookieDate {
			padding: 0;
		}

		.catDescription .cookieDesc{
			padding:10px 0 0 0;
			color:var(--color2);
		}


	/*PLAYLIST*/

		.player {
			width:100%;
			height:120px;
			top: 0;
			right: -540px;
			margin:0;
			padding:0;
		}

		.player .fermer {
			width: 30px;
			height: 30px;
			position: absolute;
			right: 10px;
			top:110px;
			border-radius: 15px;
			background: var(--color2);
			border: solid 3px var(--color3);
			color:var(--color3);
		}



	/*ACCUEIL*/


	#accueil {
		height: auto;
		padding:0;
		margin:0;
	}

	#accueil .row {
		padding: 0;
		margin: 0;
		border: solid 0px red;
	}

	#accueil .image1, #accueil .image2 {
		height: auto;
		padding: 0;
		margin: 0;
	}

	#accueil .image1 {
		border: solid 0px orange;
		padding:0;
		margin: 50px 0 20px 0;
	}

	#accueil .image1 .image1-web {
		display: none;
	}

	#accueil .image1 .image1-mobile {
		border: solid 0px green;
		padding: 0 20px;
		margin: 0;
		text-align: center;
		width: 100%;
		display: block;
	}

	#accueil .image2 {
		padding: 0 0 30px 0;
		margin: 0;
		border: solid 0px blue;
	}

	#accueil .image1 img {
		padding-left: 20px;
		width: 94%;
	}

	#accueil .image2 img {
		width: 55%;
	}

	#accueil .desc {
		border:solid 3px green;
		display: none!important;
	}

	#accueil .descMobile {
		display: block;
		padding: 0;
		margin: 0;
		font-size: 25px;
		border: solid 0px green;
		text-align: center;
		margin-bottom: 50px;
		font-family: "zrnic", serif;
		text-transform: uppercase;
	}

	/*SERVICES*/

	#services {
		padding: 0;
		margin: 0;
		border: solid 0px yellow;
	}

	#services .sectionContent {
		padding:0;
		margin: 0;
	}

	.flip-container {
		width: 100%;
		padding:50px 20px;
		margin:0;
		display: block;
		height: 64vh;
		border: solid 0px green;
		border-bottom: solid 1px var(--color4);
	}

	.flip-container.flipo .flipper {
		padding:0;
		margin:0;
	}

	.flipper {
		padding:0;
		margin:0;
	}

	#serviceChefProjet .front {
		border:solid 0px red;
	}

	.front, .back {
		height: auto;
		display: block;
		box-shadow: none;
		background: none;
		border-radius: 0px;
		border-bottom: solid 0px var(--color4);
		margin:0;
		padding:0;
	}

	.front {
		height: auto;
		padding: 0;
		margin: 0;
	}

	.back {
		height: auto;
		padding: 0;
		margin: 0;
	}

	#services .icone .material-icons {
		font-size: 45px;
	}

	#services .titre h1 {
		font-size: 30px;
		border-bottom: solid 5px var(--color1);
	}

	#services .enSavoirPlus {
		display: none;
	}

	.back .retour {
		border-bottom:solid 2px var(--color2);
		width: 100%;
	}

	/*QUI SUIS-JE*/

	#quisuisje {
		padding: 100px 20px 50px 20px;
	}

	#quisuisje .bulle {
		position: absolute;
		z-index: 10;
		left: -85px;
		margin-top:-120px;
		width: 200px;
		height: 200px;
		border:solid 0px blue;
		background-image: url(../img/quisuisje/bulle.png);
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;

	}

	#quisuisje .photo{
		height: 200px;
		border:solid 0px red;
	}

	#quisuisje .photo img{
		width: 200px;
	}

	#imgDessin {
		border:solid 0px green;
		position: absolute;
	}

	#imgPhoto {
		border:solid 0px red;
		display:none;
		position: absolute;
	}

	#quisuisje .titre{
		padding:30px 0;
		margin:0;
		font-family: "zrnic", serif;
		font-size: 35px;
		text-transform: uppercase;
	}

	#quisuisje .description{
		margin:0;
		padding: 0;
	}

	#quisuisje .description p{
		margin:0;
		padding: 0;
	}

	#quisuisje .bouton{
		padding:30px 0 0 0;
	}

	/*COMPETENCES*/

	#competences .sectionTitle {
		margin-left: 20px;
	}

	#competences ul {
		border: solid 0px red;
		text-align: left !important;
		padding: 40px 20px 0 20px;
		margin: 0;
	}

	#competences li {
		text-align: left !important;
		padding: 0;
		margin: 0;
	}

	#competences li:nth-child(even){padding-right: 0px;}
	#competences li:nth-child(odd){padding-left: 0px;}

	.compLib {
		padding:0;
		margin:0;
		border: solid 0px black;
		text-align: left !important;
		height: 20px;
	}

	.compVal {
		height: 20px;
		padding:0;
		margin:0 0 10px 0;
		border: solid 0px red;
		text-align: left !important;
	}

	.compValBarre {
		padding:0;
		margin:0;
		background: var(--color4);
		border-radius: 0px;
	}

	/*EXPERIENCES*/

	#experiences {
		padding: 50px 20px;
	}

	#experiences .sectionTitle {
		padding:0;
		margin:0;
	}

	.expBlock {
		padding:0;
		margin:0;
		border: none;
	}

	.expTexte {
		padding: 40px 0;
		margin:0;
		border-bottom: solid 1px var(--color2);
		text-align: center !important;
		width: 100%;
	}

	.expDate, .expPoste {
		font-family: "zrnic", serif;
	}

	.expDate {
		padding:0;
		margin:0;
		border: solid 0px black;
		width: 100%;
		font-size: 20px;
		color: var(--color2);
	}

	.expPoste {
		font-size: 30px;
		line-height: 30px; 
		padding:0;
		margin:0;
		border: solid 0px green;
		text-transform: uppercase;
		text-align: center !important;
	}

	.expTitre {
		background: none;
		padding:0;
		margin:10px 0;
		text-align: center;
	}

	.expTitreRight {
		background: none;
		padding:0;
		margin:10px 0;
		text-align: center;
	}

	.expLieu {
		padding: 0 0 30px 0;
		margin: 0;
		width: 100%;
		text-align: center;
		font-size: 18px;
	}

	.expLieu a{
		background:var(--color2);
		color:var(--color3);
		padding:0 5px;
		text-decoration: none;
	}

	.expLieu a:hover{
		background:var(--color2);
		color:var(--color1);
		text-decoration: underline;
	}

	.expLieu .entreprise{
		background:var(--color2);
		color:var(--color3);
		padding:0 5px;
		text-decoration: none;
	}

	.expBouton {
		padding: 0;
		margin: 0;
		border: solid 0px green;
		text-align: center;
	}

	.expInfo {
		margin: 0;
		padding: 0;
		text-align: justify;
	}

	.expInfoRight {
		margin: 0;
		padding: 0;
		text-align: justify;
	}

	.expInfoHide {
		display:none;
	}

	.expPlus {
		width:36px;
		height: 36px;
		border-radius: 18px;
		font-size: 25px;
		text-decoration: none;
		font-family: "zrnic", serif;
		background: var(--color3);
		color:var(--color2);
		cursor: pointer;
	}

	.expPlus:hover {
		background: var(--color2);
		color:var(--color1);
	}

	.expTrait {
		padding:15px 0 0 0;
		margin:0;
		border: solid 0px black;
		height: 100%; 
	}

	.trait {
		padding:0;
		margin:0;
		height: 1px;
		width: 100%;
		background: var(--color2);
	}

	.link {
		width: 100%;
		border: solid 0px green;
	}

	.expSousPosteShow {
		width: 100%;
		text-align: center;
	}

	.linkRond {
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: var(--color2);
	}

	.linkRond:first-child {
		margin:20px 0 0 0;
	}

	.linkRond:last-child {
		margin: 0 0 30px 0;
	}

	.linkTrait {
		width: 1px;
		height: 40px;
		margin: 0 0 20px 0;
		background: var(--color2);
	}

	#experiences .enSavoirPlus {
		margin:30px 0 0 0;
		color: var(--color2);
		background: var(--color3);
	}

	/*FORMATION*/

	#formation .sectionTitle {
		margin-left: 20px;
	}

	#formation .accordion {
		padding:0;
		margin:0;
	}

	#formation .accordion-item {
		padding:0;
		margin:0;
	}

	#formation .accordion-item button{
		padding: 20px 0;
		margin:0;
	}

	#formation .accordion-button:hover{
		color:var(--color2);
		background: var(--color3);
	}

	#formation .accordion-button:focus {
	    background: var(--color3);
	}

	#formation .accordion-button:not(.collapsed) {
	    color: var(--color2);
	    background: var(--color3);
	}

	#formation .accordion-body {
		border: solid 0px green;
		padding: 0;
		margin: 0;
	}

	#formation .formationDate {
		border-bottom: solid 2px var(--color1);
		font-size: 18px;
		line-height: 20px;
		padding:5px 0;
		margin:10px 0;
	}

	#formation .formationTitre {
		padding:0;
		margin:0;
		line-height: 30px;
		text-align:center;
		font-size: 30px;
		color: var(--color2);
		background: none;
	}

	#formation .formationLieu {
		color: var(--color2);
		/*border-top: solid 2px var(--color1);*/
	}

	.accordion-button::after {
	    display:none;
	}

	#formation .formationLieu {
		
	}

	#formation .enSavoirPlus {
		color: var(--color2);
		background: var(--color1);
	}


	/*SPORT & LOISIRS*/

	#sportLoisirs {
		padding: 20vw 0 30px 0 ;
		margin: 0;
	}

	#sportLoisirs .sectionTitle {
		margin-left: 20px;
		margin-bottom: 30px;
	}

	#sportLoisirs .sectionContent > .row:first-child {
		display: none !important;
	}

	#sportLoisirs #carouselSLMobile {
		display: block;
	}

	#sportLoisirs #carouselSLMobile .carousel-inner {
		border: solid 0px blue;
	}

	#sportLoisirs #carouselSLMobile .carousel-inner .carousel-item img {
		border: solid 0px red;
	}

	#sportLoisirs #carouselSLMobile .carousel-inner .carousel-item .carousel-caption {
		border: solid 0px red;
		width: 100%;
		padding:0;
		margin:0;
		position:relative;
		left:0;
		bottom:0;
		color:var(--color2);
	}

	#sportLoisirs #carouselSLMobile .carousel-inner .carousel-item .carousel-caption h5 {
		border: solid 0px yellow;
		padding:30px 0;
		font-family: "zrnic", serif;
		font-size: 30px;
		text-transform: uppercase;
	}

	.carousel-control-prev, .carousel-control-next {
		border: solid 0px red;
		opacity: 1;
		background-image: none;
		width: 50%;
	}

	.carousel-control-prev-icon, .carousel-control-next-icon {
		background-image: none;
		border: solid 0px red;
		margin:60vw 0 0 0;
		padding:0;
		color: var(--color2);
	}

	.carousel-control-prev-icon {
		margin-right: 50%;
	}

	.carousel-control-next-icon {
		margin-left: 50%;
	}

	/*K7*/
	#k7 {
		padding:0;
		margin:0;
		background-color: var(--color1);
	}

	#k7 .couleur {
		background-color: var(--color1);
		width:100%;
		z-index:9;
		position: absolute;
	}

	#k7 .k7 {
		width:90%;
		height: auto;
		margin: 0 0 100px 0;
		border:solid 0px red;
		z-index:10;
	}

	/*FUN*/

	#fun {
		height: auto;
	}

	#fun .pano {
		display: none;
	}

	#fun .scroll-container{
		display: block;
		overflow: auto;
		white-space: nowrap;
		padding: 0;
		margin: 0;
		background: transparent;
		height: 100%;
	}

	#fun .gridscroll{
		display:inline-block;
		border: solid 0px black;
	}

	#fun .gridscroll .arrow-left {
		display: none;
		border: solid 0px red;
		position: absolute;
		left:0;
		margin-left: 30px;
		margin-top: -20px;
		animation-name: anim-fleche-gauche;
  		animation-duration: 0.8s;
  		animation-iteration-count: infinite;
	}

	#fun .gridscroll .arrow-right {
		border: solid 0px red;
		position: absolute;
		right:0;
		margin-right: 30px;
		margin-top: -20px;
		animation-name: anim-fleche-droite;
  		animation-duration: 0.8s;
  		animation-iteration-count: infinite;
	}

	@keyframes anim-fleche-gauche {
		0% {left:0;}
		50% {left:5px;}
		100% {left:0;}
	}

	@keyframes anim-fleche-droite {
		0% {right:0;}
		50% {right:5px;}
		100% {right:0;}
	}


	#fun .gridscroll img {
		padding:0;
		margin: 0;
		height: 50vh;
	}

	#fun .cit {
		margin: 0 0 50px 0 ;
		padding: 0;
		background: var(--color1);
		border: solid 0px green;
		text-align: center;
	}

	#fun .description {
		height: auto;
		margin: 20px 0;
	}

	#fun .visio {
		padding: 0!important;
		margin: 0;
	}

	#fun .visio .material-icons{
		font-size: 30px!important;
	}


	/*PROJET*/

	#projets .pBlock {
		padding:0;
		margin:0;
		border:solid 0px red;
	}

	#projets .projetsImage {
		height: 35vh;
	}

	#projets .sectionTitle {
		margin-left: 20px;
		margin-bottom: 30px;
	}

	/*CONTACT*/

	#contact .sectionTitle {
		margin-left: 20px;
		margin-bottom: 30px;
	}

	#contact .infos {
		border:solid 0px blue;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#contact .infos .image, #contact .infos .email, #contact .infos .linkedin, #contact .infos .tel, #contact .infos .adresse {
		border: solid 0px green;
		margin: 0 0 40px 0;
		text-align: center;
	}

	#contact .infos .image {
		display: block;
		width: 100%;
	}

	#contact .sectionContent .infos .image img {
		margin-top: 20px;
		width: 50%;
	}

	#contact .infos div {
		padding:0;
		margin:0;
	}

	#contact form {
		display: none;
	}

	/*FOOTER*/

	footer {
		padding: 100px 0 130px 0;
		margin: 0;
		text-align: center;
	}

	footer .illu {
		display: none;
	}

	footer span {
		padding: 0;
		margin: 0;
	}

	footer .separateur {
		display: none;
	}

	footer .ligne {
		display: block;
		width: 100%;
	}

	footer .version {
		margin: 30px 0 0 0;
	}

	footer #afficherPrivacyCenter {
		color: var(--color1);
	}
}