body { 
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight:100;
}
.hidden { display:none }
.fullDiv {
	width: 100%;
	float: left;
}
.floatLeft { float:left }
.floatRight { float:right }
.marginTop-sm { margin-top:10px }
.marginTop-md { margin-top:20px }
.marginTop-lg { margin-top:30px }
p, ul li { font-size:1.2em }
#header {
	/* margin-bottom:30px; */
	background-color:#111;
	color:#fff;
	padding-bottom:10px;
	/* border-bottom: 5px solid green; */
}
h1 {
	font-size:48px;	
	margin-top:10px;
}
h2 { font-size:36px }
h3.animation-header { 
	font-size:32px; 
	margin:30px 0 20px 0;
}
h1,h2,h3,h4,h5,h6 { font-weight:100 }
#main-logo {
	float:left;
	padding-left:30px;
	margin-right:20px;
}
#main-logo img {
	height:52px;
	float:left;
	margin-right:15px;
}
.headerSpan {
	font-size:22px;
	float:left;
	padding-top:25px;
}
.githubAnchor {
	font-size:16px;
	font-weight:normal;	
	color:#fff;
	padding:10px 20px;
	border:2px solid #fff;
	margin-top:15px;
	margin-right:20px;
	text-decoration:none;
}
.githubAnchor .fa { 
	font-size:1.5em;
	margin-right:5px; 
}
.githubAnchor:hover {
	background-color:#fff;
	color:#000;
}
#main-container {/*entourage et fond de la div regroupant toutes les tiles*/
	padding-top:30px;
	/*background-color:#f1f1f1;*/
	/*box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);*/
}
#tiles-container {
	width: 100%;
}
.tl-tile h2 {
	color:#fff; 
	padding-left:10px;
}
/* Page#1 */
#tileA .tl-tile-content {
	background-color:#1f77af;
	background-image: url(../img/4.jpg);
	background-repeat: no-repeat;
	background-position: 100% 50%;
}
#tileB .tl-tile-content {
	background-color:#6f5499;
	background-image: url(../img/1.jpg);
	background-repeat: no-repeat;
	background-position: 80% 30%;
}
#tileC .tl-tile-content {
	
	background-image: url(../img/g-800-aramat-01.jpg);
	background-repeat: no-repeat;
	background-position: 80% 80%;
	background-color:#4ea05f;
}
#tileD .tl-tile-content {
	background-color:#000; /*#d98c14*/
	background-image: url(../img/G-te-02.jpg);
	background-repeat: no-repeat;
	background-position: 100% 50%;
}
#tileE .tl-tile-content {
	background-color:#6f5499;
	background-image: url(../img/g-abri-01.jpg);
	background-repeat: no-repeat;
	background-position: 80% 30%;
}
#tileF .tl-tile-content {
	background-color:#000;/*    #4ea05f    vert  */
	background-image: url(../img/G-meca-01.jpg);
	background-repeat: no-repeat;
	background-position: 100% 30%;
}
#tileG .tl-tile-content {
	background-image:url(../img/2.jpg);
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-color:#4ea05f;
	transition:all 350ms ease-out;
}

.tileG_content-hidden {
	position:absolute;
	top:50%;
	left:50px;
	right:50px;
	margin-top:-0px;
	bottom:0;
	color:#fff;
	opacity:0;
	transition:all 350ms ease-out;
}
.tileG_content-hidden p { font-size:1.2em }
#tileH .tl-tile-content {
	/* background:url('../img/code_sample.png') no-repeat 30px 50px; */
	background-color:#FFF;/*#1f77af*/
	background-image: url(../img/G-iron-01.jpg);
	background-repeat: no-repeat;
	background-position: 100% 80%;
}
#tileI .tl-tile-content { 
	background-color:#FFF;
	background-image: url(../img/G-lenotre-002.jpg);
	background-repeat: no-repeat;
	background-position: 100% 80%;
}
#tileJ .tl-tile-content { /*tile n10*/
	background-image: url(../img/aramat-a.jpg);
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-color:#d98c14;
}

