@charset "UTF-8";

@font-face { font-family: "abc" ; src: url("font/abcsyntvariable-trial-webfont.woff2");}

@font-face { font-family: "circular" ; src: url("font/circularpro-book-webfont.woff2");}

/* CSS Document */

/*X-Small devices (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/

@media (max-width: 576px) {
	/*.name {modifications}*/
		p {
	font-size: 20px;
	}
	h3 {
		font-size: 40px;
	}
	.titre {
		text-align: start;
	}
	.columnDeux {
		border-right: none;
		border-left: 1px solid black;
	}
	.colfactudeux {
		border-right: 1px solid white;
		border-left: 1px solid black;
	}
	.colfacttrois {
		border-right: 1px solid black;
		border-left: 1px solid white;
	}
}
@media (min-width: 576px) {
	/*.name {modifications}*/
		p {
	font-size: 25px;
	}
	h3 {
		font-size: 50px;
	}
	.titre {
		text-align: start;
	}
	.columnDeux {
		border-right: none;
		border-left: 1px solid black;
	}
	.colfactudeux {
		border-right: 1px solid white;
		border-left: 1px solid black;
	}
	.colfacttrois {
		border-right: 1px solid black;
		border-left: 1px solid white;
	}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	/*.name {modifications}*/
		p {
	font-size: 25px;
	}
	h3 {
		font-size: 57px;
	}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	/*.name {modifications}*/
			p {
	font-size: 25px;
	}
	h3 {
		font-size: 62px;
	}
	.titre {
		text-align: center;
	}
	.columnDeux {
		border-right: 1px solid black;
		border-left: 1px solid black;
	}
	.colfactudeux {
		border-right: 1px solid black;
		border-left: 1px solid black;
	}
	.colfacttrois {
		border-right: 1px solid black;
		border-left: 1px solid black;
	}
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	/*.name {modifications}*/
		p {
	font-size: 30px;
	}
	h3 {
		font-size: 66px;
	}
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 
	/*.name {modifications}*/
	
}

p {
	font-family: 'circular';
}

h3 {
	font-family: 'abc';
}

.columnUn , .columnDeux , .columnQuatre{
	height: 100vh;
	margin-top: 100px;
}

.navintelligence , .i{
	height: 60px;
	color: white;
	background-color: black;
	font-size: 50px;
	transition: transform 0.2s ease;
}

.focus , .i:hover , .i:focus {
	height: 60px;
	transform: scale(120%);
	
}

.navconscience {
	height: 60px;
	background-color: #CEAE9F;
	border: solid 0px black;
	transition: transform 0.2s ease;
}

.navconscience:hover , .navconscience:focus {
	height: 60px;
	background-color: #CEAE9F;
	border: solid 0px #CEAE9F;
	transform: scale(120%);
}

.navcommunication {
	height: 60px;
	background-color: #C1D5E0;
	transition: transform 0.2s ease;
}

.navcommunication:hover , .navcommunication:focus {
	height: 60px;
	background-color: #C1D5E0;
	transform: scale(120%);
}

.navresolutionprobleme {
	height: 60px;
	background-color: #89BFC6;
	transition: transform 0.2s ease;
}

.navresolutionprobleme:hover , .navresolutionprobleme:focus {
	height: 60px;
	background-color: #89BFC6;
	transform: scale(120%);
}

.navapprentissage {
	height: 60px;
	background-color: #D3DECA;
	transition: transform 0.2s ease;
}

.navapprentissage:hover , .navapprentissage:focus {
	height: 60px;
	background-color: #D3DECA;
	transform: scale(120%);
}

.navmemoire {
	height: 60px;
	background-color: #B1CF6B;
	transition: transform 0.2s ease;
}

.navmemoire:hover , .navmemoire:focus {
	height: 60px;
	background-color: #B1CF6B;
	transform: scale(120%);
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
}

.conscience{
	background-color: #CEAE9F;
}

.communication {
	background-color: #C1D5E0;
}

.resolution {
	background-color: #89BFC6;
}

.apprentissage {
	background-color: #D3DECA;
}

.memoire{
	background-color: #B1CF6B;
}

.intelligence {
	background-color: black;
	color: white;
 }

.logo {
	font-size: 60px;
	font-family: 'abc';
	color: white;
	text-decoration: none;
	transition: color 0.6s ease;
}

.logo:hover {
	color: black;
	text-decoration: none;
}

.i {
	font-size: 40px;
	text-decoration: none;
	font-family: 'circular';
}

img {
transition: transform .2s;
}

.offcanvas-header , .offcanvas-footer{
	border-top: solid 0px black;
	border-bottom: solid 0px black;
	padding-top: 10px;
	padding-bottom: 10px;
}

.offcanvas-footer{
	padding-top: 10px;
	padding-bottom: 0px;
}

.offcanvas-header.container-fluid .offcanvas-footercontainer-fluid {
	padding-left: 80px;
	padding-right: 80px;
}

.individuconscience .offcanvas-header, .individuconscience .offcanvas-footer{
	background-color: #CEAE9F;
}

.individucommunication .offcanvas-header, .individucommunication .offcanvas-footer{
	background-color: #C1D5E0;
}

.individuresolution .offcanvas-header, .individuresolution .offcanvas-footer{
	background-color: #89BFC6;
}

.individuapprentissage .offcanvas-header, .individuapprentissage .offcanvas-footer{
	background-color: #D3DECA;
}

.individumemoire .offcanvas-header, .individumemoire .offcanvas-footer{
	background-color: #B1CF6B;
}

.btn-close {
  opacity: 1;
  border: none;
  box-shadow: none;
  transition: transform 0.2s ease;
  background: none;
}

.btn-close::before {
  content: "";
  background-image: url("images/croix2.svg");
  background-repeat: no-repeat;
	background-size: contain;
  width: 40px;
  height: 30px;
  display: inline-block;
  position: relative;
  left: -30px;
  right: 0;
  margin: auto;
	margin-top: -3px;
}

.btn-close:focus,
.btn-close:active {
  outline: none;
  outline-offset: 0px;
  border: none;
  box-shadow: none;
  opacity: 1;
}

.btn-close:hover {
  transform: scale(120%);
  opacity: 1;
}

.grid-item img {
	cursor: pointer;
}

.factconi {
	color: black;
	text-decoration: none;
}

.factconi:hover {
	color: black;
	text-decoration: underline;
}

.text-conscience {
	color: #BB9F91;
}

.text-comm {
	color: #86A2B3;
}

.text-memoire {
	color: #9DB761;
}

.text-appr {
	color: #A8B99A;
}

.text-resopro {
	color: #6FA1A8;
}

.cons{
	color: #CEAE9F;
	text-decoration: none;
}
.cons:hover{
	color: #CEAE9F;
	text-decoration: underline;
}

.mem{
	color: #B1CF6B;
	text-decoration: none;
}
.mem:hover{
	color: #B1CF6B;
	text-decoration: underline;
}

.appr{
	color: #D3DECA;
	text-decoration: none;
}
.appr:hover{
	color:#D3DECA;
	text-decoration: underline;
}

.comm{
	color: #C1D5E0;
	text-decoration: none;
}
.comm:hover{
	color:#C1D5E0;
	text-decoration: underline;
}

.resopro{
	color: #89BFC6;
	text-decoration: none;
}
.resopro:hover{
	color:#89BFC6;
	text-decoration: underline;
}

.border-dark {
	border-color: black;
}

.ligneintelligence {
	border-width:2px;
	border-color: white;
	color: white;
	opacity: 1;
}

.text-dark{
	color: black;
}