@font-face {
    font-family:regular;
    src: url('fonts/RobotoCondensed-Regular.ttf');
}

@font-face {
    font-family:bold;
    src: url('fonts/RobotoCondensed-Bold.ttf');
}

@font-face {
    font-family:light;
    src: url('fonts/RobotoCondensed-Light.ttf');
}

html {
	height:100%;
}

body {
	font-family:regular, Verdana, Geneva, sans-serif;
	font-size:1.0em;
	margin:0px;
	padding:0px;
	color:black;
	background-color:white;
	height:100%;
}

#cookieAlerte {
	margin-bottom:10px;
	padding:4px;
	background-color:#FFF;
	font-size:1.0em;	
	box-shadow: 0px 0px 10px 2px #DDD;
	text-align:center;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	color:#333;
}

#page {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	/* background-color:#F5F4F2; */
	/* background-color:#F5F4F2; */
	background-color:#E4E1DC;
	padding-bottom:40px; 
}

#content {
	min-height:200px;
	height:100%;
	background-color:white;
	box-shadow:12px 0 15px -4px rgba(100,100,100, 0.1), -12px 0 8px -4px rgba(100,100,100,0.1);
	font-size:1.2em;
}

#fileAriane {
	padding-left:10px;
	padding-right:30px;
	font-size:0.9em;
	padding-bottom:4px;
}

.button {
	font-size:1.1em;
	font-weight:100;
	color:black;
}

a.button,a.button:link,a.button:visited {
	background-color:black;
	display:inline-block;
	color:white;
	text-align:center;
	margin-left:4px;
	margin-right:4px;
	padding-left:10px;
	padding-right:10px;
	width:auto;
	box-shadow: 9px 13px 15px -9px rgba(0,0,0,0.75);
}

.m10 {
	margin-top:10px;	
}

.m20 {
	margin-top:20px;	
}

.m30 {
	margin-top:30px;
}

.p10 {
	padding:10px;	
}

h1,h2 {
	margin:0px;	
}

h1 {
	font-size:1.4em;	
}

.legend {
	margin-top:10px;
	font-style:italic;	
}

.bold {
	font-weight:bold;
}

.orsys {
	color:#01A7B3;
}

input::-ms-clear {
    display: none;
}

input {
	font-family:regular;
}

label {
	display:block;
}

.hidden {
	display:none;
}

.white {
	color:white;	
}

.overflow {
	overflow:hidden;	
}

.trow {
	display:table-row;	
}

.tcell {
	display:table-cell;	
}

img {
	width:100%;
    vertical-align: middle;		/* Chrome */
}

img.fixed {
	width:auto;	
}

#logo img {
	max-width:245px;
}

a,a:link,a:active,a:visited {
	text-decoration:none;
	color:inherit;	
}

a img {
	border:0px;	
}

hr {
	border:none;
	height:1px;
	color:#DDD;
	background-color:#DDD;
	clear:both;
}

hr.black {
	margin-top:30px;
	background-color:#373D43;
	height:4px;
}	

.big {
	font-size:1.2em;	
}

.titre {
	padding-bottom:0px;
	border-bottom:1px #DDD solid; 
	font-size:0.97em;
	font-weight:bold;
	color:#00B9C5 !important;
}

.titre:before {
	content:"• ";
	vertical-align:-11%;
	font-size:1.8em;	
	color:#18A9BA;
}

.titreBleu {
	color:#005F72;
	font-size:1.2em;
	padding-bottom:4px;
	border-bottom:4px #13A9B7 solid;
	width:auto;
	display:inline-block;
}

.orsys, .pastilleOrsys:before {
	color:#00B9C5 !important;
}

span.puce {
	font-size:1.8em;
	height:10px;
	display:inline-block;
	vertical-align:-12%;
	font-weight:bold;	
}

/* Réseaux sociaux */
.rs {
	position:relative;
	top:-20px;
}

.rd:after {
	clear:both;	
}

.mobile {
	display:none;	
}

/* -- Header -- */

#header {
	margin:0px;
	border-top:#005F73 10px solid;
	background-image:url(/images/fondGris.png);
	background-position:center top;
	background-repeat:no-repeat;
}

#header .shadow {
	box-shadow:1px 5px 9px 0px rgba(50, 50, 50, 0.47);	
}

