/**************************************************************************************************************/
/*
			INSTITUTION SAINT DOMINIQUE - Pour les minisite

			URL : http://pommier2:41980/st-do/college


*/
/**************************************************************************************************************/


/*------------------------------------------------------------------------------------------------------------*/
/*
	= PORTLETS
*/
/*------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------
	== PREHEADER
--------------------------------------------------------------------------------------------------------------*/
.pre-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pre-header p a{
	font-size: 2em;
	position: relative;
	padding-left: 70px;
}
#portal-logo {
	padding-left: 0;
}
#portal-logo::after  {
	display: none;
}
#portal-logo a span {
	position: relative;
	padding-left: 90px;
}
#portal-logo a span::after,
.pre-header p a::before {
	content: "";
	background: url(../images/logoSmall.png) center top no-repeat;
	background-size: contain;
	width: 60px;
	height: 30px;
	position: absolute;
	left: 0;
	top: 45%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

#portal-logo a span::after {
	left: 20px;
}
@media only screen and (max-width: 800px) {
	#portal-logo span {
		padding-left: 0 !important;
	}
	#portal-logo a span::after {
		display: none;
	}
}
.pre-header ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pre-header li {
	margin: 0;
	display: flex;
	text-transform: uppercase;
	font-size: 1.3xem;
	align-items: center;
	font-weight: bold;
}
.pre-header li + li {
	margin-left: 20px;
}
.pre-header a {
	position: relative;
	display: block;
	padding: 5px;
	padding-left: 0;
	color: var(--color-current);
	margin-left: 5px;
}
.pre-header a:hover,
.pre-header a:focus {
	color: var(--color-current);
	text-decoration: none;
}
.pre-header a::before {
	font-size: 1.5em;
	font-weight: normal;
}
@media only screen and (min-width: 800px) {
	.pre-header a span {
		position: absolute;
		top: calc(100% + 20px);
		left: 50%;
		transform: translate(-50%, 0);
		padding: 5px 10px 3px;
		background: var(--color-current);
		border-radius: 5px;
		font-size: 1.2em;
		font-weight: 400;
		color: var(--color-white);
		text-transform: uppercase;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transition: all 0.5s;
	}
	.pre-header a:hover span {
		top: calc(100% + 5px);
		opacity: 1;
		visibility: visible;
	}
	.pre-header a span::before {
		content: '';
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translate(-50%, 0);
		border: 5px solid transparent;
		border-bottom: 5px solid var(--color-current);
	}
}
@media only screen and (max-width: 800px) {
	.pre-header a span {
		display: none;
	}
}
/*--------------------------------------------------------------------------------------------------------------
	== SHORTS ACCES
--------------------------------------------------------------------------------------------------------------*/
.shorts-access {
	position: relative;
	z-index: 2;
}
.shorts-access a {
	color: var(--color-current);
}

/*--------------------------------------------------------------------------------------------------------------
	== MENU FIXE UP
--------------------------------------------------------------------------------------------------------------*/
.menu-up-fixe {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 0 var(--margin-window);
	background: var(--color-primary);
}
.menu-up-fixe ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	list-style: none;
}
.menu-up-fixe li {
	margin: 0;
}
.menu-up-fixe a {
	position: relative;
	display: block;
	padding: 15px 0 12px;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 1.8em;
	color: var(--color-white);
}
.menu-up-fixe a:hover,
.menu-up-fixe a:focus {
	text-decoration: none;
}
.menu-up-fixe a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0;
	background: var(--color-white);
	transition: all 0.5s;
}
.menu-up-fixe a:hover::before,
.menu-up-fixe a:focus::before {
	height: 5px;
}
.menu-up-fixe a {}
.menu-up-fixe {}

/*--------------------------------------------------------------------------------------------------------------
	== MENU UP
--------------------------------------------------------------------------------------------------------------*/
.menu-up ul {
	position: absolute;
	left: var(--margin-window);
	right: var(--margin-window);
	z-index: 3;
}
.menu-up > ul > li a {
	color: var(--color-primary);
}

@media only screen and (min-width: 800px) {
	.menu-up ul {
		top: 100%;
		transform: translate(0, -50%);
	}
	.menu-up > ul > li a::before {
		background: var(--color-primary);
	}
}
@media only screen and (max-width: 800px) {
	.menu-up ul {
		align-items: stretch;
		bottom: 0;
	}
}

