/*!
 * ConvergenceWeb - info@convergenceweb.ch
 * Diserpro Sàrl style.css 
 * Copyright (c) 2023 ConvergenceWeb
 */

/*--------------------------------------------------------------
# General
Logo Diserpro
vert #00965c rgb (0, 150, 92)
bleu #68bdeb rgb (104, 189, 235)
jaune #fdc300 rgb (253, 195, 0)
gris #acafb5 rgb (172, 175, 181)
--------------------------------------------------------------*/

/*--------------------------------------------------------------

# RGPD

--------------------------------------------------------------*/

body {
  transition: all 0.3s ease-in-out;
  overflow: overlay;
  background: white;
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
}

/* Popup */

.c-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.c-ripple-circle-accept {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(47, 208, 74, 0.18);
}
.c-ripple.is-active .c-ripple-circle-accept {
  animation: a-ripple 0.4s ease-in;
}

.c-ripple-circle-enregistre, .c-ripple-circle-configure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(93, 177, 251, 0.4);
}
.c-ripple.is-active .c-ripple-circle-enregistre, .c-ripple.is-active .c-ripple-circle-configure {
  animation: a-ripple 0.4s ease-in;
}

@keyframes a-ripple {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
.switch {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 4vw;
  height: 2vw;
  border-radius: 50px;
  background-color: #fdc300;
  padding: 0.8vh 0 0 0.3vw;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  cursor: pointer;
}

.switch .circle {
  width: 1.2vw;
  height: 1.2vw;
  background-color: #c3c3c3;
  border-radius: 50%;
  transform: translateX(2.2vw);
  background-color: #00965c;
}

.move-circle-right {
  animation: 0.5s moveCircleRight cubic-bezier(0.87, -0.41, 0.19, 1.44) forwards;
  transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
}

.move-circle-left {
  animation: 0.5s moveCircleLeft cubic-bezier(0.87, 0.41, 0.19, 1.44) forwards;
  transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
}

@keyframes moveCircleRight {
  0% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
  100% {
    transform: translateX(2.2vw);
    background-color: #00965c;
  }
}
@keyframes moveCircleLeft {
  0% {
    transform: translateX(2.2vw);
    background-color: #00965c;
  }
  100% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
}
.background-popup {
  position: fixed;
  background-color: black;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 6;
  transition-duration: 0.3s;
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  max-width: 100%;
  height: auto;
  background: #68bdeb;
  padding: 3vh 2vw;
  border-radius: 2vh;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  word-wrap: break-word;
  text-align: justify;
  z-index: 9999;
}
.popup section {
  margin: 0;
  padding: 3vh 0 0;
}
.popup #contentPopupConsent:hover, .popup #configureSection:hover {
  box-shadow: 0 0 0 transparent;
}
.popup .content-popup-theme {
  text-align: left;
}
.popup .content-popup-theme:hover {
  box-shadow: 0 0 0 transparent;
}
.popup .content-popup-theme p {
  padding-right: 5px;
  padding-left: 5px;
  display: block;
  text-align: center;
}
.popup .buttonOk {
  color: black;
  background: transparent;
  padding: 9px 0.57em;
  -webkit-appearance: none;
  position: relative;
  display: block;
  margin: 0;
  vertical-align: middle;
  overflow: visible;
  font-size: 14px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.5px;
  border: 0;
  border-radius: 7px;
  user-select: none;
  transition: all 0.2s ease;
  outline: 0;
  cursor: pointer;
  margin-right: 2%;
  margin-left: auto;
}
.popup .buttonOk:hover {
  background: #acafb5;
}
.popup p {
  font-family: 'SF Pro Display', sans-serif;
  font-size: 1.2vw;
  font-weight:400;
  padding-right: 5px;
  padding-left: 5px;
  
}
.popup a {
  font-family: 'SF Pro Display', sans-serif;
  font-size: 1.2vw;
  font-weight:400;
  color:#00965c;
  padding-right: 5px;
  padding-left: 5px;
  text-decoration: none;
  
}
.popup a:hover {
  font-family: 'SF Pro Display', sans-serif;
  font-size: 1.2vw;
  font-weight:700;
  color:#065f3c;
  padding-right: 5px;
  padding-left: 5px;
  text-decoration: none;
  transition: ease-in-out 0.3s;
  
}
.popup .choice-container-buttons {
  display: flex;
  justify-content: space-around;
 margin-right: 10%;
    margin-left: 10%;
    margin-top: 5vh;
    margin-bottom: 0;
}
.popup .choice-container-buttons .c-button {
  padding: 2vh 2vw;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  overflow: visible;
  font-size: 14px;
  text-align: center;
  font-family: 'SF Pro Display', sans-serif;
  letter-spacing: 0.5px;
  background: transparent;
  border: 0;
  border-radius: 1px;
  user-select: none;
  transition: all 0.2s ease;
  background: transparent;
  outline: 0;
}
.popup .choice-container-buttons .c-button:hover, .popup .choice-container-buttons .c-button:focus {
  text-decoration: none;
}
.popup .choice-container-buttons .c-button:not(:disabled) {
  cursor: pointer;
}
.popup .choice-container-buttons #accept {
  font-family: 'SF Pro Display', sans-serif;
  font-size: 1.2vw;
  font-weight:300;
  color: #fff;
  border-radius: 980px;
  border-width: 0.3em;
  border-style: inset;
  border-color: #00965c;
  transition: ease-in-out 0.3s;
}
.popup .choice-container-buttons #accept:hover {
  background: #00965c;
}
.popup .choice-container-buttons #configure {
  font-family: 'SF Pro Display', sans-serif;
  font-size: 1.2vw;
  font-weight:300;
  color: #fff;
  border-radius: 980px;
  border-width: 0.3em;
  border-style: inset;
  border-color: #00965c;
  transition: ease-in-out 0.3s;
}
.popup .choice-container-buttons #configure:hover {
  background: #00965c;
}
.popup .choice-container-buttons #enregistre {
  display: none;
  font-family: 'SF Pro Display', sans-serif;
  font-size: 1.2vw;
  font-weight:300;
  color: #fff;
  border-radius: 980px;
  border-width: 0.3em;
  border-style: inset;
  border-color: #00965c;
  transition: ease-in-out 0.3s;
}
.popup .choice-container-buttons #enregistre:hover {
  background: #00965c;
}
.popup #configureSection {
  display: none;
}

.popup #configureSection table th {
  color: black;
  text-align: left;
}
.popup #configureSection table .text-switch {
  padding-left: 5%;
  font-family: 'SF Pro Display', sans-serif;
	font-size: 1.2vw;
  font-weight:400;
  height: 7vh;
  line-height:1.2;
}

@media screen and (max-width: 1199px) and (orientation: portrait) {
.popup {
  width: 80vw;
  padding: 3vh 5vw;
  text-align: start;
  line-height: 1.2;
}
.popup table  {
  width: 100%;
}
.popup table > tr {
  width: 100%;
  height: 10vh;
}
.popup p {
  font-size: 2vh;
  padding-right: 0;
  padding-left: 0;
}
.popup a {
  font-size: 2vh;
  
}
.popup a:hover {
  font-size: 2vh;
  
}	
.popup .choice-container-buttons {
    margin-right: 25%;
    margin-left: 25%;
    margin-top: 4vh;
	flex-direction: column;
    flex-wrap: nowrap;
}
.popup .choice-container-buttons #accept {
    font-size: 3.5vw;
    margin-bottom: 3vh;
}

.popup .choice-container-buttons #configure {
    font-size: 3.5vw;
    margin-bottom: 3vh;
}
.popup .choice-container-buttons #enregistre {
  font-size: 3.5vw;
   margin-bottom: 3vh;
}
.popup #configureSection table .text-switch {
    padding-left: 4%;
    font-size: 3.5vw;
}
.switch {
  width: 8vh;
  height: 4vh;
  padding: 0.5vh 0 0 1vw;
}
.switch .circle {
  width: 3vh;
  height: 3vh;
  background-color: #c3c3c3;
  transform: translateX(5.2vw);
  background-color: #00965c;
}

@keyframes moveCircleRight {
  0% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
  100% {
    transform: translateX(5.2vw);
    background-color: #00965c;
  }
}
@keyframes moveCircleLeft {
  0% {
    transform: translateX(5.2vw);
    background-color: #00965c;
  }
  100% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
}
}
@media screen and (max-width: 767px) and (orientation: portrait) {
.switch .circle {
  width: 3vh;
  height: 3vh;
  background-color: #c3c3c3;
  transform: translateX(3.8vh);
  background-color: #00965c;
}

@keyframes moveCircleRight {
  0% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
  100% {
    transform: translateX(3.8vh);
    background-color: #00965c;
  }
}
@keyframes moveCircleLeft {
  0% {
    transform: translateX(3.8vh);
    background-color: #00965c;
  }
  100% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
}	
}

@media screen and (max-width: 1199px) and (orientation: landscape) {
.popup {
    width: 60vw;
}
.popup table > tr {
  width: 100%;
  height: 10vh;
}
.popup p {
    font-size: 2vw;
    padding-right: 0;
    padding-left: 0;
}
.popup a {
	font-size: 2vw;
    padding-right: 0;
    padding-left: 0;
    
}
.popup .choice-container-buttons #accept {
    font-size: 2vw;
}
.popup .choice-container-buttons #configure {
    font-size: 2vw;
}
.popup #configureSection table .text-switch {
    padding-left: 5%;
    font-size: 2vw;
}
.popup .choice-container-buttons #enregistre {
    font-size: 2vw;
}
.switch {
  width: 6vw;
  height: 3vw;
  padding: 0.33vh 0 0 0.3vw;
}

.switch .circle {
  width: 2.5vw;
  height: 2.5vw;
  transform: translateX(1.8rem);
}

@keyframes moveCircleRight {
  0% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
  100% {
    transform: translateX(1.8rem);
    background-color: #00965c;
  }
}
@keyframes moveCircleLeft {
  0% {
    transform: translateX(1.8rem);
    background-color: #00965c;
  }
  100% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
}

}
@media screen and (max-width: 927px) and (orientation: landscape) {
.switch {
    padding: 0.55vh 0 0 0.3vw;
}
.popup table > tr {
    width: 100%;
    height: 15vh;
}
.switch .circle {
    width: 2.5vw;
    height: 2.5vw;
    transform: translateX(1.5rem);
}
@keyframes moveCircleRight {
  0% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
  100% {
    transform: translateX(1.5rem);
    background-color: #00965c;
  }
}
@keyframes moveCircleLeft {
  0% {
    transform: translateX(1.5rem);
    background-color: #00965c;
  }
  100% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
}
}
}

@media screen and (max-width: 767px) and (orientation: landscape) {
.popup {
    width: 60vw;
}
.popup table > tr {
  width: 100%;
  height: 10vh;
}
.switch {
  width: 12vh;
  height: 6vh;
  padding: 0.7vh 0 0 0.4vw;
}
.switch .circle {
  width: 4.5vh;
  height: 4.5vh;
  background-color: #c3c3c3;
  transform: translateX(3.4vw);
  background-color: #00965c;
}

@keyframes moveCircleRight {
  0% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
  100% {
    transform: translateX(3.4vw);
    background-color: #00965c;
  }
}
@keyframes moveCircleLeft {
  0% {
    transform: translateX(3.4vw);
    background-color: #00965c;
  }
  100% {
    transform: translateX(0);
    background-color: #00965c;
	opacity:0.5;
  }
}
.popup #configureSection table .text-switch {
    
    height: 12vh;
}	
}

@media (min-aspect-ratio: 21/9) {
.switch {
    padding: 1vh 0 0 0.3vw;
}
}
/*--------------------------------------------------------------

# Preloader

--------------------------------------------------------------*/
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}
#loader {
    display: block;
    position: relative;
    left: 45.5vw;
    top: 40vh;
    width: 15vh;
    height: 15vh;
    margin: 0;
    border-radius: 50%;
    border: 0.3vh solid transparent;
    border-top-color: #68bdeb;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;
}

#loader:before {
    content: "";
    position: absolute;
    top:1vh;
    left: 1vh;
    right: 1vh;
    bottom: 1vh;
    border-radius: 50%;
    border: 0.3vh solid transparent;
    border-top-color: #00965c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
    content: "";
    position: absolute;
    top: 2vh;
    left: 2vh;
    right: 2vh;
    bottom: 2vh;
    border-radius: 50%;
    border: 0.3vh solid transparent;
    border-top-color: #fdc300;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0%   { 
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
         transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
}
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
}
}

@keyframes spin {
    0%   { 
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
}
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
}
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: rgba(34, 34, 34, 1);
    z-index: 1000;
    -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(0);  /* IE 9 */
    transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
    left: 0;
}

