.ecoColorBlue {
  color: #0d1e42 !important;
}

.ecoColorOrange {
  color: #ff8100 !important;
}


.hr-border-blue {
  border-top: 1px solid #0d1e42;
}

.hr-border-orange {
  border-top: 1px solid #ff8100;
}

/* Navbar with Logo*/
.logo-image {
  height: 40px;
  overflow: hidden;
  margin-top: -5px;
}


/* Hide ContactForm Fields */
.HCFF {
  display: none;
}

/* Color for Valifation Errors*/
.ValError {
  color: red;
}

.lowercase {
  text-transform: lowercase;
}


/* For Collapsible 
.collapsible {
  background-color: #ffffff;
  color: #0d1e42;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: lightgray;
}

.collapsible:after {
  content: '\002B';
  color: #0d1e42;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  margin-bottom: auto;
}


.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

*/

/* Polygone form Tailwind CSS */
.relative {
  position: relative;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.bottom-auto {
  bottom: auto;
}

.top-0 {
  top: 0;
}

.md\:top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.md\:left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.w-full {
  width: 100%;
}

.absolute {
  position: absolute;
}

.pointer-events-none {
  pointer-events: none;
}

.overflow-hidden {
  overflow: hidden;
}

.md\:overflow-hidden {
  overflow: hidden;
}

.-mt-20 {
  margin-top: -5rem;
}

.bottom-0 {
  bottom: 0;
}

.md\:bottom-0 {
  bottom: 0;
}

.fill-current {
  fill: currentColor;
}

.bg-gray-100 {
  background-color: #f7fafc;
}

.bg-gray-200 {
  background-color: #edf2f7;
}

.bg-gray-300 {
  background-color: #e2e8f0;
}

.bg-gray-500 {
  background-color: #a0aec0;
}

.bg-gray-600 {
  background-color: #718096;
}

.bg-gray-700 {
  background-color: #4a5568;
}

.bg-gray-800 {
  background-color: #2d3748;
}

.bg-gray-900 {
  background-color: #1a202c;
}

.active\:bg-gray-900:active {
  background-color: #1a202c;
}

.text-gray-100 {
  color: #f7fafc;
}

.text-gray-200 {
  color: #edf2f7;
}

.text-gray-300 {
  color: #e2e8f0;
}

.text-gray-400 {
  color: #cbd5e0;
}

.text-gray-500 {
  color: #a0aec0;
}

.text-gray-600 {
  color: #718096;
}

.text-gray-700 {
  color: #4a5568;
}

.text-gray-800 {
  color: #2d3748;
}

.text-gray-900 {
  color: #1a202c;
}

.hover\:text-gray-900:hover {
  color: #1a202c;
}

.bg-Tourkise {
  background-color: #064E72;
}

.active\:bg-Tourkise:active {
  background-color: #064E72;
}

.text-Tourkise {
  color: #064E72;
}

.hover\:text-Tourkise:hover {
  color: #064E72;
}

.bg-EcoBlue {
  background-color: #0d1e42;
}

.active\:bg-EcoBlue:active {
  background-color: #0d1e42;
}

.text-EcoBlue {
  color: #0d1e42;
}

.hover\:text-EcoBlue:hover {
  color: #0d1e42;
}

.bg-EcoOrange {
  background-color: #ff8100;
}

.active\:bg-EcoOrange:active {
  background-color: #ff8100;
}

.text-EcoOrange {
  color: #ff8100;
}

.hover\:text-EcoOrange:hover {
  color: #ff8100;
}

.text-white {
  color: white;
}


/* Floating Help Button */
#HelpBtn {
  display: block;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 20px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  cursor: pointer;
  /* Add a mouse pointer on hover */
}

#HelpBtn:hover {
  background-color: #0d1e42;
  /* Add a background on hover */
}


#myVideo {
  width: 100%;
  max-width: 500px;
  height: auto;
  /*
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  */
}


#HeaderVideo {
  right: 0;
  bottom: 0;
  min-width: 100vw;
  min-height: 100%;
}


