@charset "UTF-8";

/*!
 * ConvergenWeb - info@convergenceweb.ch
 * Slider pub.css 
 * Copyright (c) 2021 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;
	font-size: 6vw;
	top: 80vh;
	padding-top: 1vh;
	padding-bottom: 1vh;
}

.demo-2 .sl-slider small {
	font-size: 3vw;
	padding-top: 1vh;
    padding-bottom: 1vh;	
	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: 0;
    right: -2%;
    transform: translate(-40%, -3%);
	width: 5vw;
	height: 100vh;
	z-index: 1;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.nav-dots span {
	display: inline-block;
	position: relative;
	width: 2vh;
	height: 2vh;
	border-radius: 50%;
	margin: 2vh;
	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: 2vh;
	-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,50%), 
		inset 0 1px 1px rgba(0,0,0,10%),
		0 0 0 0.15vh rgba(193,88,39,1);
}

.nav-dots span.nav-dot-current:after {
	content: "";
	position: absolute;
	width: 1.3vh;
    height: 1.3vh;
    top: 0.35vh;
    left: 0.16vw;
	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/publicite/enseigne_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-2 {
	background-image: url(../slider/img/publicite/vitrine_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-3 {
	background-image: url(../slider/img/publicite/store_Parmigiani_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-4 {
	background-image: url(../slider/img/publicite/banderole_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-5 {
	background-image: url(../slider/img/publicite/led_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-6 {
	background-image: url(../slider/img/publicite/impression_numerique_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-7 {
	background-image: url(../slider/img/publicite/signaletique_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-8 {
	background-image: url(../slider/img/publicite/panneau_chantier_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-9 {
	background-image: url(../slider/img/publicite/car_publicite_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-10 {
	background-image: url(../slider/img/publicite/voile_publicite_loutan.webp);
	background-size: cover; 
	background-position: center top;
}
.demo-2 .bg-img-11 {
	background-image: url(../slider/img/publicite/sur_mesure_Loutan.webp);
	background-size: cover; 
	background-position: center top;
}

/* Media Queries for custom slider */

@media screen and (max-width: 575px) and (orientation: portrait) {
.demo-2 .sl-slider h1 {
	font-size: 10vw;
}
.demo-2 .sl-slider small {
	font-size: 5vw;
}
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.demo-2 .bg-img-1 {
	background-image: url(../slider/img/publicite/enseigne_loutan.webp);
}
.demo-2 .bg-img-2 {
	background-image: url(../slider/img/publicite/vitrine_loutan_XSP.webp);
}
.demo-2 .bg-img-3 {
	background-image: url(../slider/img/publicite/store_Parmigiani_loutan_XSP.webp);
}
.demo-2 .bg-img-4 {
	background-image: url(../slider/img/publicite/banderole_loutan_XSP.webp);
}
.demo-2 .bg-img-5 {
	background-image: url(../slider/img/publicite/led_loutan.webp);
}
.demo-2 .bg-img-6 {
	background-image: url(../slider/img/publicite/impression_numerique_loutan_XSP.webp);
}
.demo-2 .bg-img-7 {
	background-image: url(../slider/img/publicite/signaletique_loutan_XSP.webp);
}
.demo-2 .bg-img-8 {
	background-image: url(../slider/img/publicite/panneau_chantier_loutan.webp);
}
.demo-2 .bg-img-9 {
	background-image: url(../slider/img/publicite/car_publicite_loutan.webp);
}
.demo-2 .bg-img-10 {
	background-image: url(../slider/img/publicite/voile_publicite_loutan.webp);
}
.demo-2 .bg-img-11 {
	background-image: url(../slider/img/publicite/sur_mesure_Loutan_XSP.webp);
}
.nav-dots {
    top: 5vh;
	display: flex;
	justify-content:  space-evenly;
	vertical-align: middle;
	align-items: center;
	height:93vh;
	width: 13vw;
	flex-wrap: nowrap;
    flex-direction: column;
	transform: none;
}
.nav-dots span {
	display: inline-block;
	position: relative;
	width: 2vh;
	height: 2vh;
	border-radius: 50%;
	margin: 15px !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: 1.2vh;
	height: 1.2vh;
	top: 0.35vh;
	left: 0.8vw !important;
	border-radius: 50%;
	background: rgba(255,255,255,0.8);
}		
}

@media screen and (max-width: 950px) and (orientation: landscape) {
.demo-2 .sl-slider h1 {
	top:80vh !important;
}	
.demo-2 .sl-slider small {
	font-size: 6vh;
	padding-top: 1vh;
    padding-bottom: 1vh;
}

.nav-dots {
	top: 10vh;
}
.nav-dots span {
	width: 3vh;
    height: 3vh;
	margin: 1vh 2.5vw 3.5vh !important;
}
.nav-dots span.nav-dot-current:after {
    width: 2vh;
    height: 2vh;
    top: 0.5vh !important;
    left: 0.24vw !important;
}
}

@media screen and (max-width: 1199px) and (orientation: portrait) {
.nav-dots {
    right: 0%;
}
.nav-dots span.nav-dot-current:after {
    left: 0.45vw;
}
.demo-2 .sl-slider h1 {
	top: 90vh;
}
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
}	

@media screen and (max-width: 1199px) and (orientation: landscape) {
.demo-2 .sl-slider h1 {
	top:85vh;
}	
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.nav-dots span.nav-dot-current:after {
    top: 0.35vh;
    left: 0.26vw;
}
}	

@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 {
	top:85vh;
}	
.nav-dots span.nav-dot-current:after {
    top: 0.35vh;
    left: 0.25vw;
}
.demo-2 .bg-img {
	padding: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
}


/* 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 */