#loader-wrapper .loader-section.section-right {
    right: 0;
}

    /* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);  /* IE 9 */
    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);  /* IE 9 */
    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
	-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
    
.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;  
    transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
    visibility: hidden;
    -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(-100%);  /* IE 9 */
    transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.3s 1s ease-out;  
    transition: all 0.3s 1s ease-out;
}
    
/* JavaScript Turned Off */
.no-js #loader-wrapper {
    display: none;
}

.waScrollToTopBtn {
  display:none !important;
}
/* barre horizontale out */
body {
overflow-x: hidden!important;
width: 100%!important;
	

}

/*--------------------------------------------------------------

# Back to top button

--------------------------------------------------------------*/

#tramearrowup {
    height: auto;
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.cd-top {
display: flex;
height: 6vh;
width: 6vh;
position: fixed;
bottom: 0;
margin: 0 1vw 2.5vh 0;
z-index: 999;
border-radius:1vh;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
background: rgba(104, 189, 235, 1) url(../wa_res/images/arrowup/cd-top-arrow.svg) no-repeat center 50%;
background-size: 3vh;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #00965c;
opacity: 1;
}
@media screen and (max-width: 575px) and (orientation: portrait) {
#tramearrowup {
    justify-content: center!important;
}	
.cd-top {
height: 8vh;
width: 8vh;
margin: 0;
}
}
@media screen and (max-width: 767px) and (orientation: portrait) {
.cd-top {
display: flex;
}
}
@media screen and (max-width: 1199px) and (orientation: landscape) {
.cd-top {
    height: 8vh;
    width: 8vh;
    background-size: 4vh;
	margin: 0 2vw 3.5vh 0;
}
}
@media screen and (max-width: 991px) and (orientation: landscape) {
.cd-top {
    height: 12vh;
    width: 12vh;
    background-size: 6vh;
    margin: 0 1vw 2vh 0;
}
}

/*--------------------------------------------------------------

# arrowdown

--------------------------------------------------------------*/
.fa-angle-double-down {
color: white;
text-decoration: none;
}
.fa-angle-double-down-4x {
color: white;
text-decoration: none;
}

.fa-angle-double-down:link {
color: #fff;
text-decoration: none;
}

.fa-angle-double-down:visited {
color: #fff;
text-decoration: none;
}

.fa-angle-double-down:hover {
color: #fff;
text-decoration: none;
}

.fa-angle-double-down:active {
color: #fff;
text-decoration: none;
}

