/*
    Lisa Monpierre
    EFRITS SAS
 
    Training center website
    Dec. 2021
*/

.collapsible 
{
	width: 100%;
	
	margin: 1px 0;
	padding: 20px;
	
	background-color: rgba(69,72,89,1);
	border-radius: 6px;
	color: #FAF9F9;
	text-align: left;
	font-weight: bold;
	
	cursor: pointer;
	border: none;
	outline: none;
}

.collapsibleYellow
{
	background-color: #C88F1A;
}

.contentVideo
{
	height: 400px;
}

.collapseBlock
{
	width: 100%;
	
	margin: 20px 0;
}

.collapsibleActive, 
.collapsible:hover 
{
	background-color: #373737;
	border-radius: 0;
}

.content 
{
  	max-height: 0;
  	overflow: hidden;
  
  	display: flex;
	flex-wrap: wrap;
	align-content: space-around;

	padding: 0px;
	margin: 1px;
	
	color: black;
	background-color: transparent;
	
	text-align: left;
	
	transition: max-height 0.2s ease-out;
}

.content p
{
	padding: 20px;
	margin:0;
}

.content div
{
	padding: 20px;
}
.content div ul
{
	margin: 0;
}


.content a, .portalParaph a, .formationParaph a, .story a, .advertising a
{
	text-decoration: underline;

	cursor: pointer;
	color: black;
	font-weight: 700;
}

.content a:hover, .portalParaph a:hover,  .formationParaph a:hover, .story a:hover, .advertising a:hover
{
	text-decoration: none;

	cursor: pointer;
	color: #D2691E;
	font-weight: 700;
}

.contentBorder
{
	 border: #454859 solid;
	 margin: 0 0 2px 0;
}