/*--------------------------------------------------------------------------------------------------------------
	== SECTIONS
--------------------------------------------------------------------------------------------------------------*/
.sections-minisite {
	margin: var(--margin-current) 0 0;
}
.sections-minisite > ul > li {
	padding: var(--margin-current) var(--margin-window);
}
.sections-minisite > ul > li:nth-child(odd) {
	background: var(--color-grey)
}
.sections-minisite .portletItem h2 {
	width: calc(50% - var(--margin-current));
	text-align: center;
	font-size: 2.5em;
	color: var(--color-primary)!important;
}
/*.sections-minisite .portletItem h2::before {
	content: '';
	display: block;
	margin: 0 auto var(--margin-text);
	width: 30px;
	height: 1px;
	background: var(--color-current);
}*/
.sections-minisite .portletItem h2::after {
	content: 'à saint do';
	display: block;
	margin: 0 auto;
	font-family: var(--font-exergue);
	color: var(--color-current);
	font-size: 0.5em;
	line-height: 1;
}
#content .sections-minisite .portletItem .description {
	margin: var(--margin-text) 0 0;
	width: calc(50% - var(--margin-current));
	text-align: center;
	font-style: italic;
}
.sections-minisite .portletItem div {
	overflow: hidden;
}
@media only screen and (max-width: 1090px) {
	.sections-minisite .portletItem h2,
	#content .sections-minisite .portletItem .description {
		width: calc(60% - var(--margin-current));
	}
}
@media only screen and (max-width: 800px) {
	.sections-minisite .portletItem h2,
	#content .sections-minisite .portletItem .description  {
		width: 100%;
	}
	.sections-minisite .portletItem div {
		overflow: unset;
	}
}

/*
	TEXTE
*/
.sections-minisite .portletItem .illus-etb + * {
	margin-top: var(--margin-current);
}
/*.sections-minisite .portletItem .illus-etb ~ * {
	padding-right: calc(50% + var(--margin-current));
}*/
#content .sections-minisite .portletItem .illus-etb ~ ul {
	padding: 0 0 0 20px;
	list-style: disc;
}
.sections-minisite .portletItem h3 {
	margin: var(--margin-text) 0 0;
	font-family: var(--font-exergue);
	font-size: 1.8em;
	color: var(--color-current);
}

#content .sections-minisite .portletItem a {
	box-shadow: inset 0 -2px 0 var(--color-primary);
	color: var(--color-primary)!important;
}
#content .sections-minisite .portletItem a:hover {
	box-shadow: inset 0 -20px 0 var(--color-primary);
	text-decoration:none;
	color: var(--color-white)!important;
}

#content .sections-minisite .portletItem a.bouton {
	display: inline-block;
	padding: 10px 25px 8px;
	background: var(--color-secondary);
	border-radius: 5px;
	box-shadow: none;
	font-weight: 400;
	color: var(--color-white)!important;
	line-height: 1;
}
#content .sections-minisite .portletItem a.bouton:hover,
#content .sections-minisite .portletItem a.bouton:focus {
	background: var(--color-primary);
	box-shadow: none;
	text-decoration: none;
	color: var(--color-white)!important;
}
@media only screen and (max-width: 1090px) {
	.sections-minisite .portletItem .illus-etb ~ * {
		padding-right: calc(40% + var(--margin-current));
	}
}
@media only screen and (max-width: 800px) {
	.sections-minisite .portletItem .illus-etb ~ * {
		padding-right: 0;
	}
}

/*
	VIDEO YOUTUBE
*/
#content .sections-minisite .iframe {
	position: relative;
	max-width: none;
	overflow: hidden;
}

#content .sections-minisite .iframe:after {
	padding-bottom: 56.5%; /* 16:9 */
	display: block;
	content: "";
}
#content .sections-minisite .iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
	COLONNES
*/
#content .sections-minisite .portletItem .illus-etb {
	float: right;
	margin: 0 0 0 var(--margin-current);
	width: 25%;
	text-align: center;
}
.sections-minisite .portletItem .illus-etb img {
	width: 100%!important;
	height: auto!important;
}
.sections-minisite .portletItem .illus-etb .equipe-etb {
	position: relative;
}
.sections-minisite .portletItem .illus-etb .equipe-etb::before {
	content: '';
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	bottom: -5px;
	z-index: 1;
	background: var(--color-primary);
	clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}