.arrow {
width:5vh; 
height: auto;  
display: block; 
margin-left:auto; 
margin-right: auto;
text-align: center;
bottom:0;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
  
/* -------------------------------- 
 
#MenuFullPage

-------------------------------- */

.cd-header {
	position: fixed;
	background: transparent;
	height:10vh;
	width: 100vw;
	z-index: 9999;
	box-shadow: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.cd-header .is-fixed {
    /* when the user scrolls down, we hide the header right above the viewport */
    position: fixed;
    top: 0;
    background-color: rgba(68, 68, 68, 0);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}
.cd-header .is-visible {
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.cd-header .menu-is-open {
/* add a background color to the header when the navigation is open */
	background-color: rgba(68, 68, 68, 0);
}
.cd-primary-nav-trigger {
	height: 10vh;
    width: 8vw;
    float: right;
    background-color: transparent;
    position: sticky;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.cd-primary-nav-trigger .cd-menu-icon {
/* this span is the central line of the menu icon */
	margin: 4vh 0 0 0;
	width:5vw;
	height: 0.7vh;
	border-radius: 5px;
	background: linear-gradient(230.46deg, #68bdeb -2.98%, #00965c 68.14%, #fdc300 104.54%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	transition: background-color 0.3s;
}

/* these are the upper and lower lines in the menu icon */
.cd-primary-nav-trigger .cd-menu-icon::before, .cd-primary-nav-trigger .cd-menu-icon:after {
	content: '';
	position: absolute;
	border-radius: 5px;
	background: linear-gradient(230.46deg, #68bdeb -2.98%, #00965c 68.14%, #fdc300 104.54%);
	box-shadow: 0px 1px 10px #000;
	right: 0;
	-webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
	-moz-transition: -moz-transform .3s, top .3s, background-color 0s;
	transition: transform .3s, top .3s, background-color 0s;
}
.cd-primary-nav-trigger .cd-menu-icon::before {
	top: -1.5vh;
	height: 0.7vh!important;
	width: 8vw!important;
}
.cd-primary-nav-trigger .cd-menu-icon::after {
	top: 1.5vh;
    height: 0.7vh!important;
    width: 8vw!important;
}

.cd-primary-nav-trigger .cd-menu-icon.is-clicked {
  background: rgba(255, 255, 255, 0)!important;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before, .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  background-color: #00cc66;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

.cd-primary-nav {
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1002;
  text-align: center;
  padding: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  transition-duration: 1s;
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
   justify-content: space-evenly;
}
.cd-primary-nav li {
  font-family: "SF Pro Display", sans-serif;
  font-size: 2.5vh;
  font-weight: 300;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-primary-nav a {
  color: #fff;
  text-decoration: none;
}
.cd-primary-nav span {
  font-size: 1.5vh;
  font-weight: 700;
  color: #00965c;
  padding-bottom:1vh;
  text-decoration: none;
}
.no-touch .cd-primary-nav a:hover {
  border-radius: 980px;
  padding :1vh 1vw;
  background: linear-gradient(230.46deg, #68bdeb -2.98%, #00965c 68.14%, #fdc300 104.54%);
  color: #fff;
  text-shadow: 0 0 10px #fff;
  text-decoration: none;
}
.cd-primary-nav .cd-label {
  font-family: "SF Pro Display", sans-serif;
  font-size: 3vh;
  color: #00965c;
  text-transform: uppercase;
  font-weight: 700;
}

.cd-primary-nav.is-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}


@media screen and (orientation: landscape) {
.cd-primary-nav-trigger .cd-menu-icon {
    width: 4vh;
    height: 0.7vh;
}
.cd-primary-nav-trigger .cd-menu-icon::before {
    top: -1.75vh;
    height: 0.7vh!important;
    width: 6.5vh!important;
}
.cd-primary-nav-trigger .cd-menu-icon::after {
    top: 1.75vh;
    height: 0.7vh!important;
    width: 6.5vh!important;
}
}

@media screen and (min-width: 1200px) {
.cd-primary-nav-trigger {
    right: 0vw;
}
.cd-primary-nav-trigger .cd-menu-icon {
    width: 3.5vh;
}	
.cd-primary-nav-trigger .cd-menu-icon::before {
    width: 6vh!important;
}
.cd-primary-nav-trigger .cd-menu-icon::after {
     width: 6vh!important;
}
}
/*--------------------------------------------------------------

# accueil KENBURN

--------------------------------------------------------------*/
.slideshow {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
 }

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: kenburns;
          animation-name: kenburns;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  opacity: 1;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
          animation-name: kenburns-1;
  z-index: 4;
}
.slideshow-image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
          animation-name: kenburns-2;
  z-index: 3;
}
.slideshow-image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
          animation-name: kenburns-3;
  z-index: 2;
}
.slideshow-image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
          animation-name: kenburns-4;
  z-index: 1;
}
.slideshow-image:nth-child(5) {
  -webkit-animation-name: kenburns-5;
          animation-name: kenburns-5;
  z-index: 0;
}

@-webkit-keyframes kenburns-1 {
  0%{
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  13.4375% {
    opacity: 1;
  }
  20.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.2117647059);
            transform: scale(1.2117647059);
  }
  100% {
    opacity: 1;
  }
}

@keyframes kenburns-1 {
 0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  13.4375% {
    opacity: 1;
  }
  20.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.2117647059);
            transform: scale(1.2117647059);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes kenburns-2 {
  13.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  20.5625% {
    opacity: 1;
  }
  30.4375% {
    opacity: 1;
  }
  40.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-2 {
  13.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  20.5625% {
    opacity: 1;
  }
  30.4375% {
    opacity: 1;
  }
  40.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-3 {
  30.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  40.5625% {
    opacity: 1;
  }
  50.4375% {
    opacity: 1;
  }
  60.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-3 {
  30.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  40.5625% {
    opacity: 1;
  }
  50.4375% {
    opacity: 1;
  }
  60.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-4 {
  50.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  60.5625% {
    opacity: 1;
  }
  70.4375% {
    opacity: 1;
  }
  80.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-4 {
  50.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  60.5625% {
    opacity: 1;
  }
  70.4375% {
    opacity: 1;
  }
  80.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-5 {
  70.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  80.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes kenburns-5 {
  70.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  80.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


/* -------------------------------- 

INTRO Accueil

-------------------------------- */


.cd-intro {
	transition: ease-in-out 0.3s;
	position: relative;
	height: 100vh;
	width: 100vw;
}
.cd-intro * {
	transition: ease-in-out 0.3s;
}
.cd-intro-content {
  /* vertically align inside its parent */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-intro-content .trame-logo {
  /* Logo+titre */
	width:auto;
	height:fit-content;
	position: absolute;
	padding: 6vh 0 0 3vw;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
}

.cd-intro-content .trame-logo3 {
  /* Logo+titre centre axe droit */
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.cd-intro-content img {
    height: 45vh;
    z-index: 998; 
	position: relative;
}
.cd-intro-content h1 {
    margin: 0;
    font-family: 'SF Pro Display', sans-serif;
    color: #fff;
    text-shadow: 0 0 10px #000;
    font-size: 5vh;
    font-weight: 100;
	z-index: 998;
    letter-spacing: 0.15vh;
    text-align: center;
}
.cd-intro-content h2 {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 8vh;
  font-weight: 600;
  z-index: 998;
  text-align: center;
}
.cd-intro-content .trame-btn1{
	position: relative;
    z-index: 998;
    padding-top: 4vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.cd-intro-content a { 
	position: relative; 
	padding: 2vh 2vw;
	display: flex; 
	text-decoration: none;
	width: auto; 
	overflow: hidden; 
	border-radius: 980px; 
	border-width: 0.5vw;
    border-style: inset;
    border-color: #00965c;
} 
.cd-intro-content a:hover { 
	background-color: #00965c;
	transition: .5s; 
} 
.cd-intro-content a span { 
	position: relative;
	color: #fff; 
	font-family: 'SF Pro Display', sans-serif;
	font-size: 2.5vh;
	font-weight: 300;
	letter-spacing: 1px; 
	z-index: 1; 
} 

@keyframes animate { 
	0% { 
	transform: translate(-50%, -75%) rotate(0deg); 
} 100% { 
	transform: translate(-50%, -75%) rotate(360deg); }
}
.cd-intro-content h1,
.cd-intro-content h1 span,
.cd-intro-content h2,
.cd-intro-content .cd-btn {
  opacity: 0;
  -webkit-animation-duration: 0.8s !important;
  -moz-animation-duration: 0.8s!important;
  animation-duration: 0.8s!important;
  -webkit-animation-delay: 0.3s!important;
  -moz-animation-delay: 0.3s!important;
  animation-delay: 0.3s!important;
  -webkit-animation-fill-mode: forwards!important;
  -moz-animation-fill-mode: forwards!important;
  animation-fill-mode: forwards!important;
}
.no-cssanimations .cd-intro-content h1, .no-cssanimations
.cd-intro-content h1 span, .no-cssanimations
.cd-intro-content p, .no-cssanimations
.cd-intro-content .cd-btn {
  opacity: 1;
}

/* Mobil Screen portrait */
@media screen and (max-width: 1199px) and (orientation: landscape) {
.cd-intro-content img {
    height: 40vh;
}
.cd-intro-content h2 {
    font-size: 8vh;
}
.cd-intro-content h1 {
    font-size: 5vh;
}
.cd-intro-content .trame-btn1 {
    padding-bottom: 15vh;
}
.cd-intro-content a { 
	border-width: 0.2rem;
} 
.cd-intro-content a span {
    font-size: 2.5vw;
}
}

/* Mobil Screen portrait */
@media screen and (orientation: portrait) {
.cd-intro-content .trame-logo {
  /* Logo+titre */
	width: 100%;
    height: 100vh;
	padding: 1rem 1rem 5rem;
	z-index:4;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}
.cd-intro-content .trame-btn1 {
 
	justify-content: center;
}
.cd-intro-content img {
    width: 65vw;
	height:auto;
}
.cd-intro-content h2 {
    font-size: 12vw;
}
.cd-intro-content h1 {
    font-size: 8vw;
	text-align: center;
	text-shadow: 0 0 10px #000;
	font-weight: 200;
}	
.cd-intro-content a span {
    font-size: 7vw;
}
.cd-intro-content a {
    border-width: 0.2rem;
	padding:1vh 4vw;
}
}

/* -------------------------------- 

Video 

-------------------------------- */

.video.cd-intro-content {
  display: block;
  height: 100%;
  position: relative;
}
.video.cd-intro-content * {
  opacity: 1;
}
.video.cd-intro-content .svg-wrapper {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.video.cd-intro-content svg {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  opacity: 0.8;
}
.video.cd-intro-content svg.svg-mask {
  /* this is the svg mask used on desktop version */
  display: none;
}
.video.cd-intro-content p, .video.cd-intro-content .action-wrapper {
  position: absolute;
  z-index: 999;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.video.cd-intro-content h1 {
  bottom: calc(50%  - 50px); 
  z-index: 999;
  margin: 0;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  font-size : 2.5rem;
  font-weight: 700;
  letter-spacing: 0px;
  
}
	
.video.cd-intro-content p {
  bottom: calc(50%  - 30px);
  margin: 0;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  font-size : 5rem;
  min-width: 90%;
}

.video.cd-intro-content .action-wrapper {
  top: calc(50% + 70px);
  min-width: auto;
}
.video.cd-intro-content .cd-btn {
  padding: 12px 10px;
  background-color: rgba(4, 4, 4, 0);
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto;
  border-radius: 980px;
}

.video.cd-intro-content .cd-btn:link {
  background-color: rgba(4, 4, 4, 0.4);
  color: #fff;
  text-decoration: none;
}

.video.cd-intro-content .cd-btn:visited {
  background-color: rgba(4, 4, 4, 0.4);
  color: #fff;
  text-decoration: none;
}

.video.cd-intro-content .cd-btn:hover {
  background: linear-gradient(230.46deg, #68bdeb -2.98%, #00965c 68.14%, #fdc300 104.54%);
  color: #fff;
  text-decoration: none;
}

.video.cd-intro-content .cd-btn:active {
  background-color: #333;
  color: #fff;
  text-decoration: none;
}
.video.cd-intro-content .cd-btn:before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: -1;
   margin: -3px;
   border-radius: inherit;
   background: linear-gradient(230.46deg, #68bdeb -2.98%, #00965c 68.14%, #fdc300 104.54%);
}

.cd-bg-video-wrapper {
  /* background cover video */ 
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../assets/bg-img.jpg) no-repeat center center;
  background-size: cover;
}
.cd-bg-video-wrapper video {
  /* you won't see this element in the html, but it will be injected using js */
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-height: 100%;
  min-width: 100%;
  max-width: none;
  height: auto;
  width: auto;
}
.cd-bg-video-wrapper::after {
  /* never visible - this is used in jQuery to check the current MQ */
  display: none;
  content: 'mobile';
}
@media only screen and (min-width: 768px) {
  .cd-bg-video-wrapper::after {
    content: 'desktop';
}
}

/******************************** Xs BOOTSTRAP MEDIA QUERIES ********************************/

/* Xs Screen portrait */
@media screen and (max-width: 767px) and (orientation: portrait) {

#trame-btn {
    width: 100vw;
    height: auto;
    padding-bottom: 5vh;
	padding-top: 5vh;
    display: flex;
}
.video.cd-intro-content p,
 .video.cd-intro-content h1{
	 bottom: calc(10%  - 1vh);
}

.video.cd-intro-content p {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 17vw;
  font-weight: 600;
  min-width: 90%;
}
.video.cd-intro-content h1 {
  margin: 0;
  top:85vh;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 3.2vh;
  font-weight: 300;
  letter-spacing: 0px;
  min-width: 90%;
}
.video.cd-intro-content .action-wrapper {
  top: 95vh;
  min-width: 295px;
}
.video.cd-intro-content .cd-btn {
   padding: 1vh 3vw;
  background-color: rgba(4, 4, 4, 0.4);
  border-radius: 0px;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  font-size: 2.5vh;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto;
}
.video.cd-intro-content img {
  position:absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  height:60vh; 
  z-index:998;
}		
}

@media screen and (max-width: 767px) and (min-height: 800px) and (orientation: portrait) {
#trame-btn {
    width: 100vw;
    height: auto;
    padding-bottom: 5vh;
	 padding-top: 5vh;
    display: flex;
}
.video.cd-intro-content p,
 .video.cd-intro-content h1{
	 bottom: calc(11%  - 0vh);
}

.video.cd-intro-content p {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 17vw;
  font-weight: 600;
  min-width: 90%;
}
.video.cd-intro-content h1 {
  margin: 0;
  top:85vh;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 2.7vh;
  font-weight: 300;
  letter-spacing: 0px;
  min-width: 90%;
}
.video.cd-intro-content .action-wrapper {
  top: 95vh;
  min-width: 295px;
}
.video.cd-intro-content .cd-btn {
  padding: 1vh 3vw;
  background-color: rgba(4, 4, 4, 0.4);
  border-radius: 0px;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  font-size: 2.5vh;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto;
}
.video.cd-intro-content img {
  position:absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  height:55vh; 
  z-index:998;
}		
}

/* Xs Screen landscape */
@media screen and (max-width: 767px) and (orientation: landscape) {
.video.cd-intro-content p,
 .video.cd-intro-content h1{
	 bottom: calc(15%  - 8vh);
}
.video.cd-intro-content p {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 14vh;
  font-weight: 600;
  min-width: 90%;
}
.video.cd-intro-content h1 {
  margin: 0;
  top:85vh;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 4.3vh;
  font-weight: 300;
  letter-spacing: 0px;
  min-width: 90%;
}
.video.cd-intro-content .action-wrapper {
  top: 95vh;
  min-width: 295px;
}
.video.cd-intro-content .cd-btn {
  padding: 2vh 3vw;
  background-color: rgba(4, 4, 4, 0.4);
  border-radius: 0px;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
 font-size: 5vh;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto;
}
.video.cd-intro-content img {
  position:absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  height:60vh; 
  z-index:998;
}	
}

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

/* Sm Screen portrait */
@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
#trame-btn {
    width: 100%;
    height: auto;
    padding-bottom: 5vh;
	 padding-top: 5vh;
    display: flex;
}
.video.cd-intro-content p,
 .video.cd-intro-content h1{
	 bottom: calc(10%  - 1vh);
}

.video.cd-intro-content p {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 10vh;
  font-weight: 600;
  min-width: 90%;
}
.video.cd-intro-content h1 {
  margin: 0;
  top:85vh;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 3.2vh;
  font-weight: 300;
  letter-spacing: 0px;
  min-width: 90%;
}
.video.cd-intro-content .action-wrapper {
  top: 95vh;
  min-width: 295px;
}
.video.cd-intro-content .cd-btn {
  padding: 0.5vh 1vw;
  background-color: rgba(4, 4, 4, 0.4);
  border-radius: 0px;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  font-size: 2.5vh;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto;
}
.video.cd-intro-content img {
  position:absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  height:60vh; 
  z-index:998;
}	
}

/* Sm Screen landscape */
@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
.video.cd-intro-content p,
 .video.cd-intro-content h1{
	 bottom: calc(10%  - 3vh);
}
.video.cd-intro-content p {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 14vh;
  font-weight: 600;
  min-width: 90%;
}
.video.cd-intro-content h1 {
  margin: 0;
  top:85vh;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 4.3vh;
  font-weight: 300;
  letter-spacing: 0px;
  min-width: 90%;
}
.video.cd-intro-content .action-wrapper {
  top: 95vh;
  min-width: 295px;
}
.video.cd-intro-content .cd-btn {
  padding: 0.5vh 1vw;
  background-color: rgba(4, 4, 4, 0.4);
  border-radius: 0px;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
 font-size: 2.5vh;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto;
}
.video.cd-intro-content img {
  position:absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  height:70vh; 
  z-index:998;
}	
}

/* 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) {
.video.cd-intro-content p,
 .video.cd-intro-content h1{
	 bottom: calc(10%  - 3vh);
}
.video.cd-intro-content p {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 14vh;
  font-weight: 600;
  min-width: 90%;
}
.video.cd-intro-content h1 {
  margin: 0;
  top:85vh;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 4.3vh;
  font-weight: 300;
  letter-spacing: 0px;
  min-width: 90%;
}
.video.cd-intro-content .action-wrapper {
  top: 95vh;
  min-width: 295px;
}
.video.cd-intro-content .cd-btn {
  padding: 1vh 2vw;
  background-color: rgba(4, 4, 4, 0.4);
  border-radius: 0px;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
 font-size: 5vh;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto;
}
.video.cd-intro-content img {
  position:absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  height:70vh; 
  z-index:998;
}	
}

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


/* Md Screen landscape */
@media screen and (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
.video.cd-intro-content p,
 .video.cd-intro-content h1{
	 bottom: calc(10%  - 3vh);
}
.video.cd-intro-content p {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 14vh;
  font-weight: 600;
  min-width: 90%;
}
.video.cd-intro-content h1 {
  margin: 0;
  top:85vh;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 4.3vh;
  font-weight: 300;
  letter-spacing: 0px;
  min-width: 90%;
}
.video.cd-intro-content .action-wrapper {
  top: 95vh;
  min-width: 295px;
}
.video.cd-intro-content .cd-btn {
  padding: 0.5vh 1vw;
  background-color: rgba(4, 4, 4, 0.4);
  border-radius: 0px;
  font-family: 'SF Pro Display', sans-serif;
  color: #fff;
 font-size: 2.5vh;
  font-weight: 200;
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto;
}	
.video.cd-intro-content img {
 position:absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  height:70vh; 
  z-index:998;
}	
}


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

/* Lg Screen I*/
@media screen and (min-width: 1200px) {


.video.cd-intro-content h2 {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 8vh;
  font-weight: 600;
  z-index: 998;
  text-align: left;
}
.video.cd-intro-content h1 {
      margin: 0;
    font-family: 'SF Pro Display', sans-serif;
    color: #fff;
    text-shadow: 0 0 10px #000;
    font-size: 5vh;
    font-weight: 100;
    letter-spacing: 0.15vh;
    text-align: left;
}
.video.cd-intro-content .action-wrapper {
  top: 95vh;
  min-width: auto;
}
.video.cd-intro-content .cd-btn {
  padding: 0.5vh 1vw;
  font-size: 2.5vh;
}
.video.cd-intro-content img {
    height: 45vh;
    z-index: 998; 
}	
}



/*--------------------------------------------------------------

# accueil - nos services

--------------------------------------------------------------*/

#trame-selecteur {
	width: 100vw;
    height: auto;
    display: flex!important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}


/* sélecteur*/
.tilter {
	margin: 0 1vw;
    display: flex!important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.tilter * {
	pointer-events: none;
}

.tilter:hover,
.tilter:focus {
	color: #fff;
	outline: none;
}

/*
.tilter__figure,
.tilter__deco,
.tilter__caption {
	will-change: transform;
}*/

.tilter__figure,
.tilter__image {
	width: 100%;
    height: auto;
    border-radius: 1rem;
	box-shadow: 15px 15px 25px rgba(255, 255, 255, 0.2);
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.tilter__figure > * {
	transform: translateZ(0px); /* Force correct stacking order */
}

.smooth .tilter__figure,
.smooth .tilter__deco--overlay,
.smooth .tilter__deco--lines,
.smooth .tilter__deco--shine div,
.smooth .tilter__caption {
	transition: transform 0.2s ease-out;
}

.tilter__figure {
	position: relative;
}

.tilter__figure::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 5%;
	
}

.tilter__deco {
	position: absolute;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.tilter__deco--overlay {
	background-image:  linear-gradient(45deg, rgba(253, 195, 0, 0.3), rgba(51, 51, 51, 0.4), rgba(104, 189, 235, 0.4));
}

.tilter__deco--shine div {
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
}

.tilter__deco--lines {
	fill: none;
	stroke: #00965c;
	stroke-width: 0.1vw;
}

.tilter__caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 15% 10% 15%;
}

.tilter__title {
	font-family: 'SF Pro Display', sans-serif;
	color: #fff;
	margin: 0;
	font-weight: 500;
	font-size: 1.5vw;
	line-height: 100%;
}

.tilter__description {
	font-family: 'SF Pro Display', sans-serif;
	font-weight: 300;
	color: #fff;
	margin: 1em 0 0 0;
	font-size: 1vw;
	letter-spacing: 0.15em;
}

/* Individual styles */

/* Example 1 (Default) */
.tilter--1 .tilter__figure::before {
	box-shadow: 0 30px 20px rgba(0,0,0,0.5);
}

/* Example 2 (thicker lines, overlay) */
.tilter--2,
.tilter--2:hover,
.tilter--2:focus {
	color: #2e27ad;
}

.tilter--2 .tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(245, 239, 40, 0.6), rgba(164, 22, 169, 0.6));
}

.tilter--2 .tilter__deco--lines {
	stroke: #2e27ad;
	stroke-width: 4px;
}

/* Example 3 (no lines, overlay hard-light) */
.tilter--3 .tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6), rgba(41, 94, 230,0.5));
}

.tilter--3 .tilter__caption {
	padding: 2em;
	text-align: right;
	text-shadow: 0.1em 0.8em 1em rgba(0,0,0,0.35);
}

/* Example 4 (caption sliding in) */
.tilter--4 .tilter__deco--overlay {
	background-image: linear-gradient(20deg, rgb(214, 100, 40), rgba(46, 39, 173, 0.58), rgba(53, 74, 165, 0.6));
}

@media screen and (min-width: 30em) {
	.tilter--4 .tilter__deco--lines {
		transform: scale3d(0.8,0.8,1);
		transition: transform 0.4s;
	}
	.tilter--4:hover .tilter__deco--lines {
		transform: scale3d(1,1,1);
	}
	.tilter--4 .tilter__title,
	.tilter--4 .tilter__description {
		transform: translate3d(0,80px,0);
		opacity: 0;
		transition: transform 0.4s, opacity 0.4s;
	}
	.tilter--4:hover .tilter__description {
		transition-delay: 0.1s;
	}
	.tilter--4:hover .tilter__title,
	.tilter--4:hover .tilter__description {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

/* Example 5 (line animating) */
.tilter--5 .tilter__deco--lines path {
	stroke-dasharray: 1270;
	stroke-dashoffset: 1270;
	transition: stroke-dashoffset 0.7s;
}

.tilter--5:hover .tilter__deco--lines path {
	stroke-dashoffset: 0;
}

.tilter--5 .tilter__figure::before {
	box-shadow: none;
}

/* Example 6 (different line position) */
.tilter--6,
.tilter--6:hover,
.tilter--6:focus {
	color: #2e27ad;
}

.tilter--6 .tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(46, 39, 173, 0.2), rgba(255, 186, 59, 0.58));
}

.tilter--6 .tilter__deco--lines {
	stroke: #2e27ad;
	stroke-width: 6px;
	top: -50px;
	left: -50px;
}

.tilter--6 .tilter__caption {
	padding: 0 4em 5.5em 1em;
}

.tilter--6 .tilter__figure::before {
	box-shadow: none;
}

/* Example 7 (different line) */
.tilter--7 .tilter__deco--overlay {
	background-image: linear-gradient(45deg, rgba(93, 203, 106, 0.48), rgba(59, 239, 255, 0.58));
}

.tilter--7 .tilter__deco--lines {
	stroke-width: 20px;
	transform: scale3d(0.9,0.9,1);
	opacity: 0;
	transition: transform 0.3s, opacity 0.3s;
}

.tilter--7:hover .tilter__deco--lines {
	opacity: 1;
	transform: scale3d(1,1,1);
}

.tilter--7 .tilter__figure::before {
	box-shadow: none;
}

/* Example 8 (different line) */
.tilter--8 {
	perspective: none;
}

.tilter--8 .tilter__figure {
	transform-style: flat;
}

.tilter--8 .tilter__deco--lines {
	stroke: #9255ae;
	stroke-width: 6px;
	mix-blend-mode: color-burn;
}

.tilter--8 .tilter__caption {
	color: #9255ae;
	mix-blend-mode: color-burn;
}

.tilter--8 .tilter__figure::before {
	box-shadow: none;
}




/******************************** MEDIA QUERIES ********************************/

@media screen and (orientation: landscape)  {
#trame-selecteur {
    width: 90vw;
    height: auto;
    margin: 0 4vw 20vh;
    display: flex!important;
    flex-direction: row;
    flex-wrap: nowrap;
	justify-content: space-evenly;
}
.tilter {
    width: 16vw;
    border-radius: 1rem;
}
.tilter__title {
    font-size: 1.6vw;
}
.tilter__description {
    margin: 1em 0 0 0;
    font-size: 1.3vw;
    letter-spacing: 0.15em;
}
}
@media screen and (orientation: portrait)  {
#trame-selecteur {
	padding-bottom: 10vh;
    flex-direction: column;
    align-items: center;
}
.tilter__figure, .tilter__image {
    width: 70vw;
}

.tilter {
	display: grid;
	width: fit-content;
	margin:5vh 0;
}
.tilter__title {
	font-size: 6vw;
	letter-spacing: 2px;
}
.tilter__description {
	margin: 1em 0 0 0;
	font-size: 3vw;
	letter-spacing: 0.15em;
}
.tilter__deco {
    width: 100%; 
}
.tilter__caption {
    padding: 0 12% 10% 15%;
}
}

/* Sm Screen landscape */
@media screen and (max-width: 991px) and (orientation: landscape) {
#trame-selecteur {
    width: 100vw;
    margin: 0 0 20vh;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}	
.tilter {
    width: 30vw;
    border-radius: 1rem;
	margin: 0 0 10vh;
}
.tilter__title {
    font-size: 3vw;
}
.tilter__description {
    font-size: 2vw;
}
}
/*--------------------------------------------------------------

#dernières réalisations

--------------------------------------------------------------*/

#newreferences  {
   width:100vw;
   height:auto;
   margin-top:6vh;
   display:flex;
   flex-direction: column;
   flex-wrap: nowrap;
}
#newreferences h2 {
   margin-bottom: revert !important;
}
#newreferences .title-thin {
    line-height: 100%;
    font-family: 'SF Pro Display', sans-serif;
    color: #000;
    text-align: center;
    text-shadow: 0 0 10px #fff;
    font-size: 5vw;
    font-weight: 200;
}
#newreferences .title-thick {
    line-height: 100%;
    font-family: 'SF Pro Display', sans-serif;
    color: #000;
    text-align: center;
    text-shadow: 0 0 10px #fff;
    font-size: 5vw;
    font-weight: 700;
}
#newreferences .utitle {
	font-family: 'SF Pro Display', sans-serif;
    font-size: 2.5vw;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0px;
    color: #000;
    text-shadow: 0 0 10px #fff;
}