/* Page#2 */
#tileK .tl-tile-content {
	background-color:#FFF;
	background-image: url(../img/G-araign-01.jpg);
	background-repeat: no-repeat;
	background-position: 100% 50%;
}
#tileL .tl-tile-content {
	background-color:#FFF;
	background-image: url(../img/aramat-vase-web.jpg);
	background-repeat: no-repeat;
	background-position: 100% 80%;
}
#tileM .tl-tile-content {
	background-color:#FFF;
	background-image: url(../img/module-ranger-bain-web.jpg);
	background-repeat: no-repeat;
	background-position: 100% 80%;
}
#tileN .tl-tile-content {
	background-color:#1f77af;
	background-image: url(../img/L-001-table-3Dprint-web.jpg);
	background-repeat: no-repeat;
	background-position: 100% 80%;
}
#tileO .tl-tile-content {
	background-color:#FFF;
	background-image: url(../img/WP_002231-web.jpg);
	background-repeat: no-repeat;
	background-position: 100% 80%;
}
#tileP .tl-tile-content {
	background-color:#FFF;
	background-image: url(../img/G-par-01.jpg);
	background-repeat: no-repeat;
	background-position: 100% 80%;
}
#tileQ .tl-tile-content {
	background-color:#1f77af;
	background-image: url(../img/g-800-noix-01.jpg);
	background-repeat: no-repeat;
	background-position: 80% 30%;
}
#tileR .tl-tile-content {  /*tile 18*/
	background-color:#FFF; /*#1f77af bleu foncé*/
	background-image: url(../img/G-bam-03.jpg);
	background-repeat: no-repeat;
	background-position: 80% 30%;
}
#tileS .tl-tile-content {
	background-color:#1f77af;
	background-image: url(../img/LM-IMG_20210906_205416-W-Rweb.jpg);
	background-repeat: no-repeat;
	background-position: 40% 30%;
}
#tileT .tl-tile-content {
	background-color:#1f77af;
	background-image: url(../img/SERRE-IMG-20201220-162435-web-version-hiver.jpg);
	background-repeat: no-repeat;
	background-position: 80% 50%;
}
#tileU .tl-tile-content {
	background-color:#1f77af;
	background-image: url(../img/lmtv-fdw-22.jpg);
	background-repeat: no-repeat;
	background-position: 80% 50%;
}
/* Tiles ---------------------- */
.tl-tiles-container:not(.live-tiles) .tl-tile {
	transition:all 350ms ease-out;
}
.tl-tiles-container:not(.live-tiles) .tl-tile:hover {
	transform: scale(1.03)!important;
	z-index:999;
}
.tl-tile-content {
	background-color:#f1f1f1;
	overflow:hidden;
}

.content-hidden {
	width:100%;
	float:left;
	position:relative;
	margin-top:15px;
	top:20px;
	box-sizing:border-box;
	padding: 15px;
	font-size:1em;
	background-color: rgba(0,0,0,0.5);
	color:#fff;
	opacity:0;
	transition:all 350ms ease-out;
}
.content-hidden.content-hidden-small { 
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	background-color: rgba(0,0,0,0.8);
}
.tl-tile:hover .content-hidden {
	top:0;
	opacity:1;
}
.content-hidden a { 
	color:#fff;
	font-weight:bold;
}
#tileG:hover .tl-tile-content { background-position:30px 500px }
#tileG:hover .tileG_arrow_left { left:5px }
#tileG:hover .tileG_arrow_right { right:5px }
#tileG:hover .tileG_content-hidden { opacity:1 }

.content-div {
	margin-top:20px;
}

.section-header { text-align:center }

