@import url(font-awesome.min.css);

body {
  /*padding-top: 3.5rem;*/ /*marge en haut pour passer sous la barre de menu*/
  padding-top: 0;
  min-height: 75rem;
}

#one {
	padding-top: 5rem;
	padding-bottom: 4rem;
}
#two {
	padding-top: 5rem;
	padding-bottom: 3rem;
}
.row {
  margin-right: -1px; /* pour compenser le padding du container-fluid */
  margin-left: -1px;
}

/* style des boites */
[class*="col-"] {
  	line-height: 30px;
  	text-align: center;
}

/*marges globales des containers*/
.container-fluid {
	padding-right: 1px;
  	padding-left: 1px;
  	margin-right: auto;
  	margin-left: auto;
}


/* marge et gras dans le menu */
.navbar {
	margin-top: 0;
	font-weight: bold;

}

.transp {
		background-image: url(../images/dark_tint1.png);
}

/* changement de couleur de menu */
.opaq {
	background-color: #008fb0;
}

.nav-link {
  color: white !important;
  }

.nav-link:hover {
	color: rgba(255,255,255,0.7) !important;
	}

.dropdown-item:hover {
	font-weight: bold !important;
	color: #008fb0 !important;
}

/* style du bouton de lien avec IFMK */
.ifmk {
	background-color: #00b5dd; /*bleu du site IFMK #00b5dd */
	padding-right: 20px;
  	padding-left: 20px;
  	margin-top: -6px;
  	margin-right: 10px;
  	color: #ffffff;
  	font-size: 1rem;
  	font-weight: bold;
}


/* Couleur des titres affichés dans la barre de menu */
.navbar-default .navbar-brand {
 	color: #ffffff;
}

#navbarCollapse {
 	font-size: 1.2rem;
}
/* police de la marque dans le menu */
.navbar-brand {
	font-weight: normal;
	font-size: 0.95rem;
}

/* couleur du hamburger */
/* this is a white icon with 100% opacity*/
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  background-color: #00b5dd;
  border-color: #00b5dd;
}

.dropdown-menu {
	color: black; !important
}
/*style et image de fond de l'en-tete */
#banner {
		background-image: url(../images/dark_tint.png), url(../images/banner_bg.jpg);
		background-position: bottom center;
		background-size: cover;
		color: #ffffff;
		padding: 3.3rem 0rem 2rem;
		text-align: center;
	}

		#banner :last-child {
			margin-bottom: 0;
		}

li {
	list-style: none; /* supprime la puce */
}


/*Style section ONE */

		.wrapper.style1 {
			background-color: #00b5dd; /* fond de la section 1 */
			border-bottom: 1px solid rgba(144, 144, 144, 0.25);
			border-top: 1px solid rgba(144, 144, 144, 0.25);
		}

			.wrapper.style1 .box {
				background-color: #ffffff;  /* fond du grand rectangle de document */
				padding: 3em 2.5em;
			}


				.wrapper.style1 .box h2, .wrapper.style1 .box h3, .wrapper.style1 .box h4, .wrapper.style1 .box h5, .wrapper.style1 .box h6 {
					color: #8bd1ec;   /* couleur des titres de docs */
				}




/*Style section TWO */

		.wrapper.style2 {
			background-color: #ddecf1; /* fond de la section 2 */
			border-bottom: 1px solid rgba(144, 144, 144, 0.25);
			border-top: 1px solid rgba(144, 144, 144, 0.25);
		}

			.wrapper.style2 .box {
				background-color: #00b5dd; /* grand rectangle de document section 2 */
				padding: 2.2rem 1rem;
			}


				.wrapper.style2 .box h2, .wrapper.style2 .box h3, .wrapper.style2 .box h4, .wrapper.style2 .box h5, .wrapper.style2 .box h6 {
					color: #ffffff;
				}