/*--------------------------------------------------------------

# accueil - nos clients

--------------------------------------------------------------*/

/* SLIDER CLIENTS */
#nosclients {
	margin: 10vh 10vw 0vh;
	display:flex!important;
}

#nosclients .slider {
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    cursor: default;
    user-select: none;
    touch-action: none;
}

#nosclients .slider:before {
    left: 0;
    top: 0;
}
#nosclients .slider:after,
.slider:before {
    background: linear-gradient(
        to right,
        #000 0%,
        hsla(0, 0%, 100%, 0) 100%
    );
    content: "";
    height: auto;
    position: absolute;
    width: 200px;
    z-index: 2;
}
#nosclients .slider:after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
#nosclients .slider:after,
.slider:before {
    background: linear-gradient(
        to right,
        #000 0%,
        hsla(0, 0%, 100%, 0) 100%
    );
    content: "";
    height: auto;
    position: absolute;
    width: 10vw;
    z-index: 2;
}

#nosclients .slider .slide-track-1 {
    animation: scroll-l 40s linear infinite;
    display: flex;
    width: 480vw;
}
#nosclients .slider .slide-track-2 {
    animation: scroll-r 40s linear infinite;
    display: flex;
    width: 480vw;
}

#nosclients .slider .slide {
    height: auto;
    width: 20vw;
    display: flex;
    align-items: center;
    text-align: center;
}
#nosclients .slider .slide img {
    width: 15vw;
    padding: 1pc;
    vertical-align: middle;
    margin: 0 auto;
    display: inline-block;
    max-width: 100%;
    height: auto;
}

@keyframes scroll-l {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-20vw * 6));
    }
}
@keyframes scroll-r {
    100% {
        transform: translateX(0);
    }
    0% {
        transform: translateX(calc(-20vw * 6));
    }
}

/* Md Screen portrait */
@media screen and (orientation: portrait) {

#nosclients .slider .slide-track-1 {
   width: 560vw;
}
#nosclients .slider .slide {
    width: 40vw;
}
#nosclients .slider .slide img {
    width: 35vw;
}
@keyframes scroll-l {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-40vw * 6));
    }
}	
}

@media screen and (max-width: 575px) and (orientation: portrait) {
#nosclients .slider .slide {
    width: 45vw;
}
#nosclients .slider .slide img {
    width: 45vw;
}
	
}
@media screen and (max-width: 1199px) and (orientation: landscape) {
#nosclients .slider .slide img {
    width: 20vw;
}
}

@media screen and (orientation: portrait) {
#nosclients {
	margin: 10vh 0vw 0vh!important;
}
}
/*--------------------------------------------------------------

# Footer

--------------------------------------------------------------*/

#trame-footer {
	height: auto;
    padding: 10vh 5vw 5vh;
    display: flex !important;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
#trame-footer p {
	margin-bottom: 0!important;
}

/*************************************************LOGO****/
#trame-footer .trame-logo {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
	justify-content: center;
}
#trame-footer .trame-logo .logo {
    width: 12vw;
    height: auto;
}
#trame-footer .trame-logo .footerDS {
    font-family: 'Megrim', cursive;
    color: #fff;
    font-size: 3vw;
    font-weight: 600;
    line-height: 100%;
    text-align: center;
    margin-top: 1vh;
    margin-bottom: 0.5vh;
}
#trame-footer .trame-logo .footercopyright {
   font-family: 'SF Pro Display', sans-serif;
    font-size: 1vh;
    font-weight: 300;
    text-align: center;
    color: #fff;
    margin-bottom: 0!important;
	margin-block-start: 0!important;
    margin-block-end: 0!important;
}

/*************************************************COORDONNEES****/

#trame-footer .trame-coordonnees {
	margin-right: 4vw;
   display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
#trame-footer .trame-coordonnees2 {
	margin-left: 4vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
#trame-footer .footer-row-add {
	padding-bottom:3vh;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
}
#trame-footer .footer-row-hor {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
}
#trame-footer .footer-row-tel {
	padding-bottom:2vh;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
}
#trame-footer .footer-row-tel2 {
	padding-bottom:2vh;
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
}
#trame-footer .footer-row-email {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
}
#trame-footer picture {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
#trame-footer .footer-coord {
   font-family: 'SF Pro Display', sans-serif;
    font-size: 1vw;
    font-weight: 200;
    text-align: end;
    letter-spacing: 0px;
    color: #fff;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
#trame-footer .footer-trame-icon-g {
    padding-bottom: 2vh;
    display: flex;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
#trame-footer .footer-trame-icon-d {
	padding-bottom: 2vh;
    display: flex;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
#trame-footer .footer-icon {
    width: 1.5vw;
    height: auto;
}
#trame-footer .footer-icon2 {
    width: 1.1vw;
    height: auto;
}
#trame-footer .footer-trame-coord {
    display: flex !important;
    flex-direction: column;
}
#trame-footer address {
	margin-bottom: auto;
}
#trame-footer  a:link.lien {
	font-family: 'SF Pro Display', sans-serif;
    font-weight:200;
	font-size: 1vw;
	color: #fff; 
	text-decoration: none;
	text-align: right;
	margin: 0 auto;
}
#trame-footer  a:visited.lien {
	color: #fff; 
	text-decoration: none;
}
#trame-footer a:hover.lien {
	color: #00965c;
	 font-weight:400;
	text-shadow: 0 0 10px #00965c;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}
#trame-footer * {
    transition: ease-in-out 0.3s;
}
#trame-footer a:active.lien {
	color: #fff;
	text-decoration: none;
}

#trame-footer  a:link.lien2 {
	font-family: 'SF Pro Display', sans-serif;
    font-weight:200;
	font-size: 0.7vw!important;
	color: #fff; 
	text-decoration: none;
	text-align: center;
	display:flex;
}
#trame-footer  a:visited.lien2 {
	color: #fff; 
	text-decoration: none;
	display:flex;
}
#trame-footer a:hover.lien2 {
	color: #00965c;
	 font-weight:400;
	text-shadow: 0 0 10px #00965c;
	text-decoration: none;
	transition: all 0.5s ease 0s;
}

#trame-footer a:active.lien2 {
	color: #fff;
	text-decoration: none;
}

#trame-footer .trame-horaires {
	width:auto!important;
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
    justify-content: flex-start;
}
#trame-footer .footertext {
   font-family: 'SF Pro Display', sans-serif;
   font-size: 1vw;
    font-weight: 200;
    text-align: end;
    letter-spacing: 0px;
    color: #fff;
}
#trame-footer .footer-column {
	display:flex;
	flex-direction: column;
}