.ecoOrange-filter:after {
  background: rgb(255, 194, 0);
  background: -moz-linear-gradient(60deg, rgba(255, 194, 0, .45) 0%, rgba(255, 129, 0, .88) 100%);
  background: -webkit-linear-gradient(60deg, rgba(255, 194, 0, .45) 0%, rgba(255, 129, 0, .88) 100%);
  background: linear-gradient(60deg, rgba(255, 194, 0, .45) 0%, rgba(255, 129, 0, .88) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffc200", endColorstr="#ff8100", GradientType=1);
}

.ecoBlue-filter:after {
  background: rgb(26, 57, 124);
  background: -moz-linear-gradient(60deg, rgba(26, 57, 124, .45) 0%, rgba(13, 30, 66, .88) 100%);
  background: -webkit-linear-gradient(60deg, rgba(26, 57, 124, .45) 0%, rgba(13, 30, 66, .88) 100%);
  background: linear-gradient(60deg, rgba(26, 57, 124, .45) 0%, rgba(13, 30, 66, .88) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a397c", endColorstr="#0d1e42", GradientType=1);
}

.ecoTourkise-filter:after {
  background: rgb(8, 104, 152);
  background: -moz-linear-gradient(60deg, rgba(8, 104, 152, .45) 0%, rgba(6, 78, 114, .88) 100%);
  background: -webkit-linear-gradient(60deg, rgba(8, 104, 152, .45) 0%, rgba(6, 78, 114, .88) 100%);
  background: linear-gradient(60deg, rgba(8, 104, 152, .45) 0%, rgba(6, 78, 114, .88) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#086898", endColorstr="#064e72", GradientType=1);
}

.slideanim {
  visibility: hidden;
}

.slideElement {
  /* The name of the animation */
  animation-name: slideElement;
  -webkit-animation-name: slideElement;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

.slideanimFL {
  visibility: hidden;
}

.slideElementFL {
  /* The name of the animation */
  animation-name: slideElementFL;
  -webkit-animation-name: slideElementFL;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

.slideanimFR {
  visibility: hidden;
}

.slideElementFR {
  /* The name of the animation */
  animation-name: slideElementFR;
  -webkit-animation-name: slideElementFR;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slideElement {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideElement {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the X-axis */
@keyframes slideElementFL {
  0% {
    opacity: 0;
    transform: translateX(-70%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideElementFL {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-70%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}

@keyframes slideElementFR {
  0% {
    opacity: 0;
    transform: translateX(70%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideElementFR {
  0% {
    opacity: 0;
    -webkit-transform: translateX(70%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}

.TitleV {
  background: -moz-linear-gradient(180deg, rgb(252, 181, 109) 0%, rgb(255, 129, 0) 100%);
  background: -webkit-linear-gradient(180deg, rgb(252, 181, 109) 0%, rgb(255, 129, 0) 100%);
  background: linear-gradient(180deg, rgb(252, 181, 109) 0%, rgb(255, 129, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcb56d",endColorstr="#ff8100",GradientType=1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.TitleEco {
  background: rgb(26,57,124);
  background: -moz-linear-gradient(180deg, rgba(26,57,124,1) 0%, rgba(13,30,66,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(26,57,124,1) 0%, rgba(13,30,66,1) 100%);
  background: linear-gradient(180deg, rgba(26,57,124,1) 0%, rgba(13,30,66,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a397c",endColorstr="#0d1e42",GradientType=1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.EcoLoghtBlue {
  color: rgba(26,57,124,1);
}

.pause-cycle-button {
  margin-left: 100px;
  position: absolute;
  bottom: 0px;
}


/* NAVIGATION */
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}

/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #ff8100;
  height: 1px;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}



/* SHIFT */
nav.shift ul li a {
  position:relative;
  z-index: 1;
}
nav.shift ul li a:hover {
  color: #91640F;
}
nav.shift ul li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #ff8100;
  visibility: none;
  opacity: 0;
  z-index: -1;
}
nav.shift ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}