/**************************************************************************************************************/
/*

			NOM DU SITE - Page d'accueil

*/
/**************************************************************************************************************/
body {
	background-image: none;
}
#visual-portal-wrapper {
	padding-top: 80px;
}
#visual-portal-wrapper #portal-columns > .wrapper,
#portal-column-content #content {
	max-width: none;
}
#portal-globalnav li#portaltab-index_html.selected a,
#portal-globalnav li#portaltab-index_html.selected a:hover,
#portal-globalnav li#portaltab-index_html.selected a:focus{
	font-weight: 700;
}
#portal-column-content h1{
	position:absolute;
	top:-5000px;
}
#portal-column-content .documentDescription{
	position:absolute;
	top:-5000px;
}
#portal-columns {
	background: url(../images/backgroundHome.jpg) center bottom no-repeat transparent;
}
#portal-footer {
	margin-top: 0;
	border-top: none;
}



/*--------------------------------------------------------------------------------------------------------------
	== COMMUN
--------------------------------------------------------------------------------------------------------------*/
#portal-column-content #portletPageTopRow > div {
	padding-top: var(--margin-current);
	padding-bottom: var(--margin-current);
}

#portal-column-content #portletPageTopRow > div > .portlet > .portletHeader {
	color:var(--color-current);
	font-family: var(--font-title);
	font-weight: 300;
	font-size: 3.5em;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: calc(var(--margin-current)/2);
}
#portal-column-content #portletPageTopRow > div > .portlet > .portletHeader a{
	pointer-events: none;
	font-weight: bold;
}
#portal-column-content #portletPageTopRow > div > .portlet > .portletFooter {
	text-align: center;
}
#portal-column-content #portletPageTopRow > div > .portlet > .portletFooter a{
	background: var(--color-primary);
	color: #fff !important;
	padding: 10px 30px;
	border-radius: 5px;
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.4em;
	font-weight: bold;
	font-family: var(--font-title);
}
#portal-column-content #portletPageTopRow > div > .portlet > .portletFooter a:hover{
	text-decoration: none;
	padding-left: 50px;
	padding-right: 50px;
}




/*--------------------------------------------------------------------------------------------------------------
	== SLIDER
--------------------------------------------------------------------------------------------------------------*/
#visual-portal-wrapper .header {
	overflow: hidden;
}
#visual-portal-wrapper .header .bx-wrapper {
	margin-bottom: -1px;
}
#visual-portal-wrapper .header .portletItem {
	position: relative;
}
#visual-portal-wrapper .header .bx-pager {
	display: none;
}
#visual-portal-wrapper .scrollDown a{
	position: absolute;
	bottom: -1px;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
#visual-portal-wrapper .scrollDown a:hover {
	bottom: -4px;
}
#visual-portal-wrapper .scrollDown img{
	max-height: 40px;
	width: auto !important;
}

/* IMG */
#visual-portal-wrapper .header .portletHeader {
	position: absolute;
	max-width: var(--max-width);
	padding-right: calc(var(--max-width)/2.23);
    padding-left: var(--margin-text);
	z-index: 9;
	margin: auto;
	top: 30%;
	left: 0;
	right: 0;
}
#visual-portal-wrapper .header .portletHeader .entete{
	text-transform: uppercase;
	pointer-events: none;
	font-size: 3em;
	line-height: 1.2;
	color: #fff;
	font-weight: bold;
	
}

#visual-portal-wrapper .header .portletItem > a:first-child{
	display: block;
	overflow: hidden;
	position: relative;
	pointer-events: none;
}
#visual-portal-wrapper .header .portletItem > a:first-child::before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	background: linear-gradient(90deg, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 65%);
	z-index: 1;
}

#visual-portal-wrapper .header .portletItem > a:first-child::after {
	content: "";
	padding-top: 80vh;
	display: block;
}
#visual-portal-wrapper .header .portletItem > a:first-child img{
	position: absolute;
	object-fit: cover;
	top: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
    left: 50%;
	max-width: none;
    min-width: 100%;
    min-height: 100%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