/**************** Mobil Screen portrait */
@media screen and (orientation: portrait) {
#trame-footer {
    padding:10vh 10vw 5vh;
	flex-direction: column;
}
#trame-footer .trame-coordonnees {
    width:auto !important;
	padding:0;
	margin-right: 0vw;
}
#trame-footer .trame-coordonnees2 {
    margin-left: 0;
}
#trame-footer .trame-logo {
	margin-bottom: 8vh;
	align-items: center;
}
#trame-footer .trame-logo .logo {
    width: 40vw;
    height: auto;
}
#trame-footer .trame-logo .footerDS {
    font-size: 10vw;
}
#trame-footer .trame-logo .footercopyright {
    font-size: 1.6vw;
}
#trame-footer .footertitle {
    text-align: center;
    letter-spacing: 1vw;
    color: #fff;
    margin-bottom: 7vh;
    margin-top: 2vh;
}
#trame-footer .footer-row-add {
    padding-bottom: 5vh;
}
#trame-footer .bloc-coor {
	display: flex !important;
    flex-direction: column;
    align-items: center;
}
#trame-footer .footer-row {
	margin: 0 0 5vh 0;
	height: auto;
    display: flex !important;
    flex-direction: row;
    justify-content:center;
    align-items: center;
}
#trame-footer .footer-row-tel {
    padding-bottom: 5vh;
}
#trame-footer .footer-row-tel2 {
    padding-bottom: 5vh;
}
#trame-footer .footer-row2 {
    margin: 0 0 5vh 0;
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#trame-footer .footer-trame-coord {
    display: flex !important;
    flex-direction: column;
    height: auto;
    justify-content: center;
}
#trame-footer address {
    letter-spacing: 1px;
    padding:0;
	height:auto;
}
#trame-footer .footer-column {
    padding-bottom: 5vh;
}
#trame-footer .footer-trame-icon {
    display: flex;
    height: auto;
}
#trame-footer .footer-icon {
    width: auto;
	height:4vh;
}
#trame-footer .footer-icon2 {
    width: auto;
    height: 4vh;
}

#trame-footer .footer-trame-icon-g {
    justify-content: center;
}
#trame-footer .footer-trame-icon-d {
    justify-content: center;
}

#trame-footer .footer-coord {
	padding: 0;
	font-size: 5vw;
	text-align: center;
}
#trame-footer .footertext {
    padding: 1vh 0 1vh;
	font-size: 5vw;
	text-align: center;
}

#trame-footer a:link.lien {
    font-size: 5vw;
	text-align: center;
}
#trame-footer  a:link.lien2 {
	font-size: 2.3vw!important;
	text-align: center;
	display:flex;
}

#trame-footer  a:visited.lien2 {
	color: #fff; 
	text-decoration: none;
	display:flex;
}
#trame-footer a:hover.lien2 {
	color: #00965c;
	font-weight:400;
	text-shadow: 0 0 10px #00965c;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}
#trame-footer * {
    transition: ease-in-out 0.3s;
}
#trame-footer a:active.lien2 {
	color: #fff;
	text-decoration: none;
}
}

@media screen and (max-width: 991px) and (orientation: landscape) {
#trame-footer {
    height: auto;
    padding: 15vh 5vw 5vh;
    display: flex !important;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
}
#trame-footer .trame-logo {
    padding-bottom: 15vh!important;
	align-items: center;
}
#trame-footer .trame-logo .logo {
    width:20vw!important;
}
#trame-footer .trame-logo .footerDS {
    font-size: 6vw!important;
    margin-top: 1vh!important;
    margin-bottom: 0.5vh!important;
}
#trame-footer .trame-coordonnees {
    margin-right: 0!important;
}
#trame-footer .footer-row-add {
    padding-bottom: 10vh!important;
}
#trame-footer .footer-trame-icon-g {
    padding-bottom: 5vh!important;
    justify-content: center!important;
}
#trame-footer .footer-icon2 {
    width: 4vw!important;
}
#trame-footer .footer-coord {
    font-size: 2.5vw!important;
    text-align: center!important;
    letter-spacing: 1px!important;
}
#trame-footer .footer-column {
    padding-bottom: 10vh!important;
}
#trame-footer .footer-icon {
    width: 4vw!important;
}
#trame-footer .footertext {
    font-size: 2.5vw!important;
    text-align: center!important;
    letter-spacing: 1px!important;
}
#trame-footer .trame-coordonnees2 {
    margin-left: 0!important;
}
#trame-footer .footer-trame-icon-d {
    padding-bottom: 5vh!important;
	justify-content: center!important;
}
#trame-footer .footer-row-tel {
    padding-bottom: 10vh!important;
    align-items: center!important;
}
#trame-footer a:link.lien {
    font-size: 2.5vw!important;
    letter-spacing: 1px!important;
	text-align: center;
}
#trame-footer .footer-row-tel2 {
    padding-bottom: 10vh!important;
}
#trame-footer a:link.lien2 {
	font-size: 1vw!important;
	text-align: center;
	display:flex;
}
}
@media only screen and (min-width: 991px) and (max-width: 1199px) and (orientation: landscape) {
#trame-footer .trame-logo .logo {
    width: 25vh;
}
#trame-footer .trame-logo .footerDS {
    font-size: 5vh;
}
#trame-footer .trame-coordonnees {
    margin-right: 6vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
#trame-footer .trame-coordonnees2 {
    margin-left: 6vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
#trame-footer .footer-icon2 {
    width: 3vh;
}
#trame-footer .footer-icon {
    width: 3vh;
}
#trame-footer .footer-coord {
    font-size: 2vh;
	letter-spacing: 1px;
}
#trame-footer .footertext {
     font-size: 2vh;
    letter-spacing: 1px;
}
#trame-footer .blue, a:link.blue_glow {
    font-size: 2vh;
	letter-spacing: 1px;
}
}
/* iPad Pro*/
@media only screen and (min-width: 1365px) and (max-width: 1367px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
#trame-footer .trame-logo .logo {
    width: 25vh;
}
#trame-footer .trame-logo .footerDS {
    font-size: 5vh;
}
#trame-footer .trame-coordonnees {
    margin-right: 6vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
#trame-footer .trame-coordonnees2 {
    margin-left: 6vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
#trame-footer .footer-icon2 {
    width: 3vh;
}
#trame-footer .footer-icon {
    width: 3vh;
}
#trame-footer .footer-coord {
    font-size: 2vh;
	letter-spacing: 1px;
}
#trame-footer .footertext {
     font-size: 2vh;
    letter-spacing: 1px;
}
#trame-footer .blue, a:link.blue_glow {
    font-size: 2vh;
	letter-spacing: 1px;
}
}
/*************************************************COPYRIGHT****/
#trame-copyright {
    width: 100vw !important;
    height: 4vh;
	padding: 0 0 0.5vh 1vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
}
#trame-copyright .trame-by {
    width: auto !important;
    height: 3.05vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
#trame-copyright .footerby {
    font-family: 'SF Pro Display', sans-serif;
    font-size: 1vh;
    font-weight: 300;
    text-align: left;
    color: #fff;
	margin-bottom: 0px;
}
#trame-copyright .trame-cwlogo {
	width: auto !important;
    height: 4vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
#trame-copyright .cwlogo {
    width:10vh; 
	height:auto; 
	
}
/* Mobil Screen portrait */
@media screen and (max-width: 1199px) and (orientation: portrait) {

#trame-copyright .footertitle {
    font-size: 2vh;
    text-align: center;
    letter-spacing: 3px;
}
#trame-copyright .footercopyright {
    margin-bottom: 2vh;
}
#trame-copyright .footertext {
    font-size: 2vh;
    text-align: center;
    margin-bottom: 5vh;
}
#trame-copyright .cwlogo {
    width: 12vh;
}
}
@media screen and (max-width: 1199px) and (orientation: landscape) {
#trame-copyright {
    height: auto;
	display:flex!important;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
#trame-copyright .trame-by {
    height: auto;
}
#trame-copyright .footerby {
    font-size: 1vw;
}
#trame-copyright .trame-cwlogo {
    height: auto;
}
#trame-copyright .cwlogo {
    width: 12vw;
}
}
/* -------------------------------- 
 
#*******SLIDER TOP SERVICES

-------------------------------- */
/******************************************************************* style.css*/

.sl-slider {
	position: absolute;
}

/* Slide wrapper and slides */

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
	position: absolute;
	width: 100vw;
	height: 100vh;
} 

/* The duplicate parts/slices */

.sl-content-slice {
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice {
	width: 100%;
	height: 50%;
	left: -200px;
	-webkit-transform: translateY(0%) scale(1);
	-moz-transform: translateY(0%) scale(1);
	-o-transform: translateY(0%) scale(1);
	-ms-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
	top: -200px;
	padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
	top: 50%;
	padding: 0px 200px 200px 200px;
}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice {
	width: 50%;
	height: 100%;
	top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
	left: -200px;
	padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
	left: 50%;
	padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
	position: absolute;
}

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

.sl-slider h1 {
	    display: table-cell;
    vertical-align: middle;
    top: 1vh;
    background: linear-gradient(230.46deg, #68bdeb -15.98%, #00965c 30.14%, #fdc300 84.54%);
    font-family: 'Megrim', cursive;
    font-size: 6vw;
    font-weight: 600;
    line-height: 1.13em;
    border-radius: 0 10vh 10vh 0;
    color: #fff;
    text-align: left;
    max-width: fit-content;
    padding: 0 4vw 0 5vw;
    position: relative;
    z-index: 100;
}
.sl-slider h1 > span {
	font-family: 'SF Pro Display', sans-serif;
	font-weight: 400;
	color: #fff;
	text-shadow: 0 0 5px #000;
	text-align:left;
}

/* Début Custom navigation dots */

.nav-dots {
	position: relative;
	width: auto;
	height: 100vh!important;
	z-index: 1;
	display: flex!important;
    justify-content: center!important;
    vertical-align: middle!important;
    flex-wrap: wrap!important;
    flex-direction: column!important;
    align-content: flex-end!important;
}

.nav-dots span {
	background: rgba(253, 195, 0,1)!important;
	position: relative;
	width: 3vh;
	height:3vh;
	border-radius: 50%;
	margin: 5vh 5vw;
	cursor: pointer;
	-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 0px 0px rgba(255,255,255,0.4), 
		inset 0 0px 0px rgba(0,0,0,0.1),
		0 0 0 0.4vh rgba(0, 150, 92,1);
	display: inline-block;
}

.nav-dots span.nav-dot-current,
.nav-dots span:hover {
	box-shadow: 
		0 0px 0px rgba(0, 150, 92,1), 
		inset 0 0px 0px rgba(0,0,0,1),
		0 0 0 1vh rgba(0, 150, 92,1);
}

/* Fin Custom navigation dots */

/* Début images */
.bg-img-1 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_Securite.webp);
}
.bg-img-2 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_hifi.webp);
}
.bg-img-3 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_Drones.webp);
}
.bg-img-4 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_iT.webp);
}
.bg-img-5 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_Communication.webp);
}
 .bg-img {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
}
.sl-slide-inner {
    position: absolute;
    width: 100vw;
    height: 100vh;
}
.trame-pic {
    position: absolute;
    width: 100vw;
    height: 100vh;
	display:flex;
}
.sl-slide-inner img {
	position: absolute;
    width: 100vw;
	height:auto;
}
/* Fin images */


/* Media Queries for custom slider */

/* Mobil Screen portrait */
@media screen and (max-width: 1199px) and (orientation: portrait) {
.bg-img-1 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_Securite_xs_p.webp);
}
.bg-img-2 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_hifi_xs_p.webp);
}
.bg-img-3 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_drone_xs_p.webp);
}
.bg-img-4 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_iT_xs_p.webp);
}
.bg-img-5 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_Communication_xs_p.webp);
}
.sl-slider h1 {
    top: 3vh;
    font-size: 12vw;
    padding: 0 5vw 0 5vw;
}
}

@media screen and (min-device-aspect-ratio: 21/9) {
.bg-img-1 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_Securite_21_9.webp);
}
.bg-img-2 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_hifi_21_9.webp);
}
.bg-img-3 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_drone_21_9.webp);
}
.bg-img-4 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_iT_21_9.webp);
}
.bg-img-5 {
	background-image: url(../wa_res/images/sliderservices/Diserpro_Communication_21_9.webp);
}
}

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

@media screen and (max-width: 1199px) and (orientation: landscape) {
.nav-dots span {
	width: 3vw;
    height: 3vw;
	margin: 5vh 3vw;
}
}

@media screen and (min-width: 1200px) and (orientation: landscape) {
.nav-dots span {
	margin: 2vh 2vw;
}
}

@media only screen and (min-width:  1365px) and (max-width: 1367px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.nav-dots span {
	width: 3vw;
    height: 3vw;
	margin: 5vh 3vw;
}
}
/****************************************************************** Début Animations slider */

.sl-trans-elems h1{
	-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 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;
}

@-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 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;}
}

/* -------------------------------- 
 
#*******Flex carousel skins.css

-------------------------------- */