/* style des espaces infos impttes */
	.impt {
  	background-image: url(../images/dark_tint1.png);
  	background-color: #008fb0;
  	border-radius: 10px;   /*arrondi des angles */
  	padding : 1rem;
}


	.impt h5,.impt p {
		color : white;
	}

/* Box */

	.box {
		width: 240px;
		height: 300px;
		border-radius: 10px;   /*arrondi des angles */
		border: solid 1px rgba(144, 144, 144, 0.5); /* léger contour gris */
		margin: auto;
		margin-top: 2rem;
		margin-bottom: 2rem;
		padding: 0;
		/* ombres */
			-webkit-box-shadow: 10px 10px 7px -7px rgba(124,124,125,1);
			-moz-box-shadow: 10px 10px 7px -7px rgba(124,124,125,1);
			box-shadow: 10px 10px 7px -7px rgba(124,124,125,1);
	}


/*supprime les marges dans box */
		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}


	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		.icon:active, .icon:hover {
			text-decoration: none;
		}

		.icon > .label {
			display: none;
		}

		.icon.rounded {
			border-radius: 100%;
			display: inline-block;
			height: 7rem;			/*taille du carré autour de l'icone */
			line-height: 7rem;
			text-align: center;
			width: 7rem;
		}

			.icon.rounded.big {
				font-size: 2.5rem;  /*taille des icones */
				margin-bottom: 0.5rem;
			}

			.icon.rounded.color1 {
				background-color: #3cadd4;   /* couleur de fond de l'icone en section 1 */
				color: #ffffff;					/* couleur de l'icone en section 1 */
			}

			.icon.rounded.color2 {
				background-color: #ffffff;   /* couleur de fond de l'icone en section 2 */
				color: #3cadd4;				/* couleur de l'icone en section 2 */
			}

/* couleurs de fond icones réseaux sociaux */
/*			.icon.rounded.fa-twitter {
				background-color: #2daae4;
							color: #ffffff;
			}

			.icon.rounded.fa-facebook {
				background-color: #39599f;
							color: #ffffff;
			}

			.icon.rounded.fa-tumblr, .icon.rounded.fa-linkedin {
				background-color: #31516a;
							color: #ffffff;
			}

			.icon.rounded.fa-rss {
				background-color: #f2600b;
							color: #ffffff;
			}
*/

/* Apparence des boutons */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: #00b5dd;
		border-radius: 30px;
		border: 0;
		font-size: 1.35em;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-weight: 400;
		height: 2.85rem;
		line-height: 2.95rem;
		padding: 0 2em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

.videoWrapper {
       background-color: #ffffff;
       width: 100%;
       position: relative;
       padding-bottom: 56.25%; /* 16:9 */
       padding-top: 25px;
       height: 0;
}
.videoWrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
}



footer {
  	background-image: url(../images/dark_tint1.png);
  	background-color: #008fb0;
  	text-align: center;
  	padding-top: 0.5rem;
  	color: black;
}

footer a {
	color: lightgray;
}

footer a h3 {
	color: white;
	font-size: 1.5rem;
	font-weight: bold;
}

footer a:hover {
	color: white;
	text-decoration: none;
}

footer a h3:hover {
	color: rgba(255,255,255,0.7) !important;
	text-decoration: none;
}

/* ************************   RESPONSIVE    ********************************************* */

/* style pt smartphone xs = 0-576 pixels : col- */

/* *****************************   style gd-smartphone sm = : 577-767 pixels : col-sm- */
/* @media (min-width: 150px) {

}


/* style tablette md = : 768-991 pixels :col-md- */
@media (min-width: 768px) {

  	/*style et image de fond de l'en-tete */
	#banner {
			padding: 4rem 0rem 3rem;
		}

}


/* style ordi petits écrans lg = 992-1199 pixels col-lg- */
@media (min-width: 992px) {

		#banner {
			padding: 5rem 0rem 4rem;
		}

}

/* style ordi grands écrans xl = 1200 pixels and up: col-xl- */
@media (min-width: 1200px) {

	#banner {
			padding: 6rem 0rem 8rem;
		}

}


