﻿@media screen {
main nav .link:after {
	content:' \f107';
	position:absolute;
	display:block;
	top:0;
	right:5px;
	font-family:fas;
	opacity:0.3;
	transition:all 0.2s ease-out;
}
main nav .link:hover:after {
	top:3px;
}
main nav .link.open:after {
	top:3px;
}
main nav .link.open:hover:after {
	top:0;
}
main nav .link.open:after {
	transform:rotate(180deg);
}

#pagecontent {
	background-color:#F9F9F9;
	color:#6D6F71;
}

#pagecontent #newsimage {
	display:block;
	width:100%;
	height:30vw;
	background-size:cover;
	background-position:center center;
}

#pagecontent article {
	display:block;
	width:75vw;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding:0 1.5em 3em 1.5em;
	text-align:justify;
	background-color:#FFFFFF;
	box-sizing:border-box;

}

		#pagecontent article .date {
			display:block;
			margin-left:15%;
			line-height:2em;
			font-weight:bold;
			margin-bottom:2em;
			text-align:left;
		}
				#pagecontent article .date label {
					display:inline-block;
					padding-left:1em;
					border-left:5px solid #FFC72C;
					white-space:nowrap;
				}
		#pagecontent article .title {
			font-weight:300;
			line-height:1.25;
			font-size:25px;
			text-align:left;
		}

		#pagecontent article .hat {
			font-weight:bold;
			padding:1.5vmin 0;
			color:#002E5A;
		}
				#pagecontent article .body p {
					margin:1.5em 0 1.5em 0;
				}
				#pagecontent article .body em {
					font-style:italic;
				}
				#pagecontent article .body .illustration {
					margin-top:1.5em;
				}
						#pagecontent article .body .illustration img {
							width:100%;
						}
				#pagecontent article .body h5 {
					color:#FFC72C;
					font-size:1.2em;
					margin-top:1em;
				}
				#pagecontent article .body h5+p {
					margin-top:0.5em;
				}
				#pagecontent article .body .video {
					background-color:rgba(0,0,0,0.1);
					padding-top:40%;
					position:relative;
				}
				#pagecontent article .body .video.off {
					display:none;
				}
				#pagecontent article .body .video a {
					position:absolute;
					top:0;
					left:0;
					width:100%;
					height:100%;
					background-position:center center;
				}
				#pagecontent article .body .video a::before {
					position: absolute;
					content: "\f144";
					top: 45%;
					width: 70px;
					height: 70px;
					left: 0;
					right: 0;
					margin: auto;
					text-align: center;
					line-height: 70px;
					font-size: 70px;
					top: calc(50% - 35px);
					font-family: 'fas';
					color: #ffc72c;
					opacity: 0.5;
					transition: all 0.5s ease;
				}
				#pagecontent article .body .video a:hover::before {
					opacity: 1;
				}
				#pagecontent article .body .photoalbum {
					margin-left:-15%;
					margin-right:-15%;
				}
				#pagecontent article .body .photoalbum a {
					display:inline-block;
					background-size:cover;
					background-position:center center;
				}
				#pagecontent article .body .photoalbum a.main {
					width:60%;
					padding-top:35%;
					float:left;
					margin-top:10%;
					margin-bottom:25%;
				}
				#pagecontent article .body .photoalbum a.other {
					width:35%;
					padding-top:21%;
					float:right;
					margin-top:1.5em;
				}
				#pagecontent article .body .photoalbum .list {
					clear:both;
				}
				#pagecontent article .body .photoalbum .list span {
					display:none;
				}

				#pagecontent article .body .sound iframe {
					width:100%;
					height:225px;
				}
				#pagecontent article .body a.readalso {
					display:block;
					position:relative;
					margin-left:0;
					margin-right:20%;
					padding:0.3em 3em 0.3em 1em;
					background-color:rgba(20,35,63,0.02);
					border-bottom:3px solid #C7CBD3;
					font-style:italic;
				}
				#pagecontent article .body a.readalso:hover {
					border-bottom-color:#ffc72c;
				}
				#pagecontent article .body a.readalso:before {
					content:'Lire aussi : ';
					text-transform:uppercase;
					font-weight:700;
				}
				body[rel='en'] #pagecontent article .body a.readalso:before {
					content:'Read also : ';
				}
				#pagecontent article .body a.readalso:after {
					position:absolute;
					right:1em;
					top:0.5em;
					content:'\f35d';
					font-family:fas;
					font-style:normal;
					opacity:0.5;
				}
				#pagecontent article .body a.readalso:hover:after {
					opacity:1;
				}
				#pagecontent article .share {
					text-align:center;
				}
						#pagecontent article .share a {
							display:inline-block;
							width:36px;
							height:36px;
							border-radius:50%;
							background-size:14px 14px;
							background-position:center center;
							background-repeat:no-repeat;
							transition:background-color 0.3s ease-out;
						}
						#pagecontent article .share a:hover {
							background-color:#FFC72C !important;
						}
						#pagecontent article .share a.fb {
							background-color:#3b5998;
							background-image:url("/assets/images/icon_fb.svg");
						}
						#pagecontent article .share a.tw {
							background-color:#6FAEDC;
							background-image:url("/assets/images/icon_twitter.svg");
						}
						#pagecontent article .share a.in {
							background-color:#0073B0;
							background-image:url("/assets/images/icon_linkedin.svg");
						}

}

@media screen and (max-width:900px) {
	#pagecontent article {
		width:100%;
		max-width:none;
		padding:0 7% 0 7%;
	}
	#pagecontent article .body .photoalbum {
		margin-left:0;
		margin-right:0;
	}
}

@media screen and (max-width:600px) {
	#pagecontent article .date {
		font-size:13px;
	}
	#pagecontent article .title {
		font-size:18px;
	}
	#pagecontent article .hat {
		font-size:13px;
	}
	#pagecontent article .body {
		font-size:13px;
	}
			#pagecontent article .body p {
				margin:1em 0 0 0;
			}
			#pagecontent article .body .illustration {
				margin-top:1em;
			}

}