.flex-carousel {
    font-family: 'SF Pro Display', sans-serif;
}

.features-carousel .item {
    background-color: #fff;
    border-radius: 3px;
    margin: 5px;
    padding: 30px 15px;
    text-align: center;
}
.features-carousel .item i {
    background-color: #eca500;
    border-radius: 50%;
    color: #fff;
    font-size: 40px;
    height: 70px;
    line-height: 70px;
    width: 70px;
}
.features-carousel .item h3 {
    color: #262626;
    font-weight: 600;
}
.features-carousel .flex-page span {
    border-radius: 3px;
    height: 6px;
    margin: 5px 2px;
    width: 6px;
}
.features-carousel .flex-page.active-page span {
    background-color: #444;
    width: 25px;
}
.simple-image-carousel {
    padding-top: 32px;
}
.simple-image-carousel .item {
    margin: 5px 10px;
    overflow: hidden;
    position: relative;
}
.simple-image-carousel .media-holder img {
    height: auto;
    transition: all 0.6s ease 0s;
    vertical-align: middle;
    width: 100%;
}
.simple-image-carousel .item:hover .media-holder img {
    transform: scale(1.2) rotate(-15deg);
}
.simple-image-carousel .hover-content {
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.4s ease 0s;
    width: 100%;
}
.simple-image-carousel .item:hover .hover-content {
    opacity: 1;
}
.simple-image-carousel .overlay {
    background-color: #000;
    height: 100%;
    opacity: 0.7;
    width: 100%;
}
.simple-image-carousel .link-container {
    margin-top: -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}
.simple-image-carousel .link-container a {
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    transition: all 0.4s ease 0s;
    width: 40px;
}
.simple-image-carousel .link-container a:first-child {
    margin-right: 5px;
}
.simple-image-carousel .link-container a:hover {
    border-color: #eca500;
    color: #eca500;
}
.simple-image-carousel .flex-navigation {
    position: absolute;
    right: 10px;
    top: 0;
}
.simple-image-carousel .flex-navigation .flex-prev, .simple-image-carousel .flex-navigation .flex-next {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #ccc;
    border-radius: 50%;
    color: #999;
    display: block;
    float: left;
    font-size: 14px;
    height: 22px;
    line-height: 18px;
    margin: 0 0 0 2px;
    padding: 0;
    text-align: center;
    text-decoration: none;
    width: 22px;
}
.simple-image-carousel .flex-navigation .flex-prev:hover, .simple-image-carousel .flex-navigation .flex-next:hover {
    border-color: #eca500;
    color: #eca500;
}
.team-showcase-carousel .item {
    margin: 5px 10px;
    text-align: center;
}
.team-showcase-carousel .media-holder img {
    height: auto;
    vertical-align: middle;
    width: 100%;
}
.team-showcase-carousel .social-links {
    background: #fff none repeat scroll 0 0;
    margin-top: -40px;
    opacity: 0;
    position: relative;
    transition: opacity 0.5s ease 0s;
}
.team-showcase-carousel .item:hover .social-links {
    opacity: 1;
}
.team-showcase-carousel .social-links a {
    background: #fff none repeat scroll 0 0;
    color: #555;
    display: inline-block;
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    width: 40px;
}
.team-showcase-carousel .social-links a:hover {
    background-color: #eee;
}
.team-showcase-carousel .detail-container {
    background-color: #fff;
    padding: 18px 15px 10px;
    position: relative;
}
.team-showcase-carousel .detail-title {
    color: #262626;
    font-size: 18px;
    line-height: 1em;
    margin-bottom: 8px;
}
.team-showcase-carousel .detail-subtitle {
    color: #999;
    font-size: 12px;
    line-height: 1em;
    margin-bottom: 10px;
}
.team-showcase-carousel .detail-container p {
    color: #666;
    font-size: 13px;
    line-height: 1.6em;
    text-align: left;
}
.top-nav-box-carousel {
    background: #fff none repeat scroll 0 0;
    padding-top: 40px;
}
.top-nav-box-carousel .item {
    margin: 5px 10px;
}
.top-nav-box-carousel a {
    text-decoration: none;
}
.top-nav-box-carousel a span {
    color: #262626;
    display: block;
    font-size: 16px;
    line-height: 1em;
    padding: 10px 5px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
.top-nav-box-carousel a:hover span {
    color: #eca500;
}
.top-nav-box-carousel a img {
    border: medium none;
    width: 100%;
}
.top-nav-box-carousel .flex-page span {
    height: 6px;
    margin: 4px;
    width: 6px;
}
.top-nav-box-carousel .flex-navigation {
    position: absolute;
    right: 10px;
    top: 0;
}
.top-nav-box-carousel .flex-pagination {
    position: absolute;
    right: 75px;
    top: 0;
}
.top-nav-box-carousel .flex-navigation .flex-prev, .top-nav-box-carousel .flex-navigation .flex-next {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #aaa;
    color: #666;
    margin-right: 0;
    padding: 2px 3px;
}
.top-nav-box-carousel .flex-navigation .flex-prev:hover, .top-nav-box-carousel .flex-navigation .flex-next:hover {
    border: 1px solid #777;
    color: #333;
}
.normal-image-list-carousel {
    padding: 0 40px;
}
.normal-image-list-carousel .item {
    margin: 5px;
}
.normal-image-list-carousel .item a {
    border: 4px solid #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    display: block;
}
.normal-image-list-carousel .item a img {
    border: medium none;
    vertical-align: middle;
    width: 100%;
}
.normal-image-list-carousel .flex-next, .normal-image-list-carousel .flex-prev {
    background-color: transparent;
    color: #777;
    font-size: 28px;
    line-height: 50px;
    margin: -25px 0 0;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 40px;
}
.normal-image-list-carousel .flex-next:hover, .normal-image-list-carousel .flex-prev:hover {
    background-color: transparent;
}
.normal-image-list-carousel .flex-next {
    right: 0;
}
.normal-image-list-carousel .flex-prev {
    left: 0;
}
.logo-showcase .flex-item a img {
    border: medium none;
    border-radius: 3px;
    filter: grayscale(0%);
    max-width: 100%;
    opacity: 1;
    transition: opacity 0.4s ease 0s;
    vertical-align: middle;
}
.logo-showcase .item {
    background-color: #fff;
}
.logo-showcase .item:hover a img {
    border-radius: 3px;
    filter: grayscale(100%);
    opacity: 0.6;
}
.logo-showcase .item {
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    margin: 5px;
    overflow: hidden;
}
.logo-showcase-gray .flex-item a img {
    border: medium none;
    filter: grayscale(100%);
    max-width: 100%;
    opacity: 0.6;
    transition: opacity 0.4s ease 0s;
    vertical-align: middle;
}
.logo-showcase-gray .item:hover a img {
    filter: grayscale(0%);
    opacity: 1;
}
.fullwidth-carousel .media-holder img {
    height: auto;
    vertical-align: middle;
    width: 100%;
}
.fullwidth-carousel .item {
    overflow: hidden;
    position: relative;
}
.fullwidth-carousel .media-holder {
    position: relative;
    top: 0;
    transition: top 0.4s ease 0s;
}
.fullwidth-carousel .item:hover .media-holder {
    top: -50px;
}
.fullwidth-carousel .hover-content {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}
.fullwidth-carousel .overlay {
    background-color: #000;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease 0s;
    width: 100%;
}
.fullwidth-carousel .item:hover .overlay {
    opacity: 0.5;
}
.fullwidth-carousel .link-container {
    margin-top: -18px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 2;
}
.fullwidth-carousel .link-container a {
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 22px;
    height: 46px;
    line-height: 42px;
    margin: 0 5px;
    opacity: 0;
    text-decoration: none;
    transform: translateY(-100%);
    transition: all 0.4s ease 0s;
    width: 46px;
}
.fullwidth-carousel .item:hover .link-container a:hover {
    opacity: 0.8;
    transform: translateY(0%);
}
.fullwidth-carousel .item:hover .link-container a {
    opacity: 1;
    transform: translateY(0%);
}
.fullwidth-carousel .item .detail-container {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    left: 0;
    padding: 14px 20px 3px;
    position: absolute;
    right: 0;
    transform: translateY(100%);
    transition: transform 0.4s ease 0s;
    z-index: 1;
}
.fullwidth-carousel .item .detail-container h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
    text-align: center;
}
.fullwidth-carousel .item .detail-container p {
    color: #999;
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 8px;
    text-align: center;
}
.fullwidth-carousel .item:hover .detail-container {
    transform: translateY(1px);
}
.fullwidth-carousel .flex-prev, .fullwidth-carousel .flex-next {
    background: #4986e7 none repeat scroll 0 0;
    font-size: 14px;
    padding: 5px;
}
.fullwidth-carousel .flex-prev:hover, .fullwidth-carousel .flex-next:hover {
    background: #5491f2 none repeat scroll 0 0;
}
.fullwidth-carousel .flex-prev:active, .fullwidth-carousel .flex-next:active {
    background: #3c79da none repeat scroll 0 0;
}
.testimonial-carousel .item {
    margin: 3px;
}
.testimonial-content {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #666;
    font-size: 13px;
    line-height: 1.7em;
    padding: 20px;
    position: relative;
}
.testimonial-arrow {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAANCAYAAAHaoq71AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAU9JREFUeNpiuHv3rvV/KGAA4a9fv4LZAAHEABO9d+/ef0awCAMDiGAECCCwMpAoDHz79g2sBaYKAwAEEMPPnz//owMGKIYDoFMkwYJAhgBUAO4UmEQSjA0QQDCBjv94wPPnz1FNAOFnz56hKPr37x/IqmoUk5ExULIEpOjx48f/0eUAAgglIHCBHz9+gGzQBOt48eIFXsVAhU3IHlT9/v07LoX/MdwMFGxAV/j06VMUd6N7Dq7wy5cvIFM5cSoG4SdPnsCCrBAjNNAF0GMNGQMEGEwy+9GjR////v37n1zw58+f/w8fPgS5KB6b/6Z++PCBZEPfvXsHMnAKXu8BFUSDbAa5gBD4/fv3/wcPHoAMDSIq3KAWTH779i1OQ9+8eQMycCIu/TgNhhruef/+/f+/fv2CGwhig8SAci749OI1GMmC3levXv0HYSC7hxg9AMbpvGCGEsu8AAAAAElFTkSuQmCC");
    bottom: -12px;
    display: block;
    height: 12px;
    left: 10px;
    position: absolute;
    width: 20px;
}
.testimonial-user {
    margin-top: 20px;
    min-height: 50px;
}
.testimonial-user-thumb {
    border: 2px solid #fff;
    border-radius: 50%;
    float: left;
    height: 50px;
    margin-right: 15px;
    overflow: hidden;
    width: 50px;
}
.testimonial-user-name {
    color: #555;
    font-size: 14px;
    line-height: 26px;
}
.testimonial-user-meta {
    color: #888;
    font-size: 12px;
    line-height: 18px;
}
.testimonial-user-thumb img {
    border-radius: 50%;
    height: 100%;
    width: 100%;
}
.testimonial-carousel .flex-page span {
    border-radius: 3px;
    height: 6px;
    margin: 5px 2px;
    width: 6px;
}
.testimonial-carousel .flex-page.active-page span {
    background-color: #444;
    width: 25px;
}
.portfolio-carousel .item {
    overflow: hidden;
}
.portfolio-carousel .media-holder > img {
    border: medium none;
    transition: all 0.6s ease 0s;
    vertical-align: middle;
    width: 100%;
}
.portfolio-carousel .media-holder {
    overflow: hidden;
    position: relative;
}
.portfolio-carousel .hover-content {
    background-color: rgba(0, 150, 92, 0.5);
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.4s ease 0s;
    width: 100%;
}
.portfolio-carousel .item:hover .hover-content {
    opacity: 1;
}
.portfolio-carousel .item:hover .media-holder > img {
    transform: scale(1.4);
}
.portfolio-carousel .detail-container {
    padding: 15px 20px 5px;
    text-align: center;
}
.portfolio-carousel .link-container {
    margin-top: -60px;
    opacity: 0.9;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 2;
}
.portfolio-carousel .link-container a {
    color: #fff;
    display: inline-block;
    font-size: 5vw;
    line-height: 100%;
    margin: 0 4px;
    text-decoration: none;
    width: 5vw;
}
.portfolio-carousel .detail-container h4 {
	font-family:'SF Pro Display', sans-serif;
	font-weight: 700!important;
    font-size: 6vw;
    font-weight: bold;
	color: #68bdeb;
    line-height: 1em;
    margin: 0 0 5px;
    text-transform: uppercase;
}
.portfolio-carousel .detail-container h4 a {
    color: #68bdeb;
    transition: all 0.4s ease 0s;
	text-decoration:none;
}
.portfolio-carousel .detail-container h4 a:hover {
    color: #00965c;
	text-decoration:none;
}
.portfolio-carousel .detail-container p {
    color: #68bdeb;
    font-family:'SF Pro Display', sans-serif;
	font-weight:300;
    font-size: 5vw;
    font-style: italic;
    line-height: 1em;
    margin: 0 0 10px;
    text-transform: none;
}
.portfolio-carousel .flex-navigation {
    margin-top: 10px;
    position: relative;
    text-align: center;
}
.portfolio-carousel .flex-navigation .flex-prev, .portfolio-carousel .flex-navigation .flex-next {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #ccc;
    border-radius: 50%;
    color: #999;
    display: inline-block;
    font-size: 18px;
    height: 36px;
    line-height: 32px;
    margin: 0 0 0 5px;
    padding: 0;
    text-align: center;
    text-decoration: none;
    width: 36px;
}
.portfolio-carousel .flex-navigation .flex-prev:hover, .portfolio-carousel .flex-navigation .flex-next:hover {
    border-color: #444;
    color: #444;
}