.sign 
{
	position: absolute;
	display: flex;
	left: 50%;
	top: 20%;
	justify-content: center;
	align-items: center;
	 
	background-image: radial-gradient(ellipse 50% 35% at 50% 50%, #C88F1A, transparent);
	transform: translate(-50%, -50%);
	letter-spacing: 2;
	
	text-transform: uppercase;
	color: #FAF9F9;
	text-shadow: 0 0 0.6rem #FAF9F9, 0 0 1.5rem #B4A5A5,
		-0.2rem 0.1rem 1rem #B4A5A5, 0.2rem 0.1rem 1rem #B4A5A5,
		0 -0.5rem 2rem #C88F1A, 0 0.5rem 3rem #C88F1A;
	animation: shine 2s forwards, flicker 3s infinite;
	 
 	font-size: 40px;
	color: #FAF9F9;
	font-weight: 700;
	
	display:flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.workshopsBlockText > a
{
	text-decoration: none; 
	color: #454859;
}

.workshopsBlockText > a:hover
{
	color: #C88F1A;
}

@keyframes blink 
{
  0%, 22%, 36%, 75% 
  {
	color: #FAF9F9;
	text-shadow: 0 0 0.6rem #FAF9F9, 0 0 1.5rem #B4A5A5,
		-0.2rem 0.1rem 1rem #B4A5A5, 0.2rem 0.1rem 1rem #B4A5A5,
		0 -0.5rem 2rem #C88F1A, 0 0.5rem 3rem #C88F1A;
  }
  28%, 33% 
  {
	color: #B4A5A5;
	text-shadow: none;
  }
  82%, 97% 
  {
	color: #C88F1A;
	text-shadow: none;
  }
}

.flicker1
{
	animation: shine 2s forwards, blink 3s 2s infinite;
}

.flicker2
{
	animation: shine 2s forwards, blink 8s 2s infinite;
}

.flicker3
{
	animation: shine 2s forwards, blink 3s 22s infinite;
}

.fastFlicker1
{
	animation: shine 2s forwards, blink 10s 1s infinite;
}

.fastFlicker2
{
	animation: shine 2s forwards, blink 20s 1s infinite;
}

.fastFlicker3
{
	animation: shine 2s forwards, blink 8s 1s infinite;
}

.fastFlicker4
{
	animation: shine 2s forwards, blink 12s 1s infinite;
}

@keyframes shine 
{
  0% 
  {
	color: #6b1839;
	text-shadow: none;
  }
  100% 
  {
    color: #FAF9F9;
    text-shadow: 0 0 0.6rem #FAF9F9, 0 0 1.5rem #B4A5A5,
      -0.2rem 0.1rem 1rem #B4A5A5, 0.2rem 0.1rem 1rem #B4A5A5,
      0 -0.5rem 2rem #C88F1A, 0 0.5rem 3rem #C88F1A;
  }
}

@keyframes flicker 
{
  from 
  {
    opacity: 1;
  }

  4% 
  {
    opacity: 0.9;
  }

  6% 
  {
    opacity: 0.85;
  }

  8% 
  {
    opacity: 0.95;
  }

  10% 
  {
    opacity: 0.9;
  }

  11% 
  {
    opacity: 0.922;
  }

  12% 
  {
    opacity: 0.9;
  }

  14% 
  {
    opacity: 0.95;
  }

  16% 
  {
    opacity: 0.98;
  }

  17% 
  {
    opacity: 0.9;
  }

  19% 
  {
    opacity: 0.93;
  }

  20% 
  {
    opacity: 0.99;
  }

  24% 
  {
    opacity: 1;
  }

  26% 
  {
    opacity: 0.94;
  }

  28% 
  {
    opacity: 0.98;
  }

  37% 
  {
    opacity: 0.93;
  }

  38% 
  {
    opacity: 0.5;
  }

  39% 
  {
    opacity: 0.96;
  }

  42% 
  {
    opacity: 1;
  }

  44% 
  {
    opacity: 0.97;
  }

  46% 
  {
    opacity: 0.94;
  }

  56% 
  {
    opacity: 0.9;
  }

  58% 
  {
    opacity: 0.9;
  }

  60% 
  {
    opacity: 0.99;
  }

  68% 
  {
    opacity: 1;
  }
}

.workshopsBlock
{
	width: 100%;
	height: 100%;
	
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	margin: auto;
	padding: 0;
}

.workshopsBlockIcons
{
	width: 100%;
	height: 100%;
	
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	margin: 20px auto;
	padding: 0;
}

.workshopsBlockIcon
{
	width: calc(100% / 5);
	
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	margin: auto;
	padding: 0;
}

.workshopsBlockIcon img
{	
	margin: 10px auto;
	padding: 0;
	
	width: 40%;
}

.workshopsBlockIcon h1
{
	color: #C88F1A;
	
	width: 100%;
	
	text-align: center;
	margin: auto;
	padding: 0;
}

.workshopsBlockText
{
	width: 100%;
	height: 100%;
	
	color: #FAF9F9;
	margin: 0 auto 20px;
	padding: 0;
}

/**/

@keyframes textUpEffect
{
	from 
	{
		transform : translateY(200px);
		opacity: 0;
	}
	to 
	{
		transform : translateY(0);
		opacity: 1;
		background: linear-gradient(transparent, transparent, transparent, rgba(55, 55, 55, 0.5), rgba(55, 55, 55, 0.8), #373737, #373737, #373737);
	}
}

.background1
{
	background-image:  url("../resource/background1.jpg");
}
.background1:hover
{
	background-image:  url("../resource/background1OnHover.jpg");
}

.background2
{
	background-image: url("../resource/background2.jpg");
}
.background2:hover
{
	background-image: url("../resource/background2OnHover.jpg");
}

.background3
{
	background-image:  url("../resource/background3.jpg");
}
.background3:hover
{
	background-image:  url("../resource/background3OnHover.jpg");
}

.background4
{
	background-image:  url("../resource/background4.jpg");
}
.background4:hover
{
	background-image:  url("../resource/background4OnHover.jpg");
}

.background5
{
	background-image:  url("../resource/background5.jpg");
}
.background5:hover
{
	background-image:  url("../resource/background5OnHover.jpg");
}

.imageBackgroundTransitionOnHover
{
	width: 100%;
	
	margin: 20px auto;
	padding: 0;
	
	white-space: nowrap;
	display: inline-flex;
}

.imageBackgroundOpacity
{
	width: calc(100% / 5); 
	
	margin: auto;
	
	filter: contrast(180%);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition-duration: 0.25s;
	overflow: hidden;
}

.imageBackgroundOpacity:hover
{
	width: calc(100% / 3);
	
	filter: contrast(110%);
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition-duration: 0.4s;
	cursor: pointer;
}

.imageBackgroundOpacity h3
{
	width: 100%; 
	height: 50px;
	
	margin: 0;
	padding: 0;
	
	color: #FAF9F9;
	font-weight: 700;
	margin: 0;
	padding: 0;
	display:flex;
    align-items: center;
    justify-content: center;
	text-align: center;
	
	background: rgba(55, 55, 55, 0.95);
}

.imageBackgroundOpacity p
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	
	width: 100%;
	height: 100%;
	
	margin: 0;
	
	color: #FAF9F9;
	font-weight: 700;
	display: flex;
    justify-content: center;
	text-align: left;
	opacity: 0;
	
	overflow: hidden;
	transition-duration: 0.1s;

}

.imageBackgroundOpacity p:hover
{
	width: 100%;
	height: 100%;

	overflow: hidden;
	animation-name: textUpEffect;
    animation-duration        : 0.1s;
    animation-delay           : 0.1s;
    animation-iteration-count : 1;
    animation-fill-mode       : forwards;
}

.calendarOpacityButton
{
	height: 60px;
	
	background-color: rgba(33, 33, 33, 0.8);
}

.imageBackgroundOpacityButton
{ 
	height: 60px;
	
	background-color: transparent;
}

.workshopsSlogan
{
	width: 100%;
	
	margin: 0 auto 40px;
	
	color: #C88F1A;
	font-weight: bold;
	text-align: center;
}

.workshopsSloganH2
{
	font-weight: 700;
}

.timeLineBox 
{
	width: 100%;
  
	padding: 0;
	margin: 40px 0;
  
	color: #FAF9F9;
}

.timeLineBox 
.number 
{
	margin: 20px auto;
	padding: 0;
	
	color: #FAF9F9;
	font-size: 40px;
	font-weight: bold;
}

.timeLineBox
.description 
{
	width: 100%;
	height: 120px;
	padding: 20px 0;
	margin:  0;
	position: relative;
	display: flex;
	justify-content: center;
	text-align: center;

	font-weight: 500;
	color: #454859;
	border-top: 4px solid #454859;
}

.timeLineBox
.description span:before 
{
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	left: 44%;
	top: -18%;

	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-left: 30px solid  #454859;
}

.swiperContainer 
{
	height: 100%;
	width: 100%; 
	margin: 0;
	padding: 10px 0;
}

.swiperWrapper
{
	width: 100%; 
	
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
}

.swiperSlide 
{
	text-align: center;
	width: calc(100% / 6);
	height: 100%;
	position: relative;
	
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	margin: 0;
	padding: 0;
}

@media only screen and (min-width: 541px) /* portrait tablet */
{

	.workshopsBlockIcon
	{
		width: clacl(100% / 4);
		height: 100%;
		font-size: 7px;
	}
	
	.workshopsSloganH2
	{
		font-size: 35px;
	}
	
	.imageBackgroundOpacityButton
	{
		width: 90%;
		margin: 20px auto;
	}
	
	.calendarOpacityButton
	{
		width: 90%;
		margin: 20px auto;
	}
	
	.imageBackgroundTransitionOnHover
	{
		height: 400px;
	}
	
	.imageBackgroundOpacity
	{
		height: 400px;
	}
	
	.imageBackgroundOpacity p
	{
		font-size: 10px;
	
		padding: 300px 0 0 0;
	}
	
	.imageBackgroundOpacity h3
	{
		font-size: 13px;
	}
	
	.timeLineBox 
	.number 
	{
		font-size: 30px;
	}
	
	.timeLineBox
	.description 
	{
		font-size: 25px;
	}
	
	.workshopsSlogan
	{
		font-size: 60px;
	}
	
	.workshopsBlockText
	{
		text-align: left;
	}
}

@media only screen and (max-width: 540px) /* portrait mobile */
{

	.workshopsBlockIcon
	{
		width: calc(100% / 4);
		height: 100%;
		
		display: flex;
		flex-wrap: wrap;
		align-content: space-around;
		margin: 0;
		padding: 0;
		
		font-size: 6px;
	}
	
	.workshopsSloganH2
	{
		font-size: 38px;
	}
	
	.imageBackgroundOpacityButton
	{
		width: 100%;
		margin: 20px auto;
	}
	
	.calendarOpacityButton
	{
		width: 100%;
		margin: 20px auto;
	}
	
	.imageBackgroundTransitionOnHover
	{
		height: 300px;
	}
	
	.imageBackgroundOpacity
	{
		height: 300px;
	}
	
	.imageBackgroundOpacity p
	{
		font-size: 9px;
		
		padding: 240px 0 0 0;
	}
	
	.imageBackgroundOpacity h3
	{
		font-size: 12px;
	}
	
	.timeLineBox 
	.number 
	{
		font-size: 40px;
	}
	
	.timeLineBox
	.description 
	{
	}
	
	.workshopsSlogan
	{
		font-size: 65px;
	}
	
	.workshopsBlockText
	{
		text-align: left;
	}
}

@media only screen and (min-width : 1825px) /* desktop */
{

	.workshopsBlockIcon
	{
		width: clacl(100% / 4);
		height: 100%;
		font-size: 11px;
	}
	
	.workshopsSloganH2
	{
		font-size: 45px;
	}
	
	.imageBackgroundOpacityButton 
	{
		width: 50%;
		margin: 20px auto;
	}
	.calendarOpacityButton
	{
		width: 50%;
		margin: 20px auto;
	}
	
	.imageBackgroundTransitionOnHover
	{
		height: 500px;
	}
	
	.imageBackgroundOpacity
	{
		height: 500px;
	}
	
	.imageBackgroundOpacity p
	{
		font-size: 20px;
		
		padding: 80% 0 0 0;
	}
	
	.imageBackgroundOpacity h3
	{
		font-size: 30px;
	}
	
	.timeLineBox 
	.number 
	{
		font-size: 40px;
	}
	
	.timeLineBox
	.description 
	{
	}
	
	.workshopsSlogan
	{
		font-size: 80px;
	}
	
	.workshopsBlockText
	{
		text-align: center;
	}
}

@media only screen and (orientation: landscape) and (min-width: 1601px) and (max-width: 1824px) /* desktop */
{

	.workshopsBlockIcon
	{
		width: clacl(100% / 4);
		height: 100%;
		font-size: 11px;
	}
	
	.workshopsSloganH2
	{
		font-size: 40px;
	}
	
	.imageBackgroundOpacityButton 
	{
		width: 45%;
		margin: 20px auto;
	}
	.calendarOpacityButton
	{
		width: 50%;
		margin: 20px auto;
	}
	
	.imageBackgroundTransitionOnHover
	{
		height: 500px;
	}
	
	.imageBackgroundOpacity
	{
		height: 500px;
	}
	
	.imageBackgroundOpacity p
	{
		font-size: 18px;
		
		padding: 380px 0 0 0;
	}
	
	.imageBackgroundOpacity h3
	{
		font-size: 30px;
	}
	
	.timeLineBox 
	.number 
	{
		font-size: 40px;
	}
	
	.timeLineBox
	.description 
	{
	}
	
	.workshopsSlogan
	{
		font-size: 80px;
	}
	
	.workshopsBlockText
	{
		text-align: center;
	}
}

@media only screen and (orientation: landscape) and (min-width: 1225px) and (max-width: 1600px) /* laptop */
{

	.workshopsBlockIcon
	{
		width: clacl(100% / 4);
		height: 100%;
		font-size: 10px;
	}
	
	.workshopsSloganH2
	{
		font-size: 40px;
	}
	
	.imageBackgroundOpacityButton 
	{
		width: 60%;
		margin: 20px auto;
	}
	.calendarOpacityButton
	{
		width: 60%;
		margin: 20px auto;
	}
	
	.imageBackgroundTransitionOnHover
	{
		height: 500px;
	}
	
	.imageBackgroundOpacity
	{
		height: 500px;
	}
	
	.imageBackgroundOpacity p
	{
		font-size: 20px;
		
		padding: 360px 0 0 0;
	}
	
	.imageBackgroundOpacity h3
	{
		font-size: 30px;
	}
	
	.timeLineBox 
	.number 
	{
		font-size: 40px;
	}
	
	.timeLineBox
	.description 
	{
	}
	
	.workshopsSlogan
	{
		font-size: 80px;
	}
	
	.workshopsBlockText
	{
		text-align: center;
	}
}

@media only screen and (orientation: landscape) and (min-width: 961px) and (max-width: 1224px) /* landscape tablet */
{

	.workshopsBlockIcon
	{
		width: clacl(100% / 4);
		height: 100%;
		font-size: 8px;
	}
	
	.workshopsSloganH2
	{
		font-size: 40px;
	}
	
	.imageBackgroundOpacityButton
	{
		width: 70%;
		margin: 0px auto 20px;
	}
	
	.calendarOpacityButton
	{
		width: 90%;
		margin: 0px auto 20px;
	}
	
	.imageBackgroundTransitionOnHover
	{
		height: 400px;
	}
	
	.imageBackgroundOpacity
	{
		height: 400px;
	}
	
	.imageBackgroundOpacity p
	{
		font-size: 20px;
		
		padding: 300px 0 0 0;
	}
	
	.imageBackgroundOpacity h3
	{
		font-size: 20px;
	}
	
	.timeLineBox 
	.number 
	{
		font-size: 30px;
	}
	
	.timeLineBox
	.description 
	{
	}
	
	.workshopsSlogan
	{
		font-size: 80px;
	}
	
	.workshopsBlockText
	{
		text-align: center;
	}
}

@media only screen and (orientation: landscape) and (max-device-width: 960px) /* landscape mobile */
{
	.workshopsBlockIcon
	{
		width: clacl(100% / 4);
		height: 100%;
		font-size: 8px;
	}
	
	.workshopsSloganH2
	{
		font-size: 40px;
	}
	
	.imageBackgroundOpacityButton
	{
		width: 100%;
		margin: 20px auto;
	}
	
	.calendarOpacityButton
	{
		width: 100%;
		margin: 20px auto;
	}
	
	.imageBackgroundTransitionOnHover
	{
		height: 500px;
	}
	
	.imageBackgroundOpacity
	{
		height: 400px;
	}
	
	.imageBackgroundOpacity p
	{
		font-size: 18px;
		
		padding: 100% 0 0 0;
	}
	
	.imageBackgroundOpacity h3
	{
		font-size: 20px;
	}
	
	.timeLineBox 
	.number 
	{
		font-size: 40px;
	}
	
	.timeLineBox
	.description 
	{
	}
	
	.workshopsSlogan
	{
		font-size: 80px;
	}

	
	.workshopsBlockText
	{
		text-align: center;
	}
}