@charset "UTF-8";

/*!
 * ConvergenWeb - info@convergenceweb.ch
 * Slider signalisation.css 
 * Copyright (c) 2025 ConvergenceWeb
 */

.demo-2 .sl-slider-wrapper {
	width: 100vw;
	height:100vh;
	overflow: hidden;
	position: relative;
	z-index:1;
}

.demo-2 .sl-slider h1 {
	display: table-cell;
    vertical-align: middle;
	background: linear-gradient(to right, rgba(193,88,39,1), rgba(193,88,39,0)); 
	font-family:'Sora', sans-serif;
	font-weight: 400;
	color: #fff;
	text-align:left;
	max-width: fit-content;
	padding-left: 5vw;
	padding-right:10vw;
	position: relative;
	z-index: 100;
}
.demo-2 .sl-slider small {
	color: #fff;
}
.demo-2 .bg-img {
	padding: 200px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: absolute;
	top: -200px;
	left: -200px;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
}

/* Début Custom navigation dots */

.nav-dots {
	position: absolute;
    top: 40%;
    right: 2%;
    transform: translate(-40%, -3%);
	width: 30px;
	height: 100%;
	z-index: 1;
}

.nav-dots span {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin: 3px;
	background: #c15827;
	background: rgba(150,150,150,0.4);
	cursor: pointer;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.4), 
		inset 0 1px 1px rgba(0,0,0,0.1);
}

.demo-2 .nav-dots span {
	background: rgba(150,150,150,0.1);
	margin: 6px;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.4), 
		inset 0 1px 1px rgba(0,0,0,0.1),
		0 0 0 2px rgba(255,255,255,0.5);
}

.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
	box-shadow: 
		0 1px 1px rgba(193,88,39,0.5), 
		inset 0 1px 1px rgba(0,0,0,0.1),
		0 0 0 5px rgba(193,88,39,1);
}

.nav-dots span.nav-dot-current:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 3px;
	left: 3px;
	border-radius: 50%;
	background: rgba(255,255,255,0.8);
}
/* Fin Custom navigation dots */