#search {
	text-align:right;
	margin-top:30px;
}

#logo {
	padding:20px;
	background-color:#F9F9F9;
 	box-shadow: 0 9px 0px 0px #F5F6F8, 12px 0 15px -4px rgb(200,200,200), -12px 0 15px -4px rgb(200,200,200);
}

#menuBlanc {
	display:block;	
}

.u, a.u {
	text-decoration:underline;	
}

.max {
	width:100%;	
}

.filiere {	
}

#contacts {
	color:#025F71;
	font-size:1.0em;
	margin-top:10px;
}

#contacts > div {
	display:table;
	float:right;
	margin-right:30px;
}

#contacts strong {
	font-family:bold;
}

.blue {
	color:#025F71 !important;
}

.blue2 {
	color:#14A9B7 !important;
}

#menu {
}

#menu li {
	display:table-cell;
	background-color:white;
	color:#333;
	width:auto;
	padding:10px;
	padding-left:10px;
	padding-right:10px;
	font-size:1.1em;
	vertical-align:middle;
}

#menu ul {
	margin:0px;
	padding:0px;
}

#menu input {
	width:100%;
}

#menu input {
	margin-bottom:10px;	
}

#menu input {
	background-color:white;
	border:none;
	padding:10px;
	background-image:url(../images/loupe.jpg);
	background-position:right;
	background-repeat:no-repeat;
	font-size:0.9em;
	width:90%;
	float:right;
}

#menu input::-webkit-input-placeholder {
   color: #333;
}

#menu input:-moz-placeholder { /* Firefox 18- */
   color: #333;  
}

#menu input::-moz-placeholder {  /* Firefox 19+ */
   color: #333;
}

#menu input:-ms-input-placeholder {  
   color: #333;
}

#titresPage {
	border-bottom:#383D43 5px solid;
	backgroundColor:white;
	border-left:#383D43 10px solid;
}

#titresPage ul {
	margin:0px;
	padding:0px;
}

#titresPage li {
	display:table-cell;
	width:auto;
	font-size:1.5em;
	background-color:white;
	color:#383D43;
	padding:10px;
	padding-top:20px;
	font-family:bold;
	padding-right:100px;
}

#titresPage li:last-child {
}

#titresPage li.unique {
	width:auto;	
}

#titresPage li.selected {
	box-shadow: inset -3px -23px 53px -16px rgba(0,0,0,0.54);
}

#titresPage li.unique, .blackContent,#titresPage li.selected {
	background-color:#383D43 !important;
	color:white !important;
}

/* Course */

#categories {
	margin-left:50px;
	margin-right:50px;
}

#categories.grid-pad > [class*='col-'] {
	padding: 40px 0 0px 40px;
}

#categories .mainTitle {
	font-family:bold;	
}

#categories .title {
	color:white;
	padding:10px;
	position:relative;
	top:-20px;
	left:-20px;
	width:70%;
	height:70px;
	text-align:left;
	padding-left:30px;
	padding-top:2px;
	font-family:light;
}

#categories .title, .bshadow {
	box-shadow: 0px 10px 12px rgba(50,50,50,0.2);
}

#categories .title {
	font-size:1.3em;	
}

#categories .domaines {
	width:90%;
	margin:auto;
}

#categories .dates {
	text-align:center;	
}

.categorie {
	background-image:linear-gradient( rgba(255,255,255,0.6) 2%, rgba(255,255,255,0.1) 30% );	
	height:240px;
	position:relative;
	width:80%;
}

.categorie {
	box-shadow: 0px 4px 12px rgba(50,50,50,0.2);
	margin-bottom:5px;
}

.categorie .button {
	position:absolute;
	left:90%;
	top:5px;
	font-size:1.2em;
}

#categories .domaines a {
	color:white;
	font-size:1.1em;
	font-family:light;
}

.categorie .title {
	white-space:nowrap;	
}

#technologies, #technologies .title, .technologies {
/*	background-color:#505C7D;*/
/*	background-color:#45506B;*/
	background-color:#3E6496;
}

#management, #management .title, .management {
/*	background-color:#C58000; */
	background-color:#864F67;
}

.managementColor {
	color:#864F67;	
}

