/*************************************************************************************************************************************************************************************
	thematic-analysis section 
*************************************************************************************************************************************************************************************/
.page-thematic-analysis .section-big-title-box {
	background-color: rgb(255, 255, 255);
	width: 100%;
}

.page-thematic-analysis .section-big-title {
	font-size: 48px;
	color: rgb(255, 255, 255);
	text-align: center;
	text-align: left;
	padding: 200px 0 200px 50px;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.33);
}

.page-thematic-analysis .section-big-title-box a {
	color: white;
}

.page-thematic-analysis .page-separator svg {
	display: block;
	width: 100%;
	height: 90px;
	background: #004494;
}

.page-thematic-analysis .page-separator {
	background: #41ade5;
	position: relative;
	z-index: 1;
}

.page-thematic-analysis .page-separator:before, .page-thematic-analysis .page-separator:after
	{
	background: inherit;
	content: '';
	display: block;
	height: 75%;
	left: 0;
	position: absolute;
	right: 0;
	z-index: -1;
	-webkit-backface-visibility: hidden;
}

.page-thematic-analysis .page-separator:before {
	top: 0;
	-webkit-transform: skewY(1.5deg);
	transform: skewY(1.5deg);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

.page-thematic-analysis .page-separator:after {
	bottom: 0;
	-webkit-transform: skewY(-1.5deg);
	transform: skewY(-1.5deg);
	-webkit-transform-origin: 100%;
	transform-origin: 100%;
}

.page-thematic-analysis .page-separator {
	margin-bottom: 50px;
	margin-top: 150px;
	text-align: center;
}

.page-thematic-analysis .page-separator h2 {
	border-bottom: 0px;
	color: white;
	font-size: 5vh;
}

.page-thematic-analysis .page-separator p {
	font-size: 14px;
	font-weight: 300;
	margin-top: 0.5em;
	color: white;
}

/*
	Is the "Back to the top" button:
*/
.page-thematic-analysis .page-separator a {
    color: white;
    font-size: 20px;
    border: solid 1px white;
    border-radius: 30px;
    padding: 3px 14px 3px 14px;
}

/* ==================================================================
 *
 *	thematic-page-item text
 *
 ================================================================== */
.page-thematic-analysis .thematic-page-item p {
	padding-top: 26px;
}

/* ==================================================================
 *
 *	thematic-page-item pictures
 *
 ================================================================== */
.page-thematic-analysis .thematic-page-item img {
	width: 20%;
	height: auto;
	transition: all 300ms ease-out;
	max-width: 150px;
	filter: grayscale(61%) drop-shadow(8px 8px 10px grey);
	/* report pictures have 2 filters */
	margin: 2%; /* report pictures have a margin */
}
/** Different conf for visualisation previews */
.page-thematic-analysis .key-indicators-area .thematic-page-item img {
	width: 100%;
	max-width: initial;
	filter: none;
	margin: 0px;
}

/* on odd rows, picture on the right side */
.page-thematic-analysis .views-row-odd .thematic-page-item img {
	float: right;
	margin: 30px 0% 3% 3%;;
}
/* on even rows, picture on the left side */
.page-thematic-analysis .thematic-page-item img {
	float: left;
	margin: 30px 5% 1% 0%;
}
/* If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. 
	Then we can the clearfix hack to the containing element to fix this problem:
*/
.page-thematic-analysis .thematic-page-item::after {
	content: "";
	clear: both;
	display: table;
}

/* ==================================================================
 *
 *	Items without border  
 *
 ================================================================== */
.page-thematic-analysis .thematic-page-item {
	padding: 25px 15px;
	margin-bottom: 15px;
	box-shadow: initial;
}

/* ==================================================================
 *
 *	Parallax  / for the theme main wide picture
 *
 ================================================================== */
.page-thematic-analysis div.module.parallax {
	padding: 240px 0;
}

.page-thematic-analysis div.module.parallax-1 {
	background-image: url("../img/demo/pattern1.png");
}

/* Example how to use it:
	<div class="section-big-title-box">
		<div class="parallax" style="background:url('%topic:field_main_image')">
			<div class="narrow-panel section-big-title">News on "%topic:field-fill-name"</div>
        	<div class="narrow-panel">This text could explain what is presented below</div>
		</div>
	</div>
	*/

/* ==================================================================
 *
 *	Some tests : 2 columns in the header Key sentence / Key visual
 *  Todo: To be moved into 'Generic'
 *
 ================================================================== */
.page-thematic-analysis .col-container {
	display: table; /* Make the container element behave like a table */
	width: 100%; /* Set full-width to expand the whole page */
}

.page-thematic-analysis .col {
	display: table-cell;
	/* Make elements inside the container behave like table cells */
}

.page-thematic-analysis .col-align-bottom {
	display: table-cell;
	/* Make elements inside the container behave like table cells */
	vertical-align: bottom;
}

.page-thematic-analysis .col-align-bottom-right {
	display: table-cell;
	/* Make elements inside the container behave like table cells */
	vertical-align: bottom;
	text-align: right;
}
/* ==================================================================
 *
 *	Some tests : img hover and shadow
 *  Todo: To be moved into 'Generic'
 *
 ================================================================== */
.page-thematic-analysis .highlight-paragraph img {
	cursor: pointer;
}

/** 
 Pager, on the same line that the read more button
*/
.page-thematic-analysis .pager {
	position: relative;
	float: left;
}
/* add blank between items */
.page-thematic-analysis .add-marging-to-inside-box {
    margin-bottom: 70px;
}

.views-field.views-field-field-visualization-country-lvl {
    margin-bottom: 76px;
}

/* ==================================================================
 *
 *	Some tests : Infographic preview
 *  Todo: To be moved into 'Generic'
 *
 ================================================================== */
.infographic-crop {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.infographic-crop img {
    width: 100%;
    /* margin: -122px 0 0 0px; add this to change the visible part of the img */
}