.sections-minisite .portletItem .illus-etb .equipe-etb > strong {
	position: relative;
	z-index: 2;
	display: block;
	margin: auto;
	padding: 18px 0 10px 15px;
	width: 80%;
	text-align: center;
	color: var(--color-white);
	font-size: 1.3em;
	font-weight: 400;
	text-transform: uppercase;
}
.sections-minisite .portletItem .illus-etb .equipe-etb ul {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1%;
}
.sections-minisite .portletItem .illus-etb .equipe-etb ul li {
	position: relative;
	width: 49.5%;
}
.sections-minisite .portletItem .illus-etb .equipe-etb ul li::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);;
}
.sections-minisite .portletItem .illus-etb .equipe-etb ul li strong {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 10px;
	color: var(--color-white);
	text-align: center;
}
.sections-minisite .portletItem .illus-etb .equipe-etb ul li {}

#content .sections-minisite .portletItem .illus-etb a {
	display: inline-block;
	margin: 10px auto 20px;
	padding: 8px 20px 5px;
	background: var(--color-primary) !important;
	border-radius: 50px;
	color: var(--color-white) !important;
	opacity: 0.8;
}
#content .sections-minisite .portletItem .illus-etb a:hover,
#content .sections-minisite .portletItem .illus-etb a:focus {
	background: var(--color-current);
	color: var(--color-white)!important;
	text-decoration: none;
	opacity: 1;
}
@media only screen and (max-width: 1090px) {
	#content .sections-minisite .portletItem .illus-etb {
		width: 40%;
	}
}
@media only screen and (max-width: 800px) {
	#content .sections-minisite .portletItem .illus-etb {
		float: none;
		margin: var(--margin-text) calc(var(--margin-window) * -1) 0;
		width: auto;
	}
}


/*------------------------------------------------------------------------------------------------------------*/
/*
	= HEADER
*/
/*------------------------------------------------------------------------------------------------------------*/
#portal-top > div:first-child {
	background: var(--color-white);
}
div.InHeaderPortletManager1 {
	display: block;
	z-index: 3;
	overflow: unset;
}
div.InHeaderPortletManager2 {
	position: static;
}
.InHeaderPortletManager3 {
	height: 90vh;
}
@media only screen and (max-width: 800px) {
	#portal-top.fixed {
		position: sticky!important;
		top: 0!important;
		opacity: 1!important;
	  }
	div.InHeaderPortletManager1 {
		display: none;
	}
}

/*--------------------------------------------------------------------------------------------------------------
	== LOGO
--------------------------------------------------------------------------------------------------------------*/
#portal-logo a:hover,
#portal-logo a:focus {
	text-decoration: none;
}
@media only screen and (min-width: 800px) {
	#portal-logo a span {
		font-size: 0.8em;
	}
	#portal-logo a span::before {
		content: '|';
		position: absolute;
		left: 0;
		top: 50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}	
}
@media only screen and (max-width: 800px) {
	#portal-logo a strong {
		display: none;
	}
}

/*------------------------------------------------------------------------------------------------------------*/
/*
	= MAIN
*/
/*------------------------------------------------------------------------------------------------------------*/
#portal-column-content {
	overflow: hidden;
}
#portal-column-content #content {
	display: block;
	margin-top: var(--margin-current);
}
#portal-column-content div[id^="parent-fieldname-"] {
	margin: var(--margin-current) calc(50% - 50vw) 0;
	padding: 0 var(--margin-window);
	font-size: 1.6em;
	line-height: 1.4;
}
.accueil-mini-site #portal-column-content div[id^="parent-fieldname-"],
.section-contacts #portal-column-content div[id^="parent-fieldname-"] {
	margin: var(--margin-current) var(--margin-current) 0;
	padding: 0;
}
#portletPageColumns {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
#portal-column-content h1 {
	color: var(--color-secondary);
}
#portal-column-content .documentDescription {
	color: var(--color-secondary);
}
@media only screen and (max-width: 800px) {
	.accueil-mini-site #portal-columns {
		padding: 0;
	}
	#portal-column-content h1 {
		padding: 0 var(--margin-window);
	}
	#portal-column-content .documentDescription {
		padding: 0 var(--margin-window);
	}
	.accueil-mini-site #portal-column-content div[id^="parent-fieldname-"],
	.section-contacts #portal-column-content div[id^="parent-fieldname-"] {
		margin-right: var(--margin-window);
		margin-left: var(--margin-window);
	}
	
}

/*------------------------------------------------------------------------------------------------------------*/
/*
	= FOOTER
*/
/*------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 800px) {
	#coordonnees ul::before {
		background: var(--color-primary);
	}
	#portal-siteactions {
		background: var(--color-primary);
	}
}