.technologiesColor {
/*	color:#4F5C7C;	*/
	color:#3E6496;
}

#contenuDomaine {
}

.contenuFiliere {
	padding:4px 10px 4px 16px;
}

#infos {
	height:50px;
}

#contacteznous {
	/* font-family:cabinRegular; */
}

#espacePro {
	text-align:left;
	box-shadow: 0px 10px 12px rgb(200,200,200);
	background-color:white;
	width:30%;
	padding:4px;
	padding-top:10px;
	font-family:cabinMedium;
}

#socialnetwork {
	max-width:36px;
	position:fixed;
	left:0px;
	top:52%;
}

#socialnetwork > div {
	background-color:white;
	padding-left:14px;
	margin-bottom:4px;
	height:28px;
	box-shadow:0px 2px 2px rgb(200,200,200);
}

#socialnetwork > div img {
	width:20px;
	margin-top:4px;
	margin-right:4px;
	border-radius:2px;
}

#espacePro {
	text-align:left;
	float:right;
}

.border {
	border:1px solid black;	
}

/* -- Content -- */

input[type=button] {
	background-color:black;
	color:white;
	padding:2px;
	padding-left:10px;
	padding-right:10px;	
	border:0px;
	margin-bottom:10px;
	display:block;
}

textarea {
	background-color:#F9F9F9;
	border:1px #C9CCD1 solid;
	width:100%;
	overflow:auto;
	margin-top:10px;
	margin-bottom:10px;
}

/* Formation */

.stageTitre {
	font-size:1.5em;	
}

#stageObjectifs {
	border-left:#D8D7D3 5px solid;
	margin-top:20px;
	margin-bottom:20px;
	font-size:1.1em;
}

#stageObjectifsText {
	margin-left:40px;	
}

#stage h3 {
	margin-top:15px;
	margin-bottom:4px;
}

#stage .sessions {
	
}

#stage .session {
	
}

#stage .site {
	font-weight:bold;
	margin-top:10px;
}

.intervenants .title {
	background-color:#14A9B7;
	color:white;
	padding-left:6px;
	padding-top:20px;
	padding-bottom:4px;
}

.intervenants .cv {
	background-color:#F5F3F1;	
}

/* Inscription */

#inscription input[type=text] {
	width:80%;
}

#inscription label {	
}

div.next {
	text-align:right;
	margin-right:20px;	
}

img.next {
	max-width:12px;
}

div.query > div.title {
	font-family:cabinSemiBold;
	margin-top:4px;
	margin-bottom:4px;
}

/* Domaine */

.titreDomaine {
	width:300px;
	margin:auto;
	background-color:rgba(10,10,10,0.6);
	color:white;
	padding:10px;
	font-weight:bold;
	font-size:1.3em;
	text-align:center;
}


/* -- Footer -- */

#footer {
	color:white;
	height:180px;
	position:relative;
	top:-18px;
	background-color:#005F73;		
}

.pageMargin {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}

/* Grid */

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

[class*='col-'] {
	float: left;	
}

.grid:after {
	content: "";
	display: table;
	clear: both;
}

.debug {
	background-color:red !important;
}

.grid-pad > [class*='col-'] {
	padding: 20px 0 20px 20px;
}

.grid-pad > .first {
	padding: 20px 0px 20px 0px;	
}

.grid-pad > .first-row {
	padding: 0px 20px 0px 0px;	
}

.grid-pad > [class*='col-']:last-of-type {
	padding-right: 20px;
}

.grid-pad-in:first-child > [class*='col-'] {
	padding: 0px 0 20px 20px;
}

.grid-pad-in > [class*='col-'] {
	padding: 0px 0px 20px 20px;
}

.grid-pad-in [class*='col-']:first-child {
	padding-left:0px;	
}

.col-1-2 {
	width:50%;
}

.col-2-3 {
	width: 66.66%;
}

.col-1-3 {
	width: 33.33%;
}

.col-1-4 {
	width: 25%;
}

.col-3-4 {
	width: 75%;	
}

.col-10-p {
	width:10%;	
}

.col-20-p {
	width:20%;	
}

.col-20 {
	width:20px;
}

.row:nth-child(odd) {
	background-color:#DDD;
}

div.table {
	overflow: hidden;
	margin:1px;
	border:1px solid black;
}

