/* *** SLIDES *** */
.ft-verdana{font-family: Verdana;}
.ft-segoe{font-family: "Segoe Print"}

.slideTitle{font-size: 28px;padding: 0 5%;}
.slideDesc{font-size: 20px;}
.slideLink{font-size: 22px;}

.bkg-grey{
	background-color: var(--grey-light);
}

.carousel-tablist {
	.carousel-items{
		&.focus {
			padding: 2px;
			border: 3px solid #005a9c
		}
	}

	.carousel-inner{
		padding-bottom: 40px;

		#myCarousel-items{
			background: var(--grey-light);
		}
	}

	.carousel-item {
		display: none;
		height: auto;
		min-height: 300px;
		/* max-width: 900px; */
		position: relative;
		overflow: hidden;
		width: 100%;
		&.active {
			display: block;
		}

		.carousel-image{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			&.reverse{
				flex-direction: row-reverse;
			}

			.slide-texte{
				width: 50%;
				padding: 0 3%;

				.slide-texte-content{  
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					p,a{
						color: var(--main-color);
						text-align: center;
						&:hover{
							text-decoration: none;
						}
					}
				}
			}
			.slide-image{
				/* width: 50%; */
				height: 100%;
			}

		}
	}
}


@media screen and (max-width: 700px){
	.carousel-tablist {

		.carousel-item{
			.carousel-image{
				flex-direction: column;
				&.reverse{
					flex-direction: column-reverse;
				}
				.slide-texte{
					width: 100%;
					.slide-texte-content{
						min-height: 200px;
						p{
							font-size: 18px;
							&.slideTitle{
								font-size: 24px;
							}
							a{
								font-size: 18px;
							}
						}
					}
				}
			}
		}
		.slide-texte, .slide-image{width: 100%;}
		.slide-image{
			img{max-width: 100%;}
		}
	}
}
/* *** END SLIDES *** */


/* *** CONTROLS *** */
.carousel-tablist{
	.controls {
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		z-index: 10;
		display: flex;
		width: 100%;
		padding: .25em 1.25em 0;
    	margin-top: .8rem
	}
	.tab-wrapper {
		flex: 1 1 auto;
		height: 30px;
		text-align: center
	}
	.rotation {
		flex: 0 0 auto;
		height: 30px;
		padding: 0;
		background-color: transparent;
		border: none;
		outline: 0;
		z-index: 10
	}
	.svg-play{
		.background {
			stroke: black;
			fill: black;
			stroke-width: 1px;
			opacity: .6;
		}
		.border {
			fill: transparent;
			stroke: transparent;
			stroke-width: 2px
		}
		.pause {
			stroke-width: 4;
			fill: transparent;
			stroke: transparent
		}
		.play {
			stroke-width: 1;
			fill: transparent;
			stroke: transparent
		}
	}
	.pause .svg-play .pause, .play .svg-play .play {
		fill: white;
		stroke: white
	}
	.rotation:focus .svg-play .background,
	.rotation:hover .svg-play .background,
	.rotation:hover .svg-play .border {
		fill: var(--main-color);
		stroke: var(--main-color);
		opacity: 1
	}
	.rotation:focus .svg-play .border {
		stroke: white
	}

	[role=tablist] {
		box-sizing: border-box;
		border: 0 solid transparent;
		border-radius: 13px;
		display: inline-block;
		padding-top: 2px;
		height: 30px;
		background-color: var(--main-color);
		&.focus {
			border-width: 2px;
			border-color: #fff;
			padding-top: 0;
			background-color: var(--main-color)
		}

		&.focus circle.tab-background {
			stroke: var(--main-color);
			fill: var(--main-color)
		}
	}
	[role=tab] {
		position: relative;
		top: -2px;
		padding: 0;
		margin: 0;
		background-color: transparent;
		border: none;
		outline: 0;
		width: 34px;

		circle{
			&.border {
				display: none;
				z-index: 12;
			}
			&.tab{
    			z-index: 16;
			}
			&.tab-background{
				z-index: 14;
			}
			&.border, &.tab{
				stroke: white;
				fill: transparent;
				stroke-width: 2px;
			}
		}

		&[aria-selected=true] circle.tab, &[aria-selected=true]:hover circle.tab{
			fill: white;
		}

		&:focus circle.border {
			display: block;
			fill: var(--main-color);
			stroke: #fff
		}
		&:hover circle.tab-background {
			fill: white;
			stroke: white;
			opacity: 1
		}
		&:hover circle.border,
		&:hover circle.tab {
			fill: #f9b233;
			stroke: #f9b233;
			opacity: 1
		}
	}
}

.carousel-tablist-moreaccessible{
	[role=tab]{
		circle{
			&.tab-background {
    			z-index: 16;
			}
			&.border {
				z-index: 14;
			}
			&.tab {
				z-index: 18;
			}
		}
	}
}


/* *** END CONTROLS *** */