/**************************************************************************************************************/
/*
			DIOCESE DE COUTANCE - minisite	
*/
/**************************************************************************************************************/



/*------------------------------------------------------------------------------------------------------------*/
/*
	= PORTLETS
*/
/*------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------
	== NAVIGATION
--------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 800px) {
	#portal-top.big-header .navigation {
		top: 50px;
	}
	.navigation {
		top: 30px;
	}
}
/*--------------------------------------------------------------------------------------------------------------
	== EN IMAGES
--------------------------------------------------------------------------------------------------------------*/
.en-images {}
@media only screen and (min-width: 800px) {
	.en-images .portletHeader {
		position: relative;
		margin: 0 0 var(--margin-text);
		text-align: center;
		line-height: 1;
	}
	.en-images .portletHeader span {
		position: relative;
		display: inline-block;
		padding: 0 10px;
		font-size: 5em;
		font-weight: 300;
	}
	.en-images .portletHeader a {
		position: absolute;
		bottom: 0;
		right: 0;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin: 0 0 10px;
		font-weight: 700;
		font-size: 1.2em;
		text-transform: uppercase;
	}
	#content .en-images .portletHeader a:hover,
	#content .en-images .portletHeader a:focus {
		color: var(--color-current)!important;
		text-decoration: none;
	}
	.en-images .portletHeader a::before {
		content: '(';
		padding: 0 10px 0 0;
		font-size: 1.3em;
		font-weight: 300;
	}
	.en-images .portletHeader a::after {
		content: ')';
		padding: 0 0 0 10px;
		font-size: 1.3em;
		font-weight: 300;
	}
	#content .en-images ul {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 20px;
	}
	.en-images ul li {
		border-radius: 5px;
		box-shadow: 0 0 30px rgba(0,0,0,0.1);
		overflow: hidden;
	}
	.en-images > ul > li div::before {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	.en-images {
		padding: var(--margin-current) var(--margin-flex) 0;
		background: var(--color-primary);
	}
	.en-images .portletHeader span {
		position: relative;
		display: inline-block;
		margin: 0 0 10px;
		font-size: 4em;
		font-weight: 300;
		color: #fff;
		line-height: 1;
	}
	#content .en-images .portletFooter a {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin: 10px 0 0;
		font-weight: 700;
		font-size: 1.2em;
		text-transform: uppercase;
		color: #fff;
	}
	#content .en-images .portletFooter a:hover,
	#content .en-images .portletFooter a:focus {
		color: #fff!important;
		text-decoration: none;
	}
	.en-images .portletFooter a::before {
		content: '(';
		padding: 0 10px 0 0;
		font-size: 1.3em;
		font-weight: 300;
	}
	.en-images .portletFooter a::after {
		content: ')';
		padding: 0 0 0 5px;
		font-size: 1.3em;
		font-weight: 300;
	}
	.en-images a.illustration {
		display: block;
		margin: 0 0 10px;
		border-radius: 5px;
		overflow: hidden;
	}
	.en-images a.illustration img {
		display: block;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	.en-images h2 {
		font-weight: 300;
		font-size: 2em;
	}
	#content .en-images h2 a,
	#content .en-images h2 a:hover,
	#content .en-images h2 a {
		color: #fff;
		text-decoration: none;
	}
}

/*--------------------------------------------------------------------------------------------------------------
	== RACCOURCIS
--------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 800px) {
	.raccourcis-minisite {
		padding: var(--margin-text);
		background: var(--color-primary);
	}
	.raccourcis-minisite ul {
		border-top: 1px solid #fff;
	}
	.raccourcis-minisite ul li {
		border-bottom: 1px solid #fff;
	}
	#content .raccourcis-minisite a,
	#content .raccourcis-minisite a:hover,
	#content .raccourcis-minisite a:focus {
		display: block;
		padding: 15px 0;
		color: #fff;
		font-size: 2em;
		font-weight: 300;
		text-decoration: none;
	}
}
@media only screen and (min-width: 800px) {
	.raccourcis-minisite::before {
		content: "\e901";
		display: block;
		margin: var(--margin-current) 0;
		text-align: center;
		color: var(--color-primary);
		font-family: var(--font-picto);
		font-size: 3em;
	}
	.raccourcis-minisite::after {
		content: "\e901";
		display: block;
		margin: var(--margin-current) 0;
		text-align: center;
		color: var(--color-primary);
		font-family: var(--font-picto);
		font-size: 3em;
	}
	.raccourcis-minisite ul {
		display: flex;
		justify-content: center;
	}
	.raccourcis-minisite li {
		margin: 0 20px;
	}
	#content .raccourcis-minisite a {
		font-size: 1.6em;
	}
	#content .raccourcis-minisite a:hover,
	#content .raccourcis-minisite a:focus {
		color: var(--color-primary)!important;
		text-decoration: none;
	}
}

/*------------------------------------------------------------------------------------------------------------*/
/*
	= HEADER
*/
/*------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------------------
	== LOGO
--------------------------------------------------------------------------------------------------------------*/
#portal-top:not(.big-header) #portal-logo {
	margin: 0 10px 0 var(--margin-flex);
}
#portal-top:not(.big-header) #portal-logo strong {
    display: none;
}
#portal-top.big-header #portal-logo::before {
    font-size: 10em;
}
#portal-top.big-header strong {
    font-size: 1.6em;
}

#portal-title-minisite {
    font-size: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
#portal-title-minisite:hover,
#portal-title-minisite:focus {
	text-decoration: none;
}
#portal-top.big-header #portal-title-minisite {
    margin: 0 0 var(--margin-text);
    font-size: 2.8em;
    color: var(--color-current);
}

@media only screen and (min-width: 800px){
	#portal-logo::before {
		margin: 0 10px 0 0;
		font-size: 8em;
	}
}
@media only screen and (max-width: 800px){
	#portal-top:not(.big-header) #portal-logo {
		margin: 0 var(--margin-flex);
	}
	
	#portal-logo::before {
		font-size: 5em;
	}
	#portal-logo strong {
		position: absolute;
		top: -5000px;
	}
	#portal-top.big-header #portal-title-minisite {
		margin: 0 var(--margin-flex);
		text-align: center;
	}
	#portal-title-minisite {
		padding: 0 var(--margin-flex) 10px;
		width: 100%;
		text-align: center;
	}
}

/*--------------------------------------------------------------------------------------------------------------
	== CHEMIN DE FER
--------------------------------------------------------------------------------------------------------------*/
.accueil-mini-site #portal-breadcrumbs {
	display: none;
}

/*------------------------------------------------------------------------------------------------------------*/
/*
	= MAIN
*/
/*------------------------------------------------------------------------------------------------------------*/
#portletPageTopRow {
	position: relative;
}
#portletPageTopRow::after {
	content: "";
    position: absolute;
    bottom: -4.8vw;
    left: 0;
    right: 0;
    z-index: 1;
    height: 5vw;
    background: var(--color-primary);
    -webkit-clip-path: url(#masque-concave);
    clip-path: url(#masque-concave);
    transform: rotate(180deg);
}
#portletPageFirstColumn::before {
	bottom: 4.8vw;
}
#portletPageFirstColumn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 5vw;
    background: var(--color-primary);
    -webkit-clip-path: url(#masque-concave);
    clip-path: url(#masque-concave);
    transform: rotate(180deg);
}
#portletPageSecondColumn > div:first-child {
	margin: 0;
}