div.row {
}

div.row > div[class*='col-'] {
	border-left:1px #333 solid;
	padding-bottom: 500em;
	margin-bottom: -500em;
}

div.row > div[class*='col-']:first-child {
	border-left:none;	
}

.header {
	background-color:black;
	color:white;
	font-weight:bold;
}

div.table div[class*='col-'] {
	padding-left:4px;
	padding-right:4px;		
}

/* Responsive */

@media all and (max-width:1200px) {
	#socialnetwork {
		opacity:0.4;	
	}
}

@media all and (max-width:1080px) {
	#socialnetwork {
		display:none;
	}			
}

@media all and (max-width:972px) {
	#categories .title {
		font-size:1.0em;
	}
	.domaines {
		font-size:0.9em;	
	}
	
	#categories {
		width:100% !important;	
		padding:0px !important;
		margin-left:0px !important;
		margin-right:0px !important;	
	}
	
	.categorie {
		width:100% !important;	
	}
	
	.carouselLeftBtn, .carouselRightBtn {
		display:none;
	}
	
}

@media all and (max-width:480px) {
	[class*='col-'] {
		float: none;
		width:100%;
	}	
	
	body {
		padding-top:4px;
		background-color:#E4E1DC;
	}
	
	#search,#espacePro {
		text-align:left;
		float:none;
		width:100%;
	}
	
	input, #search input {
		width:96%;	
		margin:auto;
	}

	.grid-pad > [class*='col-'],.grid-pad > .first,.grid-pad > .first-row,.grid-pad > [class*='col-']:last-of-type,.grid-pad-in:first-child > [class*='col-'],.grid-pad-in > [class*='col-'],#categories.grid-pad > [class*='col-'] {
		padding: 4px 4px 4px 4px;
	}

	#voirTousNosSeminaires {
		display:none;	
	}

	#categories {
		padding:0px !important;	
		width:100% !important;
		margin-top:50px;
	}

	#menu input, #menu form {
		margin-left:0px;	
		padding-left:0px;
		float:left;
		width:100% !important;
	}

	.categorie > .title {
		width:100% !important;
		position:static !important;
	}
	
	.categorie {
		height:auto;
		width:100% !important;		
		position:static; !important;			
	}
	
	.categorie > .button {
		display:none;	
	}
	
	#categories {
		margin-left:0px;
		margin-right:0px;	
	}	
	
	#socialnetwork {
		display:none;
	}
	
	#socialnetwork > div {
		
	}
	
	#contenuDomaine {
		margin-left:0px;
		margin-right:0px;
		top:2px;
	}	
	
/*
	#headerStart {
		margin-left:0px !important;
	}
	
	#headerStart > img {
		display:none;	
	}
	
	#headerStart div {
		overflow:visible !important;
		white-space:normal !important;
		height:auto !important;		
	}
*/
	
	#menuMobile {
		display:inline-block;
		width:40px;	
		height:34px;
		margin-right:20px;
		background-image:url(/images/menu.png);
		background-repeat:no-repeat;
	}

	#menuBlanc {
		display:none;
		background-color:#58595B !important;		
	}
	
	#menuBlanc * {
		background-color:#58595B !important;
		color:white;		
	}

	#menuBlanc li {
		display:block;
	}

	.categorie {
		margin-bottom:14px;
		margin-top:2px;	
	}

	.categorie .title {
		font-size:1.2em !important;
	}

	.domaines a {
		font-size:1.2em !important;	
	}

	#recherche {
		margin-top:2px;
		padding-bottom:8px;	
	}
	
	.mobile {
		display:block;	
	}
	
	#header {
		display:none;		
	}

	#contacts > div {
		display:none;
	}	
	
	#footer {
		margin-top:20px;
		height:300px !important;	
	}

	#footer div {
		margin-left:4px !important;	
		padding-left:0px !important;
		text-align:left !important;
	}
	
	#footerTop {
		display:none;
	}

	#titresPage li {
		padding-right:4px;	
	}
	
	.carouselLeftBtn, .carouselRightBtn {
		display:none;
	}
	
	.carousel div.textDetail2 {
		display:none !important;	
	}
	
	.carouselEtat {
		display:none !important;	
	}
	
	#carousel.carousel > div {
		background-size:auto;	
	}
	
	.carousel div.textIntro {
		margin-top:0px !important;
	}
	
	.carousel div.cell div.textIntro {
	}

	#footerSeminaires, #footerFormations {
		margin-top:10px;	
	}
}