/* INFOS */
#visual-portal-wrapper .header .portletItem {
	position: relative;
}

#visual-portal-wrapper .header .portletItem .infos {
	position: absolute;
	top: 30%;
	max-width: var(--max-width);
	padding-right: calc(var(--max-width)/2);
	padding-left: var(--margin-text);
	margin:  0 auto 0;
	left: 0;
	right: 0;
	color: #fff;
	z-index: 2;
	display: flex;
	flex-direction: column;
}
#visual-portal-wrapper .header .portletItem .infos h2{
	text-transform: uppercase;
	pointer-events: none;
	font-size: 1.5em;
	line-height: 1.2;
	margin-bottom: 20px;
}
#visual-portal-wrapper .header .portletItem .infos h2 a{
	color: #fff;
}
#visual-portal-wrapper .header .portletItem .infos p{
	font-size: 2em;
	line-height: 1.2;
	pointer-events: none;
	margin-bottom: 10px;
	order: -1;
	padding-top:4em;
}

.site-mg #visual-portal-wrapper .header .portletItem .infos p {
	padding-top: 5.8em;
}
#visual-portal-wrapper .header .portletItem .infos a.savoirplus{
	display: inline-block;
	background: #fff;
	color: var(--color-primary);
	padding: 10px 30px;
	border-radius: 5px;
	text-transform: uppercase;
	font-size: 1.5em;
	text-decoration: none;
	font-weight: bold;
	font-family: var(--font-title);
	width: fit-content;
}
#visual-portal-wrapper .header .portletItem .infos a.savoirplus:hover{
	background: var(--color-primary);
	color: #fff;
}


/*--------------------------------------------------------------------------------------------------------------
	== MISSIONS
--------------------------------------------------------------------------------------------------------------*/
#visual-portal-wrapper #portletPageTopRow .portletNumber-0 {
	background: var(--color-secondary);
}
#portal-column-content .missions .portletHeader,
#portal-column-content .missions .portletHeader a {
	color: #fff !important;
}
#portal-column-content .missions .portletHeader{
	margin-bottom: var(--margin-current) !important;
}
#portal-column-content .missions ul {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--margin-current);
}
#portal-column-content .missions ul li{
	width: 33%;
	text-align: center;
}
#portal-column-content .missions ul li h2 a {
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.6em;
}
#portal-column-content .missions ul li h2 a:before{
	font-size: 4.5em;
	font-weight: normal;
	line-height: 1;
	display: block;
	padding-bottom: 20px;
	font-family: var(--font-picto);
	color: #fff;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#portal-column-content .missions ul li:hover h2 a:before{
	-moz-transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);
}
#portal-column-content .missions ul li:hover h2 a,
#portal-column-content .missions ul li:hover h2 a:before {
	color: var(--color-primary) !important;
}
#portal-column-content .missions ul li:first-child h2 a:before{
	content: "\e907";
}
#portal-column-content .missions ul li:nth-child(2) h2 a:before{
	content: "\e906";
}
#portal-column-content .missions ul li:last-child h2 a:before{
	content: "\e905";
}




/*--------------------------------------------------------------------------------------------------------------
	== ACTUALITES
--------------------------------------------------------------------------------------------------------------*/
#visual-portal-wrapper .News {
	border-bottom: 1px solid #707070;
	padding-bottom: var(--margin-current);
	margin-left: var(--margin-text);
	margin-right: var(--margin-text);
}
#visual-portal-wrapper .News > ul {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
	padding-left: 10px;
	padding-right: 10px;
}
#visual-portal-wrapper .News > ul > li{
	width: 25%;
	padding: 0 10px;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
}
#visual-portal-wrapper .News > ul > li a.illustration{
	display: block;
	margin-bottom: 20px;
	overflow: hidden;
	position: relative;
}
#visual-portal-wrapper .News > ul > li a.illustration:after {
	content: "";
	padding-top: 60%;
	display: block;
}
#visual-portal-wrapper .News > ul > li a.illustration img{
	position: absolute;
	object-fit: cover;
	top: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
    left: 50%;
	max-width: none;
    width: 101%;
    height: 101%;
	min-height: 100%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