/* Début images */
.demo-2 .bg-img-1 {
	background-image: url(../slider/img/signalisation/Marquage-routier-Loutan-&-Cie.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-2 {
	background-image: url(../slider/img/signalisation/Signalisation-verticale-Loutan-&-Cie.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-3 {
	background-image: url(../slider/img/signalisation/Mobilier-urbain-Loutan-&-Cie.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-4 {
	background-image: url(../slider/img/signalisation/Miroir-de-sécurité-Loutan-&-Cie.webp);
	background-size: cover; 
	background-position: center top;
}
/* Fin images */


/* Media Queries for custom slider */

/******************************** Xs BOOTSTRAP MEDIA QUERIES ********************************/
@media screen and (max-width: 320px) and (orientation: portrait) {
.demo-2 .sl-slider h1 {
	font-size: 10vw;
	top: 89vh;
	line-height: 9vh;
	height:9vh;
}
.demo-2 .sl-slider small {
	font-size: 5vw;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}
.nav-dots span {
	display: inline-block;
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin: 10px !important;
}
.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
	box-shadow: 
		0 1px 1px rgba(193,88,39,0.5), 
		inset 0 1px 1px rgba(0,0,0,0.1),
		0 0 0 3px rgba(193,88,39,1);
}

.nav-dots span.nav-dot-current:after {
	width: 7px;
	height: 7px;
	top: 0.3vh;
	left: 0.55vw;
	border-radius: 50%;
	background: rgba(255,255,255,0.8);
}		
}

@media screen and (min-width: 321px)and (max-width: 499px) and (orientation: portrait) {


.demo-2 .sl-slider h1 {
	font-size: 10vw;
	top: 89vh;
	line-height: 9vh;
	height:9vh;
}
.demo-2 .sl-slider small {
	font-size: 5vw;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}	
.nav-dots span {
	margin: 10px !important;
}

}		
@media screen and (min-width: 321px) and (max-width: 499px) and (min-height: 800px) and (orientation: portrait) {
.demo-2 .sl-slider h1 {
	line-height: 8vh;
	height:10vw;
	top: 90vh;
}
.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}	
.nav-dots span {
	margin: 20px !important;
}
}
@media screen and (min-width: 600px) and (max-width: 767px) and (orientation: portrait) {
.demo-2 .sl-slider h1 {
	font-size: 9vw;
	top: 87vh;
	line-height: 11vh;
	height:11vw;
}
.demo-2 .sl-slider small {
	font-size: 4.5vw;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}	
.nav-dots span {
	margin: 20px !important;
}	
}		

@media screen and (max-width: 767px) and (orientation: landscape) {
.demo-2 .sl-slider h1 {
	font-size: 12vh;
	line-height: 14vh;
	height:14vh;
	top:82vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}	
.demo-2 .sl-slider small {
	font-size: 6vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.nav-dots {
	top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}	
	

.nav-dots span {
	margin: 10px !important;
}		
}

@media screen and (max-width: 600px) and (orientation: landscape) {
.demo-2 .sl-slider h1 {
	font-size: 15vh;
	line-height: 17vh;
	height:17vh;
	top:77vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}	
.demo-2 .sl-slider small {
	font-size: 7.5vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
}	

/******************************** Sm BOOTSTRAP MEDIA QUERIES ********************************/

/* Sm Screen */
@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
	
.demo-2 .sl-slider h1 {
	font-size: 9vw;
	top: 87vh;
	line-height: 11vh;
	height:11vw;
}
.demo-2 .sl-slider small {
	font-size: 4.5vw;
	padding-top: 1vh;
    padding-bottom: 1vh;
}		
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}	
.nav-dots span {
	margin: 20px !important;
}
}	

/* Sm Screen landscape*/
@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
	
.demo-2 .sl-slider h1 {
	font-size: 12vh;
	line-height: 14vh;
	height:14vh;
	top:82vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .sl-slider small {
	font-size: 5.5vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}	
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}	
.nav-dots span {
	margin: 15px !important;
}	
	
}	

/* Sm Screen landscape iPhone 11-12 pro & pro max */
@media screen and (min-width: 812px) and (max-width: 926px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.demo-2 .sl-slider h1 {
	font-size: 12vh;
	line-height: 14vh;
	height:14vh;
	top:82vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .sl-slider small {
	font-size: 6vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
}

/******************************** Md BOOTSTRAP MEDIA QUERIES ********************************/

/* Md Screen portrait */
@media screen and (min-width: 992px) and (max-width: 1199px) and (orientation: portrait) {
.demo-2 .sl-slider h1 {
	font-size: 9vw;
	top: 87vh;
	line-height: 8vh;
	height:11vw;
}
.demo-2 .sl-slider small {
	font-size: 4.5vw;
	padding-top: 1vh;
    padding-bottom: 1vh;
}	
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}	
.nav-dots span {
	margin: 25px !important;
}

}

/* Md Screen landscape */
@media screen and (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
.demo-2 .sl-slider h1 {
	font-size: 12vh;
	line-height: 14vh;
	height:14vh;
	top:82vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}	
.demo-2 .sl-slider small {
	font-size: 5.5vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;

}	
.nav-dots span {
	margin: 15px !important;
}

}	


/******************************** Lg BOOTSTRAP MEDIA QUERIES ********************************/

/* Lg Screen */
@media screen and (min-width: 1200px) and (max-width: 1600px){
	
.demo-2 .sl-slider h1 {
	font-size: 12vh;
	line-height: 14vh;
	height:14vh;
	top:80vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .sl-slider small {
	font-size: 5.5vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.nav-dots {
    top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;
}
.nav-dots span {
	margin: 10px !important;
}
}	

/* Lg Screen iPad Pro landscape*/
@media only screen and (min-width: 1366px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.demo-2 .sl-slider h1 {
	font-size: 12vh;
	line-height: 14vh;
	height:14vh;
	top:82vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .sl-slider small {
	font-size: 5.5vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}	
.demo-2 .nav-dots span {
	margin: 20px;	
}
.nav-dots {
	top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;
}
}

/* Lg Screen HD*/
@media screen and (min-width: 1601px) {
.demo-2 .sl-slider h1 {
	font-size: 12vh;
	line-height: 14vh;
	height:14vh;
	top:80vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}	
.demo-2 .sl-slider small {
	font-size: 5.5vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.nav-dots {
	top: 0;
	display: flex;
	justify-content: center;
	vertical-align: middle;
	align-items: center;
	height:100vh;
	flex-wrap: nowrap;
    flex-direction: column;
    
}
.nav-dots span {
	margin: 1vh !important;
	width: 24px;
	height: 24px;
}
.nav-dots span.nav-dot-current:after {
	width: 15px;
	height: 15px;
	top: 4.5px;
	left: 4.5px;
}
.demo-2 .nav-dots span.nav-dot-current, .demo-2 .nav-dots span:hover {
    box-shadow: 0 1px 1px rgb(193 88 39 / 50%), inset 0 1px 1px rgb(0 0 0 / 10%), 0 0 0 3px rgb(193 88 39);

}

/* Lg Screen 2K */
@media screen and (min-width: 1921px) {

.nav-dots span {
	width: 48px;
	height: 48px;
}

.nav-dots span.nav-dot-current:after {
	width: 30px;
	height: 30px;
	top: 9px;
	left: 9px;

}		
}
}



/**************************************************************************************************** Début Animations slider */

.sl-trans-elems .deco{
	-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h1{
	-webkit-animation: moveUp 1s ease-in-out both;
	-moz-animation: moveUp 1s ease-in-out both;
	-o-animation: moveUp 1s ease-in-out both;
	-ms-animation: moveUp 1s ease-in-out both;
	animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote{
	-webkit-animation: fadeIn 0.5s linear 0.5s both;
	-moz-animation: fadeIn 0.5s linear 0.5s both;
	-o-animation: fadeIn 0.5s linear 0.5s both;
	-ms-animation: fadeIn 0.5s linear 0.5s both;
	animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco{
	-webkit-animation: scaleDown 1s ease-in-out both;
	-moz-animation: scaleDown 1s ease-in-out both;
	-o-animation: scaleDown 1s ease-in-out both;
	-ms-animation: scaleDown 1s ease-in-out both;
	animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h1{
	-webkit-animation: fadeOut 1s ease-in-out both;
	-moz-animation: fadeOut 1s ease-in-out both;
	-o-animation: fadeOut 1s ease-in-out both;
	-ms-animation: fadeOut 1s ease-in-out both;
	animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote{
	-webkit-animation: fadeOut 1s linear both;
	-moz-animation: fadeOut 1s linear both;
	-o-animation: fadeOut 1s linear both;
	-ms-animation: fadeOut 1s linear both;
	animation: fadeOut 1s linear both;
}
@-webkit-keyframes roll{
	0% {-webkit-transform: translateX(500px) rotate(360deg);}
	100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
	0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
	0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
	0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
	0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
	0% {-webkit-transform: translateY(40px);}
	100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
	0% {-moz-transform: translateY(40px);}
	100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
	0% {-o-transform: translateY(40px);}
	100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
	0% {-ms-transform: translateY(40px);}
	100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
	0% {transform: translateY(40px);}
	100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-o-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes scaleDown{
	0% {-webkit-transform: scale(1);}
	100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
	0% {-moz-transform: scale(1);}
	100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
	0% {-o-transform: scale(1);}
	100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
	0% {-ms-transform: scale(1);}
	100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
	0% {transform: scale(1);}
	100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-o-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
/* Fin Animations slider */