/* ---------------------------------------------------------------------------- */
/* CAROUSEL
/* ---------------------------------------------------------------------------- */

/* Index */

#carousel {
	box-shadow: 0px 10px 12px rgba(50,50,50,0.2);
	height:462px;
}

#carousel.carousel > div[data-role=screen] {
	height:462px;
	background-repeat:no-repeat;
	background-position:left top;
}

.carousel div.cell {
	display:table;
	height:462px;	
	color:white;	
}

.carousel div.text {
	display:table-cell;
	vertical-align:bottom;
}

.carousel div.cell div.textDetail,.carousel div.cell div.textIntro {
	/* height:inherit;	 */
	background-color:rgba(22,97,103,0.7);
	padding:5px;
	padding-left:40px;
	padding-right:40px;
	font-size:1.2em;
}

.carousel div.cell div.textIntro {
	font-weight:bold;	
	font-size:1.7em;	
	padding-top:30px;
}

.carousel div.cell div.textDetail {
	padding-bottom:30px;	
	font-size:1.0em;
}

.carousel div.cell div.textDetail div.savoirplus {
	text-decoration:underline;
	text-align:right;
	margin-top:10px;
}

#carousel.carousel > div:nth-child( 1 ) {
	background-image:url(/images/carousel/carousel1.jpg);
}

#carousel.carousel > div:nth-child( 3 ) {
	background-image:url(/images/carousel/carousel2.jpg);
}

#carousel.carousel > div:nth-child( 2 ) {
	background-image:url(/images/carousel/carousel3.jpg);
}

#carousel.carousel > div:nth-child( 4 ) {
	background-image:url(/images/carousel/carousel4.jpg);
}

.carouselLeftBtn, .carouselRightBtn {
	position:relative;
	top:-250px;
	left:-30px;
	cursor:pointer;
}

.carouselRightBtn {
	left:97%;
	top:-310px;	
}

.carouselEtat {
	position:relative;
	top:-370px;
	left:5%;
}

#carousel2 {
	height:250px;
}

#carousel2 .carouselLeftBtn {
	top:-150px !important;	
	left:-5px;
	opacity:0.8;
}

#carousel2 .carouselRightBtn {
	top:-180px !important;	
	left:+455px;
	opacity:0.8;	
}

/* ---------------------------------------------------------------------------- */
/* Animation 																	*/
/* ---------------------------------------------------------------------------- */

.chapitres2 {
	animation: animationFrames ease-out 0.4s;
	-webkit-animation: animationFrames ease-out 0.4s;
	-moz-animation: animationFrames ease-out 0.4s;
	-o-animation: animationFrames ease-out 0.4s;
	-ms-animation: animationFrames ease-out 0.4s;
}

.chapitres {
	transition:visibility 0.5s, opacity 0.5s;
	opacity:0;
}

.showFading {
	animation:showFadingFrames ease-out 0.5s;
}

.hideFading {
	display:none;
}

@keyframes showFadingFrames {
  0% {
    opacity:0;
  }
  10% {
	opacity:0.4;  
  }
  50% {
    opacity:0.7;
  }
  100% {
    opacity:1;
  }
}

@keyframes hideFadingFrames{
  0% {
    opacity:1;
  }
  50% {
    opacity:0.7;
  }
  100% {
    opacity:0;
  }
}

input, textarea {
	-webkit-transition: border-color 1s ease;
	-moz-transition: border-color 1s ease;
	-o-transition: border-color 1s ease;
	-ms-transition: border-color 1s ease;
	transition: border-color 1s ease;
}

input:focus {
	border-color:#222;
}

#boxEspaceClient:active {
	background-color:yellow;
  	animation: animationFrames ease-out 0.4s;
  	-webkit-animation: animationFrames ease-out 0.4s;
  	-moz-animation: animationFrames ease-out 0.4s;
  	-o-animation: animationFrames ease-out 0.4s;
  	-ms-animation: animationFrames ease-out 0.4s;
}