#visual-portal-wrapper .News > ul > li:hover a.illustration img{
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.05);
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1.05);
	-o-transform: translateX(-50%) translateY(-50%) scale(1.05);
	-ms-transform: translateX(-50%) translateY(-50%) scale(1.05);
	transform: translateX(-50%) translateY(-50%) scale(1.05);
}
#visual-portal-wrapper .News > ul > li h2{
	margin: 0 0px 5px;
	font-size:1.8em;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1;
	text-align: left;
	text-decoration: none;
	color: var(--color-current) !important;
}
#visual-portal-wrapper .News > ul > li h2 a{
	color: var(--color-current) !important;
	text-decoration: none;
}
#visual-portal-wrapper .News > ul > li h2 a::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#visual-portal-wrapper .News > ul > li p{
	line-height:1.4;
	font-size: 1.6em;
	margin: 0 0px 30px;
	text-align: left;
}

#visual-portal-wrapper .News .subjects-listing {
	position: absolute;
	top: 20px;
	right: 10px;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
#visual-portal-wrapper .News .subjects-listing li span{
	background: var(--color-secondary);
	padding: 5px 10px 3px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	display: inline-block;
}
#visual-portal-wrapper .News .subjects-listing .slider-page-accueil{
	display: none;
}

/*--------------------------------------------------------------------------------------------------------------
	== carte
--------------------------------------------------------------------------------------------------------------*/
#portal-column-content #portletPageTopRow > div.portletNumber-2 {
	padding-top: 0;
}
#visual-portal-wrapper .carte {
	text-align: center;
}
#visual-portal-wrapper .carte h2 {
	color:var(--color-current);
	font-family: var(--font-title);
	font-weight: 300;
	font-size: 3.5em;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: calc(var(--margin-current)/2);
}
#visual-portal-wrapper .carte #carte{
	position: relative;
}
#visual-portal-wrapper .carte #carte a{
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: var(--font-picto);
	color: var(--color-secondary) !important;
	font-size: 5.5em;
	opacity: 0.7;
	line-height: 1;
	text-decoration: none;
}

#visual-portal-wrapper .carte #carte a.cameroun {
	-moz-transform: translateX(-40px) translateY(-24px);
	-webkit-transform: translateX(-40px) translateY(-24px);
	-o-transform: translateX(-40px) translateY(-24px);
	-ms-transform: translateX(-40px) translateY(-24px);
	transform: translateX(-40px) translateY(-24px);
}
#visual-portal-wrapper .carte #carte a.europe {
	-moz-transform: translateX(-33px) translateY(-128px);
	-webkit-transform: translateX(-33px) translateY(-128px);
	-o-transform: translateX(-33px) translateY(-128px);
	-ms-transform: translateX(-33px) translateY(-128px);
	transform: translateX(-33px) translateY(-128px);
}
#visual-portal-wrapper .carte #carte a.chili {
	-moz-transform: translateX(-220px) translateY(85px);
	-webkit-transform: translateX(-220px) translateY(85px);
	-o-transform: translateX(-220px) translateY(85px);
	-ms-transform: translateX(-220px) translateY(85px);
	transform: translateX(-220px) translateY(85px);
}
#visual-portal-wrapper .carte #carte a.madagascar {
	-moz-transform: translateX(65px) translateY(50px);
	-webkit-transform: translateX(65px) translateY(50px);
	-o-transform: translateX(65px) translateY(50px);
	-ms-transform: translateX(65px) translateY(50px);
	transform: translateX(65px) translateY(50px);
}
#visual-portal-wrapper .carte #carte a:hover{
	opacity: 0.9;
	text-decoration: none;
	color: var(--color-primary) !important;
}