/* Code block */
.codeBlock {
	width:100%;
	margin:10px 0;
}
.codeHeader {
	width:100%;
	display:inline-block;
	box-sizing:border-box;
	padding:10px;
	background-color:#61a8d8;
	color:#fff;
}
code {
	width:100%;
	display:inline-block;
	padding:15px;
	box-sizing:border-box;
	background-color:#555;
	color:#f1f1f1;
	border-radius:0;
	font-size:1.2em;
}
h3 code {
	display:inline;
	font-size:0.8em;
	padding:5px 7px;
	background-color:#e1e1e1;
	color:#555;
}
.textSection pre,
.secInner-comments code {
	display:inline;
	font-size:0.8em;
	padding:3px 5px;
	background-color:#e1e1e1;
	color:#555;
}
code i {
	color:#8aec5f
}
code.code-scroll {
	height:500px;
	overflow-y:scroll;
}
.well ul { 
	margin:0;
	padding:0;
}
.well li { 
	list-style:none; 
	padding:5px 0;
}
.well li > span {
	font-size:1em;
	display:inline-block;	
}
.well li > span:last-of-type { 
	margin-left:10px; 
	color:red;
}

/* Live example */
.live-tiles { padding:10px }
.live-example { border:1px solid #f0ad4e }
.live-header {
	padding:10px;
	background-color:#f0ad4e;
	color:#fff;
}
.live-tiles .tl-tile-content { 
	background-color:#61a8d8; 
	color:#fff;
}

/* Affix nav */
#side-nav-affix nav {
	padding-top:30px;	
}
#side-nav-affix nav.affix {
	width:200px;
	top:0;
}
#side-nav-affix ul {
	margin:0;
	padding:0;
}
#side-nav-affix li {
	width:100%;
	display:block;
	float:left;
	padding-left:15px;
	list-style:none;	
}
#side-nav-affix a {
	display:block;
	padding:5px 10px;
}
#side-nav-affix a {
	text-decoration:none;
	font-size:18px;
}
#side-nav-affix li.active > a {
	font-weight:bold;	
}
.side-nav-level-0 li.active a {
	color:#fff;
}
.ul-1,
.ul-2 {
	display:none;
}
.ul-0 li.active .ul-1,
.ul-1 li.active .ul-2 { display:block }

/* Go to top */
#goTop {
	padding:10px 15px;
	position:fixed;
	bottom:140px;
	background-color:#75b0d7;
	color:#fff;
	cursor:pointer;
	display:none;
}
#goTop:hover {
	background-color:#61a8d8;
}

.load_live { margin-left:10px }

/* Footer */
footer {
	position:relative;
	margin-top:50px;
	padding-top:40px;
	padding-bottom:40px;
	text-align:center;
	background-color:#333;	
}
#kapa_logo {
	position:absolute;
	padding:5px;
	height: 46px;
	right: 10px;
	top: 50%;
	margin-top:-18px;
	border:1px solid #d8d8d8;
}
footer i {
	font-size:14px;
	color:#777;
	font-weight:100;
	color:#fff;
}
footer a,
footer a:hover { color:#d8d8d8 }

/* .content-hidden .githubAnchor { float:left } */
@media (max-width:1200px) {
	.tl-tile-content h2 {
		font-size:24px;
	}	
}
@media (min-width:993px) and (max-width:1200px) {
	.content-hidden {
		margin-top:10px;
		padding: 10px;
		font-size:0.9em;
	}
	.githubAnchor {
		font-size:12px;
		padding:5px 10px;
		margin-top:10px;
	}
	.githubAnchor .fa { 
		font-size:1.2em;
	}
	.tileG_content-hidden p { font-size:0.9em }
}
@media (max-width:992px) {
	.githubAnchor .fa { margin:0 }
	.forkText { display:none }
	.content-hidden {
		position:absolute;
		left:0;
		right:0;
		bottom:0;
		margin:0;
		background-color: rgba(0,0,0,0.8);
	}
	.content-hidden .githubAnchor { float:left }
	p { font-size:1.1em }
	code { font-size:1em }
}