/* Mobil Screen portrait */
@media screen and (max-width: 1199px) and (orientation: portrait) {
.portfolio-carousel .item {
    margin: 0;
}	
}
@media screen and (max-width: 1199px) and (orientation: landscape) {
	.portfolio-carousel .detail-container {
    padding: 4vh 0;
}
.portfolio-carousel .detail-container h4 {
    font-size: 2vw;
	line-height: 1;
    margin-block-start: 0;
    margin-block-end: 0;
}
.portfolio-carousel .detail-container p {
    font-size: 1.5vw;
    line-height: 1;
    margin: 2vh 0;
}	
}

@media screen and (min-width: 1200px) {
.portfolio-carousel .detail-container h4 {
    font-size: 2vw;
}
.portfolio-carousel .detail-container p {
     font-size: 1vw;
}		
}

/* -------------------------------- 
 
#*******Flex carousel animate.css

-------------------------------- */
.flex-fade-in,
.flex-flip-in-x,
.flex-flip-in-y,
.flex-zoom-in {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.flex-fade-in {
    -webkit-animation-name: fade-in;
    animation-name: fade-in;
}
@-webkit-keyframes flip-in-x {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg) scale(0.3);
        transform: perspective(400px) rotateX(90deg) scale(0.3);
        opacity: 0;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg) scale(1);
        transform: perspective(400px) rotateX(0deg) scale(1);
        opacity: 1;
    }
}
@keyframes flip-in-x {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg) scale(0.3);
        -ms-transform: perspective(400px) rotateX(90deg) scale(0.3);
        transform: perspective(400px) rotateX(90deg) scale(0.3);
        opacity: 0;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg) scale(1);
        -ms-transform: perspective(400px) rotateX(0deg) scale(1);
        transform: perspective(400px) rotateX(0deg) scale(1);
        opacity: 1;
    }
}
.flex-flip-in-x {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flip-in-x;
    animation-name: flip-in-x;
}
@-webkit-keyframes flip-in-y {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg) scale(0.3);
        transform: perspective(400px) rotateY(90deg) scale(0.3);
        opacity: 0;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg) scale(1);
        transform: perspective(400px) rotateY(0deg) scale(1);
        opacity: 1;
    }
}
@keyframes flip-in-y {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg) scale(0.3);
        -ms-transform: perspective(400px) rotateY(90deg) scale(0.3);
        transform: perspective(400px) rotateY(90deg) scale(0.3);
        opacity: 0;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg) scale(1);
        -ms-transform: perspective(400px) rotateY(0deg) scale(1);
        transform: perspective(400px) rotateY(0deg) scale(1);
        opacity: 1;
    }
}
.flex-flip-in-y {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flip-in-y;
    animation-name: flip-in-y;
}
@-webkit-keyframes zoom-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes zoom-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform: scale(0.3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.flex-zoom-in {
    -webkit-animation-name: zoom-in;
    animation-name: zoom-in;
}

/* -------------------------------- 
 
#*******Flex carousel.css

-------------------------------- */

.flex-carousel {
    display: none;
    position: relative;
}
.flex-carousel .flex-wrapper-holder {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.flex-carousel .flex-wrapper {
    display: none;
    position: relative;
}
.flex-carousel .flex-wrapper::before, .flex-carousel .flex-wrapper::after {
    content: "";
    display: table;
    line-height: 0;
}
.flex-carousel .flex-wrapper::after {
    clear: both;
}
.flex-carousel .flex-item {
    float: left;
}
.dragging, .dragging * {
    cursor: url("https://mail.google.com/mail/images/2/closedhand.cur"), move;
}
.flex-carousel .flex-wrapper, .flex-carousel .flex-item {
    backface-visibility: hidden;
    transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
}
.flex-theme-default .flex-pagination {
    margin-top: 10px;
    text-align: center;
}
.flex-theme-default .flex-page span {
    background-color: #bbb;
    border-radius: 50%;
    display: block;
    height: 12px;
    margin: 5px;
    transition: all 0.2s ease 0s;
    width: 12px;
}
.flex-theme-default .flex-page {
    cursor: pointer;
    display: inline-block;
}
.flex-theme-default .flex-page.active-page span {
    background-color: #555;
}
.flex-theme-default .flex-page:hover span {
    background-color: #888;
}
.flex-theme-default .flex-navigation {
    text-align: center;
}
.flex-theme-default .flex-prev, .flex-theme-default .flex-next {
    -moz-user-select: none;
    background-color: #bbb;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    margin: 5px;
    padding: 4px 8px;
    transition: all 0.2s ease 0s;
}
.flex-theme-default .flex-prev:hover, .flex-theme-default .flex-next:hover {
    background-color: #555;
}
.flex-theme-default .flex-disable, .flex-theme-default .flex-disable:hover {
    background-color: #bbb;
    cursor: default;
    opacity: 0.4;
}

/* -------------------------------- 
 
#*******Flex carousel/magnific-popup.css

-------------------------------- */

.mfp-bg {
    background: #0b0b0b none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0.8;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1042;
}
.mfp-wrap {
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    outline: medium none !important;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1043;
}
.mfp-container {
    box-sizing: border-box;
    height: 100%;
    left: 0;
    padding: 0 8px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.mfp-container::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.mfp-align-top .mfp-container::before {
    display: none;
}
.mfp-content {
    display: inline-block;
    margin: 0 auto;
    position: relative;
    text-align: left;
    vertical-align: middle;
    z-index: 1045;
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    cursor: auto;
    width: 100%;
}
.mfp-ajax-cur {
    cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: zoom-out;
}
.mfp-zoom {
    cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
    cursor: auto;
}
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
    -moz-user-select: none;
}
.mfp-loading.mfp-figure {
    display: none;
}
.mfp-hide {
    display: none !important;
}
.mfp-preloader {
    color: #ccc;
    left: 8px;
    margin-top: -0.8em;
    position: absolute;
    right: 8px;
    text-align: center;
    top: 50%;
    width: auto;
    z-index: 1044;
}
.mfp-preloader a {
    color: #ccc;
}
.mfp-preloader a:hover {
    color: white;
}
.mfp-s-ready .mfp-preloader {
    display: none;
}
.mfp-s-error .mfp-content {
    display: none;
}
button.mfp-close, button.mfp-arrow {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    outline: medium none;
    overflow: visible;
    padding: 0;
    z-index: 1046;
}
button::-moz-focus-inner {
    border: 0 none;
    padding: 0;
}
.mfp-close {
    color: white;
    font-family: Arial,Baskerville,monospace;
    font-size: 28px;
    font-style: normal;
    height: 44px;
    line-height: 44px;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 44px;
}
.mfp-close:hover, .mfp-close:focus {
    opacity: 1;
}
.mfp-close:active {
    top: 1px;
}
.mfp-close-btn-in .mfp-close {
    color: #333;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    color: white;
    padding-right: 6px;
    right: -6px;
    text-align: right;
    width: 100%;
}
.mfp-counter {
    color: #ccc;
    font-size: 12px;
    line-height: 18px;
    position: absolute;
    right: 0;
    top: 0;
}
.mfp-arrow {
    height: 110px;
    margin: -55px 0 0;
    opacity: 0.65;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 90px;
}
.mfp-arrow:active {
    margin-top: -54px;
}
.mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1;
}
.mfp-arrow::before, .mfp-arrow::after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    border: medium inset transparent;
    content: "";
    display: block;
    height: 0;
    left: 0;
    margin-left: 35px;
    margin-top: 35px;
    position: absolute;
    top: 0;
    width: 0;
}
.mfp-arrow::after, .mfp-arrow .mfp-a {
    border-bottom-width: 13px;
    border-top-width: 13px;
    top: 8px;
}
.mfp-arrow::before, .mfp-arrow .mfp-b {
    border-bottom-width: 21px;
    border-top-width: 21px;
    opacity: 0.7;
}
.mfp-arrow-left {
    left: 0;
}
.mfp-arrow-left::after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid white;
    margin-left: 31px;
}
.mfp-arrow-left::before, .mfp-arrow-left .mfp-b {
    border-right: 27px solid #3f3f3f;
    margin-left: 25px;
}
.mfp-arrow-right {
    right: 0;
}
.mfp-arrow-right::after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid white;
    margin-left: 39px;
}
.mfp-arrow-right::before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3f3f3f;
}
.mfp-iframe-holder {
    padding-bottom: 40px;
    padding-top: 40px;
}
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    max-width: 900px;
    width: 100%;
}
.mfp-iframe-holder .mfp-close {
    top: -40px;
}
.mfp-iframe-scaler {
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
    width: 100%;
}
.mfp-iframe-scaler iframe {
    background: black none repeat scroll 0 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
img.mfp-img {
    box-sizing: border-box;
    display: block;
    height: auto;
    line-height: 0;
    margin: 0 auto;
    max-width: 100%;
    padding: 40px 0;
    width: auto;
}
.mfp-figure {
    line-height: 0;
}
.mfp-figure::after {
    background: #444 none repeat scroll 0 0;
    bottom: 40px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    content: "";
    display: block;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
    width: auto;
    z-index: -1;
}
.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px;
}
.mfp-figure figure {
    margin: 0;
}
.mfp-bottom-bar {
    cursor: auto;
    left: 0;
    margin-top: -36px;
    position: absolute;
    top: 100%;
    width: 100%;
}
.mfp-title {
    color: #f3f3f3;
    line-height: 18px;
    overflow-wrap: break-word;
    padding-right: 36px;
    text-align: left;
}
.mfp-image-holder .mfp-content {
    max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
.mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
    padding: 0;
}
.mfp-img-mobile .mfp-figure::after {
    bottom: 0;
    top: 0;
}
.mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    bottom: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 5px;
    position: fixed;
    top: auto;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
}
.mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
}
.mfp-img-mobile .mfp-close {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    height: 35px;
    line-height: 35px;
    padding: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 35px;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
    transform: scale(0.75);
}
.mfp-arrow-left {
    transform-origin: 0 50% 0;
}
.mfp-arrow-right {
    transform-origin: 100% 50% 0;
}
.mfp-container {
    padding-left: 6px;
    padding-right: 6px;
}
}
.mfp-ie7 .mfp-img {
    padding: 0;
}
.mfp-ie7 .mfp-bottom-bar {
    left: 50%;
    margin-left: -300px;
    margin-top: 5px;
    padding-bottom: 5px;
    width: 600px;
}
.mfp-ie7 .mfp-container {
    padding: 0;
}
.mfp-ie7 .mfp-content {
    padding-top: 44px;
}
.mfp-ie7 .mfp-close {
    padding-top: 0;
    right: 0;
    top: 0;
}

/* -------------------------------- 
 
#*******Flex carousel/fontello.css

-------------------------------- */
@font-face{  font-family:'fontello';  src:url('../wa_res/webfonts/fontello.eot?84489153');  src:url('../wa_res/webfonts/fontello.eot?84489153#iefix') format('embedded-opentype'),       url('../wa_res/webfonts/fontello.woff?84489153') format('woff'),       url('../wa_res/webfonts/fontello.ttf?84489153') format('truetype'),       url('../wa_res/webfonts/fontello.svg?84489153#fontello') format('svg'); font-weight:normal; font-style:normal}  [class^="icon-"]:before,[class*="icon-"]:before{ font-family:"fontello"; font-style:normal; font-weight:normal; speak:none;  display:inline-block; text-decoration:inherit; width:1em; margin-right:.2em; text-align:center;    font-variant:normal; text-transform:none;   line-height:1em;    margin-left:.2em} .icon-pinterest:before{content:'\e800'}.icon-video:before{content:'\e801'}.icon-link:before{content:'\e802'}.icon-chat:before{content:'\e803'}.icon-left-open:before{content:'\e804'}.icon-right-open:before{content:'\e805'}.icon-left-open-mini:before{content:'\e806'}.icon-right-open-mini:before{content:'\e807'}.icon-search:before{content:'\e808'}.icon-right-open-big:before{content:'\e809'}.icon-play:before{content:'\e80a'}.icon-pause:before{content:'\e80b'}.icon-vimeo:before{content:'\e80c'}.icon-twitter:before{content:'\e80d'}.icon-facebook:before{content:'\e80e'}.icon-gplus:before{content:'\e80f'}.icon-left-open-big:before{content:'\e810'}.icon-note-beamed:before{content:'\e811'}