#visual-portal-wrapper .carte .bouton{
	margin-top: var(--margin-current);
	border: 2px solid var(--color-primary);
	background: var(--color-primary);
	color: #fff !important;
	padding: 10px 30px;
	border-radius: 5px;
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.4em;
	font-weight: bold;
	font-family: var(--font-title);
	text-decoration: none;
}
#visual-portal-wrapper .carte .bouton+.bouton{
	color: var(--color-primary) !important;
	background: #fff;
	margin-left: 30px;
}
#visual-portal-wrapper .carte .bouton:hover{
	border-color: var(--color-secondary);
	background: var(--color-secondary) !important;
	color: #fff !important;
}




/*------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------*/
/*
	= AJUSTEMENT PETITS ECRANS
*/
/*------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1179px){
	#visual-portal-wrapper .header .portletHeader,
	#visual-portal-wrapper .header .portletItem .infos {
		padding-left: 50px;
		padding-right: 50px;
		text-align: center;
	}
	#visual-portal-wrapper .header .portletItem .infos h2 {
		height: 1.3em;
	}
	.site-mg #visual-portal-wrapper .header .portletItem .infos p {
		padding-top: 3.4em;
	}
	#visual-portal-wrapper .header .portletItem > a:first-child::before {
		background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%);
	}
	#portal-column-content #portletPageTopRow > div > .portlet > .portletHeader {
		font-size: 2.5em;
	}
}
@media only screen and (max-width: 1023px){
	#visual-portal-wrapper .News > ul > li {
		width: 50%;
	}
	#visual-portal-wrapper .header .portletHeader .entete,
	#visual-portal-wrapper .header .portletItem .infos h2 {
		font-size: 2em;
	}
	#portal-column-content .missions ul li h2 a {
		font-size: 1.3em;
	}
	#portal-column-content .missions ul li h2 a:before {
		font-size: 4.7em;
	}
	.site-mg #visual-portal-wrapper .header .portletItem .infos p {
		padding-top: 2.8em;
	}

}
@media only screen and (max-width: 767px){
	#visual-portal-wrapper .header .portletHeader,
	#visual-portal-wrapper .header .portletItem .infos {
		padding-left: 30px;
		padding-right: 30px;
	}
	#visual-portal-wrapper .header .portletItem .infos h2 {
		font-size: 2em;
		height: 2.3em;
	}
	#visual-portal-wrapper .header .portletItem .infos p {
		font-size: 1.6em;
	}
	.site-mg #visual-portal-wrapper .header .portletItem .infos p {
		padding-top: 4.8em;
	}
	.bx-wrapper .bx-controls-direction a::before,
	.bx-wrapper .bx-controls-direction a::after {
		font-size: 3em;
	}
	#visual-portal-wrapper .scrollDown img {
		max-height: 30px;
	}

	#portal-column-content #portletPageTopRow > div > .portlet > .portletHeader {
		font-size: 2em;
	}

	#portal-column-content .missions ul {
		flex-wrap: wrap;
	}
	#portal-column-content .missions ul li {
		width: 100%;
		margin-top: 80px;
	}
	#portal-column-content .missions ul li:first-child {
		margin-top: 0;
	}

	#visual-portal-wrapper .News > ul > li {
		width: 100%;
	}

	#visual-portal-wrapper .carte #carte a {
		font-size: 3em;
		
		-moz-transform: translateX(0) translateY(0) !important;
		-webkit-transform: translateX(0) translateY(0) !important;
		-o-transform: translateX(0) translateY(0) !important;
		-ms-transform: translateX(0) translateY(0) !important;
		transform: translateX(0) translateY(0) !important;

		top: auto;
		left: auto;
	}
	#visual-portal-wrapper .carte #carte a.cameroun {
		top: 47%;
		left: 44%;
	}
	#visual-portal-wrapper .carte #carte a.europe {
		top: 15%;
    	left: 45%;
	}
	#visual-portal-wrapper .carte #carte a.chili {
		bottom: 10%;
    	left: 20%;
	}
	#visual-portal-wrapper .carte #carte a.madagascar{
		bottom: 21%;
    	left: 59%;
	}

}