/* -------------------------------- 
 
******* contact

-------------------------------- */
#contact {
	width:100vw;
	height:auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
}
#contact * {
	transition: ease-in-out 0.3s;
}
#contact .trame-logo {
  /* Logo+titre */
	width:100vw;
	height:auto;
	padding: 6vh 0 0 3vw;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
}

#contact .trame-logo3 {
  /* Logo+titre centre axe droit */
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
#contact img {
    height: 45vh;
    z-index: 998;
}
#contact h1 {
    margin: 0;
    font-family: 'SF Pro Display', sans-serif;
    color: #fff;
    text-shadow: 0 0 10px #000;
    font-size: 5vw;
    font-weight: 100;
	line-height: 1;
	z-index: 998;
    letter-spacing: 0.15vh;
    text-align: left;
}
#contact h2 {
  margin: 0;
  font-family: 'Megrim', cursive;
  color: #fff;
  text-shadow: 0 0 10px #000;
  font-size : 5vw;
  font-weight: 600;
  z-index: 998;
  text-align: left;
}
#contact .trame-btn1{
	position: relative;
    z-index: 998;
    padding-top: 4vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#contact a { 
	padding: 2vh 2vw;
	display: flex; 
	text-decoration: none;
	width: auto; 
	overflow: hidden; 
	border-radius: 980px; 
	border-width: 0.5vw;
    border-style: inset;
    border-color: #00965c;
} 
#contact a:hover { 
	background-color: #00965c;
	transition: .5s; 
} 
#contact a span { 
	position: relative;
	color: #fff; 
	font-family: 'SF Pro Display', sans-serif;
	font-size: 2.5vh;
	font-weight: 300;
	text-shadow: 0 0 10px #000;
	letter-spacing: 1px; 
	z-index: 1; 
} 

/********Boxes contact ******/

.serviceBox{
	position:relative;
    border: 0.125vh solid #fff;
    padding: 2vh 1.5vw;
    transition: all 0.5s ease 0s;
	display:flex;
}
.serviceBox:hover{
    border-color: #68bdeb;
}
.serviceBox:before,
.serviceBox:after{
    content: "";
    display: block;
    width: 3vw;
    height: 0.625vh;
    background: #68bdeb;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.serviceBox:before{
    top: -0.375vh;
}
.serviceBox:after{
    bottom: -0.375vh;
}
.serviceBox:hover:before,
.serviceBox:hover:after{
    left: 1.5vw;
    opacity: 1;
}
.serviceBox .service-icon{
    opacity: 0.4;
    transition: all 0.5s ease-in 0s;
	height:auto!important;
	display: flex;
}
.serviceBox .service-icon img{
    width: 3vw;
}
.serviceBox:hover .service-icon{
    opacity: 1;
}
.serviceBox .service-Content{
	padding-left: 1.5vw;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
.serviceBox .title{
	font-family: 'SF Pro Display', sans-serif;
    font-size: 16px;
    font-weight: 600;
	text-align:left;
    color: #fff;
    margin-bottom: 15px;
}
.serviceBox .description{
	font-family: 'SF Pro Display', sans-serif;
    font-size: 1.25vw;
	font-weight:200;
	text-align:left;
    color: #fff;
    line-height: 160%;
	margin-bottom: 0;
}

/********Map ******/

#map  { 
	width: 100vw;
    padding: 0 5vw;
    margin-bottom: 15vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
} 
#map .trame-picture { 
	background: url(../wa_res/images/Diserpro-Jandin.webp) no-repeat center;
    background-size: cover;
    width: 45vw;
	border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
} 


#map .box-adresse { 
   width: 50vw;
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: sepia(100%);
    backdrop-filter: sepia(100%);
    padding: 10vh;
    margin: 10vh;
	border-radius: 1rem;
    font-family: 'SF Pro Display', sans-serif;
    color: #000;
    text-align: center;
    /* text-shadow: 0 0 10px #000; */
    font-size: 1.5vw;
    font-weight: 500;
} 

#map .box-adresse p { 
margin-bottom: 1vh;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


#map iframe { 
	height: auto;
    width: 38.5vw;
    border: 0;
	border-radius: 1rem;
    -webkit-filter: grayscale(0%) sepia(0%) invert(100%);
    -moz-filter: grayscale(0%) sepia(0%) invert(100%);
    -ms-filter: grayscale(0%) sepia(0%) invert(100%);
    -o-filter: grayscale(0%) sepia(0%) invert(100%);
    filter: grayscale(0%) sepia(0%) invert(100%);
}
  
/********formulaire contact ******/
.modal {
	--bs-modal-width: auto!important;
    --bs-modal-border-radius: 0rem!important;
	--bs-modal-footer-gap: 1vh!important;
	    --bs-modal-padding: 5vh!important;
}
.modal-header {
    display: none!important;
}
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #68bdeb;
    border-radius: 0.375rem;
    opacity: .5;
}
.modal-body {
	font-family: 'SF Pro Display', sans-serif!important;
	font-size: 5.5vw!important;
	font-weight:300!important;
	text-align:center!important;
    color: #000!important;
}

.btn {
    --bs-btn-padding-x: 3vw!important;
    --bs-btn-padding-y: 1vh!important;
	--bs-btn-border-radius: 980px!important;
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #68bdeb;
    --bs-btn-border-color: #68bdeb;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
    font-family: 'SF Pro Display', sans-serif!important;
    font-size: 3.5vw!important;
    font-weight: 200!important;
    letter-spacing: 0.2vw!important;
}

@media screen and (orientation: portrait) {
#contact {
    align-content: center;
}
#contact .trame-logo {
	width: auto;
    margin-top: 10vh;
    padding: 3vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}
#contact a { 
	border-width: 1.5vw;
	padding: 2vh 8vw;
} 	
#contact .trame-logo3 {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
}
#contact img {
    height: 60vw;
}
#contact h2 {
    text-align: center;
	font-size: 12vw;
}
#contact h1 {
    font-size: 10vw;
    letter-spacing: 1vw;
    text-align: center;
}
#contact .trame-btn1 {
    padding-top: 4vh;
    justify-content: center;
}
#contact a span {
    letter-spacing: 0.5vw;
}
.serviceBox {
    margin: 2.5vh 10vw;
	padding: 3.75vh 3vw 3.75vh 5vw;
	border: 0.07320644216691069vh solid #dddcdc;
}
.serviceBox .service-Content {
    padding-left: 5.5vw;
}
 .serviceBox .service-icon img {
    width: 10vw;
}
.serviceBox .title {
    font-size: 5vw;
	margin-bottom: 1.2vh;
}
.serviceBox .description {
    font-size: 3.5vw;
}
.serviceBox:before,
.serviceBox:after{
    width: 8vw;
    height: 0.4vh;
}
.serviceBox:hover:before,
.serviceBox:hover:after{
    left: 6vw;
}
.serviceBox:before{
    top: -0.21961932650073207vh;
}
.serviceBox:after{
    bottom: -0.21961932650073207vh;
}
#map {
    width: 100vw;
    padding: 0 10vw;
    margin-bottom: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}
#map .trame-picture {
   width: 100%;
}
#map .box-adresse {
    width: 85%;
    padding: 3vh 3vw;
    margin: 3vh 3vw;
    font-size: 4.5vw;
}
#map iframe {
    height: 30vh;
    width: 100%;
    margin-top: 10vh;
}
.modal-body {
    font-size: 4.5vw!important;
}
 .modal-dialog{
   margin: 10vh 5vw 0!important;
}


}

@media screen and (max-width: 1199px) and (orientation: landscape) {
.serviceBox {
    border: 0.125vh solid #fff;
    padding: 4vh 2.5vw;
}
.serviceBox:before,
.serviceBox:after{
    width: 4.8828125vw;
    height: 0.36603221083455345vh;
}
.serviceBox:before{
    top: -0.21961932650073207vh;
}
.serviceBox:after{
    bottom: -0.21961932650073207vh;
}
.serviceBox:hover:before,
.serviceBox:hover:after{
    left: 2.5vw;
}
.serviceBox .service-icon img{
    width: 5vw;
}
.serviceBox .title{
    font-size: 1.8vw;
    margin-bottom: 1.5vh;
}
.serviceBox .description{
    font-size: 1.5vw;
}
.modal {
	--bs-modal-margin: 15vh 30vw!important;
}
.modal-dialog {
    margin-right: 10vw!important;
    margin-left: 10vw!important;
}
.modal-body {
    font-size: 3.5vw!important;
}
.btn-secondary {
    font-size: 2.5vw!important;
}
}

@media screen and (max-width: 991px) and (orientation: landscape) {
.serviceBox {
    margin: 2.5vh 10vw;
    padding: 3.75vh 3vw 3.75vh 3vw;
    border: 0.07320644216691069vh solid #dddcdc;
}
.serviceBox:hover:before, .serviceBox:hover:after {
    left: 3vw;
}
.serviceBox:before, .serviceBox:after {
    width: 5vw;
    height: 0.7vh;
}
.serviceBox:before {
    top: -0.4vh;
}
.serviceBox:hover:before,
.serviceBox:hover:after{
    left: 4.5vw;
}
.serviceBox .service-icon img {
    width: 7vw;
}
.serviceBox .service-Content {
    padding-left: 3vw;
}
.serviceBox .title {
    font-size: 3vw;
    margin-bottom: 1vh;
}
.serviceBox .description {
    font-size: 2.5vw;
}
}

@media screen and (max-width: 767px) and (orientation: landscape) {
.modal {
    --bs-modal-width: 400px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 1rem 2.5rem;
}
.modal-body {
    font-size: 4.5vw!important;
}	
.btn-secondary {
    font-size: 3.5vw!important;
  
}
}


@media screen and (min-width: 1200px) and (orientation: landscape) {

.serviceBox .service-icon {
    left: 1.796875vw;
}

.serviceBox .title{
	font-size: 1.5vw;
    margin-bottom: 1vh;
}
.modal {
	--bs-modal-margin: 15vh 30vw!important;
}
.modal-body {
	font-size: 2.5vw!important;
}
.modal-dialog {
    margin: 10vh 15vw 0!important;
}
.btn-secondary {
    font-size: 1.5vw!important;
}	
}

/* -------------------------------- 
 
#Mentions légales

-------------------------------- */
#mentions-légales {
	height:auto;
    margin: 15vh 10vw;
    font-family: 'SF Pro Display', sans-serif;
    color: #000;
	display:flex;
	flex-direction: column;
}

#mentions-légales h2{
    font-size: 3vw;
	font-weight: 600;
}
#mentions-légales h3{
    font-size: 2vw;
	font-weight: 600;
}
#mentions-légales h4{
    font-size: 1.5vw;
	font-weight: 600;
}
#mentions-légales p{
    font-size: 1.5vw;
	font-weight: 200;
	text-align:justify;
}

@media screen and (orientation: portrait) {
#mentions-légales {
    margin: 10vh 10vw;
}
#mentions-légales h2 {
    font-size: 5vw;
}
#mentions-légales h3{
    font-size: 4vw;
	font-weight: 600;
}
#mentions-légales h4{
    font-size: 3.5vw;
	font-weight: 600;
}
#mentions-légales p {
    font-size: 3.5vw;
}	
}


/* -------------------------------- 
 
#Balise title

-------------------------------- */
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #fdc300;
	font-family: 'SF Pro Display', sans-serif;
    font-size: 1vh;
	font-weight:500;
    color: #000;
    position: absolute;
    padding: 1vh;
    left: 110%;
    top: -15%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #fff;
	box-sizing: border-box;
    opacity: 0;
    border: 1px solid #fdc300;
	border-radius:0.5vh;
    z-index: 99999;
    visibility: hidden;
	display:flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
[data-title] {
    position: relative;
}
/* Mobil Screen portrait */
@media screen and (max-width: 1199px){
[data-title]:hover:after {
    display:none!important;
}
[data-title]:after {
    display:none!important;
}	
}
/* iPad Pro*/
@media only screen and (min-width: 1365px) and (max-width: 1367px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
[data-title]:after {
     display:none!important;
}
}